D1 les 01

Praktisch

Deze site bevat de leerstof van de Drupalcursussen die doorgaan aan het PCVO Scheldeland, met vestigingen in Lokeren, Zele, Hamme, Dendermonde, Wetteren, Buggenhout en Beveren. Zie www.scheldeland.net

De leerstof wordt verdeeld over 4 delen. Drupal 1 en 2 vormen één geheel en zijn nodig om tot een mooie en efficiënte site te komen.

Drupal Project (6 extra lessen om de veertien dagen) is er om de leerstof van Drupal 1+2 in te oefenen voor zij dit dit willen.  Dit kan gevolgd worden als je reeds Drupal 2 gevolgd hebt maar ook terwijl je Drupal 2 volgt. Daarvoor start Drupal project een maand later, zodanig dat je al wat leerstof hebt gezien.

Drupal 3 is een vervolmakingscursus waar de finesses van Drupal tot hun recht komen....

Er is ook een snelcursus die alle delen in vier zaterdagen behandelt met telkens een oefenweek tussen. Eigenaardig genoeg gaat deze cursus niet sneller. Alles is echter voorgeïnstalleerd en de extra oefeningen worden voor thuis gereserveerd.

Deze site bevat de lesvoorbereidingen. Op drupal.place wordt de les gedemonstreerd. Deze is voor de cursisten toegankelijk (ook het admin gedeelte). De cursisten zelf hebben een eigen hosting of gebruiken drupal.training. Iedereen start trouwens op drupal.training tot je geleerd hebt om zelf een hosting te beheren. Ik heb voor elke cursist een Drupal geïnstalleerd en dit reeds aangepast naar het Nederlands en ik heb ook reeds enkele interessante extra's (modules) geïnstalleerd. Je zult natuurlijk ook leren hoe je dit doet..

Het eindwerk is het maken van een simpele site en dit wordt als examen beoordeeld.

 

Websites: een analyse

Laten we eerst eens kijken wat een website is en enkele begrippen definiëren.

Hosting

Een website is een verzameling van webpagina's die ergens gehost zijn. De hosting kan bvb bij one.com, versio.be, combell.be,.. gebeuren. Bij Drupal moet je een goede en snelle database hebben, aangezien elke pagina nog moet samengesteld worden. Bekijk en vergelijk eens de mogelijkheden en prijzen. En CMS (content management system) is zeer flexibel maar elke pagina moet op het moment zelf nog opbouwd worden. Door de cache vormt dit echter geen probleem.

Blokken

Een webpagina bestaat uit plaatsen (blokken) waar er inhoud (artikels, verkorte artikels, overzichten, navigatiestructuren, diavoorstellingen, links..) met een bepaalde opmaak (thema met CSS) worden getoond. Laten we eens een webpagina bekijken www.bouwinfo.be. Ontdek de blokken. Welke opmaak werd er meegegeven? Hieronder enkele prints.

De blokken die kunnen gebruikt worden zijn afkomstig van het thema. Als je wilt afwijken van deze blokkenstructuur door extra blokken te gebruiken, kan je de modules (= extra's die na de installatie worden toegevoegd) Panels en Display Suite gebruiken.

Oefening: bekijk de blokken in het standaard thema. Wijzig het thema naar Marinelli. Bekijk de opmaak en de blokken. Thema's en extra's (modules) vind je allemaal op drupal.org. Bekijk eens hoeveel Drupal er heeft.

Inhoud

Laten we nu eens de inhoud bekijken. Welke soort weergavemodus (=manier van voorstellen) zie je?

Drupal heeft een ingebouwde mogelijkheid om de weergave te bepalen:

Velden

Welke voorstelling van de inhoud heb je hier?

Views (=overzichten) is een krachtige tool in Drupal om verzamenling van gegevens te tonen. Je kunt er kiezen wat je toont want Drupal is zeer gestructureerd. De inhoud wordt in velden opgedeeld. Velden bevatten gelijkaardige informatie. Je kunt filteren en sorteren.

Ze worden ingesteld in het inhoudtype. Hier zie je de velden van het inhoudstype 'Article'. Dit is één van de twee inhoudstypes die meegeleverd worden met de kern (zin in de installatie) van Drupal.

Merk het veld tags op. Dit zijn trefwoorden (taxonomietermen) waarmee er kan gegroepeeerd worden. Zo kan ik een artikel maken dat behoort tot Drupal 1. Onderaan zie je dan bvb Drupal 1 als link staan. Klik je hier op dan zal er een overzicht gegeven worden van alle artikels met dezelfde taxonomieterm.

Oefening: ga naar https://www.whitehouse.gov/administration/president-obama en bekijk de pagina, Bekijk dan ook de andere namen uit de lijst. Welke velden herken je?

Overzichten

Overzichten kunnen dus op verschillende manieren ontstaan

  1. homepage
  2. taxonomieterm
  3. views

Opmaak

Tenslotte nog iets over de opmaak. Thema's zorgen niet enkel voor de opmaak en blokken. De nieuwste Drupal websites (thema's) zijn ook responsive en adaptive. Responsive wil zeggen dat de inhoud zich aanpast aan de grootte van het scherm. PC, Tablet en smartphone zijn de drie standaarden. Afbeeldingen bvb verkleinen en tekst gaat zich onder elkaar voegen. Adaptive gaat een stap verder dan verkleinen en verschuiven. Er worden nieuwe structuren getoond al naar gelang de grootte van het scherm. merk op de de navigatiestructuur herleid werd tot enkele streepjes.

 

Als je daar op klikt, vouwt het menu zich open.

Tijd om wat inhoud aan te brengen op onze oefensite. Ga naar het onderwerp Basis Page.

Kennismaking met Drupal

Drupal is een CMS net zoals Wordpress en Joomla. Een CMS (content management system) is voorraadkast met kant en klare zaken die je op een website vindt. Het uitzicht van je site (je kunt kiezen tussen honderden mogelijkheden), een slideshow, banners, fotogalerijen, nieuwsbrieven, contactformulieren, forum, kalenders, ... alles staat klaar om gebruikt te worden. Je moet enkel de 'modules' die je wenst, te installeren, in te stellen en een plaats te geven. Drupal heeft de meeste mogelijkheden van alle CMS'sen en is veruit de veiligste.

Het hoeft u dan ook niet te verwonderen dat sites zoals die van het Witte Huis, Mc Donalds, Louvre,.. (zie onder) er al jaren gebruik van maken. Kijk maar eens op http://buytaert.net/tag/drupal-sites. Het is bovendien gratis omdat het open source is. De programmacode is openbaar en iedereen die wil kan er aan meewerken. Er zijn constant duizenden vrijwilligers die het programma up to date houden. Soms maken bedrijven die iets specifiek nodig hebben gebruik van de basis, werken dan specifiek naar hun doel toe en moeten dit daarna ook weer publiek maken. Zo heeft iedereen baat bij open source. Ga eens naar www.drupal.org. en kijk eens naar de statistieken:

Op het moment van dit schrijven zijn er 26751 blokjes die je kunt toevoegen om de functionaliteit van je site uit te breiden, 1984 thema's om je site met één klik een totaal ander uitzicht te geven, 810 distributies (kant en klare pakketten) zoals voor een webshop, restaurant, ..., 33311 geregistreerde programmeurs die Drupal constant uitbouwen, 2818 stukken code werden er gepost en 5080 antwoorden werden er gegeven op vragen ivm met de werking van Drupal en dit in één week. Overtuigd? Wordpress en Joomla verbleken bij zoveel inzet.

Wat is het geheim van Drupal en waarom kiezen wij er voor? De sterkte van Drupal zit hem in de structuur en de ordening. Bij Drupal denk je op voorhand na over hoe je site er zal uitzien en waarvoor je hem wil gebruiken. Wil je bijvoorbeeld de leden van het bestuur van je vereniging voorstellen op je site, dan kan je net zoals je in Word zou doen een blad nemen en de persoon te beschrijven, foto, functie enz.. Zo zou je dit doen voor alle leden van het bestuur met het gevaar dat je de ene keer met de naam begint, de andere keer met de functie, de foto de ene keer links, de andere keer rechts... In Drupal denk je na wat er allemmaal aan bod komt. Je maakt velden aan met naam, functie, foto, adres, trefwoorden, tel,...Eens je dit hebt gedaan vul je de kast met de gegevens van elk bestuurslid en het wordt perfect op dezelfde manier voorgesteld. Er is meer, je kunt de voorstelling nadien wijzigen, het formaat van de foto's aanpassen, sorteren, filteren op de trefwoorden,...

We bekijken enkele Drupal sites en gaan op zoek mogelijke velden:

Artikelnaam, foto, prijs, beschikbaarheid, ... allemaal velden. Probeer zelf voor de andere sites.

Basic Page

De inhoud van een webpagina is natuurlijk zeer belangrijk. De CMS’sen besteden er dan ook zeer veel belang aan. WordPress, Joomla en Drupal hebben standaard een blanco blad waar je kunt inhoud toevoegen.  In Drupal heet dit blanco blad ‘basic page’. Je kunt er directe opmaak op toepassen (na installatie CKEditor)  en ook figuren invoegen (na installatie van IMCE). Je kunt het vergelijken met Word, maar dan met een automatische vertaling naar html. Alles wat je op deze basis pagina typt wordt naar html omgezet.  Drupal gaat echter veel verder… je kunt zelf een sjabloon maken om inhoud toe te voegen. Geen blanco blad meer… Als je bijvoorbeeld een immobiliën site beheert dan zal een blanco blad minder interessant zijn dan een formulier waar je prijs, oppervlakte, foto’s,… op een geordende manier kunt invoegen.  In Drupal heet zo iets een inhoudstype. ‘Basic Page’ is dus het simpelste inhoudstype van Drupal. Via inhoud kan je inhoud toevoegen. Er is nog een inhoudstype, standaard bijgeleverd: Article. Later daarover meer. We kiezen voor Basic Page:

We krijgen dit te zien:

Het is logisch dat onze pagina een naam moet krijgen. Er onder zie je de CKEditor. Hiermee kan je de inhoud opmaken of verfijnen. Als je met de muis een knop aanwijst, dan zal je zien waarvoor ze dienen. Broncode zal de html code tonen, iets waar je nog geen aandacht moet aan besteden. Er zijn ook knoppen om e plakken vanuit Word, spellingscontrole, … Waar zit de knop om het blad te maximaliseren? Citaten hebben een eigen opmaak. Hyperlinks kan je ook invoegen met het oneindig teken (liggende 8). Een interne link is ook mogelijk.  Probeer ze eens uit.

Als je nu het resultaat wilt zien op je site dan moet je eerst opslaan natuurlijk. We maken wel een menulink aan. Zo kunnen we makkelijk onze probeersels zien... Laat alle andere instellingen maar staan zoals ze staan. Later komen we daarop terug. Je ziet ook URL alias. Hier kan je in plaats van de steriele namen die Drupal aan een pagina geeft (node1, node2,...), zelf een alternatief schrijven. We zullen echter gebruik maken van Pathauto die dat automatisch doet..

Het resultaat:

 

Als je wilt foto’s toevoegen, dan doe je dit zo:

 

Aangezien de afbeelding nog niet op de server staat, zetten we hem er eerst op:

We selecteren de bewuste afbeelding en voegen hem in:

In ons ontwerp wordt hij zichtbaar:

Als je nu opslaat en je kijkt naar je site dan zal je hem niet zien! Inderdaad we werken voorlopig nog met een gefilterde html versie waar er geen plaats is voor afbeeldingen op de site.

Drupal is zo ingesteld at er ook, andere mensen kunnen meewerken aan je site. Je kunt die dan beperkingne opleggen wat ze al of nie tmogen doen. Figuren op je site zetten staat standaard af. We wijzigen de html instelling naar full.

En als je nu kijkt zal de figuur wel zichtbaar zijn. De CKeditor heeft ook een aantal nieuwe knoppen:

 Deze knop zorgt voor het invoeren van een iframe. Dit is eigenlijk een nieuw venster op je pagina waarmee je van bvb  een andere site informatie kunt tonen. Je ziet dat je een URL moet invoeren bij de instellingen. Niet populair bij Drupallers. Je bent eigenlijk geen baas meer over de inhoud van je site..

 Met deze knop kan je een teaser break invoeren.  Je ziet enkel een rode indicatie in het ontwerp. Wat is een teaser? Het is een manier van voorstellen waarmee je niet de volledige inhoud van je pagina toont. Dit heeft als voordeel dat je makkelijk een overzicht kunt geven (omdat het minder plaats inneemt) waarbij de bezoeker dan klikt op de inhoud die hij/zij interesseert. Dan pas wordt de volledige inhoud getoond. Een blog is daar een voorbeeld van. Je ziet de laatste inzendingen met slechts een beperkt aantal tekens. Staat er iets tussen waar je meer wilt over weten, dan klik je op voor de volledige inhoud.

Drupal werkt graag met teasers. Deze knop in de CKEditor is eigenlijk de minst gebruikte omdat Drupal in zijn structuur al een onderscheid maakt tussen teaser en volledige inhoud. Laat ons eens kijken…

Kies weergave. Je ziet dat de teaser standaard de eerste 600 tekens van de inhoud weergeeft. Je kunt dit ook nog instellen en wijzigen.

Drupal heeft ook nog een nadere manier… Stel dat je in je teaser een volledig andere tekst wilt dan in de full versie. Klik in je ontwerp op Samenvatting bewerken.

Een voorbeeldje…

Wanneer toont je site de teaser en wanneer de full versie? Overzichtspagina’s zoals de home page en taxonomie pagina’s (later meer daarover) tonen de teaser. Laat ons onze pagina eens promoveren tot de home page.

Onze eerste teaser..

Je ziet dat je met de instellingen in het inhoudstype en deze mogelijkheid voor het invoeren van een aparte tekst, de knop om een teaser break in te voeren niet hoeft te gebruiken.

Je bent nu in staat om inhoud toe te voegen aan je site met het inhoudstype ‘basic page’. Je bent ook in staat om een teaser en foto’s in te voegen.