Glossaire

Analyses Google
[[include include:languages pagename=Google Analytics]]

Une façon simple d’expliquer ce que sont les « Google.Analytics » est de dire qu’il s’agit de statistiques de qualité relatives à votre site, il ne s’agit en aucun cas de compteurs de visite.

Les explications qui suivent vont vous décrire comment installer et configurer les ** Google.Analytics ** sur votre site mais elles ne vous expliqueront pas ses possibilités, ni la façon de les exploiter.

intro_small.jpg

Configurer votre compte Google

  • Allez sur votre site Wiki
  • Puis site manager/ 3rd party tools / Google analytics's
  • Cliquez sur http://www.google.com/analytics
  • Loguez vous ou créez compte google si vous n’en avez pas déjà un.
  • Vous êtres sur le page d’accueil de Google.Analytics, terminez la procédure de création de compte d’analyse en fournissant toutes les informations demandées, cela se présente en plusieurs pages mais c’est assez rapide.
  • A la fin de l’inscription Google vous fournit un scripte à insérer sur votre site, la seule partie qui vous intéresse est celle écrite en gras.

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-xxxxxxx-x";
urchinTracker();
</script>

Configurer le côté WikiDOT

  • Allez sur votre site.
  • Puis site manager/ 3rd party tools / Google analytics's
  • Dans le champ Profile Key, enter le numéro que vous avez relevé sur le site Google UA-XXXXX-X
  • Cochez Use Google Analytics:
  • Allez boire un coup et tournez vous les pouces pendant un moment puis retournez sur votre page Google analytics's
  • Ouvrez le profile wikidot, il doit vous dire « en attente de données »
  • Cliquez sur vérifier l'état

Vous devrez obtenir une boite qui ressemble à ça :

Informations sur l'état du suivi

Nom du profil: votre_site.wikidot.com/
URL du site Web: http://your_site.wikidot.com/

En attente de données
Analytics a été installé avec succès, nous récoltons les données.

Si la boite ressemble à ça, ça veut dire que vous avez réussi la configuration.
Il ne vous reste plus a attendre que suffisamment de données soient disponibles pour obtenir des statistiques valides. Cela peut prendre plusieurs jours.
Tags: avancé google stat


Boite d'informations
[[include include:languages pagename=info-box]]

Boite d'informations basé sur des div 1

Il est possible de réaliser des boites d'information en utilisant des div, voici un exemple avec 2 div imbriquées.

Entête de la boite

contenu
contenu
contenu
contenu

[[div style="background-color:#EEE;border:1px solid #000;width:200px;"]]
[[div style="background-color:#000;color:#FFF;font-weight:bold;padding:5px;"]]
= Entête de la boite
[[/div]]
[[div style="padding:5px"]]
[[=]]
contenu
contenu
contenu
contenu
[[/=]]
[[/div]]
[[/div]]

Boite d'informations flottante avec des tableaux 2

Boite d'informations
Titre un peu de texte
Titre un peu de texte
Titre un peu de texte

Comme vous pouvez le voir ce texte contourne la boite d'information qui semble flotter à droite, ce texte sert uniquement a vous démontrer ce principe.

[[div style="float:right;text-size:80%;margin-left:1%width:35%"]]
||||~ Boite d'informations||
|||| ||
||~ Titre || un peu de texte ||
||~ Titre || un peu de texte ||
||~ Titre || un peu de texte ||
[[/div]]

Tags: avancé div tableau
Introduction aux "div"
[[include include:languages pagename=introduction-to-divs]]

Une balise div (abréviation du mot « Division ») et un élément HTML. On peut résumer l’élément div comme étant une boite qui permet de créer une mise en page élaborée. Sa particularité est de se situer en dehors de la séquence du document HTML, Bien que les limitation de WikiDOT ne permettent pas d’utiliser toutes ses finesses, une div écrite en fin de page peut très bien apparaitre en début ou se situer sous le texte ou se déplacer dans le temps. L’élément div et un élément très puissant pas toujours évident à utiliser. Les sites WikiDOT ne sont qu’une succession de div. Vous pouvez le constater en étudiant la structure des pages Wikidot

La Boite

La div crée une zone rectangulaire à la quelle vous pouvez appliquer des styles CSS. Pour vous permettre de matérialiser la boite voici une div avec une bordure :

[[div style="border:1px solid #000;width:140px;height:100px;"]]
= box
[[/div]]

Ces instructions vont créèr la boite suivante :

box


Le signe « = » permet de centrer un élément, vous pouvez constater que le centrage reste local à la div.

Le style

Les seuls arguments autorisés pour la balise div sont class et style

Class
permet de rattacher la div à un style prédéfini dans le thème CSS de la page. Class ="nom-de-la-classe"
Style
permet de définir les éléments du style de la div en ligne. La syntaxe des éléments doit corresponde aux exigences des CCS comme ceux qui sont définis dans les thèmes. Style = "élément-de-style; élément-de-style; ……… ; élément-de-style;"

Chaque élément-de-style s’écrit sous la forme propriété : valeur(s) ;

border : détermine de façon concise le style de bordure, possède éléments
border-width | border-style | border-color

  • border-width prends les valeurs thin | medium | thick | taille
  • border-style prends les valeurs none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
  • border-color prends la valeur color

Height : détermine la hauteur de l'élément, valeurs : auto | taille | %
Width : détermine la largeur de l'élément. valeurs : auto | taille | %
background-color : détermine la couleur du fond. valeurs : couleur-rgb | couleur-hex | couleur-nommée | transparent
background-image : détermine l'image de fond. valeurs : url(URL) | none

Tags: avancé class div html style


Mise en page en tableaux
[[include include:languages pagename=Table Layout]]

Définition

Une façon élégante et somme toute assez répandue de réaliser des mises en pages de qualité est d’utiliser les balises [[table]]. L’exemple ci-dessous utilise l’attribut style pour la table entière mais aussi pour des cellules particulières afin de parfaire la mise en page qui utilise les balises [[row]] et [[cell]]

Cet exemple est pris dans http://snippets.wikidot.com/ (chercher = table layout …), et c'est un excellent exemple.

Dans cet exemple, nous essayons de réaliser une mise en page qui contient 2 cellules verticales séparées opposées à une cellule unique, le seul moyen que nous avons alors trouvé est d’intégrer un tableau dans l'une des cellules.

1. Les instructions

[[table style="margin: 0 10px;"]]
[[row]]
[[cell style="padding: 10px; background-color: #DDDDEE; border: 1px solid silver; width: 40%;"]]

+++ exemple de cellule 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.....
[[/cell]]
[[cell style="padding: 10px; background-color: #DDEEDD; border: 1px solid silver;width: 40%;"]]

+++ Un autre exemple de cellule 

bLA bLA !  Vivamus pharetra posuere sapien. Nam consectetuer....
[[/cell]]
[[/row]]
[[row]]
[[cell style="padding: 10px; background-color: #DDEEDD; border: 1px solid silver"]]

[[table style="padding: 0px; margin: 0 0px; width: 100%"]]
[[row]]
[[cell style="padding: 0px; background-color: #DDEEDD; border: 1px solid "]]

@@ @@
+++ encore une cellule gauche (1)

Suspendisse id velit vitae ligula volutpat condimentum. ....
[[/cell]]
[[/row]]
[[row]]
[[cell style="padding: 0px; background-color: #DDEEDD; border: 1px solid "]]

@@ @@

+++ cellule (2)

Nam magna enim, accumsan eu, blandit sed, blandit a, eros....
[[/cell]]

[[/row]]

[[/table]]

[[/cell]]

[[cell style="padding: 10px; background-color: #DDDDEE; border: 1px solid silver"]]

+++ Cellule unique de droite 3 
Nam magna enim, accumsan eu, blandit sed, blandit a, eros...
[[/cell]]

[[/row]]

[[/table]]

2. Le resultat

exemple de cellule

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

un autre exemple de cellule

bLA bLA ! Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.

une autre cellule de gauche (1)

Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum.

cellule (2)

Nam magna enim, accumsan eu, blandit sed, blandit a, eros.

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis.

Cellule unique de droite 3

Nam magna enim, accumsan eu, blandit sed, blandit a, eros.

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis.


Copié par helmuti_pdorf does not match any existing user name à partir de http://snippets.wikidot.com/

Lecture instructives:
Layout with tables
tabs
Mimic Colspan With Multiple Tables
Tags: avancé tableau


Multicolonnage
[[include include:languages pagename=Multi-Colums]]

