Deux tracks sont proposés en parallèle. Puisqu’il faut choisir, voici ma sélection:

Responsive Web Design: Clever Tips and Techniques par Vitaly Friedman

Souvent plus pour la présence et l’énergie que pour le contenu, j’apprécie les talks de Vitaly Friedman. Le contenu est évidemment de qualité, mais, et c’est assez logique, reprit des Smashing Books et des articles sur Smashing Mag.

Backbone.js in production at SoundCloud par Darrell Stephenson

Développeur frontend chez SoundCloud, Darrell va présenter un retour d’expérience sur leur utilisation de Backbone.js. Les talks de retour d’expérience sont toujours enrichissants. Surtout quand ils surviennent après avoir nous-mêmes fait nos expériences avec Backbone.js.

Hacking into User Experience par Henrik Rydberg

Organisateur de IxDA à Helsinki, Herik est aussi spécialiste UX à Shapeways, une stratup active dans l’impression 3D. J’hésite encore avec le talk en parallèle sur les single-page apps par Ben Firschman.

Rendering without lumpy bits par Jake Archibald

Développeur chez Google dans l’équipe Chrome, Jake parelera d’optimisation à l’ère du retina. Des performances dans le travail avec le DOM et où sont les goulets d’étranglement.

Prototyping in the browser par Florian Plank

Florian propose une démonstration des techniques pour récolter des feedbacks et comportements des utilisateurs directement dans le browser.

The Future is Responsive par Jonathan Smiley

Jonathan est un des développeurs de Zurb derrière le projet Foundation. Sa présentation sur le responsive s’annonce passionnante. Peut-être pourra-t-on discuter de la suite de leur framework.

Si vous y êtes également présent, n’hésitez pas à me contacter via Twitter. Je me ferai un plaisir de vous présenter Helsinki si vous ne la connaissez pas déjà bien.

• Le site de la conférence Webshaped : webshaped.fi
• le programme : webshaped.fi/program
• Les speakers : webshaped.fi/speakers

see#8 | the conference on visualization of information | 20. April 2013 | Schlachthof Wiesbaden from Scholz & Volkmer GmbH on Vimeo.

The conference started with a talk by Wolfgang Ullrich, which was actually my favourite. In a one hour talk, he reflected about product design in a consumer & capitalistic world. With examples, he showed us how companies are using the new medias (Facebook, instagram, …) to create an image of themselves and how they use their clients to actually spread this image into the world. As an example, he used the notebook brand « Moleskine »: You find thousands of beautiful photos of Moleskine notebooks in a calm, inspirational environment, often with tea cups or candles in the same picture – symbols for creativity and ideas. See the examples on flickr here and here. A very interesting talk that changed a little bit my view on product design.

A second talk I did like was hold by Pablo Vio from jam3 about the Bear71 project. The project is a new, interactive approach to documentary movies on the web and won a Gold Cyber Lion Award at the Cannes Lions International Advertising Festival. He talked about the collaboration between designers and developers and how both need to be involved in the creative brainstorming part of the project. It was interesting to see, that jam3 builds their own custom tools for working with the data visualisation. For the Bear71 project for example, the developers built a relatively simply tool so that the designers were able to go beyond photoshop and work directly on the data.

In the afternoon, Dries Verbruggen from unfold.be reflected about the future challenges in a world of 3d printers, personalisation and copyrights. He presented his project « The Kiosk », a portable 3d printer capable of producing and copying objects. They are using their machine to copy art objects and push the discussion about copying into mainstream.

For me, a developer, it was indeed very interesting to hear for a complete day talks about art & design and to deepen the topics through discussion with other participants. Especially the dinner with about 50 visualisation enthusiasts was pretty amazing. A big plaudit for the conference organisation as well, it was very well organised and the videos & sound effects were amazing.

On the choice of topics, I was a little bit disappointed. Branding a conference about the visualisation of information, I expected more on the topic of data and how to visualise huge quantities of it, since these are challenges designers have to deal with in the future. And I expected a more interdisciplinary field of participants. Visualisation of information is the last part of a long chain – from getting the data, to bring it in the right format, analyse it and extracting the relevant things. Designers are only a part of the chain and should know the concepts about what developers and data analysts are doing before (inverse is of course necessary as well). Like Pablo Vio said, everybody working on the project needs to be involved in the creative process and brainstorming – and this was a point I was clearly missing at this conference.

Nevertheless, I am happy that I did the long journey to Germany!

Au programme ce jeudi

• Déploiement avec Capistrano
• Feedback du Meetup Symfony Zurich du 24 avril sur Elastic Search
• Discussion sur les tests

Inscription via Meetup

A l’image, Jean-Pierre Villain de Qelios qui a présenté un état des lieux d’HTML5 concernant l’accessibilité.

Retrouvez les notes de Cédric sur gist et le programme complet sur le site de Telono qui a organisé l’événement.

Crédits photo : Thomas Joubert

Cet outil permet d’offrir aux clients un service aussi complet que lors d’un achat non virtuel. Explications, réponses et compléments d’informations peuvent être communiqués par ce biais. Ce qui a pour objectif de rassurer l’acheteur et le conforter dans son idée d’achat. Même si la vente n’a pas lieu, ce service est bénéfique pour l’image du site web.

Newsletter, canal indispensable

Malgré certaines contraintes telles que tenir à jour une base de donnée d’adresses; envoyer une newsletter avec un contenu de qualité ; respecter un rythme d’envoi (hebdomadaire ou mensuel), ce système reste encore aujourd’hui un des meilleurs moyens pour déclencher une envie d’achat chez le consommateurs.

Réseaux sociaux pour la promotion et le dialogue

Après la course aux followers, aux likes, au nombre de vues et à la création de communauté, il est temps de se repositionner sur les réseaux sociaux. Il est bon de canaliser la diffusion de vos offres sur un nombre restreint de réseaux, où votre clientèle se trouve, afin d’améliorer votre ROI.

E-commerce mobile

La diffusion sur le marché des smartphones et des tablettes favorise l’achat en ligne à tout moment et dans n’importe quelle situation. Il est donc judicieux de créer un E-shop compatible avec ces supports. Tout ce qui facilite l’acte d’achat est bon à prendre.

UX, l’expérience utilisateur toujours aussi importante dans le domaine

Diminuer les freins, faciliter la compréhension et utiliser les bonnes pratiques sont la base d’une bonne expérience sur un site e-Commerce. Un moteur de recherche permet aux internautes de rapidement trouver l’article de leur choix. Un comparateur de produits, des filtres intelligents sur le prix, les tailles et les couleurs sont tant d’outil développés et éprouvés dont on peut s’inspirer pour la réalisation d’un site e-Commerce.

Quelle plate-forme choisir ?

Une question toujours essentiel, quel est l’outil idéal pour mettre en place un site e-Commerce. Nous avons développé Uchitomi, Marché-Cuendet ou Coolkidz sur Magento pour gérer des besoins bien spécifiques à leurs marchés. Pour ouvrir un site en quelques heures il existe des outils clés en main comme shopify ou etsy. Amazon, Ricardo sont aussi des plate-formes de vente qu’il faut envisager comme marché.

Qu’est-ce qu’un devicelab ?

Un deviceLab est un lieu dans lequel on trouve des téléphones, ordinateurs et tablettes pour pouvoir tester son site ou son application.

Gratuit, ouvert à tous pour un meilleur web mobile.

Une initiative pour la communauté web de romandie qui doit créer de l’émulation chez les développeurs web. 2009 était l’année du mobile, du responsive design et du mobile first. En 2013, ce constat est encore plus vrai, d’où la nécessité de devoir tester sur le plus grand panel de supports possible

Le deviceLab est un lieu d’échange et de rencontre des passionnés du web mobile. En accord avec les buts de l’Open Device Lab et de son association LabUp!, nous proposons un accès gratuit et libre au lab durant les heures d’ouverture de l’agence.

Pourquoi tester sur autant de mobiles?

Nous sommes pour la qualité dans les réalisations web; et qui dit qualité, dit test. Afin d’assurer à nos clients la meilleure compatibilité de leur site sur mobile, nous devons le tester sur un maximum de supports. Il existe, en effet, beaucoup de systèmes d’exploitations et de navigateur qui font varier le rendu de votre site internet. Il est donc indispensable d’avoir une vision globale de la façon dont le site va s’afficher sur chaque écran.

Nous espérons que les développeurs, designers et professionnels du web en général viendront profiter du deviceLab.

DeviceLab.ch

Heureusement, rassurez-vous, il existe une alternative et non des moindres ! Openstreetmap, OSM pour les intimes, est un magnifique projet open source qui a pour but de cartographier la totalité de notre chère planète, permettant ainsi de créer des cartes sous licence libre. Grâce au courage de milliers de contributeurs volontaires et aux données GPS libres récolté de-ci de-là, OSM est vite devenu une des bases de donnée cartographique les plus riches du moment.

N’hésitez plus et inscrivez-vous sur le site officiel !

Ouais, mais Google Maps c’est plus facile à intégrer

Openstreetmap peut sembler extrêmement intimidant pour un profane qui souhaite seulement afficher une petite carte sur sa page et c’est justifié. Étant très (trop) complet, on se perd facilement dans les méandres de cette technologie aux possibilités infinies. Il existe néanmoins un havre de simplicité qui vous permettra d’intégrer une Openstreetmap sur votre site : Leaflet !

Cette bibliothèque JavaScript open source s’est vite imposé comme l’API de référence dans l’utilisation d’OSM.

Tout d’abord, installez la librairie :

Ensuite, incorporer les styles sans quoi votre carte va exploser :

Et pour finir, ajoute simplement ces quelques lignes dans votre fichier de scripts :

N’oubliez pas de créer le bloc HTML dans lequel vous allez placer votre map et de déclarer l’ID correctement !

OK, mais c’est un peu moche

Il apparait assez rapidement qu’Openstreetmap ne brille pas par ses qualités graphiques. En effet, les quelques calques disponibles (Standard, Cycle Map, Transport Map et MapQuest Open) ne sont clairement pas des modèles d’esthétisme.

Leaflet c’est bien, mais couplé à Cloudmade et son éditeur c’est mieux. En effet, à par une tripotée de services et technologies liées à la cartographie, Cloudmade propose une interface hyperintuitive de personnalisation de cartes pour Openstreetmap. Et si je vous dis que les bougres s’investissent pleinement dans le projet OSM, vous comprendrez certainement l’intérêt qu’ils ont à proposer un tel service. En plus, Leaflet, c’est simplement eux qui en sont à l’origine !

Comprenez une chose, Leaflet n’est qu’une API de navigateur de carte, elle propose par défaut les tuiles de base d’Openstreetmap, mais ce n’est pas elle qui vous fournira les précieuses tuiles. Pour cela il vous faudra vous rediriger vers un Web Map Service comme Mapquest, Cloudmade ou même Google Maps et Bing qui vous fourniront les layers nécessaires à l’affichage de votre carte. Cloudmade semble donc être un bon choix de par sa gratuité et sa capacité à proposer une certaine personnalisation.

Le précieux sésame

Premièrement, créez-vous un compte. Cette inscription vous servira à générer vos précieuses API KEY nécessaires au bon fonctionnement de vos styles.

Laissez libre cours au Picasso qui sommeille en vous

Ensuite, rendez-vous dans l’éditeur et faites votre choix parmi un des nombreux styles déjà créés par la communauté. Si aucun ne vous sied, libre à vous de créer un nouveau style de zéro ou à partir d’un style existant. N’oubliez pas de rafraichir votre carte à chaque changement, sans quoi vous ne verrez rien. Une fois satisfait de votre oeuvre, enregistrer et avant de quitter, relevez l’ID de votre style en cliquant sur «share» et en le repérant dans le code ( styleId= ? ).

Créez la clef…

Pour finir, rendez-vous sur votre page de profil et cliquez sur  » Get API Key » pour ajouter une nouvelle clef. Rentrez toutes les infos relatives à votre page en gardant à l’esprit qu’une URL erronée ne permettra pas l’affichage de votre style.

… et laissez la magie opérer

Il ne vous reste qu’à paramétrer votre calque dans vos scripts

Tadda ! Vous disposez maintenant d’une magnifique carte personnalisée et sans avoir dépenser un centime.

Le mot de la fin

Il existe bien sûr des alternatives comme Mapbox qui propose de vous fournir des cartes personnalisables sans toucher une ligne de code. Cependant ce service à un coût non négligeable qui augmente en fonction du nombre de consultations. Personnellement, je trouve que lâcher un peu des Google Maps ternes et sans saveur ne fera que diversifier le paysage de la cartographie online.

Les sites statiques ont bien des avantages.

Chez Antistatique, nous prêchons pour les solutions sur mesure. Les sites sans script côté serveur reviennent à la mode. En effet, une solution basée sur WordPress, Drupal ou Symfony n’est pas nécessaire s’il s’agit d’un site de quelques pages dont le trafic est très élevé.

Une zone d’administration du contenu n’est pas toujours nécessaire.

Certains sites composés de quelques pages seulement n’ont ni besoin d’un CMS (Système de gestion de contenu) ni de logique coté serveurs (PHP, Python, Ruby, etc.). Dans le cas d’une landing page ou d’une page de présentation d’un produit, le contenu a peu besoin d’être édité. La mise en page est également souvent liée au contenu.

10 ans d’évolution dans les CMS est nous revenons aux sites statiques écrit a la main en html.

Cette pratique est un constat positif. les CMS ont été tordus souvent dans le mauvais sens. Utiliser un gros système pour un petit site ou un système de blog pour gérer des pages multilingues sont des pratiques peu durables.

La mise en cache et le souci des performances.

Pour les moteurs d’indexation de Google, pour les visiteurs mobiles et pour les internautes, la rapidité d’un site est un élément clé. Les 10 règles de l’optimisation frontend sont une chose, mais dans certains cas éviter au serveur de générer une page HTML permet également d’augmenter les performances.

Hébergement simplifié.

Pour les questions d’hébergement ensuite, des solutions à moindre coût et même gratuites existent. Il y’a les github pages que nous avons utilisés pour devicelab.ch et bookedup.ch. Mais également Dropbox ou Amazon S3.

Du statique, mais pas n’importe comment.

Il existe beaucoup de solutions pour faciliter et optimiser le processus de création d’un site statique. Des applications en ruby telles que Jekyll ou Middlman permettent également de le faire.

Ces applications évitent de dupliquer du code.

Le menu, le header et le footer sont souvent communs à toutes les pages du site. Ces applications permettent de ne pas dupliquer ces éléments et les éditer à une seule place. Pioché dans notre grenier du web personnel, il existe une méthode pour inclure des éléments provenant d’un autre fichier dans la page.

Utilisation des includes de Apache

Modifier la configuration du vhosts ou via le fichier .htaccess

Maturité et utilisation avisée de la technologie

Le retour aux standards et la simplification sont toujours une bonne chose. Surtout quand ils permettent de mieux servir l’expérience de l’utilisateur.

This procedure is tested on Mac OS X 10.8 with Developpers tools installed (xCode).

PHP 5.4 installed with Homebrew.

Preparation

Download the following files from Oracle website (yes, you need to create an account and accept terms):

• instantclient-basic-macos.x64-11.2.0.3.0.zip
• instantclient-sqlplus-macos.x64-11.2.0.3.0.zip
• instantclient-sdk-macos.x64-11.2.0.3.0.zip]

Create and unzip all theses files into a the directory `/usr/local/instantclient/11.2.0.3/`.
This directory will looks like:

Create symlinks

Test with sqlplus instantclient

I recommand to install Oracle Server with a VirtualBox VM preinstalled.

Install extension with pecl

If the script prompt you to provide the path to ORACLE_HOME directory, respond with:

And your are done, normally pecl will automatically load the extension in your `php.ini`. If not, add the following line to your `php.ini`:

