Aidez vos clients à passer à la vitesse supérieure avec FireFox portable !

Il arrive que vos clients n’aient pas la possibilité d’installer des applications sur leur poste car ils n’ont pas les droits nécessaires. Dans ce cas, impossible de mettre à jour un Internet Explorer 6 ou d’installer un navigateur performant comme Firefox, Safari ou encore Opera.

Crédit Photo : Emilie Pistorius (CC)

Il existe peut-être une solution du côté de FireFox en version portable, c’est-à-dire une version « standalone » fonctionnant sur une clef usb.

Vous trouverez une version portable de FireFox sur le site de PortableApps.

Une fois l’application téléchargée, lancer l’installation et indiquer le lecteur et le répertoire sur la clé usb.

Concernant les mise à jour, il faut télécharger la dernière version puis écraser le répertoire comportant l’application, les données seront conservées. Une sauvegarde préalable du répertoire ne coûte rien et peut être utile en cas de problème.

Si vous souhaitez passer par la mise à jour automatique de Firefox, faite une copie de votre profil – PortableFirefox\Data\profil, installer la nouvelle version et puis recopiez votre ancien profil dans la nouvelle installation.

La Foire Aux Questions en anglais est bien faite et répondra à vos interrogations.

Les clefs sont prêtes à être livrées et j’espère qu’il n’y aura pas de problématique de sécurité trop fortes sur le poste cible et que cela fonctionnera. 

Si vous avez des retours d’expériences sur ce sujet, n’hésitez pas à nous en faire part dans les commentaires.

Paris-Web 2010 : appel à orateurs

(english version below)

Bonjour à tous,

Paris Web est une conférence française organisée chaque année autour des questions d’accessibilité, de qualité et de design web. Pour sa cinquième édition, la conférence veut élargir son sujet et vous propose de réfléchir sur la question suivante : « Améliorer l’expérience utilisateur à travers un design et des contenus appropriés » (question non limitative).

Paris Web 2010 se tiendra du 14 au 16 octobre 2010, et nous invitons tous les orateurs potentiels à se manifester par un email à l’adresse propositions@paris-web.fr.

Vous pouvez proposer un ou plusieurs sujets dans les formats suivants :

  1. Conférence : 50 minutes, questions comprises.
  2. Mini-conférence : 15 minutes, sans questions du public.
  3. Atelier : 1 heure 30 (ou 3 heures pour un atelier double).

Les conférences et mini-conférences auront lieu dans les amphithéâtres les jeudi et vendredi. Les ateliers auront lieu dans des salles de 40 à 60 personnes le samedi. Ils sont l’occasion d’une grande interactivité, et peuvent être soit sous une forme théorique, soit sous une forme pratique (le cas échéant, des salles équipées d’ordinateurs seront prévues).

La date limite de dépôt des propositions de contributions est fixée au 31 mai 2010.

Idéalement, merci de présenter votre proposition de la façon suivante :

  1. Vous, en quelques lignes
    Qui êtes-vous ? Quel est votre parcours ? Votre spécialité ?
  2. Votre sujet
    En dix lignes maximum, un titre (qui n’a pas besoin d’être définitif) et un résumé de ce que vous allez traiter. Merci d’indiquer le niveau du public estimé.
  3. La forme de votre intervention
    Selon vous, cette intervention sera-t-elle plutôt une conférence, une mini-conférence, un atelier ? (nous pouvons en rediscuter ensemble)

Les personnes qui ont fait une proposition seront avisées personnellement de la suite donnée, que leur proposition soit retenue ou non.

Si vous êtes retenu, vous aurez la possibilité d’être défrayé pour vos transports et logé à l’hôtel par nos soins. Pour rappel, vous serez filmé et les vidéos seront mises à disposition gratuitement sur internet (sous licence CC-By-NC).

Vivement octobre !


Hello all,

Paris Web is a French conference organised each year and revolving around questions of web accessibility, quality and design. For its fifth edition, the conference wants to broaden its subject base and suggests that you think of this question: “Improve the user experience through appropriate design and contents” (non-limiting question).

Paris Web 2010 will take place on the 14-16th of October 2010, and we invite all the potential speakers to speak out and get in touch with us at propositions@paris-web.fr.

You can submit one or more topics under the following formats:

  1. Conference:  50 minutes, Q&A included
  2. Mini-conference: 15 minutes, without Q&A
  3. Workshop: 1 hour 30 (or 3 hours for a double-length workshop)

