screencast

300.000 Downloads

Verfasst von Hagen Graf am 11. May 2012 - 11:32

Hagen GrafLetzten Samstag hielt ich eine "halbe" Session auf dem BuchCamp in Frankfurt am 6. Mai 2012 (hier mein Blogeintrag dazu).

Da ich dachte, es ist ein BarCamp und jeder "gibt und nimmt" bot ich an über meine Tätigkeit als "Selfpublishing Autor" zu erzählen (Ich hatte natürlich keine Slides vorbereitet). So sinngemäss mit den Worten:

Ich erzähle euch über meine Arbeit, ihr über eure, und dann gucken wir, was wir zusammen machen können

stellte ich meine Session vor und bekam dann auch tatsächlich einen "halben" Slot am Sonntag morgen um 10 Uhr (was ok war).

Eine "Über uns"-Seite erstellen

Verfasst von Hagen Graf am 3. February 2012 - 15:31
Sponsored by

Um gleich eine realistische Herausforderung zu haben, lassen Sie uns eine erste Seite auf Ihrer neuen Website erstellen. Es soll eine "Über uns"-Seite werden, auf der Sie etwas über Ihre Firma, Ihr Projekt oder sich selbst erzählen. Meistens enthält eine solche Seite ein paar Überschriften, Text und Bilder.

Statischer vs. dynamischer Inhalt

Eine "Über uns"-Seite erstellt man einmal, verlinkt sie im Menü und muss sie im weiteren Verlauf nur noch verändern. Sie hat einen statischen Charakter. Eine Pressemitteilung oder ein Blogeintrag haben dagegen einen dynamischen Charakter.

  • Bei einer statischen Seite spielen das Erstellungsdatum und der Autor keine Rolle, bei einer dynamischen Seite schon.
  • Statische Seiten sind fast immer im Menü verlinkt, dynamische Seite sind über Auflistungen erreichbar.

Der Plan

Auf der "Über uns"-Seite soll es die folgenden Elemente geben:

  • eine Überschrift
  • einen Text
  • ein Bild
  • Die Seite soll nicht auf der Startseite erscheinen.
  • Wir wollen einen Link zur Seite im oberen horizontalen Menü (top).

Das klingt zunächst mal einfach.
Melden Sie sich im Administrationsinterface an.

Schritt 1 – Inhalt erstellen

Gehen Sie in die Beitragsverwaltung (Inhalt - Beiträge). Dort sehen Sie eventuell noch Ihre unveröffentlichten Beispieldaten (siehe Abbildung 1).

Abb 1. Beiträge

Abbildung 1: Beiträge

Nach einem Klick auf das Icon Neu landen Sie im entsprechenden Formular und können den Titel und den Text eintragen. Im oberen Bereich unter dem Titel wählen Sie als Kategorie "uncategorized". Diese Kategorie wurde mit den Beispieldaten angelegt, daher die englische Bezeichnung. Haupteintrag (Featured) gibt an, ob der Inhalt in einem besonderen Blog-Layout angezeigt werden soll. Die Funktion wird benutzt, um Beiträge auf die Startseite zu bringen. Das ist auch in Joomla! 2.5 noch so, aber die einzelnen Begriffe sind leicht mißverständlich. Wählen Sie Nein. Im Editorfenster können Sie jetzt Ihren Text eingeben. Joomla! bringt als Standard den TinyMC-Editor mit (siehe Abbildung 2).

Abb 2. Beitrag Eingabeformular

Abbildung 2: Bearbeitungsformular für Beiträge

Ein Bild von einer URL einfügen

Als erste Variante wollen wir ein bereits im Web vorhandenes Bild nehmen, zum Beispiel dieses:
http://farm2.staticflickr.com/1198/898250237_78a0e75cba_m_d.jpg (Figure 3)

Hagen Fitou

Abbildung 3: Beispielbild

Positionieren Sie den Cursor an die Stelle im Text, an der das Bild erscheinen soll. Klicken Sie auf das Bild-Icon in der Editor-Toolbar, und fügen Sie die URL im erscheinenden Popup-Fenster ein. Positionieren Sie das Bild left, und geben Sie jeweils 10 Pixel vertical und horizontal space ein (siehe Abbildung 4).

