Navigation mit Parallelogrammen

[Peter]

Der Titel sagt eh schon fast alles. Ich (eig. ein Kunde, der das Design seiner alten Visitenkarte auf die Website umgelegt haben möchte) würde gerne eine Navigation à la:
    __________________
   /     /     /     /
  /     /     /     /
 /_____/_____/_____/

bauen (zu meinen "Zeichenkünsten" dürft ihr mir nachher gratulieren =D).

Frage: Wie würdet ihr das lösen (es gibt ja leider nur rechteckige Bilderformate ^^), außerdem soll es einen Hover-Effekt (beim Bild, nicht beim daraufliegenden Text) geben, der das Bild ändert.

Ich dachte vllt mit DOM, also einfach Bilder (vllt als bg von div-Bereich mit Text drüber ?) und dann Abstand nach links halt festlegen (bin mir aber bei der Lösung bezüglich HoverEffekt nicht so sicher, da sich die Bilder da ja dann zwangsläufig überlagern, erzeugt ein MouseOver bei einem transparenten Teil eines GIFs auch eine Reaktion?)

Meine zweite Lösung wäre ganz primitiv aber auch unglaublich umständlich und nicht gerade flexibel: einfach in Rechtecke aufteilen:
________
   /
  /
_/______

so in etwa, ist aber ziemlich kompliziert wenn ich Bilder ändern will, da ich ja dann immer 2 ändern muss und auch dementsprechend mehrere Varianten der Bilder brauche.

Hat jemand noch weitere Lösungsansätze zu dieser Problematik? (bzw Information bez. DOM-Lösung, Browser-Kompatiblität und MouseOver bei transparenten/sich überlagernden Bildabschnitten)

Wäre sehr dankbar für jeden hilfreichen Beitrag

PS.: Punkte dienen nur als Platzhalter ;)

[ChrisB]

Hi,

Frage: Wie würdet ihr das lösen (es gibt ja leider nur rechteckige Bilderformate ^^),

Image Map.

außerdem soll es einen Hover-Effekt (beim Bild, nicht beim daraufliegenden Text) geben, der das Bild ändert.

Per JS beim mouseover über die AREA-Elemente das Bild komplett austauschen, bzw. über den entsprechenden Bereich ein „Sprite“ drüber legen.

erzeugt ein MouseOver bei einem transparenten Teil eines GIFs auch eine Reaktion?

Klar, die reagieren wie alle anderen Rechteck-Formen auch.

MfG ChrisB

[Peter]

Danke, wenn das mit CSS 3.0 nicht so browserkompatibel ist, werde ich wahrscheinlich ImageMap und Sprites verwenden (JavaScript haben doch eigentlich eh fast alle aktiviert, die meisten wissen eh nicht was das ist und wie mans ausschalten kann ^^)

[Der Martin]

Hallo,

Der Titel sagt eh schon fast alles.

nein, eher nicht - ich bin froh, dass du dein Anliegen nochmal in Worten und Skizzen erläuterst.

__________________
   /     /     /     /
  /     /     /     /
/_____/_____/_____/

Frage: Wie würdet ihr das lösen (es gibt ja leider nur rechteckige Bilderformate ^^), außerdem soll es einen Hover-Effekt (beim Bild, nicht beim daraufliegenden Text) geben, der das Bild ändert.

Mein erster Gedanke: Rechteckige Bilder, die sich in der Breite von der linken unteren bis zur rechten oberen Ecke des Parallelogramms erstrecken. An den Ecken links oben und rechts unten haben sie ein transparentes Dreieck.
Positionierung ... hmm, entweder jedes Element absolut positionieren, das gefällt mir aber nicht so. Alternativ könnte man die li-Elemente (eine Navigation ist ja eine Liste aus Links) auch floaten und mit negativem margin-right aneinanderrücken.

Auch eine Imagemap für den gesamten Navi-Bereich wäre denkbar; dann wird's aber mit dem hover-Effekt knifflig, wenn man nicht mit Javascript nachhelfen möchte.

Ich dachte vllt mit DOM, also einfach Bilder (vllt als bg von div-Bereich mit Text drüber ?) und dann Abstand nach links halt festlegen (bin mir aber bei der Lösung bezüglich HoverEffekt nicht so sicher, da sich die Bilder da ja dann zwangsläufig überlagern, erzeugt ein MouseOver bei einem transparenten Teil eines GIFs auch eine Reaktion?)

Ja, das ist wohl so. In den Übergangszonen würden sich u.U. beide Elemente "angesprochen" fühlen, obwohl beim Klicken natürlich nur das zuoberst liegende (also das im Quelltext später auftretende) Element reagieren würde.

Meine zweite Lösung wäre ganz primitiv aber auch unglaublich umständlich und nicht gerade flexibel: einfach in Rechtecke aufteilen:
________
   /
  /
_/______

Das wäre noch eine Variante, wenn du die Übergangszonen vom hover-Effekt und vom Klicken ausnehmen willst.

PS.: Punkte dienen nur als Platzhalter ;)

Welche Punkte?

So long,
 Martin

[Peter]

Welche Punkte?

Oh sorry, dachte das wäre wie in anderen Foren auch, dass mehrfache spaces einfach gelöscht werden und habe deshalb zuerst Punkte statt spaces gemacht
 /..../ statt /     /
als ich dann erkannt habe dass das hier zum Glück anders ist (*freu*) hab ichs ausgebessert, aber vergessen diesen Satz hier zu löschen :S

[Der Martin]

Hi,

Welche Punkte?
Oh sorry, dachte das wäre wie in anderen Foren auch, dass mehrfache spaces einfach gelöscht werden und habe deshalb zuerst Punkte statt spaces gemacht

ah, jetzt verstehe ich.

als ich dann erkannt habe dass das hier zum Glück anders ist (*freu*) hab ichs ausgebessert, aber vergessen diesen Satz hier zu löschen :S

Es gibt hier nur einen kleinen Bug im Zusammenhang mit Leerzeichen: Wenn eine Zeile mit _einem_ Leerzeichen beginnt, wird dieses Leerzeichen beim Zitieren unterschlagen. Zwei oder mehr Leerzeichen in Folge bleiben aber seltsamerweise erhalten.

Ciao,
 Martin

[bleicher]

Grüße,
es gäbe da eine sehr brutale lösung, die aber definitiv besser aussheen würde und keine überlappungsprobleme hat - ein einziges bild für die gesamte leiste.
mit dazugehörigem eigenem bild für hover von jedem punkt und imagemaps, die ja poligonal sein dürfen.
brutal, aber bei ausreichend geringer farbtife müsste es gehen
MFG
bleicher

[Jo_S]

Das geht seit CSS 3.0 ganz simpel über das Transform-Modul: "div {transform: skew (...) }".

Zum Einstieg: deutsches Kurz-Tutorial als Video unter http://www.youtube.com/watch?v=HsYB8DkByMY&p=0DBF8EC1B953D567&index=12&playnext=4.
Ausführlich (englisch) unter http://www.w3.org/TR/css3-2d-transforms/

Gruss, Jo

[Jo_S]

Nachtrag (nach Lesen der bisherigen Antworten):

vor der Verwendung von Imagemaps in der Hauptnavi würde ich abraten! Wenn es einfach nur um die Einrückung der einzelnen Menüpunkte geht, kannst du den a href's auch per CSS unterschiedliche Pseudoklassen mit unterschiedlichen magin-left zuteilen.

Die Hover-Effekte des Hintergrunds sind auch ohne JS kein Problem: dem a.pseudoklasse:hover per CSS einfach einen anderen Bildhintergrund geben und fertig ist die Laube.

[ChrisB]

Hi,

vor der Verwendung von Imagemaps in der Hauptnavi würde ich abraten!

Mit welcher Begründung? (SEO-Bedenken, ...?)

M.E. jedenfalls aktuell er einzig zuverlässige Weg, „schiefe Kanten“ mit vertretbarem Aufwand so umzusetzen, dass auch jeweils nur die Parallelogramme auf Cursorberührung reagieren, und nicht auch die rechteckigen Flächen drumherum, ohne groß mit JavaScript Positionen auszuwerten etc.

MfG ChrisB

[Peter]

Das geht seit CSS 3.0 ganz simpel über das Transform-Modul: "div {transform: skew (...) }".

Hört sich genial an =D dh ich müsste als Bild einfach nur ein Rechteck nehmen und das dann mit CSS 3.0 ändern und dann nebeneinanderstellen?

Mir drängt sich nur die Frage auf wie verbreitet CSS 3.0 schon ist (das soll eine kommerzielle Seite werden), können das nur FF4 und IE9 interpretieren?

[Deus Figendi]

Mir drängt sich nur die Frage auf wie verbreitet CSS 3.0 schon ist (das soll eine kommerzielle Seite werden), können das nur FF4 und IE9 interpretieren?

Nein transform sind schon einigermaßen verbreitet, sie funktionieren in allen wichtigen Browsern: Firefox, Opera, Safari, Chrome.
Und keinesfalls in irgendwelchen zukünftigen Versionen, sondern _JETZT_

Und ein gewisser "zoltan" hat wohl auch eine Möglichkeit gefunden es den IEs beizubruingen. Ich habe den Artikel allerdings noch nicht gelesen, weiß also nicht wie ^^ (naja irgendwie mit JS halt)
Die Demos sind auf alle Fälle schonmal ansehnlich.

Ich denke daher, dass man durchaus transform verwenden kann und würde es dir auch empfehlen.
Der Effekt ist nämlich, dass deine Navigation in allen vernünftigen Browsern so aussieht wie besagte Visitenkarte. Im InternetExplorer sind die Parallelogramme eben keine solchen, sondern Rechtecke... aber was soll's? Sie sehen dadurch noch lange nicht hässlich aus und sind genauso gut zu bedienen.
Wenn dein Kunde also nicht darauf besteht, dass es auch in den alten IEs wie auf der Visitenkarte aussieht (oder er einfach nicht mit dem IE testet) kannst und solltest du transform an dieser Stelle verwenden.

Es gibt noch einen Haken, aber der ist nicht so tragisch:
Du müsstest derzeit noch die Browser-Präfixe vor die CSS-Eigenschaften schreiben also -webkit- -o- und -moz-. Zusätzlich würde ich es aber auch ohne dies 'reinschreiben, dann wird die Seite etwas langlebiger/zukünftsfähiger.

CSS3-transform: Warum nicht?

Fox4 pffft

[Gunnar Bittersmann]

@@Deus Figendi:

nuqneH

Und ein gewisser "zoltan" hat wohl auch eine Möglichkeit gefunden es den IEs beizubruingen. Ich habe den Artikel allerdings noch nicht gelesen, weiß also nicht wie ^^ (naja irgendwie mit JS halt)

Es geht ohne JavaScript. Der Artikel beschreibt auch wie: Die Transformationsmatrix ermitteln und den Matrix-Filter verwenden.

Transformationsmatrix fürs Scheren:
[latex]\begin{pmatrix} 1 & 0 \ a & 1 \end{pmatrix}[/latex]

Ergibt:
[latex]\begin{pmatrix} x' \ y' \end{pmatrix} = \begin{pmatrix} 1 & 0 \ a & 1 \end{pmatrix} \begin{pmatrix} x \ y \end{pmatrix} = \begin{pmatrix} x+ay \ y \end{pmatrix}[/latex]

Das Problem daran ist, dass die Transformation auch auf den Text wirkt. Das will man wohl nicht.

Qapla'

[Deus Figendi]

Es geht ohne JavaScript. Der Artikel beschreibt auch wie: Die Transformationsmatrix ermitteln und den Matrix-Filter verwenden.

Jep, hatte es dann gestern Abend noch gelesen :)

Das Problem daran ist, dass die Transformation auch auf den Text wirkt. Das will man wohl nicht.

Stimmt, das Problem hast du dann mit jedem transform, auch mit dem "normalen".
Das beste was mir dazu einfällt ist zurückbiegen also <li> nach rechts und <a> (im li-Element) nach links (vielleicht kann/sollte man die Liste auch als ganze transformieren).

Oder (zugegeben ist das uncool): Man positioniert die li-Elemente relative und packt dort jeweils zwei Geschwisterelemente rein, einmal das was mal ein Parallelogramm werden soll (div oder img oder was weiß ich) und das a-Element.
Das Parallelogramme positioniert man dann absolute und das a-Element wenn man möchte auch (muss man aber glaube ich nicht).
Dann sollten sie sich überlagern, das eine ist transformiert, das andere nicht. Allerdings muss man die width vorher wissen.

Oder man lebt mit dem kursiven Text :D

[Gunnar Bittersmann]

@@Deus Figendi:

nuqneH

Das beste was mir dazu einfällt ist zurückbiegen also <li> nach rechts und <a> (im li-Element) nach links

Nö, ich glaube, das sollte man nicht tun. Zum einen hat der Browser da unnötigerweise einiges zu rechnen. Zum anderen wird die zweimalige Transformation der Schrift durch Rundungsfehler womöglich nicht dasselbe ergeben wie das Original; das Schriftbild würde darunter leiden.

Oder (zugegeben ist das uncool): Man positioniert die li-Elemente relative und packt dort jeweils zwei Geschwisterelemente rein, einmal das was mal ein Parallelogramm werden soll (div oder img oder was weiß ich) und das a-Element.

Ich weiß: Es muss kein zusätzliches Element im Markup sein; wo es doch ein per CSS generierteds Pseudoelement tut. (Was allerdings nicht das Problem der parallelogrammförmigen Clickfläche löst.)

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Zum anderen wird die zweimalige Transformation der Schrift durch Rundungsfehler womöglich nicht dasselbe ergeben wie das Original; das Schriftbild würde darunter leiden.

Zu sehen im IE. (In anderen Browsern sieht’s gut aus.)

Unschön an Variante 1 auch die zusätzlichen 'span'-Elemente (die den Text geraderücken) im Markup. Dafür ist wirklich das jeweils ganze Parallelogramm ('a'-Element) verlinkt.

Variante 2: 'li' wird schief, 'a' stellt den Text wieder gerade. An den Übergängen keine Verlinkung.

In Variante 2+ wird dies mit JavaScript behoben.

Richtig vernünftig ist aber erst Variante 3: Der Text wird gar nicht erst schiefgestellt, sondern ein Pseudoelement 'a:before' (Kindelement von 'a').

Der IE ist aber nicht vernünftig genug, die Transformationsmatrix auf generierten Inhalt anzuwenden. Dass er auch den Hover-Effekt dafäur nicht hinbekommt, ist das kleinere Problem.

Und wir reden hier über den 8er. Der 7er versagt schon beim generierten Inhalt.

Qapla'

[Peter]

Zum anderen wird die zweimalige Transformation der Schrift durch Rundungsfehler womöglich nicht dasselbe ergeben wie das Original; das Schriftbild würde darunter leiden.

Die Schrift kann ruhig auch kursiv sein, das würde sogar alles etwas einfacher machen, wenn ich mich nicht irre.

Richtig vernünftig ist aber erst Variante 3: Der Text wird gar nicht erst schiefgestellt, sondern ein Pseudoelement 'a:before' (Kindelement von 'a').

Erm...das mit den Pseudo-Elementen muss ich mir erst zu Gemüte führen ^^ Sieht aber (im FF) unglaublich aus =D

Der IE ist aber nicht vernünftig genug, die Transformationsmatrix auf generierten Inhalt anzuwenden. Dass er auch den Hover-Effekt dafäur nicht hinbekommt, ist das kleinere Problem.

Was für ein generierter Inhalt (generiert, so wie dynamisch generiert, also wie bei AS per Code erzeugt?)

Und wir reden hier über den 8er. Der 7er versagt schon beim generierten Inhalt.

Wie würde es beim 7er aussehen, wenn der Text auch kursiv wäre? (Hab grad leider keinen zur Hand ;)

Qapla'

Vielen Dank, dass du dir die Mühe gemacht hast das alles mal zu skripten und noch zu erklären!!

[Gunnar Bittersmann]

@@Peter:

nuqneH

Die Schrift kann ruhig auch kursiv sein, das würde sogar alles etwas einfacher machen, wenn ich mich nicht irre.

Ja, du irrst nicht. Es wird einfacher. Von Variante 1 bleibt nur das Schrägstellen der 'a'-Elemente übrig, das Geradestellen des Textes in den 'span'-Elementen fällt weg. Letztere sind also überflüssig.

Ich hab das mal als Variante 0 eingetütet.

Und nein, du irrst. Die Schrift ist nicht kursiv, sondern oblique. (In kyrillischer Schrift ist der Unterschied bei einigen Buchstaben noch ausgeprägter als in lateinischer.)

Was für ein generierter Inhalt

foo:before { content: "bar" } generiert per CSS Inhalt, nämlich ein Pseudoelement (nennen wir es foo_before) mit dem Textinhalt "bar".

Gerendert wird <foo><foo_before>bar</foo_before>Lorem ipsum</foo>, obwohl im Markup nur <foo>Lorem ipsum</foo> steht. S.a. [CSS2 §5.12.3]

Pseudoelemente kann man wie richtige Elemente stylen. Damit sie angezeigt werden, müssen sie aber Inhalt haben; in meinem Beispiel ein U+00A0 no-break space (als CSS-Escape [CSS2 §4.1.3, ESCAPES]*).

Qapla'

* Ich muss hier mal aufs englische Original verweisen; die neusten Ergänzungen sind in der deutschen Übersetzung noch nicht enthalten. Aber demnächst!

[Peter]

Wow, ich kann nur sagen, dass ich CSS mächtig unterschätzt habe ^^ Wie bereits angedeutet komme ich aus "der Flash Szene" und muss mich infolgedessen mal so richtig einarbeiten. (Ich glaub für mich gibts JS und CSS betreffend noch viele unerforschte Gebiete ^^)

[Deus Figendi]

Wow, ich kann nur sagen, dass ich CSS mächtig unterschätzt habe ^^ Wie bereits angedeutet komme ich aus "der Flash Szene" und muss mich infolgedessen mal so richtig einarbeiten. (Ich glaub für mich gibts JS und CSS betreffend noch viele unerforschte Gebiete ^^)

Das ändert sich so schnell auch nicht. Ich glaube wenn man heute anfängt Webdesign zu erlernen hat man das meiste drauf, wenn CSS4 erscheint :D (man hat es natürlich locker drauf bevor CSS3 umgesetzt ist, weil das wahrscheinlich nie 100%ig geschehen wird ^^).
Ich habe vielleicht so mit CSS 2.1 angefangen mich ernsthaft mit Webdesign auseinander zu setzen (allerdings deutlich später mit JS). Das war vor <= acht Jahren. Und ich lerne auch noch wenigstens wöchentlich was dazu. (Primär dadurch dieses Forum zu lesen und hier verlinkte Artikel).
Letzte Woche(?) habe ich z.B. über die Bedeutungslosigkeit von DOCTYPEs für Browser etwas erfahren.
Wenn du CSS unterschätzt schau dir ein paar Experimente für Chrome an (läuft auch in anderen Browsern, brauchst kein Chrome). Welche Technologien verwendet werden steht immer dran und Flash ist da eher selten. Auch die Demos von Microsoft sind durchaus ansehnlich (ich finde die von Google aber beeindruckender ^^).
Das Fazit was man ziehen kann wenn man sich das anschaut ist: Mit offenen (also nicht Flash oder Java oder Silverlight oder...) Webtechnologien kann man _ALLES_ machen. Einschränkungen entstehen nur künstlich durch Sicherheitsbewustsein der Engine-Schreiberlinge.

[Peter]

Flash ist da eher selten.

Will jetzt nicht als militanter Flash-Befürworter auftreten, aber an dieser Stelle muss ich schon loswerden, dass Flash durchaus seine Berechtigung hat. Die Demos sind zwar beeidruckend wenn man bis jetzt nur mit HTML, CSS, JS programmiert hat, wenn man sich aber ansieht was in Flash, mit wohl erheblich geringerem Aufwand möglich ist...Damit will ich nicht die "Genialität" von HTML5 oder CSS3 untergraben, aber ich glaube das ist im Moment einfach nur ein Hype, der sich wieder legen wird, wenn einige Entwickler versuchen komplexe (graphisch anspruchsvolle) Spiele mit HTML5/sonstige Anwendungen zu entwickeln ;)

Das Fazit was man ziehen kann wenn man sich das anschaut ist: Mit offenen (also nicht Flash oder Java oder Silverlight oder...) Webtechnologien kann man _ALLES_ machen.

Anwendungen mit Webcam steuern? Spiel mit Webcam steuern Natürlich sind das auch nur Spielereien, aber darum gehts ja gerade :D Außerdem wird Flash (proprietär, was natürlich einige Nachteile hat) HTML5 immer einen Schritt voraus sein, da man sich nicht bei jeder neuen Funktion/neuem Update mit 1000 Leuten absprechen muss. Als Webdesigner sollte man aber sowieso kein Hardliner sein, sondern sich immer die besten Stückchen herauspicken (das habe ich vor =D)

HTML kann jetzt sehr interessante Dinge, die Flash nicht kann (wobei ich aber keineswegs Deeplinking oder SEO meine, denn diese Funktionen hat Flash mittlerweile dazugelernt ;)

Aber im Moment tendiere ich eh eher zu PHP (und infolgedessen natürlich zu HTML, CSS, ..., wollte nur Flash auch mal etwas verteidigen ^^), da mir Flash alleine nicht flexibel genug ist (eignet sich besser für statische Seiten) und ich keine Lust habe in MXML oder was man da verwendet Flex zu skripten :S

[Der Martin]

Hallo,

Will jetzt nicht als militanter Flash-Befürworter auftreten, aber an dieser Stelle muss ich schon loswerden, dass Flash durchaus seine Berechtigung hat.

ja, für manche Dinge schon - für Dinge, die *ich* gar nicht haben möchte.

[...] Natürlich sind das auch nur Spielereien, aber darum gehts ja gerade :D

Okay, wenn du das so siehst ...
Ich zähle mich eher zu den Hardlinern, bin der Meinung, dass das Web primär ein Informationsmedium ist und als solches aus Client-Sicht primär auf HTML, CSS, Bildern und optional(!) ein wenig Javascript aufgebaut sein sollte. Andere Inhalte wie Audio oder Video als Download-Content.

Als Webdesigner sollte man aber sowieso kein Hardliner sein, sondern sich immer die besten Stückchen herauspicken (das habe ich vor =D)

Hmm, das sehe ich anders. Es kommt vor allem drauf an, was man unter den "besten" Stückchen versteht. Flash gehört für mich nicht dazu, das ist aus meiner Sicht eine Lösung für Animationen oder Online-Spiele (die ich nicht haben will) oder Online-Videos (die ich viel lieber als MPEG2- oder MPEG4-Videos zum Download hätte).

So long,
 Martin

[Peter]

ja, für manche Dinge schon - für Dinge, die *ich* gar nicht haben möchte.

Da scheiden sich die Geister ^^

[...] Natürlich sind das auch nur Spielereien, aber darum gehts ja gerade :D

Okay, wenn du das so siehst ...

Das war auf den Post mit dem Link zu den ganzen Spielereien mit HTML(5) usw bezogen, nicht generell gemeint ;)

Ich zähle mich eher zu den Hardlinern, bin der Meinung, dass das Web primär ein Informationsmedium ist und als solches aus Client-Sicht primär auf HTML, CSS, Bildern und optional(!) ein wenig Javascript aufgebaut sein sollte. Andere Inhalte wie Audio oder Video als Download-Content.

Spartanisch, spartanisch, ... ich finde diese Ansicht aber (nicht persönlich gemeint) schon fast veraltet. Längst wird das Firmen-Image dem Benutzer (dem es übrigens meistens egal ist ob das jetzt Flash oder HTML ist) nicht mehr nur über die Inhalte der Seite transportiert sondern auch mit der (visuellen) Gestaltung. Was ich damit meine ist, dass sich Flash für das Portfolio eines Webdesigners sehr gut eignet, da es im Web ja auch darum geht Information möglichst einfach zu vermitteln. Was will ein Webdesigner vermitteln? Sein Können. Und da heutzutage sowieso keiner mehr Zeit/Lust/Laune hat auch nur einen Absatz zu lesen bietet sich eine visuelle Aufbereitung der zu vermittelnden Inhalte doch an. Wenn ich zwischen 2 Leuten auswählen müsste (als Auftraggeber, dem der Unterschied zwischen Flash und HTML nicht bekannt/egal ist) und ich sehe eine coole Seite mit schönen Effekten, usw und eine HTML Seite, bei der einfach nur Referenzen (mit mir nicht verständlichen Beschreibungen wie: Datenbankanbindung und CMS) aufgelistet sind...... das Problem ist ja eben, dass Leute heutzutage einfach oberflächlich geworden sind. Aber ich bin der Meinung dass man nicht stur auf seiner Linie beharren sollte (auch wenn man Recht hat, das Web ist ja nicht nur primär sondern auch sekundär als bloße Informationsquelle gedacht!!), mann muss sich einfach anpassen um zu überleben.

Wenn du aber sagst das Web sollte aus HTML, CSS, Bildern und optional ein wenig JS bestehen. Das wäre undenkbar. Warum? Ohne Sprachen wie PHP und Datenbanken, usw (all jene Sprachen/... die das "Web 2.0" geprägt haben) wäre das Internet statisch. Ich persönlich brauche kein Facebook/Gästebücher/... aber Foren finde ich mitunter ganz  praktisch (und das lässt sich meines Wissens nach auch nicht mit HTML5 allein gestalten). Doch als Webdesigner muss man noch weiter denken. Würde sich ein statisches Internet (so wie du es dir anscheinend wünschst, zugegebenermaßen fast ohne Sicherheitslücken) denn ebenso großer Beliebtheit erfreuen wie das jetzige? Wohl kaum, man beachte allein all jene die sich mit dem Begriff Internet erst wegen Facebook auseinandersetzten. Doch inwiefern betrifft das die Webdesigner? Weniger User bedeutet wohl auch weniger Investitionen in dieses (eben nicht so verbreitete) Medium Internet, was wiederum zur Folge hätte, dass viele keine Arbeit mehr hätten ;)

Online-Spiele (die ich nicht haben will)

Ob manche Leute jetzt am Tag 5h vor irgendwelchen blöden Onlinespielen sitzen, die gelangweilte Flashentwickler geschrieben haben, kann dir doch eigentlich relativ egal sein (ausser du bist Arbeitgeber und deine Angestellten zocken durchgehend, oder du bist bei Ubisoft/...)

oder Online-Videos (die ich viel lieber als MPEG2- oder MPEG4-Videos zum Download hätte)

stell dir einmal eine Youtube Version (ohne HTML5) vor, bei der du jedes Video downloaden müsstest!! (Ich weiß schon dass es auch so in den Cache geladen wird) aber du wirst mir recht geben müssen, dass es so auf jeden Fall angenehmer ist! Außerdem ist das alles eine recht "logische" Entwicklung. Jeder will irgendetwas noch einfacher, intuitiver machen, die anderen müssen mehr oder weniger mitziehen.

Hoffe ich widerspreche mir hier nirgendwo selbst, bin schon etwas müde -_-

[Der Martin]

Moin,

Ich zähle mich eher zu den Hardlinern, bin der Meinung, dass das Web primär ein Informationsmedium ist und als solches aus Client-Sicht primär auf HTML, CSS, Bildern und optional(!) ein wenig Javascript aufgebaut sein sollte. Andere Inhalte wie Audio oder Video als Download-Content.
Spartanisch, spartanisch, ... ich finde diese Ansicht aber (nicht persönlich gemeint) schon fast veraltet.

spartanisch, ja - minimalistisch. Das ist genau das, was ich als Internet-Konsument haben will.

Längst wird das Firmen-Image dem Benutzer (dem es übrigens meistens egal ist ob das jetzt Flash oder HTML ist) nicht mehr nur über die Inhalte der Seite transportiert sondern auch mit der (visuellen) Gestaltung. [...] Wenn ich zwischen 2 Leuten auswählen müsste (als Auftraggeber, dem der Unterschied zwischen Flash und HTML nicht bekannt/egal ist) und ich sehe eine coole Seite mit schönen Effekten, usw und eine HTML Seite, bei der einfach nur Referenzen (mit mir nicht verständlichen Beschreibungen wie: Datenbankanbindung und CMS) aufgelistet sind...

... dann würde ich den wählen, dessen Entwurf ruhiger, sachlicher und mit weniger Effekthascherei daherkommt.

Wenn du aber sagst das Web sollte aus HTML, CSS, Bildern und optional ein wenig JS bestehen. Das wäre undenkbar. Warum? Ohne Sprachen wie PHP und Datenbanken, ...

Du hast den wichtigen Zusatz "aus Client-Sicht" übersehen. Natürlich ist das Web in seiner Komplexität ohne serverseitige Scriptsprachen und Datenbanken nicht mehr vorstellbar. Diesen Part möchte ich auch nicht wegdiskutieren, im Gegenteil, *dort* ist Dynamik und Programmlogik IMHO gut aufgehoben.

oder Online-Videos (die ich viel lieber als MPEG2- oder MPEG4-Videos zum Download hätte)
stell dir einmal eine Youtube Version (ohne HTML5) vor, bei der du jedes Video downloaden müsstest!!

Traumhaft. Dann wären die Videos endlich direkt zugänglich, und man bräuchte keine umstrittenen Add-Ons mehr, um sie zu speichern.

aber du wirst mir recht geben müssen, dass es so auf jeden Fall angenehmer ist!

Für mich nicht. Angenommen ich hätte tatsächlich ein Flash-Plugin installiert (was ich nicht habe), dann sitze ich vor der Kiste, schaue mir das eine oder andere Video an, und dann gefällt mir eins so gut, dass ich mich unwillkürlich frage: Toll, und wie kriege ich das nun "haltbar" auf meinen PC, damit ich es mir ansehen kann, so oft ich will?
Deswegen: Das Angebot von Video- oder Audio-Inhalten ist für mich erst dann befriedigend, wenn man mir als Besucher auch die Möglichkeit anbietet, diese als Datei auf meinem Rechner zu speichern. Das Online-Abspielen kann ein optionales Goodie sein, aber nicht das primäre Angebot.

Hoffe ich widerspreche mir hier nirgendwo selbst

Nö, dein Standpunkt klingt schon schlüssig. Aber es ist eben ein ganz anderer als meiner. :-)

Ciao,
 Martin

[Kai345]

[latex]Mae  govannen![/latex]

oder Online-Videos (die ich viel lieber als MPEG2- oder MPEG4-Videos zum Download hätte)
stell dir einmal eine Youtube Version (ohne HTML5) vor, bei der du jedes Video downloaden müsstest!!

Traumhaft. Dann wären die Videos endlich direkt zugänglich, und man bräuchte keine umstrittenen Add-Ons mehr, um sie zu speichern.

Braucht man die? Also, die meisten Videos finde ich ohnehin in meinem Browsercache, nachdem ich sie mir angeschaut habe. Also kopiere ich sie raus, gebe ihnen einen brauchbaren Namen und fertig :)

aber du wirst mir recht geben müssen, dass es so auf jeden Fall angenehmer ist!

Für mich nicht. Angenommen ich hätte tatsächlich ein Flash-Plugin installiert (was ich nicht habe), dann sitze ich vor der Kiste, schaue mir das eine oder andere Video an, und dann gefällt mir eins so gut, dass ich mich unwillkürlich frage: Toll, und wie kriege ich das nun "haltbar" auf meinen PC, damit ich es mir ansehen kann, so oft ich will?

siehe oben :)

Deswegen: Das Angebot von Video- oder Audio-Inhalten ist für mich erst dann befriedigend, wenn man mir als Besucher auch die Möglichkeit anbietet, diese als Datei auf meinem Rechner zu speichern. Das Online-Abspielen kann ein optionales Goodie sein, aber nicht das primäre Angebot.

Sehe ich anders herum: Download-Link als zusätzliches "Goodie". Wieso sollte ich mir z.B ein Video von 20MB ziehen müssen, wenn ich schon nach 30 Sekunden merken würde, daß es doch nicht das ist, was ich erwartet habe? Kostet mich nur meinen begrenzten Monats-Traffic.

Cü,

Kai

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Andere Inhalte wie Audio oder Video als Download-Content.

Ich will ganz bestimmt nicht jedes Video erst runterladen, um dann einen Player meiner Wahl staten zu müssen.

Ein Video soll schon auf der jeweiligen Webseite anzusehen sein. (Allerdings auch erst starten  (d.h. auch erst dann geladen werden), wenn der Nutzer den Startknopf drückt.)

Es kommt vor allem drauf an, was man unter den "besten" Stückchen versteht.

Hm … ;-)

Qapla'

[Der Martin]

Hallo,

Andere Inhalte wie Audio oder Video als Download-Content.
Ich will ganz bestimmt nicht jedes Video erst runterladen, um dann einen Player meiner Wahl staten zu müssen.

du vielleicht nicht. Ich schon. Genau so, wie du es gerade beschrieben hast.

Es kommt vor allem drauf an, was man unter den "besten" Stückchen versteht.
Hm … ;-)

Keine weiteren Fragen, Euer Ehren. :-)

Ciao,
 Martin

[Peter]

»»(Allerdings auch erst starten  (d.h. auch erst dann geladen werden), wenn der Nutzer den Startknopf drückt.)

Opera?

[Peter]

PS.: Könnte ich das mit einer Browserweiche programmieren (so à la Version 2+ für den IE und Version 3 für alles was besser ist^^)? Komme (leider) aus dem Flash Bereich und kenne bez HTML/CSS/JS nur die Basics (diesbezüglich habe ich aber keine Praxis)

[Gunnar Bittersmann]

@@Peter:

nuqneH

PS.: Könnte ich das mit einer Browserweiche programmieren (so à la Version 2+ für den IE und Version 3 für alles was besser ist^^)?

Ja, aber wozu? Variante 2+ sieht im IE grottenschlecht aus.

Wenn du Stile nur für IE 7 angeben willst, dann so:
*+html selctor { property: value }

oder um ganz sicher zu gehen, dass nicht irgendein Uralt-Opera das in den falschen Hals kriegt:
*:first-child+html selctor { property: value }

Falls noch Bedarf besteht, IE < 7 zu unterstützen:
* html selctor { property: value }

Beispiel:

body { background: red }  
*+html body { background: green }  
* html body { background: blue }

Im IE ärgert man sich grün (IE 7) und blau (IE < 7); in anderen Browsern warmer Rot-Ton.

Erlärung:
'*+html' selektiert alle 'html'-Elemente, die Nachfolger eines beliebigen anderen Elements sind. '* html' selektiert alle 'html'-Elemente, die Nachfolger eines beliebigen anderen Elements sind. [CSS2 §5]

Das 'html'-Element ist aber das Wurzelelement eines jeden HTML-Dokuments, somit weder Nachfolger noch Nachfahre eines anderen Elements. Die Selektoren selektieren also: nichts – in anständigen Browsern. In IEs wirken sie trotzdem, und eben diesen Fehler kann man sich zunutze machen. “It’s a feature, not a bug.”

Qapla'

[MudGuard]

Hi,

Richtig vernünftig ist aber erst Variante 3: Der Text wird gar nicht erst schiefgestellt, sondern ein Pseudoelement 'a:before' (Kindelement von 'a').

Mit nur einem Pseudo-Element funktioniert es aber nur, wenn die Elemente aneinanderstoßen. Wenn dazwischen eine Lücke sein soll, muß man m.W. noch ein a:after benutzen, um das schräggestellte rechte Ende zu erzeugen.
Damit könnte man dann aber auch Links in der Form
 _________  _________  _________  _________
/_________/_________/_________/_________\

erzeugen.

Der IE ist aber nicht vernünftig genug,

Ans Ende dieses Satzes gehört ein Punkt, nicht ein Komma und irgendeine irrelevante Einschränkung ;-)

cu,
Andreas

[Gunnar Bittersmann]

@@MudGuard:

nuqneH

Variante 3
Mit nur einem Pseudo-Element funktioniert es aber nur, wenn die Elemente aneinanderstoßen. Wenn dazwischen eine Lücke sein soll, muß man m.W. noch ein a:after benutzen, um das schräggestellte rechte Ende zu erzeugen.

Nö, margin-left oder margin right für li oder a tut’s.

Der IE ist aber nicht vernünftig genug,
Ans Ende dieses Satzes gehört ein Punkt, nicht ein Komma und irgendeine irrelevante Einschränkung ;-)

*g*

Qapla'

[MudGuard]

Hi,

Variante 3
Mit nur einem Pseudo-Element funktioniert es aber nur, wenn die Elemente aneinanderstoßen. Wenn dazwischen eine Lücke sein soll, muß man m.W. noch ein a:after benutzen, um das schräggestellte rechte Ende zu erzeugen.

Nö, margin-left oder margin right für li oder a tut’s.

ich hätt's mir doch genauer anschauen sollen, ich hatte einen ganz anderen Ansatz im Sinn - per ::before ein //-förmiges "Element" auf den linken und mit ::after ein entsprechendes "Element" auf den rechten Rand geklatscht ...
Du legst _ein_ Parallelogram hinter den Link ...

cu,
Andreas

[MudGuard]

Hi,

Mit nur einem Pseudo-Element funktioniert es aber nur, wenn die Elemente aneinanderstoßen. Wenn dazwischen eine Lücke sein soll, muß man m.W. noch ein a:after benutzen, um das schräggestellte rechte Ende zu erzeugen.

Nö, margin-left oder margin right für li oder a tut’s.

Ich bin mathematisch nicht mehr fit genug, gibt es eine Matrix, mit der man
 ______        _____
|______| nach /_____\

transformieren kann? Mit translate/skew/rotate/scale dürfte das ja nicht hinzukriegen sein (wenn doch: auch da wäre ich an der Lösung interessiert)

Mich würde dann natürlich auch interessieren, wie die beiden Winkel ins Ergebnis einfließen ...

cu,
Andreas

[Gunnar Bittersmann]

@@MudGuard:

nuqneH

Ich bin mathematisch nicht mehr fit genug, gibt es eine Matrix, mit der man
______        _____
|______| nach /_____\

transformieren kann?

Ich hatte vorhin eine Weile drüber gebrütet und denke: nein, gibt es nicht.*

Mit einer Transformationsmatrix erhält man
[latex]\begin{pmatrix} x' \ y' \ 1\end{pmatrix} = \begin{pmatrix}a & b & c \ d & e & f \ 0 & 0 & 1\end{pmatrix} \begin{pmatrix}x \ y \ 1\end{pmatrix} = \begin{pmatrix}ax + by + c \ dx + ey + f \ 1\end{pmatrix}[/latex]

Also für x′ und y′ jeweils eine Linearkombination aus x, y und einem absoluten Glied.

Für diese Verzerrung bräuchte man aber das Produkt xy:
[latex]\begin{pmatrix} x' \ y' \ 1\end{pmatrix} = \begin{pmatrix}x + axy \ y \ 1\end{pmatrix}[/latex]

Mit translate/skew/rotate/scale dürfte das ja nicht hinzukriegen sein (wenn doch: auch da wäre ich an der Lösung interessiert)

Bei all diesen Transformationen bleiben im Original parallele Linien auch im Bild parallel. Das ist bei dieser Verzerrung aber nicht der Fall. Also: nichts zu machen.

Qapla'

