Des webapps suivant le modèle Android ICS

En parallèle de la mise en place d’une maquette de webapp pour mes projets personnels, j’ai récemement développé un début de maquette pour permettre de développer des webapps à la manière Android ICS (4.0 – Ice Cream Sandwich).

A l’heure actuelle, la maquette ne propose qu’un nombre limité de fonctionnalités à savoir :

  • Header android ICS Bleu
  • Menu latéral
  • Options de l’application
  • Blocs à la Google Now

L’objectif étant à terme d’arriver à proposer une maquette beaucoup plus complète, avec notamment

  • Indicateur de chargement Fait
  • Header dans les autres couleurs ICS Fait
  • Onglets Fait
  • Gestion des formulaires
  • Toute suggestion pertinente qui sera proposée.

Le projet est partagé en open source sur Github, n’hésitez pas à ajouter votre pierre à l’édifice et récupérer les sources pour vos propres développements !

Pour un premier aperçu des fonctionnalités, voici quelques captures d’écran :
Webapp Android - page par défaut

Webapp Android - menu latéral

Webapp Android - options

Edit 12/07/2013 : La démonstration online est maintenant disponible ici.

Publicités

Quick Tip – Hauteur d’un block de texte

Piqûre de rappel pour certains, découverte pour d’autres, vous avez peut-être déjà remarqué que dans ce cas :

Hello world!

La hauteur du block div n’est pas de 20 pixel, mais « plus ». Ceci est, dans des cas d’intégration assez courants (positionnements relatifs) la source de problèmes.

Il est néanmoins assez difficile de définir ce « plus », qui semble être variable en fonction de la police utilisée et du navigateur.

Par exemple sous Chrome et Firefox avec Arial :

font-size 30 29 28 27 26 25 24 23 22 21 20
height 36 35 34 33 31 31 30 28 27 25 25
font-size 19 18 17 16 15 14 13 12 11 10 9
height 23 22 20 20 18 16 16 15 14 12 11

Le ratio est donc un calcul approximatif, probablement avec des arrondis, pas évident de connaitre donc la bonne hauteur du bloc.

C’est là que l’on fait intervenir le line-height. Il suffit de le rajouter Pour résoudre le problème :

Hello world!

A présent, le div a bien une hauteur de 20 pixels de haut !