Changeset 108240 in spip-zone


Ignore:
Timestamp:
Dec 29, 2017, 3:07:24 PM (18 months ago)
Author:
arnaud.berard@…
Message:
  • chaine de langue pour le texte par defaut de la preview
  • styles sur la liste des font activées
  • maj et correction de la doc dans le readme
Location:
_plugins_/webfonts/branches/webfonts2
Files:
6 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/webfonts/branches/webfonts2/README.md

    r108236 r108240  
    99afin de ne pas détériorer les performances de chargement de vos pages.
    1010
    11 Le plugin inssert dans le head et en tête des autres fichiers css
    12 les balise link ou style nécessaires. La requète vers google font ne necessite pas
    13 d'accès a l'api.
    14 
    15 
     11Le plugin insert dans le head et en tête des autres styles
     12les balise link ou style nécessaires. La requête vers google font pour l'insertion des polices ne nécessite pas d'accès a l'api, cependant pour pouvoir utiliser la recherche dans l'index GoogleFont, utiliser le sélecteur générique, un accès a l'API est nécessaire.
     13
     14## Techniques de chargement de fonts :
     15
     16Les stratégies de chargement de font comparées par
     17https://www.zachleat.com/web/comprehensive-webfonts/
     18
     19
     20### Google webfont :
     21
     22Utilisation du service google web font, via une requête.
     23
     24### Css
    1625
    1726La rêgle css `@font-face` :
     
    3140
    3241
    33 ## Techniques de chargement de fonts :
    34 
    35 Les stratégies de chargement de font comparées par
    36 https://www.zachleat.com/web/comprehensive-webfonts/
    37 
    38 
    39 ### Google webfont :
    40 
    41 utilisation du service google web font, via une requète
    42 
    43 
    44 ### Depuis les css :
    45 
    46 
    47 
    48 ## Fonctionalitées
    49 
    50 * insertion auto
    51 
    52 ##
    53 
    54 * Ajoute une pipeline pour que les plugins theme puisse activer leur insertions
    55 
    56 
    57 
    58 En cours :
    59 - Proposer un formulaire de recherche de typos et leurs selection pour utilisation
    60 avec gestion des variantes
    61 
    62 
    63 
    64 
     42
     43## Fonctionalités
     44
     45* insertion auto des polices ajoutées a la pipeline font_list ou depuis la configuration
     46* Ajoute une pipeline pour que les plugins theme puisse activer leurs polices
     47* Propose un sélecteur générique permettant de parcourir l'index GoogleFont (nécessite l'API key, selecteur_generique)
     48* Propose une page permettant de parcourir la typothèque googleFont, avec filtrage, recherche, prévisualisation (nécessite l'API key).
    6549
    6650## Configuration:
     
    6953
    7054Pour pouvoir afficher les fonts via l'api GoogleFont, il est nécessaire d'avoir
    71 préalablement récupéré une clef d'accès aux API Google et sélectionné GoogleFont dans
    72 le APIs intérrogeables.
    73 
    74 Cette clef, peut être définie depuis un squelette ou un plugin
     55préalablement récupéré une clef d'accès aux API Google et sélectionné GoogleFont dans les APIs interrogeables.
     56
     57Cette clef, peut être définie depuis un squelette ou un plugin, via un define.
    7558
    7659```
     
    7962
    8063ou via la configuration du plugin.
    81 
    8264
    8365### Méthode d'insertion
     
    8870* insertion @import via une balise `<style>`
    8971
    90 
    91 ## Utilisation
     72### Sélection des webfonts
     73
     74Un sélecteur générique permet de proposer les webfonts disponibles depuis le fichier index google_font
     75la liste de webfont est généré sous la forme `family:variant,family2:variant3`,
     76les fonts configurées sont ajoutées à la pipeline `font_list`.
     77
     78### Liste des webfonts chargées
     79
     80La liste des webfonts chargées via la pipeline, avec possibilité de prévisualiser
     81
     82
     83## Pipeline font_list
    9284
    9385Description d'une font dans la font list :
     
    9587* family : Nom de la famille de police
    9688* variants : italic,bold
    97 * subsets : les subsets sont nécessaires uniquement pour les navigateurs ne supportant pas la proprité unicode-range,
    98 pour les autres les subsets sont ignorés, et le navigateur choisira ce qui est necessaire dans le DOM.
     89* subsets : les subsets sont nécessaires uniquement pour les navigateurs ne supportant pas la propriété unicode-range,
     90pour les autres les subsets sont ignorés, et le navigateur choisira ce qui est nécessaire dans le DOM.
    9991Explication sur les subsets : https://developers.google.com/fonts/docs/getting_started#Subsets
    100 Navigateurs supportant `unicode-range : https://caniuse.com/#feat=font-unicode-range
     92Navigateurs supportant `unicode-range` : https://caniuse.com/#feat=font-unicode-range
    10193
    10294
     
    160152
    161153
     154
     155
     156## Sources & Docs
     157
     158https://developers.google.com/fonts/docs/developer_api
     159
     160Article sur l'implémentation du webfont loader
     161Présentation par cssTricks du webfontLoader :
     162https://css-tricks.com/loading-web-fonts-with-the-web-font-loader/
     163
     164Google font : webfont loader https://github.com/typekit/webfontloader
     165
     166ZACH LEATHERMAN (Filament Group):
     167webfont loading strategies : https://www.zachleat.com/web/comprehensive-webfonts/
     168
     169Etapes du chargement d'une font dans le navigateur :
     170https://font-display.glitch.me/
     171
     172### Des plugins spip ou techniques d'intégration d'utilisation de font/polices
     173
     174Plugin spip permettant d'utiliser les images typographiques via un modèle
     175https://contrib.spip.net/Choix-Police-Typo
     176
     177Le filtre image_typo :
     178
     179https://www.spip.net/fr_article3325.html
     180
     181
     182
     183### Typothèques
     184
     185https://fontlibrary.org/
     186https://www.fontsquirrel.com/tools/webfont-generator
     187
     188
     189## ToDo
     190
    162191- GogleAPIKey : pour le listage et l'accès a la typthèque
    163192- TypeKit,… pour les autres fournisseurs de typo
     
    167196https://github.com/typekit/webfontloader
    168197
    169 
    170 ## Sources & Docs
    171 
    172 https://developers.google.com/fonts/docs/developer_api
    173 
    174 Article sur l'implémentation du webfont loader
    175 Présentation par cssTricks du webfontLoader :
    176 https://css-tricks.com/loading-web-fonts-with-the-web-font-loader/
    177 
    178 Google font : webfont loader https://github.com/typekit/webfontloader
    179 
    180 ZACH LEATHERMAN (Filament Group):
    181 webfont loading strategies : https://www.zachleat.com/web/comprehensive-webfonts/
    182 
    183 Etapes du chargement d'une font dans le navigateur :
    184 https://font-display.glitch.me/
    185 
    186 ### Des plugins spip ou techniques d'intégration d'utilisation de font/polices
    187 
    188 Plugin spip permettant d'utiliser les images typographiques via un modèle
    189 https://contrib.spip.net/Choix-Police-Typo
    190 
    191 Le filtre image_typo :
    192 
    193 https://www.spip.net/fr_article3325.html
    194 
    195 
    196 
    197 ### Typothèques
    198 
    199 https://fontlibrary.org/
    200 https://www.fontsquirrel.com/tools/webfont-generator
    201 
    202 
    203 
    204 ## ToDo
    205 
    206 - [] améliorer l'interface de selection : formulaire de fltrages des typos, affichage des résultats
    207 - [] selection des typos et des subsets utilisables
     198## Changelogs
     199
     200v0.2.4 :
     201
     202- [X] améliorer l'interface de selection : formulaire de fltrages des typos, affichage des résultats
     203- [X] selection des typos et des subsets utilisables
    208204- [] si la Google api key n'est pas définie, proposer dans la config
  • _plugins_/webfonts/branches/webfonts2/lang/webfonts2_fr.php

    r108236 r108240  
    1111        // C
    1212        'cfg_titre_configurer_webfonts2'        => 'Configuration des webfonts',
     13        // D
     14        'default_preview_text'  => 'Grumpy wizards make toxic brew for the evil Queen and Jack.',
    1315
    1416       
  • _plugins_/webfonts/branches/webfonts2/paquet.xml

    r108236 r108240  
    22        prefix="webfonts2"
    33        categorie="maintenance"
    4         version="0.2.3"
     4        version="0.2.4"
    55        etat="dev"
    66        compatibilite="[3.0.0;3.2.*]"
  • _plugins_/webfonts/branches/webfonts2/prive/squelettes/contenu/configurer_webfonts2.html

    r108237 r108240  
    1414                <div class="editer">
    1515                                <label for="preview_text">Texte pour la preview</label>
    16                                 <input type="text" id="preview_text" name="preview_text" value='#ENV{preview_text, Grumpy wizards make toxic brew for the evil Queen and Jack.}'>
    17 
     16                                <input type="text" id="preview_text" name="preview_text" value='#ENV{preview_text, '<:webfonts2:default_preview_text:>' }'>
    1817                        </div>
    1918                <div class="editer">
  • _plugins_/webfonts/branches/webfonts2/prive/style_prive_plugin_webfonts2.html

    r108236 r108240  
    1616        border-bottom: 1px solid silver;
    1717}
     18
     19.preview_params input#preview_text {
     20        width: 100%;
     21}
     22
     23.font-list {
     24       
     25}
     26.font-list h4 {
     27        font-weight: normal;
     28        margin-left: 2rem;
     29}
  • _plugins_/webfonts/branches/webfonts2/selecteurs/webfonts.html

    r108236 r108240  
    11#HTTP_HEADER{Content-Type: text/plain; charset=#CHARSET}
    2 [(#REM)
     2[(#REM)<!--
    33
    4         Menu de selection d'un mot a partir d'une valeur passee en parametre
    5 nom lisible : family : variant
    6 ]
     4Liste de selection d'une webfont depuis le fichier index google_font
     5a partir d'une valeur passee en parametre
     6nom lisible : family : variant-->]
    77#CACHE{0}
    88#SET{resultats, #LISTE}
Note: See TracChangeset for help on using the changeset viewer.