STIC-1
Griselda Necco - 26 Nov. 06
Externes:
Internes (personnelles):
J'ai d'abord cherché un modèle de base qui me plaisait (voir http://www.openwebdesign.org/) afin de commancer à travailler sur une base et éviter d'écrire la feuille de style depuis zéro. Mon choix s'est porté sur A BIG IDEA :: by Payal Dhar (http://writeside.net/) pour l'aspect général (page centrée), son menu horizontal et le design des titres. Ces trois éléments sont les seuls que j'ai gardé, le reste a été modifié (structure interne, couleur de fond, image d'en-tête, ajouts de menus, etc.). Vient ensuite la recherche d'une image pour l'entête et la création des différentes zones de la page avec la feuille de style. La dernière étape est l'ajout du contenu.
J'ai opté pour un menu horizontal permettant une navigation de base et un menu de gauche pour les pages où il y a plus de contenu et il faut se déplacer verticalement sur la page. Toutes les pages indiquent au visiteur où il se trouve (indication en haut à gauche et sur le menu de navigation).
La structure de la page est la suivante:
Les menus ont été inspirés de ceux présentés sur le site Listamatic et adaptés.
L'image de l'entête est une vielle publicité de Tricia Guild et de son magasin Designer's Guild (http://www.designersguild.com/).
Au niveau du contenu, le format de CV classique a été évité en centrant mes expériences par domaines-clés. La page des liens est devenue utile en la transformant en "opensource survival kit"...
L'éditeur utilisé pour les pages xhtml est HTML-Kit, cet outil m'est familier et il offre une fonction de validation et beaucoup d'autres éléments très utiles.
Le risque que j'ai identifié dès le début de l'exercice s'est réalisé...j'ai passé trop de temps au niveau du design! J'ai eu quelques difficultés à afficher correctement la page en Mozilla et Explorer, ce qui est au fond était prévisible puisqu'ils n'interprètent pas certaines propriétés CSS de la même manière.
La feuille de style CSS a quelques imperfections et j'aurais
voulu réaliser une page avec un design plus
indépendant du browser (il y a des différences
d'affichage entre Firefox et Explorer). Je n'ai pas testé
sous Mac OS ni d'autres browser moins utilisés.
Dans l'ensemble, il me semble avoir rempli mes objectifs.
J'aurais voulu passer moins de temps sur le design mais j'y ai
pris plaisir et finallement c'est ce qui compte le plus pour
moi.
Cascading Style Cheatsheet - http://web.tampabay.rr.com/bmerkey/cheatsheet.htm : Très utile pour avoir toutes les propriétes CSS sous la main.
Open Web Design - http://www.openwebdesign.org/: Des modèles de sites web gratuits.
HTML-Kit et ses plugins - http://www.htmlkit.com/: Editeur HTML, XHTML, XML, CSS gratuit.
Listamatic - http://css.maxdesign.com.au/listamatic/: Des examples de menus basés sur CSS.
Créer la page travaux en XML et adapter le XSLT.
J'ai examiné les pages d'anciennes étudiantes MALTT (je remercie "canonica" et "michel" pour leurs efforts) et j'ai essayé de comprendre comment ça marche, en ajoutant, éliminant et transformant des éléments jusqu'à arriver au résultat final.
J'aurais voulu apprendre à utiliser sérieusement Xemacs mais je n'ai pas trouvé le moyen d'installer le module psgml. Finallement, j'ai travaillé sur un éditeur XML que je connaissais déjà: Amaya.
Amaya - www.w3.org/Amaya/ : Editeur XHTML, XML, MathML et SVG, gratuit.
Je ne suis pas sûre d'avoir compris les consignes de "création" de la page. Dans tout les cas, j'ai pris une page RSS 2.0 et l'ai adapté. La raison d'être de cette page RSS est d'offrir des nouvelles intéressantes aux ONGs sur des contenus de technologie ou des thématiques liées à l'aide au développement.
J'ai pu comprendre comment adapter la feuille de style CSS au contenu de la page RSS grâce à l'article de B. Hammersley (voir ci-dessous).
Voici les fichiers:
Page d'accueil : http://tecfa.unige.ch/etu-maltt/maya/necco5/stic/ex1/rss.html
DTD RSS 2.0:
http://tecfa.unige.ch/etu-maltt/maya/necco5/stic/ex1/rss-2.0.dtd
La feuille de style: http://tecfa.unige.ch/etu-maltt/maya/necco5/stic/ex1/rss.css
La page RSS elle-même: http://tecfa.unige.ch/etu-maltt/maya/necco5/stic/ex1/rss.rss
Making Your RSS Feed Look Pretty in a Browser by Ben Hammersley - http://www.oreillynet.com/pub/a/network/2005/07/01/rss.html
Je n'ai pas compris l'utilité de l'exercice, excepté que FOAF sert à créer un réseau et à partager, c'est dans l'air du temps le résautage...
Ma démarche a été d'utiliser le foaf-a-matic et de vérifier comment cela est fait ailleurs (voir référence ci-dessous). J'ai ensuite testé le ficher avec l'outil de validation RDF, c'est joli et ça s'affiche comme prévu.
Indicating Authorship with FOAF - http://www.amk.ca/xml/foaf-author.html
Leigh Dodds' FOAF-a-matic - http://www.ldodds.com/foaf/foaf-a-matic.html
RDF validator - http://www.w3.org/RDF/Validator/