Header graphic, containing LSoM logo and title of the currently show slide

Web-Engineering und Web-Anwendungssysteme Eine Vorlesung mit integrierter Übung im Modul 3
Einführung in Aufbau und Nutzung von Web-Technologien (WT)
des Studienganges
Content & Media Engineering

Zusammenfassung (offiziell)

Der Baustein WT 2 vermittelt die Softwaretechnik für die Entwicklung von Web-Applikationen. Im Rahmen des „Web-Engineering“ werden relevante Standards (insbesondere HTML, CSS und Javascript) und Technologien (insbesondere Datenbanken, AJAX, Web-Services) vorgestellt. Darüber hinaus werden wichtige Klassen von Web-Anwendungssystemen eingeführt. Dazu zählen insbesondere E-Commerce-Systeme, Virtuelle Welten, Lehr- und Lernsysteme sowie diverse Online-Services.

http://www.leipzigschoolofmedia.de/master-content-and-media-engineering/module/modul-3-cme/

Themen dieses Bausteins (WT2) - nach Tag

18.11.2011

13.01.2012

09.02.2012

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

ISO/OSI vs. TCP/IP Protocol 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

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 annotated text 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

text
AKSW Homepage

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.

Leipzig School of Media

Paragraphs

A nice little paragraph

Links

AKSW

Specific Tags: div, span

div

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

...

...

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

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

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

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

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)

Thank you for your Attention!

My WebID:

This slide deck: