Etat de Vaud
DGEP
CEPV
Centre d'Enseignement Professionnel de Vevey
Les Ecoles supérieures
Ecole
Section
Illustration
  © 2012 D.R. | CEPV
 
 

Histoire du site

Parmi les premiers accès à internet proposés au grand public, le stand de l'Hebdo au Salon du livre en mai 1995 avait précédé de quelques semaines une expérience veveysanne, en juillet, à la Salle del Castillo, dans le cadre du cinquantième anniversaire de la section Photo du CEPV. Dans cet élan, des compétences se sont développées et activées dans notre école.

Le site a été créé relativement tôt dans l'histoire du web, nettement avant d'autres écoles d'arts voisines. M. Berney, féru d'informatique et très attentif aux développements des technologies contemporaines, avait très rapidement réservé les deux noms de domaine cepv.ch et images.ch.

M. Patrick Schranz, responsable informatique et enseignant en section photo a installé les premières pages de présentation de l'HEAA. Il s'agissait d'une série de textes, repris de documents papiers, et complétés de quelques petites icônes pour signaler numéros de téléphones et adresse postale. J'ai bien écrit HEAA, car Vevey était à ce moment-là intégrée au projet HES-SO, avec ses section Photographie et Expographie !

La version suivante, au printemps 2007 s'est étoffée, avec l'utilisation du logo de l'école et quelques signes graphiques qui animaient quelque peu les pages. Une vraie circulation hypertexte permettait de passer sur différentes pages distinctes.

Andréas Hilty, Maître principal Photo, avait proposé un élément graphique spécifique qui contribuait à l'identité visuelle du site : une ligne horizontale, en dégradé du rouge au bleu, en passant par le violet. Il la souhaitait en contrepoint au dégradé usuel rouge-jaune-bleu.

Deux professionnels de l'informatique ayant travaillé au CEPV dans le cadre de contrats de réinsertion professionnelle ont contribués pendant quelques mois au développement des premières pages.

En 2004, le webmaster en titre ayant obtenu un congé sabbatique il a été remplacé durant cinq mois par M. Guillaume Reymond qui a développé une nouvelle charte graphique pour le chapitre Galerie. Il appliquait au site web des éléments visuels introduits depuis quelques mois pour les publications papier et également présentes dans les pages spécifiques des sections : les trois couleurs rouge, jaune et bleu pour les trois section de l'EAA. Cette nouvelle ligne graphique a ensuite été progressivement déployée sur tout le site, avec l'ajout du vert et du violet pour les section artisanale et commerciale. Le site évoluait aussi en fonction de l'augmentation de la résolution des écrans d'ordinateurs. Les premières pages étaient construites sur un gabarit de 480 pixels de large avec un trame basée sur les multiples de 32 et 96 pixels. La nouvelle grille occupait une largeur de 661 pixels et des multiples de 109 ou 164 pixels. Seule le logo carré, intégrant le sigle CEPV, développé après les couleurs OPTIMO conservait ses dimensions de 96 pixels.

Robert Cottet
Doyen ESAA

Encadré paru dans le N° 41 du CEPV-Presse en automne 2009

 

Refonte 2009

Voila plus de dix ans, le site internet de notre école voyait le jour. Dix ans c'est peu –c'est le début de l'émergence de l'internet dans le grand publique– et c'est beaucoup –nombre d'entre nos apprentis étaient encore dans l'insouciance de l'enfance–. Pendant cette décennie, notre site a évolué en même temps que la technologie: La résolution des écrans a augmenté, le prix des écrans en millions de couleurs est devenu abordable, les connexions ont acquis des débits plus que raisonnables. Cela permit ou nécessita, c'est selon, l'adaptation du gabarit et des contenus des pages. Ainsi notre site se vit plusieurs fois remis au goût du jour (voir l'encadré). Il faut rendre hommage ici à Robert Cottet notre webmaster jusqu' il y a peu, pour le gigantesque travail accompli avec un soins méticuleux pendant ces dix ans !

Une fois encore, notre site se voit paré de nouveaux attributs. Peut-être ne les verrez-vous pas au premier coup d'œil car la révolution a eu lieu davantage dans les cintres que sur la scène, toutefois les changements sont de taille !

L'INTERFACE

L'interface utilisateur

Les aspects les plus visibles du changement sont l'adaptation du gabarit aux écrans d'aujourd'hui (1024 pixels de large contre 800 pixels), l'apparition d'un menu déroulant en haut de page et quelques détails de mise en forme des textes, des titres et des tableaux. Pour conserver l'identité visuelle de notre e-vitrine, la structure des pages –en deux grandes colonnes divisibles en deux ou en quatre– et les couleurs des sections ont été conservées, adaptées et déclinées là ou cela était nécessaire.

Les contenus

Pour ce qui est des contenus, une partie plus importante du site est dédiée aux aspects administratifs, donnant accès à un grand nombre d'informations pratiques et au téléchargement de documents et de formulaires. Cela devrait alléger un peu le travail de nos secrétaires. On y trouvera aussi quelques pages portant sur l'histoire de l'école et du bâtiment. Certaines zones ne sont accessibles qu'aux enseignants et au personnel administratif, mais d'autre sont plus particulièrement adressées aux apprentis actuels ou à ceux qui veulent s'informer en vue de leur admission -ou à leurs parents…–.

La structure

Due à l'évolution de l'école –en particulier l'émergence de nos trois Ecoles supérieures– la structure des répertoires du site ne correspondait plus à celle de l'école. Ce fut donc l'occasion de remettre de l'ordre dans la hiérarchie des dossiers. Un autre changement important est celui de la présence des galeries dans les pages des sections et non plus dans une page commune à l'Ecole d'arts appliqués. Mais remettre de l'ordre dans les dossiers et les fichiers d'un site n'est pas sans conséquences sur la navigation, et en particulier sur les liens externes qui pointent vers ce pages. C'est donc une opération à haut risque (…de rompre des liens depuis des sites amis ou de perdre du PageRank dans les moteurs de recherche) qu'il faut mener avec circonspection et en assurant une redirection durable de chaque lien devenu obsolète vers la nouvelle page correspondante.

LA TECHNIQUE

Pour les plus geek d'entre vous, ce qui suit donne quelques explications sur ce qui a fondamentalement changé dans notre site.

html vs. xhtml

En dix ans, le langage html, celui-là même qui est compréhensible par les agents utilisateurs (les navigateurs) et qui permet l'affichage des pages, ce langage donc a évolué. Certaines balises sont apparues, d'autres ont disparues, le code et la structure du code sont devenus plus structurés. Ainsi, les milliers de lignes de code du site ont été nettoyées en profondeur et expurgées des balises dépassées ou superflues en vue d'une compatibilité maximale avec les futurs navigateurs.

Mise en forme vs. css

Parallèlement à la mise en conformité du code, le recours aux "css", c'est à dire aux "feuilles de style", a été systématisé. Cela permet une mise à jour extrêmement simplifiée des aspects visuels du site: le contenu des pages est codé en html (en réalité en xhtml, un langage un peu plus stricte), et la mise en forme des contenus se trouve dans le fichier "css" auquel toutes les pages du site font référence. Modifier la feuille de style revient donc à modifier un aspect du style sur l'ensemble du site. Une part incalculable du temps de programmation est imputable à cet impénitent logiciel de navigation qu'est MS Internet Explorer (toutes versions confondues), incroyablement bogué et qui supporte mal les css, mais qui est utilisé par 80% des internautes. Nous ne sauront trop vous recommander l'utilisation de n'importe quel autre navigateur open source aussi gratuits qu'efficaces, comme FireFox ou Opera qui montrent une compatibilité proche de 100% avec les normes du W3C (l'organisme de normalisation technique du web) contre moins de 20% pour MSIE 8 (12% pour MSIE 6) ! (http://acid3.acidtests.org/)

Dynamisme vs. JavaScript

Le langage html décrit les pages tel qu'elles doivent apparaître dans le navigateur et il est impossible, en html, d'en modifier le contenu selon les circonstances: tout est "en dur" dans le code de la page et ne peut être modifié dynamiquement. Le JavaScript permet d'animer un peu les pages: c'est au JavaScript que vous devez une grande partie de l'interactivité des contenus (des images qui changent au passage de la souris), de l'ergonomie de navigation, du remplissage et du contrôle automatiques des formulaires par exemple. Mais vous devez pour cela autoriser votre navigateur à exploiter le plug-in JavaScript. Il s'agit d'un langage "coté utilisateur".

Dynamisme vs. php

Le langage php, qui est un langage open source, permet de créer des pages véritablement dynamiques. Non qu'elles bougent dans tous les sens et clignotent à tout va (laissons cela à Flash…), mais qu'elles adaptent leur contenu au contexte. Vous avez tous navigué sur des sites de ventes ou mieux, sur des sites de réseaux sociaux comme –au hasard– FaceBook , dont le contenu des pages répond aux critères que vous avez choisis ou exprimés, parfois même sans en être conscient. C'est php qui s'occupe de cela. Le php est un langage "côté serveur", c'est à dire qu'il prépare la page html sur le serveur du site que vous visitez en fonction de vos données, et qu'il envoie la page html "en dur" à votre navigateur, le html étant le seul langage compris par les agents utilisateurs. Le nouveau site de l'école est donc entièrement codé en php, ce qui permet une très grande souplesse de programmation, de mise à jour et l'exploitation commune de données: ce qui est identique sur plusieurs pages n'est écrit qu'une fois et appelé sur la page ou, lorsque vous vous êtes identifié, certaines zones du site vous sont accessibles et d'autres non, pour ne donner que deux exemples sur un nombre de fonctions incalculable…

Flux rrs

L'occasion était rêvée d'ajouter quelques flux rss. Les flux rss sont des sources d'informations auxquelles vous pouvez vous abonner (c'est gratuit ! ). Votre navigateur ou votre messagerie va alors interroger à intervalle régulier les sources des flux auxquels vous vous êtes abonnés pour voir s'il y a du nouveau. Si c'est la cas, alors vous recevez une sorte de message qui vous permet de voir de quoi il s'agit. Si le sujet vous intéresse, vous pouvez alors cliquer sur le lien qui se trouve dans le message pour vous rendre sur la page internet qu'il désigne. Les flux actuellement disponibles sur notre site sont premièrement celui qui vous permet de vous abonner à votre journal préféré (le CEPV-Presse donc) afin de recevoir une information à chaque nouvelle parution, et deuxièmement celui qui concerne le suivi des inscriptions, donc plutôt destiné aux candidats.

La mise à jour

Le site d'une école comme la notre doit constamment être mis à jour. Sachant que ces mises à jour doivent être faites par les stagiaires médiamaticiens du CPNV (qui changent tous les six mois) et par le webmaster en titre, une très grande attention a été apportée au développement d'une structure permettant une maintenance très simple et très sûre. Les données "variables" sont centralisées puis affichées là où elles sont requises, ainsi une seule ressource a besoin d'être mise à jour pour que soit mis à jour l'ensemble du site. D'autre part un maximum d'opérations ont été automatisées lors de la création de nouvelles pages pour éviter les erreurs et surtout les oublis. Finalement certaines données des comptes informatiques sont récupérées par php pour gérer les autorisations d'accès afin de rendre disponible, ou non, certaines zones du site après authentification ou pour afficher certaines informations.

Le projet et le chantier

Le projet de refonte du site est né il y a à peu près un an. Comme Robert Cottet –webmaster depuis les origines de cepv.ch– ne disposait plus du temps nécessaire au développement et à la maintenance du site de l'école depuis sa promotion aux fonctions de doyen de l'ESAA, la responsabilité en a été proposée au soussigné dès la rentrée scolaire 2008. De retour depuis peu d'un congé sabbatique pendant lequel le futur nouveau webmaster avait travaillé à la construction d'une base de données pour la gestion d'une photothèque (php-MySQL), il a accepté avec joie de prendre la responsabilité du site de l'école. L'occasion était donnée d'en repenser l'ensemble et d'en préparer la nouvelle mouture avec les personnes concernées. Deux séances de travail réunissant les responsables des sections ont été mises sur pied. La première pour entendre les besoins des sections et la seconde pour présenter un projet. Finalement, la mise en ligne du nouveau site pour l'Ecole supérieure en photographie a pu se faire en mai 2009. Le basculement s'est fait sans problème et à la satisfaction des demandeurs. Dès le baptême du feu passé, le travail a consisté à fabriquer les nouvelles pages pour les autres sections, les autres écoles et l'administration du CEPV. Dans le même temps, à la demande du groupe de travail, une page d'accueil plus dynamique a été imaginée, puis développée en Flash par notre ex-stagiaire informatique Adam Kaesermann et finalisée par l'actuel stagiaire Nicolas Geng. Les images d'illustrations des pages ont été réalisées en partie par Charles-Elie Lathion, notre ex-apprenti spécialiste en photographie, et par Kim Weber, notre actuelle apprentie photographe. C'est avec plaisir et soulagement que l'ensemble du site a été livré le 21 août 2009. Même si toutes les pages n'étaient pas achevées jusque dans les moindres détails faute de ressources disponibles pendant les vacances scolaires, le gros du travail était fait. Rien n'étant gravé dans le marbre, et surtout pas le web, les petites corrections et les petits ajouts ont été réalisés pendant les semaines qui suivirent la rentrée.

Et si vous, d'aventure, en surfant sur les pages du site, vous deviez observer une erreur, une omission, une coquille ou si vous souhaitez faire un commentaire ou soumettre des contenus ou des liens à mettre en ligne, n'hésitez pas: cliquez en bas à droite et adressez un message au weboffice ;-)

Thierry Fumey
Maître principal
Webmaster

Article paru dans le N° 41 du CEPV-Presse en automne 2009

Technique

Ce site est codé en xhtml, php, javaScript, conformément aux normes du W3C.

validation xhtml validation css validation rss

Une grande attention a été portée à l'accessibilité, en particulier dans la structure des pages et l'utilisation de balises appropriées pour le codage ainsi que l'ajout de fonctionnalités discrètes offrant une meilleure navigabilité aux divers agents utilisateurs.

La forme actuelle du site a été entièrement développée en 2009 par Thierry Fumey, photographe, maître principal et enseignant au CEPV, ayant une formation en programmation web.
La maintenance du site est assurée par le webmaster en titre assisté par les stagiaires du CPNV.
L'équipe de l'Informatique pédagogique du CEPV assure la maintenance technique des serveurs et d'autres services liés au site.

 

Cookies

Les cookies sont parfois utilisées pour propager des informations nécessaires à la navigation sur le site, à certaines fonctionnalités et à la tenue de statistiques.
Lors de l'envoi de formulaires, le numéro IP de l'ordinateur est enregistré chez nous ainsi que la date et l'heure de l'évènement afin de prévenir les abus.

 


Légal

Responsable du contenu éditorial

Michel Etienne, Directeur
Tél.: +41 21 557 14 21
Adresser un courriel

Responsable technique

Thierry Fumey, Webmaster
Tél.: +41 21 557 14 44
Adresser un courriel

Hebergement

Ce site est hébergé par SwissCenter basé à Lausanne.


 
 
 
 
ThF  –  19.11.15