Responsive Web Design. Responsive Design avec HTML 5.0 et CSS3

Dimension: px
Commencer à balayer dès la page:

Download "Responsive Web Design. Responsive Design avec HTML 5.0 et CSS3"

Transcription

1 Ivan MADJAROV Responsive Design avec HTML 5.0 et CSS3 HTML5 CSS3 IvMad La spécification CSS3 Media Queries (requêtes de media) définit les techniques pour adapter de feuilles de styles en fonction du périphérique Web utilisé. Cette pratique est nommé "Responsive Web Design", pour dénoter qu'il s'agit d'adapter dynamiquement le Web design à l'aide de CSS. La méthode permet d'exploiter les avantages de la séparation du contenu et de la forme (présentation): On peut satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité d'un site Web par des navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc.

2 HTML5 CSS3 IvMad Les Media Queries permettent donc de cibler : Le type de média La taille de l'écran La taille de la fenêtre La résolution Le nombre de couleurs L'orientation Fonctionne avec les navigateurs: Chrome Safari Firefox MSIE 9 Opéra HTML5 CSS3 IvMad Les directives peuvent être intégrées au sein même d'une feuille de style grâce à une suivie directement du type. L'exemple suivant évite l'impression des menus, entête et des informations non propres au contenu de la page print { #menu, #footer, aside { display:none; font-size:120%; color:black;

3 HTML5 CSS3 IvMad L'attribut media peut prendre les valeurs suivantes : screen - Écrans handheld - Périphériques mobiles ou de petite taille print - Impression aural (CSS 2.0) / speech (CSS 2.1) - Synthèses vocales braille - Plages braille embossed - Imprimantes braille projection - Projecteurs (ou présentations avec slides) tty - Terminal/police à pas fixe tv - Téléviseur HTML5 CSS3 IvMad Une media query est une expression dont la valeur est toujours vraie ou fausse. Il suffit d'associer les différentes déclarations possibles avec un opérateur logique pour définir l'ensemble des conditions à réunir pour l'application des styles compris dans le bloc adjacent. Les opérateurs logiques peuvent être: and, only et not. Pour obtenir l'équivalent du "ou", il suffit d'énumérer différentes media queries à la suite, séparées par des virgules. L'exemple suivant cible les écrans de largeur inférieure à 640 pixels et supérieure à 200 pixels grâce à la règle max-width associée à la valeur screen and (min-width: 200px) and (max-width: 640px) {.bloc { display:block; clear:both;

4 HTML5 CSS3 IvMad color - support de la couleur (bits/pixel) color-index - périphérique utilisant une table de couleurs indexées aspect-ratio - ratio du périphérique de sortie (par exemple 16/9) device-aspect-ratio - ratio de la zone d'affichage device-height - dimension en hauteur du périphérique device-width - dimension en largeur du périphérique grid - périphérique bitmap ou grille (ex : lcd) height - dimension en hauteur de la zone d'affichage monochrome - périphérique monochrome ou niveaux de gris (bits/pixel) orientation - orientation du périphérique (portait ou landscape) resolution - résolution du périphérique (en dpi, dppx, ou dpcm) scan - type de balayage des téléviseurs (progressive ou interlace) width - dimension en largeur de la zone d'affichage HTML5 CSS3 IvMad Un exemple qui suit la largeur de l'écran. On déclare la couleur de fond (background-color) du body blanche, On déclare une couleur noire pour tout écran (screen) ayant une taille maximum (max-width) de 800px: background-color:white; only screen and (max-width:800px) { background-color:black; color:white [Test] Avec max-device-width, on peut cibler l'écran. Concerne les Smartphones.

5 HTML5 CSS3 IvMad HTML5: le cours en ligne

Pour en expliquer le principe, on se limitera à deux exemples :

Pour en expliquer le principe, on se limitera à deux exemples : Les Media Queries permettent donc de cibler : Le type de média La taille de l'écran La taille de la fenêtre La résolution Le nombre de couleurs L'orientation Pour en expliquer le principe, on se limitera

Plus en détail

Media queries : gérer différentes zones de visualisation

Media queries : gérer différentes zones de visualisation 2 Media queries : gérer différentes zones de visualisation Comme nous l avons vu au chapitre précédent, les CSS3 sont constituées de modules. Media queries est simplement l un d eux. Ce module permet d

Plus en détail

11/02/14 SITE WEB RÉACTIFS CONTEXTE ENVIRONNEMENT NAVIGATEURS PRINCIPES GÉNÉRAUX LES POINTS DE RUPTURE

11/02/14 SITE WEB RÉACTIFS CONTEXTE ENVIRONNEMENT NAVIGATEURS PRINCIPES GÉNÉRAUX LES POINTS DE RUPTURE 11/02/14 CONTEXTE SITE WEB RÉACTIFS S. LANQUETIN ENVIRONNEMENT Clavier (standard, mini, virtuel) Souris / doigt / stylet Rotation de l écran Performances CPU et GPU Capacité de stockage GPS Mobile/fixe

Plus en détail

Travaux dirigés n 10

Travaux dirigés n 10 Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones

Plus en détail

RESPONSIVE WEB DESIGN

RESPONSIVE WEB DESIGN RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le

Plus en détail

Responsive Web Design (RWD)

Responsive Web Design (RWD) Responsive Web Design (RWD) CSS 3 et présentation avancée 1 Qu est ce que le responsive? Démo : Chrome + guardian.com 2 Qu est ce que le responsive? 3 Pourquoi? Explosion de la variété des supports source

Plus en détail

Conception Adaptative "Responsive Web Design"

Conception Adaptative Responsive Web Design Conception Adaptative "Responsive Web Design" Construire des interfaces web qui s'adaptent aux spécificités des terminaux sur lesquelles elles sont vues RWD in the wild quelques exemples : http://incredibletypes.com/

Plus en détail

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite?

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? Medialibs, votre partenaire digital Quoi? Un partenaire pour une gestion globale du digital (un laboratoire R&D, éditeur de logiciels

Plus en détail

BONNES PRATIQUES AUDIENCE MOBILE

BONNES PRATIQUES AUDIENCE MOBILE BONNES PRATIQUES AUDIENCE MOBILE IDENTIFIEZ VOS MOBINAUTES Identifiez les mobinautes de votre base de contacts et leur équipement mobile. Combien de contacts consultent vos emails sur mobile? Quel(s) équipement(s)

Plus en détail

Responsive Design. Technologies du web. Stéphane Bouvry, 2014

Responsive Design. Technologies du web. Stéphane Bouvry, 2014 Responsive Design Technologies du web Stéphane Bouvry, 2014 1. Objectif Utilisation de CSS pour la mise en page 2. Diapos Le responsive design : http://goo.gl/dmh8is 3. Grille fluide Dans cette partie,

Plus en détail

RESPONSIVE DESIGN. Gobelins 2014.2015. Isabelle Biamonti

RESPONSIVE DESIGN. Gobelins 2014.2015. Isabelle Biamonti RESPONSIVE DESIGN Gobelins 2014.2015 Isabelle Biamonti Plan Principe général Exemples Sans responsive Avec responsive Versions séparées Responsive design ou versions séparées? Comment rendre un design

Plus en détail

CSS. papa alsacréations autodidacte sport formation écriture webmobile accessibilité photographie

CSS. papa alsacréations autodidacte sport formation écriture webmobile accessibilité photographie Web Mobile et CSS Comment adapter un design sur mobile Webdesign standards web intégration HTML papa alsacréations autodidacte sport formation écriture webmobile accessibilité photographie CSS www. www.goetter.fr

Plus en détail

UN SITE WEB RESPONSIVE EN UNE HEURE?

UN SITE WEB RESPONSIVE EN UNE HEURE? UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N

Plus en détail

Responsive Web Design. La Rochelle, Avril 2014

Responsive Web Design. La Rochelle, Avril 2014 Responsive Web Design La Rochelle, Avril 2014 Mohamed Belmokhtar Université de La Rochelle Germain Souquet Université de La Rochelle Sommaire Qu est-ce que le responsive web design? Les différentes approches

Plus en détail

Groupe Eyrolles, 2008 ISBN : 978-2-212-12234-3

Groupe Eyrolles, 2008 ISBN : 978-2-212-12234-3 Groupe Eyrolles, 2008 ISBN : 978-2-212-12234-3 9 Les règles de styles Il est nécessaire de bien connaître les règles de styles mais, pour un usage performant de Dreamweaver, il est aussi utile de bien

Plus en détail

Approche Design Méthodologie de conduite de sites web

Approche Design Méthodologie de conduite de sites web Approche Design Méthodologie de conduite de sites web Phase 02 Concevoir le site (C) Conception visuelle N. Vanassche www.nathalievanassche.be Phase 2 (C) : Conception visuelle Facilité d utilisation:

Plus en détail

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design Chapitre 1 : Introduction A. Le développement des sites Web 14 B. Les fonctionnalités de Bootstrap 14 C. La compatibilité avec les navigateurs 15 D. Télécharger les exemples 15 Chapitre 2 : Installer Bootstrap

Plus en détail

Créer un menu adaptable à toutes les résolutions

Créer un menu adaptable à toutes les résolutions Créé par : feektif Ce guide est reproductible en : 30 à 40 min et est d'un niveau : Intermédiaire Pour de tutoriel, nous allons réaliser un menu composé de cinq liens, chacun divisé en 3 éléments. Un curseur

Plus en détail

Débuter avec App Inventor (document ressource).pdf

Débuter avec App Inventor (document ressource).pdf Débuter avec Objectifs Documents Matériel Découvrir l'environnement graphique de conception d'applications Android "". Concevoir des applications simples mettant en œuvre des composants et des techniques

Plus en détail

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations

Plus en détail

JPEG, PNG, PDF, CMJN, HTML, Préparez-vous à communiquer!

JPEG, PNG, PDF, CMJN, HTML, Préparez-vous à communiquer! JPEG, PNG, PDF, CMJN, HTML, Préparez-vous à communiquer! 1 / Contexte L ordinateur La loi du nombre La numérisation = codage d une information en chiffres binaire : 0 1 («bit») 8 bits = 1 octet 1ko = 1024

Plus en détail

1 Module 1 : feuille de style, position des blocs, nombre d éléments

1 Module 1 : feuille de style, position des blocs, nombre d éléments Plugin d'habillage d'eva-web 4 Le plugin d'habillage d'eva-web permet de : adapter la position, la taille des divers éléments la composant choisir les couleurs de fonds des divers secteurs choisir la taille,

Plus en détail

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles

Plus en détail

Tableur EXCEL. 12 Demi-journées (soit 6 jours) pour l'ensemble du programme ci-dessous

Tableur EXCEL. 12 Demi-journées (soit 6 jours) pour l'ensemble du programme ci-dessous Tableur EXCEL Principes des formations plate-forme Les formations sur la plate-forme individualisée sont réalisées sur mesure et permettent de ne travailler que certains besoins précis. Ces formations

Plus en détail

Le langage JavaScript TD N 3. Module IntegWEB MMI 1 2013/2014

Le langage JavaScript TD N 3. Module IntegWEB MMI 1 2013/2014 1 Le langage JavaScript TD N 3 Module IntegWEB MMI 1 2013/2014 Jeu les tables de multiplication 2 Code HTML 3 apprendre les tables de multiplication

Plus en détail

Les unités de taille des polices de caractères

Les unités de taille des polices de caractères Les unités de taille des polices de caractères Deux systèmes permettent d'indiquer les dimensions des éléments en CSS : les unités de taille fixe et les unités de taille relative. C'est la propriété font-size

Plus en détail

Responsive Web design, périphériques mobiles et accessibilité

Responsive Web design, périphériques mobiles et accessibilité Responsive Web design, périphériques mobiles et accessibilité Qui suis-je? Victor Brito Situé près de Paris, dans la France non voisine Intégrateur HTML / CSS freelance Expert Accessiweb en évaluation

Plus en détail

HTML5 et CSS3 pour des sites Responsive Web Design

HTML5 et CSS3 pour des sites Responsive Web Design Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur

Plus en détail

plus besoin de div pour le header footer les le reste de la page des balises existe en HTML5

plus besoin de div pour le header footer les le reste de la page des balises existe en HTML5 HTML5 : allege le code nouvelle balise: pour les lien vers des pages web pour du texte sur les coté pour rajouter un artcicle plus besoin de div pour

Plus en détail

Zen, SASS, responsive design

Zen, SASS, responsive design , SASS, responsive design Felip Manyer i Ballester Res Telæ 21 mai 2013 Felip Manyer i Ballester, SASS, responsive design 1/36 Plan 1 Créer un thème sous Drupal Généralités Concepts à mettre en œuvre Typologie

Plus en détail

Présentation du Framework BootstrapTwitter

Présentation du Framework BootstrapTwitter COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...

Plus en détail

D'un tableur. Regardez >>> Colonne (A)

D'un tableur. Regardez >>> Colonne (A) Quel(s) logiciel(s) utiliser? Open Office Calc ou Microsoft Excel. Dans les deux cas, les informations liées au format des cellules ainsi qu'aux formules contenues dans ce document sont réalisables. Les

Plus en détail

Responsive Web Design

Responsive Web Design Responsive Web Design Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Aix Marseille Université, CNRS LSIS UMR

Plus en détail

Créer son site web. Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin

Créer son site web. Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin Créer son site web Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin 1 Personnaliser l'apparence du site Avec la distribution e-change 2 La version rapide 3 Choisir

Plus en détail

Les feuilles de styles

Les feuilles de styles Qu'est-ce que les feuilles de style? Les feuilles de style CSS pour Cascading Style Sheets en anglais est un langage informatique qui sert à décrire la présentation des documents HTML. L'un des objectifs

Plus en détail

Initiation PHOTO Utilisation du logiciel Gimp

Initiation PHOTO Utilisation du logiciel Gimp COURS 2 Initiation PHOTO Utilisation du logiciel Gimp Sommaire 1. Modifier la luminosité et le contraste des zones sombres 2 1.1. Sélection de l outil lasso magnétique 2 1.2. Capturer les pixels de la

Plus en détail

Microsoft Word 2002 - Niveau débutant

Microsoft Word 2002 - Niveau débutant Liste des objectifs par niveau Microsoft Word 2002 - Niveau débutant...1 Microsoft Word 2002 - Niveau intermédiaire...2 Microsoft Word 2002 Niveau avancé... 3 Microsoft Excel 2002 - Niveau débutant...

Plus en détail

EXCEL 2003. Excel OBJECTIFS DE LA FORMATION PROGRAMME DE FORMATION. Excel 2003, prise en main. Réf: YXC. Durée : 2 jours (7 heures)

EXCEL 2003. Excel OBJECTIFS DE LA FORMATION PROGRAMME DE FORMATION. Excel 2003, prise en main. Réf: YXC. Durée : 2 jours (7 heures) Excel EXCEL 2003 Réf: YXC Durée : 2 jours (7 heures) OBJECTIFS DE LA FORMATION La formation e-learning Excel 2003 vous permettra d'acquérir progressivement et à votre rythme une maîtrise complète de l'outil.

Plus en détail

le futur du RESPONSIVE WEB DESIGN

le futur du RESPONSIVE WEB DESIGN le futur du RESPONSIVE WEB DESIGN AgoraCMS 2014 RAPHAËL GOETTER (odieux) photomontage : @diou RESPONSIVE aujourd hui? c est instable c est une jungle c est complexe RESPONSIVE c est instable

Plus en détail

Introduction à Expression Web 2

Introduction à Expression Web 2 Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer

Plus en détail

INTRODUCTION au TABLEUR

INTRODUCTION au TABLEUR INTRODUCTION au TABLEUR La principale utilisation d un tableur est le calcul automatique de formules. Il est utilisé dans différents domaines de la gestion... Il est destiné à de multiples applications,

Plus en détail

Comment bien imprimer avec Firefox

Comment bien imprimer avec Firefox Comment bien imprimer avec Firefox Si vous imprimez régulièrement des pages web, vous savez que le résultat est parfois surprenant: marges rongées, police illisible ou formatage incomplet. Le navigateur

Plus en détail

AdOps Spécifications techniques publicitaires

AdOps Spécifications techniques publicitaires AdOps Spécifications techniques publicitaires Matériel publicitaire HTML5 (Desktop) Les spécifications suivantes doivent être respectées pour la fourniture de matériel publicitaire HTML. Si vous utilisez

Plus en détail

Personnalisation des templates pour LogiVert 6

Personnalisation des templates pour LogiVert 6 Manuel Personnalisation des templates pour LogiVert 6 Copyrights (c)2013 + LogiVert BV Site web : www.logivert.com PRESENTATION... 3 INTRODUCTION... 3 LES 4 NIVEAUX... 3 NIVEAU1 CONFIGURATION DE TEMPLATE...

Plus en détail

Mobilité, Portabilité, Pérennité

Mobilité, Portabilité, Pérennité Journée JoSy Mars 2007 1 / 30 Mobilité, Portabilité, Pérennité David Delavennat, Philippe Depouilly Centre de Génétique Moléculaire, Institut de Mathématiques de Bordeaux Journée JoSy Mars 2007 Journée

Plus en détail

Contenu Microsoft Access 2007

Contenu Microsoft Access 2007 Contenu Microsoft Access 2007 Module 1 Notions élémentaires de Windows XP Terminologie Souris et clavier Souris Termes utilisés avec la souris Clavier Menus Menus contextuels Fenêtres Boîtes de dialogue

Plus en détail

La mise en page web, feuille de style, cadre.

La mise en page web, feuille de style, cadre. La mise en page web, feuille de style, cadre. L importance du navigateur, son rôle est de lire le code HTML et CSS afin d afficher un résultat visuel à l écran, le problème est que les navigateurs n affichent

Plus en détail

Formation Joomla 3 Réalisez votre Template

Formation Joomla 3 Réalisez votre Template Formation Joomla 3 Réalisez votre Template Flash-comet.com Cours version 2015 1 Sommaire Contenu du cours... 3 Création d'un template avec "Template Créator CK"... 3 Principe de fonctionnement... 3 Ce

Plus en détail

Fiche n 4 Utilisation de Kompozer Table des matières

Fiche n 4 Utilisation de Kompozer Table des matières Fiche n 4 Utilisation de Kompozer Table des matières 1-Travail préparatoire...1 1.1-Contraintes sur les noms de fichier...1 1.2-Préparation du dossier de stockage...1 1.3-Barre d'outils...1 1.4-Création

Plus en détail

LE POSITIONNEMENT CSS. Quelques notions essentielles

LE POSITIONNEMENT CSS. Quelques notions essentielles LE POSITIONNEMENT CSS Quelques notions essentielles Pour éviter ça....element{ padding: 15px; width: 98.32%; /* pas compris, mais ça déborde à 98.33% */ position: relative; /* faut pas enlever */ overflow:

Plus en détail

Freeway 7. Nouvelles fonctionnalités

Freeway 7. Nouvelles fonctionnalités ! Freeway 7 Nouvelles fonctionnalités À propos de ce guide... 3 Nouvelles fonctionnalités en un coup d'oeil... 3 À propos de la conception d'un site web réactif... 3 Travailler avec les pages pour créer

Plus en détail

Identité visuelle de l Etat de Fribourg. Manuel Internet, Intranet et applications Web Janvier 2012

Identité visuelle de l Etat de Fribourg. Manuel Internet, Intranet et applications Web Janvier 2012 Identité visuelle de l Manuel Internet, Intranet et applications Web Janvier 202 Charte graphique Internet, Intranet et applications Web 6.0 Internet, Intranet et applications Web Sommaire 6. Généralités:

Plus en détail

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web

Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web Le Web 1. Qu est-ce que le Web? 7 1.1 Côté serveur : HTTP, FTP, langages, SQL 7 1.2 Côté client : HTML, CSS, JavaScript 10 2. Les langages et leur utilité 10 2.1 HTML 10 2.2 CSS 13 2.3 JavaScript 16 2.4

Plus en détail

G2C INFORMATIQUE CART@JOUR, LE SIG A LA PORTEE DE TOUS CART@JOUR ONLINE GUIDE DE LA CONSULTATION

G2C INFORMATIQUE CART@JOUR, LE SIG A LA PORTEE DE TOUS CART@JOUR ONLINE GUIDE DE LA CONSULTATION G2C INFORMATIQUE CART@JOUR, LE SIG A LA PORTEE DE TOUS CART@JOUR ONLINE GUIDE DE LA CONSULTATION Septembre 2008 I. OUVERTURE DU PROJET... 4 II. CONSULTATION ET PARAMETRES GENERAUX... 5 A. LA ZONE DE LA

Plus en détail

Guide d'utilisation. OpenOffice Calc. AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons

Guide d'utilisation. OpenOffice Calc. AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons Guide d'utilisation OpenOffice Calc AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons 1 Table des matières Fiche 1 : Présentation de l'interface...3 Fiche 2 : Créer un nouveau classeur...4

Plus en détail

Traitement numérique de l'image. Raphaël Isdant - 2009

Traitement numérique de l'image. Raphaël Isdant - 2009 Traitement numérique de l'image 1/ L'IMAGE NUMÉRIQUE : COMPOSITION ET CARACTÉRISTIQUES 1.1 - Le pixel: Une image numérique est constituée d'un ensemble de points appelés pixels (abréviation de PICture

Plus en détail

Plan. L image en informatique Bitmap vs vectoriel Les principaux modèles d images bitmap Formats de stockage Primitives graphiques.

Plan. L image en informatique Bitmap vs vectoriel Les principaux modèles d images bitmap Formats de stockage Primitives graphiques. Plan 1 Introduction 2 Images Bitmap vs vectoriel Les principaux modèles d images bitmap Formats de stockage Primitives graphiques Nicolas SZAFRAN (UJF - UFR IM 2 AG) L3 Info - Image 2014/2015 13 / 86 Plan

Plus en détail

ADAPTATION DES INTERFACES. ROUYER Florian et BENNOUR Salah

ADAPTATION DES INTERFACES. ROUYER Florian et BENNOUR Salah ADAPTATION DES INTERFACES ROUYER Florian et BENNOUR Salah SOMMAIRE Sujet Android Ionic Comparaison Conclusion Sujet Plateforme de partage de livres Fonctionnalités : Géolocalisation Visualisation Map Visualisation

Plus en détail

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver Les bonnes pratiques du concepteur web moderne requièrent l usage des CSS pour la réalisation des mises en page. Les mises

Plus en détail

2.1 Bien cerner le site et le concevoir sur de bonnes bases : - quel est l objectif du site?

2.1 Bien cerner le site et le concevoir sur de bonnes bases : - quel est l objectif du site? A quoi sert le cahier des charges? Un cahier des charges est un document contractuel définissant de façon exhaustive ce que le commanditaire attend de la réalisation d un produit ou d un service. Le cahier

Plus en détail

LES TABLES. Exemple de table :
cellule 1 cellule 2
cellule 3 cellule 4

LES TABLES. Exemple de table : <table> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> <td>cellule 4</td> </tr> </table> LES TABLES Les tables servent pour l'affichage de «données tabulaires», c'est-à-dire des informations présentées logiquement en rangées et en colonnes. Son intégration peut paraitre fastidieuse mais c'est

Plus en détail

Créer un dessin avec Word

Créer un dessin avec Word Créer un dessin avec Word Introduction Introduction Deux écoles, pour la création du dessin La réalisation du dessin Dessin à partir d une image Afficher les dessins Dans le menu, choisir : Outils Option

Plus en détail

Contacts Trafficking: Stéphanie Segain Carole Lafarge Cathy Idel ssegain@nextregie.fr clafarge@nextregie.fr cidel@nextregie.fr 01 71 18 53 36 01 71

Contacts Trafficking: Stéphanie Segain Carole Lafarge Cathy Idel ssegain@nextregie.fr clafarge@nextregie.fr cidel@nextregie.fr 01 71 18 53 36 01 71 CONTRAINTES TECHNIQUES Contacts Trafficking: Stéphanie Segain Carole Lafarge Cathy Idel ssegain@nextregie.fr clafarge@nextregie.fr cidel@nextregie.fr 01 71 18 53 36 01 71 18 53 16 01 71 18 54 64 HTML5

Plus en détail

1 OpenOffice.org 3.0... 15

1 OpenOffice.org 3.0... 15 1 OpenOffice.org 3.0... 15 1.1. Lancer l application générale... 16 1.2. Démarrer une application spécifique d OpenOffice.org... 19 Créer un raccourci sur le Bureau... 20 1.3. Les barres principales...

Plus en détail

Formats de documents numériques 1. Format d images

Formats de documents numériques 1. Format d images Formats de documents numériques 1 Paramètres d une image Ecran Format d images Format : extention jpg, gif, png, tif Poids : 20 Ko, 100 Ko, 1 Mo Qualité : l image est-elle dégradée? L image est-elle zoomable?

Plus en détail

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE Session découverte La Gestion des photos avec Windows Vista / Windows 7 et le traitements d images numériques 1 Généralités sur le jargon de l image numérique

Plus en détail

Les nouveaux comportements... 9

Les nouveaux comportements... 9 Sommaire Du téléphone portable au smartphone... 4 L apparition du smartphone... 4 Le marché français des smartphones... 6 Le smartphone vs. l ordinateur... 7 Les familles des périphériques... 8 Les nouveaux

Plus en détail

Création de maquette web

Création de maquette web Création de maquette web avec Fireworks Il faut travailler en 72dpi et en pixels, en RVB Fireworks étant un logiciel dédié à la création de maquettes pour le web il ne propose que les pixels pour le texte

Plus en détail

Analyse comparative de trois sites d e commerce

Analyse comparative de trois sites d e commerce Analyse comparative de trois sites d e commerce M1105 Par Benjamin ANDRE Romain LUTIC - Jérémy MONIER (A/B) I/ Analyse des sites Amazon.com 1 ère 1 ère impression bonne, site épuré, bien organisé, on reconnait

Plus en détail

Tice -Seconde-Page Web 2015-2016

Tice -Seconde-Page Web 2015-2016 Ouvrez une page web, cliquer doit sur la souris et faite afficher le code source de la page. Quelqu un a écrit ce code pour faire afficher cette page. Nous allons nous aussi écrire du code pour faire afficher

Plus en détail

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE Atelier «pour débuter» La Gestion des photos avec Windows 7 1 Généralités sur le jargon de l image numérique Les différents formats d image : o BMP : il s'agit

Plus en détail

Contacts Trafficking: Stéphanie Segain Carole Lafarge Cathy Idel ssegain@nextregie.fr clafarge@nextregie.fr cidel@nextregie.fr 01 71 18 53 36 01 71

Contacts Trafficking: Stéphanie Segain Carole Lafarge Cathy Idel ssegain@nextregie.fr clafarge@nextregie.fr cidel@nextregie.fr 01 71 18 53 36 01 71 CONTRAINTES TECHNIQUES Contacts Trafficking: Stéphanie Segain Carole Lafarge Cathy Idel ssegain@nextregie.fr clafarge@nextregie.fr cidel@nextregie.fr 01 71 18 53 36 01 71 18 53 16 01 71 18 54 64 Instructions

Plus en détail

EDITER UNE IMAGE. L'imprimante. Deux technologies se partagent le marché éducatif

EDITER UNE IMAGE. L'imprimante. Deux technologies se partagent le marché éducatif EDITER UNE IMAGE L'imprimante Deux technologies se partagent le marché éducatif - les imprimantes à jet d'encre qui fonctionnent par projection de micro gouttes d'encre. Elles sont soit monochromes, soit

Plus en détail

Création d un Site Web

Création d un Site Web Session2 Etapes Faciles Pour Réussir Sur Internet Création d un Site Web Mounir_ahlyege@hotmail.com 1 CSS :Cascading Style Sheets en français feuilles de style en cascade C'est un autre langage qui vient

Plus en détail

Programme de Formation Open Office Base Fonctions avancées

Programme de Formation Open Office Base Fonctions avancées ENVIRONNEMENT GÉNÉRALITÉS Lancer Microsoft Excel 2010 Quitter Microsoft Excel 2010 Découvrir la fenêtre de l'application Excel 2010 Découvrir la fenêtre du classeur Utiliser le ruban Découvrir l'onglet

Plus en détail

Modèle de charte graphique

Modèle de charte graphique Modèle de charte graphique Pour donner à l utilisateur des repères au sein d un site et faciliter sa visite, il est impératif de développer une cohérence pour l ensemble de vos pages. Lors de la conception

Plus en détail

Spétechs Mobile. Octobre 2013

Spétechs Mobile. Octobre 2013 Spétechs Mobile Octobre 2013 Appli ios Appli Android Site Mobile Les clicks URL Appli ios Créa en dur HTML5 Créa en dur Banner Interstitiel Interstitiel Vidéo Bouncing / traveling Image Bouncing / traveling

Plus en détail

SITE WEB Service Client. Charte graphique et technique

SITE WEB Service Client. Charte graphique et technique Service Client Charte graphique et technique 1 Sommaire a / MISE EN FORME Introduction... 3 Les logos Veolia... 4 Police & taille - généralité... 6 Police & taille gabarits principaux... 7 Palette de couleur...

Plus en détail

Comment coder une image en langage binaire? Michel Futtersack, Faculté de Droit, Université Paris Descartes

Comment coder une image en langage binaire? Michel Futtersack, Faculté de Droit, Université Paris Descartes Comment coder une image en langage binaire? Michel Futtersack, Faculté de Droit, Université Paris Descartes Les deux grands types d'images numériques Image matricielle (bitmap) Image vectorielle Image

Plus en détail

Recadrer une image dans un format non-standard et l'imprimer

Recadrer une image dans un format non-standard et l'imprimer Recadrer une image dans un format non-standard et l'imprimer Vous possédez un pêle-mele photos dont les cadres ne sont pas aux formats standards. Pour utiliser ces cadres, vous devez donc recadrer vos

Plus en détail

NFA 074. 06 - Projet HTML-CSS

NFA 074. 06 - Projet HTML-CSS NFA 074 06 - Projet HTML-CSS 06 - Projet HTML-CSS Le plus grand soin a été apporté à la réalisation de ce support pédagogique afin de vous fournir une information complète et fiable. Cependant, le Cnam

Plus en détail

CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style. Conclusion TD/TP 2 / 16 CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style.

CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style. Conclusion TD/TP 2 / 16 CSS. M. Sassolas. L3Pro. Cours 2. Introduction. Le style. Cascading style sheets () pour XML Plan de la séance BDISE XML Mathieu Sassolas 1 IUT de Sénart Fontainebleau Département Informatique 2 La sélection des éléments où s applique le style Année 2015-2016

Plus en détail

LES TABLEAUX. Créer un tableau élémentaire

LES TABLEAUX. Créer un tableau élémentaire LES TABLEAUX Il y a deux façons de créer dans un article : directement dans SPIP pour des tableaux élémentaires avec un éditeur html pour des tableaux complexes. Créer un tableau élémentaire Les colonnes

Plus en détail

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le

Plus en détail

WEB. Travailler la résolution de vos pages

WEB. Travailler la résolution de vos pages GÉRER LES PAGES WEB Vous avez appris dans les sections 2 et 3 à créer le contenu textuel et graphique de vos pages Web. Cette section explique comment utiliser FrontPage pour placer des objets sur une

Plus en détail

Après l'ouverture d'une image, Cliquer sur: Image>Redimensionner>Taille de l'image

Après l'ouverture d'une image, Cliquer sur: Image>Redimensionner>Taille de l'image La Taille de l'image Après l'ouverture d'une image, Cliquer sur: Image>Redimensionner>Taille de l'image La Fenêtre «Taille de l'image» s'ouvre: 2 parties distinctes dans ce document: 1_ «Dimension de pixel»:

Plus en détail

Chapitre 22 Optimisation pour diffusion à l'écran, pour le web

Chapitre 22 Optimisation pour diffusion à l'écran, pour le web 1 1 9 9 7 7 Optimisation pour diffusion à l'écran, pour le web Diffusion pour le web........................ 31 Les paramètres avant l exportation................. 31 Optimisation pour le web......................

Plus en détail

Introduction à la programmation web

Introduction à la programmation web Introduction à la programmation web Nouvelles Technologies Dr. Thé Van LUONG The-Van.Luong@heig-vd.ch HEIG-VD Switzerland 8 octobre 2015 1/34 8 octobre 2015 1 / 34 Plan 1 État de l art des langages orientés

Plus en détail

TP Initiation au langage HTML

TP Initiation au langage HTML TP Initiation au langage HTML (1) Rappels de quelques généralités Un fichier HTML n'est pas compilé (ce n'est pas un programme) Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant

Plus en détail

Spétechs Mobile. D e r n i è r e m i s e à j o u r : a o û t 2014

Spétechs Mobile. D e r n i è r e m i s e à j o u r : a o û t 2014 Spétechs Mobile D e r n i è r e m i s e à j o u r : a o û t 2014 Généralités Envoi des créas à Amandine Canu, responsable traffic mobile : acanu@hi-media.com Mettre en copie de votre e-mail votre contact

Plus en détail

3 : LA COMPRESSION DE DONNEES

3 : LA COMPRESSION DE DONNEES 3 : LA COMPRESSION DE DONNEES Représentation de l information Algorithmique Langages et programmation Architectures matérielles CONNAISSANCES ABORDEES Numérisation : Coder sous forme d'un code standard

Plus en détail

Une interface moderne et multi devices avec Drupal Focus sur Omega

Une interface moderne et multi devices avec Drupal Focus sur Omega Une interface moderne et multi devices avec Drupal Focus sur Omega Romain Jarraud Formateur / consultant Drupal Anne- Sophie Picot Chef de projets Publier du contenu aujourd hui > Plateformes de consultation

Plus en détail

Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design

Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design Grilles Fluides CSS CREATION D UNE GRILLE FLUIDE Grille fluide Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design WWW.SUTTERLITY.FR

Plus en détail

96 Feuilles de style en cascade

96 Feuilles de style en cascade Microsoft Expression Web (version 2) 96 Feuilles de style en cascade Définir les styles Dans la création de pages Web valides, un principe fondamental apparaît : le contenu doit être séparé de sa présentation.

Plus en détail

Portail d'urbanisme des droits du sol Cartographie interactive. Guide utilisateur --------------

Portail d'urbanisme des droits du sol Cartographie interactive. Guide utilisateur -------------- Portail d'urbanisme des droits du sol Cartographie interactive Guide utilisateur -------------- Lien internet : http://carto.geo-centre.fr/1/ddt41_portail_urbanisme.map Sommaire 1 Écran d accueil 2 Outils

Plus en détail

Lancer Publisher 2013 9. Quitter Publisher 2013 10. Description de l écran 10. Utiliser/gérer le ruban 12. Découvrir l onglet FICHIER 14

Lancer Publisher 2013 9. Quitter Publisher 2013 10. Description de l écran 10. Utiliser/gérer le ruban 12. Découvrir l onglet FICHIER 14 Généralités Lancer Publisher 2013 9 Quitter Publisher 2013 10 Description de l écran 10 Utiliser/gérer le ruban 12 Découvrir l onglet FICHIER 14 Annuler les dernières manipulations 15 Rechercher de l aide

Plus en détail

Conception de sites web. Feuille de styles CSS

Conception de sites web. Feuille de styles CSS Conception de sites web Feuille de styles CSS M i s e e n p a g e : s o l u t i o n «v i e i l l e é c o l e» Mise en page par et par Long Vite illisible Peu souple Difficile à modifier

Plus en détail

SnagIt Studio 1. Options de propriétés par défaut des outils...17. fr.techsmith.com i

SnagIt Studio 1. Options de propriétés par défaut des outils...17. fr.techsmith.com i Manuel 1 Se familiariser avec l'écran de...2 Outils des barres d'outils de...3 Outils de dessin de...5 Utilisation des outils de dessin de Studio...6 Catalogue...7 Modification des objets Studio...7 Options

Plus en détail

Photofiltre : premières retouches d'images

Photofiltre : premières retouches d'images Photofiltre : premières retouches d'images Niveau débutant Niveau intermédiaire Niveau confirmé PhotoFiltre est un logiciel de retouche d images, libre et gratuit, très complet. Il permet d effectuer des

Plus en détail

Par défaut, les éléments de type bloc seront affichés dans une succession verticale.

Par défaut, les éléments de type bloc seront affichés dans une succession verticale. Le positionnement Par défaut, les éléments de type bloc seront affichés dans une succession verticale. Une boîte jaune Une boîte verte Les principaux éléments de type bloc sont : l'élément div ; les titres

Plus en détail