Začíname s HTML5

Táto príručka je k dispozícii na stiahnutie vo formáte PDF zdarma. Stiahnite si Začíname s HTML5 teraz. Môžete to skopírovať a zdieľať so svojimi priateľmi a rodinou.

instagram viewer

a

Značky nie sú príliš skľučujúce a nemusíte sa báť, že vám v nejakom zdrojovom kóde dôjde k zašpineniu rúk.

Po druhé, táto príručka predpokladá, že viete, čo je CSS a ako to funguje. Neočakávame, že budete dizajnérmi génmi, ani neočakávate, že budete poznať celú špecifikáciu CSS z rúk. Mali by ste však byť schopní aplikovať styling na prvok na webovej stránke, mali by ste byť schopní prepojiť sa so súborom CSS a poznať rozdiel medzi ID a triedou a ako aplikovať styling na každý z nich.

Ak škrabete hlavu hore, nemajte obavy. Jednou z najlepších vecí v oblasti HTML a CSS je, že je to skutočne jednoduché. V skutočnosti má MakeUseOf neuveriteľný sprievodca XHTML Naučte sa hovoriť „internet“: Váš sprievodca xHTMLVitajte vo svete XHTML - Extensible Hypertext Markup Language - značkovací jazyk, ktorý umožňuje komukoľvek vytvárať webové stránky s mnohými rôznymi funkciami. Je to primárny jazyk internetu. Čítaj viac to vás rýchlo privedie na rýchlosť.

Po prečítaní tejto príručky by ste sa mali tiež pozrieť na nasledujúce články:

• 8 webových stránok s príkladmi kvalitného kódovania 8 najlepších webových stránok pre kvalitné príklady kódovania HTMLExistuje niekoľko úžasných webových stránok, ktoré ponúkajú dobre navrhnuté a užitočné príklady a návody na kódovanie HTML. Tu je osem našich obľúbených. Čítaj viac
• 6 blogov na sledovanie skvelých webových dizajnérov 6 najlepších blogov o webdizajne, ktoré je potrebné sledovať Čítaj viac

Potrebujete tiež moderný textový editor a prehliadač. Akákoľvek verzia programu Internet Explorer, ktorá je staršia ako IE 9 a niektoré staršie verzie Safari, Chrome a Firefox bude bojovať s mnohými funkciami, ktoré sú súčasťou HTML5, a môže vám zabrániť v sledovaní tohto viedol.

Preto vám odporúčame stiahnuť si moderný prehliadač. Odporúčam prehliadač Google Chrome a použijem ho v každom príklade.

Okrem toho je všetko, čo potrebujete, ochota učiť sa. Jo, a textový editor.

1.2 Textové editory pre vývoj webových aplikácií

Váš textový editor je to, čo budete používať na písanie kódu. Možno vás zaujíma, čo je textový editor.

Po prvé, nejde o textový procesor. Programy ako Microsoft Word a Apple's Pages sú úplne nevhodné na vývoj webových aplikácií. Dôvodom je skutočnosť, že k súborom HTML, CSS a Javascript pripájajú ďalšie informácie, vďaka ktorým je váš webový prehľadávač ťažko čitateľný.

Textový editor vystrelí znaky do textového súboru a nič iné. To vám umožní vytvárať súbory, ktoré nemajú žiadne ďalšie formátovanie, a je možné ich uložiť s ľubovoľnou príponou podľa vášho výberu.

Váš počítač sa už dodáva s jedným. Ak používate počítač so systémom Windows, program Poznámkový blok je textový editor, ktorý ste pravdepodobne nainštalovali.

V prípade počítačov Mac je situácia mierne odlišná. OS X sa náhodou dodáva so štyrmi rôznymi textovými editormi. Nazývajú sa Vim, Emacs, Pico a Nano. Na rozdiel od programu Poznámkový blok však všetci pracujú v termináli.

Toto je trochu zastrašujúce pre ľudí, ktorí sú na vývoji webových aplikácií noví, a nemali by ich využívať ľudia, ktorí sú na vývoji softvéru noví. V tejto príručke ich nebudeme používať. Ak sa však s vývojom softvéru a webov trochu spoľahnete, určite stojí za to sa na to pozrieť elán Top 7 dôvodov, prečo dať Vim Text Editor šancuCelé roky som vyskúšal jeden textový editor za druhým. Vy ste to pomenovali, skúsil som to. Každý z týchto editorov som používal viac ako dva mesiace ako svoj hlavný denný editor. Nejako ... Čítaj viac a Emacs. Sú to výkonné textové editory a keď ich zvládnete, ušetria vám veľa času.

V systéme Linux sa predvolený textový editor medzi distribúciami líši. Na Ubuntu je to pravdepodobné gedit gedit: Jeden z najdôležitejších textových editorov s plnými funkciami [Linux a Windows]Keď uvažujete o jednoduchých textových editoroch, prvá vec, ktorá sa vám môže dostať do hlavy, je aplikácia Poznámkový blok systému Windows. Robí presne to, čo uvádza jeho popis úlohy - jednoduché funkcie pre obyčajný text ... Čítaj viac , čo je celkom príjemný textový editor, ktorý nie je príliš odlišný od programu Poznámkový blok.

