Installer et configurer un navigateur Installer et configurer un navigateur ne vous prendront que quelques minutes.

Transcription

1 1 Installer et configurer un navigateur Installer et configurer un navigateur ne vous prendront que quelques minutes. 1. Téléchargez le navigateur Accédez à la page de téléchargement du navigateur via Google, en cliquant sur le système d exploitation de votre ordinateur, vous lancerez ensuite le téléchargement. 2. Installez le navigateur Une fois le téléchargement terminé, lancez le programme d installation ; cliquez sur le bouton Suivant, cochez la case J accepte les termes de l accord de licence puis cliquez sur Suivant. Préférez une installation de type standard puis cliquez deux fois sur le bouton Suivant, le navigateur s installe... Une fois cette première opération terminée, veillez à ce que la case Lancer «le navigateur» maintenant soit cochée et cliquez sur Terminer. Remarque : l ensemble des navigateurs web s installent à peu de différences près de la même façon 3. Importez vos réglages et données Lors de son premier lancement, la plupart des navigateurs vous propose d importer les données de configuration du navigateur déjà présent sur votre système : favoris, historique de navigation, options Internet,... Si vous avez choisi l importation, une fenêtre d assistance s ouvre : laissez tous les éléments cochés et cliquez sur Suivant. 4. Déterminez ce navigateur comme navigateur par défaut Après l importation, une fenêtre de dialogue vous demande si vous souhaitez faire de ce navigateur votre navigateur par défaut. Si vous choisissez cette possibilité, cliquez sur Oui. Dans le cas contraire, désactivez la case et cliquez sur Non. Pour modifier ce choix par la suite, accédez aux Options avancées ou Paramètres du navigateur Cette modification peut également être réalisée via Démarrer / Programmes par défaut de votre Windows 5. Choisissez votre page de démarrage Allez dans «Options»ou «Paramètres» et saisissez l adresse de votre page de démarrage. 6. Utilisez les onglets pour naviguer. Ctrl + clic sur un lien (ou cliquez sur le bouton-roulette de votre souris) pour ouvrir celui-ci dans un nouvel onglet. Les onglets sont très pratiques pour ouvrir des liens sans interrompre votre lecture, explorer les résultats d une recherche, ou faire des aller-retour entre plusieurs pages. 7. Sauvegardez et classez vos sites favoris. Lorsque vous visitez un site, il vous suffit de cliquer une fois sur l étoile à droite de la barre d adresse pour le sauvegarder dans vos favoris. Un second clic vous permettra ensuite de le classer dans un dossier, de lui ajouter des mots-clés et une description. 8. Créez votre barre de raccourcis Insérez des raccourcis sous la barre de navigation vers les sites que vous consultez régulièrement, lorsque vous êtes sur la page d un de ces sites, cliquez 2 fois sur l étoile à droite de l adresse du site ; puis rangez le lien dans la barre personnelle pour que le nom du site et son logo s affichent dans votre navigateur.

2 2 9. Profitez du gestionnaire de session Celui-ci vous propose d enregistrer vos onglets ouverts au moment où vous quittez Firefox, vous pourrez ainsi reprendre vos lectures lorsque vous relancerez votre navigateur. Plus Internet! Configurer et exploiter FireFox : Configurer et exploiter Chrome : Complétez votre navigateur avec des extensions Mozilla avec Firefox, Google avec Chrome ou encore Apple avec Safari ont opté pour un modèle de navigateur extensible avec des modules additionnels. Toutes les extensions FireFox: toutes les extensions pour Chrome : et toutes les extensions Safari : 1. Installer une extension Contactez le site proposant des extensions pour votre navigateur préféré et recherchez l extension souhaitée Cliquez simplement sur Installer à partir de la page de l'extension. Attention à bien télécharger la version compatible avec votre navigateur s'il existe plusieurs versions. Suivez les instructions (cela varie pour chaque extension) et une fois l'installation terminée, redémarrez votre navigateur. Les Modules complémentaires permettant de gérer ses extensions sont généralement disponibles à partir des outils. 2. Les extensions utiles au développement d un site web La galerie d'extensions de FireFox, Safari ou Chrome propose plusieurs dizaines d'outils pour les développeurs. Web Developer : faire apparaître les éléments du code source sur une page Web Developer est une barre d outils qui s ajoute au navigateur avec de multiples fonctionnalités permettant de visualiser les différents éléments d'une page de façon sélective (HTML, images, JavaScript, CSS...). Le menu CSS permet de désactiver tous les styles, le menu Resize permet de réaliser des tests en fonction de résolutions différentes. REM : l extension reste plus complète sur FireFox mais Google Chrome est déjà doté d outils d aide au développement Web avec son «Developer Tools» (clic droit / «Inspecter l élément», ou «Ctrl+Maj+J»). Pendule : visualisation sélective du code source et test multi-écrans Cette extension permet de visualiser le code source d'une page, et ce en ayant la possibilité d'en sélectionner qu'une partie (HTML, CSS et JavaScript), visualiser le rendu final d'une page, également de manière sélective. Il est possible notamment de désactiver certains styles CSS, et de faire apparaitre à la demande les composants masqués, les données d'images, les attributs alt... L'outil permet enfin de tester l'affichage en fonction de la résolution, et de s'appuyer sur plusieurs services pour valider la conformité du code. Firebug Lite : un outil d'aide au débugging Firebug Lite s'avère bien pratique pour auditer tous les composants Web d'une page, à savoir les éléments HTML, DOM et les propriétés CSS.

