die "rueckseite" des internets

Workshop:Die "Rückseite" des Internet kennenlernen sk stiftung jugend und medien, 10.10.2009

10.10.2009 2Alexander Stelter - snoopmedia GmbH

Workshop: Die „Rückseite“ des Internets kennenlernen

Wer ich bin ... Alexander Stelter Jahrgang 1982 Fachinformatiker / Anwendungsentwicklung Senior Software Developer Web-Entwicklung seit 7 Jahren Passionierter PHP Programmierer Aktiver Blogger / Twitterer Überzeugter Open Source User

Kurzvorstellung Referent.



Geschäftsform: Inhabergeführte GmbHGeschäftsführer: Gerald Neu, Holger ZimmermannGründungsdatum: 03. April 2000Mitarbeiter: 18 feste Mitarbeiter

snoopmedia realisiert seit mehr als neun Jahren konzeptionell kreativeund aufmerksamkeitsstarke Projekte für Entwicklung, Umsetzung und Betrieb vonerfolgreichen Unternehmensstrategien im Internet.

Zur Zeit suchen wir wieder Auszubildende:

Kaufmann/-frau für Bürokommunikation Fachinformatiker/-in Fachr. Anwendungsentwicklung Mediengestalter/-in Digital und Print

Kurzvorstellung snoopmedia.



Kurzvorstellung snoopmedia – Referenzen.



Wer seid Ihr??!

.. eine kurze Frage.



A. Woraus besteht eine Webseite? Quelltext Bilder Plugins

B. Wie kommt Interaktion zustande? Formulare PHP: Hypertext Preprocessor Datenbanken Formular -> PHP -> Datenbank Asynchronous JavaScript and XML (AJAX)

C. Wie kann ich eine Webseite bauen? Demonstration von FireBug Web-Baukasten Jimdo.com

Fahrplan.

A. Woraus besteht eine Webseite?



Komponenten

A. Woraus besteht eine Webseite?// Komponenten



Komponenten Quelltext





HyperText Markup Language (HTML)




Was ist HTML? „Auszeichnungssprache“

Wird nicht „programmiert“

Definiert durch das World Wide Web Consortium (W3C)

Gebräuchliche Versionen: HTML 4.01 / XHTML 1.x

A. Woraus besteht eine Webseite?// Komponenten / Quelltext / HTML




HyperText Markup Language (HTML) Cascading Style Sheets (CSS)




Was ist CSS? „deklarative Stylesheet Sprache“

Findet bei HTML und XML Verwendung

Versionen: CSS1, CSS2

Verwendung direkt im HTML oder separater Datei

Kann medienspezifisch eingesetzt werden (print, screen)

A. Woraus besteht eine Webseite?// Komponenten / Quelltext / CSS




HyperText Markup Language (HTML) Cascading Style Sheets (CSS) JavaScript (JS)




Was ist JavaScript? Scriptsprache

Arbeitet auf dem Document Object Model (DOM)

Ermöglicht Interaktivität zwischen Webseite und Benutzer

Ist im Browser deaktivierbar

Ist bei falscher Anwendung sicherheitskritisch

A. Woraus besteht eine Webseite?// Komponenten / Quelltext / JavaScript





Grafiken




A. Woraus besteht eine Webseite?// Komponenten / Grafiken




Buttons




Buttons

Icons




Buttons

Icons

Illustrationen




Buttons

Icons

Fotos

Illustrationen




Buttons

Icons

Fotos

Illustrationen

Hintergründe





Grafiken

Plugins Flash




Was ist Flash? Browser Plugin

Erstellung / Einbettung von Animationen / Filmen

Senden von Daten an den Server ohne Seitenreload

Kann (eingeschränkt) auf Daten auf dem Computer zugreifen

Programmierung von Spielen, Datei-Uploads, etc.

Sehr weite Verbreitung

A. Woraus besteht eine Webseite?// Komponenten / Plugins / Flash



A. Woraus besteht eine Webseite?// Komponenten / Plugins / Flash





Grafiken

Plugins Flash Weitere Plugins




Weitere Plugins Java Applets

Einbetten von Java-Programme in den Browser Plattform unabhängig (Java Virtual Maschine vorausgesetzt)

Silverlight Einbettung von 3D-Effekten, Drag and Drop, Videos etc. Nur für Windows/Apple (Linux-Adaption: Moonlight)

A. Woraus besteht eine Webseite?// Komponenten / Plugins / Weitere Plugins

B. Wie kommt Interaktion zustande?



Kommunikation

B. Wie kommt Interaktion zustande?// Kommunikation



Kommunikation Browser -> Server -> Browser





Was ist ein Server?




Was ist ein Server? Leistungsstarker Rechner

Spezielle Hardware

Öffentlich im Web zugänglich

Software und Betriebssystem sind speziell abgestimmt

Besonders geschützt durch eine Firewall

A. Woraus besteht eine Webseite?// Kommunikation / Browser -> Server -> Browser / Was ist ein Server?




Was ist ein Server? Ablauf eines Webseitenaufrufs




B. Wie kommt Interaktion zustande?// Kommunikation / Browser -> Server -> Browser / Ablauf eines Webseiten Aufrufs

Browser

Webserver

Anwendung

Internet

Anfrage Antwort




Browser

Webserver

Anwendung

Internet

Anfrage Antwort

z.B. Webblog




Browser

Webserver

Anwendung

Internet

Anfrage Antwort




Browser

Webserver

PHPAnwendung

Internet

Anfrage Antwort




Browser

Webserver

DB

PHPAnwendung

Internet

Anfrage Antwort




Browser

Webserver

DB

Fest-platte

PHPAnwendung

Internet

Anfrage Antwort




Browser

Webserver

DB

Fest-platte

PHPAnwendung

Internet

Anfrage Antwort

Fertiges HTML




Browser

Webserver

DB

Fest-platte

PHPAnwendung

Internet

Anfrage Antwort





Speichern von Daten






Speichern von Daten Formulare




Was ist ein Formular? Ein Set an HTML Elementen

Definition von verschiedenen Feldern / Feldtypen / Buttons

Verfügt über zwei Übertragunsmodi (GET / POST)

Grundlage für den Großteil der User-Interaktion

B. Wie kommt Interaktion zustande?// Kommunikation / Speichern von Daten / Formulare





Speichern von Daten Formulare PHP: Hypertext Preprocessor




Was ist PHP? Scriptsprache (wird interpretiert, nicht compiliert)

Syntaktisch eine Mischung aus Perl, Java, C++

Open Source

Kernfeatures Datenbankanbindung Datei-Handling Session-Handling (Logins etc.)

B. Wie kommt Interaktion zustande?// Kommunikation / Speichern von Daten / PHP: Hypertext Preprocessor



B. Wie kommt Interaktion zustande?// Kommunikation / Speichern von Daten / Was ist PHP?




Browser

Webserver

DB

Fest-platte

PHPAnwendung

Internet

Anfrage Antwort




DB

Fest-platte

PHPAnwendung

Anfrage Antwort




DB

Fest-platte

PHPAnwendung

Anfrage Antwort

PHP Interpreter




DB

Fest-platte

PHPAnwendung

Anfrage Antwort

PHP Interpreter

Syntaxprüfung




DB

Fest-platte

PHPAnwendung

Anfrage Antwort

PHP Interpreter

Syntaxprüfung

Ausführen




DB

Fest-platte

PHPAnwendung

Anfrage Antwort

PHP Interpreter

Syntaxprüfung

Ausführen

HTML / Ausgabeerzeugen





Speichern von Daten Formulare PHP: Hypertext Preprocessor Datenbanken




Was ist eine Datenbank? Programm zur strukturierten Speicherung von Daten

Aufsplittung der Daten in Tabellen (Relationen) „Benutzer“ sind eine Relation „a.stelter“ ist ein Datensatz der Relation „Benutzer“

Lesen und Schreiben via Simple Query Language (SQL)z.B.:

SELECT * FROM users;

B. Wie kommt Interaktion zustande?// Kommunikation / Speichern von Daten / Datenbanken z.B.:



B. Wie kommt Interaktion zustande?// Kommunikation / Speichern von Daten / Datenbanken





Speichern von Daten Formulare PHP: Hypertext Preprocessor Datenbanken Formular -> PHP -> Datenbank




B. Wie kommt Interaktion zustande?// Kommunikation / Speichern von Daten / Formular -> PHP -> Datenbank





Speichern von Daten Formulare PHP: Hypertext Preprocessor Datenbanken Formular -> PHP -> Datenbank Asynchronous JavaScript and XML (AJAX)




Was ist AJAX? JavaScript basierte Technik

Asynchrone Datenübertragung

Speichern / Bearbeiten von Daten ohne Reload der Seite

Dynamisches Verändern der Webseite aufgrund von ServerKommandos

Beispiele Facebook Status Updates Twitter Suche

B. Wie kommt Interaktion zustande?// Kommunikation / Speichern von Daten / AJAX

C. Wie kann ich eine Webseite bauen?



Demo Time!! Was kann ich mit FireBug alles machen?

Web-Baukasten Jimdo.com Einführung Ausprobieren!!

C. Wie kann ich eine Webseite bauen?// Demo Time!!



Wichtige Links http://de.selfhtml.org

http://www.jimdo.com

http://de.php.net

C. Wie kann ich eine Webseite bauen?// Demo Time!!

http://de.selfhtml.org/

http://www.jimdo.com/



Vielen Dank für Euer Interesse.

Ihr findet uns online untersnoopmedia.com und bei Twitter

twitter.com/snoopmedia!

http://www.snoopmedia.com/



http://twitter.com/snoopmedia




die "rueckseite" des internets

Technology