Home-theater-designers
Obsah
§5 – CSS3 Transformácie a animácie
1. Úvod
Počuli ste o tom: HTML5. Každý to používa. Hovorí sa o ňom ako o záchrancovi internetu, ktorý umožňuje ľuďom vytvárať bohaté a pútavé webové stránky bez toho, aby sa uchýlili k používaniu programov Flash a Shockwave.
Ale čo to vlastne je?
Na to nie je ľahké odpovedať. V tomto tutoriále HTML5 sa pokúsime poskytnúť niekoľko odpovedí. HTML5 sa používa na popis skutočne rozmanitej skupiny vecí. Je to štandard písania webových stránok. Je to zbierka API. Je to nový spôsob pridávania interaktivity na webové stránky.
HTML5 je všetko a ešte oveľa viac. O čom teda táto kniha je?
V tomto tutoriále HTML5 budem predpokladať, že ste sa v určitom bode dotkli HTML a CSS. Možno ste vytvorili vlastnú tému programu Wordpress alebo ste v minulosti upravili rozloženie MySpace. Možno ste si prečítali vlastného sprievodcu XHTML od MakeUseOf. Ide o to, že predpokladám, že sa v webovej stránke vyznáte a že to, o čom diskutujeme v tejto príručke, vám nebude príliš cudzie.
Cieľom tejto príručky nie je naučiť vás celý jazyk HTML5. To by bolo úplne mimo rozsah tejto knihy. Cieľom je poskytnúť mierny úvod do týchto úžasných nových webových technológií a ukázať vám niekoľko skvelých spôsobov, ako ich začleniť do vašich webových stránok.
Prečo by ste sa chceli naučiť HTML5?
Je to férová otázka. Je vo svete smartfónov a aplikácií skutočne dôležité naučiť sa programovať webové stránky?
Verte či neverte, je naozaj bežné písať aplikácie pre smartfóny pomocou technológií HTML5. Aplikácia Facebook pre Android bola donedávna písaná pomocou HTML5, CSS a Javascript.
Blackberry je ďalšou významnou spoločnosťou, ktorá má obrovský záujem o HTML5. Je to zrejmé z najnovšej iterácie ich mobilného operačného systému Blackberry OS 10, kde aktívne povzbudzujú vývojárov k vývoju aplikácií pre ich telefóny pomocou webových technológií.
Nové smartfóny s operačným systémom Firefox OS bežia tiež výlučne na aplikáciách HTML5. Fungujúca znalosť HTML5 je v dnešnej atmosfére smartfónov zásadná.
Učenie HTML5 je navyše dobré pre vašu kariéru. Neveríš mi? Informuje o tom server Indeed.com „Priemerná ročná mzda vývojára HTML5 je závratných 89 000 dolárov. Keďže stále viac spoločností mení svoje webové stránky na používanie technológií HTML5, vyhľadávajú sa vývojári, ktorí poznajú zásobník HTML5 - teraz viac ako kedykoľvek predtým.
1.1 Predpoklady
Tento tutoriál HTML5 predpokladá niekoľko vecí. Po prvé to predpokladá, že viete, ako web funguje, a viete, ako vytvoriť základnú webovú stránku. Mali by ste byť schopní skombinovať niektoré prvky HTML dohromady a byť schopný prezentovať niektoré informácie vo webovom prehliadači. Vidieť a
tagy nie sú príliš skľučujúce a nebojíte sa, že si v nejakom zdrojovom kóde zašpiníte ruky.
Za druhé, táto príručka predpokladá, že viete, čo je to CSS a ako funguje. Nečakáme, že budete geniálni dizajnéri, a taktiež sa neočakáva, že by ste poznali celú špecifikáciu CSS z chrbta vašej ruky. Mali by ste však byť schopní použiť štýl na prvok na webovej stránke, byť schopní prepojiť súbor CSS a poznať rozdiel medzi ID a triedou a spôsob použitia štýlu na každý z nich.
Ak si pri vyššie uvedenom škrabete hlavu, nebojte sa. Jedna z najlepších vecí na HTML a CSS je, že je to naozaj veľmi jednoduché. V skutočnosti má MakeUseOf neuveriteľného sprievodcu XHTML, ktorý vám pomôže dosiahnuť skutočne vysokú rýchlosť.
Po prečítaní tejto príručky sa možno budete chcieť pozrieť aj na nasledujúce články:
- 8 webových stránok s príkladmi kódovania kvality
- 6 blogov, ktoré treba sledovať, skvelých webových dizajnérov
Budete tiež potrebovať 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 zápasiť s mnohými funkciami, ktoré sú súčasťou HTML5, a môže vám brániť v dodržiavaní tejto príručky.
V dôsledku toho vám odporúčame stiahnuť si moderný prehliadač. Odporúčam prehliadač Google Chrome a budem ho používať v každom prípade.
Okrem toho budete potrebovať iba ochotu učiť sa. A textový editor.
1.2 Textové editory pre vývoj webových aplikácií
Na napísanie kódu použijete svoj textový editor. Možno sa pýtate, čo je to textový editor.
Po prvé, nie je to textový procesor. Programy ako Microsoft Word a Apple's Pages sú úplne nevhodné na vývoj webových aplikácií. Dôvodom je, že k vašim súborom HTML, CSS a Javascript pripájajú ďalšie informácie, ktoré vášmu webovému prehliadaču sťažujú čítanie.
Textový editor vystreľuje 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 ich možné uložiť s ľubovoľnou príponou, ktorú si vyberiete.
Váš počítač je už dodávaný s jedným. Ak používate počítač so systémom Windows, program Notepad je textový editor, ktorý ste pravdepodobne nainštalovali.
Na počítačoch Mac je situácia mierne odlišná. OS X sa dodáva so štyrmi rôznymi textovými editormi. Hovorí sa im Vim, Emacs, Pico a Nano. Na rozdiel od programu Poznámkový blok však všetky fungujú v termináli.
To je trochu zastrašujúce pre ľudí, ktorí sú vo vývoji webových aplikácií noví, a nemali by ich používať ľudia, ktorí sú vo vývoji softvéru noví. V tejto príručke ich nebudeme používať. Keď však získate väčšiu dôveru v vývoj softvéru a webu, rozhodne stojí za to sa pozrieť na Vim a Emacs. Oba sú výkonnými textovými editormi a po zvládnutí vám môžu ušetriť strašne veľa času.
V systéme Linux sa predvolený textový editor medzi distribúciami líši. Na Ubuntu je to pravdepodobne Gedit, čo je celkom príjemný textový editor, ktorý sa príliš nelíši od programu Poznámkový blok.
V tomto kurze však budeme písať náš kód pomocou troch rôznych nástrojov.
Prvým je Sublime Text 2. Úprimne to nemôžem dostatočne odporučiť. Dodáva sa so všetkým, čo uľahčuje život začínajúcim vývojárom. Po prvé, zafarbením určitých častí bude váš kód čitateľnejší. Za druhé, umožňuje vám ľahké prepínanie medzi súbormi a správu celých projektov súborov. Je to ideálne na prepínanie medzi súbormi a úpravu viacerých bitov kódu za behu.
Treťou je konzola Javascript, ktorá je vstavaná v prehliadači Google Chrome. To nám umožňuje napísať Javascript a vidieť, že sa okamžite spustí a bude slúžiť na vysvetlenie základných konceptov programovania.
Druhým je webová stránka s názvom Codepen.io. Táto pozoruhodná webová stránka vám umožní kódovať HTML, CSS a Javascript v prehliadači a je voľne použiteľná. Umožní vám to tiež okamžite vidieť zmeny.
2. Sémantické značenie
V tejto kapitole sa dozviete o sémantickom značení a o tom, ako organizovať kód na základe jeho obsahu.
Až donedávna bol HTML kód spravidla organizovaný pomocou značiek. To vám umožnilo vytvoriť skupinu prvkov a potom na tieto prvky použiť štýl.
Fungovalo to, ale bolo čo zlepšovať. Problém so značkami bol v tom, že neboli sémantické. Div v skutočnosti nič neznamená, naozaj.
Sémantické značenie je nová funkcia v HTML5. Prináša nové značky, ktoré fungujú rovnako ako značky „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úsku kódu máme navigačný panel, názov a zoznam. Keď sa nad tým zamyslíte, nie je to príliš odlišné od väčšiny webových stránok, na ktorých budete pravdepodobne niekedy pokračovať.
odstrániť súbory aktualizácie systému Windows 8
Pozrime sa na článok o MakeUseOf. Všimnete si, že existuje časť stránky, ktorá je vyhradená výlučne na navigáciu v iných článkoch. Tiež si všimnete, že je tu ďalšia časť stránky, ktorá obsahuje slová tvoriace článok. V hornej časti stránky uvidíte hlavičku obsahujúcu logo MakeUseOf a niektoré ďalšie odkazy.
Keď sa nad tým zamyslíte, veľa webových stránok dodržiava tieto konvencie. Väčšina webových stránok má časť, ktorá je vyhradená pre navigáciu. Obvykle majú množstvo obsahu. 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 nič nepridávajú, ale umožňujú vám zoskupovať značky na základe ich obsahu a v týchto skupinách používať štýly.
Pamätáte si ten kód, ktorý sme mali predtým? Pozrime sa na to s pridaným nejakým sémantickým značením.
Ako vidíte, kód sa číta oveľa jednoduchšie. Viete, ktoré časti sú ktoré a nie je tam žiadna nejednoznačnosť. Je to dôležité, pretože to uľahčuje písanie dobrého a čistého kódu. Ak by ste sa niekedy rozhodli stať sa profesionálnym webovým dizajnérom, bude to prvoradé - nikdy neviete, kto bude čítať dielo, ktoré vytvoríte.
Pozrime sa teda na ďalšie sémantické značkovacie značky.
2.1 Oddiel
Sekcia je skutočne užitočná značka. Slúži na získanie obrovského množstva informácií a obsahu, ktoré sú označené nadpisom alebo názvom. Predstavte si to ako kapitolu v knihe. Kapitola má názov a môže tiež obsahovať obrázky, diagramy, grafy a slová. Na to všetko by sa použila značka sekcie.
2.2 Článok
Značka článku sa používa na to, ako znie; Obsahujúci obsah, ako je blogový príspevok alebo spravodajský príbeh. Tento obsah by mal byť možné oddeliť od zvyšku blogu a napriek tomu by mal mať ucelený zmysel.
2.3
Táto značka je vyhradená pre obsah, ktorý súvisí s webovou stránkou, ale nie je jej neoddeliteľnou súčasťou. Mohlo by ísť o veľa faktov, ktoré sa týkajú novinového príbehu alebo životopisu používateľa na blogu.
2.4 Hlavička
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émantických značkách by ste toto všetko obsahovali pomocou značky hlavičky.
2,5 Nav
Tento prvok je vyhradený pre navigačnú časť vášho webu. To by mohlo obsahovať odkazy na iné webové stránky alebo na iné stránky na webových stránkach. V kontexte MakeUseOf to môže byť časť stránky, ktorá je pod hlavičkou.
2.6 Päta
Táto značka je vyhradená pre spodnú časť stránky. Tu môžete uviesť niektoré kontaktné údaje, informácie o autorských právach, mapu alebo odkazy na vašu stránku „o mne“.
2.7 Otestujte sa
- Čo je to sémantické značkovanie a na čo sa používa?
- Vytváram webovú stránku a chcem pomocou sémantickej značky obsahovať životopis o mne. Ktorý použijem?
3. Formuláre
Ak ste sa niekedy trochu zaoberali webovým dizajnom, pravdepodobne viete, ako vytvoriť jednoduchý formulár v HTML. Ak ste skutočne šikovní, pravdepodobne viete, ako vziať informácie, ktoré získate z formulára, a ako s nimi niečo urobiť, napríklad ich vložiť do databázy.
Formuláre sú mimoriadne dôležité. Sú základom väčšiny vecí, ktoré robíme na internete. Zakaždým, keď vytvoríte aktualizáciu stavu na svojej obľúbenej sociálnej sieti, kúpite si niečo z Amazonu alebo pošlete e -mail, pravdepodobne ste použili formulár HTML.
Pravdepodobne ste nevedeli, že spôsob, akým vytvárame formuláre, sa v HTML5 radikálne zmenil. Je to tiež výrazne lepšie. V tejto kapitole sa pozrieme na niektoré skvelé veci, ktoré teraz môžete robiť, jednoducho so starými značkami.
Čo je teda super na novom spôsobe, akým môžeme písať formuláre v HTML5? Najprv môžete zaistiť, že niektoré polia musia byť vyplnené, aby mohli byť odoslané, a to iba 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é.
Za druhé, môžete zaistiť, aby vaši používatelia mohli do vášho formulára odosielať iba určité typy informácií. Predpokladajme teda, že máte webovú stránku pre svoj zoznam adries a chcete len to, aby ľudia mohli odosielať skutočné e -mailové adresy? Môžete to urobiť pomocou HTML5. Je to skutočne neuveriteľne silné.
Po tretie, svoje formuláre môžete vylepšiť tým, že určitým poliam dá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 teda na formulár a zistíme, ako ho môžeme zlepšiť.
Táto forma je celkom základná. Prevezme meno, e -mail a obľúbenú farbu a potom to užívateľovi umožní odoslať. Neobsahuje žiadne overenie toho, aké informácie sa do neho vkladajú, a používateľom nič nebráni v odoslaní tohto formulára s prázdnymi poliami. Zmeňme to všetko.
Prvá vec, ktorú budeme chcieť urobiť, je zaistiť, aby pole e -mailu obsahovalo iba e -mail. Kedysi to bola skutočne náročná úloha, pretože budete musieť vytvoriť všetky druhy tajomného kódu Regex. No už nie. Stačí len zmeniť typ vstupu z „textu“ na „e -mail“. Keď sa pokúsite odoslať tento formulár nezmyselne, bude sa sťažovať a trvať na odoslaní e -mailu.
3.2 Typy a vzory vstupov
Existujú ďalšie typy vstupov, ktoré môžete požadovať. Patria sem telefónne čísla, webové adresy, vyhľadávacie formuláre a dokonca aj nástroje na výber farieb! Keďže sa HTML5 neustále vyvíja, je logické, že čoskoro budeme môcť v blízkej budúcnosti určiť viac typov vstupov.
Navyše pre veci, ako sú telefónne čísla, ktoré sa líšia v závislosti od lokality, môžete zadať vzory pre vstupy. Tieto sú vytvorené pomocou niečoho, čo sa nazýva „regulárne výrazy“ a sú dosť komplikované, ale nezmerateľne silné.
Budeme tiež chcieť poskytnúť príklad e -mailu v našom odbore, aby používateľ nemal pochybnosti o tom, čo musí odoslať. To je skutočne ľahké. Stačí vytvoriť nový atribút „zástupného symbolu“ s príkladom e -mailovej adresy.
Zabezpečíme, aby bolo požadované pole „Obľúbená farba“. Do poslednej hranatej zátvorky (>) v tagu vstupu e -mailu napíšte „požadované“. To je všetko. Keď sa teraz pokúsite odoslať formulár bez hodnoty, zobrazí sa chybové hlásenie.
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. Jednoducho zmeníte pole tak, aby bolo požadované, a funguje to. Vďaka tomu je možné ich prispôsobiť, ak by ste chceli.
To bol neuveriteľne krátky úvod do sily formulárov v HTML5. Ak si chcete prečítať viac, odporúčam vám navštíviť tieto odkazy.
Ďalšie čítanie:
- CSS triky - napíšeme sémantické značenie
- HTML5 Doctor - Porozprávajme sa o sémantike
3.3 Otestujte sa
Budúci týždeň máte narodeniny a chcete si 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
Zaistite, aby boli polia pre meno, e -mail a telefónne číslo povinné a aby boli polia pre e -mail a telefónne číslo nastavené s typmi vstupu „e -mail“ a „tel“. Vytvorte zástupný symbol pre pole alergie s hodnotou „peľ, vajíčka, quiche“.
Hrajte sa s formou. Skúste odoslať povinné polia ako prázdne a do poľa telefónneho čísla skúste vložiť iné ako číselné znaky. Do poľa pre e -mail zadajte niečo, čo nie je e -mailová adresa. Čo sa stane?
4. Priemer
Bývaly časy, kedy jediným spôsobom, akým ste do webovej stránky mohli vložiť nejaké video alebo audio, bolo použiť niečo ako Flash, Shockwave alebo SilverLight.
Toto nebolo ideálne. Po prvé, žiadny z týchto rámcov nefungoval tak dobre na mobilných zariadeniach. Jednoducho neboli vybavení pre moderný svet smartfónov a tabletov.
napísať list vojakovi
Navyše išlo o proprietárne formáty. Výsledkom bolo, že používatelia Linuxu a OS X mohli získať celkom druhořadý zážitok alebo im dokonca bolo zabránené využívať mediálne služby, pretože neboli k dispozícii pre ich platformu.
Nakoniec mali sklon byť pomalí. Ak by ste boli na slabom alebo staršom počítači, nemali by ste dobré skúsenosti so sledovaním videa pomocou týchto rámcov. Flash bol obzvlášť známy tým.
4.1 Ako HTML5 robí video a zvuk úžasným
HTML5 to zmenilo tým, že webovým vývojárom umožnilo zahrnúť video a zvuk na svoje webové stránky pomocou niekoľkých riadkov kódu. Funguje ako pochúťka na mobilných zariadeniach a funguje v 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 nepridáš?
4.2 Všetko o kodekoch
V tejto kapitole sa naučíte, ako využiť silu HTML5 na zahrnutie zvuku a videa na vaše webové stránky.
Po prvé, budem musieť začať s upozornením. Aj keď môžete používať video vo formáte HTML5 v každom modernom webovom prehliadači, v každom webovom prehliadači nefunguje rovnako. Kodeky používané v každom prehliadači sa líšia. V programe Internet Explorer obmedzujete používanie videa vo formáte MP4. Chrome je o niečo veľkorysejší a umožňuje vám používať video WebM, MP4 a Ogg Theora. Opera je o niečo obmedzujúcejšia a umožňuje vám používať iba video Theora a WebM.
Výsledkom je, že musíte byť trochu šikovní, ako vkladáte video na svoju webovú stránku. Pozrime sa teda, ako to funguje.
4.3 Začíname s videom
Na začiatok budete musieť vytvoriť niekoľko otváracích a zatváracích značiek. Tu nájdete odkaz na svoje video súbory. Najprv však budete chcieť nastaviť plagát. Čo to znamená?
Keď čakáte na načítanie videa, osoba navštevujúca váš web môže vidieť obrázok, ktorý s videom súvisí. Ak to chcete urobiť, zadajte pre svoje značky videa atribút „plagát“ s hodnotou obrázku, ktorý chcete prepojiť. Malo by to vyzerať takto.
Ďalšia vec, ktorú budeme chcieť urobiť, je vytvoriť záložný. Čo to znamená? Predpokladajme teda, že používate jeden zo starších, menej úžasných prehliadačov. Mnoho z týchto starších prehliadačov nepodporuje video vo formáte HTML5, a preto nemôže prehrávať video vo formáte HTML5. Budete im chcieť nechať správu, v ktorej ich budú informovať, že budú chcieť aktualizovať svoj prehliadač a že kým to neurobia, nebudú môcť sledovať vaše video.
Ak to chcete urobiť, napíšte svoju správu do značiek videa. Nie je potrebné nič iné. Keď to urobíte, zostane vám nejaký kód, ktorý vyzerá takto.
Teraz pridáme nejaké video. Idem to otestovať v prehliadači Google Chrome, takže prepojím film MP4. Za týmto účelom vytvorím zdrojovú značku a priradí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. Spojil som sa s filmom, ktorý je skutočne veľký, a preto je pri otvorení vidieť iba 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é, človek vytvorí niekoľko zvukových značiek. Tieto zvukové značky obsahujú atribút „ovládacie prvky“. Používateľovi, ktorý navštívi stránku, to dáva možnosť pozastaviť, prehrávať dozadu a rýchlo prevíjať prehrávaný zvuk.
Potom do súboru MP3, ktorý chcete prepojiť, vložíte zdrojovú značku. Čo sa týka kompatibility s kodekom, nemusíte si až tak veľmi lámať hlavu. Väčšina najnovších webových prehliadačov dokáže prehrávať zvuk vo formáte MP3, aj keď je vhodné zahrnúť aj súbor „.ogg“ a „.wav“ - len pre prípad.
Nakoniec môžete vytvoriť záložnú verziu pre staršie prehliadače. To sa deje rovnakým spôsobom, akým ste vytvorili záložnú verziu pre svoje video.
Konečný výsledok vyzerá trochu takto.
Keď to otvoríte vo webovom prehliadači, malo by to vyzerať asi takto.
4.5 Otestujte sa
- Aký je účel použitia plagátu vo vašich značkách videa?
- Aké kodeky nemôžete používať v programe Internet Explorer?
- Ak by som chcel možnosť pozastaviť zvuk, aký atribút by ste pridali do značky „audio“?
Ďalšie čítanie:
5. Transformácie a animácie CSS3
CSS sa tradične používal na správu rozloženia a dizajnu webovej stránky. Stále to platí, ale vo svojej najnovšej iterácii získal 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 až po napísanie plnej hry Pong. Niekto ho dokonca použil na znovuvytvorenie úvodných titulkov k Mad Men. Je to skutočne výkonná technológia a keď je zvládnutá, dá sa použiť na pridanie úžasnej úrovne funkčnosti na vašu webovú stránku.
V tejto kapitole vám poskytnem stručný úvod do CSS3 a ukážem vám, ako na svoju stránku pridať niekoľko úžasných efektov.
Najprv prejdite na stránku codepen.io a vytvorte nové pero. Po dobu trvania tejto kapitoly to použijeme ako svoj pracovný priestor.
Začneme jednoducho a vytvoríme jednoduchú transformáciu obrazu, ktorá pri umiestnení kurzora otočí obrázok o 3 stupne. Najprv vytvorte značku div a zadajte jej ID. V nižšie uvedenom príklade som mu priradil ID „muo“.
5.1 Efekty vznášania sa CSS
Do tohto div zahrňte obrázok podľa vlastného výberu. Priložil som kópiu loga MakeUseOf.
Potom budete musieť napísať niekoľko pravidiel pre šablónu štýlov. V nižšie uvedenom príklade som vytvoril horný a ľavý okraj, aby mal obrázok určitý priestor. Zahrnul som tiež pravidlo štýlovo vyzerajúceho štýlu, ktoré začína na '#muo: hover'. Čo je to?
Keď k pravidlu šablóny štýlov pripojíte „: hover“, či už k prvku, ID alebo triede, prehliadaču tým efektívne poviete, aby použil tento štýl, keď prvok ovláda myš. Celkom cool, nie?
Vnútri pravidla '#muo: hover' máme riadok, ktorý hovorí '-webkit-transform: rotate (3deg)'. Určite ste uhádli, že to prehliadaču hovorí, aby otočil prvok div o tri stupne.
Stojí však za zmienku, že táto značka funguje iba v prehliadačoch Chrome a Safari. Ak chcete, aby váš kód fungoval vo Firefoxe alebo Internet Explorer 9 a novších verziách, budete chcieť zmeniť svoj súbor CSS tak, aby obsahoval nasledujúce riadky.
Keď teraz umiestnite kurzor myši na obrázok, vyzerá to takto:
5.2 Použitie CSS3 na zmenu veľkosti obrázkov
Prečo sa tam teda zastaviť? Vedeli ste, že na zväčšenie alebo zmenšenie obrázku môžete použiť aj metódu „transformácie“. Zmeňme náš súbor CSS tak, aby obsahoval nasledujúce riadky.
Ako vidíte, teraz sme zahrnuli nové pravidlo transformácie, ale tentoraz mu hovoríme, aby robilo niečo, čo sa nazýva „mierka“. Je to skutočne krásny spôsob, ako zväčšiť veľkosť obrázku. Na to sú potrebné dva parametre (čísla, ktoré vidíte medzi zátvorkami) a predstavujú množstvo, o ktoré zvýšite výšku a šírku prvku.
Ako vidíte z kódu, budem zväčšovať veľkosť loga MakeUseOf div o 50%. Môžete to otestovať tak, že na to umiestnite kurzor myši. Uvidíte, že teraz je logo „MakeUseOf“ výrazne natiahnuté.
Toto bol veľmi jemný úvod do transformácií CSS3. Napriek tomu, že CSS3 je skutočne veľmi nový, teraz vidíte, že s ním môžete robiť veľa veľmi zaujímavých manipulácií.
5.3 Otestujte sa
- Ako aplikujeme štýl na prvok pri vznášaní sa?
- Ako otočíte obrázok pomocou CSS3?
- Ako zmeníte veľkosť obrázka pomocou CSS3?
- Čo sa stane, ak odovzdáte svoju metódu transformácie „prekladať (50 pixelov, 50 pixelov)“?
Ďalšie čítanie:
6. Stačí stačiť Javascript
Ak chcete vo svojom webovom prehliadači používať skript, musíte použiť Javascript. Žiaľ, neexistujú dva spôsoby. Je to jazyk, ktorý má veľa fanúšikov a veľa kritikov. Ako jazyky idú, má mnoho bradavíc. Existuje dôvod, prečo sa najpozoruhodnejšia kniha o jazyku nazýva „Javascript: The Good Parts“.
Naučiť sa používať Javascript v jednej kapitole bude nemožné. Tu to nie je cieľom. Cieľom je naučiť vás dostatočne Javascript, aby ste porozumeli ďalšej kapitole, ktorá je o použití technológie nazývanej Canvas na kreslenie a animácie.
6.1 Prístup ku konzole
Na tento účel použijeme konzolu Javascript, ktorá je súčasťou každej kópie prehliadača Google Chrome. Ak sa k tomu chcete dostať, kliknite pravým tlačidlom myši na ľubovoľnú webovú stránku a potom kliknite na položku „Skontrolovať prvok“. Potom kliknite na položku „Konzola“. Toto by ste mali vidieť.
Tradične je prvým programom, ktorý kedy začínajúci vývojár napíše, program „Hello World“. Jedná sa o jednoduchý program, ktorý vytlačí frázu „Hello World“ a nič iné. Do konzoly zadajte 'console.log (' Hello world! ') ;.
6.2 Váš prvý program
Čo sme teda presne urobili? Najprv sme nazvali niečo, čo sa nazýva „console.log“. Toto je trochu kódu, ktorý je zabudovaný do počítača a ktorý jednoducho vytlačí všetko, čo mu poviete. Potom sme k nemu pripojili niekoľko zátvoriek a zaradili ich do dvojitých úvodzoviek „Hello World“. Hovorí sa tomu „odovzdávanie argumentov“ a typ argumentu, ktorý sme odovzdali, sa nazýva reťazec. Kedykoľvek chcete urobiť niečo, čo zahŕňa písmená a špeciálne znaky, musíte jednoducho použiť jednoduché úvodzovky. Ak však chcete urobiť čokoľvek pomocou čísel, zvyčajne nemusíte používať úvodzovky, ako je uvedené nižšie.
6.3 Premenné v JavaScripte
Môžete tiež odoslať premenné do súboru 'console.log'. Premenné znejú komplikovane, ale v skutočnosti sú iba priestorom na vloženie kúskov informácií. Často ide o čísla alebo písmená. Za týmto účelom deklarujete premennú pomocou kľúčového slova „var“, pomenujete ju a potom znamienkom rovnosti zadáte hodnotu. Vytvorím teda premennú s názvom „ahoj“ a potom jej dám hodnotu „Hello World!“. Potom to pošlem na konzolu.log.
Všimnite si toho, ako som nepovedal „ahoj“ do konzoly.log pomocou úvodzoviek. Dôvodom je, že som chcel na konzolu vytlačiť obsah „ahoj“ a nie „ahoj“ samotný.
6.4 Čo robia funkcie
Môže to byť trochu únavné prepisovať ten istý kus kódu znova a znova, a preto 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 znova prepisovali ten istý kód. Ďalej sme vytvorili funkciu s názvom „sup“ a pomocou zátvorky jej odovzdávame argument, ktorý sa potom prihlási na obrazovku. Hovoríme „sup“ odoslaním do konzoly „sup („ Hello world! ');'.
6.5 Opakovanie akcie so slučkou „Za“
Predpokladajme, že ste rovnakú akciu chceli vykonať niekoľko krát. Z tohto dôvodu by sme použili slučku „pre“. Na prvý pohľad to vyzerá strašidelne, ale je ľahké ich zvládnuť, pokiaľ im porozumiete. Začnite tým, že napíšete „pre ()“.
V týchto zátvorkách budeme chcieť vytvoriť premennú, ktorá počíta, koľkokrát sme vykonali akciu. Takže dostaneme niečo, čo vyzerá takto „pre (var i = 0;)“.
Potom chceme skontrolovať, či som nesplnil podmienku. V tomto prípade teda chceme vidieť, že je to menej ako 10. Takže za bodkočiarkou napíšeme „i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).
Ak je i menšie ako 10, chceme ho sčítať po jednom a potom niečo urobiť. Vložíme teda „i = i + 1“. Naša slučka je takmer dokončená: „pre (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.
Potom budeme chcieť urobiť akciu. Takže za posledné zátvorky napíšeme niekoľko zložených zátvoriek a medzi nimi budeme konzolovať. Zaznamenať hodnotu i. Vytvorí sa tak počítadlo, ktoré počíta až deväť.
Posledné dva programovacie konštrukty, na ktoré sa pozrieme, sú príkazy „if“ a „while“.
6.6 Ak vyhlásenia
Príkaz „ak“ vykoná akciu, ak sú splnené určité kritériá. V stavbe sú podobné slučkám „za“ a fungujú nasledovne. Predpokladajme, že máte premennú s názvom „cheeseburgery“ a chcete zistiť, či má hodnotu „chutné“. Ak áno, chcete prihlásiť „mňam, cheeseburgery“ na obrazovku. Ak to chcete urobiť, napíšte niečo také.
Všimnite si, ako som napísal „if (cheeseburgers == 'chutný') '. Dvojité alebo trojité rovná sa používa na kontrolu rovnosti a jednoduché rovnosti na priradenie hodnoty.
6.7 Kým slučky
Nakoniec slučka „kým“ vykoná akciu pri splnení kritérií. Predstavte si teda, že chcete prihlásiť „mňam, cheeseburgery“, zatiaľ čo cheeseburgery budú rovnako chutné. Ak to chcete urobiť, napíšte nasledujúce.
Stojí za zmienku, že by to vstúpilo do nekonečnej slučky, a mali by ste sa vyhnúť vykonaniu akcie s hodnotou, ktorá sa pravdepodobne nezmení. To môže spôsobiť, že sa váš prehliadač uzamkne alebo váš kód nebude fungovať.
Ako som už spomenul, toto bol veľmi stručný úvod do programovania konštrukcií v Javascripte. Odporúčame vám prečítať si viac o tejto fascinujúcej, aj keď obrovskej téme.
6.8 Otestujte sa
- Chcem odpočítavať od 30. Napíšte slučku „for“, ktorá by to urobila.
- Chcem vytvoriť premennú s názvom „makeuseof“ a priradiť jej hodnotu „úžasnej“. Ako sa to robí?
- Chcem vytvoriť funkciu, ktorá po zavolaní vytlačí „MakeUseOf Is Awesome“. Napíšte túto funkciu.
Ďalšie čítanie:
- Javascript: Dobré časti od Douglasa Crockforda
- Sprievodca JavaScriptom MDN
7. Kreatívne plátno
Canvas je skvelá technológia, ktorá vám umožní kresliť obrázky a vytvárať animácie bez toho, aby ste sa museli uchýliť k používaniu Flash alebo Silverlight. Ľudia ho používali 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 nevyspytateľne veľký kus technológie, v tomto návode vám ho stručne predstavím.
Stojí za zmienku, že Canvas funguje iba v moderných webových prehliadačoch. Ak používate starú verziu prehliadača IE, Chrome alebo Firefox, možno sa nebudete riadiť touto kapitolou. Ak je to tak, mali by ste zvážiť stiahnutie najnovšej verzie prehliadača Google Chrome, čo bol webový prehliadač, v ktorom som vytvoril tento návod.
7.1 Začíname s plátnom
Najprv budete musieť otvoriť webový prehliadač a prejsť na stránku codepen.io. Vytvorte nové pero.
Teraz budeme musieť deklarovať prvok plátna. Vytvorte dve otváracie a zatváracie značky Canvas. V nich by ste jej mali odovzdať tri atribúty. Toto sú šírka a výška prvku Canvas spolu s ID, ktoré mu zadávate. Rovnako ako predtým, keď ste vložili nejaké video, mali by ste zahrnúť záložnú správu.
Teraz budeme chcieť napísať kód Javascript, ktorý niečo nakreslí na obrazovku. Začneme základmi a vytvoríme jednoduchý červený štvorec.
Vytvoríme premennú (nazval som ju „demo“) a potom vyberieme prvok canvas a priradíme ho k tejto premennej. Na tento účel použijete document.getElementByID () a zadáte ID prvku, ktorý chcete vybrať.
Druhý riadok v našom skripte vytvorí ďalšiu premennú s názvom „kontext“ a potom na ňu zavolá „demo.getContext ('2d') '. Prehliadaču to oznámilo, že budeme pracovať na 2D obrázku, a potom prešiel potrebnými funkciami, ktoré potrebujeme, aby sme ho mohli nakresliť na obrazovku.
Tretí a štvrtý riadok sú tie, ktoré skutočne kreslia na obrazovku. Tretí riadok vypĺňa 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é. Poďme urobiť niečo trochu pokročilejšie a použiť kúzlo Javascriptu a plátna na vytvorenie úplne nového loga MakeUseOf.
7.2 Tvary a text
Odstráňte náš štvrtý riadok a nahraďte ho takým, ktorý umiestni náš obdĺžnik do ľavého horného rohu a roztiahne ho na dĺžku plátna.
Prvé dva argumenty definujú, kam chceme umiestniť os x a y tvaru. Poďme zatiaľ nastaviť týchto dvoch na „0“. Tretí argument sa týka šírky tvaru. Nastavme to na „200“ a potom ponechajme štvrtý argument na „50“. Teraz by ste mali mať niečo, čo vyzerá trochu takto.
Je to skvelý začiatok, ale vôbec nespomína MakeUseOf. Takže pridáme nejaký text. Vytvorme premennú obsahujúcu 'makeuseof' a nazveme ju 'MakeUseOf'.
Potom budeme chcieť vytvoriť ďalšiu kontextovú premennú. Nazvite to „kontext2“ a uistite sa, že je to 2d. Práve to použijeme na napísanie nášho textu.
Budeme chcieť, aby bol náš text zafarbený na modro a aby prekryl náš červený štvorec. Takže, rovnako ako predtým, budeme chcieť dať mu štýl „modrej“. Teraz vyberieme vlastnosti nášho textu. Chceme, aby bol 20 pixelov veľký, tučným formátom a používal písmo Arial. Nazývame font v kontexte2 a priradíme mu hodnotu „tučné 20px arial“.
Pretože chceme, aby tento text prekrýval naše predchádzajúce červené pole, musíme v kontexte2 zavolať „textBaseLine“ a dať mu hodnotu top. Akonáhle je to dokončené, zavoláme na kontexte2 „fillText“ a odovzdáme mu premennú obsahujúcu náš text a súradnice x a y, do ktorých chceme náš text umiestniť. 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 programu Canvas, mali by ste pochopiť, že je to tiež neuveriteľne veľká technológia a neuveriteľne výkonná technológia na zavedenie. Táto príručka jednoducho slúžila ako úvod do tvorby grafiky pomocou tejto novej technológie.
ako vymazať vyrovnávaciu pamäť v telefóne
7.4 Otestujte sa
- K obrázku, ktorý ste vytvorili, pridajte nasledujúci slogan: „Najlepšie technologické stránky všetkých čias!“
- Vytvorte slučku „for“, ktorá beží na desať iterácií. Zistite, či môžete kresbu posúvať po plátne po pixeloch.
- Zabaľte svoj výkres do funkcie. Čo sa stane, ak to nezavoláte?
Ďalšie čítanie:
8. Kam ďalej?
Ďakujem, že ste si prečítali môjho neuveriteľne stručného sprievodcu po nových technológiách nachádzajúcich sa v HTML5. Je nepopierateľné, že HTML5 je technológiou budúcnosti. Prijíma ho väčšina technológií, pretože je ľahké ho napísať a je nadpozemský. Ľudia s tým neustále robia neuveriteľné veci a ja nepochybujem, že v budúcnosti budete jedným z týchto ľudí. Je mi cťou, že som mohol byť súčasťou vašej cesty do divokého a nádherného sveta HTML5.
Žiadam vás, aby ste sa naďalej učili. Pokračujte v kódovaní. Pokračujte vo zvyšovaní úrovne a zlepšovaní a už čoskoro budete technológie, ktoré boli predstavené v tomto krátkom sprievodcovi, používať na vytváranie úžasných produktov.
zdieľam zdieľam Tweet E -mail Oplatí sa upgradovať na Windows 11?Windows bol prepracovaný. Stačí to však na to, aby ste sa presvedčili o prechode z Windows 10 na Windows 11?
Čítajte ďalej Súvisiace témy- Wordpress a vývoj webových aplikácií
- HTML5
- Dlhý formulár
- Longform Guide
Matthew Hughes je softvérový vývojár a spisovateľ z anglického Liverpoolu. Málokedy ho nájdu bez šálky silnej čiernej kávy v ruke a úplne zbožňuje svoj Macbook Pro a svoj fotoaparát. Jeho blog si môžete prečítať na http://www.matthewhughes.co.uk a sledovať ho na twitteri na @matthewhughes.
Viac od Matthewa Hughesaprihlásiť sa ku odberu noviniek
Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!
Kliknutím sem sa prihlásite na odber