Modex Web

tonguescurlyΛογισμικό & κατασκευή λογ/κού

17 Νοε 2012 (πριν από 4 χρόνια και 8 μήνες)

395 εμφανίσεις

ANNÉE 2009
-
2010


COURS 1


27 JANVI ER



DOMI NI QUE ROSSI N

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

Perl

Windows

Linux

MacOs

Environnement


Environnement de développement


Comment ca marche ?

Ecole Polytechnique

http://www.polytechnique.fr/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

E
X
tensible

H
yper
T
ext
M
arkup

L
anguage


<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

<
u
l>

<li>Premier élément</li>

<li>Second élément</li>

</
u
l>

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 Web


Menus



<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éfini


Possibilité de modifier le style


Exemple:


<
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 blocs


Titre

Menu

Pied page


3
colonnes
à la une

Feuilles de style : CSS


CSS :
Cascading

Style
Sheets


Exemple 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

/ normal


font
-
weight
:
normal/
bold
/
bolder
/
lighter
/100
-
900


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, 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.css

h1 {


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.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
;

}

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 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


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

margin

border

padding

Contenu de l’élément

top

bottom

left

right

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 projets

2.
En discuter avec un enseignant

3.
Rédiger une demi
-
page de description

4.
S’inscrire 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 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 portables

2.
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