Magsimula Sa HTML5

Magsimula Sa HTML5
Ang gabay na ito ay magagamit upang i-download bilang isang libreng PDF. I-download ang file na ito ngayon . Huwag mag-atubiling kopyahin at ibahagi ito sa iyong mga kaibigan at pamilya.

Talaan ng nilalaman

§1. Panimula





§2 – Semantic Markup



§3 – Mga Porma





§4 - Katamtaman

§5 – CSS3 Transformations And Animations



§6 – Sapat na Javascript lamang

§7 – Malikhaing Canvas



§8 – Saan Susunod?

1. Panimula

Narinig mo ito: HTML5. Ginagamit ito ng lahat. Ipinapahayag bilang tagapagligtas ng Internet, pinapayagan ang mga tao na lumikha ng mayaman, nakakaengganyong mga web page nang hindi gumagamit ng Flash at Shockwave.



Ngunit ano talaga ito?

Sa gayon, hindi iyon isang madaling tanong na dapat sagutin. Sa tutorial na HTML5 na ito, susubukan naming magbigay ng ilang mga sagot. Ginagamit ang HTML5 upang ilarawan ang isang talagang magkakaibang pangkat ng mga bagay. Ito ay pamantayan ng pagsulat ng mga web page. Ito ay isang koleksyon ng mga API. Ito ay isang bagong paraan ng pagdaragdag ng pagkakakonekta sa mga web page.

HTML5 ang lahat ng iyon at higit pa. Kaya tungkol saan ang librong ito?

Sa tutorial na HTML5 na ito, ipagpapalagay ko na sa iyo sa ilang mga punto ay nagalaw sa HTML at CSS. Marahil ay nakalikha ka ng iyong sariling tema ng Wordpress, o na-edit ang isang layout ng MySpace noong araw. Marahil ay nabasa mo ang sariling gabay ng XHTML ng MakeUseOf. Ang punto ay, ipinapalagay ko na alam mo ang iyong paraan sa paligid ng isang web page at kung ano ang tinatalakay namin sa patnubay na ito ay hindi magiging masyadong alien sa iyo.

Ang layunin ng gabay na ito ay hindi magturo sa iyo ng kabuuan ng HTML5. Iyon ay magiging ganap na wala sa saklaw ng aklat na ito. Ang layunin ay upang magbigay ng isang banayad na pagpapakilala sa mga kamangha-manghang mga bagong teknolohiya sa web, at upang ipakita sa iyo ang ilang mga cool na paraan ng pagsasama sa mga ito sa iyong mga website.

Bakit mo nais na malaman ang HTML5?

Ito ay isang makatarungang tanong. Sa isang mundo ng mga smartphone at app, mahalaga bang malaman kung paano mag-program ng mga web page?

Kaya, maniwala ka o hindi, karaniwan talagang magsulat ng mga aplikasyon ng smartphone gamit ang mga teknolohiyang HTML5. Hanggang kamakailan lamang, ang Facebook app para sa Android ay nakasulat gamit ang HTML5, CSS at Javascript.

Ang Blackberry ay isa pang pangunahing kumpanya na labis na masigasig sa HTML5. Ito ay halata sa pinakabagong pag-ulit ng kanilang mobile operating system, ang Blackberry OS 10, kung saan aktibo nilang hinihikayat ang mga developer na bumuo ng mga application para sa kanilang mga telepono gamit ang mga teknolohiyang web.

Ang bagong smartphone ng Firefox OS ay buong tatakbo sa mga HTML5 app din. Ang isang gumaganang kaalaman sa HTML5 ay mahalaga sa klima ng smartphone ngayon.

Bilang karagdagan, ang pag-aaral ng HTML5 ay mabuti para sa iyong karera. Huwag kang maniwala? Ayon sa Truth.com , ang average na taunang suweldo para sa isang developer ng HTML5 ay isang nakakagulat na $ 89,000. Sa parami ng parami ng mga kumpanya na binabago ang kanilang mga website upang magamit ang mga teknolohiyang HTML5, hinahanap ang mga developer na alam ang stack ng HTML5 - ngayon higit pa sa dati.

1.1 Mga Pangangailangan

Ipinapalagay ng tutorial na HTML5 na ito ang ilang mga bagay. Una, ipinapalagay nito na alam mo kung paano gumagana ang web, at alam mo kung paano lumikha ng isang pangunahing web page. Dapat mong mag-cobble ng ilang mga elemento ng HTML nang magkasama at upang maipakita ang ilang impormasyon sa isang web browser. Nakikita at

ang mga tag ay hindi masyadong nakakatakot, at hindi ka natatakot na madungisan ang iyong mga kamay sa ilang source code.

Pangalawa, ipinapalagay ng gabay na ito na alam mo kung ano ang CSS at kung paano ito gumagana. Hindi namin inaasahan na ikaw ay maging mga henyo sa disenyo, at hindi rin inaasahan na malalaman mo ang buong detalye ng CSS sa likuran mo. Gayunpaman, dapat mong mailapat ang istilo sa isang elemento sa isang web page, makapag-link sa isang CSS file at malaman ang pagkakaiba sa pagitan ng isang ID at isang klase at kung paano ilapat ang istilo sa bawat isa sa kanila.

Kung napakamot ka ng ulo sa itaas, huwag magalala. Ang isa sa mga pinakamahusay na bagay tungkol sa HTML at CSS ay talagang, napakadali. Sa katunayan, ang MakeUseOf ay may hindi kapani-paniwala na gabay sa XHTML na magdadala sa iyo sa bilis na talagang napakabilis.

Matapos basahin ang patnubay na iyon, baka gusto mo ring tingnan ang mga sumusunod na artikulo:

Kakailanganin mo rin ang isang modernong text editor at browser. Anumang bersyon ng Internet Explorer na mas matanda kaysa sa IE 9 at ilang mas matandang bersyon ng Safari, Chrome at Firefox ay makikipagpunyagi sa maraming mga tampok na bahagi ng HTML5 at maaaring hadlangan kang sundin ang gabay na ito.

Bilang isang resulta, hinihimok kang mag-download ng isang modernong browser. Inirerekumenda ko ang Google Chrome, at gagamitin ko ito sa bawat halimbawa.

Higit pa rito, ang kakailanganin mo lamang ay ang pagpayag na malaman. Oh, at isang text editor.

