DEVELOPPEMENT LOGICIEL QUALITE WEB LES BONNES PRATIQUES FRONT-END REF : WEER001 DUREE : 3 JOURS TARIF : 1 625 HT Public Chef de projet, webmestre, intégrateur, développeur, et toute personne liée au développement et à la promotion d'un site Web. Pré-requis Connaissance des standards du Web (HTML, CSS, JavaScript). 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. Objectifs pédagogiques Cette formation sur la conception du design et de l'ergonomie d'un site web vous permet : 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.
Programme PROGRAMME DE LA 1ERE JOURNEE DE FORMATION : QUALITE WEB ET REFERENCEMENT NATUREL BONNES PRATIQUES ET QUALITE 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 INTRODUCTION AU REFERENCEMENT NATUREL A quoi sert le référencement? Historique du référencement et de la recherche sur le Web PREPARATION DE BASE POUR LE REFERENCEMENT 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 ACCELERER LE REFERENCEMENT 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 AMELIORER LE POSITIONNEMENT L'importance des liens entrants
La pyramide du SEO CIBLER LE REFERENCEMENT Donner du sens au contenu Les Microformats, RDFa et Microdata Les snippets COMMENT SURVEILLER SON REFERENCEMENT? Google Analytics Google Webmastertools TRAVAUX PRATIQUES Un audit SEO PROGRAMME DE LA 2NDE JOURNEE DE FORMATION : L'ACCESSIBILITE INTRODUCTION Qu'est-ce que l'accessibilité? Qui est concerné? 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 REGLES DE BASE DE L'ACCESSIBILITE 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. L'UTILISATION DU ACCESSIBLE RICH INTERNET APPLICATIONS (ARIA) Les impacts de JavaScript La recommandation ARIA Mise en pratique
Rendre une page accessible PROGRAMME DE LA 3EME JOURNEE DE FORMATION : LA PERFORMANCE COTE CLIENT INTRODUCTION L'évolution des infrastructures L'évolution des sites Web 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 COMPATIBILITE 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