egt

Bugs and Tips d'EGT

sBa — 2008-09-25T19:33:39Z

Voici quelques bugs, faciles à corriger, ainsi que quelques astuces.

Au bout de deux ans, mieux vaut tard que jamais !

pas de lien vers inc-accessibilite.html (dans la barre en haut, liens cachés)

pour le corriger il faut modifier le fichier inc/accessibilite.html et remplacer "inc-accesskey.html" par "inc/inc-accesskey.html".

pas de lien vers mot de passe oublié et s'inscrire (page de login)

fichier joint (login.html)

login.html dans le fichier zip

un bug d'affichage sous ie 7 (cadre central qui passe dessous)

Pour résoudre ce problème on peut, par exemple, modifier dans la feuille de style egt.css

#centre {
 margin-left: 168px;
 padding-left: 5px;
 width: 410px;
 }

par

#centre {
 margin-left: 165px;
 padding-left: 5px;
 width: 410px;
 }

pas d'affichage des titres et descriptifs des images (en insertion dans les articles)

piste : créer (ou copier celui de la DIST) img.html dans le répertoire modeles du plugin

pour utiliser du png 24

ajouter : .img_png, .image_typo, .spip_logo behavior : url("win_png.htc") ; dans le feuille de style et vérifier de rien.gif est bien présent dans le même répertoire (que la css) ainsi que le fichier win_png.htc

afficher les rubriques du menu dans un certain ordre

modifier :

à la place de

dans inc-menu.html puis numérotez toutes vos rubriques racines (numéro+point+espace+nom de la rubrique dans le champ titre)

taille police forum qui réduit au fil des discussions

supprimer la première ligne (font-size…)

.forum ul {
 [* font-size: 0.85em;*]
 border-width: 0px;
 border-style: solid;
 border-color: black;
 -moz-border-radius: 10px;
 padding: 10px 5px 5px 5px;
 margin: 0px 0px 0px 0px;
 }

numéro qui s'affiche dans le "title" des pages rubriques

piste : rajouter un "|supprimer_numero" quelque part

afficher les sites syndiqués de la rubriques (et non tous ceux du site)

dans rubrique.html remplacer

par

EGT et SPIP 2.0

Le script de création de mots clés ne fonctionne plus, il faudra le faire à la main… (liste des mots clés)

formulaire d'inscription sous spip 2.0

pour corriger la taille qui semble trop grande, dans egt.css modifiez :

#inscription input {
 width: 130px;
 }

par

#inscription1 input {
 width: 130px;
 }

Des sites avec 'egt'

sBa — 2007-01-31T13:09:44Z

Quelques sites avec 'egt', n'hésitez pas à soumettre avec le formulaire prévu à cet effet.

Nom et lien vers le site
Les sixième
ZEP Lavelanet
Jeunesses communistes révolutionnaire
La croisée des chemins
LCR 73
Démarche graphique
ASNT
Collège C.Sourèzes
STEVE HOST IN
gite jérôme quere
URMNIF
Le petit crieur Guérandais
L'atelier
Collège Clairs Soleils
Groupe départemental maternelle 38
Lycéens, votre avenir, Université Paris I
Biostatistique ENVT
USEP 62
CPRCG 53
TICE 09
Ecoles Ax Les Thermes
Ecole Publique Tarascon Sur Ariège
CAOB67
Le petit cheminot de Cottens
JT du OFF (Site porte projet)
Virgule et Abeille
Français en ligne
ITFORMATION
PCF Avion 62
Le journal de Gonfaron
ATTAC 06
Dans Tous Les Coins
Cinétic Cinéma
Physiologie ENVT
Site de l'association Onco Plein Air
Mairie de Mérens
Ressources en sociologie
Il était une fois…
Gérard Loup - Artiste Peintre sculpteur
Association des CASU
Lycée d'Enseignement Agricole Privé de Bengy sur Craon
Jabran M'Barek, guide chamelier dans le grand Erg Tunisien
Site de la société Royale des Architectes de Verviers et Environs
Mal de Ojo TV
MathFle
SCO KARATE MARSEILLE
Med-in-marseille.info
Equitation aubrac Lozere
RNRSMS
Sous le signe de Saint Michel
Atelier Cuisine
AMICALE SCOLAIRE D'ORSAY
vivre autrement à Jaunay-Clan
Ouessant, site officiel de l'ile
Lentilly Avec Vous
Skol Diwan Plabenneg
Autour d'un moka
FAR Croix-Rousse
Les Astuces
La tranchée de Lorette
AFOC Logement Social Nord (59)
Complètement à l'ouest
Gite dans les Côtes d'Armo
Municipales 2008 : Union pour Lentilly, avec Vous
SVT la plate forme
Genres Pluriels asbl
Miscellanées
L'âge de faire
La collegiale de Candes-Saint-Martin
groupe Mobydick
FraTho : site d'un prof de maths

Soumettre un site

Bordures ombrées

sBa — 2006-12-15T12:18:31Z

Si vous avez des difficultés pour appliquer un fond de couleur à une bordure ombrée, voilà qui devrait vous aider.

Le squelette egt utilise des images de fond, utilisées par la feuille style egt.css. Parmi elles, trois images :
haut.jpg
milieu.jpg
bas.jpg ce sont les bordures ombrées [1]. Pour mettre ces bordures en accord avec le fond que l'on aura choisi, je vous livre ici les fichiers graphiques (avec calques) qui vous permettront de faire ce changement facilement.

haut (The Gimp)	haut (Photoshop)
milieu (The Gimp)	milieu (Photoshop)
bas (The Gimp)	bas (Photoshop)

Pour changer la couleur de fond, il suffira d'ouvrir ces fichiers, avec The Gimp (logiciel libre) par exemple, et de modifier la couleur du calque 'arrière plan' puis de faire un export au format jpg (dans le dossier images du plugin egt)

Comment avoir exactement même couleur dans sa page html et son fichier graphique ?

je vous conseille l'utiisation de l'extension Colorzilla sous firefox, elle vous permettra de récupérer n'importe qu'elle couleur présente dans une page Web. Vous pourrez ainsi récupérer le code de la couleur et l'appliquer dans votre fichier graphique.

Ces fichiers peuvent servir de base pour créer d'autres types de bordures.

[1] dont l'utilisation est facultative

Copies d'écran

sBa — 2006-12-03T08:37:04Z

- egt v 0.2 / afficher article dans colonne centrale

Mini-calendrier et gestionnaire d'évènements

sBa — 2006-11-29T16:17:45Z

Mini calendrier et agenda

Ici sur la page sommaire du squelette egt

Pour ajouter un mini calendrier et un gestionnaire d'évènements, on utilise ici le plugin agenda associé à un autre plugin : widget calendrier. Il faut donc téléchager et activer ces deux plugins.

Il faut lire la documentation à leur sujet, elle se trouve sur Spip-contrib.

Ci-dessous un exemple de code pour l'intégration sur la page sommaire du squelette egt. Vous pouvez faire un copier/coller juste après le

 
 [(#CALENDRIER_MINI{#ENV{date},'date',#SELF})]
 
 [(#DATE_DEBUT|Agenda_memo_full{#DATE_FIN,[(#TITRE|addslashes)],#DESCRIPTIF,#LIEU,
 [(#ENV{self}|parametre_url{#ENV{var_date},[(#DATE_DEBUT|affdate{'Y-m-d'})]})]})]
 
  
 
 <:agenda:>

 
 
 #TITRE

 [(#DATE_DEBUT|Agenda_affdate_debut_fin{#DATE_FIN,#HORAIRE})
]
 #LIEU

 #DESCRIPTIF

 
 

 [(#PAGINATION)
]

On oubliera pas de rajouter dans la feuille de style le code suivant :

/* Habillage du mini calendrier */
 #calendar { -moz-border-radius: 1em;text-align: center; border: 1px dotted #ccc; padding: 2px; padding-top: 0.5em; width:140px;}
 #calendar table { width: 100%; margin: 0 auto; padding: 0; }
 #calendar caption { font-size:0.8em;padding: 5px ; font-weight: bold; }
 #calendar th { -moz-border-radius: 1em;background: #ADC7D6; font-weight: normal; color: #666; }
 #calendar th abbr { border: none; cursor: help; }
 #calendar td {-moz-border-radius: 0.7em; margin: 0; padding: 0; border: none; text-align: center; background: #ddd; line-height: 1.6em; }
 #calendar td.horsperiode { background: #ececec; color: #ccc; }
 #calendar td.occupe { background: #FFD98F; }
 #calendar td a { display: block; }
 #calendar td span { color: #aaa; }
 #calendar td a:hover { border:0px }
 #calendar tr { font-size:0.9em; }
 
 /* Habillage agenda */
 #agenda dt{
 background-color: #FFD98F;
 -moz-border-radius: 10px;
 padding: 2px 0px 2px 10px;
 margin: 0px 0px 0px 0px;
 }
 #agenda dd{
 font-size: 0.9em;
 padding: 2px 0px 2px 20px;
 margin: 0px 0px 0px 0px;
 }

La boucle agenda est paginée. Par défaut les 2 prochains évènements s'affichent, pour modifier cela, changez le critère de {pagination 2} dans la boucle la BOUCLE_agenda(EVENEMENTS)

Source : article plugin agenda (et son forum !) et squelette Spip Party

Accessibilité du squelette

sBa — 2006-11-15T13:44:35Z

Le squelette egt essaie d'être accessible

pour cela :

une barre de navigation supérieure (invisible) est accessible sur chaque page
des 'accesskeys' (raccourcis clavier) sont présentes
Contenus structurés avec les balises de titre h1,h2,…
lien vers le sommaire version texte
plan du site
balise 'alt' sur les images
Les textes de contenu ont une taille de police relative
pas de liens ouvrants dans une nouvelle fenêtre
navigation possible avec la touche tabulation du clavier
"fils d'Ariane" sur toutes les pages

Il existe des validateurs d'accessibilité, ils sont à prendre avec des pincettes, car de nombreux critères d'accessibilité ne peuvent être validés par une machine.

quelques validateurs :
http://www.tawdis.net/taw3/cms/en
http://validateur-accessibilite.apinc.org/

Un bon départ pour commencer à s'informer sur l'accessibilité :
Article sur Wikipedia

5. Modifier l'apparence du squelette egt avec la feuille de style Css

sBa — 2006-11-13T13:50:06Z

Modifier la feuille de style (egt.css)

La feuille de style est structurée en plusieurs parties (Intro, header, navigation…)

couleur des liens et survol, police du site : dans la partie 'Intro' de la css
couleur de barre de navigation : partie 'Navigation' de la css (déclaration #haut)
puces colonne de gauche : partie 'colonne gauche' de la css (déclaration : #gauche li)
puces colonne de droite : partie 'colonne droite' de la css (déclaration : #droite li)
couleur de fond du menu : partie 'menu' de la css, première déclaration
couleur du lien exposé dans le menu : partie 'menu', déclaration

La css permet l'affichage des images suivantes :
degrade_titre.png : degradé sous le titre de l'article (page article)
loupe.png : s'affiche dans le formulaire de recherche
fleche.png : pour les listes et la barre de navigation
haut.png, bas.png, milieu.png : pour les bordures ombrées

Un menu 'classique' pour egt

sBa — 2006-11-12T15:53:11Z

Voici un menu 'tout css' qui s'installe en un clic grâce au plugin 'menu déroulant'.

Pour installer ce menu

télécharger le plugin ci-joint qui comprend certaines modifications [1] par rapport à l'original (que vous trouverez sur la zone svn : svn://zone.spip.org/spip-zone/_plugins_/_test_/menu_deroulant).

décompressez-le dans le repertoire plugins de votre Spip (sous le nom de deroulant)

activer le plugin "menu deroulant"

modifier les 9 fichiers html qui sont à la racine du plugin egt_squelette (sommaire.html, rubrique.html…sauf 404.html)

Remplacez l'appel du menu d'origine : par

videz le cache et testez

remarques :
ce plugin est classé 'en developpement'

[1] modification de la css pour une meilleure intégration au squelette egt et suppression d'une paire de

dans le fichier inc-menu-deroulant.html pour validation Xhtml correcte

Un peu d'Ajax sur la page sommaire avec le plugin pagination_ahah

sBa — 2006-11-12T15:41:56Z

Lu sur Spip.net :

Lorsqu'une boucle renvoie plusieurs dizaines d'articles (ou, pour une pétition, plusieurs milliers de signatures), il n'est pas souhaitable, voire impossible, de tout afficher sur une seule page.

On préférera alors répartir les résultats en plusieurs pages, avec un système de navigation page à page. S'il est possible de réaliser cela avec des boucles SPIP ordinaires, c'est tout de même relativement complexe.

Aussi SPIP 1.9 introduit-il un système simplifié de pagination des résultats d'une boucle.

Le squelette egt v.0.2 comprend le système de pagination grâce à la balise #PAGINATION introduite dans Spip 1.9

En savoir plus sur la balise #PAGINATION et modifier ses critères : le système de pagination de Spip

Pour éviter de recharger toute la page à chaque clic sur les ancres de pagination, le plugin pagination_ahah permet d'introduire un peu d'Ajax pour avoir un chargement partiel de la page.

Vous trouverez ci-dessous le plugin extrait de la zone le 12/11/2006.

2. Caractéristiques détaillées

sBa — 2006-11-06T00:29:04Z

'egt' est un squelette 'classique' qui peut convenir à plusieurs types de contenus. L'idée générale était de faire un squelette qui permette l'ajout de 'blocs d'infos' dans une ou plusieurs colonnes à l'aide de mots clés. Ce squelette utilise un menu dépliable qui affiche les titres d'articles.

Principales fonctionnalités et spécificités

Validité XHTML transitional 1.0
Squelette accessible ou essayant de l'être… (voir détails)
Menu dépliable affichant les titres d'articles (menu 'classique' possible)
Affichage des forums, brèves, pétitions, annuaire de site
Feuille de style pour l'impression des articles.
Utilisation du formulaire_ecrire_auteur à la place de #EMAIL pour éviter le spam
Affichage éventuel de la date de modification des articles
Utilisation de la balise #CHEMIN (deplacement facilité du repertoire contenant les fichiers liés au squelette)
Balise #INSERT_HEAD présente (pour les plugins l'utilisant)
Utilisation du filtre image_typo pour les titres d'articles ayant le mots clé 'afficher colonne centrale'. Une police, libre d'utilisation, est fournie avec le squelette (dossier polices).
Une seule feuille de style (egt.)
Intègre la déclaration css du plugin barre typo enrichie stable 1.9.1
Numérotation des articles et des rubriques possibles pour définir l'ordre d'affichage sur le site public
Page d'erreur 404
Filtre de redimensionnement des images (dans les textes des articles, dans l'affichage des colonnes latérales)
Installation automatisée des mots clés grâce à un script (remerciements à Marc, auteur du squelette Epona )
pas de php dans les squelettes (j'en suis incapable)

Ce que le squelette n'a pas ( ToDo )

Pas de gestion du multilinguisme
Pas de squelette d'affichage des mots clés
Page auteur à compléter
Feuille de style à améliorer
…

Testé sur ces navigateurs

Validé ?	Plateforme	Navigateur	Version
oui	windows	Internet Explorer	5.5 - 6.0 - 7
mouais	windows	Internet Explorer	5
oui	windows	Firefox	1.07- 1.5 - 2
oui	windows	Opera	9.02
?	Mac	Internet Explorer	5
oui	Mac	Firefox	1.5 - 2
oui	Mac	Safari	1.2 - 1.3 - 2
oui	Mac	Opera	8.5 - 9
oui	Unix/Linux	Firefox	1.5 - 2
oui	Unix/Linux	Konqueror	3.5.5
oui	Unix/Linux	Opera	9.0