Thème HTML 5 pour dotclear 2
Je suis en train de refaire mon site en HTML5 et CSS3. Après le portfolio, c'était au tour du blog. J'en ai profité pour migrer vers Dotclear 2 et faire un thème.
La migration
Je n'ai pas eu de soucis particulier avec la migration de la version 1 à la version 2. Pour les données, c'était fait en un clic. Pour les URLs, un petit .htaccess avec des 301 et c'était réglé.
J'ai voulu tester le stockage sur SQLite. Ca marche très bien pour consulter, mais une fois que j'ai mis en ligne, la base de données était toujours bloquée en écriture, impossible d'écrire un commentaire ou d'aller dans l'admin. Bref, j'ai remis le bazar sur MySQL.
Ce qui m'a pris le plus de temps, c'était la convertion des billets en HTML 5. J'ai laissé tomber le format wiki pour écrire du HTML 5 brut. Mais finalement, j'ai mixé les 2, c'est à dire qu'il faut juste que j'ajoute des balises <section> et <h1> qui n'existe nt pas dans la syntaxe wiki du blog. Je dois écrire :
///html <section> <h1>Mon titre</h1> /// Lorem ipsum dolor sit amet, consectetur adipiscing elit. ///html </section> ///
C'est un peu galère je sais ...
Thème en HTML 5 et CSS 3
Au niveau de la structure de la page, il n'y a pas une grande différence. J'ai englobé tous les billets dans des balises <article> ainsi que les commentaires, comme suggéré sur le site officiel. Au final, je n'ai plus aucune balise superflu, pas de <div> qui traine (sauf 1 je crois).
Par contre, les widgets sont affichés avec du code HTML en dur dans les fonctions. Donc pas trop possible de changer ça. Je n'affiche pas les widgets, j'ai fait mes propres fonctions de thème pour la sidebar.
Conclusion
J'aime beaucoup cette version de dotclear. Je n'aime pas particulièrement Wordpress, même si le code a l'air bien.
Je ne vais pas soumettre ce thème pour l'instant, car il n'est pas assez générique. J'ai mis des choses en dur suivant mes besoins. Je le mets donc juste à disposition en téléchargement : Thèmes Dotclear.
Je mettrai le fichier à jour à chaque modification, je n'ai pas encore fini de tout styler.
Commentaires
1. Le samedi, décembre 19 2009, 02:52 par mat
Léger raté remarqué en zieutant la source:
<p></section></p>
:)
2. Le samedi, décembre 19 2009, 03:00 par neolao
effectivement, j'peux pas utiliser le wiki html inline
je modifie, merci
3. Le samedi, décembre 19 2009, 06:49 par CUT HERE
En cours de refonte aussi en html 5 (mais j'ai quitté dotclear sans regret de mon coté). Reste que html 5 n'est pas prêt d'arriver en prod vraiment tout de suite (sur du gros site). Amusons-nous sur nos blogs en attendant :)
4. Le lundi, décembre 28 2009, 00:39 par Lucio
Euh, ma question moi c'est comment faire pour faire tout comme toi au niveau de la (superbe) police des h1 h2 h3 ?
En gros, je croyais que si le visiteur n'avait pas la police sur son PC, une police de substitution apparaissait. Sauf que là, je vois bien une chouette police "effet manuscrit", que je ne pense pas avoir sur mon PC.
Bref bref, merci d'avance pour les futurs éclaircissements ;)
5. Le lundi, décembre 28 2009, 01:30 par neolao
J'ai simplement utilisé une propriété CSS3 @font-face
Tu peux faire des recherches sur ça.
6. Le mardi, décembre 29 2009, 18:38 par Lucio
Merci bien pour cette précision ;)
PS : Je pense que y'a un blème d'affichage de ton blog sous IE 8. Je vois ton blog comme si JS était désactivé, tel un moteur.
"Message : Objet attendu
Ligne : 2
Caractère : 1
Code : 0
URI : http://blog.neolao.com/themes/defau..."
7. Le mardi, décembre 29 2009, 22:36 par neolao
Ah mais ça fait bien longtemps que je développe plus pour IE voyons.
J'ai vu qu'il y avait des solutions pour certains trucs, mais je zappe. Ils n'ont qu'à évoluer.
8. Le mercredi, décembre 30 2009, 23:58 par donnie
Salut Eric !
Sympa ces petits effets HTML5, keep up the good work, je passe souvent sur ton blog.
Bonjour de Vancouver !
9. Le mardi, février 9 2010, 09:57 par jpvincent
"CUT HERE :html 5 n'est pas prêt d'arriver en prod vraiment tout de suite"
c'est ce que je me disais, et puis en voyant passer qlqs articles sur la question, je me suis rendu compte que la première étape était jouable, même en prod sous IE6
http://jpv.typepad.com/blog/2010/02...
j'ai fait l'impasse sur CSS3 qui lui demande vraiment trop de travail, mais sinon entre le nouveau markup et ARIA, on peut dire que j'ai enrichi sémantiquement ce site sans trop de difficultés