Avant que le sable du désert n’enraille l’objectif de mon reflex ; j’ai traîné mes chaussures trouées sur les routes en évitant soigneusement les cars de touristes.

Voici donc une petite sélection de photos, mise en ligne grâce au plugin flash d’Andrew Berg’s

Vous verrez l’ordre :

• Tunis : la médina déserte (ramadan oblige).
• Sidi Bou Said : la plage et la vue de Tunis depuis .
• Tozeur : sa Palmeraie (j’ai appris que les dattes poussent sur les palmiers) son oasis et sa vieille ville faites de biques d’argile.
• La route de Tozeur vers Kebili.
• Zafrane : La piscine de l’hôtel et ses sirènes.
• Le désert : son guide indigène ses chameaux.

Voir toutes les photos.

Parcours :

Ce document s’adresse aux maîtres d’œuvre et aux maîtres d’ouvrage.

Le maîtres d’œuvre habituellement appeler MOE est le garant de la bonne réalisation technique des solutions. Il s’agit généralement d’un ingénieur, un créatif, un freelance…

Le maîtres d’ouvrage habituellement appeler MOA est la personne qui gère les besoins fonctionnels initiaux, le financement, le planning… Il s’agit généralement d’une entreprise, d’une association…

Nous n’allons pas apprendre techniquement comment créer un site web, mais je vais vous donner des bonnes pratiques pour gérer au mieux votre projet.

Ce document vise à permettre au maître d’oeuvre de chiffrer les besoins et de proposer une planification. L’objectif pour le maître d’ouvrage est de comprendre la logique de progression du projet.

Un petit peu d’organisation permet de gagner beaucoup de temps

Introduction : Il est fréquent que la réalisation d’un site Web prenne du retard. Les causes sont généralement la mauvaise visibilité d’évolution du projet ou des incompréhensions dans les dates de remise de documents. Mais avec un peu de méthode et des points réguliers, le maître d’ouvrage gagne en visibilité et le maître d’oeuvre reçoit moins de demande de modification non prévues.

Cette méthode est découpée en 6 étapes. Chaque étape est indépendante, on ne passe d’une étape à l’autre qu’une fois la précédente validée par l’ensemble des acteurs du projet. On ne peut donc modifier les documents issus d’une étape validée sans augmenter le coût de développement.

Etape 1 Spécifier les besoins

Le maître d’ouvrage doit vous apporter toutes les pièces nécessaires à la compréhension de son projet.

Voici une liste de question qui permettra de clarifier le projet :

Besoins Fonctionnels

Objectif du site
Quel est la nature du site ? Un site vitrine ? Un site catalogue ? Un site d’information ? Un site marchand ? Un site personnel (blog) ? Un site communautaire ? Un portail ? Un site intranet ?
A quel public est il destiné ? Informaticiens chevronnés ? Utilisateurs occasionnels ? Utilisateurs ayant reçus une formation particulière ?

Design & Ergonomie
Faire la liste des termes qui décrivent le mieux l’aspect de votre site Web
Aspect général du site : Classique ? Moderne ? Jeune ? Sérieux ? Dynamique ? Original ? Etc.…
Idées à mettre en avant : Corporate ? International ? Humain ? Multiculturel ? Etc.…
Faire la liste des termes qui décrivent le mieux ce que vous souhaitez mettre en avant au travers de votre site
Y a-t-il une charte graphique à respecter (ex : dérivé du site institutionnel) ou de laquelle il faut s’écarter (ex : site d’un concurrent) ?
Existe t-il un logo ? (Demandez le au format vectoriel (EPS, AI, SVG)
La com utilise t’on elle une police de caractère particulière ?
Fournir la liste des sites de références ou dont le design correspond à ce que vous aimez (que ce soit ou non dans le même secteur d’activité)
L’aspect graphique n’est pas tout à fait le même selon les navigateurs. Quelle est la version des navigateurs dont il faut assurer la fonctionabilité ?
Accessibilité ? Quelle va être la résolution minimum de l’écran ? Organiser (Palm…) ? téléphone ?
flux rss ?

Contenu du site
Quel nom de domaine ?
Texte ? Images ? Photo ? Musique ? Vidéo ?
Présence d’animations ?
Le site est il statique ou dynamique ?
Nécessite-t-il un BackOffice ?
Sous quelle licence le contenu sera-t-il diffusé ?

Services Annexes
Mailing Liste ? emails ? Mail collecteur ? Anti-Spam ?

Vous devez commencer à avoir une vue d’ensemble du projet. Il ne vous reste plus qu’à rediriger un document avec les spécifications fonctionnelles.

Besoins techniques.

Serveur
Quel est l’espace de stockage nécessaire au projet ?
Pouvez-vous évaluer la bande passante nécessaire ?

Langages
Avez vous besoin d’utiliser un langage web ? Php ? ASP ? Actionscipt ?
Avez-vous besoin de base de données ?
Avez-vous un avantage a utiliser un CMS ? Open source ? Gratuit ou payant ?

Vous pouvez alors produire un cahier des charges, un scénario de navigation et le devis. Une fois tous ces documents validés passez à l’étape suivante.

Etapes 2 : Concevoir le design et l’ergonomie (à venir)

Prérequis : Ce tutorial nécessite de connaitre la syntaxe CSS et (X)HTML.
Compatibilité : MSIE 5, 5.5 et 6, Mozilla, Firefox

Un pop-up est une petite fenêtre destinée à offrir à l’utilisateur un complément d’information.

Un pop up se manifeste par le survol (ou le clique) d’un mot ou d’une image.

Un pop-up sur le web est l’équivalent de la « note de bas de page » d’un livre.

Malheureusement les pop-up sont surexploités pour afficher des bannières publicitaires intempestives. Un nombre croissant d’utilisateurs utilisent, à raison, un logiciel tierce ou les options de Firefox afin de bloquer les pop-up.

Alors pop-up ou pas ?

Il serait dommage de nous priver de cette fonctionnalité, et les CSS nous permettent de se passer du javascipt (et donc des programmes anti pop-up).

Exemple :

Un nuage un nuage est une masse visible de gouttelettes d’eau ou de cristaux de glace en suspension dans l’atmosphère. de lait, une petite quantité de lait versée dans du thé ou du café.

le code (X)HTML

1
2
3
4
5
6
7
8

 
Un <a class="popup" href="#"> nuage <span
class="comment"> un nuage est une masse visible de gouttelettes d’eau
ou de cristaux de glace en suspension dans l’atmosphère.</span></a> de
lait, Une petite quantité de lait versée dans du thé ou du café.
 
<a class="popup" href="#"><img src=nuage_miniature_img_3190.jpg" /><span
class="comment"><img src="nuage_img_3190.jpg" /></span></a>

le code CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/* popup full CSS */ 
.popup{
text-decoration: underline;
position: relative;
}
 
.popup:hover{
background-color: transparent;
text-decoration: none;
}
 
.popup span.comment{
visibility: hidden;
text-decoration: none;
z-index: 10;
left: -1000px;
position: absolute;
}
 
a:hover.popup span.comment{
top: 0px;
left: 0px;
visibility: visible; /*rend visible la classe "comment" lors du survol d'une div de class popup*/
}
 
a .popup span:hover.comment{
visibility: visible; /*rend visible la classe "comment" lors du survol d'une div de class popup*/
}

Attention si vous créez un pop-up sur une autre balise que <a>, votre code sera correct, mais il ne fonctionnera pas avec IE Navigateur de Microsoft Internet Explorer, utilisé par 80% des internautes qui ne respecte pas les standards du W3COrganisme chargé de normaliser les technologies Internet.

Pour aller plus loin je vous conseil l’excellent livre CSS 2 : Pratique du design web : de Raphaël Goetter

Photographie réalisé avec Karm de Shacra Record pour illustrer une de ses compositions

Musique sur le texte “Le Calumet de Paix” de Charles Baudelaire