ICT-dag Gent 25 mei 2010

Presentatie over: "ICT-dag Gent 25 mei 2010"— Transcript van de presentatie:

1 ICT-dag Gent 25 mei 2010 bruno.parthoens@khlim.be

2 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

3 Joomla

4 http://www.zelfstudie.be Website met didactisch materiaal Cursusmateriaal

5 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?

6 Webruimte Joomla installatiebestanden FTP-cliënt Benodigdheden

7 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) http://www.wampserver.com Alle bestanden worden aangemaakt en geïnstalleerd in de map c:\wamp\www\joomla http://www.zelfstudie.behttp://www.zelfstudie.be (Joomla 1) Mogelijkheden

8 USB-stick (USBwebserver nodig) http://www.usbwebserver.com Je maakt je volledige website alzo op je USB-stick of externe harde schijf http://zelfstudie.be/tutorials.php Online werken: Je ontwerpt je volledige website rechtstreeks op de webserver Mogelijkheden

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

10 Joomla installatiebestanden http://download.dutchjoomla.org filmpje Maak een mapje Joomla aan op je harde schijf en pak de bestanden hierin uit Benodigdheden

11 FTP-cliënt Kopieert je bestanden van je harde schijf naar je webruimte http://filezilla-project.org/download.php (=gratis)http://filezilla-project.org/download.php Kopieer je installatiebestanden van je harde schijf naar je webruimte. Dit kan vrij lang duren. Filmpje Benodigdheden

12 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

13 Surf naar je website: zie mail Filmpje De installatie is reeds online uitgevoerd: Gebruiker 1: http://joomla01.classy.behttp://joomla01.classy.be Gebruiker 2: http://joomla02.classy.behttp://joomla02.classy.be … Installatie van Joomla

14 Frontend Dit is wat de gebruiker te zien krijgt: de website Surf naar: http://joomlaxx.classy.be Backend Beheerder van de website Wijzigingen aanbrengen aan de frontend Surf naar http://joomlaxx.classy.be/administratorhttp://joomlaxx.classy.be/administrator Login: admin Paswoord: joomla Joomla configureren

15 Backend Starten met de Backend Controlepaneel Ga naar Frontend

16 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

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

18 STRUCTUUR Website Sectie Categorie Artikel/pagina Voorpagina

19 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

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

21 Artikel aanmaken dat op voorpagina zal verschijnen (http://www.lipsum.com)http://www.lipsum.com 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

22 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

23 Parameterinstellingen

24

25

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

27 Voorbeeld: nut van Categorieën

28 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

29 Posities

30 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

31 Module Login Filmpje Filmpje (login) Gebruikersbeheer Nieuwe gebruiker aanmaken Frontend (login) Nieuwe gebruiker aanmaken Backend (via http://www.joomlaxx.classy.be/administrator) http://www.joomlaxx.classy.be/administrator Rechten toekennen aan gebruikers http://www.zelfstudie.be/cursussen/joomla.php?id=34 Berichten sturen - groepsmail Login (gebruikers)

32 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

33 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

34 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

35 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

36 Joomla breid je uit aan de hand van extensies Er bestaan enorm vele en zinvolle uitbreidingen: Joomla!extensies op http://www.dutchjoomla.orghttp://www.dutchjoomla.org OF http://extensions.joomla.orghttp://extensions.joomla.org 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

37 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 http://www.joomlaworks.gr Fotoalbum

38

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

40 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

41 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

42 Volledig fotoalbum: Joomgallery Fotoalbum

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

44 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

45

46 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

47 Gastenboek Download Phoca Guestbook via http://extensions.joomla.org 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

48 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

49 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

50 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 http://www.web-garden.be/templates/ http://www.siteground.com/joomla-hosting/joomla- templates.htm http://www.joomla24.com/ Templates

51 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

52 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

53 Aristeer 2.0 Na installatie Templates