JT Yeek : cadeaux originaux geek et design

bbxdesign

CSS + WordPress + Web Design

Mode normal → (affichage complet du blog)

Suivant

Précédent

XHTML / CSS

Refonte et thème tumblr pour Waker

Billet

Waker, c’est un site de bêtises trop fréquentes et trop futiles pour être postées ici.

Au départ, c’était un WordPress avec un thème pas trop travaillé, mais j’aimais bien la palette de couleurs. Et puis je me suis rendu compte que poster avec WordPress était trop contraignant, car trop long. Même avec le bookmarklet Press This, poster un simple lien ou une photo prenait trop de temps.

Résultat : je prends un tumblr tout simplement. Le bookmarklet est très efficace : il récupère facilement les photos ou la vidéo de la page où l’on est, et l’upload est direct. Au début, j’ai pris mon thème bbxtumblr, mais il manquait d’identité pour Waker.

Donc, j’en ai fait un autre.

Thème Tumblr Waker

Navigation au clavier

La grande particularité est d’avoir intégré grâce à une lib JavaScript, la navigation au clavier comme pour Google Reader ou FFFFOUND, c’est à dire la touche “J” pour suivant et “K” pour précédent, sachant qu’elle gère aussi la pagination dès que vous arrivez en haut ou en bas de la page.

Et si vous voulez savoir pourquoi ça s’appelle “Waker”, et bien voilà pourquoi.

Empêcher la redimension des textarea dans Google Chrome

Billet

Si vous êtes vous aussi ennuyé de temps à autre par la possibilité dans Google Chrome de redimensionner les textarea à la guise de l’utilisateur (ce qui, en soit, est très bénéfique pour l’utilisateur parce qu’il a la main sur un élément de l’interface, mais qui, du point de vue du designer, peut amener à des aberrations graphiques), alors voici une astuce en CSS.

Avant

Textarea avec flèche

Après

Textarea sans la flèche

Code CSS

textarea{ resize:none;}

bbxwall : mon 7ème thème WordPress

Billet


Avant d’arriver à mon 5e thème, bbxwall, et quelques semaines après avoir jeté aux oubliettes le thème bbxjulie (du nom d’un morceau de Brian Eno), je suis passé par pas mal de thèmes depuis 2 ans et demi.
Lire la suite →

Le HTML 5 en 1998

Billet

“It’s not the language you use ; it’s what you do with it.”

Le HTML 5 se popularise. Ok. Mais même avec un code propre et valide dans un langage novateur, tout le monde est libre d’y appliquer le design qu’il veut.
html5-1998

Le comments-popup.php de WordPress

Billet

A force de faire des thèmes WordPress, je commence UN PEU à comprendre comment ça marche. Et là, y a une énigme que j’ai enfin résolue (enfin, j’ai lu la solution chez quelqu’un d’autre).

Dans le thème Kubrick (le thème par défaut de WP, qui se fait un peu vieux d’ailleurs), y a ce fichier : comments-popup.php. Mais que fait-il ? A priori, c’est une popup… des commentaires. Ok. Mais ça apparaît quand ? Comment ? Où est-ce qu’on l’active ?

Comment l’activer ?

J’ai lu la solution chez Playworkplay : le comments popup s’active par un script à mettre dans le <head>. Il est présent dans le thème “classic” d’ailleurs.

<?php //comments_popup_script(); // off by default ?>

Par défaut, il est désactivé. Faut juste virer les deux slash (//) du début.

Il fait quoi au juste ?

Maintenant, en cliquant sur un lien du style “1 commentaire”, au lieu d’aller à l’ancre des commentaires dans la page du post, ça ouvre une popup avec les commentaires.

Je clique sur le lien…

lien-popup-commentaire

… et ça affiche la popup

popup-commentaire

C’est bien ou pas ?

Je dirais NON. D’abord, c’est pas beau. Puis c’est pas du tout pratique pour l’utilisateur. Puis ça sort les commentaires du contexte de l’article. Puis c’est une popup au départ donc déjà…

Pas étonnant que le thème Kubrick ne l’utilise pas et qu’aucun blog WordPress ne l’utilise (si vous en trouvez un, dites-le moi, j’irai pas voir).

Bref, ce post est juste là pour clarifier les choses.

Un JavaScript pour générer du HTML

Billet

James Padolsey a réalisé un plugin jQuery pour aisément générer du code HTML : Satisfy that selector. Pratique lorsqu’on veut réaliser un template HTML rapidement. C’est surtout très pratique pour le modifier très rapidement.

Imaginons que je vais créer une liste avec 10 éléments et des liens dedans, je fais :

jQuery('ul li:5 a[innerHTML="link"]').satisfy();

Puis je me dis que je veux 20 éléments et avec un span dans les liens. Au lieu de faire du copier-coller ou du search & replace, j’ai juste à faire :

jQuery('ul li:20 a span[innerHTML="link"]').satisfy();

Un plugin qu’il est pratique! Je vous conseille de vous abonner à son blog car il est très bon.

5 balises HTML peu utilisées

Billet

Davantage pour leur sémantique que pour leur pouvoir en SEO, il est intéressant et pratique d’utiliser les balises HTML suivantes. Elles permettent de donner du sens au contenu d’un site, ou plutôt à son code.
Lire la suite →

Drag and drop en HTML 5

Billet

Même si le HTML 5 est encore un joli bordel, des développeurs s’en donnent à coeur joie pour trouver des fonctionnalités très intéressantes, comme ce Drag & Drop en HTML 5 et JS.

Mais arrêtez avec IE6!

Billet

Je le dis et je le répète : il faut arrêter de s’acharner à faire fonctionner parfaitement son site sous IE6. Chaque semaine, il y a un nouvel article qui prône cette idée, et c’est très bien.

stop-ie6

Est-ce qu’un site doit apparaître exactement pareil sous chaque navigateur ?

Pour ceux qui ne le sauraient pas encore : la réponse est non.

Notez l’adverbe “exactement”. Parce que d’un côté, il faut que l’utilisateur puisse reconnaître un site, quel que soit le navigateur utilisé. Mais des différences (plus ou moins) légères dans le graphisme sont non seulement tolérées mais parfaitement admises. Ne pas avoir de coins arrondis (par CSS ou PNG), de dégradés complexes (par PNG), des ombres portées… sous IE6 n’est pas un problème.

C’est surtout qu’un utilisateur d’IE6 ne verra aucune dégradation dans sa version vu qu’il ne verra pas la “bonne version”!

Et puis d’abord, tout le monde n’a pas toutes les polices utilisées sur un site (Arial inexistant sous Linux ?), donc il y a déjà obligatoirement des différences, et des grosses différences : la typographie c’est au moins la moitié du design.
Lire la suite →

Modernizr : un JavaScript pour utiliser du HTML 5 et du CSS 3 dès maintenant

Billet

modernizr

Si vous en avez marre d’attendre que le grand public mette à jour ses navigateurs pour pouvoir utiliser du HTML 5 et du CSS 3, vous pouvez utiliser Modernizr :

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Je testerai sans doute à la prochaine refonte du site, c’est à dire prochainement (?).

Populaire Tutoriels Fun