nyroBlog
Bannière NyroBlog, par DëuG
Image par DëuG - ?

Tag : CSS


Pantacourt et T-shirt

Un peu de nouvelles de Los Angeles, brut de pomme :

  • Fluidesign a déménagé depuis le début d'année. Nouvelle adresse, suivez le lien. Vue sur l'océan depuis la salle de réunion, grande classe pour commencer la semaine. Dans le même immeuble, deux étages plus bas, on trouve le fameux Habbo
  • J'en ai profité pour déménager pour ne pas me taper une heure ou plus de bus le soir... 10 minutes de bus pour aller au boulot, un peu moins pour la plage.
  • Fluidesign a ouvert son blog au grand public. Pas trop d'activité dessus, mais il est là quand même. Je n'aime pas du tout le graphisme, le précédent était plus sympa. Damned Designer!
  • Stage terminé depuis une semaine, je rempile pour 6 mois de plus chez Fluidesign avec énormément de boulot en ce moment.
  • le DUT SRC de Montbéliard fêtait ses 10 ans aujourd'hui à l'occasion de la journée des anciens, dommage que je sois à l'autre bout du monde. Rendez-vous pour les 15 ans !
  • Aujourd'hui peut-être promenade de 3 heures le long de la plage comme au premier jour. Pantacourt et T-shirt était de rigueur (d'où le titre du billet, juste pour narguer les lecteurs français qui sont dans le froid et que je vais rejoindre)
  • Retour en France pour 2 semaines vendredi prochain. Au programme : gala de gym dès l'arrivée, rendez-vous à l'ambassade pour obtenir un nouveau visa, soirées avec les amis, repas avec la famille, soutenance de stage, et encore plein d'autres choses.

Un peu de news logiciels, web, brut de pomme aussi :

  • jQuery sort en version 1.2.2; au menu 300% plus rapide pour la sélection d'éléments, fonctions au chargement de la page se font après le chargement des CSS, possibilité d'indiqué quel Mime-Type on veut lors d'une requête ajax, le scroll de la souris est maintenant gérer très facilement par un tout nouveau plugin. A quand des nouveautés dans jQuery UI ?
  • TinyMce sort sa version 3 en Release Candidate 2. Sortie prévue de la finale à la fin du mois. A mon avis elle n'arrivera qu'à la mi-février
  • Filezilla ajoute quelques fonctionnalités demandés : éditer les fichiers locaux par un clic droit > editer le fichier. Une nouvelle fonctionnalité absoluement démentiel a fait son apparition : la synchronisation entre les dossiers locaux et distants, avec retour visuel pour savoir si les fichiers ne sont présents que d'un côtés ou différent. Vous entrez dans un dossier d'un côté, l'autre se met à jour automatiquement. Un gain de temps énorme. Il me manque toujours une fonction indispensable pour moi : la configuration du double-clic. Après demande sur le forum, le développeur, botg, ne veut pas l'implanté car il considère que Filezilla n'est pas un explorateur de fichiers... Si vous voulez testez, pensez à mon convertisseur automatique et cmplet de config.
  • Veille info, mais je n'en avais pas parlé, et cela me tiens à coeur : Prism est un dernier né des labos de Mozilla et permet de mettre vos applis web dans une petite appli, différent de Firefox. Il utilise le moteur de Firefox 3, et est toujours en version beta. D'après ce que j'ai lu ici et là, la prochaine version ne saurait tardé. Je vois en Prism un moyen facile pour faire utiliser le moteur de Firefox à ses clients, et pourquoi pas proposer des administrations en XUL ?
  • Encore une vieille info : Android, la plateforme de l'open handset alliance issue du travail de google et open-source. 1er téléphone prévue pour la mi 2008, vraissemblablent un HTC.
  • Apple a sorti son MacBook Air : écran 13' qui rentre dans une enveloppe. Ok c'est super, tout petit et beau comme les autres produits Apple, mais c'est bien trop cher selon moi : 1699€. Autant s'acheter un macBook Pro pour 200€ de plus...

TinyMCE en version 3 Alpha 1

Depuis un peu plus de 3 mois, on n'avait pas de nouvelles de TinyMCE. Je m'étais promené sur le site pour essayer de trouver une roadmap mais je n'avais pas trouvé.

Et aujourd'hui, qu'est-ce qui tombe dans mon netvibes ?
L'annonce de la sortie de la version 3 alpha 1

Et les changements sont réjouissants :

  • Réécriture complète du code (d'où le passage à la version 3) avec nettoyage en profondeur
  • Réduction de 33% de la taille totale des scripts
  • Réduction de 75% des requêtes au serveur
  • Les popups sont maintenant personnalisables à souhait lors d'une ouverture inline (popup Ajax)
  • Les plugins peuvent maintenant ajouter des éléments au menu contextuel, avec des sous-menus possibles
  • Chargement à la demande des éléments et non tout au chargement
  • Tous les éléments d'affichages passent maintenant par CSS (les images des boutons par exemple). Ce qui veut dire que la personnalisation sera encore amélioré à ce niveau là
  • Les listes déroulantes (pour sélectionner la police par exemple) sont maintenant crées en javascript. On peut donc voir la police sur chaque ligne comme dans votre éditeur de texte favori

Et encore plein d'autres.

Je n'ai pas encore eu le temps de regarder en profondeur comment cette nouvelle mouture marche, mais on nous dit :

From a pure feature point of view, this release might not be very impressive, but if you are interested in JavaScript and do a lot of custom development, this is the release you have been waiting for.

En français :

Du point de vue des fonctionnalités, cette version ne sera pas vraiment impressionnante, mais si vous vous intéressez au JavaScript et à la personnalisation de TinyMCE, c'est la version que vous attendiez.

Dès que j'ai le temps, je fais un petit tour des nouvelles fonctionnalités JavaScript.

Vous pouvez d'ores et déjà voir la démo de cette dernière version : attention, les fichiers de langue n'étant pas encore prêt, vous verrez sans doute des choses bizarres...

Edit : Sans avoir de timeline véritablement défini, l'équipe de Moxiecode pense sortir une version finale à la fin du mois. Ils travaillent à la correction de bug, à la documentation et un tutoriel sur comment passer de la version 2 à la version 3.

Petit bilan après 2 mois à LA

Histoire de ma vie de tous les jours à Los Angeles pendant mon stage.

Voilà maintenant 2 mois et demi que je suis à Los Angeles. Petit bilan de ce que j'ai appris, ce que je fais chez Fluidesign, et comment se passe ma vie de tous les jours ici.

Le travail
Arrivée tous les jours vers les 8h30 pour commencer à 9h00. Ca me permet de lire mes mails et mes RSS tranquillement le matin. Je suis très souvent le premier au bureau, me demandant même des fois si à 9h et quelques, alors que personne n'est là, si ce n'est pas un jour férié ou si ce n'est pas dimanche. Je travaille sur mon portable, et ça m'arrange bien pour justement rester sur MSN et lire mes mails tout au long de la journée. Pas forcément le meilleur moyen pour être productif...

On me donne du travail par AIM (c'est le standard en messagerie instantanée ici) ou par mail, on me demande combien de temps il me faudrait pour faire telles ou telles choses sur un site. J'avoue que c'est un peu dur de donne précisément, surtout que ce n'est pas souvent sur du PHP pur et dur, mais souvent sur des modifs HTML/CSS, quelques fois du JavaScript. D'autant plus que j'ai l'impression que je suis moins productif ici que lorsque je travaille chez moi. J'ai l'impression de mettre 10 ans pour faire un truc tout simple.

Durant les 2 dernières semaines, je ne faisais pas grand chose, il n'y avais pas de travail pour moi. C'est pour cela que j'ai pu me culturer sur le PHP et les design pattern.

Les projets
On me l'a indiqué plusieurs fois, l'entreprise signe des closes de confidentialité avec le client. C'est pourquoi je ne vous parlerai pas des projets sur lesquels je travaille actuellement, mais sur ceux qui sont en ligne, et donc visible par tout le monde.

GameWorks
Gameworks a été l'un des premiers projets sur lequel on m'a laissé travaillé seul pour des modifs HTML/CSS sur différentes pages du site. Je n'ai jamais bien compris ce qu'était réellement GameWorks. Si j'ai bien compris, ils organisent des repas/jeux/party pour des amis entreprises. Le tout est en lien étroit avec Sega. Les pages en particulier. J'ai fait aussi quelques petits changements minimes dans l'administration et je travaille encore dessus pour l'ajout de nouvelles pages événementielles.

Kayne
Kayne est un autre site sur lequel j'ai fait et je ferai encore des modifications HTML. Le client émet des rapports au format PDF, avec de jolis graphiques parlant de la bourse. Le soucis, c'est qu'il y a parfois des graphiques à modifier sous Illustrator/Photoshop, et que le client est très exigeant. Alors comme ce n'est pas ma tasse de thé, j'ai mis beaucoup de temps pour faire ma 1ère page. Mais une fois qu'on a pris la main, ça va vite. Et avant de publier une page, il faut d'abord la faire valider par quelqu'un d'autre de la boîte, puis par le client, et seulement si tout est ok elle passe en ligne...

First Annoucement
First Annoucement a été le premier projet où j'ai vraiment fait de la programmation PHP et où j'ai pu m'amuser avec du javascript. Le site permet aux futurs parents de préparer leur faire-part électronique en choisissant un thème, renseignant les destinataires depuis leur Outlook, Messagerie (AIM, MSN, Google ou Yahoo!) fichier CSV ou simplement par un champ texte. On peu aussi préparé le nom des parents et celui du bébé pour gagner du temps. Une fois le bébé arrivé, les parents renseignent la date et l'heure de naissance, le poids, la taille, ajouter des photos, peuvent modifier leur message et répandre la bonne nouvelle : Spread the news.
Là où je suis intervenu (car le site existait déjà) a été pour modifier la navigation, remanier les vérifications javascript pour faire de belles erreurs dans un div et non une alerte javascript. Mais le plus intéressant (et le plus long...) a été le fonction de Crop des images. j'ai utilisé ce script basé sur scriptaculous qui fonctionnent très bien. J'ai du mettre le nez dans le code pour modifier quelques petites choses : l'affichage des outils de resize différents et uniquement dans les coins. Et puis j'avais un autre problème lorsqu'on rechargeait une nouvelle image. J'y ai passé beaucoup de temps pour au final avoir un outil qui fonctionne bien. Une fois les nouveaux parents content de leur crop, ils enregistrent la nouvelle image. Là je passe par une petite requête AJAX pour envoyer les coordonnées du crop, et mon script PHP fait le reste. Bref, un site sympa, qui m'a demandé beaucoup de temps car de nombreux problèmes sont apparus pour la compatibilité avec Safari ou IE (6 ou 7...)

Voilà, 3 sites sur lesquels j'ai travaillé. Il y en a d'autres, mais non significatifs ou encore moins intéressant (Kayne est à la limite d'ailleurs...).

Mes progrès
Je suis à Los Angeles. Les gens ici parlent anglais. Etonnant, non ? Ce qui induis donc que je dois parler et comprendre l'anglais. Là où ça se corse, c'est quand on sait le piètre niveau que j'avais. Que j'avais. Car en 2 mois, j'ai progressé. Pas de la façon dont je pensais, mais j'ai progressé.

Comme je l'ai dit plus haut, j'échange énormément avec mes collègues par mail ou AIM. Il m'arrive de contacter mon voisin de bureau par AIM... Mon anglais écrit et mon écriture ont donc très largement progressé. J'avoue que j'ai toujours mon petit dictionnaire MédiaDico de lancer pour les petits mots dont je ne saisi pas exactement le sens et qui me paraissent important. Mais plusieurs personnes me l'ont dit, mon anglais écrit est bon. Je mets en signature de chaque mail interne un petit mot pour me demander de me corriger. Ce que les gens font quelques fois. Il ne faut d'ailleurs surtout pas hésiter à demander une telle correction : je pense que c'est le meilleur moyen de progresser rapidement et efficacement.

L'anglais parlé maintenant. Au niveau de l'oreille anglais, j'ai là aussi énormément progressé. Le collègue avec qui j'échange principalement parle extrêmement vite (même les autres collègues le disent) et parfois un peu dans sa barbe. La première fois que j'ai échangé avec lui a été très difficile à comprendre. J'ai dû lui demander de répéter plusieurs fois, lui faisant un effort de prononciation et de reformulation. Mais ce fait m'est très bénéfique. Mon oreille s'améliore, et je distingue maintenant beaucoup mieux les mots dans les phrases, entendant ces petits bouts de mots non accentués que nous autres français avont tant de mal à détecter la présence. Je m'en suis rendu compte en écoutant ma musique. Avant, je ne comprenais que les refrains car ils revenaient souvent et j'avais donc le temps de les assimilé. Maintenant, je comprends beaucoup plus de mots. Pour la compréhension du sens, c'est encore autre chose. Je comprends le sens des phrases beaucoup plus facilement qu'avant sans pour autant comprendre le sens de chaque mot. Ce qui fait que par un mécanisme de rétroaction, je comprends le sens des mots que je ne comprenais pas avant, et donc je progresse encore d'avantage (vous suivez là ?). Bref, je progresse.

Mon expression orale maintenant. c'est là que je n'ai pas progressé autant que je ne l'espérais. Au travail, je ne parle pas beaucoup. Lorsque je dois m'exprimer, je ne le fait pas en tout aisance et je cherche encore mes mots, trop souvent. Les structures des phrases, les petites erreurs scolaires qu'on fait souvent s'amenuisent de jours en jours, mais je ne parle pas assez pour que cela soit absolument significatif. Je parle plus avec mes collocs, qui ont eux des accents (l'un d'origine portoricaine, l'autre indonésien).

Mes progrès sont là, je les ressens. Ils ne vont pas s'arrêter là, j'en suis sûr. Ce petit bilan personnel m'aide d'ailleurs à m'en rendre compte un peu plus.

La vie de tous les jours
Tout simplement une journée type de travail :
Levé vers 7h30/7h45, douche, 2/3 cookies si la faim se fait ressentir, départ de l'appartement. C'est parti pour 10/15 minutes de marche pour rejoindre Wilshire Boulevard et mon arrêt de bus. Parfois je prends des rollers prêtés par mon colloc pour aller plus vite. C'est un faux plat descendant, donc ça va tout seul.
Le bus que j'utilise n'est pas le plus rapide. Il y en a un autre un peu plus cher qui s'arrête moins. L'avantage en temps n'étant que très minime, je continue de prendre cette compagnie. De plus, les bus ne sont pas bondés comparés à l'autre.
Arrivé au bureau vers 8h30 (ou plus tard selon le bus), installation de mon ordi, remplissage du 1er vers d'eau à la fontaine. Les collègues arrivent doucement. Certains jours je vais à la boulangerie française Amandine (c'est le nom de la boulangerie, pas de la boulangère...) tenu par des asiatiques qui font de bons croissants. Un petit croissant au chocolat par ci, un autre aux amandes ET chocolat par là et tout se passe bien. Et c'est gratuit ! Ceci car fluidesign est en train de faire leur site. Je ne sais pas trop quel marché ils ont, mais on ne va pas s'en plaindre !
La journée commence après lecture de mes mails et RSS (un heure, voir plus...). Je continue le travail inachevé de la veille ou bien regarde ce qu'il y a à faire, demande si quelqu'un a du travail pour moi etc... Et je fais mon travail, comme tout stagiaire qui se respecte. Si j'ai besoin je demande à mon collègue qui est une bête en HTML / CSS.
Le midi, c'est repas sur place préparé la veille ou Fast food avec les collègues, selon les envies. L'avantage ici c'est qu'il y a 10 000 sortes de fast food différents. J'essaie d'en tester un maximum.
La journée passe vite, voyant défilé beaucoup de ligne HTML, CSS, JavaScript ou PHP, toujours avec de la musique dans les oreilles issues de webradios diverses.
Arrivée vers les 18h00, je commence à fermer mes applications une à une, pour souvent partir vers les 18h15 et prendre le bus pour rentrer. Il arrive souvent que Wilshire soit blindé à cette heure là, merci mon téléphone et la musique pour me faire patienter. Arrivée à mon arrêt, c'est reparti pour les 10/15 minutes de marche.
Rentré dans l'appart, un des collocs est là à faire son heure de vélo ou porté de poids. Repas du soir devant la télé, puis la soirée sera faite d'ordi ou de télé.
Couché vers les 23h00.

Demain sera pareil qu'aujourd'hui, en différent...

Des headers qui changent

Sur mon blog, j'ai mis en place des headers qui changent à chaque appel. Voici ma petite analyse par rapport à cet élément qu'on peut mettre facilement en place sur un site.

1) Dans quels cas on rencontre ça ?
Commençons par regarder quelques exemples :

  • Ville de Besançon : l'image incluse dans le header change selon la catégorie dans laquelle on se trouve. Cette image est en rapport avec la catégorie (Ex: dans "Loisirs et Cultures" : un concert dans la ville et des enfants sur des vélos). Toutes les images sont construites par une composition de 2 images avec 1 transition en dégradé.
  • Electrolux : 1 image par page, toutes plus ou moins sur le thème printanier.
  • Leap Frog Interactive (création de sites aux USA) : les header toutes dans les teintes vertes sont en rapport avec la partie dans laquelle on est. Parfois, elle disparait.
  • Allociné : Parfois on a droit à d'imenses header (qui se prolonge très loin dans la page) aux couleurs d'un film pour en faire la promo.

2) Dans quels buts ?
Comme on vient de le voir dans les exemples précédents, il peut y avoir un but bien précis (la publicité) ou simplement de rendre le site un peu plus attrayant, en ajoutant une pointe de "fraîcheur", de "renouveau" au site à chaque page; chaque page est ainsi incluse complétement dans le site par la charte graphique du site, mais personnalisé par ce header (que l'on voit forcément) qui change tout le temps.

3) Des variantes ?
On peut très bien imaginer des headers en flash, dont les animations changent à chaque page. j'ai déjà vu aussi des sites (je n'ai pas de lien sous la main) qui changent en fonction de l'heure qu'il est. On peut aussi étendre le système au site complet et/ou à un pied de page (footer) qui changera en accord avec le header. A vous de laisser libre court à vos imaginations

