Objectifs de Montréal Ouvert

Les fondateurs de Montréal Ouvert ont présenté les objectifs de l’association.

• Favoriser l’émergence d’une motion de la part de la ville de Montréal à propos des données ouvertes
• Aider à la mise en place d’un portail d’accès aux données
• Aider à l’émergence d’une API pour accéder ces données
• Aider à la définition des standards et de la politique de conservation de ses données

L’objectif pour Montréal Ouvert n’est pas de créer une plateforme mais de supporter une motion qui permettra à la ville de budgétiser une plateforme.
La motion devra être courte et synthétique.

La ville de Montréal et ses données

Il y a aujourd’hui de nombreux débats dans la ville autour des données ouvertes. Il existe cependant des barrières d’accès à ses données. Certaines sont conservées dans des documents PDF, difficilement accessibles. La source, le format et les licences d’utilisations sont la plupart du temps non ou mal définies.

Il y a définitivement un intérêt des employés de la ville tels qu’ils l’expriment à cette réunion. Cela ne suffira pas à ouvrir les données. Il y a vraiment besoin d’une politique générale. Montréal Ouvert se veut non partisan et recherche le support de toutes les tendances politiques siégeant à la ville. Une politique de données ouvertes est souvent intimidante pour les décisionnaires, car les conséquences sont mal connues, identifiées.

On oublie souvent que la ville peut avoir des difficultés à accéder ou échanger ses propres données entre les différents services ou municipalités. La collecte des données et la transmission n’ont pas toujours des formats normalisés qui rendent difficile l’utilité du partage. Certaines données à l’interne ne sont ni documentées, ni interopérables.

Si tous les développements sont partagés, ils permettent à d’autres villes de bénéficier du travail déjà réalisé. Il est également recommandé pour certaines villes de mettre leurs efforts en commun.

Besoin de cas d’utilisations

Afin de convaincre la ville, il est nécessaire de monter des cas d’utilisations, de collecter des cas concrets comprenant les coûts et bénéfices que cela a entraîné. Il y a des exemples comme au Danemark ou en Catalogne qui sont relativement bien documentés.

Besoin d’inventaire

Il serait bon de faire un inventaire des données existantes de la ville de Montréal. Cette initiative implique des ressources humaines et une grille d’analyse. Il est également nécessaire d’avoir le retour des implémenteurs. Quelles ont été leurs difficultés ? Qu’est-ce qui a marché et n’a pas marché lorsqu’ils ont utilisé les données de la ville de Montréal.

Les craintes

Parfois la ville peut être frileuse de partager les données car il manque du contexte autour de ses données. Des journalistes, des citoyens peuvent tirer des conclusions approximatives. Cependant, il est possible que la ville soit secouée par certaines analyses. Celles-ci deviennent alors partie du processus démocratique et redonnent l’action au citoyen.

Comment participer ?

Certaines personnes pendant la soirée affichaient leur volonté claire de participer, mais étaient un peu perdues quant aux actions concrètes à prendre. Je pense que le mouvement se structure et que les actions vont émerger petit à petit.

Une personne a mentionné que pour démontrer l’utilité des données ouvertes, il fallait créer des applications tout de suite, de ne pas attendre la motion. Ainsi même imparfaite et difficile à maintenir, cette première génération d’application permettra d’encourager la ville dans le bon sens comme cela s’est passé à Oakland ou à San Francisco. « Show, don’t tell » Une autre personne propose un concours de design autour des données ouvertes de la ville de Montréal.

Certaines données seront plus efficacement mises à jour et collectées par les citoyens. C’est une force que les citoyens peuvent offrir aux autorités de la ville, si la plateforme est disponible.

Il faut également en parler sur vos propres blogs, twitter, entreprises, etc. afin que l’idée se répande et soit un mouvement citoyen global.

Finger Prince by opusinfinity, on Flickr

C’est ce que Sony a découvert, lors de tests avec des consommateurs:

The latest is a new line of Sony e-readers that the company will introduce Wednesday. For the first time, all have touch screens; Sony decided on the technology after watching person after person in focus groups automatically swipe the screen of its older, nontouch e-readers.

Cette tendance a ses implications, outre dans le design des nouveaux appareils, mais aussi dans le design d’interfaces. Depuis plusieurs mois, notre travail de design a dû évoluer avec cette nouvelle tendance. C’est le cas bien sûr pour le design d’interfaces dans notre travail sur des services ubiquitaires, puisque la plupart des appareils mobiles contemporains sont tactiles. Mais c’est aussi le cas pour notre design d’interfaces Web en général.

Depuis des années, le design Web a pris pour habitude d’offrir des interactions particulières à une utilisation d’une souris. Lorsque le visiteur passe le pointeur sa souris sur certaines zones (le fameux “hover” ou “mouse over”), de nombreuses fonctions peuvent être déclenchées: offrir de l’information contextuelle, ouvrir un menu, indiquer la présence d’un hyperlien ou la possibilité d’agir avec le contenu ou l’interface.

Tout cela change avec la multiplication d’appareils connectés au web dont la principale interface utilisateur n’est plus une souris et son pointeur, mais un écran tactile. Exit la possibilité pour le visiteur de traîner sa souris comme on traîne le regard à la recherche d’information. Même si elles ont toujours leur utilité comme petit “plus” pour les utilisateurs avancés (avec un ordinateur et une souris ou un trackpad, les fonctions de “:hover” ont fait long feu, et comme l’écrit Andy Croll, beaucoup d’interfaces migreront sans doute du hover au tapotement.

C’est sans doute une bonne chose. Depuis longtemps, les apôtres des bonnes pratiques Web notent qu’il est préférable, pour de nombreux utilisateurs du Web, de ne pas offrir d’information ou d’interaction exclusivement via “:hover” ou autre action qui nécessite l’utilisation de la souris. En effet, certains utilisateurs n’ont pas le contrôle neuro-moteur suffisant pour effectuer des déplacements subtils d’une souris. D’autres, dont la vision ne leur permet pas d’utiliser un écran et une souris, accèdent le Web entièrement avec un clavier et une synthèse vocale.

De nombreux développeurs pour le Web auront déjà pris en compte ces besoins d’accessibilité, mais d’autres auront sans doute eu du mal à voir pourquoi il faudrait “amputer leur design” pour un petit pourcentage d’utilisateurs aux handicaps divers. La prolifération des interfaces tactiles change la donne. Elle apporte avec elle une nouvelle démographie “handicapée de la souris”: un public souvent jeune, assez riche et prêt à adopter les nouvelles technologies. Et cela change tout.

Give the opportunity for people to develop commercial (or not) applications helping/driving users to order tickets or use more the service.

The Bixi system has been inaugurated in London this summer. According to the Guardian, Transport For London, decided to release the data to encourage developers to create innovative applications.

Transport for London (TfL) is suddenly getting the free data/app development religion. Having just relaxed its rules to allow commercial use of an initial set of its train and tube data, it is now calling on mobile developers to « come up with innovative and creative ways to keep users informed about the Mayor’s flagship cycling scheme. »

That is good! We just something similar with Bixi data in Montréal: Bixar．It is good for everyone for Bixi, for users, for Pheromone.

But most important of all, TfL went a bit further than just releasing the data. They explicitly authorized commercial use of their own data.

Q: Is it possible to use the feeds on a commercial basis?

A: Yes, you are welcome to charge the public for applications you produce using TfL syndicated data.

I would recommend to go a bit further, by attaching a CreativeCommons License to these data: CC-BY. That would create a legal framework at no cost for both TfL and developers.

Update: Ian Davis recommends to use Open Data Commons Licenses.

@karlpro question W3C : qui est chargé de refuser une passage en CR qd un standard va à l’encontre d’un autre ex : #html5 #wcag2 #longdesc

La réponse n’est pas tout à fait qui, mais comment. Petit rappel : La phase Candidate Recommendation est le moment où un groupe de travail annonce au monde que la spécification est suffisamment mature pour tester sur les implémentations. Il est possible de sortir de cette phase en démontrant que le groupe a réussi à obtenir deux implémentations interopérables de chaque « feature. » Nous nous entendons que « feature » est un terme vague. D’autre part même en ayant une double implémentation interopérable des features individuels sur trois produits, cela ne veut pas nécessairement dire que les implémentations sont interopérables.

Chaque groupe de travail possède une charte définissant les règles de fonctionnement du groupe. La charte du groupe HTML définit les dépendances entre HTML et les autres groupes. On peut remarquer que Web Content Accessibility Guidelines Working Group (WCAG WG) fait partie des liaisons.

Lorsqu’il y a conflit entre deux spécifications, les groupes sont chargés de résoudre ce conflit. Cela peut se faire amicalement par discussions et échange d’arguments structurés. Le débat peut être généralement amélioré par la voie des implémentations concrètes dans des produits répandus. Généralement, le critère de l’implémentation est relativement fort face au raisonnement théorique, même si la solution est inférieure, une forme de « reality check. »

Les recours extrêmes sont les objections formelles. Celles ci devraient être utilisées uniquement en dernier recours lorsque toutes les autres avenues de discussion ont été épuisées. La décision sur une objection formelle est en dernier lieu tranchée par le directeur.

Dans le cas de WCAG et HTML5, l’enjeu est difficile à résoudre. Il y a de nombreuses dimensions. Éliminons tout de suite de la discussion, la pertinence de longdesc, c’est à dire donner plus d’information à propos d’un élément sous la forme d’un document individuel. Ce qu’il faudrait regarder est l’état de l’implémentation dans les différentes classes de produits pour ce feature déployé depuis très longtemps :

• Dans les éditeurs HTML, quels sont les scénarios d’édition de longdesc ?
• Dans les CMS, quels sont les scénarios d’édition de longdesc ?
• Existe-t-il des moteurs de recherche permettant l’indexation de longdesc d’une façon qui respecte sa définition initiale ?
• Existe-t-il des outils d’assistance en lecture prenant partie de longdesc ?

Une recherche sérieuse sur le sujet permettrait en partie de faire pencher dans un sens ou l’autre la résolution du conflit.

When I was looking at the Canadian landscape for Open data, I was wondering about Montréal Open Data. Since Montréal Ouvert has opened with a clear mission.

We are a citizen initiative that promotes open access to civic information for the region of Montreal.

We believe open access to civic information and data increases civic engagement, makes services more accessible, and creates opportunities for innovation.

Through this space we hope to initiate and sustain a productive dialogue on open access between stakeholders for the benefit of all Montréalers. Join the conversation!

Disclaimer: Most of the information here is based on reverse engineering the html source code of these sites, and then should not be considered stable. Add on top of that, that it is not documented.

STM

The STM (Montréal Bus Company) went a long way for making their data available in Google Maps. That is quite cool. It gives the users the possibility to find their route in Google Maps. It would be even better if they published their data under a structured format (xml, json, or rdf).

So far, there are HTML pages for bus stops list for a line (ex: 69)

http://www.stm.info/bus/geomet/geo69.htm

Each bus stop has a unique id such as 50150. which gives the schedule for the line at this bus stop. Unfortunately in a pre-formated format, which makes it pretty useless even for html scraping.

http://www2.stm.info/taz/horaire.php?l=69&d=E&t=50150

The use of parameters show that it is very likely that it is just a question of creating the right template, which would be easy to fix.

AMT

AMT (local commuting trains) gives the list of schedules in a large html table. The values of the form for options are not straightforward and using obscure ids. I’m also still wondering why the form is using an HTTP POST instead of a GET but this blog post is not about HTTP. ;) We get a URI of this type for the default schedule.

http://www.amt.qc.ca/train/blainville-st-jerome/horaires.aspx

These data will be more difficult to parse from the HTML, still possible.

Bixi

Bixi is publishing a map of their dock stations. Let’s open Firebug and see what is happening on the wire. We can discover the following URI.

https://profil.bixi.ca/data/bikeStations.xml

The stations are described following this pattern

<stations>
    <station>
        <id>1</id>
        <name>Notre Dame / Place Jacques Cartier</name>
        <terminalName>6001</terminalName>
        <lat>45.508183</lat>
        <long>-73.554094</long>
        <installed>true</installed>
        <locked>false</locked>
        <installDate>1276012920000</installDate>
        <removalDate/>
        <temporary>false</temporary>
        <nbBikes>1</nbBikes>
        <nbEmptyDocks>30</nbEmptyDocks>
    </station>
…
</stations>

Via Rail

Via Rail, the canadian railway company,

Station Code List

Looking at the javascript, it is quite easy to find out the list of train stations with a JSON format. There is no global list, but if you query for example with ‘M’:

http://reservia.viarail.ca/GetStations.aspx?q=M

Note: Be careful, the return mime-type is incorrect Content-Type text/html; charset=iso-8859-1

you get something like this

[{"sc":"MLCH","sn":"MALACHI","pv":"ON","dEn":"MALACHI"},
 {"sc":"MLHT","sn":"MALAHAT","pv":"BC","dEn":"MALAHAT"},
 {"sc":"MWWC","sn":"MANIWAWA CLUB","pv":"QC","dEn":"MANIWAWA CLUB"},
 …
 {"sc":"MTRL","sn":"MONTRÉAL","pv":"QC","dEn":"MONTRÉAL"  },
 …
 ]

We can guess that

• sc = station code
• sn = station name
• pv = province
• dEn = I suspect the English spelling of a city, but I’m not sure.

Information about the stations

When searching for a train schedule, we get a list of possible departures. The train station name is a link to a URI which looks like this for Montréal

http://www.viarail.ca/cgi-bin/genericXSLT?xml=MTRL.xml&xsl=en_station.xsl

We can notice the same code for MTRL.xml. and en_station.xsl, the data in XML and an XSLT stylesheet for modifying the xml data. Unfortunately it is not possible to access the XML data. It would be still possible to create an html scraper for getting out the data without too much hurdles. But it would be definitely nicer to get the data under a structured format.

Schedules

The schedules are accessible for each train line in an html table and would also benefit to be available through a more documented format.

http://www.viarail.ca/fr/trains/quebec-et-ontario/montreal-toronto/horaires

Conclusion

Except for Bixi data, not many Montreal transportation data are available under a form easy to use. We would have to rely on html scrapers for extracting all these data.

What would be the benefits for all these organizations to expose their data with a clear documentation and license?

• Create a richer online data ecosystem
• Make it possible for the brand to live outside of its own domain name property (Creative Commons gives the license BY, i.e. Attribution)
• Give the opportunity of richer visualization of these data.
• Give the opportunity for people to develop commercial (or not) applications helping/driving users to order tickets or use more the service.

Often budgets in these organizations are limited. Giving the possibility for geeks and other businesses to build on top of these data increases the chances of revenues for these organizations. It maximizes the online surface of these services.

No doubt that Montreal Ouvert will achieve this endeavor.

So far, from Pheromone André Bélanger, Arnaud Blaszkowsky, Daniel Desrosiers, Karl Dubost, Jean-François Dumas, Rémy Giard, Benoit Goyette, Chrystian Guy, Céline Seeman, Sabine Séguin, Olivier Théreaux have published an article on the lab. But this conversation would not exist without the comments, people interacting with the content and having their own ideas about what is said here.

I have always encouraged a system where there is no distinction between comments and blog posts. In April 2006, I was proposing a system (French) that would get rid of comments altogether. Basically, everyone should have a space for publishing content and this is an aggregating system (ala Usenet) which would recreate the thread of the discussions across blogs. Google tried a bit with Google Buzz and Google Wave (Google killed Wave last week.). These systems even if they claim to be decentralized tried to recreate a new system more than building on top of existing systems. To gain traction, we have to put the decentralization of the discussions into WordPress, MovableType, Adium, MSN, Yahoo! Messenger, Flickr of this world to develop specific modules that will help leverage the existing infrastructure.

Initiatives behing Salmon protocol are very encouraging. StatusNet has implemented it. We need to see it implemented in more places.

Distributed implementations are key to the decentralization.

In the mean time, small steps strategy, we decided to put the comments on the home page at the same level than blog posts. Every comment is part of the discussion. If people take times to write something compelling on this blog, then should be given the same space than people working here.

1. bike stations with free docks (can you park?)
2. available bikes in each station (can you get a bike?)

for Montréal, Canada.

We like to experiment stuff and play with tools available around us. Most of the time, someone (a developer, someone in bizdev, etc) will get an idea or have a need, and ask Could we do that? Many of us at Pheromone are users of Bixi, the Montreal shared bike system. Sometimes, it is frustrating to reach a station to find out that everything is taken. Where are the closest stations around and in which directions. Bixar does just that. It creates a 3D overview of the position of bike stations and gives information about their vacancy status.

Jon Masse has developed the application using Layar and finally has ported his work on wikitude in 2 hours. Florin Gabor has created the logo, without forgetting the feedback and help of Olivier Théreaux, Sophie Leroy et Philippe Le Roux.

How to use layar on your phone?

For using layar on your phone you need to download the layar application, then you will be able to access a list of augmented reality layers.

How to use Wikitude on your phone?

For using wikitude on your phone you need to download the wikitude application, then you will be able to access a list of augmented reality layers.

Universal platforms

There are benefits to develop for open technologies and not be tied to proprietary technologies. The same way, we love opensource tools and open web standards, we are really looking forward to have an augmented reality format and apps that we could develop once and deploy everywhere.

1. les stations de vélos avec des places libres (puis-je me garer ?)
2. les vélos disponibles à chaque station (puis-je obtenir un vélo ?)

pour Montréal, Canada.

Nous aimons expérimenter et jouer avec les outils autour de nous. La plupart du temps, quelqu’un (un développeur, une personne aux développements des affaires, etc.) aura une idée ou un besoin, et demandera Pourrions nous le faire ? Nombre d’entre-nous à Pheromone sont des utilisateurs de Bixi, le système de partage de vélo de Montréal. Parfois, il est frustrant d’atteindre une station et de réaliser que toutes les places sont déjà prises. Où sont les stations les plus proches et dans quelles directions. Bixar répond justement à ce besoin. Il donne une vue 3D de la position des stations de vélos et donne de l’information sur le statut des places disponibles.

Jon Masse a développé l’application en utilisant Layar et puis finalement a porté son travail sur wikitude en 2 heures. Florin Gabor a créé le logo sans oublier les commentaires et revues de Olivier Théreaux, Sophie Leroy et Philippe Le Roux.

Comment utiliser Layar sur son téléphone?

Pour utiliser layar sur votre téléphone, vous devez télécharger l’application layar. Ensuite vous aurez la possibilité d’accéder une liste de calques de réalité augmentée.

Comment utiliser Wikitude sur son téléphone?

Pour utiliser wikitude sur votre téléphone, vous devez télécharger l’application wikitude. Ensuite vous aurez la possibilité d’accéder une liste de calques de réalité augmentée.

plate-formes universelles

Il y a des bénéfices à développer pour les technologies ouvertes et de ne pas être piégées par les technologies propriétaires. De la même façon que nous aimons les outils opensource et les normes Web ouvertes, nous attendons avec impatience un format et des apps pour la réalité augmentée où nous pourrions développer une fois et déployer partout.

Open Data and Licenses

To really promote open data, it is necessary to use the appropriate licence. Glen Newton looked at the licenses of different data sets published by canadian cities. The terms of the licenses are too restrictive. It is important to ensure that people will be able to use the data freely. There are many ways of achieving that. One of them is using creative commons licenses. It enables people to reuse the data in many circumstances keeping the attribution credits.

Open Data in Canada

What about Canada? Not that bad. Many initiatives push in the right direction. Governments (federal and local), cities as well as civic organizations are publishing data. Often the licenses are not the right ones, but that can be fixed.

• Info Source Canada Gov
• Open Data Edmonton
• Open Data Nanaimo
• Open Data Ottawa See also Ottawa Data – open data ottawa blog – opendata apps directory
• Open Data Toronto
• Open Data Vancouver
• Open Data Links Canada
• Open Ottawa (Civic Organization)
• Canadian Gov data by citizens
• CivicAccess

Montréal ?

And Montréal. There are whispers of interests. But I do not know of any concrete initiatives yet. Have you heard something? How do we encourage Montreal city to share the data?

Montréal has data, a lot of data. The access could be improved (RESTful API, data format) and licenses clarified.

Update 2010-08-09 : See the comment. Montreal Ouvert (Open Montreal) has opened a Web site. That is an excellent news.

The Story

Nicole Sullivan (@stubbornella) recently outlined the Top 5 Mistakes of Massive CSS. After a survey, Nicolle Sullivan found out that

• 42% Don’t GZIP CSS
• 44% Have more than 2 CSS external files
• 56% Serve CSS with cookies (yummy to eat, bad for static content)
• 62% Don’t minify (check out the YUI Compressor!)
• 21% Have greater than 100K of CSS

We then decided to create a service that would help Web developers fix these 5 items only. We believe in small steps.

Service and Source Code

The code is under MIT License. You are welcome to use, fork, improve, twist it. The service is online (bugs included). Any contributions to create a CSS and a design for it would be more than welcome. Do not shoot the messenger and make it better.

Banal sur le principe, cet exercice trouve sa singularité si je vous avoue qu’il est pour moi une première en matière de développement Javascript.

Fort d’une bonne demie douzaine d’années d’expertise dans le développement flash et l’utilisation de l’ActionScript, me voilà parachuté dans l’univers prototypale du JavaScript. Univers occulté par la puissance et fléxibilité de l’AS3, j’ai commencé par me procurer l’ouvrage, JavasScript : The Good Parts des éditions O’REILLY, puis décortiquer les scripts de la référence en matière de dhtml : www.dhteumeuleu.com. Remise à niveau au combien salutaire.

Ma crainte majeure, dans l’optique de l’animation, fut de disposer de l’indépendance que l’on trouve avec les MovieClip et l’ActionScript pour les balises html. Crainte très vite estompée par l’application appropriée de css.

La logique est identique à celle d’un développement flash (requête Twitter, manipulation des données, routine propre à l’application, ect …), les animations utilisent Javascript Motion Tween de Philippe Maegerman ainsi que la librairie JQuery, les css font le reste.

Il est donc facile de conclure ce billet par une note favorable, dire que le développement Javascript est accessible aux flasheurs semble un euphémisme.

Je prépare un prochain billet sur quelques travaux avec la librairie Raphael.js
Au plaisir de vous lire .

Notice anything unusual? What fascinates me is how the top third of the page mentioned locations in no less than three countries. How? Why?

Near the top-left of the page, I can see an icon depicting a Canadian flag, along with a link to the Canada-specific Yahoo! portal. What this means is that the Yahoo! system knows that I am browsing from Canada (I have been, therefore, geolocated). If you view the site from another country, chances are you will be getting a different flag and a different link. And if you view it from Spain? I do not know. When I do follow the hyperlink to Yahoo! Canada, I get a similar link to Yahoo! Quebec, and when I go to Yahoo! Quebec, I get a link to Yahoo! Canada.

Interestingly enough, one of the most common elements of personalised user experience is missing here: language selection. There is no way I can read the news from Spain in English – or indeed, in Català or Gallego. Neither do I get a « Français » link on Yahoo! Canada, or « English » on Yahoo! Quebec.

Knowing where I am, the system could assume I necessarily want to view local content in my local language and therefore redirect me to the Canadian/English portal. Fortunately, it does not, and lets me browse news from Spain as much as I like, and limits the effect of geolocation to a subtle but clear hint that local content is also available.

How do they do it? Most likely, the IP address of the machine I used to access the site was compared against a GeoIP database such as this one or that one. Note that, unlike in many mobile applications, the IP-to-location translation is done automatically, without ever prompting the user for her agreement.

Next in our exploration of the personalisation elements is the page-wide bar of text links, calls for action and teaser questions serving a single purpose: convert the visitor into a user, either by registering, or by logging into an existing account.

Notice how the bar employs about about every trick know to web designers to entice us to log in: give regular users a quick link to their well-known personal space; showcase some of the added value gained through registration (preview of my inbox, directly in my news portal); comfort the potentially puzzled new visitor (New here?) and tease the social fiber (What are you doing? – obviously a go at copying the now-abandoned twitter tagline?).

The most surprising element comes last. How come, given that I am not logged into Yahoo!’s system, I am shown a weather widget for the city of Tokyo, Japan? I could have understood if it were Madrid (local to the portal, with an educated guess about which city I may be interested in) or Montréal (through geolocation) – but Why Tokyo? And how?

How do they do it? I quickly validated my initial hunch: Yahoo achieved this through the use of cookies – although other client storage options such as the localstorage in html5 would have been just as valid. My problem here, however, is that:

• The cookies are opaque – even with a cookie browser (most browsers with developer extension offers one) I would hardly be able to know which cookie was telling Yahoo! thay my preferred location was Tokyo. I had to delete cookies, one by one, until the weather widget changed to a geolocated default of Montreal.
• I cannot tell how and when this cookie was set in my system. Sure, I could set my browser to have me validate any cookie sites want to store, but given how cookies are entirely opaque, how would I know the meaning and consequences of allowing Yahoo (of flickr, or any site in the Yahoo ecosystem) to store a cookie that sets key T to …CAuNRMqKiCOsvekk….

And there’s more… All these modes of personalisation have been enabled without me even logging into the system. Imagine the many personalised features that can be implemented for recurrent, identified users: social filtering (content that my friends like, for instance), content adapted to my choices or patterns of use (recommendations for you), and much more. Has any content-heavy site ever tried to recommend their users items that they are unlikely to « like », or at least that they are likely to be surprised or challenged by?

You love the Web? & you want to take over my job. Be the Dev Director at @AgencePheromone http://bit.ly/dtl7Pd #job #montreal

Juste après Jonathan Bélisle a réagi en posant une bonne question que l’annonce ne donne pas.

What are the challenges / innovation opportunities ?

Clarification : Je ne quitte pas Phéromone. Mon rôle évolue pour travailler en coopération avec Olivier Théreaux sur le pôle technologique des projets en amont de la réalisation.

J’ai commencé chez Pheromone en mars 2009 avec comme objectif de créer une dynamique d’équipe entre les développeurs. Comme toute agence riche en relations humaines, les interactions font évoluer la mission initiale. Gérer une équipe de 20/25 personnes est difficile à réaliser en même temps que de définir la vision technologique de l’entreprise. Je préfère me concentrer sur la seconde partie où j’ai plus de plaisir que la gestion. L’équipe de développement se structure en petits équipes, mais cela pourrait être appelé à évoluer en fonction de la personne recrutée. Les technologies qui sont utilisées chez Pheromone sont PHP, Ruby et C++. Le C++ fait partie de systèmes développés pour nos anciens projets. Nous ne faisons plus de nouveaux développements en C++, sauf pour améliorer les anciens programmes toujours utilisés dans le cadre des enjeux de performance.

Les performances sont un des enjeux majeurs pour deux de nos clients : ViaRail et RDS (site RDS et Grand Club). Ces deux sites Web sont extrêmement populaires avec des pics de trafic immenses mettant à rude épreuve l’architecture technologique logicielle et Web. Parfois une décision UX peut avoir un impact énorme sur la performance du site. Comprendre les enjeux de développement pour être le relai des enjeux des développeurs est alors important. Une excellente connaissance de l’architecture Web permet d’orienter les développeurs à travers les enjeux de cache, de proxys, les défauts des implémentations.

L’accessibilité Web est une partie intégrante de plus en plus de projets Web que nous réalisons. Elle est un requis pour certains clients. Elle est essentielle dans les stratégies d’accès multi-plateformes.

Olivier en coopération avec le reste de l’équipe a initié un virage de l’agence vers le mobile. Cela ne veut pas dire que nous réalisons des applications seulement sur Mobile mais des applications qui sont utilisables sur Mobile en même temps que Desktop. Cela a des conséquences pour les types de technologies qu’un développeur doit posséder dans son bagage. HTML5 (toujours en cours de développement) et CSS deviennent des parties fondamentales de cette orientation.

L’open Source est une pierre angulaire des systèmes avec lesquels nous travaillons que ce soit Ruby On Rails pour le Grand Club, Elgg pour le Fil, PhoneGap pour les applications mobile, etc. Nous poussons aussi dans nos projet l’open data, mais j’en parlerai plus longuement prochainement.

Bien sûr s’il y a des questions plus précises, j’y répondrais.

Linked Data is part of the process of publishing data in a way that it will be useful for anyone else. It is all about creating awesome stuff. Often, the task seems daunting for organizations or individuals, when it is just a question of baby steps. In the Linked Data page, there are 5 steps for starting publishing data in a way that would be useful for everyone else.

• ★     make your stuff available on the web (whatever format)
• ★★    make it available as structured data (e.g. excel instead of image scan of a table)
• ★★★   non-proprietary format (e.g. csv instead of excel)
• ★★★★  use URLs to identify things, so that people can point at your stuff
• ★★★★★ link your data to other people’s data to provide context

One of the big benefits of digital assets is that the cost of putting online data and modifying them is lower than in the material world (an online phonebook can be updated in real time and then evolve). One of the big benefits of Linked Data is URIs for piece of data or concepts on this data. Extensibility comes for free because data are expressed with a graph (not like relational databases).

Small steps are cool and full of awesome. Sharing gives you plenty of love.

L’audit approfondi est une étape fréquente dans la démarche d’amélioration de l’accessibilité d’un site. Une telle démarche débute fréquemment par la recherche d’un état des lieux. Hélas, la production d’un rapport d’audit approfondi de l’accessibilité prend du temps et coûte de l’argent. Dans certains cas, cette approche se justifie parfaitement, mais dans d’autres que nous aborderons dans cet article, ce n’est pas toujours la meilleure solution. Il est peut-être temps d’inventer de nouvelles méthodes pour améliorer l’accessibilité des sites Internet.

L’accessibilité peut éventuellement se traiter en bout de chaîne du processus sur un site simple, mais malheureusement bien trop souvent c’est trop tard. Développer un site Web accessible peut demander des modifications du choix du CMS, définir des choix de design particulier et des expériences UX particulières. L’article de Elie s’inscrit dans le domaine plus large de la compréhension du Web. Il y a, au moins, deux enjeux principaux pour les agences Web à résoudre :

• L’éducation du client sur les enjeux du Web
• L’éducation de l’équipe de conception/UX (création) du site.

L’équipe de développement a rarement le contrôle sur cette partie du site, si ce n’est d’implémenter les choix des concepteurs du site. Si les concepts sont corrects du point de vue de l’architecture Web, de la stratégie de contenu, de l’accessibilité, de la diversité des plateformes, le développeur aura moins d’enjeux pour trouver les solutions adéquates. C’est trop rarement le cas.

Une de mes grandes réalisations cette année est que toute évangélisation à propos du Web est vaine si elle ne prend pas en considération les décideurs d’affaires ainsi que les départements créatifs.

disclaimers

Note 1 : je participe comme rédacteur à l’équipe de OpenWeb et j’ai publié un article sur RDFa.

Note 2 : Pheromone a commandé un rapport d’accessibilité pour un client à la société Temesis de Elie Sloïm.

J’ai eu la chance de travailler avec Marc-Aurèle depuis octobre 2008 en tant que son chef d’équipe.

Mon premier entretien avec Marc-Aurèle s’agissait d’une entrevue pour le poste en administration des systèmes chez Phéromone.

Dès la première rencontre, j’ai noté que Marc-Aurèle apporterait beaucoup à notre équipe.  Il était très talentueux et les connaissances qu’il avait cumulées étaient fort impressionnantes pour un jeune de 24 ans.
Marc-Aurèle était apprécié par tous les employé(e)s.  Dans son travail, il devait souvent interagir avec les autres pour leur apporter du support technique, mais aussi du support moral dans certains cas.  Il aimait son travail et le faisait bien.

Lorsque la maladie s’est accaparée de lui, Marc-Aurèle a fait rayonner des qualités supplémentaires fortes impressionnantes;  Après une longue et dure convalescence, il est revenu travailler avec nous et  nous avons tous témoigné sa persévérance son courage et son désir de vivre.  Il est resté positif tout au long de sa bataille.

Voici quelques anecdotes que nous voulons partager avec vous en mémoire de Marc-Aurèle :

• Lors la fête de Noël du bureau, nous avons effectué un gala Phérostar afin de remettre des prix amusant à certains employé(e)s.  Marc-Aurèle a reçu le prix du « Pirate de l’année » et je crois que ce soir là, il a vraiment senti l’appui et le support chaleureux que tous ses collègues avaient pour lui.  On peut percevoir Marc-Aurèle recevant le trophé sur la photo suivante:

• Yves m’a raconté que lorsque Marc-Aurèle faisait de la physiothérapie, il travaillait surtout à renfoncer son bras droit qui était plus fort étant donné que son côté gauche l’était moins.  Cela lui a servi un jour lorsqu’il a manqué d’équilibre dans la cuisine : Il a pu prévenir sa chute en s’agrippant sur le comptoir avec son bras droite.  Ça été fort impressionnant et c’est remarquable comment Marc-Aurèle se connaissait bien.

• Lors d’un entretien avec un collègue (Chrystian), Marc-Aurèle lui a confié comment il était heureux; il a fait une steppette avec sa canne et a dit avec un sourire: « Check mon cguy, t’es pas capable d’en faire une pareille! » et mon collègue lui a répondu en boutade: « Non Marc-Aurèle, il y a bien des affaires que je ne suis pas capable de faire comme toi… »

• Nous avons confié plusieurs projets à Marc-Aurèle pour lesquels il n’avait qu’une seule main et qu’un œil pour les exécuter.  L’un d’entre eux nécessitait de saisir plus de 500 courriels dans un système de liste de distributions.  Nous ne nous attendions pas à ce qu’il fasse la saisie des données, mais à notre grande surprise, il l’a fait sans même nous demander de l’aide.  Malgré sa maladie, Marc-Aurèle était très lucide et je sais qu’il faisait des efforts pour se surpasser quand il était parmi nous.

Merci à ses parents, son frère Alexandre, sa conjointe Sophie et tous les autres qui l’ont accompagnés dans ses moments difficiles.  Marc-Aurèle est et sera à tout jamais une source d’inspiration pour nous tous.  Nous sommes reconnaissants d’avoir partagé une partie de sa vie avec lui.

The web is not print, however, and the embedding of nice typography seems to come with a few other issues: the first few site prototypes on which we worked with @font-face tended to be plagued with performance problems – a really big deal in our case, given that we manage high-traffic sites. The User experience of the pages we had tested was sub-par: slow loading times, blocks of text “jumping” after the actual font gets loaded, etc.

And yet, webfont services are popping like mushrooms and seem rather popular. I decided to give four of them a look, to see how good – and how fast – their service was.

My test page, based on fontsquirrel’s webfont comparison page loads the fonts from the 4 providers (unfortunately, fontdeck does not seem to offer the Cantarell fount, a common denominator between all other three services, hence the difference). The rest of my testing consists mostly of analysis of speed, HTTP headers and other tinkering through firebug.

Google Font Directory

Google’s webfont solution is « view source » friendly: one can copy-paste from another site and get the fonts working immediately. Their offering is still rather limited, but their site is no-nonsense, immediately usable, and does not require any signup, payment – indeed all the fonts provided are Open Source (distributed under Open Font License).

Google’s service is also pretty good with caching – their servers appropriately respond with a 304 not modified open a request, and they send proper Expires: and Last-Modified: HTTP Headers.

Font Deck

Setup with Fontdeck is relatively easy: one needs to register on their site, choose a few fonts, and get a piece of HTML and CSS code to use. While I ran into a silly UX issue and couldn’t find the code samples at some points (a case of bad whitespace and beyond-the-fold design), using the font deck web site is rather pleasant.

However, after setting up my test page by following all their instructions, I never managed to get the fonts to appear: the URIs given to me in the sample systematically resulted in “403 forbidden” responses. I could not test the performance of this solution yet.

Font squirrel

Font Squirrel is clearly different from the rest. Similar to the many foundry catalogs available for designers, it includes a really simple wizard to create a font-face kit from any (downloaded) font. Very geek friendly. This is also the only service that caters to site admins who want to host their fonts themselves, and it does not provide a hosted font-face service.

Typekit

One of the first service of the genre, Typekit also requires you to register yourself and your site. Javascript-based. Really similar to font-deck (which I believe it predates), Typekit will let you browse fonts for your site, and will provide a javascript snippet to add to pages to embed the fonts.

However, after setting up my test page by following all their instructions, I had trouble getting the fonts to appear: the URIs given to me in the sample systematically resulted in a “404 Not Found” response. It took me a while to understand (DOH!) that I had to choose fonts, add them to my site’s collection THEN publish in order for the system to work. My bad, their UX is really decent and I should really have understood this faster.

This solution is actually quite nice, as it allows me to choose which weight and style I want to include in my kit – which can be a big win for file weight, and thus performance.

Caching-wise, Typekit also behaves nicely, with the same combination of “304 Not Modified” response, Expires: and Cache-Control: HTTP Headers seen in Google’s service.

Their caching policy is much less aggressive than Google’s, however: while Google sends a cache directive for 14 days (Cache-Control: private, max-age=1209600), Typekit sends one for 300 seconds. I assume the reason for this difference is that with Google, you link to each individual font (which change very rarely), while with Typekit you link to your kit, which you may tinker with a lot. In any case, a cache policy of 300 seconds (5 minutes) is rather likely to cover the average visit, so this short timeout should hopefully not have too much of an impact on your visitor’s experience.

One thing I’m not a big fan of: the script Typekit gives you doesn’t just lets you embed fonts, it also adds a little Typekit logo on all your pages. Not cool. I assume that paid customers don’t get the pesky logo, but regardless, if a service is going to advertise itself on my site, I’d like to know in advance…

Anything Else?

Any other service you would like to see tested here? Any other indicator of performance or cost-effectiveness you would like to see in the table? Tell us in the comments and we’ll try to keep this page up to date.

Vous pouvez pourtant créer des groupes intelligents en fonction de catégories précises du carnet d’adresses (la société, le nom, les pays, etc.)

Les fiches contiennent une section libre appelée Remarques. Dans cette section, vous pouvez entrer du texte. Imaginez que vous réserviez cette section pour des mots clés. Par exemple, nous avons Paul Dupont et John Smith, deux développeurs dans notre carnet d’adresses, l’un développe en ruby mais les deux développent en python.

Je crée un filtre qui sélectionne toutes les fiches dont le champs remarques contient le mot clé python.

Une fois le filtre créé un nouveau groupe intelligent « python » apparaît dans la colonne de gauche et permet de retrouver les personnes facilement.

Mieux que cela dans Mail.app, vous pouvez maintenant, taper python et vous obtiendrez automatiquement la liste des personnes qui font du python. Vous pouvez ainsi gérer de nombreux mots clés, le service commercial, les compétences technologiques, les clients sur lesquels les personnes travaillent, etc. Attention cependant à votre nomenclature pour être sûr d’avoir les bonnes personnes dans la liste d’envoi.

I got a pickle of a problem the other day with group memberships, turns out, everytime a member was leaving a group, it would take several seconds for the action to complete. Good thing, we have a NewRelic Gold membership, and with it’s transaction traces, we were able to pin it down to a specifc method.

Each user has a page that lists the groups the user belongs to, and each group entry displays the number of members in the group. Of course these pages are cached and in the act of leaving or joining the group, the cached pages where deleted. When there are a lot of members in a group, it can take several seconds to delete the cache of each member pages, which is overall a bad user experience.

To solve this problem, I had 2 options available. First, have all fragments cached with an expiry time of, say, 1 hour and delete only the acting user’s cache when he’s joining or leaving the group. That is the easy solution. but what’s the fun in that.

The second approach is to delete the acting user’s cache immediatly, but and have Delayed Jobs handle the deletion of the other members’ caches. This is the approach I’ll explain here.

First, I need to declare the sweeper in my controller class

class GroupsMembershipsController < ApplicationController
   ...
   cache_sweeper :groups_memberships_sweeper, :only=>[:create, :update, :destroy]
   ...
end

Then I create the sweeper class which contains the delayed jobs code.

