diff --git a/tutos/8.0/manual/application.wiki b/tutos/8.0/manual/application.wiki
new file mode 100644
index 00000000..cc12891e
--- /dev/null
+++ b/tutos/8.0/manual/application.wiki
@@ -0,0 +1,1170 @@
+<<header| =Writing a client/server Eliom application >>
+
+In this chapter, we will write a [[site:graffiti/|collaborative
+drawing application]]. It is a client/server web application
+displaying an area where users can draw using the mouse, and see what
+other users are drawing at the same time and in real-time.
+
+This tutorial is a good starting point if you want a step-by-step
+introduction to Eliom programming.
+
+<<webonly| The final eliom code is available
+[[https://github.com/ocsigen/graffiti/tree/master/simple|for download]].
+>>
+
+<<|outline target="documentation">>
+
+==@@id="basics"@@ Basics==
+
+If not already done, install Eliom first:
+{{{
+opam install ocsipersist-sqlite eliom ocsigen-ppx-rpc
+}}}
+
+To get started, we recommend using <<a_manual project="eliom"
+chapter="workflow-distillery"|Eliom distillery>>, a program which
+creates scaffolds for Eliom projects. The following command creates a
+very simple project called {{{graffiti}}} in the directory
+{{{graffiti}}}:
+
+<<code language="shell"|
+$ eliom-distillery -name graffiti -template client-server.basic -target-directory graffiti
+>>
+
+===My first page===
+
+<<concepts|Services\\Configuration file\\Static validation of HTML>>
+
+Our web application consists of a single page for now. Let's start by
+creating a very basic page. We define the service that will implement
+this page by the following declaration:
+
+<<code language="ocaml" class="server"|
+open%server Eliom_content.Html.D (* provides functions to create HTML nodes *)
+
+let%server main_service =
+  Eliom_service.create
+    ~path:(Eliom_service.Path ["graff"])
+    ~meth:(Eliom_service.Get Eliom_parameter.unit)
+    ()
+
+let%server () =
+  Eliom_registration.Html.register ~service:main_service
+    (fun () () ->
+      Lwt.return
+        (html
+           (head (title (txt "Page title")) [])
+           (body [h1 [txt "Graffiti"]])))
+>>
+
+Annotations {{{%server}}} tells the compiler that the code is going to be executed
+on the server (see later).
+
+Replace the content of file {{{graffiti.eliom}}} by the above lines and run:
+
+<<code language="shell"|
+$ make test.byte
+>>
+
+This will compile your application and run {{{ocsigenserver}}}.
+
+Your page is now available at URL [[http://localhost:8080/graff|{{{http://localhost:8080/graff}}}]].
+
+
+<<concept title="Services"|
+
+Unlike typical web programming techniques (CGI, PHP,~ ...), with Eliom
+you do not need to write one file per URL. The application can be
+split into multiple files as per the developer's style. What matters
+is that you eventually produce a single module (*.cmo or *.cma) for
+the whole website.
+
+The module <<a_api project="eliom" subproject="server" | module Eliom_service >> allows to
+create new entry points to your web site, called //services//. In
+general, services are attached to a URL and generate a web page.
+Services are represented by OCaml values, through which you must
+register a function that will generate a page.
+
+The {{{~path}}} parameter corresponds to the URL where you want to
+attach your service. It is a list of strings.  The value
+<<code-inline|["foo"; "bar"]>> corresponds to the URL
+<<code-inline|foo/bar>>.  <<code-inline|["dir"; ""]>> corresponds to
+the URL <<code-inline|dir/>> (that is: the default page of the
+directory <<code-inline|dir>>).
+
+>>
+
+<<concept title="Configuration file"|
+
+In the directory of the project created by the Eliom-distillery, you
+can find the file {{{graffiti.conf.in}}}. This file is used in
+conjunction with the variables in {{{Makefile.options}}} to generate
+the {{{ocsigenserver}}} configuration file.
+
+Once you start up your application via {{{make test.byte}}}, the
+configuration file becomes available at
+{{{local/etc/graffiti/graffiti-test.conf}}}. It contains various
+directives for Ocsigen server (port, log files, extensions to be
+loaded, etc.), taken from {{{Makefile.options}}}, and something like:
+
+{{{
+<host>
+  <static dir="static" />
+  <eliommodule module="/path_to/graffiti.cma" />
+  <eliom />
+</host>
+}}}
+
+{{{<eliommodule ... />}}} asks the server to load Eliom module
+{{{graffiti.cma}}}, containing the Eliom application,
+at startup and attach it to this host (and site).
+
+Extensions {{{<static ... />}}} (staticmod) and {{{<eliom />}}}
+are called successively:
+* If they exist, files from the directory <<code-inline|
+  /path_to/graffiti/static >> will be served,
+* Otherwise, Server will try to generate pages with Eliom
+  ({{{<eliom />}}}),
+* Otherwise it will generate a 404 (Not found) error (default).
+
+>>
+
+<<concept title="Static validation of HTML" id="tyxml"|
+
+There are several ways to create pages for Eliom.  You can generate
+pages as strings (as in other web frameworks). However, it is
+preferable to generate HTML in a way that provides compile-time HTML
+correctness guarantees. This tutorial achieves this by using the
+module <<a_api project="eliom" subproject="server" | module Eliom_content.Html.D >>,
+which is implemented using the <<a_manual project="tyxml" |TyXML>>
+library.  The module defines a construction function for each HTML
+tag.
+
+//Note that it is also possible to use the usual HTML syntax directly
+ in OCaml, cf.  <<a_api project="tyxml" | module Pa_tyxml >>.//
+
+The TyXML library (and thus <<a_api project="eliom" subproject="server" | module
+Eliom_content.Html.D >>) is very strict and compels you to respect
+HTML standard (with some limitations). For example if you write:
+
+<<code language="ocaml"|
+(html
+   (head (title (txt "")) [txt ""])
+   (body [txt "Hallo"]))
+>>
+
+You will get an error message similar to the following, referring to
+the end of line 2:
+
+{{{
+Error: This expression has type ([> `TXT ] as 'a) Html.elt
+       but an expression was expected of type
+         Html_types.head_content_fun Html.elt
+       Type 'a is not compatible with type Html_types.head_content_fun =
+           [ `Base
+           | `Command
+           | `Link
+           | `Meta
+           | `Noscript of [ `Link | `Meta | `Style ]
+           | `Script
+           | `Style ]
+       The second variant type does not allow tag(s) `TXT
+}}}
+
+where <<a_api project="tyxml" | type Html_types.head_content_fun >>
+is the type of content allowed inside {{{<head>}}} ({{{<base>}}},
+{{{<command>}}}, {{{<link>}}}, {{{<meta>}}}, etc.). Notice that
+{{{`TXT}}} (i.e. raw text) is not included in this polymorphic
+variant type, which means that {{{<head>}}} cannot contain raw text.
+
+Most functions take as parameter the list representing its contents.
+See other examples below. Each of them take an optional {{{?a}}}
+parameter for optional HTML attributes.
+Mandatory HTML attributes correspond to mandatory OCaml parameters.
+See below for examples.
+
+<<|
+**Another example:** In HTML, some tags cannot be empty. For example
+{{{<table>}}}must contain at least one row. To enforce this, function
+<<a_api project="tyxml" text="Html.table"| val Html.F.table ~>>
+takes two parameters: the first one is the first row, while
+the second one is a list containing all the other rows (same thing for
+{{{<tr>}}}, {{{<form>}}}, {{{<select>}}}, ...). This prevents tables
+of zero rows, and thus ensures that the W3C recommendation is met.
+
+//Strict typing of HTML may initially seem tedious, but in fact it is
+very easy to get used to.  It actually saves a significant amount of
+debugging time as you will never have to bother about the validity of
+pages afterwards.//
+
+A more detailed introduction to the construction of HTML5 tree is
+available in the <<a_api project="tyxml" text="TyXML reference API" |
+module Html.F ~>>.
+
+>>
+
+>>
+
+<<concept title="Lwt"|
+
+**Important warning:** All the functions you write must be written in
+a cooperative manner using Lwt. Lwt is a convenient way to implement
+concurrent programs in OCaml, and is now also widely used for
+applications unrelated to Ocsigen.
+
+For now we will just use the {{{Lwt.return}}} function as above.  We
+will come back to Lwt programming later. You can also have a look at
+the <<a_manual project="lwt"|Lwt programming guide>>.
+
+>>
+
+===Execute parts of the program on the client===
+
+<<concepts|
+Service sending an application\\
+Client and server code\\
+Compiling a Web application with server and client parts\\
+Calling JavaScript methods with Js_of_ocaml\\
+>>
+
+To create our first service, we used the function <<a_api
+project="eliom" subproject="server" | val Eliom_registration.Html.create>>, as
+all we wanted to do was return HTML. But we actually want a service
+that corresponds to a full application with client and server
+parts. To do so, we need to create our own registration module by
+using the functor {{{Eliom_registration.App}}}:
+
+<<|BB
+  This is a bit fast, especially if you just came to Ocsigen. The following
+  questions popped into my mind: What is an Eliom application? What's its
+  motivation, what comprises it and how does is work?
+>>
+
+<<code language="ocaml" class="server"|
+module Graffiti_app =
+  Eliom_registration.App (struct
+      let application_name = "graffiti"
+      let global_data_path = None
+    end)
+>>
+
+It is now possible to use module {{{Graffiti_app}}} for registering our main
+service (now at URL {{{/}}}):
+
+<<code language="ocaml" class="server"|
+let%server main_service =
+  Eliom_service.create
+    ~path:(Eliom_service.Path [""])
+    ~meth:(Eliom_service.Get Eliom_parameter.unit)
+    ()
+
+let%server () =
+  Graffiti_app.register ~service:main_service
+    (fun () () ->
+      Lwt.return
+        (html
+           (head (title (txt "Graffiti")) [])
+           (body [h1 [txt "Graffiti"]]) ) )
+>>
+
+We can now add some OCaml code to be executed by the browser. For this
+purpose, Eliom provides a syntax extension to distinguish between
+server and client code in the same file. We start by a very basic
+program, that will display a message to the user by calling the
+JavaScript function {{{alert}}}. Add the following lines to the
+program:
+
+<<code language="ocaml" class="client"|
+let%client _ = Eliom_lib.alert "Hello!"
+>>
+
+After running again {{{make test.byte}}}, and visiting
+[[http://localhost:8080/]], the browser will load the file
+{{{graffiti.js}}}, and open an alert-box.
+
+<<concept title="Splitting the code into server and client parts"|
+
+At the very toplevel of your source file (i.e. //not// inside modules
+or other server- /client-parts), you can use the following constructs
+to indicate which side the code should run on.
+
+* {{{ let%client }}}, {{{ let%server }}}, {{{ let%shared }}}: same as
+  above for a single definition.
+* other syntaxes like {{{ module%server }}}, {{{ open%client }}},
+  {{{ type%shared }}} ...
+* {{{ [%%client ... ] }}}: the list of enclosed definitions is
+  client-only code (similarly for {{{ [%%server ... ] }}}). With
+  {{{ [%%shared ... ] }}}, the code is used both on the server and client.
+* {{{ [%%client.start] }}}, {{{ [%%server.start] }}},
+  {{{ [%%shared.start] }}}: these set the default location for all
+  definitions that follow, and which do not use the preceding
+  constructs.
+
+If no location is specified, the code is assumed to be for the server.
+
+The above constructs are implemented by means of PPX, OCaml's new
+mechanism for implementing syntax extensions. See
+<<a_api project="eliom" subproject="ppx"|module Ppx_eliom>> for details.
+
+**Client parts are executed once, when the client side process is
+launched.** The client process is not restarted after each page
+change.
+
+The Makefile created by {{{eliom-distillery}}} automatically splits the
+code into client and server parts, compiles the server part as usual,
+and compile the client part to a JavaScript program using
+{{{js_of_ocaml}}}.
+
+ >>
+
+<<concept title="Client values on the server"|
+
+Additionally, it is possible to create client values within the server
+code by the following quotation:
+
+<<code language="ocaml" class="server"|
+  [%client (expr : typ) ]
+>>
+
+where {{{typ}}} is the type of an expression {{{expr}}} on the client.
+Note, that such a client value is abstract on the server, but becomes
+concrete, once it is received by the client.
+
+(The {{{typ}}} can be ommitted if it can be inferred from the usage of
+the client value in the server code.)
+
+**Client values are executed on the client after the service
+returns.** You can use client values when a service wants to ask the
+client to run something, for example binding some event handler on
+some element produced by the service.
+
+>>
+
+<<concept title="Js_of_ocaml"|
+
+The client-side parts of the program are compiled to JavaScript by
+{{{js_of_ocaml}}}. (Technically, {{{js_of_ocaml}}} compiles OCaml
+bytecode to JavaScript.)  It is easy <<a_manual project="js_of_ocaml"
+chapter="bindings"|to bind JavaScript libraries>> so that OCaml
+programs can call JavaScript functions. In the example, we are using
+the <<a_api project="js_of_ocaml" | module Js_of_ocaml.Dom_html >> module, which
+is a binding that allows the manipulation of an HTML page.
+
+Js_of_ocaml is using a syntax extension to call JavaScript methods:
+* {{{obj##m a b c}}} to call the method {{{m}}} of object {{{obj}}}
+  with parameters {{{a}}}, {{{b}}}, {{{c}}},
+* {{{obj##.m}}} to get a property,
+* {{{obj##.m := e}}} to set a property, and
+* {{{new%js constr a b c}}} to call a JavaScript constructor.
+
+More information can be found in the Js_of_ocaml manual, in module
+<<a_api project="js_of_ocaml" subproject="js_of_ocaml-ppx"| module Ppx_js >>.
+
+>>
+
+===Accessing server side variables on client side code===
+
+<<concepts|
+Executing client side code after loading a page\\
+Sharing server side values\\
+Converting an HTML value to a portion of page (a.k.a. Dom node)\\
+Manipulating HTML node 'by reference'
+>>
+
+The client side process is not strictly separated from the server
+side.  We can access some server variables from the client code. For
+instance:
+
+<<code language="ocaml" class="client"|
+open%client Js_of_ocaml
+>>
+<<code language="ocaml" class="server"|
+
+let%server count = ref 0
+
+let%server main_service =
+  Eliom_service.create
+    ~path:(Eliom_service.Path [""])
+    ~meth:(Eliom_service.Get Eliom_parameter.unit)
+    ()
+
+let%server () =
+  Graffiti_app.register ~service:main_service
+    (fun () () ->
+       let c = incr count; !count in
+       let text = Printf.sprintf "You came %i times to this page" in
+       ignore [%client
+         (Dom_html.window##alert
+            (Js.string @@ Printf.sprintf "You came %i times to this page" ~%c)
+          : unit)
+       ];
+       Lwt.return
+         (html
+            (head (title (txt "Graffiti")) [])
+            (body [h1 [txt @@ text c]])))
+>>
+
+Here, we are increasing the reference {{{count}}} each time the page
+is accessed. When the page is loaded and the document is in-place, the
+client program initializes the value inside {{{ [%client ... ] }}},
+and thus triggers an alert window. More specifically, the variable
+{{{c}}}, in the scope of the client value on the server is made
+available to the client value using the syntax extension {{{~%c}}}. In
+doing so, the server side value {{{c}}} is displayed in a message box
+on the client.
+
+
+<<concept
+
+  title="Injections: Using server side values in client code" |
+
+  Client side code can reference copies of server side values using
+  the {{{~%variable}}} syntax.  Values sent that way are weakly type
+  checked: the name of the client side type must match the server side
+  one. If you define a type and want it to be available on both sides,
+  declare it in {{{ [%%shared ... ]}}}. The Eliom manual provides more
+  information on the <<a_api project="eliom" subproject="ppx"
+  text="Eliom's syntax extension"|module Ppx_eliom>> and
+  its <<a_manual project="eliom" chapter="workflow-compilation"
+  fragment="compilation"|compilation process>>.
+
+  The value of an injection into a {{{ let%client }}}
+  section is sent only once when starting the application in the
+  browser. In contrast, the
+  values of injections into client values which are created during a
+  request are sent alongside the next response.
+
+>>
+
+<<|BB/BS This only applies to elements created by Html.F
+It is possible to send almost any type of values that way, but keep in
+mind that sent values are //copies// of server side ones. For HTML
+elements, this is not always the expected behaviour. Considering the
+following piece of code, the {{{onload}}} event handler won't do
+anything noticeable because we added the {{{<div>some text</div>}}} to
+a copy of the {{{<body>}}} element. Hence, the actual page's
+{{{<body>}}} is not modified.
+
+<<code language="ocaml" class="server"|
+let%server main_service =
+  Eliom_service.create
+    ~path:(Eliom_service.Path [""])
+    ~meth:(Eliom_service.Get Eliom_parameter.unit)
+    ()
+
+let%server () =
+  Graffiti_app.register ~service:main_service
+    (fun () () ->
+      let container = body [h1 [txt "Graffiti"]] in
+      Eliom_service.onload {{
+        Html.Manip.appendChild %container (div [txt "some text"]);
+      }}
+      Lwt.return
+        (html
+           (head (title (txt "Graffiti")) [])
+           (container) ) )
+>>
+
+
+==@@id="graffiti"@@ Collaborative drawing application==
+
+===Drawing on a canvas===
+
+<<concepts|
+
+Canvas
+
+>>
+
+We now want to draw something on the page using an HTML canvas. The
+drawing primitive is defined in the client-side function called
+{{{draw}}} that just draws a line between two given points in a canvas.
+
+To start our collaborative drawing application, we define another
+client-side function {{{ init_client }}}, which just draws a single
+line for now.
+
+Here is the (full) new version of the program:
+
+<<code language="ocaml" class="server"|
+open%server Eliom_content
+open%server Eliom_content.Html.D
+>>
+<<code language="ocaml" class="client"|
+open%client Js_of_ocaml
+>>
+<<code language="ocaml" class="server"|
+module%server Graffiti_app =
+  Eliom_registration.App (
+    struct
+      let application_name = "graffiti"
+      let global_data_path = None
+    end)
+>>
+<<code language="ocaml" class="server"|
+let%server width  = 700
+let%server height = 400
+>>
+<<code language="ocaml" class="client"|
+let%client draw ctx ((r, g, b), size, (x1, y1), (x2, y2)) =
+  let color = CSS.Color.string_of_t (CSS.Color.rgb r g b) in
+  ctx##.strokeStyle := (Js.string color);
+  ctx##.lineWidth := float size;
+  ctx##beginPath;
+  ctx##(moveTo (float x1) (float y1));
+  ctx##(lineTo (float x2) (float y2));
+  ctx##stroke
+>>
+<<code language="ocaml" class="server"|
+let%server canvas_elt =
+  Html.D.canvas ~a:[Html.D.a_width width; Html.D.a_height height]
+    [Html.D.txt "your browser doesn't support canvas"]
+
+let%server page () =
+  html
+     (head (title (txt "Graffiti")) [])
+     (body [h1 [txt "Graffiti"];
+            canvas_elt])
+>>
+<<code language="ocaml" class="client"|
+let%client init_client () =
+  let canvas = Eliom_content.Html.To_dom.of_canvas ~%canvas_elt in
+  let ctx = canvas##(getContext (Dom_html._2d_)) in
+  ctx##.lineCap := Js.string "round";
+  draw ctx ((0, 0, 0), 12, (10, 10), (200, 100))
+>>
+<<code language="ocaml" class="server"|
+let%server main_service =
+  Eliom_service.create
+    ~path:(Eliom_service.Path ["graff"])
+    ~meth:(Eliom_service.Get Eliom_parameter.unit)
+    ()
+
+let%server () =
+  Graffiti_app.register
+    ~service:main_service
+    (fun () () ->
+       (* Cf. section "Client side side-effects on the server" *)
+       let _ = [%client (init_client () : unit) ] in
+       Lwt.return (page ()))
+>>
+
+<<concept
+
+  title="JavaScript datatypes in OCaml"|
+
+  Here we use the function <<a_api project="js_of_ocaml" | val
+  Js_of_ocaml.Js.string>> from Js_of_ocaml's library to convert an OCaml string
+  into a JS string.
+
+>>
+
+<<concept title="Client side side-effect on the server" |
+
+  If a client value
+  is created while processing a request, it will be evaluated on the
+  client once it receives the response and the document is created;
+  the corresponding side effects are then executed.
+  For example, the line
+  <<code language="ocaml"|
+    let _ = [%client (init_client () : unit) ] in
+    ...
+  >>
+
+  creates a client value for the sole purpose of performing side
+  effects on the client.  The client value can also be named (as
+  opposed to ignored via {{{_}}}), thus enabling server-side
+  manipulation of client-side values (see below). >>
+
+===Single user drawing application===
+
+<<concepts|
+Lwt\\
+Mouse events with Lwt
+>>
+
+We now want to catch mouse events to draw lines with the mouse like
+with the //brush// tools of any classical drawing application. One
+solution would be to mimic typical JavaScript code in OCaml; for
+example by using the function <<a_api project="js_of_ocaml"| val
+Js_of_ocaml.Dom_events.listen >> that is the Js_of_ocaml's equivalent of
+{{{addEventListener}}}. However, this solution is at least as verbose
+as the JavaScript equivalent, hence not satisfactory. Js_of_ocaml's
+library provides a much easier way to do that with the help of Lwt.
+
+To use this, add the following line on top of your file:
+<<code language="ocaml" class="client"|
+open%client Js_of_ocaml_lwt
+>>
+
+Then, replace the {{{init_client}}} of the previous example by the
+following piece of code, then compile and draw!
+
+<<code language="ocaml" class="client"|
+let%client init_client () =
+
+  let canvas = Eliom_content.Html.To_dom.of_canvas ~%canvas_elt in
+  let ctx = canvas##(getContext (Dom_html._2d_)) in
+  ctx##.lineCap := Js.string "round";
+
+  let x = ref 0 and y = ref 0 in
+
+  let set_coord ev =
+    let x0, y0 = Dom_html.elementClientPosition canvas in
+    x := ev##.clientX - x0; y := ev##.clientY - y0
+  in
+
+  let compute_line ev =
+    let oldx = !x and oldy = !y in
+    set_coord ev;
+    ((0, 0, 0), 5, (oldx, oldy), (!x, !y))
+  in
+
+  let line ev = draw ctx (compute_line ev); Lwt.return () in
+
+  Lwt.async (fun () ->
+    let open Lwt_js_events in
+    mousedowns canvas
+      (fun ev _ ->
+         set_coord ev;
+         let%lwt () = line ev in
+         Lwt.pick
+           [mousemoves Dom_html.document (fun x _ -> line x);
+            let%lwt ev = mouseup Dom_html.document in line ev]))
+>>
+
+We use two references {{{x}}} and {{{y}}} to record the last mouse
+position.  The function {{{set_coord}}} updates those references from
+mouse event data.  The function {{{compute_line}}} computes the
+coordinates of a line from the initial (old) coordinates to the new
+coordinates--the event data sent as a parameter.
+
+The last four lines of code implement the event-handling loop.  They
+can be read as follows: for each {{{mousedown}}} event on the canvas,
+do {{{set_coord}}}, then {{{line}}} (this will draw a dot), then
+behave as the {{{first}}} of the two following lines that terminates:
+
+* For each mousemove event on the document, call {{{line}}} (never
+  terminates)
+* If there is a mouseup event on the document, call {{{line}}}.
+
+<<concept title="More on Lwt" id="lwt"|
+
+Functions in Eliom and Js_of_ocaml which do not implement just a
+computation or direct side effect, but rather wait for user activity,
+or file system access, or need a unforseeable amount of time to return
+are defined //with Lwt//; instead of returning a value of type {{{a}}}
+they return an Lwt thread of type {{{a Lwt.t}}}.
+
+The only way to use the result of such functions (ones that return
+values in the //Lwt monad//), is to use {{{Lwt.bind}}}.
+
+<<code language="ocaml"|
+Lwt.bind : 'a Lwt.t -> ('a -> 'b Lwt.t) -> 'b Lwt.t
+>>
+
+It is convenient to define an infix operator like this:
+<<code language="ocaml"| let (~>>=) = Lwt.bind>>
+
+Then the code
+
+<<code language="ocaml"| f () ~>>= fun x -> >>
+
+is conceptually similar to
+
+<<code language="ocaml"| let x = f () in>>
+
+but only for functions returning a value in the Lwt monad.
+
+For more clarity, there is a syntax extension for Lwt, defining
+{{{let%lwt}}} to be used instead of {{{let}}} for Lwt functions:
+<<code language="ocaml"| let%lwt x = f () in>>
+
+{{{Lwt.return}}} creates a terminated thread from a value: <<code
+language="ocaml"| Lwt.return : 'a -> 'a Lwt.t>> Use it when you must
+return something in the Lwt monad (for example in a service handler,
+or often after a {{{Lwt.bind}}}).
+
+=====Why Lwt?=====
+
+An Eliom application is a cooperative program, as the server must be
+able to handle several requests at the same time.  Ocsigen is using
+cooperative threading instead of the more widely used preemptive
+threading paradigm. It means that no scheduler will interrupt your
+functions whenever it wants. Switching from one thread to another is
+done only when there is a //cooperation point//.
+
+We will use the term //cooperative functions// to identify functions
+implemented in cooperative way, that is: if something takes
+(potentially a long) time to complete (for example reading a value
+from a database), they insert a cooperation point to let other threads
+run.  Cooperative functions return a value in the Lwt monad
+(that is, a value of type {{{'a Lwt.t}}} for some type {{{'a}}}).
+
+{{{Lwt.bind}}} and {{{Lwt.return}}} do not introduce cooperation points.
+
+In our example, the function {{{Lwt_js_events.mouseup}}} may introduce
+a cooperation point, because it is unforseeable when this event
+happens. That's why it returns a value in the Lwt monad.
+
+Using cooperative threads has a huge advantage: given that you know
+precisely where the cooperation points are, //you need very few
+mutexes// and you have //very low risk of deadlocks//!
+
+Using Lwt is very easy and does not cause trouble, provided you never
+use //blocking functions// (non-cooperative functions).  //Blocking
+functions can cause the entre server to hang!// Remember:
+
+* Use the functions from module {{{Lwt_unix}}} instead of module
+ {{{Unix}}},
+* Use cooperative database libraries (like PG'Ocaml for Lwt),
+* If you want to use a non-cooperative function, detach it in another
+  preemptive thread using <<a_api project="lwt" | val
+  Lwt_preemptive.detach >>,
+* If you want to launch a long-running computation, manually insert
+  cooperation points using {{{Lwt_unix.yield}}},
+* {{{Lwt.bind}}} does not introduce any cooperation point.
+
+>> <<| END "encadre" >>
+
+<<concept
+
+  title="Handling events with Lwt"|
+
+  Module <<a_api project="js_of_ocaml" subproject="js_of_ocaml-lwt"| module Js_of_ocaml_lwt.Lwt_js_events>>
+  allows easily defining event listeners using Lwt.  For example,
+  <<a_api project="js_of_ocaml" subproject="js_of_ocaml-lwt"| val Js_of_ocaml_lwt.Lwt_js_events.click >> takes a
+  DOM element and returns an Lwt thread that will wait until a click
+  occures on this element.
+
+  Functions with an ending "s" (<<a_api project="js_of_ocaml" subproject="js_of_ocaml-lwt"| val
+  Js_of_ocaml_lwt.Lwt_js_events.clicks >>, <<a_api project="js_of_ocaml" subproject="js_of_ocaml-lwt"| val
+  Js_of_ocaml_lwt.Lwt_js_events.mousedowns >>, ...) start again waiting after the
+  handler terminates.
+
+  <<a_api project="lwt" | val Lwt.pick >> behaves as the first thread
+  in the list to terminate, and cancels the others.
+
+>>
+
+===Collaborative drawing application===
+
+<<concepts|Client server communication >>
+
+In order to see what other users are drawing, we now want to do the
+following:
+
+* Send the coordinates to the server when the user draw a line, then
+* Dispatch the coordinates to all connected users.
+
+We first declare a type, shared by the server and the client,
+describing the color (as RGB values) and coordinates of drawn lines.
+
+<<code language="ocaml" class="shared"|
+type%shared messages =
+    ((int * int * int) * int * (int * int) * (int * int))
+    [@@deriving json]
+>>
+
+We annotate the type declaration with {{{[@@deriving json]}}} to allow
+type-safe deserialization of this type. Eliom forces you to use this
+in order to avoid server crashes if a client sends corrupted data.
+This is defined using a JSON plugin for
+[[https://github.com/whitequark/ppx_deriving|ppx_deriving]], which you
+need to install. You need to do that for each type of data sent by the
+client to the server.  This annotation can only be added on types
+containing exclusively basic types, or other types annotated with
+{{{[@@deriving json]}}}.
+
+Then we create an Eliom bus to broadcast drawing events to all client
+with the function <<a_api project="eliom" subproject="server"| val
+Eliom_bus.create >>. This function take as parameter the type of
+values carried by the bus.
+
+<<code language="ocaml" class="server"|
+let%server bus = Eliom_bus.create [%json: messages]
+>>
+
+To write draw commands into the bus, we just replace the function
+{{{line}}} in {{{init_client}}} by:
+
+<<code language="ocaml" class="client"|
+let line ev =
+  let v = compute_line ev in
+  let _ = Eliom_bus.write ~%bus v in
+  draw ctx v;
+  Lwt.return ()
+in
+>>
+
+Finally, to interpret the draw orders read on the bus, we add the
+following line at the end of function {{{init_client}}}:
+
+<<code language="ocaml" class="client"|
+  Lwt.async (fun () ->
+    Lwt_stream.iter (draw ctx) (Eliom_bus.stream ~%(bus : (messages, messages) Eliom_bus.t)))
+>>
+
+Now you can try the program using two browser windows to see that the
+lines are drawn on both windows.
+
+<<concept
+
+  title="Communication channels"|
+
+  Eliom provides multiple ways for the server to send unsolicited data
+  to the client:
+
+* Module <<a_api project="eliom" subproject="server" | module Eliom_notif >>
+  (or <<a_api project="ocsigen-start" subproject="server" | module Os_notif >>
+  if you are using Ocsigen Start) provides a very simple way to send messages to
+  clients. It's probably the solution you will use most of the times.
+* You can use <<a_api project="eliom" subproject="server"
+  | type Eliom_bus.t >> instead, as in this example, in the particular case
+  when you need to broadcast data to all connected clients. Buses are
+  broadcasting channels where
+  client and server can participate (see also <<a_api project="eliom"
+  subproject="client" | type Eliom_bus.t >> in the client
+  API).
+* <<a_api project="eliom" subproject="server" | module
+  Eliom_react >> allows sending
+  [[http://erratique.ch/software/react/doc/React|React events]] from
+  the server to the client, and conversely.
+* <<a_api project="eliom" subproject="server" | type
+  Eliom_comet.Channel.t >> are one-way communication channels
+  allowing finer-grained control. It allows sending <<a_api
+  project="lwt" | module Lwt_stream >> to the client.
+  {{{Eliom_react}}} and {{{Eliom_bus}}} are implemented over
+  {{{Eliom_comet}}}.
+
+  It is possible to control the idle behaviour with module <<a_api
+  project="eliom" subproject="client" | module
+  Eliom_comet.Configuration >>.
+
+>>
+
+===Color and size of the brush===
+
+<<concepts|
+Widgets with Ocsigen Toolkit\\
+Functional Reactive Programming\\
+>>
+
+In this section, we add a color picker and slider to choose the size
+of the brush. For the colorpicker we used a widget available in
+<<a_manual project="ocsigen-toolkit" chapter="intro"|Ocsigen Toolkit>>.
+
+To install Ocsigen Toolkit, do:
+{{{
+opam install ocsigen-toolkit
+}}}
+
+Add package {{{ocsigen-toolkit.server}}} to the {{{libraries}}} section of your {{{dune}}} file, and {{{ocsigen-toolkit.client}}} to the {{{libraries}}} section of your {{{client/dune}}} file.
+
+{{{
+  (libraries ... ocsigen-toolkit.server)
+}}}
+{{{
+  (libraries ... ocsigen-toolkit.client)
+}}}
+
+In {{{Makefile.options}}}, created by Eliom's distillery, add
+{{{ocsigen-toolkit.server}}} to the {{{SERVER_PACKAGES}}}.
+This will be used to regenerate Ocsigen Server's configuration file.
+<<code language="makefile"|
+SERVER_PACKAGES := ... ocsigen-toolkit.server
+>>
+
+To create the widget, we replace {{{page}}} by :
+
+<<code language="ocaml" class="server"|
+let%server page () =
+  let colorpicker, cp_sig =
+    Ot_color_picker.make ~a:[Html.D.a_class ["colorpicker"]] ()
+  in
+  ( Html.D.html
+      (Html.D.head
+         (Html.D.title (Html.D.txt "Graffiti")) [])
+      (Html.D.body [h1 [txt "Graffiti"]
+                   ; canvas_elt
+                   ; colorpicker])
+  , cp_sig )
+>>
+
+Replace the registration of {{{main_service}}} by:
+
+<<code language="ocaml" class="server"|
+let%server () =
+  Graffiti_app.register ~service:main_service
+    (fun () () ->
+       (* Cf. section "Client side side-effects on the server" *)
+      let page, cp_sig = page () in
+       let _ = [%client (init_client ~cp_sig:~%cp_sig () : unit) ] in
+       Lwt.return page)
+>>
+
+We subsequently add a simple HTML slider to change the size of the
+brush. Near the {{{canvas_elt}}} definition, simply add the following
+code:
+
+<<code language="ocaml" class="server"|
+let%server slider =
+  Eliom_content.Html.D.Form.input
+    ~a:
+      [ Html.D.a_id "slider"
+      ; Html.D.a_class ["slider"]
+      ; Html.D.a_input_min (`Number 1)
+      ; Html.D.a_input_max (`Number 80)
+      ; Html.D.a_value "22" ]
+    ~input_type:`Range Html.D.Form.int
+>>
+
+{{{Form.int}}} is a typing information telling that this input takes
+an integer value. This kind of input can only be associated to
+services taking an integer as parameter.
+
+We then add the slider to the page body, between the canvas and
+the colorpicker.
+
+To change the size and the color of the brush, we add parameter
+{{{~cp_sig}}} to {{{init_client}}} and modify
+function {{{compute_line}}}:
+
+<<code language="ocaml" class="client"|
+let%client init_client ~cp_sig () =
+...
+  let compute_line ev =
+    let oldx = !x and oldy = !y in
+    set_coord ev;
+    let size_slider = Eliom_content.Html.To_dom.of_input ~%slider in
+    let size = int_of_string (Js.to_string size_slider##.value) in
+    let h, s, v = Eliom_shared.React.S.value cp_sig in
+    let r, g, b = Ot_color_picker.hsv_to_rgb h s v in
+    let rgb = int_of_float r, int_of_float g, int_of_float b in
+    (rgb, size, (oldx, oldy), (!x, !y))
+  in
+...
+>>
+
+Finally, we need to add a stylesheet in the headers of our page
+with function <<a_api project="eliom" subproject="server"|
+val Eliom_tools.D.css_link>>:
+
+<<code language="ocaml" class="server"|
+let%server page () =
+  let colorpicker, cp_sig =
+    Ot_color_picker.make ~a:[Html.D.a_class ["colorpicker"]] ()
+  in
+  ( html
+      (head
+         (title (Html.D.txt "Graffiti"))
+         [ css_link
+             ~uri:
+               (Html.D.make_uri
+                  ~service:(Eliom_service.static_dir ())
+                  ["css"; "graffiti.css"])
+             ()
+         ; css_link
+             ~uri:
+               (make_uri
+                  ~service:(Eliom_service.static_dir ())
+                  ["css"; "ot_color_picker.css"])
+             () ])
+      (body [canvas_elt; slider; colorpicker])
+  , cp_sig )
+>>
+
+
+You need to install the corresponding stylesheets and images into your
+project. The stylesheet files should go to the directory
+{{{static/css}}}.
+Download file {{{graffiti.css}}} from <<a_file
+  src="tutorial/static/css/graffiti.css"|here>>.
+Copy file {{{ot_color_picker.css}}} from directory
+{{{~/.opam/<version>/share/ocsigen-toolkit/css}}} into {{{static/css}}}.
+
+You can then test your application ({{{make test.byte}}}).
+
+<<concept
+
+  title="Ocsigen Toolkit" |
+
+  Ocsigen Toolkit is a Js_of_ocaml library providing useful
+  client-server widgets
+  for your Eliom applications. You can use it for building complex
+  user interfaces. The full documentation is available
+  (<<a_manual project="ocsigen-toolkit" |Ocsigen Toolkit>>).
+
+>>
+
+<<concept
+
+  title="Functional Reactive Programming" |
+
+  Ocsigen Toolkit is using //Functional Reactive Programming// to
+  simplify and automatize page changes, through Daniel Bünzli's
+  React library.
+
+  For example, {{{Ot_color_picker.make}}} returns both the element
+  and a //reactive signal// on which you can bind other computations
+  or other page elements, that would be updated automatically when
+  the signal value changes.
+
+  Eliom makes it possible to create reactive (client side) page elements
+  from server side, through module Eliom_shared.
+
+  This basic program does not show the full power of reactive
+  programming, however. See [[wiki:manual/tutoreact|this tutorial]]
+  for a better introduction to reactive programming with Eliom.
+
+>>
+
+===@@Id="initial-image"@@ Sending the initial image===
+
+<<concepts|Services sending other data types>>
+
+To finish the first part of the tutorial, we want to save the current
+drawing on server side and send the current image when a new user
+arrives. To do that, we will use the
+[[https://github.com/Chris00/ocaml-cairo|Cairo binding]] for OCaml.
+
+For using Cairo, first, make sure that it is installed (it is
+available as {{{cairo2}}} via OPAM). Second, add it to the
+{{{libraries}}} section in your {{{dune}}} file.
+
+Second, add it to the SERVER_PACKAGES in your Makefile.options:
+<<code language="makefile"|
+SERVER_PACKAGES := ... cairo2
+>>
+
+The {{{draw_server}}} function below is the equivalent of the
+{{{draw}}} function on the server side and the {{{image_string}}}
+function outputs the PNG image in a string.
+
+<<code language="ocaml" class="server"|
+let%server draw_server, image_string =
+  let rgb_ints_to_floats (r, g, b) =
+    float r /. 255., float g /. 255., float b /. 255.
+  in
+  (* needed by cairo *)
+  let surface = Cairo.Image.create Cairo.Image.ARGB32 ~w:width ~h:height in
+  let ctx = Cairo.create surface in
+  ( (fun (rgb, size, (x1, y1), (x2, y2)) ->
+      (* Set thickness of brush *)
+      let r, g, b = rgb_ints_to_floats rgb in
+      Cairo.set_line_width ctx (float size);
+      Cairo.set_line_join ctx Cairo.JOIN_ROUND;
+      Cairo.set_line_cap ctx Cairo.ROUND;
+      Cairo.set_source_rgb ctx r g b;
+      Cairo.move_to ctx (float x1) (float y1);
+      Cairo.line_to ctx (float x2) (float y2);
+      Cairo.Path.close ctx;
+      (* Apply the ink *)
+      Cairo.stroke ctx)
+  , fun () ->
+      let b = Buffer.create 10000 in
+      (* Output a PNG in a string *)
+      Cairo.PNG.write_to_stream surface (Buffer.add_string b);
+      Buffer.contents b )
+
+let%server _ = Lwt_stream.iter draw_server (Eliom_bus.stream bus)
+>>
+
+We also define a service that sends the picture:
+
+<<code language="ocaml" class="server"|
+let%server imageservice =
+  Eliom_service.create
+    ~path:(Eliom_service.Path ["image"])
+    ~meth:(Eliom_service.Get Eliom_parameter.unit)
+    ()
+
+let%server () =
+  Eliom_registration.String.register ~service:imageservice
+    (fun () () -> Lwt.return (image_string (), "image/png"))
+>>
+
+<<concept
+
+  title="Eliom_registration"|
+
+  The module {{{Eliom_registration}}} defines several modules with
+  registration and creation functions for a variety of data types.
+  We have already seen {{{Eliom_registration.Html}}} and {{{Eliom_registration.App}}}.
+  The module {{{Eliom_registration.String}}} sends arbitrary byte output
+  (represented by an OCaml string). The handler function must return
+  a pair consisting of the content and the content-type.
+
+  There are also several other output modules, for example:
+
+* {{{Eliom_registration.File}}} to send static files
+* {{{Eliom_registration.Redirection}}} to create a redirection towards another page
+* {{{Eliom_registration.Any}}} to create services that decide late what
+they want to send
+* {{{Eliom_registration.Ocaml}}} to send any OCaml data to be used in a
+client side program
+* {{{Eliom_registration.Action}}} to create service with no output
+(the handler function just performs a side effect on the server)
+and reload the current page (or not). We will see an example of actions
+in the next chapter.
+
+>>
+
+We now want to load the initial image once the canvas is created.  Add
+the following lines just after the creation of the canvas context
+in {{{init_client}}}:
+
+<<code language="ocaml" class="server"|
+(* The initial image: *)
+let img = Eliom_content.Html.To_dom.of_img
+    (img ~alt:"canvas"
+       ~src:(make_uri ~service:~%imageservice ())
+       ())
+in
+img##.onload := Dom_html.handler (fun _ev ->
+  ctx##drawImage img 0. 0.; Js._false);
+>>
+
+As we are now using {{{Eliom_content.Html.D}}} in both client and server sections,
+we need to open it in a shared section:
+
+<<code language="ocaml" class="shared"|
+open%shared Eliom_content.Html.D
+>>
+
+Finally, we can add a new canvas where we would draw a visualisation of the
+current size  of the brush. The complete code of this application
+can be found [[https://github.com/ocsigen/graffiti/tree/master/simple|here]].
+
+The {{{Makefile}}} from the distillery automatically adds
+the packages defined in {{{SERVER_PACKAGES}}} as an extension in your
+configuration file {{{local/etc/graffiti/graffiti-test.conf}}}:
+
+<<code language="xml"|
+<extension findlib-package="cairo2" />
+>>
+
+The first version of the program is now complete.
+
+<<div class="exercices"|
+
+====Exercises====
+
+* Add a button that allows download the current
+  image, and saving it to the hard disk (reuse the service
+  {{{imageservice}}}).
+  <<|BB
+    Wrapping my head around the huge oclosure-API offhanded is very hard. A
+    hint on how to register a click-listener with the button would help.
+  >>
+* Add a button with a color picker to select a color from the
+  drawing. Pressing the button changes the mouse cursor, and disables
+  current mouse events until the next mouse click event on the
+  document.  Then the color palette changes to the color of the pixel
+  clicked.  (Use the function {{{Dom_html.pixel_get}}}).
+
+>>
+
+If you want to continue learning client-server programming with Eliom
+and build your first application, we suggest to read
+[[wiki:manual/start|the tutorial about Ocsigen Start]].
diff --git a/tutos/8.0/manual/basics-server.wiki b/tutos/8.0/manual/basics-server.wiki
new file mode 100644
index 00000000..96896817
--- /dev/null
+++ b/tutos/8.0/manual/basics-server.wiki
@@ -0,0 +1,797 @@
+=Server-side website programming guide=
+
+While Eliom is well known for its unique client-server programming
+model, it is also perfectly suited to programming more traditional
+websites. This page describes how you can generate Web pages in OCaml,
+and handle links, forms, page parameters, sessions, etc. You will see
+that you can get very quickly a working Web site without having to learn
+innovative concepts and this might be enough for your needs.
+
+You will then learn how Eliom is simplifying the programming of very
+common behaviours by introducing innovative concepts like scoped
+sessions or continuation-based Web programming.
+
+Programming with Eliom will make your website ready for future
+evolutions by allowing you to introduce progressively client-side
+features like event handlers, fully in OCaml. You will even be able to
+turn your website into a [[basics|distributed client-server Web app]],
+and even a mobile app if needed in the future, without having to rewrite
+anything.
+
+<<outline| <<header| **Table of contents** >> >>
+
+<<section class="docblock" |
+<<header |==OCaml==>>
+
+This programming guide assumes you know the //OCaml// language.
+Many resources and books are available online.
+
+>>
+
+<<section class="docblock" |
+<<header |==Lwt==>>
+
+//Lwt// is a concurrent programming library for OCaml, initially written
+by Jérôme Vouillon in 2001 for the
+[[https://github.com/bcpierce00/unison|Unison]] file synchronizer.
+It provides an alternative to the more usual preemptive threads approach
+for programming concurrent applications, that avoids most problems of concurrent
+data access and deadlocks.
+It is used by Ocsigen Server and Eliom and has now become one of the
+standard ways to implement concurrent applications in OCaml.
+All your Web sites must be written in Lwt-compatible way!
+
+<<div class="focused"|
+===How it works===
+Instead of calling blocking functions, like {{{Unix.sleep}}}
+or {{{Unix.read}}}, that could block the entire program, replace them
+by their cooperative counterparts ({{{Lwt_unix.sleep}}},
+{{{Lwt_unix.read}}}, etc.). Instead of taking time to execute,
+they always return immediately a //promise// of the result,
+of type {{{'a Lwt.t}}}. This type is abstract, and the only way
+to use the result is to //bind// a function to the promise.
+{{{Lwt.bind p f}}} means: "when promise {{{p}}} is completed, give its result
+to function {{{f}}}".
+
+Syntax {{{let%lwt x = p in e}}} is equivalent to {{{Lwt.bind p (fun x -> e)}}}
+and makes it very natural to sequentialize computations without blocking the rest
+of the program.
+>>
+
+To learn Lwt, read this [[lwt|short tutorial]], or its [[wiki("lwt"):|user manual]].
+
+>>
+
+<<section class="docblock" |
+<<header |==Ocsigen Server: A full featured extensible Web server in OCaml==>>
+Ocsigen Server can be used either as a library for you OCaml programs, or as
+an executable, taking its configuration from a file (and with dynamic linking).
+
+Extensions add features to the server. For example, Staticmod makes it possible
+to serve static files, Deflatemod to compress the output, Redirectmod to
+configure redirections etc.
+
+Install Ocsigen Server with:
+{{{
+opam install ocsigenserver
+}}}
+
+===Use as a library===
+
+Let's create a new OCaml project with Dune:
+{{{dune init project mysite}}}
+
+To include a Web server in your OCaml program, just add
+package {{{ocsigenserver}}} to your Dune file, together with all the extensions
+you need. For example, modify file {{{bin/dune}}} like this:
+
+{{{
+(executable
+ (public_name mysite)
+ (name main)
+ (libraries
+  ocsigenserver
+  ocsigenserver.ext.staticmod))
+}}}
+
+The following command will launch a server, serving static files from 
+directory {{{static}}}:
+<<code language="ocaml"|
+let () = 
+  Ocsigen_server.start [ Ocsigen_server.host [Staticmod.run ~dir:"static" ()]]
+>>
+Put this in file {{{bin/main.ml}}}, and run {{{dune exec mysite}}}.
+
+By default, the server runs on port 8080. Create a {{{static}}} directory
+with some files and try to fetch them using your Web browser.
+
+===Use as an executable===
+Alternatively, you can run command {{{ocsigenserver}}} with a configuration
+file:
+{{{
+ocsigenserver -c mysite.conf
+}}}
+
+The following configuration file corresponds to the program above:
+{{{
+<ocsigen>
+  <server>
+    <port>8080</port>
+    <extension findlib-package="ocsigenserver.ext.staticmod"/>
+    <host>
+      <static dir="static" />
+    </host>
+  </server>
+</ocsigen>
+}}}
+
+>>
+
+<<section class="docblock" |
+<<header |==Eliom: Services==>>
+The following code shows how to create a service that answers
+for requests at URL {{{http://.../aaa/bbb}}}, by invoking an
+Ocaml function {{{f}}} of type:
+
+<<code language="ocaml" |
+
+ f : (string * string) list -> unit -> string Lwt.t
+
+>>
+
+Function {{{f}}} generates HTML as a string, taking as first argument the list
+of URL parameters (GET parameters), and as second argument the list of POST
+parameters (here none).
+
+<<code language="ocaml" |
+
+let f _ () =
+  Lwt.return "<html><head><title>Hello world</title></head><body>Welcome</body></html>"
+
+let myservice =
+  Eliom_service.create
+    ~path:(Eliom_service.Path ["aaa"; "bbb"])
+    ~meth:(Eliom_service.Get Eliom_parameter.any)
+    ()
+
+let () =
+  Eliom_registration.Html_text.register
+    ~service:myservice
+    f
+>>
+
+{{{Eliom_service.Get Eliom_parameter.any}}} means that the service uses the GET HTTP method
+and takes any GET parameter. The first parameter of function {{{f}}} is an association list of GET parameters.
+
+Module {{{Eliom_registration.Html_text}}} is used to register a service sending
+HTML as strings. But we recommend to used typed-HTML instead (see below).
+
+>>
+
+<<section class="docblock" |
+<<header |==Compiling==>>
+
+In this section, we will show how to compile and run a //server-side only// Web site by creating your project manually.
+
+First, create the directories will we use for data (logs, etc.):
+{{{
+mkdir -p local/var/log/mysite
+mkdir -p local/var/data/mysite
+mkdir -p local/var/run
+}}}
+
+===Build an executable===
+This section shows how to create a static executable for you program
+(without configuration file).
+
+Run the following command:
+{{{
+opam install ocsipersist-sqlite-config eliom
+}}}
+
+Add packages {{{ocsipersist-sqlite}}} and {{{eliom.server}}} to file
+{{{bin/dune}}}, in the "libraries" section.
+
+Copy the definition and registration of service {{{myservice}}} at the beginning 
+of file {{{bin/main.ml}}},
+and replace the call to {{{Ocsigen_server.start}}} by the following lines:
+
+<<code language="ocaml"|
+let () = 
+  Ocsigen_server.start 
+    ~command_pipe:"local/var/run/mysite-cmd"
+    ~logdir:"local/var/log/mysite"
+    ~datadir:"local/var/data/mysite"
+    [
+      Ocsigen_server.host
+       [ Staticmod.run ~dir:"local/var/www/mysite" ()
+       ; Eliom.run () ]
+    ]
+>>
+
+Build and execute the program with:
+{{{
+dune exec mysite
+}}}
+
+Open URL {{{http://localhost:8080/aaa/bbb}}} with your browser.
+
+===Use with ocsigenserver===
+Alternatively, you can decide to build your Eliom app as a library and 
+load it dynamically into ocsigenserver using a configuration file.
+
+{{{
+opam install ocsipersist-sqlite-config eliom
+dune init proj --kind=lib mysite
+cd mysite
+}}}
+
+Add {{{(libraries eliom.server)}}} into file {{{lib/dune}}}.
+
+Create your {{{.ml}}} files in directory {{{lib}}}.
+For example, copy the definition and registration of service {{{myservice}}} above.
+
+Compile:
+{{{
+dune build
+}}}
+
+Create a configuration file {{{mysite.conf}}}
+with this content on your project root directory:
+{{{
+<ocsigen>
+  <server>
+    <port>8080</port>
+
+    <logdir>local/var/log/mysite</logdir>
+    <datadir>local/var/data/mysite</datadir>
+    <charset>utf-8</charset>
+
+    <commandpipe>local/var/run/mysite-cmd</commandpipe>
+    <extension findlib-package="ocsigenserver.ext.staticmod"/>
+    <extension findlib-package="ocsipersist-sqlite-config"/>
+    <extension findlib-package="eliom.server"/>
+    <host hostfilter="*">
+      <static dir="local/var/www/mysite" />
+      <eliommodule module="_build/default/lib/mysite.cma" />
+      <eliom/>
+    </host>
+  </server>
+</ocsigen>
+}}}
+Launch the application:
+{{{
+ocsigenserver -c mysite.conf
+}}}
+Open URL {{{http://localhost:8080/aaa/bbb}}} with your browser.
+>>
+
+
+<<section class="docblock" |
+<<header |==TyXML: typing HTML==>>
+
+TyXML statically checks that your OCaml functions will never
+generate wrong HTML. For example a program that could generate a paragraph
+containing another paragraph will be rejected at compile time.
+
+Example of use:
+<<code language="ocaml"|
+let open Eliom_content.Html.F in
+html
+  (head (title (txt "Ex")) [])
+  (body [h1 ~a:[a_id "toto"; a_class ["blah"; "blih"]]
+           [txt "Hallo!"]])
+>>
+
+<<|From Eliom > 2.2
+(you can also use <<a_api project="eliom" subproject="server"|val Eliom_tools.F.html> > to ease the creation of the {{{head}}} tag.)
+
+(Eliom_tools.F.head
+    ~title:"Hello"
+    ~css:[["css";"style.css"]]
+    ~js:[["libjs";"mylib.js"];
+         ["libjs";"otherlib.js"]]
+    ())
+>>
+
+
+<<div class="focused"|
+===How it works===
+
+TyXML builds the page as an OCaml data-structure using a construction function
+for each HTML tag. These functions take as parameters and return nodes
+of type {{{'a elt}}} where {{{'a}}} is a polymorphic variant type added in the
+module signature to constrain usage (phantom type).
+>>
+
+===Example of typing error===
+
+<<code language="ocaml"|
+p [p [txt "Aïe"]]
+   ^^^^^^^^^^^^^
+Error: This expression has type
+         ([> Html_types.p ] as 'a) Eliom_content.Html.F.elt =
+           'a Eliom_content.Html.elt
+       but an expression was expected of type
+         ([< Html_types.p_content_fun ] as 'b) Eliom_content.Html.F.elt =
+           'b Eliom_content.Html.elt
+       Type 'a = [> `P ] is not compatible with type
+         'b =
+           [< `A of Html_types.phrasing_without_interactive
+            | `Abbr
+            | `Audio of Html_types.phrasing_without_media
+            ...
+            | `Output
+            | `PCDATA
+            | `Progress
+            | `Q
+            ...
+            | `Wbr ]
+       The second variant type does not allow tag(s) `P
+>>
+Read more about TyXML in this [[html|short tutorial]] or in its [[wiki("tyxml"):|user manual]].
+
+>>
+
+<<section class="docblock" |
+<<header |==Eliom: Service returning typed HTML==>>
+
+To use typed HTML, just replace module {{{Eliom_registration.Html_text}}}
+by  {{{Eliom_registration.Html}}}:
+<<code language="ocaml" |
+
+let f _ () =
+  Lwt.return
+    Eliom_content.Html.F.(html (head (title (txt "")) [])
+                               (body [h1 [txt "Hello"]]))
+
+let myservice =
+  Eliom_service.create
+    ~path:(Eliom_service.Path ["aaa"; "bbb"])
+    ~meth:(Eliom_service.Get Eliom_parameter.any)
+    ()
+
+let () =
+  Eliom_registration.Html.register
+    ~service:myservice
+    f
+>>
+
+===Outputs===
+
+Services can return a typed HTML page as in the example above, but also
+any other kind of result. To choose the return type, use the register function
+from the corresponding submodule of
+<<a_api project="eliom" | module Eliom_registration >>:
+
+<<div id="servicetable"|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="Html"| module Eliom_registration.Html >>|@@colspan="3"@@Services returning typed HTML pages|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="Html_text"| module Eliom_registration.Html >>|@@colspan="3"@@Services returning untyped HTML pages as strings|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="App"| module Eliom_registration.ELIOM_APPL >>|@@colspan="3"@@Apply this functor to generate registration functions for services belonging to an Eliom client/server application. These services also return typed HTML pages, but Eliom will automatically add the client-side program as a JS file, and all the data needed (values of all injections, etc.)|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="Flow"| module Eliom_registration.Flow5 >>|@@colspan="3"@@Services returning portions of HTML pages.|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="Action"| module Eliom_registration.Action >>|@@colspan="3"@@Services performing actions (server side effects) with or without reloading the page (e.g. login, logout, payment, modification of user information...)|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="Files"| module Eliom_registration.File >>|@@colspan="3"@@Serve files from the server hard drive|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="Ocaml"| module Eliom_registration.Ocaml >>|@@colspan="3"@@Services returning OCaml values to be sent to a client side OCaml program (this kind of services is used as low level interface for server functions -- see below)|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="String"| module Eliom_registration.String >>|@@colspan="3"@@Services returning any OCaml string (array of byte)|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="Redirection"| module Eliom_registration.Redirection >>|@@colspan="3"@@Services returning an HTTP redirection to another service|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="Any"| module Eliom_registration.Any >>|@@colspan="3"@@To be used to make the service chose what it sends. Call function {{{send}}} from the corresponding module to choose the output.|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="Customize"| module Eliom_registration.Customize >>|@@colspan="3"@@Apply this functor to define your own registration module|
+>>
+>>
+
+<<section class="docblock" |
+<<header |==Eliom: Typing page parameters==>>
+
+Instead of taking GET parameters as an untyped {{{string * string}}}
+association list, you can ask Eliom to decode and check parameter types
+automatically.
+
+For example, the following code defines a service at URL {{{/foo}}},
+that will use GET HTTP method, and take one parameter of type {{{string}}},
+named {{{s}}}, and one of type {{{int}}}, named {{{i}}}.
+<<code language="ocaml" class="server"|
+let myservice =
+  Eliom_service.create
+    ~path:(Eliom_service.Path ["foo"])
+    ~meth:(Eliom_service.Get (Eliom_parameter.(string "s" ** int "i")))
+    ()
+>>
+
+Then register an OCaml function as handler on this service:
+
+<<code language="ocaml" class="server"|
+let () =
+  Eliom_registration.Html.register ~service:myservice
+    (fun (s, i) () ->
+      Lwt.return
+         Eliom_content.Html.F.(html (head (title (txt "")) [])
+                                    (body [h1 [txt (s^string_of_int i)]])))
+>>
+
+The handler takes as first parameter the GET page parameters, typed according to
+the parameter specification given while creating the service.
+The second parameter is for POST parameters (see below).
+
+Recompile you program, and to to URL {{{http://localhost:8080/foo?s=hello&i=22}}}
+to see the result.
+
+===Parameters===
+
+Module <<a_api project="eliom" subproject="server"| module Eliom_parameter>>
+is used to describe the type of service parameters.
+
+Examples:
+<<code language="ocaml"|
+Eliom_parameter.(int "i" ** (string "s" ** bool "b"))
+   (* /path?i=42&s=toto&b=on *)
+
+Eliom_parameter.(int "i" ** opt (string "s"))
+   (* An integer named i, and an optional string named s *)
+
+Eliom_parameter.(int "i" ** any)
+   (* An integer named i, and any other parameters, as an association list
+      of type (string * string) list *)
+
+Eliom_parameter.(set string "s")
+   (* /path?s=toto&s=titi&s=bobo *)
+
+Eliom_parameter.(list "l" (int "i"))
+   (* /path?l[0]=11&l[1]=2&l[2]=42 *)
+
+Eliom_parameter.(suffix (int "year" ** int "month"))
+   (* /path/2012/09 *)
+
+Eliom_parameter.(suffix_prod (int "year" ** int "month") (int "a"))
+   (* /path/2012/09?a=4 *)
+
+>>
+
+>>
+
+<<section class="docblock" |
+<<header |==Eliom: POST services==>>
+
+To define a service with POST parameters, just change the {{{~meth}}} parameter.
+For example the following example takes the same GET parameters as the service
+above, plus one POST parameter of type string, named "mypostparam".
+<<code language="ocaml" class="server"|
+~meth:(Eliom_service.Post (Eliom_parameter.((string "s" ** int "i"),
+                                            (string "mypostparam"))))
+>>
+
+>>
+
+<<section class="docblock" |
+<<header |==Eliom: Other kinds of services==>>
+
+The detailed explanation of services can be found in <<a_manual project="eliom" chapter="server-services" |Eliom's manual>>. Here is a summary:
+
+===Pathless services===
+
+Pathless services are not identified by the path in the URL,
+but by a name given as parameter, regardless of the path.
+Use this to make a functionality available from all pages
+(for example: log-in or log-out actions, add something in a shopping basket ...).
+The name can be specified manually
+using the {{{~name}}} optional parameter, otherwise, a random name is
+generated automatically.
+This is also used to implement server functions (see below).
+If you are programming a client-server Eliom app, you will often prefer
+remote procedure calls (`let%rpc`).
+
+<<code language="ocaml" class="server"|
+let pathless_service =
+  Eliom_service.create
+    ~name:"pathless_example"
+    ~path:Eliom_service.No_path
+    ~meth:(Eliom_service.Get (Eliom_parameter.(int "i")))
+    ()
+>>
+
+More information
+<<a_manual project="eliom" chapter="server-services" fragment="pathless"|in the manual>>.
+
+===Attached services===
+It is also possible to create services identified by both a path and a
+special parameter, using functions
+<<a_api project="eliom" subproject="server"| val Eliom_service.create_attached_get >> or
+<<a_api project="eliom" subproject="server"| val Eliom_service.create_attached_post >>.
+They take a regular service (with a path) as parameter ({{{~fallback}}}).
+
+It is also possible to attach an existing pathless service to the URL of
+another service, with function
+<<a_api project="eliom" subproject="server"| val Eliom_service.attach >>.
+This allows for example to create a link towards a pathless service,
+but on another path.
+
+===External services===
+Use <<a_api project="eliom" subproject="server"| val Eliom_service.extern >> to create
+links or forms towards external Web sites as if they were Eliom services.
+
+===Predefined services===
+Use service <<a_api project="eliom" subproject="server" text="(Eliom_service.static_dir ())"| val Eliom_service.static_dir >>
+to create links towards static files (see example below for images).
+
+Use service <<a_api project="eliom" subproject="server"| val Eliom_service.reload_action >> and its variants to create links or forms towards the current URL (reload the page). From a client section, you can also call <<a_api project="ocsigen-start" subproject="server"| val Os_lib.reload>> to reload the page and restart the client-side program.
+
+<<a_manual project="eliom" chapter="server-services" |Full documentation about services>>, [[interaction|a tutorial about traditional service based Web programming]], API documentation of modules <<a_api project="eliom" subproject="server" | module Eliom_service>> and <<a_api project="eliom" subproject="server" | module Eliom_registration>>.
+
+This example shows how to insert an image using {{{static_dir}}}:
+<<code language="ocaml"|img
+  ~alt:"blip"
+  ~src:(Eliom_content.Html.F.make_uri
+         (Eliom_service.static_dir ())
+         ["dir" ; "image.jpg"])
+  ()
+>>
+
+>>
+
+
+<<section class="docblock" |
+<<header |==Forms and links==>>
+
+Function <<a_api project="eliom" subproject="server" text="Eliom_content.Html.F.a"|val Eliom_form_sigs.LINKS.a>> creates typed links to services with their parameters.
+For example, if {{{home_service}}} expects no parameter
+and {{{other_service}}} expects a string and an optional int:
+<<code language="ocaml"|
+Eliom_content.Html.F.a ~service:home_service [txt "Home"] ()
+Eliom_content.Html.F.a ~service:other_service [txt "Other"] ("hello", Some 4)
+>>
+
+Module <<a_api project="eliom" subproject="server" |module Eliom_content.Html.F>>
+defines the form's elements with the usual typed interface from TyXML.
+Use this for example if you have a client side program and
+want to manipulate the form's content from client side functions
+(for example do a server function call with the form's elements' content).
+
+In contrast,
+module <<a_api project="eliom" subproject="server" text="Eliom_content.Html.F.Form"|module Eliom_content_sigs.LINKS_AND_FORMS.Form>> defines a typed interface
+for form elements. Use this for links (see above), or if you program traditional
+server-side Web interaction (with or without client-side program). This will statically check that your forms
+match the services. Example:
+
+<<code language="ocaml"|
+let open Eliom_content.Html.F in
+Form.post_form
+ ~service:connection_service
+   (fun (name, password) ->
+     [fieldset
+       [label ~a:[a_for name] [txt "Name: "];
+        Form.input ~input_type:`Text ~name:name Form.int;
+        br ();
+        Form.input
+          ~a:[a_placeholder "Password"]
+          ~input_type:`Password
+          ~name:password
+          Form.string;
+        br ();
+        Form.input ~input_type:`Submit ~value:"Connect" Form.string
+      ]]) ()
+
+>>
+
+As you can see, function
+<<a_api project="eliom" subproject="server" text="Eliom_content.Html.F.Form.post_form"|val Eliom_content_sigs.LINKS_AND_FORMS.Form.post_form>>
+is used to create a form sending parameters using the POST HTTP method
+(and similarly, <<a_api project="eliom" subproject="server" text="get_form"|val Eliom_content_sigs.LINKS_AND_FORMS.Form.get_form>> for GET method).
+It takes the service as first parameter, and a function that will generate the form.
+This function takes the names of the GET or POST parameters as arguments.
+
+Form elements (like inputs) are also built from using the
+<<a_api project="eliom" subproject="server" text="Eliom_content.Html.F.Form"|module Eliom_content_sigs.LINKS_AND_FORMS.Form>> module.
+They take the names as parameters, and a last parameter (like {{{Form.int}}} or {{{Form.string}}}) to match the expected type.
+
+>>
+
+
+<<section class="docblock" |
+<<header |==Sessions==>>
+
+Session data is saved on server side in //Eliom references//.
+
+The following Eliom reference will count the number of visits of a user on a page:
+
+<<code language="ocaml" class="server"|
+let%server count_ref =
+  Eliom_reference.eref
+    ~scope:Eliom_common.default_session_scope
+    0 (* default value for everyone *)
+>>
+
+And somewhere in your service handler, increment the counter:
+<<code language="ocaml" class="server"|
+let%lwt count = Eliom_reference.get count_ref in
+Eliom_reference.set count_ref (count + 1);
+Lwt.return ()
+>>
+
+With function <<a_api project="eliom" subproject="server"|val Eliom_reference.eref_from_fun>>,
+you can create Eliom references without initial value. The initial value is computed for the session
+the first time you use it.
+
+An Eliom reference can be persistant (value saved on hard drive) or volatile (in memory).
+
+===Scopes===
+Sessions are relative to a browser, and implemented using browser cookies.
+But Eliom allows to create Eliom references with other //scopes// than session:
+
+|<<a_api project="eliom" subproject="server" text="global_scope"| val Eliom_common.global_scope>>|Global value for all the Web server|
+|<<a_api project="eliom" subproject="server" text="site_scope"| val Eliom_common.site_scope>>|Global value for the Eliom app in that subsite of the Web site|
+|<<a_api project="eliom" subproject="server" text="default_group_scope"| val Eliom_common.default_group_scope>>|Value for a group of sessions. For example Ocsigen Start defines a group of session for each user, making it possible to save server side data for all sessions of a user.|
+|<<a_api project="eliom" subproject="server" text="default_session_scope"| val Eliom_common.default_session_scope>>|The usual session data, based on browser cookies|
+|<<a_api project="eliom" subproject="server" text="default_process_scope"| val Eliom_common.default_process_scope>>|Server side data for a given client-side process (a tab of the browser or a mobile app). This is available only with a client-server Eliom app.|
+
+Applications based on Ocsigen Start use these scopes for user management.
+Session or client process data are discarded when a user logs in or out.
+But Ocsigen Start also defines scopes
+<<a_api project="ocsigen-start" subproject="server"| val Os_session.user_indep_session_scope>>
+and
+<<a_api project="ocsigen-start" subproject="server"| val Os_session.user_indep_process_scope>>
+which remain even if a user logs in or out.
+
+When session group is not set (for example the user is not connected),
+you can still use the group session scope: in that case, the group contains only
+one session.
+
+>>
+
+
+<<section class="docblock" |
+<<header |==Browser events==>>
+By default, event handlers on HTML elements are given as OCaml functions,
+but it works only if you have a client-server Eliom program.
+If not, you want to give a javascript expression (as a string) instead.
+To so that, use attributes functions from module {{{Raw}}}. For example
+<<a_api project="eliom" subproject="server"| val Eliom_content.Html.F.Raw.a_onclick>>
+instead of
+<<a_api project="eliom" subproject="server"| val Eliom_content.Html.F.a_onclick>>.
+
+Example:
+<<code language="ocaml" class="server"|
+Eliom_content.Html.F.(button ~a:[Raw.onclick "alert(\"beep\");"] [txt "click"])
+>>
+
+
+>>
+
+<<section class="docblock" |
+<<header |==Database access==>>
+
+You can use your favourite database library with Ocsigen.
+Ocsigen Start's template uses
+[[https://github.com/darioteixeira/pgocaml|PG'OCaml]]
+(typed queries for Postgresql using a PPX syntax extension).
+
+Here is an example, taken from Ocsigen Start's demo:
+<<code language="ocaml" class="server"|
+let get () =
+  full_transaction_block (fun dbh ->
+    [%pgsql dbh "SELECT lastname FROM ocsigen_start.users"])
+>>
+
+>>
+
+<<section class="docblock" |
+<<header |==Continuation-based Web programming==>>
+
+Eliom allows the dynamic creation of temporary services.
+This is equivalent to a programming pattern known as "continuation-based
+Web programming".
+While present in very few Web frameworks,
+it is a very powerful feature that can save you a lot of time
+when programming a server-side website.
+A typical use case is when you have a series of pages,
+each of which depending on the entries made on the previous pages,
+for example a multi-step train ticket booking.
+
+Implementing that without continuation-based Web programming is tedious:
+you must store the data previously sent by the user and find a way to
+get it for each step of the interaction. It is not possible to save it as
+session data, as you want for example to be able to have several different
+interactions in different tabs of your browser, or to press the back button of
+your browser to go back in the past. This is known as
+"the back button problem".
+
+With Eliom, you just need to create new temporary services especially for
+one user, that will depend on previous interaction with them.
+The form data will be recorded in the closure of the service handler
+function.
+In our example, you can implement a first page with a form
+(departure, destination, date, first name, last name ...).
+The form sends this data to another service.
+This second service will display a list of train tickets, each with a link
+to buy the ticket. Each of these links corresponds to a service that has been
+specifically created for this user and train, which will display the payment
+page for this ticket.
+
+To implement temporary services, we usually use pathless or attached
+services (see above). To avoid a memory leak, you can make them temporary using
+optional parameters of the service creation function ({{{?max_use}}} or {{{?timeout}}}).
+
+>>
+
+
+<<section class="docblock" |
+<<header |==Internationalisation==>>
+
+[[https://github.com/besport/ocsigen-i18n|Ocsigen i18n]]
+is an internationalisation library for your OCaml programs.
+
+Create a .tsv file with, on each line, a key and the text in several languages:
+
+{{{
+welcome_message Welcome everybody!        Bienvenue à tous !      Benvenuti a tutti !
+}}}
+
+and Ocsigen i18n will automatically generate functions like this one:
+<<code language="ocaml" class="shared"|
+let%shared welcome_message ?(lang = get_language ()) () () =
+  match lang with
+  | En -> [txt "Welcome everybody!"]
+  | Fr -> [txt "Bienvenue à tous !"]
+  | It -> [txt "Benvenuti a tutti !"]
+>>
+
+Ocsigen i18n also defines a syntax extension to use these functions:
+<<code language="ocaml" class="shared"|
+  Eliom_content.Html.F.h1 [%i18n welcome_message]
+>>
+
+Ocsigen i18n offers many other features:
+* Text can be inserted as a TyXML node (as in the example above) or as a string (ex: {{{[%i18n S.welcome_message]}}}),
+* Text can be parametrizable, or contain holes (ex: {{{[%i18n welcome ~capitalize:true ~name:"William"]}}})
+* .tsv file can be split into several modules
+
+Have a look at the
+[[https://github.com/besport/ocsigen-i18n|README file]]
+to see the full documentation,
+and see examples in
+[[https://github.com/ocsigen/ocsigen-start/blob/master/template.distillery/demo_i18n.eliom|Ocsigen Start's template]].
+
+>>
+
+<<section class="docblock" |
+<<header |==Ocsigen Server==>>
+
+//Ocsigen Server// is a full featured Web server.
+
+It is now based on [[https://github.com/mirage/ocaml-cohttp|Cohttp]].
+
+It has a powerful
+extension mechanism that makes it easy to plug your own OCaml modules
+for generating pages. Many extensions are already written:
+;<<a_manual project="ocsigenserver" chapter="staticmod"|Staticmod>>
+:    to serve static files.
+;[[wiki("eliom"):|Eliom]]
+:    to create reliable client/server Web applications
+     or Web sites in OCaml using advanced high level concepts.
+;<<a_manual project="ocsigenserver" chapter="extendconfiguration"|Extendconfiguration>>
+:    allows for more options in the configuration file.
+;<<a_manual project="ocsigenserver" chapter="accesscontrol"|Accesscontrol>>
+:    restricts access to the sites from the config file (to requests coming from a subnet, containing some headers, etc.).
+;<<a_manual project="ocsigenserver" chapter="authbasic"|Authbasic>>
+:    restricts access to the sites from the config file using Basic HTTP Authentication.
+;<<a_manual project="ocsigenserver" chapter="cgimod"|CGImod>>
+:    serves CGI scripts. It may also be used to serve PHP through CGI.
+;<<a_manual project="ocsigenserver" chapter="deflatemod"|Deflatemod>>
+:    used to compress data before sending it to the client.
+;<<a_manual project="ocsigenserver" chapter="redirectmod"|Redirectmod>>
+:    sets redirections towards other Web sites from the configuration file.
+;<<a_manual project="ocsigenserver" chapter="revproxy"|Revproxy>>
+:    a reverse proxy for Ocsigen Server.
+      It allows to ask another server to handle the request.
+;<<a_manual project="ocsigenserver" chapter="rewritemod"|Rewritemod>>
+:    changes incoming requests before sending them to other extensions.
+;<<a_manual project="ocsigenserver" chapter="outputfilter"|Outputfilter>>
+:    rewrites some parts of the output before sending it to the client.
+;<<a_manual project="ocsigenserver" chapter="userconf"|Userconf>>
+:    allows users to have their own configuration files.
+;<<a_manual project="ocsigenserver" chapter="comet"|Comet>>
+:    facilitates server to client communications.
+
+Ocsigen Server has a <<a_manual project="ocsigenserver"
+chapter="config"|sophisticated configuration>> file mechanism allowing
+complex configurations of sites.
+
+>>
diff --git a/tutos/8.0/manual/basics.md b/tutos/8.0/manual/basics.md
new file mode 100644
index 00000000..e69de29b
diff --git a/tutos/8.0/manual/basics.wiki b/tutos/8.0/manual/basics.wiki
new file mode 100644
index 00000000..bc3774b9
--- /dev/null
+++ b/tutos/8.0/manual/basics.wiki
@@ -0,0 +1,1245 @@
+=Client-server application programming guide=
+
+This tutorial has been tested with Eliom 11.0.0.
+
+This page describes the main concepts you need to master to become fully operational
+with Ocsigen. Use it as your training plan or as a cheatcheet while programming.
+
+Depending on your needs, you may not need to learn all this. Ocsigen is
+very flexible and can be used both for Web site programing (see
+[[basics-server|this page]]) or more complex client-server Web apps and
+their mobile counterparts.
+
+In parallel to the reading of that page,
+we recommend to generate your first [[wiki("ocsigen-start"):|Ocsigen Start]] app to see
+running examples of all these concepts (see [[start|that page]]).
+
+<<outline| <<header| **Table of contents** >> >>
+
+<<section class="docblock" |
+<<header |==OCaml==>>
+
+This programming guide assumes you know the //OCaml// language.
+Many resources and books are available online.
+
+>>
+
+<<section class="docblock" |
+<<header |==Lwt==>>
+
+//Lwt// is a concurrent programming library for OCaml, initially written
+by Jérôme Vouillon in 2001 for the
+[[https://github.com/bcpierce00/unison|Unison]] file synchronizer.
+It provides an alternative to the more usual preemptive threads approach
+for programming concurrent applications, that avoids most problems of concurrent
+data access and deadlocks.
+It is used by Ocsigen Server and Eliom and has now become one of the
+standard ways to implement concurrent applications in OCaml.
+All your Web sites must be written in Lwt-compatible way!
+
+<<div class="focused"|
+===How it works===
+Instead of calling blocking functions, like {{{Unix.sleep}}}
+or {{{Unix.read}}}, that could block the entire program, replace them
+by their cooperative counterparts ({{{Lwt_unix.sleep}}},
+{{{Lwt_unix.read}}}, etc.). Instead of taking time to execute,
+they always return immediately a //promise// of the result,
+of type {{{'a Lwt.t}}}. This type is abstract, and the only way
+to use the result is to //bind// a function to the promise.
+{{{Lwt.bind p f}}} means: "when promise {{{p}}} is completed, give its result
+to function {{{f}}}".
+
+Syntax {{{let%lwt x = p in e}}} is equivalent to {{{Lwt.bind p (fun x -> e)}}}
+and makes it very natural to sequentialize computations without blocking the rest
+of the program.
+>>
+
+To learn Lwt, read this [[lwt|short tutorial]], or its [[wiki("lwt"):|user manual]].
+
+>>
+
+<<section class="docblock" |
+<<header |==Ocsigen Server: A full featured extensible Web server in OCaml==>>
+Ocsigen Server can be used either as a library for you OCaml programs, or as
+an executable, taking its configuration from a file (and with dynamic linking).
+
+Extensions add features to the server. For example, Staticmod makes it possible
+to serve static files, Deflatemod to compress the output, Redirectmod to
+configure redirections etc.
+
+Install Ocsigen Server with:
+{{{
+opam install ocsigenserver
+}}}
+
+===Use as a library===
+
+Let's create a new OCaml project with Dune:
+{{{dune init project mysite}}}
+
+To include a Web server in your OCaml program, just add
+package {{{ocsigenserver}}} to your Dune file, together with all the extensions
+you need. For example, modify file {{{bin/dune}}} like this:
+
+{{{
+(executable
+ (public_name mysite)
+ (name main)
+ (libraries
+  ocsigenserver
+  ocsigenserver.ext.staticmod))
+}}}
+
+The following command will launch a server, serving static files from 
+directory {{{static}}}:
+<<code language="ocaml"|
+let () = 
+  Ocsigen_server.start [ Ocsigen_server.host [Staticmod.run ~dir:"static" ()]]
+>>
+Put this in file {{{bin/main.ml}}}, and run {{{dune exec mysite}}}.
+
+By default, the server runs on port 8080. Create a {{{static}}} directory
+with some files and try to fetch them using your Web browser.
+
+===Use as an executable===
+Alternatively, you can run command {{{ocsigenserver}}} with a configuration
+file:
+{{{
+ocsigenserver -c mysite.conf
+}}}
+
+The following configuration file corresponds to the program above:
+{{{
+<ocsigen>
+  <server>
+    <port>8080</port>
+    <extension findlib-package="ocsigenserver.ext.staticmod"/>
+    <host>
+      <static dir="static" />
+    </host>
+  </server>
+</ocsigen>
+}}}
+
+>>
+
+<<section class="docblock" |
+<<header |==TyXML: typing HTML==>>
+
+TyXML statically checks that your OCaml functions will never
+generate wrong HTML. For example a program that could generate a paragraph
+containing another paragraph will be rejected at compile time.
+
+Example of use:
+<<code language="ocaml"|
+let open Eliom_content.Html.D in
+html
+  (head (title (txt "Ex")) [])
+  (body [h1 ~a:[a_id "toto"; a_class ["blah"; "blih"]]
+           [txt "Hallo!"]])
+>>
+
+<<|From Eliom > 2.2
+(you can also use <<a_api project="eliom" subproject="server"|val Eliom_tools.D.html> > to ease the creation of the {{{head}}} tag.)
+
+(Eliom_tools.F.head
+    ~title:"Hello"
+    ~css:[["css";"style.css"]]
+    ~js:[["libjs";"mylib.js"];
+         ["libjs";"otherlib.js"]]
+    ())
+>>
+
+
+<<div class="focused"|
+===How it works===
+
+TyXML builds the page as an OCaml data-structure using a construction function
+for each HTML tag. These functions take as parameters and return nodes
+of type {{{'a elt}}} where {{{'a}}} is a polymorphic variant type added in the
+module signature to constrain usage (phantom type).
+>>
+
+===Example of typing error===
+
+<<code language="ocaml"|
+p [p [txt "Aïe"]]
+   ^^^^^^^^^^^^^
+Error: This expression has type
+         ([> Html_types.p ] as 'a) Eliom_content.Html.F.elt =
+           'a Eliom_content.Html.elt
+       but an expression was expected of type
+         ([< Html_types.p_content_fun ] as 'b) Eliom_content.Html.F.elt =
+           'b Eliom_content.Html.elt
+       Type 'a = [> `P ] is not compatible with type
+         'b =
+           [< `A of Html_types.phrasing_without_interactive
+            | `Abbr
+            | `Audio of Html_types.phrasing_without_media
+            ...
+            | `Output
+            | `PCDATA
+            | `Progress
+            | `Q
+            ...
+            | `Wbr ]
+       The second variant type does not allow tag(s) `P
+>>
+Read more about TyXML in this [[html|short tutorial]] or in its [[wiki("tyxml"):|user manual]].
+
+>>
+
+<<section class="docblock" |
+<<header |==Eliom: Services==>>
+
+Pages are generated by //services//.
+Eliom provides a very simple (yet extremely powerful) service creation and identification mechanism.
+
+To create a service, call <<a_api project="eliom" subproject="server"| val Eliom_service.create>>.
+For example, the following code defines a service at URL {{{/foo}}},
+that will use GET HTTP method, and take one parameter of type {{{string}}},
+named {{{myparam}}}, and one of type {{{int}}}, named {{{i}}}.
+<<code language="ocaml" class="server"|
+let myservice =
+  Eliom_service.create
+    ~path:(Eliom_service.Path ["foo"])
+    ~meth:(Eliom_service.Get (Eliom_parameter.(string "myparam" ** int "i")))
+    ()
+>>
+
+Then register an OCaml function as handler on this service:
+
+<<code language="ocaml" class="server"|
+let () =
+  Eliom_registration.Html.register ~service:myservice
+    (fun (myparam, _i) () ->
+      Lwt.return
+         Eliom_content.Html.F.(html (head (title (txt "")) [])
+                                    (body [h1 [txt myparam]])))
+>>
+
+The handler takes as first parameter the GET page parameters, typed according to
+the parameter specification given while creating the service.
+The second parameter is for POST parameters (see below).
+
+===Outputs===
+
+Services can return a typed HTML page as in the example above, but also
+any other kind of result. To choose the return type, use the register function
+from the corresponding submodule of
+<<a_api project="eliom" | module Eliom_registration >>:
+
+<<div id="servicetable"|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="Html"| module Eliom_registration.Html >>|@@colspan="3"@@Services returning typed HTML pages|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="Html_text"| module Eliom_registration.Html >>|@@colspan="3"@@Services returning untyped HTML pages as strings|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="App"| module Eliom_registration.ELIOM_APPL >>|@@colspan="3"@@Apply this functor to generate registration functions for services belonging to an Eliom client/server application. These services also return typed HTML pages, but Eliom will automatically add the client-side program as a JS file, and all the data needed (values of all injections, etc.)|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="Flow"| module Eliom_registration.Flow5 >>|@@colspan="3"@@Services returning portions of HTML pages.|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="Action"| module Eliom_registration.Action >>|@@colspan="3"@@Services performing actions (server side effects) with or without reloading the page (e.g. login, logout, payment, modification of user information...)|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="Files"| module Eliom_registration.File >>|@@colspan="3"@@Serve files from the server hard drive|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="Ocaml"| module Eliom_registration.Ocaml >>|@@colspan="3"@@Services returning OCaml values to be sent to a client side OCaml program (this kind of services is used as low level interface for server functions -- see below)|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="String"| module Eliom_registration.String >>|@@colspan="3"@@Services returning any OCaml string (array of byte)|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="Redirection"| module Eliom_registration.Redirection >>|@@colspan="3"@@Services returning an HTTP redirection to another service|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="Any"| module Eliom_registration.Any >>|@@colspan="3"@@To be used to make the service chose what it sends. Call function {{{send}}} from the corresponding module to choose the output.|
+|=@@class="row"@@<<a_api project="eliom" subproject="server" text="Customize"| module Eliom_registration.Customize >>|@@colspan="3"@@Apply this functor to define your own registration module|
+>>
+
+===Parameters===
+
+Module <<a_api project="eliom" subproject="server"| module Eliom_parameter>>
+is used to describe the type of service parameters.
+
+Examples:
+<<code language="ocaml"|
+Eliom_parameter.(int "i" ** (string "s" ** bool "b"))
+   (* /path?i=42&s=toto&b=on *)
+
+Eliom_parameter.(int "i" ** opt (string "s"))
+   (* An integer named i, and an optional string named s *)
+
+Eliom_parameter.(int "i" ** any)
+   (* An integer named i, and any other parameters, as an association list
+      of type (string * string) list *)
+
+Eliom_parameter.(set string "s")
+   (* /path?s=toto&s=titi&s=bobo *)
+
+Eliom_parameter.(list "l" (int "i"))
+   (* /path?l[0]=11&l[1]=2&l[2]=42 *)
+
+Eliom_parameter.(suffix (int "year" ** int "month"))
+   (* /path/2012/09 *)
+
+Eliom_parameter.(suffix_prod (int "year" ** int "month") (int "a"))
+   (* /path/2012/09?a=4 *)
+
+>>
+
+===POST services===
+
+To define a service with POST parameters, just change the {{{~meth}}} parameter.
+For example the following example takes the same GET parameters as the service
+above, plus one POST parameter of type string, named "mypostparam".
+<<code language="ocaml" class="server"|
+~meth:(Eliom_service.Post (Eliom_parameter.((string "myparam" ** int "i"),
+                                            (string "mypostparam"))))
+>>
+
+===Pathless services===
+
+Pathless services are not identified by the path in the URL,
+but by a name given as parameter. This name can be specified manually
+using the {{{~name}}} optional parameter, otherwise, a random name is
+generated automatically.
+This is used to implement server functions (see below).
+If you are programming a client-server Eliom app, you will probably prefer server functions.
+If you are using traditional service based Web programming,
+use this to make a functionality available from all pages
+(for example: log-in or log-out actions, add something in a shopping basket ...).
+
+<<code language="ocaml" class="server"|
+let pathless_service =
+  Eliom_service.create
+    ~name:"pathless_example"
+    ~path:Eliom_service.No_path
+    ~meth:(Eliom_service.Get (Eliom_parameter.(int "i")))
+    ()
+>>
+
+More information
+<<a_manual project="eliom" chapter="server-services" fragment="pathless"|in the manual>>.
+
+===External services===
+Use <<a_api project="eliom" subproject="server"| val Eliom_service.extern >> to create
+links or forms towards external Web sites as if they were Eliom services.
+
+===Predefined services===
+Use service <<a_api project="eliom" subproject="server" text="(Eliom_service.static_dir ())"| val Eliom_service.static_dir >>
+to create links towards static files (see example below for images).
+
+Use service <<a_api project="eliom" subproject="server"| val Eliom_service.reload_action >> and its variants to create links or forms towards the current URL (reload the page). From a client section, you can also call <<a_api project="ocsigen-start" subproject="server"| val Os_lib.reload>> to reload the page and restart the client-side program.
+
+<<a_manual project="eliom" chapter="server-services" |Full documentation about services>>, [[interaction|a tutorial about traditional service based Web programming]], API documentation of modules <<a_api project="eliom" subproject="server" | module Eliom_service>> and <<a_api project="eliom" subproject="server" | module Eliom_registration>>.
+
+This example shows how to insert an image using {{{static_dir}}}:
+<<code language="ocaml"|img
+  ~alt:"blip"
+  ~src:(Eliom_content.Html.F.make_uri
+         (Eliom_service.static_dir ())
+         ["dir" ; "image.jpg"])
+  ()
+>>
+
+>>
+
+<<section class="docblock" |
+<<header |==Compiling==>>
+
+In this section, we will show how to compile and run a //server-side only// Web site by creating your project manually.
+
+First, create the directories will we use for data (logs, etc.):
+{{{
+mkdir -p local/var/log/mysite
+mkdir -p local/var/data/mysite
+mkdir -p local/var/run
+}}}
+
+===Build an executable===
+This section shows how to create a static executable for you program
+(without configuration file).
+
+Run the following command:
+{{{
+opam install ocsipersist-sqlite-config eliom
+}}}
+
+Add packages {{{ocsipersist-sqlite}}} and {{{eliom.server}}} to file
+{{{bin/dune}}}, in the "libraries" section.
+
+Copy the definition and registration of service {{{myservice}}} at the beginning 
+of file {{{bin/main.ml}}},
+and replace the call to {{{Ocsigen_server.start}}} by the following lines:
+
+<<code language="ocaml"|
+let () = 
+  Ocsigen_server.start 
+    ~command_pipe:"local/var/run/mysite-cmd"
+    ~logdir:"local/var/log/mysite"
+    ~datadir:"local/var/data/mysite"
+    ~default_charset:(Some "utf-8")
+    [
+      Ocsigen_server.host
+       [ Staticmod.run ~dir:"local/var/www/mysite" ()
+       ; Eliom.run () ]
+    ]
+>>
+
+Build and execute the program with:
+{{{
+dune exec mysite
+}}}
+
+Open URL {{{http://localhost:8080/foo?myparam=Hello&i=27}}} with your browser.
+
+===Use with ocsigenserver===
+Alternatively, you can decide to build your Eliom app as a library and 
+load it dynamically into ocsigenserver using a configuration file.
+
+{{{
+opam install ocsipersist-sqlite-config eliom
+dune init proj --kind=lib mysite
+cd mysite
+}}}
+
+Add {{{(libraries eliom.server)}}} into file {{{lib/dune}}}.
+
+Create your {{{.ml}}} files in directory {{{lib}}}.
+For example, copy the definition and registration of service {{{myservice}}} above.
+
+Compile:
+{{{
+dune build
+}}}
+
+Create a configuration file {{{mysite.conf}}}
+with this content on your project root directory:
+{{{
+<ocsigen>
+  <server>
+    <port>8080</port>
+
+    <logdir>local/var/log/mysite</logdir>
+    <datadir>local/var/data/mysite</datadir>
+    <charset>utf-8</charset>
+
+    <commandpipe>local/var/run/mysite-cmd</commandpipe>
+    <extension findlib-package="ocsigenserver.ext.staticmod"/>
+    <extension findlib-package="ocsipersist-sqlite"/>
+    <extension findlib-package="eliom.server"/>
+    <host hostfilter="*">
+      <static dir="local/var/www/mysite" />
+      <eliommodule module="_build/default/lib/mysite.cma" />
+      <eliom/>
+    </host>
+  </server>
+</ocsigen>
+}}}
+Launch the application:
+{{{
+ocsigenserver -c mysite.conf
+}}}
+Open URL {{{http://localhost:8080/foo?myparam=Hello&i=27}}} with your browser.
+>>
+
+<<section class="docblock" |
+<<header |==Forms and links==>>
+
+Functions <<a_api project="eliom" subproject="server" text="Eliom_content.Html.F.a"|val Eliom_form_sigs.LINKS.a>> and
+<<a_api project="eliom" subproject="server" text="D.a"|val Eliom_form_sigs.LINKS.a>>
+create typed links to services with their parameters.
+For example, if {{{home_service}}} expects no parameter
+and {{{other_service}}} expects a string and an optional int:
+<<code language="ocaml"|
+Eliom_content.Html.D.a ~service:home_service [txt "Home"] ()
+Eliom_content.Html.D.a ~service:other_service [txt "Other"] ("hello", Some 4)
+>>
+
+Modules <<a_api project="eliom" subproject="server" |module Eliom_content.Html.F>> and
+<<a_api project="eliom" subproject="server" text="D"|module Eliom_content.Html.D>>
+define the form's elements with the usual typed interface from TyXML.
+Use this for example if you have a client side program and
+want to manipulate the form's content from client side functions
+(for example do a server function call with the form's elements' content).
+
+In contrast,
+modules <<a_api project="eliom" subproject="server" text="Eliom_content.Html.F.Form"|module Eliom_content_sigs.LINKS_AND_FORMS.Form>> and
+<<a_api project="eliom" subproject="server" text="D.Form"|module Eliom_content_sigs.LINKS_AND_FORMS.Form>>
+define a typed interface
+for form elements. Use this for links (see above), or if you program traditional
+server-side Web interaction (with or without client-side program). This will statically check that your forms
+match the services. See more information in the
+<<a_manual project="tuto" chapter="basics-server"|server-side programming manual>>.
+
+>>
+<<section class="docblock" |
+<<header |==Js_of_ocaml==>>
+
+//Js_of_ocaml// is a compiler of OCaml bytecode to JavaScript,
+allowing to run Ocaml programs in a Web browser.
+Its key features are the following:
+* The whole language, and most of the standard library are supported.
+* You can use a standard installation of OCaml to compile your programs. In particular, you do not have to recompile a library to use it with Js_of_ocaml.
+* It comes with a library to interface with the browser API.
+
+Interaction with Javascript can be done:
+* either with untyped function calls (module {{{Js.Unsafe}}}),
+* or you can generate an interface just by writing an annotated {{{.mli}}}
+using [[https://github.com/LexiFi/gen_js_api|Gen_js_api]],
+* or you use a syntax extension to generate typed calls, using a
+{{{.mli}}} file describing Javascript objects
+with OCaml class types as phantom types.
+
+The latter is used for the default Javascript library. Here is how it works:
+
+|{{{obj##.m}}}|access a JS property (has type {{{u}}} when {{{obj : <m : u prop> Js.t}}})|
+|{{{obj##.m := e}}}|change a JS property (when {{{obj : <m : u prop> Js.t}}} and {{{e:u}}})|
+|{{{obj##m e_1 ... e_n}}}|call a JS method (has type {{{u}}} when {{{obj : <m : t_1 -> ... -> t_n -> u meth; ..> Js.t}}} and {{{e_i : t_i}}})|
+|{{{new%js constr e1 ... en}}}|create a JS object (has type {{{u Js.t}}} when {{{constr : (t_1 -> ... -> t_n -> u Js.t) Js.constr}}} and {{{e_i : t_i}}})|
+
+Module [[https://ocsigen.org/js_of_ocaml/latest/api/js_of_ocaml/Js_of_ocaml/Js/index.html|Js_of_ocaml.Js]]
+defines the base JS types and conversion functions from/to OCaml types.
+Example: {{{Js.Opt}}} to take into account nullable values, {{{Js.Optdef}}} for undefined values,
+or functions like {{{Js.to_string}}} and {{{Js.string}}} for consersions to and from
+OCaml strings.
+
+Use modules [[https://ocsigen.org/js_of_ocaml/latest/api/js_of_ocaml/Js_of_ocaml/Dom/index.html|Js_of_ocaml.Dom]]
+and [[https://ocsigen.org/js_of_ocaml/latest/api/js_of_ocaml/Js_of_ocaml/Dom_html/index.html|Js_of_ocaml.Dom_html]]
+to interact with the DOM, or more specifically with HTML.
+
+You can test Js_of_ocaml online in this
+[[https://ocsigen.org/js_of_ocaml/latest/manual/files/toplevel/index.html|Toplevel running in the browser]]
+
+===Examples===
+<<code language="ocaml"|
+# Dom_html.document;;
+- : Js_of_ocaml.Dom_html.document Js_of_ocaml__.Js.t = <abstr>
+# Dom_html.document##.body;;
+- : Js_of_ocaml.Dom_html.bodyElement Js_of_ocaml__.Js.t = <abstr>
+# Dom_html.document##.qkjhkjqhkjqsd;;
+Line 1, characters 0-17:
+Error: This expression has type
+         < activeElement : Js_of_ocaml.Dom_html.element Js_of_ocaml__.Js.t
+                           Js_of_ocaml__.Js.opt
+                           Js_of_ocaml__.Js.readonly_prop;
+...
+...
+           write : Js_of_ocaml__.Js.js_string Js_of_ocaml__.Js.t ->
+                   unit Js_of_ocaml__.Js.meth >
+       It has no method qkjhkjqhkjqsd
+# Dom_html.window;;
+- : Js_of_ocaml.Dom_html.window Js_of_ocaml__.Js.t = <abstr>
+# Dom_html.window##alert (Js.string "Salut");;
+- : unit = ()
+# Dom_html.document##.body##querySelector (Js.string "h3");;
+- : Js_of_ocaml.Dom_html.element Js_of_ocaml__.Js.t Js_of_ocaml__.Js.opt =
+<abstr>
+# let fsth3 = Dom_html.document##.body##querySelector (Js.string "h3");;
+  (* Get the first h3 element in the page *)
+val fsth3 :
+  Js_of_ocaml.Dom_html.element Js_of_ocaml__.Js.t Js_of_ocaml__.Js.opt =
+  <abstr>
+# Js.Opt.iter fsth3 (fun e -> e##.style##.color := Js.string "#ff0000");;
+  (* Change its color *)
+- : unit = ()
+# Dom.appendChild Dom_html.document##.body (Eliom_content.Html.(To_dom.of_p (F.p [F.txt "Salut"])));;
+  (* Append a paragraph generated with TyXML to the page *)
+- : unit = ()
+# Firebug.console##log (Js.string "toto");;
+- : unit = ()
+# Firebug.console##log [1;2];;
+- : unit = ()
+# Firebug.console##log (Dom_html.document##.body);;
+- : unit = ()
+>>
+
+>>
+
+<<section class="docblock" |
+<<header |==HTML: Functional and DOM semantics==>>
+
+===DOM nodes and TyXML/Eliom_content nodes===
+
+Functions [[https://ocsigen.org/js_of_ocaml/latest/api/js_of_ocaml-tyxml/Js_of_ocaml_tyxml/Tyxml_cast_sigs/module-type-OF/index.html|{{{Eliom_content.Html.To_dom.of_element}}}, {{{Eliom_content.Html.To_dom.of_div}}}, etc.]]
+help to convert TyXML/Eliom_content nodes into the DOM/js_of_ocaml counterparts.
+
+Module <<a_api project="eliom" subproject="client"|module Eliom_content.Html.Manip>>
+allows direct manipulation of TyXML nodes without conversion (only for D nodes)
+(see for example
+<<a_api project="eliom" subproject="client"|val Eliom_content.Html.Manip.appendChild>>,
+<<a_api project="eliom" subproject="client"|val Eliom_content.Html.Manip.removeSelf>>
+<<a_api project="eliom" subproject="client"|val Eliom_content.Html.Manip.Class.add>>).
+
+
+===F or D===
+
+Eliom uses TyXML to create several kinds of nodes:
+
+Module <<a_api project="eliom" subproject="server"| module Eliom_content.Html.F>>
+will create functional values representing
+your nodes. On client side, calling {{{Eliom_content.Html.To_dom.of_element}}}
+on these nodes will create a new DOM node.
+
+Module <<a_api project="eliom" subproject="server"| module Eliom_content.Html.D>>
+will automatically insert an id in the
+attributes of the node, to label a precise instance of the node in the DOM.
+On client side, calling {{{Eliom_content.Html.To_dom.of_element}}}
+on these nodes will return the actual version of the nodes that are currently
+in the page.
+
+In a client server Eliom app,
+you probably always want to use {{{Eliom_content.Html.D}}}
+each time you want to bind events on
+an element (and more generally if you need to inject this element using {{{~%}}}).
+
+
+Read more about {{{Eliom_content.Html}}} (D or F?) in
+<<a_manual project="eliom" chapter="clientserver-html"|this manual page>>.
+
+>>
+
+<<section class="docblock" |
+<<header |==Eliom: client-server apps==>>
+
+Eliom can transform OCaml into a multi-tier language, allowing one to
+implement (both the server and client parts of) a distributed application
+entirely in OCaml, as a single program.
+This greatly simplifies communication between server and client.
+
+Pages can be generated either on the server or the client.
+The first HTTP request usually returns a server-side generated HTML page
+(thus indexable by search engines), but subsequent page generations can be done
+by the client for better performance.
+In a mobile app, all pages are usually generated on the client.
+
+One of the key features of Eliom is that it allows
+one to mix traditional Web interactions (URLs, forms, links,
+bookmarks, back button) with dynamic client side features. In
+particular, the client-side program **does not stop** when the user
+clicks on a link, sends a form, or presses the back button--yet the user
+can still save bookmarks on pages! This opens up a wide field of new
+possibilities.
+
+===Sections===
+
+Eliom statically generates two programs from the same set of OCaml files:
+one compiled to native code (or bytecode) to be executed on the server,
+the other one compiled to Javascript with Js_of_ocaml to be executed
+in the browser.
+
+PPX annotations allow to split the code into these two programs:
+
+|{{{ let%shared ... = ... }}}|Code to be included in both the client and server apps|
+|{{{ let%client ... = ... }}}|Code to be included in client app only|
+|{{{ let%server ... = ... }}}|Code to be included in server app only|
+
+Same for {{{module%shared}}}, {{{open%shared}}}, {{{type%shared}}} etc.
+
+@@class="centered"@@{{@@class="img-col-width-400"@@files/tutorial/client-server.svg|Client-server build system}}
+
+===Client values===
+Fragments of client code can be included in server (or shared) sections.
+
+Example:
+
+<<code language="ocaml" class="server"|
+  button ~a:[a_onclick [%client fun ev -> ... ]] [ ... ]
+>>
+
+The syntax is {{{[%client (<value> : <type>)]}}}.
+Type annotation is almost always required.
+
+These client fragments can be manipulated as server side OCaml values:
+<<code language="ocaml" class="server"|
+let%server x : int Eliom_client_value.t = [%client 1 + 3 ]
+>>
+
+If such section is reached while generating a page on server side,
+the client-side code will be executed when the page is displayed.
+
+If such section is reached while generating a page on client side,
+the client-side code will be executed immediately
+
+If such section is reached during module initialization on the server
+(global client section), it will be executed on client side everytime
+a new client side program is launched.
+
+The tutorial [[tutowidgets|Client-Server Widgets]]
+shows how client values can be manipulated
+on server side.
+
+===Injections===
+
+Server side values can be injected in client code by prefixing
+them with {{{~%}}} as in this example:
+<<code language="ocaml" class="server"|
+let%server ... =
+  ...
+  let x = ... in
+  [%client[ ... ~%x ... ]]
+  ...
+>>
+The value will automatically be sent with the page by Eliom.
+
+It is possible to combine injections and client-values:
+<<code language="ocaml" class="server"|
+let%server x : int Eliom_client_value.t = [%client 1 + 3 ]
+>>
+<<code language="ocaml" class="client"|
+let%client c : int = 3 + ~%x
+>>
+
+===Calling server side functions from the client===
+
+Eliom makes it possible to call server side OCaml functions from your
+client-side program. You must export these functions explicitely,
+and declare the type of their parameters. Example:
+
+<<code language="ocaml" class="shared"|
+let%rpc g (i : int) : string Lwt.t =
+  Lwt.return (string_of_int (i + Random.int 1000))
+>>
+
+Warning: type annotations are mandatory here
+so that the ppx can automatically inject the right conversion functions.
+These functions are generated automatically by
+[[https://github.com/ocsigen/deriving|Deriving]], as long as it knows
+a deriver for each subtype. To create a deriver for your own types
+just append {{{[@@deriving json]}}} after your type declaration. Example:
+
+<<code language="ocaml" class="shared"|
+type%shared t = A | B
+[@@deriving json]
+>>
+
+[[http://ocsigen.org/js_of_ocaml/latest/manual/ppx-deriving|More documentation about the JSON deriver]].
+
+<<div class="focused"|
+===How it works===
+
+The following picture shows two examples of requests:
+* First, the browser asks for a new page, and the server generates the page
+* then the user clicks on a link in the page, and the page is generated by the client-side program (because the service is registered on both sides). In this example, while generating the page, the client does a RPC to the server.
+
+In both cases (first request or RPC), the server returns the expected value, but also the value of injections and an order for the client-side program to execute the client-values met during te server-side computation.
+
+@@class="centered"@@{{@@class="img-col-width-400"@@files/tutorial/client-server-req.svg|Example of requests}}
+
+Tip 1: You can avoid waiting for the RPC to return by using a spinner from Ocsigen Toolkit (see module <<a_api project="ocsigen-toolkit" subproject="server"|module Ot_spinner>>). Thus, the client-side generated page will be displayed without delay.
+
+Tip 2: To delay the execution of a client fragment after the page is actually displayed, you might want to use function
+<<a_api project="ocsigen-toolkit" subproject="client"|val Ot_nodeready.nodeready>> from Ocsigen Toolkit.
+
+Regardless of the construction used and their combination, there is
+only one communication from server to client, when the Web page is
+sent. This is due to the fact that client values are not executed
+immediately when encountered inside server code.  The intuitive
+semantic is the following: client code is not executed when
+encountered, instead it is registered for later execution, once the
+Web page has been sent to the client. Then all the client code is
+executed in the order it was encountered on the server, with the value
+of injections that was also sent with the page.
+
+For each client-values, the client-side PPX will create a function in
+the client-side program. The parameters of this function are all the
+injections it contains.
+
+The server-side PPX will replace the client-value by some code
+that will insert in the currently generated page some instruction to
+ask the client-side program to call the corresponding functions.
+Their arguments (injections) are serialized at the same time by the
+server-side program and also inserted in the generated page.
+>>
+
+===Example===
+This section shows a typical example of client-server code: call a function
+when user clicks on a page element. Take time to analyse this example,
+as most of your code will probably be very similar.
+
+<<code language="ocaml" class="client"|
+open%client Js_of_ocaml
+open%client Js_of_ocaml_lwt
+open%client Eliom_content.Html>>
+<<code language="ocaml" class="shared"|open%shared Eliom_content.Html.F>>
+<<code language="ocaml" class="server"|let%server theservice =
+  Eliom_service.create
+    ~path:["ex"]
+    ~meth:(Eliom_service.Get Eliom_parameter.unit)
+    ()>>
+<<code language="ocaml" class="client"|let%client theservice = ~%theservice>>
+<<code language="ocaml" class="shared"|
+
+let%shared () =
+  My_app.register ~service:theservice (fun () () ->
+      let aa = string_of_int (Random.int 1000) in
+      let _ = [%client (print_endline ~%aa : unit)] in (* print in browser console *)
+      let b = Eliom_content.Html.D.button [txt aa] in
+      let _ =
+        (* binding clicks on button (see browser events below) *)
+        [%client
+          (Lwt.async (fun () ->
+               Lwt_js_events.clicks (To_dom.of_element ~%b) (fun _ _ ->
+                   Dom_html.window##alert (Js.string (~%aa));
+                   Lwt.return_unit))
+            : unit)]
+      in
+      Lwt.return (html (head (title (txt "Example")) [])
+                       (body [h1 [txt aa]; b])))
+>>
+
+Service handlers and service registration
+are usually written in shared sections to enable
+page generation on both sides.
+
+* Examples of client sections, injections or server functions can be found in
+the demo included in
+[[https://github.com/ocsigen/ocsigen-start/blob/master/template.distillery/demo_rpc.eliom|Ocsigen-Start's app template]].
+* [[application|This page]] is a step by step introduction to client-server programming with Eliom for beginners.
+* [[tutowidgets|This one]] is a quick introduction for more experienced OCaml developers.
+* Comprehensive documentation on client-server programming can be found in
+<<a_manual project="eliom" page="intro"|Eliom's user manual>>.
+>>
+
+<<section class="docblock" |
+<<header |==Compiling a client-server app==>>
+
+Compiling a client-server app requires a dedicated build system,
+which will separate server-side and client-side code, compile each side,
+and check types.
+To make things easier, Eliom provides several application templates
+containing the build system.
+
+For this tutorial, we recommend to create a project with Ocsigen Start's template.
+Ocsigen Start provides a ready to go app with many code samples you can use to learn.
+It also provides user management (create an account, recover lost password, etc.).
+If you plan to build an app with these features, Ocsigen Start is a good basis.
+
+Install Ocsigen Start:
+{{{
+opam install ocsigen-start
+}}}
+Then:
+{{{
+eliom-distillery -template os.pgocaml -name myapp
+}}}
+It contains by default some code examples that you can remove or adapt to your own needs.
+Have a look at the {{{README}}} file.
+
+If you don't want to use Ocsigen Start, you can use one of the basic templates:
+{{{
+eliom-distillery -template app.exe -name myapp
+}}}
+(to build a static executable without config file)
+or
+{{{
+eliom-distillery -template app.lib -name myapp
+}}}
+(to build your app as a library that will be loaded dynamically in Ocsigen Server using a config file).
+
+Have a look at the {{{README}}} file.
+
+If these templates are not available, you are probably using an old version of Eliom.
+Try to upgrade, or use old template names (see {{{eliom-distillery -list-templates}}}).
+
+>>
+
+
+<<section class="docblock" |
+<<header |==Sessions==>>
+
+Session data is saved on server side in //Eliom references//.
+
+The following Eliom reference will count the number of visits of a user on a page:
+
+<<code language="ocaml" class="server"|
+let%server count_ref =
+  Eliom_reference.eref
+    ~scope:Eliom_common.default_session_scope
+    0 (* default value for everyone *)
+>>
+
+And somewhere in your service handler, increment the counter:
+<<code language="ocaml" class="server"|
+let%lwt count = Eliom_reference.get count_ref in
+Eliom_reference.set count_ref (count + 1);
+Lwt.return ()
+>>
+
+With function <<a_api project="eliom" subproject="server"|val Eliom_reference.eref_from_fun>>,
+you can create Eliom references without initial value. The initial value is computed for the session
+the first time you use it.
+
+An Eliom reference can be persistant (value saved on hard drive) or volatile (in memory).
+
+===Scopes===
+Sessions are relative to a browser, and implemented using browser cookies.
+But Eliom allows to create Eliom references with other //scopes// than session:
+
+|<<a_api project="eliom" subproject="server" text="global_scope"| val Eliom_common.global_scope>>|Global value for all the Web server|
+|<<a_api project="eliom" subproject="server" text="site_scope"| val Eliom_common.site_scope>>|Global value for the Eliom app in that subsite of the Web site|
+|<<a_api project="eliom" subproject="server" text="default_group_scope"| val Eliom_common.default_group_scope>>|Value for a group of sessions. For example Ocsigen Start defines a group of session for each user, making it possible to save server side data for all sessions of a user.|
+|<<a_api project="eliom" subproject="server" text="default_session_scope"| val Eliom_common.default_session_scope>>|The usual session data, based on browser cookies|
+|<<a_api project="eliom" subproject="server" text="default_process_scope"| val Eliom_common.default_process_scope>>|Server side data for a given client-side process (a tab of the browser or a mobile app).|
+
+Applications based on Ocsigen Start use these scopes for user management.
+Session or client process data are discarded when a user logs in or out.
+But Ocsigen Start also defines scopes
+<<a_api project="ocsigen-start" subproject="server"| val Os_session.user_indep_session_scope>>
+and
+<<a_api project="ocsigen-start" subproject="server"| val Os_session.user_indep_process_scope>>
+which remain even if a user logs in or out.
+
+When session group is not set (for example the user is not connected),
+you can still use the group session scope: in that case, the group contains only
+one session.
+
+>>
+
+
+<<section class="docblock" |
+<<header |==Browser events==>>
+
+Attributes like {{{a_onclick}}} in module {{{Eliom_content.Html.D}}} or {{{F}}}
+take a client side function as parameter:
+
+<<code language="ocaml" class="shared"|
+button ~a:[a_onclick [%client fun ev -> ... ]] [ ... ]
+>>
+
+Module {{{Lwt_js_events}}} of Js_of_ocaml defines a way to bind browser events
+using Lwt promises.
+
+For example,
+the following code will wait for a click on element {{{d}}} before continuing:
+<<code language="ocaml" class="client"|
+let%lwt ev = Lwt_js_events.click (Eliom_content.Html.To_dom.of_element ~%d) in
+...
+>>
+
+Functions like {{{Lwt_js_events.clicks}}} or {{{Lwt_js_events.mousedowns}}}
+(ending with "s")
+will call the function given as second parameter
+**for each** {{{click}}} or {{{mousedown}}} events
+on their first parameter.
+
+For example, the following code (inspired from [[https://ocsigen.org/tuto/latest/manual/application|this tutorial]])
+will wait for all {{{mousedown}}} events on the canvas,
+then for each {{{mousemove}}} event on the document,
+it will call function {{{f}}}, until {{{mouseup}}} is triggered.
+(See <<a_api project="lwt"| val Lwt.pick>>)
+<<code language="ocaml" class="client"|
+let open Lwt_js_events in
+Lwt.async (mousedowns
+            (Eliom_content.Html.To_dom.of_element ~%canvas)
+            (fun ev _ ->
+               Lwt.pick [mousemoves Dom_html.document f;
+                         mouseup Dom_html.document]))
+>>
+>>
+
+<<section class="docblock" |
+<<header |==Ocsigen Toolkit==>>
+
+Ocsigen Toolkit defines several widgets that can be generated either
+on server or clide sides. Have look at
+[[wiki("ocsigen-start"):demo/|Ocsigen Start's demo app]]
+(or the [[https://play.google.com/store/apps/details?id=com.osdemo.mobile|corresponding Android app]])
+to see them in action: carousel, drawer menu, date or time picker, color picker,
+pull to refresh feature for mobile apps, etc.
+
+For example module
+<<a_api project="ocsigen-toolkit" subproject="server"|module Ot_spinner>>
+implements a widgets that you can use to display a spinner (or fake elements)
+when some parts of your page take time to appear.
+It can be used in shared sections and gives you precise control
+of the delays and the feeling of responsiveness of your app.
+
+>>
+
+<<section class="docblock" |
+<<header |==Ocsigen Start==>>
+
+//Ocsigen-start// is a library and a template of Eliom application,
+with many common features like
+user registration, login box, notification system, etc.
+
+It also provides a demo of many features presented in this page.
+A [[wiki("ocsigen-start"):demo/|live version]] is accessible online.
+Read [[start|this page]] to create your first Ocsigen Start
+app and take time to study the code of each example.
+
+User management features are fully usable in production and
+will save you from implementing account creation, activation links
+or password recovery yourself.
+Module <<a_api project="ocsigen-start" subproject="server"|module Os_current_user>>
+gives you information about current user
+from anywhere in your program.
+
+>>
+
+<<section class="docblock" |
+<<header |==Database access==>>
+
+You can use your favourite database library with Ocsigen.
+Ocsigen Start's template uses
+[[https://github.com/darioteixeira/pgocaml|PG'OCaml]]
+(typed queries for Postgresql using a PPX syntax extension).
+
+Here is an example, taken from Ocsigen Start's demo:
+<<code language="ocaml" class="server"|
+let get () =
+  full_transaction_block (fun dbh ->
+    [%pgsql dbh "SELECT lastname FROM ocsigen_start.users"])
+>>
+
+>>
+
+<<section class="docblock" |
+<<header |==Server to client communication==>>
+
+Modules
+<<a_api project="eliom" subproject="server"| module Eliom_notif>>
+and
+<<a_api project="ocsigen-start" subproject="server"| module Os_notif>>
+define the simplest interface to enable server to client communication
+(the second one being aware of Ocsigen Start users).
+
+<<div class="focused"|
+===How it works===
+Say you want to receive the messages for one or more chat rooms.
+First, define your notification module:
+<<code language="ocaml" class="server"|
+module%server Notif = Os_notif.Make_Simple (struct
+  type key = int64 (* the chat room ids *)
+  type notification = string (* the type of messages *)
+end)
+>>
+
+If you want to be notified when there is a new message in a chat room, call function
+{{{Notif.listen}}} (server side) on the chat room id.
+
+If you want to send a message in a chat room, call function
+{{{Notif.notify}}} (server side) with the chat room id and the message as parameters.
+
+On client side, {{{~%(Notif.client_ev ())}}} is a React event of type
+{{{(key, notif) React.E.t}}}. Use it to receive the messages.
+>>
+
+Have a look at a [[https://ocsigen-1.inria.fr/ocsigen-start/demo/demo-notif|running example]] in Ocsigen Start's demo
+([[https://github.com/ocsigen/ocsigen-start/blob/master/template.distillery/demo_notif.eliom|source]]).
+
+Eliom has other communication modules:
+* <<a_api project="eliom" subproject="server"| module Eliom_bus>> defines a communication bus,
+that you can use to share information with other client processes
+(see an example [[application|here]]).
+* <<a_api project="eliom" subproject="server"| module Eliom_react>> defines client-server React events.
+* <<a_api project="eliom" subproject="server"| module Eliom_comet>> is lower level interface for
+server to client communication.
+
+>>
+
+<<section class="docblock" |
+<<header |==Internationalisation==>>
+
+[[https://github.com/besport/ocsigen-i18n|Ocsigen i18n]]
+is an internationalisation library for your OCaml programs.
+
+Create a .tsv file with, on each line, a key and the text in several languages:
+
+{{{
+welcome_message Welcome everybody!        Bienvenue à tous !      Benvenuti a tutti !
+}}}
+
+and Ocsigen i18n will automatically generate functions like this one:
+<<code language="ocaml" class="shared"|
+let%shared welcome_message ?(lang = get_language ()) () () =
+  match lang with
+  | En -> [txt "Welcome everybody!"]
+  | Fr -> [txt "Bienvenue à tous !"]
+  | It -> [txt "Benvenuti a tutti !"]
+>>
+
+Ocsigen i18n also defines a syntax extension to use these functions:
+<<code language="ocaml" class="shared"|
+  Eliom_content.Html.F.h1 [%i18n welcome_message]
+>>
+
+Ocsigen i18n offers many other features:
+* Text can be inserted as a TyXML node (as in the example above) or as a string (ex: {{{[%i18n S.welcome_message]}}}),
+* Text can be parametrizable, or contain holes (ex: {{{[%i18n welcome ~capitalize:true ~name:"William"]}}})
+* .tsv file can be split into several modules
+
+Have a look at the
+[[https://github.com/besport/ocsigen-i18n|README file]]
+to see the full documentation,
+and see examples in
+[[https://github.com/ocsigen/ocsigen-start/blob/master/template.distillery/demo_i18n.eliom|Ocsigen Start's template]].
+
+>>
+
+<<section class="docblock" |
+<<header |==Reactive programming==>>
+
+Eliom allows to insert //reactive nodes// in pages, that is, nodes which are automatically
+updated when the values on which they depend change.
+
+This is based on the [[https://erratique.ch/software/react|React]] library by Daniel Bünzli,
+which implements //Functional Reactive Programming//.
+
+<<div class="focused"|
+===Functional Reactive Programming principle===
+
+Function {{{React.S.create}}} creates a signal and a function to change its value:
+<<code language="ocaml" class="client"|
+let%client mysignal, set_mysignal = React.S.create 0
+>>
+
+Functions like {{{React.S.map}}} or {{{React.S.l2}}} create new signals
+from one (resp. two) input signals.
+They are updated automatically when their input signals change.
+For example, we can can define the same value as a string signal and as TyXML node signal:
+<<code language="ocaml" class="client"|
+let%client s_string = React.S.map string_of_int mysignal
+let%client s_p = React.S.map (fun v -> p [txt v]) s_string
+>>
+
+>>
+
+===Reactive nodes===
+
+Insert a (client side) reactive node in a page using function
+<<a_api project="eliom" subproject="server"| val Eliom_content.Html.R.node >>:
+
+<<code language="ocaml" class="client"|
+let%client f () =
+  let open Eliom_content.Html in
+  F.div [ R.node s_p ]
+>>
+
+===Reactive node content===
+
+Module
+<<a_api project="eliom" subproject="server"|module Eliom_content.Html.R >>
+also defines all TyXML nodes,
+which take reactive content as parameter.
+
+For example {{{Eliom_content.Html.R.txt}}} takes
+a value of type {{{string React.S.t}}} as parameter (string signal).
+
+Instead of taking a list signal as parameter, functions like
+{{{div}}} or {{{p}}} of module {{{Eliom_content.Html.R}}}
+take a parameter of type
+[[https://github.com/ocsigen/reactiveData|Eliom_content.Html.F.elt ReactiveData.Rlist.t]].
+This enables incremental update of the content
+(usually, appending an element at the end of the list,
+without having to redraw the whole list).
+See an example with {{{ReactiveData}}} in [[tutoreact|this tutorial]].
+
+Node attributes can also be reactive. For example if {{{s}}} has type {{{string list React.S.t}}},
+you can write {{{Eliom_content.Html.F.div ~a:[R.a_class s] []}}}.
+
+===Client-server reactive programming===
+
+Reactive nodes can be created in server or shared sections.
+To do that, use module
+<<a_api project="eliom" subproject="server"| module Eliom_shared.React >>
+instead of the usual {{{React}}} module.
+On client side, this module behaves like {{{React}}}.
+But when executed on server side, it will generate non reactive values,
+that will automatically become reactive on the client.
+
+Full example:
+<<code language="ocaml" class="server"|let%server theservice =
+  Eliom_service.create
+    ~path:["ex"]
+    ~meth:(Eliom_service.Get Eliom_parameter.unit)
+    ()>>
+<<code language="ocaml" class="client"|let%client theservice = ~%theservice>>
+<<code language="ocaml" class="client"|open%client Js_of_ocaml_lwt>>
+<<code language="ocaml" class="shared"|open%shared Eliom_content.Html.F
+
+let%shared () =
+  My_app.register ~service:theservice (fun () () ->
+      let monsignal, set_signal = Eliom_shared.React.S.create 0 in
+      let s_string =
+        Eliom_shared.React.S.map [%shared string_of_int] monsignal
+      in
+      let _ =
+        [%client
+          (* A thread that will change the signal value every second: *)
+          (let rec aux () =
+             let%lwt () = Lwt_js.sleep 1.0 in
+             ~%set_signal (Random.int 100);
+             aux ()
+           in
+           Lwt.async aux
+          : unit)]
+      in
+      Lwt.return
+        (html
+           (head (title (txt s)) [])
+           (body [h1 [txt s];
+                  p [Eliom_content.Html.R.txt s_string]])))
+>>
+
+Function {{{Eliom_shared.React.S.map}}} (and {{{Eliom_shared.React.S.l2}}}, etc)
+takes a //shared function// as parameter (syntax {{{@@class="shared"@@[%shared f]}}}).
+This can be seen as a couple containing both the server a client side implementation
+of the function.
+
+
+>>
+
+<<section class="docblock" |
+<<header |==Mobile apps==>>
+Applications can run on any Web browser or mobile device (iOS, Android, ...),
+thus eliminating the need for one custom version per platform.
+
+Your CSS must be fully responsive to adapt to all screen sizes.
+
+Ocsigen Start's template comes with a Makefile which will automatically
+download the required NPM modules for Cordova and build your Android or iOS
+apps.
+Read the [[https://github.com/ocsigen/ocsigen-start/blob/master/template.distillery/README.md|README]] file
+to learn how to do that.
+
+Download
+[[https://play.google.com/store/apps/details?id=com.osdemo.mobile|Ocsigen Start's demo app]]
+from Google Play store to see an example.
+[[https://www.besport.com/news|Be Sport]] mobile apps are also generated like this (available in
+[[https://play.google.com/store/apps/details?id=com.besport.www.mobile|Google Play Store]]
+and [[https://apps.apple.com/fr/app/be-sport/id1104216922|Apple app store]]).
+>>
+
+<<section class="docblock" |
+<<header |==Ocsigen Server==>>
+
+//Ocsigen Server// is a full featured Web server.
+
+It is now based on [[https://github.com/mirage/ocaml-cohttp|Cohttp]].
+
+It has a powerful
+extension mechanism that makes it easy to plug your own OCaml modules
+for generating pages. Many extensions are already written:
+;<<a_manual project="ocsigenserver" chapter="staticmod"|Staticmod>>
+:    to serve static files.
+;[[wiki("eliom"):|Eliom]]
+:    to create reliable client/server Web applications
+     or Web sites in OCaml using advanced high level concepts.
+;<<a_manual project="ocsigenserver" chapter="extendconfiguration"|Extendconfiguration>>
+:    allows for more options in the configuration file.
+;<<a_manual project="ocsigenserver" chapter="accesscontrol"|Accesscontrol>>
+:    restricts access to the sites from the config file (to requests coming from a subnet, containing some headers, etc.).
+;<<a_manual project="ocsigenserver" chapter="authbasic"|Authbasic>>
+:    restricts access to the sites from the config file using Basic HTTP Authentication.
+;<<a_manual project="ocsigenserver" chapter="cgimod"|CGImod>>
+:    serves CGI scripts. It may also be used to serve PHP through CGI.
+;<<a_manual project="ocsigenserver" chapter="deflatemod"|Deflatemod>>
+:    used to compress data before sending it to the client.
+;<<a_manual project="ocsigenserver" chapter="redirectmod"|Redirectmod>>
+:    sets redirections towards other Web sites from the configuration file.
+;<<a_manual project="ocsigenserver" chapter="revproxy"|Revproxy>>
+:    a reverse proxy for Ocsigen Server.
+      It allows to ask another server to handle the request.
+;<<a_manual project="ocsigenserver" chapter="rewritemod"|Rewritemod>>
+:    changes incoming requests before sending them to other extensions.
+;<<a_manual project="ocsigenserver" chapter="outputfilter"|Outputfilter>>
+:    rewrites some parts of the output before sending it to the client.
+;<<a_manual project="ocsigenserver" chapter="userconf"|Userconf>>
+:    allows users to have their own configuration files.
+;<<a_manual project="ocsigenserver" chapter="comet"|Comet>>
+:    facilitates server to client communications.
+
+Ocsigen Server has a <<a_manual project="ocsigenserver"
+chapter="config"|sophisticated configuration>> file mechanism allowing
+complex configurations of sites.
+
+>>
diff --git a/tutos/8.0/manual/chat.wiki b/tutos/8.0/manual/chat.wiki
new file mode 100644
index 00000000..26922202
--- /dev/null
+++ b/tutos/8.0/manual/chat.wiki
@@ -0,0 +1,116 @@
+= Chat: Design Overview =
+
+<<wip|Warning this tutorial is not maintained and is not up to date.>>
+
+//Chat// is a chatting module and application, currently for conversations
+between two users each. (Extension for multi-user channels is left as an
+exercise to the user.)
+
+You can find the code [[https://github.com/ocsigen/tutorial/tree/master/src-examples|here]].
+
+<<|* [[site:chat|try it]]! And
+* [[site:darcsweb/?r=tutorial;a=tree;f=/src-examples/chat|browse it]],
+* ##darcs get http://ocsigen.org/darcs/tutorial; cd tutorial/src-examples/chat## it, or
+* [[site:download/chat.tar.gz|download]] the source code.
+>>
+
+== Description ==
+
+When the user is logged in, he sees a list of available users. He can choose
+one of them to start a conversation with him. The conversation then becomes
+visible to both users as a message prompt and a growing list of messages.  The
+participating users can enter messages and they are made visible to the other
+participants.  If a user becomes unavailable for //Chat//, he is removed from the
+list of available users, and all conversations he was participating are removed
+from the opponent's UI.
+
+== Central Data Types ==
+
+The following data are crucial to the functionality of //Chat//.
+
+=== Conversation ===
+A conversation (##type Shared.Conversation.t##) is shared between all its
+client participants. It comprises of two values: Firstly, it contains a bus for
+transferring conversation messages (c.f. ##type Shared.Conversation.message##)
+between the participants. Those are displayed as they come on every client.
+Secondly, it contains the set of participating users. This is used when the
+conversation is teared down: An event for removing the UI element for the
+conversation is sent to every participant.
+
+=== Client Process ===
+When a user enters a web page which contains //Chat//, it is rendered in HTML and
+a new client process is created in doing so.  Every client process holds a
+channel, where the server can send messages to //add or to remove conversations//
+(c.f. ##type Shared.event##).
+
+=== User Info ===
+On the server side, the channel for those events is stored for each user along
+with a list of conversations he participates in.  This is done with a
+Eliom-reference of scope ##session_group##, such that it is shared among all
+sessions of a user (and likewise all client processes).
+
+But, when one user requests to start (or end) a conversation with any another
+user, it is also necessary to access the event channel of any user.
+As it is only stored in an Eliom-reference specific to the user, it is
+impossible to access.  In favour of this, the user info is moreover
+stored in a weak hash table (c.f. module ##Weak_info##) which associates the
+user info to each user in a globally accessible way. This association is weak
+in its value, the user info, such that it is garbage-collected as soon as the
+Eliom-reference storing it is cleared, i.e. when the last session of the
+respective user is closed.
+
+
+=== Available Users ===
+The client's UI contains a list of users which are currently available for
+chatting. This is achieved as follows.
+
+If it is the user's first client process he is added to the set of available
+users, which is available in an react signal ##Chat.users_signal## on a set of
+user (i.e. ##User_set.t React.S.t##).
+As long as a user is available with at least one client he is kept in the value
+of the signal. This signal is send to the client when initializing //Chat//.
+Changes in its value are then directly reflected in the list of available users
+in the client's UI (c.f.  ##Client.change_users##).
+
+To observe when a user is not available through a given client process anymore,
+//Chat// awaits for every client process that it is inactive for a given
+time.  ##Eliom_comet.Channels.wait_timeout## is used for for detecting a client
+process to be abandoned.
+
+When it is observed that a user isn't avaible through any client process
+anymore, he is removed from the ##Chat.users_signal##, and all conversation he
+is participating are teared down (c.f. ##Chat.remove_client_process##).
+
+=== Starting a conversation ===
+When the user selects one of the available users for a conversation, one of two
+things may happen (c.f. ##Client.create_or_focus_conversation##):
+
+Firstly, if there is already a conversation between exactly those two users,
+the message prompt is focused.
+Secondly, if there is no conversation between those users yet, a new one is created
+by calling the server's ##Chat.create_dialog_service## (dialog is a conversatio
+of two) with the selected user as argument.
+
+This service establishes the conversation between the users: It creates the
+conversation on the server side (i.e. the set of participants and the bus for
+messages) and sends an event to append the conversation to each participant.
+Each client is streaming such events (c.f. ##Client.dispatch_event##) and
+creates the respective UI-element for the conversation with event handlers for
+sending and receiving messages in the conversation.
+
+=== Sending a message in a conversationg ===
+Sending messages within an conversation is achieved without any server-side
+code; the messages are sent "directly" to all all participants of the
+conversation //through its Eliom-bus//. Two things make this work.
+
+Firstly, an event listener on the message prompt of the conversation
+(c.f. ##Client.handle_enter_pressed##) awaits that the enter-key is hit in
+the message prompt of a conversation. It then creates a message and sends it
+to the conversation's event bus.
+
+Secondly, every participant of a conversation is streaming the messages which
+are sent over the conversation bus.
+A stream iterator on that bus then displays those messages as they arrive
+(c.f. ##Client.dispatch_message##).
+
+Have fun. [[site:chat|Be communicative!]]
diff --git a/tutos/8.0/manual/custom-conf.wiki b/tutos/8.0/manual/custom-conf.wiki
new file mode 100644
index 00000000..95c24c00
--- /dev/null
+++ b/tutos/8.0/manual/custom-conf.wiki
@@ -0,0 +1,89 @@
+=Custom configuration options=
+<<concepts |Custom configuration options>>
+
+It is not convenient to have to edit the code to change some
+configurations, like the location where are saved the favorite
+images in the Graffiti tutorial
+(see: [[wiki:pictures|Saving favorite pictures]]).
+Fortunately Ocsigen provides a mechanism to extend its
+configuration file.
+
+==Basic interface==
+
+<<code language="ocaml"|
+let static_dir =
+  match Eliom_config.get_config () with
+    | [Simplexmlparser.Element
+     ("staticdir", [], [Simplexmlparser.PCData dir])] ->
+        dir
+    | [] ->
+      raise (Ocsigen_extensions.Error_in_config_file
+               ("staticdir must be configured"))
+    | _ ->
+      raise (Ocsigen_extensions.Error_in_config_file
+               ("Unexpected content inside config"))
+>>
+
+This will add a mandatory child to the eliom tag in the
+configuration file:
+{{{
+<eliom module="path/to/your/module.cma">
+  <staticdir>/tmp/static</staticdir>
+</eliom>
+}}}
+
+
+==New interface==
+
+From Eliom 4.0 it is much easier to define configuration file extension.
+Have a look at module <<a_api project="eliom" subproject="server"|module Eliom_config>>.
+For instance, here is how you can add an element "<ldap>"
+in the configuration file to store a list of LDAP servers your application
+interacts with.
+
+
+<<code language="ocaml"|
+
+(** An LDAP server is characterized by an host and a port. *)
+type ldap_configuration = {
+  mutable host : string;
+  mutable port : int;
+  }
+
+
+(** We store a list of LDAP servers to interact with. *)
+let ldap_servers = ref []
+
+(** The user-defined extension of the configuration file. *)
+let ldap_configuration = Ocsigen_extensions.Configuration.(
+  (** Default configuration *)
+  let config () = {
+    host = "";
+    port = 339;
+  }
+  in
+  let init () =
+    ldap_servers := config () :: !ldap_servers
+  in
+  let current () =
+    List.hd !ldap_servers
+  in
+
+  (** Parsing functions. *)
+  let req_attr name = attribute ~name ~obligatory:true
+  and opt_attr name = attribute ~name ~obligatory:false
+  in
+  let name = "LDAP"
+  and obligatory = false
+  and attributes = [
+    req_attr "host" (fun h -> (current ()).host <- h);
+    opt_attr "port" (fun p -> (current ()).port <- int_of_string p);
+    );
+  ]
+  in
+  element ~init ~name ~obligatory ~attributes ()
+)
+
+let _ = Eliom_config.parse_config [ldap_configuration]
+
+>>
diff --git a/tutos/8.0/manual/files/2014-epita-video.png b/tutos/8.0/manual/files/2014-epita-video.png
new file mode 100644
index 00000000..253afdcf
Binary files /dev/null and b/tutos/8.0/manual/files/2014-epita-video.png differ
diff --git a/tutos/8.0/manual/files/screenshots/.directory b/tutos/8.0/manual/files/screenshots/.directory
new file mode 100644
index 00000000..79c63a86
--- /dev/null
+++ b/tutos/8.0/manual/files/screenshots/.directory
@@ -0,0 +1,4 @@
+[Dolphin]
+PreviewsShown=true
+Timestamp=2016,12,12,17,5,19
+Version=3
diff --git a/tutos/8.0/manual/files/screenshots/start-mobile-1.png b/tutos/8.0/manual/files/screenshots/start-mobile-1.png
new file mode 100644
index 00000000..65ba09d4
Binary files /dev/null and b/tutos/8.0/manual/files/screenshots/start-mobile-1.png differ
diff --git a/tutos/8.0/manual/files/screenshots/start-mobile-2.png b/tutos/8.0/manual/files/screenshots/start-mobile-2.png
new file mode 100644
index 00000000..6b95975e
Binary files /dev/null and b/tutos/8.0/manual/files/screenshots/start-mobile-2.png differ
diff --git a/tutos/8.0/manual/files/screenshots/start-mobile-3.png b/tutos/8.0/manual/files/screenshots/start-mobile-3.png
new file mode 100644
index 00000000..eb02e5f9
Binary files /dev/null and b/tutos/8.0/manual/files/screenshots/start-mobile-3.png differ
diff --git a/tutos/8.0/manual/files/screenshots/start-mobile-4.png b/tutos/8.0/manual/files/screenshots/start-mobile-4.png
new file mode 100644
index 00000000..a1f5f898
Binary files /dev/null and b/tutos/8.0/manual/files/screenshots/start-mobile-4.png differ
diff --git a/tutos/8.0/manual/files/screenshots/start-mobile-5.png b/tutos/8.0/manual/files/screenshots/start-mobile-5.png
new file mode 100644
index 00000000..92ebfb12
Binary files /dev/null and b/tutos/8.0/manual/files/screenshots/start-mobile-5.png differ
diff --git a/tutos/8.0/manual/files/screenshots/start-mobile-6.png b/tutos/8.0/manual/files/screenshots/start-mobile-6.png
new file mode 100644
index 00000000..4286da90
Binary files /dev/null and b/tutos/8.0/manual/files/screenshots/start-mobile-6.png differ
diff --git a/tutos/8.0/manual/files/screenshots/start-mobile-7.png b/tutos/8.0/manual/files/screenshots/start-mobile-7.png
new file mode 100644
index 00000000..d034efb2
Binary files /dev/null and b/tutos/8.0/manual/files/screenshots/start-mobile-7.png differ
diff --git a/tutos/8.0/manual/files/screenshots/start-mobile-8.png b/tutos/8.0/manual/files/screenshots/start-mobile-8.png
new file mode 100644
index 00000000..1161054a
Binary files /dev/null and b/tutos/8.0/manual/files/screenshots/start-mobile-8.png differ
diff --git a/tutos/8.0/manual/files/screenshots/start1.png b/tutos/8.0/manual/files/screenshots/start1.png
new file mode 100644
index 00000000..185e08bb
Binary files /dev/null and b/tutos/8.0/manual/files/screenshots/start1.png differ
diff --git a/tutos/8.0/manual/files/screenshots/start2.png b/tutos/8.0/manual/files/screenshots/start2.png
new file mode 100644
index 00000000..1ce3676a
Binary files /dev/null and b/tutos/8.0/manual/files/screenshots/start2.png differ
diff --git a/tutos/8.0/manual/files/screenshots/start3.png b/tutos/8.0/manual/files/screenshots/start3.png
new file mode 100644
index 00000000..62ac5ce5
Binary files /dev/null and b/tutos/8.0/manual/files/screenshots/start3.png differ
diff --git a/tutos/8.0/manual/files/screenshots/start4.png b/tutos/8.0/manual/files/screenshots/start4.png
new file mode 100644
index 00000000..e0133871
Binary files /dev/null and b/tutos/8.0/manual/files/screenshots/start4.png differ
diff --git a/tutos/8.0/manual/files/screenshots/start5.png b/tutos/8.0/manual/files/screenshots/start5.png
new file mode 100644
index 00000000..f4a6c2b6
Binary files /dev/null and b/tutos/8.0/manual/files/screenshots/start5.png differ
diff --git a/tutos/8.0/manual/files/screenshots/start6.png b/tutos/8.0/manual/files/screenshots/start6.png
new file mode 100644
index 00000000..b961511d
Binary files /dev/null and b/tutos/8.0/manual/files/screenshots/start6.png differ
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/README b/tutos/8.0/manual/files/tutorial/chapter1/README
new file mode 100644
index 00000000..37d111c1
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/README
@@ -0,0 +1 @@
+This code isn't maintened anymore and might not work. Please go to https://github.com/ocsigen/graffiti/simple for the latest working versions.
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/distillery-no-oclosure/Makefile b/tutos/8.0/manual/files/tutorial/chapter1/distillery-no-oclosure/Makefile
new file mode 100644
index 00000000..70b892db
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/distillery-no-oclosure/Makefile
@@ -0,0 +1,242 @@
+
+##----------------------------------------------------------------------
+## DISCLAIMER
+##
+## This file contains the rules to make an Eliom project. The project is
+## configured through the variables in the file Makefile.options.
+##----------------------------------------------------------------------
+
+include Makefile.options
+
+##----------------------------------------------------------------------
+##			      Internals
+
+## Required binaries
+ELIOMC            := eliomc
+ELIOMOPT          := eliomopt
+JS_OF_ELIOM       := js_of_eliom
+ELIOMDEP          := eliomdep
+OCSIGENSERVER     := ocsigenserver
+OCSIGENSERVER.OPT := ocsigenserver.opt
+
+## Where to put intermediate object files.
+## - ELIOM_{SERVER,CLIENT}_DIR must be distinct
+## - ELIOM_CLIENT_DIR must not be the local dir.
+## - ELIOM_SERVER_DIR could be ".", but you need to
+##   remove it from the "clean" rules...
+export ELIOM_SERVER_DIR := _server
+export ELIOM_CLIENT_DIR := _client
+export ELIOM_TYPE_DIR   := _server
+DEPSDIR := _deps
+
+ifeq ($(DEBUG),yes)
+  GENERATE_DEBUG ?= -g
+  RUN_DEBUG ?= "-v"
+  DEBUG_JS ?= -jsopt -pretty -jsopt -noinline -jsopt -debuginfo
+endif
+
+##----------------------------------------------------------------------
+## General
+
+.PHONY: all byte opt
+all: byte opt
+byte opt:: $(TEST_PREFIX)$(ELIOMSTATICDIR)/${PROJECT_NAME}.js
+byte opt:: $(TEST_PREFIX)$(ETCDIR)/$(PROJECT_NAME).conf
+byte opt:: $(TEST_PREFIX)$(ETCDIR)/$(PROJECT_NAME)-test.conf
+byte:: $(TEST_PREFIX)$(LIBDIR)/${PROJECT_NAME}.cma
+opt:: $(TEST_PREFIX)$(LIBDIR)/${PROJECT_NAME}.cmxs
+
+DIST_DIRS = $(ETCDIR) $(DATADIR) $(LIBDIR) $(LOGDIR) $(STATICDIR) $(ELIOMSTATICDIR) $(shell dirname $(CMDPIPE))
+
+##----------------------------------------------------------------------
+## Testing
+
+DIST_FILES = $(ELIOMSTATICDIR)/$(PROJECT_NAME).js $(LIBDIR)/$(PROJECT_NAME).cma
+
+.PHONY: test.byte test.opt
+test.byte: $(addprefix $(TEST_PREFIX),$(ETCDIR)/$(PROJECT_NAME)-test.conf $(DIST_DIRS) $(DIST_FILES))
+	$(OCSIGENSERVER) $(RUN_DEBUG) -c $<
+test.opt: $(addprefix $(TEST_PREFIX),$(ETCDIR)/$(PROJECT_NAME)-test.conf $(DIST_DIRS) $(patsubst %.cma,%.cmxs, $(DIST_FILES)))
+	$(OCSIGENSERVER.OPT) $(RUN_DEBUG) -c $<
+
+$(addprefix $(TEST_PREFIX), $(DIST_DIRS)):
+	mkdir -p $@
+
+##----------------------------------------------------------------------
+## Installing & Running
+
+.PHONY: install install.byte install.byte install.opt install.static install.etc install.lib install.lib.byte install.lib.opt run.byte run.opt
+install: install.byte install.opt
+install.byte: install.lib.byte install.etc install.static | $(addprefix $(PREFIX),$(DATADIR) $(LOGDIR) $(shell dirname $(CMDPIPE)))
+install.opt: install.lib.opt install.etc install.static | $(addprefix $(PREFIX),$(DATADIR) $(LOGDIR) $(shell dirname $(CMDPIPE)))
+install.lib: install.lib.byte install.lib.opt
+install.lib.byte: $(TEST_PREFIX)$(LIBDIR)/$(PROJECT_NAME).cma | $(PREFIX)$(LIBDIR)
+	install $< $(PREFIX)$(LIBDIR)
+install.lib.opt: $(TEST_PREFIX)$(LIBDIR)/$(PROJECT_NAME).cmxs | $(PREFIX)$(LIBDIR)
+	install $< $(PREFIX)$(LIBDIR)
+install.static: $(TEST_PREFIX)$(ELIOMSTATICDIR)/$(PROJECT_NAME).js | $(PREFIX)$(STATICDIR) $(PREFIX)$(ELIOMSTATICDIR)
+	cp -r $(LOCAL_STATIC)/* $(PREFIX)$(STATICDIR)
+	[ -z $(WWWUSER) ] || chown -R $(WWWUSER) $(PREFIX)$(STATICDIR)
+	install $(addprefix -o ,$(WWWUSER)) $< $(PREFIX)$(ELIOMSTATICDIR)
+install.etc: $(TEST_PREFIX)$(ETCDIR)/$(PROJECT_NAME).conf | $(PREFIX)$(ETCDIR)
+	install $< $(PREFIX)$(ETCDIR)/$(PROJECT_NAME).conf
+
+.PHONY:
+print-install-files:
+	@echo $(PREFIX)$(LIBDIR)
+	@echo $(PREFIX)$(STATICDIR)
+	@echo $(PREFIX)$(ELIOMSTATICDIR)
+	@echo $(PREFIX)$(ETCDIR)
+
+$(addprefix $(PREFIX),$(ETCDIR) $(LIBDIR)):
+	install -d $@
+$(addprefix $(PREFIX),$(DATADIR) $(LOGDIR) $(STATICDIR) $(ELIOMSTATICDIR) $(shell dirname $(CMDPIPE))):
+	install $(addprefix -o ,$(WWWUSER)) -d $@
+
+run.byte:
+	$(OCSIGENSERVER) $(RUN_DEBUG) -c ${PREFIX}${ETCDIR}/${PROJECT_NAME}.conf
+run.opt:
+	$(OCSIGENSERVER.OPT) $(RUN_DEBUG) -c ${PREFIX}${ETCDIR}/${PROJECT_NAME}.conf
+
+##----------------------------------------------------------------------
+## Aux
+
+# Use `eliomdep -sort' only in OCaml>4
+ifeq ($(shell ocamlc -version|cut -c1),4)
+eliomdep=$(shell $(ELIOMDEP) $(1) -sort $(2) $(filter %.eliom %.ml,$(3))))
+else
+eliomdep=$(3)
+endif
+objs=$(patsubst %.ml,$(1)/%.$(2),$(patsubst %.eliom,$(1)/%.$(2),$(filter %.eliom %.ml,$(3))))
+depsort=$(call objs,$(1),$(2),$(call eliomdep,$(3),$(4),$(5)))
+
+##----------------------------------------------------------------------
+## Config files
+
+FINDLIB_PACKAGES=$(patsubst %,\<extension\ findlib-package=\"%\"\ /\>,$(SERVER_PACKAGES))
+EDIT_WARNING=DON\'T EDIT THIS FILE! It is generated from $(PROJECT_NAME).conf.in, edit that one, or the variables in Makefile.options
+SED_ARGS := -e "/^ *%%%/d"
+SED_ARGS += -e "s|%%PROJECT_NAME%%|$(PROJECT_NAME)|g"
+SED_ARGS += -e "s|%%DATABASE_NAME%%|$(DATABASE_NAME)|g"
+SED_ARGS += -e "s|%%DATABASE_USER%%|$(DATABASE_USER)|g"
+SED_ARGS += -e "s|%%CMDPIPE%%|%%PREFIX%%$(CMDPIPE)|g"
+SED_ARGS += -e "s|%%LOGDIR%%|%%PREFIX%%$(LOGDIR)|g"
+SED_ARGS += -e "s|%%DATADIR%%|%%PREFIX%%$(DATADIR)|g"
+SED_ARGS += -e "s|%%LIBDIR%%|%%PREFIX%%$(LIBDIR)|g"
+SED_ARGS += -e "s|%%WARNING%%|$(EDIT_WARNING)|g"
+SED_ARGS += -e "s|%%PACKAGES%%|$(FINDLIB_PACKAGES)|g"
+SED_ARGS += -e "s|%%ELIOMSTATICDIR%%|%%PREFIX%%$(ELIOMSTATICDIR)|g"
+ifeq ($(DEBUG),yes)
+  SED_ARGS += -e "s|%%DEBUGMODE%%|\<debugmode /\>|g"
+else
+  SED_ARGS += -e "s|%%DEBUGMODE%%||g"
+endif
+
+LOCAL_SED_ARGS := -e "s|%%PORT%%|$(TEST_PORT)|g"
+LOCAL_SED_ARGS += -e "s|%%STATICDIR%%|$(LOCAL_STATIC)|g"
+LOCAL_SED_ARGS += -e "s|%%USERGROUP%%||g"
+GLOBAL_SED_ARGS := -e "s|%%PORT%%|$(PORT)|g"
+GLOBAL_SED_ARGS += -e "s|%%STATICDIR%%|%%PREFIX%%$(STATICDIR)|g"
+ifeq ($(WWWUSER)$(WWWGROUP),)
+  GLOBAL_SED_ARGS += -e "s|%%USERGROUP%%||g"
+else
+  GLOBAL_SED_ARGS += -e "s|%%USERGROUP%%|<user>$(WWWUSER)</user><group>$(WWWGROUP)</group>|g"
+endif
+
+$(TEST_PREFIX)${ETCDIR}/${PROJECT_NAME}.conf: ${PROJECT_NAME}.conf.in Makefile.options | $(TEST_PREFIX)$(ETCDIR)
+	sed $(SED_ARGS) $(GLOBAL_SED_ARGS) $< | sed -e "s|%%PREFIX%%|$(PREFIX)|g" > $@
+$(TEST_PREFIX)${ETCDIR}/${PROJECT_NAME}-test.conf: ${PROJECT_NAME}.conf.in Makefile.options | $(TEST_PREFIX)$(ETCDIR)
+	sed $(SED_ARGS) $(LOCAL_SED_ARGS) $< | sed -e "s|%%PREFIX%%|$(TEST_PREFIX)|g" > $@
+
+##----------------------------------------------------------------------
+## Server side compilation
+
+SERVER_INC  := ${addprefix -package ,${SERVER_PACKAGES}}
+
+${ELIOM_TYPE_DIR}/%.type_mli: %.eliom
+	${ELIOMC} -infer ${SERVER_INC} $<
+
+$(TEST_PREFIX)$(LIBDIR)/$(PROJECT_NAME).cma: $(call objs,$(ELIOM_SERVER_DIR),cmo,$(SERVER_FILES)) | $(TEST_PREFIX)$(LIBDIR)
+	${ELIOMC} -a -o $@ $(GENERATE_DEBUG) \
+          $(call depsort,$(ELIOM_SERVER_DIR),cmo,-server,$(SERVER_INC),$(SERVER_FILES))
+
+$(TEST_PREFIX)$(LIBDIR)/$(PROJECT_NAME).cmxa: $(call objs,$(ELIOM_SERVER_DIR),cmx,$(SERVER_FILES)) | $(TEST_PREFIX)$(LIBDIR)
+	${ELIOMOPT} -a -o $@ $(GENERATE_DEBUG) \
+          $(call depsort,$(ELIOM_SERVER_DIR),cmx,-server,$(SERVER_INC),$(SERVER_FILES))
+
+%.cmxs: %.cmxa
+	$(ELIOMOPT) -shared -linkall -o $@ $(GENERATE_DEBUG) $<
+
+${ELIOM_SERVER_DIR}/%.cmi: %.mli
+	${ELIOMC} -c ${SERVER_INC} $(GENERATE_DEBUG) $<
+
+${ELIOM_SERVER_DIR}/%.cmi: %.eliomi
+	${ELIOMC} -c ${SERVER_INC} $(GENERATE_DEBUG) $<
+
+${ELIOM_SERVER_DIR}/%.cmo: %.ml
+	${ELIOMC} -c ${SERVER_INC} $(GENERATE_DEBUG) $<
+${ELIOM_SERVER_DIR}/%.cmo: %.eliom
+	${ELIOMC} -c ${SERVER_INC} $(GENERATE_DEBUG) $<
+
+${ELIOM_SERVER_DIR}/%.cmx: %.ml
+	${ELIOMOPT} -c ${SERVER_INC} $(GENERATE_DEBUG) $<
+${ELIOM_SERVER_DIR}/%.cmx: %.eliom
+	${ELIOMOPT} -c ${SERVER_INC} $(GENERATE_DEBUG) $<
+
+
+##----------------------------------------------------------------------
+## Client side compilation
+
+CLIENT_LIBS := ${addprefix -package ,${CLIENT_PACKAGES}}
+CLIENT_INC  := ${addprefix -package ,${CLIENT_PACKAGES}}
+
+CLIENT_OBJS := $(filter %.eliom %.ml, $(CLIENT_FILES))
+CLIENT_OBJS := $(patsubst %.eliom,${ELIOM_CLIENT_DIR}/%.cmo, ${CLIENT_OBJS})
+CLIENT_OBJS := $(patsubst %.ml,${ELIOM_CLIENT_DIR}/%.cmo, ${CLIENT_OBJS})
+
+$(TEST_PREFIX)$(ELIOMSTATICDIR)/$(PROJECT_NAME).js: $(call objs,$(ELIOM_CLIENT_DIR),cmo,$(CLIENT_FILES)) | $(TEST_PREFIX)$(ELIOMSTATICDIR)
+	${JS_OF_ELIOM} -o $@ $(GENERATE_DEBUG) $(CLIENT_INC) $(DEBUG_JS) \
+          $(call depsort,$(ELIOM_CLIENT_DIR),cmo,-client,$(CLIENT_INC),$(CLIENT_FILES))
+
+$(TEST_PREFIX)$(ELIOMSTATICDIR)/$(PROJECT_NAME)_oclosure.js: $(TEST_PREFIX)$(ELIOMSTATICDIR)/$(PROJECT_NAME).js
+	oclosure_req $<
+
+${ELIOM_CLIENT_DIR}/%.cmi: %.mli
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $(GENERATE_DEBUG) $<
+
+${ELIOM_CLIENT_DIR}/%.cmo: %.eliom
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $(GENERATE_DEBUG) $<
+${ELIOM_CLIENT_DIR}/%.cmo: %.ml
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $(GENERATE_DEBUG) $<
+
+${ELIOM_CLIENT_DIR}/%.cmi: %.eliomi
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $(GENERATE_DEBUG) $<
+
+##----------------------------------------------------------------------
+## Dependencies
+
+include .depend
+
+.depend: $(patsubst %,$(DEPSDIR)/%.server,$(SERVER_FILES)) $(patsubst %,$(DEPSDIR)/%.client,$(CLIENT_FILES))
+	cat $^ > $@
+
+$(DEPSDIR)/%.server: % | $(DEPSDIR)
+	$(ELIOMDEP) -server $(SERVER_INC) $< > $@
+
+$(DEPSDIR)/%.client: % | $(DEPSDIR)
+	$(ELIOMDEP) -client $(CLIENT_INC) $< > $@
+
+$(DEPSDIR):
+	mkdir $@
+
+##----------------------------------------------------------------------
+## Clean up
+
+clean:
+	-rm -f *.cm[ioax] *.cmxa *.cmxs *.o *.a *.annot
+	-rm -f *.type_mli
+	-rm -f ${PROJECT_NAME}.js
+	-rm -rf ${ELIOM_CLIENT_DIR} ${ELIOM_SERVER_DIR}
+
+distclean: clean
+	-rm -rf $(TEST_PREFIX) $(DEPSDIR) .depend
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/distillery-no-oclosure/Makefile.options b/tutos/8.0/manual/files/tutorial/chapter1/distillery-no-oclosure/Makefile.options
new file mode 100644
index 00000000..a001a7ba
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/distillery-no-oclosure/Makefile.options
@@ -0,0 +1,57 @@
+
+##----------------------------------------------------------------------
+##           SETTINGS FOR THE ELIOM PROJECT graffiti
+##----------------------------------------------------------------------
+
+PROJECT_NAME := graffiti
+
+## Do not forget `make depend' after adding a file!
+## Source files for the server
+SERVER_FILES := $(wildcard *.eliomi *.eliom)
+## Source files for the client
+CLIENT_FILES := $(wildcard *.eliomi *.eliom)
+
+## OCamlfind packages for the server
+SERVER_PACKAGES := deriving.syntax cairo
+## OCamlfind packages for the client
+CLIENT_PACKAGES := deriving.syntax ojwidgets
+
+## Directory with files to be statically served
+LOCAL_STATIC = static
+
+## Debug application (yes/no): Debugging info in compilation,
+## JavaScript, ocsigenserver
+DEBUG := no
+
+## User to run server with (make run.*)
+WWWUSER := www-data
+WWWGROUP := www-data
+
+## Port for running the server (make run.*)
+PORT := 80
+
+## Port for testing (make test.*)
+TEST_PORT := 8080
+
+## Root of installation (must end with /)
+PREFIX := /
+
+## Local folder for make test.* (must end with /)
+TEST_PREFIX := local/
+
+## The installation tree (relative to $(PREFIX) when installing/runnin
+## or $(TEST_PREFIX) when testing).
+# Configuration file $(PROJECT_NAME).conf
+ETCDIR := etc/${PROJECT_NAME}
+# Project's library $(PROJECT_NAME).cma (cmxs)
+LIBDIR := var/lib/${PROJECT_NAME}
+# Command pipe, eg. $ echo restart > $(INSTALL_PREFIX)$(CMDPIPE)
+CMDPIPE := var/run/${PROJECT_NAME}-cmd
+# Ocsigenserver's logging files
+LOGDIR := var/log/${PROJECT_NAME}
+# Ocsigenserver's persistent data files
+DATADIR := var/data/${PROJECT_NAME}
+# Copy of $(LOCAL_STATIC)
+STATICDIR := var/www/${PROJECT_NAME}/static
+# Project's JavaScript file
+ELIOMSTATICDIR := var/www/${PROJECT_NAME}/eliom
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/distillery-no-oclosure/README b/tutos/8.0/manual/files/tutorial/chapter1/distillery-no-oclosure/README
new file mode 100644
index 00000000..d2f190e5
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/distillery-no-oclosure/README
@@ -0,0 +1,59 @@
+
+This project is (initially) generated by eliom-distillery as the basic
+project "graffiti".
+
+It contains the following files:
+
+ - graffiti.eliom
+   This is your initial source file.
+   All Eliom files (*.eliom, *.eliomi) in this directory are
+   automatically considered.  To add a .ml/.mli file to your project,
+   add it to the variable SERVER_FILES or CLIENT_FILES.
+
+ - static/
+   The content of this folder is statically served. It contains
+   initially a basic CSS file for your project.
+
+ - Makefile.options
+   Configure your project here!
+
+ - graffiti.conf.in
+   This file is a template for the configuration file for
+   ocsigenserver. You will rarely have to edit itself - it takes its
+   variables from the Makefile.options. This way, the installation
+   rules and the configuration files are synchronized with respect to
+   the different folders.
+
+ - Makefile
+   This contains all rules necessary to build, test, and run your
+   Eliom application. You better don't touch it ;) See below for the
+   relevant targets.
+
+ - README
+   Not completely desribable here.
+
+
+Here's some help on how to work with this basic distillery project:
+
+ - Compile it
+     $ make all (or byte/opt)
+
+ - Test your application by running ocsigenserver locally
+     $ make test.byte (or test.opt)
+
+ - Install it
+     $ sudo make install (or install.byte/install.opt)
+
+ - Run the server on the installation
+     $ sudo make run.byte (or run.opt)
+   If the user to run ocsigenserver is yourself, you don't need the
+   `sudo'.  If Ocsigen isn't installed in a global position, however,
+   you may need to re-export some environment variables to make this
+   work:
+     $ sudo PATH=$PATH OCAMLPATH=$OCAMLPATH LD_LIBRARY_PATH=$LD_LIBRARY_PATH make run.byte/run.opt
+
+ - If you need a findlib package in your project, add it to the
+   variables SERVER_PACKAGES and/or CLIENT_PACKAGES.
+
+ - The directory static/ will be statically served. Put your CSS and
+   additional JavaScript files here!
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/distillery-no-oclosure/graffiti.conf.in b/tutos/8.0/manual/files/tutorial/chapter1/distillery-no-oclosure/graffiti.conf.in
new file mode 100644
index 00000000..82244ac9
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/distillery-no-oclosure/graffiti.conf.in
@@ -0,0 +1,28 @@
+%%% This is the template for your configuration file. The %%VALUES%% below are
+%%% taken from the Makefile to generate the actual configuration files.
+%%% This comment will disappear.
+<!-- %%WARNING%% -->
+<ocsigen>
+  <server>
+    <port>%%PORT%%</port>
+    %%% Only set for running, not for testing
+    %%USERGROUP%%
+    <logdir>%%LOGDIR%%</logdir>
+    <datadir>%%DATADIR%%</datadir>
+    <charset>utf-8</charset>
+    %%% Only set when debugging
+    %%DEBUGMODE%%
+    <commandpipe>%%CMDPIPE%%</commandpipe>
+    <extension findlib-package="ocsigenserver.ext.staticmod"/>
+    <extension findlib-package="ocsigenserver.ext.ocsipersist-sqlite"/>
+    <extension findlib-package="eliom.server"/>
+    %%% This will include the packages defined as SERVER_PACKAGES in your Makefile:
+    %%PACKAGES%%
+    <host hostfilter="*">
+      <static dir="%%STATICDIR%%" />
+      <static dir="%%ELIOMSTATICDIR%%" />
+      <eliommodule module="%%LIBDIR%%/%%PROJECT_NAME%%.cma" />
+      <eliom/>
+    </host>
+  </server>
+</ocsigen>
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/distillery-no-oclosure/graffiti.eliom b/tutos/8.0/manual/files/tutorial/chapter1/distillery-no-oclosure/graffiti.eliom
new file mode 100644
index 00000000..54d2e3ff
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/distillery-no-oclosure/graffiti.eliom
@@ -0,0 +1,146 @@
+{shared{
+  open Eliom_lib.Lwt_ops
+  open Eliom_content.Html5.D
+
+  let width = 700
+  let height = 400
+
+  type messages = ((int * int * int) * int * (int * int) * (int * int))
+    deriving (Json)
+}}
+
+module My_app =
+  Eliom_registration.App (
+    struct
+      let application_name = "graffiti"
+    end)
+
+let bus = Eliom_bus.create Json.t<messages>
+
+let canvas_elt =
+  canvas ~a:[a_width width; a_height height]
+    [pcdata "your browser doesn't support canvas"]
+
+let slider = int_input ~a:[a_id "slider"] ~input_type:`Range ()
+
+let page =
+  html
+    (Eliom_tools.F.head ~title:"Graffiti"
+       ~css:[["css";"graffiti.css"]]
+       ~js:[] ())
+    (body [h1 [pcdata "Graffiti"]; canvas_elt; div [slider]])
+
+
+let draw_server, image_string =
+  let rgb_floats_from_ints (r, g, b) =
+    float r /. 255., float g /. 255., float b /. 255. in
+  let surface =
+    Cairo.image_surface_create Cairo.FORMAT_ARGB32 ~width ~height
+  in
+  let ctx = Cairo.create surface in
+  ((fun (rgb, size, (x1, y1), (x2, y2)) ->
+
+    (* Set thickness of brush *)
+    Cairo.set_line_width ctx (float size) ;
+    Cairo.set_line_join ctx Cairo.LINE_JOIN_ROUND ;
+    Cairo.set_line_cap ctx Cairo.LINE_CAP_ROUND ;
+    let red, green, blue =  rgb_floats_from_ints rgb in
+    Cairo.set_source_rgb ctx ~red ~green ~blue ;
+
+    Cairo.move_to ctx (float x1) (float y1) ;
+    Cairo.line_to ctx (float x2) (float y2) ;
+    Cairo.close_path ctx ;
+
+    (* Apply the ink *)
+    Cairo.stroke ctx ;
+   ),
+   (fun () ->
+     let b = Buffer.create 10000 in
+     (* Output a PNG in a string *)
+     Cairo_png.surface_write_to_stream surface (Buffer.add_string b);
+     Buffer.contents b
+   ))
+
+let imageservice =
+  Eliom_registration.String.register_service
+    ~path:["image"]
+    ~get_params:Eliom_parameter.unit
+    (fun () () -> Lwt.return (image_string (), "image/png"))
+
+{client{
+
+  let draw ctx ((r, g, b), size, (x1, y1), (x2, y2)) =
+    let color = CSS.Color.string_of_t (CSS.Color.rgb r g b) in
+    ctx##strokeStyle <- (Js.string color);
+    ctx##lineWidth <- float size;
+    ctx##beginPath();
+    ctx##moveTo(float x1, float y1);
+    ctx##lineTo(float x2, float y2);
+    ctx##stroke()
+
+  let init_client () =
+
+    let canvas = Eliom_content.Html5.To_dom.of_canvas %canvas_elt in
+
+    let ctx = canvas##getContext (Dom_html._2d_) in
+    ctx##lineCap <- Js.string "round";
+
+    (* The initial image: *)
+    let img =
+      Eliom_content.Html5.To_dom.of_img
+        (img ~alt:"canvas"
+           ~src:(make_uri ~service:%imageservice ())
+           ())
+    in
+    img##onload <- Dom_html.handler
+      (fun ev -> ctx##drawImage(img, 0., 0.); Js._false);
+
+    (* Color of the brush *)
+    let colorpicker = Ojw_color_picker.create ~width:150 () in
+    Ojw_color_picker.append_at (Dom_html.document##body) colorpicker;
+    Ojw_color_picker.init_handler colorpicker;
+
+    let x = ref 0 and y = ref 0 in
+
+    let set_coord ev =
+      let x0, y0 = Dom_html.elementClientPosition canvas in
+      x := ev##clientX - x0; y := ev##clientY - y0
+    in
+
+    let compute_line ev =
+      let oldx = !x and oldy = !y in
+      set_coord ev;
+      let color = Ojw_color_picker.get_rgb colorpicker in
+      let size_slider = Eliom_content.Html5.To_dom.of_input %slider in
+      let size = int_of_string (Js.to_string size_slider##value) in
+      (color, size, (oldx, oldy), (!x, !y))
+    in
+
+    let line ev =
+      let v = compute_line ev in
+      let _ = Eliom_bus.write %bus v in
+      draw ctx v;
+      Lwt.return () in
+
+    Lwt.async
+      (fun () ->
+        let open Lwt_js_events in
+        mousedowns canvas
+          (fun ev _ ->
+            set_coord ev; line ev >>= fun () ->
+            Lwt.pick [mousemoves Dom_html.document (fun x _ -> line x);
+    	          mouseup Dom_html.document >>= line]));
+
+    Lwt.async (fun () -> Lwt_stream.iter (draw ctx) (Eliom_bus.stream %bus));
+
+
+}}
+
+let _ = Lwt_stream.iter draw_server (Eliom_bus.stream bus)
+
+let main_service =
+  My_app.register_service ~path:[""] ~get_params:Eliom_parameter.unit
+    (fun () () ->
+      (* Cf. the box "Client side side-effects on the server" *)
+      ignore {unit{ init_client () }};
+      Lwt.return page)
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/distillery-no-oclosure/update-symlinks.sh b/tutos/8.0/manual/files/tutorial/chapter1/distillery-no-oclosure/update-symlinks.sh
new file mode 100755
index 00000000..f49ae5cf
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/distillery-no-oclosure/update-symlinks.sh
@@ -0,0 +1,4 @@
+#!/bin/sh
+
+ln -s ../../static .
+
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/distillery-oclosure/Makefile b/tutos/8.0/manual/files/tutorial/chapter1/distillery-oclosure/Makefile
new file mode 100644
index 00000000..70b892db
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/distillery-oclosure/Makefile
@@ -0,0 +1,242 @@
+
+##----------------------------------------------------------------------
+## DISCLAIMER
+##
+## This file contains the rules to make an Eliom project. The project is
+## configured through the variables in the file Makefile.options.
+##----------------------------------------------------------------------
+
+include Makefile.options
+
+##----------------------------------------------------------------------
+##			      Internals
+
+## Required binaries
+ELIOMC            := eliomc
+ELIOMOPT          := eliomopt
+JS_OF_ELIOM       := js_of_eliom
+ELIOMDEP          := eliomdep
+OCSIGENSERVER     := ocsigenserver
+OCSIGENSERVER.OPT := ocsigenserver.opt
+
+## Where to put intermediate object files.
+## - ELIOM_{SERVER,CLIENT}_DIR must be distinct
+## - ELIOM_CLIENT_DIR must not be the local dir.
+## - ELIOM_SERVER_DIR could be ".", but you need to
+##   remove it from the "clean" rules...
+export ELIOM_SERVER_DIR := _server
+export ELIOM_CLIENT_DIR := _client
+export ELIOM_TYPE_DIR   := _server
+DEPSDIR := _deps
+
+ifeq ($(DEBUG),yes)
+  GENERATE_DEBUG ?= -g
+  RUN_DEBUG ?= "-v"
+  DEBUG_JS ?= -jsopt -pretty -jsopt -noinline -jsopt -debuginfo
+endif
+
+##----------------------------------------------------------------------
+## General
+
+.PHONY: all byte opt
+all: byte opt
+byte opt:: $(TEST_PREFIX)$(ELIOMSTATICDIR)/${PROJECT_NAME}.js
+byte opt:: $(TEST_PREFIX)$(ETCDIR)/$(PROJECT_NAME).conf
+byte opt:: $(TEST_PREFIX)$(ETCDIR)/$(PROJECT_NAME)-test.conf
+byte:: $(TEST_PREFIX)$(LIBDIR)/${PROJECT_NAME}.cma
+opt:: $(TEST_PREFIX)$(LIBDIR)/${PROJECT_NAME}.cmxs
+
+DIST_DIRS = $(ETCDIR) $(DATADIR) $(LIBDIR) $(LOGDIR) $(STATICDIR) $(ELIOMSTATICDIR) $(shell dirname $(CMDPIPE))
+
+##----------------------------------------------------------------------
+## Testing
+
+DIST_FILES = $(ELIOMSTATICDIR)/$(PROJECT_NAME).js $(LIBDIR)/$(PROJECT_NAME).cma
+
+.PHONY: test.byte test.opt
+test.byte: $(addprefix $(TEST_PREFIX),$(ETCDIR)/$(PROJECT_NAME)-test.conf $(DIST_DIRS) $(DIST_FILES))
+	$(OCSIGENSERVER) $(RUN_DEBUG) -c $<
+test.opt: $(addprefix $(TEST_PREFIX),$(ETCDIR)/$(PROJECT_NAME)-test.conf $(DIST_DIRS) $(patsubst %.cma,%.cmxs, $(DIST_FILES)))
+	$(OCSIGENSERVER.OPT) $(RUN_DEBUG) -c $<
+
+$(addprefix $(TEST_PREFIX), $(DIST_DIRS)):
+	mkdir -p $@
+
+##----------------------------------------------------------------------
+## Installing & Running
+
+.PHONY: install install.byte install.byte install.opt install.static install.etc install.lib install.lib.byte install.lib.opt run.byte run.opt
+install: install.byte install.opt
+install.byte: install.lib.byte install.etc install.static | $(addprefix $(PREFIX),$(DATADIR) $(LOGDIR) $(shell dirname $(CMDPIPE)))
+install.opt: install.lib.opt install.etc install.static | $(addprefix $(PREFIX),$(DATADIR) $(LOGDIR) $(shell dirname $(CMDPIPE)))
+install.lib: install.lib.byte install.lib.opt
+install.lib.byte: $(TEST_PREFIX)$(LIBDIR)/$(PROJECT_NAME).cma | $(PREFIX)$(LIBDIR)
+	install $< $(PREFIX)$(LIBDIR)
+install.lib.opt: $(TEST_PREFIX)$(LIBDIR)/$(PROJECT_NAME).cmxs | $(PREFIX)$(LIBDIR)
+	install $< $(PREFIX)$(LIBDIR)
+install.static: $(TEST_PREFIX)$(ELIOMSTATICDIR)/$(PROJECT_NAME).js | $(PREFIX)$(STATICDIR) $(PREFIX)$(ELIOMSTATICDIR)
+	cp -r $(LOCAL_STATIC)/* $(PREFIX)$(STATICDIR)
+	[ -z $(WWWUSER) ] || chown -R $(WWWUSER) $(PREFIX)$(STATICDIR)
+	install $(addprefix -o ,$(WWWUSER)) $< $(PREFIX)$(ELIOMSTATICDIR)
+install.etc: $(TEST_PREFIX)$(ETCDIR)/$(PROJECT_NAME).conf | $(PREFIX)$(ETCDIR)
+	install $< $(PREFIX)$(ETCDIR)/$(PROJECT_NAME).conf
+
+.PHONY:
+print-install-files:
+	@echo $(PREFIX)$(LIBDIR)
+	@echo $(PREFIX)$(STATICDIR)
+	@echo $(PREFIX)$(ELIOMSTATICDIR)
+	@echo $(PREFIX)$(ETCDIR)
+
+$(addprefix $(PREFIX),$(ETCDIR) $(LIBDIR)):
+	install -d $@
+$(addprefix $(PREFIX),$(DATADIR) $(LOGDIR) $(STATICDIR) $(ELIOMSTATICDIR) $(shell dirname $(CMDPIPE))):
+	install $(addprefix -o ,$(WWWUSER)) -d $@
+
+run.byte:
+	$(OCSIGENSERVER) $(RUN_DEBUG) -c ${PREFIX}${ETCDIR}/${PROJECT_NAME}.conf
+run.opt:
+	$(OCSIGENSERVER.OPT) $(RUN_DEBUG) -c ${PREFIX}${ETCDIR}/${PROJECT_NAME}.conf
+
+##----------------------------------------------------------------------
+## Aux
+
+# Use `eliomdep -sort' only in OCaml>4
+ifeq ($(shell ocamlc -version|cut -c1),4)
+eliomdep=$(shell $(ELIOMDEP) $(1) -sort $(2) $(filter %.eliom %.ml,$(3))))
+else
+eliomdep=$(3)
+endif
+objs=$(patsubst %.ml,$(1)/%.$(2),$(patsubst %.eliom,$(1)/%.$(2),$(filter %.eliom %.ml,$(3))))
+depsort=$(call objs,$(1),$(2),$(call eliomdep,$(3),$(4),$(5)))
+
+##----------------------------------------------------------------------
+## Config files
+
+FINDLIB_PACKAGES=$(patsubst %,\<extension\ findlib-package=\"%\"\ /\>,$(SERVER_PACKAGES))
+EDIT_WARNING=DON\'T EDIT THIS FILE! It is generated from $(PROJECT_NAME).conf.in, edit that one, or the variables in Makefile.options
+SED_ARGS := -e "/^ *%%%/d"
+SED_ARGS += -e "s|%%PROJECT_NAME%%|$(PROJECT_NAME)|g"
+SED_ARGS += -e "s|%%DATABASE_NAME%%|$(DATABASE_NAME)|g"
+SED_ARGS += -e "s|%%DATABASE_USER%%|$(DATABASE_USER)|g"
+SED_ARGS += -e "s|%%CMDPIPE%%|%%PREFIX%%$(CMDPIPE)|g"
+SED_ARGS += -e "s|%%LOGDIR%%|%%PREFIX%%$(LOGDIR)|g"
+SED_ARGS += -e "s|%%DATADIR%%|%%PREFIX%%$(DATADIR)|g"
+SED_ARGS += -e "s|%%LIBDIR%%|%%PREFIX%%$(LIBDIR)|g"
+SED_ARGS += -e "s|%%WARNING%%|$(EDIT_WARNING)|g"
+SED_ARGS += -e "s|%%PACKAGES%%|$(FINDLIB_PACKAGES)|g"
+SED_ARGS += -e "s|%%ELIOMSTATICDIR%%|%%PREFIX%%$(ELIOMSTATICDIR)|g"
+ifeq ($(DEBUG),yes)
+  SED_ARGS += -e "s|%%DEBUGMODE%%|\<debugmode /\>|g"
+else
+  SED_ARGS += -e "s|%%DEBUGMODE%%||g"
+endif
+
+LOCAL_SED_ARGS := -e "s|%%PORT%%|$(TEST_PORT)|g"
+LOCAL_SED_ARGS += -e "s|%%STATICDIR%%|$(LOCAL_STATIC)|g"
+LOCAL_SED_ARGS += -e "s|%%USERGROUP%%||g"
+GLOBAL_SED_ARGS := -e "s|%%PORT%%|$(PORT)|g"
+GLOBAL_SED_ARGS += -e "s|%%STATICDIR%%|%%PREFIX%%$(STATICDIR)|g"
+ifeq ($(WWWUSER)$(WWWGROUP),)
+  GLOBAL_SED_ARGS += -e "s|%%USERGROUP%%||g"
+else
+  GLOBAL_SED_ARGS += -e "s|%%USERGROUP%%|<user>$(WWWUSER)</user><group>$(WWWGROUP)</group>|g"
+endif
+
+$(TEST_PREFIX)${ETCDIR}/${PROJECT_NAME}.conf: ${PROJECT_NAME}.conf.in Makefile.options | $(TEST_PREFIX)$(ETCDIR)
+	sed $(SED_ARGS) $(GLOBAL_SED_ARGS) $< | sed -e "s|%%PREFIX%%|$(PREFIX)|g" > $@
+$(TEST_PREFIX)${ETCDIR}/${PROJECT_NAME}-test.conf: ${PROJECT_NAME}.conf.in Makefile.options | $(TEST_PREFIX)$(ETCDIR)
+	sed $(SED_ARGS) $(LOCAL_SED_ARGS) $< | sed -e "s|%%PREFIX%%|$(TEST_PREFIX)|g" > $@
+
+##----------------------------------------------------------------------
+## Server side compilation
+
+SERVER_INC  := ${addprefix -package ,${SERVER_PACKAGES}}
+
+${ELIOM_TYPE_DIR}/%.type_mli: %.eliom
+	${ELIOMC} -infer ${SERVER_INC} $<
+
+$(TEST_PREFIX)$(LIBDIR)/$(PROJECT_NAME).cma: $(call objs,$(ELIOM_SERVER_DIR),cmo,$(SERVER_FILES)) | $(TEST_PREFIX)$(LIBDIR)
+	${ELIOMC} -a -o $@ $(GENERATE_DEBUG) \
+          $(call depsort,$(ELIOM_SERVER_DIR),cmo,-server,$(SERVER_INC),$(SERVER_FILES))
+
+$(TEST_PREFIX)$(LIBDIR)/$(PROJECT_NAME).cmxa: $(call objs,$(ELIOM_SERVER_DIR),cmx,$(SERVER_FILES)) | $(TEST_PREFIX)$(LIBDIR)
+	${ELIOMOPT} -a -o $@ $(GENERATE_DEBUG) \
+          $(call depsort,$(ELIOM_SERVER_DIR),cmx,-server,$(SERVER_INC),$(SERVER_FILES))
+
+%.cmxs: %.cmxa
+	$(ELIOMOPT) -shared -linkall -o $@ $(GENERATE_DEBUG) $<
+
+${ELIOM_SERVER_DIR}/%.cmi: %.mli
+	${ELIOMC} -c ${SERVER_INC} $(GENERATE_DEBUG) $<
+
+${ELIOM_SERVER_DIR}/%.cmi: %.eliomi
+	${ELIOMC} -c ${SERVER_INC} $(GENERATE_DEBUG) $<
+
+${ELIOM_SERVER_DIR}/%.cmo: %.ml
+	${ELIOMC} -c ${SERVER_INC} $(GENERATE_DEBUG) $<
+${ELIOM_SERVER_DIR}/%.cmo: %.eliom
+	${ELIOMC} -c ${SERVER_INC} $(GENERATE_DEBUG) $<
+
+${ELIOM_SERVER_DIR}/%.cmx: %.ml
+	${ELIOMOPT} -c ${SERVER_INC} $(GENERATE_DEBUG) $<
+${ELIOM_SERVER_DIR}/%.cmx: %.eliom
+	${ELIOMOPT} -c ${SERVER_INC} $(GENERATE_DEBUG) $<
+
+
+##----------------------------------------------------------------------
+## Client side compilation
+
+CLIENT_LIBS := ${addprefix -package ,${CLIENT_PACKAGES}}
+CLIENT_INC  := ${addprefix -package ,${CLIENT_PACKAGES}}
+
+CLIENT_OBJS := $(filter %.eliom %.ml, $(CLIENT_FILES))
+CLIENT_OBJS := $(patsubst %.eliom,${ELIOM_CLIENT_DIR}/%.cmo, ${CLIENT_OBJS})
+CLIENT_OBJS := $(patsubst %.ml,${ELIOM_CLIENT_DIR}/%.cmo, ${CLIENT_OBJS})
+
+$(TEST_PREFIX)$(ELIOMSTATICDIR)/$(PROJECT_NAME).js: $(call objs,$(ELIOM_CLIENT_DIR),cmo,$(CLIENT_FILES)) | $(TEST_PREFIX)$(ELIOMSTATICDIR)
+	${JS_OF_ELIOM} -o $@ $(GENERATE_DEBUG) $(CLIENT_INC) $(DEBUG_JS) \
+          $(call depsort,$(ELIOM_CLIENT_DIR),cmo,-client,$(CLIENT_INC),$(CLIENT_FILES))
+
+$(TEST_PREFIX)$(ELIOMSTATICDIR)/$(PROJECT_NAME)_oclosure.js: $(TEST_PREFIX)$(ELIOMSTATICDIR)/$(PROJECT_NAME).js
+	oclosure_req $<
+
+${ELIOM_CLIENT_DIR}/%.cmi: %.mli
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $(GENERATE_DEBUG) $<
+
+${ELIOM_CLIENT_DIR}/%.cmo: %.eliom
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $(GENERATE_DEBUG) $<
+${ELIOM_CLIENT_DIR}/%.cmo: %.ml
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $(GENERATE_DEBUG) $<
+
+${ELIOM_CLIENT_DIR}/%.cmi: %.eliomi
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $(GENERATE_DEBUG) $<
+
+##----------------------------------------------------------------------
+## Dependencies
+
+include .depend
+
+.depend: $(patsubst %,$(DEPSDIR)/%.server,$(SERVER_FILES)) $(patsubst %,$(DEPSDIR)/%.client,$(CLIENT_FILES))
+	cat $^ > $@
+
+$(DEPSDIR)/%.server: % | $(DEPSDIR)
+	$(ELIOMDEP) -server $(SERVER_INC) $< > $@
+
+$(DEPSDIR)/%.client: % | $(DEPSDIR)
+	$(ELIOMDEP) -client $(CLIENT_INC) $< > $@
+
+$(DEPSDIR):
+	mkdir $@
+
+##----------------------------------------------------------------------
+## Clean up
+
+clean:
+	-rm -f *.cm[ioax] *.cmxa *.cmxs *.o *.a *.annot
+	-rm -f *.type_mli
+	-rm -f ${PROJECT_NAME}.js
+	-rm -rf ${ELIOM_CLIENT_DIR} ${ELIOM_SERVER_DIR}
+
+distclean: clean
+	-rm -rf $(TEST_PREFIX) $(DEPSDIR) .depend
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/distillery-oclosure/Makefile.options b/tutos/8.0/manual/files/tutorial/chapter1/distillery-oclosure/Makefile.options
new file mode 100644
index 00000000..53ea7f5f
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/distillery-oclosure/Makefile.options
@@ -0,0 +1,57 @@
+
+##----------------------------------------------------------------------
+##           SETTINGS FOR THE ELIOM PROJECT graffiti
+##----------------------------------------------------------------------
+
+PROJECT_NAME := graffiti
+
+## Do not forget `make depend' after adding a file!
+## Source files for the server
+SERVER_FILES := $(wildcard *.eliomi *.eliom)
+## Source files for the client
+CLIENT_FILES := $(wildcard *.eliomi *.eliom)
+
+## OCamlfind packages for the server
+SERVER_PACKAGES := cairo
+## OCamlfind packages for the client
+CLIENT_PACKAGES := oclosure
+
+## Directory with files to be statically served
+LOCAL_STATIC = static
+
+## Debug application (yes/no): Debugging info in compilation,
+## JavaScript, ocsigenserver
+DEBUG := no
+
+## User to run server with (make run.*)
+WWWUSER := www-data
+WWWGROUP := www-data
+
+## Port for running the server (make run.*)
+PORT := 80
+
+## Port for testing (make test.*)
+TEST_PORT := 8080
+
+## Root of installation (must end with /)
+PREFIX := /
+
+## Local folder for make test.* (must end with /)
+TEST_PREFIX := local/
+
+## The installation tree (relative to $(PREFIX) when installing/runnin
+## or $(TEST_PREFIX) when testing).
+# Configuration file $(PROJECT_NAME).conf
+ETCDIR := etc/${PROJECT_NAME}
+# Project's library $(PROJECT_NAME).cma (cmxs)
+LIBDIR := var/lib/${PROJECT_NAME}
+# Command pipe, eg. $ echo restart > $(INSTALL_PREFIX)$(CMDPIPE)
+CMDPIPE := var/run/${PROJECT_NAME}-cmd
+# Ocsigenserver's logging files
+LOGDIR := var/log/${PROJECT_NAME}
+# Ocsigenserver's persistent data files
+DATADIR := var/data/${PROJECT_NAME}
+# Copy of $(LOCAL_STATIC)
+STATICDIR := var/www/${PROJECT_NAME}/static
+# Project's JavaScript file
+ELIOMSTATICDIR := var/www/${PROJECT_NAME}/eliom
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/distillery-oclosure/README b/tutos/8.0/manual/files/tutorial/chapter1/distillery-oclosure/README
new file mode 100644
index 00000000..d2f190e5
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/distillery-oclosure/README
@@ -0,0 +1,59 @@
+
+This project is (initially) generated by eliom-distillery as the basic
+project "graffiti".
+
+It contains the following files:
+
+ - graffiti.eliom
+   This is your initial source file.
+   All Eliom files (*.eliom, *.eliomi) in this directory are
+   automatically considered.  To add a .ml/.mli file to your project,
+   add it to the variable SERVER_FILES or CLIENT_FILES.
+
+ - static/
+   The content of this folder is statically served. It contains
+   initially a basic CSS file for your project.
+
+ - Makefile.options
+   Configure your project here!
+
+ - graffiti.conf.in
+   This file is a template for the configuration file for
+   ocsigenserver. You will rarely have to edit itself - it takes its
+   variables from the Makefile.options. This way, the installation
+   rules and the configuration files are synchronized with respect to
+   the different folders.
+
+ - Makefile
+   This contains all rules necessary to build, test, and run your
+   Eliom application. You better don't touch it ;) See below for the
+   relevant targets.
+
+ - README
+   Not completely desribable here.
+
+
+Here's some help on how to work with this basic distillery project:
+
+ - Compile it
+     $ make all (or byte/opt)
+
+ - Test your application by running ocsigenserver locally
+     $ make test.byte (or test.opt)
+
+ - Install it
+     $ sudo make install (or install.byte/install.opt)
+
+ - Run the server on the installation
+     $ sudo make run.byte (or run.opt)
+   If the user to run ocsigenserver is yourself, you don't need the
+   `sudo'.  If Ocsigen isn't installed in a global position, however,
+   you may need to re-export some environment variables to make this
+   work:
+     $ sudo PATH=$PATH OCAMLPATH=$OCAMLPATH LD_LIBRARY_PATH=$LD_LIBRARY_PATH make run.byte/run.opt
+
+ - If you need a findlib package in your project, add it to the
+   variables SERVER_PACKAGES and/or CLIENT_PACKAGES.
+
+ - The directory static/ will be statically served. Put your CSS and
+   additional JavaScript files here!
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/distillery-oclosure/graffiti.conf.in b/tutos/8.0/manual/files/tutorial/chapter1/distillery-oclosure/graffiti.conf.in
new file mode 100644
index 00000000..82244ac9
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/distillery-oclosure/graffiti.conf.in
@@ -0,0 +1,28 @@
+%%% This is the template for your configuration file. The %%VALUES%% below are
+%%% taken from the Makefile to generate the actual configuration files.
+%%% This comment will disappear.
+<!-- %%WARNING%% -->
+<ocsigen>
+  <server>
+    <port>%%PORT%%</port>
+    %%% Only set for running, not for testing
+    %%USERGROUP%%
+    <logdir>%%LOGDIR%%</logdir>
+    <datadir>%%DATADIR%%</datadir>
+    <charset>utf-8</charset>
+    %%% Only set when debugging
+    %%DEBUGMODE%%
+    <commandpipe>%%CMDPIPE%%</commandpipe>
+    <extension findlib-package="ocsigenserver.ext.staticmod"/>
+    <extension findlib-package="ocsigenserver.ext.ocsipersist-sqlite"/>
+    <extension findlib-package="eliom.server"/>
+    %%% This will include the packages defined as SERVER_PACKAGES in your Makefile:
+    %%PACKAGES%%
+    <host hostfilter="*">
+      <static dir="%%STATICDIR%%" />
+      <static dir="%%ELIOMSTATICDIR%%" />
+      <eliommodule module="%%LIBDIR%%/%%PROJECT_NAME%%.cma" />
+      <eliom/>
+    </host>
+  </server>
+</ocsigen>
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/distillery-oclosure/graffiti.eliom b/tutos/8.0/manual/files/tutorial/chapter1/distillery-oclosure/graffiti.eliom
new file mode 100644
index 00000000..fa2bc8cc
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/distillery-oclosure/graffiti.eliom
@@ -0,0 +1,163 @@
+
+
+{shared{
+  open Eliom_lib.Lwt_ops
+  open Eliom_content.Html5.D
+
+  let width = 700
+  let height = 400
+
+  type messages = (string * int * (int * int) * (int * int))
+    deriving (Json)
+}}
+
+module My_app =
+  Eliom_registration.App (
+    struct
+      let application_name = "graffiti"
+    end)
+
+let bus = Eliom_bus.create Json.t<messages>
+
+let canvas_elt =
+  canvas ~a:[a_width width; a_height height]
+    [pcdata "your browser doesn't support canvas"]
+
+let page =
+  html
+    (Eliom_tools.F.head ~title:"Graffiti"
+       ~css:[
+         ["css";"common.css"];
+         ["css";"hsvpalette.css"];
+         ["css";"slider.css"];
+         ["css";"graffiti.css"];
+         ["graffiti_oclosure.js"];
+      ]
+      ~js:[ ["graffiti_oclosure.js"] ] ())
+    (body [h1 [pcdata "Graffiti"]; canvas_elt])
+
+
+let rgb_from_string color = (* color is in format "#rrggbb" *)
+  let get_color i =
+    (float_of_string ("0x"^(String.sub color (1+2*i) 2))) /. 255.
+  in
+  try get_color 0, get_color 1, get_color 2 with | _ -> 0.,0.,0.
+
+let draw_server, image_string =
+  let surface =
+    Cairo.image_surface_create Cairo.FORMAT_ARGB32 ~width ~height
+  in
+  let ctx = Cairo.create surface in
+  ((fun ((color : string), size, (x1, y1), (x2, y2)) ->
+
+    (* Set thickness of brush *)
+    Cairo.set_line_width ctx (float size) ;
+    Cairo.set_line_join ctx Cairo.LINE_JOIN_ROUND ;
+    Cairo.set_line_cap ctx Cairo.LINE_CAP_ROUND ;
+    let red, green, blue =  rgb_from_string color in
+    Cairo.set_source_rgb ctx ~red ~green ~blue ;
+
+    Cairo.move_to ctx (float x1) (float y1) ;
+    Cairo.line_to ctx (float x2) (float y2) ;
+    Cairo.close_path ctx ;
+
+    (* Apply the ink *)
+    Cairo.stroke ctx ;
+   ),
+   (fun () ->
+     let b = Buffer.create 10000 in
+     (* Output a PNG in a string *)
+     Cairo_png.surface_write_to_stream surface (Buffer.add_string b);
+     Buffer.contents b
+   ))
+
+let imageservice =
+  Eliom_registration.String.register_service
+    ~path:["image"]
+    ~get_params:Eliom_parameter.unit
+    (fun () () -> Lwt.return (image_string (), "image/png"))
+
+{client{
+
+  let draw ctx (color, size, (x1, y1), (x2, y2)) =
+    ctx##strokeStyle <- (Js.string color);
+    ctx##lineWidth <- float size;
+    ctx##beginPath();
+    ctx##moveTo(float x1, float y1);
+    ctx##lineTo(float x2, float y2);
+    ctx##stroke()
+
+  let init_client () =
+
+    let canvas = Eliom_content.Html5.To_dom.of_canvas %canvas_elt in
+
+    let ctx = canvas##getContext (Dom_html._2d_) in
+    ctx##lineCap <- Js.string "round";
+
+    (* The initial image: *)
+    let img =
+      Eliom_content.Html5.To_dom.of_img
+        (img ~alt:"canvas"
+           ~src:(make_uri ~service:%imageservice ())
+           ())
+    in
+    img##onload <- Dom_html.handler
+      (fun ev -> ctx##drawImage(img, 0., 0.); Js._false);
+
+    (* Size of the brush *)
+    let slider = jsnew Goog.Ui.slider(Js.null) in
+    slider##setMinimum(1.);
+    slider##setMaximum(80.);
+    slider##setValue(10.);
+    slider##setMoveToPointEnabled(Js._true);
+    slider##render(Js.some Dom_html.document##body);
+    (* The color palette: *)
+    let pSmall =
+      jsnew Goog.Ui.hsvPalette(Js.null, Js.null,
+                               Js.some (Js.string "goog-hsv-palette-sm"))
+    in
+    pSmall##render(Js.some Dom_html.document##body);
+
+    let x = ref 0 and y = ref 0 in
+
+    let set_coord ev =
+      let x0, y0 = Dom_html.elementClientPosition canvas in
+      x := ev##clientX - x0; y := ev##clientY - y0
+    in
+
+    let compute_line ev =
+      let oldx = !x and oldy = !y in
+      set_coord ev;
+      let color = Js.to_string (pSmall##getColor()) in
+      let size = int_of_float (Js.to_float (slider##getValue())) in
+      (color, size, (oldx, oldy), (!x, !y))
+    in
+
+    let line ev =
+      let v = compute_line ev in
+      let _ = Eliom_bus.write %bus v in
+      draw ctx v;
+      Lwt.return () in
+
+    Lwt.async
+      (fun () ->
+        let open Lwt_js_events in
+        mousedowns canvas
+          (fun ev _ ->
+            set_coord ev; line ev >>= fun () ->
+            Lwt.pick [mousemoves Dom_html.document (fun x _ -> line x);
+    	          mouseup Dom_html.document >>= line]));
+
+    Lwt.async (fun () -> Lwt_stream.iter (draw ctx) (Eliom_bus.stream %bus));
+
+
+}}
+
+let _ = Lwt_stream.iter draw_server (Eliom_bus.stream bus)
+
+let main_service =
+  My_app.register_service ~path:[""] ~get_params:Eliom_parameter.unit
+    (fun () () ->
+      (* Cf. the box "Client side side-effects on the server" *)
+      ignore {unit{ init_client () }};
+      Lwt.return page)
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/distillery-oclosure/update-symlinks.sh b/tutos/8.0/manual/files/tutorial/chapter1/distillery-oclosure/update-symlinks.sh
new file mode 100755
index 00000000..f49ae5cf
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/distillery-oclosure/update-symlinks.sh
@@ -0,0 +1,4 @@
+#!/bin/sh
+
+ln -s ../../static .
+
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/no_oclosure/.depend b/tutos/8.0/manual/files/tutorial/chapter1/no_oclosure/.depend
new file mode 100644
index 00000000..c5555cda
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/no_oclosure/.depend
@@ -0,0 +1,8 @@
+_server/graffiti.cmo :
+_server/graffiti.cmx :
+_server/graffiti.cmo : graffiti.type_mli
+_server/graffiti.cmx : graffiti.type_mli
+_client/graffiti.cmo :
+_client/graffiti.cmx :
+_client/graffiti.cmo : graffiti.type_mli
+_client/graffiti.cmx : graffiti.type_mli
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/no_oclosure/Makefile b/tutos/8.0/manual/files/tutorial/chapter1/no_oclosure/Makefile
new file mode 100644
index 00000000..ada2060e
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/no_oclosure/Makefile
@@ -0,0 +1,133 @@
+
+## Sample Makefile for eliom application.
+
+APP_NAME := graffiti
+
+## Packages required to build the server part of the application
+
+SERVER_PACKAGES := cairo
+
+## Packages to be linked in the client part
+
+CLIENT_PACKAGES :=
+
+## Source files for the server part
+
+SERVER_FILES := ${wildcard *.eliom}
+
+## Source files for the client part
+
+CLIENT_FILES := ${wildcard *.eliom}
+
+## Required binaries
+
+ELIOMC      := eliomc
+ELIOMOPT    := eliomopt
+ELIOMDEP    := eliomdep
+JS_OF_ELIOM := js_of_eliom
+
+## Where to put intermediate object files.
+## - ELIOM_{SERVER,CLIENT}_DIR must be distinct
+## - ELIOM_CLIENT_DIR mustn't be the local dir.
+## - ELIOM_SERVER_DIR could be ".", but you need to
+##   remove it from the "clean" rules...
+
+export ELIOM_SERVER_DIR := _server
+export ELIOM_CLIENT_DIR := _client
+export ELIOM_TYPE_DIR   := .
+
+#####################################
+
+all: byte opt
+byte:: ${APP_NAME}.cma ${APP_NAME}.js
+opt:: ${APP_NAME}.cmxs ${APP_NAME}.js
+
+#### Server side compilation #######
+
+SERVER_INC  := ${addprefix -package ,${SERVER_PACKAGES}}
+
+SERVER_OBJS := $(patsubst %.eliom,${ELIOM_SERVER_DIR}/%.cmo, ${SERVER_FILES})
+SERVER_OBJS := $(patsubst %.ml,${ELIOM_SERVER_DIR}/%.cmo, ${SERVER_OBJS})
+
+${APP_NAME}.cma: ${SERVER_OBJS}
+	${ELIOMC} -a -o $@ $^
+${APP_NAME}.cmxa: ${SERVER_OBJS:.cmo=.cmx}
+	${ELIOMOPT} -a -o $@ $^
+
+${ELIOM_TYPE_DIR}/%.type_mli: %.eliom
+	${ELIOMC} -infer ${SERVER_INC} $<
+
+${ELIOM_SERVER_DIR}/%.cmi: %.mli
+	${ELIOMC} -c ${SERVER_INC} $<
+
+${ELIOM_SERVER_DIR}/%.cmo: %.ml
+	${ELIOMC} -c ${SERVER_INC} $<
+${ELIOM_SERVER_DIR}/%.cmo: %.eliom
+	${ELIOMC} -c ${SERVER_INC} $<
+
+${ELIOM_SERVER_DIR}/%.cmx: %.ml
+	${ELIOMOPT} -c ${SERVER_INC} $<
+${ELIOM_SERVER_DIR}/%.cmx: %.eliom
+	${ELIOMOPT} -c ${SERVER_INC} $<
+
+%.cmxs: %.cmxa
+	$(ELIOMOPT) -shared -linkall -o $@ $<
+
+##### Client side compilation ####
+
+SERVER_INC_FOR_JS_OF_ELIOM := ${addprefix -package ,${SERVER_PACKAGES}}
+
+CLIENT_LIBS := ${addprefix -package ,${CLIENT_PACKAGES}}
+CLIENT_INC  := ${addprefix -package ,${CLIENT_PACKAGES}}
+
+CLIENT_OBJS := $(patsubst %.eliom,${ELIOM_CLIENT_DIR}/%.cmo, ${CLIENT_FILES})
+CLIENT_OBJS := $(patsubst %.ml,${ELIOM_CLIENT_DIR}/%.cmo, ${CLIENT_OBJS})
+
+${APP_NAME}.js: ${CLIENT_OBJS}
+	${JS_OF_ELIOM} -o $@ ${CLIENT_LIBS} $^
+
+${ELIOM_CLIENT_DIR}/%.cmi: %.mli
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $<
+
+${ELIOM_CLIENT_DIR}/%.cmo: %.eliom
+	${JS_OF_ELIOM} -c ${SERVER_INC_FOR_JS_OF_ELIOM} ${CLIENT_INC} $<
+${ELIOM_CLIENT_DIR}/%.cmo: %.ml
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $<
+
+############
+
+## Clean up
+
+clean:
+	-rm -f *.cm[ioax] *.cmxa *.cmxs *.o *.a *.annot
+	-rm -f *.type_mli
+	-rm -f ${APP_NAME}.js
+	-rm -rf ${ELIOM_CLIENT_DIR} ${ELIOM_SERVER_DIR}
+
+distclean: clean.local
+	-rm -f *~ \#* .\#*
+
+## Dependencies
+
+depend: .depend
+.depend: ${SERVER_FILES} ${CLIENT_FILES}
+	$(ELIOMDEP) -server ${SERVER_INC} ${SERVER_FILES} > .depend
+	$(ELIOMDEP) -client ${CLIENT_INC} ${CLIENT_FILES} >> .depend
+
+## Warning: Dependencies towards *.eliom are not handled by eliomdep yet.
+## Add manually dependencies between cmo and cmx files here,
+## for example:
+## oneeliomfile.cmo: anothereliomfile.cmo
+## oneeliomfile.cmx: anothereliomfile.cmx
+
+-include .depend
+
+## installation #########
+
+STATICDIR      := /tmp/static
+
+$(STATICDIR):
+	mkdir -p $@
+
+install: all $(STATICDIR)
+	cp $(APP_NAME).js $(STATICDIR)/$(APP_NAME).js
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/no_oclosure/graffiti.conf b/tutos/8.0/manual/files/tutorial/chapter1/no_oclosure/graffiti.conf
new file mode 100644
index 00000000..5e4ddfd8
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/no_oclosure/graffiti.conf
@@ -0,0 +1,38 @@
+<ocsigen>
+
+  <server>
+
+    <port>8080</port>
+
+    <!-- Update all the directories according to your installation -->
+    <!-- A default configuration file is usually provided in /etc/ocsigen/ -->
+    <logdir>/tmp</logdir>
+    <datadir>/tmp</datadir>
+    <user></user>
+    <group></group>
+    <commandpipe>/tmp/ocsigen_command</commandpipe>
+
+    <charset>utf-8</charset>
+    <debugmode/>
+
+    <extension findlib-package="ocsigenserver.ext.staticmod"/>
+
+    <extension findlib-package="ocsigenserver.ext.ocsipersist-sqlite">
+      <database file="/tmp/ocsidb"/>
+    </extension>
+
+    <extension findlib-package="eliom.server"/>
+    <extension findlib-package="cairo"/>
+
+    <host hostfilter="*">
+
+      <!-- The directory containing static files (must be absolute): -->
+      <static dir="/tmp/static" />
+
+      <eliom module="./graffiti.cma" />
+
+    </host>
+
+  </server>
+
+</ocsigen>
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/no_oclosure/graffiti.eliom b/tutos/8.0/manual/files/tutorial/chapter1/no_oclosure/graffiti.eliom
new file mode 100644
index 00000000..967438c7
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/no_oclosure/graffiti.eliom
@@ -0,0 +1,124 @@
+{shared{
+  open Eliom_content
+  open Eliom_content.Html5.D
+  open Eliom_lib.Lwt_ops
+  let width = 700
+  let height = 400
+}}
+
+module My_appl =
+  Eliom_registration.App (
+    struct
+      let application_name = "graffiti"
+    end)
+
+{client{
+  let draw ctx (color, size, (x1, y1), (x2, y2)) =
+    ctx##strokeStyle <- (Js.string color);
+    ctx##lineWidth <- float size;
+    ctx##beginPath();
+    ctx##moveTo(float x1, float y1);
+    ctx##lineTo(float x2, float y2);
+    ctx##stroke()
+}}
+
+{shared{
+  type messages = (string * int * (int * int) * (int * int)) deriving (Json)
+}}
+
+let bus = Eliom_bus.create ~name:"graff" Json.t<messages>
+
+let rgb_from_string color = (* color is in format "#rrggbb" *)
+  let get_color i = (float_of_string ("0x"^(String.sub color (1+2*i) 2))) /. 255. in
+  try get_color 0, get_color 1, get_color 2 with | _ -> 0.,0.,0.
+
+let draw_server, image_string =
+  let surface = Cairo.image_surface_create Cairo.FORMAT_ARGB32 ~width ~height in
+  let ctx = Cairo.create surface in
+  ((fun ((color : string), size, (x1, y1), (x2, y2)) ->
+
+    (* Set thickness of brush *)
+    Cairo.set_line_width ctx (float size) ;
+    Cairo.set_line_join ctx Cairo.LINE_JOIN_ROUND ;
+    Cairo.set_line_cap ctx Cairo.LINE_CAP_ROUND ;
+    let red, green, blue =  rgb_from_string color in
+    Cairo.set_source_rgb ctx ~red ~green ~blue ;
+
+    Cairo.move_to ctx (float x1) (float y1) ;
+    Cairo.line_to ctx (float x2) (float y2) ;
+    Cairo.close_path ctx ;
+
+    (* Apply the ink *)
+    Cairo.stroke ctx ;
+   ),
+   (fun () ->
+     let b = Buffer.create 10000 in
+     (* Output a PNG in a string *)
+     Cairo_png.surface_write_to_stream surface (Buffer.add_string b);
+     Buffer.contents b
+   ))
+
+let _ = Lwt_stream.iter draw_server (Eliom_bus.stream bus)
+
+let imageservice =
+  Eliom_registration.String.register_service
+    ~path:["image"]
+    ~get_params:Eliom_parameter.unit
+    (fun () () -> Lwt.return (image_string (), "image/png"))
+
+let page =
+  html
+    (head (title (pcdata "Graffiti")) [])
+    (body [h1 [pcdata "Graffiti"]])
+
+let init_client () = ignore {unit{
+  let canvas = Dom_html.createCanvas Dom_html.document in
+  let ctx = canvas##getContext (Dom_html._2d_) in
+  canvas##width <- width; canvas##height <- height;
+  ctx##lineCap <- Js.string "round";
+
+  Dom.appendChild Dom_html.document##body canvas;
+
+  (* The initial image: *)
+  let img =
+    Html5.To_dom.of_img
+      (img ~alt:"canvas"
+         ~src:(make_uri ~service:%imageservice ())
+         ())
+  in
+  img##onload <- Dom_html.handler
+    (fun ev -> ctx##drawImage(img, 0., 0.); Js._false);
+
+  let x = ref 0 and y = ref 0 in
+
+  let set_coord ev =
+    let x0, y0 = Dom_html.elementClientPosition canvas in
+    x := ev##clientX - x0; y := ev##clientY - y0 in
+
+  let compute_line ev =
+    let oldx = !x and oldy = !y in
+    set_coord ev;
+    ("#ff9933", 5, (oldx, oldy), (!x, !y))
+  in
+
+  let line ev =
+    let v = compute_line ev in
+    let _ = Eliom_bus.write %bus v in
+    draw ctx v;
+    Lwt.return ()
+  in
+
+  let _ = Lwt_stream.iter (draw ctx) (Eliom_bus.stream %bus) in
+
+  let open Lwt_js_events in
+  ignore (mousedowns canvas
+            (fun ev _ -> set_coord ev; line ev >>= fun () ->
+              Lwt.pick [mousemoves Dom_html.document (fun a _ -> line a);
+		        mouseup Dom_html.document >>= line]));
+}}
+
+let main_service =
+  My_appl.register_service ~path:[""] ~get_params:Eliom_parameter.unit
+    (fun () () ->
+      init_client ();
+      Lwt.return page)
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/start/Makefile b/tutos/8.0/manual/files/tutorial/chapter1/start/Makefile
new file mode 100644
index 00000000..4b16f914
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/start/Makefile
@@ -0,0 +1,2 @@
+graffiti.cmo: graffiti.ml
+	ocamlfind ocamlc -thread -package eliom.server -c graffiti.ml
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/start/graffiti.conf b/tutos/8.0/manual/files/tutorial/chapter1/start/graffiti.conf
new file mode 100644
index 00000000..82b016de
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/start/graffiti.conf
@@ -0,0 +1,29 @@
+<ocsigen>
+
+  <server>
+
+    <port>8080</port>
+
+    <!-- Update all the directories according to your installation -->
+    <!-- A default configuration file is usually provided in /etc/ocsigen/ -->
+    <logdir>/tmp</logdir>
+    <datadir>/tmp</datadir>
+    <user></user>
+    <group></group>
+    <commandpipe>/tmp/ocsigen_command</commandpipe>
+
+    <extension findlib-package="ocsigenserver.ext.staticmod"/>
+
+    <extension findlib-package="ocsigenserver.ext.ocsipersist-sqlite">
+      <database file="/tmp/ocsidb"/>
+    </extension>
+
+    <extension findlib-package="eliom.server"/>
+
+    <host hostfilter="*">
+      <eliom module="./graffiti.cmo" />
+    </host>
+
+  </server>
+
+</ocsigen>
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/start/graffiti.ml b/tutos/8.0/manual/files/tutorial/chapter1/start/graffiti.ml
new file mode 100644
index 00000000..3c597168
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/start/graffiti.ml
@@ -0,0 +1,10 @@
+open Lwt
+open Eliom_parameter
+open Eliom_content.Html5.D
+open Eliom_registration.Html5
+
+let main_service =
+  register_service ~path:["graff"] ~get_params:unit
+    (fun () () -> return (html (head (title (pcdata "")) [])
+                               (body [h1 [pcdata "Graffiti"]])))
+
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/with_oclosure/.depend b/tutos/8.0/manual/files/tutorial/chapter1/with_oclosure/.depend
new file mode 100644
index 00000000..5736884c
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/with_oclosure/.depend
@@ -0,0 +1,8 @@
+_server/graffiti.cmo: _server/graffiti.type_mli
+_server/graffiti.cmx: _server/graffiti.type_mli
+_server/graffiti.cmo:
+_server/graffiti.cmx:
+_client/graffiti.cmo: _server/graffiti.type_mli
+_client/graffiti.cmx: _server/graffiti.type_mli
+_client/graffiti.cmo:
+_client/graffiti.cmx:
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/with_oclosure/Makefile b/tutos/8.0/manual/files/tutorial/chapter1/with_oclosure/Makefile
new file mode 100644
index 00000000..e9067111
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/with_oclosure/Makefile
@@ -0,0 +1,144 @@
+
+## Sample Makefile for eliom application.
+
+APP_NAME := graffiti
+
+## Packages required to build the server part of the application
+
+SERVER_PACKAGES := cairo
+
+## Packages to be linked in the client part
+
+CLIENT_PACKAGES := oclosure
+
+## Source files for the server part
+
+SERVER_FILES := ${wildcard *.eliom}
+
+## Source files for the client part
+
+CLIENT_FILES := ${wildcard *.eliom}
+
+## Required binaries
+
+ELIOMC       := eliomc
+ELIOMOPT     := eliomopt
+ELIOMDEP     := eliomdep
+JS_OF_ELIOM  := js_of_eliom
+OCLOSURE_REQ := oclosure_req
+
+## Where to put intermediate object files.
+## - ELIOM_{SERVER,CLIENT}_DIR must be distinct
+## - ELIOM_CLIENT_DIR mustn't be the local dir.
+## - ELIOM_SERVER_DIR could be ".", but you need to
+##   remove it from the "clean" rules...
+
+export ELIOM_SERVER_DIR := _server
+export ELIOM_CLIENT_DIR := _client
+export ELIOM_TYPE_DIR   := ${ELIOM_SERVER_DIR}
+
+#####################################
+
+all: byte opt
+byte:: ${APP_NAME}.cma ${APP_NAME}.js ${APP_NAME}_oclosure.js
+opt:: ${APP_NAME}.cmxs ${APP_NAME}.js ${APP_NAME}_oclosure.js
+
+#### Server side compilation #######
+
+SERVER_INC  := ${addprefix -package ,${SERVER_PACKAGES}}
+
+SERVER_OBJS := $(patsubst %.eliom,${ELIOM_SERVER_DIR}/%.cmo, ${SERVER_FILES})
+SERVER_OBJS := $(patsubst %.ml,${ELIOM_SERVER_DIR}/%.cmo, ${SERVER_OBJS})
+
+${APP_NAME}.cma: ${SERVER_OBJS}
+	${ELIOMC} -a -o $@ $^
+${APP_NAME}.cmxa: ${SERVER_OBJS:.cmo=.cmx}
+	${ELIOMOPT} -a -o $@ $^
+
+${ELIOM_TYPE_DIR}/%.type_mli: %.eliom
+	${ELIOMC} -infer ${SERVER_INC} $<
+
+${ELIOM_SERVER_DIR}/%.cmi: %.mli
+	${ELIOMC} -c ${SERVER_INC} $<
+
+${ELIOM_SERVER_DIR}/%.cmo: %.ml
+	${ELIOMC} -c ${SERVER_INC} $<
+${ELIOM_SERVER_DIR}/%.cmo: %.eliom
+	${ELIOMC} -c -noinfer ${SERVER_INC} $<
+
+${ELIOM_SERVER_DIR}/%.cmx: %.ml
+	${ELIOMOPT} -c ${SERVER_INC} $<
+${ELIOM_SERVER_DIR}/%.cmx: %.eliom
+	${ELIOMOPT} -c -noinfer ${SERVER_INC} $<
+
+%.cmxs: %.cmxa
+	$(ELIOMOPT) -shared -linkall -o $@ $<
+
+##### Client side compilation ####
+
+CLIENT_LIBS := ${addprefix -package ,${CLIENT_PACKAGES}}
+CLIENT_INC  := ${addprefix -package ,${CLIENT_PACKAGES}}
+
+CLIENT_OBJS := $(patsubst %.eliom,${ELIOM_CLIENT_DIR}/%.cmo, ${CLIENT_FILES})
+CLIENT_OBJS := $(patsubst %.ml,${ELIOM_CLIENT_DIR}/%.cmo, ${CLIENT_OBJS})
+
+${APP_NAME}.js: ${CLIENT_OBJS}
+	${JS_OF_ELIOM} -o $@ ${CLIENT_LIBS} $^
+
+${ELIOM_CLIENT_DIR}/%.cmi: %.mli
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $<
+
+${ELIOM_CLIENT_DIR}/%.cmo: %.eliom
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $<
+${ELIOM_CLIENT_DIR}/%.cmo: %.ml
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $<
+
+############
+
+## Clean up
+
+clean:
+	-rm -f *.cm[ioax] *.cmxa *.cmxs *.o *.a *.annot
+	-rm -f *.type_mli
+	-rm -f ${APP_NAME}.js
+	-rm -rf ${ELIOM_CLIENT_DIR} ${ELIOM_SERVER_DIR}
+	-rm -f $(APP_NAME)_oclosure.js
+
+distclean: clean
+	-rm -f *~ \#* .\#*
+	-rm -f .depend
+
+## Dependencies
+
+depend: .depend
+.depend: ${SERVER_FILES} ${CLIENT_FILES}
+	$(ELIOMDEP) -server ${SERVER_INC} ${SERVER_FILES} > .depend
+	$(ELIOMDEP) -client ${CLIENT_INC} ${CLIENT_FILES} >> .depend
+
+## Warning: Dependencies towards *.eliom are not handled by eliomdep yet.
+## Add manually dependencies between cmo and cmx files here,
+## for example:
+## oneeliomfile.cmo: anothereliomfile.cmo
+## oneeliomfile.cmx: anothereliomfile.cmx
+
+include .depend
+
+## installation #########
+
+STATICDIR      := /tmp/static
+
+$(STATICDIR):
+	mkdir -p $@
+
+install: all $(STATICDIR)
+	cp $(APP_NAME)_oclosure.js $(STATICDIR)/$(APP_NAME)_oclosure.js
+	cp $(APP_NAME).js $(STATICDIR)/$(APP_NAME).js
+
+## oclosure #############
+
+OCAML          := ocaml
+OCAMLFIND      := ocamlfind
+OCLOSUREDIR    := $(shell ${OCAMLFIND} query oclosure)
+
+$(APP_NAME)_oclosure.js: $(APP_NAME).js
+	${OCLOSURE_REQ} $^
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/with_oclosure/graffiti.conf b/tutos/8.0/manual/files/tutorial/chapter1/with_oclosure/graffiti.conf
new file mode 100644
index 00000000..5e4ddfd8
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/with_oclosure/graffiti.conf
@@ -0,0 +1,38 @@
+<ocsigen>
+
+  <server>
+
+    <port>8080</port>
+
+    <!-- Update all the directories according to your installation -->
+    <!-- A default configuration file is usually provided in /etc/ocsigen/ -->
+    <logdir>/tmp</logdir>
+    <datadir>/tmp</datadir>
+    <user></user>
+    <group></group>
+    <commandpipe>/tmp/ocsigen_command</commandpipe>
+
+    <charset>utf-8</charset>
+    <debugmode/>
+
+    <extension findlib-package="ocsigenserver.ext.staticmod"/>
+
+    <extension findlib-package="ocsigenserver.ext.ocsipersist-sqlite">
+      <database file="/tmp/ocsidb"/>
+    </extension>
+
+    <extension findlib-package="eliom.server"/>
+    <extension findlib-package="cairo"/>
+
+    <host hostfilter="*">
+
+      <!-- The directory containing static files (must be absolute): -->
+      <static dir="/tmp/static" />
+
+      <eliom module="./graffiti.cma" />
+
+    </host>
+
+  </server>
+
+</ocsigen>
diff --git a/tutos/8.0/manual/files/tutorial/chapter1/with_oclosure/graffiti.eliom b/tutos/8.0/manual/files/tutorial/chapter1/with_oclosure/graffiti.eliom
new file mode 100644
index 00000000..442f125b
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter1/with_oclosure/graffiti.eliom
@@ -0,0 +1,163 @@
+{shared{
+  open Eliom_content
+  open Eliom_content.Html5.D
+  open Eliom_lib.Lwt_ops
+  let width = 700
+  let height = 400
+}}
+
+module My_appl =
+  Eliom_registration.App (
+    struct
+      let application_name = "graffiti"
+    end)
+
+{client{
+  let draw ctx (color, size, (x1, y1), (x2, y2)) =
+    ctx##strokeStyle <- (Js.string color);
+    ctx##lineWidth <- float size;
+    ctx##beginPath();
+    ctx##moveTo(float x1, float y1);
+    ctx##lineTo(float x2, float y2);
+    ctx##stroke()
+}}
+
+{shared{
+  type messages = (string * int * (int * int) * (int * int)) deriving (Json)
+}}
+
+let bus = Eliom_bus.create ~name:"graff" Json.t<messages>
+
+let rgb_from_string color = (* color is in format "#rrggbb" *)
+  let get_color i = (float_of_string ("0x"^(String.sub color (1+2*i) 2))) /. 255. in
+  try get_color 0, get_color 1, get_color 2 with | _ -> 0.,0.,0.
+
+let draw_server, image_string =
+  let surface = Cairo.image_surface_create Cairo.FORMAT_ARGB32 ~width ~height in
+  let ctx = Cairo.create surface in
+  ((fun ((color : string), size, (x1, y1), (x2, y2)) ->
+
+    (* Set thickness of brush *)
+    Cairo.set_line_width ctx (float size) ;
+    Cairo.set_line_join ctx Cairo.LINE_JOIN_ROUND ;
+    Cairo.set_line_cap ctx Cairo.LINE_CAP_ROUND ;
+    let red, green, blue =  rgb_from_string color in
+    Cairo.set_source_rgb ctx ~red ~green ~blue ;
+
+    Cairo.move_to ctx (float x1) (float y1) ;
+    Cairo.line_to ctx (float x2) (float y2) ;
+    Cairo.close_path ctx ;
+
+    (* Apply the ink *)
+    Cairo.stroke ctx ;
+   ),
+   (fun () ->
+     let b = Buffer.create 10000 in
+     (* Output a PNG in a string *)
+     Cairo_png.surface_write_to_stream surface (Buffer.add_string b);
+     Buffer.contents b
+   ))
+
+let _ = Lwt_stream.iter draw_server (Eliom_bus.stream bus)
+
+let imageservice =
+  Eliom_registration.String.register_service
+    ~path:["image"]
+    ~get_params:Eliom_parameter.unit
+    (fun () () -> Lwt.return (image_string (), "image/png"))
+
+let canvas_elt =
+  canvas ~a:[a_width width; a_height height]
+    [pcdata "your browser doesn't support canvas"]
+
+let page =
+  html
+    (head
+       (title (pcdata "Graffiti"))
+       [ css_link
+           ~uri:(make_uri (Eliom_service.static_dir ())
+                  ["css";"common.css"]) ();
+         css_link
+           ~uri:(make_uri (Eliom_service.static_dir ())
+                  ["css";"hsvpalette.css"]) ();
+         css_link
+           ~uri:(make_uri (Eliom_service.static_dir ())
+                  ["css";"slider.css"]) ();
+         css_link
+           ~uri:(make_uri (Eliom_service.static_dir ())
+                  ["css";"graffiti.css"]) ();
+         js_script
+           ~uri:(make_uri  (Eliom_service.static_dir ())
+                  ["graffiti_oclosure.js"]) ();
+       ])
+    (body [h1 [pcdata "Graffiti"]; canvas_elt])
+
+let init_client () = ignore {unit{
+
+  (* Initialize the canvas *)
+  let canvas = Html5.To_dom.of_canvas %canvas_elt in
+  let ctx = canvas##getContext (Dom_html._2d_) in
+  ctx##lineCap <- Js.string "round";
+
+  (* The initial image: *)
+  let img =
+    Html5.To_dom.of_img
+      (img ~alt:"canvas"
+         ~src:(make_uri ~service:%imageservice ())
+         ())
+  in
+  img##onload <- Dom_html.handler
+    (fun _ -> ctx##drawImage(img, 0., 0.); Js._false);
+
+  (* Size of the brush *)
+  let slider = jsnew Goog.Ui.slider(Js.null) in
+  slider##setOrientation(Goog.Ui.SliderBase.Orientation._VERTICAL);
+  slider##setMinimum(1.);
+  slider##setMaximum(80.);
+  slider##setValue(10.);
+  slider##setMoveToPointEnabled(Js._true);
+  slider##render(Js.some Dom_html.document##body);
+
+  (* The color palette: *)
+  let pSmall =
+    jsnew Goog.Ui.hsvPalette(Js.null, Js.null,
+                             Js.some (Js.string "goog-hsv-palette-sm"))
+  in
+  pSmall##render(Js.some Dom_html.document##body);
+
+  let x = ref 0 and y = ref 0 in
+
+  let set_coord ev =
+    let x0, y0 = Dom_html.elementClientPosition canvas in
+    x := ev##clientX - x0; y := ev##clientY - y0 in
+
+  let compute_line ev =
+    let oldx = !x and oldy = !y in
+    set_coord ev;
+    let color = Js.to_string (pSmall##getColor()) in
+    let size = int_of_float (Js.to_float (slider##getValue())) in
+    (color, size, (oldx, oldy), (!x, !y))
+  in
+
+  let line ev =
+    let v = compute_line ev in
+    let _ = Eliom_bus.write %bus v in
+    draw ctx v;
+    Lwt.return ()
+  in
+
+  let _ = Lwt_stream.iter (draw ctx) (Eliom_bus.stream %bus) in
+
+  let open Lwt_js_events in
+  ignore (mousedowns canvas
+            (fun ev _ -> set_coord ev; line ev >>= fun () ->
+              Lwt.pick [mousemoves Dom_html.document (fun x _ -> line x);
+		        mouseup Dom_html.document >>= line]));
+}}
+
+let main_service =
+  My_appl.register_service ~path:[""] ~get_params:Eliom_parameter.unit
+    (fun () () ->
+      init_client ();
+      Lwt.return page)
+
diff --git a/tutos/8.0/manual/files/tutorial/chapter2/Makefile b/tutos/8.0/manual/files/tutorial/chapter2/Makefile
new file mode 100644
index 00000000..8c47d398
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter2/Makefile
@@ -0,0 +1,240 @@
+
+##----------------------------------------------------------------------
+## DISCLAIMER
+##
+## This file contains the rules to make an Eliom project. The project is
+## configured through the variables in the file Makefile.options.
+##----------------------------------------------------------------------
+
+include Makefile.options
+
+##----------------------------------------------------------------------
+##			      Internals
+
+## Required binaries
+ELIOMC            := eliomc -ppx
+ELIOMOPT          := eliomopt -ppx
+JS_OF_ELIOM       := js_of_eliom -ppx
+ELIOMDEP          := eliomdep
+OCSIGENSERVER     := ocsigenserver
+OCSIGENSERVER.OPT := ocsigenserver.opt
+
+## Where to put intermediate object files.
+## - ELIOM_{SERVER,CLIENT}_DIR must be distinct
+## - ELIOM_CLIENT_DIR must not be the local dir.
+## - ELIOM_SERVER_DIR could be ".", but you need to
+##   remove it from the "clean" rules...
+export ELIOM_SERVER_DIR := _server
+export ELIOM_CLIENT_DIR := _client
+export ELIOM_TYPE_DIR   := _server
+DEPSDIR := _deps
+
+ifeq ($(DEBUG),yes)
+  GENERATE_DEBUG ?= -g
+  RUN_DEBUG ?= "-v"
+  DEBUG_JS ?= -jsopt -pretty -jsopt -noinline -jsopt -debuginfo
+endif
+
+##----------------------------------------------------------------------
+## General
+
+.PHONY: all byte opt
+all: byte opt
+byte opt:: $(TEST_PREFIX)$(ELIOMSTATICDIR)/${PROJECT_NAME}.js
+byte opt:: $(TEST_PREFIX)$(ETCDIR)/$(PROJECT_NAME).conf
+byte opt:: $(TEST_PREFIX)$(ETCDIR)/$(PROJECT_NAME)-test.conf
+byte:: $(TEST_PREFIX)$(LIBDIR)/${PROJECT_NAME}.cma
+opt:: $(TEST_PREFIX)$(LIBDIR)/${PROJECT_NAME}.cmxs
+
+DIST_DIRS = $(ETCDIR) $(DATADIR) $(LIBDIR) $(LOGDIR) $(STATICDIR) $(ELIOMSTATICDIR) $(shell dirname $(CMDPIPE))
+
+##----------------------------------------------------------------------
+## Testing
+
+DIST_FILES = $(ELIOMSTATICDIR)/$(PROJECT_NAME).js $(LIBDIR)/$(PROJECT_NAME).cma
+
+.PHONY: test.byte test.opt
+test.byte: $(addprefix $(TEST_PREFIX),$(ETCDIR)/$(PROJECT_NAME)-test.conf $(DIST_DIRS) $(DIST_FILES))
+	$(OCSIGENSERVER) $(RUN_DEBUG) -c $<
+test.opt: $(addprefix $(TEST_PREFIX),$(ETCDIR)/$(PROJECT_NAME)-test.conf $(DIST_DIRS) $(patsubst %.cma,%.cmxs, $(DIST_FILES)))
+	$(OCSIGENSERVER.OPT) $(RUN_DEBUG) -c $<
+
+$(addprefix $(TEST_PREFIX), $(DIST_DIRS)):
+	mkdir -p $@
+
+##----------------------------------------------------------------------
+## Installing & Running
+
+.PHONY: install install.byte install.byte install.opt install.static install.etc install.lib install.lib.byte install.lib.opt run.byte run.opt
+install: install.byte install.opt
+install.byte: install.lib.byte install.etc install.static | $(addprefix $(PREFIX),$(DATADIR) $(LOGDIR) $(shell dirname $(CMDPIPE)))
+install.opt: install.lib.opt install.etc install.static | $(addprefix $(PREFIX),$(DATADIR) $(LOGDIR) $(shell dirname $(CMDPIPE)))
+install.lib: install.lib.byte install.lib.opt
+install.lib.byte: $(TEST_PREFIX)$(LIBDIR)/$(PROJECT_NAME).cma | $(PREFIX)$(LIBDIR)
+	install $< $(PREFIX)$(LIBDIR)
+install.lib.opt: $(TEST_PREFIX)$(LIBDIR)/$(PROJECT_NAME).cmxs | $(PREFIX)$(LIBDIR)
+	install $< $(PREFIX)$(LIBDIR)
+install.static: $(TEST_PREFIX)$(ELIOMSTATICDIR)/$(PROJECT_NAME).js | $(PREFIX)$(STATICDIR) $(PREFIX)$(ELIOMSTATICDIR)
+	cp -r $(LOCAL_STATIC)/* $(PREFIX)$(STATICDIR)
+	[ -z $(WWWUSER) ] || chown -R $(WWWUSER) $(PREFIX)$(STATICDIR)
+	install $(addprefix -o ,$(WWWUSER)) $< $(PREFIX)$(ELIOMSTATICDIR)
+install.etc: $(TEST_PREFIX)$(ETCDIR)/$(PROJECT_NAME).conf | $(PREFIX)$(ETCDIR)
+	install $< $(PREFIX)$(ETCDIR)/$(PROJECT_NAME).conf
+
+.PHONY:
+print-install-files:
+	@echo $(PREFIX)$(LIBDIR)
+	@echo $(PREFIX)$(STATICDIR)
+	@echo $(PREFIX)$(ELIOMSTATICDIR)
+	@echo $(PREFIX)$(ETCDIR)
+
+$(addprefix $(PREFIX),$(ETCDIR) $(LIBDIR)):
+	install -d $@
+$(addprefix $(PREFIX),$(DATADIR) $(LOGDIR) $(STATICDIR) $(ELIOMSTATICDIR) $(shell dirname $(CMDPIPE))):
+	install $(addprefix -o ,$(WWWUSER)) -d $@
+
+run.byte:
+	$(OCSIGENSERVER) $(RUN_DEBUG) -c ${PREFIX}${ETCDIR}/${PROJECT_NAME}.conf
+run.opt:
+	$(OCSIGENSERVER.OPT) $(RUN_DEBUG) -c ${PREFIX}${ETCDIR}/${PROJECT_NAME}.conf
+
+##----------------------------------------------------------------------
+## Aux
+
+# Use `eliomdep -sort' only in OCaml>4
+ifeq ($(shell ocamlc -version|cut -c1),4)
+eliomdep=$(shell $(ELIOMDEP) $(1) -ppx -sort $(2) $(filter %.eliom %.ml,$(3))))
+else
+eliomdep=$(3)
+endif
+objs=$(patsubst %.ml,$(1)/%.$(2),$(patsubst %.eliom,$(1)/%.$(2),$(filter %.eliom %.ml,$(3))))
+depsort=$(call objs,$(1),$(2),$(call eliomdep,$(3),$(4),$(5)))
+
+##----------------------------------------------------------------------
+## Config files
+
+FINDLIB_PACKAGES=$(patsubst %,\<extension\ findlib-package=\"%\"\ /\>,$(SERVER_PACKAGES))
+EDIT_WARNING=DON\'T EDIT THIS FILE! It is generated from $(PROJECT_NAME).conf.in, edit that one, or the variables in Makefile.options
+SED_ARGS := -e "/^ *%%%/d"
+SED_ARGS += -e "s|%%PROJECT_NAME%%|$(PROJECT_NAME)|g"
+SED_ARGS += -e "s|%%DATABASE_NAME%%|$(DATABASE_NAME)|g"
+SED_ARGS += -e "s|%%DATABASE_USER%%|$(DATABASE_USER)|g"
+SED_ARGS += -e "s|%%CMDPIPE%%|%%PREFIX%%$(CMDPIPE)|g"
+SED_ARGS += -e "s|%%LOGDIR%%|%%PREFIX%%$(LOGDIR)|g"
+SED_ARGS += -e "s|%%DATADIR%%|%%PREFIX%%$(DATADIR)|g"
+SED_ARGS += -e "s|%%PERSISTENT_DATA_BACKEND%%|$(PERSISTENT_DATA_BACKEND)|g"
+SED_ARGS += -e "s|%%LIBDIR%%|%%PREFIX%%$(LIBDIR)|g"
+SED_ARGS += -e "s|%%WARNING%%|$(EDIT_WARNING)|g"
+SED_ARGS += -e "s|%%PACKAGES%%|$(FINDLIB_PACKAGES)|g"
+SED_ARGS += -e "s|%%ELIOMSTATICDIR%%|%%PREFIX%%$(ELIOMSTATICDIR)|g"
+ifeq ($(DEBUG),yes)
+  SED_ARGS += -e "s|%%DEBUGMODE%%|\<debugmode /\>|g"
+else
+  SED_ARGS += -e "s|%%DEBUGMODE%%||g"
+endif
+
+LOCAL_SED_ARGS := -e "s|%%PORT%%|$(TEST_PORT)|g"
+LOCAL_SED_ARGS += -e "s|%%STATICDIR%%|$(LOCAL_STATIC)|g"
+LOCAL_SED_ARGS += -e "s|%%USERGROUP%%||g"
+GLOBAL_SED_ARGS := -e "s|%%PORT%%|$(PORT)|g"
+GLOBAL_SED_ARGS += -e "s|%%STATICDIR%%|%%PREFIX%%$(STATICDIR)|g"
+ifeq ($(WWWUSER)$(WWWGROUP),)
+  GLOBAL_SED_ARGS += -e "s|%%USERGROUP%%||g"
+else
+  GLOBAL_SED_ARGS += -e "s|%%USERGROUP%%|<user>$(WWWUSER)</user><group>$(WWWGROUP)</group>|g"
+endif
+
+$(TEST_PREFIX)${ETCDIR}/${PROJECT_NAME}.conf: ${PROJECT_NAME}.conf.in Makefile.options | $(TEST_PREFIX)$(ETCDIR)
+	sed $(SED_ARGS) $(GLOBAL_SED_ARGS) $< | sed -e "s|%%PREFIX%%|$(PREFIX)|g" > $@
+$(TEST_PREFIX)${ETCDIR}/${PROJECT_NAME}-test.conf: ${PROJECT_NAME}.conf.in Makefile.options | $(TEST_PREFIX)$(ETCDIR)
+	sed $(SED_ARGS) $(LOCAL_SED_ARGS) $< | sed -e "s|%%PREFIX%%|$(TEST_PREFIX)|g" > $@
+
+##----------------------------------------------------------------------
+## Server side compilation
+
+SERVER_INC  := ${addprefix -package ,${SERVER_PACKAGES}}
+
+${ELIOM_TYPE_DIR}/%.type_mli: %.eliom
+	${ELIOMC} -infer ${SERVER_INC} $<
+
+$(TEST_PREFIX)$(LIBDIR)/$(PROJECT_NAME).cma: $(call objs,$(ELIOM_SERVER_DIR),cmo,$(SERVER_FILES)) | $(TEST_PREFIX)$(LIBDIR)
+	${ELIOMC} -a -o $@ $(GENERATE_DEBUG) \
+          $(call depsort,$(ELIOM_SERVER_DIR),cmo,-server,$(SERVER_INC),$(SERVER_FILES))
+
+$(TEST_PREFIX)$(LIBDIR)/$(PROJECT_NAME).cmxa: $(call objs,$(ELIOM_SERVER_DIR),cmx,$(SERVER_FILES)) | $(TEST_PREFIX)$(LIBDIR)
+	${ELIOMOPT} -a -o $@ $(GENERATE_DEBUG) \
+          $(call depsort,$(ELIOM_SERVER_DIR),cmx,-server,$(SERVER_INC),$(SERVER_FILES))
+
+%.cmxs: %.cmxa
+	$(ELIOMOPT) -shared -linkall -o $@ $(GENERATE_DEBUG) $<
+
+${ELIOM_SERVER_DIR}/%.cmi: %.mli
+	${ELIOMC} -c ${SERVER_INC} $(GENERATE_DEBUG) $<
+
+${ELIOM_SERVER_DIR}/%.cmi: %.eliomi
+	${ELIOMC} -c ${SERVER_INC} $(GENERATE_DEBUG) $<
+
+${ELIOM_SERVER_DIR}/%.cmo: %.ml
+	${ELIOMC} -c ${SERVER_INC} $(GENERATE_DEBUG) $<
+${ELIOM_SERVER_DIR}/%.cmo: %.eliom
+	${ELIOMC} -c ${SERVER_INC} $(GENERATE_DEBUG) $<
+
+${ELIOM_SERVER_DIR}/%.cmx: %.ml
+	${ELIOMOPT} -c ${SERVER_INC} $(GENERATE_DEBUG) $<
+${ELIOM_SERVER_DIR}/%.cmx: %.eliom
+	${ELIOMOPT} -c ${SERVER_INC} $(GENERATE_DEBUG) $<
+
+
+##----------------------------------------------------------------------
+## Client side compilation
+
+CLIENT_LIBS := ${addprefix -package ,${CLIENT_PACKAGES}}
+CLIENT_INC  := ${addprefix -package ,${CLIENT_PACKAGES}}
+
+CLIENT_OBJS := $(filter %.eliom %.ml, $(CLIENT_FILES))
+CLIENT_OBJS := $(patsubst %.eliom,${ELIOM_CLIENT_DIR}/%.cmo, ${CLIENT_OBJS})
+CLIENT_OBJS := $(patsubst %.ml,${ELIOM_CLIENT_DIR}/%.cmo, ${CLIENT_OBJS})
+
+$(TEST_PREFIX)$(ELIOMSTATICDIR)/$(PROJECT_NAME).js: $(call objs,$(ELIOM_CLIENT_DIR),cmo,$(CLIENT_FILES)) | $(TEST_PREFIX)$(ELIOMSTATICDIR)
+	${JS_OF_ELIOM} -o $@ $(GENERATE_DEBUG) $(CLIENT_INC) $(DEBUG_JS) \
+          $(call depsort,$(ELIOM_CLIENT_DIR),cmo,-client,$(CLIENT_INC),$(CLIENT_FILES))
+
+${ELIOM_CLIENT_DIR}/%.cmi: %.mli
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $(GENERATE_DEBUG) $<
+
+${ELIOM_CLIENT_DIR}/%.cmo: %.eliom
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $(GENERATE_DEBUG) $<
+${ELIOM_CLIENT_DIR}/%.cmo: %.ml
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $(GENERATE_DEBUG) $<
+
+${ELIOM_CLIENT_DIR}/%.cmi: %.eliomi
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $(GENERATE_DEBUG) $<
+
+##----------------------------------------------------------------------
+## Dependencies
+
+include .depend
+
+.depend: $(patsubst %,$(DEPSDIR)/%.server,$(SERVER_FILES)) $(patsubst %,$(DEPSDIR)/%.client,$(CLIENT_FILES))
+	cat $^ > $@
+
+$(DEPSDIR)/%.server: % | $(DEPSDIR)
+	$(ELIOMDEP) -server -ppx $(SERVER_INC) $< > $@
+
+$(DEPSDIR)/%.client: % | $(DEPSDIR)
+	$(ELIOMDEP) -client -ppx $(CLIENT_INC) $< > $@
+
+$(DEPSDIR):
+	mkdir $@
+
+##----------------------------------------------------------------------
+## Clean up
+
+clean:
+	-rm -f *.cm[ioax] *.cmxa *.cmxs *.o *.a *.annot
+	-rm -f *.type_mli
+	-rm -f ${PROJECT_NAME}.js
+	-rm -rf ${ELIOM_CLIENT_DIR} ${ELIOM_SERVER_DIR}
+
+distclean: clean
+	-rm -rf $(TEST_PREFIX) $(DEPSDIR) .depend
diff --git a/tutos/8.0/manual/files/tutorial/chapter2/Makefile.options b/tutos/8.0/manual/files/tutorial/chapter2/Makefile.options
new file mode 100644
index 00000000..845db57b
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter2/Makefile.options
@@ -0,0 +1,61 @@
+
+#----------------------------------------------------------------------
+#           SETTINGS FOR THE ELIOM PROJECT tuto
+#----------------------------------------------------------------------
+
+PROJECT_NAME := tuto
+
+# Source files for the server
+SERVER_FILES := $(wildcard *.eliomi *.eliom)
+# Source files for the client
+CLIENT_FILES := $(wildcard *.eliomi *.eliom)
+
+# OCamlfind packages for the server
+SERVER_PACKAGES := lwt.ppx js_of_ocaml.deriving.ppx
+# OCamlfind packages for the client
+CLIENT_PACKAGES := lwt.ppx js_of_ocaml.ppx js_of_ocaml.deriving.ppx
+
+# Directory with files to be statically served
+LOCAL_STATIC = static
+
+# The backend for persistent data. Can be dbm or sqlite.
+PERSISTENT_DATA_BACKEND = dbm
+
+# Debug application (yes/no): Debugging info in compilation,
+# JavaScript, ocsigenserver
+DEBUG := no
+
+# User to run server with (make run.*)
+WWWUSER := www-data
+WWWGROUP := www-data
+
+# Port for running the server (make run.*)
+PORT := 80
+
+# Port for testing (make test.*)
+TEST_PORT := 8080
+
+# Root of installation (must end with /)
+PREFIX := /usr/local/
+
+# Local folder for make test.* (must end with /)
+# Do not add files manually in this directory.
+# It is just here to test your installation before installing in /
+TEST_PREFIX := local/
+
+# The installation tree (relative to $(PREFIX) when
+# installing/running or $(TEST_PREFIX) when testing).
+# Configuration file $(PROJECT_NAME).conf
+ETCDIR := etc/${PROJECT_NAME}
+# Project's library $(PROJECT_NAME).cma (cmxs)
+LIBDIR := lib/${PROJECT_NAME}
+# Command pipe, eg. $ echo reload > $(INSTALL_PREFIX)$(CMDPIPE)
+CMDPIPE := var/run/${PROJECT_NAME}-cmd
+# Ocsigenserver's logging files
+LOGDIR := var/log/${PROJECT_NAME}
+# Ocsigenserver's persistent data files
+DATADIR := var/data/${PROJECT_NAME}
+# Copy of $(LOCAL_STATIC)
+STATICDIR := var/www/${PROJECT_NAME}/static
+# Project's JavaScript file
+ELIOMSTATICDIR := var/www/${PROJECT_NAME}/eliom
diff --git a/tutos/8.0/manual/files/tutorial/chapter2/static/css/tuto.css b/tutos/8.0/manual/files/tutorial/chapter2/static/css/tuto.css
new file mode 100644
index 00000000..b71fa50a
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter2/static/css/tuto.css
@@ -0,0 +1,3 @@
+* {
+    font-family: sans-serif;
+}
diff --git a/tutos/8.0/manual/files/tutorial/chapter2/tuto.conf.in b/tutos/8.0/manual/files/tutorial/chapter2/tuto.conf.in
new file mode 100644
index 00000000..13a8a1fd
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter2/tuto.conf.in
@@ -0,0 +1,28 @@
+%%% This is the template for your configuration file. The %%VALUES%% below are
+%%% taken from the Makefile to generate the actual configuration files.
+%%% This comment will disappear.
+<!-- %%WARNING%% -->
+<ocsigen>
+  <server>
+    <port>%%PORT%%</port>
+    %%% Only set for running, not for testing
+    %%USERGROUP%%
+    <logdir>%%LOGDIR%%</logdir>
+    <datadir>%%DATADIR%%</datadir>
+    <charset>utf-8</charset>
+    %%% Only set when debugging
+    %%DEBUGMODE%%
+    <commandpipe>%%CMDPIPE%%</commandpipe>
+    <extension findlib-package="ocsigenserver.ext.staticmod"/>
+    <extension findlib-package="ocsigenserver.ext.ocsipersist-%%PERSISTENT_DATA_BACKEND%%"/>
+    <extension findlib-package="eliom.server"/>
+    %%% This will include the packages defined as SERVER_PACKAGES in your Makefile:
+    %%PACKAGES%%
+    <host hostfilter="*">
+      <static dir="%%STATICDIR%%" />
+      <static dir="%%ELIOMSTATICDIR%%" />
+      <eliommodule module="%%LIBDIR%%/%%PROJECT_NAME%%.cma" />
+      <eliom/>
+    </host>
+  </server>
+</ocsigen>
diff --git a/tutos/8.0/manual/files/tutorial/chapter2/tuto.eliom b/tutos/8.0/manual/files/tutorial/chapter2/tuto.eliom
new file mode 100644
index 00000000..1b2bafab
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter2/tuto.eliom
@@ -0,0 +1,210 @@
+
+(* =============================Eliom references============================= *)
+
+let username =
+  Eliom_reference.eref ~scope:Eliom_common.default_session_scope None
+
+let wrong_pwd =
+  Eliom_reference.eref ~scope:Eliom_common.request_scope false
+
+
+(* =================================Services================================= *)
+
+let main_service = Eliom_service.create
+  ~path:(Eliom_service.Path [""])
+  ~meth:(Eliom_service.Get Eliom_parameter.unit)
+  ()
+
+let user_service  = Eliom_service.create
+  ~path:(Eliom_service.Path ["users"])
+  ~meth:(Eliom_service.Get Eliom_parameter.(suffix (string "name")))
+  ()
+
+let redir_service = Eliom_service.create
+    ~path:(Eliom_service.Path ["redir"])
+    ~meth:(Eliom_service.Get Eliom_parameter.unit)
+    ()
+
+let connection_service = Eliom_service.create
+  ~path:(Eliom_service.No_path)
+  ~meth:(Eliom_service.Post (
+    Eliom_parameter.unit,
+    Eliom_parameter.(string "name" ** string "password")))
+  ()
+
+let disconnection_service =
+  Eliom_service.attach_post
+    ~fallback:redir_service
+    ~post_params:Eliom_parameter.unit
+    ()
+
+let new_user_form_service = Eliom_service.create
+  ~path:(Eliom_service.Path ["registration"])
+  ~meth:(Eliom_service.Get Eliom_parameter.unit)
+  ()
+
+let account_confirmation_service =
+  Eliom_service.attach_post
+    ~fallback:new_user_form_service
+    ~post_params:Eliom_parameter.(string "name" **  string "password")
+    ()
+
+(* ===========================Usernames/Passwords============================ *)
+
+let users = ref [("Calvin", "123"); ("Hobbes", "456")]
+
+let user_links = Eliom_content.Html.D.(
+  let link_of_user = fun (name, _) ->
+    li [a ~service:user_service [pcdata name] name]
+  in
+  fun () -> ul (List.map link_of_user !users)
+)
+
+let check_pwd name pwd =
+  try List.assoc name !users = pwd with Not_found -> false
+
+
+(* =================================Widgets================================== *)
+
+let account_form = Eliom_content.Html.D.(
+  Form.post_form ~service:account_confirmation_service
+    (fun (name1, name2) ->
+      [fieldset
+         [label [pcdata "login: "];
+          Form.input ~input_type:`Text ~name:name1 Form.string;
+          br ();
+          label [pcdata "password: "];
+          Form.input ~input_type:`Password ~name:name2 Form.string;
+          br ();
+          Form.input ~input_type:`Submit ~value:"Create Account" Form.string
+         ]]) ()
+)
+
+let disconnect_box () = Eliom_content.Html.D.(
+  Form.post_form disconnection_service
+    (fun _ ->
+      [fieldset [Form.input ~input_type:`Submit ~value:"Log out" Form.string]]
+    )
+    ()
+  |> Lwt.return
+)
+
+(* =========================Authentification Handler========================= *)
+
+let authenticated_handler g f = Eliom_content.Html.D.(
+  let handle_anonymous _get _post =
+    let%lwt wp = Eliom_reference.get wrong_pwd in
+    let connection_box =
+      let l = [
+	Form.post_form ~service:connection_service
+          (fun (name1, name2) ->
+	    [fieldset
+		[label [pcdata "login: "];
+		 Form.input ~input_type:`Text ~name:name1 Form.string;
+		 br ();
+		 label [pcdata "password: "];
+		 Form.input ~input_type:`Password ~name:name2 Form.string;
+		 br ();
+		 Form.input ~input_type:`Submit ~value:"Connect" Form.string
+		]]) ();
+        p [a new_user_form_service
+              [pcdata "Create an account"] ()]]
+      in
+      div (if wp then p [pcdata "Wrong login or password"]::l else l)
+    in
+    g
+      (html
+        (head (title (pcdata "")) [])
+        (body [h1 [pcdata "Please connect"];
+	       connection_box;]))
+    in
+    Eliom_tools.wrap_handler
+      (fun () -> Eliom_reference.get username)
+      handle_anonymous (* Called when [username] is [None]     *)
+      f                (* Called [username] contains something *)
+)
+(* ===========================Services Registration========================== *)
+
+let () = Eliom_content.Html.D.(
+
+  Eliom_registration.Html.register
+    ~service:main_service
+    (authenticated_handler Lwt.return (fun name () () ->
+      let%lwt cf = disconnect_box () in
+      Lwt.return
+        (html (head (title (pcdata "")) [])
+              (body [h1 [pcdata ("Hello " ^ name)];
+                     cf;
+                     user_links ()]))));
+
+  Eliom_registration.Any.register
+    ~service:user_service
+    (authenticated_handler Eliom_registration.Html.send (fun _ name () ->
+      if List.mem_assoc name !users then
+	begin
+	  let%lwt cf = disconnect_box () in
+	  Eliom_registration.Html.send
+            (html (head (title (pcdata name)) [])
+               (body [h1 [pcdata name];
+                      cf;
+                      p [a ~service:main_service [pcdata "Home"] ()]]))
+	end
+      else
+	Eliom_registration.Html.send
+          ~code:404
+          (html (head (title (pcdata "404")) [])
+             (body [h1 [pcdata "404"];
+                    p [pcdata "That page does not exist"]]))
+    ));
+
+  Eliom_registration.Action.register
+    ~service:connection_service
+    (fun () (name, password) ->
+      if check_pwd name password
+      then Eliom_reference.set username (Some name)
+      else Eliom_reference.set wrong_pwd true);
+
+  Eliom_registration.Redirection.register
+    ~service:redir_service
+    (fun () () -> Lwt.return (Eliom_registration.Redirection main_service));
+
+  Eliom_registration.Action.register
+    ~service:disconnection_service
+    (fun () () -> Eliom_state.discard ~scope:Eliom_common.default_session_scope ());
+
+  Eliom_registration.Html.register
+    ~service:new_user_form_service
+    (fun () () ->
+      Lwt.return
+        (html (head (title (pcdata "")) [])
+              (body [h1 [pcdata "Create an account"];
+                     account_form;
+                    ])));
+
+  Eliom_registration.Html.register
+    ~service:account_confirmation_service
+    (fun () (name, pwd) ->
+      let create_account_service =
+	Eliom_service.attach_get
+          ~fallback:main_service
+          ~get_params:Eliom_parameter.unit
+          ~timeout:60.
+	  ~max_use:1
+	  ()
+      in
+      let _ = Eliom_registration.Action.register
+	~service:create_account_service
+        (fun () () ->
+          users := (name, pwd)::!users;
+          Lwt.return ())
+      in
+      Lwt.return
+	(html
+           (head (title (pcdata "")) [])
+           (body
+              [h1 [pcdata "Confirm account creation for "; pcdata name];
+               p [a ~service:create_account_service [pcdata "Yes"] ();
+                  pcdata " ";
+                  a ~service:main_service [pcdata "No"] ()]
+              ])));
+)
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/README b/tutos/8.0/manual/files/tutorial/chapter3/README
new file mode 100644
index 00000000..37d111c1
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/README
@@ -0,0 +1 @@
+This code isn't maintened anymore and might not work. Please go to https://github.com/ocsigen/graffiti/simple for the latest working versions.
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/Makefile b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/Makefile
new file mode 100644
index 00000000..675ba493
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/Makefile
@@ -0,0 +1,68 @@
+
+APP_NAME := graffiti
+SERVER_PACKAGE := cairo, unix
+CLIENT_PACKAGE :=
+
+SERVER_FILES = common.ml server.ml ${wildcard *.eliom}
+CLIENT_FILES = common.ml client.ml ${wildcard *.eliom}
+
+PORT := 8080
+
+OCLOSURE := YES
+
+###
+
+all: local byte opt conf
+
+LIBDIR := local/var/www/lib
+JSDIR  := local/var/www/static
+
+include Makefile.common
+
+distclean::
+	-rm -rf css/closure
+	-rm -rf local
+	-rm -f graffiti.conf
+
+####
+
+DIRS = local/var/lib/ocsidbm local/var/run local/var/log \
+       local/var/www/static local/var/www/lib local/etc \
+       local/var/www/static/graffiti_saved
+
+local: ${DIRS} local/var/www/static/css local/var/www/static/images css/closure
+
+local/var/www/static/css:
+	ln -fs $(shell pwd)/css local/var/www/static/css
+
+local/var/www/static/images:
+	ln -fs $(shell pwd)/images local/var/www/static/images
+
+css/closure:
+	ln -fs $(shell ocamlfind query oclosure)/closure/goog/css/ css/closure
+
+${DIRS}:
+	mkdir -p $@
+
+conf: graffiti.conf
+
+graffiti.conf: graffiti.conf.in
+	sed -e "s|%%SRC%%|$(shell pwd)|" \
+	    -e "s|%%LIBDIR%%|${LIBDIR}|" \
+	    -e "s|%%JSDIR%%|${JSDIR}|" \
+	    -e "s|%%PORT%%|${PORT}|" \
+	    $< > $@
+
+run.local: graffiti.conf
+	ocsigenserver -c graffiti.conf
+
+run.opt.local: graffiti.conf
+	ocsigenserver.opt -c graffiti.conf
+
+####
+
+install::
+	install -d -m 775 ${INSTALL_USER} ${INSTALL_DIR}/static/css
+	install -m 664 ${INSTALL_USER} css/*.css ${INSTALL_DIR}/static/css
+	cd $(shell ocamlfind query oclosure)/closure/goog/css/ && \
+	  find -type f -exec install -D -m 664 {} ${INSTALL_DIR}/static/css/closure/{} \;
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/Makefile.common b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/Makefile.common
new file mode 100644
index 00000000..76143752
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/Makefile.common
@@ -0,0 +1,165 @@
+## Sample Makefile for eliom application.
+
+APP_NAME ?= $(error Please define the APP_NAME variable)
+
+## Package required to build the server part of the application
+
+SERVER_PACKAGE ?=
+
+## Package to be linked in the client part
+
+CLIENT_PACKAGE ?=
+
+## Source files for the server part
+
+SERVER_FILES ?= ${wildcard *.eliom}
+
+## Source files for the client part
+
+CLIENT_FILES ?= ${wildcard *.eliom}
+
+## Needed binaries
+
+ELIOMC       ?= eliomc
+ELIOMOPT     ?= eliomopt
+ELIOMDEP     ?= eliomdep
+JS_OF_ELIOM  ?= js_of_eliom
+OCLOSURE_REQ ?= oclosure_req
+
+## Where to put intermediate object files.
+## - ELIOM_{SERVER,CLIENT}_DIR must be distinct
+## - ELIOM_CLIENT_DIR mustn't be the local dir.
+## - ELIOM_SERVER_DIR could be ".", but you need to
+##   remove it from the "clean" rules...
+
+ELIOM_SERVER_DIR ?= _server
+ELIOM_CLIENT_DIR ?= _client
+ELIOM_TYPE_DIR   ?= ${ELIOM_SERVER_DIR}
+
+export ELIOM_SERVER_DIR
+export ELIOM_CLIENT_DIR
+export ELIOM_TYPE_DIR
+
+####
+
+LIBDIR ?= .
+
+byte:: ${LIBDIR}/${APP_NAME}.cma
+opt:: ${LIBDIR}/${APP_NAME}.cmxs
+
+JSDIR  ?= .
+
+ifneq (${CLIENT_FILES},)
+byte:: ${JSDIR}/${APP_NAME}.js
+opt:: ${JSDIR}/${APP_NAME}.js
+
+OCLOSURE ?= NO
+
+ifeq ($(OCLOSURE),YES)
+CLIENT_PACKAGE += oclosure
+byte:: ${JSDIR}/${APP_NAME}_oclosure.js
+opt:: ${JSDIR}/${APP_NAME}_oclosure.js
+endif
+endif
+
+#### Server side compilation #######
+
+SERVER_INC  := ${addprefix -package ,${SERVER_PACKAGE}}
+
+SERVER_OBJS := $(patsubst %.eliom,${ELIOM_SERVER_DIR}/%.cmo, ${SERVER_FILES})
+SERVER_OBJS := $(patsubst %.ml,${ELIOM_SERVER_DIR}/%.cmo, ${SERVER_OBJS})
+
+${LIBDIR}/${APP_NAME}.cma: ${SERVER_OBJS}
+	${ELIOMC} ${ELIOMCFLAGS} -a -o $@ $^
+${LIBDIR}/${APP_NAME}.cmxa: ${SERVER_OBJS:.cmo=.cmx}
+	${ELIOMOPT} ${ELIOMOPTFLAGS} -a -o $@ $^
+
+${ELIOM_TYPE_DIR}/%.type_mli: %.eliom
+	${ELIOMC} ${ELIOMCFLAGS} -infer ${SERVER_INC} $<
+
+${ELIOM_SERVER_DIR}/%.cmi: %.mli
+	${ELIOMC} ${ELIOMCFLAGS} -c ${SERVER_INC} $<
+
+${ELIOM_SERVER_DIR}/%.cmo: %.ml
+	${ELIOMC} ${ELIOMCFLAGS} -c ${SERVER_INC} $<
+${ELIOM_SERVER_DIR}/%.cmo: %.eliom
+	${ELIOMC} ${ELIOMCFLAGS} -c -noinfer ${SERVER_INC} $<
+
+${ELIOM_SERVER_DIR}/%.cmx: %.ml
+	${ELIOMOPT} ${ELIOMOPTFLAGS} -c ${SERVER_INC} $<
+${ELIOM_SERVER_DIR}/%.cmx: %.eliom
+	${ELIOMOPT} ${ELIOMOPTFLAGS} -c -noinfer ${SERVER_INC} $<
+
+%.cmxs: %.cmxa
+	$(ELIOMOPT) ${ELIOMOPTFLAGS} -shared -linkall -o $@ $<
+
+##### Client side compilation ####
+
+CLIENT_LIBS := ${addprefix -package ,${CLIENT_PACKAGE}}
+CLIENT_INC  := ${addprefix -package ,${CLIENT_PACKAGE}}
+
+CLIENT_OBJS := $(patsubst %.eliom,${ELIOM_CLIENT_DIR}/%.cmo, ${CLIENT_FILES})
+CLIENT_OBJS := $(patsubst %.ml,${ELIOM_CLIENT_DIR}/%.cmo, ${CLIENT_OBJS})
+
+${JSDIR}/${APP_NAME}.js: ${CLIENT_OBJS}
+	${JS_OF_ELIOM} -jsopt -pretty -jsopt -noinline -o $@ ${CLIENT_LIBS} $^
+
+${ELIOM_CLIENT_DIR}/%.cmi: %.mli
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $<
+
+${ELIOM_CLIENT_DIR}/%.cmo: %.eliom
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $<
+${ELIOM_CLIENT_DIR}/%.cmo: %.ml
+	${JS_OF_ELIOM} -c ${CLIENT_INC} $<
+
+### O'Closure compilation ###
+
+${JSDIR}/$(APP_NAME)_oclosure.js: ${JSDIR}/$(APP_NAME).js
+	${OCLOSURE_REQ} $^
+
+############
+
+## Clean up
+
+clean::
+	-rm -f *.cm[ioax] *.cmxa *.cmxs *.o *.a *.annot
+	-rm -f *.type_mli
+	-rm -f .depend
+	-rm -f ${JSDIR}/${APP_NAME}.js ${JSDIR}/${APP_NAME}_oclosure.js
+	-rm -rf ${ELIOM_CLIENT_DIR} ${ELIOM_SERVER_DIR}
+
+distclean:: clean
+	-find \( -name \*~ -or -name \#\* -or -name .\#\* \) -delete
+
+
+## Dependencies
+
+depend: .depend
+.depend:: ${SERVER_FILES} ${CLIENT_FILES}
+	$(ELIOMDEP) -server ${SERVER_INC} ${SERVER_FILES} > .depend
+	$(ELIOMDEP) -client ${CLIENT_INC} ${CLIENT_FILES} >> .depend
+
+## Warning: Dependencies towards *.eliom are not handled by eliomdep yet.
+## Add manually dependencies between cmo and cmx files here,
+## for example:
+## oneeliomfile.cmo: anothereliomfile.cmo
+## oneeliomfile.cmx: anothereliomfile.cmx
+
+-include .depend
+
+
+####
+
+INSTALL_USER ?= -o www-data -g www-data
+INSTALL_DIR  ?= local/var/www/${APP_NAME}
+
+install::
+	install -d -m 775 ${INSTALL_USER} ${INSTALL_DIR}/lib
+	install -m 664 ${INSTALL_USER} ${LIBDIR}/${APP_NAME}.cma ${LIBDIR}/${APP_NAME}.cmxs ${INSTALL_DIR}/lib/
+	install -d -m 775 ${INSTALL_USER} ${INSTALL_DIR}/static
+ifneq (${CLIENT_FILES},)
+	install -m 664 ${INSTALL_USER} ${JSDIR}/${APP_NAME}.js ${INSTALL_DIR}/static/
+ifeq ($(OCLOSURE),YES)
+	install -m 664 ${INSTALL_USER} ${JSDIR}/${APP_NAME}_oclosure.js ${INSTALL_DIR}/static/
+endif
+endif
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/client.ml b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/client.ml
new file mode 100644
index 00000000..019b1dcb
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/client.ml
@@ -0,0 +1,80 @@
+open Eliom_content
+open Common
+open Eliom_lib.Lwt_ops
+
+let draw ctx (color, size, (x1, y1), (x2, y2)) =
+  ctx##strokeStyle <- (Js.string color);
+  ctx##lineWidth <- float size;
+  ctx##beginPath();
+  ctx##moveTo(float x1, float y1);
+  ctx##lineTo(float x2, float y2);
+  ctx##stroke()
+
+(* type containing all informations we need to stop interaction
+   inside the page *)
+type drawing_canceller =
+    { drawing_thread : unit Lwt.t;
+      (* the thread reading messages from the bus *)
+      drawing_event_thread : unit Lwt.t;
+      (* the thread handling mouse events *)
+    }
+
+let stop_drawing { drawing_thread; drawing_event_thread } =
+  Lwt.cancel drawing_thread;
+  (* cancelling this thread also closes the bus *)
+  Lwt.cancel drawing_event_thread
+
+let launch_client_canvas bus image_elt canvas_elt =
+  let canvas = Html5.To_dom.of_canvas canvas_elt in
+  let ctx = canvas##getContext (Dom_html._2d_) in
+  ctx##lineCap <- Js.string "round";
+
+  let img = Html5.To_dom.of_img image_elt in
+  let copy_image () = ctx##drawImage(img, 0., 0.) in
+  if Js.to_bool (img##complete)
+  then copy_image ()
+  else img##onload <- Dom_html.handler
+    (fun ev -> copy_image (); Js._false);
+
+  (* Size of the brush *)
+  let slider = jsnew Goog.Ui.slider(Js.null) in
+  slider##setMinimum(1.);
+  slider##setMaximum(80.);
+  slider##setValue(10.);
+  slider##setMoveToPointEnabled(Js._true);
+  slider##render(Js.some Dom_html.document##body);
+
+  (* The color palette: *)
+  let pSmall =
+    jsnew Goog.Ui.hsvPalette(Js.null, Js.null,
+                             Js.some (Js.string "goog-hsv-palette-sm"))
+  in
+  pSmall##render(Js.some Dom_html.document##body);
+
+  let x = ref 0 and y = ref 0 in
+  let set_coord ev =
+    let x0, y0 = Dom_html.elementClientPosition canvas in
+    x := ev##clientX - x0; y := ev##clientY - y0 in
+  let compute_line ev =
+    let oldx = !x and oldy = !y in
+    set_coord ev;
+    let color = Js.to_string (pSmall##getColor()) in
+    let size = int_of_float (Js.to_float (slider##getValue())) in
+    (color, size, (oldx, oldy), (!x, !y))
+  in
+  let line ev =
+    let v = compute_line ev in
+    let _ = Eliom_bus.write bus v in
+    draw ctx v;
+    Lwt.return ()
+  in
+  let t = Lwt_stream.iter (draw ctx) (Eliom_bus.stream bus) in
+  let drawing_event_thread =
+    let open Lwt_js_events in
+    mousedowns canvas
+      (fun ev _ -> set_coord ev; line ev >>= fun () ->
+        Lwt.pick [mousemoves Dom_html.document (fun x _ -> line x);
+		  mouseup Dom_html.document >>= line])
+  in
+  { drawing_thread = t;
+    drawing_event_thread = drawing_event_thread }
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/common.ml b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/common.ml
new file mode 100644
index 00000000..8d256e01
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/common.ml
@@ -0,0 +1,4 @@
+type messages = (string * int * (int * int) * (int * int)) deriving (Json)
+
+let width = 700
+let height = 400
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/css/common.css b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/css/common.css
new file mode 100644
index 00000000..02d7073c
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/css/common.css
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2009 The Closure Library Authors. All Rights Reserved.
+ *
+ * Use of this source code is governed by an Apache 2.0 License.
+ * See the COPYING file for details.
+ */
+
+/*
+ * Cross-browser implementation of the "display: inline-block" CSS property.
+ * See http://www.w3.org/TR/CSS21/visuren.html#propdef-display for details.
+ * Tested on IE 6 & 7, FF 1.5 & 2.0, Safari 2 & 3, Webkit, and Opera 9.
+ *
+ * @author attila@google.com (Attila Bodis)
+ */
+
+/*
+ * Default rule; only Safari, Webkit, and Opera handle it without hacks.
+ */
+.goog-inline-block {
+  position: relative;
+  display: -moz-inline-box; /* Ignored by FF3 and later. */
+  display: inline-block;
+}
+
+/*
+ * Pre-IE7 IE hack.  On IE, "display: inline-block" only gives the element
+ * layout, but doesn't give it inline behavior.  Subsequently setting display
+ * to inline does the trick.
+ */
+* html .goog-inline-block {
+  display: inline;
+}
+
+/*
+ * IE7-only hack.  On IE, "display: inline-block" only gives the element
+ * layout, but doesn't give it inline behavior.  Subsequently setting display
+ * to inline does the trick.
+ */
+*:first-child+html .goog-inline-block {
+  display: inline;
+}
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/css/graffiti.css b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/css/graffiti.css
new file mode 100644
index 00000000..5768a851
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/css/graffiti.css
@@ -0,0 +1,21 @@
+body {
+  width: 750px;
+}
+
+canvas {
+  border: solid 1px #aaaaaa;
+}
+
+div.goog-slider-vertical,
+DIV.goog-slider-vertical {
+  position: absolute;
+  top: 100px;
+  left: 740px;
+}
+
+div.goog-hsv-palette-sm,
+DIV.goog-hsv-palette-sm {
+  position: absolute;
+  top: 100px;
+  left: 780px;
+}
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/css/hsvpalette.css b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/css/hsvpalette.css
new file mode 100644
index 00000000..d3ae7f67
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/css/hsvpalette.css
@@ -0,0 +1,179 @@
+/*
+ * Copyright 2008 The Closure Library Authors. All Rights Reserved.
+ *
+ * Use of this source code is governed by an Apache 2.0 License.
+ * See the COPYING file for details.
+ */
+
+/*
+ * All Rights Reserved.
+ *
+ * Styles for the HSV color palette.
+ *
+ * @author smcbride@google.com (Sean McBride)
+ * @author arv@google.com (Erik Arvidsson)
+ * @author manucornet@google.com (Manu Cornet)
+ */
+
+.goog-hsv-palette,
+.goog-hsv-palette-sm {
+  position: relative;
+  border: 1px solid #999;
+  border-color: #ccc #999 #999 #ccc;
+  width: 400px;
+  height: 276px;
+}
+
+.goog-hsv-palette-sm {
+  width: 182px;
+  height: 185px;
+}
+
+.goog-hsv-palette label span,
+.goog-hsv-palette-sm label span {
+  display: none;
+}
+
+.goog-hsv-palette-hs-backdrop,
+.goog-hsv-palette-sm-hs-backdrop,
+.goog-hsv-palette-hs-image,
+.goog-hsv-palette-sm-hs-image {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 256px;
+  height: 256px;
+  border: 1px solid #999;
+}
+
+.goog-hsv-palette-sm-hs-backdrop,
+.goog-hsv-palette-sm-hs-image {
+  top: 45px;
+  width: 128px;
+  height: 128px;
+}
+
+.goog-hsv-palette-hs-backdrop,
+.goog-hsv-palette-sm-hs-backdrop {
+  background-color: #000;
+}
+
+.goog-hsv-palette-hs-image,
+.goog-hsv-palette-v-image,
+.goog-hsv-palette-hs-handle,
+.goog-hsv-palette-v-handle {
+  background-image: url(../images/hsv-sprite.png);
+}
+
+.goog-hsv-palette-noalpha .goog-hsv-palette-hs-image,
+.goog-hsv-palette-noalpha .goog-hsv-palette-v-image,
+.goog-hsv-palette-noalpha .goog-hsv-palette-hs-handle,
+.goog-hsv-palette-noalpha .goog-hsv-palette-v-handle {
+  background-image: url(../images/hsv-sprite.gif);
+}
+
+.goog-hsv-palette-sm-hs-image,
+.goog-hsv-palette-sm-v-image,
+.goog-hsv-palette-sm-hs-handle,
+.goog-hsv-palette-sm-v-handle {
+  background-image: url(../images/hsv-sprite-sm.png);
+}
+
+.goog-hsv-palette-noalpha .goog-hsv-palette-sm-hs-image,
+.goog-hsv-palette-noalpha .goog-hsv-palette-sm-v-image,
+.goog-hsv-palette-noalpha .goog-hsv-palette-sm-hs-handle,
+.goog-hsv-palette-noalpha .goog-hsv-palette-sm-v-handle {
+  background-image: url(../images/hsv-sprite-sm.gif);
+}
+
+.goog-hsv-palette-hs-image,
+.goog-hsv-palette-sm-hs-image {
+  background-position: 0 0;
+}
+
+.goog-hsv-palette-hs-handle,
+.goog-hsv-palette-sm-hs-handle {
+  position: absolute;
+  left: 5px;
+  top: 5px;
+  width: 11px;
+  height: 11px;
+  overflow: hidden;
+  background-position: 0 -256px;
+}
+
+.goog-hsv-palette-sm-hs-handle {
+  top: 40px;
+  background-position: 0 -128px;
+}
+
+.goog-hsv-palette-v-image,
+.goog-hsv-palette-sm-v-image {
+  position: absolute;
+  top: 10px;
+  left: 286px;
+  width: 19px;
+  height: 256px;
+  border: 1px solid #999;
+  background-color: #fff;
+  background-position: -256px 0;
+}
+
+.goog-hsv-palette-sm-v-image {
+  top: 45px;
+  left: 155px;
+  width: 9px;
+  height: 128px;
+  background-position: -128px 0;
+}
+
+.goog-hsv-palette-v-handle,
+.goog-hsv-palette-sm-v-handle {
+  position: absolute;
+  top: 5px;
+  left: 279px;
+  width: 35px;
+  height: 11px;
+  background-position: -11px -256px;
+  overflow: hidden;
+}
+
+.goog-hsv-palette-sm-v-handle {
+  top: 40px;
+  left: 148px;
+  width: 25px;
+  background-position: -11px -128px;
+}
+
+.goog-hsv-palette-swatch,
+.goog-hsv-palette-sm-swatch {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 65px;
+  height: 65px;
+  border: 1px solid #999;
+  background-color: #fff;
+}
+
+.goog-hsv-palette-sm-swatch {
+  top: 10px;
+  right: auto;
+  left: 10px;
+  width: 30px;
+  height: 22px;
+}
+
+.goog-hsv-palette-input,
+.goog-hsv-palette-sm-input {
+  position: absolute;
+  top: 85px;
+  right: 10px;
+  width: 65px;
+}
+
+.goog-hsv-palette-sm-input {
+  top: 10px;
+  right: auto;
+  left: 50px;
+}
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/css/slider.css b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/css/slider.css
new file mode 100644
index 00000000..ddd07482
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/css/slider.css
@@ -0,0 +1,45 @@
+.goog-slider-vertical,
+.goog-slider-horizontal {
+background-color: ThreeDFace;
+position: relative;
+overflow: hidden;
+}
+
+.goog-slider-vertical {
+height: 300px;
+width: 20px;
+}
+
+.goog-slider-horizontal {
+height: 20px;
+width: 400px;
+}
+
+.goog-slider-thumb {
+position: absolute;
+background-color: ThreeDShadow;
+overflow: hidden;
+}
+
+.goog-slider-vertical .goog-slider-thumb {
+left: 0;
+height: 20px;
+width: 100%;
+}
+
+.goog-slider-horizontal .goog-slider-thumb {
+top: 0;
+width: 20px;
+height: 100%;
+}
+#s-h {
+margin-bottom: 2em;
+}
+strong {
+display: block;
+margin-bottom: 3px;
+}
+#out1, #out2 {
+color: #999;
+margin-left: 1em;
+}
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/graffiti.conf.in b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/graffiti.conf.in
new file mode 100644
index 00000000..89f88db3
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/graffiti.conf.in
@@ -0,0 +1,35 @@
+<ocsigen>
+
+  <server>
+
+    <port>%%PORT%%</port>
+
+    <logdir>%%SRC%%/local/var/log</logdir>
+    <datadir>%%SRC%%/local/var/run</datadir>
+    <commandpipe>%%SRC%%/local/var/run/ocsigenserver_command</commandpipe>
+
+    <charset>utf-8</charset>
+
+    <debugmode/>
+
+    <extension findlib-package="ocsigenserver.ext.staticmod"/>
+    <extension findlib-package="ocsigenserver.ext.extendconfiguration"/>
+
+    <extension findlib-package="ocsigenserver.ext.ocsipersist-dbm">
+      <store dir="%%SRC%%/local/var/lib/ocsidbm/"/>
+    </extension>
+
+    <extension findlib-package="eliom.server"/>
+    <extension findlib-package="cairo"/>
+
+    <host hostfilter="*">
+      <followsymlinks value="always" />
+      <static dir="%%SRC%%/%%JSDIR%%" />
+      <eliom module="%%SRC%%/%%LIBDIR%%/graffiti.cma">
+	<staticdir>%%SRC%%/%%JSDIR%%</staticdir>
+      </eliom>
+    </host>
+
+  </server>
+
+</ocsigen>
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/graffiti.eliom b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/graffiti.eliom
new file mode 100644
index 00000000..b0de220e
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/graffiti.eliom
@@ -0,0 +1,36 @@
+{shared{
+  open Eliom_content.Html5.D
+  open Common
+}}
+{client{
+  open Client
+}}
+open Server
+
+let start_drawing name image canvas =
+  let bus = get_bus name in
+  ignore {unit{
+    let canceller = launch_client_canvas %bus %image %canvas in
+    Eliom_client.onunload (fun () -> stop_drawing canceller)
+  }}
+
+let counter = ref 0
+
+let () = Connected.register ~service:multigraffiti_service
+  !% (fun name () username ->
+    (* Some browsers won't reload the image, so we force
+       them by changing the url each time. *)
+    incr counter;
+    let image =
+      img ~alt:name
+        ~src:(make_uri
+		~service:imageservice (name,!counter)) () in
+    let canvas =
+      canvas ~a:[ a_width width; a_height height ]
+        [pcdata "your browser doesn't support canvas"; br (); image] in
+    start_drawing name image canvas;
+    make_page
+      [h1 [pcdata name];
+       disconnect_box ();
+       choose_drawing_form ();
+       canvas;])
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/images/hsv-sprite-sm.png b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/images/hsv-sprite-sm.png
new file mode 100644
index 00000000..470f8e0c
Binary files /dev/null and b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/images/hsv-sprite-sm.png differ
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/server.ml b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/server.ml
new file mode 100644
index 00000000..0836ae2c
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti/server.ml
@@ -0,0 +1,205 @@
+open Eliom_content.Html5.D
+open Common
+open Lwt
+
+module My_app =
+  Eliom_registration.App (
+    struct
+      let application_name = "graffiti"
+    end)
+
+let rgb_from_string color = (* color is in format "#rrggbb" *)
+  let get_color i =
+    (float_of_string ("0x"^(String.sub color (1+2*i) 2))) /. 255.
+  in
+  try get_color 0, get_color 1, get_color 2 with | _ -> 0.,0.,0.
+
+let launch_server_canvas () =
+  let bus = Eliom_bus.create Json.t<messages> in
+
+  let draw_server, image_string =
+    let surface = Cairo.image_surface_create
+      Cairo.FORMAT_ARGB32 ~width ~height in
+    let ctx = Cairo.create surface in
+    ((fun ((color : string), size, (x1, y1), (x2, y2)) ->
+
+      (* Set thickness of brush *)
+      Cairo.set_line_width ctx (float size) ;
+      Cairo.set_line_join ctx Cairo.LINE_JOIN_ROUND ;
+      Cairo.set_line_cap ctx Cairo.LINE_CAP_ROUND ;
+      let red, green, blue =  rgb_from_string color in
+      Cairo.set_source_rgb ctx ~red ~green ~blue ;
+
+      Cairo.move_to ctx (float x1) (float y1) ;
+      Cairo.line_to ctx (float x2) (float y2) ;
+      Cairo.close_path ctx ;
+
+      (* Apply the ink *)
+      Cairo.stroke ctx ;
+     ),
+     (fun () ->
+       let b = Buffer.create 10000 in
+       (* Output a PNG in a string *)
+       Cairo_png.surface_write_to_stream surface (Buffer.add_string b);
+       Buffer.contents b
+     ))
+  in
+  let _ = Lwt_stream.iter draw_server (Eliom_bus.stream bus) in
+  bus,image_string
+
+let graffiti_info = Hashtbl.create 0
+
+let imageservice =
+  Eliom_registration.String.register_service
+    ~path:["image"]
+    ~headers:Http_headers.dyn_headers
+    ~get_params:(let open Eliom_parameter in string "name" ** int "q")
+    (* we add an int parameter for the browser not to cache the image:
+       at least for chrome, there is no way to force the browser to
+       reload the image without leaving the application *)
+    (fun (name,_) () ->
+      try_lwt
+        let _ ,image_string = Hashtbl.find graffiti_info name in
+	Lwt.return (image_string (), "image/png")
+      with
+	| Not_found -> raise_lwt Eliom_common.Eliom_404)
+
+let get_bus (name:string) =
+  (* create a new bus and image_string function only if it did not exists *)
+  try
+    fst (Hashtbl.find graffiti_info name)
+  with
+    | Not_found ->
+      let bus,image_string = launch_server_canvas () in
+      Hashtbl.add graffiti_info name (bus,image_string);
+      bus
+
+let main_service = Eliom_service.App.service ~path:[""]
+  ~get_params:(Eliom_parameter.unit) ()
+let multigraffiti_service = Eliom_service.App.service ~path:[""]
+  ~get_params:(Eliom_parameter.suffix (Eliom_parameter.string "name")) ()
+
+let choose_drawing_form () =
+  get_form ~service:multigraffiti_service
+    (fun (name) ->
+      [fieldset
+          [label ~a:[a_for name]
+	      [pcdata "drawing name: "];
+           string_input ~input_type:`Text ~name ();
+           br ();
+           string_input ~input_type:`Submit ~value:"Go" ()
+          ]])
+
+let oclosure_script =
+  Eliom_content.Html5.Id.create_global_elt
+    (js_script
+       ~uri:(make_uri  (Eliom_service.static_dir ())
+               ["graffiti_oclosure.js"]) ())
+
+let make_page content =
+  Lwt.return
+    (html
+       (head
+	  (title (pcdata "Graffiti"))
+       [ css_link
+           ~uri:(make_uri (Eliom_service.static_dir ())
+                  ["css";"common.css"]) ();
+         css_link
+           ~uri:(make_uri (Eliom_service.static_dir ())
+                  ["css";"hsvpalette.css"]) ();
+         css_link
+           ~uri:(make_uri (Eliom_service.static_dir ())
+                  ["css";"slider.css"]) ();
+         oclosure_script;
+         css_link
+           ~uri:(make_uri (Eliom_service.static_dir ())
+                  ["css";"graffiti.css"]) ();
+       ])
+       (body content))
+
+let connection_service =
+  Eliom_service.Http.post_coservice' ~post_params:
+    (let open Eliom_parameter in (string "name" ** string "password")) ()
+let disconnection_service = Eliom_service.Http.post_coservice'
+  ~post_params:Eliom_parameter.unit ()
+let create_account_service =
+  Eliom_service.Http.post_coservice ~fallback:main_service ~post_params:
+  (let open Eliom_parameter in (string "name" ** string "password")) ()
+
+let username = Eliom_reference.eref ~scope:Eliom_common.default_session_scope None
+
+let users = ref ["user","password";"test","test"]
+
+let check_pwd name pwd =
+ try Lwt.return (List.assoc name !users = pwd) with
+   | Not_found -> Lwt.return false
+
+let () = Eliom_registration.Action.register
+  ~service:create_account_service
+  (fun () (name, pwd) ->
+    users := (name, pwd)::!users;
+    Lwt.return ())
+
+let () = Eliom_registration.Action.register
+  ~service:connection_service
+  (fun () (name, password) ->
+    match_lwt check_pwd name password with
+      | true -> Eliom_reference.set username (Some name)
+      | false -> Lwt.return ())
+
+let () =
+  Eliom_registration.Action.register
+    ~service:disconnection_service
+    (fun () () -> Eliom_state.discard ~scope:Eliom_common.default_session_scope ())
+
+let disconnect_box () =
+  post_form disconnection_service
+    (fun _ -> [fieldset
+                 [string_input
+                     ~input_type:`Submit ~value:"Log out" ()]]) ()
+
+let login_name_form service button_text =
+  post_form ~service
+    (fun (name1, name2) ->
+      [fieldset
+         [label ~a:[a_for name1] [pcdata "login: "];
+          string_input ~input_type:`Text ~name:name1 ();
+          br ();
+          label ~a:[a_for name2] [pcdata "password: "];
+          string_input
+	    ~input_type:`Password
+	    ~name:name2 ();
+          br ();
+          string_input
+	    ~input_type:`Submit
+	    ~value:button_text ()
+         ]]) ()
+
+let default_content () =
+  make_page
+    [h1 [pcdata "Welcome to Multigraffiti"];
+     h2 [pcdata "log in"];
+     login_name_form connection_service "Connect";
+     h2 [pcdata "create account"];
+     login_name_form create_account_service "Create account";]
+
+module Connected_translate =
+struct
+  type page = string -> My_app.page Lwt.t
+  let translate page =
+    Eliom_reference.get username >>=
+      function
+	| None -> default_content ()
+	| Some username -> page username
+end
+
+module Connected =
+  Eliom_registration.Customize ( My_app ) ( Connected_translate )
+
+let ( !% ) f = fun a b -> return (fun c -> f a b c)
+
+let () = Connected.register ~service:main_service
+  !% (fun () () username ->
+    make_page
+      [h1 [pcdata ("Welcome to Multigraffiti " ^ username)];
+       choose_drawing_form ()])
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_audio/graffiti.eliom b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_audio/graffiti.eliom
new file mode 100644
index 00000000..828b3e4f
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_audio/graffiti.eliom
@@ -0,0 +1,43 @@
+{shared{
+  open Eliom_content.Html5.D
+  open Common
+}}
+{client{
+  open Client
+}}
+open Server
+
+let start_drawing name image canvas =
+  let bus = get_bus name in
+  ignore {unit{
+    let canceller = launch_client_canvas %bus %image %canvas in
+    Eliom_client.onunload (fun () -> stop_drawing canceller)
+  }}
+
+let counter = ref 0
+
+let player =
+  Eliom_content.Html5.Id.create_global_elt
+    (audio
+       ~srcs:(make_uri (Eliom_service.static_dir ())
+                  ["music.ogg"],[])
+       ~a:[a_autoplay (`Autoplay);a_controls (`Controls)]
+       [pcdata "Your browser does not support audio element" ])
+    
+let () = Connected.register ~service:multigraffiti_service
+  !% ( fun name () username ->
+    (* Some browsers won't reload the image, so we force
+       them by changing the url each time. *)
+    incr counter;
+    let image = img ~alt:name ~src:(make_uri
+					      ~service:imageservice (name,!counter)) () in
+    let canvas = canvas ~a:[ a_width width; a_height height ]
+			   [pcdata "your browser doesn't support canvas"; br (); image] in
+    start_drawing name image canvas;
+    make_page
+      [h1 [pcdata name];
+       disconnect_box ();
+       choose_drawing_form ();
+       canvas;
+       player])
+
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_feed/Makefile b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_feed/Makefile
new file mode 100644
index 00000000..8aeb4758
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_feed/Makefile
@@ -0,0 +1,68 @@
+
+APP_NAME := graffiti
+SERVER_PACKAGE := cairo, unix
+CLIENT_PACKAGE :=
+
+SERVER_FILES = common.ml server.ml feed.ml ${wildcard *.eliom}
+CLIENT_FILES = common.ml client.ml ${wildcard *.eliom}
+
+PORT := 8080
+
+OCLOSURE := YES
+
+###
+
+all: local byte opt conf
+
+LIBDIR := local/var/www/lib
+JSDIR  := local/var/www/static
+
+include Makefile.common
+
+distclean::
+	-rm -rf css/closure
+	-rm -rf local
+	-rm -f graffiti.conf
+
+####
+
+DIRS = local/var/lib/ocsidbm local/var/run local/var/log \
+       local/var/www/static local/var/www/lib local/etc \
+       local/var/www/static/graffiti_saved
+
+local: ${DIRS} local/var/www/static/css local/var/www/static/images css/closure
+
+local/var/www/static/css:
+	ln -fs $(shell pwd)/css local/var/www/static/css
+
+local/var/www/static/images:
+	ln -fs $(shell pwd)/images local/var/www/static/images
+
+css/closure:
+	ln -fs $(shell ocamlfind query oclosure)/closure/goog/css/ css/closure
+
+${DIRS}:
+	mkdir -p $@
+
+conf: graffiti.conf
+
+graffiti.conf: graffiti.conf.in
+	sed -e "s|%%SRC%%|$(shell pwd)|" \
+	    -e "s|%%LIBDIR%%|${LIBDIR}|" \
+	    -e "s|%%JSDIR%%|${JSDIR}|" \
+	    -e "s|%%PORT%%|${PORT}|" \
+	    $< > $@
+
+run.local: graffiti.conf
+	ocsigenserver -c graffiti.conf
+
+run.opt.local: graffiti.conf
+	ocsigenserver.opt -c graffiti.conf
+
+####
+
+install::
+	install -d -m 775 ${INSTALL_USER} ${INSTALL_DIR}/static/css
+	install -m 664 ${INSTALL_USER} css/*.css ${INSTALL_DIR}/static/css
+	cd $(shell ocamlfind query oclosure)/closure/goog/css/ && \
+	  find -type f -exec install -D -m 664 {} ${INSTALL_DIR}/static/css/closure/{} \;
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_feed/feed.ml b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_feed/feed.ml
new file mode 100644
index 00000000..40df2309
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_feed/feed.ml
@@ -0,0 +1,108 @@
+open Eliom_content
+open Html5.D
+open Server
+open Eliom_lib
+open Eliom_lib.Lwt_ops
+
+let static_dir =
+  match Eliom_config.get_config () with
+    | [Simplexmlparser.Element ("staticdir", [], [Simplexmlparser.PCData dir])] ->
+        dir
+    | [] ->
+      raise (Ocsigen_extensions.Error_in_config_file
+               ("staticdir must be configured"))
+    | _ ->
+      raise (Ocsigen_extensions.Error_in_config_file
+               ("Unexpected content inside graffiti config"))
+
+let image_dir name =
+  let dir = static_dir ^ "/graffiti_saved/" ^ (Eliom_lib.Url.encode name) in
+  (try_lwt Lwt_unix.mkdir dir 0o777 with
+    | _ -> debug "could not create the directory %s" dir; Lwt.return ()) >|=
+  (fun () -> dir)
+
+let make_filename name number =
+  image_dir name >|= ( fun dir -> (dir ^ "/" ^ (string_of_int number) ^ ".png") )
+
+let save image name number =
+  lwt file_name = make_filename name number in
+  lwt out_chan = Lwt_io.open_file ~mode:Lwt_io.output file_name in
+  Lwt_io.write out_chan image
+
+let image_info_table = Ocsipersist.Polymorphic.open_table "image_info_table"
+
+let save_image username =
+  let now = CalendarLib.Calendar.now () in
+  lwt number,_,list =
+    try_lwt Ocsipersist.Polymorphic.find image_info_table username with
+      | Not_found -> Lwt.return (0,now,[])
+      | e -> Lwt.fail e
+  in
+  lwt () = Ocsipersist.Polymorphic.add image_info_table
+    username (number+1,now,(number,now)::list) in
+  let (_,image_string) = Hashtbl.find graffiti_info username in
+  save (image_string ()) username number
+
+let save_image_box name =
+  let save_image_service =
+    Eliom_registration.Action.register_post_coservice'
+      ~post_params:Eliom_parameter.unit
+      (fun () () -> save_image name)
+  in
+  post_form save_image_service
+    (fun _ ->
+      [p [string_input
+             ~input_type:`Submit ~value:"save" ()]]) ()
+
+let feed_service = Eliom_service.Http.service ~path:["feed"]
+  ~get_params:(Eliom_parameter.string "name") ()
+
+let local_filename name number =
+  ["graffiti_saved"; Url.encode name ; (string_of_int number) ^ ".png"]
+
+let rec entries name list = function
+  | 0 -> []
+  | len ->
+    match list with
+      | [] -> []
+      | (n,saved)::q ->
+        let title = Atom_feed.plain ("graffiti " ^ name ^ " " ^ (string_of_int n)) in
+        let uri =
+          Xhtml.M.uri_of_string
+            (Eliom_uri.make_string_uri
+               ~service:(Eliom_service.static_dir ())
+               (local_filename name n))
+        in
+        let entry =
+          Atom_feed.entry ~title ~id:uri ~updated:saved
+            [Atom_feed.xhtmlC [ Xhtml.M.img ~src:uri ~alt:"image" ()]] in
+        entry::(entries name q (len - 1))
+
+let feed name () =
+  let id = Xhtml.M.uri_of_string
+              (Eliom_uri.make_string_uri
+                 ~service:feed_service name) in
+  let title = Atom_feed.plain ("nice drawings of " ^ name) in
+  try_lwt
+    Ocsipersist.Polymorphic.find image_info_table name >|=
+      (fun (number,updated,list) -> Atom_feed.feed ~id ~updated ~title (entries name list 10))
+  with
+    | Not_found ->
+      let now = CalendarLib.Calendar.now () in
+      Lwt.return (Atom_feed.feed ~id ~updated:now ~title [])
+    | e -> Lwt.fail e
+
+let feed name () =
+  let id = Xhtml.M.uri_of_string
+              (Eliom_uri.make_string_uri ~service:feed_service name) in
+  let title = Atom_feed.plain ("nice drawings of " ^ name) in
+  Lwt.catch
+    (fun () -> Ocsipersist.Polymorphic.find image_info_table name >|=
+        (fun (number,updated,list) -> Atom_feed.feed ~id ~updated ~title (entries name list 10)))
+    ( function Not_found ->
+      let now = CalendarLib.Calendar.now () in
+      Lwt.return (Atom_feed.feed ~id ~updated:now ~title [])
+      | e -> Lwt.fail e )
+
+let () = Eliom_atom.Reg.register
+  ~service:feed_service feed
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_feed/graffiti.eliom b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_feed/graffiti.eliom
new file mode 100644
index 00000000..3c2bbc1b
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_feed/graffiti.eliom
@@ -0,0 +1,42 @@
+{shared{
+  open Eliom_content.Html5.D
+  open Common
+}}
+{client{
+  open Client
+}}
+open Server
+open Feed
+
+let start_drawing name image canvas =
+  let bus = get_bus name in
+  ignore {unit{
+    let canceller = launch_client_canvas %bus %image %canvas in
+    Eliom_client.onunload (fun () -> stop_drawing canceller)
+  }}
+
+let counter = ref 0
+
+let () = Connected.register ~service:multigraffiti_service
+  !% ( fun name () username ->
+    (* Some browsers won't reload the image, so we force
+       them by changing the url each time. *)
+    incr counter;
+    let image =
+      img ~alt:name
+        ~src:(make_uri
+		~service:imageservice (name,!counter)) () in
+    let canvas =
+      canvas ~a:[ a_width width; a_height height ]
+        [pcdata "your browser doesn't support canvas"; br (); image] in
+    start_drawing name image canvas;
+    make_page
+      [h1 [pcdata name];
+       disconnect_box ();
+       choose_drawing_form ();
+       a feed_service [pcdata "atom feed"] name;
+       div ( if name = username
+	 then [save_image_box name]
+	 else [pcdata "no saving"] );
+       canvas;])
+
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_macaque/Makefile b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_macaque/Makefile
new file mode 100644
index 00000000..7030ddca
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_macaque/Makefile
@@ -0,0 +1,68 @@
+
+APP_NAME := graffiti
+SERVER_PACKAGE := cairo, unix, macaque.syntax
+CLIENT_PACKAGE :=
+
+SERVER_FILES = common.ml server.ml ${wildcard *.eliom}
+CLIENT_FILES = common.ml client.ml ${wildcard *.eliom}
+
+PORT := 8080
+
+OCLOSURE := YES
+
+###
+
+all: local byte opt conf
+
+LIBDIR := local/var/www/lib
+JSDIR  := local/var/www/static
+
+include Makefile.common
+
+distclean::
+	-rm css/closure
+	-rm -r local
+	-rm graffiti.conf
+
+####
+
+DIRS = local/var/lib/ocsidbm local/var/run local/var/log \
+       local/var/www/static local/var/www/lib local/etc \
+       local/var/www/static/graffiti_saved
+
+local: ${DIRS} local/var/www/static/css local/var/www/static/images css/closure
+
+local/var/www/static/css:
+	ln -fs $(shell pwd)/css local/var/www/static/css
+
+local/var/www/static/images:
+	ln -fs $(shell pwd)/images local/var/www/static/images
+
+css/closure:
+	ln -fs $(shell ocamlfind query oclosure)/closure/goog/css/ css/closure
+
+${DIRS}:
+	mkdir -p $@
+
+conf: graffiti.conf
+
+graffiti.conf: graffiti.conf.in
+	sed -e "s|%%SRC%%|$(shell pwd)|" \
+	    -e "s|%%LIBDIR%%|${LIBDIR}|" \
+	    -e "s|%%JSDIR%%|${JSDIR}|" \
+	    -e "s|%%PORT%%|${PORT}|" \
+	    $< > $@
+
+run.local: graffiti.conf
+	ocsigenserver -c graffiti.conf
+
+run.opt.local: graffiti.conf
+	ocsigenserver.opt -c graffiti.conf
+
+####
+
+install::
+	install -d -m 775 ${INSTALL_USER} ${INSTALL_DIR}/static/css
+	install -m 664 ${INSTALL_USER} css/*.css ${INSTALL_DIR}/static/css
+	cd $(shell ocamlfind query oclosure)/closure/goog/css/ && \
+	  find -type f -exec install -D -m 664 {} ${INSTALL_DIR}/static/css/closure/{} \;
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_macaque/create_table.sql b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_macaque/create_table.sql
new file mode 100644
index 00000000..1c9bebad
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_macaque/create_table.sql
@@ -0,0 +1,5 @@
+
+CREATE TABLE users ( 
+       login text NOT NULL,
+       password text NOT NULL
+);
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_macaque/graffiti.conf.in b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_macaque/graffiti.conf.in
new file mode 100644
index 00000000..85afbc9b
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_macaque/graffiti.conf.in
@@ -0,0 +1,36 @@
+<ocsigen>
+
+  <server>
+
+    <port>%%PORT%%</port>
+
+    <logdir>%%SRC%%/local/var/log</logdir>
+    <datadir>%%SRC%%/local/var/run</datadir>
+    <commandpipe>%%SRC%%/local/var/run/ocsigenserver_command</commandpipe>
+
+    <charset>utf-8</charset>
+
+    <debugmode/>
+
+    <extension findlib-package="ocsigenserver.ext.staticmod"/>
+    <extension findlib-package="ocsigenserver.ext.extendconfiguration"/>
+
+     <extension findlib-package="ocsigenserver.ext.ocsipersist-dbm">
+        <store dir="%%SRC%%/local/var/lib/ocsidbm/"/>
+     </extension>
+
+    <extension findlib-package="eliom.server"/>
+    <extension findlib-package="cairo"/>
+    <extension findlib-package="macaque"/>
+
+    <host hostfilter="*">
+      <followsymlinks value="always" />
+      <static dir="%%SRC%%/%%JSDIR%%" />
+      <eliom module="%%SRC%%/%%LIBDIR%%/graffiti.cma">
+	<staticdir>%%SRC%%/%%JSDIR%%</staticdir>
+      </eliom>
+    </host>
+
+  </server>
+
+</ocsigen>
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_macaque/server.ml b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_macaque/server.ml
new file mode 100644
index 00000000..be19c2d6
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_macaque/server.ml
@@ -0,0 +1,236 @@
+open Eliom_content
+open Html5.D
+open Common
+open Lwt
+
+module My_app =
+  Eliom_registration.App (struct
+    let application_name = "graffiti"
+  end)
+
+let rgb_from_string color = (* color is in format "#rrggbb" *)
+  let get_color i =
+    (float_of_string ("0x"^(String.sub color (1+2*i) 2))) /. 255.
+  in
+  try get_color 0, get_color 1, get_color 2 with | _ -> 0.,0.,0.
+
+let launch_server_canvas () =
+  let bus = Eliom_bus.create Json.t<messages> in
+
+  let draw_server, image_string =
+    let surface = Cairo.image_surface_create
+      Cairo.FORMAT_ARGB32 ~width ~height in
+    let ctx = Cairo.create surface in
+    ((fun ((color : string), size, (x1, y1), (x2, y2)) ->
+
+      (* Set thickness of brush *)
+      Cairo.set_line_width ctx (float size) ;
+      Cairo.set_line_join ctx Cairo.LINE_JOIN_ROUND ;
+      Cairo.set_line_cap ctx Cairo.LINE_CAP_ROUND ;
+      let red, green, blue =  rgb_from_string color in
+      Cairo.set_source_rgb ctx ~red ~green ~blue ;
+
+      Cairo.move_to ctx (float x1) (float y1) ;
+      Cairo.line_to ctx (float x2) (float y2) ;
+      Cairo.close_path ctx ;
+
+      (* Apply the ink *)
+      Cairo.stroke ctx ;
+     ),
+     (fun () ->
+       let b = Buffer.create 10000 in
+       (* Output a PNG in a string *)
+       Cairo_png.surface_write_to_stream surface (Buffer.add_string b);
+       Buffer.contents b
+     ))
+  in
+  let _ = Lwt_stream.iter draw_server (Eliom_bus.stream bus) in
+  bus,image_string
+
+let graffiti_info = Hashtbl.create 0
+
+let imageservice =
+  Eliom_registration.String.register_service
+    ~path:["image"]
+    ~headers:Http_headers.dyn_headers
+    ~get_params:(let open Eliom_parameter in string "name" ** int "q")
+    (* we add another parameter for the browser not to cache: at least
+       for chrome, there is no way to force the browser to reload the
+       image without leaving the application *)
+    (fun (name,_) () ->
+      try_lwt
+        let _ ,image_string = Hashtbl.find graffiti_info name in
+	Lwt.return (image_string (), "image/png")
+      with
+	| Not_found -> raise_lwt Eliom_common.Eliom_404)
+
+let get_bus (name:string) =
+  (* create a new bus and image_string function only if it did not exists *)
+  try
+    fst (Hashtbl.find graffiti_info name)
+  with
+    | Not_found ->
+      let bus,image_string = launch_server_canvas () in
+      Hashtbl.add graffiti_info name (bus,image_string);
+      bus
+
+let main_service = Eliom_service.App.service ~path:[""]
+  ~get_params:(Eliom_parameter.unit) ()
+let multigraffiti_service = Eliom_service.App.service ~path:[""]
+  ~get_params:(Eliom_parameter.suffix (Eliom_parameter.string "name")) ()
+
+let choose_drawing_form () =
+  get_form ~service:multigraffiti_service
+    (fun (name) ->
+      [fieldset
+	  [label ~a:[a_for name] [pcdata "drawing name: "];
+           string_input ~input_type:`Text ~name ();
+           br ();
+           string_input ~input_type:`Submit ~value:"Go" ()
+          ]])
+
+let connection_service =
+  Eliom_service.Http.post_coservice'
+    ~post_params:(let open Eliom_parameter in (string "name" ** string "password"))
+    ()
+let disconnection_service = Eliom_service.Http.post_coservice' ~post_params:Eliom_parameter.unit ()
+let create_account_service =
+  Eliom_service.Http.post_coservice ~fallback:main_service ~post_params:(let open Eliom_parameter in (string "name" ** string "password")) ()
+
+let username = Eliom_reference.eref ~scope:Eliom_common.default_session_scope None
+
+module Lwt_thread = struct
+  include Lwt
+  include Lwt_chan
+end
+module Lwt_PGOCaml = PGOCaml_generic.Make(Lwt_thread)
+module Lwt_Query = Query.Make_with_Db(Lwt_thread)(Lwt_PGOCaml)
+
+let get_db : unit -> unit Lwt_PGOCaml.t Lwt.t =
+  let db_handler = ref None in
+  fun () ->
+    match !db_handler with
+      | Some h -> Lwt.return h
+      | None -> Lwt_PGOCaml.connect ~database:"testbase" ()
+
+let table = <:table< users (
+  login text NOT NULL,
+  password text NOT NULL
+) >>
+
+let find name =
+  (get_db () >>= fun dbh ->
+   Lwt_Query.view dbh
+   <:view< {password = user_.password} |
+            user_ in $table$;
+            user_.login = $string:name$; >>)
+
+let insert name pwd =
+  get_db () >>= fun dbh ->
+  Lwt_Query.query dbh
+  <:insert< $table$ := { login = $string:name$; password = $string:pwd$; } >>
+
+let check_pwd name pwd =
+  (get_db () >>= fun dbh ->
+   Lwt_Query.view dbh
+   <:view< {password = user_.password} |
+            user_ in $table$;
+            user_.login = $string:name$;
+	    user_.password = $string:pwd$ >>)
+  >|= (function [] -> false | _ -> true)
+
+let () = Eliom_registration.Action.register
+  ~service:create_account_service
+  (fun () (name, pwd) ->
+    find name >>=
+      (function
+	| [] -> insert name pwd
+	| _ -> Lwt.return ()))
+
+let () = Eliom_registration.Action.register
+  ~service:connection_service
+  (fun () (name, password) ->
+    check_pwd name password >>=
+      (function
+	| true -> Eliom_reference.set username (Some name)
+	| false -> Lwt.return ()))
+
+let () =
+  Eliom_registration.Action.register
+    ~service:disconnection_service
+    (fun () () -> Eliom_state.discard ~scope:Eliom_common.default_session_scope ())
+
+let disconnect_box () =
+  post_form disconnection_service
+    (fun _ -> [fieldset
+		  [string_input
+                      ~input_type:`Submit ~value:"Log out" ()]]) ()
+
+let login_name_form service button_text =
+  post_form ~service
+    (fun (name1, name2) ->
+      [fieldset
+	  [label ~a:[a_for name1] [pcdata "login: "];
+           string_input ~input_type:`Text ~name:name1 ();
+           br ();
+           label ~a:[a_for name2] [pcdata "password: "];
+           string_input ~input_type:`Password ~name:name2 ();
+           br ();
+           string_input ~input_type:`Submit ~value:button_text ()
+         ]]) ()
+
+let oclosure_script =
+  Html5.Id.create_global_elt
+    (js_script
+       ~uri:(make_uri  (Eliom_service.static_dir ())
+               ["graffiti_oclosure.js"]) ())
+
+let make_page content =
+  Lwt.return
+    (html
+       (head
+	  (title (pcdata "Graffiti"))
+       [ css_link
+           ~uri:(make_uri (Eliom_service.static_dir ())
+                  ["css";"common.css"]) ();
+         css_link
+           ~uri:(make_uri (Eliom_service.static_dir ())
+                  ["css";"hsvpalette.css"]) ();
+         css_link
+           ~uri:(make_uri (Eliom_service.static_dir ())
+                  ["css";"slider.css"]) ();
+         oclosure_script;
+         css_link
+           ~uri:(make_uri (Eliom_service.static_dir ())
+                  ["css";"graffiti.css"]) ();
+       ])
+       (body content))
+
+let default_content () =
+  make_page
+    [h1 [pcdata "Welcome to Multigraffiti"];
+     h2 [pcdata "log in"];
+     login_name_form connection_service "Connect";
+     h2 [pcdata "create account"];
+     login_name_form create_account_service "Create account";]
+
+module Connected_translate =
+struct
+  type page = string -> My_app.page Lwt.t
+  let translate page =
+    Eliom_reference.get username >>=
+      function
+	| None -> default_content ()
+	| Some username -> page username
+end
+
+module Connected =
+  Eliom_registration.Customize ( My_app ) ( Connected_translate )
+
+let ( !% ) f = fun a b -> return (fun c -> f a b c)
+
+let () = Connected.register ~service:main_service
+  !% (fun () () username ->
+    make_page
+      [h1 [pcdata ("Welcome to Multigraffiti " ^ username)];
+       choose_drawing_form ()])
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_ocsipersist/server.ml b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_ocsipersist/server.ml
new file mode 100644
index 00000000..cce9f0a6
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/multigraffiti_ocsipersist/server.ml
@@ -0,0 +1,208 @@
+open Eliom_content.Html5.D
+open Common
+open Lwt
+
+module My_app =
+  Eliom_registration.App (
+    struct
+      let application_name = "graffiti"
+    end)
+
+let rgb_from_string color = (* color is in format "#rrggbb" *)
+  let get_color i =
+    (float_of_string ("0x"^(String.sub color (1+2*i) 2))) /. 255.
+  in
+  try get_color 0, get_color 1, get_color 2 with | _ -> 0.,0.,0.
+
+let launch_server_canvas () =
+  let bus = Eliom_bus.create Json.t<messages> in
+
+  let draw_server, image_string =
+    let surface = Cairo.image_surface_create
+      Cairo.FORMAT_ARGB32 ~width ~height in
+    let ctx = Cairo.create surface in
+    ((fun ((color : string), size, (x1, y1), (x2, y2)) ->
+
+      (* Set thickness of brush *)
+      Cairo.set_line_width ctx (float size) ;
+      Cairo.set_line_join ctx Cairo.LINE_JOIN_ROUND ;
+      Cairo.set_line_cap ctx Cairo.LINE_CAP_ROUND ;
+      let red, green, blue =  rgb_from_string color in
+      Cairo.set_source_rgb ctx ~red ~green ~blue ;
+
+      Cairo.move_to ctx (float x1) (float y1) ;
+      Cairo.line_to ctx (float x2) (float y2) ;
+      Cairo.close_path ctx ;
+
+      (* Apply the ink *)
+      Cairo.stroke ctx ;
+     ),
+     (fun () ->
+       let b = Buffer.create 10000 in
+       (* Output a PNG in a string *)
+       Cairo_png.surface_write_to_stream surface (Buffer.add_string b);
+       Buffer.contents b
+     ))
+  in
+  let _ = Lwt_stream.iter draw_server (Eliom_bus.stream bus) in
+  bus,image_string
+
+let graffiti_info = Hashtbl.create 0
+
+let imageservice =
+  Eliom_registration.String.register_service
+    ~path:["image"]
+    ~headers:Http_headers.dyn_headers
+    ~get_params:(let open Eliom_parameter in string "name" ** int "q")
+    (* we add an int parameter for the browser not to cache the image:
+       at least for chrome, there is no way to force the browser to
+       reload the image without leaving the application *)
+    (fun (name,_) () ->
+      try_lwt
+        let _ ,image_string = Hashtbl.find graffiti_info name in
+        Lwt.return (image_string (), "image/png")
+      with
+        | Not_found -> raise_lwt Eliom_common.Eliom_404)
+
+let get_bus (name:string) =
+  (* create a new bus and image_string function only if it did not exists *)
+  try
+    fst (Hashtbl.find graffiti_info name)
+  with
+    | Not_found ->
+      let bus,image_string = launch_server_canvas () in
+      Hashtbl.add graffiti_info name (bus,image_string);
+      bus
+
+let main_service = Eliom_service.App.service ~path:[""]
+  ~get_params:(Eliom_parameter.unit) ()
+let multigraffiti_service = Eliom_service.App.service ~path:[""]
+  ~get_params:(Eliom_parameter.suffix (Eliom_parameter.string "name")) ()
+
+let choose_drawing_form () =
+  get_form ~service:multigraffiti_service
+    (fun (name) ->
+      [fieldset
+          [label ~a:[a_for name]
+              [pcdata "drawing name: "];
+           string_input ~input_type:`Text ~name ();
+           br ();
+           string_input
+             ~input_type:`Submit
+             ~value:"Go" ()
+          ]])
+
+let oclosure_script =
+  Eliom_content.Html5.Id.create_global_elt
+    (js_script
+       ~uri:(make_uri  (Eliom_service.static_dir ())
+               ["graffiti_oclosure.js"]) ())
+
+let make_page content =
+  Lwt.return
+    (html
+       (head
+          (title (pcdata "Graffiti"))
+       [ css_link
+           ~uri:(make_uri (Eliom_service.static_dir ())
+                  ["css";"common.css"]) ();
+         css_link
+           ~uri:(make_uri (Eliom_service.static_dir ())
+                  ["css";"hsvpalette.css"]) ();
+         css_link
+           ~uri:(make_uri (Eliom_service.static_dir ())
+                  ["css";"slider.css"]) ();
+         oclosure_script;
+         css_link
+           ~uri:(make_uri (Eliom_service.static_dir ())
+                  ["css";"graffiti.css"]) ();
+       ])
+       (body content))
+
+let connection_service =
+  Eliom_service.Http.post_coservice' ~post_params:
+    (let open Eliom_parameter in (string "name" ** string "password")) ()
+let disconnection_service = Eliom_service.Http.post_coservice'
+  ~post_params:Eliom_parameter.unit ()
+let create_account_service =
+  Eliom_service.Http.post_coservice ~fallback:main_service ~post_params:
+  (let open Eliom_parameter in (string "name" ** string "password")) ()
+
+let username = Eliom_reference.eref ~scope:Eliom_common.default_session_scope None
+
+let user_table = Ocsipersist.Polymorphic.open_table "user_table"
+
+let check_pwd name pwd =
+  try_lwt
+    lwt saved_password = Ocsipersist.Polymorphic.find user_table name in
+    Lwt.return (pwd = saved_password)
+  with
+    Not_found -> Lwt.return false
+
+let () = Eliom_registration.Action.register
+  ~service:create_account_service
+  (fun () (name, pwd) -> Ocsipersist.Polymorphic.add user_table name pwd)
+
+let () = Eliom_registration.Action.register
+  ~service:connection_service
+  (fun () (name, password) ->
+    match_lwt check_pwd name password with
+      | true -> Eliom_reference.set username (Some name)
+      | false -> Lwt.return ())
+
+let () =
+  Eliom_registration.Action.register
+    ~service:disconnection_service
+    (fun () () -> Eliom_state.discard ~scope:Eliom_common.default_session_scope ())
+
+let disconnect_box () =
+  post_form disconnection_service
+    (fun _ -> [fieldset
+                 [string_input
+                     ~input_type:`Submit ~value:"Log out" ()]]) ()
+
+let login_name_form service button_text =
+  post_form ~service
+    (fun (name1, name2) ->
+      [fieldset
+         [label ~a:[a_for name1] [pcdata "login: "];
+          string_input ~input_type:`Text ~name:name1 ();
+          br ();
+          label ~a:[a_for name2] [pcdata "password: "];
+          string_input
+            ~input_type:`Password
+            ~name:name2 ();
+          br ();
+          string_input
+            ~input_type:`Submit
+            ~value:button_text ()
+         ]]) ()
+
+let default_content () =
+  make_page
+    [h1 [pcdata "Welcome to Multigraffiti"];
+     h2 [pcdata "log in"];
+     login_name_form connection_service "Connect";
+     h2 [pcdata "create account"];
+     login_name_form create_account_service "Create account";]
+
+module Connected_translate =
+struct
+  type page = string -> My_app.page Lwt.t
+  let translate page =
+    Eliom_reference.get username >>=
+      function
+        | None -> default_content ()
+        | Some username -> page username
+end
+
+module Connected =
+  Eliom_registration.Customize ( My_app ) ( Connected_translate )
+
+let ( !% ) f = fun a b -> return (fun c -> f a b c)
+
+let () = Connected.register ~service:main_service
+  !% (fun () () username ->
+    make_page
+      [h1 [pcdata ("Welcome to Multigraffiti " ^ username)];
+       choose_drawing_form ()])
diff --git a/tutos/8.0/manual/files/tutorial/chapter3/reactive_media_player/reactive_media_player.eliom b/tutos/8.0/manual/files/tutorial/chapter3/reactive_media_player/reactive_media_player.eliom
new file mode 100644
index 00000000..ff7c30e7
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/chapter3/reactive_media_player/reactive_media_player.eliom
@@ -0,0 +1,107 @@
+[%%shared
+    open Eliom_content
+    open Html5
+
+    type action = Play | Pause | Seek of float
+]
+
+let%client media_s, set_media_s = React.S.create Pause
+
+let%client progress_s, set_progress_s = React.S.create (0., 0.)
+
+let%client unblock_s, set_unblock_s = React.S.create true
+
+let progress_bar () =
+  let progress_value =
+    [%client
+      (let f (time, duration) =
+         if duration = 0. then 0. else time /. duration *. 100.
+       in
+       React.S.map f progress_s
+       : float React.signal)
+    ] in
+  let attrs = D.([
+      a_input_min 0.;
+      a_input_max 100.;
+      a_onmousedown [%client fun _ -> set_unblock_s false];
+      a_onmouseup [%client fun _ -> set_unblock_s true];
+      C.attr [%client
+        R.a_value
+          (React.S.map (Printf.sprintf "%0.f")
+             (React.S.on unblock_s 0. ~%progress_value))]
+    ])
+  in
+  let d_input =
+    D.Form.input ~input_type:`Range ~value:0. ~a:attrs
+      D.Form.float
+  in
+  let _ = [%client
+    (Lwt.async (fun () ->
+         let d_input = To_dom.of_input ~%d_input in
+         Lwt_js_events.inputs d_input (fun _ _ ->
+             set_media_s (Seek (Js.parseFloat d_input##.value)) ;
+             Lwt.return ()
+           ))
+     : unit)
+  ] in
+  d_input
+
+let media_uri =
+  Html5.D.make_uri
+    ~service:(Eliom_service.static_dir ())
+    ["hb.mp3"]
+
+let media_tag () =
+  let media = D.(audio ~src:media_uri [pcdata "alt"]) in
+  let _ = [%client
+    (Lwt.async (fun () ->
+         let media = To_dom.of_audio ~%media in
+         let media_map = function
+           | Play ->
+             media##play
+           | Pause ->
+             media##pause
+           | Seek f ->
+             media##.currentTime := (f /. 100. *. media##.duration)
+         in Lwt_react.S.keep (React.S.map media_map media_s) ;
+         Lwt_js_events.timeupdates media (fun _ _ ->
+             set_progress_s (media##.currentTime, media##.duration) ;
+             Lwt.return ()
+           ))
+     : unit)
+  ] in
+  media
+
+let pause_button () =
+  D.(Form.button_no_value
+       ~button_type:`Button
+       ~a:[a_onclick  [%client  fun _ -> set_media_s Pause ]]
+       [pcdata "Pause"])
+
+let play_button () =
+  D.(Form.button_no_value
+       ~button_type:`Button
+       ~a:[a_onclick  [%client  fun _ -> set_media_s Play ]]
+       [pcdata "Play"])
+
+module React_Player_app =
+  Eliom_registration.App
+    (struct
+      let application_name = "react_player"
+    end)
+
+let media_service =
+  Eliom_service.App.service ~path:[] ~get_params:Eliom_parameter.unit ()
+
+let () =
+  React_Player_app.register
+    ~service:media_service
+    (fun name () ->
+       let body =
+         D.(body [
+             h2 [pcdata "Media"];
+             media_tag ();
+             div [play_button (); pause_button (); progress_bar ()]
+           ])
+       in
+       Lwt.return (Eliom_tools.D.html ~title:"Media" ~css:[] body))
diff --git a/tutos/8.0/manual/files/tutorial/client-server-req.svg b/tutos/8.0/manual/files/tutorial/client-server-req.svg
new file mode 100644
index 00000000..1843e430
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/client-server-req.svg
@@ -0,0 +1,577 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="197.34613mm"
+   height="152.0314mm"
+   viewBox="0 0 197.34613 152.03141"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="client-server-req.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.76969697"
+     inkscape:cx="371.5748"
+     inkscape:cy="426.14173"
+     inkscape:window-width="1858"
+     inkscape:window-height="1048"
+     inkscape:window-x="62"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="RoundedArrow"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="RoundedArrow"
+       markerWidth="6.1347523"
+       markerHeight="5.9304953"
+       viewBox="0 0 6.1347524 5.9304951"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="m -0.21114562,-4.1055728 6.42229122,3.21114561 a 1,1 90 0 1 0,1.78885438 L -0.21114562,4.1055728 A 1.236068,1.236068 31.717474 0 1 -2,3 v -6 a 1.236068,1.236068 148.28253 0 1 1.78885438,-1.1055728 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="path1367" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="RoundedArrow-0"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="RoundedArrow"
+       markerWidth="6.1347523"
+       markerHeight="5.9304953"
+       viewBox="0 0 6.1347524 5.9304951"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="m -0.21114562,-4.1055728 6.42229122,3.21114561 a 1,1 90 0 1 0,1.78885438 L -0.21114562,4.1055728 A 1.236068,1.236068 31.717474 0 1 -2,3 v -6 a 1.236068,1.236068 148.28253 0 1 1.78885438,-1.1055728 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="path1367-6" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="RoundedArrow-0-6"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="RoundedArrow"
+       markerWidth="6.1347523"
+       markerHeight="5.9304953"
+       viewBox="0 0 6.1347524 5.9304951"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="m -0.21114562,-4.1055728 6.42229122,3.21114561 a 1,1 90 0 1 0,1.78885438 L -0.21114562,4.1055728 A 1.236068,1.236068 31.717474 0 1 -2,3 v -6 a 1.236068,1.236068 148.28253 0 1 1.78885438,-1.1055728 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="path1367-6-1" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="RoundedArrow-0-6-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="RoundedArrow"
+       markerWidth="6.1347523"
+       markerHeight="5.9304953"
+       viewBox="0 0 6.1347524 5.9304951"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="m -0.21114562,-4.1055728 6.42229122,3.21114561 a 1,1 90 0 1 0,1.78885438 L -0.21114562,4.1055728 A 1.236068,1.236068 31.717474 0 1 -2,3 v -6 a 1.236068,1.236068 148.28253 0 1 1.78885438,-1.1055728 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="path1367-6-1-9" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="RoundedArrow-0-6-7-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="RoundedArrow"
+       markerWidth="6.1347523"
+       markerHeight="5.9304953"
+       viewBox="0 0 6.1347524 5.9304951"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="m -0.21114562,-4.1055728 6.42229122,3.21114561 a 1,1 90 0 1 0,1.78885438 L -0.21114562,4.1055728 A 1.236068,1.236068 31.717474 0 1 -2,3 v -6 a 1.236068,1.236068 148.28253 0 1 1.78885438,-1.1055728 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="path1367-6-1-9-1" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="RoundedArrow-0-6-4"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="RoundedArrow"
+       markerWidth="6.1347523"
+       markerHeight="5.9304953"
+       viewBox="0 0 6.1347524 5.9304951"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="m -0.21114562,-4.1055728 6.42229122,3.21114561 a 1,1 90 0 1 0,1.78885438 L -0.21114562,4.1055728 A 1.236068,1.236068 31.717474 0 1 -2,3 v -6 a 1.236068,1.236068 148.28253 0 1 1.78885438,-1.1055728 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="path1367-6-1-7" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="RoundedArrow-0-5"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="RoundedArrow"
+       markerWidth="6.1347523"
+       markerHeight="5.9304953"
+       viewBox="0 0 6.1347524 5.9304951"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="m -0.21114562,-4.1055728 6.42229122,3.21114561 a 1,1 90 0 1 0,1.78885438 L -0.21114562,4.1055728 A 1.236068,1.236068 31.717474 0 1 -2,3 v -6 a 1.236068,1.236068 148.28253 0 1 1.78885438,-1.1055728 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="path1367-6-5" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="RoundedArrow-0-6-4-3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="RoundedArrow"
+       markerWidth="6.1347523"
+       markerHeight="5.9304953"
+       viewBox="0 0 6.1347524 5.9304951"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="m -0.21114562,-4.1055728 6.42229122,3.21114561 a 1,1 90 0 1 0,1.78885438 L -0.21114562,4.1055728 A 1.236068,1.236068 31.717474 0 1 -2,3 v -6 a 1.236068,1.236068 148.28253 0 1 1.78885438,-1.1055728 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="path1367-6-1-7-4" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-16.809164,-5.8636508)">
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.6848;stroke-opacity:1"
+       id="rect2774-7"
+       width="196.90355"
+       height="49.419872"
+       x="17.226145"
+       y="46.4058" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8.46667px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#4d4d4d;stroke:none;stroke-width:1.565;stroke-dasharray:none"
+       x="67.55764"
+       y="27.800211"
+       id="text2456"><tspan
+         sodipodi:role="line"
+         id="tspan2454"
+         style="fill:#4d4d4d;stroke-width:1.565"
+         x="67.55764"
+         y="27.800211" /></text>
+    <rect
+       style="fill:#ddeeff;fill-opacity:1;stroke:none;stroke-width:2.6848;stroke-opacity:1"
+       id="rect2774"
+       width="196.90355"
+       height="49.419872"
+       x="16.939835"
+       y="5.8636508" />
+    <rect
+       style="fill:#ffffdd;fill-opacity:1;stroke:none;stroke-width:3.39191;stroke-opacity:1"
+       id="rect2774-6"
+       width="197.34613"
+       height="78.703217"
+       x="16.809164"
+       y="79.191841" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.52777px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#666666;fill-opacity:1;stroke:#4f4f4f;stroke-width:3;stroke-dasharray:none;stroke-opacity:1"
+       x="30.586386"
+       y="104.21717"
+       id="text14595"><tspan
+         sodipodi:role="line"
+         id="tspan14593"
+         style="stroke-width:3"
+         x="30.586386"
+         y="104.21717" /></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.52777px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#666666;fill-opacity:1;stroke:#4f4f4f;stroke-width:3;stroke-dasharray:none;stroke-opacity:1"
+       x="-42.555782"
+       y="70.486877"
+       id="text14649"><tspan
+         id="tspan14647"
+         style="stroke-width:3"
+         sodipodi:role="line"
+         x="-42.555782"
+         y="70.486877" /></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.52777px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#666666;fill-opacity:1;stroke:#4f4f4f;stroke-width:3;stroke-dasharray:none;stroke-opacity:1"
+       x="-81.822273"
+       y="76.49556"
+       id="text14711"><tspan
+         sodipodi:role="line"
+         id="tspan14709"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';stroke-width:3"
+         x="-81.822273"
+         y="76.49556" /></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.52777px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#666666;fill-opacity:1;stroke:#4f4f4f;stroke-width:3;stroke-dasharray:none;stroke-opacity:1"
+       x="-44.738419"
+       y="50.029419"
+       id="text14715"><tspan
+         sodipodi:role="line"
+         id="tspan14713"
+         style="stroke-width:3"
+         x="-44.738419"
+         y="50.029419" /></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:5.64444px;line-height:0;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';letter-spacing:0px;fill:none;stroke:#4f4f4f;stroke-width:3"
+       x="7.6894755"
+       y="86.651726"
+       id="text374"><tspan
+         sodipodi:role="line"
+         id="tspan372"
+         style="font-size:5.64444px;fill:none;stroke-width:3"
+         x="7.6894755"
+         y="86.651726" /></text>
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:#4f4f4f;stroke-width:0.860732;stroke-dasharray:none"
+       id="rect1682"
+       width="55.503132"
+       height="10.981297"
+       x="37.259094"
+       y="41.896233" />
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:5.64444px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="41.757225"
+       y="49.428848"
+       id="text3733"><tspan
+         sodipodi:role="line"
+         id="tspan3731"
+         style="font-size:5.64444px;fill:#666666;stroke-width:3"
+         x="41.757225"
+         y="49.428848">page generation</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:4.93889px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#5599ff;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="127.30164"
+       y="27.294527"
+       id="text3733-4"><tspan
+         sodipodi:role="line"
+         id="tspan3731-50"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93889px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#5599ff;stroke-width:3"
+         x="127.30164"
+         y="27.294527">let%rpc f (x : int) : int = </tspan><tspan
+         sodipodi:role="line"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93889px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#5599ff;stroke-width:3"
+         x="127.30164"
+         y="33.592152"
+         id="tspan5568">  ...</tspan><tspan
+         sodipodi:role="line"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93889px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#5599ff;stroke-width:3"
+         x="127.30164"
+         y="39.889778"
+         id="tspan5570">  [%client ... ~%b ... ]</tspan><tspan
+         sodipodi:role="line"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93889px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#5599ff;stroke-width:3"
+         x="127.30164"
+         y="46.187405"
+         id="tspan5572">  Lwt.return v</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:5.64444px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#5599ff;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="21.868446"
+       y="21.257185"
+       id="text3733-4-3"><tspan
+         sodipodi:role="line"
+         style="font-size:5.64444px;fill:#5599ff;stroke-width:3"
+         x="21.868446"
+         y="21.257185"
+         id="tspan5568-1"><tspan
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93889px;font-family:monospace;-inkscape-font-specification:'monospace Bold'"
+           id="tspan930">...</tspan></tspan><tspan
+         sodipodi:role="line"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93889px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#5599ff;stroke-width:3"
+         x="21.868446"
+         y="28.312735"
+         id="tspan5570-0">[%client ... ~%a ... ]</tspan><tspan
+         sodipodi:role="line"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93889px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#5599ff;stroke-width:3"
+         x="21.868446"
+         y="35.368286"
+         id="tspan5572-6">Lwt.return (html (...) (...))</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:5.64444px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="81.542229"
+       y="93.598686"
+       id="text3733-3"><tspan
+         sodipodi:role="line"
+         id="tspan3731-6"
+         style="font-size:5.64444px;text-align:center;text-anchor:middle;fill:#666666;stroke-width:3"
+         x="81.542229"
+         y="93.598686">execution of </tspan><tspan
+         sodipodi:role="line"
+         style="font-size:5.64444px;text-align:center;text-anchor:middle;fill:#666666;stroke-width:3"
+         x="81.542229"
+         y="100.65424"
+         id="tspan4336">client fragments</tspan><tspan
+         sodipodi:role="line"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93889px;font-family:monospace;-inkscape-font-specification:'monospace Bold';text-align:center;text-anchor:middle;fill:#b3b3b3;stroke-width:3"
+         x="81.542229"
+         y="107.70979"
+         id="tspan7415">[%client ... ~%a ...]</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:5.64444px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="172.8027"
+       y="86.765404"
+       id="text3733-3-1"><tspan
+         sodipodi:role="line"
+         id="tspan3731-6-2"
+         style="font-size:5.64444px;text-align:center;text-anchor:middle;fill:#666666;stroke-width:3"
+         x="172.8027"
+         y="86.765404">execution of </tspan><tspan
+         sodipodi:role="line"
+         style="font-size:5.64444px;text-align:center;text-anchor:middle;fill:#666666;stroke-width:3"
+         x="172.8027"
+         y="93.820953"
+         id="tspan4336-9">client fragments</tspan><tspan
+         sodipodi:role="line"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93889px;font-family:monospace;-inkscape-font-specification:'monospace Bold';text-align:center;text-anchor:middle;fill:#b3b3b3;stroke-width:3"
+         x="172.8027"
+         y="100.8765"
+         id="tspan7519">[%client ... ~%b ...]</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:5.64444px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="138.1821"
+       y="110.16544"
+       id="text3733-9"><tspan
+         sodipodi:role="line"
+         id="tspan3731-7"
+         style="font-size:5.64444px;fill:#666666;stroke-width:3"
+         x="138.1821"
+         y="110.16544">rpc</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:5.64444px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';white-space:pre;inline-size:97.2878;display:inline;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="82.917412"
+       y="60.925892"
+       id="text3733-0"><tspan
+         x="82.917412"
+         y="60.925892"
+         id="tspan1347"><tspan
+           style="fill:#666666"
+           id="tspan1345">js
+</tspan></tspan><tspan
+         x="82.917412"
+         y="67.981443"
+         id="tspan1351"><tspan
+           style="fill:#666666"
+           id="tspan1349">html
+</tspan></tspan><tspan
+         x="82.917412"
+         y="75.036996"
+         id="tspan1359"><tspan
+           style="fill:#666666"
+           id="tspan1353">+ </tspan><tspan
+           style="-inkscape-font-specification:'Noto Sans Bold Italic'"
+           id="tspan1355">injections </tspan><tspan
+           style="font-size:4.93889px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#b3b3b3"
+           id="tspan1357">~%a</tspan></tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:5.64444px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="167.90967"
+       y="61.61924"
+       id="text3733-0-7"><tspan
+         sodipodi:role="line"
+         style="font-size:5.64444px;fill:#666666;stroke-width:3"
+         x="167.90967"
+         y="61.61924"
+         id="tspan3309-9">value <tspan
+   style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93889px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#b3b3b3"
+   id="tspan928">v</tspan></tspan><tspan
+         sodipodi:role="line"
+         style="font-style:normal;font-size:5.64444px;fill:#666666;stroke-width:3"
+         x="167.90967"
+         y="68.674789"
+         id="tspan3313-8">+ <tspan
+   style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold Italic'"
+   id="tspan3365-2">injections </tspan><tspan
+   id="tspan1138"
+   style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:4.93889px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#b3b3b3">~%b</tspan></tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:5.64444px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="24.794512"
+       y="152.89671"
+       id="text3733-70"><tspan
+         sodipodi:role="line"
+         id="tspan3731-9"
+         style="font-size:5.64444px;fill:#666666;stroke-width:3"
+         x="24.794512"
+         y="152.89671">https://...</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:5.64444px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="64.383423"
+       y="135.56441"
+       id="text3733-70-32"><tspan
+         sodipodi:role="line"
+         id="tspan3731-9-0"
+         style="font-size:5.64444px;fill:#666666;stroke-width:3"
+         x="64.383423"
+         y="135.56441">display page</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:5.64444px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="175.48128"
+       y="153.65833"
+       id="text3733-70-32-6"><tspan
+         sodipodi:role="line"
+         id="tspan3731-9-0-1"
+         style="font-size:5.64444px;fill:#666666;stroke-width:3"
+         x="175.48128"
+         y="153.65833">display page</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:5.64444px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="106.65549"
+       y="153.80922"
+       id="text3733-70-3"><tspan
+         sodipodi:role="line"
+         id="tspan3731-9-6"
+         style="font-size:5.64444px;fill:#666666;stroke-width:3"
+         x="106.65549"
+         y="153.80922">click on a link</tspan></text>
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:#4f4f4f;stroke-width:0.860732;stroke-dasharray:none"
+       id="rect1682-9"
+       width="55.503132"
+       height="10.981297"
+       x="133.93178"
+       y="113.33432" />
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:5.64444px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="138.42992"
+       y="120.33778"
+       id="text3733-1"><tspan
+         sodipodi:role="line"
+         id="tspan3731-2"
+         style="font-size:5.64444px;fill:#666666;stroke-width:3"
+         x="138.42992"
+         y="120.33778">page generation</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:8.46667px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#a0892c;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="103.54121"
+       y="86.431046"
+       id="text3733-7"><tspan
+         sodipodi:role="line"
+         id="tspan3731-5"
+         style="fill:#a0892c;stroke-width:3"
+         x="103.54121"
+         y="86.431046">client</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:8.46667px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#006680;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="100.90163"
+       y="14.577105"
+       id="text3733-7-3"><tspan
+         sodipodi:role="line"
+         id="tspan3731-5-5"
+         style="fill:#006680;stroke-width:3"
+         x="100.90163"
+         y="14.577105">server</tspan></text>
+    <path
+       style="fill:none;fill-opacity:1;stroke:#4f4f4f;stroke-width:1.5;stroke-dasharray:none;marker-end:url(#RoundedArrow)"
+       d="m 32.746177,143.22438 c 0.0017,-30.66481 1.153714,-64.082494 15.19207,-81.71711"
+       id="path2812"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:#4f4f4f;stroke-width:1.62903;stroke-dasharray:none;marker-end:url(#RoundedArrow-0)"
+       d="m 64.808997,54.94121 c 9.672382,3.323803 16.715632,9.23411 16.400172,25.161665"
+       id="path2812-2"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:#4f4f4f;stroke-width:1.62903;stroke-dasharray:none;marker-end:url(#RoundedArrow-0-5)"
+       d="m 81.766405,109.73211 c 7.63e-4,3.88433 0.164753,6.75184 0.257915,10.47302"
+       id="path2812-2-4"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:#4f4f4f;stroke-width:1.5;stroke-dasharray:none;marker-end:url(#RoundedArrow-0-6)"
+       d="m 157.12086,55.496892 c 7.701,2.350657 9.85307,6.245998 9.6019,17.51027"
+       id="path2812-2-8"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:#4f4f4f;stroke-width:1.43238;stroke-dasharray:none;marker-end:url(#RoundedArrow-0-6-4)"
+       d="m 168.68865,126.50009 c 8.27308,8.32369 11.02658,4.88649 16.00749,14.23905"
+       id="path2812-2-8-8"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:#4f4f4f;stroke-width:1.43238;stroke-dasharray:none;marker-end:url(#RoundedArrow-0-6-4-3)"
+       d="m 167.34536,102.49982 c 0.29629,13.71803 -0.4931,-3.347891 -0.16347,6.84403"
+       id="path2812-2-8-8-0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:#4f4f4f;stroke-width:1.5;stroke-dasharray:none;marker-end:url(#RoundedArrow-0-6-7)"
+       d="m 135.74727,111.01574 c -0.58592,-13.134879 8.99756,-41.719178 15.123,-51.682745"
+       id="path2812-2-8-2"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:#4f4f4f;stroke-width:1.5;stroke-dasharray:none;marker-end:url(#RoundedArrow-0-6-7-3)"
+       d="m 119.72121,147.52841 c -0.77265,-8.64219 6.10155,-11.07711 14.17914,-17.63271"
+       id="path2812-2-8-2-9"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>
diff --git a/tutos/8.0/manual/files/tutorial/client-server.png b/tutos/8.0/manual/files/tutorial/client-server.png
new file mode 100644
index 00000000..0090d435
Binary files /dev/null and b/tutos/8.0/manual/files/tutorial/client-server.png differ
diff --git a/tutos/8.0/manual/files/tutorial/client-server.svg b/tutos/8.0/manual/files/tutorial/client-server.svg
new file mode 100644
index 00000000..559552e2
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/client-server.svg
@@ -0,0 +1,684 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="202.80965mm"
+   height="275.21378mm"
+   viewBox="0 0 202.80965 275.21378"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="client-server.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.76969697"
+     inkscape:cx="378.07087"
+     inkscape:cy="453.4252"
+     inkscape:window-width="1858"
+     inkscape:window-height="1048"
+     inkscape:window-x="62"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <marker
+       style="overflow:visible"
+       id="RoundedArrow"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="RoundedArrow"
+       markerWidth="6.1347523"
+       markerHeight="5.9304953"
+       viewBox="0 0 6.1347524 5.9304951"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="m -0.21114562,-4.1055728 6.42229122,3.21114561 a 1,1 90 0 1 0,1.78885438 L -0.21114562,4.1055728 A 1.236068,1.236068 31.717474 0 1 -2,3 v -6 a 1.236068,1.236068 148.28253 0 1 1.78885438,-1.1055728 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="path1367" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="RoundedArrow-9"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="RoundedArrow"
+       markerWidth="6.1347523"
+       markerHeight="5.9304953"
+       viewBox="0 0 6.1347524 5.9304951"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="m -0.21114562,-4.1055728 6.42229122,3.21114561 a 1,1 90 0 1 0,1.78885438 L -0.21114562,4.1055728 A 1.236068,1.236068 31.717474 0 1 -2,3 v -6 a 1.236068,1.236068 148.28253 0 1 1.78885438,-1.1055728 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="path1367-5" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="RoundedArrow-7"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="RoundedArrow"
+       markerWidth="6.1347523"
+       markerHeight="5.9304953"
+       viewBox="0 0 6.1347524 5.9304951"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="m -0.21114562,-4.1055728 6.42229122,3.21114561 a 1,1 90 0 1 0,1.78885438 L -0.21114562,4.1055728 A 1.236068,1.236068 31.717474 0 1 -2,3 v -6 a 1.236068,1.236068 148.28253 0 1 1.78885438,-1.1055728 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="path1367-53" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="RoundedArrow-7-6"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       inkscape:stockid="RoundedArrow"
+       markerWidth="6.1347523"
+       markerHeight="5.9304953"
+       viewBox="0 0 6.1347524 5.9304951"
+       inkscape:isstock="true"
+       inkscape:collect="always"
+       preserveAspectRatio="xMidYMid">
+      <path
+         transform="scale(0.7)"
+         d="m -0.21114562,-4.1055728 6.42229122,3.21114561 a 1,1 90 0 1 0,1.78885438 L -0.21114562,4.1055728 A 1.236068,1.236068 31.717474 0 1 -2,3 v -6 a 1.236068,1.236068 148.28253 0 1 1.78885438,-1.1055728 z"
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         id="path1367-53-2" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-10,-20)">
+    <rect
+       style="fill:#e6e6e6;stroke:none;stroke-width:1.74712;stroke-dasharray:none"
+       id="rect234"
+       width="80"
+       height="100"
+       x="65"
+       y="20" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8.46667px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#4d4d4d;stroke:none;stroke-width:1.565;stroke-dasharray:none"
+       x="67.55764"
+       y="27.800211"
+       id="text2456"><tspan
+         sodipodi:role="line"
+         id="tspan2454"
+         style="fill:#4d4d4d;stroke-width:1.565"
+         x="67.55764"
+         y="27.800211" /></text>
+    <g
+       id="g12332">
+      <rect
+         style="fill:#ddeeff;fill-opacity:1;stroke:none;stroke-opacity:1"
+         id="rect2774"
+         width="75"
+         height="18"
+         x="67.5"
+         y="26.700001" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.52778px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#333333;stroke:none;stroke-width:1.565;stroke-dasharray:none"
+         x="69.844971"
+         y="31.880285"
+         id="text2616"><tspan
+           sodipodi:role="line"
+           id="tspan2614"
+           style="font-size:3.52778px;stroke-width:1.565"
+           x="69.844971"
+           y="31.880285">let%server </tspan></text>
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.56789;stroke-dasharray:none"
+         id="rect2722"
+         width="48"
+         height="1.9958853"
+         x="92"
+         y="30" />
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.8934;stroke-dasharray:none"
+         id="rect2722-3"
+         width="70"
+         height="1.9958853"
+         x="70"
+         y="35" />
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.89341;stroke-dasharray:none"
+         id="rect2722-7"
+         width="70"
+         height="1.9958853"
+         x="70"
+         y="-41.995884"
+         transform="scale(1,-1)" />
+      <rect
+         style="fill:#cae1ff;fill-opacity:1;stroke:none;stroke-width:0.219524;stroke-opacity:1"
+         id="rect6041"
+         width="1"
+         height="18"
+         x="67.5"
+         y="26.700001" />
+    </g>
+    <g
+       id="g12323">
+      <rect
+         style="fill:#ffffdd;fill-opacity:1;stroke:none;stroke-opacity:1"
+         id="rect2774-2"
+         width="75"
+         height="18"
+         x="67.5"
+         y="47.700001" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.52778px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#333333;stroke:none;stroke-width:1.565;stroke-dasharray:none"
+         x="69.844963"
+         y="52.880283"
+         id="text2616-8"><tspan
+           sodipodi:role="line"
+           id="tspan2614-9"
+           style="font-size:3.52778px;stroke-width:1.565"
+           x="69.844963"
+           y="52.880283">let%client </tspan></text>
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.56789;stroke-dasharray:none"
+         id="rect2722-73"
+         width="48"
+         height="1.9958853"
+         x="92.000191"
+         y="51" />
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.8934;stroke-dasharray:none"
+         id="rect2722-3-6"
+         width="70"
+         height="1.9958853"
+         x="70.000015"
+         y="56" />
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.89341;stroke-dasharray:none"
+         id="rect2722-7-1"
+         width="70"
+         height="1.9958853"
+         x="70.000015"
+         y="-62.995884"
+         transform="scale(1,-1)" />
+      <rect
+         style="fill:#ffec8b;fill-opacity:1;stroke:none;stroke-width:0.219524;stroke-opacity:1"
+         id="rect6041-2"
+         width="1"
+         height="18"
+         x="67.5"
+         y="47.700001" />
+    </g>
+    <g
+       id="g12314">
+      <rect
+         style="fill:#eeffee;fill-opacity:1;stroke:none;stroke-opacity:1"
+         id="rect2774-2-9"
+         width="75"
+         height="18"
+         x="67.5"
+         y="68.699997" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.52778px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#333333;stroke:none;stroke-width:1.565;stroke-dasharray:none"
+         x="69.844948"
+         y="73.88028"
+         id="text2616-8-3"><tspan
+           sodipodi:role="line"
+           id="tspan2614-9-1"
+           style="font-size:3.52778px;stroke-width:1.565"
+           x="69.844948"
+           y="73.88028">let%shared </tspan></text>
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.56789;stroke-dasharray:none"
+         id="rect2722-73-9"
+         width="48"
+         height="1.9958853"
+         x="92.000343"
+         y="71.999992" />
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.8934;stroke-dasharray:none"
+         id="rect2722-3-6-4"
+         width="70"
+         height="1.9958853"
+         x="70.000008"
+         y="76.999992" />
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.89341;stroke-dasharray:none"
+         id="rect2722-7-1-7"
+         width="70"
+         height="1.9958853"
+         x="70.000008"
+         y="-83.99588"
+         transform="scale(1,-1)" />
+      <rect
+         style="fill:#b4eeb4;fill-opacity:1;stroke:none;stroke-width:0.219524;stroke-opacity:1"
+         id="rect6041-2-8"
+         width="1"
+         height="18"
+         x="67.5"
+         y="68.699997" />
+    </g>
+    <rect
+       style="fill:#e6e6e6;stroke:none;stroke-width:1.74712;stroke-dasharray:none"
+       id="rect234-4"
+       width="80"
+       height="100"
+       x="10"
+       y="130" />
+    <g
+       id="g12332-5"
+       transform="translate(-55.000029,110)">
+      <rect
+         style="fill:#ddeeff;fill-opacity:1;stroke:none;stroke-opacity:1"
+         id="rect2774-0"
+         width="75"
+         height="18"
+         x="67.5"
+         y="26.700001" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.52778px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#333333;stroke:none;stroke-width:1.565;stroke-dasharray:none"
+         x="69.844971"
+         y="31.880285"
+         id="text2616-3"><tspan
+           sodipodi:role="line"
+           id="tspan2614-6"
+           style="font-size:3.52778px;stroke-width:1.565"
+           x="69.844971"
+           y="31.880285">let%server </tspan></text>
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.56789;stroke-dasharray:none"
+         id="rect2722-1"
+         width="48"
+         height="1.9958853"
+         x="92"
+         y="30" />
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.8934;stroke-dasharray:none"
+         id="rect2722-3-0"
+         width="70"
+         height="1.9958853"
+         x="70"
+         y="35" />
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.89341;stroke-dasharray:none"
+         id="rect2722-7-6"
+         width="70"
+         height="1.9958853"
+         x="70"
+         y="-41.995884"
+         transform="scale(1,-1)" />
+      <rect
+         style="fill:#cae1ff;fill-opacity:1;stroke:none;stroke-width:0.219524;stroke-opacity:1"
+         id="rect6041-3"
+         width="1"
+         height="18"
+         x="67.5"
+         y="26.700001" />
+    </g>
+    <g
+       id="g12314-6"
+       transform="translate(-55.000029,110)">
+      <rect
+         style="fill:#eeffee;fill-opacity:1;stroke:none;stroke-opacity:1"
+         id="rect2774-2-9-9"
+         width="75"
+         height="18"
+         x="67.5"
+         y="68.699997" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.52778px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#333333;stroke:none;stroke-width:1.565;stroke-dasharray:none"
+         x="69.844948"
+         y="73.88028"
+         id="text2616-8-3-3"><tspan
+           sodipodi:role="line"
+           id="tspan2614-9-1-7"
+           style="font-size:3.52778px;stroke-width:1.565"
+           x="69.844948"
+           y="73.88028">let%shared </tspan></text>
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.56789;stroke-dasharray:none"
+         id="rect2722-73-9-4"
+         width="48"
+         height="1.9958853"
+         x="92.000343"
+         y="71.999992" />
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.8934;stroke-dasharray:none"
+         id="rect2722-3-6-4-5"
+         width="70"
+         height="1.9958853"
+         x="70.000008"
+         y="76.999992" />
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.89341;stroke-dasharray:none"
+         id="rect2722-7-1-7-2"
+         width="70"
+         height="1.9958853"
+         x="70.000008"
+         y="-83.99588"
+         transform="scale(1,-1)" />
+      <rect
+         style="fill:#b4eeb4;fill-opacity:1;stroke:none;stroke-width:0.219524;stroke-opacity:1"
+         id="rect6041-2-8-5"
+         width="1"
+         height="18"
+         x="67.5"
+         y="68.699997" />
+    </g>
+    <rect
+       style="fill:#e6e6e6;stroke:none;stroke-width:1.74712;stroke-dasharray:none"
+       id="rect234-4-4"
+       width="80"
+       height="100"
+       x="120"
+       y="130" />
+    <g
+       id="g12323-2-8"
+       transform="translate(54.999955,109.9988)">
+      <rect
+         style="fill:#ffffdd;fill-opacity:1;stroke:none;stroke-opacity:1"
+         id="rect2774-2-0-8"
+         width="75"
+         height="18"
+         x="67.5"
+         y="47.700001" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.52778px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#333333;stroke:none;stroke-width:1.565;stroke-dasharray:none"
+         x="69.844963"
+         y="52.880283"
+         id="text2616-8-6-4"><tspan
+           sodipodi:role="line"
+           id="tspan2614-9-15-3"
+           style="font-size:3.52778px;stroke-width:1.565"
+           x="69.844963"
+           y="52.880283">let%client </tspan></text>
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.56789;stroke-dasharray:none"
+         id="rect2722-73-5-1"
+         width="48"
+         height="1.9958853"
+         x="92.000191"
+         y="51" />
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.8934;stroke-dasharray:none"
+         id="rect2722-3-6-47-4"
+         width="70"
+         height="1.9958853"
+         x="70.000015"
+         y="56" />
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.89341;stroke-dasharray:none"
+         id="rect2722-7-1-6-9"
+         width="70"
+         height="1.9958853"
+         x="70.000015"
+         y="-62.995884"
+         transform="scale(1,-1)" />
+      <rect
+         style="fill:#ffec8b;fill-opacity:1;stroke:none;stroke-width:0.219524;stroke-opacity:1"
+         id="rect6041-2-5-2"
+         width="1"
+         height="18"
+         x="67.5"
+         y="47.700001" />
+    </g>
+    <g
+       id="g12314-6-0"
+       transform="translate(54.999955,109.9988)">
+      <rect
+         style="fill:#eeffee;fill-opacity:1;stroke:none;stroke-opacity:1"
+         id="rect2774-2-9-9-6"
+         width="75"
+         height="18"
+         x="67.5"
+         y="68.699997" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.52778px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#333333;stroke:none;stroke-width:1.565;stroke-dasharray:none"
+         x="69.844948"
+         y="73.88028"
+         id="text2616-8-3-3-8"><tspan
+           sodipodi:role="line"
+           id="tspan2614-9-1-7-9"
+           style="font-size:3.52778px;stroke-width:1.565"
+           x="69.844948"
+           y="73.88028">let%shared </tspan></text>
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.56789;stroke-dasharray:none"
+         id="rect2722-73-9-4-2"
+         width="48"
+         height="1.9958853"
+         x="92.000343"
+         y="71.999992" />
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.8934;stroke-dasharray:none"
+         id="rect2722-3-6-4-5-6"
+         width="70"
+         height="1.9958853"
+         x="70.000008"
+         y="76.999992" />
+      <rect
+         style="fill:#808080;stroke:none;stroke-width:1.89341;stroke-dasharray:none"
+         id="rect2722-7-1-7-2-6"
+         width="70"
+         height="1.9958853"
+         x="70.000008"
+         y="-83.99588"
+         transform="scale(1,-1)" />
+      <rect
+         style="fill:#b4eeb4;fill-opacity:1;stroke:none;stroke-width:0.219524;stroke-opacity:1"
+         id="rect6041-2-8-5-4"
+         width="1"
+         height="18"
+         x="67.5"
+         y="68.699997" />
+    </g>
+    <path
+       style="display:inline;fill:none;fill-rule:evenodd;stroke:#4f4f4f;stroke-width:3.11126;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#RoundedArrow)"
+       d="M 89.112389,104.27754 62.487037,123.78396"
+       id="path13563"
+       inkscape:connector-type="polyline"
+       inkscape:connector-curvature="0" />
+    <path
+       style="display:inline;fill:none;fill-rule:evenodd;stroke:#4f4f4f;stroke-width:3.11126;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#RoundedArrow-7)"
+       d="m 48.225656,210 v 60"
+       id="path13563-5"
+       inkscape:connector-type="polyline"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:inline;fill:none;fill-rule:evenodd;stroke:#4f4f4f;stroke-width:3.11126;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#RoundedArrow-7-6)"
+       d="M 161.10421,209.95325 V 270"
+       id="path13563-5-9"
+       inkscape:connector-type="polyline"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="display:inline;fill:none;fill-rule:evenodd;stroke:#4f4f4f;stroke-width:2.82606;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#RoundedArrow-9)"
+       d="m 120.74503,104.20066 27.58802,20.40685"
+       id="path13563-0"
+       inkscape:connector-type="polyline"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.52777px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#666666;fill-opacity:1;stroke:#4f4f4f;stroke-width:3;stroke-dasharray:none;stroke-opacity:1"
+       x="30.586386"
+       y="104.21717"
+       id="text14595"><tspan
+         sodipodi:role="line"
+         id="tspan14593"
+         style="stroke-width:3"
+         x="30.586386"
+         y="104.21717" /></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.52777px;font-family:monospace;-inkscape-font-specification:'monospace Bold';fill:#666666;fill-opacity:1;stroke:#4f4f4f;stroke-width:3;stroke-dasharray:none;stroke-opacity:1"
+       x="-42.555782"
+       y="70.486877"
+       id="text14649"><tspan
+         id="tspan14647"
+         style="stroke-width:3"
+         sodipodi:role="line"
+         x="-42.555782"
+         y="70.486877" /></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.52777px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#666666;fill-opacity:1;stroke:#4f4f4f;stroke-width:3;stroke-dasharray:none;stroke-opacity:1"
+       x="-81.822273"
+       y="76.49556"
+       id="text14711"><tspan
+         sodipodi:role="line"
+         id="tspan14709"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';stroke-width:3"
+         x="-81.822273"
+         y="76.49556" /></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:3.52777px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#666666;fill-opacity:1;stroke:#4f4f4f;stroke-width:3;stroke-dasharray:none;stroke-opacity:1"
+       x="-44.738419"
+       y="50.029419"
+       id="text14715"><tspan
+         sodipodi:role="line"
+         id="tspan14713"
+         style="stroke-width:3"
+         x="-44.738419"
+         y="50.029419" /></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:5.64444px;line-height:0;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';letter-spacing:0px;fill:none;stroke:#4f4f4f;stroke-width:3"
+       x="7.6894755"
+       y="86.651726"
+       id="text374"><tspan
+         sodipodi:role="line"
+         id="tspan372"
+         style="font-size:5.64444px;fill:none;stroke-width:3"
+         x="7.6894755"
+         y="86.651726" /></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:8.46667px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:none;stroke:#4f4f4f;stroke-width:3"
+       x="54.598091"
+       y="109.70747"
+       id="text1047"><tspan
+         sodipodi:role="line"
+         id="tspan1045"
+         style="font-size:8.46667px;fill:#666666;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+         x="54.598091"
+         y="109.70747">ppx</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:8.46667px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:none;stroke:#4f4f4f;stroke-width:3"
+       x="138.95688"
+       y="109.70747"
+       id="text1047-3"><tspan
+         sodipodi:role="line"
+         id="tspan1045-6"
+         style="font-size:8.46667px;fill:#666666;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+         x="138.95688"
+         y="109.70747">ppx</tspan></text>
+    <rect
+       style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       id="rect1352"
+       width="190"
+       height="15"
+       x="10.02329"
+       y="232.94182" />
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:8.46667px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="47.325649"
+       y="242.89952"
+       id="text3253"><tspan
+         sodipodi:role="line"
+         id="tspan3251"
+         style="fill:#ffffff;stroke-width:3"
+         x="47.325649"
+         y="242.89952">client-server type-checking</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:8.46667px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#666666;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="53.094311"
+       y="260.75577"
+       id="text3539"><tspan
+         sodipodi:role="line"
+         id="tspan3537"
+         style="stroke-width:3"
+         x="53.094311"
+         y="260.75577">ocamlopt</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:8.46667px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#666666;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="165.59952"
+       y="260.51889"
+       id="text3543"><tspan
+         sodipodi:role="line"
+         id="tspan3541"
+         style="stroke-width:3"
+         x="165.59952"
+         y="260.51889">js_of_ocaml</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:8.46667px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#666666;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="36.282444"
+       y="292.60043"
+       id="text3547"><tspan
+         sodipodi:role="line"
+         id="tspan3545"
+         style="stroke-width:3"
+         x="36.282444"
+         y="292.60043">.cmxs</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:8.46667px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#666666;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="156.44171"
+       y="293.18176"
+       id="text3551"><tspan
+         sodipodi:role="line"
+         id="tspan3549"
+         style="stroke-width:3"
+         x="156.44171"
+         y="293.18176">.js</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-weight:bold;font-size:8.46667px;font-family:'Noto Sans';-inkscape-font-specification:'Noto Sans Bold';fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3;stroke-opacity:1"
+       x="149.17807"
+       y="28.262192"
+       id="text3733"><tspan
+         sodipodi:role="line"
+         id="tspan3731"
+         style="fill:#666666;stroke-width:3"
+         x="149.17807"
+         y="28.262192">.eliom</tspan></text>
+  </g>
+</svg>
diff --git a/tutos/8.0/manual/files/tutorial/static/css/common.css b/tutos/8.0/manual/files/tutorial/static/css/common.css
new file mode 100644
index 00000000..02d7073c
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/static/css/common.css
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2009 The Closure Library Authors. All Rights Reserved.
+ *
+ * Use of this source code is governed by an Apache 2.0 License.
+ * See the COPYING file for details.
+ */
+
+/*
+ * Cross-browser implementation of the "display: inline-block" CSS property.
+ * See http://www.w3.org/TR/CSS21/visuren.html#propdef-display for details.
+ * Tested on IE 6 & 7, FF 1.5 & 2.0, Safari 2 & 3, Webkit, and Opera 9.
+ *
+ * @author attila@google.com (Attila Bodis)
+ */
+
+/*
+ * Default rule; only Safari, Webkit, and Opera handle it without hacks.
+ */
+.goog-inline-block {
+  position: relative;
+  display: -moz-inline-box; /* Ignored by FF3 and later. */
+  display: inline-block;
+}
+
+/*
+ * Pre-IE7 IE hack.  On IE, "display: inline-block" only gives the element
+ * layout, but doesn't give it inline behavior.  Subsequently setting display
+ * to inline does the trick.
+ */
+* html .goog-inline-block {
+  display: inline;
+}
+
+/*
+ * IE7-only hack.  On IE, "display: inline-block" only gives the element
+ * layout, but doesn't give it inline behavior.  Subsequently setting display
+ * to inline does the trick.
+ */
+*:first-child+html .goog-inline-block {
+  display: inline;
+}
diff --git a/tutos/8.0/manual/files/tutorial/static/css/graffiti.css b/tutos/8.0/manual/files/tutorial/static/css/graffiti.css
new file mode 100644
index 00000000..8287935b
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/static/css/graffiti.css
@@ -0,0 +1,68 @@
+/* Graffiti
+ * http://www.ocsigen.org/graffiti
+ * Copyright (C) 2013 Vincent Balat
+ * Laboratoire PPS - CNRS Université Paris Diderot
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, with linking exception;
+ * either version 2.1 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
+ */
+
+body {
+  width: 750px;
+  -webkit-user-select: none;
+}
+
+canvas {
+  border: solid 1px #aaaaaa;
+}
+
+div.ojw_colorpicker {
+  position: absolute;
+  top: 8px;
+  left: 740px;
+}
+
+input {
+  width: 400px;
+}
+
+.ot-color-picker.colorpicker {
+  height: 300px;
+  width: 400px;
+}
+
+.slider {
+  -webkit-appearance: none;
+  height: 20px;
+  background: #d3d3d3;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: .2s;
+  transition: opacity .2s;
+}
+
+.slider:hover {
+  opacity: 1;
+}
+
+.slider::-moz-range-thumb {
+  background:  #cbd6f1;
+  cursor: pointer;
+}
+
+
+.undercanvas {
+  z-index: -1;
+  position: absolute;
+}
diff --git a/tutos/8.0/manual/files/tutorial/static/css/hsvpalette.css b/tutos/8.0/manual/files/tutorial/static/css/hsvpalette.css
new file mode 100644
index 00000000..d3ae7f67
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/static/css/hsvpalette.css
@@ -0,0 +1,179 @@
+/*
+ * Copyright 2008 The Closure Library Authors. All Rights Reserved.
+ *
+ * Use of this source code is governed by an Apache 2.0 License.
+ * See the COPYING file for details.
+ */
+
+/*
+ * All Rights Reserved.
+ *
+ * Styles for the HSV color palette.
+ *
+ * @author smcbride@google.com (Sean McBride)
+ * @author arv@google.com (Erik Arvidsson)
+ * @author manucornet@google.com (Manu Cornet)
+ */
+
+.goog-hsv-palette,
+.goog-hsv-palette-sm {
+  position: relative;
+  border: 1px solid #999;
+  border-color: #ccc #999 #999 #ccc;
+  width: 400px;
+  height: 276px;
+}
+
+.goog-hsv-palette-sm {
+  width: 182px;
+  height: 185px;
+}
+
+.goog-hsv-palette label span,
+.goog-hsv-palette-sm label span {
+  display: none;
+}
+
+.goog-hsv-palette-hs-backdrop,
+.goog-hsv-palette-sm-hs-backdrop,
+.goog-hsv-palette-hs-image,
+.goog-hsv-palette-sm-hs-image {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 256px;
+  height: 256px;
+  border: 1px solid #999;
+}
+
+.goog-hsv-palette-sm-hs-backdrop,
+.goog-hsv-palette-sm-hs-image {
+  top: 45px;
+  width: 128px;
+  height: 128px;
+}
+
+.goog-hsv-palette-hs-backdrop,
+.goog-hsv-palette-sm-hs-backdrop {
+  background-color: #000;
+}
+
+.goog-hsv-palette-hs-image,
+.goog-hsv-palette-v-image,
+.goog-hsv-palette-hs-handle,
+.goog-hsv-palette-v-handle {
+  background-image: url(../images/hsv-sprite.png);
+}
+
+.goog-hsv-palette-noalpha .goog-hsv-palette-hs-image,
+.goog-hsv-palette-noalpha .goog-hsv-palette-v-image,
+.goog-hsv-palette-noalpha .goog-hsv-palette-hs-handle,
+.goog-hsv-palette-noalpha .goog-hsv-palette-v-handle {
+  background-image: url(../images/hsv-sprite.gif);
+}
+
+.goog-hsv-palette-sm-hs-image,
+.goog-hsv-palette-sm-v-image,
+.goog-hsv-palette-sm-hs-handle,
+.goog-hsv-palette-sm-v-handle {
+  background-image: url(../images/hsv-sprite-sm.png);
+}
+
+.goog-hsv-palette-noalpha .goog-hsv-palette-sm-hs-image,
+.goog-hsv-palette-noalpha .goog-hsv-palette-sm-v-image,
+.goog-hsv-palette-noalpha .goog-hsv-palette-sm-hs-handle,
+.goog-hsv-palette-noalpha .goog-hsv-palette-sm-v-handle {
+  background-image: url(../images/hsv-sprite-sm.gif);
+}
+
+.goog-hsv-palette-hs-image,
+.goog-hsv-palette-sm-hs-image {
+  background-position: 0 0;
+}
+
+.goog-hsv-palette-hs-handle,
+.goog-hsv-palette-sm-hs-handle {
+  position: absolute;
+  left: 5px;
+  top: 5px;
+  width: 11px;
+  height: 11px;
+  overflow: hidden;
+  background-position: 0 -256px;
+}
+
+.goog-hsv-palette-sm-hs-handle {
+  top: 40px;
+  background-position: 0 -128px;
+}
+
+.goog-hsv-palette-v-image,
+.goog-hsv-palette-sm-v-image {
+  position: absolute;
+  top: 10px;
+  left: 286px;
+  width: 19px;
+  height: 256px;
+  border: 1px solid #999;
+  background-color: #fff;
+  background-position: -256px 0;
+}
+
+.goog-hsv-palette-sm-v-image {
+  top: 45px;
+  left: 155px;
+  width: 9px;
+  height: 128px;
+  background-position: -128px 0;
+}
+
+.goog-hsv-palette-v-handle,
+.goog-hsv-palette-sm-v-handle {
+  position: absolute;
+  top: 5px;
+  left: 279px;
+  width: 35px;
+  height: 11px;
+  background-position: -11px -256px;
+  overflow: hidden;
+}
+
+.goog-hsv-palette-sm-v-handle {
+  top: 40px;
+  left: 148px;
+  width: 25px;
+  background-position: -11px -128px;
+}
+
+.goog-hsv-palette-swatch,
+.goog-hsv-palette-sm-swatch {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 65px;
+  height: 65px;
+  border: 1px solid #999;
+  background-color: #fff;
+}
+
+.goog-hsv-palette-sm-swatch {
+  top: 10px;
+  right: auto;
+  left: 10px;
+  width: 30px;
+  height: 22px;
+}
+
+.goog-hsv-palette-input,
+.goog-hsv-palette-sm-input {
+  position: absolute;
+  top: 85px;
+  right: 10px;
+  width: 65px;
+}
+
+.goog-hsv-palette-sm-input {
+  top: 10px;
+  right: auto;
+  left: 50px;
+}
diff --git a/tutos/8.0/manual/files/tutorial/static/css/slider.css b/tutos/8.0/manual/files/tutorial/static/css/slider.css
new file mode 100644
index 00000000..ddd07482
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/static/css/slider.css
@@ -0,0 +1,45 @@
+.goog-slider-vertical,
+.goog-slider-horizontal {
+background-color: ThreeDFace;
+position: relative;
+overflow: hidden;
+}
+
+.goog-slider-vertical {
+height: 300px;
+width: 20px;
+}
+
+.goog-slider-horizontal {
+height: 20px;
+width: 400px;
+}
+
+.goog-slider-thumb {
+position: absolute;
+background-color: ThreeDShadow;
+overflow: hidden;
+}
+
+.goog-slider-vertical .goog-slider-thumb {
+left: 0;
+height: 20px;
+width: 100%;
+}
+
+.goog-slider-horizontal .goog-slider-thumb {
+top: 0;
+width: 20px;
+height: 100%;
+}
+#s-h {
+margin-bottom: 2em;
+}
+strong {
+display: block;
+margin-bottom: 3px;
+}
+#out1, #out2 {
+color: #999;
+margin-left: 1em;
+}
diff --git a/tutos/8.0/manual/files/tutorial/static/images/hsv-sprite-sm.png b/tutos/8.0/manual/files/tutorial/static/images/hsv-sprite-sm.png
new file mode 100644
index 00000000..470f8e0c
Binary files /dev/null and b/tutos/8.0/manual/files/tutorial/static/images/hsv-sprite-sm.png differ
diff --git a/tutos/8.0/manual/files/tutorial/tutowidgets/ex-final.png b/tutos/8.0/manual/files/tutorial/tutowidgets/ex-final.png
new file mode 100644
index 00000000..0d1d2203
Binary files /dev/null and b/tutos/8.0/manual/files/tutorial/tutowidgets/ex-final.png differ
diff --git a/tutos/8.0/manual/files/tutorial/tutowidgets/ex.css b/tutos/8.0/manual/files/tutorial/tutowidgets/ex.css
new file mode 100644
index 00000000..c07bc739
--- /dev/null
+++ b/tutos/8.0/manual/files/tutorial/tutowidgets/ex.css
@@ -0,0 +1,30 @@
+* {
+    font-family: sans-serif;
+}
+div.button {
+  background-color: #5577ee;
+  width: 200px;
+  height: 20px;
+  padding: 0;
+  text-align: center;
+  color: #222436;
+  font-weight: bold;
+  cursor: pointer;
+}
+div.content {
+  background-color: #55ee99;
+  width: 180px;
+  height: 40px;
+  padding: 10px;
+  margin-top: 0;
+  color: #222436;
+}
+div.mywidget {
+  display: inline-block;
+  margin: 0 10px 0 0;
+  height: 100px;
+  vertical-align: top;
+}
+.hidden {
+  display: none;
+}
diff --git a/tutos/8.0/manual/files/tutorial/tutowidgets/ex1.png b/tutos/8.0/manual/files/tutorial/tutowidgets/ex1.png
new file mode 100644
index 00000000..f5a581c8
Binary files /dev/null and b/tutos/8.0/manual/files/tutorial/tutowidgets/ex1.png differ
diff --git a/tutos/8.0/manual/files/tutorial/tutowidgets/ex2.png b/tutos/8.0/manual/files/tutorial/tutowidgets/ex2.png
new file mode 100644
index 00000000..931b5f8e
Binary files /dev/null and b/tutos/8.0/manual/files/tutorial/tutowidgets/ex2.png differ
diff --git a/tutos/8.0/manual/hash-password.wiki b/tutos/8.0/manual/hash-password.wiki
new file mode 100644
index 00000000..cf16a095
--- /dev/null
+++ b/tutos/8.0/manual/hash-password.wiki
@@ -0,0 +1,27 @@
+=Protecting your passwords=
+
+For protecting the user passwords or other sensitive data,
+we can use
+[[http://ocaml-safepass.forge.ocamlcore.org/|ocaml-safepass]].
+
+We can now write the encrypted password in our database
+(using <<a_api project="ocsigenserver"| type Ocsipersist.table >>
+in this example) as follow:
+<<code language="ocaml"|
+let table =
+  Ocsipersist.Polymorphic.open_table "users"
+
+let add_user username password =
+  (* Check if the user is already exist *)
+  Lwt.try_bind
+    (fun () -> Ocsipersist.Polymorphic.find table username)
+    (fun _ -> Lwt.return false)
+    (function
+      | Not_found ->
+        Ocsipersist.Polymorphic.add table username
+          (Bcrypt.hash password, email)
+        ~>>= fun () ->
+        Lwt.return true
+      | e -> Lwt.fail e
+    )
+>>
diff --git a/tutos/8.0/manual/how-do-i-create-a-cryptographically-safe-identifier.wiki b/tutos/8.0/manual/how-do-i-create-a-cryptographically-safe-identifier.wiki
new file mode 100644
index 00000000..c592482a
--- /dev/null
+++ b/tutos/8.0/manual/how-do-i-create-a-cryptographically-safe-identifier.wiki
@@ -0,0 +1,3 @@
+== How do I create a cryptographically safe identifier? ==
+
+<<a_api project="ocsigenserver"| val  Ocsigen_lib.make_cryptographic_safe_string>>
diff --git a/tutos/8.0/manual/how-does-a-page-s-source-code-look.wiki b/tutos/8.0/manual/how-does-a-page-s-source-code-look.wiki
new file mode 100644
index 00000000..c4015085
--- /dev/null
+++ b/tutos/8.0/manual/how-does-a-page-s-source-code-look.wiki
@@ -0,0 +1,81 @@
+=How does a client-server app source code look like?=
+
+=== Eliom client-server applications
+
+Eliom client-server applications are running in your browser for a <<a_manual project="eliom" chapter="clientserver-applications"|certain lifetime>> and consist of one or several pages/URLs.
+An application has its associated js file, which must have the same name ([[site:manual/how-to-compile-my-ocsigen-pages|generated automatically by the default makefile]] and added automatically by Eliom in the page).
+
+For example, we define an application called //example//:
+<<code language="ocaml"|
+module Example =
+  Eliom_registration.App
+    (struct
+      let application_name = "example"
+     end)
+>>
+
+=== Eliom Services
+
+Pages are generated by //services//. Here is how to define a service:
+
+<<code language="ocaml"|
+let main =
+  Eliom_service.create
+    ~path:(Eliom_service.Path [])
+    ~meth:(Eliom_service.Get unit)
+    ()
+>>
+
+The path is a list of string corresponding to the url. Here, the list is empty because it's the main page.
+
+If, for example, the list is ["hello";"world"], the page will be accessed using the address:
+<<code|http://website.com/hello/world/>>
+
+More informations about parameters: [[wiki:manual/how-to-use-get-parameters-or-parameters-in-the-url|How to use GET parameters (parameters in the URL)?]]
+
+Now that our service has been declared, we associate to it an OCaml function that will generate the page. We call this //service registration//. If the service belongs to the application, we use the registrations functions from module {{{Example}}} defined above.
+
+<<code language="ocaml"|
+let _ =
+  Example.register
+    ~service:main
+    (fun () () ->
+      Lwt.return ...)
+>>
+
+The third parameter is the function that will be called to generate the page.
+This function takes two parameters, corresponding respectively to GET and POST parameters. Here both are {{{()}}} because the service does not take any parameter. The function returns an element of type html (using Lwt).
+
+
+=== Page Content
+
+The content of Eliom application pages is made using functions.
+The **html function** takes two parameters:
+head and body, which are also functions that takes parameters coresponding to their content.
+
+<<code language="ocaml"|
+(html
+           (head (title (txt "Page Title")) [])
+           (body [p [txt "Hello World!"]])))
+>>
+
+Most of the elements functions take a list of other elements as a parameter.
+
+{{http://public.db0.fr/dev/ocsigen/html.png|ast}}
+
+Validity of HTML is checked at compile time, which means that a program
+that may generate a page that does not respect the recommendations of the
+W3C will be rejected at compile time.
+
+=== Download full code
+
+//Warning: This third party code may be outdated. Please notify the author is something is broken, or do a pull request on github.//
+
+* [[https://github.com/db0company/Ocsigen-Quick-Howto/blob/master/page/example.eliom|Read the full code]]
+* [[https://github.com/db0company/Ocsigen-Quick-Howto|Download and try this example]]
+
+
+=== Links
+
+* <<a_manual project="eliom" chapter="server-services"|About services>>
+* <<a_manual project="tyxml"|About html generation>>
diff --git a/tutos/8.0/manual/how-to-add-a-div.wiki b/tutos/8.0/manual/how-to-add-a-div.wiki
new file mode 100644
index 00000000..b97d53da
--- /dev/null
+++ b/tutos/8.0/manual/how-to-add-a-div.wiki
@@ -0,0 +1,25 @@
+=How to add a div?=
+
+<<code language='ocaml'|
+div ~a:[a_class ["firstclass"; "secondclass"]] [txt "Hello!"]
+>>
+
+**Required parameter**: list containing other elements
+(Details of available elements in type
+<<a_api project="tyxml"|type Html_types.flow5>>).
+
+**Optional parameter** for attributes "a" ([[wiki:manual/how-to-set-and-id-classes-or-other-attributes-to-html-elements|How to set and id, classes or other attributes to HTML elements?]]).
+
+=== Download full code
+
+//Warning: This third party code may be outdated. Please notify the author is something is broken, or do a pull request on github.//
+
+* [[https://github.com/db0company/Ocsigen-Quick-Howto/blob/master/elements/example.eliom|Read the full code]]
+* [[https://github.com/db0company/Ocsigen-Quick-Howto|Download and try this example]]
+
+=== Links
+
+* Modules <<a_api project="eliom" subproject="server"|module Eliom_content.Html.D>> and
+  <<a_api project="eliom" subproject="server"|module Eliom_content.Html.F>>
+  (HTML5 Elements)
+* signature <<a_api project="tyxml"|module Html_sigs.T>> (Element attributes)
diff --git a/tutos/8.0/manual/how-to-add-a-favicon.wiki b/tutos/8.0/manual/how-to-add-a-favicon.wiki
new file mode 100644
index 00000000..f8f76df9
--- /dev/null
+++ b/tutos/8.0/manual/how-to-add-a-favicon.wiki
@@ -0,0 +1,16 @@
+=How to add a Favicon?=
+
+A favicon is a file of type "ico" which contain a picture of size 16x16px. It is the picture that you can ususally see next to the title of the page on a browser.
+
+{{http://public.db0.fr/dev/ocsigen/favicon.png|favicon for Ocsigen.org}}
+
+By default, all browsers look for a file {{{favicon.ico}}}
+at the root of the website:
+<<code| http://website.com/favicon.ico>>
+
+Just put the file at the root of the static directory set in the configuration file.
+
+=== Links
+
+* <<a_manual project="ocsigenserver" chapter="staticmod"|Configuring Ocsigen Server for serving static files>>
+* [[http://www.favicon.cc/|An example of a favicon generator]]
diff --git a/tutos/8.0/manual/how-to-add-a-javascript-script.wiki b/tutos/8.0/manual/how-to-add-a-javascript-script.wiki
new file mode 100644
index 00000000..5a0440c7
--- /dev/null
+++ b/tutos/8.0/manual/how-to-add-a-javascript-script.wiki
@@ -0,0 +1,30 @@
+=How to add a Javacript script?=
+
+If you have client-side programs on your website, you can use Eliom's client-server features, that will compile client side parts to JS using **Ocsigen Js_of_ocaml**, and include automatically the script in the page. But in some cases you may also want to include yourselves external JS scripts.
+
+=== Include the script on the html header
+
+Javascript scripts are included in the header using the **js_script** function (defined in <<a_api project="eliom" subproject="server"|val Eliom_content.Html.D>>).
+
+<<code language="ocaml"|
+open Eliom_content.Html.D (* for make_uri an js_script *)
+
+js_script
+     ~uri:(make_uri (Eliom_service.static_dir ())
+              ["hello.js"])
+     ()
+>>
+This function has 2 parameters: the file path and unit.
+
+The file path is generated using the **make_uri** function (from <<a_api project="eliom" subproject="server"|val Eliom_content.Html.D>> module). This function creates the relative URL string using the static directory (which is a service) configured in the configuration file and the given list.
+
+Insert this piece of code on the list given in parameter to the **head** function.
+
+Or you can use:
+<<a_api project="eliom" subproject="server"|val Eliom_tools.F.head>>
+
+=== Call an external function
+
+Have a look at
+<<a_manual project="js_of_ocaml" chapter="bindings"|this page of Js_of_ocaml's manual>>
+to understand how to call JS function from your OCaml program.
diff --git a/tutos/8.0/manual/how-to-add-a-list.wiki b/tutos/8.0/manual/how-to-add-a-list.wiki
new file mode 100644
index 00000000..82ab452d
--- /dev/null
+++ b/tutos/8.0/manual/how-to-add-a-list.wiki
@@ -0,0 +1,70 @@
+=How to add lists in a page?=
+
+==== Simple list and ordered list
+
+===== Simple list
+
+<<code language='ocaml'|
+  ul
+    [li [txt "first item"];
+     li [txt "second item"];
+     li [txt "third item"];
+     li [txt "fourth item"]]
+>>
+
+
+===== Ordered list
+
+<<code language='ocaml'|
+  ol
+    [li [txt "first item"];
+     li [txt "second item"]]
+>>
+
+**Required parameter**: list containing **li** elements ([[site:tyxml/api/Html_types#TYPEli_attrib|Details of li content]]).
+
+**Optional parameter** for attributes "a" ([[wiki:manual/how-to-set-and-id-classes-or-other-attributes-to-html-elements|How to set and id, classes or other attributes to HTML elements?]]).
+
+==== Definition list
+
+<<code language='ocaml'|
+  dl
+    [((dt [txt "Banana"], []),
+      (dd [txt "An elongated curved fruit"], []));
+     ((dt [txt "Orange"], []),
+      (dd [txt "A globose, reddish-yellow, edible fruit"],
+       [dd [txt "A color between yellow and red"]]));
+     ((dt [txt "Kiwi"], []),
+      (dd [txt "Egg-sized green fruit from China"], []))]
+>>
+
+This kind of list contains definitions.
+
+**Required parameter**:
+A list of pair of:
+* A pair containing:
+** The first element of type dt
+** A list of elements of type dt
+* Another pair containing:
+** The first element of type dd
+** A list of elements of type dd
+
+Details:
+* [[site:tyxml/api/Html_types#TYPEphrasing|dd content]]
+* [[site:tyxml/api/Html_types#TYPEflow5|dt content]]
+
+**Optional parameter** for attributes "a" ([[wiki:manual/how-to-set-and-id-classes-or-other-attributes-to-html-elements|How to set and id, classes or other attributes to HTML elements?]]).
+
+=== Download full code
+
+//Warning: This third party code may be outdated. Please notify the author is something is broken, or do a pull request on github.//
+
+* [[https://github.com/db0company/Ocsigen-Quick-Howto/blob/master/elements/example.eliom|Read the full code]]
+* [[https://github.com/db0company/Ocsigen-Quick-Howto|Download and try this example]]
+
+=== Links
+
+* Modules <<a_api project="eliom" subproject="server"|module Eliom_content.Html.D>> and
+  <<a_api project="eliom" subproject="server"|module Eliom_content.Html.F>>
+  (HTML5 Elements)
+* signature <<a_api project="tyxml"|module Html_sigs.T>> (Element attributes)
diff --git a/tutos/8.0/manual/how-to-add-a-select-or-other-form-element.wiki b/tutos/8.0/manual/how-to-add-a-select-or-other-form-element.wiki
new file mode 100644
index 00000000..1587abf9
--- /dev/null
+++ b/tutos/8.0/manual/how-to-add-a-select-or-other-form-element.wiki
@@ -0,0 +1,42 @@
+=How to add a select (or other form element)?=
+
+=== In forms towards Eliom services:
+
+<<code language='ocaml'|
+open Eliom_content
+
+Html.D.Form.select ~name:select_name
+  Html.D.Form.string (* type of the parameter *)
+  (Html.D.Form.Option
+    ([] (* attributes *),
+     "Bob" (* value *),
+     None (* Content, if different from value *),
+     false (* not selected *))) (* first line *)
+    [Html.D.Form.Option ([], "Marc", None, false);
+     (Html.D.Form.Optgroup
+        ([],
+         "Girls",
+         ([], "Karin", None, false),
+         [([a_disabled `Disabled], "Juliette", None, false);
+          ([], "Alice", None, true);
+          ([], "Germaine", Some (txt "Bob's mother"), false)]))]
+>>
+
+=== Basic HTML5 elements without Eliom services
+For example if you want to use them with client side event handler.
+
+<<code language='ocaml'|
+open Eliom_content.Html.D
+
+Raw.select [option (txt "hello");
+            option ~a:[a_value "a"; a_selected `Selected] (txt "cool")]
+>>
+
+
+=== Links
+
+* [[wiki:manual/how-to-write-forms|How to write forms]]
+* <<a_manual project="eliom" chapter="server-links"|Eliom forms and links>>
+* API
+  <<a_api project="eliom" subproject="server"|module Eliom_content.Html.D.Form>>
+* signature <<a_api project="tyxml"|module Html_sigs.T>> (Element attributes)
diff --git a/tutos/8.0/manual/how-to-add-an-image.wiki b/tutos/8.0/manual/how-to-add-an-image.wiki
new file mode 100644
index 00000000..8c7144c1
--- /dev/null
+++ b/tutos/8.0/manual/how-to-add-an-image.wiki
@@ -0,0 +1,46 @@
+=How to add an image?=
+
+#### Internal image
+
+<<code language='ocaml'|
+  img ~alt:("Ocsigen Logo")
+      ~src:(make_uri
+              ~service:(Eliom_service.static_dir ())
+              ["ocsigen_logo.png"])
+    ()
+
+>>
+
+#### External image
+
+<<code language='ocaml'|
+  img ~alt:("Ocsigen Logo")
+      ~src:(Xml.uri_of_string ("http://website.com/image.png"))
+    ()
+>>
+
+
+The function **img** has 3 parameters:
+* **alt**: A description of the image
+* **src**: the URL of the image
+* unit
+
+For an internal image, the file path is generated using the **make_uri** function. This function creates the relative URL string using the static directory configured in the configuration file and the given list.
+
+For an external image, you must convert the string url into uri using the **uri_of_string** function. You can also create an <<a_manual project="eliom" chapter="server-services" fragment="unregistrable_services"|external service>>.
+
+=== Download full code
+
+//Warning: This third party code may be outdated. Please notify the author is something is broken, or do a pull request on github.//
+
+* [[https://github.com/db0company/Ocsigen-Quick-Howto/blob/master/elements/example.eliom|Read the full code]]
+* [[https://github.com/db0company/Ocsigen-Quick-Howto|Download and try this example]]
+
+=== Links
+
+* Modules <<a_api project="eliom" subproject="server"|module Eliom_content.Html.D>> and
+  <<a_api project="eliom" subproject="server"|module Eliom_content.Html.F>>
+  (HTML5 Elements)
+* The <<a_api project="tyxml"|val Html_sigs.T.img>> element
+* [[http://en.wikipedia.org/wiki/Alt_attribute|Alt attribute]]
+* signature <<a_api project="tyxml"|module Html_sigs.T>> (Element attributes)
diff --git a/tutos/8.0/manual/how-to-add-css-stylesheet.wiki b/tutos/8.0/manual/how-to-add-css-stylesheet.wiki
new file mode 100644
index 00000000..0a8b9741
--- /dev/null
+++ b/tutos/8.0/manual/how-to-add-css-stylesheet.wiki
@@ -0,0 +1,45 @@
+=How to add a CSS stylesheet?=
+
+//Warning: css_link and make_uri come from Eliom_content.Html.D module. This module is opened for each piece of code//
+
+CSS stylesheet are included in the header using the **css_link** function.
+
+<<code language="ocaml"|
+css_link
+     ~uri:(make_uri (Eliom_service.static_dir ())
+              ["css";"style.css"])
+     ()
+>>
+This function has 2 parameters: the file path and unit.
+
+The file path is generated using the **make_uri** function. This function creates the relative URL string using the static directory configured in the configuration file and the given list.
+
+=== Where?
+
+Insert this piece of code on the list given in parameter to the **head** function:
+
+<<code language="ocaml"|
+  (html
+     (head (title (txt "Page Title"))
+        [css_link ~uri:(make_uri (Eliom_service.static_dir ())
+	        	  ["css";"style.css"]) ()])
+     (body [p [txt "Hello World!"]]))))
+>>
+
+Or you can use:
+<<a_api project="eliom" subproject="server"|val Eliom_tools.F.head>>
+
+
+
+=== Download full code
+
+//Warning: This third party code may be outdated. Please notify the author is something is broken, or do a pull request on github.//
+
+* [[https://github.com/db0company/Ocsigen-Quick-Howto/blob/master/css/example.eliom|Read the full code]]
+* [[https://github.com/db0company/Ocsigen-Quick-Howto|Download and try this example]]
+
+=== Links
+
+* <<a_manual project="eliom" chapter="misc"|About images, css and javascript>>
+* <<a_api project="eliom" subproject="server" |val Eliom_content.Html.D.make_uri>>
+* <<a_manual project="ocsigenserver" chapter="staticmod"|Configuring Ocsigen Server for serving static files>>
diff --git a/tutos/8.0/manual/how-to-attach-ocaml-values-to-dom-elements.wiki b/tutos/8.0/manual/how-to-attach-ocaml-values-to-dom-elements.wiki
new file mode 100644
index 00000000..797c11d2
--- /dev/null
+++ b/tutos/8.0/manual/how-to-attach-ocaml-values-to-dom-elements.wiki
@@ -0,0 +1,14 @@
+=How to attach OCaml values to DOM elements?=
+
+It is often convenient to attach OCaml values to certain elements of
+the page. There are several ways to achieve this.
+
+* The first possibility is to use DATA attributes (for example if the
+  page is generated on server side).
+* Alternatively, you can add a new property to the element using the
+  {{{##.}}} syntax.
+  ** You can create a new class type with the new property
+     (that can be either an OCaml value or a JS value), possibly
+     inheriting from the type of the DOM element, and create an
+     (unsafe) coercion function for this type; or simply
+  ** Create getter and setter functions to add the new property.
diff --git a/tutos/8.0/manual/how-to-attach-ocaml-values-to-the-html-nodes-sent-to-the-client.wiki b/tutos/8.0/manual/how-to-attach-ocaml-values-to-the-html-nodes-sent-to-the-client.wiki
new file mode 100644
index 00000000..f8c82a92
--- /dev/null
+++ b/tutos/8.0/manual/how-to-attach-ocaml-values-to-the-html-nodes-sent-to-the-client.wiki
@@ -0,0 +1,3 @@
+== How to attach OCaml values to the HTML nodes sent to the client?
+
+Use module <<a_api project="eliom" subproject="server"|module Eliom_content.Html.Custom_data>>.
diff --git a/tutos/8.0/manual/how-to-build-js-object.wiki b/tutos/8.0/manual/how-to-build-js-object.wiki
new file mode 100644
index 00000000..8b230a93
--- /dev/null
+++ b/tutos/8.0/manual/how-to-build-js-object.wiki
@@ -0,0 +1,13 @@
+=How to build js object?=
+
+Use syntax {{{new%js}}}:
+
+Example:
+
+<<code language="ocaml"|
+let get_timestamp () =
+  let date = new%js Js.date_now in
+  int_of_float (Js.to_float (date##getTime))
+>>
+
+More details in documentation: [[site:js_of_ocaml/api/Js#2_Objectconstructors|Js object constructor]]
diff --git a/tutos/8.0/manual/how-to-call-a-server-side-function-from-client-side.wiki b/tutos/8.0/manual/how-to-call-a-server-side-function-from-client-side.wiki
new file mode 100644
index 00000000..62365e0f
--- /dev/null
+++ b/tutos/8.0/manual/how-to-call-a-server-side-function-from-client-side.wiki
@@ -0,0 +1,36 @@
+=How to call a server-side function from client-side?=
+
+It is possible to call server-side functions in client-side.
+For security reasons, these functions must first
+be declared explicitely as RPCs (with the type of their
+argument).
+
+<<code language="ocaml" class="shared"|
+let%rpc f (x : int) : string Lwt.t = ...
+...
+>>
+<<code language="ocaml" class="client"|
+[%client ... f 4 ... ]
+>>
+
+The syntax is provided by opam package {{{ocsigen-ppx-rpc}}}.
+
+The server-side function ({{{f}}} in the example) needs to return a
+Lwt value.
+
+Server functions are just syntactic sugar for pathless services
+returning OCaml values.
+
+Note that you need to install {{{ppx_deriving}}}, and load our JSON
+{{{ppx_deriving}}} plugin in your project. The plugin is available as
+the Ocamlfind package {{{js_of_ocaml.deriving.ppx}}}.
+
+If the function takes a more complex type, this type must have been
+declared with {{{ppx_deriving}}}. For example,
+
+<<code language="ocaml"|
+type t = int * string [@@deriving json]
+>>
+
+Our infrastructure provides server-side data validation of the data
+sent, and prevents malformed data from crashing the server.
diff --git a/tutos/8.0/manual/how-to-call-an-ocaml-function-from-js-code.wiki b/tutos/8.0/manual/how-to-call-an-ocaml-function-from-js-code.wiki
new file mode 100644
index 00000000..8913b536
--- /dev/null
+++ b/tutos/8.0/manual/how-to-call-an-ocaml-function-from-js-code.wiki
@@ -0,0 +1,3 @@
+=How to call an OCaml function from JS code?=
+
+Have a look at function [[site:js_of_ocaml/api/Js#VALwrap_callback|Js.wrap_callback]]
diff --git a/tutos/8.0/manual/how-to-compile-my-ocsigen-pages.wiki b/tutos/8.0/manual/how-to-compile-my-ocsigen-pages.wiki
new file mode 100644
index 00000000..65485504
--- /dev/null
+++ b/tutos/8.0/manual/how-to-compile-my-ocsigen-pages.wiki
@@ -0,0 +1,41 @@
+=How to compile my Ocsigen pages?=
+
+=== Eliom distillery
+
+Eliom-distillery will help you to build your client-server application
+using Eliom.
+It comes with several templates ("client-server.basic", "os.pgocaml",
+and more to come  ...).
+
+{{{
+$ eliom-distillery -name <name> -template client-server.basic [-target-directory <dir>]
+}}}
+
+Eliom distillery will also create a default configuration file for Ocsigen
+Server.
+
+More information on Eliom distillery in
+<<a_manual project="eliom" subproject="server" chapter="workflow-distillery"|Eliom's manual>>.
+
+More information on how client-server Eliom project are compiled on
+<<a_manual project="eliom" subproject="server" chapter="workflow-compilation"|this page>>.
+
+If you don't need client-server features, the compilation process is very
+simple and without surprise. Compile with {{{ocamlc}}} or {{{ocamlopt}}}
+using {{{ocamlfind}}}, with package {{{eliom.server}}}.
+You will have to create your configuration file manually.
+But you can still use Eliom distillery, which will make easier the inclusion
+of client side features, later.
+
+
+=== Compilation details
+
+* **eliomdep** helps you handle dependencies of eliom files
+* **eliomc** compile server-side eliom files (and ml files too)
+* **js_of_eliom** compile client-side eliom files
+
+Read manuals for mor information about these compilers.
+
+=== Links
+
+* <<a_manual project="eliom" chapter="workflow-compilation" |Full documentation about Ocsigen compilation>>
diff --git a/tutos/8.0/manual/how-to-configure-and-launch-the-ocsigen-server.wiki b/tutos/8.0/manual/how-to-configure-and-launch-the-ocsigen-server.wiki
new file mode 100644
index 00000000..84ae6fca
--- /dev/null
+++ b/tutos/8.0/manual/how-to-configure-and-launch-the-ocsigen-server.wiki
@@ -0,0 +1,23 @@
+=How to configure and launch the Ocsigen Server?=
+
+=== Default configuration file
+
+* Eliom distillery is generating a configuration file
+* If you want to create it yourself, you can have a look at the default configuration file provided with the installation of Ocsigen (usually {{{/etc/ocsigenserver/ocsigenserver.conf.sample}}}).
+* Change the port by the network port number you want your website to work on. The port **80** is the port used by http by default but you need to be the administrator of your server to use it.
+* Adapt paths.
+* Change other parameters that suit your needs using the <<a_manual project="ocsigenserver" chapter="config"|configuration file documentation>>.
+
+=== Your own configuration file
+
+Have a look at the <<a_manual project="ocsigenserver" chapter="config"|configuration file full documentation>>.
+
+=== Launch the server
+
+<<code |
+ocsigenserver -c your_config_file.conf
+>>
+
+=== Links
+
+* More information about this command or the configuration file in <<a_manual project="ocsigenserver"|Ocsigen Server's manual>>.
diff --git a/tutos/8.0/manual/how-to-create-form-wizard-sequence-of-pages-depending-on-data-entered-on-previous-ones.wiki b/tutos/8.0/manual/how-to-create-form-wizard-sequence-of-pages-depending-on-data-entered-on-previous-ones.wiki
new file mode 100644
index 00000000..617ae882
--- /dev/null
+++ b/tutos/8.0/manual/how-to-create-form-wizard-sequence-of-pages-depending-on-data-entered-on-previous-ones.wiki
@@ -0,0 +1,88 @@
+=How to create a form wizard (sequence of pages depending on data entered on previous ones)?=
+
+The solution to implement wizard-like forms (that is a sequence of pages
+depending on data entered on previous ones) is to create dynamically new
+services especially for one user. If you use session data (eliom references)
+it won't work if you have several tabs on the same site (or if you use the
+back button).
+
+Just create new anonymous (attached)-coservices that depend on the data sent
+by the user. In the following example (taken from Eliom's testsuite), I create
+a two step wizard that will add two integers. You can try to enter a first
+value, duplicate the tab, and both will continue working correctly.
+
+To prevent memory leaks, use a timeout for these dynamic coservices.
+The scope of these service can be session or global for the site (as coservice
+identifiers are cryptographically safe).
+
+<<code language="ocaml"|
+open Eliom_content.Html.F
+
+(* -------------------------------------------------------- *)
+(* We create two main services on the same URL,             *)
+(* one with a GET integer parameter:                        *)
+
+let calc = Eliom_service.create
+    ~path:(Eliom_service.Path ["calc"])
+    ~meth:(Eliom_service.Get Eliom_parameter.unit) ()
+let calc_i =
+  Eliom_service.create
+    ~path:(Eliom_service.Path ["calc"])
+    ~meth:(Eliom_service.Get (Eliom_parameter.int "i"))
+    ()
+
+(* -------------------------------------------------------- *)
+(* The handler for the service without parameter.           *)
+(* It displays a form where you can write an integer value: *)
+
+let calc_handler () () =
+  let create_form intname =
+    [p [txt "Write a number: ";
+        Form.input ~input_type:`Text ~name:intname Form.int;
+        br ();
+        Form.input ~input_type:`Submit ~value:"Send" Form.string]]
+  in
+  let f = Form.get_form calc_i create_form in
+  Lwt.return (html (head (title (txt "")) []) (body [f]))
+
+
+(* -------------------------------------------------------- *)
+(* The handler for the service with parameter.              *)
+(* It creates dynamically and registers a new coservice     *)
+(* with one GET integer parameter.                          *)
+(* This new coservice depends on the first value (i)        *)
+(* entered by the user.                                     *)
+
+let calc_i_handler i () =
+  let create_form is =
+    (fun entier ->
+       [p [txt (is^" + ");
+           Form.input ~input_type:`Text ~name:entier Form.int;
+           br ();
+           Form.input ~input_type:`Submit ~value:"Sum" Form.string]])
+  in
+  let is = string_of_int i in
+  let calc_result =
+    Eliom_registration.Html.attach_get
+      ~scope:Eliom_common.default_session_scope
+      ~fallback:calc
+      ~get_params:(Eliom_parameter.int "j")
+      ~timeout:120.
+      (fun j () ->
+        let js = string_of_int j in
+        let ijs = string_of_int (i+j) in
+        Lwt.return (html
+             (head (title (txt "")) [])
+             (body [p [txt (is^" + "^js^" = "^ijs)]])))
+  in
+  let f = Form.get_form calc_result (create_form is) in
+  Lwt.return (html (head (title (txt "")) []) (body [f]))
+
+
+(* -------------------------------------------------------- *)
+(* Registration of main services:                           *)
+
+let () =
+  Eliom_registration.Html.register calc   calc_handler;
+  Eliom_registration.Html.register calc_i calc_i_handler
+>>
diff --git a/tutos/8.0/manual/how-to-create-link-to-a-current-page-without-knowing-its-url.wiki b/tutos/8.0/manual/how-to-create-link-to-a-current-page-without-knowing-its-url.wiki
new file mode 100644
index 00000000..69e2973d
--- /dev/null
+++ b/tutos/8.0/manual/how-to-create-link-to-a-current-page-without-knowing-its-url.wiki
@@ -0,0 +1,11 @@
+=How to create a link to the current page (without knowing its URL)?=
+
+Void coservices are here for that:
+<<code language="ocaml"|
+a ~service:Eliom_service.reload_action
+  [txt "Click to reload"] ();
+>>
+
+More information in
+<<a_manual project="eliom" chapter="server-services" fragment="void"|Eliom's manual>>, and API documentation of
+<<a_api project="eliom" subproject="server"|val Eliom_service.reload_action>>.
diff --git a/tutos/8.0/manual/how-to-detect-channel-disconnection.wiki b/tutos/8.0/manual/how-to-detect-channel-disconnection.wiki
new file mode 100644
index 00000000..638a5ae6
--- /dev/null
+++ b/tutos/8.0/manual/how-to-detect-channel-disconnection.wiki
@@ -0,0 +1,55 @@
+=How to detect channel disconnection
+
+==Question
+
+ Is there a way to detect that some Eliom_comet channel became
+ disconnected? I would like to warn the user if the server becomes
+ unreachable.
+
+==Answer
+
+If you are using Ocsigen-start, you probably have nothing to do.
+Ocsigen-start will monitor the life of sessions and close the process
+when needed.
+
+If you are not using Ocsigen-start, you must catch exceptions
+{{{Eliom_comet.Channel_full}}},
+{{{Eliom_comet.Channel_closed}}} (and {{{Eliom_comet.Process_closed}}}
+on Eliom < 5). Have a look at module {{{Os_comet}}} in
+Ocsigen-start.
+
+//explanation pasted from Ocsigen mailing list, 2014-08-06://
+
+I assume that you want to know that from client side (It is also
+possible to know that on server side).
+Since there are quite a lot of different kind of channels, there are
+different variations of 'disconnected' for them. You receive this
+information through an exception when you try to read from the
+Lwt_stream. The different exceptions you have to handle depending on the
+case are:
+
+;{{{Eliom_comet.Channel_full}}}
+:For global channel. Those are never closed on server side and are not attached to a particular session. The server maintain a limited buffer of previous values to avoid memory leak. If a client reconnects to the network and too many messages have been sent to the channel, since its last update, he will receive that exception.
+;{{{Eliom_comet.Process_closed}}} (Eliom < 5)
+:For a channel associated to a client process. If the process is explicitely closed on the server, the server is rebooted, it timeouted, ...
+;{{{Eliom_comet.Channel_closed}}}
+:The channel was not maintained alive on the server (garbage collected).
+
+Usualy it is just simpler to not distinguish and just catch on all those
+exception and consider their meaning to be 'disconnected'.
+
+To handle that reliably, you must be careful: an Lwt_stream raises an
+exception only once. One way to ensure that you can't miss an exception
+is to map your channel through Lwt_stream.map_exn and handle the
+exceptions at that point.
+
+Depending on your case the strategies I would recommend would be either:
+* If you maintain a global state between the client and the server, it
+is usualy easier to rebuild it from scratch than to rebuild only the
+missing parts: i.e. the braindead/failure proof solution is to reload
+the complete contents
+{{{(Eliom_client.exit_to ~service.Eliom_service.reload_action () ())}}}.
+* If you only want to follow a stream of events and missing a few in the
+middle isn't a problem, you can just provides a Caml service that sends
+a channel, and when your channel disconnects, you just fetch a new one.
+(You may have to use Lwt_stream.concat to do the plumbing)
diff --git a/tutos/8.0/manual/how-to-detect-on-client-side-that-the-server-side-state-for-the-process-is-closed.wiki b/tutos/8.0/manual/how-to-detect-on-client-side-that-the-server-side-state-for-the-process-is-closed.wiki
new file mode 100644
index 00000000..d2dde172
--- /dev/null
+++ b/tutos/8.0/manual/how-to-detect-on-client-side-that-the-server-side-state-for-the-process-is-closed.wiki
@@ -0,0 +1,13 @@
+= How to detect on client side that the server side state for the process is closed? =
+
+If you are using Ocsigen-start, you probably have nothing to do.
+Ocsigen-start will monitor the life of sessions and close the process
+when needed.
+
+If you are not using Ocsigen-start, you must catch exceptions
+{{{Eliom_comet.Channel_full}}},
+{{{Eliom_comet.Channel_closed}}} (and {{{Eliom_comet.Process_closed}}}
+on Eliom < 5).
+For example, you can use a channel with a different client-process scope
+to warn client processes that the session is closed.
+Have a look at module {{{Os_comet}}} in Ocsigen-start.
diff --git a/tutos/8.0/manual/how-to-do-links-to-other-pages.wiki b/tutos/8.0/manual/how-to-do-links-to-other-pages.wiki
new file mode 100644
index 00000000..1f220a7d
--- /dev/null
+++ b/tutos/8.0/manual/how-to-do-links-to-other-pages.wiki
@@ -0,0 +1,28 @@
+=How to do links to other pages?=
+
+Examples:
+
+<<code language="ocaml"|
+(* Link to a service without parameter: *)
+Html.D.a ~service:coucou [txt "coucou"] ();
+
+(* Link to a service with parameters of type (int * (int * string)): *)
+Html.D.a ~service:coucou_params
+  [txt "coucou_params"] (42, (22, "ciao"));
+
+(* Link to an external service: *)
+Html.D.a
+  (Eliom_service.extern
+    ~prefix:"http://fr.wikipedia.org"
+    ~path:["wiki";""]
+    ~meth:(Eliom_service.Get Eliom_parameter.(suffix (all_suffix "suff")))
+    ())
+  [txt "OCaml on wikipedia"]
+  ["OCaml"];
+
+(* Low level interface for links: *)
+Html.F.Raw.a
+  ~a:[a_href (Xml.uri_of_string "http://en.wikipedia.org/wiki/OCaml")]
+  [txt "OCaml on wikipedia"]
+
+>>
diff --git a/tutos/8.0/manual/how-to-implement-a-notification-system.wiki b/tutos/8.0/manual/how-to-implement-a-notification-system.wiki
new file mode 100644
index 00000000..31e4ee08
--- /dev/null
+++ b/tutos/8.0/manual/how-to-implement-a-notification-system.wiki
@@ -0,0 +1,110 @@
+=How to implement a notification system?=
+
+The easiest way for the server to send notifications to the client is
+to use module <<a_api project="ocsigen-start"|module Os_notif>> from
+Ocsigen-start (OS), but it requires to use OS's user management
+system. If you are not using OS, we recommend to get inspiration from
+the code of this module, to implement your notification system
+conveniently and without memory leak.
+
+== With {{{Os_notif}}}
+
+For each type of data on which you want to receive updates,
+instanciate functor {{{Os_notif.Make_Simple}}} on server side:
+
+<<code language="ocaml" class="server"|
+module My_notif = Os_notif.Make_Simple (struct
+  type key = ... (* The type of the identifier of the data we want listen on. *)
+  type notification = ... (* The type of the notifications that will be sent *)
+end)
+>>
+
+To declare that you are listening on one piece of data {{{i}}},
+call {{{My_notif.listen i}}}.
+
+To notify all the clients listening on data {{{i}}},
+call {{{My_notif.notify i (fun userid_o -> Lwt.return (Some notif))}}}.
+{{{userid_o}}} is the id of the user who will be notified,
+if he is connected ({{{None}}} otherwise).
+This make possible to customize the notifications.
+Return {{{None}}} if you don't want him to be notified.
+
+For more information, have a look at
+<<a_manual project="tutorial" chapter="tutoreact"|the tutorial
+about client-server reactive applications>>.
+
+
+
+== Without {{{Os_notif}}} (manual implementation)
+
+If you want the user to receive notifications from the server
+(for example: "you have a new message"), first create a channel, and
+register it in an Eliom reference of scope {{{`Client_process}}}:
+<<code language="ocaml"|
+let channel_ref =
+  Eliom_reference.Volatile.eref_from_fun
+    ~scope:Eliom_common.default_process_scope
+    (fun () ->
+       let (s, notify) = Lwt_stream.create () in
+       let c = Eliom_comet.Channel.create s in
+       (c, notify)
+    )
+>>
+
+On client side, listen on this channel. To do that, execute this code
+(on server side) during the service that will start the client process:
+<<code language="ocaml"|
+let (channel, _) = Eliom_reference.Volatile.get channel_ref in
+let _ =
+  [%client
+    (Lwt.async (fun () ->
+       Lwt_stream.iter_s
+       (fun v -> (* do something *))
+       ~%channel)
+    : unit)
+  ]
+in
+...
+>>
+
+And call function {{{notify}}} on the channel (from server side)
+when you want to notify the client.
+
+To get back the {{{notify}}} functions for one user, you may want to
+[[how-to-iterate-on-all-sessions-for-one-user-or-all-tabs|iterate on all client process states]].
+To do that, create a session group for each user
+(see [[how-to-register-session-data|How to register session data]]).
+Here we suppose that the session group name is the user_id, as a string.
+Then iterate on all sessions from this group, and on all client processes
+for each session.
+
+For example:
+
+<<code language="ocaml"|
+
+let notify user_id v =
+  (* We get the session group state for this user: *)
+  let state =
+    Eliom_state.Ext.volatile_data_group_state
+      ~scope:Eliom_common.default_group_scope (Int64.to_string user_id)
+  in
+  (* We iterate on all sessions from the group: *)
+  Eliom_state.Ext.iter_volatile_sub_states
+    ~state
+    (fun state ->
+      (* We iterate on all client process states in the session: *)
+      Eliom_state.Ext.iter_volatile_sub_states
+        ~state
+        (fun state ->
+          let (_, notify) = Eliom_reference.Volatile.Ext.get state channel_ref in
+          notify (Some v)))
+
+>>
+
+//Warning://      If you do not call the iterators during
+      a request or during the initialisation phase of the Eliom module,
+      you must provide the extra parameter {{{?sitedata}}},
+      that you can get by calling {{{Eliom_request_info.get_sitedata}}}
+      during the initialisation phase of the Eliom module.
+
+Have a look at the implementation of {{{Os_notif}}} for more details.
diff --git a/tutos/8.0/manual/how-to-insert-raw-form-elements-not-belonging-to-a-form-towards-a-service.wiki b/tutos/8.0/manual/how-to-insert-raw-form-elements-not-belonging-to-a-form-towards-a-service.wiki
new file mode 100644
index 00000000..83848a48
--- /dev/null
+++ b/tutos/8.0/manual/how-to-insert-raw-form-elements-not-belonging-to-a-form-towards-a-service.wiki
@@ -0,0 +1,20 @@
+=How to insert "raw" form elements (not belonging to a form towards a service)?=
+
+Eliom redefines most forms elements (inputs, textareas, checkboxes, etc.)
+to make possible to check the type of the form w.r.t. the type of the service.
+
+If you don't want that (for example if you want to use it only from a client side program),
+you can use "raw form elements" (that is, basic tyxml elements), using
+module [[wiki("eliom"):api/server/Eliom_content.Html.D.Raw|{{{Eliom_content.Html.D.Raw}}}]]
+(or [[wiki("eliom"):api/server/Eliom_content.Html.F.Raw|{{{Eliom_content.Html.F.Raw}}}]]).
+
+Example:
+
+<<code language='ocaml'|
+{{{
+open Eliom_content.Html.D
+
+Raw.textarea (txt "blah")
+
+}}}
+>>
diff --git a/tutos/8.0/manual/how-to-iterate-on-all-sessions-for-one-user-or-all-tabs.wiki b/tutos/8.0/manual/how-to-iterate-on-all-sessions-for-one-user-or-all-tabs.wiki
new file mode 100644
index 00000000..be9755d0
--- /dev/null
+++ b/tutos/8.0/manual/how-to-iterate-on-all-sessions-for-one-user-or-all-tabs.wiki
@@ -0,0 +1,25 @@
+=How to iterate on all session belonging to the same user, or all tabs?=
+
+You must create a session group for each user, then iterate on all
+the sessions from this group, and possibly on all client processes
+for each session:
+
+<<code language="ocaml"|
+
+  (* We get the session group state for this user: *)
+  let state =
+    Eliom_state.Ext.volatile_data_group_state
+      ~scope:Eliom_common.default_group_scope (Int64.to_string user_id)
+  in
+
+  (* We iterate on all sessions from the group: *)
+  Eliom_state.Ext.iter_volatile_sub_states
+    ~state
+    (fun state ->
+      (* We iterate on all client process states in the session: *)
+      Eliom_state.Ext.iter_volatile_sub_states
+        ~state
+        (fun state ->
+          let a = Eliom_reference.Volatile.Ext.get state my_ref in
+          ...)))
+>>
diff --git a/tutos/8.0/manual/how-to-know-whether-the-browser-window-has-the-focus-or-not.wiki b/tutos/8.0/manual/how-to-know-whether-the-browser-window-has-the-focus-or-not.wiki
new file mode 100644
index 00000000..f8383288
--- /dev/null
+++ b/tutos/8.0/manual/how-to-know-whether-the-browser-window-has-the-focus-or-not.wiki
@@ -0,0 +1,16 @@
+=How to know whether the browser window has the focus or not?=
+
+Example:
+
+<<code language="ocaml"|
+
+let has_focus = ref true
+
+let _ =
+  let open Lwt_js_events in
+  async (fun () -> focuses (Js.Unsafe.coerce (Dom_html.window))
+    (fun _ _ -> has_focus := true; Lwt.return ()));
+  async (fun () -> blurs (Js.Unsafe.coerce (Dom_html.window))
+    (fun _ _ -> has_focus := false; Lwt.return ()));
+
+>>
diff --git a/tutos/8.0/manual/how-to-make-hello-world-in-ocsigen.wiki b/tutos/8.0/manual/how-to-make-hello-world-in-ocsigen.wiki
new file mode 100644
index 00000000..1522d87e
--- /dev/null
+++ b/tutos/8.0/manual/how-to-make-hello-world-in-ocsigen.wiki
@@ -0,0 +1,56 @@
+=How to make a "hello world" in Ocsigen?=
+
+Here it is! The famous "**Hello World**" for a client/server Eliom application:
+
+===
+
+<<code language="ocaml"|
+open Eliom_content
+open Html.D
+open Eliom_parameter
+
+module Example =
+  Eliom_registration.App
+    (struct
+      let application_name = "example"
+     end)
+
+let main =
+  Eliom_service.create
+    ~path:(Eliom_service.Path [])
+    ~meth:(Eliom_service.Get unit)
+    ()
+
+let _ =
+
+  Example.register
+    ~service:main
+    (fun () () ->
+      Lwt.return
+	(html
+	   (head (title (txt "Hello World of Ocsigen")) [])
+	   (body [h1 [txt "Hello World!"];
+		  p [txt "Welcome to my first Ocsigen website."]])))
+
+>>
+
+===
+
+* To //understand// this code, have a look at
+[[wiki:manual/how-does-a-page-s-source-code-look|How does a page's source code look?]]
+* Or directly continue by compiling this code:
+[[wiki:manual/how-to-compile-my-ocsigen-pages|How to compile my Ocsigen pages?]]
+
+<<|
+=== Download full code
+
+//Warning: This third party code may be outdated. Please notify the author is something is broken, or do a pull request on github.//
+
+* [[https://github.com/db0company/Ocsigen-Quick-Howto/blob/master/page/example.eliom|Read the full code]]
+* [[https://github.com/db0company/Ocsigen-Quick-Howto|Download and try this example]]
+>>
+
+=== Links
+
+* [[wiki:manual/application|Tutorial to write a client/server application]]
+* [[wiki:manual/interaction|Tutorial to write a server side web site]]
diff --git a/tutos/8.0/manual/how-to-make-page-a-skeleton.wiki b/tutos/8.0/manual/how-to-make-page-a-skeleton.wiki
new file mode 100644
index 00000000..66904bcc
--- /dev/null
+++ b/tutos/8.0/manual/how-to-make-page-a-skeleton.wiki
@@ -0,0 +1,46 @@
+=How to make a page skeleton?=
+
+=== The same header for all your pages
+
+When your site will grow, you will have several different services for pages which will often contain the same header informations.
+
+A great solutions to avoid code copy-pasting of these recurrent informations are to make a page skeleton function:
+
+<<code language="ocaml"|
+let skeleton body_content =
+  Lwt.return
+    (html
+       (head (title (txt "Page Title")) [])
+       (body body_content)))
+>>
+
+So when you define your pages, you just call this skeleton with the content of the page as an argument:
+
+<<code language="ocaml"|
+  Example.register ~service:main
+    (fun () () -> skeleton [p [txt "Hello World!"]])
+>>
+
+
+This method can also be adapted to add elements on all your pages, like a header, a footer and a menu.
+
+Module <<a_api project="eliom"  subproject="server"| module Eliom_tools >> has a predefined function
+for this:
+
+<<code language="ocaml"|
+Eliom_tools.D.html
+  ~title:"ex"
+  ~css:[["css"; "ex.css"]]
+  (body [h2 [txt "Welcome to Ocsigen!"]]
+>>
+
+<<|The following example is more complete.
+
+
+=== Download full code
+
+//Warning: This third party code may be outdated. Please notify the author is something is broken, or do a pull request on github.//
+
+* [[https://github.com/db0company/Ocsigen-Quick-Howto/blob/master/skeleton/example.eliom|Read the full code]]
+* [[https://github.com/db0company/Ocsigen-Quick-Howto|Download and try this example]]
+>>
\ No newline at end of file
diff --git a/tutos/8.0/manual/how-to-make-responsive-css.wiki b/tutos/8.0/manual/how-to-make-responsive-css.wiki
new file mode 100644
index 00000000..6e0afe41
--- /dev/null
+++ b/tutos/8.0/manual/how-to-make-responsive-css.wiki
@@ -0,0 +1,13 @@
+=How to make reponsive CSS with ocsigen?=
+
+The best way to do that is to make one general css sheet plus three css sheets, small, medium and large screen using media queries, a feature introduced in CSS3.
+
+Write theses lines in your css sheets:
+
+<<code language="css"|
+@media only screen and (max-device-width: 480px)
+@media only screen and (min-device-width: 481px) and (max-device-width: 768px)
+@media only screen and (min-device-width: 769px)
+>>
+
+You can find more informations about making responsive websites with media queries on [[http://www.w3schools.com/css/css_rwd_mediaqueries.asp|W3schools.com]]
diff --git a/tutos/8.0/manual/how-to-make-the-client-side-program-get-an-html-element-from-the-server-and-insert-it-in-the-page.wiki b/tutos/8.0/manual/how-to-make-the-client-side-program-get-an-html-element-from-the-server-and-insert-it-in-the-page.wiki
new file mode 100644
index 00000000..0a6bd41b
--- /dev/null
+++ b/tutos/8.0/manual/how-to-make-the-client-side-program-get-an-html-element-from-the-server-and-insert-it-in-the-page.wiki
@@ -0,0 +1,30 @@
+=How to make the client side program get an HTML element from the server and insert it in the page?=
+
+A very convenient way to do that is to use RPCs :
+
+<<code language="ocaml" class="shared"|
+let%rpc get_mydiv (() : unit) : _ Lwt.t = div [ ... ]
+>>
+<<code language="ocaml" class="client"|
+[%client
+  ...
+  let%lwt mydiv = get_mydiv () in
+  Dom.appendChild parent (To_dom.of_element mydiv)
+  ...
+]
+>>
+
+Server functions take exactly one parameter.
+
+RPCs are just syntactic sugar for pathless services
+returning OCaml values.
+
+The type of the function parameter must have been declared with the
+JSON module of {{{ppx_deriving}}} (which needs to be manually
+installed). This enables server-side data validation.
+
+example:
+
+<<code language="ocaml"|
+type t = int * string [@@deriving json]
+>>
diff --git a/tutos/8.0/manual/how-to-register-a-service-that-decides-itself-what-to-send.wiki b/tutos/8.0/manual/how-to-register-a-service-that-decides-itself-what-to-send.wiki
new file mode 100644
index 00000000..88547879
--- /dev/null
+++ b/tutos/8.0/manual/how-to-register-a-service-that-decides-itself-what-to-send.wiki
@@ -0,0 +1,21 @@
+=How to register a service that decides itself what to send?=
+
+Use <<a_api project="eliom"| module Eliom_registration.Any >>.
+
+In the following example, we send an Html page or a redirection:
+
+<<code language="ocaml"|
+let send_any =
+  Eliom_registration.Any.create
+    ~path:(Eliom_service.Path ["any"])
+    ~meth:(Eliom_service.Get (string "s"))
+   (fun s () ->
+     if s = "toto"
+     then
+       Eliom_registration.Html.send
+         (html
+            (head (title (txt "")) [])
+            (body [p [txt "Hello."]]))
+     else
+       Eliom_registration.Redirection.send other_service)
+>>
diff --git a/tutos/8.0/manual/how-to-register-session-data.wiki b/tutos/8.0/manual/how-to-register-session-data.wiki
new file mode 100644
index 00000000..1f19ed9d
--- /dev/null
+++ b/tutos/8.0/manual/how-to-register-session-data.wiki
@@ -0,0 +1,74 @@
+=How to register session data?=
+
+It is very easy to register session data using //Eliom references//.
+Just create an Eliom reference of //scope// session and its value
+will be different for each session (one session = one browser process).
+
+But most of the time, what we want is to store data for one user,
+not for one browser instance. To do that, we group all the sessions
+for one user together, by creating a group of sessions.
+The name of the group may be for example the user id.
+
+To create a session group, open the session by doing something like:
+<<code language="ocaml"|
+let open_session login password =
+  let%lwt b = check_password login password in
+  if b
+  then Eliom_state.set_volatile_data_session_group
+      ~scope:Eliom_common.default_session_scope
+      (Int64.to_string (get_userid login))
+  else ...
+
+>>
+
+If you want to store user data,
+just create a global Eliom reference of scope group:
+<<code language="ocaml"|
+
+let myref =
+  Eliom_reference.Volatile.eref
+    ~scope:Eliom_common.default_group_scope
+    None
+
+>>
+
+And during a request, set this reference:
+<<code language="ocaml"|
+
+  ...
+  Eliom_reference.Volatile.set myref (Some "user data")
+
+>>
+
+The value of this reference is different for each user:
+<<code language="ocaml"|
+
+  Eliom_reference.Volatile.get myref
+
+>>
+
+It is possible to create //persistent// Eliom references (see module
+<<a_api project="eliom" subproject="server"|module Eliom_reference>>).
+
+==Other scopes==
+If you want to store server side data for one browser (one session),
+use scope {{{Eliom_common.default_session_scope}}}.
+
+If you want to store server side data for one tab of your browser (one client process),
+use scope {{{Eliom_common.default_process_scope}}} (available only if you
+have a client-server Eliom application).
+
+If you want to store server side data during one request,
+use scope {{{Eliom_common.request_scope}}}.
+
+==Persistent references==
+
+Module
+<<a_api project="eliom" subproject="server"|module Eliom_reference>>
+also defines an interface for persistent references, that will survive
+if you restart the server.
+
+==Links
+
+* <<a_manual project="eliom" chapter="server-state"|More information on session data>>
+* module <<a_api project="eliom" subproject="server"|module Eliom_reference>>
diff --git a/tutos/8.0/manual/how-to-send-a-file-to-server-without-stopping-the-client-process.wiki b/tutos/8.0/manual/how-to-send-a-file-to-server-without-stopping-the-client-process.wiki
new file mode 100644
index 00000000..1413a46e
--- /dev/null
+++ b/tutos/8.0/manual/how-to-send-a-file-to-server-without-stopping-the-client-process.wiki
@@ -0,0 +1,48 @@
+=How to send a file to the server without stopping the client process?=
+
+This requires Eliom ≥ 3.1.
+
+Due to security reasons, browsers have limitations on sending files.
+But if the file is chosen by the user through an input file element,
+there is a way to send it to the server. You can't use the {{{server_function}}}
+or {{{let%rpc}}} syntax for this, but you can use
+{{{Eliom_client.call_caml_service}}}.
+
+Example:
+<<code language="ocaml"|
+
+[%%client
+open Js_of_ocaml
+open Js_of_ocaml_lwt
+open Eliom_content.Html
+open Eliom_content.Html.F]
+
+let pic_service =
+  Eliom_service.create_ocaml ~name:"upload_pic" ~path:Eliom_service.No_path
+    ~meth:(Eliom_service.Post (Eliom_parameter.unit, Eliom_parameter.file "f"))
+    ()
+
+let () =
+  Eliom_registration.Ocaml.register ~service:pic_service (fun _ _ ->
+      (* get the file ... *)
+      Lwt.return_unit)
+
+let%client upload_pic_form () =
+  let file = D.Raw.input ~a:[a_input_type `File] () in
+  let submit_elt = D.Raw.input ~a:[a_input_type `Submit; a_value "Send"] () in
+  (let open Lwt_js_events in
+  async (fun () ->
+      clicks (To_dom.of_input submit_elt) (fun _ _ ->
+          Js.Optdef.case
+            (To_dom.of_input file)##.files
+            Lwt.return
+            (fun files ->
+              Js.Opt.case
+                files ## (item 0)
+                Lwt.return
+                (fun file ->
+                  Eliom_client.call_ocaml_service ~service:~%pic_service ()
+                    file)))));
+  [txt "Upload a picture:"; file; submit_elt]
+
+>>
diff --git a/tutos/8.0/manual/how-to-send-file-download.wiki b/tutos/8.0/manual/how-to-send-file-download.wiki
new file mode 100644
index 00000000..d7df579d
--- /dev/null
+++ b/tutos/8.0/manual/how-to-send-file-download.wiki
@@ -0,0 +1,7 @@
+=How to send a file (download)?=
+
+To serve file, you can use Ocsigen Server's module staticmod.
+But it is also possible to ask Eliom to send files using module
+<<a_api project="eliom" subproject="server"|module Eliom_registration.File>>,
+for example if you want Eliom to perform some privacy checks before sending,
+or if the answer is not always a file.
\ No newline at end of file
diff --git a/tutos/8.0/manual/how-to-send-file-upload.wiki b/tutos/8.0/manual/how-to-send-file-upload.wiki
new file mode 100644
index 00000000..f4e57fca
--- /dev/null
+++ b/tutos/8.0/manual/how-to-send-file-upload.wiki
@@ -0,0 +1,63 @@
+=How to send a file (upload)?=
+
+To upload a file, use {{{Eliom_parameter.file}}} as service parameter type.
+
+Ocsigen server will save the file at a temporary location and keep it
+there during the request.  Then the file will be removed.  You must
+link it somewhere else on the disk yourself if you want to keep it.
+
+Be careful also to set the right option in Ocsigen server's configuration file.
+For example:
+<<code|
+<ocsigen>
+  <server>
+    <uploaddir>/var/www/tmp</uploaddir>
+    <maxuploadfilesize>2MB</maxuploadfilesize>
+    <maxrequestbodysize>100MB</maxrequestbodysize>
+  </server>
+</ocsigen>
+>>
+
+Example with Eliom_content.Html.D module opened:
+<<code language="ocaml"|
+
+let upload = Eliom_service.create
+    ~path:(Eliom_service.Path ["upload"])
+    ~meth:(Eliom_service.Get Eliom_parameter.unit)
+    ()
+
+let upload2 =
+  Eliom_registration.Html.create
+    ~path:(Eliom_service.Path ["upload"])
+    ~meth:(Eliom_service.Post
+             (Eliom_parameter.unit,
+              Eliom_parameter.file "file"))
+    (fun () file ->
+      let newname = "/var/www/upload/thefile" in
+      (try
+        Unix.unlink newname;
+      with _ -> ());
+      let%lwt () =
+        Lwt_unix.link (Eliom_request_info.get_tmp_filename file) newname
+      in
+      Lwt.return
+        (html
+           (head (title (txt "Upload")) [])
+           (body [h1 [txt "ok"]])))
+
+
+let uploadform =
+  Eliom_registration.Html.register ~service:upload
+    (fun () () ->
+      let f =
+        (Form.post_form ~service:upload2
+           (fun file ->
+             [p [Form.file_input ~name:file ();
+                 br ();
+                 Form.input ~input_type:`Submit ~value:"Send" Form.string
+               ]]) ()) in
+      Lwt.return
+        (html
+           (head (title (txt "form")) [])
+           (body [f])))
+>>
diff --git a/tutos/8.0/manual/how-to-set-and-id-classes-or-other-attributes-to-html-elements.wiki b/tutos/8.0/manual/how-to-set-and-id-classes-or-other-attributes-to-html-elements.wiki
new file mode 100644
index 00000000..7bad37ac
--- /dev/null
+++ b/tutos/8.0/manual/how-to-set-and-id-classes-or-other-attributes-to-html-elements.wiki
@@ -0,0 +1,67 @@
+=How to set and id, classes or other attributes to HTML elements?=
+
+Mandatory element attributes are given as OCaml named parameters to
+constructions function.
+
+Optional element attributes are added using the optional OCaml parameter "**?a**" which is more or less available for every HTML5 elements. This parameter is taking a list of attributes compatible with the element.
+
+<<code language="ocaml" |
+  div ~a:[a_class ["red";"shadow"];
+        a_id "the_div";
+        a_onclick {{ fun ev -> Dom_html.window##alert(Js.string "hello") }}]
+    [txt "I'm a div with two classes to describe me (red and shadow), ";
+     txt "an id to make me unique and an action when you click me."]
+>>
+
+=== Id
+The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
+
+The id attribute is mostly used to set a style in a style sheet for a particular element, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id. With Eliom client-server apps, you do usually not need to set ids manually for that purpose: just use injections ({{{%v}}}) to refer to a node {{{v}}} created on server side.
+
+Attribute "id" is created by function {{{a_id}}}, taking the value of the attribute as parameter:
+<<code language="ocaml" |~a:[a_id "identifier"]>>
+
+=== Classes
+The class attribute specifies one or more classnames for an element.
+
+The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class.
+
+An element can have several classes. Class attribute is
+generated by function {{{a_class}}}, that takes a list of strings.
+<<code language="ocaml" |~a:[a_class ["blue_button"; "small"]]>>
+
+=== Style
+
+The style attribute specifies an inline style for an element. The style attribute will override any style set globally, e.g. styles specified in the header of the page.
+
+Using this attribute to stylish elements is not a good practice.
+You should rather use
+[[wiki:manual/how-to-add-css-stylesheet|an external CSS file]].
+
+Its parameter is a string.
+<<code language="ocaml" |~a:[a_style "color: pink; padding: 10px;"]>>
+
+=== Title
+
+The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.
+
+Its parameter is a string.
+<<code language="ocaml" |~a:[a_title "Lorem ipsum dolor sit amet."]>>
+
+=== Events
+
+Some attributes allow you to do something when the user do an action. They are many available actions since HTML5.
+
+Its argument is an Eliom event handler, that is a client-side function
+taking the JS event as parameter:
+<<code language="ocaml" |~a:[a_onclick {{ fun ev -> Dom_html.window##alert(Js.string "hello") }}]>>
+
+However, we recommend to use <<a_api project="js_of_ocaml" subproject="js_of_ocaml-lwt"|module Js_of_ocaml_lwt.Lwt_js_events>> rather than these elements to set event handlers.
+
+
+=== Links
+
+* Type <<a_api project="tyxml"|type Html_types.base_attrib>> (attributes available for every element)
+* signature <<a_api project="tyxml"|module Html_sigs.T>> (Element attributes)
+* [[http://www.w3schools.com/html/default.asp|W3Schools HTML5 reference]]
+* [[http://www.w3schools.com/html5/html5_ref_eventattributes.asp|Events attributes]]
diff --git a/tutos/8.0/manual/how-to-stop-default-behaviour-of-events.wiki b/tutos/8.0/manual/how-to-stop-default-behaviour-of-events.wiki
new file mode 100644
index 00000000..11541d96
--- /dev/null
+++ b/tutos/8.0/manual/how-to-stop-default-behaviour-of-events.wiki
@@ -0,0 +1,21 @@
+=How to stop default behaviour of events?=
+
+Example:
+
+<<code language="ocaml"|
+
+(** Disable Js event with stopping propagation during capture phase **)
+let disable_event event html_elt =
+  Lwt.async (fun () ->
+   Lwt_js_events.seq_loop
+     (Lwt_js_events.make_event event) ~use_capture:true html_elt
+     (fun ev _ -> Dom.preventDefault ev; Lwt.return ())))
+
+
+disable_event Dom_html.Event.dragstart Dom_html.document
+>>
+
+* event is a Dom_html.Event\\
+* html_elt is the target
+
+More details in documentation: [[site:js_of_ocaml/api/Dom#VALpreventDefault|Dom. preventDefault]]
diff --git a/tutos/8.0/manual/how-to-use-get-parameters-or-parameters-in-the-url.wiki b/tutos/8.0/manual/how-to-use-get-parameters-or-parameters-in-the-url.wiki
new file mode 100644
index 00000000..609916a9
--- /dev/null
+++ b/tutos/8.0/manual/how-to-use-get-parameters-or-parameters-in-the-url.wiki
@@ -0,0 +1,88 @@
+=How to use GET parameters (parameters in the URL)?
+
+Pages are generated by services.
+
+Funcrions to create services using GET HTTP method take
+two mandatory parameters: {{{~path}}} and {{{~get_params}}}.
+
+=== path
+
+This argument is a **list of string**, corresponding to the URL where your page service can be found.
+
+For example, if you want your page to be accessed via this URL:
+<<code language='ocaml'|http://website.com/a/b/c>>
+You must provide this path:
+<<code language='ocaml'|    ~path:["a";"b";"c"]>>
+
+This parameter can also be an **empty list**. It means that the service page will be accessed via this URL:
+<<code|http://website.com/>>
+
+=== get_params
+
+Eliom chooses the service automatically w.r.t. this path and parameter
+given (among other criteria).
+It decodes parameters automatically and checks their types.
+
+Description of parameters (names and types) is done using module
+<<a_api project="eliom" subproject="server"|module Eliom_parameter>>.
+We recommend to open this module (at the beginning of your file, or locally).
+
+==== Syntax for several parameters
+
+* **No parameter**
+<<code language='ocaml'|~get_params:unit>>
+
+* **One parameter**
+<<code language='ocaml'|~get_params:(int "id")>>
+
+* **More parameters**
+<<code language='ocaml'|~get_params:(string "name" ** int "age" ** bool "graduate")>>
+
+==== Types of parameters
+
+* **Common types**: [[https://github.com/db0company/Ocsigen-Quick-Howto/blob/master/parameters/example.eliom#L121|string]], [[https://github.com/db0company/Ocsigen-Quick-Howto/blob/master/parameters/example.eliom#L122|int]], [[https://github.com/db0company/Ocsigen-Quick-Howto/blob/master/parameters/example.eliom#L123|int32]], [[https://github.com/db0company/Ocsigen-Quick-Howto/blob/master/parameters/example.eliom#L124|float]], [[https://github.com/db0company/Ocsigen-Quick-Howto/blob/master/parameters/example.eliom#L125|bool]]
+* **Some other types**: [[https://github.com/db0company/Ocsigen-Quick-Howto/blob/master/parameters/example.eliom#L126|optional values]], [[https://github.com/db0company/Ocsigen-Quick-Howto/blob/master/parameters/example.eliom#L158|any parameter]], [[https://github.com/db0company/Ocsigen-Quick-Howto/blob/master/parameters/example.eliom#L187|list]], [[https://github.com/db0company/Ocsigen-Quick-Howto/blob/master/parameters/example.eliom#L211|your own type]].
+
+* See more information on parameters in <<a_manual project="eliom" chapter="server-params"|Eliom manual>> and API documentation of module <<a_api project="eliom" subproject="server"|module Eliom_parameter>>.
+
+==== Get these parameters
+
+On service registration, parameters can be retrieved as a parameter of the function:
+<<code language='ocaml'|
+Example.register ~service:the_service
+    (fun parameters () -> ...)
+>>
+
+* **No parameter**
+<<code language='ocaml'|    (fun () () -> ...)>>
+
+* **One parameter**
+<<code language='ocaml'|    (fun a () -> ...)>>
+
+* **Several parameters**
+
+Operator {{{**}}} is left associative:
+<<code language='ocaml'|    (fun (a, (b, (c, d)))) () -> ...)>>
+
+=== Parameters in the path
+
+Sometimes you may want to take parameters from the path,
+for example to improve readability of URLs. E.g. {{{http://blah.com/archive/2014/2/}}} or {{{http://blah.com/user/toto/}}}.
+
+To do that, add a parameter of type **suffix** in **get_params**:
+<<code|~get_params:(suffix (string "username"))>>
+
+
+=== Download full code
+
+//Warning: This third party code may be outdated. Please notify the author is something is broken, or do a pull request on github.//
+
+* [[https://github.com/db0company/Ocsigen-Quick-Howto/blob/master/parameters/example.eliom|Read the full code]]
+* [[https://github.com/db0company/Ocsigen-Quick-Howto|Download and try this example (parameters)]]
+
+=== Links
+
+* Manual: <<a_manual project="eliom" chapter="server-params"|Parameters>>
+* Manual: <<a_manual project="eliom" chapter="server-services"|Services>>
+* API: <<a_api project="eliom" subproject="server"|module Eliom_parameter>>
+* API: <<a_api project="eliom" subproject="server"|module Eliom_service>>
diff --git a/tutos/8.0/manual/how-to-write-a-json-service.wiki b/tutos/8.0/manual/how-to-write-a-json-service.wiki
new file mode 100644
index 00000000..87768dd6
--- /dev/null
+++ b/tutos/8.0/manual/how-to-write-a-json-service.wiki
@@ -0,0 +1,25 @@
+=How to write a JSON service?=
+
+*If you want to communicate with a client side Eliom program, you do not need to serialize yourself your data to JSON. Serialization/Deserialization of any OCaml type is done automatically by Eliom. Just use OCaml services (or, simpler: server functions and call the function from your OCaml client side program).
+*If you want to use your own JSON format, you need to have your own serialisation function to JSON (or for example to use some OCaml library like [[http://mjambon.com/yojson.html|yojson]] to generate JSON). In that case, you can register your service using {{{Eliom_registration.String}}} instead of {{{Eliom_registration.Html}}} (see example below). The handler function must return the JSON value as a string, and a the content-type.
+*It is even possible to define yourself your own registration module, to be used instead of {{{Eliom_registration.String}}}. Thus, you can use an OCaml representation of the JSON value (and you don't call the serializer yourself). Have a look on how modules like {{{Eliom_registration.String}}} are implemented to know how to do that.
+
+<<code language="ocaml"|
+
+let my_json_service =
+  Eliom_service.create
+    ~path:(Eliom_service.Path ["my_json_service"])
+    ~meth:(Eliom_service.Get Eliom_parameter.unit)
+    ()
+
+let _ =
+  Eliom_registration.String.register
+    ~service:my_json_service
+    (fun () () ->
+      Lwt.return ("{text:'something'}", "application/json"))
+
+>>
+
+**Comments:** \\
+If you want to get result from a Database, it could already be in JSON format. \\
+Anyway, you probably do not need to pretty-print JSON yourself. \\
diff --git a/tutos/8.0/manual/how-to-write-forms.wiki b/tutos/8.0/manual/how-to-write-forms.wiki
new file mode 100644
index 00000000..96f4cb83
--- /dev/null
+++ b/tutos/8.0/manual/how-to-write-forms.wiki
@@ -0,0 +1,110 @@
+=How to write forms?=
+
+=== To write an HTML form towards an Eliom service
+
+Just as we do for links, we provide form-building functions that call
+Eliom services in a safe manner. These functions are provided in the
+module
+<<a_api project="eliom" subproject="server" | module Eliom_content.Html.D.Form >> (and
+<<a_api project="eliom" subproject="server" | module Eliom_content.Html.F.Form >>).
+The functions
+<<a_api project="eliom" subproject="server" | val Eliom_content.Html.D.Form.get_form >> and
+<<a_api project="eliom" subproject="server" | val Eliom_content.Html.D.Form.post_form >>
+accept a function (named {{{create_form}}} in our example below)
+which is responsible for generating the content from
+appropriately-typed parameter names.
+
+Here a complete example.
+
+<<code language="ocaml"|
+[%%shared
+  open Eliom_parameter
+  open Eliom_content.Html.D
+]
+(* Create the form with some inputs *)
+let%server create_form =
+  (fun (number_name, (number2_name, string_name)) ->
+    [p [txt "Write an int: ";
+        Form.input
+          ~input_type:`Text ~name:number_name
+          Form.int;
+        txt "Write another int: ";
+        Form.input
+          ~input_type:`Text ~name:number2_name
+          Form.int;
+        txt "Write a string: ";
+        Form.input ~input_type:`Text ~name:string_name Form.string;
+        Form.input ~input_type:`Submit ~value:"Click" Form.string]])
+
+let%server form_result_service = Eliom_service.create
+  ~path:(Eliom_service.Path ["form-result"])
+  ~meth:(Eliom_service.Get ((int "number_name") ** ((int "number2_name") ** (string "string_name"))))
+  ()
+
+let%server form_result_handler =
+  (fun (number_name, (number2_name, string_name)) () ->
+     Lwt.return (
+       (html
+          (head (title (txt "")) [])
+          (body [
+             p [
+               txt "First number: ";
+               txt (string_of_int number_name);
+             ];
+             p [
+               txt "Second number: ";
+               txt (string_of_int number2_name);
+             ];
+             p [
+               txt "String: ";
+               txt string_name
+             ]
+           ]))))
+
+let%server form_service = Eliom_service.create
+  ~path:(Eliom_service.Path ["form"])
+  ~meth:(Eliom_service.Get unit)
+  ()
+
+let%server form_handler =
+  (fun () () ->
+     let form = Form.get_form ~service:form_result_service create_form in
+     Lwt.return
+       (html
+         (head (title (txt "Form example")) [])
+         (body [form])))
+
+let%server () =
+  Eliom_registration.Html.register ~service:form_result_service form_result_handler;
+  Eliom_registration.Html.register ~service:form_service form_handler
+>>
+
+As shown in the example,
+<<a_api project="eliom" subproject="server" | module Eliom_content.Html.D.Form >>
+provides functions for generating the various widgets, e.g.,
+<<a_api project="eliom" subproject="server" | val Eliom_content.Html.D.Form.input >>.
+These functions need to be called with a "type" argument (e.g.,
+<<a_api project="eliom" subproject="server" | val Eliom_content.Html.D.Form.int >>)
+that matches the type of the corresponding parameter name.
+
+POST forms may also take get parameters, as last argument of function
+{{{post_form}}}:
+
+<<code language="ocaml"|
+Eliom_content.Html.D.Form.post_form
+  my_service_with_get_and_post
+  (fun my_string ->
+    p [txt "Write a string: ";
+       Form.input ~input_type:`Text ~name:my_string Form.string])
+  222
+>>
+
+=== Raw forms
+
+There is also a raw interface to write basic forms without Eliom,
+using standard tyxml constructors.
+
+Use module [[wiki("eliom"):api/server/Eliom_content.Html.D.Raw|Eliom_content.Html.D.Raw]].
+
+===Links
+* [[wiki:manual/how-to-add-a-select-or-other-form-element|How to write a select (or other form element)?]]
diff --git a/tutos/8.0/manual/how-to-write-titles-and-paragraphs.wiki b/tutos/8.0/manual/how-to-write-titles-and-paragraphs.wiki
new file mode 100644
index 00000000..b056b7c0
--- /dev/null
+++ b/tutos/8.0/manual/how-to-write-titles-and-paragraphs.wiki
@@ -0,0 +1,34 @@
+=How to write titles and paragrahs?=
+
+#### Titles
+
+<<code language='ocaml'|
+h3 [txt "Hello world"]
+>>
+
+There are 6 types of titles: h1, h2, h3, h4, h5 and h6. h1 is the largest and h6 is the smallest.
+
+#### Pagragraph
+
+<<code language='ocaml'|
+p [txt "Some text, blah blah blah"]
+>>
+
+**Required parameter**: list containing other elements (content: <<a_api project="tyxml"|type Html_types.flow5>> elements).
+
+**Optional parameter** for attributes "a" ([[wiki:manual/how-to-set-and-id-classes-or-other-attributes-to-html-elements|How to set and id, classes or other attributes to HTML elements?]]).
+
+=== Download full code
+
+//Warning: This third party code may be outdated. Please notify the author is something is broken, or do a pull request on github.//
+
+* [[https://github.com/db0company/Ocsigen-Quick-Howto/blob/master/elements/example.eliom|Read the full code]]
+* [[https://github.com/db0company/Ocsigen-Quick-Howto|Download and try this example]]
+
+=== Links
+
+* Modules <<a_api project="eliom" subproject="server"|module Eliom_content.Html.D>> and
+  <<a_api project="eliom" subproject="server"|module Eliom_content.Html.F>>
+  (HTML5 Elements)
+* The <<a_api project="tyxml"|val Html_sigs.T.h1>> element
+* signature <<a_api project="tyxml"|module Html_sigs.T>> (Element attributes)
diff --git a/tutos/8.0/manual/html.wiki b/tutos/8.0/manual/html.wiki
new file mode 100644
index 00000000..758d8efd
--- /dev/null
+++ b/tutos/8.0/manual/html.wiki
@@ -0,0 +1,157 @@
+<<header| = HTML in 5 minutes >>
+
+The Tyxml library makes it possible to type-check HTML pages.
+This means that your Ocsigen program will never generate pages
+which do not follow the recommendations from the W3C.
+For example a program that could generate a page with a paragraph
+inside another paragraph will be rejected at compile time.
+
+== Typed HTML
+
+=== Tags
+
+Tyxml (or modules obtained by applying Tyxml functor,
+like {{{Eliom_content.Html.D}}}) defines a contructor function
+for each HTML tag, and for each attribute.
+
+Example:
+
+<<code language="ocaml"|
+   html
+     (head (title (txt "Hello")) [])
+     (body [ h1 [txt "Hello"] ;
+             p [txt "Blah"] ])
+>>
+
+As tag {{{<html>}}} contains a tag {{{<head>}}} and {{{<body>}}},
+function {{{html}}} takes two parameters:
+
+<<code language="ocaml"|
+val html : [`Head] elt -> [`Body] elt -> [`Html] elt
+>>
+
+The only way to create a value of type {{{[`Head] elt}}} is to use
+function {{{head}}},
+and the only way to create a value of type {{{[`Body] elt}}} is to use
+function {{{body}}}.
+
+As a {{{<title>}}} tag is mandatory inside {{{<head>}}},
+function {{{head}}} takes a {{{[`Title] elt}}} as first argument
+(that can be created using function {{{title}}}),
+then the list of other children.
+
+Function {{{txt}}} is used to include raw text.
+
+=== Error messages
+
+If you write an invalid page, for example:
+<<code language="ocaml"|
+(html
+   (head (title (txt "")) [txt ""])
+   (body [txt "Hallo"]))
+>>
+
+You will get an error message similar to the following, referring to
+the end of line 2:
+
+{{{
+Error: This expression has type ([> `TXT ] as 'a) Html.elt
+       but an expression was expected of type
+         Html_types.head_content_fun Html.elt
+       Type 'a is not compatible with type Html_types.head_content_fun =
+           [ `Base
+           | `Command
+           | `Link
+           | `Meta
+           | `Noscript of [ `Link | `Meta | `Style ]
+           | `Script
+           | `Style ]
+       The second variant type does not allow tag(s) `TXT
+}}}
+
+where <<a_api project="tyxml" | type Html_types.head_content_fun >>
+is the type of content allowed inside {{{<head>}}} ({{{<base>}}},
+{{{<command>}}}, {{{<link>}}}, {{{<meta>}}}, etc.). Notice that
+{{{`TXT}}} (i.e. raw text) is not included in this polymorphic
+variant type, which means that {{{<head>}}} cannot contain raw text.
+
+=== Attributes
+
+Attributes are given to functions using optional argument {{{?a}}}.
+
+Example:
+<<code language="ocaml"|
+div ~a:[a_id "the_id"; a_class ["firstclass"; "secondclass"]]
+  [ txt "blah" ]
+>>
+
+== OCaml node and DOM nodes
+
+=== Conversions
+
+Tyxml builds OCaml nodes. If you are using it server side,
+they are serialized as an XML text before being sent to the browser.
+On client side, if you want to get the DOM node corresponding to
+an OCaml node, use functions from module {{{Eliom_content.Html.To_dom}}},
+for example {{{Eliom_content.Html.To_dom.of_element}}},
+or {{{Eliom_content.Html.To_dom.of_input}}},
+{{{Eliom_content.Html.To_dom.of_textarea}}}, etc.
+
+If the node has been created with {{{Eliom_content.Html.F}}}
+(functional nodes),
+a new DOM node will be created every time you call such a conversion
+function.
+
+If the node has been created with {{{Eliom_content.Html.D}}},
+the conversion function will return the exact DOM node that exists
+in the page (and always the same one). If this "D" node is created
+server-side, Eliom will automatically add a identifier in the HTML
+page to be able to find it back.
+
+Example:
+<<code language="ocaml"|
+[%%shared
+  open Eliom_content.Html
+]
+
+let%server create_widget () =
+  let d = D.div [ ... ] in
+  ignore [%client
+    Lwt.async (fun () ->
+      Lwt_js_events.clicks (To_dom.of_element ~%d) (fun _ _ -> ... )) ];
+  d
+>>
+
+Here, {{{d}}} must be a "D" node, as I want to bind click events on
+the actual node (that is already in the page), not create a new one.
+
+Remember to use "D" nodes if you want to use it in a injection
+({{{~%d}}}). If you don't to bother about "D" or "F" nodes, use "D"
+nodes by default (even if it will generate too much identifiers in the page).
+But remember that, the DOM semantics implies that "D" nodes cannot be
+inserted twice in a page.
+
+
+=== Manip
+
+Module
+<<a_api project="eliom" subproject="client"| module Eliom_content.Html.Manip >>
+makes it possible to manipulate OCaml nodes without conversions
+(add them in a page, replace a node, add as child of another node,
+add a class, etc.).
+
+=== Reactive nodes
+
+Module
+<<a_api project="eliom" subproject="client"| module Eliom_content.Html.R >>
+makes it possible to create reactive nodes, that is, nodes that will
+be updated automatically when the data on which they depend change.
+
+It is based on module [[http://erratique.ch/software/react/doc/React|React]],
+which implements functional reactive programming for OCaml.
+
+== More documentation
+
+Have a look at <<a_manual project="tyxml" chapter="intro"|Tyxml's manual>>
+and <<a_manual project="eliom" chapter="clientserver-html"|Eliom's manual>>
+for more documentation about HTML manipulation in OCaml.
diff --git a/tutos/8.0/manual/interaction.wiki b/tutos/8.0/manual/interaction.wiki
new file mode 100644
index 00000000..103554bd
--- /dev/null
+++ b/tutos/8.0/manual/interaction.wiki
@@ -0,0 +1,1226 @@
+=Implementing Web Interaction Using Eliom=
+
+//The code of this tutorial has been tested with Eliom 6.0.// \\
+
+<<|outline target="documentation">>
+
+This chapter of the tutorial explains how to create a small web site
+with several pages, users, sessions, and other elements of classical
+web development.  Then, in
+<<a_manual project="tuto" chapter="misc" |another tutorial>>, we will incorporate the
+features of this site into our Graffiti application, to
+demonstrate that we can combine this kind of interaction with client-side
+programs.
+
+We assume you have read at least the first section of the previous
+chapter, which explained how to create a service and constuct valid
+HTML pages.
+
+We will create a simple web site with one main page and a page for
+each user (assuming we have several users already created).  Then we
+will add a login/connection form. We will also add a registration
+form, in order to learn how to create //dynamically// new services,
+and why it is very useful.
+
+The [[https://github.com/ocsigen/tutorial/tree/master/files/tutorial/chapter2|full code]]
+of the program can be downloaded.
+
+==Services==
+
+===The main page===
+
+Let's start again from scratch with the following site.
+
+<<code language="ocaml"|
+
+let main_service = Eliom_content.Html.D.(
+  Eliom_registration.Html.create
+    ~path:(Eliom_service.Path [""])
+    ~meth:(Eliom_service.Get Eliom_parameter.unit)
+    (fun () () ->
+      Lwt.return
+        (html (head (title (txt "")) [])
+           (body [h1 [txt "Hello"]])))
+)
+>>
+
+Note that we are using {{{Eliom_registration.Html}}}, as we are not building a
+client side program for now.
+
+For the same reason, you may want to remove the {{{.eliom}}}-file
+generated by the distillery and put the code into an
+{{{.ml}}}-file. But don't forget to add it to the server files in the
+{{{Makefile.options}}}:
+
+<<code language="makefile"|
+SERVER_FILES := tuto.ml
+>>
+
+===Adding a page for each user===
+
+<<concepts|
+
+Services with parameters\\
+Using parts of the path as parameters
+
+>>
+
+We will now create a page for each user. To do this, we will create a
+new service, taking the user name as parameter:
+
+<<code language="ocaml"|
+let user_service = Eliom_content.Html.D.(
+  Eliom_registration.Html.create
+    ~path:(Eliom_service.Path [""])
+    ~meth:(Eliom_service.Get (Eliom_parameter.string "name"))
+    (fun name () ->
+      Lwt.return
+        (html (head (title (txt name)) [])
+           (body [h1 [txt name]])))
+)
+>>
+
+Add these lines to the same file, compile, start the server and verify
+that everything is working by trying, for example:
+{{{http://localhost:8080/?name=toto}}}.
+
+<<concept title="Paths" |
+
+Note that we are using the same path as the first service.  Eliom will
+automatically call the right service according to the parameters given
+in the request.
+
+>>
+
+<<concept title="Services with parameters" |
+
+To define a service that accepts parameters in the URL (GET
+parameters), just add a description of the parameters you want in the
+{{{~meth}}} argument of the {{{Eliom_service.create}}} function. In
+our example, the service is expecting a parameter called {{{name}}},
+of type {{{string}}}.
+
+The handler function (function implementing the service) always takes
+two parameters:
+
+* The first one corresponds to GET parameters (in our example, a string).
+* The second one corresponds to parameters that are sent in the body
+  of the HTTP request (POST parameters). We will see soon how to make
+  services with POST parameters.
+
+The module <<a_api project="eliom" subproject="server" | module Eliom_parameter >>
+defines the possible parameter types. For example if you write:
+
+{{{
+~meth:(Eliom_service.Get (Eliom_parameter.int "i"))
+}}}
+
+Eliom will try to find a parameter called {{{i}}} and to translate it
+into an {{{int}}}.  In that case, the handler function will accept an
+{{{int}}} as the first parameter.
+
+If you want to accept several parameters, you can do, for example:
+
+{{{
+~meth:(Eliom_service.Get Eliom_parameter.(int "i" ** string "s"))
+}}}
+
+In that case, the handler function takes a pair of type {{{(int * string)}}}.
+
+//Warning:// The operator {{{**}}} is an infix //binary// operator.
+It will always create pairs, and not triples or other tuples.
+
+The module <<a_api project="eliom" subproject="server" | module Eliom_parameter >> also
+defines other parameter types: for example floats, 64 bits integers,
+sum types, but also more complex types, like sets or lists of values.
+It is also possible to define your own parameter types.
+
+>> <<| END "encadre" >>
+
+For our program, we would prefer to take one part of the URL path as the parameter
+describing the name of the user.
+To achieve this we change the definition of the previous service this way:
+
+<<code language="ocaml"|
+let user_service =
+  Eliom_registration.Html.create
+    ~path:(Eliom_service.Path ["users"])
+    ~meth:(Eliom_service.Get (
+      Eliom_parameter.(suffix (string "name"))))
+    (fun name () -> ... )
+>>
+
+The user pages are now available at URLs <<span
+class="code"|~http:~//localhost:8080/users~///username//>>.
+
+<<concept title="Using parts of the path as page parameters" |
+
+The module <<a_api project="eliom" subproject="server" | module Eliom_parameter >> makes
+it possible to use parts of the path as service (GET) parameters.
+
+In addition to <<a_api project="eliom" subproject="server" | val Eliom_parameter.suffix
+>>, there are many other values allowing you to specify your expected
+parameters: for example, you may access the full suffix as a string,
+as a list of string, or you may want to mix suffix parameters with
+standard GET parameters. You can also accept, as parameters, parts of
+the path that are not a suffix of the path (using <<a_api
+project="eliom" subproject="server" | val Eliom_parameter.const >>).  See more information
+on suffixes in <<a_manual
+project="eliom" chapter="server-params" fragment="suffixes"|Eliom's manual>>.
+
+//Warning:// Even if it is not displayed in the URL, suffix parameters
+have a parameter name. This allows one to make forms that point to
+those kind of services.  Actually each "suffix service" has an
+equivalent without suffix (which is by default automatically
+redirected towards the suffix version if it is a GET request).
+
+>> <<| END "encadre" >>
+
+===Links===
+
+<<concepts|
+Links \\
+Database libraries
+>>
+
+We now want to add a link on each user page to go back to the main
+page.
+
+Change the handler of {{{user_service}}} into:
+
+<<code language="ocaml"|
+(fun name () -> Lwt.return
+  (html
+    (head (title (txt name)) [])
+    (body [h1 [txt name];
+           p [a ~service:main_service [txt "Home"] ()]])))
+>>
+
+<<concept title="Creating hyperlinks" |
+
+The function <<a_api project="eliom" subproject="server" | val
+Eliom_content.Html.D.a >> accepts the following parameters:
+* the service
+* the content of the link
+* URL parameters to be given to the service
+
+Thus, you don't have to know the precise URL of the service you want
+to link to, and if the URL changes, all links will remain valid.
+Using this function has a wonderful consequence: //You will never have
+broken links!//
+
+>> <<| END "encadre" >>
+
+====Links towards services with parameters====
+
+In our example above, the last parameter is {{{()}}} because the
+service does not expect any parameter. If the service expects, for
+example, a pair {{{(int * string)}}}, you must provide a matching
+value as last parameter.  OCaml checks at compile time that the type
+of the parameters in a link corresponds to the type expected by the
+service. Also parameter names are generated
+automatically from the service, making it impossible to erroneously
+create bad links.
+
+To show an example of a link with parameters, we will display the list
+of user pages on the main page. Here is the new version of the full
+program:
+
+<<code language="ocaml"|
+
+(* Services *)
+let main_service = Eliom_service.create
+  ~path:(Eliom_service.Path [""])
+  ~meth:(Eliom_service.Get Eliom_parameter.unit)
+  ()
+
+let user_service  = Eliom_service.create
+  ~path:(Eliom_service.Path ["users"])
+  ~meth:(Eliom_service.Get Eliom_parameter.(suffix (string "name")))
+  ()
+
+(* User names and passwords: *)
+let users = ref [("Calvin", "123"); ("Hobbes", "456")]
+
+let user_links = Eliom_content.Html.D.(
+  let link_of_user = fun (name, _) ->
+    li [a ~service:user_service [txt name] name]
+  in
+  fun () -> ul (List.map link_of_user !users)
+)
+
+(* Services Registration *)
+let () = Eliom_content.Html.D.(
+
+  Eliom_registration.Html.register
+    ~service:main_service
+    (fun () () ->
+      Lwt.return
+        (html (head (title (txt "")) [])
+           (body [h1 [txt "Hello"];
+                  user_links ()])));
+
+  Eliom_registration.Html.register
+    ~service:user_service
+    (fun name () ->
+      Lwt.return
+        (html (head (title (txt name)) [])
+           (body [h1 [txt name];
+                  p [a ~service:main_service [txt "Home"] ()]])))
+)
+>>
+
+<<concept title="Mutually recursive services" |
+
+As our two services are mutually recursive (the first one contains
+links towards the second one and vice versa), we split the
+{{{create}}} function application in two steps:
+
+* First we create all the services using
+  <<a_api project="eliom" subproject="server" | val Eliom_service.create >>
+  or <<a_api project="eliom" subproject="server" | val Eliom_service.App.service >>
+  (depending on the type of services you want)
+* Then we register the handlers using the {{{register}}} function from
+  the right module.
+
+The function {{{create}}} we previously used is just a shortcut for these two functions (we create the service, then we register the handler).
+
+>>
+
+<<concept title="Database libraries" |
+
+Ultimately we'll want to use a more sophisticated database module for
+managing user information, which we will write later in this tutorial.
+You can use any OCaml database binding (for example
+[[http://pgocaml.forge.ocamlcore.org/|PGOcaml]] to program
+database queries). We will use our own database library called
+[[https://github.com/ocsigen/macaque|Macaque]], which implements typed requests using
+//comprehensions//.
+
+//Just remember that your query functions must be cooperative with
+Lwt!// For example PGOcaml is now implemented in monadic way, which
+makes it 100% compatible with Lwt. Macaque (the library we use later
+in this tutorial) is as well.
+
+If your database module is not Lwt-cooperative but is thread-safe (for
+preemptive threads), you can use the <<a_api project="lwt" | val
+Lwt_preemptive.detach >> function to make the blocking function be
+executed by a separate preemptive thread.
+
+>>
+
+==Sessions==
+
+===Connection service===
+
+<<concepts|
+
+Services with hidden (POST) parameters\\
+Fallback service
+
+>>
+
+Now we want to add a connection form.  First, we create a service
+for checking the name and password.  Since we don't want the username
+and password to be shown in the URL, we use //hidden parameters//
+(or POST parameters).  Thus, we need to create a new service taking
+these parameters:
+
+<<code language="ocaml"|
+let connection_service = Eliom_service.create_attached_post
+  ~fallback:main_service
+  ~post_params:Eliom_parameter.(string "name" ** string "password")
+  ()
+>>
+
+<<concept title="Hidden (POST) services" |
+
+Services using the POST HTTP method are created using the function
+<<a_api project="eliom" subproject="server" | val Eliom_service.create >>
+or <<a_api project="eliom" subproject="server" | val Eliom_service.create_attached_post >>
+(depending on what type of service you want to create).
+As you can see, there is a major
+difference from the way we created our previous services.
+Instead of providing a path for the {{{~path}}} argument, we gave a
+//fallback// service. This //fallback// is the service that will be used
+if the POST parameters are missing (for example, the user sets a bookmark
+on the page and returns later without POST parameters).
+This way, we will not get 404 errors if this occurs.
+
+If the fallback has GET parameters, your service will have both GET
+and POST parameters. In that case, GET parameters will be in the URL
+and POST parameters will probably come from a form. In HTML, it is not
+possible to mix GET and POST parameters in the same form.
+
+See also [[basics|the cheat-sheet]] for an
+comprehensive overview on the different types of services.
+
+>>
+
+<<concept title="POST or GET?" |
+
+POST parameters are sent in the body of the HTTP request (whereas GET
+parameters are sent in the URL).  It is important to understand that
+they have very different semantics.
+
+Remember:
+
+* Use GET parameters when you want your page to be bookmarkable.
+* Use POST parameters when you do not want the page to be
+  bookmarkable, for example, because it performs a side effect on the
+  server (connecting a user, add something in a database, perform a
+  payment, etc.).
+
+//Warning:// Even if POST parameters are not shown in the URL, they
+are sent as plain text. If you want to transmit private data (like a password),
+you must
+use HTTPS (see <<a_manual project="ocsigenserver" chapter="config" |
+the Ocsigen server manual >>).  >>
+
+Now we can register a handler for the new service:
+
+<<code language="ocaml"|
+  Eliom_registration.Html.register
+    ~service:connection_service
+    (fun () (name, password) ->
+      let message =
+        if check_pwd name password
+        then "Hello " ^ name
+        else "Wrong name or password"
+      in
+      Lwt.return
+        (html (head (title (txt "")) [])
+           (body [h1 [txt message];
+                  user_links ()])));
+>>
+
+where {{{check_pwd}}} is defined by:
+
+<<code language="ocaml"|
+let check_pwd name pwd =
+  try List.assoc name !users = pwd with Not_found -> false
+>>
+
+===Connection form===
+
+<<concepts|
+
+Forms
+
+>>
+
+For now, we will add the connection form only on the main page of the
+site.
+
+Let's create a function for generating the form:
+
+<<code language="ocaml"|
+let connection_box () = Eliom_content.Html.D.(
+  Form.post_form ~service:connection_service
+    (fun (name1, name2) ->
+      [fieldset
+         [label [txt "login: "];
+          Form.input
+            ~input_type:`Text ~name:name1
+            Form.string;
+          br ();
+          label [txt "password: "];
+          Form.input
+            ~input_type:`Password ~name:name2
+            Form.string;
+          br ();
+          Form.input
+            ~input_type:`Submit ~value:"Connect"
+            Form.string
+         ]]) ()
+)
+>>
+
+Now, add a call to this function in the handler of the main service
+(for example just before the user links).
+
+<<concept title="Forms" |
+
+Form creation is very similar to link creation, using the functions
+<<a_api project="eliom" subproject="server"
+text="val Eliom_content.Html.D.Form.get_form"
+| val Eliom_content_sigs.LINKS_AND_FORMS.Form.get_form >> and
+<<a_api project="eliom" subproject="server"
+text="val Eliom_content.Html.D.Form.post_form"
+| val Eliom_content_sigs.LINKS_AND_FORMS.Form.post_form >>.
+
+The first parameter is the service, and the last parameter (only for
+{{{post_form}}}) is for GET parameters you want sent in the URL, if
+the fallback of your POST service takes GET parameters.
+
+The only difference is how we write form content: instead of simply
+giving the content as parameter to the {{{get_form}}} or
+{{{post_form}}} functions, you supply a function that creates the form
+from the names of the parameters the service is expecting.  Thus, you
+don't need to remember the parameter names you chose while creating
+the service, and you can change them easily without having to update
+every form in your application.
+
+In the example, note that the service is expecting a pair
+{{{(string * string)}}}.  The function given to {{{post_form}}} takes two
+parameters corresponding to the names of each field.
+
+Functions building widgets, like
+<<a_api project="eliom" subproject="server"
+text="val Eliom_content.Html.D.Form.input"
+| val Eliom_content_sigs.LINKS_AND_FORMS.Form.input >>,
+expect an argument of type
+<<a_api project="eliom" subproject="server"
+text="type Eliom_content.Html.D.Form.param"
+| type Eliom_content_sigs.LINKS_AND_FORMS.Form.param >>
+(e.g.,
+{{{ Eliom_content.Html.D.Form.int : int Eliom_content.Html.D.Form.param}}})
+specifying the parameter type.  OCaml checks that the name you use
+matches the field.  For example the names above need to be used with
+<<a_api project="eliom" subproject="server"
+text="val Eliom_content.Html.D.Form.string"
+| val Eliom_content_sigs.LINKS_AND_FORMS.Form.string >>.
+
+>>
+
+===Opening a session===
+
+<<concepts|
+
+Session data, Eliom references
+
+>>
+
+Now we want to remember that the user is successfully connected.  To do
+that we will set a reference when the user successfully connects, and
+we will restrict the scope of this reference to the session (that is,
+to the browser).
+
+Define your Eliom reference with a default value:
+<<code language="ocaml"|
+let username =
+  Eliom_reference.eref ~scope:Eliom_common.default_session_scope None
+>>
+
+Here is the new {{{connection_box}}} function:
+
+<<code language="ocaml"|
+let connection_box () = Eliom_content.Html.D.(
+  let%lwt u = Eliom_reference.get username in
+  Lwt.return
+    (match u with
+      | Some s -> p [txt "You are connected as "; txt s]
+      | None ->
+        Form.post_form ~service:connection_service
+          (fun (name1, name2) ->
+            [fieldset
+	       [label [txt "login: "];
+                Form.input
+                  ~input_type:`Text ~name:name1
+                  Form.string;
+                br ();
+                label [txt "password: "];
+                Form.input
+                  ~input_type:`Password ~name:name2
+                  Form.string;
+                br ();
+                Form.input
+                  ~input_type:`Submit ~value:"Connect"
+                  Form.string
+               ]]) ())
+)
+>>
+
+...~ and replace the registration of the main service and the connection service by:
+
+<<code language="ocaml"|
+  Eliom_registration.Html.register
+    ~service:main_service
+    (fun () () ->
+      let%lwt cf = connection_box () in
+      Lwt.return
+        (html (head (title (txt "")) [])
+              (body [h1 [txt "Hello"];
+                     cf;
+                     user_links ()])));
+
+  Eliom_registration.Html.register
+    ~service:connection_service
+    (fun () (name, password) ->
+      let%lwt message =
+        if check_pwd name password then
+	  begin
+            let%lwt () = Eliom_reference.set username (Some name) in
+            Lwt.return ("Hello "^name)
+	  end
+	else
+	  Lwt.return "Wrong name or password"
+      in
+      Lwt.return
+        (html (head (title (txt "")) [])
+           (body [h1 [txt message];
+                  user_links ()])));
+>>
+
+
+<<concept title="Eliom references and extended sessions" id="eref"|
+
+Session data is stored in what we call //Eliom references//.
+It is a type of reference whose value depend on the session the user
+belongs to.
+
+Eliom is making the notion of session much more powerful by adding
+other //scopes// for Eliom references. Instead of limiting the scope
+to a session (that is: one browser), it is also possible to create
+Eliom references with scope
+* "client-side process"
+({{{~scope:Eliom_common.default_process_scope}}}),
+* or "group of sessions" (see
+later) ({{{~scope:Eliom_common.default_group_scope}}}),
+* or "current
+request" ({{{~scope:Eliom_common.request_scope}}})
+(for example to cache the data during the request,
+or for //actions// to give information to subsequent service -- see below).
+
+Example: Say you want to implement a game, and make possible to have several instances of the game running in several tabs of the browser. Store the score on server side, as a "client side process" Eliom reference.
+
+Example: Grouping all the sessions for one user in a group of session makes possible to share a shopping basket between several devices (your mobile phone and your laptop for example).
+
+An Eliom reference is defined with the function
+{{{Eliom_reference.eref}}}, specifying the scope of this reference
+and the default value. The function {{{Eliom_reference.get}}}
+retrieves the value of this reference for the current scope.
+The default value is used for
+all sessions (or client process or group of sessions) for which it has not
+been changed using {{{Eliom_reference.set}}}.
+
+By default, Eliom references are kept in memory and will disappear if
+you shut down the server. It is possible, however, to create
+//persistent Eliom references// that will survive even a server
+restart. To do that, add the optional parameter {{{persistent}}} to
+the {{{eref}}} function, with a string value corresponding to the name
+of the table that will contain the values on disk.
+
+You need to rename this table every time you change the type
+of your Eliom reference, otherwise the server will crash (we are using
+OCaml's {{{Marshal}}} module).
+
+It is not possible to create Eliom references containing functions
+(closures), due to limitations in OCaml's serialization mechanism.
+
+>> <<| END "encadre" >>
+
+===Display the usual page after connection===
+
+<<concepts|
+
+Actions
+
+>>
+
+As you can see, our connection service is displaying a welcome page
+which is different from the main page in connected mode.  We would
+rather display the same page.  One solution is to call the same
+handler after registering session data.
+
+A cleaner solution is to use an //action//, that is: a service which will
+just perform a side effect.  Replace the registration
+of the connection service by:
+
+<<code language="ocaml"|
+  Eliom_registration.Action.register
+    ~service:connection_service
+    (fun () (name, password) ->
+      if check_pwd name password
+      then Eliom_reference.set username (Some name)
+      else Lwt.return ());
+>>
+
+Now the main page is displayed after connection.
+
+<<concept title="Actions" |
+
+An //action// is a service that performs a side effect and redisplays
+the current page. The handler function returns {{{()}}}.
+
+>>
+
+===Putting a connection form on each page===
+
+<<concepts|
+
+Non-attached coservices\\
+Redirections
+
+>>
+
+<<concept title="Non-attached coservices" |
+
+With many web programming frameworks, adding a connection form on each
+page of a site is complicated, and is approached in one of two ways:
+
+* A first solution is similar to what we did for the main service, but
+  for all services (meaning that each page usually checks the presence
+  of POST parameters). This is clumsy.
+* Another solution would be to create a special page on a separate
+  path to handle the registration, with some way to do a redirection
+  to the page we came from after connection. (Of course we want to
+  stay on the same page after sending the connection form!) This is
+  ugly.
+
+With Eliom, this is more straightforward:
+
+* For the connection service, we use a kind of service called
+  //non-attached coservice//, which means that it is not attached to
+  any path in particular. Calling this kind of service will not change
+  the //path// you see in the browser URL bar (just add parameters if
+  you use the GET method).
+* Use an action to connect the user and redisplay the page
+  corresponding to the current URL.
+
+By default, a random identifier will be generated automatically by
+Eliom for the non-attached coservice. If you want this identifier to
+be fixed, you can specify it yourself while creating the service using
+the {{{?name}}} optional parameter. This identifier is added
+automatically by Eliom in each form (as hidden field) and link.
+
+>>
+
+We transform the connection service into a non_attached coservice,
+to do so we replace the path we specified earlier for the {{{~path}}} parameter:
+
+<<code language="ocaml"|
+let connection_service = Eliom_service.create
+  ~path:(Eliom_service.No_path)
+  ~meth:(Eliom_service.Post (
+    Eliom_parameter.unit,
+    Eliom_parameter.(string "name" ** string "password")))
+  ()
+>>
+
+Now you can add the connection box on user pages.
+
+<<code language="ocaml"|
+  Eliom_registration.Html.register
+    ~service:user_service
+    (fun name () ->
+      let%lwt cf = connection_box () in
+      Lwt.return
+        (html (head (title (txt name)) [])
+              (body [h1 [txt name];
+		     cf;
+                     p [a ~service:main_service [txt "Home"] ()]])));
+>>
+
+<<concept title="Alternative: register a redirection" |
+
+Usually, after sending a POST form, it is good practice to do a
+redirection.  This avoids reposting the data if the user reloads the
+page.
+
+Eliom provides the module <<a_api project="eliom" subproject="server" |
+module Eliom_registration.Redirection >> to register services doing
+redirections.  Such services return a service without parameter.
+
+Example:
+
+<<code language="ocaml"|
+
+let redir_service = Eliom_service.create
+    ~path:(Eliom_service.Path ["redir"])
+    ~meth:(Eliom_service.Get Eliom_parameter.unit)
+    ()
+
+let service_to_redirect = Eliom_service.create_attached_post
+  ~fallback:redir_service
+  ~post_params:(Eliom_parameter.string "something")
+  ()
+
+let () =
+  (** redir_service registration **)
+  Eliom_registration.Redirection.register
+    ~service:redir_service
+    (fun () () ->
+    	 Lwt.return
+		(Eliom_registration.Redirection some_service_to_redirect_to));
+
+  (** service_to_redirect registration **)
+  Eliom_registration.Any.register
+  ~service:service_to_redirect
+  (fun () something -> ..... )
+>>
+
+(If you want to give parameters to the service you return, use <<a_api
+project="eliom" subproject="server" | val Eliom_service.preapply >> ---
+more information in the <<a_manual project="eliom" chapter="server-services"
+fragment="p3preapplied" | Eliom manual >>.)
+
+If you want to do a redirection towards the current page (as in our
+case), use the special service {{{~path}}} parameter <<a_api project="eliom" subproject="server" |
+val Eliom_service.No_path >>, which is some kind of POST
+non-attached coservice without parameter at all.  >>
+
+===Disconnection===
+
+To create a logout/disconnection form, we create another non-attached
+coservice using POST method, and register another action.  We call the
+function <<a_api project="eliom" subproject="server" | val
+Eliom_state.discard >> with scope <<a_api project="eliom" subproject="server"
+| val Eliom_common.default_session_scope >> to remove all session
+data.
+
+<<code language="ocaml"|
+let disconnection_service = Eliom_service.create
+  ~path:(Eliom_service.No_path)
+  ~meth:(Eliom_service.Post (Eliom_parameter.unit, Eliom_parameter.unit))
+  ()
+
+let disconnect_box () = Eliom_content.Html.D.(
+  Form.post_form disconnection_service
+    (fun _ ->
+      [fieldset [Form.input ~input_type:`Submit ~value:"Log out" Form.string]]
+    )
+    ()
+)
+
+let () =
+  Eliom_registration.Action.register
+    ~service:disconnection_service
+    (fun () () -> Eliom_state.discard ~scope:Eliom_common.default_session_scope ())
+>>
+
+Then add this form in the connection box:
+
+<<code language="ocaml"|
+let connection_box () =
+  let%lwt u = Eliom_reference.get username in
+  Lwt.return
+    (match u with
+      | Some s -> div [p [txt "You are connected as "; txt s; ];
+                       disconnect_box () ]
+      | None -> ...
+>>
+
+==Registration of users==
+
+===Basic registration form===
+
+<<concepts|
+
+Attached coservice
+
+>>
+
+We now add a registration form to the application.  We create a
+new regular service, attached to the path {{{/registration}}}, that
+displays a registration form, and an action that will add the user to
+the "database":
+
+<<code language="ocaml"|
+let new_user_form_service = Eliom_service.create
+  ~path:(Eliom_service.Path ["registration"])
+  ~meth:(Eliom_service.Get Eliom_parameter.unit)
+  ()
+
+let create_account_service = Eliom_service.create_attached_post
+  ~fallback:main_service
+  ~post_params:(Eliom_parameter.(string "name" ** string "password"))
+  ()
+
+let account_form () = Eliom_content.Html.D.(
+  Form.post_form ~service:create_account_service
+    (fun (name1, name2) ->
+      [fieldset
+         [label [txt "login: "];
+          Form.input ~input_type:`Text ~name:name1 Form.string;
+          br ();
+          label [txt "password: "];
+          Form.input ~input_type:`Password ~name:name2 Form.string;
+          br ();
+          Form.input ~input_type:`Submit ~value:"Connect" Form.string
+         ]]) ()
+)
+
+let _ = Eliom_content.Html.D.(
+  Eliom_registration.Html.register
+    ~service:new_user_form_service
+    (fun () () ->
+      Lwt.return
+        (html (head (title (txt "")) [])
+              (body [h1 [txt "Create an account"];
+                     account_form ();
+                    ])));
+
+  Eliom_registration.Action.register
+    ~service:create_account_service
+    (fun () (name, pwd) ->
+      users := (name, pwd)::!users;
+      Lwt.return ())
+)
+>>
+
+Then add the link to this service in the connection box:
+
+<<code language="ocaml"|
+let connection_box () = Eliom_content.Html.D.(
+  let%lwt u = Eliom_reference.get username in
+  Lwt.return
+    (match u with
+      | Some s -> div [p [txt "You are connected as "; txt s; ];
+                       disconnect_box () ]
+      | None ->
+        div [Form.post_form ~service:connection_service
+                (fun (name1, name2) ->
+...
+                ) ();
+             p [a new_user_form_service
+                  [txt "Create an account"] ()]]
+            )
+)
+>>
+
+<<concept title="Attached coservice" |
+
+Now we want to return to the main page after account creation.  We are
+using an //attached coservice//, that is, a service that is identified
+by both the path in the URL and a special coservice number (or name).
+A form to such a service will change the path and send parameters
+together with the coservice identifier (added automatically in an
+hidden field).
+
+In this particular case, We could have used a regular service, as we
+do not really need the coservice identifier, but in many cases, you
+may want to distinguish between several services registered at the
+same path (and with same parameters).  That's what attached coservices
+are made for.
+
+>>
+
+It looks great, but if we refresh the page after creating an account,
+we can see there is a problem. We are creating the same account over and
+over again. This is because we are calling the create_account_service each time
+we refresh the page, obviously we don't want that. To solve this issue we will
+implement a dynamically created and registered service with limited lifespan and
+number of uses.
+
+===Registration form with confirmation===
+
+<<concepts|
+
+Dynamic registration of services\\
+Session services\\
+Limited services
+
+>>
+
+Now we want to add a confirmation page before actually creating the
+account.  We //replace// the service {{{create_account_service}}} by a
+new POST attached coservice called {{{account_confirmation_service}}}:
+
+<<code language="ocaml"|
+let account_confirmation_service =
+  Eliom_service.create_attached_post
+    ~fallback:new_user_form_service
+    ~post_params:(Eliom_parameter.(string "name" **  string "password"))
+    ()
+>>
+
+and we make the account creation form point at this new service.
+
+We register an HTML handler on this service, with the confirmation
+page.  As a side effect, this page will create the actual account
+creation service:
+
+<<code language="ocaml"|
+
+  Eliom_registration.Html.register
+    ~service:account_confirmation_service
+    (fun () (name, pwd) ->
+      let create_account_service =
+	Eliom_service.create_attached_get
+          ~fallback:main_service
+          ~get_params:Eliom_parameter.unit
+          ~timeout:60.
+	  ~max_use:1
+	  ()
+      in
+      let _ = Eliom_registration.Action.register
+	~service:create_account_service
+        (fun () () ->
+          users := (name, pwd)::!users;
+          Lwt.return ())
+      in
+      Lwt.return
+	(html
+           (head (title (txt "")) [])
+           (body
+              [h1 [txt "Confirm account creation for "; txt name];
+               p [a ~service:create_account_service [txt "Yes"] ();
+                  txt " ";
+                  a ~service:main_service [txt "No"] ()]
+              ])));
+>>
+
+Also remove the registration of the {{{create_account_service}}}
+service and modify the user creation form to make it points towards
+{{{account_confirmation_service}}}.
+
+We created dynamically a service with a limited lifespan as specified by the
+{{{?timeout}}} parameter and a limited number of uses of this service defined
+by the {{{?max_use}}} parameter. Now if we refresh the page after creating the
+account, it works as intended.
+
+<<concept title="Dynamic creation of services" |
+
+In this example, we are dynamically creating a new service (here a
+coservice that does an action).  This is done by the same
+{{{register}}} function as usual.
+
+Dynamic creation of new services allows one to create services that
+depend on previous interaction with the user.  Here the
+{{{create_account_service}}} service depends on {{{name}}} and
+{{{pwd}}}, that were previously sent by a form.
+
+In this simple example, an alternative would have been to send
+{{{name}}} and {{{pwd}}} again to the same service as in the "basic
+registration form" example. But this solution is not possible when you
+have too much data.
+
+//Saving {{{name}}} and {{{pwd}}} as session data is a wrong
+solution!// If the user duplicates his browser window and fills out
+the user creation form in both, then the confirmation link must create
+the right account!
+
+A working alternative would have been to generate a random key, and
+associate {{{name}}} and {{{pwd}}} with that key in a database table
+on the server. This is the way such kind of web interaction is usually
+implemented. However, Eliom's solution is much simpler.
+
+The ability to register new services dynamically is implemented in few
+web frameworks, even though it simplifies a lot the programmating
+involved with that type of web interaction.  This feature is a variant
+of what is called //continuation based web programming//.  Think about
+it when you want to //create a page that depends on previous
+interaction with the user//. Dynamic registration of services will
+automatically record the "history" of the interaction, and make
+possible to use the "back button" or to have several tabs on the same
+site.
+
+Examples of uses:
+* displaying the results of a search
+* programming a "several step form" (when a form points at another
+  one, etc., like our registration form with confirmation).
+
+On the other hand, if you want to implement a //shopping basket//, you
+want it to be shared between all tabs of your web site.  To do that,
+you will use session data.
+
+//Warning:// Services are kept in memory. To avoid memory leaks, you
+probably want to put a timeout on your dynamic coservices. Just add
+the optional parameter {{{?timeout}}} to the service creation
+function.
+
+>> <<| END "encadre" >>
+
+<<concept title="Session services" |
+
+Eliom also makes it possible to restrict the scope of services to a
+session, a group of sessions, or even a client side process (if you
+have a client side program running).  It works exactly like the scope
+of Eliom references.  To do that, just add the optional parameter
+{{{~scope}}} to the registration function.  By default, the value is
+{{{Eliom_common.global_scope}}} (visible for everyone).  Other possible
+values: {{{Eliom_common.default_session_scope}}}, {{{Eliom_common.default_group_scope}}},
+or {{{Eliom_common.default_process_scope}}}.
+
+It is possible to register again for a session, tab or group, services
+that have already been registered with public (site) visibility.  In
+such cases, Eliom will try first tab services, then session services,
+then group services, and finally site services.  This makes possible
+to register specialized versions of a service for one user, for
+example when she logs in.
+
+>>
+
+==A few enhancements==
+
+===Displaying a "wrong password" message===
+
+<<concepts|
+Scope "request"
+>>
+
+In the current version, our web site fails silently when the password
+is wrong.  Let's improve this behavior by displaying an error message.
+To do that, we need to pass information to the service occurring after
+the action. We record this information in an Eliom reference with
+scope {{{Eliom_common.request_scope}}}.
+
+Define an Eliom reference:
+
+<<code language="ocaml"|
+let wrong_pwd =
+  Eliom_reference.eref ~scope:Eliom_common.request_scope false
+>>
+
+Modify the connection box this way:
+
+<<code language="ocaml"|
+let connection_box () = Eliom_content.Html.D.(
+  let%lwt u = Eliom_reference.get username in
+  let%lwt wp = Eliom_reference.get wrong_pwd in
+  Lwt.return
+    (match u with
+      | Some s -> div [p [txt "You are connected as "; txt s; ];
+                       disconnect_box () ]
+      | None ->
+        let l =
+          [Form.post_form ~service:connection_service
+            (fun (name1, name2) ->
+              [fieldset
+	         [label [txt "login: "];
+                  Form.input ~input_type:`Text ~name:name1 Form.string;
+                  br ();
+                  label [txt "password: "];
+                  Form.input ~input_type:`Password ~name:name2 Form.string;
+                  br ();
+                  Form.input ~input_type:`Submit ~value:"Connect" Form.string
+                 ]]) ();
+             p [a new_user_form_service
+                  [txt "Create an account"] ()]]
+        in
+        if wp
+        then div ((p [em [txt "Wrong user or password"]])::l)
+        else div l
+    )
+)
+>>
+
+...~ and modify the {{{connection_service}}} handler:
+
+<<code language="ocaml"|
+  Eliom_registration.Action.register
+    ~service:connection_service
+    (fun () (name, password) ->
+      if check_pwd name password
+      then Eliom_reference.set username (Some name)
+      else Eliom_reference.set wrong_pwd true);
+>>
+
+===Sending 404 errors for non-existing users===
+
+<<concepts|
+
+Sending 404\\
+{{{Eliom_registration.Any}}}
+
+>>
+
+Our service {{{user_service}}} responds to any request parameter, even
+if the user does not exist in the database.  We want to check that the
+user is in the database before displaying the page, and send a 404
+error if the user is not.  To do that, we will replace module
+{{{ Eliom_registration.Html }}}
+by <<a_api project="eliom" subproject="server" | module
+Eliom_registration.Any >> to register the service {{{user_service}}}:
+
+<<code language="ocaml"|
+  Eliom_registration.Any.register
+    ~service:user_service
+    (fun name () ->
+      if List.mem_assoc name !users then
+	begin
+	  let%lwt cf = connection_box () in
+	  Eliom_registration.Html.send
+            (html (head (title (txt name)) [])
+               (body [h1 [txt name];
+                      cf;
+                      p [a ~service:main_service [txt "Home"] ()]]))
+	end
+      else
+	Eliom_registration.Html.send
+          ~code:404
+          (html (head (title (txt "404")) [])
+             (body [h1 [txt "404"];
+                    p [txt "That page does not exist"]]))
+    );
+>>
+
+<<| BB
+  Why not {{{raise_lwt Eliom_common.Eliom_404}}}?
+  >>
+
+<<concept title="Eliom_registration.Any" |
+
+The module <<a_api project="eliom" subproject="server" | module
+Eliom_registration.Any >> can be used to create services that are
+flexible to choose the kind of output they want to send.
+
+Use the {{{send}}} function from the module you want to send the
+output.  That function also allows, for example, to specify the HTTP
+response code (here, we choose to use 404) or to set HTTP headers.
+
+>>
+
+<<wip|
+
+In the future, we may add functions like {{{set_http_code}}} or
+{{{set_http_header}}} to personalize the answer without using
+{{{Eliom_registration.Any}}}.
+
+>>
+
+=== Wrapping the server handler to easily get the user data
+
+When you want to assume that you have informations available in
+sessions, for instance when a site is mainly available to connected
+users, it becomes tedious to check everywhere that a reference is not
+{{{None}}}.  A simple way to distinguish authenticated and anonymous
+requests lies in the usage of <<a_api project="eliom"
+subproject="server"|val Eliom_tools.wrap_handler>>. It allows to
+provide two handler functions, one is called if a certain
+information is not made available by the first argument, the other is
+called when that information is available.
+
+<<code language="ocaml"|
+
+let authenticated_handler f = Eliom_content.Html.D.(
+  let handle_anonymous _get _post =
+    let connection_box =
+      Form.post_form ~service:connection_service
+        (fun (name1, name2) ->
+	  [fieldset
+              [label [txt "login: "];
+               Form.input ~input_type:`Text ~name:name1 Form.string;
+               br ();
+               label [txt "password: "];
+               Form.input ~input_type:`Password ~name:name2 Form.string;
+               br ();
+               Form.input ~input_type:`Submit ~value:"Connect" Form.string
+              ]]) ()
+    in
+    Lwt.return
+      (html
+        (head (title (txt "")) [])
+        (body [h1 [txt "Please connect"];
+	       connection_box;]))
+    in
+    Eliom_tools.wrap_handler
+      (fun () -> Eliom_reference.get username)
+      handle_anonymous (* Called when [username] is [None] *)
+      f (* Called [username] contains something *)
+)
+
+let () = Eliom_content.Html.D.(
+  Eliom_registration.Html.register ~service:main_service
+    (authenticated_handler
+       (fun username _get _post ->
+       	 Lwt.return
+           (html
+              (head (title (txt "")) [])
+              (body [h1 [txt ("Hello " ^ username) ]]))))
+)
+>>
+
+[[wiki:manual/application|prev]]
+[[wiki:manual/misc|next]]
diff --git a/tutos/8.0/manual/intro.wiki b/tutos/8.0/manual/intro.wiki
new file mode 100644
index 00000000..99c65e20
--- /dev/null
+++ b/tutos/8.0/manual/intro.wiki
@@ -0,0 +1,157 @@
+
+=Introduction=
+
+Ocsigen is a complete framework for developing Web and mobile apps
+using cutting edge techniques. It can be used to write simple server side
+Web sites, client-side programs, or complex client-server Web
+and mobile apps.
+Its main characteristics are:
+
+* The use of a strongly typed language, //OCaml//, and a very advanced use
+of its type system to check many properties of a program at compile time.
+This allows to drastically reduce the developement time of complex apps,
+and makes it easier to refactor the code to follow evolutions of its features.
+As an example, the conformance of generated HTML is checked at compile time,
+which makes it almost impossible to generate invalid pages.
+* //Multi-tier programming//: client and server sides of the application are
+written using the same language, and as a //single code//. Annotations in
+the code are used indicate on which side the code is to be run.
+The client side parts are automatically extracted and compiled into JavaScript
+to be executed in the browser.
+This gives a lot of flexibility to the programmer, allowing for example to
+generate some parts of pages either on client or server code according
+to your needs. It also makes communication between server and client
+straightforward, as you can use server side variables in client code,
+or call a server side OCaml functions from client code.
+* //Web and mobile multi-platform apps//: Android and iOS apps are
+generated from the exact same code as the Web app, and run in a webview.
+
+To see some examples of mobile or Web apps written with Ocsigen, have a look
+at the [[https://www.besport.com/news|Be Sport social network]] (available in
+[[https://play.google.com/store/apps/details?id=com.besport.www.mobile|Google Play Store]] and [[https://apps.apple.com/fr/app/be-sport/id1104216922|Apple app store]]), or
+[[http://ocsigen-1.inria.fr/ocsigen-start/demo/|Ocsigen Start's demo app]]
+(available on [[https://play.google.com/store/apps/details?id=com.osdemo.mobile|Google Play store]]).
+
+Ocsigen consists of several quite independant projects, all
+released as open source software on [[https://github.com/ocsigen|Github]].
+The main projects are:
+* [[wiki("lwt"):|Lwt]], a general purpose concurrent programming library for OCaml,
+* [[wiki("tyxml"):|TyXML]] for generating typed XML,
+* the [[wiki("js_of_ocaml"):|Js_of_ocaml]] compiler (from Ocaml bytecode to JavaScript),
+* [[wiki("eliom"):|Eliom]], the multi-tier framework for client-server
+Web and mobile apps,
+* [[wiki("ocsigenserver"):|Ocsigen Server]], a full-featured Web server,
+* [[wiki("ocsigen-toolkit"):|Ocsigen Toolkit]], a client-server widget library written for Eliom and Js_of_ocaml,
+* [[wiki("ocsigen-start"):|Ocsigen Start]], an application template with
+many code examples, to be used as a basis for your apps, or to learn.
+
+The [[site:install|installation is described here]].
+
+Ocsigen originates from a research project by the CNRS, Université de Paris
+and Inria. It innovates in many aspects, and you will have to learn several
+new programming techniques to become autonomous.
+Depending on your level and goals, we suggest to continue by reading
+some of the following chapters:
+
+* Chapter [[wiki:manual/basics|Client-server application programming guide]] can be used as your training plan.
+It provides a wide overview of each main concept, with links to more detailed
+documentation.
+* If you want to start with a server-side only Web site, read [[wiki:manual/basics-server|Server-side website programming guide]] instead.
+* Then, a good starting point is this
+[[wiki:manual/start|Ocsigen Start tutorial]],
+if you plan to build a client-server Web (and/or mobile) app.
+It will help you to build your first app very quickly,
+with many code samples to study.
+* If you are fluent in OCaml and want a quick introduction to
+client-server Web programming with Eliom,
+read tutorial
+[[wiki:manual/tutowidgets|Eliom apps basics: writing client server widgets]].
+It illusrates the client-server syntax with an example,
+and is a good starting point for understanding Eliom's client-server features.
+* If you want a full step-by-step tutorial on how to write a client-server Web
+application, read tutorial
+[[wiki:manual/application|Client-server application]].
+It describes step by step how to write a client/server
+[[site:graffiti/|collaborative drawing application]]. You will learn,
+from the very beginning, how to:
+** Create new //services//
+** Output //valid HTML//
+** Send //OCaml code// to be executed //on the client//
+** Call //JavaScript methods// from OCaml
+** Catch //mouse events//
+** //Communicate// with the server, in both directions
+** Create services with //non-HTML output//
+* If you want to build mobile applications,
+read tutorial [[wiki:manual/mobile|Mobile applications with Ocsigen]].
+It describes how to build a mobile app (e.g., for Android)
+with the same codebase as for your Web application.
+* If you want to write a more traditional Web site, with pages, forms, and sessions, read tutorial [[wiki:manual/interaction|Service based Web programming]].
+It is devoted to server side programming.
+It shows how to
+create a new Web site with several pages and user connections.
+You will learn how to:
+** Create a //link// towards another service
+** Create //forms//
+** Register //session data// or //session services//
+** Create services performing //actions// (with no output)
+** Dynamically register new services (//continuation based// Web programming)
+* If you want to learn more details about Ocsigen
+read tutorial [[wiki:manual/misc|Miscellaneous features]].
+It will mix the client-server drawing application
+with the session mechanism and user management
+to produce a multi-user collaborative drawing
+application.  In this chapter, you will learn how to:
+** Integrate a typical Web interaction (links, forms,~ …) with a client side program.
+** Add //sounds or videos// to your application
+** Change pages //without stopping the client side program//
+** Connect with external accounts (//openID//)
+** Add an Atom feed
+* If you want to have a full application with user management
+(registration, activation emails, authentication),
+have a look at [[wiki("ocsigen-start"):|Ocsigen-start]].
+Ocsigen-start is a library and a template for Eliom distillery that
+contains a working Eliom application with user and right
+management.
+* For a more comprehensive understanding refer to the manual of each project,
+and/or the API documentation.
+* You will also find more tutorials in the menu on the left.
+
+
+<<|[[http://www.dailymotion.com/video/k3m1rZBWQCWBCL693Y5|{{files/2014-epita-video.png|video}}]]
+If you want a wide overview about Ocsigen, for beginners, in french
+look at  [[href:http://www.dailymotion.com/video/k3m1rZBWQCWBCL693Y5|this video]]
+>>
+
+<<|div class="tutocase"|
+[[https://www.irill.org/videos/OUPS-2014-07/Meetup_OCaml_Oscigen|OUPS meeting at Mozilla Paris]]
+;A short talk, in english, that highlights a few features of Js~_of~_ocaml
+and Eliom.
+:Look at [[https://www.irill.org/videos/OUPS-2014-07/Meetup_OCaml_Oscigen|this video]]
+>>
+
+<<|div class="tutocase"|
+[[http://www.irill.org/videos/oups-december-2014/Ocsigen|OUPS meeting at IRILL]]
+;A short talk, in english, that shows how to write a small client-server reactive application with Js~_of~_ocaml and Eliom.
+:Look at [[http://www.irill.org/videos/oups-december-2014/Ocsigen|this video]]
+and read this [[wiki:manual/tutoreact|tutorial]].
+It describes the most recent features of Eliom.
+>>
+
+
+
+We recommend to ask your questions on
+[[https://discuss.ocaml.org|discuss.ocaml.org]] with tag {{{ocsigen}}}.
+You can also come and chat with us on
+IRC in channel {{{#ocsigen}}} on {{{freenode.net}}} (e.g. by using
+their [[http://webchat.freenode.net/?channels=ocsigen|webchat]])!
+
+
+Now, we recommend to read, chapter
+[[wiki:manual/basics|All Ocsigen in one page]]
+for a wide and complete overview.
+
+<<|wip|
+Manuals are permanently under evolution.
+Please report any error, mistake, for example by doing pull requests
+on Github, and send us your comments and suggestions!
+>>
diff --git a/tutos/8.0/manual/lwt.wiki b/tutos/8.0/manual/lwt.wiki
new file mode 100644
index 00000000..fc48edeb
--- /dev/null
+++ b/tutos/8.0/manual/lwt.wiki
@@ -0,0 +1,178 @@
+<<header| = Lwt in 5 minutes >>
+
+== Principles
+
+The Lwt library implements cooperative threads for OCaml.  Cooperative
+threads are an alternative to preemptive threads (used in many
+languages and in OCaml's {{{Thread}}} module) that solve most common
+issues with preemptive threads: with Lwt, there is very limited risk
+of deadlocks and very limited need for locks.  Lwt threads are even
+usable in programs compiled to JavaScript using Js_of_ocaml.
+
+Lwt is based on the fact that most programs spend most of their time
+waiting for inputs, e.g., keys, data coming from sockets, and mouse
+events. Instead of relying on a preemptive scheduler that switches
+between threads at arbitrary moments, Lwt uses these waiting times as
+//cooperation points//. This means that instead of blocking (for
+example on a {{{read}}}), Lwt resumes another waiting thread, if there
+is one that is ready to continue. All you have to do is to use the
+cooperative version of each blocking function, for example
+{{{Lwt_unix.sleep}}} instead of {{{Unix.sleep}}}
+and {{{Lwt_unix.read}}} instead of {{{Unix.read}}}.
+If one of your computations takes a lot of time, it is also possible
+to manually insert cooperation points using the function
+{{{Lwt_main.yield}}}.
+
+== Promises
+
+Lwt defines a type {{{'a Lwt.t}}}, which is the type of promises.
+For example, the function:
+
+<<code language="ocaml"|
+val f : unit -> int Lwt.t
+>>
+
+immediately returns a promise of {{{int}}}, that is, something that
+will eventually become an integer once the computation is finished.
+
+The following code will launch the computation of {{{f ()}}}
+(asynchronously). If the code reaches a cooperation point (for example
+when the integer is requested via the network), it will continue the
+program (print "hello") and resume at a subsequent cooperation point,
+when the data is available.
+
+<<code language="ocaml"|
+let g1 () =
+  let p = f () in
+  print_endline "hello"
+>>
+
+== Bind: Using the value of promises
+
+It is possible to tell Lwt to execute a function once a promise is
+completed, by using the function:
+
+<<code language="ocaml"|
+Lwt.bind : 'a Lwt.t -> ('a -> 'b Lwt.t) -> 'b Lwt.t
+>>
+
+For instance {{{Lwt.bind p h}}} will call the function {{{h}}} with
+the return value of the promise {{{p}}} as soon as the value is known.
+The expression {{{(Lwt.bind p h)}}} is also a promise (it may take
+time to complete). Function {{{h}}} must return a promise.
+
+To create a (terminated) promise from a value, use {{{Lwt.return}}}.
+
+Example:
+<<code language="ocaml"|
+let g2 () =
+  let p = f () in
+  Lwt.bind p (fun i -> print_int i; Lwt.return ())
+>>
+Function {{{g2}}} calls function {{{f}}} to create a promise.
+Then it waits (in a cooperative manner) for the result,
+and prints the result. The expression {{{g2 ()}}} has type {{{unit Lwt.t}}}.
+
+
+== Syntax extension
+
+A PPX (and also camlp4) syntax extension is available.
+
+<<code language="ocaml"|
+let%lwt i = f () in
+...
+>>
+
+is equivalent to
+
+<<code language="ocaml"|
+Lwt.bind (f ()) (fun i -> ...)
+>>
+
+== Examples
+
+=== A function that prints "tic" every second forever, without blocking the rest of the program
+
+<<code language="ocaml"|
+let rec tic () =
+    print_endline "tic";
+    let%lwt () = Lwt_unix.sleep 1.0 in
+    tic ()
+>>
+
+Replace {{{Lwt_unix.sleep}}} by {{{Lwt_js.sleep}}} if your program is
+running in a browser.
+
+
+=== Launching concurrent threads and waiting for their results
+
+Suppose you have two cooperative functions:
+<<code language="ocaml"|
+val f : unit -> unit Lwt.t
+val g : unit -> unit Lwt.t
+>>
+
+The following code runs {{{f ()}}} and {{{g ()}}} sequentially:
+<<code language="ocaml"|
+let%lwt () = f () in
+let%lwt () = g () in
+...
+>>
+
+The following code launches {{{f ()}}} and {{{g ()}}} concurrently,
+then waits for both to terminate before continuing:
+<<code language="ocaml"|
+let p1 = f () in
+let p2 = g () in
+let%lwt () = p1 in
+let%lwt () = p2 in
+...
+>>
+
+To detach a thread, it is recommended to use
+<<code language="ocaml"|
+Lwt.async (fun () -> f ())
+>>
+instead of
+<<code language="ocaml"|
+ignore (f ())
+>>
+to catch exceptions properly.
+
+=== Serial and concurrent map on lists
+
+The following map function runs all computation concurrently
+on all list elements:
+<<code language="ocaml"|
+let rec map f l =
+  match l with
+  | [] -> Lwt.return []
+  | v :: r ->
+      let t = f v in
+      let rt = map f r in
+      let%lwt v' = t in
+      let%lwt l' = rt in
+      Lwt.return (v' :: l')
+>>
+
+whereas the following one waits for the one to complete before
+launching the next one:
+<<code language="ocaml"|
+let rec map_serial f l =
+  match l with
+  | [] -> return []
+  | v :: r ->
+      let%lwt v' = f v in
+      let%lwt l' = map_serial f r in
+      Lwt.return (v' :: l')
+>>
+
+
+== More documentation
+
+Have a look at <<a_manual project="lwt" chapter="manual"|Lwt's manual>>
+for more details about Lwt.
+You will learn how to handle exceptions (using {{{Lwt.fail}}}
+and {{{Lwt.catch}}} or {{{try%lwt}}}).
+You will also learn for example how to create a thread that waits until it is
+awaken (using {{{Lwt.wait}}} and {{{Lwt.wakeup}}}).
diff --git a/tutos/8.0/manual/macaque.wiki b/tutos/8.0/manual/macaque.wiki
new file mode 100644
index 00000000..e830ef6f
--- /dev/null
+++ b/tutos/8.0/manual/macaque.wiki
@@ -0,0 +1,129 @@
+=Type safe database requests using Macaque=
+
+<<concepts |Type safe database requests>>
+
+The Macaque library allows easy manipulation of Postgresql
+database fully compatible with Lwt. (For more information see
+[[https://github.com/ocsigen/macaque| Macaque manual]]).
+
+Macaque is fuly compatible with PGOcaml, and both can be used
+in the same application. PGOcaml requires database access at compile
+time and makes difficult to generate queries at compile time.
+Macaque uses its own syntax, whereas PGOcaml uses SQL.
+Macaque supports only a small subset of Postgresql features.
+
+Warning: Macaque's syntax extension uses camlp4, which is not compatible with ppx. If you want to use macaque with Eliom's ppx, place your macaque code in an isolated file. Some details can be found in <<a_manual project="eliom" chapter="ppx-migration"|the ppx migration guide>>.
+
+This tutorial shows how to store the login and the password
+f users in a Postgresql
+database. For more information on how to set up and run it, see
+[[http://www.postgresql.org/docs/9.0/static/index.html|Postgresql
+manual]].
+
+When the base is up and running, we create the base by running in a shell:
+<<code language="sh"|
+$ createdb testbase
+>>
+
+Then we create the {{{users}}} table, by executing this sql script:
+
+<<code language="sql"| CREATE TABLE users (
+       login text NOT NULL,
+       password text NOT NULL
+);
+>>
+
+We save it under {{{create_table.sql}}} and run
+
+<<code language="sh"|
+$ psql -d testbase -f create_table.sql
+>>
+
+Macaque can use any thread library that provides a monadic
+interface. The default one provides simple blocking access to the
+database. It isn't good for us because an access to the base by one
+user will prevent the server from handling anything else until the
+request is finished. We need a version of Macaque specialised for
+Lwt. It is obtained by
+
+<<code language="ocaml"|
+module Lwt_thread = struct
+  include Lwt
+  include Lwt_chan
+end
+module Lwt_PGOCaml = PGOCaml_generic.Make(Lwt_thread)
+module Lwt_Query = Query.Make_with_Db(Lwt_thread)(Lwt_PGOCaml)
+>>
+
+We can now open the database with our newly created {{{Lwt_PGOCaml.connect}}}.
+
+<<code language="ocaml"|
+let get_db : unit -> unit Lwt_PGOCaml.t Lwt.t =
+  let db_handler = ref None in
+  fun () ->
+    match !db_handler with
+      | Some h -> Lwt.return h
+      | None -> Lwt_PGOCaml.connect ~database:"testbase" ()
+>>
+
+Then we declare the table on which we will work and the different
+requests we do on it.
+
+<<code language="ocaml"|
+let table = <:table< users (
+  login text NOT NULL,
+  password text NOT NULL
+) ~>>
+
+let find name =
+  (get_db () ~>>= fun dbh ->
+   Lwt_Query.view dbh
+   <:view< {password = user_.password} |
+            user_ in $table$;
+            user_.login = $string:name$; ~>>)
+
+let insert name pwd =
+  get_db () ~>>= fun dbh ->
+  Lwt_Query.query dbh
+  <:insert< $table$ :=
+    { login = $string:name$; password = $string:pwd$; } ~>>
+
+>>
+
+Finally, we modify the handling code :
+
+<<code language="ocaml"|
+let check_pwd name pwd =
+  (get_db () ~>>= fun dbh ->
+   Lwt_Query.view dbh
+   <:view< {password = user_.password} |
+            user_ in $table$;
+            user_.login = $string:name$;
+	    user_.password = $string:pwd$ ~>>)
+  >|= (function [] -> false | _ -> true)
+
+let () = Eliom_registration.Action.register
+  ~service:create_account_service
+  (fun () (name, pwd) ->
+    find name ~>>=
+      (function
+	| [] -> insert name pwd
+	| _ -> Lwt.return ()) )
+
+let () = Eliom_registration.Action.register
+  ~service:connection_service
+  (fun () (name, password) ->
+    check_pwd name password ~>>=
+      (function
+	| true -> Eliom_reference.set username (Some name)
+	| false -> Lwt.return ()))
+>>
+
+We need to reference {{{macaque}}} in the {{{Makefile}}} (or in {{{Makefile.option}}} if you used {{{eliom-distillery}}}) :
+{{{
+SERVER_PACKAGE := macaque.syntax
+}}}
+and in {{{ocsigenserver.conf}}} (only if you don't use {{{eliom-distillery}}}) :
+{{{
+<extension findlib-package="macaque"/>
+}}}
diff --git a/tutos/8.0/manual/menu.wiki b/tutos/8.0/manual/menu.wiki
new file mode 100644
index 00000000..f6c8e446
--- /dev/null
+++ b/tutos/8.0/manual/menu.wiki
@@ -0,0 +1,73 @@
+= Programmer's guide
+==[[intro|Introduction. Ocsigen: where to start?]]
+==[[basics|Client-server application programming guide]]
+==[[basics-server|Server-side website programming guide]]
+= Main tutorials
+==[[site:/install|Install Ocsigen]]
+==[[start|Your first app in 5 minutes]]
+==[[application|Client/server application: Graffiti]]
+==[[tutowidgets|Eliom apps basics: writing client-server widgets]]
+==[[how-to-register-session-data|Session data: Eliom references]]
+==[[tutoreact|Reactive client-server Web applications]]
+==[[interaction|Service based Web programming]]
+==[[misc|Mixing traditional Web interaction with client-server app]]
+= 5-minute tutorials
+==[[lwt|Lwt]]
+==[[html|HTML]]
+= Other tutorials: Miscellanous features
+==[[mobile|Mobile applications with Ocsigen]]
+==[[custom-conf|Custom configuration]]
+==[[rest|RESTful JSON API]]
+==[[ocsipersist|Persistent tables with Ocsipersist]]
+= Improving Graffiti
+==[[pictures|Download pictures]]
+==[[music|Playing music]]
+==[[reactivemediaplayer|Reactive media player]]
+=@@class="howto"@@ HOW-TO
+== My first steps with Ocsigen
+===[[how-to-make-hello-world-in-ocsigen|How to make "hello world" in Ocsigen]]
+===[[how-to-compile-my-ocsigen-pages|How to compile my Ocsigen pages]]
+===[[how-to-configure-and-launch-the-ocsigen-server|How to configure and launch the Ocsigen Server]]
+===[[how-does-a-page-s-source-code-look|How does a client-server app source code look like?]]
+== How to put some elements in my page ?
+===[[how-to-make-page-a-skeleton|How to make a page skeleton]]
+===[[how-to-use-get-parameters-or-parameters-in-the-url|How to use GET parameters (parameters in the URL)]]
+===[[how-to-add-css-stylesheet|How to add CSS stylesheet]]
+===[[how-to-add-a-javascript-script|How to add a Javascript script]]
+<<|===[[how-to-add-a-favicon|How to add a Favicon]] >>
+===[[how-to-add-a-div|How to add a div]]
+===[[how-to-add-a-list|How to add lists in pages?]]
+===[[how-to-add-an-image|How to add an image]]
+===[[how-to-write-titles-and-paragraphs|How to write titles and paragraphs]]
+===[[how-to-set-and-id-classes-or-other-attributes-to-html-elements|How to set and id, classes or other attributes to HTML elements]]
+===[[how-to-add-a-select-or-other-form-element|How to add select (or other form element)]]
+===[[how-to-insert-raw-form-elements-not-belonging-to-a-form-towards-a-service|How to insert "raw" form elements (not belonging to a form towards a service)]]
+===[[how-to-make-responsive-css|How to make responsive CSS]]
+== Services
+===[[how-to-do-links-to-other-pages|How to do links to other pages]]
+===[[how-to-write-forms|How to write forms]]
+===[[how-to-register-a-service-that-decides-itself-what-to-send|How to register a service that decides itself what to send]]
+===[[how-to-create-link-to-a-current-page-without-knowing-its-url|How to create link to a current page (without knowing its URL)]]
+===[[how-to-create-form-wizard-sequence-of-pages-depending-on-data-entered-on-previous-ones|How to create form wizard (sequence of pages depending on data entered on previous ones)]]
+===[[how-to-write-a-json-service|How to write a JSON service]]
+===[[how-to-send-file-download|How to send a file (download)]]
+===[[how-to-send-file-upload|How to send a file (upload)]]
+== Js_of_ocaml
+===[[how-to-attach-ocaml-values-to-dom-elements|How to attach OCaml values to DOM elements]]
+===[[how-to-know-whether-the-browser-window-has-the-focus-or-not|How to know whether the browser window has the focus or not]]
+===[[how-to-build-js-object|How to build js object]]
+===[[how-to-stop-default-behaviour-of-events|How to stop default behaviour of events]]
+===[[how-to-call-an-ocaml-function-from-js-code|How to call an OCaml function from js code]]
+== Eliom client-server applications
+===[[how-to-call-a-server-side-function-from-client-side|How to call a server-side function from the client side]]
+===[[how-to-make-the-client-side-program-get-an-html-element-from-the-server-and-insert-it-in-the-page|How to make the client side program get an HTML element from the server and insert it in the page]]
+===[[how-to-attach-ocaml-values-to-the-html-nodes-sent-to-the-client|How to attach OCaml values to the HTML nodes sent to the client]]
+===[[how-to-iterate-on-all-sessions-for-one-user-or-all-tabs|How to iterate on all sessions for one user, or all tabs]]
+===[[how-to-implement-a-notification-system|How to implement a notification system]]
+===[[how-to-send-a-file-to-server-without-stopping-the-client-process|How to send a file to server without stopping the client process]]
+===[[how-to-detect-channel-disconnection|How to detect channel disconnection]]
+===[[how-to-detect-on-client-side-that-the-server-side-state-for-the-process-is-closed|How to detect on client side that the server side state for the process is closed]]
+== Eliom Server side
+===[[how-do-i-create-a-cryptographically-safe-identifier|How do I create a Cryptographically safe identifier]]
+===[[hash-password|Protecting passwords]]
+>>
diff --git a/tutos/8.0/manual/misc.wiki b/tutos/8.0/manual/misc.wiki
new file mode 100644
index 00000000..65d606c9
--- /dev/null
+++ b/tutos/8.0/manual/misc.wiki
@@ -0,0 +1,521 @@
+=Traditional web interaction in a client-server app=
+
+<<|outline target="documentation">>
+
+//The code of this tutorial has been tested with Eliom 6.0.// \\
+
+==Multi-user collaborative drawing application==
+
+We now want to turn our collaborative drawing application into a
+multi-user one. Each user will have their own drawing, where everyone
+can draw.
+
+See the
+[[https://github.com/ocsigen/graffiti/tree/master/extended/|full code of examples]].
+
+===Split application into multiple files and using several canvases===
+<<concepts | Complex eliom project\\Unique elements>>
+
+We first build a multi-canvas drawing application. Each drawing has
+its own URL. Everyone can create a new drawing by going to the
+corresponding URL.
+
+We need to refactor some parts. In particular, we need to handle
+different drawings separately. To do this, we turn all global
+variables, like the bus, into local ones.
+
+When an application grows, it becomes useful to split it into multiple
+files. For example, we will split graffiti into 4 files.
+
+* {{{common.ml}}}, which will be part of both client and server,
+  containing shared types and declarations,
+* {{{client.ml}}}, client-only part of the application,
+* {{{server.ml}}}, server-only part of the application, and
+* {{{graffiti.eliom}}}, which is the only part where we need to
+  include both client-side and server-side code
+
+===={{{common.ml}}}====
+
+It contains what was previously in {{{ [%shared ... ] }}}
+<<code language="ocaml"|
+type messages =
+  ((int * int * int) * int * (int * int) * (int * int))
+  [@@deriving json]
+
+let width = 700
+let height = 400
+>>
+
+===={{{client.ml}}}====
+
+It is almost the same code as what was enclosed in {{{ {client{ ... }}
+}}}, with the difference that what was previously in the client value
+{{{init_client}}} is now in the function {{{launch_client_canvas}}}.
+
+<<code language="ocaml"|
+open Common
+open Js_of_ocaml
+open Eliom_content
+
+let draw ctx ((r, g, b), size, (x1, y1), (x2, y2)) =
+  let color = CSS.Color.string_of_t (CSS.Color.rgb r g b) in
+  ctx##.strokeStyle := (Js.string color);
+  ctx##.lineWidth := float size;
+  ctx##beginPath;
+  ctx##(moveTo (float x1) (float y1));
+  ctx##(lineTo (float x2) (float y2));
+  ctx##stroke
+
+(* type containing all informations we need to stop interaction
+   inside the page *)
+type drawing_canceller =
+    { message_thread : unit Lwt.t;
+      (* the thread reading messages from the bus *)
+      drawing_thread : unit Lwt.t;
+      (* the arrow handling mouse events *)
+    }
+
+let stop_drawing { message_thread; drawing_thread } =
+  Lwt.cancel message_thread;
+  (* cancelling this thread also close the bus *)
+  Lwt.cancel drawing_thread
+>>
+
+<<| WTF? Notice that the client does not keep data from pages it left.>>
+{{{Lwt.cancel t}}} stops thread t. In this case it also closes the
+  bus on which t is listening. For more informations see the
+  <<a_manual project="lwt"| Lwt programming guide >> and
+  <<a_api project="eliom" subproject="client" | module Eliom_bus >>.
+
+<<code language="ocaml"|
+let launch_client_canvas bus image_elt canvas_elt slider =
+  let canvas = Html.To_dom.of_canvas canvas_elt in
+  let ctx = canvas##(getContext (Dom_html._2d_)) in
+  ctx##.lineCap := Js.string "round";
+
+  let img = Html.To_dom.of_img image_elt in
+  let copy_image () = ctx##(drawImage img (0.) (0.)) in
+  if Js.to_bool (img##.complete)
+  then copy_image ()
+  else img##.onload := Dom_html.handler
+    (fun ev -> copy_image (); Js._false);
+
+  (* The color palette: *)
+  let colorpicker, cp_sig = Ot_color_picker.make () in
+  Html.(Manip.appendChild (Manip.Elt.body ()) colorpicker);
+
+  let x = ref 0 and y = ref 0 in
+  let set_coord ev =
+    let x0, y0 = Dom_html.elementClientPosition canvas in
+    x := ev##.clientX - x0; y := ev##.clientY - y0 in
+  let compute_line ev =
+    let oldx = !x and oldy = !y in
+    set_coord ev;
+    let h, s, v = Eliom_shared.React.S.value cp_sig in
+    let r, g, b = Ot_color_picker.hsv_to_rgb h s v in
+    let rgb = int_of_float r, int_of_float g, int_of_float b in
+    let size_slider = Html.To_dom.of_input slider in
+    let size = int_of_string (Js.to_string size_slider##.value) in
+    (rgb, size, (oldx, oldy), (!x, !y))
+  in
+  let line ev =
+    let v = compute_line ev in
+    let _ = Eliom_bus.write bus v in
+    draw ctx v;
+    Lwt.return ()
+  in
+  let t = Lwt_stream.iter (draw ctx) (Eliom_bus.stream bus) in
+  let drawing_thread =
+    Js_of_ocaml_lwt.Lwt_js_events.(
+      mousedowns canvas (fun ev elt ->
+        Dom.preventDefault ev;
+        set_coord ev;
+        let%lwt () = line ev in
+        Lwt.pick [mousemoves Dom_html.document (fun a _ -> line a);
+	          let%lwt ev = mouseup Dom_html.document in line ev]))
+  in
+  { message_thread = t;
+    drawing_thread = drawing_thread }
+>>
+
+===={{{server.ml}}}====
+
+It contains almost all the server parts of the code.
+<<code language="ocaml"|
+open Eliom_content
+open Common
+open Lwt
+
+module My_app =
+  Eliom_registration.App (struct
+    let application_name = "graffiti"
+    let global_data_path = None
+  end)
+>>
+
+The main difference is that the bus is now local.
+<<code language="ocaml"|
+let launch_server_canvas () =
+  let bus = Eliom_bus.create [%json: messages] in
+
+  let draw_server, image_string =
+    let rgb_ints_to_floats (r, g, b) =
+      float r /. 255., float g /. 255., float b /. 255. in
+    let surface = Cairo.Image.create Cairo.Image.ARGB32 ~w:width ~h:height in
+    let ctx = Cairo.create surface in
+    ((fun (rgb, size, (x1, y1), (x2, y2)) ->
+
+      (* Set thickness of brush *)
+      let r, g, b = rgb_ints_to_floats rgb in
+      Cairo.set_line_width ctx (float size) ;
+      Cairo.set_line_join ctx Cairo.JOIN_ROUND ;
+      Cairo.set_line_cap ctx Cairo.ROUND ;
+      Cairo.set_source_rgb ctx r g b ;
+
+      Cairo.move_to ctx (float x1) (float y1) ;
+      Cairo.line_to ctx (float x2) (float y2) ;
+      Cairo.Path.close ctx ;
+
+      (* Apply the ink *)
+      Cairo.stroke ctx ;
+     ),
+     (fun () ->
+       let b = Buffer.create 10000 in
+       (* Output a PNG in a string *)
+       Cairo.PNG.write_to_stream surface (Buffer.add_string b);
+       Buffer.contents b
+     ))
+  in
+  let _ = Lwt_stream.iter draw_server (Eliom_bus.stream bus) in
+  bus,image_string
+
+let graffiti_info = Hashtbl.create 0
+
+let imageservice =
+  Eliom_registration.String.create
+    ~path:(Eliom_service.Path ["image"])
+    ~headers:
+       (Cohttp.Header.add_list (Cohttp.Header.init ())
+          [(Ocsigen_header.Name.(to_string cache_control), "no-cache") ;
+           (Ocsigen_header.Name.(to_string expires), string_of_int 0)])
+    ~meth:
+      (Eliom_service.Get
+         (let open Eliom_parameter in string "name" ** int "q"))
+    (* we add another parameter for the browser not to cache: at least
+       for chrome, there is no way to force the browser to reload the
+       image without leaving the application *)
+    (fun (name,_) () ->
+      try%lwt
+        let _ ,image_string = Hashtbl.find graffiti_info name in
+	Lwt.return (image_string (), "image/png")
+      with
+	| Not_found -> Lwt.fail Eliom_common.Eliom_404)
+
+let get_bus (name:string) =
+  (* create a new bus and image_string function only if it did not exists *)
+  try
+    fst (Hashtbl.find graffiti_info name)
+  with
+    | Not_found ->
+      let bus,image_string = launch_server_canvas () in
+      Hashtbl.add graffiti_info name (bus, image_string);
+      bus
+>>
+
+The main page now contains only a form to choose to which drawing you
+want to go.  The drawing will be sent by the
+{{{multigraffiti_service}}} service, registered in
+{{{graffiti.eliom}}}.
+
+<<code language="ocaml"|
+let main_service =
+  Eliom_service.create
+    ~path:(Eliom_service.Path [""])
+    ~meth:(Eliom_service.Get (Eliom_parameter.unit))
+    ()
+
+let multigraffiti_service =
+  Eliom_service.create
+    ~path:(Eliom_service.Path [""])
+    ~meth:(Eliom_service.Get (Eliom_parameter.(suffix (string "name"))))
+    ()
+
+let choose_drawing_form () =
+  Html.D.Form.get_form ~service:multigraffiti_service
+    (fun (name) ->
+       [Html.D.p [
+           Html.D.txt "drawing name: ";
+           Html.D.Form.input ~input_type:`Text ~name
+             Html.D.Form.string;
+           Html.D.br ();
+           Html.D.Form.input ~input_type:`Submit ~value:"Go"
+             Html.D.Form.string
+         ]])
+
+let oclosure_script =
+  Html.Id.create_global_elt
+    (Html.D.js_script
+       ~uri:(Html.D.Raw.uri_of_string "./graffiti_oclosure.js") ())
+
+let make_page body =
+  Lwt.return
+    (Html.D.html
+       (Html.D.head
+	  (Html.D.title (Html.D.txt "Graffiti"))
+ 	  [
+	    Html.D.css_link
+	      ~uri:(Html.D.Raw.uri_of_string"./css/closure/common.css") ();
+	    Html.D.css_link
+	      ~uri:(Html.D.Raw.uri_of_string"./css/closure/hsvpalette.css") ();
+	    Html.D.css_link
+	      ~uri:(Html.D.Raw.uri_of_string"./css/slider.css") ();
+            oclosure_script;
+	    Html.D.css_link
+	      ~uri:(Html.D.Raw.uri_of_string"./css/graffiti.css") ();
+          ])
+       (Html.D.body body))
+
+let () = My_app.register ~service:main_service
+  (fun () () ->
+    make_page [h1 [txt "Welcome to Multigraffiti"];
+	       choose_drawing_form ()])
+>>
+
+<<concept title="Global node and scripts"|
+  Sometimes we need to control when a script is loaded and reloaded on
+  page change. Since clicking on links in an Eliom application do not
+  reload the entire page, already loaded libraries stay loaded. But if
+  we simply add a script to each page, it will be loaded each time.
+  We usually don't want that.
+
+  Using <<a_api project="eliom" subproject="server"| val
+  Eliom_content.Html.Id.create_global_elt>> we can create an xml node
+  manipulated 'by reference'. If a reference to a script node is
+  included in a page, it will only be loaded the first time it appears
+  in the header. This is the case for {{{oclosure_script}}} above.
+>>
+===={{{graffiti.eliom}}}====
+
+Here is the code that mixes client and server parts.
+
+We first open the corresponding modules for each parts of the
+application.
+
+<<code language="ocaml"|
+[%%shared
+    open Eliom_content.Html.D
+    open Common
+]
+[%%client
+    open Client
+]
+open Server
+>>
+
+And then we define a function initializing the client application by
+side effects in a client value.
+
+<<code language="ocaml"|
+let start_drawing name image canvas slider =
+  let bus = get_bus name in
+  ignore [%client
+    (let canceller =
+       launch_client_canvas ~%bus ~%image ~%canvas ~%slider
+     in
+     Eliom_client.onunload (fun () -> stop_drawing canceller; None)
+     : unit)
+  ]
+>>
+
+The function registered by <<a_api project="eliom"
+subproject="client"| val Eliom_service.onunload >> will be called when
+the page change inside the application.
+
+And we finally register the service sending a drawing:
+
+<<code language="ocaml"|
+let counter = ref 0
+
+let () =
+  My_app.register ~service:multigraffiti_service (fun name () ->
+    (* Some browsers won't reload the image, so we force
+          them by changing the url each time. *)
+    incr counter;
+    let image =
+      img ~alt:name
+        ~src:(make_uri ~service:imageservice (name,!counter)) ()
+    in
+    let slider =
+      Form.input
+        ~a:[
+          a_id "slider";
+          a_input_min (`Number 1);
+          a_input_max (`Number 80)
+        ]
+        ~input_type:`Range
+        Form.int
+    in
+    let canvas =
+      canvas ~a:[a_width width; a_height height]
+        [txt "your browser doesn't support canvas"; br (); image]
+    in
+    start_drawing name image canvas slider;
+    make_page
+      [h1 [txt name];
+       choose_drawing_form ();
+       canvas;
+       div [slider]])
+>>
+
+At this point, you can run your application on the server provided
+that you installed the css and images directories in the main
+directory of your application, build it using this
+[[https://github.com/ocsigen/graffiti/tree/master/extended/Makefile|Makefile]]
+along with the appropriate
+[[https://github.com/ocsigen/graffiti/tree/master/extended/Makefile.options|Makefile.options]],
+and configured it using
+[[https://github.com/ocsigen/graffiti/tree/master/extended/graffiti.conf.in|graffiti.conf.in]],
+as the basis for your configuration file.
+
+===Mixing client-server application with traditional web interaction===
+
+We now want to restrict the site to connected users.
+
+From the previous chapter, we copy the code handling users to
+{{{server.ml}}}:
+
+<<code language="ocaml"|
+let connection_service = Eliom_service.create
+    ~path:Eliom_service.No_path
+    ~meth:(Eliom_service.Post (
+      Eliom_parameter.unit,
+      Eliom_parameter.(string "name" ** string "password")
+    ))
+    ()
+
+let disconnection_service = Eliom_service.create
+    ~path:Eliom_service.No_path
+    ~meth:(Eliom_service.Post (Eliom_parameter.unit, Eliom_parameter.unit))
+    ()
+
+let create_account_service =
+  Eliom_service.create
+    ~path:(Eliom_service.Path [""])
+    ~meth:(Eliom_service.Post
+             (Eliom_parameter.unit,
+              Eliom_parameter.(string "name" ** string "password")))
+
+let user_table = Ocsipersist.Polymorphic.open_table "user_table"
+
+let check_pwd name pwd =
+  try%lwt
+    let%lwt saved_password = Ocsipersist.Polymorphic.find user_table name in
+    Lwt.return (pwd = saved_password)
+  with Not_found -> Lwt.return false
+
+let () = Eliom_registration.Action.register
+  ~service:create_account_service
+  (fun () (name, pwd) -> Ocsipersist.Polymorphic.add user_table name pwd)
+
+let () = Eliom_registration.Action.register
+  ~service:connection_service
+  (fun () (name, password) ->
+    match%lwt check_pwd name password with
+      | true -> Eliom_state.set_volatile_data_session_group
+	~scope:Eliom_common.default_session_scope name;
+	Lwt.return ()
+      | false -> Lwt.return ())
+
+let () =
+  Eliom_registration.Action.register
+    ~service:disconnection_service
+    (fun () () ->
+      Eliom_state.discard ~scope:Eliom_common.default_session_scope ())
+
+let disconnect_box () =
+  Html.D.Form.post_form ~service:disconnection_service
+    (fun _ ->
+       [Html.D.p [
+           Html.D.Form.input
+             ~input_type:`Submit ~value:"Log out"
+             Html.D.Form.string
+         ]
+       ]) ()
+
+let login_name_form service button_text =
+  Html.D.Form.post_form ~service
+    (fun (name1, name2) ->
+       [Html.D.p [
+           Html.D.txt "login: ";
+           Html.D.Form.input ~input_type:`Text ~name:name1
+             Html.D.Form.string;
+           Html.D.br ();
+           Html.D.txt "password: ";
+           Html.D.Form.input ~input_type:`Password ~name:name2
+             Html.D.Form.string;
+           Html.D.br ();
+           Html.D.Form.input ~input_type:`Submit ~value:button_text
+             Html.D.Form.string
+         ]]) ()
+>>
+
+We make a customized registration module such that disconnected users
+(those for which the username reference is not set), are automaticaly
+shown a connection box. This way the other pages can assume that the
+username is always available.
+
+<<code language="ocaml"|
+let default_content () =
+  make_page
+    [Html.D.h1 [Html.D.txt "Welcome to Multigraffiti"];
+     Html.D.h2 [Html.D.txt "log in"];
+     login_name_form connection_service "Connect";
+     Html.D.h2 [Html.D.txt "create account"];
+     login_name_form create_account_service "Create account";]
+
+module Connected_translate =
+struct
+  type page = string -> My_app.page Lwt.t
+  let translate page =
+    match Eliom_state.get_volatile_data_session_group
+      ~scope:Eliom_common.default_session_scope () with
+	| None -> default_content ()
+	| Some username -> page username
+end
+
+module Connected =
+  Eliom_registration.Customize (My_app) (Connected_translate)
+>>
+
+We replace the previous {{{main_service}}} registration :
+
+<<code language="ocaml"|
+let () = My_app.register ~service:main_service
+  (fun () () ->
+    make_page [h1 [txt "Welcome to Multigraffiti"];
+	       choose_drawing_form ()])
+>>
+
+by :
+
+<<code language="ocaml"|
+let ( !% ) f = fun a b -> return (fun c -> f a b c)
+
+let () = Connected.register
+  ~service:main_service
+  !% (fun () () username ->
+    make_page
+      [Html.D.h1 [Html.D.txt ("Welcome to Multigraffiti " ^ username)];
+       choose_drawing_form ()])
+>>
+
+to use that, in {{{graffiti.eliom}}} we just replace add a call
+to {{{disconnect_box}}}
+<<code language="ocaml"|
+      [h1 [txt name];
+       disconnect_box ();
+       choose_drawing_form ();
+       canvas;])
+>>
+
+[[wiki:manual/interaction|prev]]
diff --git a/tutos/8.0/manual/mobile.wiki b/tutos/8.0/manual/mobile.wiki
new file mode 100644
index 00000000..8fce4220
--- /dev/null
+++ b/tutos/8.0/manual/mobile.wiki
@@ -0,0 +1,43 @@
+= Mobile applications with Ocsigen
+
+Since Eliom 6.0, the Ocsigen framework provides infrastructure for
+building mobile applications. This enables rapid development of
+Android, iOS, and Windows Mobile apps with the same APIs and
+programming style as for a regular client-server Web application. In
+fact, one single codebase can be used to produce all these
+applications simultaneously.
+
+The easiest way to get started with Ocsigen-based mobile development
+is to use [[wiki("ocsigen-start"):|Ocsigen-start]].  Ocsigen-start is a
+library and skeleton for building "minimum viable product" Web
+applications with standard functionality like users, notifications,
+etc. This skeleton is immediately usable as a mobile application. You
+can install {{{ocsigen-start}}} via OPAM
+( {{{opam install ocsigen-start}}} )
+and instantiate its template with the command
+{{{eliom-distillery -name ocsimobile -template os.pgocaml}}}.  For
+launching the mobile application, follow the instructions in the
+template's {{{README.md}}}.
+
+== Programming style
+
+You need to follow a certain programming style for your Eliom code to
+work flawlessly inside an Ocsigen-start mobile app. This style is
+described in the <<a_manual project="eliom" chapter="clientserver-services"|chapter on
+client services>> from the Eliom manual. The idea is that you
+implement as much of your application as possible in shared sections
+({{{[%%shared ...]}}} or {{{let%shared ... = ...}}}), and that you
+register handlers for your Eliom services on both the client and the
+server. The Ocsigen-start template already uses the above programming
+style, so refer to the files generated by {{{eliom-distillery}}} for
+inspiration.
+
+== Going further
+
+* [[wiki("ocsigen-toolkit"):|Ocsigen-toolkit]] provides a set of user
+  interface widgets that are particularly useful for mobile applications.
+
+* Danny Willems provides a comprehensive set of
+  [[https://github.com/dannywillems/ocaml-cordova-plugin-list|OCaml
+  bindings to Cordova plugins]]. These can readily be used for your
+  Eliom mobile application.
diff --git a/tutos/8.0/manual/music.wiki b/tutos/8.0/manual/music.wiki
new file mode 100644
index 00000000..4880b4f1
--- /dev/null
+++ b/tutos/8.0/manual/music.wiki
@@ -0,0 +1,33 @@
+=Listening music=
+<<concepts |Persistence of the client application>>
+
+We will add an audio player to the page that will stay when page
+changes. This emphasises the fact that browsing inside an application
+does not stop the client side code: the music keeps playing when the
+content of the page and the url change.
+
+We first create the player node at toplevel.
+<<code language="ocaml"|
+let player =
+  Eliom_content.Html.Id.create_global_elt
+    (audio
+       ~srcs:(make_uri (Eliom_service.static_dir ())
+                  ["music.ogg"],
+              [])
+       ~a:[a_autoplay (`Autoplay);a_controls (`Controls)]
+       [txt "Your browser does not support audio element" ])
+>>
+
+And we insert the player in the page.
+
+And that's all! Since the {{{player}}} node is declared unique, no new
+player is created when the page changed: this is exact same node.
+
+<<wip | In fact browsers stop the player as soon as the dom
+element is manipulated. That happens when we change the page: to
+continue playing the player should not be present as an element of the
+page>>
+
+To run this example, you will need to add an ogg file in the static directory.
+If you can't find one, there is one here:
+[[http://www.gnu.org/music/free-software-song.html]].
diff --git a/tutos/8.0/manual/ocsipersist.wiki b/tutos/8.0/manual/ocsipersist.wiki
new file mode 100644
index 00000000..43fe6cfc
--- /dev/null
+++ b/tutos/8.0/manual/ocsipersist.wiki
@@ -0,0 +1,49 @@
+=Lightweight database using Ocsipersist=
+<<concepts |Persistent tables with Ocsipersist>>
+
+Ocsipersist is a module for persistent references and tables.
+
+For persistent references, Eliom has a higher level interface,
+called //Eliom references//, and you probably want to use it instead
+of using Ocsipersist directly.
+For example persistent Eliom references of scope session group
+can be used to store information about a user (if the session group
+corresponds to the user).
+
+Ocsipersist can still be useful for creating persistent key-value tables,
+if you do not need the full power of a SQL database.
+
+This tutorial shows how to implement a table for storing users and passwords.
+
+We first create a table:
+<<code language="ocaml"|
+let user_table = Ocsipersist.Polymorphic.open_table "user_table"
+>>
+
+Then we can easily handle the user management code:
+
+<<code language="ocaml"|
+let check_pwd name pwd =
+  try%lwt
+    lwt saved_password = Ocsipersist.Polymorphic.find user_table name in
+    Lwt.return (pwd = saved_password)
+  with
+    Not_found -> Lwt.return false
+
+let () = Eliom_registration.Action.register
+  ~service:create_account_service
+  (fun () (name, pwd) -> Ocsipersist.Polymorphic.add user_table name pwd)
+
+let () = Eliom_registration.Action.register
+  ~service:connection_service
+  (fun () (name, password) ->
+    match%lwt check_pwd name password with
+      | true -> Eliom_reference.set username (Some name)
+      | false -> Lwt.return ())
+>>
+
+<<concept title="Ocsipersist"|
+ Ocsipersist implements simple typed key/value tables.
+ It can use different backends (currently sqlite and dbm).
+ For more informations see <<a_api project="ocsigenserver"| type Ocsipersist.table >>.
+>>
diff --git a/tutos/8.0/manual/pictures.wiki b/tutos/8.0/manual/pictures.wiki
new file mode 100644
index 00000000..6cbff690
--- /dev/null
+++ b/tutos/8.0/manual/pictures.wiki
@@ -0,0 +1,182 @@
+=Saving favorite pictures=
+<<concepts |Atom feed>>
+
+We will now add a button to the Graffiti application to save the current
+image. The images will be saved to the filesystem using the module
+<<a_api project="lwt"| module Lwt_io>>. We will then make an Atom feed
+with the saved images using [[https://github.com/Cumulus/Syndic|Syndic]].
+
+To install it, do:
+{{{
+opam install syndic
+}}}
+
+We save the images in the directory containing the static contents
+under the directory {{{images_saved/username}}}. The {{{username}}}
+directory is created if needed. If it already exists {{{mkdir}}} fails
+and we do nothing.
+
+We will add this code in a new file:
+===={{{feed.ml}}}====
+<<code language="ocaml"|
+open Eliom_content
+open Lwt.Infix
+open Html.F
+open Server
+
+let static_dir =
+  match Eliom_config.get_config () with
+  | [Element ("staticdir", [], [PCData dir])] ->
+    dir
+  | [] ->
+    raise (Ocsigen_extensions.Error_in_config_file
+             ("<staticdir> option required for <graffiti>"))
+  | _ ->
+    raise (Ocsigen_extensions.Error_in_config_file
+             ("Unexpected content inside graffiti config"))
+
+let create_dir dir =
+  try%lwt Lwt_unix.mkdir dir 0o777 with
+  | Unix.Unix_error (Unix.EEXIST, "mkdir", _) -> Lwt.return_unit
+  | _ ->
+      Eliom_lib.debug "could not create the directory %s" dir;
+      Lwt.return_unit
+
+let image_dir name =
+  let dir = static_dir ^ "/graffiti_saved/" in
+  let%lwt () = create_dir dir in
+  let dir = dir ^ Eliom_lib.Url.encode name in
+  let%lwt () = create_dir dir in
+  Lwt.return dir
+
+let make_filename name number =
+  image_dir name >|= ( fun dir -> (dir ^ "/" ^ (string_of_int number) ^ ".png") )
+
+let save image name number =
+  let%lwt file_name = make_filename name number in
+  let%lwt out_chan = Lwt_io.open_file ~mode:Lwt_io.output file_name in
+  Lwt_io.write out_chan image
+>>
+
+We number images and associate to each image the time of creation. It
+is stocked in an <<a_api project="eliom" subproject="server"| module Ocsipersist >>
+table.
+
+<<code language="ocaml"|
+let image_info_table = Ocsipersist.Polymorphic.open_table "image_info_table"
+>>
+
+For each user, we stock a value of type\\
+{{{ int * CalendarLib.Calendar.t * ((int * CalendarLib.Calendar.t) list)}}}.
+The first integer is the name under which will be saved the image, the first
+time is the last update for that user and the list contains the names and
+times of old images. We need those times to timestamp the entries of the feed.
+
+<<code language="ocaml"|
+let save_image username =
+  let now = CalendarLib.Calendar.now () in
+  let%lwt image_info_table = image_info_table in
+  let%lwt number,_,list =
+    try%lwt Ocsipersist.Polymorphic.find image_info_table username with
+    | Not_found -> Lwt.return (0,now,[])
+    | e -> Lwt.fail e
+  in
+  let%lwt () = Ocsipersist.Polymorphic.add image_info_table
+      username (number+1,now,(number,now)::list) in
+  let (_,image_string) = Hashtbl.find graffiti_info username in
+  save (image_string ()) username number
+
+let save_image_service =
+  Eliom_service.create
+    ~meth:(Eliom_service.Post
+             (Eliom_parameter.unit, Eliom_parameter.string "name"))
+    ~path:Eliom_service.No_path ()
+
+let () =
+  Eliom_registration.Action.register
+    ~service:save_image_service (fun () name -> save_image name)
+
+let save_image_box name =
+  Lwt.return
+    (Html.D.Form.post_form ~service:save_image_service
+       (fun param_name ->
+         [p [Html.D.Form.input ~input_type:`Hidden ~name:param_name
+              ~value:name Html.D.Form.string;
+             Html.D.Form.button_no_value ~button_type:`Submit [txt "save"]]])
+       ())
+>>
+
+We find the url of the images with <<a_api project="eliom"
+subproject="server"| val Eliom_service.static_dir >>.  It is a service
+taking file path as parameter, serving the content of the static
+directory. We use <<a_api project="eliom" subproject="server"| val
+Eliom_uri.make_string_uri >> to get the url as a string.
+
+<<code language="ocaml"|
+let feed_service =
+  Eliom_service.create
+    ~path:(Eliom_service.Path ["feed"])
+    ~meth:(Eliom_service.Get (Eliom_parameter.string "name"))
+    ()
+
+let local_filename name number =
+  ["graffiti_saved"; Eliom_lib.Url.encode name ; (string_of_int number) ^ ".png"]
+
+let rec entries name list = function
+  | 0 -> []
+  | len ->
+    match list with
+    | [] -> []
+    | (n,saved)::q ->
+      let uri =
+        Html.D.make_uri ~absolute:true
+          ~service:(Eliom_service.static_dir ())
+          (local_filename name n)
+        |> Xml.string_of_uri
+        |> Uri.of_string in
+      let content = Syndic.Atom.Src (None, uri) in
+      let authors = (Syndic.Atom.author name), [] in
+      let title : Syndic.Atom.text_construct =
+        Syndic.Atom.Text ("graffiti " ^ name ^ " " ^ (string_of_int n)) in
+      let entry =
+        Syndic.Atom.entry ~content ~id:uri ~authors ~title ~updated:saved () in
+      entry::(entries name q (len - 1))
+
+let feed_of_string_page xml =
+  xml
+  |> Syndic.Atom.to_xml
+  |> Syndic.XML.to_string
+  |> fun string -> string, ""
+
+let feed name () =
+  let id =
+    Xml.string_of_uri
+      (Html.D.make_uri ~absolute:true ~service:feed_service name)
+    |> Uri.of_string in
+  let title : Syndic.Atom.text_construct =
+    Syndic.Atom.Text ("nice drawings of " ^ name) in
+  Lwt.catch
+    (fun () ->
+       let%lwt image_info_table = image_info_table in
+       Ocsipersist.Polymorphic.find image_info_table name >|=
+      (fun (number,updated,list) ->
+         Syndic.Atom.feed ~id ~updated ~title (entries name list 10)
+       |> feed_of_string_page))
+    ( function Not_found ->
+      let now = Option.get (Ptime.of_float_s (Unix.gettimeofday ())) in
+      Lwt.return (Syndic.Atom.feed ~id ~updated:now ~title []
+                  |> feed_of_string_page)
+             | e -> Lwt.fail e )
+
+let () = Eliom_registration.String.register ~service:feed_service feed
+>>
+
+And then use the new module as follow:
+
+<<code language="ocaml"|
+  [ a Feed.feed_service [txt "atom feed"] name;
+    div (if name = username
+      then [Feed.save_image_box name]
+      else [txt "no saving"]);
+  ]
+>>
diff --git a/tutos/8.0/manual/reactivemediaplayer.wiki b/tutos/8.0/manual/reactivemediaplayer.wiki
new file mode 100644
index 00000000..245ac1d9
--- /dev/null
+++ b/tutos/8.0/manual/reactivemediaplayer.wiki
@@ -0,0 +1,291 @@
+=Reactive Media Player=
+
+You should read the [[site:/tuto/manual/music|Playing Music]] tutorial before this one.
+
+Since version 4, Eliom embeds the
+[[http://erratique.ch/logiciel/react|React]] library in order to
+provide reactive HTML elements
+(<<a_api project="eliom" subproject="server"| module Eliom_content.Html.R >>).
+
+
+<<webonly| The final Eliom code is available
+[[https://github.com/ocsigen/tutorial/tree/master/files/tutorial/chapter3/reactive_media_player/reactive_media_player.eliom|for download]]. >>
+
+==@@id="basics"@@ Basics==
+
+A reactive element, or more generally a reactive value, depends on the
+current value of a signal. For instance :
+
+<<code language="ocaml" class="shared"|
+[%%shared
+open Eliom_content
+open Html
+]
+>>
+
+<<code language="ocaml" class="client"|
+let%client s, set_s = React.S.create 0 (* signal creation *)
+>>
+
+<<code language="ocaml" class="shared"|
+let%shared example_div () =
+  C.node {{R.txt (React.S.map string_of_int s)}}
+
+let%shared incr_button =
+  D.(button
+      ~button_type:`Button
+      ~a:[a_onclick [%client fun _ -> set_s (succ (React.S.value s)) ]]
+      [txt "Increment"])
+>>
+
+The signal {{{s}}} carries an int value initialized at 0 and
+{{{set_s}}} is the update function generating an occurence of the
+signal.
+
+{{{example_div}}} is a {{{<div>}}} containing a string which depends
+on the value of s.
+
+The magic part: we never have to explicitly update
+{{{example_div}}}. Its behavior is declaratively described in it's own
+code, and not in the code of the button.
+
+<<concept title="Client node on the server"|
+{{{C.node}}} takes a client node and brings it to the server side.
+>>
+
+<<concept title="Step semantics"|
+**Warning** If you haven't read the React semantics, be aware of this:
+a step occurence of a signal {{{s}}} happens when the update function
+is called on the signal or on a other signal {{{s'}}} which {{{s}}}
+depends on. But moreover, this update call must at least **modify**
+the signal current value, otherwise it's not a step.
+
+This can be seen when there are side effects (like print) in the code
+of functions mapped to the signal. If the update function does not
+modify the signal value, the printing does not happen.
+
+The test equality function of a signal can be set in the {{{eq}}}
+optional parameters of React.S functions producing a signal (like
+{{{create}}}). >>
+
+
+
+==@@id="frp_medial_player"@@ Functional Reactive Media Player==
+
+
+
+This part explains how to create a simple media player, similar to the
+[[site:/tuto/manual/music|Playing Music]] tutorial but with custom
+controls.We will apply
+[[https://en.wikipedia.org/wiki/Functional_reactive_programming|FRP (Functional Reactive Programming)]].
+
+
+
+In order to provide a short tutorial, we only create three controls:
+play, pause and seek/progress bar.  So, let's write the corresponding
+type:
+
+<<code language="ocaml" class="shared"|
+[%%shared
+    open Eliom_content
+    open Html
+
+    type action = Play | Pause | Seek of float
+]
+>>
+
+<<code language="ocaml" class="client"|
+let%client media_s, set_media_s = React.S.create Pause
+>>
+
+Each HTML element emits a signal value corresponding to its action.
+It is enough to create our "play" and "pause" inputs.
+
+<<code language="ocaml" class="server"|
+let pause_button () =
+  D.(Form.button_no_value
+       ~button_type:`Button
+       ~a:[a_onclick  [%client  fun _ -> set_media_s Pause ]]
+       [txt "Pause"])
+
+let play_button () =
+  D.(Form.button_no_value
+       ~button_type:`Button
+       ~a:[a_onclick  [%client  fun _ -> set_media_s Play ]]
+       [txt "Play"])
+>>
+
+<<concept title="Abstract the Js events"|
+A nice thing about FRP is that we can abstract JavaScript
+events and only use signals.
+The JS event handler is only a function raising a signal.
+>>
+
+
+
+To use our buttons, we now create a media (audio or video) HTML
+element on the server side.
+
+<<code language="ocaml" class="server"|
+let media_uri =
+  Html.D.make_uri
+    ~service:(Eliom_service.static_dir ())
+    ["hb.mp3"]
+
+let media_tag () =
+  let media = D.(audio ~src:media_uri [txt "alt"]) in
+  let _ = [%client
+    (Lwt.async (fun () ->
+         let media = To_dom.of_audio ~%media in
+         let media_map = function
+           | Play ->
+             media##play
+           | Pause ->
+             media##pause
+           | Seek f ->
+             media##.currentTime := (f /. 100. *. media##.duration)
+         in Lwt_react.S.keep (React.S.map media_map media_s) ;
+         Lwt_js_events.timeupdates media (fun _ _ ->
+             set_progress_s (media##.currentTime, media##.duration) ;
+             Lwt.return ()
+           ))
+     : unit)
+  ] in
+  media
+>>
+
+The function {{{media_tag}}} builds an {{{<audio>}}} element.  The
+code in {{{ [%client ... ] }}} is on the client part. It's an Lwt
+thread that maps a function {{{media_action -> unit}}} to the signal
+{{{media_s}}}.
+
+<<concept title="Playing video"|
+The code for playing video is conceptually similar. You just replace
+the {{{audio}}} tag by a {{{video}}} tag. But be careful, not all
+browsers are compatible with all formats.
+>>
+
+<<code language="ocaml" class="server"|
+module React_Player_app =
+  Eliom_registration.App
+    (struct
+      let application_name = "react_player"
+    end)
+
+let media_service =
+  Eliom_service.create
+    ~path:(Eliom_service.Path [])
+    ~meth:(Eliom_service.Get Eliom_parameter.unit)
+    ()
+
+let () =
+  React_Player_app.register
+    ~service:media_service
+    (fun name () ->
+       let body =
+         D.(body [
+             h2 [txt "Media"];
+             media_tag ();
+             div [play_button (); pause_button (); progress_bar ()]
+           ])
+       in
+       Lwt.return (Eliom_tools.D.html ~title:"Media" ~css:[] body))
+>>
+
+Now you should have an ΗΤΜL node with an audio tag, and two buttons:
+play and pause. The progress bar is slightly harder to understand, but
+thanks to FRP, very easy to write.  It's basically an {{{input}}} with
+{{{range}}} type. In our program, the progress bar must emit the
+signal {{{media_s}}} with the value {{{Seek f}}} at input handling.
+Then, it must evolve during media playback, for which we need another
+signal. To conclude, we must check that the display (the value) of the
+progress bar is not modified when the user is seeking.
+
+<<code language="ocaml" class="client"|
+let%client progress_s, set_progress_s = React.S.create (0., 0.)
+
+let%client unblock_s, set_unblock_s = React.S.create true
+>>
+
+<<code language="ocaml" class="server"|
+let progress_bar () =
+  let progress_value =
+    [%client
+      (let f (time, duration) =
+         if duration = 0. then 0. else time /. duration *. 100.
+       in
+       React.S.map f progress_s
+       : float React.signal)
+    ] in
+  let attrs = D.([
+      a_input_min 0.;
+      a_input_max 100.;
+      a_onmousedown [%client fun _ -> set_unblock_s false];
+      a_onmouseup [%client fun _ -> set_unblock_s true];
+      C.attr [%client
+        R.a_value
+          (React.S.map (Printf.sprintf "%0.f")
+             (React.S.on unblock_s 0. ~%progress_value))]
+    ])
+  in
+  let d_input =
+    D.Form.input ~input_type:`Range ~value:0. ~a:attrs
+      D.Form.float
+  in
+  let _ = [%client
+    (Lwt.async (fun () ->
+         let d_input = To_dom.of_input ~%d_input in
+         Lwt_js_events.inputs d_input (fun _ _ ->
+             set_media_s (Seek (Js.parseFloat d_input##.value)) ;
+             Lwt.return ()
+           ))
+     : unit)
+  ] in
+  d_input
+>>
+
+<<concept title="Reactive attributes and React.S.on" |
+
+The function {{{R.a_value}}}
+(under <<a_api project="eliom" subproject="server"| module Eliom_content.Html >>)
+is a reactive attribute value. {{{React.S.on c d s}}} is equal to
+{{{s}}} when {{{c}}} is true, otherwise it is equal to {{{d}}} (in
+case {{{c}}} has never been true). Which means we update the attribute
+value of our input only if unblock is true.
+
+>>
+
+To end this tutorial, you can add a {{{progress_bar ()}}} call inside
+the div containing play and pause. We also need a mechanism which
+emits the {{{progress_s}}} signal. We modify the media tag with an
+eventhandler on {{{timeupdate}}}.
+
+<<code language="ocaml" class="server"|
+let media_tag () =
+  let media = D.(audio ~src:media_uri [txt "alt"]) in
+  let _ = [%client
+    (Lwt.async (fun () ->
+         let media = To_dom.of_audio ~%media in
+         let media_map = function
+           | Play ->
+             media##play
+           | Pause ->
+             media##pause
+           | Seek f ->
+             media##.currentTime := (f /. 100. *. media##.duration)
+         in Lwt_react.S.keep (React.S.map media_map media_s) ;
+         Lwt_js_events.timeupdates media (fun _ _ ->
+             set_progress_s (media##.currentTime, media##.duration) ;
+             Lwt.return ()
+           ))
+     : unit)
+  ] in
+  media
+>>
+
+
+
+====Exercises====
+
+* Add a control to set the volume
+* Add an {{{Eliom_bus}}} to control several clients
diff --git a/tutos/8.0/manual/rest.wiki b/tutos/8.0/manual/rest.wiki
new file mode 100644
index 00000000..76ca4401
--- /dev/null
+++ b/tutos/8.0/manual/rest.wiki
@@ -0,0 +1,506 @@
+=RESTful JSON API using Eliom=
+<<concepts|RESTful API\\PUT and DELETE services>>
+
+This tutorial will show you how to create a simple, yet complete, REST API
+using JSON as the serialization format.
+
+To illustrate our example, let's say we want to give access to a database of
+locations storing a description and coordinates (latitude and longitude).
+
+To be RESTful, our interface will comply with the following principles:
+
+* URLs and GET params identify resources
+* HTTP methods are used to define actions to perform (GET, POST, PUT, DELETE)
+* GET action is safe (no side-effect)
+* PUT and DELETE actions are idempotent
+* Requests are stateless
+
+With this in mind, our goal will be to implement CRUD (Create, Read, Update,
+Delete) functions to handle our resources. We want the following requests to be
+valid:
+
+{{{GET http://localhost/}}} will return all available locations.
+
+{{{GET http://localhost/ID}}} will return location associated to {{{ID}}}.
+
+{{{POST http://localhost/ID}}} with content:
+
+<<code language="json"|
+{
+  "description": "Paris",
+  "coordinates": {
+    "latitude": 48.8567,
+    "longitude": 2.3508
+  }
+}
+>>
+
+will store this location in the database.
+
+{{{PUT http://localhost/ID}}}, with some content, will update the location
+associated to {{{ID}}}.
+
+{{{DELETE http://localhost/ID}}} will delete the location associated to
+{{{ID}}}.
+
+==@@id="requirements"@@ Requirements==
+
+* eliom >= 4.0
+* yojson
+* ppx_deriving
+* ppx_deriving_yojson
+
+You need some knowledge about Eliom to be able to fully understand this
+tutorial. It's not meant to be an Eliom introduction.
+
+The following browser extensions are useful to manually test your REST APIs:
+
+* [[https://addons.mozilla.org/en-US/firefox/addon/restclient/|RESTClient]] for
+Firefox
+*
+[[https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm|Postman]]
+for Chrome
+
+==@@id="types"@@ Data types==
+
+We start by defining our database types, that is to say the way we will
+represent our locations and associated information. Each location will be
+associated to a unique and arbitrary identifier, and will hold the following
+information: a description and coordinates (made of a latitude and a
+longitude).
+
+We represent coordinates with decimal degrees, and use the
+{{{ppx_deriving_yojson}}} library to parse and generate JSON serialization of our
+types.
+
+We use a dedicated {{{error}}} type returned when something is wrong with the
+request itself or with the processing of the request.
+
+As for the database, we use a simple {{{Ocsipersist}}} table.
+
+<<code language="ocaml"|
+type coordinates = {
+  latitude : float;
+  longitude : float;
+} [@@deriving yojson]
+
+type location = {
+  description : string option;
+  coordinates : coordinates;
+} [@@deriving yojson]
+
+(* List of pairs (identifier * location) *)
+type locations =
+  (string * location) list
+  [@@deriving yojson]
+
+type error = {
+  error_message : string;
+} [@@deriving yojson]
+
+let db : location Ocsipersist.table Lwt.t =
+  Ocsipersist.Polymorphic.open_table "locations"
+>>
+
+<<concept title="Syntax extensions"|
+
+In order to successfully build this tutorial's source code, your
+{{{Makefile.options}}} must contain the following settings:
+<<code language="makefile"|
+# OCamlfind packages for the server
+SERVER_PACKAGES := ppx_deriving_yojson lwt_ppx js_of_ocaml-ppx.deriving
+# OCamlfind packages for the client
+CLIENT_PACKAGES := lwt_ppx ppx_deriving_yojson js_of_ocaml-ppx js_of_ocaml-ppx.deriving
+>>
+
+This is due to the fact, that in the code snippet above we use a syntax extension
+provided by the {{{ppx_deriving_yojson}}} package.//
+>>
+
+==@@id="services"@@ Services definition==
+
+First, let's define common service parameters:
+
+* The {{{path}}} of the API: it's the same for all services.
+
+* The GET parameter, which is an optional identifier given as a URL suffix. We
+set it as optional so we can distinguish GET requests for all resources or a
+single one, and return a detailed error if the identifier is missing in POST,
+PUT and DELETE requests. An alternative would be to use two services at the same
+path (one with id and the other without).
+
+<<code language="ocaml"|
+let path = Eliom_service.Path [""]
+
+let get_params =
+  Eliom_parameter.(suffix (neopt (string "id")))
+>>
+
+Next step is to define our API services. We define four of them with the same
+path, using the four HTTP methods at our disposal:
+
+* GET method will be used to access the database, either all of it if no
+identifier is provided, or a single resource otherwise. An error will be
+returned if no resource matches the identifier.
+
+* POST method will be used to create a new resource (or update it if it already
+exists). We set a single POST parameter: {{{Eliom_parameter.raw_post_data}}},
+in order to retrieve raw JSON and bypass POST parameters decoding.
+
+* PUT method will be used to update an existing resource. An error will be
+returned if no resource matches the identifier. We don't need to define POST
+parameter, PUT services takes {{{Eliom_parameter.raw_post_data}}} as default
+content.
+
+* DELETE method will be used to delete an existing resource. An error will be
+returned if no resource matches the identifier.
+
+<<code language="ocaml"|
+let read_service =
+  Eliom_service.create
+    ~path
+    ~meth:(Eliom_service.Get get_params)
+    ()
+
+let create_service =
+  Eliom_service.create
+    ~path
+    ~meth:(Eliom_service.Post (get_params, Eliom_parameter.raw_post_data))
+    ()
+
+let update_service =
+  Eliom_service.create
+    ~path
+    ~meth:(Eliom_service.Put get_params)
+    ()
+
+let delete_service =
+  Eliom_service.create
+    ~path
+    ~meth:(Eliom_service.Delete get_params)
+    ()
+>>
+
+==@@id="handlers"@@ Handlers==
+
+Let's start the handlers definition with a few helper values and functions
+used by handlers.
+
+Since we use the low-level {{{Eliom_registration.String.send}}} function to
+send our response, we wrap it in three specialized functions: {{{send_json}}},
+{{{send_error}}} and {{{send_success}}} (this one only send the 200 OK status
+code, without any content).
+
+Another function helps us to check the received {{{Content-type}}} is the
+expected one, by matching it against a MIME type. In our example, we'll verify
+that we are receiving JSON.
+
+The {{{read_raw_content}}} function retrieve at most {{{length}}} characters
+from the {{{raw_content}}} Ocsigen stream.
+
+<<code language="ocaml"|
+let json_mime_type = "application/json"
+
+let send_json ~code json =
+  Eliom_registration.String.send ~code (json, json_mime_type)
+
+let send_error ~code error_message =
+  let json = Yojson.Safe.to_string (error_to_yojson {error_message}) in
+  send_json ~code json
+
+let send_success () =
+  Eliom_registration.String.send ~code:200 ("", "")
+
+let check_content_type ~mime_type content_type =
+  match content_type with
+  | Some ((type_, subtype), _)
+      when (type_ ^ "/" ^ subtype) = mime_type -> true
+  | _ -> false
+
+let read_raw_content ?(length = 4096) raw_content =
+  let content_stream = Ocsigen_stream.get raw_content in
+  Ocsigen_stream.string_of_stream length content_stream
+>>
+
+Then we define our handlers in order to perform the required actions and
+return a response.
+
+POST and PUT handlers will read raw body content as JSON and use {{{Yojson}}}
+to convert it to our types.
+
+We use HTTP status codes in responses, with these meaning:
+
+* 200 (OK): the request succeeded.
+* 400 (Bad request): something is wrong with the request (missing parameter,
+parsing error...).
+* 404 (Not found): no resource matches the provided identifier.
+
+The GET handler either returns a single location if an identifier is provided,
+or a list of all existing locations otherwise.
+
+<<code language="ocaml"|
+let read_handler id_opt () =
+  let%lwt db = db in
+  match id_opt with
+  | None ->
+    Ocsipersist.Polymorphic.fold_step
+      (fun id loc acc -> Lwt.return ((id, loc) :: acc)) db []
+    ~>>= fun locations ->
+    let json = Yojson.Safe.to_string (locations_to_yojson locations) in
+    send_json ~code:200 json
+  | Some id ->
+    catch
+      (fun () ->
+         Ocsipersist.Polymorphic.find db  id ~>>= fun location ->
+         let json =
+           Yojson.Safe.to_string (location_to_yojson location) in
+         send_json ~code:200 json)
+      (function
+        | Not_found ->
+          (* [id] hasn't been found, return a "Not found" message *)
+          send_error ~code:404 ("Resource not found: " ^ id)
+        | _ ->  send_error ~code:500 "Internal server error" )
+>>
+
+Next, let's create a common function for POST and PUT handlers, which have a
+very similar behaviour. The only difference is that a PUT request with a
+non-existing identifier will fail (thus only accepting update requests, and
+rejecting creations), whereas the same request with POST method will succeed (a
+new location associated to the identifier will be created).
+
+<<code language="ocaml"|
+let edit_handler_aux ?(create = false) id_opt (content_type, raw_content_opt) =
+  let%lwt db = db in
+  if not (check_content_type ~mime_type:json_mime_type content_type) then
+    send_error ~code:400 "Content-type is wrong, it must be JSON"
+  else
+    match id_opt, raw_content_opt with
+    | None, _ ->
+      send_error ~code:400 "Location identifier is missing"
+    | _, None ->
+      send_error ~code:400 "Body content is missing"
+    | Some id, Some raw_content ->
+      read_raw_content raw_content ~>>= fun location_str ->
+      catch (fun () ->
+          (if create then
+            Lwt.return_unit
+           else
+            Ocsipersist.Polymorphic.find db id ~>>= fun _ -> Lwt.return_unit)
+          ~>>= fun () ->
+          let location =
+            (let open Result in
+            let loc_result = location_of_yojson (Yojson.Safe.from_string location_str) in
+            match loc_result with
+              Ok loc-> loc
+            | Error _ -> raise Deriving_Yojson.Failed )  in
+          Ocsipersist.Polymorphic.add db  id location ~>>= fun () ->
+          send_success ())
+      (function
+        | Not_found ->
+          send_error ~code:404 ("Location not found: " ^ id)
+        | Deriving_Yojson.Failed ->
+          send_error ~code:400 "Provided JSON is not valid"
+        | _ -> send_error ~code:500 "Internal server error")
+
+let create_handler id_opt content =
+  edit_handler_aux ~create:true id_opt content
+
+let update_handler id_opt content =
+  edit_handler_aux ~create:false id_opt content
+>>
+
+We need a fourth handler to delete locations:
+
+<<code language="ocaml"|
+let%lwt db = db in
+  match id_opt with
+  | None ->
+    send_error ~code:400 "An id must be provided to delete a location"
+  | Some id ->
+    Ocsipersist.Polymorphic.remove db id ~>>= fun () ->
+    send_success ()
+>>
+
+==@@id="registration"@@ Services registration==
+
+Finally we register services with the {{{Eliom_registration.Any}}} module in
+order to have full control on the sent response. This way, we'll be able to
+send an appropriate HTTP status code depending on what happens during the
+request processing (parsing error, resource not found...), as seen above when
+defining handlers.
+
+<<code language="ocaml"|
+let () =
+  Eliom_registration.Any.register read_service read_handler;
+  Eliom_registration.Any.register create_service create_handler;
+  Eliom_registration.Any.register update_service update_handler;
+  Eliom_registration.Any.register delete_service delete_handler;
+  ()
+>>
+
+==@@id="source"@@ Full source==
+
+<<code language="ocaml"|
+open Lwt
+
+(**** Data types ****)
+
+type coordinates = {
+  latitude : float;
+  longitude : float;
+} [@@deriving yojson]
+
+type location = {
+  description : string option;
+  coordinates : coordinates;
+} [@@deriving yojson]
+
+(* List of pairs (identifier * location) *)
+type locations =
+  (string * location) list
+   [@@deriving yojson]
+
+type error = {
+  error_message : string;
+} [@@deriving yojson]
+
+let db : location Ocsipersist.table Lwt.t =
+  Ocsipersist.Polymorphic.open_table "locations"
+
+
+(**** Services ****)
+
+let path = Eliom_service.Path [""]
+
+let get_params =
+  Eliom_parameter.(suffix (neopt (string "id")))
+
+let read_service =
+  Eliom_service.create
+    ~path
+    ~meth:(Eliom_service.Get get_params)
+    ()
+
+let create_service =
+  Eliom_service.create
+    ~path
+    ~meth:(Eliom_service.Post (get_params, Eliom_parameter.raw_post_data))
+    ()
+
+let update_service =
+  Eliom_service.create
+    ~path
+    ~meth:(Eliom_service.Put get_params)
+    ()
+
+let delete_service =
+  Eliom_service.create
+    ~path
+    ~meth:(Eliom_service.Delete get_params)
+    ()
+
+(**** Handler helpers ****)
+
+let json_mime_type = "application/json"
+
+let send_json ~code json =
+  Eliom_registration.String.send ~code (json, json_mime_type)
+
+let send_error ~code error_message =
+  let json = Yojson.Safe.to_string (error_to_yojson {error_message}) in
+  send_json ~code json
+
+let send_success () =
+  Eliom_registration.String.send ~code:200 ("", "")
+
+let check_content_type ~mime_type content_type =
+  match content_type with
+  | Some ((type_, subtype), _)
+      when (type_ ^ "/" ^ subtype) = mime_type -> true
+  | _ -> false
+
+let read_raw_content ?(length = 4096) raw_content =
+  let content_stream = Ocsigen_stream.get raw_content in
+  Ocsigen_stream.string_of_stream length content_stream
+
+(**** Handlers ****)
+
+let read_handler id_opt () =
+  let%lwt db = db in
+  match id_opt with
+  | None ->
+    Ocsipersist.Polymorphic.fold_step
+      (fun id loc acc -> Lwt.return ((id, loc) :: acc)) db []
+    ~>>= fun locations ->
+    let json = Yojson.Safe.to_string (locations_to_yojson locations) in
+    send_json ~code:200 json
+  | Some id ->
+    catch
+      (fun () ->
+         Ocsipersist.Polymorphic.find db  id ~>>= fun location ->
+         let json =
+           Yojson.Safe.to_string (location_to_yojson location) in
+         send_json ~code:200 json)
+      (function
+        | Not_found ->
+          (* [id] hasn't been found, return a "Not found" message *)
+          send_error ~code:404 ("Resource not found: " ^ id)
+        | _ -> assert false)
+
+let edit_handler_aux ?(create = false) id_opt (content_type, raw_content_opt) =
+  let%lwt db = db in
+  if not (check_content_type ~mime_type:json_mime_type content_type) then
+    send_error ~code:400 "Content-type is wrong, it must be JSON"
+  else
+    match id_opt, raw_content_opt with
+    | None, _ ->
+      send_error ~code:400 "Location identifier is missing"
+    | _, None ->
+      send_error ~code:400 "Body content is missing"
+    | Some id, Some raw_content ->
+      read_raw_content raw_content ~>>= fun location_str ->
+      catch (fun () ->
+          (if create then
+            Lwt.return_unit
+           else
+            Ocsipersist.Polymorphic.find db id ~>>= fun _ -> Lwt.return_unit)
+          ~>>= fun () ->
+          let location =
+            (let open Result in
+            let loc_result = location_of_yojson (Yojson.Safe.from_string location_str) in
+            (function
+              Ok loc-> loc
+            | Error _ -> raise Deriving_Yojson.Failed ) loc_result)  in
+          Ocsipersist.Polymorphic.add db  id location ~>>= fun () ->
+          send_success ())
+      (function
+        | Not_found ->
+          send_error ~code:404 ("Location not found: " ^ id)
+        | Deriving_Yojson.Failed ->
+          send_error ~code:400 "Provided JSON is not valid"
+        | _ -> assert false)
+
+let create_handler id_opt content =
+  edit_handler_aux ~create:true id_opt content
+
+let update_handler id_opt content =
+  edit_handler_aux ~create:false id_opt content
+
+let delete_handler id_opt _ =
+  let%lwt db = db in
+  match id_opt with
+  | None ->
+    send_error ~code:400 "An id must be provided to delete a location"
+  | Some id ->
+    Ocsipersist.Polymorphic.remove db id ~>>= fun () ->
+    send_success ()
+
+(* Register services *)
+
+let () =
+  Eliom_registration.Any.register read_service read_handler;
+  Eliom_registration.Any.register create_service create_handler;
+  Eliom_registration.Any.register update_service update_handler;
+  Eliom_registration.Any.register delete_service delete_handler;
+  ()
+>>
diff --git a/tutos/8.0/manual/start.wiki b/tutos/8.0/manual/start.wiki
new file mode 100644
index 00000000..b625c60e
--- /dev/null
+++ b/tutos/8.0/manual/start.wiki
@@ -0,0 +1,109 @@
+<<header| =Your first app in 5 minutes >>
+
+//The code of this tutorial has been tested against Eliom 6.0.// \\
+
+<<|wip|This tutorial is work in progress. Please send us any corrections or comments./>>
+
+This tutorial describes how to get started with Ocsigen
+quickly. Thanks to an application template provided by the Ocsigen
+team, you will get to a working application with standard
+functionality like users and notifications in only a few minutes. This
+template can be used for learning purposes, or even as a starting
+point for your own product.
+
+The template you will use comes from [[wiki("ocsigen-start"):|Ocsigen Start]].
+Ocsigen Start provides a complete mechanism for adding and managing
+users, including activation links and password reset. It additionally
+contains a module for displaying tips, a module for sending
+notifications to your users, and other utilities typically needed in
+modern Web applications.
+
+The template comes with a default style (developed with
+SASS) that follows modern Web practices, e.g., it is responsive and
+thus mobile-friendly. Of course, you are free to modify the style to
+match your own brand or personality.
+
+The template is multi-platform. This means that it can run on a Web
+browser or as a mobile app for Android, iOS, or Windows.
+
+<<div class="screenshots"|
+[[files/screenshots/start1.png|
+{{files/screenshots/start1.png|Ocsigen Start}}]]
+[[files/screenshots/start2.png|
+{{files/screenshots/start2.png|Ocsigen Start}}]]
+>>
+
+<<div class="screenshots"|
+[[files/screenshots/start-mobile-1.png|
+{{files/screenshots/start-mobile-1.png|Ocsigen Start}}]]
+[[files/screenshots/start-mobile-2.png|
+{{files/screenshots/start-mobile-2.png|Ocsigen Start}}]]
+[[files/screenshots/start-mobile-4.png|
+{{files/screenshots/start-mobile-4.png|Ocsigen Start}}]]
+>>
+
+== Installation
+
+Install the dependencies ({{{postgresql}}} and one of {{{sass}}}, {{{sassc}}}).
+On Debian-based systems:
+{{{
+apt install postgresql ruby-sass
+}}}
+
+Install Ocsigen Start and all its OCaml dependencies using OPAM:
+{{{
+opam install ocsigen-start
+}}}
+
+Create your application using Eliom distillery:
+{{{
+eliom-distillery -name myapp -template os.pgocaml
+}}}
+
+Have a look at the
+[[https://github.com/ocsigen/ocsigen-start/blob/master/template.distillery/README.md|README]]
+file to learn how to compile it
+and, possibly, to generate the mobile applications.
+
+== I installed it and compiled it, what next?
+
+It is now time to learn Ocsigen! The template is a great way to get
+started, because it comes with multiple runnable examples that show
+you:
+
+* How to do remote procedure calls (RPCs);
+* How to save session data (in //Eliom references//);
+* How to use the notification system;
+* How to create reactive pages;
+* Many examples of widgets from [[wiki("ocsigen-toolkit"):|Ocsigen Toolkit]]:
+** Carousel
+** Pages with several tabs
+** Time and date pickers
+* ...
+
+The corresponding files are well-commented, so you can quickly find
+out how things work.
+
+<<div class="screenshots"|
+[[files/screenshots/start3.png|
+{{files/screenshots/start3.png|Ocsigen Start}}]]
+[[files/screenshots/start4.png|
+{{files/screenshots/start4.png|Ocsigen Start}}]]
+[[files/screenshots/start5.png|
+{{files/screenshots/start5.png|Ocsigen Start}}]]
+[[files/screenshots/start6.png|
+{{files/screenshots/start6.png|Ocsigen Start}}]]
+>>
+
+<<div class="screenshots"|
+[[files/screenshots/start-mobile-3.png|
+{{files/screenshots/start-mobile-3.png|Ocsigen Start}}]]
+[[files/screenshots/start-mobile-6.png|
+{{files/screenshots/start-mobile-6.png|Ocsigen Start}}]]
+[[files/screenshots/start-mobile-7.png|
+{{files/screenshots/start-mobile-7.png|Ocsigen Start}}]]
+[[files/screenshots/start-mobile-8.png|
+{{files/screenshots/start-mobile-8.png|Ocsigen Start}}]]
+>>
+
+Have fun!
diff --git a/tutos/8.0/manual/tutoreact.wiki b/tutos/8.0/manual/tutoreact.wiki
new file mode 100644
index 00000000..d6e479c5
--- /dev/null
+++ b/tutos/8.0/manual/tutoreact.wiki
@@ -0,0 +1,943 @@
+= Client server reactive application with Ocsigen
+
+This is a short tutorial showing how to implement a simple reactive
+client-server application using Js_of_ocaml, Eliom and
+Ocsigen Start.
+
+We are going to implement an application that can display a list of messages and
+that allows connected users to add new messages.
+
+You will learn:
+
+* How to use Ocsigen Start to quickly build an application with user
+  management.
+* How to create a client-server reactive interface: the HTML is
+  generated indifferently server-side or client-side, and
+  contains reactive parts that are updated automatically when the data
+  change.
+* How to implement a notification system for your application. Users
+  are notified when a new item (a message in our case) arrives.
+
+
+
+== First step: a basic application with user management
+
+Ocsigen Start contains a set of higher level libraries for Eliom
+(user management, tips, notifications). It also contains a template
+for {{{eliom-distillery}}} that creates an application with user
+management. You can use this template as a starting point for your
+project.
+
+{{{
+eliom-distillery -name tutoreact -template os.pgocaml
+}}}
+
+This template is using PostgreSQL to store the data. You need a recent
+version of Postgresql installed on your system.  With that available,
+you can create the local database and start the database server:
+
+{{{
+make db-init
+make db-create
+make db-schema
+}}}
+
+Compile and run the program:
+{{{
+make test.byte
+}}}
+
+Go to {{{http://localhost:8080}}}, you should see the welcome page. You can now
+register a user and log in. Because the send mail function is not configured,
+the activation links will be printed on the console you started the server with.
+
+At any point, if you want to get back to this tutorial later, you may need to
+start the database again:
+{{{
+make db-start
+}}}
+
+While doing this tutorial, if you plan to work on another Ocsigen project
+requiring a database, do not forget to stop the tutorial's database beforehand:
+{{{
+make db-stop
+}}}
+
+
+
+== Display messages from db
+
+To make this example more realistic, let's suppose that we do not want to
+display all the messages in the database, but only a few of them.
+
+In this tutorial, we will not focus on the implementation details of the
+database part. Create a new file named {{{tutoreact_messages.eliom}}}. From now
+on, if not explicitely specified, the code we are going to write will go there.
+We are going to create a module {{{Db}}} containing these functions:
+
+<<code language="ocaml" class="server"|
+val get_messages : unit -> int list Lwt.t
+val get_message : int -> string Lwt.t
+val add_message : string -> int Lwt.t
+>>
+
+You can try to make your own implementation using for instance pgocaml.
+Here's our implementation using Ocsipersist:
+
+<<code language="ocaml" class="server"|
+[%%server
+module Db = struct
+  let db = Ocsipersist.Polymorphic.open_table "messages"
+
+  let last_key =
+    Eliom_reference.eref
+      ~persistent:"index"
+      ~scope:Eliom_common.global_scope (-1)
+
+  let get_message id =
+    let%lwt db = db in
+    Ocsipersist.Polymorphic.find db (string_of_int id)
+
+  let get_messages () =
+    let%lwt index = Eliom_reference.get last_key in
+    let rec aux n l = if n > index then l else aux (n+1) (n::l) in
+    Lwt.return (aux 0 [])
+
+  let lock = Lwt_mutex.create ()
+
+  let add_message v =
+    let%lwt () = Lwt_mutex.lock lock in
+    let%lwt index = Eliom_reference.get last_key in
+    let index = index + 1 in
+    let%lwt () = Eliom_reference.set last_key index in
+    Lwt_mutex.unlock lock;
+    let%lwt db = db in
+    let%lwt () = Ocsipersist.Polymorphic.add db (string_of_int index) v in
+    Lwt.return index
+end]
+>>
+
+Add the following code:
+
+<<code language="ocaml" class="shared"|
+[%%shared
+    open Eliom_content.Html
+    open Eliom_content.Html.D]
+>>
+<<code language="ocaml" class="server"|
+let%server display userid_o =
+  let%lwt messages = Db.get_messages () in
+  let%lwt l =
+    Lwt_list.map_s
+      (fun id ->
+        let%lwt msg = Db.get_message id in
+        Lwt.return (li [txt msg]))
+      messages
+  in
+  Lwt.return [ul l]
+>>
+
+Depending on your database, it is probably more efficient to
+fetch all messages and their identifiers using only one request.
+Here we use {{{Lwt_list.map_s}}} to do the requests sequentially.
+
+The content of the main page is defined in
+the file {{{tutoreact_handlers.eliom}}}.
+Replace the code of {{{main_service_handler}}} by:
+
+<<code language="ocaml" class="server"|
+let%server main_service_handler userid_o () () =
+  let%lwt content = Tutoreact_messages.display userid_o in
+  Tutoreact_container.page userid_o content
+>>
+
+The {{{main_service_handler}}} you just replaced was in a shared section.
+Therefore, we also need to change two other files to take into consideration
+this modification.
+
+In the file {{{tutoreact_handlers.eliomi}}}, move the definition of
+{{{main_service_handler}}} from the shared section to the server section.
+
+In the file {{{tutoreact.eliom}}}, move the registration of {{{main_service}}}
+from the shared section to the server section.
+
+Try to compile in order to see if everything is fine.
+
+
+
+== Adding new messages
+
+=== Add an input in the page, for connected users
+
+To add an input in the page for connected users,
+replace the function {{{display}}} by the following version:
+
+<<code language="ocaml" class="server"|
+let%server display_messages () =
+  let%lwt messages = Db.get_messages () in
+  let%lwt l =
+    Lwt_list.map_s
+      (fun id ->
+        let%lwt msg = Db.get_message id in
+        Lwt.return (li [txt msg]))
+      messages
+  in
+  Lwt.return (ul l)
+
+let%server display userid_o =
+  let%lwt messages = display_messages () in
+  let l =
+    match userid_o with
+    | None -> []
+    | _ -> [Raw.input ~a:[a_input_type `Text;
+                          a_style "border-style:solid"] ()]
+  in
+  Lwt.return (messages :: l)
+>>
+
+=== Make function {{{Db.add_message}}} accessible from the client
+
+To be able to call a function from the client-side program,
+use {{{let%rpc}}}:
+<<code language="ocaml" class="shared"|
+let%rpc add_message (value : string) : unit Lwt.t =
+  let%lwt _ = Os_current_user.get_current_userid () (* fails if not connected *) in
+  Db.add_message value
+>>
+
+The parameter {{{[%json: string]}}} describes the type of
+the function parameter. This exhibits the syntax provided by
+[[https://github.com/whitequark/ppx_deriving|ppx_deriving]] extended
+with our JSON plugin. We use this for safe server-side unmarshalling of data
+sent by the client.
+
+=== Bind the input to call the function
+
+To call the function from the client program, we will define a
+//client value//, a client-side expression that is accessible
+server-side. The client value will be executed client-side
+after the page is loaded. The syntax for client values of type
+{{{t}}} is {{{[%client (... : t)]}}}.
+
+Replace the second branch of the {{{match}}} in the function {{{display}}} by:
+<<code language="ocaml" class="server"|
+let inp = Raw.input ~a:[a_input_type `Text; a_style "border-style:solid"] () in
+let _ = [%client
+  (let open Js_of_ocaml_lwt.Lwt_js_events in
+   let inp = To_dom.of_input ~%inp in
+   async (fun () -> changes inp (fun _ _ ->
+     let value = Js_of_ocaml.Js.to_string inp##.value in
+     inp##.value := Js_of_ocaml.Js.string "";
+     let%lwt _ = add_message value in
+     Lwt.return ()))
+   : unit)
+] in
+[inp]
+>>
+
+* We use module {{{Lwt_js_events}}} to manage events.
+* The syntax {{{~%v}}} allows using a server-side value {{{v}}} client-side.
+* {{{To_dom.of_input}}} returns the JS element corresponding to the
+  OCaml value {{{~%inp}}}.
+* {{{Lwt_js_events.async}}} is similar to {{{Lwt.async}}}.
+* {{{obj##.a}}} allows the access to the field {{{a}}}
+  of the JavaScript object {{{obj}}} (see Js_of_ocaml PPX extension).
+* {{{changes}}} takes a JS element and a function that will be
+  executed every time a "change" event is received on this element.
+
+This function gets the value of the input, resets the content of the
+input, and calls our server-side function. Do not forget the
+conversions between OCaml strings and JS strings since they are different!
+
+Compile and run the program again. Now the messages should be added in the
+database whenever you use the input. However you need to refresh the page to
+display them.
+
+
+
+== Structure of a client-server application
+
+We have seen how to send data to the server without stopping the
+client-side program. Now we want to automatically update the page
+when new messages are sent. Generally, the main difference between a
+web application and a website is that in the case of a web
+application, a client-side program runs and persists accross HTTP
+calls (remote procedure calls or page changes). The client process
+must be able to receive notifications from the server and update the
+page accordingly, without regenerating it entirely. It is common
+practice to generate the full interface client-side. But this is
+not suitable for all cases. It is usually better to keep the old-style
+web interaction and generate pages server-side, for example
+to enable search engine indexing. In this tutorial, we will see how to
+generate pages indifferently (and with the same code) from both sides.
+
+In this section, we will see how to implement this kind of applications
+very concisely thanks to three notions:
+* The client-server cache of data
+* Reactive pages
+* Notification system
+
+You will be able to test once you finish the three following sections!
+
+=== Client-server cache
+
+The module
+<<a_api project="eliom" subproject="server"| module Eliom_cscache >>
+implements a cache of data, an association table where you
+will put the data of your application client-side. For the sake of
+uniformity (as we want to use it in shared sections), the
+cache is also implemented server-side, with scope
+"request". This avoids retrieving the same data from the database
+twice for the same request.
+
+We create a client-server cache by calling the function
+<<a_api project="eliom" subproject="server"| val Eliom_cscache.create >>
+server-side. The server-side cache {{{cache}}} created by this
+function will be accessible client-side through an injection {{{~%cache}}}.
+
+We implement a function {{{get_data}}} to fetch the
+data from the database. This function must have an implementation both
+server-side and client-side:
+
+<<code language="ocaml" class="shared"|
+let%rpc get_data (id : int) : string Lwt.t = Db.get_message id
+>>
+<<code language="ocaml" class="server"|
+let%server cache : (int, string) Eliom_cscache.t =
+  Eliom_cscache.create ()
+>>
+
+=== Reactive interface
+
+Updating the interface when some data change is usually not
+straightforward. This is usually done by putting identifiers on
+elements to find them, and manually modifying page elements using
+low-level JS functions.
+
+A very elegant solution to simplify this consists in using Functional
+Reactive Programming (FRP). In reactive programming, you define
+relations between different pieces of data once, and each update
+automatically produces the recomputation of all the dependent data. In
+Ocsigen we use the module [[http://erratique.ch/logiciel/react|React]]
+combined with [[https://github.com/ocsigen/reactiveData/|ReactiveData]],
+which extends {{{React}}} to deal with incremental updates in
+lists. Have a look at the documentation of the above modules if you
+are not familiar with FRP.
+
+The client-side module
+<<a_api project="eliom" subproject="client"| module Eliom_content.Html.R >>
+enables defining reactive page elements.
+
+The module <<a_api project="eliom" subproject="server"| module Eliom_shared >>
+enables defining shared reactive signals server-side.
+In order to do that, we use //shared values//, values defined
+both server-side and client-side. The server-side module
+<<a_api project="eliom" subproject="server"| module Eliom_content.Html.R >>
+ enables constructing HTML5 elements that get updated automatically
+based on the signals of {{{Eliom_shared}}}. The modules
+<<a_api project="eliom" subproject="server"| module Eliom_shared.React >>
+and
+<<a_api project="eliom" subproject="server"| module Eliom_shared.ReactiveData >>
+implement interfaces very similar to {{{React}}} and
+{{{ReactiveData}}}, but operate on shared signals.
+
+=== Implementation of the reactive interface
+
+{{{display_message}}} now needs to be implemented in a shared fashion and take
+its data from the cache. In order to do that,
+we call {{{Eliom_cscache.find cache get_data key}}} from either side to get the
+value associated to {{{key}}}. If the value is not present in the cache, it will
+be fetched using the function {{{get_data}}} and added to the cache.
+
+<<code language="ocaml" class="shared"|
+let%shared display_message id =
+  let%lwt msg = Eliom_cscache.find ~%cache get_data id in
+  Lwt.return (li [txt msg])
+>>
+
+The function {{{display_messages}}} now creates a reactive list of
+message identifiers, and maps page content from this reactive value
+using module {{{Eliom_shared.ReactiveData}}}. Note that {{{rmessage}}} is
+a tuple, the first element is the list, the second element is the update
+function.
+
+<<code language="ocaml" class="server"|
+let%server display_messages () =
+  let%lwt messages = Db.get_messages () in
+  let rmessages = Eliom_shared.ReactiveData.RList.create messages in
+  let%lwt content =
+    Eliom_shared.ReactiveData.RList.Lwt.map_p
+      [%shared display_message ]
+      (fst rmessages)
+  in
+  Lwt.return (R.ul content)
+>>
+
+== Notifications
+
+We now want to be notified when a message has been added. To do that
+easily, we use the module {{{Os_notif}}} from Ocsigen Start.
+
+We first define a notification module for the type of data we want
+clients to be able to listen on (here the lists of message identifiers):
+
+<<code language="ocaml" class="server"|
+[%%server
+module Forum_notif = Os_notif.Make_Simple (struct
+  type key = unit
+  type notification = int
+end)
+]
+>>
+
+{{{key}}} is the type of the identifier of the data we want to listen
+on. In our case, there is a single message list (thus {{{unit}}}
+suffices as the identifier since we don't need to be specific).
+
+{{{notification}}} is the type of the notifications to send. Here: the
+identifier of the new message to be added in the list.
+
+We define a function to handle notifications. It adds the new
+identifier in the reactive list of messages:
+<<code language="ocaml" class="client"|
+let%client handle_notif_message_list rmessages (_, msgid) =
+  Eliom_shared.ReactiveData.RList.cons msgid (snd rmessages)
+>>
+
+We notify the server that we are listening on this piece of data by
+calling {{{Forum_notif.listen}}} (server-side). Notifications are
+received client-side through a {{{React}}} event
+{{{Forum_notif.client_ev ()}}}. We map this event to the function
+{{{handle_notif_message_list}}}, meaning that we will execute this function
+when this event happens.
+
+<<code language="ocaml" class="server"|
+let%server display_messages () =
+  Forum_notif.listen ();
+  let%lwt messages = Db.get_messages () in
+  let rmessages = Eliom_shared.ReactiveData.RList.create messages in
+  ignore [%client
+    (ignore
+       (React.E.map (handle_notif_message_list ~%rmessages)
+          ~%(Forum_notif.client_ev () : (unit * int) Eliom_react.Down.t))
+     : unit)
+  ];
+  let%lwt content =
+    Eliom_shared.ReactiveData.RList.Lwt.map_p
+      [%shared display_message ]
+      (fst rmessages)
+  in
+  Lwt.return (R.ul content)
+>>
+
+When we add a message, we notify all the clients listening on this
+piece of data:
+
+<<code language="ocaml" class="shared"|
+let%rpc add_message (value : string) : unit Lwt.t =
+   let%lwt id = Db.add_message value in
+   Forum_notif.notify () id;
+   Lwt.return ()
+>>
+
+The program is now fully functional, you can now test it! You should see the
+messages being added without the need to reload the page, even if messages are
+added by another user! Try with several browser windows.
+
+
+
+== More information on cache and client-server reactive data
+
+In this section we will demonstrate additional Eliom functionality for
+client-server programming by implementing some new features in our
+forum:
+* Multi-page forum
+* Client-side spinner while loading data
+
+=== Multi-page forum
+
+We now want a forum with several pages, located at URLs
+{{{http://localhost:8080/}}}//i//, where //i// represents the {{{forumid}}}
+as an integer.
+
+==== Services
+
+In the file {{{tutoreact_services.eliom}}}, we define the new following service:
+
+<<code language="ocaml" class="server"|
+let%server forum_service =
+  Eliom_service.create
+    ~path:(Eliom_service.Path [""])
+    ~meth:(Eliom_service.Get
+            (Eliom_parameter.(suffix (int "i"))))
+    ()
+>>
+
+In the file {{{tutoreact_services.eliomi}}}, we define its signature, do not
+forget to put it in a server section:
+
+<<code language="ocaml" class="server"|
+[%%server.start]
+
+val forum_service
+  : ( int
+    , unit
+    , Eliom_service.get
+    , Eliom_service.att
+    , Eliom_service.non_co
+    , Eliom_service.non_ext
+    , Eliom_service.reg
+    , [`WithSuffix]
+    , [`One of int] Eliom_parameter.param_name
+    , unit
+    , Eliom_service.non_ocaml )
+    Eliom_service.t
+>>
+
+In the file {{{tutoreact_handlers.eliom}}}, we define the handler we will
+associate to our new service:
+
+<<code language="ocaml" class="server"|
+let%server forum_service_handler userid_o forumid () =
+  let%lwt content = Tutoreact_messages.display userid_o forumid in
+  Tutoreact_container.page userid_o content
+>>
+
+In the file {{{tutoreact_handlers.eliomi}}}, we define its signature, in the
+server section:
+
+<<code language="ocaml" class="server"|
+val forum_service_handler
+  :  Os_types.User.id option
+  -> int
+  -> unit
+  -> Os_page.content Lwt.t
+>>
+
+In the file {{{tutoreact.eliom}}}, we register our handler to our new service in
+the server section:
+
+<<code language="ocaml" class="server"|
+  Tutoreact_base.App.register ~service:Tutoreact_services.forum_service
+    (Tutoreact_page.Opt.connected_page Tutoreact_handlers.forum_service_handler)
+>>
+
+Since we have a new parameter {{{forumid}}}, we need to take it into
+consideration in many places.
+
+In the file {{{tutoreact_messages.eliom}}}, the functions {{{display_messages}}}
+and {{{display}}} take it as a new parameter. Do not forget to also replace
+the latter in the call of {{{display_messages}}} in function {{{display}}}:
+
+<<code language="ocaml" class="server"|
+let%server display_messages forumid =
+  ...
+>>
+
+<<code language="ocaml" class="server"|
+let%server display userid_o forumid =
+  let%lwt messages = display_messages forumid in
+  ...
+>>
+
+In the file {{{tutoreact_handlers.eliom}}}, update the code of
+{{{main_service_handler}}}:
+
+<<code language="ocaml" class="server"|
+let%server main_service_handler forumid userid_o () () =
+  let%lwt content = Tutoreact_messages.display userid_o forumid in
+  Tutoreact_container.page userid_o content
+>>
+
+In the file {{{tutoreact_handlers.eliomi}}}, update its signature:
+
+<<code language="ocaml" class="server"|
+val main_service_handler
+  :  int
+  -> Os_types.User.id option
+  -> unit
+  -> unit
+  -> Os_page.content Lwt.t
+>>
+
+In the file {{{tutoreact.eliom}}}, in the {{{main_service}}}, we have to specify
+the forumid of the forum we want to reach when we arrive in our application.
+We will take 0 for instance and give it as the parameter of
+{{{main_service_handler}}}. We update the registration of {{{main_service}}}:
+
+<<code language="ocaml" class="server"|
+  Tutoreact_base.App.register
+    ~service:Os_services.main_service
+    (Tutoreact_page.Opt.connected_page
+    (Tutoreact_handlers.main_service_handler 0));
+>>
+
+==== Db
+
+The functions {{{Db.get_messages}}} and {{{Db.add_message}}} now take the forum
+identifier:
+
+<<code language="ocaml" class="server"|
+[%%server
+module Db = struct
+
+  let db = Ocsipersist.Polymorphic.open_table "messages"
+
+  let dbf = Ocsipersist.Polymorphic.open_table "forums"
+
+  let last_key =
+    Eliom_reference.eref
+      ~persistent:"index" ~scope:Eliom_common.global_scope (-1)
+
+  let get_message id =
+    let%lwt db = db in
+    Ocsipersist.Polymorphic.find db (string_of_int id)
+
+  let get_messages forumid =
+    let%lwt dbf = dbf in
+    try%lwt
+      Ocsipersist.Polymorphic.find dbf (string_of_int forumid)
+    with Not_found ->
+      Lwt.return []
+
+  let add_message forumid v =
+    let%lwt index = Eliom_reference.get last_key in
+    let index = index + 1 in
+    let%lwt () = Eliom_reference.set last_key index in
+    let%lwt db = db in
+    let%lwt () = Ocsipersist.Polymorphic.add db (string_of_int index) v in
+    let%lwt l = get_messages forumid in
+    let%lwt dbf = dbf in
+    let%lwt () =
+      Ocsipersist.Polymorphic.add dbf
+        (string_of_int forumid)
+        (index :: l)
+    in
+    Lwt.return index
+
+end
+]
+>>
+
+==== Message type
+
+Since we are now adding besides the message, the {{{forumid}}} as well in our
+database, we need to specify a new type:
+
+<<code language="ocaml" class="shared"|
+[%%shared
+    type add_message_type = int * string [@@deriving json]
+]
+>>
+
+We don't forget to take that into consideration in the function
+{{{add_message}}}.
+
+<<code language="ocaml" class="server"|
+let%rpc add_message ((forumid, value) : add_message_type) : unit Lwt.t =
+   let%lwt id = Db.add_message forumid value in
+   Forum_notif.notify () id;
+   Lwt.return ()
+>>
+
+In the function {{{display}}}, in the client section:
+<<code language="ocaml" class="client"|
+  ...
+  add_message (~%forumid, value)
+...
+>>
+
+==== Cache of forum message identifiers
+
+We must send the notifications only to the clients listening on the
+same forum.
+
+We will create a new client-server cache to keep the reactive list of
+message identifiers for each forums:
+
+<<code language="ocaml" class="server"|
+let%server forumcache :
+  (int,
+   int Eliom_shared.ReactiveData.RList.t *
+   int Eliom_shared.ReactiveData.RList.handle) Eliom_cscache.t =
+  Eliom_cscache.create ()
+>>
+
+We will now implement the equivalent of {{{get_data}}} for this new cache.
+
+**Be very careful:**
+
+In {{{get_data_forum}}}, we must find the reactive list of messages in
+the new cache —if it exists — instead of creating a new one!
+Otherwise you will have several reactive data for the same forum and
+the page updates will fail!
+
+To do that, we provide an optional argument {{{?default}}} to the function
+{{{Eliom_shared.ReactiveData.RList.create}}}, a client value
+(optionally) containing the current reactive list. If it does not
+exist in the cache, a new one will be created like previously:
+
+<<code language="ocaml" class="shared"|
+let%rpc get_data_forum (forumid : int) : _ Lwt.t =
+  let%lwt messages = Db.get_messages forumid in
+  let default = [%client
+    ((try Some (Eliom_cscache.find_if_ready ~%forumcache ~%forumid)
+      with _ -> None)
+     : 'a option)
+  ] in
+  Lwt.return (Eliom_shared.ReactiveData.RList.create ~default messages)
+>>
+
+{{{display_messages}}} now takes the reactive list from the cache:
+<<code language="ocaml" class="server"|
+let%server display_messages forumid =
+  Forum_notif.listen ();
+  let%lwt rmessages =
+    Eliom_cscache.find forumcache get_data_forum forumid
+  in
+  ...
+>>
+
+==== Notifications dependent on forum ID
+Since we now want to be specific about the data we want to listen to, the unit
+parameter we defined can't be used anymore. Indeed, notifications now depend on
+the identifier. We want to receive notifications only for the forums present in
+the client-side cache of forums. Therefore, we just change the type {{{key}}} of
+module {{{Forum_notif}}} to use an integer (instead of {{{unit}}}):
+
+<<code language="ocaml" class="server"|
+[%%server
+module Forum_notif = Os_notif.Make_Simple (struct
+  type key = int
+  type notification = int
+end)
+]
+>>
+
+The function {{{Forum_notif.notify}}} used in the function {{{add_message}}}
+now takes the {{{forumid}}} parameter.
+
+<<code language="ocaml" class="shared"|
+let%rpc add_message ... =
+  ...
+  Forum_notif.notify forumid id;
+  ...
+>>
+
+In the function {{{display_messages}}}, we need to take care of the
+{{{forumid}}} parameter and the type annotation of {{{client_ev}}}:
+
+<<code language="ocaml" class="server"|
+let%server display_messages forumid =
+  Forum_notif.listen (forumid : int);
+  ...
+  ~%(Forum_notif.client_ev () : (int * int) Eliom_react.Down.t))
+  ...
+>>
+
+We annotate the type of {{{forumid}}} in the call of the function {{{listen}}}
+to help the typing system.
+
+The function {{{handle_notif_message}}} now takes the reactive
+list {{{rmessage}}} from the cache, therefore we no longer need it as a
+parameter:
+
+<<code language="ocaml" class="client"|
+let%client handle_notif_message_list (forumid, msgid) =
+  try
+    let rmessages = Eliom_cscache.find_if_ready ~%forumcache forumid in
+    Eliom_shared.ReactiveData.RList.cons msgid (snd rmessages)
+  with Not_found | Eliom_cscache.Not_ready -> ()
+>>
+
+In the function {{{display_messages}}}, do not forget to remove the injection
+of {{{rmessage}}} in the call of {{{handle_notif_message_list}}} in the client
+section:
+
+<<code language="ocaml" class="client"|
+...
+(React.E.map handle_notif_message_list
+...
+>>
+
+=== Display a spinner while loading the messages
+
+Retrieving messages from server can take time.
+To display a spinner while loading the messages when you send them, replace
+the function {{{display_message}}} by:
+
+<<code language="ocaml" class="shared"|
+let%shared display_message id =
+  let th =
+    let%lwt msg = Eliom_cscache.find ~%cache get_data id in
+    Lwt.return [div [txt msg]]
+  in
+  let%lwt v = Ot_spinner.with_spinner th in
+  Lwt.return (li [v])
+>>
+
+To simulate network latency, you can add a {{{Lwt_unix.sleep}}} in the
+server-side {{{get_data}}} function.
+
+<<code language="ocaml" class="server"|
+let%server get_data id =
+  let%lwt () = Lwt_unix.sleep 2.0 in
+  Db.get_message id
+>>
+
+
+
+== The full code ({{{tutoreact_messages.eliom}}}):
+
+<<code language="ocaml" class="shared"|
+[%%shared
+    open Eliom_content.Html
+    open Eliom_content.Html.D
+]
+>>
+
+<<code language="ocaml" class="server"|
+[%%server
+module Db = struct
+  let db = Ocsipersist.Polymorphic.open_table "messages"
+  let dbf = Ocsipersist.Polymorphic.open_table "forums"
+
+  let last_key =
+    Eliom_reference.eref ~persistent:"index" ~scope:Eliom_common.global_scope
+      (-1)
+
+  let get_message id =
+    let%lwt db = db in
+    Ocsipersist.Polymorphic.find db (string_of_int id)
+
+  let get_messages forumid =
+    let%lwt dbf = dbf in
+    try%lwt Ocsipersist.Polymorphic.find dbf (string_of_int forumid)
+    with Not_found -> Lwt.return []
+
+  let add_message forumid v =
+    let%lwt index = Eliom_reference.get last_key in
+    let index = index + 1 in
+    let%lwt () = Eliom_reference.set last_key index in
+    let%lwt db = db in
+    let%lwt () = Ocsipersist.Polymorphic.add db (string_of_int index) v in
+    let%lwt l = get_messages forumid in
+    let%lwt dbf = dbf in
+    let%lwt () =
+      Ocsipersist.Polymorphic.add dbf (string_of_int forumid) (index :: l)
+    in
+    Lwt.return index
+
+end
+
+module Forum_notif = Os_notif.Make_Simple (struct
+  type key = int
+  type notification = int
+end)
+]
+>>
+
+<<code language="ocaml" class="shared"|
+[%%shared
+    type add_message_type = int * string [@@deriving json]
+]
+>>
+
+<<code language="ocaml" class="shared"|
+let%rpc add_message ((forumid, value) : add_message_type) : unit Lwt.t =
+   let%lwt id = Db.add_message forumid value in
+   Forum_notif.notify forumid (id : int);
+   Lwt.return ()
+>>
+
+<<code language="ocaml" class="server"|
+let%server cache : (int, string) Eliom_cscache.t = Eliom_cscache.create ()
+
+let%server forumcache :
+  (int,
+   int Eliom_shared.ReactiveData.RList.t *
+   int Eliom_shared.ReactiveData.RList.handle) Eliom_cscache.t =
+  Eliom_cscache.create ()
+>>
+
+<<code language="ocaml" class="shared"|
+ler%rpc get_data (id : int) : string Lwt.t =
+  let%lwt () = Lwt_unix.sleep 2.0 in
+  Db.get_message id
+>>
+
+<<code language="ocaml" class="shared"|
+let%rpc get_data_forum (forumid : int) : _ Lwt.t =
+  let%lwt messages = Db.get_messages forumid in
+  let default = [%client
+    (try
+       Some (Eliom_cscache.find_if_ready ~%forumcache ~%forumid)
+     with _ ->
+       None
+       : 'a option)
+  ] in
+  Lwt.return (Eliom_shared.ReactiveData.RList.create ~default messages)
+>>
+
+<<code language="ocaml" class="shared"|
+let%shared display_message id =
+  let th =
+    let%lwt msg = Eliom_cscache.find ~%cache get_data id in
+    Lwt.return [div [txt msg]]
+  in
+  let%lwt v = Ot_spinner.with_spinner th in
+  Lwt.return (li [v])
+>>
+
+<<code language="ocaml" class="client"|
+let%client handle_notif_message_list (forumid, msgid) =
+  try
+    let rmessages = Eliom_cscache.find_if_ready ~%forumcache forumid in
+    Eliom_shared.ReactiveData.RList.cons msgid (snd rmessages)
+  with Not_found | Eliom_cscache.Not_ready -> ()
+>>
+
+<<code language="ocaml" class="server"|
+let%server display_messages forumid =
+  Forum_notif.listen (forumid : int);
+  let%lwt rmessages =
+    Eliom_cscache.find forumcache get_data_forum forumid
+  in
+  ignore [%client
+    (ignore
+       (React.E.map handle_notif_message_list
+          ~%(Forum_notif.client_ev () : (int * int) Eliom_react.Down.t))
+     : unit)
+  ];
+  let%lwt content =
+    Eliom_shared.ReactiveData.RList.Lwt.map_p
+      [%shared display_message]
+      (fst rmessages)
+  in
+  Lwt.return (R.ul content)
+
+let%server display userid_o forumid =
+  let%lwt messages = display_messages forumid in
+  let l =
+    match userid_o with
+    | None -> []
+    | _ ->
+        let inp =
+          Raw.input ~a:[a_input_type `Text; a_style "border-style:solid"] ()
+        in
+        let _ =
+          [%client
+            (let open Js_of_ocaml_lwt.Lwt_js_events in
+             let inp = To_dom.of_input ~%inp in
+             async (fun () ->
+                 changes inp (fun _ _ ->
+                     let value = Js_of_ocaml.Js.to_string inp##.value in
+                     inp##.value := Js_of_ocaml.Js.string "";
+                     let%lwt _ = add_message (~%forumid, value) in
+                     Lwt.return ()))
+              : unit)]
+        in
+        [inp]
+  in
+  Lwt.return (messages :: l)
+>>
diff --git a/tutos/8.0/manual/tutowidgets.wiki b/tutos/8.0/manual/tutowidgets.wiki
new file mode 100644
index 00000000..7c7efcb0
--- /dev/null
+++ b/tutos/8.0/manual/tutowidgets.wiki
@@ -0,0 +1,402 @@
+= Mini-tutorial: client-server widgets =
+
+This short tutorial is an example of client-server Eliom application.
+It gives an example of client-server widgets.
+
+It is probably a good starting point if you know OCaml well, and want
+to quickly learn how to write a client-server Eliom application with a
+short example and concise explanations.  For more detailed explanations, see
+the
+<<a_manual project="tuto" chapter="application"|"graffiti" tutorial>>,
+or read the manuals.
+
+The goal is to show that, unlike many JavaScript libraries that build
+their widgets programmatically (by instantiating classes or calling
+functions), Eliom enables server-side widget generation, before
+sending them to the client. Pages can thus be indexed by search
+engines.
+
+This tutorial also shows that it is possible to use the same code to
+build the widget either on client or server side.
+
+We choose a very simple widget, that could be the base for example for
+implementing a drop-down menu. It consists of several boxes with a
+title and a content. Clicking on the title opens or closes the
+content. Furthermore, it is possible to group some of the boxes
+together to make them behave like radio buttons: when you open one of
+them, the previously opened one is closed.
+
+@@class="screenshot"@@{{files/tutorial/tutowidgets/ex-final.png|screenshot}}
+
+<<outline| <<header| **Table of contents** >> >>
+
+== First step: define an application with a basic service ==
+
+The following code defines a client-server Web application with only
+one service, registered at URL {{{/}}} (the root of the website).
+
+The code also defines a client-side application ({{{let%client}}} or section
+{{{ [%%client ... ] }}})
+that appends a client-side generated widget to the page.
+Section {{{ [%%shared ... ] }}} is compiled on both the server and the
+client-side programs.
+Inside such a section, you can write {{{ let%server }}} or
+{{{ let%client }}} to override {{{ [%%shared ... ] }}}
+and define a server-only or client-only value (similarly for
+{{{ [%%server ... ] }}} and {{{ [%%client ... ] }}}).
+
+<<code language="ocaml" class="server"|
+
+module%server Ex_app =
+  Eliom_registration.App (struct
+    let application_name = "ex"
+    let global_data_path = None
+  end)
+
+let%server _ = Eliom_content.Html.D.(
+  Ex_app.create
+    ~path:(Eliom_service.Path [""])
+    ~meth:(Eliom_service.Get Eliom_parameter.unit)
+    (fun () () ->
+       Lwt.return
+         (Eliom_tools.D.html ~title:"tutowidgets" ~css:[["css"; "ex.css"]]
+            (body [h2 [txt "Welcome to Ocsigen!"]])))
+)
+>>
+<<code language="ocaml" class="client"|
+
+let%client mywidget s1 s2 = Eliom_content.Html.D.(
+  let button  = div ~a:[a_class ["button"]] [txt s1] in
+  let content = div ~a:[a_class ["content"]] [txt s2] in
+  div ~a:[a_class ["mywidget"]] [button; content]
+)
+
+let%client _ =
+  let%lwt _ = Js_of_ocaml_lwt.Lwt_js_events.onload () in
+  Js_of_ocaml.Dom.appendChild
+    (Js_of_ocaml.Dom_html.document##.body)
+    (Eliom_content.Html.To_dom.of_element (mywidget "Click me" "Hello!"));
+  Lwt.return ()
+>>
+
+To compile it, first create a project by calling
+
+{{{
+  eliom-distillery -name ex -template client-server.basic
+}}}
+
+The name of the project must match the name given to the functor
+{{{Eliom_registration.App}}}.
+
+After you adapt the file {{{ex.eliom}}},
+you can compile by calling {{{make}}},
+and run the server by calling {{{make test.byte}}}.
+Download the
+[[files/tutorial/tutowidgets/ex.css|CSS file]]
+and place it in directory {{{static/css}}}.
+Then open a browser window and go to URL {{{http://localhost:8080}}}.
+
+@@class="screenshot"@@{{files/tutorial/tutowidgets/ex1.png|screenshot}}
+
+=== More explanations
+
+This section gives very quick explanations on the rest of the program.
+For more detailed explanations, see the tutorial for the graffiti app
+or the manual of each of the projects.
+
+* The client side program is sent with the first page belonging to the
+  application (registered through module {{{Ex_app}}}).
+* The {{{##}}} is used to call a JS method from OCaml
+  and {{{##.}}} to access a JS object field
+  (See Js_of_ocaml's documentation:
+  <<a_api project="js_of_ocaml" subproject="js_of_ocaml-ppx" | module Ppx_js >>).
+* If there are several services in your application, the client-side
+  program will be sent only with the first page, and will not stop if
+  you go to another page of the application.
+* {{{Lwt}}} is the concurrent library used to program threads on both
+  client and server sides. The syntax {{{let%lwt a = e1 in e2}}}
+  allows waiting (without blocking the rest of the program) for an Lwt
+  thread to terminate before continuing. {{{e2}}} must ben a Lwt
+  thread itself. {{{Lwt.return}}} enables creating an
+  already-terminated Lwt thread.
+* {{{Js_of_ocaml_lwt.Lwt_js_events}}} defines a convenient way to program
+  interface events (mouse, keyboard, ...).
+
+{{{Js_of_ocaml_lwt.Lwt_js_events.onload}}} is a Lwt thread that waits until the page
+is loaded. There are similar functions to wait for other events, e.g.,
+for a click on an element of the page, or for a key press.
+
+== Second step: bind the button ==
+
+To make the widget work, we must bind the click event.
+Replace function {{{mywidget}}} by the following lines:
+
+<<code language="ocaml" class="client"|
+let%client switch_visibility elt =
+  let elt = Eliom_content.Html.To_dom.of_element elt in
+  if Js_of_ocaml.Js.to_bool (elt##.classList##contains (Js_of_ocaml.Js.string "hidden")) then
+    elt##.classList##remove (Js_of_ocaml.Js.string "hidden")
+  else
+    elt##.classList##add (Js_of_ocaml.Js.string "hidden")
+
+let%client mywidget s1 s2 = Eliom_content.Html.D.(
+  let button  = div ~a:[a_class ["button"]] [txt s1] in
+  let content = div ~a:[a_class ["content"]] [txt s2] in
+  Lwt.async (fun () ->
+    Js_of_ocaml_lwt.Lwt_js_events.clicks (Eliom_content.Html.To_dom.of_element button)
+      (fun _ _ -> switch_visibility content; Lwt.return ()));
+  div ~a:[a_class ["mywidget"]] [button; content]
+)
+>>
+
+* Once again, we use {{{Js_of_ocaml_lwt.Lwt_js_events}}}. Function {{{clicks}}} is
+  used to bind a handler to clicks on a specific element.
+* Function {{{async}}} runs an {{{Lwt}}} thread asynchronously
+  (without waiting for its result).
+* {{{Js_of_ocaml_lwt.Lwt_js_events.clicks elt f}}} calls function {{{f}}} for each
+  mouseclick on element {{{elt}}}.
+* {{{Eliom_content.Html.To_dom.of_element}}}, {{{Js_of_ocaml.Js.string}}} and {{{Js_of_ocaml.Js.to_bool}}} are
+  conversion functions between OCaml values and JS values.
+
+== Third step: Generating the widget on server side ==
+
+The following version of the program shows how to generate the widget
+on server side, before sending it to the client.
+
+The code is exactly the same, with the following modifications:
+* We place function {{{mywidget}}} in server section.
+* The portion of code that must be run on client side (binding the
+  click event) is written as a //client value//, inside
+  {{{ [%client (... : unit) ] }}}.
+  This code will be executed by the client-side program when it
+  receives the page. Note that you must give the type (here
+  {{{unit}}}), as the type inference for client values is currently
+  very limited. The client section may refer to server side values,
+  using the {{{~%x}}} syntax. These values will be serialized and sent
+  to the client automatically with the page.
+* We include the widget on the server side generated page instead of
+  adding it to the page from client side.
+
+<<code language="ocaml" class="server"|
+
+module%server Ex_app =
+  Eliom_registration.App (struct
+    let application_name = "ex"
+    let global_data_path = None
+  end)
+
+>>
+<<code language="ocaml" class="client"|
+let%client switch_visibility elt =
+  let elt = Eliom_content.Html.To_dom.of_element elt in
+  if Js_of_ocaml.Js.to_bool (elt##.classList##(contains (Js_of_ocaml.Js.string "hidden"))) then
+    elt##.classList##remove (Js_of_ocaml.Js.string "hidden")
+  else
+    elt##.classList##add (Js_of_ocaml.Js.string "hidden")
+
+>>
+<<code language="ocaml" class="server"|
+let%server mywidget s1 s2 = Eliom_content.Html.D.(
+  let button  = div ~a:[a_class ["button"]] [txt s1] in
+  let content = div ~a:[a_class ["content"]] [txt s2] in
+  let _ = [%client
+    (Lwt.async (fun () ->
+       Js_of_ocaml_lwt.Lwt_js_events.clicks (Eliom_content.Html.To_dom.of_element ~%button)
+         (fun _ _ -> switch_visibility ~%content; Lwt.return ()))
+     : unit)
+  ] in
+  div ~a:[a_class ["mywidget"]] [button; content]
+)
+
+let%server _ = Eliom_content.Html.D.(
+  Ex_app.create
+    ~path:(Eliom_service.Path [""])
+    ~meth:(Eliom_service.Get Eliom_parameter.unit)
+    (fun () () ->
+       Lwt.return
+         (Eliom_tools.D.html ~title:"ex" ~css:[["css"; "ex.css"]]
+            (body [h2 [txt "Welcome to Ocsigen!"];
+                   mywidget "Click me" "Hello!"])))
+)
+>>
+
+== Fourth step: widget usable either on client or server sides ==
+
+If you make function {{{mywidget}}} //shared//, it will be available
+both on server and client sides:
+
+<<code language="ocaml" class="shared"|
+let%shared mywidget s1 s2 =
+  ...
+>>
+
+@@class="screenshot"@@{{files/tutorial/tutowidgets/ex2.png|screenshot}}
+
+
+== Fifth step: close last window when opening a new one ==
+
+To implement this, we record a client-side reference to a function for
+closing the currently opened window.
+
+<<code language="ocaml" class="server"|
+
+module%server Ex_app =
+  Eliom_registration.App (struct
+    let application_name = "ex"
+    let global_data_path = None
+  end)
+
+>>
+<<code language="ocaml" class="client"|
+let%client close_last = ref (fun () -> ())
+
+let%client switch_visibility elt =
+  let elt = Eliom_content.Html.To_dom.of_element elt in
+  if Js_of_ocaml.Js.to_bool (elt##.classList##(contains (Js_of_ocaml.Js.string "hidden"))) then
+    elt##.classList##remove (Js_of_ocaml.Js.string "hidden")
+  else
+    elt##.classList##add (Js_of_ocaml.Js.string "hidden")
+
+>>
+<<code language="ocaml" class="shared"|
+let%shared mywidget s1 s2 = Eliom_content.Html.D.(
+  let button  = div ~a:[a_class ["button"]] [txt s1] in
+  let content = div ~a:[a_class ["content"]] [txt s2] in
+  let _ = [%client
+    (Lwt.async (fun () ->
+       Js_of_ocaml_lwt.Lwt_js_events.clicks (Eliom_content.Html.To_dom.of_element ~%button) (fun _ _ ->
+	 !close_last ();
+	 close_last := (fun () -> switch_visibility ~%content);
+	 switch_visibility ~%content;
+	 Lwt.return ()
+       ))
+     : unit)
+  ] in
+  div ~a:[a_class ["mywidget"]] [button; content]
+)
+>>
+<<code language="ocaml" class="server"|
+let%server _ = Eliom_content.Html.D.(
+  Ex_app.create
+    ~path:(Eliom_service.Path [""])
+    ~meth:(Eliom_service.Get Eliom_parameter.unit)
+    (fun () () ->
+      let _ =
+	[%client
+	    (Js_of_ocaml.Dom.appendChild
+	       (Js_of_ocaml.Dom_html.document##.body)
+               (Eliom_content.Html.To_dom.of_element (mywidget "Click me" "client side"))
+               : unit)
+	] in
+      Lwt.return
+        (Eliom_tools.D.html ~title:"ex" ~css:[["css"; "ex.css"]]
+           (body [
+             h2 [txt "Welcome to Ocsigen!"];
+             mywidget "Click me" "server side";
+             mywidget "Click me" "server side";
+             mywidget "Click me" "server side"
+           ])))
+)
+>>
+
+== Last step: several sets of widgets ==
+
+Now we want to enable several sets of widgets in the same page. A
+single reference no longer suffices. In the following version, the
+server-side program asks the client-side program to generate two
+different references, by calling function {{{new_set}}}. This function
+returns what we call a //client value//.  On server side, it is not
+evaluated, and it has an abstract type.
+
+<<code language="ocaml" class="server"|
+
+module%server Ex_app =
+  Eliom_registration.App (struct
+    let application_name = "ex"
+    let global_data_path = None
+  end)
+
+let%server new_set () = [%client ( ref (fun () -> ()) : (unit -> unit) ref)]
+
+>>
+<<code language="ocaml" class="client"|
+let%client switch_visibility elt =
+  let elt = Eliom_content.Html.To_dom.of_element elt in
+  if Js_of_ocaml.Js.to_bool (elt##.classList##(contains (Js_of_ocaml.Js.string "hidden"))) then
+    elt##.classList##remove (Js_of_ocaml.Js.string "hidden")
+  else
+    elt##.classList##add (Js_of_ocaml.Js.string "hidden")
+
+>>
+<<code language="ocaml" class="shared"|
+let%shared mywidget set s1 s2 = Eliom_content.Html.D.(
+  let button  = div ~a:[a_class ["button"]] [txt s1] in
+  let content = div ~a:[a_class ["content"; "hidden"]] [txt s2] in
+  let _ = [%client
+    (Lwt.async (fun () ->
+       Js_of_ocaml_lwt.Lwt_js_events.clicks (Eliom_content.Html.To_dom.of_element ~%button) (fun _ _ ->
+         ! ~%set ();
+         ~%set := (fun () -> switch_visibility ~%content);
+         switch_visibility ~%content;
+	 Lwt.return ()))
+       : unit)]
+  in
+  div ~a:[a_class ["mywidget"]] [button; content]
+)
+
+>>
+<<code language="ocaml" class="server"|
+let%server _ = Eliom_content.Html.D.(
+  Ex_app.create
+    ~path:(Eliom_service.Path [""])
+    ~meth:(Eliom_service.Get Eliom_parameter.unit)
+    (fun () () ->
+      let set1 = new_set () in
+      let set2 = new_set () in
+      let _ = [%client (
+	Js_of_ocaml.Dom.appendChild
+	  (Js_of_ocaml.Dom_html.document##.body)
+	  (Eliom_content.Html.To_dom.of_element (mywidget ~%set2 "Click me" "client side"))
+	  : unit)
+	      ] in
+      Lwt.return
+        (Eliom_tools.D.html ~title:"ex" ~css:[["css"; "ex.css"]]
+           (body [
+             h2 [txt "Welcome to Ocsigen!"];
+             mywidget set1 "Click me" "server side";
+             mywidget set1 "Click me" "server side";
+             mywidget set2 "Click me" "server side"
+           ])))
+)
+>>
+
+@@class="screenshot"@@{{files/tutorial/tutowidgets/ex-final.png|screenshot}}
+
+
+== And now? ==
+
+===Calling server functions===
+An important feature missing from this tutorial is the ability
+to call server functions from the client-side program ("server functions").
+You can find a quick description of this
+in <<a_manual project="tuto" chapter="how-to-call-a-server-side-function-from-client-side"|this mini HOWTO>> or
+in <<a_manual project="eliom" chapter="clientserver-communication" fragment="rpc"|
+Eliom's manual>>.
+
+===Services===
+
+For many applications, you will need several services. By default,
+client-side Eliom programs do not stop when you follow a link or send
+a form. This enables combining rich client side features (playing
+music, animations, stateful applications~ ...)  with traditional Web
+interaction (links, forms, bookmarks, back button~ ...).  Eliom
+proposes several ways to identify services, either by the URL (and
+parameters), or by a session identifier (we call this kind of service
+a //coservice//). Eliom also allows creating new (co-)services
+dynamically, for example coservices depending on previous interaction
+with a user. More information on the service identification mechanism
+in <<a_manual project="eliom" chapter="server-services"|Eliom's manual>>.
+
+===Sessions===
+Eliom also offers a rich session mechanism, with //scopes//
+(see <<a_manual project="eliom" chapter="server-state"|Eliom's manual>>).