Thomas Kraehe
Münchner Volkshochschule
Das Web

Server

CMS

Suchmaschinen
Browser

Soziale Netzwerke
Baukasten

URL

HTML
Hosting
Domain
MVHS :: Webauftritt erf...
Ihr Ziel
Ich möchte eine eigene Website!
 Was muss ich dafür tun?
 Was kann ich selbst machen?
 Was muss ich machen las...
Vorstellungsrunde


Ihr Wissensstand:
Erfahrungen im Web, HTML, CSS, Hosting?
Ihre Wünsche und Anregungen?



Mein Hinte...
Inhalt
1. Internet & WWW
2. Webseiten
3. Software
4. Client – Server Architektur
5. Webhosting
6. Content Management Syste...
Internet & WWW


Das Internet
 Interconnected Network
 Weltweites Netzwerk, bestehend aus vielen Rechnern und

Rechnern...
Internet & WWW


Das WWW
 World Wide Web
 Englischen für: „Weltweites Netz“
 Ein über das Internet abrufbares System v...
Internet & WWW


OSI-Modell (Open Systems Interconnection
Reference Model)
Anwendungsschicht
• Hypertext Transfer Protoco...
Inhalt
1. Internet & WWW
2. Webseiten
3. Software
4. Client – Server Architektur
5. Webhosting
6. Content Management Syste...
Webseiten

MVHS :: Webauftritt erfolgreich :: Thomas Kraehe

10
Webseiten


HTML-Dokumente
 Hypertext Markup Language
 Einfache Textdateien zur Inhaltsstrukturierung
 Z.B.: meineseit...
Webseiten

MVHS :: Webauftritt erfolgreich :: Thomas Kraehe

12
Webseiten – HTML & CSS


Trennung von Struktur und Darstellung:
 Struktur & Inhalt: HTML
 Darstellung/Formatierung: CSS...
Webseiten - HTML


Einfaches HTML-Dokument:

<!DOCTYPE HTML>
<html>
<head>
<title>Mein erstes HTML-Dokument</title>
</hea...
Webseiten - CSS



Cascading Stylesheets (CSS)
Für die optischen Darstellung der Inhalte:
 Layout: Höhe, Breite, Positi...
Webseiten – HTML & CSS
<!DOCTYPE HTML>
<html>
<head>
<title>Mein erstes HTML-Dokument</title>
<style type="text/css">
body...
Webseiten - Verlinkung
Kunde A
Referenzen
Kunde B
Startseite

Kontakt
Leistungen

MVHS :: Webauftritt erfolgreich :: Thoma...
Webseiten – Links
Verknüpfung der Dokumente durch
Hyperlinks
 href = Hypertext Reference


<a href=“projekte.html”>Zu me...
Webseiten - Begriffe
Webseite:
eine einzelne Seite bzw. eine HTMLDatei, z.B. kontakt.html
 Website:
die gesamte Sammlung ...
Webseiten


Eine einfache Website

MVHS :: Webauftritt erfolgreich :: Thomas Kraehe

20
Inhalt
1. Internet & WWW
2. Webseiten
3. Software
4. Client – Server Architektur
5. Webhosting
6. Content Management Syste...
Software - Texteditor
HTML- und CSS-Dateien lassen sich mit
einem einfachen Texteditor bearbeiten.
 Hilfreich sind Editor...
Software - Texteditor

MVHS :: Webauftritt erfolgreich :: Thomas Kraehe

23
Software - WYSIWYG
What you see is what you get - Editoren
 Haben eine graphische Oberfläche und
stellen gleich das Ergeb...
Software - WYSIWYG

MVHS :: Webauftritt erfolgreich :: Thomas Kraehe

25
Software – Bildbearbeitung


Zur Bearbeitung, z.B. Verkleinerung von
Fotos
 Adobe Photoshop






(Sehr professionel...
Software – Bildbearbeitung

MVHS :: Webauftritt erfolgreich :: Thomas Kraehe

27
Software - FTP
File Transfer Programm (FTP)
 um die Dateien auf den Server zu
übertragen oder umgekehrt


 FileZilla (k...
Software - FTP

MVHS :: Webauftritt erfolgreich :: Thomas Kraehe

29
Inhalt
1. Internet & WWW
2. Webseiten
3. Software
4. Client – Server Architektur
5. Webhosting
6. Content Management Syste...
Server




Einfacher Computer / Rechner
Steht meist zusammen mit vielen Artgenossen in
einem Rechenzentrum
Auf dem Serv...
Server

MVHS :: Webauftritt erfolgreich :: Thomas Kraehe

32
Rechenzentrum

MVHS :: Webauftritt erfolgreich :: Thomas Kraehe

33
Client – Server Architektur

MVHS :: Webauftritt erfolgreich :: Thomas Kraehe

34
Client-Server Architektur

www.mvhs.de

MVHS :: Webauftritt erfolgreich :: Thomas Kraehe

index.html

35
Domain


Einfach: Name/Adresse der Website, z.B. mvhs.de



Im Internet weltweit einmaliger und eindeutiger
und unter ge...
DNS





Domain Name System
Verbindet IP-Adresse mit Domain-Namen
Vergabe durch die Internet Assigned Numbers
Authorit...
Domain


http://www.google.com
Top-Level
Domain
.de .com .org
Second-Level
Domain
mvhs

Second-Level
Domain
arrabiata

Su...
URL








Uniform Resource Locator
einheitlicher Quellenanzeiger
identifizieren und lokalisieren eine Ressource übe...
Inhalt
1. Internet & WWW
2. Webseiten
3. Software
4. Client – Server Architektur
5. Webhosting
6. Content Management Syste...
Webhosting


Internet Service Provider (ISP), Internetdienstleister








Internetzugang
Hosting: Server, Domain,...
Webhosting


Hosting Leistungen:
 Registrierung der Domain







(Denic für .de Domains)
Einrichtung der DNS
Berei...
Webhosting - Leistungen


Preisunterschiede je nach
Leistungsumfang:









Inklusiv-Domains
Webhosting/Webspac...
Shared Hosting

Physischer Server
Virtueller
Server
Webspace

Webspace

Virtueller
Server
Webspace

MVHS :: Webauftritt er...
Webhosting - Leistungen


Dedicated Server
 Auch dedizierter Host oder Root-Server
 Kunde erhält eigenen Server mit vol...
Webhosting - Leistungen
Domain
Webhosting
Baukasten
Virtueller Server
Physischer Server
Cloud Infrastruktur
MVHS :: Webauf...
Inhalt
1. Internet & WWW
2. Webseiten
3. Software
4. Client – Server Architektur
5. Webhosting
6. Content Management Syste...
Content Management Systeme
Software die auf dem Server installiert wird um
damit eine Website zu betreiben


Content
 In...
Open Source vs. Kommerziell


Open Source:
+ Lizenzkostenfrei
+ Quellcode liegt vor und erlaubt eigene Änderungen
+ große...
Open Source CMS











Redaktionssysteme www.typo3.org, www.joomla.org
Portale/Communities www.drupal.org
Bl...
Client-Server Architektur

www.mvhs.de

MVHS :: Webauftritt erfolgreich :: Thomas Kraehe

index.html

51
CMS-Architektur
Server

Nutzer
Anfrage

.index.php?ItemId=2

Webserver

DBMS

Browser
CMS

Antwort
HTML

PHP

DBMS = Daten...
CMS - Frontend







Der sichtbare Bereich des CMS.
Das Frontend ist in einem CMS nur eine Datei
(z.B. index.php).
...
CMS - Frontend

MVHS :: Webauftritt erfolgreich :: Thomas Kraehe

54
CMS - Backend




Enthält die Administration und alle möglichen
Konfigurationseinstellungen
Ist der Hauptort für die In...
CMS - Backend

MVHS :: Webauftritt erfolgreich :: Thomas Kraehe

56
CMS - Templates







Ein CMS trennt den Inhalt vom Layout
Der Inhalt liegt in der Datenbank
Das Layout wird in eine...
CMS - Online-Editor






Einfache Bearbeitung von Inhalten
Grafische Oberfläche: WYSIWYG-Editor
What you see is what ...
CMS - Online-Editor

MVHS :: Webauftritt erfolgreich :: Thomas Kraehe

59
CMS - Nutzerverwaltung







Die Nutzerverwaltung findet im Backend statt
Nutzer können unterschiedliche Rechte habe...
Was spricht für ein CMS?


Redakteure
 Zahl der Redakteure
 Erfahrungsstand der Redakteure



Inhalte







Ände...
Was spricht gegen ein CMS?





Nur wenige Kriterien für ein CMS sind erfüllt
Hohe bis höchste Performance-Anforderung...
CMS - Technologie
Alle hier vorgestellten Systeme basieren
technisch auf Open Source Software
und sind kostenlos
 Vorauss...
Systeme – Weitere Kriterien


Erweiterbarkeit, Plugins für
 Bildergalerie / Slideshow
 Social Media Integration (Like B...
Inhalt
1. Internet & WWW
2. Webseiten
3. Software
4. Client – Server Architektur
5. Webhosting
6. Content Management Syste...
Website Baukasten


Einige Provider bieten Webhosting Pakete mit
vorinstallierter Software (CMS) an
(SAAS aus der Cloud)
...
Soziale Medien








Soziale Netzwerke statt oder ergänzend zur
eigenen Website nutzen
Facebook Fanpage
Google+ U...
Soziale Medien

MVHS :: Webauftritt erfolgreich :: Thomas Kraehe

68
Soziale Medien

MVHS :: Webauftritt erfolgreich :: Thomas Kraehe

69
Inhalt
1. Internet & WWW
2. Webseiten
3. Software
4. Client – Server Architektur
5. Webhosting
6. Content Management Syste...
Kosten- und Möglichkeiten
1.

Kostenlos und wenig individuell:
Cloud Dienste, z.B. ein eigener Blog bei
 http://wordpress...
Kosten- und Möglichkeiten
 Einmalige Kosten einer Website:
○ Erstellung von Konzept, Layout/Design
○ Einrichtung, Install...
Kosten- und Möglichkeiten
Zu guter Letzt noch ein paar Zahlen:
 Einfache Website
○ von Freiberufler: ca. 1000 – 2000€
○ V...
Der Weg

Zielsetzung

Planung

Konzeption

Design

MVHS :: Webauftritt erfolgreich :: Thomas Kraehe

Umsetzung

74
Links & Literatur


Bücher:
 HTML: Spielend gelingt die Website

(Hauser & Wenz)
 HTML5 Handbuch (Gull & Münz)
 Das We...
Fragen?
Meine Website:
http://www.crow-design.de
Mein Blog:
http://www.mountcrow.de
Meine Arbeitgeber:
http://www.arrabiat...
Upcoming SlideShare
Loading in...5
×

MVHS: So realisieren Sie Ihren Webauftritt erfolgreich

778

Published on

Vortrag an der Münchner Volkshochschule im Bereich Internet & Multimedia

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
778
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

MVHS: So realisieren Sie Ihren Webauftritt erfolgreich

  1. 1. Thomas Kraehe Münchner Volkshochschule
  2. 2. Das Web Server CMS Suchmaschinen Browser Soziale Netzwerke Baukasten URL HTML Hosting Domain MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 2
  3. 3. Ihr Ziel Ich möchte eine eigene Website!  Was muss ich dafür tun?  Was kann ich selbst machen?  Was muss ich machen lassen?  Was kostet mich das?  Wen will ich mit meiner Website ansprechen?  Was will ich mit meiner Website erreichen?  MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 3
  4. 4. Vorstellungsrunde  Ihr Wissensstand: Erfahrungen im Web, HTML, CSS, Hosting? Ihre Wünsche und Anregungen?  Mein Hintergrund:   Arrabiata Solutions GmbH Agentur für digitale Kommunikation  Berater für Web Strategien  Software Entwickler  Autor, Referent, Trainer MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 4
  5. 5. Inhalt 1. Internet & WWW 2. Webseiten 3. Software 4. Client – Server Architektur 5. Webhosting 6. Content Management Systeme 7. Baukasten & Soziale Medien 8. Kosten und Möglichkeiten MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 5
  6. 6. Internet & WWW  Das Internet  Interconnected Network  Weltweites Netzwerk, bestehend aus vielen Rechnern und Rechnernetzwerken, durch das Daten ausgetauscht werden  Ermöglicht die Nutzung von Internetdiensten wie E-Mail, Dateiübertragung, WWW, Telefonie, Radio und Fernsehen  Grundlage sind das Internet Protocol (IP) und das Transmission Control Protocol (TCP) MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 6
  7. 7. Internet & WWW  Das WWW  World Wide Web  Englischen für: „Weltweites Netz“  Ein über das Internet abrufbares System von elektronischen Hypertext-Dokumenten, die durch Hyperlinks miteinander verknüpft sind und über die Protokolle HTTP bzw. HTTPS übertragen werden*  Das Internet bildet die Grundlage für das WWW *Quelle: Wikipedia MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 7
  8. 8. Internet & WWW  OSI-Modell (Open Systems Interconnection Reference Model) Anwendungsschicht • Hypertext Transfer Protocol (HTTP) • World Wide Web (www) • Verlinkte Dokumente Transportschicht • Datenaustausch zwischen Rechnern • Transmission Control Protocol (TCP) Netzwerk • Internet Protokoll (IP) • IP-Adresse: 192.168.1.1 MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 8
  9. 9. Inhalt 1. Internet & WWW 2. Webseiten 3. Software 4. Client – Server Architektur 5. Webhosting 6. Content Management Systeme 7. Baukasten 8. Kosten und Möglichkeiten MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 9
  10. 10. Webseiten MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 10
  11. 11. Webseiten  HTML-Dokumente  Hypertext Markup Language  Einfache Textdateien zur Inhaltsstrukturierung  Z.B.: meineseite.html Ansicht im Browser     (z.B. Mozilla Firefox, Google Chrome, Microsoft Internet Explorer) Rechtsklick in Seiteninhalt, dann „Seitenquelltext anzeigen“, oder Tastenkombination: Strg + U MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 11
  12. 12. Webseiten MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 12
  13. 13. Webseiten – HTML & CSS  Trennung von Struktur und Darstellung:  Struktur & Inhalt: HTML  Darstellung/Formatierung: CSS MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 13
  14. 14. Webseiten - HTML  Einfaches HTML-Dokument: <!DOCTYPE HTML> <html> <head> <title>Mein erstes HTML-Dokument</title> </head> <body> <h1>Ich bin eine Überschrift</h1> <p>Ich bin ein Absatz mit Text</p> <img src="bild.jpg" alt=“VHS Logo" /> </body> </html> MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 14
  15. 15. Webseiten - CSS   Cascading Stylesheets (CSS) Für die optischen Darstellung der Inhalte:  Layout: Höhe, Breite, Position von Elementen  Farben  Schriften und Formatierung  Neu: auch Effekte und Verhalten mit CSS3 body { background-color: white; } h1 { font-size:18px; color: black; } p { font-size: 12px; color: grey; } MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 15
  16. 16. Webseiten – HTML & CSS <!DOCTYPE HTML> <html> <head> <title>Mein erstes HTML-Dokument</title> <style type="text/css"> body { background-color: yellow; } h1 { font-size:30px; color: red; } p { font-size: 14px; color: grey; } </style> </head> <body> <h1>Ich bin eine Überschrift</h1> <p>Ich bin ein Absatz mit Text</p> <img src="bild.jpg" alt=“MVHS Logo" /> </body> </html> MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 16
  17. 17. Webseiten - Verlinkung Kunde A Referenzen Kunde B Startseite Kontakt Leistungen MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 17
  18. 18. Webseiten – Links Verknüpfung der Dokumente durch Hyperlinks  href = Hypertext Reference  <a href=“projekte.html”>Zu meinen Projekten</a> MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 18
  19. 19. Webseiten - Begriffe Webseite: eine einzelne Seite bzw. eine HTMLDatei, z.B. kontakt.html  Website: die gesamte Sammlung aller Seiten/Dateien und Inhalte  Homepage: Die Startseite der Website, meist index.html oder index.php  MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 19
  20. 20. Webseiten  Eine einfache Website MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 20
  21. 21. Inhalt 1. Internet & WWW 2. Webseiten 3. Software 4. Client – Server Architektur 5. Webhosting 6. Content Management Systeme 7. Baukasten & Soziale Medien 8. Kosten und Möglichkeiten MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 21
  22. 22. Software - Texteditor HTML- und CSS-Dateien lassen sich mit einem einfachen Texteditor bearbeiten.  Hilfreich sind Editoren mit CodeHervorhebung (Code Highlighting)   Windows: Notepad++  Mac: TextWrangler MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 22
  23. 23. Software - Texteditor MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 23
  24. 24. Software - WYSIWYG What you see is what you get - Editoren  Haben eine graphische Oberfläche und stellen gleich das Ergebnis dar.  Arbeiten im Code ist nicht unbedingt nötig, Verständnis ist aber von Vorteil.  Bieten meist zusätzliche Funktionen wie Projekt-/Dateiverwaltung und FTP   Adobe Dreamweaver / Muse  Microsoft Expression Web MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 24
  25. 25. Software - WYSIWYG MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 25
  26. 26. Software – Bildbearbeitung  Zur Bearbeitung, z.B. Verkleinerung von Fotos  Adobe Photoshop     (Sehr professionell und teuer) Adobe Photoshop Elements (der kleine Bruder mit abgespecktem Funktionsumfang, wesentlich billiger) GIMP (Open Source und kostenlos) IrfanView (kostenlos) FILEminimizer (kostenlos) MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 26
  27. 27. Software – Bildbearbeitung MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 27
  28. 28. Software - FTP File Transfer Programm (FTP)  um die Dateien auf den Server zu übertragen oder umgekehrt   FileZilla (kostenlos, Open Source)  FireFTP (Add-on für Firefox, kostenlos) MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 28
  29. 29. Software - FTP MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 29
  30. 30. Inhalt 1. Internet & WWW 2. Webseiten 3. Software 4. Client – Server Architektur 5. Webhosting 6. Content Management Systeme 7. Baukasten & Soziale Medien 8. Kosten und Möglichkeiten MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 30
  31. 31. Server    Einfacher Computer / Rechner Steht meist zusammen mit vielen Artgenossen in einem Rechenzentrum Auf dem Server läuft der Webserver  Ein Programm (z.B. Apache, IIS, NGINX)  Aufgabe des Programms ist es Daten für das Internet bereit zu stellen MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 31
  32. 32. Server MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 32
  33. 33. Rechenzentrum MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 33
  34. 34. Client – Server Architektur MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 34
  35. 35. Client-Server Architektur www.mvhs.de MVHS :: Webauftritt erfolgreich :: Thomas Kraehe index.html 35
  36. 36. Domain  Einfach: Name/Adresse der Website, z.B. mvhs.de  Im Internet weltweit einmaliger und eindeutiger und unter gewissen Regeln frei wählbarer Name  Mit dem Domain-Namen kann ein beliebiges physisches oder virtuelles Objekt weltweit eindeutig adressiert werden (Server)  Zusammenhängender Teilbereich des hierarchischen Domain Name System (DNS) MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 36
  37. 37. DNS     Domain Name System Verbindet IP-Adresse mit Domain-Namen Vergabe durch die Internet Assigned Numbers Authority (IANA) geregelt 173.149.69.94 = google.de MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 37
  38. 38. Domain  http://www.google.com Top-Level Domain .de .com .org Second-Level Domain mvhs Second-Level Domain arrabiata Subdomain www Second-Level Domain google Subdomain keine/leer MVHS :: Webauftritt erfolgreich :: Thomas Kraehe Subdomain mail 38
  39. 39. URL      Uniform Resource Locator einheitlicher Quellenanzeiger identifizieren und lokalisieren eine Ressource über die zu verwendende Zugriffsmethode (z. B. das verwendete Netzwerkprotokoll wie HTTP oder FTP) und den Ort (engl. location) der Ressource in Computernetzwerken Im allgemeinen Sprachgebrauch werden sie auch als Internetadresse oder Webadresse bezeichnet Bsp.: http://www.meinedomain.de/kontakt.html MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 39
  40. 40. Inhalt 1. Internet & WWW 2. Webseiten 3. Software 4. Client – Server Architektur 5. Webhosting 6. Content Management Systeme 7. Baukasten & Soziale Medien 8. Kosten und Möglichkeiten MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 40
  41. 41. Webhosting  Internet Service Provider (ISP), Internetdienstleister       Internetzugang Hosting: Server, Domain, Mail Housing: Rechenzentrum Content: Webseiten, Inhalte Application Service (ASP): Anwendungen Bekannte Unternehmen:        1&1 Strato Webhoster United Domains T-Online Domainfactory All-Inkl MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 41
  42. 42. Webhosting  Hosting Leistungen:  Registrierung der Domain      (Denic für .de Domains) Einrichtung der DNS Bereitstellung von Webspace, Datenbanken, Programmiersprachen E-Mail SSL (Sichere, verschlüsselte Verbindung) Unterschiedliche Pakete:     Web-Visitenkarte Webhosting Virtueller Server (V-Server) Physischer Server (echtes Gerät) MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 42
  43. 43. Webhosting - Leistungen  Preisunterschiede je nach Leistungsumfang:         Inklusiv-Domains Webhosting/Webspace (Speicherplatz) Inklusiv-Traffic (Transfervolumen) Datenbanken E-Mail Adressen & Postfächer Unterstützte Programmiersprachen Inklusiv-Software Service-Level MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 43
  44. 44. Shared Hosting Physischer Server Virtueller Server Webspace Webspace Virtueller Server Webspace MVHS :: Webauftritt erfolgreich :: Thomas Kraehe Webspace 44
  45. 45. Webhosting - Leistungen  Dedicated Server  Auch dedizierter Host oder Root-Server  Kunde erhält eigenen Server mit voller Kontrolle über Betriebssystem, Software, etc.  Managed Server  Gleich wie dedicated Server aber  Provider kümmert sich um die Pflege und Wartung des Systems  Kann auch nur ein virtueller Server sein MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 45
  46. 46. Webhosting - Leistungen Domain Webhosting Baukasten Virtueller Server Physischer Server Cloud Infrastruktur MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 46
  47. 47. Inhalt 1. Internet & WWW 2. Webseiten 3. Software 4. Client – Server Architektur 5. Webhosting 6. Content Management Systeme 7. Baukasten & Soziale Medien 8. Kosten und Möglichkeiten MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 47
  48. 48. Content Management Systeme Software die auf dem Server installiert wird um damit eine Website zu betreiben  Content  Inhalt – die Informationen, Texte, Bilder, PDFs etc. einer Website.  Enger gefasst auch die veränderlichen Inhalte.  Management  Einfache Verwaltung der Inhalte  Verwaltung für eine breite Zielgruppe  System  In sich geschlossene Anwendung MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 48
  49. 49. Open Source vs. Kommerziell  Open Source: + Lizenzkostenfrei + Quellcode liegt vor und erlaubt eigene Änderungen + große Community produziert viele Erweiterungen + Dienstleister kann gewechselt werden - Support nur über Foren - Projekte können eingestellt werden oder die Richtung ändern - Oft schwer einschätzbare Entwicklungszyklen  Kommerziell: + ständiger Support - kostenpflichtig - abhängig von einer Herstellerfirma - Firmen- oder Solution Partner-Wechsel ist schwierig - Eigenentwicklung notwendig, wenn Erweiterung nicht vorhanden MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 49
  50. 50. Open Source CMS           Redaktionssysteme www.typo3.org, www.joomla.org Portale/Communities www.drupal.org Blogs www.wordpress.org Foren www.phpbb.com Wikis www.mediawiki.org Shops www.oxid-esales.com, www.magentocommerce.com Newsletter www.openemm.org eLearning www.moodle.org Bannermanagement www.openx.com Dateiverwaltung www.owncloud.org MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 50
  51. 51. Client-Server Architektur www.mvhs.de MVHS :: Webauftritt erfolgreich :: Thomas Kraehe index.html 51
  52. 52. CMS-Architektur Server Nutzer Anfrage .index.php?ItemId=2 Webserver DBMS Browser CMS Antwort HTML PHP DBMS = Datenbank Management System PHP = Serverseitige Programmiersprache MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 52
  53. 53. CMS - Frontend       Der sichtbare Bereich des CMS. Das Frontend ist in einem CMS nur eine Datei (z.B. index.php). Die Inhalte werden aus der Datenbank geholt. Die einzelnen Inhalte lassen sich über eine ID identifizieren. Viele Content Management Systeme setzen Inhalte gleich ID, durchaus aber nicht alle. Frontend-Editing bedeutet, dass registrierte Nutzer direkt im Frontend Inhalte bearbeiten können. MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 53
  54. 54. CMS - Frontend MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 54
  55. 55. CMS - Backend    Enthält die Administration und alle möglichen Konfigurationseinstellungen Ist der Hauptort für die Inhaltspflege Hier werden Seiten angelegt oder bearbeitet, Inhalte hochgeladen, Nutzer verwaltet und Rechte vergeben MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 55
  56. 56. CMS - Backend MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 56
  57. 57. CMS - Templates      Ein CMS trennt den Inhalt vom Layout Der Inhalt liegt in der Datenbank Das Layout wird in einer oder mehreren TemplateDateien definiert Template-System: an die Stelle der Inhalte trägt der Webentwickler so genannte Platzhalter ein In WordPress z.B. <h1><?php bloginfo(`name`); ?></h1> MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 57
  58. 58. CMS - Online-Editor     Einfache Bearbeitung von Inhalten Grafische Oberfläche: WYSIWYG-Editor What you see is what you get (auch Rich Text Editoren genannt) Meist an eine Textverarbeitung angelehnte Oberfläche Schaltflächen erlauben die Formatierung MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 58
  59. 59. CMS - Online-Editor MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 59
  60. 60. CMS - Nutzerverwaltung      Die Nutzerverwaltung findet im Backend statt Nutzer können unterschiedliche Rechte haben Die Rechteverwaltung läuft je nach CMS sehr unterschiedlich ab Oftmals ist die Nutzerverwaltung auch die Basis für einen geschützten Kundenbereich -> ein CMS sollte die Möglichkeit geben, dass sich Nutzer selbst registrieren. Rollen sind z.B.: Gast, Autor, Redakteur, Administrator MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 60
  61. 61. Was spricht für ein CMS?  Redakteure  Zahl der Redakteure  Erfahrungsstand der Redakteure  Inhalte      Änderungshäufigkeit Änderungsgeschwindigkeit Viele Inhalte Häufige Layout Änderungen Funktionalität     Ausbau in Community-Richtung Ausbau mit Newsletter etc. Ausbau mit Shop Ausbau mit Interaktion MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 61
  62. 62. Was spricht gegen ein CMS?     Nur wenige Kriterien für ein CMS sind erfüllt Hohe bis höchste Performance-Anforderungen Keine Datenbank verfügbar bzw. restriktive Server-Umgebung Extrem hohe Layoutanforderungen bzw. Einsatz von interaktiven Technologien (Flash, JavaScript) MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 62
  63. 63. CMS - Technologie Alle hier vorgestellten Systeme basieren technisch auf Open Source Software und sind kostenlos  Voraussetzungen für den Betrieb:   Programmiersprache: PHP  Datenbank: MySQL  (Betriebssystem / Webserver: Linux / Apache - laufen auf den Servern der meisten Provider) MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 63
  64. 64. Systeme – Weitere Kriterien  Erweiterbarkeit, Plugins für  Bildergalerie / Slideshow  Social Media Integration (Like Button)  Suchmaschinenoptimierung Mehrsprachigkeit  Bedienbarkeit  Multisite-Funktionalität (Mehrere Websites verwalten)  etc.  MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 64
  65. 65. Inhalt 1. Internet & WWW 2. Webseiten 3. Software 4. Client – Server Architektur 5. Webhosting 6. Content Management Systeme 7. Baukasten & Soziale Medien 8. Kosten und Möglichkeiten MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 65
  66. 66. Website Baukasten  Einige Provider bieten Webhosting Pakete mit vorinstallierter Software (CMS) an (SAAS aus der Cloud)  1&1 Do-It-Yourself  Strato Homepage Baukasten  Jimdo  Edicy  Webs  Wordpress.com  Diese Pakete sind relativ günstig und können bis zu einem gewissen Grad ohne Programmierkenntnisse individuell angepasst werden. MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 66
  67. 67. Soziale Medien        Soziale Netzwerke statt oder ergänzend zur eigenen Website nutzen Facebook Fanpage Google+ Unternehmensseite Hinterlegen von Informationen (Bilder, Texte, Videos) möglich Leichtes Vernetzen und Verbreiten von Informationen Ist schnell eingerichtet Achtung! Direktes Feedback möglich!!! MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 67
  68. 68. Soziale Medien MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 68
  69. 69. Soziale Medien MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 69
  70. 70. Inhalt 1. Internet & WWW 2. Webseiten 3. Software 4. Client – Server Architektur 5. Webhosting 6. Content Management Systeme 7. Baukasten & Soziale Medien 8. Kosten und Möglichkeiten MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 70
  71. 71. Kosten- und Möglichkeiten 1. Kostenlos und wenig individuell: Cloud Dienste, z.B. ein eigener Blog bei  http://wordpress.com/  http://www.tumblr.com/ 2. Günstig und ein bisschen individuell:  Homepage Baukasten 3. Relativ günstig und individuell:  Webhosting Paket selbst gestalten  Freiberuflicher Webdesigner / -entwickler 4. Relativ hohe Kosten aber sehr professionell und individuell  Web Agentur MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 71
  72. 72. Kosten- und Möglichkeiten  Einmalige Kosten einer Website: ○ Erstellung von Konzept, Layout/Design ○ Einrichtung, Installation, Programmierung ○ Pflege der Inhalte: Texte, Bilder, Videos, etc.  Regelmäßige Kosten einer Website: ○ Webhosting: monatlich ○ Installation von Updates: je nach Bedarf ○ Aktualisierung der Inhalte: je nach Bedarf MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 72
  73. 73. Kosten- und Möglichkeiten Zu guter Letzt noch ein paar Zahlen:  Einfache Website ○ von Freiberufler: ca. 1000 – 2000€ ○ Von Agentur: ca. 3000€ - 5000€  Einfacher Online Shop ○ Von Freiberufler: ca. 2000€ - 5000€ ○ Von Agentur: ca. 10.000€ - 30.000€  Sehr große, komplexe Website/Online Shop mit vielen Seiten, Layouts, Inhalten, evtl. mehrsprachig, etc. oder App ○ Agentur: 50.000€ - ~ MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 73
  74. 74. Der Weg Zielsetzung Planung Konzeption Design MVHS :: Webauftritt erfolgreich :: Thomas Kraehe Umsetzung 74
  75. 75. Links & Literatur  Bücher:  HTML: Spielend gelingt die Website (Hauser & Wenz)  HTML5 Handbuch (Gull & Münz)  Das Website Handbuch (Hauser & Wenz)  Videos:  Die Website – Design & Programmierung lernen (Hauser & Wenz)  HTML5 Crashkurs (Wenz)  Links:  http://de.selfhtml.org/  http://www.css4you.de/  http://www.w3schools.com/ MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 75
  76. 76. Fragen? Meine Website: http://www.crow-design.de Mein Blog: http://www.mountcrow.de Meine Arbeitgeber: http://www.arrabiata.de http://www.mvhs.de Auf Twitter: @crowdesign Folien: http://goo.gl/lBMNjS MVHS :: Webauftritt erfolgreich :: Thomas Kraehe 76

×