+
2
|
list
|
skin
|
login
|
editor
α-wwwiki
::
aide
user:none
(14581 bytes)
{center [[english|?view=help]] | french} {center Pour une version mise à jour, voir [[help]], sorry :(} {blockquote {@ style="color:#800;"} {p α-wiki{sup 2.1} est une réécriture minimaliste du projet [[lambdaway|../lambdaway_2.0/]]. L'objectif visé est de conserver l'essentiel de la syntaxe lambdatalk (étroitement liée au couple HTML/CSS) qu'on appellera "lambdatalk_lite", une pré-visualisation en temps-réel dans deux cadres superposés, et d'assurer une édition sans mot de passe ( avec un minimum de contrôle à la sauvegarde) et un meilleur accès à l'historique des pages. Un seul skin est disponible et le téléchargement est désactivé. L'ensemble du moteur actuel (compressé) tient dans 20ko et l'installation est réduite au minimum possible. Si l'on s'en tient aux fonctions "basiques", les pages produites dans alphawiki sont globalement compatibles avec [[lambdaway|../lambdaway_2.0/]] vers lequel il sera toujours possible de migrer.} } {h1 {a {@ id="entrer"}1)} entrer dans α-wiki{sup 2.1}} {p Les premiers gestes : } {ul {li un clic sur les quatre points « :: » du titre conduit à la page start, depuis n'importe quelle page du wiki,} {li un clic sur le discret "+" en haut à gauche de la page affiche (ou cache) un menu : {ul {li un clic sur le lien « liste » affiche la liste des pages du wiki,} {li un clic sur le lien « editor » affiche (ou cache) au dessus de la page une fenêtre permettant de créer et de modifier le code générant le contenu de la page,} } } {li l'affichage du contenu de la page suit les modifications du code,} {li un clic sur le lien « save » enregistre le code modifié et ferme le cadre éditeur ; la page est alors visible sur internet.} } {h1 {a {@ id="ecrire"}2)} écrire dans une page} {p Dans un premier temps on peut se contenter d'écrire au kilomètre sans se soucier de syntaxe ; en particulier il est possible de copier-coller du texte provenant d'un traitement de texte standard. Il s'affichera ... au kilomètre, les retours à la ligne et les espaces multiples sont ignorés, le texte est "brut" sans aucun enrichissement. Pour structurer le texte et introduire des enrichissements, il vous faudra utiliser une syntaxe. Dans alphawiki, la syntaxe à utiliser, "{b lambdatalk_lite}", est étroitement construite sur celle, universelle, du langage HTML, associée aux règles de styles CSS. } {p Voici deux exemples d'utilisation du HTML/CSS :} {pre
texte en gras
-> {b texte en gras}.
texte en rouge
-> {span {@ style="color:red;"} texte en rouge}. } {p Et voici deux exemples d'utilisation de lambdatalk :} {pre °°{b texte en gras}°° -> {b texte en gras}. °°{span {@ style="color:red;"}texte en rouge}°° -> {span {@ style="color:red;"} texte en rouge}. } {p La syntaxe "lambdatalk_lite" simplifie l'écriture des balises HTML et ouvre la voie à de nombreuses extensions abordées dans le site [[lambdaway|../lambdaway_2.0/]] et dont l'essentiel est progressivement ajouté. Wait and see ! En ouvrant la fenêtre d'édition, vous pourrez analyser (et copier) le code produisant les quelques exemples suivants. Noter que les balises HTML sont désactivées, par exemple {u
gras
} sera affichée mais pas interprétée. Seule est acceptée la forme lambdatalk_lite !} {p Les opérateurs reconnus par "lambdatalk_lite" sont les suivants : } {pre {@ style="background:#ffe;"} 1) les opérateurs HTML standards : 'div', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'b', 'i', 'u', 'sup', 'sub', 'del', 'pre','center', 'blockquote', 'a', 'img', '[[iframe]]', 'embed', '[[canvas]]', '[[input]]', 'table', 'tr', 'td', 'ul', 'ol', 'li', (see [[listes]]), 'dl', 'dt', 'dd', 2) les opérateurs suivants sont pour l'instant sur la touche : // 'th', 'caption', 'colgroup', 'col', 'thead', 'tbody', 'tfoot', // 'em', 'small', 'strong', 'ins', 'code', 'kbd', 'samp', 'var', // 'abbr', 'address', 'bdo', 'q', 'cite', 'dfn' 3) des balises de formatage d'expressions mathématiques, see [[mathML]] : 'math', 'mrow', 'mfrac', 'mo', 'mi', 'mn', 'msup', 'msub', 'msubsup', 'msqrt', 'munder', 'mover', 'munderover' 4) quelques opérateurs issus de lambdaway : '[[show]]', '[[lightbox]]','[[column]]', 'note', 'note_start', 'note_end' (see [[notes]]), 'post', '[[drag]]', '[[back]]', [[date]], 'lib', 'slider' 5) les formes alternatives '_h1..6', '_p', '_ul|ol', '_post' 6) et une fonction fondamentale : 'define'. } {p Cette dernière fonction "{b define}" est particulièrement importante : grâce à elle il devient possible d'enrichir le 'dictionnaire' d'opérateurs d'alphawiki. La page [[define]] donne quelques précisions et fournit quelques exemples. Cette possibilité rapproche alphawiki de lambdaway, tout en conservant un code bien plus compact. L'archive de lambdaway pèse 111ko, celle d'alphawiki pèse cinq fois moins : 20ko !)} {h2 21) structurer le texte} {h3 211) avec des titres et des paragraphes} {p Utilisez les balises HTML {u h1} à {u h6} et {u p} pour structurer le texte en titres et paragraphes. Oubliez les sauts à la ligne. Bien sûr, ces balises HTML sont à utiliser sous la forme "lambdatalk" °°{balise texte}°°, et cela reste valable pour tout ce qui suit.} {h3 212) avec des listes} {p Pour les listes, utilisez les balises HTML {u ul}, {u ol} et {u li} :} {ul {li article 1} {li article 2 {ul {li article 21} {li article 22 {ul {li article 221} {li article 222} } } {li article 23} } } {li article 3} } {h3 213) avec des blocs} {p Pour aller plus loin, analysez le code produisant ces deux blocs :} {div {@ style="float:left; width:48%; border:1px solid red; text-align:center;"}GAUCHE} {div {@ style="float:right; width:48%; border:1px solid blue; text-align:center;"}DROITE} {div {@ style="clear:both;"}} {p La mauvaise nouvelle est que cela devient évidemment plus complexe ! La bonne nouvelle est qu'on peut s'en passer dans un premier temps, l'apprentissage du HTML/CSS (et donc de lambdatalk) peut se faire en douceur !} {h2 22) enrichir le texte} {p Une fois positionnés les blocs de texte, on peut appliquer des styles aux portions de texte, les transformer en liens, insérer des images, ...} {h3 221) avec du gras, de l'italique, du souligné, du centré, ...} {p Les balises HTML {u b}, {u i}, {u u}, {u center} sont également bien utiles pour afficher des portions de texte en gras, en italique, souligné et centré.} {h3 222) avec des liens} {p La balise HTML {u a} est à la base de tous les liens :} {ol {li lien externe : °°{a {@ href="http://www.pixar.com"}PIXAR}°° - > {a {@ href="http://www.pixar.com"}PIXAR},} {li lien interne : °°{a {@ href="?view=sandbox"}sandbox}°° - > {a {@ href="?view=sandbox"}sandbox}.} } {p Dans un wiki, il est d'usage d'utiliser une forme alternative bien plus pratique : } {ol {li lien externe : [ [PIXAR|http://www.pixar.com] ] ->[[PIXAR|http://www.pixar.com]],} {li lien interne : [ [sandbox] ] -> [[sandbox]].} } {p On voit ainsi qu'un nom encadré de deux doubles crochets affiche un lien qui conduira vers une page portant ce nom si cette page existe, ou sinon vers une nouvelle page. C'est la clé de la création de toute nouvelle page dans un wiki.} {h3 223) avec des images} {p La balise HTML {u img} permet d'insérer des images. Le code :} {pre °°{img {@ src="http://epsilonwiki.free.fr/data/1984.jpg" height="200" title="1984 de Georges Orwell écrit en 1948"}}°° } {div {@ style="float:left; margin:0 10px;"} {img {@ src="http://epsilonwiki.free.fr/data/1984.jpg" height="200" title="1984 de Georges Orwell écrit en 1948"}} } {p affiche une image en ligne, de hauteur 200px et avec l'infobulle "1984 de Georges Orwell écrit en 1948". Pour des raisons de sécurité, ce wiki ne dispose pas de fonction de téléchargement d'images. Utilisez des images en ligne ou téléchargez vos images sur Flickr ou Picasa ou par FTP quelque part dans un compte personnel, et pointez-les comme dans l'exemple présenté. D'autres ressources externes peuvent être insérées comme des sons, des vidéos, des cadres affichant des sites complets, ... tout ce que le HTML permet de faire.} {div {@ style="clear:both;"}} {h2 23) HTML/CSS} {p Les exemples précédents ne donnent qu'un aperçu des possibilités du HTML/CSS (et donc de lambdatalk_lite), que vous pourrez étudier à votre rythme :} {ul {li pour le HTML : {a {@ href="http://www.w3schools.com/html/"}http://www.w3schools.com/html},} {li pour le CSS : {a {@ href="http://www.w3schools.com/css/default.asp"}http://www.w3schools.com/css}.} } {h1 {a {@ id="installer"}3)} installer son wiki} {h2 31) au minimum} {p Toutes les opérations qui suivent supposent que vous disposez d'un compte chez un fournisseur d'accès internet et que vous savez utiliser un logiciel FTP pour télécharger des fichiers vers et depuis ce compte. Le module d'extension de FireFox, FireFtp, fait parfaitement l'affaire. Voici la procédure :} {ol {li Téléchargez cette [[archive|archive.zip]] (environ 20ko),} {li décompactez-la, un dossier "archive" apparaît,} {li renommez ce dossier, par exemple "wiki" ;} {li téléchargez par FTP le dossier sur votre compte web ; } {li et appelez-le dans votre navigateur : http://votre_compte_web/wiki/ ;} {li la page start s'affiche avec ce simple message « Cette page est vide, éditez-la. », prête à être éditée,} {li c'est à vous, éditez-la, c'est le moment de lire l'aide ...} } {h2 32) changer le nom} {p Par défaut, le nom du wiki est α-wiki{sup 2.1}. Pour le remplacer par le nom de votre choix, vous devez savoir un minimum utiliser un logiciel de traitement de texte brut comme NotePad (BlocNote) sur Windows, Textedit/Smultron sur Mac, Kedit sur Linux. Voici la procédure :} {ol {li Entre les étapes 2 et 3 de la procédure d'installation précédente,} {li ouvrez le dossier « archive »,} {li repérez et ouvrez le fichier « index.php » avec l'éditeur de texte,} {li ajustez la constante WIKI_NAME à votre convenance (par exemple « mon bo wiki »),} {li vérifiez que l'encodage du texte est "UTF-8"} {li et enregistrez le fichier.} } {h2 33) pour les curieux} {p L'archive du wiki contient cinq éléments :} {ol {li le fichier {b index.php}, l'entrée du wiki, 6 lignes de PHP, 289 octets,} {li le dossier meca/ contenant 4 fichiers : {ul {li {b HTML.html}, la structure de la page, 19 lignes de HTML, 541 octets,} {li {b PHP.php}, le "cylindre" côté serveur, 164 lignes de PHP, 6676 octets,} {li [[JS.js|meca/JS.js]], le "cylindre" côté navigateur, 430 lignes de JS, 15208 octets,} {li [[lightbox.js|meca/lightbox.js]], gérant les effets "show" et "ligthbox", 105 lignes de JS, 3987 octets,} } } {li le dossier skins/ contenant 2 fichiers : {ul {li [[CSS.css|skins/basic/CSS.css]], définissant l'aspect de la page, 24 lignes de CSS, 1105 octets,} {li [[lightbox.css|skins/lightbox.css]], gérant les effets "show" et "ligthbox", 88 lignes de CSS, 1857 octets,} } } {li le dossier pages/, vide au départ,} {li le dossier history/, vide au départ.} } {p Soit un total de l'ordre de 20ko compressé.} _p {b Note :} pour visualiser les fichiers "index.php", "HTML.html" et "PHP.php", télécharger l'archive, décompactez-la et ouvrez-les en local. {h1 {a {@ id="historique"}4)} gérer l'historique} {p Chaque fois que vous cliquez sur le bouton « save », le fichier « ma_page.txt » associé à la page courante « ma_page » est actualisé dans le dossier pages/, et un nouveau fichier est ajouté dans le dossier history/ du wiki sous un nom du genre : « ma_page-aaaammjj-hhmmss.bak ». Vous avez accès à la [[liste|?liste=*]] de ces pages ainsi qu'à l'historique de chaque page et au contenu des différents états, prenez le temps d'en explorer le chemin. Enfin, même si le poids d'un de ces fichiers dépasse rarement quelques kilo-octets, le nombre peut devenir gênant ; pensez à nettoyer le dossier history/ du wiki par FTP de temps en temps.} {h1 {a {@ id="sécurité"}5)} la sécurité} {p Il n'y a aucun mot de passe, {u tout le monde peut éditer les pages}. Ceci étant, un contrôle minimum est effectué sur l'entrée des informations, supposé bloquer les codes malicieux (scripts, etc...) mais les pirates occasionnels peuvent toujours s'en donner à coeur joie ... s'ils n'ont vraiment pas mieux à faire que de s'attaquer à ce genre de site. Il sera toujours possible de reconstruire une page abimée (ou piratée) à partir de ses différents états enregistrés dans l'historique. Un conseil : pensez à sauvegarder (par FTP) de temps en temps le dossier pages/, c'est là que se trouve le contenu essentiel du wiki.} {h1 {a {@ id="utilisation"}6)} utilisation} {p Vous utilisez α-wiki{sup 2.1} à vos risques et périls et sous votre propre responsabilité dans le cadre de la licence {a {@ href="?view=licence"}GPL}. α-wiki{sup 2.1} est un outil d'investigation, de formation, de recherche et n'a aucune autre prétention. Si vous souhaitez un wiki plus sécurisé, considérez par exemple {a {@ href="http://epsilonwiki.free.fr/"}epsilonwiki} ou {a {@ href="http://epsilonwiki.free.fr/lambdaway_2.0/"}lambdaway_2.0}, et au-delà des systèmes bien plus puissants comme {a {@ href="http://www.spip.net/"}SPIP}.} {p Au fait, pourquoi le "2.1" de α-wiki{sup 2.1} ? Parce qu'il existe un alphawiki "1.0" datant de Avril 2007, et qui était resté dans l'état depuis. La suite se passait alors dans [[epsilonwiki|http://epsilonwiki.free.fr/]] puis aujourd'hui dans [[lambdaway_2.0|http://epsilonwiki.free.fr/lambdaway_2.0/]]. Et puis α-wiki{sup 2.0} est arrivé, basé sur une syntaxe HTML/CSS, qui est à présent "emballée" (et contrôlée) par la syntaxe lambdatalk.} {p Vos commentaires sont les bienvenus dans le [[forum]].} {p Alain Marty 10/04/2013} {div {@ style="position:fixed; top:107px; left:10px; width:100px; background:white; padding:2px; white-space:pre; box-shadow:0 0 8px black; "}1) {a {@ href="#entrer"}entrer} 2) {a {@ href="#ecrire"}écrire} 3) {a {@ href="#installer"}installer} 4) {a {@ href="#historique"}historique} 5) {a {@ href="#sécurité"}sécurité} 6) {a {@ href="#utilisation"}utilisation} }