3 3 Maîtrisez les couleurs avec Colorzilla Cette extension permet par un clic de visualiser rapidement les couleurs sous format RGB, Hexadécimal, hsl,... Window Resizer : tester les sites dans différentes résolutions d'écran Utile pour la phase de test d'un site Web, Window Resizer redimensionne la fenêtre du navigateur dans le but d'émuler différentes résolutions d'écran. Trois grands types de résolution sont disponibles : environnements de bureau (Desktop), ordinateurs portables (Laptop/Notebook) et terminaux mobiles (Mobile). Il est possible d'ajouter des résolutions personnalisées à la liste. IE Tab : émuler Internet Explorer dans Chrome Comme son nom l indique, cette extension permet de tester son site sur différentes versions de ce navigateur. A noter : l'extension est uniquement compatible pour les versions Windows de Chrome. YSlow, pour évaluer la performance des pages Web Signé Yahoo, YSlow ne se contente pas d'analyser une page web et de fournir des statistiques, il suggère également des pistes pour améliorer les performances. Points passés au crible : le poids des images et fichiers CSS, des fichiers JavaScript, du contenu HTML, le caractère ou non imprimable de la page, la présence ou non d'un cache Ajax, d'un CDN... Les indicateurs et conseils sont très riches... Les résultats sont toujours instructifs, sur son site, ou sur celui des concurrents. Speed Tracer : analyser la performance du code JavaScript SpeedTracker fournit un tableau de bord pour suivre la performance d'accès à une page Web. Il détaille les temps d'exécution par composants en temps réel : JavaScript, styles CSS, DOM, requêtes Ajax... Les indicateurs sont représentés sous forme de graphique animé. jquery plugin detector JQuery est un framework javascript très usité permettant de programmer en javascript plus rapidement et de créer des animations et des effets sympathiques Des milliers de plugins jquery faisant toutes sortes de choses permettent d améliorer un site Web aisément. Cette extension permet de détecter les plugins jquery utilisés dans une page Web. SEOquake ou Woorank: extensions complètes sur le SEO Ces extensions proposent un rapport de référencement SEO complet et gratuit, il inclut de nombreux indicateurs : densité des mots clés, présence des microformats, de Flash ou de robot.txt... et des informations plus classiques, comme une estimation du trafic, le nombre de pages indexées ou de backlinks, etc. Xmarks Bookmark Sync : la synchronisation multi-terminaux Permet de sauvegarder ses favoris, ses mots de passe et ses onglets entre ses différents terminaux (postes de travail, ordinateurs portables ou encore smartphones et tablettes). Bureau à distance : pour de la prise de contrôle et de l'assistance Cette extension permet de partager des écrans avec d'autres utilisateurs. Celle-ci nécessite que les deux utilisateurs exécutent l'application pour, soit partager l'ordinateur et permettre à un utilisateur de le voir et de le contrôler, soit de voir et contrôler un ordinateur partagé. Pour cela, un échange de code d'accès (généré aléatoirement à chaque demande de connexion) est effectué entre les deux utilisateurs. Elle a pour but de permettre l'accès à des ordinateurs distants ou, à l'inverse, d'autoriser l'accès à votre ordinateur à une personne tiers de confiance. Cela simplifie donc le dépannage informatique à distance. Plus Internet! Les extensions incontournables pour les Webmasters :

