SlideShare une entreprise Scribd logo
1  sur  69
emoji

leçons pour le webdesign



                    dascritch.com
J'ai deux grandes passions :

         ●
           La téléphonie Japonaise
         ●
           L'unicode


(bon en fait, j'en ai d'autres)
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)
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 ?
Des emoji dans l'unicode : leçons pour le webdesign
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)
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
Des emoji dans l'unicode : leçons pour le webdesign
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
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
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)
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
Pourquoi ?
        (*  ̄ m  ̄ )
             (^^;)
          (>_<)>
          m(_ _)m
         ⌒▽⌒ )
         (#^.^#)
             (ToT)
(● ´∀ `)ノ♡           ♡ o 。 .(✿ฺ 。 ✿ฺ)
Des emoji dans l'unicode : leçons pour le webdesign
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
Un symbole texte / une image

●
    Pixel art
●
    Taille originelle entre 12×12 et 15×15
    (maintenant vectorisée)
●
    en couleurs
●
    animée
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
Des palettes d'emoji thématiques
       Aspect pouvant changer
     selon le modèle de téléphone
        Exemple: MVNO Disney Mobile
Design industriel



           © Copyright




 sauf que cela ne les a pas empêchés
d'avoir des symboles très très proches
Petite démo


       Mitsubishi m420
(2005, i-mode chez Bouygues)
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 procédures d'appels...
    ... non standards



    (aspro anyone ?)
Des emoji dans l'unicode : leçons pour le webdesign
Des emoji dans l'unicode : leçons pour le webdesign
J-Phone Vodafone SoftBank


  jHTML : Plage ASCII alternative
         ( Ctrl-N / Ctrl-O )


          1B 24 46 3C 0F
Des emoji dans l'unicode : leçons pour le webdesign
SAUF QUE
avant l'unicode, y'a plein de charsets

                 JIS
             JIS X 0208
              Shift_JIS
              ISO-2022
               EUC-JP

    et chacun a placé ses emoji
         où ça lui plaisait...
Pourquoi faire simple ?
Unicode 6.1
     c'est de la magie :


       Apple, Google,
les 3 opérateurs concurrents

   ont recasé les emoji
 dans un standard commun
Vous croyez que cela
ne concerne que le Japon ?


            En fait,
on refait les mêmes erreurs !
Avec l'arrivée des webfonts

      On voit des sites utiliser
des polices qui remplacent une lettre
          par un symbole.


   Par exemple : J => téléphone
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...
              L +33 5 72...
                MHRF
Répétez ce mantra :



Une consonne est une consonne,
     un chiffre, un chiffre,
   une virgule, une virgule,
             point.
Utiliser des symboles :

Petit retour d'expérience
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)
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 !
sauf que...




la box utilisait une très vieille version de la font
TL;DH




si si, j'en 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 qu'il signifie

  pas ce qu'il évoque vaguement pour vous
Il ne faut jamais utiliser une police
       qui met des glyphes visuels
à la place des symboles conventionnels
Avant d'utiliser une police dingbats

       vérifiez que le symbole
n'est pas déjà officiellement présent
              en unicode
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é”
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
et qu'il 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, UTF-16, MUTF-8, CESU-8
C'est QR , c'est Questions Réponses
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
http://dascritch.com

Contenu connexe

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

Smartphone : et l'informatique devint mobile...
Smartphone : et l'informatique devint mobile...Smartphone : et l'informatique devint mobile...
Smartphone : et l'informatique devint mobile...CARA_Lyon
 
C2E Poitiers - Tablettes tactiles : terminaux, usages et marchés
C2E Poitiers - Tablettes tactiles : terminaux, usages et marchésC2E Poitiers - Tablettes tactiles : terminaux, usages et marchés
C2E Poitiers - Tablettes tactiles : terminaux, usages et marchéstablettetactile
 
Pinpin Team - Le Gaming sur le Web avec Flash
Pinpin Team - Le Gaming sur le Web avec FlashPinpin Team - Le Gaming sur le Web avec Flash
Pinpin Team - Le Gaming sur le Web avec FlashFlorian Brochard
 
Presentation SNOM - ÉVÉNEMENT VENTES INDIRECTES : ACROPOLIS – AVENCALL – SNOM
Presentation SNOM - ÉVÉNEMENT VENTES INDIRECTES : ACROPOLIS – AVENCALL – SNOM Presentation SNOM - ÉVÉNEMENT VENTES INDIRECTES : ACROPOLIS – AVENCALL – SNOM
Presentation SNOM - ÉVÉNEMENT VENTES INDIRECTES : ACROPOLIS – AVENCALL – SNOM Acropolis Telecom
 
Ubisoft
Ubisoft Ubisoft
Ubisoft Ricmay1
 
Les chatbots, l’IA dans tout cela, les technologies
Les chatbots, l’IA dans tout cela, les technologiesLes chatbots, l’IA dans tout cela, les technologies
Les chatbots, l’IA dans tout cela, les technologiesLudan Stoecklé
 
Developpement mobile vs open source
Developpement mobile vs open sourceDeveloppement mobile vs open source
Developpement mobile vs open sourceKorteby Farouk
 
Open Wide : Les interfaces graphiques dans l'embarque
Open Wide : Les interfaces graphiques dans l'embarqueOpen Wide : Les interfaces graphiques dans l'embarque
Open Wide : Les interfaces graphiques dans l'embarqueAlexandre LAHAYE
 
Ez18n theorie encoding gouvernance
Ez18n theorie encoding gouvernanceEz18n theorie encoding gouvernance
Ez18n theorie encoding gouvernancegdigugli
 
References hors serie
References hors serieReferences hors serie
References hors serieGBSNetworks
 
Les smartphones Octobre 2011
Les smartphones Octobre 2011Les smartphones Octobre 2011
Les smartphones Octobre 2011Reseau Informed
 
Tk04 Iphone Vs Android Fr
Tk04 Iphone Vs Android FrTk04 Iphone Vs Android Fr
Tk04 Iphone Vs Android FrValtech
 
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)Stéphane Rouilly
 
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)Stéphane Rouilly
 
Un rendu de Quality avec Unity 3D
Un rendu de Quality avec Unity 3DUn rendu de Quality avec Unity 3D
Un rendu de Quality avec Unity 3DYannick Comte
 

Similaire à Des emoji dans l'unicode : leçons pour le webdesign (20)

Toonpadessentiel2
Toonpadessentiel2Toonpadessentiel2
Toonpadessentiel2
 
Smartphone : et l'informatique devint mobile...
Smartphone : et l'informatique devint mobile...Smartphone : et l'informatique devint mobile...
Smartphone : et l'informatique devint mobile...
 
C2E Poitiers - Tablettes tactiles : terminaux, usages et marchés
C2E Poitiers - Tablettes tactiles : terminaux, usages et marchésC2E Poitiers - Tablettes tactiles : terminaux, usages et marchés
C2E Poitiers - Tablettes tactiles : terminaux, usages et marchés
 
Pinpin Team - Le Gaming sur le Web avec Flash
Pinpin Team - Le Gaming sur le Web avec FlashPinpin Team - Le Gaming sur le Web avec Flash
Pinpin Team - Le Gaming sur le Web avec Flash
 
NEMO EDITIONS
NEMO EDITIONSNEMO EDITIONS
NEMO EDITIONS
 
Presentation SNOM - ÉVÉNEMENT VENTES INDIRECTES : ACROPOLIS – AVENCALL – SNOM
Presentation SNOM - ÉVÉNEMENT VENTES INDIRECTES : ACROPOLIS – AVENCALL – SNOM Presentation SNOM - ÉVÉNEMENT VENTES INDIRECTES : ACROPOLIS – AVENCALL – SNOM
Presentation SNOM - ÉVÉNEMENT VENTES INDIRECTES : ACROPOLIS – AVENCALL – SNOM
 
Ubisoft
Ubisoft Ubisoft
Ubisoft
 
Les chatbots, l’IA dans tout cela, les technologies
Les chatbots, l’IA dans tout cela, les technologiesLes chatbots, l’IA dans tout cela, les technologies
Les chatbots, l’IA dans tout cela, les technologies
 
Developpement mobile vs open source
Developpement mobile vs open sourceDeveloppement mobile vs open source
Developpement mobile vs open source
 
Open Wide : Les interfaces graphiques dans l'embarque
Open Wide : Les interfaces graphiques dans l'embarqueOpen Wide : Les interfaces graphiques dans l'embarque
Open Wide : Les interfaces graphiques dans l'embarque
 
Ez18n theorie encoding gouvernance
Ez18n theorie encoding gouvernanceEz18n theorie encoding gouvernance
Ez18n theorie encoding gouvernance
 
Programmation sous Android
Programmation sous AndroidProgrammation sous Android
Programmation sous Android
 
References hors serie
References hors serieReferences hors serie
References hors serie
 
Les smartphones Octobre 2011
Les smartphones Octobre 2011Les smartphones Octobre 2011
Les smartphones Octobre 2011
 
Tk04 Iphone Vs Android Fr
Tk04 Iphone Vs Android FrTk04 Iphone Vs Android Fr
Tk04 Iphone Vs Android Fr
 
Revue de presse mwc 2012
Revue de presse mwc 2012Revue de presse mwc 2012
Revue de presse mwc 2012
 
Autoradio dvd gps mitsubishi pajero sport l200
Autoradio dvd gps mitsubishi pajero sport l200Autoradio dvd gps mitsubishi pajero sport l200
Autoradio dvd gps mitsubishi pajero sport l200
 
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
 
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
 
Un rendu de Quality avec Unity 3D
Un rendu de Quality avec Unity 3DUn rendu de Quality avec Unity 3D
Un rendu de Quality avec Unity 3D
 

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

  • 1. emoji leçons pour le webdesign dascritch.com
  • 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 ?
  • 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
  • 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
  • 13. Pourquoi ? (*  ̄ m  ̄ ) (^^;) (>_<)> m(_ _)m ⌒▽⌒ ) (#^.^#) (ToT) (● ´∀ `)ノ♡ ♡ o 。 .(✿ฺ 。 ✿ฺ)
  • 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
  • 19. Design industriel © Copyright sauf que cela ne les a pas empêchés d'avoir des symboles très très proches
  • 20. Petite démo Mitsubishi m420 (2005, i-mode chez Bouygues)
  • 37. Des procédures d'appels... ... non standards (aspro anyone ?)
  • 40. J-Phone Vodafone SoftBank jHTML : Plage ASCII alternative ( Ctrl-N / Ctrl-O ) 1B 24 46 3C 0F
  • 42. SAUF QUE avant l'unicode, y'a plein de charsets JIS JIS X 0208 Shift_JIS ISO-2022 EUC-JP et chacun a placé ses emoji où ça lui plaisait...
  • 44. Unicode 6.1 c'est de la magie : Apple, Google, les 3 opérateurs concurrents ont recasé les emoji dans un standard commun
  • 45. Vous croyez que cela ne concerne que le Japon ? En fait, on refait les mêmes erreurs !
  • 46. Avec l'arrivée des webfonts On voit des sites utiliser des polices qui remplacent une lettre par un symbole. Par exemple : J => téléphone
  • 47. 4 fois le même texte
  • 48. Et en accessibilité ? Imaginez ceci lu par une synthèse vocale : J +33 5 34... K +33 7 99... L +33 5 72... MHRF
  • 49. Répétez ce mantra : Une consonne est une consonne, un chiffre, un chiffre, une virgule, une virgule, point.
  • 50. Utiliser des symboles : Petit retour d'expérience
  • 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 !
  • 53. sauf que... la box utilisait une très vieille version de la font
  • 54. TL;DH si si, j'en vois au fond qui dorment
  • 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
  • 64. C'est QR , c'est Questions Réponses