prime pattern 4

http://code.fed.wiki/assets/pages/lambda-talk-in-a-frame/repl.html HEIGHT 6000

{center Copied from prime_pattern 4|http://lambdaway.free.fr/lambdawalks/?view=prime_pattern4} {uncover http://lambdaway.free.fr/lambdawalks/data/gandhi_adami.jpg 100 500 Gandhi is fan of lambdatalk!} _h1 prime pattern {sup 4} -> html {def precode pre {@ style="background:#ffe; color:#000; padding:10px; font:normal 1.0em courier new"}} {def view pre {@ style="background:#ffe; box-shadow:0 0 8px #000; font:normal 1.2em optima; padding:10px;"}} _p In this page are introduced a few HTML elements, {b span, div, img, a}, CSS rules and a simple codage for colors. _h1 1) '{span ...} _p The {b span} HTML tag is probably the first important HTML element. This is a first example using the HTML syntax: {{precode} I just say hello <span>brave new</span> world. } _p displays {{view} I just say hello <span>brave new</span> world. } _p where {b span} seems useless. _p In fact {b span} is a neutral container whose interest is revealed when attributes are added to it: {{precode} I just say hello <{span}span style="color:red;"> brave new <{span}/span> world. } _p to display {{view} I just say hello <span style="color:red;">brave new</span> world. } _p Welcome in HTML/CSS world. Using '{lambda talk} we can write {{precode} I just say hello '{span brave new} world. I just say hello '{span {@ style="color:red;"} brave new} world. } _p to display {{view} I just say hello brave new world. I just say hello {span {@ style="color:red;"} brave new} world. } _p The '{lambda talk} code is a little easier to write and read and web designers will notice that inside the {b '{@ ...}} form CSS rules are written using the standard syntax, well documented on internet. It's a free and invaluable benefit, '{lambda talk} doesn't hide hundreds of CSS rules behind a homemade syntax, '{lambda talk} uses the standard CSS syntax. _p Another benefit of '{lambda talk} is that we can go further and hide all technical details of CSS syntax under names. We define a color: {{precode} '{def red span {@ style="color:red;"}} -> {def red span {@ style="color:red;"}} } _p and write {{precode} I just say hello '{{red} brave new} world. } _p to display {{view} -> I just say hello {{red} brave new} world. } _p Using lambdas we can play with any colors we want. Let's define a new function {{precode} '{def color {lambda {:color} span {@ style="color::color;"}}} -> {def color {lambda {:color} span {@ style="color::color;"}}} } _p and you can write {{view} -> I just say hello {{color blue} brave new} world. -> I just say hello {{color cyan} brave new} world. } _h1 2) colors _p There are more than 16 milion colors, exactly {b {pow 2 24}}. Some have defined names {center {pre red, green, blue, yellow, magenta, cyan, black, darkgrey, grey, lightgrey, white. }} _p But how could we define a very light grey, the color of the sea, of a flower? _p There is a simple answer: {b use hexadecimal notation!} _p Any color is the sum of three primary ones, {{color red}red} + {{color green}green} + {{color blue}blue}. The simplest way to define a color is to code it as {b {code #rgb}} where [{b r,g,b}] get one of these 16 values [0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f]. Consider that 0 is 0%, 4 is 25%, 8 is 50%, c is 75% and f is 100%. _p For instance writing #f00 defines the sum of 100% red, 0% green and 0% blue displaying the pure red color. And writing #ccc sets each color to 75% leading to lightgrey. Using this simple codage makes easy to write and read up to 16*16*16 = {* 16 16 16} colors. _p Let's play with this notation. Let's define {{precode} '{def rec {lambda {:col} {span {@ style="background:#888; color::col; padding:0 5px; font:bold 1.1em courier;"} :col}}} -> {def rec {lambda {:col} {span {@ style="background:#888; color::col; padding:0 5px; font:bold 1.1em courier;"}:col}}} } _p Writing {{precode} '{rec #000} '{rec #f00} '{rec #0f0} '{rec #00f} {br} '{rec #ff0} '{rec #f0f} '{rec #0ff} '{rec #fff} } _p displays a sequence of eight primary colors, the [red, green, blue] used on {b black screens}, and the [yellow, magenta, cyan] used on {b white paper}: {{view} {center {rec #000} {rec #f00} {rec #0f0} {rec #00f}{br} {rec #ff0} {rec #f0f} {rec #0ff} {rec #fff} }} _p It becomes easy now to understand the relationship between additive (on screens) and substractive (on paper) synthesis of colors, and why we buy for our printers three ink cartridges [yellow, magenta, cyan], three colors which used to be called [yellow, red, blue] in primary school. Do you know why we have to buy a fourth black ink cartridge? _p And, {i you know what?}, we can actually code up to 16 milion colors? Just use {b ff} instead of {b f}. With {b #rrggbb} instead of {b #rgb}, each primary color will be coded on {b 16*16=256} shades instead of {b 16}. Could you memorize a name for such a color {b #123456}? Or this one {b #fffffe}? _p Going further, writing a color using this notation {b #rrggbbaa} allows to define its opacity from 00 to ff. Writing {b #ff000088} defines a red color with opacity (or transparence) equal to 50%. Generally speaking a color is coded using {b 4 bytes} leading to 4 bilion states '{* 256 256 256 256}. _p To conclude, using hexadecimal helps to understand what's going on with colors, additive or substractive synthesis of colors, and also Vincent Van Gogh, Monet, Edward Hopper, Ray-tracing, Radiosity, ... _p It would be a shame to leave this simple and powerful tool to the geeks alone! _h1 3) '{div ...} _p The {b div} HTML tag is used to build {b blocks}. {b divs} can be precisely positionned inside the page. Lot about that can be seen on internet and we will just give an example giving a more visual illustration of the eight primary colors. Writing {{precode} '{def rgba {lambda {:y :x :w :h :c} {div {@ style="position:absolute; top::ypx; left::xpx; width::wpx; height::hpx; background::c; border:5px solid #000;" }}}} -> {def rgba {lambda {:y :x :w :h :c} {div {@ style="position:absolute; top::ypx; left::xpx; width::wpx; height::hpx; background::c; border:5px solid #444;"}}}} } {{precode} '{div {@ style="position:relative; top:0; left:0; width:310px; height:310px; margin:auto; background:#888;"} {rgba 90 10 200 200 #0f0} {rgba 50 90 200 200 #00f} {rgba 10 50 200 200 #f00} {rgba 50 90 160 160 #f0f} {rgba 90 50 40 120 #ff0} {rgba 210 90 120 40 #0ff} {rgba 90 90 120 120 #fff} } } _p displays {{view} {div {@ style="position:relative; top:0; left:0; width:310px; height:310px; margin:auto; background:#444;"} {rgba 90 10 200 200 #0f0} {rgba 50 90 200 200 #00f} {rgba 10 50 200 200 #f00} {rgba 50 90 160 160 #f0f} {rgba 90 50 40 120 #ff0} {rgba 210 90 120 40 #0ff} {rgba 90 90 120 120 #fff} }} _p Johannes Itten|https://fr.wikipedia.org/wiki/Johannes_Itten would probably have liked. Maybe Mondrian|https://fr.wikipedia.org/wiki/Piet_Mondrian too. My architecture students didn't care much. With Photoshop they used to use the pipette and color without worrying about the composition of colors they were using. They may have achieved the desired result but they lost the process forever. It's a shame when it comes to sharing experiences. It's a waste of time. It's loss of information. _p Let as an exercice for the reader: use the HTML/CSS syntax instead of the lambdatalk syntax to produce the previous picture. Courage ... _h1 4) '{img ...} _p Once again the goal of this introduction to '{lambda talk} is not to explain how to use HTML elements, detailed in long on internet. We will just show how the standard HTML/CSS syntax can be translated into '{lambda talk}. Basically the following HTML expression {{precode} <{span}img src="picture_URL" width="..." title="..." /> } _p becomes {{precode} '{img {@ src="picture_URL" width="..." title="..."}} } _p For pictures to he displayed in the full width of the page '{lambda talk} proposes a very simple alternate syntax {{precode} _{span}img picture_URL } _p '{lambda talk} brings several other displays for pictures, {b show}, {b lightbox}, ... as it can be seen in the '{lambda way} project's workshop. _h1 5) '{a ...} _p Similarly the following HTML expression creating a link {{precode} <{span}a href="URL">name<{span}/a> } _p becomes {{precode} '{a {@ href="URL"}name} } _p with the following alternate syntaxes _ul [{span}[name|URL]{span}] for an external page, _ul [{span}[page_name]{span}] for an internal page, _ul [{span}[name|?view=page_name]{span}] for an internal page. _p the last one allowing to display a name different from the "true" page name. _p Everything else about the {b a} function can be seen on internet and examples are given in the '{lambda way} workshop to create clickable notes, references, and so on. _p A funny {i tour d'horizon} can be seen here actu|http://lambdaway.free.fr/lambdaspeech/?view=actu. _p The next step will be a quick trip in the wonderful world of loops|?view=prime_pattern5. _p {i Alain Marty 2019/11/11 update 2021/11/26} {style b { color:#f00; } }