Le Blog

Le blog laboratoire de F.L.D. Studio
0

Le module blog de Processwire

Adaptation du module blog de Processwire, style, localisation et optimisation.

Configuration

Modification de la configuration des options possibles avec TinyMCE pour le champ body.

On peut étendre la configuration par défaut qui par exemple n'accepte pas les balises <iframe></iframe>.

Contenu de la configuration par défaut :

@[id|class],a[href|target|name],strong/b,e
/i,br,img[src|id|class|width|height|alt],ul,
ol,li,p[class],h2,h3,h4,h5,blockquote,-p,
-table[border=0|cellspacing|cellpadding|width|frame|rules|height|align|summary|bgcolor|background|bordercolor],
-tr[rowspan|width|height|align|valign|bgcolor|background|bordercolor],
tbody,thead,tfoot,#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope],
#th[colspan|rowspan|width|height|align|valign|scope],
code,pre

Pour cela se rendre dans :

  • Setup
  • Field
  • Body
  • Onglet : Input
  • Region : TinyMCE Advanced Configuration Option
  • Champs : valid_elements, ajouter iframe[src|frameborder|style|scrolling|class|width|height|name|align]

Dans le  même esprit si on souhaite tout autoriser modifier la valeur par : *[*]

Dans ce cas tout est autorisé donc attention...

Le CSS

Concernant le style du code source. A l'origine rien n'est prévu dans le module pour afficher du code source. Celui-ci est donc affiché comme du texte normal, ce qui ne convenait pas pour ce type de blog. C'est donc la feuille de style /template/style/ theme.css que j'ai surchargée en ajoutant les instructions suivantes 

pre
{
 background-color: #eee !important;
 font: 12px "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
 padding: 8px;
 color: #001B4C;
 border-color: #ffb450 #ffb450 #ffb450 #ff8c00;
 border-style: solid;
 border-width: 1px 1px 1px thick;
 margin-bottom: 20px;
 word-wrap: break-word;
 white-space: pre-wrap;
}

Les deux dernières lignes autorisent le retour à la ligne et la coupure se fait sur les espaces.

Seconde adaptation pour l'affichage "reponsive" des images, en ajoutant la simple régle

    img { max-width: 100%; height: auto; }

Pour IE8 on fait un hack pour la même régle placée dans la feuille /template/style/ ie.css  

    img { width:auto; }

avec un test conditionnel dans /template/main.inc

    <!--[if IE 8 ]> <link rel='stylesheet' type='text/css' href='/site/templates/styles/ie.css'> <![endif]-->

pour terminer, rajout d'un lien sur mon site dans le pied de la page

<small id='footer_note'><a href="http://www.flds.fr"><?php echo $homepage->note; ?></a></small>

Le JavaScript

Tout d'abord, il est déplacé à la fin (juste avant la fermeture du </body>) dans /site/template/main.inc

<?php foreach($config->scripts as $file) echo "<script src='$file'></script>"; ?>

Pour optimiser le temps de chargement des script JS j'utilise la méthode du "HTML5 Way", c'est à dire sans scripts type pré-loader comme LAB.js (Load and Block)  ou la méthode Google pour son script analytic. (Voir ici une description assez complette pour comprendre que rien n'est vraiment résolu avec ce type de méthode)

tableau comparatif

Sur ce shéma on voit les différentes façon de traiter un script pendant le chargement d'une page.

  • Sans instruction  le script est chargé, puis executé, le parse de la page est intérrompu.
  • Avec defer le script est chargé sans intérrompre le parse et il est executé une fois celui-ci terminé (Comportement le plus courant avec les instructions OnDOMReady dans le script)
  • Avec async il est chargé sans intérrompre le parse et exécuté dès le chargement terminé, le parse est intérompu et reprend après l'exécution du script.

Attention async n'est pas encore reconnu par tous les navigateurs (surtout IE). Les explications sur les différences entre defer et async peuvent être trouvées sur le site de Microsoft. Il précaunise d'utiliser les deux, dans se cas le navigateur donnera la préférence à async, ce n'est pas forcement un comportement souhaitable car la plupart des scripts doivent attendre le chargement complet du Dom avec la fameuse séquence jQuery

(function($){
 // faire quelque chose quand JQuery est prêt
})(jQuery); 

Résultats avec le site : http://caniuse.com/#feat=script-async

CanIUse

C'est pourquoi j'utilise plutôt defer http://caniuse.com/#feat=script-defer

caniuse async

Premier test de temps de chargement avec http://www.webpagetest.org (Localisation Paris)

Légende

legende

Sans instruction defer

Comme on le voit les fichiers .js sont chargés séquentiellements.

Avec instruction defer

<?php foreach($config->scripts as $file) echo "<script defer src='$file'></script>"; ?>

Les fichiers .js sont chargés en parallele.

Localisation

Dans l'administration du site

Pour franciser les pages il faut intervenir en plusieurs endroits et modifier les scripts .php. Dans la partie administration du site il est possible de modifier le libéllé des rubriques (en jaune sur la recopie d'écran)

Rubriques admin à modifier

Pour le champs : Date

Modifier le format d'affichage du champ Date (Setup - Fields - Date - Onglet Détails)

Format du champ date

Les scripts  à modifier :

\wire\modules\Markup\MarkupPagerNav\PagerNav.php et MarkupPagerNav.module

\site\templates\search.php

Modification des scripts

Ressource Processwire :

Catégories: Processwire, Développement WEB

Tags: CSS

Commentaires: Pas de commentaires

0

La puissance de la Font

Quelle typographie pour mon site ?

A cette question il existe à présent deux réponses :

Soit on privilégie les temps de réponses et on continu d'utiliser la technique du "safe web" soit on cherche un peux d'originalité et on utilise la propriété CSS @font-face (Voir article de Alsacreation).

Le "safe Web"

Sous ce terme on désigne une police de caractères qui à toute les chances d'être installée sur le poste de l'utilisateur. C'est pour cela que tant et tant de site on été conçu en Arial ou Time New Roman.  En réalité il en exitent d'autre que l'on peut aussi prender en compte. Cette technique doit aussi être accompagnée d'une solution de secours au cas ou la police par défaut n'est pas installée. Pour cela on crée aussi une Font stack.

Les polices avec empatements (Serif)

1. Baskerville (Windows 60.3% – Mac 93.3%)

Font stack :  font-family: Baskerville, "Baskerville Old Face", "Goudy Old Style", Garamond, "Times New Roman", serif;

2. Palantino (Windows 99.3% – Mac 83.1%)

Font stack : font-family: Palatino, "Palatino LT STD", "Palatino Linotype", "Book Antiqua", Georgia, serif;

3. Bodoni (Windows 55.8% – Mac 0%) et Didot (Windows 0% – Mac 93.5%)

Font stack:  font-family: "Bodoni MT", Didot, "Didot LT STD", "Book Antiqua", Garamond, "Times New Roman", serif;

4. Georgia (Windows 99.4% – Mac 97.5%)

Font stak:  font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;

Les polices sans empatements (Sans-Serif)

5. Century Gothic (Windows 87.6% – Mac 53.2%)

Font stak: font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;

6.Tahoma (Windows 97.8% – Mac 91.7%)

Font stak: font-family: Tahoma, Verdana, Segoe, sans-serif;

7. Arial Narrow (Windows 99.7% – Mac 97.1%)

Font stak: font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;

8. Trebuchet MS (Windows 99.7% – Mac 97.1%)

Font stak: font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;

Les polices à espacements fixes

9. Consolas (Windows 83% – Mac 34.8%)

Font stak: font-family: Consolas, monaco, monospace;

10.  Lucida Sans Typewriter (Windows 74.8% – Mac 99.6%)

Font stak: font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;

Polices @Font-face

Si on souhaite sortir des polices "safe Web" on utilisera la technique CSS du @font-face qui permettent d'utiliser (enfin) des polices qui ne sont pas installées sur le poste des utilisateurs. Cela permet une plus grande liberté mais cela pése sur le temps de chargement de la page car les polices sont téléchargées.

Le principe consiste à sélectionner une police à l'aide d'une instruction CSS. La police peut être stockée en local ou en distant (Google Font,...) En fonction du naviguateur on aura besoin de charger la fonte dans différents formats (.eot, .ttf, .woff, .svg)

Exemple, dans le <head> avant le chargement du css . C'est la méthode recommandée par Google. (ici plusieurs polices, situées chez Google) 

<link href='http://fonts.googleapis.com/css?family=family1|family2..' rel='stylesheet' type='text/css'>

Mode d'emploi pour les Fonts Google : https://developers.google.com/fonts/docs/getting_started

On peut aussi la déclarer dans sa feuille de style :

Dans ce nouvel exemple la police icomoon est hébergée en local dans tous ces formats (dans le dossier /fonts)

@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot');
    src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.woff') format('woff'),
        url('../fonts/icomoon.ttf') format('truetype'),
        url('../fonts/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

A savoir :  Il est déconseillé d'importer une feuille de style distante dans le document .CSS L'instruction @import(...) va certe télécharger la police mais surtout bloquer la lecture de la feuille de style jusqu'a importation de la font.

Trouver des polices (liste non exhaustive)
Outils

Catégories: Typographie, Développement WEB

Tags: Ressource, CSS, Outil

Commentaires: Pas de commentaires

0

Les images

Illustration

La typographie et les icones sont très importante pour un site internet. Il reste à présent à se pencher sur l'illustration par l'image. Si une image n'a pas de rapport avec son sujet elle sera zapée par le lecteur, il est donc très important de bien les sélectionner.

Ou les trouver d'après http://www.blogdumoderateur.com/sites-photos-gratuites-libres-de-droits/

Catégories: Développement WEB

Commentaires: Pas de commentaires