© Björn Hedin, NADA/KTH Kursintro, Web, CSS och WAP 2D1553 Mediaproduktion

© Björn Hedin, NADA/KTH Kursöversikt Bred kurs - Allt tekniskt om mediaproduktion på 10p Ändringar efter förra årets kursutvärdering –Mer innehåll, ”tyngre” kurs –Mer praktiska övningar med laborationer etc Moment –Grafisk teknik –Webproduktion och internet –Audioproduktion –Videoproduktion

© Björn Hedin, NADA/KTH Praktiskt Flera föreläsningar ges tillsammas med kurs 2D1518 Audio-, Video och Multimediaproduktion. ”Egna” föreläsningar ges i P12 Datorlaborationer i datasalarna (bottenplanet) Vissa laborationer i Haninge Kort och konton

© Björn Hedin, NADA/KTH Examination Obligatoriska laborationer Frivilliga laborationer som ger bonus på tentan Frivillig uppsatsuppgift som ger bonus på tentan Tentamen Loggbok Vissa obligatoriska föreläsningar

© Björn Hedin, NADA/KTH Dagens föreläsning Syfte –Ge er grunderna för att skapa och publicera websidor. Mål –Lära ut grunderna i html (utan grafiska editorer) –Lära ut hur man bör skilja på innehåll och layout med hjälp av CSS –Visa på skillnaderna mellan ”det gamla” formatet html och ”det nya” formatet xhtml

© Björn Hedin, NADA/KTH Web - grundprinciper Webben består i sin ursprungliga form av två huvudkomponenter. –http - Hypertext Transfer Protocol Ett protokoll för att föra över små dokument över internet. Mer om detta om två föreläsningar –html - Hypertext Markup Languate Ett ”märkspråk” för att koda hypertextdokument, dvs textdokument med länkar till andra textdokument

© Björn Hedin, NADA/KTH Märkspråk Märkspråk är en familj av språk där olika informationselement omslutes av en ”tag” med en semantisk betydelse. –T.ex. A Midsummer Night’s Dream Mängder med olika märkspråk finns med olika syften –Html för websidor –Wml för wap-sidor –SVG för vektorgrafik –SMIL för multimediapresentationer –JDF för ”job tickets”

© Björn Hedin, NADA/KTH Hello World Först ett mycket enkelt exempel. Element inleds med och avslutas med Olika märkspråk har olika element A Title Hello World

© Björn Hedin, NADA/KTH Hierarkisk struktur A Title Hello World html headbody titleh1 A Title Hello World Elementinnehåll Textinnehåll

© Björn Hedin, NADA/KTH Tomma element De flesta element har ett innehåll, antingen elementinnehåll eller textinnehåll Några element har dock inget innehåll, utan själva elementet har en betydelse i sig. Elementinnehåll Tjohoo Textinnehåll Tjohoo Tomt innehåll, eller kortformen,

© Björn Hedin, NADA/KTH Attribut Några element kan även ha ”attribut”, dvs någon information bunden till sig som beskriver/bestämmer ytterligare någon aspekt på elementet – –Tomt element med två attribut, src och alt –Syntaxten är alltid attributnamn = ” attributvärde ” –Det går lika bra med attributnamn = ’ attributvärde ’ Obs! Det måste vara ”vanliga” citattecken ( ” ), inte typografiska citattecken (”).

© Björn Hedin, NADA/KTH Länkar Hypertextdokument kan innehålla länkar till andra hypertextdokument (och andra filer mm). Länkar görs med elementet som har ett attribut href vars attributvärde pekar ut resursen ifråga. Elementets textinnehåll är själva den klickbara texten. Klicka till fil2

© Björn Hedin, NADA/KTH Länkar (2) Länkar till filer i samma filsystem där den aktiva websidan ligger kan vara antingen –relativa (utgående från den aktiva sidan) eller –absoluta (utgående från roten på filsystemet). Länkar till externa webplatser är alltid absoluta

