konnexus

artikellayout mit integrierten topics

2009-12-12

die letzten wochen sind ein paar längere artikel zustande gekommen. das gab mir anlass mein artikel-layout zu überdenken. gestern hab ich meine gedanken dann in pixel manifestiert - hier ist das grobe ergebnis (layout in voller größe ansehen).

ziele: 1. artikel mit bildern schön anreichern zu können, wie ich es bei editorial design auch schon immer gemacht habe. nicht nur die teaser-bilder zur bebilderung zu benutzen. 2. artikel-text und topics mit einander zu verbindung auf sinnvolle art und weise. wofür hab ich denn ein semantic weblog? topic-information da anzeigen zu lassen, wo tatsächlich die topics im text auftauchen. für die technische umsetzung hab ich schon eine idee, wie man das so hinkriegt, dass der inhalt ohne divterie auskommt. zu lang zu beschreiben hier.

gestalterisch habe ich dann weit aus mehr möglichkeiten bis auf eine einschränkung: die teaserbilder. die dürften dann nicht beliebig hoch werden. kann ich mit leben. für artikel, die nur aus einem kommentar zu dem teaserbild bestehen, würde sowieso ein anderes layout her müssen.

es ist noch unklar, wo und wie die restlichen dem artikel zugeordneten topics stehen werden. die kommentare dazu zu gestalten sollte ein leichtes sein.

was haltet ihr von diesem ansatz?

übrigens wäre der ansatz ein erster schritt, die basis für individuelle artikelgestaltung zu legen.

Comments:

ben_ am 2009-12-12

Sehe ich das richtig, dass die Topics in der Glosse "von Hand" durch einen Anker o.ä. im Fließtext getriggert würde?

Das wäre perfekt, weil man dass – für denn Fall, dass man die volle Breitseite – dann einfach weglassen kann.

Außerdem sieht es superklassisch aus. Damit werden Topics ja quasie zu Glossar-Beiträgen in der Glosse. Was kann man mehr verlangen?

Konstantin am 2009-12-12

die topics werden in der tat von hand gesetzt. ich stelle mir das so vor, dass man das topic als link mit einer bestimmten klasse kennzeichnet. ungefähr so:

a href="/topicname" class="topic placeteaser"
topicname im kontext
/a

durch die klasse "topic" weiß mein ausgabescript, dass es sich beim link um ein topic handelt. das href gibt eindeutig den topicnamen wider. durch die klasse "placeteaser" weiß das script, dass ein topic-teaser platziert werden soll.
alles weitere sollte man im script lösen können.

bei der platzierung wird ein div geschrieben, das auf der selben höhe wie der absatz ist, in dem der topic vorkommt. vielleicht kommt noch ein wenig javascript-magic dazu und der topic-teaser wird auf der selben zeilenhöhe platziert, wie der topic selbst.

fym am 2009-12-13

Oha, da bin ich gespannt. Schaut auf alle Fälle schon vielversprechend aus.
Ich würde mir vielleicht noch überlegen, ob man da überhaupt sofort mit Div-Erstellung und JS herangehen müsste. Mit CSS sollte das ebenso zu bewerkstelligen sein. Dann spart man sich gleich das Auslesen der Zeilenhöhe und braucht kein Fallback für die Leute mit deaktiviertem JS.

ben_ am 2009-12-13

So hab ich mir das auch ungefähr vorgestellt. Das mit dem Link ist fuchsig! Sehr clever. Kann man etwender über einen eigenen Filter machen, oder über ein Template-Tag. Nehme ich auf in die Todos für das Modul.

Konstantin am 2009-12-14

so, erste beta-version fertig.

Comment form here

Topics:

editorial design

gestaltung von büchern und zeitschriften habe ich früher gemacht.

konnexus.net

konnexus.net ist ein experiment: informations-aggregation, filterung und semantische zuordnung von topics. basierend erstmal auf meinen bookmarks und meinen aufgeschriebenen gedanken. für mehr info siehe about.

Layout