Conferences and mini-conferences will take place in amphitheaters on Thursday and Friday. Workshops will take place in 40 to 60 people rooms on Saturday. They are a moment of intense interactivity, and can be either theoretical or practical (rooms with computers will be provided if necessary).

The deadline for proposals is set to the 31st of May 2010.

Ideally, here is the form your proposal should have:

  1. You, in a few lines
    Who are you? What is your experience? Your specialty?
  2. Your subject
    In up to ten lines, a title (doesn’t need to be the definitive choice) and a summary of what you wish to deal with. Please indicate the estimated level of the audience.
  3. The form of your intervention
    According to you, will this be better suited for a conference, a mini-conference, or a workshop? (We can talk about it.)

People who have submitted a subject will be notified personally, whether their subject is selected or not.

If you are selected, you will be able to have your travel expenses and hotel paid. Please bear in mind that videos will be recorded and will be made available for free on the internet (under the CC-By-NC licence).

We can’t wait for October!

Organisation des pôles Front-End

Un excellent article intitulé « Dégage, Sale programmeur » chez Codingly fait état du programmeur aujourd’hui en france.

Au-delà de ce constat, j’aimerais rebondir sur la question de l’organisation des équipes Front-End dans les entreprises. Les développeurs Back-End n’ont pas subi de changements majeurs dans leur organisation qui existe depuis nombreuses années dans les sociétés de services informatiques. Le passage vers les technologies web s’est faite naturellement avec par exemple la naissance de langages comme JAVA, facile à manipuler pour les développeurs C++, afin de produire des applications web.

Je pense que l’on peut établir la structure suivante :

  • Développeur
  • Analyste
  • Architecte
  • Expert technique
  • Chef de projet technique
  • Directeur de projet technique
  • Directeur de pôle technique

Cette structure varie en fonction de la taille de l’entreprise et me semble appropriée.

Du côté du Front-End, c’est complètement différent, peut-être parce que la culture est encore jeune, une quinzaine d’années tout au plus. Par ailleurs, la notion de programmation est très récente car on parle depuis peu de développeur Front-End au lieu de « monteur » ou d »‘intégrateur ». En effet, l’implémentation de Javascript semblait réservée aux dev. Back-end comme le définit le Portail des métiers du Web pourtant je vois que de plus en plus d’intégrateurs qui aiment ouvrir leurs compétences sur l’utilisation de ce langage de programmation.

Le métier a largement évolué et la programmation a sa place dans le profil du développeur Front-end avec l’utilisation massive d’Ajax et des connaissances qui sont nécessaires à son utilisation. Je pense en particulier à HTML / CSS / XML / Accessibilité mais également à Javascript / JSON, HTTP et les notions de performances qui font que votre application est utilisable. Il me semble que l’implémentation de Javascript a tout à fait sa place dans les compétences du dev. Front-End.

Nous sommes de plus en plus confrontés à des sites web qui sont de véritables applicatifs, comme par exemple Netvibes pour ne citer qu’eux, et qui nécessitent une organisation sur le même mode que les développeurs Back-end.

Je vous encourage vivement à vous positionner en tant que tel sur vos CV et à motiver cette idée dans vos structures. Comme le disait Stéphane, lors de sa conférence à Paris-Web 2009, « Intégrateurs, montez au Front« , communiquez et répétez sur l’évolution de notre métier. Nous avons besoin d’experts pour intervenir en amont des projets pour établir et corriger la faisabilité des projets. Nous avons besoin d’architectes et de chefs de projet technique pour spécifier et s’interfacer avec les équipes fonctionnelles et les développeurs Back-End.

Bien débuter le développement Front-End

Le développement Front-Office ou Front-End (en opposition au Back-Office ou Back-End) concerne les technologies qui vous sont nécessaire pour nécessaire pour construire une ou plusieurs pages web.

On retrouve des protocoles comme par exemples HTTP, des langages de script comme HTML ou CSS ou encore des langages de programmation comme Javascript. La plupart des ces ressources sont en anglais, certaines sont traduites en français.

Je vous recommande d’abord la base sous forme d’un guide de démarrage sur HTML écrit par David Ragett : http://www.w3.org/MarkUp/Guide/ et celui de Normand Lamoureux : http://normandlamoureux.com/cours/xhtml/page-002.html pour les francophones.

Les documents officiels

Voici une liste non exhaustive des ressources que vous devez consulter pour appréhender le développement Front-Office :

Lire ces document prend du temps, ils sont souvent longs, touffus mais ils ont le mérite d’être assez clair. Je ne les connais pas personnellement par coeur mais j’ai dans un coin de mon bureau, un dossier qui me permet d’atteindre ces références rapidement. Je vous conseillerais de commencer par regarder les sommaires afin d’avoir une impression générale et de pouvoir recherche plus rapidement une information par la suite.

