Kompetenzen Fü r das CMS Joomla

Transkript

1 VWA Prüfer: Norbert Netsch RGORG 23, Anton Krieger Gasse 25 Kompetenzen Fü r das CMS Joomla Anja Anton Krieger Gasse Wien d.anja@gmx.at 1

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 Erste Überschrift Zweite Überschrift Dritte Überschrift Joomla installieren: Hauptkonfiguration Joomla: in der Administration arbeiten Slides Kompetenzcheck Punkt 12 des Kompetenz-Checks Punkt 13 des Kompetenzchecks Punkt 14 des Kompetenz-Checks HTML und CSS HTML HTML-Code Sharky-Web-App Erklärung Abbildungsverzeichnis Literaturverzeichnis Meine Kompetenzen Schluss Zusammenfassung Zusammenfassung Stoff und was wir wissen müssen Nachbemerkung

3 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. 4

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: 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. 5

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: 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 6

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 downloaden 1 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 Website 2 sollte dies so aussehen: Abbildung 4: Fotogalerie 1 Ich habe meine Galerie von folgender Website heruntergeladen: 2 F5-Taste drücken um eine Website zu Aktualisieren 7

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: 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. Nun muss man sich hier den Extracter herunterladen und diesen installieren, dann die Website vom Desktop hineingeben und extracten. 8

9 Abbildung 7:Extract Akeeba Nun muss man bei bplaced einen neuen Account anlegen und in diesem eine neue Datenbank anlegen. Bei der Installation muss man einen Benutzernamen, ein Passwort und seine 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. 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. Abbildung 8: Anmeldung bei bplaced Abbildung 9: Datenbank erstellen 9

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 10

11 Zweite Überschrift Abbildung 11: Zweiter Screenshot (Ente, 2011) 11

12 Dritte Überschrift Abbildung 12: Dritter Screenshot (Gans, 2010) 12

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 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 Aministration 4 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. 13

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 Passwort 5 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 Website 6 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 14

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 15

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 Kategorie 7 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 16

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 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. ( ) 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 17

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: Benutzer Benutzer neuer 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 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 18

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 19

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 25: Modul "Anmeldung" einstellen Abbildung 24: Anmeldung für User 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. 20

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 Website 8. 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 21

22 Punkt 14 des Kompetenz-Checks Diesen Punkt habe ich beim Kompetenz-Check 9 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 eintippen 10. 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 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. 22

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 Website 11 meines Informatiklehrers 12, 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 Norbert Netsch 23

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, userscalable=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, ) 24

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 25

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 Abbildung 11: Zweiter Screenshot Abbildung 12: Dritter Screenshot Abbildung 13: Hauptkonfiguration bei Joomla Abbildung 14: In die Administration einloggen Abbildung 15: Kategorie anlegen Abbildung 16: Menüpunkt anlegen Abbildung 17: Beitrag erstellen Abbildung 18: slides Höhe und Breite Abbildung 19: slides Abbildung 20: Logo Abbildung 21: Modul anlegen Abbildung 22: Template Höhenveränderung Abbildung 23: So öffnet man ein HTML 5-Dokument bei Topstyle Abbildung 24: CSS-Beispiel

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). OGORG 23: Klassenwebsite. Wikipedia. (2013). Wikipedia, die freie Enzyklopedie. Wikipedia. 27

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 28

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 29

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. 30

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

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 Start Formatvorlagen Startprogramm für Dialogfelder neue 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 32

33 Schluss Zusammenfassung Zusammenfassung Stoff und was wir wissen müssen Basierend auf den 13 Fragen (Netsch, ) 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 33