Catégorie : Développement web

  • Joyeux effets javas­cript – file upload et Twit­ter boots­trap

    Les gens compé­tents se déchaînent et on voit main­te­nant appa­raitre des choses que nous aurions à peine imaginé du temps où j’étais inté­gra­teur web. Nous étions capable de créer tel ou tel compo­sant, mais en créant tout de zéro ou presque. Désor­mais des biblio­thèques pré-exis­tantes donnent un coup d’ac­cé­lé­ra­teur gigan­tesque.

    Aujourd’­hui je suis retombé sur le télé­char­ge­ment de fichiers, et les exemples du boots­trap proposé sont plus que convain­cants. Le menu à gauche pour gérer le posi­tion­ne­ment dans la page est lui aussi une très bonne idée bien implé­men­tée.

    Je ne peux cepen­dant pas m’em­pê­cher de me poser la ques­tion de la charge en terme de perfor­mance quand on utilise plusieurs compo­sants. Rien que baser tout ça sur jquery risque de faire mal côté mobile.

  • Ignore the fold

    À contre-courant des habi­tudes des divi­sions de web marke­ting : Ignore the fold.

    Et si au lieu de bour­rer l’in­for­ma­tion de façon à ce que l’uti­li­sa­teur n’ait pas à faire défi­ler la page, il fallait l’aé­rer pour que l’ac­tion désor­mais natu­relle de défi­ler ne soit plus l’obs­tacle à des mises en pages effi­caces ?

    Je suis preneur de plus de ressources à ce sujet si vous en avez. Le lien donné corres­pond assez à mon expé­rience en tant qu’u­ti­li­sa­teur.

  • La fin des carrou­sels

    Oui, ils semblent une superbe idée pour four­nir plus de propo­si­tions à l’in­ter­naute, mais ajou­ter un carrou­sel est géné­ra­le­ment une mauvaise idée. Le carrou­sel tue le taux de conver­sion.

    D’autres ont détaillé la ques­tion bien mieux que moi alors si vous voulez suivre les études, les tests utili­sa­teurs ou les statis­tiques de conver­sion, suivez un des liens en bas du billet. Pour ceux qui veulent un résumé :

    1. Ça ressemble à un élément très graphique, qui bouge, souvent avec des promo­tions ou messages publi­ci­taires, c’est donc traité visuel­le­ment par l’in­ter­naute comme de la publi­cité, et ignoré incons­ciem­ment. Ce que vous mettez dans le carrou­sel est ce qui a le plus de chances de ne *pas* être suivi.
    2. Sans que ça ne soit contra­dic­toire avec le point précé­dent, l’oeil humain fonc­tionne par compa­rai­son. Ce qui bouge attire l’oeil et empêche de se concen­trer ailleurs. Le carrou­sel bouge et en plus de ne pas être effi­cace en lui-même, il empê­chera le reste de la page de l’être.
    3. Trop souvent mal fait il pose de problèmes de perfor­mance sur l’ap­pa­reil client, et des problèmes d’er­go­no­mie si jamais le client souhaite l’uti­li­ser.

    Au final il appa­rait que le carrou­sel est surtout une bonne idée pour l’édi­teur du site, ses équipes commer­ciales et marke­ting, de façon à ne pas choi­sir ce qui doit vrai­ment être mis en avant. Sa seule valeur ajou­tée c’est de conten­ter l’or­ga­ni­sa­tion interne.

    Bien entendu tout ceci est géné­ral, mais parce que c’est le cas géné­ral, il y a peu de chances que votre cas soit diffé­rent, malgré votre volonté d’y croire. Tout ceci n’est pas de l’opi­nion, il y a des vrais tests utili­sa­teurs et des chiffres de conver­sion derrière.

    Si vous souhai­tez tout de même un carrou­sel :

    • C’est pour une infor­ma­tion non secon­daire (une galle­rie d’illus­tra­tions par exemple)
    • Un carrou­sel = un seul type d’in­for­ma­tion
    • Il doit être navi­gable au clavier et en tactile, et les zones de navi­ga­tion clavier doivent être en dehors de la zone du carrou­sel
    • La posi­tion courante doit être expli­cite, et si possible utili­sez des minia­tures pour mieux iden­ti­fier les diffé­rents items du carrou­sel
    • Char­gez le code néces­saire à l’ani­ma­tion et les éléments non visibles en asyn­chrone, ne ralen­tis­sez pas l’ac­cès à la page

    Quelques liens :

  • Tester IE sur Mac et Linux

    Je dois certai­ne­ment être en retard mais de mon temps les machines virtuelles pour tester Micro­soft Inter­net Explo­rer n’étaient diffu­sées que sous un système acces­sible unique­ment par Windows. Il fallait bidouiller un peu.

    Visi­ble­ment les choses ont changé et sous modern.ie il y a des machines virtuelles pour tous les OS hôtes, et pour toutes les versions sensées de IE. Bon, il n’y a déjà plus IE6 mais plus personne de sensé ne regarde encore IE6.

  • Proto­ty­page Easel.io

    Encore un outil de proto­ty­page. Ici « dans le navi­ga­teur », assez clean, qui a même une notion de respon­sive design basique et des grilles : easel.io

    Ceci dit de mon côté je commence à me dire que Blue­grif­fon est peut être aussi pratique, et génère une base HTML/CSS qu’on pourra réuti­li­ser plus tard.

  • Skeuo­mor­phic Payment Expe­riment

    J’aime bien les gens qui revi­sitent les inter­faces des formu­laires. Il n’y a pas mieux pour bloquer la conver­sion et donner envie de partir. Ce n’est pas qu’une ques­tion de graphisme, c’est vrai­ment une notion d’in­te­rac­tions.

    Aujourd’­hui je vois une petite démo d’un paie­ment par carte bancaire. C’est simple, effi­cace. Ça peut semble gadget mais sur smart­phone ou tablette je suis convaincu que ça peut réel­le­ment chan­ger l’ex­pé­rience utili­sa­teur.

    Je suis preneur d’autres liens du même type si vous en avez.

  • xip et pow, DNS + HTTP

    Parfois les idées les plus simples sont les meilleures : le nom de domaine x.x.x.x.xip.io redi­rige vers l’adresse IP x.x.x.x, quelle qu’elle soit. Pour mieux vous aider, vous pouvez même préfixer par ce que vous souhai­tez : www.10.0.0.1.xip.io, backof­fice.10.0.0.1.xip.io, etc. Pour pas mal de cas simples, plus besoin de deman­der à tout le monde de modi­fier son /etc/hosts.

    Là dessus se rajoute Pow, un serveur web simpliste : Vous faites un lien symbo­lique dans le réper­toire de Pow, ça vous créé un site web virtuel à ce nom avec une exten­sion .dev. Vous pouvez aussi utili­ser les xip.io et Pow redi­rige vers le bon sous-site en fonc­tion du préfixe. J’au­rai bien aimé avoir un moyen simple d’ar­rê­ter/démar­rer le serveur et la possi­bi­lité de défi­nir mes propres alias (et pas que des .dev, mais utili­ser de vrais noms de domaine), mais c’est un premier pas inté­res­sant.

  • Secure headers

    Secu­re­hea­ders, une gem ruby pour ajou­ter et confi­gu­rer des entêtes liées à la sécu­rité sur vos appli­ca­tions web.

    Et vous, quelles entêtes ajou­tez vous à vos sites pour gérer la sécu­rité ?

  • Conver­gence web et appli­ca­tion – Stockage Safari mobil / iOS

    Les API qui arrivent sur nos navi­ga­teurs depuis quelques années commence à nous faire imagi­ner une vraie conver­gence entre les appli­ca­tions mobiles et le web.

    C’est déjà un premier pas énorme qu’on voit avec Chrome web store, Fire­fox Market­place, et autres Windows 8 : On commence à déve­lop­per direc­te­ment avec les tech­no­lo­gies web, éven­tuel­le­ment direc­te­ment avec le navi­ga­teur comme plate­forme.

    Main­te­nant pour moi ce n’est pas encore ça. J’ai quelques problèmes côté sécu­rité par exemple (théo­rique­ment entre l’at­tri­but sand­box, l’api postMes­sage et les décla­ra­tions CSP on devrait arri­ver à avoir une bonne base, mais ça n’a pas l’air de coller si faci­le­ment si ce n’est pas bien prévu dès le départ).

    Le butoir sérieux est côté iOS avec son stockage de 50 Mo maxi­mum. Ça peut sembler beau­coup mais c’est fina­le­ment très réduit dès qu’on y stocke autre chose que du pur texte à lire. J’ai réel­le­ment besoin de dépas­ser ce palier. Je paye une bière à celui qui me trouve un méca­nisme qui tourne effi­ca­ce­ment et qui permet de s’en affran­chir sur Safari mobile. Plusieurs bières même. Il peut même y avoir un job ou une mission à la clef pour des bon bidouilleurs javas­cript. Avis aux inté­res­sés.

  • Frame­work js pour appli­ca­tion web

    Je regarde un peu les frame­works JS pour « appli­ca­tions dans le navi­ga­teur ».

    Plus j’avance plus je me dis qu’a­vec l’ap­proche mobile et la gestion du offline, on aban­donne le web tel que je le connais­sais. Même avec une foul­ti­tude de javas­cript et d’ajax, nous avons long­temps gardé l’ap­proche « vue sur le client, appli­ca­tion sur le serveur », et j’en ai été un grand défen­seur. Aujourd’­hui l’idée c’est plutôt « appli­ca­tion sur le navi­ga­teur, API sur le serveur ».

    La démarche n’est pas neuve en infor­ma­tique et le milieu a déjà subit plusieurs aller-retour entre les modes « appli­ca­tion sur le client », « appli­ca­tion sur le client synchro­ni­sée avec un serveur », et « appli­ca­tion sur le serveur, vue sur le client ». Il s’agit juste d’un de ces mouve­ments mais côté appli­ca­tions web.

    J’ai regardé quelques frame­works, nommé­ment Back­bo­neJS, Angu­larJS et EmberJS, plus quelques compa­ra­tifs plus éten­dus. Pour l’ins­tant j’ai l’im­pres­sion qu’ils proposent surtout une notion de MVC, avec éven­tuel­le­ment un système de rendu avec liai­son directe entre la partie modèle et la partie contrô­leur.

    Je peux me leur­rer sur la complexité ou sur la valeur ajou­tée en main­te­nance mais j’ai l’im­pres­sion que ça ne sera pas mes points d’at­ten­tion. Orga­ni­ser mes classes je le ferai certai­ne­ment moins bien si je prends tout de zéro, mais ce ne sera pas ma diffi­culté prin­ci­pale. Les liai­sons directes entre vue et modèle ne me semblent pas non plus forcé­ment indis­pen­sable, ça peut même être contre­pro­duc­tif vue la perte de perfor­mance.

    Par contre j’ai besoin de quelque chose pour gérer le côté appli­ca­tif :

    1. M’abs­traire des diffé­rentes solu­tions de stockage client, si possible en gérant les quotas, en ayant un méca­nisme quand on se rend compte que ce stockage a été écrasé et néces­site d’être recréé, etc. Dans l’idéal quelque chose qui ne se contente pas d’être un simple wrap­per et qui sait faire la diffé­rence entre des préfé­rences et de gros conte­nus par exemple, en me propo­sant des solu­tions diffé­rentes pour les deux cas en fonc­tion de ce qui est dispo­nible sur le navi­ga­teur (on n’uti­lise pas les API File et le local storage dans les mêmes contextes)
    2. Avoir en ligne de vue le fonc­tion­ne­ment hors ligne, avec un vrai méca­nisme de mise à jour de l’ap­pli­ca­tion, un vrai méca­nisme de mise à jour des données (synchro­ni­ser dans les deux sens, un premier méca­nisme de conflit ou de prio­ri­sa­tion en cas de conflit), des notions de « à exécu­ter plus tard une fois en ligne », etc. La ques­tion du login est aussi impor­tante (jeton tempo­raire ou perma­nent, quelle sécu­rité, etc.)
    3. Un méca­nisme complet de gestion des URL à base de popS­tate et pushS­tate de façon à ne pas avoir qu’un seul lien vers la page d’ac­cueil mais pouvoir gérer le bouton retour arrière du navi­ga­teur, les favo­ris, les liens entrants, etc. Bref, si je regarde un contenu parti­cu­lier je dois avoir une URL spéci­fique, que je peux copier, trans­mettre, utili­ser. Et par pitié oubliez les #!. C’est aussi plus diffi­cile qu’il n’y parait dès qu’on fait inter­agir ça avec le mode offline.
    4. * Une gestion de base pour les conte­nus. Si on stocke hors ligne, j’ai­me­rai avoir à jouer le moins possible moi-même avec les data:uri, et pouvoir réfé­ren­cer des images ou des conte­nus dans mes vues, à partir de choses stockées hors ligne dans un local­sto­rage, indexdb ou équi­valent
    5. C’est annexe et peut être non relié, mais si possible un jeu de widget ou templates par défaut qui s’adaptent aux diffé­rents contextes de navi­ga­tion (android, ios, win8, la manière dont on présente les listes, les menus, les retours arrière, ne sont pas les mêmes)

    Vous avez quoi pour gérer ces aspects parti­cu­liers ? Parce que pour dessi­ner des pages à partir de modèles et vues OK, mais pour gérer une appli­ca­tion j’ai l’im­pres­sion d’être sans rien.

    Oh, et en plus vu qu’il s’agit d’être multi-device, je ne souhaite pas quelque chose qui rame sur smart­phone. Par contre j’ac­cepte de coder beau­coup de choses à la main, je ne cherche pas forcé­ment un truc qui fasse le café. Même 4 ou 5 petites lib qui s’oc­cupent de leur partie spéci­fique, ça me va.