Ressources, conseils, exemples

Actualités

Mise à jour: 17 Mars 2014

xuéRecherche

xuéPetits potins actuels

Petites annonces

xuéPage souhaitant rencontrer navigateur libre équipé des dernières technologies afin desurfer avec lui en toute tranquilité, simplement et à la puissance maxi.

Pour répondre à cette annonce, cliquer sur le logo ci-dessous.

logo firefox

Sources des exemples réalisés dans cette page.

xué Comment ouvrir une nouvelle fenêtre sans se priver des internautes qui ne disposent pas de JavaScript ou l'ont désactivé ?

Créer des pop-up intelligentes de Fabrice Bonny chez OpenWeb.

Créer des pop-up intelligentes

Exemple de popup : Fruits

Exemple de popup : Coquelicots

Menu et architecture.

xuéMenu compatible avec 25 navigateurs modernes, il est également navigable au clavier et accessible aux déficients visuels équipés de plage braille ou d'une synthèse vocale.

Il demeure opérationnel si le javascript est désactivé.

Sylvain Machefert sur son site Iubito's.

Bases du menu de ce site

xuéCSS: créer une mise en page avec trois colonnes de longueur égale : Procédure pas à pas pour obtenir une présentation sur trois colonnes, avec des couleurs d'arrièreplan.

Michael Meadhra, Builder.com pour ZDNet.fr

Bases de création page à trois colonnes

Retour à l'article

Haut de page

Sommaire

Organiser et structurer

xuéDécouvrez Information Mapping : Méthode de rédaction structurée pour concevoir efficacement votre information.

Information Mapping® est indépendante à la fois du sujet et du support de présentation. Le résultat est un ensemble de modules d'information, définis de manière précise, cohérente et standardisée pour tous les concepteurs.

Lorsque Information Mapping® est couplée avec les technologies XML, l'information devient dynamique, publiable automatiquement sur tous types de support et accessible instantanément.

Information Mapping

xuéDécouvrez un outil simple et puissant, la carte heuristique, également appelée Mind Map®, qui optimisera la majorité de vos activités quotidiennes : prendre des notes, piloter des projets, animer des réunions, prendre des décisions, gérer le temps, créer, innover.

Les cartes heuristiques

Retour à l'article

Haut de page

Sommaire

Combien ça pèse ?

xuéLe poids d'une page web est capital. Mais il existe une relation subjective étroite entre le "poids réel" d'un objet et "le poids marchand" qu'il ne faut pas éluder.

Quelques exemples de sites pour illustrer ce propos. Penser à vider le cache entre deux tests.

Porsche : Le Cayenne

Dior

Boucheron

Mercedes

Volkswagen

Virgin

Fnac

Leclerc

Aldi

Retour à l'article

Haut de page

Sommaire

Des couleurs et des maux !

xuéToutes les couleurs n'agissent pas de la même manière sur notre émotivité. Connaître la signification des couleurs peut dans certains cas aider à mieux orienter nos choix

La signification des couleurs en Chine

Gérard Caron, designer, le sens des couleurs

Les mondes de la couleur

Retour à l'article

Haut de page

Sommaire

Découvrir et Comprendre l'ergonomie

xuéL'ergonomie (du grec ergos, le travail et de Nomos, la loi) est une discipline qui vise l'adaptation d'un système à son utilisateur, afin que ce dernier puisse mener ses activités avec un maximum d'efficacité, de satisfaction et de bien-être, avec une phase d'adaptation réduite. (source Wikipédia)

C'est quoi l'Ergonomie ?

C'est quoi l'Ergonomie informatique ?

Comprendre les déficiences visuelles

Braille Net

Utilisateurs déficients visuels de Windows

Retour à l'article

Haut de page

Sommaire

Décider et manager

xué Vous êtes décideur ou responsable informatique, et vous cherchez à en savoir plus sur les standards du Web. Peut-être êtes-vous particulièrement intéressés à découvrir ce qu'ils peuvent apporter de concret à votre site public, à votre système d'information ou encore, à votre intranet ?

OpenWeb a créé pour vous cette page, qui a pour ambition première de vous permettre, en un temps réduit, de comprendre les enjeux majeurs des standards Web.

Denis Boudreau et Tristan Nitot chez OpenWeb.

Enjeux majeurs du WEB

xuéTous les domaines de l'entreprise sous l'éclairage des nouvelles technologies.

ZdNet Entreprises

xuéElie Sloïm, qualiticien, a découvert les standards du Web il y a quelques années, à travers les membres d'OpenWeb. Il est maintenant convaincu de l'importance fondamentale des standards et de l'accessibilité dans une approche qualité.

Temesis

