JT Yeek : cadeaux originaux geek et design

bbxdesign

CSS + WordPress + Web Design

Mode normal → (affichage complet du blog)

Suivant

Précédent

Design

Refonte de Task This, site d’une appli iPhone

Billet

Vous connaissez tous ces sites d’appli iPhone ? Depuis 2 ans, c’est devenu une tendance, une catégorie à part dans les designs de site. Personnellement, je les trouve très créatifs, modernes et pertinents. Et je m’en inspire pas mal, comme par exemple dans cette liste de 40 sites d’appli. Malheureusement, je n’ai jamais eu l’occasion de bosser sur un tel site.

C’est pourquoi j’ai forcé le destin. En découvrant Task This, une appli française gratuite de gestion de taches, j’ai tout de suite eu envie de proposer mes services pour faire la refonte. Lire la suite →

CSS Naked Day!

Billet

Aujourd’hui c’est le CSS Naked Day! Virez votre CSS et montrez nous votre code HTML pour voir si il est beau! Bon, j’ai raté les éditions précédentes. Mais avec mon nouveau thème, je voulais tenter le coup!

CSS Naked Day ? Kesako ?

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your .

On April 9th, simply remove all CSS from your website, stripping it entirely of its design.

Le site sera sans CSS pendant 48 heures. En effet, c’est le 9 avril international, c’est à dire, à n’importe quelle endroit sur terre, pour n’importe quel fuseau horaire.

allRGB : des images avec 16 millions de couleurs

Billet

Vous connaissez les écrans qui affichent + de 16 millions de couleurs ? Bon. Ben là c’est pas des écrans mais des images de 16 millions de couleurs. Et plus précisément : 16 777 216 couleurs. Autrement dit : TOUTES les couleurs disponibles en RGB (où chaque couleur, je le rappelle, correspond à l’addition de trois longueurs d’ondes pour chacune des trois couleurs Rouge, Vert, Bleu pour lesquelles il existe 256 longeurs d’onde chacune). Et ça donne allRGB.

Si vous avez du temps et des compétences en création d’algorithmes

Ambilight en HTML 5

Billet

Vous connaissez la technologie Ambilight de Philips ? Bon. Imaginez ça dans votre navigateur.

Ambilight en HTML 5

Si vous avez aimé le Sublime Video, vous aimerez l’Ambilight en HTML5 (qui reprend d’ailleurs la même vidéo).
Par contre, j’ai pas trop compris les explications en russe

(via Beautiful Pixels)

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.

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 →

La refonte perpétuelle

Billet

Le web est un média en mouvement continu. Comme chaque web designer qui se respecte, je fais ma veille régulière et relativement abondante, qu’il s’agisse de graphisme, de connaissances, d’astuces de code, de design, de tendances, d’outils, d’acteurs du web. Avec toute cette masse d’information, textuelle et visuelle, j’ai sans cesse envie d’intégrer de nouvelles idées graphiques et techniques dans ce blog, et je commence souvent des thèmes wordpress sans les terminer au final.

Le dernier en date, débuté il y a 2 mois déjà, s’appelle bbxjulie (en référence au morceau “Julie with…” de Brian Eno). J’y ai beaucoup bossé, je l’ai fignolé et je l’ai même intégré en thème wordpress. La seule qui manque est la page portfolio (une Page WP custom que j’ai pas pris le temps de faire). D’ailleurs, vous pouvez voir sur ce blog le thème bbxjulie.

Lorsque je l’ai commencé, j’étais très enthousiaste et plutôt content du rendu. C’est un des rares thèmes que je n’ai pas laissé tomber au bout de 3 jours, et je me disais qu’il allait être très complet et surtout : qu’il allait durer. Mais au final, même en y ayant passé beaucoup de temps, il ne me plaît pas. Je sais pas pourquoi. Plusieurs éléments me plaisent, notamment la sidebar avec les vignettes du portfolio et le champ de recherche. Mais c’est tout.

Pourquoi une refonte ?

La réponse que je me donne à cette question est très simple : je n’aime plus mon thème actuel. Il est ennuyeux et loin d’être ce que je voulais qu’il soit. Et l’intégration de nouveaux outils implique selon moi une refonte graphique.

Pourquoi ça bloque ?

Le manque d’inspiration, c’est évident. Mais surtout, le flou dans l’identité que je veux donner à ce blog. Ca doit être lié au rôle de ce blog.
Mais d’ailleurs, il me sert à quoi ce blog ? A parler, réponse évidente.
Mais de quoi ? De web design, de jeux vidéo, d’humour, de musique, de multimédia, de technologie, de code.
De moi ? Oui et non. Oui parce que l’intérêt principal d’un blog et la subjectivité affichée de l’auteur. Non parce que je ne parle pas de moi directement.
Quoiqu’il en soit, je me suis toujours refusé à essayer d’établir une charte éditoriale. Sans doute parce qu’il n’y en avait pas au départ et qu’il est compliqué d’en définir une en cours de route.

Résultat : ce blog est en roue libre depuis quelques temps, une sorte de hérisson à la dérive qui s’affiche et se manifeste lorsqu’il ne s’amuse pas à traverser des tunnels.

Cube 02 : une police cubique

Billet

Sur Fontfabric, une police où tout part d’un simple cube : Cube 02.

police-cubique

Via SimpleBits

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

10/GUI : le futur de l’interface tactile de bureau

Billet

10-gui-interface-tactile-futur
Pour interagir avec notre ordinateur, on utilise le combo inévitable : clavier + souris. Ca fait plus de 25 ans que ça existe et depuis, cette interface basique mais riche et accessible n’a peu ou pas évolué.

Interface tactile : bureau versus mobile

Depuis quelques années, des interfaces tacticles ont fait leur apparition dans le grand public. Je pense notamment à l’ordinateur HP avec écran tactile. Et puis il y a aussi l’iPhone qui, malgré son nom, ressemble davantage à un mini pc qu’à un téléphone portable.

D’ailleurs le côté tactile de l’iPhone est excellent, que ce soit au niveau technique qu’à celui de l’interface. Par contre, au niveau bureau, on est loin du compte.

Problèmes physiques des interfaces tactiles de bureau

Il y a plusieurs problèmes aux interfaces actuelles :

  • avoir à tendre le bras en continu pour utiliser l’écran face à nous
  • garder la tête penchée en bas pour utiliser un écran posé sur la table
  • les mains masquent l’écran

Problèmes de l’interface graphique

Graphiquement, et sans que ce soit lié au côté tactile, l’interface basée sur des fenêtres disposées en vrac sur un plan 2D pose problème. Certaines interfaces ont essayé l’approche 3D, sans grand succès.

On fait comment alors ?

10/Gui (alias Clayton Miller) propose une solution innovante et claire : écran + tablette tactile (10 doigts) + disposition horizontale des fenêtres (con10uum).

Tout dépend du nombre de doigts utilisés :

  • 1 doigt : action dans l’application locale
  • 2 doigts : scroll et zoom
  • 3 doigts : bouger et redimensionner les fenêtres
  • 4 doigts : scroll et zoom de l’espace entier

Matez ça, c’est magique.

10/GUI from C. Miller on Vimeo.

Populaire Tutoriels Fun