Sāciet darbu ar HTML5

Sāciet darbu ar HTML5
Šī rokasgrāmata ir pieejama lejupielādei kā bezmaksas PDF. Lejupielādējiet šo failu tūlīt . Jūtieties brīvi kopēt un kopīgot to ar draugiem un ģimeni.

Satura rādītājs

§1. Ievads





2.§ - Semantiskais marķējums



3.§ - veidlapas





4.§ - vidējs

5.§ - CSS3 transformācijas un animācijas



6.§ - pietiek ar Javascript

7.§ - radošais audekls



8.§ - kur tālāk?

1. Ievads

Jūs esat par to dzirdējuši: HTML5. Visi to izmanto. Tas tiek pasludināts par interneta glābēju, ļaujot cilvēkiem izveidot bagātīgas, saistošas ​​tīmekļa lapas, neizmantojot Flash un Shockwave.



Bet kas tas patiesībā ir?

Nu, uz to nav viegli atbildēt. Šajā HTML5 apmācībā mēs centīsimies sniegt dažas atbildes. HTML5 tiek izmantots, lai aprakstītu patiešām daudzveidīgu lietu grupu. Tas ir tīmekļa lapu rakstīšanas standarts. Tā ir API kolekcija. Tas ir jauns veids, kā tīmekļa lapām pievienot interaktivitāti.

HTML5 ir tas viss un vēl vairāk. Par ko tad šī grāmata?

Šajā HTML5 apmācībā es pieņemšu, ka jūs kādā brīdī esat pieskāries HTML un CSS. Iespējams, esat izveidojis savu WordPress motīvu vai rediģējis MySpace izkārtojumu. Varbūt esat izlasījis pašu MakeUseOf XHTML ceļvedi. Lieta ir tāda, ka es pieņemu, ka jūs labi pārzināt tīmekļa lapu un ka šajā rokasgrāmatā apspriestais jums nebūs pārāk svešs.

Šīs rokasgrāmatas mērķis nav iemācīt jums visu HTML5. Tas būtu pilnīgi ārpus šīs grāmatas darbības jomas. Mērķis ir saudzīgi iepazīstināt ar šīm pārsteidzošajām jaunajām tīmekļa tehnoloģijām un parādīt dažus lieliskus veidus, kā tās iekļaut savās vietnēs.

Kāpēc jūs vēlaties iemācīties HTML5?

Tas ir godīgs jautājums. Vai viedtālruņu un lietotņu pasaulē patiešām ir svarīgi iemācīties programmēt tīmekļa lapas?

Nu, ticiet vai nē, ir patiešām ierasts rakstīt viedtālruņu lietojumprogrammas, izmantojot HTML5 tehnoloģijas. Vēl nesen Android lietotne Facebook tika rakstīta, izmantojot HTML5, CSS un Javascript.

Blackberry ir vēl viens liels uzņēmums, kas ārkārtīgi interesējas par HTML5. Tas ir acīmredzams viņu mobilās operētājsistēmas Blackberry OS 10 jaunākajā iterācijā, kur viņi aktīvi mudina izstrādātājus izstrādāt lietojumprogrammas saviem tālruņiem, izmantojot tīmekļa tehnoloģijas.

Arī jaunie Firefox OS viedtālruņi darbojas tikai HTML5 lietotnēs. Praktiskas zināšanas par HTML5 ir būtiskas mūsdienu viedtālruņu klimatā.

Turklāt HTML5 apguve ir noderīga jūsu karjerai. Netici man? Saskaņā ar Indeed.com , vidējā gada alga HTML5 izstrādātājam ir acīmredzami 89 000 USD. Tā kā arvien vairāk uzņēmumu maina savas vietnes, lai izmantotu HTML5 tehnoloģijas, izstrādātāji, kuri zina HTML5 steku, ir pieprasīti - tagad vairāk nekā jebkad agrāk.

1.1 Priekšnosacījumi

Šī HTML5 apmācība paredz dažas lietas. Pirmkārt, tas paredz, ka jūs zināt, kā darbojas tīmeklis, un zināt, kā izveidot pamata tīmekļa lapu. Jums vajadzētu būt iespējai apvienot dažus HTML elementus un spēt parādīt kādu informāciju tīmekļa pārlūkprogrammā. Redzot un

tagi nav pārāk biedējoši, un jūs nebaidāties netīrīt rokas kādā avota kodā.

Otrkārt, šajā rokasgrāmatā tiek pieņemts, ka jūs zināt, kas ir CSS un kā tā darbojas. Mēs negaidām, ka jūs esat dizaina ģēniji, kā arī no jums netiek sagaidīta visa CSS specifikācija. Tomēr jums vajadzētu būt iespējai piemērot stilu tīmekļa lapas elementam, spēt izveidot saiti uz CSS failu un zināt atšķirību starp ID un klasi un to, kā katram no tiem piemērot stilu.

Ja jūs skrāpējat galvu iepriekšminētajā gadījumā, neuztraucieties. Viena no labākajām HTML un CSS lietām ir tā, ka tas ir patiešām ļoti vienkārši. Faktiski MakeUseOf ir neticami XHTML ceļvedis, kas jūs ātri paātrinās.

Pēc šīs rokasgrāmatas izlasīšanas jūs varētu vēlēties apskatīt arī šādus rakstus:

Jums būs nepieciešams arī mūsdienīgs teksta redaktors un pārlūkprogramma. Jebkura Internet Explorer versija, kas ir vecāka par IE 9, un dažas vecākas Safari, Chrome un Firefox versijas cīnīsies ar daudzām funkcijām, kas ir daļa no HTML5, un tas var liegt jums sekot šai rokasgrāmatai.

Tā rezultātā tiek ieteikts lejupielādēt modernu pārlūkprogrammu. Es iesaku Google Chrome, un es to izmantošu katrā piemērā.

Turklāt viss, kas jums būs nepieciešams, ir vēlme mācīties. Ak, un teksta redaktors.

1.2 Teksta redaktori tīmekļa izstrādei

Teksta redaktors ir tas, ko izmantosit koda rakstīšanai. Jums var rasties jautājums, kas ir teksta redaktors.

Pirmkārt, tas nav vārdu procesors. Tādas programmas kā Microsoft Word un Apple lapas ir pilnīgi nepiemērotas tīmekļa izstrādei. Tas ir tāpēc, ka tie pievieno papildu informāciju jūsu HTML, CSS un Javascript failiem, kas apgrūtina jūsu tīmekļa pārlūkprogrammas lasīšanu.

Teksta redaktors izraksta rakstzīmes teksta failā, nevis daudz ko citu. Tas ļauj jums izveidot failus bez papildu formatējuma un tos var saglabāt ar jebkuru jūsu izvēlēto paplašinājumu.

Jūsu datoram jau ir viens. Ja izmantojat Windows datoru, Notepad ir teksta redaktors, kas, iespējams, ir instalēts.

Mac datorā situācija ir nedaudz atšķirīga. OS X nāk ar četriem dažādiem teksta redaktoriem. Tos sauc par Vim, Emacs, Pico un Nano. Tomēr, atšķirībā no Notepad, tie visi darbojas terminālī.

Tas ir nedaudz biedējoši cilvēkiem, kuri ir jauni tīmekļa izstrādes jomā, un to nedrīkst izmantot cilvēki, kuri ir jauni programmatūras izstrādē. Šajā rokasgrāmatā mēs tos neizmantosim. Tomēr, kad kļūstat nedaudz pārliecinātāks par programmatūru un tīmekļa izstrādi, noteikti ir vērts apskatīt Vim un Emacs. Viņi abi ir spēcīgi teksta redaktori, un, tos apgūstot, var ietaupīt šausmīgi daudz laika.

Operētājsistēmā Linux noklusējuma teksta redaktors atšķiras atkarībā no izplatīšanas. Ubuntu, iespējams, ir Gedit, kas ir diezgan patīkams teksta redaktors, kas nav pārāk atšķirīgs no Notepad.

Tomēr šajā kursā mēs rakstīsim savu kodu, izmantojot trīs dažādus rīkus.

Pirmais ir cildenais teksts 2. Godīgi sakot, es to nevaru ieteikt pietiekami augstu. Tam ir visas lietas, kas atvieglo iesācēja izstrādātāja dzīvi. Pirmkārt, tas atvieglos jūsu koda lasīšanu, krāsojot noteiktas daļas. Otrkārt, tas ļauj ērti pārslēgties starp failiem un pārvaldīt visus failu projektus. Tas ir ideāli piemērots failu pārslēgšanai un vairāku koda bitu rediģēšanai.

Trešā ir Javascript konsole, kas ir iebūvēta pārlūkā Google Chrome. Tas ļauj mums uzrakstīt Javascript un redzēt, kā tas tiek nekavējoties palaists, un tas tiks izmantots, lai izskaidrotu programmēšanas pamatjēdzienus.

Otrais ir vietne ar nosaukumu Codepen.io. Šī ievērojamā vietne ļaus pārlūkprogrammā kodēt HTML, CSS un Javascript, un to var brīvi izmantot. Tas arī ļaus jums uzreiz redzēt izmaiņas.

2. Semantiskais marķējums

Šajā nodaļā jūs uzzināsit par semantisko iezīmēšanu un to, kā sakārtot kodu, pamatojoties uz tā saturu.

Vēl nesen HTML kods parasti tika organizēts ar tagiem. Tie ļāva jums izveidot elementu grupu un pēc tam šiem elementiem piemērot stilu.

Tas izdevās, taču bija iespējas uzlabot. Problēma ar tagiem bija tā, ka tā nebija semantiska. Div patiesībā neko nenozīmē.

Semantiskā iezīmēšana ir jauna HTML5 funkcija. Tas ievieš jaunus tagus, kas darbojas tāpat kā tags “div”, bet ir paredzēti, lai atzīmētu kopīgas lapas daļas.

Tātad, kā viņi strādā? Apsveriet šādu kodu.

Šajā koda daļā mums ir navigācijas josla, nosaukums un saraksts. Tas nav pārāk atšķirīgs lielākajai daļai vietņu, kuras jūs, iespējams, kādreiz apmeklēsit, ja par to padomāsit.

kā atbrīvot vietu operētājsistēmā Windows 10

Apskatīsim rakstu par MakeUseOf. Jūs pamanīsit, ka kāda lapas daļa ir pilnībā rezervēta, lai pārietu uz citiem rakstiem. Jūs arī pamanīsit, ka ir vēl viena lapas daļa, kurā ir vārdi, kas veido rakstu. Lapas augšdaļā redzēsit galveni ar MakeUseOf logotipu un dažām citām saitēm.

Padomājot par to, daudzas vietnes ievēro šīs konvencijas. Lielākajai daļai vietņu ir daļa, kas rezervēta navigācijai. Viņiem parasti ir satura kopums. Viņiem, visticamāk, ir galvene.

Semantiskie tagi ir tagi, kas ļauj definēt vietnes daļas, kuras parasti atrodamas lielākajā daļā vietņu. Tie lapai neko nepievieno, bet ļauj grupēt tagus, pamatojoties uz to saturu, un piemērot stilu šīm grupām.

Tātad, atcerieties to kodu, kas mums bija iepriekš? Apskatīsim to, pievienojot kādu semantisku iezīmējumu.

Kā redzat, kodu ir daudz vieglāk nolasīt. Jūs zināt, kuras daļas ir kuras, un nav nekādu neskaidrību. Tas ir svarīgi, jo tas atvieglo laba, tīra koda rakstīšanu. Ja jūs kādreiz nolemjat kļūt par profesionālu tīmekļa dizaineri, tas kļūst par vissvarīgāko - jūs nekad nezināt, kurš lasīs jūsu radīto darbu.

Tātad, apskatīsim vēl dažus semantiskus iezīmēšanas tagus.

2.1. Sadaļa

Sadaļa ir patiešām noderīgs tags. To izmanto, lai satvertu milzīgu informāciju un saturu, kas atzīmēts ar virsrakstu vai nosaukumu. Padomājiet par to kā par nodaļu grāmatā. Nodaļai ir nosaukums, un tajā var būt arī attēli, diagrammas, grafiki un vārdi. Lai to visu saturētu, tiks izmantots sadaļas tags.

2.2. Pants

Raksta tagu izmanto tam, kā tas izklausās; Satur saturu, piemēram, emuāra ziņu vai ziņu stāstu. Šo saturu jāspēj atdalīt no pārējā emuāra, un tam joprojām jābūt saskaņotam.

2.3 Malā

Šī atzīme ir rezervēta saturam, kas ir saistīts ar tīmekļa lapu, bet nav tā neatņemama sastāvdaļa. Tas varētu būt faktu kopums, kas attiecas uz ziņu stāstu vai lietotāja biogrāfiju emuārā.

2.4 Virsraksts

Daudzām tīmekļa lapām lapas augšpusē ir josla, kurā ir logotips, informācija par vietni un varbūt dažas saites. Semantiskajā iezīmēšanā jūs izmantosit galvenes tagu, lai to visu ietvertu.

2.5 Nav

Šis elements ir rezervēts jūsu vietnes navigācijas daļai. Tas saturētu saites uz citām vietnēm vai citām tīmekļa vietnes lapām. MakeUseOf kontekstā tā varētu būt lapas daļa, kas atrodas zem galvenes.

Šī atzīme ir rezervēta lapas apakšējai daļai. Šeit jūs varat ievietot kādu kontaktinformāciju, informāciju par autortiesībām, karti vai dažas saites uz jūsu lapu par mani.

2.7 Pārbaudi sevi

  • Kas ir semantiskais marķējums un kādam nolūkam to lieto?
  • Es veidoju tīmekļa lapu un vēlos izmantot semantisko tagu, lai saturētu biogrāfiju par mani. Kuru izmantot?

3. Veidlapas

Ja esat kādreiz veicis tīmekļa dizainu, jūs droši vien zināt, kā izveidot vienkāršu veidlapu HTML formātā. Ja esat patiešām gudrs, jūs droši vien zināt, kā ņemt no veidlapas iegūto informāciju un kā ar to kaut ko darīt, piemēram, ievietot to datu bāzē.

Veidlapām ir milzīga nozīme. Tie ir pamatā lielākajai daļai lietu, ko mēs darām internetā. Katru reizi, kad izveidojat statusa atjauninājumu savā iecienītākajā sociālajā tīklā, iegādājaties kaut ko no Amazon vai nosūtāt e -pastu, iespējams, esat izmantojis HTML veidlapu.

Jūs, iespējams, nezinājāt, ka veidlapu izveides veids ir radikāli mainījies HTML5. Tas ir arī ievērojami labāk. Šajā nodaļā mēs apskatīsim dažas atdzist lietas, kuras jūs tagad varat darīt, tikai ar vienkāršu veco iezīmējumu.

Tātad, kas ir tik forši jaunajā veidlapu rakstīšanas veidā HTML5? Pirmkārt, jūs varat nodrošināt, ka daži lauki ir jāaizpilda, lai tos iesniegtu, vienkārši mainot pašas veidlapas marķējumu. Turklāt, lai to izdarītu, jums vairs nav jāraksta JavaScript vai PHP kalni. Tas ir triviāli viegli.

Otrkārt, jūs varat nodrošināt, ka lietotāji jūsu veidlapā var iesniegt tikai noteikta veida informāciju. Pieņemsim, ka jūsu adresātu sarakstam ir vietne un vēlaties, lai tikai cilvēki varētu iesniegt faktiskās e -pasta adreses? To var izdarīt, tikai izmantojot HTML5. Tas tiešām ir neticami spēcīgs.

Treškārt, jūs varat uzlabot veidlapu izskatu, piešķirot noteiktiem laukiem vietturu. Tas padarīs tos ievērojami intuitīvākus, jo jūs varat parādīt saviem lietotājiem piemēru, ko jūs sagaidāt no veidlapas.

3.1 Veidlapas uzlabošana

Tātad, apskatīsim veidlapu un redzēsim, kā to uzlabot.

Šī veidlapa ir diezgan vienkārša. Tas ietver vārdu, e -pastu un iecienītāko krāsu, un pēc tam ļauj lietotājam to iesniegt. Tajā nav apstiprināta informācija, kas tajā tiek ievietota, un nekas neliedz lietotājiem iesniegt šo veidlapu ar dažiem tukšiem laukiem. Maināsim to visu.

Tātad, pirmā lieta, ko mēs vēlamies darīt, ir nodrošināt, ka e -pasta lauks aizņem tikai e -pastu. Agrāk tas patiešām bija diezgan grūts uzdevums, jo jums bija jāizveido visa veida noslēpumains Regex kods. Nu ne vairāk. Jums vienkārši jāmaina ievades veids no “teksts” uz “e -pasts”. Mēģinot iesniegt šo veidlapu ar muļķībām, tā sūdzēsies un uzstās, ka jāiesniedz e -pasts.

3.2 Ievades veidi un modeļi

Ir arī citi ievades veidi, kurus varat pieprasīt. Tie ietver tālruņa numurus, tīmekļa adreses, meklēšanas veidlapas un pat krāsu atlasītājus! Tā kā HTML5 nepārtraukti attīstās, ir skaidrs, ka drīzumā tuvākajā laikā varēsim norādīt vairāk ievades veidu.

Turklāt tādām lietām kā tālruņa numuri, kas atšķiras atkarībā no atrašanās vietas, varat norādīt ievades modeļus. Tie ir izveidoti, izmantojot kaut ko tādu, ko sauc par “regulārajām izteiksmēm”, un tie ir diezgan sarežģīti, bet neizmērojami spēcīgi.

Mēs arī vēlēsimies sniegt e -pasta piemēru savā jomā, lai lietotājam nebūtu nekādu neskaidrību par to, kas viņam jāiesniedz. Tas ir patiešām viegli izdarāms. Vienkārši izveidojiet jaunu “viettura” atribūtu ar e -pasta adreses piemēru.

Mēs nodrošināsim, ka mūsu iecienītākās krāsas lauks ir obligāts. Pēdējā leņķa iekavās (>) e -pasta ievades tagā vienkārši ierakstiet “obligāti”. Tieši tā. Tagad, mēģinot iesniegt veidlapu bez vērtības, tiks parādīts kļūdas ziņojums.

Patiesi neticamā lieta šajos kļūdu ziņojumos ir tā, ka lietotājam tie nav jāraksta vai jāraksta nekāds kods, lai tos izveidotu. Jūs vienkārši maināt lauku, lai tas būtu obligāts, un tas vienkārši darbojas. Ņemot to vērā, ir iespējams tos pielāgot, ja vēlaties.

Tas bija neticami īss ievads par veidlapu jaudu HTML5. Ja vēlaties lasīt vairāk, iesaku apmeklēt šīs saites.

Tālāka lasīšana:

  • CSS triki - rakstīsim semantisko iezīmējumu
  • HTML5 ārsts - parunāsim par semantiku

3.3 Pārbaudi sevi

Nākamnedēļ jums ir dzimšanas diena, un jūs vēlaties izveidot reģistrācijas veidlapu, lai jūs zinātu, cik daudz kūkas jums ir jāizveido. Atveriet teksta redaktoru un izveidojiet veidlapu ar šādiem laukiem.

  • Vārds
  • Epasta adrese
  • Telefona numurs
  • Alerģijas

Pārliecinieties, vai vārda, e -pasta un tālruņa numura lauki ir obligāti un ka e -pasta un tālruņa numura lauki ir iestatīti ar ievades veidiem “e -pasts” un “tel”. Izveidojiet alerģijas lauka vietturi ar vērtību “ziedputekšņi, olas, quiche”.

Spēlējiet ar veidlapu. Mēģiniet iesniegt obligātos laukus kā tukšus un tālruņa numura laukā ievietojiet neskaitliskas rakstzīmes. E -pasta laukā ievietojiet to, kas nav e -pasta adrese. Kas notiek?

4. Vidēji

Kādreiz bija vienīgais veids, kā tīmekļa lapā ievietot video vai audio, izmantojot Flash, Shockwave vai SilverLight.

Tas nebija ideāli. Pirmkārt, neviena no šīm sistēmām nedarbojās tik labi mobilajās ierīcēs. Viņi vienkārši nebija aprīkoti mūsdienu viedtālruņu un planšetdatoru pasaulei.

maršrutētājs pagrabā vājš signāls augšstāvā

Turklāt tie bija patentēti formāti. Tā rezultātā Linux un OS X lietotāji varēja iegūt diezgan otršķirīgu pieredzi vai pat tika liegti patērēt multivides pakalpojumus, jo tas nebija pieejams viņu platformai.

Visbeidzot, viņiem bija tendence būt lēniem. Ja izmantojat datoru ar nepietiekamu jaudu vai vecāku, jums nebūtu laba pieredze video skatīšanā, izmantojot šīs sistēmas. Flash ar to bija īpaši pazīstams.

4.1 Kā HTML5 padara lielisku video un audio

HTML5 to mainīja, ļaujot tīmekļa izstrādātājiem savās tīmekļa lapās iekļaut video un audio, izmantojot tikai dažas koda rindiņas. Tas darbojas kā gardums mobilajās ierīcēs un darbojas katrā mūsdienu tīmekļa pārlūkprogrammā.

Tā rezultātā tādi lieli uzņēmumi kā YouTube, Vimeo un Netflix izmanto HTML5 revolūcijas priekšrocības. Kāpēc ne pievienoties viņiem?

4.2 Viss par kodekiem

Šajā nodaļā jūs uzzināsit, kā izmantot HTML5 iespējas, lai savās tīmekļa lapās iekļautu audio un video.

Pirmkārt, man jāsāk ar atrunu. Lai gan HTML5 video varat izmantot katrā mūsdienu tīmekļa pārlūkprogrammā, tas nedarbojas vienādi katrā tīmekļa pārlūkprogrammā. Katras pārlūkprogrammas izmantotie kodeki atšķiras. Pārlūkprogrammā Internet Explorer varat izmantot tikai MP4 video. Pārlūks Chrome ir nedaudz dāsnāks un ļauj izmantot WebM, MP4 un Ogg Theora video. Opera ir nedaudz ierobežojošāka un ļauj izmantot tikai Theora un WebM video.

Tā rezultātā jums ir jābūt nedaudz gudram, ievietojot video savā tīmekļa lapā. Tātad, redzēsim, kā tas darbojas.

4.3 Sākot ar video

Lai sāktu, jums būs jāizveido daži sākuma un beigu tagi. Šeit atradīsit saiti uz saviem video failiem. Bet vispirms jūs vēlaties uzstādīt plakātu. Ko tas nozīmē?

Kad gaidāt videoklipa ielādi, jūsu vietnes apmeklētājs var redzēt attēlu, kas saistīts ar videoklipu. Lai to izdarītu, vienkārši piešķiriet saviem video tagiem atribūtu “plakāts” ar attēla vērtību, uz kuru vēlaties izveidot saiti. Tam vajadzētu izskatīties šādi.

Nākamā lieta, ko mēs gribēsim darīt, ir izveidot rezervi. Ko tas nozīmē? Tātad, pieņemsim, ka izmantojat kādu no vecākajām, mazāk satriecošajām pārlūkprogrammām. Daudzas no šīm vecajām pārlūkprogrammām neatbalsta HTML5 video un tāpēc nevar atskaņot HTML5 video. Jūs vēlaties atstāt viņiem ziņojumu, informējot viņus, ka viņi vēlas jaunināt savu pārlūkprogrammu un ka viņi to nevarēs skatīties, kamēr viņi to nedarīs.

Lai to izdarītu, vienkārši ierakstiet savu ziņojumu video tagu iekšpusē. Nekas cits nav vajadzīgs. Kad esat to izdarījis, jums tiks atstāts šāds kods.

Tagad pievienosim dažus videoklipus. Es to pārbaudīšu pārlūkā Google Chrome, tāpēc es izveidošu saiti uz MP4 filmu. Lai to paveiktu, es izveidoju avota tagu un piešķiru tam atribūtu src, kuram ir iekļaujamā videoklipa vērtība.

Mana lapa tagad ir gatava atvēršanai manā tīmekļa pārlūkprogrammā. Esmu izveidojis saiti uz filmu, kas patiešām ir patiešām liela un līdz ar to, atverot, var redzēt tikai plakātu.

4.4 Audio pievienošana

Audio var ievietot jūsu tīmekļa lapā tādā veidā, kas ļoti atgādina to, kā mēs ievietojām video savā lapā.

Pirmkārt, tiek izveidoti daži audio tagi. Šajos audio tagos ir atribūts “kontrole”. Tas lietotājam, kurš apmeklē lapu, dod iespēju apturēt, atskaņot attīšanu un pārtīt atskaņoto audio.

Pēc tam MP3 failā, uz kuru vēlaties izveidot saiti, jūs iekļaujat avota tagu. Jums patiešām nav jāuztraucas par kodeku saderību. Jaunākajās tīmekļa pārlūkprogrammās ir iespēja atskaņot MP3 audio, lai gan laba prakse ir iekļaut arī .ogg un .wav failu - katram gadījumam.

Visbeidzot, jūs varat izveidot rezervi vecākiem pārlūkiem. Tas tiek darīts tādā pašā veidā, kādā izveidojāt rezerves videoklipam.

Gala rezultāts izskatās nedaudz līdzīgs šim.

Atverot to savā tīmekļa pārlūkprogrammā, tam vajadzētu izskatīties apmēram šādi.

4.5 Pārbaudi sevi

  • Kādam nolūkam jūsu video tagos ir plakāts?
  • Kādus kodekus nevar izmantot pārlūkprogrammā Internet Explorer?
  • Ja es gribētu iespēju apturēt kādu audio, kādu atribūtu jūs pievienotu savai “audio” atzīmei?

Tālāka lasīšana:

5. CSS3 transformācijas un animācijas

CSS tradicionāli tika izmantots, lai apstrādātu tīmekļa lapas izkārtojumu un dizainu. Tas joprojām ir taisnība, taču savā pēdējā atkārtojumā tas ir ieguvis spēju apstrādāt animācijas un elementu un attēlu pārveidojumus.

Ar CSS3 cilvēki ir paveikuši dažas pārsteidzošas lietas, sākot ar digitālā pulksteņa izveidi un beidzot ar pilnas tenisa spēles uzrakstīšanu. Kāds pat to izmantoja, lai atkārtoti izveidotu ievada kredītus Mad Men. Tā ir patiešām spēcīga tehnoloģija, un, kad tā ir apgūta, to var izmantot, lai savai tīmekļa lapai pievienotu pārsteidzošu funkcionalitātes līmeni.

Šajā nodaļā es jums īsi ievadīšu CSS3 un parādīšu, kā savai lapai pievienot pārsteidzošus efektus.

Vispirms dodieties uz vietni codepen.io un izveidojiet jaunu pildspalvu. Šīs nodaļas laikā mēs to izmantosim kā savu darba vietu.

Mēs sāksim vienkārši un izveidosim vienkāršu attēla pārveidi, kas, pagriežot attēlu, pagriezīs attēlu par 3 grādiem. Vispirms izveidojiet div tagu un piešķiriet tam ID. Tālāk sniegtajā piemērā es tam esmu piešķīris “muo” ID.

5.1 CSS kursora virzīšanas efekti

Šajā nodaļā iekļaujiet izvēlēto attēlu. Esmu pievienojis MakeUseOf logotipa kopiju.

Pēc tam jums būs jāraksta daži stila lapas noteikumi. Tālāk sniegtajā piemērā esmu izveidojis augšējo un kreiso piemali, lai attēlam piešķirtu vietu. Esmu iekļāvis arī ziņkārīga izskata stila lapas noteikumu, kas sākas ar “#muo: lidināties”. Kas tas ir?

Pievienojot stila lapas noteikumam elementu, ID vai klasi “: virziet kursoru”, jūs faktiski sakāt pārlūkam piemērot šo stilu, kad pele pārvalda elementu. Diezgan forši, vai ne?

Noteikumā '#muo: lidināties' mums ir līnija ar uzrakstu '-webkit-transform: rotate (3deg)'. Kā es esmu pārliecināts, ka esat uzminējis, tas liek pārlūkam pagriezt šo div elementu par trim grādiem.

Tomēr ir vērts atzīmēt, ka šis tags darbojas tikai pārlūkā Chrome un Safari. Ja vēlaties, lai jūsu kods darbotos pārlūkprogrammā Firefox vai Internet Explorer 9 un jaunākās versijās, vēlaties mainīt savu CSS failu, iekļaujot šādas rindiņas.

