Spécialisé dans la conception d'interfaces utilisateur (Développement et Graphisme), je me suis beaucoup intéressé aux bonnes pratiques d'ergonomie et d'accessibilité dans le respect des standards.
Warry.fr
Warry.fr
Wah ! Du temps s’est écoulé depuis notre première étape du tutoriel développer des webapps sur iphone ! Je vous avais promis une application pour l’exemple, et bien nous allons développer une webapp pour Twitter ! C’est du déjà vu mais cela reste un bon exemple.
Toutes les fonctionnalités ne seront pas implémentées : nous allons nous limiter à l’affichage des twitt’s, la composition de nouveaux statuts, la recherche par mot clef, et l’affichage des messages privés. Le résultat final (pour les pressés) est ici.
Pour l’étape 2, nous allons intégrer une application en HTML5/CSS3 et découvrir les nouveaux sélecteurs, les dégradés, les animations… En prenant soin de ne pas y ajouter une seule ligne de Javascript pour le moment. Voici les maquettes que nous allons intégrer :
Pour information, la taille des applications iphone sont 320x460 en mode portrait (480x300 en paysage) soit la résolution de l’iphone moins les 20 pixels de la barre de statut.
1. Le HTML
La structure est la même que pour un site web, avec un doctype HTML5 :
<!DOCTYPE html> <html> <head> <title>Hotwitt'</title> </head> <body> </body> </html>
On y ajoute également les meta-tags que nous avions vu la dernière fois dans le <head/> :
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-startup-image" href="images/startup.png"> <link rel="apple-touch-icon-precomposed" href="/images/icon.png"/>
Pour palier au fait que position:fixed n’existe pas sur l’iPhone, on doit procéder comme si on devait utiliser une div avec un overflow:auto, avec un “wrapper” (enveloppe en français) et un “groupe de pages” :
<div id="wrapper"> <div id="pages"> <section id="timeline"> </section> <section id="messages"> </section> <section id="search"> </section> <section id="account"> </section> </div> </div>
Je place la balise du formulaire d’ajout avant ce wrapper afin de pouvoir le faire apparaitre au-dessus avec un comportement indépendant :
<form id="compose"> <textarea id="content"></textarea> <button id="cancel">Cancel</button> <label id="chars-left">140</label> </form>
A propos des formulaires justement, il y a de nouveaux attributs disponibles pour les balises input (entre autres), comme le placeholder qui permet d’afficher une valeur par défaut aux champs. La liste de toutes ces nouveautés est disponible ici .
Pour le champ de recherche j’utilise un champ de type “search” et pour le compte un champ type “email” avec l’auto-capitalisation et la correction orthographique désactivés :
<input type="text" id="keywords" placeholder="Keywords" autocorrect="off" autocapitalize="off" />
<input type="email" id="login" placeholder="Email or login" autocorrect="off" autocapitalize="off" /> <input type="password" id="password" placeholder="Password" autocorrect="off" autocapitalize="off" />
Pour afficher chaque twitt j’utilise des listes de définitions, parce que c’est ma lubie, mais vous pouvez utiliser ce que vous voulez. La balise <time/> est également mise à contribution pour afficher les dates :
<dl> <dt><img src="avatar.png" />somebody</dt> <dd class="time"><time datetime="2010-07-17T05:00-12:00">5 minutes ago</time></dd> <dd class="content">lorem ipsum dolor sit amet consectetuer</dd> </dl>
On crée le menu à l’aide de la balise nav (qui se comporte comme ul/ol)…
<nav> <li class="active"><a href="#timeline">Timeline</a></li> <li><a href="#compose">Compose</a></li> <li><a href="#messages">Messages</a></li> <li><a href="#search">Search</a></li> <li><a href="#account">Account</a></li> </nav>
Et c’est fini pour le HTML (résultat ici) ! C’est pas bien sorcier, donc on ne s’y attarde pas. Si vous avez besoin de précisions je vous invite à lire, si ce n’est pas déjà le cas, la première étape de ce tutoriel et la documentation officielle.
2. Les CSS
Là on va jouer ! Je ne vais pas tout détailler mais uniquement parler des CSS3, on va partir d’une feuille de style CSS2 classique et basique dont vous pouvez admirer la beauté ici, et ajouter les modifications.
La première chose que je fais c’est empêcher la sélection de texte intempestive par l’utilisateur, et masquer les zone active lors du touch :
body {
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
Ensuite, il faut modifier la balise #wrapper afin que le scroll se fasse avec overflow:auto, du coup sur iPhone il sera impossible de défiler en attendant le javascript. -webkit-box-sizing:border-box permet de modifier le box model pour que le width et le height inclusent le padding et le border, et ainsi pouvoir mettre un height 100%. En vérité c’est un attribut CSS2, mais associé aux CSS3 (détails) :
#wrapper {
...
overflow: auto;
-webkit-box-sizing: border-box;
border-bottom: 43px solid transparent;
}
Mettons maintenant en forme le menu à l’aide des masques CSS. Il suffit de créer un png où les zones transparentes sont cachées, et cela nous permet d’avoir des icônes de toutes les couleurs en utilisant qu’une image par icône (en changeant les background), et ils s’utilisent pratiquement comme les background :
nav a {
...
text-indent: -999em;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center center;
}
nav a[href="#timeline"] {
-webkit-mask-image: url('images/twitts.png');
}
On répète l’opération pour toutes les icônes, et pour avoir des boutons actifs avec un look d’onglets on utilise les border-images :
nav li.active {
-webkit-border-image: url('images/button.png') 0 5 0 5 stretch stretch;
}
On ajoute des dégradés :
nav li.active a {
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#555));
}
Ils s’utilisent en background (ou en masques) de cette façon dans webkit : -webkit-gradient([linear ou radial], [position début], [position fin], from([couleur début]), to([couleur fin]). Vous pouvez aussi ajouter des points d’arrêts, je vous laisse regarder la documentation pour en savoir plus.
Intéressons-nous au formulaire d’ajouts, en particulier le petit compteur de caractères restants car il va nous permettre d’aborder 3 sujets : les bords arrondis, les ombres des boites, et les ombres de texte :
#chars-left {
...
-webkit-box-shadow: 0 2px 2px #000;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
text-shadow: 1px 1px 0px #fff;
}
Les ombres s’utilisent de la manière suivante (textes ou boites) : [décalage horizontal] [décalage vertical] [taille du flou] [couleur]. Il y a aussi les ombres internes (qui ne fonctionnent pas encore sur iPhone) en ajoutant le mot-clef “inset” : -webkit-box-shadow: inset -2px -2px 5px #000;
N’oubliez pas, vous pouvez utiliser les couleurs rgba, c’est à dire avec la transparence : rgba(0,0,0,.5) = noir à 50%.
Les bords arrondis sont connus, il suffit de préciser le rayon de l’arrondis : -webkit-border-radius: 3px;
Avec l’iPhone, il y a tout une partie des CSS qui s’envole, c’est tout ce qui touche au survol (hover) ! Plus gênant qu’autre chose cet attribut sur iPhone est géré basiquement (1ère tape = hover, 2ème tape = click). Mon conseil est donc de ne pas l’utiliser.
En revanche je vous recommande le pseudo-sélecteur :target afin de créer une navigation basique, en attendant le javascript. L’attribut target permet d’ajouter des styles aux div qui sont pointées dans l’url (index.html#id1 > id1 — voir le html de la navigation) :
section {
...
display: none;
}
section:target {
display: block;
}
Pour se la péter un peu on fait la même chose avec le formulaire d’ajout, et on y ajoute une animation :
#compose {
...
-webkit-transition: top 200ms linear;
}
form:target#compose {
top: 0;
}
Les animations en CSS3 sont simples, il suffit de préciser les attributs à animer (séparés par des virgules, ou all pour indiquer tous les attributs), la durée en millisecondes (ms) ou secondes (s), et enfin la forme de l’animation (accélération, décélaration, linéaire…), Plus d’infos ici.
Après avoir répété toutes les actions ci-dessus aux bon endroits, on obtient le résultat est disponnible ici, vous pouvez aussi y accéder avec votre iPhone. Un Github est aussi mis en place ici.
C’est tout pour aujourd’hui ! La prochaine et dernière étape concernera la couche javascript. Nous y verrons les limitations des évènements et du scroll en détail, ainsi que des trucs plus funs comme le localstorage. A bientôt !
Si vous en voulez encore voici deux petits liens :
Et pour finir en beauté comme la dernière fois, sachez que ma société Zenexity (Paris 9) est actuellement à la recherche d’un webdesigner (UI-designer & front developper) pour des applications web et web mobile. Contactez-moi pour plus d’informations.
