HTML

Centrer une div à width variable

Ah le centrage en CSS, toute une histoire ! Quand la largeur d’une div est fixe – par exemple width: 400px – aucun problème, un petit coup de margin: auto et le tour est joué ; mais quand la div prend la largeur de son contenu, c’est une toute autre histoire… Chers amis, ne désespérez pas, à tout problème une (des ?!) solutions. Allez, à l’aventure !

(suite…)

101 balises HTML5 + exemples

Le HTML5 c’est plein de bonnes choses, des APIs Javascript, du CSS3, mais aussi et surtout des balises HTML ! Et cette nouvelle mouture d’HTML apporte son lot de nouveauté. Cette version du langage met en avant la sémantique, ainsi, de nombreuses balises permettent de remplacer les balises génériques div et span. Du layout à la citation, faisons le tour de tout ça, exemples à l’appui voulez-vous ?

(suite…)

3 outils HTML5 qui vous feront oublier powerpoint

On a toujours besoin, à un moment ou à un autre, de faire une présentation : un exposé, un brief, une conférence, bref à tous les niveaux et a tous les âges. Pour cela, on pense immédiatement à PowerPoint, les adeptes de la firme à la pomme utiliserons parfois Keynote et certains d’entre vous connaissent peut être Prezi.

Il existe cependant bien d’autres solutions, disponibles gratuitement, en open source et full html5. Alors pourquoi se priver et continuer à payer des licences pour des logiciels qui, au final, brident quelque peu notre créativité ?

(suite…)

Des icônes sans images avec unicode !

Dans une certaine mesure, il est possible de totalement éviter les images pour vos icônes ! Certaines icônes sont tout simplement disponible en unicode et html. C’est à dire que c’est du « texte-icône ». Certains caractères « spéciaux » tels que « ç, €, à, é, è, ê… » possèdent bien en html des codes ressemblant à ça : « &ccedil ». Il ne vous viendrait pas à l’esprit de mettre une image à la place du texte… Alors faisons pareil pour les icônes !

(suite…)

Customiser le input file

Chaque navigateur possède son propre champ de type file, ce dernier n’est pratiquement pas modifiable en CSS. C’est fort dommage car d’une part, chaque navigateur possède son propre « design » de ce type de input, ce qui ne permet pas d’avoir une homogénéité entre les navigateurs, et d’autre part, cette impossibilité de le modifier via CSS, ne permet pas d’adapter ce dernier au design de notre site. Notre objectif est donc de palier à cette lacune, nous aurons recourt à CSS (quand même) et à jQuery.

(suite…)

HTML coder pour l’e-mailing

L’emailing est un sujet assez vaste. Je l’avais déjà abordé au travers d’un article plutôt axé marketing, qui traitait des meilleurs jours et plages horaires pour l’envoi de mailing. Dans un autre article, toujours orienté webmarketing, j’avais expliqué les différentes notions à bien appréhender pour construire une landing page efficace.

Ce post-ci sera un peu plus technique. En effet, on va passer en revue les bonnes pratiques à mettre en oeuvre pour créer un template HTML dédié à l’envoi par mail. Qu’il s’agisse donc d’un emailing de prospection, d’une newsletter ou encore d’une notification automatique d’un site internet (confirmation d’inscription, confirmation de commande etc.) si vous désirez envoyer autre chose que du texte brut, il va falloir adapter vos pratiques au media email. Sans quoi vos destinataires ne recevront rien d’autre qu’une bouillie de mise en page, s’ils reçoivent quelque chose tout court d’ailleurs. Allez, c’est parti !

(suite…)

Le test HTML5

Le HTML est un terme qui regroupe de nombreuses fonctionnalités. Les balises HTML5 évidemment, mais aussi les nouvelles API du DOM et aussi pour certains les nouvelles moutures du JS, a.k.a ECMAScript.

La première version de ce micro article (2012) parlait du WebGL, de microdonnées, du dragNdrop. Mais bien d’autres choses ont fait leur apparition depuis: le WebGL2, la push api, les web workers etc.

Pour tout développeur soucieux de l’avancement des technos front et de l’état des navigateurs, trois ressources permettent de savoir si vous pouvez utiliser telle ou telle techno en prod ou non :

  • le très connu Can I Use qui permet d’afficher le support d’une api précise,
  • HTML5test qui donne une note à votre navigateur et présente les différentes technos supportées (ou non) et fourni les liens vers la doc W3C, Whatwg ou MDN,
  • enfin le test ECMAScript qui présente une synthèse de l’implémentation des différentes versions de JavaScript par les principales plateformes.

Bon dev !