|
||||
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) |
Sponsored Links |
|
|||
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) |
Sponsored Links |
|
|||
Zitat:
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 |
|
|||
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. |
|
||||
Zitat:
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? |
|
||||
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:
@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 |
|
||||
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. |
|
||||
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. 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). |
Sponsored Links |
|
||||
Zitat:
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. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|