MLivre est un plugin sorti au début de l’été, transformant une suite d’images en un flipbook à la manière d’un magazine. L’utilisation est très simple : afficher une suite d’image de même taille dans un div puis lancer le plugin.

Des options, méthodes et événements pour personnaliser vos scripts

Les premières options sont obligatoires, width / height et parlent d’elles mêmes. dossier quant à lui permet de définir le chemin du dossier contenant quelques images nécessaires au bon fonctionnement du plugin afin de vous permettre de garder un minimum d’organisation dans votre ftp.

PageDefault permet de choisir la première page (ou image) qui doit être affichée, la première image est la numéro zéro

Loader active (ou désactive) le chargement des images avant l’affichage

Il reste comme dernière option over qui permet d’activer ou non l’animation au survole de la souris.

mLivre comporte également deux événements eventLoad appelés une fois que le livre est prêt à être affiché et eventOpen qui se lance à chaque changement de page !

Afin d’imaginer votre interface, les méthodes suivant et précédent permettent un changement de page et la méthode page vous permet, par exemple, d’ajouter une pagination !

Vous pouvez consulter des exemples dans la documentation sur http://www.le-pret-a-surfer.com/mLivre/

Vous souhaitez de nouvelle fonctionnalité ? n’hésitez pas à les proposer

Article en rapport :

1. mSelect : Plugin Jquery pour réaliser des listes html personnalisées
2. Sortie de jQuery 1.4, 4 ans de loyaux services
3. Un textarea qui se redimensionne avec Jquery

mSelect est un plugin jQuery que j’ai développé en avril 2010 qui permet de personnaliser totalement un select html et de pouvoir avoir des options comprenant du html (formatage ou image). Quelques semaines après la version 1.1 ajoutait la gestion événement.

Aujourd’hui je passe mon plugin en version 1.2 pour amener une nouveauté très demandée.

ScrollBar personnalisable avec mSelect

Pour les listes html longues l’utilisation d’une scrollBar devient indispensable, le plugin l’ajoute donc maintenant automatiquement à partir de sept options (se nombre est paramétrable via nbVisible)

Pour rester cohérent avec le reste du plugin cette scrollBar est entièrement personnalisable en css via plusieurs class.

Rendre inactif le champ mSelect

Seconde fonctionnalité qu’apporte cette mise à jour, la possibilité d’activer et désactiver le champ à l’aide de deux méthodes.

Optimisation du plugin et documentation complète

J’ai également optimisé l’ensemble du code, corrigé quelques petits bugs et rédigé une feuille css d’exemple.

Et pour faciliter la vie des utilisateurs d’mSelect, j’ai rédigé une documentation complète avec beaucoup d’exemples.

Voir la documentation complète de mSelect : Plugin jQuery

Mise à jour 1.3 : mCurrent

Suite à vos retour, voici une version 1.3 :

• Ajout d’une class mCurrent sur l’option sélectionné
• Correction du bug : mSelect plante en l’absence de jQuery-ui 1.8
• Correction du bug : variable html de l’événement click manquante
• Optimisation : réduction du nombre d’écouteur.

Mise à jour 1.4 : manipulation des données

Mise à jour du 27 juin 2011

• Ajout de la méthode add
• Ajout de la méthode options
• Ajout de la méthode selected

Voir la documentation complète de mSelect : Plugin jQuery

Article en rapport :

1. mSelect : Plugin Jquery pour réaliser des listes html personnalisées
2. Un textarea qui se redimensionne avec Jquery
3. Sortie de jQuery 1.4, 4 ans de loyaux services

Depuis que j’ai acheté une interface et la suite logiciel Sunlite, j’avais bien envie de pouvoir utiliser l’iphone pour prendre le contrôle de Sunlite à distance. Après quelques recherches voici une solution !

Pour réaliser la manipulation suivante, il faut avoir un ordinateur (PC ou MAC) et un Iphone connecté sur le même réseau wifi. Sur l’ordinateur est installé Sunlite version 1 ou 2.

L’application Iphone un « émulateur » de contrôleur MIDI

Les contrôleurs MIDI sont des surfaces de contrôle permettant d’envoyer des ordres en MIDI (protocole de communication) vers un instrument ou un ordinateur. Un contrôleur à une prise MIDI-OUT, mais voila notre Iphone n’en possède pas c’est pour ça que j’emploie le terme d’émulateur.

Mon choix c’est arrêté pour l’instant à l’application RemoteKBLE, un simple piano allant de 0 à 127 qui à l’avantage d’être gratuit et de fonctionner.

Télécharger l’application RemoteKBLE sur itunes

A savoir qu’il existe une version payante appelée RemoteKB à 1.59 €, cette version de l’application donne le droit d’appuyer sur plusieurs touches en même temps.

Mon utilisation étant de faciliter la phase de réglage dans une petite association de théâtre, la version simple de l’application me suffit !

Télécharger l’application RemoeKB sur itunes

Les logiciels pour récupérer les données MIDI via le WIFI

