Multimedia

Introduktion

Denna kursmodul handlar huvudsakligen om webdesign och en introduktion i multimedia i allmänhet. Detta innebär att även en del andra områden, såsom datorteknik och Internet, tas upp för att bl.a. ge en grundläggande förståelse för hur olika mediaformer representeras i datorn och hur information skickas över Internet. En grundförståelse för dessa områden är viktig för att kunna utveckla bra och effektiva websidor. Ett annat viktigt område som också tas upp är informationsarkitektur. Detta handlar om hur man organiserar sin information och presenterar den så att den blir lättillgänglig för målgruppen.

I kursen kommer du att få lära dig ett antal olika verktyg (program) för att hantera information med hjälp av datorn. Det är dock inte verktygen i sig som är huvudinnehållet, utan det är den teori som ligger bakom och de tekniker som används för att söka, värdera, hantera och presentera information som är den kunskap kursen ska ge.

Datorn är dock ett viktigt redskap i de uppgifter som du kommer att arbeta med i kursen. Datorn kommer också att vara ett redskap för viss kommunikation med lärare och kurskamrater i kursen. Du kommer att få en hel del information via WWW (varav denna kursmodul är en del av detta), men måste också själv aktivt söka information. Något av det första du bör göra är att orientera dig i kursens websidor. Titta igenom dem och se hur de är upplagda.

Kursmodulen innehåller ett antal uppgifter (presenteras längre ner på denna sida), där en del är av praktisk art där du använder datorn för att lära dig nya tekniker och en del går ut på att du ska söka information och besvara frågor. Många av uppgifterna arbetar du med parallellt och det är viktigt att du funderar på sambanden mellan uppgifterna och kopplar teorin till det praktiska arbetet. Studera därför läsanvisningarna som ges nästan längst ner på sidan och läs litteraturen parallellt med att du arbetar med uppgifterna.

Datorteknik

Det som vi tar upp här är säkert sådant som du redan känner till, men vi tar ändå med det här, så att du kan skumma igenom det.

Med dagens datorer kan vi arbeta med många olika mediaformer, såsom text, bild, animering, ljud och video - dvs multimedia. Datorns hårdvara arbetar dock hela tiden med 0:or och 1:or (eller egentligen elektriska signaler) som med olika kodmönster representerar de olika mediaformerna. För att effektivt kunna arbeta med multimedia och förstå förhållandena mellan kvalitet, filstorlek, överföringshastighet, etc, krävs en grundförståelse för "mellannivån", dvs hur information tolkas och hanteras i datorn. Denna introduktion syftar till att ge dig en introduktion till bitar, bytes, datarepresentation och en modell till hur datorn fungerar. Utnyttja följande länkar och läs igenom de sidor som beskriver detta. Gå sedan vid behov tillbaks till dessa sidor och repetera dem längre fram i kursen.

Datorns utveckling
Här ges en kort historik över utvecklingen från 1600-talets mekaniska räknemaskiner till dagens datorer.

Datorns språk

Här ges en beskrivning av hur datorn hanterar data i form av 0:or och 1:or. Bitar, bytes, etc introduceras som mått på data.

Datorteknik

Denna sida ger en introduktion till hur en dator är uppbyggd och ger en modell för den.

Multimedia

Multimedia kan definieras på ett antal olika sätt, beroende på vilket perspektiv man har. Man kan se på det som ett samhällsfenomen och se hur samhället och olika branscher förändras. Man kan också definiera det utifrån olika användningsområden. I kursen kommer det dock främst handla om hur man utnyttjar multimedia för att hantera information och skapa presentationer i olika former (främst WWW-baserat). Därför definierar vi multimedia utifrån hur det är uppbyggt.

En enkel definition är att multimedia är en användning av flera olika media, där media är text, bild, animering, ljud och video. Detta är dock inte tillräckligt för att definiera den form av multimedia vi är intresserade av. Med denna definition är det mesta multimedia; en tidning med text och bilder är multimedia, ett TV-program med bilder och ljud och ibland även text är multimedia, en föreläsning där föreläsaren pratar och skriver på tavlan är multimedia, etc. Mycket utav detta är dock passiva presentationer för användaren/åskådaren.

För att avgränsa definitionen lägger vi till en del egenskaper. För det första ska det vara datorbaserad multimedia, vilket innebär att den inte bara skapas med hjälp av en dator, utan den ska också presenteras med hjälp av en dator. Det räcker heller inte att det är flera mediaformer som används, utan dessa måste vara integrerade, så att de kompletterar varandra för att presentera samma budskap (kanske självklart, men ändå). Utöver detta ska hypermedialänkar användas för att strukturera informationen och presentationen bör vara interaktiv, så att användaren aktivt kan påverka presentationen (jämfört med en passiv åskådare av TV eller passivt bläddra i en tidning). För att specificera detta skulle man kunna kalla det för "datorbaserad interaktiv multimedia med en hypermediaarkitektur", men det är det vi menar då vi i denna kurs pratar om multimedia.

Då vi har datorbaserad multimedia gäller det att utnmyttja fördelarna med detta och undvika nackdelarna. Det är därför viktigt att vara medveten om dessa. T.ex. är datorn bra på att söka i stora informationsmängder, presentera en integration av flera mediaformer, erbjuda användaren möjligheter att interagera genom att välja olika vägar och kanske experimentera med olika data, etc. I en multimediaprodukt om fotografering skulle man t.ex. kunna låta användaren välja mellan olika väder- och ljusförhållanden och sedan experimentera med olika bländar- och tidsinställningar och direkt se hur resultatet skulle bli. Nackdelar är att det är svårare (mer tröttande) att läsa stora textmängder på bildskärmen, det kan vara svårt att få en överblick och hitta i stora informationsmängder, etc.

Då man utvecklar en multimediaprodukt gäller det att vara medveten om de fördelar och nackdelar som finns och se till att utnyttja fördelarna och undvika nackdelarna. Man måste också ha en god kännedom om den tänkta målgruppen och hur produkten kommer att användas. I annat fall är det stor risk att man utvecklar något som inte är användbart för användarna.

Idéerna bakom hypermedia, dvs sammanlänkning av flera dokument och möjlighet att utnyttja något automatiskt system för det kan sägas komma från Vannevar Bush som 1945 skrev artikeln As We May Think i tidskriften Atlantic Monthly. Bush var precident Roosewelts vetenskaplige rådgivare och visonerade om att man hade ett skrivbord med vetenskapliga artiklar på mikrofilmade kort. Med hjälp av ett tangentbord och en styrspak skulle man kunna skapa och utnyttja länkar mellan korten. Detta var förstås bara en vision, men den inspirerade många andra att fundera på hur idéerna skulle kunna förverkligas. I mitten av 1960-talet presenterade Ted Nelson och Douglas Engelbart var för sig idéer till att använda datorer sammankopplade i ett nätverk för att sammanlänka och utnyttja information distribuerat över flera datorer. Ted Nelson var också den som myntade termen hypertext. Det dröjde dock ända in på 1980-talet innan datorbaserad multimedia utvecklades på allvar och en bit in på 1990-talet innan det blev distribuerat via World Wide Web.

Följande två länkar introducerar multimedia och några termer och begrepp inom detta område.

Introduktion till multimedia
Här ges en introduktion till vanliga begrepp inom multimedia. Viktiga nyckelbegrepp är mediaformer (multimedia), interaktivitet och hypermedia.

Introduktion till författarverktyg

Du kan också läsa om arkitektur och hypermedia på följande sida. Skumma igenom det översiktligt nu, eftersom vi återkommer till detta i nästa kursmodul.

Läs nu vidare i kurslitteraturen (boken Information Architecture) enligt läsanvisningarna längre ner på denna sida. Här diskuteras det hur informationen kan organiseras och presenteras för att underlätta för användaren att hitta i den.

Internet

Internet kan enklast beskrivas som ett gigantiskt datornätverk bestående av många sammankopplade nätverk. Därav dess namn, Inter betyder mellan och net betyder nätverk. Ett nätverk för att koppla ihop nätverk. Idag är Internet stort och sträcker sig över hela jordklotet. Det finns siffror som säger att Internet består av 50.000 sammankopplade nätverk men sanningen är att ingen vet exakt hur många det är. Orsaken till det är att Internet är en funktionell och fungerande anarki.

En annan mindre teknisk definition av Internet är att det är ett nätverk av användare. År 1993, då World Wide Web introducerades, fanns det c:a 1 miljon användare på Internet. Nu, år 2000, är det drygt 300 miljoner användare i världen. I Sverige finns det nu mellan 3 och 4 miljoner Internetanvändare. Detta kan jämföras med c:a 6 miljoner telefonanslutningar, 2 miljoner mobiltelefoner, 3,6 miljoner hushåll med TV varav 1,3 miljoner med kabel-TV. Det finns drygt 600.000 svenska värddatorer (med ändelsen .se) och c:a 15 svenska TV-kanaler.

För att förstå varför Internet ser ut som det gör måste man gå till dess historia. Utvecklingen är präglad av det intellektuella klimatet av öppenhet och lätt anarki som rått inom den akademiska världen. Mycket av forskningsarbetet har utförts av studenter och dessa har också utgjort den första Internetkulturen som blivit präglad av studenters syn på livet.

Internets historia
En kort sammanfattning av utvecklingen till dagens Internet.

Internet används främst för två syften, kommunikation och informationsspridning. Det finns ett flertal sätt att kommunicera på Internet. E-post är det populäraste men det finns också möjlighet att överföra ljud och rörliga bilder. World Wide Web har öppnat möjligheter att sprida information på en globla skala. Idag används webben av alla möjliga kategorier av människor. Forskare söker material i olika databaser kopplade till nätet, ungdomar letar efter musik, vi gör våra bankärenden via webben, etc.

Men informationsfriheten har en baksida. Olagligt material och extrema åsikter kan mycket lätt spridas på nätet. Kriminell verksamhet kan använda nätet för sina syften. Det pågår en hätsk debatt mellan dem som kräver lag och ordning och de som anser att detta strider mot själva grundidén med Internet. Denna debatt kan även ses som ett tecken på den utveckling som Internet genomgår, från att har varit ett akademiskt experiment till att bli en integrerad del av vårt samhälles infrastruktur. Då man studerar Internet är det inte längre dess teknik som är intressantast, utan Internets revolutionerande inverkan på människors sätt att söka och erhålla information, möjligheter att påverka och påverkas och dess förändringar av samhället (åtminstone i västvärlden). Här står vi ännu så länge bara i början av utvecklingen, men den går snabbt framåt.

Adresser på WWW
Denna sida ger en kort introduktion till vad adresser på WWW består av.

World Wide Web

World Wide Web (WWW) är den del av Internet som har utvecklats mest under 1990-talet. På webben publicerar man information genom att lägga det på en serverdator och den blir sedan tillgänglig för alla användare på Internet. Detta skiljer sig från andra populära tjänster på Internet såsom epost och Usenet. Epost adresseras till en specifik användare eller grupp av användare. Usenet består av ett antal diskussionsgrupper där man gör inlägg. Dessa sprids sedan till olika servrar, men ligger endast kvar en kort tid (från ett par dagar till några veckor, beroende på hur mycket utrymme som finns på servern). På WWW publiceras informationen och den ligger sedan kvar tills den tas bort. Detta har naturligtvis en baksida; det finns väldigt mycket information och också väldigt mycket som är inaktuellt, eftersom den som en gång publicerade informationen inte brytt sig om att ta bort den då den blivit inaktuell.

I denna del av kursmodulen ska du dels analysera websidor och då bl.a. fundera på informationens aktualitet och pålitlighet. Men du ska också analysera sidorna ur ett multimedialt perspektiv och fundera på hur multimedia utnyttjas. Du ska också lära dig att själv producera och publicera websidor.

En sida på World Wide Web består av ett textdokument som är skrivet i beskrivningsspråket HTML (HyperText Markup Language) samt bilddokument och andra dokument som det finns referenser till. HTML består av ett antal koder för att t.ex. ange att här börjar fetstil och här slutar fetstil (t.ex. <B>text i fetstil</B>) eller här ska det finnas en bild (t.ex. <IMG SRC="minBild.gif">. Då man designar en websida, utvecklar man alltså ett textdokument med dessa koder inbakade i den text som ska visas på sidan. (Det är alltså inte frågan om någon programmering, som det ibland felaktigt kallas, med instruktioner och kommandon.)

Det finns många s.k. grafiska editorer eller WYSIWYG-editorer (WYSIWYG=What You See Is What You Get) där du kan ta fram en websida lika enkelt som du arbetar i en ordbehandlare, dvs du behöver inte kunna koderna för att kunna ta fram enkla websidor. HTML ger dock en viss begränsning i utformningen av sidans layout, så för att bättre kunna förstå de begränsningar som finns i editorerna och kunna trixa med att utveckla "snyggare" websidor, bör du kunna grunderna i HTML-kodning. Editorerna har dessutom endast redigeringsfunktioner för de vanligaste koderna i HTML, så vill man utnyttja alla möjligheter i HTML, måste man ibland redigera direkt i koden.

Du ska prova på att arbeta med HTML på tre olika sätt. Du börjar med att lära dig att koda HTML i en vanlig texteditor och sedan titta på resultatet i en webläsare (t.ex. Netscape Navigator eller Microsoft Internet Explorer). Då du på detta sätt lärt dig strukturen i HTML och de vanligaste (även de flesta) koderna, övergår du sedan till en HTML-editor, en texteditor som har inbyggt stöd för HTML-kodning. Slutligen använder du en WYSIWYG-editor. Du bör då gå igenom denna och lära dig vad man kan göra och inte göra, samt hur du går in i HTML-koden och ändrar det som editorn producerar.

Läs också igenom följande genomgångar:

MultiMediaLab:s sidor om webdesign
Här finns en en introduktion till HTML, en genomgång av adresser på WWW, en kort beskrivning av olika typer av editorer och grundläggande övningar (se längre ner på denna sida i uppgift 1). Det du bör läsa igenom nu är följande:

Då du sedan gått igenom de grundläggande övningarna och testat olika arbetssätt (uppgift 1), går du igenom följande kategorier, samtidigt som du gör din egen sida (uppgift 2). Du behöver naturligtvis inte lära dig alla koder, men läs igenom introduktionerna och orientera dig i de olika kategorierna, så att du ser vad som finns. Övningarna gör du efter behov/intresse/tid.

Då du lärt dig grunderna i HTML arbetar du förslagsvis vidare med en WYSIWYG-editor, men även om du använder en sådan, är det viktigt att du även i fortsättningen lär dig att mer direkt hantera koderna och alla deras attribut, om du vill bli en effektiv webdesigner.

Du rekommenderas dock att alltid börja med en WYSIWYG-editor, för att bygga upp grundstrukturen på sajten och de sidor som ingår i den. Vid behov går du in i HTML-koden för att effektivisera den eller lägga till sådant som editorn inte klarar av.

Du ska lära dig mer om webdesign och ska då göra det på kodnivå, samtidigt som du också lär dig mer om både möjligheter och begränsningar i den editor som du använder.

De delar av HTML som du ska fördjupa dig i, handlar om utformning av layout och i ett fall interaktion på websidor. Detta utgör en stor del av det grafiska användargränssnittet (GUI, Graphical User Interface). Samtidigt som du studerar de olika delarna av HTML, bör du fundera på hur design av ett bra GUI på websidor bör se ut. Leta reda på websidor som använder den teknik du studerar och analysera hur den används på dessa sidor. Vad är det som är bra respektive dåligt på dessa sidor och varför?

Användargränssnittet består dock inte bara av den grafiska layouten och formen, utan interaktiviteten, dvs vad man som användare kan göra (förutom att passivt titta på presentationen) är en viktig del av gränssnittet. Detta område kallas även för människa-datorinteraktion (MDI, eller human-computer interaction, HCI, på engelska, CHI på amerikanska), men borde kanske snarare kallas människa-informationinteraktion, då det är informationen som presenteras i datorn som man bör kunna interagera med.

I de praktiska uppgifterna ska du fördjupa dig i två områden. Studera dock introduktionen till alla dessa och orientera dig i vad det handlar om. Syftet är att du ska få en övergripande kunskap om hur tekniken för dessa områden fungerar, men du behöver inte lära dig koder eller arbetssätt för mer än två av dem.

Titta igenom introduktionen till följande:

Föreläsningar

Föreläsning 1

Föreläsning 2

HTML-dokumenten som används som exempel på föreläsningen: demo2.zip (32KB)
(referenser till dokumenten finns i föreläsningsbilderna)

Mål

Denna kursmodul syftar till att du ska få:

Program & Dokument

I övningarna och uppgifterna kommer du att använda följande program:

Komprimeringsprogram

Behöver du ett komprimeringsprogram kan du ladda hem det från t.ex. TUCOWS (välj ditt operativsystem och sedan Download Library där du väljer Compression Utilities under rubriken General Tools eller Utilities). För MacOS rekommenderas StuffIt Expander för att packa upp filer och DropStuff för att packa filer (eller ZipIt om du ska skicka filer till en Windows-användare). För Windows rekommenderas WinZip, både för packning och uppackning.

Här finns länkar till sidor där du kan ladda ner HTML-editorerna. Detta gör du dock inte i MultiMediaLab:s salar eller om du sitter i ett studiecenter, eftersom de program du behöver redan finns där (skulle du där sakna något program kontaktar du någon ansvaraig för den sal du sitter i).

AOLpress är en editor som är gratis och som förut fanns till både MacOS och Windows. Tyvärr finns den inte längre till MacOS, så du som kör detta system får istället välja en annan editor av samma typ. Använder du Netscapes webläsare, kan du använda Composer. Har du en snabb Internet-anslutning kan du t.ex. ladda hem en testversion av Claris HomePage 3.0. Detta är en stor fil (>10Mb), så du bör ha en snabb Internetanslutning eller tålamod. Programmet och även Adobe PageMill (som inte längre tillverkas) och andra editorer kan även laddas ner från TUCOWS. Välj Editors Beginners under HTML Tools. Du kan också ladda hem en demoversion av Dreamweaver från Macromedia. Testversionerna är oftast kompletta versioner av programmen, fast tidsbegränsade till 30 dagar.

Även om du använder Windows kan du naturligtvis istället välja någon av dessa editorer.

Uppgifter

Följande uppgifter ingår i denna kursmodul. Läs först igenom alla uppgifter, så att du sätter dig in i vad som ska göras. Du bör arbeta med dem parallellt.

Ni rekommenderas att utföra uppgifterna i par, eftersom ni lär er en hel del av att diskutera dem med varandra. Uppgift 4 kan utföras i en större grupp där ni planerar tillsammans och sedan sätter ihop en gemensam websajt. Arbetet med delar av den bör ni dock dela upp mellan er.
0.

Kom igång

Detta är egentligen ingen uppgift, utan förberedelser för att du ska komma igång i kursen. Det finns med här för att du säkert inte ska missa det. Har du inte redan gjort det som tas upp här, är det lämpligt att börja med detta.

Kursens websidor

Orientera dig i kursens websidor. Skaffa dig en uppfattning om hur de är strukturerade och vad de innehåller. Alla kursmoduler är dock troligen inte klara vid kursstart, utan de uppdateras då det blir dags att köra igång dem enligt schemat.

Webserver

I denna kursmodul ska du i en uppgift längre ner skapa en egen liten websajt och du ska också publicera den på en server. Det kan därför vara bra att redan nu se till att du har tillgång till ett serverutrymme, där du kan lägga dina websidor.

Om du studerar på universitetets campus tittar du på universitetets information om e-post och webplats till studenter på Student IT. Sitter du i ett studiecentra undersöker du vilka möjligheter det finns där. I annat fall undersöker du om du har ett serverutrymme genom din Internetleverantör eller skaffar dig ett konto på en fri server. Exempel på fria servrar är:

Undersök också hur du lägger upp en fil på servern och om du gör det via ett webformulär eller om du behöver ett ftp-program. Kolla först infon som ges på tjänstens websida, men fråga sedan gärna kursens handledare om det är något du undrar över.
1.

Analys av multimedia

Studera några valfria websidor ur ett multimedialt perspektiv. Studera hur de är uppbyggda och identifiera "beståndsdelar". Syftet är att du ska få en grundförståelse för vad websidor består av, men också att du ska fundera lite på hur man designar multimediapresentationer på WWW.

Utgå från de frågeställningar som tas upp i kapitel 1 till 5 i boken Information Architecture av Rosenfield & Morville. Försök hitta exempel på sidor eller delar av dem som du tycker är bra och exempel på sådant som är dåligt. Motivera varför det är bra respektive dåligt, både utifrån dina egna åsikter och utifrån den teori som tas upp i läroboken.

Välj ut och analysera några olika typer av websidor. Om du har tillgång till CD-ROM-skivor bör du även titta på några sådana och jämföra multimedia på WWW med multimedia på CD-ROM.
2.

World Wide Web Consortium

Beskriv kort W3C (World Wide Web Consortium). Vad är det? Vad är deras syfte? Vilka ingår i W3C?

I denna uppgift kan det vara lämpligt att titta på följande sajt:

3.

Jämförelse mellan olika arbetssätt vid framställning av websidor

Jämför och utvärdera tre arbetssätt (kodning för hand, användning av editor med stöd för HTML-kodning och användning av en s.k. WYSIWYG-editor för webdesign). Observera att det är arbetssätten och inte programmen som du ska jämföra.

  1. Kodning för hand
  2. HTML-editor
    • Testa en HTML-editor som innehåller stöd för HTML-kodning. I editorn kan olika HTML-koder väljas med menykommandon eller knappar. Dokumentet struktureras också automatiskt, så att det blir lättöverskådligt. Använder du MacOS kan du testa editorn PageSpinner. Använder du Windows kan du testa editorn 40tude HTML. Testa så mycket som du tycker att du behöver för att förstå hur man arbetar med programmet. Du ska inte bli någon expert på programmet, utan syftet är endast att du ska se hur ett program av den här typen fungerar.
  3. WYSIWYG-editor
    • Testa en WYSIWYG-editor, antingen helt på egen hand eller genom att köra igenom en tutorial, om en sådan medföljer programmet. Ta fram HTML-koden då och då och studera den kod som editorn producerar. Det är inte meningen att du ska lära dig allt om programmet, utan syftet är att du ska sätta dig in i arbetssättet för att sätta ihop enkla websidor, så att du kan jämföra detta med de två andra arbetssätten.
      • Tips för AOLpress
        • Ta fram programmets självstudiekurs genom menykommandot Help->Tutorial...
        • Klicka på knappen TOC längst ner på sidan, för att få fram en innehållsförteckning (Table Of Content).
        • Under rubriken Basics går du igenom Opening a Page, Creating a Page och Save to Your Computer.
        • Under rubriken Creating Pages går du igenom Creating Text, Creating Lists, Creating Tables, Adding Images och Creating Links (men hoppa över avsnittet om image maps).
        • Skapa en ny tom sida och experimentera med att t.ex. skapa rubriker, länkar och ta in bilder.
      • Tips för Dreamweaver
        • Kopiera först mappen Tutorial ifrån Dreamweavers mapp till din egen mapp.
        • Öppna programmets hjälpsidor med menykommandot Help->Dreamweaver Help Pages.
        • Klicka på Introduction i innehållsförteckningen och sedan på Guided Tour of Dreamweaver.
        • Gå igenom avsnittet Workspace i den guidade turen. Stanna gärna upp och gå över till Dreamweaver och testa på egen hand innan du klickar på Next i den guidade turen.
        • Gå sedan igenom programmets tutorial t.o.m avsnittet Create links.
          • Resten av den guidade turen och programmets tutorial kan du vid behov gå igenom i del 2 av kursmodulen.
        • Skapa en ny tom sida och experimentera med att t.ex. skapa rubriker, länkar och ta in bilder.
      • Använder du en annan editor får du själv leta reda på en tutorial eller testa på egen hand.
4.

En egen websajt

Skapa en egen websajt med ett antal sidor (tillräckligt många så att en struktur kan byggas upp) och med valfritt ämne. Även om du jobbar enskilt eller i par med någon annan, kan ni gärna gå ihop i en lite större grupp i denna uppgift och göra en gemensam sajt. Ni planerar den då tillsammans, men gör sedan var sina delar. Fördelen med en större grupp är att ni då måste diskutera hur ni ska organisera sajten och vilken layout ni ska ha. Denna diskussion kan vara mycket lärorik.

Krav:

  • Du ska i din rapport motivera hur multimedia utnyttjats på bästa sätt:
    • Val av olika mediaformer (du behöver inte använda bilder etc överallt, utan ibland kan det räcka med att du skriver "här skulle det finnas en bild som visar ...")
    • Val av struktur
    • Val av layout och färger
    • Fördelar med din websajt jämfört med att använda andra distributionsformer eller presentationsformer

Sajten skapar du på valfritt sätt, dvs med något eller några av de verktyg du använt i uppgift 5.

Du behöver inte överallt ha "korrekta" bilder, dvs bilder med "rätt ämnesinnehåll" (ämnet är ju fritt), utan kan kopiera bilder som du hittar på webben. Tänk dock på att du ska publicera din sajt på en server och måste därför ha rätt att utnyttja de bilder du använder. Vill du kopiera en bild som du hittar på WWW, kan du göra det genom att i t.ex. Netscape Navigator föra markören till den och sedan trycka ned musknappen (högra musknappen på en PC). Det dyker då upp en "popup-meny" där du kan välja att spara bilden på din hårddisk. Du kan sedan använda den på din egen websida.

Arbetet med sajten delas förslagsvis upp på följande sätt:

  1. Planera sajten - dess struktur, vad som ska finnas på de olika sidorna, layout, stil, rubriker, etc.
  2. Skapa först en utav sidorna för att träna vidare på den teknik ifrån uppgift 3 som du vill använda.
  3. Fördjupa dig i någon av nedanstående områden.
  4. Skapa sedan resten av sajten och utnyttja de båda områden som du fördjupat dig i.

Studera och lär dig att använda åtminstone två av följande delar av HTML och webdesign. Är ni en större grupp som gör en gemensam sajt kan ni fördela områdena så att hela gruppen täcker in flera områden. Se beskrivningar under rubriken Kategorier på sajten Webdesign.

  • Layout med tabeller - Kategori: Tabeller
    • Undersök och experimentera med hur du med hjälp av tabeller kan placera text och bilder där du vill. Gör tabellkanterna osynliga, så syns inte rutmönstret.
  • Klickbara bilder (image maps) - Kategori: Länkar
    • En s.k. klickbar bild är en bild där man gjort en del av bilden till en aktiv yta för en länk. Man kan ha oregelbundet formade ytor och man kan ha flera länkar i samma bild.
  • Ramar (frames) - Kategori: Ramar
    • Med ramar delar man in fönstret i webläsaren i flera rutor, där det presenteras ett dokument i varje ruta. T.ex. kan man göra som på kursens websidor med en innehållsförteckning till vänster.
  • Formulär - Kategori: Formulär
    • Ett formulär består av knappar, menyer och textfält. Användaren kan mata in uppgifter och sedan klicka på en knapp som startar ett program eller skickar iväg uppgifterna till en server. Programmet kan vara skrivet i t.ex. JavaScript, Perl eller något annat språk. I denna uppgift ska du dock inte titta på detta, utan endast se hur du använder HTML, för att bygga upp formulärets layout.
  • Stilmallar - Kategori: Stilmallar
    • Med stilinställningar och stilmallar kan man välja olika inställningar för sitt HTML-dokument, t.ex. typsnitt, färg, storlek, etc för olika typer av stycken. Genom att spara dessa inställningar i ett malldokument, kan man lätt utnyttja samma inställningar för flera websidor.

Redovisning

Du redovisar alla uppgifter utom uppgift 0. Detta gör du dels i en rapport som du bifogar antingen som ren text i ett epost-meddelande eller som ett bifogad RTF-dokument. De websidor som du producerar publicerar du på en server och adressen till sidorna tar du med i rapporten. Skriv också namn och personnummer i rapporten, så att vi vet vem som redovisat. Rapporten skickar du med epost till läraren ansvarig för kursmodulen (epost-adress finns på kursens schema).

Om du jobbat med uppgifterna tillsammans med någon annan, skriver ni en gemensam rapport. Glöm då inte bort att ta med båda namnen i rapporten. Om ni jobbat i en större grupp i uppgift 4, skriver ni ändå enskilda (eller parvisa) rapporter.

I rapporten ges motiverade "svar" på uppgift 1 till 3. Du beskriver alltså vad du kom fram till i analysen i uppgift 2 och motiverar det dels utifrån egna åsikter och dels utifrån vad som tas upp i läroboken. För uppgift 2 besvarar du de frågor som ges där. I uppgift 3 skriver du ner vad du kom fram till i jämförelsen av arbetssätten. I uppgift 4 beskriver du hur du/ni arbetat och besvarar punkterna som ges i uppgiftens krav. Ge också en kort beskrivning av de områden som du i slutet av uppgiften fördjupade dig i. Glöm inte att också ange webadressen till websajten. Lämplig omfattning kan vara c:a en sida för uppgift 1, en halv till en sida vardera för uppgift 2 och 3 och två till tre sidor för uppgift 4.

Terminologi

Följande termer är några (långt ifrån alla) av de som introduceras i denna kursmodul. De ges både på svenska och engelska, även om det oftast inte är någon större skillnad. Använd denna terminologilista som en början på en egen lista. Då du stöter på termer som är nya för dig försöker du ta reda på vad de heter både på svenska och engelska, lägger till dem till din egen lista och skriver en liten beskrivning. De listor som du på detta sätt skapar i de olika kursmodulerna blir sedan en bra repetition inför den skriftliga tentamen i slutet av kursen.
Svenska Engelska Beskrivning
Bildpunkt Pixel Bilder byggs upp av bildpunkter. Varje bildpunkt representeras av en eller flera bitar, beroende på antalet färger som används.
Digitalisera Digitize Omvandling av analog data (ljud, bilder, etc) till enskilda enheter, så att den kan representeras med 0:or och 1:or i en dator.
Hypertext Hypertext Referens, länk. Kallas även hypermedia.
Hypermedia Hypermedia Kallas även hypertext. En länk (referens) från ett ankare till en destination, t.ex. från en knapp till en ny sida.
Multimediaarkitektur Multimedia Architecture Val av struktur, metafor, navigering, etc i utformningen av multimediaapllikationen.
FTP FTP File Transfer Protocol. Filöverföring på Internet.
HTML HTML HyperText Markup Language. Ett beskrivningsspråk med koder för att utforma websidor.
HTTP HTTP HyperText Transfer Protocol. Överföring av websidor på Internet.
URL URL Uniform Resource Locator. En adress till ett dokument på Internet.
WWW WWW World Wide Web. Kan ses som en del av Internet där information överförs via ett gränsnsitt som gör det lättare att söka och läsa information.
Sajt Site En grupp websidor som hör ihop, t.ex. utgör kursens websidor en sajt.
Ankare Anchor Utgångspunkt för en länk. I HTML är det också destinationspunkten för en länk inom samma sida.
Bläddra Browse Föflytta sig på måfå i informationen, t.ex. genom att utnyttja länkar.
Navigera Navigate Mer målmedveten förflyttning. Index, sökfunktioner, etc kan vara verktyg för navigeringen.
Bakåt Back-track Hopp tillbaks till den sida där man senast utnyttjade en länk.
Tabell Table Tabellstruktur i HTML.
Klickbar bild Image Map Delar av en bild kan utgöra ankare för länkar.
Ram Frame En websida kan delas upp i flera ramar, där ett html-dokument visas i varje ram.
Formulär Form På en websida kan man ha formulär, där användare kan skriva in text i textrutor och göra val genom att klicka på olika knappar. Svaren kan sedan skickas iväg till värddatorn eller en epost-adress.
Stilmall Style Sheet Inställningar av textstil för olika HTML-taggar kan göras separat i HTML-dokumentets huvud eller i ett särskilt dokument.
Användargränssnitt User Interface Gränssnitt mellan användaren och informationen. Även om hårdvaran ingår i användargränssnittet, avser man ofta den grafiska layouten på bildskärmen. Även funktioner för navigering, etc. ingår i användargränssnittet.
Aktiv yta Hot Spot En knapp eller del av en bild, dvs en yta på bildskärmen, som utgör ett ankare för en länk eller en funktion.
Metafor Metaphor Bildligt uttryckssätt. Ger en konceptuell modell, som gör det lättare för användaren att förstå arkitekturen och hur man navigerar.

Litteratur

I följande läsanvisningar följer du det som gäller kursens böcker. Övrig litteratur är bredvidläsningslitteratur och är inte obligatorisk.

Läs igenom de kapitel som här anges. Om du tycker att en del avsnitt är svåra att förstå nu, läser du i alla fall vidare. Gå sedan tillbaks och repetera kapitlen längre fram i kursen, t.ex. i kursmodulerna webdesign och värdering.

Det finns många böcker om HTML och WWW. Eftersom utvecklingen går så snabbt är många av de rena instruktionsböckerna redan inaktuella. Livslängden för en sådan bok är ungefär ett år. Grunderna som tas upp i böckerna gäller naturligtvis fortfarande, men det senaste inom området finns naturligtvis inte med i "äldre" böcker. I kurserna där denna kursmodul ingår har vi böcker som tar upp mera bestående kunskap om multimedia, men inte så mycket om HTML. Aktuell information om detta finns istället på WWW (se under rubrikerna Introduktion och Länkar).

Läsanvisningar

Information Architecture for the World Wide Web
av Louis Rosenfeld & Peter Morville, O'Reilly (1998)

Digital multimedia
av Nigel Chapman & Janny Chapman, Wiley (2000)

Bredvidläsningslitteratur

En del av den här föreslagna bredvidläsningslitteraturen ligger ganska långt vid sidan om de praktiska övningarna, men eftersom övningarna och uppgiften handlar om att utforma websidors grafiska gränssnitt och i viss mån interaktion, finns det en klar anknytning.

Böcker om multimedia:

Designing Multimedia
av Lisa Lopuck, Peachpit Press (1996)

Multimedia Making It Work (4th ed.)
av Tay Vaughan, Osborne McGraw-Hill (1996-1998)

Allt om Multimedia
av Anthony Whitehorn (red), Bonnier Alba (1997)

Multimedia i utbildning, Ett refernsmaterial
utgiven av Skolverket 1996

Böcker om Internet:

Harley Hahn Teaches the Internet (second edition)
av Harley Hahn, Que Corporation (2000)

Computer Confluence, Business Edition
av Beekman, Brent och Rathswohl, Addison Wesley Longman, Inc. (1997)

Internet - en handbok för faktasökare
av Björn Häger och Anna Strömblad, Sveriges Radios förlag(1997)

The Internet complete reference, 2nd edition
av Harley Hahn, Osborne McGraw-Hill (1996)

Internet - lära med bilder, andra upplagan
av Preston Gralla, Ziff Davis Press(1998)

Nätjuridik - Lag och rätt på Internet (andra upplagan)
av Thomas Carlén-Wendels, Norstedts Juridik AB (1998)

IT och renässansmänniskans återkomst
av Christer Sturmark, Norstedts, 1997, 1999

Böcker om webdesign:

Elements of Web Design (2nd Edition)
av Darci DiNucci, Maria Giudice och Lynne Stiles, Peachpit Press (1998)

Internet HTML-boken (3:e upplagan)
av Rolf Staflin, Pagina (1998)

Dynamisk HTML i praktiken
av Jesper Ek & Karl-Johan Norén, utgiven av Pagina (1998)

Lär dig Dynamisk HTML på 1 vecka
av Bruce Campbell & Rick Darnell, utgiven av Pagina (1998-9)

Om du vill fördjupa dig lite i interaktionsbegreppet i allmänhet, rekommenderas följande böcker.

TOG on Interface
av Bruce Tognazzini, utgiven av Addison Wesley (1992)

The Design of Everyday Things
av Donald A. Norman, utgiven av Doubleday Currency (1988)

Blotta tanken
av Peter Gärdenfors, utgiven av Bokförlaget Nya Doxa (1992)

Länkar

Följande länkar kan vara av intresse att också titta på. Dessa är dock inte "obligatoriska" (om de inte också förekommer i texten i inledningen eller uppgifterna) utan kan jämföras med bredvidläsningslitteratur. Alla länkar öppnas i ett nytt fönster.

Datorteknik

Persondatorns historia av Erik Pettersson

Sydsvenskans datorordlista

Svenska datatermgruppen

whatis.com ger en förklaring till många termer i datorvärlden.

Multimedia och Internet

Skolverket innehåller en hel del matnyttig information, bl.a. Svenska skoldatanätet med Ett smultronställe för Internetblåbär.

Introduktion till Internet hos Fysikum, Stockholms universitet

Statistiklänkar:

Internet Domain Survey - statistik med bl.a. antal värddatorer på Internet

RIPE NCC - statistik över användning av Internet

Nua Internet Surveys - undersökningar av Internetanvändning

Internettidningar

Internetguiden

Internetworld

World Wide Web

MultiMediaLab:s sidor om webdesign

Yahoo Sverige World Wide Web

W3C World Wide Web Concortium. Organisationen som rekommenderar standards för HTML, bildformat på WWW, etc.

HTML
HTML 3.2 Specification

HTML 4.0 Specification

Style Sheet

CSS

CSS1 (level 1) Specification

CSS2 (level 2) Specification

Netscape

Netscape Documentation

HTML Documentation

Microsoft

Internet Explorer

Passagen HTMLverkstad

Svenska Yahoos katalog över HTML-sidor

Sök även själv information på WWW. Utgå t.ex. från bibliotekets lista över sökmotorer.

© MultiMediaLab, Växjö universitet - Uppdaterad: 2000.09.06 (Rune Körnefors)