einführung in webdesign, html und dreamweaver 1. die geschichte des internet internetinterconnected...
TRANSCRIPT
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)
Einführung in Webdesign, HTML und Dreamweaver
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
Einführung in Webdesign, HTML und Dreamweaver
1. Die Geschichte des Internet - der Ursprung APRANET
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
Einführung in Webdesign, HTML und Dreamweaver
1. Die Geschichte des Internet - der Ursprung APRANET
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)
Einführung in Webdesign, HTML und Dreamweaver
1. Die Geschichte des Internet - der Ursprung APRANET
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.
Einführung in Webdesign, HTML und Dreamweaver
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.
Einführung in Webdesign, HTML und Dreamweaver
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
Einführung in Webdesign, HTML und Dreamweaver
1. Die Geschichte des Internet - das WWW
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.
Einführung in Webdesign, HTML und Dreamweaver
1. Die Geschichte des Internet - das WWW
• 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
Einführung in Webdesign, HTML und Dreamweaver
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
Einführung in Webdesign, HTML und Dreamweaver
1. Die Geschichte des Internet - die Adressierung
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
Einführung in Webdesign, HTML und Dreamweaver
1. Die Geschichte des Internet - die Adressierung
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
Einführung in Webdesign, HTML und Dreamweaver
1. Die Geschichte des Internet - die Adressierung
Top level domains International
.at Österreich
.be Belgien
.de Deutschland
.nl Niederlande
.uk Großbritennien
.us USA
Einführung in Webdesign, HTML und Dreamweaver
1. Die Geschichte des Internet - die Adressierung
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
Einführung in Webdesign, HTML und Dreamweaver
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
Einführung in Webdesign, HTML und Dreamweaver
2. Webdesign - Techniken der Webprogrammierung
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
Einführung in Webdesign, HTML und Dreamweaver
2. Webdesign - Techniken der Webprogrammierung
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.
Einführung in Webdesign, HTML und Dreamweaver
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
Einführung in Webdesign, HTML und Dreamweaver
2. Webdesign - Grundregeln des Webdesigns
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
Einführung in Webdesign, HTML und Dreamweaver
2. Webdesign - Grundregeln des Webdesigns
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)
Einführung in Webdesign, HTML und Dreamweaver
2. Webdesign - Grundregeln des Webdesigns
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
Einführung in Webdesign, HTML und Dreamweaver
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)
.
Einführung in Webdesign, HTML und Dreamweaver
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....