‹Revenir à la recherche

WEEK 4 - INFORMATICA

week 4 les 1
1 / 34
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolhavoLeerjaar 4

Cette leçon contient 34 diapositives, avec quiz interactifs, diapositives de texte et 1 vidéo.

time-iconLa durée de la leçon est: 90 min

Éléments de cette leçon

week 4 les 1

Slide 1 - Diapositive

Cet élément n'a pas d'instructions

STARTKLAAR!
Tellie in zakkie

Slide 2 - Diapositive

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

Slide 3 - Diapositive

Cet élément n'a pas d'instructions

Voorkennis activeren

Slide 4 - Diapositive

Cet élément n'a pas d'instructions

Wat is het verschil tussen Fork en Clone?

Slide 5 - Question ouverte

Cet élément n'a pas d'instructions

hoe zit de basisstructuur van HTML eruit?

Slide 6 - Question ouverte

Cet élément n'a pas d'instructions

Waarom hebben css nodig als wij een website maken?

Slide 7 - Question ouverte

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 10 - Diapositive

Cet élément n'a pas d'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

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

Schermgrote aparaten

Slide 14 - Diapositive

Cet élément n'a pas d'instructions

Pixel

Slide 15 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 16 - Diapositive

Cet élément n'a pas d'instructions

Bootstrap Breakpoint

Slide 17 - Diapositive

Cet élément n'a pas d'instructions

Bootstrap container

Slide 18 - Diapositive

Cet élément n'a pas d'instructions

Bootstrap Grid (row en Column)

Slide 19 - Diapositive

Cet élément n'a pas d'instructions

Bootstrap Grid (row en Column)

Slide 20 - Diapositive

Cet élément n'a pas d'instructions

Bootstrap Grid (row en Column)

Slide 21 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

Slide 23 - Vidéo

Cet élément n'a pas d'instructions

week 4 les 2

Slide 24 - Diapositive

Cet élément n'a pas d'instructions

STARTKLAAR!
Tellie in zakkie

Slide 25 - Diapositive

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

Slide 26 - Diapositive

Cet élément n'a pas d'instructions

Voorkennis activeren

Slide 27 - Diapositive

Cet élément n'a pas d'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

Cet élément n'a pas d'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

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 31 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 33 - Sondage

Cet élément n'a pas d'instructions

Samenvatting
Klassikaal 

Slide 34 - Diapositive

Cet élément n'a pas d'instructions

Plus de leçons comme celle-ci

WEEK 1 - INFORMATICA

- Leçon avec 32 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 5 - INFORMATICA

- Leçon avec 32 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 3 - INFORMATICA

- Leçon avec 27 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 8 - INFORMATICA

- Leçon avec 14 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 2 - INFORMATICA

- Leçon avec 14 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 2 - INFORMATICA

- Leçon avec 14 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

Bootstrap grid

- Leçon avec 20 diapositives
ICTMBOStudiejaar 1

Bootstrap 5 introductie

- Leçon avec 16 diapositives
ICTMBOStudiejaar 1