background preloader

Le Web c’est pas en 72 dpi, coco!

Le Web c’est pas en 72 dpi, coco!
Pour fêter ma présence sur ce blog — youloulou, foule en liesse! — je vous propose de dézinguer un mythe du petit monde de l’informatique et du graphisme. Ce mythe dans sa plus simple expression: Le print c’est en 300 dpi, et pis le web c’est en 72 dpi. Et donc, ça c’est faux. Le Web n’est pas en 72 dpi (ou ppi ou pixels par pouce), et il n’est pas non plus en 96 dpi. Densité des pixels d’un écran: à vos calculettes! Petit exercice pratique: nous allons calculer ensemble la densité de pixels d’un écran. Sur cet écran, 1 mm correspond à un peu moins de 4 pixels.On aura un résultat différent sur d’autres écrans. Pour notre exercice, prenons par exemple l’écran de mon iMac (insérez ici un troll de votre choix). Sa diagonale est de 20 pouces (à peu près, c’est probablement une valeur arrondie).Sa définition native est de 1680 pixels en largeur, et 1050 en hauteur. Mon écran a une densité de pixels d’à peu près 99 pixels par pouce (99 ppi). Chaque écran est différent

http://www.lesintegristes.net/2011/05/06/web-resolution-72dpi/

Related:  Non Classéetechnologies WebGrille & construction HTMLWeb-Design & MultimédiaAffichage

» Définition – résolution – taille des images pour Internet Comme nous l’avons vu dans le chapitre : "Critères des images pour Internet", alléger ses images est primordial pour des raisons de débit de connexion internet. Définition – Résolution – Taille de l’image Nous venons de voir que nous avons au travers des trois formats principaux (Jpeg, Gif et Png) des possibilités d’obtention d’images allégées, tout en permettant de garder une bonne qualité visuelle. Maintenant ce qui est important de savoir c’est qu’une image destinée à une page Internet répond aussi à des critères d’affichage sur un écran.

Optimiser les images Web Formats Outil pour les intégrateurs Un outil simple d'utilisation a été mis en place pour les intégrateurs Web. Il permet d'optimiser les fichiers PNG et JPG automatiquement et rapidement avec ou sans pertes. 8 façons simples d'améliorer la typographie dans vos designs Par Antonio Carusone Cet article a été écrit pour publication dans Smashing Magazine le 3 avril 2009. Je le reproduis ici pour vous être agréable. Beaucoup de gens, y compris les designers, pensent que la typographie consiste à choisir une police, sa taille et si elle doit être grasse ou pas. Comprendre l'ordinateur - C'est quoi les dpi ? les ppp ? dpi = dots per inch. En français : ppp = points par pouce. dots = points = pixels.

HTML et CSS : Positionnement 1. Pourquoi ? Il existe 3 modes de positionnement CSS : relative, absolute, fixed. Openstuff Wiki: Utilisation de Subversion Subversion (ou SVN en abrégé) est un logiciel OpenSource. C'est un système de contrôle de versions qui reprend les concepts de CVS. Il apporte de nombreuses nouveautés telles que : la gestion du renommage des fichiers des commits (publications des modifications) véritablement atomiques. lorsqu'un commit est fait sur plusieurs ressources, il faut qu'elles soit toutes valide pour que la transaction est lieu. Plus d'info sur Wikipedia 1. Taille des écrans, responsive design, et point de rupture Très régulièrement, on me pose des questions sur les tailles des écrans pour faire un design « responsive ». Pour ceux qui connaisse le terme, mais qui ne savent pas vraiment ce que cela veut dire, sachez qu’on appelle « design responsive » (ou responsive design ) la capacité d’un site web à s’adapter au terminal de lecture. Mais pourquoi faire ?

Les sprites CSS Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est, comme le temps des Elfes de la Terre du Milieu, définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS. La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d'affichage sur l'une ou l'autre image sera définie en CSS grâce à la propriété background-position. Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives).

8 outils indispensables au Design Graphique - Innovation Story Il existe de nombreux outils permettant de faciliter la vie des designers, nous allons vous en présenter quelques-uns Invision : Si vous avez besoin d’une meilleure façon de présenter vos maquettes d’interface, ce petit outil pourrait vous plaire. ISO 217 Un article de Wikipédia, l'encyclopédie libre. La série RA (“raw A”) est calculée avec une surface 5 % supérieure, la série SRA (“supplementary raw A”) avec une surface 15 % supérieure, les dimensions étant arrondies au centimètre ; ces formats conservent le rapport 1:√2. Ces formats sont le plus souvent disponibles en rouleaux de grande taille, notamment le papier journal ou couché pour rotatives de presse et magazines et le papier pour l'impression de livres ; de tels rouleaux peuvent peser chacun plusieurs tonnes.

PHP : Le tutoriel pour grands débutants pressés Ce tutoriel, comme son nom l'indique, est intégralement conçu pour des grands débutants pressés. Appelons grand débutant celui qui n'a jamais programmé ni entamé aucune initiation sur les notions générales de la programmation. Nous ambitionnons donc de satisfaire ce public, s'il est prêt à travailler régulièrement et à y consacrer une semaine intensive, par exemple... Mais bien entendu, qui peut le plus peut le moins ! Aussi ce tutoriel ne devrait pas rebuter l'informaticien qui connaît déjà un ou plusieurs autres langages, mais souhaiterait se mettre à PHP,langage devenu incontournable pour la programmation web. Ce lecteur-là pourra parcourir à son rythme le tuto qui suit et y trouver réponses à ses questions...

Related: