Sunfox

Comment j’ai rendu mon blog responsive

9 août 2014 5 commentaires — css, future-friendly, html, web

L’HTML et le CSS de ce blog ont été écrits en 2006. En années Internet c’est comme si je l’avais fait il y a 3042 ans.

À cette époque l’iPhone n’existait pas encore et on ne se préoccupait pas de savoir si un site fonctionnait sur son assistant personnel ou pas. La première mention de Responsive Web Design date de 2010 (il y a 520 ans environ). Essentiellement il s’agit de transformer un site pour qu’il puisse s’adapter de façon fluide à toutes tailles d’écrans.

Transformer quelque chose qui n’a pas été pensé mobile first n’est pas chose facile, alors un vieux site au CSS croupissant, cela paraît insurmontable.

Suite de l’article…

Calendriers de l’avent pour artisans du Web

2 décembre 2010 3 commentaires — calendrier, html, html5, javascript, noël, performance, typographie, veille

Un mois à 24 jours

Ça y est, décembre est lancé. Et avec les premières neiges on a envie de rester au chaud et de lire des bons articles qui parlent du Web, n’est ce pas ?

4 calendriers avec des perles à découvrir chaque jour de décembre :

• 24ways remets ça pour la sixième année : des articles de haute qualité qu’on attends toute l’année. Ils contribuent à rendre l’hiver moins dur.
• HTML5 Advent : des démos HTML5 pour en avoir plein les yeux.
• Adfont Calendar : mateurs de typographie, sous chaque case se cache une police d’écriture proposée par FontDec.k
• Performance Calendar : et oui, même les performances Web ont leur calendrier.

Typographie, HTML5 et performances : les sujets chaud du Web de cette année sont là pour se tenir au chaud cet hiver jusqu’à Noël.

Utiliser font-face pour des images ?

18 juin 2010 3 commentaires — font-face, html, images, performances, sprites, unicode, web

Depuis que @font-face est utilisable partout, on a envie de pousser les limites de son utilisation. Utiliser des générateurs automatiques, créée des police d’écritures qui ne transforment que le caractère &, etc.

Dans l’article ever- thought about using font face for icons? ils expliquent comment faire une page où toutes les images seraient contenues dans un fichier de police. En appliquant chaque icône à une lettre, on a des images dans la police d’écriture

Cela donne des images :

• qui s’agrandissent sans perte de qualité ;
• très faciles à colorer, agrandir, souligner en CSS ;
• rapides à charger car cela ne fait qu’une requête HTTP pour tout le paquet d’icônes.

Mais cette technique souffre de serieux points faibles. En plus d’être plus difficile à maintenir, il faut choisir entre un HTML qui n’a aucun sens comme <span class="phone-icon">a</span> ou une feuille de style CSS imbitable qui ne fonctionne pas sous IE :

.phone-number:before {
  content: 'a';
  font-family: "Mes Icônes"
}

La solution serait de ne remplacer que les quelques caractères Unicode qui représentent déjà des icônes. Ainsi on garde du sens à l’HTML et on peut profiter de la cascade des polices d’écriture disponibles.

<li>☎ +33-666-42-42-50</li>

Apéro Ruby spécial GitHub

17 février 2010 — apéro, git, github, html, javascript, ruby, sinatra

Le dix-huitième Apéro Ruby organisé par Ruby France était tourné autour de GitHub. Étaient présents les géniaux Scott Chacon et PJ Hyett de GitHub.

Schacon a présenté ShowOff, son application Ruby pour faire des présentations. Pas aussi bien qu’HTML5 Slides, mais je ne suis pas très objectif sur le sujet. Sinon c’est Sinatra, markdown, HTML, JS, que du bon et plein de bonnes idées pour la suite. Ses slides sont même un fork sur GitHub. Miam.

S’en sont suivi plein de questions sur GitHub. Plein de bonnes choses de prévues comme pouvoir utiliser SVN avec n’importe quel dépôt GitHub, ou auxquelles ils réfléchissent sérieusement comme les tickets et le wiki dans une branche du dépôt. Ils m’ont même assuré que l’internationalisation arrivait d’ici une semaine ou deux. \o/

Oh et c’était open bar. Thanks GitHub!

Paris Web 2009

13 octobre 2009 4 commentaires — conférences, css, html, parisweb, quotes

© Thanh

L’édition 2009 des conférences Paris Web est terminée. Une fois de plus la grande qualité des conférences et le bon esprit qui règne étaient là. J’ai a-do-ré.

Quelques citations :

Après tout ça j’ai des milliers de nouvelles idées et de choses à faire. Par exemple il faut que je me renseigne sur l’HTTP « bis » qui est en cours de discution au w3c, que je lise cette documentation sur le cache, que j’installe phpsecinfo, que je lise à propos des méthodes agiles de Jeff Patton, que j’utilise les favelets de Stéphane Deschamps, que je regarde de plus près les CSS media queries, que je me remette à jour dans mes sauvegardes, que je retrouve la proposition de Daniel Glazman sur les règles CSS qui permettent de cibler la disponibilité de certaines propriétés dans les navigateurs, que j’implémente Foaf+SSL quelque part, que je mette la main à la pâte sur La Distribution, …

Merci Paris Web !

L’HTML avant la tempête

12 mai 2009 2 commentaires — cms, css, html, integration, xhtml

La page blanche. Puis viens ce moment pur où, dôté de la maquette du site, il ne reste plus qu’à faire la page la plus propre possible. À nous le choix d’XHTML ou d’HTML, d’utiliser ou pas tt, address, … De créer de jolies listes, des titres à plusieurs niveaux. De choisir avec soin le nom des ids et des classes et de saupoudrer le tout de microformats. Le tout propre et bien indenté.

J’aime ce moment où on peut s’approcher le plus possible des idéaux de l’HTML sémantique… jusqu’à ce que CMS et CSS, bourreaux des cœurs, nous imposent de souiller la pureté de nos documents.

Google Mobwrite

26 janvier 2009 1 commentaire — collaboration, google, html, javascript, python

Google Mobwrite est une petite application web qui sert à synchroniser des champs de formulaires en temps réel.

Avec un brin de JavaScript, n’importe quel champ texte devient un éditeur de texte temps-réel comme SubEthaEdit en appliquant les changements chez tout le monde en même temps.

La synchronisation, la fusion et la résolution des conflits entre différents utilisateurs est un problème compliqué dont Google Mobwrite se charge. Votre application finale aura simplement à conserver en mémoire le dernier formulaire envoyé.

Suite de l’article…

La sémantique des classes

19 novembre 2007 5 commentaires — accessibilité, css, framework, html, sémantique

En HTML le nombre de classes et le nom des classes est libre. Néanmoins il est bon d’utiliser des classes sémantiques, décrivant la fonction de la balise plutôt que son style.

Exemples

Pourquoi faire ?

De cette façon en utilisant des feuilles de style CSS l’on peut décider de changer les couleurs et l’affichage des pages sans avoir à changer l’HTML ou d’avoir des styles illogiques tels que .red { color:pink; }. D’autre part votre site peut avoir plusieurs feuilles de style (impression, mobile, slide, …), où vous pouvez décider par exemple que la classe large-column serait dans ce format… ni large, ni en colonne.

Ce n’est pas très grave si quelques-unes de vos classes décrivent l’apparence finale plutôt que la fonction de votre texte. Néanmoins c’est important dans une démarche qualité globale et cela augmente la réutilisabilité de votre code.

Tout ça pour en venir aux frameworks actuels

Les frameworks CSS qui foisonnent ces derniers temps tels que Blueprint CSS et YUI Grids CSS imposent sciemment l’utilisation de classes telles que <div class="column span-15">. C’est dommage. C’est pourquoi je les évite.

J’attends que les implémentations de CSS dynamiques telles que CleverCSS intègrent les fonctionnalités appréciables de ces frameworks. Mais je n’ai encore vu personne avancer cette idée. Ils pourraient pourtant par exemple avoir des propriétés magiques de type colspan: 15 qui se transformeraient en code nécessaire à la création d’une colonne à la bonne taille… Lazyweb te sens-tu le courage ?

La balise i

28 juin 2006 10 commentaires — html, semantics, webdev

<i>

En HTML sémantique il faut utiliser les balises ayant un sens et pas seulement un effet de style. C’est pour cela que la balise <b> qui signifie gras est dépréciée en faveur de <strong> qui signifie fort.

De même pour la balise italique <i> que l’on remplace par <em> qui signifie emphase. Cette nouvelle balise s’utilise quand on mets l’accent sur un mot et plus juste pour faire de l’italique.

Mais en français les règles typographiques veulent que certaines parties de textes soient en italique, comme par exemple les titres de livres ou encore les formules de latin. Si ces textes doivent être en italique on ne mets pas forcément l’accent dessus dans la phrase.

Il ne faut donc pas oublier la balise <i> aussi rapidement. Il faut l’utiliser quand elle s’applique à une règle typographique et utiliser <em> quand vraiment il s’agit d’une emphase.

(Oh et dans le même genre il y a aussi la pauvre balise big.)

Pas de liens sur les images

19 mars 2005 5 commentaires — css, design, ergonomie, html, image, standards du web

Voici le grand principe html du jour : ne pas faire de liens hypertexte sur les images. Je m’explique.

Suite de l’article…

Coulisses du Roi Arthur

29 janvier 2005 4 commentaires — boulot, css, dvdrama, film, html, sémantique, standards du web

Ça y est, le site du Roi Arthur est né, et c’est moi qui l’ai fait !

Chez Dualnet mon dernier projet a été de construire de A à z le site du DVD du Roi Arthur le film, pour Disney. C’est la première fois que je fais ce genre de site, et j’ai dû le faire entièrement tout seul.

Je suis assez fier du résultat, surtout en ce qui concerne l’html valide, léger et sémantique et le sacré usage des feuilles de style.

Croyez moi, ce respect des standards et cette accessibilité est une révolution dans ce genre de sites. Les sites commerciaux, de films, de DVDs et plus largement de publicité sont tous sauvagement crées pour ne fonctionner que chez la grosse partie des utilisateurs, en oubliant le reste.

C’est sans doute le seul site de film qui puisse être visité proprement à partir d’un PDA. Ou bien encore visité par un téléphone portable, un moteur de recherche ou encore un aveugle. (Si si, les aveugles aussi ont le droit de tout savoir sur le DVD du Roi Arthur… :p)

La balise <big>

26 janvier 2005 3 commentaires — html, sémantique, standards, standards du web

La sémantique HTML veut que l’on utilise les balises dont le nom décrit le contenu et non la forme. Par exemple, même si à-priori les deux balises suivantes donnent par défaut du texte en gras, <b> signifie « bold » (gras) et ne donne aucune information sur le contenu alors que balise <strong> signifie « texte plus important », et accorde un sens au contenu de la balise.

Les balises dépréciées en faveur de styles CSS sont donc <b>, <i> italique, <u> souligné, <strike> barré, <center>, <big>, <small>, …

Quoique… Les balises big et small sont des styles de texte certes, mais elles ont aussi un sens !

<big> a une dimension de hauteur, de mise au premier plan. Il se distingue de strong par son importance plus élevée, sa hauteur. C’est comme un header mais sans hiérarchie. Un lecteur vocal pourait, par exemple, le parler plus fort.

De même pour <small>. Il n’y a d’ailleurs aucune autre balise que celle-ci pour qualifier un texte qui est moins important que le reste !

Alors faut-il utiliser big et small ou utiliser des strong et des span stylés en CSS à la place ? Je pense que cette dernière solution serait une erreur, et qu’il faut utiliser ces deux balises oubliées pour leur donner le sens qu’elles aimeraient tant porter.

Class ou id ?

13 juillet 2004 — css, html, sémantique, standards du web

Pour définir le style CSS d’un élément d’ XHTML, que choisir entre une classe (.robert) et un id (#robert) quand cela donne apparement le même résultat ?
que choisir entre un <div class="robert"> et un <div id="robert"> ?
Suite de l’article…

Opquast

1 juillet 2004 — html, sémantique, standards, standards du web

Ouverture en version beta de Projet Opquast d’une liste de toutes les bonnes pratiques à mettre en oeuvre sur un site web pour qu’il soit accessible et agréable pour ses utilisateurs. Tout est fait selon le type de site (boutique, blog, etc) et selon un niveau (de difficulté ?) de 1, 2 ou 3. L’on peut encore participer à la création de cette liste en fournissant ses idées ou ses commentaires.

Il manque à mon propre site quelques points dans le niveau 3, mais dans l’ensemble je m’en sort rudement bien :]

Voir aussi un petit post à propos du lancement d’Oquast sur escalope par notre bon vieux docLegi et Opquast.org.