Deux ou trois choses à savoir Deux ou trois choses à savoir introduction

Ordinateur

Avant d’aborder le web et ses langages, la naissance de l’informatique et son évolution permettent de comprendre les enjeux d’Internet. L’étymologie du mot ordinateur nous donne des informations intéressantes.

Le mot « ordinateur » fut introduit par IBM France en 1955 (…) ils demandèrent au professeur Perret, de suggérer un « nom français pour sa nouvelle machine électronique destinée au traitement de l’information (IBM 650), en évitant d’utiliser la traduction littérale du mot anglais computer (« calculateur » ou « calculatrice »), qui était à cette époque plutôt réservé aux machines scientifiques ».
(…)
Le professeur proposa un mot composé centré autour d’ordonnateur : celui qui met en ordre et qui avait aussi la notion d’ordre ecclésiastique dans l’église catholique (ordinant). Il suggéra plus précisément « ordinatrice électronique », le féminin ayant pu permettre, selon lui, de mieux distinguer l’usage religieux de l’usage comptable du mot.

« IBM France retint le mot ordinateur et chercha au début à protéger ce nom comme une marque. Mais le mot fut facilement et rapidement adopté par les utilisateurs et IBM France décida au bout de quelques mois de le laisser dans le domaine public. »
— fr.wikipedia.org/wiki/Ordinateur

Historique

Internet est né vers la fin des années 60, puis rapidement le mail est apparu en 1972. Le web arrive au début des années 90 avec la création du HTML et du premier navigateur. Entre ces deux périodes, les technologies ont évolué, les ordinateurs sont devenus personnels et le réseau s’est étendu à l’échelle mondiale. Aujourd’hui, les téléphones apportent une nouvelle dimension à notre relation avec Internet.

Internet Ne doit pas être confondu avec World Wide Web.
— fr.wikipedia.org/wiki/Internet

En complément : (une) histoire du design interactif par Étienne Mineur.

Quelques dates :

• 1977 : Atari 2600 ;
• 1981 : MS-DOS ;
• 1983 : Famicom (NES) ;
• 1984 : MacOS ;
• 1987 : Illustrator ;
• 1990 : Photoshop ;
• 1993 : Doom ;
• 1994 : PlayStation ;
• 1998 : Google ;
• 1999 : InDesign ;
• 2001 : Wikipédia ;
• 2003 : MySpace ;
• 2004 : Facebook ;
• 2005 : YouTube ;
• 2006 : Twitter ;
• 2007 : iPhone ;
• 2008 : Google Chrome ;
• 2010 : Instagram ;
• 2011 : SnapChat & Nyan Cat ;
• 2012 : Candy Crush ;
• 2013 : Flappy Bird ;
• 2016 : Pokemon Go ;
• 2017 : FaceApp.

Base du langage

L’HyperText Markup Language est le langage à la l’origine de la première page web de l’histoire. Le HTML permet de lier des contenus et de structurer du texte en utilisant des balises.
Une grande qualité du HTML étant sa pérennité celui-ci reste toujours lisible dans les navigateurs d’aujourd’hui.

Graphisme à l’écran

Les surfaces d’affichage sont des dispositifs très variés, les spécificités de chaque écran engendrent de nombreuses combinaisons que l’on peut multiplier par les habitudes de chacun. Si votre travail de graphiste se destine à une borne spécifique (musée, aéroport, hôtel…) ou juste votre ordinateur, il sera facile d’anticiper le résultat final, mais cela sera rarement le cas.

Le design web nécessite une approche stratégique et complexe basée sur une bonne connaissance des contraintes. La préoccupation du graphiste étant la mise en page, le premier obstacle vient de la multitude d’écrans sur le marché. Il est rare d’avoir le même affichage d’un site d’une machine à l’autre.
Cette contrainte vous obligera à tester sur différents appareils, jouer avec des prototypes et régler la fluidité des éléments à différentes étapes de votre projet. La fluidité des éléments est propre aux graphismes à l’écran, il s’agit de fixer la taille des blocs ou des marges en utilisant des pourcentages.

La tendance actuelle étant de créer plusieurs mises en page pour améliorer l’affichage entre les appareils (téléphone, télévision, portable, tablette, console de jeux…), on parle de site web adaptatif.
Notez bien, qu’il est nécessaire d’anticiper et d’adapter votre design afin d’être lisible et compréhensible, même si vous n’avez pas assez ou trop d’espace.

DPI, Retina et HDPI

Chaque écran dispose d’une définition native exprimée en pixel et d’un réglage logiciel définissant la résolution, pendant longtemps l’écran étalon fut le 1024 ×768 et les sites étaient optimisés pour cet espace, mais aujourd’hui il faut s’imposer un panel plus complet.
Quelques résolutions d’écran d’ordinateur par ordre de popularité mondiale

1. 1366 × 768 (29,49%)
2. 1920 × 1080 (14,73%)
3. 1024 × 768 (6,43%)
4. 1280 × 800
5. 1440 × 900
6. 1280 × 1024
7. 1600 × 900
8. 1680 × 1050
9. 1360 × 768
10. 1280 × 720
11. 1920 × 1200
12. 1024 × 600
13. 1280 × 768
14. 1364 × 768
15. 1536 × 864
16. 2560 × 1440

(source : http://gs.statcounter.com/)
Attention, très peu d’utilisateurs naviguent en plein écran, l’interface du navigateur et du système d’exploitation peuvent facilement rogner 150 pixels sur la hauteur et 18 pixels sur la largeur.

DPI

La définition et l’usage de DPI portent à confusion, dots per inch ou points par pouce (PPP) en français n’a pas vraiment de sens pour le web, il s’agit d’un nombre de points sur une surface donnée. Les écrans sont certes des surfaces, mais l’approche est différente. Les techniques d’impression nécessitent généralement une résolution de 300 dpi. Pour le web, il faut se fier aux nombres de pixels et aux types d’écrans.
Néanmoins, des subtilités existent, si vous réalisez votre maquette sur Adobe Photoshop, par défaut (dans les préférences) celui-ci fixe les corps de typographie en points (pt). Pour garder vos repères, il est alors préférable de régler votre document à 72 dpi, ainsi 1 pt égale 1 px.
Rien ne vous empêche d’avoir une maquette web en 300 dpi mais la conversion des corps de typographie perturbera votre travail (un corps 3,84 pt sera lisible, car il représentera 16px).

Retina et HDPI

Une autre subtilité est le travail d’image pour écran rétina et HDPI. Depuis la naissance du web, les technologies d’affichage ont évolué et s’améliorent encore. Les innovations récentes permettent de réduire la taille des pixels matériels. Ces améliorations connues sous les noms de xxhdpi, xhdpi, hdpi et retina ajoutent un gain de définition à l’écran avec un pixel 1,5 à 3 fois plus petit selon les appareils. On parle de PPI pour pixels per inch (la traduction en PPP porte à confusion), cela permet de mesurer le nombre de pixels par pouce sur l’écran, la densité.
Quelques valeurs :

• MacBook 13 pouces : 113 ppi
• MacBook Retina 13 pouces : 227 ppi
• MacBook 15 pouces : 128 ppi
• MacBook Retina 15 pouces : 220 ppi
• Sony Xperia Z 5 pouces : 441 ppi

http://screensiz.es/phone

Le pixel étant l’unité de base, un texte en corps 16 px sur un appareil avec deux fois plus de pixels ressemblerait à un corps 8 px, rendant celui-ci illisible et cette technologie superfétatoire ; judicieusement grâce aux logiciels le corps ne change pas et le dessin du caractère s’affine en se basant sur son tracé vectoriel.

Pour les images bitmaps, il faudra fournir quatre à neuf fois plus de pixels pour avoir un affichage parfait, une petite photo de 640 × 320 = 204 800 nécessitera une source de 1280 × 640 = 819 200, le cas échéant un flou d’extrapolation sera visible. Quelques techniques seront abordées dans les prochains chapitres pour bien intégrer ses images.

Le même site avec deux définitions d’écran différentes :

Macro, Pixels & Retina

Voici une expérience de photographie macro de trois réglages Retina (défaut, intermédiaire, plus d’espace) d’une grille de 5px avec des lignes de 1px.

See the Pen Line 5px × 5px by Benoît Wimart (@benoitwimart) on CodePen.dark

Autres écrans

Pour finir, la photo de l’écran géant devant la Philharmonie de Paris.