Restart your HTTP Server and test.

Enjoy (or try to…) !

Feel free to fork and adapt this gist !

Déploiement « old school »

J’ai retrouvé dans nos archives (2007-2008) une procédure de déploiement:

C’est fastidieux, non ?
… surtout si l’on doit répéter l’opération encore et encore.

Scripts Bash basé sur rsync et ssh

Par la suite, fatigué, nous avons écris des scripts BASH se basant sur rsync et SSH. Cela fonctionne relativement bien dans la majorité des cas.

Allez plus loin !

Très vite, nous nous sommes rendu compte que nos besoins dépassait largement le transfert de fichier. Nous voulions:

• Mettre le site en maintenance (ou stopper les écritures)
• Backup de la version actuelle
• Mise à jour du schema de la base de données
• Vider (ou Warm-up) le cache applicatif
• Mettre le site en maintenance

Framework de déploiement

Pour répondre à ces besoins et faciliter la vie du développeur, il existe plusieurs outils libre en open-source. comme Capistrano (Ruby) ou Fabrik (Python).

Nous avons porté notre choix sur Capistrano principalement pour les raisons suivantes :

• Des recettes existantes pour nos outils favoris (Symfony)
• Le système de rollback intégré (pouvoir revenir à une version précédente en un clin d’oeil) est plutôt cool et te permet de rester détendu du slip lors d’une publication.

Capistrano

Capistrano est un framework de déploiement pour des applications web initialement écrites pour Ruby On Rails mais qui reste suffisamment souple et extensible pour être utilisé pour déployer d’autre types applications web. Dans notre cas, des applications basée sur PHP.

Pré-requis

• Un accès SSH au serveur distant
• Aimez ligne de commande
• Savoir que Ruby n’est pas uniquement un jolie pierre flashy (bien que… )

Installation

Déployer

Cool, non ?

Mais attention, avant de lancer le premier déploiement vous devez définir la configuration du projet (Capfile, config.rb).

En gros, comment ça marche ?

La structure de répertoires créée sur le serveur distant va ressembler à ça:

A chaque fois que vous déployez, un nouveau répertoire va être créer sous le dossier « releases ». Le code de la nouvelle version de l’application est copié dans ce répertoire en fonction de la stratégie choisie. Par défaut via un checkout du code via git, subversion, mercurial, etc.

Il est possible de définir des fichiers (ou dossier) qui seront partagés entre les releases (configuration à la base de données, logs, uploads, …). Capistrano s’occupe de créer des liens symboliques vers chaque ressources partagées (exemple: /releases/20130311184017/app/config/parameters.yml -> /shared/app/config/parameters.yml)

Finalement, le lien symbolique « current » est mis à jour pour pointer vers la dernière « release ».

Vous devez configurer votre serveur web pour servir les fichiers à partir de /path/to/project/current/web.

Ci-joint, un schéma expliquant ce qui se passe durant un cap deploy.

La tâche suivante permet de créer cette structure de base avant le premier déploiement:

Un bug inattendu, page blanche ? Rollback!

Cette structure basé sur des liens symboliques permet de switcher rapidement d’une release à une autre en cas de problème.

Permet de revenir à la version précédente, et vous laisse tout le temps pour corriger le bug.
Mega-cool, non ?

Configuration & recettes

Ce blog post est le premier d’une série sur nos recettes et configuration utilisées pour déployer nos applicaitons Symfony, Drupal, Magento ou encore WordPress.

En attendant, voici un exemple de configuration utilisant les extensions railsless et
capistrano-ext.

Conclusion

Industrialiser ses déploiements offre beaucoup d’avantages, notamment:

• Documentation par le code !
• Standardisation de la procédure
• Augmentation de la cadence des déploiements (tous les semaines, voir tous les jours)
• Diminution du risque d’erreur humaine
• Réduction des coûts (omoins de temps a déployer, plus à développer)

De plus, le fait d’automatiser la procédure nous force à créer des scripts de migrations (changement du schéma de base de données, migrations de données, …) ce qui est une bonne chose.