brainstorming: dashboard template UI mit jquery + x

Hier können Probleme und alles andere in Deutscher Sprache gelöst werden.
Post Reply
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

brainstorming: dashboard template UI mit jquery + x

Post by Timbalu »

Ich hatte letztes Frühjahr mal angefangen das Dashboard zu smartifizieren. Mittendrin habe ich die weiteren Arbeiten eingestellt, das es hieß, es wäre irgendwo ein neues Backend in Arbeit. Durch die letzten Updates des Dashboard-Plugins wurde ich darauf wieder aufmerksam und habe meine Arbeit nun weitgehend fertiggestellt.

An dieser Stelle bräuchte ich mal ein paar Vorschläge und Ideen, wie sich ein template basiertes Dashboard mittels JQuery wirkungsvoll zu individuell anpassbaren und verschiebbaren Blöcken zusammenbauen und stylen ließe... Mit JS habe ich selbst nur wenig Erfahrung, so dass an dieser Stelle viel Hilfe vonnöten ist, wenn wir uns hier eventuell auf ein (Beta)Wunsch-Design festlegen könnten.

Inzwischen habe ich eine fast funktionsfähige Version, die vorerst diese Blöcke anzeigt (meist wie gehabt, doch ohne table design):
  • coreupdate mit autoupdate,
  • Anzeige der entrydrafts,
  • Anzeige der entrycomments,
  • Anzeige der entrycommentspending,
  • Anzeige der entryfutures,
  • Buttons der pluginupdates,
  • (todo) Aufräumen der cleansmartycompiles
Meine Design-Ideen sind da eher noch sehr unausgegoren.... Doch ich stelle mir vor, man könne diese Blöcke nun analog zu unserem sequence dragdrop.js irgendwie für den User, wenn gewünscht, beherrschbar machen, gleichzeitig aber als default eine daraufhin festgeschriebene Ansicht gewährleisten. Schön wäre es vielleicht außerdem die einzelnen Blöcke - trotz der in der config festgelegten Anzahl Ansichten - durch irgendein fesches und ausgeklügeltes Javascript noch weiter anpassbar und auch klappbar zu machen. Hier sind die modernen Touchdesign mit ihren horizontalen Gesten vielleicht ein Vorbild... doch wie gesagt bin ich da noch ganz offen, auch in der Hinsicht, ob das nicht eventuell totaler overkill wäre.

Bisher ist im template alles in der vollen Breite und untereinander angelegt, in etwa nach diesem Muster:
----------------------------------------------------------------------------------------------
autoupdate
----------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------
comments pending
----------------------------------------------------------------------------------------------
etc.

Wo ich womöglich gerne hin würde, wäre in der einfachsten Form, diese als ~40% Blöcke (zweizellig o.ä.) zu haben, die per JS auch in der festgeschriebenen Ansicht frei gestaltbar wären...

Vielleicht können wir hier ja auch ein paar Ideen sammeln, wie andere Systeme dies gelöst haben und welche Blöcke und Informationen etc durch ein Dashboard im S9y-Backend noch bereitgestellt werden müssen.
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: brainstorming: dashboard template UI mit jquery + x

Post by yellowled »

Timbalu wrote:Mittendrin habe ich die weiteren Arbeiten eingestellt, das es hieß, es wäre irgendwo ein neues Backend in Arbeit.
Das ist immer noch so, aber es ist halt kein Kindergeburtstag. Ich weiß, das ist schrecklich anstrengend, aber ich kann meine freiwilligen Helfer nicht dazu prügeln, schneller zu machen. Ich bin ganz dankbar, überhaupt Hilfe zu haben und nicht wieder ein komplettes Template alleine zusammenkloppen zu müssen.
Timbalu wrote:An dieser Stelle bräuchte ich mal ein paar Vorschläge und Ideen, wie sich ein template basiertes Dashboard mittels JQuery wirkungsvoll zu individuell anpassbaren und verschiebbaren Blöcken zusammenbauen und stylen ließe...
Mach so wenig Design, wie irgendwie möglich und überlasse den Rest den Admin-Templates. Bitte, bitte, bitte auf gar keinen Fall mit Inline-Styles rummurksen, Finger weg von !important usw. usf.

Das, was Du eigentlich meinst, ist ja auch nicht wirklich Gestaltung, sondern Verhalten. Drag 'n' Drop, ein-/ausklappen usw. Da müsste man generell mal diskutieren, wie man das in Zukunft einheitlich angeht – am besten wäre eine Liste der typischen UI-Elemente, die s9y haben könnte. Dann kann man konkret jQuery-Lösungen dafür empfehlen.

YL
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: brainstorming: dashboard template UI mit jquery + x

Post by Timbalu »

Ich vergaß zu erwähnen, dass ich mich dabei weitestgehend an den Entwurf deines Backend-Prototyps gehalten habe, was entries und comments angeht, mit kleinen Änderungen hier und da, die für das Dashboard notwendig anders sind als für die admin templates. Vom CSS her, vorerst kompatibel auf dem admin fallback der 1.5 Reihe.

Apropo "deine freiwilligen Helfer...."
Ist denn jemand dabei dein Backend-Gerüst in die Core Dateien tatsächlich zu integrieren, oder nur zu helfen diesen Prototyp zu vervollständigen. Warum findet die Auseinandersetzung, die Suche nach Helfern, die Fragen, etc nicht über das Forum statt? Ich kann mich nicht erinnern darüber je etwas gelesen zu haben, außer der wagen Andeutung das jemand eventuell darüber brütet.

Und tatsächlich, ich meinte mit JS-GUI natürlich das Verhalten. Bis jetzt ist das Erscheinungsbild ja nicht bedeutend anders als vorher, nur unter Verzicht auf html tables. Der eigentliche Punkt ist nur, dass es jetzt frei gestaltbar ist und damit die Möglichkeit bringt, dies als Blöcke, mit Verhalten, zu gestalten.

Inline styles sind nur vorhanden, solange ein display/hide script darauf zugreifen muss. Wenn das ohne inline styles zu lösen ist, bitte her damit.

Ansonsten hätte ich gerne konkreteres!
Last edited by Timbalu on Wed Jan 11, 2012 5:04 pm, edited 1 time in total.
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: brainstorming: dashboard template UI mit jquery + x

Post by yellowled »

Timbalu wrote:Ist denn jemand dabei dein Backend-Gerüst in die Core Dateien tatsächlich zu integrieren, oder nur zu helfen diesen Prototyp zu vervollständigen.
Erst das eine, dann das andere. Es dürfte wohl logisch sein, dass es zunächst gilt, die Ideen von 4-5 Leuten unter einen Hut zu bringen – natürlich ist da auch krauses Zeug dabei, das noch zu früh kommt oder nicht praxistauglich ist. Das wird seine Zeit brauchen. Der Plan ist nach wie vor, zunächst einen HTML-Prototypen auszugestalten und zu präsentieren. Vorher macht es keinen Sinn, über die Integration in den Kern auch nur nachzudenken.
Timbalu wrote:Warum findet die Auseinandersetzung, die Suche nach Helfern, die Fragen, etc nicht über das Forum statt?
Weil dann hier jedes einzelne Detail bis zur Unkenntlichkeit ausdiskutiert würde.

Das mag jetzt hart klingen, aber es hilft nichts, wenn bereits im Frühstadium der Gestaltung jeder Hans und Franz seine Meinung zu minimalen Einzelheiten äußert. Das gibt bestenfalls eine überlange, unlesbare Diskussion. Wenn es einen vorzeigbaren, ausgegorenen Prototypen gibt, kann und wird hier darüber diskutiert werden – bis dahin steht es jedem frei, sich auf GitHub zu beteiligen.
Timbalu wrote:Ich kann mich nicht erinnern darüber je etwas gelesen zu haben, außer der wagen Andeutung das jemand eventuell darüber brütet.
Lustigerweise hat genau diese Vorgehensweise für 2k11 ziemlich gut funktioniert. Für den Moment passiert da nichts anderes als das Erstellen und Gestalten eines Prototyps. Das ist Frontend-Arbeit. Ich habe es vorgezogen, dazu die Leute aus der s9y-Truppe per E-Mail zusammenzutrommeln, die tatsächlich Frontend machen. Was ist Dein Problem damit?
Timbalu wrote:Inline styles sind nur vorhanden, solange ein display/hide script darauf zugreifen muss. Wenn das ohne inline styles zu lösen ist, bitte her damit.
Natürlich ist das ohne Inline-Styles zu lösen – durch addClass und removeClass etwa. Das ist (so lange man nicht Wert auf Fade-Effekte o.Ä. legt) im Normalfall sogar performanter. Abgesehen davon, dass man mit einem style="display:none;" mal eben sämtliche Screenreader aussperren kann.

