logo site
SpipFactory.fr
Slogan du site

C’est une plateforme d’hébergement autogéré en association de loi 1901.
Propulsée par la mutualisation de Spip. Habillage Escal .

logo article ou rubrique
Pourquoi le squelette "Escal"
Article mis en ligne le 22 juin 2019
dernière modification le 30 août 2019

Pourquoi ce choix ?

On chercher un squelette facilement adaptable et avec le moins d’intervention dans le code.

Nous nous sommes tourné vers les squelettes configurable au "Clicodrome"
Définition de clicodrome : Informatique. Interface, boîte de dialogue fonctionnant avec des clics souris.

Parmi les nombreux squelettes existant pour spip, il nous a fallu faire un choix.

  • Squelettes par défaut
  • Squelettes pour blog
  • Squelettes éditoriaux
  • Squelettes généralistes
  • Squelettes spéciaux

Il existe un outil dans la galaxie SPIP qui indexe les sites SPIP en continu dans les moteurs de recherche, les news et les flux de microbloging.
Chaque site est vérifié et analysé pour déterminer la version de SPIP et les plugins utilisés, ainsi que la version de PHP et la localisation géographique du serveur.
Ces données purement statistiques permettent aux développeurs d’apprécier la popularité d’un plugin et d’avoir un aperçu des utilisations.
Ce comptage est automatique. Il suffit que votre site soit en ligne et référencé pour être pris en compte.

Intéressons-nous aux 10 premiers squelettes indexés
  • sarkaspip 1285(9.1%) utilisateurs
    C’était l’un des très rares squelette presse-boutons sous SPIP2, d’où son succès je pense. Depuis le portage sous SPIP3, il a perdu cette caractéristique et je le trouve donc moins intéressant. Mais il a aussi une petite communauté d’utilisateurs.Seulement certains membres se sont accaparé le "politiquement correct bien pensant" ; de plus le code manque cruellement d’explication, trop complexe pour mon niveau, toutefois _Eric son Dev est super sympa
    2019 - SarkaSPIP reste très souvent utilisé dans ses versions 3x et 4.5 mais ne semble plus maintenu, ni même suffisamment documenté pour ses dernières versions...
  • evasquelettes 1162(8.2%)
    Beaucoup trop de plugins pour le faire tourner et je ne suis pas arrivé à les implanter correctement ; Le hic, c’est la doc... Faut aimer l’aventure. La sauvegarde de config est bien utile aux bidouilleurs.. , par contre on peut faire des mises en page radicalement différentes de la structure de base. Si on crée une noisette et qu’on la pose au bon endroit, on la retrouve directement dans un menu spécifique, où on lui donne la position (gauche, droite centre, ainsi que le rang où elle doit être affichée.
  • escal 501(3.5%)
    Très bien documenté, squelette de type "presse-boutons" parfaitement multilingue et adaptatif, un développeu très attentif et réactif, possède sa communauté d’utilisateurs, j’aime bien le concept "presse boutons".... nous n’avons pas tous forcément le loisir/l’envie/le temps de travailler le CSS.. |
  • scolaspip 462(3.3%)
    un squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr ,SPIPr est à la fois une famille de squelettes et un framework pour le développement front avec SPIP.
  • soyezcreateurs 395(2.8%)
    hyper modulable lui aussi, c’est le bébé de Jaques Pyrat, bien foutu tout compte fait (le squelette, pas JP).Il est presse-boutons aussi, La doc existe, mais fait aimer la lecture, et y passer du temps.
  • ahuntsic 277(2%)
    Un jeu de squelettes multilingues à caractère générique, Est-ce qu’il est toujours maintenu ? C’est vraiment le point-clé du choix.
  • sarkaspipr 181(1.3%)
  • noizetier 164(1.2%)
  • multiflex 140(1%)
    Multiflex 3 est un jeu de squelettes (XHTML Strict) hautement paramétrable, son concepteur Matthieu Marcillaud , un pote virtuel mais un pote, alors ...
  • aveline 104(0.7%)
    Aveline est une collection de noisettes hautement paramétrables, compatibles avec les thèmes Z et à inclure dans vos pages avec le noiZetier, bon ça fait deux plugins a s’imprégner de la doc, pour obtenir le résultat visuel que l’on souhaite

Sauf que ces chiffres n’ont strictement aucun intérêt, je trouve. Ce n’est pas parce qu’il est utilisé qu’un squelette est bien fichu ou esthétiquement plaisant ou encore qu’il soit maintenu. Ce dernier point est vraiment essentiel.

Notre choix : Squelettes Escal :
Liste d’entraide, serveur d’hébergement, site de démonstration, etc ..

Les statistiques ont été relevées en Octobre 2014, j’ose espérer que "Escal" aura gagné quelques parts de marché.
mis a jour en : Décembre 2015,Février 2017, Mars 2018, Juin 2019refonte du calcul des stats

"Escal" Année Utilisateur  %
2014 939 (2.8%)
2015 1111 (3.4%)
2016 1224 (4.0%)
2017 1338 (4.7%)
2018 1461 (5.4%)
2019 501 (3.5%)
  • Ne pas suivre les tendances en web design
    Rien ne sert de singer, il faut assumer ses choix
    Coller aux tendances du marché ou développer le goût de copier le leader (a priori) reste encore trop souvent le point d’entrée des décisions prises.
    L’ensemble des acteurs se cherche, chacun avec ses spécificités aussi bien en ce qui concerne son historique mais également en ce qui concerne son positionnement.
    Il apparaît donc évident que le fait de copier ou de suivre une tendance ne peut en aucun cas répondre de façon pérenne à son site. (tous les jours de nouveaux entrants, des refontes importantes)
    il reste urgent de ne pas se précipiter ou bien d’avoir des certitudes.

Escal est HTML5

Les squelettes distribués par SPIP ne sont pas en HTML5 (parce que cela introduirait des invalidités dans les sites construits dans des versions antérieures de HTML).

Mieux vaut donc les remplacer :

Activer HTML5 dans SPIP


Dans le menu « Configuration > Fonctions avancées » de votre site SPIP,
cochez « Permettre le HTML5 ».

Ce réglage n’a pas pour effet de convertir magiquement votre site SPIP en HTML5.
Qu’est-ce que ça fait alors ?
Entre autres choses, SPIP utilisera les attributs HTML5 dans ses formulaires. Mais cela permettra aussi aux plugins que vous utilisez de générer du HTML5.

Vérifier et corriger

Vérifiez ensuite chaque page avec le validateur W3C et corrigez les erreurs. Mais ne faites pas de zèle : ignorez les warnings car certains sont utiles. Par exemple, il ne faut PAS supprimer les attributs type="text/javascript" qui sont indispensables au bon fonctionnement du compresseur de SPIP.

Ajouter le patch final

En dernier, activez le plugin HTML5 qui rectifie les erreurs résiduelles que vous ne pouvez corriger : celles qui sont causées par le code généré par SPIP ou par d’anciens contenus contribué-es par vos auteur·es.

SpipFactory a réalisé les opérations pour convertir votre site en HTML5, ; Cependant votre contenu a une importance quand a la validité et la nous n’y pouvons pas grand chose

Escal est Réponsive

Un site web adaptatif (anglais RWD pour responsive web design, conception de sites web adaptatifs selon l’OQLF1) est un site web dont la conception vise, grâce à différents principes et techniques, à offrir une consultation confortable même pour des supports différents.

L’utilisateur peut ainsi consulter le même site web à travers une large gamme d’appareils (moniteurs d’ordinateur, smartphone, tablettes, télévision…) avec le même confort visuel et sans avoir recours au défilement horizontal ou au zoom avant/arrière sur les appareils tactiles notamment, manipulations qui peuvent parfois dégrader l’expérience utilisateur, tant en lecture qu’en navigation.

Alors ou pas ?

Pourquoi il est recommandé de créer un site en responsive design ?

  • La création et la maintenance seront plus rapides et plus faciles (un seul fichier qui gère l’ensemble des affichages)
  • Un référencement naturel optimal puisqu’il n’existe qu’un seul site internet qui regroupe toutes les versions
  • Une seule adresse web (URL) est utilisée (pas de sous domaines ou redirection vers un répertoire « mobile »)

- Voyons voir l’existant

Plusieurs outils gratuits ont été développés pour vous permettre de tester le responsive design. on peu ainsi vérifier que Escal est optimisée pour l’expérience utilisateur ou dresser la liste des améliorations à entreprendre rapidement !



… La suite de cet article est réservée aux visiteurs enregistrés …
  • XRespond
    un des outils les plus complets pour vérifier le rendu responsive !
  • Responsive Design Checker
    vous donne un accès total à l’espace de test. Vous pouvez générer n’importe quelle taille d’écran et même vérifier votre ratio d’écran.
  • Sizzy
    j’apprécie particulièrement le mode de sélection des previews : par OS (Android ou iOS), ou par device (mobile ou tablette).
  • Firefox
    intègre par défaut une fonctionnalité que l’on peut trouver dans
    menu principal » rubrique Développement » Vue adaptative

    Il permet de redimensionner la fenêtre d’affichage, d’inverser l’affichage (portrait/paysage), de simuler l’effet tactile et de prendre des copies d’écran (raccourci : Ctrl+Shift+M)

c’est déjà pas mal, non ?

- Continuons essayons de valider ESCAL aux standards du Web
tester ses pages Web via un validateur permet d’identifier les erreurs de codage et d’améliorer sensiblement la qualité de notre squelette Web.

- Encore plus loin
il est recommandé d’utiliser des unités relatives pour définir les tailles de texte, avec une préférence pour « em » plutôt que « % ». ils font parti des critères d’accessibilité du W3C, AccessiWeb, Opquast

dans Escal c’est déjà réalisé dans les différents fichier .css mais en « rem », simplifions nous la vie avec rem… ou pas

L’unité rem, plutôt bien supportée dans les navigateurs, permet de définir des tailles relatives comme em, mais en prenant la taille de html comme référence plutôt que l’élément parent.

rem permet donc d’éviter que les listes imbriquées soient de plus en plus petites par récursivité.

Malheureusement, cette force est aussi une faiblesse potentielle.

Car lorsque vous souhaitez modifier la taille d’un composant, il faut modifier la taille de tous ses éléments constituants, alors qu’en em, il m’aurais suffit de modifier uniquement la taille de l’élément conteneur.

Tout n’est pas si simple, que l’on utilise des em ou des rem, différentes problématiques peuvent complexifier la tâche.

Tout d’abord, il faut bien comprendre que de nombreuses conversions entre unités sont effectuées entre les px encore souvent utilisés dans la tête des graphistes et les px utilisés au final par le moteur de rendu des navigateurs

Une autre difficulté concerne les images. Celles qui sont en SVG, donc vectorielles, peuvent avoir sans problème des dimensions définies en valeurs relatives, et donc s’ajuster avec les tailles de texte. Celles qui sont en formats bitmap, par contre, supportent potentiellement assez mal les redimensionnements, comme cela a été évoqué au sujet du zoom global. Il faut donc décider si on applique tout de même des dimensions relatives afin de conserver des proportions constantes, ou si on conserve pour ces images leurs dimensions « réelles », en ajustant le positionnement des éléments qui les entourent ou voisinent. Le choix est relativement simple pour des illustrations flottant au sein d’un texte, bien moins pour des éléments d’interface. Privilégier SVG pour ces derniers est donc préférable.

Vous voulez voir ce que peu donner le ratio taille - distance : https://sizecalc.com/

- et puis Les polices de caractères compatibles avec tous les navigateurs

Plusieurs problèmes qui se succèdent lorsque l’on veut utiliser des polices de caractère un peu originales dans un site web.

Si l’on reprend les choses depuis le début, en toute logique, on ne peut afficher dans une page web que les polices de caractères qui se trouvent déjà dans l’ordinateur de l’utilisateur. Évidemment, les polices livrées avec Windows, Mac OS et Linux ne sont pas les mêmes. Il n’y a qu’un petit nombre de polices communes aux différentes plateformes.

Depuis HTML5 et CSS3, on peut intégrer à son site web des polices de caractères, que l’on appelle dans la feuille de style, et qui sont lues par le navigateur. (de la même façon que l’on appelle les images, et qu’on les intègre dans la page web) ; On utilise pour cela l’instruction @font-face .

  • 1er problème : tous les navigateurs n’intègrent pas la fonction @font-face
  • 2ème problème : tous les navigateurs ne savent pas lire les mêmes famille de polices.
  • 3ème problème : à moins de les acheter, vous ne pouvez utiliser que des polices libres de droit.
  • 4ème problème : une fois la police libre de droit trouvée, il se peut qu’elle n’existe que sous un seul format,donc elle ne sert à rien.

Une solution très intéressante : fontsquirrel, qui vous propose un @font-face generator , ce qui permet d’utiliser une autre police de caractères dans Escal

Par défaut, Escal utilise la famille de police suivante : Verdana, Arial, Helvetica car ce sont des polices qui sont présentes sur tous les ordinateurs, elles sont devenues des standards.

Mais on pourrait avoir envie d’en utiliser une autre, il faut télécharger cette police qui est normalement fournie sous plusieurs formats pour fonctionner sur tous les navigateurs et appareils, ces polices doivent être copiées dans un dossier /squelettes/fonts.

On va ensuite rajouter ceci dans perso.css.

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

Et si on veut utiliser cette police sur l’ensemble du site, on utilisera ce code :

body {
font-family: 'texgyreadventorregular';
}

Conclusion Escal Réponsive

Tout n’est pas écrit ; Tout n’est pas figé, donc n’hésitez pas a donner votre avis, complété ...

Escal est Performant

Vaste débat

  • lié à l’infrastructure de notre hébergeur
  • à l’optimisation de notre site web.

État des lieux
permettre d’avoir une ligne directrice de bonne pratique à suivre afin d’avoir un site optimal à tout point de vue.

  • Uptrends
    Permet de vérifier depuis près de 135 points à travers le monde la performance et la disponibilité de votre site, cela permet d’avoir une vue rapide.
  • LoadImpact
    Vérifier si l’hébergement supportera la charge en cas de grande affluence, en version gratuite me permet de tester mon hébergement avec une charge de 25 visiteurs actifs en simultané sur une durée de 5 minutes.

Tous les webmasters et propriétaires de sites veulent être dans les premiers résultats des moteurs et annuaires de recherches, il existe aussi des pratiques afin d’optimiser au mieux vos pages pour que les données principales ressortent bien.

Avant d’utiliser un quelconque outil, gardez en tête quelques informations utiles.



… La suite de cet article est réservée aux visiteurs enregistrés …

Déjà, il faut choisir un serveur de test proche de l’endroit où se trouvent la plupart de vos visiteurs : en simplifiant, l’outil de test de rapidité va « appeler » votre site… et regarder combien de temps celui-ci met à « répondre ».

Si vos visiteurs sont majoritairement en France et que vous testez le site depuis l’Australie, le temps de chargement va être très long alors que ça ne correspondra pas forcément à l’impression qu’auront vos visiteurs. En choisissant un serveur de test plus proche (en Europe par exemple), vous aurez un résultat plus en phase avec le ressenti de votre public cible.

Chaque outil a un serveur de test par défaut. Regardez où il se trouve et modifiez-le si nécessaire.

Où hébergez-vous votre site ?
L’emplacement des fichiers de votre site joue un rôle dans la vitesse de chargement de vos pages. Chaque hébergeur stocke les fichiers d’un site dans un pays précis. Si, par exemple, vos fichiers sont hébergés aux USA parce que vous avez choisi un hébergeur américain pas cher… et que vos visiteurs sont en France ou en Belgique en grande majorité, ils mettront plus longtemps à accéder à votre site que si les fichiers étaient eux aussi en France ou en Belgique.

Enfin, il y a souvent une différence entre la rapidité de chargement indiquée par un outil de test et votre « ressenti » personnel.

Beaucoup d’outils prennent en compte le temps de chargement complet de la page : autrement dit, ils vont mesurer le temps qu’il faut pour charger le texte, les images, la mise en forme (éléments de design, polices d’écriture), les scripts (boutons de partage sur les réseaux sociaux, publicité, statistiques, etc).

Le visiteur, lui, verra déjà du contenu sur la page même si l’intégralité des éléments n’est pas encore chargée.

Optimisation de la rapidité d’un site : technique et bon sens

Vous allez vite vous apercevoir que l’optimisation du temps de chargement des pages implique d’entrer dans des notions assez techniques. On va vous parler de cache, de compression des scripts, etc.

Si tout ceci est pour vous du chinois, je vous conseille de mettre en œuvre quelques principes de base d’optimisation. Vous n’arriverez peut-être pas à obtenir une note formidable mais ce sera toujours bénéfique pour vos visiteurs.

Il faut donc une part de bon sens quand on optimise un site : si votre site est lent au point de vous faire perdre de nombreux visiteurs, oui, il faut essayer de trouver une solution (changer de thème, retravailler ses photos, etc). Mais si ça reste dans des limites acceptables, autour de 3-5 secondes de temps de chargement, je pense pour ma part qu’il ne faut pas s’inquiéter outre mesure.

  • DareBoost
    Un service tout-en-un pour le test de vitesse du site Web, la surveillance de la performance Web et l’analyse du site Web (vitesse, référencement, qualité, sécurité). Et bien qu’ils soient principalement un service haut de gamme, vous pouvez utiliser leur outil de test de vitesse pour 5 rapports gratuits par mois mise à part les quelques fonctionnalités avancées pour les clients payants. Les rapports gratuits sont en réalité assez impressionnants !

Bref, il faut optimiser la vitesse de chargement de votre site ! Mais comment la mesurer et comment procéder pour l’améliorer quand on n’est pas développeur web ?

DareBoost vous permet de télécharger un rapport (au format PDF), on retrouve ainsi une gamme complète d’indicateurs chiffrés ainsi qu’une multitude d’informations sur la performance et la qualité de la page testée.

Pour chaque analyse, Dareboost passe en revue plus d’une centaine de points de contrôle. Ce qui permet au service de joindre au rapport une liste de conseils d’optimisation personnalisés, très bien documentés, et classés par ordre d’importance.

Alors oui franchement, suivre DareBoost est de très bon conseil pour améliorer globalement votre site web.

  • Après analyse d’une page, un score de performance (en pourcentage de 0 à 100) avec le nombre d’éléments à corriger en fonction du degré d’importance : problèmes critiques, améliorations possibles, succès.
  • Le deuxième tableau de bord de l’outil permet d’obtenir des données beaucoup plus précises sur l’analyse réalisée. Avec ces éléments vous pourrez connaître :
    • Le nombre de requête de la page
    • Le poids de la page
    • Le temps écoulé entre l’envoi de la requête et la réception du premier octet par le client (avec une comparaison du temps recommandé par Google)
    • Le temps pour afficher la partie visible par l’internaute (avec une comparaison du temps recommandé par Google)
    • Le temps total pour afficher l’ensemble des éléments de la page

Tableau de bord qui permet également d’avoir des infos sur la validité du code au niveau W3C, également des indications sur les erreurs navigateurs, les technologies utilisées et votre speed index.
Chaque élément est cliquable pour obtenir des informations plus précises (et souvent plus techniques).

Puis vient la liste les erreurs par ordre de priorité et apport de conseils pour pallier ces problèmes. Chaque erreur est accompagnée d’un descriptif précis pour comprendre en quoi cette erreur ralentit votre page et des conseils sur-mesure permettent de corriger la source du problème.

À suivre pour gagner en efficacité et éventuellement atteindre les 100%.

qrcode:https://spipfactory.fr/pourquoi-le-squelette-escal



puceMentions légales puce

2017-2019 © SpipFactory.fr - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.3.20
Hébergeur : SpipFactory
Soutenir par un don