JavaScript Galerie / Semantik

[Matthias Apsel]

Om nah hoo pez nyeetz, alle!

Im Design 26 gibt es eine Galerie mit Bildern von Brücken. Ich würde das gern ein wenig sinnhafter umsetzen und habe folgende Idee.

<figure class="gallery">  
  <img src="/images/logo.png" alt="aussagekräftige Beschreibung">  
    <figcaption>  
      <h2>Title</h2>  
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt  
      ut labore et dolore magna aliqua. Ut enim ad minim veniam ...  
    </figcaption>  
</figure>

figure::before und figure::after können zu klicksensitiven Bereichen gemacht werden, die per JavaScript Bild und Beschreibung tauschen. Dann wären allerdings die Beschreibungen an zwei verschiedenen Stellen zu pflegen. Alle Bilder auszuliefern, halte ich auch nicht für richtig.

Gibts da was Geschickteres?

Was ist mit der Überschrift im figcaption-Element? Laut W3C ist es erlaubt, aber ist es auch sinnvoll? Wäre

<figure>  
  <h2>  
  <img>  
  <figcaption>

besser?

Ist die Überschrift also der Titel des Bildes oder eine Überschrift in der Beschreibung des Bildes?

Matthias

[1UnitedPower]

Meine Herren,

Ist die Überschrift also der Titel des Bildes oder eine Überschrift in der Beschreibung des Bildes?

Schwieriger Fall. Das h2-Element ist evtl. auch völlig unangebracht, denn:

h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.

und weder figure noch figcaption sind sectioning content.

Du könntest auch das title-Attribut des img-Elements heranziehen und mit CSS sichtbar machen:

img::after {  
   content: attr('title');  
}

[Gunnar Bittersmann]

@@1UnitedPower:

nuqneH

Du könntest auch das title-Attribut des img-Elements heranziehen und mit CSS sichtbar machen:

img::after {

content: attr('title');
}

  
Nö, könntest du nicht. img darf als leeres Element keinen Inhalt haben, auch keinen generierten.  
  
Qapla'

-- 
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

[1UnitedPower]

Meine Herren,

Nö, könntest du nicht. img darf als leeres Element keinen Inhalt haben, auch keinen generierten.

Ich weiß deine Beiträge inzwischen sehr zu schätzen und vertraue dir deshalb in Bezug auf deine Antwort, trotzdem bitte ich dich in diesem Fall um eine Quellenangabe, weil ich nicht wüsste, wo ich dieses Verhalten in den Specs nachzuschlagen hätte.

Merci
-1UP

[Matthias Apsel]

Om nah hoo pez nyeetz, 1UnitedPower!

Nö, könntest du nicht. img darf als leeres Element keinen Inhalt haben, auch keinen generierten.

… trotzdem bitte ich dich in diesem Fall um eine Quellenangabe, weil ich nicht wüsste, wo ich dieses Verhalten in den Specs nachzuschlagen hätte.

http://forum.de.selfhtml.org/archiv/2011/2/t203313/#m1374406

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

figure::before und figure::after können zu klicksensitiven Bereichen gemacht werden, die per JavaScript Bild und Beschreibung tauschen. Dann wären allerdings die Beschreibungen an zwei verschiedenen Stellen zu pflegen.

Das verstehe ich nicht.

Alle Bilder auszuliefern, halte ich auch nicht für richtig.
Gibts da was Geschickteres?

Bilder on demand per JavaScript laden.

Was ist mit der Überschrift im figcaption-Element? Laut W3C ist es erlaubt, aber ist es auch sinnvoll?

IMHO nein.

Wäre

<figure>

<h2>
  <img>
  <figcaption>

> besser?  
  
IMHO nein.  
  

> Ist die Überschrift also der Titel des Bildes oder eine Überschrift in der Beschreibung des Bildes?  
  
Andere Frage: Ist es wirklich eine Überschrift? Etwas, was AT-Nutzer als (Kapitel-)Überschrift wahrnehmen sollen?  
  
~~~html
<figure>  
  <img src="…" alt="…"/>  
  <figcaption>  
    <span class="name">foo</span>  
    <span class="description">fasel blah</span>  
  <figcaption>  
</figure>

oder gleich mit Schema.org à la:

<figure typeof="http://schema.org/ImageObject">  
  <img property="contentUrl" src="…" alt="…"/>  
  <figcaption>  
    <span property="name">foo</span>  
    <span property="description">fasel blah</span>  
  <figcaption>  
</figure>

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

figure::before und figure::after können zu klicksensitiven Bereichen gemacht werden, die per JavaScript Bild und Beschreibung tauschen. Dann wären allerdings die Beschreibungen an zwei verschiedenen Stellen zu pflegen.

Das verstehe ich nicht.

Es geht um diese Seite: http://selfhtml.apsel-mv.de/vorschau/vorschau-26 und dort die Galerie mit Brückenbildern. Dort werden die Links „next“ und „prev“ mit JavaScript erzeugt, diese Links würde ich mit ::before resp. ::after realisieren wollen und per JavaScript Bild und Beschreibung tauschen.

Alle Bilder auszuliefern, halte ich auch nicht für richtig.
Gibts da was Geschickteres?

(im Original befinden sich alle Bilder und Beschreibungen im HTML-Quelltext, bei einer JS-Lösung steht im HTML nur ein figure-Element, dessen Inhalt per JS ausgetauscht wird. Die Bildbeschreibungen stehen dann an zwei verschiedenen Stellen.)

Bilder on demand per JavaScript laden.

Das entspricht ja meiner Idee.

Ist die Überschrift also der Titel des Bildes oder eine Überschrift in der Beschreibung des Bildes?

Andere Frage: Ist es wirklich eine Überschrift? Etwas, was AT-Nutzer als (Kapitel-)Überschrift wahrnehmen sollen?

Ich denke, nein.
(AT-Nutzer = Nutzer von Screenreadern?)

<figure>

<img src="…" alt="…"/>
  <figcaption>
    <span class="name">foo</span>
    <span class="description">fasel blah</span>
  <figcaption>
</figure>

> oder gleich mit Schema.org à la:  
> ~~~html

<figure typeof="http://schema.org/ImageObject">  

>   <img property="contentUrl" src="…" alt="…"/>  
>   <figcaption>  
>     <span property="name">foo</span>  
>     <span property="description">fasel blah</span>  
>   <figcaption>  
> </figure>

Welche der beiden Varianten würdest du wählen?

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Es geht um diese Seite: http://selfhtml.apsel-mv.de/vorschau/vorschau-26

Komme immer noch nicht mit. Auf Click auf „prev“/„next“ soll durchgeblättert werden. Auf welche Aktion hin soll der Text angezeigt werden? Soll er wie jetzt über das Bild gelegt werden?

Und warum sollten „die Beschreibungen an zwei verschiedenen Stellen zu pflegen“ sein?

(AT-Nutzer = Nutzer von Screenreadern?)

Ja, z.B. AT = assistive technology

Welche der beiden Varianten würdest du wählen?

Nun, die 1. ist geringfügig weniger Code und man munkelt, Klassenselektoren seien performanter als Attributselektoren. Die 2. ist schon eher semantisches(!) Markup und vielleicht ist das in Zukunft für Dinge nutze, an die man heute noch gar nicht denkt.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Komme immer noch nicht mit. Auf Click auf „prev“/„next“ soll durchgeblättert werden. Auf welche Aktion hin soll der Text angezeigt werden?

hover

Soll er wie jetzt über das Bild gelegt werden?

ja

Und warum sollten „die Beschreibungen an zwei verschiedenen Stellen zu pflegen“ sein?

Weil ich im HTML genau ein figure-Element hätte und per JS den kompletten Inhalt (also Bild _und_ Beschreibung) austauschen würde. Die Beschreibungen der Bilder, die erst nach Klick auf „prev“/„next“ angezeigt werden, würden ja dann nicht im HTML-Dokument stehen.

Matthias