Embed Size (px)
Citation preview
ANNÉE 2009-2010
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 d’un site Web Conception d’un 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) L’aprè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 d’un site Langage de programmation PHP Ecriture d’un document
Le fond : HTML La forme : CSS
Bases de données
De l’ouverture (~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 d’un 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, d’une 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 Mysql
Base de données
PHP
PerlWindows
LinuxMacOs
Environnement
Environnement de développement
Comment ca marche ?
Ecole Polytechnique
http://www.polytechnique.fr/index.html
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
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>Title goes here</title> </head><body>
<p>Voici ma première page</p></body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html
head
title
body
p
Balises sections
<body><h1>Gros titre</h1>
<p>Voici mon paragraphe</p><h2>Chapitre</h2><h3>Section</h3><h4>Sous-section</h4><h5>Paragraphe</h5><h6>Sous-paragraphe</h6>
</body>
Les listes
Ordonnées<ol><li>Premier élément</li><li>Second élément</li></ol>
Ordered List
List Item
Non Ordonnées<ul><li>Premier élément</li><li>Second élément</li></ul>
Unordered List
List Item
Les listes (bis)
Une liste est considéré comme un bloc de texte
<p>Le chat est-il: <ol> <li>Mort ?</li> <li>Vivant?</li> </pl></p>
<p>Le chat est-il:</p><ol>
<li>Mort?</li><li>Vivant</li>
</ol>
Images img
<img src=« Images/fond.jpg » alt=« Affichage d une aide texte » />
Problème de taille
<img src=« Images/fond.jpg » alt=« Affichage d une aide texte » style=«width:500px» />
Liens
Navigation entre les pages WebMenus
<a href=« http://… »>lien</a>Un exemple:<p>Vous pouvez trouver plus d’informations
en cliquant <a href=« http://… »> ici </a>.</p>
Adresse de la page cible
Style
Chaque balise a un style prédéfiniPossibilité de modifier le styleExemple:<span>Hello</span><span
style=« color:#FF0000 »>Hello</span>
<span style=« background-color:#FF0000 »>Hello</span>
<span style=« font-family:cursive »>Hello</span>
Hello
Hello
Hello
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</h2>
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 d’une page en blocsTitre
Menu
Pied page
3 colonnes à la une
Feuilles de style : CSS
CSS : Cascading Style SheetsExemple de document:<body><p style="text-align:justify; color:gray; font-family:sans-serif"> 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.
</p><p style="text-align:justify; color:gray; font-family:sans-serif"> 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. </p><p style="text-align:justify; color:gray; font-family:sans-serif"> 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. </p></body>
Exemple : css1.css
/*
<p style="text-align:justify; color:gray; font-family:sans-serif"><p class=" parNormal ">
*/.parNormal { text-align:justify; color:gray; font-family:Times Verdana sans-serif; font-size:12pt;}
Index.html
<html><head><link rel="stylesheet" href="css1.css" />…</head><body><p style="text-align:justify; color:gray; font-family:sans-serif"><p class="parNormal" >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.
</p></body></html>
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 class=“aligneGauche styleAncien“>
<p class= “styleTexte”> … <span class= “styleTexte”>
p.styleTexte {font-size:16pt;
}
Changer les balises
On peut redéfinir le style par défaut des balises.
Tous les éléments <h1> et <p> du document sont affectées
h1 {color:blue;font-family:helvetica;
}p {
font-family:verdana;color:grey;
}
Mémo sur le style du texte
font-style : italic / oblique / normalfont-weight: normal/bold/bolder/lighter/100-
900 Ecrit en caractères gras. 100, 200, …, 900 : Du – gras au + gras
font-variant: normal / small-capsfont-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, h2, h3, h4, h5 {font-family: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;
}
Héritage et CSS
Exemple :
On veut que le em soit bleu.
Style.cssh1 {
color:red;}
Index.html<h1>En allemand, boire se dit <em>trinken</em></h1>
Trinken ?Trinken ?Style.css
h1 {color:red;
}em {
color:blue;}
Problème:Tous les em
du document sont bleus
Style.cssh1 {
color:red;}h1 em {
color:blue;}
Sélecteur contextuel, héritage et conflit
On peut mélanger Class Balise héritage
Style.cssul li {
color:red;}ul ul li {
color yellow;}
Index.html<ul><li>Element 1<ul><li> Ss-elt 1 </li><li> Ss-elt 2 </li></ul></li></ul>
Couleur ?
•Elément 1• Ss-elt1• Ss-elt2 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
parP:first-letter {font…} Première lettreXXX:hover {color:red} Lorsque la
souris passe dessus
Les blocs
Chaque bloc est une entité : Le menu Une nouvelle Le pied de page L’entête
En html un bloc <div>
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
<div style="background-color:red; ">Hello
</div><div style="background-color:green;
" >World</div>
Style et Espacement
marginborder
padding
Contenu de l’élément
top
bottom
leftrig
ht
Exemple d’espacement
<div style="background-color:red; border:solid green 7px; padding:30px; margin:30px; ">
Hello</div>
<div style="background-color:green; border:solid green 2px; padding:30px; margin:30px; ">
World</div>
Aligner deux div
<div><div style="float:left; width:200px;
background-color:blue">1</div><div style="float:left;
width:200px;background-color:red">2</div></div>
fond
Réaliser une page
Entete
<div > <div style="margin:10px; ">
Entete </div> <div style="margin:10px; "> <div style= "float:left;width:20% ">
menu </div> <div style= "float:left;">
<div style= "float:left;width:30%">
Colonne 1</div> …
</div>
</div><div style= " clear:both; " >Pied Page</div></div>
Projets
1. Penser aux projets2. En discuter avec un enseignant3. Rédiger une demi-page de description4. S’inscrire en binôme
Pourquoi choisir tôt ?1. Plus de temps pour le réaliser2. 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 l’utilisateur
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 d’associations Gestion des membres …
Gestion de collection BD Gestion des emprunts
Cet après midi
1. Amener les portables2. Télécharger chez vous si
possible sur la page du TD eclipse ou netbeans (même sans l’installer)
3. Premières pages Web
