WEEK 5 - INFORMATICA

• Informatica
• Middelbare school
• havo
• Leerjaar 4

Week 5 les 1

Startklaar zitten.

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

Voorkennis activeren

Wat is een breakpoint in termen van webontwikkeling?

Wat is een responsive website?

Wat is het verschil tussen de css classe container en container-fluid van bootstrap?

LEERDOELEN

• De leerling is in staat om een lyaout dusdanig met bootstrap css in te delen aan de hand van zijn schermontwerp 
• De leerling is in staat om woordjes die hij/zij niet begrijp d.m.v. generatieve AI specefiek begrijpbaar te maken  voor hem /haar

Layout maken voor een grote scherm

Jullie gaan een layout maken voor een grote scherm a.d.h.v. jouw schermontwerp van de vorige periode

Dus niet voor mobile telefoon of tablet

Stap 1 - Layout Bootstrap

Ga aan de slag met jouw layout a.d.h.v. jouw ontwerp van vorige periode

Maar eerst  (klassikaal stap 1)

1. Clone het project vanuit jouw repository, hoe deed je dat ook alweer
2. Zorg ervoor dat het project compleet is door gebruik van composer update  via de command line
3. Start jouw apache webserver via de xampp controle panel
4. Maak een nieuwe blade pagina aan in de map resources->views, de docent zal aangeven hoe je deze blade gaan noemen
5. ALs jij de blade hebt aangemaakt a.d.h.v. de naam die de docent heeft gegeven aan jouw blade, ga je verder met het indelen van jouw schermontwerp a.d.h.v. het gridsysteem (teken dit eerst op papier)

als je de volgende slideds doorneemt dan krijg je een stuk herhaling van de vorige les. 

Stap 2 - Layout Bootstrap

Ga aan de slag met jouw layout a.d.h.v. jouw ontwerp van vorige periode

Maar eerst  (klassikaal stap 2)

1. De blade wordt voorzien van de basisstructuur van HTML
   
2. zorg ervoor dat de bootstrap is toegevoegd aan jouw [jouwpagina].blade pagina, dit doe je door het volgende te doen

• klik hier
• kopieer dit door hier op te klikken en plak het in jouw head van jouw blade

Voorbeeld gebruik van grid

Klassikaal voorbeeld geven

Als je de volgende slideds doorneemt dan krijg je een stuk herhaling van de vorige les. Dit kan jouw helpen bij het maken van de layout 

Bootstrap Grid (row en Column)

Bootstrap Breakpoint

Wordt gebruikt om een scherm te ontwikelen voor verschillende devices. 

Bootstrap Breakpoint

Bootstrap container

Je begint altijd met het maken van een container in jouw HMTL

In de container ga je verder met jouw ontwerp 

Bootstrap container

Bootstrap Grid (row en Column)

Bootstrap Grid (row en Column)

Week 5 les 2

Startklaar zitten.

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

Voorkennis activeren

Wat is de functie van het attribuut position in CSS?

1. De achtergrondkleur van een element aanpassen
2. De lettergrootte van een tekst aanpassen
3. De positie van een element bepalen op de webpagina
4. De grootte van een afbeelding aanpassen

Uit hoeveel kolommen bestaat het gridsysteem van bootstrap

1. 8
2. 12
3. 20
4. 10

Ik wil gebruik maken van bootstrap welke antwoord is juist

1. In head dien je een link css te gebruiken die verwijst naar bootstrap.
2. Je dient bootstrap te downloaden en dit toe te voegen in jouw html onder head met de html tag link
3. bootstrap zit automatisch al in html
4. bootstrap kan je alleen gebruiken als je lid bent van de bootstrap community

Leerdoelen

• De leerling heeft kennis genomen van de bootstrap bibliotheek
• De leerling kan bladeren door de bootstrap bibliotheek
• De leerling kan verschillende componenten in zijn schermontwerp toepassen

Bootstrap componenten

• In bootstrap heb je veel componenten
• Bootstrap heeft een bibliotheek met veel componenten
• Elke componenten is met voorbeeld in de bibliotheek

Bootstrap componenten

Klik hier voor de bibliotheek

Blader door de bibliotheek, bekijk voorbeelden en ga ermee aan de slag

Verder werken aan schermontwerp

Scrum process uitvoeren

Samenvatting

Klasikaal doornemen

Ik heb kennis genomen van de bootstrap bibliotheek

Ja

Deels

Nee

Ik kan zelf goed door de bibliotheek van bootstrap bladeren

Ja

Deels

Nee

Ik kan bootstrap componenten gebruiken aan de hand van de bootstrap bibliotheek

Ja

Deels

Nee