Was beduetet Web oder so zu sagen "WWW" ?
World Wide Web
Web Web Web
Web-Seiten (Hypertext-Dokumente) sind...
sind Textdokumente
sind pdf Dateien
sind i.d.R. miteinander verknüpft
sind privat und nicht greifbar
können über ein Netzwerk von Computern abgerufen werden
Web (WWW) ist ein Geflecht von Web-Seiten
Was ist Internet?
ist Menge vernetzter Computer
bietet verschiedene Dienste an, z.B. FTP, DNS, SSH
ist Menge vernetzter Websites / Web-Seiten
bietet das World Wide Web (WWW)
nur einer der Dienste des Internet
Was ist Web?
bietet nur einer der Dienste des Internet
bietet verschiedene Dienste an
Was ist eine Web-Anwendung?
ist ein Anwendungsprogramm
wird über einen web-browser (Firefox,Safari,Chrome usw) aufgerufen, dargestellt und bedient
wird meist auf einem Web-Server (Apache, Microsoft Internet Information Server) gespeichert und auch größtenteils dort ausgeführt.
Menge vernetzter Websites
wird über Internet oder Intranet zugegriffen.
Menge vernetzter Computer
besteht aus Web-Seiten, die in der Sprache HTML geschriben sind
Was beduetet HTML?
Hyper Text Markup Language
Hyper Text Transfer Protocol
Die Kommunikation zwischen dem Web-Browser und dem Web-Server erfolgt i.d.R. mit dem Übertragungsprotokoll
HTML
HTTP
Was beduetet HTTP?
Was wird alles für eine Web-Anwendung benötigt?
Web-Browser
Web-Server
Intranet oder Internet
spezielles Betribessystem
Web-Seiten: HTML, CSS, JavaSkript
eine menge von Protokols
Server-seitiger, code z.B in PHP , JAVA , Javaskript
Welchen HTTP-Statuscode liefert ein Web-Server, wenn die angefragte Ressource nicht vorhanden ist?
Code 404 – Not Found
Code 200 - OK
Code 302 - Found
Code 403 - Forbidden
Merkt sich der Web-Server automatisch den Zustand der Web-Anwendung zwischen mehreren Anfragen (HTTP-Requests) durch den Web-Browser?
Ja
nein
Was beduetet code 500?
Unavailable for Legal Reasons
Internal Server Error
Grundlage für die Web-Seiten, für die Text Dokumente sind
Mit Programm Notepad, Bracelets usw erstellen
müssen durch spezifische Sprache erstellt wertden: HTML
müssen mit License gekauft werden
Der Grad des Nutzens wird als "Utility" bezeichnet.
In der Phase Inhalt und Funktionen werden
somit die für den Benutzer brauchbaren Funktionalitäten festgelegt.
verschiedene Analysen geklärt
In User-Interface Konzeption Phase wird
Informationsarchitekturdesign geklärt (Aufbau der Seite)
Ziele geklärt (Welche Ziele müssen wir erreichen, gibts Kompetitors?)
Interaktionsdesign ( was Benutzer auf der Seite durchführen kann)
Analyse durchführen (Zeit, Finanzen)
Seitengestaltung (Welche Farbe?Welche Schriftgrösse?)
Ein einfacher Prototyp, der lediglich die Darstellungsmöglichkeiten illustriert, heißt
Wire Frames.
Mockup.
Prototyp und Evaluation
Beginnt, wenn die Architektur vollständig entwickelt und Fragen hinsichtlich der Seitengestaltung beantwortet sind
Beginnt, wenn die Architektur nicht entwickelt wird
Die ersten Prototypen können bzw. müssen ohne viel Aufwand entstehen und anschließend direkt evaluiert werden. Man nennt diese Prototypen auch
Mocups.
Es gibt zwei verschiedene Mocups: Papier-Mockups und Computer-basierte Mockups
Grafisches Design
Sollte gleich begonnen werden
Sollte erst begonnen werden, wenn keine großen Änderungen mehr zu erwarten sind.
Implementierung besteht aus
Erstellung der Mocups
grafischem Aufbau der Seite mit Hilfe von HTML Elementen
Analyse durchführungs Phase
Anbindung an Datenbanken
direkter Programmierung komplexer Funktionen
Publikation - Veröffentlichung auf einem Web-Server
Richtige Folge für Web Usability Engineering folgende 7 Phasen ist...
Analyse, Inhalt und Funktionen, User-Interface Konzeption, Prototyp und Evaluation, Grafisches Design, Implementierung, Publikation
Analyse, User-Interface Konzeption, Inhalt und Funktionen, Prototyp und Evaluation, Grafisches Design, Implementierung, Publikation
Was bedeuten die Angaben in spitzen Klammern <> ?
Dabei handelt es sich um sogenannte Tags (Etiketten oder Auszeichnungen)
Dabei handelt es sich um sogenannte Befehle
Dazu muss jedem Start Tag <Tag> ein schließendes Tag
</Tag> folgen
<Tag>
Angabe des Dokumenttyps bezeichnet man mit
<!DOCTYPE html>
</html>
<body>
<head>...</head> definiert...
den sichtbaren Seiteninhalt
Zusatzinformationen zur Web-Seite, z.B. den Titel
<body>...</body> definiert...
<html>...</html> definiert Paarweise Verwendung von Elementen (Tags)
Inhalt von Elementen definiert
<title>Titel des Dokuments</title>
<html lang="de">
<html>...</html>
Attribute von Elementen definiert
Kommentare werden im Browser nicht angezeigt
HTML-Kopf: <title>
definiert den Titel der Seite.
definiert lnhalte der Seite.
muss in allen HTML/XHTML-Dokumenten angegeben werden.
wird angezeigt: in der Titelleiste des Browsers. in Favoritenlisten, in Suchergebnissen von Suchmaschinen
Kopfdaten: <meta>
Definiert Metadaten, die nicht direkt im Browser angezeigt werden.
sind zur maschinellen Verarbeitung (durch Rechner / Dienste) gedacht, z.B. für Suchmaschinen, zur Unterstützung der Barrierefreiheit
Mit <meta> definiert man diverse Informationen über das HTML-Dokument, insbesondere den Zeichensatz
Zeichensatz
übersetzt Zeichen in Zahlenwerte.
übersetzt die Zahlenwerte eines Zeichensatzes in eine binäre Kodierung.
Zeichenkodierung
übersetzt Zeichen in Zahlenwerte
In HTML5
<meta charset="UTF-8">
<meta http-equiv="Content-Type"content="text/html;charset=ISO-8859-1">
In HTML4
ASCII
American Standard Code for Information Interchange
Standardzeichensatz unter Windows bis Version Windows 95
Erweiterung von ASCII um internationale Zeichen wie Umlaute
ist eine Kodierung des Unicode Zeichensatzes
UTF-8 (UTF = Unicode Transformation Format) 1
ist eine Kodierung des Unicode Zeichensatzes, ist Standardzeichensatz ab HTML5
ISO-8859-1
Ist in den Werten 0 bis 127 identisch zu ASCII
256 Zeichen
Standardzeichensatz für HTML 4
Ist bei Web-Seiten inzwischen einen Alias für Windows-1252.
UTF-8 (UTF = Unicode Transformation Format) 1 ist Standardzeichensatz ab HTML5 und sollte daher auch vorzugsweise verwendet werden!!!
Kopfdaten: <meta> definiert vielfältige weitere Metadaten, wie z.B.
Seitenbeschreibung (page description)
Autor (author)
übersetzt die Zahlenwerte
Datum der letzten Änderung (last modified)
Schlüsselwörter (keywords)
übersetzt Zeichen
Autor der Web-Seite angeben
<meta name="author" content="Ljudmila Bobir">
<meta name="description" lang="en"content="page about Forests in Germany">
Beschreibung der Web-Seite angeben
<meta name="description" lang="en"content="page about forests in germany">
<meta http-equiv="refresh" content="30">
Web-Seite alle 30 Sekunden automatisch neu laden
Zeichenkodierung, wie bereits gesehen, definieren
content definiert den Wert für die Attribute http-equiv bzw. name.
name steht für werte
keywords
author
utf8
sprachcode
generator
description
application-name
lang steht für (Sprachcode) steht für Sprache des Textes im Feld value.
http-equiv Definiert für den Wert aus dem Attribut content Kopffelder (header fields) einer entsprechenden HTTP-Antwort (response).
content-type definiert
Zeichenkodierung des Dokuments: <meta http-equiv="content-type"content="text/html; charset=UTF-8">
das bevorzugt zu verwendende Style Sheet: <meta http-equiv="default-style"content="bevorzugtes stylesheet">
Intervall in dem das Dokument aktualisiert wird.
default-style definiert
Zeichenkodierung des Dokuments:• <meta http-equiv="content-type"content="text/html; charset=UTF-8">
das bevorzugt zu verwendende Style Sheet: • <meta http-equiv="default-style"content="bevorzugtes stylesheet">
refresh definiert
das bevorzugt zu verwendende Style Sheet:• <meta http-equiv="default-style"content="bevorzugtes stylesheet">
Attribute von HTML-Elementen
definieren zusätzliche Eigenschaften für ein Element. z.B. den Zeichensatz durch das Element <meta>
Definiert Zeichenkodierung des Dokuments:
werden immer im öffnenden Tag definiert.
sind definiert als Name-Wert-Paare, d.h.: name="wert"
Bei Attributnamen und -werten wird zwischen Groß- und Kleinschreibung nicht unterschieden.
Attributnamen immer klein schreiben, Attributwerte möglichst klein schreiben.
id
Eindeutige Identifikation des Elements im Dokument
Definiert einen oder mehrere Klassennamen für das Element. Klassen sind in Style Sheets definiert und legen die Darstellung eines Elements fest. (siehe später)
class
Definiert Zusatzinformationen zu einem Element, die häufig in Form eines „Tool Tips“ angezeigt werden
style
Eindeutige Identifikation des Elements im Dokument.
Definiert an Ort und Stelle einen Darstellungsstil (CSS style) für das Element. (siehe später)
title
Definiert Zusatzinformationen zu einem Element, die häufig in Form eines „Tool Tips“ angezeigt werden.
id, class, style - Diese Attribute werden in Zusammenhang mit den Cascading Style Sheets (CSS) verwendet.
Anforderungen an die Dokumentenstruktur
DOCTYPE Deklaration muss vorhanden sein.
Die Elemente <html>, <head>, <title> und <body> sollten vorhanden sein.
CSS
Anforderungen an Elemente
Elemente müssen sauber ineinander geschachtelt werden.
Elemente sollten groß geschrieben werden
Elemente müssen immer abgeschlossen werden. (Ausnahmen gibt es bei leeren Elementen, z.B. <meta>, <br> etc)
werden nicht geschachtelt
Elemente sollten klein geschrieben werden
Anforderungen Attribute
Attributnamen sollten groß geschrieben werden.
Attributnamen sollten klein geschrieben werden.
keine Anführungszeichen
Attributwerte müssen in Anführungszeichen stehen.
Das Minimieren von Attributen ist nicht erwünscht, d.h.
Absätze (Paragraphs)
<p>…</p>
<br>...</br>
break
<br>…</br> erzwingt Zeilenumbruch
  (non-breaking space) erzeugt Leerzeichen, an dem kein Zeilenumbruch stattfindet.
<wbr> ( word break )
kennzeichnet optionalen Zeilenumbruch.
kennzeichnet optionalen Zeilenumbruch mit Trennzeichen "-"
­ ( soft hyphen )
Was ist der Unterschied zwischen Tags: <…> und Entities: &name?
Tags definieren Elemente mit einer bestimmten Bedeutung (Diese können Auswirkungen auf einen größeren Bereich haben)
Entities sind Befehle, die jeweils ein Zeichen darstellen, das ( in HTML ansonsten wegen einer besonderen Bedeutung reserviert ist, z.B. < und > als Begrenzer für Tags und nicht auf der Tastatur vorhanden ist, z.B. das Zeichen für Copyright ©)
Tags sind in CSS
Entities werden nie benutz
Entities sind Befehle, die jeweils ein Zeichen darstellen, dass -in HTML ansonsten wegen einer besonderen Bedeutung reserviert ist, z.B. < und > als Begrenzer für Tags -nicht auf der Tastatur vorhanden ist, z.B. das Zeichen für Copyright ©
Ein Entity-Zeichen wird in einer der beiden folgenden Formen angegeben
&entity_name
&entity_css
&#entity_number
Überschriften (headings)
h1, h2, h3 usw
r1, r2, r3
Querbalken (horizontal rule)
<hr>
<h1>
Geordnete Listen
<ol>
<ul>
Ungeordnete Listen
<li>
definiert einen Listeneintrag (list item)
disc
Ausgefüllter Kreis. Das ist der Standardwert.
Nicht ausgefüllter Kreis
circle
Quadrat
square
Ausgefüllter Kreis.
Ungeordnete Listen: Grafisches Aufzählungszeichen wird definiert durch list-style-image: url('URL')
Tabellen
werden definiert durch <table> und sind unterteilt in
werden definiert durch <hr> und sind unterteilt in
Which of the following tags instructs the browser to expect a well-formed HTML document?
<!DOCTYPE>
<html>
<!DOCTYPE html5>
The following HTML code should only exist within which one of the following tags?
<title>Codecademy</title>
<head>
All HTML code must be nested within which of the following tags
The contents of the <title> tag will appear where in a modern browser?
the first line og the web page
The browsers tab or tittle bar
it does not appear anywhere
Which of the following tags contains metadata about the webpage?
<hmtl>
<title>
Which of the following is the current HTML standard?
HMTL1
XHTML
HTML5
Which of the following tags would contain the HTML for a web page's visible content?
Why should the document type declaration be included in all HTML documents?
without it, any html code is invalid
to specify the HTML standrad being used in the document
The <style> element
allows you to write CSS code within an HTML file.
allows you to write a html text
A CSS stylesheet can be linked to an HTML file using the <link> element, which requires three attributes
href - set equal to the path of the CSS file.
link - to connect to sheets
type - set equal to text/css.
rel - set equal to stylesheet.
list-style
Legt alle Eigenschaften für eine Liste in einer Deklaration fest
Legt ein Bild als Aufzählungs-/Nummerierungszeichen fest.
Legt fest, ob die Aufzählungs-/Nummerierungszeichen innerhalb oder außerhalb des Textflusses der Liste erscheinen sollen.
Legt den Typ der Aufzählungs-/Nummerierungszeichen fest.
list-style-image
Legt alle Eigenschaften für eine Liste in einer Deklaration fest.
list-style-position
Legt ein Bild als Aufzählungs-/Nummerierungszeichen fest
list-style-type
Legt fest, ob die Aufzählungs-/Nummerierungszeichen innerhalb oder außerhalb des Textflusses der Liste erscheinen sollen
