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

Faites glisser vos listes avec Slip.js

Faites glisser vos listes avec Slip.js

Slip.js est une petite librairie pour la gestion du swipe et de l’ordre des éléments d’une liste sur écran tactile :

slipjs

Son nom peut faire sourire en français je vous l’accorde, mais un simple appel à new Slip(<element>) rend un objet swipeable.
A partir de là, on interagit avec la librairie via des évènements du DOM :
slip:swipe, slip:beforeswipe,slip:reorder, slip:beforereorder, slip:beforewait, slip:tap

 

Vous pouvez voir une démo ici et consulter le GitHub du développeur.

 

 

Tips & tricks JavaScript, parallax UI pour Phonegap et les frameworks php à surveiller en 2014

Tips & tricks JavaScript, parallax UI pour Phonegap et les frameworks php à surveiller en 2014

Pour bien commencer l’année, 45 Useful JavaScript Tips, Tricks and Best Practices en guise de piqûre de rappel sur les bonnes pratiques et les trucs et astuces à garder en tête en JavaScript.

Si vous appréciez l’interface iOS7 et ses effets parallax, je vous invite à consulter cet article : Parallax UI for PhoneGap and Mobile Web Apps. Vous découvrirez ainsi comment créer une interface parallax en HTML5 et CSS3 pour une application PhoneGap.

2014 sera peut-être l’année où vous testerez un nouveau framework PHP. Pour cela, l’article Best PHP Frameworks for 2014 peut vous aider à choisir celui qui vous semble le plus intéressant. Par exemple, Phalcon est apparemment « Les plus rapide des Frameworks PHP ».

 

 

HTML, CSS : automatisations et frameworks

HTML, CSS : automatisations et frameworks

Les bons développeurs sont souvent ceux qui ménagent leur cerveau. Voici deux techniques qui devraient vous plaire :
On commence par l’automatisation avec Addy Osmani dans cette présentation intitulée The Landscape Of Front-end Development Automation
Il y a de bons exemples à suivre, notamment au sujet de l’utilisation de GruntJS, pour l’optimisation des images par exemple. On retient :
grunt-responsive-images : permet de générer des images de différentes dimensions
grunt-imageoptim : permet d’automatiser l’optimisation des images
 

On poursuit en éliminant des tâches répétitives avec un framework CSS : CSS frontend frameworks. Celui-ci permet de comparer et choisir un framework en fonction de nos besoins. Utilisation d’un pré-processeur CSS, responsivité, support des différents navigateurs.

 

 

Gestion du mode hors-ligne avec Offline.js

Gestion du mode hors-ligne avec Offline.js

A l’heure de la mobilité, nous attendons de plus en plus de nos applications mobiles : qu’elles soient disponibles et utilisables en tout temps, même si nous sommes « offline ».

C’est dans cet esprit que nous vous invitons à découvrir la librairie JavaScript Offline.js, une librairie très utile à toutes les applications web ou mobile qui ont doivent avoir un mode offline.

Cette libraire indique à l’utilisateur s’il vient de perdre sa connexion Internet  (l’application est passée en mode offline) ou d’en récupérer une. Ce qui est intéressant, c’est que lorsque l’application est en mode hors-ligne, la librairie intercepte les éventuelles requêtes AJAX effectuées pour les relancer dès que la connexion est rétablie. Pour que le tout soit parfaitement intégré à votre site ou application, plusieurs thèmes sont disponibles : clair, sombre, inspiré de Chrome… de quoi bien commencer votre prochain projet.

Alors Offline.js sera-t-elle la librairie complémentaire aux applications développées avec PhoneGap ?

 

Aviator, le navigateur en toute discrétion

Aviator, le navigateur en toute discrétion

Ce matin j’aimerais vous présenter un nouveau venu dans la famille des navigateurs web : Aviator
Comme l’indique cet article de developpez.com Il s’agit d’un navigateur basé sur Chrome créé par des experts en sécurité web. Il bloque par défaut les cookies tiers, les fenêtres de pubs, vide son cache à chaque fermeture et son moteur de recherche est DuckDuckGo. Pour le moment il n’est disponible que pour Mac OS (je ne sais pas s’il est compatible avec Mavericks). À tester pour celles et ceux qui veulent protéger leur vie privée.

CSS3, « it’s gonna be legen… -wait for it- …dary ! »

CSS3, « it’s gonna be legen… -wait for it- …dary ! »

Bonjour à tous. Ce matin, on commence la journée avec deux articles au sujet des CSS3 :


12 Awesome CSS3 Features That You Can Finally Start Using : car oui il y a des règles CSS3 que nous pouvons utiliser dès maintenant. Comme par exemple les animations et transitions, les méthodes permettant de calculer les largeurs et hauteurs, comme width: calc(100% - 40px); Il y en a d’autres, je vous laisse les découvrir.

 

Ensuite voici un article pouvant s’intituler Flexbox et Float sont sur un bateau, mais en vrai il s’intitule After: float. Il donne une astuce nous permettant de nous passer des div, ou span type <span class="clearfix"></span> vous savez ce sont ces div qui permettent d’avoir un élément flottant étant entouré complètement par son élément parent. À l’aide du pseudo selecteur ::after nous n’aurons plus besoin de polluer notre DOM avec des éléments vides.
knacss, un framework CSS simple et léger

knacss, un framework CSS simple et léger

Nous le savons, en informatique, mieux vaut éviter de réinventer la roue à chaque occasion. C’est pourquoi nous vous présentons aujourd’hui une feuille de style de base bien pratique, proposée par Alsacréations. 

KNACSS (à prononcer « knakess ») est un « kick-start » pour bien commencer vos projets, minimaliste, reponsive, modulaire et basé sur un ensemble de bonnes pratiques.

Vous y trouverez – entres autres – ces fonctionnalités :

– un reset CSS
– des classes réutilisables
– des snippets CSS
– des aides au positionnement
– du positionnement avancé (FlexBox)
– un support navigateur allant jusqu’à IE6
– des grilles simples et des gouttières
– du Responsive webdesign
– des classes pour les tableaux
– des classes pour les formulaires
– une version LESS
– une version Sass

Plus d’infos sur :
http://www.knacss.com/ (en anglais)
http://www.knacss.com/knacss.html (quelques règles CSS, en anglais)
http://www.alsacreations.com/tuto/lire/1577-decouverte-du-framework-css-KNACSS.html (en français)

Ah oui ! Vous pouvez tester tout ça dans vos projets, mais c’est encore en version « beta » :)

 

Rappel sur les unités en CSS

Rappel sur les unités en CSS

En CSS, on dispose d’un florilège d’unités de mesure à ne plus savoir quoi en faire.

 

Cet article listant les différentes unités que nous avons à disposition explique également dans quelles situations elles sont le plus adaptées et dans lesquelles elles ne le sont pas.

 

On apprend, par exemple, que les « px » sont idéals pour les design fixes mais, qu’en revanche, ils sont effectivement déconseillés pour définir les breakpoint des media queries.
On apprend également qu’il existe certains cas ou les valeurs brutes (sans unité) sont à privilégier. C’est par exemple le cas pour les propriétés « line-height » et « border-image ».

Source : http://demosthenes.info/blog/775/Which-CSS-Measurements-To-Use-When

PhoneGap on Steroids

PhoneGap on Steroids

Le dopage est à l’honneur de cet article… ou tout du moins, l’usage des stéroïdes pour PhoneGap. Ça commence avec un slogan assez simple :

« PhoneGap apps didn’t feel native. That’s why we built Steroids.« 

 

PhoneGap on Steroids est un framework basé sur PhoneGap qui permet d’utiliser des éléments d’interfaces natifs (Native UI: Multiple WebViews, Tabs, Modal windows, Navigation bar, Native animations, Drawer et Calendar) et comble certains manques de PhoneGap.

On y trouve aussi des outils en ligne de commande très utiles comme le développement multi-périphériques en simultané et le support de Sass et CoffeeScript, pour ne citer qu’eux.

Vous trouverez plus d’informations dans les tableaux comparant les frameworks.

 

Pour l’instant les prix de la beta semblent intéressants, à surveiller et à tester très prochainement !

 

 

Référencement : traduction des url

Référencement : traduction des url

Lorsque nous devons créer un site en différentes langues, nous nous posons souvent les questions suivantes : 

  1. Faut-il traduire les url ?
  2. Comment indiquer la langue dans l’url ?

La réponse à la première question est oui, il faut traduire les url. En effet, une url doit être unique en fonction de la ressource qu’elle permet d’afficher. Par exemple, pour une liste de produits, nous aurons :

La réponse à la seconde question, nous la retrouvons lorsque nous voulons aidez Google à afficher l’URL correspondant à la langue ou à la région de l’internaute.
Si nous ne voulons pas, ou si nous n’avons pas de contenus qui diffèrent en fonction des pays nous pouvons avoir les urls suivantes :

Si nous nous avons des contenus qui diffèrent en fonction des pays nous aurons les url suivantes :

Vous avez compris le principe. Ces codes, langue et pays, sont basés sur les normes ISO 639-1 ett ISO 3166-1 Alpha 2.

 

 

 

Page 3 of 7 1 2 3 4 5 ... Last →