HTML5 et CSS3 pour des sites Responsive Web Design

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

Download "HTML5 et CSS3 pour des sites Responsive Web Design"

Transcription

1 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 Web Les objectifs Mozilla Firefox Google Chrome Apple Safari Microsoft Internet Explorer 16 G. Télécharger les exemples 17 Chapitre 2 : Des solutions pour la compatibilité A. La disparité des navigateurs 21 B. Pour une meilleure compatibilité 21 C. Le rendu initial des navigateurs La problématique Le reset universel Le reset d'eric Meyer 22 1/12

2 4. Le reset d'html5 Doctor 22 D. Normalize.css Le projet Télécharger Normalize.css Installer Normalize.css 25 E. L'HTML5 et html5shiv.js L'objectif Le fichier d'exemple La librairie html5shiv.js 28 F. Les requêtes de média et respond.js L'objectif Le fichier d'exemple La librairie respond.js 31 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 Utiliser les classes de Modernizr Utiliser Modernizr avec du JavaScript 39 H. Les L'objectif Utiliser les Les opérateurs 44 Chapitre 3 : La mise en page classique 2/12

3 A. Les designers et les intégrateurs 47 B. Le modèle des boîtes 47 C. Les marges des éléments 48 D. L'affichage des éléments 48 E. L'affichage dans le flux courant 49 F. L'affichage en position absolue 50 G. L'affichage en position fixée 51 H. L'affichage en position relative 53 I. Utiliser l'affichage en position relative et absolue 53 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 68 Chapitre 4 : La mise en page à l'aide des tableaux A. L'objectif 71 3/12

4 B. La propriété display 71 C. Une mise en page simple avec un tableau 73 D. La largeur d'affichage du tableau 74 E. Les éléments anonymes 74 F. D'autres éléments pour les tableaux Les paragraphes en cellule Les listes en tableau 76 G. L'affichage des lignes 77 H. Définir la largeur des cellules Les largeurs fixes Les largeurs en pourcentage 79 I. Une mise en page avec un tableau plus structuré 80 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 89 K. L'alignement vertical 91 L. Conclusion 92 4/12

5 Chapitre 5 : Les grilles de mise en page A. L'objectif 95 B. La structure des grilles pour le Web 96 C. Les grilles fixes 97 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 108 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 116 5/12

6 12. Un seul bloc sur les 2/3 de la grille Le code complet de la page 117 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 127 Chapitre 6 : Les Media Queries A. L'objectif 131 B. Les origines 131 C. Utiliser les requêtes de média 131 D. La syntaxe des requêtes de média 132 E. Les fonctionnalités à tester 133 F. Où placer les requêtes de média 134 G. La taille des écrans des mobiles 135 6/12

7 H. La notion de viewport 137 I. Un exemple très simple La maquette Le code HTML et CSS 142 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 152 K. Exemples de sites avec des requêtes de média 154 Chapitre 7 : La mise en page responsive A. Le design responsive 159 B. Les grilles responsives 159 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 168 7/12

8 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 185 E. L'utilisation des images 185 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 194 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 Le fonctionnement du script Optimiser les légendes Le code complet de la page 201 8/12

9 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 206 I. Le script responsive-images.js Utiliser le JavaScript Télécharger la démonstration Le code de la page Utiliser la page 209 J. Les propositions d'avenir Les groupes de travail : RICG et W3C Les groupes de travail : Apple et W3C 212 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 218 L. Les tableaux responsives L'objectif La solution Zurb La solution de Goeff Yuen 224 9/12

10 4. La solution de Chris Coyier D'autres solutions 231 Chapitre 8 : Les frameworks CSS A. Utiliser les frameworks CSS 239 B. Des frameworks CSS 239 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 256 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 270 E. Le framework Pure Utiliser Pure Télécharger le framework Lier le framework /12

11 4. Utiliser la grille fluide responsive Insérer un tableau Insérer une barre de menu avec un menu déroulant 278 Chapitre 9 : Le futur de la mise en page A. Les objectifs 285 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 291 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 /12

12 D. Les autres modules du W3C L'habillage Les grilles Le modèle de page La mise en page Les régions 322 Index /12

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

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

Plus en détail

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

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C Introduction L'Internet aujourd'hui 7 Le World Wide Web Consortium et les standards 7 Les logiciels de conception de sites web 7 L'objectif du livre 8 Interface de conception L'environnement système 9

Plus en détail

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design

A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design A.F.L.I.M. Ateliers de Formations Linguistique Informatique Multimédia Formation HTML5 et CSS3 - Pour des sites Responsive Web Design Formation : Présentation du HTML5 Bref historique du HTML5 Lignes de

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

Formation Responsive Web Design

Formation Responsive Web Design L institut de formation continue des professionnels du Web Formation Responsive Web Design Référence formation : Durée : Prix conseillé : RESPWD 3 jours (21 heures) 1 500 HT (hors promotion ou remise particulière)

Plus en détail

//////////////////////////////////////////////////////////////////// Développement Web

//////////////////////////////////////////////////////////////////// Développement Web ////////////////////// Développement Web / INTRODUCTION Développement Web Le développement, également appelé programmation, désigne l'action de composer des programmes sous forme d'algorithme (codage).

Plus en détail

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12 Pages et sites Web Table des matières 1 Microsoft Expression Web S'orienter vers l'accessibilité...12 Espace de travail Installer le logiciel...13 Lancer/quitter Microsoft Expression Web 2...13 Découvrir

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

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

HTML5 et CSS3 Faites évoluer le design de vos sites web (2ième édition)

HTML5 et CSS3 Faites évoluer le design de vos sites web (2ième édition) Introduction A. La création de sites Web 20 B. Les langages 20 C. Le livre 20 1. Pour les designers Web 20 2. Le contenu 20 Chapitre 1 : L évolution de l HTML et des CSS A. Rapide historique de l Internet

Plus en détail

Table des matières. 2013 Pearson France HTML5 & CSS3, 2e éd. Michel Martin

Table des matières. 2013 Pearson France HTML5 & CSS3, 2e éd. Michel Martin Table des matières Introduction 1 Pourquoi HTML5 et CSS3? 3 Compatibilité avec les navigateurs 4 Principales différences entre HTML5 et ses prédécesseurs 6 À propos de l auteur 7 1 Les bases du HTML5/CSS3

Plus en détail

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

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

Plus en détail

É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

RESPONSIVE DESIGN. Gobelins 2014.2015. Isabelle Biamonti

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

Plus en détail

SITE WEB Service Client. Charte graphique et technique

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

Plus en détail

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

Adobe Programme Expert certifié

Adobe Programme Expert certifié Adobe Programme Expert certifié Bulletin d'examen de maîtrise des produits Adobe Dreamweaver CS3 Examen n 9A0-056 Liste de contrôle de certification ACE La liste de contrôle ci-dessous vous guidera tout

Plus en détail

Conception Adaptative "Responsive Web Design"

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

Plus en détail

COURS COMPLET. Objectif général. À qui s'adresse ce cours? Avantages. Créer un site Web commercial. Durée de la formation. Matériel pédagogique

COURS COMPLET. Objectif général. À qui s'adresse ce cours? Avantages. Créer un site Web commercial. Durée de la formation. Matériel pédagogique Certificat d agrément #0054105 Page 1 de 6 COURS COMPLET Créer un site Web commercial Objectif général Être capable de créer un site Web commercial de A à Z. Durée de la formation 120 heures de formation.

Plus en détail

Joomla! 2.5 Créez et administrez vos sites Web

Joomla! 2.5 Créez et administrez vos sites Web Chapitre 1 : Installer Joomla! 1. Introduction 11 2. Qu'est-ce qu'un CMS? 11 3. HTML et XHTML 11 4. Différencier le contenu de la présentation 12 5. PHP et Apache 12 6. MySQL 13 7. Site statique ou site

Plus en détail

ADAPTATION DES INTERFACES. ROUYER Florian et BENNOUR Salah

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

Plus en détail

ADOBE DREAMWEAVER. contact@mandyben.com www.mandyben-formation.com

ADOBE DREAMWEAVER. contact@mandyben.com www.mandyben-formation.com ADOBE DREAMWEAVER Public : Webmasters, créateur de sites Internet, maquettistes, infographistes, responsables communication, chefs de projet. Pré-requis : Bonne connaissance de l environnement Mac ou Windows).

Plus en détail

Créez votre premier site web De la conception à la réalisation

Créez votre premier site web De la conception à la réalisation Chapitre 1 : Introduction A. Introduction 17 Chapitre 2 : Les langages A. L objectif 21 B. L HTML 21 1. L état des lieux 21 2. Les éléments HTML 21 3. Les attributs 22 4. Les caractères 23 5. Les espaces

Plus en détail

Introduction à Dreamweaver CS4

