Šipky pro externí odkazy na Abc

23.6.2009 11:17 | Přečteno: 2629× | Abc | poslední úprava: 23.6.2009 11:16

AbcLinuxu.cz je asi poslední web, který konečně zavedl vizuální odlišení odkazů, které vedou pryč z portálu. Plánoval jsem to už dlouho, ale nakonec jsem stejně musel sklonit hlavu před realitou a nasadit ošklivé řešení...

Původně (to už je dost dávno) jsem chtěl předejít nepružným ikonkám a nasadit elegantní řešení pomocí nějakého hezkého unicodového znaku a pseudo-elementu :after. Vybral jsem pěknou šipku (↗, north east arrow, U+2197). Hlavním důvodem bylo, že jsem chtěl, aby byl ten znáček škálovatelný podle velikosti písma odkazu (a také to, že mám rád čistá řešení a nemám rád HTML/CSS suplované milionem pidigifů). Má to dvě chybky:

• Obsah generovaný pomocí :after přebírá vlastnosti elementu, ke kterému je připojen, takže se v případě podtrženého odkazu (a takových je na Abíčku většina) šipka zobrazuje podtržená. Ošklivé, matoucí. Nezjistil jsem, jak tomu zabránit. Šipku (nebo jakýkoliv jiný obsah v :after) lze nastylovat (velikost, barva, odsazení atp.), ale není možné se zbavit toho podtržení.
• Většina prohlížečů má nastavenou minimální velikost písma, takže v místech, kde stránka používá menší písmo, není možné vynutit opravdu malou šipku (např. v levém sloupci ve zprávičkách).

Třetí problém byl, že Konqueror ještě před nějakou dobou odmítal tento znak zobrazovat, ačkoliv ho použitý font obsahoval. Netuším, proč to nešlo, ale Konqueror v KDE 4 už to umí.

Vzhledem k popsaným potížím jsem tedy musel sáhnout po ikonce. A co hůř, musel jsem použít obezličku s nastavením background-image pro příslušné odkazy, protože i ikonka by byla podtržená, kdyby byla vložena pomocí :after.

Ikonek existují spousty, přičemž většina webů používá nějakou variaci na tu „wikipediáckou“, která mi připadá příliš veliká. Vytvořil jsem tedy vlastní, drobnou (). Ve skutečnosti jsou tři: pro světlý styl, pro tmavý styl a pro :hover (ta je černá a pro oba styly stejná).

Správně bych měl dát všechny varianty do jediného obrázku a posouvat na správný stav pomocí CSS, aby se předešlo zdržení kvůli načítání nového obrázku při najetí na odkaz, ale připadá mi to zbytečné, když mají soubory s obrázky kolem 50 bajtů.

Doufám, že jsem ikonku nenacpal i někam, kde by být neměla. Pokud se šipka zobrazuje někde, kam nepatří, napište prosím do diskuse.

---

Kromě toho jsem sjednotil zobrazování hvězdičky značící nové komentáře v diskusi (dříve byla někde součástí odkazu, někde ne atp.) a nahradil obyčejný asterisk za low asterisk (∗) ve výpisu poraden, protože tam vypadá lépe.

       

Komentáře

[R]

Mne tu sipku Konqueror 3.5.10 normalne zobrazuje, aj som ju sem skopiroval: ↗

[Robert Krátký]

Zapomněl jsem napsat, že se to týkalo pouze zobrazení pomocí :after.

[Filip Jirsák]

Jak jsi ji zadával do CSS? Mohl to být problém s kódováním znaků…

[Robert Krátký]

\2197 (nevím o jiném způsobu, jak to do CSS vložit; a nový Konqueror tohle akceptuje bez potíží, starý zobrazil čtvereček).

[Andrej Herceg]

Skúšal som Konqueror 3.4.2 a tam \2197 funguje len v prípade, že je použitý vhodný font. Potrebný znak obsahuje napr. Lucida, FreeMono, FreeSerif ale nie napr. Arial, Tahoma. Takže je možné, že nie je problém s tým CSS kódom, ale s tým, že nové KDE iným spôsobom nahradzuje znaky, ktoré sa nevyskytujú v niektorom fonte.

[Filip Jirsák]

Žádný spolehlivější způsob, jak do CSS vložit „exotické“ znaky neznám. Jinak to chování :after je správné, ten obsah je vložen jakoby dovnitř elementu, u kterého je pseudoelement :after uveden. To podtržení by se muselo řešit tak, že by se do všech <a> dal <span> a teprve tomu by se nastavilo podtržení textu (nebo naopak všechny <a> <span>em obalit a :after nastavit u něj). Bohužel princip, že HTML bude vyjadřovat jen obsah a pomocí CSS se řekne, jak se má ten obsah zobrazit, je stále v nedohlednu, a s vývojem CSS to nevypadá, že by to v nejbližší době mohlo opravdu takhle fungovat.

[trekker.dk]

Vzhledem k tomu, že mimo portál vede většina odkazů, přijde mi to trochu zbytečné (+ vypadá to ošklivě a že odkaz vede mimo portál vidím ve stavovém řádku)

[Robert Krátký]

Většina podle mě mimo nevede. Že ti to připadá ošklivé, to mě mrzí. Časem možná přibude možnost to vypnout v profilu. Se stavovým řádkem máš pravdu, ale to musíš na konkrétní odkaz najet.

[trekker.dk]

Tak jasně, když se započítají všechny odkazy na profily, odkazy na blogy, odkazy "Odpovědět", vstupy do diskuzí atd., tak většina vede sem, to ano.

Nicméně pokud si tyhle odmyslím (protože u těch je beztak jasné, že nevedou mimo), tak už to tak jasné není. Aktuálně například ve zprávičkách 15 ven, 4 ne. Aktuální JN 31 ven, 28 místních (a tady je spousta odkazů na kdo-je), předchozí JN 24:7

Podle mě jsou šipky zbytečné a to nejenom tady. Když mě odkaz zajímá, tak na něj najedu a kliknu. Když mě nezajímá, tak ne. A je mi přitom jedno, jestli vede mimo portál nebo ne.

[Michal Kubeček]

S tím posledním odstavcem souhlasím, ale IMHO to naprosto názorně ilustruje propastný rozdíl mezi pohledem uživatele a provozovatele webu. Uživateli je úplně jedno, jestli jde o odkaz v rámci webu nebo mimo něj a nevidí tudíž žádný důvod, proč mezi těmito dvěma typy odkazů rozlišovat. Pro (některé) provozovatele webu je ale jakýkoli odkaz mimo web potenciální riziko, že uživatel na něj klikne a "odejde a už se nevrátí". Budiž provozovatelům ABCLinuxu ke cti, že přistoupili pouze ke zbytečným a jen velmi mírně otravným šipkám místo poměrně běžné praxe automaticky otevírat veškeré odkazy mimo vlastní web v samostatných oknech.

[Filip Jirsák]

Pro mne má smysl označení externích odkazů i jako pro uživatele. Odkazy vedoucí „ven“ se přeci jen zabývám o trochu víc, aby na mne třeba nevybaflo nějaké flashové video apod. Z toho důvodu taky nemám rád různé služby na zkracování URL, protože pak se nedozvím, kam vlastně odkaz vede (a moji ochotu na odkaz kliknout to opravdu snižuje). Na Abíčku to asi bude mít i opačný efekt, až se zase ve zprávičce jako odkaz pod názvem programu objeví odkaz do slovníku nebo softwaru na Abíčku, uvidím na první pohled, že to není externí odkaz a že je (bohužel) zbytečné na ten odkaz klikat.

[Michal Kubeček]

Z toho důvodu taky nemám rád různé služby na zkracování URL, protože pak se nedozvím, kam vlastně odkaz vede (a moji ochotu na odkaz kliknout to opravdu snižuje).

Čímž ovšem říkáte, že se tak jako tak díváte i na URL odkazovaného dokumentu. Pak je ale šipka zbytečná.

Na Abíčku to asi bude mít i opačný efekt, až se zase ve zprávičce jako odkaz pod názvem programu objeví odkaz do slovníku nebo softwaru na Abíčku, uvidím na první pohled, že to není externí odkaz a že je (bohužel) zbytečné na ten odkaz klikat.

Tady je ovšem problém podle mne spíš v tom, že se někteří autoři chovají, jako by byli placeni podle počtu odkazů, a bezhlavě linkují jednotlivá slova nebo sousloví bez ohledu na to, jestli to má nějaký smysl.

[Filip Jirsák]

Čímž ovšem říkáte, že se tak jako tak díváte i na URL odkazovaného dokumentu. Pak je ale šipka zbytečná.

Není, protože u odkazů bez šipky se na URL dívat nemusím. Pokud tedy je někde poblíž nějaké URL se šipkou, nebo si pamatuju, že daný web šipky používá.

[petr_p]

Tady je ovšem problém podle mne spíš v tom, že se někteří autoři chovají, jako by byli placeni podle počtu odkazů, a bezhlavě linkují jednotlivá slova nebo sousloví bez ohledu na to, jestli to má nějaký smysl.

Moje zkušenost co by autora zpráviček je, že redakce tam vnitřní odkazy (do slovníku, seznamu programu) dopisuje z vlastní iniciativy.

[Robert Krátký]

IMHO to naprosto názorně ilustruje propastný rozdíl mezi pohledem uživatele a provozovatele webu. Uživateli je úplně jedno, jestli jde o odkaz v rámci webu nebo mimo něj a nevidí tudíž žádný důvod, proč mezi těmito dvěma typy odkazů rozlišovat. Pro (některé) provozovatele webu je ale jakýkoli odkaz mimo web potenciální riziko, že uživatel na něj klikne a "odejde a už se nevrátí".

To je samozřejmě pravda - chceme, aby návštěvníci strávili co nejvíce času na našem webu. A když už chtějí někam klikat, tak ať je to, pokud možno, v rámci našeho webu . Ale zároveň mohu ujistit, že kvůli tomu tu ty šipky nejsou. A ani to nevychází z rozdílného pohledu (uživatel vs provozovatel). Ačkoliv se snažím o tyto stránky starat, stále ještě jsem mnohem více uživatelem webu (obecně).

Tj. při přidávání nových funkcí na AbcLinuxu vycházím hlavně z toho, co se mi líbí jinde, nebo co mi jinde chybí. A ty šipky mám rád. Zvláště na zmiňované Wikipedii jsou IMHO velmi užitečné. A ze stejného důvodu mi vyhovují i tady.

místo poměrně běžné praxe automaticky otevírat veškeré odkazy mimo vlastní web v samostatných oknech.

To souvisí se zkušenostmi, které popisuji výše. Tuhle "vymoženost" (target="_blank") nesnáším (až na výjimečné, ryze praktické případy), takže na AbcLinuxu se neobjeví (dokud do toho budu moci kecat).

[Andrej Herceg]

Vypnúť sa to dá už teraz pomocou fragmentu CSS (ja som napr. pomocou neho vypol tie obrázky a pridal som si tam pomocou ::after ten znak šípky).

PS: Inak neviem, čo to má nejaký súvis, ale teraz sa mi pri tej prvej správičke (podpora OSS v Švajčiarsku) pred "více" zobrazuje šípka, aj keď bez nej by tam pravdepodobne ten link vidieť nebol.

[xxx]

Mam stejny nazor. Pripada mi to zbytecne.

[=^..^= AmigaPower®]

Ne, šipka je super! Jak funkčně, tak vizuálně. Když se tak letmo podívám po odkazech, předem vim co se může dlouho natahovat, protože je to mimo server...

[stativ]

Mně se to líbí…

[Václav HFechs Švirga]

Jo, přijde mi to decentní :).

[Martin Stiborský]

Hezky udělané, nijak to neruší. Díky.

[xsubway]

... celkově dávám pouze "uspokojivý" - viděl jsem už lepší šípky

[Robert Krátký]

Kde?

[xsubway]

Příloha:

• out.png (236 bytů)

tak třeba tady je nějaký ten šípek a nebo v příloze ... dokonce i ta wikipedijácká mi nepříjde špatná ... jj, bude to o zvyku

[Robert Krátký]

No, to je ono - tenhle způsob mi připadá zbytečně velký.

[CEST]

Problem s obrazkama je, ze jsou delane pro nejake to "bezne" rozliseni. Bohuzel mam na pracovnim 24" monitoru nejakych bodne, takze jsem musel opravdu hodne ostrit, abych se vsimnul detailu a rozpoznal tak pidi-sipku, misto puvodni carky. Na sedivejsim podkladu v linksu to trosku splyva a vypada jako carka, na bilem pozadi ve FF se to rozpoznat da. Osobne jsem ale spis pro textove znazorneni (kdyz uz to musi byt), ale kdyz me nejakej odkaz zajima, tak na nej kliknu, at je na abclinuxu nebo nekde mimo.

[Michal Kubeček]

AbcLinuxu.cz je asi poslední web, který konečně zavedl vizuální odlišení odkazů, které vedou pryč z portálu.

Marně se snažím přijít na nějaký výklad této věty, se kterým bych mohl souhlasit.

[David Ježek]

upřímně, já to také běžně nevídám.

[l4m4]

Souhlasit bych s tím snad byl ochoten, kdyby to znamenalo, že ABC Linuxu je skutečně poslední web, který kdy tuto pitotmost zavedl.

[Michal Kubeček]

Což je ale dost nepravděpodobné. Na druhou stranu, je to asi pořád blíž realitě než výklad "skoro všechny weby už to mají, ABCLinuxu byl jeden z podledních, který ještě ne".

[Robert Krátký]

Ale tak to bylo (s trochou nadsázky) myšleno.

[Michal Kubeček]

Uff. I když uznávám, že pečlivým výběrem "reprezentativního" vzorku by se takového výsledku asi dalo docílit, ale asi by to dalo dost práce.

[Robert Krátký]

Naopak, je to velmi snadné. Má to přeci root i linuxexpres... nebo jsem se snad měl dívat i někam jinam?

[Jiří Poláček]

Možná by ta šipečka nemusela být v levém sloupci vedle reklamního proužku a u odkazů „Doporučujeme“ a „Placené odkazy“.

Taktéž se zobrazí po najetí na odkazy Sun a Stickfish v patičce stránky.

[Jan Drábek]

Už chápu co jsou ti titěrné podivnosti přilepeny u těch odkazů

[alkdhflahwefl]

Nikde ziadne sipky nevidim. Skusal som to v 2 prehliadacoch, aj som sa odhlasil. Hodte sem niekto screenshot nech viem co mam hladat.

[Andrej Herceg]

Zobrazuje sa to pri externých linkoch, napr. pri tej prev správičke za textom "Více na LinuxWorld."

[Michal Kubeček]

Příloha:

• sipka.png (3744 bytů)

V příloze je příklad. I když zrovna v tomto případě je ta šipka zrovna dost matoucí.

[DjAARA]

Chvíli jsem přemýšlel jak se těch šipek zbavit, strašně mi znepříjemňovaly čtení, nakonec jsem to vzal přes stylish rozšíření FF.

.obal a[href^="http://"],
.obal a[href^="https://"],
.obal a[href^="ftp://"] {
	background-image: none !important;
        padding-right: 0px !important;
}
.obal a[href^="http://"]:hover,
.obal a[href^="https://"]:hover,
.obal a[href^="ftp://"]:hover {
	background-image: none !important;
        padding-right: 0px !important;
}

[Andrej Herceg]

V nastaveniach profilu si môžeš vložiť aj fragment css kódu (takže nie je potrebné žiadne rozšírenie).

[06078]

Raději bych viděl něco ve stylu root.cz. Zobrazovat jen obrys šipky. Ale jinak změnu vítám. BTW, při najetí na odkaz mi u šipky zmizí její horní část (ta stříška nebo jak to nazvat). U tmavého stylu na tmavém pozadí (u podbarvených odkazů je ta stříška černá, proto není vidět na tmavém pozadí).

[06078]

Teď mi došlo, že to mám asi upravený ve svém stylu . Omluva

[Josef Kufner]

Btw, dalo by se to vyhodit z patiček? Jinak se mi líbí

Možná by nemuselo být od věci tu šipku dávat jen dovnitř <p>… odpadly by tím ty drobnosti jako reklamy, zápatí stránky a takové všelijaké blbosti.

[Robert Krátký]

V patičkách to původně nebylo, ale pak jsem si všiml několika, které mají odkaz na abc, tak jsem to tam dal. To omezení na P by asi bylo zrádné, protože nikdo neví, kde všude se to na stránkách používá. Raději to explicitně vypnu tam, kam to nepatří.

[Josef Kufner]

Ono zas jinde než v P je jasné z kontextu, kam to vede.

[kralyk z abclinuxu]

Příloha:

• bug.png (7774 bytů)

Hm, hezké, ale asi bych taky byl pro vyhodit to z patiček. Stejně se tak nějak počítá s tím, že odkazy v patičkách vedou do pryč...

Btw. co se kromě šipek mrknout ještě na můj oblíbený bug (viz také příloha...)

[M. Lox]

A už mám bug ohledně šipky – bugzilla.abclinuxu.cz IMHO není odkaz na cizí server, přesto u něj ten znak je.

[petr_p]

Jo jo. Ta šipka je kontraproduktivní. Nejprve by se mělo zadefinovat, co má označovat.

Řekl bych, že značka má smysl jen pro lidi, co si neumí přečíst URL. Na tomto serveru to je tedy opravdu zbytečná ozdoba.

[M. Lox]

Nejprve by se mělo zadefinovat, co má označovat.

Tak už je to WONTFIX, čímž je definice jasná. Ábíčko je pouze ta část začínající na WWW.

[Robert Krátký]

Btw. co se kromě šipek mrknout ještě na můj oblíbený bug (viz také příloha...)

Mrknu.

[M. Lox]

GIF? Nebyla by milionkrát vhodnější SVG?

[Ladicek]

To by taky mělo 50 bajtů?

[M. Lox]

Asi ne, ale dalo by se to škálovat, což za těch několik bajtů navíc stojí.

[Robert Krátký]

Vyzkouším.

[Filip Jirsák]

Přílohy:

• sipka.svg (283 bytů)
• sipka.svg.gz (230 bytů)

230 bajtů. Šlo by to ještě srazit asi pod 200, ale na 56 ne…

[Filip Jirsák]

Bylo. Ale už zvládnou běžně používané prohlížeče alespoň statické SVG bez filtrů?

[M. Lox]

Opera, KHTML, Webkit i Gecko ano. Proč by neměly?

[petr_p]

Gecko neumí SVG v CSS.

[M. Lox]

Fakt? Ale SVG jinak zobrazit umí… To je ale πčovina.

[Filip Jirsák]

Já jsem ale nepsal o tom, že když prohlížeči předhodím SVG, něco se na stránce zobrazí – psal jsem, zda se zobrazí to, co je v tom SVG. A moje zkušenosti jsou bohužel takové, že mám vždy nějaké jednoduché SVG, usoudím, že tohle už dneska přece musí umět zobrazit každý, zkusím to otevřít v nějakém prohlížeči – a zobrazí se mi toho půlka. Tak to jdu konfrontovat s dokumentací, a zjistím, že opravdu tenhle element neumí, tenhle atribut taky ne, tenhle způsob rovněž…

[M. Lox]

Já SVG obrázky v prohlížečích otevírám běžně a až na animace a interaktivitu mi vždy fungovalo vše. Mám, pravda, Operu, která je v tomhle, co jsem tak zaslechl, nejdál, včetně animací a podobných vlastností.

[Filip Jirsák]

Mám, pravda, Operu

No jo, to se pak nemůžete zapojovat do diskusí o tom, jaké standardy ještě chybí implementovat v internetových prohlížečích…

[M. Lox]

[azurIt]

Příloha:

• chyba.png (20605 bytů)

Ak to tu nahodou este nebolo, tak posielam jednu chybu ohladom sipky.

[Andrej Herceg]

Aspoň na niečo tie šípky boli dobré (pomohli odhaliť prázdny a tag v skrátených správičkách). :)

[Robert Krátký]

Dal jsem to do bugzilly.

[default]

Skvěle! Moc se mi to líbí. Překvapilo mě, že to někdo může udělat vkusně. Ostatní řešení (třeba na té zmíněné Wikipedii) jsou zpravidla humpolácká.

Kromě toho jsem sjednotil zobrazování hvězdičky značící nové komentáře v diskusi (dříve byla někde součástí odkazu, někde ne atp.) a nahradil obyčejný asterisk za low asterisk (∗) ve výpisu poraden, protože tam vypadá lépe.

Tak proto se mi na mobilu přestaly hvězdičky zobrazovat. Teď mám místo toho paznak. Ale je viditelný, takže pohoda.

[Robert Krátký]

Aha... no, možná bychom měli konečně připravit speciální verzi pro mobily.

[default]

Nevadí. Na funkci to vliv nemá. Je to jen vizuální nedostatek.

Ale: jestli mě paměť nešálí, v minulosti existovalo něco pro PDA, ne? Nebo to bylo jen pro zprávičky? Už si to nepamatuji…

[Robert Krátký]

pda.abclinuxu.cz stále běží, ale není to žádná sláva - proto říkám, že by to chtělo udělat pořádně.

[J. M.]

Mě stejně nejvíc zaujala ta „hlavička“ tohoto blogpostu: (vytvořeno:) včera 11:17, poslední úprava: včera 11:16.