Déterminer la ligne de flottaison

Lorsque l’on développe un site internet, il est important de réfléchir en amont à l’agencement des informations et encore plus à l’emplacement des informations principales et importantes pour l’internaute.

Sur les différents terminaux, il existe une limite virtuelle entre ce que l’internaute voit à l’écran dès le chargement de la page de ce qu’il ne voit pas si il n’utilise pas la barre de défilement, c’est ce qui est couramment appelé la ligne de flottaison.

image_ecran_flotaison_2

Cette limite de flottaison varie forcément en fonction du terminal utilisé, de la définition de son écran, de l’utilisation ou non de la barre de favoris. Il est donc impossible de la déterminer avec certitude.

Du coup, pour la déterminer au mieux, il faut regarder dans les statistiques quelle est la résolution la plus utilisée.

Dans l’exemple que je vais vous donner, je me suis basé sur une résolution qui domine ces dernières années et qui continue de progresser il s’agit de la résolution 1366×768 .

Sur ces 768px, il faut retirer la partie haute du navigateur (environ 90px) et la barre des tâches du bas (environ 40px). Ce qu’il fait qu’il reste  768-90-40 = 638px pour la zone au dessus de cette ligne.

La recherche de cette ligne peut être utile notamment dans le développement d’un e-commerce mais pour le reste des sites, des études tendent à montrer que la partie située sous la ligne est de plus en plus regardée et parfois plus longtemps que la zone située au dessus de la ligne.

A chacun de faire son choix.

Offline first avec Upup.js

Offline first ?

De nos jours, les sites modernes sont construit en mobile-first. Mais dans un monde on l’on est mobile, la connexion elle n’est pas stable tout le temps. On peux donc penser Offline-first.

La librairie UpUp permet d’ajouter rapidement des fonctionnalités offline sur un site web.

Pour ajouter un contenu basique il suffit d’ajouter le script suivant :

Avec ce bout de script, si la connexion est perdue cela permet d’avoir un affichage minimal avec du HTML simple, et ainsi améliorer l’expérience utilisateur.

Comment ça marche ?

La librairie UpUp utilise les ServiceWorkers  lorsqu’il y a une erreur réseaux. Les ServiceWorkers sont des scripts qui tournent en arrière-plan du navigateur et qui permettent de connaître le statut des requêtes.

Donc quand un utilisateur visite pour la première fois le site, UpUp enregistre un ServiceWorker et il lui donne une liste de fichiers en cache pour plus tard.

À la prochaine visite de l’utilisateur, le ServiceWorker écoute les erreurs réseaux, et s’il y a un échec, il va chercher dans le cache et retourne les fichiers présent comme s’il venaient du réseau.

Créer une expérience offline riche.

On peux injecter du HTML pure mais, pour plus de propreté et de maintenabilité il est possible de séparer  dans plusieurs fichier le contenu offline de cette manière :

Il est aussi possible d’y ajouter notre propre style en ajoutant la ligne suivante pour permettre d’aller chercher les fichiers dans le cache :

Selon votre imagination, il est possible de charger tout un tas de données tels que des données dynamiques en fonction de l’utilisateur, d’autre scripts, des images, pdf, videos etc …

Ou placer le script?

Pour des raison de sécurité les requêtes réseaux sont visibles au sein d’un scope. Le scope qu’un ServiceWorker peu affecter est déterminé par là ou le script est placé.

Par exemple si l’on place le script dans le dossier suivant : https://monsite.com/js/upup.sw.min.js, UpUp ne sera capable de montrer le contenu offline que si l’utilisateur essayer d’acceder au dossier /js/ .

C’est pourquoi il est important de placer idéalement les scripts à la racine du site sur le même serveur.

Restriction

Cette librairie ne fonctionne qu’avec des site web en HTTPS et possédant par conséquence un certificat SSL pour préserver la sécurité et la vie privée de l’utilisateur.

UpUp est supporter par Chrome 40+, Opera 27+, et Firefox 41+. cependant si un utilisateur possède un autre navigateur il ne notera rien de différent.

 

source :  www.talater.com

git du pojet : UpUp

 

Srcset et size

L’attribut srcset

L’attribut srcset, est un attribut pour les balises images qui permet de résoudre les problèmes que pose l’intégration de site responsive avec des images.

Cet attribut vient en corrélation de l’attribut src habituel d’une image et permet de spécifier une liste d’image à afficher selon certain critère.

Cela ressemble étrangement au média queries, mais la façon de penser est un peu différente.

En effet une média querie vas dire : utilise ceci quand la taille du conteneur est moyenne, alors que srcset vas dire dire : cette image est de taille moyenne.

en pratique cela donne ce morceau de code :

Si l’attribut srcset n’est pas supporté, c’est l’attribut src qui par défaut prend le relais.

Pour connaitre les limites techniques des navigateurs à l’heure actuelle  sur cet attribut je vous laisse regarder can i use.

Descripteurs

On peut aussi voir que chaque images précisé dans le srcset est suivi d’un chiffre et d’un w. Le w est appelé descripteur. Il en existe deux : le descripteur x et le descripteur w.

x: permet de préciser des images optimisées pour des appareils avec des densités de pixels à l’écran différentes ( utile pour les écrans rétinas par exemple )

w : est un  indicateur de la taille de l’image pour le navigateur.

c’est bien joli tout ça mais comment faire pour savoir quelle image sera affichée ?

Voici ce que dit la spécification à ce sujet :

L’agent utilisateur va calculer la densité de pixel réelle de chaque image à partir du descripteur w spécifié et des tailles de rendus spécifiées dans l’attribut sizes. Il peut ensuite choisir n’importe quelle ressource en fonction de la densité de pixels de l’écran de l’utilisateur, de son niveau de zoom, ou peut-être d’autres facteurs comme les conditions de réseau de l’utilisateur.

En gros le navigateur fait ce qu’il veut.

L’attribut size

L’attribut size est obligatoire désormais pour l’utilisation de scrset. Il permet de spécifier la largeur d’affichage de l’image selon des points de ruptures.

L’utilité de size et qu’il permet de spécifier différente largeurs d’affichage pour notre image selon le reste de notre page.  Ici les images prendront toujours une largeur égale à 100% du viewport. Les points de ruptures sont géré par le navigateur.

Mais il est aussi tout à fait possible de définir manuellement les points de ruptures :

Ici le point de rupture est à 20em s’il n’est pas rempli l’image prendra une largeur égale à 100% du viewport.

 

source : hteumeuleu, ericportis.com

CSS : poids des sélecteurs

Le CSS peut être considéré comme un langage chaotique par certaine personne, Mais en y regardant de plus près le CSS obéit à des règles bien particulières.

Il nous est tous arrivé d’utiliser une librairie tel que Bootstrap par exemple et de voir notre style se faire surcharger par le style de la librairie. La question qui se pose est comment savoir quelle règle va s’appliquer ?

Avant de se plonger dans les arcanes du CSS, il est bon de savoir deux choses :

  • plus un élément stylisé sera « lourd », plus il y à de chance que le style s’applique
  • L’inspecteur web montre les style appliqué par ordre d’importance

Poids des sélecteurs

Pour déterminer le poids d’un sélecteur css par rapport à un autre, il vous suffit de remplir le tableaux ci-dessous :

!important Dans l’attribut style Nb #id Nb .class Nb Balise
Ciblage a 0 0 0 0 0
Ciblage b 0 0 0 0 0

Dans Attribut style : mettre « 1 » si vos propriétés sont dans un attribut style.
nb #ID : mettre le nombre d’id qui constitue votre chemin de ciblage.
Nb .class : mettre le nombre de class qui constitue votre chemin de ciblage.
Nb Balise : mettre le nombre de balises qui constitue votre chemin de ciblage.

Une fois le tableau remplie pour vos ciblages à comparer, vous pouvez les comparer. L’importance se fait par colonne de gauche à droite. Si il n’y a pas égalité, c’est la valeur la plus grande qui l’emporte; sinon, je passe à la colonne de droite suivante. Si les poids sont strictement égaux c’est la cascade qui permettra de savoir quel style s’applique.

Vous trouverez plus bas plusieurs exemples à un, deux sélecteurs ou plus.

Sélecteurs css particuliers

Quelques informations sur la valeur de certain sélecteur css :
p.maclass : compte 1 pour la balise et 1 pour la class
p#monId : compte 1 pour la balise et 1 pour l’id
body > p : compte 2 pour la balise et « < » n’est pas pris en compte.
div + div.maclass{...} compte 2 pour la balise et 1 pour la classe et « + » n’est pas pris en compte.
p:first-line : compte 2 pour la balise.
p:first-child : compte 1 pour la balise et 1 pour la class.
p[id="monId"] : compte 1 pour la balise et 1 pour la class, quelque soit la valeur de l’attribut [att=valeur] correspond a une classe.
* : compte n’est pas pris en compte.

Attention si vous avez ! dans une de vos propriétés cela change les règles car elle est prioritaire sur toutes les règles de ci-dessus.

 

récapitulatif en image : CSS Specify

source : Zone CSS

#Barcamp : Création de webdesign en 2016

Points clés :

  • Style minimaliste
    • sites épurés qui laissent la place aux textes et éléments visuels
  • Conception en mosaïque
    • permet la réorganisation modulable des éléments en responsive
    • organisation fonctionnelle, vision claire
  • Scrolling vertical
    • confortable et les internautes habitués
    • one-page
  • Grandes photos de qualité
    • plus grandes résolutions –> utilisation de grandes images valorisantes
  • Infographies et data visualisations
    • style vectoriel pour afficher des données complexes en une forme compréhensible (animations svg) et ludique
  • Le retour de l’importance de la typo
    • typos = éléments graphiques incontournables
    • un effort conséquent est fait pour améliorer la lecture
    • des textes plus gros et des interlignages
  • Disparitions des grandes images en tête de page
    • sliders dépréciés car un faible taux de clic
    • « fourre-tout » et les gens ne prennent pas le temps de les visualiser toutes
  • Le burgon icon
    • navigation révélée d’un clic
    • menu gauche sortant (slide out) avec un retour à la navigation verticale

Sources :

#Barcamp : Utilisons SVG !

« SVG (Scalable Vector Graphics) est un langage de balisage XML décrivant des images vectorielles bidimensionnelles. On pourrait dire que SVG est aux images ce qu’XHTML est au texte. » (source developer.mozilla.org)

Les images au format SVG étant vectorielles, elles peuvent être redimensionnées sans perte de qualité.

Le format SVG a ainsi plusieurs utilités : créer des logos, des icônes (à la place des icon-fonts), des graphiques, des cartes, des visuels animés (à la place de flash), et même des images responsives (en attendant <picture>).

Créer des SVG

  • Éditeur de texte
  • Inskape
  • Sketch
  • Illustator (version 1.1 de SVG)

Intégrer un SVG

Il a plusieurs façons d’intégrer un SVG dans une page HTML, avec pour chacun ses avantages et inconvénients.

  • <img src= »mon-image.svg » /> ou background-image (mise en cache, mais pas d’interaction via CSS ou JS)
  • <object type= »image/svg+xml » data= »mon-image.svg »> ou <svg version= »1.1″ xmlns= »http://www.w3.org/2000/svg »>…</svg> (pas de mise en cache mais interaction avec CSS/JS)

Dans tous les cas, il est conseillé d’utiliser des fallback pour les navigateurs ne supportant pas le SVG (IE8 et inférieur en général).

Animer un SVG

Pour animer un SVG, on peut utiliser les propriété animation et @keyframes de CSS ou le JavaScript. À noter qu’il existe une multitude de bibliothèques JS permettant de manipuler les SVG plus facilement (SnapSVG, SVG.js, D3.js, Raphael.js…).

Sources :

  • MDN : https://developer.mozilla.org/fr/docs/Web/SVG
  • SVG, format clé du responsive : http://blog.mh-communication.fr/svg-format-cle-du-responsive.html

Photoshop et les gif animés

Si comme moi, votre gif animé exporté via Flash est d’une qualité plus que médiocre (notamment lorsqu’il y a des dégradés…), fermez vite Flash et ouvrez Photoshop !

Ouvrez votre document Photoshop ou partez d’un document vierge.

Cliquez sur « Fenêtre > Montage ». Vous voyez apparaître la fenêtre suivante :

Capture d’écran 2015-04-08 à 16.21.49

Cliquez sur « Créer une animation d’image » :

Capture d’écran 2015-04-08 à 16.23.10

Le principe du gif animé, c’est de faire des séquences d’images. En soi, faire apparaître ou non des images. Avec les calques de Photoshop, rien de plus simple !

Nous allons d’abord créer le scénario, avec des calques, puis les grouper pour faciliter les enchaînements (un groupe de calques par visuel différent).

Capture d’écran 2015-04-08 à 16.34.06

Maintenant, nous allons passer au « Montage d’images ».

Sur la première image, cochez les calques que vous voulez faire apparaître :

Capture d’écran 2015-04-08 à 16.36.52

Ensuite, cliquez sur l’icône « Duplication des images sélectionnées » : Capture d’écran 2015-04-08 à 16.38.37Une deuxième image identique à la première apparaît. Pour celle-ci, cochez les calques à rendre visibles :

Capture d’écran 2015-04-08 à 16.39.56

Vous remarquez, que les calques visibles sur votre scénario se retrouvent sur votre deuxième image.

Continuez ainsi de suite, jusqu’à l’enchaînement voulu :

Capture d’écran 2015-04-08 à 16.42.07

Maintenant, nous allons nous occuper de la durée des images. Vous pouvez choisir le temps d’apparition pour chaque image. Cliquez sur la flèche à droite du temps « 0 s » :

Capture d’écran 2015-04-08 à 16.44.39

Si par exemple, vous souhaitez faire clignoter le bouton « Cliquer ici ! », il suffit de mettre à la suite des images avec le bouton / sans le bouton :

Capture d’écran 2015-04-08 à 16.55.27

Vos séquences d’images sont terminées, nous allons passer à l’export. Cliquez sur « Fichier > Enregistrer pour le Web », choisissez le format GIF, un petit clic sur « Enregistrer » et hop le tour est joué !

animation

Pour les améliorations, nous pouvons utiliser les transitions avec fondus, les déplacements de calques, …

Pour ce faire, placez vous sur l’image où vous voulez faire la transition (par exemple fondu entre le visuel 1 et le visuel 2). Puis, cliquez sur le bouton « Trajectoire des images animées » :

Capture d’écran 2015-04-08 à 17.08.32

Sur cette fenêtre, vous pouvez choisir si la transition se fait avec l’image suivante / précédente, le nombre d’images à rajouter (plus il y a d’images plus la transition est longue) et les paramètres pris en compte (Position –> déplacement de calques, Opacité –> fondu entre les calques) .

Capture d’écran 2015-04-08 à 17.11.39

Voilà le résultat, 3 images ont été intercalées après l’image 2 avec des opacités progressives (ne pas oublier de passer à 0 s les durées des images de transition) :

Capture d’écran 2015-04-08 à 17.12.39

Pour faire des interpolations de mouvement (faire bouger un calque), déplacez un calque sur une image, placez vous sur l’image précédant l’interpolation, cliquez sur l’icône « Trajectoire des images animées », choisissez vos paramètres et voilà :

Capture d’écran 2015-04-08 à 17.17.24

Résultat final en beaucoup moins de temps qu’avec Flash 😉

animation2

Gestion de la favicon compatible pour la majorité des terminaux

Aujourd’hui, devant la multiplicité des terminaux et des navigateurs disponibles, l’ancienne technique qui consistait à prévoir 2 favicons, l’une au format .ico et l’autre en 16×16 au format png ne suffit malheureusement plus.

Chaque navigateur (Chrome, Firefox, IE), marque (Microsoft, Apple) ou système basés sur Androïd utilisent différentes résolutions pour la gestion de la favicon mais aussi différents moyens pour l’intégrer dans le code source du site.

Cet article n’a pas pour but d’être exhaustif mais juste de vous montrer et vous proposer une solution que j’ai adopté pour rendre ce petit icône bien pratique, compatible pour un maximum de terminaux.

PNG ou ICO ?

Et bien, ce sera les 2 :).

Et oui, jusqu’à sa version 10 en tout cas, Internet Explorer est incapable de gérer un format autre que le .ico.

Par contre, pour les versions > IE 10 (il était temps) et pour les autres navigateurs, le png sera nécessaire.

Quelle(s) résolution(s) utiliser pour les PNG ?

Et bien là, vu les multiples cas de figures rencontrés

  • Epingles de sites sous IE/Windows
  • Barres d’adresses des différents navigateurs
  • Ecrans rétina
  • Touch Icons

Voici un petit récapitulatif des résolutions à prendre en compte

Résolution
16×16 Navigateur
24×24 Eplingles IE 9 et Windows 7
32×32 Onglets navigateur, bouton barre des tâches
57×57 iPhone Apple iOs6 non retina
60×60 iPhone Apple iOs7 non retina
64×64 Apple touch icon
72×72 iPad Apple iOs6 non retina
76×76 iPad Apple iOs7 non retina
96×96 Google TV
114×114 iPhone Apple iOs6 retina
120×120 iPhone Apple iOs7 retina
144×144 IE 10 Metro et iPad Apple iOs6 retina
152×152 iPad Apple iOs7 retina
160×160 Chrome Androïd
180×180 iPhone 6+ Apple avec iOS8
196×196 Google TV

Intégration

Bon, puisqu’il existe différents formats de favicons, vous vous doutez bien qu’il existe aussi différentes façons de les intégrer au code. Alors voici ce que l’on peut retenir.

 .ICO

Il suffit juste de le placer à la racine du site sans ajouter de balise dans le code html.

.PNG

Ici, 3 cas de figures

  • Pour les Touch Icons – Apple

Pour les résolutions 57×57, 60×60, 72×72, 76×76, 114×114, 120×120, 144×144, 152×152, il faut les déclarer de la façon suivante dans le code html

Ici, c’est le rel=’apple-touch-icon’ qui est très important.

  • Pour IE 10 Metro

Pour les utilisateurs de Windows 8, ceux-ci ont la possibilité d’épingler des sites sur l’écran d’accueil sous la forme d’un icône (144×144) avec une couleur de fond. Pour cela, voici les 2 balises à insérer

  • Pour tous les autres cas

L’insertion des favicons se fait via la balise suivante

Pour récapituler…

Prévoir les différentes tailles d’images en png et .ico puis insérer les balises dans le head de la page html.

Petit tuyau sympa…

Pour vous faciliter la vie, au niveau de la création de toutes les favicons au bon format, vous pouvez vous rendre sur le site Real Favicon Generator.

Il vous suffira juste d’avoir une image d’assez bonne résolution (minimum 260×260), et il vous générera tous les formats.

Conversion de vidéos avec ffmpeg

Voici la procédure de conversion de vidéos reçues au format .mp4 ou .mov inexploitables pour le Web vu leur taille.

1- Traitement par ffmpeg

1.1 Installation

/!\ Lors de l’installation , il faut vérifier à installer les bons codecs.

NB : S’il vous manque un codec lors de votre conversion, il faut utiliser la commande suivante :

1.2 Conversion

  • D’une vidéo au format mp4 (ou mov) vers du mp4 plus léger

Vous pouvez changer la résolution avec -s et en spécifiant la résolution (elle doit rester proportionnelle à celle d’origine).

Encodage 2-pass

Cette technique permet d’encoder une première fois à débit constant pour faire un index des moments qui vont être encodés avec une qualité exécrable. Ensuite lors du deuxième encodage, la qualité sera équilibrée en baissant la qualité globale des meilleures scènes pour augmenter la qualité des plus mauvaises.

Les paramètres sont simples : on choisit le débit constant voulu (-b), le débit minimum (-minrate) que l’on peut atteindre, et le débit maximum (-maxrate).

Ensuite, -pass 1 signifie que nous sommes en train d’effectuer la première passe.

Pour la seconde passe, utilisez les mêmes paramètres à une exception ! La seule chose à modifier est le paramètre -pass 1 à changer en -pass 2.

  • D’une vidéo au format mp4 convertie vers du mov

Les paramètres sont presque les mêmes à l’exception des codecs utilisés : libtheora pour la vidéo et libvorbis pour l’audio. Et n’oubliez pas de faire la deuxième passe !

Ajouter une version d’export player flash pour Flash CC 2014

1- Allez à l’adresse suivante : http://helpx.adobe.com/flash-player/kb/archived-flash-player-versions.html#playerglobal pour télécharger le fichier 10.1 playerglobal.swc Flash Player

2- Allez dans le dossier /Applications/Adobe Flash CC 2014/. Puis sur le fichier Adobe Flash CC 2014.app, faites un clic droit et cliquez sur « Afficher le contenu du paquet« .

Naviguez jusqu’au dossier Contents/Common/Configuration/ActionScript 3.0. Dans ce dernier, créez un nouveau répertoire parmi les autres dossiers FPxx.x nommé « FP10.1 » et placez votre fichier SWC nouvellement téléchargé ici.

Remarque : Le fichier téléchargé est nommé playerglobal10_1.swc. Renommez le en playerglobal.swc.

3- Revenez en arrière vers le dossier ../Configuration (à droite en dehors du dossier ActionScript 3.0) et allez dans le dossier « Players« . Il y a un certain nombre de fichiers XML ici. Trouvez celui nommé « FlashPlayer10_3.xml » dupliquez-le et renommez-le en « FlashPlayer10_1.xml« .

4- Vous aurez besoin d’un éditeur de texte pour cette partie. Ouvrez le fichier nouvellement dupliqué et remplacez les chaines de caractères « 10.3 » par « 10.1« , enregistrez et vous avez terminé.

5- Redémarrez flash CC 2014 et assurez-vous que vous avez une nouvelle option dans vos paramètres d’exportation pour « Flash Player 10.1« .