xuéEnseignant dans une région rurale isolée, Laurent Denis est un fervent utilisateur des ressources Web pédagogiques qui ouvrent dans sa classe une fenêtre sur le monde entier.

The blog and blues

xuéExperte en gestion et management des compétences, Claude Fluck anime actuellement le Département Compétences du Groupe Iteo.

Consultante internationale et responsable de projet, elle partage son temps et sa passion entre le conseil, l'intervention, l'enseignement, la recherche, le développement, l'écriture, en France, en Europe et sur le continent africain.

Fluck Competences

Retour à l'article

Haut de page

Sommaire

A propos de virus, spam et autres hoax

xuéLes virus, hoax, spam sont une réalité dans le monde informatique. En 2005, il semble que la criminalité informatique ait rapporté plus à leurs auteurs que la prostitution ou la drogue ! Protégez-vous !

Lorsque je reçois un hoax posté par un responsable de la sécurité d'un grand groupe français, je suis effaré !

Ce qui suit est un minimum à consulter pour comprendre et assurer sa stratégie de défense. Je vous invite à installer Firefox et Thunderbird en remplacement de IE et Outlook et à vous abonner aux newsletters des sites suivants :

Secuser.com

hoaxbuster

hoaxkiller

Mesures anti spam

Retour à l'article

Haut de page

Sommaire

A propos du Libre

xuéAgissons pour conserver notre liberté de choisir !

Association Francophone des Utilisateurs de Linux et des Logiciels Libres

Knoppix

Tribune libre Framasoft

xuéEn 1995, le Conseil Général de la Haute-Savoie décide de mettre Internet à la portée de ses établissements scolaires. Parce que les dispositifs alors en place sont peu accessibles tant techniquement qu'économiquement, il crée de toute pièce un fournisseur de services Internet inédit : le CRI74 est né. Exemple à dupliquer !

Centre Ressources Informatiques 74

Retour à l'article

Haut de page

Sommaire

Droits et obligations

xuéPour tous respectons la liberté de chacun ! Les utilisateurs de données personnelles ont des obligations à respecter.

La Netiquette

CNIL

Retour à l'article

Haut de page

Sommaire

Coups de coeur

xuéAmis ou inconnus, j'aime bien les sites qui suivent !

Simulation Espace

Voyages en Poesie

La trigo facile

Comment sommes-nous manipulé ?

Haut de page

Sommaire

Evolution 2006-2014

xuéLes dinosaures ont de l'avenir ! (18 avril 2006)

Lisant chez pompage.net cette phrase traduite par Steve Frécinaux " Tout ce qui est ancien trouve un jour ou l'autre un nouveau souffle" m'a fait l'effet d'un coup de canon !

Qui en est l'auteur ? Qui peut bien dire une chose pareil à l'époque du tout jetable ? Je ne suis donc pas seul à prôner la capitalisation des acquis !

Heureuse surprise, car si j'ai découvert avec émerveillement et respect le travail de Dave Shea, notamment pour la création de Zen Garden, le même Dave est l'auteur de cette phrase : Everything old is new again !

Article original : CSS Sprites: Image Slicing's Kiss of Death, traduit chez Pompage.net.

Le site de Dave Shea.

xuéUne rose découverte dans un buisson de l'école (13 mai 2006)

Poésie, charme et musique pour cette "Petite feuille de style"Arablack de Pointe-à-Paris.

xuéPour ceux qui en doute ! (18 mai 2006)

La mémoire du Web : Fais gaffe ! T'es sur le net !.

xuéAccessibilité maximale et Images mentales (2 juin 2006)

La recherche d'une accessibilité maximale du WEB, pour les déficients visuels notamment, a réveillé la mémoire du dinosaure et m'a projeté à une trentaine d'années dans le passé. A l'époque, Michel Denis, du coté de Nanterre et Villetaneuse, parlait d'images mentales. Happy day, Google me retourne les liens suivants sur les critères "denis et image mentale ". Je vous livre le bout de fil d'une immense et riche pelote sur le sujet : Communication Homme et Machine, images mentales, cognition, langage, traitement de l'information, systèmes naturels et artificiels, génération d'images mentales à partir de descriptions verbales : Michel Denis, directeur de recherche au CNRS.

Perception de la structure d'une page Web par un handicapé visuel : Tentative d'explication par Laurent Denis.

xuéExpériences de référencement. A suivre!

Si vous voyagez en Périgord, faites une halte au Restaurant "La Gabarre" à Saint Julien de Lampon en Dordogne. Charme de la demeure du XII ème siècle, délices des mets et accueil chaleureux.

Cynthia Moos : Nouveaux Médias, Stratégie et Communication Politique, Master Management de Projet.

Marianne et Régine : Librairie Grenier Abondance, à Salon de Provence.

Le book d'un directeur artistique: Nicolas Le Brun Photographe, 20 ans de clichés.

Maison en Périgord A VENDRE, 24370 Saint Julien de Lampon.

Alexandra Trey, naturopathe en Provence, Vous aide à conserver ou retrouver l'énergie vitale de votre corps et de votre esprit.

Colloque-TV met en ligne les vidéos de vos séminaires, congrès et colloques. Faire vivre vos colloques ou congrès en vidéo pour mieux diffuser vos idées. Visionner, en direct, en différés ou sur mesure, vos séminaires, évènements scientifiques ou manifestations culturelles.

xuéRetour aux petits potins

Haut de page

Sommaire

Comprendre le Word Wide Web, xhtml et css

Comment céer un site WEB conforme, ergonomique et accessible à tous ?

Ce site n'est pas un cours mais une plate-forme de conseils et de ressources pour débuter la création d'un site WEB. Créé en 2006, il est constamment actualisé pour offrir au travers de plus d'une centaine de liens sélectionnés pour leur qualité et leur pertinence des informations à jour.

Cette page s'adresse plus particulièrement aux non-informaticiens, managers, décideurs de petites entreprises, PME-PMI, élus locaux qui souhaitent comprendre comment fonctionne le Web ou aux débutants en informatique, webmaster junior désirant progresser dans la réalisation d'un site WEB conforme, ergonomique et accessible à tous.

Les associations, communes, mairies, collectivités locales ou territoriales, trouveront dans l'école buissonnière, le support et la matière pour projeter leur futur site ou pour créer des activités de loisirs modernes et attractives : Découverte et initiation WEB , Club Senior, outils informatiques et multimédia, réalisation d'un premier site WEB.

Les plus avancés dans la connaissance du web trouveront certainement quelques petits bonheurs !

Sommaire central

1. Introduction

Vous savez cliquer et glisser avec la souris ? C'est parfait, ce sont les seules connaissances requises en informatique pour lire cet article !

Pour mieux se comprendre, les mots techniques, abréviations, acronymes sont soulignés (comme cela) et vous pouvez en savoir plus, dans la bulle, lorsque le point d'interrogation apparaît au passage de la souris sur ce mot souligné ! Sur le même principe, une petite main vous signalera un lien vers un autre point de cette page ou un autre site.

Voilà ! Maintenant vous pouvez revenir au paragraphe précédent en glissant avec la souris sur les mots (comme cela)... souris.... petite main ! OK ? Quelle découverte ! En plus vous pouvez découvrir ce que veut dire " Word Wide Web" dans le titre en glissant la souris dessus !

C'est bon ? Alors c'est parti, le reste n'a rien à voir avec une informatique de sauvage, vous allez tout comprendre !

Ressources documentaires

La base documentaire est divisée en deux parties.

La première partie, à tendance technique, se trouve dans le menu à gauche. J'ai tenté de mettre là tout ce qui me semblait incontournable pour élaborer une première réalisation Xhtml et CSSsur de bonnes bases et progresser ensuite.

La seconde partie, à tendance managériale, se situe à droite. Elle est accessible dans le désordre ou à partir de la mention "En savoir plus" des chapitres de ce document. Elle complète utilement les bases par des articles de fond qui permettront de mieux comprendre certains aspects de la communication, du design , de la technique et donc de mieux choisir sa stratégie WEB .

Quelque soit votre profil, je vous invite grandement à croiser vos connaissances, pour le plus grand bien de vos projets.

En complément de lecture vous pourrez consulter les rubriques de la colonne de droite "Décider et manager" , "Virus et autres hoax" , "A propos du Libre" et "Droits et obligations".

Au-delà, la rubrique "Rechercher" de la boite à outils du menu de gauche vous propose des liens vers "Wikipédia" l'encyclopédie libre et le dictionnaire francophone des acronymes, sigles et abréviations informatiques, qui répondront très certainement à votre curiosité.

Accessibilité

Un mot un peu trop à la mode, peut-être ! En réalité il s'agit bien de faire en sorte que le plus grand nombre d'internautes accède à notre site, je pense que nous sommes tous d'accord ! Il faut donc savoir qu'il existe des méthodes, des normes, des recommandations qu'il est souhaitable d'appliquer, au risque de ne pas être vu ou mal vu par un certain nombre de visiteurs, y compris les robots des moteurs de recherches.

C'est l'une des raisons de l'existence du World Wide Web Consortium ou W3C. Le W3C est un consortium fondé en octobre 1994 pour promouvoir la compatibilité des technologies du World Wide Web. Le W3C n'émet pas des normes, mais des recommandations.

Cette page a donc obtenu la validation du W3C pour Xhtml1-transitional et CSS. La reconnaissance par le plus grand nombre de navigateurs est donc assurée.

Rien n'étant cependant parfait en ce bas monde, cette page est optimisée pour Firefox et nous regrettons vivement les petits décalages qui pourraient, parfois, se produire avec d'autres navigateurs.

Pourquoi un site Internet ne serait-il pas accessible aux mal-voyants, je vous le demande ? En ce qui concerne les déficiences visuelles, nous avons observé cette page avec le navigateur "Lynx". L'accessibilité par synthèse vocale du menu et des textes devrait fonctionner. Nous obtenons le niveau de validation P1 pour l'accessibilité par l'organisme WebXact. Cependant, il subsiste encore quelques mises au point et divers tests pour obtenir la validation maximale "P3 Accessibilité". Toute remarque et suggestion seront les bienvenues. Dans tous les cas, le menu sera toujours présent et visible à gauche ou en tête de page en session audio.

javascript

Cette page contient du javascript . Si le menu en haut à gauche représente 8 cases, la fonction javascript est activée sur votre ordinateur. Dans le cas contraire, le menu et les sous-menus sont visibles en surimpression sur la page. Nous vous conseillons d'activer javascript, mais vous pouvez toutefois parcourir cette page sans activation, au détriment de quelques aspects pratiques ou esthétiques.

Définition écran

Cette page est exploitable à partir d'une définition standard de 640px X 480px dans un écran de 14 pouces. L'utilisateur pourra également dimensionner la fenêtre, à tout moment, selon son choix et bien naturellement la largeur de la colonne de l'article. Nous avons testé une largeur d'affichage comprise entre 550 pixels et 1280 pixels sans nuire à la lisibilité. Il semble qu'une définition de 1024px X 768px soit idéale.

Ouverture des fenêtres supplémentaires

Pour ne pas noyer le lecteur sous un déluge de fenêtres, tous les liens s'ouvrent dans la fenêtre active. L'utilisateur de Firefox saura choisir, à sa convenance, l'ouverture ou non d'un nouvel onglet.

Haut de page

Sommaire

2. Objectifs

Un article pour qui ?

Elu local, dirigeant de petite ou moyenne entreprise, manager, expert dans un domaine étranger à l'informatique, webmaster, bricoleur en informatique, vous êtes curieux d'en savoir plus. Cette page, intitulée l'école buissonnière vous propose sous forme ludique une source pratique d'informations et de liens multidisciplinaires afin de mieux comprendre le sujet, réaliser ou faire réaliser, en toute connaissance de cause, votre site web

Cet exercice de conception enCSS et Xhtml a pour but de servir d'exemple aux webmasters débutants et de donner également une idée aux managers de ce que peut obtenir un débutant après avoir pataugé "un bon mois" dans le code. Il ne s'agit donc pas d'un cours, mais plutôt d'une référence applicative de synthèse des meilleurs tutoriels pour débutants qui sont cités dans la rubrique "Bases incontournables" du menu .

Un article pourquoi ?

Selon le bon vieux principe de la capitalisation des acquis, j'ai pris l'habitude, depuis de nombreuses années, de consigner dans des cahiers d'écolier, à peu près tous les événements de mon environnement professionnel.

Je débute donc ce nouveau sujet, sans perdre les vieilles habitudes !

Finalement, il s'agit de noter, consigner, mémoriser tous les concepts, trucs, idées qui ont permis la réalisation de cette page xhtml et CSS , de rassembler toutes les sources pour y revenir rapidement afin de reproduire aisément dans d'autres réalisations ce que nous avons acquis dans la souffrance, le désespoir et les joies de l'ignorant !

Observer, comprendre, assimiler, documenter, intégrer, capitaliser. OCADIC !

En savoir plus : Les sources des exemples de cette page !

Haut de page

Sommaire

3. Base de départ

Un prof adorablement décalé

Pour les CSS, tout a commencé le 17 mars 2006 par un message à Pascale Lambert, Professeur de maths-sciences, sur son site "Mammouthland " :

" Bravo, merci... pour votre site... depuis 5 heures que j'y suis, j'ai compris, expérimenté et réalisé des transpositions de mes html en CSS ... bonnes explications, bonnes syntaxes, bons exemples, bon tout quoi !

Une base d'analyste

Si j'ajoute que j'ai commencé à mettre le nez dans le code dans les années 65, c'est juste pour caler les choses ! J'en suis sorti en 1980 pour ne plus jamais être informaticien de métier !

Puis, comme beaucoup dans les années 90, la démocratisation du WEB et la vulgarisation des logiciels nous conduisent à entrer dans la toile et le multimédia. Mes premiers balbutiements datent de 96 et mon premier site de 1998 !