De bonnes lectures

Il existe également des ressources qui donnent des exemples concrets d’implémentations, par chance il en existe de très bonnes dans le monde francophone, je vous laisse découvrir par vous même ces sites, la curiosité vient en complément de vos lecture !

De bons outils

Maintenant que nous savons ce que nous devons utiliser voici de bons outils pour les implémenter et les afficher :

Et bien évidemment les conférence Paris-Web : http://www.paris-web.fr/ qui permettent de baigner dans les discussions autour de ces technos.

Gérer des cookies avec Javascript

J’utilise depuis longtemps un script de Scott Edwards avec une petite adaptation, pour le rendre privé, pour gérer des cookies, c’est extrêmement simple :


/*
* @name cookie
* @createCookie (method) static
* @readCookie (method) static
* @deleteCookie (method) static
* @param sName (string) Cookie variable name
* @param sValue (string) Cookie variable value
* @param iDays (integer) Cookie duration in days; empty is for session
*/

(cookie = function (){

//Based on Scott Andrew script
this.createCookie = function createCookie(sName,sValue,iDays) {
if (sDays) {
var dDate = new Date();
dDate.setTime(dDate.getTime()+(iDays*24*60*60*1000));
var sExpires = "; expires="+date.toGMTString();
}
else var sExpires = "";
document.cookie = sName+"="+sValue+sExpires+"; path=/";
}; //createCookie

this.readCookie = function readCookie(sName) {
var nameEQ = sName + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}; //readCookie

this.deleteCookie = function deleteCookie(sName){
dDate = new Date;
dDate.setFullYear(dDate.getFullYear()-1);
createCookie(sName, null, dDate);
}; //deleteCookie

return {

createCookie : this.createCookie,
readCookie : this.readCookie,
deleteCookie : this.deleteCookie

}

})();

Si je veux créer un cookie, il faut instancier l’objet cookie :

cCookie = new cookie();

puis appeler la méthode createCookie(); avec les paramètres nécessaires, si l’on omet le troisième, le cookie est valable le temps de la session :

cCookie.createCookie( 'hasVisited', 'true', 10 );

pour le lire, on rappelle le nom de la valeur à lire :

cCookie.readCookie( 'hasVisited' );

et enfin pour l’effacer on appelle la méthode deleteCookie(); avec toujours le nom de la valeur à supprimer :

cCookie.deleteCookie( 'hasVisited' );

Attention la valeur du cookie ‘hasVisited’ est de type String et non booléen, ainsi pour comparer la valeur, on utilise :

if ( cCookie.readCookie('hasVisited') == 'true' ) instructions

et non

if (cCookie.readCookie('hasVisited')) instructions

qui serait toujours faux.

Feuilles de styles utilisateur avec Internet Explorer

Comme dans beaucoup d’agences nous utilisons quotidiennement un outils en ligne pour saisir les temps passés sur les différents projets. Classiquement on retrouve des listes déroulantes (<select />) pour choisir un premier périmètre projet puis un projet et enfin un sous projet. En ce qui me concerne les libellés sont trop longs et la taille des <select /> étant fixée avec des styles en ligne, on ne voit pas les libellés sans passer la souris dessus. Je me suis donc penché sur la question des feuilles de styles utilisateurs afin de forcer l’augmentation de la largeur de ces menus.

Il y a une fonctionnalité d’Internet Explorer qui permet de spécifier une feuille en 3 clics et qui pourrait donc convenir aux usagers non avertis et qui ne nécessite donc pas d’installation de plug-in ou d’édition de configuration. Merci de bien comprendre que le but de cet article est de répondre à une besoin large d’utilisateurs dans un contexte global ou Internet Explorer est utilisé par un public nombreux et pas forcément rôdé aux bons navigateurs.

Au niveau de la feuille de styles, cela donne le code simple suivant : #identifiant {width: 300px !important;}

« !important » permet d’augmenter le poids de la règle et donc de surpasser les styles en ligne.

Attention toutefois, l’application d’une feuille de style utilisateur s’applique à tous les sites que vous visitez ce qui peut provoquer des effets de bords importants sur des identifiants courants comme « #menu » ou « #nav » par exemple.

J’ai placé une page de démonstration ici : http://adrien.leygues.free.fr/test/10pxText.htm qui donne le résultat suivant : 

