Ina-unlock ang Potensyal ng HTML5 at CSS3

Ang paglabas ng HTML5 at CSS3 ay walang kakulangan sa isang evolutionary leap, ngunit ilang mga taga-disenyo ang labis na gumagamit ng mga bagong tampok na ibinigay ng teknolohiya. Sa bahaging ito ay dahil ang buong potensyal ng HTML5 at CSS3 ay hindi napansin, kaya't ang mga tao ay nagpapatuloy na bumuo ng higit pa o mas kaunti sa parehong mga site, na may maliit na pagkakaiba-iba lamang sa pag-coding.

Walang mali lalo na, ngunit maraming mga bagay na ginawang magagamit sa iyo ng HTML5 at CSS3 na maaari mong samantalahin upang makalikha ng mas kamangha-manghang mga nilikha kaysa dati mo pa.

Huwag pansinin ang canvas

Ang paghawak sa object ng canvas ay isa sa pinakamahirap na gawain para sa isang bagong HTML5 coder na dapat gawin, lalo na kapag ang coder na iyon ay dating naka-coding sa iba pang mga bersyon ng HTML at walang background sa computer graphics program.

Ang pag-aaral na gamitin ang object ng canvas, kahit na bihira mong balak na gumawa ng anumang pagguhit, ay isang mahalagang kasanayan na dapat magtagal ng oras sa bawat malubhang coder upang malaman. Maaari itong magamit para sa lahat ng mga uri ng mga bagay kabilang ang paglikha ng mga animated infographics, slideview, tsart (kasama ang mga interactive na tsart), at marami pang iba bukod.

paglalarawan sa kabutihang loob ng

Ang paggamit ng canvas ay isang simpleng bagay lamang sa paglikha ng bagay sa HTML5 at pagkatapos ay isama ito sa JavaScript. Ang mga kasangkot na diskarte ay isang paksa para sa isa pang araw, ngunit maaari ka nang makahanap ng ilang mga tutorial dito sa site na ito na makakatulong sa pagsisimula mo.

Hindi mo na kailangan ng Flash

Karamihan sa dati naming ginamit na Flash ay hindi nangangailangan ng Flash. Ngayon ay magagawa mo na ang lahat sa mga paglipat ng CSS3, pagguhit ng HTML5, animasyon na HTML5, video na HTML5 at audio na HTML5.

Ang mga bagay na hindi lamang namin ginagawa sa HTML5 na pinapayagan kang gawin ng Flash ay ang maniktik sa iyong mga gumagamit at lalabag sa kanilang privacy, ngunit hindi iyon ang isang bagay na nais mong gawin, hindi ba?

Karamihan sa mga gumagamit ay natagpuan ang Flash na nakakainis, kahit na karamihan ay grudgingly na naka-install ito bilang isang hindi maiiwasang pangangailangan. Iyon ay hanggang sa malubhang mga peligro sa seguridad at mga problema sa privacy na nauugnay sa Flash na ginawang ngayon isang bagay na ang karamihan sa mga gumagamit ay hindi man nag-i-install, o i-activate lamang sa bawat kaso kapag mahigpit na kinakailangan para sa isang gawaing nais nilang gampanan .

Binibigyan ka ng CSS3 ng mga bagong pseudo na klase

Ang ilang mga pseudo na klase ay nasa paligid ng CSS2, ngunit sa CSS3 nakakagamit ka ng mahahalagang posisyong mga pseudo na klase upang makakuha ng higit na kontrol. Pangunahing ginagamit ang mga ito sa teksto, tulad ng ipinahiwatig ng mga palsipikong pangalan ng klase: dati, pagkatapos, unang titik, unang linya…

Mayroon ka ring access sa mga paglilipat, na maaaring magamit upang baguhin ang anuman, kasama ang teksto. Ang mga paglipat na ito ay nagbibigay buhay o nagbago kung ano ang nakikita ng gumagamit sa screen.

Maaaring direktang makipag-usap ang iyong mga web page sa GPU

Dapat mong gawin ito nang may pag-iingat, dahil ang anumang uri ng pagpapabilis ng hardware ay aalisin ang buhay ng baterya mula sa mga mobile device, ngunit medyo cool pa rin na magagawa mo ito.

Gumagana ang pagpabilis ng GPU kapag gumamit ka ng mga paglilipat, 3D transform, canvas sa 3D mode, at WebGL 3D. Ang huli ay ang aking paborito, ngunit kakailanganin mong gumawa ng maraming pagbabasa upang mahawakan ang lahat na kasangkot sa WebGL. Bibigyan ka nito ng maraming saklaw para sa paglikha ng mga animasyon at laro, gayunpaman.

Ang GPU acceleration ay hindi gagana sa mga mas matandang browser, kahit na sinusuportahan nila ang HTML5 at CSS3.

gif courtesy of

Gumamit ng mga engine ng laro upang masubukan ang 3D graphics