Worum es mir geht, ist etwas ganz anderes: Wir müssen (zumindest meines Erachtens) mittel- bis langfristig komplett weg davon, dass Plugins eigene Styles ausliefern, sowohl im Front- als auch im Backend, sofern diese nicht absolut essentiell für die Ausgabe des Plugins sind. Dazu gehören eben auch schon Dinge wie Dein „~40% Blöcke“ – so lange so etwas nicht klar getrennt und modifizierbar (also smartifiziert und mit externem, überschreibbaren CSS versehen) ist, limitiert es nur die Möglichkeiten des Admin-Templates.

(Ja, ich weiß, dass es nicht viele Admin-Templates gibt. Ich weiß aber auch, warum das so ist.)
Timbalu wrote:Ansonsten hätte ich gerne konkreteres!
Äh, ich auch. Was brauchst Du denn nun?

YL
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: brainstorming: dashboard template UI mit jquery + x

Post by Timbalu »

yellowled wrote:Vorher macht es keinen Sinn, über die Integration in den Kern auch nur nachzudenken.
Ah soooo, da bin ich schon wieder einen Schritt weiter, denn nachdenken tue ich darüber schon länger, wobei das für mich in Teilen auch schon konkret werden könnte, da das Dashboard manche Admin Dateien nur nachbildet.... (*)
yellowled wrote:Wenn es einen vorzeigbaren, ausgegorenen Prototypen gibt, kann und wird hier darüber diskutiert werden – bis dahin steht es jedem frei, sich auf GitHub zu beteiligen.
Wie gut das ich weder Hans noch Franz heiße...!
Der Prototyp ist aber doch nur wirklich anschaubar, wenn er auf echte Daten zugreifen kann. Wie ich bei der Arbeit bemerkte, ist es manchmal relativ schwierig, Teile dieses Prototyps in eine echte Ansicht zurückzuportieren und wäre meines Erachtens fast einfacher direkt in den /include/admin/*.inc.php Dateien zu bearbeiten, jedenfalls was den HTML Anteil angeht.
yellowled wrote:Ich habe es vorgezogen, dazu die Leute aus der s9y-Truppe per E-Mail zusammenzutrommeln, die tatsächlich Frontend machen. Was ist Dein Problem damit?
Eigentlich gar keines, bis auf den fahlen Beigeschmack einer gewissen Selbstherrlichkeit... :P
Vielleicht hättest du das einfach ein wenig offener kommunizieren sollen. Nicht das wir uns falsch verstehen, ich finde den Prototypen Vorschlag insgesamt nicht falsch und daher sehr anregend, möchte also niemanden deshalb auf die Füße treten. Mit etwas besserer Kommunikation wären wir vielleicht sogar schon etwas weiter im Backend....
yellowled wrote:Natürlich ist das ohne Inline-Styles zu lösen – durch addClass und removeClass etwa. ... Abgesehen davon, dass man mit einem style="display:none;" mal eben sämtliche Screenreader aussperren kann.
hmmm, Screenreader im Backend halte ich für kein besonders haltbares Argument.
Ich brauche das "display:none" für den switch zwischen body|truncate und fullBody.
Gib mir doch bitte mal ein funktionfähiges Beispiel für eine add/remove Class möglichst mit jquery.
yellowled wrote: ... – so lange so etwas nicht klar getrennt und modifizierbar (also smartifiziert und mit externem, überschreibbaren CSS versehen) ist, ...
Ja, wenn nicht dazu..., wozu mache ich das überhaupt, tztztz!
yellowled wrote:(Ja, ich weiß, dass es nicht viele Admin-Templates gibt. Ich weiß aber auch, warum das so ist.)
Da wir ja von einer Backend-Gestaltung reden, ist die Notwendigkeit für (User) Templates ja auch nicht so groß wie im Frontend. Hier muss ausgewogen abgeschätzt werden, wieviel Design, zuungunsten der Performance wirklich nötig und vertretbar ist. Deshalb ist es ja auch eine offene Frage, ob man das Backend überhaupt vollständig smartifizieren sollte; Garvin war diese Frage betreffend aus guten Gründen immer etwas zurückhaltender... Die Frage des Verbleibs bei PHP-Layouts vs Smarty-Layouts sollte aber m.E. dringend geklärt sein, bevor man beginnen kann die Backend HTML Struktur schrittweise an ein moderneres Layout anzupassen. Ich erinnere nur an meine Frage bezüglich der Plugin An/Ein-ordnung in der Backend Seitenleiste.
yellowled wrote:
Timbalu wrote:Ansonsten hätte ich gerne konkreteres!
Äh, ich auch. Was brauchst Du denn nun?
Viele gute Ideen! Und Vorschläge für deren Umsetzung.

Bisher klinkt sich das Dashboard Plugin ja einfach in das bereitgestellte Layout ein, was man ja auch als so eine Art "Dashboard", nämlich die Hauptoberfläche bezeichnen könnte. Das muss aus Kompatibilitätsgründen vorerst auch so bleiben - doch innerhalb dieses Rahmens kann man ja schon so einiges entwickeln - zB per JS verschiebbare Blöcke zur individuellen Anpassung, horizontale oder vertikale inner-Blockscroll_JS-Funktionen, etc etc etc - möglichst so, dass man es später weiterverwenden kann. Mir schwebt irgendwie so etwas Modulhaftes vor, deshalb die Bitte um praktische Ideen. (Natürlich immer unter der Voraussetzung, dass die bereitgestellten Daten zB. Kommentare oder Entries dies überhaupt zulassen! Wenn also der Zwang in ein kleineres Blockmodul hier allgemein gar nicht vorstellbar ist, sollte man das jetzt äußern, damit ich mich schnell von so einer halbgaren Vorstellung verabschiede... :wink: )

Das Dashboard Plugin ist ja IMHO eigentlich nur dadurch entstanden, dass irgendwie der Wunsch nach einer präsentableren und informativeren ersten Seite geäußert wurde, von der aus man sich arbeitsmäßig in die einzelnen Bereiche des Backends abzweigt, gehört also durchaus auch zu den Gedanken, die man sich für den Prototypen und für eine Backend GUI machen sollte. Was hält erfahrene und neue Benutzer gleichermaßen länger bei der Stange, was sind die Dinge die tatsächlich Sinn machen, wie kann mehr Rücksicht auf Beginner genommen werden? (Ich erlebe immer wieder das manche Serendipity Blogger über lange Zeit von den Möglichkeiten ihres Systems keine Ahnung haben, weil es sie erstmal überfordert, wie es jetzt präsentiert wird. Hier muss also ein Design her, das Informationen gibt, Neugierig macht, Ängste nimmt, Wege verkürzt, auf Wichtiges und Entwicklungen hinweist, Freiheiten ermöglicht, usw. usw. usw., Die "autoupdate" Diskussion ist ja ein Teil davon.) Diese Eigenschaften zu diskutieren ist letztendlich Sinn und Zweck meiner Bemühung und dieses viel zu langen Textes. Wer also freundlich lesend so lange durchgehalten hat - Vielen Dank!
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
hagenroewer
Regular
Posts: 181
Joined: Mon Aug 14, 2006 12:41 am
Contact:

Re: brainstorming: dashboard template UI mit jquery + x

Post by hagenroewer »

Moin
Timbalu wrote:(Ich erlebe immer wieder das manche Serendipity Blogger über lange Zeit von den Möglichkeiten ihres Systems keine Ahnung haben, weil es sie erstmal überfordert, wie es jetzt präsentiert wird. Hier muss also ein Design her, das Informationen gibt, Neugierig macht, Ängste nimmt, Wege verkürzt, auf Wichtiges und Entwicklungen hinweist, Freiheiten ermöglicht, usw. usw. usw., Die "autoupdate" Diskussion ist ja ein Teil davon.)
Das löse ich momentan anders, gerade für Benutzer, die im Grunde nur Inhalte wie Text und Bild einstellen sollen. Ich arbeite dabei in der kleinsten Version mit dem 2-Rollen-Modell: Es gibt den Superuser aka Administrator, der alles verändern darf, und dann den Benutzer, der im Grunde neue Einträge in die Kategorien anlegen darf sowie die Mediendatenbank füttern darf. Die beiden Rollen legen ich über die Benutzerverwaltung an, und pflege entsprechend die Benutzer ein. Hat den Vorteil, das eben für den einfachen Redakteur eben nicht mehr soviel angeboten wird, und er/sie zielgerichteter seine Aufgaben erledigen kann. Dabei hilft die jetzige Form der Benutzerverwaltung schon sehr gut dabei, den Workflow zu verbessern.

Viele (Neujahrs-)Grüße von der Ruhr
Gruß von der Ruhr
Hagen Röwer Dienstlich | XING | LinkedIn
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: brainstorming: dashboard template UI mit jquery + x

Post by Timbalu »

hagenroewer wrote:Das löse ich momentan anders, ... 2-Rollen-Modell
Ja, dafür ist das ja auch vorgesehen und das klappt ja auch vorzüglich.
Ich sprach aber vom Admin selbst - neulich hatte ich erst wieder einen "in Betreuung", der schon viele Jahre ein privates erfolgreiches Blog pflegt und sich nichts anderes zu machen traute, als Einträge und Bilder zu erstellen. Obwohl durchaus mit Bedarf, wagte derjenige sich nicht an die Essentials, wie Plugins, Update, Templates, etc heran.
Eine gewisse Hemmschwelle ist ja ganz gut..., aber nicht so eine Blockade, oder? ;-)
Diejenigen, die sich hier im Forum melden, sind wahrscheinlich schon die mit dem größten Interesse Dinge selbst zu machen (außer den vereinzelten Cracks da draußen, die gar nichts fragen müssen).
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: brainstorming: dashboard template UI mit jquery + x

Post by yellowled »

Timbalu wrote:Ah soooo, da bin ich schon wieder einen Schritt weiter
Es spricht aus meiner Sicht überhaupt nichts dagegen, das Plugin auch so weiter zu entwickeln.
Timbalu wrote:Der Prototyp ist aber doch nur wirklich anschaubar, wenn er auf echte Daten zugreifen kann.
Jein. Dadurch, dass das Backend nicht smartifiziert ist, geht es nicht wirklich anders. Ich halte es für sinnvoller, erst einen Mockup zu machen, den auszudiskutieren, ggf. zu korrigieren und dann zu integrieren. Da der Prototyp zu einem neuen Backend „mein“ Projekt ist, nehme ich mir heraus, so zu arbeiten, wie es für mich bequem ist. Ich nehme an, dass das niemand anders macht, der z.B. mit der Entwicklung eines Plugins beginnt.
Timbalu wrote:Eigentlich gar keines, bis auf den fahlen Beigeschmack einer gewissen Selbstherrlichkeit... :P
Wer überall einen Beigeschmack wittert, sollte sich vielleicht mal den Mund ausspülen.
Timbalu wrote:Vielleicht hättest du das einfach ein wenig offener kommunizieren sollen.
Vielleicht solltest Du Dich in Deiner Vorstellung, von jedem Schritt, der innerhalb des s9y-Projektes getan wird, informiert sein zu müssen, einfach mal ein wenig entspannen. Man kann sich in Transparenz und Kommunikation auch verstricken.

Der Prototyp ist zunächst mal ein reiner Gestaltungsjob, bei dem noch nicht einmal abzusehen ist, wie schnell wir damit wie weit kommen. Wozu hier alle Vögel wild machen? Im Übrigen: Kommunizierst Du hier jeden Schritt, den Du codest? Also.
Timbalu wrote:hmmm, Screenreader im Backend halte ich für kein besonders haltbares Argument.
Weil es keine blinden Blogger gibt? Ich mache Dich gern mit einem bekannt. Der nutzt allerdings Wordpress – rate mal, weshalb.
Timbalu wrote:Ich brauche das "display:none" für den switch zwischen body|truncate und fullBody.
Gib mir doch bitte mal ein funktionfähiges Beispiel für eine add/remove Class möglichst mit jquery.
Geht sogar noch einfacher.

Code: Select all

HTML:
<div id="foobar" class="whatever">[…]</div>

CSS:
.whatever { display: none; }

jQuery:
$(function() {
	$('#foobar').click(function(){
		$(this).toggleClass('whatever');
	})
});
(Ungetestet zusammengestümpert.)
Timbalu wrote:Ja, wenn nicht dazu..., wozu mache ich das überhaupt, tztztz!
Herrjeh, das ist doch hier kein privater Dialog unter uns.
Timbalu wrote:Da wir ja von einer Backend-Gestaltung reden, ist die Notwendigkeit für (User) Templates ja auch nicht so groß wie im Frontend. Hier muss ausgewogen abgeschätzt werden, wieviel Design, zuungunsten der Performance wirklich nötig und vertretbar ist.
All das ist allen, die daran arbeiten, voll bewusst. Es geht auch nicht primär darum, das Backend „hübsch zu machen“, sondern darum, es in anständiges, benutz- und gestaltbares HTML umzusetzen, über das man ggf. als „Sahnehäubchen“ leichter ein paar jQuery-Nettigkeiten kippen kann.
Timbalu wrote:Die Frage des Verbleibs bei PHP-Layouts vs Smarty-Layouts sollte aber m.E. dringend geklärt sein, bevor man beginnen kann die Backend HTML Struktur schrittweise an ein moderneres Layout anzupassen.
Äh, was genau kann man in PHP-Templates nicht machen, was man in Smarty machen könnte? Es steht gar nicht zur Debatte, das ganze Backend zu smartifizieren.
Timbalu wrote:zB per JS verschiebbare Blöcke zur individuellen Anpassung, horizontale oder vertikale inner-Blockscroll_JS-Funktionen, etc etc etc
Das ist ja eine ziemlich grundsätzliche Entscheidung, die man ggf. nochmal in einem separaten Thread diskutieren sollte – nämlich, ob wie ein UI-Framework wie etwa jQuery UI nutzen wollen oder uns alle Widgets und Effekte im weitesten Sinne zusammenklauben wollen. Ich bin nicht unbedingt ein Freund von jQuery UI, aber es ist so ziemlich die einzige halbwegs komplette UI-Bibliothek für jQuery, die es gibt, zudem modularisiert, aber halt (noch) nicht vollständig.

Alternativ kann man sich eben auch die einzelnen Bausteine zusammensuchen oder gar selbst schreiben, aber das wäre nicht wirklich DRY.

YL
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: brainstorming: dashboard template UI mit jquery + x

Post by Timbalu »

Ich . . . e n t s p a n n e . . m i c h . . jetzt mal! :wink:

Vielen Dank für das Beispiel. Das sieht ja ganz einfach aus. Übrigens um solche "Sahnehäubchen" ++ ging es mir bei meiner Nachfrage.

Mit PHP-Templates kann man sogar mehr machen als mit Smarty, zur Smartifizierung muss man diese Dateien mühsam umschreiben, damit alles in Arrays und Variablen für Smarty assigned werden kann.
Deshalb sagte ich ja auch, dass es viel einfacher sei, die vorhandene Struktur gleich (mainly tables) an ein neues HTML Skelett anzupassen, weil schon alles da ist.

Das mit dem Screenreader, display:none und fehlender Barrierefreiheit war mir nicht bewusst, danke der Nachhilfe. Kann man dann dein genannte Beispiel trotzdem verwenden?

Im übrigen wäre ich froh, wenn dies nicht zu einem privaten Dialog zwischen uns verkommen würde und sich viele daran beteiligten.
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: brainstorming: dashboard template UI mit jquery + x

Post by yellowled »

Timbalu wrote:Das mit dem Screenreader, display:none und fehlender Barrierefreiheit war mir nicht bewusst, danke der Nachhilfe. Kann man dann dein genannte Beispiel trotzdem verwenden?
Das ist alles nicht so einfach.

Zunächst mal gibt es sehr viele verschiedene Screenreader, deren Benutzer (aus offensichtlichen Gründen, aber auch, weil die Lizenzen der kostenpflichtigen Screenreader sehr teuer sind) z.T. nur ungern updaten. Verschiedene Screenreader interpretieren z.T. auch verschiedene Dinge unterschiedlich, u.A. das noch recht moderne WAI-ARIA, was dummerweise genau bei solchen Dingen extrem nützlich wäre. display: none; ist noch relativ leicht ersetzbar – schau Dir mal im CSS des HTML5 Boilerplates die helper-Klassen, speziell .visuallyhidden an.

Das wäre übrigens durchaus einer der Vorteile an jQuery UI – zumindest teilweise ist die Barrierefreiheit dort bereits integriert. Man müsste in jedem Fall einen custom build mit der "No Theme"-Option wählen und ihn so modularisieren, dass nur die Elemente enthalten sind, die unbedingt benötigt werden, um das Ganze leichtgewichtig zu halten.

Wie gesagt: Alternativ kann man sich (gerade so simplen Kram wie show/hide) im Prinzip auch schnell selbst schreiben …

YL
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: brainstorming: dashboard template UI mit jquery + x

Post by Timbalu »

Wenn ich mir das Verhalten in meinem Firebug live anschaue, ...
wird aus einem <div class="boxed"> mit einem solchen Script je nach Klick
<div class="boxed" style="display: none;"> oder <div class="boxed" style="display: block;">
Also übersetzt das JQuery-JS im DOM des Browsers dies zu so einer HTML Struktur.

Zählt soetwas dann nicht mehr als inline-style, da es nur im "Aufbau-HTML" des Browsers stattfindet?
Und stört das dann einen Screenreader nicht mehr?

Gibt es außerdem Ideen oder Vorbilder, wie man eine dynamische Anzahl Entries für diesen Block (entweder aus der Config, bzw aus der eigentlichen sql query), also zwischen 1 und X, einzeln klappbar machen kann?

Eine weitere Frage ist: Kann man aus einem Plugin heraus die Ausgabe des gesamten Backends bestimmen, bzw overlayen, also head, body, seitenleiste, main, und footer? Wenn ja, Wie? Letztendlich wäre erst dann so ein Dashboard das was es zu sein vorgibt...!
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: brainstorming: dashboard template UI mit jquery + x

Post by yellowled »

Timbalu wrote:Zählt soetwas dann nicht mehr als inline-style, da es nur im "Aufbau-HTML" des Browsers stattfindet? Und stört das dann einen Screenreader nicht mehr?
Doch, es wäre ein Inline-Style, auch wenn es nur dynamisch im DOM vorhanden wäre. Aber immerhin ist relativ unwahrscheinlich, dass genau diesen Style jemand per CSS überschreiben möchte. Sauberer ist der Weg über eine Klasse, der aber eben bestimmte Effekte umständlicher umsetzbar macht. Und Screenreader hätten (nehme ich an) ebenso Probleme damit, es sei denn (was scheinbar noch recht häufig vorkommt), die unterstützten kein JS oder hätten es deaktiviert.
Timbalu wrote:Gibt es außerdem Ideen oder Vorbilder, wie man eine dynamische Anzahl Entries für diesen Block (entweder aus der Config, bzw aus der eigentlichen sql query), also zwischen 1 und X, einzeln klappbar machen kann?
Verstehe ich nicht. Natürlich kannst Du auch dynamisch erzeugten Elementen (etwa über eine Klasse statt einer id) dieses Verhalten zuweisen …?
Timbalu wrote:Kann man aus einem Plugin heraus die Ausgabe des gesamten Backends bestimmen, bzw overlayen, also head, body, seitenleiste, main, und footer? Wenn ja, Wie? Letztendlich wäre erst dann so ein Dashboard das was es zu sein vorgibt...!
Was meinst Du mit „overlayen“?

YL
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: brainstorming: dashboard template UI mit jquery + x

Post by Timbalu »

yellowled wrote:Doch, es wäre ein Inline-Style, auch wenn es nur dynamisch im DOM vorhanden wäre. Aber immerhin ist relativ unwahrscheinlich, dass genau diesen Style jemand per CSS überschreiben möchte. Sauberer ist der Weg über eine Klasse, der aber eben bestimmte Effekte umständlicher umsetzbar macht. Und Screenreader hätten (nehme ich an) ebenso Probleme damit, es sei denn (was scheinbar noch recht häufig vorkommt), die unterstützten kein JS oder hätten es deaktiviert.
Das hört sich für mich an wie Rücksicht nehmen ist ganz gut, zu gewährleisten ist aber garNix... und/also ist inline style für SR nicht generell nicht zu lesen, sondern - wenn überhaupt JS fähig - nur eine mögliche und daher zu vermeidende Fehlerquelle für "Dazwischenfunker"..., oder? ;-)
yellowled wrote:Verstehe ich nicht. Natürlich kannst Du auch dynamisch erzeugten Elementen (etwa über eine Klasse statt einer id) dieses Verhalten zuweisen …?
Ja - nur WIE (anhand eines praktischen Beispieles s.u.)?
Ich hab meinen bisherigen Ablauf mal geschrumpft...:

Code: Select all

 jQuery(document).ready(function($) {
 $("div#entrybox a.button").click(function () {$("div#entrybox div.boxed").slideToggle("slow");});
});

    <div class="dashboard dashboard_comments">
        <h3> {$CONST.COMMENT} </h3>

            {foreach from=$comments item=co name='foo'}
            
            <div id="entrybox"> 
                
                <div class="blah" id="comment_{$co.id}">
                    <label class="x"> <a href="#colist_{$smarty.foreach.foo.iteration}" class="button"> Press Here</a> </label>
                
                    {body}
                
                    <div class="boxed">
                        <a name="colist_{$smarty.foreach.foo.iteration}"></a>
                        {detail+adminbox}
                    </div>
				
                </div>
						
            </div><!-- #entrybox end -->
          
            {/foreach}
            
    </div>
Bisher klappen alle ausgegebenen div.boxed gemeinsam auf oder zu - ist ja auch klar.
In der Plugin config kann man einstellen wieviele comments man ausgegeben haben will, die Datenbank Query gibt einem also zB 5, und entsprechend ihrer Daten durchaus auch mal weniger. Für den a namen klappt das ja auch gut mit der smarty iteration, wie aber mache ich das für jede einzelne Klappbox in dem Script?
yellowled wrote:Was meinst Du mit „overlayen“?
Also heute Nacht kam mir die Idee, ob ich nicht den 'backend_config' hook nehmen, versuchen das ganze "Admin Framework", wie head, body, sidebar, content, footer entsprechend im Dashboard nachbilden und ausgeben könnte, ohne das die weiteren Ausgaben und Abläufe erfolgen, sich das Dashboard also anstelle über die bisherige Backendstruktur legt... Bevor ich das weiter verfolge, wollte ich eigentlich nur mal wissen, ob das generell möglich ist und der eingeschlagene Weg über diesen Hook der richtige sei (schwierig wird es so oder so, nehme ich mal an).
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: brainstorming: dashboard template UI mit jquery + x

Post by yellowled »

Timbalu wrote:Das hört sich für mich an wie Rücksicht nehmen ist ganz gut, zu gewährleisten ist aber garNix...
Sagen wir mal so: Natürlich gibt es auch bei Screenreadern eine Grenze. Wer einen 10 Jahre alten Screenreader ohne JS benutzt, darf sich meines Erachtens ebensowenig wundern, wenn das Web nicht erwartungsgemäß reagiert, wie jemand, der heute noch im IE6 ohne JS unterwegs ist.
Timbalu wrote:Also heute Nacht kam mir die Idee, ob ich nicht den 'backend_config' hook nehmen, versuchen das ganze "Admin Framework", wie head, body, sidebar, content, footer entsprechend im Dashboard nachbilden und ausgeben könnte, ohne das die weiteren Ausgaben und Abläufe erfolgen, sich das Dashboard also anstelle über die bisherige Backendstruktur legt... Bevor ich das weiter verfolge, wollte ich eigentlich nur mal wissen, ob das generell möglich ist und der eingeschlagene Weg über diesen Hook der richtige sei (schwierig wird es so oder so, nehme ich mal an).
Verstehe ich immer noch nicht, ist mir zu abstrakt. Aus meiner Sicht ist das Dashboard Teil des Backends, ersetzt es aber nicht. Meinst Du das?

Für das Code-Beispiel brauche ich etwas mehr Zeit, als ich gerade habe, dazu später.

YL
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: brainstorming: dashboard template UI mit jquery + x

Post by Timbalu »

yellowled wrote:Aus meiner Sicht ist das Dashboard Teil des Backends, ersetzt es aber nicht.
Bisher ja..., aber es bietet ja eigentlich nichts (ausgenommen autoupdate), was nicht durch das BE sowieso schon bereitgestellt wird. Ersetzen kann ein Dashboard das Backend sowieso nicht und will das ja auch gar nicht. Es ordnet dessen Funktionen etc für den ersten entscheidenden Blick nur anders an und funktioniert bisher wie ein Layer im ansonsten leeren Hauptfenster.

Für mich umschlösse das mehr und ein Dashboard wäre soetwas wie eine neue Oberfläche, die alles (also auch Seitenleiste, Header, Mainfenster und Footer) etwas komprimierter zusammenfasst und auf den ersten Blick die wichtigen Arbeitszustände des BE zugänglich macht. Erst dann macht das wirklich Sinn. Die Links etc in die einzelnen Bearbeitungs- und Anzeigezustände des Backends bleiben gleich. Wie sagt die Wikipedia so schön ... "Ein Dashboard bezeichnet im IT- Bereich eine Visualisierungsform von Informationen in verdichteter Form".
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
Post Reply