Coding

Ressourcen: Einstieg in die Webentwicklung

Wenn du diesen Artikel liest, hast du wahrscheinlich schon einmal auf irgendeine Weise an einer Website mitgearbeitet. Oder zumindest mit WordPress geblogt. Und wahrscheinlich hast du dabei festgestellt, dass dir diese Arbeit ziemlich gut gefällt und du noch tiefer einsteigen möchtest. In diesem Artikel findest du Ressourcen und Tipps, mit denen du einfach und ohne Vorwissen in die Gestaltung und Entwicklung von Websites einsteigen kannst.

Deine Grundausstattung für den Einstieg

1. Das IT-Handbuch für Fachinformatiker

Eigentlich ist dieses Buch ein Begleiter für den Ausbildungsgang „Fachinformatiker für Anwendungsentwicklung“. Was in diesem Ausbildungsgang gelehrt wird, kommt aber dem schon relativ nahe, was du als Webentwickler benötigst (zumindest im Vergleich zu einem Handbuch über Informatik oder Ähnliches). Darüberhinaus gibt dir dieses Buch ein breit gefächertes Grundlagenwissen, das wir bei deiner Arbeit helfen wird.

Eine ältere Auflage des Buches stellt der Verlag online kostenfrei zur Verfügung:

2. Schrödinger lernt HTML, CSS und Javascript

Einer der besten direkten Einstiege in HTML, CSS und Javascript ist das knapp 900 Seiten starke Buch aus der Schrödinger-Reihe des Rheinwerk-Verlags.

Schau dir einfach mal die Leseprobe an, dann wirst du sehen, was dieses Buch so besonders macht: Mit viel Liebe zum Detail wird alles ganz genau erklärt. Es gibt momentan auf dem Markt kein vergleichbares Buch mit Ausnahme der „Von Kopf bis Fuß“-Reihe (allerdings ist diese schon etwas veraltet).

3. Code-Editor

Um die Codebeispiele ausprobieren zu können, benötigst du einen Texteditor, mit dem du Code schreiben kannst und der die Code-Syntax ordentlich hervorhebt. Die beiden bekanntesten Editoren sind:

4. Codepen

Schnell mal etwas Code ausprobieren oder schauen, wie es andere machen? Das geht mit Codepen, einer Art Facebook für Entwickler. Die Registrierung ist kostenfrei und du kannst beliebig viele sogenannte Pens erstellen, allerdings sind diese im kostenlosen Basisaccount alle öffentlich einsehbar.

5. Git und GitHub

Wenn du entwickelst, ist es sehr praktisch, deine einzelnen Arbeitsschritte zu sichern und Zwischenversionen zu speichern. Das hilft später auch, Fehler schneller zu identifizieren oder zu beheben, indem du einfach eine alte, korrekte Version wieder einspielst. Das beliebteste Tool hierzu ist Git – und die dazugehörige Online-Plattform GitHub.

Die Funktionen von Git sind am Anfang nicht immer ganz eingänglich – sowohl was die Bedienung als auch die Konzepte von Commits, Branches etc. angeht. Ich empfehle hierzu deshalb folgendes Lehrmaterial:

  • Wenn du noch nie mit der Shell gearbeitet hast, hilft zunächst das Buch Git for Humans, Git und seine Bedienung zu verstehen
  • Aufbauend darauf schaust du dir dann diesen kostenlosen Kurs bei Udacity an

Ressourcen zur Weiterbildung

„Das ist doch ganz einfach, das Web ist voll von Anleitungen, google einfach mal.“ Diese Antwort macht den Einstieg meist schwer, denn du kannst nur nach einer Lösung suchen, wenn du weißt, was du suchst. Deshalb ist es am Anfang meist doch einfacher, auf geschlossene, in sich aufbauende Lernmaterialien zugreifen, die einen Überblick über alles Wesentliche geben. Hast du das oben empfohlene Schrödinger-Buch also durchgearbeitet, kannst du hier dein Wissen erweitern:

  • Udacity-Kurse: Udacity bietet sehr viele kostenfreie, qualitativ hochwertige Kurse zum Thema Webentwicklung an. Grundsätzlich lassen sich hier auch Zertifikate, sogenannte Nanodegrees ablegen, die sind aber kostenpflichtig. Eine Übersicht über alle kostenfreien Tutorials gibt es hier: https://de.udacity.com/courses/all
  • Rheinwerk Open Books: alte Auflagen des Rheinwerk-Verlages gibt es kostenfrei online zum Nachlesen
  • Atomic Design – ein Buch zur Modularen Entwicklung von Web-Interfaces. Die Gedanken, die hier formuliert werden, gehören zu den aktuellen Best-Practices
  • Von Kopf bis Fuß: Diese Reihe aus dem O’Reilly-Verlag schafft es, technische Themen sehr einfach zu erklären. Viele praktische Beispiele zum Mitmachen und Nachvollziehen helfen, dass die Inhalte auch wirklich im Kopf hängen bleiben. Besonders empfehlen, da sie mir selbst geholfen haben, kann ich die Bücher „jQuery“ und „Entwurfsmuster“
  • Smashing Magazine Bücher: Die Reihe eines bekannten Magazins für Webentwicklung. Viele Bücher gibt es günstiger, wenn man sie vor Erscheinen vorbestellt
  • A Book Apart: Bücher, die das bekannte Magazin „A List Apart“ herausbringt. Die Besonderheit dieser Bücher: Sie sind alle so geschrieben, dass Einsteiger sie verstehen.

Praktische Tools

Ressourcen zum Nachschlagen

Standard
Coding

JavaScript Cheat Sheet

Inhalt

  1. Elemente auswählen
  2. Elemente hinzufügen, ändern und löschen
  3. Events auslösen
  4. First Class Functions
  5. Objektorientiertes JavaScript

Allgemeines

JavaScript lässt sich genau wie HTML und CSS direkt im Browser manipulieren. In Chrome geht das über die Developer Tools (F12) unter Console (Esc).

Elemente auswählen

Mit Javascript lassen sich einzelne HTML-Elemente einer Seite auswählen und dann beliebig manipulieren, löschen etc.

Beispielcode:

<div id="wrapper">
  <h1 id="caption">Ich bin eine Überschrift</h1>
  <p class="paragraph">Dies ist ein Fließtext.</p>

  <input id="input-field" value="99">

  <ul class="argument-list">
    <li class="argument">Argument 1 <a href="link.html">mit einem Link</a></li>
    <li class="argument">Argument 2</li>
    <li class="argument">Argument 3</li>
  </ul>

  <p class="second-paragraph">Dies ist noch ein Fließtext.</p>
</div>

In diesem Code lassen sich die Element so auswählen und ausgeben:

document.getElementById('caption');
<h1 id="caption">Ich bin eine Überschrift</h1>

Gibt immer nur ein Element zurück. Das Element verfügt über eine einmalige ID.

const mainElement = document.getElementById('wrapper');
mainElement.querySelector('#caption');
<h1 id="caption">Ich bin eine Überschrift</h1>

Funktioniert genau wie das Beispiel oben, sucht allerdings nur nach dem Element in einem anderen Element und nicht im gesamten document.

document.querySelector('.argument');
<li class="argument">Argument 1</li>

Selektiert Elemente, die mehr als ein Mal vorkommen können, davon aber immer nur das erste.

document.querySelectorAll('.argument');
NodeList(3) [li.argument, li.argument, li.argument]
0:li.argument
1:li.argument
2:li.argument
length:3
__proto__:NodeList

Selektiert nicht nur das erste, sondern alle Element und gibt eine Node-Liste aus, über die man im Gegensatz zu getElementsByClassName und getElementsByTagName loopen kann:

const element = document.querySelectorAll('.argument');
for(let i = 0; i < element; i++){
    console.dir(element[i]);
}
document.getElementsByClassName('argument');
HTMLCollection(3) [li.argument, li.argument, li.argument]
0:li.argument
1:li.argument
2:li.argument
length:3
__proto__:HTMLCollection

Selektiert im Gegensatz zu querySelector alle Elemente und gibt sie als Liste aus.

document.getElementsByTagName('p');
HTMLCollection(2) [p.paragraph, p.second-paragraph]
0:p.paragraph
1:p.second-paragraph
length:2
__proto__:HTMLCollection

Gibt eine Liste aller vorkommenden Tags (und ihrer Klassen) aus.

document.querySelector('.argument').innerHTML;
"Argument 1 <a href="link.html">mit einem Link</a>"

Ausgewählt wurde das erste Listenelement mit der Klasse .argument. Alles, was sich innerhalb dieses Tags befindet, wird als String ausgegeben.

document.querySelector('.argument').outerHTML;
"<li class="argument">Argument 1 <a href="link.html">mit einem Link</a></li>"

Die Auswahl ist dieselbe wie beiinnerHTML, es wird allerdings auch der umschließende Tag mitgegeben.

document.querySelector('.argument').textContent;
"Argument 1 mit einem Link"

Gibt nur den Text innerhalb des Tags wieder und entfernt alle HTML-Tags innerhalb des Textes. (Wichtig: Übergibt man textContent, der HTML-Content enthält, wird dieser natürlich auch nur als String, nicht als HTML dargestellt!)

document.querySelector('.argument').innerText;
"<li class="argument">Argument 1 <a href="link.html">mit einem Link</a></li>"

InnerText funktioniert fast genauso wie textContent – mit einem Unterschied: Der Text wird bei innerText so ausgegeben, wie er durch das CSS gestyled wurde. Wird beispielsweise ein Teil des Textes auf display:none gesetzt, wird dieser mit innerText nicht ausgegeben.

document.querySelector('.argument-list').firstElementChild;
<li class="argument">
   "Argument 1 "
   <a href="link.html">mit einem Link</a>
</li>
document.getElementById('input-field').value;
"99"

Gibt nur den Value des Input-Feldes aus

document.querySelector('#input-field').className;

document.querySelector('#input-field').className.split(' ')
"super cool classnames"

(3) ["super", "cool", "classnames"]
0:"super"
1:"cool"
2:"classnames"
length:3
__proto__:Array(0)

Gibt die Klassennamen eines elements als String aus. Über Split kann daraus ein Array gemacht werden.

document.querySelector('#input-field').classList;
DOMTokenList(3) ["super", "cool", "classnames", value: "super cool classnames"]
0:"super"
1:"cool"
2:"classnames"
length:3
value:"super cool classnames"
__proto__:DOMTokenList

Möglich bei classList sind folgende Aktionen:

  • .add()
  • .remove()
  • .toggle()
  • .contains()

Elemente hinzufügen, ändern und löschen

Beispielcode:

<div id="wrapper">
  <h1 id="caption">Ich bin eine Überschrift</h1>
  <p class="paragraph">Dies ist ein Fließtext.</p>

  <input id="input-field" value="99">

  <ul class="argument-list">
    <li class="argument">Argument 1 <a href="link.html">mit einem Link</a></li>
    <li class="argument">Argument 2</li>
    <li class="argument">Argument 3</li>
  </ul>

  <p class="second-paragraph">Dies ist noch ein Fließtext.</p>
</div>

Hinzufügen

const newParagraph = document.createElement('p');
newParagraph.textContent = "ABCD";
document.querySelector('.paragraph').appendChild(newParagraph);
<p class="paragraph">Dies ist ein Fließtext.</p>
<p>ABCD</p> // neu hinzugefügt!

Ein Element wird mit createElement erstellt, mit textContent mit Inhalt gefüllt und mit appendChild hinter dem ersten p-Tag eingefügt.

const mainHeading = document.querySelector('#caption');
const textToAdd = '<h2>Unterüberschrift</h2>';

mainHeading.insertAdjacentHTML('afterend', textToAdd);

Mit insertAdjacentHTML lassen sich Element und Inhalt flexibler als mit appendChild hinzufügen. Es gibt vier verschiedenen Parameter, die gesetzt werden können:

  • beforebegin: vor dem h2-Tag
  • afterbegin: nach dem h2-Tag
  • beforeend: vor dem /h2-Tag
  • afterend: nach dem /h2-Tag

Verändern

document.querySelector('h1').style.color = 'red';
document.querySelector('h1').style.textDecoration = 'underline';
<h1 id="caption" style="color: red; text-decoration: underline;">Ich bin eine Überschrift</h1>

Über style kann das Styling verändert werden (nur ein Wert pro Aufruf).

document.querySelector('h1').style.cssText = 'color: red; text-decoration: underline;';
<h1 id="caption" style="color: red; text-decoration: underline;">Ich bin eine Überschrift</h1>

Mit cssText dagegen können mehrere Werte pro Aufruf verändert werden. Während oben für Werte wie text-decoration die lowerCamelCase-Schreibvariante verwendet wird, kann man hier die aus CSS gewohnte Schreibweise nutzen.

document.querySelector('h1').setAttribute('id', 'new-caption');
document.querySelector('h1').setAttribute('style', 'new-style');
<h1 id="caption">Ich bin eine Überschrift</h1>  // vorher
<h1 id="new-caption" class="new-style">Ich bin eine Überschrift</h1>  // nachher 

Entfernen

const firstElement = document.querySelector('.argument-list').firstElementChild;
document.querySelector('.argument-list').removeChild(firstElement);

Zunächst wird das erste Unterelement der Liste ausgewählt und anschließend entfernt. Einfacher geht es aber so:

const firstElement = document.querySelector('.argument');
document.querySelector('.argument').parentElement.removeChild(firstElement);

Erst wird das zu entfernende Element direkt ausgewählt und dann direkt entfernt. Und am einfachsten geht es so:

document.querySelector('.argument').remove();

Events

Eine Liste mit allen verfügbaren Events gibt es auf der Seite von Mozilla. Events können in den Developer Tools (in Chrome) untersucht werden, indem ein Element ausgewählt wird. Unter Event Listeners findet man alle vorhandenen Events.

document.querySelector('h1').addEventListener('click', function () {
  console.log('The heading was clicked!');
});

Fügt der Konsole „The heading was clicked hinzu“, sobald die H1 angeklickt wird.

function headingClickFunction() {
console.log('The heading was clicked');
}

document.querySelector('h1').addEventListener('click', headingClickFunction);
document.querySelector('h1').removeEventListener('click', headingClickFunction);

Entfernt einen hinzugefügten EventListener. Wichtig dabei: Beide Aktionen, sowohl add als auch remove müssen auf dieselbe Funktion verweisen.

First Class Functions

Funktionen in JavaScript sind First-Class-Funktionen. Das bedeutet:

1. Sie können in Variablen gespeichert werden:

const variable = myFunction();

2. Sie können von einer anderen Funktion zurückgegeben werden:

const higherOrderFunction = function () {
    return function () {
        return 8;
    }
}

3. Sie können als Argument an eine andere Funktion übergeben werden.

Eine Funktion, die an eine andere Funktion übergeben wird, nennt man Callback Function. Die Funktion, die die Callback Function ausführt, heißt Higher-Order Function.

Objektorientiertes JavaScript

Literal notation – empfohlen:

const myObject = {};

Constructor function:

const myObject = new Object();

Beispiel für ein Objekt:

const oma = {
  age: 82,
  name: 'Elfriede',
  greet: function () {
    console.log('Guten Tag');
  }
};

Gibt einen Array aller Keys / Values aus:

const oma = {
  name: 'Elfriede',
};


Object.keys(oma);    // name

Object.values(oma);  // Elfriede

Values ist erst seit 2017 Standard, wird also noch nicht von jedem Browser unterstützt.

Objekte modifizieren

Zugreifen oder verändern einzelner Elemente:

oma.age = 82;
oma.greet;
oma[‚greet‘]();

… oder erstellen ganz neuer Elemente:

oma.haircut = 'Dauerwelle';  // oder
oma['haircut'] = 'Dauerwelle';

Entfernen einer Property:

delete oma.haircut;

Funktionen ansprechen:

const oma = {
  greet: function () {
    console.log('Guten Tag');
  }
};
const oma = {
  greet: function gutenTag() {
    console.log('Guten Tag');
  }
};

… geht bei beiden gleich:

oma.greet();

This

Mit this können Methoden direkt das Objekt adressieren:

const oma = {
  name: 'Elfriede',
  greet: function () {
    console.log(`Ich heiße ${this.name}.`);
  }
};
oma.greet();

Achtung: Die Art und Weise, wie Funktionen aufgerufen werden, hat einen Einfluss darauf, auf was sich this bezieht!

a. Funktion als Methode in einem Objekt -> das Objekt selbst *
b. „Normale“ Funktion -> das window Objekt
c. …

* Wird eine Funktion aus einem Objekt aber in einer Variablen gespeichert, ist die Referenz das window Objekt:

const oma = {
  name: 'Elfriede',
  greet: function () {
    console.log(`Ich heiße ${this.name}.`);
  }
};

const talk = oma.greet;
talk();
Standard
Auf Deutsch, Coding, Wordpress

Für Buchblogs: Bibliografien zu einem Autor ausgeben

Gestern hatte ich erklärt, wie ihr über eine Schlagwortausgabe in einem Buchblog weitere Bücher eines Autors ausgeben könnt. Die Schlagworte kann man aber noch weiter verwenden, und zwar für eine automatische Bibliografie zum Autor.

Warum die Standardabfrage nicht für Bibliografien gemacht ist

Über die Verschlagwortung einzelner Artikel kann man eigentlich ganz einfach eine Bibliografie erstellen: So tauchen alle Bücher, die ich unter „Haruki Murakami“ verschlagwortet habe, auf einer Seite auf, die das URL-Schema „http://meinedomain.de/?tag=haruki-murakami“ hat. Die Bibliografie generiert sich also automatisch von selbst. Allerdings werden diese Einträge nach Erstellungsdatum geordnet ausgegeben. So kann eine Liste dann beispielsweise so aussehen:

Die Abfrage dazu in tag.php (liegt im Theme-Ordner) sieht dann so aus:

<h2><?php single_tag_title(); ?> </h2>
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></p>
<?php endwhile; ?>

Ich möchte nun aber noch ein Erscheinungsdatum hinzufügen – schließlich soll es ja eine richtige Bibliografie werden, die einen chronologischen Überblick über das Werk des Autors gibt. Dazu lege ich ein Custom Field „erscheungsjahr“ unter zu jedem Artikel an, den ich mit einem Autorennamen verschlagwortet habe (wie ihr dieses anlegt, hatte ich ebenfalls im letzten Artikel erklärt). Damit das Erscheinungsjahr nun auch angezeigt wird, füge ich innerhalb des Loops eine Zeile hinzu:

<?php echo get_post_meta($post->ID, 'erscheinungsjahr_japan', true); ?>

Nun gibt mir WordPress folgende Liste aus:

Haruki Murakami

2004: After Dark

1988: Tanz mit dem Schafsmann

1987: Naokos Lächeln

Die Liste ist nicht chronologisch geordnet, da WordPress die Artikel nach Erstellungsdatum ausgibt, das heißt After Dark ist der neueste Artikel. Für die Tags möchte ich aber eine chronologische, also hier numerische Ordnung nach dem Custom Field „erscheinungsjahr“. Deshalb muss die Abfrage etwas umgeschrieben werden.

Eine chronologische Bibliografie erstellen

Die Abfrage in tag.php muss also durch folgenden Code ersetzt werden:

<h2><?php single_tag_title(); ?></h2>

<?php if ( tag_description() ) : // Show an optional tag description ?>
<?php echo tag_description(); ?>

<?php endif; ?>

<?php
query_posts( $query_string . '&orderby=meta_value_num&meta_key=erscheinungsjahr_&order=ASC' );
while ( have_posts() ) : the_post(); ?>

<p><?php echo get_post_meta($post->ID, 'erscheinungsjahr_japan', true); ?>: <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></p>

<?php
endwhile;
wp_reset_query();
?> 

Die Anzeige ist nun chronologisch:

Haruki Murakami

1987: Naokos Lächeln

1988: Tanz mit dem Schafsmann

2004: After Dark

Erweiterte Optionen

Wollt ihr noch eine Autorenbiografie hinzufügen, könnt ihr einfach zum Schlagwort eine Beschreibung hinzufügen. Außerdem ist es möglich, Seiten zu bestimmten Autoren beziehungsweise Tags individuell zu gestalten. Kopiert dazu einfach „tag.php“ und benennt sie um ind „tag-schlagwort.php“ beziehungsweise „tag-haruki-murakami.php“. Nun könnt ihr nur für dieses eine Schlagwort ein eigenes Template erstellen!

Wer es noch einmal ausführlich nachlesen möchte:

Standard