Pieter Luts Arno Neyens Joachim Geerts Vince Vandormael
HTML 5 12/03/2015 Project Bootstrap
Project Bootstrap 1 AANDACHTSPUNTEN JUMBOTRON 1.1 WAT IS JUMBOTRON Een jumbotron fungeert als een soort uitstalraam voor inhoud die je goed zichtbaar op je site wilt zetten. Een jumbotron gebruikt doorgaans (voor de achtergrond) de volledige breedte van het browservenster, terwijl andere inhoud beperkt wordt tot de overkoepelende container waarin deze zich bevindt.
1.2 GEBRUIKTE BRONNEN De jumbotron is voldoende gedefinieerd in de documentatie op getbootstrap.com. Dit is dan ook de enige gebruikte bron.
1.3 TIPS VOOR WEBDESIGNERS Een jumbotron is makkelijk in te voegen door middel van een blok element (div,header,section, etc) te maken met de klasse 'jumbotron'. Binnen dit blokelement wordt opnieuw een blokelement gecreëerd. Ditmaal met de klasse 'container' zodat de inhoud (niet de achtergrond) de flow van de pagina mee volgt. Het is belangrijk om het blokelement met de klasse 'jumbotron' als directe descendant van het body element te creëren. Als de jumbotron in de overkoepelende container wordt geplaatst, zal hij niet de volledige breedte van de pagina beslaan.
2
Voorbeeld Jumbotron
Code Jumbotron
Jumbotron op onze pagina
3
2 AANDACHTSPUNTEN BOOTSTRAP CAROUSEL 2.1 WAT IS EEN BOOTSTRAP CAROUSEL Een carousel is een component waarmee men een soort slideshow kan maken. Hier zijn enkele applicaties voor. Deze kan bijvoorbeeld worden gebruikt om door enkele nieuwsitems te bladeren. Ook kan een carousel gebruikt worden als een galerij voor afbeeldingen of foto's. Een carousel gaat automatisch naar het volgende item na een ingesteld interval.
2.2 GEBRUIKTE BRONNEN Het carousel component is gedefinieerd in de Javascript documentatie op getbootstrap.com. Daarnaast is er sporadisch gebruik gemaakt van de documentatie op jQuery.com, teneinde de juiste syntax te vinden.
2.3 TIPS VOOR WEBDESIGNERS Zoals hierboven al aangehaald in punt 2.1 avanceert een carousel automatisch. Dit is niet altijd gewenst. Als een carousel item veel informatie bevat dan is de ingesteld tijd (meestal slechts enkele seconden) wellicht te kort om alles te vatten. Vaak linkt een carousel item ook door naar een extra artikel. Slechtzienden of mensen met een motorische handkap hebben dan veel moeite om het juiste item te selecteren op het moment dat het voorbij komt. Daarom is het aangewezen om ook een of meerdere knoppen te voorzien waarmee de slideshow gestopt en eventueel terug gestart kan worden, alsook knoppen waarmee naar voren en naar achteren gebladerd kan worden.
2.4 TIPS VAN ANYSURFER Als je je website toegankelijk wil maken, gebruik je beter geen carousel. Ze zijn onhandig en de gebruiker heeft de controle niet. Daarnaast zien carousels er vaak uit als advertenties en wordt er (mogelijk als gevolg daarvan) niet veel op geklikt. Er zijn enkel manieren om een carousel toch min of meer toegankelijk te maken maar dit vereist diverse aanpassingen. AnySurfer raadt aan om gebruik te maken van de Javascript bibliotheek ‘Slide.js’ en hierin wat aanpassingen te doen.
4
Voorbeel Carousel
Code Carousel
5
Carousel op onze pagina
6
3 AANDACHTSPUNTEN ONDERWERP BOOTSNIPP 3.1 ONTWERP Wij kozen voor het ontwerp ‘Contact List’ van de bootsnipp gebruiker ‘Mouse0270’. Het is een erg overzichtelijke weergave van contactpersonen en kan perfect geïntegreerd worden in onze webpagina.
3.2 GEBRUIKTE BRONNEN Op het bootstrap-css bestand en de bootstrap website na, gebruikten we voor deze oefening geen extra bronnen. De code was erg overzichtelijk en begrijpbaar opgebouwd.
3.3 MOEILIJKHEDEN Hier en daar staan een aantal zaken die mekaar tegenspreken of volledig overbodig zijn. Deze zaken hebben in geen enkele browser een nut en ook op mobiele weergaves kunnen deze perfect worden weggelaten. Hierdoor is de code vaak onoverzichtelijk opgebouwd.
3.4 TIPS VOOR WEBDESIGNERS Volgens onze eerste ervaringen bevat dit ontwerp nog erg veel overbodige code. Zo staan er bijvoorbeeld een aantal keer span-tags in span-tags om twee verschillende klassen mee te geven. Deze methode is omslachtig aangezien je meerdere klassen in één class tag kan zetten.
7
Originele HTML
Aangepaste HTML
8
Originele CSS
Aangepaste CSS
9
Contactpagina op sm-, md- en lg-formaat
Contactpagina op xs-formaat
10
4 AANDACHTSPUNTEN ONE PAGE BOOTSTRAP TEMPLATE 4.1 WAT IS EEN BOOTSTRAP TEMPLATE Een bootstrap template is een sjabloon van een webpagina, met code die al klaar en valide is. Wanneer je een template download en gebruikt om je project te starten hoef je dus niet meer van nul te beginnen, maar moet je enkel aanpassingen doen aan het al bestaande sjabloon.
4.2 GEBRUIKTE BRONNEN Wij maakten gebruik van de template ‘Landing Page’ van ‘Start Bootstrap’. Op uitzondering van deze template hebben we geen externe bronnen geraadpleegd.
4.3 TIPS VOOR WEBDESIGNERS Analyseer eerst nauwkeurig hoe de template in elkaar zit. Kijk welke klassen bij welke div’s horen zodat je weet welk deel van je website je aan het aanpassen bent. Vernieuw ook vaak je site in je browser zodat je zeker weet welke aanpassing voor welke verandering zorgt. Mocht je een fout maken weet je zo snel waar je de fout moet gaan zoeken.
