Interoperabilité (Episode II)

Notes de l'orateur

HTML

Notes de l'orateur

Langage balisé

Notes de l'orateur

“wat?”

Notes de l'orateur

HyperText Markup Language

Notes de l'orateur

WAT?

Notes de l'orateur

Maths

Notes de l'orateur

1 + 3 * 2 - 4 / 5

Notes de l'orateur

1 + [(3 * 2) - 4 / 5]

Notes de l'orateur

(1 + 3) * 2 - (4 / 5)

Notes de l'orateur

INTERDIT !

Notes de l'orateur

(1 + [3) * 2 - (4] / 5)

Notes de l'orateur

Tag == Balise == "Borne"

Notes de l'orateur

<balise> ..... </balise>

Notes de l'orateur

Exemples

<instrument>
    guitare
</instrument>

<personne>
    <prenom>Bruno</prenom>
    <nom>Bord</nom>
</personne>

Notes de l'orateur

Exemple plus évolué

<ordinateur>
    <unitecentrale>
        <ram quantite="1" unite="Go"></ram>
        <ram quantite="1" unite="Go"></ram>
        <ram quantite="1" unite="Go"></ram>
        <ram quantite="1" unite="Go"></ram>
        <cpu />
        <gpu />
        <disques>
            <disque label="c:" main="yes"></disque>
            <disque label="d:"></disque>
        </disques>
    </unitecentrale>
    <ecran />
    <ecran />
</ordinateur>

Notes de l'orateur

Structure

Notes de l'orateur

Document

Déclaration Universelle des Droits de l'Homme Article premier Tous les êtres humains naissent libres et égaux en dignité et en droits. Ils sont doués de raison et de conscience et doivent agir les uns envers les autres dans un esprit de fraternité. Article 2 1.Chacun peut se prévaloir de tous les droits et de toutes les libertés proclamés dans la présente Déclaration, sans distinction aucune, notamment de race, de couleur, de sexe, de langue, de religion, d'opinion politique ou de toute autre opinion, d'origine nationale ou sociale, de fortune, de naissance ou de toute autre situation. 2.De plus, il ne sera fait aucune distinction fondée sur le statut politique, juridique ou international du pays ou du territoire dont une personne est ressortissante, que ce pays ou territoire soit indépendant, sous tutelle, non autonome ou soumis à une limitation quelconque de souveraineté. Article 3 Tout individu a droit à la vie, à la liberté et à la sûreté de sa personne.

Notes de l'orateur

Document structuré

Déclaration Universelle des Droits de l'Homme

Article premier

Tous les êtres humains naissent libres et égaux en dignité et en droits. Ils sont doués de raison et de conscience et doivent agir les uns envers les autres dans un esprit de fraternité.

Article 2

  1. Chacun peut se prévaloir de tous les droits et de toutes les libertés proclamés dans la présente Déclaration, sans distinction aucune, notamment de race, de couleur, de sexe, de langue, de religion, d'opinion politique ou de toute autre opinion, d'origine nationale ou sociale, de fortune, de naissance ou de toute autre situation.

  2. De plus, il ne sera fait aucune distinction fondée sur le statut politique, juridique ou international du pays ou du territoire dont une personne est ressortissante, que ce pays ou territoire soit indépendant, sous tutelle, non autonome ou soumis à une limitation quelconque de souveraineté.

Article 3

Tout individu a droit à la vie, à la liberté et à la sûreté de sa personne.

Notes de l'orateur

HTML

<h1>Déclaration Universelle des Droits de l'Homme</h1>
<h2>Article premier</h2>
<p>Tous les êtres humains naissent <strong>libres et égaux</strong> en dignité et
en droits. Ils sont doués de raison et de conscience et doivent agir les uns
envers les autres dans un esprit de fraternité.</p>
<h2>Article 2</h2>
<ol>
    <li>Chacun peut se prévaloir de tous les droits et de toutes les libertés
    proclamés dans la présente Déclaration, sans distinction aucune, notamment
    de race, de couleur, de sexe, de langue, de religion, d'opinion politique
    ou de toute autre opinion, d'origine nationale ou sociale, de fortune, de
    naissance ou de toute autre situation.</li>
    <li>De plus, il ne sera fait aucune distinction fondée sur le statut politique,
    juridique ou international du pays ou du territoire dont une personne est
    ressortissante, que ce pays ou territoire soit indépendant, sous tutelle,
    non autonome ou soumis à une limitation quelconque de souveraineté.</li>
</ol>
<h2>Article 3</h2>
<p>Tout individu a droit à la <strong>vie</strong>, à la <strong>liberté</strong>
et à la <strong>sûreté</strong> de sa personne.</p>

Notes de l'orateur

Historiquement

Notes de l'orateur

1989: HTML1

Notes de l'orateur

1993: HTML+

Notes de l'orateur

1995: HTML2

Notes de l'orateur

1997: HTML3.2 et HTML4

Notes de l'orateur

HTML 4.0 - strict, transitional

Notes de l'orateur

HTML 4.0 - frameset

Le Cri

Notes de l'orateur

2000: xHTML

Notes de l'orateur

XHTML

Notes de l'orateur

eXtensible HTML

Notes de l'orateur

(r)évolution ?

Notes de l'orateur

Jadis...

Notes de l'orateur

Jadis...

<h1>Different Font Colors</h1>

<p>Font standard "Times New Roman" - taille: 2 - (deux quoi ?) - couleur:
par défaut, donc, noire.</p>

<p><FONT size="4" color="blue"> Font size 4, en couleur bleue</font>
<ul><ul><ul><FONT face="Arial" size=3 color=black>Ce texte (en
    <FONT face="Arial" size='2' color="red">arial</font>) est
    <BIG>décalé</BIG> de trois rangs</FONT>
</ul></ul></ul>

Notes de l'orateur

Jadis encore...

<HTML>
  <HEAD>
    <TITLE>Bad HTML example</TITLE>
<BODY>
<TABLE>
  <TR>
    <TD width=15>
    <TD><FONT size="3"face="Helvetica">
      Based on the "Journey to Windsor" example<BR>
      by Beno&icirc;t Marchal, but made much worse<BR>
    </FONT></TD>
  </TR>
</TABLE>
<CENTER><TABLE border=3>
  <TR><TD>
    <P>
    <FONT size="3" face="Helvetica">See the definition of Tag Soup in
    <A href="http://en.wikipedia.org/wiki/Tag_soup">
      <IMG src="wikipedia-logo.png" border="0" alt="Wikipedia logo">
    </a>
    <P>MAIS C'EST HORRIBLE, AU SECOURS !
 </TD></TR>
</TABLE></CENTER>
</BODY>
</HTML>

Notes de l'orateur

spacer.gif

Notes de l'orateur

“Soupe de tags”

Le Cri

Notes de l'orateur

Une idée...

Notes de l'orateur

Séparer

Notes de l'orateur

Contenu

Notes de l'orateur

Structure

Notes de l'orateur

Style

Notes de l'orateur

Plus de Rigueur

Notes de l'orateur

Rigueur

  • DOCTYPE en tête de document
  • meta-informations
  • balises obligatoires (format strict)
  • fermer toutes les balises de manière valide
  • toutes les balises en minuscules
  • arguments entre guillemets
  • mise en place d'un validateur (w3c),

Notes de l'orateur

Style

  • support des CSS par (presque) tous les navigateurs
  • pages plus légères,
  • plus grande liberté de ton(s)
  • les tableaux pour les données tabulaires

Notes de l'orateur

CSS Zen Garden

Notes de l'orateur

Futur ?

Notes de l'orateur

Logo HTML5

Notes de l'orateur

HTML5 + CSS3

  • Horizon... "bientôt",
  • Déjà disponible (pas partout),
  • Multi-plateforme (mobile),
  • Applications (mobiles),
  • Le web comme une plateforme de développement,
  • Balisage plus épuré,
  • Animations et vidéo sans technologie flash
  • Restez à l'écoute !

Notes de l'orateur

Dive into xHTML (?)

Notes de l'orateur

Doctype

La première ligne du document xHTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(on se rassure, moi aussi je le copie-colle, je ne le connais pas par coeur)

Notes de l'orateur

Document xHTML valide minimum

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ma première page</title>
<meta http-equiv="Content-Type" content="text/html" />
</head>
<body>
<h1>Un joli titre</h1>
<p>Salut l'ESTIA !</p></body>
</html>

Notes de l'orateur

Aperçu

capture erreur de charset

(oups)

Notes de l'orateur

Pourquoi cette erreur de caractères ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ma première page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Un joli titre</h1>
<p>Salut l'ESTIA !</p></body>
</html>

Notes de l'orateur

Assignation du charset

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                                                    -------------

capture charset ok

Notes de l'orateur

<html>

Notes de l'orateur

<html>

Structuré

  • balise <html> contenant...
  • une et une seule entête : <head> ... </head>
  • un et un seul corps : <body> ... </body>

(le tout, correctement balisé, bien sûr...)

Notes de l'orateur

<head>

Notes de l'orateur

<head>

  • Méta-informations (pour le navigateur, surtout),
  • Titre : <title></title>
  • Informations sur le document : <meta /> (plusieurs ?)
  • Javascripts : <script></script>
  • Références aux feuilles de style, RSS, etc : <link />

Notes de l'orateur

<title>

  • Court,
  • Explicite,
  • Pour les gens (bookmarks, résultats des recherche, fenêtre du navigateur),
  • Pour les robots (référencement)

Notes de l'orateur

<meta>

  • informations à destination du navigateur,
  • mots-clés (moteurs de recherche... quoique...)
  • description
  • auteur

Notes de l'orateur

<meta>

<meta name="keywords" content="estia, école, ingénieur, bidart, izarbel,..." />
<meta name="description" content="Page d'accueil de l'école d'ingénieur ESTIA" />
<meta name="author" content="Le gentil webmaster" />
<meta name="robots" content="all" />

Notes de l'orateur

<body>

Notes de l'orateur

<body>

tout ce qui est visible (normalement)

  • textes,
  • hyperliens,
  • images,
  • animations,
  • vidéos,
  • sons,

Notes de l'orateur

Titres

Notes de l'orateur

Titres

<h1>Titre de plus haut niveau</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de plus bas niveau</h6>

Notes de l'orateur

Capital !

Notes de l'orateur

Titres

  • Sémantique
  • Niveau != taille
  • Structurant

(pssst... le vrai référencement se trouve là)

Notes de l'orateur

Paragraphes

<p>Tous les êtres humains naissent libres et égaux en dignité et
en droits.</p>
<p>Ils sont doués de raison et de conscience et doivent agir les uns
envers les autres dans un esprit de fraternité.</p>

Notes de l'orateur

Paragraphes

  • Sémantique
  • Provoque un saut de ligne
  • + un décalage

(attention à ne pas les utiliser pour faire "des lignes vides")

Notes de l'orateur

Images

<p>Mais regardons plutôt :</p>
<img src="img/Plutodog.gif" />

Mais regardons plutôt :

Pluto

Notes de l'orateur

Images et accessibilité

Bof

<p>Mais regardons plutôt :</p>
<img src="img/Plutodog.gif" />

Mieux

<p>Mais regardons plutôt :</p>
<img src="img/Plutodog.gif" alt="Un gif représentant le chien Pluto"/>

bien pour les malvoyants, bien pour les moteurs de recherche

Notes de l'orateur

Hyperliens

Notes de l'orateur

<a>

Notes de l'orateur

Hyperliens

<p>Il est <a href="http://fr.wiktionary.org/wiki/évident">évident</a>
que l'article en <a href="/fr/aide">d'aide</a> est là pour aider votre 
<a href="../navigation/">navigation</a>.<br/>
Mais cette <a href="#ancre">section me paraît intéressante...</a>
</p>
  • chemins avec URL complète
  • URL absolue
  • URL relative
  • Lien avec ancre (cf. plus tard)

Notes de l'orateur

Hyperliens

Notes de l'orateur

Commentaires

<h1>Déclaration Universelle des Droits de l'Homme</h1>
<h2>Article premier</h2>
<p>Tous les êtres humains naissent <strong>libres et égaux</strong> en dignité et
en droits. <!-- Et deux minutes après, c'est plus la même histoire... -->
Ils sont doués de raison et de conscience et doivent agir les uns envers
les autres dans un esprit de fraternité.</p>

Notes de l'orateur

Commentaires

  • + commenter, c'est bien™
  • + non-interprété, donc, "invisibles"
  • - visibles dans le code source renvoyé vers le navigateur
  • - peuvent alourdir la page

Notes de l'orateur

Les identifiants

Notes de l'orateur

id

Notes de l'orateur

Attribut

Notes de l'orateur

Attention : unique !

Notes de l'orateur

Pourquoi des identifiants ?

Notes de l'orateur

Pourquoi des identifiants ?

Sémantique

<h1>Déclaration Universelle des Droits de l'Homme</h1>
<h2>Article premier</h2>
<p id="article-premier">Tous les êtres humains naissent <strong>libres et
égaux</strong> en dignité et en droits. Ils sont doués de raison et de
conscience et doivent agir les uns envers les autres dans un esprit de
fraternité.</p>

Notes de l'orateur

Pourquoi des identifiants ?

Aller vers cette section

<a href="http://monsite.com/#monancre">Lien vers ancre</a>

Notes de l'orateur

Pourquoi des identifiants ?

  • Styles spécifiques (CSS, cf. la suite)
  • Traitements spécifiques (Javascript, cf. la suite++)

Notes de l'orateur

Les classes

Notes de l'orateur

Utilisables plus d'une fois

<p class="article">Tous les êtres humains naissent <strong>libres et
égaux</strong> en dignité et en droits. Ils sont doués de raison et de conscience
et doivent agir les uns envers les autres dans un esprit de fraternité.</p>
...
<ol class="article">
    <li class="item">Chacun peut se prévaloir de tous les droits et de toutes
    les libertés proclamés dans la présente Déclaration, sans distinction
    aucune, notamment de race, de couleur, de sexe, de langue, de religion,
    d'opinion politique ou de toute autre opinion, d'origine nationale ou
    sociale, de fortune, de naissance ou de toute autre situation.</li>
    <li class="item">De plus, il ne sera fait aucune distinction fondée sur
    le statut politique, juridique ou international du pays ou du territoire
    dont une personne est ressortissante, que ce pays ou territoire soit
    indépendant, sous tutelle, non autonome ou soumis à une limitation quelconque
    de souveraineté.</li>
</ol>
...
<p class="article">Tout individu a droit à la <strong>vie</strong>, à la
<strong>liberté</strong> et à la <strong>sûreté</strong> de sa personne.</p>

Notes de l'orateur

Pourquoi des classes ?

Impression de déjà vu

  • Sémantique (aussi)
  • Styles spécifiques (aussi)
  • Traitements spécifiques (aussi)

Notes de l'orateur

Point de vocabulaire

  • classes et aux identifiants en tant que "sélecteurs"
  • Le contexte : Cascading Style Sheets == CSS

Notes de l'orateur

CSS...

Notes de l'orateur

Pause, respiration, questions

Notes de l'orateur

CSS

  • Cascading
  • Style
  • Sheets

en VF: Feuilles de style en cascade

Notes de l'orateur

Objectifs

Notes de l'orateur

1. Esthétique

Notes de l'orateur

2. Lisibilité

Notes de l'orateur

3. Alléger les pages

Notes de l'orateur

Historique

Notes de l'orateur

1996 : CSS (niveau) 1

Notes de l'orateur

1998 : CSS (niveau) 2

Notes de l'orateur

2002 : ça commence à percer

Notes de l'orateur

Pas avant ?

Balkanisation du web

  • Peu des standards
  • Support des navigateurs aléatoire (plateforme, version...)
  • Chacun dans sa norme

Notes de l'orateur

Effort conjoint (x)HTML + CSS

Notes de l'orateur

Cascading ?

Notes de l'orateur

Instructions enchaînées

Notes de l'orateur

Ordre de précédence

Le dernier qui a parlé a raison (sauf...)

Notes de l'orateur

Intégration dans une page

balise : <style>

<style type="text/css">
p {
    color: black;
}
</style>

Notes de l'orateur

Intégration dans une page

mot-clé : @import

<head>
...
<style type="text/css" media="screen">
@import url(style.css);
</style>
</head>

Notes de l'orateur

Intégration dans une page

balise : <link>

<head>
...
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Notes de l'orateur

La structure CSS

selecteur {
    propriete1: valeur1;
    propriete2: valeur2;
}

autre-selecteur {
    propriete3: valeur3;
    propriete4: valeur4;        
}

Notes de l'orateur

Les sélecteurs

  • une balise : p, blockquote
  • une classe : .maclasse
  • un identifiant : #monid
  • une classe sur un élément particulier : p.maclasse
  • ... et quelques mélanges...

Notes de l'orateur

Les sélecteurs

Balise

<head>
<style type="text/css">
p {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
}
</style>
</head>
<body>
<p>Ce paragraphe sera en verdana 12px</p>
<p>D'ailleurs, les autres aussi.</p>
</body>

Notes de l'orateur

Les sélecteurs

Classes CSS

<head>
<style type="text/css">
.article {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
}
</style>
</head>
<body>
<p class="article">Ce paragraphe sera en verdana 12px.</p>
<p>Celui-là, non. Il aura le style standard.</p>
</body>

Notes de l'orateur

Les sélecteurs

Classes et ID

<head>
<style type="text/css">
div.article {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
}
#main {
    color: red;
}
</style>
</head>
<body>
<div class="article">Cette section sera en verdana 12px.</div>
<p class="article">Ce texte sera dans le style standard.</p>
<p id="main">Et moi ? je suis de quelle couleur ?</p>
</body>

Notes de l'orateur

Les sélecteurs (avancé)

Hiérarchique

