Kategorien
Content Management Systeme Infrastruktur Shared Hosting Webdesign Wunschthema

Wie erstelle ich eine Website?

Für das Blog freue ich mich immer über Wunschthemen. In letzter Zeit, wohl auch durch die Ausgangssperren, erreichten mich mehrere Anfragen von Lesern, die eine Website erstellen wollen und unsicher waren, wie das geht. Sinngemäß lautete die Frage etwa so:

“Meine Tochter [Sohn, Frau, Schwager, Freund, Kollege, ich] möchte eine Website erstellen. Ich kenne ein wenig WordPress [Joomla, Drupal, Typo3] weil XY das auch verwendet. Wo fängt man da am Besten an? Was ist langfristig sinnvoll?“

In diesem Blog Post versuche ich eine Antwort zu geben.

Kategorien
Content Management Systeme Programmieren

News aus WordPress auf anderen Seiten anzeigen

Wenn eine Website erstellt wird, so passiert das heute selten „auf der grünen Wiese“. Meistens existiert schon eine Vorgänger Website, manchmal betreibt man mehrere Websites. Manchmal bloggen auch Personen in der Firma zu Themen, die interessant sind. Eine Anforderung, die mir in letzter Zeit relativ häufig begegnete war das Einbinden von Beiträgen aus einem WordPress Blog in eine andere Website, möglichst ohne die Nutzung von PHP oder anderen Programmiersprachen auf der Serverseite. So prinzipiell suchte man „nach einem JavaScript Schnipsel“.

Nachdem ich nun alle möglichen „JavaScript Schnipsel“ ausprobiert habe, entschloss ich mich selbst etwas einfaches zu schreiben.

Kategorien
Content Management Systeme Shared Hosting Site Builder Webdesign

Custom CSS und JavaScript in Drupal

Du hast eine Drupal Site und möchtest auf einer oder mehreren Seiten zusätzliches CSS und JavaScript hinzufügen? Du willst oder kannst keine Änderungen an den Dateien des Themes vornehmen?

Dann benötigst du das Asset Injector Modul! Es ermöglicht auf einfache Weise CSS Anweisungen und JavaScript Befehle im Browser hinzuzufügen. Der Geltungsbereich kann über Regeln definiert werden.

Kategorien
Content Management Systeme Site Builder Webdesign

Animiertes Scrolling mit ScrollReveal

Animationen sind Techniken, die für den Betrachter ein bewegtes Bild erzeugen. Bei Animationen geht um so grosse Worte wie Charme und das Ziel einer Animation ist Aufmerksamkeit. Die bewegten Bilder werden durch quetschen und strecken, beschleunigen und abbremsen, überlappende und unterstützende Bewegungen, Bewegungsbögen, Übertreibungen und weitere Effekten erstellt.
Fast jede Website enthält in der einen oder anderen Weise Animationen, beispielsweise für die Art und Weise wie ein Menü aufklappt oder ein Button geklickt wird. Animationen können auf den Besucher sehr polarisierend wirken. Man mag sie oder man mag sie nicht. Allgemein akzeptierte Animationen sind eher dezent und unauffällig und werden auf den ersten Blick gar nicht als Animation wahrgenommen.

Letzte Woche bin ich mal wieder über die JavaScript Library ScrollReveal „gestolpert“. Die gibt es schon seit mehreren Jahren, aber der Effekt kommt nun auch bei größeren Sites an. So prinzipiell geht es darum den Vorgang des Scrollen mittels JavaScript zu animieren. Die Elemente der Website werden dabei während des Scrollens „charmant“ eingeblendet. Gerade auf mobilen Geräten ist dieser Effekt sehr oft zu sehen.

Zum besseren Verständnis, hier ein, wie sollte es anders sein, animiertes GIF um den Effekt etwas deutlicher zu machen.

Animiertes Scrollen
Animiertes Scrollen

Um ein wenig die „Magie“ aus der Sache zu nehmen und dich zu motivieren, auch mal mit Animationen zu experimentieren, zeige ich wie einfach dieser Effekt in jede Website eingebaut werden kann.

ScrollReveal in eine Website einbauen

Scroll Reveal ist eine 8.8 Kilobyte große JavaScript Datei, die den notwendigen JavaScript Code enthält. Du kannst sie auf deinen Server laden oder aus einem Content Delivery Netzwerk nutzen.

Um die Datei einzubinden, musst du sie in den HTML Code deiner Site einbinden.

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>

In WordPress und Joomla geht das ganz leicht im Admininistrationsbereich (WordPress: Design -> Editor, Joomla: Erweiterungen -> Templates). Wenn du die Dateien nicht per Browser bearbeiten kannst, musst du die passende Datei, wie beispielsweise in Drupal per FTP oder auf der Konsole ändern oder eine Erweiterung installieren mit der du die Dateien im Browser bearbeiten kannst.

Ich bleibe beim WordPress Beispiel und ändere gleich mal unser Novatrend Blog. In der Datei mit der Fußzeile, die in WordPress meistens footer.php heißt, musst du den Code einbinden.

Scrollreveal in Footer einbinden
Scrollreveal in Footer einbinden

Die Datei wird nun bei nächsten Seitenaufruf geladen. Noch passiert aber nichts, denn du musst noch konfigurieren, auf welche CSS Klassen welcher Effekt angewendet werden soll.

Um beispielsweise alle Artikel in der Übersichtsliste zu animieren, benötigst du folgenden Code:

<script>
  window.sr = ScrollReveal();
  sr.reveal('.post', {
    duration: 2000,
    origin: 'bottom'
    })
</script>

window.sr ist umfasst alle Bereiche auf die die Animationen angewendet werden sollen.
sr.reveal(‚.[CSS Klasse]‘, { [Parameter] } übergibt eine bestimmte Konfiguration des Effekts an die CSS Klasse, die animiert werden soll. In meinem Fall soll die Klasse .post in 2000 Millisekunden (duration: 2000) von unten kommend (origin: ‚bottom‘) eingeblendet werden.

Wenn du also beispielsweise das Menü von oben, die Widgets von rechts und die Artikel von unten einblenden willst, musst du für die entsprechenden CSS Klassen diese Bedingungen formulieren. Die Namen der Klassen sind abhängig vom Template.

<script>
  window.sr = ScrollReveal();
  sr.reveal('.post', {
    duration: 2000,
    origin: 'bottom'
    })
  sr.reveal('.widget', {
  duration: 2000,
  origin: 'bottom'
    })
  sr.reveal('.site-header-menu', {
  duration: 2000,
  origin: 'bottom'
    })
</script>

Den Effekt, den dieser Code erzeugt, erlebst du gerade hier auf der Site.

Hinweis: Abhängig von der Länge der Beiträge ist es sinnvoll, andere Klassen als .post zu konfigurieren. Wenn der Beitrag nicht auf den Screen passt, wird er sonst erst nach beim Scrollen angezeigt. Hier im Blog habe ich letztlich die Klassen .entry-header, .post-thumbnail, .caption und .entry-footer angesprochen, so dass sich auch ein einzelner Artikel nach und nach aufbaut. 

Du kannst es so konfigurieren, dass die Animation einmalig erscheint (default) oder so, das jedesmal, wenn das Element auf dem Bildschirm erscheint die Animation ausgeführt wird (window.sr = ScrollReveal({ reset: true });). Ich habe mich für eine einmalige Animation entschieden.

Elemente können auch ins Bild gedreht werden und es gibt viele weitere Effekte, die auf der GitHub Page des Projekts beschrieben werden.

Link

https://scrollrevealjs.org


tl;dr: Scroll Animationen sind viel einfacher als du denkst

Kategorien
Frameworks Webdesign

Vue.js

Heute soll es um Vue.js gehen. Das sagt Wikipedia:

Vue.js ist ein Webframework zum Erstellen von Single-Page-Webanwendungen nach dem MVVM Muster. Vue.js gilt als progressiv und inkrementell adaptierter sowie less opinionated im Vergleich zu anderen Webframeworks.

Wenn du, so wie ich, gehofft hast, dass man das verständlicher erklären kann, hier ein Versuch:

Webframework: Wenn du bereits HTML, CSS und JavaScript „kannst“, dann hilft dir ein Webframework bestimmte Aufgaben schneller zu erledigen. Bekannte Webframeworks sind beispielsweise Bootstrap, AngularJS, Ember.js, jQuery, MooTools und React.

Single-Page Anwendung: Darunter versteht man eine Webanwendung, die aus einem einzigen HTML Dokument besteht, dessen Inhalte dynamisch nachgeladen werden.

MVVM-Muster: MVVM ist die Abkürzung von ModelView ViewModel und ist eine Variante des Entwurfsmusters Model View Controller (MVC).

Entwurfsmuster: Ein Entwurfsmuster ist eine bewährte Lösungsschablone für wiederkehrende Probleme in der Softwareentwicklung und übrigens auch in der Architektur.
In der Architektur ist beispielsweise ein „Fensterplatz“ ein Entwurfsmuster in einem Haus. Jeder freut sich über einen gemütlichen Platz am Fenster.  

… gilt als progressiv … : Unter einer progressiven Web App (PWA) versteht man eine responsive Website, die sich wie eine native App „anfühlt“. PWAs können auch offline bedient werden und setzen zwingend das HTTPS-Protokoll ein. Eine gute PWA kombiniert die Website, die mobile Version der Website und die native App und spart dadurch erhebliche Entwicklungskosten.