Straipsniai

HTML 5: sekantis web evoliucijos etapas

HTML 5: sekantis web evoliucijos etapas
Parašė Edmundas, 2011-03-01 00:15:54


Ne taip seniai sulaukėme 2011 metų, kurie web erdvėje įpūs naujos gyvybės — HTML 5. Sparčiai progresuojanti interneto plėtra skatina naujų technologijų atsiradimą ir plėtojimą. Būtent taip turėtume įsivaizduoti HTML 5 — kaip atnaujintą standartą tinklalapiuose. Tad susipažinkime su tuo, ką šiuo metu siūlo HTML 5 ir ką šis naujasis standartas pasiūlys ateityje.

HTML 5 — kas tai?

Pradėkime nuo to, kas yra HTML 5. Turime suprasti, jog HTML 5 nėra atskira nauja technologija tinklalapiuose. Tai taip pat nėra griežtai apibrėžtas įrankių paketas, naršyklės įskiepis ar atskira biblioteka. Tai, galiausiai, nėra aplikacija, programa ar tam tikra sistema. HTML 5 tiesiog apibrėžia atnaujintą HTML standartą, plėtojant ir gerinant savybes, kurias turi HTML 4.

Kol nebuvo sukurto HTML 4 standarto, egzistavo ankstesnės specifikacijos arba, kitaip sakant, versijos. Kadangi negalima iš niekur nieko išpešti ir įdėti naują standartą lyg ankstesnieji nebeegzistuoja (kitaip visas internetas tiesiog sugriūtų, t.y. tinklalapiai nebūtų atvaizduojami korektiškai naršyklėse, kuriose integruotas naujas standartas), plėtojimas yra progresyvus. Kitaip sakant, integruojant kažką naujo, originaliosios savybės išlieka, jas darniai sujungiant su naujomis. Tad perėjimas iš HTML 4 į HTML 5 irgi yra progresyvus. Tai reiškia, kad niekas konkrečiai nedingo, o atsirado.

Ką tai reiškia man, kaip žmogui, mokančiam HTML 4?

Kaip jau minėjau, HTML 5 nepradangino fundamentalių dalykų, kurie egzistavo ir anksčiau. Tad HTML 5 atsiradimas reiškia du dalykus:

  • tai, ką žinojote anksčiau, tinka ir dabar. Visos HTML žymės, kodo struktūra išlieka ta pati, todėl nereiks mokytis visko iš naujo.
  • reikės susipažinti su naujomis galimybėmis, kurias siūlo HTML 5. Nieko itin sudėtingo ar nesuprantamo, tiesiog naujos sąvokos, HTML žymės ir pan.

O kur padėjome XHTML?

Reikia pripažinti, jog vis dėl to XHTML standartas tapo itin patrauklia pasirinktimi kuriant tinklalapius. Nenoriu itin nukrypti nuo temos, tačiau, kaip jau turbūt žinote, XHTML apibrėžia griežtesnę kodo rašymo kultūrą negu HTML. Yra ir daugiau esminių skirtumų, bet į jų analizavimą šį kartą nesigilinkime. Taigi pereidami prie HTML 5 turėsime šiek tiek pakeisti savo kodo rašymo įpročius.

Dar verta paminėti, kad anksčiau planuotas XHTML 2.0 taip ir nepasirodys, kadangi šio standarto plėtra buvo nutraukta. Tai, berods, įtakojo HTML 5 standarto kūrimas.

Migruojame į HTML 5

Pirmiausia prisiminkime, kaip nurodome, kokį standartą naudosime HTML dokumente.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Čia šiuo atveju nurodėme XHTML „Transitional“ 1.0 standartą, tačiau nesunku suvokti, kad toks standarto apibrėžimas nėra itin patrauklus. Laimei, HTML 5 standartą apibrėžti yra labai paprasta ir patogu.

<!DOCTYPE html>

Taip, tai viskas, ką reikia nurodyti! Labai paprasta, tiesa? Kitas labai svarbus dalykas — turėsime atsisveikinti su jau įprastu XHTML žymių uždarymu. Kaip jau žinote, img elementas XHTML apibrėžtas tokia sintakse:

<img src="adresas" alt="pavadinimas" />

Pradėję naudoti HTML 5 nebeturime rūpintis žymės uždarymu (žinoma, kai žymė yra „vienetinė“: br, hr).

<img src="adresas" alt="pavadinimas">
<br>
<hr>

Kadangi siekiama suderinamumo su ankstesniais standartais, galime naudoti sintaksę kaip ir anksčiau (XHTML), tačiau pravartu iš karto priimti tinkamą sintaksę ir prie jos priprasti.

Pagrindinės HTML 5 savybės

Taigi apibrėžkime pagrindines HTML 5 savybes ir naujus dalykus, kuriuos galime naudoti jau dabar.

  • Naujos struktūrinės žymės: <section>, <header>, <footer>, <nav>, <article>, <aside>.
  • Vaizdo failai su <video>.
  • Garso failai su <audio>.
  • <canvas>.
  • Nauji formos elementų tipai ir atributai.

Naujos struktūrinės žymės

Iki šiol naudojome <div> elementą dizaino struktūrai, tačiau su HTML 5 ši idealogija šiek tiek keičiasi. Kadangi beveik kiekvienas tinklalapis turi viršutinę dalį (angl. „header“), apatinę dalį (angl. „footer“), atskiras turinio sekcijas arba blokus (angl. „sections“) bei blokus kažkokiems įrašams, akivaizdu, kad yra naudinga šias sritis apibrėžti kaip atskirus elementus. Būtent tai realizuota HTML 5.

<section>

Šis elementas apibrėžia turinio sritį, kuri gali talpinti bet kokius elementus. Joje paprastai gali būti <header> ir <footer> elementai. Taip pat šioje srityje gali būti kitos sritys, taip sukuriant gilesnę ir konkretesnę struktūrą. Verta paminėti, jog <section> elementas nėra skirtas kaip stilizavimo objektas. Kitaip sakant, jeigu žadate naudoti <section> elementą „apjuosti“ turiniui, kad jį būtų galima stilizuoti, tai darysite neteisingai. Tam yra skirtas mūsų gerai žinomas <div> elementas.

<section>
	<h1>Antraštė</h1>
	Turinys
</section>

Atkreipkite dėmesį, jog <section> turi antraštę (angl. „heading“) ir ji yra elemento viduje, o ne išorėje prieš pat jį. Tad neįdėjus antraštės paprastai sakome, kad sekcija yra neįvardinta (angl. „untitled section“).

<header>

Dauguma turinio sričių turi kokią nors įvadinę dalį — tai paprastai yra antraštė, turinys (čia omenyje turime angl. „table of contents“) ar net paieškos forma.

<header>
	<h1>Straipsniai</h1>
</header>
<article>
	<header>
		<h1>Straipsnio ar įrašo pavadinimas</h1>
	</header>
	<p>Straipsnio turinys</p>
</article>

Svarbu atkreipti dėmesį, jog dabar turime dvi labai panašias žymes: <head> ir <header>, tačiau nepamirškime, jog tai du atskiri objektai.

<footer>

Šis elementas naudojamas baigiamajai informacijai talpinti: informacija apie įrašo autorių, susijusios nuorodos ir pan. Paprastai <footer> elementą naudosime <article> viduje (pastarąjį elementą netrukus apžvelgsime) bei kaip atskirą objektą dokumento pabaigoje.

<article>
	Įrašo turinys.
	<footer>
		Baigiamoji įrašo informacija.
	</footer>
</article>

Pavyzdžiui, tinklalapio apačioje dažniausiai turime pagrindinius meniu punktus (pasikartojančius iš viršutinės dalies, kur yra tikroji navigacija).

<div id="footer">
	<ul>
		<li><a href="">Pagrindinis</a></li>
		<li><a href="">Straipsniai</a></li>
		<li><a href="">Naujienos</a></li>
	</ul>
</div>

Tačiau naudojant HTML 5 standartą korektiška naudoti <footer> elementą.

<footer>
	<ul>
		<li><a href="">Pagrindinis</a></li>
		<li><a href="">Straipsniai</a></li>
		<li><a href="">Naujienos</a></li>
	</ul>
</footer>
<article>

<article> elementą įvardijame kaip atskirą ir nepriklausomą turinio sritį, kur gali būti vadinama tiesiog įrašu. Tačiau įrašas gali interpretuojamas labai įvairiai: įrašą gali atitikti naujienų įrašas, straipsnis, komentaras ir pan. Čia svarbu nepainioti <section> su <article>, nors idėja iš pirmo žvilgsnio atrodo panaši. Sekcijas naudojame apibrėžti gana abstrakčioms puslapio struktūros sritims arba išskirti turinį į kažkokias logines grupes, tuo tarpu <article> yra konkretus įrašas arba informacijos blokas. Įrašas gali turėti tiek antraštinį elementą, tiek baigiamąjį. Paprastas pavyzdys: turime puslapį, kuriame yra straipsnis, o po to seka komentarai. Tokią struktūrą pabandykime užrašyti HTML 5 kodu.

<article>
	<header>
		<h1>Straipsnis apie HTML 5</h1>
		<p><time pubdate datetime="2011-03-01">2011-03-01</time></p>
	</header>
  	<p>Straipsnio turinys</p>

	<!-- ... -->

	<section>
		<h2>Komentarai</h2>
		<article>
			<header>
				<h3>Autorius: Edmundas</h3>
				<p><!-- Data ir laikas--></p>
			</header>
			<p>Komentaras</p>
		</article>
    
		<article>
			<header>
				<h3>Autorius: Irmantas</h3>
				<p><!-- Data ir laikas --></p>
			</header>
			<p>Komentaras</p>
		</article>
  	</section>
</article>
<aside>

Šis elementas atsiradimo pradžioje buvo klaidingai interpretuojamas, kadangi kai kurie manė, jog tai „sidebar“ puslapio srities atitikmuo. Kurį laiką tai buvo klaidinga intepretacija. <aside> buvo griežtai surištas su <article> ir jo paskirtis buvo įterpti susijusią turinio atžvilgiu informaciją įraše. Pavyzdžiui, kurioje nors straipsnio dalyje gali būti įterpta citata arba termino paaiškinimas.

<article>
	<header>
		<h1>Straipsnio antraštė</h1>
	</header>
	<p>Straipsnio tekstas.</p>
	<aside>
		<q>Citata, susijusi su įrašu ar įrašo pastraipa.</q>
	</aside>
	<p>Tolimesnis straipsnio tekstas.</p>
</article>

Tačiau dauguma žmonių kiek skeptiškai žiūrėjo į tokį limituotą elemento naudojimą, tad dabar <aside> gali būti ne tik įrašo viduje kaip susijusi išskirta informacija, tačiau ir kaip atskira puslapio sritis, kuri nebūtinai glaudžiai susijusi su įrašu (papildoma navigacija ar net reklama).

<nav>

Ne paslaptis, kad <nav> elementas asocijuojasi su navigacija, kadangi būtent tokia jo paskirtis. Tačiau kartais gali susidaryti abejonių, kada tinkamai naudoti šį elementą, mat HTML 5 nurodo dar vieną elementą <menu>, kuris teoriškai irgi turėtų tikti meniu punktams arba, kitaip sakant, pagrindinei tinklalapio navigacijai. Deja, tai ne visai teisingas požiūris. <nav> apibrėžia navigacijos sritį arba nuorodų rinkinį, kur nuorodos veda į kitus tinklalapio puslapius (rubrikas), tuo tarpu <menu> turėtų būti naudojamas komandoms arba komandų meniu. Tad galime teigti, kad pastarasis elementas skirtas specifinėms web aplikacijoms, kuriose yra tam tikra įrankių juosta ar formos komandų sąrašas.

Paprastai pagrindinę tinklalapio navigaciją užrašome atskirame <div> elemente ar sąraše (arba abiejuose).

<div id="meniu">
	<ul>
		<li><a href="">Straipsniai</a></li>
		<li><a href="">Naujienos</a></li>
	</ul>
</div>
<ul id="meniu">
	<li><a href="">Straipsniai</a></li>
	<li><a href="">Naujienos</a></li>
</ul>

Tačiau su HTML 5 galime tai nurodyti šiek tiek aiškiau ir konkrečiau.

<nav>
	<h1>Navigacija</h1>
	<ul>
		<li><a href="">Straipsniai</a></li>
		<li><a href="">Naujienos</a></li>
	</ul>
</nav>

Vaizdo failai su <video>

Jeigu teko dirbti su vaizdo failų integravimu tinklalapyje, turbūt žinote, jog tai kartais gana skausmingas procesas. Norėdami įdėti vaizdo įrašą puslapyje, vienu ar kitu atveju naudojame Adobe Flash technologiją, kuri nėra blogis, tačiau kartais sukelia nepatogumų, ypatingai integruojant.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344">
	<param name="allowFullScreen" value="true" />
	<param name="allowscriptaccess" value="always" />
	<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
	<param name="allowfullscreen" value="true" />
	<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
	</embed>
</object>

Tiek daug vargo dėl vieno vaizdo failo įkėlimo! Nuteikia ne visai pozityviai, tiesa? Tačiau HTML 5 mums siūlo lengvą išeitį, kuri leidžia įterpti vaizdo failą taip pat paprastai kaip paveikslėlį naudojantis <video> elementu.

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer>
	<p>Peržiūrėk vaizdo įrašą tinklalapyje arba jį <a  href="video.mp4">parsisiųsk</a>.</p>
</video>

Deja, po kol kas dar turime problemų su <video>, nes naršyklių kūrėjai, regis, pradėjo karą dėl kodekų standartizavimo. Turėtumėte žinoti, kad vaizdo failai gali būti išsaugoti įvairiais formatais ir kodekais. Tiksliai negaliu nurodyti, kurios naršyklės palaiko kokius kodekus <video> elementui, tačiau neseniai „Google“ paskelbė, jog atsisakė H.264 kodeko norint naudoti atvirojo kodo formatus. Vietoje H.264 plėtos WebM ir Theora palaikymą. Tad čia išklya problema, mat dabar nebeturime vieno bendro formato visoms pagrindinėms moderniosioms naršyklėms: Firefox, Safari, Chrome, Internet Explorer 9.

Garso failai su <audio>

Kaip ir su vaizdo failais, garso įašus įkelti į tinklalapį taip pat labai paprasta.

<audio src="irasas.ogg" controls preload="auto" autobuffer></audio>

Tolimesniam skaitymui

Kai kuriems dalykams neužtenka vieno straipsnio, todėl apie <canvas> ir kitas naujas galimybes galite paskaityti savarankiškai kituose tinklalapiuose. Tačiau žinoma, šiame tinklalapyje anksčiau ar vėliau išplėtosime nepaminėtas temas.


Apibendrinimas

Kaip matote, HTML 5 mums siūlo daug naujovių, kurios palengvins tinklalapių ir interaktyvių web aplikacijų kūrimą. Nors teoriškai HTML 5 standartas gali būti plėtojamas iki pat 2022 metų, nemažai dalykų galime naudoti jau dabar. Ačiū už dėmesį.

Sėkmės!


HTML

Svetainių kūrimas

Web dizainas

Apie autorių


Edmundas

Edmundas yra E-grafika.lt tinklalapio administratorius. Šiuo metu studijuoja Vilniaus universitete, dirba bei rūpinasi šiuo tinklalapiu: rašo straipsnius, naujienas, kuria naujus epizodus E-grafika.lt TV laidoms. Jis atsakingas už tinklalapio užtikrintą veikimą bei tobulinimą.


Pasidalinti straipsniu su draugais per Facebook   „Patweetink“ kitiems apie šį straipsnį   Publikuok straipsnį rockit
Komentarai
elsson
Asmeniškai, man su div'ais viskas atrodo lengviau smile
elsson @ 2011-03-04 16:43:16
 
doncatas
man tai patiko tik video ir audio galimybės. o tie tr td kad be užbaigimų nieko gero.
doncatas @ 2011-03-10 22:41:03
 
Išsakyk savo nuomonę
Komentuoti gali tik registruoti nariai.