M1105 Conception de documents et d interfaces numériques

(1)

M1105 Conception de documents et d’interfaces numériques

D. Petit [email protected]

2015-2016

(2)

Plan

1 Présentation du module

2 Historique (light) du web

Historique d’internet/du www/du web/...

Internet : les acteurs

Internet : les principales technos ? Bilan : Être un bon développeur Web

3 Mes premières pages web

(3)

Plan

(4)

Synoptique PPN

Volumes 45h dont 20 TD et 25 TP

Intervenants C. Gueudet, C. Rozé, S. Allal, D. Petit Contenu Web - Internet – Mobilité - Expression -

Communication

Objectif Savoir structurer et présenter des contenus numériques

Compétences visées Réalisation d’une solution informatique.

Conception, rédaction et production de contenus pour des médias numériques.

Prérequis Partiellement M1101 (module systèmes pour les bases : architecture, langages de commandes, etc)

(5)

Contenus PPN

La séparation contenu-structure-présentation Les technologies du Web (World Wide Web) pour la description de documents et d’interfaces : HTML (HyperText Markup Language), CSS (Cascading Style Sheets), chartes graphiques

Sensibilisation à l’ergonomie

Outils bureautiques de production de documents numériques

Conformité des sites Web aux standards d’accessibilité W3C / WAI (World Wide Web Consortium / Web

Accessibility Initiative)

(6)

Modalités de mise en œuvre PPN

Équipe mixte d’enseignants en communication et en informatique

Respect des normes et standards

Possibilité de s’appuyer sur un gestionnaire de contenus Utilisation d’outils de mesure de conformité pour

l’accessibilité du Web Prolongements possibles

C2I (Certificat Informatique et Internet) Adaptation aux terminaux et navigateurs

Mots clés : HTML ; CSS ; Web ; Documents numériques ; Bureautique

(7)

Plan

(8)

Quelques références

Bien Développer pour le Web 2.0. C. Porteneuve. Eyrolles Réussir son site web avec XHTML et CSS N. Nebra.

Eyrolles

HTML5 Les bases du langages. L. Van Lancker. ENI ... La BU a pas mal de ressources sur le sujet Quelques sites :

http://www.w3.org

http://www.w3schools.com/

http://www.w3.org/WAI/intro/wcag

(9)

Plan

(10)

Historique

¹

(1)

Quelques points dans l’histoire

Courant 60’s : Projet ARPANET de l’agence DARPA (agence créée par le DoD)

Courant 60’s : MIT : idée d’interconnecter les différents réseaux

Début 70’s : Envoi du premier message 1972 : terme Internet apparait

1989 : Tim Berners-Lee au CERN crée le World Wide Web : document hypertexte

1991-1993 : il travaille sur URI, HTTP, HTML

1994 : Tim Berners-Lee devient au MIT directeur du W3C

1. Synthèse de différentes sources : livres en référence, Wikipedia, et autres sites web.

(11)

Historique (2)

Évolution quantitative :

1984 : 1 000 machines de connectées 1987 : 10 000 machines de connectées Début 1990 : 1 000 000 machines connectées Début 2000 : 1 000 000 000 machines connectées 1993 : Appel à proposition pour le remplaçant d’IPv4 (finalisation en 1998)

Actuellement : 200 millions de sites web

(12)

Les grandes évolutions du web

Web 0.1 Les balbutiements du document hypertexte pour donner de l’information structurée

Web 1.0 Document hypertexte pour le public. Début de l’ajout d’informations dynamiques.

Web 2.0 Web collaboratif : les internautes deviennent des fournisseurs de contenu (Blog, réseaux sociaux, etc)

Web convivial : atteindre les mêmes facilités d’utilisation que les applications Desktop (personnalisation, complétion, chargement à la volée, ...)

Web 3.0 Web sémantique : trop d’information sur internet, comment faire le tri ?

Web 4.0 ? ? ?

(13)

Plan

(14)

Les acteurs de l’informatique et du Web

Acteurs institutionnels : Department of Defense (DoD) Acteurs Académiques : Massachusetts Institute of Technology (MIT) et beaucoup d’autres universités, instituts publics (INRIA par exemple)

Acteurs Industriels : IBM, BEA, Oracle,

Consortiums (ou assimilés) : Object Management Group (OMG), World Wide Web Consortium (W3C), Web Hypertext Application Technology Working Group (WHATWG), Internet Engineering Task Force (IETF), Apache Software Foundation

(15)

Plan

(16)

Les standards

À quoi ça sert ?

À bien faire les choses, ne pas se contenter du ”ça marche chez moi”

Pour les pérenniser

Pour les rendre plus maintenables Pour les rendre compatibles Pour les rendre plus efficaces

Pour les rendre accessibles au plus grand nombre ...

(17)

Un exemple (un peu ancien)

http://www.mikeindustries.com/blog/archive/

2003/06/espn-interview

espn.com, 40 000 000 pages vues/jour

Idée : passer à une meilleure structuration des pages et l’utilisation de styles

Gains de Bande Passante :

2 terabytes/jour, 61 terabytes/mois, 730 terabytes/an...

(18)

Les standards et les navigateurs

Tous les navigateurs n’implantent pas tous les standards...

À vous d’être vigilant

Éviter les utilisations de choses “exotiques”

Le plus important : respecter les standards

Et ne surtout pas se laisser influencer par l’interprétation de vos applications par un navigateur particulier

(19)

HTML

L’origine du web (années 90) Repris par le W3C

HyperText Markup Language Décrit le contenu d’une page web

Dérivé du SGML (Standard Generalized Markup Language)

langage dédié à l’origine pour les imprimantes

objectif : séparer les notions de structure de celles de mise en page d’un document spécifiée dans un autre document.

Basé sur l’utilisation de balises

Quelques soucis d’ambiguïté pour les traitements automatisés

(20)

Exemple d’un fichier HTML (ancien)

<HTML>

<HEAD>

<TITLE>UML en français</TITLE>

</HEAD>

<FRAME SRC="menu/top.html" NAME="topUML" SCROLLING=NO BORDER=0 SPACING=0 FRAMEBORDER=0 FRAMESPACING=0 MARGINWIDTH=0

MARGINHEIGHT=0>

</FRAMESET>

</HTML>

(21)

XML (et sa grande famille)

eXtensible Markup Language Issu du W3C

Langage de balises

Les balises décrivent la structure du document Sans ambiguïté possible

Un principe de langage permettant la définition de langages divers et variés

Des langages d’échanges de données

Une spécification du langage acceptable (Doctype, DTD) Exemple un document openoffice : Voir le code

(22)

XHTML

Issu du W3C

eXtensible HyperText Markup Language Un HTML XMLisé pour

Lever les ambiguïtés de HTML Faciliter les traitements automatisés XHTML 1.0≡HTML 4

Objectif : la puissance de SGML sans sa complexité Donne la possibilité de manipuler des objets DOM (Document Object Model)

(23)

La suite

Mise en chantier du XHTML 2.0

Mais pas d’adoption complète du XHTML 1.0, pas mal de développeurs restent sur le HTML 4.0 transitional

Certains grands comptes comme Apple, Mozilla et Google ne soutiennent pas la stratégie XHTML 2.0

En parallèle travail sur XHTML et sur une suite au HTML 4.0

Fin 2009, T. Berner-Lee met un terme au groupe de travail sur le XHTML 2.0

2012 :«début»de la norme HTML5

(24)

HTML5

En trois points...

Passage à la notion d’application web en HTML

Soutenu/conçu par les acteurs principaux des éditeurs de navigateurs

Non encore normalisé...

Les grands changements

Quelques balises de style ont disparu (utilisez le CSS ! !)

De nouvelles balises (par exemple la possibilité d’ajouter du contenu audio et vidéo)

Une simplification de la validation des données dans les formulaires

(25)

CSS

Cascading Style Sheets Issu du W3C

Permet de définir le rendu d’un document XHTML Beaucoup plus de possibilité que dans HTML...

(26)

DOM

Document Object Model

API pour manipuler des documents XML

Manipulation “dynamique” du document : accès et mise à jour, etc

Organisé en niveaux

Les navigateurs sont compatibles pour certains niveaux

(27)

Fonctionnement général

(28)

URL

Uniform Resource Locators

adresse pour accéder à une ressource

les infos : protocoles (http, ftp, ...), le nom de la machine, la localisation sur la machine, des éléments supplémentaires

(29)

Plan

(30)

Quelques conseils ...

pour devenir un bon développeur Web...

Suivre les évolutions constantes du domaine Suivre les spécifications

Capitaliser les expériences

Voir l’annexe C de Bien développer pour le Web 2.0

(31)

Plan

(32)

Hello World

<!DOCTYPE html>

<html>

<head>

<title>Ma première page HTML 5</title>

</head>

<body>

<h1>Ma première page web</h1>

<p>Hello world !</p>

</body>

</html>

Voir la page

(33)

Hello World (Version 2)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Voir la page

(34)

Avec du style...

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Voir la page

(35)

Le style...

h1 {

text-shadow: 5px 5px 5px #FF0000;

}

Voir un style plus complexe de l’université et la page qui l’appelle