Formation HTML 5, CSS 3, JavaScript à Ampoigné (53200)

Objectifs

HTML 5, CSS 3, JavaScript sont des technologies web qui permettent de développer les applications web tout en prenant en compte l’évolution des standards. Ces compétences ouvrent la voie au développement web pour mobile. A la fin de la formation HTML 5, CSS 3, JavaScript, les stagiaires vont acquérir les compétences suivantes :

• Coder des sites Web à l'aide de nouvelles balises et fonctionnalités HTML5
• Créer des formularies web HTML5
• Ajouter du contenu multimédia convivial et sans utiliser des plugins
• Utilisez l'élément Canvas pour générer dynamiquement des formes complètes avec remplissages, couleurs, traits, dégradés, et plus
• Combiner les puissantes fonctionnalités de style et d'animation de CSS3 pour améliorer la présentation de vos pages web
• Utiliser JavaScript pour ajouter de l'interactivité à vos pages web
• Ajouter HTML5 Géolocalisation pour intégrer des fonctionnalités de cartographie géolocalisées sur votre site
• Améliorer l'interactivité de votre site avec les fonctions glisser /déposer de HTML5

Public

Les salariés, les demandeurs d’emploi, ou les personnes souhaitant changer de métier et acquérir des compétences en développement web.

Durée

21 heures en présentiel sur 2 jours

Pré-requis

La maitrise de l’informatique et internet au niveau utilisateur.

Formateur

Formateur expérimenté, développeur de site Web, et spécialiste du Web.

Méthode pédagogique

8 participants maximum, un poste par stagiaire et un support de cours est remis en fin de stage. La formation est constituée d'apports théoriques, de démonstrations et de mises en pratique basées sur des exercices.

Modalité de validation des acquis

Évaluation en ligne des acquis via un questionnaire. Attestation de fin de stage.

Programme de la formation

Introduction

• Balisage HTML5
• Une visite des principaux éléments HTML5
• Les éléments Video, audio et Canvas
• Les formulaires web
• Une vue d'ensemble des API HTML5 et les technologies de soutien
• Géolocalisation en action
• Le Web Storage
• Les animations CSS
• Les transitions CSS
• Les transformations CSS 2D et 3D
• CSS3, les arrières plans, les frontières, les couleurs RGBA, les dégradés, les ombres portées, et des coins arrondis
• @ polices Web font-face
• Identifier les sites HTML5

Principes de base de HTML, XHTML et CSS

• Langages du Web
• Page structure basée sur HTML
• Doctype permet au navigateur web savoir à quoi vous attendre
• Le W3C et la page de validation
• La structure HTML
• Mise en place des images en HTML
• Le rôle du CSS
• Comprendre les styles de classe et l'élément "span"
• Trois façons d'utiliser le style
• Feuilles interne vs. Feuilles externe
• Création d'une feuille de style externe
• Ce qui rend les styles en cascade

Mise en forme de textes avec CSS

• L'importance de la typographie sur le Web
• Définition d'une famille de polices
• Dimensionner le texte avec CSS
• Les pixels et les points ne sont pas les meilleurs choix
• Utiliser une combinaison de pour cent et la mesure em
• L'utilisation des marges pour modifier l'espace entre votre texte
• Paragraphe pour réglage de la hauteur de ligne
• Transformation de texte avec CSS
• Utilisation des listes HTML
• Listes HTML avec Styles
• Travailler avec un fichier de réinitialisation CSS
• La compréhension de l'élément "div": la création d'une disposition de deux colonnes à largeur fixe
• Comprendre la propriété CSS float
• Création de colonnes avec la propriété float
• Travailler avec la propriété claire
• Création d'une navigation basée sur une liste en utilisant des flotteurs
• Ajout de styles de texte
• L'effet des marges et le remplissage de votre mise en page à largeur fixe
• Un examen de l'utilisation de marges et le remplissage des mises en page
• Styling de votre pied de page avec une image d'arrière-plan

Introduction à JavaScript et jQuery

• Interactivité sur le web
• Adobe Flash
• JavaScript
• Bases JavaScript
• Placer votre JavaScript dans un document externe
• Framework JavaScript
• Cacher un élément avec JQuery
• Ajout d'un événement pour déclencher l'événement show

Utilisation des éléments audio et vidéo

• Ajout d'une vidéo
• Ajout du support pour d'autres navigateurs
• Contrôle d'une vidéo avec JavaScript
• Ajout d'audio

Graphisme

• Polices et textes
• Unités de mesure
• Couleurs
• Fonds
• Styles des listes
• Atelier, cas pratique

Travailler avec les dessins

• Comprendre l'élément canvas
• Les avantages de l'élément canvas
• Dessin de rectangles
• Tracer des lignes et des cercles
• Dessin avec des courbes
• Ajout d'un texte
• L'utilisation de couleurs, des styles et des dégradés
• Ajout d'images

CSS 3

• Comprendre le rôle de CSS3
• Ajout de plusieurs images d'arrière-plan
• Travailler avec la transparence et l'opacité CSS3
• En utilisant des gradients CSS3
• CSS3 gradients de potentiel pour l'avenir
• transformation CSS3, des transitions et des animations
• Utilisation des polices web En utilisant @ font-face pour spécifier une police web
• L'utilisation d'un service Web pour générer plusieurs polices

CSS 3 médias Queries et avenir de CSS 3

• Le rôle des médias queries CSS3
• Utilisation de médias queries CSS3 pour fournir une mise en page mobile optimisé
• Développements à venir dans CSS3
• La mise en page multi-colonnes CSS3
• Le module de mise en boîte souple CSS3
• Le module de mise en page du modèle CSS3
• Ajout position sur la base du modèle CSS

Stockage hors connexion dans HTML 5

• Types de stockage HTML5
• Méthodes localStorage
• Exemple localStorage
• Mettre tout ensemble
• Stockage de données avancées
• La mise en cache des applications
• Le cache, le fichier manifeste
• Mise à jour du cache
• L'objet application Cache
• Amener tout ensemble

HTML 5 Géolocalisation

• Comprendre Géolocalisation
• Obtenir l'emplacement de l'utilisateur
• Affichage de l'emplacement de l'utilisateur avec Google Maps
• Navigateurs manquant HTML5 Géolocalisation
• Création d'un HTML5 Géolocalisation et mashup Google Maps
• Ajout de marqueurs de carte Google à votre page Géolocalisation

HTML 5 Drag & Drop

• Glissez et déposez sur le Web
• Glisser-déposer Cross-navigateur
• Transfert de données avec une opération de glisser-déposer
• Atelier, cas pratique