HTML Module 4 / Les 4.7 t.b.v. studenten MBO Rijnland Leiden Opleiding applicatie en media.

1. Bootstrap 7
HTML module 44.7 Bootstrap 7

2. HTML module 44.7 Bootstrap 7
Terugblik

3. HTML module 44.7 Bootstrap 7
Vindennn optimaliseren
voor Tablet!

4. HTML module 44.7 Bootstrap 7
Huidige situatie

5. HTML module 44.7 Bootstrap 7
Nieuwe situatie

6. HTML module 44.7 Bootstrap 7
Hoe codeer je dit ?
Huidige code!

7. HTML module 44.7 Bootstrap 7
Hoe moet de code
aangepast worden?

8. HTML module 44.7 Bootstrap 7
Nieuwe Code?
Verwijderd bij section: col-md-12 (was overbodig)
Toegevoegd bij article de classes:
• col-12 (small devices)
• col-md-2 wordt col-md-5
• col-xl-2 (laptops)
• Shadow

9. HTML module 44.7 Bootstrap 7
Huidige situatie

10. HTML module 44.7 Bootstrap 7
Nieuwe situatie

11. HTML module 44.7 Bootstrap 7
Hoe codeer je dit ?
Huidige code!

12. HTML module 44.7 Bootstrap 7
Hoe moet de code
aangepast worden?

13. HTML module 44.7 Bootstrap 7
Nieuwe Code?
Verwijderd bij section: col-md-12 (was overbodig)
Toegevoegd bij article de classes:
• col-12 (small devices)
• col-md-2 wordt col-md-5
• col-xl-3 (laptops)
• Shadow
• I.p.v. 2 sections 1 section voor cards gemaakt

14. HTML module 44.7 Bootstrap 7
Nieuwe Stof

15. HTML module 44.7 Bootstrap 7
Testen en optimaliseren
Als het prototype van de webapplicatie gereed
ga je het geheel testen en daarna optimaliseren.
Optimaliseren betekend aanpassen van de code.
Hier gebruik je een testplan voor!

16. HTML module 44.7 Bootstrap 7
Testvraag Volgens de functionele beschrijving
moet het logo navigeren naar de index
pagina.
Uitkomst test Geen navigatie op logo
Oplossing a href om image van logo plaatsen die
verwijst naar index.html.
Opgelost door: M. van Ginkel
Aangepast in de code

17. HTML module 44.7 Bootstrap 7
Testvraag Is de look and feel van het opdracht plaatsen
formulier op alle formaten laptop en monitor
schermen hetzelfde?
Uitkomst test Dit is niet het geval de categorie input is
op veel schermen te breed voor het formulier.
Huidige code

18. HTML module 44.7 Bootstrap 7
Testvraag Is de look and feel van het opdracht plaatsen
formulier op alle formaten laptop en monitor
schermen hetzelfde?
Uitkomst test Dit is niet het geval de categorie input is
op veel schermen te breed voor het formulier.
Oplossing Voeg aan de select de class col-12 toe.
Opgelost door: M. van Ginkel

19. HTML module 44.7 Bootstrap 7
Testvraag Is de navigatie op een telefoon naar
tevredenheid van de opdrachtgever?
Uitkomst test Nee als je over de pagina scrolt blijft de
button staan maar als je er dan op klikt dan
zie je de navigatie niet op de plek waar je je
dan bevindt. Ook de look and feel is niet mooi.

20. HTML module 44.7 Bootstrap 7
Testvraag Is de navigatie op een telefoon naar tevredenheid van de opdrachtgever?
Uitkomst test Nee als je over de pagina scrolt blijft de button staan maar als je er dan op
klikt dan zie je de navigatie niet op de plek waar je je dan bevindt. Ook de
look and feel is niet mooi.
In overleg met de opdrachtgever
ontwerp gemaakt.
Na klik op button wordt het
hele scherm gevuld met de
navigatie waar je je ook bevind

21. HTML module 44.7 Bootstrap 7
Oplossing Door gebruik te maken van het id van de div
met id navigatie stijl aan te brengen zodat
de navigatie fixed en over de volledige
breedte en hoogte van het scherm te plaatsen
daarnaast stijl aan de li aanbrengen zoals
shadow. Ik gebruik hier de @media indeling
van bootstrap voor.
Opgelost door:
Huidige html code wordt geen aanpassingen aan toegevoegd.

22. HTML module 44.7 Bootstrap 7
Oplossing Door gebruik te maken van het id van de div met id navigatie stijl aan te brengen
zodat de navigatie fixed en over de volledige breedte en hoogte van het scherm te
plaatsen daarnaast stijl aan de li aanbrengen zoals shadow. Ik gebruik hier de
@media indeling van bootstrap voor. Belangrijk is om z-index te gebruiken voor de
button en de navigatie.
Opgelost
door:
M. van Ginkel
Toegevoegde css code.

23. HTML module 44.6 Bootstrap 6
Opdracht!
De opdracht is het verder optimaliseren van de webapplicatie
aan de hand van de testvragen die op de volgende pagina’s zijn
uitgewerkt.
Los de problemen op en plaats de oplossingen in
het betreffende vak. Maak een word document met tabellen
en gebruik deze voor het plaatsen van de oplossing die je
hebt gekozen.
Pas de code ook aan zodat het naar behoren van de opdrachtgever
werkt.
Lever de webapplicatie en het word document als zip bestand
in voor a.s. dinsdag om 18.00 uur in opdracht 4.7.
Let op voor de eindcase heb je deze webapplicatie nodig we
gaan deze n.l. uitbreiden.

24. HTML module 44.7 Bootstrap 7
Testvraag Volgens de functionele beschrijving
moeten bij het formulier voor het plaatsen
van een opdracht de volgende gegevens
ingevuld worden: Categorie, bedrijfsnaam,
opdracht, opdrachtomschrijving, omvang in
uren, uurtarief, datum oplevering en
contactpersoon.
Categorie Bigscreen
Uitkomst test
Oplossing
Opgelost door:
Test/Optimalisatie vraag 1

25. HTML module 44.7 Bootstrap 7
Test/Optimalisatie vraag 2
Testvraag Volgens de functionele beschrijving
moet de de koptekst bij opdrachten per
categorie en trending jobs op de telefoon
Als 1 regel zichtbaar zijn en een kleiner
formaat hebben dan op een groot scherm.
Categorie Mobile
Uitkomst test
Oplossing
Opgelost door:

26. HTML module 44.7 Bootstrap 7
Test/Optimalisatie vraag 3
Testvraag Verzin zelf een testvraag kijk naar de site
en wat vind jezelf beter kunnen
Categorie mobile/bigscreen/overige
Uitkomst test
Oplossing
Opgelost door:

27. HTML module 44.7 Bootstrap 7
Test/Optimalisatie vraag 4
Testvraag Verzin zelf een testvraag kijk naar de site
en wat vind jezelf beter kunnen
Categorie mobile/bigscreen/overige
Uitkomst test
Oplossing
Opgelost door:

28. HTML module 44.7 Bootstrap 7
Test/Optimalisatie vraag 5
Testvraag De opdrachtgever wil graag dat er in de code
commentaar geplaatst word zodat een andere
developer het ook begrijpt.
Categorie mobile/bigscreen/overige
Uitkomst test
Oplossing
Opgelost door: