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. 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. Pour savoir quelle est la densité de pixels de mon écran, je peux diviser la longueur de la diagonale en pixels par cette même longueur en pouces, et j’obtiendrai un résultat en pixels par pouce. Chaque écran est différent Related:  Images, photos : traitements

Wireframes Magazine How to Create a Fast Hover Slideshow with CSS3 A little fast-running image slideshow that plays on hover and pauses when mousing out. The current image will stay visible. View demo Download source Today I want to share a little hover slideshow with you. The main idea is to run a super-fast image slideshow on hover and show the current image when mousing out. Please note: this is just experimental and will only work as intended in browsers that support the respective CSS properties. This is our simple structure: We’ll show and hide the images using an animation: The animation will be paused and we’ll just run it on hover: The animation will simply make an image visible and put it on top of the “stack”: As you can see, each image will have the same animation but we will start the animation for each image with a delay. The percentages of the animation are calculated as follows: take the 100% of the animation timespan and distribute 8 images over it. On hover, when the slideshow starts running, we’ll show the overlay: And that’s it!

Résolution spatiale des images matricielles Un article de Wikipédia, l'encyclopédie libre. La résolution d'une image numérique s'exprime en PPI (Pixel Per Inch) ou PPP (Pixels Par Pouce). En français, il est dangereux de faire l'amalgame entre Pixel Par Pouce et Points Par Pouce (PPP ≠ PPP). La nuance est que le nombre de pixels utile à l'image sert à fabriquer les points de la trame imprimée. De plus, le point est également une unité de mesure utilisée en typographie inspiré du point pica, et représentant 1/72e de pouce, il ne doit pas être confondu avec le point de trame. Contrairement aux images numériques destinées à être imprimées, les sources vidéos émettent un flux d'image sans résolution spatiale prédéfinie. Afin d'éviter cette confusion entre résolution d'affichage et résolution d'impression ou de capture, certains préfèrent utiliser le terme unique de "définition" pour la quantité de pixels des images et/ou des écrans. Image sous trois résolutions différentes Quelle résolution adopter ? O.

Bien optimiser vos images pour le web | Orignal Communication J’ai choisi d’illustrer cet article avec la carte “Gorille de Beringeï” 3e édition bords noirs du jeu “Magic The Gathering” pour faire plaisir à mon grand frère ainsi qu’au parrain de ma fille, à Quentin et à Romain. Le rapport poids /qualité Nous sommes nombreux à publier des images régulièrement sur les internets. Sur les réseaux sociaux (Facebook, Twitter, Instagram, Google +…) on ne se pose même pas la question du format et de la compression, ils s’occupent de tout. Mais lorsque vous publiez sur votre blog ou votre site internet, c’est vous qui avez la main. À gauche l’image a été compressée très fortement pour un poids de 7Ko.Au milieu avec une compression moyenne on obtient un poids de 25koÀ droite avec une compression très faible on obtient un poids de 90ko. On remarque que l’image de gauche, bien que très légère, est totalement illisible tellement elle est compressée. D’accord, mais alors comment obtenir le meilleur rapport poids/qualité ? Mettre le bon nombre de pixels

Fireworks Wireframing Kit Ajouter une image aux catégories wordpress sans plugin | Wordpress spirit Dans le fichier functions.php : [php] <ul id= »category-bloc »><?php $argsCat = array( ‘type’ => ‘post’, //’child_of’ => 0, //’parent’ => , ‘orderby’ => ‘name’, ‘order’ => ‘ASC’, ‘hide_empty’ => 0, ‘hierarchical’ => 1, // ‘exclude’ => , // ‘include’ => , //’number’ => , ‘taxonomy’ => ‘category’, ‘pad_counts’ => false ); $categories = get_categories( $argsCat ); foreach ($categories as $category) { //datas avalaible /* $category->term_id $category->name $category->slug $category->term_group $category->term_taxonomy_id $category->taxonomy $category->description $category->parent $category->count $category->cat_ID $category->category_count $category->category_description $category->cat_name $category->category_nicename $category->category_parent */ ?><li><?php $catID = $category->term_id; // Get the URL of this category $category_link = get_category_link( $catID ); ?><h2><a href= »<? Dans la page des catégories (category.php): [php] <img src= »<?

Les 10 erreurs CSS les plus répandues Même si le CSS peut apparaître à première vue comme l’un des langages web les plus simples qu’il soit, il est en réalité plus complexe qu’il n’y paraît. Même s’il est facile d’arriver à ses fins en tâtonnant un peu, le CSS est un langage qui possède des règles bien strictes, à respecter si l’on veut produire un code propre, valide, et obtenir un résultat similaire sur tous les navigateurs. Dans cette article sous forme de liste (oui, on aime ça en ce moment !) je vous propose de découvrir les 10 erreurs CSS les plus rependues, que vous et moi avons probablement déjà commis et continuons encore à commettre. 1. Même si les différents navigateurs (et leurs interprétations parfois totalement différentes du langage CSS) peuvent nous donner des nausées, c’est tout de même grâce à eux que notre site internet va être délivré à nos visiteurs, nous avons donc plutôt intérêt à les caresser dans le sens du poil (même IE6…). Bien que cela fonctionne, cette réinitialisation n’est pas assez complète. 2.

Définition et résolution d'une photo : pourquoi il ne faut plus utiliser le 72 dpi ? Pour commencer une petite devinette ! Connaissez-vous la résolution de votre écran ? un indice se trouve dans le titre de cet article… Commencçons par deux notions de vocabulaire importantes : La définition d’une photoLa résolution d’une photo La définition d’une photo ou d’une image représente le nombre de pixels de cette photo ou dit autrement sa taille en pixels; par exemple le capteur du nouveau Canon 6D a une définition de 20,2 MPixels soit 5472 x 3648 pixels. La résolution d’une photo s’exprime elle en DPI (Dot per Inch ou Point par pouce où 1 pouce mesure 2,54 cm) et dépend donc de la taille/ résolution d’impression. Maintenant, revenons à nos moutons et répondons à la dévinette du titre : mon écran Quato mesure 21 pouces en diagonale et physiquement son plus grand côté mesure 42,3 cm pour 1600 pixels. On est très loin des sacro-saints 72 dpi !!! La résolution d’une image n’a aucune espèce d’importance pour son affichage sur un écran; seule sa définition importe.

Comment faire un brief créatif ? Ces deux mots qui sonnent bien ensemble sont pourtant parfois difficiles à corréler et à mettre en oeuvre pour un designer . En effet, rédiger une approche, des idées, les informations pertinentes, les ressources de travail qui répondent le mieux aux attentes et parfois une affaire complexe. L’idée, lorsque l’on répond a un appel d’offre, à une compétition, serait donc d’avoir une méthodologie -et non une méthode- qui puisse nous guider quelque peu vers la rédaction d’un tel brief. des Designers Interactifs, a publié un document de travail intitulé « Comment formaliser un brief créatif ». source Ces articles peuvent aussi vous intéresser: [infographie] Le processus pour réaliser un site internet ! DesignLeaks : des PDF sur le design en libre consultation Synthèse sur l’identité numérique en 2010 et quelques pistes de réflexion… Transformez tous les sites internet en wireframes avec Wirify ! Le guide complet de la gestuelle pour les interfaces multitouch ! Un cyclope dans Paris ?

CSS3 – Effet parallaxe (sans JavaScript) - CSS / CSS3 Retour des tutoriels CSS avec quelque chose d’un peu original pour cet article : un effet parallaxe uniquement en CSS3. C’est à la suite de l’article de Simon Kern sur Alsacréations que m’est venue l’envie de tenter d’utiliser CSS pour reproduire cet effet initialement conçu avec JavaScript. L’article zoom sur l’effet parallaxe de Simon est bien conçu, je vous invite à le lire si vous préférez l’utilisation de jQuery, ou si vous souhaitez découvrir une alternative ou un complément à ce tutoriel. J’en profite pour remercier Simon qui m’a autorisé à reprendre son design ainsi que la base du code qu’il a conçu pour l’article sur Alsacréations. Démonstration Place à l’explication ! Concept Pour réaliser cet effet il nous faut plusieurs éléments qui vont nous permettre de simuler différents plans. Lorsque un tel effet est mis en place sur un site web, il l’est souvent pour offrir une transition originale entre deux vues, un peut comme lors d’un diaporama pour passer d’une slide à l’autre. <!

UGrid Creator from Webnicer.com Basics Every grid is defined by 4 parameters: Number of columnsSays how many basic grid columns make up the whole grid. Important note. The good news is that you don't have to worry about the maths. Interface Most popular grids Here you have at your disposal fine selection of most popular grid settings. You can easily switch between grid presets with just one click. Design your own grid Probably no other grid out there gives you the flexibility and ease of use that you get here. at any time you can change any parameter you want including number of columns and page widthyou can lock any one of the three widths - page, column or gutter - and for the remaining two UGrid will find all available combinationssliders always take you through available values onlywhen you type in a value that is not achievable UGrid will replace it with the closest possible alternativeUGrid remembers the values of your choice and uses them to pick the combination which might be the most interesting for you Download

Related: