List of displays by pixel density. 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. 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.
Le Web n’a pas de résolution fixe, car chaque périphérique d’affichage a une densité de pixels qui lui est propre, et il n’y a pas de standard en la matière. J’y reviendrai avec quelques exemples, mais avant ça on va expliquer un peu à quoi correspondent ces fameux pixels par pouce. 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). 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.
Ne pas utiliser de Reset CSS 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…). 2. 3. Regardons ensemble ce code : 4. 5. 6. 7. 8. Le blogzine de l'intégrateur web : du Design Web au HTML5, CSS3 et jQuery en passant par la création graphique. Apprenez à créer votre site web avec HTML5 et CSS3. Adapter son site au format mobile avec CSS3. 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. One column like that is called "grid unit" to avoid confusion with layout columns later.Page widthTotal grid width that you can utilise for your layout.
It does not include any side paddings, so you know exactly how much space you have.Column widthThe width of a basic grid column also called "grid unit". When you create page layout, each column's width you will define as number of grid units.Gap widthSpace between columns also known as gutter. 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. My favourite grids UGrid preview Direct URL to this grid Download. Can I use... Support tables for HTML5, CSS3, etc. Em Calculator.
Chop – Post code, write notes and share feedback. BigVideo.js - The jQuery Plugin for Big Background Video. The jQuery Plugin for Big Background Video (and Images) This plugin makes it easy to add fit-to-fill background video to websites. It can play silent ambient background video (or series of videos).
Or use it as a player to show video playlist. BigVideo.js can also show big background images, which is nice to have for showing big background images for devices that don’t have autoplay for ambient video. BigVideo.js is built on top of Video.js from zencoder. So big thanks to them! You can read about how to use BigVideo.js below. DOWNLOAD: zip tar examples bower install BigVideo.js Setup BigVideo.js uses the Video.js api. To simply play a video that takes up the entire browser window (like in this example), do this: For crossbrowser fallbacks, you can include a source order with different video formats. Ambient Video To play silent video in the background of a page (like in this example), use BigVideo’s ambient setting: Or play a series of ambient background videos (like in this example) Video.js.
Push the Buttons. Templates mail responsive 100% compatible clients mails mobiles. De nos jours, de plus en plus d'emails sont lus sur les terminaux mobiles. Avec une évolution de la lecture sur mobile aussi marquée , les campagnes d'e-mailing se doivent d'être compatibles avec le plus grand nombre de terminaux. Le studio Zurb l’a bien compris et a donc décidé de réaliser une série de 5 templates mail responsive. Les fêtes de fin d’année approchant, ils sont disponibles en téléchargement gratuit sur le Zurb’s playground. Fonctionnement d’un template mail responsive Étonnamment, les media queries ne sont pas nécessairement requises. Voici le résultat d’un test de compatibilité des media queries au sein de divers clients mails mobiles effectué par Email on acid : Source Zurb n’a pas complètement omis les media queries de ses templates, elles sont implémentées pour les clients mails compatibles. Magie du tag viewport Mise en place du template mail fluide La solution est de fixer la largeur maximale des cellules à 600px.
Astuce pour un template mail responsive à deux colonnes. CSS Tools: Reset CSS. The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example.
I don't particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. In other words, this is a starting point, not a self-contained black box of no-touchiness. If you want to use my reset styles, then feel free!
Previous Versions v1.0 (200802) Acknowledgments Thanks to Paul Chaplin for the blockquote / q rules. Jquer.in jquer.in » Search Less,Play More : An extensive and visual collection of jquery plugins listed according to its category. Réaliser un lecteur vidéo HTML5 personnalisé | Web it. Dans ce tutoriel nous allons voir comment réaliser un lecteur vidéo HTML5 personnalisé : voir la démonstration La balise HTML5 <video> permet la lecture de vidéos directement sans installation de plugins/codecs. La plupart des navigateurs propose un lecteur prédéfini mais il peut être intéressant de le personnaliser en fonction du design du site dans lequel on va l’intégrer. En effet il peut y avoir des différences de couleurs/formes suivant le navigateur utilisé comme montré ci-dessous : Rendus des lecteurs vidéos HTML5 par défaut sous Firefox, Chrome et Opera Formats vidéo Avant d’attaquer le tutoriel nous allons un peu parler des différents formats vidéos qui peuvent être utilisé pour la balise <video>.
Soit webm et MP4soit OGV et MP4 En effet Webm et OGV peuvent être lu sur Firefox, Opera et Google Chrome alors que Safari et Internet Explorer 9 supporte uniquement le MP4. AddType video/mp4 .mp4 AddType video/webm .webm AddType video/ogg .ogv Intégration HTML/CSS <! Sass - Syntactically Awesome Stylesheets.