V tomto kurze však budeme písať náš kód pomocou troch rôznych nástrojov.

Prvý z nich je Vznešený text 2 Vyskúšajte Sublime Text 2 pre potreby editácie kódu naprieč platformamiSublime Text 2 je editor viacerých platforiem pre rôzne platformy, o ktorom som sa len nedávno dozvedel, a musím povedať, že na značku beta som skutočne ohromený. Môžete si stiahnuť celú aplikáciu bez zaplatenia centu ... Čítaj viac . Úprimne to nemôžem odporučiť dosť vysoko. Je dodávaný so všetkými vecami, ktoré uľahčujú život začínajúcemu vývojárovi. Po prvé, kód sa ľahšie prečíta vyfarbením určitých častí. Po druhé, umožňuje vám ľahko prepínať medzi súbormi a spravovať celé projekty súborov. To je ideálne na prepínanie medzi súbormi a na úpravu viacerých bitov kódu za behu.

Tretí je Konzola jazyka Javascript Zistite problémy s webom pomocou vývojových nástrojov prehliadača Chrome alebo FirebugAk ste doteraz sledovali moje návody jQuery, možno ste už narazili na problémy s kódom a neviete, ako ich opraviť. Keď čelíme nefunkčnému kódu, je to veľmi ... Čítaj viac ktorý je zabudovaný do prehliadača Google Chrome. To nám umožňuje písať Javascript a sledovať jeho okamžité spustenie a bude použité na vysvetlenie základných koncepcií programovania.

Druhou je webová stránka s názvom Codepen.io. Táto pozoruhodná webová stránka vám umožní v prehliadači kódovať HTML, CSS a Javascript a je zadarmo používať. Umožní vám to okamžite zobraziť vaše zmeny.

2. Sémantické značenie

V tejto kapitole sa dozviete viac o sémantickom značení a o tom, ako usporiadať kód na základe jeho obsahu.

Až donedávna bol HTML kód zvyčajne organizovaný pomocou

Toto fungovalo, ale bol tu priestor na zlepšenie. Problém s

Sémantické značenie je nová funkcia v HTML5. Prináša nové značky, ktoré fungujú rovnako ako značka „div“, ale slúžia na označovanie bežných častí stránky.

Ako teda fungujú? Zvážte nasledujúci kód.

V tomto kóde máme navigačnú lištu, nadpis a zoznam. Toto nie je príliš odlišné od väčšiny webových stránok, ktoré pravdepodobne navštívite, keď na to myslíte.

Pozrime sa na článok o MakeUseOf. Všimnite si, že časť stránky je vyhradená výlučne na navigáciu k iným článkom. Všimnite si tiež, že je tu ďalšia časť stránky, ktorá obsahuje slová, ktoré tvoria článok. V hornej časti stránky sa zobrazí hlavička obsahujúca logo MakeUseOf a niektoré ďalšie odkazy.

Keď o tom premýšľate, veľa konvencií sa riadi týmito konvenciami. Väčšina webových stránok má časť vyhradenú na navigáciu. Zvyčajne majú obsah. Pravdepodobne majú hlavičku.

Sémantické značky sú značky, ktoré vám umožňujú definovať časti webových stránok, ktoré sa bežne nachádzajú na väčšine webových stránok. Na stránku nepridávajú nič, ale umožňujú vám zoskupovať značky na základe ich obsahu a na tieto skupiny aplikovať štýly.

Takže si pamätáte ten kód, ktorý sme mali predtým? Pozrime sa na to s pridaním niektorých sémantických značiek.

Ako vidíte, kód je oveľa čitateľnejší. Viete, ktoré časti sú a ktoré nie sú nejasné. Je to dôležité, pretože uľahčuje písanie dobrého a čistého kódu. Ak by ste sa niekedy rozhodli stať sa profesionálnym web dizajnérom, stane sa to prvoradé - nikdy neviete, kto bude čítať prácu, ktorú produkujete.

Pozrime sa na niektoré ďalšie sémantické značky.

2.1 Oddiel

Sekcia je skutočne užitočná značka. Používa sa na zachytávanie obrovského množstva informácií a obsahu, ktoré sú označené nadpisom alebo nadpisom. Premýšľajte o tom ako o kapitole v knihe. Kapitola má názov a môže tiež obsahovať obrázky, schémy, grafy a slová. Na označenie všetkého by sa použila značka sekcie.

2.2 Článok

Značka článku sa používa na to, ako to vyzerá; Obsahujúci obsah, napríklad blogový príspevok alebo spravodajský príbeh. Tento obsah by sa mal dať oddeliť od zvyšku blogu a mal by mať koherentný zmysel.

2.3 Okrem

Táto značka je vyhradená pre obsah, ktorý súvisí, ale nie je neoddeliteľnou súčasťou webovej stránky. Môže to byť veľa faktov, ktoré sa týkajú spravodajského príbehu alebo biografie používateľa na blogu.

2.4 Záhlavie

Veľa webových stránok má v hornej časti stránky panel, ktorý obsahuje logo, niektoré informácie týkajúce sa webu a možno aj niektoré odkazy. V sémantickom značkovaní by ste toto všetko mali použiť na označenie hlavičky.

2,5 Nav

Tento prvok je vyhradený pre navigačnú časť vášho webu. To by obsahovalo odkazy na iné webové stránky alebo na iné webové stránky. V kontexte MakeUseOf by to mohla byť časť stránky, ktorá je pod hlavičkou.

2,6 päty

Táto značka je vyhradená pre spodnú časť stránky. Tu môžete uviesť nejaké kontaktné údaje, informácie o autorských právach, mapu alebo niektoré odkazy na svoju stránku „o mne“.

2.7 Otestujte sa

• Čo je sémantická značka a na čo sa používa?
• Vytváram webovú stránku a chcem používať sémantickú značku, ktorá obsahuje životopis o mne. Ktorý z nich používam?

3. formuláre

Ak ste už niekedy urobili trochu webdizajnu, pravdepodobne viete vytvoriť jednoduchý HTML formulár. Ak ste skutočne šikovný, pravdepodobne viete, ako vziať informácie, ktoré získate z formulára, a ako s tým niečo urobiť, ako napríklad vložiť ich do databázy.

Formy sú nesmierne dôležité. Sú základom väčšiny vecí, ktoré robíme na internete. Vždy, keď vo svojej obľúbenej sociálnej sieti vytvoríte aktualizáciu stavu, kúpite niečo od Amazonu alebo pošlete e-mail, pravdepodobne ste použili formulár HTML.

Pravdepodobne ste nevedeli, že spôsob vytvárania formulárov sa v HTML5 radikálne zmenil. Je to tiež výrazne lepšie. V tejto kapitole sa pozrieme na niektoré z úžasných vecí, ktoré môžete teraz urobiť, iba pomocou jednoduchého značkovania.

Čo je teda super na novom spôsobe, ako môžeme písať formuláre v jazyku HTML5? Po prvé, môžete zaistiť, že niektoré polia musia byť vyplnené, aby sa mohli odoslať, len zmenou označenia samotného formulára. Okrem toho už na to nemusíte písať hory JavaScriptu alebo PHP. Je to triviálne ľahké.

Po druhé, môžete zabezpečiť, aby používatelia mohli do formulára odoslať iba určité typy informácií. Predpokladajme teda, že máte webovú stránku pre svoj zoznam adries a chcete, aby ľudia mohli odosielať iba skutočné e-mailové adresy? Môžete to urobiť jednoducho pomocou HTML5. Je to skutočne neuveriteľne silné.

Po tretie, môžete vylepšiť vzhľad svojich formulárov tým, že určitým poliam priradíte zástupný symbol. Vďaka tomu budú výrazne intuitívnejší, pretože svojim používateľom môžete ukázať príklad toho, čo od formulára očakávate.

3.1 Vylepšenie formulára

Pozrime sa na formulár a uvidíme, ako ho môžeme vylepšiť.

Táto forma je celkom základná. Prevezme meno, e-mail a obľúbenú farbu a potom to umožní používateľovi odoslať. Neobsahuje žiadne overenie toho, aké informácie sa doň vložia, a nič nebráni používateľom v odoslaní tohto formulára pomocou prázdnych polí. Zmeňte to všetko.

Prvá vec, ktorú sa chystáme urobiť, je preto, aby pole e-mailu obsahovalo iba e-mail. Bola to skutočne dosť náročná úloha, pretože musíte vytvoriť najrôznejšie tajomné regexové kódy. No, už nič viac. Musíte jednoducho zmeniť typ vstupu z „textového“ na „e-mailového“. Ak sa pokúsite odoslať tento formulár s bláznivým výrazom, sťažuje sa a trvá na tom, že odošlete e-mail.

3.2 Typy vstupov a vzory

Existujú aj iné typy vstupov, ktoré môžete požadovať. Patria sem telefónne čísla, webové adresy, vyhľadávacie formuláre a dokonca aj výbery farieb! Keďže sa jazyk HTML5 neustále vyvíja, je rozumné, že čoskoro budeme môcť určiť ďalšie typy vstupov.

Ďalej, pre veci, ako sú telefónne čísla, ktoré sa líšia v závislosti od lokality, môžete zadať vzory pre vstupy. Sú vytvárané pomocou niečoho, čo sa nazýva „regulárne výrazy“ a sú dosť komplikované, ale nesmierne výkonné.

Budeme tiež chcieť poskytnúť príklad e-mailu v našom odbore, aby používateľ nemal nejasnosti o tom, čo musí odoslať. Je to skutočne ľahké. Stačí vytvoriť nový atribút „zástupný symbol“ pomocou vzorovej e-mailovej adresy.

Zabezpečíme, aby sa vyžadovalo pole „Obľúbená farba“. V poslednej zátvorke (>) v značke vstupu pre e-mail jednoducho napíšte „povinné“. To je všetko. Ak sa teraz pokúsite odoslať formulár bez hodnoty, zobrazí sa chybová správa.

Na týchto chybových správach je skutočne neuveriteľné, že používateľ ich nemusí písať ani písať, aby ich vytvoril. Stačí zmeniť pole tak, aby bolo požadované, a bude to fungovať. Vďaka tomu je možné ich podľa potreby prispôsobiť.

Bol to neuveriteľne krátky úvod o sile formulárov v HTML5. Ak si chcete prečítať viac, odporúčame vám navštíviť tieto odkazy.

Ďalšie čítanie:

• Triky CSS - Napíšeme sémantické značenie
• Doktor HTML5 - Hovorme o sémantike

3.3 Otestujte sa

Máte budúci týždeň narodeniny a vy si chcete vytvoriť registračný formulár, aby ste vedeli, koľko koláča musíte vytvoriť. Otvorte textový editor a vytvorte formulár s nasledujúcimi poľami.

• názov
• Emailová adresa
• Telefónne číslo
• alergie

Skontrolujte, či sú polia pre meno, e-mail a telefónne číslo povinné, a či sú polia E-mail a telefónne číslo nastavené s typmi vstupu „e-mail“ a „tel“. Vytvorte zástupný symbol pre alergické pole s hodnotou „peľ, vajíčka, kvízy“.

Hrajte sa s týmto formulárom. Skúste zadať povinné polia ako prázdne a skúste do poľa telefónneho čísla vložiť nečíselné znaky. Do e-mailového poľa zadajte niečo, čo nie je e-mailová adresa. Čo sa stane?

4. Media

Bývaly časy, keď ste na webovú stránku mohli vložiť nejaké video alebo zvuk iba pomocou Flash, Shockwave alebo SilverLight.

To nebolo ideálne. Po prvé, žiadny z týchto rámcov nefungoval tak dobre na mobilných zariadeniach. Jednoducho neboli vybavené na moderný svet smartfónov a tabletov.

Okrem toho išlo o proprietárne formáty. Výsledkom je, že používatelia systémov Linux a OS X by mohli získať celkom kvalitný zážitok alebo im dokonca zabrániť konzumovať mediálne služby, pretože ich platforma nebola k dispozícii.

Nakoniec mali sklon k pomalosti. Keby ste boli na počítačoch s nedostatočným výkonom alebo staršom, nemali by ste dobrý zážitok zo sledovania videa pomocou týchto rámcov. Flash bol obzvlášť notoricky známy za to.

4.1 Ako HTML5 robí obraz a zvuk úžasným

HTML5 to zmenilo tým, že umožnilo webovým vývojárom zahrnúť do svojich webových stránok video a zvuk pomocou niekoľkých riadkov kódu. Pracuje na mobilných zariadeniach a funguje na každom modernom webovom prehliadači.

Výsledkom je, že veľké spoločnosti ako YouTube, Vimeo a Netflix využívajú revolúciu HTML5. Prečo sa k nim nepripojíte?

4.2 Všetko o kodekoch

V tejto kapitole sa naučíte, ako využiť výkon HTML5 na zahrnutie zvuku a videa do svojich webových stránok.

Najprv budem musieť začať s upozornením. Video HTML5 môžete používať v každom modernom webovom prehľadávači, v každom webovom prehliadači však nefunguje rovnako. Kodeky používané každým prehliadačom sa líšia. V prehliadači Internet Explorer ste obmedzení na používanie videa MP4. Prehliadač Chrome je o niečo veľkorysejší a umožňuje vám používať video WebM, MP4 a Ogg Theora. Opera je trochu reštriktívnejšia a umožňuje vám používať iba video Theora a WebM.

V dôsledku toho musíte byť trochu dômyselní v tom, ako vkladáte video na svoju webovú stránku. Pozrime sa, ako to funguje.

4.3 Počnúc videom

Najprv musíte vytvoriť nejaké otváranie a zatváranie

Keď čakáte na načítanie videa, osoba, ktorá navštevuje vaše stránky, uvidí obrázok, ktorý súvisí s videom. Ak to chcete urobiť, stačí dať svojim videom prívlastok „plagát“ s hodnotou obrázka, s ktorým chcete prepojiť. Malo by to vyzerať takto.

Ďalšiu vec, ktorú sa chystáme urobiť, je vytvoriť rezervu. Čo to znamená? Predpokladajme teda, že tam používate jeden zo starších, menej úžasných prehliadačov. Veľa z týchto starších prehliadačov nepodporuje video HTML5, a preto nemôže prehrávať video HTML5. Budete im chcieť nechať správu, v ktorej ich informujú o tom, že chcú inovovať svoj prehliadač, a pokiaľ tak neurobia, nebudú si môcť pozrieť vaše video.

Stačí len napísať správu do svojich značiek videa. Nič iné sa nevyžaduje. Keď to urobíte, zostane vám nejaký kód, ktorý vyzerá takto.

Teraz pridajme nejaké video. Budem to testovať v prehliadači Google Chrome, takže budem odkazovať na film MP4. Za týmto účelom vytvorím zdrojovú značku a pridelím jej atribút src, ktorý má hodnotu videa, ktoré chcem zahrnúť.

Moja stránka je teraz pripravená na otvorenie v mojom webovom prehliadači. Prepojil som sa na film, ktorý je skutočne, skutočne veľký a ako výsledok, keď sa otvorí, vidím len plagát.

4.4 Pridanie zvuku

Zvuk je možné vložiť na vašu webovú stránku spôsobom, ktorý veľmi pripomína spôsob, akým sme na našu stránku vložili video.

Po prvé, jeden vytvorí niekoľko zvukových značiek. Tieto zvukové značky obsahujú atribút „ovládacích prvkov“. To dáva užívateľovi, ktorý navštívi stránku, možnosť pozastaviť, prehrávať pretočiť dozadu a rýchlo preposlať prehrávaný zvuk.

Potom do zdrojového súboru MP3, ktorý chcete prepojiť, pridáte zdrojovú značku. Pokiaľ ide o kompatibilitu kodekov, nemusíte sa toho vôbec veľa obávať. Najnovšie webové prehliadače dokážu prehrávať zvuk vo formáte MP3, hoci je dobrou praxou zahrnúť aj súbor „.ogg“ a „.wav“ - len pre prípad.

Nakoniec si môžete vytvoriť záložku pre staršie prehliadače. To sa vykonáva rovnakým spôsobom, akým ste vytvorili záložnú reklamu pre svoje video.

Konečný výsledok vyzerá trochu takto.

Keď to otvoríte vo webovom prehliadači, malo by to vyzerať trochu takto.

4.5 Otestujte sa

• Aký je účel vytvorenia plagátu vo vašich značkách videa?
• Aké kodeky nemôžete použiť v programe Internet Explorer?
• Ak by som chcel možnosť pozastaviť nejaký zvuk, aký atribút by ste pridali k svojej značke „zvuk“?

Ďalšie čítanie:

• Video Rocks HTML5

5. Transformácie a animácie CSS3

CSS sa tradične používalo na manipuláciu s rozloženie a dizajn webovej stránky 5 detských krokov k učeniu CSS a stať sa čarodejníkom Kick-Ass CSSCSS je najdôležitejšou webovou stránkou zmien, ktorá sa zaznamenala za posledné desaťročie, a pripravila pôdu pre oddelenie štýlu a obsahu. XHTML definuje moderne sémantickú štruktúru ... Čítaj viac . To je stále pravda, ale v poslednej iterácii získala schopnosť zvládnuť animácie a transformácie prvkov a obrázkov.

Ľudia s CSS3 urobili niekoľko úžasných vecí, od vytvorenia digitálnych hodín po napísanie úplnej hry Pong. Niekto to dokonca použil na opätovné vytvorenie úvodných kreditov pre Mad Men. Je to skutočne výkonná technológia a keď je zvládnutá, môže sa použiť na pridanie úžasnej úrovne funkčnosti vašej webovej stránky.

V tejto kapitole vám ukážem stručne úvod do CSS3 Top 5 stránok, ktoré sa majú naučiť CSS online Čítaj viac a ukážeme vám, ako na svoju stránku pridať úžasné efekty.

Najskôr prejdite na stránku codepen.io a vytvorte nové pero. Budeme to používať ako náš pracovný priestor počas trvania tejto kapitoly.

Začneme jednoduchým spôsobom a vytvoríme jednoduchú transformáciu obrazu, ktorá pri vznášaní otočí obrázok o 3 stupne. Najskôr vytvorte značku div a dajte jej ID. V nižšie uvedenom príklade som mu dal ID „muo“.

5.1 CSS Hover Effects

Do tohto oddielu div zahrňte obrázok podľa vášho výberu. Priložil som kópiu loga pre MakeUseOf.

Potom budete musieť napísať niektoré pravidlá štýlov. V nižšie uvedenom príklade som vytvoril horný a ľavý okraj, aby som dal obrázku priestor. Zahrnul som aj pravidlo zvedavých štýlov, ktoré začína znakom #muo: hover. Čo je to?

Keď k pravidlu so štýlmi pripojíte písmeno „vznášať sa“, či už ide o prvok, ID alebo triedu, prehliadaču efektívne poviete, aby tento štýl aplikoval, keď myš ovláda prvok. Docela v pohode, však?

V rámci pravidla #muo: hover máme riadok s textom „-webkit-transform: rotate (3deg)“. Ako ste si istí, uhádli ste, prehliadaču to hovorí, aby otočil prvok del o tri stupne.

Je však potrebné poznamenať, že táto značka funguje iba v prehliadačoch Chrome a Safari. Ak chcete, aby váš kód pracoval v prehliadačoch Firefox alebo Internet Explorer 9 a novších verziách, budete chcieť zmeniť súbor CSS tak, aby obsahoval nasledujúce riadky.

Teraz, keď umiestnite kurzor myši na obrázok, vyzerá to takto:

5.2 Použitie CSS3 na zmenu veľkosti obrázkov