* Hm, nicht, dass es mir am Ende so ergeht wie Cheatah. ;-)

[Peter]

______        _____
|______| nach /_____\

Gibt es denn keine "Fake-3D" Matrix (so wie in Flash), mit der man denselben Effekt erzeugen könnte als ob man den oberen Rand des Bildes nach hinten neigen würde?

Aber mal abgesehen davon könntest du das doch eh einfach in Bilder packen (weniger Code, höhere Kompatibilität wenn ich mich nicht irre) und das Problem mit dem Überschneiden hast du hier eh nicht (spricht doch eh alles für Bilder =D)

[MudGuard]

Hi,

Aber mal abgesehen davon könntest du das doch eh einfach in Bilder packen

Ein Bild ist rechteckig (aus CSS-Sicht), nicht trapezförmig.
Es geht ja gerade darum, daß nur die parallelogramm- bzw. in meinem Fall trapez-förmige Fläche auch die aktive Fläche ist.

cu,
Andreas

[Peter]

Es geht ja gerade darum, daß nur die parallelogramm- bzw. in meinem Fall trapez-förmige Fläche auch die aktive Fläche ist.

Oh sorry, daran hatte ich nicht gedacht xD
Also ich würde sagen (wie all die anderen weisen Leute hier) imagemap oder (wenns das jetzt in HTML5/CSS3 gibt) eine Fake-3D-Matrix.

[Peter]

Das Problem daran ist, dass die Transformation auch auf den Text wirkt. Das will man wohl nicht.

Wie würde ich denn überhaupt diese Transformation überhaupt anwenden? :S (wenn nicht per JS, dann wohl kaum mit HTML oder CSS, oder?)

[Gunnar Bittersmann]

@@Peter:

nuqneH

Wie würde ich denn überhaupt diese Transformation überhaupt anwenden? :S (wenn nicht per JS, dann wohl kaum mit HTML oder CSS, oder?)

Natürlich per CSS [CSS3-2D-TRANSFORMS], ist ja schließlich auch Sache der Darstellung.

Qapla'

[Peter]

Natürlich per CSS [CSS3-2D-TRANSFORMS], ist ja schließlich auch Sache der Darstellung.

Aso, das ist ja aber wieder CSS3, der Link (das mit JS) war ja nur so eine Art Erweiterung für CSS3 damits auch im IE funktioniert (wenn ich das richtig verstanden habe, hatte jetzt leider noch nicht die Zeit mich da einzuarbeiten)

[Gunnar Bittersmann]

@@Peter:

nuqneH

Aso, das ist ja aber wieder CSS3, der Link (das mit JS) war ja nur so eine Art Erweiterung für CSS3 damits auch im IE funktioniert (wenn ich das richtig verstanden habe, hatte jetzt leider noch nicht die Zeit mich da einzuarbeiten)

Wie ich das beim Überfliegen verstanden habe, errechnet das JavaScript aus den Angaben zu translate, rotate, scale, skew etc. die Transformationsmatrix. Wenn man dies mal eben schnell selbst erledigt, braucht man auch für IE kein JavaScript.

Für ’ne einzelne Scherung ist die Matrix ja einfach.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Wie ich das beim Überfliegen verstanden habe, errechnet das JavaScript aus den Angaben zu translate, rotate, scale, skew etc. die Transformationsmatrix. Wenn man dies mal eben schnell selbst erledigt, […]

BTW: Wie man das das erledigt, lässt sich auch in der SVG-Spec nachlesen.

BTW2: Erst mein drittes Gunnar[tm]-Posting.*

Qapla'

* in diesem Thread

[Peter]

Sorry für double-post

aber was ich sagen wollte: Wenn ich das realisieren will (auch für den IE), dann werde ich um JS nicht herumkommen, entweder um CSS3 auch dem IE "verständlich zu machen" oder das mit der ImageMap und dem Sprite. Infolgedessen ist es mir relativ egal, ob und wenn ja wie viel JS bei der Lösung involviert ist =D (Wenn es mir aus mir bis jetzt unerschlossenen Gründen nicht egal sein sollte, bitte sagen ;)

[Deus Figendi]

aber was ich sagen wollte: Wenn ich das realisieren will (auch für den IE), dann werde ich um JS nicht herumkommen

Wie Gunner unten schon sagte, du brauchst nicht zwingend JS, das JS nimmt dir nur das Umrechnen für den IE ab. Du kannst für statische Elemente ebensogut das einmal vorher ausrechnen und dann fertig in dein CSS werfen.

Und nochmal zur nachdrücklichen Betonung: CSS3 ist nicht die Zukunft, es ist die Gegenwart :)

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

[latex]\begin{pmatrix} x' \ y' \end{pmatrix} = \begin{pmatrix} 1 & 0 \ a & 1 \end{pmatrix} \begin{pmatrix} x \ y \end{pmatrix} = \begin{pmatrix} x+ay \ y \end{pmatrix}[/latex]

Oops, ich kann nicht mehr rechnen. (Aber egal, mir wird ja eh alles geglaubt. ;-))

Bei der Matrix kommt raus:

[latex]\begin{pmatrix} x' \ y' \end{pmatrix} = \begin{pmatrix} 1 & 0 \ a & 1 \end{pmatrix} \begin{pmatrix} x \ y \end{pmatrix} = \begin{pmatrix} x \ ax+y \end{pmatrix}[/latex]

Um das oben genannte Ergebnis zu erzielen, sieht die Matrix anders aus – transponiert:

[latex]\begin{pmatrix} x' \ y' \end{pmatrix} = \begin{pmatrix} 1 & a \ 0 & 1 \end{pmatrix} \begin{pmatrix} x \ y \end{pmatrix} = \begin{pmatrix} x+ay \ y \end{pmatrix}[/latex]

Qapla'