Technologies et outils de création Web

Transcription

.
Technologies et outils de création Web
Tour d’horizon des évolutions du Web
.
Eric Bellot
.
Eric Bellot ()
Technologies du Web
.
.
.
.
http ://eric-bellot.fr
.
1 / 47
Sommaire
1.
Sous le Web : Internet
3.
Schéma du Web 1.5
Les couches réseau
Fonctionnement du Web 1.5
Internet et ses protocoles
Numéros IP et noms de domaines
Outils du Web 1.5
4.
Les noms de domaines
Web 2.0 - Web social
Caractéristiques du Web 2.0
Les protocoles applicatifs
2.
Web 1.5 - Web dynamique
Le réseau Internet
Outils du Web 2.0
5.
Référencement d’un site Web
6.
Qualités des services et pages Web
URL ou adresse Web
7.
Technologies nouvelles
Web 1.0 - Web statique
Schéma du Web 1.0
Référencement et page Web
La page Web
Le HTML 5
La page HTML
Les CSS 3
Les images Web
Le Web sémantique
La feuille de style CSS
L’HTML sémantique
Le scriptage avec
Le RDF
ECMAScript/Javascript
Les microformats (au sens large)
Contenu, structure, présentation
Le RDFa
Outils du Web 1.0
Les microformats
Schéma de la publication FTP
Les microdonnées
Les datacenters
Eric Bellot ()
Exemples
d’implémentation
de Web
.
.
.
.
.
Technologies du Web
Sémantique
.
2 / 47
Le réseau Internet
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
3 / 47
Les couches réseau
1
Le modèle OSI décrit les différents niveaux de communication d’un réseau
Couche
Application
Définition
Exemple
Couche des services réseaux appliqués (au sens d’appliqués à une utilisation
2
HTTP , POP, SMTP, FTP
3
particulière)
Présentation
La couche présentation est chargée du codage des données applicatives.
Session
La couche session gère les synchronisations (gestion de communications
Telnet, SSH
4
multipoints) et les « transactions » (restauration de données en cas d’erreur)
Transport
5
TCP , UDP
La couche de transport gère le transfert de messages ou d’octets bruts garantis
sans corruption, pertes, réordonnancement, duplication
Réseau
Liaison
6
IP , IPX
La couche de réseau gère le routage, le relayage, etc.
Ethernet, adresses Mac,
Token Ring
La couche de liaison gère les communications entre 2 machines adjacentes, i.e.
directement reliées entre elles par un support physique
Physique
7
BHDn , NRZ
La couche physique est chargée de la transmission effective des signaux
électriques ou optiques entre les interlocuteurs.
1. OSI : Open Systems Interconnection
2. HTTP : HyperText Transfert Protocol
3. FTP : File Transfert Protocol
4. SSH : Secure Shell
5. TCP : Transfert Control Protocol
6. IP : Internet Protocol
7. BHDn : Codage bipolaire à haute densité d’ordre n
Eric Bellot ()
.
Technologies du Web
.
.
.
.
.
4 / 47
Internet et ses protocoles
Un protocole est une méthode standard qui permet la communication entre des processus informatiques,
c’est-à-dire un ensemble de règles et de procédures à respecter pour émettre et recevoir des données sur un
réseau.
Internet : Réseaux d’ordinateurs interconnectés utilisant la méthode TCP/IP pour la communication des
données
IP : L’Internet Protocol à pour objet l’acheminement au mieux (best-effort delivery) des datagrammes,
non-orienté connexion. IP ne se préoccupe pas du contenu des datagrammes, mais recherche un
chemin pour les mener à destination. Il est non-fiable, c’est à dire qu’il ne s’occupe pas de vérifier que les
datagrammes sont sains (non-corrompus) ou effectivement arrivés.
TCP : Le Transmission Control Protocol assure la connexion et la vérification de la transmission correcte des
données (les datagrammes).
8
Numéro IP : Chaque ordinateur connecté dispose d’un numéro unique qui l’identifie sur l’Internet. Dans la
9
version 4 de l’IP (IPv4), les numéros IP font 4 octets (4 chiffres compris entre 0 et 255) . Par exemple :
138.96.146.2 ou 66.102.9.104. Pour la version 6 (IPv6), les numéros sont notés en base hexadécimale,
10
et comptent 8 groupes de 2 octets . Par exemple : 2A01:E350:2421:4BE0:CDBC:C04E:A7AB:ECF3.
8. Il est plus juste de dire que chaque interface réseau d’un système connecté dispose d’un IP unique.
9. IPv6 permet de gérer un peu plus de 4 milliards d’adresses
38
10. IPv6 permet de définir ce qui permet de gérer 3,4 x 10 , ce qui équivaut à 667 millons de millards d’adresses par
millimètre carré de surface terrestre...
.
.
.
.
Eric Bellot ()
Technologies du Web
.
.
5 / 47
Numéros IP et noms de domaines
Nom de domaine : Identifiant unique d’un domaine informatique (ordinateur, réseau, etc.) attribué par un
registrar. Chaque nom de domaine correspond à un numéro IP. Un nom de domaine est une façon plus
conviviale que le numéro IP pour nommer les ordinateurs sur l’Internet.
google.fr = 173.194.40.183.
afnic.fr = 192.134.4.20
Domain Name Server : Ordinateur gérant une base de données établissant la correspondance entre un
numéro IP et un nom de domaine.
Lorsqu’on ouvre un site Web avec un nouveau nom de domaine, le numéro IP est instantanément
opérationnel alors qu’il faut attendre entre 2 et 48 heures pour que le nom de domaine soit utilisable sur
tout l’Internet.
C’est le délai pour que les DNS se communiquent l’information.
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
6 / 47
Les noms de domaines
Attribution des noms : Les IP et les noms sont gérés par différents organismes :
11
gTLD : Les generic Top-Level Domain sont gérés par l’ICANN , c’est à dire les nom de type com, net,
org, info, etc. Site de l’ICAN. Les gTLD personnalisés peuvent être déposés à partir de 2012
12
.
ccTLD : Les country codes Top-Level Domain sont gérés par des organismes nationaux : fr, de, us, va,
be, etc. Pour la france, c’est l’AFNIC
13
. Site de l’AFNIC.
registrar : Concrètement, l’attribution des noms de domaines est gérée par des organismes
sous-traitants appelés registrars. Le service est souvent proposé par les hébergeurs de sites Web/de
boîtes aux lettres. Le registrar le plus célèbre de France : Gandi.
Nom d’hôte
SLD « domaine »
TLD
« Sous-domaine »
Second-Level Domain
Top-Level Domain
www
google
fr
www
microsoft
com
www
wikipedia
org
fr
wikipedia
org
www
cooperer
coop
WHOIS : Les service de Whois permettent de trouver les informations sur le propriétaire d’un nom de
domaine ou de trouver un nom de domaine libre. Exemple : Le Whois de Gandi
11. Internet Corporation for Assigned Names and Numbers
12.
Coût d’un gTLD personnalisé : 185 000 $ US pour soumettre sa candidature, et 25 000 $ par année
13. Association française pour le nommage Internet en coopération
Eric Bellot ()
Technologies du Web
.
.
.
.
.
.
7 / 47
AFNIC et .fr
Le domaine .fr est administré par l’AFNIC (qui gère également les domaines les DOM-TOM : .re pour la
Réunion et .tf pour les Terres australes et antarctiques françaises, etc.). L’attribution des noms est soumise à
une charte de nommage qui détaille les modalités d’attribution.
L’AFNIC propose également des domaines sectoriels de second niveau. Quelques exemples :
.asso.fr : associations
.com.fr : ouvert à tous sans justification
.gouv.fr : administration française
.nom.fr : noms de famille
.presse.fr : publications de presse
Quelques points pratiques à propos de l’AFNIC :
Entreprises : Les entreprises doivent fournir un extrait de K-bis
Associations : Les associations doivent fournir la copie de la déclaration à la préfecture ;
Particuliers : Les particuliers peuvent masquer leurs coordonnées personnelles pour protéger leur vie
privée (le registrar affiche ses coordonnées à la place).
Termes soumis à examen préalable : Certains termes ou expressions susceptibles de porter atteinte à
l’ordre public, aux bonnes moeurs ou à la propriété intellectuelle sont soumis à examen prépalable avant
que l’enregistrement soit autorisé.
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
8 / 47
Les protocoles applicatifs
Les protocoles applicatifs sont des protocoles spécialisés dans la communication de certaines données ou la
réalisation d’opérations spécifiques.
HTTP : Hypertext Transfert Protocol, protocole de transfert hypertexte (c’est le protocole du Web)
FTP : File Transfert Protocol, protocole de transfert de fichiers
SMTP : Simple Mail Transfert Protocol, protocole de transfert d’email entre deux boites aux lettres.
POP : Post Office Protocol, protocol du « bureau de poste », protocole permettant de récupérer sur
l’ordinateur local les emails stockés dans une boite aux lettres.
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
9 / 47
Schéma du Web 1.0
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
10 / 47
Navigateur : Logiciel capable de télécharger et afficher des pages Web :
Client HTTP : demander des pages HTML au serveur HTTP(requête GET)
Moteur de rendu : afficher les pages HTML (interpréteur du code HTML) et les fichiers annexes les plus
courants : images, feuilles de style CSS, JavaScripts.
Plugins : La plupart des navigateurs supportent un système d’extensions permettant d’ajouter de
nouvelle fonctionnalité et l’affichage de formats de données supplémentaires (Flash, PDF, vidéo, son
et musiques, etc.)
Firefox, Internet Explorer, Safari, Chrome et Opera sont des navigateurs Web.
Serveur HTTP : Logiciel capable de « servir », c’est à dire d’envoyer des pages HTML aux clients HTTP qui
en font la demande. Les pages sont toutes stockées dans un répertoire connu du serveur : le répertoire
Web (www ou htdocs)
Apache, Nginx
14
et Internet Information Server sont les plus connus.
Page Web : Document écrit en language HTML destiné à l’affichage sur le Web :
+ feuilles de styles CSS + images + JavaScript + ...
Exemples de sites Web statiques : Gonfanon|Self HTML | CSS Zen Garden
14. Nginx se prononce « ènn’jinix »
Eric Bellot ()
.
Technologies du Web
.
.
.
.
.
11 / 47
URL et adresse Web
URL : Uniform Ressource Locator (Localisateur uniforme de ressources). L’URL, que l’on nomme souvent
adresse Web, sont des chaines de caractères permettant d’identifier sans ambiguïté une ressource Web
(page Web, image, son, vidéo, emplacement dans une page, email, etc.)
Exemple d’URL :
http://fr.wikipedia.org/w/index.php?title=Uniform_Resource_Locator&action=history
mailto:[email protected]
ftp://hector:[email protected]/telechargement/VIDEOS/conférence.avi
Protocole
Utilisateur:mot de passe
http://
Nom de domaine
Chemin
Nom du fichier
Requête
fr.wikipedia.org
/w/
index.php
?title=Uniform_Resource_Locator
/telechargement/VIDEOS/
conférence.avi
mailto:
albert-dupont@
mon-entreprise.com
ftp://
hector:m0t2p4ss3@
universite.edu
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
12 / 47
La page Web
La page Web est l’affichage généré par le moteur de rendu du navigateur. Cet affichage est construit à partir
du fichier HTML, des différents éléments qui y sont définis, et des fichiers externes dont elle a besoin et
qu’elle désigne (feuilles de styles, scripte d’animation, images, vidéo, etc.)
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
13 / 47
La page HTML
Exemple de code d’une page HTML simple
Aperçu de la page HTML telle qu’elle apparait dans un navigateur
< !DOCTYPE html>
<html>
<head>
< t i t l e > T i t r e de l a page< / t i t l e >
<meta h t t p−e q u i v = ” Content−Type ” content= ” t e x t / h t m l ; c h a r s e t =UTF−8” >
< l i n k h r e f = ” s t y l e . css ” type= ” t e x t / css ” r e l = ” s t y l e s h e e t ” / >
< s c r i p t src= ” j q u e r y . min . j s ” >< / s c r i p t >
< s c r i p t src= ” s c r i p t . j s ” >< / s c r i p t >
< / head>
<body>
<h1> T i t r e de l a page< / h1>
<p>Un paragraphe de t e x t e avec une <strong> s é r i e de mots
i m p o r t a n t s < / strong> . < / p>
<p><img src= ” f l e u r . j p g ” width= ” 150 ” height= ” 112 ” a l t = ” Une f l e u r
f u s c h i a ” / >< / p>
<p class= ” magic ” >J ’ a p p a r a i s e t j e d i s p a r a i s ! < / p>
< / body>
< / html>
Le HTML est une spécification du W3C
15
, la version actuelle, mais non finalisée, est le HTML5(2007, final prévu en 2014).
Pour découvrir la première page Web (1989) et le premier site Web (1992).
15. Les World Wide Web Consortium (W3C) est l’organisme charger de mettre en place les standards du
Web.
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
14 / 47
Les images Web
GIF et PNG8
256 couleurs max.
JPEG
16 millions de couleurs
PNG32
16 millions de couleurs
Pour plus de détails, voir le Petit mémento des formats d’image Web.
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
15 / 47
La feuille de style CSS
body {
background-color :ivory ;
}
h1 {
font-size :30px ;
color :green ;
}
p {
font-size :14px ;
line-height :20px ;
margin-top :20px ;
}
Les CSS sont une spécification du W3C crée en 1996.
La version actuelle est la CSS 2.1 ; avec des parties de la version CSS 3.0 en cours de développement.
Une seule page Web et de jolies CSS pour l’habiller, c’est le Jardin Zen (CSS Zen Garden).
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
16 / 47
Le script Javascript
$(document).ready(function(){
$("img").click(function () {
if ($("p.magic :
first").is(" :
hidden")) {
$("p.magic").slideDown("slow") ;
}
else {
$("p.magic").slideUp("fast") ;
}
}) ;
}) ;
Le ECMAScript ECMAScript est une spécification défini par l’association ECMA International (une association d’industriels
de l’informatique).
Version actuelle : 5.1.
Les implémentations de ECMAScript dans les navigateurs
- Javascript (v. 1.8) est développé par la Mozilla Fundation pour Mozilla Firefox (moteur JaegerMonkey)
- JScript (v. 9.0) est développé par Microsoft pour Internet Explorer (moteur Chakra).
- Javascript est implémenté par Google pour Chrome (moteur V8 JavaScript Engine)
Autres techniques de scriptage côté client : ActionScript (avec Adobe Flash) et n’importe quel language supporté par le
Common Language Infrastructure (avec Microsoft Silverlight). (voir les statistiques d’utilisation des scripts de
W3Tech).
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
17 / 47
Contenu, structure, présentation
Les pages Web ont été pensées selon une logique où les différents composants – contenu, structure,
présentation – sont nettement distincts :
Contenu Tout ce qu’on porte à la connaissance de l’utilisateur via le langage naturel, les images, les sons et
les animations.
Structure Organisation logique du contenu grâce à des éléments comme <body>, <h1>, <p>, <dfn>,
<strong>, etc.
Présentation Manière dont les contenus se manifestent pour l’utilisateur via un périphérique de sortie,
comme un écran, une imprimante, un navigateur vocal, une plage braille, etc.
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
18 / 47
Outils du Web 1.0
Éditeurs Web Wysiwyg :
Adobe Dreamweaver
http ://www.adobe.com/fr/products/dreamweaver.html
Propriétaire/Payant
BlueGriffon
http ://bluegriffon.org/
Libre/Gratuit
Éditeurs Web mode texte (code) :
Vim
http ://www.vim.org
Libre/Gratuit
Emacs
http ://www.gnu.org/software/emacs/emacs.html
Libre/Gratuit
Notepad++
http ://notepad-plus-plus.org/fr/
Libre/Gratuit
Création et retouche d’images :
Adobe Photoshop
http ://www.adobe.fr
Adobe Fireworks
http ://www.adobe.com/fr/products/fireworks.html
The Gimp
http ://www.gimp.org
Libre/Gratuit
XnViewMP
http ://www.xnview.com/fr/xnviewmp/
Propriétaire/Gratuit
Inkscape
http ://www.inkscape.org/ ?lang=fr
Libre/Gratuit
Publication des pages - client FTP :
Filezilla
http ://filezilla-project.org/
Eric Bellot ()
Libre/Gratuit
Technologies du Web
.
.
.
.
.
.
19 / 47
Publication FTP
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
20 / 47
Les datacenters
Les centre de traitement de données (datacenters) sont les bâtîment où sont placés les serveurs qui
hébergent les site, ainsi que toute leurs infrastructures (alimentation électrique, cablage réseau, climatisation,
équipes de maintenance ; etc.)
Un des datacenters de Paris(hébergement Online) et le nouveau centre d’hébergement d’OVH à Strasbourg,
composé de containers.
Eric Bellot ()
.
Technologies du Web
.
.
.
.
.
21 / 47
Schéma du Web 1.5
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
22 / 47
Serveur Web : Serveur Web capable de recevoir des directives POST. Il est basé sur :
Serveur HTTP : Apache, Nginx ou IIS ;
Moteur de script : PHP, Javascript Server, Ruby, Python, Perl, JSP (Java), ASP .Net ;
Base de données : MySQL, PostgreSQL, Microsoft SQL Server, MongoDB (Nosql).
Site Web dynamique : Dans un site Web est dynamique, les pages HTML sont construites sur requête des
navigateurs par une application Web utilisant un langage de script. La plupart du temps, les données sont
fournies par une base de données.
Simple script : des sites dynamiques peuvent être de simples scripts ajoutant quelques fonctionnalités
à un site statique ;
Interactivité : La présence de formulaires rend le site interactif :
l’internaute peut utiliser un moteur de recherche, configurer l’affichage, commenter le site, participer
à des forums, etc.
les rédacteurs peuvent écrire les contenu directement en ligne.
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
23 / 47
Outils du Web 1.5
Langages de scripts :
PHP (PHP Hypertext Preprocessor)
http ://fr2.php.net/
Libre/Gratuit
http ://www.microsoft.com/net/
Propriétaire
Java + JSP (JavaServer Page)
http ://java.sun.com/products/jsp/index.jsp
Libre/Gratuit
Ruby
http ://www.ruby-lang.org/fr/
Libre/Gratuit
Python
http ://www.python.org/
Libre/Gratuit
Perl
http ://www.perl.org/
Libre/Gratuit
ASP (ASP.NET, Active Server Pages DotNet)
(
)
Environnements de développement intégrés (IDE) :
Netbeans
(
)
http ://www.netbeans.org/
Libre/Gratuit
Eclipse
(
)
http ://www.eclipse.org
Libre/Gratuit
ActiveState Komodo
http ://www.activestate.com/komodo_edit/
Propriétaire/Payant et Libre gratuit
Microsoft Visual Studio
http ://msdn.microsoft.com/fr-fr/vstudio/default.aspx
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
24 / 47
Caractéristiques du Web 2.0
Le Web 2.0
16
désigne moins un saut technologique qu’un ensemble de pratiques :
Application riches/Ajax : développement d’interface Web riches proches des applications classiques
(menus, glisser-déposer, remplissage interactif) basées sur des technologies JavaScript, XML.
Netvibes | Deezer | Google Document (compte Google requis)| Stackedit (éditeur Markdown)
Web services et mashup : syndication et agrégation de flux RSS, utilisation de services issus d’autres sites
Web (XML-RPC) ;
Google Maps (source)+Carrefour de Chambourcy (plan d’accès) | Flickr (source) +Au coin du samovar |
Dailymotion & Youtube + Blog de Maitre Eolas
Réseaux sociaux : succès des sites Web participatifs, dévelopement des interactions entre les membres.
Passage d’une équipe rédactionnelle à une rédaction participative (articles/commentaires/forum), d’un
navigation hiérarchisée à une navigation par étiquettes (tags) :
Wikipédia | Tags sur Flickr
Blog, CMS, Wiki prêts à l’emploi : il existe des Systèmes de Gestion de Contenu, complets, prêts à
l’emploi : Drupal, Joomla, Spip, Wordpress, Dotclear, Zope, etc.
16. Article fondateur de Tim O’Reilly : Qu’est ce que le web 2.0 ?
Eric Bellot ()
Technologies du Web
.
.
.
.
.
.
25 / 47
Outils du Web 2.0
HTML, CSS, Ajax (Javascript, XMLHttpRequest, XML), PHP/JSP/.Net/Ruby,
Frameworks Javascripts :
jQuery
http ://jquery.com
Libre/gratuit
Mootools
http ://mootools.net
Libre/Gratuit
Exemples de widgets
Technologies concurentes : Adobe Flash/Adobe Flex, Microsoft Silverlight (statistiques sur les langages côté
client sur W3Tech)
Content Management System (systèmes de gestion de contenu) :
WordPress
http ://www.wordpress-fr.net/
Libre/Gratuit
Exemple de sites Wordpress
Joomla
http ://www.joomla.fr/
Libre/Gratuit
Exemples de sites Joomla
Drupal
http ://drupal.org/
Libre/Gratuit
Exemples de sites Drupal
Spip
http ://www.spip.net/
Libre/gratuit
Statistiques d’utilisation des CMS sur W3Tech
Services en ligne/réseau sociaux et sites mashup :
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
26 / 47
Référencement d’un site Web
Référencement naturel
« Effectuer un référencement naturel c’est réaliser un ensemble d’actions qui permettent à une page
Internet d’apparaître avec une meilleure position dans les moteurs de recherches en tapant une
expression clé. Toujours dans le but d’augmenter la visibilité du site général dans les moteurs de
recherche. »
17
Un choix judicieux des mots clés
Rédaction d’un contenu adapté
Création d’une popularité autour du site
Campagne de publicité (adwords)
Autres termes synonyme de référencement naturel : optimisation pour les engins de recherche (SEO : Search
engine optimisation).
17. Définition du référencement naturel. 2012, Force
referencement.com/referencement-naturel visité le 2012-09-09
Eric Bellot ()
Référencement.
Technologies du Web
en
.
ligne
.
http
://www.force.
.
.
.
27 / 47
Référencement et page Web
L’objectif est de maîtriser les mots-clefs et de les placer dans les endroits qui comptes :
Les URL
Le nom de domaine
Le reste de l’URL
Les balises META
<title> Le contenu de cette balise sera utilisé comme titre du résultat de recherche par les moteurs
META Description. Le contenu de cette balise sera utilisé comme descriptif de la page par les moteurs de
recherche.
META keywords
META robots. permet d’interdire l’indexation de certaines pages (celles qui contiennent des doublons ou qui
sont inintéressante en terme de contenu, comme la page de connexion)
Le contenu de la page
Balises de titraille : <h1>, <h2>, <h3>, etc.
Balises d’accentuation : <em> et <strong>
Balise hypertexte : <a>
Le fichier sitemap.xml. Il contient la liste de toutes les pages du site qui doivent être indexées.
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
28 / 47
Qualités des services et pages Web
Validité du code Les validateurs en ligne permettent de vérifier la conformité des pages Web aux standards.
Les plus utilisés sont ceux du W3C :
HTML Le Markup Validation Service permet de vérifier que le code HTML est conforme.
CSS Le CSS Validation Service permet de vérifier la conformité du code des CSS. Attention : certains
éléments appartenant aux CSS3 sont considérés comme des erreurs par le validateur.
Compatibilité aux navigateurs La disparité des moteurs de rendu des navigateurs, et les faiblesses
d’Internet Explorer en particulier, limitent considérablement les possibilités de mise en oeuvre des
technologies les plus avancées (CSS3, notamment).
Accessibilité et handicap L’accessibilité est la capacité d’un site Web à pouvoir être utilisé par des
personnes handicapées (aveugles ou mal voyants, trouble de la motricité, problème de compréhension).
Plusieurs normes existes : WCAG (Règles pour l’accessibilité des contenus Web), RGAA (Référentiel
Général d’Accessibilité pour les Administrations), Accessiweb. Le projet AcceDe Web propose aux
créateurs de sites Web des fiches simples et compréhensibles sur l’accessibilité.
Opquast et qualité Web Opquast (Open Quality Standard) est un référentiel de bonnes pratiques portant
sur tous les aspects d’un site Web : accessibilité, SEO, conformité, etc. Il représente une synthèse des
différents critères assurant la qualité d’un site Web.
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
29 / 47
Le HTML 5
HTML5 Nouvelle version de l’HTML en cours de développement, mais déjà utilisée.
Audio & Vidéo Il est possible d’intégrer nativement des fichiers audio et vidéo à une page HTML ; mais
les formats audios et vidéos (les codecs) n’ont pas été spécifiés.
Canvas Balise pouvant incorporer un animation graphique (vectorielle et matricielle) dans une page
Web. Elle remplace le Flash (Adobe) dont l’avenir semble compromis.
Nouvelles balises sémantiques <nav>, <header>, <footer>, <article>, <section>, <aside>, etc.
Nouvelles balises de formulaires Il s’agit essentiellement de balises de champs spécialisées : <date>,
<month> , <week>, <time>, <number>, <range>, <email>, <url>, <search>, etc.
Géolocalisation Permet au navigateur d’envoyer les coordonnées géographiques de l’internaute au site
Web.
Exemple de code HTML 5 :
<article>
<header>
< t i m e datetime= ”2011−04−01” pubdate>Posté l e pr e m i e r a v r i l 2011< / t i m e >
<h1>Mon a r t i c l e < / h1>
< / header>
<p>Lorem ipsum d o l o r . < / p>
<footer>
<p>© 2010−2012, Ma compagnie , C r e a t i v e Commons CC−BY−SA< / p>
</ footer>
</ article>
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
30 / 47
Les CSS 3
La nouvelle version des feuilles de styles (CSS 3), est toujours en développement, et, contrairement aux
versions précédentes, est publier sous forme de modules inépendants. Quelques modules déjà fonctionnelles
sur les navigateurs récents :
Coins arrondis, dégradés et ombrage Exemple d’utilisation des coins arrondis (Emploi.ma)
Multicolonnage Permet d’afficher le texte sous forme de colonnes à l’intérieur d’un bloc.
WebFonts Il est maintenant d’embarquer les polices affichée dan sle site et de ne plus dépendre des suels
fontes présente sur l’ordinateur de l’internaute. Quelques services facilitant l’incorpation des polices :
Typekit| Google Fonts | Adobe Edge Web Fonts.
Medias queries Permet de définir des feuilles de styles en fonction du format et des dimensions du
navigateur, permet de réaliser du design Web adaptatif (Responsive Web Design) (Teamhouse Blog).
Transitions Permet d’animer la modification d’une propriété d’une balise (position, couleur, borduer, taille,
etc.) Nombreux effets de transitions sur Stael Borco
Transformations 2D et 3D Permet de transformer des balises en 2D et en 3D (perspective, rotation, miroir,
etc.) Rotations 2D et opacité sur AugerRotation 3D sur Stael Borco
Animations : Permet de créer des animations complexes (étapes, durée, répétition,...) et des les appliquer à
des balises.
Autres nouveautés : Nouveaux sélecteurs de balises
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
31 / 47
Le Web sémantique
Le problème des données sur le Web : il y en a beaucoup, elles sont livrées en vrac. Il est donc très difficile
de trouver les informations pertinentes.
Exemple 1 : comment trouver le texte intégral de Quatrevingt-treize de Victor Hugo ?
Exemple 2 : comment trouver un portrait de Victor Hugo libre de droits ?
Exemple 3 : comment trouver l’adresse postale du W3C ?
Le terme de Web sémantique a été proposé par Tim Berners Lee en 2001 (« The Semantic Web », Scientific
American Magazine, May 17, 2001) pour désigner une évolution du Web qui permettrait aux données
disponibles (contenus, liens) d’être plus facilement utilisables et interprétables automatiquement, par des
agents logiciels. (source Le Web sémantique websemantique_bnf)
Le Web des données
18
est une initiative (i.-e. un groupe de travail) du W3C visant à favoriser la publication
de données structurées sur le Web, non pas sous la forme de silos de données isolés les uns des autres,
mais en les reliant entre elles pour constituer un réseau global d’informations.
18. Le terme de Web de données peut être traduit en anglais par Web of data, ou par Linked
Data..
.
Eric Bellot ()
Technologies du Web
.
.
.
.
32 / 47
L’HTML sémantique
L’HTML est passé de la présentation (HTML) à un langage structuré (XHTML + CSS).
HTML structuré : <h1>Ceci
est un titre</h1>
HTML de présentation : <div><font
size="7"><b>Ceci est un titre</b></font></div>
L’HTML 5 est très sémantique : chaque balise désigne un élément de document :
<section> permet de définir une section/partie de votre page. La plupart des autres balises sémantiques
jouent leur rôle dans la section qui les contient.
<article> permet de définir un article/post/commentaire ou tout autre contenu important de la page.
<aside> permet définir un texte qui se rapporte au sujet de la page/section, mais qui ne fait pas partie du
contenu en lui-même. Par exemple, si vous parlez de l’évolution des pingouins albinos en antarctique,
vous pourrez mettre un <aside> pour donner quelques informations sur ce qu’est la maladie albinos.
<header> vous permettra de définir le header de votre page/section. Par exemple, vous pouvez l’utiliser
pour indiquer la date, l’auteur et d’autres information sur l’<article> dans lequel vous vous trouvez.
<hgroup> est un élément qui rassemble les <h1> à <h6>. Vous pourrez par exemple l’utiliser pour votre
sommaire.
<footer> défini le footer de votre page/article.
<nav> est à utiliser pour la plupart des listes de lien interne à votre site.
<figure> défini une image accompagné de sa légende.
<figcaption> défini la légende de l’image à l’intérieur de <figure>.
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
33 / 47
Le RDF
Le Resource Description Framework est un language permettant de décrire de façon formelle les
caractéristique d’une ressource (Web, mais pas seulement). Le RDF est un formalisme dont l’une des
sérialisations (=incarnation) est le RDF/XML.
Le principe est une description basée sur un triple : sujet | prédicat | objet
Sujet/ Ressource
Prédicat/Propriété
Objet/Valeur
http ://purl.org/456789
title
Quatrevingt-treize
http ://purl.org/456789
author
Victor Hugo
En écriture XML :
<rdf :RDF
x m l n s : r d f = ” h t t p : / / www. w3 . org /1999/02/22 − r d f−syntax−ns# ”
xmlns :dc= ” h t t p : / / p u r l . org / dc / elements / 1 . 1 / ” >
< r d f : D e s c r i p t i o n r d f : a b o u t = ” h t t p : / / p u r l . org / q u a t r e v i n g t−t r e i z e ” >
< d c : t i t l e > Q u a t r e v i n g t−t r e i z e < / d c : t i t l e >
< d c : c r e a t o r > V i c t o r Hugo< / d c : c r e a t o r >
<dc :language>fr_FR< / dc :language>
</ rdf :Description>
< / rdf :RDF>
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
34 / 47
Exemples d’applications RDF
Grâce au RDF, on crée des ontologies, c’est-à-dire des descriptions structurées de catégories de ressources
(= de types de données) :
FOAF Friend of a Friend (« Ami d’ami »)
SIOC Semantically-Interlinked Online Communities (« Communautés en ligne sémantiquement reliées »)
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
35 / 47
Les microformats au sens large
Les microformats au sens large sont des données structurées incorporées au documents HTML. Les
microformats ne modifient pas l’HTML, ils s’appuient sur des conventions de langages basées notamment sur
des attributs standard de l’HTML.
Les données structurées sont mélées aux HTML, elles sont lisibles par les internautes, mais aussi
« parsables » par les moteurs de recherches, et d’autres sytème automatisés.
Exemple d’adresse (adr) :
<div class= ” adr ” >
<div class= ” s t r e e t−address ” >1 , p l a c e de l ’ H ô t e l de V i l l e < / div>
<div class= ” extended−address ” > P o r t e B< / div >
<span class= ” l o c a l i t y ” > P a r i s < / span> ,
<span class= ” r e g i o n ” >IdF < / span>
<span class= ” p o s t a l−code ” >75004< / span>
<div class= ” c o u n t r y−name ” >France< / div >
< / div >
Il existe 3 grandes implémentations des microformats :
le RDFa
le microformat (au sens strict)
le microdata (microdonnée)
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
36 / 47
Le RDFa
Le RDFa est un microformat basé sur le RDF, mais dont l’écriture est basée sur les attributs standard de
l’HTML (RDFa = RDF attributes).
Exemple (repris de « RDFa » in Wikipédia) :
<p xmlns :dc= ” h t t p : / / p u r l . org / dc / elements / 1 . 1 / ”
about= ” h t t p : / / www. example . com / books / w i k i n o m i c s ” >
Dans son d e r n i e r l i v r e
<em p r o p e r t y = ” dc : t i t l e ” >Wikinomics< /em> ,
<span p r o p e r t y = ” dc : c r e a t o r ” >Don T a p s c o t t < / span>
e x p l i q u e l e s p r o f o n d s changements t e c h n o l o g i q u e s , démographiques
e t économiques .
Ce l i v r e a é t é p u b l i é en
<span p r o p e r t y = ” dc : date ” content= ”2006−10−01” > o c t o b r e 2006< / span> .
< / p>
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
37 / 47
Les microformats
Les microformats sont des conventions pour coder des données structurées. Les microformats ne sont pas
validés par les instances officielles du Web, mais certaines structures sont très utilisées sur le Web.
Quelques exemples de microformats :
hCard hCard est un microformat pour publier les détails de contact des personnes, organisations et lieux
(adresse postale ou coordonnées géographiques), en (X)HTML, Atom, RSS, ou XML. hCard est une
représentation conforme du standard vCard (RFC 2426).
XFN Xhtml Friends Network. XFN est un format permettant d’indiquer la relation entre des personnes grâce
à des hyperliens. Très utilisé sur les réseau sociaux.
hCalendar hCalendar est un format destiné à publier des **événements (manisfestation, conférences, fêtes,
anniversaire, rendez-vous, séminaire, etc)** sur le web en utilisant une représentation 1 :1 des propriétés
VEVENT iCalendar (RFC2445) et valeurs en HTML
hReview hReview est un microformat pour construire des *compte rendus, des critiques* à propos de
produits, de services, d’évènements, etc.
hRecipe hRecipe est destiné aux recettes de cuisine.
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
38 / 47
Les microdonnées
Les microdonnées (microdata) sont une spécification WHATWG
19
analogue au RDFa et aux microformats,
qui sont en cours de spécification par le W3C. Les microdonnées sont leformat recommandé par Google. Les
microdonnées définissent des attributs génériques.
itemscope Attribut indiquant que l’élément HTML contient une microdonnée
itemtype L’URL valide d’un vocabulaire qui décrit la donnée et ses propriétés
itemid Identifiant unique de la donnée
itemprop Indique que la balise est une propriété dont le nom est la valeur de l’attribut itemprop et la valeur
est le contenu de la balise. Ce contenu peut-être du texte, une image, une URL faisant référence à un
autre élément
itemref – Propriété qui ne sont pas situées dans l’élement HTML itemscope qui peuvent être associées avec
l’élément via cet attrribut. Il fournit une liste d’itemid d’éléments situés ailleurs dans le document.
Pour plus d’informations : Extraits enrichis (microdonnées, microformats et RDFa) sur le site de Google ;
Google propose aussi un outil de validation des microdatas.
19. Web Hypertext Application Technology Working Group (WHATWG) est une communauté de personnes issues de
grandes entreprises du Web, qui a élaboré des spécifications concurentes à celle du W3C, et que celui-ci a fini par faire
siennes.
.
.
.
.
Eric Bellot ()
Technologies du Web
.
.
39 / 47
Exemple de microformat : hRecipe
Les microdonnées pour décrire une recette (source : Extraits enrichis : recettes) :
name (fn) Nom du plat
recipeType Type de plat : hors-d’œuvre, plat, dessert, etc.
photo Image illustrant le plat en cours de préparation
published Date de publication de la recette, au format de date ISO summary Brève description du plat
review Avis sur le plat. Peut inclure des informations imbriquées concernant les avis.
prepTime Temps nécessaire à la préparation du plat, au format de durée ISO 8601. Peut contenir les éléments enfants
min et max pour spécifier une plage horaire.
cookTime Temps nécessaire à la cuisson du plat, au format de durée ISO 8601. Peut contenir les éléments enfants min et
max pour spécifier une plage horaire.
totalTime (duration) Temps total de préparation et de cuisson du plat, au format de durée ISO 8601. Peut contenir les
éléments enfants min et max pour spécifier une plage horaire.
nutrition Informations relatives aux qualités nutritives de la recette. Peut contenir les éléments enfant suivants :
servingSize, calories, fat, saturatedFat, unsaturatedFat, carbohydrates, sugar, fiber, protein, cholesterol. Ces éléments
ne sont pas inclus de manière explicite dans le microformat hRecipe. Toutefois, Google les reconnaît.
instructions Étapes de préparation du plat. Peut contenir l’élément enfant instruction pour commenter chaque étape.
yield Quantité de nourriture obtenue avec la recette (par exemple, le nombre de personnes ou le nombre de parts)
ingredient Un des ingrédients utilisés dans la recette. Peut contenir les éléments enfants name (nom de l’ingrédient) et
amount (quantité). Utilisez cet élément pour identifier chaque ingrédient.
author Auteur de la recette. Peut inclure des informations imbriquées concernant la personne.
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
40 / 47
Exemple de microformat : une page de recette
Exemple d’une page Web contenant une recette structurée avec hRecipe et codée en syntaxe microformat
(source : « recette du veau Marengo » sur le Journal des femmes).
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
41 / 47
Exemple de microdonnées : code de la page de recette
Extrait HTML de la page de recette. La syntaxe microformat est utilisée : les propriétés de hRecipe sont dans
des classes HTML.
<div class= ” h r e c i p e ” >
<h1 class= ” i t e m ” >Recette <strong class= ” f n ” >Veau marengo< / strong>< / h1>
<span class= ” r e v i e w hreview−aggregate ” ><span class= ” r a t i n g ” ><span class= ” count ” >56< / span>&nbsp ; a v i s
−&nbsp ; Note&nbsp ; :& nbsp ; <span class= ” average ” >4< / span> / <span class= ” b e s t ” >5< / span>< / span>< / span>
<img class= ” photo ” t i t l e = ” Veau marengo ” a l t = ” Veau marengo ” i d = ” 302484 ” name= ” ”
src= ” h t t p : / / i c u . l i n t e r . f r /270/302484/1019786546/ veau−marengo . j p g ” >
<div class= ” r e c e t t e−propose ” >Un c l a s s i q u e r é j o u i s s a n t auquel vous pouvez a j o u t e r f a c i l e m e n t v o t r e
touche de f a n t a i s i e p e r s o n n e l l e . < / div >
<a t i t l e = ” Recette f a c i l e ” h r e f = ” / r e c e t t e−f a c i l e ” class= ” d i f f i c u l t e ” > F a c i l e < / a>
<b class= ” y i e l d ” >Pour <span class= ” y i e l d ” >6< / span> personnes :< / b>
< u l class= ” l i s t e −i n g r e d i e n t s ” >
< l i class= ” i n g r e d i e n t ” > 1 k i l o d ’ épaule en morceaux ou de viande à b l a n q u e t t e < / l i >
< l i class= ” i n g r e d i e n t ” > 4 tomates< / l i >
< l i class= ” i n g r e d i e n t ” > 3 é c h a l o t e s < / l i >
< / ul>
< u l class= ” l i s t e _ t e m p s ” >
< l i ><b> P r é p a r a t i o n :< / b> <span class= ” prepTime ” ><span t i t l e = ”PT10M” class= ” value−t i t l e ” >10
mn< / span>< / span>< / l i >
< l i ><b>Cuisson : < / b> <span class= ” cookTime ” ><span t i t l e = ”PT90M” class= ” value−t i t l e ” >90
< l i ><b>Repos :< / b> 0 mn< / l i >
< l i ><b>Temps t o t a l :< / b> <span class= ” t o t a l T i m e ” ><span t i t l e = ” PT100M ” class= ” value−t i t l e ” >100
< / ul>
<h2 class= ” t i t r e −b l o c ” > P r é p a r a t i o n Veau marengo< / h2>
<p class= ” i n s t r u c t i o n s ” >
Hachez l ’ é c h a l o t e , t a i l l e z l a c a r o t t e en p e t i t s dés , coupez vos tomates en q u a r t i e r s . <br / >
F a i t e s c h a u f f e r l e b e u r r e dans une grande c o c o t t e en f o n t e e t f a i t e s−y
< / p>
.
.
.
.
.
< / div > Eric Bellot ()
Technologies du Web
.
42 / 47
Exemple de microformat : hRecipe dans Google
Exemple d’un résultat de recherche Google affichant une recette (lancer la recherche de « veau marengo »).
On remarque la présence des propriétés d’une recette codée en hRecipe (name, totalTime, summary, etc.)
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
43 / 47
Schémas de microdonnées
Les microdonnées (microdata) sont définies sur le site schema.org. Les « schémas » suivants sont
disponibles :
Oeuvres de création : CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries ...
Objets incorporés : AudioObject, ImageObject, VideoObject
Evènement : Event
Santé : MedicalEntity.
Organismes/institutions : Organization
Personnes : Person
Emplacements : Place, LocalBusiness, Restaurant ...
Commerce : Product, Offer, AggregateOffer
Comptes-rendus : Review, AggregateRating
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
44 / 47
Exemples d’implémentation de Web Sémantique
Knowledge Graph Google intègre à titre d’essai un système de recherche sémantique dans la version
anglaise. Par exemple avec la recherche sur « Pierre-Auguste Rodin ». Voir Eric Bourlout. « Knowledge
Graph : Google fait un pas vers le Web sémantique » in 01net. mai 2012.
Résultats de Google Google présentent les résultats de façon adaptée aux schémas de microdonnées :
Recettes de cuisine Exemple avec la recherche « veau marengo » dans Google.
Produits Exemple de recherche avec « tablette tactile » dans Google Shopping.
Sindice Moteur de recherche sémantique (possibilité de recherche par format de données, par mots-clefs,
etc.). Voir le site Sindice.
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
45 / 47
Problème avec le SQL
Les bases de données relationnelles classiques basées sur le langage SQL ne sont pas adaptées à tous les
aspects Web :
Performance
Pas besoin des systèmes de validation des bases de données relationnelles
Quantité énorme d’informations
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
46 / 47
Les bases de données no-SQL
Un mouvement recherche d’autres méthodes de stockage de données « Not only SQL », le NOSQL. On
distingue :
Bases de données orientées documents, comme http ://en.wikipedia.org/wiki/MongoDB. Elles sont
basée sur une organisation XML ou JSON (tables imbriquées du Javascript)
Base de données orientées graphe. Basée sur le RDF ou des principes similaires. Bigdata développé
par Google est la plus connues de ce type de bases de données.
Bases de données orientées clef-valeur (key-value).
.
Eric Bellot ()
Technologies du Web
.
.
.
.
.
47 / 47

Technologies et outils de création Web

Transcription

Documents pareils

à 13h45 les palmes de m. schutz

PSY-Formation int2015:PSY-Int-Form-06

Eric Bibb - ogo

Télécharger - Eric Frechon

Appartement à vendre Vitrolles FPI GROUP INTERNATIONAL

FOURNITURES POUR LA CLASSE DE C4 (2016/2017) Commande

DU 28 juin au 10 juillet 2015 MADAGASCAR ‐ ÎLE SAINTE MARIE +

Téléchargez le communiqué de presse

Descriptif

CV - LSIS