Embed Size (px)
Citation preview
1
VWA Prüfer: Norbert Netsch
RGORG 23, Anton Krieger Gasse 25
Kompetenzen Fü r das CMS Joomla
Anja
Anton Krieger Gasse 25
1230 Wien
2
Inhalt Einleitung ................................................................................................................................................. 4
Vorbemerkung ..................................................................................................................................... 4
Über diese Arbeit ................................................................................................................................ 4
Hauptteil .................................................................................................................................................. 5
Komponenten ...................................................................................................................................... 5
Gästebuch ........................................................................................................................................ 5
Module ................................................................................................................................................ 5
Suchen ............................................................................................................................................. 5
Kalender .......................................................................................................................................... 5
Wetter ............................................................................................................................................. 6
Plugins ................................................................................................................................................. 7
Photogallery .................................................................................................................................... 7
Sicherung der Website ............................................................................................................................ 8
Übung ................................................................................................................................................ 10
Erste Überschrift ............................................................................................................................ 10
Zweite Überschrift ......................................................................................................................... 11
Dritte Überschrift .......................................................................................................................... 12
Joomla installieren: Hauptkonfiguration ........................................................................................... 13
Joomla: in der Administration arbeiten ............................................................................................ 14
Slides .............................................................................................................................................. 16
Kompetenzcheck ............................................................................................................................... 17
Punkt 12 des Kompetenz-Checks .................................................................................................. 17
Punkt 13 des Kompetenzchecks .................................................................................................... 20
Punkt 14 des Kompetenz-Checks .................................................................................................. 22
HTML und CSS ................................................................................................................................... 23
HTML 5 .......................................................................................................................................... 23
HTML-Code Sharky-Web-App Erklärung ....................................................................................... 24
Abbildungsverzeichnis ........................................................................................................................... 26
Literaturverzeichnis ............................................................................................................................... 27
Meine Kompetenzen ......................................................................................................................... 28
Schluss ................................................................................................................................................... 33
Zusammenfassung ............................................................................................................................. 33
Zusammenfassung Stoff und was wir wissen müssen .................................................................. 33
Nachbemerkung ................................................................................................................................ 33
3
4
Einleitung
Vorbemerkung An Joomla gefällt mir besonders, dass es gratis für eine große Gemeinschaft gemacht wird. Das Wort
Gemeinschaft in dem Suaheli-Begriff „Jumla“. (Koch, 2013, S. 18)
Über diese Arbeit In dieser Arbeit erkläre ich das Thema, das wir die ganze Zeit in Informatik bearbeiten, nämlich
Joomla genauer. Wir machen mit diesem Programm unsere Website und ich erkläre und zeige hier
wie ich diese im Unterricht gestaltet und erweitert habe und wie man diese sichern kann. Dazu
werden mehrere Programme wie Topstyle für HTML und CSS und das stelle ich näher da.
5
Hauptteil
Komponenten
Gästebuch
Man kann auch seiner Website ein Gästebuch machen.
Module
Suchen
Um eine Leiste zum durchsuchen der Website zu machen gehen Sie im Backend auf Erweiterungen
Module und suchen das Modul „Suchen“. In diesem Modul müssen Sie zuerst eine Position angeben
und dann unter Menüzuweisung „auf allen Seiten“ auswählen.
Abbildung 1: Details, Optionen und Menüzuweisung können eingestellt werden
Kalender
Wenn sie einen Kalender auf der Website wollen, müssen Sie den gezipten „gcalendar“ in ihrem
backend unter Erweiterungen Erweiterungen hochladen und installieren. Dann gehen Sie zu
Menü Hauptmenü neuer Menüeintrag und wählen den Kalender aus, nennen den Titel
„Kalender“ und speichern und schließen. Nachdem sie nun ihre Website aktualisiert haben können
sie den Kalender auf ihrer Website sehen.
Weitere Module für den Kalender sind zum Beispiel ein Countdown-Modul, ein Übersichtsmodul und
ein anstehende-Termine-Modul.
Countdown-Modul: kann man sich auf folgender Website runterladen: http://joomla-
extensions.kubik-rubik.de/de/cdub-countdown-up-big und dann wie jede Erweiterung unter
„Erweiterungen“ „Erweiterungen“ in der Administration hochladen und installieren. Nun kann
man unter „Erweiterungen“ „Module“ das Modul suchen und genaue Einstellungen vornehmen,
wie den Tag des Termins zu dem die Zeit runtergezählt werden soll etc.
Übersichtsmodul und anstehende-Termine-Modul sind bereits im Joomla-Backend vorinstalliert man
braucht diese nur mehr aktivieren und eine beliebige Position und Menüzuweisung anzugeben.
6
Abbildung 2: Kalender
Wetter
Ein wie ich finde sehr nützliches Modul ist das Wetter-Modul, dieses ist mein Lieblingsmodul und
soweit ich weiß hat es außer mir in der Klasse niemand.
Ich habe das Modul von folgender Website heruntergeladen:
http://extensions.joomla.org/extensions/maps-a-weather/weather/weather-forecasts
Dann habe ich dieses wie üblich im backend hochgeladen und bei den Modulen gesucht. Nun zu den
Einstellungen: Man kann eine beliebige Position angeben sowie eine Menüzuweisung. Wichtig ist es
die Stadt anzugeben von der man das Wetter gezeigt haben will. Dazu braucht man hier den
Location-Code der Stadt, der ganz einfach durch google herauszufinden ist. Der location-code von
Wien lautet übrigens: AUXX0025
Abbildung 3: Wettermodul
7
Plugins
Photogallery
Ich habe auf meiner Website eine Fotogalerie erstellt damit man sich Bilder übersichtlich in einer
Galerie ansehen kann, das finde ich sehr praktisch.
Zuerst muss man dazu ein plugin auf seinen Desktop downloaden1 und dann im Joomla backend
unter „Erweiterungen“ „Erweiterungen“ hochladen.
Nun geht man zu „Erweiterngen“ „Plugins“ und sucht dort die Fotogalerie. Klickt man auf das
grüne Häckchen aktiviert sich diese.
Damit die Galerie auf der Website angezeigt wird muss man diese in einem Beitrag verlinken. Dazu
erstellt man einen neuen Beitrag in den man „{vsig}gallery{/vsig}“ hineinschreibt. Dazu müsste der
Ordner in den Medien. („Inhalt“ „Medien“ „neues Verzeichnis erstellen“ und dann die Bilder
hineinladen) „gallery“ heißen. Nun den Beitrag beliebig unterordnen.
Nach dem aktualisieren der Website2 sollte dies so aussehen:
Abbildung 4: Fotogalerie
1 Ich habe meine Galerie von folgender Website heruntergeladen: http://www.bretteleben.de/lang-
de/joomla/very-simple-image-gallery.html 2 F5-Taste drücken um eine Website zu Aktualisieren
8
Sicherung der Website
Wenn man nun eine funktionierende, gute Websites mit vielen Modulen und Plugins und
Komponenten hat möchte man diese nun sichern, das ist aufgrund von Joomla-Sicherheitslücken
sehr sinnvoll. Da die Sicherung ja eine Kopie der Website ist, kann diese praktischerweise auch als
Probewebsite genutzt werden und man kann riskante Dinge von denen man nicht weiß ob diese
funktionieren zuerst auf der Kopie-Website ausprobieren.
Dazu muss man sich als erstes akeeba und ein Extract-System herunterladen:
https://www.akeebabackup.com/downloads/akeeba-backup.html
Das Downgeloadete muss man nun in dem Administrator-Bereich seiner Website unter
„Erweiterungen“ „Erweiterungen“ hochladen und installieren. Danach geht man auf
„Komponenten“ und auf „Akeeba“ dort kann man nun das backup durchführen.
Abbildung 5:Akeeba backup hochladen
Abbildung 6: Akeeba Backup im backend der Website
Danach steigt man bei filezilla ein und geht in den Ordner „administrator“
„components“„akeeba“ „backup“ und zieht sich seine Website auf den Desktop.
https://www.akeebabackup.com/downloads/akeeba-extract-wizard.html
Nun muss man sich hier den Extracter herunterladen und diesen installieren, dann die Website vom
Desktop hineingeben und extracten.
9
Abbildung 7:Extract Akeeba
Nun muss man bei bplaced einen neuen Account anlegen und in diesem eine neue Datenbank
anlegen. www.bplaced.net
Bei der Installation muss man einen Benutzernamen, ein Passwort und seine eMail Adresse angeben,
man bekommt das einen Bestätigungslink per Mail geschickt und nachdem man diesen angeklickt hat
kann man sich bei bplaced einloggen und unter „MySQL-Datenbanken“ die neue Datenbank anlegen.
Abbildung 8: Anmeldung bei bplaced
Abbildung 9: Datenbank erstellen
Wenn man eine Datenbank hat muss man sich
mit dieser, mit dem neuen Server, dem
Datenbank-Benutzernamen und dem Passwort
bei filezilla einloggen und dort seine Website
hochladen. Nun sollte, wen man diese aufruft
der normale Joomla-Installationsprozess
starten.
10
Übung
Erste Überschrift
Abbildung 10: Erster Screenshot
Hier kommt Text über Joomla. Wenn ich etwas genauer erklären will, was den Textfluss stören
würde, mache ich eine Fußnote.3 Falls ich hier etwas schreibe, was nicht von mir, sondern von
jemandem anderen erdacht wurde, muss ich diesen zitieren. (Huhn, 2012, S. 23)
3 Hier kommt der Text, der den oberen Text genauer erklärt
11
Zweite Überschrift
Abbildung 11: Zweiter Screenshot
(Ente, 2011)
12
Dritte Überschrift
Abbildung 12: Dritter Screenshot
(Gans, 2010)
13
Joomla installieren: Hauptkonfiguration
Damit ich überhaupt mit Joomla und meiner Website arbeiten kann, muss diese zuerst installiert
werden.
Voraussetzungen sind eine Datenbank und einen FTP-Account anzulegen, dann kann man mit der
Hauptkonfiguration von Joomla anfangen, indem man die Website aufruft.
Abbildung 13: Hauptkonfiguration bei Joomla
Hier muss man nun seinen Vornamen, eine Beschreibung für Suchmaschinen, seine E-Mail Adresse
und einen beliebigen Benutzernamen so wie ein Passwort, das man sich gut merken sollte angeben.
Mit diesem Benutzername und diesem Passwort loggt man sich später in der Aministration4 ein. Nun
klickt man oben auf Datenbank und gibt hier Benutzername und Passwort seiner Datenbank ein,
ohne die Datenbank können sie keine Website machen. Eine Datenbank und einen FTP-Account
können sie bei „bplaced“ anlegen. Wichtig ist, nach der Installation das Installationsverzeichnis zu
löschen.
Nun sehen sie ihre Website, hier können sie das gesamte Aussehen verändern in dem sie in ihrer
Administration ein anderes Modul, Carousel und Template installieren. Öffnen sie ihre
Administration und dann können sie unter „Erweiterungen“ „Erweiterungen“ z.B. das iceCarousel-
Modul, iceMenu-Modul und iceFuture-Template hochladen und installieren. Unter Module finden sie
die ersten zwei und es ist wichtig ihnen eine Position zu geben, sonst sieht man diese auf der
Website nicht.
4 Siehe nächstes Kapitel, alles zum Thema Administration (einloggen usw.) finden sie im nächsten Kapitel.
14
Joomla: in der Administration arbeiten
Um eine Website zu gestalten, Fotos und Beiträge zu posten und online zu stellen, Kategorien
anzulegen etc. muss man diese natürlich im Hintergrund verwalten. Dazu dient die Administration.
Um zur Administration seiner Website zu kommen, öffnet man einen neuen Tab im Internet und gibt
in die Suchleiste den Link seiner Website ein, macht dann einen Schrägstrich / und schreibt
„administrator“ dahinter. Nun kann man sich in das backend der Website einloggen, indem man
seinen Benutzername und sein Passwort5 in die entsprechenden Felder eingibt.
Abbildung 14: In die Administration einloggen
Nun kann man hier seine Website gestalten. Es empfiehlt sich, Kategorien anzulegen, in denen die
einzelnen Beiträge sind. Eine Kategorie legt man an, in dem man auf „Inhalt“ „Kategorien“
„neue Kategorie“ geht. Nun kann man diese benennen und wenn es eine untergeordnete Kategorie
ist, ein übergeordnete Kategorie angeben. Damit die Kategorie auf der Website angezeigt wird, muss
ein Menüpunkt erstellt werden. Dazu geht man auf „Menüs“ „Hauptmenü“ „neuer
Menüeintrag“. Hier kann man entscheiden ob der Menüpunkt z.B. ein Link sein soll, oder ein
einzelner Beitrag oder ob mehrere Beiträge in einem Blog oder einer Liste angezeigt werden sollen
etc. Man muss die nochmal die übergeordnete Kategorie bei „oberste Menüebene“ angeben. Soll
die Kategorie in der obersten Menüleiste angezeigt werden, so lässt man „oberste Menüebene“ als
bei „übergeordnetem Eintrag“. Wenn man dann auf „speichern und schließen“ klickt, sollte die
Kategorie nach dem Aktualisieren der Website6 angezeigt werden. Durch die Kategorien und
Unterkategorien kann man alles auf der Website mehrfach verschachteln, damit alles schön geordnet
und leicht zu finden ist.
Wen man nun einen Beitrag machen möchte, geht man auf „Inhalt“ „Beiträge“ „Neuer Beitrag“,
hier können sie nun die Kategorie, in der dieser Beitrag sein soll angeben und einen Titel angeben
5 Benutzername und Passwort kann man sich bei der Registrierung aussuchen, beim Benutzernamen empfiehlt
es sich nicht den üblichen Benutzernamen „admin“ zu nehmen. 6 Dazu auf die F5-Taste (oberste Reihe der Tastatur) drücken, so wird die Website aktualisiert. Weitere bereits
erlernte, nützliche Tastenkombinationen finden sie bei „Was ich jetzt schon können muss“
15
und den Text hineinschreiben. Man kann ein Wort mit einer Website verlinken, indem man das Wort
markiert und auf das Symbol mit der Kette geht, dann erscheint ein Fenster, in dieses muss man den
link eingeben. Das verlinkte Wort ist dann blau markiert. Möchte man den Link entfernen, so
markiert man das Wort erneut und klickt das Symbol mit der zerrissenen Kette an.
Man kann auch Bilder einfügen, indem man sie zuerst unter „Inhalt“ „Medien“ hoch lädt und dann
im Beitrag das Symbol mit dem Bild (unten) anklickt und das Bild auswählt.
Man kann auch einen Beitrag mit mehreren anderen Beiträgen verknüpfen, dazu markiert man den
entsprechenden Bereich, der mit dem anderen Beitrag verknüpft sein soll und dann klickt man unter
dem Schriftfenster den Button „Beiträge“ an und wählt den Beitrag aus.
Ein paar Bilder zur Veranschaulichung zum Arbeiten in der Joomla-Administration:
Abbildung 15: Kategorie anlegen
Abbildung 16: Menüpunkt anlegen
Abbildung 17: Beitrag erstellen
16
Slides
Als „Slides“ bezeichnen wir Bilder, die auf der Homepage der Website abwechselnd erscheinen. Diese
Bilder sind ziemlich wichtig, denn wenn man die Website öffnet, geben diese Bilder auf der
Homepage den ersten Eindruck.
Zuerst muss man unter „Inhalt“ „Medien“ die Bilder in seine Administration hochladen. Danach
erstellt man eine Kategorie7 und nennt diese „slides“. Man kann die Kategorie natürlich nennen wie
man will, wir haben es so gemacht. Nun erstellt man einen Beitrag, benennt diesen (geben Sie als
Titel das ein, was dann die Bildbeschriftung sein soll) und gibt das Bild in den Beitrag. Wichtig ist, dass
dieser Beitrag als übergeordnete Kategorie „slides“ hat. Machen sie nun pro Bild einen Beitrag und
geben sie jeden in die Kategorie „slides“.
Nun geh man zu „Erweiterungen“ „Module“ und wählt das iceCarousel-Modul aus. Dann muss
man zu Optionen gehen und bei „Image Width“die Zahl 1200 eingeben und bei „Image Hight“ 200,
damit die slides schmal genug sind und man noch andere Dinge auf der Homepage sehen kann. Dann
geht man zu „Filtering Options“ und wählt bei „Kategorie“ die Kategorie „slides“ aus. Dann speichern
schließen und nun sollten, nachdem man aktualisiert hat, die slides auf der Website zu sehen sein.
Abbildung 18: slides Höhe und Breite
Abbildung 19: slides
7 Wie man Kategorien und Beiträge erstellt sowie Bilder einfügt wird im Kapitel „Joomla: In der Administration
arbeiten“ ausführlich erklärt
17
Kompetenzcheck
Punkt 12 des Kompetenz-Checks
Punkt 12 ist auch einer der 5 Punkte des Kompetenzchecks die ich von den 15 Punkten nicht
geschafft habe.
Erstelle mit http://pixlr.com/editor ein Logo für deine Website, in dem Kompetenz steht (80x30pxl).
(Netsch, Kompetenz-Check, 2013)
Ich hatte mich noch nicht mit dem Thema Logo auseinandergesetzt, mittlerweile habe ich ein Logo
für meine Website erstellt und erfolgreich verlinkt. (www.an-do.bplaced.net )
Ich beschreibe nun wie das funktioniert:
Als erstes muss man auf die oben angegebene pixlr-Website gehen zum Editor, indem man genau
diesen Link in die Suchleiste eingibt. Dann kommt ein Fenster in dem man Höhe und Breite eingeben
muss, da schreibt man einfach die genannten 80 und 30 Pixel hinein. Dann sieht man eine weiße
Fläche, so groß ist das Logo. Um „Kompetenz“ hineinzuschreiben, wählt man in der Werkzeugleiste
auf der Seite links das Schriftsymbol mit dem großen A aus. Nun kann man „Kompetenz in das
erscheinende Textfeld eingeben, die Farbe der Schrift bestimmen und das Feld zurechtschieben.
Unter „Datei“ „Speichern“ kann man das Logo nun auf dem Desktop abspeichern.
Nun muss das Logo nur noch auf die Website, dazu in der Administration der Website auf „Inhalt“
„Medien“ und dann „Hochladen“ mit der Maus anklicken. Nun vom Desktop das Logo auswählen und
hochladen. Danach kann man im Template unter den Optionen das Logo verlinken. Hierzu auf
„Erweiterungen“ „Templates“ „ice_future-Standard“ „Optionen“ „Site Logo“
„Auswählen“ und dann das erstellt Logo auswählen, speichern und schließen und fertig, das Logo
wird auf der Website oben in der Leiste angezeigt.
Abbildung 20: Logo
18
User-Verwaltung in Joomla Die User-Verwaltung in Joomla ist ein wichtiges Thema, da man so auf seiner Website Dinge posten und reinstellen kann, die nicht alle, sondern nur bestimmte Personen sehen können. Diese bestimmten Personen brauchen dann einen Benutzernamen und ein Passwort und können sich auf der Website anmelden und diese bestimmten Sachen ebenfalls ansehen und nicht nur das was jede Person öffentlich auf der Seite sehen kann. Es gibt aberauch spezielle Nutzer, die bestimmte Rechte haben, wie zum Beispiel, dass sie ebenfalls Beiträge für die Website erstellen können etc. Alles bestimmen und ändern kann nur der oberste Verwalter, der sogenannte „Super-User“. Wie das allen eingestellt wird erkläre ich jetzt hier: Sie können in ihrer Joomla-Administration, einen neuen Nutzer hinzufügen. Wählen Sie dazu: BenutzerBenutzerneuer Benutzer
Abbildung 21: neuen Benutzer erstellen
Nun kann man sich einen Benutzernamen und ein Passwort überlegen, dass man dann später zum
Einloggen braucht. Dann muss man noch seine eMail Adresse angeben. Unter „Zugewiesene
Gruppen“ kann man dann entscheiden welche Rechte der Nutzer haben soll. „Registriert“ bedeutet
zum Beispiel, das der Nutzer Dinge auf der Website ansehen kann, die nur registrierte Nutzer
ansehen können (nicht öffentlich auf der Website sind) aber ein Publisher zum Beispiel kann auch
eingreifen und Beiträge machen etc. Der Super-User kann alles und darum sollte es auch nur einen
geben. Ich erkläre nun genau wer auf der Website was kann:
Registriert: Kann sich einloggen im Frontend und nur für registrierte Personen zugängige Beiträge
sehen
Autor: Kann im Frontend Beiträge verfassen, diese aber nicht veröffentlichen
Editor: Kann dasselbe wie der Autor und im Frontend die Beiträge des Autors ansehen und verändern
Publisher: Kann Beiträge sofort veröffentlichen.
Administrator: Kann ins Backend und dort Dinge verändern außer die Benutzerverwaltung und die
Konfigurationseinstellung.
Super-User: kann alles, es sollte nur einen geben a der eine den anderen einfach rauskicken könnte
Manager: Kann im Backend Beiträge verfassen, jedoch nicht das System (z.B. Module oder Template)
verändern
19
Abbildung 22: Userrechte
Nun erkläre ich wie man Beiträge oder Kategorien macht, die nur registrierte User sehen können und
nicht bei Aufruf der Internet-Seite für jeden sichtbar ist.
Man erstellt eine normale Kategorie, einen Beitrag in diese und dann legt man die Kategorie auf
einen Menüpunkt. Nur, dass man bei der Kategorie und dem Menüeintrag bei „Zugriffsebene“ statt
„öffentlich“ „registriert“ angeben muss!
Abbildung 23: Zugriffsebene
Damit die User sich auch einloggen können und diese Dinge ansehen können, muss schließlich noch
auf der Homepage ein Feld erstellt werden, in dem man sich mit seinem Benutzernamen und
Passwort einloggen kann, erstellt werden. Das ist praktischerweise ein vorgefertigtes Modul in
Joomla. Man muss dazu auf „Erweiterungen“ „Module“ gehen und das Modul „Anmeldung“ aus.
Nun muss dann dem Modul eine Position geben und in der Menüzuweisung auf Home geben, damit
20
sich der User, gleich wenn er die Website aufruft und auf die Homepage kommt, einloggen kann. Bei
den Optionen muss man nichts verändern.
Abbildung 24: Anmeldung für User
Abbildung 25: Modul "Anmeldung" einstellen
Punkt 13 des Kompetenzchecks
Bei diesem Punkt habe ich zwar verstanden, wie das geht, aber leider nicht richtig gelesen, dass es
Texte aus dem Internet zum Weiterlesen sein sollen, und daher den Punkt nicht geschafft. Ich erkläre
hier also nochmal wie das geht:
Erstelle auf der Homepage drei Textmodule, in denen interessante, kurze, aktuelle Texte jeweils über
Handys, Apps und Tablets stehen. Verlinke immer mit Weiterlesen auf die Website von der du den
Anreißertext hast. (Netsch, Kompetenz-Check, 2013)
Um ein Textmodul anzulegen, geht man in seiner Administration auf „Erweiterungen“ „Module“
„Neu“ „Eigene Inhalte(Leeres Modul)“ und gibt dort eine Überschrift (in diesem Fall „Handy“,
„Apps“ oder „Tablets“ ein und dann eine Position. („Handys“ z.B. auf Promo1, „Apps“ auf Promo2
und „Tablets“ auf Promo3.
21
Abbildung 26: Modul anlegen
Dann geht man zur Menüzuweisung und nimmt „nur auf den gewählten Seiten“ aus und nimmt
ausschließlich „Home“. Sonst sind die Textmodule auf allen Seiten, was sehr komisch und störend
wäre.
Bei Benutzerdefinierte Ausgabe kann man nun wie bei einem Beitrag seinen Text eingeben. In diesem
Fall muss man einen Text über „Handys“ suchen und dann die ersten 3 Zeilen kopieren und hier
einfügen. Dann schreibt man: „Weiterlesen…“ und verlinkt dieses Wort mit der Website8. Dasselbe
das natürlich nochmal über „Apps“ und „Tablets“.
8 Das funktioniert wie bei einem Beitrag. Wie man bei einem Beitrag ein Wort verlinkt, finden Sie unter
„Joomla: in der Administration arbeiten“
22
Punkt 14 des Kompetenz-Checks
Diesen Punkt habe ich beim Kompetenz-Check9 nicht geschafft.
Aufgabe: Formatiere die Homepage so, dass die Fußleiste ansprechend aussieht und die Website
kompakt ist (Veränderung der Höhe in template.css auf 0). (Netsch, Kompetenz-Check, 2013)
Ich habe mittlerweile rausgefunden, wie das geht und versuche dies jetzt zu erklären:
Man geht in seinem Joomla-Backend auf „Erweiterungen“ „Templates“
Abbildung 27: Template Höhenveränderung
Dann muss man hier draufklicken und dann auf „css/template.css bearbeiten“ und dann die
Tastenkombination Strg+f drücken und middle in die Tastatur eintippen10. Unter dem wort „middle“
steht „400px“. Man muss nur diese Zahl durch null ersetzen und das ganze speichern und schließen.
Nun hat man die Fußleiste formatiert.
Man könnte auch noch, indem man das Template ice_future – Standard auswählt, bei facebook und
Twitterseine eigenen Adressen angeben anstatt der icetheme-Werbung.
9 Am 11.12.2013 habe ich das zweite Mal den kompetenz-Check gemacht und diesen Punkt nicht geschafft
10 Dadurch wird in dem langen Code nach dem Wort „middle“ gesucht und man findet schneller die Stelle, an
der man etwas verändern will.
23
HTML und CSS
HTML 5
Wir haben bis jetzt mit HTML 4.1 Transitional im Unterricht gearbeitet. (Programm Topstyle)
Jetzt haben wir mit HTML 5 begonnen.
Abbildung 28: So öffnet man ein HTML 5-Dokument bei Topstyle
Es gibt bei HTML 5 einen neuen HTML-Code auf der Website11 meines Informatiklehrers12, denn bei
HTML 5 arbeitet man mit sogenannten semantischen Elementen.
Durch die semantischen Elemente wird die Webseite einfach in viele bestimmte Teile, die dann
einfacher mit CSS formatierbar sind, geteilt.
Man kann den HTML Tags auch eine Klasse zuweisen oder bei einmaligen Formatierungen eine ID
zuweisen. So kann man bestimmte Bereiche einfacher Formatieren.
Die semantischen Elemente:
<header>Kopfbereich</header> (Wichtig: diesen Bereich nicht mit dem head-tag verwechseln!)
<nav>Navigation</nav>
<section>Sektion/Abschnitt</section>
<article>Artikel/Text</article>
<aside>Sidebar</aside>
<footer>Fussbereich</footer>
Diese semantischen Elemente sind im „body“ und ich muss sie auswendig können.
11
www.nesch.bplaced.net/2013 12
Norbert Netsch
24
HTML-Code Sharky-Web-App Erklärung
<!DOCTYPE html>
<html> HTML wird geöffnet
<head> head-Tag, diesn Teil sieht man nicht
<title>Sharky</title> Den Titel sieht man eventuell in der Suchleiste
<link href="/2013/styles.css" rel="stylesheet"> HTML-Dokument mit einer CSS-Datei verbunden
<meta name="viewport" content="width=device-width, inital-scale=1.0, maxium-scale=1.0, user-
scalable=0">
</head> head-Tag wird geschlossen
<body> body-Tag, diesen Teil sieht man auf der Webseite
<header> header ist eines der semantischen Elemente (Leiste oben im body)
<h1>Sharky App</h1> h1 ist eine große Überschrift
</header> hier schließt sich der header-tag
<section> section Tag- ein semantisches Element
<h1>Willkommen!</h1> h1 ist eine große Überschrift
<p class="einleitung">Einleitung</p> p-Tag = neue Zeile, diesem Tag ist eine Klasse zugeordnet
<aside> aside- Tag- ein semantisches Element
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.</p> dieser Text steht im aside-Bereich
</aside> aside-Tag wird geschlossen
<button id="tickets">Tickets kaufen</button> button ist wie ein „Knopf“ zum anklicken
<button id="quiz">Quiz</button> auf dem Button soll in diesem Fall „Quiz“ stehen
</section> section-tag (semantisches Element) wird geschlossen
<script> script- Tag wird geöffnet
window.scrollTo(0,1);
</script> script- Tag wird geschlossen
</body> hier schließt der body (sichtbarer Bereich) ab
</html> Das html-Dokument wird geschlossen
Quelle des Codes: (Netsch, www.netsch.bplaced.net/2013, 2013)
25
CSS
CSS steht für „Cascading Style Sheets“ (Wikipedia, 2013) und wie das „Style“ im Name schon sagt,
kann man damit HTML-Seiten gestalten. CSS ist für Layout und Formatierung verantwortlich. Dazu
muss man Die CSS-Datei mit der HTML-Datei verbinden. Dazu erstellt man eine HTML-Datei und eine
CSS-Datei und gibt die beiden in denselben Ordner. Eine neue CSS-Datei öffnet man bei topstyle mit
der Tastenkombination Strg+N Dann gibt man im HTML-Dokument in <head>-Tag folgendes ein:
<link href="styles.css" rel="stylesheet">
In den Anführungszeichen muss der Name der CSS-Datei stehen. Nun sind die beiden Dateien
verbunden und man kann in CSS beginnen HTML zu formatieren und layoutieren. Dazu muss man das
CSS-Sprücherl können:
CSS-Sprücherl
CSS besteht aus Regeln. Eine Regel besteht aus einem Selektor und einem Deklarationsblock. Der
Deklarationsblock ist in geschwungene Klammern eingeschlossen und besteht aus Deklarationen.
Eine Deklaration besteht aus Eigenschaft und Wert, die durch einen Doppelpunkt getrennt und durch
einen Strichpunkt abgeschlossen werden.
Man ändert die Hintergrundfarbe des <body>-Tags z.B. so:
body {
background-color: blue;
}
Man kann auch einzelne Abschnitte einfärben, das geht durch die Tags der semantischen Elemente
noch einfacher und auch Dinge wie Schriftart, Schriftgröße, Schriftfarbe etc. ändern.
Abbildung 29: CSS-Beispiel
26
Abbildungsverzeichnis
Abbildung 1: Details, Optionen und Menüzuweisung können eingestellt werden ................................ 5
Abbildung 2: Kalender ............................................................................................................................. 6
Abbildung 3: Wettermodul...................................................................................................................... 6
Abbildung 4: Fotogalerie ......................................................................................................................... 7
Abbildung 5:Akeeba backup hochladen .................................................................................................. 8
Abbildung 6: Akeeba Backup im backend der Website .......................................................................... 8
Abbildung 7:Extract Akeeba .................................................................................................................... 9
Abbildung 8: Anmeldung bei bplaced ..................................................................................................... 9
Abbildung 9: Datenbank erstellen ........................................................................................................... 9
Abbildung 10: Erster Screenshot ........................................................................................................... 10
Abbildung 11: Zweiter Screenshot ........................................................................................................ 11
Abbildung 12: Dritter Screenshot .......................................................................................................... 12
Abbildung 13: Hauptkonfiguration bei Joomla ..................................................................................... 13
Abbildung 14: In die Administration einloggen ..................................................................................... 14
Abbildung 15: Kategorie anlegen .......................................................................................................... 15
Abbildung 16: Menüpunkt anlegen ....................................................................................................... 15
Abbildung 17: Beitrag erstellen ............................................................................................................. 15
Abbildung 18: slides Höhe und Breite ................................................................................................... 16
Abbildung 19: slides .............................................................................................................................. 16
Abbildung 20: Logo ................................................................................................................................ 17
Abbildung 21: Modul anlegen ............................................................................................................... 21
Abbildung 22: Template Höhenveränderung ........................................................................................ 22
Abbildung 23: So öffnet man ein HTML 5-Dokument bei Topstyle ....................................................... 23
Abbildung 24: CSS-Beispiel .................................................................................................................... 25
27
Literaturverzeichnis
Ente, T. (2011). Enten. Entendorf: Entenverlag.
Gans, H. (2010). Gänse. Ganshausen: Gansverlag.
Huhn, B. (2012). Hühner. Huhnstadt: Huhnverlag.
Koch, D. (2013). Joomla 3.0. Düsseldorf.
Netsch, N. (2013). Kompetenz-Check. Schule: Zettel.
Netsch, N. (2013). www.netsch.bplaced.net/2013. OGORG 23: Klassenwebsite.
Wikipedia. (2013). Wikipedia, die freie Enzyklopedie. Wikipedia.
28
Meine Kompetenzen
Was ich jetzt schon können muss:
HTML:
Ich sollte mit HTML, CSS und Javascript arbeiten können.
Wie man HTML-Seiten erstellt und mit CSS verbindet
Ich muss wissen, das HTML für Inhalt und Struktur
verantwortlich ist
Ich muss wissen, dass CSS für Layout und Formatierung
verantwortlich ist
CSS Sprücherl: CSS besteht aus Regeln. Eine Regel besteht
aus einem Selektor und einem Deklarationsblock. Der
Deklarationsblock ist in geschwungene Klammern
eingeschlossen und besteht aus Deklarationen. Eine
Deklaration besteht aus Eigenschaft und Wert, die durch
einen Doppelpunkt getrennt und durch einen Strichpunkt
abgeschlossen werden.
Joomla:
Wie man Joomla downloadet
Wie man einen bplaced-Account anlegt
Wie man FTP und Datenbank einrichtet
Wie man die entpackten Joomla-Dateien hochlädt
Wie man Joomla installiert und mit einer Datenbank
verbindet
Wie man Joomlas Installationsverzeichnis löscht
Wie man Front-, und Backend aufruft
Wie man das Icetheme Template, Menü-, und
Carouselmodule teilweise entpackt und wieder hochlädt
29
Ich muss wissen wie ich eine Kategorie oder eine
Unterkategorie im Hauptmenü (Unterkategorien und
Untermenüpunkte) anlege und diese mit Beiträgen verlinke
Beiträge: ich muss wissen wie ich ein Wort mit einer Website
verlinke oder mehrere Beiträge miteinander verlinke.
Ich muss wissen wie ich auf meiner Website slides mache und
diese zuschneide und wie ich Textfelder auf meiner
Homepage anlege.
Ich muss ein Template und ein Modul hochladen können und
dieses aktivieren und verändern und benutzen und
bearbeiten können.
Ich sollte ein Logo für meine Website gestalten und dort in
der Menüleiste anzeigen können.
Tastenkombinationen:
Strg-c zum kopieren
Strg-v zum einfügen
Strg-x zum ausschneiden
Strg-t um einen neuen Tab zu öffnen
Strg-s um etwas zu speichern
Strg-z um etwas rückgängig zu machen
Strg-a um alles zu markieren
Strg-enter um eine neue Seite in Word zu machen
F5 um die eine Website zu aktualisieren
Was ich beim Check nicht geschafft habe:
Das Logo zu verlinken auf meiner Website
Dass beim Bildertausch das Anfangsbild angezeigt wird,
irgendwas an dem Code scheint nicht gestimmt zu haben.
Die slides richtig zuzuschneiden, ich verstehe nicht wieso es
nicht ging, denn letztes mal habe ich es genauso gemacht
und es hat geklappt
Fußleiste und die Höhe einstellen, ich weiß nicht wo ich das
mache
Die Formularüberprüfung in der Zeit habe ich nicht mehr
geschafft
30
Ich habe nicht gelesen, dass die Textmodule Texte aus dem
Internet zum Weiterlesen sein sollen.
Warum muss ich das können, ist das sinnvoll?:
Ich glaube dass es sinnvoll ist eine Website machen zu
können und dass man wenn man das gut kann damit einmal
viel Geld verdienen könnte oder sich zum Beispiel für einen
eigenen Betrieb eine Website machen und gestalten könnte.
Darum muss ich wissen wie das alles mit den Kategorien und
Beiträgen etc. ist
Was sehr sinnvoll zu lernen war: Die Tastenkombinationen zum
Kopieren, einfügen, neuen Tab öffnen etc. finde ich sehr
sinnvoll um am Computer schneller arbeiten zu können.
Javascript und HTML brauche ich damit sich jetzt etwas
bewegt oder verändert auf einer Webseite, aber diese
ganzen Begriffe und Punkte und Zeichen im HTML, bei denen
wenn eines falsch ist, nichts mehr funktioniert finde ich
manchmal nervig
CSS ist cool weil man damit dem HTML eine Farbe usw.
geben kann, aber warum kann man das nicht irgendwie
direkt im HTML-Dokument machen, das wäre praktischer
Mit Gimp und Picasa ist sinnvoll um Bilder zuzuschneiden und
zu bearbeiten, das kann man oft brauchen.
Mit Word und Powerpoint zu arbeiten war das für mich
sinnvollste, da man es am öftesten im Leben braucht.
31
Formatvorlagen:
1) Was ist eine Formatvorlage?
2) Wozu benötigt man Formatvorlagen?
3) Wie erstellt man eine Formatvorlage?
4) Wie kann man bereits vorhandene Formatvorlagen ändern?
5) Wie kann man Formatvorlagen einem bestimmten Textteil
zuweisen?
6) Wie kann man Formatvorlagen löschen und übernehmen?
7) Wie kann man alle bestehenden Formatvorlagen anzeigen
lassen?
8) Wo und wie kann man einstellen, welche Formatvorlagen
wirklich angezeigt werden?
9) Wie kann man Formatvorlagen auf andere Dokumente
übertragen?
10) Wie kann man Formatvorlagen in verschiedenen Dokumenten
anzeigen lassen?
11) Wie kann man Formatvorlagen mit Tastenkombinationen
verbinden?
12) Wie geht man vor, wenn eine Formatvorlage erstellt werden
soll, die sehr ähnlich ist wie eine bereits bestehende?
13) Kann man auch Formatvorlagen für den folgenden Absatz
erstellen? Wenn ja, wie?
14) Wie erstellt man Formatvorlagen für Tabellen?
15) Wie erstellt man Formatvorlagen für Listen?
16) Was versteht man unter einem Formatinspektor?
17) Wozu benötigt man die Formatvorlagenanzeige?
18) Wie arbeitet man mit Schnellformatvorlagen?
19) Kann man Formatvorlagen auch drucken?
20) Wie kann man nicht benötigte Formatvorlagen ausblenden?
32
21) Wie erstellt man Formatvorlagen für barrierearme PDF-
Dokumente und was versteht man darunter?
Antworten:
1) Eine Formatvorlage ist eine Gruppe von
Formatierungsmerkmalen
2) Um auf einfache Weise die Darstellung eines Textes zu
ändern.
3) Im Register auf StartFormatvorlagenStartprogramm für
Dialogfelderneue Formatvorlage erstellen
4) Auf den Formatvorlagennamen klicken und dann auf das
graublaue Kasterl mit dem schwarzem Pfeil auf
„Formatvorlage ändern“
5) Den entsprechenden Teil markieren und im Aufgabenbereich
Formatvorlagen auf den Namen der Formatvorlage.
6) Wieder im Aufgabenbereich Formatvorlagen auf das
Kästchen mit dem schwarzem Pfeil klicken und dann auf
„Formatvorlage löschen“
7) Textteil markieren und Tastenkombination: Strg-shift-s
8) Im Aufgabenbereich Formatvorlagen auf „Optionen“ und
dort auf „Formatvorlage anzeigen“
9) Option: „Neue auf dieser Vorlage basierende Dokumente“
10)?
10) Typ: Absatz, Zeichen, Verknüpft oder Liste
11) Einstellung: „Formatvorlage basiert auf“
13) Ja, kann man. Einzeiliges Listenfeld: „Formatvorlage für
folgenden Absatz“
14) Im Formatvorlagentyp, „Tabelle“ auswählen
15) Im einzeiligen Listenfeld: Formatierung überrnehmen
33
Schluss
Zusammenfassung
Zusammenfassung Stoff und was wir wissen müssen
Basierend auf den 13 Fragen (Netsch, www.netsch.bplaced.net/2013, 2013)
Eines der ersten Dinge, mit denen wir uns beschäftigt haben, ist der Provider. Wir verwenden
bpalced als Provider. Dieser Angelegt Account ist unser Server und auf ihm basiert die Datenbank,
ohne die unsere Website gar nicht existieren würde. Wir benutzen eine MySQL-Datenbank und
haben diese bei bplaced erstellt, man braucht diese Datenbank um die Joomla-Website bei der
Hauptkonfiguration überhaupt erstellen zu können, denn mit der Datenbank lädt man die ganzen
Daten ins Internet hoch. Dazu benutzen wir ein FTP-Programm namens „filezilla“ hier loggt man sich
mit dem bplaced-Server und der Datenbank ein und kann Daten ins Internet hochladen. All diese
genannten Programme kann man kostenlos benutzen und sie sich kostenlos herunterladen. Wir
arbeiten auf unserer Website mit dem kostenlosen CMS Joomla um das sich diese VWA dreht, ein
CMS ist ein Content Management System (auf Deutsch: Inhaltsverwaltungssystem), dieses brauchen
wir um die Website erstellen, kontrollieren und verändern zu können. Das nächste große Thema mit
dem wir uns beschäftigten waren HTML, CSS und Javascript, wir haben hier mit dem Programm
„topstyle“ gearbeitet. HTMl ist für Inhalt und Struktur verantwortlich, CSS für Layout und
Formatierung. Ich habe in dieser vorwissenschaftlichen Arbeit auch ein bisschen über dieses Thema
geschrieben, da dies auch mit Joomla zu tun hat, da man mit HTML und mit Javascript-Tags im HTML
Webseiten erstellt und diese auf der Website verlinkt. Mit CSS gestaltet man eine damit verbundene
HTML-Datei. Für viele Menschen unklar, der Unterschied zwischen Website und Webseite. Aöso die
Website ist die, die wir in der Klasse hier mit Joomla erstellt haben, also meine eigene Website. Eine
Webseite ist zum Beispiel eine auf der Website verlinkte HTML-Seite. Der Begriff Homepage steht für
die Startseite der Website.
Nachbemerkung
