Sāciet darbu ar HTML5 / CSS3: padomi, vitrīnas un paraugu kodēšana

HTML5 gūst arvien lielāku popularitāti un sāk attīstīt visu tīmekļa saskarni. Pat daži tīmekļa izstrādātāji citēja, ka HTM5 elementi un vizuālie efekti ir salīdzināmi ar Flash. Jaunais skriptu veidošanas stils ir viegli saprotams, un Web interfeisa uzlabošanas iespējas ir neierobežotas. Cik interesants ir šis HTML5?


Šis raksts ir paredzēts, lai lasītājiem sniegtu ieskatu par to, kas jums jāzina par HTML5, un pats svarīgākais – dažus padomus & triki vieglu, pievilcīgu un interaktīvu HTML5 lapu izveidē.

1. Pamata HTML5

HTML5

Pirms mēs sākam jebkādu turpmāku šo tēmu HTML5, vispirms ir jāpārbauda jūsu pašreizējais pārlūks. Tā kā daudzi no pārlūkiem joprojām ir izstrādes režīmā (uzlabojumi HTML5 pielāgošanai), dažas šeit pieminētās funkcijas, iespējams, netiek atbalstītas..

Šeit ir īsi padomi, kā pārbaudīt savu pārlūka saderība.

Lai tālāk saprastu noteikta pārlūka ierobežojumus, varat atsaukties šeit.

2. Teksta efekti – ēnu un iepriekšēja teksta efektu pievienošana HTML5

Teksta efekti HTML5

Pamata ēnu ietekme uz tekstu

Šis ir vienkāršākais virknes kods, kas jūsu parasto virsrakstu pārveido vēsa izskata tekstā. Nekad nenovērtējiet par zemu ēnas efektu. Lai izveidotu šo līdzīgā izskata efektu, Web dizainerim Photoshop jāveic vairākas attēlu rediģēšanas darbības. Un tagad viss, kas nepieciešams, ir tikai viena koda rinda. Ēnu attālumu un krāsu var mainīt atbilstoši jūsu sirds saturam.

Kodēšanas paraugs

# ēna h1 {
teksta ēna: 0 pikseļi 1 pikseļi 1 pikseļi rgba (0,0,0, .2);
}

Teksts par iepriekšēju ugunij līdzīgu efektu

Nākamais padoms ir parādīt, kā HTML5 kodēšanu var pārveidot vēl vēsāka izskata tekstā. Ja pietiekami eksperimentējat vai atrodat citus piemērus, efektu pielāgošanas iespējas ir bezgalīgas. Piezīme: šo piemēru nav izveidojusi neviena attēlu rediģēšanas programmatūra. Vienkārši HTML5 kodi.

Kodēšanas paraugs

#fire h1 {
text-align: centrs;
rezerve: 200 pikseļu auto;
fontu saime: "Līga-gotika", Kurjers;
fonta lielums: 200 pikseļi; teksta pārveidošana: lielie burti;
krāsa: #fff;
text-shadow: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973790, 10px 80 pikseļi # 451b0e;
}

Cits lielisks piemērs: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. HTML5 noapaļots stūris

Noapaļots stūris HTML5 formātā

Kopš CSS ieviešanas tīmekļa lapas izkārtojuma veidošana HTML5 formātā vēl nekad nav bijusi tik vienkārša. Un tagad jums pat var būt noapaļoti izkārtojuma elementu stūri! Iedomājieties šo; vairs nav nepieciešams sagriezt fona attēlu un sakārtot attēla fragmentus. Tas radīs daudz uzmundrinājumu tīmekļa dizaineriem.

Kodēšanas paraugs

div {
apmale: 2 pikseļi cieta # 434343;
polsterējums: 10 pikseļi;
fons: # e3e3e3;
-moz-robežas rādiuss: 10 pikseļi;
-webkit-robežas rādiuss: 10 pikseļi;
platums: 500 pikseļi;
}

Piezīme: Moz nozīmē Mozilla, un webkit ir paredzēts Safari un Chrome.

Cits lielisks piemērs: http://fjd1.com/roundcorner.html

4. Mērogojama vektorgrafika (SVG) HTML5 formātā

HTML 5 apmācības, ceļvedis un paraugi

Mērogojama vektorgrafika vai plaši pazīstama kā (SVG) ir divdimensiju vektorgrafika, kas definēta XML teksta failos. Citiem vārdiem sakot, tā kā viņu DNS pamatā ir XML teksta fails, tos var izveidot vai rediģēt tīmekļa platformā. Kas arī nozīmē, ka mērogu var viegli padarīt, un meklētājprogrammas spēj attēlu lasīt un saprast.

Parauga kods

Citi lieliski piemēri:

5. Filmas faila iegulšana HTML5

Video HTML5 formātā

Šeit ir vēl viena interesanta daļa, kurā parādītas HTML5 iespējas. Daudzi tiešsaistes video parasti tiek parādīti tīmekļa lietotājam Flash formā. Vēl nesen video iegulšana HTML5 lēnām uzņem apgriezienus (YouTube ir labs piemērs), un Flash lēnām zaudē savu pievilcību. Kāpēc tas tā ir? Mobilo ierīču lietotāji. Ja vēlaties, lai jūsu videoklipu varētu atskaņot gan iPhone, gan Android tālruņos, HTML5 ir veids, kā virzīties uz priekšu.

Lai iegultu video, jums tur jāzina 3 formāti, kurus atbalsta dažādi pārlūki; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Parauga kods

Cits lielisks piemērs: https://www.html5rocks.com/lv/tutorials/video/basics/

6. Slide Presentation in HTML5

HTML 5 apmācības, ceļvedis un paraugi

Powerpoint ir bijis sinonīma nosaukums, kas saistīts ar slaida prezentāciju. Bet kāpēc aprobežoties ar prezentāciju bezsaistē, kur var izveidot slaidus, kas domāti tīmekļa auditorijai? HTML5 ir izglābies, izveidojot daudz jaudīgus prezentācijas slaidus ar pārejas un navigācijas izvēlni. Vislabākais ir tas, ka jūs pat varat prezentācijā izmantot 3D pārveidi.

Parauga kods

pirms {
pāreja: visi atvieglo inversiju;
}

iepriekš: virziet kursoru {
fona krāsa: # F2F5FE;
apmales krāsa: melna;
}

div {
pārveidot: pagriezt3d (1,1,0, 45deg);
}

Citi lieliski piemēri:

7. Rediģējams saturs HTML5

HTML 5 apmācības, ceļvedis un paraugi

Statiskais teksts ir tik vecs skolas laikmets, kad elastība un dinamika valda pasaulei. HTML5 var definēt teksta apgabalu, kuru tīmekļa lietotājs to var rediģēt bez teksta redaktora.

Parauga kods

Šis saturs ir rediģējams!

Cits lielisks piemērs: http://html5demos.com/contenteditable

8. Interaktīvs tīmekļa audekls HTML5

HTML 5 apmācības, ceļvedis un paraugi

Bez SVG HTML5, audekls ir nākamā labākā lieta, kas jebkad ir notikusi tīmeklī. Audekls ļauj atveidot 2 dimensiju formas, kas nodrošina interaktivitātes sasniegšanu visā līmenī bez Flash palīdzības.

Tomēr šeit ir vērts pieminēt vienkāršu HTML5 kodēšanu, kas rada pārsteidzošu animācijas mijiedarbību.

Cits lielisks piemērs: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Velciet un nometiet HTML5

HTML 5 apmācības, ceļvedis un paraugi

Velciet un nometiet (dažreiz sauktu par DnD) ir vēl viena lieliska funkcija, kas pieejama HTML5. Lielisks piemērs būtu Google ieviešana savā Gmail. Ja izmantojat kādu no HTML5 atbalstāmiem pārlūkiem, varat vienkārši velciet failu no datora un nometiet uz ziņojumu sastādīšanas loga. Tas tiks automātiski pievienots kā pielikums. Cik forši tas ir?

Parauga kods (vietējais DnD)

document.addEventListener (‘dragstart’, funkcija (notikums) {
event.dataTransfer.setData (‘teksts’, ‘pielāgots teksts’);
event.dataTransfer.effectAllowed = ‘kopija’;
}, nepatiess);

Cits lielisks piemērs: http://www.html5rocks.com/lv/tutorials/dnd/basics/

10. Tīra CSS datu diagramma HTML5

HTML 5 apmācības, ceļvedis un paraugi

Pirms HTML5 nav arī iespējams izveidot reprezentablu diagrammu, vienkārši izmantojot kodēšanu HTML. Turklāt datu vērtības mainīšana un atspoguļošana diagrammā nav vienkāršs uzdevums. Atkal HTML5, lai glābtu. Kopā ar CSS jūs varat izveidot absolūti skaistu diagrammu, kas apkauno Microsoft Excel. Kodi ir vienkārši, un viss, kas jums jādara, ir tērēt laiku, lai diagrammai pielāgotu perfektu krāsu un efektu.

Cits lielisks piemērs: http://cssglobe.com/pure-css-data-chart/

Nevar iegūt pietiekami daudz HTML 5?

Tā arī mēs! Šeit ir vairāk par šo tēmu, dodieties tos pārbaudīt.

* 30 ļoti forši HTML 5 vietņu piemēri
* Darba sākšana ar HTML 5
* Jāizlasa HTML 5 konsultācijas 2012. gadā
* Uzziniet HTML 5: 10 obligāti lasāmās nodarbības

Pārbaudiet arī  šo Robina Niksona HTML 5 avārijas kursu. Robins Niksons ir mācību PHP, MySQL un JavaScript autors; kurss aptver gandrīz visu, kas iesācējam jāzina HTML5, ieskaitot HTML pamata kodēšanu, HTML5 audekla zīmēšanu, ģeogrāfisko atrašanās vietu, lokālo krātuvi, kā arī HTML5 audio un video.

Raksta oriģināls pirmo reizi tiek publicēts WHSR emuārs; to tagad pārvalda un atjaunina BuildThis.io personāls.

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