Div

Ci-dessous vous trouverez plusieurs exemples qui décrivent comment utiliser des div pour réaliser du multicolonnage. Vous pouvez copier-coller le code et l’ajuster à vos propres besoins.

Detourage (Float)

Pour faire en sorte que les lignes de textes et les autres objets détourent les bords d’une div ou d’une image vous devez lui attribuer la propriété « float ». Chaque fous que vous avez utilisé cette propriété vous devez l’annuler à la fin de votre code par un des deux moyens ci-dessous. Vous devez essayer pour voir la quelle des deux marche le mieux dans votre cas.

  1. ~~~~
  2. [[div style="clear:right;height:1px;"]] [[/div]]

Ci-dessous vous trouverez plusieurs exemples qui décrivent comment utiliser des div pour réaliser du multicolonnage. Vous pouvez copier-coller le code et l’ajuster à vos propres besoins.

Dans l’exemple 1, ~~~~ ne marche pas très bien mais dans l’exemple 3 il marche bien.

Exemple 1

Une façon de créer du multicolonnage et d’utiliser des div

Colonnes répétées :

un
un
un

deux
deux
deux

trois
trois
trois

quatre
quatre
quatre

cinq
cinq
cinq

six
six
six

Pour que les colonnes de la deuxième ligne se placent en dessous des 3 premieres vous devez annuler le détourage entre les deux groupes en utilisant :

[[div style="clear:right;height:1px;"]]

Voici le code utilisé pour générer cette structure.
Notez que l’ordre des colonnes dépends du type de détourage (gauche ou droite ), que vous avez choisi.

[[div style="float:right;width:33%;"]]
un
un
un
[[/div]]

[[div style="float:right;width:33%;"]]
deux
deux
deux
[[/div]]

[[div style="float:right;width:33%;"]]
trois
trois
trois
[[/div]]

[[div style="clear:right;height:1px;"]]
[[/div]]

[[div style="float:left;width:33%;"]]
quatre
quatre
quatre
[[/div]]

[[div style="float:left;width:33%;"]]
cinq
cinq
cinq
[[/div]]

[[div style="float:left;width:33%;"]]
six
six
six
[[/div]]

[[div style="clear:right;height:10px;"]]
[[/div]]

Exemple 2

Tiré des pages de Snippets

Boite 1

Contenu de la première boite

Boite 2

Contenu de la seconde boite

Boite 3

Contenu de la troisième boite

Boite 4

Contenu de la quatrième boite

[[div style="border:solid 1px #999999;width:48%;height:12em;background:#fdf5e6;padding:5px;float:left;margin-bottom:4px"]]
**Boite 1**

Contenu de la première boite
[[/div]]
[[div style="border:solid 1px #ffffff;width:48%;height:12em;background:#ffffff;padding:5px;float:right;margin-bottom:4px"]]
**Boite 2**

Contenu de la seconde boite
[[/div]]

[[div style="border:solid 1px #ffffff;width:48%;height:12em;background:#ffffff;padding:5px;float:left;margin-bottom:4px;"]]
**Boite 3**

Contenu de la troisième boite
[[/div]]
[[div style="border:solid 1px #999999;width:48%;height:12em;background:#ffe4e1;padding:5px;float:right;margin-bottom:4px;"]]
**Boite 4**

Contenu de la quatrième boite
[[/div]]

[[div style="clear:right;height:1px;"]]
[[/div]]

Exemple 3

Cet exemple est base sur le précédent, quelques petits ajustements puis l’insertion de tableaux dans chaque cellule.
Notez que le fait de fixer la hauteur peut conduire à la disparition de certaines données lors du rétrécissement de l’écran.

Variables Used: Experiment with
Border colour adjustment "border:solid 1px #fff;
Border width adjustment width:45%;
Border height adjustment height:35em;
Background Colour adjustment background:#ffffff
Padding adjustment padding:5px
Position adjustment float:left
Margin Bottom adjustment margin-bottom:4px

