Dynamiske websider med JavaScript og CSS3

Størrelse: px
Begynne med side:

Download "Dynamiske websider med JavaScript og CSS3"

Transkript

1 Dynamiske websider med JavaScript og CSS3 Skrevet av Atle Nes Avdeling for informatikk og e-læring Høgskolen i Sør-Trøndelag Denne leksjonen handler om å bruke JavaScript og ny funksjonalitet i CSS3 til å lage dynamiske og tilpasningsdyktige websider. Vi tar i denne leksjonen også utgangspunkt i at du har grunnleggende kjennskap til HTML sin DOM (Document Object Model), programmering av dynamiske websider med JavaScript, design med CSS (Cascading Style Sheets) og forstår samspillet mellom disse teknologiene. HTML5 og JavaScript JavaScript, eller ECMAScript som det formelt kalles, gjør at vi kan kjøre små biter programkode på websidene for å gjøre de mer levende. I den nye HTML5-standarden er JavaScript blitt definert som standard scriptspråk, dvs. det scriptspråket vi skal bruke for å få laget dynamiske websider på klientsiden. Når vi sier på klientsiden mener vi at websiden lastes ned til nettleseren (klienten) før JavaScript-koden blir utført. Det finnes også scriptspråk som utføres på tjeneren (PHP, ASP, JSP etc.), men de blir ikke omtalt i denne leksjonen. Det at JavaScript er blitt standard scriptspråk i HTML5 betyr i alle fall at vi ikke lenger behøver å ha med attributtet type i syntaksen for å definere hvilket språk som er benyttet. Nettleseren skal nå forstå dette automatisk. Selv om det ikke har vært standardisert har nok endel nettlesere hatt denne funksjonaliteten lenge. Tidligere skrev vi altså <script type="text/javascript">...</script> Dette kan nå forkortes til <script>...</script> CSS3 (Cascading Style Sheets versjon 3) CSS brukes som kjent til å definere layout og utseendet til elementene på websiden. CSS3 er tredje versjon og er av W3C delt opp i mange ulike dokumenter som kalles moduler. Hver modul legger til helt nye funksjoner eller bygger på funksjonalitet fra CSS2 (og sørger for at CSS3 er bakoverkopatibel med denne). Det er lansert over 50 ulike moduler, men pga. modulariseringen er både stabilitet og status på disse svært forskjellig. Tre av modulene, om Selectors, Namespaces og Color, fikk imidlertid status som W3C anbefaling i

2 JavaScript Selectors API Når skal få JavaScript til å manipulere et element i DOM-treet kan man bruke attrubuttene id, name og class for å finne fram til riktig element(er) på websiden. Da har du kanskje brukt noen innebygde funksjoner som heter getelementbyid() eller getelementsbytagname(), men du har muligens savnet en getelementsbyclassname()? getelementsbyclassname() Det nye JavaScript-API-et løser dette ved å innføre nettopp getelementsbyclassname() slik at du nå også kan skrive: var innlegg = document.getelementsbyclassname('mine_innlegg'); Dette vil legge en referanse til alle elementer med klasseattributtet (class="mine_innlegg") til i variabelen innlegg. Den videre JavaScript-koden vil kunne manipulere elementene på websiden som hører til disse innleggene. Du kan selvfølgelig også inkludere flere klasser i en og samme funksjon ved å skille klassenavnene med mellomrom: var innlegg = document.getelementsbyclassname('klasse1 klasse2'); Dette vil legge referanser til både elementer med klasse1 og klasse2 til variabelen innlegg. Eller du kan utføre nøsting av ulike funksjoner: var forste_innlegg = getelementbyid('hoved').getelementsbyclassname('mine_innlegg'); Dette vil lage en referanse til alle elementer med class=mine_innlegg i likhet med øverste eksempel, men til forskjell bare innenfor elementet på websiden som har id=hoved (dvs. ikke hele websiden). queryselectorall() og queryselector() Annen ny funksjonalitet i JavaScript-API-et gjør at vi nå også enkelt har mulighet til å referere til elementer som stemmer overens med en bestemt syntaks i CSS. Dersom vi vil lage en referanse til alle avsnitt på websiden med klassen warning og error kan vi bruke funksjonen queryselectorall() til å skrive det kommaseparert på følgende måte: var alerts = document.queryselectorall("p.warning, p.error"); Et annen mer avansert eksempel kan være dersom vi ønsker å manipulere en punktliste (uordnet liste). La oss tenke oss at vi skal gjøre en operasjon på annethvert element i listen. Da kan vi med bruk av queryselectorall() skrive: var elements = document.queryselectorall("ul li:nth-child(odd)"); 2

3 Legg merke til at vi har skrevet CSS-syntaks for å referere til oddetallselementene (første, tredje, femte osv.) i punktlisten. Om man bytter ut odd med even vil det naturligvis bli partallselementene som blir referert til i stedet for oddetallselementene. Eller dersom det holder å referere til første enkelttreff i dokumentet kan vi bruke queryselector() i stedet for queryselectorall(). Dersom man vil manipulere første element i dokumentet med id=minid kan man skrive: var el = document.queryselector("#minid"); Vi kan ta et mer avansert eksempel. Tenk deg at du ønsker å manipulere første celle i tabellen som har name=test. Følgende syntaks vil gjøre nettopp dette. var first_td = document.queryselector("table.test > tr > td"); Legg også merke til bruken av hakeparanteser (>) for å traversere DOM-treet ned til riktig element. Hovedforskjellen på queryselector() og queryselectorall() er altså om du skal referere til et eller flere elementer. CSS3 Selectors En selector i CSS fungerer på lignende måte som for JavaScript. Den definerer kriterier for å velge ut et eller flere elementer på websiden som en eller flere CSS-regler skal gjelde for. CSS1 Første versjon av CSS hadde bare noen få selectors. Dette ga blant annet mulighet for å velge elementer (E), underelementer av elementer (E F), elementer som tilhører en bestemt klasse (E.klassenavn), elementer med en bestemt id (E.idnavn), hyperlenker med ulik status (E:link og E:visited), elementer som blir manipulert av brukeren (E:active, E:hover og E:focus) og første linje eller bokstav i elementet (E::first-line og E::first-letter) Om vi for eksempel ønsker at teksten i alle div elementer med klassen «advarsel» skal være rød kan vi definere dette som en CSS-regel på følgende måte: CSS2 div.advarsel { color: red; CSS2 introduserte mange nye selectors. Vi fikk mulighet til å velge alle elementer (*), elementer basert på attributtverdi (E[foo], E[foo="bar"], E[foo~="bar"] og E[foo ="bar"]), første underelement (E:first-child), elementer i et bestemt språk (for eksempel fransk - E.lang(fr)), innhold før og etter et element (E::before og E::after), underelement direkte under et element (E > F) og elementet direkte etter et element (E + F). Du husker kanskje at vi har brukt en av disse i avsnittet om JavaScript, nemlig muligheten for å velge et underelement direkte under et annet element. Om vi for eksempel ønsker å fargelegge bakgrunnen i den første cella i alle tabeller blå kan vi skrive en CSS-regel på følgende måte: table.test > tr > td { background-color: #0000ff; 3

4 CSS3 CSS3 introduserer også mange nye selectors. Dette gir tre nye muligheter for å velge elementer basert på attributtverdi i tillegg til (E[foo], E[foo="bar"], E[foo~="bar"] og E[foo ="bar"] fra CSS2) E[foo^="bar"] E[foo$="bar"] E[foo*="bar"] Velger alle elementer hvor attributtet foo har attributtverdi som starter med tekststrengen «bar». Velger alle elementer hvor attributtet foo har attributtverdi som avsluttes med tekststrengen «bar». Velger alle elementer hvor attributtet foo har attributtverdi som inneholder tekststrengen «bar». CSS3 gir også mange nye muligheter for å velger elementer basert på strukturelle egenskaper (i tillegg til E:first-child fra CSS2) E:root E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:last-of-type E:only-child E:only-of-type E:empty Velger rotelementet til dokumentet. Velger det n te underelementet direkte under et element. Velger det n te siste underelementet direkte under et element. Velger det n te elementet av en bestemt type. Velger det n te siste elementet av en bestemt type. Velger det siste underelementet direkte under et element. Velger det første elementet av en bestemt type. Velger det siste elementet av en bestemt type. Velger det eneste underelementet direkte under et element. Velger det eneste elementet av en bestemt type. Velger elementet som ikke har noen underelementer. De siste nye variantene av selectors er E:target Elementet som er målet for URI en. E:enabled og E:disabled UI-element som kan være slått på eller slått av. E:checked UI-element som kan være valgt (checkbox eller radiobutton). E:not(s) Velger elementet som ikke samsvarer med selector s. E ~ F Velger elementet etter et element (ikke nødvendigvis like etter). 4

5 Eksempel på bruk av nth-child På tide med et lite eksempel. Vi kan lage oss en liten tabell med oversikt over leksjonene i faget HTML5. Tabellen har to kolonner og 9 rader. Å fargelegge annenhver rad i en større tabell kan dramatisk heve lesbarheten til tabellen. Dette kalles sebrafargelegging og har tidligere blitt løst med class="alternate" eller tilsvarende. Med den nye nthchild-selectoren kan tabellen bli helt fri for bruk av klasser. Det holder faktisk å legge til følgende CSS-kode: tr:nth-child(2n+1) { background-color: lightgrey; 2n+1 vil gi bety rad 1 (=2*0+1), rad 3 (=2*1+1), rad 5 (=2*2+1), rad 7 (=2*3+1) etc. Om du vil fargelegge motsatt kan du skrive 2n i stedet. Om du vil slippe unna matematikken går det også an å skrive de mer folkelige ordene odd eller even i stedet for 2n+1 og 2n. tr:nth-child(odd) { background-color: lightgrey; Dersom du vil ha annen fargelegging enn sebrastriper må du bruke matematikken. Legg også merke til at Internet Explorer versjon 7 og 8 ikke støtter CSS3 nth-child. En vanlig løsning på dette er å bruke jquery-biblioteket sin nth-child som fungerer også på IE-platformen. 5

6 CSS3 Farger Modulen om farger var den første som ble en CSS3 anbefaling av W3C - 7. juni For å se hva som er nytt om farger tar vi først en titt på hvordan verden så ut før CSS3. CSS2.1 lot oss definere farger på seks ulike måter: 17 uilke fargenavn aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white og yellow. p { color: aqua; Fargekode bestående av 6 heksadesimale tegn To tegn for rødt, to for grønt og to for blått i intervallet 00 til FF. p { color: #AE03FF; p { color: #663399; Fargekode bestående av 3 heksadesimale tegn Et tegn for rødt, et for grønt og et for blått i intervallet 0 til F. Dette er en forenkling av fargekoden ovenfor som kan brukes dersom man har de to tegnene er like som i siste eksempel ovenfor. p { color: #639; RGB-kode med 3 numeriske verdier En verdi for rødt, en for grønt og en for blått i intervallet 0 til 255. p { color: rgb(109, 22, 255); RGB-kode med 3 prosentverdier Prosentverdier mellom 0% og 100% i stedet for numeriske verdier. p { color: rgb(0%, 10%, 100%); Systemfarger Farger i henhold til operativsystemet. p { color: ButtonFace; OBS! Denne siste kategorien bør du ikke lenger bruke siden den er uønsket i CSS3. 6

7 CSS3 lar oss definere farger på hele åtte ulike måter. Fargenavn Antallet er økt fra 17 til 147! Du kan finne en oversikt over alle fargene på CSS3 løser også problemet med gray/grey ved at begge skrivemåtene er tillatt. p { color: peru; Opacity Mulighet for å definere transparens med verdier fra fullt transparent 0 (eller 0.0) til fullt ugjennomsiktig 1 (eller 1.0). Legg merke til at regelen gjelder for elementet og alle underelementer! p { opacity: 0.3; RGBA-notasjon med numeriske eller prosentverdier Samme som CSS2.1, men med transparens som egen parameter. Man bør inkludere begge formuleringene for å støtte også gamle nettlesere. p { color: rgb(100,66,255); color: rgba(100,66,255,0.5); p { color: rgb(10%,6%,20%); color: rgba(10%,6%,20%,1); HSL eller HSLA-notasjon Dette er en ny fargemodell som blir brukt av designere. For nettleserne hard et ingen betydning om du definerer fargen med RGB eller med HSL. Hue har numerisk verdi mellom 0 og 359, saturation og lightness har prosentverdi mellom 0% og 100%. Også her er det lurt å inkludere formulering for å støtte gamle nettlesere. p { color: rgb(85,0,128); color: hsl(280,100%,50%); p { color: rgb(85,0,128); color: hsla(280,100%,50%,0.5); 7

8 Media Queries I dag finner vi nettlesere i mobiltelefoner, nettbrett, fjernsynsapparater, spillkonsoller og sikkert mange andre forskjellige enheter. Det antas at surfing på andre enheter enn den personlige datamaskinen vil overta i løpet av noen få år. I dag utvikles nettsteder stort sett for bruk med mus og tastatur, men etterhvert vil det kanskje være mer aktuelt med touch-grensesnitt, støtte for håndholdte spillkontrollere etc. Oppsummert stilles vi ovenfor et problem der vi har mange ulike enheter med ulike egenskaper (for eksempel skjermstørrelse) og ulike grensesnitt for inndata. Mange selskaper i dag velger å utvikle et eget iphone-nettsted. Nettstedet tilpasses enheten perfekt med tanke på iphone sine egenskaper til skjermstørrelse, men hva om man besøker nettstedet med en annen mobiltelefon med annen skjermstørrelse? Hva om det dukker opp en ny populær enhet? Skal vi utvikle et nettsted for iphone, en for ipad, en for Android, en for Windows Phone, en for Symbian, og en for personlige datamaskiner etc. På et tidspunkt kan man spørre seg om ikke dette blir for alt for mye arbeid. Ville det ikke heller være lurere å lage et nettsted og la designet endre seg basert på enhetens egenskaper? CSS2.1 ga oss noen spinkle muligheter til å velge mellom ulike stilark ved å spesifisere medietype. Hvis du har kodet stilark for utskrift kjenner du nok til denne syntaksen fra head i HTML: <link rel="stylesheet" type="text/css" href="skjerm.css" media="screen" /> <link rel="stylesheet" type="text/css" href="utskrift.css" media="print" /> Selv om standarden definerer mange ulike medietyper har nettlesere og enheter aldri omfavnet denne delen av spesifikasjonen. Det gjør at vi stort sett bare finner igjen denne syntaksen når det er snakk om utskrift. I CSS3 har vi fått noe som heter Media Queries som tar dette et steg videre. Dette lar oss lage stilark ikke for en bestemt type enhet slik vi gjorde med media-attributtet, men for en enhet som har visse egenskaper. Vi kan skrive: <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobil.css" /> Vi ser at dette inneholder to deler; først en mediatype som før og deretter en spesifikasjon av egenskap (mediafeature). Den horisontale bredden til enheten blir sjekket (max-device-width) og dersom den er mindre eller lik 480 piksler vil enheten benytte stilarket mobil.css. Utviklere har eksperimentert med websider som har sjekket skjermoppløsning tidligere ved å bruke JavaScript. Media Queries tilbyr imidlertid mer enn bare skjermoppløsning. Det er til og med mulig å teste flere egenskaper på samme linje: <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="mobil.css" /> 8

9 Vi er faktisk heller ikke lenger bare begrenset til bare å definere dette som links. Dette kan gjøres direkte i CSS-filen ved screen and (max-device-width: 480px) {.column { float: none; eller ved url("mobil.css") screen and (max-device-width: 480px); Uansett alternativ vil resultatet bli det samme. Hvis test av egenskapen går gjennom vil den relevante CSS-koden bli utført på HTML-koden. I stedet for å tilpasse seg hver enkelt enhet som finnes lager man CSS som tilpasser seg egenskapene til enheten. Modulen om Media Queries er ikke ansett som ferdig av W3C, men fungerer på de fleste moderne nettlesere unntatt Internet Explorer. Det finnes et JavaScript bibliotek som du finner på som du kan bruke for å få støtte også på IEplattformen. Web ble lansert i CSS2 og har vært implementert på Internet Explorer siden versjon 5 (utrolig!). Implementasjonen i IE baserte seg på det proprietære formatet Embedded Open Type (.eot) og ingen andre nettlesere valgte å bruke dette formatet. Med lanseringen av Safari 3.1 kunne webutviklere begynne å bruke alle de lisensierte TrueType fontene (.ttf) og OpenType fontene (.otf) på sidene sine. For å bruke egne fonter på websiden må de deklareres { font-family: DeliciousRoman; src: url(http://www.font-face.com/fonts/delicious/delicious-roman.otf); font-weight: 400; Og vi kan bruke denne fonten i et avsnitt på siden: p { font-family: DeliciousRoman, Helvetica, Arial, sans-serif; Den største grunnen til at webfonter ikke har tatt webben med storm er lisensspørsmål. Eierne av disse skrifttypene tillater rett og slett ikke slik bruk. Vi kan si at dette på sett og vis litt gammeldags tankegang. På sikt kan man kanskje tenke seg et felles lager der skrifttypene ligger gratis tilgjengelig på samme måte som Google sitt AJAX-bibliotek - 9

10 Mulighet for flere bakgrunner CSS3 tillater webutviklere å ha flere bakgrunner samtidig ved å definere de som en kommaseparert liste. La oss se på et enkelt eksempel med to bakgrunner: #eksempel { width: 500px; height: 250px; background-image: url(sheep.png), url(betweengrassandsky.png); background-position: center bottom, left top; background-repeat: no-repeat; Vi har definert høyde og bredde (height og width), to bilder for bakgrunn (background-image), plassering av bakgrunnsbildene (background-position) og om de skal gjentas eller ikke (backgroundrepeat). Dette vil stilsette og transformere følgende HTML-kode: <div id="eksempel">this box has background images, the first a sheep (aligned to the bottom and center) and the second is a grass and sky background (aligned to the top-left corner).</div> Til en ganske stilig boks på websiden: 10

11 Andre JavaScript-funksjoner JavaScript har også fått ny funksjonalitet knyttet til blant annet: Lokal lagring (web storage) En utvidelse av dagens cookies (informasjonskapsler). Cookies kan bare brukes til å lagre små tekststrenger, mens lokal lagring kan brukes til å lagre flere MB med data. Canvas Det introduseres et eget API for å tegne på et område på websiden enten i 2D eller 3D (WebGL). Device access Mulighet for å bruke JavaScript til å kommunisere med GPS, akselerometer og annen maskinvare på enheten. Webskjema Dette er temaer som vi tar opp i andre leksjoner senere i kurset. Andre CSS3-funksjoner Det finnes flere andre CSS3-moduler som tilbyr annen funksjonalitet enn den som er beskrevet her. En full oversikt over de viktigste modulene og deres status i forhold til å oppnå W3C anbefaling finner du på CSS3 er i likhet med HTML5 ikke ferdigutviklet og det gjelder derfor å teste funksjonaliteten du ønsker å bruke opp mot de plattformer, enheter og nettlesere du vil at websiden skal fungere på. 11

OBLIG 1 - WEBUTVIKLING

OBLIG 1 - WEBUTVIKLING OBLIG 1 WEBUTVIKLING Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Problemer med funksjonalitet / bruk Uoversiktlig side For

Detaljer

CASCADING STYLESHEETS (CSS)

CASCADING STYLESHEETS (CSS) CASCADING STYLESHEETS (CSS) HVA ER CSS Stylesheets er en metode for å flytte selve formatteringen av et HTML dokument ut av selve dokumentet og over i et eksternt regelsett. Dette skyldes HTMLs manglende

Detaljer

CSS. Aud Marie Hauge ekspert i brukskvalitet og universell utforming i Epinova AS

CSS. Aud Marie Hauge ekspert i brukskvalitet og universell utforming i Epinova AS CSS Aud Marie Hauge ekspert i brukskvalitet og universell utforming i Epinova AS CSS står for Cascading Style Sheets CSS blir brukt til å bestemme hvordan HTML-elementene skal se ut (farge, størrelse,

Detaljer

Web fundamentals. Web design. Frontend vs. Backend 17.01.2008. Webdesign 17. januar 2008 3. Monica Strand

Web fundamentals. Web design. Frontend vs. Backend 17.01.2008. Webdesign 17. januar 2008 3. Monica Strand Web fundamentals Webdesign 17. januar 2008 Monica Strand Webdesign 17. januar 2008 1 Web design Fagområdet Web design inneholder flere disipliner Grafisk design Informasjonsdesign Brukergrensesnittdesign

Detaljer

Håkon Tolsby. 25.08.2014 Håkon Tolsby

Håkon Tolsby. 25.08.2014 Håkon Tolsby HTML5 og CSS Håkon Tolsby 25.08.2014 Håkon Tolsby 1 En webside min webside en html5 side dett er min første

Detaljer

- reklamebannere mobil og tablet

- reklamebannere mobil og tablet Spesifikasjoner - reklamebannere mobil og tablet FINN.no Versjon 2.4 Sist oppdatert 16.08.2013 1. Innhold Innhold Introduksjon Målsetning Spesifikasjoner HTML Fysisk størrelse 225 px* Eksempler Størrelser

Detaljer

SUKKERGRIS. Anita og Silje DAT100

SUKKERGRIS. Anita og Silje DAT100 SUKKERGRIS Anita og Silje DAT100 I NNHOLD 1. Innledning... 2 2. Beskrivelse av Sukkergris... 3 2.1 Struktur og grafisk design... 3 2.1.1 Sidens oppbygning... 3 2.1.2 CSS og Grafisk design... 4 2.2 Oversikt

Detaljer

La oss gjøre nettsiden vår bedre med noen stiler. I denne og den neste leksjonen skal vi lære hvordan man endrer farge, tekst, størrelser og mer!

La oss gjøre nettsiden vår bedre med noen stiler. I denne og den neste leksjonen skal vi lære hvordan man endrer farge, tekst, størrelser og mer! Lesson 4 CSS All Code Clubs must be registered. Registered clubs appear on the map at codeclub.org.uk - if your club is not on the map then visit jumpto.cc/18cplpy to find out what to do. Introduksjon

Detaljer

Oblig 1 Erlend Hannestad

Oblig 1 Erlend Hannestad Oblig 1 Erlend Hannestad Oppgave 1 Nettsiden er ustrukturert og uryddig når det kommer til layout og design, det er vanskelig å holde oversikt over alt som vises på siden, det er rett og slett for mye

Detaljer

Oppgave 1: Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

Oppgave 1: Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Oppgave 1: Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Svar: Ved første øyekast har utvikleren av nestesiden plasser altfor mange div

Detaljer

OBLIG 2 WEBUTVIKLING

OBLIG 2 WEBUTVIKLING OBLIG 2 WEBUTVIKLING Oppgave 1 Design ved hjelp av skisser eller wireframes et nettsted med et "avansert" design. Lag spesifikke design for ulike skjermstørrelser og utskrift. Fokuser spesielt på å få

Detaljer

INF1040 Oppgavesett 4: CSS

INF1040 Oppgavesett 4: CSS INF1040 Oppgavesett 4: CSS (Kapittel 5) Fasitoppgaver Ingen fasitoppgaver denne gang. Se flervalgsoppgavene under. Flervalgsoppgaver I følgende oppgaver er det oppgitt fem alternativer der nøyaktig ett

Detaljer

1. Cascading Style Sheet (CSS)

1. Cascading Style Sheet (CSS) Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag Lene Hoff 18.7.2007 Lærestoffet er utviklet for faget LN515D XML Teknologi 1. Resymé: I denne leksjonen skal vi ta for oss CSS (Cascading

Detaljer

praktiske eksempler DOM Document Object Model DOM og Høst 2013 Informasjonsteknologi 2 Læreplansmål Gløer Olav Langslet Sandvika VGS

praktiske eksempler DOM Document Object Model DOM og Høst 2013 Informasjonsteknologi 2 Læreplansmål Gløer Olav Langslet Sandvika VGS DOM og praktiske eksempler Gløer Olav Langslet Sandvika VGS Høst 2013 Informasjonsteknologi 2 DOM Document Object Model Læreplansmål Eleven skal kunne programmere med enkle og indekserte variabler eller

Detaljer

OBLIG 1 WEBUTVIKLING. Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

OBLIG 1 WEBUTVIKLING. Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. OBLIG 1 WEBUTVIKLING Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Tar lang tid å laste inn siden: Mye bilder Mange animasjoner

Detaljer

(X)HTML, CSS og JavaScript HTML. Det første dokumentet 26.11.2007. Grunnleggende programmering i Java Monica Strand 26.

(X)HTML, CSS og JavaScript HTML. Det første dokumentet 26.11.2007. Grunnleggende programmering i Java Monica Strand 26. (X)HTML, CSS og JavaScript Grunnleggende programmering i Java Monica Strand 26. november 2007 Gr. leggende Java 26. november 2007 1 HTML HTML = Hyper Text Markup Language Strukturerer tekstinnhold HTML

Detaljer

Oppsummering fra forelesning 2

Oppsummering fra forelesning 2 1 of 16 02.04.2015 15:42 Oppsummering fra forelesning 2 Lenker Lenker er, historisk sett, webens første eksistensberettigelse Lenker kan være relative (går til sider innenfor samme nettsted) eller absolutte

Detaljer

Oppgave 1. Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

Oppgave 1. Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Når man tar pilen over fanene, dukker det opp utrolig mange tagger. Dvs alt er

Detaljer

1. Intro om SharePoint 2013

1. Intro om SharePoint 2013 Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag Intro om SharePoint 2013 Stein Meisingseth 09.08.2013 Lærestoffet er utviklet for faget LO205D Microsoft SharePoint 1. Intro om SharePoint

Detaljer

Læringsmål og pensum. Hvordan virker webteknologi? (klient-tjener arkitektur) HTML - virkemåte. Nettleser: Firefox, Opera, Safari

Læringsmål og pensum. Hvordan virker webteknologi? (klient-tjener arkitektur) HTML - virkemåte. Nettleser: Firefox, Opera, Safari 1 2 Læringsmål og pensum TDT4105/4110 Informasjonsteknologi grunnkurs: Uke 35/36 HTML Førsteamanuensis Alf Inge Wang Læringsmål Lære å lage statiske hjemmesider Bilder Lenker Lister Tabeller Skjema for

Detaljer

file:///c:/users/michaelp/sites/dkdm/dw6/dreamweaver6.html

file:///c:/users/michaelp/sites/dkdm/dw6/dreamweaver6.html 1 of 9 15.04.2015 14:15 Spry og behaviours Både Spry and Behaviours er basert på programmeringsspråket Javascript. Javascript kjører i nettleseren og ikke på webserver som PHP og Perl. På en lignende måte

Detaljer

Webutvikling oblig 1 Marius Hanssen

Webutvikling oblig 1 Marius Hanssen Webutvikling oblig 1 Marius Hanssen Oppgave 1 arngren.net er en rotete nettside, enkelt sett forpestet med et uorganisert layout og en kode så grov at jeg ikke skjønner hvordan de klarte å finne en så

Detaljer

Innføring i Dynamisk HTML

Innføring i Dynamisk HTML Innføring i Dynamisk HTML Her kommer en enkel innføring i dynamisk HTML (DHTML). DHTML er en webside (et web dokument) som kan endres etter at den er lastet inn i webleseren. Når brukeren fører musepekeren

Detaljer

HTML5 og CSS3. - Fremtiden på web: struktur, semantikk og styling. christine.lund@evita.no. Yggdrasil, Tønsberg - 12.10.2010

HTML5 og CSS3. - Fremtiden på web: struktur, semantikk og styling. christine.lund@evita.no. Yggdrasil, Tønsberg - 12.10.2010 HTML5 og CSS3 - Fremtiden på web: struktur, semantikk og styling christine.lund@evita.no Yggdrasil, Tønsberg - 12.10.2010 Christine Lund Enterprise 2.0: konsulent, teamleder, fagansvarlig Kort introduksjon

Detaljer

Kursdokumentasjon for Dreamweaver

Kursdokumentasjon for Dreamweaver Kursdokumentasjon for Dreamweaver Skrevet av 2/13 1 Komme i gang med Dreamweaver... 3 2 Bruk av Dreamweaver... 4 2.1 Verktøylinja...5 2.2 Properties... 5 3 Sidens egenskaper... 6 4 Tekst... 7 4.1 Endre

Detaljer

og bevegelse funksjoner som blir aktivert av hendelser Keyboard Informasjonsteknologi 2 Læreplansmål Gløer Olav Langslet Sandvika VGS

og bevegelse funksjoner som blir aktivert av hendelser Keyboard Informasjonsteknologi 2 Læreplansmål Gløer Olav Langslet Sandvika VGS Keyboard og bevegelse Gløer Olav Langslet Sandvika VGS 12.09.2012 Informasjonsteknologi 2 funksjoner som blir aktivert av hendelser Læreplansmål Eleven skal kunne programmere med enkle og indekserte variabler

Detaljer

GEO2311. Obligatorisk Innlevering 1

GEO2311. Obligatorisk Innlevering 1 GEO2311 Obligatorisk Innlevering 1 STUDENTER: Kia Simonsen Morten Kappelslåen Gjøvik, 14.10.2015 Side 1 av 11 Innholdsfortegnelse Introduksjon... 3 Del 2 - HTML delen... 4 Del 2 - CSS delen... 9 Del 3

Detaljer

notater Gule lapper Mine Et praktisk eksempel med objekter IT2 Læreplansmål Gløer Olav Langslet Sandvika VGS

notater Gule lapper Mine Et praktisk eksempel med objekter IT2 Læreplansmål Gløer Olav Langslet Sandvika VGS Mine notater Gløer Olav Langslet Sandvika VGS Et praktisk eksempel med objekter Vi kjenner alle til korktavlen med gule lapper. Vi henger opp en lapp for at vi selv eller andre skal huske eller bli minnet

Detaljer

Oblig 1 Webutvikling av Jon-Håkon Rabben

Oblig 1 Webutvikling av Jon-Håkon Rabben Oblig 1 Webutvikling av Jon-Håkon Rabben Oppgave 2 og 3) http://www.it-stud.hiof.no/~jhrabben/boxmodel.html Oppgave 6) http://www.it-stud.hiof.no/~jhrabben/oblig1oppg6.html Oppgave 1) Siden tar lang tid

Detaljer

Tilpassning av Wordpress - Enterprise Theme

Tilpassning av Wordpress - Enterprise Theme Del 2 - Tilpassning Tilpassning av Wordpress - Enterprise Theme Del 1 var en gjennomgang av hvordan man setter opp det tekniske som kreves for å kjøre en Wordpress webside/blogg. Installere webserver (Apache)

Detaljer

Forprosjekt gruppe 13

Forprosjekt gruppe 13 Forprosjekt gruppe 13 Presentasjon Tittel: Oppgave: Periode: Gruppemedlemmer: Veileder: Oppdragsgiver: Kontaktperson: Mobilbillett i HTML5 Utvikle en mobil billettautomat innenfor kategorien dedikert web

Detaljer

Brukermanual til Domenia Norges adminløsning

Brukermanual til Domenia Norges adminløsning Brukermanual til Domenia Norges adminløsning 1. Login For å logge inn på løsningen din skriver du inn domenenavnet ditt og /siteadmin (f.eks www.domenia.no/siteadmin ). Skriv inn brukernavn og passord

Detaljer

Grunnleggende om websider og HTML-kode

Grunnleggende om websider og HTML-kode Grunnleggende om websider og HTML-kode Html er et språk / en standard som brukes for å gi instrukser til nettlesere om hvordan ulike elementer på en webside skal fortolkes og presenteres for en sluttbruker.

Detaljer

lagring med HTML5 Offline lagring Offline Informasjonsteknologi 2 Gløer Olav Langslet Sandvika VGS

lagring med HTML5 Offline lagring Offline Informasjonsteknologi 2 Gløer Olav Langslet Sandvika VGS Offline lagring med HTML5 Gløer Olav Langslet Sandvika VGS Leksjon 8 Informasjonsteknologi 2 Offline lagring I IT1 brukte vi databaser til å lagre data. Der kunne vi bygge tabeller og fylle dem med innhold

Detaljer

Li-Bjørk A/S på Web !" # $% $&"!' Studentoppgave. SY 241 Elektronisk Publisering. Prosjektrapport 2002. Avdeling for samfunn, næring og natur

Li-Bjørk A/S på Web ! # $% $&!' Studentoppgave. SY 241 Elektronisk Publisering. Prosjektrapport 2002. Avdeling for samfunn, næring og natur !" # $% $&"!' Studentoppgave SY 241 Elektronisk Publisering Prosjektrapport 2002 Avdeling for samfunn, næring og natur 0 Innholdsfortegnelse 1 FORMÅL OG BRUKSOMRÅDE...2 2 LOVER OG AVTALER...3 2.1 SAMARBEIDSAVTALE...3

Detaljer

file:///c:/users/michaelp/sites/dkdm/dw5/dreamweaver5_1.html

file:///c:/users/michaelp/sites/dkdm/dw5/dreamweaver5_1.html 1 of 10 09.04.2015 15:49 Fra forrige gang: Om tabeller Tabeller er i utgangspunktet en måte å presentere data på. Skal ikke brukes for å legge ut sider Dreamweaver har fasiliteter for å opprette, redigere

Detaljer

Farger Introduksjon Processing PDF

Farger Introduksjon Processing PDF Farger Introduksjon Processing PDF Introduksjon På skolen lærer man om farger og hvordan man kan blande dem for å få andre farger. Slik er det med farger i datamaskinen også; vi blander primærfarger og

Detaljer

Oblig 3 Webutvikling. Oppgave 1

Oblig 3 Webutvikling. Oppgave 1 Oblig 3 Webutvikling Oppgave 1 Ta for deg en selvvalgt bedrift (gjerne lokal/mindre) og tenk deg at du hadde fått i oppgave å være en SEOkonsulent for disse i én uke. På denne uken skulle du gjennomført

Detaljer

1. Lage og vise et enkelt XML-dokument

1. Lage og vise et enkelt XML-dokument Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag Lage og vise et enkelt XML-dokument Lene Hoff (revidert av Tore Mallaug) 1.9.2013 Lærestoffet er utviklet for faget XML Teknologi 1. Lage

Detaljer

Denne rapporten er beregnet for dataansvarlig på Grefsenhjemmet, den som skal installere, vedlikeholde og modifisere systemet.

Denne rapporten er beregnet for dataansvarlig på Grefsenhjemmet, den som skal installere, vedlikeholde og modifisere systemet. Produktrapport Forord Denne rapporten er beregnet for dataansvarlig på Grefsenhjemmet, den som skal installere, vedlikeholde og modifisere systemet. Dataansvarlig eller supporter trenger informasjon om

Detaljer

Her er en enkel bruksanvisning på administrasjonspanelet til hjemmesiden din på QTSystems.

Her er en enkel bruksanvisning på administrasjonspanelet til hjemmesiden din på QTSystems. Her er en enkel bruksanvisning på administrasjonspanelet til hjemmesiden din på QTSystems. Redigert 10.februar 2010. For at det skal bli lettere å lese denne manualen kan du justere størrelsen på dette

Detaljer

KRAVSPESIFIKASJON FORORD

KRAVSPESIFIKASJON FORORD KRAVSPESIFIKASJON FORORD Hensikten med kravspesifikasjonen er å gi oppdragsgiver og utviklere en enighet og forståelse av funksjonaliteten til applikasjonen som skal produseres. en definerer i tillegg

Detaljer

HØGSKOLEN I SØR-TRØNDELAG

HØGSKOLEN I SØR-TRØNDELAG HØGSKOLEN I SØR-TRØNDELAG Avdeling for informatikk og e-læring - AITeL Kandidatnr: Eksamensdato: 11. mai 2004 Varighet: Fagnummer: Fagnavn: Klasse(r): 3 timer LV197D Webprogrammering med PHP FU Studiepoeng:

Detaljer

En bedre verden med AJAX

En bedre verden med AJAX En bedre verden med AJAX Frode Eika Sandnes Hva er AJAX Har ikke noe med rengjøringsmidler å gjøre AJAX er et (morsomt) akronym Asynchronous Javascript And XML Henskikt: lage interaktive webapplikasjoner

Detaljer

Brukerdokumentasjon for LabOra portal - forfattere

Brukerdokumentasjon for LabOra portal - forfattere Brukerdokumentasjon for LabOra portal - forfattere Skin: Dnnbest-Grey-Skin1024 Skin: Metro7 Custom LabOra web-portal er et web-basert publiseringsprogram for publisering av informasjon på hjemmesider.

Detaljer

I denne oppgaven blir du introdusert for programmeringsspråket JavaScript. Du skal gjøre den klassiske oppgaven Hei verden, med en katt.

I denne oppgaven blir du introdusert for programmeringsspråket JavaScript. Du skal gjøre den klassiske oppgaven Hei verden, med en katt. Hei JavaScript! Introduksjon Web Introduksjon I denne oppgaven blir du introdusert for programmeringsspråket JavaScript. Du skal gjøre den klassiske oppgaven Hei verden, med en katt. Steg 1: Bruke JS Bin

Detaljer

datatyper Hva er programmering? Variabler og Informasjonsteknologi 2 Kompetansesemål

datatyper Hva er programmering? Variabler og Informasjonsteknologi 2 Kompetansesemål Variabler og datatyper Gløer Olav Langslet Sandvika VGS Høst 2012 Informasjonsteknologi 2 Hva er programmering? Når du skal bake en kake følger du gjerne en oppskrift. Først er det beskrevet hva kaken

Detaljer

EKSAMEN. Webutvikling Dato: ITF10511. Eksamenstid: 25/11-2013. 09.00-13.00 Hjelpemidler: Faglærer: Ingen. Tom Heine Nätt

EKSAMEN. Webutvikling Dato: ITF10511. Eksamenstid: 25/11-2013. 09.00-13.00 Hjelpemidler: Faglærer: Ingen. Tom Heine Nätt EKSAMEN Emnekode: Emne: ITF10511 Webutvikling Dato: Eksamenstid: 25/11-2013 09.00-13.00 Hjelpemidler: Faglærer: Ingen Tom Heine Nätt Eksamensoppgaven: Oppgavesettet består av 7 sider inkludert denne forsiden,

Detaljer

Administrering av SafariSøk

Administrering av SafariSøk Administrering av SafariSøk Administrering av SafariSøk Revisjonshistorie Revisjon $Revision: 1.6 $ $Date: 2003/08/05 12:44:02 $ Innholdsfortegnelse 1. Om programmet... 1 Generelt... 1 2. Fremgangsmåter...

Detaljer

med canvas Canvas Grafikk Læreplansmål Gløer Olav Langslet Sandvika VGS

med canvas Canvas Grafikk Læreplansmål Gløer Olav Langslet Sandvika VGS Grafikk med canvas Gløer Olav Langslet Sandvika VGS Høsten 2011 Informasjonsteknologi 2 Canvas Læreplansmål Eleven skal kunne bruke programmeringsspråk i multimedieapplikasjoner Med CSS3, HTML og JavaScript

Detaljer

Oblig 5 Webutvikling. Av Thomas Gitlevaag

Oblig 5 Webutvikling. Av Thomas Gitlevaag Oblig 5 Webutvikling Av Thomas Gitlevaag For oppgave 1 og 2 skal dere levere en funksjonell webside på deres hjemmeområde. Dere skal også levere alle phps-filene slik at man for en hver side kan slenge

Detaljer

NCE TOURISM FJORD NORWAY. FJORDNETT INTERNETTFORUM 2012 Bergen, 12./13. juni 2012

NCE TOURISM FJORD NORWAY. FJORDNETT INTERNETTFORUM 2012 Bergen, 12./13. juni 2012 NCE TOURISM FJORD NORWAY FJORDNETT INTERNETTFORUM 2012 Bergen, 12./13. juni 2012 HACKERS HOUR Hvor langt kommer vi med FjordNett rammeverket? Html CSS Javascript Hva er bestanddelene av en nettside? Html

Detaljer

JSP - 2. Fra sist. Hvordan fungerer web? Tjenerside script HTML. Installasjon av Web-tjener Et enkelt JSP-script. Ønsker dynamiske nettsider:

JSP - 2. Fra sist. Hvordan fungerer web? Tjenerside script HTML. Installasjon av Web-tjener Et enkelt JSP-script. Ønsker dynamiske nettsider: Fra sist JSP - 2 Installasjon av Web-tjener Et enkelt JSP-script HTML statisk Forms Tags Ønsker dynamiske nettsider: Klientside-script/programmering Javascript, vbscript, applets Tjenerside-script/programmering

Detaljer

Presentasjon av hovedprosjekt ved HIST Nettbutikk www.midt-svartdal.no

Presentasjon av hovedprosjekt ved HIST Nettbutikk www.midt-svartdal.no Presentasjon av hovedprosjekt ved HIST Nettbutikk www.midt-svartdal.no Hovedprosjekt 2008 av Audun M. Solheim, student HIST/BAIN, audun@c2i.net Oppdragsgiver:Bjørg Minnesjord Solheim, bjorg@midt-svartdal.no

Detaljer

www.lakselvdal.no Brukerkurs 16.februar 2012

www.lakselvdal.no Brukerkurs 16.februar 2012 Brukerkurs 16.februar 2012 Kort introduksjon til world wide web og struktur der. Forskjellige måter å lage seg en hjemmeside på. Hvordan vi i Lakselvdal gjør det. Og viktigst av alt, utdanne flere til

Detaljer

Løpende strekmann Erfaren Videregående Python PDF

Løpende strekmann Erfaren Videregående Python PDF Løpende strekmann Erfaren Videregående Python PDF Introduksjon I denne oppgaven skal du lage et spill der du styrer en strekmann som hopper over hindringer. Steg 1: Ny fil Begynn med å lage en fil som

Detaljer

Tips og triks nettbrett (ios og Android) Kristiansand folkebibliotek

Tips og triks nettbrett (ios og Android) Kristiansand folkebibliotek Tips og triks nettbrett (ios og ) Kristiansand folkebibliotek Hva er nettbrett?... 2 ipad... 3... 3 App er... 4 Sikkerhet... 9 Tilpassing...10 Oppdatering...10 Praktiske ting...10 Sikkerhetskopiering...12

Detaljer

CSS. Animasjon med css. Animasjon med. Informasjonsteknologi 1 og 2. Gløer Olav Langslet Sandvika VGS

CSS. Animasjon med css. Animasjon med. Informasjonsteknologi 1 og 2. Gløer Olav Langslet Sandvika VGS Animasjon med CSS Gløer Olav Langslet Sandvika VGS Leksjon 11 Informasjonsteknologi 1 og 2 Animasjon med css Vi har tidligere sett at vi kan programmere bevegelse ved å bruke JavaScript, enten ved å bruke

Detaljer

Bildebehandling i Adobe Photoshop

Bildebehandling i Adobe Photoshop Bildebehandling i Adobe Photoshop 9.1 Opprette et dokument & 9.2 Bildestørrelse Bildebehandling i Adobe Photoshop For å opprette et nytt dokument velger du File > New (Fil > Ny ). Da vil følgende vindu

Detaljer

Manual for innlegging av standard sideinnhold og nyheter via «backend»

Manual for innlegging av standard sideinnhold og nyheter via «backend» Manual for innlegging av standard sideinnhold og nyheter via «backend» 23.3.2006 Utarbeidet av: 2 Innlogging og beskrivelse av hovedelement i «backend» For å få tilgang til redigeringsmodul velges følgende

Detaljer

Styling og formatering av tekst

Styling og formatering av tekst Lesson 5 All Code Clubs must be registered. Registered clubs appear on the map at codeclub.org.uk - if your club is not on the map then visit jumpto.cc/18cplpy to find out what to do. Styling og formatering

Detaljer

S y s t e m d o k u m e n t a s j o n

S y s t e m d o k u m e n t a s j o n S y s t e m d o k u m e n t a s j o n Monitorering av produksjonsløyper ved Nasjonalbiblioteket - Project BAKE Utarbeidet av: Einar Wågan Kristian Akerhei Studium: Informasjonssystemer Innlevert: 26.5.2015

Detaljer

Innstallasjon og oppsett av Wordpress

Innstallasjon og oppsett av Wordpress Del 1 - Installasjon og oppsett Innstallasjon og oppsett av Wordpress Wordpress har blitt en veldig populær publiseringsplattform for websider. Uten særlige tekniske ferdigheter kan man sette opp profesjonelle

Detaljer

Artist webside. Gruppe medlemmer Joakim Kartveit. Oppdragsgiver Tetriz Event & Management. Frode Mathiesen. Gry Anita Nilsen.

Artist webside. Gruppe medlemmer Joakim Kartveit. Oppdragsgiver Tetriz Event & Management. Frode Mathiesen. Gry Anita Nilsen. Artist webside Innhold Artist webside...1 Gruppe medlemmer...1 Oppdragsgiver...1 Kontaktperson...2 Veileder...2 Oppgaven...2 Muligheter...2 Sammendrag...2 Dagens situasjon...2 Mål og rammebetingelser...3

Detaljer

Intro til WWW, HTML5 og CSS

Intro til WWW, HTML5 og CSS Intro til WWW, HTML5 og CSS Håkon Tolsby 20.08.2015 Håkon Tolsby 1 World Wide Web Webserver: Programvare som distribuerer websider og/eller maskin hvor programmet kjører Webbrowser (nettleser): Program

Detaljer

Produktdokumentasjon. Madison Møbler Administrasjonsside og Nettbutikk

Produktdokumentasjon. Madison Møbler Administrasjonsside og Nettbutikk Produktdokumentasjon Madison Møbler Administrasjonsside og Nettbutikk 1 1. Forord 1.1 Dokumentasjonen Dette er en teknisk dokumentasjon på produktet som er utviklet. Denne er tiltenkt personer med teknisk

Detaljer

Antall oppgaver: 6. Alle trykte og skrevne hjelpemidler

Antall oppgaver: 6. Alle trykte og skrevne hjelpemidler "..{ ~ høgskolen i oslo t:mne:--dtstribuerte informasjonssystemer Emnekode:SO I 34A ~,6ruppe(r):3AA.3AB,3AC,3AD,3AE,3Af I Dato:08. I 2.2003 Faglig veileder: Frode Eika Sandnes Eksamenstid:9-14 Eksamensoppgaven

Detaljer

Tema Guide for PHP-Fusion v6.01.

Tema Guide for PHP-Fusion v6.01. 1 av 12 18.08.2007 20:47 Tema Guide for PHP-Fusion v6.01 Publisert av sveinungs den 18. august 2007 13:29 Tema Guide for PHP-Fusion v6.01. Sist oppdatert: 18-08-2007 Innhold: Innledning Theme.php Endre

Detaljer

Enkle HTML koder for bruk til bl.a cachebeskrivelser. Ver. 2.01

<HTML Koder> Enkle HTML koder for bruk til bl.a cachebeskrivelser. Ver. 2.01 Enkle HTML koder for bruk til bl.a cachebeskrivelser. Ver. 2.01 Side 2 Ett HTML dokument inneholder både tekst som skal vises og instruksjoner om hvordan den skal vises av nettleseren. Instruksjonene

Detaljer

Fakultet for informasjonsteknologi, EKSAMEN I EMNENE TDT4110/TDT4115 SIF8008/SIF8009 INFORMASJONSTEKNOLOGI GK 5. AUGUST 2004 KL. 09.00 13.

Fakultet for informasjonsteknologi, EKSAMEN I EMNENE TDT4110/TDT4115 SIF8008/SIF8009 INFORMASJONSTEKNOLOGI GK 5. AUGUST 2004 KL. 09.00 13. Side 1 av 13 NTNU Norges teknisk-naturvitenskapelige universitet BOKMÅL Fakultet for informasjonsteknologi, matematikk og elektroteknikk Institutt for datateknikk og informasjonsvitenskap EKSAMEN I EMNENE

Detaljer

Installasjon InfoMediaPlayer:

Installasjon InfoMediaPlayer: Installasjon InfoMediaPlayer: InfoMediaPlayer lastes ned fra: https://dl.dropboxusercontent.com/u/81046462/5.5.42.exe Dette er en executable RAR fil, så kjør filen og sett C:\InfoMedia som bane for utpakking.

Detaljer

Hovedprosjekt 2011. Høgskolen i Oslo. Gruppe 24. Tore Holmboe (s155547) Vegard Kamben (s148147) Anders Fohlin Kjøde (s155551) Haakon Nygård (s155535)

Hovedprosjekt 2011. Høgskolen i Oslo. Gruppe 24. Tore Holmboe (s155547) Vegard Kamben (s148147) Anders Fohlin Kjøde (s155551) Haakon Nygård (s155535) Hovedprosjekt 2011 Høgskolen i Oslo Gruppe 24 Tore Holmboe (s155547) Vegard Kamben (s148147) Anders Fohlin Kjøde (s155551) Haakon Nygård (s155535) Stian Pettersen (s144449) en RSS-leser på tvers av touchenheter

Detaljer

Hvordan bruke Hageselskapets muligheter for levende bokmerker (RSS)?

Hvordan bruke Hageselskapets muligheter for levende bokmerker (RSS)? Hvordan bruke Hageselskapets muligheter for levende bokmerker (RSS)? Av Ole Petter Vik, Asker Versjon 2.3-24.02.2012 RSS (Really Simple Syndication, på norsk Levende bokmerker) er en metode informasjonsutgivere

Detaljer

1. Profiler og variabler

1. Profiler og variabler Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag Profiler og variabler Stein Meisingseth 26.05.2014 Lærestoffet er utviklet for faget IDRI3005 PowerShell 1. Profiler og variabler Resymé:

Detaljer

Kunden er en av Norges ledende leverandører av digital-tv og bredbåndstjenester.

Kunden er en av Norges ledende leverandører av digital-tv og bredbåndstjenester. 1 Forord Hensikten med kravspesifikasjonen er å gi oppdragsgiver og utviklere en enighet og forståelse av funksjonaliteten til applikasjonen som skal produseres. en definerer i tillegg prosjektets rammer

Detaljer

Oppgave 1. Index Mobil. About me Mobil

Oppgave 1. Index Mobil. About me Mobil Oppgave 1 Index Mobil About me Mobil Index webside About me webside Print Oppgave E.1 Forklar den praktiske forskjell på følgende to måter å linke inn et print-stilark sammen med et annet stilark for visning

Detaljer

KOM I GANG MED WORDPRESS En enkel guide for å hjelpe deg gjennom det grunnleggende i Wordpress

KOM I GANG MED WORDPRESS En enkel guide for å hjelpe deg gjennom det grunnleggende i Wordpress KOM I GANG MED WORDPRESS En enkel guide for å hjelpe deg gjennom det grunnleggende i Wordpress Sist oppdatert 05.06.2015 Innholdsfortegnelse 1. Hva er Wordpress?... 3 2. Hvordan logger jeg inn i kontrollpanelet?...

Detaljer

Importere referanser fra databaser

Importere referanser fra databaser Importere referanser fra databaser Databaser EndNote Sist oppdatert 19. november 2014 1 Innhold 1. Importere referanser... 3 1.1. Apple/IOS... 3 2. Importere referanser fra Oria... 4 3. Importere referanser

Detaljer

Grafisk løsning av ligninger i GeoGebra

Grafisk løsning av ligninger i GeoGebra Grafisk løsning av ligninger i GeoGebra Arbeidskrav 2 Læring med digitale medier 2013 Magne Svendsen, Universitetet i Nordland Innholdsfortegnelse INNLEDNING... 3 GRAFISK LØSNING AV LIGNINGER I GEOGEBRA...

Detaljer

GoOnline Site Search

GoOnline Site Search GoOnline Site Search Beskrivelse Innhold 1. Generelt a. Informasjon om dette dokumentet b. Versjon 2. Indeksering 3. Søk a. Indeksering av produkt b. Indeksering av ordinær side c. Indeksering mot 3.parts

Detaljer

Vanlige spørsmål om EndNote (april 2013)

Vanlige spørsmål om EndNote (april 2013) Vanlige spørsmål om EndNote (april 2013) Her er svar på en del vanlig spørsmål og problemer som kan dukke opp når du arbeider med EndNote. Innhold Import av referanser... 1 Hvis EndNote låser seg:... 2

Detaljer

Utseende. Lauri Watts Oversettelse: Bjørn Steensrud

Utseende. Lauri Watts Oversettelse: Bjørn Steensrud Lauri Watts Oversettelse: Bjørn Steensrud 2 Contents 1 Utseende 4 1.1 Generelt........................................... 4 1.2 Skrifter............................................ 4 1.3 Stilsett............................................

Detaljer

HØGSKOLEN I SØR-TRØNDELAG

HØGSKOLEN I SØR-TRØNDELAG HØGSKOLEN I SØR-TRØNDELAG Avdeling for informatikk og e-læring - AITeL Kandidatnr: Eksamensdato: 20.mai 2005 Varighet: Fagnummer: Fagnavn: Klasse(r): Studiepoeng: 6 3 timer LO116D Programmering i Visual

Detaljer

Side 1. Sniggabo CMS brukermanual rev. 2

Side 1. Sniggabo CMS brukermanual rev. 2 Side 1 Sniggabo CMS brukermanual rev. 2 INNHOLDSFORTEGNELSE Logg inn... 3 Menylinje... 3 Artikkelliste... 4 Ny artikkel... 5 Aktiviteter... 8 Rediger aktivitet... 9 Dokumenter... 9 Nytt dokument... 10

Detaljer

Sport 1 Plakatprogram brukerveiledning

Sport 1 Plakatprogram brukerveiledning Sport 1 Plakatprogram brukerveiledning Innhold Innledning side 3 DM plakater for utskrift side 6 Endre pris på DM plakater side 9 Plakatmaler side 14 Avansert redigering side 27 Lage plakat med produktsøk

Detaljer

BRUKERGRENSESNITT BankID på mobil. Versjon: 28. september 2015

BRUKERGRENSESNITT BankID på mobil. Versjon: 28. september 2015 BRUKERGRENSESNITT BankID på mobil Versjon: 28. september 2015 BRUKERGRENSESNITT BankID på mobil Dette er dokumentet har to deler, en del som viser og beskriver det visuelle og en del beregnet for utviklere

Detaljer

Eksempeleksamenssett for Informasjons og publiseringsteknologi faget høsten 2005.

Eksempeleksamenssett for Informasjons og publiseringsteknologi faget høsten 2005. Eksempeleksamenssett for Informasjons og publiseringsteknologi faget høsten 2005. NB, det er flere oppgaver her enn det ville vært på et reelt eksamenssett, dette for at dere skal kunne få se eksempler

Detaljer

Compello Invoice Approval

Compello Invoice Approval Compello Invoice Approval Godkjenning Webmodul brukerdokumentasjon Nettbrett og desktop via nettleser Index 1 Innledning... 3 2 Funksjonalitet... 4 Nettbrett og desktop via nettleser... 4 2.1.1 Desktop

Detaljer

4. Dynamisk skjemaer (GUI)

4. Dynamisk skjemaer (GUI) 4. Dynamisk skjemaer (GUI) I drofus kan flere skjermbilder selv defineres av prosjektet. Disse skjermbildene kan redigeres av en med administratortilgang til prosjektet. For tiden kan følgende skjemaer

Detaljer

Oblig 4 Webutvikling. Oppgave

Oblig 4 Webutvikling. Oppgave Oblig 4 Webutvikling Oppgave Lag din egen Wordpress- site der du tester ut CMS- systemet. Det å lage egne templates fra bunnen kan være noe komplisert, så det holder for dette prosjektet om dere modifiserer

Detaljer

Forelesning 23/9-08 Webprog 1. Tom Heine Nätt

Forelesning 23/9-08 Webprog 1. Tom Heine Nätt Forelesning 23/9-08 Webprog 1 Tom Heine Nätt Kursinfo Tom Heine Nätt E-post: tom.h.natt@hiof.no Mobil: 92012120 MSN: thnatt@hotmail.com All nødvendig info (forhåpentligvis) finnes på kursets webside: http://www.it.hiof.no/webprog1

Detaljer

Programmeringsrammeverk som kan installeres på Windows Mobiloperativsystem

Programmeringsrammeverk som kan installeres på Windows Mobiloperativsystem .NET Android AOSP Programmeringsrammeverk som kan installeres på Windows operativsystem Mobiloperativsystem Android Open Source Project. Har i oppgave å vedlikeholde og videreutvikle Android operativsystem.

Detaljer

Shellscripting I. Innhold

Shellscripting I. Innhold Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag Shellscripting I Tor Halsan 19.08.2010 Lærestoffet er utviklet for faget LN199D Scripting av Servere Resymé: Leksjonen er første innføring

Detaljer

BORRENYTT. Dette er en innføringsguide om hvordan man kan legge til nye poster, og hvordan disse bør settes opp.

BORRENYTT. Dette er en innføringsguide om hvordan man kan legge til nye poster, og hvordan disse bør settes opp. Dette er en innføringsguide om hvordan man kan legge til nye poster, og hvordan disse bør settes opp. I denne guiden skal jeg ta for meg hvordan man kan legge til eller endre tekst, opprette nyheter og

Detaljer

Testrapport Prosjekt nr. 2011-22 Det Norske Veritas

Testrapport Prosjekt nr. 2011-22 Det Norske Veritas Prosjekt nr. 2011 22 Testrapport Hovedprosjektets tittel Implementering av plugin og utvikling av wizard for Det Norske Veritas Prosjektdeltakere Magnus Strand Nekstad s156159 Jørgen Rønbeck s135779 Dato

Detaljer

1. Mer om oppbyning av XML-dokument

1. Mer om oppbyning av XML-dokument Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag Mer om oppbyning av XML-dokument Lene Hoff 2.9.2013 Lærestoffet er utviklet for faget XML Teknologi 1. Mer om oppbyning av XML-dokument Resymé:

Detaljer

PC-AXIS-2006. Brukerveiledning for tabelluttak og bearbeiding av data

PC-AXIS-2006. Brukerveiledning for tabelluttak og bearbeiding av data PC-AXIS-2006 Brukerveiledning for tabelluttak og bearbeiding av data 04.01.2007 Innledning Nyheter i PC-Axis 2006 Nyhet i PC-Axis 2006 - En funksjon for innspilling av aktiviteter gjordt i PC-Axis som

Detaljer

JavaScriptbibliotek. Introduksjon MVVC. Informasjonsteknologi 2. Gløer Olav Langslet Sandvika VGS

JavaScriptbibliotek. Introduksjon MVVC. Informasjonsteknologi 2. Gløer Olav Langslet Sandvika VGS MVVC JavaScriptbibliotek Gløer Olav Langslet Sandvika VGS Knockout.js Informasjonsteknologi 2 Introduksjon I dag skal vi se nærmere på et JavaScriptbibliotek som heter Knockout. Knockout og andre biblioteker,

Detaljer