Tak prečo tam zastaviť? Vedeli ste, že na zväčšenie alebo zmenšenie obrázka môžete použiť aj metódu transformácie. Zmeňte náš súbor CSS tak, aby obsahoval nasledujúce riadky.

Ako vidíte, teraz sme zahrnuli nové pravidlo transformácie, ale teraz mu hovoríme, aby urobil niečo, čo sa nazýva „mierka“. Toto je skutočne krásny spôsob, ako zväčšiť veľkosť obrázka. Trvá to dva parametre (čísla, ktoré vidíte medzi týmito zátvorkami) a predstavujú sumu, o ktorú zväčšujete výšku a šírku prvku.

Ako vidíte z kódu, veľkosť loga MakeUseOf div sa zvýši o 50%. Tieto diela môžete vyskúšať tak, že na ne umiestnite kurzor myši. Uvidíte, že logo „MakeUseOf“ je teraz výrazne roztiahnuté.

Bol to veľmi jemný úvod k transformáciám CSS3. Napriek tomu, že CSS3 je skutočne úplne nový, teraz môžete vidieť, že s ním môžete robiť veľa veľmi zaujímavých manipulácií.

5.3 Vyskúšajte sami seba

• Ako použijeme styling na prvok pri vznášaní sa?
• Ako otočíte obrázok pomocou CSS3?
• Ako zmeníte mierku obrázka pomocou CSS3?
• Čo sa stane, ak prejdete metódou transformácie „prekladať (50 pixlov, 50 pixlov)“?

Ďalšie čítanie:

HTML5 Rocks - Prezentácia

6. Stačí dosť Javascriptu

Ak chcete vo svojom webovom prehliadači použiť skript, musíte ho použiť Javascript Čo je to JavaScript a ako to funguje? [Vysvetlenie technológie] Čítaj viac . Bohužiaľ, neexistujú dva spôsoby. Je to jazyk, ktorý má veľa fanúšikov 5 Rozsiahle možnosti knižnice kódov JavaScript pre vývojárov Čítaj viac , a tiež mnoho kritikov. Ako jazyky idú, má veľa bradavíc. Existuje dôvod, prečo sa najpozoruhodnejšia kniha o jazyku nazýva „Javascript: The Good Parts“.

Nebude možné vás naučiť, ako používať Javascript v jednej kapitole. To tu nie je cieľom. Cieľom je naučiť vás dosť Javascriptu, aby ste pochopili nasledujúcu kapitolu, ktorá sa týka použitia technológie s názvom Canvas na vytváranie kresieb a animácií.

6.1 Prístup do konzoly

Na tento účel použijeme konzolu Javascript, ktorá je zabudovaná do každej kópie prehliadača Google Chrome. K tomu získate prístup kliknutím pravým tlačidlom myši na ľubovoľnú webovú stránku a následným stlačením tlačidla „Skontrolovať prvok“. Potom kliknite na „Konzola“. Mali by ste to vidieť.

Tradične je prvým programom, ktorý píše každý začínajúci vývojár, program „Hello World“. Je to jednoduchý program, ktorý tlačí frázu „Ahoj svet“, a nič viac. Do konzoly napíšte ‘console.log („ Ahoj svet! “) ;.

6.2 Váš prvý program

Čo presne sme urobili? Najprv sme nazvali niečo, čo sa nazýva 'console.log'. Toto je kúsok kódu, ktorý je zabudovaný v počítači a jednoducho vytlačí všetko, čo mu poviete. Potom sme k nemu pripojili niektoré zátvorky a do dvojitých úvodzoviek „Ahoj svet“ sme zaradili úvodzovky. Nazýva sa to „odovzdávanie argumentov“ a typ argumentu, ktorý sme odovzdali, sa nazýva reťazec. Kedykoľvek chcete urobiť niečo, čo sa týka písmen a špeciálnych znakov, jednoducho musíte použiť jednoduché úvodzovky. Ak však chcete robiť čokoľvek s použitím čísel, zvyčajne nemusíte používať úvodzovky, ako je to uvedené nižšie.

6.3 Premenné v JavaScripte

Premenné môžete odovzdať aj do adresy „console.log“. Premenné znejú komplikovane, ale všetko, čo v skutočnosti sú, je priestor na ukladanie informácií. Často ide o čísla alebo písmená. Aby ste to dosiahli, deklarujete premennú pomocou kľúčového slova „var“, pomenujete ju a potom so znamienkom rovná sa jej priradíte hodnotu. Vytvorím teda premennú s názvom „ahoj“ a potom jej priradíme hodnotu „Ahoj svet!“. Potom to pošlem do console.log.

Všimnite si, ako som neprešiel „ahoj“ na konzolu.log pomocou úvodzoviek. Je to preto, že som chcel tlačiť na konzolu obsah „ahoj“ a nie „ahoj“ sám.

6.4 Aké funkcie fungujú

Môže to byť trochu únavné prepisovanie toho istého kusa kódu znova a znova, takže z tohto dôvodu píšeme funkcie. Funkcie sú jednoduchšie, ako si myslíte. Všetko, čo sú, sú kúsky kódu, ktoré môžeme znova použiť bez toho, aby sme ten istý kód prepisovali znova. Nižšie sme vytvorili funkciu s názvom „sup“ a predávame ju argumentom v zátvorkách, ktorý sa potom zaznamená na obrazovku. Hovoríme „sup“ poslaním do konzoly „sup“ („Ahoj svet!“); “.

6.5 Opakovanie akcie so slučkou typu „For“

Predpokladajme, že ste chceli vykonať rovnakú akciu viackrát. Z tohto dôvodu by sme použili slučku „pre“. Spočiatku vyzerajú strašidelne, ale hneď ako ich pochopíte, sú také ľahké. Začnete písaním „for ()“.

V týchto zátvorkách chceme vytvoriť premennú, ktorá počíta, koľkokrát sme vykonali akciu. Dostaneme teda niečo, čo vyzerá takto „(var i = 0;)“.

Potom chceme skontrolovať, či som nespĺňal podmienku. V tomto prípade chceme vidieť, že je menej ako 10. Takže za bodkočiarkou píšeme „i <10“. Naša slučka teraz vyzerá takto: ‘pre (var i = 0; i <10;).

Ak je i menšie ako 10, chceme ho pridať po jednom a potom niečo urobiť. Dali sme teda „i = i + 1“. Naša slučka je takmer hotová: ‘pre (var i = 0; i <10; i = i + 1) “. Všimnite si, ako posledná časť nemá bodkočiarku.

Potom budeme chcieť urobiť akciu. Takže po posledných zátvorkách napíšeme pár zložených zátvoriek a medzi nimi ideme do konzoly.logovať hodnotu i. Tým sa vytvorí počítadlo, ktoré bude počítať až deväť.

Posledné dva konštrukčné programy, na ktoré sa zameriame, sú príkazy „if“ a „while“.

6.6 Ak sú Vyhlásenia

Príkaz „if“ vykoná akciu, ak sú splnené určité kritériá. Vo výstavbe sú podobné slučkám typu „for“ a fungujú nasledovne. Predpokladajme, že máte premennú s názvom „cheeseburgery“ a chcete zistiť, či má hodnotu „chutné“. Ak áno, chcete sa prihlásiť „yum, cheeseburgers“ na obrazovku. Za týmto účelom by ste napísali niečo také.

Všimnite si, ako som napísal text „(cheeseburgery ==„ chutné “)“. Na kontrolu rovnosti použijete dvojité alebo trojité rovnanie a jednoznačné priraďovanie hodnoty.

6.7 Kým slučky

Nakoniec slučka „while“ vykoná akciu, keď sú splnené kritériá. Predstavte si teda, že sa chcete prihlásiť „mňam, cheeseburgery“, zatiaľ čo cheeseburgery sú rovnako chutné. Za týmto účelom by ste napísali nasledujúce.

Je potrebné poznamenať, že by to vstúpilo do nekonečnej slučky, a vy by ste sa mali vyvarovať konania na hodnote, ktorá sa pravdepodobne nezmení. Môže to spôsobiť zablokovanie prehľadávača alebo nefunkčnosť kódu.

Ako som už spomínal, toto bol veľmi krátky úvod do programovacích konštruktov v Javascripte. Odporúčame vám prečítať si viac o tomto fascinujúcom, hoci obrovskom predmete.

6.8 Otestujte sa

• Chcem odpočítať od 30. Napíšte slučku „for“, ktorá by to urobila.
• Chcem vytvoriť premennú s názvom „makeuseof“ a dať jej hodnotu „awesome“. Ako sa to robí?
• Chcem vytvoriť funkciu, ktorá pri volaní vytlačí „MakeUseOf Is Awesome“. Napíšte túto funkciu.

Ďalšie čítanie:

• „Javascript: dobré časti“ autor: Douglas Crockford
• Sprievodca Javascriptom MDN

7. Kreatívne plátno

Canvas je skvelá technológia, ktorá vám umožňuje kresliť obrázky a vytvárať animácie bez toho, aby ste museli používať Flash alebo Silverlight. Ľudia ho použili na vytváranie bizarných a úžasných vecí, vrátane simulátora sušiča vlasov a rôznych videohier. Je to úžasná a nepochopiteľne veľká technológia. V tomto tutoriále vám ju stručne predstavím.

Je potrebné poznamenať, že Canvas funguje iba v moderných webových prehľadávačoch. Ak používate starú verziu prehliadača IE, Chrome alebo Firefox, pravdepodobne nebudete môcť postupovať podľa tejto kapitoly. Ak je to váš prípad, mali by ste zvážiť stiahnutie najnovšej verzie prehliadača Google Chrome, ktorá bola webovým prehliadačom, v ktorom som tento výukový program vytvoril.

7.1 Začíname pracovať s plátnom

Najprv musíte otvoriť webový prehľadávač a prejsť na stránku codepen.io. Vytvorte nové pero.

Teraz budeme musieť deklarovať prvok plátna. Vytvorte dve úvodné a záverečné značky Canvas. V nich by ste mali odovzdať tri atribúty. Toto je šírka a výška prvku Canvas spolu s ID, ktoré mu dávate. Rovnako ako predtým, keď ste vložili nejaké video, mali by ste zahrnúť núdzovú správu.

Teraz budeme chcieť napísať nejaký kód Javascript, ktorý niečo pritiahne na obrazovku. Začíname základné a vytvoríme jednoduchý červený štvorec.

Chystáme sa vytvoriť premennú (nazval som ju „demo“), potom vyberte prvok plátno a priraďte ho tejto premennej. Na tento účel použite document.getElementByID () a zadajte ID prvku, ktorý chcete vybrať.

Druhý riadok v našom skripte vytvára ďalšiu premennú nazvanú „context“ a potom na ňu volá demo.getContext („2d“). Prehliadaču to povedalo, že budeme pracovať na 2dom obrázku a potom prejdeme potrebnými funkciami, ktoré potrebujeme, aby sme sa dostali na obrazovku.

Tretí a štvrtý riadok sú tie, ktoré skutočne kreslia na obrazovku. Tretí riadok vyplní obdĺžnik červenou farbou, zatiaľ čo štvrtý riadok volá fillRect, ktorý ho umiestni a definuje jeho dĺžku a šírku.

To však nie je pôsobivé. Urobme niečo trochu vyspelejšie a pomocou kúzla Javascript a Canvas vytvoríme MakeUseOf úplne nové logo.

7.2 Tvary a text

Odstráňte náš štvrtý riadok a nahraďte ho tým, ktorý umiestni náš obdĺžnik do ľavého horného rohu a roztiahne ho po dĺžke nášho plátna.

Prvé dva argumenty definujú, kam chceme umiestniť os x a y tvaru. Teraz nastavte tieto dve možnosti na „0“. Tretí argument sa týka šírky tvaru. Nastavme to na „200“ a potom štvrtý argument ponecháme na „50“. Teraz by ste mali mať niečo, čo vyzerá trochu takto.

Je to skvelý začiatok, ale vôbec sa nezmieňuje o MakeUseOf. Preto pridáme nejaký text. Vytvorme premennú obsahujúcu „makeuseof“ a túto premennú nazveme „MakeUseOf“.

Potom budeme chcieť vytvoriť ďalšiu kontextovú premennú. Nazvite to „kontext2“ a uistite sa, že je 2d. To je to, čo použijeme na napísanie nášho textu.

Chceme, aby náš text bol modrý a aby prekryl náš červený štvorec. Tak, ako predtým, budeme ju chcieť dať výplň typu „modrá“. Teraz si vyberieme charakteristiky nášho textu. Chceme, aby mal formát 20px, tučné písmo a písmo Arial. Nazývame font na context2 a priraďuje mu hodnotu „bold 20px arial“.

Pretože chceme, aby tento text prekryl naše predchádzajúce červené pole, musíme zavolať „textBaseLine“ na context2 a dať mu najvyššiu hodnotu. Po dokončení tohto postupu nazveme „fillText“ v kontexte 2 a odovzdáme mu premennú obsahujúcu náš text a súradnice x a y, do ktorých chceme umiestniť náš text. Konečný výsledok nášho kódu je niečo také.

Obrázok vytvorený kódom vyzerá takto.

7.3 Slovo na plátne

Aj keď to bol neuveriteľne základný úvod do Canvas, mali by ste pochopiť, že je to neuveriteľne veľká technológia a neuveriteľne výkonná technológia na zavedenie systému. Táto príručka jednoducho predstavila úvod do tvorby grafiky pomocou tejto novej technológie.

7.4 Vyskúšajte sami seba

• Pridajte k vytvorenému obrázku nasledujúci slogan: „Najlepšia technická stránka vôbec!“
• Vytvorte slučku typu „for“, ktorá bude prebiehať desať iterácií. Uvidíte, či môžete kreslenie presunúť po plátne po pixeloch naraz.
• Zabaľte svoju kresbu do funkcie. Čo sa stane, ak tomu nenazvete?

Ďalšie čítanie:

• HTML5 Rocks - integrácia plátna do vašich webových aplikácií.
• Treehouse - Ako nakresliť plátno

8. Kam ďalej?

Ďakujem vám za prečítanie môjho neuveriteľne stručného sprievodcu novými technológiami nachádzajúcimi sa v jazyku HTML5. Je nepopierateľné, že HTML5 je technológia budúcnosti. Prijíma ho väčšina technológií, pretože sa dá ľahko písať a je výkonný nad mieru. Ľudia s tým robia stále neuveriteľné veci a nepochybujem o tom, že v budúcnosti budete jedným z týchto ľudí. Je mi cťou, že som bol súčasťou vašej cesty do divokého a nádherného sveta HTML5.

Žiadam vás, aby ste sa stále učili. Pokračujte v kódovaní. Pokračujte vo zvyšovaní úrovne a zdokonaľovaní av žiadnom momente nebudete používať technológie, ktoré boli predstavené v tomto krátkom sprievodcovi, na vytváranie úžasných produktov.