- 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.
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 celluleLorem 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 cellulebLA 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. |
||
|
Cellule unique de droite 3Nam 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 Helmut_pdorf à 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]]
|
Table of Contents
|
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.
- ~~~~
- [[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
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
