• Support de cours 2015-2016

TP n°2

1. Qualité des sites web 

1.1. SCHÉMA DES PARAMÈTRES QUALITÉ D'UN SITE INTERNET

Créer un site Internet de qualité nécessite de réunir les différentes conditions suivantes visant finalement à satisfaire les cibles pour lesquelles le site Internet est conçu.


1.1.1. Utilité

C'est le seul critère qui dépend purement du maitre d'ouvrage. 

Pour être efficace un site Internet doit être utile ! Il ne suffit pas de disposer d'un très bon outil pour générer un chiffre d'affaires !


1.1.2. Utilisabilité

C'est simplement la capacité qu'aura le site à être pratique, fonctionnel quelques soient les capacités de l'internaute, son équipement informatique, son mode de consultation.
Proposer un site utilisable nécessite de :
  • Recourir à une conception assistée sur un prototype fonctionnel dès le processus d’avant vente de manière à construire la meilleure ergonomie
  • Respecter les standards d’intégration (XHTML, HTML5)  garantissant l’interopérabilité même sur mobile et smart phone


1.1.3. Visibilité

Pour être efficace un site Internet doit être visible c'est à dire accessible au maximum d'internautes ne le connaissant pas à priori. Il est donc nécessaire d'acquérir de la visibilité sur les moteurs de recherche et les outils sociaux. 
Référencement naturel
Les sites Internet doivent être conçus de manière à être le plus aisément indexé par les moteurs de recherche. Le code HTML généré est alors primordial, il est donc nécessaire de :
  • Respecter les préconisations des moteurs de recherche et expert SEO pour la création de la structure sémantique du code HTML (plan de balisage des pages,...).
  • Respecter les standards d’intégration (XHTML, HTML5).
  • Mettre en place les nouveaux formats de balisage sémantique (micro formats : hproduct, vcalendar, vcard).
En dehors des qualités intrinsèques du site, la popularité du site (nombre de liens externes renvoyant vers le site) a une grande importance quant au positionnement dans les résultats de recherche. Plus un site est populaire (possède un pagerank important), mieux il sera classé. 
Rayonnement sur les réseaux sociaux
Les réseaux sociaux sont devenus des générateurs d'audiences et de chiffre d'affaires important. Il est donc désormais indispensable d'accompagner la création d'un site Internet d'une communication sur quelques outils majoritaires comme Facebook et Twitter, ou d'identifier d'autres outils en fonction des cibles retenues par le maitre d'ouvrage. 


1.1.4. Actualisation

Un site Internet qui n'évolue pas fréquemment ne peut pas séduire les internautes et est plutôt mal jugé par les moteurs de recherche qui ont tendance à le dévoloriser. 

Le fait de disposer d'un espace d’administration doté d’une très bonne ergonomie et robustesse permet aux contributeurs et administrateurs du site de l'enrichir et le mettre à jour efficacement. 

La qualité des espaces d'administration des outils de gestion de contenus peut s'évaluer sur la base d'un critère simple, leur utilisabilité pour des néophytes. Si le maitre d'ouvrage peut administrer son site simplement sans aucune formation préalable c'est le signe d'un CMS de qualité réellement exploitable !


1.1.5. Fiabilité

C'est un point majeur de la réussite d'un site Internet, simplement parce que les outils de gestion et d'administration de sites Internet sont souvent connus pour dysfonctionner tant au niveau de l'internaute qui le consulte qu'au niveau de l'administrateur qui le gère. 


1.1.6. Séduction

Le potentiel de séduction, c'est à dire l'aspect graphique d'un site est un point important dans les processus de conquête et de fidélisation des internautes. Le site doit pouvoir se distinguer de ses concurrents, apporter une image moderne et novatrice en phase avec son positionnement. 

Trop souvent les phases de conception ergonomique et graphique se confondent lors de la création des sites Internet, cela conduit généralement à des sites ou l'image a pris plus d'importance que le fonctionnel et c'est souvent très dommageable.

Il est indispensable de distinguer 2 phases différentes lors de la conception : la conception ergonomique sur la base de prototypes évoluant pas à pas et la phase de mise en scène graphique de ces maquettes ergonomiques. 

La comparaison avec la couture prend là toute sa pertinence, pour créer un vêtement les couturiers passent d'abord par la création d'un patron adapté et aux mesures du client avant de travailler sur le tissu et le rendu final. 


1.1.7. Accessibilité

L'accessibilité caractérise la capacité pour un site Internet à être accessible à tous quelque soient les capacités physiques, psychiques ou éventuels handicaps. 

La France dispose dans la loi handicap de 2005 d'un volet concernant l'accessibilité des sites web. Le décret d'application a été acté au bout de 10 années sans définir aucune sanction (son application reste donc plus ou moins lettre morte et dépend du bon vouloir des décideurs. 


1.1.8. Compatible

Un site Internet se consulte par de nombreux outils différents, des ordinateurs aux smart phone en passant par les tablettes... Il est nécessaire prendre en compte ces nouveaux modes de consultation ! 

1.2. RÉFÉRENTIELS ET STANDARDS QUALITÉ WEB

Un certain nombre de standards et référentiels permettent de construire des sites dans une démarche qualité mais il n'y a pas de standard unique. Voici quelques uns de ces référentiels : 
 

1.3. Outils 

Différents outils seront utilisés pour réaliser l'audit d'un site, ils sont tous gratuits :

2. Intégration HTML

2.1 Page web ? 

Une page web, c'est tout simplement une page contenant du texte et quelques symboles spéciaux. Le texte est au format ASCII, c'est à dire du texte brut sans formatage spécial comme le fait votre traitement de texte.
  • Le texte brut, c'est ce que vous produisez lorsque vous écrivez avec le NOTEPAD ou EDIT sur PC, et SIMPLETEXT sur Macintosh.
  • Les symboles spéciaux eux, sont aussi du texte ASCII mais n'apparaîtront pas à l'écran. Pour cela nous allons les entourer à chaque fois d'un "<" et d'un ">". Ces symboles spéciaux sont appelés des "balises" ou des "tags". Ici nous utiliserons le mot balise pour simplifier.
Pourquoi un fichier texte me diriez-vous ? Tout simplement car il peut être reconnu sans problèmes d'un environnement à un autre. Une page de texte peut donc être lue et interprétée par n'importe quel navigateur sur n'importe quelle plate-forme que ce soit un PC, un Mac, une station Unix, un Amiga, ou tout autre ordinateur.

Une page Web, c'est essentiellement du texte, mais elle peut aussi comporter des images, du son, des animations voir même des vidéos. Pour afficher ces images, écouter du son etc... il vous faudra incorporer une certaine syntaxe dans l'écriture de votre page. Nous verrons tout cela plus loin.

Une page Web va aussi comporter des liens; ceux-ci servent à renvoyer le lecteur vers soit une autre partie de votre texte soit vers un nouvelle page. Cette nouvelle page pourra se trouver n'importe où dans le monde, pourvu que l'ordinateur qui héberge cette page soit relié à Internet et qu'il soit allumé. 
 
  

2.2. Le rôle du développeur front end / intégrateur HTML

Son rôle et importance s'est accrue au cours des dernières années, il s'agit d'un maillon en charge de la production des pages web qui doit être apte à dialoguer avec les différents grands acteurs de la chaine de production :

  • Chef de projet, responsable communication, responsable marketing, consultants SEO, et experts (accessibilité, ergonome,...),
  • Directeur artistique,
  • Développeurs back end,
  • Administrateurs du site, et client final,...

Il est responsable de l'interface web et de son bon fonctionnement quelques soient les caractéristiques techniques des équipements de l'internaute et compétences de l'internaute.

Ces séances de cours et TP ont pour finalité de vous faire appréhender les sujets suivants :

Les points clés que les étudiants doivent retenir à l'issu de la formation...
La logique du code HTML/CSS
  • balises et attributs
  • syntaxe
  • structuration documentaire (surtout en html5)
Tout existe sur le web...

Les réponses à toutes les questions sont à quelques clics, il suffit de chercher. Il existe ainsi des :

  • outils et plugins
  • sites outils
  • mémos et supports de cours
La logique documentaire et l'approche HTML5
La logique Multi device
  • Ordinateur,
  • smart phone,
  • tablettes,
  • impression,...
Les conséquences des développements front-end
  • Utilisabilité
  • Ergonomie
  • Accessibilité/interopérabilité
  • Référencement naturel
  • Evolutivité et pérénité
Standards, normes et règles
  • W3C
  • Accessibilité
  • Ergonomie
  • Qualité
  • Performances
Savoir auditer
  • Outils de diagnostic
  • Méthode de diagnostic
  • Concept d'amélioration et d'enrichissement progressif
Les trucs et astuces
  • (essentiellement CSS) :
  • display inline et block
  • Positions relative et absolue
  • Flottement
  • Background et sprite
  • Mediaqueries

2.3 Vos outils

Vous devez disposer à tout moment des outils suivants sur votre ordinateur pour suivre cours et TP : 
  • plusieurs navigateurs web récents + si possible Internet Explorer
  • un logiciel de transfert ftp : du serveur à votre ordinateur et inversement : Filezilla par exemple 
  • un éditeur de code HTML : ultraedit, notepad++ ou notepad (mais pas de coloration syntaxique)
  • une liste de liens ressources

2.4. Les bases du code HTML

Cours rédigé par cf http://j-willette.developpez.com/tutoriels/html/les-bases-du-html/

Vous devez lire ce cours avant le 06/10/2017

Plan du cours

>> Débuter le cours

2.5. Les nouveautés du HTML5

Depuis 4 à 5 années un nouveau standard de codage des pages web est apparu promu par le W3C, la plupart des anciennes balises sont encore valides, mais de nouvelles balises et de nouveaus attributs sont proposées, certaines sont très importantes car elles apportent plus de sens au balisage sémantique : 

  • <header> </header> : cette balise est utilisée pour isoler la partie commune de toutes les pages d'un site (contenant généralement, logo, menu,...)
  • <section></section> : cette balise est utilisée pour isoler la partie variable des pages 
  • <article></article> : permet d'identifier la zone de contenu principal de la page à l'intérieur de la section 
  • <footer></footer> : utilisée pour isoler le pied de page 

AInsi, le balisage classique d'une page web devient : 
 

<!DOCTYPE html>
<html lang="fr">
<head>
<title></title>
<meta name="description" content=" " />
<meta name="keywords" content=" " />
<meta charset="utf-8">
</head>
<body>
<header>                         </header>
<section>
  <article>                         </article>
</section>
<footer>                          </footer>
</body>
</html>
 

2.6. De la pratique...  

  • Ouvrez un compte sur Code Academy : https://www.codecademy.com/
  • Réalisez le tutoriel : "Learn HTML" https://www.codecademy.com/learn/learn-html
  • Ce travail est à réaliser avant le 06/10/2017 (d'autres chapitres seront traités ultérieurement)
  • Le travail que vous aurez réaliser sur Code Academy pourra être pris en compte dans votre note globale (en accédant à chacun de vos comptes)