DokuWiki uda-fewd:responsive_images

uda-fewd:responsive_images:accessibility_promise

Anonymous (anonymous@undisclosed.example.com) — 2017-04-29T20:42:36+00:00

<- AccessibilityProject Part 3 -> chromevox s'installe via more tools -> extensions : Quiz: Accessibility Promise Here’s Lynx Here’s ChromeVox General advice about alt attributes * alt attributes should be descriptive for important images, like this body surfer. Because body surfing is important, I guess.

uda-fewd:responsive_images:accessibility

Anonymous (anonymous@undisclosed.example.com) — 2017-04-29T13:59:13+00:00

<- The Full MontyAccessibility Promise -> navigateur links utiliser l'attribut alt de manière responsable chromevox pour la lecture de site les images décoratives, sans sens propre devraient avoir une balise alt-vide --- Here’s Lynx Here’s ChromeVox Here’s the site Cam uses General advice about alt attributes * alt attributes should be descriptive for important images, like this body surfer. Because body surfing is important, I guess.

uda-fewd:responsive_images:all_about_bits_and_pixels

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T18:49:15+00:00

<- Sizing IntroRequests and Revenue -> poids d'une image = pixels x bits par pixel règle 1 : moins de pixels, meilleure compression = poids plus faible

uda-fewd:responsive_images:calc

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T19:13:06+00:00

<- IMPORTANT! Udacity Front End Feedback ExtensionLandscape and Portrait -> * width / calc * not(:last-of-type) margin-right les opérateurs doivent avoir un espace des deux côté ( 1 + 1 et non 1+1 )

uda-fewd:responsive_images:compression_optimization_and_automation

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T20:10:56+00:00

<- Spot the DifferencesImage Optimization Environment -> imagemagick comme outil d'automatisation des tâches webp : convert image.jpg image.webp grunt : * Udacity webcast for setting up Grunt: Front End version and Full Stack version. * Getting started with Grunt * Grunt for People Who Think Things Like Grunt are Weird and Hard * Generate multi-resolution images with Grunt * grunt-responsive-images plugin for generating multiple images * grunt-respimg plugin for a responsive ima…

uda-fewd:responsive_images:course_introduction

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T18:05:03+00:00

<- Why Responsive Images -> Les images n'étaient pas utilisables au début du web et sont ce qui a fait décoller le web. Avec la diversification des dispositifs, écrans, ils nous faut repenser comment nous utilisons les images. Le cours va s'articuler sur l'utilisation d'images avec une grande variété de dispositifs, d'écrans et scénarios (connectivity scenarios).

uda-fewd:responsive_images:css_background_image_techniques

Anonymous (anonymous@undisclosed.example.com) — 2017-04-05T22:58:05+00:00

<- CSS background imagesSymbol characters -> quizz : contain/cover

uda-fewd:responsive_images:css_background_images

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T23:38:35+00:00

<- CSS TechniquesCSS background image techniques -> * Div with background image * CSS background-size - cover * Body with background image * Body with background image and gradient * Body with elaborate background using only CSS * Using CSS background images for conditional image display * Using CSS background images for alternative images * image-set()

uda-fewd:responsive_images:css_techniques

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T23:23:25+00:00

<- Text ProblemsCSS background images -> CSS pour les effets graphiques : toutefois un coût en terme de temps de chargement. À utiliser avec modération. * CSS effects * How CSS affects load time

uda-fewd:responsive_images:end_of_lesson_2

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T23:01:40+00:00

<- Project Part 1Performance -> Explications sur la suite du cours.

uda-fewd:responsive_images:file_formats

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T19:52:15+00:00

<- Raster and Vector IdentificationSpot the Differences -> vectoriel en règle générale bien plus léger. format webP : + transparence animation compression sans perte

uda-fewd:responsive_images:icon_fonts

Anonymous (anonymous@undisclosed.example.com) — 2017-04-05T23:21:53+00:00

<- Unicode Treble ClefInlining images with SVG and data URIs -> Icon Fonts * Zocial * Font Awesome * We Love Icon Fonts! * Icon fonts on CSS-Tricks * ARIA

uda-fewd:responsive_images:image_compression

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T20:33:15+00:00

<- Spot the Differences 2Project Part 1 -> comment vérifier que toutes les images du site ont été optimisées ? (deprecated : pagespeed insights : ) PageSpeed Insights is no longer part of Developer Tools. It has been deprecated. The online version is still available. * PageSpeed Insights example * Grunt PageSpeed plugin * PageSpeed Node module * cURL examples * PageSpeed Insights Node module

uda-fewd:responsive_images:image_optimization_environment

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T20:16:08+00:00

<- Compression, Optimization and AutomationSpot the Differences 2 -> La seule manière de ne pas devenir fou avec les images responsives est de créer un 'pipelin' qui va gérer ça pour nous, créer de multiples versions de nos images automatiquement. grunt, imageoptim, imagemagick ImageMagick: * ImageMagick * Simple ImageMagick installer for Mac *

uda-fewd:responsive_images:important_udacity_front_end_feedback_extension

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T19:08:03+00:00

<- Relative Sizingcalc() -> blablabla extension udacity

uda-fewd:responsive_images:index

Anonymous (anonymous@undisclosed.example.com) — 2021-06-04T17:59:57+00:00

* Getting Up and Running * Course Introduction * Why Responsive Images * Intro to Project * Setting up Your Environment * Setup for mobile * Using dev tools on mobile * Mobile tools for iOS * Lesson 1 Wrap Up * units, formats, environments * Sizing Intro * All about Bits and Pixels * Requests and Revenue * Relative Sizing * IMPORTANT! Udacity Front End Feedback Extension * calc() * Landscape and Portrait * Less Well Known CSS Units * Raster …

uda-fewd:responsive_images:inlining_images_with_svg_and_data_uris

Anonymous (anonymous@undisclosed.example.com) — 2017-04-05T23:29:44+00:00

<- Icon FontsStrategy Quiz 1 -> reduce http requests Inlining images with SVG and data URIs Examples: * SVG Data URI in HTML * SVG Data URI in CSS * SVG text on a path * SVG optimized and unoptimized ---------- Browser support for inline SVG Browser support for Data URIs SVG Optimiser Trajan’s Column SVG example 20 examples of SVG that will make your jaw drop SVG animation examples

uda-fewd:responsive_images:intro_to_project

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T18:15:55+00:00

<- Why Responsive ImagesSetting up Your Environment -> objectif : la meilleure qualité possible pour un minimum d'octets !

uda-fewd:responsive_images:landscape_and_portrait

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T19:17:54+00:00

<- calc()Less Well Known CSS Units -> * mobiles et tablettes : usage plutôt paysage * ordinateurs portables et fixes : usage plutôt paysage * sur mobile et tablette, on ne redimensionne pas la fenêtre, mais la rotation peut charge l'orientation ! À nouveau, règle d'or, ne pas supposer que la taille de l'écran ne va pas changer !

uda-fewd:responsive_images:less_well_known_css_units

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T19:27:58+00:00

<- Landscape and PortraitRaster and Vector -> * vh, vw * vmin, vmax pour resizer une image à la taille de la dimension la plus petite du viewport (contain) : vmin, correspon à 1% de la dimension du viewport la plus petite, hauteur ou largeur. mettre les width et height de l'élément voulu à 100vmin (il y a aussi vmax : cover).

uda-fewd:responsive_images:lesson_1_wrap_up

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T18:39:21+00:00

<- Mobile tools for iOSSizing Intro -> Votre environnement de travail est maintenant prêt.

uda-fewd:responsive_images:lesson_3_outro

Anonymous (anonymous@undisclosed.example.com) — 2017-04-16T00:31:41+00:00

<- Project Part 2Responding to Screen Capability & View -> Pas toujours besoin d'images : utf-8, polices 'icones', CSS. Dans la suite, 'concept' appelé 'art direction' which pushes developers to match image contents to different devices as well.

uda-fewd:responsive_images:mobile_tools_for_ios

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T18:36:08+00:00

<- Using dev tools on mobileLesson 1 Wrap Up -> Aussi faisable avec iOS en utilisant l'iOS webkit debug proxy : voir iOS WebKit Debug Proxy

uda-fewd:responsive_images:performance

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T23:14:49+00:00

<- End of Lesson 2Text Problems -> La réalité du réseau mobile fait que le nombre de requêtes peut être aussi significatif que la taille des fichiers. En d'autres termes, visez la réduction du nombre de requêtes image, ps juste leur taille. c'est un problème que l'on appelle la latence : le délai entre la requête et la réponse.

uda-fewd:responsive_images:project_part_1

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T23:00:51+00:00

<- Image CompressionEnd of Lesson 2 -> max-width, margin 0 auto img { max-width: 100%; } article { width: 50em } width: 1600, suffix: '_large_2x', quality: 30

uda-fewd:responsive_images:project_part_2

Anonymous (anonymous@undisclosed.example.com) — 2017-04-16T00:18:19+00:00

<- Strategy Quiz 4Lesson 3 Outro ->

uda-fewd:responsive_images:raster_and_vector_identification

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T19:47:00+00:00

<- Raster or Vector BannerFile formats -> quiiz : identifier matriciel et vectoriel ici

uda-fewd:responsive_images:raster_and_vector

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T19:34:51+00:00

<- Less Well Known CSS UnitsRaster or Vector Banner -> matrice de pixels vs image vectorielle. vectorielle : pas de perte de qualité avec taille plus grande

uda-fewd:responsive_images:raster_or_vector_banner

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T19:42:49+00:00

<- Raster and VectorRaster and Vector Identification -> quizz : pour imprimer sur un poster pour mettre sur immeuble, matrice ou vecteur ? vecteur, pas de perte de qualité malgré support énorme.

uda-fewd:responsive_images:relative_sizing

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T19:06:56+00:00

<- Requests and RevenueIMPORTANT! Udacity Front End Feedback Extension -> * Examples: * Fixed size image : marche pas sur petit affichage * width: 100% marche pas sur grand affichage * max width: 100% : ok * Two images, 50% width * Two images, 50% width with margin Deux choses simples : * pour les dispositifs comme les ordinateurs portables et de bureau, ne pas présupposer que la taille de la fenêtre est la même que celle de l'écran

uda-fewd:responsive_images:requests_and_revenue

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T18:54:49+00:00

<- All about Bits and PixelsRelative Sizing -> La page web moyenne fait 56 requêtes pour des images HTTP archive Chaque image à un coût en terme de temps de chargement, les études faites par google, amazon, montrent que même les plus petits délais en terme de chargement de page peuvent résulter en une importante perte de trafic et de revenus.

uda-fewd:responsive_images:responding_to_screen_capability_view

Anonymous (anonymous@undisclosed.example.com) — 2017-04-16T00:43:23+00:00

<- Lesson 3 Outrosrcset -> Vous savez maintenant que servir un seul même fichier pour tous les contextes est une mauvaise idée. Les images que vous voulez afficher ne sont pas elles mêmes selon, d'une TV à une montre connectée. Dans la précédente leçon, on a vu des techniques pour utiliser les background

uda-fewd:responsive_images:setting_up_your_environment

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T18:18:09+00:00

<- Intro to ProjectSetup for mobile -> Utiliser les dev tools, et activer le remote debugging Google's overview of Chrome DevTools

uda-fewd:responsive_images:setup_for_mobile

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T18:26:16+00:00

<- Setting up Your EnvironmentUsing dev tools on mobile -> Nécéssaire : * dispositif android * cable usb adapté * machine de développement 1. activer le developer mode sur le dispositif android. La procédure peut varier selon les dispositifs. * paramètres * about device * cliquer sur le numéro de build sept fois

uda-fewd:responsive_images:sizes_attribute

Anonymous (anonymous@undisclosed.example.com) — 2017-04-29T11:48:45+00:00

<- srcsetsrcset Quiz -> Mais si l'image n'est pas affiché full-width du viewport ? attribut sizes : permet d'indiquer à quelle taille l'image est affichée le navigateur considère la résolution de l'écran, la taille du viewport, mais pas la taille à laquelle est affichée l'image

uda-fewd:responsive_images:sizing_intro

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T18:47:10+00:00

<- Lesson 1 Wrap UpAll about Bits and Pixels -> différence entre les trois images ici * niveau de compression * résolution notes : - l'élément sélectionné dans le dom est accessible avec l'identificateur $0 dans la console javaScript - deux images de même résolution et poids différents ont une compression différente

uda-fewd:responsive_images:spot_the_differences_2

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T20:20:42+00:00

<- Image Optimization EnvironmentImage Compression -> quizz : voir : compression

uda-fewd:responsive_images:spot_the_differences

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T19:58:50+00:00

<- File formatsCompression, Optimization and Automation -> voir : résolution

uda-fewd:responsive_images:srcset_and_sizes_quizz

Anonymous (anonymous@undisclosed.example.com) — 2017-04-29T13:24:56+00:00

<- srcset QuizThe Picture Element -> Image Width with sizes What if the image won’t be displayed at the full viewport width? Then you need something more than srcset, which assumes the image will be full viewport width. Add a sizes attribute to the image with a media query and a

uda-fewd:responsive_images:srcset_quiz

Anonymous (anonymous@undisclosed.example.com) — 2017-04-29T12:06:25+00:00

<- Sizes Attributesrcset and sizes quizz -> srcset and sizes Quiz I want to recap what you just learned about the image attributes srcset and sizes. This is a chance for you to take a closer look at the syntax of each attribute before trying them out on a real page in the next two quizzes.

uda-fewd:responsive_images:srcset

Anonymous (anonymous@undisclosed.example.com) — 2017-04-29T11:36:59+00:00

<- Responding to Screen Capability & ViewSizes Attribute -> Vous pouvez avvoir des images avec un rendu très correct sur une écran basse résolution, mais avec un rendu atroce sur un écran HD. Ça n'est pas forcément un problème : on peut sauver une image avec de plus larges dimensions. Mais on ne veut pas servir une très grande image à tout le monde, qu'il en ait besoin ou non, ce qui aurait pour effet une expérience utilisateur lamentable, surtout sur les réseaux mobiles.

uda-fewd:responsive_images:strategy_quiz_1

Anonymous (anonymous@undisclosed.example.com) — 2017-04-15T21:14:53+00:00

<- Inlining images with SVG and data URIsStrategy Quiz 2 -> * A star icon needs to be reused and scaled on mobile devices. Should you use a vector graphic or a raster graphic ? * vector * Should you inline the star or should you set its src to an external file ? * inline : ici petit fichier, si on ne l'utilise qu'une fois, ça fait sens

uda-fewd:responsive_images:strategy_quiz_2

Anonymous (anonymous@undisclosed.example.com) — 2017-04-15T23:49:21+00:00

<- Strategy Quiz 1Strategy Quiz 3 -> Un dispositif d'autopublication ayant besoin d'utiliser des photos utilise-t-on des fichiers vectoriels ou garde-t-on les jpg ? -> jpg est-ce qu'on inline les images ou fichiers externes ? -> inline peut permettre de diminuer les latence, mais réduits les options pour les images responsives, ce qui va être vu par la suite.

uda-fewd:responsive_images:strategy_quiz_3

Anonymous (anonymous@undisclosed.example.com) — 2017-04-15T23:53:24+00:00

<- Strategy Quiz 2Strategy Quiz 4 -> Une boite veut son logo en petit et gros sur toutes les pages vecteur ou bitmap ? vecteur inline ou external ? external (multiple pages)

uda-fewd:responsive_images:strategy_quiz_4

Anonymous (anonymous@undisclosed.example.com) — 2017-04-15T23:57:00+00:00

<- Strategy Quiz 3Project Part 2 -> une app web mobile utilise une image de disque qui tourne pour indiquer le chargement des vidéos .gif ou SVG animé ? SVG inline/external ? external

uda-fewd:responsive_images:symbol_characters

Anonymous (anonymous@undisclosed.example.com) — 2017-04-05T23:04:39+00:00

<- CSS background image techniquesUnicode Treble Clef -> Utiliser des caractères plutôt que des images. Légers, CSS, pas de téléchargement supplémentaire (hormis la famille de caractère). Symbol characters Example: Unicode instead of an image Unicode character sets List of Unicode characters

uda-fewd:responsive_images:text_problems

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T23:19:04+00:00

<- PerformanceCSS Techniques -> Autrefois assez commun d'utiliser du texte au format image, pas lues par moteurs de recherches, technologies assistives... @font-faces sites typo-only (pas d'image)

uda-fewd:responsive_images:the_full_monty

Anonymous (anonymous@undisclosed.example.com) — 2017-04-29T13:47:37+00:00

<- The Picture ElementAccessibility -> Art direction, choisir un visuel différent selon les média-queries media queries dans les éléments source avec l'attribut media The Full Monty Examples: * Picture element: art direction * Picture element: with srcset and media queries * Picturefill polyfill ---------- Images are by Jon Q from Pearl Chen’s HTML5 Rocks article

uda-fewd:responsive_images:the_picture_element

Anonymous (anonymous@undisclosed.example.com) — 2017-04-29T13:34:38+00:00

<- srcset and sizes quizzThe Full Monty -> L'élément picture est similaire à vidéo et audio enn cela qu'il fournit des sources additionnelles si le navigateur ne lit pas la première option. Et les navigateur qui ne supportent pas picture ? On leur inclut une balise img dans l'élément picture. Et cet élément image n'est en réalité pas optionnel puisque c'est dans celui-ci qu'on va, de toutes manières, afficher notre fichier image.

uda-fewd:responsive_images:unicode_treble_clef

Anonymous (anonymous@undisclosed.example.com) — 2017-04-05T23:16:28+00:00

<- Symbol charactersIcon Fonts -> quizz, chercher la clef de sol en unicode et donner le code HTML 𝄞 Il est recommandé d'utiliser directement le symbole dans le HTML, et non son code HTML.

uda-fewd:responsive_images:using_dev_tools_on_mobile

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T18:33:37+00:00

<- Setup for mobileMobile tools for iOS -> 1. ouvrir sur la machine de dev avec chrome canary : 2. ouvrir le site à debuguer sur le device android et brancher le câble usb 3. confirmer sur le mobile que vous voulez autoriser l'usb debugging (popup sur le mobile) 4. sur chrome:inspect onglet devices, on peut voir les dispositifs connecté à l'ordinateur, ainsi que les onglets qui y sont ouverts. On peut les afficher, les recharger, fermer

uda-fewd:responsive_images:why_responsive_images

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T18:14:16+00:00

<- Course IntroductionIntro to Project -> Lesimages sont 62% de ce qui est envoyé sur le web (le HTML, pas grand chose, et le reste, le reste !) Le web a en fait été pensé avec l'adaptativité à l'esprit, pour permettre de publier du contenu vers une large variété de dispositifs.