E-Commerce I. Web Programmierung. Übung SS Dipl.-Kfm. Christopher Freitag. Lehrstuhl für ABWL und Wirtschaftsinformatik

Transkript

1 Übung SS 2011 E-Commerce I Web Programmierung Dipl.-Kfm. Christopher Freitag Lehrstuhl für ABWL und Wirtschaftsinformatik Katholische Universität Eichstätt-Ingolstadt

2 1. Einführung in die Web Programmierung 2. Einführung in HTML 3. Einführung in PHP Übersicht

3 Literatur 2 Soweit nicht anders angegeben, basiert das Skript im wesentlichen auf folgender Literatur: Gerti Kappel/Birgit Pröll/Siegfried Reich/Werner Retschitzegger (Hrsg.) (2004): Web engineering systematische Entwicklung von Web- Anwendungen, 1. Aufl., dpunkt.verlag, Heidelberg. Pomaska, G. (2005): Grundkurs Web-Programmierung Interaktion, Grafik und Dynamik - mit XHTML und CSS, XML, JavaScript, Applets, SVG, PHP, 1. Aufl., vieweg, Wiesbaden

4 1. Einführung in die Web Programmierung 2. Einführung in HTML 3. Einführung in PHP Übersicht

5 1. Einführung in die Web Programmierung Übersicht 1.1 Grundlagen 1.2 Web Engineering 1.3 Vorgehensmodelle 1.4 Kategorien von Web-Anwendungen 1.5 Technik 1.6 Usability von Webanwendungen 2. Einführung in HTML 3. Einführung in PHP

6 Einführung in die Web Programmierung Grundlagen 6 Definition: Eine Web-Anwendung ist ein Softwaresystem, das auf einem Web-Server ausgeführt wird web-spezifische Ressourcen wie Inhalte und Dienste bereitstellt, die über Benutzerschnittstellen verwendet werden auf den Spezifikationen des World Wide Web Consortiums (W3C) beruht Kappel et al. (2004), S. 1-5

7 Einführung in die Web Programmierung Grundlagen 7 Problemstellung: Kappel et al. (2004), S. 1-5 Die heutige Situation der Entwicklung von Web-Anwendungen erinnert an Praktiken, die in den 60er Jahren bei der Softwareentwicklung Anwendung fanden: Wird oftmals als ein einmaliges Ereignis angesehen Erfolgt vielfach in einer spontanen Art und Weise Basiert zumeist auf dem Wissen, den Erfahrungen und den Entwicklungspraktiken individueller Entwickler Beschränkt sich auf Wiederverwendung im Sinne des "Copy&Paste- Paradigmas" Ist gekennzeichnet durch unzureichende Dokumentation der Web- Anwendungen

8 Einführung in die Web Programmierung Grundlagen 8 Charakteristika von Web-Anwendungen: Web-Anwendungen weisen im Unterschied zu traditionellen, nicht Webbasierten Anwendungen eine Reihe von Charakteristika auf die entweder in herkömmlichen Anwendungen fehlen (z. B. nichtlineare Navigation) oder die in Web-Anwendungen besonders stark ausgeprägt sind (z. B. Häufigkeit von Änderungen) Beispiel: Dienstgüte Unbekannte Netzwerkeigenschaften Inhomogenität der technischen Infrastruktur Web-Server (wird zumeist selbst konfiguriert) vs. Webbrowser (kein Einfluss auf Einstellungen) Oftmals sind diese Charakteristika der Grund dafür, dass Konzepte, Methoden, Techniken und Werkzeuge des traditionellen Software Engineerings Kappel et al. (2004), S nur in angepasster Form zur Entwicklung von Web-Anwendungen eingesetzt werden können oder sich als gänzlich ungeeignet erweisen

9 1. Einführung in die Web Programmierung Übersicht 1.1 Grundlagen 1.2 Web Engineering 1.3 Vorgehensmodelle 1.4 Kategorien von Web-Anwendungen 1.5 Technik 1.6 Usability von Webanwendungen 2. Einführung in HTML 3. Einführung in PHP

10 Einführung in die Web Programmierung Web Engineering 10 Definition: Web Engineering ist die Anwendung systematischer und quantifizierbarer Ansätze (Konzepte, Methoden, Techniken, Werkzeuge), um Anforderungsbeschreibung, Entwurf, Implementierung, Test, Betrieb und Wartung qualitativ hochwertiger Web-Anwendungen kosteneffektiv durchführen zu können. Eigenschaften Kappel et al. (2004), S. 1-5 Klar definierte Ziele und Anforderungen Systematische Entwicklung einer Web-Anwendung in den Phasen der Softwareentwicklung Kontinuierliche Überwachung des gesamten Entwicklungsprozesses

11 Einführung in die Web Programmierung Web Engineering 11 Softwarequalität: Qualitätsanforderungen an Software können aus verschiedenen Perspektiven betrachtet werden. Die ISO 9126 definiert sechs Qualitätsmerkmale für SW-Produkte. Kappel et al. (2004), S. 2 Software-Qualität ist die Gesamtheit der Merkmale und Merkmalswerte eines Software-Produkts: Funktionalität (Korrektheit, Sicherheit,...) Zuverlässigkeit (Fehlertoleranz, Wiederherstellbarkeit,...) Benutzbarkeit (Bedienbarkeit, Erlernbarkeit,...) Effizienz (Wirtschaftlichkeit, Zeitverhalten,...) Wartungsfreundlichkeit (Analysierbarkeit, Änderbarkeit,...) Übertragbarkeit (Anpassbarkeit, Installierbarkeit,...)

12 1. Einführung in die Web Programmierung Übersicht 1.1 Grundlagen 1.2 Web Engineering 1.3 Vorgehensmodelle Anforderungsdefinition Entwurf Implementierung 1.4 Kategorien von Web-Anwendungen 1.5 Technik 1.6 Usability von Webanwendungen 2. Einführung in HTML 3. Einführung in PHP

13 Einführung in die Web Programmierung Vorgehensmodelle 13 Definition: In einem Vorgehensmodell wird festgelegt, welche Aktivitäten in welcher Reihenfolge von welchen Personen erledigt werden und welche Ergebnisse dabei entstehen und wie diese in der Qualitätssicherung überprüft werden. Eigenschaften: Festlegung der Reihenfolge der Arbeitsschritte Festlegung der Personen Definition der Teilprodukte Definition von Testfällen zur Qualitätssicherung Ziele: Entwicklung einer qualitativ hochwertigen Software Beherrschung der Kosten und der Entwicklungszeit Quelle: Balzert 2000, S. 54

14 Einführung in die Web Programmierung Vorgehensmodelle 14 Anforderungsdefinition Anwendungsszenarien Abnahmetest Validierung Grobentwurf Testfälle Systemtest Feinentwurf Testfälle Integrationstest Verifikation Testfälle Modulimplementation Modultest Validierung: Eignung des Produkts auf seinen Einsatzzweck Verifikation: Übereinstimmung des Produkts mit seiner Spezifikation

15 1. Einführung in die Web Programmierung Übersicht 1.1 Grundlagen 1.2 Web Engineering 1.3 Vorgehensmodelle Anforderungsdefinition Entwurf Implementierung 1.4 Kategorien von Web-Anwendungen 1.5 Technik 1.6 Usability von Webanwendungen 2. Einführung in HTML 3. Einführung in PHP

16 Vorgehensmodelle Anforderungsdefinition 16 Die Anforderungsdefinition (Requirements Engineering) umfasst Prinzipien, Methoden und Werkzeuge zur Ermittlung, Beschreibung, Prüfung und Verwaltung von Anforderungen in der Systementwicklung. Eine Anforderung beschreibt eine zu erfüllende Eigenschaft oder zu erbringende Leistung eines Systems. wichtige Aufgaben: Kappel et al. (2004), S Ermitteln und Beschreiben der Anforderungen Modellieren der Anforderungen als fachliche Lösung Prüfen der Anforderungen Verwalten der Anforderungen

17 Vorgehensmodelle Anforderungsdefinition 17 Anforderungen spielen für die Qualität von Software-Anwendungen eine entscheidende Rolle Die Praxis hat massive Probleme mit Anforderungen Unklar spezifiziert Fehlerhaft Unvollständig... Die Folgen Mangelnde Akzeptanz durch die Benutzer Fehlplanungen Inadäquate Softwarearchitekturen Kappel et al. (2004), S

18 Vorgehensmodelle Anforderungsdefinition 18 Beispiele für Anforderungen: Die Anwendung muss zum 1. September 2011 online verfügbar sein (Vorgabe des Auftraggebers) Die Anwendung muss gleichzeitig mindestens 2500 Benutzer unterstützen (Qualitätsziel des Auftraggebers) Als Entwicklungsplattform soll J2EE zum Einsatz kommen (Technologieerwartung der Entwickler) Die Übertragung sämtlicher Geschäftsdaten muss gesichert erfolgen (Qualitätsziel des Benutzers) Die Benutzerschnittstelle muss Layouts für unterschiedliche Kundengruppen ermöglichen (Qualitätsziel des Auftraggebers) Ein beliebiger Benutzer muss in der Lage sein, mit der Anwendung ein gewünschtes Produkt innerhalb von drei Klicks zu finden (Usability-Ziel des Auftraggebers) Der Benutzer soll jederzeit die in seinem Warenkorb befindlichen Artikel einsehen können (Funktionsziel eines Benutzers) Kappel et al. (2004), S

19 1. Einführung in die Web Programmierung Übersicht 1.1 Grundlagen 1.2 Web Engineering 1.3 Vorgehensmodelle Anforderungsdefinition Entwurf Implementierung 1.4 Kategorien von Web-Anwendungen 1.5 Technik 1.6 Usability von Webanwendungen 2. Einführung in HTML 3. Einführung in PHP

20 Vorgehensmodelle Entwurf 20 Im Entwurf wird aus den spezifizierten Anforderungen eine Software- Architektur entwickelt. wichtige Aufgaben: Identifikation und Darstellung der einzelnen Elemente (Schichten, Module, Klassen,...) der zugrundeliegenden Software-Architektur. Identifikation und Darstellung der Beziehungen zwischen den einzelnen Elementen.... Entwurfs- und Implementierungsphase sind sehr stark miteinander verzahnt. Die im Entwurf modellierten Elemente und Beziehungen sollten in der Phase der Implementierung direkt programmiert werden können.

21 1. Einführung in die Web Programmierung Übersicht 1.1 Grundlagen 1.2 Web Engineering 1.3 Vorgehensmodelle Anforderungsdefinition Entwurf Implementierung 1.4 Kategorien von Web-Anwendungen 1.5 Technik 1.6 Usability von Webanwendungen 2. Einführung in HTML 3. Einführung in PHP

22 Vorgehensmodelle Implementierung 22 Die Aufgabe des Programmierers ist es, die im Entwurf spezifizierten Elemente zu implementieren. wichtige Aufgaben: Konzeption von Datenstrukturen und Algorithmen Angabe zur Zeit- und Speicherkomplexität Umsetzung der Konzepte in die Konstrukte der verwendeten Programmiersprache Dokumentation der Implementierung durch Kommentare Test und Verifikation des entwickelten Programms....

23 Aufgabe 23 Auf der Internetseite zur Vorlesung finden Sie den Artikel von Lauenroth, Halmans (2007): Auswirkung sehr vieler Stakeholder auf das Requirement Engineering Welche Zieldimensionen nennen die Autoren für das Requirement Engineering? Welche Auswirkungen auf die verschiedenen Zieldimensionen ergeben sich durch sehr viele Beteiligte?

24 Aufgabe 24 Sie haben die Aufgabe eine Web-Anwendung zu entwickeln: Gruppe 1: Bewertungsportal (Kurse/Programme/Universitäten) Gruppe 2: Raumbelegungsportal (Raumbelegung und Information bei Änderung) Gruppe 3: Zeitabrechnungsplattform (Arbeitsstunden/Soll-Ist-Vergleich/Info) Gruppe 4: Newsletterportal zur An- und Abmeldung (Mobile/ und Info) Gruppe 5: Benachrichtigungsportal für Klausur-/Fußball(WM)- Ergebnisse/Informationen per Mobile (SMS/MMS und Marketingaktivitäten) Gruppe 6: Arbeiterplanungsportal Schließen Sie sich dazu in Gruppen von je 4 5 Personen zusammen. Die Aufgabe ist erfolgreich abgeschlossen, wenn die Web-Anwendungen die wesentlichen Anforderungen erfüllt, ein Usability Test mit einer anderen Gruppe durchgeführt wurde, eine Abschlusspräsentation von ca. 30 Minuten vorgetragen wurde, die Web Anwendung umfangreich dokumentiert wurde (8 10 Seiten).

25 1. Einführung in die Web Programmierung Übersicht 1.1 Grundlagen 1.2 Web Engineering 1.3 Vorgehensmodelle 1.4 Kategorien von Web-Anwendungen 1.5 Technik 1.6 Usability von Webanwendungen 2. Einführung in HTML 3. Einführung in PHP

26 Einführung in die Web Programmierung Kategorien von Web-Anwendungen 26 Informationssuche Wo finde ich...? Personalisierung Was mich interessiert...? Problemfelder Wartung Sind meine Daten noch aktuell...? Informationsextraktion Was ist wichtig...?

27 Einführung in die Web Programmierung Kategorien von Web-Anwendungen 27 Problemfelder des Internets Informationssuche: Keyword-Suche führt zu vielen nicht relevanten Ergebnissen unterschiedliche Bedeutung unterschiedlicher Kontext

28 Einführung in die Web Programmierung Kategorien von Web-Anwendungen 28 Problemfelder des Internets Informationsextraktion: Web-Anwendungen verfügen nicht über ein Kontextwissen, um Informationen aus der Text- /Bilddarstellung zu extrahieren. Kann nur vom Menschen korrekt durchgeführt und bewertet werden.

29 Einführung in die Web Programmierung Kategorien von Web-Anwendungen 29 Problemfelder des Internets Wartung: Mit zunehmender Komplexität und Größe der Web-Anwendung, steigt der Aufwand für deren Wartung. Informationen sind oftmals inkonsistent nicht korrekt nicht aktuell

30 Einführung in die Web Programmierung Kategorien von Web-Anwendungen Problemfelder des Internets Personalisierung: Anpassung der dargestellten Informationen an die persönlichen Bedürfnisse und Anforderungen des Nutzers. 30

31 Einführung in die Web Programmierung Kategorien von Web-Anwendungen Kappel et al. (2004), S

32 Einführung in die Web Programmierung Kategorien von Web-Anwendungen 32 Dokumentenzentrierte Web-Anwendungen: Webseiten werden in Form von statischen HTML-Dateien auf einem Web- Server abgelegt und im Falle einer Anfrage als Antwort an den Web-Client geschickt. Nachteile: Hoher Aufwand bei änderungsintensiven Webseiten Gefahr veralteter Informationen Gefahr von Inkonsistenz (u. a. aufgrund von Mehrfachspeicherungen) Vorteile: Einfachheit und Stabilität des Systems Schnelle Antwortzeiten Kappel et al. (2004), S. 5-9

33 Einführung in die Web Programmierung Kategorien von Web-Anwendungen 33 Interaktive Web-Anwendungen: Common Gateway Interface (CGI) und HTML-Formular-Technik bieten eine erste einfache Form der Interaktivität über Eingabebereiche Radio-Buttons Auswahllisten Webseiten können abhängig von den Benutzereingaben dynamisch generiert werden. Beispiele: Kappel et al. (2004), S. 5-9 Virtuelle Ausstellung News-Site

34 Einführung in die Web Programmierung Kategorien von Web-Anwendungen 34 Transaktionale Web-Anwendungen: Hohe Interaktivität z. B. Modifikationen durch Benutzer möglich Datenbankbasierte Systeme Vorteile: strukturierte Abfragen effiziente und konsistente Datenverwaltung Beispiel: Online-Banking E-Shopping Kappel et al. (2004), S. 5-9

35 Einführung in die Web Programmierung Kategorien von Web-Anwendungen 35 Workflow-basierte Web-Anwendungen: Erlauben die Abwicklung von Geschäftsprozessen ( workflows ) innerhalb oder zwischen verschiedenen Unternehmen, Behörden und privaten Nutzern. Voraussetzung: Strukturiertheit der zu automatisierenden Prozesse und Vorgänge. Herausforderungen: Heterogenität der IT-Infrastruktur Komplexität der einzubindenden Dienste Autonomie der beteiligten Unternehmen Sicherheit Beispiel: E-Government-Anwendungen im öffentlichen Bereich Kappel et al. (2004), S. 5-9

36 Einführung in die Web Programmierung Kategorien von Web-Anwendungen 36 Kollaborative Web-Anwendungen: Inhalte von Web-Anwendungen können gemeinsam (kollaborativ) editiert, verändert und diskutiert werden. Herausforderungen: unstrukturierte Vorgänge hoher Kommunikationsbedarf Beispiele: Wiki, Ilias moodle Kappel et al. (2004), S. 5-9

37 Einführung in die Web Programmierung Kategorien von Web-Anwendungen Kollaborative Web-Anwendungen: 37

38 Einführung in die Web Programmierung Kategorien von Web-Anwendungen 38 Portal-orientierte Web-Anwendungen: Zugriff auf verteilte, ggf. heterogene Informationsquellen und Dienste im Sinne eines Single Point of Access. Portale Unternehmensportale ermöglichen eigenen Mitarbeitern bzw. Partnerunternehmen einen Zugriff auf verschiedene Informationsquellen und Dienste. Kappel et al. (2004), S. 5-9 Marktplatzportale in Form von Online Shopping Malls im B2C-sowie B2B-Bereich. Community-Portale: Versuchen durch Interaktion zwischen den Besuchern Kundenloyalität zu schaffen. Ermöglichen durch eine entsprechende Benutzerverwaltung individuelle Angebote ( one-to-one marketing ).

39 Einführung in die Web Programmierung Kategorien von Web-Anwendungen Portal orientierte Web-Anwendungen: 39

40 Einführung in die Web Programmierung Kategorien von Web-Anwendungen 40 Ubiquitäre Web-Anwendungen: Stellen personalisierte Dienste zu jeder Zeit an jedem Ort, für eine Vielzahl von Endgeräten zur Verfügung allgegenwärtiger Zugriff. Beispiel: Anzeige von Mittagmenüs auf den mobilen Endgeräten jener Benutzer, die zwischen 11:00 Uhr und 14:00 Uhr ein Restaurant betreten. Voraussetzung: Kappel et al. (2004), S. 5-9 Kenntnis des Kontexts in dem die Web-Anwendung gerade benutzt wird, um zur Laufzeit entsprechende Anpassungen an der Web-Anwendung vornehmen zu können. Existierende Web-Anwendungen bieten häufig eine sehr eingeschränkte Form der Ubiquität, indem beispielsweise nur ein Aspekt unterstützt wird: Personalisierung oder Ortsabhängige Dienste oder Endgerätespezifische Ein- und Ausgabe

41 Einführung in die Web Programmierung Kategorien von Web-Anwendungen 41 Semantische Web-Anwendungen: Informationen im Internet sollen nicht nur für den Menschen verständlich aufbereitet, sondern auch für Maschinen automatisch verarbeitbar gemacht werden. Ziel: Vernetzung und Wiederverwendung von Wissen ( Syndication ) Kappel et al. (2004), S. 5-9 Finden von relevanten Informationen, z. B. durch Recommender-Systeme

42 1. Einführung in die Web Programmierung Übersicht 1.1 Grundlagen 1.2 Web Engineering 1.3 Vorgehensmodelle 1.4 Kategorien von Web-Anwendungen 1.5 Technik 1.6 Usability von Webanwendungen 2. Einführung in HTML 3. Einführung in PHP

43 Einführung in die Web Programmierung Technik 43 Ein Client ist eine Anwendung, die in einem Netzwerk (hier Internet) den Dienst eines Servers in Anspruch nimmt. Ein Server ist eine Software, die es ermöglicht, Webseiten und Dienste den Benutzern zur Verfügung zu stellen. PD Dr. Hajo Hippner

44 Einführung in die Web Programmierung Technik 44 Statische HTML-Seiten werden auf dem Server bereitgestellt. PD Dr. Hajo Hippner Bei einer Anfrage sendet der Server diese Dokumente unverändert an den Browser des Clients. Biethahn/Nomikos (2002), S. 50 ff.

45 Einführung in die Web Programmierung Technik 45 Vorteile: Erstmalige Programmierung sehr einfach und kostengünstig Anfrage statischer Seiten erzeugt nur geringe Server-Last Nachteile: Für jede Änderung müssen Dateien manuell bearbeitet und auf dem Server abgelegt werden Kein kundenindividueller Dialog möglich PD Dr. Hajo Hippner Biethahn/Nomikos (2002), S. 50 ff.

46 Einführung in die Web Programmierung Technik Dohmann/Fuchs/Khakzar (2002), S PD Dr. Hajo Hippner

47 Einführung in die Web Programmierung Technik 47 Browser (Client): Darstellung der Anwendung Ausführung von clientbasierten Programmen (z. B. Java-Applets). Web-Server: Darstellung von Applikationsdaten Verwaltung von Sessions Anwendungs-Server: Bereitstellung der Applikation für die Web-Anwendung (z.b. Katalogfunktion, Suche, Warenkorb, Auftragsbestätigung...) PD Dr. Hajo Hippner Datenbank-Server: Datenverwaltung für die Applikationen Datensicherung Schwarze/Schwarze (2002), S. 81 ff.

48 Einführung in die Web Programmierung Technik 48 Mit Hilfe von Skriptsprachen kann eine Webseite dynamisch erzeugt werden. Serverseitige Skriptsprachen (läuft auf einem Web-Server wie z. B. Apache ab) PHP Java Servlet Perl Clientseitig Skriptsprachen (läuft auf dem Client im Browser ab) Java Script ActionScript (Flash) Sonstige (ActiveX, VBScript)

49 Einführung in die Web Programmierung Technik Biethahn/Nomikos (2002), S. 50 ff. 49 PD Dr. Hajo Hippner

50 Einführung in die Web Programmierung Technik 50 Ablauf: Dynamische Seiten werden zur Laufzeit erzeugt. Sobald ein User eine solche Seite abruft, kontaktiert der Web-Server ein Programm der serverseitigen Programmlogik, das seinerseits Daten aus einer Datenbank oder einer Datei ausliest und wieder an den Web-Server zurückgibt. Das Ergebnis selbst wird als einfache (auf die individuelle Abfrage spezifizierte) HTML-Seite an den User geschickt. PD Dr. Hajo Hippner Biethahn/Nomikos (2002), S. 50 ff.

51 1. Einführung in die Web Programmierung Übersicht 1.1 Grundlagen 1.2 Web Engineering 1.3 Vorgehensmodelle 1.4 Kategorien von Web-Anwendungen 1.5 Technik 1.6 Usability von Webanwendungen 2. Einführung in HTML 3. Einführung in PHP

52 Einführung in die Web Programmierung Usability von Webanwendungen 52 Im Durchschnitt brechen sechs Prozent der Benutzer den Kauf ab, weil sie den Weg zum Warenkorb nicht finden oder verstehen (Nielsen) Eine Verbesserung der Usability bietet u. a. folgende Möglichkeiten: längere Verweildauer, mehr Klicks, weniger Anrufe auf der Hotline, höhere Zufriedenheit, besseres Image...

53 Einführung in die Web Programmierung Usability von Webanwendungen 53 Beispiel: Neckermann verbesserte die Usability seiner Internetseite und seines Online- Shops und erhöhte damit die Konversionrate um über 0,5%.

54 Einführung in die Web Programmierung Usability von Webanwendungen 54 Definition: Usability ist ein Maß das angibt, wie gut ein Produkt geeignet ist, seine Benutzer bei der Lösung bestimmter Aufgaben effektiv, effizient und zu ihrer Zufriedenstellung zu unterstützen. Effektivität: die Akkuratheit und Vollständigkeit mit der Benutzer ihre Ziele in einer bestimmten Umgebung erreichen können. (z. B. Möchte er auf einer Website eine Ware bestellen, ist der Vorgang effektiv, wenn ihm dies gelingt). Effizienz: der Aufwand mit dem Ressourcen verwendet werden müssen, um ein Ziel zu erreichen. (z. B. innerhalb von 3 Klicks können Waren gefunden und bestellt werden). Zufriedenheit: der Komfort und die Zugänglichkeit des Systems für den Benutzer.

55 Einführung in die Web Programmierung Usability von Webanwendungen 55 Usability-Test Beobachtung wie Benutzer tatsächlich mit der Anwendung oder einem Prototyp umgehen. Meist wird ihnen dazu eine Aufgabe gestellt. Die Teilnehmer können mit folgenden Techniken beobachtet werden: Audio & Video Aktivitäten auf dem Bildschirm Logfiles der angewählten Links Blickbewegung (Eye Tracking) Fragebögen Interviews Harms, Schweibenz (2002), S. 61 ff

56 Aufgabe 56 Welche Kriterien sind für Sie bei der Bewertung der Usability einer Webseite (bzw. Web-Anwendung) wichtig? Recherchieren Sie im Internet nach je einer Webseite, die ihrer Meinung nach eine gute bzw. schlechte Usability hat. Begründen Sie Ihre Antwort.

57 Aufgabe 57 Auf der Internetseite zur Vorlesung finden Sie den Artikel von Harms, Schweibenz (2000): Testing Web Usability Was verstehen die Autoren unter dem Begriff Usability Engineering? Welche Evaluations-Methoden werden vorgestellt diskutieren Sie diese kritisch!

58 Aufgabe 58 Auf der Internetseite zur Vorlesung finden Sie für die einzelnen Projektaufgaben eine Beschreibung des Ist-Zustands. Erarbeiten Sie in der Gruppe verschiedene Anforderungen, die sich aus dem Ist-Zustand und den Zielen des jeweiligen Projekts ergeben. Sie können dabei auch eigene Ideen mit einfließen lassen. (Orientieren Sie sich bei der Beschreibung an den unten stehenden Anforderungskategorien) F: Funktionale Anforderungen Hinweise: Funktionale Anforderungen definieren die von dem Betreiber (Auftraggeber) erwarteten Systemfunktionen. Es wird festgehalten, was realisiert werden soll. Die Funktionalitäten sind zu beschreiben. F1: Funktionalitäten des öffentlichen Bereichs F2: Funktionalitäten des privaten Bereichs

59 Aufgabe 59 S: Systembezogene Anforderungen Hinweis: Die systembezogenen Anforderungen machen deutlich, welche Voraussetzungen hard- und softwareseitig für den Systemeinsatz gegeben sein müssen. S1: Anforderungen an die Systemsoftware S2: Programmiersprache S3: Tools Q: Qualitative Anforderungen Hinweis: Qualitative Anforderungen spezifizieren nichtfunktionale Anforderungen wie z. B. Ausfallsicherheit, Zuverlässigkeitsanforderungen, Portabilitätsanforderungen, gewünschte Antwort- und Verarbeitungszeiten. Q1: Nachweis der Funktionalität Q2: Benutzerfreundliche Oberfläche Q3: Effizienz Q4: Wartbarkeit (Änderbarkeit)

60 Aufgabe 60 P: Prozessbezogene Anforderungen Hinweis: Prozessbezogene Anforderungen spezifizieren Anforderungen zum Entwicklungsverlauf (Vorgehen) und zu den eingesetzten Ressourcen (MA, Kosten, in-house/outsourcing etc.). P1: Entwicklungsverlauf P2: eingesetzte Ressourcen

61 1. Einführung in die Web Programmierung 2. Einführung in HTML 3. Einführung in PHP Übersicht

62 1. Einführung in die Web Programmierung 2. Einführung in HTML Übersicht a. Grundlagen b. HTML-Tags c. Formulare d. Cascading Stylesheets 3. Einführung in PHP

63 Einführung in HTML Grundlagen 63 Hypertext Markup Language (HTML) HTML ist eine Auszeichnungssprache (Markup Language). Sie hat die Aufgabe mit Hilfe von HTML-Tags, logische Bestandteile eines Dokuments zu beschreiben. Die Elemente haben jeweils einen fest definierten Erstreckungsraum. <h1> Text der Überschrift </h1> Hypertext bedeutet, dass ein Dokument Verweise (Links) auf andere Dokumente beinhalten kann. Der Webbrowser interpretiert die HTML-Dokumente als formatierte Webseite.

64 Einführung in HTML Grundlagen 64 Hypertext Markup Language (HTML) Syntax Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden Teilen: Dokumenttyp-Deklaration (Angabe zur HTML-Version) Header (Kopfdaten z. B. Angaben zu Titel der Seite) Body (Textkörper dargestellter Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.) Außer der Dokumenttyp-Deklaration wird der gesamte Inhalt einer HTML-Datei in folgende Tags eingeschlossen: <html>...</html> Hinter dem einleitenden HTML-Tag folgt der Kopf der HTML-Datei, in dem die Kopfdaten festgelegt werden: <head>...</head> Unterhalb davon folgt der Textkörper: <body>...</body>. Dazwischen wird der eigentliche Inhalt der Datei notiert.

65 Einführung in HTML Grundlagen 65 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " Dokumenttyp- Deklaration <html> <head> <title>meine erste Webseite</title> </head> Kopfdaten <body> <h2> Herzlich Willkommen zur Vorlesung </h2> <h1> Web Programmierung</h1> </body> </html> Textkörper

66 Einführung in HTML Grundlagen 66 Kommentare: HTML beinhaltet die Möglichkeit, an beliebigen Stellen innerhalb einer HTML-Datei Kommentare <! > einzufügen. Diese werden von Web-Browsern ignoriert, d. h. bei der Präsentation nicht angezeigt. Kommentare sind besonders sinnvoll, um den Quellcode verständlich zu gestalten und somit die Widerverwendbarkeit der Anwendung zu unterstützen. <html> <head> <!-- Das ist der Kopfbereich --> <title>titel der Seite</title> </head> <body> Meine erste Seite </body> </html>

67 Einführung in HTML Grundlagen Zur Überprüfung der Syntax können sog. HTML-Validatoren verwendet werden: Beispiel:

68 1. Einführung in die Web Programmierung 2. Einführung in HTML Übersicht a. Grundlagen b. HTML-Tags c. Formulare d. Cascading Stylesheets 3. Einführung in PHP

69 Einführung in HTML HTML-Tags 69 Überschriften: HTML unterscheidet 6 verschiedene Überschriften, um Hierarchieverhältnisse in Dokumenten abzubilden. <h[ ]>... </h[ ]> Die Nummer steht für die Überschriftenebene (1 ist die höchste Ebene, 6 die niedrigste). Dahinter folgt der Text der Überschrift. Überschriften werden standardmäßig linksbündig ausgerichtet. Durch die Angabe von align = left center right justify kann die Ausrichtung auch entsprechend geändert werden. <html> <head> <title> Überschriften definieren </title> </head> <body> <h1 align = "center"> Überschrift 1. Ordnung </h1> <h2 align = "right"> Überschrift 2. Ordnung </h2> <h3> Überschrift 3. Ordnung </h3> </body> </html>

70 Einführung in HTML HTML-Tags 70 Textabsätze: Absätze dienen der optischen Gliederung eines Textes: <p>...</p> Textabsätze werden standardmäßig linksbündig ausgerichtet. Durch die Angabe von align = left center right justify kann die Ausrichtung auch entsprechend geändert werden. <html> <head> <title>absatz</title> </head> <body> <h1>textabsätze ausrichten</h1> <p align="center">dies ist ein zentrierter Absatz.</p> <p align="right">dies ist ein Absatz, der rechtsbündiger ausgerichtet ist.</p> <p align="left">dies ist ein Absatz, der linksbündig ausgerichtet ist...</p> <p align="justify">dies ist ein Absatz, der im Blocksatz ausgerichtet ist...</p> </body> </html>

71 Einführung in HTML HTML-Tags 71 Zeilenumbruch: Zeilenumbrüche können an einer beliebigen Stelle mit Hilfe des <br> - Tags gesetzt werden. <html> <head> <title>zeilenumbruch erzwingen</title> </head> <body> <p>die Veranstaltung<br> <b> <i> Webprogrammierung </i> </b> <br> richtet sich an alle Studenten, die gerne eine Internetanwendung programmieren!</p> </body> </html>

72 Einführung in HTML HTML-Tags 72 Listen: Bei einer Aufzählungsliste werden alle Listeneinträge mit einem Aufzählungszeichen versehen. Dabei unterscheidet man zwischen ungeordneten und nummerierten Listen! Die HTML-Tags <ul>... </ul> (ul = unordered list) oder <ol>...</ol> (ol = ordered (nummerierte) list) kennzeichnen eine Aufzählungsliste. Durch <li>...</li> werden die einzelnen Punkte innerhalb der Liste (li = list item) definiert. <html> <head> <title>listen</title> </head> <body> <ol> <li>vorlesung <ul> <li>e-commerce I </li> <li>analytisches CRM - Prozesse und Methoden</li> </ul> </li> <li>übung </li> </ol> </body> </html>

73 Einführung in HTML HTML-Tags 73 Block: Sie können mehrere Elemente wie Text, Grafiken, Tabellen usw. in einen gemeinsamen Bereich einschließen: <div>... </div> Dadurch können gemeinsame Eigenschaften (wie z. B. eine zentrierte Ausrichtung) für alle im Block enthaltenen Elemente definiert werden. <html> <head> <title>webseite</title> </head> <body> <div align = center > <h1> Alles ist zentriert </h1> <ul> Liste <li> 1.Element </li> <li> 2.Element </li> </ul> </div> </body> </html>

74 Einführung in HTML HTML-Tags 74 Tabellen: In HTML lassen sich Tabellen definieren, um Daten tabellarische darzustellen oder Text und Grafik strukturierter am Bildschirm zu verteilen. <table [border = ]>... </table> Das Attribut border legt die Stärke der Gitternetzes fest. Der angegebene Wert ist die Breite des Rahmens in Pixel. <tr>...</tr> legt eine neue Tabellenzeile an (tr = table row). Eine Tabelle kann Kopfzellen: <th>...</th> (th = table header) und Datenzellen <td>...</td> (td = table data) enthalten. (Der Text in Kopfzellen wird hervorgehoben)

75 Einführung in HTML HTML-Tags 75 <html> <head> <title> Bachelor-Veranstaltungen</title> </head> <body> <h1>bachelor-module</h1> <table border="1"> <tr> <th>modul: Datenbanken und Programmierung</th> </tr> <tr> <td>programmierung mit Java</td> </tr> <tr> <td>datenbanken mit MS Access</td> </tr> </body> </html>

76 Einführung in HTML HTML-Tags 76 Aufgabe: Unser Lehrstuhl bietet im Sommersemester drei Bachelor Module mit verschiedenen Veranstaltungen an. Programmieren Sie eine Internetseite, auf der die einzelnen Module und Veranstaltungen übersichtlich zusammengefasst sind. Beachten Sie dabei folgende Punkte: Der Titel der Internetseite ist der Name des Lehrstuhls. Der Text (Bachelor Module) soll als zentrierte Überschrift gestaltet werden. Die Tabelle soll zentriert ausgerichtet werden und einen deutlichen Rahmen haben. Die Titel der einzelnen Module sollen hervorgehoben werden. Überprüfen Sie den Syntax Ihres Dokuments mit Hilfe eines HTML-Validators (

77 Einführung in HTML HTML-Tags Aufgabe: 77

78 Einführung in HTML HTML-Tags 78 Verweise: Eine Homepage besteht typischerweise aus mehreren HTML-Dateien. Dabei unterscheidet man zwischen einer Einstiegsseite und mehreren Themenseiten Damit der Betrachter Verweise erkennt, sollten diese möglichst aussagekräftig benannt und grafisch hervorgehoben sein!

79 Einführung in HTML HTML-Tags 79 Verweise: Für Verweise in HTML gibt es das a-element (a = anchor). Zusätzlich ist das Attribut href erforderlich (href = hyper reference). <a href=./datei.html">datei im selben Verzeichnis</a> Per Voreinstellung werden alle Verweise im aktuellen Fenster geöffnet. Durch das Attribut <a href=" Eichstaett-Ingolstadt</a> target = _blank (Verweis wird in einem neuen Fenster angezeigt) target = _self (Verweis wird in demselben Fenster angezeigt) ist es jedoch möglich, eine Zielfensterbasis anzugeben. <a href= target = _blank> Universität</a>

80 Einführung in HTML HTML-Tags Verweise zu -Adressen Es kann auf jede beliebige -Adresse ein Verweis gesetzt werden. <a Mustermann</a> 80

81 Einführung in HTML HTML-Tags 81 Anker: Innerhalb einer HTML-Datei können Anker definiert werden, um einen Sprung an die Ankerstelle innerhalb einer Datei zu ermöglichen. Ein Anker wird genau wie ein Verweis mit Hilfe des a-elements erzeugt: #anfang <html> <head> <title>anker definieren und Verweise zu Ankern</title> </head> <body> <h1><a name="anfang">seitenanfang</a></h1> <h2> Kapitel 2</h2> <p><a href="#anfang">seitenanfang</a> </p> </body> </html>

82 Einführung in HTML HTML-Tags 82 Aufgaben: Im Sommersemester werden an unserem Lehrstuhl verschiedene Veranstaltungen angeboten. Programmieren Sie eine Internetseite, die die verschiedenen Veranstaltungen enthält und nach Vorlesung, Übung, Proseminar und Hauptseminar unterscheidet!

83 Einführung in HTML HTML-Tags 83 Aufgaben: Verlinken Sie die einzelnen Lehrveranstaltungen mit den jeweiligen Seiten unseres Lehrstuhls! (Achten Sie darauf, dass sich jeweils eine neue Internetseite öffnet) Überprüfen Sie die syntaktische Korrektheit Ihrer Internetseite mit Hilfe eines HTML-Validators!

84 Einführung in HTML HTML-Tags 84 Grafiken: Um Grafiken in HTML-Dateien einzubinden, muss die Grafikdatei an der gewünschten Stelle im HTML-Quelltext referenziert werden. Für Grafikreferenzen gibt es in HTML das <img>-tag (img = image). Mit Hilfe von Attributen können nähere Einzelheiten der Grafikreferenz festgelegt werden. Mit dem Attribut src wird die gewünschte Grafikdatei bestimmt. (Pflichtattribut) Mit dem Attribut alt wird ein Alternativtext für den Fall festgelegt, dass die Grafik nicht angezeigt werden kann. (Pflichtattribut) Mit den Attributen width height geben Sie die Breite bzw. Höhe der Grafik an. <html><head> <title>breite und Höhe von Grafiken</title> </head> <body> <p><img src="logo.jpg" width="50" height="83" alt="logo"></p> </body></html>

85 Einführung in HTML HTML-Tags 85 Frames: Mit Hilfe von Frames kann der Anzeigebereich des Browsers in verschiedene, frei definierbare Segmente aufgeteilt werden. <html> <head> <title>beschreibung des Frameset-Inhalts</title> </head> <frameset...> <!-- Frameset-Definition --> <frame...> <!-- Frame-Fenster-Definition --> </frameset> </html>

86 Einführung in HTML HTML-Tags 86 Frames: Beim Definieren von Framesets wird bestimmt, wie das Anzeigefenster des Browsers in verschiedene Frame-Fenster aufgeteilt werden soll. Im einleitenden Tag <frameset...> wird die Aufteilung festgelegt. Dabei unterscheidet man zwischen cols (Spalten) und rows (Zeilen). Dahinter wird bestimmt, wie die Aufteilung genau aussehen soll. Im Beispiel wird mit Hilfe von rows="20%, 80%" eine Aufteilung in zwei Zeilen erzwungen, wobei die obere Zeile 20% des Anzeigefensters in Anspruch nimmt, die untere 80%. <frameset rows = 20%,80%> <!-- Frameset-Definition --> </frameset>

87 Einführung in HTML HTML-Tags 87 Frames zu einem Frameset definieren: Mit je einem <frame>-tag können innerhalb eines Framesets die zugehörigen Frames (frame = Rahmen) definiert werden. Durch das Attribut src (Quelle) wird ein Verweis auf eine Datei angegeben, die den Inhalt des jeweiligen Frames enthält. <html><head> <title>frameset mit Sitemap</title></head> <frameset cols=50%,50%> <frame src="verweis.html" name="navigation"> <frame src="startseite.html" name= Hauptseite"> </frameset> </html> <html><head> <title>navigation</title> </head> <body> <h1>navigation</h1> <p> <a href= target="hauptseite"><b>googeln</a><br> </p> </body></html> frameset.html verweis.html

88 Einführung in HTML HTML-Tags 88 Aufgabe: Programmieren Sie eine Internetseite, die aus zwei Frames besteht. Im linken Fenster sollen ihre Lieblingsseiten aufgelistet und verlinkt sein. Im Hauptfenster soll die entsprechende Seite angezeigt werden!

89 1. Einführung in die Web Programmierung 2. Einführung in HTML Übersicht a. Grundlagen b. HTML-Tags c. Formulare d. Cascading Stylesheets 3. Einführung in PHP

90 Einführung in HTML Formulare 90 Allgemeines zu Formularen: HTML stellt die Möglichkeit zur Verfügung, Formulare (wie Eingabefelder oder Auswahllisten) zu erstellen. Formulare können eingesetzt werden, um strukturierte Auskünfte von Anwendern einzuholen, um Anwendern das Suchen in Datenbeständen zu ermöglichen, um Anwendern die Möglichkeit zu geben, selbst Daten für einen Datenbestand beizusteuern.

91 Einführung in HTML Formulare 91 Mit <form>...</form> kann ein Formular (form = Formular) definiert werden. Alles, was zwischen den beiden <form>-tags steht, gehört zum Formular. Das sind hauptsächlich Elemente des Formulars wie Eingabefelder, Auswahllisten oder Buttons. Im einleitenden <form>-tag geben Sie mit dem Pflichtattribut action an, an welchen URL die Formulardaten beim Absenden des Formular übertragen werden sollen. Der URL sollte die Adresse eines Programms auf dem Server-Rechner sein, das die Formulardaten weiterverarbeitet. Üblicherweise handelt es sich dabei um ein CGI-Script, das z.b. in PHP geschrieben wurde. <form action= Dateiname.php" method="get"> <!-- hier folgen die Formularelemente --> </form>

92 Einführung in HTML Formulare 92 Ein weiteres wichtiges Attribut bei der Formulardefinition ist das Attribut method. Dieses legt fest, nach welcher HTTP-Übertragungsmethode die Formulardaten an ihr Ziel gelangen. Dabei gibt es zwei mögliche Werte: method="get", hängt der Browser die Formulardaten als Parameter an die Aufrufadresse an (diese Angabe ist nicht zwingend erforderlich, da get als Default- Einstellung definiert ist). Beachten Sie, dass die Anzahl der übergebenen Zeichen je nach Browser auf ca limitiert sein kann. Das verarbeitende CGI- Programm kann diese als Parameter übergebene Zeichenkette auslesen und weiter verarbeiten. method="post", überträgt der Web-Browser die Formulardaten mit einer speziellen POST-Anfrage an den Web-Server. Der Web-Server stellt die Daten dem CGI-Programm über den Standardeingabekanal zur Verfügung.

93 Einführung in HTML Formulare 93 Einzeilige Eingabefelder: <input> definiert ein einzeiliges Eingabefeld (input = Eingabe), mit folgenden Attributen: name = interner Bezeichner, damit auf die Daten des Eingabefeldes zugegriffen werden kann type = gibt an, um welche Eingabe es sich handelt: input type = text input type = password size = legt die Anzahl der Zeichen fest. maxlength = legt die interne Feldlänge in Zeichen fest. value = belegt das Textfeld vor. <form action=..."> <p>vorname:<br> <input type="text" name="vn" size="30" maxlength="30 value= Vorbelegter Wert > </p> <p>nachname:<br> <input type= password" name="nn" size="30 maxlength="40"></p> </form>

94 Einführung in HTML Formulare 94 Mehrzeilige Eingabefelder: < textarea> definiert ein mehrzeiliges Eingabefeld (textarea = Textbereich), mit folgenden Attributen: name = interner Bezeichner, damit auf die Daten des Eingabefeldes zugegriffen werden kann rows = bestimmt die Anzahl der angezeigten Zeilen (rows = Zeilen), cols = bestimmt die Anzahl der angezeigten Spalten (cols = Spalten). <form action=..."> <Schicken Sie uns bitte Ihr Feedback:<br> <p><textarea name= feedback" cols="50" rows="10"> Mehrzeiliges Textfeld </textarea> </p> </form>

95 Einführung in HTML Formulare 95 Auswahllisten: <select> definiert eine Auswahlliste, mit folgenden Attributen: name ist der interne Bezeichner, damit auf die Daten der Liste zugegriffen werden kann. size bestimmt die Anzeigegröße der Liste, multiple erlaubt eine Mehrfachauswahl (optionales Attribut!) <option>...</option> bestimmt jeweils einen Eintrag der Auswahlliste. <option selected>...</option> selektiert einen Listeneintrag vor. <option value = K03 >...</option> bestimmt, dass beim Absenden des Formulars ein interner Wert übergeben wird. <form action=..."> <p> <select name="top5" size= 4 multiple> <option>programmierung mit Java</option> <option selected>webprogrammierung</option> <option value= K03 >Anayltisches CRM</option> </select> </p> </form>

96 Einführung in HTML Formulare 96 Radiobuttons und Checkboxen: Radio-Buttons werden durch <input type="radio"> definiert, Checkboxen werden durch <input type="checkbox"> definiert. Mit Hilfe des Attributs name können Radiobuttoms gruppiert werden. Alle Radio-Buttons mit dem gleichen Namen gehören zu einer Gruppe, d.h. von diesen Buttons kann der Anwender genau einen markieren. Weitere mögliche Attribute: checked, value <form action=..." <p>welche Vorlesung möchten Sie besuchen?</p> <p> <input type="radio" name="vl" value="v01"> Programmierung mit Java <br> <input type="radio" name="vl" value="v02"> Web Programmierung <br> </p> </form> <form action=..."> <p>welche Vorlesung möchten Sie besuchen?</p> <p> <input type="checkbox" name="vl" value="v01" checked > Programmierung mit Java <br> <input type="checkbox" name="vl" value="v02 > Web Programmierung <br> </p> </form>

97 Einführung in HTML Formulare 97 Buttons zum Absenden oder Abbrechen: HTML stellt zwei Standard-Buttons zur Verfügung, um Formulareingaben zu verarbeiten: <input type="submit value = Absenden > schickt die Formulardaten an die im einleitenden <form>-tag spezifizierte Adresse <input type="reset" value = Abbrechen > bricht die Aktion ab und alle Eingaben werden gelöscht. (Mit dem Attribut value wird die Beschriftung der Buttons festgelegt) <form action=..."> <p>welche Vorlesung möchten Sie besuchen?</p> <p> <input type="radio" name="vl" value="v01"> Programmierung mit Java <br> <input type="radio" name="vl" value="v02"> Web Programmierung <br> </p> <input type = "submit" value ="Absenden"> <input type = "reset" value ="Abbrechen"> </form>

98 Einführung in HTML Formulare Aufgabe: Sie haben die Aufgabe eine Anmeldeseite für den Newsletter Ihres Unternehmens zu implementieren. Als Vorlage können Sie folgende Internetseite verwenden. 98

99 1. Einführung in die Web Programmierung 2. Einführung in HTML Übersicht a. Grundlagen b. HTML-Tags c. Formulare d. Cascading Stylesheets 3. Einführung in PHP

100 Einführung in HTML Cascading Stylesheets 100 Definition: Cascading Stylesheets (CSS) Cascading Style Sheets setzen das Konzept der Trennung des Inhalts und der Struktur einer Seite von deren Präsentation um. CSS können auf mehrere HTML-Dateien angewandt werden, um eine einheitliche Gestaltung zu gewährleisten. Änderungen in der Gestaltung können dadurch mit nur geringer Modifikation des CSS realisiert werden.

101 Einführung in HTML Cascading Stylesheets 101 Formate zentral in HTML-Datei definieren Im Kopfteil der HTML-Datei <head> kann ein Bereich für CSS-Formate definiert werden. Dieser wird mit <style>... </style> gekennzeichnet. Im einleitenden <style>-tag muss der MIME-Typ der Stylesheet-Sprache angegeben werden. Für CSS ist das die Angabe type = text/css Zwischen dem einleitenden und dem abschließenden <style>-tag können die zentralen CSS-Formate definiert werden. <html> <head> <title> Seitentitel </title> </head> <body> </body> </html> <style type = text/css > // Hier werden die Formate definiert! </style>

102 Einführung in HTML Cascading Stylesheets 102 Hintergrundfarben und Schriftfarben: background-color: Für jedes HTML-Element kann eine eigene Hintergrundfarbe definiert werden. Farbwerte können nach dem Schema rgb(rr,gg,bb)oder mit ihren Namen (z. B. blue, green) angegeben werden. Innerhalb der Klammer müssen drei Dezimalwerte stehen. Für alle drei Werte sind absolute Zahlen zwischen 0 (kein Anteil der entsprechenden Farbe) und 255 (maximaler Anteil der entsprechenden Farbe) erlaubt. color: Mit dieser Angabe können Schriftfarben definiert werden <style type = "text/css"> body {background-color: rgb(51,0,102)} h1 {color: black; background-color:blue} </style>

103 Einführung in HTML Cascading Stylesheets Hintergrundfarben und Schriftfarben: 103

104 Einführung in HTML Cascading Stylesheets 104 font-family: Schriftarten sind z. B. Arial, Helvetica, Times Roman usw. Mit font-family können mehrere Schriftarten definiert werden. Kann eine Schrift nicht angezeigt werden, so wird automatisch die zweite, angegebene Schriftart verwendet, usw. <style type = "text/css"> p, li {font-family:arial, Helvetica, Times Roman} </style>

105 Einführung in HTML Cascading Stylesheets 105 Schriftstil und Schriftgröße: Mit Hilfe der Angabe von font-style können verschiedene Schriftstile festgelegt werden italic normal Mit Hilfe von font-size kann die Schriftgröße definiert werden. Erlaubt sind numerische Wert (z. B. pt, px) Prozentangaben (Die Werte beziehen sich auf die Schriftgröße des Elternelements) Absolute Schlüsselwerte small = klein medium = mittel large = groß <style type = "text/css"> p, li {font-size:200; font-style: italic} </style>

106 Einführung in HTML Cascading Stylesheets 106 Individualformate: Über das Universalattribut #Attributname können Formate zentral definiert werden. Einzelne HTML-Elemente können durch Angabe id = Attributname auf die Formatvorlage zugreifen. <html> <head> <title></title> <style type ="text/css"> #Überschrift1 { font-size: 100; font-style: italic; } #Überschrift2 { font-size: 50; font-style: italic; } </style> </head> <body> <h1 id="überschrift1"> test </h1> <h1 id="überschrift2"> test </h1> </body> </html>

107 Einführung in HTML Cascading Stylesheets 107 Universalformate: Um ein zentrales Format für alle HTML-Elemente zu definieren, kann der Universalselektor * angewandt werden. <html> <head> <title></title> <style type ="text/css"> * { color: blue; } #Überschrift1 { font-size: 100; font-style: italic; } </style> </head> <body> <h1 id="überschrift1"> test </h1> <h1> test </h1> </body> </html>

108 Aufgaben 108 Sie haben die Aufgabe eine Startseite (startseite.html) für die Vorlesung Web Programmierung zu erstellen. Berücksichtigen Sie dabei bitte folgende Anforderungen: Der im Browser angezeigte Titel sowie die Überschrift sollen "Einführung in die Web Programmierung" lauten. Erstellen Sie einen Absatz, in dem die wichtigsten Informationen (Dozent, Teilnehmerzahl, etc.) übersichtlich dargestellt werden. Verwenden Sie für die Gestaltung der Webanwendung Stylesheets.

109 Aufgaben 109 Erstellen Sie ein HTML Dokument (inhaltsverzeichnis.html), in dem der Inhalt der Veranstaltung Web Programmierung dargestellt wird. Listen Sie die einzelnen Modulen innerhalb einer geordneten Liste auf Verwenden Sie innerhalb der einzelnen Module weitere ungeordnete Listen, die alle Kapitel eines Moduls auflisten.

110 Aufgaben 110 Erstellen Sie einen Zeitplan (zeitplan.html) der Veranstaltung. Erstellen Sie für jedes Modul eine zweispaltige Tabelle. Die erste Spalte enthält die Kapitel eines Moduls, die zweite Spalte den Zeitplan. Formatieren Sie jeweils die erste Zeile jeder Tabelle mit dem Modultitel als Kopfzellen, die übrigen als Datenzellen. Die gesamten Tabellen sollen zentriert angezeigt werden.

111 Aufgaben 111 Erstellen Sie eine Navigationsmenü (navigation.html) für die erstellten Seiten: startseite.html inhaltsverzeichnis.html zeitplan.html Berücksichtigen Sie dabei bitte folgende Punkte: Die Hintergrundfarbe soll den Wert FFCC00 haben. Platzieren Sie am oberen Rand ein kleines Titelbild mit zugehörigem Alternativtext. Darunter erstellen Sie ihre Verweise in einer ungeordneten Liste. Als letzter Verweis soll auf eine Adresse verlinkt werden.

112 Aufgaben 112

113 Aufgaben 113 Erstellen Sie eine neue HTML Seite (frameset.html) mit folgenden Anforderungen: In der linken Spalte (sie soll 25% der Browserfenstergröße ausmachen) binden Sie die vorher erstellte Navigation ein. Die rechte Spalte soll mit der Startseite beginnen. Die Frames dürfen keinen Rand aufweisen. Die Verweise in der Navigation sollen jeweils im rechten Fenster angezeigt werden. (Verwenden Sie dafür das Target Attribut).

114 Aufgaben 114

115 Aufgaben 115 Überlegen Sie sich anhand der jeweiligen Problemstellung und dem erarbeiteten Anforderungskatalog, wie Ihre Web-Anwendung modelliert werden kann: Aus welchen Seiten soll die Anwendung bestehen? Welche Funktionalitäten (Links/Formulare/...) soll diese enthalten? Gestalten Sie die einzelnen Seiten Ihrer Web-Anwendung mit HTML! Stellen Sie Ihre Ergebnisse im Rahmen einer kurzen Präsentation (ca. 10 min) in der nächsten Vorlesungseinheit vor!

116 1. Einführung in die Web Programmierung 2. Einführung in HTML 3. Einführung in PHP Übersicht

117 1. Einführung in die Web Programmierung 2. Einführung in HTML 3. Einführung in PHP Übersicht a. Grundlagen b. Variablen und Datentypen c. Kontrollstrukturen d. Funktionen e. Formulare f. Datenbanken unter PHP

118 Einführung in PHP Grundlagen 118 Ausführungsort PHP ist eine serverbasierte Skriptsprache. Beim Aufruf einer Internetseite, wird das PHP-Programm auf dem Web-Server ausgeführt der Besucher erhält nur die Ausgabe (i. d. R. ein HTML- Dokument) zurück.

119 Einführung in PHP Grundlagen 119 Einbettung von PHP in HTML Es gibt mehrere Möglichkeiten PHP-Programme in HTML-Dateien einzubetten: in Kurzform innerhalb einer Markierung: <?php [PHP-Anweisungen]?> in etwas längerer Form zwischen einer Anfangsmarkierung und einer Endmarkierung: <script language = "php"> [PHP-Anweisungen] </script> PHP-Programme können sowohl vollständig innerhalb des Dokument-Kopfes (head) als auch innerhalb des Dokument-Rumpfes (body) auf der HTML-Seite eingebettet werden. <html> <head> <title> Meine erste Website </title> <?php // Hier kann ein PHP-Programm stehen?> </head> <body> <?php // Hier kann ein PHP-Programm stehen?> </body> </html>

120 Einführung in PHP Grundlagen 120 Das erste PHP-Programm: Ausgabe von "Hallo Welt" auf dem Bildschirm. <html> <head> <title> Meine erste Website </title> </head> <body> <?php echo Herzlich Willkommen";?> </body> </html> echo ist ein Befehl, um einen Ausdruck in Anführungszeichen am Bildschirm auszugeben. Nach jedem PHP-Befehl kommt ein Semikolon dadurch erkennt der PHP- Interpreter das Ende eines PHP-Befehls.