2ème séanceOutils du Web Designer
Les outils du web designer
L’anatomie d’une page web
Pour comprendre le fonctionnement d’un site web il faut s’intérésser a l’anatomie d’une page web.
l’entête
le menu
Bas de page ou pied de page
Contenu de la page
Les objectifs du menu principal
- Orienter l’utilisateur rapidement
- Offrir les services de l’entreprise de façon claire
- Regrouper stratégiquement le contenu sous les bonnes sections
Les objectifs d’un menu de bas de page “Footer“
- Trouver l’information clé à travers tout le site
- Contenir des sections cachées (les mettre de l’avant)
- Créer des liens vers les sites partenaires (ou des sites externes)
L’arborescence d’un site web
L’arborescence d’un site web correspond à son architecture et permet d’organiser et de structurer le contenu du site. afin de présenter aux visiteurs une navigation logique et facile sous forme de menus et de sous menus.
Source : WIKIPEDIA
Le wireframe ou maquette fonctionnelle est un schéma utilisé lors de la conception d’une interface pour définir les zones et composants qu’elle doit contenir. À partir d’un wireframe peut être réalisée l’interface proprement dite par un graphiste. La démarche de recourir à des wireframes s’inscrit dans une recherche d’ergonomie.
Maquettage et schématisation (wireframing)
Source : WIKIPEDIA
Un navigateur web est un logiciel conçu pour consulter et afficher le World Wide Web.
Navigateur web
Source : Wikipedia
Statistiques des navigateurs
Navigateur, outils et plugins pour un Web Designer
Firebug (firefox) : Permet au développeur ou web designer de visualiser le code HTML, CSS et java faire des testes meme des modification.
Navigateur, outils et plugins pour un Web Designer
Webdevelopper (firefox) : Permet au développeur ou web designer de visualiser le code HTML, CSS et java faire des testes meme des modification.
Navigateur, outils et plugins pour un Web Designer
Webpage screenshot (chrom) : Impossible de capturer la totalité du site web ? La solution s’appelle Webpages Screenshot.
Navigateur, outils et plugins pour un Web Designer
Colorzila (chrom) : va vous permettre d’utiliser une pipette dans ton navigateur pour identifier la couleur et obtenir son code hexadécimal.
Navigateur, outils et plugins pour un Web Designer
Whatfont (chrom) : Dans le même esprit que ColorZilla, WhatFont te détectera directement quelle typo est utilisée sur l’élément du site que tu vises.
Outils de couleurs
Photoshop est idéal pour la création graphique, il offre une grande liberté pour imaginer et innover dans le webdesign.
Design d’interface
Editeurs du code
Un éditeur du code est un outils pour rédiger des codes HTML, CSS... pour dévlopper des interface web, ainsi des codes de programmation comme java,c, c++...ect.
DreamweaverSublimTextCodaBracketsNotepad++
File Transfer Protocol (protocole de transfert de fichiers), ou FTP, est un protocole de communication destiné à l’échange informatique de fichiers sur un réseau TCP/IP. Il permet, depuis un ordinateur, de copier des fichiers vers un autre ordinateur du réseau, un serveur web, ou encore de supprimer ou de modifier des fichiers sur ces derniers. Ce mécanisme de copie est souvent utilisé pour alimenter un site web chez un hébergeur.
Logiciel FTP (File Transfer Protocol)
TCP/IP est l’ensemble des protocoles utilisés pour le transfert des données sur Internet, intranet ou bien via un reseau local.
Quelque tests