var Phenix = function () {
Troll du Web depuis 1996

Html5

Générer automatiquement des touch-icons avec #SPIP

2 novembre 2015 par Phenix dans 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

  1. [(#REM)
  2.   Favicon touch icon.
  3.   Voir https://mathiasbynens.be/notes/touch-icons
  4.  
  5.   Ce fichier va générer les favicons pour un maximum de device.
  6.   Il n'est pas inutile de passer ce squelette dans le filtre supprimer_ligne_vide (https://gist.github.com/phenix-factory/1dc0195bd655a654b9ef)
  7. ]
  8.  
  9. [(#REM)
  10.   Tableau des tailles, en px
  11.   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.
  12. ]
  13.  
  14. [(#SET{taille_device,
  15. [(#ARRAY{
  16. 192,192,
  17. 180,180,
  18. 152,152,
  19. 144,144,
  20. 120,120,
  21. 114,114,
  22. 76,76,
  23. 72,72,
  24. 60,60,
  25. 57,57})]})]
  26.  
  27. <BOUCLE_generateur_touch_icone(DATA){source tableau, #GET{taille_device}}>
  28.   [(#REM)
  29.     L'utilisateur fourni un fichier spécifique, on affiche directement
  30.   ]
  31.  
  32.   [(#CHEMIN{apple-touch-icon-#VALEURx#VALEUR.png}|oui)
  33.     [<link rel="[(#VALEUR|=={192}?{icon, apple-touch-icon-precomposed})]" sizes="#VALEURx#VALEUR" href="(#CHEMIN{apple-touch-icon-#VALEURx#VALEUR.png})">]
  34.   ]
  35.  
  36.   [(#REM)
  37.     Pas de fichier spécifique, on va créer l’icône si le fichier générique le permet.
  38.   ]
  39.   [(#CHEMIN{apple-touch-icon-#VALEURx#VALEUR.png}|non
  40.     |et{#CHEMIN{apple-touch-icon.png}|hauteur|>={#VALEUR}|oui}
  41.     |et{#CHEMIN{apple-touch-icon.png}|largeur|>={#VALEUR}|oui})
  42.     [<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})">]
  43.     ]
  44. </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

Foundation

18 avril 2015 par Phenix dans 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.