1

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

26 Fév 2010 Site web
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 :

 
0

Rope n’fly : le SpiderMan de l’iPhone pour une bonne ballade

28 Jan 2010 iPhone
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 !

[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 ^^

 
0

Enlever les pointillés des liens avec du CSS

21 Jan 2010 css
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 : [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] Plus d'informations Source : guillaumebizet.fr & zoneCSS
http://www.guillaumebizet.fr/post/2008/07/29/%5BCSS%5D-Enlever-les-pointilles-des-liens

Étiquettes : ,

 
0

Un jeu qu’il fallait trouver : frankenstein

19 Jan 2010 iPhone, point & click
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

Étiquettes :

 
1

Sortie de jQuery 1.4, 4 ans de loyaux services

16 Jan 2010 Jquery
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. [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("
Animation complete.
"); }); });[/cc]

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

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. [cc lang='javascript' line_numbers='false']var foo = $("#foo").click(function() { // do something }); foo.detach(); // foo retains event handlers foo.appendTo("body");[/cc]

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

[cc lang='html4strict' line_numbers='false']
annie davey stevie
[/cc] [cc lang='javascript' line_numbers='false']$('div').unwrap();[/cc] [cc lang='html4strict' line_numbers='false'] annie davey stevie [/cc]

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. [cc lang='javascript' line_numbers='false']jQuery("div").before("Hello").appendTo("body")[/cc]

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

.delay(x) retarde les éléments de x milliseconde. [cc lang='javascript' line_numbers='false'] $("div").fadeIn().delay(4000).fadeOut(); [/cc]

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. [cc lang='javascript' line_numbers='false']jQuery("div").queue("ajax", function(next) { var self = this; jQuery.getJSON("/update", function(json) { $(self).html(json.text); next(); }; }).queue("ajax", function() { $(this).fadeIn(); });[/cc] .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

Étiquettes :

Page 2 sur 41234

Copyright © 2017 Le pret a surfer All rights reserved.
Desk Mess Mirrored v1.4.4.1 theme from BuyNowShop.com.