Frontend 
Planning semester 2 (jan - juli )
test pagina
PHP Storm licentie:
486325-19052014
00002CltaUfsS0hP6HaGAM7ogvYSEkqNCh9c8p3ClpIa1utamjBAE9Rz2ANxrv1VkNmi1ub!U1yFTVIZWzKO8WOqf9
Name: Deltion College
1 (jan)
Introductie Frontend Development
- CSS
- Frontend Development (interface, opmaak, functionaliteit)
- algemeen: Frontend, HTML5, CSS3, jQuery, etc.
- mappenstructuur, nette opbouw structuur sites
- Opdrachten (Voor volgende week. Opdracht zelf staan in tab "opdrachten")
- Opdracht 1: Eerste test met CSS selectors
- Opdracht 2: opbouw mappenstructuur apps (zie hier voor structuur)
- Opdracht aanvraag domein / eigen hosting
2 (jan/feb)
structuur opbouw site met meerdere apps en base index die naar alle apps verwijst
- CSS
- stijl direct aan tag (ook met nieuwe HTML5-tags)
- stijl aan class
- stijl aan id
- stijl in tag
- cascading stijl (spatie gescheiden)
- meer elementen met zelfde stijl: 1 stijl (komma gescheiden)
- stijlelementen: kunnen toepassen
- position (absolute, relative), float, clear
- margin, padding, font-size (px, em, ..%),
- width, height, line-height, max-width, max-height
- border ..px solid (border-stijlen), border-radius
- background-color, background-image (positioning)
- kleuren: #FFFF00 = #FF0 = geel = rgb(255,255,0), websafe-colors
- Opdrachten (Voor volgende week. Opdracht zelf staan in tab "opdrachten")
- Opdracht 1 uitbouwen: test met CSS selectors basis
- Opdracht 2: opbouw mappenstructuur apps (zie hier voor structuur)
- Handige sites:
- Can I use..?: Om te kijken welke tags geldig zijn in welke browsers
- HTML5-tags: Overzicht van alle (nieuwe) HTML-5 tags
3 (eind feb. 2017)
4 (begin maart 2017 )
- CSS selectors
- voorbeelden van selectors waarop css elementen: { css.. } wordt toegepast
- p { css.. } alle <p> elementen
- p, .abc { css.. } alle <p> elementen én alle elementen met class "abc"
- p .abc { css.. } alle elementen met class "abc" die in de <p> liggen
- p>.abc { css.. } alle elementen met class "abc" waarvan de parent de <p> is
- div.abc { css.. } alleen <div>'s met class "abc"
- tr:first-child { css.. } elke eerste de <tr> in een table
- tr:last-child td:first-child { css.. } elke eerste de <td> in de laatste <tr> van een table
- p:nth-child(2) { css.. } de tweede <p>
- #efg::first-letter { css.. } elke eerste letter in het element met id "efg" (let op de :: i.p.v. :)
- Zie voor meer selectors op W3Schools
- Opdrachten
- Opdracht 4: Maak met bovenstaande selectors een opbouw van een table en een div
5 (maart 2017) -opdr 6-
Gelikt menu met CSS3 en HTML 5
- Opbouw ul-menu:
- Opbouw van een horizontaal menu met naar beneden uitklappende menu-items
- Door "hierarchische" structuur van een menu
- is het logisch om een <ul> - <li> te gebruiken
- een submenu is een <ul> - <li> structuur in een <li>
- benader het hoofdmenu in CSS bijvoorbeeld met #menu>ul:first-child
- Opdrachten
- Opdracht 5
- gebruik <ul> en CSS
- opbouw horizontaal menu
- opmaak met CSS3 kenmerken
6 (maart 2017) -opdr 6-
4 manieren van menubesturing
- Via nieuwe pagina (opd. 6a)
- Nadeel: elke pagina heeft opnieuw hetzelfde menu e.a.
- Voordeel: simpele besturing
- Voorbeeld: besturing zoals die bijv. via Dreamweaver gemaakt wordt
- Via een iframe (opd. 6b)
- Voordeel: simpele besturing
- Voordeel: elke pagina is een valide HTML-pagina
- Nadeel: elke pagina is een valide HTML-pagina..
- Voorbeeld: bijv. spele.nl (games staan overal in de wereld op andere servers en worden vandaaruit in het iframe geladen)
- Via hidden div (opd. 6c)
- Voordeel: alle code in 1 pagina
- Nadeel: alle code in 1 pagina.. waardoor grote pagina's
- Voorbeeld: aapsite
- Via php-includes (opd. 6d)
- Veel in de praktijk toegepast
- Nadeel: Je kunt niet meer alleen af met HTML
- Voorbeeld (dit is een tekst-file anders kun je de PHP niet lezen..!)
7 (april ) -opdr 7-
Inloggen en modal-dialog box
- Wanneer je inlogt op een site verschijnt er meestal midden op het scherm een dialog-box. Dit is meestal een modal-dialog.
Verschil tussen modal en modaless boxen - Modal-dialog boxen moet je eerst sluiten voordat je verder kunt in die site. Een voorbeeld zijn inlog-schermen: meestal kun je pas verder met andere functionaliteit wanneer je een inlognaam en wachtwoord ingetypt hebt en op verzenden hebt geklikt.
- Modaless-dialog boxen blijven in beeld staan terwijl je andere functies op de site uitvoerd
- In opdracht 7 maak je op basis van een mdal-dialog-box een inlog scherm. Om te laten zien dat het een modal-box is en je verder niets op de site kan doen vooprdat je op inloggen hebt gedrukt, is de achtegrond grijs.