αwiki++

user:anonymous

{img {@ src="../portail/data/babouins_lite.jpg" width="100%" title="I'll teach you to dance lambada..."}}

{center {{myName white white 5 georgia}teach{i i}ng}}

_p This is a story where a 10 years old child, [[Romane|http://rue74.fr/F6/romane/]], learns some basis in coding.

_p Romane uses a Macintosh at home and a PC/Windows at school. Computers come essentially with MSOffice (Word, Excel, PowerPoint), some basic tools for editing pictures, MS/Outlook or Apple/Mail and a browser, MS/IE, Apple/Safari, Google/Chrome and/or Mozilla/Firefox. Contrary to other teachers, her teacher in French, Latin and Greek, [[Philippe Meunier|http://rue74.fr/farm/france/?view=phi_intro]], uses his own low cost PC ASUS with GNU Linux (Ubuntu), OpenOffice, some basic tool for editing pictures, Filezilla and a wiki, alphawiki++, working on Firefox as the essential tool for producing and sharing all his [[work|http://rue74.fr/]].

_p Ok, it's wonderful, it's the digital world at school! But all these tools are used without any structured introduction. Everyone does his best, without any knowledge of the nature of datas and tools acting on them. For instance, the so useful stylesheets are rarely used, when spreadsheets are used it's at a very low level. Everybody stays in an instable "bricolage", an infinite "do it yourself" leading to frustration. In fact, everybody is the prisoner of an invisible golden jail and no one imagines he could ever evade from it.

_p So, what could be done to improve this status?

_p Pupils can't follow their teacher using GNU Linux on his low cost basic computer, there is no time to do that and PCs at school are locked by the administration. But they can follow him using a wiki, i.e. alphawiki++, working as a light overlay on top of any browser. With such a tool they can begin a work at school on any PC, improve it at home on their own PCs, read it and improve it again outside via their Pads and SmartPhones. They write simple texts on empty "unstructured" pages of an inline notebook, a kind of HyperCard/HyperTalk on the web. Then they will add structure and enrich texts with some basic HTML tags and CSS rules, they will insert pictures, build lightboxes and some other things, sharing their increasing knowledge via copy/pasting the code, {b the process and not the result}. In a collaborative work constantly improved, again and again.

{{myName red white 2 georgia}1. styling}

_p Romane, if you want to enrich a sequence of words in bold face, for instance "Hello World", you first {b select} it and then you {b apply} a style pushing the {b [B]} button in the menu bar, or use {b [Ctrl B]} on a PC/Windows or {b [Cmd B]} on a Macintosh. As you can see PCs and Macintoshes don't speak exactly the same language, don't use the same tools  and, worse, don't produce same files. You can forget these differences now.

_p You want to share your documents, don't you? So you are going to use a web browser as a tool for {b creating data} and not only for {b browsing data}. Browsers are the only tools working on every machines, on every operating systems, via a mix of syntaxes called HTML, CSS and Javascript. In alphawiki, these syntaxes are unified under a simple one, lambdatalk. You will work with two frames, the editor and the viewer frame. 
_p Coming back to the previous example, we apply some style to "Hello World":

_ul 1) in the editor frame {b select} the words "Hello World" surrounding them with curly braces : {code '{Hello World}}

_ul 2) you have now to {b apply} on it some style, for instance {b b}old or {i i}talic or {u u}nderline; this is how you can apply the bold style: {code '{b Hello World}} -> {b Hello World}

_p It's not so difficult! Do you know how you would apply the {i i}talic or the {u u}nderline style? And, it's more difficult,  combine now the three styles to get this: {b {i {u Hello World}}}. 
_p Got it? I know you got it, it's something you use already in your wiki, [[Romane|http://rue74.fr/F6/romane/?view=accueil]], and you already know how to do more interesting styling in it. We can go further now.

{{myName green white 2 georgia}2. computing: '{+ 1 2} -> 3}

_p In the previous section you learned to select a sequence of words and to apply on it some style. You understand better now the basics of the underground mechanism. And so, we can go further and play a little with numbers. For instance:

_ul writing {code '{b 1 2 3 4 5 6 7 8 9 10}} displays {b 1 2 3 4 5 6 7 8 9 10}. Fine!
_ul and writing {code '{+ 1 2 3 4 5 6 7 8 9 10}} displays "{+ 1 2 3 4 5 6 7 8 9 10}". Oooops?

_p Yes you can do some arithmetics! Not only style text, you can operate on numbers. In fact the operator "{b +}" has been applyed to the sequence of numbers, this sentence said « {i compute the sum of 1,2,3,4,5,6,7,8,9 and 10} », and you simply got 55. 
_p Now, do you know how to get the result in bold face, {b {+ 1 2 3 4 5 6 7 8 9 10}}? And in bold+italic+underline style, like this {b {i {u {+ 1 2 3 4 5 6 7 8 9 10}}}}?

_p You can also play with other operators like "{b *}", "{b -}" or "{b /}" and even combine them using this strange and non standard notation, for instance:

{pre
'{+ 1 {* 2 3} 4} -> {+ 1 {* 2 3} 4}     // equivalent to standard 1+(2*3)+4 
'{+ {* 3 3} {* 4 4}} -> {+ {* 3 3} {* 4 4}} // equivalent to standard (3*3)+(4*4)
'{/ {+ 2 5} 2} -> {/ {+ 2 5} 2}      // equivalent to standard (2+5)/2
}
_p Note that in the standard notation, you can forget parenthesis in the two first formulas {b provided} you remember to multiply before adding. In the last formula you {b must always} use parenthesis. In the wiki notation, you must always use curly braces to define the way operators are applyed, but it's always the same and absolutely coherent. 
_p In fact you can now play in the plain world of arithmetics and mathematics. Using this notation you could easily compute this long sentence {code S = '{+ 1 2 3 4 5 .. 100}}, but it would be boring to enter a hundred numbers. When he was 10 years old, the great mathematician {b Gauss} discovered this clever and simple solution to avoid such a very long computation:

{pre
S = '{+  1  2  3  4  5  6  7  8  9 10}
- reversing the sequence doesn't change the sum: 
S = '{+ 10  9  8  7  6  5  4  3  2  1}
- adding these sequences term by term gives the double of the sum:
2S = '{+ 11 11 11 11 11 11 11 11 11 11}
- 11 is summed 10 times, this can be written like this: 
2S = '{* 11 10} = {* 11 10}
- or because 11 is '{+ 10 1}, like this, :
2S = '{* {+ 10 1} 10} = {* {+ 10 1} 10}
- and then:
S = '{/ {* {+ 10 1} 10} 2} = {/ {* {+ 10 1} 10} 2}
}

_p Now it becomes easy to compute longer sequences: {code S = '{+ 1 2 3 4 5 .. 100}}:
{pre S = '{/ {* {+ 100 1} 100} 2} = {/ {* {+ 100 1} 100} 2}
}
_p and much more longer:
{pre 
S = '{/ {* {+ 100000000 1} 100000000} 2} = {/ {* {+ 100000000 1} 100000000} 2}
}

_p OK, this notation is unusual. The standard way to write such an arithmetical expressions uses a kind of "bidimensional" notation:
{pre
 S = {table 
 {@ style="display:inline-block; text-align:center; vertical-align:middle;"}
 {tr {td {@ style="border:0;"} (100+1)*100}} 
 {tr {td {@ style="border-bottom:1px;"}}}
 {tr {td {@ style="border:0;"}2}}
}
}
_p This bi-dimensional notation is easy to read and is rather easy to write on a paper with a pencil. But it is difficult to write in a text editor, for instance MSWord or OpenOffice, where such expressions must often be written in one line:
{pre 
S = (100+1)*100/2 
}
_p which is not so far from:
{pre
S = '{/ {* {+ 100 1} 100} 2}
}

_p In the standard notation you say: "{code S is equal to 100 plus 1 surrounded by parentheses multipled by 100 and divided by 2}". In the second one you say: "{code S is equal to the division of the product of the sum of 100 and 1 by 100 and by 2}". The coherence of the second notation will appear to be very useful when it's time to write more complex expressions. Begining with code!

{{myName blue white 2 georgia}3. coding: '{S 100} -> {S 100}}

_p These three expressions:  
{pre 
S = '{/ {* {+ 10 1} 10} 2} = {/ {* {+ 10 1} 10} 2}
S = '{/ {* {+ 100 1} 100} 2} = {/ {* {+ 100 1} 100} 2}
S = '{/ {* {+ 1000 1} 1000} 2} = {/ {* {+ 1000 1} 1000} 2}
}
_p can be synthesized in one:

{pre
S = '{/ {* {+ n 1} n} 2} where n = 10, 100, 1000
}

_p We could write the first sentence in another way:

{pre
- replace n in '{/ {* {+ n 1} n} 2} by 10
}

_p You know that the expression will become: {code '{/ {* {+ 10 1} 10} 2}} and, everything beeing known in it, will be evaluated to {b {/ {* {+ 10 1} 10} 2}}. But the wiki engine can't understand such a sentence, it's waiting for a syntax based on curly braces and operators. This could be:
{pre
'{{replace {:n} in {/ {* {+ :n 1} :n} 2}} by 10}
}

_p with a double curly braces before {code replace} which is mandatory to balance the curly braces after the last 10 in the expression. Actually, for historical reasons which can be forgotten, the word {code replace} is written {code lambda}, why not. The two words {code in} and {code by} are simply omitted and the valid expression becomes this one:
{pre
'{{lambda {:n} {/ {* {+ :n 1} :n} 2}} 10}
}

_p Now we can give several values for {code n} like this:
{pre
'{{lambda {:n} {/ {* {+ :n 1} :n} 2}} 10} -> {{lambda {:n} {/ {* {+ :n 1} :n} 2}} 10}
'{{lambda {:n} {/ {* {+ :n 1} :n} 2}} 100} -> {{lambda {:n} {/ {* {+ :n 1} :n} 2}} 100}
'{{lambda {:n} {/ {* {+ :n 1} :n} 2}} 1000} -> {{lambda {:n} {/ {* {+ :n 1} :n} 2}} 1000}
}

_p It's a real improvement over the three initial expressions: values {code 10, 100, 1000} have been written only once and positionned clearly at the end. But it's still a little difficult to write and read. It would be better if we could write something like this, {code '{S 10}} or {code '{S 100}} or {code '{S 1000}} and get the result, isnt'it? Yes, we can do it! We can replace this complex expression by a single name, using the word {code def} (for define):

{pre
'{def S 
 {lambda {:n} {/ {* {+ :n 1} :n} 2}}
} -> {def S {lambda {:n} {/ {* {+ :n 1} :n} 2}}}
}

_p When the wiki engine sees {code '{S 10}}, it replaces {code S} by {code '{lambda {:n} {/ {* {+ :n 1} :n} 2}}}, and returns {code '{{lambda {:n} {/ {* {+ :n 1} :n} 2}} 10}} and we know that it's evaluated to {b {{lambda {:n} {/ {* {+ :n 1} :n} 2}} 10}}.

_p Now it's easy to use this name with any values:
{pre
'{S 10} -> {S 10}
'{S 100} -> {S 100}
'{S 1000} -> {S 1000}
...
'{S 1000000000} -> {S 1000000000}
}

_p Romane, The {b Gauss}' formula is very simple and very clever. Another mathematician, {b Pythagore}, had discovered, long before, another simple and useful formula linking the three sides of a right angle triangle, {code a,b,c}. This is the formula written in the standard notation:
{pre a{sup 2} + b{sup 2} = c{sup 2}}

_p You can read it: « {i the square of the great side is equal to the sum of the square of the other sides.} » This formula can be transformed to compute the "hypotenuse" of the triangle, always in the standard notation:
{pre c = √{span {@ style="border-top:1px solid"}a{sup 2} + b{sup 2}} where "√" stands for square_root}

_p You can see in this expression a complex (and horrible) mix of prefix notation, {b {code √{span {@ style="border-top:1px solid"}...}}}, infix notation, {b {code x + y}}, and exponential notation, {b {code a{sup 2}}}. In alphawiki we simply write:

{pre c = '{sqrt {+ {* a a} {* b b}}} where "sqrt" stands for square_root}

_p This notation can be seen as the {b stenographic} representation of this sentence « {i c equals the square root of the sum of the product of a by a and the product of b by b} »

_p As we did with the {b Gauss}' formula, we can build a function giving the hypotenuse of a right angle triangle:

{pre
'{def hypotenuse
 {lambda {:a :b}
  {sqrt {+ {* :a :a} {* :b :b}}}
}} -> {def hypotenuse
 {lambda {:a :b}
  {sqrt {+ {* :a :a} {* :b :b}}}
}}  
}

_p and use it like this:
{pre
'{hypotenuse 3 4} -> {hypotenuse 3 4}
'{hypotenuse 1 1} -> {hypotenuse 1 1}
}

_p {b Pythagore} disliked this last number, {code {sqrt 2}}, geometry was entering in the world of transcendant numbers. But it's another long story!

_p Romane, you know how to evaluate expressions for styling and computing and you know how to extend the dictionary of words you can use in this language. It's infinite. Welcome in the world of code!

_p If you have time to visit this page, [[lambdatalk|?view=lambdatalk_slides_5]], don't be afraid, you will recognize a few concepts introduced here and you will be able to go further, step after step. Later, you will discover the grandfather of lambdatalk, LISP, the "arborescent" language of Artificial Intelligence, which appears to be also our own deep language, the assembly language of our human brain. And you will be ready to speak with robots and trees...

{img {@ src="data/moi-moche-mechant.jpg" width="100%" title="We all love lambada!"}}

{hr}
_p {b POST SCRIPTUM}: kids don't need tools for kids!

{img {@ src="data/Scratch_sample.png" width="100%" title="Scratch"}}

_p Kids need tools to play with their names:

{pre
'{def myName {lambda {:col :back :size :fam}
  div {@ style="
   text-align:center;
   font: bold :sizeem :fam;
   color::col; background::back;
   text-shadow:0 0 8px black;
   box-shadow:0 0 8px black;
   border-radius:5px;
   margin:10px;
   padding:2px 20px;
"}}} -> {def myName
 {lambda {:col :back :size :fam}
  div {@ style="
   text-align:center;
   font: bold :sizeem :fam;
   color::col; background::back;
   text-shadow:0 0 8px black;
   box-shadow:4px 4px 15px black;
   border-radius:5px;
   margin:20px;
   padding:2px 20px;
"}}}
'{{myName red cyan 2 georgia}Lucie}
'{{myName white grey 3 courier}Cole{sub t}{sup t}e}
'{{myName cyan yellow 6 arial}C{sub a}nd{sup i}c{sub e}}
'{{myName white white 9 optima times}R{sup o{sup m{sub a{sub n{sub e{sub .{sub .{sub .}}}}}}}}}
}

{{myName red cyan 2 georgia}Lucie}
{{myName white grey 3 courier}Cole{sub t}{sup t}e}
{{myName cyan yellow 6 arial}C{sub a}nd{sup i}c{sub e}}
{{myName white white 9 optima times}R{sup o{sup m{sub a{sub n{sub e{sub .{sub .{sub .}}}}}}}}}

_p And then, they will be ready to understand:
{pre
'{def factorial {lambda {:n}
  {if {= :n 0}
   then 1
   else {* :n {factorial {- :n 1}}}}}} -> {def factorial
 {lambda {:n}
  {if {= :n 0}
   then 1
   else {* :n {factorial {- :n 1}}}}}}

'{factorial 5} -> {factorial 5}
}

_p ... without any [[colorful crutch|http://snap.berkeley.edu/]] for kids like this one:

{img {@ src="data/snap_fac_1.jpg" width="100%" title="Snap"}}

_p Just well balanced code! Don't you think so, [[Romane|http://rue74.fr/F6/romane/]]?