JT Yeek : cadeaux originaux geek et design

bbxdesign

Vestiges d'un CSS Guru

Mode normal → (affichage complet du blog)

Suivant

Précédent

73 superbes headers

Billet

5 superbes headers

A peine ai-je fini mon nouveau header que je me rend compte qu’il fait pâle figure face à d’autres : 73 superbes headers de site. Je viens de tomber sur ce post de noupe.com qui offre une riche et jolie dose d’inspiration. Voici mes préférés.

Next2Friends

Ce style ne m’est pas inconnu… En effet, le designer n’est autre que Nick de N.Design Studio (au header déjà grandiose), dont le projet parallèle Web Designer Wall possède un design génial (header compris).

Casio Exilim Lab

Une multinationale qui s’offre un mini-site au design léger et coloré, très attrayant, avec son côté artisanal. En prime, un menu qui se déroule littéralement, et vers le haut svp!

Art-zen

Header fluide et coloré pour ce blog tout récent (pas grand chose qui fonctionne), mais on peut encore accéder à l’ancien portfolio.

Zinaz

Sur Zinaz, un autre header particulièrement florissant sur un site où l’homogénéité se voit de haut en bas.

Cult-foo

Très clean, Cult-foo possède un magnifique header aussi lumineux qu’attractif. Admirez la réalisation admirable des oiseaux!

bdbx 07 : bd de geek

Billet

Une fois n’est pas coutume, une blague d’une amie (elle se reconnaîtra, hihi). Visitez son site : le blog de Pulupulu.

bd de geeks

Guitar Rising = Guitar Hero avec une vraie guitare

Billet

Ah Guitar Hero… Le jeu qui fait passer les gamers pour de (fausses) rock stars. Parce que ce jeu n’apprend pas à jouer de la guitare, mais permet « seulement » de jouer à Guitar Hero (Stanley et Kyle de South Park l’apprendront à leurs dépens…). Les vrais gratteux détestent souvent ce jeu pour ce degré d’imposture.

GameTank a donc décidé de créer un mix des deux mondes pour essayer de les réconcilier (et surtout surfer sur la belle vague) et sort le jeu : Guitar Rising.

Comment ça marche ? Il faut brancher sa guitare par USB ou directement à la carte son, ou on peut utiliser un microphone. Le jeu sera disponible sous PC et Mac.
Au niveau du contenu, ça manque encore de morceaux connus mais ils y travaillent. Il y aura plusieurs modes de difficultés, histoire d’évoluer progressivement, et permettre, selon GameTank, de pouvoir apprendre à jouer de la guitare.

Je pense personnellement que ça n’est pas un très bon moyen d’apprendre, mais l’idée de me défouler sur quelques morceaux sympas me passe par la tête.

Via Gizmodo.

bdbx 06 : linux pour maman

Billet

Linux pour maman

Votre code barre personnel

Billet

Code Barre bbxdesign

Dans l’ère moderne, nous ne sommes plus que de simples consommateurs, rien de plus. Pourquoi ne pas nous attribuer un code barre ? A défaut de vraiment en avoir un collé dans sa nuque (aaah… 47…), vous pouvez déjà connaître votre code barre personnel. Il suffit de répondre à quelques questions pas trop indiscrètes, et le tour est joué. A quoi ça sert ? A rien.

Sur le même site vous pouvez trouver un truc encore plus sympa : un widget horloge en code barre (hébergé chez Apple). « Non cet écran n’est pas à vendre. »

bdbx 05 : le syndicat des webdesigners

Billet

5 bonnes pratiques CSS

Billet

En attendant le prochain bdbx (déjà prêt), je vous propose 5 bonnes pratiques en CSS. A force de bosser des feuilles de style, il m’arrive de ne plus faire quelques erreurs même si je n’arrive pas encore à toujours trouver la solution optimale directement. Ici, je ne parlerai pas de pratiques basiques plutôt évidentes (comme par exemple d’utiliser un maximum les notations raccourcies), mais d’autres plus subtiles auxquelles je ne pensais pas auparavant.

  1. Ne pas utiliser de position:absolute sur un élément dont on ne connaît pas la hauteur
  2. Bien notifier qu’un lien est en display:block
  3. Ajouter un background-color avec le background-image
  4. Utiliser le position:relative en dernier recours
  5. Mettre un id au body

Lire la suite →

bdbx 04 : CSS insiders

Billet

CSS insiders

thesixtyone : une aventure musicale

Billet

the sixty one : a music adventure

Je vous présente mon dernier site musical préféré : thesixtyone

Le concept

C’est une sorte de jeu où l’utilisateur (nous) peut gagner et attribuer des points à des morceaux de musique, ces derniers étant proposés par nous aussi. On écoute les chansons (au moins 1 minute avant de pouvoir donner des points), et si on aime bien, on « bump« , ce qui augmente le score de la chanson. Au départ, on ne peut « bumper » qu’une seule fois, mais au fur et à mesure que notre « level » augmente, on peut bumper plusieurs fois la même chanson Un Digg-like pourrait-on dire, mais Digg n’a pas inventé le vote (comme diraient les Diggers eux-même…).

« Un jeu ? C’est pas sérieux comme site alors ! » me direz-vous. Je ne pense pas que vous soyez si bornés: le contenu musical du site est très intéressant… Une particularité étant que l’on peut s’inscrire en tant qu’auditeur ou en tant qu’artiste. Dans ce dernier cas, on pourra uploader nos propres morceaux, et ainsi les faire découvrir à la communauté.

Le contenu musical

On y trouve beaucoup d’indie et alter rock, de l’électro, de la pop, du hip hop…

Il y a des artistes connus :

  • Daft Punk
  • Arcade Fire
  • Feist
  • Nada Surf
  • Radiohead
  • Klaxons

Il y a surtout énormément de remixes (écoutez le « 1,2,3,4″ de Feist remixé par Van She) et de reprises (Radiohead qui reprend le Headmaster Ritual des Smiths !!!). Chaque jour offre son lot de nouveautés.

Sur la page d’accueil, il y le Rack, petit panel de chansons d’artistes intéressants mais inconnus. Ils sont mis en évidence pour que les auditeurs y jettent un coup d’oeil, et ça fait gagner des points.

Fonctionnalités

L’interface est claire et pratique. Il y a une utilisation intéressante d’Ajax qui permet beaucoup de fonctionnalités :

  • on peut lancer la lecture d’un morceau et naviguer sur le site sans que la chanson ne s’arrête
  • des infos bulles s’affichent régulièrement en bas à droite de l’écran pour nous informer sur notre compte, nos points, de nouveaux artistes, des infos sur le morceau qu’on écoute (ex: « C’est Jack Johnson que l’on entend ici » alors que c’est le morceau de quelqu’un d’autre)
  • acheter les morceaux
  • créer sa playlist facilement

Bref, du contenu intéressant, généré par les utilisateurs, de la très bonne musique, et des fonctionalités sympas : thesixtyone me ravit.

Prémices du HTML 5

Billet

Ca faisait quelques temps que je voulais en parler. Cela fait suite à cet article de « A List Apart » : A Preview of HTML 5, dont ce post est entièrement inspiré.

Voici donc des infos sur le HTML 5. Cela correspond aussi au XHTML 5 (à la différence que ce dernier est exprimé en XML, ce qui apporte son lots de variations), qui passerait de la version 1.1 à la version 5 (et coller à celle du HTML). Bien évidemment, tout ceci n’est pas encore clairement défini, ce sont juste des versions alpha (et encore) développées par le W3C et le WHATWG.

Structure d’une page

Pour l’instant, les balises existantes définissent des titres, des paragraphes, des liens, des emphases, des abbréviations… Mais lorsqu’il est question d’établir les grandes parties d’une page, on doit se tourner vers l’inévitable balise générique : <div> (qui amènera l’horrible expression « coder en div »), balise qui ne signifie et ne représente rien. Que ce soit le header, le footer ou la sidebar, n’ayant pas autre chose sous la main, on utilise des <div> par défaut, auxquelles on applique des id spécifiques.

Le HTML 5 corrigera tout ça. On aura droit à des nouvelles balises très utiles :

  • header
  • nav
  • article
  • section
  • aside
  • footer

La structure d’une page pourra ressembler à ceci :

<body>
  <header>Bienvenue</header>
  <nav>Accueil - A Propos - Contact</nav>
  <article>
    <section>
      Prémices du HTML 5
    </section>
  </article>
  <aside>Catégories</aside>
  <footer>bbxdesign 2008</footer>
</body>

Plus léger et plus lisible. Il faut noter que dans sa syntaxe, une balise <article> pourra regrouper plusieurs balises <section>, ces dernières correspondants à des sous-parties d’un article.

L’intérêt n’est pas seulement pour l’intégrateur du site, mais aussi au niveau des moteurs de recherches. A l’heure actuelle, un moteur ne peut en aucun cas savoir que différentes parties existent dans une page. Il ne peut pas hiérarchiser ou utiliser ces parties.
Ces véritables balises de page pourront le permettre. Ensuite, libre alors aux moteurs de les interpréter à leur façon.

Question accessibilité, ces balises seront très utiles. La page étant bien hiérarchisée, on pourra facilement naviguer et sauter des parties, aller d’une section à une autre… Il suffira d’adapter les outils à cette nouvelle structure.

Balises Multimédia Audio et Vidéo

Lorsqu’il s’agit d’audio ou de vidéo dans les pages web, on pense tout de suite et exclusivement au lecteur Flash. Il s’est imposé par sa légèreté, ses fonctionnalités (streaming, multimédia…), son design. C’est tout simplement le seul moyen de partager de l’audio et de la vidéo facilement, avec des unités de contrôle, et une grande rapidité.

HTML 5 proposera une alternative grâce à ses balises <video> et <audio>. Par exemple, pour la vidéo on pourra définir :

  • la source
  • les dimensions
  • l’image de preload
  • le type de fichier
  • des contrôles

Bref, ça sera le strict minimum, histoire d’avoir la possibilité de lire des fichiers multimédia sans passer par Flash (surtout lorsqu’on ne le maîtrise pas).

D’autres nouvelles balises

Un petit tour sur le site du W3C permet de connaître quelques autres nouvelles balises qui vont venir enrichir le panel :

  • <dialog> : pour une conversation
  • <meter> : pour des unités de mesure
  • <time> : pour l’heure
  • <datagrid> : une représentation intéractive d’une arborescence ou de données tabulaires
  • <output> : pour définir le résultat d’un processus, par exemple celui d’un script

La liste des balises (et des attributs) s’agrandit pour mieux nous aider en tant que développeurs (facilité, flexibilité, lisibilité) mais aussi en tant qu’utilisateurs (accessibilité, intéraction, simplicité).

Sources :  A Preview of HTML 5 , HTML 5 differences from HTML 4

Populaire Tutoriels Fun