"Dette skjer når jeg trykker på denne knappen" "Når jeg skriver i dette feltet, ser jeg at det andre forandrer seg"
|
|
- Rudolf Carlson
- 6 år siden
- Visninger:
Transkript
1 Tegning med SVG Skrevet av: Teodor Heggelund Kurs: Elm Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi Klassetrinn: klasse, Videregående skole Introduksjon I denne oppagaven skal vi lære hvordan vi kan tegne med Elm. Her er noen vanlige elementer i webprogrammering: HTML: Struktur. "Dette er en overskrift" "Dette er et avsnitt" "Dette er en liste" CSS: Utseende. "Slik skal en overskrift se ut" "Slik skal et avsnitt se ut" "Slik skal en liste se ut" Elm eller Javascript: Logikk "Dette skjer når jeg trykker på denne knappen" "Når jeg skriver i dette feltet, ser jeg at det andre forandrer seg" Vi skal nå bruke SVG for å tegne: SVG: Tegning "Dette er en sirkel" "Sirkelen har sentrum i punktet (3,4)" "Sirkelen har bredde (diameter) 100" Jeg kommer til å vise eksempler med Try Elm. Hvis du vil kjøre nettsiden lokalt, er det helt greit.
2 Steg 1: sirkel og rektangel Vi prøver først litt med Try Elm ( Lim inn dette i kodefeltet: import Svg exposing (svg, circle, rect) import Svg.Attributes exposing (width, height, viewbox, cx, cy, r, fil l, x, y, width, height) main = svg [ width "500", height "500", viewbox " " [ circle [ cx "30", cy "50", r "50", fill "blue" [, rect [ x "100", y "100", width "80", height "40", fill "red" - [ Da skal du se noe slikt: La oss plukke koden fra hverandre. Jeg kjører lokalt, og får feil!
3 Hvis du prøver å kjøre lokalt, får du denne beskjeden fra Elm: Starting downloads... elm-lang/html elm-lang/virtual-dom elm-lang/core Packages configured successfully! I cannot find module 'Svg'. Module 'Main' is trying to import it. Potential problems could be: * Misspelled the module name * Need to add a source directory or new dependency to elm-package.jso n Da må vi installere pakken svg. Åpne et kommandovindu i samme mappe som du har lagret Elm-programmet ditt Hvis jeg har en mappe på skrivebordet mitt som heter Elm, skal jeg se følgende: C:\Users\teodor\Desktop\Elm> Kjør elm package install elm-lang/svg Start elm reactor på nytt. Fungerer det nå? Importere moduler Tidligere har vi brukt pakken Html og importert funksjoner som p for avsnitt og h1 for overskrifter. import Svg exposing (svg, circle, rect) import Svg.Attributes exposing (width, height, viewbox, cx, cy, r, fil l, x, y, width, height)
4 Nå bruker vi pakken Svg og importerer funksjoner som circle for sirkel og rect for rektangler. Trykk på circle. Ser du teksten Docs: Svg.circle som dukket opp over? Svg.circle er en link til dokumentasjonen! Trykk på denne. Stemmer eksempelet for circle med koden vår? Hva er forskjellig? Rect er det ikke (per februar 2017) noe eksempel for. Gå til Mozilla sin dokumentasjon for SVG-elementet rect ( Hva står det under Specific attributes? Bruker vi noen av disse? Finner du path i dokumentasjonen til Elm? SVG-boksen Det første vi gjør er å lage oss en passe stor boks vi kan tegne i. main = svg [ width "500", height "500", viewbox " " -- Resten tar vi etterpå width "500" sier at vi skal bruke 500 pixler i bredden. height "500" sier at vi skal bruke 500 pixler i høyden. Sjekk at du får en 500x500 px boks i nettleseren din. Slik ser det ut når jeg sjekker:
5 viewbox " " definerer koordinatsystemet vårt: x er fra 0 til 200 og y er fra 0 til 200. Inspiser sirkelen. Hvor mange pixler tar sirkelen? Inspiser rektangelet. Hvor stort er dette? Jeg har satt et koordinatsystem med "bredde" 200 til å passe til 500 pixler på skjermen. En 20x20 firkant blir 50px x 50 px stor på skjermen. Vi bruker gjerne koordinatsystem fra 0 til 100, fordi det er lett å forholde seg til. Elementer i SVG Nå har vi sagt at vi vil bruke koordinater mellom 0 og 200 til å tegne på nettsiden vår. Nå kan vi bruke disse til å tegne: [ circle [ cx "30", cy "50", r "50", fill "blue" [, rect [ x "100", y "100", width "80", height "40", fill "red" - [
6 Vi tar circle først: Atributt Verdi Forklaring cx "30" Sentrum ligger i x=30 cy "50" Sentrum ligger i y=50 r "50" Sirkelens radius er 50 fill "blue" Sirkelen er fylt med fargen blå Obs! (0,0) er øverst til venstre, og (200,200) er nederst til høyre. Tenk at vi starter å lese i (0,0) : (0,0) ---- (100, 0) ---- (200, 0) --- x (0, 100) (100, 100) (200, 100) (0, 200) (100, 200) (200, 200) y Din tur! Gjør sirkelen grønn Sett sentrum for sirkelen til "helt i midten". Hvis koordinatsystemet er fra 0 til 200, hva er i midten? Hva skjer om du tegner sirkelen utenfor koordinatsystemet? Så er det rect sin tur: Atributt Verdi Forklaring x "100" Begynn å tegne rektangelet i x=100 y "100"... og y=100. width "80" Bredden er 80 height "40" Høyden er 40
7 Atributt Verdi Forklaring fill "red" Og fyllfargen er rød. Din tur! Lag en firkant som fyller hele koordinatsystemet! Gjør den svart. Nå ser du ikke sirkelen i det hele tatt. Bytt rekkefølgen på sirkelen og rektangelet: -- fra noe sånt: [ circle --..., rect til noe sånt: [ rect --..., circle Ser du noe nå? Hva kommer øverst? Steg 2: kurver En kurve ("path" på engelsk), er en rett eller myk strek mellom flere punkter. Vi kan tegne både rette kurver og myke kurver. En linje går mellom to punkter. Vi skal ha noe som går mellom mange punkter! Importere funksjoner for å tegne kurve Importer path fra Svg, og stroke og d fra Svg.Attributes. Husker du hvordan du importerer moduler?
8 Hvordan å importere funksjoner fra moduler I Elm bygger vi opp funksjoner. Vi kan importere en modul, og bruke funksjoner fra modulen: import Html main = Html.text "Hello!" Vi kan også importere funksjoner direkte fra en modul: import Html exposing (text) main = text "Hello!" For å importere mange funksjoner fra samme modul, legger vi komma mellom funksjonene: import Html exposing (text, h1, p, ul, li) Tegne skråstrek Legg til en skrå strek gjennom bildet: [circle [ --..., rect [ --..., path [ fill "none", stroke "black", d "M0,0 200,200" [ Min ser nå slik ut:
9 Steg 3: tegne smiley Nå skal vi lage et smilefjes! Det er lurt å begynne på nytt i dette steget. Da kan du åpne en ny fane med Try Elm eller lage en ny elm-fil. Pass på at du får med deg funksjonene du trenger når du gjør oppgavene under! Vi starter med å lage oss et koordinatsystem der x og y er mellom 0 og 100. Sirkler main = svg [ width "500", height "500", viewbox " " [ -- Ingen elementer ennå! Så fyller vi dette med en stor, gul sirkel.
10 main = svg [ width "500", height "500", viewbox " " [ circle [ cx "5", cy "5", r "5", fill "yellow" - [ Ånei! Den var ikke stor! Endre sentrum ( cx og cy ) så sirkelen er i midten. Endre radius ( r ) på sirkelen så sirkelen blir stor! Hvor stor kan du gjøre den uten at den kuttes av i kantene? Bezierkurver Bezierkurve! Det var et rart navn. Vi bruker ofte bezierkurver når vi vil ha en myk kurve. Det finnes forskjellige typer bezierkurver: Navn på norsk Navn på engelsk Nøkkel Forklaring Lineær kurve Linear curve L Rett strek mellom to punkter ("linje") Kvadratisk kurve Quadratic curve Q Myk strek mellom tre punkter ("kvadrat") Kubisk kurve Cubic curve C Myk strek mellom fire punkter ("kube") En munn som bezierkurve Gå til ( Du kan dra i punktene. Klarer du å lage en munn?
11 Her er en path med bezierkurve i Elm: path [ fill "none", stroke "black", d "M20,60 C 40,50 60,50 80,60 " [ I strengen "M20,60 C 40,50 60,50 80,60 " dukker det opp to mystiske variabler. C står for "Cubic", og M står for "Move to"; begynn her. Ånei! Det ble et surt fjes! Kan du gjøre munnen blid igjen? Hva skjer om du bytter ut C med L eller Q? Ellipser Her er to ellipser: En sirkel har lik høyde og bredde. En ellipse kan være flat eller tynn; den kan ha forskjellig radius i x- og y-retning. Her er Elm-koden som lager den røde ellipsen: ellipse [ cx "30", cy "40", rx "5", ry "10", fill "red" - [ Og denne lager den lilla ellipsen: ellipse [ cx "70", cy "40", rx "10", ry "5", fill "purple" - [ Du finner ellipse i Svg, og cx og cy i Svg.Attributes.
12 Øyne som ellipser Lag en ellipse for venstre øye Lag en ellipse for høyre øye. Hva er forskjellen mellom høyre og venstre øye? Her er sånn min ble seende ut: Hva skjer om du fyller en bezierkurve med en farge? path [ fill "red", stroke "black", d "M20,60 C 40,80 60,80 80,60 " [ Hva skjer om du legger på stroke på den gule sirkelen?
13 circle [ cx "50", cy "50", r "50", stroke "black", fill "yellow" - [ Svg inne i et Html-dokument Det går an å skrive Svg inne i et Html-dokument. Her er et eksempel: import Svg exposing (svg, circle, rect) import Svg.Attributes exposing (width, height, viewbox, cx, cy, r, fil l, x, y, width, height) import Html exposing (text, div, h1, p) main = div [ [ h1 [ [text "Mine figurer!", svg [ width "500", height "500", viewbox " " [ circle [ cx "30", cy "50", r "50", fill "blue" [, rect [ x "100", y "100", width "80", height "40", fill "red" - [, p [ [text "Her har jeg tegnet en firkant og en sirkel!" Tegne på din egen nettside Gå tilbake til en av de tidligere oppgavene du har gjort. Vil du legge til en tegning noe sted? Lisens: CC BY-SA 4.0 (
Denne oppgaven viser hvordan vi kan bruke musen til å kontrollere elm-programmene våre.
Kontroller med musen Skrevet av: Teodor Heggelund Kurs: Elm Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon Denne oppgaven viser hvordan
Steg 1: Hvordan fungerer spillet?
Lær av et annet spill! Skrevet av: Teodor Heggelund Kurs: Elm Tema: Tekstbasert, Nettside, Spill Fag: Programmering, Teknologi Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon Så langt har dere
Fraktaler og datastrukturer
Fraktaler og datastrukturer Skrevet av: Teodor Heggelund Kurs: Elm Tema: Tekstbasert, Nettside Fag: Matematikk, Programmering, Teknologi Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon En fraktal
Tell sekunder. Introduksjon. Skrevet av: Teodor Heggelund. I denne oppgaven skal vi lage vårt eget spill!
Tell sekunder Skrevet av: Teodor Heggelund Kurs: Elm Tema: Tekstbasert, Nettside, Spill Fag: Programmering, Teknologi Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon I denne oppgaven skal vi
Fraktaler og datastrukturer
Fraktaler og datastrukturer Ekspert Elm Introduksjon En fraktal er en geometri med et mønster som gjentar seg selv inne i seg selv. Høres ikke det rart ut? I denne oppgaven skal vi lage våre egne. Her
Modell, meldinger og oppdatering
Input fra brukeren Skrevet av: Alexander Perry Kurs: Elm Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon Input-felter lar brukere skrive
Finn en partner å prøve spillet sammen med. Det er OK å være tre personer og bytte på hvilke to som spiller.
Lær av et annet spill! Erfaren Elm Introduksjon Så langt har dere lært å skrive egen kode. Å lære å skrive kode krever mye trening for å bli god. Det er også viktig å kunne lese kode. Da lurer vi på ting
Steg 1: Animasjons-attributtet
CSS: Animasjon Skrevet av: Lars Klingenberg Kurs: Web Tema: Tekstbasert, Nettside, Animasjon Fag: Matematikk, Programmering, Kunst og håndverk Klassetrinn: 5.-7. klasse, 8.-10. klasse, Videregående skole
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
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
Kanter, kanter, mange mangekanter. Introduksjon: Steg 1: Enkle firkanter. Sjekkliste. Skrevet av: Sigmund Hansen
Kanter, kanter, mange mangekanter Skrevet av: Sigmund Hansen Kurs: Processing Tema: Tekstbasert, Animasjon Fag: Matematikk, Programmering, Kunst og håndverk Klassetrinn: 8.-10. klasse, Videregående skole
Sprettende ball. Introduksjon: Steg 1: Vindu. Sjekkliste. Skrevet av: Sigmund Hansen
Sprettende ball Skrevet av: Sigmund Hansen Kurs: Processing Tema: Tekstbasert, Animasjon Fag: Matematikk, Naturfag, Programmering, Kunst og håndverk Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon:
Tell sekunder. Steg 0: Hva er forskjellig fra før? Introduksjon. I denne oppgaven skal vi lage vårt eget spill!
Tell sekunder Erfaren Elm Introduksjon I denne oppgaven skal vi lage vårt eget spill! Vi lært mye allerede! Her er en oppsummering: Verktøy til Elm-utvikling: Bruke Try Elm til å lage programmer Bruke
Tetris. Introduksjon. Skrevet av: Kine Gjerstad Eide. Lag starten på ditt eget tetris spill!
Tetris Skrevet av: Kine Gjerstad Eide Kurs: Processing Introduksjon Lag starten på ditt eget tetris spill! Det du skal gjøre i denne oppgava er først å sette opp bakgrunnen til spillet og så rett og slett
Denne oppgaven innfører funksjoner, og viser hvordan vi kan skrive og teste funksjoner i Ellie.
Ellie og funksjoner Skrevet av: Teodor Heggelund Kurs: Elm Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon Denne oppgaven innfører
Kodetime for Nordstrand barneskole
Kodetime for Nordstrand barneskole av Veronika Heimsbakk og Lars Erik Realfsen 1 Hva er Processing? Processing er et programmeringsspråk som er gratis, og tilgjengelig for alle! Man kan programmere i Processing
Om du allerede kjenner Scratch og har en Scratchbruker kan du gå videre til Steg 1.
Pingviner på tur Skrevet av: Geir Arne Hjelle Kurs: Scratch Tema: Blokkbasert, Spill Fag: Programmering Klassetrinn: 1.-4. klasse, 5.-7. klasse, 8.-10. klasse Introduksjon Velkommen til Scratch. Vi skal
Steg 1: Få noe på skjermen
Skrive egen kode Skrevet av: Erik Aasmundrud Kurs: Elm Tema: Tekstbasert, Nettside Fag: Matematikk, Programmering, Teknologi Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon Denne oppgaven har
Steg 0: Installere Pygame Zero
PGZ - Sprettball Skrevet av: Ole Kristian Pedersen, Kodeklubben Trondheim Kurs: Python Tema: Tekstbasert, Spill Fag: Matematikk, Programmering Klassetrinn: 5.-7. klasse, 8.-10. klasse Introduksjon I denne
Logo med FXML. Introduksjon. Skrevet av: Hallvard Trætteberg
Logo med FXML Skrevet av: Hallvard Trætteberg Kurs: Javafx Introduksjon En viktig del av det å lage app-er er å utforme skjerminnholdet, dvs. alt app-en inneholder av grafikk, knapper, lister, osv. Formålet
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
Bygge en pyramide. Introduksjon. Steg 1: Lage en ny mod. Sjekkliste. Skrevet av: Pål G. Solheim
Bygge en pyramide Skrevet av: Pål G. Solheim Kurs: Learntomod Tema: Blokkbasert, Minecraft Fag: Programmering, Teknologi Klassetrinn: 1.-4. klasse, 5.-7. klasse, 8.-10. klasse Introduksjon La oss gjøre
Bygge en kube. Introduksjon. Steg 1: Lage en ny mod. Skrevet av: Pål G. Solheim
Bygge en kube Skrevet av: Pål G. Solheim Kurs: Learntomod Tema: Blokkbasert, Minecraft Fag: Programmering, Teknologi Klassetrinn: 1.-4. klasse, 5.-7. klasse, 8.-10. klasse Introduksjon Vi skal bygge en
Hvor i All Verden? Del 1. Introduksjon. Steg 1: Styr et helikopter. Skrevet av: Geir Arne Hjelle
Hvor i All Verden? Del 1 Skrevet av: Geir Arne Hjelle Kurs: Scratch Tema: Blokkbasert, Spill Fag: Matematikk, Programmering, Samfunnsfag Klassetrinn: 1.-4. klasse, 5.-7. klasse, 8.-10. klasse Introduksjon
Input fra brukeren. Hente tekst fra brukeren. Moduler og program. Modell, meldinger og oppdatering. Skriv ut teksten. Introduksjon
Input fra brukeren Erfaren Elm Introduksjon Input-felter lar brukere skrive inn tekst, tall, datoer og så videre i nettsiden vår. Informasjonen vi får fra brukerne kan vi endre, skrive ut, og kombinere
Soloball. Introduksjon. Steg 1: En roterende katt. Sjekkliste. Skrevet av: Geir Arne Hjelle
Soloball Skrevet av: Geir Arne Hjelle Kurs: Scratch Tema: Blokkbasert, Spill Fag: Matematikk, Programmering Klassetrinn: 1.-4. klasse, 5.-7. klasse, 8.-10. klasse Introduksjon Vi skal nå lære hvordan vi
Det du skal gjøre i denne oppgava er først å sette opp bakgrunnen til spillet og så rett og slett å få firkanter til å falle over skjermen.
Tetris Introduksjon Processing Introduksjon Lag starten på ditt eget tetris spill! Det du skal gjøre i denne oppgava er først å sette opp bakgrunnen til spillet og så rett og slett å få firkanter til å
PXT: Det regner mat! Introduksjon. Steg 1: Grunnlag. Sjekkliste. Skrevet av: Helene Isnes
PXT: Det regner mat! Skrevet av: Helene Isnes Kurs: Microbit Tema: Elektronikk, Blokkbasert, Spill Fag: Matematikk, Programmering Klassetrinn: 5.-7. klasse, 8.-10. klasse, Videregående skole Introduksjon
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
Uendelig bakke. Introduksjon. Skrevet av: Kine Gjerstad Eide
Uendelig bakke Skrevet av: Kine Gjerstad Eide Kurs: Processing Tema: Tekstbasert, Animasjon Fag: Matematikk, Programmering, Kunst og håndverk Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon
Sprettende ball Introduksjon Processing PDF
Sprettende ball Introduksjon Processing PDF Introduksjon: I denne modulen skal vi lære et programmeringsspråk som heter Processing. Det ble laget for å gjøre programmering lett for designere og andre som
Her skal du lære å programmere micro:biten slik at du kan spille stein, saks, papir med den eller mot den.
PXT: Stein, saks, papir Skrevet av: Bjørn Hamre Kurs: Microbit Introduksjon Her skal du lære å programmere micro:biten slik at du kan spille stein, saks, papir med den eller mot den. Steg 1: Velge tilfeldig
Norgestur. Introduksjon. Steg 1: Et norgeskart. Sjekkliste. Skrevet av: Geir Arne Hjelle
Norgestur Skrevet av: Geir Arne Hjelle Kurs: Scratch Tema: Blokkbasert, Spill Fag: Matematikk, Programmering, Samfunnsfag Klassetrinn: 1.-4. klasse, 5.-7. klasse, 8.-10. klasse Introduksjon Bli med på
Tegnespillet. Introduksjon:
Tegnespillet Introduksjon Processing Introduksjon: Denne oppgaven går ut på å lage et tegnespill, målet er å skrive kode, slik at du kan å tegne tegninger som ligner på disse: Oppgaven er lagt opp slik
Klask-en-Muldvarp. Introduksjon. Skrevet av: Basert på MITs "MoleMash for App Inventor 2"-guide (
Klask-en-Muldvarp Skrevet av: Basert på MITs "MoleMash for App Inventor 2"-guide (http://appinventor.mit.edu/explore/ai2/molemash.html) Oversatt av: Hanne Johnsen Kurs: Appinventor Tema: App, Blokkbasert
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.
La oss begynne enkelt. Vi vil først se hvordan vi kan flytte og snurre på en figur.
Snurrige figurer Skrevet av: Geir Arne Hjelle og Carl Andreas Myrland Kurs: Scratch Introduksjon Det er ganske enkelt å lage interessante animasjoner i Scratch. Her skal vi se hvordan vi kan flytte og
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
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
Kanter, kanter, mange mangekanter
Kanter, kanter, mange mangekanter Nybegynner Processing PDF Introduksjon: Her skal vi se på litt mer avansert opptegning og bevegelse. Vi skal ta utgangspunkt i oppgaven om den sprettende ballen, men bytte
Hvor i All Verden? Del 2. Introduksjon. Steg 0: Forrige gang. Skrevet av: Geir Arne Hjelle
Hvor i All Verden? Del 2 Skrevet av: Geir Arne Hjelle Kurs: Scratch Tema: Blokkbasert, Spill Fag: Matematikk, Programmering, Samfunnsfag Klassetrinn: 1.-4. klasse, 5.-7. klasse, 8.-10. klasse Introduksjon
"Hjerneteppe!" er en huskelek hvor du skal huske stadig lengre rekker med bokstaver!
PXT: Hjerneteppe! Skrevet av: Helene Isnes Kurs: Microbit Tema: Blokkbasert, Spill Fag: Programmering Klassetrinn: 5.-7. klasse, 8.-10. klasse Introduksjon "Hjerneteppe!" er en huskelek hvor du skal huske
Farger. Introduksjon. Skrevet av: Sigmund Hansen
Farger Skrevet av: Sigmund Hansen Kurs: Processing Tema: Tekstbasert Fag: Matematikk, Programmering, Kunst og håndverk Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon På skolen lærer man om
Steg 1: Katten og fotballbanen
Straffespark Skrevet av: Erik Kalstad og Geir Arne Hjelle Kurs: Scratch Tema: Blokkbasert, Spill Fag: Matematikk, Programmering Klassetrinn: 1.-4. klasse, 5.-7. klasse, 8.-10. klasse Introduksjon Vi skal
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å
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
Skrevet av: Oppgaven er laget av GDG Bergen ( AU/GDGBergen/), og tilpasset Kodeklubbens format på oppgaver.
Space invaders Skrevet av: Oppgaven er laget av GDG Bergen (https://www.meetup.com/en- AU/GDGBergen/), og tilpasset Kodeklubbens format på oppgaver. Oversatt av: Teodor Heggelund og Stein Olav Romslo Kurs:
Steg 1: Tekst på flere linjer
Skilpaddetekst Skrevet av: Ole Kristian Pedersen, Kodeklubben Trondheim Kurs: Python Tema: Tekstbasert Fag: Programmering Klassetrinn: 8.-10. klasse Introduksjon I denne oppgaven skal vi skrive kode, slik
Steg 1: Felix har forsvunnet!
HTML: Forsvunnet katt Skrevet av: Arve Seljebu Kurs: Web Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi, Norsk Klassetrinn: 5.-7. klasse, 8.-10. klasse, Videregående skole Introduksjon Katten
La oss begynne enkelt. Vi vil først se hvordan vi kan flytte og snurre på en figur.
Snurrige figurer Skrevet av: Geir Arne Hjelle og Carl Andreas Myrland Kurs: Scratch Introduksjon Det er ganske enkelt å lage interessante animasjoner i Scratch. Her skal vi se hvordan vi kan flytte og
Forberedelser: Last ned bildefiler
Tegneprogram Skrevet av: Oversatt fra Code Club UK (//codeclub.org.uk) Oversatt av: Helge Astad og Anne-Marit Gravem Kurs: Scratch Tema: Blokkbasert Fag: Matematikk, Programmering, Kunst og håndverk Klassetrinn:
I denne oppgaven skal vi gi en enkel innføring til klasser og objekter (ordene forklares senere i teksten).
Enkle objekter Skrevet av: Ole Kristian Pedersen, Kodeklubben Trondheim Kurs: Python Tema: Tekstbasert Fag: Programmering Klassetrinn: 5.-7. klasse, 8.-10. klasse, Videregående skole Introduksjon I denne
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
PXT: Himmelfall. Introduksjon. Skrevet av: Helene Isnes og Julie Revdahl
PXT: Himmelfall Skrevet av: Helene Isnes og Julie Revdahl Kurs: Microbit Tema: Elektronikk, Blokkbasert, Spill Fag: Programmering, Matematikk Klassetrinn: 5.-7. klasse, 8.-10. klasse, Videregående skole
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
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
Steg 1: Opprette app-pakke, app-klasse og FXML-fil
Logo med FXML Introduksjon En viktig del av det å lage app-er er å utforme skjerminnholdet, dvs. alt app-en inneholder av grafikk, knapper, lister, osv. Formålet til denne leksjonen er å lære hvordan du
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
Tegneprogram Journeyman Scratch PDF
Tegneprogram Journeyman Scratch PDF Introduksjon I dette prosjektet lager vi et tegneprogram slik at du etterpå kan lage din egen kunst. Du kan tegne med forskjellige farger, bruke viskelær, lage stempler
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
Snurrige figurer. Steg 1: En snurrig figur. Sjekkliste. Introduksjon
Snurrige figurer Nybegynner Scratch Introduksjon Det er ganske enkelt å lage interessante animasjoner i Scratch. Her skal vi se hvordan vi kan flytte og snurre på figurer for å skape spennende mønstre.
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
Start et nytt Scratch-prosjekt. Slett kattefiguren, for eksempel ved å høyreklikke på den og velge slett.
Hvor i All Verden? Del 1 Introduksjon Hvor i All Verden? er et reise- og geografispill hvor man raskest mulig skal fly innom reisemål spredt rundt i Europa. I denne første leksjonen vil vi se på hvordan
PXT: Hermegåsa. Introduksjon. Skrevet av: Felix Bjerke og Tjerand Silde
PXT: Hermegåsa Skrevet av: Felix Bjerke og Tjerand Silde Kurs: Microbit Introduksjon Hermegåsa er et spill der en person er spilleder, og går ut på at han utfører instruksjoner på micro:biten sin som de
Steg 1: Endre bakgrunn og finne figurer
Julekort Skrevet av: Espen Clausen Kurs: Scratch Tema: Blokkbasert, Animasjon Fag: Musikk, Engelsk, Kunst og håndverk Klassetrinn: 1.-4. klasse, 5.-7. klasse Introduksjon Vi skal lage et julekort i Scratch.
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
Norgestur. Introduksjon. Steg 1: Et norgeskart. Sjekkliste. Scratch. Skrevet av: Geir Arne Hjelle
Scratch Norgestur Skrevet av: Geir Arne Hjelle Kurs: Scratch Språk: Norsk bokmål Introduksjon Bli med på en rundreise i Norge! Vi skal lage et spill hvor du styrer et helikopter rundt omkring et kart over
HTML: Legg til lyd og video
HTML: Legg til lyd og video Skrevet av: Oversatt fra Code Club UK (//codeclub.org.uk) Oversatt av: Trude Martinsen Kurs: Web Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi, Norsk Klassetrinn:
Hei verden. Introduksjon. Steg 1: Sette opp Xcode. Skrevet av: Andreas Amundsen
Hei verden Skrevet av: Andreas Amundsen Kurs: Swift Introduksjon Swift er et programmeringsspråk laget av Apple og er etterfølgeren til Objective-C. Med Swift kan du lage apper for ios og OSX. For å gjennomføre
Skilpaddekunst. Introduksjon. Skrevet av: Geir Arne Hjelle
Skilpaddekunst Skrevet av: Geir Arne Hjelle Kurs: Python Tema: Tekstbasert Fag: Matematikk, Programmering, Kunst og håndverk Klassetrinn: 5.-7. klasse, 8.-10. klasse Introduksjon Skilpadder (turtles på
Donkey Kong. Introduksjon. Oversikt over prosjektet. Skrevet av: Geir Arne Hjelle
Donkey Kong Skrevet av: Geir Arne Hjelle Kurs: Scratch Tema: Blokkbasert, Spill, Animasjon Fag: Naturfag, Programmering, Engelsk, Kunst og håndverk Klassetrinn: 5.-7. klasse, 8.-10. klasse Introduksjon
For å sjekke at Python virker som det skal begynner vi med å lage et kjempeenkelt program. Vi vil bare skrive en enkel hilsen på skjermen.
Kuprat Skrevet av: Geir Arne Hjelle Kurs: Python Tema: Tekstbasert Fag: Norsk Klassetrinn: 5.-7. klasse, 8.-10. klasse Introduksjon I dette kurset skal vi introdusere programmeringsspråket Python. Dette
Bygge en kube. Steg 1: Lage en ny mod. Sjekkliste. Introduksjon
Bygge en kube Introduksjon Learn To Mod Introduksjon Vi skal bygge en kube i minecraft og lære endel viktige klosser i Learn To Mod. Oppgaven er forklart i detalj og egner seg som den første oppgaven du
Steg 1: Lag bildedeklarasjon
Bildepresentasjon Skrevet av: Ruben Gjerstad Eide og Kine Gjerstad Eide Kurs: Processing Tema: Tekstbasert, Animasjon Fag: Programmering, Kunst og håndverk Klassetrinn: 8.-10. klasse, Videregående skole
På tide med et nytt spill! I dag skal vi lage tre på rad, hvor spillerne etter tur merker ruter med X eller O inntil en av spillerne får tre på rad.
Tre på rad Skrevet av: Oversatt fra Code Club UK (//codeclub.org.uk Oversatt av: Geir Arne Hjelle Kurs: Python Tema: Tekstbasert, Spill Fag: Programmering Klassetrinn: 8.-10. klasse Introduksjon På tide
PXT: Micro:bit repeater
PXT: Micro:bit repeater Skrevet av: Julie Christina Revdahl Kurs: Microbit Tema: Elektronikk, Blokkbasert, Spill Fag: Programmering, Teknologi Klassetrinn: 5.-7. klasse, 8.-10. klasse, Videregående skole
Husk at du skal ha to vinduer åpne. Det ene er 'Python Shell' og det andre er for å skrive kode i.
Skilpaddeskolen Skrevet av: Oversatt fra Code Club UK (//codeclub.org.uk) Oversatt av: Bjørn Einar Bjartnes Kurs: Python Tema: Tekstbasert Fag: Programmering, Kunst og håndverk Klassetrinn: 8.-10. klasse
Astrokatt. Introduksjon. Steg 1: En flyvende katt. Sjekkliste. Scratch. Skrevet av: Geir Arne Hjelle
Scratch Astrokatt Skrevet av: Geir Arne Hjelle Kurs: Scratch Tema: Blokkbasert, Spill Fag: Kunst og håndverk, Naturfag Klassetrinn: 1.-4. klasse, 5.-7. klasse Språk: Norsk bokmål Introduksjon Katten vår
PXT: Det regnar mat! Introduksjon. Steg 1: Grunnlag. Sjekkliste. Skrevet av: Helene Isnes. Oversatt av: Stein Olav Romslo
PXT: Det regnar mat! Skrevet av: Helene Isnes Oversatt av: Stein Olav Romslo Kurs: Microbit Tema: Elektronikk, Blokkbasert, Spill Fag: Matematikk, Programmering Klassetrinn: 5.-7. klasse, 8.-10. klasse,
Steg 1: Opprette spillskjerm
Ta ballen Skrevet av: Tjerand Silde Kurs: Appinventor Tema: App, Blokkbasert, Spill Fag: Programmering, Teknologi Klassetrinn: 5.-7. klasse, 8.-10. klasse Introduksjon Nå skal vi lage en app som heter
Start med å åpne programmet ved å trykke på ikonet GIMP 2 på skjermen eller under startmenyen.
1 Tegne i GIMP Det er flere måter å tegne på i Gimp. Man kan bruke frihåndstegning, og man kan bruke utvalgsverktøy. Man kan også hente opp bilder som kan manipuleres med ulike verktøy. Åpne Gimp Start
Bygg et Hus. Introduksjon. Steg 1: Prøv selv først. Skrevet av: Geir Arne Hjelle
Bygg et Hus Skrevet av: Geir Arne Hjelle Kurs: Computercraft Tema: Tekstbasert, Minecraft Fag: Programmering, Teknologi Klassetrinn: 5.-7. klasse, 8.-10. klasse, Videregåe skole Introduksjon I denne leksjonen
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
Flagg. Introduksjon. Steg 1: Gå i sirkel. Skrevet av: Sverre Oskar Konestabo og Geir Arne Hjelle
Flagg Skrevet av: Sverre Oskar Konestabo og Geir Arne Hjelle Kurs: Scratch Tema: Blokkbasert, Animasjon Fag: Matematikk, Programmering, Kunst og håndverk Klassetrinn: 1.-4. klasse, 5.-7. klasse, 8.-10.
Bygge en pyramide. Steg 1: Lage en ny mod. Sjekkliste. Introduksjon
Bygge en pyramide Introduksjon Learn To Mod Introduksjon La oss gjøre som Egypterne og bygge en pyramide! Denne oppgaven har ikke så detaljerte instruksjoner som "Bygge en kube", den passer fint som oppgave
Kan micro:biten vår brukes som et termometer? Ja, den har faktisk en temperatursensor!
PXT: Temperatur Skrevet av: Kolbjørn Engeland, Julie Revdahl Kurs: Microbit Tema: Blokkbasert, Elektronikk, Spill Fag: Programmering Klassetrinn: 1.-4. klasse, 5.-7. klasse, 8.-10. klasse Introduksjon
Soloball. Steg 1: En roterende katt. Sjekkliste. Test prosjektet. Introduksjon. Vi begynner med å se på hvordan vi kan få kattefiguren til å rotere.
Soloball Introduksjon Scratch Introduksjon Vi skal nå lære hvordan vi kan lage et enkelt ballspill med Scratch. I soloball skal du styre katten som kontrollerer ballen, slik at ballen ikke går i nettet.
Hvor i All Verden? Del 3. Introduksjon. Steg 0: Forrige gang. Sjekkliste. Skrevet av: Geir Arne Hjelle
Hvor i All Verden? Del 3 Skrevet av: Geir Arne Hjelle Kurs: Scratch Tema: Blokkbasert, Spill Fag: Matematikk, Programmering, Samfunnsfag Klassetrinn: 1.-4. klasse, 5.-7. klasse, 8.-10. klasse Introduksjon
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
Hvor i All Verden? Del 2 Erfaren Scratch PDF
Hvor i All Verden? Del 2 Erfaren Scratch PDF Introduksjon Hvor i All Verden? er et reise- og geografispill hvor man raskest mulig skal fly innom reisemål spredt rundt i Europa. Dette er den andre leksjonen
Lage nettside med squrespace
Lage nettside med squrespace For å lage nettside med squarespace må du ha konto på www.squarespace.com. I browseren skriver du www.squarespace.com og oppreter en konto (hvis du ikke har en fra før): I
Lærerveiledning - Straffespark
Lærerveiledning - Straffespark Skrevet av: Geir Arne Hjelle Kurs: Scratch Tema: Blokkbasert, Spill Fag: Matematikk, Programmering Klassetrinn: 1.-4. klasse, 5.-7. klasse, 8.-10. klasse Om oppgaven I denne
Lærerveiledning - Flagg
Lærerveiledning - Flagg Skrevet av: Geir Arne Hjelle og Stein Olav Romslo Kurs: Scratch Tema: Blokkbasert, Animasjon Fag: Matematikk, Programmering, Kunst og håndverk Klassetrinn: 1.-4. klasse, 5.-7. klasse,
Hash-funksjoner. Introduksjon. Steg 1: Strekkoder. Eksempel. Skrevet av: Martin Strand
Hash-funksjoner Skrevet av: Martin Strand Kurs: Python Tema: Tekstbasert, Kryptografi Fag: Matematikk, Programmering Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon Tidligere har vi sett hvordan
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
Start et nytt PXT-prosjekt, for eksempel ved å gå til makecode.microbit.org (
PXT: Akselerometer Skrevet av: Julie Christina Revdahl Kurs: Microbit Tema: Elektronikk, Blokkbasert Fag: Matematikk, Programmering, Teknologi Klassetrinn: 1.-4. klasse, 5.-7. klasse, 8.-10. klasse Introduksjon
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
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
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