Web Design. HTML5 et CSS3 pour des sites Responsive. Responsive Web Design. HTML5 et CSS3 pour des sites 26,50. Christophe AUBRY.
|
|
- Victor Champagne
- il y a 7 ans
- Total affichages :
Transcription
1 Responsable pédagogique dans un centre de formation et formateur sur les technologies Web et les Arts graphiques pendant plus de quinze ans, Christophe Aubry est aujourd hui dirigeant de la société netplume spécialisée dans la rédaction pédagogique et la création de sites internet. Auteur de nombreux livres aux Editions ENI notamment sur Dreamweaver, WordPress, Drupal, HTML et CSS, il reste au fait des nouveautés concernant la conception des sites Web, en effectuant une veille technologique régulière et en intervenant dans de nombreux forums. Pour plus d informations : 26,50 sur : b Exemples utilisés dans le livre b Webographie Christophe AUBRY ISBN : L objectif du Responsive Web Design est de créer des sites Web dont la mise en page s adapte automatiquement pour un affichage optimal quel que soit le type d écran sur lequel il est affiché : écran d ordinateur, de tablette ou de smartphone. Dans ce livre, nous allons commencer par un rappel sur les méthodes de mise en page "classiques" et leur limitation avant d introduire la technique de mise en page basée sur l utilisation des tableaux et des CSS3. Nous apprendrons ensuite à utiliser les grilles de mise en page, les grilles fixes et fluides. Le Responsive Web Design est essentiellement basé sur les requêtes de média CSS3, les Media Queries : nous apprendrons à maîtriser cette technique à l aide de nombreux exemples. Nous verrons ensuite les différents aspects de la mise en page responsive : les grilles, les images et la typographie. Pour nous aider à travailler plus efficacement, nous apprendrons à utiliser les bases de certains frameworks CSS qui permettent d utiliser foute une série de composants HTML5/ CSS3 pour concevoir efficacement des sites responsive. Nous verrons aussi l utilité des librairies JavaScript pour gérer au mieux les problèmes de compatibilité avec les navigateurs. Enfin nous terminerons en vous présentant les futures techtéléchargement niques avancées de mise en page qui sont en cours d étude actuellement par le W3C. Web Design Responsive Web Design HTML5 et CSS3 pour des sites Responsive HTML5 et CSS3 pour des sites HTML5 et CSS3 pour des sites Responsive Web Design Christophe AUBRY
2 Table des... matières Chapitre 1 : Introduction A. Le design Web aujourd'hui B. Le Responsive Web Design C. Les approches dans la conception D. Le lâcher-prise E. Les objectifs du livre F. Les outils de l intégrateur Web Les objectifs Mozilla Firefox Google Chrome Apple Safari Microsoft Internet Explorer G. Télécharger les exemples Editions ENI - All rights reserved Chapitre 2 : Des solutions pour la compatibilité A. La disparité des navigateurs B. Pour une meilleure compatibilité C. Le rendu initial des navigateurs La problématique Le reset universel Le reset d'eric Meyer Le reset d'html5 Doctor D. Normalize.css Le projet Télécharger Normalize.css Installer Normalize.css E. L'HTML5 et html5shiv.js L'objectif Le fichier d'exemple La librairie html5shiv.js F. Les requêtes de média et respond.js L'objectif Le fichier d'exemple La librairie respond.js G. Les solutions de rechange et Modernizr.js L'objectif Télécharger Modernizr Créer une page d'exemple Installer et lier le script Modernizr La mise en action de Modernizr
3 HTML5 et CSS3 pour des sites Responsive Web Design Utiliser les classes de Modernizr Utiliser Modernizr avec du JavaScript H. Les L'objectif Utiliser les Les opérateurs Chapitre 3 : La mise en page classique A. Les designers et les intégrateurs B. Le modèle des boîtes C. Les marges des éléments D. L'affichage des éléments E. L'affichage dans le flux courant F. L'affichage en position absolue G. L'affichage en position fixée H. L'affichage en position relative I. Utiliser l'affichage en position relative et absolue J. L'affichage des boîtes flottantes Le positionnement flottant Placer des boîtes côte à côte Interdire le flottement Un exemple avec quatre boîtes Une mise en page simpliste Conclusion sur la mise en page en élément flottant Chapitre 4 : La mise en page à l'aide des tableaux A. L'objectif B. La propriété display C. Une mise en page simple avec un tableau D. La largeur d'affichage du tableau E. Les éléments anonymes F. D'autres éléments pour les tableaux Les paragraphes en cellule Les listes en tableau G. L'affichage des lignes H. Définir la largeur des cellules Les largeurs fixes Les largeurs en pourcentage I. Une mise en page avec un tableau plus structuré
4 Table des... matières J. Les autres propriétés d'affichage La propriété table-layout La propriété border-collapse La propriété border-spacing La propriété empty-cells La propriété caption-side K. L'alignement vertical L. Conclusion Editions ENI - All rights reserved Chapitre 5 : Les grilles de mise en page A. L'objectif B. La structure des grilles pour le Web C. Les grilles fixes D. La grille fixe 960gs La grille Les fichiers CSS La page d'exemple Les liaisons aux feuilles de style Les styles personnels Le conteneur de la mise en page Les blocs sur 12 colonnes Les blocs placés sur des colonnes dans la grille Interdire les blocs flottants adjacents Les blocs placés avec un décalage Les blocs centrés Le code complet de la page E. La grille fixe notjustagrid Le framework La grille La page d'exemple Les fichiers CSS Les liaisons aux feuilles de style Les styles personnels Le conteneur de la mise en page Le système des classes Un bloc sur la largeur de la grille Trois blocs sur un tiers de la grille Deux blocs sur 3/5e et 2/5e de la grille Un seul bloc sur les 2/3 de la grille Le code complet de la page
5 HTML5 et CSS3 pour des sites Responsive Web Design F. La grille fluide Gridiculous Les grilles fluides La grille Gridiculous La page d'exemple Télécharger la grille Installer la grille Des styles personnels Le conteneur Les lignes Trois blocs de même largeur Deux blocs de largeur différente Un bloc décalé Affichage de la grille fluide Chapitre 6 : Les Media Queries A. L'objectif B. Les origines C. Utiliser les requêtes de média D. La syntaxe des requêtes de média E. Les fonctionnalités à tester F. Où placer les requêtes de média G. La taille des écrans des mobiles H. La notion de viewport I. Un exemple très simple La maquette Le code HTML et CSS J. Une grille responsive La grille Télécharger et installer la grille Créer une page simple sur 12 colonnes Les liaisons aux styles et aux scripts La structure de la mise en page Les règles CSS K. Exemples de sites avec des requêtes de média
6 Table des... matières Editions ENI - All rights reserved Chapitre 7 : La mise en page responsive A. Le design responsive B. Les grilles responsives C. La grille responsive Simple Grid Utiliser Simple Grid Télécharger et installer Simple Grid Les lignes La maquette La première ligne La deuxième ligne La troisième ligne Utiliser la grille fluide et responsive Le code complet D. La grille responsive Columnal Utiliser Columnal Télécharger et installer Columnal La maquette Le conteneur et les lignes La première ligne La deuxième ligne La troisième ligne et le décalage La quatrième ligne et les blocs imbriqués Utiliser la grille fluide et responsive Le code complet de la mise en page Les images responsives Le code complet de la mise en page avec l'image responsive E. L'utilisation des images F. Les images fluides L'objectif La mise en page fixe La mise en page fluide La largeur fluide des autres éléments Les largeurs des images fluides Afficher et redimensionner la page Le code complet de la page G. Le script Response.js Utiliser le JavaScript Télécharger les JavaScript Les liaisons aux JavaScript Préparer les images Le code de la page
7 HTML5 et CSS3 pour des sites Responsive Web Design Le fonctionnement du script Optimiser les légendes Le code complet de la page H. Le script picturefill.js Utiliser le JavaScript Télécharger le JavaScript Les liaisons aux JavaScript Préparer les images Le code de la page L'affichage de l'image responsive Le code pour des écrans haute définition (Retina) Le code complet de la page I. Le script responsive-images.js Utiliser le JavaScript Télécharger la démonstration Le code de la page Utiliser la page J. Les propositions d'avenir Les groupes de travail : RICG et W3C Les groupes de travail : Apple et W3C K. La typographie responsive L'objectif Les unités utilisées L'unité em et la cascade L'unité rem et la cascade La typographie responsive et l'unité rem La typographie responsive et les polices de caractère Les unités liées au viewport L. Les tableaux responsives L'objectif La solution Zurb La solution de Goeff Yuen La solution de Chris Coyier D'autres solutions
8 Table des... matières Chapitre 8 : Les frameworks CSS A. Utiliser les frameworks CSS B. Des frameworks CSS C. Le framework UIkit Utiliser UIkit Télécharger le framework Télécharger jquery Installer le framework Créer une grille fluide Utiliser la grille fluide Utiliser la grille responsive d'uikit Créer une barre de navigation Créer un tableau mis en forme D. Le framework Kube Utiliser Kube Télécharger le framework Installer le framework Créer une grille fluide et responsive Utiliser la grille fluide et responsive Insérer un formulaire Insérer des boutons E. Le framework Pure Utiliser Pure Télécharger le framework Lier le framework Utiliser la grille fluide responsive Insérer un tableau Insérer une barre de menu avec un menu déroulant Editions ENI - All rights reserved Chapitre 9 : Le futur de la mise en page A. Les objectifs B. Le multicolonnage Le principe d'utilisation Mise en place des colonnes Mise en place des gouttières Mise en place des sauts de colonnes Répartition sur plusieurs colonnes Un générateur de multi-colonnes Les colonnes et le design responsive
9 HTML5 et CSS3 pour des sites Responsive Web Design C. Les boîtes flexibles Placer les éléments de mise en page Le module des boîtes flexibles Les boîtes flexibles L'orientation et le sens des boîtes Le débordement des boîtes L'orientation des boîtes L'alignement horizontal des boîtes L'alignement vertical des boîtes Les exceptions dans l'alignement vertical Les exceptions dans l'alignement horizontal Les propriétés de flexibilité La propriété flex-grow Les propriétés flex-shrink et flex-basis Des constructeurs en ligne Un exemple de mise en page flexible D. Les autres modules du W3C L'habillage Les grilles Le modèle de page La mise en page Les régions Index
10 Chapitre :. La.. mise.... en... page.... responsive Chapitre 7 : La mise en page responsive HTML5 et CSS3 pour sites Responsive Web Design A. Le design responsive L'objectif du Responsive Web Design est de créer des mises en page qui puissent s'adapter en fonction du type d'écran sur lequel est affiché le site. Ethan Marcotte dans son article fondateur du Responsive Web Design ( indique les trois techniques qui doivent être mises en œuvre pour créer des sites responsives : grilles fluides, images fluides et requêtes de média. Nous allons bien sûr étudier ces trois techniques, auxquelles nous allons ajouter des éléments pour avoir une typographie responsive, ainsi que des tableaux. B. Les grilles responsives Editions ENI - All rights reserved Les grilles responsives permettent de créer une mise en page basée sur une grille typographique qui s'adapte en fonction de la largeur de l'écran de diffusion. C est-à-dire qu'assez usuellement nous avons une grille sur 12 colonnes par exemple pour les écrans les plus larges, qui passe à une seule colonne pour les smartphones. Certaines grilles peuvent aussi intégrer des "resets" CSS et des CSS pour avoir des images responsives. Si vous effectuez une recherche sur le Web pour trouver des grilles de mise en page responsive, vous trouverez de très nombreuses solutions, plus ou moins pérennes. Voici une liste non exhaustive de solutions : - Golden Grid System : - Responsive Grid System : - Profound Grid : - Gridiculous : - Frameless : - Grid : - Responsive Grid System : Vous devez tester chaque solution pour identifier celle répondant le mieux à vos attentes. Analysez les CSS utilisées pour voir si elles vous conviennent. Regardez si les propriétés utilisées sont conformes à vos habitudes. Si elles sont simples, pas trop verbeuses et élégantes d un point de vue syntaxique. Il faudra aussi voir si leur mise en place s'adapte bien à votre projet, sans alourdir le code. Dans le cadre de cet ouvrage, nous allons étudier deux systèmes, Simple Grid et Columnal. Ces deux solutions sont légères et simples à mettre en œuvre.
11 HTML5 et CSS3 pour des sites Responsive Web Design C. La grille responsive Simple Grid 1. Utiliser Simple Grid Pour ce premier exemple, nous vous proposons d'utiliser Simple Grid : C'est une grille très simple à mettre en place, avec un fichier CSS de 2 ko. La grille a une largeur initiale de 1140 pixels et utilise 12 colonnes. Les colonnes sont élastiques (ou fluides), c'est-à-dire que leur largeur se réduit proportionnellement à la largeur de la fenêtre du navigateur. Le point de rupture de Simple Grid est placé à 767 pixels. En dessous de cette largeur d'écran, la mise en page bascule sur une seule colonne. 2. Télécharger et installer Simple Grid v Allez sur le site de Simple Grid : v Cliquez sur le bouton Download. Vous téléchargez une archive nommée ThisIsDallas-Simple-Grid-2fe3f18.zip. v Décompressez cette archive pour obtenir un dossier nommé ThisIsDallas-Simple-Grid- 2fe3f18.
12 Chapitre :. La.. mise.... en... page.... responsive Dans ce dossier vous trouverez : - Un fichier nommé index.html. C'est le fichier de démonstration de Simple Grid. - Un fichier nommé simplegrid.css, c'est le fichier des styles CSS. - Un fichier nommé README.md qui contient les instructions de base pour mettre en place la grille. Nous allons maintenant créer une page d'exemple. v Créez un dossier pour cet exemple. v Dans ce dossier placez-y un fichier simplegrid.css. v Créez un fichier HTML. Vous retrouvez cet exemple dans le dossier à télécharger Chapitre-07/simple-grid/. Dans ce fichier HTML saisissez cet en-tête : <!DOCTYPE html> <html lang="fr"> <head> <title>ma grille Simple GRid</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="simplegrid.css" /> </head> Editions ENI - All rights reserved 3. Les lignes Simple Grid fonctionne avec des lignes, il n'y a pas de conteneur de mise en page. Vous ne devez donc réfléchir votre mise en page qu'avec des lignes. Dans chacune des lignes créées, vous allez insérer des blocs alignés sur les colonnes de la grille. Dans un premier temps nous créons une première ligne. La ligne utilise la classe.grid. <div class="grid">... Voici le premier sélecteur utilisant la classe.grid :.grid { width: 100%; max-width: 1140px; min-width: 755px; margin: 0 auto; overflow: hidden;
13 HTML5 et CSS3 pour des sites Responsive Web Design La largeur est définie à 100 % de celle de son élément parent, avec une largeur maximale de 1140 pixels et minimale de 755 pixels. La boîte est centrée dans la fenêtre du navigateur (margin: 0 auto;). Un deuxième sélecteur CSS utilise cette classe :.grid:after { content: ""; display: table; clear: both; Cela permet d'interdire tout flottement après l'utilisation d'une boîte <div class="grid">. Si vous souhaitez utiliser un remplissage (padding) dans cette boîte, utilisez la classe.grid-pad. Cela permet d'ajouter un remplissage de 20 pixels en haut et à gauche..grid-pad { padding: 20px 0 0px 20px; 4. La maquette Voici la mise en page simple que nous allons mettre en place avec la grille Simple Grid. La première ligne comporte 3 blocs. Chacun de ces blocs est placé sur 4 colonnes. Nous avons bien 4+4+4=12 colonnes. La deuxième ligne comporte 2 blocs. Le premier est placé sur 7 colonnes et le deuxième sur 5 colonnes. La dernière ligne comporte 3 blocs. Le premier et le troisième sont placés sur 3 colonnes et le deuxième sur 6 colonnes.
14 Chapitre :. La.. mise.... en... page.... responsive La première ligne Dans cette première ligne, nous insérons donc trois blocs alignés sur 4 colonnes. Nous allons utiliser la classe.col-1-3. Le système de nommage est simple et est basé sur la syntaxe.col-*-*. Le premier * indique la part de la largeur de la grille, 1 veut dire que nous utilisons la largeur totale de la grille, soit les 12 colonnes. Le deuxième * indique que les colonnes sont alignées sur le tiers, 3, de la largeur de la grille. Chaque bloc est donc aligné sur 12/3 = 4 colonnes. Voici le code utilisé pour cette première ligne : <div class="grid grid-pad"> <div class="col-1-3"> <p>fictum, deserunt...</p> <div class="col-1-3"> <p>morbi odio eros, volutpat...</p> <div class="col-1-3"> <p>quisque ut dolor gravida...</p> Voici les sélecteurs utilisant la classe.col-1-3 :.col-1-3,.col-4-12 { width: 33.33%; Nous avons une largeur égale à 33,33 % de celle de son élément parent. Voilà le deuxième sélecteur utilisant cette classe : [class*='col-'] { float: left; padding-right: 20px; Cela permet à tous les blocs d'avoir un flottement à gauche et un remplissage à droite de 20 pixels. Voici l'affichage obtenu : Editions ENI - All rights reserved
15 HTML5 et CSS3 pour des sites Responsive Web Design La deuxième ligne La deuxième ligne comporte un premier bloc aligné sur 7 colonnes et un deuxième sur 5 colonnes. Nous avons donc un premier bloc qui est aligné sur 7 des 12 colonnes de la grille, sa classe est donc.col Nous avons un deuxième bloc qui est aligné sur les 5 dernières colonnes des 12 colonnes de la grille, sa classe est donc.col Voici le code à utiliser. <div class="grid grid-pad"> <div class="col-7-12"> <p>fictum, deserunt mollit...</p> <div class="col-5-12"> <p>morbi odio eros, volutpat ut...</p> Voici les sélecteurs exploitant les classes utilisées, pour définir la largeur des blocs :.col-7-12 { width: 58.33%.col-5-12 { width: 41.66%; Voici le sélecteur permettant d'ajouter un remplissage à droite de 20 pixels pour le dernier élément de la ligne :.grid-pad > [class*='col-']:last-of-type { padding-right: 20px; Nous retrouvons le sélecteur générique pour le flottement des blocs et le remplissage à gauche : [class*='col-'] { float: left; padding-right: 20px; Voilà l'affichage obtenu :
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étailTravaux 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étailRESPONSIVE 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étailRESPONSIVE 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étailResponsive 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étailResponsive 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étailGrille 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étailPré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étailIntroduction à 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étail1. La notion de cascade
HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir
Plus en détailUN 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étailUtilisation de l éditeur.
Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7
Plus en détail.. 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étailResponsive Web Design. Responsive Design avec HTML 5.0 et CSS3
Ivan MADJAROV Responsive Design avec HTML 5.0 et CSS3 HTML5 CSS3 IvMad - 2013 2 La spécification CSS3 Media Queries (requêtes de media) définit les techniques pour adapter de feuilles de styles en fonction
Plus en détailPour 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étailIntroduction à HTML5, CSS3 et au responsive web design
1 Introduction à HTML5, CSS3 et au responsive web design Jusqu à une période récente, les sites web étaient conçus avec une largeur fixe de l ordre de 960 pixels, en espérant que les visiteurs en tirent
Plus en détailHTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles
46 HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles enfin deux points importants pour les sites mobiles, les nouveautés sur les formulaires ainsi que le mode hors-ligne. 2. Bonnes
Plus en détailResponsive 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étailMedia 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étailFreeway 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étailE-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étailOptimiser pour les appareils mobiles
chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...
Plus en détailLANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation
ING 01 LANGAGUE JAVA Durée : 21 heures 1090 HT / jour Dates : à définir en 2012 Concevoir et développer des programmes en langage Java Comprendre le fonctionnement de la machine virtuelle S approprier
Plus en détailGuide de réalisation d une campagne e-mail marketing
Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La
Plus en détailKompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.
KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html
Plus en détailÉvaluation des compétences. Identification du contenu des évaluations. Septembre 2014
Identification du contenu des évaluations Septembre 2014 Tous droits réservés : Université de Montréal Direction des ressources humaines Table des matières Excel Base version 2010... 1 Excel intermédiaire
Plus en détailWebmaster / Webdesigner / Wordpress
Webmaster / Webdesigner / Wordpress Pré-requis : Projet professionnel. Bonne maîtrise de l'ordinateur. Bases en infographie et / ou traitement de texte fortement recommandées. Objectifs : Concevoir un
Plus en détailDiffuser un contenu sur Internet : notions de base... 13
Diffuser un contenu sur Internet : notions de base... 13 1.1 Coup d œil sur l organisation de cet ouvrage.............. 15 Préambule : qu est-ce qu une page web?................ 16 À propos du HTML...........................
Plus en détailNotes pour l utilisation d Expression Web
EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21 Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface
Plus en détailSilfid : Agence de création de site internet, formations et Conseils Retour sommaire
Sommaire ILFID vous accueille dans sa salle de formation équipée d ordinateurs en réseau et connectés internet, d'un vidéo- Sprojecteur et tableau blanc. Nos solutions sont éligibles aux critères de financement
Plus en détailTutoriel : Feuille de style externe
Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?
Plus en détailFormation HTML / CSS. ar dionoea
Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations
Plus en détail2 LES BASES DU HTML 19 Qu est-ce que le HTML? 20 De quand date le HTML? 20 Écrire son propre code HTML 22
SOMMAIRE INTRODUCTION La collection Classroom in a Book TinyUrL Conditions requises Installation du programme Copie des fichiers Classroom in a Book ordre recommandé pour les leçons Démarrage instantané
Plus en détailPrise en main rapide
Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un
Plus en détailSpé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étailDans nos locaux au 98 Route de Sauve 30900 NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur
FORMATION FORFAIT WEB DEVELOPPEUR Qualification ISQ OPQF Formacode 46 125 Certification de titre professionnel Web Designer + modules optionnels : Développement PHP/MySQL avancé, Web App, CMS e-boutique
Plus en détailIntégrateur Web HTML5 CSS3
Intégrateur Web HTML5 CSS3 L objectif de la 3W Academy est de former des petits groupes d élèves à l intégration de sites internet ainsi qu à la création d applications web simples telles qu un blog ou
Plus en détailCRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des
Plus en détailGuide pour la réalisation d'un document avec Open Office Writer 2.2
Guide pour la réalisation d'un document avec Open Office Writer 2.2 1- Lancement de l'application : Le Traitement de textes de la Suite OpenOffice peut être lancé : soit depuis le menu «Démarrer / Programmes/OpenOffice2.2/Writer
Plus en détailInfrastructure RDS 2012
105 Chapitre 3 Infrastructure RDS 2012 1. Introduction Infrastructure RDS 2012 Une infrastructure RDS 2012 R2 est composée de plusieurs serveurs ayant chacun un rôle bien défini pour répondre aux demandes
Plus en détailUne 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{less} Guide de démarrage
{less Guide de démarrage Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site
Plus en détailDécouvrir Drupal. Les meilleurs thèmes et modules Drupal (présenta5on démo)
Découvrir Drupal Les meilleurs thèmes et modules Drupal (présenta5on démo) Tour d horizon des principales fonc5onnalités de Drupal au travers de la présenta5on de quelques- uns de ses principaux modules
Plus en détailIPHONE BANNIÈRE CLASSIQUE DIMENSIONS. Standard : 320 x 53 (portrait) 20Ko Jpeg/Gif/Png. HD : 640 x 106 (portrait) 20Ko Jpeg/Gif/Png DESCRIPTION
IPHONE BANNIÈRE CLASSIQUE DIMENSIONS Standard : 320 x 53 (portrait) 20Ko Jpeg/Gif/Png HD : 640 x 106 (portrait) 20Ko Jpeg/Gif/Png DESCRIPTION Format publicitaire très répandu et simple Permet une présence
Plus en détailDans l idéal, ceci devrait être fait en amont pour chaque image envoyée sur l espace de stockage de votre site internet.
1- Optimiser le poids de votre image : Dans l idéal, ceci devrait être fait en amont pour chaque image envoyée sur l espace de stockage de votre site internet. Tous les types d utilisateurs (auteur, publicateur,
Plus en détailNormes techniques 2011
Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique
Plus en détailCMS Modules Dynamiques - Manuel Utilisateur
CMS Modules Dynamiques - Manuel Utilisateur 1. Introduction Le modèle CMS Le modèle des «Content Management Systems» proposé par MUM est un type particulier de sites web dynamiques, ayant comme avantage
Plus en détailDevenez un véritable développeur web en 3 mois!
Devenez un véritable développeur web en 3 mois! L objectif de la 3W Academy est de former des petits groupes d élèves au développement de sites web dynamiques ainsi qu à la création d applications web
Plus en détailAdministration du site (Back Office)
Administration du site (Back Office) A quoi sert une interface d'administration? Une interface d'administration est une composante essentielle de l'infrastructure d'un site internet. Il s'agit d'une interface
Plus en détailWEB & DÉVELOPPEMENT LES BASES DU WEB LE LANGAGE HTML FEUILLES DE STYLES CSS HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES
WEB & DÉVELOPPEMENT LES BASES DU WEB HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES LE LANGAGE HTML STRUCTURE D UNE PAGE En-tête et corps Syntaxe INSÉRER DES CONTENUS Texte : formatage (titre,
Plus en détailMarie-eve TREMBLAY GROUPE B. Rapport de synthèse : Le responsive web design, CSS3 et HTML5. Apprentissage autonome 582-FXA-06
Marie-eve TREMBLAY GROUPE B Rapport de synthèse : Le responsive web design, CSS3 et HTML5 Apprentissage autonome 582-FXA-06 Département des Techniques de communication Programme des Techniques d'intégration
Plus en détailPrise en main de Moodle
Prise en main de Moodle Adresse d accès : http://moodle.grenet.fr/stendhal/my/ Jean-Philippe PERNIN Université Stendhal Département Informatique Pédagogique Bureau I 113 Mél. : Jean-Philippe.Pernin@u-grenoble3.fr
Plus en détailCONCEPTION D E-MAILS ADAPTATIFS
CONCEPTION D E-MAILS ADAPTATIFS SELLIGENT Le contenu de ce manuel porte sur du matériel protégé par les droits d auteurs appartenant à Selligent. Ce manuel ne peut être ni reproduit, en tout ou en partie,
Plus en détailRelever le défi du Web mobile
Relever le défi du Web mobile Bonnes pratiques de conception et développement François Daoust Dominique Hazaël-Massieux Groupe Eyrolles, 2011, ISBN : 978-2-212-12828-4 4 Les bases d un bon site web mobile
Plus en détailManuel d utilisation du module Liste de cadeaux PRO par Alize Web
Manuel d utilisation du module Liste de cadeaux PRO par Alize Web INSTALLER ET CONFIGURER LE MODULE (BACK OFFICE) 2 Réglages des performances 2 Télécharger le module 3 Installer le module 4 Configurer
Plus en détailLES 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étailAPPROFONDISSEMENT LOGICIELS DU WEB
Bachelor Responsable de Communication Bachelor 2 Mars 2015 APPROFONDISSEMENT LOGICIELS DU WEB SYSB302 Semestre 3 Nombre heures 20 Nombre crédits 2 Langue d enseignement Français Département académique
Plus en détailGuide 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étailPHP 5.4 Développez un site web dynamique et interactif
Editions ENI PHP 5.4 Développez un site web dynamique et interactif Collection Ressources Informatiques Table des matières Table des matières 1 Chapitre 1 Introduction 1. Objectif de l'ouvrage.............................................
Plus en détailLe service de création de site Internet : Mode d emploi. La Création de Site Internet
Le service de création de site Internet : Mode d emploi Sommaire 1) Comment se connecter à votre interface client? 2) Comment démarrer la création de votre site Internet? 3) Comment gérer les pages de
Plus en détailA. Introduction. Chapitre 7
Chapitre 7 A. Introduction Le concept des listes SharePoint est parfois le plus difficile à appréhender tellement ses applications sont sans limites. Une liste SharePoint est l équivalent d un tableau
Plus en détailLes outils de création de sites web
Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site
Plus en détailDévéloppement de Sites Web
1 Dévéloppement de Sites Web Cours III : Travailler avec Dreamweaver de Macromedia Peter Stockinger Séminaire de Maîtrise en Communication Interculturelle à l'institut National des Langues et Civilisations
Plus en détailPortfolio Sites internet :
Portfolio Sites internet : 2010 ARA architecture www.ara-architecture.com Type : Portfolio d architecte Fonctionnalités principales : Galerie de projet d architecture, Actualités, Textes sur l agence,
Plus en détailFormation > Développement > Internet > Réseaux > Matériel > Maintenance
Formation > Développement > Internet > Réseaux > Matériel > Maintenance SOMMAIRE 1. ACCEDER A L'INTERFACE D'ADMINISTRATION...5 1.1. Le navigateur... 5 1.2. L'interface d'administration... 5 2. METTRE
Plus en détailMODE D'EMPLOI DU CONTRIBUTEUR WEB UAPV "CONTRIBUER DANS UNE RUBRIQUE DU SITE WEB"
MODE D'EMPLOI DU CONTRIBUTEUR WEB UAPV "CONTRIBUER DANS UNE RUBRIQUE DU SITE WEB" Quelques conseils pour bien contribuer 1 Paramétrer votre navigateur web 2 Accéder au module de gestion des pages web 2
Plus en détailApproche 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étailSpétechs Mobile. D e r n i è r e m i s e à j o u r : s e p t e m b r e 2 0 1 4
Spétechs Mobile D e r n i è r e m i s e à j o u r : s e p t e m b r e 2 0 1 4 Généralités Envoi des créas à Amandine Canu, responsable traffic mobile : acanu@hi-media.com Mettre en copie de votre e-mail
Plus en détailWORDPRESS : réaliser un site web
WORDPRESS : réaliser un site web Wordpress est un système de gestion de contenu (ou CMS) libre. Il permet de créer des sites relativement complexes (blog, forum, site vitrine, site dynamique), sans qu
Plus en détailS7 Le top 10 des raisons d utiliser PHP pour moderniser votre existant IBM i
Modernisation IBM i Nouveautés 2014-2015 IBM Power Systems - IBM i 19 et 20 mai 2015 IBM Client Center, Bois-Colombes S7 Le top 10 des raisons d utiliser PHP pour moderniser votre existant IBM i Mardi
Plus en détailGroupe Eyrolles, 2003, ISBN : 2-212-11317-X
Groupe Eyrolles, 2003, ISBN : 2-212-11317-X 3 Création de pages dynamiques courantes Dans le chapitre précédent, nous avons installé et configuré tous les éléments indispensables à la mise en œuvre d une
Plus en détailIntroduction : présentation de la Business Intelligence
Les exemples cités tout au long de cet ouvrage sont téléchargeables à l'adresse suivante : http://www.editions-eni.fr Saisissez la référence ENI de l'ouvrage RI3WXIBUSO dans la zone de recherche et validez.
Plus en détailPack Fifty+ Normes Techniques 2013
Pack Fifty+ Normes Techniques 2013 Nos formats publicitaires par site 2 Normes techniques 2013 Display classique Pavé vidéo Footer Accueil panoramique Publi rédactionnel Quiz Jeu concours Emailing dédié
Plus en détail4. Personnalisation du site web de la conférence
RTUTORIEL Prise en main de la plateforme 1. Création de l espace conférence Connectez- vous sur le portail http://test- www.sciencesconf.org avec le compte : - Identifiant : «admin1» - Mot de passe «1234»
Plus en détailCahier des charges pour la création du site http://jrmasters.univ-toulouse.fr sous DRUPAL
Document à diffusion restreinte Date : janvier 2010, MAJ février 2010 Rédacteurs : CAPLAN Emmanuelle, RAFENOMANJATO Jean Service Communication et Département Formation et Vie Étudiante Établissement :
Plus en détailProjet en nouvelles technologies de l information et de la communication
Projet en nouvelles technologies de l information et de la communication Site Web universitaire du Prof. Jacques Moeschler. Nono Steeve Semestre de printemps 2013 Sous la direction du Prof Luka Nerima
Plus en détailChapitre 1. Prise en main
Guide de référence Guide de référence Chapitre 1. Prise en main Le processus d'enquête Le processus d'enquête comporte 5 étapes toutes prises en charge par le logiciel : Conception des formulaires Cette
Plus en détailConfiguration APN internet Réseau 3G «Terminaux et tablettes sous Android» Configuration APN «internet» sur système Android :
Configuration APN «internet» sur système Android : 1/ Terminaux sous Android A/Samsung Galaxy S4 Dans le menu principal cliquez sur l icône «Applications» pour accéder à l icône «Paramètres» Sur le volet
Plus en détailDesign adaptatif. Guide de l utilisateur VIENNA LONDON MUNICH BERLIN PARIS HONG KONG MOSCOW ISTANBUL BEIJING ZURICH
Design adaptatif Guide de l utilisateur VIENNA LONDON MUNICH BERLIN PARIS HONG KONG MOSCOW ISTANBUL BEIJING ZURICH Contenu Définition... 3 Avantages... 3 Fonctionnalités... 5 Modèle de Design mobile...
Plus en détailWIMS. Découvrir et utiliser
WIMS Découvrir et utiliser (version préliminaire - 3 janvier 2011) Copyright c 2009 WIMS EDU GNU FDL Copyleft 2009 http://wimsedu.info 1 Découverte 1. Découvrir WIMS (I) Un internaute désire découvrir
Plus en détailINTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)
CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.
Plus en détailDans ce mémento, vous trouverez les informations détaillées pour configurer les fonctionnalités du Responsive Design dans le Worldsoft CMS:
1 La taille et la résolution de l'écran des ordinateurs portables, des ordinateurs de bureau, des tablettes et des smartphones peuvent considérablement varier. C'est pour cette raison, que les sites Web
Plus en détailFormation : WEbMaster
Formation : WEbMaster Objectif et Description : Centre Eclipse vous propose une formation complète WebMaster, vous permettant de : Utiliser dès maintenant les nouveautés du web2, ainsi alléger les besoins
Plus en détailCREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML
CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML A L'AIDE DU LOGICIEL LIBRE OFFICE Libre Office 3.3.3 et Open Office.org 3.3.0 sont deux suites bureautiques complètes, équivalentes (seule la charte
Plus en détailOptimisation des e-mails pour les supports mobiles. Améliorez vos taux de clics sans augmenter votre charge de travail.
Enterprise Email Marketing Solutions & Services 27% DES E-MAILS SONT OUVERTS SUR SUPPORTS MOBILES Optimisation des e-mails pour les supports mobiles Améliorez vos taux de clics sans augmenter votre charge
Plus en détailBusiness Intelligence
avec Excel, Power BI et Office 365 Téléchargement www.editions-eni.fr.fr Jean-Pierre GIRARDOT Table des matières 1 Avant-propos A. À qui s adresse ce livre?..................................................
Plus en détail145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com
Guide de l utilisateur CMS 1 Navigation dans le CMS... 2 1.1 Menu principal... 2 1.2 Modules tableau... 3 1.3 Modules formulaire... 5 1.4 Navigation dans le site Web en mode édition... 6 2 Utilisation
Plus en détailMAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA
MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA OBJECTIFS : manipuler les fenêtres et l environnement Windows, gérer ses fichiers et dossiers, lancer les applications bureautiques présentes sur son poste. PUBLIC
Plus en détailParcours FOAD Formation EXCEL 2010
Parcours FOAD Formation EXCEL 2010 PLATE-FORME E-LEARNING DELTA ANNEE SCOLAIRE 2013/2014 Pôle national de compétences FOAD Formation Ouverte et A Distance https://foad.orion.education.fr Livret de formation
Plus en détailCréer son questionnaire en ligne avec Google Documents
Créer son questionnaire en ligne avec Google Documents (actualisation et précision de l article paru sur http://www.marketing- etudiant.fr/actualites/collecte-donnees.php) Se connecter avec son compte
Plus en détailCréation d un site web avec le kit labo CNRS. Expérience au LMV - Ch. Postadjian (Laboratoire de Mathématiques de Versailles - UMR 8100)
Création d un site web avec le kit labo CNRS Expérience au LMV - Ch. Postadjian (Laboratoire de Mathématiques de Versailles - UMR 8100) 1 2 outils DREAMWEAVER : Editeur qui permet de créer et gérer des
Plus en détailMAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4
MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...
Plus en détailBES WEBDEVELOPER ACTIVITÉ RÔLE
BES WEBDEVELOPER ACTIVITÉ Le web developer participe aux activités concernant la conception, la réalisation, la mise à jour, la maintenance et l évolution d applications internet/intranet statiques et
Plus en détailNormes graphiques / Sigma Assistel / Site Internet version 1.0 / 12.11.03
version 1.0 / 12.11.03 CHOIX DE LANGUE / MESURES & GABARIT NORMES GRAPHIQUES & TYPOGRAPHIQUES 131 pixels La largeur totale du gabarit est de, 2 A ENTÊTE ET MENUS / MESURES & GABARIT NORMES GRAPHIQUES &
Plus en détailINFORMATIONS ET INSTALLATION DU THEME CENATA RESPONSIVE
INFORMATIONS ET INSTALLATION DU THEME CENATA RESPONSIVE Cenata Responsive à été réalisé par Presta-Theme Contact : webmaster@presta-theme.com Compatibilité PrestaShop : 1.5.x Documentation Prestashop 1.5
Plus en détailMANUEL DE PROCÉDURE POUR LA MISE À JOUR DU SITE DE FIDAFRIQUE. Documentation utilisateur Octobre 2005
MANUEL DE PROCÉDURE POUR LA MISE À JOUR DU SITE DE FIDAFRIQUE Documentation utilisateur Octobre 2005 I. Principes 1.1 - Généralités Les personnes autorisées à intervenir sur le site sont enregistrées par
Plus en détailEchosgraphik. Ce document sert uniquement à vous donner une vision sur ma manière de travailler et d appréhender un projet
Echosgraphik Ce document sert uniquement à vous donner une vision sur ma manière de travailler et d appréhender un projet Présentation I. Echosgraphik Protocoles de travail I. Développement du site II.
Plus en détailLes 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