<head>
<style type="text/css">
div.article p {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
}
#main p {
    color: red;
}
</style>
</head>
<body>
<div class="article"><p>Cette section sera en verdana 12px.</p></div>
<div id="main"><p>Et moi ? je suis de quelle couleur ?</p></div>
</body>

Notes de l'orateur

Les sélecteurs (avancé)

Regroupements

<head>
<style type="text/css">
div, p {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
}
</style>
</head>
<body>
<div>Cette section sera en verdana 12px.</div>
<p>Ce paragraphe aussi</p>
</body>

Notes de l'orateur

Suite dans les TPs

Notes de l'orateur

Pause, respiration, questions

Notes de l'orateur

Le “Web 2.0”

Notes de l'orateur

Tim O'Reilly, 2005

Notes de l'orateur

Web 2.0, un concept

Technique

  • Interfaces enrichies et ergonomiques
  • Mash-ups (Google Maps)
  • Se rapprochent des applications "bureau" (GMail)
  • Designs plus élaborés (coins arrondis)

Notes de l'orateur

Web 2.0, un concept

Philosphique

  • Partage (Wikipedia, Flickr, Youtube & Dailymotion)
  • Communication (les blogs, commentaires)
  • Intercommunication (les flux RSS - Netvibes)
  • "Crowd-Generated" (Digg, Scoopeo, Fuzz)
  • Sémantique (tags)

Notes de l'orateur

Web 2.0

Controverse

  • Flou, et un peu galvaudé
  • “Marketing”
  • Performances (Javascript)

Notes de l'orateur

Web 2.0

Alors, où et quand a eu lieu la vraie rupture ?
D'après moi, et pour résumer, celle-ci s'est produit lors de la création des premiers CMS (Systèmes de gestion de contenu). [..]
C'est en effet à ce moment là que nous avons arrété de développer des pages Web liées entre elles pour créer des systèmes permettant d'administrer des ensembles de pages.
-- Elie Sloïm

Notes de l'orateur

Concrètement...

Notes de l'orateur

Vous êtes des enfants du Web 2.0

Notes de l'orateur

Les Web Services

Notes de l'orateur

Les Web Services

Les services web (en anglais web services) représentent un mécanisme de communication entre applications distantes à travers le réseau internet indépendant de tout langage de programmation et de toute plate-forme d'exécution.

Notes de l'orateur

Les Web Services

  • Dialogue "inter-programmes" (donc interopérabilité),
  • Utilisation du protocole HTTP
  • Formalisme : XML
  • Interfaçage vs. Implantation

Notes de l'orateur

“Web of Things”

Notes de l'orateur

Energie Visible

One of the early prototypes of the Web of Things is the "Energie Visible" project in which sensors capable of monitoring and controlling the energy consumption of household appliances offer a RESTful API to their functionality. This API is then used to create a physical Mashup. -- Wikipedia

Notes de l'orateur

Pachube

Notes de l'orateur

Sans transition...

Notes de l'orateur

“Je veux un site web”

Notes de l'orateur

Ahem

Notes de l'orateur

Se poser les bonnes questions

Contenu ?

  • Quel contenu ?
  • Qui rédige ?
  • Ligne éditoriale ?
  • Quelle(s) langue(s) ?
  • Vidéo ? Photo ?
  • Autoriser les commentaires ? Modération ?
  • Modules sociaux ? (FB, Twitter, etc.)

Notes de l'orateur

Le contenu est fondamental

Notes de l'orateur

Se poser les bonnes questions

Charte graphique

  • Qui fait la charte ?
  • Communication cohérente sur tous les supports
  • Typographie ?
  • Couleurs ?
  • Maquette ?
  • Icônographie / Logo / Identité visuelle ?
  • Respect des contraintes (web)

Notes de l'orateur

Protip: la maquette en HTML

Notes de l'orateur

Se poser les bonnes questions

Réalisation

  • Qui réalise ?
  • Démarche qualité ?
  • Quelle plateforme d'hébergement ?
  • Contraintes techniques liées à l'hébergement ?
  • Quel outil de dév (à façon, CMS, Framework) ?
  • Tierce Maintenance Applicative ?
  • Evolutions

Notes de l'orateur

Protip: “Release early, release often”

Notes de l'orateur

Release early, release often

  • Prototypage,
  • Tests plus tôt, réactivité,
  • Couper court aux mauvaises idées,
  • Une évolution => un sursaut de trafic,
  • Amélioration continue,

Notes de l'orateur

Pause, respiration, questions

Notes de l'orateur

Fin (ouf)

Notes de l'orateur

Merci

Notes de l'orateur

Colophon

Notes de l'orateur