Kort om baggrund for kurset, aktører, kodning.dk

Relaterede dokumenter
PHP Quick Teknisk Ordbog

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på

Denne artikel er til dem der ønsker at vide mere om hvad CSS er og hvad CSS kan bruges til hvad angår WWW.

Gode links og ressourcer

IKT og Videnrepræsentationer

Internet vs WWW. Internettet er IKKE det samme som www. Internettet Er et netværk af computere Gør det muligt af dele information

Pædagogisk konsulent v/cfu, Center for Skole & Læring, UCSJ for områderne: Digitalisering, programmering & robotteknologi

Procesbeskrivelse - Webprogrammering

Kom godt i gang med kodning resumé

Dokumentation. Karen-Louise Fejerskov

Lav dine egne hjemmesider/websider

Vejledning til. LearnSpace

Undervisningsbeskrivelse

xgalleri Mulige filtyper Installation web-version

Tillykke Med Fødselsdagen

GRAFISK WORKFLOW WEBSITE - CHOCOADDICT

Web sider. Introduktion: Har du nogensinde spekuleret over, hvordan det verdesomspændende internet virker og hvordan man snakker med det?

Vejledning. Indhold. Side 1

ALGORITMER OG DATA SOM BAGGRUND FOR FORUDSIGELSER 8. KLASSE. Udfordring

grafisk workflow OPGAVE: EMBRACE-IT WEBSITE

Hjemmesider. Teknologiforståelse som fag - Mellemtrin (5. klasse) Forløb 3 Lektion 1-10

Kreativ programmering

GRAFISK PRODUKTION PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE

Webudvikleruddannelsen

Webteknologi evalueringsopgave Vinter Niels Sundstrup

Naja Schlüter Roskilde Tekniske Gymnasium 26/ Interessentanalyse

Sabine Puk Sørensen Svendeprøve portfolio

Vejledning til opbygning af hjemmesider

Undervisningsbeskrivelse

Tech College Aalborg. ASP.NET Hjemmeside. Projekt Smart Zenior Home - Guide til ASP.NET hjemmeside med Visual Studio

Workshop om digitale fortællinger og multimodal formidling

Grafisk Workflow. Website til European Blues Challenge

Undervisningsbeskrivelse

Den digitale Underviser. DOF deltagernet

Undervisningsbeskrivelse

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16

ABCD- E-Læring TEKNISKE BEGREBER

GRAFISK WORKFLOW. 1 Grafisk workflow

Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN

Overvågningskamera. ~Af Svend, Valdemar og Frederik~

Startvejledning. Søg Find Websteder, Personer eller Filer. Opret et websted eller nyhedsindlæg

Afsluttende Projekt - Kom/IT

Redaktørmanual TYPO3 Version 6.2

grafisk design Se webappen på din mobil

Mediator 9. Materiale til elever. Version: August 2012

Om styles / typografier / typografiark / stylesheets

Dokumentering af umbraco artikeleksport:

VELKOMMEN 3. KOM GODT I GANG 4 Log ind 5 Kontrolpanel 6 Tilpas profil 7 Tilknyt hold 8 Tilknyt fag 9

Børnenes Egen U-landskalender: Lav en digital lågekalender

Installationsvejledning til Aktiv Virk-top

Serversideprogrammering, CMS og eshop. Dag 1: Introduktion og serverside programmering Niels Østergaard

Digital Print Room Implementering og tilretning. 11. Sep TMC Plot-SIG

POWERPOINT, ONENOTE OG OUTLOOK

Cecilie Maria Nielsen, Mathias Fornitz Eriksen og Martin Arnetoft klasse

Informations Teknologi Indholdsfortegnelse

6 Ugers Digital Markedsførings Uddannelse. Online Marketing SEO Præsentation Anders Sevelsted Bigum&Co Amagerbrogade

FORSTÅELSE FOR GRAFISK PRODUKTION

Se hjemmesiden på:

Brainstorm Hjemmeside Grafisk interface med billeder af computer dele billederen skal så kunne klikkes og få information omkring delene,

portfolio GRAFISK WORKFLOW

BRUGERVEJLEDNING TYPO3 CMS Nyhedsbrev modul

Undervisningsbeskrivelse

Webside score ezee2shop.com

IT SUMMER CAMP Dato for arr. og. dato for seneste tilmelding. bliver offentliggjort i maj. Ubuntu-Linux, Web-Server, Anvendte Web-Teknologier

Undervisnings plan til Programmering

ITSprint. Sådan printer du vha. print.supportcenter.dk ITS

Undervisningsbeskrivelse

Webside score windowsrepublic.com.au

Start af nyt schematic projekt i Quartus II

PPHansen.dk. Introduktion til websiden. En fag præsentationsside af Palle Preben Hansen

Undervisningsbeskrivelse

Webside score pre-r.com

Læseplan for Teknologi og innovation som dimension og fag i Rødovres skoler

Webside score printersupportnu mbercare.blogspot.com

Undervisningsmateriale - Rapport

Grafisk produktion & workflow

Webside score assin.co

Kom godt i gang med Fable-robotten

April Hjemmesider overblik over funktionalitet

Grafisk design. Ide. Designprocess. Målgruppe

Velkommen til MODx kursus

Undervisningsbeskrivelse

Implementeringsvejledning

Udarbejdet af CFU Absalon

Mini Afsluttende Projekt

AKTIV LÆRING. Online portal der, sammen med et antal skilte med QR-koder, forener leg, læring og bevægelse

Nvu hjemmesider hurtigt og let

Brugervejledning til Design Manager Version 1.02

Webside score downvid.co

Scratch. - introduktionshæfte

Webside score klearvue.com

Undervisningsbeskrivelse

portal.microsoftonline.com

TEKNOLOGI OG INNOVATION I RØDOVRES SKOLER - Hvad betyder det for dit barn?

Informatik C robotter

Dette dokument indeholder links til hjemmesider, der forvaltes af tredjepart.

Integration af online tilbud

Transkript:

præsentation 1

2

Kort om baggrund for kurset, aktører, kodning.dk 3

Kort rammesætning hvorfor er det vigtigt med fokus på programmering også i en skolekontekst særligt slide 7 er værd at dykke ned i og tale om bl.a. Internet of things og de perspektiver, det tegner ikke bare for et fremtidigt arbejdsliv men også for det at være borger og menneske i en digitaliseret og teknologiseret verden, da det åbner op for et dannelsesperspektiv. 4

5

6

7

Hvordan er status p.t. i folkeskolen Eleven kan designe og gennemføre undersøgelser vedrørende elektronisk og digital styring Eleven har viden om elektroniske kredsløb, simpel programmering og transmission af data 8

1) Fagdidaktisk tilgang 2) Kompetencetænkning 3) Erhvervspolitisk vinkel ELLER dannelsestænkning 4) Pædagogisk vinkel 9

Kort om Blooms taksonomi hvad er progressionstanken? 10

Gennemgang af SOLO- taksonomien 11

Gennemgang af den computationelle tænker linkes til slide 9, kort 2 12

13

Dette + de efterfølgende slides gennemgås overordnet hvad er progressionstænkningen, hvilke områder fokuseres på hvornår, hvad er elev- og lærerrollen i de forskellige faser, osv. 14

15

16

17

18

19

20

21

22

23

Der kan vurderes formativt og summativt dette slide handler om, hvordan man formativt kan evaluere, mens de efterfølgende handler om kriterier for summativ vurdering 24

Se vedlagte ressource om vurderingskriterier, der uddyber de følgende slides 25

26

27

28

29

30

31

8 opgavetyper, der på forskellig vis arbejder med bevægelsen fra blok til tekst (den sidste kan dog sagtens bruges inden for det samme program) 32

At lave det samme program i forskellige sprog 33

Hvis kursisterne har været på kursus 1, gennemgås slidet bare ellers er det en god idé at lade kursisterne lave programmet i Scratch 34

Afprøv logo Afprøv touchdevelop Gå til CodeCombat 35

Denne øvelse bygger også videre på kursus 1 hvis kursisterne ikke har været på dette, skal flowcharts + opgaven om at designe en lille quiz flettes ind her, inden opgaverne på slidet laves. 36

Brug ca 20-30 minutter på CodeCombat introducér Hour of Code, hvis ikke de kender det i forvejen og anvend den valgte tutorial til at tale om automatisering af kommandoer. 37

HTML (HyperText Mark- up Language): er det computersprog (kode), som genererer indholdet og strukturen af en webside. Indholdet af en hjemmeside gemmes i HTML format på webservere. CSS (Cascading Style Sheets): tilføjer formateringsinformationer til HTML ens indhold og struktur, og dermed kan designere og udviklere specificere præcist, hvordan sidens indhold skal vises i webbrowseren på en computer tablet, smartphone og printer. JavaScript: er et programmeringssprog, som kan omsættes direkte i webbrowseren. Dermed kan brugeren interagere direkte med siden fra sin computer frem for at interaktionen håndteres via webserveren, Den web- baserede version af Office 365 afhænger fx i høj grad af JavaScript. 38

Lad kursisterne prøve at gennemskue, hvor sidens indhold kommer fra i koden. Bed dem lægge mærke til, hvilken effekt nogle af HTML tags ene (det, som står i <.>, fx <h1> og <p>) har på strukturen for teksten. Bed dem også lægge mærke til, at tags ene kommer parvist med et åbne- og et lukke- tag, fx: <html> og </html> (definerer hele siden som html) <head> og </head> (informationer om siden, fx tegnkodning og titel) <body> og </body> (sidens indhold) <h1> og </h1> (angiver rubrikken/overskriften) <p> og </p> (omkranser paragrafferne/brødteksten) Lad dem sammenligne linket på websiden med dens kode. Placeringen af <a> og </a> indsætter linket det rigtige sted i brødteksten og koden inde mellem <a> og </a> angiver den URL, som linket peger på. Lad dem også kigge på koden for billedet. Billedets URL er efter <img> tagget. Gør dem opmærksom på, at her bruges IKKE et lukke- tag, hvis ikke de selv opdager det.. 39

Vis hvordan 40

Demonstrér, hvordan X- Ray Goggles virker eller vis videoen. Lad derefter kursisterne selv prøve at lave en remixet hjemmeside, enten alene eller par- /gruppevis. Lad dem fremvise deres resultater og tal om, hvor nemt det er at lave en fake- side, og hvor vigtigt det er at kunne gennemskue, hvem der er afsender. 41

Se videoen og brug materialet fra bogen Lær at kode 2, Alinea, Mads Remvig og Claire Lotriet. Har du ikke bogen, kan du finde de vigtigste kommandoer og begynderinstruktioner her, som du kan lade kursisterne bruge: http://digipippi.dk/html- for- begyndere- 1/ http://www.simplehtmlguide.com/cheatsheet.php http://www.jake.dk/programmering/html/gamlehjemmesider/jake.dk_old/net_tips/n et_tips_html.html http://www.nemprogrammering.dk/tutorials/html/html_guide.php Kursisterne kan stadig bruge programmet Thimble det er nemt både at arbejde i og publicere de færdige sider fra. Du finder programmet her: https://thimble.mozilla.org/en- US/ 42

43