...
Hoofd- en deelvragen
Dit is onze hoofdvraag:
'Welk CSS-framework is het beste te gebruiken voor de gestelde criteria bij de door ons te maken web applicatie?'
Om deze vraag te kunnen beantwoorden zullen we dit in kleinere (deel)vragen opsplitsen om zo tot een goed onderbouwd antwoord te komen. De deelvragen zijn als volgt:
...
Op het gebied van documentatie zit het met bootstrap meer dan goed. Om iets te kunnen vinden hoef je alleen maar bootstrap plus de zoekterm van wat je wil weten in te vullen op een zoekmachine en er komen genoeg antwoorden. De complexiteit daarentegen is een ander verhaal. Het is zeker niet de lastigste framework wat beschikbaar is, maar je hebt zeker even nodig om het in je vingers te krijgen. Ook de leesbaarheid vind ik niet super na het implementeren van bootstrap. Wel is het zo dat je het makkelijk kan zien zodra je alle termen kent die in bootstrap gebruikt worden en aangezien wij als groep allemaal wel eens met bootstrap hebben gewerkt is dit geen groot probleem voor ons.
Tijdens het maken van de prototype ben ik niet vast komen te zitten en heb ik de home pagina homepagina redelijk vlot in elkaar gezet. De ervaring had daarbij een grote rol, maar ook de framework zelf. Bootstrap maakt het heel makkelijk om content te plaatsen waar je het wil en maakt het een stuk sneller. Dit zorgde ervoor dat er toch een mooie home pagina homepagina kwam te staan in een redelijk korte tijd. Over het onderhouden van bootstrap valt niks slechts over te zeggen. Bootstrap wordt nog steeds geupdate en verbeterd.
Bulma
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bulma</title>
<link rel="stylesheet" href="./css/bulma-rtl.min.css">
</head>
<body>
<nav class="navbar is-black py-3 pl-6">
<div class="navbar-brand">
<a class="navbar-item">
<span class="is-size-4 has-text-weight-bold">Smalltalk-PROTOTYPE</span>
</a>
</div>
<div class="navbar-menu" id="nav-links">
<div class="navbar-start pr-6">
<a class="navbar-item">My Account</a>
<a class="navbar-item">Contact</a>
</div>
</div>
</nav>
<main class="hero is-fullheight has-background-black-ter">
<div class="container hero-body">
<div class="columns is-centered is-mobile">
<div class="column is-half content is-large has-text-centered">
<h1 class="has-text-white">
Made by Sem.
</h1>
<p class="has-text-grey-lighter">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum tempore ea perspiciatis
nulla, soluta quos voluptas tenetur facere et, quod ipsam obcaecati iure ratione eveniet dolorem
possimus enim, fugiat cumque?
</p>
<button class="button is-light is-large is-outlined is-rounded">
Learn More
</button>
</div>
</div>
</div>
<div class="container hero-footer">
<div class="columns is-centered is-mobile">
<div class="column content">
<p class="has-text-grey-light pt-6 m-6">
Smalltalk-PROTOTYPE
</p>
</div>
</div>
</div>
</main>
</body>
</html> |
De homepagina die ik met behulp van Bulma heb gemaakt ziet er zo uit:
Bulma is naast het installeren voor mijn gevoel de makkelijkste framework om te gebruiken. De namen van de klassen spreken voor zich en ik had daarom ook totaal geen moeite om hierin te komen.
De beoordeling is daarom ook voor bulma heel positief.
| Code | Criteria | -- | - | -/+ | + | ++ |
|---|---|---|---|---|---|---|
| CR1 | Documentatie | X | ||||
| CR2 | Complexiteit | X | ||||
| CR3 | Leesbaarheid | X | ||||
| CR4 | Prototype | X | ||||
| CR5 | Onderhouden | X |
Er is meer dan genoeg op de site van Bulma zelf om een mooie website te maken. Toch vond ik het lastig om bij externe websites voorbeelden te vinden. De complexiteit maakt het daarentegen helemaal goed. Bulma is heel erg makkelijk om mee te werken. Het heeft mij heel weinig tijd gekost om erachter te komen hoe ik het best met het framework moet werken. De leesbaarheid maakt het compleet goed doordat de eerder genoemde namen van de klassen perfect kloppen met wat er gebeurd op de website. Zodra je een beetje HTML kennis beheerst zou je in principe zo kunnen zien wat alles doet en wat er gebeurd.
Het maken van het prototype ging daarom ook redelijk vanzelfsprekend. Alles ging naar behoren en op momenten dat ik een kleine vraag had was dit makkelijk op te lossen doordat alles duidelijk en uitgebreid is uitgelegd op hun site. Het onderhouden wordt ook nog eens goed gedaan. Zo is er recent nog een update gekomen, echter zit er wel redelijk wat tijd tussen de updates.
Skeleton
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skeleton</title>
<link rel="stylesheet" href="/Skeleton/normalize.css">
<link rel="stylesheet" href="/Skeleton/skeleton.css">
<link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<div class="container">
<div class="row">
<div class="one-third column">
<h2>
<strong>Smalltalk-PROTOTYPE</strong>
</h2>
</div>
<div class="one-third column">
<h3>My account</h3>
</div>
<div class="one-third column">
<h3>Contact</h3>
</div>
</div>
</div>
</nav>
<div class="section values">
<div class="container">
<div class="row">
<div class="one-fourth column offset-by-three">
<h1>
<strong>
Made by Sem.
</strong>
</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio ipsam veniam earum, accusamus ab impedit perferendis nulla vitae saepe iste optio laudantium numquam! Modi at exercitationem id sapiente ea esse.
</p>
</div>
</div>
</div>
</div>
</body>
</html> |
De homepagina die gemaakt is met behulp van het Skeleton framework ziet er als volgt uit:
Skeleton is een makkelijk te installeren framework, maar daar blijft het ook bij. Naast dat het voor je makkelijk gemaakt wordt met het goed zetten van content horizontaal, had Skeleton heel weinig andere functionaliteiten.
Vandaar dat de beoordeling ook niet heel hoog is.
| Code | Criteria | -- | - | -/+ | + | ++ |
|---|---|---|---|---|---|---|
| CR1 | Documentatie | X | ||||
| CR2 | Complexiteit | X | ||||
| CR3 | Leesbaarheid | X | ||||
| CR4 | Prototype | X | ||||
| CR5 | Onderhouden | X |
Op het gebied van voorbeelden en stukjes code die kunnen helpen voor Skeleton valt er weinig tot niks te vinden hierover. Dit maakt het heel lastig om er mee te werken. De weinig beschikbare functionaliteiten helpen hier zeker niet bij mee. Hoe complex het is valt dan wel weer mee. Skeleton is namelijk zeer minimaal gemaakt, dus zijn er ook weinig mogelijkheden. De leesbaarheid is daarentegen wel positief. Alles wat er te implementeren bestaat is redelijk makkelijk te lezen. De prototype heb ik ook niet naar behoren kunnen maken, omdat dit te lang duurde. Ik ben gestopt op het moment dat ik vast kwam te zitten en geen antwoord kon vinden op het internet. Skeleton wordt ook niet meer geüpdatet en de laatste update is heel lang geleden, dus is het onderhouden er van heel erg matig.
Materialize
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize</title>
<link rel="stylesheet" href="/Materialize/css/materialize.css">
<link rel="stylesheet" href="/Materialize/css/materialize.min.css">
</head>
<body class="grey darken-4">
<div id="navbar" class="navbar-fixed scrollspy">
<nav class="grey black">
<div class="nav-wrapper container">
<div class="container"> <a href="index.html" class="brand-logo">Smalltalk-PROTOTYPE</a></div>
<ul class="right side-nav">
<li><a href="contactUs.html">Contact Us</a></li>
<li><a>My account</a></li>
</ul>
</div>
</nav>
</div>
<div id="index-banner" class="container">
<div class="section no-pad-bot">
<div class="container valign">
<br><br>
<h1 class="header center white-text text-darken-2">Made by Sem.</h1>
<div class="row center">
<h5 class="header col s12 light grey-text text-darken-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid accusamus tempora vero excepturi non tenetur molestias odit ex necessitatibus voluptatem. Hic qui quisquam suscipit, aspernatur perferendis aliquid maxime delectus. Laborum?</h5>
</div>
<div class="row center">
<button class="waves-effect white black-text btn">Learn more</button>
</div>
</div>
</div>
</div>
</body>
</html> |
De homepagina waar gebruikt is gemaakt van Materialize ziet er als volgt uit:
Materialize is een heel makkelijk te installeren framework en ook het gebruik ervan is niet lastig. Ik had niet veel obstakels naast het veranderen van kleuren en het goed zetten in horizontale richting. Dit duurde even om onder de knie te krijgen maar op site staan voldoende mogelijke heden om dat op te lossen.
| Code | Criteria | -- | - | -/+ | + | ++ |
|---|---|---|---|---|---|---|
| CR1 | Documentatie | X | ||||
| CR2 | Complexiteit | X | ||||
| CR3 | Leesbaarheid | X | ||||
| CR4 | Prototype | X | ||||
| CR5 | Onderhouden | X |
Er is genoeg te vinden om een redelijke website te maken, maar de voorbeelden maken het niet heel veel makkelijker. Het zijn alleen volledige templates die laten zien worden. Kleine onderdeeltjes ontbreken, maar dat vangt de website van Materialize zelf redelijk goed op. De complexiteit valt ook mee, dit komt omdat het toch wel redelijk makkelijk voor je wordt gemaakt en de tijd wat je nodig hebt om het te leren is erg laag. Wel wordt de leesbaarheid van de code met de regel onleesbaarder. Zolang het een kleine website blijft en geen pagina's met driehonderd regels is het prima te overzien.
De prototype ging redelijk naar behoren en duurde niet heel lang om te maken. Wel was het lastig in het begin om uit te vogelen. Wanneer ik begon moest ik even rustig kijken naar wat er nou precies gebruikt kon worden. Het onderhouden van de code is daarentegen niet heel best. Laatste commit met een update is alweer twee jaar geleden.