Avant de passer à la configuration de sunlite, il nous faut récupérer deux logiciels.

Le premier permet de recevoir les données de l’iphone, les développeurs de RemoteKB et RemobeKBLE utilisent DSWifiMIDI qui comme son nom l’indique, vous l’avez peut être fait deviner, permet d’envoyer les données MIDI, non seulement de l’iphone mais aussi de la nintendo DS vers l’ordinateur.

Vous trouverez le logiciel sur le site dsmidiwifi.tobw.net que vous pouvez télécharger, on verra après son utilisation.

Le deuxième logiciel permet de transférer ses données MIDI d’un logiciel à un autre c’est le rôle que rempli très bien LoopBe1 que vous pouvez trouver sur Clubic. A télécharger, installer et lancer !

Configuration et utilisation de SUNLITE via l’application Iphone

Après avoir lancé LoopBe1, puis l’application RemoteKBLE vous pouvez lancer SUNLITE et enfin DSWifiMIDI.

Première chose la fenêtre du logiciel DSWifi est composée de deux listes, chez moi je sélectionne dans les deux listes LoopBe Internal MIDI. Pour information si dans la seconde liste c’est microsft Internal MIDI qui est sélectionné et que vous pianotez sur l’application vous allez entendre une douce mélodie (enfin selon votre niveau au piano)

Sur SunLite version 1 : Je vous montre simplement l’exemple simple d’activer/désactiver un bouton switch préalablement crée. Allez dans la fenêtre paramètre du bouton, puis dans « l’onglet » déclenchement, vous cochez « Notes Midi » puis vous choisissez le circuit (appeler « Ch » ou « Channel » sur l’application le 0 correspondant au 1) et note (numéro de la touche sur le piano le 1 correspondant au 1 mais sunlite ne propose pas le 0)

Et sur sunLite 2 me direz-vous ? La fonctionnalité disparait pour laisser place à un mode console, à priori il faut créer une console virtuelle reprenant les boutons dont on a besoin pour l’iphone puis les assigner. Mais voila chez moi impossible de créer une nouvelle console. La solution ouvrir une console proposée par sunlite, clique droit sur un bouton, dans l’onglet live, édition ou général on choisi « l’action » et dans l’onglet midi on clique sur « auto setup MIDI » puis sur une touche du piano de l’iphone.

Bon courage !

Article en rapport :

1. Tarots une application iPhone plein d’atouts
2. Un textarea qui se redimensionne avec Jquery
3. Enlever les pointillés des liens avec du CSS

Voici un regroupement d’optimisations que j’ai réalisées sur un blog installé sous wordpress. Le but étant d’améliorer le référencement naturel, la vitesse d’affichage des pages et l’expérience utilisateur des visiteurs. J’ai reparti les optimisations en trois catégories les extensions, les configurations et les ajouts au thème.

Pour information le blog référent que j’ai mal mené est www.laure-illustrations.com le ptit blog d’une illustratrice jeunesse : Laure Phelipon. Avec une moyenne de 20 messages et 2500 visiteurs par mois, il est présent dans les premières places sur google pour la recherche « illustratrice »

Le choix des extensions wordpress (plugin)

J’ai essayé d’en limiter le nombre au maximum, en gardant uniquement celles qui ne pouvaient pas être mises en dure dans le thème, car les plugins c’est bien mais trop c’est trop.

Akismet, protection contre le spam dans les commentaires

(A-kiz-mit) n. Probablement la meilleure façon dans le monde pour vous protéger du spam web.

Voila comment se définit ce service, présent à l’installation de wordpress depuis pas mal de temps, il vous évitera une quantité de spams coté commentaire. Très utile, 300 spams évités en six mois sur mon blog référent, surtout que certains vicieux robots s’amusent à copier coller des commentaires (en rajoutant juste un lien qui va bien) pour tromper votre vigilance.

Facile à configurer, il suffit de demander une clef sur le site d’akismet et de la rentrer dans le menu extensions puis configuration akismet.

Télécharger Akismet

All in One SEO Pack : optimiser votre référencement (étape 1)

En terme de référencement parmi les choses qui comptent, il y a le titre de la page (balise title) et la méta description, elles doivent être unique pour chaque page et bien réfléchi.
Le titre doit comporter les principaux termes abordés dans le post et surtout il sera, sur les moteurs de recherche, la phrase d’accroche pour que vos futurs visiteurs viennent vous voir !
La description, de moins en moins apparente dans les moteurs, permet d’en dire un peu plus sur le contenu de l’article.
Dans les grandes lignes voila se que permet de renseigner All in One SEO pack.

Télécharger All in One SEO Pack

Google XML Sitemaps : Plan du site pour les robots et donc le référencement

Je n’ai pas trouvé (encore) de solution sans passer par un plugin pour avoir un sitemap complet de tous les billets et pages du site (catégorie, archive). Google XML sitemaps réalise ça très bien en proposant diverses options comme la possibilité de donner des « notes » d’importance à chaque page ou de rajouter des pages en dur manuellement. La page de configuration est simple mais néanmoins complète. N’hésitez pas à vous inscrire sur Google Webmaster pour voir comment Google digère votre sitemaps.

Télécharger Google XML Sitemaps

Subcribe to comments : Proposer un abonnement au commentaire à vos visiteurs

Un outil qui m’a semblé indispensable est de permettre au visiteur de suivre les commentaires, ça leur permet de suivre une conversation sur le sujet ou de ne pas louper la réponse à leur question. Sucribe to comments c’est donc donner une raison à vos visiteurs de revenir et leur proposer les outils pour le faire facilement. Subcribe to comments permet, en plus, à chaque visiteur de gérer ces abonnements.

Coté configuration, vous devez pour les blogs francophones, traduire les trois phrases utilisées par le plugin

Télécharger Subcribe to comments

WP – PageNavi : Ajouter une pagination avec blog

Le plugin ajoute en bas de la page d’accueil et des pages d’archives une pagination.
Je l’ai vraiment apprécié sur différent site : quand on arrive sur un nouveau blog, offrir la possibilité de pouvoir fouiner dans les précédents posts facilement, incite vos visiteurs à voir votre contenu et facilite la recherche de message récent.

Côté configuration quelques petits réglages bienvenus et une possibilité très bien vue de ne pas charger de CSS complémentaire.

Télécharger WP – PageNavi

WP Super Cache : Mettre en cache vos pages pour optimiser l’affichage

Un blog comme WordPress demande pas mal de calcul pour le serveur, avoir un bon cache permet un gain de temps au niveau de l’affichage et de faire souffler vos serveur. Grossomodo WP Super Cache sauvegarde une version html de chaque  page.  Sachant que google a annoncé utiliser le temps d’affichage d’une page dans son algorithme de recherche, le cache fait aussi parti de la démarche d’optimisation pour le référencement.

Télécharger WP Super Cache

Yet Another Related Posts Plugin : Lier vos articles

Une règle pour un site web est de ne jamais amener votre visiteur devant un mur (une page qui ne propose pas d’aller voir autre chose) sinon vous perdez vos visiteurs. YARPP permet de palier au problème en vous économisant pas mal de temps. Il sélectionne d’autres articles sur le même sujet et les affiches à la suite de vos articles.  Ainsi vos visiteurs qui viennent de lire le billet sur un sujet qui les intéressent pourrons continuer ça visite sur le même thème.

Le plugin est très complet : il permet de gérer les endroits où vous souhaitez afficher les liens, de modifier l’affichage et même de configurer l’algorithme de sélection d’article !

Configuration de wordpress

Des sous domaines pour améliorer la vitesse d’affichage

Une première configuration à apporter est la création de deux sous domaine, l’un hébergera vos médias, l’autre votre fichier css et JavaScript. Les navigateurs limitent le nombre de fichier qu’il télécharge en même temps par sous domaine/domaine.  Diffuser vos sources en plusieurs sous domaine permettra au visiteur de charger en parallèle plusieurs contenus et donc un gain de temps (ultra conseillé par google).

La création et configuration d’un sous domaine se fait depuis le site de votre hébergeur.

Pour mon test j’ai fait pointer un sous domaine média vers le dossier wp-content/uploads/ en configurant WordPress pour utiliser cet url pour le fichier upload et un sous domaine source vers le dossier contenant mon css et le js.

Pour l’instant je n’ai pas trouvé la bonne parade pour que WordPress utilise la bonne url pour mes images, j’ai donc remplacé les urls avec une fonction maison dans mon fichier fonction.php (j’en parlerai plus tard)

Regrouper et compresser vos fichiers css et js

Dans les extensions que j’ai détaillées ci dessus, WP PageNavi ajoute son propre CSS mais une option permet de le désactiver, ce que je serai trop vous conseiller et de mettre le contenu de se css dans votre propre fichier.

En effet moins il y aura de fichier css mieux ça sera car le chargement d’un grand css est plus rapide que celui de quatre css.

L’optimisation maximum consiste aussi à compresser votre css, comprendre : utiliser un fichier css sans espace, sans retour à la ligne, en enlevant le dernier point virgule.

Bien sur avoir un fichier CSS comme ça serait complètement contre productif, il existe donc des scripts qui permettent de faire cette manipulation à votre place pour que vous gardiez vos css propre.

Pour cette étape je vous conseille l’article sur le site seebz.net qui vous propose deux très bons fichiers php (un pour le CSS et l’autre pour le JS) avec la possibilité de regrouper plusieurs fichiers directement.

Cela dit cette fonction ne fait pas de miracle, n’hésitez pas à optimiser avant vos css, je ne rentrerai pas dans les détails ici, juste un exemple #sideBar .box est plus lent que juste .boxSideBar

Il va de soit que ce que vient de dire pour le css marche pour le js, je n’ai personnellement pas utilisé l’équivalent pour compresser le JS, j’ai téléchargé les scripts externe en version compressés que j’ai mi bout à bout dans le même fichier en rajoutant mes appels maison à la fin.

Ajouter des fonctionnalités directement dans le thèmes (sans plugin)

Quelque base, je vous conseil d’utiliser un fichier loop.php pour votre thème. Le but est de regrouper tous les affichages d’articles dans un seul fichier php, je vous donne pour exemple mon fichier loop (cliquer pour voir le code).

Avoir une seule page qui affiche le billet en entier

Il y a deux avantages à ne pas afficher le contenu complet de vos billets sur la page d’accueil.

Le premier c’est que cela permet un suivi, vous allez pouvoir connaitre avec précision le nombre de personne qui ont regardé votre article.

Le second c’est le référencement : vous allez éviter de dupliquer votre contenu dans plusieurs pages de votre site ! Une duplication divisera d’autant votre efficacité.

Pour se faire je conseille l’utilisation de la balise more pour séparer l’accroche du contenu.

PS : penser à définir une belle url pour cette page, avec des mots importants pour votre référencement et qui ne soit pas forcement identique avec le titre, profitez-en pour utiliser des synonymes.

Afficher le poste avec un lien meilleur que « voir la suite »

En terme de référencement les liens on aussi une place très importante, le texte qui compose le lien vers votre page est censé la définir. On est alors d’accord que « voir » « suite » ne vas pas définir votre article. Pour se faire j’ai utilisé les informations complémentaire de WordPress, pas vraiment adapté pour cette utilisation elle reste quand même la façon la plus simple au moment de la rédaction.

Coté PHP cliquer pour voir la rustine

Améliorer l’affichage du contenu et les retours à la ligne

Après avoir essayé plein d’extensions dont aucune n’a su me satisfaire, j’ai décidé de faire ma propre version qui va réaliser de jolie balise p et uniquement aux endroits adéquate. Mais surtout qui me permet de contrôler l’affiche finale.

J’ai aussi rajouté la « balise » [BR] qui permet de forcer un retour à la ligne.

Voir l’extrait du code

RSS avec feedburner pour suivre vos abonnements et en proposer par mail

Je vous conseille pour votre file RSS d’utiliser FeedBurner afin de pouvoir suivre le nombre de personne qui l’utilise. De plus se service de Google propose aussi de gérer un abonnement par mail à vos visiteurs en ajoutant juste un formulaire d’inscription dans le thème.

J’ai aussi choisi de ne pas distribuer mon post en entier dans le file RSS de mon site témoin car je l’ai inscrit sur pas mal de site qui utilise mon flux RSS (Facebook, Wikio …) se qui permet une visibilité accru mais qui à une tendance à dupliquer votre contenu est donc votre site perd en crédibilité par rapport au moteur de recherche et même à vous faire black lister de Google. Du coup j’ai rajouté une fonction au fichier fonction.php afin de mettre dans le fil rss uniquement le résumé de mon article avec deux lien, une vers la suite de l’article et l’autre vers l’accueil du blog.

Voir le code à mettre dans fonction.php

Facebook, Twitter mais avec un affichage temporisé en JavaScript

Élément presque incontournable les réseaux sociaux proposent tous leurs api magiques, permettant à leurs utilisateurs de facilement partager votre page avec leurs amis. Très utiles, mais à vous de bien étudier les réseaux indispensables pour votre blog et ceux qui ne le sont pas. Les quelques apis que j’ai essayées sont facilement intégrable en dur dans le thème mais en partant du principe qu’elles multiplient le nombre de fichier externe au site (js, css, img) j’ai réfléchi une façon de les afficher uniquement quand les utilisateurs les voient. Sur mon blog référent, l’accueil affiche une dizaine d’articles, grâce au code suivant Facebook se charge uniquement quand l’utilisateur arrive à sa hauteur.

Coté HTML dans la page loop, je génère uniquement l’url de Facebook.

Coté JavaScript, je lance l’affichage au moment voulu.

Yoxview pour afficher vos images en grand

Les lightbox sont devenus incontournable pour profiter des images en version « haute définition », parmi l’énorme catalogue d’application disponible mon choix c’est arrêté sur Yoxview avec une jolie finition. L’arrivée se fait avec un zoom qui part de la miniature, la transition entre plusieurs images se fait un jolie recadrage animé.

Télécharger Yoxview

Coté Javascript, le code de lancement

Google annalytique

Très rapide à faire mais à ne pas oublier, à la fin de votre fichier JavaScript copier le code de google analytique pour avoir accès à vos statistiques détaillées, utile pour voir l’impacte des dizaines d’heures d’optimisations et des centaines d’heures de rédactions.

Google annalytique

L’organisation HTML pour optimiser le référencement

La balise H1 dans chaque page est très important, l’erreur fréquente avec l’utilisation de WordPress est d’avoir le nom du blog toujours en h1 sur toutes les pages. Il vaut mieux garder cette mise en page uniquement pour la page d’accueil ! Les pages archives devraient avoir en h1 le nom de la catégorie, de la date, de l’auteur … le résultat des recherches devraient avoir les mots rechercher et la page article « le titre de l’article ».
Éviter en titre de la page d’accueil, « le blog de X » mais plutôt « le blog qui vous parle des derniers lettre de l’alphabé »

Article en rapport :

1. Rope n’fly : le SpiderMan de l’iPhone pour une bonne ballade
2. mSelect : Plugin Jquery pour réaliser des listes html personnalisées
3. plugin jQuery mLivre : un flipbook javascript

Le plugin est passé en version 1.4.2

Le plugin et la documentation complète est disponible sur : http://www.le-pret-a-surfer.com/mSelect/

mSelect est un plugin qui permet de personnaliser totalement l’apparence d’une liste de formulaire (select). Se qui permet en css de personnaliser la boite, la flèche et chaque option. Le plugin mSelect permet aussi de faire une boite de sélection enrichie en html.

Utilisation sur un élément html : select

Coté html :

Coté javascript :

Utilisation sur une liste avec bouton radio

Coté html :

Coté javascript :

Caractéristique du plugin

• L’élément select ou ul sera entièrement remplacé par la nouvelle interface
• L’attribut name de l’élément select ou input est conservé
• Les attributs value sont conservés, si ils n’existent pas ils sont crées avec le contenu texte de l’élément option ou label
• L’attribut id de l’élément select ou ul est conservé
• Les attributs class appliqués aux éléments option ou li sont conservés
• Si un élément a un attribut selected ou checked il est conservé
• Si fireBug est activé les erreurs sont affichées dans la console

• Développé avec jQuery 1.42, le plugin utilise des fonctions de la version 1.4
• Le script a été essayé sur quelques navigateurs :
  • Navigateur compatible : FireFox 3.6, Internet Explorer 8, Google chrome 3, Safari 4, Safari iPhone …
    
  • Navigateur incompatible : Aucun testé

  Si vous avez la possibilité de tester le plugin sur d’autre navigateur ou d’autre version n’hésitez pas à nous faire part de vos résultats.

Personnalisation en CSS des listes formulaire

Class : mSelect

Le conteneur général de la liste, c’est un élément div en display inline-block.

Class : mSelected

Le conteneur de l’option sélectionne qui s’affiche toujours à l’intérieur de mSelect, c’est un élément div.

Class : mFleche

Element div permettant de personnalisé la flèche qui indique à l’utilisateur la possibilité de déployer la liste.

Class : mOption

Conteneur d’une option, ces éléments sont des div en position absolue avec le curseur main, les informations top et left sont renseignées à chaque ouverture de la liste

Options du plugin

defaut : Message par défaut (String)

Message par défaut quand aucune option n’est sélectionné.

Par défaut vide.

radioHide : Afficher les éléments radio (Boolean)

Si true affiche les éléments radio dans les options, false pour cacher

Par défaut : false

eventClick : événement au click (Function(value,html))

Fonction lancer au clique sur une une option.

This : élément div qui à recu le click

Value : Valeur de l’option sélectionne

Html : Html de l’option séléctionné

Par défaut : null

eventOpen : événement à l’ouverture (Function(value,html))

Fonction lancer à l’ouverture de la liste.

• This : élément div principale
• Value : Valeur de l’option sélectionne
• Html : Html de l’option sélectionné

Par défaut : null

eventClose : événement à la fermeture (Function(value,html)

Fonction lancer à la fermeture de la liste, même si il n’y pas de changer de valeur.

• This : élément div principale.
• Value : Valeur de l’option sélectionne
• Html : Html de l’option sélectionné

Par défaut : null

Essayer et télécharger le plugin

Demo
Télécharger : Version de production et version de développement

Change Log

Version 1.1 : 15 avril 2010

• Ajout des options : eventClick, eventOpen, eventClose
• Correction mineur

Version 1.0 : 4 avril 2010

Article en rapport :

1. [MAJ]Jquery : mSelect ajout d’une scrollbar personnalisable
2. Un textarea qui se redimensionne avec Jquery
3. Sortie de jQuery 1.4, 4 ans de loyaux services

J’ai participé, il y a peu de temps aux présélections du WIF2010 (Webdisgn International Festival) . Le principe, réaliser par équipe, de une à trois personnes un site web en vingt quatre heures

Je vous propose de découvrir, pas à pas, la réalisation du projet de mon équipe, composée de Gabriel Uribe et moi même (Samuel Mandonnaud). La présélection étant en ligne, c’est chez moi que se déroule cette épopée.

14h Remise du sujet : Partager ses souvenirs

Bien installé, depuis 15min devant nos PCs respectifs, réception du sujet par Email à 13h59, d’après Google dont voici le contenu :

A travers une interface sensible, originale et poétique, proposer une application interactive permettant de partager ses souvenirs.

Pouvoir partager ses photos, vidéos, textes, émotions, découvertes, amours, colères, émerveillements… à vos amis et pourquoi pas à vos ennemis. Cet «outil» (site web, application web, site mobile, application mobile, service en ligne, objets communiquant…) devra être accessible en ligne.

On a décidé qu’à la réception du sujet, on ne se parle pas pendant 15min, le silence est d’or. Chacun rédige ses idées, afin de ne pas être influencé par l’autre, puis on confronte dans une joute verbale.

Gabriel a eu des idées sur l’affichage des souvenirs, tandis que moi de mon coté j’ai plus réfléchi sur le contexte. Nos idées étant complémentaire après 5 min de discutions la ligne directive est prête.

Concepts & Scénario

Dans un future proche, 40 ans, un inventaire a réalisé une machine permettant de soustraire, à un mort, ces souvenirs dans le but de réaliser un site web commémoratif, retraçant ça vie à travers ces souvenirs.

Ces donc cette technologie appliquée sur son créateur que l’on souhaite présenter, il est 14h30…

La premier étape a été de jouer les scénaristes et d’écrire la vie de ce personnage : qui il était ? qui était ses parents ? ses passions ? Le but est simplement de connaitre le sujet pour faciliter la suite.

Une fois le scénario fini nous avons choisis quatre périodes de ça vie et quatre émotions sur lesquelles on va travailler.

La joie : la famille

L’idée est de bosser le souvenir d’une sensation de joie mêlé avec le souvenir d’une sortie familiale. Cette page doit donc être agréable afin de retranscrire la joie, que se soit sur le choix du design sonore que dans l’image. Nous avons poussé la réflexion, en nous disant que dans un souvenir plaisant chaque détailles en amené d’autres.

C’est donc dans cette logique que Gabriel s’est lancé sur le graphisme, une couche de développement a permit de rendre le tout vivant.

Voir cette page sur la famille

L’imagination et la créativité : son travail

Notre personnage, Enzo Wowk se défini dans la seconde période de sa vie comme un hyperactif créatif. Cette page devait retranscrire le coté complexe et rapide de ses idées.

Gabriel a créé un graphisme épuré et a choisi une musique rythmée et motivante. De mon coté, j’ai réalisé une interface réactive à l’aide d’un balayage simple d’image, d’un fond réactif à la souris et d’une création d’éléments déclenchés par le mouvement de la souris.

Voir la page sur le travaille

La peur : une enfance difficile

La ligne directive de cette page est que l’émotion de la peur est paralysante. Se souvenir « vidéo » doit être assez flou et l’émotion doit être prenante pour le visiteur. Le choix s’est donc porté vers une double vidéo, la première, celle d‘un oeil accompagné d’un battement de cœur illustre l’émotion, la seconde celle du souvenir est plus complexe d’accès, l’utilisateur doit bouger en permanence la souris pour y accéder. Elle présente de vagues brides de souvenirs accompagnés d’une respiration prenante.

Voir la page sur la peur

Le zen : internement

Notre personnage passe quelques années de sa vie dans un asile, sa thérapie passe par une période de vide mais un vide zen qui permet une remise en question. Afin de répartire notre charge de travail (rappelons que le projet doit être bouclé en 24h) cette page est très légère, une page blanche avec un simple texte et une musique reposante.

Voir la page zen

L’interface : multilingue, swfadress et ergonomie.

L’interface devait être simple et épurée, les émotions doivent prédominées. Notre choix s’est donc naturellement penché vers une ligne de temps retraçant la vie d’Enzo, avec quelques informations complémentaires sur sa vie en plus des quatre pages.

Étant donné que le concours est organisé de façon internationale nous avons donc souhaité qu’il soit lisible en français et en anglais, avec une fonction maison, le site change les textes au clique sans recharger la page, le tout pioché dans une base de données xml.

Le dernier point qui nous tient à cœur est d’utiliser swfAdress afin que notre projet, malgré qu’il soit en flash, comporte des urls distinctes pour chaque page et supporte le retour natif navigateur.

Voir la page d’accueil du site

D’environ 15h à 10h, Gabriel a travaillé sur la création 3d et graphique avec quelques intégrations pour me gagner du temps pendant que je développe en AS3 toutes les pages.  Le tout, est ponctué de pause pour manger ou filmer des séquences, comme vers 3h du matin avec une course dans mon garage pour la séquence de la peur. De 10 à 12h, nous  nous sommes concentrés sur les choix sonores (musique, montage, développement as3 …) ainsi que sur la rédaction des textes. De 12h à 14h, nous avons peaufiné jusqu’à la dernière minute : correction orthographique, correction de bug ou de faute d’intention (ou de fatigue) … Ces deux dernières heures nous ont réveillé après une nuit sans fermer l’œil pour gabriel et avec une sieste de 20 minutes pour moi.

Le jury se réuni courant mars pour choisir parmi l’ensemble des créations (soixantaine) les équipes qui participeront au concours final. A suivre donc …

Plus d’informations :

• Le site de Gabriel Uribe : Graphiste
• Notre création
• Toutes les créations du WIF

Article en rapport :

1. Comment souhaiter la bonne année 2010 ?
2. Un textarea qui se redimensionne avec Jquery
3. Nostalgique du 56k … des chargements par centaine

Vous avez toujours rêvé, ou pas, de porter les collants de superman ?, de vous balader d’immeuble en immeuble, de sentir le vent dans vos cheveux, l’adrénaline monter à chaque saut et enfin de vous écraser au sol juste après avoir eu le temps de dire « oups » ?

Il y a une application iPhone pour ça.

Rope n’fly, SpiderMan sans les collants

Petit jeu bien addictif rope n’fly vous propose une bonne ballade. Touchez un immeuble pour accrocher votre toile et une seconde fois pour la lâcher et réalisez un magnifique vole plané avant le prochain immeuble. Plus le file est long et plus l’amplitude vous fera prendre de la vitesse mais plus vous risquez aussi de vous prendre le sol.

La sensation est au rendez vous, après deux ou trois chutes pour comprendre le fonctionnement, on ne peut plus s’arrêter.

Plusieurs modes de ballade entre immeubles

Rope n’fly propose en deux modes de jeu :

• un contre la montre « Speed mode » où vous avez trente secondes pour aller le plus loin possible, idéal pour une partie rapide quand on ne veut pas s’éterniser !
• un mode libre « free » qui se décline en trois difficultés : Training, Normal et Hard ou seul votre patience ou votre dextérité conclura votre aventure. Une fois très à l’aise en Free mode, cette liberté de pouvoir aller plus loin est très agréable.

Tissez votre toile le plus loin possible pour 0,79 €.

Pour chaque mode, il y a un meilleur score de mémorisé sur ‘iphone (suffisamment rare sur les applications pour le signaler) en plus d’un tableau en ligne pour vous confronter au reste des gamers.

On note également dans le menu des options qui permettent de changer les couleurs de votre personnage de façon assez limitée.

L’application est disponible en version de demo gratuitement et en version complète à 0.79 €

On peu le dire, une application sur laquelle il faut sauter !

http://www.youtube.com/watch?v=CWwN6PDnZmM

Spiderman légo, une vidéo en béton en brique

En attendant l’application qui nous donnera le chemin le plus rapide par les toits, je conclue cet article par une vidéo sortie des cartons qui vos le détours et dans le thème ^^

Article en rapport :

1. Comment souhaiter la bonne année 2010 ?
2. Parrot AR.Drone un buzz qui plane
3. Optimiser son blog wordpress pour le référencement

Petit détail que ces pointillés, mais détaille qui fait tache et une tache sur un Van Gogh, on est d’accord, ça craint ?

Ce que nous voulons supprimer, donc, ce sont les pointillés qui entourent les liens comme sur cette image :

Supprimer ce contour pointilleux avec outline

Pour les faire disparaitre, rien de très sorcier, juste une propriété CSS :

A quoi sert la propriété css : outLine

La propriété css outline permet de spécifier les propriétés des quatre contours d’un élément exactement comme un border.

C’est quoi la différence alors entre outline et border ?

La différence, ces contours viennent au dessus de l’élément et n’interviennent pas dans la taille de l’élément.

Exemple :

Plus d’informations

Source : guillaumebizet.fr & zoneCSS

Article en rapport :

1. Un textarea qui se redimensionne avec Jquery
2. Controler des projecteurs avec l’iphone et sunlite
3. Sortie de jQuery 1.4, 4 ans de loyaux services

Habitué a chercher les clefs dans votre appartement en bordel, voici un jeu qui sera un jeu d’enfant pour vous !

Frankenstein, la mariée démembrée, est un petit jeu au concept simple, chercher dans des tableaux pleins d’objets. Sous cette consigne simple se cache un jeu vite prenant.

Des tableaux variés dans l’univers de Frankenstein

Le jeu se déroule dans le manoir de Frankenstein dans de magnifiques et grandioses dessins, très très riche en détails. Et c’est tout là l’intérêt du jeu, balader le joueur dans un univers peaufiné. L’interface permet de zoomer dans chaque tableaux, afin d’en scruté chaque recoin.

Un scénario rempli d’humour

Vous incarnez Brad, un homme à la recherche de sa femme qui a disparu depuis plusieurs mois en Europe plus exactement en Bavière. Il tombe malheureusement en panne, cherchant de l’aide dans un manoir, manoir où il va découvrir que ça femme est cachée, comment dire, en plusieurs morceaux, dont son cerveau … qui parle …

Vous l’aurez compris cliché et humour bien décalé : voila de quoi est composé le scénario.

Un jeu Hdo adventure, l’aventure par l’observation

Ce jeu fait parti d’une grande famille de titre, regroupé sous le label Hdo adventure. L’ensemble de leurs créations sont disponible sur PC/mac et certaines sont portées sur iphone.

J’ai essayé le jeu en version gratuite, le trouvant dans les sorties récentes. J’ai donc parcouru trois tableaux, je me suis pris au jeu, la recherche est un petit peu ardues et l’humour décalé agreable.

Une fois la demo finie, même si le charme opère, je ne suis pas convaincu. Peut être à cause du prix de la version complète de 13€ (sur iphone) contenant, seulement,  23 tableaux.

Plus d’information

• La fiche du jeu sur le site officiel
• Le site officiel de hdo adventure

Article en rapport :

1. Parrot AR.Drone un buzz qui plane
2. Rope n’fly : le SpiderMan de l’iPhone pour une bonne ballade
3. Controler des projecteurs avec l’iphone et sunlite

jQuery est une bibliothèque JavaScript rapide et concise qui simplifie la programmation : gestion d’évènement, animation, modification du HTML ou encore intéraction AJAX …

Pour fêter le 4ième anniversaire de jQuery, l’équipe nous offre en cadeau sa nouvelle version 1.4. Voici quelques unes des modifications apportées à jQuery.

Amélioration des performances des méthodes les plus utilisées

L’équipe de jQuery, annonce pour cette version 1.4, une refonte des méthodes les plus couramment utilisées.

Sur cette image, les résultats fournis par le site officiel montre des résultats impressionnants ! Ces résultats ont été obtenu grâce à une simplification du code, surement plus facile à dire qu’à faire !

Ajout de fonctionnalité à plusieurs fonctions de manipulation html

Jusqu’à présent l’utilisation de la fonction .attr() pouvez retourner la valeur de l’attribut visé. Cette fonctionnalité est maintenant étendue à toutes les méthodes suivantes : .css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), et .toggleClass().

Sur les méthodes suivantes .css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .offset(), .addClass(), .removeClass(), et .toggleClass() comme second argument, l’équipe a rajouté une nouvelle option à la fonction qui renvoie la valeur actuelle. Un exemple vaut mieux qu’un long discourt.

Ajax

Paramétre imbriqué, array

JQuery 1.4 ajoute le support dans les paramètres AJAX data d’une valeur tableau dans jQuery.param. Exemple :

devient « foo[]=bar&foo[]=baz ».

Dans jQuery 1.3, le même code aurait donné « foo=bar&foo=baz »

JSON et script auto-détecté par content-type

Si la réponse à une demande d’Ajax est retourné avec un « mine type » JSON ou javascript, jquery choisira lui même le bon data-type sauf si dataType est spécifié.

ETAG supporté, gestion du cache navigateur en AJAX

Par défaut, JQuery ignore l’en tête « Last-Modified » pour les demandes ajax, préférant faire une demande et ignorer le cache navigateur. Pour utiliser le cache navigateur passez le paramètre « ifModified » sur true.

« Context » pour les requêtes

Afin de simplifier le code, on peut définir un paramètre « context » afin de spécifier un cadre pour tous les rappels.

Construction rapide d’élément avec jQuery 1.4

Lorsque vous créez un seul élément avec la fonction jQuery, vous pouvez désormais passer un objet pour définir les attributs :

