Kommunikation zwischen Mensch und Maschine: Ein Blick hinter deine Website

0

Hast du dich auch schon gefragt, wie eine Website entsteht? Wirf einen ersten, ganz harmlosen Blick in die Welt des Coding.

Man kann darüber streiten, ob Online Marketing Verantwortliche über das Thema Coding Bescheid wissen sollten. Grundsätzlich ist es ja kein Bestandteil des täglichen Arbeitens. Dennoch gibt es einige Gründe, die dafür sprechen:

♦ Das Bewusstsein darüber, welche Codes hinter deiner Website stehen, kann helfen, deiner Möglichkeiten und den Anwendungsgrenzen bewusst zu sein. Es gibt dir die Chance über das bestehende hinaus zu denken und innovative Idee für deinen Internetauftritt zu entwickeln.

♦ In der Zusammenarbeit mit den Entwicklern deiner Website gibt es aufgrund der verschiedenen Blickpunkte immer wieder Verständnisschwierigkeiten. Da kann es sehr nützlich sein, ein Basiswissen in der Sprache der Programmierer zu haben, ähnlich die Landessprache zu kennen, wenn du in den Ferien ein Problem lösen musst. Dazu gehört auch, dass du für zukünftige Projekte die Expertise der Entwickler sowie die angebotenen Leitungen und dazugehörigen Preise besser einschätzen kannst.

♦ Wenn auf deiner Website eine kleine Veränderung nötig ist und das Entwickler Team gerade anderweitig beschäftigt ist, kannst du diese Änderungen vielleicht bald selbst umsetzen.

Programmiersprachen

Coding ist Grundlage für viele Dinge unseres täglichen Lebens. So ziemlich jedes Gerät, welches wir mit Strom versorgen, beinhaltet ein Computerprogramm, welches auf Codes, also Programmiersprachen, basieren. Dabei handelt es sich um präzise Anweisungen, welche ein Computer verstehen und umsetzen kann. Man kann es sich auch als Sprache vorstellen, welche Computer verstehen können. Wie unter uns Menschen gibt es für Computer verschiedene Sprachen. Gesamthaft sind es über 240. Eine Übersicht bietet zum Beispiel der TIOBE Index, welcher die Programmiersprachen monatlich nach Popularität auflistet.

Bevor du angesichts der Masse jetzt schon ans Aufgeben denkst; für Online Marketer genügt es, Kenntnisse in einigen wenigen dieser Programmiersprachen zu haben. Folgend wird ein Einblick in die zwei für Front-End essentiellen Programmiersprachen HTML und CSS gegeben. Hierzu noch folgendes:

♦ Als User bewegt man sich immer auf dem Front-End. Also dem Teil des Internets, auf welchem die Inhalte dargestellt werden.

♦ Hingegen gibt es für jede Website ein sogenanntes Back-End. Als Online Marketer wirst du dich öfters auf der Benutzerfläche des Back-Ends deiner Website bewegen, um Inhalte anzupassen, Bilder hochzuladen oder die Navigation der Website anzupassen. Du bist also dann der User des Back-Ends.

Die wichtigsten Programmiersprachen für die Entwicklung von Front-Ends sind HTML, CSS und Java Script. Vielleicht hast du dir zuvor den Tiobe Index angeschaut und fragst dich nun, wieso HTML und CSS nicht aufgeführt sind? Das ist reine Definitionssache, bedingt durch die sogenannte Turing-Unvollständigkeit der beiden Sprachen. Dies ist jedoch ein Thema für sich und sollte dich nicht vom Wesentlichen ablenken.

Hast du schon einmal den Quelltext einer Website angeschaut? Mit Rechtsklick – Seitenquelltext anzeigen kannst du dir einen ersten Eindruck darüber machen, wie ein fertig gecodetes Front-End aussieht.

Html & Css

HTML und CSS funktionieren Hand in Hand. Inhalte einer Website werden vereinfacht gesagt durch HTML strukturiert und diese strukturierten Inhalte werden durch CSS formatiert. Im Cascading Style Sheet wird also zum Beispiel definiert, welche Farbe Hyperlinks haben und ob diese unterstrichen erscheinen sollen. Somit muss diese Information nicht jedes Mal, wenn ein Hyperlink gesetzt wird eincodiert werden. Dies ist auch vorteilhaft, wenn ein Unternehmen zwei Websites betreibt, welche im gleichen Layout daher kommen sollen, jedoch von der Struktur her unterschiedlich aufgebaut werden.

Ausschnitt aus einem Cascading Style Sheet, Definition des Layouts von Hyperlinks. Quelle: help.easywebcontent.com/html-editor/edit-other

Beim Codieren durch Hyper Text Markup Language wird dem Computer mit sogenannten Tags angezeigt, wie die Struktur einer Webseite sein soll. Um den Text zu gestalten und auszuzeichnen gibt es viele verschiedene HTML-Tags, wie zum Beispiel:

♦ <a> bewirkt zusammen mit einer gültigen Internetadresse einen Hyperlink
♦ <br> steht für Zeilenumbruch
♦ <li> Kennzeichnet einen Listeneintrag. Diesem wird oftmals ein Aufzählungszeichen vorangestellt.

Die Tags werden mit einem schliessenden Tag ausgestattet (z.B. </a>), um anzuzeigen, wo der Textteil, welcher zum ausgewählten Tag gehört endet. Web Designer werden in 15 Minuten? Folgendes Video macht es möglich und veranschaulicht nochmals das Grundprinzip von HTML:

1 . Öffne Notepad aus deinen Programmen (es ist vorinstalliert, alternativ: lade wie im Video vorgeschlagen sublime text herunter)
2 . Speichere eine leere Datei als index.html und öffne die Datei zusätzlich in deinem Browser
3 . Werde zum Web Designer in nur wenigen Minuten

Obwohl es möglich ist, eine Website von Grund auf selbst zu programmieren, nutzen viele Programmierer Hilfsmittel. Für vorgestellte Sprachen gibt es einerseits HTML Editoren, welche Funktionen wie Autovervollständigung, Integriertes FTP-Programm, Vorschaufunktion oder Suchen und Ersetzen ermöglichen. Eine andere Art von Tool sind sogenannte WYSIWYG Editoren. Nach dem «what you see is what you get» Prinzip machen sie es möglich, eine Website zu erstellen ohne eine Zeile Code selber zu schreiben. Noch einfacher machen es einem sogenannte Homepage-Baukästen, in welchen man auf ein bestehendes Backend zugreifen und sich an Templates bedienen kann. Dank Homepage-Baukästen kann jedermann nach einer kurzen Einarbeitungsphase seine eigene Website erstellen.

Und jetzt?

Wie du bestimmt gemerkt hast, gibt es zum Thema Coding für Online Marketer noch viel Weiteres auszuführen. Um Coding in seinen Grundzügen zu verstehen, braucht es vor allem Neugier und Geduld. Es sind, wie der Name „Programmiersprache“ sagt, eben Sprachen, die es zu lernen gilt, wenn man mit Maschinen kommunizieren möchte. Nach diesem ersten, wie oben angekündigt, harmlosen Blick hinter deine Website sollte nun ein Grundstein gelegt sein, welcher in dir entweder ein Interesse für Coding geweckt hat, oder eben nicht.

Interessieren dich Themen rund um Online Marketing? Dann melde dich oben rechts für den Newsletter an – alle Blogbeiträge werden ebenfalls auf Facebook und Twitter geteilt, sodass du nichts verpasst!


Quellen:
Lauterschlag, E. Was ist ein HTML-Editor und wofür wird dieser eingesetzt? Online (20. Mai 2017):
http://www.webschmoeker.de/grundlagen/html-editor/

Lesson 1: Was ist CSS? gertutorial – HTML.net. Online (13. Mai 2017):
http://de.html.net/tutorials/css/lesson1.php

Liste der HTML5-Elemente. Online (13. Mai 2017):
https://developer.mozilla.org/de/docs/Web/HTML/HTML5/HTML5_element_list

Luenendonk, M. Top Programming Languages used in Web Development. Online (10. Mai 2017):
https://www.cleverism.com/programming-languages-web-development/

microsoftlearning. What is coding? Online (10. Mai 2017):
https://www.youtube.com/watch?v=cKhVupvyhKk

Moehring, K. The Basics of Coding: How to Get Started. Online (10. Mai 2017):
http://www.pr2020.com/blog/marketers-need-to-learn-to-code-how-to-get-started

Paliwal, K. Coding for Marketers. Online (10. Mai 2017):
https://www.loginradius.com/fuel/coding-for-marketers/

Programming Languages Definition | TIOBE – The Software Quality Company. Online (10. Mai 2017):
https://www.tiobe.com/tiobe-index/programming-languages-definition/

Rindiani, H. What’s the difference between backend and CMS when talking about the content of a website? Online (20. Mai 2017):
https://www.quora.com/Whats-the-difference-between-backend-and-CMS-when-talking-about-the-content-of-a-website

Wolf, E. Is Coding the Next Must-Have Skill of the Modern Marketer? Online (10. Mai 2017):
https://blog.hubspot.com/marketing/coding-modern-marketer

Teilen in

About Author

Nadja von Ballmoos

Leave A Reply