Comment est fait le swc5

Les différentes parties
Les pages dynamiques
Les horloges
Les compteurs
Les infobulles
Le menu déroulant des horloges
Le flux RSS
Le titre animé
Les cookies

Les différentes parties.

SWC5 est composé de plusieurs parties : une pour le titre, une pour le menu de gauche, pour le menu de droite, pour le pied et enfin pour le contenu qui se trouve au centre.
Ces parties sont mises en places avec du CSS.
C'est-à-dire avec du style.
Il existe plusieurs façons de créer une page avec des parties bien distinctes :

• Les cadres.
  Les cadres sont faciles à manipuler, à mettre en place et la navigation à l'aide de cadre est très rapide.
  En effet, lorsque l'on utilise des cadres, on peut ne recharger, par exemple, que le contenu, si l'on veut chager de page, ce qui évite de recharger l'ensemble de la page soit le titre, les menus, le pied, etc...
  Cependant, les cadres ont plusieurs défauts majeurs, transparent pour le visiteur.
  La mise en page à l'aide de cadre n'est pas reconnue (comprenez valide) pour le W3C.
  La mise en page à l'aide de cadre pose de très gros problèmes pour le référencement, même si le site n'est composé que d'une page.
• Les tableaux.
  Les tableaux sont aussi un moyen simple de faire de la mise en page avec des parties bien distinctes comme ici.
  La manipulation est plus difficile que celle des cadres mais il n'y aucun obstacle au référencement.
  Cependant les tableaux ne doivent pas être utilisés pour la mise en page, ils ne doivent servir qu'aux tableaux.
  Une mise en page à l'aide de tableaux n'est pas valide pour le W3C.
• Le CSS.
  Le CSS (Cascading Style Sheet ou feuilles de style en cascade) est désormais le standard pour donner du style à une page html.
  Le CSS sert à donner de la couleur, à donner une place aux éléments, une taille et beaucoup d'autres choses.
  Utiliser une feuille de style facilite la gestion du style d'un site puisse que la feuille contenant le style peut-être située n'importe où sur internet.
  Par exemple je pourrais très bien utiliser le style de microsoft.com pour mon site web.
  Cependant, même si le CSS est le standard pour aujourd'hui et pour longtemps, il est encore mal géré par certains navigateurs.
  En particulier les anciennes version d'Internet Explorer de microsoft. On trouve une gestion presque correct des CSS à partir de Internet Explorer 7.
  Aussi, positionner des éléments s'avère plus difficile qu'avec des cadres ou des tableaux, mais avec la standardisation (pour laquelle nous pouvons remercier le W3C), cela va aller en s'arrangeant et les sites conçus avec du CSS garderons le même affichage au moins 2 décennies.

Les pages dynamiques.

Sur swc5 les pages sont dynamiques. C'est-à-dire que l'on va toujours garder les parties comme le pied, les menus et le titre, seul le contenu changera. Cela évite de réécrire la page complète pour chaque document (page d'accueil, page d'explication ci présente...).
Sur swc5, la page sera changée suivant le lien sur lequel on clique, grâce à l'URL(Uniform Resource Locator) qui transportera la valeur correspondant à la page demandée.
Par exemple, quand vous avez cliqué sur le lien "Explications", vous avez en fait demandé d'afficher "index.php?page=fichier/pages/explication.php" .

• index.php est la page contenant le titre, les menus, le pied et le document affiché dynamiquement (ici explication.php).
• ?page= indique la valeur de la variable "page" passée dans l'URL.
• fichiers/pages/explication.php est la valeur de la variable "page", celle ci comprend le chemin vers le document que vous souhaitez afficher

Les horloges.

Ici plus de 60 horloges différentes sont proposées. Evidement, ceci n'a de sens que pour une page de démonstration comme celle ci.
Toutes les horloges ne sont pas sur le même serveur. Certaines sont sur le serveur hébergeant le site http://www.cclleemm.com, d'autres sur le serveur hébergeant http://www.clocklink.com et d'autres sont sur le serveur hébergeant swc5. Ces dernières sont des modèles proposées par le site La tanière du loup. L'auteur partage et propose ses création sans aucune contrepartie, sans qu'une pub s'affiche si on met le pointeur de la souris sur l'horloge. Ceci est admirable et je le remercie particulièrement pour son esprit et la qualité de ses créations.
L'avantage d'héberger soit même ses horloges est la disponibilité. En effet, l'affichage du site n'est pas dépendant de sites extérieurs.

Les compteurs.

