T P I. Site statique. Valentin Dubach. Classe SCM8a



Documents pareils
Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.

Tutoriel BLOGGER. Pour vous donner une idée, voici un exemple de blog :

Création de maquette web

SEO On-page. Avez-vous mis toutes les chances de votre côté pour le référencement de votre site?

SITE I NTERNET. Conception d un site Web

Référencement et visibilité sur Internet Comment améliorer la visibilité de son site internet sur les principaux moteurs de recherche?

OFFRE DE SERVICE.

NAVIGATION SUR INTERNET EXPLORER

creer votre site internet en html/css

d un site web universitas friburgensis Objectifs de l atelier

La société Figures Libres - agence de communication - lance ipaoo.fr, générateur de site internet professionnel.

REFERENCEMENT NATUREL

Optimiser pour les appareils mobiles

Formation pour les parents Se familiariser avec la tablette ipad et les applications d apprentissage pour enfants

Créer son site internet avec Jimdo. Web business

Gérer, stocker et partager vos photos grâce à Picasa. Janvier 2015

Mon aide mémoire traitement de texte (Microsoft Word)

Utiliser le site Voyages-sncf.com

Formation Découverte du Web

Création d un site Internet

Site internet. Vous voulez faire réaliser votre site internet par une agence web? 21 points à passer en revue pour rédiger votre cahier des charges

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.

Les 10 étapes incontournables pour réaliser un site internet performant et accessible

UTILISER LA MESSAGERIE

Saisissez le login et le mot de passe (attention aux minuscules et majuscules) qui vous ont

16 septembre Lundi de l Economie l. rencement. Foix. CCI Ariège

Les outils de SEO (Référencement naturel) et les Sites SharePoint Public sur Office 365

INTRODUCTION AU CMS MODX

Prise en main rapide

Optimiser les s marketing Les points essentiels

Rapport de stage. Création d un site web. Stage du 20/01/2013 au 21/02/2013

Projet en nouvelles technologies de l information et de la communication

Le réseau et les tables virtuelles Synapse

L espace de travail de Photoshop

Partie publique / Partie privée. Site statique site dynamique. Base de données.

Créer des documents interactifs

Guide d utilisation 2012

Créer du contenu en ligne avec WordPress

Portfolio Sites internet :

Comment utiliser FileMaker Pro avec Microsoft Office

Webmaster / Webdesigner / Wordpress

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

Zotero est une extension du navigateur Firefox. Il est possible de télécharger Firefox gratuitement sur le site:

Formation Webmaster : Création de site Web Initiation + Approfondissement

Bernard Lecomte. Débuter avec HTML

demander pourquoi mon site n'apparaît pas sur google ou pourquoi mon site n'est pas référencé par les moteurs de recherche?

Animation numérique. de territoire. Créer son site Internet avec un outil gratuit. Mardi 4 novembre Cédric ARNAULT OT Lourdes

Introduction à HTML5, CSS3 et au responsive web design

Table des matières A. Introduction... 4 B. Principes généraux... 5 C. Exemple de formule (à réaliser) :... 7 D. Exercice pour réaliser une facture

Bureautique Initiation Excel-Powerpoint

Guide de démarrage rapide. (pour la version 5.0.)

Initiation à linfographie

Guide de prise en main. Yourcegid SOLOS. Devis-Factures. 12/08/2013 Page 1 / 38

Guide utilisateur i-milo >> Décisionnel

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?

Echosgraphik. Ce document sert uniquement à vous donner une vision sur ma manière de travailler et d appréhender un projet

ETRE VISIBLE SUR INTERNET. Search Engine Optimisation (SEO)

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN ING

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

Styler un document sous OpenOffice 4.0

Atelier E-TOURISME Optimiser la visibilité de son site sur les moteurs de recherche. ecotourismepro.jimdo.com

L écran du marais : Comment configurer le viewer OpensSim

THEME RESPONSIVE DESIGN

... Cahier des charges Site Internet Office de Tourisme Lesneven - Côte des Légendes MAITRE D OUVRAGE

Bibliothèque Esparron en livres.

Optimiser moteur recherche

Gestion de contenu d un site web avec TYPO3 Manuel de l administrateur

N importe qui possédant un code MS valide peut initier la rencontre. Néanmoins, il serait préférable de laisser cette

Vous avez reçu une pièce jointe VOTRE SITE.RAR, qu en faire?

Intégrer des médias. Plateforme e-tourisme. demo.minisites.encharentemaritime.com

Informatique et Internet

DÉFINITION DE LA NEWSLETTER : OUVERTURE DU LOGITIEL ETARGET

ERGONOMIE ET OPTIMISATION DU TAUX DE CONVERSION D UN SITE INTERNET Partie 1/2

Création du site internet [insérez le nom de votre site]

Créer et animer une boutique en ligne avec Wordpress (environnement PC et MAC)

Utilisation de Sarbacane 3 Sarbacane Software

Notes pour l utilisation d Expression Web

Comment bien référencer mes sites internet? Les 100 SECRETS EN VIDÉO

Créer et gérer une newsletter Comment créer et faire vivre une lettre d information au sein de votre entreprise?

Comment générer des revenus en Affiliation

ZOTERO Un outil gratuit de gestion de bibliographies

Introduction aux concepts d ez Publish

Dragon Naturally Speaking 13

PRISE EN MAIN D ILLUSTRATOR

Content Management System. bluecube. Blue Cube CMS V4.3 par Digitalcube

Guide de correction et d optimisation des images en vue de leur publication sous Marcomedia Contribute. Logiciel utilisé : Adobe PhotoShop 7

ASTER et ses modules

En date du 11 décembre 2008

WINDOWS 8. Windows 8 se distingue par la présence de 2 interfaces complémentaires :

MODELE DE BRIEF AGENCE

Guide et conseils généraux pour optimiser le référencement d un site internet

Le service de création de site Internet : Mode d emploi. La Création de Site Internet

KIELA CONSULTING. Microsoft Office Open Office Windows - Internet. Formation sur mesure

Créer un premier document avec Pages

VOLUME 1 CRÉATION D UN SITE WEB

Administration du site (Back Office)

Transcription:

T P I Site statique Classe 25 mai au 2 juin 2010

1. Tables des matières 1. Tables des matières... 2 2. Introduction... 3 3. Analyse... 4 3.1. Public cible... 4 3.2. Objectifs... 6 3.3. Structure du site... 7 3.4. Identités graphiques existantes... 8 4. Conception... 10 4.1. Synopsis... 10 4.2. Chartre graphique... 10 4.3. Technologies utilisées... 14 4.4. Structure des pages... 15 4.5. Contenu du site... 18 4.6. Test du site dans différents navigateurs... 20 4.7. Référencement... 27 4.8. Facturation détaillée... 29 5. Conclusion... 30 6. Sources... 31 6.1. Sources des images figurants sur le site... 31 7. Annexes... 32 7.1. Facturation détaillée... 32 7.2. Planning... 32 7.3. Journal de Bord... 32 7.4. Croquis papier de la maquette du site... 32 7.5. Copie du cahier des charges... 32 7.6. Le CD dans sa fourr e... 32 Mai-juin 2010 Page 2 sur 32

2. Introduction Le Travail de Production Individuel est le dernier travail pratique que nous devons réaliser durant notre formation de médiamaticien. Ayant lieu dans durant les dernières semaines de la 4 ème année ce travail permet au corps enseignant d évaluer les compétences pratiques acquises par les élèves. Bien qu il soit basé sur des données concrètes du marché, ce travail est purement académique. Le 17 mai 2010, le type de projet que nous allions devoir créer durant une semaine et demie a été tiré au sort par M. Roderick Graber, responsable des TPI en médiamatique. Le mardi 25 mai 2010, nous avons découvert notre coach. Dans le domaine des «sites statiques», il s agit de Mme Ariane Nicollier. C est elle qui nous a également remis nos cahiers des charges respectifs et qui a répondu à toutes nos questions à propos de ceux-ci. Mon TPI consiste à réaliser un site. À travers ce site qui doit être statique, je vais expliquer en quelques mots qui est ce personnage et quels ont été ses ouvrages, entre autres la théorie de l évolution. Les idées de ce personnage ont eu un impact très important dans la communauté scientifique, et je pense judicieux de relater les critiques et réactions qu il a suscitées à travers celles-ci. Expliquer quel est le parcours de ce personnage est également essentiel pour bien comprendre comment il a réussi à ancrer son nom dans l histoire de l humanité. Une partie de mon site sera consacrée plutôt à sa vie privée. Je pense également faire une chronologie des dates clés de son parcours. Avant de recevoir ce travail, je ne connaissais Charles Darwin que de nom. Je vais donc devoir rechercher des informations sur Internet afin de pouvoir créer un contenu qui soit cohérent et complet. C est également à travers cette plateforme que je vais rechercher des images et des thématiques qui me permettront de mettre en place la ligne graphique de mon site. J espère que vous aurez du plaisir à découvrir mon travail ainsi que toute la partie conceptuelle qui va avec. Mai-juin 2010 Page 3 sur 32

3. Analyse 3.1. Public cible 3.1.1. Qui? D après moi, les personnes qui recherchent des informations sont : des personnes plutôt jeunes De 18 à 35 ans. (voir dès 15 ans) en formation... Constitution de présentations, d exposés, ou de préparations diverses. Travaux académiques plutôt dans le domaine de l histoire et/ou la géographie. à la recherche d informations précises et pas trop complexes L article se trouvant sur Wikipedia (cf. sources) est très complet, cependant il ne résume pas les points clés l histoire de Darwin. Ce document est long à lire et les informations sont parfois confuses. Ceux qui recherchent des informations sur la théorie de l évolution sont selon moi dans la même tranche d âge et également en formation. Cependant, je pense qu il s agit là plus d une recherche dans le cadre d un cours de biologie, de sciences et/ou sciences naturelles, de médecines ou encore de chimie. Les personnes plus âgées, comme par exemple les enseignants ou les historiens ne sont pas dans ma cible. Ces personnes ont l habitude d étudier des longs documents souvent complexes or mon site aura justement comme but de résumer l information afin qu elle soit accessible à un public moins aguerri. Les fans d histoire qui souhaitent tout apprendre se tourneront plutôt vers des encyclopédies sur papier et iront acheter quelques livres écrits par cet homme, etc. C est pour cette raison qu ils ne font pas partie de mon public. Ce site est destiné à tous les publics francophones, à savoir la Suisse, la France, et le Canada. 3.1.2. Quels besoins? Mon public cible est donc à la recherche d explications et d informations qui soient claires et facilement compréhensibles. De plus, créer un site aux explications simples m est bénéfique : les gens à la recherche d informations complexes se plairont sur l article de Wikipédia. Par contre, les gens qui trouveront Wikipedia pas assez succinct partiront à la recherche d un site où les informations Mai-juin 2010 Page 4 sur 32

sont plus claires et résumées. Les autres sites sont souvent en anglais, et les sites résumant l ensemble de Darwin sont rares. C est donc là que j ai une place à prendre! 3.1.3. Aptitudes? Mon public étant défini je peux maintenant définir leurs aptitudes. Résolution d écran Les ordinateurs d école pouvant parfois être relativement petits ou mal réglés, il se peut que je rencontre des écrans ayant une résolution de 1024x768 pixels. Cette résolution représentant encore le 20% des résolutions utilisées Internet (cf. sources) alors il me semble judicieux d avoir un site de 960 px de large. (960px étant le standard des sites conçus pour cette résolution d écran) Débit Internet Le débit minimum pouvant être souscrit pour une ligne Internet est de minimum 300Kb/s. Ceci me permet d être relativement à l aise quant à l insertion de photos ou même de vidéos. Les caches des navigateurs sont également un point à prendre en compte : l utilisateur n aura pas à télécharger le contenu qui se répète sur les pages (ex. : fond d écran) Version des navigateurs Comme très souvent, les écoles et/ou universités sont équipées de produits Apple. Ceci est un point positif, car les mises à jour sur Mac sont très aisées à faire et les navigateurs ont donc une forte probabilité à être à jour. Les étudiants ont également une meilleure tendance à maintenir leurs navigateurs à jour. C est pourquoi j ai choisi que mon site soit optimisé pour les navigateurs suivants : Firefox 3.5 + 3.6 / Safari 4 / Chrome 4 + 5 / Opera 10.5 / Internet Explorer 7 + 8 * * certains aspects visuels pourraient être «perdus» dans IE, cependant le site sera tout à fait utilisable. Mai-juin 2010 Page 5 sur 32

3.2. Objectifs 3.2.1. Principal Enseigner par le biais d un site Internet qui est Charles Darwin ainsi que ce qu il a accompli durant sa vie. 3.2.2. Secondaires Avoir un contenu compréhensible pour un public jeune Raconter le parcours privé de Charles Darwin Expliquer brièvement la théorie de l évolution Mettre à disposition des internautes un recueil de citations 3.2.3. Opérationnels Se renseigner et ses différents travaux Rassembler des citations du personnage Rédiger le contenu à faire figurer sur le site Internet Établir une ligne graphique pour le site : Logo, Moodboard, style typographique, Trouver un hébergeur et un nom de domaine Créer un rapport justifiant les différent choix effectué pour créer le site Présenter le travail final devant deux experts externes Mai-juin 2010 Page 6 sur 32

3.3. Structure du site Menu de premier niveau Menu de deuxième niveau Jeunesse Son histoire Beagle Carrière Accueil Vie personnelle La théorie de l'évolution Son oeuvre Citations La séléction naturelle L'origine des espèces Le darwinisme J ai choisi d utiliser deux niveaux de menus. En restant sur l idée de résumer Darwin, faire trop de menus pourrait amener les internautes à ne plus savoir ou chercher l information. De plus pour le référencement il ne faut pas avoir trop de sous-menus. Le nombre de deux est idéal. Le personnage et l explication du travail qu il a accompli sont deux parties distinctes. Dans l histoire du personnage, je retrace son parcours privé et familial, en parlant également de la formation qu il a suivie et des personnages qu il a rencontrés et de son expédition en Amérique du Sud. Je reprends également sa vie de famille, femme, enfants ainsi que les livres qu il a écrit Dans «son œuvre», j explique de manière simplifiée le principe de la théorie de l évolution, et l influence que Darwin a eu sur celle-ci. Je vais également parler du darwinisme, et expliquer ses dérivations. Dans les «citations», les internautes trouveront quelques phrases marquantes que Darwin a dites ou écrites durant sa vie. Un lien permettra de les imprimer. Mai-juin 2010 Page 7 sur 32

TPI : Site Statique 3.4. Identités graphiques existantes Le site darwinisme.org est le seul site sur lequel j ai trouvé une identité graphique propre au thème de Darwin. Tous les autres sites (Wikipedia, linternaute, futura-sciences) ont une thématique générale hors sujet. Principalement brunes, les couleurs de ce site ne me plaisent pas. De plus, je trouve les menus non élégants. Il est visible que le graphisme de ce site n a pas été modifié depuis quelques années. La typographie n est pas travaillée du tout ce qui donne l impression que le site est «brut de coupe». Lorsque l on passe la souris sur un des boutons du menu, celui-ci devient blanc et la petite flèche rouge à droite de celui-ci fait des sauts de gauche à droite de la case dans laquelle elle se trouve. Cet effet est à mes yeux disgracieux et pas cohérent. Bien que son contenu soit relativement à jour, la structure de ce site m a vraiment étonné, pour ne pas dire choqué! Effectivement, il y a plus d une dizaine Mai-juin 2010 Page 8 sur 32

de tableaux imbriqués les uns dans les autres. Cette structure de site n est vraiment plus d actualité. De plus, il y a beaucoup de code inutile ; une meilleure structure aurait optimisé le chargement des pages. Au niveau du référencement ce n est guère mieux : Le site n a aucune balise <meta>! Il contient 53 erreurs HTML et 6 en CSS sur la homepage. Il n y a aucune balise de description sur les images. Cependant, lorsque l on recherche Charles Darwin sur Google.fr darwinisme.org est en 6 ème position des résultats. Pourquoi? Car c est le seul site qui traite du sujet. Un autre site en anglais rencontre les mêmes problèmes que darwinisme.org. Pas de référencement, gros problème de structure : il est en 2 ème position dans la recherche Google. Ces sites sont très intéressants à analyser : sans aucun effort de SEO, ils se retrouvent en tête des résultats de Google. En attachant donc, ne serait-ce qu un minimum d attention au référencement de mon site, j ai toutes les chances de me retrouver, dans un premier temps, sur la première page des résultats de Google, et même d autres moteurs de recherche. Bien que ce sujet soit destiné à un public «de niche», il est plaisant de savoir qu il n y aura pas de difficultés à faire mieux que la grande majorité des sites traitant le sujet! Concernant la ligne graphique existante, on peut dire qu elle est inexistante. Les seules choses à prendre en compte sont les photos en noirs et blanc ainsi que les peintures de Darwin ou du Beagle. C est donc sur cette base que je vais construire mon identité graphique. Mai-juin 2010 Page 9 sur 32

4. Conception 4.1. Synopsis Charles Darwin, l homme qui a donné une explication scientifique à la théorie de l évolution est devenu à l heure actuelle une idéologie internationale. Qu'est-ce qui l a amené à devenir un des naturalistes les plus célèbres du monde? Quelles révélations a-t-il apporté au monde scientifique? Venez découvrir l histoire et le travail de ce personnage intéressant sur darwintheorie.info 4.2. Chartre graphique 4.2.1. Moodboard Voici les images qui constituent mon moodboard. La banque d images concernant Charles Darwin est relativement restreinte, cependant ces quelques illustrations m ont permis de conceptualiser la ligne graphique de mon site, qui sera principalement dans un style «peinture» Mai-juin 2010 Page 10 sur 32

4.2.2. Couleurs 25 22 70 64 69 0 73 #191646 252 243 220 0 4 13 1 #FCF3DC 98 90 55 0 8 44 62 #625A37 153 94 54 0 39 65 40 #995E36 200 150 103 0 25 48 22 #C89667 Voici les couleurs que j ai récupérées grâce à mon moodboard. J ai utilisé le blanc cassé comme couleurs de polices des titres et boutons. J ai utilisé le bleu pour la couleur de corps. Les bruns constituent mes fonds. J ai utilisé le vert comme police de mes liens dans la partie «contenu». Ces couleurs reflètent un aspect «ancien», et c est l atmosphère que je souhaitais conserver dans le site. Rester au XIXe siècle, époque où Darwin a vécu. Mai-juin 2010 Page 11 sur 32

4.2.3. Logotype J ai choisi de reprendre dans mon logotype le premier schéma que Darwin a dessiné pour représenter son idée de la théorie de l évolution (ci-contre). C est vraiment un des symboles qui représentent le mieux Darwin et son idée de la théorie de l évolution. J ai donc recréé de manière schématique la même structure dans Illustrator. Voici la première version à droite Le résultat était à mes yeux trop carré. C est pourquoi j ai créé un nouveau fichier Illustrator dans lequel j ai importé la première version. Ensuite, j ai effectué une vectorisation dynamique grossière du logo. Voici maintenant le résultat final (ci-dessous) qui est moins régulier et plus homogène avec le reste de la ligne graphique. Mai-juin 2010 Page 12 sur 32

4.2.4. Typographie J ai recherché des polices sur le site de fontsquirrel.com ainsi que sur dafont.com. J avais trouvé d intéressantes polices sur fontsquirrel, cependant le site étant aux USA les fonts n avaient pas d accents. J ai malgré tout utiliser 2 polices différentes sur ce site, je les ai conservées pour «Charles Darwin» dans l entête du site. Nom de la police : Licence : Référence : HarabaraHand Free to use http://www.fontsquirrel.com/fonts/harabarahand Nom de la police : Licence : Référence : Journal Free to use http://www.fontsquirrel.com/fonts/journal J ai souhaité utiliser des polices «Handwritten», car elles donnent justement l impression d avoir été écrite à la main. À l époque de Darwin, il n y avait pas encore d informatique et de précision dans les lettres. Tout sauf les livres était écrit à main levée. C est pour cette raison et également pour l aspect chaleureux donné par ces polices que je les ai choisies. Pour tous les autres éléments de textes du des menus j ai utilisé la police Goobascript. Elle fait aussi partie des polices manuscrites, mais à contrario des deux précédentes, Goobascript est beaucoup plus lisible et de plus elle à toutes les options d accents. Pour les paragraphes de textes, j ai choisi Helvetica : elle n est pas fatigante à lire sur de longs textes. Et finalement, j ai utilisé Garamond pour les citations, bien que cette polices ne fonctionne pas dans tous les navigateurs. Nom de la police : Licence : Référence : Goobascript Free to use http://www.dafont.com/fr/goobascript.font Mai-juin 2010 Page 13 sur 32

4.3. Technologies utilisées Le principal défaut des sites existants est leur aspect vieillissant et non à jour. C est pourquoi je vais utiliser des nouvelles technologies pour rendre un aspect visuel plus moderne est plus abouti. CSS Pour la création de mes menus, et l importation de mes polices afin de reproduire au mieux ma maquette Photoshop tout est fait en CSS 3. Le CSS 3 m a permis de faire : Des coins arrondis Des ombres sous le texte D utiliser n importe quelle police, même si l utilisateur ne l a pas sur son ordinateur. Technologie offerte par la commande @font-face Infos ici : http://craigmod.com/journal/font-face/ HTML 4 Pour la création du site, je suis resté sur du HTML 4. Le HTML 5 étant actuellement supporté par très peu de navigateurs, il est préférable d utiliser le flash, pour l insertion d une vidéo par exemple. En discutant avec le client pour améliorer le site, l option du HTML 5 est tout à fait envisageable. Mais avant 2 ans cette technologie ne sera pas totalement intégrée dans le Web. IMAGES Toutes mes images de construction du site sont en JPEG. C est ce format que j ai choisi, car le rendu était fidèle et ce format de compression donne des images au poids très léger. JAVASCRIPT J ai utilisé un peu de JS pour l affichage de ma «lightbox» qui met en avant les images et ajoute un voile noir au site pour mieux voir celle-ci Mai-juin 2010 Page 14 sur 32

4.4. Structure des pages 4.4.1. Header Une page de mon site est séparée en 3 parties : Le header contient : 1) Mon logo 2) Un espace vide (pour de la pub ou autre) 3) Une photo de Charles Darwin 4) Ma barre de menu de niveau 1 Header (en-tête) Contenu Footer (pied de page) Voici une capture d écran de mon header Pour l afficher de manière complète, il faut compter 1000 px de large et 185 px de haut. J ai choisi de donner un effet 3D à ma barre de navigation car je trouve l effet intéressant. Ceci donne de la profondeur au site, ce qui le rend visuellement plus dynamique. C est également pour ça qu il y a une ombre «sous» le site. Le grand espace vide au centre de la bannière peut accueillir soit de la pub, soit d autres images de Darwin, soit un module dynamique autre, etc. À décider avec le client. Une évolution possible aurait pu être l ajout d un champ de recherche (par exemple avec l outil Google «recherche personnalisée»). Voici un montage de ce que cela pourrait donner : Enfin, l état de mes boutons lorsqu on les survole est le suivant : État normal : Texte blanc cassé sur fond brun clair. État hover : Texte brun sur fond blanc cassé. Tout est fait en CSS 3. Les coins arrondis et ombres ne sont juste pas gérés par Internet Explorer, sans grande conséquence visuelle. Mai-juin 2010 Page 15 sur 32

4.4.2. Conteneur Mon conteneur a 3 possibilités de mise en page (réglées via CSS) : 1) un contenu réparti sur une seule colonne 2) Le contenu réparti sur 2 colonnes, avec ou sans titre <H2> 3) Le contenu dans 3 colonnes, avec ou sans titre <H2> Mai-juin 2010 Page 16 sur 32

4.4.3. Footer Mon Footer est relativement basique. Ce sera au client de choisir ce qu il veut y faire figurer. Personnellement j y ai mis le Copyright du client, mon nom, ainsi qu une adresse e-mail de contact. Au début je pensais créer une page Facebook pour le site ou un compte Twitter. Cependant après réflexion, j ai abandonné cette idée : Pour ce type de site qui contient peu voir pas de mise à jour et/ou nouveautés, l utilisation de ces médias n aurait pas été d une grande utilité. La hauteur du footer est modifiable, et le client peut choisir ce qu il veut y voir figurer. 4.4.4. Favicon Le favicon du site, de 16 x 16 px contient une partie de mon logo en jaune sur un fond brun. Le voici : 4.4.5. Google Analytics Dans mon projet, le code Google Analytics n a pas été mis en place. Cependant, sur demande du client, l ajout de cette fonction est tout à fait envisageable. Ceci lui permettrait de voir précisément d où viennent les visiteurs et leur nombre. Dans l optique de l optimisation du site, je pense que c est une fonction qui est même incontournable. Mai-juin 2010 Page 17 sur 32

4.5. Contenu du site Ci-dessous, le texte à la volée, que j ai inséré dans les différentes pages du Site Internet. SON HISTOIRE Sa jeunesse Charles Darwin est né le 12 février 1809 à Shrewsbury, en Angleterre. Il est le fils de Robert Darwin, un médecin et homme d affaires, ainsi que de Susannah Darwin. Son grand-père était un célèbre médecin et poète, Erasmus Darwin. Cinquième d une fratrie de six enfants, Charles perd sa mère à l âge de huit ans. Après quelques années de pensionnat, il se destine à la médecine et entre à l université d Edimbourg (Ecosse). Au cours de ses études, il se passionne de plus en plus pour l histoire naturelle mais néglige les branches médicales. Mécontent des résultats médiocres de son fils, le père de Charles Darwin décide d inscrire ce dernier à Cambridge afin qu il y obtienne un diplôme de théologie. À Cambridge, Charles Darwin se lie d amitié avec le révérend John Stevens Henslow, professeur de botanique. Sa fascination pour la nature, les insectes, le monde animal, continue à le dévorer et c est avec difficulté qu il obtiendra tout de même, en 1831, son diplôme de théologie. Son voyage (beagle) Charles Darwin vient tout juste de terminer ses études à Cambridge. Son intérêt pour l histoire naturelle lui a permis de se lier avec différents professeurs de l université. De retour chez son père, il reçoit un courrier de la part du révérend Henslow ; ce dernier le recommande pour un poste de naturaliste, dans le cadre d une expédition visant à élaborer la cartographie de la côte d Amérique du Sud. Charles Darwin ne dispose pas d une formation complète en tant que naturaliste, pourtant il a su se distinguer auprès du professeur Henslow tant son intérêt scientifique et ses connaissances autodidactes étaient marqués. L expédition du beagle durera cinq ans et sera un véritable tour du monde. Parti le 27 décembre 1831 (Charles Darwin n est alors âgé que de 22 ans!), l équipage ne rentrera que le 2 octobre 1936. Le travail de Charles Darwin consiste à faire l inventaire des innombrables espèces animales et végétales qu il rencontrera dans les différentes étapes dont l Amérique du Sud, l Australie, la Réunion et les îles Galapagos. Il étudie également les aspects géologiques des différents territoires et récolte de nombreux spécimens d organismes vivants ou fossiles. Charles Darwin envoie régulièrement des courriers à Cambridge, dans lesquels il décrit ses différentes observations scientifiques. De plus, Darwin s intéresse aux aspects sociaux, politiques et anthropologiques des peuplades qu il rencontre. Sa carrière La magnifique aventure du beagle ainsi que l étude des innombrables informations collectées durant ce voyage sont à l origine de la plupart des théories élaborées par Charles Darwin. Grâce à la qualité des courriers envoyés à Cambridge tout au long de son voyage, le jeune étudiant qu il était au départ de cette expédition rentrera en étant devenu un scientifique renommé. Dès son retour, Charles Darwin s installe à Londres afin de poursuivre son travail. Il collabore avec le révérend Henslow à la transcription de toutes les observations et découvertes qu il a effectuées durant son périple. Le travail est immense et Charles Darwin va rapidement souffrir de surmenage. L ensemble de sa carrière sera consacrée à la recherche. 1837 Charles Darwin sera élu au Conseil de la Société géographique. 1838 Il deviendra membre la la Royal Society de Londres 1858 Pour la première fois, Charles Darwin expose sa théorie sur l évolution des espèces devant un collège de scientifiques 1878 Charles Darwin est élu à l Académie française des sciences. Sa vie personnelle Le 29 janvier 1839, Charles Darwin épouse Emma Wedgwood, sa cousine. Ensemble, ils s installeront à la campagne, loin de l agitation londonienne. Ils auront dix enfants, dont deux mourront en très bas âge. Sa fille Annie succombera à une maladie à l âge de 10 ans ; cet événement ébranlera sérieusement la foi en Dieu de Charles Darwin, jusqu alors très croyant. Tout au long de sa vie, Charles Darwin souffrira de différents problèmes de santé qui l obligeront à prendre des périodes repos : problèmes d estomac, palpitations, tremblements, troubles paniques. Charles Darwin mourra le 19 avril 1882, à l âge de 73 ans. Après des funérailles officielles, il Mai-juin 2010 Page 18 sur 32

sera enterré dans l Abbaye de Westminster, près d autres grands hommes tels que le physicien Isaac Newton. SON OEUVRE La théorie de l évolution À l époque de Darwin, les scientifiques sont divisés et deux tendances s opposent concernant l évolution des espèces : Les créationnistes, qui pensent que le monde et les êtres sont tels que Dieu les a créés Les évolutionnistes, qui pensent que les êtres vivants changent au cours du temps. Charles Darwin, dont le nom est étroitement associé avec la théorie de l évolution, va très largement contribuer au développement de cette dernière. Ses nombreuses observations et recherches lui ont apporté la conviction qu au fil des générations, les êtres vivants évoluent afin de s adapter à leur milieu et qu ils transmettent ces modifications à leur descendance. Concrètement, cela signifie que les espèces se diversifient à partir d un ancêtre commun. Points principaux de la théorie de l évolution : 1. Chaque espèce vivante subit une évolution. 2. Cette évolution est progressive et demande plusieurs milliers à plusieurs millions d années. 3. La sélection naturelle est le mécanisme principal de l évolution. 4. Cette sélection comporte deux composantes : sélection de survie (êtres les mieux adaptés à leur milieu) sélection sexuelle (aptitude à trouver un partenaire et à transmettre son patrimoine génétique) 5. Toutes les espèces vivantes tirent leur origine d un processus de spéciation (processus évolutif par lequel de nouvelles espèces apparaissent) A l époque, cette théorie ne fait pas l unanimité au sein des scientifiques et il faudra beaucoup de temps à Charles Darwin pour voir reconnaître le fruit de son immense travail. La sélection naturelle Dans le cadre de ses recherches sur l évolution des espèces, Charles Darwin a pu constater que d une manière générale, les être vivants sont parfaitement adaptés à leur milieu. Ceux qui sont le plus adaptés vivent plus longtemps et ont davantage de descendants, auxquels ils transmettent leurs facutlés d adaptation. A contrario, les êtres les moins adaptés vivent moins longtemps et ont moins de descendants, comme si la nature elle-même faisait une sélection naturelle, en privilégiant les êtres faisant preuve de la plus grande facutlé d adaptation. Très controversées à l époque, les théories de Charles Dawin mettront des années à être reconnues. Elles ont depuis lors été prouvées scientifiquement. L origine des espèces En 1859, Charles Darwin publie ses théories dans un livre intitulé «De l Origine des espèces». Cet ouvrage fera beaucoup de bruit, car les croyants y voient une sorte de sacrilège par rapport à ce que dit la Bible. Dans son ouvrage, Charles Darwin laisse sousentendre que l homme et le singe pourraient avoir un ancêtre commun, comme l avait déjà évoqué cinquante ans plus tôt Jean-Baptiste Lamarck (1744 1829), père de la biologie et auteur de théories sur l évolution. Les réactions qui suivront la publication de «L Origine des espèces» sont vives, car personne, à l époque, n a envie d être assimilé à un singe. De nombreuses caricatures circuleront sur lesquelles Charles Darwin est représenté avec un corps de singe. Le Darwinisme Issu du patronyme de Charles Darwin, le terme «darwinisme» fait en premier lieu référence à la théorie selon laquelle «l évolution biologique favorise les gènes les plus aptes pour la survie de l espèce, ainsi donc, tous les êtres vivants résulteraient de la sélection naturelle». Depuis l époque de Charles Darwin, ce terme a évolué. On parle aujourd hui plus globalement de «néo-darwinisme», en faisant allusion aux recherches de Charles Darwin ainsi qu aux aspects génétiques qui sont venus se greffer aux théories de l évolution et de la sélection naturelle. Au XIXe siècle est apparue la notion de «darwinisme social», soit l application de la théorie de Charles Darwin à la société humaine. Les créationnistes, qui croient à la création du monde par Dieu, utilisent le terme de darwinisme pour englober l idée de l évolution de la création du monde de manière scientifique et biologique. Mai-juin 2010 Page 19 sur 32

4.6. Test du site dans différents navigateurs J ai testé différents navigateurs pour vérifier que mon site était exploitable. Je vais montrer ici différentes captures d écrans et dire ce qui change par rapport à la version «correcte». 4.6.1. Internet Explorer Internet Explorer : version 6 Éléments n apparaissant pas et/ou posant problème : Les coins arrondis Ombres sous les textes du menu et sous les paragraphes de contenu Les polices intégrées au CSS Le logo (.png) Le footer n est pas entier On peut naviguer dans le site? (SAUF LOGO) Le contenu du site est lisible? Le site est globalement utilisable? Mai-juin 2010 Page 20 sur 32

Internet Explorer : version 7 Éléments n apparaissant pas et/ou posant problème : Les coins arrondis Ombres sous les textes du menu et sous les paragraphes de contenu Certaines Font-Face (dépend de l OS : parfois OK, parfois pas) Le footer n est pas entier On peut naviguer dans le site? Le contenu du site est lisible? Le site est globalement utilisable? Mai-juin 2010 Page 21 sur 32

Internet Explorer : version 8 Éléments n apparaissant pas et/ou posant problème : Les coins arrondis Ombres sous les textes du menu et sous les paragraphes de contenu On peut naviguer dans le site? Le contenu du site est lisible? Le site est globalement utilisable? Mai-juin 2010 Page 22 sur 32

4.6.2. Firefox Firefox : version 3.0 Éléments n apparaissant pas et/ou posant problème : Ombres sous les textes du menu et sous les paragraphes de contenu Les font-face Footer incomplet On peut naviguer dans le site? Le contenu du site est lisible? Le site est globalement utilisable? Mai-juin 2010 Page 23 sur 32

Firefox : version 3.5 et suivantes. Éléments n apparaissant pas et/ou posant problème : Aucun problème! Version OK. On peut naviguer dans le site? Le contenu du site est lisible? Le site est globalement utilisable? Mai-juin 2010 Page 24 sur 32

4.6.3. Google Chrome Google Chrome : version 4 & 5 Éléments n apparaissant pas et/ou posant problème : Aucun problème! Version OK. On peut naviguer dans le site? Le contenu du site est lisible? Le site est globalement utilisable? Mai-juin 2010 Page 25 sur 32

4.6.4. Safari Safari : version 3 & 4 Éléments n apparaissant pas et/ou posant problème : Aucun problème! Version OK. On peut naviguer dans le site? Le contenu du site est lisible? Le site est globalement utilisable? Je suis satisfait des tests, car tous les navigateurs peuvent être utilisés pour lire mon site. En dehors de quelques différences «d effets visuels», j ai constaté un seul problème de décalage de la barre de navigation dans Internet Explorer. En supprimant une ligne de mon code CSS, le problème était résolu. Initialement, les ombres de textes sont compatibles avec Internet Explorer, cependant leur rendu était vraiment disgracieux, c est pourquoi j ai choisi de les enlever pour IE. Mai-juin 2010 Page 26 sur 32