File Transfer Protocol (FTP)

Quel logiciel utiliser ?

Dans quel dossier faut-il mettre les templates ?

/custom/templates/bazar

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.

Afficher des logos de partenaires

Option 1 : utiliser photobox

""<style>
.pbgallery {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 3em;
  padding: 2em;
}
.pbgallery li a:hover {  box-shadow:none;}
.pbgallery li img{
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%); /* Firefox */ }
.pbgallery li:hover img{
-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
filter: grayscale(0%); /* Firefox */ 
}
.pbgallery li:hover{
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.pbgallery a {  overflow: visible;  background: transparent;  }
.pbgallery a img {  width: auto;   height: 100px; }
  </style>""

Ajouter du css personnalisé

/* :root { */

/* couleur des titres */
/* --title-h1-color:var(--neutral-color); */
/* --title-h2-color:var(--primary-color); */
/* --title-h3-color:var(--secondary-color-1); */
/* --title-h4-color:var(--secondary-color-2); */

/*}*/

:root { 
--title-h4-color:var(--neutral-color);
}

Ajouter un effet au survol de l'image

1ere étape : insérer une image et ajouter un texte

{{attach file="undraw_teaching_f1cm.png" desc="image undraw_teaching_f1cm.png (86.0kB)" size="medium" class="left" caption="Texte de la vignette apparait au survol de la souris"}}

2eme étape : paramètres avancés

3eme étape : personnalisation plus fine

{{attach file="undraw_teaching_f1cm.png" desc="image undraw_teaching_f1cm.png (86.0kB)" size="medium" class="left c4-izmir c4-gradient-top custom-izmir" caption="Texte de la vignette apparait au survol de la souris"}}

""<style>.custom-izmir figcaption{background-color:#ea663c;}</style>""

.c4-izmir { --primary-color: transparent;}

Ajuster le bandeau

Comment ajuster un bandeau contenant seulement une image ?

@media only screen and (min-width: 600px) {
  #yw-header .background-image {
   min-height: 300px;
}
}

@media only screen and (max-width: 370px) {
  #yw-header .background-image {
   min-height: 56px;
}
}

Combiner une image et une couleur de fond

{{section bgcolor="#172983" class="white full-width  text-center cover home-header img-colored" file="image-bandeau.jpg" }}
======Le titre de mon projet====== 
{{button class="btn-primary" link="Projet" text="Découvrir le projet" }}  {{button class="btn-primary" link="Contact" text="Nous contacter" }}
{{end elem="section"}}


""<style>
.img-colored{background-blend-mode: soft-light;}
</style>""

Coller la 1ere section à la barre de menu

/* Correction pour enlever l'écart entre barre de menu et contenu de la page main-container.css */
@media (min-width: 1200px){
    #yw-main {padding: 0;}
}

Améliorer la lisibilité du bouton "S'inscrire"

/* Mise en avant du bouton s'inscrire sous le formulaire de connexion */
.login-form-modal .btn-default{border: 1px solid var(--primary-color);}
.login-form .btn-default{border: 1px solid var(--primary-color);}

Astuces CSS

Autres réglages avancés

Limiter la longueur du texte affiché

Adaptation du style sur un template existant

Quelques exemples d'adaptation css à partir du template card

Avant de se lancer

La structure de votre formulaire est-elle stable ?

Quelques astuces pour insérer des éléments de mise en forme

Custom HTML

<div class="well">

</div>

PageCSS

.id5 {background-color:yellow;}

.BAZ_fiche_titre {
		color:var(secondary-color-2);
		border-bottom:2px solid var(--primary-color);
	
}

.id4 .field-textelong {
  column-count: 2;
}

.id4 [data-id="checkboxListeDepartementbf_checkbox_group"]{display:none;}

Choisir des illustrations

A propos de l'utilisation des images

Quelques sites pour trouver des belles illustrations libres de droit

des dessins au trait modernes et joyeux

des photos

Elements graphiques, photos, illustrations

Format des images

• leur taille (largeur et hauteur) exprimée en nb de pixel
• leur qualité en dpi ou en %

La taille

• Full HD (1920 x 1080 pixels) est la dimension d'un écran PC, dans tous les cas il n'est jamais utile d'avoir une image plus large que ca !
• la largeur de la partie centrale de la page d'un wiki c'est 1100px, donc une demi-colonne 550px

La qualité

Autres traitements pour réduire le poids

Cibler les attentes des utilisateurs

A quels besoins répond le site ?

Quelques exemples d'utilisateurs d'une plateforme collaborative

Prenez le temps de dresser le portrait de vos utilisateurs

Concevoir un formulaire

Créer et modifier des formulaires Bazar

• Menu roue crantée en haut à droite du wiki.
• Entrée « Base de données ».
• Onglet « Formulaires ».

Les différents champs utilisables dans un formulaire

Extension Json dans le navigateur

Afficher les données brutes

https://pratic-coop.fr/?EcoclouD/raw

Json Lite : Extension firefox pour rendre plus lisible

Création de compte utilisateur

Personnaliser le formulaire de création de compte

Modifier le formulaire de connexion

Créer une page Mon Compte

Créer un template de fiche

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

Exemple de code source

{# Exemple d'un template agenda #}
<h1 class="BAZ_fiche_titre">{{fiche.bf_titre}}</h1>

<div class="parent">
    <div class="enfant">
    <p><b><span> Du </span> {{ html.bf_date_debut_evenement }} <span> au </span> {{ html.bf_date_fin_evenement }}</p></b>
    <p>{{html.bf_description}}</p>

    <br>
    {% if fiche.bf_adresse %}   
        <p><i class="fas fa-map-marker"> </i> {{ fiche.bf_adresse }} {{ fiche.bf_code_postal ~ ' ' ~ fiche.bf_ville }}</p> 
    {% endif %}
    {% if fiche.bf_site_internet and not (fiche.bf_site_internet == 'http://') %} <p><i class="fas fa-link"> </i> {{ format(fiche.bf_site_internet)|raw }}</p>{% endif %}
    <br>
    <h3> En savoir plus </h3>
    {{html.fichierfichier|raw}}
    </div>
    <div class="enfant">
    {% if fiche.imagebf_image is not empty %}
    {# you can choose width, height (in px)  and mode "fit" or "crop" #}
    {% set imageFileAddr = urlImage({fileName:"files/#{fiche.imagebf_image}",width:500,height:500,mode:"crop"}) %}
        {% if not(imageFileAddr is same as(false) or imageFileAddr matches '/^\\d+$/') %}
            {# imageFileAddr is not false or not integer otherwise error #}
            <img
                class="center custom-entry"
                alt="{{ fiche.bf_titre|e('html_attr') }}"
                src="{{ imageFileAddr }}"
            />
        {% endif %}
    {% endif %}
    </div>    
</div>

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 %}
	  <div>{{ fiche.bf_titre }}</div>
	{% endfor %}
{% endif %}
{{ pager_links }}

Quelques syntaxes utiles

{{ fiches|length }}

{{ fiche.champ }}

{{ param.optioncustom }}

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

Editeur de code

Exemples d'utilisation de formulaires

Quelques wikis à visiter pour explorer le champ des possibles

Exemples de template de fiche

• copier les codes sources de ces templates,
• coller le fichier dans votre dossier /custom/templates/bazar
• renommer le fichier avec le numero identifiant de votre formulaire
• adaptez le contenu à votre guise

Exemples de template liste

Exercices

Niveau 1 🥉 Importer un formulaire existant

Niveau 2 🥈 Modifier le formulaire agenda et paramétrer l'affichage du calendrier

• les 5 prochains évènements
• avec une icone particulière si cet évènement est en présence ou a distance
• et une couleur signifiant réunion d'équipe, de bureau, de CA

Niveau 3 🥇 Créer un nouveau formulaire

• s'il possèdent des volailles, leur proposer la possibilité de préciser le nombre de poules, canards, lapins
• Affichez un tableau qui résume :
  • pour chaque exploitation afficher le nombre total d'animaux
  • le total de chaque catégorie d'animal ainsi que les surfaces totales de toutes ces exploitations

A vous de jouer

Personnalisez le style dans une page simple

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

  <div class="BAZ_cadre_fiche id2"> .... </div>
  

• 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 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

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 ?

Import csv

Le code HTML généré par YesWiki

Inspecter le code avec le navigateur

Tester des modifications en direct

• soit en modifiant votre page si la modification concerne le contenu
• soit en copiant le code CSS modifié dans votre CSS custom, si la modification concerné le style graphique

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

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 */
[data-id="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;
}

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

• la doc TWIG Symphony v2 officielle (yeswiki utilise twig v2)
• une liste des syntaxes twig pour se donner un apercu des possibilités - c'est bien fait et en francais en plus !

Les formulaires bazar - présentation

La démarche en 3 phases

1 Concevoir le formulaire

2 Afficher le formulaire pour permettre aux personnes d'y répondre

3 Affichage des données collectées

Démo d'utilisation du gestionnaire de base de données

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

Modifier la couleur du menu

Définition des variables de couleur

:root{--primary-color:pink;}

/* un commentaire est placé entre ces caractères */

• enlever les caractères / et / sur la ligne souhaitée
• mais également sur la 1ere ligne :root{ et sur la dernière ligne }

Les variables liées à la barre de menu

/* couleur de la barre de menu */
 --navbar-bg-color: var(--neutral-light-color); 

 --navbar-text-color: var(--primary-color); 

 --navbar-link-color: var(--primary-color); 

 --navbar-link-bg-color: transparent; 

 --navbar-link-hover-color: var(--secondary-color);

 --navbar-link-bg-hover-color: transparent; 

 --navbar-border: none; 

 --navbar-border-radius: 0; 

 --navbar-shadow: none;

Le logo

#yw-topnav .navbar-brand img {  max-height: 2.9rem;}  /* soit environ 40px de haut */

@media mobile and (max-width: 480px) {
	#yw-topnav .navbar-brand img {
	max-height: 3.9rem;
	width: auto;
	margin-left: .9rem;
	margin-top: 1rem;
	}
}

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

Personnaliser le favicon

Prendre en main l'éditeur de page

Les principaux éléments de mise en forme du texte

Titres

Gras, souligné, italique

Ajouter une image

Mise en forme avancée : colonnes, bloc de couleur, ...

Propriété intellectuelle et licences de partage

Droit à l'image

Domaine public - ressource libre

Licences de partage

Prototyper

Outils de design

Rédiger les textes de présentation

Comment une page web est-elle parcourue ?

Quelques points de repères pour vous aider à préparer vos contenus

Titre

Introduction

• une phrase d'accroche
• définir le sujet et son contexte
• la problématique (donne un angle et s'articule autour du besoin)
• annonce le plan

Texte d'habillage

Conclusion

• complète l'introduction
• donne des éléments de réponse
• incite à aller plus loin
• suggère une action
• laisser une ouverture

Quelques conseils

5W2H Who What When How

• Telle personne a commis telle action
• Telle personnalité a formulé telle déclaration
• Tel évènement a engendré telle conséquence

Règle d’écriture : pyramide inversée

Penser au confort de lecture

Référencement naturel

Choisir les bons mots clés

Une bonne astuce pour explorer les mots clés

Explorer les mots clés de vos concurrents

Utilisez vos mots clé

Performance du site

Liens internes et liens externes

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”)

Style des titres

Personnaliser la couleur des titres

:root { 
 --title-h1-color:var(--neutral-color); 
 --title-h2-color:#ea663c;
 --title-h3-color:Fuchsia; 
 --title-h4-color:var(--secondary-color-2); 
 }

• Si vous souhaites aller plus loin, vous pouvez aussi définir vos propres style avec toutes les propriétés css que vous voulez :

• /* pour les titres de niveau 1 */
   h1 {
  	color:red;
  	border:2px solid blue; }
   /* pour les titres de niveau 2 */
   h2 {
    ....
    }
  

• Titre avec un effet surligné

L'astuce pour avoir une couleur de fond légèrement décalée comme sur cet exemple, c'est de définir un dégradé transparent sur 60% de la hauteur du titre, puis de la couleur de votre choix sur 40%
L'utilisation d'un dégradé est possible en utilisant la propriété CSS background-image.

h3 {

• font-size: 1.2rem;
• color: var(--neutral-color);
• background-image: linear-gradient(transparent 60%, rgb(253, 193, 0) 40%);
• width: fit-content;

}

Titre avec un petit trait dessous

Le trait est sous le titre est défini grâce au pseudo élément after
Celui ci permet de rajouter un contenu après une balise HTML, ici après les titres de niveau 2

• h2::after {
  • content: '';
  • width: 60px;
  • border-bottom: 3px solid var(--primary-color);
  • display: block;

}

Syntaxes twig pour afficher du contenu yeswiki

<h1>{{fiche.bf_titre}}</h1>

{{html.bf_description|raw}}

Ajouter une condition

{% if fiche.listeinscription == "obligatoire" %}
    <p>L'inscription est obligatoire, merci de compléter le formulaire suivant : {{html.url_inscription}}</p>
   {% else %}
   <p> Entrée libre dans la limite des places disponibles.
{% endif %}

{% if champ == "valeur" %}

{% if champ != "valeur" %}

{%  if champ %}

Quelques bouts de code à copier coller

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" %}

{% block area_footer %}
	<div class="commentaires"><span v-html="entry.comments_count"></span><i class="fas fa-comment"></i></div>
{% endblock %}

Testez vos connaissances CSS