Web Design. HTML5 et CSS3 pour des sites Responsive. Responsive Web Design. HTML5 et CSS3 pour des sites 26,50. Christophe AUBRY.

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

Download "Web Design. HTML5 et CSS3 pour des sites Responsive. Responsive Web Design. HTML5 et CSS3 pour des sites 26,50. Christophe AUBRY."

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

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

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 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

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 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 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

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

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

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

1. La notion de cascade

1. 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é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

Utilisation de l éditeur.

Utilisation 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 .. 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

Responsive Web Design. Responsive Design avec HTML 5.0 et CSS3

Responsive 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étail

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

Introduction à HTML5, CSS3 et au responsive web design

Introduction à 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étail

HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles

HTML5, 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é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

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

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

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

Optimiser pour les appareils mobiles

Optimiser 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étail

LANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation

LANGAGUE 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étail

Guide de réalisation d une campagne e-mail marketing

Guide 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étail

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.

KompoZer. 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

É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étail

Webmaster / Webdesigner / Wordpress

Webmaster / 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étail

Diffuser un contenu sur Internet : notions de base... 13

Diffuser 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étail

Notes pour l utilisation d Expression Web

Notes 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étail

Silfid : Agence de création de site internet, formations et Conseils Retour sommaire

Silfid : 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étail

Tutoriel : Feuille de style externe

Tutoriel : 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étail

Formation HTML / CSS. ar dionoea

Formation 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étail

2 LES BASES DU HTML 19 Qu est-ce que le HTML? 20 De quand date le HTML? 20 Écrire son propre code HTML 22

2 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étail

Prise en main rapide

Prise 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é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

Dans nos locaux au 98 Route de Sauve 30900 NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur

Dans 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étail

Intégrateur Web HTML5 CSS3

Inté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étail

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING

CRÉ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étail

Guide 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 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étail

Infrastructure RDS 2012

Infrastructure 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é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

{less} Guide de démarrage

{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étail

Dé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) 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étail

IPHONE 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 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étail

Dans l idéal, ceci devrait être fait en amont pour chaque image envoyée sur l espace de stockage de votre site internet.

Dans 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étail

Normes techniques 2011

Normes 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étail

CMS Modules Dynamiques - Manuel Utilisateur

CMS 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étail

Devenez un véritable développeur web en 3 mois!

Devenez 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étail

Administration du site (Back Office)

Administration 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étail

WEB & 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 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étail

Marie-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 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étail

Prise en main de Moodle

Prise 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étail

CONCEPTION D E-MAILS ADAPTATIFS

CONCEPTION 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étail

Relever le défi du Web mobile

Relever 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étail

Manuel d utilisation du module Liste de cadeaux PRO par Alize Web

Manuel 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é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

APPROFONDISSEMENT LOGICIELS DU WEB

APPROFONDISSEMENT 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é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

PHP 5.4 Développez un site web dynamique et interactif

PHP 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étail

Le 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. 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étail

A. Introduction. Chapitre 7

A. 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étail

Les outils de création de sites web

Les 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étail

Dévéloppement de Sites Web

Dé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étail

Portfolio Sites internet :

Portfolio 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étail

Formation > Développement > Internet > Réseaux > Matériel > Maintenance

Formation > 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étail

MODE 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 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é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

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

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 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étail

WORDPRESS : réaliser un site web

WORDPRESS : 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étail

S7 Le top 10 des raisons d utiliser PHP pour moderniser votre existant IBM i

S7 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étail

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X

Groupe 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étail

Introduction : présentation de la Business Intelligence

Introduction : 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étail

Pack Fifty+ Normes Techniques 2013

Pack 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étail

4. Personnalisation du site web de la conférence

4. 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étail

Cahier des charges pour la création du site http://jrmasters.univ-toulouse.fr sous DRUPAL

Cahier 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étail

Projet en nouvelles technologies de l information et de la communication

Projet 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étail

Chapitre 1. Prise en main

Chapitre 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étail

Configuration APN internet Réseau 3G «Terminaux et tablettes sous Android» Configuration APN «internet» sur système Android :

Configuration 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étail

Design 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 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étail

WIMS. Découvrir et utiliser

WIMS. 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étail

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)

INTERNET 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étail

Dans ce mémento, vous trouverez les informations détaillées pour configurer les fonctionnalités du Responsive Design dans le Worldsoft CMS:

Dans 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étail

Formation : WEbMaster

Formation : 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étail

CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML

CREER 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étail

Optimisation des e-mails pour les supports mobiles. Améliorez vos taux de clics sans augmenter votre charge de travail.

Optimisation 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étail

Business Intelligence

Business 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étail

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com

145A, 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étail

MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA

MAÎ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étail

Parcours FOAD Formation EXCEL 2010

Parcours 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étail

Créer son questionnaire en ligne avec Google Documents

Cré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étail

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)

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) 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étail

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4

MAILING 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étail

BES WEBDEVELOPER ACTIVITÉ RÔLE

BES 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étail

Normes graphiques / Sigma Assistel / Site Internet version 1.0 / 12.11.03

Normes 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étail

INFORMATIONS ET INSTALLATION DU THEME CENATA RESPONSIVE

INFORMATIONS 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étail

MANUEL 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 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étail

Echosgraphik. 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 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é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