Cahier des charges. de refonte du site Internet.

Transcription

1 Chefs de projet : Réjane Castets Hervé Dufau Tél. : Cahier des charges de refonte du site Internet Résumé INNOVALIS Aquitaine effectue la refonte du site dont elle est maître d ouvrage. Le présent document présente les attentes de INNOVALIS Aquitaine pour la réalisation des missions suivantes : Production de maquettes ergonomiques et graphiques Production de templates XHTML/CSS Mise en place, paramétrage et mise en service d un système de gestion de contenus Les candidats pourront choisir de répondre à un ou plusieurs des lots décrits dans le présent cahier des charges, chacun devant être chiffré séparément dans la proposition financière. Les réponses des prestataires sont attendues au plus tard pour le 7 janvier 2009 à 18h à l adresse suivante : rejane.castets@innovalis-aquitaine.org. La mission de production du site sera lancée fin janvier 2009 pour une mise en service de la nouvelle version du site au plus tard pour le 31 mars

2 Table des matières 1. CONTEXTE ET ETAT DES LIEUX INNOVALIS AQUITAINE LE SITE INTERNET INNOVALIS-AQUITAINE VOS INTERLOCUTEURS OBJECTIFS DE LA REFONTE UNE VISION ORIENTEE USAGERS ET UN OUTIL DE DECLOISONNEMENT AMELIORER LA COMPREHENSION DES MISSIONS ET COMPETENCES D INNOVALIS AQUITAINE FACILITER LE CONTACT AVEC INNOVALIS AQUITAINE ET SES PARTENAIRES FACILITER LA GESTION, ET AMELIORER LA QUALITE ET L ACCESSIBILITE ARCHITECTURE DE L INFORMATION NATURE DES CONTENUS RUBRIQUAGE ENVISAGE LES DIFFERENTS MODELES DE PAGES RECAPITULATIF DES PRESTATIONS DEMANDEES ET OBJECTIFS FONDAMENTAUX LOT 1 : PRODUCTION DE MAQUETTES ERGONOMIQUES ET GRAPHIQUES MISSION ATTENDUE ET ELEMENTS D ENTREE CREATION DES MAQUETTES ERGONOMIQUES SEMI-FONCTIONNELLES CREATION DES MAQUETTES GRAPHIQUES ACCESSIBILITE ET QUALITE DESCRIPTIF DES LIVRABLES ATTENDUS (MAQUETTES GRAPHIQUES) LOT 2 : PRODUCTION DES TEMPLATES XHTML / CSS DESCRIPTION DU LOT

3 6.2. EXIGENCES TECHNIQUES POUR L INTEGRATION FICHIERS XHTML FEUILLES DE STYLE A FOURNIR LOT 3 : MISE EN PLACE DU SYSTEME DE GESTION DE CONTENUS DESCRIPTION DU LOT CHOIX ET MISE EN PLACE DU CMS DEVELOPPEMENTS OU MODULES SPECIFIQUES ANNUAIRE IMPORTATION DES CONTENUS ET «FORMATION-ACTION» HEBERGEMENT ET PLATE-FORME TECHNIQUE EXIGENCES SPECIFIQUES ET CADRE TECHNIQUE DEROULEMENT DU PROJET REUNION DE LANCEMENT PLANNING PREVISIONNEL ENVIRONNEMENT DE TRAVAIL, RECETTE FINALE ET MISE EN PRODUCTION MAINTENANCE ET GARANTIE MAINTENANCE GARANTIE ASPECTS ADMINISTRATIFS CRITERES DE CHOIX DES PRESTATAIRES

4 1. CONTEXTE ET ETAT DES LIEUX 1.1. INNOVALIS AQUITAINE INNOVALIS Aquitaine est une association soutenue par le Conseil régional d Aquitaine, le Ministère de l Enseignement Supérieur et de la Recherche, OSEO et l Union européenne. L agence dispose de deux établissements à Pessac et à Pau. Elle est organisée en 6 départements sectoriels (Bio-industries et Technologies médicales, Bois et habitat, Chimie et matériaux, Environnement et énergie, TIC et services aux entreprises, Transports et industries mécaniques) adaptés aux principaux secteurs d activités économiques de la région et en 2 services spécifiques (le Bureau Europe et le RDT). Les missions de l agence : des missions de service public Détecter et accompagner les projets innovants des PME industrielles ou de services à l industrie en Aquitaine, identifier les partenaires appropriés dans le monde de la recherche publique, Inciter les entreprises et les équipes de recherche régionales à participer aux programmes nationaux et européens, Orienter la recherche des grands groupes vers les laboratoires aquitains, Assurer une veille et diffuser les informations technologiques et économiques. INNOVALIS Aquitaine assure l accompagnement des projets innovants en : Analysant les avant-projets des entreprises, Identifiant les partenaires chercheurs ou entrepreneurs les plus pertinents pour les projets, Montant des dossiers de financement régionaux, nationaux et européens (suivi technique, financier et relationnel des projets) 1.2. LE SITE INTERNET INNOVALIS-AQUITAINE Le projet de création d un site internet a été initié durant l été INNOVALIS Aquitaine a mandaté l Agence 2 Com, chargée de créer ses outils de communication, pour le développer. L Agence 2 Com a fait appel à des compétences externes pour prendre en charge les aspects techniques du projet. Les objectifs du site étaient de donner une image forte et unifiée de INNOVALIS Aquitaine, d assurer sa visibilité sur le net et de communiquer sur la nouvelle agence, sur ses missions, sur sa valeur ajoutée. La mise en ligne a été effective à la fin du premier trimestre Le site actuel est disponible à l adresse Les contenus sont basés essentiellement sur de l information synthétique, articulée autour des secteurs, présentant l organisation et l activité de INNOVALIS Aquitaine. Des «news» et une rubrique agenda sont également proposées, mais les éléments susceptibles d intéresser l internaute ne sont pas correctement mis en avant. 4

5 D autre part, les services que propose le site actuel sont limités : téléchargement de fichiers, formulaire de contact. INNOVALIS Aquitaine souhaite engager une refonte du site pour donner une image claire de la multiplicité de ses missions, des actions et actualités, mais également pour fournir plus d informations «qualitatives», «à valeur ajoutée». Par ailleurs, l agence tient particulièrement à intégrer l aspect participatif à son projet. Il est très important que le visiteur puisse réagir, proposer... D autre part, INNOVALIS Aquitaine demande une garantie d accessibilité aux personnes handicapées et de compatibilité avec les différents navigateurs graphiques ou mobiles. En ce qui concerne la gestion des contenus, les collaborateurs de INNOVALIS Aquitaine souhaitent plus de souplesse dans l utilisation de l outil CMS VOS INTERLOCUTEURS Réjane Castets, Attachée de communication Hervé Dufau, Responsable Secteur TIC et services aux entreprises OBJECTIFS DE LA REFONTE 2.1. UNE VISION ORIENTEE USAGERS ET UN OUTIL DE DECLOISONNEMENT L objectif de la prochaine version du site est de proposer aux visiteurs des contenus et des services centrés sur l innovation. Ces contenus et services doivent répondre aux questions que se pose le visiteur. Le site sera orienté vers l utilisateur sous l angle «vous avez un projet d innovation (quelque soit son stade d avancement)». La refonte devra bien évidemment permettre d obtenir des informations sur INNOVALIS Aquitaine et sa structure, et notamment faire clairement apparaître «l antenne» INNOVALIS Aquitaine basée à Pau, mais cette structuration interne ne sera pas un mode d accès majeur aux contenus et services. Les enjeux et les questions qui se posent pour les visiteurs doivent en effet prendre le dessus sur l organisation interne de INNOVALIS Aquitaine. Le prochain site devra contribuer à «décloisonner les services» ce qui se traduira par la mise en place d une architecture du site qui ne repose plus sur les secteurs internes à INNOVALIS Aquitaine. Sur le plan de l architecture de l information, le site devra permettre d obtenir des vues différentes et transversales des différents sujets (par type d action, par filière, par zone géographique ) AMELIORER LA COMPREHENSION DES MISSIONS ET COMPETENCES D INNOVALIS AQUITAINE Le site devra permettre de comprendre les compétences, «le métier», les offres de INNOVALIS Aquitaine. Ces compétences devront être mises en évidence de la façon la plus opérationnelle possible dès la page d accueil : 5

6 montage de projet, mise en relation avec la recherche, aide pour accéder aux financements, source d informations. Le site devra mettre en avant le rôle de conseil, d orientation vers la recherche ou vers les financements. Il devra également présenter les actions de INNOVALIS Aquitaine en direction des filières, les manifestations que l agence organise ou auxquelles elle participe FACILITER LE CONTACT AVEC INNOVALIS AQUITAINE ET SES PARTENAIRES Le site doit permettre de clarifier la position de l agence dans un environnement plus global, et notamment visà-vis de ses partenaires. Plusieurs objectifs majeurs seront déclinés sur la quasi-totalité des pages du site : Faciliter la consultation de contenus à valeur ajoutée Faciliter l abonnement à des fils RSS, services, outils Faciliter la prise de contact directe avec INNOVALIS Aquitaine Faciliter la prise d informations et de contact avec les partenaires FACILITER LA GESTION, ET AMELIORER LA QUALITE ET L ACCESSIBILITE INNOVALIS Aquitaine souhaite travailler et faire évoluer le site et ses contenus de la façon la plus indépendante possible de prestataires extérieurs. INNOVALIS Aquitaine souhaite notamment mettre en place un système de gestion de contenus donnant une liberté maximum, fiable, évolutif et accessible, qui permette d optimiser les processus internes de production de l information. Cette mise à jour est également l occasion pour INNOVALIS Aquitaine d améliorer fortement la qualité et l accessibilité du site. Une analyse a été effectuée au regard d un certain nombre de bonnes pratiques qualité. Le niveau global de conformité du site actuel est égal à 44% (source : Opquast), ce qui est nettement insuffisant. De très nombreuses bonnes pratiques ne sont pas respectées, ce qui est d autant plus regrettable que la quantité de contenus est importante. Voici pour mémoire les points forts et les points faibles du site actuel : Points forts : Quantité de contenus importante et contenus pertinents Bonne information sur les objectifs du site Bon marquage des hyperliens Gestion partielle des titres de pages Bonne gestion des formulaires Points faibles Ergonomie et design, cohérence et utilisabilité de la charte Structure interne de titrage des pages Défauts importants en matière d accessibilité Gestion technique des erreurs et des domaines insuffisante Défauts d indication de jeu de caractères et de langue de documents Gestion des fichiers en téléchargement Une attention toute particulière sera donnée à l aspect accessibilité, dont INNOVALIS Aquitaine souhaite qu il soit pris en compte au cours de toute la vie du projet. Le cahier des charges mentionne pour chaque phase d élaboration des exigences précises en matière d accessibilité. Le site devra passer avec succès 6

7 l ensemble des tests obligatoires du RGAA (Référentiel général d Accessibilité pour les Administrations) applicables à la livraison. Le site devra respecter la Charte internet d accessibilité et de qualité du Conseil régional d Aquitaine version 2007 ( Bien entendu, ces exigences s appliqueront également à INNOVALIS Aquitaine pour ce qui concerne les contenus proposés en euxmêmes. Le succès de cette refonte se mesurera sur la base des éléments suivants : Suivi de l audience, Nombre de contacts via le formulaire de contact, Nombre de lecteurs des fils RSS Nombre de visiteurs dirigés vers les partenaires 3. ARCHITECTURE DE L INFORMATION 3.1. NATURE DES CONTENUS INNOVALIS Aquitaine souhaite proposer plusieurs types de contenus, répartis sur toutes les pages du site. Contenus statiques : l information qu ils contiennent ne se déprécie pas rapidement, ils ne font pas l objet de modifications fréquentes (exemple : monter mon projet) ; Contenus dynamiques : ils sont modifiés très souvent, et donnent lieu à ce titre à la mise à disposition de fils de syndication. Ils peuvent être proposés en tant que rubriques d actualité, ou les derniers éléments publiés peuvent être encapsulés dans d autres rubriques pour compléter ou préciser l information. Contenus transversaux : ces éléments sont des blocs permettant la navigation transversale, c est-àdire de passer d une rubrique à l autre dans l architecture sans repasser par la page d accueil. Appels à l action : ce sont des éléments qui vont inciter l utilisateur à aller plus loin en contactant INNOVALIS Aquitaine, en contribuant, en s abonnant, en s inscrivant ou encore en s adressant à des partenaires L objectif est de combiner ces contenus sur l ensemble des pages du site de façon à obtenir un site fortement actualisé et qui capitalise au maximum sur la complémentarité entre informations institutionnelles et statiques et sources d information pertinente RUBRIQUAGE ENVISAGE Le rubriquage est encore en cours d évolution. Il est donné à titre indicatif et pourra faire l objet de modifications pendant la phase de production ou après la mise en ligne du site. Accueil Actualités Agenda Témoignages 7

8 Manifestations News Ressources Manifestations Rencontres Industriels - Chercheurs Les Salons... Archives? Ressources Supports de formations Publications Dossiers thématiques Archives Actions collectives AC1 AC2 AC3 Appels à participation Assistants Trouver une compétence (Technéo) Trouver une aide (guide des aides) Trouver un stage ou un stagiaire : l Annuaire des ressources de l enseignement supérieur Ingénierie Evaluation de projets Recherche de compétences... Financements Détermination des aides pertinentes pour le projet Aide au montage de dossiers... INNOVALIS Aquitaine Adhérer Missions Partenaires/Réseaux (type annuaire) Espaces Presse Extranet RDT Accès adhérents Autres pages Mentions légales Accessibilité Données personnelles 8

9 Plan du site Crédits 3.3. LES DIFFERENTS MODELES DE PAGES ELEMENTS COMMUNS A TOUS LES MODELES Logo avec lien de retour vers l accueil Base line Concrétisons vos projets Liens d accessibilité et d évitement Formulaire simple de moteur de recherche Abonnement à la newsletter (formulaire simple) Menus Fil d Ariane ou chemin de navigation Titre de la page Flux RSS Liens vers mentions légales, crédits, plan du site, qui-sommes-nous, partenaires Formulaire de contact Accès aux espaces réservés Liens ou boutons pour commenter, proposer... ACCUEIL : Derniers événements (zone agenda) Dernières news Accompagnement de projets Accès direct à un ou plusieurs assistants Focus sur une, deux ou trois actualités de INNOVALIS Aquitaine (ex : manifestation, action collective,...) Nuage de tags Témoignage au hasard 9

10 SOMMAIRE DE RUBRIQUE OU DE SOUS-RUBRIQUE Titre de la rubrique Présentation de l activité de INNOVALIS Aquitaine sur le sujet de la rubrique Illustration graphique de la rubrique Dernières actualités correspondant à cette rubrique Sous-menu de la rubrique et liens vers les sous-rubriques Navigation transversale (Bloc de type «voir aussi») ARTICLE - PAGE DE CONTENU EDITORIAL Titre Chapeau Sous-titres Paragraphes Illustration de l article Dernières actualités correspondant au sujet de l article Autres articles Navigation transversale (voir aussi) Liens externes Possibilité d un moteur de recherche particulier en lien avec le sujet de l article (à discuter) Formulaire d envoi d un commentaire Lien ou bouton pour s inscrire AGENDA - PAGE D ACCUEIL (LISTE DE TOUTES LES MANIFESTATIONS) Calendrier graphique par mois Affichage des manifestations Lien vers la page de présentation de la manifestation Moteur de recherche interne à la rubrique Lien pour proposer une manifestation 10

11 Abonnement fil RSS Lien ou bouton pour proposer AGENDA - PAGE DE PRESENTATION D UNE MANIFESTATION Titre de la manifestation Date Lieu Thématique Descriptif Pour plus d informations Dernières actualités en rapport avec le thème Lien vers tout l agenda Navigation transversale (voir aussi) Liens externes Lien ou bouton s inscrire FORMULAIRE DE CONTACT Champs Coordonnées (Nom*, Prénom, Société, Nom de rue, code postal*, ville, *, Téléphone), Objet de la demande, Thématique (cf secteurs) sous forme de liste déroulante, Message * le renseignement de ces zones sera obligatoire Remarque : cette demande de contact devra être routée vers une adresse au Bureau Sud Aquitaine pour les codes postaux commençant par 64, et aux responsables de secteur pour les autres. FICHE DE PRESENTATION D UNE ENTITE Lien Hypertexte Logo de l entité Résumé Adresse Contact 11

12 Fil de syndication Type : centres techniques,... Thématique : TIC, Santé,... Département PLAN DU SITE ET ERREUR 404 Message d erreur et plan du site Ce modèle contient tous les éléments de navigation du site (menu, logo, fil d Ariane etc..) Ce modèle de page sera également utilisé pour la page d arrivée après envoi du formulaire de contact, avec par exemple le message : «Merci, nous avons bien pris votre demande en compte. Vous serez contacté prochainement par ou téléphone» Rubriques et sous-rubriques MOTEUR DE RECHERCHE (FORMULAIRE AVANCE) Champ texte Langue Rubrique ou sous-rubrique Bouton d envoi Cadre de navigation vers les assistants trouver MOTEUR DE RECHERCHE (PAGE DE RESULTATS) Nombre de résultats Numéro de page Nombre de pages Titre du document Extrait Lien vers le document Format du document Cette page de résultats servira également pour les résultats des recherches effectuées par chaque assistant. 12

13 ASSISTANTS (FORMULAIRE SIMPLE) Nom de l assistant Descriptif de l assistant Mots clés Région/Département Secteur d application Type de prestation Type d organisme Bouton Rechercher ASSISTANTS (FORMULAIRE COMPLEXE) N de l étape, nombre d étapes Résultats FORMULAIRE «PROPOSER» Titre rubrique Message explicatif de la procédure de validation Champs à compléter : titre*, descriptif*, date début*, date de fin*, heure de début, heure de fin, lieu/ville*, code postal, courriel organisateur*, téléphone organisateur, nom du site, url du site, zone géographique Bouton prévisualisation Bouton envoyer NEWSLETTER Logo Date Numéro Sommaire avec liens internes (ancres) Titre de chaque article 13

14 Résumé de chaque article Mentions de bas de page (désinscription, etc.) Cette liste est susceptible d être modifiée. Le chiffrage doit être établi pour 15 modèles de page. 4. RECAPITULATIF DES PRESTATIONS DEMANDEES ET OBJECTIFS FONDAMENTAUX Le schéma ci-dessous représente le lotissement envisagé des prestations. Chacun des trois lots est présenté de façon détaillé dans la suite de ce cahier des charges. Lot 1 Production de maquettes ergonomiques et graphiques Contrastes, utilisabilité, cadre général ergonomique, esthétique Lot 2 Production des templates XHTML/CSS Conformité, séparation fond/forme, accessibilité technique Lot 3 Création du site, intégration des contenus Fonctionnement, robustesse, facilité d administration et de maintenance, accessibilité des contenus 5. LOT 1 : PRODUCTION DE MAQUETTES ERGONOMIQUES ET GRAPHIQUES 5.1.MISSION ATTENDUE ET ELEMENTS D ENTREE A partir d éléments graphiques imposés, le prestataire choisi devra proposer : Des maquettes semi-fonctionnelles (story-boards) destinées à la validation de la navigation et des différents modèles à produire Un ensemble de maquettes graphiques pour le futur site. ELEMENTS D ENTREE La charte graphique actuelle de INNOVALIS Aquitaine n est pas un élément fondamental pour la création des maquettes graphiques du futur site. Elle est en effet susceptible d être refaite prochainement. En revanche, le logo actuel doit servir pour la production des maquettes graphiques. Ce logo sera mis à disposition du prestataire au format.eps. 14

15 MOTS-CLES Les principales valeurs que INNOVALIS Aquitaine souhaite véhiculer sont : Innovation Nouveauté Novateur Simplicité Réussite Performance Accompagnement Fiabilité Modernité Dynamisme Professionnalisme EXEMPLES DE SITES A CONSULTER : pour les menus déroulants des sous-rubriques qui apparaissent au survol des rubriques et dont l information reste accessible lorsque javascript est désactivé et : pour leur page d accueil où la quantité d information est limitée (pas de surcharge) et présentée à l aide de blocs bien dissociés avec effet 3D : pour sa manière de présenter les rubriques importantes à l aide d un nuage de tags en page d accueil : pour sa gestion de l aspect participatif 5.2. CREATION DES MAQUETTES ERGONOMIQUES SEMI-FONCTIONNELLES Le prestataire produira des maquettes ergonomiques destinées à valider la navigation sur les différents modèles de page demandés. Ces maquettes (également appelées Story-boards, Wireframes ou prototypes 15

16 semi-fonctionnels) seront produites en collaboration avec INNOVALIS Aquitaine et soumises à validation avant lancement du travail d élaboration des maquettes graphiques. Les maquettes semi-fonctionnelles seront livrées au format Powerpoint, et devront permettre de délimiter les zones de navigation et les interactions proposées. A ce stade, aucun travail graphique n est attendu de la part du prestataire CREATION DES MAQUETTES GRAPHIQUES Le prestataire devra proposer trois pistes graphiques sur deux pages : la page d accueil et une page de contenus. Ces six pages (trois fois deux pages) seront soumises à INNOVALIS Aquitaine pour choix et validation. Il est demandé de fournir un argumentaire pour présenter les choix de design et de travail graphique qui ont été faits en fonction des éléments fournis dans le présent document. Une fois le choix effectué, le graphisme sélectionné devra être décliné sur l ensemble des modèles pour produire un ensemble de maquettes graphiques. Le logo devra être séparé de son texte de tagline : «Concrétisons vos projets». Le logo dépouillé de ce texte sera utilisé sur le site, et le texte de la base line pourra être modifié en ligne si besoin (ce qui impose de fait l utilisation de polices Web classiques pour la Tagline) ACCESSIBILITE ET QUALITE Le futur site de INNOVALIS Aquitaine vise un haut niveau en matière d'accessibilité numérique. En pratique, cela revient à mettre en application un certain nombre de règles techniques et ergonomiques sur le site tel qu'il sera perçu par les utilisateurs et les machines (synthèses vocales, moteurs de recherche). Les designs produits devront par ailleurs respecter un certain nombre de bonnes pratiques qualité, susceptibles d influencer la qualité et l accessibilité finale du site. Contenus textuels et polices Les contenus textes du site seront obligatoirement dans une des polices sûres pour le web à savoir : Arial / Helvetica Courier New / Courier Verdana (à privilégier) Pour des raisons d accessibilité et de lisibilité, l utilisation de polices sans serif pourra être favorisée. Le nombre de polices utilisées ne pourra excéder le nombre de trois, hormis le traitement graphique de certaines images contenant du texte. Moteur de recherche Un emplacement sera prévu pour un formulaire de moteur de recherche situé dans la partie haute de chaque page. Ce formulaire devra prévoir un bouton de validation. Aide à la navigation Un emplacement sera prévu sur toutes les pages pour un fil d'ariane (chemin de navigation) ; Un lien permanent vers un plan du site sera proposé depuis toutes les pages ; Un élément graphique (logotype) sera placé en partie haute et servira de retour systématique à la page d'accueil ; 16

17 Le menu principal de navigation sera présent à la même place dans toutes les pages ; Le cas échéant, les icônes de navigation seront accompagnées d'une légende explicite ; Un élément textuel sera présent sur toutes les pages en partie haute pour proposer un basculement vers une (ou plusieurs) langue étrangère. Identification Une baseline et le nom de l'entité qui propose le site seront répétées en partie haute des pages Lisibilité Pour permettre une bonne lisibilité, les différences de contraste entre les textes et les fonds devront être suffisamment élevées Structure Les titres ne devront pas être présentés en majuscules ; Les pages web seront structurées graphiquement de manière cohérente (des informations de même valeur sémantique ou hiérarchique seront présentées de manière similaire). Ceci facilitera le portage XHTML/CSS et la compréhension des pages Hyperliens Le soulignement est réservé aux hyperliens ; Les liens seront visuellement différenciés du texte courant (sans obligation de survol) Ces règles de qualité et d accessibilité sont communiquées pour information, et donneront lieu à une validation d accessibilité, puis à d éventuels ajustements en cours de réalisation de la mission DESCRIPTIF DES LIVRABLES ATTENDUS (MAQUETTES GRAPHIQUES) IMPORTANT : Pour chaque modèle devront être livrés : Un fichier au format.jpg en 72 dpi simulant le rendu du site dans un navigateur (IE7 ou Firefox 3.0) sur un écran avec une résolution de 1024 x 768 (tenant compte d un éventuel scroll vertical, soit 950 pixels de large au maximum). Un fichier Photoshop avec tous les calques originaux. Le nommage et le regroupement des calques devront être clairs et explicites par rapport aux différents éléments de la page. Le nommage devra faire référence à la nature des contenus et non à leur position dans la page. Par ailleurs, INNOVALIS Aquitaine demande la création d un icone de favori à partir du logo initial. Cet icone devra être uniquement un symbole permettant d identifier INNOVALIS Aquitaine d un coup d œil sur un graphisme de toute petite taille. 6. LOT 2 : PRODUCTION DES TEMPLATES XHTML / CSS 6.1. DESCRIPTION DU LOT Le prestataire chargé de l intégration recevra les fichiers Photoshop correspondant à chacun des modèles. Il sera chargé d en assurer l intégration au format XHTML/CSS. 17

18 Les éléments d entrée seront des fichiers Photoshop produits par le prestataire graphique au lot précédent. La liste des modèles est fournie dans la description du premier lot. A l exception de la newsletter, qui sera traitée en HTML et mise en page avec des tableaux et des styles en ligne, les éléments de sortie sont des fichiers XHTML destinés uniquement à la structuration des contenus et un nombre très limité de feuilles de styles CSS EXIGENCES TECHNIQUES POUR L INTEGRATION FICHIERS XHTML Le prestataire devra livrer autant de fichiers XHTML que de maquettes graphiques fournies. Le nommage des fichiers XHTML reproduit celui des fichiers de maquettes graphiques. Le code XHTML doit être : Par défaut, en XHTML1.0 Strict. En cas d utilisation d iframe ou d attribut target, en XHTML1.0 transitional Le code des templates livrés doit être valide au regard de la DTD utilisée, selon le validateur W3C Les déclarations de type de document (DTD) sont conformes à celles recommandées par le W3C ( et ne sont précédées d aucun commentaire HTML, afin de garantir un rendu en mode strict et non quirks dans tous les navigateurs. Le code XHTML ne contient aucun élément ou attribut de présentation, ni attribut style, ni élément style sauf s il ne contient que des la présentation étant exclusivement gérée par les feuilles de styles externes. Les tableaux HTML sont utilisés pour structurer des données et non pour la mise en page, sauf lorsqu un effet particulier de mise en forme ne peut être obtenu de manière correcte et fiable via les seuls styles CSS. En cas de recours exceptionnel aux tableaux de présentation, ceux-ci ne sont pas imbriqués. Les éléments sémantiques XHTML doivent être utilisés systématiquement : titrage H1 H6, listes UL, OL et DL, emphase EM et STRONG, citations Q et BLOCKQUOTE, abréviations ABBR et ACRONYM. Les éléments génériques DIV et SPAN sont réservés à l application de styles, au support des scripts et de quelques métadonnées (attribut LANG), et ne remplacent en aucun cas l élément sémantique approprié pour décrire le contenu concerné. Les fichiers XHTML respectent les règles d accessibilité définies par le RGAA. Ils comportent en particulier l ensemble des attributs et éléments XHTML requis ou recommandés par celui-ci : CAPTION, SUMMARY, SCOPE, etc. des tableaux de données, LABEL, FIELDSET, LEGEND, OPTGROUP, etc. des formulaires, ALT et LONGDESC des éléments graphiques, CITE des éléments de citation, etc. Le nommage des identifiants ID et des classes doit refléter la structure du contenu plutôt que sa disposition à l écran ou son apparence :.lien_rss plutôt que.orange #menu_1 plutôt que #menu_gauche Le nommage respecte la norme XHTML1.0 et n utilise que les lettres minuscules non accentuées, les chiffres et l underscore (_). 18

19 Le code XHTML est indenté et commenté pour mettre en évidence les principaux blocs de contenu et leur imbrication : <div id="liste_news "> <div class="news"> </div><!-- /.news --> </div><!-- /# liste_news --> 6.3. FEUILLES DE STYLE A FOURNIR REGLES GENERALES La syntaxe des feuilles de style est conforme à CSS2.1. Leur validité est vérifiée à l aide du validateur CSS du W3C : Les adaptations des styles CSS pour Internet Explorer 5.5, 6.0 et 7.0 sont gérées à l aide de feuilles de styles externes spécifiques ie55.css, ie6.css et ie7.css, appelées dans le code XHTML à l aide de commentaires conditionnels : <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]--> Les hacks CSS et correctifs jouant sur la syntaxe des propriétés et commentaires CSS ne sont donc pas utilisés. Dans chaque feuille de style, les règles CSS sont organisées en blocs commentés permettant d identifier les types de contenu XHTML auxquels elles s appliquent. La feuille de style suit l ordre linéaire du code XHTML. La syntaxe CSS n est pas compactée et se présente sous la forme : /* pied de page */ #selecteur { Propriété : valeur ; Propriété : valeur ; } STYLES SCREEN Une ou plusieurs feuilles de style règlent la présentation pour le media SCREEN. Chaque page appelle : Une feuille de style globale, commune à tout le site Complétée par une feuille de style commune à un ensemble de pages, Voire éventuellement par une troisième feuille de surcharge propre à une page unique. Les styles CSS sont réservés à la mise en forme du contenu XHTML, et ne sont pas utilisés pour lui substituer à l affichage un pseudo-contenu à l aide notamment d images d arrière-plan venant en remplacement d un texte masqué. La désactivation des styles SCREEN ou celle de la couleur dans Internet Explorer, ne doivent donc pas entraîner de perte d information. Les styles SCREEN permettent à la présentation de respecter les règles d accessibilité définie par le RGAA. 19

20 STYLES PRINT Chaque page est dotée d une feuille de style de media PRINT, commune à l ensemble du site. Celle-ci gère l impression des éléments de contenu et la non-impression des éléments propres à l affichage Web (menus et autres éléments de navigation ou d interaction). Elle permet, dans les navigateurs qui le supportent, l impression automatique de l url des liens après leur libellé. La feuille de style print est valide CSS2.1 JAVASCRIPT ET INTERACTIONS RICHES Tant pour la qualité que pour l accessibilité, la refonte doit respecter deux principes techniques de conception XHTML CSS et javascript : Externalisation complète des styles de présentation CSS et des scripts javascript Utilisation non-obstructive de CSS et de javascript : ceux-ci interviennent en tant qu enrichissements d une base XHTML accessible et fonctionnelle. VALIDATION ET COMPATIBILITE INNOVALIS Aquitaine ne demande pas un affichage identique au pixel près dans tout le parc de navigateur demandé. En revanche, le site devra fonctionner sans dégradation majeure dans tout le parc : Fonctionnement : Internet explorer 6, 7 et 8 (selon déploiement de la version définitive) Safari 2 et + Opera 9 et + Firefox 2 et 3 Possibilité de consulter les contenus dans les autres navigateurs. Les règles ci-dessus feront l objet d une vérification de la part de INNOVALIS Aquitaine et pourront donner lieu à des ajustements éventuels avant la validation définitive. 7. LOT 3 : MISE EN PLACE DU SYSTEME DE GESTION DE CONTENUS 7.1. DESCRIPTION DU LOT Le prestataire choisi devra mener à bien les missions suivantes : Mise en place d un système de gestion de contenus Création et mise en place des rubriques et modèles de documents Paramétrage de l interface d administration Importation des contenus Formation des utilisateurs 20