Si je veux appliquer une feuille locale que vous pouvez télécharger à cet url : http://adrien.leygues.free.fr/test/feuille.css , il n’est actuellement pas possible d’indiquer un URL comme source du fichier.

Je passe par le menu « Outil » puis je clique sur le bouton « Accessibilité » en bas à droite :

qui ouvre le panneau suivant :

dans lequel je spécifie le chemin vers la feuille à appliquer, ici « d:\feuille.css ».

Une fois la feuille chargée, j’obtiens le résultat suivant dans lequel le texte est bien passé de 10px à 20px : 

En ce qui concerne Firefox, vous pouvez passer par la WebDeveloper Toolbar via le menu « CSS » > « Ajouter une feuille de style personnalisée ».

En vrac

http://sixrevisions.com/design-showcase-inspiration/25-elegant-workstations-for-your-inspiration/

http://portablecontacts.net/

http://meyerweb.com/eric/thoughts/2009/09/07/html5-and-you/

http://oseres.com/fr/2009/06/un-iphone-geant-24.html

http://www.mnot.net/cache_docs/index.fr.html

http://10gui.com/video/

http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/

http://www.webdesignerwall.com/tutorials/css-design-out-of-the-box/

new device API for Firefox 3.6: orientation

http://datavis.tumblr.com/#213657045

http://wiki.github.com/fnagel/jQuery-Accessible-RIA

http://sixrevisions.com/infographs/browser-performance/

Eye-Tracking – Occulométrie : J’ai testé pour vous

A l’occasion des ateliers Paris Web qui se sont déroulés ce samedi 10 Octobre 2010, j’ai pu tester pour vous un système d’oculométrie. Ce système présenté par Antoine Luu représentant de la société Tobii permet via une caméra et une carte périphérique spécialisée de suivre le mouvement des yeux.

L’objectif est double. Il permet d’une part de filmer les mouvements de l’oeil sur l’écran pour identifier le parcours d’un utilisateur lors de sa visite sur une application et d’autre part de commander une interface. L’enregistrement est restitué sous forme de zones de chaleurs ou retrace le parcours effectué par les yeux de l’utilisateur :

Crédit photo : Monty Metzger – Licence CC

Une partie de cet atelier a été filmé et mis à dipos sur Viméo via Maurice Svay, la voici : 

Paris Web 2009 : Atelier Eye Tracking (extrait) from Maurice Svay on Vimeo

.

Après un rapide calibrage de l’appareil, j’ai commencé par faire défiler du texte sur la droite de l’écran de haut en bas, puis de bas en haut. La vitesse de défilement varie en fonction de la distance entre l’axe horizontal médian de l’écran et les bords supérieurs ou inférieurs de l’écran. Le même test est effectué pour faire défiler horizontalement des pochettes de CD (Non ! pas Tokyo Hotel ><) sur un axe horizontal.

La prise en « oeil » est très rapide, le défilement se contrôle facilement et j’avoue être bluffé par une telle technologie. La système est disponible pour 20 000 euros environ et est également disponible à la location.

We love the web!

Par ce qu’on en bouffe tous les jours, parce qu’on en parle tout le temps, parce qu’on aime le regarder évoluer et que nous aimons y participer, nous partageons avec vous ce cliché :

Crédit Photo : Emilie Pistorius (CC)

Si vous aussi vous aimez le Web, faites les savoir du 22 au 25 septembre

  • Rendez-vous sur http://www.mozilla.org/causes/onewebday/
  • Téléchargez-y les posters
  • Prenez une photo
  • Faites-le savoir sur les réseaux sociaux via les mots-clés adaptés comme #owdposter sur Twitter

En vrac

Premier billet de liens en vrac !

  • http://lite.facebook.com/ , un FaceBook lite avec moins de bling bling et plus de rapidité, idéal pour les machines et pour gagner du temps
  • Stéphanes Deschamps sur les tailles fixes versus les tailles relatives qui date un peu mais qui reste pertinent (via HTMLZenGarden)
  • Google Search Insight pour afficher des tendances de recherche en fonction de mots-clefs : googleinsight.png

et pour se détendre les neurones :

  • Chevalier et Laspalès : « Le train pour Pau« , « Y’en a qui ont essayé ils ont des problèmes, cela dit il est très rapide ! »
  • Elie et Dieudonné : « La pêche« , « Comment Nicole n’est pas chez sa mère ? »
  • La classe américaine : « Le Orlando » – « Perdu ! Parce que c’est aussi moi qui t’aies vu le deuxième »
  • La classe américaine : « La ferme » – « A la ferme ? quelle ferme ? »