Outils pour utilisateurs

Outils du site


cours2011:outils_et_methodes_de_gestion_de_l_information:outils_pour_internet

Outils pour Internet

Utiliser un navigateur WEB

Le TP nécessite l'usage de Firefox :

  • La principale raison est qu'il offre de nombreuses facilités pour le développement WEB.
    • Remarque : les autres navigateurs ont fait de gros progrès :

Important : Configurer le “proxy” (http://www.pu-pm.univ-fcomte.fr/cri/index.php voir le lien docs). Le faire pour Firefox, mais aussi pour Internet Explorer, car c'est le même réglage qui est utilisé par défaut sous Windows.

Firefox

  • Le mettre comme navigateur par défaut.
    • (Vérifier dans les options).

  • Firefox est très pratique (à un tel point que je vous impose de l'utiliser :) )
    • Par exemple, cliquer avec le bouton du milieu sur un lien (Rq: c'est pareil dans les autre navigateur ;) ).
    • Pour allez plus loin : recherchez “raccourcis” dans l'aide de Firefox.
      • Question : comment rechercher dans la page (2 solutions possibles) ?
    • Questions :
      • Sur quoi est faite la recherche des mots qui sont tapés dans la barre d'adresse ?
          • Comment supprimer un résultat de l'Historique Historique / Afficher l'historique ?
          • Comment supprimer une adresse depuis les suggestions de la barre d'adresse ?
            • Regarder vers à la fin de la liste des raccourcis claviers.
          • C'est quoi la navigation privée ?

Extensions Firefox

Dans la suite du TP je vous propose de télécharger des extensions pour Firefox. Faite sans réfléchir ni vous demander à quoi cela sert (J'ai mis dans le lot un spyware)

  • Au passage, installez des extensions (Outils / Modules complémentaires) :
    • Adblock Plus indispensable
      • Au redémarrage de Firefox, il doit vous proposer de choisir une liste définissant les publicités à bannir :
        • sélectionner Liste FR+EasyList par exemple.
      • Penser à vérifier qu'il fonctionne en le désactivant/activant sur des sites.
    • Omnibar une barre d'adresse comme celle de Google Chrome (Adresse et Recherche combinés).
    • FireGestures un exemple d'extension sympathique.
      • Ne l'installez pas sans savoir à quoi cela sert !
      • Vous pouvez visualiser/modifier toutes les possibilités par : Outils / Modules complémentaires/ Extensions / FireGestures / Préférences
      • Pour vérifier que vous avez compris :
        • Comment on change d'onglet avec la souris ?
        • Comment allez à la page précédente/suivante en un geste ?
    • et plein d'autres ... (Si vous avez un problème, il existe sans doute une solution …)
      • Ils sont classés par catégories, exemple : ”outils linguistiques”, si vous avez un problème avec les langues étrangères.
      • Les collections sont un moyen pour découvrir les extensions qui peuvent vous intéresser.
      • Des suggestions personnelles :
        • Password Hasher, utile si vous utiliser toujours le même mot de passe pour tous les sites.
          • Une solution plus générale est d'utiliser un gestionnaire de mots de passe, entre autre :
            • 1Password (payant).
            • LastPass (en partie gratuit).
            • KeePass (gratuit mais en développement, manque synchronisation/intégration).
        • Context Search, pour donner plus de choix dans la recherche depuis le menu contextuel (sera développé ultérieurement).
        • Stylish, pour voir le WEB autrement.
        • AutoPager, pour rendre les pages WEB infinies…
        • Très pratique : Enter Selects, l'utilisation de la recherche dans la barre d'adresse devient un réflexe !
          • CTRL+L pour donner le focus à la barre d'adresse.
          • Taper deux ou trois lettres propres à un site que vous utilisez fréquemment (exemple : 'fa').
          • ENTRER : merci Enter Selects.

Exercice : ouvrir votre site favori en 6 frappes sur le clavier.

Remarque : Vous devez aussi installer Firefox chez vous.

  • Il conviendra aussi à votre mère.
    • Si besoin d'un navigateur plus simple Google Chrome est une bonne alternative.
    • Même pour un usage avancé, les versions récentes peuvent être une alternative à Firefox. C'est juste une question de préférence. Chacun a des avantages distincts.

Divers

Actions indispensables

  • Ajouter www.pracht.org a vos favoris (“barre personnelle” de préférence)
    • Ou alors montrer que vous avez compris l'exercice précédent (personnellement j'y accède en trois lettres).
    • Remarque : quel est le raccourci clavier pour mettre en favoris ?
      • Utile pour marquer rapidement des pages pour pouvoir y revenir après.

Deux mots sur la recherche sur le web

  • Rechercher “HTML” sur Google :
    • Quel est le raccourci pour aller dans le champ de recherche / barre d'adresse intéligente ?
    • Comment le faire avec le menu contextuel ?
  • Rechercher “HTML” sur Wikipédia.
    • Savez-vous le faire depuis Google ?
    • Recherche sur le site de Wikipédia depuis le champ de recherche / barre d'adresse intelligente:
      • L'icone (Google par défaut permet de sélectionner d'autre moteur de recherche :
      • Vous en avez encore plein sur : Mycroft Project. Combiné avec Context Search, cela doit vous aider à utiliser/décrypter le WEB !
      • Quand vous comprendrez comment est constituée une URL, vous pourrez automatiser des recherches personnalisées.

GMail

  • Faire un compte sur GMail.
    • Vous serez amené à l'utiliser dans de TP ultérieur
    • Si cela est impossible lors du TP, le faire de chez vous ou de la salle libre-service.

Travaillez de chez vous ...

Important : vous pouvez utiliser http://support.mozilla.com/fr/kb/quest-ce-que-firefox-sync. Cela permet de synchroniser totalement Firefox (favoris et historique) entre chez vous et l'IUT.

  • Vous pouvez transférer des fichiers entre votre domicile et l'IUT :
    • Comme pièce jointe à un mail (depuis et/ou vers GMail par exemple), avec 4Go il y a de la place
      • Important : allez dans les paramètres de Gmail pour enlever les fonctionnalités avancées des pièces jointes.

  • En utilisant, le compte FTP mis a votre disposition :
    • src-projet depuis l'IUT
    • src-projet.pu-pm.univ-fcomte.fr depuis le restant du monde
      • Utilisez un client FTP (Filezilla est installé sur les machines)
      • Vous pouvez l'utiliser comme un “disque” depuis chez vous ou l'IUT
      • Mais il n'y a pas beaucoup de place allouée :) (350Mo)
    • Faites un essai avec un petit fichier texte.
  • Une solution très pratique : DropBox.
    • Je vous conseille très fortement demande de l'installer.
      • Lors de l'installation, il vous demande de vous identifier. Cliquez sur annulé. Il vous signalera que certaines fonctionnalités ne seront pas disponibles.
      • Après l'installation, il est nécessaire de configurer le proxy dans les paramètres de DropBox :
        • réglage manuel :
          • Sur les machines de SRC : webcache et 3128 (pas d'authentification).
          • Par le Wifi : proxy-web.univ-fcomte.fr et 3128 (pas d'authentification).
      • Reste à créer un compte
      • Pour l'installer chez vous :
        • Vous aurez sans doute les droits pour l'installer en vous authentifiant.
        • Il n'y aura vraisemblablement pas besoin de régler un proxy.
        • Vous utiliserez le même compte pour obtenir un transfert de fichier simple et transparent.

Les chemins de l'information

Le but de cette partie est de vous faire comprendre que le WEB c'est pas simplement :

  • On tape un mot dans Google
  • On click sur les premiers liens de la première page de résultat.

L'information c'est dans les deux sens

Vous n'êtes pas obligé d'aller la chercher ! elle peut venir à vous.

À titre d'exemple, une liste de liens vers des sites qui sont des catalogues de graphismes :

Je vous laisse regarder, je reviens dans deux heures.

Plus sérieusement, mis a par le thème d'être des catalogues de graphismes, ces sites on en commun d'avoir des Flux RSS :

C'est généralement signalé dans la barre d'adresse :

Sauf pour Firefox (à partir de la version 4) car (trop) peu de monde l'utilisait ! :

Mais vous vous allez l'utilisez ! (Pour FireFox 7, pour 6 voir plus loin) :

  • Faire un clic droit sur la barre d'outil.
  • Demandez : “Personnaliser”.
  • Faire glisser l'icone “S'abonner”.

Pour la version 6 :

  • Dans le menu “Marques-Pages /S'abonner à cette page…”

Utilisation d'un lecteur de Flux RSS

Pour utiliser les flux RSS on a recours à un agrégateur (de flux 1) ).

Dans un premier temps, je vous recommande d'utiliser : Google Reader

Travail à faire :

  • Inscriver vous à Google Reader (ou autre).
  • Ajouter les flux RSS des liens précédents.
    • Vous pouvez choisir le lecteur dans les options de Firefox ou dans la liste déroulante par défaut.
    • Il se peut que Google vous demande si vous voulez :
      • L'ajouter à votre page personnalisée (iGoogle)
      • Ou à Google Reader → c'est cette action qu'il faut faire.
  • Les classer dans une catégorie (Web design par exemple).
  • Existe-t-il un raccourci clavier pour lire les éléments rapidement ?
    • Bonus : comment aller sur le site en une touche ? (et en revenir ?)
    • Comment ajouter des tags

Rq: vérifiez dans les options de Firefox la gestion des flux RSS :


M'appeler si vous avez besoin d'aide ou simplement pour que je vous félicite d'avoir réussi.

Rq: Suivant la fréquence et l'usage fait des flux RSS vous pouvez :

  • Les mettre en marque-page dynamique pour les avoir toujours sous la main.
  • Les mettre sur une page d'accueil personnalisé (iGoogle) pour les voir souvent.
  • Les mettre dans un dossier spécifique dans Google Reader pour les consulter selon votre temps et vos envies.

Fonctionnement des flux RSS

La page WEB que vous visité à simplement un lien vers un fichier au format RSS :

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.webcreme.com/feed/" /> 

Le fichier RSS contient une description suivie d'une série d'items :

<rss version="2.0">
 
<channel>
  <title>Web Creme</title>
  <link>http://www.webcreme.com</link>
  <description>Web design inspiration</description>
 
    <item>
      <title>Savvy Auntie</title>
      <link>http://www.webcreme.com/2008/09/savvy-auntie/</link>
      <description>
        &lt;img src='http://www.webcreme.com/wp-content/images/thumb-savvyauntie.jpg' alt='Savvy Auntie' /&gt;
      </description>
    </item>
 
    <item>
      <title>En Amour</title>
      <link>http://www.webcreme.com/2008/09/en-amour/</link>
      <description>
        &lt;img src='http://www.webcreme.com/wp-content/images/thumb-enamour.jpg' alt='En Amour' /&gt;
      </description>
    </item>
 
</channel>
 
</rss>

L'exemple ci-dessus n'est qu'un code repris et épuré du site Web Creme. Vous pouvez visualiser la même chose en utilisant la commande Affichage / Code Source de la page Ctrl+U.

Le but des explications précédentes n'est pas de vous faire un cours sur le format RSS. Mais de vous montrer que le WEB c'est aussi d'autres formats et d'autres applications.

Dans le cas présent, cela permet de faire venir à vous l'information au lieu de devoir aller la chercher. Maintenant vous serez toujours au courant des dernières modes du WEB ;-) .

Vitesse

Un retour sur les raccourcis claviers.

  • Car vous ne l'avez pas forcément fait le TP précédant.
  • Vous sous-estimez forcément le nombre d'éléments que vous pouvez consulter.
    • Consulter 600 éléments en une 1/2 h, c'est plus productif que de regarder le JT.
      • Bien sûr c'est en lisant que les titres de la grande majorité.
Travail : allez sur Google Reader et réalisez les actions décrites ci-dessous.
  • Taper le caractère ? ou alors /
    • Cela affiche :

  • Aller consulter l'aide pour les raccourcis claviers.
  • Non, ne reprenez pas la souris. (Cela tombe bien ? utilise la main droite.)
  • Appuyer sur Esc
  • Maintenant si vous ne savez pas faire les étapes suivantes, refaire les étapes précédentes et lire.
    • Afficher les éléments (précédant/suivant).
    • Ouvrir la page WEB correspondante à un élément.
    • La fermer
    • Passer à autre un abonnement.
    • Répéter les opérations précédentes (précédant/suivant/ouvrir la page WEB).
    • Marquer tous les éléments restant comme lus.

  • Si des raccourcis claviers existent, c'est que les fonctions correspondantes sont d'usage fréquent.
  • Si c'est souvent utilisé (par d'autre), cela peut vous servir à vous.

Bref, j'insiste lourdement, mais c'est pour votre bien. Vous allez gagner beaucoup de temps à moyen terme.

Et de toute façon, un lecteur de news ne sert à rien s’il ne permet pas d'aller vite.

Rechercher sur le WEB (bis)

Rechercher avec un moteur de recherche

Si vous ne tapez qu'un mot, il y a une erreur.

Je vais illustrer ce qui suit avec comme support votre projet :

  • Vous pouvez editer les fichers HTML avec Dreamweaver ou Aptana

Ok, vous cliquez sur Aptana et pour Dreamweaver ???
Non vous allez pas sur Google regarder c'est simple :


Vous rechercher une évidence, en fait il manque un lien sur ma page : thhp://www.adobe.com/fr/products/dreamweaver/

Et que vous répondit Google :

Sur plus de 20 millions de résultats, le premier présenté est le bon ! (Et les 20 autres millions de pages elles servent à quoi ?)

Moralité quand on recherche un seul mot sur Google, c'est que l'on recherche une évidence :

  • Il manque un lien sur la page
  • Vous ne l'avez pas dans vos favoris
  • Vous ne connaissez pas le nom du site correspondant au produit ou à la marque.

Cela dit c'est sur ce point que Google a construit son succès : fournir en premier les résultats les pus évidents PageRank.

Dans les faits si vous avez réellement besoin de Google :

  • Vous savez déjà ce que vous cherchez !
  • Votre requête est composée de plusieurs termes
  • Vous connaissez le sens de chacun des termes (et leurs éventuelles alternatives)
  • Vous n'allez pas vous arrêter aux 10 premiers résultats (500 est un chiffre plausible)
  • Vous allez visiter et lire plusieurs pages donnez comme résultats (sans doute plus que 5)
  • Vous allez reformuler votre requête plusieurs fois …

Bref une recherche avec Google : c'est ce que vous devriez faire en dernier !

Rechercher une référence (site et/ou page)

Définitions avec Google

Recherchez CSS avec Google, combien de résultats ?

Essayer : define:CSS ce n’est pas mieux ?

Rechercher sur un site

Quoi de mieux que http://fr.wikipedia.org/ pour commencer à se documenter sur un sujet. Houps, la fonction de recherche sur leur site n'est pas terrible !
Pas grave essayez avec Google : css
Puis toujours avec Google : site:fr.wikipedia.org css
Compris ?

Astuces Google

Recherche personnalisé

Alternative simple avec un formulaire en HTML

Rechercher sur Google c'est un simple formulaire :

<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
  <meta charset="UTF-8">
  <title>Test recherche</title>
  </head>
<body>
  <header><h1>Un simple formulaire pour google</h1></header>
 
  <!-- Le code à placer dans la page -->
  <form method="get" action="http://www.google.com/search">
    <input type="text" name="q" maxlength="255">
    <input type="submit" value="Google Search">
    <input type="hidden" name="domains" value="*.src-media.com">
    <input style="visibility:hidden" type="radio" name="sitesearch" value="*.src-media.com" checked="checked">
  </form>
 
  <p>Le restant du contenu</p>
  <footer><p>La fin de la page</p></footer>
</body>
</html>
Avec le service de google

Important : Vous en avez besoin pour le projet individuel du S1.

http://www.google.com/cse/ Google recherche personnalisée

Rentrez simplement les paramètres suivants :

Vous obtenez un code qui s'intégrer de la façon suivante :

<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
  <meta charset="UTF-8">
  <title>Test recherche</title>
 
  <!-- pour tester en local, à retirer avant la publication -->
  <base href="http:">
</head>
<body>
  <header><h1>Un test de recherche google</h1></header>
 
  <!-- Le code à placer dans la page -->
  <div id="cse" style="width: 100%;">Loading</div>
 
  <p>Le restant du contenu</p>
  <footer><p>La fin de la page</p></footer>
 
  <!-- Le code en fin de page -->
  <script src="//www.google.com/jsapi" type="text/javascript"></script>
  <script type="text/javascript"> 
    google.load(...
 
 
  </script>
</body>
</html>

Vous pouvez ensuite changer les options : http://www.google.com/cse/manage/all

Pour que l'intégration reste simple, je vous conseil de changer “Éléments graphiques → Hébergement par Google” et de mettre à jour le code dans votre page !

1) Ne pas confondre avec Flux capacitor
cours2011/outils_et_methodes_de_gestion_de_l_information/outils_pour_internet.txt · Dernière modification: 2011/11/02 23:00 (modification externe)