EFREI – 2008-2009 – Mathieu Nebra Le développement Web

Tim Berners-Lee, W3C, recommandations… Comment est né le web ?

Naissance du Wold Wide Web Le web a été inventé en 1991 par Tim Berners-Lee au CERN (Genève) Il définit le langage HTML permettant de créer des pages web

Succès rapide du web Le nombre de sites web et donc de serveurs web explose : 10 000 serveurs en 1995 100 000 serveurs en 1996 9,5 millions de serveurs en 1999 Plus de 50 millions aujourd’hui

Le W3C (World Wide Web Consortium) Pour encadrer l’évolution du web et de ses technologies, Tim Berners-Lee crée le W3C dès 1994 Site web du W3C : http://www.w3.org/

Historique de la naissance du web et du W3C Consultable à l’adresse http://www.w3.org/2005/01/timelines/timeline.pdf

Les recommandations du W3C Le W3C publie des recommandations sur les nouveaux langages standards à utiliser : HTML 2, HTML 3, HTML 4, … XML, XHTML, Xforms CSS PNG SVG Ne sont pas des recommandations W3C mais sont devenus des standards de facto : PDF Flash

Les différents types de sites Statiques et dynamiques Les différents types de sites

Distinguer les deux types de sites Sites statiques Le contenu de la page reste le même, sauf si l’auteur du site (webmaster) le met à jour. Sites dynamiques Ils peuvent évoluer sans la présence du webmaster. Nécessaire pour créer des forums, un espace membre, etc.

Sites statiques et dynamiques Les sites statiques se font rares aujourd’hui. Ils servent uniquement de vitrine, pour une entreprise par exemple. La quasi-totalité des nouveaux sites web sont des sites dynamiques. Plus complexes à réaliser, nécessitent l’utilisation de plus de technologies. Ils permettent aux utilisateurs d’interagir : Facebook Myspace Le Site du Zéro…

Connexion à un site web statique La page renvoyée est toujours la même

Connexion à un site web dynamique La page est générée spécialement pour le visiteur Elle peut être personnalisée à ses goûts et ses critères

Quels langages pour créer un site web ? HTML, XML, XHTML, CSS, Javascript, PHP, MySQL… Quels langages pour créer un site web ?

Evolution des technologies Les technologies permettant de créer un site web ont évolué et se sont multipliées : Avant : langage HTML seul Aujourd’hui : HTML + CSS = site statique Javascript, XML, PHP, MySQL : site dynamique

Evolution des technologies 1991 : HTML 1996 : HTML + CSS 2000 : HTML + CSS + Javascript + XML + PHP + MySQL + …

Langages d’un site statique HTML : permet de créer le contenu du site (le fond) CSS : permet de définir l’apparence du site (la forme) XHTML est une variante de HTML, semblable mais un peu plus stricte dans ses règles. Nous utiliserons XHTML.

Langages d’un site statique XHTML CSS Site web statique

A quoi sert CSS ? Site sans forme (HTML seul) Site mis en forme (HTML + CSS)

Langages d’un site statique

Langages d’un site dynamique (X)HTML : toujours nécessaire CSS : toujours nécessaire PHP : génère la page XHTML selon certaines conditions MySQL : base de données, stocke les informations (messages du forum, liste des membres…)

Langages d’un site dynamique XHTML CSS PHP MySQL Site web dynamique

Langages d’un site dynamique

A propos d’AJAX AJAX permet d’échanger des informations avec le serveur sans avoir à recharger la page AJAX est une combinaison de : Javascript : langage de script exécuté sur la machine du client XML : permet de transmettre des données entre la machine du client et le serveur AJAX = Asynchronous JavaScript and XML

A propos d’AJAX

Et la concurrence ? XHTML et CSS sont incontournables pour créer une page web. En revanche, les langages serveurs et les bases de données sont nombreux. PHP et MySQL forment un des plus célèbres duos, nous allons nous baser sur eux pour ce cours.

Et la concurrence ? Concurrents de PHP ASP .NET Java (J2EE) Ruby on Rails Python (Django…) Concurrents de MySQL Oracle PostgreSQL MS SQL Server DB2

Support de cours Vous aurez besoin de connaître les langages XHTML, CSS, PHP et SQL Les ressources pour se former sont disponibles sur le Site du Zéro : http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web.html http://www.siteduzero.com/tutoriel-3-14668-un-site-dynamique-avec-php.html

Projet à réaliser

Objectifs Réaliser un annuaire des élèves à destination des employeurs Faciliter les recherches de compétences et de centres d’intérêt

Fonctionnalités attendues Lister par ordre alphabétique Rechercher un élève par nom Filtrer les élèves en fonction des compétences et des centres d’intérêt Formulaire pour contacter un élève par e-mail

Schéma du site

Liste des élèves

Rechercher un élève

Rechercher par critères