Créer un template de liste

Dans quel dossier du serveur faut-il placer les fichiers ?

Structure du code (template non dynamique)

{% if fiches|length > 0 %}
	{% for fiche in fiches %}
	  
{{ fiche.bf_titre }}
	{% endfor %}
{% endif %}
{{ pager_links }}

Quelques syntaxes utiles

{{ fiches|length }}

{{ fiche.champ }}

{{ param.optioncustom }}

{# Valeurs de la liste dimension #}
{% set listOptions = listValues('ListeDimension','root') %}
{% if (fiche.listeListeDimension) %}
        {% set nodeDimension = listOptions.nodes|filter(node => node.id == fiche.listeListeDimension)|first %}
{% endif %}
Dimension :  {{ nodeDimension.label }}

Templates dynamiques

{{ bazarliste id=".." template="my-template" dynamic="true" }}

{# custom/templates/bazar/entries/index-dynamic-templates/my-template.twig #}
{% extends "@bazar/entries/index-dynamic-templates/card.twig" %}
{% set necessary_fields = ['comments_count','reactions_count'] %}
{% block area_subtitle %}

	    

        
        
         
         
         
          
   
   

{% endblock %}

A vous de jouer

Personnalisez l'affichage de bazarliste

⭐ Niveau 1
Petites adaptations de mise en forme en utilisant seulement le CSS
exemple sur la page Agenda : template card avec le style carré (vous pouvez vous inspirer de cet exemple ) :

• faire apparaitre le titre de l'évènement et le lieu au survol de l'image

⭐⭐Niveau 2
Créez un template qui affiche le nombre de fiches


⭐⭐⭐Niveau 3
Créez votre propre template liste-evenement.twig

Icone Agenda (flaticon):

On pourra aussi imaginer une couleur différente par type d'évènement

🤩 Niveau Jedi
Créer un template infinite slider comme dans cette vidéo https://www.youtube.com/watch?v=mF9yOwlunWk

Exemples de template liste

Quelques astuces CSS avancées

A vous de jouer

• personnaliser le css pour masquer certains label
• supprimer le trait après le titre modifier la couleur du texte de description

• inspecter le rendu de la fiche coding-party et copier le code HTML qui correspond au rendu de la fiche : entre

   .... 
  

• coller dans une page de votre wiki TemplateAgenda
• Modifier le code HTML pour créer un encadré avec date et lieu de l'évenement placé sous le titre et avant la description comme sur le modèle ci-contre

• accéder au serveur et créer le dossier custom/templates/bazar
• copier votre code HTML dans un fichier nommé fiche-2.twig
• remplacez les textes de l'évènement par un affichage dynamique de la valeur de chaque champ ex

• {{html.bf_titre}}
  

• enregistrez et transférez le fichier sur le serveur
• actualisez votre fiche évènement coding-party
  • si il y a une erreur dans le code, reportez vous à la ligne indiquée sur le message d'erreur

A vous de jouer

Personnalisez le style dans une page simple

Testez vos connaissances CSS

Les documentations de référence

• en mode dictionnaire de référence https://www.w3schools.com/html/default.asp
• Pour s'entrainer avec des petits exercices interactifs : https://www.w3schools.com/html/exercise.asp?x=xrcise_elements3

• le dictionnaire de toutes les propriétés CSS https://www.w3schools.com/css/default.asp
• Les exercices pour découvrir et s'entrainer : https://www.w3schools.com/css/exercise.asp?x=xrcise_syntax1

• https://softglossary.space/glossary#css - il faut naviguer dans le glossaire pour approfondir ses connaissances, - j'aime bien par exemple la partie sur les flexbox
• https://codyhouse.co/nuggets - des astuces pratiques pour réaliser des mises en formes un peu bling bling

• la doc TWIG Symphony v2 officielle
• une liste des syntaxes twig pour se donner un apercu des possibilités - un tour d'horizon du langage en francais

Les bases du CSS

selecteur { 
	propriété : valeur ;
	propriété2 : valeur2 ;
}

Les commentaires

/* mon commentaire */

Les sélecteurs

Un élément HTML

/* Titre 1 de couleur bleu avec un cadre autour */ 
h1{
	color:#4F86C6; 
	border : 1px solid #4F86C6
	}

Un élément spécifique qui possède un identifiant id = x

/* Paragraphe contact sur un fond bleu ciel */
#contact{
	background-color:#E0E9F5;
	padding:1em;
	}

Les éléments qui possèdent une classe

/* Libellés des champs bazar plus petits et plus gras */
.BAZ_label {
	font-size: 1rem;
	font-weight: 800;
	}

Appliquer le même style à plusieurs éléments

/* Même couleur pour tous les niveaux de titre */
h1, h2, h3, h4 {	color:#4F86C6; }

Sélecteur avec un attribut

/* Supprimer le label pour les champ bf_description */
[] .BAZ_label {display:none;}

Les pseudo-classes

• styliser un élément lorsque l'utilisateur le survole avec la souris
• donner un style différent aux liens visités et non visités
• donner un style à un élément lorsqu'il est mis en évidence
• styliser les éléments de formulaire valides/invalides/requis/optionnels

/* Rotation au survol de l'image */
img:hover{   
	-webkit-transform: rotate(10deg);
   -moz-transform: rotate(10deg);
   -ms-transform: rotate(10deg);
   -o-transform: rotate(10deg);
   transform: rotate(10deg); }

Les pseudo-éléments

• styliser la première lettre ou ligne d'un élément
• Insérer du contenu avant ou après un élément

/* la barre placée à coté du titre des fiches bazar */
.BAZ_fiche_titre::after {
  background-color: var(--primary-color);
  content: "";
  flex: 1;
  height: 12px;
  border-radius: 12px;
  margin-left: 2rem;
}

Import csv

Accessibilité

1. De quoi parle t-on ?

1.1 Définition

• auditif
• cognitif
• neurologique
• physique
• de la parole
• visuel

• les personnes utilisant un téléphone mobile, une montre connectée, une télévision connectée, et autres périphériques ayant des petits écrans, différents modes de saisie, etc.
• les personnes âgées dont les capacités changent avec l’âge
• les personnes ayant un « handicap temporaire » tel qu’un bras cassé ou perdu leurs lunettes
• les personnes ayant « une limitation situationnelle » comme être en plein soleil ou dans un environnement où elles ne peuvent pas écouter l’audio
• les personnes utilisant une connexion internet lente ou ayant une bande passante limitée ou onéreuse

1.2 Concrétement, sur quoi agir ?

• Proposer des alternatives textuelles à tout contenu non textuel : Le contenu non textuel, ce sont les différents supports visuels de votre site web, les images, icônes, tableaux, etc. Pour percevoir ces éléments, les personnes mal ou non-voyantes ont besoin de description alternatives, qui pourront être lues par leur lecteur d’écran.

• Faciliter la perception visuelle et auditive du contenu : Gardez bien à l’esprit que votre utilisateur peut ne pas être en mesure de bien percevoir certains contenus, il faut donc lui faciliter la vie. Évitez, par exemple d’utiliser la couleur pour faire passer des informations ; Faites attention à respecter un niveau de contraste suffisant entre votre texte et le fond ; N’utilisez pas de musique de fond qui perturberait l’utilisation d’un lecteur d’écran, etc.

2. Les outils d'analyse

3. Améliorer l'accessibilité de son Wiki

• Compléter le champ "Texte de remplacement" par une phrase simple ou des mots-clés décrivant l'iamge que vous ajoutez. Par exemple, le lecteur d'écran d'une personne mal-voyante lira cette phase pour permettre à la personne de comprendre l'image.

• Cochez "Non" à l'option "Permettre de cliquer sur l'image pour l'afficher en grand", afin de faciliter la navigation en évitant d'envoyer votre utilisateurs vers l'image en pleine page sans possibilité "simple" de reotur en arrière.

Propriété intellectuelle et licences de partage

Droit à l'image

Domaine public - ressource libre

Licences de partage

Mentions légales

Rubriques à faire apparaitre

• dénomination sociale
• forme juridique
• montant du capital social

• adresse du siège social
• adresse de courrier électronique ou numéro de téléphone pour contacter votre structure

• si vous utilisez des images, illustrations, photographies : vous devez faire figurer leur propriété intellectuelle
• pour les textes qui ne sont pas les vôtres, vous devez recueillir l’autorisation de l’auteur ou tout du moins citer la source du texte

• le nom de l’hébergeur
• la raison sociale
• l’adresse
• le numéro de téléphone.

exemple de mentions légales

RGPD

Réglementation Générale sur la Protection des Données personnelles RGPD

Votre wiki gère des données nominatives ? Quelques questions à se poser

Des données sensibles ont-elles été collectées ?

quels sont les droits d'accès appliqués ?

quels sont les droits d'écriture ?

une page "Mes contenus" est-elle accesible ?

êtes vous amenés à transmettre les données à une autre structure ?

Sécuriser son site

1. Une page a été modifiée

Solution possible

Prévenir les risques

• sur l'ensemble du wiki : ce flux est accessible via la page DerniersChangementsRSS/xml de votre wiki
• spécifiquement sur chacun des formulaires (via Bazar)

2. SPAMS ou Messages publicitaires sur de multiples pages

Solutions possibles

Prévenir les risques

• Mot de passe demandé pour modifier les pages (dans rubrique Droits d’accès) - il s'agit d'un mot de passe unique proposé par l'administrateur et communiqué aux membres du groupe - il est associé à une question qui peut être simple comme "combien font 3 fois 4 en lettres ?", cela permet de rester très ouvert aux contributions pour un large public (sans création de compte) mais de limiter les modifications faites par des robots
• Activer l'utilisation d'un captcha avant la sauvegarde (dans rubrique Sécurité)
• Modifier les droits d’écriture par défaut (dans rubrique Droits d’accès / cela s’appliquera aux nouvelles pages)

Faire "hiberner" son wiki, le mettre en lecture seul

• qu'il y est de contributions/modifications
• passer du temps à surveiller les spams

3. Protection des données personnelles

Solutions possibles

Prévenir le risque

4. Le site a disparu 😰

• une mise à jour qui ne s'est pas déroulé correctement
• l'absence de renouvellement de l'hébergement (chez la plupart des hébergeurs, si vous n'avez pas payé le forfait annuel, l'accès et coupé et le site est supprimé assez rapidement)
• le datacenter a brulé et vos données aussi

Solutions possibles

Prévenir le risque

EN RESUME

3 échelles d'actions

• 1. GESTION PAR PAGE
• 2. ACTION GLOBALE (via composants)
• 3. FICHIER DE CONFIGURATION (page “GérerConfig”)

Création de compte utilisateur

Personnaliser le formulaire de création de compte

Modifier le formulaire de connexion

Créer une page Mon Compte

Droits d'accès aux pages (lecture / écriture)

Modifier les droits par défaut

Modifier les droits sur les pages existants

https://www.encre-bleue.com/?GererDroits&filter=7

Modifier les droits d'une page en particulier

Modifier le menu

[Intitulé à afficher](IdentifiantPage)

[[IdentifiantPage Intitulé à afficher]]

- Lien visible
  - Sous menu (affiché au survol)
  - Sous menu 2
 - Lien visible 2
 - Lien visible 3

Interface de restitution

Les différents mode d'affichages des données

Des paramètres communs à tous les types d'affichage

• la recherche est lancée automatiquement dès que l'utilisateur a tapé 3 caractères
• la recherche s'applique à l'ensemble des fiches (y compris lorsqu'on a utilisé l'option pagination - 10 fiches par page)

L'affichage par défaut : liste

L'affichage le plus modulable : bloc