Conception Web2.0 v1

40 %
60 %
Information about Conception Web2.0 v1

Published on November 15, 2007

Author: esion

Source: slideshare.net

Description

Ce document propose un modèle de page en xhtml et css dans le respect des standards W3C et dans une optique de conception web2.0. Ceci présente alors un résumé de bonnes pratiques pour un débutant désirant créer un site, un modèle de page ou un template pour cms.

Conception de site web Une interface dans les grandes lignes. Ce d oc u m e n t t r aite d' u n e p e tite p a r tie d e la réalisa tio n d' u n site web m ai s q ui n 'e n e s t p a s m oi n s im p o r ta n t : la créatio n d e la s t r uc t u re d' u n e p age inter n e t. Ce d oc u m e n t es t d e s ti né à t o u te s p e r s o n n e s d é sira n t affiner s e s co n n ais s a nce s d a n s l'élab o ra tio n d e site inter ne t e n res p ecta n t a u mie ux les s t a n d a r d s d u web W3C p o u r u n e m eille ur inte rro pé r a bilité et u n e rec herc he ergo n o miq ue. De s u rcr oît ces écrit s t e n t e n t d' a p p r oc he r les p r a tiq ue s d e co nce p tio n d u web2.0. Ce d oc u m e n t n e t raite p a s d u d e sign, ni d e s tec h n ologies s e rve u r. Il n e t r aite p a s n o n pl u s d e la p ré se n t a tio n e n Fra m e s et. Pré - r e q uis : n o tio n d u b alisage h t ml, cs s e t cult u re inter ne t. I La base du html / xhtml Lors q ue l'on n avigue s u r inter ne t o n u tilise u n n avigate u r (brows er e n a nglais) t el q u e Inter ne t Explorer, Firefox, Opera ... Ces n avigate u r s vo n t in te r p r e te r le co de h t ml d' u n e p age web p o u r affiche r s o n co n te n u (textes, images...) mi s e n for m e. On p e u t voir le co de h t ml d' u n e p age d e p uis u n n avigate u r e n cliq ua n t s u r « affiche r le co de s o u rce » (Le racco u rci Ctrl +U p e r m e t a u s si d e faire cet te actio n s elo n le n avigate u r). Pour créer u n e p age web n ul be s oin d ' u tiliser u n logiciel ult ra - m o d e r n e e t ult ra - p aya n t, u n blocNote s uffit. Nb: Cha q ue n avigate u r n'affiche p a s exacte m e n t la m ê m e dis p o sitio n d' u n e m ê m e p age. Ainsi il es t n éce s s aire d e créer d e s p age s valides a ux s t a n d a r d s W3C p o u r s e r a p p r oc he r a u mie ux d e ce q ue l'o n s o u h aite. Evite z alor s d e t ro p u tiliser les é dite u r s WYSIWYG car o n ob tie n t ja m ais exacte m e n t ce q u e l'on ve ut (WYSINAWYG). David Epely - 2 0 0 7 / 2 0 0 8

Orga nise r s o n t ravail : Créer u n d o s sier d é dié à u n site o u à u n p r oje t. À l'interie u r créer u n n o uvea u fichier q ue l'o n n o m m e ra « in dex.ht m » (l'exte n sio n e s t im p o r t a n t e). Un d o u ble clique p e r m e t d e le faire affiche r d a n s u n n avigate u r (ce s er a u n e belle p age vide) et u n cliq ue d r oit > « o uvrir avec u n é dite u r d e texte » p e r m e t t r a d e m o difier cet te p age inte r ne t. 1. Le DOCTYPE En p r e mier lieu il fa u t d éfinir le d oc ty pe. Celui - ci s p écifie le s t a n d a r d u tilisé p o u r écrire la p age. h t ml 4.01 : la ngage h t ml clas siq ue, les b alises HTML s o n t écrites e n • m aj u sc ule. Je d éco n seille celui - ci car il n'offre p a s l'inte ro p e ra bilité n éces s aire a ujo u r d' h ui et le co de h t ml d evien t vite chargé et p e u lisible. xh t ml1.0 - t r a n sitio nal : Ce d oc ty pe p e r m e t d e réécrire d e s p age s e n • h t ml 4.01 e n s o u ple s s e. xh t ml1.0 - s t rict : Le m eilleu r m oye n p o u r s e p re p a rer a u xh t ml1.1 • xh t ml1.1 : La d e r nière versio n d u s t a n d a r d W3C • Prene z votre fichier « in dex.ht m » et in diq ue z le d oc ty pe q u e vou s s o u h aite z u tiliser. (plus d'i nfor m a tio n e t u n e liste d e s d oc ty pe s e s t visible s u r le site Alsa crea tio n ) Nb: écrire u n co m m e n t aire e n h t ml : <! - - ceci e s t u n co m m e n t aire - - > fichier : index.htm <!DOCTYPE html PUBLIC quot;­//W3C//DTD XHTML 1.0 Strict//ENquot;    quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtdquot;> David Epely - 2 0 0 7 / 2 0 0 8

2. Première s balis e s En xh t ml cha q ue élé m e n t d' u ne p age es t d éfinie et p o sitio n n é grâce à d e s balises : < b alise > q ui d oive n t être fer m ée s : < / b alise >, il existe a u s si d e s balise s a u t o - fer m a n t e s : < b alise / > . Ecrivon s m ai n t e na n t la s t r uc t u re d e n o t re p age h t ml. fichier : index.htm <!DOCTYPE html PUBLIC quot;­//W3C//DTD XHTML 1.0 Strict//ENquot;    quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtdquot;> <html> <head> <!­­ ici se trouve l'entête de la page html, celle­ci n'est  pas directement affiché dans un navigateur ­­> <title>Bienvenue</title> <!­­ Le titre de la page. ­­> </head> <body> <h1>Hello world!</h1> <!­­ Le cor ps de page affiche les éléments (media) q u'on va  lui integrer ­­> </body> </html> En o uvra n t cet te p re mière éba uc he d a n s u n n avigate u r o n verra a p p a r aît re u n joli « Hello worl d ». Celui - ci es t e n t o u ré d e la balise < h 1 > , o n lui in diq ue ain si q u e c'es t u n titre : Hea dline. NB: En xht ml, t o u t e s les balises s'écrive nt e n m i n u sc ule. NB2: On voit d a n s la balise < h e a d > s e ule m e n t u n titre, bie n s û r ce ne s e ra p a s s uffisa n t p o u r si te co m ple t. Les b alise s < m e t a / > s o n t u tiles a u référe nce m e n t. Plus loin d a n s ce d oc u m e n t o n verra a p p a r aît re l'i m p o r t a tio n d e fichier cs s. David Epely - 2 0 0 7 / 2 0 0 8

3. < t able > n'est pas fait p our faire la mi s e e n forme d'un e page En h t ml4.01 o n u tilisait e s s e n tielle me n t les t a blea ux p o u r m e t t re e n for m e les p age web. Le s o ucis a rrive lors q ue l'o n im b riq ue pl u sie u r s ta blea ux. On s e re t r o uvait r a pi de m e n t avec d e s s o u rces a b s ol u m e n t illisibles e t difficile me n t m ai n te n a bles. Le xh t ml offre u n e n o uvelle vision; sé p a re r le co n te n u d e la p ré s e n t a tio n. Ce s o n t les fichier s .css (casca di ng s tyle s h eet) q ui s'occu pe r o n t d e l'a p p a re nce. Le x h t ml s'occu p e ra d e d éfinir le co n te n u : < h2 > : u n titre • < d iv > : u n e divisio n • < ul > : u n e liste • <p> : u n p a r agra p h e • etc. • Co m m e nço n s p a r u n m o d èle d e p age si m ple m ais p e r tina n t. fichier : index.htm <!DOCTYPE html PUBLIC quot;­//W3C//DTD XHTML 1.0 Strict//ENquot;     quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtdquot;>  <html>  <head>  <title>Ma première page web2.0</title>  </head>  <body>  <div id=quot;pagequot;>  <div id=quot;headerquot;>  <h1>Hello world!</h1>  </div>    <div id=quot;sidebarquot;> </div>    <div id=quot;contentquot;></div>    <div id=quot;footerquot;></div>  </div>  </body>  </html> David Epely - 2 0 0 7 / 2 0 0 8

Pou r l'in s t a n t rien d'i m p r e s sio n n a n t à l'affichage d e cet te p age m ai s o n a p r e p a r é le te r r ain. On voit a p p a raître id = »ide n tifia n t» : o n ide n tifie les divisio n s, elles s o n t • u niq u e s. Par la s uite o n les p e r s o n n alisera avec le css. Une division e ngloba n te (#page) p e r m e t t ra d e cha nger facile m e n t la • p r é se n t a tio n d e la p age. Pen se z à l'in de n t a tio n, ceci p e r m e t d e mie ux se re p é rer s u r la s o u rce d' u ne • p age. 4. Un p eu d e c onten u On va rajo u te r vite fait u n p e u d e co n te n u p o u r avoir d e la m a tière à t r availler. fichier : index.htm <!DOCTYPE html PUBLIC quot;­//W3C//DTD XHTML 1.0 Strict//ENquot;     quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtdquot;>  <html>  <head>  <title>Ma première page web2.0</title>  </head>  <body>  <div id=quot;pagequot;>  <div id=quot;headerquot;>  <h1>Hello world!</h1>  </div>    <div id=quot;sidebarquot;>  <h3>Menu</h3>  <ul>  <li>menu 1</li>  <li>menu 2</li>  </ul>  </div>    <div id=quot;contentquot;>  <h2>Ma page</h2>  <p>Un peu de contenu à rajouter ici</p>  </div>    <div id=quot;footerquot;>  <a href=quot;index.htmquot; title=quot;lien inutilequot;>lien sur  la page</a>  </div>  </div>  </body>  </html> David Epely - 2 0 0 7 / 2 0 0 8

On va alor s avoir n o s différe n t s élé m e n t s d e la p age s'afficher à la s uite. Il exis te d e ux ty p es d e balises : ty p e bloc : ces b alises s'affiche n t les u n s a u d e s s o u s d e s a u t re s. Par exe m ple • < d iv >, < p > , < h 1 > ... ty p e inline : celles - ci s'affiche n t e n ligne, c'es t à dire à la s uite. Exe m ple : • < s p a n > < a > ... Une d e r nière cho s e ava n t d e p a s s er a ux cs s, à p a r tir d e m ai n te n a n t la p age es t valide a u te s t W3C et elle d oit le re s te r. Pour te s te r ces p age s o n p e u t u tiliser le te s t e n ligne : h t t p: / / v alida t or.w3.org / (les u tilisate u r s d e firefox p e uve n t es s ayer le pl ugin Ht ml valida to r q ui je d ois dire es t t rè s p r a tiq ue et int uitif). 5. Css : initialisation Il existe pl u sie u r s m é t h o d e s p o u r inclu re d u cs s, s oit directe m e n t d a n s les b alises h t ml, s oit d a n s l'en tê te o u e ncore d a n s u n a u t re fichier. Co m m e je l'in diq u ais p récé de m m e n t o n cherc he m ai n te n a n t à s é p a rer a u m axi m u m le co n te n u d e la p ré se n t a tio n. On va d o nc créer u n (ou pl u sie u r s) n o uvea u(x) fichier(s) q ue l'o n p e u t n o m m e r p a r exe m ple « d efa ult.cs s ». NB : Vous ave z re m a r q u é, je n' u tilise q ue l'a nglais d a n s m e s ide n tifia n t s h t ml e t d a n s les n o m s d e fichier s. Ceci p o u r d e ux r aiso n s : 1 - On p e u t êt re a m m e n é à t r availler avec d e s ét ra nger s et il fa u t u n la ngage co m m u n et clair. 2 - Essaye z d'o uvrir u n e p age s u r inter ne t n o m m é « d éfa u t.h t m », le « é » va gé né rer u n co de caractè re relative m e n t h o r rible. De la m ê m e m a nière p o u r vot re d o s sier d e t r avail : p a s d'e s p ace (%20) ni d e carac tère s s pécia ux. David Epely - 2 0 0 7 / 2 0 0 8

On l'i m p o r te alor s d a n s n o t re in dex.ht m fichier : index.htm <!DOCTYPE html PUBLIC quot;­//W3C//DTD XHTML 1.0 Strict//ENquot;     quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtdquot;>  <html>  <head>  <title>Ma première page web2.0</title>  <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;default.cssquot;  media=quot;screenquot; /> </head>  <body>  <div id=quot;pagequot;>  <div id=quot;headerquot;>  <h1>Hello world!</h1>  </div>    <div id=quot;sidebarquot;>  <h3>Menu</h3>  <ul>  <li>menu 1</li>  <li>menu 2</li>  </ul>  </div>    <div id=quot;contentquot;>  <h2>Ma page</h2>  <p>Un peu de contenu à rajouter ici</p>  </div>    <div id=quot;footerquot;>  <a href=quot;index.htmquot; title=quot;lien inutilequot;>lien sur la  page</a>  </div>  </div>  </body>  </html> 6. Jouon s un p e u : un e pre mière mi s e e n form e On d éci de q u e n o t re p r é s e n t a tio n va se faire a s s e z si m ple m e n t : • co ule ur d e fo n d : ble u fo ncé • p age : fo n d bla nc, 60 0 px ce n t rée avec u n e b or d u re d e 1 px grise • co ule ur d e t exte : gris fo ncé • lien s : s élection or a nge • m e n u : s u r le côté d r oi t • Titres : b o r d u re 2 px e n b a s • pie d d e p age : ble u p âle avec u n e bo r d u r e p oi n tillée, t exte ce n t ré e t p e tit. David Epely - 2 0 0 7 / 2 0 0 8

Il s u ffit d e re m plir n o t re fichier d efa ult.css 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;  } David Epely - 2 0 0 7 / 2 0 0 8

7. La finition On a p re s q u e te r mi né. La p age à l'air d e s'afficher correcte m e n t s u r IE ... m ai s u n p e tit p r o blè m e s u r Firefox, le pie d d e p age p a s se p a r d e s s u s le m e n u. Firefox u n p r o blè m e?! En réalité : n o n. On a s pecifié le m e n u co m m e flot t a n t d o n c le pie d d e p age va se coller s o u s le con t e n u, ce q ui es t logiq ue e n fin d e co m p t e. Voici la p e tite a s t uce p o u r régler ça. Il fa u t r ajo u te r u n e b ar re h o ri z o n t ale < h r / > e n d e s s o u s d u co n te n u e n m e t t a n t à jo u r les nivea ux grâce a u cs s : index.htm <!DOCTYPE html PUBLIC quot;­//W3C//DTD XHTML 1.0 Strict//ENquot;     quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtdquot;>  <html>  <head>  <title>Ma première page web2.0</title>  <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;default.cssquot;  media=quot;screenquot; />  </head>  <body>  <div id=quot;pagequot;>  <div id=quot;headerquot;>  <h1>Hello world!</h1>  </div>    <div id=quot;sidebarquot;>  <h3>Menu</h3>  <ul>  <li>menu 1</li>  <li>menu 2</li>  </ul>  </div>    <div id=quot;contentquot;>  <h2>Ma page</h2>  <p>Un peu de contenu à rajouter ici</p>  </div>    <hr class=quot;clearquot; />    <div id=quot;footerquot;>  <a href=quot;index.htmquot; title=quot;lien inutilequot;>lien sur la  page</a>  </div>  </div>  </body>  </html> David Epely - 2 0 0 7 / 2 0 0 8

Puis a u nivea u d u cs s il fa u t rajo u te r u n e clas se : default.css [...] hr.clear{  clear : both;  /* on cache la barre*/ visibility : hidden;  } [...] NB : En Css les clas se s à la différe nce s d e s ide n tifia n t s p e uve n t ré u tilisé s d a n s u n e p age. 8. C'est fini. Je r ajo u te rai p e u t êt re d a n s u n e n o uvelle versio n d e ce d oc u m e n t d' a u t re s m o d èles d e p age et l'intégra tio n d'effet s javascri p t q ui fo n t la n o t o riété d u web 2.0. Néa n m oi n s je p ré s e n te u n m o d èle d e n avigatio n m ai s il e n existe b ea uco u p. Je vo u s invite à jeter u n oeil à h t t p: / / w ww.navigatio n - web.co m , u n livre q ui p r o p o se u n e s oixa n t ai ne d e m o d èle s d e n aviga tio n. Puis p o u r ava ncer u n p e u pl u s d a n s l'élabo ra tio n d e p ages ergo n o miq ue s, plein d' a s t uce s e t u n e co m m u n a u t é t o ujo u r s gra n dis s a n te à l'aff û t d' u n inter ne t pl u s bea u e t m eilleu r : h t t p: / / w ww.alsacrea tio n s.co m . Et p o u r finir u n p e u d e d e sign avec le site h t t p: / / w ww.crys talx p.net q ui axe les créa tio n s vis uelles a u t o u r d' u n s tyle crys t al et ain si t r o uver u n p e u d'i n s pira tio n si n éce s s aire. David Epely - 2 0 0 7 / 2 0 0 8

Add a comment

Related presentations

Related pages

Titular de la CUED Editor del BENED ¿Web 2.0 vs Web 1.0?

Editorial BENED, octubre 2007: ¿Web 2.0 vs Web 1.0? Dr. Lorenzo García Aretio Titular de la CUED – Editor del BENED 3 de 8 Es decir, deseo aprender y ...
Read more

Css3 Menu V1 9 | CSS3 Menu

Css3 Menu V1 9. Generate Fancy CSS3 Drop Down Menus & Buttons in a Few Clicks! No JavaScript, No Images, No Flash : CSS Only! Css Menu Highlite Active
Read more

[hal-00502245, v1] Conception d'un Atelier de Génie ...

Title [hal-00502245, v1] Conception d'un Atelier de Génie Pédagogique support de la méthode de conception MAUI Author: Leclet, Dominique et al
Read more

Web Developer's Handbook | CSS, Web Development, Color ...

Web Developer's Handbook is a list of essential web-sites, which make the life of web developers easier. Compiled and updated by Vitaly Friedman
Read more

Le site web auquel vous essayez d’accéder est suspendu

Blocage pour facture impayée : Si vous êtes le propriétaire de ce site web, vérifiez la validité de vos derniers paiements. Il est possible que l'un d ...
Read more

Ushahidi

Ushahidi. Features; Plans; Solutions; About; Support; Blog; Other Products; Contact; Log In; Raise Your Voice. Gather reports to see what happened, ...
Read more

softgull free collection: MCCodes V1

MCCodes V1 MCCodes V1 is a ... NiCE WEB2.0 DESiGNED RANKS FOR FORUMS+ ALL FAMFAM ... ... Luis Royo - Conceptions II; Luis Royo - Conceptions I;
Read more

Création & développement de sites internet web2.0 - My ...

NTIC & site internet web2.0 : my-eBusiness créateur de solutions web2.0 - eCommerce, CRM, ERP et CMS dédiés
Read more