Ang mga programmer ng laro ay gumagamit ng mga engine ng laro mula nang magpakailanman upang gawing mas simple ang gawain ng game program, ngunit sa nakaraang isang taon o dalawa lamang na talagang may kakayahang HTML5 game engine ay lumitaw na maaaring tumayo sa gawain ng paglikha ng mataas na kalidad na 3D gaming sa isang browser based environment.

Ang isa sa pinakasimpleng pagsimulan ay ang PlayCanvas, at kahit na libre itong mag-eksperimento at talagang mura para sa isang personal na lisensya, hindi ito magaan. Narito Mabilis na pagsalakay, isang laro na nilikha sa PlayCanvas:

 

At ito ay RoboStorm:

Maaari ka bang lumikha ng mga larong ito? Talagang, at mas madali ito ngayon kaysa sa dati.

Para sa isang karanasan sa pagbuo ng retro game, subukan Bumuo2 or Bumuo3. Nakuha mo ang lahat ng kailangan mo upang simulang lumikha ng mga laro sa isang drag at drop na batayan (kahit na ang ilan ay mahahanap ito masyadong naglilimita). Lumilikha ka ng iyong mga laro sa online at nilalaro ng mga tao sa online. Ito ay isang makina para sa mga hindi nakakaalam ng anumang programa at ayaw mag-abala sa pag-aaral.

Narito Kiwi Story, isang old-school 2D platformer na nilikha sa Consonstr3:

Hindi ka limitado sa paglalaro lamang sa mga makina na ito. Para sa paggawa ng buong pelikula at pagtatanghal, mas mahusay na gamitin Blender or Maya, at para sa mga laro na nakatuon sa isang tukoy na platform kadalasan ay magiging mas mahusay na gumamit ng isang katutubong kapaligiran sa programa na nakatuon sa platform na iyon. Para sa mga interactive na laro ng cross-platform, pagkukuwento, software ng edukasyon, o mga pagtatanghal, ang mga HTML5 engine ay isang mahusay na pagpipilian.

Nagbibigay sa iyo ang HTML5 at CSS3 ng higit na lakas

Sa HTML5 at CSS3 mayroon ka na ngayong kumpletong kontrol sa bawat elemento na lilitaw sa iyong pahina, kasama ang kakayahang manipulahin ang bawat bagay sa halos anumang nais mo.

Habang ang pangunahing yunit ng konstruksyon ay ang parihaba, ang iyong mga website ay hindi na kailangang sundin ang hugis-parihaba na linearity. Maaari mong ilagay ang mga bagay sa anumang anggulo na gusto mo, paikutin ang mga ito, ibaluktot ang mga ito, i-twist ang mga ito at ibaluktot ang mga ito, at ang iyong web browser ay hindi magreklamo nang kaunti.

Maaari mo ring makontrol ang opacity at pag-scale nang mas madali kaysa dati, at gagana ang mga diskarte sa lahat ng mga pangunahing browser.

Tulad ng oras ng pagsulat sa unang bahagi ng 2018, mayroon pa ring ilang mga isyu sa pag-scale sa pagitan ng iba't ibang mga browser, na may ilang mga browser na may kakayahang pag-scale nang wasto habang ang iba ay nagbibigay ng labis na iba't ibang mga resulta para sa parehong pahina.

Nangangahulugan iyon na kahit papaano sa ngayon ay naka-stuck pa rin kami sa pagkakaroon ng programa ng iba't ibang mga bersyon ng isang site kung nais naming gumamit ng pag-scale para sa mga tumutugon na layunin.

Sa kabutihang palad bihira kang magkakaroon ng pangangailangan para doon, ngunit kung minsan ay umaangkop ng isang bagay sa screen kahit gaano kaliit ang screen na iyon ang magiging pangunahing layunin mo. Sa mga kasong iyon, mananatili sa isang problema ang kakulangan ng standardisadong pag-scale sa iba't ibang mga browser.

Gayunpaman, ang mga problemang ito ay hindi mga problema sa HTML5 o CSS3, ang mga ito ay mga problema ng mga developer ng browser na nabigo na maayos na suportahan ang mga tampok na ibinigay ng HTML5 at CSS3.

Habang tumatagal, dapat nating makita ang mga pagpapabuti sa mga browser, at gagana ang lahat ayon sa inaasahan. Sa pamamagitan ng pagkatapos ay maaaring oras na upang magsimulang matuto ng HTML6 at CSS4, ngunit hindi bababa sa ito ay isang hakbang sa tamang direksyon.

imahe ng header sa kabutihang loob ng

Bogdan Rancea

Si Bogdan ay isang founding member ng Inspired Mag, na naipon ang halos 6 na taong karanasan sa panahong ito. Sa kanyang bakanteng oras gusto niyang mag-aral ng klasikal na musika at galugarin ang visual arts. Medyo nahuhumaling rin siya sa mga fixies. Nagmamay-ari na siya ng 5.