WTF, iPhone wallpaper

Le 14 juin 2009 • Apple • Design • Web • WordPress • iPhone

Le hasard fait bien les choses, je me suis retrouvé avec ces applis iPhones alignés et WTF!

Ayant quelques minutes à tuer, j’en ai fait un wallpaper pour mon iPhone.

Lire la suite »

5 commentaires

Application WordPress pour iPhone disponible

Le 22 juillet 2008 • Mobile • Web • WordPress • iPhone

Et quoi de mieux que de rédiger un billet directement depuis l’appli pour annoncer sa sortie!
Et bien non, je n’y suis pas arrivé… Des problèmes de connexion et pourtant je capte très bien, la 3G…

Voici quelques screen que j’ai pu prendre pendant son installation et l’ecriture de ce billet ainsi qu’une photo prise depuis l’appli.
J’aurai apprécié la séléction multiple…

Lire la suite »

Commenter

Mon dernier thème WordPress : Look at Me!

Le 30 octobre 2007 • WordPress

Voilà, je viens de terminer un thème WordPress qui cette fois n’est pas pour moi mais pour le photoblog de Lyndsey.

Voilà, je vous laisse y faire un tour pour vous faire votre avis et n’hésitez pas à me le donner .

Ce thème n’est pas disponible au téléchargement, il est réservé au blog de lyndsey.

5 commentaires

Champ de recherche parfait sans label ni bouton de validation

Le 10 août 2007 • Développement • WordPress

Tout d’abord ce mini tutoriel ne s’applique pas uniquement aux champs de recherches mais à tous les <input type= »text »/>. Pour mes exemples je vais partir du principe que l’on veut mettre en place un champ de recherche, sans label ni bouton de validation tout en faisant en sorte que cela reste compréhensible.
Pour éviter d’avoir juste ça :

Remplacer le label par le value

Dans tout formulaire qui se respecte on se doit d’avoir un champ label devant notre zone de saisie. Le but est de savoir ce que l’on doit y saisir!
Exemple :


<label for="inputid" >Recherche : </label><input type="text" id="inputid" />

Recherche :

En plus de ça, le but du label est de permettre, quand on clique dessus d’arriver directement dans la zone de saisie.Maintenant pour remplacer ce label il est possible d’utiliser le value.
Exemple :


<input type="text" value="Rechercher" />


Comme cela on comprend aussi bien ce que l’on attend de ce champ reste que si l’on clique dessus le texte « recherche » reste.

Gérer value et les clics

Le but maintenant est d’effacer le texte « Rechercher » lorsque l’on clic/arrive sur la zone de saisie.
Trop souvent l’on voit la solution « onclick » :


<input type="text" value="Rechercher" onclick="this.value=''" />


Elle peut sembler fonctionner mais en fait comme son nom l’indique, cela ne fonctionne que si l’on clic dessus. Si jamais on arrive sur cette zone via la touche de tabulation (TAB), rien ne se passe.
En fait, à la place d’utiliser « onclick » il faut utiliser « onfocus » :
<input type="text" value="Rechercher" onfocus="this.value=''" />


Allons plus loin

Histoire d’améliorer tout ça, ajoutons une autre fonctionnalité qui consiste à remettre le texte « Rechercher » si l’on quitte la zone de saisie sans la remplir.
Voici le code à utiliser :


<input type="text" value="Rechercher" onfocus="this.value=''" onblur="if(this.value=''){this.value='Rechercher';}" />


Maintenant le problème est que si l’on clic sur cette zone même si le texte est différent de « Rechercher » celui ci s’efface.
Il faut donc vérifier ce qui y est écrit, voici le nouveau code :
<input type="text" value="Rechercher" onfocus="if(this.value=='Rechercher'){this.value='';}" onblur="if(this.value=''){this.value='Rechercher';}" />


Le champ de recherche parfait

Selon moi… Le champ de recherche parfait ressemble à l’exemple précédent. Sauf que le texte « Rechercher » n’est pas suffisant, n’ayant pas de bouton de validation un message du genre « Entrer votre recherche et appuyez sur entrer » (me) semble être plus parlant.

Aussi si votre page accepte le php, comme la plupart maintenant, pour éviter d’avoir des erreurs de frappe qui feraient que rien de tout ça ne fonctionne, éviter d’avoir à tout changer les textes mais qu’un seul on peut utiliser une variable.
Comme ceci :


<?php $texterecherche = 'Entrer votre recherche et appuyez sur entrer'; ?>
<input type="text" value="<?php echo $texterecherche; ?>" onfocus="if(this.value=='<?php echo $texterecherche; ?>'){this.value='';}" onblur="if(this.value=''){this.value='<?php echo $texterecherche; ?>';}" />


Et pour WordPress?

Et bien oui, tant qu’à faire, maintenant voyons à quoi ressemble le champ de recherche parfait sous WordPress, sans utiliser le widget de recherche.


<?php $texterecherche = 'Entrer votre recherche et appuyez sur entrer'; ?>
<form id="searchform" method="get" action="<?php bloginfo('home'); ?>/">
<input type="text" name="s" id="s" value="<?php if(isset($_GET['s'])) { echo wp_specialchars($s, 1); } else { echo $texterecherche; } ?>" size="15" onblur="if (this.value == '') {this.value = '<?php echo $texterecherche; ?>';}" onfocus="if (this.value == '<?php echo $texterecherche; ?>') {this.value = '';}" />
</form>


Voici le code que j’ai utilisé pour mon prochain thème WordPress en développement. Qu’est-ce que vous en pensez?

5 commentaires

Web Designer Wall

Le 31 juillet 2007 • Web • WordPress

Chacune de ses créations me bleufe, que ce soit son site, ses visuels, ses thèmes WordPress et ses projets… Je vous parle de Nick La, de N.Design Studio et plus particulièrement de son dernier projet nommé Web Designer Wall qui vient tout juste d’être dévoilé.

Web Designer Wall, ne serait-ce que pour jeter un coup d’oeil au design, mérite d’être vu. Je trouve ce travail magnifique, c’est pour moi l’un (voir le plus) beau site que j’ai vu.

Et en plus ça tourne sous WordPress tout ça, donc c’est un blog! Oui, un blog. Un deuxième?
Oui mais là il y présente ses idées de design, des tutorials et parlera des tendances des designs modernes.
Les quelques billets qui y sont déjà présents sont très intéréssants, Il nous explique comment il est arrivé à ce design, présente quelques tutoriaux et des sites d’inspiration.

Vraiment un site à voir.

5 commentaires