Presentasjon lastes. Vennligst vent

Presentasjon lastes. Vennligst vent

1 Oppsummering Webpublisering 22.11.04 Kirsten Ribu HiO.

Liknende presentasjoner


Presentasjon om: "1 Oppsummering Webpublisering 22.11.04 Kirsten Ribu HiO."— Utskrift av presentasjonen:

1 1 Oppsummering Webpublisering Kirsten Ribu HiO

2 2 Biter og Bytes  En bit (engelsk= bit) er en 1 eller en 0  Datamaskiner arbeider ofte med grupper på 8 biter. En slik gruppe på 8 biter kalles en byte. (Engelsk: ’bite’ = munnfull)  Innholdet i en byte skrives enklest ned i form av to heksadesimale siffer.  Eksempel: = A6

3 3 Konvertering fra desimal til binær Eksempel: Konverter tallet 53 til et binærtall: 53 : 2 = 26 rest 1 26 : 2 = 13 rest 0 13 : 2 = 6 rest 1 6 : 2 = 3 rest 0 3 : 2 = 1 rest 1 1: 2 = 0 rest 1 Svar: 53 = M

4 4 Konvertering fra binære til desimale tall (1x2^5) + (1x2^4) + (0x2^3) +(1x2^2) + (0x2^1) +(1x2^0) (2) = 53 (10)

5 5 Addresser på Internett  Hver eneste datamaskin og hver eneste ruter på Internett har en IP adresse som er 32 biter lang (IP versjon 4). Feks::  Hver eneste datamaskin har en unik MAC adresse – dvs en fysisk adresse som er brent inn på nettverkskortet.  Adressen består av hexadesimale tall.  For eksempel: 8:0:2b:e4:b1:2 – den lesbare utgaven av nettverksadressen (En binær adresse er ikke lesbar for oss mennesker, derfor brukes det hexadesimale tallet.)

6 6 Datamaskiner forstår bare 1-ere og nuller: Konverter IP- adressen til et binært tall:

7 7 XHTML  Hva har vi lært i kurset?

8 8 (X)HTML  (eXtensible) HyperText Markup Language er et språk med et system av koder for å lage interaktive web-sider.  Et (X)HTML-dokument (XHTML-fil) er en ren tekst-fil.  Det inneholder hverken bilder, lyd, videoer eller animasjoner. Derimot inneholder det "pekere" til slik type informasjon (filer).  Et (X)HTML-dokument inneholder koder (tagger og attributter) som skal fortelle web- leseren hvordan de forskjellige komponentene skal vises.

9 9 (X)HTML-taggenes hensikt  De definerer dokumentets struktur, dvs. dokumentets logiske oppbygning i overskrifter, avsnitter, lister, tabeller osv.  De definerer referanser til elementer som skal inkluderes i (X)HTML-dokumentet: bilder, video, lyd, stilark, script osv.  De definerer IKKE layout som skrifttyper, skriftstørrelser, fargevalg osv. Til det finnes det stilark som vil bli omtalt senere.

10 10 -taggen  En stildefinisjon er knyttet direkte til en (X)HTML-tag eller indirekte med et class- eller id-attributt.  I noen situasjoner er det ønskelig å anvende stiler på tegnnivå (f.eks. enkeltord), og det er mulig ved hjelp av -taggen.  Nedenfor er det definert en klasse "viktig" som f.eks. kan være rød farge og fet type:.viktig {color: red; font-weight: bold}

11 11 Span taggen  For å anvende dette på et viktig ord, er det bare å omslutte ordet med og. viktig.  Eksempel Eksempel PS. For dere som kan litt (X)HTML fra før, så er -taggen arvtageren til -taggen, som nå er borte i XHTML.

12 12 Stilark

13 13 Stilark  Stilark benyttes for å definere layout (farger, skrift, rammer, plassering etc.) på individuelle deler (strukturer som avsnitt, lister, overskrifter etc.) av et (X)HTML-dokument.  Et stilark (egentlig en samling av stildefinisjoner) kan anvendes på et (X)HTML-dokument på 3 måter:

14 14  Stilarket kan ligge på en egen fil slik at flere forskjellige (X)HTML- dokumenter kan anvende det samme stilarket. Tittel

15 15 Forts...  Stilarket kan være en integrert del av (X)HTML-dokumentet plassert i header-delen.  Det virker da bare på dette ene dokumentet og er globalt definert for (X)HTML-dokumentet.  Stildefinisjonene kan legges lokalt inn i en (X)HTML-struktur (avsnitt, liste, overskrift etc.) og virker bare der.

16 16 Formattering med stiler  CSS er standard  Hver stilregel i et stilark har to deler:  Selector – definerer hvilke elementer som påvirkes  En declaration – eller egenskap/verdi – par: Eks: h1{color:red;}

17 17 Taggen Innrykk  Et innrykket avsnitt starter med og må avsluttes med.  Nok et innrykket avsnitt (til et innrykket avsnitt) oppnås ved en ny.  En må etterfølges av en blokk-tag som,, eller en ny. Du kan ikke begynne direkte med vanlig tekst.

18 18 Linjeskift, streker og bilder  Dette er 3 tagger der det ikke skal være noen sluttagg i HTML.  I XHTML derimot skal det være en sluttag, og det skjer ved en ekstra avsluttende skråstrek i taggen. I HTML er som sagt denne skråstreken valgfri.  Det normale er at teksten i et avsnitt går helt ut til høyre skjermkant før ny linje skrives. Du kan derimot styre linjeskift selv med taggen.

19 19 Forts  Nest tegn vil da alltid komme på ny linje, men uten luft mellom linjene. Du kan ha flere -tagger etter hverandre for å skape mer luft mellom linjene.  Taggen setter inn en vannrett strek etter foregående linje.  Taggen setter inn et bilde som befinner seg i filen meg.gif.

20 20 Blokker ( )  Et (X)HTML-dokument kan deles inn i blokker med og hver blokk må avsluttes med.  Blokker benyttes i dokumenter der forskjellige deler (blokker) skal ha forskjellig struktur og utseende. Typisk eksempel er hvis noen deler av dokumentet skal være sentrert og andre ikke.  Innenfor en blokk kan du bruke alle vanlige tagger som du ellers kunne ha brukt utenfor en blokk.

21 21 Selektorer som klasse eller ID  Du kan gi HTML elementene et unikt navn, eller et klasse-navn.  For å lage en klasse skriver du.klassenavn (punktum + klassenavn, uten mellomrom!)  Eksempel:.nyheter

22 22 Velg elementer basert på klasser  Eks:.nyheter{color:red;} virker på alle elementene i klassen nyheter  h1.nyheter{color:red;} virker bare på h1 elementene i klassen nyheter  I åpningstaggen skriver du class=”nyheter”, der navnet identifiserer klassen av elementer i klassen ’nyheter.’ Nyheter

23 23 Unike elementer: ID  Defineres på samme måte som for klassen, men skrives #id – et unikt navn.  I åpningstaggen skrives id=”navn”. Navnet er unikt.  Feks: #farge 

24 24 Stiltyper for layout  Layout omfatter marger, rammer, luft innenfor blokker, blokkstørrelser og "flytende objekter": div.bx {margin: 20px; width: 200px; border- width: thick; border-color: red; border- style: groove; padding: 10px; float: left}  Selektoren div.bx inneholder stildefinisjoner for blokker av typen. EksempelEksempel

25 25 Forklaring  En slik blokk skal ha en margavstand (avstand til andre objekter) på 20 piksler i alle retninger, og blokken skal være 200 piksler bred.  Den skal ha tykk rød ramme i stilen "groove".  Luften mellom rammen og innholdet (padding) skal være 10 piksler.  Den skal legges til venstre slik at andre objekter (vanligvis tekst) kan "flyte" rundt blokken til høyre.

26 26 Design og brukergrensesnitt tips

27 27 Vanlige feil  Dårlig navigering Hvor er jeg? Hvordan kommer jeg tilbake?  Tekst er tekst og linker er linker. Tekst er ikke understreket, linkene er det  Glemmer å teste i ulike browsere  For mange detaljer på sidene  Ulike fonter. Bruk stilark!  Bilder som tekst er OK, men ikke bruk ulike fonter.  Bilder som ser ut som linker, men ikke er det.

28 28 Skrekkeksempler  

29 29 Tommelfingerregler om fargebruk  Vær konsistent i bruk av farger.  Samme farge på de ulike skjermbildene = gjenkjennelse  Sørg for at det er kontrast mellom tekst og bakgrunnen  Unngå å kombinere farget tekst med sterkt farget bakgrunn  Bruk sterke farger med stor forsiktighet  “Get it right in Black and White” (8% av alle menn er fargeblinde)

30 30 Forts.  Begrens bruken av animasjon  Forsiktig med lyd  Video krever ressurser  Organiser feltene ryddig  Ikke lag overfylte skjermbilder 

31 31 Tekst/bakgrunnsfarger

32 32 Kontraster: Mørk på lys og lys på mørk

33 33 Om farger generelt  Antall farger i et skjermbilde bør begrenses til 4 pr. skjermbilde  7 for et system som et hele.  Farger kan utnyttes i informasjon: F.eks. farge på overtrukne konti  Farger kan hjelpe til med å gruppere objekter som hører sammen

34 34 Script

35 35 Generelt om script  Script er programkode som har til hensikt å gjøre en web-side dynamisk (mer attraktiv) og håndtere informasjon som utveksles mellom server og klient.  Script deles inn i to hovedklasser: server-script og klient-script.  Server-script (Perl, VBScript etc.) håndterer mottatt informasjon fra en klient og lagrer denne i f.eks. en database.  Server-script kan også på bakgrunn av databaseinformasjon generere spesielle web- sider for spesielle klienter.

36 36 Javascript  Skjønner vi det nå?  Hva er problemene?

37 37 Javascript  Klient-script (normalt Javascript) er programkode som utelukkende bruker ressurser hos klienten (kjører på klientens maskin).  Programkoden sendes med web-siden ((X)HTML-koden) fra server til klient, og den starter ikke før den er lastet ned hos klienten.

38 38 Bruk av script  De mest brukte anvendelsene av klient- script er validering av data gitt i et skjema før det sendes tilbake til server dynamikk som skifte av bilder, stausmeldinger og objekter som beveger seg over web-siden.  Begrepet DHMTL (Dynamisk (X)HTML) er ikke et nytt web-språk, men standard (X)HTML-kode der dynamikken er ivaretatt med Javascript.

39 39 Komponenter i JavaScript  JavaScript er et eget programmeringsspråk som ikke må forveksles med Java.  Som i andre språk har det strukturer som tilordningssetninger, kontrollstrukturer som if else, løkkestrukturer som for og while og tabellstrukturer.

40 40 DOM – documetn object model

41 41 Referanser  En referanse til et tekstfelt i en annen ramme blir f.eks.: parent.hoved.document.skjema.fornavn  Objektene frames, forms, images, links, anchors, elements og options er organisert i tabeller og kan derfor referes som f.eks. images[i].  Objektet elements er en felles objektreferanse for de enkelte skjemaobjektene.

42 42 Metoder.  Aksjoner knyttet til objekter som åpning og lukking av nye vinduer, skriving i skjermvinduer, matematiske beregninger.  Kan sammenlignes med et funksjonskall for å utføre en eller annen handling på et objekt.

43 43 Hendelser  Noe som intreffer når et eller annet skjer som f.eks. en musebevegelse, et museklikk, et skjema sendes osv.  En hendelse resulterer som oftest i en aksjon på et eller flere andre objekter.

44 44 Skjemaer  Et skjema er et objekt som kan inneholde elementer som tekstfelter og tekstbokser for å motta og/eller vise informasjon radioknapper, avkrysningsbokser og menyvalg for å utføre spesielle valg trykknapper for at noe skal skje.  Alle slike elementer må i tillegg tilhøre et skjema.  Et skjema defineres i et (X)HTML-dokument med følgende tag: + mer (X)HTML-kode for bl.a. skjemaelementer

45 45 Menyvalg  Menyvalg er et alternativ til radioknapper der du kan foreta et valg ut fra flere valgmuligheter.  I (X)HTML-kode ser det slik ut:  Velg reisemål: Oslo Bergen Trondheim

46 46 Meny

47 47  Attributtet name gir menyboksen en merkelapp.  Hvert enkelt menyvalg kan tilordnes sin egen verdi gjennom value-attributtet.  Menybokser er i et skjema som igjen er i et dokument, og identifiseres derfor med document.skjema.name(skjemaets og elementets merkelapp).  Hvis elementet ikke har name-attributt kan det identifiseres med document.skjema.elements[0] for første element i skjemaet og document.skjema.elements[1] for andre element osv.

48 48 forts  document.skjema.sted.length forteller hvor mange valgmuligheter det finnes i menyboksen.  document.skjema.sted.selectedIndex forteller hvilket valg som er gjort (0, 1, osv.).  Innholdet av value-attributtet til et menyvalg (3. valget) får du tak i med referansen: document.skjema.sted.options[2].value

49 49 Kodesnutt if (skjema.sporsmaal1.selectedIndex == 4) { document.write(’Du svarte, " ' + skjema.sporsmaal1.options[skjema.sporsmaal1.selectedIndex]. text + ' " som er riktig. '); } else { document.write (’Du svarte, " ' + skjema.sporsmaal1.options[skjema.sporsmaal1.selectedIndex]. text + ' " – som er feil. '); total -= 1; }

50 50 Start med en total sum:  var total = 60  alert(”Du fikk " + total + " av 6 mulige poeng.");

51 51 Valgmuligheter pr spørsmål Velg svar brun blå hvit grønn gul sort

52 52 Om prosjektoppgaven  Alt må ikke være gjort for å få bestååt  Vis at du har forsøkt  Ryddeige, oversiktelige sider er viktig!  Spørsmål?


Laste ned ppt "1 Oppsummering Webpublisering 22.11.04 Kirsten Ribu HiO."

Liknende presentasjoner


Annonser fra Google