emojileçons pour le webdesign                    dascritch.com
Jai deux grandes passions :         ●           La téléphonie Japonaise         ●           Lunicode(bon en fait, jen ai d...
lactu immédiate emoji●    entrée officielle dans unicode version 6.1●    disponibles dans liPhone, toutes locales●    disp...
1999, Le monde : GSM (ou CDMA)●    Best seller : Nokia 3210●    Écran monochrome 72 × 28●    Sonnerie mono●    Navigation ...
1999, Japon : Les feature phones●    Matériellement bloqués à un opérateur,    protocoles propriétaires●    Écran couleur ...
Marché domestique●    120 millions dhabitants●    pouvoir dachat assez important●    renouvellement dune chaine hi-fi :   ...
Internet sur 携帯電話 (1999)●    Préconfiguré●    Écran couleur affichant les kanji●    Web proprio à guidelines assez importa...
Des fonctions très en avance                        Appareil photoJapon : 2000                             Europe : 2004  ...
Les systèmes décritures●   46 hiragana    ひらがな●   48 katakana    カタカナ●   1945 kanji     漢字●    52 romanji     (alphabet la...
Cest quoi un emoji ?      Mot valise : emotion ji    Caractère semi-graphique     intégré à la police texteRendu géré comm...
Pourquoi ?        (*  ̄ m  ̄ )             (^^;)          (>_<)>          m(_ _)m         ⌒▽⌒ )         (#^.^#)             ...
Un moyen idéal dunifier lUI●    Menu internes du téléphone●    Illustrations dans les e-mails●    Portail de lopérateur●  ...
Un symbole texte / une image●    Pixel art●    Taille originelle entre 12×12 et 15×15    (maintenant vectorisée)●    en co...
Image préchargée en dur●    Économie de bande-passante    (non négligeable quand on était à 9600 bauds)●    Plus grande ré...
Des palettes demoji thématiques       Aspect pouvant changer     selon le modèle de téléphone        Exemple: MVNO Disney ...
Design industriel           © Copyright sauf que cela ne les a pas empêchésdavoir des symboles très très proches
Petite démo       Mitsubishi m420(2005, i-mode chez Bouygues)
Des procédures dappels...    ... non standards    (aspro anyone ?)
J-Phone Vodafone SoftBank  jHTML : Plage ASCII alternative         ( Ctrl-N / Ctrl-O )          1B 24 46 3C 0F
SAUF QUEavant lunicode, ya plein de charsets                 JIS             JIS X 0208              Shift_JIS            ...
Pourquoi faire simple ?
Unicode 6.1     cest de la magie :       Apple, Google,les 3 opérateurs concurrents   ont recasé les emoji dans un standar...
Vous croyez que celane concerne que le Japon ?            En fait,on refait les mêmes erreurs !
Avec larrivée des webfonts      On voit des sites utiliserdes polices qui remplacent une lettre          par un symbole.  ...
4 fois le même texte
Et en accessibilité ?Imaginez ceci lu par une synthèse vocale :              J +33 5 34...              K +33 7 99...     ...
Répétez ce mantra :Une consonne est une consonne,     un chiffre, un chiffre,   une virgule, une virgule,             point.
Utiliser des symboles :Petit retour dexpérience
Contexte : set-top box      Univers défini par un constructeur           4 résolutions possibles :                    ●   ...
Créer une interface player     indépendante de la résolution         se passer des images    utiliser les caractères symbo...
sauf que...la box utilisait une très vieille version de la font
TL;DHsi si, jen vois au fond qui dorment
Un caractère est lélément le moins accessible      par rapport à une balise <img />            ou une extension xml
Il faut utiliser un symbole pour ce quil signifie  pas ce quil évoque vaguement pour vous
Il ne faut jamais utiliser une police       qui met des glyphes visuelsà la place des symboles conventionnels
Avant dutiliser une police dingbats       vérifiez que le symbolenest pas déjà officiellement présent              en unic...
Si vous utilisez une police qui crée ses symboles       vérifiez quils sont bien définis   dans le champ “usage privé” de ...
Si vous utilisez un symbole relativement récent               Il faut que lOS,              les bibliothèques             ...
et quil aie une police  avec ces glyphes   (ou les fournir)
Si vous utilisez les variantes “enrichies”Il faut que le système de rendu accepte           les polices couleurs
Si vous êtes dev :      Javascript/DOM        Android/Java Attention au charset interne  utilisé par votre langage :UCS-2,...
Cest QR , cest Questions Réponses
http://dascritch.com
http://dascritch.com
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
Prochain SlideShare
Chargement dans…5
×

Des emoji dans l'unicode : leçons pour le webdesign

1 157 vues

Publié le

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

Publié dans : Design
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 157
Sur SlideShare
0
Issues des intégrations
0
Intégrations
186
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Des emoji dans l'unicode : leçons pour le webdesign

  1. 1. emojileçons pour le webdesign dascritch.com
  2. 2. Jai deux grandes passions : ● La téléphonie Japonaise ● Lunicode(bon en fait, jen ai dautres)
  3. 3. lactu immédiate emoji● entrée officielle dans unicode version 6.1● disponibles dans liPhone, toutes locales● disponibles dans certains Android (appli clavier installée par des opérateurs)
  4. 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. 5. 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)
  6. 6. Marché domestique● 120 millions dhabitants● pouvoir dachat assez important● renouvellement dune chaine hi-fi : 18 mois● porté sur la nouveauté et les modes● équipement faible en ordinateurs familiaux● transports en communs longs
  7. 7. 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
  8. 8. Des fonctions très en avance Appareil photoJapon : 2000 Europe : 2004 Lecteurs QR CodeJapon : 2004 Europe : 2011 NFC embarquéJapon : 2004 (Felica) Monde : 2011 TV broadcast pour mobilesJapon : 2006 (1Seg) Monde : (mouahaha) DragonneJapon : 1994 Europe : 2002 Apple : 2012
  9. 9. 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 demoji (ils nen étaient plus à ça près en ROM)
  10. 10. Cest quoi un emoji ? Mot valise : emotion ji Caractère semi-graphique intégré à la police texteRendu géré comme pour un textePictographes : Pensez aux dingbats
  11. 11. Pourquoi ? (*  ̄ m  ̄ ) (^^;) (>_<)> m(_ _)m ⌒▽⌒ ) (#^.^#) (ToT)(● ´∀ `)ノ♡ ♡ o 。 .(✿ฺ 。 ✿ฺ)
  12. 12. Un moyen idéal dunifier lUI● Menu internes du téléphone● Illustrations dans les e-mails● Portail de lopérateur● Sites édités par les tiers Usage codifié par les guidelines opérateur
  13. 13. Un symbole texte / une image● Pixel art● Taille originelle entre 12×12 et 15×15 (maintenant vectorisée)● en couleurs● animée
  14. 14. 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 dimage absente/cassée
  15. 15. Des palettes demoji thématiques Aspect pouvant changer selon le modèle de téléphone Exemple: MVNO Disney Mobile
  16. 16. Design industriel © Copyright sauf que cela ne les a pas empêchésdavoir des symboles très très proches
  17. 17. Petite démo Mitsubishi m420(2005, i-mode chez Bouygues)
  18. 18. Des procédures dappels... ... non standards (aspro anyone ?)
  19. 19. J-Phone Vodafone SoftBank jHTML : Plage ASCII alternative ( Ctrl-N / Ctrl-O ) 1B 24 46 3C 0F
  20. 20. SAUF QUEavant lunicode, ya plein de charsets JIS JIS X 0208 Shift_JIS ISO-2022 EUC-JP et chacun a placé ses emoji où ça lui plaisait...
  21. 21. Pourquoi faire simple ?
  22. 22. Unicode 6.1 cest de la magie : Apple, Google,les 3 opérateurs concurrents ont recasé les emoji dans un standard commun
  23. 23. Vous croyez que celane concerne que le Japon ? En fait,on refait les mêmes erreurs !
  24. 24. Avec larrivée des webfonts On voit des sites utiliserdes polices qui remplacent une lettre par un symbole. Par exemple : J => téléphone
  25. 25. 4 fois le même texte
  26. 26. Et en accessibilité ?Imaginez ceci lu par une synthèse vocale : J +33 5 34... K +33 7 99... L +33 5 72... MHRF
  27. 27. Répétez ce mantra :Une consonne est une consonne, un chiffre, un chiffre, une virgule, une virgule, point.
  28. 28. Utiliser des symboles :Petit retour dexpérience
  29. 29. 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)
  30. 30. Créer une interface player indépendante de la résolution se passer des images utiliser les caractères symbolesproblèmes dadaptations gérés par la box BIG WIN !
  31. 31. sauf que...la box utilisait une très vieille version de la font
  32. 32. TL;DHsi si, jen vois au fond qui dorment
  33. 33. Un caractère est lélément le moins accessible par rapport à une balise <img /> ou une extension xml
  34. 34. Il faut utiliser un symbole pour ce quil signifie pas ce quil évoque vaguement pour vous
  35. 35. Il ne faut jamais utiliser une police qui met des glyphes visuelsà la place des symboles conventionnels
  36. 36. Avant dutiliser une police dingbats vérifiez que le symbolenest pas déjà officiellement présent en unicode
  37. 37. Si vous utilisez une police qui crée ses symboles vérifiez quils sont bien définis dans le champ “usage privé” de lunicode surtout pas en “expérimental” ou “non encore attribué”
  38. 38. Si vous utilisez un symbole relativement récent Il faut que lOS, les bibliothèques et logicielsacceptent des versions récentes de lunicode
  39. 39. et quil aie une police avec ces glyphes (ou les fournir)
  40. 40. Si vous utilisez les variantes “enrichies”Il faut que le système de rendu accepte les polices couleurs
  41. 41. Si vous êtes dev : Javascript/DOM Android/Java Attention au charset interne utilisé par votre langage :UCS-2, UTF-16, MUTF-8, CESU-8
  42. 42. Cest QR , cest Questions Réponses
  43. 43. http://dascritch.com
  44. 44. http://dascritch.com

×