Webteknologier

Webteknologier

Forløbet behandler det kernefaglige område ???

Eleverne introduceres kort til hhv. HTML, CSS og JavaScript og lærer strukturerne samt finder ud af, hvordan de kan lære mere.

Status og planer

Der eksisterer tre pakker med worked examples: Intro (html og css), webdesign (html og css) samt JavaScript (to html-dokumenter med simple eksempler).

Forløbet er gennemløbet med succes i en 1.g hhx-klasse.

Formål

Introduktion til HTML, CSS og JavaScript Hovedformålet med undervisningsforløbet er at lære eleverne principper og strukturer i sprogene således at de bliver i stand til at videreudvikle deres kompetencer samt nemmere at forstå forløbene App-udvikling og Webshop.

Forløbet er I særdeleshed ‘hands on’, men ‘hands on’-delen bør ikke stå alene.

Forløbet er fastsat til 6 timer og det er derfor relativt overfladisk.

Mere om HTML: https://www.w3schools.com/html/ Mere om CSS: https://www.w3schools.com/css/ Mere om JavaScript: https://www.w3schools.com/js/

Læreplansmål

Fagligt mål

• Designe et it-system med brugerorienterede teknikker

Kernefaglige områder

• Internettets teknologi
• Programmering
  • Funktioner
  • Variable, sekvenser, løkker og forgreninger

Indhold

• HTML og CSS (Præsentation)
• JavaScript (Præsentation)

Forudsætninger, aktiviteter og materialer

Forløbet forudsætter, at eleverne har hentet en editor, hvortil de importerer forløbets worked examples"

Eksempler på gratis editorer:

• Komodo-edit
• NetBeans

Efter Opgave 1 er det en fordel, hvis eleverne på forhånd har arbejdet med et emne, som de kan bygge deres hjemmeside op omkring. Et emne kunne være "Min identitet på sociale medier". Eleverne kan også selv vælge et emne på dagen.

Oversigt - Introduktion til HTML, CSS og JavaScript

Lektion	Indhold	Opgaver
1-2	Oplæg m. Præsentation: Hvad er HTML og CSS? (20 minutter)	Opgave 1 (HTML WE1) (100 minutter)
3-4	Eleverne arbejder med Opgave 2	Opgave 2 (Webdesign WE2) (120 min)
5-6	Oplæg m. Præsentation: Hvad er JavaScript (20 min)	Opgave 3 (JavaScript WE3) (100)

Opgaver

Opgave 1: Intro HTML og CSS (WE1)

LINK TIL WE1 - HTML-CSS [1]

• Tidsforbrug del 1: ca. 20 minutter
• Tidsforbrug del 2: ca. 100 minutter

Til læreren:

Del 1: Introduktion til HTML

Du introducerer til HTML, hvor du bl.a. kommer ind på, at HTML er byggestenen til World wide web (præsentation HTML og CSS). Endelig kommer du ind på CSS. Denne del kan du også vælge at gemme denne til eleverne har arbejdet lidt med HTML.

Du instruerer eleverne i at hente første WE til deres editor.

Del 2: HTML-WE1 - hands-on

Til eleverne:

Trin 1

• Når filerne er lagt ind, kan du begynde at undersøge dem nærmere. Prøv fx at læse, hvad der står i koderne.
• Find start-tag og slut-tag for følgende elementer: head, body, h1  -undersøg, hvordan ser de forskellige tags ud?
• Prøv at ændre i title-elementet (i HTML-filen). Dvs. ændre i den tekst, der står mellem start-tag og slut-tag.

Eksempel: <title>Det, der står her, skal du ændre</title>

• Få resultatet vist i browseren (denne metode kan variere alt efter editor)

  Trin 2

• Prøv at ændre i h1 og h2 i HTML-dokumentet

Eksempel: <'h1>Det, der står her, skal du ændre

• Få resultatet vist i browseren (denne metode kan variere alt efter editor)

  Trin 3

• Find en hjemmeside, du vil linke til og prøv at ændre i linket, som nu fører til facebook. 
• Få resultatet vist i browseren (denne metode kan variere alt efter editor)

  Trin 4

• Find et billede fx på Google og find linket til billedet. Prøv at ændre linket, som nu linker til et facebook-logo.
• Få resultatet vist i browseren (denne metode kan variere alt efter editor)

  Ekstra Når du er færdig med disse fire trin, kan du hvis der er mere tid, åbne CSS-filen (style.css) og forsøge at ændre på farverne. Alternativt kan du lege lidt med koderne: Du kan ændre i teksten eller søge efter nye HTML-koder, du kan sætte ind - prøv fx med en YouTube-video.. [2]

Opgave 2: Webdesign (WE2)

LINK TIL WE2 - Webdesign [3]

• Tidsforbrug: ca. 120 minutter

Til læreren:

Hands-on: Webdesign I dette modul arbejder eleverne videre med HTML og CSS gennem HTML-WE2, som er et udvidet eksempel. Eksemplet er bygget op med afsnit i form af class-attributter og anvender % i modsætning til introduktionseksemplet, hvor der blev anvendt pixels. Det er en god idé at tydeliggøre denne forskel for eleverne.

Til eleverne:

• Lav en hjemmeside som omhandler sociale medier.
• Målgruppen er folkeskoleelever i 8. klasse.
• Find eller lav billeder og grafik til at gøre den bedre.
• Lav minimum fire sider, som man kan klikke på i menuen. Som den ser ud nu, kommer man til

Forsiden (index.html) hver gang, man klikker på et menupunkt - hvordan tilføjer man nye sider?

Opgave 3: JavaScript (WE3)

LINK TIL WE3 - JavaScript [4]

"Til læreren:" Du introducerer til JavaScript og kan anvende præsentationen (JavaScript præsentation).

Spørg eleverne:

Har I hørt om JavaScript. Brug lidt tid på forklare forskellen på Java og JavaScript.

Om JavaScript: JavaScript står for interaktionen med brugeren og kan høre den ellers statiske HTML dynamisk. I HTML-koden placeres JavaScript fx i script-elementet: <script> … </script> - Med andre ord kan du finde JavaScript-kode ved at kigge efter script-elementet.

I eksemplerne skal du lære følgende at kende: Variabel - skuffe, man kan gemme noget i. Funktioner -

"Til eleverne:"

INFO: jQuery

I forløbet App-udvikling anvendes JavaScript-biblioteket jQuery-Mobile. jQuery-mobile implementeres i koden ved at indsætte: