title-from-current-deck
Header graphic, containing LSoM logo and title of the currently show slide

Web-Engineering, Web-Anwendungssysteme und Mobile Computing III Eine Vorlesung mit integrierter Übung im Modul 3
Einführung in Aufbau und Nutzung von Internettechnologien (IT)
des Studienganges
Crossmedia Management

Ziele des Moduls (offiziell)

Internettechnologien bilden die Basis crossmedialer Strategien. Die Studierenden erlernen diese komplexen Technologien und erlangen Kompetenzen zum technischen Design multifunktionaler Web-Systeme und erweitern ihr Wissen über Einsatzmöglichkeiten wichtiger Klassen von Web-Anwendungssystemen. Nach erfolgreichem Abschluss des Moduls kennen die Studierenden die technischen Grundlagen der Internettechnologien. Sie verfügen über Grundwissen im Bereich Softwaretechnologien für Webanwendungen und Mobile Computing. Sie können das Erlernte selbständig anwenden.

2013-09-26_IT-2_Tramp.pdf

Zusammenfassung (offiziell)

Baustein IT 2 vermittelt die Softwaretechnik für die Entwicklung von Web-Applikationen. Im Rahmen des Web-Engineering werden relevante Standards und Technologien vorgestellt. Darüber hinaus werden wichtige Klassen von Web-Anwendungssystemen eingeführt. Dazu zählen insbesondere ECommerce-Systeme, Virtuelle Welten, Lehr- und Lernsysteme. Ein weiterer Schwerpunkt ist die Vorstellung von Technologien zur Entwicklung ubiquitärer Anwendungen wie Apps und Informationssystem für mobile Endgeräte, Tablet-PCs etc.

http://www.leipzigschoolofmedia.de/master-crossmedia-management/module/modul-3-cmm/

Prüfungsleistung Projektarbeit; Bearbeitungszeit: 4 Wochen; Themenausgabe: 15.03.2014; Abgabetermin: 12.04.2014

Themen dieses Bausteins - nach Tag

13.02.2014

14.02.2014

15.03.2014

Projektarbeit: Aufgabe

Im Praktikum soll jede/r Student/in das erlernte Wissen um relevante Standards des Web-Engineerings praktisch anwenden.

Folgende Technologien sollen dabei benutzt werden:

Das Web Projekt soll sich dabei an den Best Practices orientieren, welche wir in der Vorlesung besprochen hatten. Das umfasst u.a. die Trennung von Layout, Inhalt und aktiven Inhalten und die Benutzung von Validatoren. Das Projekt soll sich unterschiedlichen Bildschirmgrößen anpassen und mit einem aktuellem Firefox oder Chrome Browser funktionieren.

Projektarbeit: Abgabe

Es müssen folgende Dokumente bis spätestens 12.04.2014 23:59 abgegeben werden:

  1. Ein ZIP file mit dem gesamten Web Projekt (relative links, damit es überall funktioniert!).
  2. Ein PDF Dokument welche das Web Projekt beschreibt und dabei auf folgende Punkte eingeht: Hintergrund und selbst gestellte Anforderungen, Aufbau und Erläuterungen zu technische Entscheidungen, Arbeitsweise, mögliche Weiterentwicklungen des Web Projektes. Dieses Dokument darf nicht mehr als 8 Seiten im LNCS Stil umfassen (dieser Stil ist Pflicht).

Abgabe erfolgt per mail oder file upload (VornameNachname.zip/.pdf).

Projektarbeit: Themenvorschläge

Ziel der Projektarbeit ist die exemplarische Durchführung eines Web-Projektes mit allen Basis-Facetten. Die Menge des Inhalts ist dabei nebensächlich, wichtig ist der technische Durchstich, also alle Basis Web-Standard einmal angewendet zu haben.

Folgende Inhalte sind umfänglich völlig ausreichend:

The Semantic Web: Concepts

Simple RDF graph

RDF graph of Eric Miller
In: wikipedia

schema.org

schema.org - microdata

schema.org - microdata Beispiel

Wichtige Tags sind itemscope, itemtype und itemprop

<!-- Hinweis: Das itemscope Attribut startet ein neues Subjekt -->
<!-- Hinweis: Mit itemtype wird einem Subjekt eine Klasse zugeordnet -->
<p itemscope itemtype="http://schema.org/Person">
  Guten Tag, mein Name ist
    <!-- Hinweis: Mit itemprop werden Attribute zugeordnet -->
    <span itemprop="name">Sebastian Tramp</span>.
</p>
    

schema.org - microdata Beispiel 2

Beispiel 2 zeigt, wie zusätzlich zu einfachen Literal Werten, ein benannter Link erzeugt wird (copyrightHolder), welcher eine Klasse und einen Namen bekommt.

<article itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="name">Fahnder suchen ...</h1>
  <p itemprop="text">Lorem ipsum dolor sit amet, ...</p>
  <p>
    copyright <span itemprop="copyrightYear">2014</span> by
    <!-- Hinweis: Hier wird ein neues Subjekt angelegt welche
      Objekt von copyrightHolder ist -->
    <span itemprop="copyrightHolder" itemscope
      itemtype="http://schema.org/Organization">
    <!-- Hinweis: Das attribut name bezieht sich jetzt schon
      auf das neue Subjekt -->
    <span itemprop="name">Spiegel</span>
  </span>
  </p>
</article>
    

Magento

Screenshot
1. Präsentation, 2. Installation

Software Engineering

Prinzipien, Methoden und Werkzeugen für die arbeitsteilige, ingenieurmäßige Entwicklung und Anwendung von umfangreichen Softwaresystemen (aus Balzert)

Dabei u.a. folgende Teilaufgaben wichtig:

Anforderungserfassung

Funktionale Anforderungen

Anforderungen welche die Funktionalität oder Dienste eines Produktes beschreiben.

Möglichst genaue Beschreibungen mit vielen Meta-Daten, welche insbesondere W-Fragen beantworten. Anforderungen können auch hierarchisch geordnet sein.

Mögliche Attribute: Nutzerkategorie, Eingabe, Ziel, ... Priorität, Risiko(!)

Achtung: Anforderungen verändern sich ständig, da sich auch das Verständnis für das Projekt ändert.

Nicht-Funktionale Anforderungen

Anforderungen, welche spezielle Funktionen der Software nicht betreffen.

Methode: User Stories

Formalisierte aber trotzdem natürlich-sprachige Anforderungserfassung. Häufige Form:

Als --Rolle-- möchte ich --Ziel/Wunsch--, um --Nutzen--

Als --Besucher der Webseite-- möchte ich --meine Suchbegriffe hervorgehoben haben--, damit --ich mich besser zurecht finde--.

Vorteil: schnelle Erfassung von Anforderungen, gut für erste Phase der Anforderungserfassung.

Methode: Use-Case Beschreibungen

activity_diagram
In: wikipedia
sequence-diagram
In: S.Tramp: Access Delegation

anderes Sequenzdiagramm

Software Engineering: Books

Werkzeug: Issue-Tracking-System

Idee: Anforderungen und konkretes Projekt-Management wird in issues / Fälle geteilt und mit einem issue tracker verwaltet. Unmittelbare Vorteile der Nutzung eines Issue-Trackers:

Freie ITS: Bugzilla, mantis, trac, ...

Kommerzielle ITS / Services: Atlassian, github, ...

Version Control Systems

Software zur Verwaltung von Änderungen am Quellcode eines Software-Projektes.

Einfache Versionen

diffs
In: A Visual Guide to Version Control

Branching

branching
In: A Visual Guide to Version Control

Merging

merging
In: A Visual Guide to Version Control

Conflict

conflict
In: A Visual Guide to Version Control

Tagging

tagging
In: A Visual Guide to Version Control

Centralized VCS: CVS, Subversion, ...

vcs-central
In: git book

Distributed VCS: git, Mercurial, ...

vcs-decentral
In: git book

Software Tests

Continuous Integration und Daily Builds

Vorstufe: Daily Builds (einmal pro nacht)

jQuery Mobile

Resources

Thank you for your Attention!

My WebID:

This slide deck: