Développer un site Web de qualité plateformes, standards et ergonomie

Pages statiques ... rappel 1995 : début du Web -> multiplication de sites en html pur HTML -> site statique : une et une seule version Modifier un site statique : changer une à une toutes les pages avec un éditeur html (Dreamweaver, FrontPage, Textpad, …): OK pour des sites web de petite taille, au contenu permanent ou rarement mis à jour pas pour des sites dont les informations font l'objet de modifications fréquentes (e-business)

1995 : début du Web -> multiplication de sites en html pur

HTML -> site statique : une et une seule version

Modifier un site statique : changer une à une toutes les pages avec un éditeur html (Dreamweaver, FrontPage, Textpad, …):

OK pour des sites web de petite taille, au contenu permanent ou rarement mis à jour

pas pour des sites dont les informations font l'objet de modifications fréquentes (e-business)

Pages Web dynamiques Page dynamique : construite à la demande (à la volée) par le serveur, en fonction de critères spécifiques Présentation et contenu adaptés de manière interactive , en fonction des produits, des internautes, des langues, etc. Voir URL : page statique http://www.monsite.be/accueil.htm page dynamique http://www.monsite.be/accueil.php?lang=fr Mais! De plus en plus souvent, réécriture d’URL pour optimiser les pages pour les moteurs de recherche

Page dynamique : construite à la demande (à la volée) par le serveur, en fonction de critères spécifiques

Présentation et contenu adaptés de manière interactive , en fonction des produits, des internautes, des langues, etc.

Voir URL :

page statique http://www.monsite.be/accueil.htm

page dynamique http://www.monsite.be/accueil.php?lang=fr Mais! De plus en plus souvent, réécriture d’URL pour optimiser les pages pour les moteurs de recherche

Client – serveur : modèle statique La page s’affiche simplement, le serveur sortant la page telle quelle. Une forme de dynamisme peut être introduite par du javascript (attention à la compatibilité).  Serveur Web 1 - le client demande la page accueil.htm 2 - le serveur transmet la page au client  client

La page s’affiche simplement, le serveur sortant la page telle quelle. Une forme de dynamisme peut être introduite par du javascript (attention à la compatibilité).

Client – serveur : modèle dynamique 1 - le client demande la page accueil.asp 2 - le serveur web sollicite le serveur d’applications (plateforme PHP, .Net, etc.) 3 – le serveur d’application exécute la requête et transmet le résultat au serveur web 4 – le serveur web transmet la page au client  Serveur d’applications  client  Serveur Web

Pages dynamiques = programmation Les pages dynamiques sont mises en œuvre grâce à un langage de programmation qui permet des opérations complexes : instructions conditionnelles, boucles, fonctions de traitement, etc. Le langage de programmation ne remplace pas le html, mais il en produit (actuellement, les browsers ne reconnaissent que ce standard pour afficher des pages web)

Les pages dynamiques sont mises en œuvre grâce à un langage de programmation qui permet des opérations complexes : instructions conditionnelles, boucles, fonctions de traitement, etc.

Le langage de programmation ne remplace pas le html, mais il en produit (actuellement, les browsers ne reconnaissent que ce standard pour afficher des pages web)

Pages dynamiques : pour quoi faire ? Accès aux bases de données Assemblage et transformation de différents morceaux de pages réutilisables en fonction des besoins Reconnaissance de certaines caractéristiques du visiteur (cookie ou session par exemple) Fonctionnalités diverses : formulaires, envoi de mails automatiques, la création de graphiques, la protection de certaines pages par mot de passe, la production de fichiers à divers formats (PDF, texte, …), la gestion automatique des hyperliens, RSS, etc. XML et ses possobilités infinies

Accès aux bases de données

Assemblage et transformation de différents morceaux de pages réutilisables en fonction des besoins

Reconnaissance de certaines caractéristiques du visiteur (cookie ou session par exemple)

Fonctionnalités diverses : formulaires, envoi de mails automatiques, la création de graphiques, la protection de certaines pages par mot de passe, la production de fichiers à divers formats (PDF, texte, …), la gestion automatique des hyperliens, RSS, etc.

XML et ses possobilités infinies

Avantages des pages dynamiques Mises à jour plus aisées du contenu (exemple du journal en ligne) Maintenance du site facilitée (exemple d’un catalogue en ligne) Manipulation et recherche (exemple d’une librairie en ligne) Possibilités illimitées : notamment personnalisation pour : l’entreprise : mieux connaître ses utilisateurs (data mining) l’internaute : environnement adapté à ses habitudes

Mises à jour plus aisées du contenu (exemple du journal en ligne)

Maintenance du site facilitée (exemple d’un catalogue en ligne)

Manipulation et recherche (exemple d’une librairie en ligne)

Possibilités illimitées : notamment personnalisation pour :

l’entreprise : mieux connaître ses utilisateurs (data mining)

l’internaute : environnement adapté à ses habitudes

Site dynamique : coût de mise en oeuvre Le passage des pages statiques vers les pages dynamiques requiert un investissement important: au niveau financier (plus cher qu'un site statique) en ressources humaines et en compétences techniques statique -> dynamique monde du design -> monde de l’informatique

Le passage des pages statiques vers les pages dynamiques requiert un investissement important:

au niveau financier (plus cher qu'un site statique)

en ressources humaines et en compétences techniques

statique -> dynamique

monde du design -> monde de l’informatique

HTML, XML et XHTML HTML : HyperText Markup Language Créé par des scientifiques pour transmettre du texte Enrichi et « dénaturé » pour le rendre attractif Double utilisation ambiguë : mise en page et structuration du contenu très fortement imbriquées (exemple typique des tables) Absence de sens

HTML : HyperText Markup Language

Créé par des scientifiques pour transmettre du texte

Enrichi et « dénaturé » pour le rendre attractif

Double utilisation ambiguë : mise en page et structuration du contenu très fortement imbriquées (exemple typique des tables)

Absence de sens

A quoi ressemble un mauvais code HTML? Démonstration www.infotec.be

Démonstration

www.infotec.be

<tr> <td width=&quot;1&quot; background=&quot;images/c8c8c8.gif&quot;><img src=&quot;images/spacer.gif&quot; width=&quot;1&quot; height=&quot;1&quot;></td> <td width=&quot;254&quot; colspan=&quot;3&quot; height=&quot;66&quot; class=&quot;texte_11&quot; align=&quot;left&quot; valign=&quot;top&quot;> <table height=&quot;65&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;> <tr> <td width=&quot;7&quot; background=&quot;images/bg1_table_itineraire.gif&quot;><img src=&quot;images/spacer.gif&quot; width=&quot;7&quot; height=&quot;60&quot;> </td> <td width=&quot;115&quot; align=&quot;center&quot; valign=&quot;middle&quot; background=&quot;images/bg1_table_itineraire.gif&quot; class=&quot;texte_11&quot;> A quoi ressemble un mauvais code HTML?

<tr>

<td width=&quot;1&quot; background=&quot;images/c8c8c8.gif&quot;><img src=&quot;images/spacer.gif&quot; width=&quot;1&quot; height=&quot;1&quot;></td>

<td width=&quot;254&quot; colspan=&quot;3&quot; height=&quot;66&quot; class=&quot;texte_11&quot; align=&quot;left&quot; valign=&quot;top&quot;>

<table height=&quot;65&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>

<tr>

<td width=&quot;7&quot; background=&quot;images/bg1_table_itineraire.gif&quot;><img src=&quot;images/spacer.gif&quot; width=&quot;7&quot; height=&quot;60&quot;>

</td>

<td width=&quot;115&quot; align=&quot;center&quot; valign=&quot;middle&quot; background=&quot;images/bg1_table_itineraire.gif&quot; class=&quot;texte_11&quot;>

HTML, XML et XHTML XML : eXtensible Markup Language « Le » standard universel Structuration intelligente des données Pour structurer, stocker, échanger , etc. Pérennité des données Web services RSS ( Rich Site Summary ou Really Simple Syndication ) Attention aux outils (édition notamment)

XML : eXtensible Markup Language

« Le » standard universel

Structuration intelligente des données

Pour structurer, stocker, échanger , etc.

Pérennité des données

Web services

RSS ( Rich Site Summary ou Really Simple Syndication )

Attention aux outils (édition notamment)

XML (eXtensible Markup Language) <?xml version=&quot;1.0&quot; ?> <cours> <titre>Veille technologique TIC</titre> <professeurs> <titulaire>André Blavier</titulaire> <professeur>Damien Jacob</professeur> <professeur>Eric Vyncke</professeur> </professeurs> <année>2007/2008</année> <étudiants> <étudiant id=&quot;1254&quot;> <nom>Tartempion</nom> <prénom>Jules</nom> </étudiant> <étudiant> … <étudiant> </étudiants> </cours>

<?xml version=&quot;1.0&quot; ?>

<cours>

<titre>Veille technologique TIC</titre>

<professeurs>

<titulaire>André Blavier</titulaire>

<professeur>Damien Jacob</professeur>

<professeur>Eric Vyncke</professeur>

</professeurs>

<année>2007/2008</année>

<étudiants>

<étudiant id=&quot;1254&quot;>

<nom>Tartempion</nom>

<prénom>Jules</nom>

</étudiant>

<étudiant> … <étudiant>

</étudiants>

</cours>

HTML, XML et XHTML XHTML : eXtensible HyperText Markup Language !!! Le standard de publication Web !!!! Apporter la rigueur et la souplesse d’XML à HTML pour lui rendre sa mission première : présenter l’information XHTML + CSS + DOM: permet de présenter des sites très complexes de manière très rigoureuses (attention aux anciens browsers) Incontournable pour l’accessibilité (browsers pour handicapés, télévision, terminaux mobiles et browsers spécifiques (Opera) Impératif pour les nouveaux sites

XHTML : eXtensible HyperText Markup Language

!!! Le standard de publication Web !!!!

Apporter la rigueur et la souplesse d’XML à HTML pour lui rendre sa mission première : présenter l’information

XHTML + CSS + DOM: permet de présenter des sites très complexes de manière très rigoureuses (attention aux anciens browsers)

Incontournable pour l’accessibilité (browsers pour handicapés, télévision, terminaux mobiles et browsers spécifiques (Opera)

Impératif pour les nouveaux sites

Séparer contenu et présentation, structurer la page, respecter les standards Aucune indication de présentation explicite (polices, couleurs, justification, etc.) Utiliser les balises XHTML adéquates (blocs DIC, tables, listes à puces ou numérotées, titres, définitions, citations, etc.) Respect de règles strictes pour la structuration (balises fermées, minuscules, imbrication correcte, id, alt, etc.) Respect des standards (couleurs, etc.) -> Demander des preuves de l’expertise du développeur …

Aucune indication de présentation explicite (polices, couleurs, justification, etc.)

Utiliser les balises XHTML adéquates (blocs DIC, tables, listes à puces ou numérotées, titres, définitions, citations, etc.)

Respect de règles strictes pour la structuration (balises fermées, minuscules, imbrication correcte, id, alt, etc.)

Respect des standards (couleurs, etc.)

-> Demander des preuves de l’expertise du développeur …

A quoi ressemble un mauvais code HTML? Démonstration www.awt.be

Démonstration

www.awt.be

XHTML <div id=&quot;Colonne1&quot;> <!-- Contrôle Chaines Top --> <div id=&quot;Chaines&quot;> <div class=&quot;UneChaine&quot;><img src=&quot;/images/adm/IconeAwt.gif&quot; alt=&quot;L'AWT et ses missions&quot; /> <h2><a href=&quot;/web/awt/index.aspx&quot;>L'AWT et ses missions</a></h2> <p>Présentation, missions, photos, ...</p> </div> <div class=&quot;UneChaine&quot;> <img src=&quot;/images/adm/IconeGov.gif&quot; alt=&quot;Administration et e-gouvernement&quot; /> <h2><a href=&quot;/web/gov/index.aspx&quot;>Administration et e-gouvernement</a></h2> <p>Easi-Wal, communes, actualit&eacute;s, ...</p> </div>

<div id=&quot;Colonne1&quot;>

<!-- Contrôle Chaines Top -->

<div id=&quot;Chaines&quot;>

<div class=&quot;UneChaine&quot;><img src=&quot;/images/adm/IconeAwt.gif&quot; alt=&quot;L'AWT et ses missions&quot; />

<h2><a href=&quot;/web/awt/index.aspx&quot;>L'AWT et ses missions</a></h2>

<p>Présentation, missions, photos, ...</p>

</div>

<div class=&quot;UneChaine&quot;> <img src=&quot;/images/adm/IconeGov.gif&quot; alt=&quot;Administration et e-gouvernement&quot; />

<h2><a href=&quot;/web/gov/index.aspx&quot;>Administration et e-gouvernement</a></h2>

<p>Easi-Wal, communes, actualit&eacute;s, ...</p>

</div>

CSS A:VISITED { color:Purple; text-decoration:underline; } ul{ list-style:none; margin:0; padding:0 0 0 0; } li{ padding:0 0 5px 0; } a img { border:none; }

A:VISITED {

color:Purple;

text-decoration:underline;

}

ul{

list-style:none;

margin:0;

padding:0 0 0 0;

}

li{

padding:0 0 5px 0;

}

a img {

border:none;

}

DOM: exemple d’un « show/hide » par javascript le r&eacute;f&eacute;rencement naturel que sur le <a href=&quot;/web/ebu/index.aspx&quot; id=&quot;lex1&quot; onclick=&quot;javascript:show(' def1 ');return false;&quot;>keyword buying</a> <span id=&quot; def1 &quot; style=&quot;display: none&quot; class=&quot;lexique&quot;> [ <strong>keyword buying</strong> / Achat de mot-clé, Search Engine Advertising, Pay For Listing. Technique publicitaire permettant d'afficher une annonce publicitaire textuelle en fonction d'un mot-clé tapé par l'utilisateur d'un moteur de recherche ] </span> . Le premier donne un tr&egrave;s bon r&eacute;sultat

le r&eacute;f&eacute;rencement naturel que sur le <a href=&quot;/web/ebu/index.aspx&quot; id=&quot;lex1&quot; onclick=&quot;javascript:show(' def1 ');return false;&quot;>keyword buying</a> <span id=&quot; def1 &quot; style=&quot;display: none&quot; class=&quot;lexique&quot;> [ <strong>keyword buying</strong> / Achat de mot-clé, Search Engine Advertising, Pay For Listing. Technique publicitaire permettant d'afficher une annonce publicitaire textuelle en fonction d'un mot-clé tapé par l'utilisateur d'un moteur de recherche ] </span> . Le premier donne un tr&egrave;s bon r&eacute;sultat

Quelle plateforme de développement ? Eviter l’exotisme -> solutions reconnues : Java/JSP (Java Server Pages) ->.jsp, .shtml, etc. PHP ( Hypertext Preprocessor) -> .php, .phtml, etc. ASP.net (Microsoft) -> .aspx Choisir un intermédiaire de qualité et demander des références. Fixer le contour exact de la mission

Eviter l’exotisme -> solutions reconnues :

Java/JSP (Java Server Pages) ->.jsp, .shtml, etc.

PHP ( Hypertext Preprocessor) -> .php, .phtml, etc.

ASP.net (Microsoft) -> .aspx

Choisir un intermédiaire de qualité et demander des références. Fixer le contour exact de la mission

Bases de données Base de données : collection de données enregistrées ensemble, sans redondances pénibles ou inutiles, pour servir plusieurs applications. Les données y sont enregistrées de telle manière qu'elles soient indépendantes des programmes qui les utilisent Opérations : lecture, suppression, déplacement, tri, comparaison, etc. SGBD dominant = modèle relationnel (tables à deux dimensions, les lignes (enregistrements) et les colonnes SQL (Structured Query Language)

Base de données : collection de données enregistrées ensemble, sans redondances pénibles ou inutiles, pour servir plusieurs applications. Les données y sont enregistrées de telle manière qu'elles soient indépendantes des programmes qui les utilisent

Opérations : lecture, suppression, déplacement, tri, comparaison, etc.

SGBD dominant = modèle relationnel (tables à deux dimensions, les lignes (enregistrements) et les colonnes

SQL (Structured Query Language)

Pages dynamiques et bases de données Pour des applications web et e-business : bases de données indispensables Publier une base de données sur le Web : 3 composants : la base de données (le plus souvent un serveur) un serveur Web un middleware ou serveur d'applications (qui gère les pages dynamiques)

Pour des applications web et e-business : bases de données indispensables

Publier une base de données sur le Web : 3 composants :

la base de données (le plus souvent un serveur)

un serveur Web

un middleware ou serveur d'applications (qui gère les pages dynamiques)

… et XML Stocker de l’information Publier de l’information Echanger de l’information et faire interopérer des applications Développer des services Web Etc

Stocker de l’information

Publier de l’information

Echanger de l’information et faire interopérer des applications

Développer des services Web

Etc

XML pour publier de l’information

XML et les services Web

AJAX (Asynchronous Javascript And XML) Développement web basé sur Javascript pour effectuer des requêtes Web sur une page sans la recharger: Modèle dynamique classique: succession de requêtes/réponses AJAX: modifie uniquement la partie de la page qui le nécessite en créant une requête HTTP locale et en modifiant cette partie suivant le résultat de la requête HTTP AJAX = modèle de développement Web basé sur: (X)HTML et CSS: présentation visuelle DOM (Document Object Model): page découpée en objets Javascript et en particulier l'objet XMLHTTPRequest pour manipuler des requêtes et des réponses

Développement web basé sur Javascript pour effectuer des requêtes Web sur une page sans la recharger:

Modèle dynamique classique: succession de requêtes/réponses

AJAX: modifie uniquement la partie de la page qui le nécessite en créant une requête HTTP locale et en modifiant cette partie suivant le résultat de la requête HTTP

AJAX = modèle de développement Web basé sur:

(X)HTML et CSS: présentation visuelle

DOM (Document Object Model): page découpée en objets

Javascript et en particulier l'objet XMLHTTPRequest pour manipuler des requêtes et des réponses

AJAX oui ou non ? Avantages: Interface réactive et intuitive Rapidité d'exécution (seules les données à modifier dans la page sont échangées selon le protocole HTTP) Meilleure ergonomie (contrôles en temps réel dans les formulaires par exemple) Au coeur du Web 2.0 Inconvénients: Réservé aux browsers de dernière génération Indexation par les moteurs de recherche ??? Sécurité des données présentes sur le poste client ??? Exemple typique: www.netvibes.com

Avantages:

Interface réactive et intuitive

Rapidité d'exécution (seules les données à modifier dans la page sont échangées selon le protocole HTTP)

Meilleure ergonomie (contrôles en temps réel dans les formulaires par exemple)

Au coeur du Web 2.0

Inconvénients:

Réservé aux browsers de dernière génération

Indexation par les moteurs de recherche ???

Sécurité des données présentes sur le poste client ???

Exemple typique: www.netvibes.com

AJAX en action Démonstration

Démonstration

Flash ... Le retour Flash permet le développement d’animations multimédias pour le Web, des CD, des DVD, etc. Créé par Macromedia depuis racheté par Adobe: Fichier exécutable grâce à un plug-in sur le poste client (98% des ordinateurs dans le monde) Problème: souvent très mal utilisé (logo qui tourne, animation sans intérêt, ect.) -> skip intro ! Succès considérable et aujourd’hui véritable plateforme de développement intégrant notamment des fonctionnalités XML et un langage (action script). Situation de monopole, notamment dans la publicité, le Web 2.0, etc. Microsoft ... lance un concurrent: SilverLight

Flash permet le développement d’animations multimédias pour le Web, des CD, des DVD, etc. Créé par Macromedia depuis racheté par Adobe:

Fichier exécutable grâce à un plug-in sur le poste client (98% des ordinateurs dans le monde)

Problème: souvent très mal utilisé (logo qui tourne, animation sans intérêt, ect.) -> skip intro !

Succès considérable et aujourd’hui véritable plateforme de développement intégrant notamment des fonctionnalités XML et un langage (action script).

Situation de monopole, notamment dans la publicité, le Web 2.0, etc.

Microsoft ... lance un concurrent: SilverLight

Questions et réponses [email_address] mastertic.blogspot.com www.delicious.com/mastertic

[email_address]

mastertic.blogspot.com

www.delicious.com/mastertic