Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Développement web DUT Info 2, 2019-2020 Thomas FRESSIN thomas.fressin@u-pem.fr

Développement web DUT Info 2, 2019-2020 Thomas FRESSIN thomas.fressin@u-pem.fr 2 Développement web Thomas FRESSIN PLAN DE LA PRÉSENTATION  Dév. front-end/back-end  Modèle d’exécution du web  HTML  CSS  PHP  MySQL 3 Thomas FRESSIN BIBLIOGRAPHIE  Cours de Pierre-Nicolas Clauss (LORIA)  Cours de Romain Lebreton, Sébastien Gagné, Auréline Quatrehomme  Wikipédia  http://www.commentcamarche.net/contents/html/  http://www.apprendre-php.com  http ://www.php.net/manual/fr Développement web 4 Thomas FRESSIN LE DEVELOPPEMENT FRONT-END / BACK-END Développement web 5 6 7 8 9 10 11 FRONT-END Le « développement web frontal » (front-end en anglais) correspond aux productions HTML, CSS et JavaScript d’une page internet ou d’une application qu’un utilisateur peut voir et avec lesquelles il peut interagir directement. Le principal défi du développement web frontal est de toujours s'adapter aux dernières évolutions ; les outils et les techniques de développement étant en évolution constante. La conception des sites internet doit également être capable d’offrir une bonne ergonomie de lecture en facilitant la navigation et l’obtention d’information. Cet objectif est d’autant plus compliqué que les lecteurs utilisent maintenant différentes plateformes de format et de taille variés. Le développeur doit donc s’assurer que le site internet apparaît correctement sur l’ensemble des navigateurs Web et des plateformes/appareils disponibles. 12 Hypertext : une page doit être relier à d’autres pages → comprendre l’architecture de l’information et les relations des pages Markup : le contenu est intégré à une structure de page balisée Règles pour traduire le DOM dans une forme visuelle Règles de style en cascade. Ce sont un ensemble de règles qui décrivent la priorité avec laquelle les styles sont rendus sur une page Contrôler les données saisies dans des formulaires HTML Interagir avec le document HTML via le DOM 13 BACK-END En informatique, un back-end (parfois aussi appelé un arrière-plan) est un terme désignant un étage de sortie d'un logiciel devant produire un résultat. On l'oppose au front-end (aussi appelé un frontal) qui lui est la partie visible de l'iceberg. Illustration du concept : Dans un magasin, on trouve une arrière-boutique où sont stockés les articles, et un bureau qui assure le bon fonctionnement du magasin. Il s'agit du back-end, de tout ce qui se passe en arrière-plan sans que le client ne s'en rende compte. Dans ce même magasin, on retrouve un service à la clientèle et des étalages. Il s'agit du front-end, de ce que le client voit. 14 Thomas FRESSIN MODÈLE D’EXÉCUTION DU WEB Développement web 15 Thomas FRESSIN MODÈLE D’EXÉCUTION DU WEB Développement web Requête HTTP (protocole de transfert hypertexte) Code « web » INTERNET CLIENT SERVEUR 16 Thomas FRESSIN MODÈLE D’EXÉCUTION DU WEB Développement web 17 Thomas FRESSIN MODÈLE D’EXÉCUTION DU WEB Développement web image page Flux vidéo 18 Thomas FRESSIN REQUÊTE HTTP Développement web 19 Thomas FRESSIN REQUÊTE HTTP Développement web 20 Thomas FRESSIN MODÈLE D’EXÉCUTION DU WEB Développement web Principaux codes HTTP : ●200 : succès ●301 et 302 : redirection perm./temp. ●401 : utilisateur non authentifié ●403 : accès refusé ●404 : page non trouvée ●500 et 503 : erreur serveur ●504 : le serveur n'a pas répondu Ressources : ●Code html (page) ●Code css (style) ●Code js (interaction) ●Image ●Flux vidéo ●Cookie ●Redirection ●... 21 Requête HTTP Code « web » 22 Écouter le réseau (F12 ou Menu Outils/Outils de développement puis onglet Réseau) 23 Thomas FRESSIN MODÈLE D’EXÉCUTION DU WEB Développement web Requête HTTP Code « web » Du client au serveur Il peut exister des machines intermédiaires servant de relais ● Un proxy (serveur mandataire) peut modifier les réponses et requêtes qu'il reçoit et peut gérer un cache des ressources demandées. ● Une passerelle (ou gateway) est un intermédiaire modifiant le protocole utilisé. ● Un tunnel transmet les requêtes et les réponses sans aucune modification, ni mise en cache. ● Utilisation de protocoles : SSL/TLS/… HTTPS 24 Thomas FRESSIN Développement web HTML 5 Hypertext Markup Language / Langage de balisage d’hypertexte 25 Thomas FRESSIN HTML : historique 1991 HTML 1994 HTML 2 1996 CSS 1 + JavaScript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Tableless Web Design 2005 AJAX 2009 HTML 5 Développement web 26 Thomas FRESSIN HTML 5 : généralités  Langage standardisé • Date de première version : 28 octobre 2014 • Date de dernière version : 21 décembre 2017 • N° de version actuelle : 5.2 • Paradigme Langage de balisage • Auteur WHATWG • Développeur WHATWG et W3C • Version en dév. 5.3 • Influencé par SGML • A influencé Wikicode, BBCode • Écrit en SGML • Site web https://www.w3.org/TR/html52/ • Extensions de fichiers HTML: .html, .htm XHTML: .xhtml, .xht, .xml Développement web 27 Thomas FRESSIN HTML : généralités  Language descriptif  Pas de séquences de contrôle  Description de la sémantique du document  Balises  Balise ouvrante : <tag>  Balise fermante : </tag>  Les deux en une : <tag />  Attributs : <tag attribut="valeurs">  Standardisé  W3C : http ://www.w3c.org  Dernière version : HTML 5 Strict Transitional Frameset  Validation automatique : http ://validator.w3.org  Balise DOCTYPE, sur la première ligne du fichier <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http ://www.w3.org/TR/html4/loose.dtd"> Développement web 28 Thomas FRESSIN HTML, XHTML, HTML5... Développement web  XHTML  Le XHTML est un langage normé (+ contraignant pour le développeur) permettant (en théorie) un standardisation de la façon de coder pour un affiche (censé être) compatible sur tous les navigateurs/OS  Il existe plusieurs versions : Strict, Transitional  Il est possible de vérifier le respect de son code sur un validateur (celui de la W3C par exemple)  Avis professionnel : faut tendre vers le XHTML sans trop perdre de temps avec (la compatibilité OS/navigateurs est + importante) HTML5  Le HTML5 est la nouvelle version du HTML5.  C'est un nouveau standard participant au web sémantique (donner du sens aux balises pour faciliter l'interprétation informatique, l'interconnexion des données du web, ..)  Il permet en outre : + de dynamisme, la géolocalisation, la portabilité mobile, ... 29 Thomas FRESSIN HTML : généralités Encapsulation de type « pile » <a> </a>  c o r r e c t <a> </a>  i n c o r r e c t Structure arborescente Arbre minimal : <html> <head> <title>…</title> </head> <body> … </body> </html> Développement web métadonnées données page HTML 30 Thomas FRESSIN HTML : généralités  Commentaires <!– ici mes commentaires --> HTML + XML => XHTML Balises toujours fermées Transformation en d'autres formats HTML donne un découpage selon la sémantique du document Mise en forme visuelle en HTML : moins lisible, plus de code en CSS : plus lisible, regroupement et généralisation Développement web 31 Thomas FRESSIN HTML : espacements  Code : mon texte, comme\t ça, j’\n aime. .. beaucoup. Développement web  Résultat : mon texte, comme ça, j’aime... beaucoup.  Conclusions :  Les suites de caractère d'espacement équivaut à un seul caractère d'espacement  Les expressions \t et \n sont ignorés  Il faut utiliser des balises pour mettre en forme le texte 32 HTML : mise en forme du texte Développement web  Mise en forme au niveau paragraphe Aller à la ligne Insérer un espace … Paragraphe <div>…</div> Cadre <pre>…</pre> Tout est reproduit tel quel  Mise en forme au niveau phrase … Mise en valeur (italique) … Mise en valeur forte (gras) <cite>…</cite> Citation courte (gras italique) <q>…</q> Citation courte (entre guillements) <blockquote>…</blockquote> Citation longue (gras) <code>…</code> Extrait de code source (gras italique petit) <abbr>…</abbr> Abréviation (gras italique) <acronym>…</acronym> Acronyme (gras italique) … Mettre en exposant … Mettre en indice <big>…</big> Plus gros … Plus petit Beaucoup d'autres : <dfn>, <samp>, <kbd>, <var>, <ins>, <del>, … 33 Thomas FRESSIN HTML : liens hypertextes Développement web  Balise des liens hypertextes <a>…</a> Lien <a href="lien">texte</a> Lien externe <a href="mailto:address@server.com">mail</a> Lien courriel <a href="javascript:fonction()">texte</a> Lien javascript <a name="ancre" /> Lien interne (ancre) <a href="lien#ancre">texte</a> <a … target="_blank">texte</a> Nouvel onglet  Balise des liens hypertextes  Possibilité de lien sur une image  Choisir le(s) bon(s) mot(s) pour servir de lien  Lier les pages de manière cohérente 34 Thomas FRESSIN HTML : liens hypertextes Développement web  Adresse absolue d’un lien <a href="http://fressin.fr/">T. FRESSIN</a> <a href="fressin.fr/fr/index.php">T. FRESSIN</a>  Adresse relative d’un lien Ma page ‘index.html’ est dans le dossier a. J’ai une page ‘toto.html’ dans le dossier a2. Pour créer le lien index vers toto : <a href="a2/toto.html">Lien</a> Ma page ‘toto.html’ est dans le dossier a2. J’ai une page ‘tata.html’ dans le dossier b. Pour créer le lien toto vers tata : <a href=« ../b/tata.html">Lien</a> 35 Thomas FRESSIN HTML : listes Développement web  Liste ordonnée <ol> <li>article 1</li> <li>article 2</li> <li>article 3</li> </ol>  Liste non-ordonnée <ul> <li>article 1</li> <li>article 2</li> <li>article 3</li> </ul>  Liste de définition <dl> <dt>article 1</dt> <dd>définition 1</dd> <dt>article 2</dt> <dd>définition 2</dd> </dl> 36 Thomas FRESSIN HTML : tableaux Développement web  Tableau <table border="1"> <caption> Voici le titre du tableau </caption> <tr> <th> Titre A1 </th> <th> Titre A2 </th> <th> uploads/Ingenierie_Lourd/ cours-de-proyo.pdf