Mission HTML 5 et CCS 3… accomplie !

Pour le cours « Outils », je viens de mettre en ligne un petit « Guide de Survie en Milieu ROCailleux ».

main_roc

1. Choix de la thématique :

J’ai choisi une thématique que je maîtrise afin de me concentrer davantage sur les aspects techniques du site et moins sur le contenu. Je pratique l’escalade depuis plus de 10 ans, et j’initie régulièrement de grands débutants, dans un cadre associatif ou privé. Les séances d’initiation sont plutôt consacrées aux manipulations de cordes et aux techniques de sécurité de base et ne suffisent pas pour présenter ce sport. L’objectif du site est donc de synthétiser les informations et les références essentielles pour bien débuter et mieux appréhender l’univers de l’escalade.

2. Outils utilisés pour créer le site :

Editeur de texte : Client FTP : Hébergeur : Police : Images : Couleurs :
Notepad++ Filezilla OVH fontsquirrel.com Easy Thumbnails (miniatures)

Befunky.com (filtres et modifications)

La boîte à couleurs

3. Sources pour l’apprentissage du code :

J’avais déjà quelques notions de HTML et de CSS avant d’entamer ce travail, car j’avais suivi, très partiellement, le cours consacré à ces deux langages sur Codecademy.com cet été. J’ai complété ces premières approches par le cours interactif proposé par Openclassrooms.com (ex site du zéro), sur le HTML 5 et le CSS 3. Les exercices proposés à la fin de chaque session permettent de mémoriser efficacement les principales balises et les notions essentielles.

Au moment de la mise en forme du site, ces sources se sont révélées insuffisantes. J’ai en effet rencontré de nombreuses difficultés pour positionner mes blocs en CSS. J’ai donc utilisé des tutoriels complémentaires sur Alsacréations.com. Ces derniers donnent des éléments théoriques, laissant le développeur libre de les adapter à sa situation particulière. J’ai également eu recours aux guides pour développeurs web de Mozilla Developpeur Network sur certains points très précis.

Enfin, pour terminer mon travail, j’ai testé mes pages html et ma feuille de style sur les formulaires de validation consacrés du W3C. Au-delà de quelques erreurs de balises non fermées, je retiens les avertissements sur la structure de mon code HTML. Il ne comporte pas suffisamment de titres < h2 > à < h6 > qui permettraient de mieux structurer mes pages. J’ai sans doute fait un usage immodéré des listes. Par ailleurs, j’ai trop utilisé de titres  < h1 > qui devraient être réservés aux titres très importants.

4. Structure du petit GUS MIROC :

L’arborescence du site est assez simple. Une page d’accueil (index.html) dessert les 6 autres pages du site. Ces pages sont accessibles via deux menus de navigation. Un premier menu, en haut de page renvoie vers les pages principales (l’histoire de l’escalade, les styles de pratiques, le matériel, les sites équipés et les références complémentaires). Un second menu, en pied de page, permet d’accéder à une petite galerie photo, à un lien de contact et aux mentions légales. J’ai d’abord envisagé d’inclure un formulaire de contact, mais je n’avais pas les moyens de sécuriser les informations transmises par les internautes. Par ailleurs, afin d’éviter l’envoie de spams, l’AROBASE de mon adresse mail est à modifier manuellement. Les images du site, issues de ma bibliothèque personnelle ou de banques d’images libres de droits, sont cliquables pour une meilleure lisibilité. J’ai également inséré trois vidéos en utilisant les balises <iframe> fournies par Youtube.

Concernant la feuille de style CSS, j’ai préféré une présentation assez classique. Les menus de navigation, réalisés avec des tableaux, en tête (<header>) et en pied (<footer>) de pages, sont identifiés par des couleurs de fond et une police spécifiques. Le corps de page (<section>) se décompose en deux zones. Une zone principale (<article>) accueille les textes. Une zone secondaire (<aside>) est réservée aux illustrations et informations complémentaires. Dans un premier temps j’ai utilisé le positionnement absolu pour placer chacun de mes blocs. L’utilisation de cette fonction a généré des problèmes de dépassement du texte. J’ai donc choisi de laisser dans le flux tous mes blocs sauf le bloc <aside>, positionné en absolu, par rapport à mon corps de page. Pour éviter les décalages, je m’en suis tenue aux pixels pour la définition de la taille de mes polices et de mes marges.

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s