class GroupsMembershipsSweeper < ActionController::Caching::Sweeper
  observe GroupMembership

  def after_update(model)
    expire model  unless self.controller.blank?
  end

  def after_destroy(model)
    expire(model) unless self.controller.blank?
  end

  def after_create(model)
    expire(model) unless self.controller.blank?
  end

  protected
  def expire(model)
    # queueing our cache clearing in delayed jobs
    Delayed::Job.enqueue(DelayedGroupMembersSweeper.new(model.group_id)) unless model.group_id.blank?
    expire_group_membership model
  end

  def expire_group_membership(model)
    #... other stuff  ...
  end

  # The class that will be invoked when Delayed jobs performs it's task
  class DelayedGroupMembersSweeper < Struct.new(:group_id)
     include CacheKeys  # helper module that declares functions for creating caching keys
     def perform
       ac = ApplicationController.new
       members = GroupMembership.all(:conditions=>["group_id = ? and status != 'invited'", group_id])
       members.each do |member|
          ac.expire_fragment get_profils_cache_key('modules_groupes',member.profile_id)
      end
    end
  end

end

There are two important informations here.

1. The queueing of the task we want to perform. When the enqueue function is called, delayed jobs will serialize the class in YAML and store the data in the database to be revived later by the jobs queue process later. I store the group’s ID, and I’ll fetch the members belonging to that group in the actual job.

  def expire(model)
    ...
    Delayed::Job.enqueue(DelayedGroupMembersSweeper.new(model.group_id)) unless model.group_id.blank?
    ...
  end

1. Declaring the class that will perform the task. This class needs to be serializable. inheriting from Struct ensures that it is. Since the code is invoked from a different process, I needed to instantiate the ActionController class for the expire_fragment method to become available. after that, it’s only a question of iterating through all the members in the group and expiring each of their fragments.

  class DelayedGroupMembersSweeper < Struct.new(:group_id)
     include CacheKeys  # helper module that declares functions for creating caching keys
     def perform
       action_controller = ApplicationController.new
       members = GroupMembership.all(:conditions=>["group_id = ? and status != 'invited'", group_id])
       members.each do |member|
          action_controller.expire_fragment get_profiles_cache_key('modules_groupes',member.profile_id)
      end
    end
  end

And there it is, Delaying the clearing of the cache with Delayed Jobs.

Pour commencer, je devais savoir ce qui n’était plus supporté dans la nouvelle version.  L’équipe de développement de Rails a publié un plugin qui permet de détecter ce qui n’est plus supporté.  Toutefois, ils ont aussi construit un plugin pour faciliter la transition qui permet l’utilisation de certaines fonctions non-incluses dans la version 3.  J’ai installé le premier plugin pour connaitre les changements à faire et j’ai ensuite installé le deuxième plugin.  Voici un résumé des changements principaux :

• API de ActiveRecord : http://guides.rails.info/3_0_release_notes.html#active-record
• API de ActionMailer : http://guides.rails.info/3_0_release_notes.html#action-mailer
• API des routes : http://guides.rails.info/3_0_release_notes.html#action-dispatch
• API des générateurs : http://guides.rails.info/3_0_release_notes.html#railties-restrung
• Changements des constantes de Rails.  Exemple : RAILS_ROOT => Rails.root, RAILS_DEFAULT_LOGGER => Rails.logger
• Utilisation de Bundler et d’un Gemfile au lieu de config.gem : http://guides.rails.info/3_0_release_notes.html#railties-restrung
• Plusieurs appels aux helpers ne sont plus disponibles.  Plusieurs sont disponibles en ajouter le plugin prototype_legacy_helper Exemple: link_to_remote : http://guides.rails.info/3_0_release_notes.html#action-view

Comme embûches, j’ai dû mettre à jour ma version installée de Ruby.  Un excellent outil sous Ubuntu facilite l’utilisation de plusieurs version en même temps et c’est « rvm« .  Pour isoler mes tests à la transition vers Rails 3, j’ai préféré Ruby 1.8.7 à 1.9 pour ne pas avoir les problèmes d’encodage possibles dûs à l’utlisation de Ruby 1.9.  J’ai ensuite installé les gem nécessaire à l’application en plus de Rails 3.0.0.beta.  L’ajout de ces gem dans le fichier Gemfile est la nouvelle façon de faire.  J’étais maintenant prêt à migrer l’application.  Voici mes prochaines étapes :

• Construire une application Rails par-dessus l’application existante ce qui a eu pour effet de créer les nouveaux fichiers nécessaires qui n’existait pas encore.  Pour ce, il faut seulement appeler « rails <app> » comme auparavant.
• Créer le fichier « app/controllers/application_controller.rb » qui remplace maintenant « app/controllers/application.rb ».
• Modifier les fichiers d’environnement (environment.rb, development.rb, etc) pour répondre à la nouvelle structure
• Ajuster les routes selon le nouvel API
• Remplacer ou supprimer les plugins de l’application.  Pour will_paginate, j’ai utilisé la branche « rails3 » du répertoire sur github.  J’ai dû enlevé « exception_logger » qui n’est plus supporté
• Depuis la version Rails 2.3.4, il n’est plus possible d’avoir un clé primaire dans les tables de jointure des relations « has_and_belongs_to_many ».  J’ai donc enlevé ces clés pour ne garder que celles de la liaison.  Il suffisait d’ajouter « :id => false » comme option du « create table » de la migration

Pour terminer, la migration d’une application Rails vers Rails 3 est une tâche faisable mais non sans embûche.  Il faut bien se renseigner sur les changements à Rails 3 pour bien identifer ce qui cause le problème.  Tout au long de la migration, j’ai dû effectuer des ajustements ici et là dans les controlleurs et les vues pour suivre les nouvelles façons de faire.  Or, la migration vers Rails 3 n’est pas isolé à seulement un niveau, mais presque partout (controlleurs, routes, vues, dépendances, configuration, etc).  De ce fait, il faut être vigilant et s’assurer de tester tous les chemins possibles.  Ici, si on a créé et maintenu nos tests unitaires et fonctionnels, nous sommes heureux de les avoir sous la main.  Voilà un excellent sujet pour une prochaine publication sur Le Lab …

Liens utiles:

• Ruby on Rails 3.0 Release Notes
• The Path to Rails 3 : Approaching the upgrade