Responsable 2 ème année Conception de Sites Web dynamiques Cours 1+2 Patrick Reuter http://www.labri.fr/perso/preuter/cswd2015 Changements de groupe (cas exceptionnels) : Venez me voir après ce cours Explication détaillée des motivations par email : seulement avec votre adresse officielle (@u-bordeaux.fr) Sujet : [L2 MIASHS] Attention à votre style Classement par ordre de priorités Déroulement Règles du jeu CM : 1 mercredi sur 2, 8h30 10h30 TDs - Groupe G1 : mardi, 13h00 15h00 (Salle A4 Bât. B 2ème) - Groupe G2 : mardi, 15h00 17h00 (Salle A4 Bât. B 2ème) - Groupe G3 : mercredi, 10h30 12h30 (Salle A2 Bât. B 2ème) - Groupe G4 : mercredi, 15h30 17h30 (Salle A2 Bât. B 2ème) Evaluation : CC (50% : Projet + CCC), Examen terminal (50%) CCC Utilisation ordinateurs/mobiles/tablettes Contrôle continu : Projet de sites web (2-3 personnes) TD noté Contrôle continu Imprimer votre solution pour la prochaine séance 2 nde session : Examen final 1h30 sur papier 1 page écrite à la main recto-verso autorisée Ressources http://www.labri.fr/perso/preuter/cswd2015 Introduction 1
2015 Fonctionnement, p.ex. Facebook Twitter Youtube Image : Greedsoft.com Fonctionnement, p.ex. Site web adaptative http://fr.slideshare.net/backeliteagency/ comment-optimiser-sa-stratgie-web-pourles-tablettes-air-france-20141211 Introduction Choix mots de passe Sécurité de données Choix mots de passe Cryptage MD5 2
Choix mots de passe Choix mots de passe 0.5% of users have the password password; 0.4% have the passwords password or 123456; 0.9% have the passwords password, 123456 or 12345678; 1.6% have a password from the top 10 passwords 4.4% have a password from the top 100 passwords 9.7% have a password from the top 500 passwords 13.2% have a password from the top 1,000 passwords 30% have a password from the top 10,000 passwords https://www-ssl.intel.com/content/www/us/ en/forms/passwordwin.html «arthur» : mot de passe crackable en 0 secondes «caramel» : mot de passe crackable en 0 secondes «g4lette» : mot de passe crackable en moins de 6 minutes «bogoss58 : mot de passe crackable en 54 minutes «Bisco77e!» : mot de passe crackable en 1 jour «#EnVousRemerciant92$» : mot de passe crackable en 14 836 093 776 380 années Définition Un programme développé dans le but de nuire à un système informatique, sans le consentement de l'utilisateur infecté. Classification Mécanisme de propagation (p.ex. ver) Mécanisme de déclenchement (p.ex. bombe logique) Charge utile (p.ex. suppression partielle BIOS) Virus Les virus sont capables de se répliquer, puis de se propager à d'autres ordinateurs en s'insérant dans d'autres programmes ou des documents légitimes appelés «hôtes» (secteur d amorçage, fichier, macro, scripts..) Ver Les vers (worm) sont capables d'envoyer une copie d'eux-mêmes à d'autres machines. Exemple : I Love You (ou Love Letter) 3
Cheval de Troie (1/3) Dans la mythologie grecque : Episode décisif de la guerre de Troie au cours duquel, à l'initiative d'ulysse, des guerriers grecs réussissent à pénétrer dans la ville assiégée en vain depuis dix ans en se cachant dans un grand cheval de bois offert aux Troyens. Cette ruse entraîne la chute de la ville et permet le dénouement de la guerre. Cheval de Troie (2/3) Cheval de Troie (3/3) Le cheval de Troie est un logiciel en apparence légitime, mais qui contient une malveillance. Le rôle du cheval de Troie est de faire entrer ce parasite sur l'ordinateur et de l'y installer à l'insu de l'utilisateur. Le programme contenu est appelé la "charge utile". Il peut s'agir de n'importe quel type de parasite : virus, keylogger, logiciel espion Logiciel espion (spyware) Logiciel malveillant qui s'installe dans un ordinateur dans le but de collecter et transférer des informations sur l'environnement dans lequel il s'est installé, très souvent sans que l'utilisateur en ait connaissance. Réseaux Réseau postale Réseau d eau Réseau d électricité 4
Formes de communications Un émetteur, un destinataire (communication interpersonelle): unidirectionnel : Ordre, Lettre, email, SMS, «TamTam» bidirectionnel : Dialogue, Téléphone Un émetteur, plusieurs destinataire (média de masses) : unidirectionnel : Ordre, exposé, livre, la presse, radio, télévision bidirectionnel : Site Internet (1.0) Objectifs Beaucoup d émetteurs, un destinataire: unidirectionnel : Vote par SMS Beaucoup d émetteurs, beaucoup de destinataires : polydirectionnel : Table de discussion, Forum de discussion, Site Internet communautaire, réseaux sociaux Objectifs Objectifs généraux : «Comprendre le monde internet» Sensibiliser pour le potentiel, les possibilités, et aussi les dangers Protection de la vie privée Savoir se faire retrouver dans le moteurs de recherche Objectifs de conception & programmation : Concevoir des sites internet «statique» Concevoir des sites internet «dynamique» Contexte Objectifs «éthiques» : Respect de droits d auteurs Conception de Site Webs Interactifs Qu est-ce que c est le Web? - World Wide Web, WWW, W3, - Toile, («toile (d'araignée) mondiale») Web <--> Internet Le Web est une application d'internet, comme courrier électronique, Voice IP (Skype, ) Le Web a été inventé plusieurs années après Internet, mais c'est le Web qui a rendu les médias grand public attentifs à Internet. 5
Le Web Statistiques Le Web fonctionne sur Internet permet de consulter, avec un navigateur Web, des pages Web mises en ligne dans des sites Web L'image de la toile vient des hyperliens qui lient les pages Web entre elles. à un système hypertexte (c-à-d contient des hyperliens) public (hyperlien : permet de passer automatiquement d'un document consulté à un document lié) http://www.bestedsites.com/the-internet-adecade-later/ Adresse Web : ou URL (Uniform Resource Locator) http://www.example.com/une/page.extension Définitions protocole de communication HTTP nom de domaine chemin Exemples : http://www.example.com/index.html La ressource est un document HTML accessible par le protocole HTTP ftp://www.example.com/page.html La ressource est un document HTML accessible par le protocole FTP http://www.example.com/image.jpg La ressource est une image JPEG accessible par le protocole HTTP Page Web unité de consultation du WWW document informatique qui peut contenir du texte, des images, des formulaires à remplir et divers autres éléments multimédias et interactifs. Une page Web peut être téléchargée et consultée à l'aide d'un logiciel appelé navigateur Web. Page Web particulière : Page d acceuil (Homepage) Conception de Site Webs Dynamiques Processus de création de site Web simple page statique (HTML/XHTML, CSS) ou page dynamique éventuellement avec connexion à une base de données. Il faut distinguer entre la programmation côté client ou côté serveur (architecture client serveur) 6
Conception de Site Webs Interactifs Conception de Site Webs Interactifs Déroulement Pages web statiques (HTML/XHTML) Mise en forme avec feuilles de styles (CSS) Programmation côté serveur Pages web dynamiques (PHP) avec connexion à une base de données (MySQL) Programmation côté client JavaScript Référencement Internet (moteur de recherche) MVC : Modèle Vue - Controller View Controller Model XML HTML XML permet de Définir les données Décrire le sens des données <utilisateurs> <ami> <nom>roussel</nom> <prenom>roussel</prenom> <tel>+33-6 - 00 00 00 00</tel> </ami> Langage de structuration de documents («Hyper-Text Markup Language») HTML permet de Publier des documents en lignes contentant du texte, des tableaux, des listes, Lier des pages par des liens hypertextes Concevoir des formulaires permettant d effectuer des traitements d informations Insérer des documents dans d autres formats : video, images, <ami> <nom> </nom> </ami>... </utilsateurs>... HTML définit le contenu et la structuration des informations au sein du document HTML ne définit pas l apparence du document HTML5 HTML5 Standard de W3C à partir de 2014 Vers une structure sémantique Créer contenu natif, aussi interactif que Flash, Flex, Silverlight <div> à <nav>, <article>, <aside>, <header>, <footer> Video, audio, graphismes,.. Ipad, Iphone à pas de Flash 7
Démo : HTML5 Exemple interprété Fichier html brut <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>ma premiere page</title> </head> <h1>page Web</h1> <p>ma première page.</p> </html> Format d un document HTML Tout document HTML commence par la balise <html> et finit par la balise </html> Tout document HTML contient 1. Un en-tête, délimité par les balises <head> et </head> 2. Un corps, délimité par les balises et <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>ma premiere page</title> </head> <h1>page Web</h1> <p>ma première page.</p> </html> 1. En-tête <head> Délimité par les balises <head> et </head> Contient des informations générales sur le document, toujours chargées avant le corps Titre du document <title> Informations sur le contenu du document <meta> Variables et fonctions des scripts JavaScript <script> Les références aux feuilles de style <link> Les balises utilisées sont spécifiques à l entête Pas d affichage dans le navigateur (en théorie) Balise <title> Contenue dans l en-tête du document Définit le titre du document, terminé par la balise </title> Le titre doit être court et explicite car il apparaît : Comme titre de la fenêtre du navigateur Dans la liste des signets («bookmarks») Utilisé par les moteurs de recherche <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>ma premiere page</title> </head>... 8
Commentaires 2. Corps Tout texte commençant par «<!--» et se terminant par «-->» est considéré comme étant un commentaire Non interprété par le navigateur <!DOCTYPE Non html> <html lang="fr"> affiché <head> <title>ma premiere page</title> </head> <h1>ma Page</h1> <p>ma première page web</p> <!-- ne pas afficher cette partie --> </html> Délimité par les balises et Contient les informations affichables du document Texte du document Instructions Titrage Les balises h1, h2, h6 permettent de baliser un paragraphe comme étant un titre d un certain niveau Balise <p> Débute un paragraphe, terminé par </p>... <h1>ma Page</h1> <h2>titre1</h2> <h3>titre2</h3> <p>du texte normal</p>... Encore plus de balises Autres éléments structurant Listes Mettre en exergue: <em></em> <ul> <li>1er élément</li> <li>2ème élément</li> <li>3ème élément</li> </ul> <p>texte en <em>emphase</em></p> 9
Liens hypertextes Les tables Tout l'intérêt du HTML Balise <a></a> Attribut principal : href <p>lien vers une autre page : <a href="autrepage.html">ici</a> </p> </html> ligne <table> <tr> <td>cel1</td> <td>cel2</td> </tr> <tr> <td>cel3</td> <td>cel4</td> </tr> </table> colonnes Tables Balises <table> <tr> <th>ligne 1, colonne 1 (en-tête)</th> <th>ligne 1, colonne 2 (en-tête)</th> <th>ligne 1, colonne 3 (en-tête)</th> </tr> <tr> <td>ligne 2, colonne 1</td> <td>ligne 2, colonne 2</td> <td>ligne 2, colonne 3</td> </tr> <tr> <td>ligne 3, colonne 1</td> <td>ligne 3, colonne 2</td> <td>ligne 3, colonne 3</td> </tr> </table> 2 types différentes de balise Avec fermeture p.ex. <a href="http://www.equipe.fr">l'equipe</a> Auto fermeture p.ex. <img src="cinema.jpg" alt="cinema Rex" width="400" height="300" /> Balises et attributs (propriétés) Quelques balises Balise : <a> Attribut (propriété) : href Balises avec fermeture : <a href="http://www.equipe.fr">l'equipe</a> <h1>titre important</h1> Titre important <h2>titre moins important</h2> Titre moins importabt <a href="lien.html">texte</a> texte Balises sans fermeture : <br /> Saut de ligne <img src="zidane.jpg" alt="zidane" /> Insère une image 10
Les éléments structurants de HTML 5 <header> </header> En-tête du corps du document <nav> </nav> Eléments de navigations (menu). <section> </section> Contenu de la page. <article> </article> Bloc de contenu <aside> </aside> Une colonne supplémentaire... <footer> </footer> Pied-de page <address> </ address> Adresse à contacter Images La balise <img/> permet de placer une image sur le document Attributs : src : URL de l'image alt : le texte décrivant l'image width : largeur height : hauteur <p>une image </p> <p> <img src="shaun.jpg" alt="shaun" width="100" height="113" /> </p> Images <img src="image.png" /> <img src="image.jpg" width="50%" /> <img src="image.gif" width="20" height="40" /> Réduction du poids des images Logiciel de manipulation d'images JPEG : avec perte, pour les photos GIF : sans perte, compression LZW, pour les animations PNG : sans perte, plus de couleurs Images Images Pour le référencement <img src="image.png" alt= "Photo de Zidane" title = " zidane" /> Pour un chargement fluide <img src="image.png" alt= "Photo de Zidane" title = "zidane" width="800" height="600" /> Lien relatif <img src="image.png" alt= "Photo de Zidane" /> <img src="images/image.png" alt= "Photo de Zidane" /> <img src="../image.png" alt= "Photo de Zidane" /> Lien absolu <img src="http://127.0.0.1/image.png" alt= "Photo de Zidane" /> <img src="z:\_app\php\www\tp1\image.png" alt= "Photo de Zidane" /> <img src="http://www.google.fr/z.jpg" alt= "Photo de Zidane" /> 11
Images Quelques détails Attention à la casse : sous Linux il y a une distinction de minuscules/majuscules <img src="image.png" alt="photo de Zidane" title="zidane" /> HTML Validateur (anglais) : http://validator.w3.org/ <img src="image.png" alt="photo de Zidane" title="zidane" /> 12