MVHS: So realisieren Sie Ihren Webauftritt erfolgreich

Thomas Kraehe
Münchner Volkshochschule

Das Web

Server

CMS

Suchmaschinen
Browser

Soziale Netzwerke
Baukasten

URL

HTML
Hosting
Domain
MVHS :: Webauftritt erfolgreich :: Thomas Kraehe

2

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?



3

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


4

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


5

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)


6

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


7

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


8

Inhalt
1. Internet & WWW
2. Webseiten
3. Software
5. Webhosting
7. Baukasten


9

Webseiten


10

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


11

Webseiten


12

Webseiten – HTML & CSS


Trennung von Struktur und Darstellung:
 Struktur & Inhalt: HTML
 Darstellung/Formatierung: CSS


13

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>

14

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; }


15

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>

16

Webseiten - Verlinkung
Kunde A
Referenzen
Kunde B
Startseite

Kontakt
Leistungen


17

Webseiten – Links
Verknüpfung der Dokumente durch
Hyperlinks
 href = Hypertext Reference


<a href=“projekte.html”>Zu meinen Projekten</a>


18

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



19

Webseiten


Eine einfache Website


20

Inhalt
1. Internet & WWW
2. Webseiten
3. Software
5. Webhosting


21

Software - Texteditor
HTML- und CSS-Dateien lassen sich mit
einem einfachen Texteditor bearbeiten.
 Hilfreich sind Editoren mit CodeHervorhebung (Code Highlighting)


 Windows: Notepad++
 Mac: TextWrangler


22

Software - Texteditor


23

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

24

Software - WYSIWYG


25

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)


26

Software – Bildbearbeitung


27

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)


28

Software - FTP


29

Inhalt
1. Internet & WWW
2. Webseiten
3. Software
5. Webhosting


30

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


31

Server


32

Rechenzentrum


33

Client – Server Architektur


34

Client-Server Architektur

www.mvhs.de


index.html

35

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)


36

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


37

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


Subdomain
mail

38

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

39

Inhalt
1. Internet & WWW
2. Webseiten
3. Software
5. Webhosting


40

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


41

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)


42

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

43

Shared Hosting

Physischer Server
Virtueller
Server
Webspace

Webspace

Virtueller
Server
Webspace


Webspace

44



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


45

Domain
Webhosting
Baukasten
Virtueller Server
Physischer Server
Cloud Infrastruktur

46

Inhalt
1. Internet & WWW
2. Webseiten
3. Software
5. Webhosting


47

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


48

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


49

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


50

Client-Server Architektur

www.mvhs.de


index.html

51

CMS-Architektur
Server

Nutzer
Anfrage

.index.php?ItemId=2

Webserver

DBMS

Browser
CMS

Antwort
HTML

PHP

DBMS = Datenbank Management System
PHP = Serverseitige Programmiersprache

52

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.


53

CMS - Frontend


54

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


55

CMS - Backend


56

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>


57

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


58

CMS - Online-Editor


59

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


60

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


61

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)


62

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)


63

Systeme – Weitere Kriterien


Erweiterbarkeit, Plugins für
 Bildergalerie / Slideshow
 Social Media Integration (Like Button)
 Suchmaschinenoptimierung

Mehrsprachigkeit
 Bedienbarkeit
 Multisite-Funktionalität
(Mehrere Websites verwalten)
 etc.



64

Inhalt
1. Internet & WWW
2. Webseiten
3. Software
5. Webhosting


65

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.

66

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


67

Soziale Medien


68

Soziale Medien


69

Inhalt
1. Internet & WWW
2. Webseiten
3. Software
5. Webhosting


70

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


71

 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


72

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€ - ~

73

Der Weg

Zielsetzung

Planung

Konzeption

Design


Umsetzung

74

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/


75

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


76

MVHS: So realisieren Sie Ihren Webauftritt erfolgreich

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a MVHS: So realisieren Sie Ihren Webauftritt erfolgreich

Semelhante a MVHS: So realisieren Sie Ihren Webauftritt erfolgreich (20)

MVHS: So realisieren Sie Ihren Webauftritt erfolgreich