1.2 Mga Editor ng Teksto Para sa Pag-unlad sa Web

Ang iyong text editor ang iyong gagamitin upang isulat ang iyong code. Maaaring nagtataka ka kung ano ang isang text editor.

Sa gayon, una ay hindi ito isang word processor. Ang mga programang tulad ng Microsoft Word at Mga Pahina ng Apple ay ganap na hindi nakaayos sa pagbuo ng web. Iyon ay dahil nakakabit sila ng karagdagang impormasyon sa iyong mga file na HTML, CSS at Javascript na nagpapahirap sa pagbabasa ng iyong web browser.

Ang isang text editor ay nag-shoot ng mga character sa isang text file, at hindi marami pang iba. Pinapayagan kang lumikha ng mga file na walang labis na pag-format, at mai-save sa anumang extension na iyong pinili.

Ang iyong computer ay mayroon nang isa. Kung gumagamit ka ng isang Windows PC, pagkatapos ang Notepad ay ang text editor na malamang na na-install mo.

Sa isang Mac, ang sitwasyon ay bahagyang naiiba. Dumarating ang OS X kasama ang apat na magkakaibang mga editor ng teksto. Tinatawag itong Vim, Emacs, Pico at Nano. Gayunpaman, hindi katulad ng Notepad, lahat sa kanila ay nangyayari na nagtatrabaho sa terminal.

Ito ay medyo nakakatakot para sa mga taong bago sa pag-unlad sa web at hindi dapat gamitin ng mga taong bago sa pag-unlad ng software. Hindi namin gagamitin ang mga ito sa gabay na ito. Gayunpaman, kapag nakakuha ka ng medyo tiwala sa pag-unlad ng software at web, tiyak na sulit na tingnan ang Vim at Emacs. Pareho silang malakas na mga editor ng teksto, at kapag pinagkadalubhasaan ay maaaring makatipid sa iyo ng isang kakila-kilabot na oras.

Sa Linux, ang default na text editor ay nag-iiba sa pagitan ng mga pamamahagi. Sa Ubuntu, malamang na Gedit, na kung saan ay isang kaaya-ayang text editor na hindi gaanong naiiba mula sa Notepad.

Gayunpaman, sa kursong ito isusulat namin ang aming code gamit ang tatlong magkakaibang mga tool.

Ang una ay Sublime Text 2. Sa totoo lang hindi ko marekomenda ito ng lubos. Dumarating ito sa lahat ng mga bagay na nagpapadali sa buhay para sa isang nagsisimula nang nag-develop. Una, gagawin nitong mas madaling basahin ang iyong code sa pamamagitan ng pagkulay ng ilang mga bahagi. Pangalawa, pinapayagan kang lumipat sa pagitan ng mga file nang madali at upang pamahalaan ang buong mga proyekto ng mga file. Mainam ito para sa paglipat sa pagitan ng mga file, at pag-edit ng maraming piraso ng code nang mabilis.

Ang pangatlo ay ang Javascript console na binuo sa Google Chrome. Pinapayagan kaming magsulat ng Javascript at makita itong tumatakbo kaagad at gagamitin upang ipaliwanag ang mga pangunahing konsepto ng programa.

Ang pangalawa ay isang website na tinatawag na Codepen.io. Papayagan ka ng kapansin-pansin na website na ito na mag-code ng HTML, CSS at Javascript sa browser at malayang gamitin. Papayagan ka ring makita kaagad ang iyong mga pagbabago.

2. Semantic Markup

Sa kabanatang ito, malalaman mo ang tungkol sa Semantic Markup, at kung paano ayusin ang iyong code batay sa nilalaman nito.

Hanggang kamakailan lamang, ang HTML code ay pangkalahatang naayos kasama ng mga tag. Pinapayagan ka nitong lumikha ng isang pangkat ng mga elemento at pagkatapos ay maglapat ng estilo sa mga elementong iyon.

Nagtrabaho ito, ngunit may lugar para sa pagpapabuti. Ang problema sa mga tag ay hindi ito semantiko. Wala talagang kahulugan ang Div, talaga.

Ang semantic markup ay isang bagong tampok sa HTML5. Nagdadala ito ng mga bagong tag, na gumagana sa parehong paraan bilang isang 'div' na tag, ngunit para sa pag-tag ng mga karaniwang bahagi ng isang pahina.

Kaya, paano sila gumagana? Isaalang-alang ang sumusunod na code.

Sa piraso ng code na ito, mayroon kaming isang bar ng nabigasyon, isang pamagat at isang listahan. Hindi ito masyadong kaiba sa karamihan sa mga website na malamang na magpatuloy, kapag iniisip mo ito.

paano ko tatanggalin ang aking hot mail account

Tingnan natin ang isang artikulo sa MakeUseOf. Mapapansin mo na mayroong isang bahagi ng pahina na nakalaan nang buo para sa pag-navigate sa iba pang mga artikulo. Mapapansin mo rin na may isa pang bahagi ng pahina na naglalaman ng mga salitang bumubuo ng isang artikulo. Patungo sa tuktok ng pahina, makakakita ka ng isang header na naglalaman ng logo ng MakeUseOf at ilang iba pang mga link.

Kapag iniisip mo ito, maraming mga website ang sumusunod sa mga kombensyon na ito. Karamihan sa mga website ay may bahagi na nakalaan para sa pag-navigate. Karaniwan silang mayroong isang nilalaman ng nilalaman. Mas malamang na magkaroon sila ng isang header.

Ang mga tag na semantiko ay mga tag na nagbibigay-daan sa iyo upang tukuyin ang mga bahagi ng isang website na karaniwang matatagpuan sa karamihan ng mga website. Hindi sila nagdagdag ng anuman sa pahina, ngunit pinapayagan kang mag-pangkat ng mga tag batay sa kanilang nilalaman at maglapat ng mga istilo sa mga pangkat na iyon.

Kaya, tandaan ang code na mayroon tayo dati? Tingnan natin ito na may idinagdag na ilang marka ng semantiko.

Tulad ng nakikita mo, ang code ay mas madaling basahin. Alam mo kung aling mga bahagi ang alin at walang kalabuan. Ito ay mahalaga, sapagkat ginagawang mas madali ang pagsulat ng mabuti, malinis na code. Kung sakaling magpasya kang maging isang propesyonal na taga-disenyo ng web, ito ay magiging pinakamahalaga - hindi mo alam kung sino ang magbabasa ng gawaing iyong ginawa.

Kaya, tingnan natin ang ilang higit pang mga marka ng marka ng semantiko.

2.1 Seksyon

Ang seksyon ay talagang kapaki-pakinabang na tag. Ginagamit ito para sa pagkuha ng malalaking swathes ng impormasyon at nilalaman na minarkahan ng isang heading o isang pamagat. Isipin ito tulad ng isang kabanata sa isang libro. Ang isang kabanata ay may pamagat, at maaari ring maglaman ng mga larawan, diagram, grap at salita. Gagamitin ang isang tag ng seksyon upang maglaman ng lahat ng iyon.

2.2 Artikulo

Ginamit ang tag ng artikulo para sa kung ano ang tunog nito; Naglalaman ng nilalaman tulad ng isang post sa blog o isang balita. Ang nilalaman na ito ay dapat na maalis mula sa natitirang blog at magkaroon pa rin ng magkakaugnay na kahulugan.

2.3 Bukod

Ang tag na ito ay nakalaan para sa nilalaman na nauugnay, ngunit hindi isang mahalagang bahagi ng web page. Ito ay maaaring isang pangkat ng mga katotohanan na nauugnay sa isang balita, o talambuhay ng isang gumagamit sa isang blog.

2.4 Header

Maraming mga web page ay may isang bar sa tuktok ng pahina na naglalaman ng isang logo, ilang impormasyon na nauugnay sa site at marahil ilang mga link. Sa marka ng Semantiko, gagamit ka ng isang tag ng Header upang maglaman ng lahat ng ito.

2.5 Nav

Ang elementong ito ay nakalaan para sa bahagi ng nabigasyon ng iyong website. Maglalaman ito ng mga link sa iba pang mga website o sa iba pang mga pahina sa website. Sa loob ng konteksto ng MakeUseOf, maaaring ito ang bahagi ng pahina na nasa ibaba ng header.

Nakalaan ang tag na ito para sa ibabang bahagi ng pahina. Dito, maaari kang maglagay ng ilang mga detalye sa pakikipag-ugnay, impormasyon sa copyright, isang mapa o ilang mga link sa iyong pahina na 'tungkol sa akin'.

2.7 Subukan ang Iyong Sarili

  • Ano ang Semantic Markup, at para saan ito ginagamit?
  • Gumagawa ako ng isang web page at nais kong gumamit ng isang semantic tag upang maglaman ng isang talambuhay tungkol sa akin. Alin ang gagamitin ko?

3. Mga form

Kung nakagawa ka na ng kaunting disenyo ng web, marahil alam mo kung paano lumikha ng isang simpleng form sa HTML. Kung ikaw ay talagang matalino, marahil alam mo kung paano kumuha ng impormasyong nakukuha mo mula sa iyong form at kung paano gumawa ng isang bagay dito, tulad ng ilagay ito sa isang database.

Ang mga form ay napakahalaga. Ang mga ito ang batayan ng karamihan sa mga bagay na ginagawa namin sa Internet. Sa tuwing lumikha ka ng pag-update ng katayuan sa iyong paboritong social network, bumili ng anumang bagay mula sa Amazon, o magpadala ng isang email, marahil ay gumamit ka ng isang form na HTML.

Ang malamang na hindi mo alam ay ang paraan ng paglikha ng mga form na radikal na nabago sa HTML5. Ito rin ay makabuluhang mas mahusay. Sa kabanatang ito, titingnan namin ang ilan sa mga cool na bagay na maaari mo na ngayong gawin, sa simpleng lumang markup lamang.

Kaya, ano ang cool tungkol sa bagong paraan na maaari kaming magsulat ng mga form sa HTML5? Una, maaari mong matiyak na ang ilang mga patlang ay dapat mapunan upang maisumite, sa pamamagitan lamang ng pagbabago ng markup ng form mismo. Bilang karagdagan, hindi mo na kailangang magsulat ng mga bundok ng JavaScript o PHP upang magawa ito. Ito ay walang gaanong kadali.

Pangalawa, maaari mong matiyak na ang iyong mga gumagamit ay maaaring magsumite lamang ng ilang mga uri ng impormasyon sa iyong form. Kaya, ipagpalagay nating mayroon kang isang website para sa iyong mailing list at nais mo lamang na ang mga tao ay makapag-sumite ng aktwal na mga email address? Maaari mong gawin iyon, sa pamamagitan lamang ng paggamit ng HTML5. Talagang napakalakas nito.

Pangatlo, maaari mong gawing mas mahusay ang iyong mga form sa pamamagitan ng pagbibigay ng ilang mga larangan ng isang placeholder. Gagawin nitong mas makabuluhan ang mga ito, dahil maipapakita mo sa iyong mga gumagamit ang isang halimbawa ng iyong inaasahan para sa isang form.

3.1 Pagpapabuti ng isang Form

Kaya, tingnan natin ang isang form at tingnan kung paano natin ito mapapabuti.

Ang form na ito ay medyo basic. Tumatagal ito sa isang pangalan, isang email at isang paboritong kulay, at pagkatapos ay pinapayagan ang gumagamit na isumite iyon. Naglalaman ito ng walang pagpapatunay kung anong impormasyon ang inilalagay dito, at walang humihinto sa mga gumagamit na isumite ang form na ito sa ilang mga walang laman na patlang. Baguhin natin lahat yan.

Kaya, ang unang bagay na nais naming gawin ay tiyakin na ang patlang ng email ay tumatagal lamang ng isang email. Dati ito ay isang napakahirap na gawain, dahil kailangan mong lumikha ng lahat ng uri ng arcane Regex code. Well, hindi na. Kailangan mo lang baguhin ang uri ng input mula sa 'text' hanggang 'email'. Kapag sinubukan mong isumite ang form na iyon nang walang kabuluhan, magreklamo ito at igiit na magsumite ka ng isang email.

3.2 Mga Uri at pattern ng pag-input

Mayroong iba pang mga uri ng pag-input, na maaari mong kailanganin. Kasama rito ang mga numero ng telepono, web address, form sa paghahanap, at kahit mga tagapili ng kulay! Habang ang HTML5 ay patuloy na umuusbong, makatuwiran na sa lalong madaling panahon makakaya naming tukuyin ang higit pang mga uri ng pag-input sa malapit na hinaharap.