Abb 4. Bild einfügen

Abbildung 4: Bild einfügen

Das Bild erscheint in Ihrem Editorfenster. Klicken Sie auf Speichern, und Ihr Artikel ist gespeichert. Zum Speichern gibt es mehrere Möglichkeiten:

  • Speichern: Der Artikel wird gespeichert. Der Dialog wird nicht verlassen, das ist gut zum Zwischenspeichern.
  • Speichern & Schließen: Der Artikel wird gespeichert, und der Dialog wird verlassen.
  • Speichern & Neu: Der Artikel wird gespeichert, der Dialog wird verlassen, und ein neuer Artikeldialog wird aufgerufen.

Verlassen Sie den Dialog.

Schritt 2 – Menülink erstellen

Der Beitrag ist erstellt, taucht aber nicht auf der Website auf. Wir brauchen einen Link, damit er erscheint.

Gehen Sie also in den Menümanager des Top-Menüs (Menüs - Top), und klicken Sie auf das Neu-Icon.

Hinweis: Top ist der Name der Position im Standardtemplate. Wenn Sie nicht das Standardtemplate und die Beispieldaten benutzen, dann existiert das Top Menü nicht oder hat einen anderen Namen.

Klicken Sie neben dem Feld Menütyp auf den Button mit der Aufschrift Wählen. Ein Fenster mit verschiedenen Links öffnet sich. Klicken Sie auf den Link Einzelner Beitrag (siehe Abbildung 5).

Abb 5. Menütyp Auswahl

Abbildung 5: Menütyp-Auswahl

Jetzt müssen Sie den gewünschten Beitrag auswählen. Klicken Sie dazu im rechten Bereich (Beitrag wählen) auf Auswählen/Wechseln. You will see a search box with all articles. Sie erhalten ein Suchfenster mit allen Beitägen. Sollten Sie die Über uns-Seite nicht auf Anhieb finden, können Sie im Suchfenster nach dem Titel suchen und gewünschten Beitrag durch einen Klick auf den Titel auswählen (siehe Abbildung 6).

Abb 6. Menütyp Auswahl - Suche

Abbildung 6: Menütyp-Auswahl – Suche

Geben Sie einen Titel für den Link "Über uns" ein, und achten Sie darauf, dass im Feld Menu Location wirklich top steht. Die restlichen Einstellungen können Sie zunächst beibehalten.

Schritt 3 – "Über uns" auf der Website

Wenn Sie nun Ihre Website neu laden, werden Sie den neuen Link entdecken. Durch einen Klick auf den Link landen Sie auf Ihrer ersten Seite – herzlichen Glückwunsch (siehe Abbildung 7).

Abb 7. Die "Über uns" Seite

Abbildung 7: Die "Über uns"-Seite

Schritt 4 – Bild-Upload

Falls Ihr Bild nicht bereits im Internet vorhanden ist, müssen Sie es von Ihrem PC hochladen. Lassen Sie uns das Beispiel durchspielen. Gehen Sie in die Beitragsverwaltung (Inhalt - Beiträge). Falls Sie Ihren Artikel nicht finden, suchen Sie ihn einfach über das Suchfeld. Klicken Sie auf den Titel des Beitrags. Das Formular zum Ändern öffnet sich. Löschen Sie das verlinkte Bild aus dem Text.

Unter dem Editor-Fenster befindet sich der Bild-Button. Dieser Button startet einen Dialog zum Hochladen eines Bildes. Sie können bereits vorhandene Bilder auswählen oder neue Bilder hochladen (siehe Abbildung 8).

Abb 8. Bild Dialog

Abbildung 8: Bild-Dialog

Nachdem das Bild im Editor eingefügt wurde, können Sie die HTML-Formatierungen über das Bild-Icon des Editors weiter bearbeiten. Diese Trennung der Funktionen ist in Joomla! bewusst gewählt, da Sie unterschiedliche Editoren benutzen können. Der Bild-Button mit dem Einfügedialog von Joomla! bleibt dabei immer derselbe, die Bildbearbeitung im Editor kann sich jedoch unterscheiden.

Achtung: Joomla! übernimmt die Bilder unverändert. Die Bilder werden nicht kleingerechnet und müssen in der richtigen Auflösung vorliegen.

Um dieses Problem zu beheben, lesen Sie Brian Teemans Blog: Making Joomla Idiot Proof . Vielleicht ist FBoxBot ja dann auch für Joomla! 2.5 verfügbar wenn Sie diesen Artikel lesen.

Eine "Über uns"-Seite erstellen

Verfasst von Hagen Graf am 13. January 2011 - 11:13

Um gleich eine realistische Herausforderung zu haben, lassen Sie uns eine erste Seite auf Ihrer neuen Website erstellen. Es soll eine "Über uns"-Seite werden, auf der Sie etwas über Ihre Firma, Ihr Projekt oder sich selbst erzählen. Meistens enthalten solche Seiten ein paar Überschriften, Text und Bilder.

Website vs. Seite

In der englischen Sprache unterscheidet man zwischen den Begriffen Website und Page. Website bezeichnet die gesamte "Homepage", also alle Inhalte, Benutzer und Dialoge, die sich in Ihrer Joomla!-Installation befinden. Eine Page ist eine über eine eindeutige Adresse (URL) erreichbare Seite innerhalb Ihrer Website – also so etwas wie das Impressum oder eine "Über uns"-Seite.

Der deutsche Begriff Homepage ist eine mögliche Übersetzung von Website. Firmen sprechen meist nicht von ihrer Homepage, sondern oft recht wolkig von ihrem Internetauftritt oder ihrer Internetpräsenz. Der Begriff Homepage hat in Deutschland ein "Bastel-Image". Ich bleibe im weiteren Verlauf des Buches bei den Begriffen Website (für alles) und Seite für eine Seite.

Statische vs. dynamische Inhalte

Eine "Über uns"-Seite erstellt man einmal, verlinkt sie im Menü und muss sie im weiteren Verlauf nur noch verändern. Sie hat einen statischen Charakter. Eine Pressemitteilung oder ein Blogeintrag haben dagegen einen dynamischen Charakter.

  • Bei einer statischen Seite spielen das Erstellungsdatum und der Autor keine Rolle, bei einer dynamischen Seite schon.
  • Statische Seiten sind fast immer im Menü verlinkt, dynamische Seite sind über Auflistungen erreichbar.

Der Plan

Auf der "Über uns"-Seite soll es die folgenden Elemente geben:

  • eine Überschrift
  • einen Text
  • ein Bild
  • Die Seite soll nicht auf der Startseite erscheinen.
  • Wir wollen einen Link zur Seite im oberen horizontalen Menü (top).

Das klingt zunächst mal einfach.
Melden Sie sich im Administrationsinterface an.

Weiterlesen

cocoate drupal, joomla, wordpress screencasts

Verfasst von Hagen Graf am 31. August 2010 - 12:56

In den letzten zwei Wochen hat mich der Podcast Virus erfasst. Als Ergebnis gibt es jetzt einen cocoate Video Podcast zu den Themen Joomla!, Wordpress und Drupal. Ich habe sieben Videos aufgenommen und es werden hoffentlich bald mehr. Die Auflösung der Videos liegt bei 960 * 540 Pixel, damit man etwas erkennen kann auf dem PC. Der Vimeo Channel läuft auch gut auf dem iPhone. Falls jemand ein iPad hat, würde mich mal interessieren, wie es da so aussieht.

Links

[Update 2.9.2010]

  • Vimeo channel läuft auf iPad - Danke Kriegel
    our vimeo channel on an iPad
    und hintz
  • Vimeo bietet auch eine iPad /Flash kompatible Einbettung an, die bei mir im Blog leider noch nicht funktioniert weil ich das emfield Modul von Drupal benutze und das wohl noch den alten Code aufbaut.

DE0003 Joomla! 1.6 Installation

Verfasst von Hagen Graf am 18. August 2010 - 23:16
Joomla! 1.6

DE0002 Drupal 7 Installation

Verfasst von Hagen Graf am 18. August 2010 - 18:13
Drupal 7

DE0001 WP3 Installation

Verfasst von Hagen Graf am 18. August 2010 - 16:09
Wordpress 3

Inhalt abgleichen