Apparus dans la téléphonie japonaise en 1998 et limité à ce pays jusqu'en 2010, pourquoi leur standardisation donne d'importantes leçons de webdesign.
Présentation issu du dossier sur mon blog http://dascritch.net/post/2012/03/06/Des-emojis-dans-l-Unicode-1
Enregistré lors de l'Apéro Web Toulouse de Septembre 2012
2. J'ai deux grandes passions :
●
La téléphonie Japonaise
●
L'unicode
(bon en fait, j'en ai d'autres)
3. l'actu immédiate emoji
●
entrée officielle dans unicode version 6.1
●
disponibles dans l'iPhone, toutes locales
●
disponibles dans certains Android
(appli clavier installée par des opérateurs)
4. 1999, Le monde : GSM (ou CDMA)
●
Best seller : Nokia 3210
●
Écran monochrome 72 × 28
●
Sonnerie mono
●
Navigation haut/bas
●
SMS
●
Si support wap (téléphones haut de gammes),
1200 bauds, à se configurer à la main
●
Constance UI web mobile ? SRSLY ?
5.
6. 1999, Japon : Les feature phones
●
Matériellement bloqués à un opérateur,
protocoles propriétaires
●
Écran couleur (au moins 120 par 80)
●
Sonneries midi, voire samples
●
croix directionnelle
●
Accès data préconfiguré
●
Liés à une adresse e-mail
●
Pouvant aller sur le web (sort of)
7. Marché domestique
●
120 millions d'habitants
●
pouvoir d'achat assez important
●
renouvellement d'une chaine hi-fi :
18 mois
●
porté sur la nouveauté et les modes
●
équipement faible en ordinateurs familiaux
●
transports en communs longs
8.
9. Internet sur 携帯電話 (1999)
●
Préconfiguré
●
Écran couleur affichant les kanji
●
Web proprio à guidelines assez importantes
dont usage <a accesskey="0…9">
donc interface constante
●
API de paiement de service intégré,
avec très faible marge opérateur
●
Vision Japonaise : proposer un max de services
●
9600 bauds
10. Des fonctions très en avance
Appareil photo
Japon : 2000 Europe : 2004
Lecteurs QR Code
Japon : 2004 Europe : 2011
NFC embarqué
Japon : 2004 (Felica) Monde : 2011
TV broadcast pour mobiles
Japon : 2006 (1Seg) Monde : (mouahaha)
Dragonne
Japon : 1994 Europe : 2002 Apple : 2012
11. Les systèmes d'écritures
● 46 hiragana ひらがな
● 48 katakana カタカナ
● 1945 kanji 漢字
●
52 romanji (alphabet latin)
●
une centaine de ponctuations
●
à ceci, ils ont ajouté une centaine d'emoji
(ils n'en étaient plus à ça près en ROM)
12. C'est quoi un emoji ?
Mot valise : emotion ji
Caractère semi-graphique
intégré à la police texte
Rendu géré comme pour un texte
Pictographes : Pensez aux dingbats
15. Un moyen idéal d'unifier l'UI
●
Menu internes du téléphone
●
Illustrations dans les e-mails
●
Portail de l'opérateur
●
Sites édités par les tiers
Usage codifié par les guidelines opérateur
16. Un symbole texte / une image
●
Pixel art
●
Taille originelle entre 12×12 et 15×15
(maintenant vectorisée)
●
en couleurs
●
animée
17. Image préchargée en dur
●
Économie de bande-passante
(non négligeable quand on était à 9600 bauds)
●
Plus grande réactivité du site
●
Pas d'image absente/cassée
18. Des palettes d'emoji thématiques
Aspect pouvant changer
selon le modèle de téléphone
Exemple: MVNO Disney Mobile
51. Contexte : set-top box
Univers défini par un constructeur
4 résolutions possibles :
●
NTSC
●
PAL
●
768p
●
1080i
(et les scopes 16:9 ou 4:3, letterbox, pan&scan)
52. Créer une interface player
indépendante de la résolution
se passer des images
utiliser les caractères symboles
problèmes d'adaptations gérés par la box
BIG WIN !
55. Un caractère est l'élément le moins accessible
par rapport à une balise <img />
ou une extension xml
56. Il faut utiliser un symbole pour ce qu'il signifie
pas ce qu'il évoque vaguement pour vous
57. Il ne faut jamais utiliser une police
qui met des glyphes visuels
à la place des symboles conventionnels
58. Avant d'utiliser une police dingbats
vérifiez que le symbole
n'est pas déjà officiellement présent
en unicode
59. Si vous utilisez une police qui crée ses symboles
vérifiez qu'ils sont bien définis
dans le champ “usage privé” de l'unicode
surtout pas en “expérimental”
ou “non encore attribué”
60. Si vous utilisez un symbole relativement récent
Il faut que l'OS,
les bibliothèques
et logiciels
acceptent des versions récentes de l'unicode
61. et qu'il aie une police
avec ces glyphes
(ou les fournir)
62. Si vous utilisez les variantes “enrichies”
Il faut que le système de rendu accepte
les polices couleurs
63. Si vous êtes dev :
Javascript/DOM
Android/Java
Attention au charset interne
utilisé par votre langage :
UCS-2, UTF-16, MUTF-8, CESU-8