Modul: Systementwicklung Unit: Web-Programmierung WWIWI_030_204.2

Transkript

1 Duale Hochschule Baden-W ürttemberg Villingen-Schwenningen Fakultät für W IRTSCHAFT Studiengang Wirtschaftsinformatik Modul: Systementwicklung Unit: Web-Programmierung WWIWI_030_204.2 Jahrgang: WWI 2009, 4. Hj., A-C Datum: 28. Juni 2011 Dozent: Thomas Perschke Zeit: 45 Min. Hilfsmittel: keine Bitte schreiben Sie Ihren Namen auf jedes Lösungsblatt und nummerieren Sie die Lösungsblätter fortlaufend. Kennzeichnen Sie das Ende der Aufgabenbearbeitung, die Fortsetzung auf einem neuen Blatt sowie die Nachträge zur jeweiligen Aufgabe. Setzen Sie die Nachträge unmittelbar hinter die entsprechende Aufgabenbearbeitung, ggf. auf einem separaten Blatt. Der Lösungsweg soll aus Ihren Aufzeichnungen ersichtlich sein. Unterschreiben Sie bitte das letzte Lösungsblatt. Halten Sie auf jeder Seite einen Korrekturrand ein und schreiben Sie nicht mit Blei- oder Rotstift. Geben Sie die Aufgabenblätter mit Ihrer Lösung ab. Viel Erfolg!!!

2 Aufgabe 1 Lesen Sie bitte zuerst die komplette Aufgabe 1. Verzichten Sie in Aufgabenteil 1.1 komplett auf die Formatierung mittels CSS. Dies ist Bestandteil des Aufgabenteils Der von Google bereitgestellte Dienst Google Chart ermöglicht das Erzeugen von Diagrammen. Nach Aufruf der geeigneten URL liefert der Dienst das Diagramm als PNG-Datei. Beachten Sie dazu auch die Informationen im Anhang E. Erstellen Sie ein Formular, in welchem der Anwender den Diagrammtyp, die Größe des Diagramms, den Titel des Diagramms und die Datenreihe eingeben kann. Nutzen Sie zur Darstellung u. a. eine Tabelle mit drei Spalten. In der dritten Spalte befinden sich zusätzliche Hinweise für den Anwender. Orientieren Sie sich an folgender Abbildung: Weitere Hinweise: Bei der ersten Zeile handelt es sich um eine Überschrift der 1. Ordnung. Der Diagrammtyp kann über eine Auswahlliste (Dropdown-Liste) gewählt werden. Folgende Einträge sollen zur Verfügung stehen: Horizontales Balkendiagramm, Vertikales Balkendiagramm und Kuchendiagramm. Bei allen anderen Eingabefeldern handelt es sich um normale Texteingabefelder ohne Vorbelegung und ohne Größenangaben. In der letzten Spalte finden sich Hinweise für den Anwender. Übernehmen Sie die dargestellten Texte. Ein wie oben ausgefülltes Formular erzeugt folgende Grafik: 18 Punkte

3 2. Die Seite soll nun mittels CSS formatiert werden. Die CSS-Regeln befinden sich in einer externen Datei namens formate.css. Ergänzen Sie die Datei so, dass alle Inhalte in der Schriftart Verdana und der Schriftgröße 14 Pixel dargestellt werden die Hintergrundfarbe der kompletten Seite auf gelb gesetzt ist die Tabellenzellen mit einem schwarzen, 1 Pixel breiten und durchgezogenen Rahmen versehen sind. Der Innenabstand der Zellen beträgt 5 Pixel. die Texte in der ersten Spalte fett hervorgehoben sind Wählen Sie geeignete Selektoren und beschreiben Sie auch die notwendigen Änderungen in der HTML-Seite! Datei: formate.css 7 Punkte

4 Aufgabe 2 Bisher muss der Anwender im Feld Datenreihe die Zeichenkette t: vor die eigentlichen Datenreihe setzen. Dies soll nun automatisch geschehen. Überprüfen Sie dazu vor dem Absenden der Formulardaten den Inhalt des Feldes. Fehlt die Zeichenkette t:, wird diese automatisch dem Feldinhalt hinzugefügt, d. h. der Datenreihe vorangestellt. Nutzen Sie Javascript. Führen Sie die notwendigen Änderungen bzw. Ergänzungen durch. 15 Punkte Aufgabe 3: Diagramme können sowohl über geeignete PHP-Bibliotheken als auch über geeignete Javascript- Bibliotheken erzeugt und in eine HTML-Seite eingebunden werden. 1. Beschreiben Sie den grundlegenden Unterschied dieser beiden Alternativen 2 Punkte 2. Nennen Sie drei Vor- bzw. Nachteile der Generierung über eine Javascript-Bibliothek. Begründen Sie! 3 Punkte

5 Anhang A: CSS-Eigenschaften Schriftformatierung: font-family (Schriftart) font-size (Schriftgröße) font-weight (Schriftgewicht): bold, bolder, lighter, normal) color (Textfarbe) Rahmen: border-width (Rahmendicke ) border-color (Rahmenfarbe ) border-style (Rahmentyp: none, hidden, dotted, dashed, solid, double, outset ) Hintergrund: background-color (Hintergrundfarbe) background-image (Hintergrundbild) Dimensionierung von Elementen: width (Breite) height (Höhe) Abstände: margin (Außenabstand allgemein) padding (Innenabstand allgemein) HTML-Tag für das Einbinden CSS-Datei (extern) <link rel="stylesheet" type="text/css" href="formate.css"> Einbinden CSS-Anweisungen (intern) <style type="text/css"> [...] </style> Anhang B: Javascript Sprachelemente Javascript-EventHandler Verzweigung, Schleifen und Funktionen

6 Anhang C: Javascript HTML-Elementobjekt input

7 Anhang D: Javascript-Objekt String

8 Anhang E: Google Chart Tool The Google Chart Tools enable adding live charts to any web page. [ ] The Google Chart API returns a PNG image of a chart in response to a URL GET or POST request. [ ] All URLs start with followed by the parameters that specify chart data and appearance. Chart Types (Parameter cht=) bhs bvs p3 Horizontal bar chart Vertical bar chart A three-dimensional pie chart Data Formats (Parameter chd=) Data for almost all charts is sent using the chd parameter. Basic text-formatted data lets you specify floating point values from 0 100, inclusive, as numbers. Values below zero are marked as missing; values above 100 are truncated to 100. Syntax: chd=t:val,val,val val,val,val... Chart Size (Parameter chs=) All charts require the size to be specified. This parameter determines the total width and height of the chart image, including legends, margins, and titles. Legends, margins, and titles are clipped to fit within the total chart size. Syntax chs=<width>x<height> Standard Features (Parameter chtt=) chtt Chart title (Use a + sign to indicate spaces, and a pipe character ( ) to indicate line breaks.)