kumquats labs Veille technique et R&D sur les technologies HTML5 et Symfony - page 4

Prerender : le SEO facile pour les applications javascript

Prerender : le SEO facile pour les applications javascript

Une problématique bien connue des sites usant de JavaScript pour la mise en page de leurs données est qu’ils sont généralement complètement imperméables au référencement. En effet, les moteurs de recherche ne prennent pas souvent la peine d’exécuter le JavaScript qui se trouve dans nos pages et ne peuvent donc pas savoir réellement quel contenu s’y trouve.

Prerender (http://prerender.io/) tente de répondre à cette problématique en proposant un serveur nodeJS permettant d’exécuter n’importe quelle application JavaScript et d’en récupérer le code HTML, il propose également une librairie cliente pour ExpressJS, RoR et Zend (certainement adaptable pour Symfony) permettant de détecter si une requête est faite par un moteur de recherche et, le cas échéant, de faire appel au serveur Prerender pour récupérer le contenu HTML de la page.
L’inconvénient de cet outil et qu’il utilise NodeJS qui n’est pas encore totalement démocratisé (notamment sur les hébergements mutualisés) mais cela n’en est pas moins une belle initiative à surveiller de près !

Retrouver son dossier « Library » (Mac OS X)

Retrouver son dossier « Library » (Mac OS X)

Un petit truc pour bien commencer la semaine : retrouver son dossier Library sous Mac OS X !
Le comportement par défaut de Mac OS X 10.7 et 10.8 est de masquer le dossier « Bibliothèque ». Si vous non plus, vous n’êtes pas un utilisateur lambda, voici la solution : 

Show User ~/Library in OS X Lion & Mountain Lion

Launch Terminal and enter the following command to show or hide the directory:
chflags nohidden ~/Library/


Hide User ~/Library in OS X Lion (default setting)

This returns to the default setting of hiding the user Library directory:
chflags hidden ~/Library

Bonne journée à tous !

 

 

BackboneJS, modales et théorie

BackboneJS, modales et théorie

En ce matin de septembre j’aimerais partager avec vous un petit peu de ressources à propos de BackboneJS :

  1. Backbone.Modal un plugin pour BackboneJS simplifiant la création et l’utilisation de modals, c’est à tester !
  2. Une petit peu de lecture au sujet des applications de grande ampleur créées avec BackboneJS car ça ne fait pas de mal un peu de théorie

 

 

 

Bootstrap 3 est disponible

Bootstrap 3 est disponible

Nous attendions avec une certaine impatience l’arrivée de Bootstrap 3 et il est maintenant disponible.
En quelques mots, voici quelques uns des changements de cette version :
– le framework est mobile first; les périphériques mobiles sont gérés en premier
– toujours responsive
– nouveau système de grille
– des couleurs d’interface dans les tons pastels et des icônes façon « flat design »
Pour plus d’information, il faut visiter getbootstrap.com qui propose, entre autres, un guide de migration de Bootstrap 2 vers Bootstrap 3.
 

 

J’ai testé pour vous CocoonJS !

J’ai testé pour vous CocoonJS !

Comme nous avons pu le constater au travers de notre R&D, l’utilisation de l’API canvas apportée par le HTML5 au sein d’un application mobile donne des résultat plutôt mitigés en terme de performance.

Après quelques recherches sur la toile, il s’agit effectivement d’un problème général sur la majorité des terminaux mobile dont la puissance moyenne ne suffit toujours pas à faire tourner des applications canvas un minimum complexes.

Ceci est sans compter sur CocoonJS (http://ludei.com/tech/cocoonjs), un service dans le cloud permettant de compiler une application HTML5 en application iOS/Android (et même « Pokki » dont je ne connaissais pas l’existence).

Je vous entends déjà vous interroger: « Mais on a pas déjà PhoneGap pour ça ?« . Tout à fait ! mais là où se démarque CocoonJS  c’est qu’il apporte une optimisation de l’API canvas pour la rendre plus performante. Le résultat est bel est bien au rendez-vous puisque après avoir porté une petite application de « Shooter » sur CocoonJS j’ai bel et bien pu remarquer une nette amélioration.

L’un des inconvénients est que la compilation se fait exclusivement en ligne, il ne semble pas y avoir d’outils pour compiler sur sa propre machine. Il existe bien une application iOS et Androïd appelée « CocoonJS Launcher » permettant de tester l’application en fournissant un zip des sources HTML et JS mais ça reste tout de même un peu léger.
Un autre inconvénient est que nous n’avons pas à disposition toute l’API que peut fournir PhoneGap mais, en contrepartie, CocoonJS fournit des extensions plutôt intéressantes tel que la capture du flux vidéo, la gestion des notifications locales, le support de la librairie physique Box2D en natif, etc…

En conclusion, CocoonJS est une alternative très intéressante à PhoneGap tant que l’on reste dans le domaine du jeu mobile et est donc à surveiller de très près !

 

Popin & transitions JS/CSS

Popin & transitions JS/CSS

Découvrez Alertify, une petite librairie JavaScript permettant de créer simplement des popins. Cela peut être utile pour présenter du contenu informatif de façon élégante.

 

Et pour animer les sites,  je vous suggère Effeckt.css, même si cette librairie est en cours de développement, elle promet d’être intéressante : « Performant CSS transitions & animations ». À surveiller attentivement !

 

Petit rappel sur l’attribut box-sizing

Petit rappel sur l’attribut box-sizing

Une petite piqûre de rappel sur l’attribut CSS box-sizing dans cet article de Graphikart qui peut s’avérer très utile, notamment dans les design fluides où toutes les dimensions sont en pourcentage. 

Avec un « box-sizing » égal à « border-box », on peut donner une largeur de 100% à un élément et lui ajouter du padding et des bordures sans que ceux-ci s’ajoutent et fassent dépasser l’élément de son parent. C’est là tout le principe : par défaut, les navigateurs modernes ajoutent le padding et les bordures aux dimensions de vos éléments, ils utilisent donc border-sizing: content-box. Avec « border-box », les marges internes et les bordures sont déduites des dimensions, ce qui simplifie grandement le travail d’intégration.

L’auteur de l’article nous informe aussi de l’utilisation de cet attribut par certains frameworks CSS.

Un grand coup de :

et les calculs sur le padding ne seront plus qu’un mauvais souvenir.

 

Un petit tour sur caniuse.com pour vérifier la compatibilité et on se rend compte qu’il n’y a que IE7 qui ne supporte pas cet attribut (la plupart des navigateurs ont un support partiel mais cela signifie qu’ils ne supportent que les valeurs « content-box » et « border-box » pour cet attribut donc pas de soucis dans notre cas). Mais il existe un polyfill pour palier au problème.

 

 

N’oubliez pas la balise viewport

N’oubliez pas la balise viewport

Cette petite balise peut faire toute la différence ! Confortée par un article de Ian Yates paru hier sur Tuts+, voici un petit résumé des impacts de cette balise méta.

Tout d’abord, cette balise a été introduite par Apple, puis implémenté par les navigateurs de tout bord. De façon générale, on utilisera le code suivant pour que le contenu soit affiché lisiblement sur tous les périphériques et que le niveau de zoom par défaut soit bien égal 1 :

 

Cela dit, il faut savoir que cette balise n’est pas un standard et n’a jamais été reprise dans les spécifications du W3C. C’est Microsoft qui a pointé ce fait du doigt lors que la société a choisi d’ignorer ce metatag dans IE10 dans certains cas. A la place, ils ont opté pour l’utilisation de CSS Device Adaptation, solution préconisée par le W3C.
Cela consiste à utiliser la règle CSS @viewport :

 



Étant donné que ce travail est en développement, il faut utiliser la version préfixée pour qu’elle soit reconnue par IE10 :

 

L’utilisation de la balise méta viewport n’est donc pas pérenne et vous pouvez devriez déjà inclure la règle CSS @viewport dans vos feuilles de style en attendant qu’elle soit implémentée partout.

Source : http://hub.tutsplus.com/tutorials/quick-tip-dont-forget-the-viewport-meta-tag–webdesign-5972 (en anglais)

Design de boutons

Design de boutons

Creative Button Styles

Un peu de design aujourd’hui avec ce pack de boutons assez sympa qui intègre des animations au rollover ou au clic. Par exemple dans la partie verte, les animations correspondent à l’action du bouton, comme la poubelle qui se vide.
Les animations sont réalisées en CSS3 et donc compatibles avec tous les navigateurs modernes (oubliez IE7, IE8, IE9 ! )
kumquats-labs-creativebuttons 

Ladda button

Un autre pack de boutons de Hakim El Hattab, le créateur de slid.es, qui intègre des loaders directement dans les boutons d’action. Les animations sont aussi en CSS3 donc pas d’IE7/IE8.
kumquats-labs-ladda

Le mode strict de JavaScript

Le mode strict de JavaScript

Comme vous le savez certainement, le JavaScript est un langage extrêmement permissif.
Si ceci a pour avantage de le rendre particulièrement souple on peut, en revanche, très rapidement faire n’importe quoi et se retrouver avec des bugs très difficiles à identifier et à corriger.

Si vous avez déjà fouiné un minimum dans certaines librairies JavaScript, vous avez peut être déjà aperçu la directive « use strict« . Cette directive permet en fait d’activer le mode strict de l’interpréteur JavaScript afin de rendre le langage moins permissif en soulevant des exceptions aux endroits sensibles de votre code.

Cet article de John Resig vous apprendra quelles sont les conséquences et les bénéfices de l’utilisation du mode strict, dont voici quelques extraits :

les variables et propriétés : essayer d’assigner foo = « bar »; alors que ‘foo’ n’a pas été défini avant échouera. Sans le mode strict, la valeur « bar » aurait été affecté à l’objet global window.foo

eval : pratiquement toute tentative d’utilisation du nom ‘eval’ est interdite, tout comme la possibilité d’assigner la fonction ‘eval’ à une variable ou à la propriété d’un objet. De même, l’introduction de nouvelles variables au travers d’un ‘eval’ n’est pas possible.

Retrouvez toutes les informations concernant les fonctions dans la suite de l’article.

Page 4 of 7 ← First ... 2 3 4 5 6 ... Last →