Grundlage von Web 2.0 sind aktive Benutzer und User Generated Content. Ausgehend von der Art des Inhaltes, welcher den Schwerpunkt von Web 2.0 Plattformen bildet, können Inhalts- oder beziehungsorientierte Web 2.0 Plattformen sowie virtuelle Welten unterschieden werden.
Folgend einige Web 2.0 Begriffe:
| Wiki(pedia) |
RSS |
Document Object Model (DOM)
|
| CSS |
AJAX |
JavaScript
|
| HTML |
Mobile Endgeräte |
Web
|
| User Generated Content |
Web Services |
Communities
|
| Weblog |
XING |
Twitter
|
| Google Docs |
Flickr |
Folksonomy
|
| PHP |
Cookies |
XMLHttpRequest
|
| API |
Abonnementdienste |
Technologien
|
| Semantisches Web |
podcast |
Begriffsnetz
|
|
Auftrag |
Richtzeit
|
| ☐ |
Markieren Sie die Begriffe in der Tabelle die Sie einer anderen Person erklären können mit einem Grünen Hintergrund. Markieren Sie die Begriffe die Sie nicht kennen oder verstanden haben mit einem Gelben Hintergrund. |
20 Min.
|
| ☐ |
Erarbeiten Sie nun die Erklärung der Begriffe welche Sie nicht kennen. Sie können in den Unterlagen (Lehrmittel, Notizen, Internet, etc.) nachschlagen. |
25 Min.
|
| ☐ |
Erstellen Sie während dem Projekt ein Lexikon mit Begriffe die Sie erforschen. |
|
Backend bereitstellen (SQL + PHP > TXT/HTML)
Bearbeiten
In einem ersten Schritt werden die Daten aus der Datenbank ausgelesen und mittels HTML angezeigt.
|
Auftrag |
Richtzeit
|
| ☐ |
Erstellen Sie das vorgegebene Datenmodell mittels phpMyAdmin in der Datenbank citation |
10 Min.
|
| ☐ |
Suchen Sie im Internet nach Zitate und Sprichwörtern, welche Ihnen gefallen. Schauen Sie z.B. auf http://zitate.net nach |
10 Min.
|
| ☐ |
Erstellen Sie bis zu 10 Einträge in der Tabelle citation. Achten Sie dabei auf die Eindeutigkeit der Zitate und Sprichwörtern. Als Datum für die Attribute created / updated verwenden Sie NOW(). |
10 Min.
|
| ☐ |
Notieren Sie sich die SQL Syntax um Datensätze einzufügen. INSERT … |
2 Min.
|
| ☐ |
Wie fügt man beim erstellen der Datensätze einen automatischen (Jetzt) Zeitstempel hinzu? |
3 Min.
|
| ☐ |
Optimieren Sie das Datenmodell (Don't Make Me Think). Sorgen Sie dafür dass Zitate und Sprichwörtern vom selben Autor nur einmal eingetragen werden können (UNIQUE). Notieren Sie sich die entsprechende SQL Syntax. |
5 Min.
|
| ☐ |
Exportieren Sie das neue Datenmodell über phpMyAdmin. Speichern Sie das Datenmodell in der SQL Syntax. Zeigen Sie die Änderungen auf. |
5 Min.
|
|
Aufgabe/Tätigkeit |
Richtzeit
|
| ☐ |
Erstellen Sie einen Datenbank Benutzer quotout mit Passwort qu0t_. Nur vom lokalen Host sollte der Zugriff erlaubt sein. Folgende Rechte werden benötigt: SELECT, INSERT, UPDATE, DELETE Aktualisieren Sie die Benutzerprofile bevor Sie fortfahren. |
10 Min
|
| ☐ |
Erstellen Sie die Einstiegsseite (index.php). Setzen Sie dabei das Basic HTML5 Template ein. Erstellen Sie die zugehörige CSS und JavaScript Dateien: css/styles.css und js/scripts.js |
5 Min
|
| ☐ |
Erweitern Sie die Einstiegsseite (index.php) mit einem PHP Script, welches ein zufälliger Datensatz aus der Tabelle citation ausliest und ausgibt. |
20 Min
|
| ☐ |
Erstellen Sie ein Struktogramm oder Flussdiagramm des PHP Script in der Einstiegsseite. Verwenden Sie Pseudocode zu Beschreibung. |
10 Min
|
- Im body der Einstiegsseite fügen wir durch
<?php und ?> ein PHP Quellcode ein. Lesen Sie dazu die PHP Grundlagen nach.
- Wir erstellen eine Verbindung zur Datenbank (
mysqli_connect)
- Wir prüfen ob die Verbindung erfolgreich war, ansonsten melden wir einen Fehler an den Betrachter.
- Wir führen eine SQL Abfrage mit
SELECT durch (mysqli_query). Falls keine Ergebnisse geliefert werden, melden wir einen Fehler dem Betrachter.
- Geben Sie das Zitat und dessen Autor aus (
fetch_object / fetch_array).
- Wir trennen die Verbindung zur Datenbank (
mysqli_close).
Frontend bereitstellen (JSON > JS + HTML)
Bearbeiten
Das zufällige Zitat soll in einem Intervall die Seite automatisch neu laden um ein neues Zitat anzuzeigen. Dabei setzen wir Javascript und das Datenaustauschformat JSON ein.
|
Aufgabe / Tätigkeit |
Richtzeit
|
| ☐ |
Erstellen Sie eine Kopie der Einstiegsseite (cp index.php data.php). Entfernen Sie den gesamten HTML Quellcode. Das neue Script wird zur Ausgabe das Format application/json einsetzen. header('Content-Type: application/json; charset=utf-8'); |
25 Min
|
| ☐ |
Ändern Sie das data.php Script, sodass bei einem Fehler den Wert -1 zurückgegeben wird. Die Anwendung sollte entweder -1 zurückgeben oder ein Zufallszitat zurückliefern |
5 Min
|
| ☐ |
Ändern Sie das data.php Script, sodass der zufälliger Datensatz im JSON Format ausgegeben wird (print json_encode($object);). Beim öffnen des Scripts über den Browser sollte die Ausgabe ähnlich aussehen: {"ID":"20","quote":"Informationen werden nicht wertvoller, wenn man sie einsperrt. Sie werden wertvoller, wenn man sie teilt.","author":"Michael Seemann"} |
15 Min
|
|
Aufgabe/Tätigkeit |
Richtzeit
|
| ☐ |
Öffnen Sie die Datei js/scripts.js |
2 Min
|
| ☐ |
Wir möchte durch Einsatz der jQuery Bibliothek die JSON Daten abfragen (jQuery.getJSON()) und in einem Intervall von 5 Sekunden aktualisieren (setInterval()). Suchen Sie nach entsprechenden Ressourcen um diese Herausforderung zu erfüllen. |
40 Min
|
| ☐ |
Vergessen Sie nicht die jQuery Bibliothek in der Einstiegsseite einzubinden. Bedenken Sie Netzausfälle (CDN). http://jquery.com/download/ |
3 Min
|
Wir haben die Anforderungen schrittweise umgesetzt. Nun sollten wir die Umsetzung überprüfen.
Aufgabe: Testfälle / User Stories festlegen
Bearbeiten
|
Aufgabe / Tätigkeit |
Richtzeit
|
| ☐ |
Erstellen Sie 4 sinnvolle und konkrete User Stories für Ihre Anwendung. Beachten Sie folgende Anforderungen: UTF-8 Zeichenkodierung (ä, ö, ü) / Eindeutige Zitate eines Autors |
25 Min
|
| ☐ |
Erstellen Sie ein Akzeptanz Fragenkatalog. Identifizieren Sie die Schlüsselwörter in den User Stories. Setzen Sie die Schlüsselwörter in den W-Fragenmuster ein. Beantworten Sie die entstandene Fragen im Team. Fassen Sie Ihre Entscheidungen als konkrete Akzeptanzkriterien zusammen. |
90 Min
|
| ☐ |
Erstellen Sie 3 Testfälle die dem angegebenen Muster entsprechen. |
20 Min
|
- Vorbedingung
- Auszuführende Testschritt
- Erwartetes Ergebnis
- Nachbedingung
- Verwendete Testdaten
|
Aufgabe/Tätigkeit |
Richtzeit
|
| ☐ |
Erstellen Sie ein Testprotokoll unter Verwendung der Testfälle |
45 Min
|
Beantworten Sie folgende Fragen:
- Welche Testfälle wurden erfolgreich bestanden?
- Welche Fehler hat die realisierte Anwendung?
- Berechnen Sie die Anzahl erfolgreicher Tests in % aus.
- Was fällt Ihnen sonst noch auf?
- Ist es Sinnvoll das Sie als Entwickler die Anwendung prüfen?
In Abhängigkeit der Umsetzung sind womöglich beim Testen Fehler aufgetaucht. Wir beheben die Bekannteste :)
Auftrag: Mögliche Fehlerquellen überprüfen
Bearbeiten
Korrigieren Sie mögliche Fehlerquellen und führen Sie das Testprotokoll nach.
|
Aufgabe/Tätigkeit |
Richtzeit
|
| ☐ |
SQL Abfrage sollte die UTF-8 Zeichenkodierungen berücksichtigen (mysqli_set_charset). |
5 Min
|
| ☐ |
Bei öffnen der Einstiegsseite sollte sofort ein Zitat ersichtlich sein. Verwenden Sie eine eigene Funktion um die Daten via JSON zu laden. |
10 Min
|
|
Aufgabe/Tätigkeit |
Richtzeit
|
| ☐ |
Optimieren Sie die getätigten Abfragen. Erstellen Sie einen Index für die verwendeten Spalten in der SQL Abfrage. Notieren Sie sich die entsprechende SQL Syntax. Wie können Sie die Optimierung belegen bzw. bestätigen? |
15 Min
|
Öffnen Sie die Datei css/styles.css. Legen Sie für die Anwendung folgende Eigenschaften fest.
- Farben für Text und Hintergrund. Achten Sie auf den Kontrast
- Schriftart mit Serifen
- Schriftgrösse des Autors ist 15% kleiner als die Schriftgrösse des Zitats
Änderungen akzeptieren und nachvollziehen
Bearbeiten
Softwareanforderungen sind ein Kommunikationsproblem. Diejenigen, die die neue Software wollen (entweder um sie einzusetzen oder zu verkaufen), müssen mit denen, die sie programmieren werden, kommunizieren.Wenn User erste Versionen der Software sehen, kommen ihnen neue Ideen und ihre Meinungen ändern sich.
Aufgabe: git Versionsverwaltung einführen
Bearbeiten
|
Aufgabe/Tätigkeit |
Richtzeit
|
| ☐ |
Sichern Sie Ihre bestehende Lösung in einem lokalen git Repository |
15 Min
|
|
Aufgabe/Tätigkeit |
Richtzeit
|
| ☐ |
Benutzer vertauschen die Informationen Vor- und Nachname … Aus diesem Grund (User Driven) soll das Feld aufgeteilt werden. Welche Konsequenz bewirkt diesen Änderungsantrag auf die umgesetzte Lösung? Welche Vorgehensweise bzw. Schritte planen Sie zur Umsetzung? |
15 Min
|
| ☐ |
Führen Sie die benötigten Änderungen am Quellcode durch um die neue Anforderung bezüglich Autorenfelder zu erfüllen. Dokumentieren Sie Ihre Vorgehensweise. |
30 Min
|
|
Aufgabe/Tätigkeit |
Richtzeit
|
| ☐ |
Der Produktbesitzer wünscht sich eine Statistik über die Anzahl der Ansichten (Hits) eines Zitats. Welche Änderung bewirkt diesen Antrag auf Ihre Lösung? |
10 Min
|
| ☐ |
Führen Sie die benötigten Änderungen um Statistiken zu führen am Quellcode durch. Dokumentieren Sie Ihre Vorgehensweise. |
20 Min
|
Folgend einige Begriffe aus dem Projekt zitat.json:
| Auswahl 1 |
Auswahl 2 |
Auswahl 3 |
Auswahl 4
|
| Quellcode |
Variable |
{} |
Struktogramm
|
| Web Server |
while |
Anweisung |
Prozess
|
| Datentyp |
Fremdschlüssel |
INDEX |
JSON
|
$ |
ASCII |
UTF-8 |
padding
|
UNIQUE |
varchar(255) |
SCRUM |
PHP
|
INSERT |
Datenbank |
<a> |
Internet
|
| HTML |
Programm |
Syntax |
setInterval
|
alert |
class |
print |
ERD
|
| Respekt |
Qualität |
Einfachheit |
Feedback
|
| Variation |
Tue |
Abhängigkeiten |
Versprechen
|
| GTD |
VQ |
EU |
KM
|
|
Aufgabe
|
| ☐ |
Markieren Sie die Begriffe in der Tabelle die Sie einer anderen Person erklären können mit einem Grünen Hintergrund. Markieren Sie die Begriffe die Sie nicht kennen oder verstanden haben mit einem Gelben Hintergrund.
|
| ☐ |
Ergänzen Sie die Liste mit weiteren 4 Begriffen die Sie kennen in diesem Kontext.
|
| ☐ |
Erarbeiten Sie nun die Erklärung der Begriffe welche Sie nicht kennen. Sie können in den Unterlagen (Lehrmittel, Notizen, Internet, etc.) nachschlagen.
|
|
Aufgabe
|
| ☐ |
Wählen Sie eine Begriffsspalte (Nummer 1, 2, 3 oder 4) mit Begriffe die Ihnen wichtig erscheinen.
|
| ☐ |
Erarbeiten Sie ein Concept Map zur Veranschaulichung der Begriffe und der Beziehungen dieser Begriffe.
|
