Magsimula Sa HTML5 / CSS3: Mga Tip, Mga Showcases, at Mga Sample ng Coding

Ang HTML5 ay nakakakuha ng higit na katanyagan at nagsisimula upang mabuo ang buong interface ng web. Kahit na ang ilang mga web developer ay nagsipi na ang mga elemento ng HTM5 at visual effects ay maihahambing sa Flash. Ang bagong istilo ng script ay madaling maunawaan at ang mga kakayahan upang mapahusay ang interface ng web ay walang hanggan. Kaya kung gaano kawili-wili ang HTML5 pa rin?


Ang artikulong ito ay inilaan upang bigyan ang isang mambabasa ng isang pananaw sa dapat mong malaman tungkol sa HTML5 at pinaka-mahalaga sa ilang mga tip & trick sa paglikha ng magaan, kaakit-akit, at interactive na mga pahina ng HTML5.

1. Pangunahing sa HTML5

HTML5

Bago natin masimulan ang anumang paksang ito sa HTML5, mabuti na suriin muna ang iyong kasalukuyang browser. Tulad ng marami sa mga browser ay nasa mode ng pag-unlad (pagpapahusay upang ma-accomodate ang HTML5), ang ilang mga tampok na nabanggit dito ay maaaring hindi suportado.

Narito ang isang mabilis na mga tip upang suriin ang iyong pagkakatugma sa browser.

Upang maunawaan pa ang limitasyon ng isang tiyak na browser, maaari kang sumangguni dito.

2. Mga Epekto ng Teksto – Pagdaragdag ng anino at advance na epekto ng teksto sa HTML5

Mga epekto ng teksto sa HTML5

Pangunahing epekto ng anino sa teksto

Ito ang pinakasimpleng isang string code na nagbabago sa iyong ordinaryong headline sa isang cool na hitsura ng teksto. Huwag maliitin ang epekto ng anino. Upang makagawa ng kaparehong naghahanap ng epekto na ito ay nangangailangan ng web designer upang dumaan sa maraming mga hakbang ng pag-edit ng imahe sa Photoshop. At ngayon ang kailangan lang ay isang linya lamang ng code. Ang distansya ng anino, kulay ay maaaring mabago sa nilalaman ng iyong puso.

Sample ng coding

#shadow h1 {
text-shade: 0px 1px 1px rgba (0,0,0, .2);
}

Text sa advance na tulad ng apoy

Ang susunod na tip ay upang ipakita sa iyo kung paano ang pag-coding ng HTML5 ay maaaring mai-tweak sa isang mas cool na hitsura ng teksto. Kung ikaw ay sapat na mag-eksperimento, o makahanap ng iba pang mga halimbawa, ang mga posibilidad ng pagpapasadya ng mga epekto ay walang hanggan. Tandaan: ang halimbawang ito ay hindi nilikha ng anumang software sa pag-edit ng imahe. Ang mga simpleng code sa HTML5 lamang.

Sample ng coding

# apoy h1 {
align ng teksto: gitna;
margin: 200px auto;
font-family: "Liga-Gothic", Courier;
laki ng font: 200px; pagbabago ng teksto: malalaking titik;
kulay: #fff;
teksto-anino: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716, 10px 80px # 451b0e;
}

Iba pang mahusay na halimbawa: http://mudcu.be/labs/HTML5Rocks/Text-Effect.html#spaceage

3. Rounded sulok sa HTML5

Rounded Corner sa HTML5

Ang pag-istilo ng layout ng webpage sa HTML5 ay hindi naging ganoon kadali mula nang ang pagpapakilala ng CSS. At ngayon maaari ka ring magkaroon ng mga bilugan na sulok ng iyong mga elemento ng layout! Isipin ito; wala nang slicing image sa background, wala nang magulo na mga fragment ng larawan. Dadalhin nito ang maraming mga tagay sa mga taga-disenyo ng web doon.

Sample ng coding

div {
hangganan: 2px solid # 434343;
padding: 10px;
background: # e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
lapad: 500px;
}

Tandaan: Ang Moz ay nangangahulugang Mozilla, at ang webkit ay para sa Safari at Chrome.

Iba pang mahusay na halimbawa: http://fjd1.com/roundcorner.html

4. Scalable Vector Graphic (SVG) sa HTML5

HTML 5 mga tutorial, gabay, at mga sample

Scalable Vector Graphic o karaniwang kilala bilang (SVG) ay isang 2-Dimension vector graphics na kung saan ay tinukoy sa XML text file. Sa madaling salita, dahil ang kanilang DNA ay batay sa XML text file, maaari silang malikha o mai-edit sa web platform. Na nangangahulugan din, maaaring madaling masukat ang scale, at ang mga search engine ay maaaring basahin at maunawaan ang imahe.

Halimbawang code

Iba pang magagandang halimbawa:

5. Pag-embed ng file ng pelikula sa HTML5

Video sa HTML5

Narito ang isa pang kawili-wiling bahagi upang ipakita ang mga kakayahan ng HTML5. Marami sa mga video online ay karaniwang ipinakita sa webuser sa anyo ng Flash. Hanggang sa kamakailan lamang, ang pag-embed ng video sa HTML5 ay dahan-dahang nakakakuha ng momentum (ang mabuting halimbawa ng YouTube) at ang Flash ay dahan-dahang nawawala ang pagiging kaakit-akit. Bakit ganyan? Mga gumagamit ng mobile. Kung nais mong ma-play ang iyong video sa parehong mga telepono ng iPhone at Android, ang HTML5 ay ang paraan upang sumulong.

Upang mai-embed ang video, kakailanganin mong malaman doon na kasalukuyang 3 mga format na sinusuportahan ng iba’t ibang mga browser; .mp4 (H.264 + AAC), .ogg (Theora + Ogg), .webm (VP8 + Ogg)

Halimbawang code

Iba pang mahusay na halimbawa: https://www.html5rocks.com/en/tutorials/video/basics/

6. Pag-slide ng Slide sa HTML5

HTML 5 mga tutorial, gabay, at mga sample

Ang Powerpoint ay isang nauugnay na pangalan ng pangalan sa pagtatanghal ng slide. Ngunit bakit ikulong ang iyong sarili sa isang offline na pagtatanghal kung saan maaari kang lumikha ng mga slide na nilalayon para sa web audience? Ang HTML5 ay dumating sa pagsagip sa paglikha ng maraming malakas na slide ng pagtatanghal, kumpleto sa paglipat at menu ng nabigasyon. Ang pinakamagandang bahagi ay, maaari mo ring ilapat ang 3D na ibahin ang anyo sa iyong pagtatanghal.

Halimbawang code

pre {
paglipat: lahat ng 1s kadalian-inout;
}

pre: hover {
kulay ng background: # F2F5FE;
kulay-hangganan: itim;
}

div {
ibahin ang anyo: rotate3d (1,1,0, 45deg);
}

Iba pang magagandang halimbawa:

7. Nai-edit na Nilalaman sa HTML5

HTML 5 mga tutorial, gabay, at mga sample

Ang static na teksto ay sobrang old-school sa edad kung saan ang kakayahang umangkop at pabago-bago na pamamahala sa mundo. Sa HTML5, maaari mong tukuyin ang isang lugar ng teksto na ginawa itong mai-edit ng gumagamit ng web nang walang text editor.

Halimbawang code

Ang nilalamang ito ay mai-edit!

Iba pang mahusay na halimbawa: http://html5demos.com/contenteditable

8. Pakikipag-ugnay na Canvas Web sa HTML5

HTML 5 mga tutorial, gabay, at mga sample

Bukod sa SVG sa HTML5, ang canvas ay ang susunod na pinakamahusay na bagay na nangyari sa web. Pinapayagan ng canvas ang pag-render ng 2 mga sukat na hugis na nagdadala ng pakikipag-ugnay sa isang buong antas nang walang tulong mula sa Flash.

Gayunpaman, ang simpleng pag-coding sa HTML5 na lumilikha ng kamangha-manghang pakikipag-ugnayan sa animation ay nagkakahalaga na nabanggit dito.

Iba pang mahusay na halimbawa: http://www.bestfreewebres Source.com/2010/09/10-best-html5-canvas-applications.html

9. I-drag at Drop sa HTML5

HTML 5 mga tutorial, gabay, at mga sample

Ang pag-drag at pag-drop (kung minsan ay kilala bilang DnD) ay isa pang cool na tampok na magagamit sa HTML5. Ang isang mahusay na halimbawa ay ang pagpapatupad ng Google sa kanilang Gmail. Kung gumagamit ka ng anumang mga browser na suportado ng HTML5, maaari mo lamang i-drag ang isang file mula sa iyong computer at i-drop papunta sa window ng mensahe. Ito ay awtomatikong idagdag bilang isang kalakip. Gaano katindi ang ganyan?

Halimbawang code (katutubong DnD)

dokumento.addEventListener (‘dragstart’, function (kaganapan) {
event.dataTransfer.setData (‘text’, ‘Customized text’);
event.dataTransfer.effectAllowed = ‘kopya’;
}, maling);

Iba pang mahusay na halimbawa: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Purong CSS Data Chart sa HTML5

HTML 5 mga tutorial, gabay, at mga sample

Bago ang HTML5, imposible ring lumikha ng isang presentable chart sa pamamagitan lamang ng paggamit ng coding sa HTML. Bukod dito, ang pagbabago ng halaga ng data at upang sumalamin sa tsart ay hindi simpleng gawain. Muli, HTML5 upang iligtas. Kasama ang CSS, maaari kang lumikha ng isang ganap na magandang tsart na naglalagay ng Microsoft Excel sa kahihiyan. Ang mga code ay simple, at ang kailangan mo lang gawin ay ang paggastos ng oras upang ipasadya ang perpektong kulay at epekto para sa iyong tsart.

Iba pang mahusay na halimbawa: http://cssglobe.com/pure-css-data-chart/

Hindi makakuha ng sapat na HTML 5?

Gayon din tayo! Narito ang higit pa sa paksa, pumunta suriin ang mga ito.

* 30 Tunay na Malamig na Mga Halimbawa ng HTML 5 Mga Website
* Pagsisimula sa HTML 5
* Kailangang Magbasa ng HTML 5 Mga Tutorial sa 2012
* Alamin ang HTML 5: 10 Kailangang Magbasa ng Mga Aralin

Gayundin, tingnan  ang HTML 5 na kurso ng pag-crash ni Robin Nixon. Si Robin Nixon ay ang may-akda ng Learning PHP, MySQL, at JavaScript; ang kurso ay saklaw na halos lahat ng kailangan ng isang newbie sa HTML5 – kabilang ang pangunahing HTML coding, HTML5 canvas para sa pagguhit, geolocation, lokal na imbakan, pati na rin ang HTML5 audio at video.

Ang orihinal na artikulo ay unang nai-publish sa Blog ng WHSR; pinamamahalaan ito at na-update ng mga kawani ng BuildThis.io.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map