Structure - Mise à jour

Petite mise à jour de ma structure par défaut pour commencer un projet.

J’apprends en effet quelques nouvelles techniques, je découvre de nouvelles solutions, certains problèmes, j’expérimente, je teste…

Tout ça, en grande partie grâce à vous d’ailleurs. Du coup, pas de raison de ne pas partager.

Alors bien sûr, je fais certains choix… critiquables (langues, encodage, etc). Il n’empêche que cette structure est solide, souple et éprouvée en conditions réelles.

Elle pourra peut-être tout simplement vous inspirer sur un aspect ou un autre ?

Pré-requis

  • Un serveur de type MAMP/LAMP/WAMP.
  • Le chargement de la page peut se faire néanmoins en local avec une petite astuce.

Techniques employées

Globales

XHTML

CSS

JS

  • jQuery
  • JSMin pour compresser à la volée les JS.
  • Browser detect pour pouvoir cibler les navigateurs par CSS sans hack (à n’utiliser que pour des correctifs mineurs évidemment).
  • AJAX Libraries API pour profiter d’une éventuelle mise en cache de la bibliothèque.

PHP / Apache

  • La méthode Combine pour concaténer à la volée les fichiers CSS et JS.
  • CSSTidy pour nettoyer automatiquement les CSS.
  • L’URL Rewriting qui est nécessaire en fonctionnement de la méthode « Combine ».

Résultats

En ligne

À venir

  • Sans doute des améliorations sur l’accessibilité.
  • Des optimisations ?
  • Des correctifs ?

10 commentaires ↓

#1 STPo le 10.26.08 à 19:27

Merci pour ce petit update sur lequel je vais à nouveau faire mon marché sans vergogne… Quelques questions :

  • Pourquoi une CSS spécial IE si tu filtres déjà via classe sur le body ?
  • Pourquoi avoir mis le script init.js hors du head ? (cf. http://www.htmlzengarden.com/repertoire/)
  • Pourquoi hais-tu l’UTF-8 ? =)

Pour le reste moi les CSS Yahoo! je suis pas fan mais sinon je dis chouette. Et vous ?

#2 Vincent le 10.26.08 à 19:48

Salut Christophe,

  • Uniquement pour y placer mes zoom:1 et autres trucs exotiques sans invalider mes CSS. Rien d’important donc. Pour m’y retrouver facilement quand je suis contraint de faire ça, je le note par un petit commentaire dans la feuille de style principale (comme ici par exemple).
  • Pour pouvoir ajouter des classes sur le body et être sûr qu’il soit chargé. Sur le html ça marchait aussi très bien mais c’était invalide et ça manquait de cohérence au regard des commentaires conditionnels pour IE.
  • J’adore ça UTF-8 ! Mais j’ai toujours mon vieil éditeur qui ne le supporte pas, et de base, je ne peux non plus garantir que toute la chaine de travail sera en UTF-8. Bref, qui peut le plus peut le moins.

Et sinon, pourquoi pas YUI CSS ? Tu utilises quoi à la place ? C’est mieux ?

#3 STPo le 10.26.08 à 20:36

Salut Vincent,

  • OK donc dans l’absolu j’en ai pas besoin (si je considère que je vais pas me servir des filter et tricks CSS pas nets). Zoom:1 c’est pas obligatoire hin =)
  • OK merci, effectivement je n’y pensais plus !
  • Oui mais tes caractères encodés c’est pénible… =þ

Bah YUI CSS j’avais goûté, ça m’a un peu rebuté alors j’en suis revenu à mon bon vieux reset fait maison, façonné avec amour ces dernières années et qui marche très bien. Je te le montrerai à l’occase (sinon il est en ligne sur des projets pros genre Total Fondation je pense). Dans mon souvenir je crois que je l’avais piqué à Etienne avant de l’avoir fait (un peu) évoluer.

#4 Rik le 10.27.08 à 12:44

Je trouve les bidouilles pour coins arrondis et boutons extensibles de trop. C’est se casser la tête et ajouter du code pour par grand chose. Les bords arrondis, on a les propriétés CSS pour ça. Et styler les formulaires, moins on le fait, mieux on se porte.

La fusion des JS et CSS à la volée, je trouve ça un peu « risqué ». Il vaut mieux bien choisir cette fusion (et faire la fusion par un script avant la mise en prod). C’est un subtil choix ce genre de fusions. Quels fichiers sont utilisés partout, lesquels sont spécifiques, lesquels sont nécessaires sur une succession de page, etc etc. Tout ça pour optimiser l’utilisation du cache, diminuer le nombre de requêtes tout en restant avec un téléchargement initial le moins gros possible.

PS : J’avais ralé pour le bouton Prévisualiser et du coup, je l’ai pas vu, cacher qu’il est au milieu de la barre. Je l’attendais à côté de Envoyer, mais ça a l’air de plaire aux autres 😉 .

#5 Vincent le 10.27.08 à 23:21

Rik,

En effet, je pourrais virer les coins arrondis de la structure « de base ». Après laisser ça aux CSS, dans mon contexte de production actuel (webagency), c’est tout simplement hors de question malheureusement.

Tu noteras que je ne fais que très peu de skinnage concernant les formulaires, et la technique de Samuel me semble par ailleurs très pratique et robuste.

Pour la fusion des JS et CSS, tu mets le doigt sur un problème que je n’avais pas envisagé. Mais en changeant quelques lignes, on devrait pouvoir obtenir n’importe quelle configuration désirée je pense…

Chris,

Tu utilises un reset de ce type ? * {margin:0;padding:0}

C’est violent tout de même, non ? Tu arrives à prévoir tout les cas de figure ensuite ?

#6 STPo le 10.28.08 à 11:38

Chris,

Tu utilises un reset de ce type ? * {margin:0;padding:0}

C’est violent tout de même, non ? Tu arrives à prévoir tout les cas de figure ensuite ?

Euh… Oui ! =]

#7 Stéphane Deschamps le 10.28.08 à 22:45

Pour ma part je n’utilise quasiment que ça aussi :

* { margin:0; padding:0; }

C’est beaucoup plus simple et je n’ai jamais eu de souci.

Mais bon, je ne suis pas en agence 😉

#8 STPo le 10.29.08 à 22:51

Du coup je me suis repenché sur mon reset.css un peu vieux et j’ai viré mon grand méchant « étoile » en ciblant plus particulièrement les éléments qui ont droit aux margin/padding 0.

Ca m’a permis de virer 2-3 trucs pas nets qui trainaient (comme quoi ça sert) et de laisser des aberrations avec un aplomb déconcertant (par exemple un gros font-family: sans-serif; bien généraliste, mais vous en faites beaucoup vous des projets en serif ?).

En matant le reset de Seb « Cultura » Dussaut (salut, Seb) j’ai vu un abominable label{ cursor:pointer; } qui m’a montré que les goûts et les couleurs hin… =]

#9 Stéphane Deschamps le 10.30.08 à 11:31

Ca m’a permis de virer 2-3 trucs pas nets qui trainaient (comme quoi ça sert)

Raconte ?

#10 STPo le 11.04.08 à 17:44

Non car j’ai honte ! =] (je me souviens pus en vré mais bon c’était pas non plus catastrophique)


Laisser un commentaire

Mise en forme : vous pouvez utiliser la syntaxe Markdown. Vous verrez, c’est chouette !