GitW00t - Un script pour enregistrer une Div en Gif animé Si vous avez votre propre site et que vous souhaitez proposer à vos visiteurs une fonction d'enregistrement d'une partie de vos pages, j'ai ce qu'il vous faut. Ça s'appelle GitW00t! et c'est un script qui permet d'enregistrer la div de votre choix sur une page web, pour ensuite en faire un GIF animé. Idéal pour enregistrer les interactions de vos visiteurs avec un jeu, un formulaire, ou n'importe quelle fonctionnalité dans le but de produire des rapports de bugs, ou des replays de parties, ou des démos d'utilisation...etc. Mais ça ne s'arrête pas là puisqu'il est possible de l'utiliser aussi sur des sites qui ne sont pas à vous, grâce à un bookmarklet ou un petit script à lancer via Firebug ou équivalent. Voici quelques démos qui intègrent GitW00t : Je suis sûr que ça doit faire lever le sourcil de pas mal de monde, mais ce dont je suis certain, c'est que ça va donner pas mal d'idées délirantes aux dev ;-) Vous avez aimé cet article ?
display: inline-block et les espaces indésirables La valeur inline-block de la propriété display est à la mode, même si elle demeure encore trop peu connue et mal utilisée. Elle offre de multiples avantages dont le principal est de pouvoir disposer des éléments les uns à côté des autres, tout en étant dimensionnés et sans les retirer du flux. L'un de ses inconvénients majeurs est l'apparition d'un espace indésirable et incompressible de prime abord entre les blocs. S'il n'est pas gênant, tant-mieux; sinon, de multiples techniques plus biscornues les unes que les autres existent. Le cas «white-space» Comme tous les éléments de type inline ou de contenu textuel, les objets munis de la déclaration display: inline-block respectent la règle des caractères blancs (whitespace), c’est-à-dire que n’importe quel caractère HTML espaçant deux éléments va immanquablement apparaître entre leurs deux boîtes. L’espace créé par le white-space est d'environ 4 pixels, mais ne vous y méprenez pas : cela varie selon les navigateurs et la taille de police.
CSS3 Grid Layout - Alsacreations Le module de positionnement "Grid Layout" est une spécification du W3C à l'état de Candidate Recommandation dont les premiers jets datent de 2004. Sa documentation officielle est actuellement maintenue par trois contributeurs, dont une personne de Microsoft et une personne de Google. Note : ce tutoriel a été initialement rédigé en février 2012. Il a subi une grosse refonte en octobre 2015 pour se mettre à jour. Les anciennes versions de Mozilla Firefox, Chrome et Opera nécessitent d'activer un "flag" dans la configuration du navigateur; les autres navigateurs sont également intéressés et ne devraient pas tarder à implémenter ce module, au regard des vastes possibilités offertes par ce schéma de positionnement. Comment activer les flags ? Sur Firefox : about:config puis layout.css.grid.enabled Sur Chrome : puis "Activer les fonctionnalités expérimentales de Web Platform" Compatibilité navigateurs du module Grid Layout Le positionnement par grille Mise en oeuvre Démonstration
Project Parfait (Beta) - PSD CSS Extraction, Measurements and Image Optimization Service for the Web Docteur HTML5, Travailler en HTML5 dès aujourd'hui! Il existe plusieurs événements sur HTML5 en français. Trouvez-vous qu’il est difficile d’en trouver un dans votre ville ? Si vous en organisez un, présentez-le dans les commentaires de ce billet et sait-on jamais, cela pourrait être utile ! Par exemple, à Montréal, le W3Québec organise des HTML5 Meetup. Continuer à lire » Nous recevons beaucoup d’e-mails via notre service « Demandez-le au docteur » à propos des conséquences de l’utilisation d’HTML 5 sur le référencement. Continuer à lire » (Aussi disponible en espagnol, Traducción de “HTML 5 + XML = XHTML 5″, en Portuguais et évidemment dans sa version originale en anglais.) Continuer à lire » Nous sommes déjà habitués depuis un bon bout de temps de voir <div id="pied-de-page"> à la fin du code source de pages Web. Continuer à lire » Même si HTML 5 est une technologie récente et fantastique, certains navigateurs ne supportent pas nativement les nouveaux éléments sémantiques. Continuer à lire » Continuer à lire » Continuer à lire »
CSS3 : @font-face, vous avez demandé une police de caractère non standard ? Vous êtes ici > CSS Débutant | CSS3 | Déclarer une police de caractère non standard avec @font-face Longtemps, longtemps, le webmestre s'est lamenté de ne pouvoir utiliser qu'un petit nombre de fontes pour ses sites web. Arial, Helvetica, times new roman... c'était d'un triste ! Ou alors il fallait faire des images. Et mettre du texte en image ce n'est tout de même pas très logique, sans compter les problèmes d'accessibilité qui peuvent en découler. Grâce à @font-face on peut à présent utiliser des polices de caractère exotiques et laisser cours à son inventivité. Règle utilisée : @font-face Fonctionne avec : Chrome, Safari Firefox, SeaMonkey MSIE Opera Le sélecteur @font-face existe depuis très longtemps : depuis les CSS 2.0. La police de caractère, ou plutôt les différents formats de la police de caractère, doit être placée sur le serveur. Il y aura donc les mêmes contraintes techniques et éthiques qu'avec une image : Étape 1 : obtenir tous les formats nécessaires Code CSS Tout est dans le ?
5 sources d’inspiration pour la création d'un site web Trouver un nom pour son site Si vous comptez (par exemple) lancer un site web qui parle de musique, vous vous doutez bien que les noms de domaine music.com et music.net sont déjà pris depuis longtemps. Une idée serait de trouver un nom assez original pour son site, avec le nom de domaine qui va avec. Et justement, il y a des applications sur le web qui vous aident à trouver des noms de site dont les noms de domaine correspondant sont encore disponibles. C’est le cas de Naminum. Dans le test que j’ai fait, j’ai saisi « Music ». En revanche, j’ai trouvé le nom « Musicways » assez charmant et justement, après avoir cliqué sur celui-ci, on m’informe que le nom de domaine Musicways.net est encore disponible. Un peu d’inspiration pour le design Une fois le nom du site trouvé et le (ou les) nom de domaine réservé, il ne reste plus qu’à créer le site. Trouver des icônes (ou s’en inspirer) Depuis un moment, on ne parle que du Material Design de Google. Trouver les bonnes combinaisons de polices
Using CSS animations You can get additional control over animations — as well as useful information about them — by making use of animation events. These events, represented by the AnimationEvent object, can be used to detect when animations start, finish, and begin a new iteration. Each event includes the time at which it occurred as well as the name of the animation that triggered the event. We'll modify the sliding text example to output some information about each animation event when it occurs, so we can get a look at how they work. Adding the CSS We start with creating the CSS for the animation. Adding the animation event listeners We'll use JavaScript code to listen for all three possible animation events. const element = document.getElementById("watchme"); element.addEventListener("animationstart", listener, false); element.addEventListener("animationend", listener, false); element.addEventListener("animationiteration", listener, false); element.className = "slidein"; Why? Receiving the events