α-wwwiki

α-wwwiki :: history/help/20130617-155512.txt

editor : alpha [82.248.206.120] 2013/06/17 15:55:12
{div {@ style="text-align:right;"}
{input {@ id="startTOC" type="submit" value="TOC" onclick="°°
  createTOC( getId('TOC'), getId('CONTENT') );
  getId('startTOC').disabled = 'disabled';
°°"}}}
{div {@ id="TOC" style="position:absolute; left:550px; width:260px; 
             padding:2px; background:white; border:1px solid; box-shadow:0 0 8px; font-size:0.8em;"}}
{div {@ id="CONTENT"}

{center english | [[french|?view=aide]]}

{blockquote {@ style="color:#800; margin:0 100px"}

_p {b α-wiki} is a child of the [[lambdaway|../lambdaway_2.0/]] project.

_p The lambdaway project is a quest for a simple wiki text editor allowing composing and coding in a standard browser complex mutltimedia pages stored in the cloud : 
_ul {b 1) composing} with a LISP-like syntax (so called {b λ-talk}) built on the standard well documented HTML5 and CSS3 syntaxes, 
_ul {b 2) coding} in the wiki pages with extended LISP-like syntaxes built on the native browser's language, JavaScript (ECMA-5), which is a "LISP" in "C" clothes,
_ul {b 3) in a standard browser} : FireFox, Chrome, Safari, I.Explorer-9, ... on every devices, from desktop computers to smartphones,
_ul {b 4) complex multimedia pages} : enriched and structured texts, pictures, videos, and tools sets for creating and editing datas, books, worksheets, graphic editors, 3D, raytracing, ...
_ul {b 5) in the cloud} : created, stored and accessible from everywhere in the WEB.

_p In {b α-wiki}, the goal is to reduce the functions analyzed in the [[lambdaway|../lambdaway_2.0/]] project, to a minimum set, to the essential part, and to write the cleanest, robust and smallest underlying engine. The quest of the wiki-zenitude !

}

{h3 1) introducing α-wiki}

{p {b First steps}, assuming we are in the simplest wiki install (see install below) : }
{ul 
  {li from any page of the wiki, a click on the four points « :: » of the title leads to the page [[start]], }
  {li a click on the little « + » at the page's top-left displays (or hides) the menu : 
    {ul 
      {li a click on the link « list » displays the list of the wiki's pages,}
      {li a click on the link « skin » displays the list of the wiki's skins,}
      {li a click on the link « editor » opens the editor frame,}
    }
  }
  {li the page's display follows in realtime the changes in the editor frame,}
  {li the editor frame's menu contains two buttons, « save » and « cancel » :
    {ul
      {li a click on the link « save » opens a confirm dialog ; when confirmed, the editor frame is closed and the edited code is published in the internet. }
      {li a click on the link « cancel » opens a confirm dialog ; when confirmed, the editor frame is closed, the edited code is discarded and the unchanged page is displayed. }
    }
  }
}

{h3 2) writing in a page}
{p {b You can begin to write "as it is" without boring with any syntax} ; particularly, it's possible to copy/paste any text coming from any standard text-editor. This text will be displayed ... "as it is", line-returns and multiple spaces will be ignored, the text will be "plain" without any enrichment. In order to structure it and to introduce enrichments, you will have to use a syntax. In alphawiki, the syntax to be used, "{b λ-talk}", is tightly built on the standard HTML language in association with the standard CSS style rules. More precisly, what should be written in the standard HTML/CSS syntaxes like this :}
{pre 
text in bold -> {b text in bold}. 
text in red -> {span {@ style="color:red;"} text in red}. 
}

{p will be rewritten using "{b λ-talk}" syntax like that :}
{pre 
°°{b text in bold}°° -> {b text in bold}. 
°°{span {@ style="color:red;"}text in red}°° -> {span {@ style="color:red;"} text in red}. 
}

{p The "{b λ-talk}" syntax does simplify writing HTML tags, gives some protection againts the most dangerous one, and overall opens the way to numerous extended tags initiated in the [[lambdaway|../lambdaway_2.0/]] project. Through the editor frame you will be able to analyze (and copy/paste) the code producing the few examples shown further. Note that the HTML tags are desactivated, for instance {u bold} will be displayed and not interpreted. Only the "{b λ-talk}" form is accepted ! }

{p The "{b λ-talk}" operators are the followings : }

{pre {@ style="background:#ffe;"}
1) the standards HTML tags :
'span', 'div',
'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'br', 'hr',
'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) the following HTML tags (are not yet but) could be easily 
 included on demand :
// 'th', 'caption', 'colgroup', 'col', 'thead', 'tbody', 'tfoot',
// 'em', 'small', 'strong', 'ins', 'code', 'kbd', 'samp', 'var', 
// 'abbr', 'address', 'bdo', 'q', 'cite', 'dfn'
// ... and some more coming with HTML5
3) tags for formating math expressions, see [[mathML]] :
'math', 'mrow', 'mfrac', 'mo', 'mi', 'mn', 'msup', 'msub', 
'msubsup', 'msqrt', 'munder', 'mover', 'munderover'
4) operators extending the standard HTML set : '[[show]]', '[[lightbox]]', 
 'note', 'note_start', 'note_end' (see [[notes]]), 
 'post', '[[drag]]', '[[back]]', [[date]], 'serie', 'map', 'if', 'lib',
 '+', '-', '*', '/', '++', '--', '=', '< ', '>', '=< ', '>='
5) alternative simplified forms '_h1..6', '_p', '_ul|ol', '_post'
6) and, last but not least, the functions '[[lambda]]' and '[[define]]'. 
}
{p This last function "{b define}" is of a great importance : with it, it becomes possible to {u enrich the operators dictionary} of {b λ-talk}. More can be seen in page [[define]].

}

