-le site utilise désormais les plugins suivants :
-Gis
Pour la géolocalisation d’évènements
-Jquery cycle ou wowslider
Pour la bannière défilante
-Supersized slideshow
Pour les diaporamas dans les articles.
-Video accessible
Pour l’ajout de vidéos sur le serveur
-Adaptive Images
Pour redimensionner automatiquement les images de grande résolution.
Attention, le fait d’avoir un grand nombre d’images de grande taille redimensionnées peut ralentir l’affichage de l’article)
-Escal V3
Le thème
-Google analystics :
Une fois le plug in installé.
Se connecter sur https://www.google.com/analytics/
Des statistiques supplémentaires sont disponibles à cet url :
http://www2.animath.fr/ecrire/?exec=stats_visites
-Codeur d’adresses email
ajoute un capcha avant de pouvoir envoyer un message a une personne ayant mis son adresse email dans un article.
-Facebook Models
Afin d’ajouter une option permettant de “liker” une page d’article.
-Twitter
Le widget peut être modifié sur cette page dans la partie “widget”
https://twitter.com/account/profile_settings
Le nom d’utilisateur doit être “Asso_Animath”
Un code apparait en bas à droite, il suffit alors de le copier et coller dans un article
-les autres plug-ins
Sont requis pour le fonctionnement des plugins ci dessus.
Comment modifier le site avec escal v3 ?
Le cache
Après avoir effectué des modifications de paramètres avec escal V3 et pour que ces modifications soient visibles sur le site,
Penser à vider le cache dans “maintenance” puis “vider le cache”
-Supprimer une image (exemple test.jpg) pour remettre une image de même nom mais différente peut provoquer un “bug”. (La première image supprimée risque de s’afficher au lieu de celle souhaitée)
le logo Animath
Pour modifier le logo, aller dans configuration puis identité du site.
Les logos doivent être au format png ou tga pour avoir un calque de transparence.
les menus
Ces derniers peuvent avoir un logo assigné, pour ce faire, aller dans edition puis rubrique. Cliquer ensuite sur une rubrique et ajouter une image (en png) dans la partie Logo de la rubrique
Pour qu’une rubrique n’apparaissent que dans l’espace privé, il convient de lui assigner des mots clés (pas-au-menu ; pas-au-menu-vertical ; pas-a-la-une ; pas-au-plan ; pas-a-decouvrir )
Pour disposer de plusieurs couleurs dans une rubrique.
Une astuce consiste à insérer un tableau dans la rubrique
(le code suivant n’est visible qu’après avoir cliqué sur “Modifier cet article”)
“color: #000;” signifie que l’écriture sera noire
”
” signifie que le fond sera blanc.
| INSERER LE TEXTE ICI |
les sous rubriques et articles
Ces derniers peuvent également avoir un logo assigné, pour ce faire, aller dans l'article souhaité puis ajouter le logo dans la partie "Logo de la rubrique" En l'absence de logo d'article, c'est le logo de rubrique qui apparait. Si il y a un logo d'article, il remplace le logo de rubrique. (Attention ; penser à supprimer le "logo"la banière défilante
deux choix sont possibles : Utiliser Wowslider ou jquerycycle. Avec jquery cycle, Il suffit de coler le code suivant dans un article pour que les images contenues dans un article soient utilisés dans la bannière. :Cap'Maths - résumé du projet
Dans "description " et "Crédits", coller ?articleXXX entre "code" et "/code"
XXX correspond au numéro de l'article.
EXEMPLE : ?article367
Avec Wowslider
Les effets de transition de wowslider sont très variés et la bannière s'adapte à la largeur de l'écran.
Cependant, l'utilisation du logiciel wowslider est très utile pour créer les bannières rapidement.
Pour utiliser wowslider.
1- "Drag & Dropper" des images sur la page wowslider
(images qui serviront d'illustrations aux articles)
Blank"" ouvrira l'url cible dans une nouvelle page (recommandé) "_self" intègrera l'url cible dans l'image. 8- Cliquer sur publish en bas de la page
Les diaporamas
Avec Supersized slideshow Dans un article, pour qu'une image apparaisse dans un "slideshow", il faut :téléverser des images de même dimension dans un article.
placer les images dans le portfolio
coller un lien qui redirige vers le slideshow Ex : http://www2.animath.fr/spip.php?page=slide&id_article=655 655 étant le numéro de l'article -Attention, pour qu'une image apparaisse dans le slideshow, il ne faut PAS qu'elle soit intégrée dans l'article avec les code
Les rubriques
Pour modifier les rubriques visibles sur la page d'accueil, il convient d'aller dans squelettes puis escal. puis partie centrale pour faire apparaitre la bannière défilante Choix des blocs latéraux pour faire apparaitre les rubriques sous la bannière Ex : Actus, minicalendrier; article libre, noisette à personnaliser ETC. Le nom des rubriques peut être modifié dans la partie Paramétrage des blocs latéraux Pour ajouter des fonctionnalités dans les "blocs latéraux" dans un article ou d'une rubrique, Il faut cliquer sur "squelettes" puis "escal", puis dans la partie "Les pages internes" Aller ensuite dans l'une de ces rubrique : Les rubriques Les articles La page contact Les autres pages Et remplacer les blocs ayant comme mention "aucun" par une autre mention.Les boutons
Deux types de boutons animés ont été créés : Des boutons en image et des boutons en texte. Les boutons en image nécessitent au moins 2 images pour faire la transition. L'article "Laissez vous guider vers le contenu qui vous convient !" (présent à cet url : http://www2.animath.fr/ecrire/?exec=article_edit&id_article=650) comprend du texte html écrit dans l'article et du css téléversé dans l'article (avec la fonction "Ajouter une image ou un document" puis "parcourir" et "téléverser". Dans cet exemple : link href="http://www2.animath.fr/IMG/css/vousetes4.css" rel="stylesheet" type="text/css" media="screen" Le html va charger un fichier css nommé "vousetes4.css" Dans ce CSS est défini les couleurs des boutons, leur taille, leur vitesse de transition. Etc... Pour modifier le bouton vert, il suffit de télécharger le css, de l'ouvrir avec un éditer de texte tel "blocnote, wordpad ou notepad++" Aller à la partie "#navgreen" et modifier le code hexadécimal background : -moz-linear-gradient(top, rgb(112,182,0), rgb(62,132,0)); ET background: rgba(112, 183, 4, 1); Pour savoir quel code RGB correspond à quelle couleur, Il suffit de se rendre sur le site suivant : http://www.colorpicker.com/ Ainsi, on constate que : 12, 183, 4 correspond au vert clair 62,132,0 correspond au vert foncéLes vidéos
Il est possible d'intégrer plusieurs types de vidéos.Des vidéos en local : avi, flv mp4 etc (seules les vidéos en flv peuvent être mises en mode "intégré" avec le code suivant :
Des vidéos hébergées sur d'autres sites tels youtube, dailymotion, viméo etc Pour intégrer une vidéo youtube, il suffit d'aller sur l'url de la vidéo souhaitée, puis cliquer sur "partager" puis "intégrer" puis coller le code. Pour intégrer une vidéo dailymotion , il suffit d'aller sur l'url de la vidéo souhaitée, puis cliquer sur "exporter" puis coller le code.
Les sites partenaires
Pour intégrer un site partenaire, il suffit d'écrire :
XXXXXXXXXXX = url du site.
Dans les articles de spip, un message placé entre code et /code n'est pas traité en tant que html mais en tant que texte.
Si la valeur width ou height n'est précisée en pourcentage (%), elle est traitée automatiquement en pixels (px).
Attention : tous les sites ne permettent pas l'intégration iframe
Les évènements
Lors de la création d'un article, cliquer sur créer un évènement. Renseigner les informations nécessaire : type d'évènement, Nom de l'intervenant, lieu, adresse etc Il est possible de lier plusieurs évènements a un même articles. De est également possible de lier plusieurs emplacements a un même articles.Géolocalisation
Une fois l'article validé, dans la partie Géolocalisation, cliquer sur lier un nouveau point Renseigner les informations, (le zoom etc) Il est possible de placer des liens qui seront visibles quand l'internaute cliquera sur la puce bleue sur la carte. Les liens doivent être écrits dans la partie Descriptif Le zoom et l'emplacement de la carte visible sur la page d'accueil est défini dans l'article 656 : http://www2.animath.fr/ecrire/?exec=article_edit&id_article=656Les mots clés escal
actus correspond à actualités animath annonce-defilant permet de créer un menu déroulant avec les articles qui comprennent ce not clé. Le menu déroulant est celui présent par défaut avec escal. annonce est la même chose que annonce-defilant à la différence que l'image ne change pas. article-libre1 correspond a une rubrique dans laquelle du texte peut être ajouté special permet d'ajouter un article dans les actualités partenaires video-une permet d'ajouter une vidéo intégrée. (hébergée sur le serveur) Pour renommer un mot clé, aller dans edition puis mots-clés puis cliquer sur le titre d'un mot clé et cliquer sur modifier ce mot clé Ensuite ouvrir les fichiers suivants (situés dans escalv3) escal_V3\formulaires\configurer_escal_article.html escal_V3\formulaires\configurer_escal_pages_noisettes.html escal_V3\formulaires\configurer_escal_rubrique.html escal_V3\formulaires\configurer_escal_sommaire_colonnes.html escal_V3\inclusions\inc-article_libre1.html escal_V3\escal_fonctions.php Faire un ctrl+F avec un éditeur de texte tel notepad++ Puis cliquer sur remplacer et remplacer le mot clé actuel par celui souhaité. Pour supprimer des mots clés aller dans edition puis mots-clés et cliquer sur supprimer ce mot. Attention, un mot clé qui est utilisé dans un ou plusieurs article ne peut pas être supprimé. Mots clés disponibles par défaut : acces-direct accueil actus agenda annonce annonce-defilant annuaire archive article-libre1 article-libre2 article-libre3 article-libre4 article-libre5 chrono citations edito favori forum mon-article pas-a-decouvrir pas-a-la-une pas-au-menu pas-au-menu-vertical pas-au-plan photo-une pleinepage RubriqueOnglet site-exclu special video-uneEmplacement du slogan, du titre et de la description du site
Voir le fichier general.css dans la partie "bandeau"Téléversement d'images et de fichiers sur le site dans les articles
La résolution et taille maximale téléversable dans un article peut être modifiée en ajoutant : define('_LOGO_MAX_SIZE', 5000) ; define('_LOGO_MAX_WIDTH', 5000) ; define('_LOGO_MAX_HEIGHT', 5000) ; define('_DOC_MAX_SIZE', 5000) ; define('_IMG_MAX_SIZE', 5000) ; define('_IMG_MAX_WIDTH', 5000) ; dans config/mes_options.php 😉 5000 correspond a la largeur, hauteur en pixels ou taille en Kilo-octets. Par défaut, la résolution maximale de téléversement est de 900x900pxLa police d'écriture
Il est possible de changer le type de police des menus dans le fichier. general.css (plugins/escal_V3/styles/general.css) Remplacer par exemple font-family: Century Gothic, par font-family: arial, la taille des police des menus, elle, se change dans le fichier menu.css dans la partie /* menu racine */ ul#menu font-size: 20px; il suffit de changer le nombre de px la taille des police des sous-menus est définie ici /* Les sous menu */ ul#menu ul font-size: 18px; Pour modifierle menu, voir le fichier menu.css
le bloc central de la page d'accueil, voir le fichier alaune.css
l'agenda, voir le fichier agenda.css
le forum du site, voir le fichier forum.css.html
les styles configurables, voir le fichier config.css.html La police de wowslider est modifiable dans escal_V3/XXXXXX/engine1/style.css Dans ce fichier, il suffit de remplacer la partie "'Open Sans',Arial,Helvetica,sans-serif; " Par la police souhaitée. Exemple : 'century gothic',century gothic,century gothic; (pour tout mettre en century gothic)
Les contacts
La page http://www2.animath.fr/ecrire/?exec=article_edit&id_article=678 Dans l'exemple suivant :-
Cliquer sur "Activités" permet d'envoyer un message à l'adresse "toto@yopmail.com"
Le plugin Codeur d'adresses permet que le lien vers l'adresse mail ne soit pas visible pour l'internaute (ou robot) avant d'avoir effectué une addition.
(le test ne marche pas depuis l'espace privé)
Modifier de lien des contacts
Dans la partie "" du fichier inc-pied.html, il suffit de changer l'url.Modifier la couleur des menus déroulants et slogans
Supprimer "#slogan-site-spip" dans la partie /* les caracteres */ dans le fichier config.css.html
Supprimer "ul#menu li a," dans la partie /* bleu fonce de base */ dans le fichier config.css.html
modifier ensuite
color: #Ffffff;
background-color: #627da4;
dans la partie ul#menu li a du ficher menu.css
Les logos des partenaires
Les informations contenues dans le fichier inc-pied.html permettent de les afficher.
Le code suivant sert à faire un lien vers le site "https://www.ti.com" quand l'internaute clique sur l'image texas.png (image stockée dans escal_V3/images) :
Toujours avec la même image, ce lien ci redirigerait vers l'article géolocalisation