Your SlideShare is downloading. ×
0
Développer un site Web de qualité plateformes, standards et ergonomie
Pages statiques ... rappel <ul><li>1995 : début du Web ->  multiplication de sites en html pur </li></ul><ul><li>HTML -> s...
Pages Web dynamiques <ul><li>Page dynamique :  construite à la demande (à la volée) par le serveur, en fonction de critère...
Client – serveur : modèle statique <ul><li>La page s’affiche simplement, le serveur sortant la page telle quelle. Une form...
Client – serveur : modèle dynamique 1  -  le client demande la page accueil.asp 2  -  le serveur web sollicite le serveur ...
Pages dynamiques = programmation <ul><li>Les pages dynamiques sont mises en œuvre grâce à un langage de programmation  qui...
Pages dynamiques : pour quoi faire ? <ul><li>Accès aux bases de données   </li></ul><ul><li>Assemblage et transformation  ...
Avantages des pages dynamiques <ul><li>Mises à jour plus aisées  du contenu (exemple du journal en ligne) </li></ul><ul><l...
Site dynamique : coût de mise en oeuvre <ul><li>Le passage des pages statiques vers les pages dynamiques requiert un inves...
HTML, XML et XHTML <ul><li>HTML : HyperText Markup Language </li></ul><ul><ul><li>Créé par des scientifiques pour transmet...
A quoi ressemble un mauvais code HTML? <ul><li>Démonstration </li></ul><ul><li>www.infotec.be   </li></ul>
<ul><li><tr> </li></ul><ul><li><td width=&quot;1&quot; background=&quot;images/c8c8c8.gif&quot;><img src=&quot;images/spac...
HTML, XML et XHTML <ul><li>XML : eXtensible Markup Language </li></ul><ul><ul><li>« Le » standard universel   </li></ul></...
XML (eXtensible Markup Language) <ul><li><?xml version=&quot;1.0&quot; ?> </li></ul><ul><li><cours> </li></ul><ul><li><tit...
HTML, XML et XHTML <ul><li>XHTML : eXtensible HyperText Markup Language   </li></ul><ul><li>!!! Le standard de publication...
Séparer contenu et présentation, structurer la page, respecter les standards <ul><ul><li>Aucune indication de présentation...
A quoi ressemble un mauvais code HTML? <ul><li>Démonstration </li></ul><ul><li>www.awt.be   </li></ul>
XHTML <ul><li><div id=&quot;Colonne1&quot;> </li></ul><ul><li><!-- Contrôle Chaines Top --> </li></ul><ul><li><div id=&quo...
CSS <ul><li>A:VISITED { </li></ul><ul><li>color:Purple; </li></ul><ul><li>text-decoration:underline; </li></ul><ul><li>} <...
DOM: exemple d’un « show/hide » par javascript <ul><li>le r&eacute;f&eacute;rencement naturel que sur le <a href=&quot;/we...
Quelle plateforme de développement ? <ul><li>Eviter l’exotisme -> solutions reconnues : </li></ul><ul><ul><li>Java/JSP  (J...
Bases de données <ul><li>Base de données :  collection de données enregistrées ensemble, sans redondances pénibles ou inut...
Pages dynamiques et bases de données <ul><li>Pour des applications web et e-business :  bases de données  indispensables <...
… et XML <ul><li>Stocker  de l’information </li></ul><ul><li>Publier  de l’information </li></ul><ul><li>Echanger  de l’in...
XML pour publier de l’information
XML et les services Web
AJAX (Asynchronous Javascript And XML)  <ul><li>Développement web basé sur Javascript pour effectuer des requêtes Web sur ...
AJAX oui ou non ? <ul><li>Avantages:   </li></ul><ul><ul><li>Interface réactive et intuitive </li></ul></ul><ul><ul><li>Ra...
AJAX en action <ul><li>Démonstration </li></ul>
Flash ... Le retour <ul><li>Flash permet le développement d’animations multimédias  pour le Web, des CD, des DVD, etc. Cré...
Questions et réponses <ul><li>[email_address] </li></ul><ul><li>mastertic.blogspot.com </li></ul><ul><li>www.delicious.com...
Upcoming SlideShare
Loading in...5
×

Développement Web

2,010

Published on

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

Published in: Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,010
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
146
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Développement Web"

  1. 1. Développer un site Web de qualité plateformes, standards et ergonomie
  2. 2. Pages statiques ... rappel <ul><li>1995 : début du Web -> multiplication de sites en html pur </li></ul><ul><li>HTML -> site statique : une et une seule version </li></ul><ul><li>Modifier un site statique : changer une à une toutes les pages avec un éditeur html (Dreamweaver, FrontPage, Textpad, …): </li></ul><ul><ul><li>OK pour des sites web de petite taille, au contenu permanent ou rarement mis à jour </li></ul></ul><ul><ul><li>pas pour des sites dont les informations font l'objet de modifications fréquentes (e-business) </li></ul></ul>
  3. 3. Pages Web dynamiques <ul><li>Page dynamique : construite à la demande (à la volée) par le serveur, en fonction de critères spécifiques </li></ul><ul><li>Présentation et contenu adaptés de manière interactive , en fonction des produits, des internautes, des langues, etc. </li></ul><ul><li>Voir URL : </li></ul><ul><ul><li>page statique http://www.monsite.be/accueil.htm </li></ul></ul><ul><ul><li>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 </li></ul></ul>
  4. 4. Client – serveur : modèle statique <ul><li>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é). </li></ul> Serveur Web 1 - le client demande la page accueil.htm 2 - le serveur transmet la page au client  client
  5. 5. 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
  6. 6. Pages dynamiques = programmation <ul><li>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. </li></ul><ul><li>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) </li></ul>
  7. 7. Pages dynamiques : pour quoi faire ? <ul><li>Accès aux bases de données </li></ul><ul><li>Assemblage et transformation de différents morceaux de pages réutilisables en fonction des besoins </li></ul><ul><li>Reconnaissance de certaines caractéristiques du visiteur (cookie ou session par exemple) </li></ul><ul><li>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. </li></ul><ul><li>XML et ses possobilités infinies </li></ul>
  8. 8. Avantages des pages dynamiques <ul><li>Mises à jour plus aisées du contenu (exemple du journal en ligne) </li></ul><ul><li>Maintenance du site facilitée (exemple d’un catalogue en ligne) </li></ul><ul><li>Manipulation et recherche (exemple d’une librairie en ligne) </li></ul><ul><li>Possibilités illimitées : notamment personnalisation pour : </li></ul><ul><ul><li>l’entreprise : mieux connaître ses utilisateurs (data mining) </li></ul></ul><ul><ul><li>l’internaute : environnement adapté à ses habitudes </li></ul></ul>
  9. 9. Site dynamique : coût de mise en oeuvre <ul><li>Le passage des pages statiques vers les pages dynamiques requiert un investissement important: </li></ul><ul><ul><li>au niveau financier (plus cher qu'un site statique) </li></ul></ul><ul><ul><li>en ressources humaines et en compétences techniques </li></ul></ul><ul><li>statique -> dynamique </li></ul><ul><li>monde du design -> monde de l’informatique </li></ul>
  10. 10. HTML, XML et XHTML <ul><li>HTML : HyperText Markup Language </li></ul><ul><ul><li>Créé par des scientifiques pour transmettre du texte </li></ul></ul><ul><ul><li>Enrichi et « dénaturé » pour le rendre attractif </li></ul></ul><ul><ul><li>Double utilisation ambiguë : mise en page et structuration du contenu très fortement imbriquées (exemple typique des tables) </li></ul></ul><ul><ul><li>Absence de sens </li></ul></ul>
  11. 11. A quoi ressemble un mauvais code HTML? <ul><li>Démonstration </li></ul><ul><li>www.infotec.be </li></ul>
  12. 12. <ul><li><tr> </li></ul><ul><li><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> </li></ul><ul><li><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;> </li></ul><ul><li><table height=&quot;65&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><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;> </li></ul><ul><li></td> </li></ul><ul><li><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;> </li></ul>A quoi ressemble un mauvais code HTML?
  13. 13. HTML, XML et XHTML <ul><li>XML : eXtensible Markup Language </li></ul><ul><ul><li>« Le » standard universel </li></ul></ul><ul><ul><li>Structuration intelligente des données </li></ul></ul><ul><ul><li>Pour structurer, stocker, échanger , etc. </li></ul></ul><ul><ul><li>Pérennité des données </li></ul></ul><ul><ul><li>Web services </li></ul></ul><ul><ul><li>RSS ( Rich Site Summary ou Really Simple Syndication ) </li></ul></ul><ul><ul><li>Attention aux outils (édition notamment) </li></ul></ul>
  14. 14. XML (eXtensible Markup Language) <ul><li><?xml version=&quot;1.0&quot; ?> </li></ul><ul><li><cours> </li></ul><ul><li><titre>Veille technologique TIC</titre> </li></ul><ul><li><professeurs> </li></ul><ul><li><titulaire>André Blavier</titulaire> </li></ul><ul><li><professeur>Damien Jacob</professeur> </li></ul><ul><li><professeur>Eric Vyncke</professeur> </li></ul><ul><li></professeurs> </li></ul><ul><li><année>2007/2008</année> </li></ul><ul><li><étudiants> </li></ul><ul><li><étudiant id=&quot;1254&quot;> </li></ul><ul><li><nom>Tartempion</nom> </li></ul><ul><li><prénom>Jules</nom> </li></ul><ul><li></étudiant> </li></ul><ul><li><étudiant> … <étudiant> </li></ul><ul><li></étudiants> </li></ul><ul><li></cours> </li></ul>
  15. 15. HTML, XML et XHTML <ul><li>XHTML : eXtensible HyperText Markup Language </li></ul><ul><li>!!! Le standard de publication Web !!!! </li></ul><ul><ul><li>Apporter la rigueur et la souplesse d’XML à HTML pour lui rendre sa mission première : présenter l’information </li></ul></ul><ul><ul><li>XHTML + CSS + DOM: permet de présenter des sites très complexes de manière très rigoureuses (attention aux anciens browsers) </li></ul></ul><ul><ul><li>Incontournable pour l’accessibilité (browsers pour handicapés, télévision, terminaux mobiles et browsers spécifiques (Opera) </li></ul></ul><ul><ul><li>Impératif pour les nouveaux sites </li></ul></ul>
  16. 16. Séparer contenu et présentation, structurer la page, respecter les standards <ul><ul><li>Aucune indication de présentation explicite (polices, couleurs, justification, etc.) </li></ul></ul><ul><ul><li>Utiliser les balises XHTML adéquates (blocs DIC, tables, listes à puces ou numérotées, titres, définitions, citations, etc.) </li></ul></ul><ul><ul><li>Respect de règles strictes pour la structuration (balises fermées, minuscules, imbrication correcte, id, alt, etc.) </li></ul></ul><ul><ul><li>Respect des standards (couleurs, etc.) </li></ul></ul><ul><li>-> Demander des preuves de l’expertise du développeur … </li></ul>
  17. 17. A quoi ressemble un mauvais code HTML? <ul><li>Démonstration </li></ul><ul><li>www.awt.be </li></ul>
  18. 18. XHTML <ul><li><div id=&quot;Colonne1&quot;> </li></ul><ul><li><!-- Contrôle Chaines Top --> </li></ul><ul><li><div id=&quot;Chaines&quot;> </li></ul><ul><li><div class=&quot;UneChaine&quot;><img src=&quot;/images/adm/IconeAwt.gif&quot; alt=&quot;L'AWT et ses missions&quot; /> </li></ul><ul><li><h2><a href=&quot;/web/awt/index.aspx&quot;>L'AWT et ses missions</a></h2> </li></ul><ul><li><p>Présentation, missions, photos, ...</p> </li></ul><ul><li></div> </li></ul><ul><li><div class=&quot;UneChaine&quot;> <img src=&quot;/images/adm/IconeGov.gif&quot; alt=&quot;Administration et e-gouvernement&quot; /> </li></ul><ul><li><h2><a href=&quot;/web/gov/index.aspx&quot;>Administration et e-gouvernement</a></h2> </li></ul><ul><li><p>Easi-Wal, communes, actualit&eacute;s, ...</p> </li></ul><ul><li></div> </li></ul>
  19. 19. CSS <ul><li>A:VISITED { </li></ul><ul><li>color:Purple; </li></ul><ul><li>text-decoration:underline; </li></ul><ul><li>} </li></ul><ul><li>ul{ </li></ul><ul><li>list-style:none; </li></ul><ul><li>margin:0; </li></ul><ul><li>padding:0 0 0 0; </li></ul><ul><li>} </li></ul><ul><li>li{ </li></ul><ul><li>padding:0 0 5px 0; </li></ul><ul><li>} </li></ul><ul><li>a img { </li></ul><ul><li>border:none; </li></ul><ul><li>} </li></ul>
  20. 20. DOM: exemple d’un « show/hide » par javascript <ul><li>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 </li></ul>
  21. 21. Quelle plateforme de développement ? <ul><li>Eviter l’exotisme -> solutions reconnues : </li></ul><ul><ul><li>Java/JSP (Java Server Pages) ->.jsp, .shtml, etc. </li></ul></ul><ul><ul><li>PHP ( Hypertext Preprocessor) -> .php, .phtml, etc. </li></ul></ul><ul><ul><li>ASP.net (Microsoft) -> .aspx </li></ul></ul><ul><li>Choisir un intermédiaire de qualité et demander des références. Fixer le contour exact de la mission </li></ul>
  22. 22. Bases de données <ul><li>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 </li></ul><ul><li>Opérations : lecture, suppression, déplacement, tri, comparaison, etc. </li></ul><ul><li>SGBD dominant = modèle relationnel (tables à deux dimensions, les lignes (enregistrements) et les colonnes </li></ul><ul><li>SQL (Structured Query Language) </li></ul>
  23. 23. Pages dynamiques et bases de données <ul><li>Pour des applications web et e-business : bases de données indispensables </li></ul><ul><li>Publier une base de données sur le Web : 3 composants : </li></ul><ul><ul><li>la base de données (le plus souvent un serveur) </li></ul></ul><ul><ul><li>un serveur Web </li></ul></ul><ul><ul><li>un middleware ou serveur d'applications (qui gère les pages dynamiques) </li></ul></ul>
  24. 24. … et XML <ul><li>Stocker de l’information </li></ul><ul><li>Publier de l’information </li></ul><ul><li>Echanger de l’information et faire interopérer des applications </li></ul><ul><li>Développer des services Web </li></ul><ul><li>Etc </li></ul>
  25. 25. XML pour publier de l’information
  26. 26. XML et les services Web
  27. 27. AJAX (Asynchronous Javascript And XML) <ul><li>Développement web basé sur Javascript pour effectuer des requêtes Web sur une page sans la recharger: </li></ul><ul><ul><li>Modèle dynamique classique: succession de requêtes/réponses </li></ul></ul><ul><ul><li>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 </li></ul></ul><ul><li>AJAX = modèle de développement Web basé sur: </li></ul><ul><ul><li>(X)HTML et CSS: présentation visuelle </li></ul></ul><ul><ul><li>DOM (Document Object Model): page découpée en objets </li></ul></ul><ul><ul><li>Javascript et en particulier l'objet XMLHTTPRequest pour manipuler des requêtes et des réponses </li></ul></ul>
  28. 28. AJAX oui ou non ? <ul><li>Avantages: </li></ul><ul><ul><li>Interface réactive et intuitive </li></ul></ul><ul><ul><li>Rapidité d'exécution (seules les données à modifier dans la page sont échangées selon le protocole HTTP) </li></ul></ul><ul><ul><li>Meilleure ergonomie (contrôles en temps réel dans les formulaires par exemple) </li></ul></ul><ul><ul><li>Au coeur du Web 2.0 </li></ul></ul><ul><li>Inconvénients: </li></ul><ul><ul><li>Réservé aux browsers de dernière génération </li></ul></ul><ul><ul><li>Indexation par les moteurs de recherche ??? </li></ul></ul><ul><ul><li>Sécurité des données présentes sur le poste client ??? </li></ul></ul><ul><li>Exemple typique: www.netvibes.com </li></ul>
  29. 29. AJAX en action <ul><li>Démonstration </li></ul>
  30. 30. Flash ... Le retour <ul><li>Flash permet le développement d’animations multimédias pour le Web, des CD, des DVD, etc. Créé par Macromedia depuis racheté par Adobe: </li></ul><ul><ul><li>Fichier exécutable grâce à un plug-in sur le poste client (98% des ordinateurs dans le monde) </li></ul></ul><ul><ul><li>Problème: souvent très mal utilisé (logo qui tourne, animation sans intérêt, ect.) -> skip intro ! </li></ul></ul><ul><li>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). </li></ul><ul><li>Situation de monopole, notamment dans la publicité, le Web 2.0, etc. </li></ul><ul><li>Microsoft ... lance un concurrent: SilverLight </li></ul>
  31. 31. Questions et réponses <ul><li>[email_address] </li></ul><ul><li>mastertic.blogspot.com </li></ul><ul><li>www.delicious.com/mastertic </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×