© Björn Lindell, Datapedagogiskt Forum, SLU Hur kommer jag i gång med att göra web-sidor? Länkar “on line” på URL:

En presentation över ämnet: "© Björn Lindell, Datapedagogiskt Forum, SLU Hur kommer jag i gång med att göra web-sidor? Länkar “on line” på URL:"— Presentationens avskrift:

1 © Björn Lindell, Datapedagogiskt Forum, SLU Hur kommer jag i gång med att göra web-sidor? Länkar “on line” på URL: http://datapedagogik.cf.slu.se/kurser/ 1997 - 11 - 28 Björn Lindell Tel: 018 - 67 15 46 E-post: Bjorn.Lindell@data.slu.se

2 © Björn Lindell, Datapedagogiskt Forum, SLU Introduktion Vad skiljer Elektroniska media från tryck Arbetsgången när du skapar en webpresentation Teamet Hantverken –HTML –Bildbehandling Vad vi kommit fram till Hur går ni vidare Hur kommer jag i gång med att göra web-sidor?

3 © Björn Lindell, Datapedagogiskt Forum, SLU Vad skiljer Elektroniska media från tryck  Omedelbarheten, här och nu  Lämpar sig inte för att läsa långa texter  Bildskärmen är liggande inte stående A4  Varje dokument är självständigt och måste märkas Möjlighet till interaktivitet

4 © Björn Lindell, Datapedagogiskt Forum, SLU Arbetsgången när du skapar en webpresentation  Det är en process, inte ett projekt  De olika stegen när man skriver en WWW- presentation  Planera webbens struktur i förväg  Planera hur filerna skall ordnas på din hårdisk  Underhåll och uppdatering (Planera in en uppdateringscykel)  Jobba i små synliga steg, försök inte göra allt på en gång.

5 © Björn Lindell, Datapedagogiskt Forum, SLU Arbetsgången Analysfas Strukturfas Layoutfas WWW kodning Underhåll och Markndsföring –Häng inte upp allt på en enda entusiast –Koordinera marknadsföring i olika medier Vilka är vi? Vilken(a) målgrupp(er) har vi? Vilket budskap vill vi förmedla? Samla det material som redan finns Skriv / fotografera nytt Skapa struktur / flödesplan Tänk efter och gör om..... Skapa en tilltalande layout utifrån: –Vilka vi är –Vårt budskap –Målgruppens tekniska möjligheter –Omsätt ideérna till verklighet –Använd html version? (ej det senaste)

6 © Björn Lindell, Datapedagogiskt Forum, SLU Svårighetsgrad och tid Tid Svårig- hetsgrad Underhåll och Marknadsföring WWW- kodning Layout Analysfas Strukturfas

7 © Björn Lindell, Datapedagogiskt Forum, SLU Ordning och reda

8 © Björn Lindell, Datapedagogiskt Forum, SLU Teamet  Ensam är inte stark, man kan och orkar inte allt själv.  Framförallt inte om man arbetar med en institutions presentation

9 © Björn Lindell, Datapedagogiskt Forum, SLU Hantverken, HTML och bildbehandling HTML Bild- behandling Layout Analys och Struktur

10 © Björn Lindell, Datapedagogiskt Forum, SLU HTML HTML, (Hypertext markup langue) Det språk som WWW sidor skrivs i Det är rena textfiler man skapar Filändelse.htm (eller.html) Bilder är inte ”inbakade” i html dokument

11 © Björn Lindell, Datapedagogiskt Forum, SLU HTMLoch bilder Ny hemsida för SLU

12 © Björn Lindell, Datapedagogiskt Forum, SLU HTML kod för SLUs startsida Ny hemsida för SLU <IMG SRC="/images/english.gif" border=0 ALT="English"> <IMG SRC="/images/sok.gif" cellpadding=0 border=0 ALT="Sök"> Välkommen till SLU Detta är SLU Aktuellt SLU:s institutioner och avdelningar SLU:s katalog Utbildning Forskning Bibliotek Och så vidare..........

13 © Björn Lindell, Datapedagogiskt Forum, SLU Grundelementen i en html-sida En dokumenttitel Här skall det in som syns på WWW sidan HEAD (sidhuvudet) Syns ej, (förutom dokumentets titel) BODY, (sidkroppen) Det som kommer att synas på skärmen skall skrivas i detta utrymme. HTML- dokument

14 © Björn Lindell, Datapedagogiskt Forum, SLU Webens historia WW II 1960 1970 1989 1991 Hypertext idén föddes Försök med micro- film och knappar SGLM och vissa kommer- siella tillämpningar W3 föddes vid CERN 1992-93 -94-95 -96 W3 installerades vid CERN MOSAIC programmet WWW Netscape Gopher lever och dör

15 © Björn Lindell, Datapedagogiskt Forum, SLU HTML språkets utveckling Version 0,9 Ver 1,0 Ver 2,0 Ver 3,0 html+ Ver 3,2 HTML std. Länkar och text Bilder Formulär Tabeller bakgrunder Stylesheets Frames Java mm N 1.1N 1.0N 1.2 N 0,91b N 0.9b N 2.0N 3.0b N 4.0 finns ej kommer 96/97 Här börjar N avvika från std Blink, center mm egna “taggar” Färg o bildbakgrund mat.formler Tabeller a la Netscape Stöder html3,2 Frames och “plug ins” Bättre ljud och video

16 © Björn Lindell, Datapedagogiskt Forum, SLU Olika verktyg för att skriva WWW-sidor

17 © Björn Lindell, Datapedagogiskt Forum, SLU FrontPages delar

18 © Björn Lindell, Datapedagogiskt Forum, SLU Bildbehandling 1 1. Scanner2. Rita bilden3. Digital kamera4. Photo CD Digital bild Orginal

19 © Björn Lindell, Datapedagogiskt Forum, SLU Bildbehandling 2 1. Scanner 2. Rita bilden3. Digital kamera 4. Photo CD Digital bild Orginal Manipulera bilden Mellan orginal

20 © Björn Lindell, Datapedagogiskt Forum, SLU Bildbehandling 3 1. Scanner 2. Rita bilden3. Digital kamera 4. Photo CD Digital bild Orginal Manipulera bilden Mellan orginal JPEG bild GIF bild

21 © Björn Lindell, Datapedagogiskt Forum, SLU Avslutning Underlag för beslut om… Metod Verktyg och hur ni går vidare HTML I HTML II FrontPage I FrontPage II Skapa bilder för WWW Koppla databaser till WWW