Webteknologier

From CCT - Vidensdeling
Jump to navigation Jump to search

Webteknologier

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

Det ville være godt, hvis forløbet blev gennemlæst.

Kommentarer fra Anders (og kollega Svend): Fint forløb. Afprøvet på en EUX klasse (infotek B), der nemt kunne gå til det. I præsentationen er der et link til w3school.dk skulle være til .com Der er god tid i den første del. Vi blev nødt til at finde på små ekstraopgaver for at udfylde de 100 minutter. De brugte H1-h6 tags, hr tags, link i nye faner osv. Ingen kommentarer til øvelse 2. Øvelse 3 virker lidt tyndt beskrevet, men de 3 små øvelser er fine. Svært at forudse at øvelserne ligger som kommentarer i filerne. Til øvelse 3.2 kunne det være fint med et link til hvor man kan finde flere style kommandoer: Link til DOM.obj.style I øvelse 3.3 er der ikke nogen bestemt udvidelse til øvelsen som eleverne skal lave. Kunne f.eks. lave den så den virker om natten. Eller til at vise hvor mange minutter der er til næste radioavis.


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] LINK TIL HTML-CSS-PRÆSENTATION [2]

  • 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.. [3]

Opgave 2: Webdesign (WE2)

LINK TIL WE2 - Webdesign [4]

  • Tidsforbrug: ca. 120 minutter

Til læreren:

  • I dette modul arbejder eleverne videre med HTML og CSS gennem endnu et worked example (Webdesign-WE2). Eksemplet er bygget op med afsnit/divisions i form af class-attributter.
  • Du kan bede eleverne arbejde med at opbygge en hjemmeside på baggrund af et emne, I har arbejde med. Eller du kan bede dem selv finde et emne på dagen.
  • Nedenstående instruktioner passer til et emne om sociale medier med en 8. klasseselever som målgruppe.

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.

NB! 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 [5] LINK Til JavaScript-PRÆSENTATION [6]

"Til læreren:"

  • Du introducerer til JavaScript og kan anvende præsentationen (JavaScript præsentation).
  • Du instruerer eleverne i at hente tredje WE med JavaScript-eksempler

Eleverne kommer i materialet primært omkring variabler og funktioner

INFO: jQuery

I forløbet om app-udvikling anvendes JavaScript-biblioteket jQuery-Mobile.