Haut de page

Sommaire

Une passion : La simulation

Je me retrouve en 1999 à l'abordage de la simulation ludique pour flirter avec Flight Unlimited et Fly .

La montée en puissance de la simulation ludique ouvre vers 2002 des horizons jusque là inespérés.

Dans ce contexte, je crée en 2003 le site " Réalité & Simulation " axé plus particulièrement sur la simulation ferroviaire, la nature, la forêt et les arbres. La finalité n'est pas la réalisation d'un site mais des décors pour les jeux de simulation.

La conception de ce site est réalisée à base de tableaux. Fin 2005, je m'interroge sur les possibilités d'évolution : CSS , Xhtml , Xml , Spip, PHP , MySql , je me dote de la panoplie des outils idoines, d'un hébergeur et du plan de formation qui va avec en commençant par Html.

Une référence : Neville Brody

Par nature plus graphiste que technique, je suis terriblement frustré par la pauvreté et le résultat des réalisations Html , a fortiori sur des navigateurs différents.

La découverte

Je recherche désespérément l'équivalent de ma référence "papier", Neville Brody , dans le contexte WEB .

Je découvre alors les "feuilles de style en cascade" CSS et Zen Garden

Haut de page

Sommaire

4. Principes

Désolé mais j'aime l'ordre et les principes ! Et si j'aime également le désordre c'est pour mieux le structurer mon enfant !

La préhistoire

Ici, je fais référence à de nombreux points qui ont existé avant le WEB , mais restent d'actualité. Pour les plus jeunes je précise qu'avant la télé il existait la radio et le cinéma, avant la pub, les réclames, avant la star'ac, les crochets radiophoniques. Tout cela c'est bonnets blancs et blancs bonnets ! Enfin bon, le caveau de la Huchette dans tout cela, existe-t-il encore ?

La technologie évolue, plus vite que les mentalités, mais culturellement depuis quelques milliers d'années nos références sont sensiblement identiques !

Un nouveau pape est appelé "Araignée"

Attention je ne fige rien, j'ai écrit "sensiblement identique" ! Tout le génie des hommes, ou des femmes d'ailleurs, de communication d'aujourd'hui est de repérer ce "petit je ne sais quoi " qui fait la différence !

Voyez les sites exemples de la colonne de droite et imaginez votre cible WEB . Elle roule en Cayenne, porte la dernière alliance de chez Boucheron, un string de chez Dior et fait ses courses chez Aldi ! Question : Va-t-elle acheter ses CD à la FNAC ou chez Virgin ? Si vous avez vingt ans que vous formulez une stratégie intelligente pour répondre à cette question, vous avez de très grandes chances de devenir le nouveau pape de la communication dans vingt ans !

Revenons sur terre

En ce qui concerne le WEB , nous n'échappons pas à la règle. Bien avant que celui-ci n'existe, dans tout domaine, les principes minimums d'organisation suivants devaient être étudiés :

  • Le menu ou les clés d'entrée.
  • Le poids ou le support utilisé.
  • Les couleurs ou la structure de présentation générale.
  • L'accessibilité ou le mode d'appropriation de l'information.

Développons ci-après.

Haut de page

Sommaire

5. Le menu : Pierre angulaire d'un site

Le menu : Qu'il s'appelle sommaire, index ou table des matières, est absolument nécessaire pour fournir au lecteur un fil conducteur qui lui permette de se diriger au travers de l'information présentée.

Oh! My ghost !

La pierre angulaire d'un édifice, au sens physique du terme, est une pierre dont la fonction fondamentale est de maintenir l'équilibre général des forces d'une construction, d'un bâtiment, d'une voûte notamment. L'absence de cette pierre angulaire implique une absence de construction.

En clair, un site sans menu est un non-site, un ghost, une chimère.

Pouvons-nous dire qu'un menu sans site peut exister ? Je vous laisse y réfléchir !

Synthèse, priez pour nous !

Cela étant dit, il me semble que la première démarche d'une construction de site, comme beaucoup d'autres réalisations, est la construction d'un plan et d'une synthèse que l'on peut nommer dans le cas présent : Menu.

Il existe des méthodes pour organiser et structurer ces sujets dont vous trouverez un échantillon dans la colonne de droite. Il est clair que cette étape est primordiale.

En savoir plus : Organiser et structurer.

Haut de page

Sommaire

6. Le poids : L'élégance d'une page

Le poids est soit physique lorsqu'il s'agit d'un livre, d'un hebdomadaire, d'un quotidien ou temporel (le temps de chargement) lorsqu'il s'agit d'une page WEB . Le poids c'est à dire la quantité d'information essentielle et subalterne, nécessaire et suffisante pour permettre au lecteur d'atteindre l'information recherchée afin de choisir et décider.

Gardez le rytme : Des noires, des blanches et des rondes !

Ce poids doit être proportionnel ou subjectivement inférieur à l'idée que s'en fait le lecteur pour s'approprier cette information et, paradoxalement, correspondre également à la croyance populaire figée dans le dicton : " J'en veux pour mon argent ! ". C'est frustrant en première approche, mais terriblement jouissif à mettre en œuvre ! Vous n'imaginez pas vendre un objet de luxe avec une simple page perso ! Regardez bien comment Boucheron a résolu le temps d'attente du "Loading". Comparer ensuite à Studio Line pour L'Oréal qui utilise la même technologie flash !

Ils sont fous ces Romains !

Un exemple concerne le prix de vente subjectif d'un objet. On peut facilement fixer un prix de vente à partir du prix de revient. Mais faut-il vendre à ce prix "comptable ". Une expérience menée à partir d'un objet dont le prix de vente fixé à 10 € (pour l'exemple)et donnant une marge très confortable, n'était pas acheté. L'on mit en place un panel de clients potentiels pour évaluer le prix auquel ils accepteraient d'acheter l'objet en question. Surprise ! Le prix d'achat accepté se situait entre 25 et 30 € ! Un prix de vente à 10 € induisait chez les clients potentiels testés un réflexe de méfiance sur la qualité intrinsèque de l'objet !

Cela ne s'invente pas et les associations de consommateurs ont encore beaucoup de travail d'information à faire !

Vous trouverez en colonne de droite les sites de Boucheron et Porsche. Amusez-vous à comparer les présentations de deux objets de valeur marchandes en euros sensiblement identique dont l'un pèse moins de 50 grammes et l'autre presque 3 tonnes. Voyez ensuite les produits de consommation plus courante.

On a toujours besoin de petits pois chez soi

Comme par ailleurs le "poids WEB " est l'ennemi de la bande passante et en finalité de la vélocité de votre présentation, il y a donc lieu d'activer ses neurones pour organiser et optimiser nos programmes afin que les informations transmises vers l'utilisateur, comblent ses attentes. Je nomme cela "l'élégance d'une page " !

Conseil pratique : Tester votre page sur un vieux PC à 233 Mhz avec un modem à 56 Kbps .

En savoir plus : Combien ça pèse ?

Haut de page

Sommaire

7. Les couleurs : Le charme d'une page

Les couleurs ou l'absence de couleurs : Jouer avec les couleurs c'est la martingale du graphiste. Vous décuplez la force de votre message ou vous l'anéantissez. Mais ici il n'y a pas de hasard, consultez plus tard les références de la colonne de droite.

Créer un site, c'est pas le casino !

Le charme, n'est-ce pas cet état qui vous fait adhérer ou non, a priori, sans raisonnement logique ? Ne dit-on pas tomber sous le charme ?

Quinze secondes de drague et c'est tout !

Sûrement, mais vous avez 15 secondes maximum pour que le charme de votre page WEB exerce ses effets. Si pendant ces 15 secondes votre temps de chargement se compare à une course de bœufs, si votre menu est insipide et votre message incompréhensible, adieu le visiteur !

Ajuster votre présentation à votre visiteur !

Avez-vous observé la signification des couleurs pour différents pays ? Vous en déduisez quoi ? Que l'utilidation des CSS peut répondre à cet objectif d'adaptation ! Captez l'information du pays d'origine de votre visiteur et présentez-vous selon ses concepts de base !

Oui d'accord ! Mais ça sert à quoi les CSS, en pratique ?

Ok ? Vous êtes de ceux qui aiment bien toucher pour comprendre ! Pas de problème ! Nous allons donc toucher, mais avec les yeux seulement !

Avant de passer aux actes, il serait souhaitable de travailler, comme le dit Pascale sur son Mammouth, avec un navigateur décent, pardon récent !

Donc, si vous avez Firefox, sautez ce paragraphe, sinon, à partir du logo Firefox (en haut à droite) téléchargez ce navigateur gratuit et revenez dans dix minutes ici. Pensez à faire un point de restauration avant toute manipulation sur votre machine, on ne sait jamais !

Mon style, à moi !

Allons-y ! Dans la deuxième barre de votre navigateur Firefox, à partir du haut, cliquer sur "affichage " puis dans la fenêtre qui s'ouvre sur "style de la page ". OK ?

Vous devez voir les propositions suivantes : Aucun style, Normal (avec un point devant), ALT01, ALT02.

Maintenant vous pouvez jouer ! Choisissez l'une des quatre propositions et voyez le résultat !

Le style ALT01 ajoute une mire verticale (jaune et noire) de 750px X 10px au pas de 50px située à gauche et une mire horizontale (blanche et noire) de 1000px X 50px au pas de 50 pixels située au bas de cette page. Cette mire horizontale comporte en outre les références colorimétriques RVB et CMYK.

Le style ALT02 (perfectible) est radicalement différent, pour montrer un autre style, quant à " aucun style " c'est comme son nom l'indique !

Etonnant non ?

Juste un peu de théorie !

Ainsi, CSS est utilisé pour définir les couleurs, les polices, le rendu, et d'autres caractéristiques liées à la présentation d'un document. L'objectif est de bien séparer la structure (écrite en HTML ou similaire) et la présentation (en CSS) du document. Cette séparation fournit un certain nombre de bénéfices, permettant d'améliorer l'accessibilité, de changer plus facilement de structure et de présentation, et de réduire la complexité de l'architecture d'un document. Enfin, CSS permet de s'adapter aux caractéristiques du récepteur.

HTML ne décrit que l'architecture interne, et CSS décrit tous les aspects de la présentation. CSS peut définir couleur, police, alignement de texte, taille, position, mais aussi le formatage non visuel, comme la vitesse à laquelle le document doit être lu par des lecteurs de texte.

Conseil pratique : Apprenez à faire des images en 8 couleurs.

En savoir plus : Des couleurs et des maux !

Haut de page

Sommaire

8. L'accessibilité : Le respect de son lecteur

L'accessibilité est la possibilité pour le plus grand nombre de lecteurs de s'approprier toute l'information disponible. C'est une évidence, mais est-elle bien comprise ?

Et si les déficients étaient parfois les concepteurs ?

Certes, les personnes atteintes de déficience visuelle doivent pouvoir accéder à l'information disponible à partir des nouvelles technologies, mais les autres ? Quinze pour cent des utilisateurs posséderaient un écran en 800x600 et 50% en 1024x768. Il y a aussi les jeunes qui cliquent partout, les plus anciens qui ont du mal à cliquer, les gauchers, les droitiers, les daltoniens, et puis tous ceux, et ils sont nombreux, pour qui l'ordinateur est une espèce de martien !

L'accessibilité n'est pas uniquement une question de matériel ou de logiciel. L'ergonomie d'un site est primordiale pour l'accessibilité. Un foisonnement de gif animés, des typos multiples et mal adaptée en taille, des couleurs flash, des lignes de textes fixes trop longues ou trop courtes n'ont jamais été la référence en matière d'ergonomie.

Finalement, comme dans la publicité ou d'autres domaines, il faut s'interroger sur sa cible. Qui est mon lecteur ? Qui est mon client ? A quelle CSP appartient-il ? Tout cela pour viser juste, c'est à dire approcher la certitude que le message que nous souhaitons faire partager sera bien reçu !

La couleur des mots !

Une autre approche des déficiences visuelles. Tout ce qui vient d'être dit, y compris sur les couleurs, est valable pour tous. A la nuance près qu'il peut sagir de la couleur des mots. Il existe un texte derrière le logo de cette page, invisible pour les voyants, mais susceptible d'être écouté. Faite le test vous-même, rechercher les poèmes dont la couleur des mots s'harmonise avec vos images, fermez les yeux et écoutez votre site !

En savoir plus : Découvrir et comprendre l'ergonomie.

Haut de page

Sommaire

9. Conclusion

Si vous avez lu et parcouru avec plaisir cet article, j'en suis très heureux. A l'inverse, votre point de vue m'intéresse. Dans tous les cas, je serais curieux de connaître votre avis.

Mais comme il faut absolument conclure, je peux au moins vous dire une chose : Je sais que je ne sais pas et que j'ai encore beaucoup à apprendre et à comprendre! J'ai déjà dans la tête une suite à cet essai ! Accessibilité, traduction, imagerie, et des tas d'articles à lire chez OpenWeb et PompageNet.

Finalement, faire l'école buissonnière c'est super ! On apprend plein de choses, et je me refuse à imaginer que c'est uniquement parce que les Mammouths savent parler aux Dinosaures !

Dommage que les prof ne soient pas tous comme Pascale, qui sait communiquer l'envie d'apprendre, même dans les buissons ! Dis nous Pascale, tu veux qu'on le rencontre ton inspecteur ?

Haut de page

Sommaire

10. Remerciements

J'adresse mes remerciements les plus chaleureux à tous ceux de mes amis qui ont su par un mot, une phrase ou une page me transmettre une critique constructive et des encouragements pour l'école buissonnière. Ils représentent un large éventail de professions et d'activités. Ils ont en commun de ne pas être techniciens de la chose informatique !

Alain, Alphonse, Candide, Catherine, Charles-Edouard, Christophe, Claude, Gérard, Guillaume, Grégoire, Ingrid, Janine, Jean-Claude, Jean-François, Jean-Louis, Jean-Pierre, Maryvonne, Maurice, Michel, Michelle, Nathalie, Pascale, Raphaël , Roland, Rose-Marie, Sylvain, Sylvie, Stéphane, Stéphanie, Thibaut, Viviane

Et mes cordiales salutations à ceux qui sont cités en liens dans cette page, pour leur apport à la réalisation de cet exercice :

Guillaume MOREL, ABChine, Gérard Caron, Admirabledesign, Olive, Chine Nouvelle, Sylvain Machefert, Iubito's, Pascale Lambert-Charreteur, Mammouthland, Laurent Denis, Fabrice Bonny, Tristan Nitot et toute l'équipe, OpenWeb. Toute l'équipe de traducteurs de Pompage Net, Pompage Net, Benjamin Chartier, pour la "Boite à couleurs" et Yan Bilik pour Pourpre.com, Julien éLIE, Trigofacile, Vincent, Veblog, Vivianne Lamarlère, Voyages en poesie, Pierre Gougelet, XnView, Michael Meadhra, Builder.com pour ZDNet.fr, Zdnet, Dave Shea, Nicolas Steenhout, Marie Alhomme. et toute l'équipe, Zen Garden

Haut de page

Sommaire

11. Crédits, Iconographie et droits réservés

Cette page de sensibilisation au WEB trouve son origine dans l'expression d'un "Groupe de projet". Ce groupe, constitué au sein d'une commune de 512 habitants, souhaite réaliser le site informatique de son village.

Cette page est rédigée sous l'entière responsabilité de son auteur, titulaire du domaine "decineweb". Elle ne collecte, ni n'enregistre aucune donnée à caractère personnel. Elle ne fait aucune publicité et ne propose aucun produit à la vente. Les marques et noms de société utilisées en illustration des propos appartiennent à leurs ayants droit et sont cités en toute indépendance sans lien contractuel.

A l'exception des points particuliers indiqués ci-après, l'ensemble de ce document, c'est à dire tous les fichiers qui le composent, est sous licence "Creative Commons" de type : Paternité, pas d'utilisation commerciale, partage des conditions initiales à l'identique.

Les courtes citations utilisées font mention de leur auteur et sont utilisées dans le seul but de conduire le lecteur vers leur site.

Exceptions

"Les coquelicots" sont reproduits avec l'aimable autorisation de Isabelle Desevedavy, artiste peintre à Montpellier. Aucune reproduction ne peut être réalisée sans son autorisation écrite .

Le titre "L'école buissonnière" associé aux idéogrammes chinois tào et xué et le personnage "ciao" sont réservés exclusivement à l'utilisation de leur auteur. Decine ©2006

La petite annonce relative à Firefox est sous licence "Creative Commons" Paternité, pas d'utilisation commerciale, pas de modification.

Daniel Choquet, 16 avril 2006.



12. Actualités : petits potins en forme de post-sriptum

5 novembre 2010

A propos de référencement et de recherches

Si le référencement est complexe, c'est avant tout du bon sens. C'est fou! Il y a encore des webmasters qui dupliquent leur site en .com .fr .net
Un essai de bloc de recherches personalisées avec Google

Voir recherche sur les thèmes de l'école buissonnière

7 Octobre 2010

Objectif qualité sans compromis

A notre époque les gens qui oeuvrent dans la création de site web sont nombreux. Il est difficile de séparer le bon grain de l'ivraie. Si vous tapez "css html école" sur google, l'école buissonnière est vraisemblablement en tête. Souriez et prenez cela comme un exemple de référencement naturel ! Le vieux dinosaure que je suis rencontre parfois de jeunes talents.
Intégrateur web, html et css, création de site web en Provence - PACA, contactez Aurélie Malochet sur son site, am-creation, spécialiste en intégration XHTML et CSS2, une pro du web !

2 Octobre 2010

La référence du cordonnier

Les cordonniers sont toujours les plus mal chaussés ! En plus Html5 et CSS 3 à voir absolument ! Un grand merci à Olivier Andrieu pour son site Abondance et ses conseils sur le référencement naturel. Voyez éventuellement les expériences de la colonne de droite.

15 juin 2010

Après l'été

Je sens que je vais faire le ménage et mettre toutes ces choses dans une structure plus élaborée en ajoutant, bien sur, les expériences de 4 années de "bricolage". A+

13. Recherche sur les thèmes de l'école

Avec Firefox / IE8 / Safari, [CTRL + F] pour trouver le terme précis de votre recherche dans la page.

Recherches basées sur : abondance, am-creation, ergolab, mammouthland

Loading



Haut de page

Sommaire