Blog d'un Éternel Geek

La communication internet à travers les yeux d'un navigateur

http://vivageek.com/data/images/seo/browserevolution.jpg

 

Nos Navigateurs web ne communiquent pas tous de la même manière. Ils perçoivent différemment suivant leur conception de base.

 

On ne peut nier comme on l'a vu avec mes articles sur la psychologie web, que nos sites ou blogues sont interdépendants de ce que voient google, mais aussi de ce que voient les internautes.

 

Cependant, le souci est qu'ils n'utilisent pas tous les mêmes outils et, de ce fait, leur vision sera faussée par le navigateur utilisé. Le navigateur va afficher par exemple l'ensemble HTML du site le titre (important vers la page qui rassemble l'idée globale des mots-clés utilisés), les paragraphes distincts grâce au balisage H1 à H6 (rappelez vous qu'un seul H1 pour plusieurs H2àH6), le contenu, les images, les vidéos,

 

Surtout, prenez en compte que vous ne devez pas abuser intensément des effets d'affichages tels que JS,… qui pourraient nuire à la temporisation de la page et donc créent des taux de rebonds importants.

 

Soyez clair et concis, programmez vous-même vos parties, cela n'en sera que plus facile et surtout moins gourmand.

 

Prenons l'exemple de Mathieu qui vient sur votre site magnifique du Flash, du JS, des vidéos, des images grands formats seulement il a un Firefox bien garnies en plugiciels et sans le savoir cela consomme une grosse partie de la RAM de son petit 2Go de PC portable.

 

De ce fait, il navigue difficilement à la base et en arrivant sur votre site, il va ressentir une gêne, un problème de lenteur. Il va déterminer le problème non pas comme étant dû aux nombreux modules que Firefox embarque dans la navigation, peut-être encore moins le fait qu'il a 50 onglets ouverts, non il amputera ce souci à votre site qui utilise beaucoup trop d'effets à son goût.

 

Vous vous dite, pourtant Lionel ne dit que du bien de ma vidéo en tache de fond (background), mes flashs qui s'ouvrent avec des effets,… C'est l'effet Internet, on zappe et on ne prendra pas le temps de vous avertir du problème.

 

Sur 100 personnes, vous aurez pour la même situation :

 

  • 10 qui vont être convaincus et vont applaudir.
  • 30 qui reviendront périodiquement en pensant que le problème de votre site se résorbera avec le temps.
  • 5 qui vont être conquis et séduits et seulement 2 qui vont texter des commentaires sympas.
  • 65 qui vont repartir en accusant votre site de faire ralentir leur navigation, pires 15 diront que vous êtes porteur de virus ou pire.

 

 Vous comprenez la nécessité de comprendre la conception d'un navigateur et comment l'amadouer pour que celui qui le chevauche restez plus longtemps sur votre site.

 

On avait vu cette partie dans l'ergonomie, nous allons voir tranquillement cette aparté vers les navigateurs.

 

Vous avez commis une petite erreur de code, CSS ou HTML peut perturber la navigation. Adapter son code à tous les navigateurs est chose extrêmement difficile et complexe sachant tous les facteurs à prendre en compte et les mises à jour des versions.

 

Regardons IE (Internet explorer), il tourne au moins 4 versions différentes qui demandent à être prises en compte.

 

Je suis allé sur le site stat global et j'ai édité un graphe relatant l'utilisation de la plupart des navigateurs.

 

http://vivageek.com/data/images/seo/statcounter-browserbar.png

 

On remarque que Chrome est passé depuis avec 41.8% devant Firefox 25.94%. On Voie qu'IE depuis sa version 11 a aussi remonté dans les préférences des utilisateurs, Safari quand à lui a plus de préférences en tablette Ipad, tandis qu'Android est en retrait.

 

Les anciennes versions toutes confondues dégringolent. Ce qui est bon signe, car les mises à jour sont importantes en termes de sécurité, elle reste même parfois la seule possibilité.

 

Pour savoir comment votre page web est perçue, je vous propose quelques services. Le premier est en ligne, il propose dans sa version Free seulement 5minutes de visualisation.

 

http://crossbrowsertesting.com

 

Quelques services en lignes :

 

https://spoon.net/browsers

http://crossbrowsertesting.com

https://www.browserstack.com

 

 

En logiciel, je pense au fameux IETester connu qui fait son office parfaitement.

 

 

Navigateur moderne

 

Le navigateur web évolue pour devenir plus rapide et donc plus fonctionnel. L'internaute navigue vite, il ouvre tantôt plusieurs onglets, ferme le tout et va rouvrir sur une courte période.

 

Internet avait besoin d'un navigateur plus baroudeur, plus réactif, plus sécuritaire, adapté aux besoins intempestifs de l'internaute du nouveau web.

 

En effet, depuis mon bouquin, je n'ai plus honte à parler de web5.0 quoique des détracteurs soient restés fossilisés sous le web2.0.

 

Il faut aller de l'avant, j'étudie les techniques de demain, je mets à la corbeille celle d'hier et ne garde que l'essentiel pour construire et me préparer à ce que sera notre devenir.

 

Les Navigateurs aussi évoluent au gré du web et des langages de programmation comme en atteste ce graphique.

 

http://vivageek.com/data/images/seo/statecolution-browser.jpg

 

 

La quantique nous apprend que les répercussions de l'univers sont d'ordre Sub atomique, si l'on admet une théorie quantique à internet, je dirais que la Bio navigation de demain pourrait dépendre de nos humeurs et donc de notre taux d'hormones.

 

Pourquoi pas ? Pourriez-vous réfuter cette théorie ?

 

Nos atomes au plus profond de nous ne serait-il pas influencé par la quantique et renverrait de ce fait des actions ayant des répercussions sur le web5.0.

 

Cela sera possible avec l'intégration de la technologie dans notre corps humain comme j'en avais parlé avec les expériences de clonage intra cellulaire et les puces de reconnaissance Intel incorporé directement sous cutané.

 

Relié à un Wi fi, l'être humain sera capable d'agir sur internet comme un outil, un objet avec sa conscience propre.

 

On aborde là un sujet qui m'intéresse et que j'éluderais lors de prochain billet. Reprenons notre article qui s'articulent dans ce cas précis autour des navigateurs et leur champ de vision.

 

 

Les navigateurs que voient-ils ?

 

A l'aide de l'outil Live http, on voit par exemple en allant sur Openclassrooms :

 

https://openclassrooms.com l'en-tête des requêtes.

 

Pour cet article,on va utiliser plus facilement l'outil en ligne proposée par:

 

http://www.yakaferci.com/http/

 

 

Voici l'en-tête de la requête (Request Header) envoyée par le robot au serveur Web

 

GET / HTTP/1.1[CRLF]

Host: openclassrooms.com[CRLF]

User-Agent: Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html); yaka[CRLF]

