1 Programmation Web Programmation WAMP/LAMP Premiers principes.

Présentation au sujet: "1 Programmation Web Programmation WAMP/LAMP Premiers principes."— Transcription de la présentation:

1 1 Programmation Web Programmation WAMP/LAMP Premiers principes

2 2 1 - Les principes Le Web Le HTML Les formulaires d'envoi de données

3 3 2 - Le WEB Le Web est un nom donné à l’ensemble hyperdocumentaire formé par la totalité des documents disponibles sur Internet à travers un protocole particulier : HTTP. Par opposition, Internet est l’hyperréseau de transport constitué par l ’interconnexion des réseaux publics et privés.

4 4 3 - Le WEB Le Web est assemblage de technologies diverses. Chaque technologie s’occupe d’un problème ou aspect particulier de la chaîne. Normes de contenu : XHTML, HTML, CSS, XML Automatisation de contenu : Javascript, VBScript Transformateurs : XSL Processeurs : Perl, Php, Python Templating

5 5 4 - Le WEB (3) Le principe central du Web, c’est la transaction HTTP : –Un émetteur (client) envoie une REQUETE –Un serveur y répond. C ’est une généralisation du « client-serveur » à partir de technologies publiques.

6 6 5 - Le Web (4) La REQUETE : –Un message court et formaté –Sa construction suit une norme HTTP –Demande un document à travers une URL (GET) –Dépose des données sur le serveur (POST) –Consulte les informations à propos d’une ressoure (HEAD, moins utilisé)

7 7 6 - Le Web (5) La REQUETE : –Renseigne le serveur sur des aspects de l ’environnement client –Obtient du serveur des informations complémentaires sur la ressource Ces deux procédés utilisent les champs d’en- tête.

8 8 7 - Le Web (8) Syntaxe générale d’une requête : [VERBE] [URL] [VERSION][EOL] [NOM2]:[VALEUR1][EOL] [NOM2]:[VALEUR2][EOL] [EOL] [CORPS] GET http://www.commentcamarche.net HTTP/1.0 Accept : text/html If-Modified-Since : Saturday, 15-January-2000 14:37:11 GMT User-Agent : Mozilla/4.0 (compatible; MSIE 5.0; Windows 95)

9 9 8 - Le Web (9) Syntaxe générale d’une réponse : [VERSION] [CODE] [STATUT][EOL] [Content-Type]:[VALEUR1][EOL] [NOM2]:[VALEUR2] [EOL] [EOL] [CORPS DU DOCUMENT] HTTP/1.0 200 OK Content-Type:text/html Content-Length:1245 Last-Modified:Fri, 14 Jan 2000 08:25:13 GMT...

10 10 9 - Le Web (10) Une requête peut également envoyer un ou plusieurs document dans le corps de document. (document multi-entité. Ex : multipart/form- data). Quelque soit la nature du document (texte ou binaire), il y a toujours une en-tête textuelle. Le document qui revient peut être le contenu d’un fichier (statique) ou un texte fabriqué à la demande par un programme (Web dynamique)

11 11 10 - Le HTML Le HTML est un langage de description de contenu. Il est le seul qui est interprété par un navigateur Web standard pour produire de l’affichage. Il existe d’autres standards plus riches mais marginaux (XUL par exemple). Le HTML décrit le document et ses constituants.

12 12 11 - Le HTML (1) Le HTML est un langage de description de contenu. Il est le seul qui est interprété par un navigateur Web standard pour produire de l’affichage. Il existe d’autres standards plus riches mais marginaux (XUL par exemple). Le HTML décrit le document et ses constituants.

13 13 12 - Le HTML (2) Principes du langage : –Un langage à balises : Balises à dimension 0 :, Balises à dimension 1 :, –Les éléments ainsi formés peuvent se contenir les uns les autres : –Des attributs plus ou moins obligatoires pour préciser des propriétés des éléments : un lien

14 14 13 - Le HTML (3) Les balises et le texte –Le texte du document est ce qui est « entre » ou autour des balises. –Les balises servent à déterminer la « fonction » du texte dans une structure. Ex : ce texte est un lien –Les balises peuvent simplement altérer la « forme ». Ex : en gras, en italiques –Les primitives premières du HTML ont une sémantique « documentaire » :,,,,,,,

15 15 14 - Le HTML (4) L’Hypermedia, l’agencement et les échanges –Un deuxième jeu important du HTML concerne l’établissement des hyperliens :,, –Un troisième jeu important du HTML concerne la gestion de l’organisation visuelle (l’agencement) :,,,,,,,,,,, –Un dernier jeu du HTML concerne la récupération de données à travers des formulaires:,,,,

16 16 15 - Le HTML (5) La constitution du document –Un document HTML EST un document HTML :... –ou pas ? :... –Un document est de l’information + de la méta-information :...meta... …information... Le HEAD : sert à enregistrer des informations complémentaires (mots-clefs, feuilles de styles applicables, des scripts à utiliser, des chargements annexes, etc…) Le BODY : Contient la structure de la partie « visible » du document.

17 17 16 - Le HTML (6) Les deux écritures –La forme sérialisée :...meta......informatio n... –La forme « structurée » :...meta…...information…

18 18 17 - Le HTML (7) La constitution d’un document linéaire –Un document textuel se construit selon un principe documentaire historique (des titres, des sous-titres et des paragraphes) :... Titre 1 : Première partie Titre 2 contenu Titre 2 contenu Titre 1 : Deuxième partie...

19 19 18 - Le HTML (8) La constitution d’un document agencé –Un document agencé utilise des tables ou des blocs. La stratégie par table : –Convient bien aux interfaces « formelles » et structurées (applications informatiques, applications de gestion, données structurées, données tabulaires). –A des inconvénients : « Accessibilité », coût de calcul de l’agencement quand trop de tables sont imbriquées. La stratégie par blocs : – Est issue du monde de la PAO. Elle convient aux informations « scénarisées » –A des inconvénients : difficulté de lecture de la structure. Difficulté de maîtrise du calage graphique. Impose la connaissance des « feuilles de style CSS »

20 20 19 - Le HTML (9) L’agencement en tables... Titre 1 Titre 2... Cellule fusionnée... TITRE1 Cellule fusionnée TITRE2

21 21 20 - Le HTML (10) L’agencement en blocs... bloc 1... Bloc 2 Bloc 1 Bloc 2 Les DIV représentent des éléments « bloc ». Les SPAN représentent une frontière identifiable autour d’un texte « en ligne ». Les DIV doivent être agencés à l’aide de primitives de feuille de style :

22 22 21 - Le HTML (11) L’échange de données avec le serveur –En réception : réponse à une requête (mode habituel) –En émission : Envoi de données par l’URL : c’est le mode « GET » dans lequel on passe des variables un formulaire : en « GET » mais plus généralement en « POST », permet de passer des variables issues de saisies d’utilisateur.

23 23 22 - Le HTML (12) Le formulaire HTML : –Un « élément-bloc » encadrant des champs d’entrée de donnée :...... Champs de saisie......

24 24 23 - Le HTML (13) Les éléments de formulaire : –Champ de texte : –Case à cocher : –Boutons radio : Plusieurs radio portant le même nom de groupe fonctionnent en exclusion

25 25 24 - Le HTML (14) Les éléments de formulaire (suite) : –Liste de sélection : libellé –Zones de texte : Contenu initial –Champ caché :

26 26 25 - Le HTML (15) La présentation des formulaires : Elle combine en général les éléments de formulaire et les tables : Libellé

27 27 Fin du cours