13. Content inladen / Boilerplate/background-img/colors/tickets

WEB
Webdevelopment-II
Les 5 / Week 13

Boilerplate / content inladen / 
background-img / colors / tickets
1 / 24
volgende
Slide 1: Tekstslide
Software Developer [WEB_A]MBOStudiejaar 1

In deze les zitten 24 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 180 min

Onderdelen in deze les

WEB
Webdevelopment-II
Les 5 / Week 13

Boilerplate / content inladen / 
background-img / colors / tickets

Slide 1 - Tekstslide

Week 13 // WEB
Boilerplate / content inladen /
background-img / colors / tickets

Slide 2 - Tekstslide

Welk attribuut geven we mee aan een input-element om het in php te kunnen ophalen?
A
type
B
name
C
value
D
placeholder

Slide 3 - Quizvraag

Leg in je eigen woorden uit waarom je afbeeldingen optimaliseert.

Slide 4 - Open vraag

Waarvoor dient een (HTML)-validator?

Slide 5 - Open vraag

Hoe haal ik vanuit php gegevens op uit een HTML-formulier met name-attribuut 'email' en plaats deze in variabele $email?

Slide 6 - Open vraag

Inhoud van de les
  • Boilerplate
  • Content uit een tekstbestand inladen met PHP in HTML
  • Een achtergrondafbeelding toevoegen
  • Kleurencombinaties kiezen
  • Tickets oplossen

Slide 7 - Tekstslide

HTML 5 Boilerplate
  • Een basisstructuur en reset voor je website. 
  • overschrijft de basisstructuur van je browser
  • Kopieren & plakken naar je root folder van je website
  • https://html5boilerplate.com/


Slide 8 - Tekstslide

Opdracht 13.1: boilerplate installeren
  • We gaan naar de website https://html5boilerplate.com/.
  • Klik op de oranje download (“Download v8.0.0”). Als hier een nieuwere versie staat download je die.
  • Pak het bestand uit en kopieer de gehele map ‘html5-boilerplate_v8.0.0’ naar je ‘htdocs’-map.
  • Alle bestanden in deze map representeren de opbouw van een basis HTML-document. Deze map ga je niet bewerken, maar gebruik je enkel om vandaan in zijn geheel (alle bestanden IN de map) te kopiëren wanneer je een nieuw project maakt.

Slide 9 - Tekstslide

!
Vanaf vandaag gaan wij ook werken vanuit deze basisstructuur. In elk project dat je nieuw aanmaakt start je niet meer met het maken van een mapje ‘css’ en ‘img’, maar in plaats daarvan kopieer je elke keer alle bestanden in de gemaakte map met boilerplate-bestanden.

Slide 10 - Tekstslide

Klik hier op 'Klaar!' als je HTML Boilerplate hebt gedownload en op de juiste plaats hebt gezet.
Klaar!

Slide 11 - Poll

Content ophalen (PHP)
  • We hebben al eens content verstuurd naar een tekstbestand (file_put_contents). 
  • We kunnen ook content ophalen uit een tekstbestand en laten zien aan de gebruiker (file_get_contents) met behulp van PHP

Slide 12 - Tekstslide

File_get_contents()
Leest een bestand als string


Bestandspad geeft de locatie en bestandsnaam aan van het in te laden bestand. 
Andere parameters zijn 'waar starten in document' en bijv. 'maximale lengte'.

Slide 13 - Tekstslide

Opdracht 13.2: file_get_contents gebruiekn

Slide 14 - Tekstslide

File_get_contents werkend gekregen?
Klaar?

Slide 15 - Poll

Afbeelding als achtergrond

Slide 16 - Tekstslide

background-img()
  • Als je naast de afbeelding ook andere elementen (bijv. tekst/links) op dezelfde plaats wilt laten zien
  • Als we de afbeelding als achtergrond laten zien, kunnen we de andere content op de voorgrond van de afbeelding plaatsen.
  • background-img(url('bestandslocatie')) of
  • background(url('bestandslocatie')) voeg je toe in CSS.

Slide 17 - Tekstslide

Voorbeeld background-img()

Slide 18 - Tekstslide

Slide 19 - Tekstslide

Opdracht 13.3: achtergrondafbeelding toevoegen
  • Open je portfolio-website in Sublime tekst.
  • Zoek een afbeelding die je op je portfolio-website wilt gebruiken, bijvoorbeeld met vrienden of familie er op. .
  • Probeer je afbeelding als achtergrond toe te voegen.
  • Laat zien dat hij als achtergrond werkt door er elementen voor te plaatsen, bijvoorbeeld een bijschrift of titel IN je foto.
  • Test je website in de browser.

Slide 20 - Tekstslide

Kleurcombinaties
  • Combinaties van kleuren die bij elkaar passen toevoegen aan je webpagina.
  • www.coolors.co --> Start the generator
  • Gebruik niet ALLE kleuren, maar maak een selectie om je pagina overzichtelijk en zakelijk te houden.
  • Leg accenten (bijv. hover met een kleurtje)

Slide 21 - Tekstslide

Voorbeeld van coolors.co

Slide 22 - Tekstslide

Tickets
Aanpassen van een bestaande website. 
Klant heeft bijv. andere wensen 
Belangrijk om goed code van anderen te kunnen interpreteren!

Slide 23 - Tekstslide

Inleveropdracht 13
Open het moduleboekje van WDV-II en ga aan de slag met de inleveropdracht 13 op pagina 33 ('een ticket oplossen').
Lever deze opdracht in in itslearning --> WDV-II --> Opdrachten --> Week 13 --> Inleveropdracht 13

Slide 24 - Tekstslide