SUKKERGRIS. Anita og Silje DAT100
|
|
|
- Kaare Espeland
- 10 år siden
- Visninger:
Transkript
1 SUKKERGRIS Anita og Silje DAT100
2 I NNHOLD 1. Innledning Beskrivelse av Sukkergris Struktur og grafisk design Sidens oppbygning CSS og Grafisk design Oversikt over konfektbitene Opprette konfektbitdivene i konfektoversikt Vise informasjon fra sjoko.js i hver enkelt div Gjøre konfektbitene «klikkbare» Klikkbare konfektbiter Rabatt Handlekurven Legg i handlekurven Totalsum i handlekurven Konklusjon Prosjektet Kommentarer til arbeidsprosessen Referanser... 8
3 1. I N N L E D N I N G Den siste innleveringsoppgaven i faget DAT100 går ut på å lage en nettside for et tenkt firma Sukkergris. Sukkergris lager eksklusiv konfekt og ønsker å selge konfektbiter i en nettbutikk. Denne nettbutikken skal settes sammen av HTML, CSS og JavaScriptkode og dekker store deler av pensum i faget. Som utgangspunkt for prosjektoppgaven fikk studentene utlevert en mappe som inneholdt bilder, en CSSmal, en nettsidemal, en JavaScript-fil og flere html-filer vi skulle bruke kode fra. Denne rapporten beskriver hvordan vi har valgt å løse oppgaven. Utviklere er Anita Væting og Silje Madalena Unander.
4 2. B ESK R I V E L S E A V SUKKERGRI S 2.1 Struktur og grafisk design For selve nettsiden tok vi utgangspunkt i index.html som inneholdt hele strukturen på siden. Index.html består av et header-område kalt "Butikkinfo" øverst, et hovedområde "Oversikt over konfektbiter" under og to avdelinger, "Info om valgt konfektbit" og "Handlekurv", i høyre side.g Siden er utformet for en skjermstørrelse på 1920x1080 og er testet i Google Chrome og Opera Sidens oppbygning Tabell 1 - Nettsidens inndeling i div-elementer header tittel butikkinfo konfektoversikt konfektinfo konfektdiv konfektdiv konfektdiv venstreinfo hoyreinfo konfektdiv konfektdiv konfektdiv konfektdiv konfektdiv konfektdiv handlekurv Vår side er satt sammen av følgende elementer: <head> I headen står metainformasjon som navn og beskrivelse, tittel på siden og linker til eksterne filer som stilark og JavaScript. <link href="sukkergris_endelig.css" rel="stylesheet" type="text/css"/> <script src="sjoko.js"></script> <body> Bodytaggen inneholder følgende elementer (div'er):
5 <div id="header"> Vi fant det hensiktsmessig å dele headeren ytterligere inn i to div er med id-ene "tittel" og "butikkinfo" for å lettere styre utforming og utseende på disse to tekstene. <div id="konfektoversikt"> Her vises alle konfektbitene, med informasjon hentet fra sjoko.js. Se beskrivelse senere i rapporten. <div id="hoyreside"> Denne div'en er delt opp i div'ene konfektinfo og handlekurv. - <div id="konfektinfo"> Konfektinfo "lytter på" og viser informasjon om en konfektbit når denne blir klikket på i konfektoversikt. I hoyreinfo står det en knapp som legger valgt konfektbit inn i handlekurven. - <div id="handlekurv"> Handlekurven samler opp valgte konfektbiter i en liste og summerer prisene CSS og Grafisk design Utseende, utforming og plassering av elementer beskrives i en CSS-fil, et såkalt stilark. Utgangspunktet for nettstedet for var CSS-fila sukkergris.css som ble utlevert med oppgaven. Vi har valgt å bruke en mørk palett på siden, med mørkebrun bakgrunnsfarge og jordtoner i skriftfargene. Riktig bruk av mørke farger gir en følelse av luksus, samtidig som at de understreker at Sukkergris faktisk selger konfekt og mørk sjokolade. De to horisontale inndelingene er atskilt av en lys kantstrek. Av generelle verdier som ble satt i body, overskrifter og p vil vi nevne bruken av en sans-serif fontfamilie for å gjøre uttrykket mer moderne. font-family: "Trebuchet MS", Helvetica, sans-serif; Deretter er egenskapene for de ulike div ene deklarert. Hver div fikk sin egen id, og ved å skrive # foran navn på div i CSS-fila velger man å definere egenskaper for akkurat den div en. Man deklarerer egenskaper som er felles for alt innholdet i denne div en. Gjennomgang av enkeltelementer En liten beskrivelse av noen selektorer vi mener fortjener en grundigere gjennomgang. Og hvorfor. I #header satte vi bakgrunnsbildet med background-image:url(chocolate_header.jpg); #tittel har skygge på teksten. Den gjør omrisset av den lyse tekstfargen tydeligere: text-shadow: 2px 2px 4px #8B4513; #konfektoversikt er satt til float:left 60% bredde og #hoyreside til float:right 35% bredde. konfektoversikt har også en deklarasjon text-align: center; som midtstiller alt innhold. Da ser det ryddigere ut.
6 I.konfektDiv har vi brukt avrundede hjørner, en hvit kantstrek og sentrert bilde, ved å sette bredde-attributt for innlastingen av bildet i javascriptkoden til 70%. I tillegg til koden som fulgte med i lagdiver.css: display: inline-table; Viser div ene bortover, som I en tabell cursor: pointer; Gjør musepekeren om til en hånd over div en #venstreinfo og #hoyreinfo er delt inn med float til venstre og høyre og bredde satt til 50%. I deloppgave 3b skulle vi vise en tekst for rabatt på konfektbiter over 14 kr. For å tydeliggjøre dette valgte vi å gi denne teksten en egen klasse:.advarsel { color:red; font-weight:60%; font-size:1,2em; } #knapp følger stilen til konfektdiv. 2.2 Oversikt over konfektbitene I deloppgave 2 skulle vi lage en oversikt over utvalget til Sukkergris og vise hver konfektbit i en div med navn, bilde og pris. Data om hver bit hentes fra en ferdiglagd JavaScript-fil, sjoko.js. Utgangspunkt for koden er lagdiver.html og lagdiver.css, og JavaScript-koden skrives i <script>-taggen Opprette konfektbitdivene i konfektoversikt Først måtte vi skrive kode for å lage div er i konfektoversikt-div en. For å endre eller legge til innhold i en div, må man først legge elementet til en variabel i JavaScript: var beholder = document.getelementbyid("konfektoversikt");. Deretter setter vi hvor mange konfektbitdiver vi ønsker å vise i konfektoversikt: var antall = 12; eller sjoko.antall: som henter alle div ene fra sjoko.js. For å gjenta kode, benytter man seg av en løkke, i dette tilfellet for å kjøre en funksjon som oppretter en ny div med et tall: for (var teller = 0; teller <= antall; teller++) Teller øker med 1 til den blir lik antall - som er en tallvariabel definert i sjoko.js. Løkken lager nye konfektbitdiver ved å kalle opp funksjonen lagsjokodiv, som lager div for hvert tall teller slik: var nydiv = lagsjokodiv(teller); Deretter legges konfektbitdivene til i konfektoversikt gjennom variabelnavnet beholder: beholder.appendchild(nydiv); Vise informasjon fra sjoko.js i hver enkelt div Nå har vi laget en div for hver konfektbit i sjoko.js. Neste skritt i oppgaven er å faktisk å klare å vise informasjonen i disse div'ene. Sjoko.js inneholder et array over alle konfektbiter med informasjon og id, og id'en er et tall fra 0 og oppover. Funksjonen lagsjokodiv bruker teller fra løkka som teller opp ider. For hver id henter lagsjokodiv navn, bilde, pris og beskrivelse via funksjoner definert i sjoko.js.
7 Eksempel: hente bilde og legge det inn i variabelen 'bilde': var bilde = sjoko.getbilde(teller); getbilde henter bildet for tallet teller som tilsvarer id'en til en bestemt konfektbit. Så må man lage selve div'en, her som en variabel 'element': var element = document.createelement("div") Vi setter sammen variablene vi har hentet fra sjoko.js til 'divtext', additivt: var divtext = '<h3> ' + naejm + '</h3>'; divtext += '<img src="konfekt/bilder_s/' + bilde + '" alt="' + bilde + '" width=70% />'; divtext += '<p>pris kr ' + pris + ',-</p>'; divtext += '<br />'; Så angis id, som vi skal bruke senere: element.setattribute("id", teller); og klasse, slik at vi kan bestemme utseendet : element.setattribute("class", "konfektdiv"); Innholdet, 'divtext', må legges inn i htmlkoden til div'en: element.innerhtml = divtext; Hele div'en returneres deretter tilbake til løkka som påkalte funksjonen: return element; Og vi er tilbake til start, før løkka begynner på en ny konfektbitdiv. 2.3 Gjøre konfektbitene «klikkbare» Klikkbare konfektbiter I oppgave 3a skal vi gjøre konfektbitene klikkbare. Hensikten er at når du klikker på en konfektbit skal det vises mer info om biten inne i konfektinfo-div en på høyre side av websiden. Navn, beskrivelse, pris og et stort bilde kommer frem i div en ved klikk på en konfektbit. For å få til dette må vi legge til en onclick-hendelse til hver enkelt konfektbit som kjører en funksjon for å utføre denne hendelsen. Vi kaller den mokkaklikk. element.oncklick = mokkaklikk; legges inn i funksjonen lagsjokodiv som ble laget i oppgave 2. For at mokkaklikk funksjonen skal få tak i nummeret til konfektbiten som blir klikket på, må vi lagre en attributt til hver enkelt konfektbit. element.setattribute ("id", teller); function mokkaklikk() For å få tak i informasjon om hvilken konfektbit det ble klikket på må vi hente attributten vi lagret over fra this som refererer til konfektbiten det ble klikket på. var sjokoid = this.getattribute("id"); For å legge inn selve innholdet i div ene må vi oppdatere innholdet i hoyreinfo og venstreinfo. JS henter informasjon ved hjelp av sjokoid. For å oppdatere innholdet i
8 venstre og høyre ramme settes inn variabler som brukes for å lage HTML kode. Denne koden viser vi i konfektinfo ved å bruke innerhtml Rabatt Når du klikker på en konfektbit hvor prisen er over 14 kr dukker det opp en tekst (i konfektinfo-div en) som sier at du får 10 % rabatt. Oppgaven er løst ved å benytte en if-test på prisen som skriver en tekst hvis denne testen er sann. Hvis prisen er over 14 kroner oppdateres innholdet i hoyrebeholder. 2.4 Handlekurven Legg i handlekurven Det første som ble gjort i denne oppgaven var å lage en knapp i HTML inne i konfektinfo-div en med teksten «Legg i handlekurven». Med en oncklick-funksjon. Når du klikker på knappen legges navn og pris på konfektbiten inn i en select-liste i handlekurv-div en. Denne select-lista lages også inne i HTML. Den kaller vi «minkurv» og er i utgangspunktet tom. Ved å klikke på knappen kjøres en funksjon for å hente informasjon fra høyreside div en. Denne funksjonen kaller vi «leggikurv». Denne funksjonen skal oppdatere select-lista med konfektbitene som vi klikker på. For å få til dette må vi hente nummeret på konfektbiten som skal inn i lista. Måten vi løser dette på er å oppdatere mokkaklikk-funksjonen med å lagre de verdiene vi skal legge inn i handlekurven som attributter i hoyreside-div en. Vi må deretter hente attributtene tilbake i leggikurv-funksjonen slik vi kan oppdatere selectlista(sjokoid, navnet og prisen). Vi lager en option som inneholder navn og pris på den valgte konfektbiten, som vi så legger inn i select-lista med selectliste.add(mokkabit); Add-funksjonen oppdaterer select-lista vi har laget i HTML-koden Totalsum i handlekurven For å lagre totalsum i handlekurven er totalsum satt med verdi 0 i en global variabel. Vi har også laget en div i HTML kalt «resultat» for å skrive ut totalsummen. Hver gang du legger til en konfektbit legges den til i totalsummen. For å konvertere til tall bruker vi funksjonen Number() med variabelen pris som er tekst: totalsum = totalsum + Number(pris); Vi bruker innerhtml på resultat div en for å oppdatere totalsummen som vises i HTML siden.
9 3. K O N K L U S J O N 3.1 Prosjektet Vi har tatt utgangspunkt i oppgaveillustrasjonen og oppgavemalen for utforming av nettsiden. Utformingen består av tre hoveddeler, en header, en hoveddel og en sidedel. Nettsiden fungerer slik vi har lagt opp og oppfyller kravene stilt i de fire obligatoriske oppgavene. Vi er fornøyd med resultatet og mener at vi har vi har løst oppgaven på en strukturert måte. Det største og viktigste forbedringspotensialet ligger i å benytte seg av responsivt design for å få best mulig tilpasning til ulike skjermstørrelser. En større og større andel av menneskenes nettbruk foregår på smale og små skjermer. Derfor er det det er viktig for en butikk, egentlig for alle med et formidlingsbehov, å ha en side som duger i breddemangfoldet. Ellers er det mange småting som kan forbedres og som ble begrenset av tid og av mangel på css-kunnskap. Vi nevner i fleng: - god løsning på plassering av leggihandlekurv-knappen - teste i flere nettlesere: en rask sjekk viste at Internet Explorer 8 ikke viste all cssen. - sette stil på handlekurvlista - footer-område med informasjon om Sukkergris-firmaet - kanskje et annet utseende og fargevalg. I tillegg til de frivillige oppgavene. 3.2 Kommentarer til arbeidsprosessen Versjonskontroll Underveis i arbeidet er det et problem som gjør seg gjeldene når flere skal arbeide med den samme filen: hvordan styrer vi med hva som er endret og hva vi ønsker å beholde? Vårt system var ganske primitivt og bestod i å gi nytt navn til filene vi arbeidet med hver for oss og deretter kommentere i selve koden hva vi hadde satt inn. Omsider tok vi i bruk googledrive og lastet opp filer dit, som et alternativ til å sende filene som vedlegg. Slik er det også mulig å ha oversikt over tidligere filere, eller alltid ha nyeste fil tilgjengelig. Ingen av oss tar DAT101 programmering grunnkurs hvor ryktet forteller at de lærer å ta i bruk GiT et versjon kontrollsystem som bare lagrer forskjellene mellom versjoner - som helt sikkert hadde gjort arbeidet lettere. 4. R E F E R A N S E R Bakgrunnsbilde i headeren på sukkergris_endelig.hml:
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
HTML: Del inn nettsiden
HTML: Del inn nettsiden Erfaren Web Introduksjon Målet med denne oppgaven er å lære hvordan man kan organisere en nettside ved å dele den inn med forskjellige tagger. Dersom du ikke er kjent med tagg-strukturen
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
CSS-formatering: stilark med kommentarer
CSS-formatering: stilark med kommentarer /* Demonstrasjon av stilarkregler. Jeg har satt inn forslag til farger og fonter, men du setter inn dine egne valg selvfølgelig. */ /* Stilregler for html-taggen
Steg 1: Vi starter fra toppen
CSS: Layout Skrevet av: Lars Klingenberg Kurs: Web Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon Målet med oppgaven er å lære hvordan
I denne oppgaven forventer vi at du har vært gjennom HTML- og CSS-oppgavene så langt og/eller er kjent med <div> - og HTML5-taggene.
CSS: Layout Ekspert Web Introduksjon Målet med oppgaven er å lære hvordan man lager en nettside med en meny og et innholdsfelt. I denne oppgaven forventer vi at du har vært gjennom HTML- og CSS-oppgavene
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
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
Oppbygging av innhold på responsive nettsider.
Oppbygging av innhold på responsive nettsider. HTML og CSS er koder som forteller nettleseren hvordan strukturen og utseende på en nettside skal vises på skjermen din. Selv om du ikke ser kildekoden når
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å
Alt er objekter. Læreplansmål. Gløer Olav Langslet Sandvika VGS
Alt er objekter Gløer Olav Langslet Sandvika VGS Høst - 2012 Informasjonsteknologi 2 Alt er objekter Se for deg en bil. Den har noe som er felles for alle biler. Den har hjul, ratt, og en motor. Læreplansmål
CSS: Style nettsider Nybegynner
CSS: Style nettsider Nybegynner Web Introduksjon Nå skal vi lære å endre på stilen til nettsider. I denne oppgaven forventer vi at du har gjort HTML-oppgavene eller er litt kjent med HTML fra før av. I
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
MMT105 Internettprogrammering Uke 44, høst 2007
MMT105 Internettprogrammering Uke 44, høst 2007 Introduksjon til CSS MMT105 HiNT 2007 1 HTML-elementenes strukturerende egenskaper HTML-elementene skal markere strukturen i et webdokument, dvs. at de forskjellige
EKSAMEN / 6101N WebPublisering
EKSAMEN 6101 / 6101N WebPublisering 09.12.2016 Tid: Målform: Antall sider: 3 timer Bokmål 8 (inkludert denne) Hjelpemidler: Ingen Merknader: Vedlegg: Alle oppgavene er vektet, pass på å fordele tiden du
(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
Oppgave 1 (Etter forelesning 31/8) Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.
Oblig 1 Oppdatert: 10/09 Nye oppgaver Oppgave 1 (Etter forelesning 31/8) Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Oppgave 2 (Etter
CSS: Style nettsider. Introduksjon. Skrevet av: Arve Seljebu
CSS: Style nettsider Skrevet av: Arve Seljebu Kurs: Web Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon Nå skal vi lære å endre på
CSS: Animasjon Nybegynner
CSS: Animasjon Nybegynner Web Introduksjon I denne oppgaven skal du lære å animerer HTML-objekter ved hjelp av CSS. Under ser du hvordan resultatet vil bli til slutt: Men før vi starter å lage animasjonen
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
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
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
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
I denne oppgaven blir du introdusert for programmeringsspråket JavaScript. Du skal gjøre den klassiske oppgaven Hei verden, med en katt.
JS: 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
Pipfrog AS www.pipfrog.com. Flere nettbutikker og språk
Flere nettbutikker og språk Flere nettbutikker og språk For å nå en bredere kundebase og gi en bedre tjeneste ønsker du kanskje å tillate kundene å velge et språk de foretrekker når de handler. Pipfrog
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
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
I denne oppgaven blir du introdusert for programmeringsspråket JavaScript. Du skal gjøre den klassiske oppgaven Hei verden, med en katt.
JS: Hei JavaScript! Skrevet av: Arve Seljebu Kurs: Web Tema: Tekstbasert, Nettside Fag: Programmering Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon I denne oppgaven blir du introdusert for
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
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,
EKSAMEN (Konvertert fra en gammel PHP-eksamen)
EKSAMEN (Konvertert fra en gammel PHP-eksamen) Emnekode: Emne: ITF10208 Webprogrammering 1 Dato: Eksamenstid: 30/05-2012 09.00-13.00 Hjelpemidler: 2 A4 ark (4 sider) med egenproduserte notater (håndskrevne/maskinskrevne)
Oppgavesamling til Webutvikling < >
TOM HEINE NÄTT EVA M. HORNNES JOSTEIN NORDENGEN Oppgavesamling til Webutvikling Oppdatert 08.09.2016 < > 2 Kapittel 1 Introduksjon til webutvikling 1.1 Hva husker du? Teori: Gå sammen to og to og besvar
Javascript. Mer om layout
Javascript. Mer om layout Kirsten Ribu 04.10.04 Kirsten Ribu - Webpublisering - HiO -2004 1 Men først. Hvordan går det med klasser og blokker? Hjalp det med mailene? Litt mer om klasser og blokker ;-)
Oblig 4 Undervisningshefte i grunnleggende JavaScript programmering
Oblig 4 Undervisningshefte i grunnleggende JavaScript programmering Innhold: Variabler Boolske verdier Kontrollstrukturer Datastrukturer Løkker Funksjoner Events DOM behandling av Christine Skjønhaug Færø
if-tester Funksjoner, løkker og iftester Løkker og Informasjonsteknologi 2 Læreplansmål Gløer Olav Langslet Sandvika VGS
Løkker og if-tester Gløer Olav Langslet Sandvika VGS 29.08.2011 Informasjonsteknologi 2 Funksjoner, løkker og iftester Læreplansmål Eleven skal kunne programmere med enkle og indekserte variabler eller
- 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
Hvordan legge ut en melding i Fronter
OPPDATERT 1. sept 2008 Hvordan legge ut en melding i Fronter Vi skal her lære å legge ut meldinger. De vil være noe kjedelige av utseende fordi vi har lagt vekt på at det skal være rask å bruke, lett å
Steg 1: Canvas-elementet
JS: Partikkel-animasjon Skrevet av: Lars Klingenberg Kurs: Web Tema: Tekstbasert, Nettside, Animasjon Fag: Matematikk, Programmering Klassetrinn: 5.-7. klasse, 8.-10. klasse, Videregående skole Introduction
I denne oppgaven skal du lære hvordan du kan flytte rundt på elementer og gjemme elementene bak andre elementer ved hjelp av CSS.
CSS: Skjul ninjaene Skrevet av: Oversatt fra Code Club UK (//codeclub.org.uk) Oversatt av: Trude Martinsen Kurs: Web Tema: Tekstbasert, Nettside Fag: Matematikk, Programmering, Teknologi, Kunst og håndverk
CSS: Endre utseende og stil på tekst Nybegynner
CSS: Endre utseende og stil på tekst Nybegynner Web Introduksjon I denne oppgaven skal vi jobbe videre med skrift, størrelser og farger. Vi skal utforske forskjellige skrifttyper, se på bakgrunnsfarger
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
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)
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
Forsvunnet katt webside
Lesson 3 Forsvunnet katt webside All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/18cplpy to find out what
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,
JS: Trykkomania Nybegynner Web Lærerveiledning
JS: Trykkomania Nybegynner Web Lærerveiledning Introduksjon Denne oppgaven viser deg hvordan du kan lage et spill med JavaScript og dele det med vennene dine. Spillet kalles Trykkomania fordi det handler
Verden. Steg 1: Vinduet. Introduksjon
Verden Introduksjon Processing Introduksjon Velkommen til verdensspillet! Her skal vi lage begynnelsen av et spill hvor man skal gjette hvilke verdensdeler som er hvor. Så kan du utvide oppgava til å heller
Halloweenimasjon Introduksjon Scratch PDF
Halloweenimasjon Introduksjon Scratch PDF Introduksjon Vi vil her se på hvordan vi kan lage forskjellige animasjoner med et Halloween-tema. Disse kan vi enten dele med vennene våre gjennom Scratch, eller
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
Verden. Introduksjon. Skrevet av: Kine Gjerstad Eide og Ruben Gjerstad Eide
Verden Skrevet av: Kine Gjerstad Eide og Ruben Gjerstad Eide Kurs: Processing Tema: Tekstbasert Fag: Matematikk, Programmering, Samfunnsfag Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon Velkommen
HTML5. Skjemaer på nettsider. Skjemaer med. Informasjonsteknologi 1 og 2. Gløer Olav Langslet Sandvika VGS
Skjemaer med HTML5 Gløer Olav Langslet Sandvika VGS Leksjon 10 Informasjonsteknologi 1 og 2 Skjemaer på nettsider I denne leksjonen skal vi se litt nærmere på bruk av skjemaer på nettsider. Du har sett
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
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
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
Søkemotorer. - en guide for en bedre rangering. Søkemotorer en guide for bedre rangering. InBusiness AS 2006 1
Søkemotorer - en guide for en bedre rangering Søkemotorer en guide for bedre rangering. InBusiness AS 2006 1 Innledning Har du endelig fått deg et nettsted med bra design og oppdatert innhold MEN så oppdager
BRUKERMANUAL KOM I GANG... 2 BLOGGINNLEGG... 4 UNDERSIDER... 6 LAST OPP BILDER/VIDEO... 8 KOMMENTARER PÅ INNLEGG... 9 UTSEENDE...
BRUKERMANUAL KOM I GANG... 2 SKRIV ET INNLEGG... 2 LEGG TIL UNDERSIDE... 2 LAST OPP BILDER... 2 REDIGER MENYINNHOLD... 3 LEGG INN SIDEMENY ELLER BUNNTEKST... 3 TILPASS BLOGGENS DESIGN... 3 BLOGGINNLEGG...
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
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
JS: Partikkel-animasjon Nybegynner
JS: Partikkel-animasjon Nybegynner Web Introduction I denne oppgaven skal vi bruke JavaScript til å få figurer vi å bevege seg. Vi skal altså lære å animere ved hjelp av JavaScript og noe som heter Canvas.
Steg 1: Piler og knappetrykk
PXT: Er du rask nok? Skrevet av: Julie Christina Revdahl Kurs: Microbit Tema: Blokkbasert, Spill, Elektronikk Fag: Programmering, Teknologi Klassetrinn: 5.-7. klasse, 8.-10. klasse, Videregående skole
Oppsummering - Til nå... (1/ )
Oppsummering - Til nå... (1/10-2015) Grunnleggende HTML... 1 Basic JavaScript... 1 Variabler:... 2 Operatorer:... 3 Klikkhendelser... 4 Kontrollstrukturer... 5 Valgsetninger... 5 Betingelser/påstander...
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å
Bildebehandling i GIMP
Bildebehandling i GIMP 9.1 Opprette et dokument & 9.2 Bildestørrelse For å opprette et nytt dokument velger du File > New (Fil > Ny...) Da vil følgende vindu dukke opp: Her er bildets oppløsning satt til
EKSAMEN Webpublisering
Høgskolen i Telemark Fakultet for allmennvitenskapelige fag EKSAMEN 6101 Webpublisering 03.12.2015 Tid: Målform: Sidetal: 3 timer Bokmål 5 (inkludert denne) Hjelpemiddel: Ingen Merknader: Alle oppgavene
SiteGen CMS. Innføringsmanual
SiteGen CMS Innføringsmanual Copyright Barlind Solutions AS 2008 Hva er SiteGen CMS? SiteGen CMS er et såkalt content-management-system; eller med litt andre ord et publiseringssystem. Det kan brukes til
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
BRUK AV TEKSTEDITOREN
Dynamisk Internett-publisering med DM Web BRUK AV TEKSTEDITOREN BRUKERVEILEDNING 2007 Datamann AS er Brukermanualen er utarbeidet av Datamann AS Postboks 74 9551 ØKSFJORD Telefon 78 45 95 00 Telefaks 78
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
ActiveBuilder Brukermanual
ActiveBuilder Brukermanual Forfatter: TalkActive I/S Dato: Juni 2004 Versjon: R. 1.01 Språk: Norsk Copyright 2004 - Talk Active - all rights reserved. Innhold: 1. INNLEDNING...2 2. HURTIGSTART...3 3. OPPBYGGINGEN
Oblig 2: Oppgave 1. section { width: 50%; height: 30%; margin: 5% 0 0 0; } h1 { color:#000000; font-size:2em;
Oblig 2: Oppgave 1 Hva og hvorfor Jeg har valgt å lage et nettsted basert på relative målenheter. Det vil si at jeg tar i bruk prosent og em istedenfor pixler. For eksempel: section { width: 50%; height:
Memoz brukerveiledning
Memoz brukerveiledning http://memoz.hib.no Pålogging...1 Oversikt...2 Profilside...2 Inne i en memoz...3 Legg til ting...3 Tekstboks...3 Rediger og flytte på en boks...4 Bildeboks...5 Videoboks...7 HTML-boks...7
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
Programmering i C++ Løsningsforslag Eksamen høsten 2005
Programmering i C++ Eksamen høsten 2005 Simen Hagen Høgskolen i Oslo, Avdeling for Ingeniørutdanning 7. desember 2005 Generelt Denne eksamensoppgaven består av tre oppgaver, pluss en ekstraoppgave. Det
ToPlayer. Steg 1: Kom i gang med metodene setup og draw. Gjør dette: Introduksjon:
ToPlayer Introduksjon Processing Introduksjon: Nå skal vi lage et spill som to personer kan spille mot hverandre. Vi har kalt det ToPlayer, men du kan kalle det hva du vil. Målet er å dytte en figur, eller
<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
ToPlayer. Introduksjon: Skrevet av: Ruben Gjerstad Eide og Kine Gjerstad Eide
ToPlayer Skrevet av: Ruben Gjerstad Eide og Kine Gjerstad Eide Kurs: Processing Tema: Tekstbasert Fag: Matematikk, Programmering Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon: Nå skal vi
Mer om stiler og stilark. Layout. Litt Design
Mer om stiler og stilark. Layout. Litt Design Webpublisering 13.09.2004 Webpublisering - HiO - Kirsten Ribu - 2004 1 I dag Struktur på hjemmesiden Mer om stiler Stiler og layout Litt om design og farger
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
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
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
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
Start et nytt Scratch-prosjekt. Slett kattefiguren, for eksempel ved å høyreklikke på den og velge slett.
Norgestur Introduksjon Bli med på en rundreise i Norge! Vi skal lage et spill hvor du styrer et helikopter rundt omkring et kart over Norge, mens du prøver å raskest mulig finne steder og byer du blir
Oblig 1. 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 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 arngren.net: 1. Nettsiden er SYKT uoversiktlig! 2. Det er
www.slektshistorielaget.no og Java
www.slektshistorielaget.no og Java Versjon 3, 6 september 2015 G. Thorud Her beskrives konfigurering av Java på Windows 7, 8.0 og 8.1 for å bruke databaser på www.slektshistorielaget.no Windows 10 Oppskriften
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
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...
lage og bruke funksjoner som tar argumenter lage og bruke funksjoner med returverdier forklare forskjellen mellom globale og lokale variabler
42 Funksjoner Kapittel 4 Funksjoner Etter dette kapitlet skal du kunne lage og bruke enkle funksjoner lage og bruke funksjoner som tar argumenter lage og bruke funksjoner med returverdier forklare forskjellen
Ny på nett. Operativsystemer
Ny på nett Operativsystemer Hva skal vi lære? Hva er et operativsystem? Ulike typer operativsystemer XP Vista Windows 7 Skrivebordet Min datamaskin Start-knappen Papirkurv/søppelkurv Internett explorer
Brukermanual. Itpays W3 Publish. Sette opp, logge inn og komme i gang. Redigert den 23. mai 2005. http://www.itpays.no/produkter/publisering/
Brukermanual Itpays W3 Publish Sette opp, logge inn og komme i gang Redigert den 23. mai 2005 http://www.itpays.no/produkter/publisering/ Innholdsoversikt: 1 Generelt om Itpays w3 publish Side 3 2 Sette
Administrasjon Nettbutikk: www.dittdomene.com/administrasjon Bruk brukernavn og passord som er sendt på e-post.
Administrasjon Nettbutikk: www.dittdomene.com/administrasjon Bruk brukernavn og passord som er sendt på e-post. - Konfigurasjon Klikk på Konfigurasjon i menyen helt til venstre, og deretter Min butikk.
Rapport om gruppeprosjektet Universets fenomener
Rapport om gruppeprosjektet Universets fenomener I Huin 105 Webdesign og webestetikk fikk vi i oppgave å lage et større nettsted som et gruppeprosjekt. Nettstedet kunne være kulturformidlende eller en
AUTOCAD 2008. Artikkelserie. Tabeller
Odd-Sverre Kolstad AUTOCAD 2008 Artikkelserie Tabeller Gyldendal Norsk Forlag AS 2007 Omslag Marianne Thrap Redaktør: Rune Kjelvik Formgiver: Rune Kjelvik 1. opplag ISBN 978-82-05-37108-8 Alle henvendelser
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
Steg 1: En første animasjon
Halloweenimasjon Skrevet av: Torbjørn Skauli og Geir Arne Hjelle Kurs: Scratch Tema: Blokkbasert, Animasjon Fag: Programmering, Engelsk, Kunst og håndverk Klassetrinn: 1.-4. klasse, 5.-7. klasse, 8.-10.
Oblig 5 Webutvikling
Oblig 5 Webutvikling Magnus Kristiansen Oppgave 1 Jeg startet med å laste ned wordpress fra www.wordpress.org, og installerte det gjennom WAMP (lokalserver). Og brukte guiden i https://codex.wordpress.org/child_themes
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