WIF2010 préselection : souvenir d’une réalisation d’un site web en 24h

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.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.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.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 :
Rope n’fly : le SpiderMan de l’iPhone pour une bonne ballade

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 ![youtube=http://www.youtube.com/watch?v=CWwN6PDnZmM]
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 ^^
Enlever les pointillés des liens avec du CSS

Supprimer ce contour pointilleux avec outline
Pour les faire disparaitre, rien de très sorcier, juste une propriété CSS : [cc lang='css' line_numbers='false']a { outline: none; }[/cc]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 : [cc lang='html4strict' line_numbers='false'][/cc]
Un jeu qu’il fallait trouver : frankenstein

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.![IMG_0365[1]](http://www.le-pret-a-surfer.com/wp-content/uploads/2010/01/IMG_03651-e1263896459459.png)
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'informationSortie de jQuery 1.4, 4 ans de loyaux services
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.

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. [cc lang='javascript' line_numbers='false']// Trouve toutes les balises A et enveloppe les $amp; avec une balise span $('a').html(function(i,html){ return html.replace(/&/gi,'&'); }); // Ajoute des informations au titre des liens $('a[target]').attr("title", function(i,title){ return title + " (Opens in External Window)"; });[/cc]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 :{foo: ["bar", "baz"]}
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. [cc lang='javascript' line_numbers='false']jQuery.ajax({ url: "test.html", context: document.body, success: function(){ jQuery(this).addClass("done"); } });[/cc]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 : [cc lang='javascript' line_numbers='false']jQuery("div", { id: "foo", css: { height: "50px", width: "50px", color: "blue", backgroundColor: "#ccc" }, click: function() { $(this).css("backgroundColor", "red"); } }).appendTo("body");[/cc]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. [cc lang='javascript' line_numbers='false']$("div").eq(-2); $("div").get(-2);[/cc]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()
[cc lang='javascript' line_numbers='false']$("div").toggleClass("current active");[/cc]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. [cc lang='javascript' line_numbers='false']$("#clickme").click(function() { $("div").animate({ width: ["+=200px", "swing"], height: ["+=50px", "linear"], }, 2000, function() { $(this).after("Ajouter plusieurs événements en un seul appel de la méthode .bing()
[cc lang='javascript' line_numbers='false']$("div.test").bind({ click: function(){ $(this).addClass("active"); }, mouseenter: function(){ $(this).addClass("inside"); }, mouseleave: function(){ $(this).removeClass("inside"); } });[/cc]Optimisation des manipulations html de jQuery


