Tutorials zur Webentwicklung

1.2 Technische Grundlagen & Anforderungen

Sowohl das Erstellen, als auch das Betrachten von HTML5 Dokumenten ist plattform­unabhängig. Egal ob Windows, Mac-OS oder Linux, Sie können theoretisch direkt mit der Arbeit als Web­designer los­legen!

1.2.1 HTML5 Editoren

Zum Erstellen von HTML5 Dokumenten benötigen Sie vorerst lediglich einen Editor. Suchen Sie im Inter­net nach ge­eigneten Editoren und probieren Sie diese aus. Sie werden schnell fest­stellen, dass es eine Menge an frei ver­fügbaren Editoren gibt. Einige sind speziell für das Notieren von Quell­code ent­wickelt und bieten Bequemlich­keiten wie z.B. das Syntax High­lighting oder das auto­matische Ver­voll­ständigen von An­weisungen. Nutzen Sie anfangs ein­fach den Editor, mit dem Sie am besten klar kommen und der Ihnen vorerst am über­sichtlichsten er­scheint.

Frei ver­fügbare Editoren für Windows-Rechner:

• Notepad++ (https://notepad-plus-plus.org/)
• Phase 5 (http://www.phase5.info/)
• SynWrite (http://www.uvviewsoft.com/synwrite/)
• PlainEdit.NET (https://www.gaijin.at/dlplaineditnet.php)
• jEdit (http://jedit.org/index.php?page=features)
• ... und viele mehr!

Frei ver­fügbare Editoren für Mac-OS:

• CotEditor 2.o (http://coteditor.com/)
• Brackets (http://brackets.io/)
• ... und nur wenig kosten­freie mehr!

Frei ver­fügbare Editoren für Linux-Systeme:

• Bluefish (http://bluefish.openoffice.nl/index.html)
• Atom (https://atom.io/)
• Lighttable (http://lighttable.com/)
• Brackets (http://brackets.io/)
• Visual Studio Code (###)
• ... und viele mehr!

Sehen Sie sich auf den ent­sprechenden Web­sites um. Dort finden Sie auch die kosten­losen Down­loads! Einige der genannten Editoren sind auch für ver­schiedene Betriebs­systeme ver­fügbar!

Lassen Sie sich von den zahl­reichen Funktionen der Editoren nicht über­wältigen! Konzentrieren Sie sich auf die grund­legenden Eigen­schaften wie zum Beispiel auf die Projekt-Verwaltung und analysieren Sie das Syntax-Highlighting und die Auto-Ver­vollständigung des Programms!

Beispiel: Atom

Nach der Installation des Editors können Sie das Programm öffnen. Sie gelangen auf die Start­seite. Hier stehen Ihnen diverse Optionen zur Ver­fügung. So können Sie zum Beispiel direkt Erweiterungen über ein komfortables Menü installieren.

Um einen Ordner auf Ihrer Fest­platte als Arbeits­ordner ein­zurichten, wählen Sie einfach den obersten Menü­punkt Open a Project aus. Es öffnet sich der Datei­browser des Betriebs­systems. Wählen Sie den gewünschten Ordner aus und bestätigen Sie mit OK.

Anschließend erscheint der Ordner inkl. aller Unter­ordner und allen ent­haltenen Datein am linken Rand des Editors in Form einer Baum­struktur.

Auf diese Weise können Sie leicht zwischen den Datein eines Projeks wechseln. Rechts daneben befindet sich der eigentliche Arbeits­bereich.

Über File >> New File können Sie ein neues Dokument anlegen. Das Dokument wird im Arbeits­bereich geöffnet. Jetzt können Sie direkt los­legen und HTML5 Code notieren.

1.2.2 Einschub: Dateinamen und Verzeichnisse

Der Umgang mit Datei­namen und Ver­zeichnissen sollte Ihnen ver­traut sein! Im Zusammen­hang mit der Arbeit als Web­entwickler sind allerdings ein paar Regeln zu nennen.

Legen Sie sich für jedes Projekt einen eigenen Arbeits­ordner an und halten Sie sich dabei an die folgenden Konventionen:

• Strukturieren Sie den Arbeits­ordner über­sichtlich!
• Legen Sie durch­dacht die Unter­ordner an und geben Sie diesen sprechende Namen!
• Verschachteln Sie nicht mehr als fünf Ordner!
• Nennen Sie den Ordner der die Bilder der Web­site enthält images!
• Geben Sie den Datei­namen sprechende Namen!
• Benutzen Sie bei der Vergabe von Datei­namen keine Sonder­zeichen, mit Ausnahme von - (Minuszeichen)

Bei den genannten Regeln handelt es sich nur um Empfehlungen! Gewöhnen Sie sich diese jedoch recht­zeitig an. Bei größeren Projekten wird es mühsam später Änderungen vor­zunehmen. Wenn Sie sich an diese Regeln halten, haben Sie stets eine gute Über­sicht über den Inhalt Ihrer Projekte.

Außer­dem bieten sprechende Namen von Verzeichnissen und Datei­namen den Nutzern Ihrer Web­site eine gute Navigations­hilfe, da diese Informationen in der Status­leiste der Browser angezeigt werden!

1.2.3 Wissenwertes über Browser

Zum Betrachten von HTML5 Elementen genügt ein Browser. Ein Browser sollte Bestand­teil eines jeden Betriebs­systems sein und sich bereits auf Ihrem Computer befinden.

Die ver­breitesten Browser sind:

• Firefox
• Internet Explorer
• Edge
• Chromium
• Opera
• Safari

Wie Sie sehen, gibt es zahl­reiche Browser auf dem Markt. Auf den Ersten Blick gibt es kaum Unter­schiede beim Betrachten der Ober­flächen. Diese liegen eher in der Unter­stützung von Medien oder in der Darstellung von Inhalten und spiegeln sich in den Lade­zeiten wieder.

Bei der technischen Um­setzung weisen alle einige Gemeinsam­keiten auf. Als Web­designer sollten Sie diese kennen. Außer­dem sollten Sie die Markt­anteile und die Browser­kompatibilität im Auge behalten.

Die Rendering-Engine

Alle Browser besitzen eine Rendering-Engine. Die Rendering-Engine (Layout-Engine) sorgt für die Dar­stellung der Inhalte auf dem Bild­schirm. Das Rendering-Modul kann standard­mäßig HTML- und XML-Dokumente sowie Bilder dar­stellen.

Firefox ver­wendet die Rendering-Engine Gecko - ein Rendering-Modul von Mozilla. Safari und Chrome ver­wenden die Renderning-Engine WebKit.

Der Parser

Der Parser ist ein Bestand­teil der Rendering-Engine. Bei dem Parser handelt sich um die­jenige Soft­ware, welche die Syntax der HTML Dokumente über­prüft, ver­arbeitet und weiter­leitet. Außer­dem er­stellt der Parser aus der Anordnung und der Ver­schachtelung der Elemente eine Baum­struktur.

Das DOM

Das DOM (Document Object Model) ist die Dar­stellung von HTML Dokumenten in Form einer Baum­struktur. Das DOM bildet die Schnitt­stelle für den Zugriff auf die einzelnen Elemente.

Marktanteile

Als Web­entwickler sollten Sie den Markt­anteil der Browser kennen! Ihre Web­site sollte auf den am häufigsten ge­nutzten Browsern ge­testet und gut dar­gestellt werden!

Auf der Inter­net­seite https://de.statista.com/statistik/daten/studie/157944/umfrage/marktanteile-der-browser-bei-der-internetnutzung-weltweit-seit-2009/ er­halten Sie einen aktuellen Über­blick über die Markt­anteile der Browser. Mit diesem Wissen können Sie ein­schätzen mit welchen Browsern der Groß­teil der Nutzer Ihre Website besuchen wird!

Browserkompatibilität

Unter Browser­kompatibilität versteht man die Darstellung und Nutzung einer Web­seite in ver­schiedenen Web­browsern. [...] Jeder dieser Browser hat seine eigene Darstellung und technische Anforderungen. [...] Jeder Browser hat ganz spezifische Eigen­arten. Häufig sind diese Eigenarten abhängig vom ver­wendeten Betriebs­system oder auch wirtschaftlichen Interessen. Trotz vor­handenem W3C („World Wide Web Consortium„), einem Gremium zur Standardisierung der Techniken die im World Wide Web Ver­wendung finden, werden die Standards oft nicht ein­gehalten. Und auch dort, wo man sich strikt an die bestehenden Spezifikationen hält, muss noch lange nicht das gleiche Ergebnis bei zwei unter­schiedlichen Umsetzungen heraus­kommen. Das liegt daran, dass die Spezifikationen – speziell von CSS – nicht nur „muss“-Regeln ent­halten, Beschreibungen interpretierbar sind und mit wachsender Komplexität immer mehr Stellen ent­stehen, wo einzelne Regeln sich gegen­seitig im Weg stehen. Das W3C ist zudem keine weltweit anerkannte Organisation, so das die Standards zudem von Browser-Anbietern mitunter ignoriert werden, die nach eigenen neuen Technologien suchen, um sich von der Masse abzuheben. [...]

Quelle: https://www.usability-tipps.de/info/index.php/

1.2.4 Das Internet

Beim Internet (WWW) handelt es sich um ein globales Geflecht aus Web­seiten, die über Hyper­links alle mit­einander ver­knüpft sind. Auf diese Weise ent­steht ein riesiges, welt­weites Netz. Die einzelnen Internet­seiten liegen auf Servern und können von dort aus abgerufen werden. Der Weg vom Server auf Ihren Rechner führt über Ihren Provider.

Server

Bei einem Server handelt es sich um einen leistungs­starken Computer. Dieser stellt seine Ressourcen zur Ver­fügung um Daten in einem Netz­werk zu ver­teilen.

Provider

Ein Provider sorgt für einen reibungs­losen Daten­verkehr im Inter­net. Der Provider teilt einem Rechner / Client eine eindeutige Adresse zu. Über diese Adresse kann der Rechner / Client dann im Inter­net ein­deutig identifiziert werden.

Rechner / Client

Den Rechner / Client kann man als End­gerät des Internets be­zeichnen. Ein Rechner / Client löst dabei aller­dings meist die Reaktions­kette des Daten­verkehrs aus. Von einem Rechner / Client wird zum Beispiel eine An­frage zum Ab­rufen einer Internet­seite gestartet. Dieser Request wird über den Provider bis an den ent­sprechenden Server weiter­getragen. Dieser reagiert dann mit dem Ver­senden der Daten.

1.2.5 Dienste und Protokolle

Beim Inter­net handelt es sich eigentlich lediglich um eine technische Struktur, es gibt zahl­reiche Computer und Server die mit­einander ver­knüpft sind. Diese Struktur wird von ver­schiedenen Diensten genutzt, die das Netz zum Leben erwecken.

Dienste

Wenn wir ins Inter­net "gehen" nutzen wir also ver­schiedene Dienste, zum Beispiel:

• FTP zum Übertragen von Datein auf andere Rechner
• E-Mail zum Versenden von elektronischen Briefen
• WWW zum Surfen auf diversen Websites

Protokolle

Jeder Dienst nutzt seine eigenen Protokolle um die gestellten Aufgaben realisieren zu können.

• FTP: ftp (file transfer protocol)
• E-Mail: smtp / pop3 (simple mail transfer protocol / post office protocol)
• WWW: http (hypertext transfer protocol)

Was nutzen wir?

Wenn Sie Ihre Dokumente offline erstellen und be­trachten, nutzen Sie keines der vor­gestellten Protokolle.

Wenn Sie online arbeiten, müssen Sie Ihre erstellten Dokument mit Hilfe von einem FTP-Programm auf einen Server über­tragen. Anschließend können Sie Ihre Dokumente in einem Browser über das WWW be­trachten.

1.2.6 Internetadressen und deren Namen

Die einzelnen Server und Rechner müssen sich zum Über­tragen von Daten gegen­seitig im Inter­net finden. Dazu wird jedem Gerät eine ein­deutige Adresse zu­geordnet.

IP Adresse

Jeder im Inter­net befindliche Rechner bekommt eine IP Adresse zu­geordnet. Über diese IP Adresse kann der ent­sprechende Rechner ein­deutig identifiziert und an­gesprochen werden. Für die Ver­gabe und den Auf­bau der Adressen wird das Internet Protocol (IP) genutzt.

Die IP Adressen bestehen aus einer Folge von Ziffern und haben die folgende Form:

192.168.100.100

Jede IP Adresse besteht aus vier Bereichen. Jeder dieser Bereiche darf maximal drei Ziffern ent­halten und ist durch einen Punkt (.) von den anderen Bereichen getrennt. Die Ver­gabe der IP Adresse erfolgt durch den Provider.

Nice to know ...

Domain

Bei einer Domain handelt es sich um einen im Internet welt­weit ein­maligen und ein­deutigen und unter gewissen Regeln frei wähl­baren Namen. Der Auf­bau einer Domain besteht aus mehreren Teilen:

  Domainname
       |
www.website.com
 |           |
Protokoll    |
             |
         Top Level Domain

Einer Domain können weitere Sub­domains hin­zugefügt werden. Diese Teil­bereiche werden durch einen Punkt ge­trennt der Domain an­gehängt. Jeder Abschnitt (Domain und Sub­domain) darf max. 63 Zeichen ent­halten.

         Subdomainname
               |
www.website.subdomain.com

Durch einen Domain­namen kann eine Internet­seite ein­facher als über die IP-Adresse an­gesprochen werden. Die Ver­waltung der Domain­namen und die Zuordnung der ent­sprechenden IP erfolgt über Einträge in speziellen Servern.

DNS

Bei dem Domain Name System (DNS) handelt es sich um einen Dienst im IP-basierten Inter­net. Seine Haupt­aufgabe ist die Beantwortung von Anfragen zur Namens­auflösung.

1.2.7 Weitere Programme

Die oben ge­nannten Programme reichen für das Er­stellen und Be­trachten von HTML5 Dokumenten voll­kommen aus. Wenn Sie Ihre Dokumente Online ver­fügbar machen möchten, oder Sie Ihre Bilder be­arbeiten möchten, be­nötigen Sie zu­sätzliche Programme.

FTP-Programme

Zum Über­tragen von Daten an einen Server, benötigen Sie ein FTP-Programm. FTP-Programme finden Sie kosten­los zum Down­load im Inter­net. Eines der bekanntesten Programme ist sicher­lich Filezilla. Das Programm ist für ver­schiedene Betriebs­systeme ver­fügbar.

Downlaod unter: https://filezilla-project.org/download.php

Grafik - Programme

Wenn Sie Ihre Bilder be­arbeiten möchten, be­nötigen Sie ein spezielles Programm. Auch Grafik-Programme gibt es kosten­los zum Down­load im Inter­net. Eines der be­kanntesten, frei ver­fügbaren Programme ist GIMP. Das Programm bietet um­fangreiche Tools zum manipulieren von Bildern und ist für ver­schiedene Betriebs­systeme ver­fügbar.

Downlaod unter: https://www.gimp.org/downloads/