TechWeb
Accueil Codage HTML CSS DESIGN XML LaboCSS

HTML5/CSS3 maintenant ?

Un collectif d'étudiants ferrus d'informatique souhaite réaliser un site ayant pour vocation de partager leur passion pour les nouvelles technologies.

L'objecif du site est de présenter les outils et méthodes permettant d'utiliser dÚs aujourd'hui HTML5 et CSS3 avec une rétrocompatibilité pour d'anciens navigateurs (Modernizr, html5shim, html5-boilerplate)

Il s'adressera à des personnes ayant une connaissance préalable du HTML4 et CSS2

Présentation et contenu

présentation : identité graphique

L'identité du collectif se déclinera sous la forme :

contenu

Le choix des contenus est laissé à l'appréciation de chacun

Contraintes techniques

Site dynamique

Le site sera architecturé avec php (site dynamique)

Utilisation d'un moteur php pour générer les différentes pages.

Conformité HTML

Les pages devront ĂȘtre valides en HTML5 et CSS3

Navigateurs

Le site devra ĂȘtre opĂ©rationnel sur Mac avec Firefox, Safari, Chrome, Opera et sur PC avec Explorer 7 8 ou 9, Firefox, Chrome et Opera. Il n'est pas indispensable que l'apparence soit totalement identique d'un environnement Ă  l'autre, cependant la prĂ©sentation devra rester acceptable.

Le site devra ĂȘtre responsive afin de pouvoir ĂȘtre visualisĂ© sur tablette ou smartphone

L'utilisation des nouvelles balises HTML5 permettant la structuration du document sera de rigueur (header footer section article ...)

Mise en page CSS

Séparer le contenu de sa mise en page en faisant un usage sémantique des balises HTML5 dans le code et réservant la présentation aux seules CSS3.

CSS alternatives

Vous proposerez des CSS alternatives pour adapter la présentation du site aux besoins des uns et au goût des autres. En particulier on pourra proposer

Structure des pages

entĂȘte

Dans l'entĂȘte figurera une baniĂšre conçue sous photoshop pour illustrer la thĂ©matique et dĂ©finir l'identitĂ© visuelle du collectif. Elle pourra ĂȘtre dĂ©clinĂ©e en diffĂ©rents tons selon la CSS alternative appliquĂ©e. Le choix d'optimisation de l'image au format gif, png ou jpg doit ĂȘtre pertinent. Les "effets" proposĂ©s par l'image doivent - le plus possible - rendre compte d'une maĂźtrise de photoshop

un bas de page

Le bas de page contiendra les liens permettant l'utilisation des CSS alternatives. Tout autre élément que vous jugerez utile pourra y figurer

un menu

Le menu présent sur toutes les pages doit permettre la navigation dans la totalité du site.

corps de page

Y figure le contenu propre Ă  la page. C'est la zone variable lors de la navigation sur le site

Ergonomie

Lors de la conception de l'interface du site soyez attentifs à l'utilisabilité, à l'accessibilité et à la navigation.

Les pages

L'organisation et le contenu des pages est laissé à l'appréciation de chacun selon l'approche choisie.

Un diaporama

Afin de metrre en avant les multiples compétences du collectif, un diaporama sera présent sur le site. Son emplacement, son usage et sa finalité sera laissé à l'appréciation de chacun.

La technique utilisĂ©e pourra ĂȘtre : Flash, animations HTML5/CSS3, Javascript, Jquery ... , au choix

Une page de liens

Permettre aux utilisateurs de proposer un lien en rapport avec la thĂ©matique du site. Ces liens seront automatiquement intĂ©grĂ©s Ă  la page, bien qu'en rĂ©alitĂ© ils devraient ĂȘtre Ă©valuĂ©s par un modĂ©rateur humain avant d'ĂȘtre validĂ©s et figurer sur la page.

 

Valid XHTML 1.0 Strict Valid CSS!

Copyright Gabriel Braun 2007