Einführung in Webdesign, HTML und Dreamweaver 1. Die Geschichte des Internet internetinterconnected...

Einführung in Webdesign, HTML und Dreamweaver

1. Die Geschichte des Internet

internet interconnected networks

„netz der verbundenen netze“

www world wide web

(bekannteste und populärste Teil des internet)


1. Die Geschichte des Internet - der Ursprung APRANET

60er Jahre USA vernetzt ihre militärischen Computer, damit bei Zerstörungeiniger der Computer bei einem Angriff die restlichen Computer trotzdem einen Gegenangriff starten und steuern können

1969 ARPA (advanced research project agency) wird gegründetAPRANET entsteht mit heterogenen Netzstrukturen

• die einzelnen Rechner sind sowohl mit Standleitungen als auch via Telefon verbunden

• das Telefonnetz erlaubt eine Vielzahl von Verbindungswegen über unterschiedliche Stationen und Ämter

• Automatisierung der bisherigen Telefonstationen und Ämter zu sogenannten Routern oder Relaystationen



Die Kommunikation zwischen den einzelnen Computern ermöglichte ein an den Computer und das Telefonnetz angeschlossenes

Modem = modulation and demodulation

= Umwandlung von digitalen Computersignalen in analoge Impulse durch Akustikkoppler

Das Updaten und Abgleichen der Daten fand damals noch offline statt.

offline verpackt in Packete werden übermittelt und dann beim Empfänger ohne direkte Verbindung ins Netz zusammengesetzt

online Aufbau und Halten einer Verbindung mit direkte Verwertung der Daten



1972/73 Definition des Übertragungsprotokoll TCP/IP löst die Probleme durch die verschiedenen angeschlossenen Rechnerarten und Übertragungsmöglichkeiten

IP für konkrete Wegsuche

TCP für Übertragungssicherheit

--> man konnte also jegliche Rechnertypen miteinander verbinden

telnet ermöglicht erste online-Zugriffe im internet, indem mit eignenem Befehlssatz auf entfernete Computer zugriffen werden konnte

ftp (file-transfer-protokoll) spezielles Protokoll zur Datenversendung auf andere Rechner funktioniert mit eigenem, erweitetem Befehlssatz (benötigt eigene Programme wie wsftp, ist aber z.B. auch schon bei Dreamweaver integriert)



1970 Die Zahl der Rechnersysteme wächst, die im Rahmen von APRANET zusammengeschlossen werden, erste Unis werden angeschlossen

1972 schon 50 Unis im Netz

1983 das Internet wurde immer größer, also formt das Militär sein eigenesNetz, das MILNETzivile Teil wurde fortan als internet bezeichnet

Die Zahl der Anwender des Internet, meist noch Wissenschaftler undForschungseinrichtungen, steigt kontinuierlich.


1. Die Geschichte des Internet - Probleme des APRANET

durch die Vielzahl der zivilen User, die nicht unbedingt EDV-Fachleute waren, entstanden Probleme

• durch die komplexen Befehlssätze der bisherigen Internetienste

• durch die komplexe Adressierung der einzelnen Rechner,

• da das APRANET auf UNIX basierte und größtenteils nur UNIX- Befehle verarbeiten konnte

--> Ende der 80er Jahre versuchte man also das Internet mit einer einfachen Bedienoberfläch mit einfacher Übertragung von Daten und einfacher Navigation Neuzugestalten.


1. Die Geschichte des Internet - das WWW

1989 entsteht im Kernforschungszentrum CERN in Genf das Projekt zurLösung dieser ProblemeTim Berners-Lee präsentiert ein neuem Protokoll fürs Internet,welches auch grafische Oberflächen ermöglicht.Texten werden durch Querverweise (Hyperlinks) neueFunktionlitäten zugewiesen, d.h beim Anklicken wird automatischein vorher bestimmter Rechner angewählt

Es entsteht also das

http (HYPER TEXT TRANSPORT PROTOKOLL) mit

HTML (hypertext markup lnguage) als Dokumentenbeschreibungssprache(reine Dokumentenbeschreibsprache, keine Programmiersprache)

Die jeweiligen Informationen bekamen also durch HTML logische Strukturen aus reinem Text, Farbangaben, Kapiteln, Absätzen, Tabellen und dem Einbinden von Grafiken, später mit dem Einbinden von Multimedia



Da eine HTML-Datei aus reinem Klartext besteht, braucht man eine Software,die diese Daten interpretiert und auf dem Bildschirm darstellt. (Browser)

Gerade dieses System macht HTML plattformunabhängig, es kann mit dem entsprechendem Interpreter also unter windows, mac, unix usw. dargestellt werden.

Das www (WORLD WIDE WEB) entsteht.HTML und http sind also speziell fürs www und umgekehrtbasiert das www auf HTML und http.



• Was als einfache Austauschplattform wissenschaftlicher Daten gedacht war, wurde zum Kommunikations- und Unterhaltungsmedium der Allgemeinheit.

• Das www ist heute das größte, globale Netzzwerk der Welt

• weltweit haben Millionen von Rechnern permanent oder temporär Zugang zum www

• Es gibt keine Beschränkung der maximalen Ausdehung des www

• w3c (world wide web consortium) ist verantwortlich für die Standarts im web und HTML


1. Die Geschichte des Internet - die Adressierung

Die Datenblöcke werden über das Protokoll TCP/IP über spezielle Router (server mit Adressinformationen und weiterleitungsfähigkeit) vom Sender zum Empfänger transportiert.

IP Adressierung

basierte auf einem vier byte langem Rechnernamen des angewähltenComputers, was natürlich für den User ein nicht transparentes System darstellte.

ein byte = 256 verschiedene zeichen binär darstelt (2 hoch 8 = 256)

--> in jedem der vier byte eine Zahl von 0 bis 255

jeder byte wird durch einen Punkt getrennt

also z.b. 123.210.222.123



Es mußte also ein neues, leichter verständliches und leichter zu merkendes Adressierungskonzept geschaffen werden

Das DNS Konzept (Domain-Name-Konzept)

ordnet der IP-Adresse zusätzlich noch einen eindeutigen Namen zu.

server. underdomain.top level domain

Vergabe von Namen durch interNIC

in Deutschland durch die de-NIC



Top level domains USA

.com Rechner kommerzieller Unternehmen

.edu Rechner von Ausbildungsorganisationen

.gov Regierungsrechner

.mil militärische Computer

.net Rechner von Organisationen mit eignenem Netzwerk

.org Rechner von nichtkommerziellen Organisationen



Top level domains International

.at Österreich

.be Belgien

.de Deutschland

.nl Niederlande

.uk Großbritennien

.us USA



Die gesamte Adressierung im internet und www erfolgt also heutzutage durch die

URL (uniform resource locator) ein „einheitiches Adressierungsschema“

Angabe des Protokolls der SeiteAngabe des Ports/Kanals (meist nicht nötig)

1. Angabe des Dienstprotokolls (http fürs www) gefolgt von einem Doppelpunkt

2. Doppelslash //, bei emaildienst mailto

3. Angabe des hosts (z.b: www) und der verschiedenen domains bei mail dan name @ und die domains, getrennt durch Punkte

4. Durch / dann der entsprechende Unterpfad/ das entspr. Dokument


2. Webdesign - Techniken der Webprogrammierung

Dokumentenbeschreibungssprachen und Programmierungssprachen

HTML, java, javascript, ccs, cgi, vbscript, xml, vrml, etc.

im www geht nichts ohne HTML

alle anderen Techniken verankern sich im HTML



Das internet ist heterogen !!!

Das heißt HTML braucht einen Interpreter (Browser), der die Dateiunabhängig der benutzen Rechnerplattform versteht und darstellt.

Vorteile durch die Interpretation:

• Anweisen werden auf jeder Plattform verstanden

• die Menge und das Volumen der zu übertragenden Daten ist minimal, da Funktionalität nicht übertragen werden muss

• Wartung, Updaten und Ändern ist erheblich einfacher



Nachteile durch die Interpretation:

• Interpreter veralten schnell, es gibt also diverse Versionen und Programme, die zur Zeit benutzt werden

