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

Zusammenfassung (offiziell)

Der Baustein IT 2 "Web-Enigineering, Web-Anwendungssysteme und Mobile Computing" behandelt die Software-Technik zur Entwicklung von Web-Applikationen. Im Rahmen des "Web-Engineering" werden relevante Standards und Technologien vorgestellt. Darüber hinaus lernen die Studierenden wichtige Klassen von Web-Anwendungssystemen kennen, insbesondere E-Commerce-Systeme, Virtuelle Welten sowie Lehr- und Lernsysteme. Ein weiterer Schwerpunkt ist die Vorstellung von Technologien zur Entwicklung ubiquitärer Anwendungen wie Apps und Informationssysteme 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: 07.03.2013; Abgabetermin: 04.04.2013

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

14.02.2013

15.02.2013

07.03.2013

Hypertext Transfer Protocol (HTTP) ... the mother of all communication on the World Wide Web

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)

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: