cursus DRUPAL 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.