Forum: PC-Programmierung Navigations Konzept eines Webinterfaces


von Philipp (Gast)


Lesenswert?

Hallo,

meine Frage ist zwar nur im weitesten Sinne PC-Programmierung, aber 
vielleicht kann mir hier trotzdem jemand einen schnellen Tipp geben.

Ich bin gerade dabei ein Webinterface zu bauen. Das ganze wird lokal im 
Netzwerk laufen, von daher ist es wohl nicht notwendig noch das letzte 
kB irgendwo einzusparen.

Weil Frames ja nun irgendwie nicht mehr so der Renner sind habe ich mal 
versucht es ein wenig moderner aufzubauen. Darum besteht die Startseite 
nun aus einem html File, dass eine Box mit den Navigationslinks enthält.

Meine Frage ist nun: Wie baut man so etwas heutzutage schlau auf?

Möglichkeit 1:
Ich fange den Klick auf den Link mittels Javascript ab und lade per 
JavaScript nur den div Container nach in dem die ausgewählte Seite 
erscheinen soll.

Dann bekomme ich aber wahrscheinlich irgendwann Probleme mit JS 
Funktionen die auf Elemente angewendet werden sollen, die es nicht mehr 
oder noch nicht gibt. Außerdem weiß ich nicht, ob es evtl. Probleme mit 
dem Browser Cache geben könnte.

Möglicheit 2:
Ich baue für jeden Link so eine HTML Seite die bis auf den 
angesprochenen Container genauso aussieht wie die andere. Dann habe ich 
keine Cache oder JS Probleme, aber ich muss dann jede Änderung an allen 
Seiten einpflegen.

Irgendwie gefallen mir beide Konzepte nicht so richtig. Wie macht man 
sowas denn normalerweise im professionellen Bereich?

Vielen Dank
Philipp

PS: jquery und jqueryUI werden ohnehin verwendet, falls es hierüber 
einen eleganten Weg gibt

von D. I. (Gast)


Lesenswert?

Philipp schrieb:
> Irgendwie gefallen mir beide Konzepte nicht so richtig. Wie macht man
> sowas denn normalerweise im professionellen Bereich?

Templating

von Philipp (Gast)


Lesenswert?

Dann muss ich ja den kram durch ein Tool schicken, dass mir dann die 
Seiten daraus baut.

von P. M. (o-o)


Lesenswert?

Philipp schrieb:
> Möglicheit 2:
> Ich baue für jeden Link so eine HTML Seite die bis auf den
> angesprochenen Container genauso aussieht wie die andere. Dann habe ich
> keine Cache oder JS Probleme, aber ich muss dann jede Änderung an allen
> Seiten einpflegen.

Eigentlich "macht man das so". Meist hat man aber ein serverseitiges 
Skript im Hintergrund, das den Inhalt und die Struktur zusammenbaut. 
Schau dir z.B. mal PHP an.

von Lorenz (Gast)


Lesenswert?

Du hast doch sowieso eine Serverseite. Dort bestimmst du was gecacht 
wird und was nicht, egal ob du jeweils die ganze HTML Seite lädst oder 
nur Teile.
Mit JS wirkt es halt netter ist aber nicht nötig.
Siehe Autor PM, mit php oder ähnlichem brauchst du nicht jede Seite von 
vorne bauen.

von Philipp (Gast)


Lesenswert?

Vielen Dank für die schnellen Kommentare!

PHP läuft ohnehin auf dem Rechner und in der alten Version dieser 
Software wurde auch alles mit PHP zusammengebaut. Ich wollte das Ganze 
jetzt etwas moderner gestalten und nicht bei jedem Klick die Seite neu 
laden (Navigation ist natürlich schon was anderes).

Von jemand anderen habe ich noch den Tipp bekommen einfach alle div 
Container in die Seite zu packen (sind eh weniger als 10 
Navigationspunkte) und die nicht ausgewählten auszublenden.
Wahrscheinlich werde ich es genau so machen, dann können auch 
ausgeblendete Elemente im Hintergrund aktuell gehalten werden und ein 
Klick durch die Navigation läuft nur lokal ab und man hat das Ergebnis 
sofort.

von Noch einer (Gast)


Lesenswert?

Unter dem Stichwort Single-page-Webanwendung setzt sich zur Zeit eine 3. 
Variante durch. Du baust ein Anwendungsprogramm in Javascript, was nur 
die Daten vom Server holt.

Mit diesem Stichwort findest du verschiedene Frameworks und Tutorials. 
Alles noch nicht so wirklich überzeugend, aber besser, als selbst
wieder von Null anfangen.

von Philipp (Gast)


Lesenswert?

Noch einer schrieb:
> Du baust ein Anwendungsprogramm in Javascript, was nur
> die Daten vom Server holt.

An so etwas habe ich auch gedacht. Als Server soll später mal ein 
Raspberry  Pi zum Einsatz kommen. Da ist es sicher nicht verkehrt 
möglichst viel auf den Clients laufen zu lassen.

