Auteurs:
| Naam | Studentnummer |
|---|---|
| 668329 |
Docenten
| Naam | Functie |
|---|---|
| Skills begeleider | |
Procesbegeleider |
| Klas | ITA-OOSE-A |
|---|---|
| Groepsnaam | Smalltalk |
| Course | OOSE |
| Datum |
|
| Versie | 1.23 |
Inhoudsopgave
Inleiding
Voor het door ons op te leveren product is het belangrijk dat het dashboard makkelijk te bestuderen is en er dus overzichtelijk uitziet. CSS kan hierbij helpen. Met deze reden is het gebruik van een framework hiervan een heel fijn voordeel. In dit onderzoek gaan we opzoek naar de voor ons best mogelijke framework. Wij zullen kijken naar wat wij willen bereiken en zullen daarop gaan afstemmen.
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:
- Welke CSS frameworks, die wij mogelijk zouden kunnen gebruiken, bestaan er?
- Welke criteria zijn voor ons van belang?
- Hoe scoren de verschillende beschikbare frameworks op de door ons opgestelde criteria?
Na het beantwoorden van deze deelvragen hopen wij een duidelijk antwoord te krijgen op onze hoofdvraag.
Welke CSS frameworks die wij mogelijk zouden kunnen gebruiken bestaan er?
- Bootstrap
- Bulma
- Skeleton
- Materialize
Dit is een heel klein deel van de frameworks die er zijn, maar het lijstje zijn de frameworks die het meest interessant eruit zien voor onze doeleinden. Wij willen namelijk onze diagrammen zo snel en goed mogelijk kunnen plaatsen waar wij willen. Dit zijn de vier frameworks die ik heb kunnen vinden waar de gebruikers ervan heel lovend spreken op het gebied van het managen en plaatsen van content.
Welke criteria zijn voor ons van belang?
Om te bepalen welke framework het best bij ons project past is het belangrijk om criteria op te stellen. Deze criteria is in dit geval specifiek voor dit product. Dit zorgt ervoor dat je het juiste framework eruit filtert. De criteria die wij hebben bedacht om het voor ons beste framework te krijgen is:
| Code | Criteria | -- | - | -/+ | + | ++ |
|---|---|---|---|---|---|---|
| CR1 | Documentatie | |||||
| CR2 | Complexiteit | |||||
| CR3 | Leesbaarheid | |||||
| CR4 | Prototype | |||||
| CR5 | Onderhouden |
Om de criteria wat duidelijker te krijgen worden ze hieronder uitgelegd:
- CR1 Documentatie: hier wordt gekeken naar hoeveel er te vinden is op het internet.
- CR2 Complexiteit: hier wordt gekeken naar hoe makkelijk er mee te werken is.
- CR3 Leesbaarheid: dit gaat over hoe leesbaar de code is met het gebruiken van die framework.
- CR4 Prototype: hier test ik hoe fijn het is om mee te werken en het resultaat natuurlijk.
- CR5 Onderhouden: dit deel gaat over hoe vaak het framework geüpdatet wordt.
Deze criteria zal helpen het juiste framework te vinden door middel van de plusjes en minnetjes op te tellen. Dit zou er toe leiden dat er een framework uitkomt wat het meest zou kloppen en het handigst is voor ons project.
Om ervoor te zorgen dat er een prioriteit wordt gezet op bepaalde criteria ga ik voor elke criteria een weging meegeven:
CR1 - 2x
CR2 - 1x
CR3 - 1x
CR4 - 3x
CR5 - 2x
Hoe scoren de verschillende beschikbare frameworks op de door ons opgestelde criteria?
Om antwoord te krijgen op deze deelvraag ga ik een prototype maken voor elk gekozen framework. Voor ieder framework ga ik een kleine home pagina maken om zo een eerlijk oordeel te kunnen geven.
Bootstrap
<!DOCTYPE html>
<html lang="en" class="h-100">
<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>Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<link href="cover.css" rel="stylesheet">
</head>
<body class="d-flex h-100 text-center text-white bg-dark">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">Smalltalk-PROTOTYPE</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>
<main class="px-3">
<h1>Made by Sem.</h1>
<p class="lead">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et pariatur quaerat voluptas vitae sequi optio nesciunt reprehenderit alias, nostrum magni accusamus, iusto cupiditate. Dolor officia sed, atque est quia dolores.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Learn more</a>
</p>
</main>
<footer class="mt-auto text-white-50">
<p>Smalltalk-PROTOTYPE</p>
</footer>
</div>
</body>
</html>
De homepagina die ik gemaakt met behulp van bootstrap ziet er als volgt uit:
Het was fijn om te gebruiken en gemakkelijk te installeren. Het heeft misschien een klein voordeel gehad aangezien ik al eerder gebruik heb gemaakt van bootstrap. Ik hoefde niet veel op te zoeken, maar op momenten wanneer ik hulp nodig had was er niet veel tijd voor nodig en ik had mijn perfecte oplossing al gevonden.
De beoordeling die hieronder staat is daarom ook zeer positief.
| Code | Criteria | -- | - | -/+ | + | ++ |
|---|---|---|---|---|---|---|
| CR1 | Documentatie | X | ||||
| CR2 | Complexiteit | X | ||||
| CR3 | Leesbaarheid | X | ||||
| CR4 | Prototype | X | ||||
| CR5 | Onderhouden | X |
++ = 7
+ = 2
+/- = 0
- = 0
-- = 0
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 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 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
<!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 |
++ = 5
+ = 4
+/- = 0
- = 0
-- = 0
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
<!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 |
++ = 0
+ = 1
+/- = 1
- = 7
-- = 0
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
<!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 |
++ = 0
+ = 6
+/- = 1
- = 2
-- = 0
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.