Laatst bijgewerkt: Versie 1.0

Laatst bijgewerkt:

22-1-2016 Versie 1.0

INHOUD DEEL 1: VOORBEREIDING 1. Inleiding 2. What the f@*! is Bootstrap?! 3. Bootstrap importeren

DEEL 2: PROGRAMMEREN! 4. Ontwerpen 5. De carousel, niet die van de kermis 6. Navbars... Bleh. 7. Row, row, row your boat

DEEL 3: WAAROM WERKT DIT #@$! DING NIET??? 8. FAQ 9. Bedankt voor het lezen...?

DEEL 1

VOORBEREIDING

Inleiding Toen meneer Dohmen en ik het over een 'extra opdracht' hadden voor mij, heb ik een domme fout gemaakt. Aangezien ik vorig schooljaar het hele websitegedoe al had gedaan, en daar nog goed voor had gescoord ook, had meneer Dohmen het briljante idee om mij en een aantal anderen een extra opdracht te geven. Wat deze opdracht zou worden waren we vrij in, maar we moesten het wel met hem overleggen. Mijn idee was om mijn oude Informatica website een complete makeover te geven en dat zou dan mijn extra opdracht zijn. Dat vond meneer Dohmen goed, maar dan moest ik er wel een stappenplan bij gaan schrijven, dus hoe ik het gemaakt had. En toen gebeurde het. Ik zag een kans om een grapje te maken, en die kans nam ik, helaas. Ik zei tegen hem: “Een stappenplan? Oh, zodat u zeker gratis een extra boekje met uitleg krijgt wat u weer op uw site kunt plaatsen?” … “Hé, maar dat is een goed idee, schrijf maar een uitleg bij je website!” En hier zit ik dan achter mijn PC, met een half kapot toetsenbord en een brein zonder inspiratie, klaar om een uitleg te schrijven over hoe ik mijn website heb verbeterd... Eh... Nou dan, als ik het ga doen, dan doe ik het nog goed ook. KOM MAAR OP, EXTRA OPDRACHT. Een woord nog vooraf, ik ga niet EXACT uitleggen hoe ik mijn website heb gemaakt, alleen de grote elementen zoals de navbar, scrollende banner et cetera... Die dingen. De “interessante” dingen.

What the f@*! is Bootstrap?

Bootstrap is een open-source HTML, CSS en JavaScipt framework. Maar ik ga er vanuit dat die zin niet veel duidelijk maakt voor 95% van mijn klas. Lang verhaal kort: het maakt het optimaliseren van je website voor mobiele platforms veel simpeler, en voegt veel dingen toe om je website er extra mooi uit te laten zien. Ook bevat het een “grid-system” waarmee je je website makkelijker kunt indelen. Lang verhaal kort, met Bootstrap kun je dit omzetten...

...Naar dit.

Best cool, of niet? Alleen gaan wij onze websites nog veel beter maken dan het voorbeeld hier. Natuurlijk is Bootstrap niet verplicht om een goed uitziende website te maken, maar bij deze uitleg gebruiken we het wel. Het is simpel, vrij makkelijk te begrijpen, en daarom perfect voor beginners in webdesign, ofwel het grootste deel van de klas. Er wordt wel verwacht dat je al de basis van HTML en CSS kent, want anders kan het misschien nogal verwarrend worden.

We werken in deze uitleg met een nieuwe website! Dit is makkelijker en overzichtelijker! Opdracht 1.1 Voordat we kunnen beginnen, moeten we een aantal dingen voorbereiden. – Maak een nieuw mapje voor je website en maak de nodige .html-bestanden en het stylesheet.css bestand aan. – Download Bootstrap hier. Pak daarna het zip-bestand ergens uit en kopieer de mapjes 'css', 'fonts' en 'js' naar je websitemapje. – Als je nog niet eerder op een PC aan je website hebt gewerkt, installeer dan Notepad++ en Filezilla. Trouwens, als de links niet openen wanneer je er op klikt, houdt dan 'Ctrl' ingedrukt terwijl je klikt.

Opdracht 1.2 Deel je HTML-bestand in. De basistags zouden genoeg moeten zijn. Zoiets dus:

Bootstrap importeren Je hebt Bootstrap al gedownload, nu moet je nog zorgen dat je HTMLbestanden Bootstrap ook laden. Dit is niet moeilijk, maar je moet een aantal dingen toevoegen in je bestand. Opdracht 1.3: Het eerste wat je moet doen, is bovenaan je website, dus boven de tag, neerzetten. Simpel toch? Tuurlijk, maar je wilt niet weten hoeveel mensen dit vergeten... Tsh.

Daarna kopieer je het volgende in je . <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">

En het laatste wat je moet doen is dit NET BOVEN de tag zetten. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> <script src="js/bootstrap.min.js">

Met deze code laad je de bootstrap CSS, de bootstrap JavaScript/JQuery bestanden en een aantal instellingen die Bootstrap nodig heeft om correct te werken. Dat was alles! Bootstrap is nu geïmporteerd in je HTML-bestand, nu kunnen we eindelijk echt gaan programmeren!

DEEL 2

PROGRAMMEREN!

Ontwerpen Vaak is het een goed idee om van tevoren een ontwerp te maken van hoe je wilt dat je website eruit gaat zien. Dit hoeft niet al te gecompliceerd te zijn: Een schets is al genoeg. Het is gewoon handig zodat je weet wat je doet en op het juiste spoor blijft, want dingen kunnen vaak verwarrend worden. Je hoeft niet per se een ontwerp te maken, maar ik raad het je wel aan. Zie hier de mijne.

Fantastisch hè? En dan mijn uiteindelijke website...

De carousel, niet die van de kermis Een van de meest opvallende elementen aan mijn website is de grote banner die de hele tijd van afbeelding verandert. Dit wordt in Bootstrap een 'carousel' genoemd. Het is dan ook vergelijkbaar met een caroussel die de hele tijd doordraait, alleen zijn het hier afbeeldingen. Je kunt het zien als een lange strook die naar links beweegt, zo lijkt het alsof er elke keer vanuit de rechterkant een nieuwe afbeelding binnenkomt. De carousel staat in mijn header, en de basisopzet is vrij simpel.

Om te beginnen willen we een aantal afbeeldingen hebben. Dat wordt de eerste stap. Opdracht 2.1 1. Zoek een aantal afbeeldingen op. Het liefst van dezelfde grootte en hetzelfde type, dus allemaal .jpg, of allemaal .png . Een resolutie van 1280x720 of 1920x1080 zou perfect zijn. 2.Sla de afbeeldingen op in een mapje genaamd 'img' in je websitemapje. 3. Noem deze afbeeldingen 'slide1', 'slide2', 'slide3', enzovoort, afhankelijk van het aantal afbeeldingen dat je hebt. Nu naar de code. Opdracht 2.2 1. Maak een nieuwe div aan in je header. Geef deze div de id 'carousel1', of 'mycarousel', maakt niet uit, wat jij zelf het fijnst vind. Sluit deze div ook. 2. Zet IN de opening tag van de div, dus waar je net ook id=”...” neer hebt gezet, de volgende code: class="carousel slide" data-ride="carousel" 3. Maak een div aan binnenin de div die je zonet heb aangemaakt, deze div krijgt geen id, maar in de opening tag van de div zetten we wel class=”carousel-inner” Vergeet deze div niet te sluiten.

Dat 'id' de div een naam geeft zul je wel begrijpen. Maar wat doen die andere codes nou precies? Ten eerste 'class'. Doormiddel van een div een class te geven weet het Bootstrap framework wat je bedoelt, en wat je wilt. Door te zeggen “carousel slide” weet Bootstrap dat: 1. Je wilt een carousel maken. 2. Je wilt een 'slide' animatie toevoegen. Zonder dit verandert de afbeelding op een hele saaie, droge manier. Met data-ride=”carousel” wordt nogmaals aangegeven dat dit een carousel is, en dat de afbeeldingen gewisseld moeten worden. Als je nu je html-bestand in een browser opent, gebeurt er nog niet veel. Dit komt omdat je nog geen afbeeldingen hebt ingevoegd, dat gaan we nu doen, en is wederom een vrij simpel proces. Opdracht 2.3 1. Binnen de div met de class “carousel-inner” maken we X nieuwe divs aan, waarbij X het aantal afbeeldingen is dat je hebt. Elke van deze divs geef je de class “item”, behalve de eerste. Die krijgt de class “item active”. 2. Deze stap is makkelijk. Zet in elk van de divs die je zonet aan hebt gemaakt
Je kunt carousels ook nog verder aanpassen, bijvoorbeeld met knoppen waarmee je naar links en rechts kunt gaan, of bolletjes onderin die aangeven hoeveel afbeeldingen er zijn en bij welke je bent. Je kunt zelfs een tekst bij de afbeelding voegen. Zoiets dus:

Ik ga hier niet exact uitleggen hoe je dit doet, maar het is niet echt veel moeilijker als wat we tot nu toe hebben gedaan. Op http://w3schools.com staat een goede uitleg over wat je nog meer kunt met carousels. Ga gewoon naar hun Bootstrap tablad, en klik dan links op carousel! Easy!

Navbars... Bleh. Het volgende wat we gaan doen is een navbar maken. Hier kunnen we een aantal designkeuzes maken: Wil je een donkere, of lichte navbar? Wil je het menu rechts of links hebben? Wil je een standaard design, of wil je een design met zogenaamde 'pills' of 'tabs'? Wil je rechte, of afgeronde hoeken? Er zijn dus veel keuzes die je kunt maken bij bootstrap navbars. Ik ga laten zien hoe je al deze navbars kunt maken, het is niet zo moeilijk als je denkt.

Opdracht 2.4 Eerst gaan we de basis van de navbar maken. 1. Pas de