Repertoire darstellen

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

ich suche schon eine ganze Weile an einer wirklich sinnvollen Lösung für die Darstellung unseres Repertoires (zu sehen unter www.gospirit-siegen.de/repertoire.html).

Es sind mittlerweile so viele Lieder geworden, dass ich nur noch mit 2 Spalten auskomme. Allerdings bin ich 1. kein Freund von ewigem runterscrollen und 2. kann ich die Schrift nicht größer machen, da sonst die Lieder nicht mehr jedes in eine Zeile passen.

Ich suche also nach irgendeiner wirklich sinnvollen Lösung für dieses Problem, sodass ich es wieder etwas größer schreiben kann. Ich habe schon diverse pulldown effekte (mootools) etc. durch, aber irgendwie hat mich nichts überzeugt:frowning:

Hat hier vielleicht jemand eine Idee? Die Sprache spielt dabei erst einmal keine wirklich große Rolle (flash, php, html, js, css, …), allerdings sollte es auch möglichst einfach erweiterbar sein. Außerdem sollen auch die Songtexte irgendwie noch integriert werden, die ja momentan noch als Popup laufen.

Vielen Dank im voraus.

Dominik

#2

Moin,

Es sind mittlerweile so viele Lieder geworden, dass ich nur
noch mit 2 Spalten auskomme.

Du vielleicht. Andere hätten Platz für 5 Spalten, manche haben vielleicht nur Platz für 1 Spalte. Sowas sollte immer variabel sein.

Allerdings bin ich 1. kein Freund
von ewigem runterscrollen

Wenn kein Platz ist, muss man scrollen. Das ist so. In Büchern muss man irgendwann blättern. Das kann man aber auch auf Webseiten. Blättern.

  1. kann ich die Schrift nicht
    größer machen, da sonst die Lieder nicht mehr jedes in eine
    Zeile passen.

Das machen die User schon für Dich. Diese Kleckserei kann ja niemand mehr lesen. Zum Glück gibts Vergrößerungsmechanismen in den Browsern und man kann die Schriftgröße voreinstellen. Das ist zwar unfreundlich gegenüber den Nutzern, den Text kleiner als 1em zu machen, aber man kann sich ja behelfen, wenn man auf die Inhalte angewiesen ist. Dabei platzt dann zwar Dein Design auseinander, aber auch das geht höchstens zu Deinen Lasten, wenn es den Besuchern nämlich zu blöd wird, gehen sie einfach.

Ich suche also nach irgendeiner wirklich sinnvollen Lösung für
dieses Problem, sodass ich es wieder etwas größer schreiben
kann.

Das ist einfach. Einfach „font-size:1em“ in Deinem Stylesheet notieren. Schon hat der Text die optimale Größe.

Das größte Problem an Deinem Layout ist, dass Du nur einen kleinen Teil des Viewports für Deine Inhalte nutzt, aber gleichzeitig meckerst, Du habest nicht mehr Platz. Wer einen kleinen Viewport hat, bei dem wirklich nur zwei Spalten nebeinander passen, der muss halt scrollen (oder blättern), aber das wird ihm bewusst sein. Die Schrift so klein zu machen ist weit nutzerunfreundlicher als das Scrollen.

Liebe Grüße,
-Efchen

#3

Hallo Dominik,

Hat hier vielleicht jemand eine Idee? Die Sprache spielt dabei
erst einmal keine wirklich große Rolle (flash, php, html, js,
css, …),

hier muss ich kurz wiedersprechen: Flash ist keine Sprache, Flash ist ein Programm bzw. eine Laufzeitplattform. Die entsprechende Sprache zu Flash ist ActionScript, auch AS, welche sich im Moment in Version 3 befindet.

allerdings sollte es auch möglichst einfach
erweiterbar sein. Außerdem sollen auch die Songtexte irgendwie
noch integriert werden, die ja momentan noch als Popup laufen.

Ok. Bevor du über irgendetwas mit Programmiersprachen nachdenkst, solltest du den Ratschlag von Efchen befolgen: Spalten sowie ganzes Layout flexibel gestalten! Dann kann der User selbst bestimmen, wie groß er die Schrift oder wie lang / breit er die Seite haben möchte.

Sollte das aus irgendwelchen Gründen absolut nicht gehen (es wäre echt die einfachste Variante) kannst du auch auf das Allround-Duett PHP & MySQL zurückgreifen.

Ich denke PHP ist dir ein Begriff. MySQL ist ein Datenbanksystem, das über eine sehr einfache Schnittstelle mit PHP verbunden werden kann.

Ein Konzept für die Datenbank könnte so aussehen:

  1. Datenbank „Repertoire“

  2. Tabelle „Kategorien“
    2.1. Felder „ID“, „Name“

  3. Tabelle „Songs“
    3.1. Felder "ID, „Kategorie“, „Name“, „Musik“, „Text“, „Satz“, „Songtext“

Alle Songs sind in einer Datenbank „Repertoire“. Dort gibt es die Tabellen „Kategorien“ und „Songs“. In den Kategorien sind zur Übersicht die Songs aufgeteilt. In der Tabelle „Songs“ werden die einzelnen Songs mit ihren Informationen (z.B. Musi, Text, etc.) gespeichert.

Nun lässt sich ein einfaches CMS schreiben, mit dem man im Backend die Kategorien und Songs verwaltet und in Frontend die Ausgabe über die Kategorien steuert und sich dann zu jedem Lied die Informationen ansehen kann.

Die PHP-Dateien-Struktur könnte so aussehen:

repertoire.php

Anzeigen von Kategorien

Nach Auswahl einer Kategorie über GET oder POST zur Kategorie-Seite

repertoire_kat.php?kat=christmas

Anzeigen von Songs in dieser Kategorie (z.B. Christmas)

Nach Auswahl eines Songs über GET oder POST zur Song-Detail-Seite

repertoire_song.php?song=rudolf

Anzeigen des Songs mit seinen Informationen und dem Liedtext

Natürlich ist das nur ein grobes Beispiel. Und es ist nur für den Fall, das man es über eine Änderung der CSS-Datei nicht schafft!

Ich hoffe, du hast meine Ausführungen verstanden.

MfG, Florian J.

#4

Hallo Dominik,

(…) Repertoires (zu sehen unter
www.gospirit-siegen.de/repertoire.html).

Es sind mittlerweile so viele Lieder geworden, dass ich nur
noch mit 2 Spalten auskomme. Allerdings bin ich 1. kein Freund
von ewigem runterscrollen und 2. kann ich die Schrift nicht
größer machen, da sonst die Lieder nicht mehr jedes in eine
Zeile passen.

Ich dagegen würde eine schlichte „einspaltige“ Liste vorziehen. Du kennst nicht jede Größe der hunderte(tausende?) Browserfenster deiner Besucherinnen. Ich persönlich scrolle lieber nur ein einziges mal, als dass ich auf einem Smartphone oder Netbook nach dem Runterscrollen der ersten Spalte erst wieder raufscrollen muss, um bei der zweiten Spalte fortzufahren, die ich dann auch wieder runterscrollen muss, usw…

Ich suche also nach irgendeiner wirklich sinnvollen Lösung für
dieses Problem, sodass ich es wieder etwas größer schreiben
kann. Ich habe schon diverse pulldown effekte (mootools) etc.
durch, aber irgendwie hat mich nichts überzeugt:frowning:

Ich denke, eine mögliche, sinnvolle Lösung wäre, deine Einträge in eine Liste (ul-Tag) einzutragen. Diese ist dann erst mal schlicht linear, also ohne besonderes Design, nämlich Lied unter Lied. Einspaltig also, weil gar keine „Spalten“ verwendet werden.

Mit CSS-Regeln wäre es vermutlich möglich, den Listeneinträgen (li-Tags) feste Breiten zu geben, und diese nicht untereinander, sondern, sofern Platz vorhanden ist, nebeneinander anzuzeigen - und zwar immer so viele nebeneinander, wie grad Platz im Fenster der Seitenbesucherin ist.

Die Listeneinträge würden dann wie ein Mosaik nebeneinander und untereinander angeordnet werden, erhalten also so viele „Spalten“, wie grad Platz im Fenster der jeweiligen Seitenbesucherin ist. Allerdings wäre dann nicht spaltenweise sortiert, sondern zeilenweise, d.h. die ersten A-Songs stehen oben nebeneinander, u.s.w.

Problematisch wäre an dieser Lösung evtl noch die feste Breite deiner Listeneinträge. Wie breit willst du sie machen. Du weißt schließlich nicht, wie breit der komplette Seiteninhalt bei den Besucherinnen deiner Seite angezeigt werden.

Wobei… Da schon das gesamte Seitenlayout eine feste Breite hat, interessiert dich diese Frage vielleicht gar nicht? Darüber nachdenken könnte man aber dennoch.

Viele Grüße
Anja