Coffret : Sites modernes et fondamentaux de Dreamweaver CS6

Maîtrisez et appliquez les nouveaux langages du web

Les fondamentaux de Dreamweaver CS6 et la formation sur le Responsive Web Design avec HTML5 et CSS3, voici le kit complet et incontournable pour prendre en main et maîtriser les nouveaux langages du web ! En compagnie du formateur Birnou Sébarte, vous aborderez toutes les notions indispensables à la création de sites web modernes et qui répondent aux exigences du web et des utilisateurs.

Votre formateur/Vos formateurs: Birnou Sébarte

Date de parution: 12 sept. 2012

€ 79,60

Durée: 19h30

Ce coffret regroupe les 2 formations suivantes : Dreamweaver CS6 : Les fondamentaux et Responsive Web Design avec HTML5 et CSS3.

Qu'est-ce que je reçois ?

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation ! Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo. N'hésitez pas à nous contacter si vous avez des questions !

Compatible avec l’iPad, Android et HTML5

Formation téléchargeable

Fichiers source

Dreamweaver

Fireworks

Dans le panier Téléchargement

Formations similaires

Dreamweaver CS6 : Les fondamentaux

Découvrons la toute nouvelle version de Dreamweaver CS6 ! Tout en parcourant les fonctionnalités de base de l'outil, nous mettrons en place un site accessible sur téléphone portable comme sur écran de grande résolution.

Introduction
- Tout au long des chapitres, nous alternerons entre un bac à sable où nous expérimenterons certaines fonctionnalités et un fil rouge qui nous servira pour créer un site répondant à l'affichage entre un ordinateur et un téléphone portable.
  
  Présentation de la formation
  
  04:22
Présentons ici un certain nombre de notions indispensables pour travailler efficacement avec Dreamweaver.

Dreamweaver et le web
- Nous allons utiliser au quotidien les langages HTML, CSS et JavaScript pour construire et gérer nos pages web.
  
  Trois langages de programmation utiles
  
  05:11
- L'ensemble des fichiers est consulté dans une relation client serveur. Nous verrons que, lorsque l'on a recours à des langages côté serveur tels que PHP, ASP, ou ColdFusion, il est quand même renvoyé du HTML, CSS et JavaScript côté client.
  
  La relation client serveur
  
  02:03
- Nous verrons ici qu'un éditeur WYSIWYG permet de restituer en temps réel le rendu du code qui est saisi.
  
  Comprendre les éditeurs WYSIWYG
  
  04:02
- Dreamweaver apporte une solution complète et ergonomique pour traiter l'ensemble des phases nécessaires à la réalisation d'un site, de la page blanche jusqu'à la mise en ligne des contenus.
  
  Place et rôle de Dreamweaver
  
  05:24
- Installons maintenant certains navigateurs qui permettront de tester le bon fonctionnement des pages et d'utiliser certains outils pour affiner et enrichir nos contenus.
  
  Les navigateurs et les outils modules externes
  
  04:17
- Avant de travailler sur l'architecture, le contenu et la présentation de nos sites, il est très important de réfléchir à l'accessibilité de ce contenu.
  
  Notions d'accessibilité
  
  07:48
- Il faut également anticiper l'optimisation du contenu et de l'architecture du site pour le référencement auprès des moteurs de recherche.
  
  Notions de référencement
  
  07:23
Avant de mettre en place un site, nous parcourrons dans ce chapitre l'environnement de travail et l'interface utilisateur de Dreamweaver pour en comprendre les finesses.

L'interface utilisateur
- Dès son ouverture, Dreamweaver nous propose un écran d'accueil aux multiples possibilités accessibles d'un simple clic.
  
  Écran d'accueil
  
  06:17
- Que l'on soit sous Windows ou sous Mac OS, Dreamweaver propose exactement les mêmes environnements de travail. Découvrons rapidement l'interface utilisateur.
  
  Découverte de l'interface générale
  
  03:35
- Explorons le fonctionnement et la manipulation des palettes de l'interface de Dreamweaver.
  
  Fonctionnement des palettes
  
  05:46
- Le travail sur un document HTML se partage entre code source et mode de rendu. Dreamweaver nous permet de suivre en permanence ces deux modes.
  
  Code source et mode de rendu
  
  04.32
- De même que Dreamweaver nous permet de travailler sur le fond et la forme, l'inspecteur Propriétés nous permet de basculer entre structure HTML et rendu CSS en fonction de nos choix.
  
  Inspecteur Propriétés
  
  04:39
- Nous allons voir que Dreamweaver sait s'adapter selon notre besoin à différents outils et palettes. Il nous propose de gérer à notre place divers espaces de travail.
  
  Principales palettes et espaces de travail
  
  03:40
- Pour travailler des pages HTML et CSS, il faut faire référence à un projet de site. Mettons en place un site de travail et indiquons tous les paramètres nécessaires.
  
  Gestion d'un site web et paramétrages de base
  
  06:08
- Faisons ici un rapide tour d'horizon des diverses possibilités de réglage de préférences.
  
  Préférences
  
  06:27
Un site est avant tout une collection de page reliées entre elles. Nous allons donc dans ce chapitre étudier les diverses mécaniques à notre disposition.

Créer une page
- Commençons par mettre en place un document HTML de manière traditionnelle, c'est-à-dire depuis un éditeur sans assistance visuelle.
  
  Mise en place d'une page HTML à la main
  
  06:34
- Utilisons cette fois-ci Dreamweaver et son assistance visuelle. Penchons-nous également sur les principales différences entre les différents DOCTYPE.
  
  Mise en place d'une page HTML avec assistance visuelle
  
  07:39
- Si l'on travaille avec des caractères accentués ou des signes commerciaux, il faut s'assurer de leur bonne portabilité sur les navigateurs des différents internautes.
  
  Encodage des caractères
  
  06:37
- Le web sans la notion d'hyperliens n'aurait pas du tout le même intérêt. Explorons donc la fonctionnalité qui a permis à HTML de devenir le langage le plus largement utilisé dans la planète web.
  
  Types d'hyperliens
  
  06:11
- Lier des pages entre elles demande une rigueur d'architecture. Nous présenterons ici les manières de définir des chemins d'accès, absolus ou relatifs.
  
  Lien absolu et lien relatif
  
  06:45
- Les hyperliens à adresse absolue peuvent également pointer vers d'autres protocoles utilisés sur Internet tels que FTP, Gopher, news ou encore mailto.
  
  Liens vers d'autres protocoles
  
  04:39
- Afin d'affiner la navigation au sein des pages ou entre les pages, nous verrons qu'il est possible d'utiliser des ancres nommées.
  
  Ancres
  
  07:35
- Après avoir créé une page, créons maintenant un ensemble de pages de la même manière et relions-les entre elles par des liens. La notion de modèle nous permet de travailler plus efficacement.
  
  Notion de modèle et modèles par défaut
  
  10:28
- Revenons ici sur les notions de structuration et de sémantique de nos contenus, afin de mieux appréhender un des avantages de l'utilisation du HTML5.
  
  HTML5
  
  05:42
Avec le HTML, l'utilisation des CSS permet de mettre en forme rapidement le contenu de nos pages. Nous explorerons dans ce chapitre les différentes possibilités que nous offre Dreamweaver pour implémenter les styles.

Approche des CSS
- Présentons ici les diverses manières de générer et d'utiliser des feuilles de style CSS au sein d'une page HTML.
  
  Définition et principe des CSS
  
  05:40
- Tous les navigateurs ne restituent pas de la même manière les CSS par défaut. Nous allons présenter ici la feuille de réinitialisation.
  
  Feuille CSS de réinitialisation
  
  05:43
- Nous présenterons ici les principaux types de sélecteurs qui permettent la mise en forme du contenu.
  
  Types de sélecteurs
  
  07:54
- Parcourons ici les divers outils qu'offre Dreamweaver pour définir les couples propriétés-valeurs lors de la définition de nos styles. Et utilisons le regroupement par famille.
  
  Les propriétés et leurs familles
  
  05:14
- L'apparition des CSS et l'absence de recommandation fait que les navigateurs proposent tous à leur manière l'intégration des propriétés. En attendant la définition de recommandations, utilisons des préfixes.
  
  Préfixes
  
  08:05
- La palette des CSS est riche de possibilités. Apprenons à manipuler les règles et les déclarations, les CSS deviennent alors un jeu d'enfant.
  
  Travailler avec la palette des CSS
  
  05:32
- Apprenons maintenant à utiliser les commutateurs Tous et Actuel qui permentt de suivre le débogage ou la mise en place d'une feuille de style un peu complexe.
  
  Les commutateurs Tous et Actuel
  
  04:41
- Dreamweaver nous propose l'utilisation d'un affichage en direct, véritable rendu webkit, avec un mode d'inspection qui va matérialiser les marges et les remplissages.
  
  Affichage en direct et inspection
  
  02:38
- Le code Navigator est une palette Inspecteur flottante qui permet d'accéder rapidement à toutes les déclarations appliquées à un objet du DOM.
  
  Code Navigator
  
  02:08
Mettons maintenant en application les fonctionnalités que Dreamweaver nous propose. Mettons en place un site web tout en poursuivant l'exploration de l'IDE de Dreamweaver.

Construire des pages
- En se basant sur la maquette travaillée dans Fireworks, voyons comment Dreamweaver permet de restituer du contenu qui va donc se répartir entre structurel HTML et visuel CSS.
  
  Mise en place du projet et création d'un modèle
  
  06:58
- Une fois le modèle mis en place, nous allons nous concentrer sur l'arborescence du site. Il faut créer le menu principal de navigation et l'ensemble des pages qui en découlent.
  
  Mise en place d'un menu et d'une arborescence
  
  06:15
- Une fois la structure du conteneur mise en place, nous allons travailler sur la structure du contenu en affinant sa nature.
  
  Structure du contenu
  
  04:57
- Mettons en place un premier travail sur les CSS pour placer les éléments dans l'espace.
  
  Première mise en forme des CSS
  
  11:09
- Dreamweaver nous aide à placer et à utiliser beaucoup de balises HTML et ce, par simple clic dans l'interface. Apprenons ici à les utiliser.
  
  Exploration de balises HTML peu ou mal utilisées
  
  09:24
- Faisons un tour d'horizon pour voir quel type de balises utiliser afin d'intégrer les contenus principaux de nos pages.
  
  Organisation des pages
  
  01:58
- Très souvent, les commanditaires de sites travaillent les contenus sous Word. Nous allons voir comment récupérer depuis Dreamweaver le contenu et la structure des documents.
  
  Importation de contenu Word
  
  07:15
- Dreamweaver nous permet de travailler les tableaux de manière assez avancée. L'importation de données tabulées ou de documents Excel est également prise en compte.
  
  Tableaux et importation de données tabulées
  
  11:46
- Apportons ici une seconde couche de mise en forme visuelle et intervenons sur les derniers éléments intégrés dans le contenu de nos pages.
  
  Seconde mise en forme des CSS
  
  09:44
- Le navigateur d'aperçu utilise un moteur de rendu webkit. Couplé à l'outil d'inspection et aux diverses palettes de l'IDE de Dreamweaver, il deviendra vite un outil très précieux.
  
  Navigateur d'aperçu
  
  03:09
Les pages web utilisent l'image bitmap. Explorons dans ce chapitre les formats d'image pour le web puis leur utilisation au sein des pages HTML, qu'il s'agisse d'image de contenu ou d'images d'illustration.

Gestion des images
- Présentons la notion de pixel et de bitmap afin de mieux appréhender les trois principaux formats d'image utilisés sur le web : JPG, GIF et PNG.
  
  Images bitmap
  
  07:55
- Intégrer des images dans le flux d'un document est chose facile avec Dreamweaver, notamment en bénéficiant de l'aide de l'IDE de Dreamweaver.
  
  Insertion de médias image
  
  04:42
- Une fois les images importées dans Dreamweaver, il est toujours possible d'intervenir sur leur aspect.
  
  Modifications permanentes des images
  
  05:15
- Il est également possible de travailler avec des images natives au format PSD qui sera converti en Smart Object (objet dynamique) au sein de Dreamweaver.
  
  Insertion d'objets dynamiques
  
  05:02
- La même possibilité existe avec des formats natifs PNG de Fireworks.
  
  Association d'images au format PNG
  
  04:20
- La gestion des cartes-images est une opération simple dans Dreamweaver. Cependant, n'hésitez pas à basculer dans Fireworks depuis l'inspecteur Propriétés et à travailler en aller-retour entre les deux logiciels.
  
  Interaction entre Dreamweaver et Fireworks
  
  05:50
- Comment utiliser les images pour illustrer nos pages web ? Nous avons le choix entre l'insertion des images dans le code source HTML et le placement de l'image d'illustration en image d'arrière-plan depuis les CSS.
  
  Image de contenu ou d'illustration
  
  06:21
- Intégrons ici l'ensemble des images de contenu et adaptons au cas par cas les feuilles de style.
  
  Ajout des images dans les pages
  
  05:16
- Gérons maintenant l'ensemble des images d'illustrations prises en compte par les feuilles de styles CSS, grâce à la technique des sprites.
  
  Gestion des images dans les CSS
  
  06:40
Nous allons explorer au cours de ce chapitre quelques éléments qui vont nous permettre d'améliorer notre flux de travail et de travailler avec les principaux médias.

Enrichissement du site et gestion des médias
- En complément de l'utilisation des modèles de pages, Dreamweaver nous offre la possibilité d'avoir recours à des éléments de librairie.
  
  Utilisation d'un élément de librairie
  
  07:50
- HTML5 nous permet d'utiliser la balise vidéo et il n'est plus nécessaire de recourir à un plug-in par exemple. L'inconvénient est qu'il faut publier la vidéo sous trois formats différents pour qu'elle soit lue par tous les navigateurs.
  
  Insertion de médias vidéo
  
  07:54
- Nous verrons ici qu'il est toujours possible d'avoir recours aux balises prédéfinies <figure> et <figcaption> afin d'apposer des légendes à nos images ou à nos graphiques.
  
  Création d'une image avec sa légende
  
  02:57
- Nous verrons ici que Dreamweaver nous propose diverses manières d'organiser la gestion des médias. Nous avons le choix entre la palette Fichiers, l'utilisation de Bridge ou encore la palette des actifs.
  
  Palettes des actifs
  
  04:22
- Il est possible d'optimiser la technique des sprites pour les feuilles de style CSS en utilisant qu'un seul et unique fichier graphique.
  
  Gestion d'un menu sprite
  
  08:11
- CSS3 nous permet d'utiliser des propriétés de transformation, au niveau de l'échelle, de la rotation, des déplacements, etc. mais aussi d'appliquer des transitions entre des valeurs de départ et des valeurs d'arrivée.
  
  Application d'une transition
  
  09:02
- Apprenons les différentes manières d'intégrer du contenu Flash à nos pages, en utilisant des fichiers SWF ou FLV.
  
  Ajout de contenu Flash à nos pages
  
  06:55
Nous allons explorer certaines possibilités que nous offre la librairie SPRY. Nous verrons également que Dreamweaver utilise d'autres possibilités notamment dans le panneau Comportements avec des effets ou encore avec les formulaires pour gérer la validation.

La librairie SPRY
- Présentons les différents types de librairies JavaScript qui permettent d'implémenter des fonctionnalités avancées dans nos pages web. Adobe propose un framework, SPRY, directement intégré à Dreamweaver.
  
  Introduction à SPRY
  
  04:06
- Nous verrons ici l'utilisation de l'élément Menu fourni par la librairie SPRY. Celui-ci est très ergonomique et simple.
  
  Barre de menu
  
  05:23
- Penchons-nous maintenant sur les panneaux à onglet et apprenons à les configurer et à les personnaliser.
  
  Panneaux à onglet
  
  05:15
- Le menu Accordéon ne propose pas toutes les options depuis l'inspecteur Propriétés. Nous verrons qu'il est possible d'ajouter rapidement quelques options directement depuis le JavaScript.
  
  Menu Accordéon
  
  04:30
- Le menu Accordéon qui ne contient qu'un seul onglet s'appelle le panneau réductible. Nous apprendrons à l'utiliser et à le personnaliser.
  
  Panneau réductible
  
  01:19
- Une autre merveille d'intégration et d'ergonomie est le composant d'info-bulle SPRY. Nous verrons qu'il est personnalisable à souhait.
  
  Info-bulle
  
  04:52
- En assemblant les fonctionnalités de deux des composants SPRY, les panneaux à onglets et l'insertion de données dynamiques, il va être facile de compléter la page Produits.
  
  Données dynamiques
  
  10:48
- Nous verrons ici que SPRY apporte également une large librairie d'effets visuels qu'il est possible d'utiliser depuis la palette des comportements.
  
  Effets SPRY
  
  04:15
Pour collecter des données depuis une page web, on utilise un formulaire pour les envoyer au serveur. Voyons dans ce chapitre tout ce que cela implique.

Les formulaires
- Avant de placer quelques champs de récupération de données, il faut commencer par décrire le formulaire.
  
  Principes d'un formulaire
  
  04:52
- Nous allons entrer un à un les divers champs de saisie. Nous utiliserons alternativement le mode Code et le mode Création.
  
  Mise en place des balises
  
  09:03
- Une fois l'aspect structurel défini et mis en place, il ne nous reste plus qu'à apporter une touche d'identité visuelle.
  
  Mise en place d'un style sur nos champs
  
  06:19
- Nous verrons ici qu'il existe une grande différence entre HTML4 et HTML5 en ce qui concerne la gestion des champs de type input texte.
  
  Différents types de champ
  
  03:08
- En attendant que l'ensemble des userAgent permettent de vérifier la bonne tenue de nos formulaires avant leur envoi, il est possible d'utiliser la librairie SPRY pour réaliser cette tâche.
  
  Les SPRY pour valider son formulaire
  
  06:15
De plus en plus, les sites déposés sur le web sont consultés depuis de nombreux types de plateformes. Apprenons dans ce chapitre à développer des sites qui puissent s'adapter à ce genre de situation.

Produire pour divers supports
- Nous allons voir ici qu'il est possible de destiner des feuilles de style à des supports d'affichage différents, qu'il s'agisse d'écran, d'impression, d'appareil portable, de braille, etc.
  
  Les différents modes de rendu
  
  05:23
- Pour définir l'utilisation des feuilles de style, nous pouvons utiliser les requêtes de médias.
  
  Les requêtes de médias et le panneau multi-écran
  
  04:58
- Après la théorie, passons maintenant à la pratique. Portons le site de Hypo Restaurenti vers une utilisation uniquement mobile et écran.
  
  Mise en place des différentes CSS
  
  08:23
- Une fois nos pages réactives, nous allons nous assurer que les contenus de type image par exemple puissent eux aussi être réactifs.
  
  Création de contenu réactif
  
  05:18
- Depuis l'apparition de @font-face, il est possible d'utiliser des polices qui ne seraient pas installées sur le système de l'internaute.
  
  Utilisation des polices web
  
  05:32
- Dreamweaver CS6 intègre maintenant toute la gestion de la déclaration @font-face. Nous allons donc au cours de cette étape créer une famille de polices.
  
  Création de familles de polices
  
  03:36
Dans les chapitres précédents, nous avons travaillé en local sur une machine de travail. Il est maintenant temps de placer ce contenu en ligne pour le rendre disponible aux internautes.

Optimisation et publication d'un site
- N'attendez pas d'avoir terminé le site avant de corriger les éventuelles fautes d'orthographe qu'il peut contenir.
  
  Correction orthographique
  
  02:04
- Nous verrons ici que l'outil Rechercher et remplacer de Dreamweaver devient très vite incontournable.
  
  Outil Rechercher et remplacer
  
  09:25
- Il est très important de vérifier que tous les liens du site pointent vers une page existante pour ne pas envoyer les internautes vers une erreur 404. De même, il est utile de vérifier les pages orphelines du site.
  
  Vérifier les liens et les pages orphelines
  
  01:59
- Dreamweaver permet de se connecter directement sur un compte BrowserLab afin de tester et comparer le rendu des pages sur divers environnements de navigateurs et de systèmes.
  
  Tester sur BrowserLab
  
  04:12
- Le site est presque terminé. Il ne nous reste plus qu'à commencer les tests en ligne et à y inviter les premiers internautes bêta-testeurs.
  
  Paramètres FTP et Dreamweaver
  
  05:52
- Une fois le site local et le site distant connectés, il nous faut transférer les fichiers. Nous allons voir que Dreamweaver nous propose de voiler certains documents puis de synchroniser les fichiers.
  
  Voiler et synchroniser
  
  08:18
- Lorsque nous travaillons en équipe, il est bon de savoir qui travaille sur tel ou tel fichier afin de ne pas écraser les travaux en cours. Dreamweaver propose à cette fin le travail en mode Archivage et extraction.
  
  Archivage et extraction de fichiers
  
  06:39
L'outil Dreamweaver est tellement complet et polyvalent qu'on ne peut pas l'épuiser en une seule formation ! Après la prise en main, voici maintenant quelques pistes pour aller plus loin.

Pour approfondir
- Afin de garder une bonne lisibilité et un bon équilibre dans des interfaces qui se veulent de plus en plus liquides, il est bon d'adopter la création d'interface en s'appuyant sur un mode Grille.
  
  Travailler en mode Grille
  
  04:08
- Il existe deux manières de publier du contenu à destination de diverses plateformes : soit en utilisant les Media Queries soit en ayant recours aux frameworks de grille liquide qui vont utiliser JavaScript pour réaliser cette bascule.
  
  Utiliser Less Framework
  
  06:04
- Si les fonctionnalités que l'on souhaite apporter à nos pages ne sont pas accessibles depuis l'interface de Dreamweaver, il faut consulter le navigateur de widgets qui regorge de fonctionnalités.
  
  Panneau des widgets
  
  09:41
- En complément des fonctionnalités comme les transitions CSS, l'inspecteur de widgets ou encore les librairies SPRY, Dreamweaver nous propose une palette Comportements fort utile.
  
  Comportements de base
  
  04:58
- Si Dreamweaver ne vous apporte pas la fonctionnalité recherchée, regardez du côté de la plateforme d'échange d'Adobe. Vous y trouverez un grand nombre de fonctionnalités très intéressantes et bien souvent gratuites.
  
  Ajout d'extensions Dreamweaver
  
  04:47
- Cette formation est terminée. Découvrons ensemble quelques liens d'aide, de tutoriaux et ressources diverses sur Dreamweaver pour continuer à découvrir et à échanger sur ce logiciel.
  
  Aide en ligne et ressources
  
  02:26

Responsive Web Design avec HTML5 et CSS3

Dans ce chapitre, nous poserons les bases de la conception de sites web adaptatifs (Responsive Web Design) avec HTML5 et CSS3 et définirons dans un premier temps un environnement de travail et quelques axes de réflexion.

Introduction
- Passons tout d'abord en revue le sommaire de cette formation en détaillant l'ensemble des chapitres et le contenu.
  
  Objectifs et présentation de la formation
  
  04:51
- Pour les fins de cette formation, nous allons recourir à un éditeur de code. Que ce soit pour éditer les fichiers HTML, CSS, ou encore htaccess, il existe de nombreuses solutions sous Mac comme sous Windows. Nous utiliserons personnellement Dreamweaver et Fireworks.
  
  Les outils de codage
  
  03:28
- Il est important de tester continuellement l'avancée de nos développements au fur et à mesure, et de ne surtout pas attendre la fin du projet pour s'assurer de leur bonne portabilité sur les diverses plateformes et environnements. Pour cela nous devrons recourir à divers outils de visualisation.
  
  Les outils de contrôle
  
  03:47
