WEEK 7 - INFORMATICA

• Informatica
• Middelbare school
• havo
• Leerjaar 4

week 7 les 1

STARTKLAAR

• TELEFOONS WEG IN JOUW ZAKKIE, RECHTS OP TAFEL
  
• JAS UIT, OVER DE STOEL EN OP JOUW PLEK ZITTEN
  
• INDIEN VAN TOEPASSING OP JOUW PLEK ZITTEN
  
• JOUW SCHOOLSPULLEN KLAAR OP TAFEL
  
• CHROMBOOK, LAPTOP NOG GESLOTEN
  
• SCHOOLMAP OPEN + SCHRIJFWAREN KLAAR

DIT JAAR

HEEL HET JAAR PROJECT MATIG WERKEN

• WE BOUWEN EEN WEBAPPLICATIE 
• IEDEREEN WERKT INDIVIDUEEL
• MAAR WE BOUWEN WEL SAMEN AAN 1 WEBAPPLICATIE
• WE GAAN PROBEREN WEBAPP. VAN ANDERE KLASSEN TE HACKEN

DEZE PERIODE

PROJECT MATIG WERKEN

• SCRUM METHODIEK
• INTERACTIE EN USABILITY
• PROGRAMMEREN
• HTML & CSS
• SECURITY
• NETWERK

Voorkennis activeren

welke van de vier zaken uit richtlijn 1 van heuristiek is hier niet goed over nagedacht?

Welke 4 zaken horen bij richtlijn 1 Biedt eenvoudig toegang van de Heuristieken

Wat waren de Heuristieken Richtlijnen ook alweer

Standup meeting

Wat he b je gemaakt

wat ga je vandaag maken

loop je tegen iets aan

DEZE PERIODE

PROJECT MATIG WERKEN

• SCRUM METHODIEK
• INTERACTIE EN USABILITY
• PROGRAMMEREN
• HTML & CSS 
• GIT
• SECURITY
• NETWERK

LEERDOELEN VANDAAG

• De leerling kan uitleggen wat een version control system is
• De leerling kan uitleggen wat Repository, fork en clone is in een version control system
• De leerling kan een aantal van de git basiscommando's uitleggen en deze gebruiken
• De leerling kan de basis structuur van HTML uitleggen en toepassen
• De leerling kan enkele basis HTML tags toepassen

Version Control System

Is een software systeem dat helpt ontwikkelaars hun code en wijzingen in hun code bij te houden. Ook helpt het ontwikkelaars elkaars code samen te voegen als zij aan het zelfde project werken

Version Control System - repository

Een repository is een een opslagruimte voor software. Het is meer dan alleen het opslaan van software. Daar zal je tijdens het ontwikkelen van de app achterkomen.

Lokale repository = is op jouw laptop

Remote repository = online

Version Control System - FORK

Is een kopie van een andere Repository naar jouw eigen Repository. Wijzigingen hierin zijn alleen van toepassing in jouw eigen Repository en niet van waar jij de kopie hebt gemaakt

Version Control System - CLONE

Is een kopie van een Repository die online staat naar jouw eigen Repository op jouw laptop. Wijzigingen hierin zijn van toepassing op Repository lokaal op jouw laptop en kunnen gepushed worden naar de remote repository. 

Version Control System - Basis commando's

Om met een Version Control System te werken  zal je vaak gebruik maken van een aantal commando's via een prompt 

in teams een cheat sheet van de meeste commando's.

Gitlab account maken

Sommige hebben al een account. Zij kunnen straks naar mij komen zodat ik jullie kan toevoegen en jullie het project kunnen forken naar jullie eigen repository.

De andere gaan naar

gitlab.com en maken een account aan. Kom naar mij als je een account hebt aangemaakt. Ik voeg jou dan toe aan het project zodat je die kan forken naar jouw eigen repository

week 7 les 2

STARTKLAAR

• TELEFOONS WEG IN JOUW ZAKKIE, RECHTS OP TAFEL
  
• JAS UIT, OVER DE STOEL EN OP JOUW PLEK ZITTEN
  
• INDIEN VAN TOEPASSING OP JOUW PLEK ZITTEN
  
• JOUW SCHOOLSPULLEN KLAAR OP TAFEL
  
• CHROMBOOK, LAPTOP NOG GESLOTEN
  
• SCHOOLMAP OPEN + SCHRIJFWAREN KLAAR

Voorkennis activeren

Waarvoor gebruik je HTML?

De afkorting HTML staat voor...

wat is de extentie van het bestand als je met HTML werkt?

Waarom is de extentie belangrijk voor de computer

Leerdoelen

De leerling kan uitleggen hoe de basissctrucuur van een html bestand eruit ziet

De leerling kan uitleggen wat een HTML tag is

De leerling kan uitleggen waarom het gebruik van CSS nodig is bij het ontwikkelen van een webpagina

De leerling kan visueel zien wanneer er geen CSS is gebruikt in een webpagina

De leerling weet wat een CSS selector is en weet hoe hij dit kan gebruiken in zijn CSS

HTML & CSS beginnen

HTML & CSS 

Dit is de taal die wij gebruiken om een website te maken

Zoals je woordjes hebt om een zin te maken bij NL, EN, FR enzo heb je als webdesigner dit ook. 

Dit noemen wij HTML en CSS

Bij taal noemen wij het woordjes en zinnen maar bij HTML noemen wij het HTML tags en HTML element

Dit zijn HTML elements ( dus eigenlijk zinnen)

<h1> vandaag ga ik naar school. </h1>

<p> op school ga ik vandaag leren coderen in html. Dit vind ik onwijs leuk, want ik kan mijn <strong> eigen </strong> website maken. en dat vind ik onwijs leuk </p>

Met deze tags kan ik een website bouwen.

Het zijn als het ware blokken/bakstenen die je op elkaar kan zetten om jouw website in te delen

Dit zijn HTML tag (dus eigenlijk woordjes)

<p>

<h1>

<h2>

<strong>

enz.

enz.

Dit zijn HTML elements ( dus eigenlijk zinnen)

<h1> vandaag ga ik naar school. </h1>

<p> op school ga ik vandaag leren coderen in html. Dit vind ik onwijs leuk, want ik kan mijn <strong> eigen </strong> website maken. en dat vind ik onwijs leuk </p>

HTML basis structuur

HTML bestaat voornamelijk uit HTML tags en begint altijd met een basisstructuur

een html tag is bijvoorbeeld 

<html> </html>

<head> </head>

er bestaan heel veel html tags

html basisstructuur

andere informatie en bestanden die html nodig heeft 

HTML & CSS 

Dit is de taal die wij gebruiken om een website te maken

CSS

CSS staat voor cascading style sheet

Met css kunnen wij de website mooi maken

Denk aan welke 

• Lettertype
• Kleur letters
• Grootte van letters
• Achtergrond
• Vorm van een foto
• enz.

Demo nu.nl met en zonder css

Zonder HTML kan je geen CSS gebruiken. Je hebt dus altijd eerst HTML code nodig voor dat je CSS kan gebruiken

Wat is CSS en waarom gebruiken wij CSS 

Wat was de afkorting CSS ook alweer?

Waarom gebruiken wij CSS?

Wat is het verschil tussen HTML & CSS

Welke code is HTML en welke is CSS

CSS zonder HTML ????

 

Is het zelfde als dat je een huis wilt verfen.

Je hebt wel verf maar geen huis.

Dit is ook het geval bij het bouwen van je website.

Geen html die de structuur van jouw website bepaalt, betekend ook geen CSS kunnen gebruiken voor jouw website.

Dit is alleen gemaakt HTML code

Dit is HTML met CSS

Wat is een CSS Selector & Hoe zit een CSS declaratie eruit?

Voor dat je een declaratie doet in CSS code geef je aan welke deel van HTML jouw CSS declaratie toegepast moet worden. Dit noemen wij de selector.

Wat zegt de css code hier op de 

afbeelding? Alle ..... wordt de 

font-size 1.2em toegepast

Doe mee met HTML & CSS

Luister en doe mee wat de docent voor doet.

Het is belanrijk zodat je in ieder geval weet waar en hoe je moet beginnen. De volgende les krijg je mini opdrachten die jij dan zelf moet maken.

Code editor starten

visual code

Map aanmaken

in visual code gaan we een map aanmaken

hier komt onze html bestand

Jouw eerste html

In de map gaan wij een eerste html pagina maken

deze noemen wij mijn-eerste-website.html

basis structuur zetten

kijk en luister naar de docent en doe wat hij ook doet

wij werken vanaf nu allen in bodyy sectie

wij werken vanaf nu allen in body sectie

h1, h2, h3

p, hr, b, br, 

input, image

Ga nu zelf op zoek naar wat HTML tags en probeer ze uit

zelf zoeken op internet naar andere html tags.

hint ga naar w3schools

CSS

De css is de opmaak voor jouw html

we maken een aparte map voor css bestanden

Samenvatting

Samen met leerlingen bespreken