Introduktion till programmering

Storlek: px

Starta visningen från sidan:

Download "Introduktion till programmering"

Henrik Strömberg
för 7 år sedan
Visningar:

1 Introduktion till programmering Föreläsning 5 Programmering av webbsidor.

2 Webbens grundbegrepp HTML HTML (HyperText Markup Language) är det språk som används för att skriva webbsidor. HyperText: text med referenser (länkar) till andra dokument. Markup: taggar som strukturerar texten. Webbläsare En webbläsare (Firefox, Internet Explorer, Safari,... ) är ett program som kan visa HTML-dokument genom att tolka taggarna. Webbserver, HTTP En webbserver är ett program som på begäran förmedlar dokument från den egna datorn till webbläsare anslutna till internet. HTTP (HyperText Transfer Protocol) är reglerna för hur webbläsare och webbserver samarbetar.

3 Exempel på webbsida <html> <head> <title>fönstertitel</title> </head> <body> <h1>en rubrik</h1> <p> Text som kan vara <it>kursiv</it>, <b>fet</b>, <font color="red">röd</font> och innehålla länkar till <a href=" webbsidor</a>, bilder (nedan) och annat.</p> <p> <img src="didno.jpg" width="350"></p> <h3>mindre rubrik</h3> </body> </html>

4 Ytterligare exempel Webbläsaren kan visa HTML-källan Genom att i webbläsaren välja View Page Source kan man läsa HTML-texten. Ett par exempel: Sidan från föregående bild Ett fotoalbum Uppgifterna till övning 4 En observation och en slutsats HTML-kod är ordrik, ofta repetitiv och det är lätt att göra (slarv)fel. Vi ska skriva Haskell-program som genererar HTML! Detta är speciellt lönande för dokument med stor andel taggar (t ex fotoalbumet).

5 Ett bibliotek för att skapa HTML-filer Grunden En tagg består av text mellan < och >. Två funktioner för att skapa en tagg och motsvarande sluttagg: tag :: String -> String tag t = "<" ++ t ++ ">" endtag :: String -> String endtag t = tag ("/" ++ t) De flesta HTML-elementen skapas genom att omsluta mindre element med en tagg och dess sluttagg: tagged :: String -> HTML -> HTML tagged t h = tag t ++ h ++ endtag t Typen HTML är här en synonym för String: type HTML = String

6 Fler definitioner ur biblioteket MkHTML para :: HTML -> HTML para h = tagged "p" h header :: Int -> HTML -> HTML header i h = tagged ("h" ++ show i) h bold :: HTML -> HTML bold h = tagged "b" h italic :: HTML -> HTML italic h = tagged "i" h text :: String -> HTML text s = s sequ :: [HTML] -> HTML sequ = unlines

7 Attribut Taggar kan vara mer komplexa En tagg kan innehålla attribut, som ger extra information. En länk har URL:en ( webbadressen ) som attribut: <a href=" Home</a> En bild har både URL:en till bildfilen och en storlek som attribut: <img src="pictures/img_5091.jpg" width="128"> Obs 1: Sluttaggar har inga attribut. Obs 2: En bild har ingen sluttagg och inget inneslutet element.

8 Generering av attribut attrdef :: (String,String) -> String attrdef p = fst p ++ "=" ++ show (snd p) attrtag :: String -> [(String,String)] -> String attrtag t attrs = tag (t ++ " " ++ unwords [attrdef p p <- attrs]) attrtagged :: String -> [(String,String)] -> HTML -> HTML attrtagged t attrs h = attrtag t attrs ++ h ++ endtag t link :: String -> HTML -> HTML link url txt = attrtagged "a" [("href",url)] txt image :: String -> Int -> HTML image url sz = attrtag "img" [("src",url),("width", show sz)]

9 Fullständiga HTML-dokument Typisk struktur <html> <head> <title> Titeln </title> </head> <body> Innehållet </body> </html> Funktioner i biblioteket html :: String -> HTML -> HTML html hd bod = tagged "html" (sequ [headtitle (text hd), body bod]) headtitle :: String -> HTML headtitle s = tagged "head" (tagged "title" s) body :: HTML -> HTML body h = tagged "body" h

10 Ett minimalt exempel I HTML <html> <head> <title> Hello </title> </head> <body> Hello, World! </body> </html> I Haskell import MkHTML html "Hello" (text "Hello, World!") Vad har vi vunnit? Mindre att skriva. Mindre risk för slarvfel (felstavade taggar, glömd sluttagg... ).

11 Första exemplet igen <html> <head> <title>fönstertitel</title> </head> <body> <h1>en rubrik</h1> <p> Text som kan vara <it>kursiv</it>, <b>fet</b>, <font color="red">röd</font> och innehålla länkar till <a href=" webbsidor</a>, bilder (nedan) och annat.</p> <p> <img src="didno.jpg" width="350"></p> <h3>mindre rubrik</h3> </body> </html> html "Fönstertitel" (sequ [ header 1 "En rubrik", para (sequ [ text "Text som kan vara", italic "kursiv", bold "fet", colored "red" "röd", text "och innehålla länkar link " text "bilder (nedan) och an para (image "didno.jpg" 350) header 3 "Lite mindre titel" ]) Inte mycket vunnet i detta exampel!

12 Tabeller i HTML En enkel tabell A1 A2 B1 B2 A3 B3 HTML-koden <table border="1"> <tr> <td>a1</td><td>a2</td><td>a3</td> </tr> <tr> <td>b1</td><td>b2</td><td>b3</td> </tr> </table> Önskad Haskell-kod table [["A1","A2","A3"],["B1","B2","B3"]] En tabell är en lista av listor. Den yttre listan består av raderna, de inre av cellerna.

13 Biblioteksfunktion för tabeller table :: [[HTML]] -> HTML table rows = attrtagged "table" [("border","1")] (sequ [ tablerow row row <- rows]) tablerow :: [HTML] -> HTML tablerow cells = tagged "tr" (sequ [tagged "td" cell cell <- cells])

14 Fotoalbumet En förenklad version Fotoalbumet är en följd bilder där varje bild är en miniversion (eng. thumbnail ) av den riktiga, fullstora bilden; varje bild är en länk till den riktiga bilden. Om listan av bildernas URL:er är pics, kan vi generera albumet med html "Pictures" (sequ [ link pic (image pic 128) pic <- pics ]) Detta är en förenklad version; antalet bilder per rad beror på fönstrets storlek. Resultatet finns här. En bättre version skulle bygga en tabell.

15 Hur skapar man pics? Bilderna finns i katalogen pictures > ls pictures IMG_4922.jpg IMG_4956.jpg IMG_4999.jpg IMG_5043.jpg IMG_5091.jpg IMG_4935.jpg IMG_4957.jpg IMG_5005.jpg IMG_5049.jpg IMG_5099.jpg IMG_4944.jpg IMG_4966.jpg IMG_5029.jpg IMG_5059.jpg IMG_5106.jpg IMG_4950.jpg IMG_4971.jpg IMG_5036.jpg IMG_5072.jpg IMG_5111.jpg IMG_4955.jpg IMG_4974.jpg IMG_5037.jpg IMG_5081.jpg IMG_5112.jpg Vi vill ha pics = [ "pictures/" ++ p p <- ps] ps = ["IMG_4922.jpg","IMG_4956.jpg","IMG_4999.jpg","IMG_5043.jpg",... ] Man kan klippa och klistra i en editor eller skriva ett Unixfilter som pipas med ls eller....

16 Generering av Google-sökningar Om man går till Google och slår in ett sökord, t ex haskell, öppnas en webbsida med URL:en Vi kan gissa funktionerna googledtext s = unwords [googled w w <- words s] googled s = link (" ++ s) s Som exempel skapar html "Google bakom länkarna" (googledtext "Varje ord som klickas skickas till Google") detta dokument.

17 Sammanfattning Vad har vi gjort idag? Vi har definierat ett bibliotek för att programmera webbsidor. Med hjälp av det har vi fått ett domänspecifikt språk för denna tillämpning. Haskell är särskilt lämpligt för att bygga sådana bibliotek. Vad har vi gjort i den här kursen? Ni har lärt er enkel hantering av Linuxdatorer. Ni kommer att fortsätta att utvecklas som Linuxanvändare under lång tid. Ni har sett exempel på hur Haskell kan användas för problemlösning. Ni har också sett några preludfunktioner och en hel del av Haskells syntax. Nästa vecka börjar en mer systematisk genomgång.

Relevanta dokument

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5 Introduktion till programmering Föreläsning 5 Programmering av webbsidor. Webbens grundbegrepp HTML HTML (HyperText Markup Language) är det språk som används för att skriva webbsidor. HyperText: text med