• ⚿ Rub. STORMALO < / >

    Bricolo assistanceHors thématique principale du blog

      Retour Accueil  ↓   Sujets divers   ↓
    Tous les articles

    Sujets techniques adaptés à Eklablog
    "L'envers du décor de nos blogs"


  • Suite à des dysfonctionnements signalés sur le forum et non résolus (perte de contenu après enregistrement)

     

    Caractères Emoji

    Les Emoji sont des caractères graphiques, pouvant être transmis en ligne, comme le sont par ailleurs les caractères de l'imprimerie.

    Ce ne sont pas des images, mais des caractères spéciaux, intégrés aux appareils.
    Ils se positionnent dans un texte comme les autres caractères spéciaux ou alphabétiques. mais leurs codes sont introduits différemment  selon qu'ils s'agit de Html, Css, ou JavaScript.

    Ils correspondent à un codage Unicode  (U+xxxx), mais le rendu à l'écran est propre aux système logiciel des équipements. 

      exemple:

    Ce coche coloré blanc sur vert :  ✅ est utilisé ici dans le HTML en traduisant le code U+2705 par cette écriture &#x2705;
    L'utilisation via CSS serait possible (texte dans :before ou :after) en traduisant le code U+2705 par" \2705" 

     

        La plupart des Emoji sont acceptés par l'éditeur, mais sont rejetés par le processus d'enregistrement. Certains provoquent un dysfonctionnement avec risque de perte d'une partie d'un article, bouleversement de l'affichage et/ou situation de blocage.

    ce "coq"  est inclus par CSS :after {content: " \1F413";} Risque si inclus html par &#x1F413;

    En pratique on peut créer un style utilisant une class css. Par exemple pour le coq, déclarer dans les règles css: span.emoji-coq:after {content: "\1F413"; font-size: 28px;} . Dans le html il suffira d'écrire pour chaque besoin: <span class = "emoji-coq"> </span>

    (ci-dessus, en rose, ce qui est un choix personnel pour ce "coq")

     

    Exception : Les caractères Emoji ci-dessous ne me semblent pas poser de problèmes particuliers au système Eklablog (peut être parce qu'ils existent aussi dans d'autres groupes de codes).
     Ils sont utilisables aussi par copié-collé comme du texte (voir ici)

     ⌚ ⌛ ⏩ ⏪ ⏫ ⏬ ⏭ ⏮ ⏯ ⏰ ⏱ ⏲ ⏳ ⏸ ⏹ ⏺ Ⓜ ☔ ☕ ☝ ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓ ♟ ♿ ⚓ ⚡ ⚪ ⚫ ⚽ ⚾ ⛄ ⛅ ⛎ ⛏ ⛑ ⛓ ⛔ ⛩ ⛪ ⛰ ⛱ ⛲ ⛳ ⛴ ⛵ ⛷ ⛸ ⛹ ⛺ ⛽ ✂ ✅ ✈ ✉ ✊ ✋ ✌ ✍ ✏ ✒ ✔ ✖ ✝ ✡ ✨ ✳ ✴ ❄ ❇ ❌ ❎ ❓ ❔ ❕ ❗ ❣ ❤ ➕ ➖ ➗ ➡ ➰ ➿ ⤴ ⤵ ⬅ ⬆ ⬇ ⬛ ⬜ ⭐ ⭕ 〰 〽 ㊗ ㊙ 

     

     


    Autres caractères spéciaux utilisables dans HTML

    Caractères Symboles "lettres" HTML

    ℀ ℁ ℂ ℃ ℄ ℅ ℆ ℇ ℈ ℉ ℊ ℋ ℌ ℍ ℎ ℏ ℐ ℑ ℒ ℓ ℔ ℕ № ℗ ℘ ℙ ℚ ℛ ℜ ℝ ℞ ℟ ℠ ℡ ™ ℣ ℤ ℥ Ω ℧ ℨ ℩ K UN ℬ ℭ ℮ ℯ ℰ ℱ Ⅎ ℳ ℴ ℵ ℶ ℷ ℸ ℹ ℺ ℻ ℼ ℽ ℾ ℿ ⅀ ⅁ ⅂ ⅃ ⅄ ⅅ ⅆ ⅇ ⅈ ⅉ ⅊ ⅋ ⅌ ⅍ ⅎ ⅏

    Caractères Divers HTML

    ☀ ☁ ☂ ☃ ☄ ★ ☆ ☇ ☈ ☉ ☊ ☋ ☌ ☍ ☎ ☏ ☐ ☑ ☒ ☓ ☔ ☕ ☖ ☗ ☘ ☙ ☚ ☛ ☜ ☝ ☞ ☟ ☠ ☡ ☢ ☣ ☤ ☥ ☦ ☧ ☨ ☩ ☪ ☫ ☬ ☭ ☮ ☯ ☰ ☱ ☲ ☳ ☴ ☵ ☶ ☷ ☸ ☹ ☺ ☻ ☼ ☽ ☾ ☿ ♀ ♁ ♂ ♃ ♄ ♅ ♆ ♇ ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓ ♔ ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞ ♟ ♠ ♡ ♢ ♣ ♤ ♥ ♦ ♧ ♨ ♩ ♪ ♫ ♬ ♭ ♮ ♯ ♰ ♱ ♲ ♳ ♴ ♵ ♶ ♷ ♸ ♹ ♺ ♻ ♼ ♽ ♾ ♿ ⚀ ⚁ ⚂ ⚃ ⚄ ⚅ ⚆ ⚇ ⚈ ⚉ ⚊ ⚋ ⚌ ⚍ ⚎ ⚏ ⚐ ⚑ ⚒ ⚓ ⚔ ⚕ ⚖ ⚗ ⚘ ⚙ ⚚ ⚛ ⚜ ⚝ ⚞ ⚟ ⚠ ⚡ ⚢ ⚣ ⚤ ⚥ ⚦ ⚧ ⚨ ⚩ ⚪ ⚫ ⚬ ⚭ ⚮ ⚯ ⚰ ⚱ ⚲ ⚳ ⚴ ⚵ ⚶ ⚷ ⚸ ⚹ ⚺ ⚻ ⚼ ⚽ ⚾ ⚿ ⛀ ⛁ ⛂ ⛃ ⛄ ⛅ ⛆ ⛇ ⛈ ⛉ ⛊ ⛋ ⛌ ⛍ ⛎ ⛏ ⛐ ⛑ ⛒ ⛓ ⛔ ⛕ ⛖ ⛗ ⛘ ⛙ ⛚ ⛛ ⛜ ⛝ ⛞ ⛟ ⛠ ⛡ ⛢ ⛣ ⛤ ⛥ ⛦ ⛧ ⛨ ⛩ ⛪ ⛫ ⛬ ⛭ ⛮ ⛯ ⛰ ⛱ ⛲ ⛳ ⛴ ⛵ ⛶ ⛷ ⛸ ⛹ ⛺ ⛻ ⛼ ⛽ ⛾ ⛿

    Caractères Formes géométriques HTML

    ■ □ ▢ ▣ ▤ ▥ ▦ ▧ ▨ ▩ ▪ ▫ ▬ ▭ ▮ ▯ ▰ ▱ ▲ △ ▴ ▵ ▶ ▷ ▸ ▹ ► ▻ ▼ ▽ ▾ ▿ ◀ ◁ ◂ ◃ ◄ ◅ ◆ ◇ ◈ ◉ ◊ ○ ◌ ◍ ◎ ● ◐ ◑ ◒ ◓ ◔ ◕ ◖ ◗ ◘ ◙ ◚ ◛ ◜ ◝ ◞ ◟ ◠ ◡ ◢ ◣ ◤ ◥ ◦ ◧ ◨ ◩ ◪ ◫ ◬ ◭ ◮ ◯ ◰ ◱ ◲ ◳ ◴ ◵ ◶ ◷ ◸ ◹ ◺ ◻ ◼ ◽ ◾ ◿

     

    Caractères Dingbats HTML

     ✁ ✂ ✃ ✄ ✅ ✆ ✇ ✈ ✉ ✊ ✋ ✌ ✍ ✎ ✏ ✐ ✑ ✒ ✓ ✔ ✕ ✖ ✗ ✘ ✙ ✚ ✛ ✜ ✝ ✞ ✟ ✠ ✡ ✢ ✣ ✤ ✥ ✦ ✧ ✨ ✩ ✪ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ✴ ✵ ✶ ✷ ✸ ✹ ✺ ✻ ✼ ✽ ✾ ✿ ❀ ❁ ❂ ❃ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❌ ❍ ❎ ❏ ❐ ❑ ❒ ❓ ❔ ❕ ❖ ❗ ❘ ❙ ❚ ❛ ❜ ❝ ❞ ❟ ❠ ❡ ❢ ❣ ❤ ❥ ❦ ❧ ❨ ❩ ❪ ❫ ❬ ❭ ❮ ❯ ❰ ❱ ❲ ❳ ❴ ❵ ❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿ ➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉ ➊ ➋ ➌ ➍ ➎ ➏ ➐ ➑ ➒ ➓ ➔ ➕ ➖ ➗ ➘ ➙ ➚ ➛ ➜ ➝ ➞ ➟ ➠ ➡ ➢ ➣ ➤ ➥ ➦ ➧ ➨ ➩ ➪ ➫ ➬ ➭ ➮ ➯ ➰ ➱ ➲ ➳ ➴ ➵ ➶ ➷ ➸ ➹ ➺ ➻ ➼ ➽ ➾ ➿

     

    Caractères Symboles "Flèches" HTML

    ← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙ ↚ ↛ ↜ ↝ ↞ ↟ ↠ ↡ ↢ ↣ ↤ ↥ ↦ ↧ ↨ ↩ ↪ ↫ ↬ ↭ ↮ ↯ ↰ ↱ ↲ ↳ ↴ ↵ ↶ ↷ ↸ ↹ ↺ ↻ ↼ ↽ ↾ ↿ ⇀ ⇁ ⇂ ⇃ ⇄ ⇅ ⇆ ⇇ ⇈ ⇉ ⇊ ⇋ ⇌ ⇍ ⇎ ⇏ ⇐ ⇑ ⇒ ⇓ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ ⇚ ⇛ ⇜ ⇝ ⇞ ⇟ ⇠ ⇡ ⇢ ⇣ ⇤ ⇥ ⇦ ⇧ ⇨ ⇩ ⇪ ⇫ ⇬ ⇭ ⇮ ⇯ ⇰ ⇱ ⇲ ⇳ ⇴ ⇵ ⇶ ⇷ ⇸ ⇹ ⇺ ⇻ ⇼ ⇽ ⇾ ⇿

     ==================================================================================

     Sources principales:

       https://www.w3schools.com/charsets/ref_utf_symbols.asp 

       https://unicode.org/emoji/charts/full-emoji-list.html#1f4af        ➢ tableau d'environ 1800 Emoji

     


    1 commentaire
  • Suite à une question posée sur le forum d'entre-aide

     

    Idée source consultable à cette adresse :
    https://www.w3schools.com/w3js/tryit.asp?filename=tryw3js_sort_table

     

    ==================== Exemple d'adaptation sur Eklablog =============================

     Cliquer sur les titres des colonnes avec ↓↑ pour ordre A > Z  ou Z > A
    (Nota : les chiffres sont considérés comme du texte)

     

    Titre de l’œuvre de S.Dali ↓↑Date ↓↑Technique ↓↑L (cm) ↓↑H (cm) ↓↑
    Cadaqués. Plage d’Es Llaner 1916 Huile/Toile 026 019
    Paysage avec fleuve 1910 Huile/Carton 014 009
    Visage de la guerre 1940 Huile/Toile 079 064
    Le toréador hallucinogène 1970 Huile/Toile 399 299
    Galarina 1945 Huile/Toile 050 064
    Le cheval joyeux 1980 Huile/Bois 050 064

     

    Principe

    A partir d'un tableau initialement créé
    1) vérifier que les cellules de tête soient des <th> </th>, sinon faire la modif en remplaçant les <td> </td>
    2) donner un identifiant au tableau  dans l'exemple ci-dessosus c'est  id="maTable"
    3) donner un même nom de class à toutes les lignes <tr> (sauf celle de l'en-tête), par exemple  class="item"
    4) Ajouter, uniquement dans les balises <th> des colonnes qui doivent être cliquables pour tri :
       style="cursor: pointer; " onclick="w3.sortHTML('#maTable', '.item', 'td:nth-child(❔)')"
    ➜ en remplaçant le ❔ par le numéro de colonne (la n°1 étant celle de gauche).
    ➜ en respectant bien tous les signes et ponctuations '  "  :  , . #   , surtout dans onclick="          "

     Les noms de id et de class sont ici des choix individuels, mais ce qui est rouge ou rose doit être identique dans un même tableau.

     Code source élémentaire

    <!--  HTML  -->
    <table id="maTable" style="width: 80%;">
    <tbody style="font-size: 14pt;">
    <tr>
    <th style="cursor: pointer; " onclick="w3.sortHTML('#maTable', '.item', 'td:nth-child(1)')">Titre de l’œuvre de S.Dali &darr;&uarr;</th>
    <th style="cursor: pointer; " onclick="w3.sortHTML('#maTable', '.item', 'td:nth-child(2)')">date &darr;&uarr;</th>
    <th style="cursor: pointer; " onclick="w3.sortHTML('#maTable', '.item', 'td:nth-child(3)')">Technique &darr;&uarr;</th>
    <th style="cursor: pointer; " onclick="w3.sortHTML('#maTable', '.item', 'td:nth-child(4)')">L (cm) &darr;&uarr;</th>
    <th style="cursor: pointer; " onclick="w3.sortHTML('#maTable', '.item', 'td:nth-child(5)')">H (cm) &darr;&uarr;</th>
    </tr>
    <tr class="item">
    <td>Cadaqu&eacute;s. Plage d&rsquo;Es Llaner</td>
    <td>1916</td>
    <td>Huile/Toile</td>
    <td>26.5</td>
    <td>19.5</td>
    </tr>
    <tr class="item">
    <td>Paysage avec fleuve</td>
    <td>1910</td>
    <td>Huile/Carton</td>
    <td>14</td>
    <td>9</td>
    </tr>
    <tr class="item">
    <td>Visage de la guerre</td>
    <td>1940</td>
    <td>Huile/Toile</td>
    <td>79</td>
    <td>64</td>
    </tr>
    <tr class="item">
    <td>Le tor&eacute;ador hallucinog&egrave;ne</td>
    <td>1970</td>
    <td>Huile/Toile</td>
    <td>399</td>
    <td>299</td>
    </tr>
    <tr class="item">
    <td>Galarina</td>
    <td>1945</td>
    <td>Huile/Toile</td>
    <td>50</td>
    <td>64</td>
    </tr>
    <tr class="item">
    <td>Le cheval joyeux</td>
    <td>1980</td>
    <td>Huile/Bois</td>
    <td>50</td>
    <td>64</td>
    </tr>
    </tbody>
    </table>

    <!-- JavaScript -->
    <script src="https://www.w3schools.com/lib/w3.js"></script> 

     

     


    votre commentaire
  •  Dernière m.a.j. 12/04/21

    Bricolo assistanceHORS THÉMATIQUE DU BLOG -  ARTICLE TECHNIQUE pour illustration
    Page en suite du sujet: Lecteur audio (forum) et son annexe (avec info css)
     

    Évolution du code pour plus de simplicité d'usage. J'peux pas faire plus, à part ajouter du css .... wink2

    Une autre possibilité de diffuser de la musique mp3 sur Eklablog, en attendant qu'une solution assistée soit proposée en remplacement de la technologie "Flash"....

    Ce n'est pas ça qui va ressusciter la musique des articles déjà publiés, mais dans l'attente ça peut permettre d'animer le présent ou de réactiver l'écoute de certains titres, sans dépendances externes (sans youtube, sans deezer etc..).
    Pour illustrer ces exemples j'ai utilisé des adresses de fichiers musicaux prélevées dans des codes flash existants. Bien sûr si cela ne conviens pas je les retirerais, les auteurs des blogs sont informés.

    Pour chaque titre, le codage est simple : 1 ligne de code par titre [JavaScript doit être activé]

     Explications pour faire

    Ci dessous quelques exemples,   style par css ajouté dans le thème (bordure / taille)
     

     


       La chorale des oiseaux, chante dans mon jardin smile.

     


       CHŒUR CANTABILE    © cantabile.eklablog.com

     


       VIVE LE VENT © mtpiano.eklablog.fr

     


       WAITING THE DARK MOMENT  © kawaii-kuma.eklablog.com
    ( Patience !   la lecture de ce titre est parfois longue à débuter - env. 30 secondes - Téléchargement lointain? smile)

     


       LETTER FROM YOU    © sergio.eklablog.com/-c24752492

     -

     


       CEUX-LÀ    ©  chantsongs.eklablog.com/-a148080598

     


     

    Voir aussi l'exemple qui est placé dans le module encadré en rouge.
     


     

     Explications pour faire :

     

     

     ▬►Une simple ligne de code pour chaque musiqueà placer dans le html, avec l'icône < > de l'éditeur : 

    <p><a onclick="myMp3(this, ' titre ','adresse_du_fichier_musical')"> image et/ou annonce_titre </a> © facultatif </p>

    Après un copié/collé dans le code source < >, il suffit de remplacer ce qui est de couleur bleue, rouge, ou verte par ce qui concerne le fichier musical.

    [voir notes 1et 2 en bas de page pour quelques généralités]

     

     

     

    ▬► C'est le petit code ci-dessous, qui permettra d'obtenir un lecteur html à l'endroit choisi.
               Il est à placer 1 fois seulement dans la zone de script, et sera disponible pour tout le blog

    <script>// <![CDATA[
    // Script pour insertion <audio> dans html
    myMp3 = function(elmnt,titre,adresse) {
    var codetitre = titre;
    var codeadresse = adresse;
    var codeaudio = "<audio src='"+codeadresse+ " ' controls >Votre navigateur n'est pas compatible . . . </audio><p style=' background-color: #ffffff;'> Titre :  "+codetitre+"</p>";
     elmnt.innerHTML = codeaudio
     }
    // ]]></script>

    (la fonction nommée myMp3 sera "activée" par un clic au niveau des articles. Elle injecte alors une balise <audio>, prête à jouer la musique choisie.)

     [voir note 2 en bas de page] 


     

      



    75

    -


    22 commentaires


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique
▢  >

image lien plan blog