| Eis? | Keuze + verantwoording |
|---|---|
| Framework + gridsysteem + responsive navigatiebalk |
HTML5 Boilerplate + 996 Grid + Eigen responsieve navigtie Ik heb voor HTML5 Boilerplate gekozen omdat het zonder al te veel voorgekauwde code komt. Een te uitgebreid framework zou er voor zorgen dat ik of wel zeer veel CSS moet aanpassen of overschrijven om de layout te krijgen zoals ik die wil. Als gridsysteem heb ik voor 996 Grid (een uitbreiding op 960 grid) gekozen. De redenen hiervoor zijn dat het makkelijk is voor mij om hier mee te werken (duidelijke class namen zoals grid_10), niet te groot is (grid tot 12 breed voor maximum breedte) en omdat de maximum breedte iets breder is als 960 en beter oogt op grotere schermen. De responsieve navigatiebalk heb ik zelf geschreven met jQuery, dit leek mij persoonlijk sneller dan een goede te zoeken die aan mijn verwachtingen voldeed, deze te ontleden en te implementeren. |
| Naam lifestylestite |
Fair Lifestyle: Lifestyle zodat het zeer duidelijk is dat het over een lifestyle site gaat (en dus ook beter zou scoren in zoekresultaten). Fair staat voor eerlijk en is (bewust) interpreteerbaar. Eerlijk als in eerlijk tegenover jezelf en tegenover andere. Een eerlijke ecologische voetafdruk, eerlijk in relaties, eerlijk tegenover jezelf, … Het doelpubliek komt (deels) overeen met het doelpubliek van onder andere Flair. F(l)air, of dit bewust is laat ik over aan ieders zijn of haar verbeelding. |
| Kleuren lifestylesite |
Het roos/paars is een zeer vrouwelijke kleur en spreekt vooral (jonge) vrouwen aan (het doelpubliek). Het groen is een complementaire/tegenovergestelde kleur van het roos/paars en heeft een wiskundige verhouding waardoor het mooi bij elkaar past. Overigens straalt groen het fair gedeelte uit van de naam. Groen wordt geassocieerd met goed / ecologisch / eerlijk / ... |
| Logo lifestylesite |
Het logo is een hart, een hart word ook psychologisch gelinkt met onder andere relaties, leven / life (van LIFEstyle) en een hart hebben word ook geassocieerd met eerlijk (fair) zijn. Het logo is bovendien ook een svg en dus zeer weinig bytes en zeer schaalbaar. |
| Aanwezig? | Ja/nee | Link |
|---|---|---|
| Homepage | Ja | Home |
| Thema 1 | Ja | Relaties |
| Thema 2 | Ja | Recept van de week |
| Thema 3 | Ja | Houd je fit |
| Thema 4 | Ja | 3D shoppen |
| Contactpagina met invoercontrole | Ja | Contact |
| PHP-afhandeling mét CSS-opmaak | Ja | Contact *Na verzenden formulier op contact pagina |
| Checklistpagina | Ja | Checklist |
| Eis? | Waar geïmplementeerd? |
|---|---|
| 1 korte video of 1 kort audiofragment zelf gemaakt | Contact pagina |
| transcriptie bij audio/video | Contact pagina |
| 1 x transition | Navigatiebalk |
| 1 x transform | Asides op meeste paginas. Bijvoorbeeld op de home pagina |
| 1 x CSS3 animation | Asides op meeste paginas. Bijvoorbeeld op de home pagina (bij :hover event) |
| 1 x een berichtvenster | Contact *Na verzenden formulier op contact pagina |
| 1 x een invoervenster | Houd je fit (klik op canvas) |
| 1 x een lus | js/partnertest.js (en vele andere) |
| 1 x set van afbeeldingen waarder gebladerd kan worden | Home pagina (Je kan er niet naast kijken tenzij op kleinste schermodus) |
| 1 x tabel met opmaak die de surfer kan wijzigen | Recept: ingrediëntenlijst |
| 1 x canvas tonen/verbergen | Houd je fit |
| 1 x blikopener geïmplementeerd | Shoppen we binnekort in 3D? |
| Persoonlijke top 3 | Verklaring |
|---|---|
| 3D shoppen | Meest leerrijke onderdeel voor mezelf. Hoewel ik iets van programmeren en van 3d modelleren ken is de combinatie van de 2 toch nog een uitdaging. Zeker als je werkt met zeer recente technologieën zoals three.js (WebGL). |
| Houd je fit - Canvas | Hoewel ik dit grafisch niet echt aantrekkelijk vind, vind ik dit toch 1 van mijn betere technische prestaties in dit project. |
| Relatie test | Ik maak graag interactieve dingen. Relatief weinig werk om te maken en veel tijd die de eindgebruiker er aan spendeert. Veel dankbaarder werk als bijvoorbeeld super complexe database query's te schrijven die na 1 keer klikken en 1 seconde wachten een statisch eindresultaat tonen of weken werken aan een korte 3D animatie die slechts een paar seconden op iemands scherm te zien zal zijn. |
| Wat doe je anders bij een volgend HTML5-project? | Verklaring |
|---|---|
| Geen alerts en prompts gebruiken. | Dit komt zeer onprofessioneel over. |