ugrás a tartalomhoz

Crossbrowser HTML5

mahoo · 2011. Nov. 12. (Szo), 08.29
Sziasztok, kérdésem az lenne, hogy ma milyen lehetőségek (js) állnak rendelkezésre a crossbrowser HTML5 megvalósítására.

Megtáltam a html5shiv-et ami a html tag-ek cseréjét kezelését oldaja meg. Ez jó is, de gondolom ez nem elég. Mi van a CSS-sel és egyéb html5 által nyújtott új lehetőségekkel?

Meg lehet mindent oldani js-tel? IE6 részemről felejtős, de a többi böngészőre jó lenne egy optimalizált kód.

Természetesen találtam egyéb js fájlokat, ami ezt tudja, vagy azt tudja... de olyat eddig nem amely(ek) minden problémát megoldana(k).

Nektek van valami bevált módszeretek, kiegészítő js fájlok melyeket használtok?
 
1

Modernizr, HTML5 Boilerplate

tiku I tikaszvince · 2011. Nov. 12. (Szo), 08.34
Nézd meg a Modernizr-t: http://www.modernizr.com/!
Integrált megoldásnak, vagy csak ötletcsokornak ajánlom a HTML5 Boilerplate oldalt is http://html5boilerplate.com/
3

A modernizr én élesben nem

mahoo · 2011. Nov. 12. (Szo), 09.47
A modernizr én élesben nem próbáltam, de találtam ezt a linket:
http://nettuts.s3.amazonaws.com/881_html5Forms/demo/demo.html

Megnéztem IE7-tól Operáig és nálam sajnos nem volt egységes sem a működés sem a megjelenés, de lehet, hogy nálam van a hiba.

A boilerplate-t nem ismerem egyáltalán, utánanézek, köszönöm!
2

Jobb lenne, ha először

Hidvégi Gábor · 2011. Nov. 12. (Szo), 09.08
Jobb lenne, ha először feltennéd a kérdést, hogy mit nyersz azzal, ha HTML 5 tag-eket használsz? Három igazán új elem van, a Canvas, a Video és az Audio, ezeket a böngészők különféleképp támogatják, a linkekre kattintva olvashatsz a különböző felmerülő problémákról. Ha biztosat akarsz, akkor jelen pillanatban egyszerűbb ezeket Flash-ben megoldani, ami 98%-ban jól fog működni.

A többi "új" tag (article, aside, figure, header, footer és társaik) gyakorlatilag a régiek átnevezése, és nem jár előnnyel a használatuk, mivel
1, az oldalad nem lesz szebb tőlük (mindegy, hogy milyen tag-re rakod a stílusokat),
2, az oldaladat nem fogják könnyebben megtalálni (a keresőket nem érdekli a címek és a meta elemek kivételével, hogy miben van a tartalom, beindexelik gondolkodás nélkül),
3, a világon rajtad kívül most már több mint hétmilliárd embert nem érdekel, hogy milyen kódot gyártasz.

Egyedüli haszna pár CSS3 stílusnak van, amivel megkönnyítheted a munkádat, de ezek túlnyomó többségét meg lehet oldani CSS2 vagy akár CSS1 stílusok kombinációjával, itt is érdemes utánajárni, hogy melyik böngésző mennyire támogatja. Igazán lemaradva az Internet Explorer verziók vannak, de természetesen ott is létezik jópár megoldás, amivel majdnem tökéletes eredményt el lehet érni.
4

Érdekes amit mondasz, de

mahoo · 2011. Nov. 12. (Szo), 09.58
Érdekes amit mondasz, de másrészt meg azt hallom, hogy térjünk át html5-re. Persze nehéz úgy áttérni, hogy a támogatottsága jelenleg nagyon alacsony.

Nálam az áttérés azt jelenti, hogy gyakorlatban is html5-ben írom meg a html kódot. Na de, ha ez nem mindenhol néz ki megfelelően, akkor meg minek. Fejben "gyakorlatozni" meg felesleges számomra, mert mire elérünk oda, hogy a böngészők nagy része megfelelően támogatja a html5-ot addigra elfelejtem, ha csak nem csinálok mégis egy konkrét html fájlt. De akkor meg kétszer dolgozom vele, amihez meg nincs igazán kedvem... persze valószínűleg ez rossz hozzáállás, de ez legyen az én problémám.
5

Arról se felejtkezzünk el,

Hidvégi Gábor · 2011. Nov. 12. (Szo), 10.19
Arról se felejtkezzünk el, hogy azok a böngészők, amelyek nem támogatják az új elemeket és stílusokat, jellemzően lassabban futtatják a javascriptet, szóval érdemes elgondolkodni, hogy tényleg szükség van-e mindenféle külső scriptre - aminek a minőségéről még nyilvánvalóan nem tudtál eddig meggyőződni -, vagy pedig rászánod azt a plusz tíz percet, beraksz pár divvel többet, kivágsz néhány új png-t, és ugyanott vagy, minden browseren ugyanúgy néz ki, egyéb kompromisszumok nélkül.
6

HTML5

Poetro · 2011. Nov. 12. (Szo), 14.17
Habár Hidvégi Gábor meg van győződve arról, hogy a HTML5 egy életképtelen dolog, azért ez nem teljesen van így.

Van pár hasznos új elem, amiket nyújt, főleg az űrlapok esetén. Ezen kívül azoknak, akiket jó érzéssel tölt el, hogy <div class="article"> helyett azt írhatják, hogy <article> azok is megtalálják a számításaikat. Természetesen a HTML5 több mint pár új HTML elem. Kapcsolódik hozzá rengeteg új JavaScript API, amiket most nem szeretnék részletezni, mert a megjelenés szempontjából ezek nem lényegesek. A CSS3-at szintén nem venném ide, mert az független technológia.

A HTML elemek megjelenése eddig sem volt egységes, és természetesen ezen a HTML5 se változtatott. Azaz sem az új elemek, se a régiek nem lettek közelebb megjelenésben a böngészők között, főleg azért sem, mert az elemek megjelenését semmilyen szabvány nem rögzíti.
A html5shim és html5shiv segít a régi Internet Explorerek esetén, hogy az elemeket lehessen CSS-sel formázni, de mást nem csinál. A html5 innershiv pedig a JavaScript-tel beszúrt HTML5 elemeken segít.

A HTML5 Boilerplate-en kívül nincs igazán jól használható bevált módszer, érdemes azt használni. Ha az új űrlapelemeket akarod használni, akkor érdemes a Modernizr-t és a szükséges elemekhez pedig polyfill-t bevetni.

A CSS3-ról pedig annyit, hogy mi használjuk, és régebbi böngészők esetén pedig graceful degradation elvén hasonlóan fog kinézni, de a teljes egyezés nem elsődleges szempont. Aki akarja kipróbálhatja, hogyan néz ki az Examiner.com különböző böngészőkben.
7

Köszönöm Gábornak is a

mahoo · 2011. Nov. 12. (Szo), 15.15
Köszönöm Gábornak is a véleményét természetesen, de Poetro hozzászólása informatívabb volt számomra és nem kevésbá hasznos. 1-2 dolgot helyre tett bennem, ami nagyon jól jött. Köszönöm mégegyszer!
8

Habár Hidvégi Gábor meg van

Hidvégi Gábor · 2011. Nov. 12. (Szo), 15.45
Habár Hidvégi Gábor meg van győződve arról, hogy a HTML5 egy életképtelen dolog
Tévedsz, ilyet én sosem állítottam. Hadd idézzem egy 2011. márciusi írásomat, ahol egyértelmű a véleményem:
Amit fontosnak tartok leszögezni, hogy a HTML-re és a HTML 5-re szükség van, mivel egy célra tökéletesen megfelel: adatok megjelenítésére. Rengeteg előnye van, például óriási a támogatottsága, ismertsége, könnyen megtanulható, és viszonylag könnyen lehet a segítségével publikálni. A HTML 5 is hoz pár olyan újdonságot, ami megkönnyítheti a felhasználók és a fejlesztők életét is, bár vannak olyan elemei, amelyek hasznossága mindenesetre kérdéses, pl. a header, article, canvas stb.

Amivel gond van viszont, az az, hogy a HTML-ben vegyesen szerepelnek az adatok és a megjelenítésükhöz szükséges információk, azaz pontosan úgy működik, mint amikor egy php scriptben egyszerre van php kód és HTML. Ez már vagy tíz éve nem trendi, HTML fronton viszont még mindig ezt a felfogást erőltetik. Amennyiben külön lehetne választani a két réteget, azon nyomban nyilvánvalóvá válik sok-sok régi és új HTML elem fölösleges volta.
9

Off

Poetro · 2011. Nov. 12. (Szo), 16.20
Sajnálom, kicsit sarkítottam.

Amivel gond van viszont, az az, hogy a HTML-ben vegyesen szerepelnek az adatok és a megjelenítésükhöz szükséges információk

Ez azért már nincs így. Semmi a megjelenésért szükséges elem nincs már benne a specifikációban. A régi elemeknek, amik maradtak, és a megjelenítést szabályozták, azok új jelentést kaptak.

Ilyen az <i>, ami új jelentést kapott:
  1. Más hangulatú szöveg,
  2. eltérés a hagyományos értelmezéstől,
  3. technológiai kifejezés,
  4. más nyelvű kifejezés,
  5. illetve amelyik nyelven ez használatos, ott például (hajó) nevek kiemelése.

vagy a <b>, ami más stilisztikai különbözőséget hordoz, fontossági különbség nélkül.
10

Hogy érthetőbb legyek, íme,

Hidvégi Gábor · 2011. Nov. 12. (Szo), 16.52
Hogy érthetőbb legyek, íme, egy példa a weblabor mockuphoz készített kódomból:
<div class="cikk_fejlec">
  <div class="cikk_fejlec_szoveg">
    <h2><a href="#">Bevezetés a Sphinx keresőmotor használatába</a></h2>
    <p>A jól használható kereső gyakran a legfontosabb része a honlapnak; gyakran önmagában meghatározza annak sikerességét, avagy sikertelenségét. A szöveges keresések megtámogatására ideális eszköz lehet a <em>Sphinx</em>.</p>
    <div class="cimkek_felirat">Címkék:</div>
    <ul class="cimkek">
      <li><a href="#" rel="tag">adatbázis</a></li>
      <li><a href="#" rel="tag">keresés</a></li>
      <li><a href="#" rel="tag">PHP</a></li>
      <li><a href="#" rel="tag">Sphinx</a></li>
    </ul>
    <div class="clearboth"></div>
    <div><a href="#">Tovább &raquo;</a></div>
  </div>
</div>
<div class="cikk_kiegeszito">
  <a href="#">_subi_</a>
  <div>2011. jún. 6.</div>
  <div><a href="#">5 hozzászólás</a></div>
</div>
Most vegyük ebből az adatokat, mondjuk XML formában:
<cikk url="/cikkek/bevezetes_a_sphinx_keresomotor_hasznalataba.html">
  <cim>Bevezetés a Sphinx keresőmotor használatába</cim>
  <bevezeto>A jól használható kereső gyakran a legfontosabb része a honlapnak; gyakran önmagában meghatározza annak sikerességét, avagy sikertelenségét. A szöveges keresések megtámogatására ideális eszköz lehet a <em>Sphinx</em>.</bevezeto>
  <szerzo url="/tagok/1234">_subi_</szerzo>
  <modositas_datuma>2011. jún. 6.</modositas_datuma>
  <cimkek>
    <cimke url="/cimkek/adatbazis">adatbázis</cimke>
    <cimke url="/cimkek/kereses">keresés</cimke>
    <cimke url="/cimkek/php">PHP</cimke>
    <cimke url="/cimkek/sphinx">Sphinx</cimke>
  </cimkek>
  <hozzaszolasok url="/cikkek/bevezetes_a_sphinx_keresomotor_hasznalataba.html#hozzaszolasok" szamossag="5">
  </hozzaszolasok>
</cikk>

És ez csak egy egyszerű HTML kód volt, ha lenne dizájn, ötször ennyi div, span és társai, ami igazából lényegtelen, mert az adatok és az adatok közti összefüggések szempontjából nem hordoz információt. Ha beszélgetsz mondjuk egy barátoddal, nem azt mondod neki, hogy "egy újság fejlécében olvastam, hogy ..." : )

Mivel a HTML-ben nem kötelező struktúrálni, ezért megengedhető pl. a dizájn miatt, mint amit az első kódban direkt elrontottam, hogy a "cikk_kiegeszito" div nem a <div class="cikk_fejlec">-en belül van. Innentől kezdve lehet írni a mesterséges intelligenciát, ami felismeri, hogy a kettő összetartozik.

Ha külön lenne választva a megjelenés a tartalomtól, jóval egyszerűbb lenne például egy ilyen keresést elvégezni: "Poetro hozzászólásai node.js és adatbázis témában" vagy "minden magyarországi webbolt, ahol van 4GB DDR3 memóriamodul raktáron, ár < 12000 forint".