Codage/programmation

Qui n’en veut du pixel ? Part.1

Spéciale dédicace à Sylvain et Cédric

Selon Google developers, il existe 3 types de “pixel”:

  • Pixel matériel : un pixel physique à l’écran. Par exemple, un iPhone 5 possède un écran avec 640 pixels matériels horizontaux.
  • Pixel indépendant des appareils (Device-independent pixel, dip) : une mise à l’échelle des pixels de l’appareil pour correspondre à un pixel de référence uniforme avec un éloignement d’écran normal, qui doit faire à peu près la même taille sur tous les appareils. Un iPhone 5 mesure 320 dips de large.
  • Pixel CSS : l’unité utilisée pour la mise en page, contrôlée par la fenêtre d’affichage. Les dimensions en pixels dans les styles comme “width: 100px” sont indiquées en pixels CSS. Le rapport entre les pixels CSS et les pixels indépendants des appareils constitue le facteur d’échelle ou de zoom de la page.”

Woaw, Google mentionne “Un iPhone 5” ! Mais c’est la guerre ouverte! …continuer la lecture de Qui n’en veut du pixel ? Part.1

Update outils responsive design

Quelques nouveaux (pour moi) “outils” glanés cette semaine concernant le responsive design.

Pour l’instant je collecte. Je classerai si cela devient nécessaire. Donc, en vrac:

http://www.alsacreations.com/article/lire/930-css3-media-queries.html:
Le tuto d’alsacreations sur les Media Queries CSS3

http://responsivetest.net:
Un site qui permet de tester un site sous différentes résolutions: smartphone, tablettes, portables, pc …continuer la lecture de Update outils responsive design

Activer la comparaison de fichier dans Notepad++

=> Permet de comparer tous les fichiers de code (html, php, js, xml,...)
notepad Télécharger notepad++: https://notepad-plus-plus.org/download/v6.9.html
notepad02 Aller dans le menu Compléments > Plugin Manager > Show Plugin Manager
notepad03 Trouver le plugin "compare", le cocher et l'installer
notepad04 Accepter le redémarrage de notepad++
notepad05 Retourner au menu Complément: le plugin est bien installer, on peut maintenant commercer à comparer des documents (codes> cf menu > Langage)
   

Outils pour responsive et html5 design

5 outils en ligne qui permettent d’aider à l’accouchement d’un site aujourd’hui:

http://mediaqueriestest.com:
permet de connaître à tout moment largeur et hauteur d’écran et de fenêtre de navigation

http://www.infowebmaster.fr/outils/mon-user-agent.php:
permet de savoir avec quel user-agent (=agent du navigateur) le serveur d’un site va nous reconnaître …continuer la lecture de Outils pour responsive et html5 design

Site responsive et hauteur

La taille d’un écran (device, terminal)  ne correspond pas à la taille d’affichage d’un site Web.

Un exemple vaut toutes les explications du monde:

Mon écran a une définition de 1920×1080 c’est-à-dire, 1920 pixels (px) de large et 1080 px de haut:

Resolution

Cependant, un site web, ne sera pas affiché sur la totalité de l’écran (sauf à utiliser F11), mais uniquement dans la fenêtre de navigation du navigateur: …continuer la lecture de Site responsive et hauteur