Méthode source et ratio (srcset)

Image pour contrôler le choix par srcset
Pour information, votre ordinateur, tablette ou mobile a les caractéristiques suivantes :

Dimension (LxH): x px - PixelRatio (DPR):

{up addscript=body} var height = document.querySelector('#height'); var width = document.querySelector('#width'); var pixelratio = document.querySelector('#pixelratio'); function resize() { height.textContent = window.innerHeight; width.textContent = window.innerWidth; pixelratio.textContent = window.devicePixelRatio; } window.onload = resize; window.onresize = resize; {/up addscript}

L'action image-gallery peut créer et utiliser des tailles d'images adaptées aux caractéristiques de votre appareil. Vous pouvez le vérifier avec l'image ci-dessus qui contient un texte avec sa largeur. Ce test peut être fait en chargeant cette page sur différents appareils ou en utilisant le simulateur fourni par Firefox.

{up readmore=Comment utiliser le simulateur responsive de Firefox}

La méthode la plus facile pour afficher le simulateur responsive est d'appuyer simultanément sur les touches Shift+Ctrl+M (Firefox & Chrome).

simulateur-rwd-firefox

1. la taille de la fenêtre peut être modifiée avec la souris ou en choississant un appareil dans la liste

2. DPR correspond à PixelRatio (exemple : 2 pour un écran Retina)

3. cet article calcule et affiche la taille actuelle de la fenêtre. Pour actualiser le PixelRatio, il est necéssaire de recharger la page.

{/up readmore}

La méthode retenue par UP privilégie les points suivants :

  • poids minimal pour l'image
  • fichiers alternatifs dans le dossier image (au lieu du cache). Il suffit de supprimer le sous-dossier srcset pour régénerer les images aux différentes tailles lors du prochain affichage de la page
  • nombre restreint de fichier pour limiter le poids des sauvegardes
  • possibilité de créer soit-même ses images alternatives

Ce site personnel, hébergé sur les serveurs de la société o2switch, est réalisé avec la dernière version de Joomla!

Les extensions utilisées

Ce site, donc l'objectif est la démonstration du plugin UP, utilise très peu d'extensions.

  • Le template utilisé est Helix Ultimate
  • La présentation des démos pour les actions utilise le module Simple Isotope de Pascal Leconte - ConseilGouz
  • Le formulaire de contact est réalisé avec FlexiContactPlus. J'aime bien son CAPTCHA simple et ludique.
  • La gestion des téléchargements est confiée à JDownloads
  • LM-Prism me permet d'afficher du code avec coloration syntaxique.
  • LMZoom permet d'agrandir dans une lightbox les images
  • LM-Custom me permet d'utiliser UP dans un module
  • L'alerte sur l'utilisation de cookies est faite par le plugin Kick GDPR
  • Le sitemap est fait par OSMap
  • L'optimisation et la sécurité du site sont assurées par aeSecure

Même si cela ne se voit pas, j'utilise en backend les extensions suivantes :

  • l'incontournable Akeeba backup pour les sauvegardes
  • QuickCacheCleaning pour nettoyer les caches et déverrouiller les éléments bloqués
  • JDump pour déboguer mes créations
  • en complément de l'éditeur wysiwyg TinyMCE, la saisie en mode code est faite avec Rokpad.
  • Le changement d'éditeur est réalisé avec Editor Switcher
  • Mon plugin AdminOrder fait en sorte de toujours me présenter les listes comme je le désire
  • LM-MetaData sur la page d'accueil backend me permet de suivre l'état des articles et d'éditer rapidement les derniers
  • Pour compiler les modifications CSS, j'utilise mon plugin SCSS Compiler

Gestion des données personnelles

Ce site ne conserve aucune donnée. Le formulaire de contact permet uniquement d'envoyer un email au gestionnaire du site.

Certaines des actions proposées par UP utilisent des services externes qui peuvent déposer des cookies. Cela est signalé dans leur documentation. Vous devez en tenir compte avant de les utiliser sur votre site.

Accès, utilisation, respect des droits d'auteur

Ce site est destiné à votre information. Vous disposez d'un droit d'utilisation des informations qui y sont contenues à des fins exclusivement personnelles et non commerciales.

Vous n'êtes pas autorisés à modifier, distribuer, transmettre, diffuser, représenter, reproduire, publier, transférer ou vendre tout ou partie de ce site, tout document téléchargé à partir de ce site ou toutes listes de liens obtenues à partir de ce site, ni à créer des oeuvres dérivées de ces documents ou listes de liens, sauf accord particulier et préalable conclu avec l'éditeur et/ou l'auteur.

L'ensemble du site relève de la législation sur le droit d'auteur et la propriété intellectuelle. Rappel de l'article L.112-3 du Code de la Propriété Intellectuelle.

Tous les droits de reproduction sont réservés, ce qui inclut les documents à télécharger, les représentations iconographiques et photographiques. La reproduction des textes sur support papier est autorisée sous réserve du respect de la gratuité de la diffusion, de l'intégrité des documents reproduits et de la citation, claire et lisible de la source.

Cookies & Analyse de trafic

Ce site utilise Google Analytics, un service d’analyse de site internet fourni par Google Inc. (« Google »).

Google Analytics utilise des cookies , qui sont des fichiers texte placés sur votre ordinateur, pour aider le site internet à analyser l’utilisation du site par ses utilisateurs. Les données générées par les cookies concernant votre utilisation du site (y compris votre adresse IP) seront transmises et stockées par Google sur des serveurs situés aux Etats-Unis. Google utilisera cette information dans le but d’évaluer votre utilisation du site, de compiler des rapports sur l’activité du site à destination de son éditeur et de fournir d’autres services relatifs à l’activité du site et à l’utilisation d’Internet. Google est susceptible de communiquer ces données à des tiers en cas d’obligation légale ou lorsque ces tiers traitent ces données pour le compte de Google, y compris notamment l’éditeur de ce site. Google ne recoupera pas votre adresse IP avec toute autre donnée détenue par Google.

Vous pouvez désactiver l’utilisation de cookies en sélectionnant les paramètres appropriés de votre navigateur. Cependant, une telle désactivation pourrait empêcher l’utilisation de certaines fonctionnalités de ce site.

En utilisant ce site internet, vous consentez expressément au traitement de vos données nominatives par Google dans les conditions et pour les finalités décrites ci-dessus.

Cette liste d'actions est la documentation générée automatiquement par le plugin à partir des informations récupérés dans le code source de l'action.

{up filter | guest} {up upactionslist} {=======}

Consolidation du fichier dico.json effectuée

{up upactionslist | make-dico} {/up filter}

Un shortcode est composé de :

  • {up l'identifiant du plugin pour la recherche du shortcode dans les articles et modules.
  • une suite d'option=argument séparés par des caractères pipes (AltGr+6).
  • la première option est le nom de l'action
  • une option sans argument est considérée comme égal à vrai ou 1. (0=faux)
  • le shortcode peut être sur plusieurs lignes pour faciliter la lecture
  • on peut saisir le nom des options sans se soucier de la case, ils sont évalués en minuscules.
    De même les tirets du 6 seront remplacés par les underscores du 8
  • le programmeur de l'action peut définir des alternatives pour le nom de l'action et des options.
    Par exemple: saisir table-par-lignes renvoie vers le nom 'technique': table_by_rows
  • } pour indiquer la fin du shortcode.

Le shortcode peut être en 2 parties entourant un contenu.

Exemple {up table-par-lignes} <table> ...</table> {/up table-par-lignes}

Il peut y avoir des shortcodes à l'intérieur du contenu pour indiquer des alternatives.

{if filter | admin} je suis un admin {=====} je ne suis pas un admin {/if filter}

Cela permet une saisie entièrement en wysiwyg

Les copier-coller des exemples de shortcodes sur ce site peuvent ne pas fonctionner. Dans ce cas, copier uniquement le contenu sans les accolades {}.

{up markdown=plugins/content/up/history.md}

Le contenu de cette page provient du fichier history.md qui est mis à jour automatiquement lors de la mise à jour du plugin UP
le shortcode pour afficher le texte est :

{up markdown=plugins/content/up/history.md}

UP, un plugin à tout faire

les nouveautés

{up slider-owl | items=3 | autoplay=4000}

photo
image-gallery

Images dans une ligthbox
avec gestion du poids des images.

En savoir plus

Edition
PDF

Fichier PDF dans un bloc de la page
ou un lien pour le voir/télécharger

En savoir plus

HTMLModal

HTML, fichiers, images, vidéos, ...
dans une fenêtre modale

Laissez-vous guider

divers
website

Lien vers site web avec screeshot

En savoir plus

cartographieOSMap

Des cartes libres avec OpenStreetMap

Laissez-vous guider

{up clocks-gmt | digital=0 | skin=6}
clocks-gmt

Horloge modiale personnalisable

En savoir plus

social network
facebook-timeline

Pour afficher la timeline, les évenements
ou les messages de Facebook

En savoir plus

social network
tweeter-timeline

Pour afficher la timeline de tweeter

En savoir plus
{/up slider-owl}
UP, le couteau suisse de Joomla!

UP, pour Universal Plugin,
permet de réaliser plein d'actions dans vos articles et modules personnalisés.

UP permet d'insérer des éléments comme une vidéo ou des prévisions météo, de modifier le comportement d'une table pour la rendre responsive, d'ajouter du code CSS/JS sans risque de suppression par les éditeurs wysiwyg.

Mais ceci n'est que quelques exemples de ses possibilités, la liste complète est disponible sur la page documentation des actions

A l'image du couteau suisse qu'il est toujours pratique d'avoir à portée de main, UP très discret si on n'a pas besoin de lui (zéro octet sur la page), servira de chef d'orchestre pour lancer l'action demandée. Seuls les fichiers nécessaires à cette action seront chargés par le navigateur client.

L'idée m'est venue à la lecture d'un post sur forum.joomla.fr,
la personne recherchait un plugin pour afficher la météo.

J'aurais pu le créer classiquement, mais cela me posait plusieurs problèmes et interrogations.

  • il fallait créer plusieurs fichiers et dossiers (xml, php, tmpl, language)
  • il fallait créer le code pour isoler le shortcode dans l'article puis le traiter
  • il fallait ensuite installer le plugin
  • et surtout, Joomla! va l'appeler pour tous les articles et modules qui utilisent les plugins de contenu

Je me suis dit qu’en dehors de l'étape traitement, le reste est commun à tous les plugins de contenu. Voilà l'explication pour universal

UP, l'origine
UP, le concept

Un petit exemple très simple pour expliquer le concept

le but, afficher un texte en gras et en rouge.

Dans l'article, on saisit : {up grasrouge}le texte en gras et rouge{/up grasrouge}

Pour traiter la demande, il suffit de :

  • créer un sous-dossier "grasrouge" dans le dossier actions du plugin
  • dupliquer le script _exemple_simple en "grasrouge.php"
  • le modifier pour indiquer que la classe s'appelle grasrouge
  • dans la fonction run, modifier la valeur de la variable $out avec le code suivant :
    $out = '<strong style="color:red">' . $this->content . '</strong>';

{up box | model=info | box-class=mt3}

Bien que minimaliste, cet exemple montre bien le fonctionnement de UP:

  • Joomla! n'appelle qu'un seul plugin qui va se charger d'appeler les différentes actions
  • on peut répondre à un besoin spécifique très rapidement
  • le code est limité au minimum. Des modèles sont fournis
  • il est inutile de passer en mode code, Les éditeurs wysiwyg sont utilisables
  • une saisie manuelle du shortcode est nécessaire, mais cela évite la gestion d'un plugin editors-xtd.
    La liste des options, créé automatiquement, est disponible sur demande.

{/up box}

UP existe avec uniquement le shortcode ouvrant.

C'est le cas pour le plugin sur la météo. J'ai intégré le code fourni par Daneel sur une idée de RobertG comme action.
Le shortcode pour afficher celle de Saint-Tropez est

{up meteo-france=831190}

{up meteo-france=831190 | orientation=h | style=text-align:center}

Pour afficher une carte Google, il suffit d'insérer:

{up gmap=1 rue de la paix, paris}
{up gmap=1 rue de la paix, paris | height=200px}

Une vidéo Youtube, un simple shortcode:

{up youtube=tVKWiseNGUU}

{up youtube=tVKWiseNGUU}

UP peut modifier un contenu situé entre un shortcode ouvrant et un shortcode fermant.

Pour rendre une table responsive, il suffit d'entourer la table par ces 2 shortcodes: {up table-par-ligne} et {/up table-par-ligne}

Les shortcodes peuvent être inclus. Les actions doivent être différentes pour éviter tout conflit.

aide

UP vous aide lors de la saisie des shortcodes

Vous aimeriez un rappel des options utilisables avec une action, c'est très simple, ajouter une option avec juste un point d'interrogation.

{up youtube | ?}

affiche les informations ci-contre en haut de la page en frontend. Les termes entre parenthèses sont les alternatives ou traductions autorisées pour le nom d'une action ou des options.

Si le développeur de l'action l'a prévu, un lien vers une page de démo est accessible directement.

Ca ne marche pas comme vous le voudriez, il suffit d'ajouter une option debug pour avoir les options avec leur valeur telle que comprise par le plugin UP

Exemple pour une video youtube avec ce shortcode:

{up youtube=OJb_vHfVSn4 | width=50% 
| style=border:red 2px solid | class=mcenter | debug }

L'aide affichée est lue directement dans les commentaires et les variables de votre script action.

Vous n'aurez aucune excuse, si votre script est bien documenté, l'aide utilisateur sera disponible.

Pour gérer le multilangue, il est automatiquement fait appel à des fichiers externes (si disponibles dans le dossier de l'action).

Une documentation complète et à jour disponible sur votre site

il suffit de créer un article en accès restreint aux rédacteurs avec le shortcode {up upactionslist}

Exemple pour les 2 actions lorem

{up upactionslist=lorem,lorempixel}

Un clic sur une action affiche la doc lue directement dans le script de l'action. Si disponible, le lien "DEMO" affiche une démonstration sur le site up.lomart.fr

La documentation de toutes les actions disponibles sur ce site est visible en cliquant sur ce lien

Les utilisateurs de UP

Les utilisateurs de UP
Le novice
  • UP lui propose un tas de fonctionnalités en français.
  • les recherches sur la JED et l'installation de multiples extensions sont évitées durant la phase de découverte souvent décourageante de Joomla!
  • il évite les passages en mode code et les modifications de fichiers (CSS/JS).
  • sur le forum Joomla, fournir un code sous la forme d'un shortcode UP évite les nombreux messages sur où et comment le faire!
    Il serait même possible de fournir un zip avec le dossier d'une action créée pour répondre à une demande.
Le webmaster
  • il est assez facile d'expliquer à un client comment l'utiliser.
  • il peut créer une interface de saisie qui évite à son client de saisir du HTML.
  • il évite l'installation de nombreuses extensions utilisées une seule fois
Le graphiste
  • plus besoin d'aller dans le code pour la personnalisation d'une page. Un shortcode suffit
Le programmeur
  • la phase récupération du shortcode et de ses options est inutile. Il lui suffit de coder l'action.
  • il devient possible de tester rapidement un script trouvé sur le Net.

Et pour tous, fini l'installation de multiples extensions pour une fonction rarement utilisée.

UP, c'est un seul plugin qui appelle des actions. Une action, c'est uniquement de la place sur le disque.

Pour créer de nouvelles actions

C'est très simple, suivez les exemples commentés pas à pas :

UP met à disposition des fonctions utilitaires qui permettent d'écrire les actions plus rapidement. Utilisez-les, car elles réalisent des contrôles, affichent des alertes et proposent des fonctions comme la liste des options disponibles.

consultez la section "Programmation" de ce site. Vous y trouverez en français toutes les informations pour vous aider.

Et n'oubliez jamais les grands principes de UP:

  • UP n'est pas fait pour un rédacteur qui veut uniquement cliquer
  • UP n'oblige jamais à passer en mode code dans l'éditeur
  • UP permet de créer rapidement une action
  • UP a tout les fichiers d'une action dans le sous-dossier de l'action (ou /assets pour les ressources communes)
  • Une action UP s'installe en copiant son dossier dans le dossier actions. Le supprimer désinstalle l'action
Programmer UP

Voilà pour les grandes lignes.
Parcourez les exemples de ce site pour voir ce qu'il est possible de faire...

note: la liste ci-dessous est créée automatiquement par l'action "articles-category" et stylisée avec "addCssHead".

{up addcsshead=.list-inline-none li [list-style:none;display:inline-block;padding: 5px 10px;background-color: #498DC8;border-radius: 5px;margin: 5px;box-shadow: 0 3px 2px rgba(0, 0, 0, 0.2);].list-inline-none li a[color:white].list-inline-none li a:hover[color:yellow;text-decoration:none]@media(max-width: 767px)[.list-inline-none li[width:100%]]} {up article-category=8 | class=list-inline-none tc}

et bientôt les vôtres ...