WEEK 4 - INFORMATICA

week 4 les 1
1 / 34
next
Slide 1: Slide
InformaticaMiddelbare schoolhavoLeerjaar 4

This lesson contains 34 slides, with interactive quizzes, text slides and 1 video.

time-iconLesson duration is: 90 min

Items in this lesson

week 4 les 1

Slide 1 - Slide

This item has no instructions

STARTKLAAR!
Tellie in zakkie

Slide 2 - Slide

Startklaar zitten.
Deze periode
Werken aan het project
- Scrum
- HTML & CSS
- Programmeren
- Version Control System

Slide 3 - Slide

This item has no instructions

Voorkennis activeren

Slide 4 - Slide

This item has no instructions

Wat is het verschil tussen Fork en Clone?

Slide 5 - Open question

This item has no instructions

hoe zit de basisstructuur van HTML eruit?

Slide 6 - Open question

This item has no instructions

Waarom hebben css nodig als wij een website maken?

Slide 7 - Open question

This item has no instructions

LEERDOELEN
  • De leerling is bekend met de css framework bootstrap en kan uitleggen wat dit inhoud
  • De leerling is bekend met bootstrap layout concept  van bootstrap en weet welke zaken/componenten meespelen in het definieren van een layout met bootstrap framework
  • De leerling is bekend met de breakpoints van bootstrap en haar dimensions en weet welke breakpoint voor welke device bedoeld is
  • De leerling neemt kennis met het component container van bootstrap en kan dit toepassen
  • De leerling is bekend met grid van bootstrap en kan dit toepassen a.d.h.v. zijn eerder gemaakte ontwerp



Slide 8 - Slide

This item has no instructions

Framework Bootstrap
Bootstrap is een framework voor HTML, CSS en JavaScript. Het framework heeft een aantal handige functies en extra mogelijkheden, waaronder de mogelijkheid om sneller en gemakkelijker een responsive website te maken. 
 

Slide 9 - Slide

This item has no instructions

Responsive website
De website past zich aan het formaat van het aparaat 

Slide 10 - Slide

This item has no instructions

Wat betekent het als een website responsive is?
A
Dat de website snel laadt.
B
Dat de website zich aanpast aan verschillende schermformaten.
C
Dat de website veel afbeeldingen bevat.
D
Dat de website alleen op mobiele apparaten werkt.

Slide 11 - Quiz

This item has no instructions

Layout Bootstrap
Een aantal zaken en componenten die helpen bij het maken van een layout

Container & Container-fluid
Gebruik van volledig scherm of niet volledig scherm (een kleine deel van beide zijkanten worden niet gebruikt voor layout )

Breakpoints 
bij welke moment van schermgrote moet de layout wijzingen

Grid
De indeling van jouw layout in rij en colom 

Slide 12 - Slide

This item has no instructions

Bootstrap container
Je begint altijd met het maken van een container in jouw HMTL
In de container ga je verder met jouw ontwerp 


Slide 13 - Slide

This item has no instructions

Schermgrote aparaten

Slide 14 - Slide

This item has no instructions

Pixel

Slide 15 - Slide

This item has no instructions

Bootstrap Breakpoint
Wordt gebruikt om een scherm te ontwikelen voor verschillende devices. 

Slide 16 - Slide

This item has no instructions

Bootstrap Breakpoint

Slide 17 - Slide

This item has no instructions

Bootstrap container

Slide 18 - Slide

This item has no instructions

Bootstrap Grid (row en Column)

Slide 19 - Slide

This item has no instructions

Bootstrap Grid (row en Column)

Slide 20 - Slide

This item has no instructions

Bootstrap Grid (row en Column)

Slide 21 - Slide

This item has no instructions

Oefenen met Bootstrap
Deze zorgt dat je boostrap kan gebruiken
Deze zorgt dat je boostrap kan gebruiken
Klik hier en neem stap 1 en 2 door en bekijk het filmpje na deze slide

Slide 22 - Slide

This item has no instructions

Slide 23 - Video

This item has no instructions

week 4 les 2

Slide 24 - Slide

This item has no instructions

STARTKLAAR!
Tellie in zakkie

Slide 25 - Slide

Startklaar zitten.
Deze periode
Werken aan het project
- Scrum
- HTML & CSS
- Programmeren
- Version Control System

Slide 26 - Slide

This item has no instructions

Voorkennis activeren

Slide 27 - Slide

This item has no instructions

Wat is het doel van het grid-systeem in Bootstrap?
A
Het helpt bij het creëren van een responsieve lay-out.
B
Het voegt interactieve animaties toe aan de website.
C
Het voegt decoratieve afbeeldingen toe aan de website.
D
Het verandert de kleuren van de tekst op de website.

Slide 28 - Quiz

This item has no instructions

wat is het verschil tussen container en container-fluid in bootstrap?
A
container is niet fullwidth terwijl container-fluid dit wel is
B
Met container kan ik de layout logica geven
C
Er is geen verschillen tussen de twee
D
Container fluid is alleen bedoeld voor website op tablets

Slide 29 - Quiz

This item has no instructions

LEERDOELEN
  • De leerling is in staat met het gridsysteem van bootstrap een responsive layout indeling te maken aan de hand van zijn schermontwerp



Slide 30 - Slide

This item has no instructions

Container vs contianer-fluid
visualisatie container en container-fluid
klik hier

Slide 31 - Slide

This item has no instructions

Opdracht
  • Neem jouw schermontwerp.
  • Het schermontwerp is bedoeld voor een normale laptop en of pc (dus geen mobiel of iets anders)
  • maak een layout van jouw schermontwerp aan de hand van   het gridsysteem van bootstrap 

Slide 32 - Slide

This item has no instructions

Ik weet nu hoe ik het gridsysteem van bootstrap kan toepassen op mijn eigen schermontwerp
ja
deels
nee

Slide 33 - Poll

This item has no instructions

Samenvatting
Klassikaal 

Slide 34 - Slide

This item has no instructions