Grundlagen Internet Das Internet

Grundlagen Internet 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 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: 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

Grundlagen Internet Welche Seiten und Möglichkeiten gibt es?
Klassische Website Shop Blog Community Downloadbörsen Wiki RSS-Feeds/Vid/Podcasts Spiele Foren Suchmaschinen Social Bookmarking Verzeichnisse Klassische Suchmaschine Metasuchmaschine Findmaschine/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: 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 Seitenbaum 2. Layout/Design: Das Layout wird meist mit Photoshop oder Illustrator erstellt 3. 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ür 5. 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 Euro. ( ,

HTML steht für Hypertext Markup Language
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 <H1>Überschrift 1</H1>

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 normal normal <B>fett</B> <I>kursiv</I> <U>unterstrichen</U> <STRIKE>durchgestrichen</STRIKE> <SUP>hochgestellt</SUP> normal normal tiefgestellt normal <SUB>tiefgestellt</SUB>

Webentwicklung Tabelle Spalte 1 Spalte 2 Reihe 1 Wert 1.1 Wert 1.2
<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 / Gestaltung Planung
Auch Formulare zur Eingabe sind möglich: Name Adresse <FORM ACTION="mailto: _address" METHOD="POST"> <BR /><INPUT TYPE="text" NAME="realname" size="30" ><B>Name</B> <BR /><INPUT TYPE="text" NAME=" " SIZE=„20"><B>Adresse</B> <BR /></FORM>

Webentwicklung Titel angeben
Jede 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> <! andere Angaben im Dateikopf > </head>

Webentwicklung Meta-Angaben
In 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 :00:00 GMT"> <! andere Angaben im Dateikopf > </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=" T08:49:37+02:00"> <! andere Angaben im Dateikopf > </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"> <! andere Angaben im Dateikopf > </head>

Webentwicklung Auslesen erlauben/verbieten
Die 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"> <! andere Angaben im Dateikopf > </head>

Webentwicklung Angabe zur Zeichenkodierung
Sie 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 "> <! andere Angaben im Dateikopf > </head> application/xhtml+xml charset=utf-8“

Webentwicklung Deutsche Umlaute und scharfes S
Wenn Sie Kodierungen wie ISO 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.

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" " <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 erzwingen
Text 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 definieren
Aufzä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 definieren
Das Verschachteln von Listen ist ebenfalls möglich. <ul> <li>Suchmaschinen <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>

Webentwicklung Aufzählungsliste definieren Nummerierte 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=" Tagesschau</a> Nachrichten<br> <a href=" Newsticker</a> Computer-Nachrichten<br> <a href=" Nachrichtenticker</a> Nachrichten<br> <a href=" 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=" target="_blank">SELFHTML aktuell</a>

Webentwicklung Grafikreferenz definieren
An einer gewünschten Stelle können Sie eine Grafik referenzieren. <img src="pic_ _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-Element
Sie 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øj
2000 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 2002 Von der wachsenden Entwickler-Community betreut (Aufsicht noch immer bei Skårhøj) Ab Version wurde der Extension Manager eingeführt. Somit war die modulare Erweiterung des Systems möglich. Aktuell 4.5

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 Minimale Systemvoraussetzungen (Lokal)
Unix, Linux, Windows oder Mac Betriebssystem (Linux bevorzugt) Apache PHP4, PHP5 Skriptingsprache (ab Typo PHP5 !) MySQL, DBAL (Oracle, Postgres,...) Datenbank (MySQL bevorzugt) Optional ImageMagick 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. Entpacken der Typo3 Archive in das Verzeichnis Öffnen der Seite 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.

Grundlagen Typo3 Installation von Typo3 Schritt 1 Datenbankverbindung
Angeben der Daten Username Passwort und Host Username: s… Passwort: 6dcbc b Host : mysql.webhosting38.1blu.de Diese Daten werden vom Provider zugeteilt.

Schritt 2 Erzeugen der Datenbank Auswahlmö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.

Schritt 3 Anlegen der Datenbankstruktur Typo3 legt automatisch die Datenbanktabellen an. Nach erfolg meldet sich Typo3 mit „YOU´RE DONE“

Grundlagen Typo3 1 Go to the frontend pages 2 Go to the backend login
Installation von Typo3 Das Install Tool bietet nun drei Möglichkeiten an um fortzufahren 1 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 login Dieser Link führt in den Administrationsbereich (Backend) Username: admin Password: password 3 Continue to configure TYPO3 Dieser Link startet das Install Tool erneut aber diesmal im „normal mode“. Hier werden Feineinstellungen vorgenommen die erforderlich sind.

Grundlagen Typo3 HÄUFIG VERWENDETE BEGRIFFE MODUL
Bei 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. BAUM Im 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 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) Info Zugriff (einzelne Seiten oder ganze Seitenbäume können mit Zugriffsrechten versehen werden) Funktionen (anlegen von neun Seiten auf einmal) Versionierung Template (in diesen Modul wird mit TypoScript gearbeitet. )

Grundlagen Typo3 Backend (Admin) Dateiliste
Ansicht des Ordners Fileadmin. Online FTP Programm mit der Möglichkeit Dateien Hochladen, bearbeiten, und löschen Benutzerwerkzeuge (Einstellung für den User) Aufgaben Einstellungen (Name, Sprache, adresse, ) Arbeitsumgebung

