HTML Struktur der CV

[Jache]

Hallo,

Der Titel ist vielleicht etwas unpassend aber ich weiß nicht wie ich es sonst nennen soll

Ich habe momentan mal etwas Zeit und als Softwarentwickler möchte ich nun Endlichkeit meine eigne visu erstellen nach meinem Geschmack und Design.

Nun habe ich heute schon das erste kleine Widget für mich geschrieben bzw. Ein bestehendes kopiert und abgeändert und auch sonst klappt es ganz gut.

Was ich mich aber Frage ist die gesamt Aufteilung auf der Seite, wie mache ich das?

Wenn ich 2D wähle kann ich ja jedes Element absolut positionieren, das ist momentan sogar mein Favorit, da ich so komplett flexibel bin.
Mein design ist nicht unbedingt komplett in ein Raster zu packen.
Das Problem bei der absoluten Positionierung ist die Auflösung. Ich möchte eigentlich die visu in 1920x1080 machen. Bei der absoluten Positionierung passt es aber nicht mehr beim iPad.
Ohne eine absolute Positionierung benötige ich jedoch drei Bereiche, die ich frei gestalten kann (Links, Mitte, rechts) und ebenso möchte ich in den einzelnen Bereichen recht frei sein. Also mal eine Seite im typischen Tabellen Layout. Mal eine Seite ganz frei. Usw.

Wie und wo kann ich sowas grundsätzlich einstellen?

Wie gesagt ich bin in HTML, CSS, PHP, Perl, Javascript, Python, Java sehr fit. Mache das beruflich.

Nur fehlt mir noch etwas der Zusammenhangs es grundsätzlichen Aufbaus der CV.

Kann mir hier jemand helfen?

Ist die CV irgendwie in Richtung MVC aufgebaut? Habe ich irgendwo meine Main templates zum festlegen der grundsätzlich Aufteilung (wie FCE's in TYPO3)?

[Chris M.]

Was ich mich aber Frage ist die gesamt Aufteilung auf der Seite, wie mache ich das?

Wenn ich 2D wähle kann ich ja jedes Element absolut positionieren, das ist momentan sogar mein Favorit, da ich so komplett flexibel bin.
Mein design ist nicht unbedingt komplett in ein Raster zu packen.
Das Problem bei der absoluten Positionierung ist die Auflösung. Ich möchte eigentlich die visu in 1920x1080 machen. Bei der absoluten Positionierung passt es aber nicht mehr beim iPad.

Du hast hier gerade genau den Grund beschrieben warum jeder Versuch (insb. bei anderen gängigen Visualisierungen...) eine "1920x1080" Visu zu machen die mit verschiedenen Endgeräten funktioniert zum Scheitern verurteilt ist!

Das macht einfach keinen Sinn!

Was Du willst wist eine Visu, die auf allen "großen" Geräten (Pads mit 10", Touch-Panels an der Wand, PC, Laptop) ungefähr gleich aussieht. Die haben aber alle eine unterschiedliche Anzahl an Pixeln - und in Zukunft wird's sicher noch mehr Unterschiede geben (z.B. mit High-dpi auf den Laptops).

Was bleibt aber gleich?
Die Finger-Größe!

Und wie misst man die? In Millimetern!

=> Die Button-Größe ist bewusst in Millimetern angegeben
(Genauer: in em, die hängen von der Schriftgröße ab und die von mm...)

Für eine Aufteilung auf der 2D Seite bieten sich nun eine Positionierung per em an, oder per Prozent.

Ohne eine absolute Positionierung benötige ich jedoch drei Bereiche, die ich frei gestalten kann (Links, Mitte, rechts) und ebenso möchte ich in den einzelnen Bereichen recht frei sein. Also mal eine Seite im typischen Tabellen Layout. Mal eine Seite ganz frei. Usw.

Die Praxis zeigt, dass man den Aufwand der freien Positionierung eigentlich nur für ein paar schmucke Seiten braucht. Viele der "sonstigen" Seiten sind per "Text" Seite nicht nur deutlich schneller erstellt - sondern genau so praktisch und gut nutzbar.

Ein Links/Mitte/Rechts sollte per prozentualen Positionierung auch bei den 2D Seiten jedoch leicht erreichbar sein.

Wie und wo kann ich sowas grundsätzlich einstellen?

Gar nicht. Du kannst nur einstellen, ob eine Seite grundsätzlich "Text", "2D" oder (aktuell nicht freigegeben) "3D" ist.
Bei "Text" gibt's halt für eine etwas feinere Steuerung die groups mit colspan und rowspan.
Bei "2D" die Positionierung mit dem was CSS hergibt, also Pixel, em und Prozent. Außerdem natürlich auch wieder Groups die intern dann wieder wie "Text" funktionieren.

Wie gesagt ich bin in HTML, CSS, PHP, Perl, Javascript, Python, Java sehr fit. Mache das beruflich.

Sehr gut! Dann kannst Du jha bei den Stellen helfen, die hier evtl. noch fehlen. Z.B. gab's mal den Wunsch in einer Group auch wieder auf "2D" wechseln zu können

Nur fehlt mir noch etwas der Zusammenhangs es grundsätzlichen Aufbaus der CV.

Da ist eigentlich nur wichtig zu wissen, dass die Template-Engine die Config-Datei zu einem DOM-Tree übersetzt, d.h. das HTML vorgibt. Die Darstellung dessen (also das ganze CSS) wird über das gewählte Design festgelegt.

Kann mir hier jemand helfen?

Hoffentlich

Ist die CV irgendwie in Richtung MVC aufgebaut? Habe ich irgendwo meine Main templates zum festlegen der grundsätzlich Aufteilung (wie FCE's in TYPO3)?

TYPO3 kenne ich nicht, kann also dazu nichts sagen.
Auch wenn ich MVC grundsätzlich kenne, tue ich mir gerade bei der Definition etwas schwer um sagen zu können ob die CV das so umsetzt. Sicher aber nicht klassisch, da die CV ja auch keine klassische Datenverarbeitung macht. Klar werden da Daten verarbeitet, aber eben kein Inhalt geladen, modifiziert und dann wieder gespeichert. Das macht bei einer Event-Anzeige und Auslösung so irgendwie keinen Sinn. Aber die Darstellung der Events (das "V", hier per Konfig-Datei->Template-Engine->Design) ist durchaus getrennt von der "C" Logik.

[Jache]

Hallo Chris,

ich danke dir vielmals. Du hast mir sehr weitergeholfen und so einen noch besseren Einstieg gegeben. Nun werde ich mal anfangen und schauen wo das ganze Enden wird

[Jache]

Hallo Christ,

doch noch was

Ich blicke das noch nicht so ganz mit der Aufteilung in der Config...

Ich möchte folgendes Konstrukt

linke Spalte über die gesamte Höhe
mittlere Spalte über die gesamte Höhe
rechte Spalte über die gesamte höhe.

Die Breiten sollen sein:

links 15%
mitte 15%
rechts 70%

Jetzt wollte ich groups erstellen, wie bekomme ich die aber neben einander?
Über <layout colspan="x" />?

Kann ich dann die einzelnen Widgets in den entsprechenden Bereichen absolut positionieren?

oder anders.
im linken Bereich soll mein Menü sein, aber nicht nur, sondern auch noch andere Widgets, die aber auf jeder Seite stehen bleiben sollen.
Geht das auch?

Kannst du mir vielleicht noch einen Tipp/Beispiel geben?

[Chris M.]

Du hast mehrere Möglichkeiten: einfach, hart oder verdammt hart.

Einfach: Nimm einen anderen Ansatz!
Ich habe das Gefühl, dass Du eine genaue Vorstellung hast, was rauskommen soll - und genau das willst Du mit der bestehenden CV umsetzen. Das wird wohl nur Schmerzen verursachen und am Schluss doch nicht funktionieren. Das passende Icon dazu ist Kopf-durch-die-Wand:
Lösung: Nimm das was es gibt und mach damit eine passende Visu. (Du siehst den anderen Ansatz?)
Für das feststehende Menü gibt's übrigens genau dafür die Navbar...

Hart: Also doch
Elemente die feststehen? Na genau so auf jede (Sub-)Seite mit drauf packen.
Colspan ist außerdem auch schon mal der richtige Ansatz. Die Seite wird hier in 12 Spalten unterteilt. Also wären colspan="2", colspan="2" und colspan="8" fast richtig (wären 16,7%, 16,7% und 66,7%). Du könntest sogar die nicht unterstützte (aber wohl funktionierende) Variante mit gebrochenen Breiten verwenden (also colspan="1.8", colspan="1.8" und colspan="8.4") um exakt auf 15%, 15% und 70% zu kommen.

Verdammt hart: Code anpassen
Also einfach das dazu programmieren was fehlt. Dabei z.B. erst mal mit einem eigenen Design anfangen und den Rest im Code. So hatte ich z.B. das planet-Design erstellt.
(Um ehrlich zu sein: bei dem Hintergrundwissen, von dem Du geschrieben hast, ist das eine eher leichte Übung. Aber ich wollte a) etwas provozieren und b) Leute die eben kein JS/HTML/CSS können nicht dazu verleiten sich hier zu frustrieren)