α-wwwiki

α-wwwiki :: history/tutorial/20130912-075021.txt

editor : alpha [83.158.172.38] 2013/09/12 07:50:21
{div {@ style="
  font-size:4em;
  text-align:center;
  background:#666;
  color:white;
  text-shadow:0 0 8px black;
  line-height:0.7em;
  "}tutorial (see [[help]])
}

{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;top:150px; left:550px; width:260px; 
  padding:2px; background:white; border:1px solid; 
  box-shadow:0 0 8px; 
  font-size:0.8em;"}}

{div {@ style="position:absolute; top:150px; left:380px;"}
{show {@ src="data/escher_hands.jpg" height="120" width="400" title="Escher hands"}}
}

{div {@ id="CONTENT"}

_p A walk inside {b lambda way}. A work in progress ...

_h2 1) words

_h6 1.1) first steps
_p You have successfully passed the installation process described in the page [[readme]]. A window is opened with a page "start" containing the sentence "This page is empty, edit it !". Click on the little "+" character at the page's top-left, then on "editor". The editor window is now opened and displays the same sentence "This page is empty, edit it !". 
_p Now, replace it by an other sentence, for instance : 
{blockquote Hello World ! It's the first time I am writing in a wiki page. It's awesome, isnt'it ?. I have a lot of things to say about the way goes the World, and I intend to share these ideas with you. See you soon.}
_p Listen to me : {u copy this sentence before doing everything else !} Now, you click on the "save" button and the editor window is closed and ... {b ooops !} ... nothing has been saved, your work would be lost if you had not saved it in the clipboard. Open the editor and paste the sentence again. And now do insert these two characters before the sentence and with a single space between :
{pre °°_p°° Hello World ! It's ...}

_p Now you can safely close the editor window. Everybody in the world can see your work, it is published on internet, welcome on the Web !

_h6 1.2) first problem
_p Now, you reopen the editor window and go on writing more text, copy-pasting and so on. When it's time to go to the next line and so define paragraphs or list items, it works fine in the editor window, but the view window shows nothing but a long uninterrupted string of words. We are far away from a composed page with styles and structured blocks !
 
_h6 1.3) magic symbols
_p A few magic symbols may help us :
_ul insert the 3 characters {b °°_h1°°} before the first title and you get a big visible title ; playing with {b °°_h2°°}, {b °°_h3°°}, {b °°_h4°°}, {b °°_h5°°}, {b °°_h6°°}, you should get sub-titles decreasing in size,
_ul insert the 2 characters {b °°_p°°} before every paragraphs and you get paragraphs separated by blanc lines,
_ul insert the 3 characters {b °°_ul°°} before every list items and you get dotted list items separated by blanc lines.
_ul insert the 3 characters {b °°_ol°°} before every list items and you get numeroted list items separated by blanc lines.
_p Notes :
_ol These "symbols" are not displayed, they are understood by the engine under the cap as instructions, commands to be applyed to the following texts. It's the heart of what is called a "markup language".
_ol The name of these symbols comes from the standard and well documented HTML markup language known by all the browsers. No need to memorize custom names.

_p There is one bad news and two good news :
_ol the bad news is that you can't write readable text in a wiki page without using these strange symbols ;
_ol the first good news is that with these four symbols you can write a hundred pages on your life and your ideas to share, and forget the engine under the cap ;
_ol the second good news is that there are tens of other symbols with which you will be able to compose complex multimedia pages.

_h2 2) style

_h6 2.1) selection process
_p A title is one or more words embedded between two "line returns". The symbol {b °°_h1°°} displays these words in a bold and big sized font, it applies what is called "a style". Applying a style to an inline bunch of words is a little more tricky and needs a selection process before defining the command. In lambdaway, defining the begin and the end of the text to be selected is made with curly brackets {b °°{}°°} ;  the symbol defining the command to be applyed is inserted after the first curly bracket and is followed by a space. Applying the bold style to a text should be done this way : {u °°{b some text}°°} and produces {b some text}, where "b" stands for "bold". It's easy to guess that the styles "italic" and "underline" would be applyed using the symbols "i" and "u" (underline). Even the previous markers used for titles, paragraphs and list items are an easier alternate form to apply the styles, for instance {b °°_h1°° title} stands for {b °°{h1 title}°°}.

_h6 2.2) basic syntax
_p We will soon see that the general syntax used in lambdaway is : {b °°{first rest}°°} and opens to a lot of functionnalities. For instance an expression like {b °°{b bold text}°°} displays {b bold text}, the expression {b °°{* 3 4}°°} will compute {b {* 3 4}}, as a pocket calculator can do. More later ...

_p The curly brackets {b °°{}°°} are central to the syntax used by alphawiki. They define bunchs of text that have to be {b evaluated} according to the symbol following the first curly bracket. In the LISP world, the forms {b °°(first rest)°°} are called "s-expressions" (s for symbolic) and used everywhere for defining datas, structures and functions. In lambdaway, the round brackets of {b °°(first rest)°°} are replaced by curly brackets {b °°{first rest}°°}, because lambdaway is essentially intended for text composing and is not a coding console. Round brackets are much more frequently used then curly brackets, so the choice.

_p Because an s-expression {b °°{first rest}°°} is always evaluated (for instance °°{* 3 4}°° becomes {* 3 4}), it's necessary to define a process to prevent their evaluation, for instance in order to display them as they are in this text. In lambdaway, writing {b {sup o}{sup o}°°{first rest}°°{sup o}{sup o}} prevents the evaluation of the s-expression and displays it as it is. And sometime, when it is useful to hide any bunch of text from display in the view window, just write it this way : {b {sup o}{sup o}{sup o} ANY COMMENT {sup o}{sup o}{sup o}}. Note : "{sup o}" is the degree character.

_h2 3) composition

_h6 3.1) span, div
_p Until now, titles, paragraphs and list items are displayed in a sequential way, styles are limited to a few ones (bold, italic, underline), there is no choice about font family, size, color, ... out of the predefined ones. Two functions will open a lot of possibilities : {b span} and {b div}, sharing the same syntax :
{pre 
°°{span {@ attributes} some text}°°
°°{div {@ attributes} some text}°°
where  {b attributes} follow the standard HTML syntax
}
_p The HTML and CSS languages are standard, well documented and known by all the browsers. No need to memorize custom rules. For instance :
{pre 
The °°{span {@ style="font:bold 2em arial;color:grey;"} baby}°° sleeps !
will display inline : The{span {@ style="font:bold 2em arial; color:grey; line-height:0.5em;"} baby} sleeps !
}
_p The second function {b div} shares the same syntax. The differences is in the fact that {b span} applies the style inline and {b div} creates a block embedded between two blank lines (line returns). The first will be used in the flow of a paragraph, the last will be used to create separate blocks of text. For instance :
{pre 
°°{div 
  {@ style="
    font:bold 2em arial; 
    color:white;
    background:grey;
    border:1px solid; 
    text-align:center;
  "} 
  Hello World !
}°°
will display between two blank lines :
    {div {@ style="font:bold 2em arial; color:white; background:grey; border:1px solid; text-align:center;"} Hello World !}
}
_p Note that the indentation of the expression on several lines is done for an easy reading but is not mandatory.

_p It's possible to position blocks of text everywhere in the page, out of the flow. For instance :
{pre
°°{div 
  {@ style="
    position:relative; 
    left:350px; 
    top:-200px;  
    width:200px;
    background:grey;
    color:white;
    font:normal 2em times;
    -webkit-transform:rotate(-15deg);
       -moz-transform:rotate(-15deg);
            transform:rotate(-15deg);
  "}
  Hello You !
}°° 
displays « Hello You ! »
in this block ->
{div {@ style="position:relative; left:350px; top:-200px; width:200px; background:grey; color:white; font:normal 3em times; padding:5px; -webkit-transform:rotate(-15deg); -moz-transform:rotate(-15deg);"}Hello You !}
}

_p The numerous properties of the HTML and CSS languages can be learned in a lot of good books and web sites. For instance in [[http://www.w3schools.com/|http://www.w3schools.com/]]. Looking inside the code of the pages of this wiki can be useful for a better understanding. And the page [[sandbox]] is opened for playing with all this stuff.

_h6 3.2) links
_p Until now, we can write text, we can style and compose it in blocks freely positionned in a page. Going a little further, we will transform text in "hyperText" and therefore create links !
{pre
Writing °°[ [pixar] ]°° will display [[pixar]], a link to a wiki page.
Writing °°[ [pixar|http://www.pixar.com/] ]°° will display [[pixar|http://www.pixar.com/]], 
                          which is a link to the PIXAR's website.
note : don't put any space between the couples of chars [ and ]
}
_p Actually, the °°[ [...] ]°° form is an alternative easier to write and to read, to the true LambdaTalk syntax, standing for :
{pre °°
[ [pixar] ] is for 
   {a {@ href="?view=pixar"}pixar}
[ [pixar|http://www.pixar.com/] ] is for 
   {a {@ href="http://www.pixar.com/"}pixar}
°°}

_p Note : displaying/hiding bunches or text can be considered as a special category of links : more to see in page [[notes]].

_p Other types of datas can be transformed in hyperLinks, begining with images.

_h6 3.3) img, show, lightbox
_p HyperText lead to other pages in the wiki or in the web. It is possible to insert in a wiki page portions of external datas, being in the wiki folder or everywhere on the net. The picture of Amélie Poulain, the lambdaway's mascotte is in a folder named "data".
 
_p A first function insert the picture this way :
{table {tr
{td {pre
°°{img 
  {@ src="data/amelie_sepia.jpg" 
     height="100px"
     title="Amélie Poulain"
  }
}°°}}

{td {img {@ src="data/amelie_sepia.jpg" height="100px" title="Amélie Poulain"}}}
}}

_p Le the cursor stay a while on the picture to see the infobulle "Amélie Poulain". This text can be seen as "enriched" by the attributes contained in the °°{@ ...}°° expression, which defined the source of the image and its displayed height (which may be different from its physical size).

_p A second function can be used to enlight the picture zoomed out on a greyed background :
{table {tr
{td {pre
°°{show 
  {@ src="data/amelie_sepia.jpg" 
     height="100"
     width="400"
     title="Amélie Poulain"
  }
}°°}}

{td {show {@ src="data/amelie_sepia.jpg" 
     height="100"
     width="400"
     title="Amélie Poulain"}}
}
}}

_p A third function will be used to display multiple pictures zoomed out on a greyed background : 
{pre
°°
{lightbox {@ height="100" width="300"} 
   (data/amelie_sepia.jpg Amélie Poulain loves ze lambdaway) 
   (data/montgomery_clift.jpg Montgomery Clift is not convinced by it) 
   (data/ava_gardner.jpg but Ava garner is so gorgious !)
}°°
will display :
{lightbox {@ height="100" width="300"} 
   (data/amelie_sepia.jpg Amélie Poulain loves ze lambdaway) 
   (data/montgomery_clift.jpg Montgomery Clift is not convinced by it) 
   (data/ava_gardner.jpg but Ava garner is so gorgious !)
}
}
_p Let the cursor fly other the vignettes, click on your choice, ...

_h6 3.4) cards
_p All the pages of the wiki share a unique format defined by a selected "skin". The skin, the way pages are dsiplayed (frame, background, font family,.. ) is determined by :
_ul a text file with CSS rules shared by all the skins,
_ul for each skin a folder containing a text file with CSS rules specific to this skin and one or more resource files (pictures, icones).

_p The wiki can be considered as a stack of cards, a kind of HyperCard in the WEB.

_h6 3.5) html & css
_p The complete list of HTML operators can be seen in page [[syntax]].

_h2 4) numbers
_p Lambdaway knows computing and math expressions, provided you speaks the "strange" Jan Łukasiewicz [[prefix Polish notation|http://en.wikipedia.org/wiki/Polish_notation]] !

_h6 4.1) about numbers
_p Lambdatalk_lite allows to play with math expressions. 
_p Four operators pocket calculator.
{pre

°°{+ 1 2 3 4 5 6}°° -> {+ 1 2 3 4 5 6}
°°{* 1 2 3 4 5 6}°° -> {* 1 2 3 4 5 6}
°°{- 1 2 3 4 5 6}°° -> {- 1 2 3 4 5 6}
°°{- 1}°° -> {- 1}
°°{/ 1 2}°° -> {/ 1 2}
°°{/ 1 2 oops}°° -> {/ 1 2 oops}
°°{/ 1 0}°° -> {/ 1 0}
°°{/ 1}°° -> {/ 1}

°°{+ {* 3 3} {* 4 4}}°° -> {+ {* 3 3} {* 4 4}}
}

_h6 4.2) about math functions
_p Grace to the "define" function it's possible to access all the JS math functions : 
{pre abs acos asin atan atan2 ceil cos exp floor log 
max min pow random round sin sqrt tan mod inv PI E}
_p Example :
{pre 
1) defining sqrt function :
°°{define sqrt (x) return Math.sqrt( x ); }°° -> {define sqrt (x) return Math.sqrt( x ); }
2) using it to compute c{sup 2} = a{sup 2} + b{sup 2} :
°°{sqrt {+ {* 3 3} {* 4 4}}}°° -> {sqrt {+ {* 3 3} {* 4 4}}}
}
_p More to see further.

_h2 5) lambdatalk
_p Here will be shown the language embedded in lambdaway, freely inspired by this strange 50 years old [[LISP|http://fr.wikipedia.org/wiki/Lisp]] language.

_h6 5.1) define operators
_p Defining functions is done via operators "define"/"lambda" or "defun"/"alpha".

{pre
1) using a javascript body
11) defining
°°{define js_square (x) return x*x}°° -> {define js_square (x) return x*x}
12) then calling
°°{js_square 12}°° -> {js_square 12}
13) or defining+calling via lambda function
°°{{lambda (x) return x*x} 12}°° -> {{lambda (x) return x*x} 12}

2) using a lambdatalk body
21) defining
°°{defun lm_square (x) {* x x}}°° -> {defun lm_square (x) {* x x}}
22) then calling
°°{lm_square 12}°° -> {lm_square 12}
23) or defining+calling via alpha function
°°{{alpha (x) {* x x}} 12}°° -> {{alpha (x) {* x x}} 12}
}

_h6 5.2) input operators
_p Important bunches of javascript code can be writen in containers and used in a wiki page. Examples can be seen in pages [[pForms]], [[raytrace]], [[worksheet3]]. The definition of a function belongs to the code of the page and is lost when leaving the page. Functions can be defined in a wiki page and {b included} in another page ; more to see in page [[include]].. When the code is stabilized, it is better to externalize it in a file called on demand as a "plugin". Or inserted in the lambdatalk core code.

_h6 5.3) applications
_p alphawiki contains some applications and explorations of the lambdatalk functionalities. Please, have a look !

_h2 6) inside
_p Here will be discussed the technical aspects of lambdaway.

_h6 6.1) the engine
_p See page [[help]]. More to come soon.

_h6 6.2) about the parser ...
_p See page [[parser]]. More to come soon.

_h2 7) development
_p About the future of lambdaway ? 
_p  This wiki is a workshop where are explored the lambdatalk functionalities. Have a look. Your opinion is welcome in page [[forum]].

}