HTML 5

Diese Anwendung erlaubt das direkte Hochladen im Browser von Bildern im JPG-Format in ein Verzeichnis auf Euren Server.

Der Administrator-Bereich ist passwortgeschützt. Es können beliebig viele zusätzliche Benutzer für den Upload eingestellt werden, die ihre eigenen Zugangsdaten erhalten.

Die zusätzlichen Benutzer können nur ihre selbst hoch geladenen Bilder editieren, freischalten oder löschen. Der Administrator hat Zugang zu allen Bildern. Die Anwendung verwendet eine portable SQLite-Datenbank, die mittels .htaccess nach außen geschützt ist.

Das Original-Fotoalbum ist für mobile Geräte responsive gestaltet und optimiert.

Ihr könnt z.B. auch vom Smartphone Bilder aus der Galerie oder auch Bilder direkt aus der Kamera hoch laden. Die Größe der Bilder kann in den Einstellungen angepasst werden und diese wird beim Upload, bei mir z.B. auf ca. 10% der Original-Auflösung, reduziert – weil Benutzer meist sehr hoch auflösende Fotos am Smartphone erstellen.

http://www.nof-tutorials.com/Fotoalbum/

Fotoalbum

Hier mal was für die Bastler unter Euch 🙂

www.nof-tutorials.com/Responsive-Website-Section/

Mein Tutorial findet Ihr ebenfalls unter dem Link oben.

Das ist aber eher etwas für fortgeschrittene User, die sich nicht nur mit NOF sehr gut auskennen, sondern auch Erfahrungen mit HTML5, CSS3 und JavaScript haben.

Full Page Sections

Responsive Website Full Page Sections

Ich habe diese responsive Website mit NOF 2015 erstellt. NOF hat ja leider bisher immer noch keine Version, mit der man über die Werkzeuge responsive Webseiten erstellen kann, insofern habe ich hier einen Weg gesucht und gefunden, die Pixel-Angaben von NOF durch Prozent-Angaben zu ersetzen.

Die zusätzlichen Scripts für die Gestaltung dieser „Full Page Sections“ Anwendung habe ich im Internet gefunden. Diese Scripts sind sehr gut programmiert und wirken entweder über CSS3 oder auch über jQuery und funktionieren an sämtlichen Geräten und in allen Browsern.

Man kann die Seite in den unterschiedlichsten Varianten gestalten und diese auch alle kombinieren:

  • Navigation von einer Sektion in die andere mittels Scrollrad oder Tastatur-Pfeilen
  • Navigation auch über Buttons
  • Navigation über vertikale und/oder horizontale Navigations-Punkte
  • Slider in den einzelnen Sektionen einbauen, um weitere Seiten innerhalb einer Sektion darzustellen
  • Header und Footer einsetzen, fixiert oder auch nicht
  • Fullscreen Hintergrund-Bilder verwenden
  • Fullscreen Hintergrund-Videos verwenden mit oder ohne Ton
  • Gradient Hintergrundfarben
  • Looping nach der letzten Sektion
  • Kontinuierliches Scrollen durch alle Sektionen mit erneutem Start nach der letzten Sektion
  • Easing Effekte
  • Scrollbalken der Seite anzeigen oder auch nicht
  • Scrollbalken innerhalb von Sektionen oder Slidern verwenden für höhere Inhalte

… und vieles mehr.

Hier habe ich mal den Versuch gemacht ein Video als Hintergrund einer responsiven Website, die ich mit NOF erstellt habe, zu verwenden.

www.nof-tutorials.com/Responsive-Background-Video/

Dieses HTML5 Video wird nur mit einer CSS als Fullscreen Background dargestellt und funktioniert auch auf dem mobilen Gerät, allerdings nicht mit dem hier eingestellten automatischem Start, da mobile Geräte keine Videos automatisch starten. Benutzt den Pause/Play Button um das Video am mobilen Gerät zu starten.

Hier geht es zu meinem dazugehörigen Tutorial

… unten eine Ansicht von meinem Android-Handy

Handy-Screenshot

Heute möchte ich Euch einen wirklich tollen Kalender von Webbausteine.de vorstellen.

Dieses Skript ist „Open Source“ und kann beliebig verwendet und angepasst werden.

Man benötigt eine MySQL-Datenbank, die man lediglich bei seinem Provider erstellen muss, die Skripte von „Webbausteine.de“ legen sämtliche Tabellen der Datenbank automatisch an und man braucht null Ahnung von einer MySQL-Datenbank zu haben. Der Kalender ist „Ajax“ basierend und daher muss die Seite bei der Navigation nicht neu geladen werden.

Man kann optional direkt über den Kalender oder über einen separaten Editor eigene Events eintragen, editieren oder löschen – weiterhin kann man anderen Usern die Berechtigung erteilen selbst Termine einzutragen. Diese können dann ausschließlich ihre Termine bearbeiten, der Admin kann alle bearbeiten. Es können optional die deutschen Feiertage angezeigt werden und auch jährliche wiederkehrende Ereignisse, wie z.B. Geburtstage, eingetragen werden.

Sämtliche Skripte sind hervorragend kommentiert und der Einbau in NOF erfordert lediglich eine einzige Zeile in dem Editor eine Textfeldes und ist somit in wenigen Minuten erledigt.

An dieser Stelle ein großen Lob und ein dickes DANKE an Werner von Webbausteine.de

Hier habe ich die Skripte in NOF 2013 (Update 5) eingebaut – das sollte aber auch in jeder anderen NOF-Version funzen.

www.nof-tutorials.com/Kalender/

 

Kalender-MySQL

 

 

 

Endlich steht eine neue umfangreiche Anleitung für den Aufbau eines eigenen Designs mit NOF zur Verfügung.

Es sind also nun zwei Versionen vorhanden:

Das Original wurde umgezogen:

Die alte Version – Ein eigenes Design mit NOF – Mit Tabellen (mit der Geranien-Vorlage)

 

Die neue Anleitung befindet sich auf den Hauptseiten der NOF-Schule:

Basisanleitung insbesondere für NetObjects Fusion 2013

NetObjects Fusion Tutorial

Inhalte:

Eine genaue Auflistung der Inhalte wurde in der NOF-Schule veröffentlicht:

http://www.nof-schule.de/forum/t-neues-tutorial-ein-eigenes-design-mit-nof

Die Themen sind übersichtlich mit Ankern verlinkt, so dass man in den Tutorials auch sehr leicht einzelne Themen finden und bearbeiten kann.

Eine Druckversion ist in Vorbereitung.

 

 

Ein wirklich gutes und sehr einfach zu bedienendes Programm zur Erstellung eines HTML5 MP3 Players.

Dieser Player bietet eine Vielzahl von verschiedenen Designs, mit oder ohne Bilder. Man kann eine Gruppe von Songs oder auch einzelne Songs eintragen. Die CSS der Player ist bei Bedarf auch individuell abzuändern. Es können mehrere unterschiedliche Player auf der gleichen Seite, mittels Angabe der ID, eingebaut werden. Ein aktiver Player stoppt automatisch beim Start eines anderen Players oder Songs.

Die gekaufte Version bietet weit mehr Möglichkeiten und Designs als die freie Version. Weiterhin kann man durch den Kauf auch den Link zum „Amazing Audio Player“ entfernen. Zum Testen oder für den einfachen Gebrauch ist die freie Version aber sehr gut zu gebrauchen.

Der Player funktioniert auf sämtlichen Geräten in allen Browsern und ist leicht in NOF einzubauen.

www.nof-tutorials.com/Amazing-Audio-Player/

AmazingAudioPlayer