zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden Firmen-Intranet komplexe Verwaltungsseite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.09.2012, 23:19
Benutzerbild von Tobi Berlin
APEX Newbie
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.09.2009
Ort: Graz
Beiträge: 104
Tobi Berlin befindet sich auf einem aufstrebenden Ast
Standard Firmen-Intranet komplexe Verwaltungsseite

Hallo Leute!

Ich möchte Euch diesen Entwurf zeigen. Es wird eine mit APEX/oracle entwickelte Verwaltungsseite für unser firmeninternes Intranet mit einer ganzen Reihe an Seiten mit Tabellen und Charts, um die 100 Seiten.

Es wird also ein sehr seriöser, eher trockener Inhalt, und ich habe mich deshalb an einem eher lockeren fröhlichen Design versucht.

Wir sind jetzt dabei, das ganze in eine übersichtlichere Richtung umzustrukturieren und haben beim GUI als ersten Schritt an diese Menüführung gedacht, wie ich sie hier entwurfsweise umgesetzt habe. Die Menüs werden je nach Userberechtigung dynamisch generiert. Die Struktur wie jetzt, also ca. 5 x 5 x 5 wird nur für sehr wenige User sichtbar sein, muss aber trotzdem übersichtlich bleiben. Deshalb 3 Ebenen. Ich schätze, meistens gibt es nur 2-3 Menüpunkte pro Ebene.

Meine speziellen Fragen:
1) Ich möchte, dass, wenn der Inhalt nur klein ist, der weiße body-Bereich die gleiche margin nach unten hat, wie die anderen Ränder. Ich habe es schon mit min-height:90% oder so versucht, aber das geht bei verschiedenen Bildschirmauflösungen nicht auf. Das kann man bestimmt mit css lösen oder? Sonst kann ich dafür auch eine kleine js-Routine beim page-load schreiben.

Um diesen Unterschied zu testen, gibts da diesen Button: "hide/show big data".

2) Wenn man die Seite runterscrollt, denke ich daran, dass der Navigationsbereich oben auf dem Bildschirm bis einschließlich der Breatcrumbs-Leiste sichtbar bleibt, ähnlich der Rand-Navigation auf dieser Seite. Wie findet Ihr sowas? Das geht bestimmt nur mit js, oder gibts dafür auch ein paar ganz raffinierte css-Techniken?

3) Der "Aktive"-Tap in der "Master-Group"-Ebene... Wie findet Ihr den? Ich hab verschiedene Hintergründe vesucht, - das sind Bilder, kein css3, um das IE-7 kompatibel zu halten. Der "aktive" ist jetzt einfach etwas heller. Gibts da noch bessere Möglichkeiten? Evtl. größer als die anderen?

4) Ein kleines technisches Problem, an dem ich noch arbeiten muss (u.a.): Das "Actions"-Menü über der Tabelle ist position:relative; Wenn man aber das Bild runterscrollt, bleibt es stehen. Ich habe das Element davor, #apexir_ACTIONSMENUROOT.dhtmlMenu, auch relativ positioniert. Hat aber nichts gebracht. Wie muss man welche Elemente an dieser Stelle positionieren? Auch das umgebende Element relativ?


Also, für alle Rückmeldungen, Kritik und Vorschläge jeder Art bin ich Euch sehr dankbar.

Derweil mit schönen Grüßen,
tobi

EDIT: und natürlich dass die Tabelle nicht an der Seite raushaut, muss noch behoben werden. Das ist etwas kniffelig, weil man in die vorgegebenen Templates reinfuschen muss. Ggf. mit 1-2 fixierten Spalten und der Rest horizontal scrollbar.

Geändert von Tobi Berlin (16.09.2012 um 23:23 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.09.2012, 23:57
Benutzer
neuer user
 
Registriert seit: 26.08.2008
Ort: Köln
Beiträge: 63
overflow befindet sich auf einem aufstrebenden Ast
Standard

Möchte nur kurz eine Anmerkung machen.

Ich würde Javascript soweit es geht vermeiden.
Wir wollen schließlich eine barrierefreie Internetpräsenz.

Die ganzen Farben sowie den Hintergrund würde ich erstmals komplett entfernen.
Das stört Anfangs nur...

Schreibe erst mal dein Layout zu Ende.

Ohne dir nahe treten zu wollen, glaube ich, dass dir Kenntnisse Fehlen sichere Internetpräsenzen aufzubauen.

Ich rede von Erfahrung.
Ich arbeite in einem mittelständigen Unternehmen und mich erschüttert es immer wieder wie unsauber programmiert wurde.

Besitzt du bereits ein einges PHP Template Engine ?
(Rate dir von Smarty und Konsorten ab)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.09.2012, 18:25
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von Tobi Berlin Beitrag anzeigen
3) Der "Aktive"-Tap in der "Master-Group"-Ebene... Wie findet Ihr den? Ich hab verschiedene Hintergründe vesucht, - das sind Bilder, ...
Du musst das Ganze auch mal ohne Background Images testen.

Tipp:
Nutze bitte auch angepasste Background Farben, die deine Navigationen auch sichtbar erscheinen lässt. usw.

Background "transparent" brauchst du nicht wirklich.
Hier kannst du das ändern:
Code:
#tabsH {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("wwv_flow_file_mgr.get_file?p_security_group_id=68380538119050561216&p_flow_id=35579&p_fname=bckTapH.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: auto auto;
    float: left;
    font-size: 15px;
    line-height: normal;
    width: 100%;
}
#subnavi {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("wwv_flow_file_mgr.get_file?p_security_group_id=68380538119050561216&p_flow_id=35579&p_fname=bckSubnavi.png");
    background-origin: padding-box;
    background-position: right top;
    background-repeat: repeat-x;
    background-size: auto auto;
    border-bottom-color: #2B3242;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    font-size: 13px;
    height: 20px;
    padding-bottom: 4px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 2px;
    width: 100%;
}
________
Gruß,
Roland
Mit Zitat antworten
  #4 (permalink)  
Alt 29.09.2012, 19:11
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Ihr müsst bedenken, dass man bei einer firmeninternen Verwaltungssoftware, auch wenn diese über einen Browser aufgerufen wird, deutlich mehr voraussetzen kann, als bei einer öffentlich zugänglichen Website. So kann man beispielsweise für die Verwendung des Backends JavaScript voraussetzen. Mein Content Management System kann ohne JS auch nicht verwaltet werden. Ein Fallback gibt es nicht. Will ein Kunde so etwas irgendwann einmal haben, so muss er es zahlen.

In einem Firmenintranet mit einem beschränkten Benutzerkreis ein HTML-Fallback für JS zu benutzen ist nicht notwendig. Auch CSS oder Bilder muss da keiner deaktivieren. Ein Fallback hier zu haben ist sicherlich schön, aber auch kein Muss.

Ein Frontend auf Oracle erstellt man in der Regel auch nicht mit PHP, sicher sollte die Applikation aber trotzdem sein.

@overflow: Warum rätst du von Smarty und Konsorten ab?
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #5 (permalink)  
Alt 30.09.2012, 21:28
Benutzer
neuer user
 
Registriert seit: 26.08.2008
Ort: Köln
Beiträge: 63
overflow befindet sich auf einem aufstrebenden Ast
Standard

PHP wurde als Template Engine entwickelt und sollte daher auch so genutzt werden. Wieso sollte man, obwohl PHP von Haus aus die Möglichkeit bietet ein Template Engine zu "sein", auf andere Alternativen zurückgreifen ?
Wenn man große Projekte hat, merkt man auch den Performanceunterschied.
Mit Zitat antworten
  #6 (permalink)  
Alt 01.10.2012, 00:49
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von overflow Beitrag anzeigen
Wieso sollte man, obwohl PHP von Haus aus die Möglichkeit bietet ein Template Engine zu "sein", auf andere Alternativen zurückgreifen ?
Weil es viele Funktionen vereinfacht.

Zitat:
Zitat von overflow Beitrag anzeigen
Wenn man große Projekte hat, merkt man auch den Performanceunterschied.
Wenn ich mit PHP Bloatware erzeuge ist die Performance schlecht, wenn mir ein Template-System, mit einer ordentlichen Syntax und einem angenehmen Caching dort einen Vorteil bietet, wieso sollte ich drauf verzichten?
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #7 (permalink)  
Alt 01.10.2012, 21:33
Benutzerbild von Tobi Berlin
APEX Newbie
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.09.2009
Ort: Graz
Beiträge: 104
Tobi Berlin befindet sich auf einem aufstrebenden Ast
Standard

Hallo Leute!

Erstmal vielen Dank für Eure Beteiligung hier.

@overflow: du hast ganz Recht: mir fehlt noch einiges an Kenntnissen in web-Entwicklung. Ich komme eher aus dem Bereich OOP-Entwicklung und Datenbanken. Da die Anwendungen jetzt aber über APEX ausgeführt werden, kommt die Web-Komponente dazu.

Aber Praktikant hat schon einige Antworten von mir vorweggenommen: es ist ein Firmen-Intranet, bei dem ich aktuelle Browser, einen stabilen Server, und aktiviertes JS vorwegnehmen kann. Allerdings ist der Standard IE9 in Kompatibilitätsansicht, also IE7 - soweit ich das bisher überschaue - was nicht die neuesten css-Möglichkeiten zulässt.

Sonst würde ich auch die Hintergrundbilder weglassen, und es über css3 stylen.

Zu PHP-Template engines: Dieses Thema ist mir offen gesagt ganz neu. Hinzu kommt, dass APEX schon einen ganzen Haufen an eigenen Templates mitliefert. Diese werde ich mit meinem eigenen layout ergänzen. Macht es da noch Sinn, einen zusätzlichen Template-engine einzusetzen? Ich werde mir das mal auf jeden Fall weiter anschauen.

Als kleine Anmerkung für die, denen Apex noch umbekannt ist: Die Seiten werden mit oracle generiert, einschließlich der meisten Verarbeitungsprozesse. Clientseitige Verarbeitung werde ich mit Javascript erledigen. Aber auch alle Datensubmits sind weitgehend automatisiert. Da muss man nur noch mit sql-Statements arbeiten.

Zitat:
Zitat von overflow Beitrag anzeigen
Die ganzen Farben sowie den Hintergrund würde ich erstmals komplett entfernen.
Das stört Anfangs nur...
Was meinst du mit "erstmal" und "Anfangs"? Es geht hier natürlich auch um die Funktionalität, aber auch das Design möchte zur Diskussion stellen. Ist es üebrtrieben? Zu bunt und umständlich? Mir kommt es nächlich auch etwas so vor.

@k.Roland, danke für die Hinweise. Ist natürlich ne gute Idee, trotzdem man sich auf die Darstellung der Bilder verlassen kann... oder können sollte... sollten Hintergrundfarben für die Eventualität benutz werden.

Wie gesagt: Ich bin in dieser Richtung noch kein Profi, und um so unprofessioneller kommt es mir momentan auch noch vor. Oder würdet Ihr sagen können: Man kann es verwenden?

Danke und Grüße,
Tobi
Mit Zitat antworten
  #8 (permalink)  
Alt 02.10.2012, 11:40
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Ok, ich sag' auch mal etwas.

Ich finde es insgesamt etwas zu "verspielt" und überladen, wenn man so will, mir fehlt gerade der richtige Begriff.

Ich würde im Header (und bei den Links) auch eine serifenlose Schrift nehmen. So wirkt es inkonsistent und unruhig auf mich.

Die Breadcrumb-Navi würde ich unter den Header ziehen und mit weißen Hintergrund lassen.

Den gelben Hintergrund würde ich ebenfalls weiß lassen, dadurch hast du keine optische Trennung zwischen dem Logo und den Hauptmenüpunkten, dadurch entsteht optisch mehr Freiraum.

Den Zeilenabstand würde ich auf 1.5 stellen, zumindest für den Text, das lockert das etwas auf. Die Schriftgröße würde ich ebenfalls etwas rauf setzen.

Dann sollte der linke Rand des Textes mit dem linken Rand des Menüs übereinstimmen, das wirkt harmonischer.

Ich hab' mal etwas mit Firebug rumgespielt, s. Screenshot.

Evtl. würde sich auch eine andere Farbe als Schwarz als Menühintergrund gut machen.
Angehängte Grafiken
Dateityp: png demo_alt_logo 2012-10-02 10-39-03.png (570,1 KB, 9x aufgerufen)
Mit Zitat antworten
  #9 (permalink)  
Alt 02.10.2012, 20:26
Benutzerbild von Tobi Berlin
APEX Newbie
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.09.2009
Ort: Graz
Beiträge: 104
Tobi Berlin befindet sich auf einem aufstrebenden Ast
Standard

Hallo mantiz,

danke für deine Einschätzung. Das mit den Farben ist gut. Wirkt wirklich ruhiger. Der dunkelblaue Balken ist Teil des Logos, aber den kann ich vielleicht auch direkt an die dunklen Submenuleiste legen. Breadcrumbs dann unterhalb.

Für den Text muss ich mich eigentlich entschuldigen. Der ist da wirklich nur als Platzhalter drin. Der eigentliche Content werden in erster Linie Tabellen, ein paar Charts sein. Falls wirklich längerer Fließtext rein kommt, muss der natürlich etwas besser formatiert werden.

Zitat:
Zitat von mantiz Beitrag anzeigen
Ich würde im Header (und bei den Links) auch eine serifenlose Schrift nehmen. So wirkt es inkonsistent und unruhig auf mich.
Was meinst du damit? Die sind doch jetzt serifenlos. Oder habe ich etwas völlig verpeilt? Die Schrift vom Logo ist vorgegeben (verständlicher Weise).
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 02.10.2012, 20:49
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Zitat:
Zitat von Tobi Berlin Beitrag anzeigen
Was meinst du damit? Die sind doch jetzt serifenlos. Oder habe ich etwas völlig verpeilt? Die Schrift vom Logo ist vorgegeben (verständlicher Weise).
Die Schrift vom Logo meinte ich nicht.

Ich habe aber gerade gemerkt, dass du da Tahoma angegeben hast. Diese Schrift habe ich auf meinem System (Linux) nicht. Deswegen wurde die Standardschrift benutzt. Sorry dafür.

Dass das nur Platzhaltertext war/ist, ist mir auch klar.
Allerdings könnte ich mir auch bei Intranetseiten vorstellen, dass da die ein oder andere Textseite oder zumindest 1-2 Absätze dabei sind. Etwas mehr Zeilenabstand sorgt dann einfach dafür, dass der Text angenehmer zu lesen ist, da man die nächste Zeile beim Zeilenwechsel schneller findet und sich beim lesen nicht so doll anstrengen muss sich nicht in der Zeile zu vertun.
Aber das mag evtl. auch bei jedem anders sein.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 17:47 Uhr.