eclaireur.net » Technique

Des extensions Firefox pour améliorer votre productivite sur Gmail

David — Wed, 17 Mar 2010 22:38:08 +0000

Voici une sélection d’extensions Firefox 3 vous permettant d’améliorer votre expérience utilisateur sur Gmail. J’ai utilisé toutes ces extensions mais à vrai dire aujourd’hui je n’utilise plus que Minimalist Gmail car en effet installer trop d’extensions peut nuire à la rapidité du navigateur et à l’utilisation de Gmail. La plupart de ses extensions utilisent des scripts Greasemonkey, ce qui permet de changer l’affichage par défaut de gmail.

Minimalisme de Gmail

Matt Constantine a crée une extension qui enlève tout le bruit de l’interface en laissant apparaitre un bouton dans le coin en haut à droite sur lequel vous pouvez voir toutes les options à cacher. Je trouve que cette extension apporte énormément en terme de lisibilité et de confort de navigation, il est vrai que la pub en moins ainsi que certaines informations du pied de page ne sont vraiment pas nécessaires. Après c’est sûr il va falloir apprendre quelques raccourcis clavier pour bénéficier d’un plus grand confort. Voici ci-dessous une copie d’écran avant et après l’activation de l’extension.

Autres extensions Firefox / Gmail utiles et efficaces

Gmail Notifier : Une extension simple qui permet de voir le nombre d’email non lus de la boite de réception et peut même fonctionner sur plusieurs comptes gmail.
Gmail Manager : Cette extension est plus complète que la précédente, elle offre la possibilité de visualiser le nombre d’e-mails non lus dans la boîte de réception ainsi que dans les labels (à l’aide d’une alerte visuelle et audio), le nombre de spam, les brouillons, l’espace disque utilisé…
Better Gmail 2 – Une extension Firefox qui combine les meilleurs scripts Greasemonkey pour Gmail et facilite ainsi leur installation. Vous pouvez choisir les fonctionnalités que vous désirez utiliser par une simple interface “checkbox”. Ce que j’apprécie dans cette extension c’est le fait de visualiser les pièces-jointes sous forme d’icône fichier (image, document, zip…).
Integrated Gmail : ou comment retrouver en un seul endroit Gmail, Google Calendar et Google Reader. Une extension pour les faignants ou ceux qui veulent toujours tout avoir sur le même écran. Je rappelle que via Gmail Labs il est possible d’afficher ses documents ainsi que les événements du calendrier à venir.
Voici d’autres extensions qui sont efficaces : WiseStamp Email Signature Gmail : celle-ci ajoute vos signatures de courriels dans Gmail, Yahoo! ou encore Hotmail. Comme d’ailleurs Blank Canvas Gmail Signatures qui insère la signature en fonction de l’adresse e-mail d’envoi.

Et pour les autres ?

Et pour ceux qui n’aiment pas les extensions ou qui n’ont pas Firefox, n’oubliez pas la fameuse touche ? qui vous permet de lister tous les raccourcis clavier (il faut auparavant activer les raccourcis dans paramétrages). Vous pouvez également découvrir de nouvelles façons d’utiliser Gmail à l’aide des 5 fonctions cachées de gmail. Si vous aussi vous ne pouvez pas vous passer d’une extension Gmail, partagez-la.

Partager cet article

Hype : un framework Flash pour faciliter le développement en AS3

David — Mon, 02 Nov 2009 16:08:03 +0000

Le talentueux artiste Joshua Davis qui a énormément contribué à ma passion pour la technologie Flash revient avec un nouveau Framework pour programmer plus facilement en actionScript 3.

A l’instar de jQuery, avec Hype vous pouvez coder rapidement et simplement en AS3. Joshua Davis prend comme exemple le simple script d’un clip suivant la souris. En AS2, ce script fait 5 lignes, 7 en AS3 et seulement 3 avec HYPE.

Les Flash designers qui étaient habitués à travailler en ActionScript2 ont eut l’impression de ne plus savoir coder lors du passage de Flash en ActionScript3. Il est vrai que le langage AS3 est plus robuste en revanche il n’accepte plus certaines approximations du langage AS2. En tout cas Hype ravira les designers qui hésitaient encore à passer en AS3.

Partager cet article

Les framework CSS pour développer des sites plus rapidement

David — Tue, 22 Sep 2009 07:26:49 +0000

Après cette longue absence, je reviens avec une méthodologie que j’intègre peu à peu dans les conceptions web : les frameworks CSS et la notion de Grid. Il existe des frameworks pour développer plus rapidement en Ajax, PHP, Javascript ou en HTML. Mais depuis 6 mois les frameworks CSS ont connu une nouvelle expension. Pourquoi ces outils sont-ils tendances? Peut-être parce qu’ils simplifient la création des pages en proposant une nouvelle façon de travailler. Petit tour d’horizon.

