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

Web-Engineering, Web-Anwendungssysteme und Mobile Computing I 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

Baustein Tragweite / Buzzword Bingo

Relevante Standards und Technologien

Wichtige Klassen von Web-Anwendungssystemen

Technologien zur Entwicklung von ubiquitärer Anwendungen

Themen dieses Bausteins - nach Tag

13.02.2014

14.02.2014

15.03.2014

Hypertext Transfer Protocol (HTTP) … the mother of all communication on the World Wide Web … wait - not true anymore!

ISO/OSI vs. TCP/IP Protocol Stack

OS vs. TCP/IP stack
Via: marco.panizza.name

Hypertext Transfer Protocol (HTTP)

Basic Attributes

Basic Workflow

Typical Stakeholder

HTTP Request Message: Overview

HTTP Request Line

GET /index.html HTTP/1.1

Verbs

Requested Resource

The local part of an URL (without fragment identifier)

URIs, Resources and Representations

Concepts

Usage

HTTP Request Header

Example Request

HEAD / HTTP/1.1
User-Agent: curl/7.21.3 (i686-pc-linux-gnu)
Host: google.de
Accept: */*

HTTP Response Example

Tool: cURL

curl(.exe) -X HEAD -v http://google.de

Output

HTTP/1.1 301 Moved Permanently
Location: http://www.google.de/
Content-Type: text/html; charset=UTF-8
Date: Thu, 17 Nov 2011 00:21:37 GMT
Expires: Sat, 17 Dec 2011 00:21:37 GMT
Cache-Control: public, max-age=2592000
Server: gws
Content-Length: 218
X-XSS-Protection: 1; mode=block
X-Frame-Options: SAMEORIGIN

HTTP Response Codes

Important Status Codes

see also: List of HTTP Status Codes

Practice: Deep-Inspection of your Browser Communication

Wireshark Screenshot
Challenge: Use wireshark to analyze what your browser sends and receives.
Limit the network traffic capturing to HTTP communication with the LSoM server.
Review the sent and received HTTP packets and notice, which HTTP header fields your browser creates.

Resources: Web Architecture / HTTP

HTML Wakeup please! :-)

HTML Introduction

HTML is the acronym for HyperText Markup Language

HTML was invented by Tim Berners-Lee in 1991 and is now maintained by the W3C and (since HTML5) the WHATWG.

HTML Markup Basics: Tags

Plain text is annotated with tag elements:

not annotated text <tagname>annotated text</tagname> not annotated text

Tag elements can be used nested:

<ol>
    <li>plain list item</li>
    <li>list item <q>with <span>wrong</q></span> nesting</li>
</ol>

HTML Markup Basics: attributes

Tag elements can be extended by attributes

<tagname attribute1="value1" attribute2="value2">text</tagname>
<a href="http://aksw.org/">AKSW Homepage</a>

Some attributes can be used with all tags, some only with specific tags:

HTML Document Structure

A basic HTML(5) document is structured like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Sample page</title>
  </head>
  <body>
    <h1>Sample page</h1>
    <p>This is a <a href="demo.html">simple</a> sample.</p>
    <!-- this is a comment -->
    </body>
</html>

document = doctype declaration + HTML document (= HTML head + HTML body)

Physical vs. Logical Markup

Physical Markup

Logical / Semantic Markup

Try to avoid physical markup completely!

HTML Entities

Reserved characters must be replaced with character entities

Most important entities

Other enties

List of HTML Character entity references

Specific Tags: h*, p, a

Headings

Headings are defined with the h1 (most important) to h6 (least important) tags.

<h1>Leipzig School of Media<h1>

Paragraphs

<p>A nice little paragraph<p>

Links

AKSW

Specific Tags: div, span

div

div elements are used to structure the page (where no other structure element is suitable)

<div class="conclusion"><p>...</p><p>...</p></div>

span

span elements are used to annotate the text inline (where no other inline element is suitable)

The concert took place in Leipzig.

Practice: HTML Inspection with Firebug or Chrome Developer Tools

Firebug Screenshot
Challenge: Install Firebug for Mozilla Firefox or use the Chrome Developer Tools to inspect the webpage of your choice.
Try to find physical markup and other bad tag or table based layouts.

Practice: Use CSSDesk play around with HTML Tag Elements

CSS Desk Screenshot
Challenge: Use CSSDesk and play around with different HTML tag elements.
This should include: headings, paragraphs, links, lists and logical inline markup.

New HTML5 Features

HTML5 logo
Awesome follow up presentation: http://slides.html5rocks.com/ (made by Google)

HTML Resources

These resource will help you as tutorials, references and on-line tools:

Practice: Apache / PHP / WordPress Installation on your Desktop

Wordpress Screenshot
Challenge: Install the popular blogging system WordPress on your system.
This includes the installation of an apache webserver with PHP module as well as a MySQL database (e.g. the XAMPP distribution)

CSS Cascading Style Sheets

Übung: Wie kann dieses Printmedium im Web umgesetzt werden?

SZ Dummie

CSS Resources

Thank you for your Attention!

My WebID:

This slide deck: