ANNÉE COURS 1 – 27 JANVIER DOMINIQUE ROSSIN Modex Web

Objectifs du Modex Comprendre: Les évolutions des sites Web depuis 15 ans Les nouveaux medias de la communication Plus particulièrement: Le fonctionnement dun site Web Conception dun document : contenu / style Les moteurs de recherche Réaliser un projet dans des conditions « réelles »

Organisation Cours et ouverture: (Amphi Lagarrigue) Le matin 10H30 – 12H Travaux pratiques, projet: (Salles machines) Laprès-midi : 13H30 – 18H (34-35) Dates : Vendredi 29 Janvier, vendredi 5 février, vendredi 12 février, vendredi 19 février, vendredi 5 mars, vendredi 12 mars, vendredi26 mars, vendredi 2 avril, vendredi 9 avril Soutenances: 12 avril – 19 avril

Fonctionnement (9 séances) Quelques cours (~5) : Les bases : Structure dun site Langage de programmation PHP Ecriture dun document Le fond : HTML La forme : CSS Bases de données De louverture (~3-4) Problèmes de sécurité Moteurs de recherche Podcasts, Google maps… Javascript

Fonctionnement Un projet: Définition du projet Travail en binôme de préférence Définition dun cahier des charges avec un enseignant Un enseignant référant du projet pour assurer le suivi Le corps du projet réalisé en TP Apparence, gestion des menus, dune base de données, mini-flickr Les spécialisations à réaliser soi-même Ex: Base de recettes -> gestion de la BD Musique -> téléchargement de gros fichiers

Fonctionnement Travail sur portable

Environnement de travail Installer un serveur Web, le langage php, Mysql (base de données), …………. XAMPP Démonstration : Lancement de xampp et affichage web localhost Apache Serveur Web Apache Serveur Web Mysql Base de données Mysql Base de données PHP Perl Windows Linux MacOs Windows Linux MacOs

Environnement Environnement de développement

Comment ca marche ? Ecole Polytechnique C:\xampp\htdocs\index.html

(X)HTML 1989: Tim Berners- Lee invente le Web et HTML comme langage 1991: Discussion sur internet à propos de HTML 1993 : Premiers Navigateurs (lynx, mosaic, …) 1994: Création du consortium World Wide Web 1995 : HTML3 IE 1998 HTML4

EXtensible HyperText Markup Language Title goes here Voici ma première page Title goes here Voici ma première page html head title body p

Balises sections Gros titre Voici mon paragraphe Chapitre Section Sous-section Paragraphe Sous-paragraphe

Les listes Ordonnées Premier élément Second élément Ordered List List Item Non Ordonnées Premier élément Second élément Unordered List List Item

Les listes (bis) Une liste est considéré comme un bloc de texte Le chat est-il: Mort ? Vivant? Le chat est-il: Mort? Vivant Le chat est-il: Mort? Vivant

Images img Problème de taille

Liens Navigation entre les pages Web Menus lien Un exemple: Vous pouvez trouver plus dinformations en cliquant ici. Adresse de la page cible

Style Chaque balise a un style prédéfini Possibilité de modifier le style Exemple: Hello

Style On peut modifier le style par défaut des balises <h2 style="background-image:url(Images/fond.jpg'); text-align:center; color:white">INF 441a

Validation Vérification que le document est bien écrit: Site W3C validator Plugin Web Developper pour firefox Firebug : Un peu similaire à Web Developper mais complémentaire.

But Décomposition dune page en blocs Titre Menu Pied page 3 colonnes à la une

Feuilles de style : CSS CSS : Cascading Style Sheets Exemple de document: Premier paragraphe de texte avec un style. Si je veux faire un second paragraphe il faut que je répète tous les ordres de style. On pourrait alors penser changer le comportement par défaut à la balise p mais dans le cas où notre document alterne entre plusieurs styles, alors cette méthode ne fonctionne plus. Heureusement, il y a une possibilité de définir des noms de style, un peu à la mode de word et d'appliquer facilement un style d'un certain nom à une balise. Il suffit pour cela d'utiliser les attributs class des feuilles de style. Premier paragraphe de texte avec un style. Si je veux faire un second paragraphe il faut que je répète tous les ordres de style. On pourrait alors penser changer le comportement par défaut à la balise p mais dans le cas où notre document alterne entre plusieurs styles, alors cette méthode ne fonctionne plus. Heureusement, il y a une possibilité de définir des noms de style, un peu à la mode de word et d'appliquer facilement un style d'un certain nom à une balise. Il suffit pour cela d'utiliser les attributs class des feuilles de style.

Exemple : css1.css /* */.parNormal { text-align:justify; color:gray; font-family:Times Verdana sans-serif; font-size:12pt; }

Index.html … Premier paragraphe de texte avec un style précis pour faire beau. Malheureusement si je veux faire un second paragraphe il faut que je répète tous mes ordres de style. Lien vers la feuille de style Élément de la classe parNormal

Règles On peut combiner les classes Une classe peut être utilisée pour plusieurs éléments On peut restreindre un style à une balise dans le CSS: … p.styleTexte { font-size:16pt; } p.styleTexte { font-size:16pt; }

Changer les balises On peut redéfinir le style par défaut des balises. Tous les éléments et du document sont affectées h1 { color:blue; font-family:helvetica; } p { font-family:verdana; color:grey; } h1 { color:blue; font-family:helvetica; } p { font-family:verdana; color:grey; }

Mémo sur le style du texte font-style : italic / oblique / normal font-weight: normal/bold/bolder/lighter/ Ecrit en caractères gras. 100, 200, …, 900 : Du – gras au + gras font-variant: normal / small-caps font-size: xx-small / x-small /.. / x-large / xx-large larger / smaller 12pt … 80%

Regrouper les éléments On veut avoir une police helvetica pour toutes les entêtes (h1,h2,h3,h4,h5) On veut définir tous les attributs de la police h1 { font-family:helvetica; } h2 { font-family:helvetica; } h3{ font-family:helvetica; } … h1 { font-family:helvetica; } h2 { font-family:helvetica; } h3{ font-family:helvetica; } … h1, h2, h3, h4, h5 { font-family:helvetica; } h1, h2, h3, h4, h5 { font-family:helvetica; } h1 { font: bold 12pt/14pt helvetica; } h1 { font: bold 12pt/14pt helvetica; } h1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: helvetica; font-variant: normal; font-style: normal; } h1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: helvetica; font-variant: normal; font-style: normal; }

Héritage et CSS Exemple : On veut que le em soit bleu. Style.css h1 { color:red; } Style.css h1 { color:red; } Index.html En allemand, boire se dit trinken Index.html En allemand, boire se dit trinken Trinken ? Style.css h1 { color:red; } em { color:blue; } Style.css h1 { color:red; } em { color:blue; } Problème: Tous les em du document sont bleus Style.css h1 { color:red; } h1 em { color:blue; } Style.css h1 { color:red; } h1 em { color:blue; }

Sélecteur contextuel, héritage et conflit On peut mélanger Class Balise héritage Style.css ul li { color:red; } ul ul li { color yellow; } Style.css ul li { color:red; } ul ul li { color yellow; } Index.html Element 1 Ss-elt 1 Ss-elt 2 Index.html Element 1 Ss-elt 1 Ss-elt 2 Couleur ? Elément 1 Ss-elt1 Ss-elt2 Elément 1 Ss-elt1 Ss-elt2 Style.css ul.listeBleu li em { color:red; } Style.css ul.listeBleu li em { color:red; }

Pseudo élément (CSS) A:link { color:red} Lien non visité A:visited {color:blue} Lien visité A:active {color:green} Lien actif (clic) P:first-line {color:red} Première ligne du par P:first-letter {font…} Première lettre XXX:hover {color:red} Lorsque la souris passe dessus

Les blocs Chaque bloc est une entité : Le menu Une nouvelle Le pied de page Lentête En html un bloc Un bloc possède une largeur

div Par défaut un bloc prend toute la largeur possible Deux div successifs sont donc les uns sous les autres Hello World Hello World

Style et Espacement margin border padding Contenu de lélément top bottom left right

Exemple despacement Hello World Hello World

Aligner deux div

fond Réaliser une page Entete Entete menu Colonne 1 … Pied Page

Projets 1. Penser aux projets 2. En discuter avec un enseignant 3. Rédiger une demi-page de description 4. Sinscrire en binôme Pourquoi choisir tôt ? 1. Plus de temps pour le réaliser 2. Aide à la réalisation pendant les séances

Contenu des projets Contenu Une gestion utilisateur Compte utilisateur Personnalisation Mot de passe Un contenu Stockage de données dépendant de lutilisateur

Exemples Site de binet Annuaire des membres Abonnement à une liste de diffusion Agenda Compétition Site de partage Site de partage de photos Compte utilisateur Notation de photos

Exemples (2) Gestion de Blog Site dassociations Gestion des membres … Gestion de collection BD Gestion des emprunts

Cet après midi 1. Amener les portables 2. Télécharger chez vous si possible sur la page du TD eclipse ou netbeans (même sans linstaller) 3. Premières pages Web