Mise à jour du blog, Avanti 1.1 – Un design au CSS3 plus clair

C’était le 21 septembre dernier que sortait ce nouveau thème, Avanti. Depuis, sa douce couleur grise m’a lassé. Le thème était trop peu contrasté, trop peu attractif. J’ai donc rapidement fait ce matin quelques retouches sur le PSD. Puis aussi au niveau du code, en y ajoutant quelques détails  et en modifiant quelques éléments.

  • Thème plus sombre
  • Site plus large, je suis sur une base de 980px (+20px)
  • Ombre plus importante pour le content
  • Ombre des images plus douce
  • Police plus lisible
  • Citations travaillés avec du CSS3 (radius, ombre, dégradé)
  • Liens plus jeune et visible

Un exemple des citations utilisant le CSS3 (comme tout le thème en fait ;) ), prise sur Twitter.

« Dans les temps de tromperie universelle, dire la vérité devient un acte révolutionnaire » G.Orwell, auteur 1984

Voilà.

MAJ Thème WordPress Sand, avec page d’option

Une grosse MAJ en fait, ce thème (l’ancien du blog) était assez statique. Malheureusement il demandait des compétences assez avancées pour l’utiliser. Suite à un échange avec Vincent d’Influence PC, j’ai mis à jour le thème en le rendant bien plus simple.

J’ai donc codé une page d’option pour ce thème, si vous l’utilisez un élément apparaît dans le menu d’administration : Sand Options. Voilà une capture de toute cette page d’option :

Voilà n’hésitez pas à agrandir un peu pour voir ce qu’il y a dedans, en résumé :

  • Personnalisation du logo, de la légende du logo
  • Personnalisation du lien vers la page de contact
  • Fonctions sociales (Ajout d’icône dans le header pour compte : Facebook, Twitter, Flickr, Delicious et Flux RSS)
  • Fonctions SEO (basique) : Mots clés, Description du blog, et ajout du script Google Analytics.
  • Sidebar compatible avec les widgets
  • Mais, aussi une animation en CSS3 dans le header (les bulles d’informations)

Voilou, les fonctions sont basiques mais, elles pourraient bien évoluer très bientôt (Mon nouveau thème bientôt disponible en DDL aura bien plus de fonctions. Il se pourrait que je les intègre…)

Bien sûr, c’est toujours sous Licence Beerware. Par contre pas de MAJ pour PluXml car, je ne sais pas comment recréer le même système avec ;)

Lien DDLAperçu en Ligne (pas mis à jour)

Avanti, Le nouveau thème WordPress pour le Colibri

Voilà, après quelques problèmes avec le thème prévu, j’ai recodé en un temps record ce nouveau thème pour WordPress. Pour tout vous dire, il y a 3 jours le design n’était pas encore fait, pas de maquette directement sous Photoshop, voilà. J’ai pris une base plus simple et j’ai changé ma manière de coder pour ce thème. J’arrive au bout du chemin ;)

Niveau technologie, j’ai envie de dire c’est du vieux (j’en mets partout) :

Et voilà le rendu sous IE6 -7 – 8 – 9 (ça en fait un peu trop), FF, Safari, Chrome… Le rendu avec les bouses d’IE<9 n’est pas optimale mais, on n’est pas loin (arrondis en moins et effets en moins).

Quelques petites nouveautés sur ce blog : une page 404 (enfin), une page contact spécifique… À paraitre :

  • Page Netvibes spécifique (pas urgente)
  • Section dédié au développement Web et au webdesign
  • Version Mobile du site (via CSS3)
  • Version PluXml
  • Version WordPress (Free Premium) du thème

C’est fait, je me suis fixé un délai et j’ai réussi. Désormais, j’inscris le blog pour le CSSR2010. Si vous trouvez des bugs n’hésitez pas à les soumettre. J’ai passé du temps à chercher les petites erreurs, à tester le thème sur le blog mais, on ne sait jamais. Merci

PS : La version Free Premium du template arrive d’ici quelques jours. Merci aussi à @pinchovicara [son blog] qui m’a aider à voir le rendu sous IE8 (depuis que j’ai installé IE9, je n’ai plus d’IE8)

Sand Free WordPress & PluXml Template #1

Bonjour à tous, un mois après Wave le précédent template libre pour 2 CMS en voilà un nouveau, Sand (en référence à la couleur sable du fond) un Template encore une fois pour WordPress et PluXml. Il était aussi prévu pour être compatible avec Dotclear. Hélas la gestion bizarre d’un template sur ce CMS m’a forcé à le reporter pour une date ultérieure . Je n’avais pas touché depuis 2 ans à ce CMS ouch ça pique les yeux.

Bon au niveau technologique j’ai utilisé quelques propriétés du CSS3 comme les border, box rgba, word-wrap… (pas super complexe encore pour pas trop casser tout sous Internet Explorer) et du HTML5 de base, j’ai essayé d’introduire quelques nouveautés au sein du code comme les role=header, role=navigation

Classes spécifiques de disposition

  • Pour positionner des éléments comme des images (standards WordPress) :

.alignleft{float: left;padding: 0 5px;}
.alignright{float: right;padding: 0 5px;}
.aligncenter{margin: 5px auto;display: block;}

  • Pour des éléments textes, ou span…

.center {text-align: center;}
.left{text-align: left;}
.right{text-align: right;}

  • Ici cette classe est utile si vous avez des png transparent ou que vous ne souhaitez pas avoir d’ombres pour une image précise.

.noshad{box-shadow: 0 0 0 #fff;-webkit-box-shadow: 0 0 0 #fff;-moz-box-shadow: 0 0 0 #fff;}

Compatibilité

Testé sans problèmes sous Chrome (Chromium), Opera, Safari et Firefox.
Quant à IE7 et 8 ça passe très bien mis à part qu’il n’y a aucun effet CSS3, mais ça ne gêne pas la lisibilité. Si vous souhaitez que les gens voient le web tel qu’il est amené à évoluer incitez-les à utiliser des navigateurs plus performants.
Quant à IE6, l’affichage est plus délicat 80% mais reste facilement lisible. Seulement ici travailler pour un navigateur qui à 8 ans c’est hors de question si je fais du CSS3 et HTML5.

Liens et Licence

Le thème est une de mes créations et donc il est libre, sous licence Beerware

Demo | Source (dev HTML) | Version PluXml | Version WordPress

Wave un Template Libre pour PluXml et WordPress

Bonjour à tous voilà le premier thème multiple (entendez par là pour WordPress - PluXml et peut-être un jour Dotclear) d’une série qui est fixée à 10. Celui-ci ouvre donc le bal, il est développé avec du HTML 5 (quelques balises comme section – nav -header – footer) et un zeste de CSS3 pour avoir un rendu agréable.

Il passe sans problème sur tous nos navigateurs. Pour ce qui est d’internet explorer j’assure un affichage à 90% pour IE 7 et 8 (pas de reconnaissance des balises CSS3) et 89% pour IE6 (Il y a un bug avec seulement l’image de l’avatar).
Simple et léger j’espère qu’il vous séduira ;) Il est libre sous licence BeerWare donc faites en ce que vous voulez.

Quelques aspects pratiques : (Je vous invite à cliquer sur l’image pour plus de détail.

  • Personnalisation des sous-titres pour la rédaction : balise h3
  • Blockquote mise en valeur
  • Centrage de la balise code
  • Effets d’ombres sur les images pour un meilleur rendu visuel
  • Des listes classiques stylisées
  • Quelques classes pratiques pour vos images : center ou centered (celle qui est mise avec l’éditeur d’image de WordPress)
  • Des classes d’alignement pour votre texte : leftrightcentertext

Est-ce valide au niveau du W3C : non car la mise en place du CSS3 impose l’utilisation d’éléments non standards qui commencent par les préfixes –moz- -webkit- -khtml-. Le seul qui reconnait quelques balises valides est Opera.

Pour toutes questions ou problèmes n’hésitez pas à revenir vers moi.

Les liens : Wave pour PluXmlWave pour WordPressSource WaveDemo en ligne

Nouveau visage HTML5/CSS3 pour le Colibri

Voilà lors de la sortie de la première version du template, j’avais eu quelques critiques. J’ai donc décidé de faire un pas en arrière pour reprendre mon ancienne maquette et bosser avec elle. Le nouveau thème est plus structuré, avec un contraste avec 3 couleurs principales : #f9f9f9 -#ededed #fff. Au final je trouve que le rendu est plus agréable et lisible.

J’en ai profité pour finaliser les commentaires à coup de CSS histoire de m’identifier facilement et de mettre en valeurs vos beaux avatars.

Introduction to HTML 5 from Brad Neuberg on Vimeo.

Une vidéo qui va vous présenter un peu (beaucoup) le HTML5, ainsi qu’un lien contenant tout ce qu’il vous faut pour apprendre le HTML5: Resources HTML5 (à bookmaker d’urgence !!)
La vidéo vient de ce site.

J’ai pour la première fois mis en ligne une version HTML5 et CSS3. CSS3 je l’utilisais déjà mais vu la vitesse à laquelle les navigateurs l’intègrent je pense que l’on peut faire le pas. Pour ce qui est du HTML 5 tous le gère très bien (structurellement parlant) pour quelques balises dont on est quasiment sûr qu’elles sont définitives.
Mais il n’est qu’à l’état de brouillon me direz-vous, oui sauf qu’il est de plus en plus implanté dans nos navigateurs.

Bien sûr ça passe très bien sur tous les navigateurs les bons comme les mauvais (pour ceux qui ne voient pas je parle d’IE) et pour la grosse merde d’IE6 je garantie un affichage à 90%.

Nouveau visage de Colibri, Envol 3

envol3

Voilà une nouvelle version du Colibri qui se veux plus moderne. Là version précédente du thème Envol 2 datait du 13 janvier 2009… Depuis plus de MAJ le thème restait le même sans MAJ. Depuis des mois j’avais la maquette de la v3 de ma Structure Envol, seulement j’ai commencé à coder puis stop. C’était en mai…

Ces derniers jours je me suis bougé un peu j’ai refais une maquette (papier), gardé quelques réglages de Mai et j’ai recodé tout le thème. Depuis hier soir je code à fond et ce matin, 3h de cours de finalisation et de débugage.  Compatibilité entre les navigateurs, bref du travail chiant. Test et retest ça marche je balance donc la version.

Désormais j’ai mis le blog sous License BY-SA, donc finit le copyright que j’avais mis pour le fun ainsi que le 2008…

Si je pouvais avoir des retours de personnes utilisant IE7 et 6, merci. J’ai codé un CSS pour vous normalement tout passe à 100% mais on ne sait jamais.

Voilà dans quelques temps je poste le thème en lui même.

Création d’un thème pour WordPress, la v.finale arrive

screenshot-colibri

Depuis quelques temps j’avais en tête de changer de thème pour ce blog et de le personnaliser un peu plus, donner plus d’ identité à Colibri.Donc finit mon architecture Simply ( tout les thèmes actuelles sont basés sur cette structure ), désormais je refais tout.

Pour la moment la structure est loin d’ être finit mais bon on peut voir un peu à quoi ressemble la page d’ accueil déjà. Je suis loin d’avoir finit puisque j’ai commencer à coder seulement Vendredi soir. Il me manque tout  sauf la disposition en dessous du menu et jusqu’au footer.

Mais ce n’est que les débuts de la galère car après je vais devoir tester ça sous IE… Car avec ma Slax je peux uniquement le rendre compatible pour 3 types de navigateurs et évidement pas la ou se pose les problèmes. :sad:

Voila donc j’ essaye de finir tout pour la fin de la semaine et le mettre sur ce blog et en même temps mettre à jour ma version de Wp. D’ ailleurs j’ai remarqué que suite à une erreur dans une ligne de code PHP pour la blogoliste, j’ai rendu mon thème incompatible avec Wp 2.6… ( ce thème actuel )

Colibri fait peau neuve

Et voila comme promis le blog change de plume pour cette rentrée (quoique je ne crois pas que le Colibri mû… Enfin donc, j’ai fais plusieurs tests complémentaires et le thème marche avec tout les navigateurs qui respectent ou a peu près le CSS. Même IE7 ! IE6 décale le contenu…

Si vous constatez d’ autres problèmes dîtes le moi via contact j’ai appris hier que mêmes les tests en local ne sont pas fiables.

J’ espère que ce thème vous plait. Normalement même l’ affichage gagne en rapidité grâce à une restructuration du code et aux diverses optimisations.

Sinon je vous rappelle que le test de Frugalware est disponible à cette adresse

Bonne journée !

Une version qui sera légère !

preview-colibri_2

Comme je l’ai récemment annoncé suite à mon 100ème article la version 2 de Colibri sera pour la rentrée. Une cure d’amaigrissement a été faite, refonte du code, optimisation, bref pas mal de nouveautés. J’avais dit environ 100 ko de différence sur le template, c’est le cas. 252 ko pour cette version contre moins de 160ko! PLus clair et aéré ce template est en théorie plus pratique. Je l’ai soumis à quelques connaissances qui le trouve mieux.  Donc il sera plus rapide à charger et aussi plus beau. Une meilleure visibilité des partenaires ( qui passent au nombre de 3 >> JaaxSylvain DrapauMiss Terre ), du Flux RSS et d’un de mes articles les plus diffusés sur le web.

Comme toujours les couleurs sont claires car pour le moment le sombre et moi c’est pas une grande histoire d’amour ( sûrement à cause de mon écran qui à du mal avec les teintes sombres. ).

Dîtes moi ce que vous en pensez ! ( en HQ ici )