cursus
DRUPAL versie 7 - Project

Deel 1 Deel 2 Templates Webshop E-marketing/SEO Project

Deze cursus leert u projectmatig een website te plannen, te schetsen om vervolgens de lay-out en functionaliteiten volledig op maat te maken. Tot slot eindigt u met een volledig afgewerkte site. In deze cursus worden verschillende websites volledig beschreven van nul tot einde. U leert wat responsive webdesign is en hoe u een website maakt voor mobiele apparaten (smartphone en tablet). We letten ook op cross-browser compatibiliteit. U leert werken met CSS frameworks Skeleton en 960gs). Tussendoor leert u nog een woordje CSS3.

Inhoudsopgave

960 Grid System
> Hoe maak je een Drupaltemplate via het gratis CSS-framework 960gs?
Oefening 960gs
> We maken een oefening op het 960 Grid System
Responsive Webdesign: inleiding
> Wat is Reponsive Webdesign? Hoe maak je websites die duidelijk vertoond worden op smartphones en tablets?
Een overzicht van smartphones, besturingssystemen en browsers
> Welke smartphones en tablets bestaan er? Welke besturingssystemen en browsers bestaan er? Alles over iPhone, iPad, Android, HTC, Palm en meer.
Een website testen op iPhone, iPad, Android, Blackberry, Palm en Nokia
> Hoe kan je een website testen zonder dat je een smartphone of tablet hebt?
Usability voor mobile devices
> Wat is Usability? Hoe maak je een site, zodat deze gebruiksvriendelijk is op smartphone en tablet?
Responsive Webdesign: afbeeldingen invoegen - de viewport
> Wat is de viewport? Hoe voorkom je inzoomen op smartphone? Waarop moet je letten bij het invoegen van afbeeldingen? Welke CSS moet je gebruiken voor de img, om afbeeldingen responsive te vertonen?
Methode 1: CSS Mediaqueries
> Hoe gebruik je CSS mediaqueries in combinatie met Drupaltemplates? Hoe plaats je een mediaquery in een .info-bestand? Hoe kan koppel je meerdere CSS-bestanden in een info-bestand?
Methode 2: Skeleton, responsive CSS-framework
> Hoe maak je een responsive template (geschikt voor mobiele apparaten) via Skeleton?
Methode 3: een redirect
> Hoe toon je een totaal andere website op een mobiel apparaat?
Een patch uitvoeren
> Wat is een Drupalpatch? Hoe kan je een patch uitvoeren op een module? Hoe doe je een patch via Windows en Mac?
Video invoegen via jwPlayer
> Hoe werkt de module jwPlayer? Hoe kan je video invoegen via fallback op HTML5 en Flash
PHP-limieten verhogen
> Hoe kan je de php memory_limit verhogen voor je Drupalsite?
Features: werk besparen bij een nieuwe drupalsite
> Waarom zou je bij een nieuwe drupalsite alles opnieuw maken? Hoe zet je snel functionaliteiten over van de ene site naar de andere?
Een sticky footer maken
> Wat is een sticky footer? Hoe werk je met fixed positioned divs?
Werken met tpl-bestanden
> Waarom moet je tpl-bestanden gebruiken? Hoe voeg je specifieke opmaak toe?
Node.tpl.php
> Hoe geef je specifieke, herhalende opmaak aan artikelen?
Specifieke nodes - views via tpl - eigen velden
> Hoe kan je eigen velden gebruiken in tpl-bestanden? Hoe kan je specifieke pagina's lay-outen? Hoe kan je views een opmaak geven via tpl.php?
block.tpl.php
> Hoe kan je blokken een lay-out geven? Werken met specifieke opmaak: block--positie.tpl.php.
Core templates
> Hoe kan je zoekresultaten, enquetes en andere objecten een opmaak geven via tpl-bestanden?
Figuren rechtstreeks in een template
> Wat is het basispad dat je voor een figuur moet invoegen? Wat is de base path in php?
Bijlage: alle variabelen voor page.tpl.php, node.tpl.php, block.tpl.php en core templates
>
Project 1: Slightly Blue
> We bespreken deze oefening van nul tot volwaardige, afgewerkte site.
Project 2: Jungle
> Een website volgens de trends van 2012: grote afbeelding, one page en hoge footers. Deze site wordt stap voor stap besproken. Deze oefening is responsive. We gebruiken Skeleton als basis en maken hem
Project3: Restaurant
> We maken een site voor een trendy restaurant. In deze oefening komt de sticky footer, png-transparantie, grote wisselende achtergrondfiguren, css3 en tpl-bestanden aan bod.
Project4: Eleganza
> Deze oefening is een responsive website. Via CSS-mediaqueries maken we onze site geschikt voor smartphone, tablet en desktop.