PLF: Práctica 2: Generación de Páginas HTML

1. Compilar

Cargar el siguiente programa en un entorno Haskell

> module Pf202(gen,genAs,vacio) where

> pagina = "<html>" ++ cabecera ++ cuerpo ++ "</html>"

> cabecera = "<head><title>Página</title></head>\n"
> cuerpo   = "<body>" ++ info ++ "</body>\n"
> info     = "<h1>Dibujos</h1><p>Ejemplo</p>" ++ objeto 

> objeto =  "<object data=\"dibu.svg\" " ++
>           "type=\"image/svg+xml\">" ++
>           "no visible</object>"

> dibujo = "<svg>" ++ cont ++ "</svg>"
> cont   = "<circle cx=\"100\" cy=\"100\"" ++
>              " r=\"50\" fill=\"green\"/>"
>       ++ "<circle cx=\"100\" cy=\"100\"" ++
>              " r=\"30\" fill=\"red\"/>"

> main = do 
>         writeFile "test.htm" pagina
>	  writeFile "dibu.svg" dibujo

2. enlace

Modificar el programa anterior para que en la página Web aparezca un enlace a alguna página Web externa. En HTML, los enlaces se incluyen mediante el formato <a href="http://página a enlazar">texto</a>

3. cuadro

Modificar el programa anterior para que en el dibujo se incluya un cuadro En SVG, los cuadros se incluyen mediante el formato <rect x=".." y =".." width=".." height=".." />

4. vacio

Añadir la función vacio que construye un elemento vacio a partir de una lista de atributos

> vacio :: String -> [(String,String)] -> String
> vacio e as = "<" ++ e ++ ponAtts as ++ "/>"

> ponAtts :: [(String,String)] -> String
> ponAtts = concat . map f 
>    where f (v,n) = " " ++ v ++ "=\"" ++ n ++ "\""

Se utilizan las funciones predefinidas

map :: (a -> b) -> [a] -> [b]
map f ls devuelve la lista que resulta de aplicar f a cada elemento de ls
concat :: [[a]] -> [a]
concat ls devuelve la lista resultante de concatenar las listas ls

5. Reescribir

Re-escribir los elementos vacios utilizando la función vacio

6. genAs

Escribir una función genAs que tome una etiqueta, una lista de atributos y una cadena y genere el elemento correspondiente.

Tipo:



> genAs :: String -> [(String,String)] -> String -> String

?-genAs "object" ["data","dibu"] "No"<object data="dibu">No</object>

7. gen

Basándose en la función anterior, construir una función gen que tome una etiqueta y una cadena y genere el elemento correspondiente (sin atributos).

Tipo:



> gen :: String -> String -> String

?-gen "h1" "Dibujos"<h1>Dibujos</h1>

8. Reescribir2

Re-escribir todo el programa utilizando las funciones vacio, genAs y gen

9. circulo

Construir una función que tome como parámetros las coordenadas (x,y) del centro y el radio y genere un elemento SVG representando a un círculo. Para convertir de números a cadenas puede utilizarse la función pre-definida show

10. fila

Modificar el programa anterior para que genere una fila de círculos.

11. cruz (Opcional)

Modificar el programa anterior para que genere una cruz formada por círculos.

12. diag (Opcional)

Modificar el programa anterior para que genere una diagonal formada por círculos.