[XHTML/CSS] Bien débuter, et coder un design proprement

Bien débuter, et coder un design proprement [XHTML/CSS] - HTML/CSS - Programmation

Marsh Posté le 04-02-2005 à 17:32:22    

Bonjour à tous,
 
Je suis totalement débutant en xhtml, jusqu'à maintenant je n'ai codé que du html comme un gros cochon.
 
Je voudrais coder ce design, en taille fixe (pour le pourcentage, ça viendra quand j'aurais un peu assimilé tout ça) :
 
http://www.luneo.org/temp/site.jpg
 
Voilà comment je pense faire :
 
Je mets un div global (taille fixe, 760x500)qui correspond au cadre principal, entouré d'une bordure d'un pixel.
Et là dedans je mets mon menu, avec un <ul> que je place collé à droite.
 
Est-ce que le menu doit être dans le div global, ou est-ce que je ne devrais pas faire un div global de 500*500 et mon menu collé à cet endroit ?

Reply

Marsh Posté le 04-02-2005 à 17:32:22   

Reply

Marsh Posté le 05-02-2005 à 01:44:40    

Le mieux quand tu commences une page web, c'est d'écrire toute sa structure XHTML sans penser à la présentation. Tu fait des <div>, <hn>, <ul>, etc., tu les structures, et après tu attaques la présentation en modifiant légèrement ta structure au besoin :)

Reply

Marsh Posté le 05-02-2005 à 01:50:14    

FlorentG a écrit :

Le mieux quand tu commences une page web, c'est d'écrire toute sa structure XHTML sans penser à la présentation. Tu fait des <div>, <hn>, <ul>, etc., tu les structures, et après tu attaques la présentation en modifiant légèrement ta structure au besoin :)


pas mieux [:spamafote]  
 
Dans la vision actuelle/moderne de la création de site web (W3C toussa), on commence par générer un contenu se suffisant à lui même (c'est à dire l'intégralité de l'information, donc du code HTML/XHTML significatif, sensé, logique) et une fois que la création du contenu est faite on s'attaque au contenant.
 
Cela force, contrairement à l'ancienne approche, à soumettre le contenant (le style) au contenu (l'information et son organisation logique) ce qui permet non seulement plus de logique (le but d'un site est avant tout de transmettre l'information, il est donc normal que l'information soit au sommet de la "chaîne" et que le reste y soit subordonné) et d'accessibilité mais aussi plus de flexibilité au niveau du design.
 
 
Donc pour conclure mon post et répéter ce qu'a dit Florent, commence par construire tout ton site "brut", moche, en texte lisible, compréhensible, utilisable...
puis crée ton CSS en adaptant légèrement le source HTML si besoin (ajout d'un div ou d'un span pour créer un trick, pas modifier radicalement l'architecture)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 05-02-2005 à 08:38:50    

Reply

Marsh Posté le 05-02-2005 à 10:35:28    

Hmmm, si je comprends bien ce que vous dites, c'est pas vraiment possible de faire un site en partant d'un design pré-défini ?

Reply

Marsh Posté le 05-02-2005 à 10:35:51    

Au fait, merci pour les liens, je connais alsacréations, mais je vias voir selfhtml ;)

Reply

Marsh Posté le 05-02-2005 à 10:38:46    

raph77 a écrit :

Hmmm, si je comprends bien ce que vous dites, c'est pas vraiment possible de faire un site en partant d'un design pré-défini ?


Si, c'est possible, mais vaut mieux commencer par la structure et la sémantique :)

Reply

Marsh Posté le 05-02-2005 à 10:59:32    

Ben le contenu y est déjà globalement (site actuel), le code php me génère du html (salement d'ailleurs)...
Vaut donc mieux que je recode proprement mon php pour qu'il me génère mes galeries sans utiliser mes tableaux, et que je tente d'habiller le tout pour que ça ressemble à ma maquette ?

Reply

Marsh Posté le 05-02-2005 à 11:02:57    

raph77 a écrit :

Hmmm, si je comprends bien ce que vous dites, c'est pas vraiment possible de faire un site en partant d'un design pré-défini ?


 
C'est possible, mais ce n'est pas logique. Un design habille un site. Ce n'est pas le contenu d'un site qui habille son design [:spamafote]
 
Un design devrait toujours être fait en fonction du contenu du site, et à mon sens donc, APRES qu'on ai clairement défini son contenu, c'est à dire surtout, la structuration de son contenu.
 

Reply

Marsh Posté le 05-02-2005 à 14:33:52    

Je comprends bien, c'est relativement logique, mais ça complique drôlement les choses niveau présentation de l'interface non ?
Enfin je vais essayer de faire comme ça, tout le contenu, sans la présentation, et essayer d'adapter, mais je pense que ça va être difficile :/
 
Edit: mais par exemple, pour une galerie photo, pour afficher mes photos, je mets quand même en forme mes vignettes ?


Message édité par raph77 le 05-02-2005 à 14:35:16
Reply

Marsh Posté le 05-02-2005 à 14:33:52   

Reply

Marsh Posté le 05-02-2005 à 15:15:30    

Une gallerie c'est quoi si ce n'est une "liste d'images" ?
A la limite si tu veux donner quelques informations supplementaires pour chaque image tu pourrais utiliser un autre tag (que je ne vais pas citer pour eviter les "confusions" ).

Reply

Marsh Posté le 05-02-2005 à 16:53:15    

Je sais que c'est pas bien ce que je vais dire, mais une galerie, c'est un tableau de 4 images sur 4 par exemple. Donc ça implique bien une mise en page !
Vais potasser un peu les liens donnés au début, je comprendrais peut-être mieux la philosophie ;)

Reply

Marsh Posté le 05-02-2005 à 18:04:31    

Et bien comme tu le presentais ce que tu dis est faux.
Les tableaux doivent etre utilise uniquement pour representer des donées tabulaires, mais d'aucune maniere pour faire de la mise en page avec.
La tu reflechi deja avec la mise en page dans ta tete.
Laisse tomber la mise en page pour l'instant, et reflechis plutot a la vrai narute des informations que tu veux afficher.
La gallerie c'est simplement une liste d'images (apres avec les css tu pourrais les afficher 4 par 4 si tu veux, ou encore en forme d'etoile si tu le veux :D).
 
Faut vraiment que tu arretes de penser a la presentation des donées, mais plutot a leur nature meme.
 
Voila quelques sites qui pourront t'aider :
http://openweb.eu.org
http://www.alsacreations.com/articles
 
Voila notament un article sur la semantique, et pourquoi la respecter :
http://openweb.eu.org/articles/respecter_semantique/


Message édité par cerel le 05-02-2005 à 18:07:24
Reply

Marsh Posté le 05-02-2005 à 18:05:36    

raph77 a écrit :

Je sais que c'est pas bien ce que je vais dire, mais une galerie, c'est un tableau de 4 images sur 4 par exemple. Donc ça implique bien une mise en page !
Vais potasser un peu les liens donnés au début, je comprendrais peut-être mieux la philosophie ;)


 
Sémantiquement, une galerie d'image est bien une liste. mais maintenant, il faut voir cas par cas. Certaines galeries (comme la mienne par exemple) ont une image par page seulement. [:spamafote]
 
 

Reply

Marsh Posté le 05-02-2005 à 18:13:52    

En fait, la pluspart des galleries fonctionnent quasiment de la meme facon.
Premierement on accede sur une page a une liste de vignettes representant les images que cette gallerie contient.
Ensuite lorsque l'on clique sur un vignette, l'image est alors  afichee dans la page (ou dans un popup) en taille normale.
 
Apres il y a encore certaines galleries qui lors de l'affichage des vignettes affichent des informations se referant a ces dernieres. Par exemple, les dimensions de l'image, le poids, la date, le copyright. Dans ce cas precis on pourrait utiliser une autre balise qui se prete mieux que les listes (pour eviter les confusions je prefere ne pas la nomer).

Reply

Marsh Posté le 05-02-2005 à 18:15:26    

Cerel a écrit :

Et bien comme tu le presentais ce que tu dis est faux.
Les tableaux doivent etre utilise uniquement pour representer des donées tabulaires, mais d'aucune maniere pour faire de la mise en page avec.
La tu reflechi deja avec la mise en page dans ta tete.
Laisse tomber la mise en page pour l'instant, et reflechis plutot a la vrai narute des informations que tu veux afficher.
La gallerie c'est simplement une liste d'images (apres avec les css tu pourrais les afficher 4 par 4 si tu veux, ou encore en forme d'etoile si tu le veux :D).
 
Faut vraiment que tu arretes de penser a la presentation des donées, mais plutot a leur nature meme.
 
Voila quelques sites qui pourront t'aider :
http://openweb.eu.org
http://www.alsacreations.com/articles
 
Voila notament un article sur la semantique, et pourquoi la respecter :
http://openweb.eu.org/articles/respecter_semantique/


 
 
Ben oui, c'est ce que je dis, j'arrive pas à penser à un contenu sans penser à une mise en forme :D
Mais je commence à comprendre ce qu'on entend par nature des éléments !
Mais pas encore completement comment les utiliser.
Les div par exemple, ça correspond à quoi ? pas à de la mise en forme ?
Quand tu dis une liste d'image, tu veux dire l'élément liste (ul) ?
 
Pour les sites, je suis en pleine lecture des deux depuis quelque jours :)

Reply

Marsh Posté le 05-02-2005 à 18:18:11    

raph77 a écrit :

Les div par exemple, ça correspond à quoi ? pas à de la mise en forme ?


Non, ça correspond à une forme de segmentation logique, un div représente un groupement logique d'éléments d'une page (un chapitre d'une histoire pourra être placé dans un div, qui sera décomposé en un <hn> contenant le titre du chapitre et un certain nombre de <p>, les paragraphes du chapitre, par exemple)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 05-02-2005 à 18:19:27    

Je commence à comprendre, et je trouve ça super intelligent !!

Reply

Marsh Posté le 05-02-2005 à 19:09:31    

Sinon pour la liste, c'est effectivement un <ul> :)

Reply

Marsh Posté le 05-02-2005 à 19:14:38    

Ok, merci :)
Donc pour le menu, par exemple, ce sera aussi une liste ?

Reply

Marsh Posté le 05-02-2005 à 19:16:50    

Le menu aussi, car tu as une liste de liens

Reply

Marsh Posté le 05-02-2005 à 19:34:21    

Ok, donc j'ai compris le principe :jap:

Reply

Marsh Posté le 07-02-2005 à 19:07:30    

Pour un explorateur de fichiers, actuellement comme un tableau de 6 colonnes (icone selon le fichier ou dossier, nom du fichier, icones de suppression, déplacement...etc du fichier) sur x lignes, comment on fait ça en html ?
Une liste par ligne ?
Pour le moment j'ai une liste de fichiers et une liste de dossiers.

Reply

Marsh Posté le 07-02-2005 à 19:11:31    

raph77 a écrit :

Pour un explorateur de fichiers, actuellement comme un tableau de 6 colonnes (icone selon le fichier ou dossier, nom du fichier, icones de suppression, déplacement...etc du fichier) sur x lignes, comment on fait ça en html ?
Une liste par ligne ?
Pour le moment j'ai une liste de fichiers et une liste de dossiers.


 
Dans un cas comme celui là, table.

Reply

Marsh Posté le 07-02-2005 à 19:29:17    

Ouais, un tableau est le mieux

Reply

Marsh Posté le 07-02-2005 à 20:00:10    

Ok :jap:
Merci beaucoup :hello:

Reply

Marsh Posté le 07-02-2005 à 20:06:38    

Dans ce cas ci se sont des données tabulaires :
pour chaque fichier/dossier on peut avoir :
-une icone qui represente soit un dossier soit le type du fichier
-le nom du dossier et/ou fichier
-la date de derniere modif
-la taille
-les droits (sur un systeme unix)
 
Donc ce sont bien des données tabulaires, par consequent la table est autorisee (et recommandee ? :p).

Reply

Marsh Posté le 07-02-2005 à 20:17:34    

Oui, quand on voit ça comme ça, c'est logique :D

Reply

Marsh Posté le 07-02-2005 à 20:22:15    

Cerel a écrit :

Dans ce cas ci se sont des données tabulaires :
pour chaque fichier/dossier on peut avoir :
-une icone qui represente soit un dossier soit le type du fichier
-le nom du dossier et/ou fichier
-la date de derniere modif
-la taille
-les droits (sur un systeme unix)
 
Donc ce sont bien des données tabulaires, par consequent la table est autorisee (et recommandee ? :p).


 
oui  :jap:  

Reply

Marsh Posté le 14-02-2005 à 15:09:26    

:hello:
 
J'ai bien avancé, lu un bouquin sur le xhtml et les css, bien compris le principe, mais à l'application, c'est un peu différent :whistle:
J'ai créé mon contenu, à savoir que je récupére une liste d'images.
Par contre, je vois vraiment pas comment les afficher 4 par 4, uniquement avec css :??:

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed