Dipl.-Math. oec. Kundler Wolfgang

1
Professionelle Homepage Grundlagenvortrag
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?

3
Was bedeutet Web 2.0?

• Offenheit Wichtiger Einflussfaktor
• Open Source Projekte z.B Wordpress,
  xtCommerce, 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
4
Sieben Prinzipien des Web 2.0 (Tim OReilly)
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 PCs, auch Mobile oder
sonstige Geräte Benutzerführung Anwendungen
integrieren Rich User Interfaces und Interaktion
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

6
Entwicklung des Internets
Gängige Begriffe der Web 2.0 Thematik im
Zeitverlauf
Quelle de.wikipedia.org/wiki/Web_2.0
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.
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 Onlineangebo
te, 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
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
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.
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.
lthtmlgt ltheadgt lttitlegtOnline-Business für
Existenzgründerlt/titlegt ltmeta name"author"
content"Susanne Angeli" /gt lt/headgt ltbodygt
lt!-- Mittlere Spalte START --gt ltdiv
id"centrecontent" style"floatleft
width554px"gt ltcontainer id"60"
name"Navigationspfad"gtNavigationspfadlt/containergt
ltcontainer id"10" name"HeadlinegtHeadline
(HTML)lt/containergt ltcontainer id"12"
name"Text"gtContent 1lt/containergt lt/divgt
lt!-- Mittlere Spalte ENDE --gt
lt/bodygt lt/htmlgt
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.
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.
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.
Formatdefinition HTML-Beispielcode
Stufe 1 direkt im HTML-Element lth1 style"Elementspezifische CSS-Formate"gt...lt/h1gtz.B. ltp style"background-color808040 colorD8FD02gtlt/pgt
Stufe 2 zentral im ltheadgt-Bereich ltstyle type"text/css"gt lt!-- / ... Dateispezifische CSS-Formate ... / --gtlt/stylegt
Stufe 3 externe CSS-Datei ltlink rel"stylesheet" type"text/css" href"style.css"gt
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).
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.
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. Pod
casting Bezeichnet das Produzieren und Anbieten
von Mediendateien (Hördatei/Audio oder
Bewegtbilddatei/Video) über das Internet.
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/B
log - 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.