Webové technologie roku 2014

Webové technologie roku 2014

Přesuňme se teď trochu do budoucnosti jako v nějakém sci-fi filmu. Protože si ale nedovolíme předpovídat technický pokrok moc dopředu, posuneme se jen o rok. Píše se rok 2014. Pár technologií je už mrtvých, málokdo si na ně vzpomene, protože byly nahrazeny modernějšími. K internetu se lidé stále více připojují přes své tablety či smartphony.

XHTML 1.0 je jedno z těch, kteří jsou mrtví. Naopak HTML5 se dočkává standardizace v prohlížečích a přináší tak nové netušené možnosti. Spolu s ním se neustále implementují i novinky z CSS3, rozvíjejí se webové fonty, JavaScript získává na popularitě se svou knihovnou jQuery, implementují se Google Maps API, OpenGraph API a vytvářejí se kdejaké jiné API. Pravidla se prostě změnila. S čím tedy máte počítat, pokud chcete vytvořit web, který bude úspěšný v roce 2014?

 HTML5

<!doctype html>

Nová verze webového jazyka přináší mnohá skvělá vylepšení, s pomocí nichž se dají vytvářet takové věci, ke kterým bylo dříve nutné využívat další technologie. Které hlavní změny by vás měly zajímat?

1. Nová sémantika (tagy header, hgroup, footer, nav, article, section, aside, time, …). Že se vám budou plést například tagy head a header? Jasně, ale určitě stojí za to si zvyknout na všechny nové tagy. Díky nim totiž bude váš kód peřhlednější a Google robot dokáže lépe určit, co se kde na webu nachází.

2. Nový tag canvas. Díky němu můžete pomocí javascriptu kreslit grafické útvary přímo do webové stránky. A to takovým způsobem, jak jste na to zvyklí z mnoha programovacích jazyků.

3. Tagy video a audio. Tady není o čem diskutovat, ty vám prostě umožní snadněji pracovat s multimediálním obsahem.

Samozřejmě je tu pak ještě mnoho dalších vylepšení. Například deklarace kódování se dá dělat mnohem kratším zápisem než dříve. Snadněji se vám také bude pracovat s formuláři, protože přibyla velká hromada různých typů input. A tak dále… Pro vývojáře webů bude život s HTML5 rozhodně jednodušší.

img1_html5

Více o HTML5 najdete zde: http://www.w3schools.com/html/html5_intro.asp a http://www.html5rocks.com/en/
Více o <canvas> zde:http://www.html5canvastutorials.com/ a http://www.w3schools.com/html/html5_canvas.asp

CSS3

Stíny nebo zaoblené rohy už nemusíte řešit v Photoshopu.

Za největší pokrok lze určitě považovat všechny vymoženosti, které se týkají grafických prvků a pomohou vám k lepšímu designu webu. Tady je přehled těch nejdůležitějších:

  1. border-radius: zaoblení rohů objektů (lze použít například na tagy div, img, …)
  2. box-shadow: vytvoří stín prvku (např. div, img, …)
  3. text-shadow: vytvoří stín textu
  4. RGBA: klasický model zapsání barvy v RGB, ale přidané A určuje průhlednost (lze použít na cokoliv, čemu se nastavuje barva – pozadí, ohraničení, text, …)
  5. transitions: animované změny při hoveru (najetí myší na prvek) nebo jiné změně prvku, například změna velikost nebo polohy, …
  6. transform: transformace objektů – otočení ikonky o 90°, přehnutí do prostoru apod.
  7. selectors: větší možnost výběru elementů (například element, jehož hodnota atributu končí/obsahuje/začíná na „val“ apod.)
  8. @font-face: vkládání mnoha fontů

Ukázka (zaoblené rohy a stín):

Více o CSS3: http://www.w3schools.com/css3/
CSS3 generátor: http://css3generator.com/

Responzivní webdesign

Smartphony, tablety a veškerá přenosná zařízení vládnou světu

Responzivní web je takový web, který se správně zobrazí na zařízení každé velikosti (PC, tablet, smartphone). Některé weby to řeší tak, že mají dvě verze – jednu pro desktop a druhou mobilní (pro příklad si uveďme desktopový facebook.com a jeho mobilní verzi m.facebook.com). Fajn. Ale v roce 2014 bude nutné počítat s tím, že rozhodně neexistují velikostně jen tato dvě zařízení. Ne všechny smartphony jsou stejně velké. Některé mají malý 3,2 palcový displej, jiné se svou velikostí podobají spíše tabletu. A i tablety se objevují v různých provedeních, nejčastěji od sedmi k deseti palcům. Takže je rozhodně lepší mít responzivní web, který má jen jednu verzi. Vždy si automaticky upraví rozměry a uspořádání prvků podle rozlišení zařízení, přes které na něj přistupujete.

Pro vytvoření responzivního webu potřebujete dvě základní věci:

  • HTML/CSS container: Obvykle se používá základní container o šířce 960px, v němž je celý obsah a jehož šířka se mění podle zařízení.
  • @media only screen: CSS příkaz, v němž si definujete výchozí rozměry zařízení a speciální úpravy zobrazení prvků pro ně.

Základy responzivního webu se objevily už v té době, kdy se začala šířka v CSS zadávat v procentech (width: 100%). Tahle úprava však již dnes většinou nestačí.

img2_responsive

Více o responzivním webdesignu zde: http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

Personalizované webové fonty

Webové fonty, které lépe vyjadřují vaši vizuální identitu

V minulosti se na webech používaly výhradně základní fonty z OS Windows. Mělo to svůj význam (a to nejen ten, že Windows byl nejrozšířenějším systémem na desktopech). Přenosová rychlost měla tehdy dost znatelná omezení, tak bylo lepší využívat fonty, které si uživatel nemusí stahovat a má je ve vlastním počítači. Dnes už je ale situace jiná, data kolem nás proudí rychlostí blesku a vysokorychlostní internet není nic výjimečného ani v nejvzdálenější vesnici.

Základní fonty totiž nebyly navrhované pro zobrazení na různých zařízeních. Proč by taky měly být? Tehdy byli lidé rádi, když měli na stole velký počítač, o přenosných zařízeních se jim ani nesnilo. Tyhle fonty tak na mnoha malých displejích nejsou moc dobře čitelné a vaši stránku od jiných webů nijak neodliší a neupoutají na ni pozornost. Tedy kromě Comic Sans, protože tento font zaujme určitě i v dnešní době. :-)

img3_fonty

Co tedy můžete dělat?

Google Fonts

Veřejný zdroj free fontů, kde si vyhledáte písmo, které se vám líbí, vyberete pár možností a výsledný kód si vložíte do hlavičky stránky. O více se starat vůbec nemusíte, je to skutečně jednoduché. Pokud byste se rádi drželi klasických dobře čitelných písem, rozhodně se podívejte na fonty Open Sans, Museo nebo Roboto. Kromě nich tam však najdete i mnoho opravdu zajímavých a výrazných fontů – na výběr máte aktuálně z 629 možností. Jen to s výrazným písmem nepřežeňte.

Výhody: free, mnoho fontů, jednoduché použití
Nevýhody: horší podpora českých znaků, chybí prémiové fonty

@font-face

Ze stránky jako je například http://www.fontsquirel.com si vyberete a stáhnete písmo. To si potom nahrajete na server a do .css šablony už ho jen nalinkujete přes @font-face. Výhodou je, že takto můžete na váš web vkládat mnoho fontů – free i koupené prémiové.

Výhody: neomezené možnosti, velké množství free fontů
Nevýhody: implementace je o něco složitější, než jen zmáčknout CTRL+C a CTLR+V, schopnosti běžného tvůrce webu však jistě nepřekračuje

TypeKit

Služba od společnosti Adobe, která vám umožňuje používat hodně krásných fontů. Pokud si vystačíte s omezeným počtem a nekomerčním použitím, získáte některé i zdarma nebo za relativně nízký obnos. Na své si zde přijdou ale i ti, kteří se nebojí do hezkého fontu vrazit nějakou tu korunu. Spíše více korun. Implementace písma na web probíhá podobně jako u Google Fonts, stačí vložit do hlavičky kus kódu, který vše provede za vás.

Výhody: prémiové fonty, integrovaná podpora optimalizace textu pro tablety a smartphony
Nevýhody: žádné

Font icons

Pěkné ikonky v minimalistickém stylu

Vy ještě stále používáte rastrové (jpg, gif, png) ikonky? A o font (vektorových) ikonách jste ještě neslyšeli? Nejsou až tak převratnou novinkou, ale zvěsti o nich se šíří pomalu. Jedním z důvodů, proč tomu tak je, byla v minulosti i špatná kompatibilita se staršími IE.

Jaká je hlavní výhoda font ikonek? Jednoduše se chovají jako font (tedy text). Představte si, že máte rastrovou ikonu o velikosti 16x16px. Tuto ikonku chcete použít několikrát, pokaždé byste ale chtěli změnit velikost, barvu nebo přidat stín. Bez Photoshopu a spoustu stráveného času nemožné. Ale když využijete vekoorovou font ikonku, která se chová jako text, je to najednou ohromně jednoduché. Funguje to jako u běžného textu – stačí jen změnit CSS styl. A vše proběhne bez ztráty kvality. A bojíte se, jak se takové ikonky do web stránky integrují? Žádný stres, je to podobně jednoduché jako při @font-face.

img4_fonticons

Nejznámějším ikonkovým fontem je Font Awesome (http://fortawesome.github.io/Font-Awesome), ale font ikonek pro weby je plný Google, takže stačí jen trochu hledat a můžete si vybrat ty nejlepší, které se vám budou líbit.

Flat design

Design dotykové doby

Flat design neboli plochý design je designem zítřka (a zřejmě i několika stovek dalších zítřků). Jeho krása spočívá v jednoduchosti, intuitivnosti, čitelnosti a rychlém a plynulém přístupu. To všechno se s ohledem na dotykové technologie smartphonů, tabletů, ale i notebooků hodí. V jednoduchosti je krása. Hodně se tímto heslem řídí a minimalistický flat design propagují Windows 8, iOS7 nebo MySpace.

flatdesign

Více flat designu: http://fltdsgn.com/ a http://pinterest.com/warmarc/flat-ui-design/

jQuery

Nejrozšířenější JS knihovna pro web

jQuery snad ani není třeba představovat, už několik let je to největší a nejrozšířenější JS knihovna s rozsáhlým API, díky které můžete efektivně budovat efekty na webu. Kdo ve svých webových stránkách nevyužívá jQuery, jako by ani nebyl. jQuery totiž stojí za téměř všemi působivými detaily a interaktivními prvky. Kromě hlavní jQuery knihovny však můžete využívat i jQuery UI se zaměřením na UI prvky webu (tabs, accordion, slider, autocompleta apod.) a jQuery Mobile (podporuje dotykové prvky, zobrazení webů na tabletech a smartphonech apod.).

jQuery: http://jquery.com/
jQuery UI: http://jqueryui.com/
jQuery Mobile: http://jquerymobile.com/

Twitter Bootstrap

Nástroj, který vám pomůže s responzivní kódovou i vizuální strukturou webu

Bootstrap je mutliplatformový (pro PC, tablet i smartphone) framework pro vývojáře webových stránek. Ti ho používají proto, že je díky němu možné budovat weby rychleji, jednodušeji a responzivně. Obsahuje sjednocenou sbírku HTML5/CSS/jQuery hotových vizuálů, díky kterým můžete za krátký čas udělat základní kostru webu.

Proč používat Bootstrap?

  • sjednocená HTML5 struktura webu pro různé prvky (slider, navigace, text, nadpisy, formuláře, grid, …)
  • využívá jQuery
  • předpřipravený design pro mini projekty se zaměřením na detail
  • bezproblémové přizpůsobení pro váš vlastní design, jQuery pluginy apod.

Bootstrap by měl vyzkoušet každý tvůrce webu aspoň pro vlastní rozhled. Naučí vás totiž komplexně přemýšlet o tvorbě HTML, CSS nebo vlastních jQuery pluginů.

Google Maps API v3

Získejte moc nad Google mapami

Google Maps API je rozhraní pro programátory, které jim umožňuje vkládat na web přes JS personalizované mapy. Díky němu můžete nastavit, co se má na mapě zobrazit, kde se to má zobrazit, jakou má mít mapa barvu, přidat vlastní ikonky, vkládat vlastní informace a další.

Jak vypadá taková upravená Google mapa?

http://www.slovenskocita.sk/ od Martinus
http://rukahore.sk/ od Ruka Hore
http://www.nepacisamito.sk/ by Triad Advertising

Open Graph API

Ovládejte Facebook

Facebook Open Graph API je v době sociálních sítí, která bude přetrvávat jistě ještě v roce 2014, důležitým API pro každého programátora. Toto rozhraní vám umožní přes http kontrolovat, co se zobrazí na Facebooku, když někdo sdílí link vaší stránky či produktu, tj. zobrazený nápis, odkaz, popis a obrázek přes Open Graph meta tagy vaší stránky.

Takže to byl přehled webových technologií a designových pravidel, která se během konce letošního roku a roku 2014 ujmou vlády internetu. Vzdálenější budoucnost si troufají předpovídat jen milovníci sci-fi, víte jak nevyzpytatelný vývoj technologií je.

Zdroj: robime.it

Komentáře

Nahoru