Firefox 3 et ses addons

Depuis que Firefox (développé par Mozilla) est né, il a fait je pense, beaucoup d’heureux chez les webdesigners de part son autre approche du web et son respect du W3C contrairement à son adversaire installé depuis des années : Internet Explorer.

Il a évolué des plus rapidement et des plus brillamment. Il aurai été estimé à 125 millions de personnes le nombre d’utilisateurs à la version 1.5, nous sommes aujourd’hui à la version 3, je vous laisse donc imaginer le nombre d’utilisateurs potentiel…

Je vais détailler 3 addons firefox qui sont les essentielles, bien évidement il en existe bien plus que 3 mais celles ci sont les plus connues : Firebug, ColorZilla et Web Developers.

Firebug

Grâce à Joe Hewitt, Justin Dolske et robcee, les créateurs de l’addon Firefox FireBug, Il existe une addon des plus importante aujourd’hui (passer à coté serai une erreur à mon sens) qui vous permet de débuger html, javascript et css en temps réel sur votre page web, pratique quand vous êtes perdu…

Vous pouvez désaprésent télécharger cette addon sur le site officiel de Firebug.

ColorZilla

Il est parfois intéréssant de pouvoir récupérer un code couleur dans une page web grâce à l’outils pipe, pour cela, ColorZilla est l’outils qu’il vous faut, à la fois discret dans l’interface de Firefox et très simple d’utilisation, il sera un atout considérable.

Web Developers

Cette addon vous permet vraiment beaucoup de choses, désactiver / activer / l’affichage des images, des css ou encore voir les css et bien d’autres choses encore, Web Developer tool bar est une addon très complète qui saura vous aider lorsque vous en aurez besoin.

Piclens

L’addon Piclens est des plus réussie, elle vous sert lors d’une recherche d’images de transformer votre écran en panorama d’images, scrollable à la main, designé dans un style “Mac” et ainsi rendre plaisant votre recherche. Elle est disponible pour Mac (Firefox, Safari) et Pc (Firefox, IE, Safari), je n’en dit pas plus et vous laisse la découvrir, ca vaut vraiment le coup d’oeil !

Je vous invite à me communiquer d’éventuelles autres addons intéréssantes en commentant ce sujet.

Si cet article vous a plu n’hésitez pas à adhérer au RSS, je reste néanmoins disponible pour répondre aux commentaires.

Le nombre d’or

Ah, le fameux nombre d’or.

Partagé entre le mythe et la réalité il a su traversé les âges et étonné la nature humaine à chacune de ses démonstrations.

Qu’est ce que le nombre d’or ?

Le nombre d’or est la proportion, définie à la base en géométrie, comme l’unique rapport entre deux longueurs telles que le rapport de la somme des deux longueurs sur la plus grande soit égal à celui de la plus grande sur la plus petite. Ce découpage de segment en deux longueurs acquiesçant cette théorie fut appelée “extrême et moyenne raison” par Euclide.

Souvent maintenant désigné par la lettre φ en l’honneur de l’architecte Phidias qui l’aurait utilisé pour concevoir le Parthénon.

L’histoire de cette proportion commence à une période reculée de l’antiquité grecque. À la Renaissance, Pacioli, un moine franciscain italien, la met à l’honneur dans un manuel de mathématiques et la surnomme divine proportion en l’associant à un idéal envoyé du ciel. Cette vision se développe et s’enrichit d’une dimension esthétique, principalement au cours des XIX^e siècle et XX^e siècle où naissent les termes de section dorée et de nombre d’or.

Le nombre d’or se trouve parfois dans la nature ou des œuvres humaines, comme dans les étamines du tournesol ou dans certains monuments à l’exemple de ceux conçus par Le Corbusier. Il est aussi étudié comme une clé explicative du monde, particulièrement pour la beauté. Il est érigé en théorie esthétique et justifié par des arguments d’ordre scientifique ou mystique : omniprésence dans les sciences de nature et de la vie, proportions du corps humain ou dans les arts comme la peinture, l’architecture ou la musique.

Certains artistes, tel le compositeur Xenakis ou le poète Paul Valéry ont adhéré à une partie plus ou moins vaste de cette vision, soutenue par des livres très populaires. À travers la médecine, l’archéologie ou les sciences de la nature et de la vie, la science infirme les théories de cette nature car elles sont fondées sur des généralisations abusives et des hypothèses inexactes.

[ Source : Wikipédia - Le nombre d'or ]

Les jardins zen du web

Et si nous parlions des jardins zen du web, comme ce site : CSS Zen Garden

Lorsque j’ai démarré ma vie de webdesigner et que je cherchai quelques tutoriaux bien faits concernant les css, visitant forums et communautés, je suis tombé sur ce site et j’ai compris tout de suite que les différents skins qu’avaient fait ces webdesigners étaient plus que parfait, bien sur ce ne sont pas les seuls.

Je dois avouer que ça m’a motivé dans mon apprentissage, m’a fait évolué et m’a prit la tête pour arriver moi-même avec mes template à des résultats disons-le “correct”.

Je vous laisse donc découvrir ce site, qui est pour moi digne d’intérêt et qui me laisse encore rêveur quant à ma place parmi ces webdesigners sur CSS Zen garden.

Si cet article vous a plu n’hésitez pas à adhérer au RSS, je reste néanmoins disponible pour répondre aux commentaires.

Comment optimiser l’affichage des images d’un site web

L’affichage des images est un problème relativement courant. Heureusement, les techniques de montage de template évoluent dans le bon sens et nous offre aujourd’hui la possibilité d’optimiser l’affichage des boutons, bannière, background et j’en passe, en gros tout ce qui touche aux images.

Le problème le plus fréquent est le rollover des boutons. Au rollover vous voyez l’image qui se charge, bien que cela ne dure que quelques millièmes de secondes dirons nous, je ne trouve pas ça très propre.

La technique que j’emploie régulièrement est simple, regrouper toutes les images qui concernent la template en une seule et même image au format png.

Pourquoi au format png ?

C’est simple, le format png est un format d’image qui gère la transparence. Une fois vos éléments de templates disposés dans photoshop, enregistrez la en png avec transparence (soit une image sans fond).

Vous pourrez donc installer vos éléments sans fond, pratique pour gérer la transparence.

Quel est le réel intérêt d’adopter cette méthode ?

Une fois cette technique adoptée, le visiteur va télécharger à l’ouverture du site une seule image regroupant toutes les images de votre template et gagner en temps en chargement de votre template.

Par conséquent à l’ouverture de la page vous chargez cette fameuse image png, puis les images annexes. Une fois l’image chargée, tout au long de la navigation votre ordinateur va aller chercher en cache cette même image et s’en reservir. Alors qu’en temps normal, sur des sites conçus avec une template lourde, l’on peut voir que la template met quelques secondes à charger la template complète.

Si cet article vous a plu n’hésitez pas à adhérer au RSS, je reste néanmoins disponible pour répondre aux commentaires.

Structurer un site web

La base de tout site Web est l’organisation de rangement de l’ensemble des éléments qui vont composés celui -ci. Plus vous êtes organisé, moins vous mettrai de temps à rechercher, concevoir ou mettre en place de nouveaux éléments sur votre site.

Nous allons devoir choisir une méthode simple pour ranger tout les éléments qui vont composés votre site web.

Les éléments qui vont composer votre template

a) Les feuilles de style ( CSS ) :

Plus vous allez entrer dans la conception d’un site web, plus les css seront présents. Pour optimiser votre temps de travail il est utile de placer vos feuilles de style dans un dossier situé à la racine et de séparer vos styles suivants leurs utilités dans différentes feuilles de style pour que ce soit plus clair et que vous ne vous retrouviez pas avec une seule feuille de style remplie avec tous les styles, la recherche d’un style en particulier vous prendrai quelques bonnes minutes.

b) Les Images :

Bien que découper toutes vos images en petit morceaux ne soit pas forcément la bonne solution (je viens de publier un article concernant l’optimisation d’affichage des images d’un site web), il est dans votre intérêt de ranger toutes les images dans un dossier situé à la racine nommé “img” ou “images” avec dans celui -ci, encore une fois, différents dossiers qui regrouperont les images utilisées pour votre template, puis un dossier pour les images de présentation, etc.

Les différentes pages de votre site

Pour les pages d’un site web, nous pouvons bien évidement dire que l’index sera situé à la racine, tout comme les informations relatives à l’entreprise ou la personne (page “about”), et autres pages relatives aux informations globales de votre site web.

En revanche pour des pages articles par exemple, il sera judicieux de les ranger dans un dossier ou plusieurs.

En conclusion

Lorsque vous démarrez un projet, mettez dossiers et fichiers en place, même s’ils sont vides, de façon à ne pas vous éparpiller et respecter une méthodologie simple.

Si cet article vous a plu n’hésitez pas à adhérer au RSS, je reste néanmoins disponible pour répondre aux commentaires.