conception web 2 méthode

De
Publié par

conception web 2 méthode

Publié le : jeudi 21 juillet 2011
Lecture(s) : 405
Nombre de pages : 10
Voir plus Voir moins
Conception de site web
Une interface dans les grandes lignes.
Ce d o c u m e n t t r ai te d ' u n e p e ti t e p a r ti e d e la r é ali s a tio n d ' u n si t e we b m a i s q u i n ' e n e s t p a s m oi n s i m p o r t a n t : la c r é a ti o n d e la s t r u c t u r e d ' u n e p a g e in t e r n e t. Ce d o c u m e n t e s t d e s ti n é à t o u t e s p e r s o n n e s d é si r a n t a ffi n e r s e s c o n n ai s s a n c e s d a n s l'éla b o r a ti o n d e si t e i n t e r n e t e n r e s p e c t a n t a u m i e u x le s s t a n d a r d s d u w e b W3C p o u r u n e m e ille u r in t e r r o p é r a bili té e t u n e r e c h e r c h e e r g o n o m i q u e. De s u r c r oî t ce s éc ri t s t e n t e n t d ' a p p r o c h e r le s p r a ti q u e s d e c o n c e p ti o n d u we b 2. 0. Ce d o c u m e n t n e t r ai t e p a s d u d e sig n, n i d e s t e c h n ol ogie s s e rve u r. Il n e t r ai t e p a s n o n p l u s d e la p r é s e n t a ti o n e n Fra m e s e t.
Pré  r e q ui s : n o ti o n d u b ali s a g e h t m l, c s s e t c ul t u r e in t e r n e t.
I La base du html / xhtml
Lor s q u e l'o n n avig u e s u r i n t e r n e t o n u tili s e u n n a vig a t e u r (br ow s e r e n a n glai s) t el q u e In t e r n e t Expl o r e r, Firef ox, O p e r a ... Ce s n a vig a t e u r s vo n t i n t e r p r e t e r le c o d e h t m l d ' u n e p a g e we b p o u r a ffic h e r s o n c o n t e n u (tex t e s, i m a g e s...) m i s e n f o r m e. O n p e u t voi r le c o d e h t m l d ' u n e p a g e d e p u i s u n n a vig a t e u r e n cliq u a n t s u r « a f fic h e r le c o d e s o u r c e » (Le r a c c o u r ci Ct rl +U p e r m e t a u s si d e f air e ce t t e a c ti o n s el o n le n a vig a t e u r). Po u r c r é e r u n e p a g e we b n u l b e s oi n d ' u tilise r u n logiciel u l t r a  m o d e r n e e t u l t r a  p a y a n t, u n bl ocN o t e s u f fi t.
Nb: Ch a q u e n a vig a t e u r n ' a ffic h e p a s ex ac t e m e n t la m ê m e d i s p o si ti o n d ' u n e m ê m e p a g e. Ain si il e s t n é c e s s ai r e d e c r é e r d e s p a g e s vali d e s a u x s t a n d a r d s W3C p o u r s e r a p p r o c h e r a u m i e u x d e ce q u e l'o n s o u h ai t e. Evite z al o r s d e t r o p u tilis e r le s é di t e u r sWYSIWYGc a r o n ve u tu e l'o n ex ac t e m e n t ce q o b tie n t ja m ai s (WYSINAWYG).
Davi d Epely  2 0 0 7 / 2 0 0 8
Org a ni s e r s o n t r av ail : Cré e r u n d o s sie r d é d i é à u n si t e o u à u n p r o j e t. À l'in t e rie u r c r é e r u n n o u v e a u fic hie r q u e l'o n n o m m e r a « i n d ex. h t m » (l'ex t e n sio n e s t i m p o r t a n t e). Un d o u bl e cli q u e p e r m e t d e le f air e a ffic h e r d a n s u n n avig a t e u r (ce s e r a u n e b elle p a g e vi d e) e t u n cli q u e d r oi t > « o uv rir av ec u n é di t e u r d e t e x t e » p e r m e t t r a d e m o d ifie r c e t t e p a g e in t e r n e t.
1.
Le DOCTYPE En p r e mie r lie u il f a u t d é fi ni r le d o c ty p e. Cel ui  ci s p é cifie le s t a n d a r d u tilis é p o u r éc ri r e la p a g e. h t m l le s cla s si q u e, HTML s b ali s e s : la 4. 0 1 h t m l n g a g e o n t éc rit e s e n m a j u s c ule. Je d é c o n s eille cel ui  ci c a r il n ' o f f r e p a s l'i n t e r o p e r a bilit é n é c e s s ai r e a u j o u r d ' h ui e t le c o d e h t m l d e vie n t vite c h a r g é e t p e u lisible. : Ce d o c ty p e x h t m l 1. 0  t r a n si tio n al r é é c rir e d e s p e r m e t d e p a g e s e n h t m l 4. 0 1 e n s o u p le s s e. : Le m x h t m l 1. 0  s t ric t m o y e n e ille u r s e p o u r a u p r e p a r e r x h t m l 1. 1 x h t m l 1. 1 : La d e r ni è r e ve r si o n d u s t a n d a r d W3C
Pre n e z vo t r e fic hie r « i n d e x. h t m » e t in di q u e z le d o c ty p e q u e vo u s s o u h ai t e z u tilis e r. (pl u s d 'i n f o r m a ti o n e t u n e lis t e d e s d o c ty p e s e s t visi ble s u r le si t eAls a c r e a tio n) Nb: éc ri r e u n co m m e n t ai r e e n h t m l : < !   ceci e s t u n c o m m e n t ai re   >
fichier : index.htm < ! D O C T Y P E h t m l P U B L I C " - / / W 3 C / / DT D X H TML 1.0 Stric t// EN"  " h t t p : / / w w w. w 3 . o r g / T R / x h t m l 1 / DT D / x ht ml1 -stric t.d td" >
Davi d Epely  2 0 0 7 / 2 0 0 8
2. Pre mi èr e s bali s e s p a g e d ' u n e d é fi nie e s t h t m l En x élé m e n t c h a q u e e s b alis e s :e t p o si ti o n n é g r â c e à d < b a li s e > q ui d oive n t ê t r e f e r m é e s : < / b a li se > , il exi s t e a u s si d e s b ali se s a u t o  fe r m a n t e s : < b a li s e / > . Ecrivo n s m a i n t e n a n t la s t r u c t u r e d e n o t r e p a g e h t m l.
fichier : index.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> < h t m l > < h e a d > < ! - - i c i s e t ro u v e l ' e n têe l a p a g e h t m l , c e l l e - c i n ' es tte d p a s d i r e c te m e n t a ffi c hé- - >n av ig a te u r u n  d a n s
< t i t l e > B i e nv e n u e < / t i t l e > < ! - - L e t i t r e d e l a p a g e . - - >
< / h e a d > < b o d y > < h 1 > H e l l o w o rl d ! < / h 1 > < ! - - L e c o r p s d e p a g e a ffi c h e l e sélé( m e d i a ) m e n t s v aq u ' o n l u i i n te g r e r - - > < / b o d y > < / h t m l >
En o u v r a n t c e t t e p r e m i è r e é b a u c h e d a n s u n n avig a t e u r o n ve r r a a p p a r aî t r e u n joli « Hello w o rl d ». Cel ui  ci e s t e n t o u r é d e la b ali s e < h 1 > , o n lui in di q u e ai n si q u e c'e s t u n ti t r e : He a dli n e.
NB: En x h t m l, t o u t e s le s b ali s e s s ' éc rive n t e n m i n u s c ul e. NB2: O n voi t d a n s la b ali s e < h e a d > s e u l e m e n t u n ti t r e, bie n s û r ce n e s e r a p a s s u f fi s a n t p o u r si t e co m pl e t. Les b ali s e s < m e t a / > s o n t u t ile s a u r é f é r e n c e m e n t. Pl u s loi n d a n s ce d o c u m e n t o n ve r r a a p p a r aî t r e l'i m p o r t a ti o n d e fic hie r c s s.
Davi d Epely  2 0 0 7 / 2 0 0 8
3.
< t a bl e > n'e s t pa s fait p o ur fair e la m i s e e n f or m e d'u n e pa g e
En h t m l 4. 0 1 o n u tilis ai t e s s e n ti elle m e n t le s t a ble a u x p o u r m e t t r e e n f o r m e le s p a g e w e b. Le s o u ci s a r rive lo r s q u e l'o n i m b ri q u e p l u sie u r s t a ble a u x. O n s e r e t r o u v ai t r a pi d e m e n t avec d e s s o u r c e s a b s ol u m e n t illisible s e t d ifficile m e n t m a i n t e n a ble s.
Le x h t m l o f f r e u n e n o u v elle visi o n; s é p a r e r le c o n t e n u d e la p r é s e n t a ti o n. Ce s o n t le s fic hie r s .c s s (ca sc a di n g s t yle s h e e t) q ui s ' o cc u p e r o n t d e l'a p p a r e n c e. Le x h t ml s ' oc c u p e r a d e d é fi ni r le c o n t e n u : < h 2 > : u n ti t r e n e d ivisio n< d iv > : u lis t en e : u < u l > < p > : u n p a r a g r a p h e e t c.
Co m m e n ç o n s p a r u n m o d èl e d e p a g e si m p l e m a i s p e r ti n a n t. fichier : index.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Ma première page web2.0</title> </head> <body> < d i v i d = " p a g e " > < d i v i d = " h e a d e r " > < h 1 > H e l l o w o rl d ! < / h 1 > < / d i v > < d i v i d = " s i d e b a r " > < / d i v > < d i v i d = " c o n te n t " > < / d i v > < d i v i d = " fo ote r " > < / d i v > < / d i v > </body> </html>
Davi d Epely  2 0 0 7 / 2 0 0 8
Po u r l'in s t a n t rie n d 'i m p r e s si o n n a n t à l'affic h a g e d e ce t t e p a g e m ai s o n a p r e p a r é le t e r r ai n.
O n voit a p p a r aî t r e id = »i d e n tifia n t» : o n i d e n tifie le s d ivisio n s, elle s s o n t u n i q u e s. Pa r la s u i t e o n le s p e r s o n n a li s e r a ave c le c s s. Un e d ivi sio n e n gl o b a n t e (# p a g e) p e r m e t t r a d e c h a n g e r f acile m e n t la p r é s e n t a ti o n d e la p a g e. Pe n s e z à l'i n d e n t a ti o n, ceci p e r m e t d e m i e u x s e r e p é r e r s u r la s o u r c e d ' u n e p a g e.
4. Un p e u d e c o n t e n u O n va r a j o u t e r vite f ai t u n p e u d e c o n t e n u p o u r av oir d e la m a tiè r e à t r a v aille r.
fichier : index.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Ma première page web2.0</title> </head> <body> <div id="page"> <div id="header"> <h1>Hello world!</h1> </div> <div id="sidebar"> < h 3 > M e n u < / h 3 > < u l > < l i > m e n u 1 < / l i > < l i > m e n u 2 < / l i > < / u l > </div> <div id="content"> < h 2 > M a p a g e < / h 2 > < p > Un p e u d e c o n te n uài c i < / p > raj o u te r </div> <div id="footer"> < a h r e f = " i n d e x . h t m " t i t l e = " l i e n i n u t i l e"> lie n s ur l a p a g e < / a > </div> </div> </body> </html>
Davi d Epely  2 0 0 7 / 2 0 0 8
O n va al o r s av oi r n o s d i ffé r e n t s élé m e n t s d e la p a g e s ' a ffic h e r à la s ui t e. Il exis t e d e u x ty p e s d e b alis e s : Pa r ex e m p led e s a u t r e s. a u d e s s o u s le s u n s alis e s s ' a ffic h e n t : ce s b t y p e bl oc < d iv > , < p > , < h 1 > ... s ' a ffic h e n t elle s  ci : c inli n e t y p e :i r e à la s ui t e. Exe m ple e n lig n e, c'e s t à d < s p a n > < a > ...
Un e d e r niè r e c h o s e av a n t d e p a s s e r a u x c s s, à p a r ti r d e m ai n t e n a n t la p a g e e s t vali d e a u t e s t W3C e t elle d oi t le r e s t e r. Po u r t e s t e r ce s p a g e s o n p e u t u tilise r le t e s t e n lig n e :o.gr/tth//p:livatodaw3r.d e fir ef ox (le s u tilis a t e u r s e s s a y e rp e u v e n t le p l u gi nHt ml vali d a t o re s t t r è s p r a ti q u e e t i n t ui tif).je d q u i d i r e oi s
5.
Cs s : initiali sati o n
Il exis t e p l u sie u r s m é t h o d e s p o u r i ncl u r e d u c s s, s oi t d i r ec t e m e n t d a n s le s b alis e s h t m l, s oi t d a n s l'e n t ê t e o u e n c o r e d a n s u n a u t r e fic hie r. Co m m e je l'i n di q u ai s p r é c é d e m m e n t o n c h e r c h e m a i n t e n a n t à s é p a r e r a u m a xi m u m le c o n t e n u d e la p r é s e n t a ti o n.
O n va d o n c c r é e r u n (o u p l u si e u r s) n o u v e a u(x) fic hie r(s) q u e l'o n p e u t n o m m e r p a r exe m p le « d e f a ul t.c s s ».
NB : Vo u s ave z r e m a r q u é, je n ' u tili s e q u e l'a n gl ai s d a n s m e s i d e n tifia n t s h t m l e t d a n s le s n o m s d e fic hie r s. Ceci p o u r d e u x r ai s o n s : 1  O n p e u t ê t r e a m m e n é à t r availle r avec d e s é t r a n g e r s e t il fa u t u n la ng ag e c o m m u n e t clai r. 2  Ess ay e z d ' o u v ri r u n e p a g e s u r in t e r n e t n o m m é « d é f a u t. h t m », le « é » va gé n é r e r u n co d e c a r ac t è r e r ela tive m e n t h o r ri ble. De la m ê m e m a ni è r e p o u r vo t r e d o s si e r d e t r av ail : p a s d ' e s p a c e (%20) n i d e ca r ac t è r e s s p é cia ux.
Davi d Epely  2 0 0 7 / 2 0 0 8
O n l'i m p o r t e al o r s d a n s n o t r e i n d e x. h t m
fichier : index.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Ma première page web2.0</title> < l i n k r e l = " s tyl e s h e et " t y p e = " te x t / c s s " href= "defa ult .cs s" m e d i a = " s c r e e n " / > </head> <body> <div id="page"> <div id="header"> <h1>Hello world!</h1> </div> <div id="sidebar"> <h3>Menu</h3> <ul> <li>menu 1</li> <li>menu 2</li> </ul> </div> <div id="content"> <h2>Ma page</h2> <p>Un peu de contenuàrajouter ici</p> </div> <div id="footer"> <a href="index.htm" title="lien inutile">lien sur la page</a> </div> </div> </body> </html>
6.Jou o n s : u n e u n p e u e n f or m epr e m i èr e m i s e O n d é ci d e q u e n o t r e p r é s e n t a ti o n va s e f ai r e a s s e z si m p l e m e n t : d e c o ul e u r f o n c ée u : bl f o n d p a g e : f o n d bl a n c, 6 0 0 p x ce n t r é e av ec u n e b o r d u r e d e 1 p x g ri s e d e c o ul e u r : g t ex t e f o n c éri s o r a n g e: s élec ti o n lie n s t é d r oi tu r le cô m e n u : s o r d u r e : b Tit r e s b a se n 2 p x e u p âl e avec u n e p i e d d e p a g e : bl e t p e ti t.b o r d u r e p o i n tillée, t ex t e ce n t r é
Davi d Epely  2 0 0 7 / 2 0 0 8
Il s u ffit d e r e m p lir n o t r e fic hie r d e f a ul t.c s s
default.css /* Un commentaire */ /* Blocs */ body{ margin : 0; padding : 0; background-color : #2F2F4F; /*couleur des textes mais pas de liens!*/ color : #666; } #page{ width : 600px; /*permet de centrer la page sans avoir besoin d'utiliser text-align */ margin : 10px auto; border : 1px solid #333; background-color : #fff; } #sidebar{ /*le menu est flottant sur le cotédroit*/ float : right; width : 150px; } #content{ /*le contenu ne passera pas dessus le menu*/ width : 430px; } #footer{ padding : 4px; text-align : center; border-top : 1px dotted #999; background-color : #E6E8FA; font-size : 0.8em; } /*Texts*/ a{ color : #666; text-decoration : none; } a:hover{ background-color : #E47833; } h2{ border-bottom : 2px solid #999; }
Davi d Epely  2 0 0 7 / 2 0 0 8
7.
La finitio n
O n a p r e s q u e t e r m i n é. La p a g e à l'ai r d e s ' a ffic h e r c o r r ec t e m e n t s u r IE ... m a i s u n p e ti t p r o blè m e s u r Firef ox, le p i e d d e p a g e p a s s e p a r d e s s u s le m e n u. Firef ox u n p r o blè m e?! En r é ali t é : n o n. O n a s p e cifié le m e n u c o m m e flo t t a n t d o n c le p ie d d e p a g e va s e c olle r s o u s le c o n t e n u, c e q ui e s t logi q u e e n fi n d e c o m p t e. Voici la p e ti t e a s t u c e p o u r r é gle r ça. Il f a u t r a j o u t e r u n e b a r r e h o ri z o n t ale < h r / > e n d e s s o u s d u c o n t e n u e n m e t t a n t à jo u r le s nive a u x g r â c e a u c s s :
index.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Ma première page web2.0</title> <link rel="stylesheet" type="text/css" href="default.css" media="screen" /> </head> <body> <div id="page"> <div id="header"> <h1>Hello world!</h1> </div> <div id="sidebar"> <h3>Menu</h3> <ul> <li>menu 1</li> <li>menu 2</li> </ul> </div> <div id="content"> <h2>Ma page</h2> <p>Un peu de contenuàrajouter ici</p> </div> < h r c l a s s = " c l e a r " / > <div id="footer"> <a href="index.htm" title="lien inutile">lien sur la page</a> </div> </div> </body> </html>
Davi d Epely  2 0 0 7 / 2 0 0 8
Puis a u n ive a u d u c s s il f a u t r a j o u t e r u n e cl a s s e :
default.css [...] h r. c l e a r { c l e a r : b ot h ; / * o n c a c h e l a b ar r e * / v i s i b i l i t y : h i d d e n ; } [...]
NB : En Cs s le s cl a s s e s à la d i ffé r e n c e s d e s i d e n tifia n t s p e uv e n t r é u tili s é s d a n s u n e p a g e.
8.
C'e st fini.
Je r a j o u t e r ai p e u t ê t r e d a n s u n e n o u v elle ve r sio n d e c e d o c u m e n t d ' a u t r e s m o d èle s d e p a g e e t l'i n t é g r a ti o n d ' e ff e t s j av a s c ri p t q ui f o n t la n o t o rié t é d u we b 2. 0. Néa n m oi n s je p r é s e n t e u n m o d èl e d e n avig a ti o n m ai s il e n exis t e b e a u c o u p. Je vo u s invit e à je t e r u n o eil àh t t p: / / w w w. n avig a tio n  we b.c o m, u n livr e q ui p r o p o s e u n e s oix a n t ai n e d e m o d è le s d e n aviga ti o n. Puis p o u r av a n c e r u n p e u p l u s d a n s l'éla b o r a ti o n d e p a g e s e r g o n o m i q u e s, p l ei n d ' a s t u c e s e t u n e c o m m u n a u t é t o u j o u r s g r a n di s s a n t e à l'aff û t d ' u n in t e r n e t p l u s b e a u e t m e ille u r : h t t p: / / w w w.als ac r e a ti o n s.c o mo u r . Et p u n fi nir d e p e u avec le si d e sig n t e h t t p: / / w w w.c ry s t alx p. n e tq ui a x e le s c r é a ti o n s vi s u elle s a u t o u r d ' u n s t yle c ry s t al e t ai n si t r o u v e r u n p e u d 'i n s pi r a ti o n si n é c e s s ai r e.
Davi d Epely  2 0 0 7 / 2 0 0 8
Soyez le premier à déposer un commentaire !

17/1000 caractères maximum.