Qualité web : les bonnes pratiques front-end

Transcription

1 L institut de formation continue des professionnels du Web Qualité web : les bonnes pratiques front-end Référence formation : Durée : Prix conseillé : PE081 3 jours (21 heures) HT (hors promotion ou remise particulière) Description La première préoccupation des intégrateurs Web est, à juste titre, le respect de la création graphique, qu'il convient de retranscrire en code HTML, CSS, et éventuellement JavaScript. Ce stage pratique sera l'occasion de découvrir et mettre en oeuvre les bonnes pratiques de développement front permettant d'assurer un bon référencement naturel, un site pleinement accessible à tous les utilisateurs, et de surcroît performant afin de garantir une navigation fluide. Les bonnes pratiques Opquast associées seront largement abordées tout au long de la formation. Objectif pédagogique A l'issue de cette formation, les participants seront en mesure de Comprendre les enjeux de la performance et de la qualité front, Optimiser les techniques de référencement naturel, Appréhender les enjeux de l accessibilité et les bonnes pratiques associées, Maîtriser les enjeux de la compatibilité multi-navigateurs. Pré-requis Connaissance des standards du Web (HTML, CSS, JavaScript). Public Chef de projet, webmestre, intégrateur, développeur, et toute personne liée au développement et à la promotion d'un site Web. Dates des prochaines sessions Du mercredi 16/12 au vendredi 18/ Paris Plan de cours PROGRAMME DE LA 1ERE JOURNEE DE FORMATION : Qualité web et référencement naturel Bonnes pratiques et qualité web Définition d'une bonne pratique Les référentiels Opquast : des référentiels publics, des critères rigoureux Démarche de qualité Web Méthodologie : le model VPTCS

2 Introduction au référencement naturel A quoi sert le référencement? Historique du référencement et de la recherche sur le Web Préparation de base pour le référencement naturel L'importance du contenu Bonnes pratiques Opquast associées La sémantique HTML Les balises "meta" Focus sur l'évolution sémantique de HTML4 à HTML5 Les nouvelles balises Accélérer le référencement Sitemap et Robot Description et structure Les bonnes pratiques Opquast associées Les annuaires AdWords Principes, Affichage, Interface Les réseaux sociaux Usages et objectifs Améliorer le positionnement L'importance des liens entrants La pyramide du SEO Cibler le référencement Donner du sens au contenu Les Microformats, RDFa et Microdata Les snippets Comment surveiller son référencement? Google Analytics Google Webmastertools Travaux pratiques Un audit SEO PROGRAMME DE LA 2NDE JOURNEE DE FORMATION : Introduction Qu'est-ce que l'accessibilité? Qui est concerné? L'accessibilité Les principaux référentiels d'accessibilité en France et à l'international Les outils de navigation et assistances techniques Les navigateurs Les aides techniques Lecteurs d'écran, plages braille, loupes d'écran, Etc. Les règles de base de l'accessibilité Web Les erreurs usuelles de desig Les erreurs usuelles d intégration Le Référentiel Général d'accessibilité pour les Administrations (RGAA) L'importance de la structure sémantique Le DOM, titres, liens, images et contenus multimédia, tableaux, formulaires, etc.

3 L'utilisation du Accessible Rich Internet Applications (ARIA) Les impacts de JavaScript La recommandation ARIA Mise en pratique Rendre une page accessible

4 PROGRAMME DE LA 3EME JOURNEE DE FORMATION : Introduction L'évolution des infrastructures L'évolution des sites Web La performance côté client L'utilisateur n'aime pas attendre Impact de la performance sur la satisfaction utilisateur Le paradoxe du mobile Distinguer performance brute et performance perçue Analyser la performance d'un site Illustration au travers d'un cas concret La cascade des chargements Illustrations Décomposition d'une requête Que mesurer? Les outils d'analyse Les différents types d'outils WebPageTest Les navigateurs (IE9 developer tool, Webkit, Speed tracer, etc.) Les outils de recommandation : Yahoo! Y!Slow, Google Page Speed Opquast Webperf Optimiser la performance Réduire la latence réseau Supprimer les bloquages Réduire le poids des ressources : minification Réduire le nombre de requêtes : concaténation, sprites, code "inline" Augmenter le nombre de requêtes simultanées Les outils La compatibilité multi-navigateur Evolution du marché des navigateurs Les principaux pièges à éviter les préfixes CSS Les principes de codage JavaScript Utilisation des standards HTML5, CSS3, JavaScript L'outillage indispensable Modernizr jquery Pré-processeur CSS Mise en pratique Créer un document de base

5 Avant et après la formation Parce ce que la formation est un moment privilégié de sa carrière professionnelle, la pédagogie ne s arrête pas à un stage de quelques jours. Ainsi en vous inscrivant à une formation Clever-Institut, vous bénéficiez de l ouverture d un compte sur notre site internet vous permettant de : exprimer, en amont du stage, vos attentes quant à cette formation, afin de nous permettre de personnaliser chacune de nos sessions déjeuner avec le formateur et les autres stagiaires, afin de transformer ce moment en partage et retours d expérience évaluer la formation sur son contenu et sa pédagogie, et en partager le contenu avec les futurs stagiaires échanger avec votre formateur pendant les 15 jours qui suivent votre stage, pour toute question ou interrogation en rapport avec formation Comment s inscrire? La demande d'inscription à une session de formation se fait en ligne. Une fois votre inscription enregistrée, vous recevez dans les 48heures la Convention de Formation Professionnelle Continue simplifiée. Dès réception par nos services, de la convention signée, la convocation de stage est envoyée par mail aux stagiaires qui se voient ouvrir un compte sur notre site internet, leur permettant de préparer leur formation (accès, communication de leurs attentes, etc.). A noter, que l'inscription est considérée comme définitve, à la signature de la convention de stage. Clever Institut L institut de formation continue des professionnels du web Numéro agrément formation : , boulevard des Capucines PARIS [email protected]