EFREI 2008-2009 Mathieu Nebra
Tim Berners-Lee, W3C, recommandations
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
Statiques et dynamiques
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
HTML, XML, XHTML, CSS, Javascript, PHP, MySQL
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 : 1. http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-siteweb.html 2. http://www.siteduzero.com/tutoriel-3-14668-un-site-dynamique-avec-php.html
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