Semantisch verantwoord smilies weergeven. - Softwareontwikkeling

zaterdag 14 mei 2005 16:18

Acties:

Topicstarter

De laatste tijd ben ik bezig met het tunen van m'n weblog zodat deze zo verantwoord mogelijk is met betrekking tot standaarden en dergelijke. Laatst merkte een studiegenoot van me op dat hij het vervelend vond als er in rss-feeds smilies staan omdat ze de line-height verneuken.

Dit heeft me wel aan het denken gezet. Immers, een smiley is in beginsel gewoon tekst die je vervolgens opleukt door er een plaatje van te maken. Formeel gezien zou de smileycode zelf tot de markup behoren waarbij het plaatje onderdeel van de opmaak is; iets dat je met css zou moeten regelen. Wat ik dus wil is een nette methode om smilies weer te geven terwijl dit wel in tekstbrowsers blijft werken. Wat ik tot nu toe bedacht heb is dit:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>blaat</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
</head>
<body>
<div>
Bladie<span style="background: url('http://www.tjaard.nl/wp-images/smilies/msn_wink.gif') no-repeat top center; height: 100px; width: 100px;"><span style="opacity: 0;">;-)</span></span>bla
</div>
</body>
</html>

Ik loop er een beetje tegenaan dat het erg lastig blijkt tekst onzichtbaar te maken zonder dat het inline element waar hij in staat meeverdwijnt. Of span-in-span zo semantisch verantwoord is vraag ik me af (wel nodig omdat de tekst anders niet onzichtbaar te krijgen is), verder is het wel jammer dat opera geen opacity ondersteunt en konqueror (en dus ws safari) ook niet. In firefox en lynx gaat het perfect.

Imho is dit wel de meest correcte benadering voor smilies (met copypasten gaan de codes ook mee!) die ervoor zorgt dat je markup en styling volledig kunt scheiden. Wat vinden jullie? En hebben jullie nog ideeën om dit concept te verbeteren?

[ Voor 8% gewijzigd door Bananenplant op 14-05-2005 16:21 ]

❤️‍🩹 Bezuinigen op armen en zieken 🤕 ? Welnee, Zucmantaks, nu 💰 !

zaterdag 14 mei 2005 16:22

Acties:

Verwijderd

code:

1	[img]"smiley.gif"[/img]

Daar is niet veel mis mee. De smiley is deel van de inhoud, het mag een plaatje zijn, en in een textbrowser wordt waarschijnlijk de alt tekst weergegeven.

zaterdag 14 mei 2005 16:26

Acties:

Bananenplant

Topicstarter

Wat er wel mis mee is is dat het erg raar gaat staan als iemand bijvoorbeeld een andere tekstgrootte gebruikt. Of als ie liever smilies in een ander kleurtje wil. Het is niet erg flexibel en je dwingt mensen op een bepaalde manier.

❤️‍🩹 Bezuinigen op armen en zieken 🤕 ? Welnee, Zucmantaks, nu 💰 !

zaterdag 14 mei 2005 16:27

Acties:

simon

Die oplossing die jij nu aandraagt vind ik ranzig. Je misbruikt nu een element. Dat is semantisch incorrecter dan een alt tekst.

zaterdag 14 mei 2005 16:39

Acties:

Larixk

met xk, ja

kan je niet tegen dat probleem van andere tekstgrootten de smilie img een height en width meegeven van 1em?

larixk

zaterdag 14 mei 2005 17:03

Acties:

Verwijderd

niks mis met een plaatje imho, <h1>[img]"welkom.gif"[/img]</h1> als header met een speciaal lettertype is toch ook gewoon ok.

de bedoeling van css is niet om alle plaatjes naar css te verbannen. Een smiley is zoals Cheatah zegt gewoon onderdeel van de content en hoort dus in de HTML

zaterdag 14 mei 2005 17:56

Acties:

faabman

Verwijderd schreef op zaterdag 14 mei 2005 @ 17:03:
niks mis met een plaatje imho, <h1>[img]"welkom.gif"[/img]</h1> als header met een speciaal lettertype is toch ook gewoon ok.

Vanuit SEO oogpunt kun je daar beter neerzetten <h1><em>Welkom</em></h1> en dan met css de EM een display:none meegeven en een plaatje achter de h1 hangen. Zoekmachines schijnen minder waarde aan alt te geven omdat die nogal eens misbruikt werd om zoekwoorden mee te spammen.