4) Ma conclusion
Ajouter des headers changeant, je l'ai dit, c'est très simple à mettre en place. Ca ne prend que deux secondes, ça n'enlève rien au site, puisque la charte graphique est toujours là, mais ça ajoute un petit plus qui peut faire revenir ou rester plus longtemps le visiteur. Dans le cas d'une image dans un cadre définie, le lieu du changement est limité à ce cadre et ne perturbe aucunement le passage d'une page à une autre. On ne se rend pas forcément compte. Et si ce n'est pas conscient, l'inconscient sera là pour mémoriser les changements et se dire (pures spéculations, je ne suis pas expert dans le domaine) "Ah, y'a eu du changement là, c'est sympa, ce n'est pas toujours pareil".
C'est pour ses raisons que j'ai mis en place ce système sur mon blog, et que je vais le mettre en place sur d'autres sites, et le proposer pour mes futurs projets. En plus, vous savez qu'ici, vous pouvez ajouter vos propres headers, ce qui permet encore une petite personnalisation en plus pour ceux qui veulent...

En 2 mots : "une petite chose qui ne coûte rien, simple et discrete qui apporte un petit plus au site"

WikiJournal est en ligne

Wiki JournalSur certains projets, on s'investit tellement qu'on a envie qu'ils marchent.
Bien sûr, on passe par des phases de doutes, on ne sait pas trop si ça va marcher, on ne sait plus. Mais on fait quand même.

Ce projet est une commande de La Communication Directe, qui m'a trouvé sur google au mois de décembre dernier. Il m'a fourni un cahier des charges que j'ai lu et annoté pendant un week-end à Lyon. Retour sur Besançon pour lui faire un devis. J'étais en concurrence avec 2 autres entreprises (pas des freelance) : j'étais plus cher et plus long. J'ai eu le contrat car j'avais donné la sensation de maîtriser plus ses attentes que les autres. En effet, je travaillais déjà (et je travaille toujours) sur la refonte d'un site du même genre.

Parlons un peu du projet à proprement parlé : WikiJournal est un site national désireux d'être proche de vous. Pour cela, tous les contenus sont localisés par régions, départements et 'pays'; on peut consulter le site au niveau national ou bien au niveau de chaque région. C'est la vision du client. Dans ce journal, on y trouve des articles présentant les régions, ce qu'on peut y faire, etc... Il y a aussi des petites annonces gratuites pour vendre ou acheter ce que vous voulez, un agenda local pur annoncer vos manifestations ou trouver de quoi faire ce week-end et un annuaire professionnel pour trouver votre plombier.

Dans chaque partie, vous pouvez soit consulter les ajouts effectués par les utilisateurs par catégories et/ou par localisations, mais aussi en ajouter par des formulaires qui sont à la fois simples, concis et faciles d'utilisation. Tous les ajouts et modifications doivent être validés pour apparaître sur le site.
Pour ce faire, le client dispose d'une administration protégée, dont j'ai fait le graphisme depuis un design récupéré sur OSW. Voici le résultat :
Administration WikiJournal
Ici pour les petites annonces. Evidemment, il n'y en a pas beaucoup, le site vient tout juste d'être lancé.
Comme à mon habitude, j'utilise TinyMCE (que j'affectionne particulièrement) dans l'administration pour gérer des pages fixes du site, ou le contenu des articles.

Il y a beaucoup d'Ajax dans le site. Par exemple, pour recharger les liste déroulantes lorsqu'on sélectionne une nouvelle localisation. Ce n'est pas la première fois que j'en fait, mais c'est le premier projet où il y en a autant.

Un gros travail a été fait pour optimiser le référencement. Si vous regarder les URLS des pages de résultats, vous verrez par exemple ceci :
http://www.wikijournal.fr/articles,r11,Midi_Pyrenees.html
http://www.wikijournal.fr/articles,r16,Provence_Alpes_Cote_d_Azur.html
On ne sait pas encore trop ce que va donner cet URL Rewriting, mais c'est toujours plus beau que des paramétres passé en GET. Bien sûr, un travail similaire a été fait sur les titres des pages, qui reprennent à peu près le même principe.

De plus, tous les formulaires d'ajout de données (ou de contact) utilise un captcha fait maison pour éviter tout pourrisage par des robots malveillant. En voici un exemple :
Captcha

Et où gagne-t-il de l'argent ?
Il mise tout sur 2 choses :

  • Les Google Ads qui sont présentes un peu partout, plus ou moins dominantes. Personnelement, je les trouve pas vraiment envahissante.
  • Les bandeaux publicitaires, qu'il n'est pas encore possible d'acheter; ce sera possible un peu plus tard, quand le site aura grandi. Lorsqu'on achète un bandeau, la personne désirant affichée sa pub pourra sélectionné la partie du site, la catégorie de la partie, mais aussi la localisation où il veut afficher sa pub. Ainsi, il peut cibler ces affichages et avoir un retour sur les clics plus intéressants

J'ai aussi mis en place PhpMyVisites pour qu'il puisse suivre ses visite au jour le jour. Il commence déjà à regarder quelles recherches tapent les visiteurs qui arrivent son site, et à le paramétrer pour ne pas se prendre en compte dans les stats. Cet outil est vraiment adaptéà n'importe qui !