WEEK 4 - INFORMATICA

• Informatica
• Middelbare school
• havo
• Leerjaar 4

week 4 les 1

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

Deze periode

Werken aan het project

- Scrum

- HTML & CSS

- Programmeren

- Version Control System

Voorkennis activeren

Wat is het verschil tussen Fork en Clone?

hoe zit de basisstructuur van HTML eruit?

Waarom hebben css nodig als wij een website maken?

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

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. 

 

Responsive website

De website past zich aan het formaat van het aparaat 

Wat betekent het als een website responsive is?

1. Dat de website snel laadt.
2. Dat de website zich aanpast aan verschillende schermformaten.
3. Dat de website veel afbeeldingen bevat.
4. Dat de website alleen op mobiele apparaten werkt.

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 

Bootstrap container

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

In de container ga je verder met jouw ontwerp 

Schermgrote aparaten

Pixel

Bootstrap Breakpoint

Wordt gebruikt om een scherm te ontwikelen voor verschillende devices. 

Bootstrap Breakpoint

Bootstrap container

Bootstrap Grid (row en Column)

Bootstrap Grid (row en Column)

Bootstrap Grid (row en Column)

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

week 4 les 2

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

Deze periode

Werken aan het project

- Scrum

- HTML & CSS

- Programmeren

- Version Control System

Voorkennis activeren

Wat is het doel van het grid-systeem in Bootstrap?

1. Het helpt bij het creëren van een responsieve lay-out.
2. Het voegt interactieve animaties toe aan de website.
3. Het voegt decoratieve afbeeldingen toe aan de website.
4. Het verandert de kleuren van de tekst op de website.

wat is het verschil tussen container en container-fluid in bootstrap?

1. container is niet fullwidth terwijl container-fluid dit wel is
2. Met container kan ik de layout logica geven
3. Er is geen verschillen tussen de twee
4. Container fluid is alleen bedoeld voor website op tablets

LEERDOELEN

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

Container vs contianer-fluid

visualisatie container en container-fluid

klik hier

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 

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

ja

deels

nee

Samenvatting

Klassikaal