Comme pour les horloges, certains compteurs sont situés sur des serveurs distant et d'autres sont sur l'ordinateur que vous êtes en train de visiter actuellement.
L'intérêt d'héberger soit même ses propres compteurs est encore plus évident que pour les horloges, en effet, il ne s'agit pas ici simplement d'une disponibilité qui enjolive, il s'agit aussi de disponibilité des données. Ce serait assez génant de perdre un compteur qui a un an. Revenir à zéro visiteurs alors que le compteur affichait 462000 serait plutôt dommage.
Cependant, heberger un compteur est un peu plus compliqué car des données (les comptes) doivent être écrites soit dans un fichier soit dans une base de données.
Ce qui implique de donner des droits d'écriture au logiciel serveur dans le fichier (ce qui n'est pas toujours évident à négocier avec l'hébergeur mais ne pose pas de problème si l'on est le propriétaire du serveur), soit de créer une base de données.
De nombreux scripts de compteurs sont disponibles sur internet si l'on a la flemme de créer le sien.

Les infobulles.

Vous avez remarqué que quand votre pointeur passe sur un lien permettant de choisir une horloge une petite photo apparait, de même pour le bouton "statistique" situé dans le menu de droite.
Le cadre apparaissant se nomme infobulle.
Il existe plusieurs méthodes pour créer une infobulle, la plus courante étant le javascript. Le javascript permet de créer des effets très sympathique comme par exemple une ouverture progressive, une ouverture animée... Cependant, d'après les statistiques, 10% des internautes désactivent le javascript, ce qui leur interdit de voir apparaitre les infobulles.
C'est pour cela que j'ai choisie le CSS pour l'affichage des infobulles. Ainsi, tous les visiteurs ont le même affichage.
Personnellement, je réserve le javascript aux formulaires, celui permettant d'effectuer un premier traitement du formulaire vérifiant si l'adresse mail est valide, si tel ou tel champs à été compléter, etc, avant de réellement envoyer le formulaire et de le traiter avec du php (langage de programmation fonction côté serveur).

Le menu déroulant des horloges.

Le menu déroulant utilisé pour les horloges dont on peut selectionné la couleur est fait avec du CSS et un peu de javascript pour Internet Explorer 6 et antérieur.
Comme pour les infobulles, utiliser du CSS est plus complexe que le javascript mais permet à tous les visiteurs d'avoir accés au menu complet.
Il est possible avec ce type de menu de créer des sous-menu, des sous-sous-menus et même d'autres. On peut évidement en changer le style, enlever les bordures, mettre un fond transparent, utiliser une image pour le fond, un dégradé, etc...
Vous trouverez un exemple d'un tel menu sur mon site cqgclub. Le menu changera si vous changez la couleur du site et des petites flèches apparaissent quand la cellule mène vers d'autres liens.

Le flux RSS.

Le flux RSS (Really Simple Syndication) est facile à mettre en place et si le site est bien conçu, l'administration est facile.
Un flux RSS sur une page modèle n'a d'autre intérêt que d'être présent.
Cette option présentera un réel avantage sur un site vivant comme par exemple, un site d'information(le monde, BBC, LCI...).

Le titre animé.

Vous pouvez choisir plusieurs titres, certains sont animés, d'autres non.
On peut facilement créer un titre animé en flash sur un site comme http://www.compteur.cc, ceci prend environs 60 secondes.
Cependant, on reste tributaire de la disponibilité du serveur hébergeant l'image.
De plus, même si le titre du site est unique, le style ne l'est pas, et ça, c'est pas très classe.
Pour finir, on a le choix entre quelques modèles d'animations, ce qui fait qu l'on a jamais exactement l'animation désirée.
Il faut donc créer soit même l'animation. Une telle création représente 1 à 4 jours de travail.

Les cookies.

SWC5 utilise les cookies.
Ceux ci permettent au visiteur de conserver ses réglages, quand il reviendra, il retrouvera l'horloge, le compteur, le style qu'il aura choisie.
Les cookies servent aussi aux compteurs, un visiteur qui arrive sur swc5 se retrouve avec un cookie qui disparaitra 24 heures plus tard.
Lorsqu'il reviendra, si le cookie existe, le visiteur ne sera pas considéré comme un nouveau visiteur, si le cookie n'existe pas, ce sera un nouveau visiteur.
Sur swc5, les cookies utilisés pour le style sont valables 1 mois car swc5 est une page de présentation.
Pour un site fini, mis en production, le cookie sera valable 1 an.
Lorsqu'un membre s'authentifiera un cookie sera créé et sera supprimé lorsque le navigateur du membre sera fermé.<