Grundlagen Typo3 Backend (Admin) Adminwerkzeuge Benutzer (der Seite)
Erweiterungen (Das System um Extension erweitern und konfigurieren ) DB-Überprüfung Konfiguration Installation (Install Tool) Protokoll Berichte 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: Standard
Hier handelt es sich um den Seitentyp, den Sie am häufigsten verwenden werden. Der Seitentyp Standard ist eine normale Webseite. Seitentyp: Verweis Beim 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: Einstiegspunkt Mit Hilfe des Seitentyps Einstiegspunkt lassen sich Unterseiten einer anderen Seite im TYPO3-Seitenbaum als Unterseiten dieser Seite anzeigen. Seitentyp: SysOrdner Der 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 Bereiche 1 / 0 / 2 / 3 links / 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-Datei
Doch sehen wir uns mal unsere HTML und CSS-Dateien an. Um unser Layout festzulegen, arbeiten wir mit Platzhaltern, so genannten Markern (marks) und SubParts. IN TYPO3 gibt es nur diese zwei Inhaltstypen, andere CMS systeme verwenden 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 komplette HTML/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-Dateien Um 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 = PAGE page.10 = TEMPLATE page.10.template = FILE page.10.template.file = fileadmin/template/html/beispiel.html

Grundlagen Typo3 Marker: <table>
<tr><td>###INHALT###</td></tr> </table> SubParts: <tr> <td>  Hier wird der Blindtext gegen den Inhalt ausgetauscht. <!--###TYPO3BEISPIEL###ende-> </td> </tr>

Grundlagen Typo3 Ein Grundgerüst einer Website könnte also so aussehen: <html> <head> <title>Titel</title> <link rel="stylesheet" type="text/css" href="beispiel.css" media="screen"> </head> <body> <div id="wrap"> <div id="header"><img src="beispiel.jpg" alt="Kopfgrafik"> </div> <div id="header_sub"> <div class="rootline">###ROOTLINE###</div> <div id="main_wrap"> <div id="navigation"> ###NAVIGATION### </div> <div id="content_wrap"> <div id="content"> ###INHALT### <h1>Überschrift 1</h1> <p>Text...</p>  </div> </div> <div id="footer"> ###FOOTER###

Grundlagen Typo3 TypoScript - ist keine Programmiersprache
- ist eine Beschreibungssprache wie HTML

Grundlagen Typo3 TypoScript als Beispiel für eine Bauanleitung eines Schiffs queenMary = SCHIFF Diese 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 TypoScript als Beispiel für eine Bauanleitung eines Schiffs queenMary = SCHIFF queenMary.laenge = 10 queenMary.breite = 4 queenMary.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 TypoScript als Beispiel für eine Bauanleitung eines Schiffs queenMary = SCHIFF queenMary.laenge = 10 queenMary.breite = 4 queenMary.maxGeschwindigkeit = 6 queenMary.label ( Queen Mary London ) Erzeugt ein Schiff mit ein 2 Zeiligen Schild

Grundlagen Typo3 TypoScript als Beispiel für eine Bauanleitung eines Schiffs Geschweifte Klammern queenMary = SCHIFF queenMary{ laenge = 10 breite = 4 maxGeschwindigkeit = 6 } Wichtig bei dem Ausklammern ist das Einrücken der Codeblöcke um Fehler schnell zu finden.

Grundlagen Typo3 TypoScript als Beispiel für eine Bauanleitung eines Schiffs Kopieren von Objekte und Eigenschaften queenMary = SCHIFF queenMary{ laenge = 10 breite = 4 maxGeschwindigkeit = 6 #Beschreibung der ersten Etage: Autodeck 1 = AUTODECK #Beschreibung der zweiten Etage: einfache Kabine 2 = KABINE 2.anzahl = 250 2.bettenJeKabine = 3 #Beschreibung der dritten Etage: Luxuskabine 3 < queenMary.2 3.anzahl = 50 3.bettenJeKabine = 2 }

Suchmaschinen-Optimierung
Grundlagen Typo3 Grundlegende Suchmaschinen-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 ●Ü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>

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 versehen
ATagTitle.field = abstract // title // description Keyworddichte Die 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 Tags Diese 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 Homepage
Wir haben jetzt so viel Arbeit in unsere Website gesteckt, dass wir sie auch gerne mitnehmen 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 und Voreinsteillungen gibt man den Dateinamen an. Wir klicken auf „Exportdatei herunterladen“ 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 Statistik
Wer 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 oder FirefoxAddOn - Alexa Traffic/Sites Linkin In - Elepress (Leistungsdaten, Serverdaten)

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 oder (Demoansicht: )

Grundlagen Typo3 Das bekannteste Tools ist sicherlich Google Analytics. Wie für viele andere Googleanwendungen auch muss man sich hierfür bei Google mit einem Account anmelden (Googl account reicht). Die Daten werden nicht in Echtzeit geliefert, sondern mit etwas Verzögerung. Allerdings sollte man bei Googletools immer auf aktuelle Datenschutzdebatten achten.

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.

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

Grundlagen Typo3 Onlinemarketing und Tracking Heatmaps
Wer sich übrigens für das Klickverhalten seiner Besucher interessiert, der sollte sich mal näher mit 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 Hierfür registriert man sich und schon kann man gefilterte Tests über das Nutzerverhalten bekommen.

Grundlagen Typo3 Weiterführende Webseiten und Literatur:
TYPO3 allgemein: Sicherheitslücken in TYPO3 werden hier angegeben: Wer Bugs findet wendet sich an: bugs.typo3.org oder HTML-Selbstlernkurs online: Generell über TYPO3, CMS und Programmierung

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

Grundlagen Internet Das Internet

Ähnliche Präsentationen

Präsentation zum Thema: "Grundlagen Internet Das Internet"— Präsentation transkript:

Ähnliche Präsentationen

Über Projekt

Feedback

Anmelden

Anmeldung über soziales Netzwerk:

Grundlagen Internet Das Internet

Ähnliche Präsentationen

Präsentation zum Thema: "Grundlagen Internet Das Internet"— Präsentation transkript:

Ähnliche Präsentationen

Über Projekt

Feedback