Firefox outils de design web

Last modified by mediacrea on Thu, November 27, 2008 11:53
Source|Old Revisions  |  Back To Group

Firefox est la première application qui peut vous aider à créer un design pour votre page web. Vous aurez besoin d’installer des composants supplémentaires.

ETAPE 1: Télécharger firefox et quelques plugins

Tout d’abord, vous avez besoin de télécharger firefox. La nouvelle version est disponible: http://www.mozilla.com/en-US/

La “web developer bar” est ce que j’utilise la plupart du temps. Il intègre la plupart des outils que vous aurez besoin pour savoir comment est composée votre page web (css, images, javascript, validateur W3C, mise en surbrillance d’éléments). https://addons.mozilla.org/en-US/firefox/addon/60

Firebug est un autre outil qui vous permettra de débugger vos pages, il peut être très utile pour éditer vos pages html en ligne, et débugger du javascript, et un accès au DOM https://addons.mozilla.org/en-US/firefox/addon/1843

Yslow est également un intéressant addon de Firebug publié par Yahoo (à installer après Firebug). Il permet de tester un total de 13 règles simples en relation avec la vitesse des sites web, et est très utile pour optimiser vos pages. http://developer.yahoo.com/yslow/

Colorzilla est un outil pour récupérer une couleur sur n’importe quel objet graphique affiché dans votre navigateur https://addons.mozilla.org/en-US/firefox/addon/271

ETAPE 2 : Utiliser la web developper bar

La barre Web developer peut vous aider à identifier comment une page est composée, essentiellement, pour traquer vos div et classes CSS utilisées dans votre thème et y appliquer quelques réglages avant d’intégrer les règles CSS dans vos pages.

Prèmièrement, allez sur CSS button > edit CSS. Vous avez maintenant tous les fichiers CSS utilisées dans vos pages.

Maintenant nous pouvons modifier en ligne et voir le résultat en temps réél les modifications css, mais nous avons besoin de savoir quelle “id” ou “class” que nous devons modifier.

Allez sur Information > display element information, et nous pouvons maintenant choisir les éléments que nous voulons changer.

Par exemple, si nous voulons changer la couleur de fond des liens du haut, nous devons cliquer sur la zone des liens du haut, nous pouvons voir la zone sélectionnée (bordures rouge) et il nous informe que nous devons modifier la classe .toplinks-bar.

Aller sur le panneau “edit CSS, et recherchez .toplinks-bar dans le champ de recherche, Nous devons sélectionner chaque onglet pour le trouver, et quand nous l’avons trouvé, (ici dans boxes.css) nous pouvons éditer la valeur de la couleur de fond (essayez background:red;), et voila.

Nous pouvons sauvegarder les changements et uploader les CSS (il y a une option de sauvegarde). Mais quel est le chemin de nos fichiers CSS que nous venons de modifier ?

Cliquez sur le bouton CSS (dans la webdeveloper bar) > view CSS. Un onglet s’ouvrira avec tous les css, et nous pouvons renvoyer le fichier sur le serveur maintenant que nous connaissons l’emplacement des CSS.

Lien complémentaire

Pour apprendre la structuration d’un thème magento. Terminologie du design sur magento. http://www.magentocommerce.com/wiki/groups/233/terminologies_du_design_pour_magento




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs