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.

Kategorien
Content Management Systeme Frameworks Shared Hosting Site Builder Webdesign Webserver

Contenta CMS

In der letzten Woche habe ich über JavaScript geschrieben und wie man interaktive Elemente beispielsweise in einen WordPress Artikel einbinden kann.

Ein CMS wie WordPress hat ein Backend (den Administrationsbereich) und ein Frontend (die Website). Die JavaScript Befehle im Artikel der letzten Woche wurden zwar im Backend eingegeben und mit dem Artikel gespeichert, ausgeführt werden sie allerdings im Browser des Besuchers. Das ist ein möglicher Ansatz, ein bereits existierendes Frontend mit interaktiven Elementen anzureichern.

Die Anforderungen an Websites und Content Management Systeme verändern sich seit ein paar Jahren. Der Trend geht hin zu viel mehr Interaktionen im Frontend und vielfältigerer Nutzung der Daten des Backends (Multi Channel). Daher ist ein anderer Ansatz, die Trennung von Backend und Frontend, immer häufiger anzutreffen. Man spricht dann von Decoupled oder Headless CMS. In WordPress ist das möglich über die REST API, aber es ist noch nicht so wirklich verbreitet. Da Drupal seine Stärken im Backend Bereich hat, entwickelt sich dort gerade eine Tendenz zu decoupled Drupal Projekten.

Kategorien
Content Management Systeme Shared Hosting Site Builder Webdesign

JavaScript

Die Erfindung der Sprache JavaScript ist mittlerweile 22 Jahre her.
Der damalige Browser Hersteller Netscape stand unter starkem Konkurrenzdruck. Microsoft befürchtete, dass sich Netscape als eine Art Middleware auf Windows durchsetzen würde. Damit wäre Microsofts damaliges Betriebssystem Monopol bei PCs gefährdet gewesen. Microsoft entwickelte 1995 einen eigenen Browser, nannte ihn Internet Explorer, und wollte ihn zum kostenlosen Standard Browser machen. Netscape hatte damals mehr als 80% Marktanteil und verkaufte seinen Browser an die Kunden! Der Netscape Browser bot die Möglichkeit Programme, die in „der“ Programmiersprache Java geschrieben waren, im Browser als sogenannte Applets darzustellen. Diese Applets hatten Schnittstellen zu herkömmlichen Java Programmen und zur HTML basierten Website in der sie eingebettet waren. So konnten „die Website“, „das Applet“ und „der Server“ miteinander kommunizieren. Microsoft hatte keine vergleichbare Technologie, konnte aber den Internet Explorer mit dem Windows Betriebssystem unter Missachtung gängiger Standards enger verzahnen als Netscape und hatte außerdem ein vergleichsweise endlos großes Budget. Netscape benötigte also auf Sicht ein weiteres Feature das Microsoft nicht hatte.