[CRLF]

Note:

  • les [CRLF] indiquent une séquence ASCII [10-13], appelée [Carriage Return - Line feed]
  • une requête de type GET n'a pas de corps (en anglais : body), contrairement à une requête POST par exemple pour envoyer les valeurs d'un formulaire.

 

 

Voici les champs HTTP contenus dans l'en-tête de la réponse (Response Header) du serveur Web

 

 

HTTP/1.1 200 OK

Date: Fri, 18 Sep 2015 12:55:54 GMT

Server: cloudflare-nginx

Transfer-Encoding: chunked

Content-Length: 58722

Cache-Control:    no-cacheno-cache="set-cookie"

Content-Encoding         : gzip

Connection: keep-alive

Content-Type: text/html; charset=UTF-8

 

 

Il est suivi du corps HTML renvoyé par le serveur composant la page web. À chaque page visitée, votre navigateur envoie des requêtes et reçoit des réponses permettant donc de naviguer et visualiser les pages.

 

Maintenant que nous savons tout cela, on va aller un peu plus loin. On sait donc le fonctionnement d'un navigateur, on sait qu'ils ne nous voient pas tous de la même façon.

 

Et le contenu dans tout cela ?

 

Comment est traité le contenu d'une page Web ?

 

Il est traité comme une chaîne de caractères. Prenons pour ma part un langage qui va nous permettre de communiquer au travers des pages HTML, d'en extraire les données, d'interagir : Python.

 

J'ai étudié les langages versés web et pourtant Python reste le plus approprié pour travailler avec Internet.

 

Je pense notamment à un module en particulier Beautifoulsoup.

 

Autre modules aux fonctions similaires:

 

  • mechanize
  • lxml (BeautifulSoup 4 peut utiliser lxml)
  • html5lib
  • sgmllib (ancien)

 

On va travailler dans un esprit purement algorithmique. Notre but était de récupérer le contenu d'une page web.

 

  1. Mettre en place les modules nécessaires.
  2. Demander la page voulut
  3. Utiliser les variables de BeautifulSoup pour récupérer les parties HTML.

 

Installer Beautifoulsoup ainsi : pip install beautifulsoup4.

 

On va donc importer notre librairie fraîchement installée et simplement l'utiliser en lui assignant des variables.

 

Python a des librairies permettant de récupéré les en tête mais aussi le corps d'une page web :

 

from bs4 import BeautifulSoup
import urllib3
import urllib.request
html_doc = urllib.request.urlretrieve("http://fr.wikipedia.org")
print (html_doc)

 

On peut exploiter plus loin Beautifoulsoup avec l'utilisation de ses variables :

 

>>> soup.title

<title>Wikipédia, l'encyclopédie libre</title>

 

>>> soup.title.name

'title'

 

Pour obtenir le document HTML:

>>> import urllib

>>> html_doc = urllib. Request.urlopen("https://fr.wikipedia.org").read()

 

Extraires toutes les parties texte:

>>>print(soup.get_text())

 

Comme on peut le voir les possibilités qu'offrent, cette librairie permet de mettre en place des scripts pour récupérer les pages web.

 

HTML utilise des tag <code> et </code> , la variable soup peut nous permettre d'affiner une recherche en cherchant par exemple tous les tag de type a :

 

Récupéré la valeur de soup pour l'url et intégré la valeur a : soup.find_all('a')

 

Vous aurez ainsi à choisir :

 

D'extraire toutes les parties du texte : print soup.get_text()

Afficher le contenu avec indentation : print soup.prettify()

 

Trouver tous les liens (tous les parentheses de type `a' qui ont une cle `href')

 

>>> liens = []

>>> for tag in soup.find_all('a'):

>>> if tag.has_attr("href"):

>>> liens.append(tag["href"])

 

Dans ce dernier exemple, je vous fais part d'un script qui en utilisant l'extraction de données à partir d'une API web.

 

#----------------------------------------------------
# Name:       Web API
# Purpose:     Extract API WEB-https://en.wikipedia.org/wiki/Web_API
#
# Author:     Preliom
#
# Created:     18/09/2015
# Copyright:   (c) Preliom 2015
# Licence:     Free
#
----------------------------------------------------
 
import json
import urllib.request
 
adresse_base = input ("URL WEB : ")
parametres = {"format":"json", "action":"query", "titles":"Python",
"prop":"revisions", "rvprop":"content"}
 
# on récupére l'adresse .parse nécessaire pour python X3
adresse_url = adresse_base + "?" + urllib.parse.urlencode(parametres)
# on decode sinon l'interpréteur ne peut extraire les str
doc = urllib.request.urlopen(adresse_url).read().decode('utf8')
dict_python = json.loads(doc)
 
# Examiner dans l'interpreteur pour trouver les elements recherches
# Par exemple le contenu de la page se trouve ici
 
print (dict_python['query']['pages']['2302']['revisions'][0]['*'])

 

Le résultat :pour http://fr.wikipedia.org/w/api.php

 

{{Homonymie}}

{{Homophone|Piton}}

{{Autres projets|wiktionary = Python}}

 

Le mot '''python''' peut désigner :

* [[Python (mythologie)|Python]], un serpent monstrueux de Delphes dans la mythologie grecque ;

* ''[[Python (genre)|Python]]'', genre de serpent qui doit son nom au précédent ;

** [[Python (serpent)|Python]] désigne par extension les espèces de serpents de la famille des [[Pythonidae]], notamment ceux du genre ''[[Python (genre)|Python]]'' ainsi que l'espèce de la famille des [[Loxocemidae]] ;

* ''[[Python (téléfilm)|Python]]'', téléfilm d'horreur ([[2000 à la télévision|2000]]) réalisé par [[Richard Clabaugh]] et mettant en scène ces serpents ;

* ''[[Python 2]]'', téléfilm d'horreur ([[2002 à la télévision|2002]]) réalisé par [[Lee Alan McConnell]] et mettant en scène ces serpents ;

* [[Python (langage)|Python]], un [[langage de programmation]] ;

* [[Python (potier)|Python]], un potier grec du {{-s-|V|e}} ;

* [[Python (Efteling)|Python]], nom d'un parcours de montagnes russes du parc d'attractions néerlandais [[Efteling]] ;

* [[Colt Python|Python]], un [[révolver]] créé par la ''[[Colt's Manufacturing Company]]'' en [[1955]] ;

* [[Armstrong Siddeley Python]], un [[turbopropulseur]] apparu à la fin de la seconde Guerre mondiale.

* [[Monty Python]], une troupe de comiques anglais.

 

{{Nom de famille}}

* [[Georges Python]] (1856-1927), personnalité politique suisse ;

* [[José Python]] (1901-1976), personnalité politique suisse.

 

 

Conclusion

 

 

Travailler avec des langages de type Python ou Perl permette d'envisager une autre facette de voir une page web. Extraire les données est aisé comme on a pu le voir. Le moteur de recherche s'inspire de ce type de codage (en plus complexe) pour le crawling.

 

D'ailleurs dernièrement pour ceux qui suivent les informations, un jeune hindou a réussi l'exploit à de créer un algorithme de recherche plus précis et puissant que celui de google.

 

Ce qu'il faut retenir est que l'interaction des langages de communication détermine le web3.0 d'aujourd'hui, mais sa quintessence au travers de multiples langages informatiques lui confère un aspect mystique. Je pense que l'on a démystifié une partie infime.

 

Ne négligez pas le contenu, ni ce qu'il l'entoure afin que les crawler de google puisse comprendre chaque partie de votre page. D'autre part, il est important et sachez le je le développerais dans mon guide, l'unicité est primordiale dans un contenu.

 

On a notre contenant : HTMl,CSS, est divers et notre contenu le texte.

 

Faites en sortes que chacune de ces parties soient lisibles, abordables et précises et les moteurs de recherche, reviendront vous voir pour vous indexer plus rapidement , ainsi que vos visiteurs.

 

J'espère que cette petite introduction, dans l'interaction langage, référencent et communication vous ont plu. Je ferais d'autres articles similaires qui seront dès aparté dans le domaine de la communication.

 

Merci de m'avoir lu, à bientôt.






 Geek me     Je suis un Geek dans l'âme. 18 ans à silloner internet pour récolter des informations afin de comprendre son fonctionnement. Idéalement j'étudie également le comportement humain.

C'est afin de vous partager mes connaissances que j'ai ouvert ce blog alors je vous souhaite une bonne lecture.



À lire également


Écrire un commentaire

Votre adresse de messagerie ne sera pas publiée.

Quelle est la première lettre du mot mazw ? :