Voici un projet sur lequel j’ai travaillé suite à un tweet de Nicolas Rouyer qui a réalisé un superbe design inspiré par l’univers graphique des comics américains.
CaptainDash.com a été développé en HTML/CSS/JS et a été élu Site Of The Day par Awwwards.
Depuis janvier dernier, je travaille avec l’Agence Modulo. Une petite équipe, pleine d’idées et d’ambitions.
J’ai déjà réalisé de beaux projets, dont deux en marque blanche dont je ne peux pas vraiment parler (?) : une petite application Flash, et un site wordpress.
Mais vendredi dernier, c’est un autre projet que nous avons mis en ligne, le site du Festival de Saintes :
Il s’agit de mon premier “site élastique” : un site qui s’adapte à toutes les tailles d’écrans. Aussi agréable à lire sur ordinateur, tablette ou smartphone. Réalisé à grand coups de media queries CSS3 et de réflexions ergonomiques.
Cette technique, apparemment simple, cache en fait un bon nombre de problèmes techniques et ergonomiques. En effet, il faut faire avec le tronc commun des spécifications du W3C implémentées par les appareils, et arriver à fournir une expérience utilisateur cohérente et adaptée à tous les formats.
J’avais entendu parler des media queries il y a longtemps, mais c’est Quentin (toki-woki) qui m’a permis d’ouvrir les yeux sur cet univers merveilleux.
Aujourd’hui avec l’apparition massive d’appareils connectés j’ai du mal à imaginer mes futurs projets autrement qu’en “élastique”. Même si, comme toute technologie, il faudra l’utiliser à bon escient.
Sur cette lancée, j’ai finalisé et intégré un nouveau design pour mon site/page remitoffoli.com :
N’hésitez pas à me donner votre avis sur le sujet et sur les deux sites web. :)
Note : penser à redesigner le blog.
Dans wordpress on peut utiliser les custom fields pour proposer des champs d’options selon le modèle de page sélectionné.
Le plugin Custom Field Template permet d’ajouter cette fonctionnalité.
Pour effectuer une requête de posts portant sur plusieurs de ces champs, par exemple afficher à l’accueil les pages :
Il faut utiliser le paramètre “meta_query“ dans la méthode WP_Query :
$products = new WP_Query(array( 'post_type' => 'page', 'meta_key' => 'tplname_featured_order', 'orderby' => 'meta_value', 'meta_query' => array( array( 'key' => '_wp_page_template', 'value' => 'page-product.php' ), array( 'key' => 'tplname_featured', 'value' => 'product_pushs' ), ), )); while ( $products -> have_posts() ) : $products -> the_post(); ... echo $post->post_title; ... endwhile;