General Information
UID
ID 2
Continent e
Country NL
Original Name European parliamentary elections
English Name missing
Level 1
Binding Yes
Shadow election no
Start Date 38139
End Date 38148
Election Period 9
When did the electronic vote cast take place? Before and during Election Period
Available channels
Polling Place 1
Postal Voting 1
Counting Machine 0
Voting Machine 1
Networked Voting machine 0
Kiosk Voting 0
Remote Electronic Voting 1
Software missing
Main Provider LogicaCMG
User name and Password 0
TAN 1
Signature Card 0
Biometric properties 0
Other 0
Statistics
Eligible Voters 16000
Votes missing
Eligible Electronic Voters 7196
Electronic Votes 2253
Turnout Groups C
Turnout missing
Electronic Turnout missing
Anonymity
Separate Machines 0
Pre-election 1
Election 0
Post Casting 0
Other missing
Comments Leotine Leober

Marci à http://e-voting.wikidot.com/ pour avoir utilisé leurs tables.

[[div style="border:solid 1px #fff;width:45%;height:35em;background:#ffffff;padding:5px;float:left;margin-bottom:4px"]]
||||~ General Information||
|| UID|| ||
|| ID|| 2||
|| Continent|| e||
|| Country|| NL||
|| Original Name|| European parliamentary elections||
|| English Name|| missing||
|| Level|| 1||
|| Binding|| Yes||
|| Shadow election|| no||
|| Start Date|| 38139||
|| End Date|| 38148||
|| Election Period|| 9||
|| When did the electronic vote cast take place?|| Before and during Election Period||
[[/div]]

[[div style="border:solid 1px #fff;width:45%;height:35em;background:#fff;padding:5px;float:left;margin-bottom:4px"]]
||||~ Available channels||
|| Polling Place|| 1||
|| Postal Voting|| 1||
|| Counting Machine|| 0||
|| Voting Machine|| 1||
|| Networked Voting machine|| 0||
|| Kiosk Voting|| 0||
|| Remote Electronic Voting|| 1||
|| Software|| missing||
|| Main Provider|| LogicaCMG||
|| User name and Password|| 0||
|| TAN|| 1||
|| Signature Card|| 0||
|| Biometric properties|| 0||
|| Other|| 0||
[[/div]]

[[div style="border:solid 1px #fff;width:45%;height:20em;background:#fff;padding:5px;float:left;margin-bottom:4px;"]]
||||~ Statistics||
|| Eligible Voters|| 16000||
|| Votes|| missing||
|| Eligible Electronic Voters|| 7196||
|| Electronic Votes|| 2253||
|| Turnout Groups|| C||
|| Turnout|| missing||
|| Electronic Turnout|| missing||
[[/div]]

[[div style="border:solid 1px #fff;width:45%;height:20em;background:#ffffff;padding:5px;float:left;margin-bottom:4px;"]]
||||~ Anonymity||
|| Separate Machines|| 0||
|| Pre-election|| 1||
|| Election|| 0||
|| Post Casting || 0||
|| Other|| missing||
|| Comments|| Leotine Leober||
[[/div]]

Tags: avancé colonne div
Statistiques
[[include include:languages pagename=statcounter]]

1 Inscrivez-vous à Statcounter.com

Vous devez d’abord vous enregistrer auprès du site http://www.statcounter.com, enregistrez-vous et suivez les indications.

Vous devrez choisir entre compter toutes les pages, certaines pages, des compteurs visibles ou invisibles, un style prédéfinit etc.

2 Ajoutez le code

Si vous souhaitez comptabiliser toutes les pages visitées, incluez le code dans la barre de navigation latérale nav:side. Si non, la page d’accueil est un bon emplacement pour ajouter le code suivant :

[[html]]
<!-- Start of StatCounter Code -->
<script type="text/javascript" language="javascript">
var sc_project=1234567;
var sc_invisible=1;
var sc_partition=25;
var sc_security="f0fc3b99";
var sc_text=4;
</script>
[[/html]]

Tags: avancé stat
Styles en ligne
[[include include:languages pagename=inline-styling]]

CSS dans la ligne.

La principale façon de définir les styles dans WikiDOT est d'utiliser Cascading Style Sheets. CSS est un langage destine à gérer l’apparence des documents HTML (et autre…). Très largement utilisé sur les sites internet, il se présente sous la forme de document texte indépendant que l’on lie au document HTML dont on désire contrôler l’aspect. L’aspect des sites WikiDot est entièrement basé sur CSS, les thèmes ne sont que du CSS.
Tags: avancé css style



Bookmark and Share

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License