_p With these previous operators, texts can be composed in lines and blocks, enriched with complex styles and made "alives" with a little bit of code, following a gentle learning slope from a simple/easy step to a powerful/complex one. Where the newby user and the smart coder can work together in a collaborative way. 
_p In the wiki lambdaway :)

{h4 21) composing text}
{h5 211) with titles and paragraphs}
{p Use the HTML tags {u h1} to {u h6} and {u p} for structuring text in titles and paragraphs. {u Forget the line-returns !} Of course, these HTML tags must be used under the {b λ-talk °°{tag text}°°} form, and this remains valid for the following sections.}

{h5 212) with lists}
{p For ordered and unordered lists, use the HTML tags {u ul}, {u ol} and {u li} :}
{ul 
  {li item 1}
  {li item 2
    {ul 
      {li item 21}
      {li item 22
        {ul 
          {li item 221}
          {li item 222}
        }
      }
      {li item 23}
    }
  }
  {li item 3}
}

{h5 213) with blocs}
{p To go further, let analyze the code producing these two blocs :}
{pre °°
{div  
  {@ style="float:left; 
            width:48%; 
            border:1px solid red; 
            text-align:center;"
  }
  LEFT
}
{div  {@ style="float:right; width:48%; 
                border:1px solid blue; text-align:center;"}RIGHT}
{div  {@ style="clear:both;"}}
°°}

{div  {@ style="float:left; width:48%; border:1px solid red; text-align:center;"}LEFT}
{div  {@ style="float:right; width:48%; border:1px solid blue; text-align:center;"}RIGHT}
{div  {@ style="clear:both;"}}
{p The bad news is that it becomes a little more complex ! The good news is that we can forget it in a first time, learning HTML/CSS (and so lambdatalk) can be done along a soft learning curve !}

{h4 22) enriching text}

{p When text bunches have been put in place, they can be enriched with style rules, transformed into links to other pages or to display external resources.}

{h5 221) with bold, italic, underline, ...}

{p The HTML tags {u b}, {u i}, {u u}, {u center} are useful to display texts in bold, italic, underline or centered style.}

{h5 222) with links}
{p The HTML tag {u a} is basic for building all kind of links :}
{pre 
external link : °°{a {@ href="http://www.pixar.com"}PIXAR}°° - > {a {@ href="http://www.pixar.com"}PIXAR},
internal link : °°{a {@ href="?view=sandbox"}sandbox}°°  - > {a {@ href="?view=sandbox"}sandbox}. 
}
{p In a wiki, an alternative form will be easier to use : }
{pre 
external link : [ [PIXAR|http://www.pixar.com] ] ->[[PIXAR|http://www.pixar.com]],
internal link : [ [sandbox] ] -> [[sandbox]].
}

{p So, it can be seen that a name embedded between two couples of brackets displays a link which will lead to a page if a page exists with this name, or to a new page if not. It's the key of the creation of any new page in a wiki.}

{h5 223) with pictures}
{p The HTML tag {u img} allows insertion of images. The code :}
{pre
°°{img {@ src="http://epsilonwiki.free.fr/data/1984.jpg" 
      height="200" 
      title="1984 from Georges Orwell written in 1948"}}°°
}

{div  {@ style="float:left; margin:0 10px;"}
{img {@ src="http://epsilonwiki.free.fr/data/1984.jpg" height="200" title="1984 from Georges Orwell written in 1948"}}
}

{p  displays an inline image, 200px height and with the infotext "1984 from Georges Orwell written in 1948". alphawiki allows uploading picture files in a a local data folder ; this functionnality is only activated for logged in users (see install section below). If not activated, let use web online images or upload your images on Flickr or Picasa or by FTP somewhere in a personal web account, and points them as it is shown. Other external resources cann be inserted like sounds, videos, frames displaying websites, ... everything that HTML allows to do.}
{p You should have a look to pages [[show]] and [[lightbox]] to see extended image operators.}

{div {@ style="clear:both;"}}

{h5 224) with all the power of HTML/CSS}
{p The previous examples give nothing but a short outline of the HTML/CSS (and so of the λ-talk) possibilities, which you will be able to learn your way :}
{ul 
{li for λ-talk : see page [[syntax]].}
{li for HTML : {a {@ href="http://www.w3schools.com/html/"}http://www.w3schools.com/html},}
{li for CSS : {a {@ href="http://www.w3schools.com/css/default.asp"}http://www.w3schools.com/css}.}
}

{h4 23) coding}
_p λ-talk provides tools to go further than composing and enriching texts and images. A set of operators is given to build web applications like a calculator, a worksheet, a 2D editor (vectors or pixels), 3D geometries, ... The fundamental operators are : [[input]] and [[define]]. You may have a look at the growing list of examples given in the wiki, to get an idea of what can be done with this toolkit. This coding set is intended to grow in a close future ...

{h3 3) install and admin the wiki}
{p All operations that follow assume that you have a web account and that you are able to use a FTP tool for uploading and downloading files. The Firefox extension modulus "FireFtp" fits perfectly. Three levels of installations are proposed from the easiest to the most complete.}

{h4 31) a minima}
{p At the end of this install, the wiki has the default name "α-wwwiki" and {b NO} password : anybody can edit any page. This is the process :}
{ol 
{li Download this [[archive|archive.zip]], and unzip-it : a folder "archive" appears,}
{li rename the folder "archive", say "wiki" ;}
{li and upload the folder (by FTP) onto your web account.}
}
_p It's done ! 
_p Call the wiki in your browser's address field : {u http://your_web_account/wiki/}. The page start opens with this simple message « This page is empty, edit-it. », ready to be edited. It's up to you, edit it, save it and your work is visible on internet.

{h4 32) change name}

{p By default, the name of the wiki is α-wwwiki. In order to replace it with the name of your choice, you must be able to use a "plain text" editor like NotePad/NotePad2 on Windows, TextEdit/Smultron on Mac, Kedit on Linux. This is the process :}
{ol  
{li Between the first and second steps or the previous install process,}
{li open the folder « archive »,} 
{li find the file « config.php » : duplicate this file for security,}
{li open it with the text editor and edit the constant "WIKI_NAME" value, for instance « my cute wiki »,} 
{li verify that the text encodage is "UTF-8"} 
{li and save the file.}
}
_p The title of your pages will be of the form "my cute wiki :: pagename".

{h4 33) create a user's login array}
_p By default, the wiki has no password, anybody can edit any wiki page. This is the process to define a set of autorized editors :  
_ul find and open the file « config.php » with the text editor,
_ul set the constant "WITH_PASSWORDS" value to "true",
_ul find the predifined array of 3 users and edit it in order to modify the default usernames and passwords :
{pre
$users = array(
	"alpha" => "wwwiki",
	"beta"  => "wwwiki",
	"gamma" => "wwwiki"
);
} 
_ul {b Note 1:} Be careful when you modify this file, duplicate it before. 
_ul {b Note 2:} If your web account provider is [[www.free.fr|http://www.free.fr/]], you must create a folder "sessions" at the root of the account, it doesn't work without. Other providers may have similar constraints.
_ul {b Note 3:} Anybody can edit the pages [[forum]] and [[sandbox]] and it may be undesirable. It's hardcoded in the "meca/PHP.php" file. There is a simple "hack" to hide them :
_ul30 find and open the file « config.php » with the text editor,
_ul30 give to the two constant "FORUM" and "SANDBOX" some obfuscated name like "@&é§èçà", {i et voilà !}, nobody will be able to reach them !

_h4 34) changing the skin
_p By default, the wiki comes with three predefined skins. The default skin used by the wiki is defined in the "index.php" file. To change it :
_ul find and open the file « index.php » with the text editor,
_ul change the value of the constant "SKIN", according to the existing folders, by default : basic, dual and media.
_p Creating or editing the content of one of these folders can't be done inline and suppose a good knowledge of the CSS syntax. More to come soon ...

_ul {b Note :} The default choice of a skin is saved in your browser's cookies. They must be enabled.

{h4 35) inside the engine}
{p The wiki's archive contains seven elements :}
{ol 
  {li the file {b index.php}, the wiki's portal, 5 PHP lines, 107 bytes,}
  {li the file {b config.php}, for user's parameters configuration, 21 PHP lines, 807 bytes,}
  {li the folder meca/ containing 4 files :
    {ul 
      {li {b HTML.html}, the page's template, 21 HTML lines, 770 bytes,}
      {li {b PHP.php}, the "cylinder" on the server's side, 420 PHP lines, 15248 bytes,}
      {li [[JS.js|meca/JS.js]], the "cylinder" on the browser's side, 548 JS lignes, 17694 bytes,}
      {li {b login.php}, for login/logout, 90 PHP lines, 2870 bytes,}
    } 
  }
  {li the folder plugins/ containing one (or more) optional plugin :
    {ul
       {li [[lightbox.js|meca/lightbox.js]], 105 JS lines, 3987 bytes, for the "show" and "ligthbox" effects, actually not an option !}
       {li others may come ...}
    }
  }
  {li the folder skins/ containing a folder for each skin (today basic, dual and media) and a css file for the lightbox effect. Each folder contains a CSS file and the linked resources (pictures,...) :
    {ul 
      {li [[basic|skins/basic/]],}
      {li [[media|skins/mini]],}
    }
  }
  {li the folder pages/, empty at start,}
  {li the folder history/, empty at start.}
}
{p The minimum archive, with optional plugins and with two skin) is about 110kb (zipped) or 330kb (unzipped).}

_p {b Note 1 :} to visualize the files "index.php", "HTML.html" and "PHP.php", download the archive, unzip it and open it.
_p {b Note 2 :} The step by step evolution (improvements) of the wiki engine concerns essentially 3 folders : "meca/", "plugins" and "skins/". The file "meca/config.php" file contain users parameters, the "pages/" folder and the "data/" folder contain the actual datas and they should not be concerned by the updates. Informations about the wiki's evolution will be written in the page [[forum]].

{h3 4) managing pages history}
{p Every times you click on the button "save", the “my_page.txt" file associated to the current page "my_page"" is updated in the wiki's folder "pages/", and a new file is added in the wiki's folder "history/" under a name formated like this "my_page/yyyymmdd-hhmmss.txt". You have an acces to the [[list|?liste=*]] of the wiki's pages, then to the history and to the content of each page's state, let have a look on that. Finally, even if the size of each of these backup files never exceeds a few bytes, their number may become high ; occasionally, think to clean (by FTP) the wiki's history folder.}

{h3 5) about the wiki security}
{p Everyone can read every pages of the wiki, but you must be logged in to edit pages. As one can expect, everyone can edit pages [[forum]] and [[sandbox]]. As it has been seen previously, these pages can be "desactivated" easily : just change their name in the master index.php file into obfuscated strings (i.e. "@&é(§è!çà)-"), and nobody will be able to find them.

_p Some control is done on the page's name and their content, supposed to lock malicious codes against dummy robots, but hackers can pass through and may play with it ... if they have no better to do. You must be aware that the functions "define" and "input" put serious security flaws in the wiki folder ; these operators can be disabled if needed. 
_p It will always be possible to rebuild a corrupted page from the previous steps saved in the history folder. It may be the case with concurrent access conflicts, see [[concurrent]]. Occasionally, {u do save} (by FTP) the "pages/" folder where is the essential of your wiki.}
{p Contact me at {u martydotalainatfreedotfr} if you want to get a login to collaborate to this wiki.}

{h3 6) using α-wiki}
{p You use α-wiki at your own risks under your own responsability according to the {a {@ href="?view=licence"}GPL} licence. α-wiki is a tool for investigation, formation, research and has no other claim. If you want a more secure wiki, have a look to much more powerful CMS like SPIP, WORDPRESS, JOOMLA, DRUPAL. See also [[www.wikimatrix.org|http://www.wikimatrix.org/]] and its list of 142 wikis.}

{p Your comments are welcome in page [[forum]].}
{p Alain Marty 07/06/2013}

}