Tommy Herrmann

Ich betreibe NOF als reines Hobby und so ist auch meine NOF Hilfe und Tutorial Website entstanden. Ich bin weder Webdesigner noch habe ich beruflich etwas mit Webdesign zu tun. Es macht mir einfach nur Spaß, wenn ich Euch meine Erfahrungen weitergeben und an der einen oder anderen Stelle auch mal erfolgreich helfen kann. Viel Spaß mit unserem Blog, unserem NOF-Forum und meiner Hilfe Seite zu NetObjects Fusion wünscht Euch Tommy.
1 2 3 16

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.

Heute möchte ich Euch eine sehr einfache Möglichkeit vorstellen, eine NOF (NetObjects Fusion) Seite responsive zu gestalten und, bei Bedarf, mit einem Parallax-Effekt zu versehen. Als „Parallax“ versteht man fixierte Fullscreen-Hintergrundbilder, die beim Scrollen einer Seite in einem Objekt-Bereich diese Bilder über dem gesamten Bildschirm anzeigen.

www.nof-tutorials.com/Responsive-Website-Layout-CSS-Parallax

Responsive Parallax Seite

NetObjects Fusion arbeitet bereits seit geraumer Zeit an einer responsiven Lösung für ihre Software. Im Moment weiß aber niemand, wann es soweit sein wird. Für „Bastler“ ist das inzwischen vielleicht eine Lösung 🙂

Hier geht es zu meinem Tutorial für diesen Versuch von mir, den ich mit NOF 2015 realisiert habe.

www.nof-tutorials.com/Responsive-Website-Layout-CSS-Parallax/Tutorial/tutorial.html

1 2 3 16