Grundlagen Internet

1. 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 www.boege-online-marketing.de

2. Dienste Über das Internet laufen verschiedene Dienste. Das heisst, praktische Anwendungen, die auf die Netzwerk-Infrastruktur des Internets zurückgreifen. Grundlagen Internet www.boege-online-marketing.de

3. Browser • Opera: • regelmäßig Updates • Turbofunktion • über 100 kostenlosen Erweiterungen • Sperren bestimmter Internetseiten • Firefox: • - 5000 verschiedene AddOns(Wetter PageRanketc.) • 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 www.boege-online-marketing.de

4. Browser Internetexplorer (6,7,8): - Der unsicherste unter den Browsern Grundlagen Internet http://www.multimolti.com/blog/2010/04/15/browser-roundup-opera-chrome-firefox-safari-and-internet-explorer-tested/ www.boege-online-marketing.de

5. Welche Seiten und Möglichkeiten gibt es? • Klassische Website • Shop • Blog • Community • Downloadbörsen • Wiki • RSS-Feeds/Vid/Podcasts • Spiele • Foren • Suchmaschinen • SocialBookmarking • Verzeichnisse • Klassische Suchmaschine • Metasuchmaschine • Findmaschine/Antwortmaschine Grundlagen Internet www.boege-online-marketing.de

6. 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 www.boege-online-marketing.de

7. 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 www.boege-online-marketing.de

8. 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 www.boege-online-marketing.de

9. 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 Grundlagen Internet www.boege-online-marketing.de

10. 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.   www.boege-online-marketing.de

11. Webentwicklung Überschrift 1 Überschrift 2 Überschrift 3 Überschrift 4 Überschrift 5 Überschrift 6   <H1>&Uuml;berschrift 1</H1> <H2>&Uuml;berschrift 2</H2> <H3>&Uuml;berschrift 3</H3> <H4>&Uuml;berschrift 4</H4> <H5>&Uuml;berschrift 5</H5> <H6>&Uuml;berschrift 4</H6> www.boege-online-marketing.de

12. 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 www.boege-online-marketing.de

13. Webentwicklung normal  fettkursivunterstrichendurchgestrichen hochgestellt normal normal tiefgestellt normal <B>fett</B> <I>kursiv</I> <U>unterstrichen</U> <STRIKE>durchgestrichen</STRIKE> <SUP>hochgestellt</SUP> normal normal <SUB>tiefgestellt</SUB> www.boege-online-marketing.de

14. 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> www.boege-online-marketing.de

15. 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> www.boege-online-marketing.de

16. 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> www.boege-online-marketing.de

17. 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> <metaname="author" content="Anna Lyse"> <meta http-equiv="expires" content="Sat, 01 Dec 2001 00:00:00 GMT"> <!-- ... andere Angaben im Dateikopf ... --> </head> www.boege-online-marketing.de

18. 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> <metaname="description" content="Dieser Beschreibungstext soll einem Anwender im Suchdienst bei Auffinden dieser Datei erscheinen."> <metaname="author" content="Rainer Wahnsinn"> <metaname="keywords" content="HTML, Meta-Informationen, Suchprogramme, HTTP-Protokoll"> <metaname="date" content="2001-12-15T08:49:37+02:00"> <!-- ... andere Angaben im Dateikopf ... --> </head> www.boege-online-marketing.de

19. 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> <metaname="keywords" lang="de" content="Ferien, Griechenland, Sonnenschein"> <metaname="keywords" lang="en-us" content="vacation, Greece, sunshine"> <metaname="keywords" lang="en" content="holiday, Greece, sunshine"> <metaname="keywords" lang="fr" content="vacances, Gr&egrave;ce, soleil"> <!-- ... andere Angaben im Dateikopf ... --> </head> www.boege-online-marketing.de

20. 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> <metaname="robots" content="noindex"> <!-- ... andere Angaben im Dateikopf ... --> </head> www.boege-online-marketing.de

21. 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-8859-1"> <!-- ... andere Angaben im Dateikopf ... --> </head> application/xhtml+xml charset=utf-8“ www.boege-online-marketing.de

22. Webentwicklung Deutsche Umlaute und scharfes S Wenn 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 ä &auml; Ä &Auml; Ö &ouml; Ö &Ouml; Ü &uuml; Ü &Uuml; ß &szlig; Es gibt eine Menge weiterer Sonderzeichen, die durch solche Umschreibungen dargestellt werden sollten. Diese finden Sie in der  HTML-Zeichenreferenz aufgelistet. www.boege-online-marketing.de

23. 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> www.boege-online-marketing.de

24. 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&auml;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> www.boege-online-marketing.de

25. Webentwicklung Textabsätze ausrichten <h1>Textabs&auml;tze ausrichten</h1> <p align="center">Dies ist ein zentrierter Absatz.</p> <p align="right">Dies ist ein Absatz, der rechtsb&uuml;ndig ausgerichtet ist.</p> <p align="left">Dies ist ein Absatz, der linksb&uuml;ndig ausgerichtet ist ...</p> <p align="justify">Dies ist ein Absatz, der im Blocksatz ausgerichtet ist ...</p> </body> www.boege-online-marketing.de

26. 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 /> www.boege-online-marketing.de

27. 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 &uuml;ber Studieren</li> <li>Liebe geht &uuml;ber Triebe</li> <li>Tante f&auml;llt &uuml;ber Kante</li> </ul> www.boege-online-marketing.de

28. Webentwicklung Aufzählungsliste definieren Das 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 wasanderes</li> </ul> www.boege-online-marketing.de

29. Webentwicklung Aufzählungsliste definieren Nummerierte Listen <ol> <li>bei Anette vorbeischauen</li> <li>bei Bianca vorbeischauen</li> <li>bei Christine vorbeischauen</li> <!-- usw. --> </ol> www.boege-online-marketing.de

30. 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. www.boege-online-marketing.de

31. 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) www.boege-online-marketing.de

32. 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> www.boege-online-marketing.de

33. Webentwicklung   Grafikreferenz definieren An einer gewünschten Stelle können Sie eine Grafik referenzieren. <imgsrc="pic_1231952284_4.png" alt="Tanzmaus"> Breite und Höhe von Grafiken <imgsrc="tanzbaer.png" width="368" height="383" alt="Tanzb&auml;r"> Rahmen um Grafiken <imgsrc="baum.jpg" width="320" height="400" border="4" alt="Abendbaum„> Text um Grafik fließen lassen <h1><imgsrc="text.png" width="311" height="194" align="left" vspace="10" hspace="20" alt="Text?">Ein Text</h1> www.boege-online-marketing.de

34. 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. <divalign="center"> <h1>Alles zentriert</h1> <ul> <li>alles zentriert</li> <li>alles?</li> <li>alles!</li> </ul> </div> www.boege-online-marketing.de

35. 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 • 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 Grundlagen Typo3 www.boege-online-marketing.de

36. Einfache Verwaltung von Inhalten • Zugriffsrecht im System regeln (Redakteure und Administratoren) • leichtanpassbare 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 www.boege-online-marketing.de

37. 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 www.boege-online-marketing.de

38. 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 www.boege-online-marketing.de

39. 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) Optional • ImageMagick bzw. GraphicsMagick Grundlagen Typo3 www.boege-online-marketing.de

40. Architektur und Aufbau von Typo3 • Systemkern (Core) • Extensionen Grundlagen Typo3 www.boege-online-marketing.de

41. 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. Grundlagen Typo3 www.boege-online-marketing.de

42. 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. Grundlagen Typo3 www.boege-online-marketing.de

43. Installation von Typo3 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. Grundlagen Typo3 www.boege-online-marketing.de

44. Installation von Typo3 Schritt 3 Anlegen der Datenbankstruktur • Typo3 legt automatisch die Datenbanktabellen an. • Nach erfolg meldet sich Typo3 mit „YOU´RE DONE“ Grundlagen Typo3 www.boege-online-marketing.de

45. 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 „Nopagesarefound on therootlevel!“ 2 Go to the backend login Dieser Link führt in den Administrationsbereich (Backend) http://localhost/cms1/typo3 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 www.boege-online-marketing.de

46. 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 www.boege-online-marketing.de

47. 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) • 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 www.boege-online-marketing.de

48. 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, E-Mailadresse, ) • Arbeitsumgebung Grundlagen Typo3 www.boege-online-marketing.de

49. 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 www.boege-online-marketing.de

50. 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 www.boege-online-marketing.de