Pourquoi le monde de l’édition devrait
s’intéresser au web

Cette présentation est disponible à l’adresse

https://jaypanoz.github.io/pilen2016/

(si ça passe mal sur Android, essayez la version ordinateur
dans les options de Chrome)

(au pire, il y a un fichier PDF… Désolé !)

Fausse couverture d’un livre Oh Really? intitulé Breaking Reading Systems, the definitive guide, de Jiminy Panoz
Jiminy Panoz pendant sa conférence Paris Web 2016.
© Sophie Imbach
On a tous un rôle à jouer, le slogan 2016 de l’événement, inscrit sous un poing levé.
© Paris Web

A Band Apart

WaSP.

Web Standards Project

Missions

  1. Promouvoir les standards
  2. Éduquer/former la communauté
  3. Créer et héberger des groupes de travail
  4. Concevoir des tests de compatibilité (Acid)

1998 – 2013

Résultat

Forum du Web Platform Incubator Community Group, où tout à chacun peut venir soulever des problèmes ou demander de nouvelles spécifications.

La communauté web, une ruche

Chacun apporte ce qu’il peut apporter

Des sites

Page d’accueil du laboratoire de Jen Simmons, inspirée par le style international (design suisse) et rendue possible grâce aux nouvelles spécifications CSS.

Des expérimentations

(si vous publiez de la BD…)

  1. A Responsive Graphic Novel In Flexbox
  2. Dynamic Graphic Novel with clip-path
  3. Manga Panel Animated with HTML5 Canvas
  4. Making Comic Book Speech Bubbles with SVG
  5. Staggered and Fainting Text with SVG
  6. Comic Book FX Lettering with SVG Filters

Des outils

Des millions de projets open source sur Github.

Même Adobe, Apple et Microsoft
sont de la partie.

jQuery.

L’impact d’une librairie JavaScript

Tu n’as qu’à utiliser jQuery. Stack Overflow

Vous n’avez peut-être pas besoin de jQuery. Le web moderne

(youmightnotneedjquery.com)

Ce qu’il faut retenir

  1. Il faut avancer, coûte que coûte
  2. Il nous faut absolument des cas d’utilisation
  3. Les besoins et pratiques mènent aux standards

In statu quo ante bellum?

Rappel

  1. HTML = structure
  2. CSS = mise en page
  3. JavaScript = interaction

Jusqu’à EPUB 3.0.1

Version bien définie de HTML +
Sous-ensemble normé de CSS
(EPUB Stylesheets)

Avec EPUB 3.1

La référence (HTML + CSS) devient celle du W3C

(source : http://www.idpf.org/epub/31/spec/epub-changes.html)

Et les liseuses et Kindle alors?

Amélioration progressive

On conçoit une base qui fonctionne partout, on améliore progressivement, en fonction du support des solutions de lecture.

Pourquoi ?

  1. Structure HTML5 plus riche
  2. Spécifications CSS qui résolvent des problèmes
  3. APIs JavaScript qui rattrapent les apps natives

CSS

Les designers web s’inspirent des magazines ou livres, et demandent des spécifications pour mettre en page plus facilement.

SVG

  • On peut réaliser des compositions graphiques complexes avec SVG, comme par exemple une page de titre.
  • En utilisant la valeur currentColor en CSS, on peut même adapter la composition au mode nuit.

Lettrines

Avec initial-letter, les lettrines deviennent extrêmement faciles à styler.

Fonctionnalités Open Type

Les solutions de lecture n’activent que trop rarement les fonctionnalités Open Type pour soigner la lisibilité du texte.
  • On peut pourtant activer les jeux stylistiques, les vraies petites capitales, les fractions ou les chiffres elzevériens.
  • On peut aussi activer les chiffres alignés à chasse fixe dans les tableaux.

Habillage d’images

  • Quand on utilise float, le texte habille la boîte qui contient l’image.
  • Avec shape-outside et clip-path, on peut définir comment le texte doit habiller l’image en elle-même.

Expressions mathématiques

  • Les images au ratio portrait avec une légende sont toujours délicates à styler.
  • Quand on augmente la taille de caractère, la légende peut se retrouver page suivante.
  • La fonction CSS calc peut résoudre ce problème.
  • Il suffit d’indiquer que l’image doit mesurer une certaine hauteur moins celle de sa légende.

Grilles de composition

  • Flexbox permet d’aligner verticalement.
  • Ce qui peut être pratique pour une page de titre, où les marges seront réduites lorsque l’on augmente la taille de caractères, pour conserver cet alignement vertical.
  • La spécification permet également de créer des grilles d’images en 2 lignes.
  • Et dispose d’un algorithme puissant capable d’adapter le contenu de la grille au besoin.

Liens intéressants

JavaScript

Ce n’est pas uniquement des interactions bien visibles, c’est aussi et surtout un outil permettant d’améliorer l’expérience utilisateur.

Interactions utilitaires

Concevoir des interactions qui peuvent aider le lecteur. Par exemple, mettre en avant le contenu important…

… ou sauvegarder automatiquement une checklist.

La synthèse vocale

  • Pour activer la fonction dans iOS, il faut, 1. ouvrir les préférences.
  • 2. se rendre dans l’onglet Accessibilité des préférences générales.
  • 3. Activer la fonctionnalité Parole.
  • 4. Choisir d’énoncer la sélection ou le contenu de l’écran.
  • 5. Effectuer les réglages de son choix.

5 étapes minimum dans iOS

Il y a une API pour ça : Speech Synthesis. Le web moderne

Liens intéressants

Le web ne nous a pas attendus

Nous avons des intérêts communs,
il faut construire des ponts.

Par où commencer ?

L’IDPF a fait beaucoup de choses

Merci !