© Björn Hedin, NADA/KTH Relativa länkar Relativa länkar utgår från den mapp där den aktiva filen ligger. Filer i samma katalog anges med filnamn – samma katalog Filer i underliggande kataloger anges med underkatalognamn/filnamn – underkatalog Filer i överliggande katalog anges med../filnamn –

© Björn Hedin, NADA/KTH Absoluta länkar Absoluta länkar kan ligga på den lokala webservern eller på en extern webserver. Extern länk extern … samma länk refererad från en annan fil på absolut lokal … och refererad som en relativ länk utgående från filen som ligger på relativ

© Björn Hedin, NADA/KTH Bilder Bilder infogas med elementet som har ett attribut src vars värde är en referens till en bildfil. –Extern bild –Lokal relativt länkad bild –Lokal absolut länkad bild

© Björn Hedin, NADA/KTH , och Toppelementet heter (ett html-dokument (eller XML-dokument) kan endast ha ett toppelement) Det har två, och exakt två barnelement: och – innehåller information om själva dokumentet, såsom titel och olika typer av metadata – innehåller själva innehållet: textstycken, bilder mm.

© Björn Hedin, NADA/KTH , -, används för stycken (paragraphs) Ett stycke till är olika rubriknivåer En rubrik på nivå 1 anväds för dokumenttiteln och är ett barnelement till Rubriken

© Björn Hedin, NADA/KTH Tabeller Tabeller används ofta i diverse sammanhang. Består huvudsakligen av tre sorters element - själva tabellen - table row - table data, själva cellerna där data placeras Rad 1, cell 1 Rad 2, cell 2 Rad 2, cell 1 Rad 2, cell 2

© Björn Hedin, NADA/KTH Svenska tecken Som vanligt är inte stödet för icke-amerikanska tecken helt tillfredsställande. Å, ä, ö kan lagras som å, ä och ö ifall själva filen använder teckenkodningen unicode Annars kan de kodas ö å och liknande något kryptiska förkortningar. Då siffror är svåra att komma ihåg finns även ett antal ”mnemoniska” förkortningar: –ö Ä å motsvarar ö, Ä och å

© Björn Hedin, NADA/KTH Kommentarer Det går att stoppa in kommentarer i html-dokument precis på samma sätt som i xml-dokument och sgml- dokument

© Björn Hedin, NADA/KTH html och xhtml Den senaste versionen av html heter xhtml och är till skillnad från html baserad på XML istället för SGML. Alla xhtml-dokument är alltså även xml-dokument, vilket innebär att man får tillgång till en mängd tekniker och mjukvaror som finns för xml (se t.ex. senare om CSS) Några viktiga skillnader gentemot html –Alla tags måste avslutas, t.ex. istället för som det är/var i html –Alla tagnamn och attributnamn ska vara med gemener.

© Björn Hedin, NADA/KTH Logiska mot fysiska tags I xhtml har man också gått längre i att separera innehåll från layout Tags såsom och attribut som bgcolor är inte längre tillåtna, allt layoutinformation ska ligga i separata stilmallar, CSS. Bra separation av layout och innehåll underlättar vid rendrering när mottagaren inte är en grafisk webläsare, utan t.ex. en textbaserad webläsare eller en röstsynth. Hjälper även om ett program vill söka information i dokumentet, t.ex. för att skapa en innehållsförteckning.

© Björn Hedin, NADA/KTH Validering För att kontrollera om den xhtmlkod man genererat är korrekt kan man använda en teknik som kallas validering. Då kontrolleras att endast element som finns definierade i xhtml- vokabulären används, och att de används på rätt sätt. Valideringstjänst finns på För att kunna validera en websida krävs att man lägger in en speciell inledning i html-dokumentet, där det talas om vilken html-version mm som används. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

© Björn Hedin, NADA/KTH Statiskt eller dynamiskt innehåll Det vi gör i detta moment är att skapa statiska sidor, dvs sitta med en texteditor och skapa sidor som inte ändras om inte själva sidan modifieras. Intressantare men svårare är att skapa innehållet dynamiskt, dvs ha ett program som genererar en ny html-sida vid varje access.

© Björn Hedin, NADA/KTH Dynamiskt innehåll med cgi-script Den enklaste eller åtminstone äldsta tekniken för dynamiskt innehåll är cgi-script Cgi = common gateway interface Måste av säkerhetsskäl ligga på vissa fördefinierade platser på webservern. Filen simplescript.cgi #!/bin/sh echo "Content-type:text/html" echo echo " " echo " Ett enkelt script " echo " " echo " Dagens datum =" date echo " "

© Björn Hedin, NADA/KTH Mer avancerade dynamiska dokument Exempeldokumentet var inte speciellt dynamiskt, det enda som ändras är datumet. Högre interaktivitetsnivå kan uppnås t.ex. genom att använda formulär där användaren kan mata in data. Detta kommer dock senare i Infsys/PHP-avsnittet.

© Björn Hedin, NADA/KTH Var läggs filerna Så länge man jobbar med statiska sidor går det utmärkt att jobba lokalt, dvs lägga sidorna på sin hårrdisk. Om man gör cgi-script måste sidorna dock läggas på en webserver Likaså måste sidorna läggas på en webserver när man vill att de ska göras åtkomliga för andra från internet. I unixsystem lägger man oftast sina privata websidor i en katalog som heter public_html som ska ligga direkt där man loggar in.

© Björn Hedin, NADA/KTH CSS- Cascading Stylesheets

© Björn Hedin, NADA/KTH Cascading Stylesheets Ett språk för att definiera hur XML-dokumen, html-dokument och xhtml-dokument ska rendreras på web, papper, TV, ljud etc. Rekommendation från W3C Är i sig inte XML-baserad, men opererar på XML-strukturer

© Björn Hedin, NADA/KTH CSS - Historiskt perspektiv html är byggt för att strukturera textdokument med textlänkar, oavsett presentationsmedium. Den kommersiella framgången för www drev på för att kunna göra mer estetiskt tilltalande dokument. Logiska element (t.ex. ) används för att få en viss grafisk effekt, istället för att ange ett logiskt innehåll. Netscape & Microsoft startade ”tag-kriget” där de lade till nya tags (, ) för att uppnå visuella resultat. Lösningen: Gör ett helt nytt språk för layout: CSS

© Björn Hedin, NADA/KTH Exempel Exempel: Nu Filen b.css p { font-family: Helvetica, sans-serif; } Filen b.html […] Text visas med helvetica […] Exempel: Förr Filen a.html […] Text visas med helvetica […]

© Björn Hedin, NADA/KTH Internt eller externt CSS Ett CSS kan antingen läggas i själva xml/html-dokumentet eller som en extern fil. Ett internt CSS läggs till som en CDATA-sektion. Interna CSS har fördelen att de endast kräver en http-överföring. Nackdelen är att man behöver skriva samma CSS-kod i flera dokument -> svårare att göra förändringar.

© Björn Hedin, NADA/KTH Associering XML-dokument ->CSS type: MIME-typen text/css href: URI till css-filen charset: Teckenuppsättning title: Titel media: För vilket medium stylesheetet ska användas. Ett XML-dokument kan ha flera stylesheets associerade med sig, men väljer vilket det ska använda beroende på outputmedium. Media som finns är: –screen-tty –tv- projection –handheld- print –braille- aural –All För att associera ett CSS till ett XML-dokument lägger man in en process-instruktion i XML- dokumentet. Processintruktion i en XML-fil <?xml-stylesheet type=”text/css” href=”b.css” charset=”ISO8859-1” title=”Mitt Stylesheet” media=”screen”?>

© Björn Hedin, NADA/KTH Grundprincipen: Mönster -> Beteende Grundprincipen är att hitta olika mönster med ”selectors” i XML- dokumentet, och till detta sätta värdet på en egenskap, property. Mönster är exempelvis tagnamn. Egenskaper kan vara font-storlek. Exempel: p { font-family: Helvetica, sans-serif; } Selector: Alla p-element Egenskap Egenskaps- värde

© Björn Hedin, NADA/KTH Olika selektorer Det finns en mängd olika selektorer med vilka man kan upptäcka olika typer av strukturer i XML- dokument. Exempelvis kan man finna ättlingar, barn, direkta barn, syskon och attribut. Exempel: * { font-size: Medium } p a { font-size: Medium } Matchar alla element Matchar alla a- element som är ättlingar till p- element

© Björn Hedin, NADA/KTH Olika selektorer Exempel: p > a { font-size: Medium } p + a { font-size: Medium } Matchar a-element som är omedelbara barn till p-element. Matchar alla a- element som följer direkt efter ett p- element (syskon) Exempel: Hej Matchar Matchar inte

© Björn Hedin, NADA/KTH Matchning på attribut Exempel: a-element med href=”a.html” a[href=”a.html”] {font-size: Medium} a-element som har ett href-attribut a[href] {font-size: Medium} a-element vars href innehåller delsträngen ”html” a[href~=”html”] {font-size: Medium} Det går att matcha på attributs värde, om attributet har ett värde över huvud taget, delsträngar av attributvärden och ID-värden

© Björn Hedin, NADA/KTH Pseudo-klasser och pseudo-element Exempel: Första barnelementen till p-element p:first-child {font-size: Medium} Första bokstaven i banan-element banan:first-letter {font-size: Medium} Första raden i banan-element banan:first-child {font-size: Medium} Före (efter) ett banan-element banan:before {content: ”En banan!”} Pseudo-klasser och pseudo-element matchar på olika typer av metainformation i XML- dokumentet. De separeras från element/attribut med ett kolon.

© Björn Hedin, NADA/KTH Properties: Höjd/längd/storlek Det finns flera properties för att ange höjd/längd/storlek. –border-width –font-size –line-height –margin-left, margin-top, margin- right, margin-bottom –left, top –height, width Det går att använda de flesta enheter som används i typografiska sammanhang. –Absoluta, t.ex. cm, in, pt –Relativat.ex. em, ex, px Exempel banan {line-height: 2.2em} tomat {font-size:14pt; line-height:3ex} Obs! Två properties till samma selektor, separerat med semikolon

© Björn Hedin, NADA/KTH Properties:Fonter För fonthantering finns ett antal properties. –font-family: t.ex Helvetica, sans- serif –font-style: t.ex. italic, slanted –font-size: absoluta värden som 12pt eller relativa värden som x-small –font-variant: small-caps för kapitäler –font-weight: bold, bolder, lighter eller på en skala från –font-stretch:wider, ultra-expanded, semi-condensed etc. –m.fl.

© Björn Hedin, NADA/KTH Properties:Texter Text-properties hanterar sådant som indrag, justering och enkla transformer. –text-indent: applicerbar endast på element med block-display. –text-align: left, right, center, justify –text-decoration: underline, overline, linethrough –text-transform: capitalize, uppercase, lowercase –white-space: pre för att bevara radbrydningar och whitespace.

© Björn Hedin, NADA/KTH Properties:Färger De tre viktigaste properties för färger som finns är –Color (observera: amerikansk stavning) –Background-color –Border-color Fördefinierade färger –Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow Eller som hexadecimala färgrepresentationer –p {color: #FFFFCC} Eller –P {color:rgb(100%,100%,70%}

© Björn Hedin, NADA/KTH Räknare Det finns också möjligheter att använda ”variabler” som räknare, och därefter använda räknarens värde. p:before { content: counter(banan) ”. ”; counter-increment: banan } H1 { counter-reset: banan }

© Björn Hedin, NADA/KTH Browsersupport Historiskt sett har stöd i browsers varit mycket bristfälligt. Detta har gjort att många undvikit stylesheets. Idag är stödet bättre. Bra stöd i Opera (bäst), Mozilla och IE5+. Uselt stöd i Netscape 4.7

© Björn Hedin, NADA/KTH Begränsningar och möjligheter I CSS1 stöds endast html-taggar I CSS2 stöds alla XML-dokument vilket är mycket bra då innehåll blir fullständigt skiljt från presentation. I CSS3 kommer stöd finnas för t.ex. kolumner, paginering, kraftfullare selektorer och bättre stöd för icke-europeiska teckenuppsättningar.

© Björn Hedin, NADA/KTH Begränsningar och möjligheter Ett stort problem är att det inte går att ändra ordningen på element, utan deras innehåll visas (eller visas inte) sekventiellt. Detta kan dock hanteras med XSLT (mer om det nästa tillfälle). XSL-FO är ett mycket exaktare layoutspråk med vilket man kan göra mycket exakt layout. XSLT och XSL-FO är båda XML-baserade.

© Björn Hedin, NADA/KTH Framtiden I XHTML är layout-tags förbjudna, istället ska CSS användas. Några tänkbara scenarios för framtidens webproduktion. –Enkla, statiska sidor görs i XHTML + CSS –Dokument där man har en mer innehållsrik xml-struktur i botten (t.ex. recept, pjäser etc) använder den XML-strukturen + CSS –Datastrukturer som kräver omordning av element eller som ska publiceras i flera kanaler (som web och wap) använder först XSLT-transformer för att strukturera innehållet, därefter CSS för media som stöds av CSS. –Slutligen sidor som kräver bättre layout än vad XHTML+CSS kan erbjuda använder XSL-FO för att transformera och göra layout.

© Björn Hedin, NADA/KTH Överkurs: WAP 1.0 Wap står för Wireless Application Protocol och är en ”standard” utvecklad av Ericsson, Nokia, Motorola m.fl. för internetöverföringar till/från mobila enheter. Analogt med att man på webben använder xhtml för att göra innehåll, använder man på wappen wml, wireless markup language WAP 2.0 kommer vara baserat på xhtml

© Björn Hedin, NADA/KTH WML WML bygger på en kortleksmetafor –Istället för att ladda ner dokument med länkar som i webfallet, laddar man hem en kortlek med kort. Dessa kort kan i sin tur innehålla länkar till andra kort eller kortlekar. –XML-baserad, inte allt för olik xhtml –Till skillnad från webbläsare är wap-enheter mycket mer strikta, dvs de godtar inte felaktigt kod. På kort sikt kan det kännas lite jobbigt, men på lång sikt innebär det att den tillgängliga informationsmängden kan tolkas entydigt.

© Björn Hedin, NADA/KTH Olika kategorier i wml Kortlekar och kort –wml, card, template, head, access, meta Events –do, ontimer, onenterforward, onenterbackward, onevent, postfield, onpick Tasks –go, prev, refresh,noop Länkar, bilder, timers och variabler –a, img, timer, setvar, $variabelnamn Textformattering –br, p, table, tr, td

© Björn Hedin, NADA/KTH WML-exempel <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" " HTML School XML School WAP School You selected: $(name) Mer information finns på

© Björn Hedin, NADA/KTH Sammanfattning html är ett bland många så kallade märkspråk. –Används för att skapa websidor Består av element (tags). Tags kan ha –Teckendatainnehåll –Andra element som innehåll –Ett antal attribut Hierarkisk struktur med ett ”topp-element” html ska endast användas för struktur. CSS ska användas för att ge strukturen ett visst utseende (om man vill ha ett visst utseende det vill säga).