4 Avis aux Webmasters Bonnes pratiques 1. Installez sur votre poste de travail au minimum les 5 navigateurs les plus courants : IExplorer, FireFox, Google Chrome, Safari, Opera et testez régulièrement vos pages web sur ceux-ci 2. Ajoutez les extensions qui vous aideront dans votre formation : Webdevelopper, Firebug, ColorZilla, 3. Si vous ne disposez pas de votre pc portable personnel, ajoutez au fur et à mesure les favoris qui vous seront utiles lors de vos cours dans une banque de favoris en ligne 4. Exploiter les outils de «social bookmarking» afin de constituer votre propre banque de bookmark. 3. Les programmes gratuits utiles au développement d un site web Notepad++ Notepad est un éditeur de texte gratuit, libre et qui a pour particularité la coloration syntaxique de votre code source, il supporte un bon nombre de langages, et peut aussi colorer des mots définis par l'utilisateur... Il a aussi comme point fort une fonction de recherche et de remplacement très développée, et la gestion de plusieurs onglets avec rapidité. Il dispose d'une interface très simple. FileZilla FileZilla est un client FTP (File Transfer Protocol) gratuit, rapide et fiable. Il existe également en version portable et permet la sauvegarde des profils de différents sites. Jruler Permet de mesurer exactement tout ce qui est sur votre écran : page, tableau, graphiques, largeur ou hauteur des images et photos... La Boite à Couleurs Un logiciel gratuit pour récupérer et convertir de couleurs IETester Sous Windows, il permet de tester son site sous différentes versions d'internet Explorer (à noter que ce programme est relativement instable mais il a le mérite d'exister).

5 5 4. Les outils en ligne incontournables Améliorer design de son site Aborde exhaustivement les couleurs, de façons variées. Des dizaines de palettes, parfois créées par les internautes, en libre service. Donnez-lui votre couleur principale et cet outil vous rendra 4 tons pour nuancer votre design. Pour obtenir toutes les nuances d une couleur Extirpez les couleurs d une image. Propose une galerie de site au design classé par couleur Un moteur de recherche consacré aux icônes uniquement! Filtrez les résultats par taille, couleur du fond ou licence. (effectuez vos recherche en anglais) Trouvez des documents Photoshop gratuits pour vos projets Web. Palettes typographiques : Trouver une police de caractère, connaître la police utilisée par un logo ou un site internet, Pour convertir les pixels en em. Générateur de texte pour des maquettes graphiques Cours et tutoriaux Tutoriels, astuces, articles de qualité. Tutoriels, astuces, articles de qualité.

6 6 Sites de référence Utilitaires Outil de validation de votre code HTML, CSS, Analysez le trafic sur votre site Web : données démographiques, pages les plus lues, recherches Google ayant mené à votre contenu Tiennent à jour une liste des fonctionnalités CSS supportées par les différentes versions de chaque navigateur Évaluer le niveau d'optimisation de votre site pour le référencement naturel. ( )

7 7 Exercices 1. Installez sur vos ordinateurs portables les navigateurs manquants 2. Recherchez les extensions incontournables au travail de webmaster, installez ces extensions et voyez comment les exploiter Préparez-vous à présenter ces extensions devant la classe 3. Téléchargez les versions portables des navigateurs et copiez les dans un dossier dédié sur votre clé USB 4. Recherchez les logiciels gratuits, portables ou non (PC ou Mac selon vos besoins) mais en rapport avec votre formation et voyez comment les exploiter Préparez-vous à présenter ces logiciels devant la classe

8 8 Boîte à outils (14) Outils Qui? Web Developer (extension) Pendule (extension) Firebug (extension) Lunascape (programme) Colorzilla (extension) Color Sheme Designer (site) Window Resizer (extension) ProfileSwitcher (extension) Woorank (extension) Checky (extension) MeasureIt (extension) IE Tab (extension) IETester (Programme) Validateur (HTML,CSS) (extension) Mention (extension) Wappalyzer (extension) Jruler (Programme) La boîte à couleurs (Programme) Typetester (site) Snook et Colour Sheck (site) Google Webmaster Tools (site) Google Analytics Debugger (extension) SEO Site Tools (extension) SEOquake (extension) YSlow (extension) Dust.me (extension) Smush it (extension) Validator (extension) X-Ray (extension) HTML Tester (extension) No script FireFTP Resolution test Maxime Thomas Lionel Florian Ali Nadège Nicolas Laeticia Adrien Nelson Nat Aurélie Quentin Kevin Jonas Benjamin Stéphane