Piqure de rappel

Les feuilles de style CSS (Cascading Style Sheets) permettent de travailler sur le design des pages. Elles assurent une meilleure accessibilité, évolutivité et optimisent également le chargement des pages. Les frameworks CSS sont une collection de feuilles de style qui nous permettent de concevoir rapidement une mise en page aussi bien pour un template simple (header, 2 colonnes, footer) que pour des modèles de page complexes (header, multi-colonnes, multi-bloc, elastique, footer).

J’ai découvert il y a quelques mois le système de Grilles (Grid System) qui présente de nombreux avantages :

Normalisation des placements : tous les éléments sont placés selon des tailles de bloc et non des pixels
Uniformité : les grilles fournissent une cohésion dans le placement des différents éléments
Maintenance : elles réduisent le temps de développement lors de la redéfinition de certains styles visuels ou de repositionnement d’éléments
Efficacité : elles sont cross-browser; elles sont testées et sont compatibles sur la plupart des navigateurs actuels et anciens

Etat des lieux des framework CSS

Les frameworks qui sortent du lot sont :

A ce jour, le plus répandu est surement Blueprint car il a une grosse communauté qui pousse le projet en l’utilisant et en créant des modules. Après je mettrai 960 Grid System et YUI Grid CSS au deuxième plan. Les deux frameworks sont différents mais possèdent une bonne aura et beaucoup de développeurs les ont adoptés. Enfin SenCSs est un framework CSS qui ne gère pas la mise en page mais les styles, à découvrir comme tant d’autres. Il existe en effet de plus en plus de framework CSS, en voici une liste de 45 avec quelques générateurs.

Une fois le pas franchi…

Dès que vous aurez choisi un système de grid, c’est comme l’adopter. Le code HTML et les balises CSS ne changent pas fondamentalement, ils évoluent. En revanche les frameworks CSS sont très différents les uns par rapport aux autres. Il vous faudra quelques heures ou quelques jours pour être capable de bien les cerner. Et vous avez-vous franchi le pas avec les frameworks et les Grids ?

Pour aller plus loin

Les frameworks CSS : Cet article d’Emmanuel Georjon date de 2008 mais explique très clairement le concept de Grid.
The Best Fluid CSS Grid : Un article sur le deisgn fluide à l’aide de Grid
Which CSS grid framework ? : un article qui compare les différentes solutions pour créer des sites à base de framework
Yahoo Builder : Un générateur qui permet de créer en 2 coups de cuillère à pot un modèle de page basé sur YahooUI (YUI)
BluePrint CSS Builder : Une version similaire de générateur pour BluePrint
Designshack Grid : Une section de cette galerie renferme de jolis sites réalisés à base de grid

Partager cet article

Balsamiq Mockup : si on dessinait des applications ?

David — Thu, 16 Jul 2009 07:51:11 +0000

Merci Arnaud pour cette découverte assez déroutante. Il s’agit de Balsamiq Mockup, un outil online de conception de wireframes avec un style « crayonné ». Vous pouvez créer une panoplie de dessins d’application (wireframe) en glissant et déposant des éléments dans l’interface. Cette application web réalisée en Flash est un modèle de simplicité, vous vous y retrouvez très rapidement et dessiner une application devient un jeu d’enfant.

Le plus fort c’est que derrière cette application se cache juste un homme : Giacomo Guilizzoni. Et vu la qualité du développement je vous invite à aller tester Balsamiq Mockup ou bien simplement regarder les exemples de réalisation pour vous faire une idée.

Pour aller plus loin dans l’utilisation de cet outil. Vous pouvez vous rendre sur le blog superfiction : Les outils online de conception de wireframes (3/5) : utiliser Balsamiq Mockups.

Il existe d’autres applications du même genre : Gliffy, iplotz, Pencil Project, Templatr, ProtoShare ou encore Caretta GUI Design Studio.

Partager cet article

Galaxie opensource : Open Web Tools Directory par Mozilla

David — Tue, 07 Jul 2009 17:12:29 +0000

Il est parfois difficile de se retrouver dans la masse d’outils open source pour le développement qui existe sur le web. Grâce à une idée originale de Mozilla, retrouvez les applications sur tools.mozilla.com. Elle sont présentées dans l’espace et se placent aléatoirement dans votre fenêtre. Vous aurez surement l’occasion de découvrir comme moi des outils que je ne connaissais pas : Doodle (pour l’objet Canvas), Style Master (pour les CSS) ou encore Favicon-generator (pour les favicons).

Partager cet article

2 plugins Firefox : Page Speed contre YSlow

David — Wed, 17 Jun 2009 07:30:56 +0000

On pourrait dire aussi Google contre Yahoo, en effet ces 2 extensions Page Speed (documentation Page Speed) et YSlow (documentation YSlow) sont toutes les deux des extensions Firefox qui rajoute une couche d’optimisation à Firebug.

Pour ceux qui ne connaissent pas Firebug, je vous conseille de lire l’article d’Eric Pommereau : Maîtriser Firebug, l’indispensable extension Firefox pour le développement web. Il y présente les principales fonctionnalités et explique de manière précises les subtilités de Firebug.

Yahoo et YSlow pour smushit

Yahoo a développé l’extension YSlow qui intègre des outils d’optimisation de site. Personnellement je trouve l’outil smushit (acheter par Yahoo) est excellent pour optimiser les images d’une page. Mais pour l’optimisation d’une maière générale Google frappe encore fort et déloge YSlow grâce à la pertinence des contrôles de Page Speed.

Google et Page Speed pour l’optimisation

Page Speed est essentiellement un outil qui vous aidera à améliorer les performances de chargement de votre site web. Après l’avoir exécuté, vous verrez une liste avec tous les facteurs susceptibles de rendre votre site plus rapide au chargement, avec une image illustrant chaque contrôle (gzip, cookie, image, cache, mise en cache proxy, DNS, CSS, Javascript…). Les évaluations sont notées selon quatre niveaux : haute priorité, priorité moyenne, correct, et message d’information. Ce qui permet d’identifier rapidement les optimisations à effectuer.

De plus une autre fonction (page speed activity) permet de suivre en temps réel les appels http du navigateur avec une représentation graphique du temps des connexions, de la résolution de DNS, du chargement des médias, de l’exécution de javascript, etc afin de mieux se rendre compte en live du chargement des fichiers liées à la page web.

Le petit plus de Google à destination des développeurs

Le bonus, Google publie également un ensemble de meilleures pratiques en matière de performance Web. Ces documents expliquent clairement la bonne démarche en matière d’optimisation de bande passante (images, css…). Je trouve ce genre d’initiative très intéressante de la part de google, tous les développeurs devraient tester cette extension Page Speed car on oublie assez souvent que les utilisateurs n’ont pas forcément le même débit, la même taille d’écran…

Partager cet article

HTML 5, un grand pas vers le web de demain

David — Sun, 07 Jun 2009 10:29:10 +0000

Google a récemment clôturé sa conférence développeurs, on peut retenir choses importantes : Wave, le futur service de communication de Google ainsi que les avancées des navigateurs Chrome, Firefox, Safari et Opera qui prennent d’assaut le développement du HTML5 et des normes ouvertes. Il est clair que les spécifications complètes du HTML5 devraient être terminées qu’au mieux fin 2010 en revanche cela n’empêche pas l’intégration dans les navigateurs. Seul Internet Explorer reste encore sur le banc de touche bien que Microsoft prévoit de s’y mettre aussi « Nous attendons les preuves de cet engagement avec impatience » a lancé Gundotra.

HTML5 le nouveau moteur du web

HTML5 deviendra au fil du temps le format des pages Web pour succéder à l’actuelle version 4.0.

Nouvelles balises, meilleure interprétation sémantique

HTML5 adopte un certain nombre de nouvelles balises et attributs qui reflètent mieux la façon dont les sites internet sont découpés. Beaucoup de nouvelles balises des remplacements sémantiques des blocs génériques (

) et en ligne (). Par exemple l’élément

est destiné à un menu de navigation et

Rapidité, qualité, économie, choisissez deux options?

David — Mon, 13 Apr 2009 13:06:09 +0000

Il est clair que dans la majorité des projets cette question est posée, indirectement ou pas, au client. Dans des conditions optimales de qualité nous serions jamais face à ce choix. La qualité optimale d’une réalisation (web ou autre) se situe à la rencontre des attentes des utilisateurs, des spécification et de la réalisation. Nous aurons l’occasion de voir de plus près ces notions de qualité dans un prochain article. Cette représentation en triangle est utilisée dans beaucoup de secteurs d’activité. Le client a le choix de 2 options parmi les 3 suivantes : la qualité, la rapidité d’execution ou bien un prix avantageux.

Rapidité et qualité = Cher

Si vous ou le client choississez la voie de la qualité executée en un temps record, cela impliquera de longues heures acharnées la nuit pour livrer à temps. On peut même envisager de privilégier un projet sur les autres pour qu’il soit réaliser le plus rapidement. Donc pour le client il est clair que cela sera plus élévé qu’une réalisation effectuée en un délai normale.

Qualité et économie = Longs délais

Si le client vous demande un geste commercial sur votre devis, vous pouvez lui dire qu’en retour le délai de livraison sera plus long. La qualité du travail sera la même mais il devra faire preuve d’un peu plus de patience.

Economie et Rapidité = Faible qualité

La dernière option se résume à faire un travail inférieur et rapide pour être livré à temps. C’est à mon avis la seule à écarter car vous jouez avec votre image et la qualité de votre travail. Après il existe des cas où cela peut être intéressant pour le client et le fournisseur. Je pense notemment aux jeunes freelances qui se font les armes sur des projets « rapide et pas cher ». En revanche beaucoup de personnes abusent de la naivete de certains clients pour faire du travail rapide et de mauvaise qualité

Partager cet article

20 mémos utiles pour tout webdesigner

David — Thu, 02 Apr 2009 07:47:13 +0000

Voici réunis dans cette liste des mémos spécifiques au développement Web pour ne rien oublier. Vous pouvez pour la plupart les imprimer pour les conserver avec vous ou bien les garder dans vos favoris (pour les plus écolos).

Mémos Photoshop, Flash

Tous les raccourcis Photoshop CS4, CS3, … : A imprimer et à coller en face de son bureau tout simplement. Il existe également des mémos spécifiques sur l’utilisation du lasso ou bien sur le pinceau.
Raccourcis Flash CS4: Comme le lien précédent, une page regroupant tous les raccourcis Flash CS4.

Mémos XHTML et CSS

CSS Cheat Sheet : une page avec toutes les propriétés CSS sur une seule page. Pour imprimer je vous conseille plutôt le PDF CSS Level 2 Quick Reference/a>.
(X)HTML Elements and Attributes : retrouvez tous les balises avec leurs attributs respectifs. Vous pouvez retrouvez également toutes les balises XHTML representées sur une autre forme.
Le mémo des caractères spéciaux HTML : plus d’excuse pour les oublier!
Approximate Conversion from Points to Pixels : un document permettant de s’y retrouver avec les conversion pt, px, em et percent.
Blueprint CSS Cheat Sheet : si vous êtes adepte du framework CSS blueprint.

Mémos Javascript, jQuery, Mootools et Prototype

Memo Javascript : Tout le DOM en une seule page. Après pour les framework je vous laisse choisir selon vos préférences.
jQuery 1.3 Cheat Sheet ou jQuery Cheatsheet
mootools 1.2 cheat sheet
Prototype 1.6.0.2 Cheat Sheet

Ressources diverses

RGB Hex Colour Chart : un PDF regroupant tous les codes hexadecimal des couleurs.
Polices versions Windows & Mac : les typos accessibles sur Windows et Mac. Vous trouverez dans cet article des mémos imprimables avec toutes les polices
The Web Developer’s SEO Cheat Sheet : Un mémo pour vous aider dans le référencement.
The WordPress Help Sheet : Un mémo qui peut s’avérer utile si vous voulez créer un theme wordpress ou simplement comprendre la structure des themes wordpress.

Ressources Françaises

Mémo référencement : un article complet sur les bonnes pratiques liées au référencement.
Kit de survie du créatif : Droit, argent, rapports commerciaux, un lien à mettre directement dans vos favoris si vous travaillez dans le domaine de la création.
Memo de la maquette web : Quelques fondamentaux à garder en mémoire dans la conception d’une maquette de site (lien texte, formulaires)
Les coulisses d’un design : Douglas Bowman a jugé intéressant de partager avec nous le cheminement d’une création de design web.
Bonnes pratiques Opquast pour l’amélioration et la qualité des sites web.

Partager cet article

Quelques bonnes pratiques pour développer

David — Thu, 12 Mar 2009 07:37:44 +0000

Afin de mieux développer dans les langages du web (CSS, Javascript, PHP…) je vous propose quelques liens. Ils permettront à certains d’apprendre à mieux coder, et à d’autres de corriger quelques « mauvaises » habitudes.

CSS Standards & Best Practices : un article en anglais qui montre à travers des images « Correct » et « Mauvais » les bonnes pratiques CSS. Vous retrouverez à peu de choses près la même chose en français sur le blog chezwanders.info.
Une liste de 9 fonctions en javascript que vous pouvez ré-utiliser à toutes les sauces.
Pourquoi le code CSS et Javascript au milieu du HTML est une si mauvaise chose ? Vous comprendrez si ce n’est pas déjà le cas pourquoi il vaut mieux passer du temps à séparer Javescript, CSS et HTML
Bonnes pratiques de développement en PHP : voici un document destiné plutôt à ceux qui débutent pour partir sur de bonnes bases.
Les bonnes pratiques juridiques et professionnelles : Il n’est pas rare de constater des vices juridiques et professionnels dans le domaine de la création de sites web. Voici quelques bonnes pratiques.

Partager cet article