Designer zögern oft, aus den Bereichen HTML und CSS in das Gebiet der Skript- und Programmiersprachen zu ziehen, und das aus gutem Grund. Die Programmierung erfordert ganz andere Fähigkeiten als das Verspotten von Webseiten. Außerdem gibt es so viele verschiedene Dinge zu lernen, dass die meisten Designer nicht wissen, wo sie anfangen sollen: JavaScript, PHP, Ruby, Rails. Wie können Sie mithalten?
In der Praxis erweist sich das Programmieren jedoch als weniger beängstigend, als sich Designer vorstellen. Heute werde ich Ihnen zeigen, wie das Programmieren eine Fähigkeit ist, die Sie einmal erlernen und dann auf jede neue Sprache anwenden können, die Sie lernen. Wir werden uns drei verschiedene Programmierkonstrukte in drei verschiedenen Sprachen ansehen, um zu sehen, wie ähnlich sie sich wirklich sind. Wenn Sie mit der Programmierung anfangen möchten, aber nichts davon wissen, ist dieser Artikel für Sie.
Fürchte dich nicht, du magst es einfach
Diese Website richtet sich in der Regel an Designer, und aus meiner persönlichen Erfahrung weiß ich, dass es äußerst einschüchternd ist, als Designer zum ersten Mal an das Programmieren heranzugehen. Designer sind visuelle Denker, wir leben mit Kreation und Experimentieren mit unserem geistigen Auge und einem Expertenwissen über die Werkzeuge unseres Handwerks.
Im Allgemeinen hassen wir die Art von Leuten, die Matheunterricht hassen, und alles andere, bei dem Kreativität scheinbar keinen offensichtlichen Halt hatte.
"Im Allgemeinen sind wir Leute, die Matheunterricht hassen, und alles andere, bei dem Kreativität scheinbar keinen offensichtlichen Halt hatte."Programmierer sind Problemlöser. Sie lieben Logik-Rätsel und basteln stundenlang an Code, ohne jegliche visuelle Darstellung. Denken Sie daran, dass sich diese beiden Kategorien nicht gegenseitig ausschließen. Wenn Sie auf beide Beschreibungen passen, werden Sie wahrscheinlich die Programmierung lieben.
Nicht HTML und CSS
Wir sind schnell an einem Punkt angelangt, an dem die meisten Webdesigner zumindest ein wenig über das Codieren von HTML und / oder CSS wissen. Diese Erfahrung und dieses Wissen werden Ihnen zwar helfen, aber vielleicht nicht so sehr, wie Sie vielleicht denken.
HTML ist eine * Markup-Sprache * und CSS ist eine * Stylesheet-Sprache *. Sie werden hauptsächlich zum Formatieren und Einfügen von ziemlich statischem Inhalt in vorgefertigte Seiten verwendet. Die Art und Weise, wie Sie mit ihnen arbeiten, unterscheidet sich in Wirklichkeit sehr von der Verwendung einer * Skriptsprache * oder einer * objektorientierten Programmiersprache *, einer Art von Hardcore-Programmiertools, die Sie heute im Web verwenden.
Das große Geheimnis der Programmierung
Der letzte Teil war die schlechte Nachricht, aber keine Angst, es gibt gute Nachrichten am Horizont. Wenn Sie in eine Buchhandlung gehen und zum Programmierbereich hinübergehen, werden Sie wahrscheinlich völlig eingeschüchtert. Es gibt so viele verschiedene Dinge zu lernen! Diese Einschüchterung wird gefördert, wenn Sie zufällig einem der Super-Genies begegnen, die so ziemlich alle Programmiersprachen zu kennen scheinen. Wie in aller Welt finden die Menschen die Zeit, um dieses Zeug zu lernen? Viele Anfänger sind an diesem Punkt so völlig verlegen, dass sie aufgeben, bevor sie es überhaupt versuchen.
Programmiersprachen sind in der Regel sehr ähnlich. Viele von ihnen verwenden dieselben Bausteine und ähnliche Tools, um ihre Ziele zu erreichen.Das große Geheimnis, das Sie nicht kennen, wenn Sie noch nie wirklich in die Programmierung gesprungen sind, ist, dass die Programmiersprachen in der Regel sehr ähnlich sind. Viele von ihnen verwenden dieselben Bausteine und ähnliche Tools, um ihre Ziele zu erreichen.
Ich habe dieses kleine Geheimnis in meiner ersten Interaktion mit dem Programmieren gelernt: eine Java-Klasse an der Uni (nicht zu verwechseln mit JavaScript). Obwohl ich selbst ein strammer Junge war, war die Klasse größtenteils mit Männern in den 30er und 40er Jahren gefüllt. Praktisch alle hatten bereits Arbeitsplätze in der Programmierung und waren schon seit zwanzig Jahren dabei. Sie wurden lediglich für den Gebrauch anderer Sprachen eingesetzt und versuchten, ihre Fähigkeiten zu erweitern, oft auf Ermutigung und Kosten ihres Arbeitgebers.
Als wir am ersten Tag in die Klasse kamen, wusste keiner von uns, wenn überhaupt, viel über Java. Bei der dritten Klasse waren diese Jungs jedoch an mir vorbei. Ich schrieb furchtbar einfache, kleine Code-Schnipsel, basierend auf den Grundlagen, die wir gelernt hatten. Diese Jungs hatten die gleichen Grundlagen und bauten ausgefeilte Anwendungen mit allerlei coolen Funktionen auf, die über die Anforderungen für den Auftrag hinausgingen.
War ich unfähig? Zum Glück stellt sich heraus, dass die Antwort nicht so einfach war.?War ich unfähig? Zum Glück stellt sich heraus, dass die Antwort nicht so einfach war. Die Realität war, dass wir sehr unterschiedliche Dinge lernten. Ich lernte, durch die Linse von Java zu programmieren, diese Jungs wussten bereits alles über das Programmieren und brauchten lediglich ein wenig Hilfe, um herauszufinden, wie man dieses Wissen in Java umsetzen kann. Ich war ein Kleinkind, das zum ersten Mal das Sprechen lernte, und es waren mehrsprachig und eine weitere Sprache.
Der Sinn dieser langen Geschichte besteht darin, zu veranschaulichen, dass der Rest viel einfacher wird, wenn Sie erst einmal mit einer Sprache programmiert oder Skripts erstellt haben, da Sie die Lernkurve drastisch reduziert haben. Wenn Sie wissen, wie man in PHP programmiert, ist der Sprung zu Ruby viel kleiner.
Die Bausteine
Es fällt mir leicht zu sagen, dass das Programmieren auf wiederverwendbarem Wissen basiert, aber kann ich das in die Praxis umsetzen? Was sind diese sogenannten Bausteine und wie unterscheiden sie sich von Sprache zu Sprache?
Tolle Frage! Schauen wir uns einige der grundlegendsten, aber am häufigsten verwendeten Programmierkonstrukte an. Wenn Sie diese verstehen, wird Ihr Programmierunterricht ungeachtet des Pfads oder der Sprache, die Sie wählen, eine Beschleunigung erfahren.
Variablen
Variablen sind eine wundervolle Sache.Wenn Sie jemals LESS oder etwas Ähnliches verwendet haben, haben Sie die Wunder von Variablen gesehen und wie sie immense Zeit sparen können. Ich bin mir immer noch nicht sicher, ob sie zu CSS gehören, aber der Programmierer in mir möchte sie sicher dort sehen.
Eine Variable ist im Wesentlichen eine Möglichkeit, Informationen zu speichern. Sie können etwas speichern, das so einfach ist wie ein Wert, beispielsweise 39, oder etwas, das so komplex ist wie ein ganzes Datenfeld mit Hunderten von Werten. Stellen Sie sich eine Variable als Box vor. Boxen selbst scheinen nicht so wichtig zu sein, was zählt, ist das, was drin ist. Boxen bieten jedoch eine bequeme Möglichkeit, bestimmte Elemente zu speichern und darauf zuzugreifen.
JavaScript-Variablen
Lass uns zu einem Beispiel springen. Da JavaScript wahrscheinlich der erste Kandidat ist, um an HTML und CSS vorbeizukommen, beginnen wir alle Beispiele dort. So funktionieren Variablen in JavaScript:
Hier können Sie genau sehen, wie Variablen in JavaScript verwendet werden. Zuerst erklären Sie? eine Variable. Dadurch wird es einfach erstellt oder ins Leben gerufen. Wenn Sie dies tun, möchten Sie es immer als etwas bezeichnen, das auf seinen Inhalt hinweist. Als nächstes weisen Sie ihm einen Wert zu (oft werden diese beiden Schritte kombiniert), in unserem Fall habe ich eine beliebige Zahl eingeworfen. Denken Sie daran, dass? ContentWidth? ist unsere Box, die jetzt einen Wert enthält. Jedes Mal, wenn wir auf dieses Feld zugreifen möchten, verwenden wir einfach den Variablennamen. Um das Beispiel zu beenden, habe ich eine Warnung erstellt und die Variable eingefügt. Daraufhin wird ein Feld mit dem Wert "496" angezeigt.
Dies mag hier sinnlos erscheinen, aber stellen Sie sich vor, wir hätten dreihundert Zeilen Code, die häufig auf diese Variable verweisen. Immer wenn sich der Wert dieser Variablen ändert, funktioniert unser Code immer noch einwandfrei, da der Variablenname konstant bleibt. Ohne Variablen wäre dies unmöglich und es würde viel mehr Code entstehen.
PHP-Variablen
Jetzt, da wir diese solide Informationsgrundlage haben, wird das Lernen von Variablen in anderen Sprachen viel einfacher. Diesmal lernen wir nicht, was Variablen sind und wie sie funktionieren, sondern wie sie in anderen Sprachen verwendet werden.
Hier sehen Sie, wie Variablen in PHP funktionieren:
Hier gibt es viele Gemeinsamkeiten. Beachten Sie die Verwendung von Semikolons, um das Ende einer Anweisung zu kennzeichnen und wie Kommentare dieselbe Syntax verwenden. Diesmal haben wir unsere Variable deklariert und in einer Zeile einen Wert zugewiesen. Wir können sehen, dass die Syntax dafür fast identisch ist, mit dem wichtigen Unterschied, dass PHP ein? $? Verwendet. am Anfang eines Variablennamens. Beachten Sie, dass das? Echo? Der Befehl druckt lediglich etwas auf die Browserseite.
Ruby-Variablen
Sehen wir uns nun Variablen in Ruby an.
Inzwischen können Sie feststellen, dass vieles, was zum Erlernen einer neuen Sprache erforderlich ist, nur die verschiedenen Macken herausfindet. Beispielsweise haben JavaScript und PHP Semikolons am Ende einer Zeile verwendet, Ruby dagegen nicht. Auch dieses Mal werden Kommentare mit? #? Erstellt. anstatt ?//? und wir verwenden? unser Ergebnis ausgeben.
Schleifen
Ein weiteres beliebtes Programmierkonstrukt ist eine Schleife. Mit Schleifen können Sie sich die Mühe ersparen, Code immer wieder zu wiederholen, indem Sie den gewünschten Prozess automatisieren. Beim Erstellen einer Schleife müssen Sie unbedingt die Parameter der Schleife angeben, z. B. die Bedingungen, unter denen die Schleife beendet wird. Sie möchten nicht, dass die Aktionen unendlich fortgesetzt werden. Sie müssen also eine Bedingung erstellen, durch die die Schleife beendet wird.
JavaScript-Schleifen
In jeder Sprache gibt es normalerweise mehrere Arten von Schleifen. Hier ist ein Typ in JavaScript, der? While? Schleife. In diesem Beispiel richten wir eine Variable ein und erstellen dann einen Codeabschnitt, der immer wieder ausgeführt werden soll, solange die Variable weniger als 50 beträgt. Dann definieren wir in diesem Codeblock die Aktionen, die wiederholt werden sollen. In diesem Fall protokollieren wir den Wert der Variablen in der Konsole und erhöhen den Wert der Variablen um eins. Da die Variable bei jeder Ausführung des Codes zunimmt, wird sie schließlich auf 50 gesetzt und die Schleife wird beendet.
Dasselbe könnte man mit einem? Für? Erreichen? Schleife. Diese Version ist etwas prägnanter als der Wert der zu startenden Variablen, die Bedingung, unter der die Schleife endet, und die Aktion, die die Variable in einer Zeile ausführen soll.
PHP-Schleifen
Wieder einmal stellen wir fest, dass PHP JavaScript sehr ähnlich ist. Nachdem Sie die obigen Beispiele gelesen haben, sollten Sie das PHP-Äquivalent mühelos verstehen können. Hier haben wir wieder eine while-Schleife und eine for-Schleife, von denen jede eine fast identische Syntax wie ihre JavaScript-Brüder enthält.
Ruby Loops
Hier sind die? Während? und für? Schleifen in Ruby. Wie Sie sehen können, ist Ruby in seiner Syntax viel lockerer als die anderen beiden Sprachen, die wir verwenden. Es gibt nicht nur keine Semikola, die geschweiften Klammern sind auch nicht vorhanden. Beachten Sie auch, wie unterschiedlich das ist? Schleife sieht diesmal aus.
Funktionen
Funktionen sind ein weiteres Programmierkonstrukt, das erstellt wurde, um Zeit zu sparen, indem derselbe Code nicht wiederholt wird. Wenn Sie eine Anwendung codieren, wird sie wahrscheinlich eine bis zu tausende von Aufgaben ausführen. Jede Aufgabe repräsentiert einen Teil der Befehle. Wenn wir die Befehle in eine Funktion schreiben, können wir diese Funktion einfach aufrufen, anstatt den vollständigen Code zu schreiben. Auf diese Weise ähnelt eine Funktion einer Variablen, die eine Aufgabe oder Aufgabenliste ausführt.
JavaScript-Funktionen
Lassen Sie uns eine super grundlegende Funktion in JavaScript erstellen, die jede übergebene Zahl annimmt und quadriert. Wir beginnen hier mit dem Wort? Funktion? Folgen Sie dann einer Variablen in Klammern. Dann führen wir innerhalb der Funktion verschiedene Aktionen aus und geben einen Wert zurück.
Wenn wir die Funktion verwenden, ersetzen wir die Klammervariable durch eine beliebige Zahl und der Code innerhalb der Funktion wird für diesen Wert ausgeführt. Im obigen Beispiel wäre das Ergebnis 81.
PHP-Funktionen
Inzwischen sind Sie mit der JavaScript-zu-PHP-Konvertierung so vertraut, dass Sie alles selbst machen können. Hier ist die Syntax:
Ruby-Methoden
Wieder einmal ist Ruby ganz anders. Tatsächlich bezieht sich Ruby auf dieses spezielle Konstrukt als Methode, nicht als Funktion. Wir können unser Wissen über Funktionen jedoch immer noch schnell anwenden, um zu verstehen, wie dies funktioniert.
Wie Sie sehen, führt die Ruby-Methode dieselbe Aufgabe aus wie die JavaScript-Funktion. Es erlaubt Ihnen, eine Zahl in die Parameter zu übergeben, nach der diese Zahl Quadrate ist und den Wert zurückgibt.
Einfach richtig?
Inzwischen sollten Sie in der Lage sein, die Bedeutung des Programmierens unabhängig von der jeweiligen Programmiersprache zu verstehen. Es gibt eine gemeinsame Struktur und Methode zum Programmieren, die Sie in allen Sprachen finden, die Sie lernen. Viele der Unterschiede sind * semantisch * und führen zu geringfügigen Syntaxunterschieden.
Nehmen Sie nicht an, dass Programmiersprachen und Skriptsprachen alle gleich sind. Sie alle haben einen bestimmten Zweck, der bestimmt, wie und wann Sie sie verwenden. Es ist ein bisschen wie mit Adobe Illustrator zu lernen und dann zu InDesign zu springen. Es handelt sich um zwei verschiedene Dinge, die für zwei verschiedene Zwecke erstellt wurden. Es gibt jedoch so viele Ähnlichkeiten, dass ein Expertenwissen über das eine Ihnen hilft, sich im anderen zu orientieren.
Fazit
Diese Diskussion war keinesfalls als erschöpfend zu verstehen. Sie verfügen jetzt nicht über ein vollständiges grundlegendes Programmierwissen. Stattdessen haben Sie das Programmieren lediglich so gelernt, dass es hoffentlich leichter zugänglich ist. Anstatt eine Masse völlig anderer Sprachen zu sehen, die Sie lernen müssen, sollten Sie jetzt eine Sammlung verwandter Praktiken sehen, in denen das Studium einer der Sprachen Ihr Verständnis für die anderen erweitert.
Also, wo solltest du anfangen? Wie bereits erwähnt, ist JavaScript definitiv der Ort für Webdesigner. Ihre Anwendung ist, besonders in Kombination mit jQuery, für HTML und CSS, die Sie bereits kennen, sofort ersichtlich. Von da an ist der Sprung zu PHP viel überschaubarer, was dazu führen kann, dass Sie Ruby lernen, um Ruby on Rails zu beherrschen. Die Möglichkeiten sind unbegrenzt!