{"id":88,"date":"2016-07-24T18:03:33","date_gmt":"2016-07-24T16:03:33","guid":{"rendered":""},"modified":"2018-09-17T21:52:03","modified_gmt":"2018-09-17T19:52:03","slug":"o-html5-a-ccs3","status":"publish","type":"post","link":"https:\/\/spireng.sk\/en\/o-html5-a-ccs3\/","title":{"rendered":"O HTML5 a CCS3"},"content":{"rendered":"

\"Obr\u00e1zok\"Nie je to e\u0161te ani tak d\u00e1vno, \u010do sa HTML 5 objavilo ako \u010derstv\u00e1 novinka. A hne\u010f sa z toho stalo buzz-word o ktorom sa ve\u013ea hovorilo ale nikto presne nevedel \u010do to je. Od vtedy u\u017e pre\u0161lo p\u00e1r rokov a treba poveda\u0165, \u017ee aj v dne\u0161nej dobe nie je \u00faplne jednoduch\u00e9 zadefinova\u0165. A podobne je to aj s jeho \u201emlad\u0161\u00edm bratom\u201c CSS3. Ako to teda vlastne je sa m\u00f4\u017eeme teraz spolu pozrie\u0165 aj prostredn\u00edctvom knihy Beginning HTML5 and CSS3<\/a>.<\/p>\n

Mysl\u00edm, \u017ee m\u00f4\u017eem poveda\u0165 \u017ee web ako prostredie na v\u00fdvoj aplik\u00e1cie sa stal ve\u013emi \u0165a\u017eko ovl\u00e1date\u013en\u00fd. Obrovsk\u00e1 sila momentu a zotrva\u010dnosti, ktor\u00fa predstavuje ve\u013ek\u00e9 mno\u017estvo str\u00e1nok pou\u017e\u00edvaj\u00facich star\u0161ie alebo ne\u0161tandardn\u00e9 postupy s\u0165a\u017euje ak\u00fdko\u013evek pohyb vpred. Web so v\u0161etk\u00fdmi jeho technol\u00f3giami je ako ve\u013ek\u00e9 zviera, ktor\u00e9 si kr\u00e1\u010da svojou vlastnou cestou a len sem tam si nech\u00e1 svoj smer korigova\u0165 niekym in\u00fdm.<\/p>\n

Aj t\u00e1to neovl\u00e1date\u013enos\u0165 bola jedna z pr\u00ed\u010din, pre\u010do HTML5 (a ani CSS3) nie je jednoduch\u00e1 \u0161pecifik\u00e1cia, ktor\u00e1 m\u00e1 svoj jasn\u00fd za\u010diatok a koniec. Namiesto toho je to sada \u0161pecifik\u00e1cii, ka\u017ed\u00e1 zameran\u00e1 na ur\u010dit\u00fa oblas\u0165, pri\u010dom sa vyv\u00edjaj\u00fa nez\u00e1visl\u00e9. To je forma, ktorou sa sna\u017e\u00ed HTML5 pre\u017ei\u0165 v svete nekontrolovate\u013en\u00e9ho webu. A aj v\u010faka tejto premenlivej forme, je niekedy \u0165a\u017ek\u00e9 ur\u010di\u0165 \u010do to HTML5 je. Okrem samotn\u00e9ho HTML jazyka v sebe zah\u0155\u0148a aj Web Storage (lok\u00e1lne k\u013e\u00fa\u010d-hodnota \u00falo\u017eisko pre va\u0161u str\u00e1nku na strane klienta), Web Workers (paraleln\u00e1 pr\u00e1ca vo vl\u00e1knach v prehliada\u010di) alebo Server-Sent events (\u00e1no, server kontaktuje klienta…).<\/p>\n

Na jeden \u010dl\u00e1nok ale aj na knihu je toho naozaj ve\u013ea, preto sa aj autori Beginning HTML5 a CSS3 zamerali len na ur\u010dit\u00e9 \u010dasti. Napr\u00edklad na samotn\u00fd HTML jazyk. Ten, ako som u\u017e spom\u00ednal vy\u0161\u0161ie, by sa chcel vyv\u00edja\u0165 dopredu ale z\u00e1rove\u0148 nie je mo\u017en\u00e9 aby zahodil svoju minulos\u0165, lebo by polovica webu prestala fungova\u0165 (pravdepodobne aj viac). Preto je op\u00e4\u0165 tak\u00fd krok vpred pri\u010dom sa sk\u00f4r jeho mo\u017enosti naba\u013euj\u00fa ako by sa vymie\u0148ali za nov\u00e9. Preto s\u00fa napr\u00edklad v\u0161etky p\u00f4vodn\u00e9 zna\u010dky z HTML 4 st\u00e1le platn\u00e9 aj ke\u010f niektor\u00e9 dost\u00e1vaj\u00fa trochu in\u00fd zmysel. Snaha HTML5 je prida\u0165 im viac s\u00e9mantiky. Je to tak trochu posun k tomu, aby ste povedali ak\u00e9 \u00fadaje s\u00fa na str\u00e1nke a nie ako sa maj\u00fa zobrazova\u0165. O zobrazenie (interpret\u00e1ciu) \u00fadajov sa potom postar\u00e1 u\u017e prehliada\u010d pod\u013ea toho v akom kontexte be\u017e\u00ed (v mobile\/v po\u010d\u00edta\u010di, pre slabo vidiacich at\u010f).<\/p>\n

Okrem sp\u00e4tnej kompatibility s\u00fa t\u00fa aj nov\u00e9 zna\u010dky. Napr\u00edklad <section> a <article>. T\u00e1 prv\u00e1 sl\u00fa\u017ei na oddelenie \u010dasti text, ktor\u00e1 m\u00e1 reprezentuje nejak\u00fa jednu t\u00e9mu v \u010dl\u00e1nku ale z\u00e1rove\u0148 je s\u00fa\u010das\u0165ou nie\u010doho v\u00e4\u010d\u0161ieho (v podstate paragraf). To druh\u00e9 na vymedzenie textu, ktor\u00fd m\u00e1 s\u00e1m o sebe zmysel a teda m\u00f4\u017ee by\u0165 napr\u00edklad presunut\u00fd v r\u00e1mci str\u00e1nky na in\u00e9 miesto. Ako je z t\u00fdchto dvoch elementov vidno, u\u017e tu naozaj nejde len o syntax ale za\u010d\u00edna sa uva\u017eova\u0165 o zmysle a prepojeniach textov.<\/p>\n

\u010ealšie nové zna\u010dky sú napríklad <header>, <footer>, <nav>, <aside> a nieko\u013eko \u010falších. Zaujímavos\u0165ou je napríklad, \u017ee zna\u010dky <h1> a\u017e <h6> sú stále platné ale to \u010díslo na konci stráca zmysel a na ur\u010denie ve\u013ekosti sa uva\u017euje ako je daný <h*> element vnorený v HTML štruktúre. Inak povedané, všade mô\u017eete pou\u017eíva\u0165 <h1> ale ak dáte textu správnu štruktúru tak nadpisy sa budú postupne zmenšova\u0165 ako budú reprezentova\u0165 jednotlivé podnádpisy. Aj to je spôsob ako osta\u0165 spätne kompatibilný a pritom ís\u0165 dopredu.<\/p>\n

T\u00e1to nerozhodnos\u0165 medzi zotrvan\u00edm a krokom dopredu sp\u00f4sobuje, \u017ee sa kniha okrem t\u00e9me nov\u00fdch zna\u010diek vo ve\u013eko venuje aj vysvet\u013eovaniu toho, ako sa niektor\u00e9 p\u00f4vodn\u00e9 zna\u010dky interpretuj\u00fa po novom. Nikde v tomto pr\u00edpade nejde o radik\u00e1lnu zmenu. Ale sk\u00f4r len posun, ktor\u00fd je mo\u017en\u00fd bez toho aby sa v\u00fdrazne nenab\u00farala sp\u00e4tn\u00e1 kompatibilita.<\/p>\n

Okrem toho je jednou za zauj\u00edmav\u00fdch t\u00e9m roz\u0161irovanie HTML5. V podstate ide o to, \u017ee do dokumentu potrebujete prida\u0165 vlastn\u00fd druh inform\u00e1cii. Okrem <meta> elementu a class, rel, rev a profile atrib\u00fatov, ktor\u00e9 sa dali pou\u017ei\u0165 u\u017e v HTML 4.1 pribudol <data> element , data-* atrib\u00faty a mikrodata. Zatia\u013e \u010do <data> element a data-* atrib\u00faty predstavuj\u00fa t\u00fa jednoduch\u0161iu formu, mikrodata je sp\u00f4sob ako do HTML vlo\u017ei\u0165 cel\u00e9 \u0161trukt\u00fary \u00fadajov. Takto obohaten\u00e9 HTML potom vie sl\u00fa\u017ei\u0165 pre softv\u00e9r, ktor\u00fd t\u00fdmto \u00fadajom naviac rozumie pre v\u00e4\u010d\u0161\u00ed prenos inform\u00e1cii alebo lep\u0161ie spracovanie.<\/p>\n

A \u010do CSS3? (v\u0161imnite si, \u017ee nie CSS 3 ale CSS3 \u2013 bez medzery -, pri\u010dom posledn\u00e1 verzia bola CSS 2.1) Tak to u\u017e tie\u017e nie je jedna \u0161pecifik\u00e1cia ale sada \u0161pecifik\u00e1cii, z ktor\u00fdch ka\u017ed\u00e1 ide svojou cestou a r\u00fdchlos\u0165ou. Ka\u017edop\u00e1dne z\u00e1klady CSS3 ost\u00e1vaj\u00fa rovnak\u00e9 ako v predch\u00e1dzaj\u00facich verzi\u00e1ch. CSS s\u00fabor definuje mno\u017eina selektorov, ku ktor\u00fdm s\u00fa priraden\u00e9 pravidla zmeny \u0161t\u00fdlu. Cele sa to potom vyhodnocuje od najmenej \u0161pecifick\u00e9ho pravidla po najviac (preto to \u201ecascade\u201c v n\u00e1zve).<\/p>\n

Kniha okrem vysvetlenia CSS3 preber\u00e1 z\u00e1kladn\u00e9 layouti (rozlo\u017eenia str\u00e1nky), ktor\u00e9 viete pomocou CSS dosiahnu\u0165. Tie je dobr\u00e9 pozna\u0165, lebo podobne ako n\u00e1vrhov\u00e9 vzory pri programovan\u00ed, vo web dizajne tvoria ak\u00e9si hotov\u00e9 rie\u0161enia pre opakuj\u00face sa probl\u00e9my. Medzi \u010fal\u0161ie t\u00e9my potom patria anim\u00e1cie a fonty. Pre \u010dloveka, ktor\u00fd nie je sk\u00fasen\u00fd CSS-k\u00e1r celkom zauj\u00edmav\u00e9 \u010d\u00edtanie.<\/p>\n

Tak\u017ee na z\u00e1ver men\u0161ie zhrnutie. Kniha je ide\u00e1lna ak u\u017e ste o HTML a CSS nie\u010do po\u010duli ale potrebujete sa v tejto oblasti dovzdela\u0165. Z HTML5 vysvet\u013euje hlavne nov\u00e9 (a existuj\u00face) zna\u010dky a CSS3 berie v podstate od \u00fapln\u00e9ho z\u00e1kladu a\u017e k t\u00e9mam ako s\u00fa anim\u00e1cie. Je trochu star\u0161ia (rok 2012) preto treba bra\u0165 inform\u00e1cie o tom, \u010do je v ktorom prehliada\u010di ako podporovan\u00e9 s rezervou ale obsahuje tie\u017e odkazy na str\u00e1nky, kde tieto inform\u00e1cie maj\u00fa aktu\u00e1lne. To ostatn\u00e9, \u010do v knihe n\u00e1jdete je podan\u00e9 celkom prijate\u013enou formou a preto ju m\u00f4\u017eem odpor\u00fa\u010da\u0165.<\/p>","protected":false},"excerpt":{"rendered":"

Nie je to e\u0161te ani tak d\u00e1vno, \u010do sa HTML 5 objavilo ako \u010derstv\u00e1 novinka. A hne\u010f sa z toho stalo buzz-word o ktorom sa ve\u013ea hovorilo ale nikto presne nevedel \u010do to je. Od vtedy u\u017e pre\u0161lo p\u00e1r rokov a treba poveda\u0165, \u017ee aj v dne\u0161nej dobe nie je \u00faplne jednoduch\u00e9 zadefinova\u0165. A podobne […]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-88","post","type-post","status-publish","format-standard","hentry","category-vyvoj-softveru"],"_links":{"self":[{"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/posts\/88","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/comments?post=88"}],"version-history":[{"count":1,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/posts\/88\/revisions"}],"predecessor-version":[{"id":143,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/posts\/88\/revisions\/143"}],"wp:attachment":[{"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/media?parent=88"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/categories?post=88"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/tags?post=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}