développement web

Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009

AW

T w

ww

.aw

t.b

e

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


AW

T w

ww

.aw

t.b

e

Pages statiques ... rappelPages 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)


AW

T w

ww

.aw

t.b

e

Pages Web dynamiquesPages 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 statiquehttp://www.monsite.be/accueil.htm

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


AW

T w

ww

.aw

t.b

e

Client – serveur : modèle statiqueClient – serveur : modèle statique

client

Serveur Web

1 - le client demande la page accueil.htm

2 - le serveur transmet la page au 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é).


AW

T w

ww

.aw

t.b

e

Client – serveur : modèle dynamiqueClient – serveur : modèle dynamique

Serveur

d’applications

client

Serveur Web

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


AW

T w

ww

.aw

t.b

e

Pages dynamiques = programmationPages 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)


AW

T w

ww

.aw

t.b

e

Pages dynamiques : pour quoi faire ?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


AW

T w

ww

.aw

t.b

e

Avantages des pages dynamiquesAvantages 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


AW

T w

ww

.aw

t.b

e

Site dynamique : coût de mise en oeuvreSite 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 -> dynamiquemonde du design -> monde de l’informatique


AW

T w

ww

.aw

t.b

e

HTML, XML et XHTMLHTML, 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


AW

T w

ww

.aw

t.b

e

<tr><td width="1" background="images/c8c8c8.gif"><img src="images/spacer.gif" width="1" height="1"></td><td width="254" colspan="3" height="66" class="texte_11" align="left" valign="top"><table height="65" border="0" cellpadding="0" cellspacing="0"><tr><td width="7" background="images/bg1_table_itineraire.gif"><img src="images/spacer.gif" width="7" height="60"></td><td width="115" align="center" valign="middle" background="images/bg1_table_itineraire.gif" class="texte_11">

A quoi ressemble un mauvais code HTML?A quoi ressemble un mauvais code HTML?


AW

T w

ww

.aw

t.b

e


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)


AW

T w

ww

.aw

t.b

e

XML (eXtensible Markup Language)XML (eXtensible Markup Language)

<?xml version="1.0" ?><cours>

<titre>Veille technologique TIC</titre><professeurs>

<titulaire>André Blavier</titulaire><professeur>Damien Jacob</professeur><professeur>Eric Vyncke</professeur>

</professeurs><année>2008/2009</année><étudiants>

<étudiant id="1254"><nom>Tartempion</nom><prénom>Jules</nom>

</étudiant><étudiant> … <étudiant>

</étudiants></cours>


AW

T w

ww

.aw

t.b

e


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


AW

T w

ww

.aw

t.b

eSéparer contenu et présentation, structurer la Séparer contenu et présentation, structurer la

page, respecter les standardspage, respecter les standards

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

Utiliser les balises XHTML adéquates (blocs DIV, 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 …

AW

T w

ww

.aw

t.b

e

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


AW

T w

ww

.aw

t.b

e

CSSCSSA: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;}


AW

T w

ww

.aw

t.b

eDOM: exemple d’un « show/hide » par DOM: exemple d’un « show/hide » par

javascriptjavascript

le référencement naturel que sur le <a href="/web/ebu/index.aspx" id="lex1" onclick="javascript:show('def1');return false;">keyword buying</a><span id="def1" style="display: none" class="lexique"> [ <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ès bon résultat


AW

T w

ww

.aw

t.b

e

Quelle plateforme de développement ?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

Nombreux CMS s’appuyant sur ces technologies

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


AW

T w

ww

.aw

t.b

e

Bases de donnéesBases 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)


AW

T w

ww

.aw

t.b

e

Pages dynamiques et bases de donnéesPages 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)


AW

T w

ww

.aw

t.b

e

… … et XMLet 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


AW

T w

ww

.aw

t.b

e

XML pour publier de l’informationXML pour publier de l’information


AW

T w

ww

.aw

t.b

e

XML et les services WebXML et les services Web


AW

T w

ww

.aw

t.b

e

AJAX (Asynchronous Javascript And XML) 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


AW

T w

ww

.aw

t.b

e

AJAX oui ou non ?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


AW

T w

ww

.aw

t.b

e

Flash ... Le retourFlash ... 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 ... a lancé un concurrent: SilverLight


AW

T w

ww

.aw

t.b

e

Questions et réponsesQuestions et réponses

[email protected]

mastertic.blogspot.com

www.delicious.com/mastertic

développement web

Education