Créer une page de géolocalisation (GIS) d’une adresse IP – Partie 2 – Pratique et Code source

Suite à la première partie de ce petit projet, nous allons continuer par la partie plus pratique.

Comment récupérer son adresse IP

L’API que nous allons utiliser est simple, tout d’abord il faut pour le test récupérer votre adresse ip.

L’adresse IP comme nous l’avons vu dans le premier billet est votre identifiant unique sur le réseau internet, je ne parle pas de votre adresse que vous obtenez en testant les paramètres de votre carte réseau ou en tapant la commande « ipconfig » dans une fenêtre MS DOS. cela ne donnera que votre adresse non routable.

Des sites comme adresseip.com ou mon-ip.com peuvent vous renseigner et vous donner l’adresse externe que vous fournira votre routeur suite à une translation d’adresse ou de port.

Vous pouvez pour vos tests prendre les adresses ip de sites web tel que google, facebook, yahoo ou autres en tapant dans votre interpréteur de commandes MSDOS « ping [adresse url du site] ».

Test de l’API ou récupération des coordonnées

Une fois que vous avez une adresse IP pour tester l’API rendez vous sur l’adresse http://api.hostip.info/ et rajoutons à la suite un passage de valeur à la variable ip en mettant une adresse ip routable de votre choix comme suit: http://api.hostip.info/?ip=69.171.21.1 (adresse ip prise au hasard) Lire la suite

Quelques Définitions.

La résolution de l’écran est théoriquement le nombre de pixels (que l’on peut représenter) par unité de surface qui est le pouce (inch)

Issu d’un compromis anglo-saxon (en 1959) le pouce est exactement égale à 2.54cm.

Quant au pixel (contraction de « picture element ») est l’unité de base de mesure de la définition d’une image.

Par abus de langage on s’est habitué à mélanger la définition de l’écran avec la résolution, la définition de l’écran est le produit entre le nombre de pixels que peut afficher un écran en horizontale et en verticale, ce qui explique le signe multiplicatif (x) qu’on met entre ses deux valeurs

Le travail du Designer.

Lors de l’étape de conception de l’interface graphique d’un site web (gabarit, template, charte graphique) le designer se pose plusieurs questions relatives tout d’abord au thème de l’interface, à la palette de couleur qui devra être en harmonie avec le sujet du site, au choix d’une bonne police d’écriture (css3 permet d’utiliser des polices « non-standard ») en suivant toute les recommandations d’accessibilité (WAI: Web Accessibility Initiative).

Le Conteneur du site (wrapper).

Lors de la conception de la maquette sur son éditeur graphique (ou lors de la réalisation simple du genre minimaliste) le designer devra choisir une largeur pour l’interface et plus précisément pour le conteneur (wrapper) des éléments du site.

c’est dans ce wrapper qu’on trouvera toute l’interface, il permet de manipuler la totalité du site en css, par exemple si on veut centrer la page du site il suffit de centrer le wrapper, si on veut qu’il soit à droite il suffit de l’aligner à droite, si on veut que le site occupe toute la largeur il suffit de lui donner une taille (width) de 100% et si on veut limiter la largeur du site il suffit encore de donner une taille (width) ou taille maximum (max-width) à ce wrapper 🙂

Un mot sur la Hauteur (height).

Dites vous que la limite en hauteur ne sert à rien, elle ne sera et ne pourra jamais être déterminée

Même si la définition verticale de l’écran est de 1200, rien ne dit quelle sera la taille réelle d’affichage du site, il y a parfois plusieurs barres qui s’ajoutent à la barre des menus de votre navigateur et qui ne laissent parfois que les 3/4 de la hauteur pour afficher le site, Bref …. le sujet et à oublier, par contre pour la largeur le choix se pose.

Résolution Optimale.

Une étude montre que la résolution de base sur laquelle tout tourne est la « 1024×768 ». Le principe et le but de cette étude et d’offrir des stastiques qui seront utilisés lors de la conception graphique et qui permette de voir quelles résolutions permettront de satisfaire un maximum de visiteurs potentiels, par exemple dans le tableau ci dessous on voit très bien qu’il serait préférable d’abandonner carrément l’idée d’un site se basant sur une résolution de 800×600 ou 640×480.

Les résolutions inférieur sont celle des équipements mobiles.

Date Supérieur 1024×768 800×600 640×480 Inférieur
Janvier 2011 85% 14% 0% 0% 1%
Janvier 2010 76% 20% 1% 0% 3%
Janvier 2009 57% 36% 4% 0% 3%
Janvier 2008 38% 48% 8% 0% 6%
Janvier 2007 26% 54% 14% 0% 6%
Janvier 2006 17% 57% 20% 0% 6%
Janvier 2005 12% 53% 30% 0% 5%
Janvier 2004 10% 47% 37% 1% 5%
Janvier 2003 6% 40% 47% 2% 5%
Janvier 2002 6% 34% 52% 3% 5%
Janvier 2001 5% 29% 55% 6% 5%
Janvier 2000 4% 25% 56% 11% 4%

Donc la largeur de base sera 1024pixels, mais attention … de nombreux personnes oublient que selon le contenu il apparait parfois des ascenseurs (scrolling) à droite ou à gauche (selon la langue) ce qui diminue cette taille optimale de 1024 à parfois 1000 pixels, de plus les attributs CSS ne sont pas interprété de la même facon d’un navigateur à un autre, du fait de leur incompatibilité (graphique et tableau d’utilisation des navigateurs) il faudra penser à laisser une dizaine voir plus (selon le nombre d’éléments div et de padding utilisé avec des widths de 100%).

Quelle est la solution?

Lire la suite