Mattia Alexandre Fritz @ TECFA
Rapport pour l'exercice 1 3 novembre 2013
1. Le résultat
Cet exercice se compose de 5 éléments :
- Home page TECFA
- Contribution wiki
- Autre home page sur un service qui permet de créer des sites
- Page des travaux XML
- Présentation avec impress.js
2. Objectifs
2.1 Home page TECFA
L'objectif de cette page est tout simplement donner une image extérieur de moi. J'ai fourni à ce propos quelques informations succinctes pour me présenter ; j'ai ensuite indiqué mon parcours académique et mes compétences professionnelles ; enfin, avec un petit script JavaScript, j'ai inséré dans la page le lien à quelques travaux présents dans ma page des travaux XML. J'ai choisi de n'utiliser qu'une seule page pour deux raisons : je voulais donner une image homogène des différents sections, sans qu'il ait un "saut" hyperlink qui tranche le contenu ; les informations sont très succinctes et donc une seule page suffit. Les liens internes à la page utilisent à ce propos un script jQuery qui a une fonction de scroll. Le problème avec les liens internes est que parfois l'utilisatuer ne s'aperçoit pas du changement dans la page, car il s'attend le téléchargement d'une nouvelle page. J'ai donc inséré un effet "mouvement" pour souligner le changement du contenu affiché.
2.2 Contribution wiki
Je me suis vraiment limité à quelques modifications mineures dans le domaine que je connais le plus : les technologies web. Je n'est pas encore assez de confiance dans mon français pour me "lancer" dans des modifications plus significatives, mais je compte améliorer ma contribution dans les périodes qui suivent. J'ai très certainement lu beaucoup plus de page de celles que j'ai modifiées, et cela m'a permis de me faire une idée de quelques pages que je pourrais modifier ou créer dans le future.
En ce qui concerne ma page personnelle, j'ai repris la présentation de ma home page TECFA (à laquelle il y a un lien d'ailleurs) et j'ai profité de certaines pages déjà présentes dans le wiki pour faire une petite liste d'intêret technologiques.
2.3 Page personnelle NetVibes
J'ai créé une petite "agrégation" de feed personnelle : programmation, web design, sport, etc. C'est un moyen pour avoir les infos toutes au même endroit.
2.4 Page des travaux XML
Il s'agit tout simplement de la liste de mes travaux pendant le MALTT. Le seule objectif un peu différent de la structure initiale est tout simplement le fait que je vais marquer le "status" de certains travaux "public" ainsi que ces travaux vont s'afficher dans ma home page TECFA.
2.5 Présentation de Symfony avec impress.js
J'ai créé une présentation sur Symfony : un framework PHP pour le développement d'application web. Le public visé par la présentation est représenté par des programmateurs PHP avec une certaine expérience mais qui se sont aperçu qu'il y a des éléments dans leur travail qui se répètent et qu'il serait bien de les organiser un peu mieux. Il faut à ce propos avoir au moins quelques connaissances en programmation en objet, donc ce n'est pas une présentation pour débutants. L'objectif pédagogique de la présentation est tout simplement de donner envie d'en savoir plus et de parcourir les slides jusqu'aux ressources supplémentaires.
3. La production
3.1 Home page TECFA
J'ai utilisé pour cette page le CSS Bootstrap qui fourni des outils pour structurer la page (eg, division de la page en 12 "grids", "responsive design", etc.). J'ai ensuite créé un CSS personnalisé pour ajouter quelques éléments graphiques (un logo, une image) et bien délimiter les 4 sections de la page. J'ai voulu utiliser les balises HTML5 d'organisation de la page, donc la page possède un header, un aside, une nav, un footer et des sections. En outre, j'ai inséré un petit script JavaScript (basé sur jQuery) pour récupérer seulement certains travaux de ma page des travaux XML. Voici le code utilisé :
$.ajax({ type: "GET", url: "/etu-maltt/tetris/fritz0/welcome.xml", dataType: "xml", success: function(xml) {
$(xml).find('section').each(function() {
workDate = $(this).find("deposit-date").text();
workStatus = $(this).find("status").text();
workCourse = $(this).parent().parent().parent().children("title").text();
workTitle = '<a href="' + $(this).find("url").text() + '">' + $(this).find("title").text() + '</a>';
workDescription = $(this).find("description").text();
if(workStatus == "Public") {
$('#myWorks > tbody:last').append("<tr><td>" + workDate + "</td><td>" + workCourse +"</td><td>" + workTitle + "<br><small>" + workDescription + "</small></td></tr>");
}
});
}, error: function(request, error, tipo_errore) {
$("#myWorks").hide();
$("#errorWorks").removeClass("hidden");
}
});
3.2 Contribution wiki
Rien à signaler
3.3 NetVibes
J'ai tout simplement utilisé les outils que NetVibes met à disposition pour la personnalisation de la page. J'ai utilisé seulement des Feeds RSS comme source d'agrégation des infos.
3.4 Pages des travaux XML
J'ai modifié l'exemple pour l'adapter à mes travaux et j'ai aussi modifié le fichier .xsl en utilisant le même CSS de l'home page TECFA pour uniformité graphique.
3.5 Présentation avec impress.js
J'ai une fois de plus utilisé Bootstrap CSS pour voir s'il pouvait s'intégrer avec impress.js. J'ai en même temps créé un CSS personnalisé pour la mise en page. J'ai ensuite utilisé les possibilités fournies par impress.js qui sont effectivement très puissantes. Avec le positioning j'ai créé un cercle de petites slides autour de la première slide de la présentation.
4. Difficultés, auto-évaluation, remarques
En général, cet exercice ne m'a pas posé trop de difficultés. Il s'agit d'un domaine que je connais déjà bien grâce à mes compétences professionnelles. Peut-être que la page des travaux XML+XLS est la partie qui m'a donné le plus de souci. En effet je connaissais cette technologie mais elle ne m'a jamais intéressée car je trouve la notation pas très pratique. Lorsque j'ai modifié le xml et le xls je pensais donc en même temps que je connaissais des moyens pour moi plus pratiques (eg, base de données, xml avec PHP, etc.). Je trouve XML un bon format pour la transmission des données (même si à présent peut-être que json lui est supérieur au niveau web), mais pas pour la "production" de données.
Une chose que je n'ai pas réussi à faire est trier mes travaux par date dans la home page TECFA. Peut-être qu'avec en peu plus de temps j'y arriverais, mais sur le moment je n'arrive pas à trouver une solution car la gestion des array multidimensionnels en JavaScript est assez limitée, ainsi que la gestion native des dates.
J'ai en outre pu relever que le CSS de bootstrap n'est pas validé par le validateur CSS. Malgré cela, j'ai plusieurs références qui assurent qu'il est bien écrit et avec une compatibilité cross-browser.
5. Ressources utilisées, bibliographie
5.1 Ressources
Pour l'home page TECFA j'ai utilisé les ressources externes suivantes :
- bootstrap.css pour la structure et le style de la page
- jquery.js, jquery.scrollto.js, jquery.local.scroll.js et boostrap.js pour le code JavaScript
- Dreamweaver CC pour le codage HTML, CSS et JavaScript
Pour la page des travaux :
- bootstrap.css pour la structure et le style de la page
- Dreamweaver CC pour le codage HTML, XLS et CSS
- Exchanger XML editor pour le codage XML
Pour la présentation impress.js :
- bootstrap.css pour la structure et le style de la page
- impress.js, jquery.js et bootstrap.js pour le code JavaScript
- Dreamweaver CC pour le codage HTML, CSS et JavaScript
5.2 Bibliographie
Bibeault, B., & Katz, Y. (2008). jQuery in Action. Greenwich, CT: Manning.
Edwards, J., & Adams, C. (2006). The JavaScript Anthology. 101 Essential Tips, Tricks & Hacks. Melbourne, Australie: Site Point Pty. Ltd.
Freeman, A. (2011). The Definitive Guide to HTML5. New York, NY: Apress.
Lawson, B., & Sharp, r. (2011). Introducing HTML5. Berkeley, CA: New Riders Pub.
SensioLabs. (2013, Octobre 30). What is Symfony. Récupéré sur Symfony: http://www.symfony.com/what-is-symfony