Vortrag für Jugendliche in der SK Stiftung Köln/Bonn

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

2. Workshop: Die „Rückseite“ des Internets kennenlernen
Kurzvorstellung Referent.
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
Alexander Stelter - snoopmedia GmbH 10.10.2009 2

3. Workshop: Die „Rückseite“ des Internets kennenlernen
Kurzvorstellung snoopmedia.
Geschäftsform: Inhabergeführte GmbH
Geschäftsführer: Gerald Neu, Holger Zimmermann
Gründungsdatum: 03. April 2000
Mitarbeiter: 18 feste Mitarbeiter
snoopmedia realisiert seit mehr als neun Jahren konzeptionell kreative
und aufmerksamkeitsstarke Projekte für Entwicklung, Umsetzung und Betrieb von
erfolgreichen Unternehmensstrategien im Internet.
Zur Zeit suchen wir wieder Auszubildende:
 Kaufmann/-frau für Bürokommunikation
 Fachinformatiker/-in Fachr. Anwendungsentwicklung
 Mediengestalter/-in Digital und Print
Alexander Stelter - snoopmedia GmbH 10.10.2009 3

4. Workshop: Die „Rückseite“ des Internets kennenlernen
Kurzvorstellung snoopmedia – Referenzen.
Alexander Stelter - snoopmedia GmbH 10.10.2009 4

5. Workshop: Die „Rückseite“ des Internets kennenlernen
.. eine kurze Frage.
Wer seid Ihr??!
Alexander Stelter - snoopmedia GmbH 10.10.2009 5

6. Workshop: Die „Rückseite“ des Internets kennenlernen
Fahrplan.
 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
Alexander Stelter - snoopmedia GmbH 10.10.2009 6

7. A. Woraus besteht eine
Webseite?

8. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten
Komponenten
Alexander Stelter - snoopmedia GmbH 10.10.2009 8

9. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten
Komponenten
 Quelltext
Alexander Stelter - snoopmedia GmbH 10.10.2009 9

10. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten
Komponenten
 Quelltext
 HyperText Markup Language (HTML)
Alexander Stelter - snoopmedia GmbH 10.10.2009 10

11. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten / Quelltext / 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
Alexander Stelter - snoopmedia GmbH 10.10.2009 11

12. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten / Quelltext / HTML
Alexander Stelter - snoopmedia GmbH 10.10.2009 12

13. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten / Quelltext / HTML
Alexander Stelter - snoopmedia GmbH 10.10.2009 13

14. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten
Komponenten
 Quelltext
 HyperText Markup Language (HTML)
 Cascading Style Sheets (CSS)
Alexander Stelter - snoopmedia GmbH 10.10.2009 14

15. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten / Quelltext / 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)
Alexander Stelter - snoopmedia GmbH 10.10.2009 15

16. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten / Quelltext / CSS
Alexander Stelter - snoopmedia GmbH 10.10.2009 16

17. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten / Quelltext / CSS
Alexander Stelter - snoopmedia GmbH 10.10.2009 17

18. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten
Komponenten
 Quelltext
 HyperText Markup Language (HTML)
 Cascading Style Sheets (CSS)
 JavaScript (JS)
Alexander Stelter - snoopmedia GmbH 10.10.2009 18

19. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten / Quelltext / JavaScript
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
Alexander Stelter - snoopmedia GmbH 10.10.2009 19

20. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten / Quelltext / JavaScript
Alexander Stelter - snoopmedia GmbH 10.10.2009 20

21. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten / Quelltext / JavaScript
Alexander Stelter - snoopmedia GmbH 10.10.2009 21

22. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten / Quelltext / JavaScript
Alexander Stelter - snoopmedia GmbH 10.10.2009 22

23. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten
Komponenten
 Quelltext
 HyperText Markup Language (HTML)
 Cascading Style Sheets (CSS)
 JavaScript (JS)
 Grafiken
Alexander Stelter - snoopmedia GmbH 10.10.2009 23

24. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten / Grafiken
Alexander Stelter - snoopmedia GmbH 10.10.2009 24

25. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten / Grafiken
Buttons
Alexander Stelter - snoopmedia GmbH 10.10.2009 25

26. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite? Icons
// Komponenten / Grafiken
Buttons
Alexander Stelter - snoopmedia GmbH 10.10.2009 26

27. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite? Icons
// Komponenten / Grafiken
Buttons
Illustrationen
Alexander Stelter - snoopmedia GmbH 10.10.2009 27

28. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite? Icons
// Komponenten / Grafiken
Buttons
Illustrationen
Fotos
Alexander Stelter - snoopmedia GmbH 10.10.2009 28

29. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite? Icons
// Komponenten / Grafiken
Buttons
Illustrationen
Fotos
Hintergründe
Alexander Stelter - snoopmedia GmbH 10.10.2009 29

30. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten
Komponenten
 Quelltext
 HyperText Markup Language (HTML)
 Cascading Style Sheets (CSS)
 JavaScript (JS)
 Grafiken
 Plugins
 Flash
Alexander Stelter - snoopmedia GmbH 10.10.2009 30

31. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten / 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
Alexander Stelter - snoopmedia GmbH 10.10.2009 31

32. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten / Plugins / Flash
Alexander Stelter - snoopmedia GmbH 10.10.2009 32

33. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten
Komponenten
 Quelltext
 HyperText Markup Language (HTML)
 Cascading Style Sheets (CSS)
 JavaScript (JS)
 Grafiken
 Plugins
 Flash
 Weitere Plugins
Alexander Stelter - snoopmedia GmbH 10.10.2009 33

34. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// Komponenten / Plugins / 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)
Alexander Stelter - snoopmedia GmbH 10.10.2009 34

35. B. Wie kommt Interaktion
zustande?

36. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation
Kommunikation
Alexander Stelter - snoopmedia GmbH 10.10.2009 36

37. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation
Kommunikation
 Browser -> Server -> Browser
Alexander Stelter - snoopmedia GmbH 10.10.2009 37

38. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation
Kommunikation
 Browser -> Server -> Browser
 Was ist ein Server?
Alexander Stelter - snoopmedia GmbH 10.10.2009 38

39. Workshop: Die „Rückseite“ des Internets kennenlernen
A. Woraus besteht eine Webseite?
// 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
Alexander Stelter - snoopmedia GmbH 10.10.2009 39

40. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation
Kommunikation
 Browser -> Server -> Browser
 Was ist ein Server?
 Ablauf eines Webseitenaufrufs
Alexander Stelter - snoopmedia GmbH 10.10.2009 40

41. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Browser -> Server -> Browser / Ablauf eines Webseiten Aufrufs
Browser
A
n
Webserver
w
e
n
d
u
n
g
Internet
Anfrage Antwort
Alexander Stelter - snoopmedia GmbH 10.10.2009 41

42. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Browser -> Server -> Browser / Ablauf eines Webseiten Aufrufs
z.B. Webblog
Browser
A
n
Webserver
w
e
n
d
u
n
g
Internet
Anfrage Antwort
Alexander Stelter - snoopmedia GmbH 10.10.2009 42

43. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Browser -> Server -> Browser / Ablauf eines Webseiten Aufrufs
Browser
A
n
Webserver
w
e
n
d
u
n
g
Internet
Anfrage Antwort
Alexander Stelter - snoopmedia GmbH 10.10.2009 43

44. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Browser -> Server -> Browser / Ablauf eines Webseiten Aufrufs
Browser
A
n
Webserver
w
e
n
d
u
n
g
Internet
Anfrage Antwort
Alexander Stelter - snoopmedia GmbH 10.10.2009 44

45. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Browser -> Server -> Browser / Ablauf eines Webseiten Aufrufs
Browser
A
n
Webserver
w
e
n
d
u
n
g
Internet
Anfrage Antwort
Alexander Stelter - snoopmedia GmbH 10.10.2009 45

46. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Browser -> Server -> Browser / Ablauf eines Webseiten Aufrufs
Browser
PHP
A
n
Webserver
w
e
n
d
u
n
g
Internet
Anfrage Antwort
Alexander Stelter - snoopmedia GmbH 10.10.2009 46

47. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Browser -> Server -> Browser / Ablauf eines Webseiten Aufrufs
Browser
PHP
A
n
Webserver
w
e
n
d DB
u
n
g
Internet
Anfrage Antwort
Alexander Stelter - snoopmedia GmbH 10.10.2009 47

48. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Browser -> Server -> Browser / Ablauf eines Webseiten Aufrufs
Browser
PHP
A
n
Webserver
w
e
n
d DB
u
n
g
Internet Fest-
platte
Anfrage Antwort
Alexander Stelter - snoopmedia GmbH 10.10.2009 48

49. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Browser -> Server -> Browser / Ablauf eines Webseiten Aufrufs
Fertiges HTML
Browser
PHP
A
n
Webserver
w
e
n
d DB
u
n
g
Internet Fest-
platte
Anfrage Antwort
Alexander Stelter - snoopmedia GmbH 10.10.2009 49

50. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Browser -> Server -> Browser / Ablauf eines Webseiten Aufrufs
Browser
PHP
A
n
Webserver
w
e
n
d DB
u
n
g
Internet Fest-
platte
Anfrage Antwort
Alexander Stelter - snoopmedia GmbH 10.10.2009 50

51. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Browser -> Server -> Browser / Ablauf eines Webseiten Aufrufs
Browser
PHP
A
n
Webserver
w
e
n
d DB
u
n
g
Internet Fest-
platte
Anfrage Antwort
Alexander Stelter - snoopmedia GmbH 10.10.2009 51

52. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation
Kommunikation
 Browser -> Server -> Browser
 Was ist ein Server?
 Ablauf eines Webseitenaufrufs
 Speichern von Daten
Alexander Stelter - snoopmedia GmbH 10.10.2009 52

53. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation
Kommunikation
 Browser -> Server -> Browser
 Was ist ein Server?
 Ablauf eines Webseitenaufrufs
 Speichern von Daten
 Formulare
Alexander Stelter - snoopmedia GmbH 10.10.2009 53

54. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / 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
Alexander Stelter - snoopmedia GmbH 10.10.2009 54

55. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / Formulare
Alexander Stelter - snoopmedia GmbH 10.10.2009 55

56. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / Formulare
Alexander Stelter - snoopmedia GmbH 10.10.2009 56

57. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation
Kommunikation
 Browser -> Server -> Browser
 Was ist ein Server?
 Ablauf eines Webseitenaufrufs
 Speichern von Daten
 Formulare
 PHP: Hypertext Preprocessor
Alexander Stelter - snoopmedia GmbH 10.10.2009 57

58. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / 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.)
Alexander Stelter - snoopmedia GmbH 10.10.2009 58

59. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / Was ist PHP?
Alexander Stelter - snoopmedia GmbH 10.10.2009 59

60. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / PHP: Hypertext Preprocessor
Alexander Stelter - snoopmedia GmbH 10.10.2009 60

61. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / PHP: Hypertext Preprocessor
Browser
PHP
A
n
Webserver
w
e
n
d DB
u
n
g
Internet Fest-
platte
Anfrage Antwort
Alexander Stelter - snoopmedia GmbH 10.10.2009 61

62. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / PHP: Hypertext Preprocessor
PHP
A
n
w
e
n
d DB
u
n
g
Fest-
platte
Anfrage Antwort
Alexander Stelter - snoopmedia GmbH 10.10.2009 62

63. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / PHP: Hypertext Preprocessor
PHP Interpreter
PHP
A
n
w
e
n
d DB
u
n
g
Fest-
platte
Anfrage Antwort
Alexander Stelter - snoopmedia GmbH 10.10.2009 63

64. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / PHP: Hypertext Preprocessor
PHP Interpreter
PHP Syntaxprüfung
A
n
w
e
n
d DB
u
n
g
Fest-
platte
Anfrage Antwort
Alexander Stelter - snoopmedia GmbH 10.10.2009 64

65. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / PHP: Hypertext Preprocessor
PHP Interpreter
PHP Syntaxprüfung
A
n
w
e Ausführen
n
d DB
u
n
g
Fest-
platte
Anfrage Antwort
Alexander Stelter - snoopmedia GmbH 10.10.2009 65

66. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / PHP: Hypertext Preprocessor
PHP Interpreter
PHP Syntaxprüfung
A
n
w
e Ausführen
n
d DB
u
n
g
Fest-
platte
Anfrage Antwort
Alexander Stelter - snoopmedia GmbH 10.10.2009 66

67. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / PHP: Hypertext Preprocessor
PHP Interpreter
PHP Syntaxprüfung
A
n
w
e Ausführen
n
d DB
u
n
g
Fest-
platte
Anfrage Antwort
Alexander Stelter - snoopmedia GmbH 10.10.2009 67

68. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / PHP: Hypertext Preprocessor
PHP Interpreter
PHP Syntaxprüfung
A
n
w
e Ausführen
n
d DB
u
n
HTML / Ausgabe
g
erzeugen
Fest-
platte
Anfrage Antwort
Alexander Stelter - snoopmedia GmbH 10.10.2009 68

69. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation
Kommunikation
 Browser -> Server -> Browser
 Was ist ein Server?
 Ablauf eines Webseitenaufrufs
 Speichern von Daten
 Formulare
 PHP: Hypertext Preprocessor
 Datenbanken
Alexander Stelter - snoopmedia GmbH 10.10.2009 69

70. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / Datenbanken z.B.:
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;
Alexander Stelter - snoopmedia GmbH 10.10.2009 70

71. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / Datenbanken
Alexander Stelter - snoopmedia GmbH 10.10.2009 71

72. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation
Kommunikation
 Browser -> Server -> Browser
 Was ist ein Server?
 Ablauf eines Webseitenaufrufs
 Speichern von Daten
 Formulare
 PHP: Hypertext Preprocessor
 Datenbanken
 Formular -> PHP -> Datenbank
Alexander Stelter - snoopmedia GmbH 10.10.2009 72

73. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / Formular -> PHP -> Datenbank
Alexander Stelter - snoopmedia GmbH 10.10.2009 73

74. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / Formular -> PHP -> Datenbank
Alexander Stelter - snoopmedia GmbH 10.10.2009 74

75. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / Formular -> PHP -> Datenbank
Alexander Stelter - snoopmedia GmbH 10.10.2009 75

76. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / Formular -> PHP -> Datenbank
Alexander Stelter - snoopmedia GmbH 10.10.2009 76

77. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation
Kommunikation
 Browser -> Server -> Browser
 Was ist ein Server?
 Ablauf eines Webseitenaufrufs
 Speichern von Daten
 Formulare
 PHP: Hypertext Preprocessor
 Datenbanken
 Formular -> PHP -> Datenbank
 Asynchronous JavaScript and XML (AJAX)
Alexander Stelter - snoopmedia GmbH 10.10.2009 77

78. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / 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 Server
Kommandos
 Beispiele
 Facebook Status Updates
 Twitter Suche
Alexander Stelter - snoopmedia GmbH 10.10.2009 78

79. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / AJAX
Alexander Stelter - snoopmedia GmbH 10.10.2009 79

80. Workshop: Die „Rückseite“ des Internets kennenlernen
B. Wie kommt Interaktion zustande?
// Kommunikation / Speichern von Daten / AJAX
Alexander Stelter - snoopmedia GmbH 10.10.2009 80

81. C. Wie kann ich eine
Webseite bauen?

82. Workshop: Die „Rückseite“ des Internets kennenlernen
C. Wie kann ich eine Webseite bauen?
// Demo Time!!
Demo Time!!
 Was kann ich mit FireBug alles machen?
 Web-Baukasten Jimdo.com
 Einführung
 Ausprobieren!!
Alexander Stelter - snoopmedia GmbH 10.10.2009 82

83. Workshop: Die „Rückseite“ des Internets kennenlernen
C. Wie kann ich eine Webseite bauen?
// Demo Time!!
Wichtige Links
 http://de.selfhtml.org
 http://www.jimdo.com
 http://de.php.net
Alexander Stelter - snoopmedia GmbH 10.10.2009 83

84. Workshop: Die „Rückseite“ des Internets kennenlernen
Vielen Dank für Euer Interesse.
Ihr findet uns online unter
snoopmedia.com und bei Twitter
twitter.com/snoopmedia!
Alexander Stelter - snoopmedia GmbH 10.10.2009 84