Absatzklasse "Tipp" - Githubissues

AstridSemm commented 8 years ago

Ich hätte gern eine Absatzklasse mit einer gelben Lampe, damit ich die Tipps nicht immer mit Hinweisen kennzeichnen muss. Die Schrift sollte aber dann schwarz oder blau sein. :o)

xwolfde commented 8 years ago

Wenn ich schon dabei bin, könnte ich auch gleich mehr machen.

Gibt es neben den Aufrufezeichen ggf. auch ein anderes Zeichen? Sollte aus dieser Liste sein: http://test8.tindu.rrze.uni-erlangen.de/tests/symbole-aus-font-awesome/

xwolfde commented 8 years ago

@RRZE-Webteam/fau-webredaktion braucht ihr da ggf. auch noch was?

xwolfde commented 8 years ago

Alle bisherigen Absatzklassen sind hier zu sehen: http://test8.tindu.rrze.uni-erlangen.de/tests/textelemente/absatzklassen/

ghost commented 8 years ago

Ich frag mal rum - die bisherigen sind ja schon sehr schick :+1: Nur das Baustellensymbol verstehen wohl nur Techies...

Wir werden wohl verstärkt vom blauen Ausrufezeichen Gebrauch machen, das rote ist wichtig, aber oft eben zu dick. Astrids Lampe wäre auch nicht schlecht.

Mir fällt spontan ein "hier entlang" oder "weiter" ein, im Sinne eines Verweises. Z.B. als Ersatz für manchmal noch zu findende Häkchen: >>> Einsatzzweck: Auf Beratungsseiten verweisen wir oft auf weitere, detailliertere Inhalte:

→ Bitte folgen Sie den Hinweisen auf der Seite zu den Deutschkursen

AstridSemm commented 8 years ago

Für den Tipp wäre lightbulb-o gut, denke ich. :o)

AstridSemm commented 8 years ago

Karsten, was du möchtest, ist wahrscheinlich arrow-circle-right.

xwolfde commented 8 years ago

Ja, das Baustellensymbol ist auch eher etwas Notlösung: Um Performance zu sparen, dürfen keine klassischen Bilder verwendet werden, sondern es sollte aus dem Icon Font kommen. Und dort ist die Auswahl begrenzt. Dafür haben wir aber was Farbe und Größe und Umrandung angeht keine besonderen Schranken.

AstridSemm commented 8 years ago

Wie wär's mit wrench? Das ist wenigstens ein Schraubenschlüssel, der wird eher mit laufenden Arbeiten verbunden.

ghost commented 8 years ago

ah, es geht nach fontawesome? arrow-circle-right oder arrow-right oder hand-o-right die hand find ich ja witzig, aber die pfeile sind wohl seriöser, passender. und der im kreis passt zu den anderen icons.

xwolfde commented 8 years ago

Ja, so meinte ich das. Alle Font Icons aus Awesome sind möglich. Man kann sie ja jetzt auch schon "von Hand" einbauen, wenn man sich auskennt: http://test8.tindu.rrze.uni-erlangen.de/tests/symbole-aus-font-awesome/

ghost commented 8 years ago

(das scheint ja allen spaß zu machen hier :grinning: ) wrench ist gut, was besseres gibt es wohl bislang nicht für die baustelle. vielleicht, wenn ihr die faubox pushen wollt, noch eine cloud für links in die box? wobei man die vielleicht nicht als fette zeile definieren will...

ghost commented 8 years ago

mehr:

Links zu Videos: http://fontawesome.io/icon/youtube-play/ Links zu Audiobeiträgen: http://fontawesome.io/icon/music/ --> Beide Fälle haben wir sehr häufig, trotz Videoportal und Oembed - bei uns geht es speziell um externe Inhalte, die wir nur verlinken dürfen/können.

Downloads: http://fontawesome.io/icon/download/ --> Im Sinne einer fetten Zeile, anstelle einer reinen Überschrift Downloads?

xwolfde commented 8 years ago

Okay.. Könnt ihr mir bitte noch Vorschläge für die Namen der Klassen bzw der Shortcodes geben? Ansonsten nehme ich Sindarin :P

AstridSemm commented 8 years ago

Baustelle: baustelle Tipp: tipp Faubox: box Fehlt noch was?

ghost commented 8 years ago

Mann seid ihr schnell :)

Ich würde faubox statt box nehmen. Dazu noch:

Verweis-Pfeil: "verweis" oder "weiter" (circle-arrow-right) Video: videolink Audio: audiolink Download: download

xwolfde commented 8 years ago

Ähm.... euch ist aber klar, dass es hier um Absatzklassen geht? Also ein Absatz (nicht einem Link), dem vorne ein Zeichen vorangestellt wird. Für Links gibt es ein Plugin...

ghost commented 8 years ago

Naja, ich hatte oben noch keine Antwort/Kritik erhalten... siehe oEmbed und warum das hier nicht reicht.

Das Absatzformat sollte okay sein, denn auch die Klasse "attention" setzen wir mit kürzeren Hinweisen ein (1 Satz), aber durchaus als Absatz.

Verweis, Audio und Videolink sind analog zu "attention" gedacht. In einem Beitrag oder auf einer Seite steht dann unter einer Überschrift "Mehr zum Thema" o.ä. dann hinter einem Audio-/Videosymbol der Satz (Absatz) "Hörbeitrag zum Forschungsthema in der Mediathek des Deutschlandfunks" oder "Mitschnitt der XY-Veranstaltung in der Mediathek von BR alpha" - usw. Wir wollten keine Linklisten damit stylen.

ghost commented 8 years ago

Ergänzung: Der Absatztext muss dann nicht fett sein, weil fette Links nicht so gut aussehen. Der ganze Linktext/Absatz würde von uns verlinkt werden - sprechend und so.

Wenn das zu abstrakt ist, baue ich mal ein Beispiel auf test....

AstridSemm commented 8 years ago

Jaha, durchaus, xwolf! So wie zum Beispiel [hinweis]] die Absatzklasse "hinweis" hat, soweit ich das verstanden habe.

xwolfde commented 8 years ago

Baustelle haben wir schon. Da wolltet ihr nur das Symbol geändert haben auf "wrench"

Neu:

tipp .. und das hat welches Symbol aus Awesom???
faubox ... und das hat welches Symbol aus Awesome? Es gibt da zwei Symbole die mit box enden. Welches?
videolink mit Symbol youtube-play
audiolink mit Symbol music
download mit Symbol download

ghost commented 8 years ago

faubox: cloud-download (http://fontawesome.io/icon/cloud-download/) - Upload kommt ja (bis auf Weiteres) nicht vor?

tipp: lightbulb-o http://fontawesome.io/icon/lightbulb-o/ meinte Astrid glaubich

AstridSemm commented 8 years ago

Sehr richtig, Karsten. Schön, dass wenigstens einer hier meine Nachrichten liest. ;oD

xwolfde commented 8 years ago

...o O ( jetzt verbünden die beiden sich auch noch gegen mich . Grummel )

AstridSemm commented 8 years ago

Nun, wie sagte weiland ein weiser Mitmensch schon? Lesen können bringt Vorteile (nach oben scrollen übrigens auch). ;oD

ghost commented 8 years ago

Nein, nein, alles ganz neutral.

xwolfde commented 8 years ago

Ok, http://test8.tindu.rrze.uni-erlangen.de/tests/textelemente/absatzklassen/

Da es Kollissionen (insbesondere bei download) mit anderen Plugins gab, musste ich allerdings die Syntax für die neuen Absatzklassen neu machen und hab sie dabei auch für die alten Klassen vereinheitlicht. Die alten Klassennamen/Shortcodenamen funktionieren aber wieterhin zur Abwärtscompatibilität.

Der Aufruf ist stets: [notice-$name] ... [/notice-$name]

Wobei $name halt die genannten Klassen sind.

ghost commented 8 years ago

Ich mags! Danke Wolfgang.

ghost commented 7 years ago

Wie genau ist z.B. die Download-Klasse gedacht? Soll das eine Art Zwischenüberschrift sein (dazu ist die Schrift zu dünn) oder soll das um eine verlinkte Datei herum gelegt werden (dann ist das Mime-Type-Symbol hässlich im Weg, wir haben keine Downloads ohne). Oder muss es um Überschriften drumrum?

Hier hat es noch nicht den von mir gewünschten Effekt:

unbenannt

xwolfde commented 7 years ago

Genauso wie bei den anderen Klassen auch: Links Symbol, rechts davon irgendein Text. Keine Überschrift. Verstehe ich die Frage nicht?

ghost commented 7 years ago

Die Frage ist: Wofür nimmt man so etwas normalerweise? (Ich weiß, dass ich mir das nicht gwünscht habe :grin: ) Im Beispiel sieht es nicht gut aus als Überschrift (auch nicht mit fettem Text) - es wirkt, als fehle da der Link beim Download. Lege ich das um eine Überschrift Klasse 3 oder 4 drumrum, wird es normaler (fetter) Text. Das ist ja auch richtig so - entweder < h > oder < p >

Wenn es zu direkt zu einer Dowload-Datei gehören soll: Einen Dowload hinter den Text legen, führt zu oben beschriebener Kollisiion mit den Mime-Icons.

Wofür würdest du das also einsetzen? Das ist die Frage.

Mir fällt das jetzt erst auf, beim Versuch des Nutzens. Ich mag das Ding weiterhin, aber ich kann es so aktuell nicht benutzen, fürchte ich. Oder stelle mich besonders doof an.

ghost commented 7 years ago

Konkretisiert: Welche Funktion soll der Text neben dem Symbol haben?

AstridSemm commented 7 years ago

Da habe ich gerade ein unerwartetes Feature gefunden:

Wenn man die Absatzklasse nicht per Shortcode ([[notice-download]] Text [[/notice-download]] definiert sondern im HTML-Code mit p class="notice-download", dann wird die Klasse an den nächsten Absatz vererbt.

Abgesehen davon noch ein paar Gedanken rund um die Klassen: Es mag eine intelligente Idee sein, die Download-Klasse auch Listen mitzugeben (oder einem span, um das im Fließtext einbauen zu können). In dem Fall sollte man die Link Icons unterdrücken. Eventuell könnte man die Downloadklasse auch nur dann den Listenelementen des Download-Plugins mitgeben, wenn das Link Icons Plugin nicht aktiviert ist.

ghost commented 7 years ago

Danke Astrid, in die Richtung geht es. Ich habe mal versucht, das umzusetzen: http://test4.tindu.rrze.uni-erlangen.de/absatzklassen-test

Hier sieht man vielleicht eher, was ich meine. Das Icon als Zusatz zu einer Überschrift zu nutzen, ergibt kaum Sinn, weil es auf einer gegliederten Seite mit Text und anderen Überschriften untergeht und eben fett ist, keine Überschrift. Es passt irgendwie nicht. Ohne Fettung sowieso nicht, das fügt sich nie schön ins Bild einer Seite ein.

Bleibt also noch die Gestaltung von Listen oder das Icon direkt vor eine einzelne Datei zur optischen Hervorhebung. Hier haben wir bis auf Weiteres das Problem mit den Mime-Icons, aber wenn man das beheben kann - gern :) Beträfe dann auch die faubox-Klasse, oder?

Das Vererben der Klasse (ganz unten) gelang mir nicht - was falsch gemacht?

vorn und hinten...

ghost commented 7 years ago

unbenannt

AstridSemm commented 7 years ago

Mich stört das pdf-Icon neben dem Download-Icon jetzt nicht, um ehrlich zu sein.

ghost commented 7 years ago

Wirklich nicht? Das verstößt doch gegen das Ziel, ein luftiges, nicht so gedrängtes Design zu haben - die beiden Icons bedrängen sich gegenseitig.

Was ein Einwand sein könnte: Das pdf-Icon ist ja eine Konvention und beschreibt Inhalt auch näher, vielleicht darf es auch gar nicht weg. Dann wäre mehr Abstand wünschenswert - Platz ist eigentlich genug nach rechts in den meisten Fällen. Vielleicht noch einmal so viel Weißraum nach rechts, wie das Download-notice-Icon breit ist?

csw- commented 7 years ago

Hmmm, also in Kombination mit einer Downloadliste finde ich es unangebracht. Hier hat das Mime-Type-Icon eine viel höhere Aussagekraft.

Als Überschrift ist es okay, wobei ich mir dafür gerade keinen UseCase vorstellen kann. Es sieht im ~~Konzept nett aus aber sollte man wirklich eine Datei derart vorstellen, wäre ein Vorschaubild hier besser. Zb. bei der Vorstellung von Broschüren, hier will ich ja dann das Deckblatt präsentieren und nicht das Icon...

ghost commented 7 years ago

Okay, also ich spiele jetzt mit den Icons herum und als Absatzklasse eignen sich die Dinger vor allem für einzeln stehende Elemente/Texte (und machen was her :smiley: ):

Baustelle: https://www.fau.eu/alumni/the-fau-network/join-our-network/
Download: https://www.fau.de/intranet/fau-repraesentieren/bildrecht/
Kurze Downloadliste: https://www.fau.de/intranet/rund-ums-arbeiten/betriebsschliessung-zum-jahreswechsel - hier ist der große Abstand durch den Absatz gerade noch okay. Für längere Listen wohl nicht.
Gemischte Listen sehen auch nicht gut aus: https://www.fau.eu/international/international-applicants/bachelors-masters-state-examinations/during-your-studies/scholarships-for-international-students-about-to-graduate - hier muss man kreativ werden oder anders sortieren oder... ich weiß es nicht. Im Zweifel taugen die Absatzklassen prinzipbedingt dafür nicht.

Das ist grundsätzlich keine Kritik, sondern einfach eine Wiedergabe von Erfahrungen ;)

Was mich weiterhin stört, sind die zwei kollidierenden grafischen Elemente - Absatzklassen-Icon und Mime-Icon. Das passt nicht - zu gedrängt, es stört sich gegenseitig. Hier wäre etwas mehr Weißraum beim nächsten Update wünschenswert bzw. mal ein Text, ob das hilft. Auf das Mime-Icon verzichten ist keine Option, das ist ja eine Konvention.

xwolfde commented 7 years ago

Wie ja oben gesagt, die Icons sind eine Ergänzung, die man nutzen kann. Bei den Beispielen wird ja richtig gezeigt, wo es dämlich wäre, sie zu verwenden. Aber wo ist jetzt eigentlich das Problem?

xwolfde commented 7 years ago

Ich denke, den Fall kann man schließen.

ghost commented 7 years ago

Ich habe den letzten Kommentar nicht mitbekommen, pardon. Aber da meine Kritik am fehlenden Weißraum wohl keine Mehrheit findet... dann halt schließen.

ghost commented 7 years ago

Vorschlag für eine weitere Klasse: Link zu einer Karte (karte.fau.de oder OSM oder whatever). Falls man eine Karte nicht embedded anlegt, sondern ein Link reichen muss.

Beispiel: unbenannt

Icon-Vorschlag: http://fontawesome.io/icon/map-marker/

Alternativ, aber nicht so schön: http://fontawesome.io/icon/map-o/

RRZE-Webteam / FAU-Einrichtungen

Absatzklasse "Tipp" #100