• Befehle und Anweisungen sind im Quellcode leicht lesbar

• im Hinblick auf die Gestaltung ist ein einheitlicher Look nicht garantierbar, da Interpreter unterschiedlich konfigiguriert sein können und die Bildschirmdarstellung je nach Rechner und Einstellungen mit anderen Farben und Auflösung geschieht.


2. Webdesign - Grundregeln des Webdesigns

Die Gestaltung, Gliederung und Umsetzung sollte folgende Punkte berücksichtigen und erfüllen:

• das visuelle Design die Gestaltung des Sichtbaren und der Botschaft

• das Interface Design Gestaltung der Benutzeroberfläche und der Interaktionen Gestaltung der Navigation

• das Site Design das globale Design und die Gesamtsruktur der kompletten Seite, die Logik und Hierachie untereinander und die Anordnung der einzelnen Elemente

• das konkrete Page Design - die Gestaltung jeder einzelnen Seite des Projektes



Dabei sollte man sich über folgendes im Klaren sein:

• die geplante Aussage und die potentielle Zielgruppe

• die zu verwendenen Techniken

• das Layout

• die Struktur

• die Wartbarkeit

• die spätere Bekanntmachung



Grundregeln

• einheitliches Corporate Identity

• übersichtliche und transparente Struktur

• Zielgruppenspezifisch arbeiten

• keine Einbahnstrassen und Sackgassen schaffen (Links setzen !!!)

• Mehrwert bieten

• Aktualisieren

• „weniger ist mehr“

• Alternativen bieten

• „arbeiten Sie so rückständig wie möglich“ (größtmögliche Browserkompatibilität)



Um die Plattformunabhängigkeit von HTML zu bewahren, werden beim Webdesign folgende Formate verwendet:

• Dateien müßen mit .html oder .htm enden (in einigen Fällen auch .shtml)

• Grafiken werden als gifs oder jpgs eingebettet

• alle Dokumente und eingebettete Bestandteile nur mit Kleinbuchstaben und ohne Sonderzeichen (ä,ö,ü,ß, etc.) benennen und Leerzeichen durch einen Unterstrich _ ersetzen

• alle Hyperlinks und Quelldateien kontrollieren (absolute oder relative Pfadangaben kontrollieren und berichtigen)

• möglichst mit prozentualen Ausrichtungs-Angaben arbeiten, um den versch. Auflösungen gerecht zu werden

• auf verschiedenen Browsern Vorschauen erstellen und die Darstellung kontrollieren


2. Webdesign - Hilfsmittel des Webdesigns

Es gibt natürlich unzählige Möglichkeiten und Programme, eine HTML-Datei zu erzeugen. Grundsätzlich unterscheidet man zwei Arten:

• textbasierte Editoren (hardcore programming) wie z.B. Mit dem Editor im Zubehör jedes Windows-Systems

• mit Hilfe von Programmen (tools)

.


2. Webdesign - Hilfsmittel des Webdesigns

Vor- und Nachteile beider Techniken

Textbasierte Editoren sind zwar kostengünstig und ermöglichen ein sauberes und von der Datengröße minimales Arbeiten, bedeuten aber sehr viel Schreibarbeit. Fehler und Bugs sind leicht und schnell zu beheben, da man die Datei und Struktur kennt.

Hilfsprogramme nehmen zwar die Schreibarbeit ab, kosten aber natürlich ihren Preis, und schreiben sehr unübersichtliches HTML in große Dateien. Auch kann man Fehler und Bugs schlechter finden, da man die Struktur des Quelltextes nicht kennt.

Dennoch eignen sich Hilfsprogramme für die meisten Webanwendungen undermöglichen recht komfortaböes Webdesign.Wenn die Bugs nicht wären....


2. Webdesign - kurze Einführung in HTML

Grundbegriffe

tags beginnen mit < und enden mit >enthalten Anweisungen <anweisung>

Einführung in Webdesign, HTML und Dreamweaver 1. Die Geschichte des Internet internetinterconnected...

Documents

Transcript of Einführung in Webdesign, HTML und Dreamweaver 1. Die Geschichte des Internet internetinterconnected...