WebAnimation with CSS3-Transitions and -Transformations :: HowTo

When you visit my website, you can see some elements moving and fading while hovering over the browser-viewport. In this article I want to explain how I did it: 

 

First you must know, that all elements in a website could be addressed by CSS (Cascading StyleSheets) commands for modifying the color, the size and the position of each object. That’s the main goal of using CSS: Just to manipulate these three options!

But now we want to start an animation, so we need more options for each object to be changed: A start-position, an end-position and the duration of that activity.

But before we begin to create these elements, we must know, that one CSS-Rule is acting on every page and at every time we’re visiting a website:

This CSS command is always active and true, because a website consists of an HTML-document and has a BODY for containing the scripts for the output to the browser.

There are some CSS declarations for user-interaction, which we want to use for our animation:

These CSS commands are ready out-of-the-box and available in every modern browser with HTML5 support.

hover = User moves with his pointerdevice over an element to activate the CSS rule

blur = User moves with his pointerdevice to a different element to activate the CSS rule

focus = User moves with his pointerdevice to the element to activate the CSS rule

When a user visits a website, we know, that the CSS rule “html body” is always active (true). Great! We have a state of a website for starting our animation with it.

To initiate an animation when the user visits our website, we use the “html body” CSS directive in combination with the pointerdevice declarations:

So we have a complete new CSS directive which differs from the initial state at the beginning of a pagevisit and are able to use this new state for define an end of our animation.

So far… so good. But how to use this in CSS for other elements on our page?

The answer is simple: Just write the starting and ending CSS directive before each normal CSS command.

For example, you want to call a DIV with the ID “container”, then type:

This is possible, because HTML and BODY are the parent-elements of each object in the website. Always!

That’s the basic way I’m using the state of a website with the knowledge, if the user is onto the BODY element with the pointerdevice, respective the viewport has been hovered…

 

Now we can write CSS with two states of activity: One at the first pagevisit, and the other when hovering with the pointerdevice over the viewport.

An animation needs a duration. A given time is responsible for a transition and/or transformation run of an object. Without that delay, the animation would just “blink” or “flickr”.

As an example, a CSS3 definition of a time delay of 250 milliseconds for an object is given as following command:

You can add a position, a size and other CSS definitions into that rule. Then you write the same CSS declaration, but this time with a hover-statement as written above.

I can’t explain all CSS3 features in this article, because of too much information, but I can give you a hint to write these CSS definitions with ease. Use the great Online CSS3-Generator: http://css3generator.com/

The generator is a great tool and helps you to find correct values for writing CSS3 for your own projects.

There could be different or better techniques using CSS3 with :hover or :blur. But I’ve got my experience with this combo and I like it.

 

Happy coding…

Share & Like

Gulpfile :: Tips & Hints for successfull stream-pipelining

On this article, I collect all relevant information about Gulp to have a reference for a successful work with it!

 

Gulp is like a sequenced NodeJS-App, which does multiple tasks in an order (pipeline) to create a file (data-stream), e.g. SASS assets compiling…

I found a good article about errorhandling with “Gulp” written by Kate Hudson on following pagelink: http://blog.ibangspacebar.com/handling-errors-with-gulp-watch-and-gulp-plumber/

 

This is the modified Gulpfile from the Roots.IO “Sage” theme, which the Awebgo template is based on. The functions for font-recalculation and image-resizing are deactivated, so there’s a faster way to watch the scss-files on change. A modification for extended error-handling is also implemented [see: .plumber()]:

You can build your own WordPress theme with the “Sage” starter-package from Roots.IO and use the enhanced features of Gulp for the layout-design in the SASS language: https://roots.io/sage/

Share & Like

NodeJS mit NVM für die Webentwicklung verwenden

Viele Webseiten nutzen heutzutage diverse Technologien, um einen möglichst großen Leistungsumfang abzudecken. Eine der umfangreichsten Anwendungsmöglichkeiten bietet “NodeJS”: Mit NodeJS kann man einen autarken Webserver aufbauen, oder auch eine komplette Webseite bereitstellen.

Um NodeJS zu verwenden, bietet sich ein kleines Tool im Netz an, womit sich die Installation fast wie von selbst bewerkstelligen lässt: NVM

In diesen Beitrag möchte ich das Tool “NVM” vorstellen und anhand einzelner Beispiele den Nutzen nahebringen.


1) Zuerst muss das Tool “NVM” von folgendem Git-Repository heruntergeladen werden: https://github.com/creationix/nvm

Dazu begeben wir uns in den Heim-Ordner unseres Accounts innerhalb unseres Webservers und laden das Repository herunter und “sourcen” das Installationsskript:

  Tip: Zusätzlich sollte die letzte Zeile zum Sourcen auch in die Datei ~/.bashrc bzw. ~/.zshrc eingefügt werden (je nachdem ob man die Bash oder ZSH nutzt), damit NVM bei jedem Login in der Shell zur Verfügung steht…


2) Nun installieren wir NodeJS mit folgenden Befehl:

Damit haben wir nun die Tools “Node” und “NPM” in unserer Shell aktiviert. Es wird ausdrücklich empfohlen, immer die neueste Version von NPM zu verwenden, damit beim Erstellen der NODE_MODULES uns keine bösen Überraschungen kommen:

Jetzt besitzen wir die aktuellste Node und NPM Version und können nun mit den Zusammenstellen der Pakete beginnen…

 

Übrigens:

Sollte die Installation der “node_modules” fehlschlagen oder der Ablauf der Skripte erscheint fehlerhaft, so kann ein

Abhilfe schaffen und den NPM-Zwischenspeicher aufräumen. Ein zweiter Versuch des vorherigen Befehles sollte dann zum Erfolg führen…

 

Wenn NodeJS für die Assets-Kompilierung benötigt wird (in Form von z.B. Gulp oder Bower), speziell für Bild-Transformationen (Größe, Kompressionrate, Farbkanal-Änderungen) im Zusammenhang mit SASS/SCSS und es kommt dabei ein Skript-Fehler heraus, dann diese beiden Befehlszeilen eingeben:

Damit werden die Skripte aller Bildänderungen wieder ausgeführt.

Share & Like

Require.JS :: Scripte einbinden

01.) Die Datei “r.js” in das HTML-Template einbinden.

02.) In einer Konfigurationsdatei die Pfade und Ladeabhängigkeiten definieren. Diese Datei dann per

in den Scope laden.

 

Die Pfade sind das ausschlaggebende Merkmal aller Plugins! Diese müssen explizit an die jeweilige Website-Struktur angepasst werden.

 

Dieses Beispiel der “config.js” zeigt die Pfade dieser Website:

 

03.) Anschließend wird die Haupt-Javascript-Datei aufgerufen, in dem alle möglichen Plugins nach belieben verwendet werden:

 

 

Wer sich zB. die Require.JS Konfiguration von Awebgo (ehem. Loopshape) ansehen möchte, kann es unter diesen folgenden Link tun: main.js

 

Aufgerufen wird die Datei über folgende Scriptanweisung:

 

Weiterführende Informationen gibt es auf der Hauptseite von Require.JS: http://requirejs.org/docs/api.html

Share & Like

Treeline.io • Create a NodeJS app with a browserinterface

Treeline.io ist eine webbasierte Steuerungs-Oberfläche zum Erstellen einer NodeJS-Applikation basierend auf dem JS-Content-Management-System “SailsJS”.

Hier geht’s zur Website: Treeline.io

Treeline ermöglicht das bequeme Verwalten der einzelnen Module und zugehörigen Pakete
Treeline ermöglicht das bequeme Verwalten der einzelnen Module und zugehörigen Pakete
Treeline kompiliert alle Module und Paketabhängigkeiten zu einer vollständigen NodeJS-Anwendung
Treeline kompiliert alle Module und Paketabhängigkeiten zu einer vollständigen NodeJS-Anwendung
Eine hierarchische Darstellung aller Prozeduren wird visuell anhand eines Flussdiagrammes dargestellt
Eine hierarchische Darstellung aller Prozeduren wird visuell anhand eines Flussdiagrammes dargestellt
Share & Like

Linux “Ubuntu” LAMP-Server on Android • Part 1

Was bringt mir ein transportabler Webserver für unterwegs? …ganz viel!

 

Ein Webserver, den man überall mit hinnehmen kann, ist schon eine tolle Sache: Ich kann jederzeit und überall diverse technische Änderungen vornehmen und meiner Kreativität jederzeit freien Lauf lassen…

Deswegen bin ich auch so von dem Ubuntu LAMP-Server überzeugt! Mitunter einen voll konfigurierbaren Apache2 HTTP-Server und einer MySQL Datenbank mit PHPmyAdmin-Zugriff ist alles notwendige vorhanden, um mobil Webentwicklung zu betreiben. Auch auf “Composer”, “NodeJS” und “Grunt/Gulp” brauch ich nicht zu verzichten. Bei Bedarf kann auch noch RubyOnRails installiert werden, solange der Speicher noch genügend Platz auf der Speicherkarte hergibt.

Wie ich den Webserver auf einen Android-Gerät wie zB. einen Tablet einrichte, wird näher in einen vorigen Post von mir erwähnt: Ubuntu LAMP-Webserver auf einem Android Device

Login in Linux Ubuntu über ein Android-Device
Login in Linux Ubuntu über ein Android-Device
Ein Editor für die Remote-Datei-Verwaltung
Ein Editor für die Remote-Datei-Verwaltung
Ein Apache2-Webserver liefert die nötige Power für die PHP-Scripte
Ein Apache2-Webserver liefert die nötige Power für die PHP-Scripte

 

Share & Like

PHP • PayPal REST-API :: How to

If you want to use ExpressCheckout via the REST API from Paypal, you can follow these steps to get a working API within your webapp.

1. Install Composer, Curl and PHP on a Webserver

2. a) Create a composer.json file with following data from the top of this page: https://developer.paypal.com/webapps/developer/docs/api/

2.b) Install the libraries with composer install

2.c) Include the autoload.php from the Composer installation with a require_once.

3.a) Setup the REST-API-SDK-PHP library files with your credentials from the Paypal developer site: sdk_config.ini and in the bootstrap.php that could be found in the folder vendor/paypal/rest-api-sdk-php

3.b) Set up a define command with a pointer to the sdk_config.ini file. define(‘PP_CONFIG_PATH’, …path to the sdk_config.ini file…);

4. Build a form with a PayPal-button and send the form parameters via $_POST to this file: https://github.com/paypal/rest-api-sdk-php/blob/master/sample/payments/CreatePaymentUsingPayPal.php

5. After successful payment from the Paypal website you have to redirect the user to this file: https://github.com/paypal/rest-api-sdk-php/blob/master/sample/payments/ExecutePayment.php

You are done!

Share & Like

Willkommen zum TechJournal von Awebgo

Auf dieser Internetpräsenz wird über alle erdenklichen Themen der Webentwicklung gepostet. Darum hier nun ein eigenes Zitat:

An algorithm is a description of a formula in the mind, projected from the inner thoughts going over to the outer world as a calculation. Materialized as a result or a state. It’s a value to have. So the mind could handle it’s logic.

Digitale Grüße vom Webmaster „Arjuna”

Share & Like