Sélection de l’avant dernier div grâce à .eq(-N), .get(-N)

Vous pouvez, avec la version 1.4, passer dans .get() et .eq() des nombres négatifs pour par exemple connaitre l’avant dernier div.

Nouvelle méthode .first() et .last()

Pour simplifier, .first() et .last() sont des alias de .eq(0) et .eq(-1)

Nouvelle méthode .toArray()

Retourne un tableau contenant les donnés recherchées.

Optimisation de la fonction .css() (x2) .addClass() .removeClass() et .hasClass() (x3)

Alterner plusieurs class avec .toggleClass()

Animation : fonction d’accélération indépendante pour chaque propriété

En plus d’être en mesure de spécifier une fonction d’accélération pour une animation vous pouvez maintenant spécifier une fonction pour les propriétés individuelles.

Ajouter plusieurs événements en un seul appel de la méthode .bing()

Optimisation des manipulations html de jQuery

Nouvelle méthode .detach() (un remove() temporaire)

.detach () supprime un élément du DOM mais ne supprime pas les gestionnaires d’événements associés. Ceci est approprié pour éliminer temporairement un élément à manipuler et ajouter ensuite.

Nouvelle méthode unwrap() supprimer le conteneur mais le contenu.

before, after, replaceWith sur les nœuds déconnectés avec jQuery 1.4

Vous pouvez maintenant utiliser before, after et replaceWith sur les noeuds qui ne sont pas attachés aux DOM. Cela vous permet de faire des manipulations plus complexes, avant d’insérer la structure finale dans le DOM.

Lancement avec délais, nouvelle méthode jquery : .delay()

.delay(x) retarde les éléments de x milliseconde.

Gestion d’une fille d’attente en jQuery :  .queue()

Dans jQuery 1.4 la fonction queue permet de crée une fille d’attente et de lancer des fonctions les une après les autres une fois la première fini.

.clearQueue() permet de vider cette fille d’attente.

Et ce n’est pas tous

Je n’ai pas parlé de toutes les nouvelles méthodes et améliorations. L’ensemble des mises à jour et plus de détaille sur le site officiel de jQuery en anglais

Article en rapport :

1. mSelect : Plugin Jquery pour réaliser des listes html personnalisées
2. [MAJ]Jquery : mSelect ajout d’une scrollbar personnalisable
3. Un textarea qui se redimensionne avec Jquery