- Adobe Shadow est un serveur qui permet de visualiser en temps réel le rendu des interfaces sur l'ensemble des équipements connectés. Qu'il s'agisse de Smartphone, de tablettes ou encore de mini-tablettes, l'application permet, entre autres choses, de visualiser en temps réel le rendu de l'interface.
  
  Shadow
  
  05:30
- Il est important de bien différencier la notion d'application mobile de celle de site web mobile, c'est-à-dire de site Internet pouvant être consulté depuis un appareil mobile. Par essence, un site web peut être consulté depuis tout type d'appareils mobiles, pour autant que nous en ayons optimisé la lisibilité et l'utilisation.
  
  Web mobile ou web app ?
  
  04:32
- Prenons quelques instants pour définir quelques notions ou expressions qui risquent d'être récurrentes au cours des étapes suivantes : les polyfills, les shim ou shiv, et l'espace GitHub.
  
  Définitions
  
  02:55
Au cours de ce chapitre, nous allons explorer les bases de la mise en place et de l'utilisation de grilles, qu'elles soient fixes ou fluides. Le prototypage est une phase incontournable de la création de sites web.

Avant de commencer, prototypons
- Lors du développement de sites devant être visualisables aussi bien sur un appareil mobile, que sur un écran large de bureau, il est bon de faire appel pour la construction des interfaces à des modes de mise en pages.
  
  Le mode Grille, les bases
  
  05:20
- Nous explorerons ici l'utilisabilité des interfaces de nos sites, nous déterminerons s'il faut recourir à des grilles fixes ou plutôt liquides. Nous verrons ce qui influence la différence de présentation.
  
  Grille fixe ou grille liquide
  
  03:51
- Que l'on opte pour un mode fixe ou liquide, il existe forcément un framework qui correspond à nos besoins. Nous allons voir que les panoplies d'outils sont nombreuses et que nous avons l'embarras du choix.
  
  Les frameworks
  
  04:30
- Au cours de cette étape, nous allons mettre en évidence la simplicité d'utilisation d'un framework CSS. Nous reprendrons pour cela l'exemple de notre prototype et verrons comment se présente une base HTML correctement structurée.
  
  Exemple d'utilisation en grille
  
  08:45
- L'utilisation d'un framework ne s'arrête pas à une simple mise en pages, nous verrons ici quelques unes des autres possibilités qu'offre cet outil.
  
  Aller plus loin avec les grilles
  
  04:05
- Le principe d'utilisation d'un framework à grille liquide est aussi simple que rapide. Nous allons rester ici sur le type d'environnement 960, et utiliser cette fois-ci le module adapt.js.
  
  Les grilles responsives
  
  06:46
- Depuis sa version CS6, Dreamweaver propose également l'intégration d'une solution de développement en mode grille fluide. Il intègre le framework Golden Grid System et permet de mettre en place l'aperçu et l'affichage de nos pages en fonction des plateformes de distribution.
  
  Grille responsive mode Dreamweaver
  
  10:48
- L'utilisation d'un framework CSS pour définir nos interfaces suppose un travail de réflexion préalable. Des maquettes de travail doivent être préparées avant de procéder à la représentation des interfaces sur chacune des plateformes concernées.
  
  Prototype en grille, le wireframing
  
  06:17
Dans ce chapitre, nous verrons que l'évolution vers HTML5 ne se limite pas à l'ajout de quelques balises, le changement est plus profond.

HTML5
- Il est bon de replacer HTML5 dans son contexte. Son arrivée dans les colonnes du w3C marque un ancrage fort du côté de la structure et de la sémantique.
  
  Doc type, structure et sémantique
  - Rapide retour sur l'histoire du HTML et son évolution de la version 4.01 de 1999 à sa version 5 actuelle. Parlons-nous d'HTML 5 ou HTML5 ? S'agit-il d'une version stricte ou transitionnelle ?
    
    Bref historique
    
    05:36
  - Voyons comment suivre les évolutions du langage et de ses balises sur WHATWG et sur W3C. Attention, il ne s'agit pas ici de recommandations mais toujours bien de pages brouillons.
    
    Le W3C et WHATWG
    
    02:12
  - Créer un document HTML n'est plus une affaire de déclaration d'espace, de nommage, ou de doctype. Tout est dorénavant d'une grande simplicité.
    
    En-tête et corps
    
    02:12
  - Au-delà de la structure et du découpage de nos contenus, il est important d'accentuer la sémantique de nos documents, il faut enrichir chacune des balises en leur donnant un sens et une description plus fine.
    
    Structure et sémantique
    
    07:37
  - Nous allons voir qu'HTML5 ne fait que renforcer l'utilisation des microformats dans nos balises. Cette utilisation permet, entre autres choses, d'allonger la liste des descriptions sémantiques de nos contenus.
    
    Les microformats
    
    05:10
  - En complément des microformats, les microdata permettent d'aller plus loin dans la description de l'information et répondent à des besoins récurrents de description de personnes, d'événements, d'organisations et plus encore.
    
    Les microdata
    
    02:58
  - Initialement mis en place pour la spécification WAI-ARIA, les attributs Rôle permettent de définir encore plus précisément le rôle, l'état et la nature de certaines balises.
    
    ARIA et l'attribut Rôle
    
    03:22
- Ce chapitre sera consacré à une présentation plus verticale d'un grand nombre des nouvelles balises et des nouveaux attributs apparus avec cette version HTML5.
  
  HTML5, les balises
  - Les nouvelles balises apparues dans la version HTML5 du langage sont d'une part structurelles et sémantiques avec les <header>, <footer>, mais aussi multimédia avec les <video>, <figure> et créatives avec <svg> ou encore <canvas>.
    
    Les nouvelles balises
    
    03:14
  - Deux de ces balises, à savoir <article> et <section>, peuvent s'imbriquer l'une dans l'autre, dans un ordre comme dans l'autre et permettent d'obtenir des compositions d'articles regroupés en sections, ou d'articles découpés en sections.
    
    Article ou section ?
    
    02:03
  - La balise de navigation <nav> permet de distinguer des groupes de liens du reste de la page sous forme d'éléments de navigation.
    
    nav
    
    03:00
  - Contrairement à ce que l'on pourrait penser, la balise <aside> n'est en rien une sidebar ou une barre latérale. Il s'agit d'une balise contenant des compléments d'informations relatifs à la balise parent dans laquelle elle est située.
    
    aside
    
    01:44
  - Les balises d'en-tête et de pied de page, <header> et <footer> ne sont pas exclusivement réservées à la page et à son élément <body>. Bien au contraire. Voyons ce qu'il en est.
    
    header, footer, h1
    
    03:51
  - Prenons ici un peu de recul et combinons l'ensemble des balises vues au cours des étapes précédentes afin de construire une page modèle. Il ne s'agit pas là d'une finalité, mais bien au contraire d'une base de réflexion et de structuration.
    
    Structure de page modèle
    
    01:52
  - Les nouvelles balises ne se limitent pas à celles vues précédemment, il en existe en effet beaucoup d'autres utilisables pour divers contenus de pages et couvrant la quasi totalité des besoins des développeurs.
    
    Quelques balises pêle-mêle
    
    04:31
  - En complément des balises, de nouveaux attributs ont fait leur apparition dans cette version HTML5. Nous allons en explorer certains et voir ce que nous permet de faire le nouvel attribut data-*.
    
    Quelques attributs pêle-mêle
    
    07:03
  - Web Forms 2.0 est intégré à HTML5 et permet non seulement d'accéder à de nouveaux types d'éléments <input>, mais aussi d'absorber des fonctionnalités sous forme d'interactions ou de composants grâce aux navigateurs.
    
    Web Forms 2.0 et les types de champs
    
    06:34
- Dans ce chapitre, nous verrons qu'HTML5 donne accès à un grand nombre d'API qui permettent elles-mêmes d'accéder de manière native à une multitude de fonctionnalités.
  
  API et librairies
  - Au-delà des balises et attributs, de nombreuses API viennent enrichir HTML5. Les modules sont nombreux et l'intégration parmi les navigateurs n'est pas toujours homogène.
    
    Les API
    
    03:30
  - Les API localStorage et sessionStorage permettent de stocker de l'information et de mettre en place de réelles applications fonctionnant hors ligne.
    
    sessionStorage et localStorage
    
    05:12
  - La géolocalisation couplée à une API Google Map est la dernière nouveauté en date. Afficher des cartes est dorénavant un jeu d'enfants.
    
    Géolocalisation
    
    07:37
  - Il existe un très grand nombre d'API. Pour toutes les aborder, il nous faudrait des heures de formation. Voyons ensemble quelques-unes des plus importantes.
    
    Plus d'info sur le HTML5
    
    03:49
  - Beaucoup de nouveautés, beaucoup de possibilités, et donc souvent presque tout autant de problèmes ou risques potentiels. Voyons ici comment les anticiper au mieux.
    
    La sécurité
    
    02:34
  - Qu'en est-il de la prise en charge de toutes ces nouveautés par les navigateurs modernes ? C'est ce que nous allons voir ensemble ici.
    
    Les navigateurs et leurs interprétations
    
    03:27
  - Voyons comment passer en douceur de certaines habitudes HTML4 vers HTML5 ou encore comment convertir rapidement un site d'un doctype vers l'autre.
    
    Le passage HTML4 à HTML5
    
    04:40
  - Les versions d'Internet Explorer antérieures à 9 ne reconnaissent pas les nouvelles balises apparues dans HTML5. Il va donc falloir les recréer à la volée. Découvrez ici comment procéder.
    
    HTML shiv
    
    04:28
  - Véritable couteau suisse du développement sous HTML5, la librairie Modernizr regorge de possibilités et est d'une grande souplesse d'utilisation.
    
    Modernizr
    
    12:49
  - Bien qu'il soit à ce stade un peu prématuré d'aborder Boilerplate et Initializr, nous verrons ici que ces deux frameworks contiennent tout ce dont nous avons besoin pour démarrer rapidement un site web propulsé par HTML5.
    
    Boilerplate, Initializr et les autres...
    
    05:00
  - Nous avons vu déjà un grand nombre d'étapes sur HTML5 et pourtant nous n'avons fait qu'en effleurer la surface. Voici comment vous pouvez continuer à approfondir le sujet par le biais de quelques sites intéressants.
    
    Les sites (doctor HTML5, etc.)
    
    01:26
Dans ce chapitre, nous allons aborder diverses facettes des CSS. Nous verrons plus particulièrement la manière de les déployer, de les placer en production et de les rendre le plus largement portable.

CSS3
- Collant au HTML5, les CSS avaient, au-delà des déclarations, besoin d'évoluer avec le web, au rythme du web. Nous passerons ici en revue un mélange de déclarations, de règles et de mécaniques et éclaircirons leur utilité.
  
  Déclarations, règles, portabilité
  - Avant d'entamer les diverses étapes de l'utilisation des CSS, il est intéressant de faire un rapide état des lieux, d'une part d'un point de vue historique et d'autre part en revenant sur les moteurs de rendu des principaux navigateurs usuels.
    
    État des lieux entre 2.1 et 3 et 4
    
    04:48
  - Voyons ici comment utiliser les déclarations CSS de niveau 3 pour rendre nos sites plus esthétiques, plus ergonomiques, et cela sans mettre à mal les versions plus anciennes des navigateurs.
    
    Les préfixes
    
    04:58
  - Difficile de faire l'impasse sur des déclarations comme border-radius ou box-shadow qui ont déjà fait le top 10 des articles sur CSS3 et ont été quasi intégrées de manière non préfixée dans la plupart des navigateurs.
    
    Les déclarations incontournables
    
    06:19
  - CSS3 apporte une nouvelle possibilité d'écriture des couleurs, toujours en RVB, mais cette fois en usant non plus de valeurs hexadécimales, mais de valeurs d'octets par couche, ou encore d'HSL et en ajoutant de l'opacité.
    
    Gestion des couleurs et des dégradés
    
    12:20
  - Les CSS ne concernent pas seulement les déclarations, les propriétés et valeurs. Un de leur grand atout réside aussi dans les sélecteurs, sélecteurs à qui l'on oublie cependant souvent de faire appel.
    
    Les sélecteurs
    
    10:44
  - Le nouveau mode d'affichage de boîte flexible peut de prime abord porter à confusion, mais une fois pris en main, vous verrez à quel point il est intéressant. Il va nous permettre de gagner en souplesse lors de la mise en place d'interfaces.
    
    De plus en plus flexible
    
    10:38
  - Il existe un grand nombre d'outils gratuits et accessibles en ligne permettant de générer rapidement du code CSS. Les interfaces graphiques sont très intuitives et permettent de tester la bonne prise en compte des descriptions par les navigateurs.
    
    Les outils générateurs en ligne
    
    04:31
  - Fireworks nous propose d'interpréter un grand nombre de propriétés sous forme de CSS. Il devient alors très confortable d'utiliser non seulement un outil graphique à la base pour générer des CSS, mais aussi de pouvoir ponctionner des éléments de l'interface.
    
    Fireworks et CSS3 properties
    
    03:37
- Nous verrons dans ce chapitre qu'il existe un grand nombre de solutions et d'outils permettant de générer et de porter les CSS sur un plus large panel de navigateurs.
  
  Librairies et préprocesseurs
  - Internet Explorer, surtout dans ses versions antérieures, ne prend pas en compte les propriétés CSS3. Il existe cependant une librairie .htc et une JavaScript qui permettent de remédier dorénavant à cette problématique.
    
    CSS3 PIE
    
    04:25
  - L'idée de cette librairie modulaire est avant tout de palier l'avancée parfois lente des navigateurs. Le préfixage automatique des propriétés est alors intégralement pris en charge, alors même que certaines étaient peut-être ignorées par d'anciennes versions d'Internet Explorer.
    
    eCSStender
    
    03:59
  - Nous allons ici installer et configurer un environnement Sass qui est un préprocesseur de CSS. Nous accéderons ainsi à une syntaxe très simple et puissante utilisant des variables, des fonctions, des principes d'imbrication ou d'héritage.
    
    Sass
    
    10:34
  - Les possibilités que nous offre Compass sont nombreuses et quasi infinies. Nous nous consacrerons ici plus particulièrement à la puissance et la souplesse des frameworks.
    
    Compass
    
    12:20
  - Less est un autre préprocesseur de CSS. Il fonctionne d'une manière similaire à Sass en termes de syntaxe (utilisation de variables, fonctions, mixins, déclarations imbriquées ou héritées, etc.), avec quelques différences cependant.
    
    Less
    
    05:16
  - Nous allons au cours de cette étape réaliser l'installation de Compass sous Mac OS. Depuis le terminal, les lignes d'instruction et le mode opératoire sont les mêmes que sous Windows.
    
    Installer Compass sous Mac OS
    
    03:16
  - Jetons juste un petit coup d'œil à un troisième préprocesseur, Stylus, qui lui aussi permet de la compilation CSS à partir d'un pseudo langage. Stylus tourne sous node.js.
    
    Stylus
    
    01:46
  - Nous ferons un rapide comparatif des trois solutions, Sass, Less et Stylus, en récapitulant leurs points forts, points faibles, avantages et inconvénients respectifs. Deux sites ont mené à bien cette tâche pour nous et nous livrent leur verdict en le commentant.
    
    Comparatifs
    
    01:35
  - Voici un petit tour d'horizon de quelques autres librairies qui peuvent être utiles et permettre d'améliorer la qualité et la rapidité de production.
    
    D'autres librairies
    
    02:08
  - Produire des CSS peut se révéler contraignant et parfois bien complexe. La maintenance et l'évolution des applications n'est donc pas une mince affaire. Voyons comment le concept du OOCSS aborde l'écriture des CSS avec des approches de programmation orientée objet.
    
    Object Oriented CSS
    
    05:36
  - Bien que cela n'égale pas encore les possibilités proposées par Sass ou Less, le w3C propose le brouillon d'un module de variables directement interprétées par les navigateurs.
    
    Les variables CSS
    
    03:10
Nous verrons dans ce chapitre comment anticiper le comportement de l'affichage lors d'un changement de périphérique, ou du redimensionnement de la fenêtre de présentation. Le web se doit en effet d'être réactif, adaptatif.

Responsive
- Revenons une fois encore sur la définition du Responsive Web Design et faisons la distinction entre grille fixe et grille liquide. Pour ce faire, nous allons parcourir l'ensemble du travail d'Ethan Marcotte qui en est un peu le porte-parole.
  
  Le Responsive Web Design
  
  02:34
- Souvent on résume le Responsive Web Design à la présentation d'un site en fonction de son support cible, à savoir écran large, tablette ou Smartphone. Or, nous allons voir ici que le Responsive Web Design peut également entrer en action au quotidien sur écran large.
  
  Plateforme, redimensionnement ou lisibilité
  
  02:11
- Prenant la relève des media type, les media queries ont repoussé les limites d'adaptation des feuilles de style jusqu'au contexte. Il est dorénavant possible de jongler entre plusieurs propriétés et de faire la distinction entre différents types d'appareils.
  
  Les media queries
  
  05:41
- Sur la base de WYSIWYG, Dreamweaver nous permet de rapidement mettre en place un jeu de feuilles de style et de prendre en compte les media queries. Tous les outils nécessaires sont au rendez-vous.
  
  Les media queries pratique Dreamweaver
  
  06:18
- Les media queries sont issues d'une technologie relativement récente et un grand nombre de navigateurs ne les comprennent pas. Il existe cependant une librairie Respond.js qui permet de contourner ce problème. Voyons ensemble les particularités de son fonctionnement.
  
  Respond.js
  
  02:14
- Faut-il développer une application ou un site web par le biais de périphériques, ou plutôt par le biais de media queries ? Voici quelques points sur lesquels il peut être intéressant de réfléchir avant de se lancer dans le développement.
  
  Questions sur le mobile first
  
  05:05
- Dès l'instant où il est possible de modifier la représentation d'un contenu en fonction d'un périphérique, il faut également se poser la question des modifications que pourra apporter l'utilisateur en termes de taille d'affichage.
  
  La taille de police par défaut
  
  03:08
- Qu'en est-il de l'unité de mesure à adopter pour garantir un redimensionnement du texte et ce quelle que soit la version du navigateur ? Et surtout comment gérer le mode de redimensionnement, le zoom, ou l'affichage texte ?
  
  Les unités de mesure proportionnelles
  
  04:44
- Quand doit-on faire appel à des unités proportionnelles en pourcentage (%), et quand doit-on avoir recours à du cadratin (em) ? Tout n'est que question d'équilibre et d'environnement.
  
  em ou % ?
  
  02:42
- L'unité proportionnelle du cadratin peut présenter de gros avantages, mais attention, en fonction de son utilisation, elle peut parfois aussi devenir la source d'ennuis.
  
  em ou rem ?
  
  02:32
- Il est temps de construire une première interface de site. Commençons par reprendre les éléments de prototypage afin d'en dégager un zonage.
  
  L'interface
  
  06:03
- Lors de l'utilisation de grilles fluides pour nos interfaces de contenu, nous devons utiliser des valeurs précises de proportionnalité et laisser le navigateur définir lui-même les valeurs d'arrondissement.
  
  La proportionnalité
  
  06:21
- Continuons à apporter de la liquidité à notre interface en affectant cette fois-ci les médias de type image. Les mêmes règles sont applicables et les contextualisations sont de plus en plus de rigueur.
  
  Les images responsives
  
  08:32
- Nous allons voir qu'il existe des libraires qui permettent d'adapter les images en fonction de la fenêtre de visualisation et cela même pour des images de grande taille et sans pénaliser pour autant la bande passante de certains réseaux.
  
  Response.js
  
  07:49
- En répétant la même approche que celle mise en place pour la gestion d'images adaptatives, il est possible d'imbriquer des vidéos qui pourront se redimensionner en fonction de l'espace du conteneur parent.
  
  Les vidéos responsives
  
  01:21
Dans ce chapitre, nous verrons que l'époque des limitations à quelques jeux de police est maintenant révolue. Dorénavant toutes les polices s'adaptent aux supports numériques.

La typographie et le web
- Le web impose généralement des jeux de police qui, pour être affichables, doivent être installés au préalable sur le support cible. Il existe cependant plusieurs techniques pour contourner cette limitation.
  
  Historique et font remplacement
  
  03:58
- Voyons les diverses polices utilisables sur le web et à quels navigateurs elles sont destinées. Pour l'instant aucune ne faisant l'unanimité, il va nous falloir avoir recours à des compositions de formats, en attendant un hypothétique format universel.
  
  Les formats de police pour le web
  
  01:33
- Une alternative fait le pont entre les deux mondes : typeface. Elle est exclusivement basée sur JavaScript et permet de générer un aperçu de rendu en redessinant les caractères. Cela apporte une grande souplesse pour les titrages ou autres éléments simples et courts.
  
  Typeface
  
  05:28
- Adobe propose une solution basée sur Typekit. Le principe est simple, un catalogue très fourni est mis à disposition, on crée un kit pour un site, on l'alimente en typos, un script est généré et voilà, les typos sont accessibles pour nos pages.
  
  Typekit
  
  06:12
- Autre solution basée sur des collections destinées à un site précis : Google web fonts. Le principe est intégralement transparent et gratuit. Le catalogue est bien achalandé et le moteur de recherche permet une accessibilité rapide aux typos et en toute simplicité.
  
  Google web fonts
  
  05:56
- Consacrons-nous ici à la règle @font-face, cette utilisation portable, qui, tout navigateur confondu y compris Internet Explorer 6.0, suppose cependant de disposer des droits d'utilisation des typos et de toutes les versions de fontes (eot, ttf, svg et woff).
  
  @font-face
  
  07:20
- Il existe diverses sources pour télécharger les typos ainsi que quelques billets qui proposent des sortes de compilations best of. Le site incontournable en la matière est sans aucun doute font-squirrel.
  
  Les sites et la distribution
  
  04:00
- Si vous possédez déjà une typo que vous utilisez dans le cadre de votre identité visuelle, vous pourrez sur cette base générer l'ensemble des déclinaisons, ainsi que les subsets nécessaires depuis des outils de génération.
  
  Générateur de fontes
  
  03:43
- Particularité intéressante des typos pour le web et autres applications en ligne : il est possible en utilisant la règle @font-face et des pseudos comme :before ou :after de générer des icônes et d'enrichir les sites de puces et autres, et cela de manière très simple et tout aussi souple.
  
  Les icônes fontes
  
  02:17
- Les typos sont toujours bien plus lourdes que le reste des fichiers qui transitent sur le réseau et donc elles nous obligent à penser optimisation plutôt deux fois qu'une. Nous allons aborder ici quelques pistes possibles.
  
  L'optimisation des fontes
  
  10:48
- Il est bien de pouvoir utiliser des typos nouvelles en ligne, encore faut-il être sûr de bien posséder tous les droits d'exploitation requis. Découvrons quels sont les points à prendre en considération avant d'envoyer de la calligraphie dans nos contenus.
  
  Les types de licences
  
  03:59
Nous verrons dans ce chapitre qu'HTML5 ouvre aujourd'hui ses portes non seulement à l'audio et à la vidéo, mais aussi à la balise <embed>, jusqu'ici souvent laissée de côté.

Les médias et multimédias
- Bien souvent l'ajout de petites images sollicite énormément les requêtes client / serveur. Pour éviter cela, il est possible d'encoder ses images en base 64 et d'inclure directement le code ainsi généré dans les pages HTML ou dans les feuilles de style CSS.
  
  Images encodées en base 64
  
  05:17
- Petit retour rapide sur les divers formats d'images d'exportation pour le web à savoir GIF, JPG et PNG, etc. Voyons aussi comment, une fois les images exportées, il est encore possible de les optimiser pour gagner encore quelques kilos octets, sans pour autant nuire à la qualité de rendu.
  
  Optimisation des images
  
  03:43
- La technique des sprites permet d'optimiser la gestion des images au sein d'un contenu web, de limiter le nombre de requêtes client serveur et de gagner en souplesse au moment de la mise à jour ou du changement d'identité visuelle.
  
  Utilisation de sprites
  
  06:09
- Utiliser les sprites dans nos feuilles de style CSS nécessite toujours un peu plus de travail graphique en amont. Un grand nombre d'outils sont néanmoins à disposition en ligne, tel que Fireworks, le génial outil graphique pour le web.
  
  Générateur de sprites
  
  08:01
- Avant d'utiliser de la vidéo dans HTML5, faisons le tour des formats vidéo compatibles avec les différents navigateurs, puis voyons comment utiliser un encodeur pour générer ces divers formats.
  
  Sources et formats vidéo, l'encodage
  
  04:14
- Depuis l'apparition de la balise <video>, l'utilisation de fichiers vidéo au sein de nos pages est grandement simplifiée. Cependant, certains des anciens navigateurs n'interprétant pas cette balise, il faudra utiliser, le cas échéant, un ancien mode d'intégration.
  
  L'élément vidéo et ses attributs
  
  06:03
- Bien que nous ayons déjà mis en place une gestion de vidéos pour l'ensemble des navigateurs contemporains, voyons comment il est encore possible d'optimiser les paramètres et attributs transmis.
  
  Réglages et attributs
  
  05:30
- À l'instar de la vidéo, l'audio doit être décliné sous divers formats pour être exploitable sur l'ensemble des navigateurs. Voyons quels sont les formats nécessaires. Attention, Internet Explorer n'interprète la balise <audio> qu'à partir de sa version 9.
  
  Sources et formats audio
  
  03:54
- La balise <audio> peut être enrichie d'attributs et de balises <source> pour pouvoir cibler l'ensemble des navigateurs. Libre à nous de les organiser comme bon nous semble, dans la mesure où certains navigateurs peuvent interpréter plusieurs formats.
  
  L'élément audio et ses attributs
  
  02:22
- Nous avons souvent besoin d'un convertisseur audio à portée de main pour générer l'ensemble des formats nécessaires à nos flux web. L'installation d'une librairie spécifique à l'encodage de fichiers mp3, la librairie LAME semble alors judicieuse.
  
  Outils pour convertir de l'audio
  
  04:40
- Le DOM est accessible depuis l'interface JavaScript. Nous pouvons donc créer et contrôler des éléments audio et/ou vidéo comme nous le ferions pour tout autre type d'éléments HTML.
  
  Aller plus loin en audio et vidéo HTML5
  
  04:21
- Il existe diverses possibilités d'utilisation du SWF au sein de nos pages, soit en usant d'un plug-in et en ayant recours aux balises <object> et/ou <embed>, soit en convertissant les animations en format HTML5.
  
  Utiliser SWF en HTML5
  
  06:10
- Le PDF est également utilisable dans des pages HTML5, soit au travers des balises <object>, <embed>, soit au travers de la librairie JavaScript. L'intérêt de passer par une librairie réside dans la souplesse et la simplicité en termes de contrôle du document.
  
  Utiliser PDF en HTML5
  
  04:35
- <object> ou <embed>, quelle sera la balise retenue au final par la nomenclature du HTML5 ? Pour l'instant toutes les deux sont recommandées. Voyons les caractéristiques de chacune d'elles.
  
  La balise object
  
  02:00
Un chapitre tout en mouvement. Plus rien n'est statique, qu'il s'agisse de transition entre deux états ou d'objet qui se modifie. Nous verrons qu'HTML5 et les CSS3 apportent un lot de comportements animés en tout genre.

L'animation
- Avant de commencer à décortiquer le principe des animations en CSS, prenons le temps de parcourir un petit catalogue de ce qui se fait de spectaculaire sur le web.
  
  Présentation et exemple
  
  02:53
- Avant de mettre en application les transitions, les animations ou les transformations, il est bon de distinguer le type d'actions et de comprendre l'intérêt de chacune d'elles afin de pouvoir mieux les combiner.
  
  Définitions
  
  02:16
- Utiliser ces règles peut devenir rapidement très verbeux du point de vue des déclarations préfixées. Mais rassurez-vous, outre le grand nombre de lignes de code, leur utilisation reste très simple.
  
  Animations, transformation, transitions
  
  08:40
- Nous nous pencherons sur une propriété qui porte parfois à confusion : la propriété Transform. En effet, on a presque l'impression que l'objet va se transformer sous nos yeux. Or, il se transforme bien, mais nous ne percevons que l'état final de cette transformation.
  
  Transition vs transformation
  
  02:07
- Pour mieux comprendre le principe des accélérations, il est bon de prendre quelques instants et de s'appuyer sur quelques exemples. Pour mieux cerner la gestion de CubicBezier, refaisons un petit tour du côté des tracés vectoriels.
  
  Accélérations
  
  06:29
- Une propriété à laquelle on ne pense pas souvent, mais qui va pourtant s'avérer très utile dans l'utilisation de menus déroulants par exemple, est le Delay.
  
  Jeu sur les délais
  
  02:09
- Essayons de dégager quelques associations entre les formes primitives, les CSS avec les propriétés de transformation et de transition, et enfin couplons le tout avec du simple JavaScript.
  
  Couplage de formes primitives, CSS et JavaScript
  
  05:42
- Une petite pause pour prendre le temps d'aller admirer quelques vitrines et de dénicher quelques frameworks qui permettent de développer plus rapidement des effets et des animations.
  
  Quelques frameworks
  
  01:46
- Bien que cela ne soit pas l'objet de cette formation, nous ne pouvions pas ne pas parler de jQuery. Voyons donc les possibilités d'animations qu'il offre.
  
  Animation avec jQuery
  
  05:04
- Il est possible d'implémenter la gestion des accélérations au sein de jQuery. Le ciblage et l'implémentation de ces accélérations peuvent se faire de manière très fine, ce qui n'est pas fait pour nous déplaire.
  
  jQuery et easing
  
  02:24
- Petit tour d'horizon sur un ensemble de plug-ins développé pour mettre en place rapidement des menus, des slide show, des carrousels et autres effets de transition.
  
  Quelques éléments déjà prêts à l'emploi
  
  02:21
- Encore un petit écart quant à la ligne de ce tutoriel concernant un outil encore en bêta chez Adobe, Edge, qui permet de réaliser de manière intuitive des animations et autres interactions à destination de HTML, CSS3 et JavaScript.
  
  L'outil couteau suisse Edge
  
  06:00
Explorons plus en détails dans ce chapitre les éléments graphiques multimédias et interactifs. Les deux balises <Canvas> et <svg> vont permettre bien des choses, et cela sans avoir à passer par des technologies tierces et propriétaires.

Dessiner avec son navigateur
- Canvas est une API de dessin apparue avec HTML5 autour de la balise <canvas>. Une fois maîtrisée, cette API permet de réaliser des écrans vraiment spectaculaires.
  
  Présentation et introduction à <canvas>
  
  05:47
- Bien apprendre à structurer son code et son approche, séparer chaque étape afin de ne pas mélanger les instructions et essayer de mutualiser les fonctions récurrentes : voilà ce que nous verrons ici.
  
  Tracé de points et lignes
  
  04:49
- Après les lignes brisées, consacrons-nous aux lignes courbes et aux arcs de cercle. Bien souvent un petit schéma est plus explicite que l'aspect très code que peuvent avoir certaines instructions.
  
  Tracé de courbes et de cercles
  
  05:08
- Intégrer des images dans un élément <canvas> ouvre encore une fois une multitude de portes et de concepts. N'oublions pas que nous sommes en asynchrone et que donc cette image devra être récupérée sur un serveur.
  
  Intégration d'images
  
  07:50
- Le texte apporte son lot de possibilités dans le cadre de la gestion de <canvas>. Nous allons voir qu'il est possible non seulement de pouvoir le manipuler à la mode des feuilles de style CSS, mais aussi de le fusionner avec des images en sur ou sous impression.
  
  Gestion du texte
  
  05:45
- Nous allons mettre en place ici un tableau de données entièrement conçu avec l'API Canvas de HTML5. Nous allons commencer par mettre en place les bases du fichier de données, puis nous placerons les textes, et les images sur le graphique.
  
  Mise en place d'un graphique de données
  
  10:42
- Cette étape clôture la mise en place du graphique en ajoutant les barres d'histogramme composées de primitives. La complexité ne vient pas du code, mais du fait qu'en informatique l'axe y est inversé par rapport à nos repères géométriques.
  
  Création des barres de données
  
  05:54
- Créer de l'animation avec l'API Canvas peut paraître déroutant au départ. Voyons ce qu'il en est.
  
  Bases de l'animation avec l'API Canvas
  
  08:21
- Tout ce que nous venons de réaliser avec l'API Canvas est devenu possible avec l'apparition de HTML5, de l'élément <canvas> et de l'API qui lui est associée. La version d'Internet Explorer 9 intègre ces nouveautés.
  
  Le cas de IE < 9.0
  
  02:22
- Pour aller plus loin dans l'utilisation de l'API, voici quelques liens qui peuvent être utiles. Une extension pour Illustrator va notamment permettre de rapidement exporter les illustrations vers du JavaScript utilisable avec l'API Canvas.
  
  Aller plus loin avec Canvas
  
  02:09
- Avec HTML5 est également apparue la balise <svg>. Cette balise permet également de disposer de capacités de traçage sur les pages HTML.
  
  Présentation de SVG
  
  03:56
- Il est souvent préférable d'avoir recours à des outils permettant de générer directement du SVG pour pouvoir l'utiliser directement au sein de nos pages. Voyons ensemble ce qu'il en est.
  
  Générateurs et outils SVG
  
  02:59
- Ajouter de l'interactivité dans un fichier SVG peut se faire de multiples manières. Il est possible d'utiliser les balises et attributs propres au langage SVG, ou bien d'utiliser du JavaScript et d'accéder au DOM comme pour du HTML.
  
  SVG et interactivité
  
  09:07
- Illustrator nous permet d'ajouter de l'interactivité à des fichiers vectoriels avant de les exporter en SVG. La palette Interactivité SVG permet de lier des fichiers JavaScript externes, mais aussi d'appliquer une action à n'importe quel élément du document.
  
  Souplesse avec Illustrator
  
  05:08
- L'animation dans SVG joue sur deux tableaux, d'une part en héritant des possibilités offertes par les CSS3 incrémentées des propriétés propres à SVG comme par exemple fill et stroke, d'autre part en utilisant des balises d'animation propres à SVG comme <animate>.
  
  Introduction à l'animation avec SVG
  
  05:07
- Il est vrai que cette introduction sur SVG est un peu courte, mais aller plus loin dépasserait le cadre de cette formation. Il est possible de continuer la découverte de ce format sur divers sites, voyons lesquels.
  
  Aller plus loin avec SVG
  
  01:36
Avant de conclure, nous verrons dans ce chapitre qu'il est toujours bon de se remémorer les bonnes habitudes de tests et de validation.

À ne pas oublier !
- Avant de publier son travail en ligne, il est toujours enrichissant de le valider, même durant la phase de développement. Nous allons voir ici que même si les recommandations de HTML5 ne sont pas encore arrêtées, il est toujours possible d'avoir un avant-goût de ce que nous aurions dû faire ou ne pas faire.
  
  Valider son travail
  
  04:52
- Valider est une chose, tester et optimiser en est une autre. Nous allons voir qu'il existe divers types d'outils qui vont nous aider à optimiser notre travail en toute simplicité.
  
  Tester son travail
  
  03:24
- Dernière étape de cette formation dans laquelle nous verrons quelques liens permettant de rester informé des derniers progrès du HTML5, des CSS3, du Responsive Web Design et de tout ce qui gravite autour.
  
  Conclusion
  
  02:54

Diaporama

Le but de la formation consacrée à Adobe Dreamweaver CS6 est de vous permettre de prendre en main de manière constructive le logiciel et vous donner les clés nécessaires pour appliquer les méthodes enseignées dans vos futurs travaux personnels !

Dreamweaver est un outil de développement de sites web qui s’appuie en grande partie sur des assistants visuels. Mais en réalité Dreamweaver est bien plus que cela, il s’agit d’un véritable environnement de développement intégré (IDE).

Découvrir les fondamentaux d’un tel outil nécessite de prendre du recul et de tenir compte non seulement de l’outil, mais aussi du contexte au sein duquel il évolue. En ce sens, nous aborderons l’outil en lui-même mais également les langages, les technologies, les concepts et les objectifs qui sont impliqués dans chacune des tâches réalisées.

Avec la formation « Responsive Web Design avec HTML5 et CSS3 » vous appréhendez les tenants et aboutissants du HTML5, des CSS3 et du Responsive Web Design. Le développement web devenant de plus en plus orienté multiplateforme, il est impératif que les contenus s’adaptent à tous les types de périphériques. Cette formation aborde les notions de structure, de sémantique, d’accessibilité et d’optimisation, notions favorisant aussi bien la pérennité et la portabilité des documents qu’un bon référencement.

Vue d'ensemble de la formation :

Dreamweaver CS6 : Les fondamentaux

Introduction
Dreamweaver et le web
L'interface utilisateur
Créer une page
Approche des CSS
Construire des pages
Gestion des images
Enrichissement du site et gestion des médias
La librairie SPRY
Les formulaires
Produire pour divers supports
Optimisation et publication d'un site
Pour approfondir

Responsive Web Design avec HTML5 et CSS3

Introduction
Avant de commencer, prototypons
HTML5
CSS3
Responsive
La typographie et le web
Les médias et multimédias
L'animation
Dessiner avec son navigateur
À ne pas oublier !

Conditions requises

Connexion Internet DSL
Navigateur actuel avec le plug-in Flash
Résolution d’écran minimum : 1024x768
Carte son, haut-parleurs ou casque d’écoute
Pentium4 à partir de 2,6 GHz ou bien G4 à partir de 1 GHz

Compatible avec l’iPad, Android et HTML5

Consultez cette formation vidéo via nos applications mobiles pour iPad et Android !

Les vidéos de cette formation peuvent être lancées en ligne avec HTML5 au lieu de Flash avec les navigateurs compatibles (exemple : sur l’iPad et l’iPhone 4).

Vous pouvez également télécharger les vidéos de cette formation pour une consultation sur votre Smartphone ou votre tablette, si vous ne souhaitez pas utiliser nos applications mobiles.

Formation téléchargeable

La formation téléchargeable vous permet de visualiser votre formation sur Mac ou PC sans connection à Internet pour un confort d'utilisation optimal. Une fois téléchargée et décompressée, vous avez la possibilité de la graver si vous le souhaitez. La formation téléchargeable est disponible pour les abonnés au "Tutorium de luxe" ainsi que les utilisateurs ayant acheté la formation.

Fichiers source

Les fichiers source pour reproduire les exemples de cette formation sont disponibles en téléchargement individuel ou à l'intérieur de la formation téléchargeable. Vous pouvez ainsi refaire tous les exercices étape par étape et optimiser votre apprentissage ! Les fichiers source sont disponibles pour les abonnés au "Tutorium de luxe" ainsi que les utilisateurs ayant acheté la formation.

Mode : Apprendre et faire !

Vous avez le choix ! Soit vous apprenez en regardant la formation en mode plein écran, soit vous passez en mode Apprendre et faire ! par un simple clic. Ainsi, vous pouvez vous exercer sur votre ordinateur et regarder la formation en même temps.

Les signets

Pendant que vous regardez une formation vidéo, vous pouvez placer à tout moment vos propres signets, qui seront ensuite matérialisés par une barre orange sur la barre temps de votre formation. Le signet peut être un simple mot mais également une courte note. Une liste récapitulative vous permet de retrouver facilement vos signets lors des visionnages suivants.

Shadow

Denis P.

Ok, mais Adobe Shadow cité dans cette formation est remplacé par Edge Inspect.