Tagad, virzot kursoru virs attēla, tas izskatās šādi:

5.2 CSS3 izmantošana attēlu mainīšanai

Tātad, kāpēc apstāties tur? Vai zinājāt, ka attēla palielināšanai vai samazināšanai varat izmantot arī pārveidošanas metodi. Maināsim mūsu CSS failu, iekļaujot šādas rindas.

Kā redzat, tagad esam iekļāvuši jaunu pārveidošanas noteikumu, taču šoreiz mēs liekam rīkoties tā, kā to sauc par “mērogu”. Tas ir patiešām skaists veids, kā palielināt attēla izmēru. Tam nepieciešami divi parametri (tie skaitļi, kas redzami starp šīm iekavām), un tie atspoguļo summu, par kādu jūs palielināt elementa augstumu un platumu.

Kā redzams no koda, es palielināšu MakeUseOf div logotipa izmēru par 50%. Jūs varat pārbaudīt šo darbu, virzot kursoru virs tā. Jūs redzēsit, ka tagad MakeUseOf logotips ir ievērojami izstiepts.

Tas bija ļoti maigs ievads CSS3 transformācijās. Neskatoties uz to, ka CSS3 patiešām ir ļoti jauns, tagad jūs varat redzēt, ka ar to varat veikt daudzas ļoti interesantas manipulācijas.

5.3 Pārbaudi sevi

  • Kā mēs piemērojam stilu elementam, kad virzāt kursoru?
  • Kā pagriezt attēlu, izmantojot CSS3?
  • Kā mērogot attēlu, izmantojot CSS3?
  • Kas notiek, ja jūs nododat savu pārveidošanas metodi “tulkot (50 pikseļi, 50 pikseļi)”?

Tālāka lasīšana:

HTML5 Rocks - prezentācija

6. Pietiek Javascript

Ja vēlaties savā tīmekļa pārlūkprogrammā izmantot skriptu, jums jāizmanto Javascript. Diemžēl nav divu veidu. Tā ir valoda, kurai ir daudz fanu un arī daudz nelabvēļu. Kā valodas iet, tai ir daudz kārpu. Ir iemesls, kāpēc ievērojamākā grāmata par valodu tiek saukta par “Javascript: labās daļas”.

Vienā nodaļā nebūs iespējams iemācīt jums izmantot Javascript. Šeit tas nav mērķis. Mērķis ir iemācīt jums pietiekami daudz Javascript, lai jūs varētu saprast nākamo nodaļu, kas ir par tehnoloģijas, ko sauc par audeklu, izmantošanu zīmējumu un animāciju veidošanai.

6.1 Piekļuve konsolei

Lai to izdarītu, mēs izmantosim Javascript konsoli, kas ir iebūvēta katrā Google Chrome eksemplārā. Lai tam piekļūtu, ar peles labo pogu noklikšķiniet uz jebkuras tīmekļa lapas un pēc tam nospiediet “Pārbaudīt elementu”. Pēc tam noklikšķiniet uz 'Konsole'. Jums vajadzētu redzēt šo.

Tradicionāli pirmā programma, ko jebkurš topošais izstrādātājs jebkad raksta, ir programma “Sveika pasaule”. Šī ir vienkārša programma, kas izdrukā frāzi “Sveika pasaule”, nevis daudz ko citu. Savā konsolē ierakstiet 'console.log (' Sveika pasaule! ') ;.

6.2 Jūsu pirmā programma

Tātad, ko tieši mēs darījām? Vispirms mēs saucām par “console.log”. Šis ir kods, kas ir iebūvēts datorā un vienkārši izdrukā visu, ko jūs tam sakāt. Pēc tam mēs tam pievienojām dažas iekavas un iekļāvām pēdiņās “Hello World”. To sauc par “argumentu nodošanu”, un mūsu pieņemto argumentu veidu sauc par virkni. Ikreiz, kad vēlaties kaut ko darīt, izmantojot burtus un īpašas rakstzīmes, jums vienkārši jāizmanto vienas pēdiņas. Tomēr, ja vēlaties kaut ko darīt, izmantojot ciparus, jums parasti nav jāizmanto pēdiņas, kā redzams zemāk.

6.3 Mainīgie JavaScript

Varat arī nosūtīt mainīgos uz “console.log”. Mainīgie izklausās sarežģīti, taču patiesībā tie ir tikai vieta informācijas gabalu ievietošanai. Bieži vien tie ir cipari vai burti. Lai to izdarītu, jūs deklarējat mainīgo, izmantojot atslēgvārdu “var”, piešķiriet tam nosaukumu un pēc tam ar vienādības zīmi piešķiriet tam vērtību. Tātad, es izveidošu mainīgo ar nosaukumu “sveiki” un pēc tam piešķiršu tam vērtību “Sveika pasaule!”. Tad es to nodošu konsolei.log.

Ņemiet vērā, kā es nenosūtīju sveicienu konsolei.log, izmantojot pēdiņas. Tas ir tāpēc, ka es gribēju uz konsoli izdrukāt “sveiki” saturu, nevis “labdien”.

6.4 Kādas funkcijas veic

Var būt mazliet apnicīgi pārrakstīt vienu un to pašu koda daļu atkal un atkal, tāpēc šī iemesla dēļ mēs rakstām funkcijas. Funkcijas ir vieglākas, nekā jūs domājat. Tie ir tikai koda gabali, kurus mēs varam izmantot atkārtoti, nepārrakstot to pašu kodu vēlreiz. Tālāk mēs esam izveidojuši funkciju ar nosaukumu “sup” un nododam tai argumentu, izmantojot iekavas, kas pēc tam tiek reģistrēta ekrānā. Mēs saucam “sup”, nosūtot uz konsoli “sup” (“Sveika pasaule!”); ”.

6.5 Darbības atkārtošana ar cilpu “Par”

Pieņemsim, ka vēlējāties veikt vienu un to pašu darbību noteiktu skaitu reižu. Šī iemesla dēļ mēs izmantojam cilpu “for”. Sākumā tie izskatās biedējoši, bet tos ir tik viegli izdarīt, kad tos saprotat. Sākumā rakstiet “par ()”.

Šajās iekavās mēs vēlēsimies izveidot mainīgo, kas saskaitītu, cik reizes esam veikuši kādu darbību. Tātad, mēs iegūstam kaut ko līdzīgu šim: “(var i = 0;)”.

Tad mēs vēlamies pārbaudīt, vai neesmu izpildījis kādu nosacījumu. Tātad šajā gadījumā mēs vēlamies redzēt, ka tas ir mazāks par 10. Tātad pēc semikolu mēs rakstām “i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

Ja i ir mazāks par 10, mēs vēlamies to pievienot pa vienam un pēc tam kaut ko darīt. Tātad, mēs ievietojam “i = i + 1”. Mūsu cilpa ir gandrīz pabeigta: 'for (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

Pēc tam mēs vēlēsimies veikt kādu darbību. Tātad, pēc pēdējām iekavām, mēs rakstām dažas cirtainas skavas un starp tām mēs gatavojamies mierināt. Log vērtība i. Tādējādi tiks izveidots skaitītājs līdz deviņiem.

Pēdējās divas programmēšanas konstrukcijas, kuras mēs apskatīsim, ir paziņojumi “ja” un “kamēr”.

6.6 Ja paziņojumi

Paziņojums “ja” veic darbību, ja ir izpildīti noteikti kritēriji. Tie ir līdzīgi cilpām “for” būvniecībā un darbojas šādi. Pieņemsim, ka jums ir mainīgais ar nosaukumu “cheeseburgers” un vēlaties redzēt, vai tā vērtība ir “garšīgs”. Ja tā notiek, ekrānā vēlaties reģistrēties “yum, cheeseburgers”. Lai to izdarītu, jūs uzrakstītu kaut ko līdzīgu šim.

Ņemiet vērā, kā es uzrakstīju “ja (siera burgeri ==“ garšīgi ”)”. Jūs izmantojat dubultu vai trīskāršu vienādojumu, lai pārbaudītu vienlīdzību, un vienu vienādu, lai piešķirtu vērtību.

6.7 Kamēr cilpas

Visbeidzot, cikla cikls izpilda darbību, kamēr ir izpildīti kritēriji. Tātad, iedomājieties, ka vēlaties reģistrēties “yum, cheeseburgers”, kamēr siera burgeri ir vienlīdz garšīgi. Lai to izdarītu, uzrakstiet sekojošo.

Ir vērts atzīmēt, ka tas nonāktu bezgalīgā ciklā, un jums vajadzētu izvairīties no darbības ar vērtību, kas, visticamāk, nemainīsies. Tas var izraisīt pārlūkprogrammas bloķēšanu vai koda nedarbošanos.

Kā jau minēju iepriekš, tas bija ļoti īss ievads par programmēšanas konstrukcijām Javascript. Jūs esat aicināti lasīt vairāk par šo aizraujošo, kaut arī milzīgo tēmu.

6.8 Pārbaudi sevi

  • Es vēlos skaitīt no 30. Uzrakstiet cilni “par”, kas to darītu.
  • Es vēlos izveidot mainīgo ar nosaukumu “makeuseof” un piešķirt tam “awesome” vērtību. Kā tas tiek darīts?
  • Es vēlos izveidot funkciju, kas pēc izsaukšanas izdrukā tekstu “MakeUseOf Is Awesome”. Uzrakstiet šo funkciju.

Tālāka lasīšana:

7. Radošais audekls

Canvas ir lieliska tehnoloģija, kas ļauj zīmēt attēlus un veidot animācijas, neizmantojot Flash vai Silverlight. Cilvēki to ir izmantojuši, lai radītu dīvainas un brīnišķīgas lietas, tostarp fēna simulatoru un dažādas videospēles. Tā ir brīnišķīga un neaptverami liela tehnoloģija, šajā apmācībā es sniegšu jums īsu ievadu par to.

Ir vērts atzīmēt, ka Canvas darbojas tikai mūsdienu tīmekļa pārlūkprogrammās. Ja izmantojat veco IE, Chrome vai Firefox versiju, iespējams, nevarēsit izlasīt šo nodaļu. Ja tas tā ir, apsveriet iespēju lejupielādēt jaunāko Google Chrome versiju, kas bija tīmekļa pārlūkprogramma, kurā izveidoju šo apmācību.

7.1 Darba sākšana ar Canvas

Pirmkārt, jums būs jāatver tīmekļa pārlūkprogramma un jādodas uz vietni codepen.io. Izveidojiet jaunu pildspalvu.

Tagad mums būs jādeklarē audekla elements. Izveidojiet divus Canvas sākuma un aizvēršanas tagus. Tajos jums vajadzētu nodot trīs atribūtus. Tie ir audekla elementa platums un augstums kopā ar ID, ko tam piešķirat. Tāpat kā iepriekš, ievietojot videoklipu, jums jāiekļauj rezerves ziņojums.

Tagad mēs vēlēsimies uzrakstīt kādu Javascript kodu, kas kaut ko piesaistīs ekrānam. Mēs sāksim pamata un izveidosim vienkāršu sarkanu kvadrātu.

Mēs izveidosim mainīgo (es to nosaucu par demonstrāciju) un pēc tam atlasīsim audekla elementu un piešķirsim to šim mainīgajam. Lai to izdarītu, izmantojiet dokumentu.getElementByID () un ievadiet tā elementa ID, kuru vēlaties atlasīt.

Mūsu skripta otrā rinda izveido citu mainīgo, ko sauc par “kontekstu”, un pēc tam uz tā izsauc “demo.getContext (“ 2d ”)”. Tas pārlūkprogrammai paziņoja, ka mēs strādāsim pie 2d attēla, un pēc tam nokārtojām nepieciešamās funkcijas, kas vajadzīgas, lai zīmētu uz ekrāna.

Trešā un ceturtā līnija ir tās, kas zīmē ekrānu. Trešā līnija aizpilda taisnstūri ar sarkanu krāsu, bet ceturtā līnija sauc fillRect, kas to pozicionē un nosaka tā garumu un platumu.

Tas tomēr nav iespaidīgi. Darīsim kaut ko nedaudz modernāku un izmantosim Javascript un Canvas burvību, lai izveidotu MakeUseOf pavisam jaunu logotipu.

7.2 Formas un teksts

Izdzēsīsim ceturto rindiņu un aizstāsim to ar rindu, kas novieto mūsu taisnstūri augšējā kreisajā stūrī un izstiepj to visā audekla garumā.

Pirmie divi argumenti nosaka, kur vēlamies novietot formas x un y asi. Pagaidām iestatīsim šos divus uz “0”. Trešais arguments attiecas uz formas platumu. Iestatīsim to uz “200” un pēc tam atstāsim ceturto argumentu uz “50”. Tagad jums vajadzētu iegūt kaut ko līdzīgu šim.

Tas ir lielisks sākums, taču tajā vispār nav minēts MakeUseOf. Tātad, mēs pievienosim tekstu. Izveidosim mainīgo, kas satur “makeuseof”, un mēs to nosauksim par “MakeUseOf”.

Pēc tam mēs vēlēsimies izveidot citu konteksta mainīgo. Nosauciet šo “kontekstu2” un pārliecinieties, vai tas ir 2d. Tieši to mēs izmantosim, lai rakstītu savu tekstu.

Mēs vēlamies, lai mūsu teksts būtu zilā krāsā un pārklātu mūsu sarkano kvadrātu. Tātad, tāpat kā iepriekš, mēs vēlēsimies tam piešķirt aizpildīšanas stilu “zils”. Tagad mēs izvēlēsimies mūsu teksta īpašības. Mēs vēlamies, lai tas būtu 20 pikseļu liels, treknrakstā un ar Arial fontu. Mēs saucam fontu par kontekstu2 un piešķiram tam vērtību “bold 20px arial”.

Tā kā mēs vēlamies, lai šis teksts pārklātu mūsu iepriekšējo sarkano lodziņu, kontekstā2 ir jāizsauc “textBaseLine” un jāpiešķir tai augstākā vērtība. Kad tas ir pabeigts, mēs kontekstu2 saucam par “fillText” un nododam tam mainīgo, kas satur mūsu tekstu un x un y koordinātas, kurās plānojam ievietot tekstu. Mūsu koda gala rezultāts ir apmēram šāds.

Koda radītais attēls izskatās šādi.

7.3 Vārds uz audekla

Lai gan tas bija neticami vienkāršs ievads Canvas, jums vajadzētu saprast, ka tā ir arī neticami liela tehnoloģija un neticami spēcīga palaišanas tehnoloģija. Šī rokasgrāmata vienkārši kalpoja kā ievads grafikas veidošanā, izmantojot šo jauno tehnoloģiju.

kā es varu atgriezties pie vecā gmail

7.4 Pārbaudi sevi

  • Pievienojiet izveidotajam attēlam šādu saukli: 'Visu laiku labākā tehnoloģiju vietne!'
  • Izveidojiet cilni “for”, kas darbojas desmit atkārtojumos. Pārbaudiet, vai varat pārvietot zīmējumu pa audeklu pa pikseļiem vienlaikus.
  • Aptiniet zīmējumu funkcijā. Kas notiek, ja to nesauc?

Tālāka lasīšana:

8. Kur tālāk?

Paldies, ka izlasījāt manu neticami īso ceļvedi par jaunajām tehnoloģijām, kas atrodamas HTML5. Nav noliedzams, ka HTML5 ir nākotnes tehnoloģija. To pārņem lielākā daļa tehnoloģiju, jo to ir viegli rakstīt un tas ir spēcīgs. Cilvēki ar to visu laiku dara neticamas lietas, un es nešaubos, ka nākotnē jūs būsiet viens no šiem cilvēkiem. Man ir tas gods būt daļai no jūsu ceļojuma mežonīgajā un brīnišķīgajā HTML5 pasaulē.

Es lūdzu jūs turpināt mācīties. Turpiniet kodēt. Turpiniet paaugstināties un pilnveidoties, un īsā laikā jūs izmantosit šajā īsajā rokasgrāmatā ieviestās tehnoloģijas, lai radītu brīnišķīgus produktus.

Kopīgot Kopīgot Čivināt E -pasts Vai ir vērts jaunināt uz Windows 11?

Windows ir pārveidots. Bet vai ar to pietiek, lai pārliecinātu jūs pāriet no Windows 10 uz Windows 11?

Lasīt Tālāk Saistītās tēmas
  • WordPress un tīmekļa izstrāde
  • HTML5
  • Longform
  • Longform ceļvedis
Par autoru Metjū Hjūzs(Publicēti 386 raksti)

Metjū Hjūzs ir programmatūras izstrādātājs un rakstnieks no Liverpūles, Anglijā. Viņš reti sastopams bez tasītes spēcīgas melnas kafijas rokā un absolūti dievina savu Macbook Pro un kameru. Jūs varat izlasīt viņa emuāru vietnē http://www.matthewhughes.co.uk un sekot viņam Twitter vietnē @matthewhughes.

Vairāk no Metjū Hjūza

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu