Menu Recherche Panier
(...)
Vous êtes ici : Accueil > Catalogue des formations > Formation Les fondamentaux du développement d'interfaces graphiques avec HTML5, CSS3 et JavaScript
Technique

Formation Les fondamentaux du développement d'interfaces graphiques avec HTML5, CSS3 et JavaScript

Tirer parti de la dernière version de la norme HTML

Le HTML5 et le CSS3 sont les dernières versions des principaux langages Web validés par le World Wide Web Consortium (W3C), l'organisme qui a pour mission de développer des protocoles et des standards sur les langages Web et leurs évolutions. Extrêmement complémentaires, le premier permettant d'afficher le contenu des pages web et le second visant à décrire la présentation de ces contenus, ils sont souvent associés dans le cadre des développements pour le web. Cette formation vous permettra d'utiliser les nouvelles possibilités offertes par le HTML5, telles que l'intégration vidéo et audio, grâce aux nouvelles balises et APIs puis de mettre vos pages en forme en tirant parti de la puissance de CSS3.
Objectifs de cette formation Les fondamentaux du développement d'interfaces graphiques avec HTML5, CSS3 et JavaScript
  • Disposer des compétences nécessaires au développement d’un site internet full HTML5 / CSS3
  • Savoir produire des pages compatibles avec les différents navigateurs internet
  • Être capable de créer des interactions dynamiques avec l’utilisateur sans développement serveur
  • Comprendre comment tirer parti des dernières nouveautés HTLM5 comme le lecteur vidéos compatible mobiles
Public
  • Développeurs .Net ou Java souhaitant savoir exploiter les possibilités offertes par HTML5 et CSS3
  • Chargés de développement d'applications informatiques
Pré-requis
Programme détaillé
En présentielEn Présentiel

Présentation

  • HTML : le langage du Web
  • Contexte historique
En présentielEn Présentiel

Environnement et structure

  • Le concept des balises
  • Le bon usage des balises
  • Particularités et pièges du HTML
  • Le document HTML minimum
En présentielEn Présentiel

Mise en forme du document

  • Le texte simple
  • Les objets d'un document
  • L'en-tête d'un document HTML
En présentielEn Présentiel

Mise en forme du texte

  • Les titres
  • Les paragraphes de texte
  • Le contrôle de passage à la ligne
  • Le formatage du texte
  • L'alignement
  • La taille, la couleur et la police
  • Les caractères spéciaux
  • Les commentaires
  • Les autres balises de texte
En présentielEn Présentiel

Les listes

  • Numérotées
  • A puces
  • Imbriquées
  • Les listes de définition
En présentielEn Présentiel

Les tableaux

  • Les cellules de tableau
  • La fusion des cellules
  • Gestion de la taille du tableau
  • En-tête et légende
  • Les bordures
  • Les groupes de colonnes
  • Les groupes de lignes
En présentielEn Présentiel

Les hypertextes

  • La balise de liens
  • Liens vers une autre page
  • Liens à l'intérieur d'une page
  • Liens vers un autre site Web
  • Liens vers une adresse électronique
  • Liens pour télécharger un fichier
  • Les Target
  • L'attribut titre
  • La couleur des liens
  • Liens et feuilles de style
En présentielEn Présentiel

Insertions d'images

  • Les images du Web
  • L'insertion d'une image
  • L'espace autour d'une image
  • L'alignement d'une image
  • L'insertion d'une couleur d'arrière-plan
  • L'insertion d'image d'arrière-plan
  • L'insertion d'un lien sur une image
  • Les images réactives
En présentielEn Présentiel

Les formulaires

  • La déclaration de formulaire
  • Zone de texte à une ligne, à plusieurs lignes
  • Menu déroulant
  • Bouton radio
  • Bouton checkbox
  • Bouton d'envoi
  • Bouton d'annulation
  • Bouton de commande
  • Les formulaires cachés
  • Les formulaires de transfert de fichier
  • Les formulaires de mot de passe
  • L'organisation des éléments d'un formulaire
En présentielEn Présentiel

Les méta-informations

  • Doctype ou DTD
En présentielEn Présentiel

Les feuilles de style

  • Les propriétés : couleur, police, marge,...
  • Les classes
  • Dynamiser un site avec CSS
  • Gérer les positionnements
En présentielEn Présentiel

Introduction à JavaScript

  • JavaScript pour quoi faire ?
  • L'environnement du client Web
  • Le navigateur
  • Les outils
En présentielEn Présentiel

JavaScript : le coeur du langage

  • La syntaxe
  • Les variables
  • Les fonctions globales
  • Les opérateurs
  • Les structures de contrôle
  • Les fonctions : définition, arguments, fonctions littérales, fonctions sous forme de données
  • Les objets personnalisés : constructeur, méthodes et propriétés, prototype, objets littéraux, objets sous forme de tableaux associatifs
  • Les objets globaux : Array, Date, Math, RegExp, String...
  • Manipuler les tableaux, les dates, les chaînes de caractères
En présentielEn Présentiel

Les objets du navigateur

  • La hiérarchie des objets
  • Les principaux objets : window, document, location, screen, navigatior, form... Leurs propriétés et méthodes
  • Manipuler des fenêtres
  • Gérer des timers
En présentielEn Présentiel

Introduction à HTML5

  • Contexte : fonctionnement d’un site internet
  • Histoire du HTML
  • Les organismes de normalisation : WHATWG et W3C
  • La nouvelle vision HTML5
  • Roadmap HTML5
En présentielEn Présentiel

Comment utiliser le HTML5 aujourd'hui

  • Savoir quand choisir le HTML5
  • Utiliser le HTML5 avec des navigateurs qui ne le supportent pas
En présentielEn Présentiel

Le balisage HTML5

  • Structure d'une page
  • Doctype
  • Les nouveaux éléments et les éléments obsolètes
  • HTML5 et CSS3
En présentielEn Présentiel

Les formulaires

  • La balise form
  • Créer et utiliser des formulaires HTML5
En présentielEn Présentiel

Audio et vidéo

  • Les éléments audio et vidéo
  • Les conteneurs, les codecs
  • Compromis pour un site à forte audience
En présentielEn Présentiel

Vue d'ensemble des APIs

  • Les APIs HTML5
  • Audio et vidéo
  • Site web hors ligne
  • Drag et Drop
En présentielEn Présentiel

Dessiner en HTML

  • Canvas vs SVG
  • Contexte et accessibilité
En présentielEn Présentiel

La communication en HTML5

  • Les évènements
  • Envoi de messages entre documents
  • Envoi de messages par canaux
  • Le push et les WebSockets pour plus de performances
En présentielEn Présentiel

La géolocalisation

  • Vue d'ensemble
  • La vie privée de l'utilisateur
En présentielEn Présentiel

Stockage

  • Stockage local
  • Stockage en session
  • Bases de données SQL Web
En présentielEn Présentiel

CSS3 : standardiser des propriétés

  • Vue d'ensemble : se passer d'images, éviter les astuces
  • Coins arrondis, ombres portées, transparence, animations
  • Mise en page et positionnement
  • Autres nouveautés
En présentielEn Présentiel

CSS3 : mise en page et positionnement

  • Vue d'ensemble : clarifier le code, éviter la multiplication de div imbriquées
  • Niveau de présentation
  • Mise en page par patron
  • Mise en page multi-colonnes
  • Mise en page par boîtes horizontales ou verticales
  • Positionnement par grille
  • Autres nouveautés
  • CSS3 pour mobiles et tablettes : bonnes pratiques
Après le présentielAprès le Présentiel
Retrouvez sur le Learning Hub ib :
  • Des vidéocasts pour revenir sur les points clés de la formation
  • Des vidéos-tutos pour vous accompagner dans vos premiers développements avec HTML5 et CSS3
Les plus de cette formation Les fondamentaux du développement d'interfaces graphiques avec HTML5, CSS3 et JavaScript
  • Une progression pédagogique qui permet de comprendre les traitements qui peuvent être délocalisés du serveur vers le poste client.
  • Création d’une application "fil rouge" : création du contenu, de la mise en forme, tests multi-navigateurs, ajout de fonctionnalités dynamiques et HTLM5, mise en production.
  • Le travail effectué pendant la durée de la session est conservé en fin de formation.
  • La pédagogie favorise les échanges entre participants ; l'animateur apporte des réponses personnalisées à chacun.
  • Les contenus digitaux mis à disposition des participants après la formation renforcent l'efficacité pédagogique du programme et garantissent un bénéfice durable de l'action de formation.
  • Si cette formation n'est pas officielle, elle constitue néanmoins une bonne préparation pour le passage de l'examen 70-480 qui mène à la certification MCSA Web Applications.
  • Cette formation est éligible à l'action collective Fafiec "Développer avec les langages .Net, Java et C++" (Réf : 28114).
  • Cette formation est éligible à l'action collective Opcalia Télécoms.
Moyens pédagogiques
  • Répartition théorie/pratique : 50%/50%.
  • Cette formation se compose d’une alternance d’apports théoriques, de travaux pratiques s’articulant autour d’une application fil rouge, de démonstrations, de phases d’échanges entre participants et de synthèses de la part du formateur.
  • Ressources pédagogiques : un guide d’animation, un ordinateur connecté à Internet par participant, un support de cours en français et un cahier d’ateliers.
  • Une attestation de fin de formation sera remise au stagiaire à l'issue de la formation.
Modalités
Cette formation proposée en interentreprises est également accessible à distance.
Si aucune date à distance n'est signalée par le pictogramme formation accessible à distance, contactez notre Service Conseil Clients au 0 825 07 6000.
Certification

Cette formation prépare au test suivant :

  • 70-480
et entre en jeu dans le cursus de certification :
  • Pour optimiser vos chances de réussite à ce test, optez pour le Pack Certification (en option au prix unitaire de 290 euros HT) qui inclut l'accès à un outil de révision en ligne et le passage de l'examen en centre Pearson Vue

Informations

Dimension Digitale

  • Durée : 5 Jours (35h)
  • Tarif : 2 620 € HT
  • Réf. : CE999
  • Option(s)
    • Repas Paris : 115 € HT
    • Repas province : 110 € HT


Dates des sessions
Session garantie Formation à distance Session accessible à distance Visio
Bon à savoir...










= une réponse possible
= plusieurs réponses possibles

1. Quel nom donne-t-on à l’outil permettant d’afficher des pages Web ?
2. Parmi les propositions suivantes, quels sont les formats d’adresses URL qui ne sont pas valides ?
3. Que signifie WWW ?
4. Quel élément ne définit pas une variable ?
5. A quoi sert une structure itérative dans un programme ?
6. A quelle catégorie de site appartiennent Bing et Google ?
7. Quels éléments sont utilisés dans la technologie AJAX ?
8. Comment s’appelait le projet américain précurseur d’Internet ?
9. Quel langage est à la base des pages Web ?
10. Que signifie http ?
Vous n'avez pas répondu à toutes les questions !
Vous avez % de bonnes réponses, vous pouvez donc suivre cette formation.
Vous avez % de bonnes réponses.
Nous vous invitons à contacter nos Conseillers Formation au 0825 07 6000 afin qu'ils vous orientent vers une formation plus adaptée à vos connaissances.