Using HTML5 semantic elements today
Milyen trükkel lássunk hozzá a HTML5 új elemeinek használatához
■ 
Friss blogmarkok
- Web Akadálymentesítési Útmutató (WCAG) 2.1 – nyilvános munkaterv – Megjelent a WCAG (Web Akadálymentesítési Útmutató) 2.1 nyilvános munkaterv (0)
- MongoDB Apocalypse Is Here as Ransom Attacks Hit 10,000 Servers – Több tízezer védtelen MongoDB szerverre csaptak le hackerek (2)
- 12 Signs You’re Working in a Feature Factory – A cél nélküli funkciógyártás néhány tünete (0)
- Translatable, custom dates in Twig templates of Drupal 8 – Saját dátumok megjelenítése, fordíthatóan a Drupal 8 smink rétegével dolgozva (0)
- NativeScript – Cross-Platform Native Development with Javascript – Fejlesszünk natív mobilalkalmazást JavaScripttel (0)
- GitHub Security Update: Reused password attack – Érdemes bekapcsolni a kétfaktoros azonosítást, ha a GitHub jelszavunkat más oldalakon is újra felhasználtuk (17)
- UX Design könyv – Hogyan tervezz felhasználóbarát és szerethető alkalmazásokat? (0)
- Introducing unlimited private repositories – Megváltozik a GitHub díjszabása: minden előfizetéshez korlátlan számú privát repository jár (0)
- Drupal 8 Twig: add custom CSS classes to menus (based on menu name) – Saját elképzeléseink szerinti CSS osztályok (automatizált) hozzáadása a Drupal 8 menüihez (0)
Cikkajánló
Friss csiripek
Csiripek betöltése…
Aktív fórum témák
Új fórum témák
Archívum
| H | K | Sze | Cs | P | Szo | V |
|---|---|---|---|---|---|---|
| 30 | 31 | 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 | 1 | 2 |
Szerintem meglehetősen
Az egyedüli csoport, akik hasznát vehetik pár új tag-nek, a fogyatékkal élők, akik felolvasóprogramokon keresztül tudnak csak böngészni, számukra megkönnyítheti a navigációt, ha bizonyos oldalelemeket könnyebben meg tudnak találni, mint pl. a menüt, navigációs sávot (<nav>).
A többi új elem szerintem teljességgel fölösleges, és semmilyen pluszt nem nyújt. Az oldalon felhozott példa, a <section> elem használata erre tökéletes, mivel semmilyen további információt nem hordoz a benne lévő tartalom jelentésével kapcsolatban, ezért a <div class="section"> tökéletesen ekvivalens vele. További - általam fölöslegesnek vélt - hasonló elemek: article, aside, hgroup, header, footer, address, a szabvány text level semantics szekciójának túlnyomó többsége.
Kit érdekel, hogy <div id="header">-ben vagy <header>-ben van az oldalam fejléce? Senkit. Lényegtelen. Tegyük fel a kérdést: mire való az internet? A válasz: információátadásra. Könnyebben megtalálom azt, amit keresek, ha <article>-be pakolják a szöveget? Nem. Akkor mivel több a fentebb sorolt új elemek többsége, mint egy zaftos gumicsont? Elrágódik rajta a webfejlesztők többsége pár évig, évtizedig, és azt hiszi, hogy a W3C-nél azért dolgoznak, hogy szebb legyen a jövő.
Amit mintha nem látnának [a W3C-nél], hogy a webet nem csak szöveges dokumentumok megjelenítésére használjuk, hanem egyre többen alkalmazásplatformként tekintenek rá. A HTML 5-ben nincsen komolyabb lehetőség a megjelenített szövegek, adatok jelentésének megadására, a köztük lévő összefüggések felvázolására.
Pedig ez lenne a valódi szemantika, a jelentéstan, és emiatt lehet a címet félreérteni. Tegyük fel, hogy webszerkesztőként szeretnénk az általunk készített oldal tartalmát a lehető legpontosabban leírni, találkozik a "szemantikus web" kifejezéssel, és amikor rá szeretne keresni, hogy a HTML 5 hogyan támogatja ezt, nagy valószínűséggel a keresőszavak között szerepelni fog a HTML5 és a semantic szó, és meg fogja találni az ebben a blogmarkban ajánlott linket, pedig annak semmi köze ahhoz, ami őt érdekli.
Ez rámutat az internet egyik legnagyobb problémájára: jelenleg a keresők - a HTML nyelv hiányosságai, valamint amiatt, hogy az internet adattárolási nyelve a HTML - egy kb. nyolc hónapos csecsemő szintjén vannak. Szavakat keresnek.
Sokan azt mondják, hogy a szabványokat be kell tartani, és akkor jó lesz. Szerintem pedig kérdéseket kell feltenni: valóban ez kell nekem, erre van szükségem? Miért foglalkozzak olyannal, ami eleve rossz?
Kicsit hunyorítva, a HTML 4 elemkészletét megnézve mit látunk, mit tudunk csinálni? Tudunk szép címeket írni, paragrafusokat, képeket beszúrni, nem ismerős? Ezeket a trükköket anno a szerzetesek is ismerték és alkalmazták is a kódexekben. HTML 5? Article, header, footer? Újságokban látunk ilyeneket. Tehát bő ezer éves technológiával akarják kiszúrni a szemünket. Muszáj ennek így lennie?
Nem.
A fennálló helyzetért mi is felelősek vagyunk, mert hagyjuk, hogy ez történjen. Ami a legfontosabb, hogy mivel szabad világban élünk, ezen változtatni is lehet. És - szerintem - kell is.
A saját idealizált
Ezt a szamantikát tudják hasznosítani a böngészők, tudják hasznosítani a keresők, és a felolvasóprogramok is. A section a címek hatókörét jelöli ki, az article egy önálló, teljesjogú szöveget, a header, a footer és az aside napjaink weblapjainak tipikus tartozékait, és így tovább.
A keresők pedig messze nem egyszerűen szavakat keresnek, elég összetett algoritmusok dolgoznak a háttérben, éppcsak nem készen kapják a szemantikát, hanem maguk küzdenek meg érte, ennek oka pedig az, hogy a fejelsztők és felhasználók többsége még a HTML oly egyszerű szabályait sem hajlandó követni. Épp ez az, amiért a nagybetűs szemantikus web, amiért te is lelkesedsz, egyre inkább hamvába halt ötletnek tűnik. A jövő – úgy tűnik – a heurisztikáé.
Az írott szöveg „bő ezer éves technológiája” pedig köszöni szépen, nagyon jól elvan, és el is lesz még vagy ezer évig, mert nincs is szüksége többre. Üdvözletét küldi.
A web nem csak szöveges
A heurisztika és a szemantikus web nem zárja ki egymást, sőt. Ha mi, webszerkesztők annyival segítenénk a keresők munkáját, hogy megadjuk a megjelenített adatok és szövegek jelentését, sokkal jobb találatokat adhatnának.
A jelenlegi helyzetben ki vagyunk szolgáltatva az algoritmusaiknak, és nem egyszer fordult már elő, hogy visszaéltek a helyzetükkel.
Nem mondtam, hogy a
Látod, épp ott hibádzik a dolog, hogy már a HTML formájában sem megy a kersőknek való segítségnyújtás, vajon működőképes volna egy még akademikusabb technológia?
Egyébként pedig attól, hogy pusztán heurisztikán vagy metaadatokon alapul a keresők algoritmusa, még pont ugyanúgy ki leszünk nekik szolgáltatva.
HTML - hyperTEXT markup
Mint ez a blogmark is rámutat, pusztán egy szövegrész nem elégséges a tartalmának megértéséhez: a blogbejegyzés szerzője a HTML elemek szemantikájára gondolt, én meg a szemantikus webre. Innentől kezdve a keresők sem tudnak jó találatokat adni, mivel nem értik, nem érthetik, hogy mit akarok.
A HTML-ben minimális eszköztárunk van a megjelenített szövegek és adatok jelentésének megadására, és azokkal sem lehet jól definiált szövegblokkokat, adatokat megjelölni. Tehát hiába van <section> elemem, ha nem tudom megadni közvetlenül a hozzá tartozó címkéket.
Amíg nem lehet megadni az összefüggéseket, nem lesznek pontos találatok nagyon hosszú ideig. Ezen lehet és tudunk változtatni, ha elkezdjük megadni az adatok jelentését.
Jelen pillanatban azért vagyunk a nagy keresőknek kiszolgáltatva, mert nekik van egyedül pénzük fejleszteni (a heurisztikus eljárásaikat), ráadásul nincs is igazi verseny, van a Google és a Bing, a többiek jóval kisebbek vagy elhanyagolhatóak. A HTML "lazasága" miatt nehéz jó parsert írni, sokkal kötöttebb nyelvvel, mint pl. az XML ez jóval egyszerűbb.
Úgy gondolom, hogy ha nem szöveg, hanem adat alapú lenne a web, akkor kisebb cégek is jóval könnyebben tudnának saját, specializált keresőt készíteni, mert egyszerűbb lenne az azonos adatok összegyűjtése. Ettől valódi versenyhelyzet alakulhatna ki.
Az olvasást és a gondolkodást
Egy szabadszavas kereső sosem fog másképp működni, akár heurisztikára, akár metaadatokra építi az adatbázisát: értelmezni próbálja a beírt szöveget és értelmezni próbálja az indexelteket, majd a legnagyobb egyezést mutatóakat listázza. Ha a HTML5 és szemantika szavakra keresel, ő nem fog tudni gondolatot olvasni, kilistáz mindent, ami a két fogalom összefüggésében található az indexében.
Egyébként kíváncsi vagyok, hogyan képzeled el az adatalapú webet a gyakorlatban. Bekezdéseket akarsz felcímkézni? Senki nem fogja ezt csinálni. Ha a gépekkel igazán meg akarod értetni, amit közzéteszel, legalábbis egy absztrakt nyelvtanra kell lefordítsd, ez azonban csak automatizálva lehet a gyakorlatban végezni, és ezzel meg is érkeztünk a heurisztikához. Szövegelemzés, képfelismerés és a többi.
Azzal, hogy tiszta és egyszerű szabványok követése mentén nőne a verseny, egyetértek. Reményt nem látok rá a jelenlegi trendek fényében.
"Az olvasást és a
De, megspórolhatja. Ha értenék a szavakat a keresők, akkor felajánlhatják, hogy a HTML elemek szemantikájára keressenek, vagy a szemantikus webre, ha beírom azt, hogy "HTML 5 semantics". És ne belőlem indulj ki, hanem egy olyan felhasználóból, aki most ismerkedik a témával, számára nem egyértelmű, hogy az adott oldal tartalma mennyire releváns a számára.
"értelmezni próbálja a beírt szöveget és értelmezni próbálja az indexelteket" - pontosan, itt a probléma az indexeléssel van. De amíg nincs módunk nekünk, webszerkesztőknek az egyes blokkok jelentését legalább megközelítően leírni, ez az indexelés nem lesz pontos.
Az adatalapú webet úgy képzelem, hogy első körben kell készíteni egy nagy, nyílt adatbázist, amiben leírjuk a világ objektumait, valamint az azok közti összefüggéseket. Fontos a nyíltság, hogy minél kevesebb lehetősége legyen a profitalapú cégeknek a visszaélésre.
Következő körben pedig a webes fejlesztéseket kell úgy megtámogatni, hogy a kód készítése közben, amikor olyan objektumot teszünk bele, ami szerepel a fenti adatbázisban, akkor könnyen ki tudjuk választani a listából, és hozzá tudjuk rendelni a megfelelő adatokhoz.
Az utóbbi években az ügyfelek első kérdései között szerepel, hogy mennyire keresőbarát a kód, amit írok, külön iparág a keresőoptimalizáció. Mindenkinek az a célja, hogy a lehető legrelevánsabb oldalakat kapjam meg, amikor keresek, de jelen pillanatban az algoritmusok és a mesterséges intelligencia kifejlesztése teljes mértékben a keresőkre hárul.
A pontosabb metaadatok megadásával az ő munkájukat könnyítenénk meg, hogy megértsék, amire keresek, és minél pontosabb találatokat adjanak vissza. Erre már vannak most is kezdeményezések, lásd mikroformátumok, tehát az igény megvan, de még rengeteget kell dolgozni az ügyön, hogy megvalósuljon, valamint teljes szemléletváltásra van szükség.
Szerkesztok
Régebben valószínűleg engem
Mind az adatbázis karbantartása, mind a készülő tartalmak megjelölése kivitelezhetetlennek tetszik. Arról ne is beszéljünk, hogy a ma ismert címkézés előtt vagy egy évtizeddel már lehetőségünk volt a metainformációk megadására a legendák övezte meta keywords-ön keresztül. Alig néhány esztendőbe került csupán, hogy a keresők teljesen figyelmen kívül hagyják őket.
Az általad propagált vízió pont ugyanerre a sorsra van ítéltetve. A felhasználók vagy nem fogják címkézni a tartalmakat, vagy szándékosan fogják az érdekeiknek megfelelően félrecímkézni. A metakulcsszavak épp metavoltuk miatt vezettek zsákutcába: a szerző bármit írhatott oda, vagy épp semmit, a felhasználó ebből semmit nem érzékelt.
Értékes tapasztalat ez, amiből tanulni kell, és nem elkövetni ugyanazt a hibát nagyobb léptékben. A kereséshez azt az információt kell felhasználni, amit az emberi olvasó is használ, mert távlatában csak ezt fogják az emberek hozzáadni.
Webapp vs HTML dokumentum
Nem a kulonfele HTML-ek NEM azok, csak mert van Ajax meg JS.
De..
Üdv:
Gábor
Az első hozzászólásomban
- a HTML alapvetően szöveges dokumentumok leírónyelve, adatok jelentésének megadására korlátozott lehetőségünk van
- az interneten nem csak szöveges tartalmat osztunk meg, hanem adatokat is
- a szöveges tartalmi blokkok meta szavakkal való leírása is korlátozott
- a nyelvek és a nyelvtudás korlátai miatt, valamint akkor, ha nem tudjuk, pontosan mire keresünk, rengeteg fals találatot kapunk, mivel a keresők nem értik meg, mit akarunk
- strukturált adatokat keresni HTML-ből jelen pillanatban nagyon nehézkes
- a HTML-ben nem válik el az adat- és prezentációs réteg
Szerintem célszerű lenne egy olyan adattárolási formára áttérni, amiben adatokat osztunk meg, és azt, hogy azokat ki miként fogja megjeleníteni, rábízzuk a látogatóinkra. Ez a jelen eszközökkel legegyszerűbben az XML + XSLT komóval valósítható meg szerintem.
Ok,
Köszi, üdv:
Gábor
Nezzük nevén a gyereket
Amúgy viszonlag friss hír:
http://w3c.hu/archivum/2011/w3cnews.html#pid_20110302.hun_w3.org
Az RDF(a) leginkább arra jó,
<?xml-stylesheet type="text/xsl" href="weblap.xsl" ?>
<struktura xmlns="http://www.world-objects.org/blog">
<fejlec_adatok>
<felhasznalo nev="Hidvégi Gábor" openid="hidvegigaboropenid" />
</fejlec_adatok>
<blog>
<bejegyzes kulcsszavak="könyv, Alexander Dumas, Monte Cristo grófja">
<cim>Ez izgalmas olvasmány</cim>
<szoveg>Tegnap olvastam <könyv:cím="Monte Cristo grófja" />egy jó kalandkönyvet <könyv:író="Alexander Dumas">Alexander Dumas</könyv:író>-tól.</szoveg>
</bejegyzes>
</blog>
</struktura>
Az XML két részből áll:
1, struktúra (a <fejlec_adatok> a weboldal, azaz a humán olvasók miatt szükséges, a gépeket nem érdekli
2, adatok (<blog>/<bejegyjes>)
A struktúrának megadunk egy XML névteret, az általam már említett központi objektumleíró adatbázisból a "blog" bejegyzését.
A <bejegyzes>-nek adunk kulcsszavakat, ezek ugyancsak az objektumleíró adatbázisból táplálkoznak, azaz abban van könyv objektum, aminek vannak tulajdonságai, pl. cím, író (<könyv:cím>, <könyv:író>. Ezek megadása RDF segítségével is történhet.
A három kulcsszóval egyébként már pontosan meg lehet határozni, hogy mit olvastam, mert ez egyenként nem egyértelmű: a Monte Cristó grófjából készült film, és elképzelhetőnek tartom, hogy más is írt ilyen címmel könyvet vagy publikációt. Így viszont pontosan tudjuk, hogy mit is említettünk a bejegyzésben.
Valóban sok munkával jár egy dokumentumot ellátni metaadatokkal, de mit nyerünk vele:
- pontosabb találatokat
- olcsóbb lesz a keresés, mert nem a keresőcégeknek kell mesterséges intelligenciát fejleszteni, hogy megtalálják az adatok jelentését, hanem ez megtörténne a weboldal publikálásakor, s évekkel, évtizedekkel hamarabb készülhetnének el az új, intelligens keresők
- specifikusan kereshetnénk adatokat az interneten (a fenti példával élve: az összes olyan újságcikket, aminek a címében benne van a "Monte Cristó grófja" karakterlánc)
- a "nyers" adatok megosztásával lehetővé válna a szűrésük (pl. egy kattintással rákereshetnénk Magyarország összes könyvesboltjában a fenti műre, hogy mennyibe kerül)
- jóval könnyebben lehetne olyan szolgáltatásokat fejleszteni, amelyek több különböző helyről gyűjtenék össze az adatokat, és azok szűrésével és feldolgozásával egészen más módon jelenítenék meg azokat
Én nem mondom, hogy a szemantikus web bevezetése egyszerű és olcsó. Churchill után csak vért, verítéket és könnyeket tudok ígérni, mert a fejlesztők körében részleges vagy teljes szemléletváltást igényel. Viszont, ha szoftveresen megtámogatjuk a fejlesztést, és olyan egyszerűvé tesszük, mint a HTML készítését, akkor nyert ügyünk van.
A példa nem győzött meg.
Nekem mint webfejlesztőnek nem érdekem, hogy a Google olcsóbban tudjon dolgozni. Mint eladónak sem érdekem, hogy pusztán az ár alapján döntsenek a vásárlók.
Nekem is nagyon szimpatikus a gondolat, hogy az Interneten található szöveges információ 100%ban érthető legyen gépek számára, olyan módokon kutathassuk az emberiség összevont tudásanyagát, amiről ma álmodni sem merünk, csak egyszerűen nem látom az ehhez vezető utat. - Ha pedig arra várunk, hogy a szereplők belássák, hogy gazdasági áldozatokkal egy potenciális szebb jövőt teremthetnek, akkor van hely, ahol sokkal jobb helye lenne az anyagi jótékonyságuknak.
Pedig az általam adott
Most aztán törhetik a fejüket a mesterséges intelligencia fejlesztői, mire megfelelő heurisztikát írnak arra, melyik könyv a fenti mondat tárgya. Mert nem minden nyelv olyan egyszerű, mint az angol, és még abban is akadnak kacifántos megfogalmazások, ráadásul ott aztán tényleg elég hiányos a központozás.
A gond tehát a nyelvvel és az írással van, mert sok esetben nem lehet pontosan leírni azt, amit gondolunk. Emellett a HTML-ből hiányzik az az eszköz, amivel az egyes szövegrészek és/vagy adatok közti kapcsolatokat leírhatjuk. Emiatt heurisztikával folyószövegből kitalálni a jelentést rendkívül nehéz, vagy akár lehetetlen.
Létezik ma is olyan gép, ami műveltségi vetélkedőn legyőzheti az embert, csak van benne 3000 processzor és 13 terabájt memória. Lehet számolgatni Moor törvénye alapján, hányszor másfél évnek kell eltelnie, mire ez a teljesítmény és kapacitás teljesen átlagos lehet, hogy annyi darabot használhassanak belőle a keresőcégek, amennyi gond nélkül kiszolgálja a napi többmilliárdos keresések számát.
Ezt az időt lényegesen lecsökkenthetjük, ha mi, webszerkesztők ezt megtámogatjuk. Ez nem csak a keresőcégek érdeke, hanem a mi ügyfeleinké is, mert nem tudjuk megoldani egyszerűen, hogy jó helyezést érjenek el, csak különböző keresőoptimalizálási technikákkal, amit egyre inkább szűrnek a keresők.
Ami tehát hiányzik a HTML-ből:
- az adatok, adat- és tartalmi blokkok pontosabb jelentésének megadása
- az előbbiek összekapcsolási lehetőségének hiánya
Ezt meg lehet oldani részben az RDFa-val, de szerintem ez még kevés. Még jobb lenne a helyzet, ha az adatokat külön objektumként kezelnénk, mert így lehetővé válna a rájuk való szűrés, például megoldható lenne a következő: egy kereséssel megtalálni Magyarországon azokat a webes boltokat, amelyek árulják Dumas-tól a Monte Cristo grófját, és legolcsóbban házhoz szállítják (azaz a könyv + szállítási költség a legolcsóbb).
Ez ma csak olyasféle gyűjtőoldalakon lehetséges, mint pl. a depo.hu (bocs, de könyves gyűjtőoldalakat nem ismerek), és annak is van mondjuk 40-50 számítástechnikai partnere, viszont itthon pár nagyságrenddel több számtech bolt van, azaz lehetetlen megtalálni a számomra legkedvezőbb ajánlatot.
Itt egy ördögi kört járunk,
Meg vagyok róla győződve, hogy olyan erővonalak mentén mozog a web, hogy ezen a technológiai kultúrán nem lehet változtatni. Ezen a platformon nincsen realitása annak, amit mondasz. Ez csak egy új platformon működne, aminek ez az alapvetése.
Igazad van, én úgy látom,
Amire szerintem szükség lenne, az egy új protokoll, a HDTP, azaz Hyperdata Transfer Protocol, mivel be kell látni: nem csak szöveges dokumentumokat továbbítunk a neten, és célszerűbb lenne egy szofisztikáltabb szabvány kidolgozása, amiben például lehetőség van egyszerre több fájl egybecsomagolt küldésére.
Valamelyik nap olvastam az MSDN-en, hogy HTTP 1.1-ben például 1998 körül a nem betárcsázós internettel rendelkező számítógépeken 2-ben maximalizálták az egy IP felé megnyitható kapcsolatok számát, hogy ne terheljék le túlságosan a szervereket. A Firefoxban már jópár éve fütyülnek a szabványra, az IE-ben pedig a 8-as vagy 9-esben duplázták meg ezt a számot.
Ez is egy példa arra, hogy a szabványok le vannak maradva, és a szabványügyi hivatalban (a W3C-ben) lassan dolgoznak.
A technológiai váltás megoldható a jelenlegi platformon is, de persze csak korlátozottan. Én már készítettem is ilyen oldalt, csak egyszerűen idő hiányában nem tudtam a blogomon leírni a részleteket, ez viszont - reményeim szerint - a héten meg tudom oldani.
Valamelyik nap olvastam az
Ez így nem pontos. A tartós kapcsolatot használó klienseknél él a korlátozás. Ha megfelelően van implementálva, akkor tartós kapcsolat használatával jobb eredmények érhetők el, mint több kapcsolat egyidejű megnyitásával.
Sokkal nagyibb bajnak tartom, hogy a fejlesztők és gyártók fütyülnek az ott elkészült szabványokra.
A váltás akadálya nem technológiai, hanem társadalmi. A webet a fejlesztői kultúrája és öröksége teszi alkalmatlanná egy ilyen átmenetre.
A webfejlesztők jellemzően
Ha egy katonai diktatúrában élnénk, hatvan éves tábornokokkal, akiknek célja a rendszer fennmaradása, hogy kihúzzák még a nyugdíjig, akkor nekem is lennének kétségeim. Az internet viszont egyáltalán nem ilyen.