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

Mit großer Freude möchte ich Euch mitteilen, dass ich von Webbausteine.de, den (noch verbesserten) Formular-Generator zur Verfügung gestellt bekommen habe.

Hierfür vielen Dank an Werner 🙂

Mit diesem Formular-Generator kann man valide Formulare erstellen, die sehr viele unterschiedliche Optionen haben und auch einen sehr sicheren Schutz gegen Spambots bieten.

Es wird in 3 einfachen Schritten eine komplette HTML-Seite generiert, in die man lediglich noch seine korrekte e-Mail eintragen muss und das Formular ist sofort einsetzbar. Egal, ob am PC oder Handy. Es ist auch sehr einfach, diesen Code direkt in eine NOF-Seite einzubinden.

http://www.nof-tutorials.com/Kontakt-Formular-Generator/Tutorial/tutorial.php

Formular-Generator

zum Formular-Generator

Mit der CSS für diese ul / li Text-Navigation kann man sehr leicht eine Anpassung für mobile Geräte vornehmen, sodass sich die Navigation bei einem kleinen Display von einer horizontalen in eine vertikale Navigation ändert.

Ich habe das mal auf einer Beispielseite für ein responsives Design in NOF 2015 hier eingebaut. Schiebt das Browser-Fenster zusammen oder ruft den Link mit dem Handy oder Tablet auf, um den Effekt zu sehen. Für die CSS klickt in der Navi auf Tutorial Navigation.

Responsive Website mit responsiver Navigationsleiste

 

Teil-Ansicht am PC:

Ansicht-PC

Ansicht am Handy:

Screenshot-Handy

 

… und hier noch eine Erweiterung, die bei kleinen Displays (Handy hochkant) auf eine zusätzliche Slick-Navigation umschaltet.

Ansicht Handy Slick-Navigation (ab 600px Displaybreite):

Slick-Navigation

 

… und noch eine Erweiterung mit der sehr schönen, responsiven Navigationsleiste von SmartMenus, sowie dem Einbau von zusätzlichen, parallaxen Layoutbereichen.

www.nof-tutorials.com/Responsive-Website-Layout-CSS/Layoutbereiche/layoutbereiche.html

… und noch eine Erweiterung mit einer eigenen @Media-Navigation und einer Gestaltung der Seite mittels CMS (Content Management System).

www.nof-tutorials.com/Responsive-Website-Layout-CSS/CMS/cms.php

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