Introduction à Dreamweaver CS4 Introduction à Dreamweaver CS4 Adobe Dreamweaver (anciennement Macromedia Dreamweaver) est un éditeur de site web de type «tel écrit tel écran» (cette formule remplaçant désormais dans la terminologie

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

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

LE POSITIONNEMENT CSS. Quelques notions essentielles

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

Plus en détail

Word 2010 Expert Préparation à l'examen Microsoft Office Specialist (77-887)

Word 2010 Expert Préparation à l'examen Microsoft Office Specialist (77-887) Introduction Qu est-ce que la certification Microsoft Office Specialist? 11 Quels sont les intérêts de la certification? 11 Comment se passe un examen? 12 Comment réussir à l examen? 12 Et après? 12 Et

Plus en détail

WORD Base OBJECTIFS DETAILLES : Documents. Mises en valeur

WORD Base OBJECTIFS DETAILLES : Documents. Mises en valeur WORD Base Objectifs principaux : Formation destinée à acquérir des connaissances de base sur les documents, les mises en valeur, les tableaux, les objectifs graphiques et la gestion des textes. Documents

Plus en détail

Fiche n 1 Interface & Prise en main de Scribus

Fiche n 1 Interface & Prise en main de Scribus Fiche n 1 Interface & Prise en main de Scribus Table des matières 1- Quelques conseils en P.A.O...1 1.1- La mise en page...1 1.2- Les formats de fichiers...1 1.3- Le travail collaboratif...1 1.4- La sauvegarde

Plus en détail

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56)

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Guide d'utilisation De Kompozer AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Table des matières Fiche1 : Créer, nommer et sauvegarder une page...2 Fiche2 : Modifier les couleurs et le fond

Plus en détail

Référentiel Général d Accessibilité pour les Administrations RGAA

Référentiel Général d Accessibilité pour les Administrations RGAA Référentiel Général d Accessibilité pour les Administrations RGAA Annexe 3 : Grilles de correspondance entre les critères de succès et les tests de conformité Page 1/21 1. Grille de correspondance des

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

Programme de Formation Open Office Base Fonctions avancées

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

Plus en détail

Programme de Formation

Programme de Formation Windows / PC - initiation Etre à l aise avec Windows, savoir se situer, organiser son environnement et classer ses documents Tout utilisateur désireux d être rapidement autonome dans l utilisation de l

Plus en détail

Microsoft Word 2002 - Niveau débutant

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

Plus en détail

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

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

Plus en détail

Tutoriel Technique. Plateforme de suivi des usages des ressources. Version 2 Date de conception : 03/2014 Auteur : Équipe UVED

Tutoriel Technique. Plateforme de suivi des usages des ressources. Version 2 Date de conception : 03/2014 Auteur : Équipe UVED Tutoriel Technique Plateforme de suivi des usages des ressources Version 2 Date de conception : 03/2014 Auteur : Équipe UVED 1. Connexion à la plateforme de suivi des usages Pour accéder à la plateforme

Plus en détail

Contenu Microsoft Access 2010

Contenu Microsoft Access 2010 Contenu Microsoft Access 2010 Module 1 Environnement Access 2010 Fichiers d apprentissage Logiciel Access 2010 Base de données Lancement d Access 2010 Ouverture d une base de données Fenêtre Access 2010

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

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

WEB. Travailler la résolution de vos pages

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

Plus en détail

CSS3 CSS3 HTML5. HTML 5 et CSS 3. Cours et exercices corrigés. Cours et exercices corrigés. Jean Engels. J. Engels

CSS3 CSS3 HTML5. HTML 5 et CSS 3. Cours et exercices corrigés. Cours et exercices corrigés. Jean Engels. J. Engels 13/03/12 13:01 Page 1 Jean Engels Enseignant en mathématiques et concepteur de sites Web, Jean Engels est auteur de nombreux ouvrages portant sur les technologies du Web : HTML, CSS, JavaScript, PHP et

Plus en détail

Recueil des Fiches Utilisateurs de «SharePoint»

Recueil des Fiches Utilisateurs de «SharePoint» Recueil des s s de «SharePoint» Ce document regroupe les fiches utilisateurs décrivant la navigation et l utilisation de l application SharePoint. (Référence DSI-DT-Sharepoint-1-4 Mai 2015) SOMMAIRE Accéder

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

Guide Ultra-book / 2012

Guide Ultra-book / 2012 Guide Ultra-book / 2012 Avant de commencer Le logiciel Ultra-book est optimisé pour les derniers navigateurs web standards : Firefox 10 ou 11 Chrome 18 Safari 5 Vous trouverez ces navigateurs en téléchargement

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

Formation continue informatique

Formation continue informatique Formation continue informatique Catalogue cours Entreprises www.formationcontinue.ch Tél. 027 606 9043 Fax 027 606 9051 Table des matières Cours de Migration à Windows 7 et à Office 2010... 3 Windows 7

Plus en détail

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

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

Plus en détail

Tutorial des barres d'outils dans Mozilla Firefox

Tutorial des barres d'outils dans Mozilla Firefox Version 2.1 24. septembre 2007 Tutorial des barres d'outils dans Mozilla Firefox Responsable du projet : Auteur : Collaborateurs : Marc Johannot Cide Cyrille Verdon, Pouly Romain TUTORIIAL Les barres d'outils

Plus en détail

Recueil des Fiches Utilisateurs de «SharePoint»

Recueil des Fiches Utilisateurs de «SharePoint» Recueil des s s de «SharePoint» Ce document regroupe les fiches utilisateurs décrivant la navigation et l utilisation de l application SharePoint. (Référence DSI-DT-Sharepoint-1 Avril 2014) ERGONOMIE GENERALE

Plus en détail

Le tableur de la suite Open Office

Le tableur de la suite Open Office Le tableur de la suite Open Office Open Office est une suite bureautique qui comporte traitement de texte, tableur, Présentation Assistée par Ordinateur (PréAO), dessin et édition de pages Web au format

Plus en détail

INTEGRATEUR DEVELOPPEUR

INTEGRATEUR DEVELOPPEUR www.emweb.fr INTEGRATEUR DEVELOPPEUR FORMATION ELIGIBLE AU DIF/CIF DURÉE : 700 h de formation PRE REQUIS Avoir un esprit logique Etre motivé(e)! OBJECTIF A l issue de cette formation, vous serez capable

Plus en détail

Formation HTML5 / CSS3

Formation HTML5 / CSS3 Objectifs de la formation HTML 5 et CSS3 HTML est un langage qui permet de présenter des informations sur Internet. Bien qu'encore en cours de création, la version HTML 5 est un langage parfaitement utilisable.

Plus en détail

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

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

Plus en détail

Webmaster / Concepteur Multimedia

Webmaster / Concepteur Multimedia Durée : 217 heures Objectifs : Webmaster / Concepteur Multimedia Participants : Toute personne attirée par la création de site internet professionnel. Méthodes : Mise en pratique sur micro-ordinateur.

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

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

Des pages web avec KompoZer

Des pages web avec KompoZer Des pages web avec KompoZer S Patrice NADAM, Lycée La Tour de Dames Rozay-en Brie (77) et Médialog KompoZer est un nouvel éditeur HTML libre et gratuit. Nous vous proposons d aller pas à pas à sa découverte.

Plus en détail

Firefox : un navigateur web libre

Firefox : un navigateur web libre Firefox : un navigateur web libre Niveau débutant Niveau intermédiaire Niveau confirmé Firefox est un navigateur Web libre et gratuit qui a connu un succès croissant. Créé par la fondation Mozilla Firefox,

Plus en détail

Introduction à la programmation web

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

Plus en détail

Adonya Sarl Organisme de Formation Professionnelle 75 Avenue Niel 75017 PARIS, France

Adonya Sarl Organisme de Formation Professionnelle 75 Avenue Niel 75017 PARIS, France WORD Sommaire Word... 1 Introduction... 3 Formations... 3 WORD 2003... 4 WORD 2007... 8 Maîtriser Word 2010, perfectionnement... 14 Maîtriser Word 2010... 16 Word 2007, prise en main... 18 Word 2007, perfectionnement...

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

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

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

Plus en détail

Office 2011 Word, Excel, PowerPoint et Outlook 2011 pour Mac

Office 2011 Word, Excel, PowerPoint et Outlook 2011 pour Mac L'environnement Lancer/quitter une application Office 20 11 Utiliser/gérer le ruban 12 Annuler/rétablir/répéter les manipulations 13 Personnaliser les barres d outils 15 Fonctions communes aux applications

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

PRETASHOP. Etre à l'aise avec l'utilisation d'un ordinateur et d'internet. Maitriser les bases de Microsoft Word.

PRETASHOP. Etre à l'aise avec l'utilisation d'un ordinateur et d'internet. Maitriser les bases de Microsoft Word. PRETASHOP LES OBJECTIFS : Vous verrez comment installer Joomla! localement puis sur un serveur distant, concevoir l organisation de votre site, rédiger vos premiers articles, maitriser les feuilles de

Plus en détail

Formation: Pack office Word, Excel Publisher Perfectionnement

Formation: Pack office Word, Excel Publisher Perfectionnement Marjorie LABERTRANDE Formatrice Indépendante Tel : 06.17.91.68.18 - e. mail : mlformation.var@free.fr Formation: Pack office Word, Excel Publisher Perfectionnement Durée : 5 jours (35 heures) N SIRET :

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

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

Thèmes : Ateliers Bureautiques F2+ dans le cadre du DIF

Thèmes : Ateliers Bureautiques F2+ dans le cadre du DIF Thèmes : Ateliers Bureautiques F2+ dans le cadre du DIF Prise en main de l outil micro / Word / Excel / Internet : 20 h Perfectionnement de l outil micro : Word / Excel / Internet : 20 h Perfectionnement

Plus en détail

Intégration web Les bonnes pratiques LE GUIDE DE SURVIE DE L INTÉGRATEUR! Corinne Schillinger DESIGN. Préface d Élie Sloïm & Laurent Denis

Intégration web Les bonnes pratiques LE GUIDE DE SURVIE DE L INTÉGRATEUR! Corinne Schillinger DESIGN. Préface d Élie Sloïm & Laurent Denis DESIGN Préface d Élie Sloïm & Laurent Denis Corinne Schillinger Intégration web Les bonnes pratiques LE GUIDE DE SURVIE DE L INTÉGRATEUR! Groupe Eyrolles, 2012 ISBN : 978-2-212-13370-7 TABLE DES MATIÈRES

Plus en détail

Conformité RGAA du site internet de la Ville de Pontcharra Rapport d évaluation

Conformité RGAA du site internet de la Ville de Pontcharra Rapport d évaluation Conformité RGAA du site internet de la Ville de Pontcharra Rapport d évaluation Site web évalué : http://villepontcharra.fr Date de l évaluation : 27 juillet 2012 Version du RGAA : RGAA 2.2 (dernière version

Plus en détail

PROGRAMMER UNE PAGE WEB EN HTML ET CSS

PROGRAMMER UNE PAGE WEB EN HTML ET CSS Lycée Felix Le Dantec - Lannion PROGRAMMER UNE PAGE WEB EN HTML ET CSS 1STI2D TP8-3H NOM : PRÉNOM : CLASSE : Condition de réalisation : Travail seul Durée : 3 heures Matériel : un ordinateur sous Ubuntu

Plus en détail

Fluid. Modèle de projet pour e-majine MASSIVE.SHINE

Fluid. Modèle de projet pour e-majine MASSIVE.SHINE Fluid Modèle de projet pour e-majine MASSIVE.SHINE Sommaire I. Présentation... 1 II. Préformatés a - Page d accueil b - Page de portfolio c - Page de contact d - Page de blog... 2... 3... 4... 4... 5 III.

Plus en détail

GUIDE DE STRUCTURATION DES DOCUMENTS

GUIDE DE STRUCTURATION DES DOCUMENTS GUIDE DE STRUCTURATION DES DOCUMENTS à l aide du modèle «Thèse Lyon 2» Version pour les doctorants Service général des publications ERAD juin 2008 Service général des publications ERAD Université Lumière

Plus en détail

Parcours FOAD Formation WORD 2010

Parcours FOAD Formation WORD 2010 Parcours FOAD Formation WORD 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

Guide à la préparation Test(s) de sélection

Guide à la préparation Test(s) de sélection Français Durée : 45 minutes http://www.mesexercices.com Terminologie médicale Durée : 60 minutes http://www.mesexercices.com Vitesse de frappe Durée : 5 minutes de pratique 5 minutes de test www.lecturel.com

Plus en détail

Table des matières Le Poche Excel Réf 4173

Table des matières Le Poche Excel Réf 4173 Table des matières Le Poche Excel Réf 4173 Présentation d'excel Fonctions et rôles d'un tableur Écran de travail Barres de menus Barres d'outils Barre de formule Zone de nom Barre d'état Classeurs, feuilles

Plus en détail

DÉCOUVRIR INTERNET DOCUMENTS PÉDAGOGIQUES. version 0.1 - janvier 2016 - Copyright Net-C

DÉCOUVRIR INTERNET DOCUMENTS PÉDAGOGIQUES. version 0.1 - janvier 2016 - Copyright Net-C DÉCOUVRIR INTERNET DOCUMENTS PÉDAGOGIQUES version 0.1 - janvier 2016 - Copyright Net-C QUI SOMMES-NOUS? Net-C est un service de messagerie Internet depuis 1998, permettant de communiquer entre adresses

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

Dévéloppement de Sites Web

Dévéloppement de Sites Web 1 Dévéloppement de Sites Web Cours IV : Réaliser des pages web Peter Stockinger Séminaire de Maîtrise en Communication Interculturelle à l'institut National des Langues et Civilisations Orientales (INaLCO)

Plus en détail

UTILISATION CMS LINKEO

UTILISATION CMS LINKEO UTILISATION CMS LINKEO Table des matières 1 Synopsis... 3 2 Connexion à l'interface d'administration...4 3 Edition d'une page...5 3.1 Edition d'une page...5 3.2 Ajout d'une image...5 3.2.1 Transfert d'une

Plus en détail

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

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

Plus en détail

CSS avancées Vers HTML 5 et CSS 3

CSS avancées Vers HTML 5 et CSS 3 CSS avancées 2 e édition Raphaël Goetter Préface de Daniel Glazman Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13405-6 Table des matières Avant-propos... 1 Le site dédié au livre... 2 Conventions utilisées

Plus en détail

Safari, navigateur web intégré à Mac OS X

Safari, navigateur web intégré à Mac OS X Service informatique Enseignement Recherche Fiche n 50 13/11/2003 Safari, navigateur web intégré à Mac OS X Alternative à Internet Explorer et à Netscape, SAFARI est le navigateur web intégré à Mac OS

Plus en détail

Progression secrétariat

Progression secrétariat Progression secrétariat I. Notions de base A. L'Unité Centrale et les périphériques 1. Unité centrale a) Le Schéma de principe (1) Entrée et sortie des informations, traitement des informations, en interne

Plus en détail

Recueil des Fiches Utilisateurs de SharePoint 2013 Juin 2015

Recueil des Fiches Utilisateurs de SharePoint 2013 Juin 2015 Recueil des s s de SharePoint 2013 Juin 2015 Ce document regroupe les fiches utilisateurs décrivant la navigation et l utilisation de l application SharePoint. SOMMAIRE Accéder à une application SharePoint:

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

Plan de la formation (1)

Plan de la formation (1) Plan de la formation (1) 1. Présentations, attentes et besoins 2. Contexte de la formation 3. Objectifs 4. Quelques rappels (commandes de base) 5. Démonstrations et expérimentation de commandes avancées

Plus en détail

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet!

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet! Créez en quelques minutes votre site Internet! SOMMAIRE : Choisir une interface graphique - Nommez votre site... page 03 5 étapes de création... page 04 Les outils de création graphique... page 05 Mise

Plus en détail

Introduction aux feuilles de styles

Introduction aux feuilles de styles Introduction aux feuilles de styles 1. Introduction Cette technologie a été introduite par Microsoft avec la version 3.0 (1996) avec pour but de modifier le contenu d'une page par une grande variété d'effets

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

DOSSIER RESSOURCES CRÉATION DE PAGES HTML UTILISATION DU LOGICIEL DREAMWEAVER

DOSSIER RESSOURCES CRÉATION DE PAGES HTML UTILISATION DU LOGICIEL DREAMWEAVER DOSSIER RESSOURCES CRÉATION DE S HTML UTILISATION DU LOGICIEL DREAMWEAVER SOMMAIRE SITE Créer un nouveau site Page 1 Ouvrir un site Pages 1-2 Créer une nouvelle page Page 2 Modifier les propriétés d'une

Plus en détail

(635F) WORD 2010 MODULAIRE

(635F) WORD 2010 MODULAIRE (635F) WORD 2010 MODULAIRE A côté de l offre traditionnelle, le Cefora vous propose également une série de formations in-company en demi-journées. Dans une formation in-company, le contenu des formations

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

Le cercle de formations à distance C.F.A.D. Livret de la formule Bureautique

Le cercle de formations à distance C.F.A.D. Livret de la formule Bureautique C.F.A.D Livret de la formule Bureautique L objectif Acquérir les compétences nécessaires dans l exploitation générale d un ordinateur en milieu professionnel. Les domaines étudiés correspondent aux besoins

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