Bukod dito, para sa mga bagay tulad ng mga numero ng telepono na nag-iiba depende sa lokalidad, maaari mong tukuyin ang mga pattern para sa mga input. Nilikha ang mga ito gamit ang isang bagay na tinatawag na 'Regular Expressions' at sa halip kumplikado, ngunit hindi masusukat malakas.

Gusto rin naming magbigay ng isang halimbawa ng isang email sa aming larangan, kung kaya't walang kalabuan ang gumagamit sa kung ano ang dapat niyang isumite. Napakadaling gawin iyon. Lumikha lamang ng isang bagong katangian ng 'placeholder' na may isang halimbawa ng email address.

Titiyakin namin na kinakailangan ang aming patlang na 'Paboritong Kulay'. Sa huling anggulo na bracket (>) sa tag ng pag-input ng Email, isulat lamang ang 'kinakailangan'. Ayan yun. Ngayon, kapag sinubukan mong isumite ang iyong form nang walang halaga, makakagawa ito ng isang mensahe ng error.

Ang talagang hindi kapani-paniwala na bagay tungkol sa mga mensahe ng error na ito ay hindi kailangang isulat ng gumagamit ang mga ito o sumulat ng anumang code upang likhain ang mga ito. Binabago mo lang ang isang patlang upang gawin itong kinakailangan, at gagana lamang ito. Sa nasabing iyon, posible na ipasadya ang mga ito, kung nais mo.

Iyon ay isang hindi kapani-paniwalang maikling pagpapakilala sa kapangyarihan ng mga form sa HTML5. Kung nais mong magbasa nang higit pa, inirerekumenda kong bisitahin mo ang mga link na ito.

Karagdagang Pagbasa:

  • Mga Trick ng CSS - Sumulat tayo ng marka ng semantiko
  • HTML5 Doctor - Pag-usapan Natin Tungkol sa Semantics

3.3 Subukan ang Iyong Sarili

Kaarawan mo sa susunod na linggo, at nais mong lumikha ng isang form sa pagpaparehistro upang malaman mo kung magkano ang cake na kailangan mong likhain. Buksan ang iyong text editor at lumikha ng isang form kasama ang mga sumusunod na larangan.

  • Pangalan
  • Email address
  • Numero ng telepono
  • Mga alerdyi

Siguraduhin na ang mga patlang ng pangalan, email at numero ng telepono ay sapilitan, at ang mga patlang ng Email at Numero ng Telepono ay itinatakda kasama ang mga uri ng pag-input na 'email' at 'tel'. Lumikha ng isang placeholder para sa patlang ng allergy na may halagang 'polen, mga itlog, quiche'.

Maglaro kasama ang form. Subukang isumite ang kinakailangang mga patlang bilang walang laman, at subukang ipasok ang mga hindi numerong character sa patlang ng numero ng telepono. Sa patlang ng email, magsingit ng isang bagay na hindi isang email address. Anong nangyayari

4. Karaniwan

Dati ay may isang oras kung saan ang tanging paraan kung saan maaari kang magpasok ng ilang video o audio sa isang web page ay sa pamamagitan ng paggamit ng isang bagay tulad ng Flash, Shockwave o SilverLight.

Hindi ito perpekto. Una, wala sa mga balangkas na ito ang gumana nang maayos sa mga mobile device. Hindi lamang sila nasangkapan para sa modernong mundo ng mga smartphone at tablet.

kung paano makakuha ng netflix sa nintendo switch

Bilang karagdagan, sila ay pagmamay-ari na mga format. Bilang isang resulta, ang mga gumagamit ng Linux at OS X ay maaaring makakuha ng isang medyo pangalawang rate na karanasan o pinigilan pa rin sa pag-ubos ng mga serbisyo sa media, dahil hindi ito magagamit para sa kanilang platform.

Sa wakas, nagkaroon sila ng isang hilig sa pagiging mabagal. Kung ikaw ay nasa isang underpowered o mas matandang computer, hindi ka magkakaroon ng magandang karanasan sa panonood ng video gamit ang mga balangkas na ito. Partikular na kilalang kilala ang Flash dito.

4.1 Paano Ginagawa ng HTML5 ang Kahanga-hanga sa Video at Audio

Binago ito ng HTML5 sa pamamagitan ng pagpapahintulot sa mga developer ng web na isama ang video at audio sa kanilang mga web page na may ilang mga linya lamang ng code. Gumagawa ito ng paggamot sa mga mobile device at gumagana sa bawat modernong web browser.

Bilang resulta, sinasamantala ng mga pangunahing kumpanya tulad ng YouTube, Vimeo at Netflix ang rebolusyon sa HTML5. Bakit hindi ka sumali sa kanila?

4.2 Lahat Tungkol sa Codecs

Sa kabanatang ito, matututunan mo kung paano gamitin ang lakas ng HTML5 upang isama ang audio at video sa iyong mga web page.

Una, kakailanganin kong magsimula sa isang pahiwatig. Habang maaari mong gamitin ang HTML5 na video sa bawat modernong web browser, hindi ito gumagana nang pareho sa bawat web browser. Ang mga codec na ginamit ng bawat browser ay magkakaiba. Sa Internet Explorer, limitado ka sa paggamit ng MP4 video. Ang Chrome ay medyo mas mapagbigay at pinapayagan kang gumamit ng video na WebM, MP4 at Ogg Theora. Ang Opera ay medyo mas mahigpit at pinapayagan ka lamang na gumamit ng Theora at WebM na video.

Bilang isang resulta, kailangan mong maging medyo matalino sa kung paano mo ipinasok ang video sa iyong web page. Kaya, tingnan natin kung paano ito gumagana.

4.3 Simula Sa Video

Upang magsimula sa, kakailanganin mong lumikha ng ilang mga tag sa pagbubukas at pagsasara. Narito ito kung saan mag-link ka sa iyong mga file ng video. Ngunit una, gugustuhin mong magtakda ng isang poster. Anong ibig sabihin niyan?

Kaya, kapag hinihintay mo ang pag-load ng iyong video, ang taong bumibisita sa iyong site ay maaaring makakita ng larawan na nauugnay sa video. Upang magawa iyon, bigyan lamang ang iyong mga video tag ng isang katangian ng 'poster' na may halaga ng imaheng nais mong mai-link. Dapat ganito ang hitsura.

Ang susunod na nais naming gawin ay lumikha ng isang fallback. Ano ang ibig sabihin nito? Kaya, ipagpalagay na gumagamit ka ng isa sa mga mas matanda, hindi gaanong kahanga-hangang mga browser doon. Marami sa mga mas matandang browser na ito ang hindi sumusuporta sa HTML5 na video at samakatuwid ay hindi maaaring maglaro ng HTML5 na video. Gusto mong mag-iwan sa kanila ng isang mensahe na ipaalam sa kanila na nais nilang i-upgrade ang kanilang browser at hanggang sa gawin nila ito, hindi nila mapanood ang iyong video.

Upang magawa iyon, isusulat mo lamang ang iyong mensahe sa loob ng iyong mga video tag. Wala nang ibang kailangan. Kapag nagawa mo na iyan, maiiwan ka ng ilang code na ganito.

Ngayon, magdagdag tayo ng ilang video. Susubukan ko ito sa Google Chrome, kaya't mag-link ako sa isang MP4 film. Upang magawa iyon, lumikha ako ng isang Source tag at binibigyan ko ito ng isang katangian ng src na may halaga ng video na nais kong isama.

Handa na ang aking pahina na mabuksan sa aking web browser. Naka-link ako sa isang pelikula kung saan talaga, talagang malaki at bilang isang resulta, kapag binuksan makikita lamang ang isang poster.

4.4 Pagdaragdag ng Audio

Maaaring ipasok ang audio sa iyong web page sa isang paraan na lubos na nakapagpapaalala ng kung paano namin naipasok ang video sa aming pahina.

Una, ang isa ay lumilikha ng ilang mga audio tag. Naglalaman ang mga audio tag na ito ng isang katangian ng 'mga kontrol'. Binibigyan nito ang gumagamit na bumibisita sa pahina ng kakayahang mag-pause, magpatugtog ng rewind at i-fast forward ang audio na pinatugtog.

Pagkatapos, nagsasama ka ng isang tag ng mapagkukunan sa MP3 file na nais mong mai-link. Hindi mo talaga alalahanin ang lahat ng iyon pagdating sa pagiging tugma ng codec. Ang pinakahuling mga web browser ay may kakayahang maglaro ng MP3 audio, bagaman mahusay na kasanayan na magsama din ng isang '.ogg' at isang '.wav' file - kung sakali.

Panghuli, maaari kang lumikha ng isang fallback para sa mas lumang mga browser. Ginagawa ito sa parehong paraan kung saan nilikha mo ang fallback para sa iyong video.

Ang katapusan ng resulta ay ganito ang hitsura.

Kapag binuksan mo ito sa iyong web browser, dapat ganito ang hitsura.

4.5 Subukan ang Iyong Sarili

  • Ano ang layunin ng pagkakaroon ng isang poster sa iyong mga video tag?
  • Anong mga codec ang hindi mo magagamit sa Internet Explorer?
  • Kung nais ko ang kakayahang i-pause ang ilang audio, anong katangian ang idaragdag mo sa iyong tag na 'audio'?

Karagdagang Pagbasa:

5. CSS3 Transformations And Animations

Tradisyonal na ginamit ang CSS upang hawakan ang layout at disenyo ng isang web page. Ito ay totoo pa rin, ngunit sa pinakabagong pag-ulit nito nakakuha ito ng kakayahang hawakan ang mga animasyon at pagbabago ng mga elemento at imahe.

Nagawa ng mga tao ang ilang mga kamangha-manghang bagay sa CSS3, mula sa paglikha ng isang digital na orasan hanggang sa pagsulat ng isang buong laro ng Pong. Kahit na may gumamit nito upang muling likhain ang mga paunang kredito sa Mad Men. Ito ay isang tunay na makapangyarihang teknolohiya at kapag ito ay pinagkadalubhasaan ay maaaring magamit upang magdagdag ng isang kamangha-manghang antas ng pag-andar sa iyong web page.

Sa kabanatang ito, bibigyan kita ng isang maikling pagpapakilala sa CSS3, at ipapakita sa iyo kung paano magdagdag ng ilang kamangha-manghang mga epekto sa iyong pahina.

Una, mag-navigate sa codepen.io at lumikha ng isang bagong panulat. Gagamitin namin ito bilang aming workspace para sa tagal ng kabanatang ito.

Magsisimula kaming simple at lilikha ng isang simpleng pagbabago ng imahe na umiikot sa isang imaheng 3 degree kapag nag-hover. Una sa lahat, lumikha ng isang div tag at bigyan ito ng ID. Sa halimbawa sa ibaba, binigyan ko ito ng ID ng 'muo'.

5.1 Mga Epekto ng Hover ng CSS

Sa div na iyon, isama ang isang imahe na iyong pinili. Nagsama ako ng isang kopya ng logo para sa MakeUseOf.

Kakailanganin mong magsulat ng ilang mga panuntunan sa styleheet. Sa halimbawa sa ibaba, lumikha ako ng isang tuktok at kaliwang margin upang bigyan ang imahe ng ilang silid. Nagsama rin ako ng isang mausisa na panuntunan sa hitsura ng mga styleheet na nagsisimula sa '#muo: hover'. Ano yan?

Kapag ikinakabit mo ang ': hover' sa isang panuntunan sa styleheet, maging sa isang elemento, isang ID o isang klase, mabisang sinasabi mo sa browser na ilapat ang istilo na ito kapag pinamamahalaan ng iyong mouse ang elemento. Medyo cool, tama?

Sa loob ng panuntunang '#muo: hover', mayroon kaming isang linya na nagsasabing '-webkit-transform: paikutin (3deg)'. Tulad ng sigurado akong nahulaan mo, sinasabi nito sa browser na paikutin ang elementong div ng tatlong degree.

Gayunpaman, mahalagang tandaan na ang tag na ito ay gagana lamang sa Chrome at Safari. Kung nais mong gumana ang iyong code sa Firefox o Internet Explorer 9 pataas, gugustuhin mong baguhin ang iyong CSS file upang isama ang mga sumusunod na linya.

Ngayon, kapag nag-hover ka sa imahe, ganito ang hitsura:

5.2 Paggamit ng CSS3 Upang Baguhin ang laki ng Mga Larawan

Kaya, bakit huminto doon? Alam mo bang maaari mo ring gamitin ang pamamaraang 'ibahin ang anyo' upang palakihin o paliitin ang isang imahe. Baguhin natin ang aming CSS file upang maisama ang mga sumusunod na linya.

Tulad ng nakikita mo, nagsama na kami ngayon ng isang bagong panuntunan sa pagbabago, ngunit sa oras na ito ay sinasabihan namin ito na gumawa ng isang bagay na tinatawag na 'sukat'. Ito ay isang talagang magandang paraan upang madagdagan ang laki ng isang imahe. Tumatagal ito ng dalawang mga parameter (ang mga numerong nakikita mo sa-pagitan ng mga panaklong na iyon), at kinakatawan nila ang halagang iyong nadagdagan ang taas at ang lapad ng elemento.

Tulad ng nakikita mo mula sa code, dadagdagan ko ang laki ng MakeUseOf div logo ng 50%. Maaari mong subukan ang mga ito sa pamamagitan ng pag-hover sa ibabaw nito. Makikita mo na ngayon ang logo na 'MakeUseOf' ngayon ay mas makabuluhang naunat.

Ito ay isang napaka banayad na pagpapakilala sa mga pagbabago sa CSS3. Sa kabila ng pagiging napaka-bago ng CSS3, maaari mo na ngayong makita na maaari kang gumawa ng maraming kawili-wiling mga manipulasyong kasama nito.

5.3 Subukan ang Iyong Sarili

  • Paano namin mailalapat ang isang istilo sa isang elemento kapag nag-hover?
  • Paano mo paikutin ang isang imahe gamit ang CSS3?
  • Paano mo sukatin ang isang imahe gamit ang CSS3?
  • Ano ang mangyayari kung pumasa ka sa iyong paraan ng pagbabago na 'translate (50px, 50px)'?

Karagdagang Pagbasa:

HTML5 Rocks - Pagtatanghal

6. Sapat na Javascript lamang

Kung nais mong gumamit ng script sa iyong web browser, kailangan mong gumamit ng Javascript. Walang dalawang paraan tungkol dito, nakalulungkot. Ito ay isang wika na mayroong maraming mga tagahanga, at maraming mga detractors din. Tulad ng pagpunta ng mga wika, mayroon itong maraming warts. Mayroong isang kadahilanan ang pinakapansin-pansin na libro tungkol sa wika ay tinawag na 'Javascript: The Good Parts'.

Imposibleng turuan ka kung paano gamitin ang Javascript sa isang solong kabanata. Hindi yan ang pakay dito. Ang layunin ay magturo sa iyo ng sapat na Javascript upang maunawaan mo ang susunod na kabanata, na tungkol sa paggamit ng isang teknolohiya na tinatawag na Canvas upang gumawa ng mga guhit at animasyon.

6.1 Pag-access sa The Console

Upang magawa ito, gagamitin namin ang Javascript console na naka-built sa bawat kopya ng Google Chrome. Upang ma-access ito, maaari kang mag-right click sa anumang web page at pagkatapos ay pindutin ang 'Inspect Element'. Pagkatapos mag-click sa 'Console'. Dapat mong makita ito.

Tradisyunal na ang kauna-unahang programa na sinusulat ng anumang namumuo na namumuo ay ang programang 'Hello World'. Ito ay isang simpleng programa na naglilimbag ng pariralang 'Hello World', at hindi marami pang iba. Sa iyong console, i-type ang 'console.log (' Hello world! ') ;.

6.2 Ang iyong Unang Programa

Kaya, ano ang eksaktong ginawa namin? Una, tumawag kami ng isang bagay na tinatawag na 'console.log'. Ito ay isang piraso ng code na naka-built sa computer na simpleng nai-print ang anumang sinabi mo rito. Pagkatapos ay ikinabit namin ang ilang panaklong dito, at isinama ang sa dobleng mga quote na 'Hello World'. Tinatawag itong 'dumadaan na mga argumento', at ang uri ng argumentong naipasa namin ay tinatawag na isang string. Kailan man nais mong gumawa ng isang bagay na kinasasangkutan ng mga titik at mga espesyal na character, kailangan mo lang gumamit ng solong mga quote. Gayunpaman, kung nais mong gumawa ng anumang bagay gamit ang mga numero, karaniwang hindi mo kailangang gumamit ng mga quote, tulad ng nakikita sa ibaba.

6.3 Mga variable sa JavaScript

Maaari mo ring ipasa ang mga variable sa 'console.log' din. Masalimuot ang mga variable, ngunit ang lahat talaga ay isang puwang upang maglagay ng mga tipak ng impormasyon. Kadalasan ito ay mga numero o titik. Upang magawa iyon, ideklara mo ang isang variable gamit ang keyword na 'var', bigyan ito ng isang pangalan at pagkatapos ay may isang katumbas na pag-sign, bibigyan mo ito ng isang halaga. Kaya, lilikha ako ng isang variable na tinatawag na 'hello' at pagkatapos ay bigyan ito ng isang halaga ng 'Hello World!'. Pagkatapos ay ipapasa ko iyon sa console.log.

Tandaan kung paano hindi ako nakapasa ng 'hello' sa console.log gamit ang mga quote. Iyon ay dahil nais kong i-print sa console ang mga nilalaman ng 'hello' at hindi 'hello' mismo.

6.4 Ano ang Ginagawa ng Mga Pag-andar

Maaari itong maging isang medyo nakakapagod muling pagsulat ng parehong piraso ng code nang paulit-ulit, kaya't para sa kadahilanang ito nagsusulat kami ng mga pag-andar. Ang mga pagpapaandar ay mas madali kaysa sa iniisip mo. Ang lahat ng mga ito ay mga tipak ng code na maaari nating magamit muli nang hindi isinusulat muli ang parehong code. Sa ibaba, lumikha kami ng isang pagpapaandar na tinatawag na 'sup' at ipinapasa namin ito ng isang argument gamit ang panaklong na pagkatapos ay naka-log sa screen. Tinatawag namin ang 'sup' sa pamamagitan ng pagpapadala sa console na 'sup (' Hello world! ');'.

