Professionelle Homepage Grundlagenvortrag

1. Professionelle Homepage Grundlagenvortrag Dipl.-Math. oec. Kundler Wolfgang www.wallaby.de

2. Inhaltsverzeichnis • Web 2.0 Technologien • Was bedeutet Web 2.0? • Sieben Prinzipien des Web 2.0 • Technische Merkmale von Web 2.0 • Entwicklung des Internets seit 1992 • Verschiedene Web 2.0 Angebotsformen • Content-Management-System • Dynamische Webseiten – PHP kombiniert mit MySQL • Zusammenspiel von Layout, Modul und Template • Schritt 1: HTML-Layout mit Containern erstellen • Schritt 2: Standard-Module im CMS platzieren • Schritt 3: Content in Template mit Containern einbinden • Schritt 4: Homepage mit Cascading Stylesheets fomatieren • Warum Content, Layout und Funktion trennen? Dipl.-Math. oec. Kundler Wolfgang www.wallaby.de

3. Was bedeutet Web 2.0? • Offenheit – Wichtiger Einflussfaktor • Open Source Projekte: z.B: Wordpress, xt:Commerce, contenido, eGroupware • API-Schnittstellen ermöglichen Datenzugriff: z.B. afterbuy, eBay, Google Maps • Trackbacks verstärken Beziehungscharakter: z.B. Weblogs • Standardisierung – Schnelle Weiterentwicklung • RSS-Feeds verteilen Informationen fast jeder Art: z.B. del.icio.us, technorati • XML-Daten werden für Nutzer sinnvoll eingesetzt: z.B. Netvibes • Freiheit – Benutzer nehmen Einfluss (Interaktivität) • Web 2.0 Anwendungen setzen auf die Mitarbeit der User: z.B. Wikipedia • Social Networking erleichtert soziale Beziehungen: z.B. Xing, Google Maps • Online-Foren ermöglichen Wissensaustausch (Mitmach-Web): z.B. phpBB Quelle: www.labuschin.com/journal/web-2-0/was-ist-web-2-0-diesmal-kurz-und-knapp Dipl.-Math. oec. Kundler Wolfgang www.wallaby.de

4. Sieben Prinzipien des Web 2.0 (Tim O‘Reilly) Plattform Web – Das Internet ist inzwischen allgegenwärtig Kollektive Intelligenz – Gegenseitige Verlinkung von Daten im Internet Daten – In Web-Anwendungen gesammelte Daten sind Basis für andere Software-Lebenszyklus – Software ist kein Produkt mehr, sondern ein Service Lightweight Programming Models – Daten sehr einfach jedem bereitstellen Software Level – Als Endgerät sind neben PC‘s, auch Mobile oder sonstige Geräte Benutzerführung – Anwendungen integrieren Rich User Interfaces und Interaktion Dipl.-Math. oec. Kundler Wolfgang www.wallaby.de

5. Technische Merkmale von Web 2.0 • Browserbasierend, d.h. zur Nutzung ist kein Programm nötig • Multiplattform für Computer, PDA, Handy, ... • Verlagerung von Desktop-Funktionen ins Web (SaaS) • Starke Interaktivität der Websites durch AJAX • Kontinuierliche Weiterentwicklung • Neuartige Archivierung von Inhalte durch Tags • Flache Navigation Dipl.-Math. oec. Kundler Wolfgang www.wallaby.de

6. Entwicklung des Internets Gängige Begriffe der Web 2.0 Thematik im Zeitverlauf: Quelle: de.wikipedia.org/wiki/Web_2.0 Dipl.-Math. oec. Kundler Wolfgang www.wallaby.de

7. Verschiedene Web 2.0 Angebotsformen Wikipedia – Die freie Online-Enzyklopädie Am Inhalt kann jeder Onlinenutzer mitarbeiten, in dem er Beiträge verfasst oder ergänzt. Mister Wong/del.icio.us/Furl - Lesezeichensammlungen Im Web stellen Nutzer ihre persönlichen Lesezeichen (Social Bookmarking) der Webgemeinde zur Verfügung und indexieren diese mit Schlagworten. You-Tube / Flickr– Bilder-/Videocommunity Im Web präsentieren Nutzer ihre eigenen Bildern oder Videos, vernetzen, bewerten und kommentieren sich gegenseitig. Dipl.-Math. oec. Kundler Wolfgang www.wallaby.de

8. Verschiedene Web 2.0 Angebotsformen Xing/MySpace/Lokalisten/StudiVZ – Soziale Netzwerke In sozialen Kontakt- bzw. Beziehungsnetzwerken, ob beruflicher (Branchenkontakten knüpfen) oder privater Art, legen Nutzer eigene Profile an. Second Life – Virtuelle Spielewelten Eine virtuelle Welt wird hauptsächlich von den Nutzern gestaltet. Der User bewegt sich durch diese virtuelle Welt mit einer persönlichen Figur (Avatar). Weblogs – Veröffentlichen von Content Onlineangebote, auf denen in periodischen Abständen neue Einträge verfasst werden. Blogger veröffentlichen einfach Texte oder Bilder, die Lesern kommentieren. Die Nutzer verlinken sich gegenseitig. Quelle: ARD/ZDF-Online-Studie 2007 Dipl.-Math. oec. Kundler Wolfgang www.wallaby.de

9. Dynamische Webseiten – PHP kombiniert mit MySQL Wer keine statische Homepage, sondern einen modernen und flexiblen Internetauftritt möchte, der benötigt die Skriptsprache PHP in Verbindung mit MySQL. Damit entwickeln Sie dynamische Webseiten aller Art. phpMyAdmin ist eine freie PHP-Applikation zur Administration von MySQL-Datenbanken Dipl.-Math. oec. Kundler Wolfgang www.wallaby.de

10. Zusammenspiel von Layout, Modul und Template Layout: Das Layout basiert auf ganz einfachem HTML, welches das Grundgerüst bildet mit dem Sie das Aussehen des Frontendbereichs steuern. Module: Dadurch erhält Ihre Website die besonderen Funktionalitäten. Die wichtigsten Standard-Module sind: Navigation, Content, Suchfeld, Loginbox, … Template: Im Template fügen Sie das Layout mit den Modulen zusammen. Sie bestimmen manuell, welches Modul Sie in welchen Layout-Container legen. Dipl.-Math. oec. Kundler Wolfgang www.wallaby.de

11. Homepage mit contenido entwickeln – Layout Schritt 1: HTML-Layout mit Containern erstellen (Aussehen) Bei dem nachfolgenden Quellcode handelt es sich um einen stark gekürzten Auszug aus dem HTML-Quellcode des Layouts. Interessant ist der farblich hervorgehobene Bereich, wo Sie fünf Container in Aktion sehen. <html> <head> <title>Online-Business für Existenzgründer</title> <meta name="author" content="Susanne Angeli" /> </head> <body> … <!-- Mittlere Spalte START --> <div id="centrecontent" style="float:left; width:554px;"> <container id="60" name="Navigationspfad">Navigationspfad</container> <container id="10" name="Headline>Headline (HTML)</container> <container id="12" name="Text">Content 1</container> </div> <!-- Mittlere Spalte ENDE --> … </body> </html> Dipl.-Math. oec. Kundler Wolfgang www.wallaby.de

12. Homepage mit contenido entwickeln – Module Schritt 2: Standard-Module im CMS platzieren (Funktionalität) Damit das Layout wie gewünscht aussieht, benötigen Sie ein paar Standard-Module: Headline, Navigationspfad und Content. Die Container übernehmen die Platzierung von Content in dem Endergebnis der HTML-Webseite. Dipl.-Math. oec. Kundler Wolfgang www.wallaby.de

13. Homepage mit contenido entwickeln – Template Schritt 3: Content im Template mit Containern einbinden Im Normalfall erstellen Sie mehrere Layouts. Mit der Wahl des Layouts sehen Sie die im HTML-Quellcode des Layouts eingebundenen Container. In diese Container legen Sie Informationen (also Content) ab. Dipl.-Math. oec. Kundler Wolfgang www.wallaby.de

14. Homepage mit contenido entwickeln - CSS Schritt 4: Homepage mit Cascading Stylesheets formatieren Es gibt drei Möglichkeiten, um HTML und CSS zu verbinden. Erfolgt eine Formatzuweisung doppelt oder mehrfach, hat stets das CSS-Format mit der niedrigsten Stufe den Vorrang. Dipl.-Math. oec. Kundler Wolfgang www.wallaby.de

15. Warum Content, Layout und Funktion trennen? Die Trennung von Inhalt (Content), Design (Layout) und Funktionalität ist der Hauptaspekt eines CMS. Diese Komponenten werden unabhängig voneinander entwickelt, im Endprodukt zusammengeführt und dient der Übersichtlichkeit: Redakteur - Die Eingabe von Inhalten soll so einfach wie möglich geschehen, ohne dass sich der Autor mit unnötigen Design- und Funktionalitätsfragen beschäftigen muss. Er konzentriert sich voll auf das Erstellen von Inhalten. Designer - Der Webdesigner arbeitet am mittels CSS am Aussehen, ohne wissen zu müssen, was für ein Inhalt letztendlich auf der Seite stehen wird. Programmierer – Er definiert mit PHP und SQL neue Funktionalitäten und bedient sich dabei eigener Hilfsmittel, wie Unified Modeling Language (UML). Dipl.-Math. oec. Kundler Wolfgang www.wallaby.de

16. Glossar Ajax (Asynchronous JavaScript and XML) – Bezeichnet ein Konzept der asynchronen Datenübertragung zwischen Server und Browser, mit dem es möglich ist HTTP-Anfragen durchzuführen, ohne Seiten neu laden zu müssen. CSS (Cascading-StyleSheet) - Eine deklarative Stylesheet-Sprache für strukturierte Dokumente, die zusammen mit HTML und XML im Einsatz ist. HTML (Hypertext Markup Language) - Textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. HTML-Dokumente sind die Grundlage des World Wide Web. Long Tail – Theorie von Chris Anderson, nach der ein Anbieter im Internet durch eine große Anzahl an Nischenprodukten Gewinn machen kann. Dipl.-Math. oec. Kundler Wolfgang www.wallaby.de

17. Glossar Mashups - Webinhalte verschiedener Dienste werden über offene Programmierschnittstellen nahtlos zu neuen Diensten verbunden. MySQL - Ein relationales Datenbankverwaltungssystem. Es als Open-Source-Software für verschiedene Betriebssysteme verfügbar und bildet die Grundlage für dynamische Webauftritte. PHP (Hypertext Preprocessor) - Ist eine Skriptsprache, die hauptsächlich zur Erstellung von dynamischen Webseiten oder Webanwendungen verwendet wird. PHP ist Open-Source-Software. Podcasting – Bezeichnet das Produzieren und Anbieten von Mediendateien (Hördatei/Audio oder Bewegtbilddatei/Video) über das Internet. Dipl.-Math. oec. Kundler Wolfgang www.wallaby.de

18. Glossar RSS – Service auf Webseiten, der wie ein Nachrichtenticker funktioniert, der Überschriften, einen kurzen Textanriss und den Link zur Originalseite enthält. SaaS (Software as a Service) – Distributions-Modell stellt Software als Dienstleistung basierend auf Webtechnologien bereit, inkl. Betreuung. Weblog/Blog - Ist ein auf einer Webseite geführtes und damit öffentlich einsehbares privates oder berufliches Tagebuch oder Journal. Wiki – Software und Sammlung von Webseiten, die von den Benutzern nicht nur gelesen, sondern meist auch direkt online geändert werden können. Dipl.-Math. oec. Kundler Wolfgang www.wallaby.de