La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Xavier TannierYann Jacob Projet Web/BD.

Présentations similaires


Présentation au sujet: "Xavier TannierYann Jacob Projet Web/BD."— Transcription de la présentation:

1 Xavier TannierYann Jacob Projet Web/BD

2 Programmation Web / Bases de Données XHTML Projet Web/BD 11 x 3 heures de TP Des cours (HTML, CSS, PHP, JavaScript, AJAX, sécurité) Des TD Un projet : – À choisir dans la liste fournie ici : – Un seul groupe par projet – Éventuellement, proposer un sujet soi-même (à faire valider bien sûr, voir avec votre chargé de TD) 2

3 Programmation Web / Bases de Données XHTML Projet Web/BD Projet : 1.Choisir le projet 2.Contacter les clients 3.Organiser AU MOINS UNE réunion avec les clients Vérifier la bonne compréhension du cahier des charges Vérifier la faisabilité en fonction de l'environnement de travail du client Organiser plusieurs réunions est préférable ! 4.Évaluation à mi-parcours : note de contrôle continu Compte-rendu de la première réunion avec le client Schémas préliminaires (structures de données, scénarios, etc.) 5.Évaluation finale (3 mai) : soutenance, rapport et code commenté Un site qui fonctionne ! 3

4 Xavier TannierYann Jacob Introduction

5 Programmation Web / Bases de Données XHTML Internet et le Web Internet : un réseau mondial d'ordinateurs. Différentes applications : – Courrier électronique – Web – Échange de fichiers (FTP, peer-to-peer) – Console distante (telnet, VNC) – Vidéoconférence, e-commerce, télétravail, chat, collecticiel,… Le Web : un système hypertexte public fonctionnant sur Internet et permettant de consulter, avec un navigateur, des pages mises en ligne dans des sites. 5

6 Programmation Web / Bases de Données XHTML Architecture du Web 6 Le clientLe serveur Le réseau (navigateur)(HTTP) Protocole TCP/IP (voir vos cours de réseaux) URL (+ paramètres) Type MIME + fichier

7 Programmation Web / Bases de Données XHTML URL et MIME URL : Uniform Resource Locator – Identifie sur le Web un document ou un fragment MIME : Multipurpose Internet Mail Extensions – Type des documents transférés par le protocole HTTP (différent de lextention !) – La navigateur décide ainsi comment afficher le fichier – text/html, text/plain, application/pdf, application/zip, image/jpeg, video/mpeg, audio/x-wav, etc. 7 protocole machine répertoire fichier fragment (http, https, ftp, news, mailto, telnet...)

8 Programmation Web / Bases de Données XHTML Navigateurs Navigateurs graphiques (IE, Firefox, Opera, Konqueror, Safari...) Navigateurs textuels (links, linx...) Navigateurs auditifs Robots 8 Pour le projet Les projets devront être testés sur les 2 ou 3 navigateurs les plus courants (et sur Linux + Windows) L'accessibilité sera un critère important

9 Xavier TannierYann Jacob eXtended HyperText Markup Language (XHTML)

10 Programmation Web / Bases de Données XHTML (X)HTML (eXtended) HyperText Markup Language Un langage à balises pour structurer (et dans HTML pour mettre en forme) les documents Format ouvert, indépendant du logiciel et du matériel XHTML : – Successeur du HTML – Conforme aux normes XML (eXtended Markup Language) – Développé par le W3C (World Wide Web Consortium) 10 Pour le projet XHTML Tous les codes seront vérifiés par des validateurs

11 Programmation Web / Bases de Données XHTML Lessentiel du langage XML (1/3) 11 article dateauteursectionbibliographie :32:27 Dupont et Dupond par … … bib … …... texte... … Chaque nœud de l'arbre est un élément Un élément peut avoir des attributs Les feuilles de l'arbre peuvent être des éléments textuels Un document XML = un arbre étiqueté et ordonné

12 Programmation Web / Bases de Données XHTML Lessentiel du langage XML (2/3) Vocabulaire – Racine = document = arbre – Nœud = élément (entouré par des balises) – Balise de début ( ), balise de fin ( ), balise délément vide ( ) – Attribut : nom="valeur" dans la balise de début – Prologue : version de XML et type du document (ex : XHTML) 12

13 Programmation Web / Bases de Données XHTML Lessentiel du langage XML (3/3) La structure des documents XML est imposée par une DTD ou un schéma XML Pour analyser des documents XML, on utilise deux méthodes : – DOM : construction de l'arbre en mémoire (puissant mais lent) – SAX : parcours linéaire du fichier (limité mais rapide) – Les analyseurs XML implémentent les API DOM ou SAX Un élément est défini de façon unique par son chemin XPath : /article[1]/section[2]/par[5] 13

14 Programmation Web / Bases de Données XHTML Structure dun document XHTML 14 Attributs de langue (redondant !) Version de XHTML utilisée (pour les validateurs notamment)

15 Programmation Web / Bases de Données XHTML Entêtes XHTML 15 Cours de Programmation Web...

16 Programmation Web / Bases de Données XHTML Les titres de section (h1-h6) 16 Cours de Programmation Web Introduction (X)HTML Les bases Rappels de XML Les balises Pour l'instant, c'est le navigateur qui décide de la forme...

17 Programmation Web / Bases de Données XHTML Emphases et compagnie 17 Cours de Programmation Web Introduction XHTML est le successeur du HTML. Il respecte le standard XML Voilà ! Pour l'instant, c'est le navigateur qui décide de la forme...

18 Programmation Web / Bases de Données XHTML Listes non ordonnées 18 Cours de Programmation Web Notions à connaître Les balises : de titre d'emphase de listes : ordonnées non ordonnées de définition En XHTML on ferme toutes les balises !

19 Programmation Web / Bases de Données XHTML Listes ordonnées 19 Cours de Programmation Web Notions à connaître Les cascades CSS, avec : le style de l'auteur le style de l'utilisateur le style du navigateur Attributs de ol : type (valeurs "1", "a", "A", "i" ou "I") start (numéro de démarrage)

20 Programmation Web / Bases de Données XHTML Listes de définitions 20 Cours de Programmation Web Notions à connaître XML eXtensible Markup Language XHTML eXtended HTML CSS Cascading Style Sheets

21 Programmation Web / Bases de Données XHTML Images 21 Cours de Programmation Web Images Attribut alt indispensable, pour remplacer l'image lorsque le texte ne s'affiche pas ou pour les lecteurs (humains ou machines) n'ayant pas accès aux images. Format d'images possibles : jpeg (photos) gif (animations) png (transparence) infobulle

22 Programmation Web / Bases de Données XHTML Liens 22 Cours de Programmation Web Liens utiles (avec une ancre) Le cours de BD (lien relatif) Le W3C (URL absolue) Aller en bas (ancre) Vous êtes en bas Retour vers l'ancre des liens

23 Programmation Web / Bases de Données XHTML Tableaux 23 Cours de Programmation Web Tableau Comparaison XHTML / HTML XHTML HTML forme non oui structure oui <br> non oui <hr> En trichant ! (feuille de style) légende ligne cellule d'entête cellule de donnée cellules multi-colonnes et multi-lignes

24 Xavier TannierYann Jacob Les formulaires XHTML

25 Programmation Web / Bases de Données XHTML Les formulaires 25 get post application/x-www-form-urlencoded multipart/form-data text/plain URL du script auquel sera soumis le formulaire (on verra plus tard...) valeur par défaut

26 Programmation Web / Bases de Données XHTML Les ensembles de champs 26 Si les champs de formulaires sont au milieu d'un texte Pour regrouper des champs de formulaire ayant une sémantique proche Sinon En XHTML, pas de champs de formulaire "en vrac"

27 Programmation Web / Bases de Données XHTML Les types de champs 27 input type = " " label for textarea namecolsrows texthidden password checkboxradio file submit reset imagebutton

28 Programmation Web / Bases de Données XHTML Étiquette, saisie de texte 28 Identité Nom Prénom Mot de passe Sans feuille de style... Optionnel. Un clic sur le label sélectionne le champ de saisie

29 Programmation Web / Bases de Données XHTML Saisie multiligne 29 Description Commentaire Pas de commentaire... Texte par défaut

30 Programmation Web / Bases de Données XHTML Champ caché 30 – Permet de masquer des champs pour le client tout en envoyant leur contenu avec le formulaire – Précise des informations name/value – Attention, à utiliser pour "masquer", pas pour "cacher" ! Le client peut éditer la page à la main pour voir et changer la valeur de ces champs !

31 Programmation Web / Bases de Données XHTML Choix multiples (1/2) 31 Décochez cette case si vous n'avez pas de télé Paiement : Par carte Par chèque Optionnel mais très conseillé pour l'accessibilité

32 Programmation Web / Bases de Données XHTML Choix multiples (2/2) 32 Votre âge : Moins de 20 ans 21 à 35 ans 36 à 50 ans Plus de 51 ans

33 Programmation Web / Bases de Données XHTML Fichier joint 33 Fichier joint : type MIME (optionnel) : text/plain text/html image/gif video/*...

34 Programmation Web / Bases de Données XHTML Bouton 34 Décochez cette case si vous n'avez pas de télé Même comportement type button : pas d'action, seulement du javascript. À éviter ! (accessibilité)

35 Programmation Web / Bases de Données XHTML Et lavenir ? HTML 5 HTML 5 : la prochaine révision du langage par le W3C Vision document complétée par une vision "application" Suppression des balises de forme Plus de balises de structure – header – article – footer Ajout de balises d'API : – canvas – audio – video – draggable –... 35

36 Programmation Web / Bases de Données XHTML Références Spécification de XHTML Spécification de XHTML Spécification de XML Spécification de HTML HTML et XHTML : La Référence, OReilly 36


Télécharger ppt "Xavier TannierYann Jacob Projet Web/BD."

Présentations similaires


Annonces Google