Qua structuur/bruikbaarheid vind ik het sowieso netter om voor een puur tekstuele oplossing te gaan, wanneer ik een pagina kopieer naar Word (of een andere tekstverwerker) dan wil ik alleen die afbeelding terug krijgen die bij de content horen, en geen opmaakgerelateerde afbeelding...

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

zaterdag 14 mei 2005 18:06

Acties:

Blaise

Vanuit SEO oogpunt kun je daar beter neerzetten <h1><em>Welkom</em></h1> en dan met css de EM een display:none meegeven en een plaatje achter de h1 hangen

Of gewoon <h1>Welkom</h1> met CSS: text-indent:-9999px. Werkt in elke fatsoenlijke browser.

zaterdag 14 mei 2005 21:57

Acties:

Verwijderd

Of zo?

code:

1	<h1><span>Welkom</span></h1>

code:

1	h1 span { display: none; }

zaterdag 14 mei 2005 23:29

Acties:

Bananenplant

Topicstarter

Simon schreef op zaterdag 14 mei 2005 @ 16:27:
Die oplossing die jij nu aandraagt vind ik ranzig. Je misbruikt nu een element. Dat is semantisch incorrecter dan een alt tekst.

Als je nou een enkele <span class="smiley"> zo weet te stylen dat de tekst onzichtbaar is en de smiley als achtergrondplaatje, wat is er dan misbruik aan? Een span is toch om speciale secties tekst aan te geven?

❤️‍🩹 Bezuinigen op armen en zieken 🤕 ? Welnee, Zucmantaks, nu 💰 !

zaterdag 14 mei 2005 23:42

Acties:

faabman

ucchan schreef op zaterdag 14 mei 2005 @ 23:29:
[...]

Als je nou een enkele <span class="smiley"> zo weet te stylen dat de tekst onzichtbaar is en de smiley als achtergrondplaatje, wat is er dan misbruik aan? Een span is toch om speciale secties tekst aan te geven?

Een span een is een tag zonder semantische waarde. Daardoor leent het zich imo perfect voor het oplossen van dit probleem. Wanneer je van één span uitgaat en clientside via javascript / DOM een extra span toevoegd voor die browsers waarin je niet via font-size:0 de tekst wegkrijgt. Dan heb je naar mijn idee een hele schone oplossing. Je kunt dan gelijk met een andere stylesheet je smilies aanpassen, iets wat niet gaat wanneer je <img /> gebruikt

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

zaterdag 14 mei 2005 23:43

Acties:

SillyJW

der Gemutlichkeit

Ik vind eigenlijk wel dat je een punt hebt. Je geeft met semantiek toch de waarde aan van een inhoud in zijn context. Een <img> is in dit geval semantisch gezien niet een <img> maar een stukje gestylde tekst met een bepaald accent op de betekenis van dat woord. Net als een <h1> die wordt vervangen voor een tekst in een <img>.

[edit]
Ik wilde eerst een topic openen 'Semantisch verantwoord adressen weergeven', maar misschien hoort het ook wel in dit topic thuis.. Wat doen jullie met adressen?

HTML:

<ul>
    <li>Tweakers.net B.V.</li>
    <li>Postbus 2171</li>
    <li>3800 CD Amersfoort</li>
</ul>

HTML:

<p>
    Tweakers.net B.V.<br>
    Postbus 2171<br>
    3800 CD Amersfoort<br>
</p>

of misschien

HTML:

<dl>
    <dt>naam</dt><dd>Tweakers.net B.V.</dd>
    <dt>adres</dt> <dd>Postbus 2171</dd>
     <dt>pcplaats</dt><dd>3800 CD Amersfoort</dd>
</dl>

gestyled als

Cascading Stylesheet:

1
2
3

dt { 
    display: none; 
}

[ Voor 52% gewijzigd door SillyJW op 15-05-2005 00:01 ]

zondag 15 mei 2005 00:05

Acties:

blizt

Wannabe-geek

Of <address /> gebruiken? ;-)

Blaise schreef op zaterdag 14 mei 2005 @ 18:06:
[...]

Of gewoon <h1>Welkom</h1> met CSS: text-indent:-9999px. Werkt in elke fatsoenlijke browser.

