Salut
 
A force de commenter des design ici ou là, ça me donne envie d'en concevoir un et d'en faire l'intégration xhtml/css. Puis je tenterai de le porter sous WordPress.
 
Si je poste c'est avant tout pour que vous me foutiez des coup de pieds au cul
 
 

 
Outils:
Design: photoshop + illustrator au besoin
Xhtml/css : komodo edit, firefox + webdev + firebug
 
Objectif du site :
Aucun, juste pour me faire plaisir. Déjà c'est pas gagné pour faire un choix créatif
Si j'écris sur ce blog ce sera probablement de design graphique et/ou photo mais je n'ai pas envie de faire directement référence à ces domaines dans l'aspect du site.
 
Contraintes techniques liées au design:
Je pars sur un design en deux colonnes (contenu et sidebar de menu), affichable en 1024 de large,  fixe.
Je ne met pas de contrainte de poids fichier, mon objectif premier est de faire un truc joli. Si c'est trop lourd on verra après.
- 1024 parce que ça peut représenter jusqu'à 30+% des internautes
- 2 colonnes parce ça rentre facilement dans cette largeur
- fixe parce que :
    - c'est plus facile à gérer pour un débutant comme moi
    - je vais probablement travaillé sur des graphismes pas forcément facile à étendre
- je ferai l'impasse sur IE6
 
 
 
Méthode de travail:
J'en ai pas  
Je veux bien que vous parliez des vôtres si vous en avez .
 
Je vais passer de photoshop, au html, au css comme ça me vient. Quand (un jour peut-être ) le design sera suffisamment avancé je commencerai le portage sous WP.
Je n'ai pas d'idée précise du design final pour l'instant, par exemple pour la sidebar je ne sais pas encore si je lui met un fond ou pas, si oui comment, si non comment...  
Je vais tacher de respecter les standards pour ce qu'ils ont de bon mais la validation 100% n'est pas mon objectif.
 
 
Choix artistique:
Sans réelle contrainte créative j'ai décidé de partir d'une de mes photos et d'une typo que j'aime bien (voir 2e post)
J'aime bien les éléments végétaux et les entrelacs aussi. Mais je vais essayer d'éviter l'étiquetage "celtique" ou "gothique" de base.
A partir de ça je vais essayer de faire passer une ambiance mélancolique, un peu inquiétante et ambigüe (comme je ressens cette photo).
Je trouve que cette typo peut être qualifiée de même. Les lignes de certains caractères m'évoquent des arches gothiques qui vont "contraster" avec le thème nature de la photo.
 
Je pense jouer avec les transparences (et la lumière en qq sorte) pour rester en accord avec la photo (ouais par ce que la même photo sans ce brouillard et le soleil qui perce elle serai assez pourrite qd même ).  
Le fond du contenu sera donc semi-transparent (png) et clair (pour la lisibilité) et le fond du site sera fixe.  
Pour les couleurs je reprendrai simplement celle de la photo, en restant dans les tons brisés.
 
Pour les typos je ne me suis pas encore fixé (c'est de toute façon très limité )  mais je vais probablement utiliser une serif pour le titrage et une sans pour le texte (ou l'inverse ).
Je réserve la Morpheus pour le titre du site (y'aura pas de logo à proprement parlé) et les titres de menus par substitution par image.
Par la suite je regarderai du côté des techniques de substitution pour le corps du texte.

La typo Morpheus et la photo qui me serviront de point de départ.

L'esquisse de départ, tout n'est pas défini à ce niveaux mais je préfère voir si déjà j'arrive à faire ça.
Ce n'est pas encore visible ici mais j'ai conçu une grille en 5 colonnes pour le contenu.

Première étape du xhtml (corrigé par la suite) avec une CSS de base plutôt qu'un reset.
http://sifr.free.fr/Gfx/TPL_01/e1_base.html

Deuxième étape, j'ai à peu près réussi à faire ce que je voulais.
http://sifr.free.fr/Gfx/TPL_01/e2_base.html

Une indentation de titre que j'utiliserai peut-être sous une forme ou une autre.
La page explique le procédé... rien de mirobolant
http://sifr.free.fr/Gfx/TPL_01/e3_ [...] aders.html

réservé au cas où

La methode dependra de tes connaissance des contraintes d'intégration...

Je dirais :

1) esquiser une idée globale dans ta tête ou sur papier
2) découper grossièrement le design...
3) dessiner par rapport à cette découpe
4) découpé precisement tous les élément nécessaire
5) Intégrer en XHTML/CSS

Ben techniquement j'ai un savoir théorique mais c'est à peu près tout. Les tentatives que j'ai pu faire avant ont avorté faute de motivation et par découragement face à IE6 .
 
Je sais qu'il faut éviter de foutre des divs partout mais j'ai du mal à estimer clairement les besoins d'après le design. C'est d'autant plus problématique que je ne connais pas trop la structure rendu par WP mais je vais essayer de pas trop m'en soucier pour l'instant sinon je ne vais pas avancer.
 
Au niveau syntaxe prog, quelque soit le langage, je souffre du syndrome Op
Heureusement qu'il y a la coloration syntaxique

Reflechi à tout les élément necessaire au template WP (barre de menu, boite de recherche, conteneur principal, footer...)
Une fois que t'as tout ça, c'est à toi d'en faire la structure...
Fais le design comme tu le sens, je te guiderais sur la structure XHTML, puis sur le CSS... W3C adopted bien sûre, sinon c'est pas drôle...

gaffe!!! l'est tendu comme syndrome ... je connais un mec qui l'a
c'est pas beaux a voir
sinon vivement que tu foutes le nez dedans
j'y connais rien en dev' de site
mais spas grave suis curieux de te voir a l'œuvre

Sinon pour la méthode de travail.
 
- esquisse papier
- reproduction dans mon logiciel préféré
- choix de couleur et typo(s)
- maquette avec contenu
- découpe + intégration

drapal. Pourquoi WP? Perso je suis tombé sous le charme de spip.

 

 
Et pour le fichier css, vous avez quelles manies/trucs ?
Je pensais l'organiser par type d'élément et/ou zones... je pensais faire un reset mais je viens de trouver la css de base d'alsa, ça semble un bon départ.
 

Spip je m'y étais interesser ya qq années qd il n'était pas encore valide xhtml, ça plus le fait que je comprenais rien au sytème de squelettes, je suis passé à autre chose. Mais si il existe tjrs c'est qu'il a dû bien évoluer, je jetterai peut-être un oeil.
Sinon WP, pour la quantité de ressources, la quantité d'extensions (même si je préfère tourner avec le core d'un prog, les plug ne suivant pas tjrs les nouvelles versions du core on peut se retrouver emmerdé), et l'importance de la communauté.
Y'a plein de cms sympa, je vais essayé sous WP dans un premier temps (enfin déjà si j'arrive à faire un html de base qui tiens la route sur qq navigateurs je serais content ), et après je regardais les autres.
 
 

J'ai avancé un peu dasn PS.
Je n'ai pas placé grand chose comme vous le voyez
Le filet sous le "logo" représente à peu près la largeur visible en 1024, la ligne de sol correspond (j'espère) avec les 768-jesaispascombien.
 
Je me suis concentré sur la grille interne du "post", pas visible ici.
J'ai essayé des brosses et vecto pour stylé l'apparence du post mais je pas réussi à sortir qqchose dont je sois satisfait donc pur l'instant je vais me contenté de placer les éléments via le code.
La barre du haut sera fixé aussi, j'y mettrai les liens d'évitement et la recherche.
 
J'ai une question qui me vient que maintenant. Le texte du titre en georgia c'est possible de le placer comme ça avec les CSS ?    

Un xhtml pour commencer à me prendre le choux sur les CSS.
Ceux qui sont présents ici sont ceux de la feuille de base d'alsa cité plus haut.
 
http://sifr.free.fr/Gfx/TPL_01/e1_base.html
 
J'ai peu être un div en trop par rapport aux besoins actuel mais je pense que j'en aurais besoin.
 
Maintenant je m'attaque au positionnement des blocs - le truc le plus chiant pour moi

en CSS, tu as un text-indent qui permet de mettre un espace à gauche du premier mot du paragraphe...

L'idée qui me vient serait de mettre le block texte du titre décalé vers la droite (de la même largeur que ton block de contenu blanc, et aligné), et donc de mettre un text-indent négatif (je sais pas si ça marche) pour provoquer un débordement à gauche de la première ligne...

Dans tout les cas, c'est toi qui devra provoqué le retour à la ligne pour pas la 1ere aille jusqu'au bout... à moins de mettre une div aligner en haut à droite, pour creer un encombrement qui provoquera ce retour à la ligne...

Je ne sais pas si je me fais comprendre...

Concernant le design :
Si le cadre blanc est sencé s'adapté verticalement à son contenu, dis toit bien que tu devra géré sa transparence via CSS... Et vu que ce dernier ne gère pas les border arrondies, il devront etre fais sous toshop, incruster au background blanc, ce qui implique au final que l'alpha du border sera le même que le blanc...
Autrement dis, tu ne peut pas faire un border opaque si le fond est transparent... sauf si ce border est géré par CSS (qui ne fait pas d'arrondies)

EDIT : Sinon, tu utilise le PNG24, en acceptant les contraintes qu'il inflige à IE6... J'avais oublié que tu n'avais pas l'intention de faire le puriste... d'ailleur, si tu tiens à ce que les visiteur IE6 (ça existe toujours) n'est pas les symptome affreux du PNG transparent qui se transforme en vulgaire gris, je te montrerais comment via CSS, on appliquera un style qui lui sera reservé... (la même chose sans background PNG transparent)

Ne te lance pas dans le XHTML/CSS avant d'être sûre que ton PSD soit "intégrable" malgré les contraintes qu'il induit...

Oui le text-indent négatif est possible, c'est même comme ça que je compte virer des titres... mais oui je me posais la question sur "l'indentation" de droite.

Ce serai un div dans le h1 alors parce que sinon c'est pas possible non ?... (*réflexion intense + bordel in the head* c ptêt possible oui   ) bon en tt cas c'est pas évident, je verrais ça après.
 

No mercy for IE6 !
Si ce n'est qu'un pb de png je veux bien le fixer, si c moins évident je compte pas me prendre la tête dessus.
 
Oui les bords ronds je sais, j'ai tracé comme ça mais je ne suis pas sur de les garder du tout
Pour le fond du panneau "blanc" je comptais utiliser des png en bckground , l'alpha c'est pas encore trop pris en charge non ?
 

Trop tard

Si, l'alpha est pris en charge, c'est juste qu'il faut mettre 3 lignes de syntaxe différentes pour que les browser les plus connus le comprennent...
Sinon, la div "d'encombrement" sera directement dans le conteneur du header, pas dans le titre en soit...
t'aura en gros :

<div id='header'>
   <h1>mon titre en entier qui roxe du mammouth !</h1>
   <div id='encombrement'></div>
</div>

Dans 30 min je te montre un exemple (je suis en train d'intégrer un design dont le corps à un bg transparent, le tout en CSS)

drapal

-webkit, -moz et je sais plus quoi c'est ça ?
Bonne nouvelle  

Sinon, la div "d'encombrement" sera directement dans le conteneur du header, pas dans le titre en soit...
t'aura en gros :

ah ben ouais c'est tout con
il suffit de mettre le div "enciombrement" en float en fait, c bien ça ?

float:right, pour qu'elle s'aligne à doite de son conteneur...
Ensuite, tu lui donne une taille adéquate, pas trop haute pour ne pas gêner la 2nde ligne...
Je sais plus si tu dois mettre cette div avant <h2> ou si ça n'a pas d'importance, je me suis un peu trop habitué au CSS que flash gobe... (qui à 20X plus de contrainte )

What?
 
Il faut simplement enregistrer le bloc blanc en png (sans le background biensur). Puis tu decoupes ton bloc en 3 png. Un bg_top qui comprend la partie haute du bloc, ainsi que les arrondies. De meme pour la partie basse. Enfin, pour la partie contenu du bloc; un png de 1px de haut suffit.
 
Grosso modo en HTML :

Je parle du cas ou il n'optait pas pour le PNG24 (lis mon EDIT)...
Et puis, ton exemple de code HTML est pas bon (enfin, pas propre, on pourrait faire plus simple, comme mettre les div en série...)

Alors ca, c'est très subjectif.
 
Peux tu me dire pourquoi les mettre en série est plus propre que de les imbriqués, alors que l'imbrication apporte une logique (le bloc correspond à un div et son contenu, plutôt qu'à trois divs)?
 
Deplus, imagine que tu veux une marge, avec l'imbrication tu n'as qu'une propriété à definir, aulieu de 3. Position:absolute : bonne chance si tes blocs sont en séries.
 
Bref, je suis pas convaincu par ton truc

Je passe en MP avec toi guzman, pour eclaircir nos points de vue... (oui, je vais pas pourrir le topic de Skopos, il merite plus de respect que JLB quand même)
 
Skopos => http://urfman.free.fr/RetraiteActiv/
Tu peux voir ici un exemple de transparence en CSS...
cet alpha s'applique à une div à fond blanc, s'adaptant au conteneur en position absolue pour ne pas gêner sa soeur qui contient... le contenu
Si je n'ai pas fais cette opacité sur la div qui contient tout le centre, c'est tout simplement pour ne pas que son contenu hérite lui aussi de cette transparence (border, texte...)

Ben ça me dérange pas tant que vos avis sont argumentés.

Si vous arrivez à une conclusion en mp n'hésitez à poster en tt cas, ce n'est pas hs de toute façon puisque j'embrique allègrement mes divs

Sinon j'ai un peu avancé.
J'en ai chié avec la partie haute mais j'ai réussi à la fixer... j'ai modifié le html (erreur et réorganisation).
J'ai encore du mal à anticiper les changements que je fais dasn les CSS... parfois c'est un peu du bol

J'ai pas tout compris en regardant vite fait mais je garde ça sous le coude. Merci

http://sifr.free.fr/Gfx/TPL_01/e2_base.html

J'ai des trucs à corriger en haut mais tant que je n'ai pas placé le menu je n'y touche plus.... ça m'a trop gonflé.

Ce que j'aimerais arrivé à faire c'est centrer verticalement le titre principal dans son espace

je viens de penser que j'ai pas uploadé les images

edit: c fait
reedit : ah tiens j'ai pas mis de no-repeat sur le fond, je corrigerais plus tard.

aah je me disait qu'il y avait un truc qui clochait.    
bonne continuation.
 
 
edit : heu ton background il ne se redimensionne pas a la taille de l'écran  

Heu... un "br" suffit à faire un retour à la ligne. Le coup du div d'encombrement c'est quand même un peu légé pour qqun qui se targue de faire du xhtml strict ou w3C compliant.
Entre nous, moi je saurais faire le titre, typo & fond, avec juste la balise H2 sans autre conteneur. Vous aviez bien commencé avec le indent négatif, un padding, et le br.

Edit: H1 c'est réservé une seule fois par page. Tu ne peux en avoir plusieurs. c'est plutôt le rôle des H2, H3, H4, etc.

Oui, c'est ce à quoi je pensais au début :

Donc, la div c'est un peu une bricole, je pensais à ça pour avoir quelque chose "d'automatisé", dans le sens ou je ne suis pas sûre que WP autorise les <br> dans le titre...
Donc oui, c'est léger mais je l'assume pour le moment
Sinon, je ne me targue pas de chier le meilleur code xhtml strict, je découvre des astuce de jour en jour, d'ailleurs, je vais peut-être troller, mais adapter son code à IE est paradoxalement une insulte au standard W3C... Pourtant, c'est un de mes plus gros défi, pondre quelque chose qu'IE6 peut gober sans tout explosé...

Skopos, les MP avec guzman ont aboutti :

Sa méthode est bien, j'avais pas bien traduit son code, mais c'est une solution très efficace... Il faut juste que tu le construise dans ta tête pour comprendre l'astuce ...
C'est une methode que j'ai utilisé quelquefois en plus, je renouvelle donc mes excuse à Guzman...
Ma méthode est aussi valable, mais nécessiterai d'enfermer les 3 Divs en série dans une parente pour avoir la même flexibilité que les divs imbriquées...

L'abbé, je pense que les 2 méthodes se valent mais que le contexte peut décider d'en préférer une.
 
Toujours aussi acide Lactique ?
Bien d'accord pour le h1, je pense virer celui du logo.
 
Si ta solution n'est pas automatique, ce n'en est pas une.
Et si elle inclue un br pareil.
 
Le br il vaut mieux l'éviter en général.
La seule justification typographique que je trouve à cette balise c'est de mettre visuellement en exergue une courte phrase qui vient conclure un paragraphe.
 
Mais je crois bien que je viens de trouver une solution élégante
Je teste pour voir si et je met en forme si ça marche.

Bah, le <br> permet un retour à la ligne au sein d'un même <p>... tout simplement !
Et "ma" solution permet justement de couper la ligne sans <br>...
Mais c'est à tester quoi...

heu le "targue" n'était pas dans le sens péjoratif hein. Calmez vous
Seulement le xhtml c'est pas plus compliqué qu'autre chose. Il est injuste d'utiliser des divs pour le décore quand tout est faisable en css avec un code html sémantique à souhait.
Le br n'est pas un mouton noir.  Il a une fonction.
Le "ça doit être automatique" est un ennemie du code propre et ça l'a toujours été.
Du reste, vouloir des justifications typographiques pour l'utilisation d'un br tout simple n'a pas de sens. Surtout si l'on y préfère la coupure n'importe où, non sémantique, d'une phrase rendant du coup la "lecture" (qui est tout de même ce pourquoi on écris) difficile. Le br ajouté au cas par cas au bon endroit, rend les titres bien lisibles et l'expérience du lecteur s'en trouve énormément modifié.
Cela dit, typographiquement, afficher un même titre avec des retraits n'est déjà pas très justifiable. Ce genre d'originalité est souvent le résultat d'un titre mal travaillé, l'auteur se sentant alors attiré vers ces mises en formes non orthodoxes pour "embellir" le tout.
Je suis sûr que tu peux faire un titre très agréable et personnel sans se retrait bizarre.
Attention, Vous pouvez ne pas être d'accord hein je ne suis qu'un graphiste dans la masse.
 
Techniquement ma vision du xhtml strict est celle développé par css zengarden, le code html le plus clair et sans aucun élément de complaisance et tout le travail dans les feuilles de style. Ce qui permet ce pourquoi les feuilles de styles ont été créées à la base : séparer complètement le fond de la forme, et permettre des formes variables en changeant uniquement les styles.
En bidouillant le code html on s'éloigne de cet esprit.
 
Oui je sais vous aller me dire que vous avez des contraintes, wordpress ceci cela. Mais a à rabats joie, rabats joie et demi

Ma solution fonctionne

Par rapport au corps de tes polices, tu devrais au minimum doubler tes marges autour tes textes et titres. Il faut aérer tout ça.

On est d'accord
(ps hs: je suis tout calme t'inquiète . Tout comme dans ton message il n'y avait pas de smileys c'est tout )
 

En général oui peut-être, quoique réfléchir sur une solution générale peut aussi permettre de simplifier une idée qui s'applique à un cas particulier.
Mais en ce qui concerne ce pb particulier JE préfère une solution automatique, quite à personnalisé le cas échéant en fonction des titres car ce que tu dis plus bas sur la "césure" est pertinent, je n'y avais pas pensé.
Je pense avec une optique "print" et sémantique m'a fait zappé la fonctionnalité de la balise. Je promet de ne plus jeter de pierres à la va-vite sur les br.
 

Je ne tiens pas à cette particularité du titre mais ça m'a amusé de cherché à résoudre le problème, je verrais à l'usage si je garde cette option graphique et si on peut l'améliorer.
 

C'est le seul bouquin dont je dispose   , je le lis régulièrement (aux toilettes ) depuis des années même si je n'ai jamais commis de sites.
 

Je regarderai si les br sont acceptés, ça peut tjrs être utile de le savoir.

Waip, ma vision n'est pas la même...
Il s'agit pour moi du domaine de l'accessibilité... Bien sûre, il amène à épurer/optimiser le code... mais optimiser pour moi ne se résume pas à en faire le moins possible, mais retirer ce qui n'est pas nécessaire...
Perso, le fait d'utiliser flash par exemple m'oblige à délaisser ce coté sémantique du web... Pour le reste, c'est la compatibilité que je respecte un maximum... et celle-ci m'amene très souvent à bricoler mon jeu de div, je n'ai pas souvent le choix... j'ai encore le défaut d'adapter mon code à mon graphisme que l'inverse... Mais je pense que c'est l'experience qui m'amenera à faire des template de plus en plus adapté au web "épuré"
Pour en revenir à notre sujet, ce style de titre est certes discutable, j'apportais une solution technique à la "demande" de Skopos...
Après je pense avoir moins d'expérience/savoir que toi Lactique...

EDIT : Ne vous inquiétez pas, je reste calme aussi, je n'ai rien à défendre coute que coute, je trouve au contraire le sujet intéressant, construit et utile... comme la majorité du temps sur HFR...

J'ai profité de mon indentation à la con pour faire un petit article où j'explique le procédé.
Rien de transcendant dans les CSS, ya que les plus débutants que moi qui apprendront des choses à ce niveau
Mais j'ai essayé d'apporté du contenu plus généraliste aussi, feedback bienvenus
 
http://sifr.free.fr/Gfx/TPL_01/e3_ [...] aders.html
 

Bien le background est centré sans tiling.    
 
J'aime bien la touche d'humour de l'article.
Ce-ci dit, c'est instructif et agréable a lire, ce n'est que mon avis.

Pas bête le fait d'enfermer un <span> "d'encombrement" direct dans le <h1> plutôt qu'une <div> dans le conteneur, comme tu dis, pour le SEO...
Je te pomperai l'idée !
Par contre, certains disent que Google Bot zappe les éléments en visibility : hidden / display : none ... D'autres disent que non (une question à poser sur le forum tient !)
J'avais gardé ça dans mon bookmark : http://www.seroundtable.com/archives/002971.html , les commentaires sont intéressants...

Merci
 

Oui je ne sais pas trop ce qu'il en est par rapport à google, le pb aussi c'est que l'article est un peu vieux. Mais dans la logique des choses je ne vois pas pourquoi ils indexeraient qqchose d'invisible.
 
Ceci dit t'as ptet pas lu jusqu'au bout car justement je ne préconise pas d'utiliser un élément pour le rendre invisible Si je dois virer le texte c'est pour le remplacer par une image et dans ce cas j'utiliserai un bon gros text-indent négatif.
 
Et au span je préfère strong ou em.