Einführung in Webdesign, HTML und Dreamweaver 1. Die Geschichte des Internet internetinterconnected networks „netz der verbundenen netze“ wwwworld wide.

Präsentation zum Thema: "Einführung in Webdesign, HTML und Dreamweaver 1. Die Geschichte des Internet internetinterconnected networks „netz der verbundenen netze“ wwwworld wide."—  Präsentation transkript:

1 Einführung in Webdesign, HTML und Dreamweaver 1. Die Geschichte des Internet internetinterconnected networks „netz der verbundenen netze“ wwwworld wide web (bekannteste und populärste Teil des internet)

2 Einführung in Webdesign, HTML und Dreamweaver 1. Die Geschichte des Internet - der Ursprung APRANET 60er JahreUSA vernetzt ihre militärischen Computer, damit bei Zerstörung einiger der Computer bei einem Angriff die restlichen Computer trotzdem einen Gegenangriff starten und steuern können 1969 ARPA (advanced research project agency) wird gegründet APRANET 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

3 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. offlineverpackt 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

4 Einführung in Webdesign, HTML und Dreamweaver 1. Die Geschichte des Internet - der Ursprung APRANET 1972/73Definition 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)

5 Einführung in Webdesign, HTML und Dreamweaver 1. Die Geschichte des Internet - der Ursprung APRANET 1970Die 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 eigenes Netz, das MILNET zivile Teil wurde fortan als internet bezeichnet Die Zahl der Anwender des Internet, meist noch Wissenschaftler und Forschungseinrichtungen, steigt kontinuierlich.

6 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.

7 Einführung in Webdesign, HTML und Dreamweaver 1. Die Geschichte des Internet - das WWW 1989 entsteht im Kernforschungszentrum CERN in Genf das Projekt zur Lösung dieser Probleme Tim Berners-Lee präsentiert ein neuem Protokoll fürs Internet, welches auch grafische Oberflächen ermöglicht. Texten werden durch Querverweise (Hyperlinks) neue Funktionlitäten zugewiesen, d.h beim Anklicken wird automatisch ein 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

8 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 umgekehrt basiert das www auf HTML und http.

9 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

10 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ählten Computers, 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

11 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

12 Einführung in Webdesign, HTML und Dreamweaver 1. Die Geschichte des Internet - die Adressierung Top level domains USA.comRechner kommerzieller Unternehmen.eduRechner von Ausbildungsorganisationen.govRegierungsrechner.milmilitärische Computer.netRechner von Organisationen mit eignenem Netzwerk.orgRechner von nichtkommerziellen Organisationen

13 Einführung in Webdesign, HTML und Dreamweaver 1. Die Geschichte des Internet - die Adressierung Top level domains International.atÖsterreich.be Belgien.deDeutschland.nlNiederlande.ukGroßbritennien.usUSA

14 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 Seite Angabe 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

15 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

16 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 Datei unabhä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

17 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.

18 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

19 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

20 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)

21 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

22 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).

23 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 und ermöglichen recht komfortaböes Webdesign. Wenn die Bugs nicht wären....

24 Einführung in Webdesign, HTML und Dreamweaver 2. Webdesign - kurze Einführung in HTML Grundbegriffe tagsbeginnen mit enthalten Anweisungen