SlideShare une entreprise Scribd logo
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)
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
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
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)
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
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
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
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
A quoi ressemble un mauvais code HTML? 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?
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) <?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
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 …
A quoi ressemble un mauvais code HTML? 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>
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; }
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
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
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)
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)
… 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
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
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
AJAX en action 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
Questions et réponses [email_address] mastertic.blogspot.com www.delicious.com/mastertic

Contenu connexe

En vedette

T2 m mondeca vfinale
T2 m mondeca vfinaleT2 m mondeca vfinale
T2 m mondeca vfinale
mondeca
 
Web Standards and Accessibility
Web Standards and AccessibilityWeb Standards and Accessibility
Web Standards and Accessibility
Karl Dawson
 
Prez t2 m bernard odier
Prez t2 m  bernard odierPrez t2 m  bernard odier
Prez t2 m bernard odier
Bernard Odier
 
Injecting Clock in Java
Injecting Clock in JavaInjecting Clock in Java
Injecting Clock in Java
Daniel Sobral
 
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesLes Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
Tristan Nitot
 
Le Web est la plateforme - #Frenchtech
Le Web est la plateforme - #FrenchtechLe Web est la plateforme - #Frenchtech
Le Web est la plateforme - #Frenchtech
Tristan Nitot
 

En vedette (6)

T2 m mondeca vfinale
T2 m mondeca vfinaleT2 m mondeca vfinale
T2 m mondeca vfinale
 
Web Standards and Accessibility
Web Standards and AccessibilityWeb Standards and Accessibility
Web Standards and Accessibility
 
Prez t2 m bernard odier
Prez t2 m  bernard odierPrez t2 m  bernard odier
Prez t2 m bernard odier
 
Injecting Clock in Java
Injecting Clock in JavaInjecting Clock in Java
Injecting Clock in Java
 
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesLes Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
 
Le Web est la plateforme - #Frenchtech
Le Web est la plateforme - #FrenchtechLe Web est la plateforme - #Frenchtech
Le Web est la plateforme - #Frenchtech
 

Similaire à Développement Web

Google Web Toolkit 1.5 Presentation Web Creative Common
Google Web Toolkit 1.5 Presentation Web Creative CommonGoogle Web Toolkit 1.5 Presentation Web Creative Common
Google Web Toolkit 1.5 Presentation Web Creative Common
Stéphane Liétard
 
Yass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxYass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptx
yassinesouli2
 
Publication de documents sur le Web
Publication de documents sur le WebPublication de documents sur le Web
Publication de documents sur le Web
Saïd Radhouani
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
Horacio Gonzalez
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
Horacio Gonzalez
 
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
ssuser1a62e1
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
Microsoft Technet France
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
davrous
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
Horacio Gonzalez
 
Digital race evolution programmation web 1.0
Digital race   evolution programmation web 1.0Digital race   evolution programmation web 1.0
Digital race evolution programmation web 1.0
Sequoia-ID
 
Chapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdfChapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdf
AnouAr42
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 
HTML5 en Entreprise
HTML5 en EntrepriseHTML5 en Entreprise
HTML5 en Entreprise
le.genie.logiciel
 
Resource Oriented Architecture
Resource Oriented ArchitectureResource Oriented Architecture
Resource Oriented Architecture
DNG Consulting
 
Création des sites web pour débutant
Création des sites web pour débutantCréation des sites web pour débutant
Création des sites web pour débutant
Korteby Farouk
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
Renaud Dumont
 
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatialesLes apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
Gaëtan LAVENU
 
ACube : De la solution à l'industrialisation
ACube : De la solution à l'industrialisationACube : De la solution à l'industrialisation
ACube : De la solution à l'industrialisation
peguet
 

Similaire à Développement Web (20)

Association 2 0
Association 2 0Association 2 0
Association 2 0
 
Google Web Toolkit 1.5 Presentation Web Creative Common
Google Web Toolkit 1.5 Presentation Web Creative CommonGoogle Web Toolkit 1.5 Presentation Web Creative Common
Google Web Toolkit 1.5 Presentation Web Creative Common
 
Yass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxYass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptx
 
Publication de documents sur le Web
Publication de documents sur le WebPublication de documents sur le Web
Publication de documents sur le Web
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
 
SAPIENS2009 - Module 4B
SAPIENS2009 - Module 4BSAPIENS2009 - Module 4B
SAPIENS2009 - Module 4B
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
 
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
INITITIATION_AU_DEVELOPPEMENT_WEB_ET_PRESENTATION_DES_DIFFERENTES_SOLUTIONS_P...
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
 
Digital race evolution programmation web 1.0
Digital race   evolution programmation web 1.0Digital race   evolution programmation web 1.0
Digital race evolution programmation web 1.0
 
Chapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdfChapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdf
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
HTML5 en Entreprise
HTML5 en EntrepriseHTML5 en Entreprise
HTML5 en Entreprise
 
Resource Oriented Architecture
Resource Oriented ArchitectureResource Oriented Architecture
Resource Oriented Architecture
 
Création des sites web pour débutant
Création des sites web pour débutantCréation des sites web pour débutant
Création des sites web pour débutant
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
 
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatialesLes apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
 
ACube : De la solution à l'industrialisation
ACube : De la solution à l'industrialisationACube : De la solution à l'industrialisation
ACube : De la solution à l'industrialisation
 

Plus de mastertic

Technologies mobiles
Technologies mobilesTechnologies mobiles
Technologies mobiles
mastertic
 
Un site Web de qualité
Un site Web de qualitéUn site Web de qualité
Un site Web de qualité
mastertic
 
Le Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entrepriseLe Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entreprise
mastertic
 
Le Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entrepriseLe Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entreprise
mastertic
 
Le Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entrepriseLe Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entreprise
mastertic
 
Du site Web au portail d'entreprise
Du site Web au portail d'entrepriseDu site Web au portail d'entreprise
Du site Web au portail d'entreprise
mastertic
 
RSS et veille technologique
RSS et veille technologiqueRSS et veille technologique
RSS et veille technologique
mastertic
 
Hec 353 Exposé Ato B C (2007)
Hec 353 Exposé Ato B C (2007)Hec 353 Exposé Ato B C (2007)
Hec 353 Exposé Ato B C (2007)
mastertic
 
Hec 352 Exposé Bto B (2007)
Hec 352 Exposé Bto B (2007)Hec 352 Exposé Bto B (2007)
Hec 352 Exposé Bto B (2007)
mastertic
 
Hec 351 Exposé Bto C (2007)
Hec 351 Exposé Bto C (2007)Hec 351 Exposé Bto C (2007)
Hec 351 Exposé Bto C (2007)
mastertic
 
Hec Ergonomie
Hec ErgonomieHec Ergonomie
Hec Ergonomie
mastertic
 
Les TIC dans l'entreprise - 3- e-Business
Les TIC dans l'entreprise - 3- e-BusinessLes TIC dans l'entreprise - 3- e-Business
Les TIC dans l'entreprise - 3- e-Business
mastertic
 
Les TIC dans l'entreprise - Partie 2
Les TIC dans l'entreprise - Partie 2Les TIC dans l'entreprise - Partie 2
Les TIC dans l'entreprise - Partie 2
mastertic
 
RSS
RSSRSS

Plus de mastertic (15)

Technologies mobiles
Technologies mobilesTechnologies mobiles
Technologies mobiles
 
Un site Web de qualité
Un site Web de qualitéUn site Web de qualité
Un site Web de qualité
 
Le Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entrepriseLe Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entreprise
 
Le Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entrepriseLe Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entreprise
 
Le Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entrepriseLe Web comme plateforme TIC pour l'entreprise
Le Web comme plateforme TIC pour l'entreprise
 
Du site Web au portail d'entreprise
Du site Web au portail d'entrepriseDu site Web au portail d'entreprise
Du site Web au portail d'entreprise
 
RSS et veille technologique
RSS et veille technologiqueRSS et veille technologique
RSS et veille technologique
 
Hec 353 Exposé Ato B C (2007)
Hec 353 Exposé Ato B C (2007)Hec 353 Exposé Ato B C (2007)
Hec 353 Exposé Ato B C (2007)
 
Hec 352 Exposé Bto B (2007)
Hec 352 Exposé Bto B (2007)Hec 352 Exposé Bto B (2007)
Hec 352 Exposé Bto B (2007)
 
Hec 351 Exposé Bto C (2007)
Hec 351 Exposé Bto C (2007)Hec 351 Exposé Bto C (2007)
Hec 351 Exposé Bto C (2007)
 
Hec Ergonomie
Hec ErgonomieHec Ergonomie
Hec Ergonomie
 
Les TIC dans l'entreprise - 3- e-Business
Les TIC dans l'entreprise - 3- e-BusinessLes TIC dans l'entreprise - 3- e-Business
Les TIC dans l'entreprise - 3- e-Business
 
technotic
technotictechnotic
technotic
 
Les TIC dans l'entreprise - Partie 2
Les TIC dans l'entreprise - Partie 2Les TIC dans l'entreprise - Partie 2
Les TIC dans l'entreprise - Partie 2
 
RSS
RSSRSS
RSS
 

Développement Web

  • 1. Développer un site Web de qualité plateformes, standards et ergonomie
  • 2. 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)
  • 3. 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
  • 4. 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
  • 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. 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)
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. A quoi ressemble un mauvais code HTML? Démonstration www.infotec.be
  • 12. <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?
  • 13. 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)
  • 14. 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>
  • 15. 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
  • 16. 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 …
  • 17. A quoi ressemble un mauvais code HTML? Démonstration www.awt.be
  • 18. 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>
  • 19. 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; }
  • 20. 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
  • 21. 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
  • 22. 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)
  • 23. 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)
  • 24. … 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
  • 25. XML pour publier de l’information
  • 26. XML et les services Web
  • 27. 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
  • 28. 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
  • 29. AJAX en action Démonstration
  • 30. 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
  • 31. Questions et réponses [email_address] mastertic.blogspot.com www.delicious.com/mastertic