HTML5 DEEL 1 STRUCTUUR VAN DE WEBPAGINA N. WITTEBROODT. In dit deel: 1.1 De wereld van het World Wide Web. 1.2 Wat is HTML en wat is het niet?

,

en

. Op dat moment worden het geen elementen meer genoemd maar tags (“etiketten”). De elementen in HTML bestaan over het algemeen uit 3 bestanddelen: begintags, eindtags en inhoud. De meeste elementen hebben begintags en eindtags. De begintag is het element tussen punthaken: , ,

,

en

. De eindtag wordt gevormd door voor de naam van het element een schuine streep (forward slash) te plaatsen, ook weer tussen punthaken: , ,
,

en

. Als een browser een begintag tegenkomt, zal hij alle tekst die erop volgt beschouwen als behorend tot het type dat door de begintag wordt gedefinieerd. Pas als de browser een eindtag tegenkomt, wordt aan die situatie een einde gemaakt. Omdat elementen vaak worden genest, betekent een nieuwe begintag niet automatisch dat de vorige begintag niet meer geldig is. In feite trekt de browser uit de confrontatie met een nieuwe begintag geen enkele conclusie over iets anders dat die begintag. De browser accepteert alles wat je hem voorschotelt heel letterlijk. Als voorbeeld de opbouw van een paragraaf met behulp van het P element.

Deze tekst vormt een paragraaf.

Webdesign

Deel 1

HTML5

11

Dit is belangrijk Elke element heeft een naam. De begintag bestaat uit de naam van het element tussen punthaken. De eindtag begint altijd met een slash gevolgd door de naam van het element, dit alles tussen punthaken. De meeste elementen bevatten inhoud tussen begintag en eindtag. Sommige elementen hebben geen inhoud. Sommige elementen hebben geen eindtag. Bij de bespreking van elementen zal ik steeds aangeven of het element inhoud heeft en of een eindtag vereist is. Het onderscheid tussen hoofdletters en kleine letters is voor elementen niet van belang: de namen van de elementen zijn dus case-insensitive, voor een browser zijn TITLE, Title, title één pot nat. Om het lezen van de markuptaal makkelijker te maken is het aangeraden de elementen in hoofdletters te schrijven. Tussen de begintag en de eindtag van een element plaats je de inhoud. Een hoofdoorzaak voor het ontstaan van fouten in HTML-documenten is het vergeten van de slash in de eindtag. Wees nauwkeurig bij het typen van HTML, spel de namen van de tags precies en vergeet noch de punthaken, noch de slash in een eindtag. Kort gezegd:  In een editor maak je een HTML-tekstbestand.  De browser leest en interpreteert de HTML-markeringen of HTML-tags.  Tags staan tussen punthaken; ze bepalen het type effect dat je bekomt.

1.4.3

Attributen bieden mogelijkheden

Elementen hebben attributen die flexibiliteit geven bij het schrijven van HTML. Elk element heeft eigen, unieke attributen. Vanzelfsprekend zijn er patronen te ontdekken tussen overeenkomstige elementen, maar je kan niet zo maar attributen instellen voor een willekeurig element. 1.4.3.1 Attributen en waarden Attributen hebben een waarde. Attributen en waarden zijn onlosmakelijk met elkaar verbonden. Steeds als je een attribuut gebruikt, zal je die ook een waarde moeten geven. Die waarde plaats je tussen dubbele aanhalingstekens: src=”logo.gif”

width=”400”

height=”200”

Voorbeeld binnen een tag: Deze tag roept de afbeelding logo.gif aan met een breedte van 400 pixels en een hoogte van 200 pixels.

N. Wittebroodt

Toegepaste Informatica

Grafiweb

12

1.4.4

Speciale tekens: entiteiten

De tekst tussen HTML-tags, evenals de tags en hun argumenten, moeten worden weergegeven in een beperkte tekenset. In onze voorbeelden is dat steeds de verzameling der gewone hoofden kleine letters, de cijfers, en enkele leestekens. Speciale tekens en accenten moeten worden weergegeven in de volgende vorm: een ampersand (&-teken) gevolgd door de standaardbenaming van het speciale teken gevolgd door een kommapunt(;). Een dergelijke codering van een karakter noemt men in HTML een karakter-entiteit. In HTML-code kan je een entiteit op 3 manieren schrijven. Welke manier je ook kiest, een entiteit begint altijd met een ampersand (&) en eindigt altijd met een puntkomma.  Tekstnotatie: dit is verreweg de gemakkelijkste manier om entiteiten weer te geven. Er is echter niet voor iedere entiteit een tekstnotatie, enkel voor de meest gangbare. © is bijvoorbeeld de entiteit voor het copyrightsymbool. Bij tekstnotatie voor entiteiten geldt bij wijze van uitzondering binnen HTML dat het onderscheid tussen hoofdletters en kleine letters van belang is.  Decimale notatie: de decimale notatie voor het copyrightsymbool is ©.  Heximale notatie: programmeurs houden van het hexadecimale stelsel. Ze typen liever © dan ©. Alle hexadecimale waarden worden voorafgegaan door een kleine letter x. Enkele vaak gebruikte karakter-entiteiten zijn: Tekstnotatie

Hexadecimale notatie

Resultaat

 

 

vaste spatie

¨

¨

trema

©

©

copyrightteken

«

«

dubbel kleinerdanteken

¬

¬

niet-teken

­

­

afbreekstreepje

®

®

geregistreerd handelsmerk

°

°

gradenteken

±

±

plusminusteken

´

´

apostrof

»

»

dubbel groterdanteken

¼

¼

eenvierde in breuknotatie

Webdesign

Deel 1

HTML5

13

1.4.5

Basisstructuur HTML: HEAD en BODY

Een HTML-document bestaat uit twee delen: de HEAD en de BODY. De HEAD wordt gedefinieerd met het HEAD element en bevat informatie over het document, de BODY wordt gedefinieerd met het BODY element en bevat de feitelijk inhoud van het document. Het HTML element markeert het begin en einde van een HTML-document en geeft aan dat het document HTML-code bevat. Een HTML-document heeft de volgende opbouw: Informatie over het document. Inhoud document.

1.4.6

Het begrip nesten

Hiervoor is al even aan de orde geweest dat sommige elementen worden genest in andere elementen. Je kan informatie op veel verschillende manieren nesten. Zo kan je vrijwel elk element nesten in het element BODY, met uitzondering van het element HEAD. Sommige elementen kunnen niet worden genest, bijvoorbeeld een link in een link. Het belangrijkste bij nesten is dat je het binnenste element steeds afsluit voordat je het buitenste element afsluit. Een voorbeeld: Volgende tekst moet verschijnen op de site: Over the Web Presents Stay In Touch. Het element voor cursief is I, en voor vet is B. Syntactisch onjuiste HTML: Over the Web Presents Stay in Touch. Syntactisch wel juist: Over the Web Presents Stay in Touch.

N. Wittebroodt

Toegepaste Informatica

Grafiweb

14

1.5 De 1ste webpagina 1.5.1

De basistags

De basisstructuur verder uitgewerkt: <META name=”author” content=”hier komt je naam”> <META name=”keywords” content=”hier komen de sleutelwoorden”> <TITLE>Restaurant Biryani Ronse Inhoud document.

1.5.2

DOCTYPE declaratie

DOCTYPE geeft aan van welk type het document is. Dat is in het geval van HTML5 reuze eenvoudig: het type is html. HTML5 kent – in tegenstelling tot HTML 4.1 – maar één soort doctype. Het zetten van de doctype in HTML5 is trouwens niet meer verplicht maar wel zo netjes om te gebruiken. Deze code plaats je gans bovenaan de HTML-structuur.

1.5.3

Een titel op een pagina

Met het TITLE element wordt een titel voor het document vastgelegd. Deze titel wordt niet weergegeven in het documentvenster, maar in de titelbalk of op het tabblad van de browser. De titeltag komt in de HEAD van het document. Daarnaast wordt de titel door zoekmachines geplaatst als kopje boven een zoekresultaat. Elk document moet een TITLE element bevatten. Het is verstandig een titel te gebruiken, die duidelijk maakt waar het document over gaat en op basis waarvan bijvoorbeeld gebruikers van een zoekmachine kunnen beslissen, of het bekijken van het document zinvol is. Het TITLE element wordt bijvoorbeeld als volgt gebruikt: <TITLE>Restaurant Biryani Ronse

Webdesign

Deel 1

HTML5

15

 Oefening 1 1. Open kladblok. 2. Maak een HTML-document. Begin met de Doctype declaratie. 3. Maak vervolgens de basisstructuur aan: <TITLE> Hier komt de titel van de titelbalk Wat is websitebouwen toch gemakkelijk!

4. Maak een map Oefeningen. 5. Bewaar in deze map onder eerstewebpagina.html. 6. Bekijk nu het resultaat in de Windows-verkenner:

1.5.4

Het META-element

1.5.4.1 De auteur identificeren Naast de TITLE kan je ook nog metadata in de HEAD van een HTML document plaatsen. Metadata is informatie over de informatie op de pagina. Daartoe behoren onder andere de naam van de auteur, de gebruikte software, eventueel de bedrijfsnaam, contactgegevens enzovoort. Ik ga op deze plaats niet dieper in op de syntaxis van het META-element. Je wilt de auteur van de pagina vermelden en daar leent het META-element zich uitstekend voor: <META name=”author” content=”natascha”>

Een META-element heeft minstens 2 attributen. In het voorbeeld heb ik er 2 gebruikt. Het META-element is uniek omdat de inhoud niet tussen een begintag en een eindtag staat, maar wordt verpakt in een attribuut content. Bovendien heeft het META-element geen eindtag. Je zal het META-element voor veel doeleinden leren gebruiken. Over het algemeen wordt van het META-element niets weergegeven in de browser.

N. Wittebroodt

Toegepaste Informatica

Grafiweb

16

1.5.4.2 Trefwoorden voor zoekmachines Ook bij HTML is het belangrijk vanaf het begin de goede dingen aan te leren. Het opnemen van een META-element met trefwoorden is één van die goede gewoonten bij het schrijven van een webpagina: <META name=”keywords” content=”restaurant, resto, ronse, renaix, indie, indisch, oudenaarde, trendy, eten, food, lounge, modern, suggestie, aanrader, menu, dessert, voorgerecht, hoofdgerecht, harmonie, sfeer, specialiteit, chef, keuken, uitstekend, service, maandmenu”> Via het attribuut content geef je een lijst met trefwoorden, van elkaar gescheiden door komma’s. Voor sommige zoekmachines speelt het onderscheid tussen hoofdletters en kleine letters een rol dus zou het slim zijn om 3 verschillende trefwoorden op te nemen: guestbook, Guestbook, Guest Book. Weer andere zoekmachines zullen dat helaas echter beschouwen als een vorm van spamming waarbij je probeert een hogere prioriteit te krijgen in de lijst met zoekresultaten.

Een opmerking over zoekmachines De meeste zoekmachines gebruiken de metadata met trefwoorden om je pagina op te nemen in de index. Er zijn regels voor dit soort dingen, maar die verschillen van zoekmachine tot zoekmachine. Op het web is veel te vinden op de methoden die je kan aanwenden om een webpagina hoger te krijgen in de index van zoekmachines. Zo zal de ene zoekmachine automatisch alle woorden negeren die meer dan 7 keer voorkomen in de string met trefwoorden, ook al worden ze op een andere manier gepresenteerd. Het is belangrijk kennis te nemen van de regels die zoekmachines hanteren. Het wordt steeds moeilijker ze voor de gek te houden.

1.5.4.3 De tekensetbepalen De tag <META> kan dus onderdak bieden aan verschillende attributen, de ene al belangrijker dan de andere. Het attribuut charset is een aanrader. Dit attribuut bepaalt uit welke tekenset de browser de letters, cijfers, leestekens en meer moet halen. <META charset="UTF-8">

 Oefening 2 1. 2.

Voeg in het document eerstewebpagina.html je naam toe evenals een lijst van sleutelwoorden. Vermeld eveneens de tekenset. Gebruik hiervoor het META-element. Bewaar onder dezelfde naam.

Webdesign

Deel 1

HTML5

JOOMLA WEBONTWERP

 

In dit deel:

4.1

Wat is Joomla?

4.2

Installatie

4.3

De Joomla website verkennen

4.4

Artikelen

4.5

Soorten webpagina’s

4.6

Menu’s

4.7

Extensies in Joomla

4.8

Templates downloaden en aanpassen

4.9

Gebruikers laten inloggen en bijdragen

4.10 De site publiceren op een webserver 4.11 Beveiligen van admin & site 4.12 De site promoten 4.13 Artisteer

N. WITTEBROODT   

DEEL

4

283

4.1 Wat is Joomla? 4.1.1

Situering

Joomla is een Content Management System, ook wel kortweg CMS genoegd. Een CMS is een software-oplossing, waarmee het mogelijk is om een website te maken, te vullen en te onderhouden. In meer algemene zin is een CMS een systeem om inhoud (informatie) te beheren. Dat omvat vrijwel elk informatiesysteem, al dan niet geautomatiseerd. In de praktijk wordt de term CMS echter gebruikt voor systemen waarmee websites worden gemaakt. Joomla is een zogenaamd open source CMS. Dat betekent dat de programmacode (meestal broncode genoemd) vrij beschikbaar is. Bij commerciële aanbieders is dat meestal niet het geval. Je mag het systeem dan gebruiken, maar je kan zelf niet wijzigen of uitbreiden. Bij een open-source systeem is dat juist de kracht. Het systeem is “open” dat wil zeggen dat iedereen in feite verbeteringen kan in aanbrengen. En dat gebeurt ook. Naast een zeer grote groep enthousiaste en vaak kundige gebruikers kent Joomla ook een core team met ontwikkelaars. Dit zijn de programmeurs die zich actief bezig houden met het verbeteren van het systeem. Joomla is ondergebracht in een stichting zonder winstoogmerk, met de naam Open Source Matters.

4.1.2

Waarom een CMS?

Waarom zou je eigenlijk een CMS gebruiken? Er zijn toch tal van andere mogelijkheden om een website te bouwen? Denk aan het gebruik van bijvoorbeeld Dreamweaver, Flash… Dit zijn ook heel goede programma’s voor het bouwen van een website. Het grote voordeel echter van het inzetten van een CMS is dat het je in staat stelt om de informatie en functies op je website op een goede en structurele manier te onderhouden. Je kan eenvoudig met meerdere gebruikers aan een website werken, waarbij niet iedereen over diepgaande kennis hoeft te beschikken. Een CMS stelt je in staat om de inhoud van je site dynamisch te maken. Dat wil zeggen dat de informatie die je plaatst weer geactualiseerd en vernieuwd wordt. Grote websites maken daarbij allemaal gebruik van een CMS. Zonder een dergelijk hulpmiddel zou de website niet te onderhouden zijn.

4.1.2.1 Voordelen • •

Joomla is een zeer gebruiksvriendelijk Content Management Systeem. Dit betekent dat je kosteloos zelf de website kan bijhouden zonder enige kennis van HTML, FTP of CSS. Extra kennis kan natuurlijk geen kwaad, integendeel. Joomla scheidt de opmaak en de inhoud van de website netjes van elkaar.

N. Wittebroodt

Toegepaste Informatica

Grafiweb

284

• •

• • •

• • •

•

Joomla heeft zich inmiddels bewezen als één van de beste systemen op dit gebied. Dit blijkt wel uit het feit dat wereldwijd miljoenen websites gebruik maken van de flexibiliteit van Joomla. Joomla maakt het mogelijk de site heel gemakkelijk te beheren. Je kan nu al een berichtje schrijven voor de homepage van volgende maand, en Joomla zorgt er automatisch voor dat het verschijnt op de datum die jij bij het schrijven prikt. Ook het toevoegen en bijhouden van hyperlinks naar tientallen of honderden pagina’s gaat heel gemakkelijk. Joomla houdt hyperlinks voor je bij en zorgt er bijvoorbeeld voor dat, als je een nieuwspagina toevoegt, automatisch een link verschijnt in de lijst met laatste nieuws. Joomla is uitermate geschikt voor dynamische en interactieve websites. Joomla is open source software en tevens gratis verkrijgbaar. Dit in tegenstelling tot andere Content Management Systemen die over het algemeen zeer prijzig zijn. Open source software heeft zich inmiddels bewezen als betrouwbaar alternatief voor dure systemen. Het open source karakter van Joomla heeft als gevolg dat wereldwijd continu wordt gewerkt aan nieuwe uitbreidingen op het systeem. De mogelijkheden om een Joomla website uit te breiden zijn daardoor bijna onbeperkt. Een webwinkel, nieuwsbrievensysteem, fotogalerij, meerdere talen, formulieren: praktisch alles is mogelijk binnen het Joomlaframework. Joomla wordt ondersteund door een zeer grote wereldwijde community van actieve developers. Dit betekent dat het systeem voortdurend wordt doorontwikkeld en verbeterd. De hoeveelheid informatie en ondersteuning die op het gebied van Joomla te vinden is op het internet is zeer omvangrijk. Het aantal bedrijven dat diensten aanbiedt op het gebied van Joomla is de laatste jaren explosief gegroeid. Ben je niet tevreden over het bedrijf dat jouw Joomla-website heeft gebouwd of onderhoudt? De universaliteit van het systeem maakt dat je zeer gemakkelijk kan overstappen naar een andere dienstverlener. Kortom: je bent niet langer afhankelijk van één, wellicht duur, webdesign- of reclamebureau. Joomla is een webbased-applicatie. Een internetverbinding is het enige wat je nodig hebt om een website te updaten en onderhouden.

4.1.2.2 Nadelen • • • •

Door het volledige open source-karakter ben je voor support op de behulpzaamheid van de community aangewezen, of je moet hiervoor een commerciële aanbieder in de arm nemen. De ontwikkeling van Joomla verloopt relatief langzaam en de toekomst blijft onzeker. Joomla kent voor beginners een wat steile leercurve. Door de populariteit van het systeem worden Joomla sites nog wel eens het slachtoffer van hackers. Daarom wordt in deze cursus uitgebreid aandacht besteed aan de beveiliging van je website.

Webdesign

Deel 4

Joomla

285

4.1.3

Van welke technologieën maakt Joomla gebruik?

4.1.3.1 Databases Wanneer je gebruikmaakt van een CMS, wordt de inhoud van de website (de tekst en de verwijzingen naar afbeeldingen) vrijwel zonder uitzondering opgeslagen in een database. Er zijn verschillende soorten databases in omloop: van databases voor kleine, lokale toepassingen tot complexe systemen die door de grootste multinationals worden gebruikt. De programmacode van het CMS zorgt ervoor dat de juiste informatie op het juiste moment uit de database wordt opgehaald en wordt getoond in de browser aan de bezoeker.

4.1.3.2 PHP De programmacode van het CMS wordt geschreven in een bepaalde programmeertaal. In Joomla is dat PHP, een techniek die in veel open source-projecten wordt ingezet. De PHPcode haalt gegevens uit de database op en combineert dit tot HTML.

4.1.3.3 Samengevat • • •

Joomla maakt gebruik van de database MySql hier wordt alle inhoud bewaard. Joomla is ontwikkeld in de programmeertaal PHP met PHP wordt inhoud uit de databank gehaald en worden er webpagina’s gegenereerd. Joomla stuurt de informatie naar de browser van de bezoeker door middel van HTML en CSS, waarbij door de zogenaamde templates wordt bepaald welke informatie waar getoond moeten worden. Templates ontwikkelen doe je mede met behulp van PHP.

N. Wittebroodt

Toegepaste Informatica

Grafiweb

286

In bovenstaand schema zie je dat Joomla volledig op webserver draait. Backend is hierbij toegankelijk voor beheerders (met gebruikersnaam en wachtwoord). Hier kan de inhoud en indeling aangepast worden. Frontend is de site die de bezoekers te zien krijgen.

4.1.4

Joomla tot nu toe

Joomla is in feite een verdere ontwikkeling van Mambo, eveneens een open source CMS dat begin deze eeuw snel populair werd. Van Mambo was zowel een commerciële als een open source-versie in omloop. In 2005 kwam er echt een kink in de kabel. De ontwikkelaars van de open source variant waren het niet eens met de strategie van het Australische bedrijf Miro, dat eigenaar was van Mambo. Uiteindelijk leidde dat tot een breuk waarbij beide projecten afhankelijk van elkaar werden voortgezet. Daarmee had de open source-versie een nieuwe naam nodig: Joomla was geboren. In september verscheen Joomla 1.0. Joomla 3.0 is eind september 2012 vrijgegeven. In deze versie is vooral de gebruikersinterface behoorlijk vernieuwd en verbeterd. Door het toepassen van Bootstrap is het gehele CMS ook

Webdesign

Deel 4

Joomla

287

op mobiele apparaten toegankelijk. Versie 3.0 is een kortetermijn release, support op deze versie vervalt in maart 2013. In het voorjaar van 2013 wordt versie 3.1 verwacht, gevolgd door Joomla 3.5 in het najaar van 2013 welke weer een langetermijnondersteuning zal kennen.

4.1.5

Joomla 3: Nieuwe basis voor de vormgeving: Twitter Bootstrap

4.1.5.1 Bootstrap De code van de beheeromgeving-lay-out is nu gebaseerd op Bootstrap, gemaakt door de ontwikkelaars van het sociale medium Twitter. Bootstrap heeft verder niets met Twitter te maken; het is een gratis beschikbaar framework waarmee het eenvoudiger wordt snel de vormgeving van websites te creëren. Bootstrap bevat kant-en-klare CSS voor lay-outs, buttons, formulieren, iconen, tabelstijlen en talloze andere vormgevingselementen. Het idee erachter is dat webontwikkelaars niet vanaf nul hoeven te beginnen: Bootstrap biedt ze een betrouwbare, op de nieuwste normen gebaseerde codebibliotheek voor elk project. In plaats van zelf zo’n bibliotheek te ontwerpen, sluiten de Joomla-ontwikkelaars nu aan bij de populaire Bootstrapstandaard. Joomla 3 wordt geleverd met een nieuwe template die op Bootstrap gebaseerd is: Protostar.

4.1.5.2 Meer eenheid in design Tot Joomla 2.5 moest elke ontwikkelaar voor een component een volledig eigen interface ontwerpen. Het gevolg is dat er geen twee componenten zijn in Joomla die op elkaar lijken; elk component heeft een eigen schermindeling, knoppen en stijlen. Dat levert extra werk op voor ontwikkelaars en gebruikers, die steeds met een “nieuw” programma binnen het programma moeten werken. Ook daar maakt de integratie van Bootstrap nu een einde aan. Doordat er een vaste basisset interface-elementen beschikbaar is, is het nu mogelijk om elke uitbreiding op dezelfde manier in te delen en allemaal dezelfde knoppen te gebruiken.

4.1.5.3 Klaar voor het mobiele web Een van de grote voordelen van Bootstrap is dat het geschikt is voor het mobiele web. Daar profiteren zowel sitebeheerders als sitebezoekers van, want in Joomla 3.0 wordt Bootstrap zowel voor de beheeromgeving als voor de nieuwe voorbeeldtemplates gebruikt. De responsive techniek zorgt ervoor dat de lay-out zich automatisch aanpast aan schermen van verschillende afmetingen, van desktop tot smartphone. De kolommen, de menu’s en dergelijke passen zich allemaal aan aan de verkleinde weergave. Dat geldt ook voor de beheeromgeving, waarmee het mogelijk wordt om een Joomla-site te beheren vanaf een smartphone.

N. Wittebroodt

Toegepaste Informatica

Grafiweb

288

4.1.6

Wat kan je niet met Joomla?

De basisfunctionaliteit van Joomla is eigenlijk niet bijzonder groot. Maar de community met daarbij alle extensies die in de afgelopen jaren gebouwd zijn, maken van Joomla vrijwel een totaaloplossing. Veel zal dus afhangen van hoe ver je wilt gaan bij het maken van aanvullende oplossingen op basis van het zogenaamde Joomla-framework. Een paar voorbeelden waarbij je misschien beter een ander oplossing kiest:

4.1.6.1 Versiebeheer Veel contentmanagementsystemen hebben de (goede) eigenschap om verschillende versies van een document of artikel te kunnen bewaren en beheren. Vooral bij bedrijfsmatige toepassingen is dat nog wel eens een vereiste. Joomla kent geen ingebouwd versiebeheer voor content. Je hebt met behulp van extensies wel wat mogelijkheden tot je beschikking voor versiebeheer van documenten, maar in het algemeen kan je stellen dat er oplossingen zijn die hiervoor beter geschikt zijn.

4.1.6.2 E-commerce Joomla kent een aantal extensies waar mee het goed mogelijk is een webshop op te zetten. Virtuemart is hiervan de bekendste variant, deze zal later in deze cursus nog aan bod komen. Maar wanneer het gaat om het bedrijven van puur e-commerce dan is Joomla gewoon niet de beste oplossing. In de open source-hoek is Magento bijvoorbeeld een beter alternatief. Joomla kan een heel eind, maar kan niet op tegen het geweld van de grotere partijen in de markt.

4.1.6.3 Helpdesk Joomla biedt een aantal uitbreidingen om een helpdesk of klantenserviceafdeling mee in te richten. De functionaliteit van deze extensies is echter vrij beperkt en de betere uitbreidingen zijn bovendien van commerciële aanbieders. Joomla biedt de basis, maar schiet tekort voor grotere en professionele organisaties.

4.1.7

Eigen ontwerp of Joomla-template?

Wanneer je met Joomla aan de slag gaat maak je al vrij snel een belangrijke principekeuze: ga je werken met bestaande template of maak je een geheel nieuw ontwerp op maat? Is er sprake van een persoonlijke website voor een hobby of bijvoorbeeld een vereniging dan is het vaak goed mogelijk om te werken met standaard Joomla-templates. Je installeert ze in Joomla en binnen een paar tellen heeft je website een geheel nieuw uiterlijk. Standaardtemplates zijn zowel gratis als betalend verkrijgbaar. Daarmee hebben we in totaal drie mogelijkheden: Een ontwerp op maat met een op maat gemaakte template. Een gratis standaardtemplate. Een betaalde standaardtemplate door een commerciële aanbieder.

Webdesign

Deel 4

Joomla

289

4.1.8

Wat is het verschil tussen Dreamweaver en Joomla?

Werken met een CMS verschilt sterk van het maken van statische websites, waarbij je pagina voor pagina maakt en die uploadt naar een webserver. In Joomla bestaan geen webpagina’s. Joomla pakt stukje bij beetje de inhoud van de pagina bij elkaar uit een database. Alleen de bezoeker van de site ziet de volledige webpagina’s die Joomla samenstelt, jij als webbouwer werkt met de blokken waaruit de webpagina’s bestaan. Wat zijn dat voor blokken? Denk aan een blok met een menu, een blok met een afbeelding, een blok met artikeltekst, enz… Welke blokken Joomla precies bij elkaar pakt, en in welke volgorde en lay-out die blokken op het scherm verschijnen, dat bepaal jij – niet per pagina – maar per blok. Via verschillende instellingen bepaal je bijvoorbeeld waar het blok verschijnt dat het menu van de site bevat. In Artikelbeheer bepaal je welk artikel verschijnt in de pagina. En met Modulebeheer kies je welke extra modules er in de blokken elders op de pagina te zien zijn, denk bijvoorbeeld aan een banner of een newsflash. Als je op één plaats de instellingen van een blok verandert (bv. van een menu), dan stel je dat direct in voor verschillende pagina’s. Dreamweaver

Joomla

Grafische omgeving waarin je de volgende Is een framework waarmee je een dynamisoorten websites kan bouwen: sche website kan bouwen zonder dat er code aan te pas komt. Statisch: door enkel gebruik te maken van HTML, CSS en JavaScript. Het is meer op administratieve wijze een website in elkaar zetten. Dynamisch: door naast HTML, CSS en JavaScript een serverside-taal te gebrui- Kan door verschillende personen onderhouken, zoals PHP of ASP. den worden. Dit laatste betekent zelf code schrijven om te communiceren met een databank en zelf de databank te genereren.

N. Wittebroodt

Toegepaste Informatica

Grafiweb

290

4.2 Installatie 4.2.1

Inleiding

Joomla maakt gebruik van PHP scripts om HTML te combineren met de gegevens die opgeslagen zijn in de MySQL database. Dat alles wordt aangestuurd door een Apache Webserver. Om alles lokaal te kunnen laten draaien, gaan we een Apache webserver voor Windows op de pc installeren. De Apache server voor Windows luistert naar de volgende naam: WAMP: W(indows) A(pache) M(ySQL) en P(HP). Voor Linux of Apple is XAMPP beschikbaar. Eerst hebben we de twee pakketten nodig voor we kunnen beginnen. Download WAMP te vinden op de website: www.wampserver.com en sla het bestand op in je persoonlijke map. Download Joomla te vinden op de website http://www.joomla.org/ en sla dit op in je persoonlijke map.

4.2.2

Installeren van WAMP Dubbelklik op het bestand WampServer. Klik op Next om verder te gaan.

Selecteer I accept the agreement om verder te kunnen gaan. Klik op Next.

Webdesign

Deel 4

Joomla

291

In het venster Selecteer locatie geef je de map op waar je WampServer wilt installeren. De folder \wamp wordt aangegeven op de C: schijf. In een submap in deze folder komen ook de Joomla websites te staan die je gaat maken. Het is echter ook mogelijk om WampServer te installeren in een map in Mijn documenten. Kies de locatie en druk op Next.

De installatie vraagt je nog of je een snelkoppeling op je bureaublad of in de snelstartbalk wilt. Klik op Next.

Voor je op Install klikt zie je nog een overzicht van de gekozen parameters.

Als alles goed gaat, worden de bestanden uitgepakt en geïnstalleerd. Het pakket stelt een standaardbrowser voor. Selecteer desnoods een ander. Klik op Openen. N. Wittebroodt

Toegepaste Informatica

Grafiweb

292

De installatie vraagt naar je e-mailparameters. Laat dit ongewijzigd aangezien we dit voorlopig niet gebruiken. Klik op Next.

De installatie is beëindigd. WampServer is geïnstalleerd en je kan een dynamische website zoals Joomla met PHP en MySQL draaien op het systeem.

. In de statusbalk zie je nu volgend groen icoontje: Ga naar Startknop – Alle programma’s – WampServer – Start Wampserver of dubbelklik op de snelkoppeling op het bureaublad indien dit rood zou zijn.

Webdesign

Deel 4

Joomla

293

4.2.3

Maken van een (lege) MySQL databank Open de browser en geef localhost in de adresbalk in.

Druk op de hyperlink phpMyAdmin.

Noot: je kan via N. Wittebroodt

rechtstreeks naar phpmyadmin. Toegepaste Informatica

Grafiweb

294

Klik op het tabblad Databanken.

Vul het veld Nieuwe databank aanmaken in (bijv. intro_joomla) en klik op Aanmaken. Als alles goed verloopt verschijnt de boodschap dat de databank is aangemaakt.

4.2.4

Installeren van het pakket Joomla Maak een map in c:\wamp\www met als naam intro_joomla. Download Joomla te vinden op de website http://www.joomla.org. Dit is een zip-file. Unzip en plaats de bestanden onmiddellijk in: c:\wamp\www\intro_joomla. Open opnieuw localhost. Bij Your projects vind je intro_joomla. Klik op deze link.

Webdesign

Deel 4

Joomla

295

4.2.4.1 Configuratie In deze stap stel je de configuratie van de website verder in: De eerste stap is het kiezen van de taal. Hier werd de Joomla 3 Nl gedownload. In het volgende veld geef je de naam van de website in. In vele gevallen de naam van het bedrijf, organisatie, vereniging en dergelijke. Hier: intro_joomla. Bij Beschrijving geef je een korte beschrijving van de website in. Opgelet: deze wordt gebruikt door zoekmachines (max. 20 woorden). Geef in het volgende veld het e-mailadres in waar naar het systeem berichten moet versturen. Dit is het e-mailadres van de super-administrator van de website Bij Gebruikersnaam administrator geef je vanzelfsprekend een gebruikersnaam in. Je kan de standaardgegevens admin laten staan. In het volgende veld Wachtwoord administrator geef je het wachtwoord in waarmee je als super-administrator kan inloggen. Zeker onthouden!! Geef in deze testsite als wachtwoord joomla1 in. In het onderste veld herhaal je het wachtwoord. Klik op Volgende.

4.2.4.2 De Database configuratie In deze stap geef je de gegevens van de MySQL database in:

N. Wittebroodt

Toegepaste Informatica

Grafiweb

296

Databasetype: laat deze staan op MySQL. Naam host: de naam van de host of server: localhost. Gebruikersnaam: dit is de gebruikersnaam van de database, hier is dit root. Wachtwoord: wachtwoord voor de database, dit mag je leeg laten. Naam database: hier intro_joomla in. Tabelvoorvoegsel: mag je zo laten. Klik op Volgende.

4.2.4.3 Samenvatting In deze laatste stap kan je al dan niet voorbeelddata installeren, wordt nog eens een samenvatting gegeven van de hoofdconfiguratie en de database configuratie. Daarnaast geeft Joomla een overzicht van de Pre-installatie controle.

Klik bij Installeer voorbeelddata op Leer Joomla Engelse (GB) voorbeelddata. Op die manier kan je een voorbeeld website installeren.

Webdesign

Deel 4

Joomla

297

Bij Pre-installatie controle controleert Joomla of alle vereisten aanwezig zijn om Joomla volledig te kunnen installeren. In de bovenste lijst moeten alle opties op Ja staan. Klik op Installatie.

4.2.4.4 Voltooien

Joomla vraagt in deze laatste stap om de installatiemap te verwijderen: klik op Verwijder de installatie map. Klik op de knop Website om de Joomla website te bekijken (frontend) of op de knop Administratie om in te loggen op het beheergedeelte (backend).

N. Wittebroodt

Toegepaste Informatica

Grafiweb

298

4.3 De Joomla website verkennen 4.3.1

De Joomla frontend

4.3.1.1 Inleiding Als je als bezoeker naar je website kijkt, zie je de zogenaamde Joomla frontend. De frontend is een verzamelnaam voor alle pagina’s die een bezoeker kan bekijken.

4.3.1.2 Overzicht van de onderdelen van Joomla website Open een browser en geef in de adresbalk localhost/intro_joomla in. Je komt op de frontend van de website terecht. Wanneer je kijkt naar de indeling van de pagina’s op de homepage, dan is het belangrijk dat je die indeling gaat herkennen. Joomla-sites zijn vaak op dezelfde manier opgebouwd. Hoewel je heel goed kan afwijken van de standaardindeling zijn er toch een aantal punten die je op de Joomla-site zal tegenkomen.

Het topmenu: een menu aan de bovenkant van de pagina dat naar de hoofdrubrieken leidt. Een afbeelding met het logo van de site. Webdesign

Deel 4

Joomla

299

Inhoud: het centrale deel van de webpagina met de veranderende content (mainbody). Zoekfunctie. Twee menu’s: het menu About Joomla! en het menu This Site. Het broodkruimelspoor: een rij hyperlinks die aangeven waar je je bevindt op de site. Loginformulier: om bezoekers te lagen inloggen of zich te laten registreren. Samengevat kan je ook zeggen: Formulieren en menu’s links op de pagina zijn modules. Berichten, teksten en info zijn artikels, deze kunnen nog verder ondergebracht worden in hoofdcategorieën en categorieën. De lay-out wordt bepaald door een template. Een template kan gemakkelijk door een andere vervangen worden.

4.3.1.3 Soorten menu’s Top menu (bovenste menu): snelle toegang tot de belangrijkste info zoals: home, contact, taal… Main menu (hoofdmenu): centraal navigatieblok, via deze menu moet de bezoeker naar de homepage kunnen terugkeren. Vanzelfsprekend moet deze op elke pagina verschijnen. User menu (extra menu’s): afhankelijk van de inhoud van de pagina kan dit menu bepaalde items tonen (hoeft niet steeds op dezelfde plaats getoond te worden).

4.3.1.4 Soorten inhoud Inhoud kan opgebouwd zijn op verschillende manieren en kan bestaan uit verschillende zaken: Statisch: een bericht, artikel… Dynamisch: een dynamische lijst met links (bijv. Google) een winkel (bijv. Dell) of een rommelmarkt (Ebay), de laatste nieuwtjes… Volledig dynamisch: bezoekers kunnen zelf inhoud toevoegen, veranderen of verwijderen (bijv. Wikipedia).

4.3.1.5 Functies Functies in Joomla zijn modules die de website interactief maken zoals: Login gebied: nodig indien je de website wilt splitsen in een openbaar en beschermd gebied. Na registratie kan de bezoeker het beschermde gebied betreden. Enquêtes: om de mening van bezoekers te vragen. Feeds: gebied waar informatie die verzameld is, getoond wordt. Zoekveld: om de (volledige) website te doorzoeken.

N. Wittebroodt

Toegepaste Informatica

Grafiweb

300

4.3.1.6 Template, de decoratieve elementen In een template wordt de look en de feel vastgelegd van een website. Een logo. Kleurenpalet, lettertype en –grootte. Stijl, schikking van informatie.

4.3.2

De Joomla backend

4.3.2.1 Inleiding Naast de frontend van je website kent Joomla ook een backend. Dit deel van de website is niet toegankelijk voor bezoekers. Je gebruikt het om je website te vullen en te beheren.

4.3.2.2 De Joomla Login Open een browser en geef in de adresbalk localhost/intro_joomla/administrator in. Volgend dialoogvenster verschijnt: Vul gebruikersnaam admin en wachtwoord in (hier: joomla1). Het controlepaneel wordt geopend. Van hieruit kan je alle functies benaderen die je nodig hebt om de website te vullen.

4.3.2.3 Eerste werk: veranderen van de taal Log in als Joomla administrator. Selecteer Language Manager in het Controlepaneel. Het gelijknamig scherm wordt geopend:

Merk op dat er een link is voor de frontend (Installed Site) en de backend (Installed Administrator). Eerst installeren we Nederlands voor de frontend. Klik op Install language rechtsboven. Selecteer Duch. Klik op Install. Als alles goed verlopen is, krijg je volgend bericht: Keer terug naar het Controlepaneel – Language manager. Dutch staat nu in de lijst. Klik op het keuzerondje. Klik vervolgens op Default rechtsboven. Stel in de backend ook Nederlands in als standaardtaal.

Webdesign

Deel 4

Joomla

301

4.3.2.4 Overzicht van de onderdelen van Joomla backend - Controlepaneel 1

Dit controlepaneel bevat langs de rechterzijde de Quick icons. Deze lijst herbergt de voornaamste functies: Nieuw artikel toevoegen, Artikelbeheer… Dezelfde mogelijkheden vind je ook boven in het menu terug. Via het menu zijn alle Joomla-functies te benaderen, terwijl de knoppen in het controlepaneel alleen de belangrijkste functies laten zien. Het menu bovenin bevat volgende onderdelen: • Website: voor algemene instellingen en het beheer van de website. • Gebruikers: alles om toegangsrechten voor gebruikers te regelen. • Menu’s: het is mogelijk om met meerdere menu’s te werken op je site. Hier maak en wijzig je ze. • Inhoud: hier beheer je de teksten (artikelen) op de site, deel je ze in en bepaal je wat er op de homepage getoond wordt. • Componenten: bevat overige Joomla-componenten, bijvoorbeeld om contactpersonen vast te leggen, en links en banners te onderhouden. Ook kan je zien hoe er binnen je website gezocht wordt. • Extensies: modules, plugins en templates. Deze functies bepalen in grote mate de kracht van Joomla. • Help: bevat de Joomla-helpbestanden en links naar nuttige Joomla-websites. Met de 1ste knop wordt de site in de browser geopend. Uiterst rechts kan je afmelden. De linkerzijde geeft meer informatie over de installatie- en systeeminstellingen. Te midden bevindt zich het gedeelte dat de beheerder van de website informatie geeft over de gang van zaken op de site. Welke gebruikers zijn er ingelogd? Wat zijn populaire artikelen en wat is er nieuw? Deze laatste opties krijg je pas te zien als je op de betreffende tekst klikt. 1

De schikking is afhankelijk van de geselecteerde template. In deze cursus wordt van de standaard ingestelde template uitgegegaan.

N. Wittebroodt

Toegepaste Informatica

Grafiweb

302

Onderaan kan je zien hoeveel gebruikers er ingelogd zijn (op dit moment alleen jijzelf), je kan berichten lezen, de website openen en uitloggen uit Joomla. Opmerking: je keert naar het Controlepaneel terug door op Joomla linksboven te klikken.

4.3.2.5 De werkbalken Als je eenmaal aan de slag gaat in de Joomla-backend, dan zal het je vrij snel opvallen dat je steeds dezelfde structuren ziet. Er wordt consequent gebruik gemaakt van dezelfde lay-out om informatie te presenteren en van dezelfde knoppen om informatie te kunnen wijzigen, toevoegen of verwijderen. Klik in het Controlepaneel op Categoriebeheer. Volgend scherm verschijnt:

Rechtsboven in het scherm zie je een aantal knoppen. Deze knoppen hebben op andere plaatsen in Joomla steeds hetzelfde uiterlijk en dezelfde betekenis.

Nieuw: voegt informatie aan de website toe. Dit kan een categorie zijn, zoals in dit voorbeeld, maar bijvoorbeeld ook een artikel, een menu of een contactpersoon. Bijna altijd verschijnt er na een klik op de knop Nieuw een nieuw artikel. Bewerken: als je bestaande informatie wilt wijzigen, plaats je eerst een vinkje voor de betreffende regel en klik je dan op de knop Bewerken. Daarmee zal in veel gevallen een nieuw scherm worden geopend waarmee je de bestaande gegevens kan wijzigen. Een snellere methode is een klik op het onderstreepte deel, in dit geval de titel.

Webdesign

Deel 4

Joomla

303

Publiceren: ook hier zijn er twee methoden: klik op het vinkje en daarna op de knop Publiceren om informatie die nog niet gepubliceerd is te publiceren. Een snellere methode is een klik in de tabel op het rood-witte knopje. Een gepubliceerd item krijg een groen vinkje. Depubliceren: doet exact het tegenovergestelde als Publiceren. Een klik op het groene vinkje in de tabel zorgt voor “depubliceren”, waarmee het rood-witte knopje weer verschijnt. Archiveren: archiveert informatie en werkt op dezelfde manier: door eerst weer een vinkje te plaatsen voor de gewenste regel. Informatie archiveren betekent overigens niet dat je deze weggooit. In feite ruim je hem op. De informatie zit als het ware weggestopt in een grote doos op zolder, maar als het nodig is dan blijft de informatie beschikbaar. Inchecken: als je al eerder opgeslagen informatie in Joomla aan het bewerken (wijzigen) bent, wordt dat deel uitgecheckt. Dat betekent dat Joomla onthoudt dat je ermee bezig bent, zodat het niet mogelijk is dat een andere gebruiker tegelijkertijd dezelfde informatie wijzigt. Soms blijft die status echter ten onrechte op uitgecheckt staan. Dit kan bijvoorbeeld gebeuren wanneer je langdurig afgeleid wordt en wegloopt van je pc. Na verloop van tijd zal Joomla de sessie beëindigen en uitloggen. De informatie waar je op dat moment mee bezig was heeft dan echter nog steeds de status uitgecheckt. Deze knop is bedoeld om dat ongedaan te maken, zodat je er weer verder kunt aan werken. Prullenbak: de prullenbak werkt op dezelfde manier als je gewoon bent van het besturingssysteem. Je verwijdert gegevens, maar als het moet kan je ze nog herstellen door ze op te vissen uit de prullenbak. In sommige schermen zal je prullenbak niet tegenkomen, maar een iets andere knop met het bijschrift Verwijderen. Batch: mogelijkheid om met meerdere bestanden tegelijkertijd te werken. Opnieuw opbouwen: ververst het scherm en is alleen van belang wanneer je bijvoorbeeld de sortering hebt aangepast. Het verversen van de browser werkt net zo goed. Opties: deze knop opent altijd een scherm met instellingen voor het betreffende Joomlaonderdeel. Soms valt er erg veel in stellen, soms ook maar weinig. Minimaal zie je in dit scherm altijd de instellingen voor rechten, de zogenaamde ACL, waarmee je bepaalt wat een gebruiker wel en niet mag doen. Verderop meer over deze functie. Help: deze functie zou enorm nuttig kunnen zijn, als het de Joomla-community zou lukken om de documentatie op orde te brengen. Dan nog zal deze functies alleen Engelstalige helpteksten bevatten. Klik je in Controlepaneel op Gebruikersbeheer dan wordt een scherm met een iets andere werkbalk geopend:

Deze knoppen komen er bij: Activeren: wordt gebruikt om een gebruiker te activeren. Blokkeren: een gebruiker wordt geweigerd. Deblokkeren: tegenovergestelde van blokkeren. In andere schermen kan je eveneens nog volgende knoppen tegenkomen: Kopiëren: geselecteerd element kopiëren (naar andere sectie of andere categorie). Verplaatsen: geselecteerd element verplaatsen naar een andere sectie of categorie. Opslaan: veranderingen worden opgeslagen en bewerking wordt beëindigd. N. Wittebroodt

Toegepaste Informatica

Grafiweb

304

Toepassen: veranderingen worden opgeslagen en bewerking blijft open. Sluiten: bewerking wordt afgesloten zonder op te slaan. Standaard: geselecteerd element wordt de standaard. Uploaden: een bestand op de server plaatsen. Verwijderen: geselecteerd element verwijderen. Voorbeeld: geselecteerd element wordt in een voorbeeldscherm getoond.

4.3.2.6 Filterelementen Om zoekacties in lange lijsten te vergemakkelijken zijn bepaalde schermen met filterelementen voorzien. Op deze manier kunnen modules op positie gefilterd worden of enkel geactiveerde elementen getoond worden.

4.3.2.7 Informatie- en wijziggebied Lijsten: dit zijn lijsten met elementen die verder kunnen worden bewerkt; meestal door op de naam te klikken of het selectievakje voor het item aan te vinken. Dialoogformulier: indien er op een element in de lijst wordt geklikt, komt er een dialoogformulier op de voorgrond die meestal de volgende indeling heeft: links de belangrijkste gegevens en rechts de parameters. Controlepaneel: links de iconen en rechts info in verband met de backend.

4.3.2.8 Inleiding over templates Wijzigen van de standaardtemplate

In de volgende hoofdstukken komen de verschillende functies van de Joomla-backend uitgebreid aan bod. Maar de praktijk leert dat de gemiddelde Joomla-gebruiker de website eerst gewoon een ander uiterlijk wil geven en daarna pas aan de slag gaat met het vullen ervan. Het uiterlijk van de website kan in één keer en op eenvoudige wijze gewijzigd worden door een andere template te kiezen of te installeren:

Webdesign

Deel 4

Joomla

305

Klik in het Controlepaneel op Templatebeheer.

Linksboven zie je dat je kan kiezen tussen Stijlen en Templates. Standaard opent dit scherm met Stijlen. In de kolom Locatie zie je zowel Website als Beheergedeelte. Er zijn twee stijlen die een actief sterretje hebben bij Standaard. Dat betekent dat de betreffende templatestijl de standaard is voor respectievelijk de frontend (website) en de backend (het beheergedeelte). Je kan dus de template van zowel de frontend als de backend onafhankelijk van elkaar wijzigen. Klik op het selectievakje voor de template naar keuze bv. Beez3 – Fruit Shop. Klik op Als standaard instellen. Controleer via Bekijk website. Opmerking: naast de standaardtemplates kan je een heleboel templates gratis downloaden van het net. Later meer hier over. De structuur van een template bestuderen en wijzigen

In het templatebeheer is het ook mogelijk om na te gaan hoe een template in elkaar zit en deze zelfs te wijzigen: Klik in het Controlepaneel op Templatebeheer. Klik op de link van een template bv. Beez3 – Fruit Shop. Je kan deze ook selecteren en vervolgens op de knop Bewerken klikken. In het volgende scherm vind je een tabblad voor de Gegevens, de Opties en de Menutoewijziging van de template. Bij Opties kan je onder meer het logo, de titel en de positie van de navigatiebalk wijzigen. Wijzigingen aanbrengen in de HTML en CSS van een template

Klik in het Controlepaneel op Templatebeheer. Klik op het tabblad Templates. Druk op hyperlink Beez3 Gegevens en bestanden. Links bij Template oorspronkelijke bestanden kan je met een klik op de betreffende hyperlink de HTML-pagina. Rechts vind je de CSS-bestanden, die je op dezelfde manier opent.

N. Wittebroodt

Toegepaste Informatica

Grafiweb

306

4.3.2.9 Tijdzone wijzigen Om te vermijden dat websites te lang in wachttijd staan, moeten we ook de tijdzone wijzigen. Doe dit als volgt: Klik in het Controlepaneel op Algemene instellingen. Activeer het tabblad Server. Selecteer Brussels bij Tijdzone server. Eindig met Opslaan en sluiten.

4.3.2.10 Tot slot: site-instellingen aanpassen De site-instellingen staan steeds op bepaalde standaardwaarden, die niet overeenkomen met de inhoud van de site. Voeg steeds de naam van de site in en geef de juiste metagegevens toe voor de zoekmachine. Ga naar Website – Algemene instellingen. Op het tabblad Website vul je de websitenaam in bij het gelijknamig item. Dit is de siteinformatie die verschijnt in de tab of de titelbalk van de webbrowser van de bezoeker. Bij Metadata-instellingen voeg je metagegevens toe. Die zijn belangrijk voor zoekmachines. Voer bij Algemene metabeschrijving een korte beschrijving in van het onderwerp. Bij Algemene metatrefwoorden kan je een paar trefwoorden invullen die kenmerkend zijn voor de inhoud van de site. Om de naam van de site toe te voegen aan de paginatitel die in de browser verschijnt, kies je bij SEO-instellingen voor Websitenaam in paginatitels invoegen: Voor. Klik op Opslaan & sluiten. Nu wordt de juiste sitenaam weergegeven in de browser.

Oefening 57 1. Verander de standaard-template naar Protostar Default. 2. Verander volgende zaken in het template: • Het logo naar white.png. • Websitetitel naar Mijn website. • Websitebeschrijving naar Mijn beschrijving. 3. Schakel over naar de frontend. Wijzig eventueel nog enkele opties. 4. Maak gebruik van de HTML-pagina binnen de templates om de tekst in de footer © intro_joomla 2013 te wijzigen naar © eigen naam. Tip: verwijder de php code en wijzig door je eigen naam. 5. Geef websitenaam en metagegevens in.

Webdesign

Deel 4

Joomla

307

4.4 Artikelen 4.4.1

De structuur van een Joomla-website

4.4.1.1 Artikel – definitie De belangrijkste functionaliteit van Joomla zit in de wijze waarop je informatie kunt vastleggen en ordenen. We noemen deze informatie vaak content, wat een verzamelnaam is voor teksten, afbeeldingen en andere media die samen de inhoud van de website vormen. Het vastleggen van content doe je voor een groot deel met behulp van artikelen. Een artikel bestaat vervolgens uit tekst, afbeeldingen en eventueel video. Maar je legt voor elke artikel ook vast in welke categorie het thuishoort, wie de schrijver, per wanneer de informatie gepubliceerd mag worden op de website en zelfs wanneer deze weer van de site af moet.

4.4.1.2 Categorie - definitie Voordat je artikelen gaat schrijven bepaal je eerst de indeling van de informatie in categorieën. Denk aan een ladekast met drie verschillende laden. In de eerste zitten de facturen, in de tweede de contracten en in de derde de notulen. Elke lade is dan in feite een categorie. Je ordent er je informatie mee. Ga je een niveau dieper dan zie je dat in de lade met contracten een map zit voor elke leverancier. De leverancier is dan een subcategorie van contracten en elk contract is vervolgens een artikel.

Veel gebruikers vinden het moeilijk om zo’n indeling te maken en vragen of het wel noodzakelijk is. Het antwoord hierop is tweeledig: ja, je hebt een goede categorie-indeling nodig om de website een logische indeling te geven. Maar nee, je hebt die niet nodig als je een kleine site bouwt met slechts enkele artikelen. Vergelijk dit met een krant: jouw website bevat meerdere artikelen, aangevuld met foto’s. Vaak is er wel sprake van een bepaalde logische indeling in katernen (binnenland, sport…). Dat zijn de categorieën in Joomla.

N. Wittebroodt

Toegepaste Informatica

Grafiweb

a

Inhoudsopgave Deel 1 – HTML5 1.1

DE WERELD VAN HET WORLD WIDE WEB ................................................ 1

1.1.1

Definitie ................................................................................................................................................... 1

1.1.2

URL’s: Uniform Resource Locators .................................................................................................... 2

1.1.3

Homepages ............................................................................................................................................. 2

1.2

WAT IS HTML … EN WAT IS HET NIET? ..................................................... 3

1.2.1

Inleiding .................................................................................................................................................. 3

1.2.2

Markuptalen ........................................................................................................................................... 3

1.2.3

HTML5 – een manier van denken ........................................................................................................ 4

1.2.4

Verleden en toekomst ............................................................................................................................ 6

1.2.5

Wie maakt de regels? ............................................................................................................................. 7

1.3

BROWSERS ................................................................................................... 8

1.3.1

Inleiding .................................................................................................................................................. 8

1.3.2

Microsoft Internet Explorer .................................................................................................................. 8

1.3.3

Mozilla Firefox ....................................................................................................................................... 8

1.3.4

Google Chrome ...................................................................................................................................... 9

1.4

GRONDBEGINSELEN VAN HTML .............................................................. 10

1.4.1

De editor starten .................................................................................................................................. 10

1.4.2

De elementaire bouwstenen: elementen en tags ................................................................................ 10

1.4.3

Attributen bieden mogelijkheden ....................................................................................................... 11

1.4.4

Speciale tekens: entiteiten ................................................................................................................... 12

1.4.5

Basisstructuur HTML: HEAD en BODY .......................................................................................... 13

1.4.6

Het begrip nesten ................................................................................................................................. 13

Webmaster

Inhoudsopgave

b

1.5

DE 1STE WEBPAGINA ................................................................................ 14

1.5.1

De basistags .......................................................................................................................................... 14

1.5.2

DOCTYPE declaratie .......................................................................................................................... 14

1.5.3

Een titel op een pagina ......................................................................................................................... 14

1.5.4

Het META-element ............................................................................................................................. 15

1.5.5

Commentaar toevoegen aan HTML ................................................................................................... 17

1.5.6

Tekst typen en bewerken ..................................................................................................................... 17

1.5.7

Horizontale lijnen tussenvoegen ......................................................................................................... 21

1.5.8

Lijsten ................................................................................................................................................... 23

1.5.9

Een link toevoegen ............................................................................................................................... 27

1.5.10

Style Sheets laden ................................................................................................................................. 33

1.6

PAGINASTRUCTUUR VAN HTML5 ............................................................ 35

1.6.1

Inhoud structureren ............................................................................................................................ 35

1.6.2

Outline .................................................................................................................................................. 36

1.6.3

Verboden te lezen behalve voor HTML 4.1 gebruikers .................................................................... 37

1.6.4

De nieuwe elementen ........................................................................................................................... 38

1.7

EEN HTML-EDITOR KIEZEN ....................................................................... 51

1.7.1

Inleiding ................................................................................................................................................ 51

1.7.2

WYSIWYG of niet? ............................................................................................................................. 51

1.7.3

Voorbeelden van HTML-editors ........................................................................................................ 52

1.8

BLOKELEMENTEN, INLINE ELEMENTEN EN STIJLEN ........................... 54

1.8.1

Inleiding ................................................................................................................................................ 54

1.8.2

Efficiënt werken met blokelementen .................................................................................................. 54

1.8.3

Efficiënt werken met inline elementen ............................................................................................... 55

1.9

DIRECTORY’S MAKEN ............................................................................... 59

1.9.1

Directorystructuren ............................................................................................................................. 59

1.9.2

Relaties met pagina’s/afbeeldingen in andere directory’s ................................................................ 60

N. Wittebroodt

Grafiweb

c

1.10

GRAFISCH MATERIAAL ............................................................................. 61

1.10.1

Afbeeldingen: achtergrondinformatie ................................................................................................ 61

1.10.2

Het IMG-element ................................................................................................................................. 62

1.10.3

De attributen van het IMG-element ................................................................................................... 63

1.10.4

De afbeelding is onzichtbaar! .............................................................................................................. 64

1.10.5

Het Figure-element met het Figcaption-element ............................................................................... 66

1.10.6

Afbeeldingen in de flow van de pagina ............................................................................................... 67

1.11

HYPERLINKS ............................................................................................... 69

1.11.1

Lokale pagina’s linken met relatieve bestandsnamen ...................................................................... 69

1.11.2

Linken naar externe pagina’s ............................................................................................................. 70

1.11.3

Linken naar locaties op dezelfde pagina ............................................................................................ 70

1.11.4

Linken vanaf afbeeldingen .................................................................................................................. 70

1.11.5

Thumbnails ........................................................................................................................................... 71

1.11.6

Linken naar non-webdata ................................................................................................................... 71

1.11.7

De link mailto ....................................................................................................................................... 71

1.11.8

Linken zonder de pagina te verlaten .................................................................................................. 72

1.11.9

Het element BASE ............................................................................................................................... 72

1.12

METADATA EN ZOEKMACHINES .............................................................. 77

1.12.1

Inleiding ................................................................................................................................................ 77

1.12.2

De attributen van het META-element ............................................................................................... 77

1.13

TABELLEN ................................................................................................... 80

1.13.1

Inleiding ................................................................................................................................................ 80

1.13.2

Tabellen definiëren .............................................................................................................................. 80

1.13.3

Tabelgegevens toevoegen ..................................................................................................................... 80

1.13.4

Attributen van de tabel ........................................................................................................................ 81

1.13.5

Attributen van de rijen/cellen ............................................................................................................. 82

1.13.6

Rijen groeperen .................................................................................................................................... 85

1.13.7

Een bijschrift voor de tabel ................................................................................................................. 85

1.13.8

Kolommen groeperen .......................................................................................................................... 87

Webmaster

Inhoudsopgave

d

1.13.9

Samenvoegen van cellen ...................................................................................................................... 88

1.14

FORMULIEREN ............................................................................................ 91

1.14.1

Inleiding ................................................................................................................................................ 91

1.14.2

Het element FORM .............................................................................................................................. 93

1.14.3

Tekstvelden ........................................................................................................................................... 94

1.14.4

Keuzerondjes ........................................................................................................................................ 97

1.14.5

Aankruisvakjes .................................................................................................................................... 98

1.14.6

Email en webadres in HTML5 ............................................................................................................ 99

1.14.7

Keuzelijsten ........................................................................................................................................ 100

1.14.8

Een formulier opmaken ..................................................................................................................... 104

1.14.9

Het element LABEL .......................................................................................................................... 106

1.14.10 Knoppen ............................................................................................................................................. 107 1.14.11 Controls groeperen ............................................................................................................................ 109 1.14.12 Bestanden verzenden ......................................................................................................................... 111 1.14.13 Verwerken informatie ....................................................................................................................... 111

1.15

VIDEO, AUDIO, CANVAS EN IFRAMES ................................................... 112

1.15.1

Video ................................................................................................................................................... 112

1.15.2

Audio ................................................................................................................................................... 115

1.15.3

Canvas ................................................................................................................................................. 116

1.15.4

Inline frames ....................................................................................................................................... 117

1.16

HTML TESTEN/OUDERE BROWSERS .................................................... 120

1.16.1

Weergave in oude browsers .............................................................................................................. 120

1.16.2

Veelgemaakte HTML-fouten ............................................................................................................ 121

1.16.3

HTML testen ...................................................................................................................................... 121

1.16.4

De redenen voor validatie .................................................................................................................. 122

1.16.5

CSS valideren ..................................................................................................................................... 122

N. Wittebroodt

Grafiweb

e

Deel 2 – CSS3 2.1

WAAROM CASCADING STYLESHEETS? ................................................ 123

2.1.1

Inleiding ............................................................................................................................................... 123

2.1.2

De noodzaak van stylesheets .............................................................................................................. 124

2.1.3

Stylesheets verbinden met HTML ..................................................................................................... 125

2.1.4

Het cascading-model ........................................................................................................................... 126

2.2

DE SYNTAXIS VAN CSS ............................................................................ 127

2.2.1

De anatomie van een stylesheet .......................................................................................................... 127

2.2.2

Eigenschappen definiëren .................................................................................................................. 128

2.2.3

Eigenschappen groeperen .................................................................................................................. 129

2.2.4

Waarden groeperen ............................................................................................................................ 129

2.2.5

Boxopmaak: het CSS-opmaakmodel................................................................................................. 130

2.2.6

Overerving ........................................................................................................................................... 133

2.2.7

Commentaar........................................................................................................................................ 134

2.3

STIJLEN TOEVOEGEN AAN WEBPAGINA’S ........................................... 135

2.3.1

Inleiding ............................................................................................................................................... 135

2.3.2

Externe stylesheets ............................................................................................................................. 135

2.3.3

Een STYLE-element in de HEAD: ingesloten stijl........................................................................... 136

2.3.4

Inline stijlen ......................................................................................................................................... 137

2.3.5

Cascading ............................................................................................................................................ 138

2.4

ELEMENTEN BENADEREN MET SELECTORS ........................................ 139

2.4.1

Relaties ................................................................................................................................................. 139

2.4.2

Universele selector .............................................................................................................................. 140

2.4.3

Afstammingselectors........................................................................................................................... 140

2.4.4

Pseudo-selectors .................................................................................................................................. 141

2.4.5

Attribuutselectors ............................................................................................................................... 143

2.4.6

CLASS- en ID-selectors ...................................................................................................................... 144

Webmaster

Inhoudsopgave

f

2.4.7

Handig selecteren ................................................................................................................................ 146

2.4.8

Elementen groeperen met DIV en SPAN .......................................................................................... 149

2.5

KLEUREN EN ACHTERGRONDEN ........................................................... 151

2.5.1

Inleiding ............................................................................................................................................... 151

2.5.2

Kleuren definiëren .............................................................................................................................. 151

2.5.3

Veilig kleurenpalet .............................................................................................................................. 154

2.5.4

Kleuren in de HTML-kit .................................................................................................................... 156

2.5.5

Transparantie met RGBA .................................................................................................................. 157

2.5.6

Standaardtekstkleur wijzigen ............................................................................................................ 158

2.5.7

Een achtergrondkleur definiëren ...................................................................................................... 158

2.5.8

Een achtergrondafbeelding ................................................................................................................ 158

2.6

LETTERTYPEN ........................................................................................... 161

2.6.1

Inleiding ............................................................................................................................................... 161

2.6.2

Lettertype-eigenschappen .................................................................................................................. 161

2.6.3

Samengedrukte en uitgerekte lettertypen ......................................................................................... 163

2.6.4

Tekstverfraaiingen .............................................................................................................................. 164

2.7

ALINEA’S OPMAKEN ................................................................................. 166

2.7.1

Parent en child elementen .................................................................................................................. 166

2.7.2

Maateenheden ..................................................................................................................................... 166

2.7.3

De box .................................................................................................................................................. 167

2.7.4

De padding........................................................................................................................................... 167

2.7.5

Marges ................................................................................................................................................. 167

2.7.6

Randen ................................................................................................................................................. 169

2.7.7

Inspringen............................................................................................................................................ 174

2.7.8

Uitlijnen ............................................................................................................................................... 174

2.7.9

Regelafstand ........................................................................................................................................ 175

2.8

LIJSTEN OPMAKEN MET STIJLEN........................................................... 177

2.8.1

Inleiding ............................................................................................................................................... 177

N. Wittebroodt

Grafiweb

g

2.8.2

List-style-type ...................................................................................................................................... 177

2.8.3

List-style-image ................................................................................................................................... 178

2.8.4

Uitlijning van opsommingtekens ....................................................................................................... 179

2.8.5

Waarden groeperen voor list-style .................................................................................................... 179

2.8.6

Randen gebruiken als aanduiding bij aanwijzen ............................................................................. 180

2.8.7

Het CSS-menu verder opmaken ........................................................................................................ 181

2.8.8

Lijsten als horizontaal navigatiemenu .............................................................................................. 184

2.9

TABELLEN OPMAKEN .............................................................................. 188

2.9.1

Eigenschappen resetten ...................................................................................................................... 188

2.9.2

Ruimte instellen .................................................................................................................................. 188

2.9.3

Randen instellen .................................................................................................................................. 188

2.9.4

Tabeluitlijning ..................................................................................................................................... 189

2.9.5

Horizontale celuitlijning ..................................................................................................................... 190

2.9.6

Verticale uitlijning .............................................................................................................................. 191

2.9.7

De breedte van tabellen en cellen ...................................................................................................... 191

2.9.8

Kleuren in tabellen ............................................................................................................................. 192

2.10

FORMULIEREN OPMAKEN ....................................................................... 194

2.10.1

Inleiding ............................................................................................................................................... 194

2.10.2

Het formulier ....................................................................................................................................... 194

2.10.3

De CSS-code ........................................................................................................................................ 195

2.11

IMAGE MAPS ONTWERPEN EN IMPLEMENTEREN................................ 199

2.11.1

Inleiding ............................................................................................................................................... 199

2.11.2

Het ontwerp van een image map ....................................................................................................... 199

2.11.3

Soorten image maps ............................................................................................................................ 199

2.11.4

Het element MAP ................................................................................................................................ 200

2.11.5

Het element AREA ............................................................................................................................. 200

2.11.6

Anatomie van een image map ............................................................................................................ 201

Webmaster

Inhoudsopgave

h

2.12

POSITIONEREN MET CSS ......................................................................... 203

2.12.1

Inleiding ............................................................................................................................................... 203

2.12.2

CSS-boxmodel en Visual formatting model...................................................................................... 203

2.12.3

De eigenschap display ......................................................................................................................... 204

2.12.4

De eigenschap float ............................................................................................................................. 205

2.12.5

De eigenschap clear............................................................................................................................. 207

2.12.6

Positioneren van elementen................................................................................................................ 209

2.12.7

Werken met lagen: de z-index ........................................................................................................... 213

2.12.8

De eigenschap clip ............................................................................................................................... 214

2.12.9

Tekstkolommen ................................................................................................................................... 216

2.12.10 Layout: CSS zoals het hoort .............................................................................................................. 220

Deel 3 – JavaScript 3.1

INLEIDING ................................................................................................... 231

3.1.1

Ontwikkeling ....................................................................................................................................... 231

3.1.2

Typische JavaScript-toepassingen ..................................................................................................... 231

3.1.3

JavaScript en Java .............................................................................................................................. 231

3.1.4

Java-applets ......................................................................................................................................... 232

3.1.5

Client-side processing ......................................................................................................................... 232

3.1.6

Wat heb je nodig? ............................................................................................................................... 232

3.2

EEN 1STE SCRIPT ..................................................................................... 233

3.2.1

De tag <SCRIPT> ............................................................................................................................... 233

3.2.2

Attributen van <SCRIPT> ................................................................................................................. 233

3.2.3

Commentaar binnen scripts ............................................................................................................... 233

3.2.4

Een eenvoudig script........................................................................................................................... 234

3.2.5

Een eventhandler ................................................................................................................................ 237

N. Wittebroodt

Grafiweb

i

3.3

WERKEN MET DATA EN VARIABELEN ................................................... 240

3.3.1

De structuur van JavaScript .............................................................................................................. 240

3.3.2

De verschillende datatypen van JavaScript ...................................................................................... 241

3.3.3

Werken met variabelen ...................................................................................................................... 243

3.3.4

Variabelen bewerken met operatoren ............................................................................................... 243

3.4

FUNCTIES ................................................................................................... 249

3.4.1

Waarom functies? ............................................................................................................................... 249

3.4.2

Een functie definiëren en gebruiken ................................................................................................. 249

3.4.3

Een functie aanroepen ........................................................................................................................ 250

3.4.4

Waarden retourneren ......................................................................................................................... 250

3.4.5

Enkele voorbeelden van functies ....................................................................................................... 251

3.5

VOORWAARDELIJKE CONTROLESTRUCTUREN EN DIALOOGSCHERMEN ................................................................................ 254

3.5.1

Voorwoorwaardelijke controlestructuren ........................................................................................ 254

3.5.2

Dialoogschermen ................................................................................................................................. 256

3.6

EVENTS EN EVENTHANDLERS ................................................................ 261

3.6.1

De events in JavaScript ...................................................................................................................... 261

3.6.2

Reageren op events ............................................................................................................................. 262

3.7

OBJECTEN VAN JAVASCRIPT ................................................................. 265

3.7.1

Hiërarchie van objecten ..................................................................................................................... 265

3.7.2

Het object Window ............................................................................................................................. 266

3.7.3

Timeouts gebruiken ............................................................................................................................ 268

3.7.4

Het object Date() ................................................................................................................................. 268

3.8

HET DOCUMENT ........................................................................................ 270

3.8.1

Bepalen achtergrond- en tekstkleur .................................................................................................. 270

3.8.2

De url ................................................................................................................................................... 270

3.8.3

Datum van de laatste wijziging .......................................................................................................... 270

Webmaster

Inhoudsopgave

j

3.9

INTERACTIEVE FORMULIEREN ............................................................... 272

3.9.1

Eventhandlers ..................................................................................................................................... 272

3.9.2

Tekstinvoervelden ............................................................................................................................... 273

3.9.3

Tekstgebieden met ................................................................................................... 273<br /> <br /> 3.9.4<br /> <br /> Selectievakjes....................................................................................................................................... 274<br /> <br /> 3.9.5<br /> <br /> Radio buttons ...................................................................................................................................... 274<br /> <br /> 3.9.6<br /> <br /> Selectielijsten ....................................................................................................................................... 275<br /> <br /> 3.9.7<br /> <br /> Ter info: een formulier verwerken .................................................................................................... 276<br /> <br /> 3.10<br /> <br /> AFBEELDINGEN......................................................................................... 279<br /> <br /> 3.10.1<br /> <br /> Afhankelijk van de aangewezen tekst een andere foto tonen .......................................................... 279<br /> <br /> 3.10.2<br /> <br /> Afhankelijk van de aangewezen link een andere foto tonen ........................................................... 279<br /> <br /> 3.10.3<br /> <br /> Afhankelijk van de aangewezen foto een andere tekst tonen in de statusbalk .............................. 280<br /> <br /> 3.10.4<br /> <br /> Dynamische afbeeldingen op een pagina .......................................................................................... 280<br /> <br /> Deel 4 – Joomla 3 4.1<br /> <br /> WAT IS JOOMLA? ...................................................................................... 283<br /> <br /> 4.1.1<br /> <br /> Situering .............................................................................................................................................. 283<br /> <br /> 4.1.2<br /> <br /> Waarom een CMS?............................................................................................................................. 283<br /> <br /> 4.1.3<br /> <br /> Van welke technologieën maakt Joomla gebruik? ........................................................................... 285<br /> <br /> 4.1.4<br /> <br /> Joomla tot nu toe ................................................................................................................................. 286<br /> <br /> 4.1.5<br /> <br /> Joomla 3: Nieuwe basis voor de vormgeving: Twitter Bootstrap ................................................... 287<br /> <br /> 4.1.6<br /> <br /> Wat kan je niet met Joomla? ............................................................................................................. 288<br /> <br /> 4.1.7<br /> <br /> Eigen ontwerp of Joomla-template?.................................................................................................. 288<br /> <br /> 4.1.8<br /> <br /> Wat is het verschil tussen Dreamweaver en Joomla? ...................................................................... 289<br /> <br /> 4.2<br /> <br /> INSTALLATIE ............................................................................................. 290<br /> <br /> 4.2.1<br /> <br /> Inleiding ............................................................................................................................................... 290<br /> <br /> N. Wittebroodt<br /> <br /> Grafiweb<br /> <br /> k<br /> <br /> 4.2.2<br /> <br /> Installeren van WAMP....................................................................................................................... 290<br /> <br /> 4.2.3<br /> <br /> Maken van een (lege) MySQL databank .......................................................................................... 293<br /> <br /> 4.2.4<br /> <br /> Installeren van het pakket Joomla .................................................................................................... 294<br /> <br /> 4.3<br /> <br /> DE JOOMLA WEBSITE VERKENNEN ....................................................... 298<br /> <br /> 4.3.1<br /> <br /> De Joomla frontend ............................................................................................................................ 298<br /> <br /> 4.3.2<br /> <br /> De Joomla backend ............................................................................................................................. 300<br /> <br /> 4.4<br /> <br /> ARTIKELEN ................................................................................................ 307<br /> <br /> 4.4.1<br /> <br /> De structuur van een Joomla-website ............................................................................................... 307<br /> <br /> 4.4.2<br /> <br /> Artikelbeheer....................................................................................................................................... 310<br /> <br /> 4.4.3<br /> <br /> De editor TinyMCE ............................................................................................................................ 314<br /> <br /> 4.4.4<br /> <br /> Afbeelding invoegen............................................................................................................................ 321<br /> <br /> 4.4.5<br /> <br /> Invoegen van een video: ..................................................................................................................... 323<br /> <br /> 4.4.6<br /> <br /> Mediabeheer ........................................................................................................................................ 324<br /> <br /> 4.5<br /> <br /> SOORTEN WEBPAGINA’S ........................................................................ 336<br /> <br /> 4.5.1<br /> <br /> Soorten ................................................................................................................................................. 336<br /> <br /> 4.5.2<br /> <br /> De homepage ....................................................................................................................................... 336<br /> <br /> 4.5.3<br /> <br /> Categoriepagina’s ............................................................................................................................... 340<br /> <br /> 4.5.4<br /> <br /> De artikelpagina .................................................................................................................................. 349<br /> <br /> 4.5.5<br /> <br /> Extra’s toevoegen aan pagina’s ......................................................................................................... 350<br /> <br /> 4.6<br /> <br /> MENU’S ....................................................................................................... 352<br /> <br /> 4.6.1<br /> <br /> Inleiding ............................................................................................................................................... 352<br /> <br /> 4.6.2<br /> <br /> Menubeheer ......................................................................................................................................... 353<br /> <br /> 4.6.3<br /> <br /> Menu-items toevoegen aan bestaande menu’s.................................................................................. 353<br /> <br /> 4.6.4<br /> <br /> Een reactieformulier toevoegen met het menu-item Contact.......................................................... 355<br /> <br /> 4.6.5<br /> <br /> Een sitemap toevoegen met het menu-item Lijst van alle categorieën ........................................... 356<br /> <br /> 4.6.6<br /> <br /> Een menu-item verplaatsen/kopiëren naar een ander menu .......................................................... 359<br /> <br /> 4.6.7<br /> <br /> Een nieuw menu creëren .................................................................................................................... 359<br /> <br /> 4.6.8<br /> <br /> Eigenschappen van het menu aanpassen .......................................................................................... 363<br /> <br /> Webmaster<br /> <br /> Inhoudsopgave<br /> <br /> l<br /> <br /> 4.6.9<br /> <br /> Creëren van submenu’s ...................................................................................................................... 365<br /> <br /> 4.6.10<br /> <br /> Een horizontaal menu gebruiken ...................................................................................................... 368<br /> <br /> 4.7<br /> <br /> EXTENSIES IN JOOMLA ............................................................................ 369<br /> <br /> 4.7.1<br /> <br /> Wat? ..................................................................................................................................................... 369<br /> <br /> 4.7.2<br /> <br /> Soorten ................................................................................................................................................. 369<br /> <br /> 4.7.3<br /> <br /> Instellingen van de extensie ................................................................................................................ 370<br /> <br /> 4.7.4<br /> <br /> Standaard extensies ............................................................................................................................ 372<br /> <br /> 4.7.5<br /> <br /> Toepassingen van extensies ................................................................................................................ 374<br /> <br /> 4.7.6<br /> <br /> Plugin: Slim zoeken ............................................................................................................................ 376<br /> <br /> 4.7.7<br /> <br /> Headerafbeelding aanpassen met Aangepaste HTML .................................................................... 378<br /> <br /> 4.7.8<br /> <br /> Afbeeldingen laten roteren met de module Willekeurige afbeelding ............................................. 378<br /> <br /> 4.7.9<br /> <br /> Extensies downloaden en installeren ................................................................................................. 378<br /> <br /> 4.7.10<br /> <br /> Back-ups maken met Akeeba ............................................................................................................. 379<br /> <br /> 4.7.11<br /> <br /> Dynamische menu’s en drop-down’s ................................................................................................ 382<br /> <br /> 4.7.12<br /> <br /> Een gastenboek toevoegen met Phoca Guestbook ............................................................................ 383<br /> <br /> 4.7.13<br /> <br /> YouTube video’s in een module opnemen ........................................................................................ 385<br /> <br /> 4.7.14<br /> <br /> Een sitemap toevoegen met Xmap ..................................................................................................... 386<br /> <br /> 4.7.15<br /> <br /> Een fotogallery toevoegen met Phoca Gallery .................................................................................. 388<br /> <br /> 4.7.16<br /> <br /> De mogelijkheden van de tekstverwerker uitbreiden met JCE ...................................................... 391<br /> <br /> 4.7.17<br /> <br /> Snel artikelen aan het menu toevoegen met Add to menu............................................................... 394<br /> <br /> 4.7.18<br /> <br /> Bestanden uploaden en beheren Extplorer ....................................................................................... 395<br /> <br /> 4.7.19<br /> <br /> Afbeeldingen automatisch verkleinen met Image Resizer............................................................... 395<br /> <br /> 4.7.20<br /> <br /> Filemanagement met Phoca Download ............................................................................................. 397<br /> <br /> 4.7.21<br /> <br /> Een formulier invoegen met JSN Uniform ....................................................................................... 397<br /> <br /> 4.7.22<br /> <br /> Een forum omzetten met Kunena ...................................................................................................... 398<br /> <br /> 4.7.23<br /> <br /> Hoe update je extensies?..................................................................................................................... 399<br /> <br /> 4.7.24<br /> <br /> Meer extensies vinden......................................................................................................................... 399<br /> <br /> 4.7.25<br /> <br /> Taaloverrides maken .......................................................................................................................... 400<br /> <br /> N. Wittebroodt<br /> <br /> Grafiweb<br /> <br /> m<br /> <br /> 4.8<br /> <br /> TEMPLATES DOWNLOADEN EN AANPASSEN ...................................... 401<br /> <br /> 4.8.1<br /> <br /> Inleiding ............................................................................................................................................... 401<br /> <br /> 4.8.2<br /> <br /> Hoe kom je aan templates? ................................................................................................................ 401<br /> <br /> 4.8.3<br /> <br /> Een template downloaden en activeren............................................................................................. 402<br /> <br /> 4.8.4<br /> <br /> Hoe maak je zelf een template? ......................................................................................................... 407<br /> <br /> 4.9<br /> <br /> GEBRUIKERS LATEN INLOGGEN EN BIJDRAGEN ................................ 409<br /> <br /> 4.9.1<br /> <br /> Inleiding ............................................................................................................................................... 409<br /> <br /> 4.9.2<br /> <br /> Bezoekers laten inloggen .................................................................................................................... 409<br /> <br /> 4.9.3<br /> <br /> Content alleen toegankelijk maken voor geregistreerde gebruikers .............................................. 411<br /> <br /> 4.9.4<br /> <br /> Een eigen gebruiker zijn eigen account laten beheren..................................................................... 411<br /> <br /> 4.9.5<br /> <br /> Gebruikers toevoegen die aan de site mogen bijdragen .................................................................. 412<br /> <br /> 4.9.6<br /> <br /> Een gebruikersgroep met specifieke rechten maken ....................................................................... 413<br /> <br /> 4.10<br /> <br /> DE SITE PUBLICEREN OP EEN WEBSERVER ........................................ 416<br /> <br /> 4.10.1<br /> <br /> Overzicht handelingen........................................................................................................................ 416<br /> <br /> 4.10.2<br /> <br /> Wat heb je nodig? ............................................................................................................................... 416<br /> <br /> 4.10.3<br /> <br /> Werkwijze............................................................................................................................................ 416<br /> <br /> 4.11<br /> <br /> BEVEILIGEN VAN ADMIN & SITE ............................................................. 420<br /> <br /> 4.11.1<br /> <br /> Het administratie-gedeelte beschermen ............................................................................................ 420<br /> <br /> 4.11.2<br /> <br /> Beveiligen van de Joomla website ...................................................................................................... 421<br /> <br /> 4.12<br /> <br /> DE SITE PROMOTEN ................................................................................. 423<br /> <br /> 4.12.1<br /> <br /> Registreer je eigen domeinnaam........................................................................................................ 423<br /> <br /> 4.12.2<br /> <br /> Domeinnaam kopen ............................................................................................................................ 424<br /> <br /> 4.12.3<br /> <br /> Zoekmachines ...................................................................................................................................... 426<br /> <br /> 4.12.4<br /> <br /> Short icon............................................................................................................................................. 428<br /> <br /> 4.13<br /> <br /> ARTISTEER ................................................................................................ 440<br /> <br /> 4.13.1<br /> <br /> Wat is Artisteer? ................................................................................................................................. 440<br /> <br /> 4.13.2<br /> <br /> Hoe werkt de Artisteer interface? ..................................................................................................... 440<br /> <br /> Webmaster<br /> <br /> Inhoudsopgave<br /> <br /> n<br /> <br /> 4.13.3<br /> <br /> Artisteer installeren ............................................................................................................................ 441<br /> <br /> 4.13.4<br /> <br /> Een simpel ontwerp maken ................................................................................................................ 441<br /> <br /> 4.13.5<br /> <br /> Het ontwerp aanpassen ...................................................................................................................... 442<br /> <br /> 4.13.6<br /> <br /> Ontwerp exporteren ........................................................................................................................... 451<br /> <br /> N. Wittebroodt<br /> <br /> Grafiweb<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/html5-deel-1-structuur-van-de-webpagina-n-wittebroodt-in-dit" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "HTML5 DEEL 1 STRUCTUUR VAN DE WEBPAGINA N. WITTEBROODT. In dit deel: 1.1 De wereld van het World Wide Web. 1.2 Wat is HTML en wat is het niet?"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;">