Grundlagen Internet Das Internet Das Internet ist ein weltweites Computernetzwerk, in dem Millionen von einzelnen Computern

Grundlagen Internet

www.boege-online-marketing.de

Das Internet

Das Internet ist ein weltweites Computernetzwerk, in dem Millionen von einzelnen Computern und Computernetzwerken zusammengeschlossen sind.

Das Internet selbst wird oft auch als eine Wolke dargestellt. Diese Wolke umspannt die ganze Welt. Sie hat keinen Ort, wo sie zuhause ist.

Grundlage der Internetkommunikation bildet das Protokoll TCP/IP (Transmission Control Protocol/Internet Protocol).Jeder Computer im Internet bekommt eine Nummer (IP-Adresse). An Hand dieser Nummern können die Computer ihr «Kommunikationspartner» im weltweiten Netzwerk finden.

Grundlagen Internet


Dienste

Über das Internet laufen verschiedene Dienste. Das heisst, praktische Anwendungen, die auf die Netzwerk-Infrastruktur des Internets zurückgreifen.

Dienst Protokoll

WWW (World Wide Web) HTTP

E-Mail SMTP/POP3

FTP (File Transfer Protocol) FTP

Telnet/SSH telnet/SSH

(...)

Grundlagen Internet


Browser

Opera: - regelmäßig Updates-Turbofunktion- über 100 kostenlosen Erweiterungen - Sperren bestimmter Internetseiten

Firefox: - 5000 verschiedene AddOns (Wetter PageRank etc.)

Safari: -standardmäßig auf jedem Applecomputer- abgelaufenen und ungültigen Zertifikaten wird nur selten gewarnt

Chrome: - Googles eigener Internetbrowser. - Seitenaufbau und die Geschwindigkeit sehr schnell

Grundlagen Internet


Browser

Internetexplorer (6,7,8): - Der unsicherste unter den Browsern

http://www.multimolti.com/blog/2010/04/15/browser-roundup-opera-chrome-firefox-safari-and-internet-explorer-tested/

http://www.multimolti.com/blog/2010/04/15/browser-roundup-opera-chrome-firefox-safari-and-internet-explorer-tested/

Grundlagen Internet


Welche Seiten und Möglichkeiten gibt es?

Klassische WebsiteShopBlogCommunityDownloadbörsenWikiRSS-Feeds/Vid/PodcastsSpieleForen

SuchmaschinenSocial BookmarkingVerzeichnisseKlassische SuchmaschineMetasuchmaschineFindmaschine/Antwortmaschine

Grundlagen Internet


URL – Internetadresse

Im Internet hat jedes Dokument eine Adresse, die sogenannte URL (Uniform Resource Locator, auf Deutsch: «einzigartige Adressierung einer Internet-Datei»). Auf der ganzen Welt gibt es keine URL zweimal. Jedes Dokument hat seinen eigenen Platz im Internet. Das stimmt für HTML-Seiten sowie für Grafiken und andere Dateien.Die URL ist die Adresse, die Im Browser eingegeben werden kann, um eine Webseite aufzurufen.Beispiel:http://www.server.com/webseite.html

-Zuhinterst stehen die Buchstaben «html». HTML ist das Dateiformat dieses Dokuments. - Vor dem Punkt steht der Dateiname dieses Dokuments.- Getrennt durch einen Slash (/) folgt weiter vorne «.com». Dies ist die Top-Level-Domain. Sie werden international definiert und von autorisierten Organisationen verwaltet. Für jedes Land ist eine Top-Level-Domain reserviert.

Grundlagen Internet


URL – Internetadresse

Im Internet hat jedes Dokument eine Adresse, die sogenannte URL (Uniform Resource Locator, auf Deutsch: «einzigartige Adressierung einer Internet-Datei»). Auf der ganzen Welt gibt es keine URL zweimal. Jedes Dokument hat seinen eigenen Platz im Internet. Das stimmt für HTML-Seiten sowie für Grafiken und andere Dateien.Die URL ist die Adresse, die Im Browser eingegeben werden kann, um eine Webseite aufzurufen.Beispiel:http://www.server.com/webseite.html

-Zuhinterst stehen die Buchstaben «html». HTML ist das Dateiformat dieses Dokuments. - Vor dem Punkt steht der Dateiname dieses Dokuments.- Getrennt durch einen Slash (/) folgt weiter vorne «.com». Dies ist die Top-Level-Domain. Sie werden international definiert und von autorisierten Organisationen verwaltet. Für jedes Land ist eine Top-Level-Domain reserviert.

Grundlagen Internet


Projektmanagement - Onlineentscheidungen

1. Plan/Ziele/Ideen: Wie soll das Unternehmen dargestellt werden? Wie sollen diese Inhalte auf der Homepage dargestellt werden? → Skizze des Seitenbaum2. Layout/Design: Das Layout wird meist mit Photoshop oder Illustrator erstellt3. Inhalte erstellen: Der endgültige Seitenbaum wird festgelegt, ebenso Metatags wie keywords, description, aber auch Texte/Bilder werden zugeordnet.4. Technische Umsetzung: Hier muss man sich überlegen, wie man der Website gerecht werden kann und entscheidet sich dann für5. Ein bestimmtes CMS: Das Contentmanagementsystem wird eingerichtet und kann genutzt werden.6. Inhalte einpflegen/Mitarbeiterschulung: Nicht nur das CMS muss auf den neuesten Stand gebracht werden, auch die Mitarbeiter. Viele Unternehmen nutzen für die Mitarbeiterschulung auch Wikis, denn hier können alle wichtigen Fragen beantwortet werden.7. Kontrolle, Auswertung/Statistik: Es reicht nicht online zu sein, man muss auch sehen, ob die Seite funktioniert oder doch noch überarbeitet werden muss(Landingpages, Keywords etc.)

Grundlagen Internet


TYPO3-Hosting, Server und Service

Einfacher Webspaceaccount mit PHP und MySQL

Hosting, man spricht auch von Shared Hosting

Eigener Server. Hier gibt es drei Abstufungsmöglichkeiten:- Root (ich bin für alles verantwortlich)- Managed Server (jmd. macht Backups und Updates)-Virtual (mit anderen virtuellen Servern, auf einem Server)

Ein günstiges Hosting gibt es schon ab 10-15 Euro. (www.mittwald.de ,www.1blu.de

http://www.mittwald.de/

http://www.1blu.de/webhosting/homepagepakete/?belboon=030960087e3c01332c0031fc,2951701,&fp=030960087e3c01332c0031fc&ref=adbutler

Webentwicklung

•HTML steht für Hypertext Markup Language

•Es handelt sich um eine "Sprache", mit der WWW-Dokumente erstellt werden. Schriftart, Schriftgröße, Textformatierungen, Darstellung von Bildelementen, Farbdefinitionen, Links u.a. lassen sich so beschreiben. HTML ist ein offener Standard und wird ständig weiterentwickelt. HTML Dokumente sind plattformunabhängig, d.h. sie können sowohl von einem Windows-PC als auch von einem Apple-PC dargestellt werden.


Webentwicklung

Überschrift 1Überschrift 2Überschrift 3Überschrift 4Überschrift 5Überschrift 6

<H1>Überschrift 1</H1>

<H2>Überschrift 2</H2><H3>Überschrift 3</H3><H4>Überschrift 4</H4><H5>Überschrift 5</H5><H6>Überschrift 4</H6>


Webentwicklung

Trennlinien <HR SIZE=3 NOSHADE WIDTH="100%"> <HR SIZE=4 WIDTH="90%"> <HR SIZE=10 WIDTH="80%">

TEXT<FONT COLOR="#CCCCCC">Unterschiedliche</FONT> <FONT COLOR="#0000FF">Farbe</FONT> <FONT COLOR="#DD0000">des</FONT> <FONT COLOR="#FF6633">Textes</FONT>

UnterschiedlicheFarbedesTextes


Webentwicklung

normal fett kursiv unterstrichen durchgestrichen

hochgestellt normalnormal tiefgestellt

normal <B>fett</B> <I>kursiv</I> <U>unterstrichen</U> <STRIKE>durchgestrichen</STRIKE> <SUP>hochgestellt</SUP> normalnormal <SUB>tiefgestellt</SUB>


Webentwicklung

Tabelle

<TABLE BORDER COLS=3 WIDTH="100%" BGCOLOR="#FFFF00" > <TR><TD>Tabelle</TD> <TD>Spalte 1</TD> <TD>Spalte 2</TD></TR> <TR><TD>Reihe 1</TD> <TD>Wert 1.1</TD> <TD>Wert 1.2</TD></TR> </TABLE>


Tabelle Spalte 1 Spalte 2 Reihe 1 Wert 1.1 Wert 1.2

Webentwicklung / GestaltungPlanung

Auch Formulare zur Eingabe sind möglich:

Name

Adresse

<FORM ACTION="mailto:email_address" METHOD="POST"> <BR /><INPUT TYPE="text" NAME="realname" size="30" ><B>Name</B> <BR /><INPUT TYPE="text" NAME="email" SIZE=„20"><B>Adresse</B> <BR /></FORM>


Webentwicklung

Titel angebenJede HTML-Datei muss einen Titel erhalten. Das ist aus folgenden Gründen besonders wichtig:•Der Titel der Datei wird bei der Anzeige im Web-Browser in der Titelzeile des Anzeigefensters angezeigt.

•Der Titel der Datei wird bei der Anzeige im Web-Browser in Karteireitern (tabs) angezeigt.

•Der Titel der Datei wird vom Web-Browser beim Setzen von Lesezeichen (Bookmarks, Favoriten) auf die Datei verwendet.

•Der Titel der Datei wird im Web-Browser in der Liste der bereits besuchten Seiten angezeigt.

<head> <title>Ausblick vom Hamburger Michel</title> </head>


Webentwicklung

Meta-AngabenIn Meta-Angaben können Sie verschiedene nützliche Anweisungen für Web-Server, Web-Browser und automatische Suchprogramme im Internet ("Robots") notieren. Meta-Angaben können Angaben zum Autor und zum Inhalt der Datei enthalten. Sie können aber auch HTTP-Befehle absetzen, zum Beispiel zum automatischen Weiterleiten des Web-Browsers zu einer anderen Adresse.

<head> <meta name="author" content="Anna Lyse"> <meta http-equiv="expires" content="Sat, 01 Dec 2001 00:00:00 GMT">  </head>


Webentwicklung

Sie können Ihre Autorenschaft, eine Kurzbeschreibung des Inhalts, charakteristische Stichwörter und das Publikationsdatum notieren. Insbesondere die Kurzbeschreibung wird in manchen Suchmaschinen angezeigt, wenn ein Anwender nach etwas sucht und diese Datei zu den Treffern gehört. Es ist also sinnvoll, diese Meta-Angaben in allen inhaltlich relevanten HTML-Dateien zu notieren und dabei redaktionell genauso sorgfältig zu sein wie bei dem Text, der im Browser-Fenster angezeigt wird.

<head> <meta name="description" content="Dieser Beschreibungstext soll einem Anwender im Suchdienst bei Auffinden dieser Datei erscheinen."> <meta name="author" content="Rainer Wahnsinn"> <meta name="keywords" content="HTML, Meta-Informationen, Suchprogramme, HTTP-Protokoll"> <meta name="date" content="2001-12-15T08:49:37+02:00"> </head>


Webentwicklung

Sie können mehrere gleichartige Meta-Angaben notieren und dabei zwischen verschiedenen Sprachen trennen. Inbesondere Stichwörter und Kurzbeschreibungen des Inhalts können Sie mehrsprachig angeben.

<head> <meta name="keywords" lang="de" content="Ferien, Griechenland, Sonnenschein"> <meta name="keywords" lang="en-us" content="vacation, Greece, sunshine"> <meta name="keywords" lang="en" content="holiday, Greece, sunshine"> <meta name="keywords" lang="fr" content="vacances, Grèce, soleil">  </head>


Webentwicklung

Auslesen erlauben/verbietenDie folgenden Angaben werden von den meisten Suchmaschinen-Robots beachtet.Wenn Sie eine HTML-Datei zwar im Web anbieten, aber trotzdem verhindern möchten, dass die Datei über öffentliche Suchdienste auffindbar sein soll, können Sie eine entsprechende Anweisung als Meta-Information für Suchprogramme notieren. Sie können solchen Suchprogrammen aber auch mit einer entsprechenden Eingabe signalisieren, dass Sie ein Auslesen der Datei und aller Dateien, die darin über Verweise erreichbar sind, ausdrücklich wünschen.

<head> <meta name="robots" content="noindex">  </head>


Webentwicklung

Angabe zur ZeichenkodierungSie können mit Hilfe einer Meta-Angabe angeben, welche Zeichenkodierung die HTML-Datei verwendet. Diese Angabe ist für den Web-Browser besonders wichtig, denn sie teilt ihm mit, nach welcher Kodierung die Bytes der Datei in Zeichen umgewandelt werden müssen. Wichtig ist die Angabe vor allem dann, wenn Sie innerhalb der HTML-Datei z.B. deutsche Umlaute nicht über benannte Zeichen maskieren. <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  </head>

application/xhtml+xml

charset=utf-8“


Webentwicklung

Deutsche Umlaute und scharfes SWenn Sie Kodierungen wie ISO 8859-1 oder UTF-8 verwenden, können Sie die deutschen Umlaute direkt in Ihrem Editor eintippen. Sofern Sie die besagte Angabe zur Zeichenkodierung im Kopf der HTML-Datei notieren, können Sie davon ausgehen, dass aktuelle und auch ältere Browser die Datei korrekt verarbeiten

ä äÄ ÄÖ öÖ ÖÜ üÜ Üß ß

Es gibt eine Menge weiterer Sonderzeichen, die durch solche Umschreibungen dargestellt werden sollten. Diese finden Sie in der HTML-Zeichenreferenz aufgelistet.


http://de.selfhtml.org/html/referenz/zeichen.htm

Webentwicklung

Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden Teilen:Dokumenttyp-Deklaration (Angabe zur verwendeten HTML-Version)Header (Kopfdaten. z.B. Angaben zu Titel u.ä.)Body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Beschreibung der Seite</title>

</head> <body> </body> </html>


Webentwicklung

Textabsätze definieren

<p> (p = paragraph = Absatz) leitet einen Textabsatz ein. </p> beendet den Textabsatz und steht am Ende des Absatztextes.

<body> <h1>Textabsätze definieren</h1> <p>Hier beginnt ein Absatz, und hier ist er zu Ende.</p> <p>Hier beginnt ein neuer Absatz, und hier ist er zu Ende.</p> </body>


Webentwicklung

Textabsätze ausrichten

<h1>Textabsätze ausrichten</h1> <p align="center">Dies ist ein zentrierter Absatz.</p> <p align="right">Dies ist ein Absatz, der rechtsbündig ausgerichtet ist.</p> <p align="left">Dies ist ein Absatz, der linksbündig ausgerichtet ist ...</p> <p align="justify">Dies ist ein Absatz, der im Blocksatz ausgerichtet ist ...</p> </body>


Webentwicklung

Zeilenumbruch erzwingenText innerhalb von normalen Absätzen, Listen, sowie in Überschriften oder Tabellenzellen wird vom Web-Browser bei der Anzeige automatisch umbrochen. Sie können jedoch an einer gewünschten Stelle einen Zeilenumbruch erzwingen.<br>

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das br-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <br />


Webentwicklung

Aufzählungsliste definierenAufzählungslisten sind z.B. von Bedeutung, um Produkteigenschaften oder Argumente für eine These übersichtlich darzustellen. Bei einer Aufzählungsliste werden alle Listeneinträge mit einem Aufzählungszeichen (Bullet) versehen.

<ul> <li>Probieren geht über Studieren</li> <li>Liebe geht über Triebe</li> <li>Tante fällt über Kante</li> </ul>


Webentwicklung

Aufzählungsliste definierenDas Verschachteln von Listen ist ebenfalls möglich.

<ul> <li>Suchmaschinen <ul> <li>Google</li> <li>AltaVista</li> <li>Fireball</li> </ul> </li> <li>Verzeichnisse <ul> <li>Yahoo</li> <li>Web.de</li> <li>Dino-Online</li> </ul> </li> <li>Was anderes</li> <li>Noch was anderes</li> </ul>


Webentwicklung

Aufzählungsliste definierenNummerierte Listen

<ol> <li>bei Anette vorbeischauen</li><li>bei Bianca vorbeischauen</li> <li>bei Christine vorbeischauen</li>  </ol>


Webentwicklung

Für Aufzählungslisten können Sie das Symbol bestimmen, das vor den Listeneinträgen angezeigt wird:

<ul type="circle"> für nicht ausgefüllte Kreise (circle = Kreis).<ul type="disc"> für ausgefüllte Kreise (disc = Scheibe)<ul type="square"> für Rechtecke (square = Rechteck).Für nummerierte Listen können Sie die Art der Nummerierung bestimmen:Mit <ol type="I"> werden die Listeneinträge mit I., II., III., IV. usw. nummeriert.Mit <ol type="i"> werden die Listeneinträge mit i., ii., iii., iv. usw. nummeriert.Mit <ol type="A"> werden die Listeneinträge mit A., B., C. usw. nummeriert.Mit <ol type="a"> werden die Listeneinträge mit a., b., c. usw. nummeriert.


Webentwicklung

Verweise

<a href="http://www.tagesschau.de/">ARD Tagesschau</a> Nachrichten<br> <a href="http://www.heise.de/newsticker/">Heise Newsticker</a> Computer-Nachrichten<br> <a href="http://de.news.yahoo.com/">Yahoo Nachrichtenticker</a> Nachrichten<br> <a href="http://www.oneworld.net/section/current">OneWorld News</a> Nachrichten (en)

<a href=„/admin/ueber_uns.html">OneWorld News</a> Nachrichten (en)


Webentwicklung

Verweise optisch gestalten mit CSS

<head> <title>Verweise gestalten mit CSS</title> <style type="text/css"> a:link { text-decoration:none; font-weight:bold; color:#e00000; } a:visited { text-decoration:none; font-weight:bold; color:#800000; } a:hover { text-decoration:none; font-weight:bold; background-color:#ff0; } a:active { text-decoration:none; font-weight:bold; background-color:#cff; } a:focus { text-decoration:none; font-weight:bold; background-color:#080; } </style> </head>

Zielfenster bestimmen<a href="http://aktuell.de.selfhtml.org/" target="_blank">SELFHTML aktuell</a>


Webentwicklung

Grafikreferenz definierenAn einer gewünschten Stelle können Sie eine Grafik referenzieren.

<img src="pic_1231952284_4.png" alt="Tanzmaus">

Breite und Höhe von Grafiken<img src="tanzbaer.png" width="368" height="383" alt="Tanzbär">

Rahmen um Grafiken<img src="baum.jpg" width="320" height="400" border="4" alt="Abendbaum„>

Text um Grafik fließen lassen<h1><img src="text.png" width="311" height="194" align="left" vspace="10" hspace="20" alt="Text?">Ein Text</h1>


Webentwicklung

Allgemeines Block-ElementSie können mehrere Elemente wie Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich einschließen. Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften.

<div align="center"> <h1>Alles zentriert</h1> <ul> <li>alles zentriert</li> <li>alles?</li> <li>alles!</li> </ul> </div>


Grundlagen Typo3


1997 Kopenhagener Programmierer Kasper Skårhøj2000 GPL (GNU Public License) freigegeben

- beliebig zu nutzen- beliebig kopiert und weiterverbreitet werden darf- frei verändert werden darf- Veränderungen stehen wieder unter GPL

http://www.gnu.de/documents/gpl.de.html

2002 Von der wachsenden Entwickler-Community betreut (Aufsicht noch immer bei Skårhøj)Ab Version 3.5.1 wurde der Extension Manager eingeführt. Somit war die modulare Erweiterung des Systems möglich. Aktuell 4.5

http://www.gnu.de/documents/gpl.de.html

Grundlagen Typo3


• Einfache Verwaltung von Inhalten• Zugriffsrecht im System regeln (Redakteure und Administratoren)• leicht anpassbare Corporate Identity (Layout)• Trennung von Inhalt und Layout (“Templates”)• Ortsunabhängig (Änderung ohne spezielle Software)

Weitere Möglichkeiten• Versand von Newsletter• Online-Umfragen• Geschützte Seiten (Intranet)• Zeitgesteuerte Freigabe von Inhalten• Mehrsprachigkeit

Grundlagen Typo3


Positionierung

• Plattformunabhängige Serverapplikation• Die Bedienung erfolgt durch ein Webbrowser• Kostenlose Open Source Software (aber dennoch Enterprise-Lösung)• Umfassende Administrationsoberfläche (Backend) • Webpräsents (Frontend)• Durch Programmierung von PHP und MYSQL Grundfunktionen des CMS Typo3 erweiterbar

Grundlagen Typo3


Positionierung

• Plattformunabhängige Serverapplikation• Die Bedienung erfolgt durch ein Webbrowser• Kostenlose Open Source Software (aber dennoch Enterprise-Lösung)• Umfassende Administrationsoberfläche (Backend) • Webpräsents (Frontend)• Durch Programmierung von PHP und MYSQL Grundfunktionen des CMS Typo3 erweiterbar

Grundlagen Typo3


Minimale Systemvoraussetzungen (Lokal)

Unix, Linux, Windows oder Mac Betriebssystem (Linux bevorzugt)Apache PHP4, PHP5 Skriptingsprache (ab Typo3 4.2.0 PHP5 !)MySQL, DBAL (Oracle, Postgres,...) Datenbank (MySQL bevorzugt) OptionalImageMagick bzw. GraphicsMagick

Grundlagen Typo3


Architektur und Aufbau von Typo3

•Systemkern (Core)•Extensionen

Grundlagen Typo3


Installation von Typo3

Typo3 besteht aus zwei Paketen Typo3 Souce und Typo3 Dummy-Site. Sie benötigen immer beide für ein lauffähiges System. www.typo3.org/download/packages

Entpacken der Typo3 Archive in das Verzeichnis

Öffnen der Seite http://schulung.boege-online-marketing.de/neu

Die in diesem Verzeichnis liegende Datei index.php sorgt für den Fortgang der Installation. Sie werden automatisch zum Typo3 Install Tool weitergeleitet. Der 123mode der angeboten wird führt am schnellst zu einer lauffähigen Typo3-Umgebung.

http://www.typo3.org/download/packages

http://schulung.boege-online-marketing.de/neu

Grundlagen Typo3


Installation von Typo3Schritt 1 Datenbankverbindung

Angeben der Daten Username Passwort und Host

Username: s…Passwort: 6dcbc bHost : mysql.webhosting38.1blu.de

Diese Daten werden vom Provider zugeteilt.

Grundlagen Typo3


Installation von Typo3Schritt 2 Erzeugen der DatenbankAuswahlmöglichkeit 1:Auswahl einer bereits angelegten Datenbank auswählen. Gleichnamige werden Überschrieben.

Auswahlmöglichkeit 2:CREATE NEW DATABASE einen Namen für eine neue Datenbank anlegen.Keine Leerzeichen und andere Interpunktionszeichen verwenden.

Grundlagen Typo3


Installation von Typo3Schritt 3 Anlegen der DatenbankstrukturTypo3 legt automatisch die Datenbanktabellen an. Nach erfolg meldet sich Typo3 mit „YOU´RE DONE“

Grundlagen Typo3


Installation von Typo3Das Install Tool bietet nun drei Möglichkeiten an um fortzufahren1 Go to the frontend pagesÜber diesen Link wechselt man zum Frontend. Derzeit ist im CMS allerdings nichts hinterlegt. Sie erhalten eine Fehlermeldung „No pages are found on the rootlevel!“

2 Go to the backend loginDieser Link führt in den Administrationsbereich (Backend)http://localhost/cms1/typo3Username: adminPassword: password

3 Continue to configure TYPO3Dieser Link startet das Install Tool erneut aber diesmal im „normal mode“. Hier werden

Feineinstellungen vorgenommen die erforderlich sind.

http://localhost/cms1/typo3

Grundlagen Typo3


HÄUFIG VERWENDETE BEGRIFFE

MODULBei einem Modul handelt es sich um einen Bereich, in dem editiert werden kann. Jeder Benutzer sieht nur die Module, in denen er berechtigt ist zu editieren.

BAUMIm Modul Web sehen Sie zum Beispiel den Seitenbaum. Hierbei handelt es sich um eine Abbildung der Webseiten in einer Baumstruktur.

KONTEXTMENÜIm Seitenbaum/Dateibaum erreichen Sie durch Klicken mit der linken Maustaste auf das Icon bzw. durch Klicken mit der rechten Maustaste auf das Icon oder den dahinterstehenden Titel das so genannte Kontextmenü.Hierbei handelt es sich um ein Interaktionsobjekt, das der Art von Menü ähnelt, das man erhält, wenn man unter Windows die rechte Maustaste benutzt.

Grundlagen Typo3


Backend (Admin)

Login des Backend erreichbar unter http://localhost/cms/typo3 Backend-Module ( Linke Seite)

Web (redaktionelle Arbeit)Seite (Anzeige der Inhalte der Seite)Anzeigen (Ansicht der Seite)Liste (sämtliche Datenbanksätze der gewählten Seite werden dargestellt)InfoZugriff (einzelne Seiten oder ganze Seitenbäume können mit Zugriffsrechten versehen werden)Funktionen (anlegen von neun Seiten auf einmal)VersionierungTemplate (in diesen Modul wird mit TypoScript gearbeitet. )

http://localhost/cms/typo3

Grundlagen Typo3


Backend (Admin)

DateilisteAnsicht des Ordners Fileadmin. Online FTP Programm mit der Möglichkeit Dateien Hochladen, bearbeiten, und löschen

Benutzerwerkzeuge (Einstellung für den User) AufgabenEinstellungen (Name, Sprache, E-Mailadresse, )Arbeitsumgebung

Grundlagen Typo3


Backend (Admin)

AdminwerkzeugeBenutzer (der Seite)Erweiterungen (Das System um Extension erweitern und konfigurieren )DB-ÜberprüfungKonfigurationInstallation (Install Tool)ProtokollBerichte

Hilfe

Grundlagen Typo3


Anlegen von neuen Seiten über das Kontextmenü

Um eine neue (erste)Seite anzulegen klicken Sie auf das Typo3-Logo des Seitenbaums. Es öffnet sich ein Kontextmenü aus dem Sie NEU auswählen. In der rechten Maske erscheinen nun diverse Felder zum Anlegen neuer Datensätze. Klicken Sie auf Seite(in).

Die neue Seite wurde erstellt es bedarf aber noch ein paar kleiner Einstellungen dieser Seite. Alle mit einem gelben Ausrufezeichen sind Pflichtfelder. Nennen Sie diese erste Seite ROOT.

Grundlagen Typo3


SEITENTYPEN

Seitentyp: StandardHier handelt es sich um den Seitentyp, den Sie am häufigsten verwenden werden. Der Seitentyp Standard ist eine normale Webseite.

Seitentyp: VerweisBeim Seitentyp Verweis handelt es sich um eine Verlinkung innerhalb des TYPO3-Seitenbaums. Eine solche Seite erscheint zwar auch im Seitenbaum, allerdings dient diese nur als Ankerpunkt für eine Verlinkung.

Seitentyp: EinstiegspunktMit Hilfe des Seitentyps Einstiegspunkt lassen sich Unterseiten einer anderen Seite im TYPO3-Seitenbaum als Unterseiten dieser Seite anzeigen.

Seitentyp: SysOrdnerDer Seitentyp SysOrdner stellt eine Besonderheit dar. Bei der Auswahl bestimmen Sie hier zwar einen Seitentyp, in der Konsequenz handelt es sich hierbei aber um einen speziellen Ordner, um darin Datensätze innerhalb des Seitenbaums abzulegen.

Grundlagen Typo3


• Rootlevel Typo3 logo• ROOT Ablage TypoScript Template

• Menü OBEN Hilfeseite für die Navigation• Home Einzelne Menüelemente• Sitemap• Impressum• Kontakt• Menü LINKS Hilfeseite für Navigation• Homepage Eigentliche Homepage• Aktuelles Einzelne Menüelemente• Geschützter Bereich• Informationen über Snowboardgebiet• Über uns• Suche

Die Seite ROOT, Menü Oben und Menü LINKS sind nur Hilfsseiten

Grundlagen Typo3


Hilfsseite

Hilfsseiten dienen lediglich der Vererbung des Templates. Der Besucher soll keine Möglichkeit bekommen irgendwie auf diese Seite zu gelangen.

Klicken Sie dazu im Seitenbaum auf das Icon der Seite in der Sie diesen Verweis herstellen wollen. Unter den Eintrag Seiteneigenschaften ändern, öffnen sich die Seiteneigenschaften der Seite. In den Dropdown Menü Typ besteht die Möglichkeit den Verweis einzustellen. Die Registerkarten ändern sich und man kann in der Registerkarte Verweis die gewünschte Seite einstellen.

Grundlagen Typo3


Der Seiteninhalt

Ebenfalls unter „Seite“ hat man die Möglichkeit, neue Seiten oder aber auch Seiteninhalte anzulegen. Wir klicken „Seiteninhalt“ an und sehen vier veränderliche Bereiche1 / 0 / 2 / 3links / mitte / rechts / Rand

Wir entscheiden uns für „mitte“ und „Standard“ und gehen weiter. Jetzt können wir uns zwischen Text, Bild, Text und Bild und noch weiteren Elementen entscheiden.

Grundlagen Typo3


Seiteininhaltstyp (Text)

Sicherlich einer der gebräuchlichsten Seiteninhaltstypen ist Text. Mithilfe dieses Formulars können Sie einen reinen Text in Ihre Seite einfügen. Dafür stehen Ihnen verschiedene Felder zur Verfügung.

Meistens versehen Sie den Seiteninhalt mit einer Überschrift. Geben Sie diese im Feld [Überschrift] ein. Eine linksbündige Überschrift 1 ist hier schon voreingestellt, die Werte der Felder [Typ] und [Justierung] brauchen Sie daher nicht auszufüllen, außer Sie möchten eine kleinere Überschrift verwenden oder die Ausrichtung auf mittig oder rechtsbündig umstellen.

Mit diesen Feldern können Sie dem Seiteninhalt auch eine Bezeichnung zuweisen, die Sie nur im Backend, aber nicht in der Frontend-Ansicht sehen. Dazu müssen Sie bei [Typ] 'Versteckt' wählen. Dies ist sinnvoll, um im Backend bestimmte Textstellen besser wiederzufinden, die nicht mit einer Überschrift versehen sind.

Grundlagen Typo3


Seiteininhaltstyp (Text mit Bild)

Wenn Sie bei [Typ] 'Text mit Bild' auswählen, stehen Ihnen dieselben Möglichkeiten zur Eingabe und Formatierung von Texten zur Auswahl wie beim Seiteninhaltstyp 'Text'. Zusätzlich können Sie jedoch Bilder in den Seiteninhalt einbinden und es stehen Ihnen zahlreiche Felder zur Verfügung, in denen Sie die Eigenschaften der Bilder festlegen können.

Sie können die Bildeigenschaften bestimmen und beispielsweise genauestens die Größe und Position der Bilder festlegen, eine Bilderunterschrift im Feld [Bildtext] hinzufügen oder einen Alternativen bzw. Titeltext eingeben, der angezeigt wird, wenn man mit der Maus über das Bild fährt.

Grundlagen Typo3


Seiteininhaltstyp (Bild)

Falls Sie einmal nur ein Bild einfügen möchten, jedoch keinen Text, können Sie auch den Seiteninhaltstyp 'Bild' wählen. Dann stehen Ihnen dieselben Felder zum Einbinden von Bildern zur Verfügung, jedoch ist dann kein Textfeld im Formular vorhanden

Grundlagen Typo3


Richt-Text-Editor

TYPO3 bietet für die Bearbeitung der Texte im Backend einen Richt-Text-Editor (RTE) an, mit dem sich einfach der Text bearbeiten läßt, wie man das z.B. von Word oder OpenOffice gewöhnt ist. Es gibt dort eine Fülle von möglichen Schaltflächen, von denen aber nur einige standardgemäß eingeblendet sind. Für manche Projekte braucht man ein paar mehr Schaltflächen, bei anderen will man gewisse Schaltflächen wieder verstecken.

Grundlagen Typo3


Die HTML-DateiDoch sehen wir uns mal unsere HTML und CSS-Dateien an. Um unser Layoutfestzulegen, arbeiten wir mit Platzhaltern, so genannten Markern (marks) und SubParts.IN TYPO3 gibt es nur diese zwei Inhaltstypen, andere CMS systemeverwenden mehr Inhaltstypen dieser Art. Marker stellen Platzhalter für Vorlagen dar, Subparts sind Bereichsmarkierungen (Anfangs- und Endmarke) und werden durch die einzufügenden Inhalte ersetzt. Gleiche Bezeichnungen haben gleiche Funktionen. TYPO3 achtet auf die Schreibweise der Namen, ist also „case-sensitive“.

Grundlagen Typo3


Der Bau einer Homepage mittels Markern

Hier nehmen wir schon kompletteHTML/CSS-Dateien und binden diese ein. Allerdings sind in der HTML-Datei nur Marker angegeben, also Stellen, welche noch mit Inhalten gefüllt werden. Es handelt sich also um Gerüste. Der Vorteil dieser Variante: Wenn sich das Grundlayout nicht ändert, dann kann man relativ schnell Inhalte ersetzen. Zuerst müssen wir aber die Dateien in unser Template einschließen.

Einbindung von HTML/CSS-DateienUm mit HTML und CSS-Vorlagen zu arbeiten, laden wir zwei vorbereitete Layouts in den Templateordner und binden sie mit folgenden Befehlen in das Template ein:page = PAGEpage.10 = TEMPLATEpage.10.template = FILEpage.10.template.file = fileadmin/template/html/beispiel.html

Grundlagen Typo3


Marker:<table><tr><td>###INHALT###</td></tr></table>

SubParts:

<table><tr><td>Hier wird der Blindtext gegen den Inhalt ausgetauscht.<div id="content_wrap"><div id="content">###INHALT###<h1>Überschrift 1</h1><p>Text...</p></div></div></div><div id="footer">###FOOTER###</div></div>

Grundlagen Typo3


TypoScript

- ist keine Programmiersprache - ist eine Beschreibungssprache wie HTML

Grundlagen Typo3


TypoScript als Beispiel für eine Bauanleitung eines Schiffs

queenMary = SCHIFFDiese Beschreibung liefert einige Eckdaten wieder das die queenMary ein Schiff werden soll. QueenMary ist dabei ein frei gewählter Name. In diesen Fall soll die queenMary ein Objekt SCHIFF werden.

Grundlagen Typo3



queenMary = SCHIFFqueenMary.laenge = 10queenMary.breite = 4queenMary.maxGeschwindigkeit = 6

Damit wird Typo3 mitgeteilt das die queenMary 10 Meter lang und 4 Meter breit sein soll und die max. Geschwindigkeit bei 6 knoten liegen soll.

Geben wir eine Eigenschaft an die Typo3 nicht kennt so wird ein default-wert genommen.

Grundlagen Typo3



queenMary = SCHIFFqueenMary.laenge = 10queenMary.breite = 4queenMary.maxGeschwindigkeit = 6queenMary.label ( Queen Mary London )Erzeugt ein Schiff mit ein 2 Zeiligen Schild

Grundlagen Typo3



Geschweifte Klammern

queenMary = SCHIFFqueenMary{

laenge = 10breite = 4maxGeschwindigkeit = 6}

Wichtig bei dem Ausklammern ist das Einrücken der Codeblöcke um Fehler schnell zu finden.

Grundlagen Typo3



Kopieren von Objekte und EigenschaftenqueenMary = SCHIFFqueenMary{

laenge = 10breite = 4maxGeschwindigkeit = 6

#Beschreibung der ersten Etage: Autodeck1 = AUTODECK

#Beschreibung der zweiten Etage: einfache Kabine2 = KABINE2.anzahl = 2502.bettenJeKabine = 3

#Beschreibung der dritten Etage: Luxuskabine3 < queenMary.23.anzahl = 503.bettenJeKabine = 2

}

Grundlagen Typo3


GrundlegendeSuchmaschinen-Optimierung

mit TYPO3

Grundlagen Typo3


Suchmaschinen / Robots analysieren

● Domainname● Seitentitel, Seitenname● Metadaten: Sprache, Schlagworte● Text: Fließtext, Überschriften● Bilder: Dateinamen, Alt- / Title-Tags● Verweise: Linkziel & -beschreibung

Ergo: HTML-Code muss verstanden werden!

Grundlagen Typo3


Die gute Nachricht: TYPO3 ist valide!

Aber:● Auf „saubere“ Templates achten● Nicht alle Extensions sind valide

XHTML validieren:●W3C-Validator http://validator.w3.org●Überprüfung von File / URL

Grundlagen Typo3


Wichtiges nicht nur visuell hervorheben

Statt<p style=“font -size:36px“><em>Kapitel 1</em><br />Abschnitt 7</p><p>Lorem ipsum solo sit amet ...</p>

Besser<h1>Kapitel 1</h1><h2>Abschnitt 7</h2><p>Lorem ipsum solo sit amet ...</p>

Grundlagen Typo3


Meta-Daten nutzen

Stichworte: Wichtige Begriffe, die nicht im Text auftauchen

Beschreibung: Zusammenfassung des Inhalts

Grundlagen Typo3


Interne Links setzen

Links mit Title tag versehenATagTitle.field = abstract // title // description

KeyworddichteDie Keyworddichte ist einer der entscheidenden Faktoren für eine Suchmaschine. Neben der Bewertung von Titel und Metaangeben stellen die Keywords die Basis eines Webauftrittes. Wichtig ist hierbei das eine Seite nicht für zu viele Keywords optimiert wird, bzw. nur für wenige Keywordkombinationen optimiert wird.

h1-h5 TagsDiese Tags spielen für viele Suchmaschinen auch eine wichtige Rolle. Das wichtigste Keyword sollte in der h1 Überschrift vorkommen und weitere andere wichtige Keywords in den h2-h5 Tags.

Grundlagen Typo3


Sicherung der HomepageWir haben jetzt so viel Arbeit in unsere Website gesteckt, dass wir sie auch gernemitnehmen möchten – nichts leichter als das. TYPO3-Dateien lassen sich ganz einfach im t3d-Format übertragen oder herunterladen. Also klicken wir auf das alleroberste Element des Seitenbaums (BTA“), klicken auf die rechte Maustaste und wählen „exportieren in t3d“ aus. Jetzt können wir auswählen, was wir genau exportieren wollen. Wir finden jetzt drei Reiter vor: Unter Konfiguration geben wir die Anzahl der Ebenen an („unendlich“ empfiehlt sich meist, da man ohnehin später wählen kann, ob man alles exportiert). Unter Datei undVoreinsteillungen gibt man den Dateinamen an. Wir klicken auf „Exportdateiherunterladen“ und schon haben wir ein Exemplar unserer Website gespeichert.Das spätere Hochladen funktioniert ähnlich. Wieder vom obersten Datenbaumelement ausgehend („BTA“) wählen wir „importieren in t3d“ aus. Man kann unter „Import“ vorhandene Dateien aktualisieren, wir entscheiden uns aber dafür, nicht zu löschen.Wichtig! Hier darauf achten, dass bisherige Dateien nicht überschrieben werden.Unter „hochladen“ ist standardmäßig die Option „vorhandene Dateienüberschreiben“ aktiviert.Deaktivieren und schon haben wir unsere gesicherte Datei hochgeladen und können weiterarbeiten.

Grundlagen Typo3


Auswertung und StatistikWer eine Website betreibt, der möchte natürlich auch wissen, ob die Seite regelmäßig besucht wird. Also müssen wir erstmal sehen, wie populär die Seite ist und wo unsere Mitbewerber stehen. Hierfür benutzt man zum Beispiel:

- Page Rank www.prchecker.info oder FirefoxAddOn- Alexa Traffic/Sites Linkin In www.alexa.com/siteinfo - Elepress http://www.elexpress.de (Leistungsdaten, Serverdaten)

http://www.prchecker.info/

http://www.alexa.com/siteinfo

http://www.elexpress.de/

Grundlagen Typo3


Interessant wäre es noch, herauszufinden wer sie besucht, wie er sie gefunden hat und ob wirklich die ganze Website genutzt wird oder ein Teil brach liegt. Die allgemeinen Fragen zu Websiteaufrufen:•Wie viele Besucher?•Wie viele Seitenaufrufe?•Wie viel Seiten je Besucher?•Woher kam der Besucher/ Wohin geht er?•Wie lange ist er geblieben?•Kommen sie wieder? Wie oft? (Nach 12 Stunden gilt ein Besucher als Wiederkehrer, davor als immer-noch-Surfer)•Wann kam er?•Wer steckt dahinter? (Name, Geschlecht, Stadt, Alter)•Wie sind die demographischen Daten des Besuchers (Gehalt, Stadtviertel, welcherComputer?)•Welchen Webbrowser/Onlinesystem benutzt er (Handy, Laptop, Computer)?•Wie viel Umsatz wurde durch ihn generiert?

Grundlagen Typo3


Besucherstatistiken bekommen wir über unseren Webhoster über die Server Log Datei, IP-Adressen verraten auch einiges über die Zielpersonen, wir können uns auch Informationen per Umfrage besorgen, kaufen oder Auswertungstools verwenden. Eigene Server Log-Infos bekommt man auch über

http://www.webalizer.org/ oder http://anormaltracker.de/ (Demoansicht: http://anormal-tracker.de/vorschau.php )

http://www.webalizer.org/

http://anormaltracker.de/

http://anormal-tracker.de/vorschau.php

Grundlagen Typo3


Das bekannteste Tools ist sicherlich Google Analytics. Wie für viele andereGoogleanwendungen auch muss man sich hierfür bei Google mit einem Accountanmelden (Googlemailaccount reicht). Die Daten werden nicht in Echtzeit geliefert, sondern mit etwas Verzögerung. Allerdings sollte man bei Googletools immer auf aktuelle Datenschutzdebatten achten. http://www.google.com/intl/de/analytics/

http://www.google.com/intl/de/analytics/

Grundlagen Typo3


Ein weiterer kostenloser Trackingdienst ist Statcounter. Dieses englischsprachige Tool funktioniert ähnlich wie Google Analytics, man selbst fügt nur ein paar Zeilen Code in die eigene Website ein und schon findet uns der Statcounter. Anders als bei Google werden hier die Daten in Echtzeit ausgewertet.

http://statcounter.com/

http://statcounter.com/

Grundlagen Typo3


Ein weiterer, ebenfalls englischsprachiger Dienst ist Woopra. Auch hier gibt’s die Daten in Echtzeit, laufen aber über eine Software, die direkt auf den Computer installiert wird.http://www.woopra.com/

Besonders hervorzuheben ist auch das Open-Source-Tool von Piwik. Dieses Tool hat eine Plugin-Struktur, so dass die Auswertung schön personalisiert werden kann.

http://demo.piwik.org/

http://www.woopra.com/

http://demo.piwik.org/

Grundlagen Typo3


Onlinemarketing und TrackingHeatmapsWer sich übrigens für das Klickverhalten seiner Besucher interessiert, der sollte sich mal näher mit http://www.picnet.com.au/met/ befassen. Bei diesem kostenlosen Tool werden so genannte Heatmaps, also so genannte Brennpunkte, wo sich der Besucher am meisten aufgehalten hat, anhand des Klick und Mouseverhaltens erstellt. Wir sehen also, ob unsere Werbung an der richtigen Stelle platziert wurde oder ob wirklich alle Links genutzt wurden. Demo siehe http://www.picnet.com.au/met/console.mvc Hierfür registriert man sich und schon kann man gefilterte Tests über das Nutzerverhalten bekommen.

http://www.picnet.com.au/met/

http://www.picnet.com.au/met/console.mvc

Grundlagen Typo3


Weiterführende Webseiten und Literatur:TYPO3 allgemein:http://www.typo3.net/http://association.typo3.org/http://www.typo3.tu-berlin.de/menue/home/aktuelles/http://blog.mittwald.de/cms/neue-typo3-versionen-in-arbeit/http://typo3-beratung.com/typo3-tipps/http://www.typo3-macher.de/http://www.typo3-websites.eu/typo3-videos.htmSicherheitslücken in TYPO3 werden hier angegeben:http://typo3.org/teams/securityWer Bugs findet wendet sich an:bugs.typo3.org oder http://lists.typo3.org/cgi-bin/mailman/listinfoHTML-Selbstlernkurs online:http://de.selfhtml.org/Generell über TYPO3, CMS und Programmierunghttp://t3n.dehttp://www.der-webentwickler.net/http://www.contentmanager.de/magazin/http://typo3weblog.de/

Grundlagen Typo3


http://www.typo3-websites.eu/

http://www.typo3-websites.eu/

Documents

Grundlagen Internet Das Internet Das Internet ist ein weltweites Computernetzwerk, in dem Millionen von einzelnen Computern