6.5 Pag-uulit ng Isang Aksyon Sa Isang 'Para sa' Loop

Ipagpalagay na nais mong gawin ang parehong aksyon para sa isang itinakdang bilang ng mga beses. Para sa kadahilanang iyon kung bakit gagamitin namin ang isang 'para sa' loop. Mukha silang nakakatakot sa una, ngunit napakadaling gawin kapag naiintindihan mo sila. Nagsisimula ka sa pamamagitan ng pagsulat ng 'para sa ()'.

Sa mga panaklong na iyon, gugustuhin naming lumikha ng isang variable na bilangin kung gaano karaming beses kaming nagsagawa ng isang pagkilos. Kaya, nakakakuha kami ng isang bagay na katulad nito 'para sa (var i = 0;)'.

Nais naming suriin na hindi ako nakakatugon sa isang kundisyon. Kaya, sa kasong ito, nais naming makita na mas mababa sa 10. Kaya, pagkatapos ng semicolon, nagsusulat kami ng 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

Kung mas mababa ako sa 10, nais naming idagdag ito ng isa at pagkatapos ay gumawa ng isang bagay. Kaya, inilalagay namin ang 'i = i + 1'. Halos tapos na ang aming loop: 'para sa (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

Pagkatapos nito, gugustuhin naming gumawa ng isang aksyon. Kaya, pagkatapos ng huling panaklong, nagsusulat kami ng ilang mga kulot na brace at sa pagitan ng mga ito ay aming i-console. I-log ang halaga ng i. Lilikha ito ng isang counter na bibilangin hanggang siyam.

Ang huling dalawang mga construct ng programa na titingnan natin ay ang mga pahayag na 'kung' at 'habang' mga loop.

6.6 Kung Mga Pahayag

Ang isang pahayag na 'kung' ay nagsasagawa ng isang aksyon kung ang isang tiyak na pamantayan ay natutugunan. Ang mga ito ay katulad sa 'para sa' mga loop sa konstruksyon, at gumagana ang mga sumusunod. Ipagpalagay na mayroon kang isang variable na tinatawag na 'cheeseburgers' at nais mong makita kung mayroon itong halaga ng 'masarap'. Kung gagawin ito, nais mong i-log ang 'yum, cheeseburgers' sa screen. Upang magawa iyon, magsusulat ka ng tulad nito.

Tandaan kung paano ko sinulat ang 'kung (cheeseburgers ==' masarap ')'. Gumagamit ka ng doble o triple na katumbas upang suriin ang pagkakapantay-pantay at solong katumbas upang magtalaga ng isang halaga.

6.7 Habang Mga Loops

Sa wakas, ang isang 'habang' loop ay nagsasagawa ng isang aksyon habang ang isang pamantayan ay natutugunan. Kaya, isipin na nais mong i-log 'yum, cheeseburgers' habang ang cheeseburgers ay pantay na masarap. Upang magawa iyon, isusulat mo ang sumusunod.

Mahalagang tandaan na papasok ito sa isang walang katapusang loop, at dapat mong iwasan ang paggawa ng isang aksyon sa isang halagang malamang na hindi magbago. Maaari itong maging sanhi upang i-lock ang iyong browser, o hindi gumana ang iyong code.

Tulad ng nabanggit ko dati, ito ay isang napaka-maikling pagpapakilala sa mga konstruksyon sa programa sa Javascript. Hinihikayat kang basahin ang higit pa tungkol sa kamangha-manghang, kahit na napakalaking paksa.

6.8 Subukin mo ang iyong sarili

  • Nais kong bilangin mula sa 30. Sumulat ng isang 'para sa' loop na gagawin iyon.
  • Nais kong lumikha ng isang variable na tinatawag na 'makeuseof' at bigyan ito ng isang halaga ng 'kasindak-sindak'. Paano ito tapos?
  • Nais kong lumikha ng isang pagpapaandar na naglilimbag ng 'MakeUseOf Ay Galing' kapag tinawag. Isulat ang pagpapaandar na iyon.

Karagdagang Pagbasa:

7. Malikhaing Canvas

Ang Canvas ay isang cool na teknolohiya na nagbibigay-daan sa iyo upang gumuhit ng mga imahe at lumikha ng mga animasyon nang hindi kinakailangang gumamit ng Flash o Silverlight. Ginamit ito ng mga tao upang lumikha ng mga kakaibang at kamangha-manghang bagay, kabilang ang isang hairdryer simulator at iba't ibang mga video game. Ito ay isang kahanga-hanga at hindi mawari ang malaking piraso ng teknolohiya, sa tutorial na ito, bibigyan kita ng isang maikling pagpapakilala dito.

Mahalagang tandaan na gagana lamang ang Canvas sa mga modernong web browser. Kung gumagamit ka ng isang lumang bersyon ng IE, Chrome o Firefox, maaaring hindi mo masundan ang kabanatang ito. Kung iyon ang kaso, dapat mong isaalang-alang ang pag-download ng pinakabagong bersyon ng Google Chrome, na kung saan ay ang web browser kung saan ko nilikha ang tutorial na ito.

7.1 Pagsisimula Sa Canvas

Una sa lahat, kakailanganin mong buksan ang iyong web browser at mag-navigate sa codepen.io. Lumikha ng isang bagong panulat.

Ngayon, kakailanganin nating magdeklara ng isang elemento ng canvas. Lumikha ng dalawang pagbubukas at pagsasara ng mga tag ng Canvas. Sa kanila, dapat mong ipasa ito sa tatlong mga katangian. Ito ang lapad at taas ng elemento ng Canvas, kasama ang ID na ibinibigay mo rito. Tulad ng dati nang nagsingit ka ng ilang video, dapat kang magsama ng isang mensahe ng fallback.

Ngayon, nais naming magsulat ng ilang Javascript code na kukuha ng isang bagay sa screen. Magsisimula na kami ng pangunahing at lilikha ng isang simpleng pulang parisukat.

Lilikha kami ng isang variable (Tinawag kong 'demo'), at pagkatapos ay piliin ang elemento ng canvas at italaga ito sa variable na iyon. Upang magawa iyon, gumamit ka ng document.getElementByID () at ipasa sa ID ng elemento na nais mong piliin.

Ang pangalawang linya sa aming script ay lumilikha ng isa pang variable na tinatawag na 'konteksto' at pagkatapos ay tinatawag na 'demo.getContext (' 2d ')' dito. Sinabi nito sa browser na gagana kami sa isang 2d na imahe, pagkatapos ay maipasa ang mga kinakailangang pag-andar na kailangan namin upang gumuhit sa screen.

Ang pangatlo at ikaapat na linya ay ang mga talagang gumagawa ng pagguhit sa screen. Ang pangatlong linya ay pumupuno ng isang rektanggulo na may kulay na pula, habang ang pang-apat na linya ay tumatawag ng fillRect, na kinaposisyon nito at tumutukoy sa haba at lapad nito.

Hindi naman iyon kahanga-hanga. Gumawa tayo ng isang bagay na medyo mas advanced at gamitin ang mahika ng Javascript at Canvas upang lumikha ng MakeUseOf ng isang bagong-bagong logo.

7.2 Mga Hugis At Teksto

Tanggalin natin ang ating ika-apat na linya, at palitan ito ng isa na naglalagay ng aming rektanggulo sa kaliwang sulok sa itaas at iniunat ito para sa haba ng aming canvas.

Ang unang dalawang argumento ay tumutukoy kung saan namin nais na iposisyon ang x at y axis ng hugis. Itakda natin ang dalawa sa '0' sa ngayon. Ang pangatlong argumento ay tumutukoy sa lapad ng hugis. Itakda natin iyon sa '200', at pagkatapos ay iwanan ang ika-apat na argumento sa '50'. Dapat mayroon ka ngayong isang bagay na ganito ang hitsura nito.

Ito ay isang mahusay na pagsisimula, ngunit hindi man nito binabanggit ang MakeUseOf. Kaya, magdaragdag kami ng ilang teksto. Lumikha tayo ng isang variable na naglalaman ng 'makeuseof', at tatawagin namin ang variable na 'MakeUseOf'.

Gusto naming lumikha ng isa pang variable ng konteksto. Tawagan ang isang ito na 'konteksto2', at tiyakin na ito ay 2d. Ito ang gagamitin natin upang isulat ang aming teksto.

Nais naming maging kulay asul ang aming teksto at mai-overlay ang aming pulang parisukat. Kaya, tulad ng dati, gusto naming bigyan ito ng isang fillStyle ng 'asul'. Ngayon, pipiliin namin ang mga katangian ng aming teksto. Nais naming maging 20px malaki, naka-format na naka-format at gumagamit ng isang Arial font. Tumawag kami ng font sa konteksto2 at itatalaga ito sa halagang 'naka-bold 20px arial'.

Dahil nais naming ma-overlay ng text na ito ang aming nakaraang pulang kahon, kailangan naming tawagan ang 'textBaseLine' sa konteksto2 at bigyan ito ng isang halaga ng tuktok. Kapag nakumpleto na iyon, tawagan namin ang 'punan ang Teksto' sa konteksto2 at ipasa ito ang variable na naglalaman ng aming teksto at mga x at y coordinate kung saan nilayon naming ilagay ang aming teksto. Ang huling resulta ng aming code ay katulad nito.

Ang imahe na ginawa ng code ay ganito ang hitsura.

7.3 Isang Salita Sa Canvas

Habang ito ay isang hindi kapani-paniwalang pangunahing pagpapakilala sa Canvas, dapat mong maunawaan na ito rin ay isang hindi kapani-paniwalang malaking teknolohiya, at isang hindi kapani-paniwalang malakas na mag-boot. Ang gabay na ito ay nagsilbi lamang bilang isang pagpapakilala sa paggawa ng mga graphic gamit ang bagong teknolohiyang ito.

kung paano malaman ang aking graphics card windows 10

7.4 Subukan ang Iyong Sarili

  • Idagdag ang sumusunod na slogan sa imaheng iyong nilikha: 'Ang pinakamahusay na tech site kailanman!'
  • Lumikha ng isang 'para sa' loop na tumatakbo para sa sampung mga pag-ulit. Tingnan kung maaari mong ilipat ang iyong pagguhit pababa ng canvas, isang pixel nang paisa-isa.
  • Ibalot ang iyong pagguhit sa isang pagpapaandar. Ano ang mangyayari kung hindi mo ito tawagan?

Karagdagang Pagbasa:

8. Saan Susunod?

Salamat sa pagbabasa ng aking hindi kapani-paniwalang maikling gabay sa mga bagong teknolohiya na matatagpuan sa loob ng HTML5. Hindi maikakaila na ang HTML5 ay ang teknolohiya ng hinaharap. Pinagtibay ito ng karamihan sa teknolohiya, dahil madaling sumulat at makapangyarihan na walang sukat. Ang mga tao ay gumagawa ng hindi kapani-paniwala na mga bagay kasama nito sa lahat ng oras, at wala akong duda na sa hinaharap, ikaw ay magiging isa sa mga taong iyon. Pinarangalan akong naging bahagi ng iyong paglalakbay sa ligaw at kamangha-manghang mundo ng HTML5.

Nakikiusap ako sa iyo na magpatuloy sa pag-aaral. Patuloy sa pag-coding. Magpatuloy na i-level up at pagbutihin, at hindi sa anumang oras ay gagamitin mo ang mga teknolohiya na ipinakilala sa maikling gabay na ito upang lumikha ng mga magagandang produkto.

Magbahagi Magbahagi Mag-tweet Email Ito ba ay Worth Upgrading sa Windows 11?

Ang Windows ay muling idisenyo. Ngunit sapat na ba iyon upang kumbinsihin kang lumipat mula sa Windows 10 patungong Windows 11?

Basahin Susunod Mga Kaugnay na Paksa
  • Wordpress at Pag-unlad sa Web
  • HTML5
  • Longform
  • Patnubay sa Longform
Tungkol sa May-akda Matthew Hughes(386 Mga Artikulo Nai-publish)

Si Matthew Hughes ay isang developer ng software at manunulat mula sa Liverpool, England. Bihira siyang matagpuan nang walang isang tasa ng malakas na itim na kape sa kanyang kamay at ganap na adores ang kanyang Macbook Pro at ang kanyang camera. Maaari mong basahin ang kanyang blog sa http://www.matthewhughes.co.uk at sundin siya sa kaba sa @matthewhughes.

Higit pa Mula kay Matthew Hughes

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe