• Support de cours 2015-2016

Séance 1

1. Présentation  

2. Les marchés de la création de site web en France 

Actuellement en France, trois catégories de prestataires sont nettement identifiables ils correspondent à 3 segments de clients assez caractérisés :
  • les créateurs de sites web destinés aux PME et PMI. Ce sont des sociétés de taille importante et dont les offres sont standard, peu personnalisées et sans réel suivi. Pratiquant des tarifs parfois abusifs, ces "usines à sites web" sont peu recommandables.
    • Leur nombre s'est considérablement réduit depuis 2 années suite à des dépots de bilan à cause d'absence de visions industrielles ou de modèles économiques reposant uniquement sur le processus de vente 
    • Les acteurs de l'économie classique (pages jaunes, Publicis Webformance) en ont profité pour récupérer leurs clients 
  • les créateurs de sites web destinés aux grandes marques. Ces agences, réels spécialistes du e-marketing, ont un positionnement similaire aux agences de communication mais ne se concentrent que sur un seul support : la toile.
    • localisées à Paris essentiellement elles travaillent quasi exclusivement pour les grands comptes 
    • elles se doivent d'être à la pointe de toutes les nouveautés techniques ou marketing 
    • ce marché est déjà mature et il est difficile de se créer maintenant une place au soleil 
  • une multitude de petites agences web et web designers indépendants. Leurs clients vont du petit commerçant aux grandes marques. Ces prestataires misent généralement sur la proximité, le suivi personnalisé et l'originalité créative ou stratégique.

Je me permets d'ajouter à ces 3 catégories dont l'activité principale est la création de site web et le webmarketing une catégorie disparate de prestataires dont la création web n'est qu'une activité secondaire (qui viennent quelque peu "polluer le marché" : 
  • Agences de communication,
  • Développeurs indépendants,
  • Imprimeurs,
  • Les Pages Jaunes,
  • Sociétés d’informatique,
  • Votre cousin ou votre belle sœur,…

2.1. Un secteur économique relativement immature 

Le marché de la création de sites web semble relativement immature en France contrairement à d'autres pays européens, quelques arguments allant dans ce sens...
 
  • Des tarifs extrêmement variables
  • Des 100aines d’acteurs plus ou moins spécialisés : agences web, agences de web marketing,...
     


 
  • Des outils et méthodes de conception et de réalisation encore très variables et parfois rétrogrades
  • Une insatisfaction fréquente des clients des agences
  • Une adoption incomplète par les entreprises françaises (entre 60 et 70% de taux d'équipement en sites web)

3.2. Un secteur économique à fort potentiel de développement 

Le rapport Mc Kinsey a fait pas mal de bruit lors de sa publication... Cf
Son contenu fut repris par certains journalistes... Comme Jean-Marc Vittori dans "Les Echos"

Un peu comme si nous étions en 1911, deux ans avant qu'Henry Ford ait l'idée d'employer l'électricité pour faire tourner une chaîne de montage [...] La révolution industrielle d'Internet commence à peine.

 

Ce secteur spécifique possède un fort potentiel de développement.

Les besoins les plus évidents et les développements les plus forts sont à attendre au niveau d'agences web arrivant à se mettre au service des petits entrepreneurs en offrant un service de proximité, qualitatif et pour des couts raisonnables avec nécessairement une réelle approche industrielle ! 

3.3. Les principales explications de la non adaption pleine de la stratégie web par les entreprises françaises ?

Serez vous trouver dans cette image où se cache l'ordinateur de François Hollande ? 



On peut comme l'indique le rapport Mac Kinsey évoquer du côté des entrepreneurs
  • des difficultés organisationnelles,
  • un déficit de talents numériques,
  • des marges financières plus serrées que dans d’autres pays,
  • ainsi qu’un manque d’implication visible des dirigeants (vous avez déjà vu un politique de la promotion "Voltaire" avec un ordinateur ?) 
On peut également noter plutôt du côté des prestataires et agences web
  • problématique de compétences spécifiques aux métiers du web (peu de dirigeants d'agence ont été réellement formés aux métiers du web lors de leur parcours post bac) 
  • problématiques de rentabilité économique notamment due à l'absence de visions industrielles :
    • hétéréogénité forte des outils et méthodes,
    • chaines de production couteuses en termes de ressources humaines,
    • Enorme subjectivité dans le dialogue avec le client... 
 
  •  absence de réelles proximité et de confiance de la part des clients potentiels
    • les agences web sont pour la plupart relativement cachées : elles ne sont pas dans la cité
    • les agences web profitent du peu de compétences de leurs clients et prospects pour les noyer sous un jargon technique et dissimuler les vrais savoirs simples et accessibles 

3. Vous avez dit site web ? De quoi parle-t-on ?

3.1. Les sites web

Les sites web et les pages qui les composent reposent sur la transmission de données via un canal numérique, tous les sites Internet reposent sur des fondamentaux communs. Un site web correspond ainsi à l'assemblage organisé de fichiers différents : 
  • Les contenus :
    • contenus rédactionnels et structurant le code HTML
    • éléments multimédias qui apparaissent au sein de la page web mais correspondent à des fichiers indépendants : images, vidéos, cartes interactives 
  • La forme et l'interactivité
    • fichiers de code CSS et Javascript permettant la mise en forme graphique et l'interactivité 

3.1.1. Un contenu unique et de multiples mise en forme 

L'indépendance entre les contenus et la forme est caractéristique de ce média. En effet pour un même contenu nous pouvons ainsi avoir des mises en forme différentes et adaptées aux différents canaux de consultation (devices).

Google le plus célèbre aveugle du web 

Il est à noter que l'ensemble des moteurs de recherche ne perçoivent uniquement que le code HTML des pages web, ils n'arrivent pas à lire (pour l'instant en tout cas) les autres éléments de la page web que peuvent être les images, les vidéos, les fichiers flash... Autant dire qu'en termes de référencement naturel il faut soigner le code HTML et s'assurer que les contenus rédactionnels sont bien accessibles aux moteurs de recherche.

3.1.2. Les grands types de site web du point de vue technologique 

Historiquement sont apparues différentes familles de sites web : 
  • Les sites statiques :
    • il s'agit de sites constitués de pages web simple en html qui pour être mises à jour nécessitent
      • de récupérer les fichiers sur le serveur ou ils sont stockés pour être mis à disposition des internautes
      • de modifier le code html de ces fichiers (avec des logiciels comme Dreamweaver)
      • de transférer les fichiers modifiés à nouveau sur le serveur 
    • ils nécessitent une bonne technicité quant aux mises à jour,
    • ils ne permettent à l'internaute d'interagir avec le site et au site de collecter des données 
    • exemple : http://www.qualite-site-internet.fr/
  • Les sites en flash
    • ils ont été pendant quelques années très répandus 
    • Les animations flash ont connu un pic de popularité dans les années 2000, notamment dans le cadre d'animations humoristiques et sophistiquées.
    • La technologie flash étant considérée comme lourde et obsolète, de moins en moins de systèmes supportent Flash Player, et les animations flash tendent à disparaître aujourd'hui.
    • A lire par exemple http://romy.tetue.net/ne-faites-plus-de-sites-full-flash
    • Exemple de site en Flash https://disneyworld.disney.go.com/new-fantasyland/fr/
  • Les sites avec CMS : 
    • Un système de gestion de contenu ou SGC (Content Management System ou CMS) est une famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d'applications multimédia. Ils partagent les fonctionnalités suivantes :
      • ils permettent à plusieurs individus de travailler sur un même document ;
      • ils fournissent une chaîne de publication (workflow) offrant par exemple la possibilité de mettre en ligne le contenu des documents ;
      • ils permettent de séparer les opérations de gestion de la forme et du contenu ;
      • ils permettent de collecter des contenus, informations postées par les internautes,
      • ils permettent de structurer le contenu (utilisation de FAQ, de documents, de blogs, de forums de discussion, etc.) ;
      • ils permettent de hiérarchiser les utilisateurs et de leur attribuer des rôles et des permissions (utilisateur anonyme, administrateur, contributeur, etc.) ;
      • Exemples de CMS : Drupal, ez publish, joomla, wordpress et des 100aines d'autres
  • Les CMS en SAAS (ou dans le cloud)

3.2. Le web marketing

Le web a révolutionné le marketing. La réactivité de ce média, sa flexibilité, la capacité de tout mesurer et d’interagir avec les consommateurs sont sans aucune mesure avec ce que l’on peut accomplir à la télévision ou dans la presse. On peut, de plus, toucher les consommateurs à chaque phase du processus décisionnel. Le web a également révolutionné la consommation !

Les principaux objectifs webmarketing sont :

  • la génération d'audience qualifiée,
  • la conversion de l'audience (en achat, en prise de contact, en inscription,...), ​
  • le développement de la notoriété,
  • le développement des processus de fidélisation

Le site web est central. Avant d'aborder toute action webmarketing, il faut disposer d'un site adapté aux besoins et taches à traiter par les différentes cibles. De la qualité globale du site web dépend l'effecicacité de toutes les actions web marketing

Annonceurs, agences web, agences de marketing web, régies, réseaux et plateformes, sont autant d'acteurs de la filière web marketing
  • Les grands dispositifs webmarketing répondant aux 4 objectifs webmarketing :
    •  Le référencement naturel, grand pourvoyeur de trafic gratuit, qui consiste à optimiser son positionnement dans les résultats des moteurs de recherche.
    •  Les campagnes d’affichage qui consistent à diffuser des bannières sur des sites préalablement sélectionnés pour leur pertinence.
    •  Le marketing des moteurs de recherche qui consiste à placer des liens sponsorisés au sein des résultats des requêtes des internautes.
    •  Le marketing social que l’on retrouve sur les réseaux communautaires comme Facebook.
    •  La publicité vidéo qui consiste à servir des spots publicitaires aux internautes sur des plateformes vidéo ou sur des sites traditionnels.
    •  L’affiliation ou le marketing à la performance qui permet de ne payer la diffusion des publicités que lorsque elles donnent lieu à une conversion.
    •  La présence sur les comparateurs de prix qui permet d’atteindre les internautes lorsqu’ils recherchent le meilleur tarif pour un produit.
    •  L’emailing (à ne pas confondre avec le SPAM) qui est l’utilisation raisonnée de l’email pour promouvoir des produits ou des services.
    •  La publicité mobile qui permet d’atteindre les consommateurs sur leur smartphone au sein d’applications ou de sites mobiles.
    •  Le marketing local, nouveau venu dans les formes de publicités en ligne, qui consiste à servir aux internautes des annonces basées sur l’endroit où ils se trouvent ou sur les endroits où ils pourraient vouloir se trouver.
  • Quelque soit le site considéré le webmarketing doit permettre d'optimiser essentiellement deux aspects : générations de trafic et conversions. Les finalités de notoriété et de fidélisation sont également des préoccupations fortes et communes à presque tous les projets

3.2.1. Le site web point central des actions webmarketing 

La démarche webmarketing qui a pour support de base principalement le site web s’articule sur trois axes fondamentaux :
  • la conception du site web,
  • l’optimisation de la visibilité sur Internet et via l'ensemble des canaux générateurs de trafic,
  • la conversion et la gestion et fidélisation des clients.
Le webmarketing est donc en relations avec tous les aspects et métiers de la chaine de conception, production, et animations des sites web. 

Les stratégies webmarketing nécessitent pour plus d'efficacité de disposer d'un site web de qualité adapté aux cibles et aux taches qu'elles auront à assurer (ergonomie centrée utilisateur UX Design).

Ainsi dans la chaine de production des sites web des aspects liés à l'ergonomie, à l'environnement graphique,... pourront avoir de fortes influences sur le potentiel des actions webmarketing menées après la mise en ligne.

Tous les sites web qu'ils soient marchands ou non, leader nationaux ou acteurs locaux peuvent faire l'objet d'une approche webmarketing visant à développer l'activité de l'entreprise ou du porteur de projet.

Exemples
  • http://www.archiduchesse.com/
    • e commerce
    • stratégie de conquètes de nouveaux clients, de fidélisation
    • web marketing
  • http://www.ter.sncf.com/aquitaine/
    • antenne aquitaine des services TER
    • stratégie de simplification/fluidification des services des TER traditionnels, vente en ligne, fidélisation
    • marketing traditionnel et web marketing (blog,...)
  • https://www.pmu.fr/
    • leader du marché
    • stratégie de conquète de nouveaux parieurs, d'augmentation des paris de chaque parieurs, fidélisation
    • marketing traditionnel et web marketing
  • http://www.studioa-cours-danse-bordeaux.fr/
    • acteur local
    • stratégie de conquètes de propects devenant élèves
    • uniquement référencement naturel
  • http://www.invest-in-aquitaine.com/
    • acteur régional institutionnel
    • stratégie de conquètes de clients potentiels pour implantation en Aquitaine
    • marketing traditionnel et web marketing
Autant de sites différents, de cibles différentes, de budgets différents et de stratégies marketing différentes ! 
Dans tous ces cas le point central vers lequel renvoient les stratégies marketing est le site web.

3.2.2. Les exceptions

Le site web n'est pas toujours le point central :

4. La conduite de projet web

Ce chapitre présente 3 stratégies pour aborder les projets web en commençant par la plus ancienne. Si l'organisation des différentes taches évolue selon les stratégies toutes les 3 nécessitent de traiter des taches similaires.

4.1. GESTION EN CASCADE

C'est le principe "traditionnel" de conduite de projets web... 
   

Analyse

  • Les différentes phases du projet s'enchainent successivement 
  • Elles nécessitent l'intervention de nombreux profils professionnels spécialisés différents
    • Elle est donc clairement inadaptée aux petits projets/budgets 
  • Elles génèrent un effet tunnel pour le client final qui passe de la charte graphique au site fini
  • Ce principe de fonctionnement nécessite une très bonne compréhension/participation du client final (qui n'ait pas forcément aisée à obtenir)
  • Elle entraine beaucoup de sujectivités : on parle du futur site dans les spécifications, on en montre le rendu visuel non animé dans la charte... Mais le site web n'est pas une "simple" affiche publicitaire, c'est un outil interactif que le client final ne découvre réellement qu'une fois le projet entièrement terminé...
Face à l'énoncé de ces inconvénients dont il ne faut pas minorer l'impact d'autres alternatives sont apparues...

4.2. GESTION AGILE

A la place d'un traitement linéaire des différentes taches le déroulement du planning s'effectue sur des cycles courts (sprints) ou plusieurs phases se suivent successivement... Et le projet est décomposé en n sprints.

 

Comme toutes les gestions de projet en mode agile qu'elles portent sur le web ou toutes autres activités les bénéfices retirés sont notamment : 
  • Une meilleure réactivité pour la prise en compte des changements 
  • Une plus grande implication du client final et moins d'effet tunnel
  • Un périmètre projet défini en fonction des besoins et non en fonction des aspects commerciaux et contractuels 
Néanmoins en termes de couts le problème est un peu toujours le même, cette méthode de conduite de projets web :
  • nécessite de multiples intervenants (et donc un budget assez conséquent) 
  • nécessite une bonne compréhension du client qui ne peut être un "simple néophyte"

4.3. GESTION "LÉGÈRE"

Face aux petits budgets de certains clients (qui sont pour beaucoup aussi néophytes) les méthodes de conduite de projets traditionnels ou agiles ne sont pas satisfaisantes pour percer sur ce marché (offrant pourtant de belles opportunités) pour plusieurs raisons : 
  • en termes de coûts humains associés aux développements 
  • en termes de technicité nécessaire pour que le client final puis s'impliquer pleinement dans le projet et non le subir
  • en termes d'industrialisation (on a tendance à recréer la roue pour chaque projet...)
Cette remarque peut également porter sur des clients ayant des budgets plus conséquents mais étant totalement néophytes et/ou peu disponibles pour passer du temps pour dialoguer avec le chef de projet ! 

La solution envisagée alors est le recours à une conception à 100% basée sur le prototypage. 
 
A lire également : 

5. Qualité des sites web 

5.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.


7.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 !


5.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


5.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. 


5.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 !


5.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. 


5.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. 


5.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. 


5.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 ! 

5.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 : 
 

5.3. Outils 

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

6. Cours n°1 : intégration HTML

6.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é. 
 
  

6.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

6.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

6.4. Les bases du code HTML

Plan du cours

>> Débuter le cours

6.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>
 

6.6. De la pratique...  

  • Ouvrez un compte sur Code Academy : https://www.codecademy.com/
  • Réalisez le tutoriel : "HTML & CSS" les 3 chapitres : https://www.codecademy.com/fr/tracks/web
    • INTRODUCTION AU HTML
    • LA STRUCTURE DE L'HTML : UTILISER DES LISTES
    • LA STRUCTURE DE L'HTML : TABLEAUX, "DIVS", ET "SPANS"
  • Ce travail est un travail personnel que nous débuterons pendant la séance de cours 
  • Ce travail est à réaliser avant le 03/10/2016 (les autres chapitres seront traités ultérieurement)
  • Le travail que vous aurez réaliser sur Code Academy en réalisant l'exhausitivité du tutoriel "HTML & CSS" pourra être pris en compte dans votre note globale (en accédant à chacun de vos comptes)
  • Vous devez tous avoir traité l'ensemble de ce tutoriel avant la fin de semestre. 

7. Travaux à réaliser pour le projet web 

Ces travaux sont à commencer avant le 26/09/2016 et seront rédigés dans un document nommé "note de cadrage" par binome dans un premier temps : 
  • Choix par groupe du sujet parmi la liste des sujets proposés 
  • Contexte du projet 
  • Définition du concept du site / finalité du site 
    • En 1 phrase présenter le concept du site 
  • Périmètre du projet 
    • Explique les différents aspects couverts dans le projet (développement de site,... réseaux sociaux, newsletters,...) 
  • Cibles du site 
    • Définir de manière la plus détaillée possible quelles sont les cibles principales et secondaires du site (localisation, sexe, âge,...) 
  • Objectifs du site 
    • Quels sont les principaux objectifs du site Internet (penser à la valeur ajoutée apportée par votre approche) 
  • Principales fonctionnalités envisagées à terme 
    • Une liste des fonctionnalités que devra proposer le site 
  • Nom de marque et nom de domaine 
    • des propositions pour le nom de domaine et le nom de marque 
  • Risques identifiés 
  • Macroplanning