Upload
mastertic
View
1.399
Download
2
Embed Size (px)
DESCRIPTION
Support de cours d'andré Blavier pour le module "Développement Web" du cours de veille technologique en TIC en 2ème master IG HEC-ULg 2008/2009
Citation preview
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
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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)
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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é).
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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)
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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?
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
HTML, XML et XHTMLHTML, 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)
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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>
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
HTML, XML et XHTMLHTML, 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
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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 …
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
XHTMLXHTML<div id="Colonne1"><!-- Contrôle Chaines Top --><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>
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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;}
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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)
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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)
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
XML pour publier de l’informationXML pour publier de l’information
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
XML et les services WebXML et les services Web
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
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
Veille technologique TIC – 2ème Master IG HEC-Ulg 2008/2009
AW
T w
ww
.aw
t.b
e
Questions et réponsesQuestions et réponses
mastertic.blogspot.com
www.delicious.com/mastertic