Laste ned presentasjonen
Presentasjon lastes. Vennligst vent
1
1 Oppsummering Webpublisering 22.11.04 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: 10100110 = 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 = 110101M
4
4 Konvertering fra binære til desimale tall 1 1 0 1 0 1 (1x2^5) + (1x2^4) + (0x2^3) +(1x2^2) + (0x2^1) +(1x2^0) 32 + 16 + 0 + 4 + 0 + 1 110101 (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:: 192.31.65.5 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 00001000 00000000 00101011 (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 128.39.89.89 til et binært tall: 128. 39. 89. 89 10000000 00100111 01011001 01011001
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 www.webpagesthatsuck.com www.webpagesthatsuck.com http://www.nacd.org/ http://www.nacd.org/
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 http://www.tmbg.com/froMain.html http://www.tmbg.com/froMain.html
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?
Liknende presentasjoner
© 2024 SlidePlayer.no Inc.
All rights reserved.