Leider bin ich in JavaScript noch ein totaler Anfänger. Mit PHP habe ich 
schon einiges gemacht. Da stellt sich dann schon die Frage ob das PHP 
Script wirklich nur die Daten in JSON schicken sollte und man Tabellen 
usw. daraus dann in JS zusammenbaut oder ob man die Tabellen vielleicht 
doch in PHP erzeugt und dann nur in die Container lädt.

von Oliver R. (Gast)


Lesenswert?

Philipp schrieb:
> Leider bin ich in JavaScript noch ein totaler Anfänger. Mit PHP habe ich
> schon einiges gemacht. Da stellt sich dann schon die Frage ob das PHP
> Script wirklich nur die Daten in JSON schicken sollte und man Tabellen
> usw. daraus dann in JS zusammenbaut oder ob man die Tabellen vielleicht
> doch in PHP erzeugt und dann nur in die Container lädt.

Das kannst du machen, wie du es möchtest. Ggfs. auch unterschiedlich, je 
nachdem, wie es gerade einfacher ist. Schau dir mal jQuery an, dort 
speziell die AJAX-Aufrufe:

https://api.jquery.com/jquery.get/
http://api.jquery.com/load/

Darüber hinaus gibt es natürlich vollständige MVC-Frameworks wie 
AngularJS, allerdings ist die Einarbeitung erheblich aufwendiger.

von Noch einer (Gast)


Lesenswert?

> Das kannst du machen, wie du es möchtest.

Wieso kommt mir da gerade Fred Brooks prähistorisches Buch in den Sinn?

"The management question, therefore, is not whether to build a pilot 
system and throw it away. You will do that. Hence plan to throw one 
away; you will, anyhow."

von Michael B. (laberkopp)


Lesenswert?

Philipp schrieb:
> Möglichkeit 1:
> Möglicheit 2:

Es kommt halt auch drauf an, wie sich die Seite verhalten soll, bei 
"Zurück" oder "Favoriten".

Eine HTML pro Seite (und nur eine) ist einfach und übersichtlich
und wenn deine HTML vor allem Inhalt hat und nicht so viel blinky 
blinky, dann sind die Seiten auch klein, d.h. laden schneller als 
irgendwelcher JavaScript-Kram.

Daß die HTML-Seiten vom Server generiert werden, so daß nur der Content 
aus unterschiedlichen Quellen kommt und der Rahmen mit Menü aus weiteren 
Vorlagen automatisch drumrumgebastelt wird.

Da du eh jquery verwendest
1
<html> 
2
  <head> 
3
    <script src="jquery.js"></script> 
4
    <script> 
5
    $(function(){
6
      $("#includedContent").load("b.html"); 
7
    });
8
    </script> 
9
  </head> 
10
11
  <body> 
12
     <div id="includedContent"></div>
13
  </body> 
14
</html>

von Philipp (Gast)


Lesenswert?

Ich werde wohl eine Mischung aus den Vorschlägen machen.

Zum übersichtlichen Bearbeiten der paar Seiten werde ich diese aufteilen 
und dann in divs laden. Und zwar alle und die nicht benötigten Dinge 
einfach ausblenden. Damit ist bei der Navigation durch die Anwendung 
keine Interaktion mit dem Server erforderlich. Und darüberhinaus kann 
der JS Code dann auch Felder aktualisieren, die zur Zeit nicht angezeigt 
werden (es wird einiges mit long polling aktuell gehalten).

von Daniel A. (daniel-a)


Lesenswert?

Das kommt jetzt etwas spät, aber hier kommt mein favorisierter Ansatz:

1) Die Hauptseite enthält kopf-, körper- und fussbereich, eventuell auch 
contauner für Menus.
2) Das Server liefert unter jeder Adresse diese Seite, immer mit dem 
selben E-Tag damit diese gecached wird.
3) Ein javascript fängt alle clicks ab und ruft eine funktion goToPage 
auf, welche bei bedarf pushState aufruft um die Url zu ändern ohne die 
Seite neu zu laden, und läd dan denn neuen Inhalt mit einem AJAX Request
4) Das popstate event abfangen und bei diesem die goToPage funktion 
aufrufen.
5) Beim verarbeiten des neuen Seiteninhalts templateing anwenden, script 
tags herausfischen und mit (new 
Function("env","script",code))(env,script) vor dem einfügen in die Seite 
ausführen, oder vor dem templateing.
6) Ein Restinterface in den Server einbauen, um z.B. die Seite mit der 
richtigen Sprache zu laden.
7) Einen noscript tag einbauen und diesen auf eine Javascripfreie 
version weiterleiten lassen, welche serverseitiges templating umsetzt.
8) Websockets und livesynchronisation einbauen.
9) Application cache für Offlinebetrieb einbauen (der schwierigste 
punkt)
10) Den Konamicode und andere Spielereien sowie versteckte Seiten 
einbauen.
11) Seite mit google speed insights optimieren
12) scripts mit dem google closure compiler verkleinern
13) Sich über das nicht funktionierende Indexing der Suchmaschienen 
ärgern
14) Nächste Seite schreiben

von Frank E. (Firma: Q3) (qualidat)


Lesenswert?

JQuerry und Ajax sind zwar allgemeiner Standard für "normale" Webseiten, 
für "intern" laufende Anwendungen jedoch wie z.B. Steuerungen oder 
technische Visualisierung nach meinen Erfahrungen keine besonders gute 
Idee:

Entweder braucht diese Anwendung dann zusätzlich eine 
Internetverbindung, um die Libs zu includieren (Sicherheitsproblem bzw. 
generell ein Problem, wenn kein Internet zur Verfügung steht) ...

Oder man muss das ganze Zeugs auf den eigenen Server runterladen und von 
dort holt sich das jeder Client immer wieder neu, was auch nicht so 
prickelnd ist. Ganz nebenbei ist es geradezu eine Wissenschft, wirklich 
komplette Offline-Versionen zu finden ...

von Oliver S. (oliverso)


Lesenswert?

Philipp schrieb:
> Meine Frage ist nun: Wie baut man so etwas heutzutage schlau auf?

Mit einem CMS...

Ganz ernsthaft, da wird es welche geben, die auch für einen Raspi leicht 
genug daherkommen, und die nehmen dir die ganzen Detailfragen ab.

2 Sekunden googlen fand z.B. Pico, welches nicht mal eine DB braucht 
(keine Ahnung, ob ein Raspi mit mysql klarkommt...).

Oliver

von Philipp (Gast)


Lesenswert?

Hallo,

mittlerweile ist es soweit, dass ich es nicht mehr umwerfen will.

Es geht dabei um eine Zeitnahmesoftware für den Auto-Rally-Sport (hatte 
hier diesbezüglich schon eine andere Frage zu MySQL (Zeiten der Uhr)).

Das ganze muss Offline laufen, weil bei den Veranstaltungen 
normalerweise kein Internet vorhanden ist und selbst wenn, dann wird es 
nicht mit dem Zeitnahme Netz verbunden. (Habe jquery UI also mit auf den 
Server gelegt)

Server ist ein Raspberry Pi an den auch die Uhr angeschlossen wird. Die 
Clients sind immer diverse Notebooks die von den Helfern mitgebracht 
werden. Darum das Ganze als Webanwendung, um nichts auf den Clients 
installieren zu müssen.
Die Geräte sind also immer recht aktuell, so dass ich einfach JavaScript 
vorraussetze.

Ein CMS ist denke ich übertrieben, weil es sich bei den zu wählenden 
Seiten nur um einige Konfigurationsseiten, die Editierung der 
Fahrerdatenbank sowie die Zeitauswertung handelt. Diese Seiten werden 
vom Inhalt also praktisch nie geändert.

Die Clients laden die Seite eigentlich nur einmal am Tag und bleiben 
dann dort. Zudem sind es maximal 10. Es sollte also völlig egal sein, 
das jedes mal jQuery geladen wird.

Die größte Last wird denke ich der Live Zeiten Monitor darstellen. Hier 
wird per long polling alle 100ms (das geschieht in PHP auf dem Server) 
geschaut ob es neue Daten gibt. Sobald dies der Fall ist werden die 
Zeiten per JSON auf die Clients an großen Fernsehern geschickt. Das 
Polling an sich ist nicht das Problem. Es ist eher das Query, dass die 
Auswertung erstellt.

Vielen Dank für Eure Unterstützung

von Dirk D. (dicky_d)


Lesenswert?

Frank E. schrieb:
> Oder man muss das ganze Zeugs auf den eigenen Server runterladen und von
> dort holt sich das jeder Client immer wieder neu, was auch nicht so
> prickelnd ist. Ganz nebenbei ist es geradezu eine Wissenschft, wirklich
> komplette Offline-Versionen zu finden ...

...kennste bower?

von Philipp (Gast)


Lesenswert?

Dirk D. schrieb:
> ...kennste bower?

Nein, werd ich mir aber mal ansehen. Es sieht aber so aus, als müsste 
ich vorher noch wissen was genau node.js tut :)

von Dirk D. (dicky_d)


Lesenswert?

Philipp schrieb:
> Dirk D. schrieb:
>> ...kennste bower?
>
> Nein, werd ich mir aber mal ansehen. Es sieht aber so aus, als müsste
> ich vorher noch wissen was genau node.js tut :)

Ne, das musst du nicht wirklich wissen.
du musst ja auch nicht wissen was C tut um ne bash zu bedienen :)
Bower ist einfach ein paket-manager für web-frontent-pakete, zufällig 
ist der in nodejs implementiert, es wäre aber egal wenn es in c, perl 
oder was weiß ich implementiert wäre.

Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.