ICT-dag Gent 25 mei 2010

Voorstelling Bruno Parthoens Docent lerarenopleiding Bachelor Secundair Onderwijs (BASO) Katholieke Hogeschool Limburg Afdeling Handel-Burotica Joomla in 1 en 2 HB in het kader van Web2.0

Joomla

Website met didactisch materiaal Cursusmateriaal

CMS (Content Managment System): website die volledige klaar is en aanpasbaar Ander bekend voorbeeld: DRUPAL PHP en MySQL maar geen kennis nodig Volledig gratis Wat is Joomla?

Webruimte Joomla installatiebestanden FTP-cliënt Benodigdheden

Offline werken: Je ontwerpt je website lokaal en publiceert achteraf de bestanden naar webruimte Harde schijf (Wampserver nodig op je PC vermits Joomla ontwikkeld is met PHP en een MySQL- database) Alle bestanden worden aangemaakt en geïnstalleerd in de map c:\wamp\www\joomla (Joomla 1) Mogelijkheden

USB-stick (USBwebserver nodig) Je maakt je volledige website alzo op je USB-stick of externe harde schijf Online werken: Je ontwerpt je volledige website rechtstreeks op de webserver Mogelijkheden

Webruimte PHP ondersteunen MySQL-database aanbieden Instellingen op de php-database ondersteunen Voorbeelden: One.com Webreus.nl Freehostia.com (Chocolate versie = gratis) Benodigdheden

Joomla installatiebestanden filmpje Maak een mapje Joomla aan op je harde schijf en pak de bestanden hierin uit Benodigdheden

FTP-cliënt Kopieert je bestanden van je harde schijf naar je webruimte (=gratis) Kopieer je installatiebestanden van je harde schijf naar je webruimte. Dit kan vrij lang duren. Filmpje Benodigdheden

Afhankelijk van aangevraagde webruimte: database en MySQL aanmaken Voorbeeld One.com: database en MySQL worden automatisch aangemaakt (slechts 1 database mogelijk via One-account) Voorbeeld Freehostia Filmpje Bevestigingsmail met alle nodigde inloggegevens Installatie van Joomla

Surf naar je website: zie mail Filmpje De installatie is reeds online uitgevoerd: Gebruiker 1: Gebruiker 2: … Installatie van Joomla

Frontend Dit is wat de gebruiker te zien krijgt: de website Surf naar: Backend Beheerder van de website Wijzigingen aanbrengen aan de frontend Surf naar Login: admin Paswoord: joomla Joomla configureren

Backend Starten met de Backend Controlepaneel Ga naar Frontend

Gebruikersbeheer Extra gebruikers toevoegen met rechten om website eventueel aan te passen met eigen naam en paswoord Algemene instellingen Tip: Tabblad Systeem: Sessie levensduur verhogen Tabblad Website

Webpagina’s maak je altijd in een ARTIKEL (inhoud) Structuur: Opbouw Joomla SECTIE CATEGORIEEN ARTIKELEN die je dan kan koppelen aan een MENU

STRUCTUUR Website Sectie Categorie Artikel/pagina Voorpagina

Meerdere secties en categorieën Voorbeeld: site van een krant Je kan een sectie of categorie beveiligen, waardoor de artikelen die hierin staan enkel door leden/klanten bezocht kunnen worden. Bv. je beveiligt de sectie buitenlands voor je leden. Je kan achter één menu-item meerdere artikelen (uit één categorie of sectie) tonen in lijstweergave of volledig (blogweergave): zie later

VOORBEELD Website KLASSENALGEMEEN 1A1BContactScholengemeenschap Welkom Lesuren/vak Contactgegevens Welkom Lesuren/vak Info Route Wij zijn wij? Welkom

Artikel aanmaken dat op voorpagina zal verschijnen ( Artikelenbeheer Tweede artikel aanmaken dat via menu bereikbaar zal worden. Lukt dit zonder sectie en categorie aan te maken? Secties en Categorieën aanmaken Filmpje Opbouw Joomla

Artikelenbeheer Je kan artikel aanmaken en niet publiceren!! Bij ieder artikel kan je toegangsniveau instellen. Wie mag dit artikel bekijken? (Login venster = geregistreerd) Om goed overzicht te bewaren kan je sectie waarin je werkt selecteren. Idem voor categorie

Parameterinstellingen

Artikelen kunnen alleen bereikt worden via menu Artikel “Vakken Tabel 1A” toegankelijk maken Via Menubeheer Belangrijk: eerst artikelen aanmaken Filmpje Menubeheer

Voorbeeld: nut van Categorieën

Begrip Modules Alles wat geen inhoud krijgt is een module Een module plaats je op een bepaalde positie van je website Welke posities zijn er in je website? Afhankelijk van gekozen sjabloon (zie later) Posities kan je bekijken via Frontend door na de URL “index.php?tp=1” te typen.index.php?tp=1 Een eigen menu ontwerpen

Posities

Filmpje Maak een menu aan via Menubeheer Maak een aantal menu-items Klik op voorbeeld. Krijg je dit menu te zien? Je moet inderdaad nog de module Menu aanmaken via Extensies-modulebeheer en het menu hier aan koppelen Een eigen menu ontwerpen

Module Login Filmpje Filmpje (login) Gebruikersbeheer Nieuwe gebruiker aanmaken Frontend (login) Nieuwe gebruiker aanmaken Backend (via Rechten toekennen aan gebruikers Berichten sturen - groepsmail Login (gebruikers)

Je kan je website voorzien van externe links Filmpje Nieuwe categorie maken die links gaat verzamelen (opgepast: geen gewone categorie) Compontenten-Weblinks-Categorieën Nieuwe link toevoegen Componenten-Weblinks-Links Weblinks toevoegen aan menu Gebruiker Weblinks laten toevoegen: hoe? Onderscheid Externe link-Wrapper-Weblinks Weblinks

Je kan via poll of enquête je bezoekers bevragen Filmpje Module Enquête aanmaken Lukt dit? Eerst enquête inhoud geven Via Componenten-Enquêtes Module Enquête aanmaken en positie geven Enquête

Breadcrumbs of broodkruimels volgen het pad dat je volgt op een website (hyperlinks) Toevoegen via Modulebeheer (kruimelpad) Plaats is gereserveerd (breadcrumbs) Tip: Home niet tonen !!! Broodkruimels

Wie is er online? Geeft het aantal bezoekers op een bepaald ogenblik aan Banners Acties aankondigen Reclame maken Meest gelezen (welke artikelen?) Andere zinvolle modules

Joomla breid je uit aan de hand van extensies Er bestaan enorm vele en zinvolle uitbreidingen: Joomla!extensies op OF Niet iedere extensie is geschikt voor iedere versie: 1.0 Native (werkt alleen bij Joomla 1.0.x) 1.5 Legacy (is geschreven voor Joomla 1.0.x maar werkt in Legacy Mode ook voor 1.5.x Via Pluginbeheer 1.5 Native (is geschreven voor Joomla 1.5.x) Joomla uitbreiden

Ik was op zoek naar een manier om een gallerij van afbeeldingen te plaatsen in een artikel Vaak vind je dit toevallig! Op extensie gezocht naar AllVideos om video’s te implementeren Surf naar Fotoalbum

Download Plugin Kies Extensies-Installeer Blader naar het zip-bestand en klik op Upload bestand & installeer Fotoalbum

Na installatie krijg je volgende gebruiksuitleg: M.a.w. kopieer je afbeeldingen (Filezilla) naar de map images/stories/parijs (bijvoorbeeld) Typ in je artikel op de plaats waar je de afbeeldingen wil invoegen {gallery}parijs{/gallery} en klaar is kees? Fout: je moet plugin nog activeren via Extensies-Plugin Fotoalbum

JWAll Videos Probeer dit eens uit met een Youtube-filmpje Mogelijke toepassing: je kan een menu-item Youtube maken – alle filmpjes hierin plaatsen Filmpje Videos

Volledig fotoalbum: Joomgallery Fotoalbum

Installeer de twee bestanden Na installatie vind je Joomgallery bij de Componenten Joomgallery

Maak je categorieën Kies Foto Upload en plaats foto’s in juiste categorie Bij Configuratiebeheer stel je de parameters in Hoe krijg je nu de galerij op je website? Voeg een menu-item toe aan een menu In de lijst vind je nu Joomgallery Joomgallery

Forum Filmpje Download Fireboard via dutchjoomla Installeer Fireboard Start de Component Firboard Forum Schone installatie kiezen (anders is installatie niet voltooid) Configuratie Forum administratie Categorie aanmaken Forum aanmaken in categorie (kind van categorie) Menu-item aanmaken (Fireboard) Extra

Gastenboek Download Phoca Guestbook via Installeer Klik op Install Klik op Guestbooks en maak er een aan Menu-item aanmaken (Phoca guestbook) en koppel dit aan een gastenboek DocMan Edocs Extra

Algemene wijzigingen Kies Extensies-Templatebeheer Je krijgt een aantal templates te zien: Rhuk_milkyway is als Standaard ingesteld Klik op de templatenaam Je kan nu een aantal wijzigingen doorvoeren: Kleur wijzigen via Parameters Templates

CSS wijzigen CSS is de opmaak van je website, niet de inhoud Heb je de kleur op blauw laten staan, kan je heel gericht blue.css opmaken (hyperlinks, headings (koppen),…) HTML wijzigen In de voet (footer) staat er Powerd by Joomla Je kan hier gewoon de tekst wijzigen Tip: a href staat voor een hyperlink (Joomla) Opgepast: Zie dat je de originele html nog ergens bewaart om evt. terug te zetten indien niet gewenst resultaat. Templates

Kiezen voor een andere template Kies een template uit de lijst Kies Beez Klik op voorbeeld: Herken je de site nog? Download een template naar keuze via Extensies- Installeer templates.htm Templates

Figuren wijzigen Zoek de originele afbeeldingen op je webruimte (Filezilla) Wijzig de afbeelding met beeldbewerkingsprogramma (Fireworks, Gimp, Photoshop) Alternatief: nieuwe afbeelding maar originele afbeelding overschrijven (benaming is zeer belangrijk) Voorbeeld in Beez Logo.gif (templates/images) Templates

Ontwerp zelf een sjabloon en installeer dit Moeilijk? Ja en Neen? Ja: Deel 3 Joomla met relatieve div’s werken (vanaf nul opbouwen) Neen: Aristeer 2.0 Filmpje Templates

Aristeer 2.0 Na installatie Templates