
Html5
Générer automatiquement des touch-icons avec #SPIP
Comme beaucoup de choses en développement web, les touch-icons [1] c’est le bordel.
Des formats différents en fonction des écrans, en fonction des résolutions d’écrans, des versions d’Android en vrac, et des développeurs perdus au milieu.
Bref, voici un petit squelette SPIP basé sur le travail Mathias Bynens.
L’idée est de placer un fichier apple-touch-icon.png dans le dossier squelettes/ de SPIP pour le décliner automatiquement dans toutes les autres versions.
Le fichier ne sera pas agrandi donc il vaut mieux utiliser un fichier de minimum 192px.
Dans certains cas, la gestion automatique n’est pas idéale.
On peut alors placer un fichier apple-touch-icon-VALEURxVALEUR.png pour remplacer celui générer automatiquement.
Par exemple, si je veux remplacer le fichier 72px : apple-touch-icon-72x72.png
- [(#REM)
- Favicon touch icon.
- Voir https://mathiasbynens.be/notes/touch-icons
- Ce fichier va générer les favicons pour un maximum de device.
- Il n'est pas inutile de passer ce squelette dans le filtre supprimer_ligne_vide (https://gist.github.com/phenix-factory/1dc0195bd655a654b9ef)
- ]
- [(#REM)
- Tableau des tailles, en px
- Pour le moment, ils n'ont pas encore pondu autre chose que des icônes carrées. On espère que cela ne change pas.
- ]
- [(#SET{taille_device,
- [(#ARRAY{
- 192,192,
- 180,180,
- 152,152,
- 144,144,
- 120,120,
- 114,114,
- 76,76,
- 72,72,
- 60,60,
- 57,57})]})]
- <BOUCLE_generateur_touch_icone(DATA){source tableau, #GET{taille_device}}>
- [(#REM)
- L'utilisateur fourni un fichier spécifique, on affiche directement
- ]
- [(#CHEMIN{apple-touch-icon-#VALEURx#VALEUR.png}|oui)
- [<link rel="[(#VALEUR|=={192}?{icon, apple-touch-icon-precomposed})]" sizes="#VALEURx#VALEUR" href="(#CHEMIN{apple-touch-icon-#VALEURx#VALEUR.png})">]
- ]
- [(#REM)
- Pas de fichier spécifique, on va créer l’icône si le fichier générique le permet.
- ]
- [(#CHEMIN{apple-touch-icon-#VALEURx#VALEUR.png}|non
- |et{#CHEMIN{apple-touch-icon.png}|hauteur|>={#VALEUR}|oui}
- |et{#CHEMIN{apple-touch-icon.png}|largeur|>={#VALEUR}|oui})
- [<link rel="[(#VALEUR|=={192}?{icon, apple-touch-icon-precomposed})]" sizes="#VALEURx#VALEUR" href="(#CHEMIN{apple-touch-icon.png}|image_reduire{#VALEUR,#VALEUR}|extraire_attribut{src})">]
- ]
- </BOUCLE_generateur_touch_icone>
Un Gist est disponible pour ce code.
[1] Les icônes qui s’affichent quand un site web est ajouté dans la liste des app d’un smartphone par exemple
Formulaire d’upload en html5

Un formulaire d’upload en html5 pour l’interface admin de SPIP.
Ce plugin ajoute un système d’upload moderne à SPIP. Il peut être utilisé pour l’upload de masse.
Foundation

Foundation est un framework CSS et Javascript très complet pour réaliser des sites sur une grille propre et homogène. Mais surtout, il permet de rendre un site responsive très facilement !
Ce plugin ajoute le framework Foundation sur l’espace public de SPIP. Les éléments Javascripts sont désactivés par défaut.