Nadeel is wel, dat als iemand images disabled heeft (en toen ik veel problemen had met Versatel, deed ik dat) helemaal niets ziet. Tenzij CSS ook uitgeschakeld is.

United we stand, and divided we fall

zondag 15 mei 2005 00:15

Acties:

BetuweKees

Flipje uit Tiel

Verwijderd schreef op zaterdag 14 mei 2005 @ 16:22:
code:
1
[img]"smiley.gif"[/img]

moet dat niet gewoon alt="lacht" zijn? denk bv aan de speechbrowser die dit uit moet spreken; dubbele-punt-haakje-sluiten wordt je ook niet echt veel wijzer van naar mijn idee namelijk..

Through meditation I program my heart to beat breakbeats and hum basslines on exhalation -Blackalicious || *BetuweKees was AFK; op de fiets richting China en verder

zondag 15 mei 2005 00:34

Acties:

SillyJW

der Gemutlichkeit

blizt schreef op zondag 15 mei 2005 @ 00:05:
Of <address /> gebruiken? ;-)
[...]

Mjah.. die <p> kun je idd voor <address> vervangen.
Maar dan moet je ook met <br>-tjes werken voor de enters.

[ Voor 11% gewijzigd door SillyJW op 15-05-2005 00:35 ]

zondag 15 mei 2005 00:35

Acties:

blizt

Wannabe-geek

Mja, dat wel. Is dan ook het enige op mijn site waar je <br>'tjes vindt.
Maar ja, <address /> is hier nu éénmaal voor gemaakt...

United we stand, and divided we fall

zondag 15 mei 2005 00:45

Acties:

We Are Borg

Moderator Wonen & Mobiliteit / General Chat

SillyJW schreef op zondag 15 mei 2005 @ 00:34:
[...]

Mjah.. die <p> kun je idd voor <address> vervangen.
Maar dan moet je ook met <br>-tjes werken voor de enters.

is toch geen ramp

? Ik gebruik ook address

zondag 15 mei 2005 00:49

Acties:

crisp

Devver

Pixelated

Blaise schreef op zaterdag 14 mei 2005 @ 18:06:
[...]

Of gewoon <h1>Welkom</h1> met CSS: text-indent:-9999px. Werkt in elke fatsoenlijke browser.

Helaas worden er ook nog onfatsoenlijke browsers gebruikt

Plus dat bij bijvoorbeeld find-as-you-type in firefox toch stiekum de tekst naar voren komt, evenals bij mousedown en slepen; dan scrolled de tekst ineens ook in beeld.
In eerste instantie gebruikte ik deze methode ook hier op GoT, maar door de genoemde issues ben ik overgestapt op een extra span met display:none in CSS.

Intentionally left blank

zondag 15 mei 2005 11:10

Acties:

SillyJW

der Gemutlichkeit

We Are Borg schreef op zondag 15 mei 2005 @ 00:45:
is toch geen ramp ? Ik gebruik ook address

Je gebruikt met de <br> toch weer markup voor layout doeleinden. Een ramp is het niet, maar een <img> tussen je tekst om een smilie aan te duiden is ook geen ramp.

zondag 15 mei 2005 12:11

Acties:

Verwijderd

blizt schreef op zondag 15 mei 2005 @ 00:35:
Mja, dat wel. Is dan ook het enige op mijn site waar je <br>'tjes vindt.
Maar ja, <address /> is hier nu éénmaal voor gemaakt...

hohoho. <address> is niet gemaakt om adressen weer te geven, dus die is hier zeker niet van toepassing, een <p> met <br>'s is hier imho de enige juiste oplossing.

zondag 15 mei 2005 12:13

Acties:

blizt

Wannabe-geek

quote: http://www.w3.org/TR/1999.../global.html#edef-ADDRESS
The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.

Nu, een adres lijkt me in dit geval toch wel contactinformatie, niet?

United we stand, and divided we fall

zondag 15 mei 2005 12:25

Acties:

Verwijderd

lees ook de rest van de zin, het gaat om contact informatie van de auteur(s) van een significant onderdeel van de content (bij commentaar ga je dus ook de auteir niet in address wrappen)

zondag 15 mei 2005 12:27

Acties:

Verwijderd

Er zijn een paar opties. Je kunt het zien als ASCII art en CODE gebruiken. Je zou ook ABBR kunnen gebruiken als in:

code:

1	<abbr title="lacht">:-)</abbr>

... persoonlijk vind ik de oplossing met ABBR mooier, maar er zijn alternatieven. IMG gebruiken kan uiteraard ook, maar neemt wel de mogelijkheden weg tot styling e.d. totdat er wat dingen van CSS3 ondersteunt gaan worden.

zondag 15 mei 2005 12:29

Acties:

blizt

Wannabe-geek

Voorbeeld: jij hebt een website voor je bedrijf; een éénmanszaak. Waarschijnlijk heb je alle content zelf gedaan, daar gaan we in ieder geval even van uit.
Als je dan bij contactinformatie je adres wilt plaatsen, is <address /> daar toch prima voor geschikt? Of begrijp ik het nu verkeerd?

United we stand, and divided we fall

zondag 15 mei 2005 12:29

Acties:

Verwijderd

Je gebruikt met de <br> toch weer markup voor layout doeleinden. Een ramp is het niet, maar een <img> tussen je tekst om een smilie aan te duiden is ook geen ramp.

Fout. Dit is een van de weinige plaatsen waar je BR echt correct kunt gebruiken (naast gedichten). Een adres hoort op een bepaalde manier gestructureerd te zijn. Die structuur kun je met P en BR of ADDRESS en BR, mocht het contactinformatie voor de betreffende pagina zijn, prima weergeven.

zondag 15 mei 2005 12:32

Acties:

Verwijderd

In eerste instantie gebruikte ik deze methode ook hier op GoT, maar door de genoemde issues ben ik overgestapt op een extra span met display:none in CSS.

Wat helaas weer problemen geeft in screen readers, et cetera. 'content' is de oplossing, althans, in Opera. IMG is uiteraard ook correct — en heeft overigens weinig invloed op zoekmachine's — maar heeft als nadeel dat het alle flexibiliteit weghaalt zoals hierboven genoemd. (Bij het stukje over smileys.)

zondag 15 mei 2005 12:48

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op zondag 15 mei 2005 @ 12:32:
[...]
Wat helaas weer problemen geeft in screen readers, et cetera. 'content' is de oplossing, althans, in Opera. IMG is uiteraard ook correct — en heeft overigens weinig invloed op zoekmachine's — maar heeft als nadeel dat het alle flexibiliteit weghaalt zoals hierboven genoemd. (Bij het stukje over smileys.)

Het is inderdaad niet de meest optimale oplossing, maar het goed functioneren in visuele browsers heeft uiteindelijk toch de hoogste prioriteit.

Intentionally left blank

zondag 15 mei 2005 12:57

Acties:

SillyJW

der Gemutlichkeit

Verwijderd schreef op zondag 15 mei 2005 @ 12:29:
[...]
Fout. Dit is een van de weinige plaatsen waar je BR echt correct kunt gebruiken (naast gedichten). Een adres hoort op een bepaalde manier gestructureerd te zijn. [..]

Het verschil tussen de twee onderstaande voorbeelden is toch alleen een layout technische?

code:

1	Tweakers.net B.V., Postbus 2171, 3800 CD Amersfoort

code:

1
2
3

Tweakers.net B.V.
Postbus 2171
3800 CD Amersfoort

zondag 15 mei 2005 13:17

Acties:

Verwijderd

blizt schreef op zondag 15 mei 2005 @ 12:29:
Voorbeeld: jij hebt een website voor je bedrijf; een éénmanszaak. Waarschijnlijk heb je alle content zelf gedaan, daar gaan we in ieder geval even van uit.
Als je dan bij contactinformatie je adres wilt plaatsen, is <address /> daar toch prima voor geschikt? Of begrijp ik het nu verkeerd?

dan is het ok ja, maar ga <address> dus niet gebruiken voor bijvoorbeeld een telefoonboekachtige constructie.

zondag 15 mei 2005 13:20

Acties:

blizt

Wannabe-geek

Ok, ik snap wat je bedoelt mophor. En daar heb je inderdaad gelijk in.

SillyJW: het eerste is gewoon fout, het tweede niet. Een menu bijvoorbeeld, is zowel verticaal als horizontaal goed.
Zoals Anne al zei, hetzelfde met een gedicht. Die newlines horen daar gewoon, het "moet" zeg maar... Beetje lastig uitleggen vind ik.

United we stand, and divided we fall

Pagina: 1

Reageer