Pradėkite nuo HTML5

Pradėkite nuo HTML5
Šį vadovą galima atsisiųsti kaip nemokamą PDF. Atsisiųskite šį failą dabar . Nesivaržykite nukopijuoti ir pasidalyti šia informacija su draugais ir šeima.

Turinys

§1. Įvadas





§2 - Semantinis žymėjimas



§3 - formos





§4 - Vidutinis

§5 - CSS3 transformacijos ir animacijos



§6 - tiesiog užtenka „Javascript“

§7 - kūrybinė drobė



§8 - kur toliau?

1. Įvadas

Jūs girdėjote apie tai: HTML5. Visi juo naudojasi. Tai skelbiama kaip interneto gelbėtoja, leidžianti žmonėms kurti turtingus, įtraukiančius tinklalapius nesinaudojant „Flash“ ir „Shockwave“.



Bet kas iš tikrųjų yra?

Na, į tai nėra lengva atsakyti. Šioje HTML5 pamokoje bandysime pateikti keletą atsakymų. HTML5 naudojamas apibūdinti tikrai įvairią dalykų grupę. Tai yra tinklalapių rašymo standartas. Tai yra API rinkinys. Tai naujas būdas pridėti interaktyvumo prie tinklalapių.

HTML5 yra visa tai ir dar daugiau. Taigi apie ką ši knyga?

Šioje HTML5 pamokoje darysiu prielaidą, kad kažkada palietėte HTML ir CSS. Galbūt jūs sukūrėte savo „Wordpress“ temą arba taisėte „MySpace“ maketą. Galbūt perskaitėte patį „MakeUseOf“ XHTML vadovą. Esmė ta, kad darau prielaidą, kad žinote savo kelią į tinklalapį ir kad tai, ką aptariame šiame vadove, jums nebus per daug svetimi.

Šio vadovo tikslas nėra išmokyti jus viso HTML5. Tai visiškai nepatektų į šios knygos taikymo sritį. Tikslas yra švelniai supažindinti su šiomis nuostabiomis naujomis žiniatinklio technologijomis ir parodyti keletą įdomių būdų, kaip jas įtraukti į savo svetaines.

Kodėl norėtumėte išmokti HTML5?

Tai teisingas klausimas. Ar išmaniųjų telefonų ir programų pasaulyje tikrai svarbu išmokti programuoti tinklalapius?

Na, tikėkite ar ne, tikrai įprasta rašyti išmaniųjų telefonų programas naudojant HTML5 technologijas. Dar visai neseniai „Facebook“ programa, skirta „Android“, buvo parašyta naudojant HTML5, CSS ir „Javascript“.

„Blackberry“ yra dar viena didelė kompanija, kuri labai mėgsta HTML5. Tai akivaizdu naujausioje jų mobiliosios operacinės sistemos „Blackberry OS 10“ iteracijoje, kur jie aktyviai skatina kūrėjus kurti programas savo telefonams naudojant žiniatinklio technologijas.

Nauji „Firefox“ OS išmanieji telefonai taip pat veikia tik naudojant HTML5 programas. Šiandienos išmaniųjų telefonų klimato sąlygomis labai svarbu žinoti HTML5.

Be to, HTML5 mokymasis yra naudingas jūsų karjerai. Netikite manimi? Pasak Indeed.com , vidutinis metinis atlyginimas HTML5 kūrėjui yra akį traukiantis 89 000 USD. Vis daugiau įmonių keičia savo svetaines, kad naudotų HTML5 technologijas, HTML5 kaminą išmanantys kūrėjai yra geidžiami - dabar labiau nei bet kada.

1.1 Būtinos sąlygos

Ši HTML5 pamoka numato keletą dalykų. Pirma, tai reiškia, kad žinote, kaip veikia žiniatinklis, ir žinote, kaip sukurti pagrindinį tinklalapį. Turėtumėte sugebėti sujungti kai kuriuos HTML elementus ir pateikti tam tikrą informaciją žiniatinklio naršyklėje. Matydamas ir

žymos nėra pernelyg bauginančios, ir jūs nebijote susitepti savo rankų naudodami kokį nors šaltinio kodą.

Antra, šiame vadove daroma prielaida, kad žinote, kas yra CSS ir kaip ji veikia. Mes nesitikime, kad būsite dizaino genijai, ir nesitikime, kad žinosite visą CSS specifikaciją. Tačiau turėtumėte sugebėti pritaikyti stilių tinklalapio elementui, turėti nuorodą į CSS failą ir žinoti skirtumą tarp ID ir klasės ir kaip pritaikyti stilių kiekvienam iš jų.

Jei krapštote galvą dėl to, kas išdėstyta aukščiau, nesijaudinkite. Vienas iš geriausių HTML ir CSS dalykų yra tai, kad tai tikrai labai paprasta. Tiesą sakant, „MakeUseOf“ turi neįtikėtiną XHTML vadovą, kuris tikrai greitai paspartins.

Perskaitę šį vadovą, galbūt norėsite pažvelgti į šiuos straipsnius:

Jums taip pat reikės modernaus teksto redaktoriaus ir naršyklės. Bet kuri „Internet Explorer“ versija, senesnė nei „IE 9“, ir kai kurios senesnės „Safari“, „Chrome“ ir „Firefox“ versijos susidurs su daugeliu funkcijų, kurios yra HTML5 dalis, ir gali trukdyti jums vadovautis šiuo vadovu.

Todėl esate raginami atsisiųsti modernią naršyklę. Aš rekomenduoju „Google Chrome“ ir aš jį naudosiu kiekviename pavyzdyje.

Be to, viskas, ko jums reikės, yra noras mokytis. Na, ir teksto redaktorius.

1.2 Teksto redaktoriai žiniatinklio kūrimui

Teksto redaktorius yra tas, kurį ketinate naudoti rašydami savo kodą. Jums gali būti įdomu, kas yra teksto redaktorius.

Pirma, tai nėra teksto rengyklė. Tokios programos, kaip „Microsoft Word“ ir „Apple“ puslapiai, visiškai nepritaikytos žiniatinklio kūrimui. Taip yra todėl, kad jie prideda papildomos informacijos prie jūsų HTML, CSS ir „Javascript“ failų, todėl jūsų žiniatinklio naršyklei sunku skaityti.

Teksto redaktorius išrašo simbolius į teksto failą, o ne daug daugiau. Tai leidžia kurti failus be papildomo formatavimo ir juos galima išsaugoti naudojant bet kurį pasirinktą plėtinį.

Jūsų kompiuteris jau yra su vienu. Jei naudojate „Windows“ kompiuterį, „Notepad“ yra teksto redaktorius, kurį greičiausiai įdiegėte.

„Mac“ sistemoje situacija yra šiek tiek kitokia. „OS X“ yra su keturiais skirtingais teksto redaktoriais. Jie vadinami „Vim“, „Emacs“, „Pico“ ir „Nano“. Tačiau, skirtingai nei „Notepad“, visi jie veikia terminale.

Tai šiek tiek gąsdina žmones, kurie yra nauji interneto kūrėjai, ir neturėtų jais naudotis žmonės, kurie dar nėra programinės įrangos kūrėjai. Šiame vadove jų nenaudosime. Tačiau, kai šiek tiek labiau pasitikite programine įranga ir žiniatinklio kūrimu, tikrai verta pažvelgti į „Vim“ ir „Emacs“. Jie abu yra galingi teksto redaktoriai, o juos įvaldę galite sutaupyti labai daug laiko.

„Linux“ sistemoje numatytasis teksto redaktorius skiriasi įvairiuose platinimuose. „Ubuntu“ greičiausiai yra „Gedit“, kuris yra gana malonus teksto redaktorius, kuris nėra labai panašus į „Notepad“.

Tačiau šiame kurse mes rašysime savo kodą naudodami tris skirtingus įrankius.

Pirmasis yra „Sublime Text 2“. Aš nuoširdžiai negaliu to pakankamai rekomenduoti. Jis ateina su visais dalykais, kurie palengvina pradedančio kūrėjo gyvenimą. Pirma, tai palengvins jūsų kodo nuskaitymą nuspalvinus tam tikras dalis. Antra, tai leidžia lengvai perjungti failus ir valdyti visus failų projektus. Tai idealiai tinka norint perjungti failus ir redaguoti kelis kodo bitus.

Trečiasis yra „Javascript“ konsolė, įmontuota „Google Chrome“. Tai leidžia mums parašyti „Javascript“ ir pamatyti, kaip jis iš karto paleidžiamas, ir bus naudojamas paaiškinti pagrindines programavimo sąvokas.

Antrasis yra svetainė, vadinama „Codepen.io“. Ši nuostabi svetainė leis naršyklėje koduoti HTML, CSS ir „Javascript“ ir yra nemokama. Tai taip pat leis akimirksniu pamatyti pakeitimus.

2. Semantinis žymėjimas

Šiame skyriuje sužinosite apie semantinį žymėjimą ir tai, kaip sutvarkyti kodą pagal jo turinį.

Dar visai neseniai HTML kodas paprastai buvo sudarytas naudojant žymas. Tai leido jums sukurti elementų grupę ir pritaikyti šiems elementams stilių.

Tai pavyko, tačiau buvo kur tobulėti. Žymų problema buvo ta, kad ji nebuvo semantinė. Div iš tikrųjų nieko nereiškia.

Semantinis žymėjimas yra nauja HTML5 funkcija. Tai suteikia naujų žymų, kurios veikia taip pat kaip „div“ žyma, tačiau yra skirtos žymėti įprastas puslapio dalis.

Taigi, kaip jie veikia? Apsvarstykite šį kodą.

Šioje kodo dalyje turime naršymo juostą, pavadinimą ir sąrašą. Tai nėra labai panaši į daugumą svetainių, kuriose, tikėtina, kada nors lankysitės, kai apie tai pagalvosite.

kuo skiriasi facebook ir facebook lite

Pažiūrėkime straipsnį apie „MakeUseOf“. Pastebėsite, kad yra dalis puslapio, skirta tik naršymui į kitus straipsnius. Taip pat pastebėsite, kad yra kita puslapio dalis, kurioje yra žodžiai, sudarantys straipsnį. Puslapio viršuje pamatysite antraštę su „MakeUseOf“ logotipu ir kai kuriomis kitomis nuorodomis.

Kai pagalvoji, daugelis svetainių laikosi šių konvencijų. Daugelyje svetainių yra dalis, skirta navigacijai. Paprastai jie turi turinį. Jie greičiausiai turi antraštę.

Semantinės žymės yra žymos, leidžiančios apibrėžti svetainės dalis, kurios dažniausiai randamos daugumoje svetainių. Jie nieko neprideda prie puslapio, tačiau leidžia grupuoti žymas pagal jų turinį ir taikyti stilių toms grupėms.

Taigi, prisiminkite tą kodą, kurį turėjome anksčiau? Pažvelkime į tai, pridėję tam tikrą semantinį žymėjimą.

Kaip matote, kodą lengviau perskaityti. Jūs žinote, kurios dalys yra, ir nėra jokių neaiškumų. Tai svarbu, nes taip lengviau parašyti gerą, švarų kodą. Jei kada nors nuspręstumėte tapti profesionaliu interneto dizaineriu, tai tampa svarbiausia - niekada nežinote, kas skaitys jūsų sukurtą darbą.

Taigi, pažvelkime į keletą semantinių žymėjimo žymų.

2.1 skirsnis

Skyrius yra tikrai naudinga žyma. Jis naudojamas norint surinkti didžiulę informaciją ir turinį, pažymėtą antrašte ar pavadinimu. Pagalvokite apie tai kaip apie knygos skyrių. Skyrius turi pavadinimą, jame taip pat gali būti paveikslėlių, diagramų, grafikų ir žodžių. Visa tai bus naudojama skilties žymoje.

2.2 straipsnis

Straipsnio žyma naudojama tam, kaip skamba; Turinys, pvz., Tinklaraščio įrašas ar naujienų istorija. Šis turinys turėtų būti atskirtas nuo likusio tinklaraščio ir vis tiek turi būti nuoseklus.

2.3 Šalia

Ši žyma skirta turiniui, kuris yra susijęs, bet nėra neatsiejama tinklalapio dalis. Tai gali būti daugybė faktų, susijusių su naujienų istorija ar vartotojo dienoraščio biografija.

2.4 Antraštė

Daugelyje tinklalapių puslapio viršuje yra juosta, kurioje yra logotipas, tam tikra informacija apie svetainę ir galbūt kai kurios nuorodos. Naudodami semantinį žymėjimą, naudokite antraštės žymą, kad visa tai būtų.

2.5 Nav

Šis elementas skirtas jūsų svetainės naršymo daliai. Jame būtų nuorodos į kitas svetaines ar kitus svetainės puslapius. „MakeUseOf“ kontekste tai gali būti puslapio dalis, esanti po antrašte.

Ši žyma skirta apatinei puslapio daliai. Čia galite įdėti kontaktinę informaciją, autorių teisių informaciją, žemėlapį ar nuorodas į „apie mane“ puslapį.

2.7 Išbandykite save

  • Kas yra semantinis žymėjimas ir kam jis naudojamas?
  • Kuriu tinklalapį ir noriu naudoti semantinę žymą biografijai apie mane. Kurį naudoti?

3. Formos

Jei kada nors kūrėte žiniatinklio dizainą, tikriausiai žinote, kaip sukurti paprastą HTML formą. Jei esate tikrai protingas, tikriausiai žinote, kaip panaudoti iš formos gautą informaciją ir kaip su ja ką nors padaryti, pavyzdžiui, įdėti ją į duomenų bazę.

Formos yra labai svarbios. Jie yra daugelio dalykų, kuriuos mes darome internete, pagrindas. Kiekvieną kartą, kai sukuriate būsenos atnaujinimą savo mėgstamame socialiniame tinkle, perkate ką nors iš „Amazon“ ar siunčiate el. Laišką, tikriausiai naudojote HTML formą.

Tikriausiai nežinojote, kad formų kūrimo būdas radikaliai pasikeitė HTML5. Tai taip pat žymiai geriau. Šiame skyriuje apžvelgsime kai kuriuos šaunius dalykus, kuriuos dabar galite padaryti, naudodami tik seną žymėjimą.

Taigi, kas tokio nuostabaus naujame būde, kuriuo galime rašyti formas HTML5 formatu? Pirma, galite užtikrinti, kad kai kurie laukai turi būti užpildyti, kad juos būtų galima pateikti, tiesiog pakeisdami pačios formos žymėjimą. Be to, tam nebereikia rašyti kalnų „JavaScript“ ar PHP. Tai nerealiai lengva.

Antra, galite užtikrinti, kad jūsų vartotojai į jūsų formą galėtų pateikti tik tam tikros rūšies informaciją. Taigi, tarkime, kad turite savo adresatų sąrašo svetainę ir norite, kad žmonės galėtų pateikti tikruosius el. Pašto adresus? Tai galite padaryti tiesiog naudodami HTML5. Tai tikrai neįtikėtinai galinga.

Trečia, galite pagerinti savo formų išvaizdą, suteikdami tam tikriems laukams vietos rezervavimo ženklą. Tai padarys juos žymiai intuityvesnius, nes galite parodyti savo vartotojams, ko tikitės iš formos.

3.1 Formos tobulinimas

Taigi, pažvelkime į formą ir pažiūrėkime, kaip ją patobulinti.

Ši forma yra gana paprasta. Įvedamas vardas, el. Pašto adresas ir mėgstamiausia spalva, o tada vartotojas gali tai pateikti. Jame nėra patvirtinimo, kokia informacija į jį įdėta, ir niekas netrukdo vartotojams pateikti šios formos su kai kuriais tuščiais laukais. Pakeiskime visa tai.

Taigi, pirmas dalykas, kurį norėsime padaryti, yra užtikrinti, kad el. Pašto laukas priimtų tik el. Laišką. Anksčiau tai buvo gana sunki užduotis, nes turėjote sukurti įvairialypį „Regex“ kodą. Na, ne daugiau. Jums tereikia pakeisti įvesties tipą iš „tekstas“ į „el. Paštas“. Kai bandysite pateikti šią formą su nesąmonėmis, ji bus skundžiama ir primygtinai reikalauja, kad pateiktumėte el. Laišką.

3.2 Įvesties tipai ir modeliai

Yra ir kitų įvesties tipų, kurių galite reikalauti. Tai apima telefono numerius, žiniatinklio adresus, paieškos formas ir net spalvų rinkiklius! Kadangi HTML5 nuolat tobulinamas, suprantama, kad netrukus artimiausiu metu galėsime nurodyti daugiau įvesties tipų.

Be to, tokiems dalykams kaip telefono numeriai, kurie skiriasi priklausomai nuo vietovės, galite nurodyti įvesties modelius. Jie sukurti naudojant vadinamąją „įprastą išraišką“ ir yra gana sudėtingi, tačiau nepaprastai galingi.

Mes taip pat norėsime pateikti savo srities el. Laiško pavyzdį, kad vartotojas neturėtų abejonių dėl to, ką jis turi pateikti. Tai padaryti tikrai lengva. Tiesiog sukurkite naują „rezervuotos vietos“ atributą naudodami el. Pašto adreso pavyzdį.

Užtikrinsime, kad laukas „Mėgstamiausia spalva“ būtų užpildytas. Į paskutinį el. Pašto įvesties žymos kampinį skliaustelį (>) tiesiog parašykite „būtina“. Viskas. Dabar, kai bandysite pateikti savo formą be vertės, bus pateiktas klaidos pranešimas.

Tikrai neįtikėtinas šių klaidų pranešimų dalykas yra tas, kad vartotojas neturi jų rašyti ar rašyti jokio kodo, kad juos sukurtų. Tiesiog pakeiskite lauką, kad jis būtų privalomas, ir jis tiesiog veikia. Atsižvelgiant į tai, galima juos pritaikyti, jei norite.

Tai buvo neįtikėtinai trumpas įvadas į formų galią HTML5. Jei norite skaityti daugiau, rekomenduoju apsilankyti šiose nuorodose.

Papildoma literatūra:

  • CSS gudrybės - parašykime semantinį žymėjimą
  • HTML5 daktaras - pakalbėkime apie semantiką

3.3 Išbandykite save

Kitą savaitę jūsų gimtadienis, ir jūs norite sukurti registracijos formą, kad žinotumėte, kiek pyrago reikia sukurti. Atidarykite teksto rengyklę ir sukurkite formą su šiais laukais.

  • vardas
  • Elektroninio pašto adresas
  • Telefono numeris
  • Alergija

Įsitikinkite, kad vardo, el. Pašto adreso ir telefono numerio laukai yra privalomi ir kad el. Pašto ir telefono numerio laukai yra įvesti naudojant el. Pašto ir tel. Sukurkite alergijos lauko vietos rezervavimo ženklą, kurio vertė yra „žiedadulkės, kiaušiniai, kišenė“.

Žaisk su forma. Pabandykite privalomus laukus pateikti tuščius ir į telefono numerio lauką įterpkite neskaitinius simbolius. El. Pašto lauke įveskite tai, kas nėra el. Pašto adresas. Kas atsitinka?

4. Vidutinis

Anksčiau vienintelis būdas įterpti vaizdo įrašą ar garso įrašą į tinklalapį buvo naudojant „Flash“, „Shockwave“ ar „SilverLight“.

Tai nebuvo idealu. Pirma, nė viena iš šių sistemų neveikė taip gerai mobiliuosiuose įrenginiuose. Jie tiesiog nebuvo įrengti šiuolaikiniam išmaniųjų telefonų ir planšetinių kompiuterių pasauliui.

įdiegtų programų sąrašas windows 10

Be to, jie buvo patentuoti formatai. Dėl to „Linux“ ir „OS X“ vartotojai galėjo įgyti gana antrarūšę patirtį arba netgi buvo užkirstas kelias vartoti žiniasklaidos paslaugas, nes tai nebuvo prieinama jų platformai.

Galiausiai jie turėjo polinkį į lėtumą. Jei naudojatės nepakankamai veikiančiu ar senesniu kompiuteriu, neturėtumėte geros patirties žiūrėdami vaizdo įrašą naudodami šias sistemas. „Flash“ tuo ypač pagarsėjo.

4.1 Kaip HTML5 daro vaizdo įrašus ir garsus nuostabius

HTML5 tai pakeitė, leisdama žiniatinklio kūrėjams į savo tinklalapius įtraukti vaizdo ir garso įrašus, naudojant tik kelias kodo eilutes. Tai puikiai tinka mobiliesiems įrenginiams ir veikia kiekvienoje šiuolaikinėje interneto naršyklėje.

Todėl pagrindinės įmonės, tokios kaip „YouTube“, „Vimeo“ ir „Netflix“, naudojasi HTML5 revoliucijos pranašumais. Kodėl neprisijungi prie jų?

4.2 Viskas apie kodekus

Šiame skyriuje jūs sužinosite, kaip panaudoti HTML5 galią, kad į savo tinklalapius įtrauktumėte garso ir vaizdo įrašų.

Visų pirma, turiu pradėti nuo įspėjimo. Nors HTML5 vaizdo įrašą galite naudoti kiekvienoje šiuolaikinėje žiniatinklio naršyklėje, jis neveikia vienodai visose interneto naršyklėse. Kiekvienos naršyklės naudojami kodekai skiriasi. „Internet Explorer“ galite naudoti tik MP4 vaizdo įrašus. „Chrome“ yra šiek tiek dosnesnė ir leidžia naudoti „WebM“, MP4 ir „Ogg Theora“ vaizdo įrašus. „Opera“ yra šiek tiek ribojanti ir leidžia naudoti tik „Theora“ ir „WebM“ vaizdo įrašus.

Dėl to jūs turite būti šiek tiek sumanūs, kaip įterpti vaizdo įrašą į savo tinklalapį. Taigi, pažiūrėkime, kaip tai veikia.

4.3 Pradėti nuo vaizdo įrašo

Norėdami pradėti, turėsite sukurti keletą atidarymo ir uždarymo žymų. Čia rasite nuorodą į savo vaizdo failus. Bet pirmiausia norėsite sukurti plakatą. Ką tai reiškia?

Na, kai laukiate vaizdo įrašo įkėlimo, jūsų svetainę lankantis asmuo gali pamatyti su vaizdo įrašu susijusią nuotrauką. Norėdami tai padaryti, tiesiog suteikite vaizdo įrašo žymoms „plakato“ atributą su norimo susieti vaizdo reikšme. Tai turėtų atrodyti taip.

Kitas dalykas, kurį norėsime padaryti, yra sukurti atsarginę kopiją. Ką tai reiškia? Taigi, tarkime, kad naudojate vieną iš senesnių, mažiau nuostabių naršyklių. Daugelis šių senesnių naršyklių nepalaiko HTML5 vaizdo įrašų, todėl negali atkurti HTML5 vaizdo įrašų. Norėsite palikti jiems pranešimą, informuojantį, kad jie norės atnaujinti savo naršyklę ir kad kol jie to nepadarys, jie negalės žiūrėti jūsų vaizdo įrašo.

Norėdami tai padaryti, tiesiog parašykite savo pranešimą vaizdo įrašų žymų viduje. Nieko kito nereikia. Kai tai padarysite, jums liks kodas, kuris atrodo taip.

Dabar pridėkime keletą vaizdo įrašų. Aš tai išbandysiu „Google Chrome“, todėl susiesiu su MP4 filmu. Norėdami tai padaryti, sukuriu šaltinio žymą ir priskiriu jai src atributą, kuris turi norimo įtraukti vaizdo įrašo vertę.

Mano puslapis dabar paruoštas atidaryti žiniatinklio naršyklėje. Aš susiejau filmą, kuris yra tikrai didelis, todėl atidarius galima pamatyti tik plakatą.

4.4 Garso pridėjimas

Garsas gali būti įterptas į jūsų tinklalapį tokiu būdu, kuris labai primena, kaip įterpėme vaizdo įrašą į savo puslapį.

Pirma, sukuriama keletas garso žymų. Šiose garso žymėse yra „valdiklių“ atributas. Tai suteikia vartotojui, apsilankiusiam puslapyje, galimybę pristabdyti, leisti atgal ir greitai persukti atkuriamą garsą.

Tada į MP3 failą, su kuriuo norite susieti, įtraukiate šaltinio žymą. Jūs tikrai neturite jaudintis dėl kodeko suderinamumo. Dauguma naujausių žiniatinklio naršyklių turi galimybę atkurti MP3 garso įrašą, nors gera praktika taip pat yra „.ogg“ ir „.wav“ failai.

Galiausiai galite sukurti atsarginę kopiją senesnėms naršyklėms. Tai daroma taip pat, kaip sukūrėte atsarginį vaizdo įrašo įrašą.

Galutinis rezultatas atrodo šiek tiek taip.

Kai atidarote tai žiniatinklio naršyklėje, ji turėtų atrodyti šiek tiek taip.

4.5 Išbandykite save

  • Koks yra jūsų vaizdo įrašų žymų plakato tikslas?
  • Kokių kodekų negalite naudoti „Internet Explorer“?
  • Jei norėčiau, kad būtų galima pristabdyti tam tikrą garso įrašą, kokį atributą pridėtumėte prie „garso“ žymos?

Papildoma literatūra:

5. CSS3 transformacijos ir animacijos

CSS tradiciškai buvo naudojamas tvarkant tinklalapio maketą ir dizainą. Tai vis dar tiesa, tačiau naujausioje iteracijoje ji įgijo galimybę valdyti animacijas ir elementų bei vaizdų transformacijas.

Žmonės padarė keletą nuostabių dalykų naudodami CSS3 - nuo skaitmeninio laikrodžio sukūrimo iki viso pongo žaidimo parašymo. Kažkas netgi panaudojo jį, kad iš naujo sukurtų įžanginius „Mad Men“ titrus. Tai tikrai galinga technologija ir ją įvaldžius, galima papildyti savo tinklalapį nuostabiu funkcionalumu.

Šiame skyriuje trumpai supažindinsiu su CSS3 ir parodysiu, kaip į savo puslapį pridėti nuostabių efektų.

Pirmiausia eikite į „codepen.io“ ir sukurkite naują rašiklį. Šio skyriaus metu mes tai naudosime kaip savo darbo vietą.

Pradėsime nuo paprasto ir sukursime paprastą vaizdo transformaciją, kuri, pasukus vaizdą, pasuks vaizdą 3 laipsniais. Pirmiausia sukurkite div žymą ir suteikite jai ID. Žemiau pateiktame pavyzdyje aš jam suteikiau „muo“ ID.

5.1 CSS slinkimo efektai

Į tą skyrių įtraukite pasirinktą vaizdą. Įtraukiau „MakeUseOf“ logotipo kopiją.

Tada turėsite parašyti kai kurias stiliaus lapo taisykles. Žemiau pateiktame pavyzdyje aš sukūriau viršutinę ir kairę paraštes, kad vaizdui suteikčiau vietos. Taip pat įtraukiau įdomios išvaizdos stiliaus lapo taisyklę, prasidedančią „#muo: hover“. Kas tai?

Pridėdami „: hover“ prie stiliaus lapo taisyklės, nesvarbu, ar tai būtų elementas, ID ar klasė, jūs iš tikrųjų liepiate naršyklei taikyti šį stilių, kai pelė valdo elementą. Gana šaunu, tiesa?

Taisyklės „#muo: hover“ viduje yra eilutė „-webkit-transform: rotate (3deg)“. Kaip esu tikras, kad atspėjote, tai liepia naršyklei pasukti tą div elementą trimis laipsniais.

Tačiau verta paminėti, kad ši žyma veikia tik „Chrome“ ir „Safari“. Jei norite, kad jūsų kodas veiktų „Firefox“ ar „Internet Explorer 9“ ir naujesnėse versijose, norėsite pakeisti savo CSS failą ir įtraukti šias eilutes.

Dabar, užvedus pelės žymeklį virš paveikslėlio, jis atrodo taip:

5.2 CSS3 naudojimas vaizdams keisti

Taigi, kodėl ten sustoti? Ar žinojote, kad taip pat galite naudoti „transformavimo“ metodą, norėdami padidinti ar sumažinti vaizdą. Pakeiskime savo CSS failą ir įtraukime šias eilutes.

Kaip matote, dabar įtraukėme naują transformacijos taisyklę, tačiau šį kartą liepiame atlikti tai, kas vadinama „masteliu“. Tai tikrai gražus būdas padidinti vaizdo dydį. Tam reikalingi du parametrai (tie skaičiai, kuriuos matote tarp tų skliaustelių) ir jie reiškia sumą, kuria padidinate elemento aukštį ir plotį.

Kaip matote iš kodo, aš padidinsiu „MakeUseOf div“ logotipo dydį 50%. Galite patikrinti, ar tai veikia, užvedę pelės žymeklį ant jo. Pamatysite, kad dabar „MakeUseOf“ logotipas yra gerokai ištemptas.

Tai buvo labai švelnus įvadas į CSS3 transformacijas. Nors CSS3 iš tikrųjų yra labai nauja, dabar galite pamatyti, kad su juo galite atlikti daug labai įdomių manipuliacijų.

5.3 Išbandykite save

  • Kaip pritaikyti stilių elementui, kai jis užvedamas?
  • Kaip pasukti vaizdą naudojant CSS3?
  • Kaip padidinti mastelį naudojant CSS3?
  • Kas atsitiks, jei perduosite savo transformacijos metodą „versti (50 piks., 50 piks.)“?

Papildoma literatūra:

HTML5 Rocks - pristatymas

6. Pakanka „Javascript“

Jei norite naudoti scenarijų savo interneto naršyklėje, turite naudoti „Javascript“. Deja, nėra dviejų būdų. Tai kalba, turinti daug gerbėjų ir daug niekintojų. Kalbant kalbomis, ji turi daug karpų. Yra priežastis, kodėl labiausiai žinoma knyga apie šią kalbą vadinama „Javascript: The Good Parts“.

Viename skyriuje bus neįmanoma išmokyti jus naudotis „Javascript“. Čia ne toks tikslas. Tikslas yra išmokyti jus pakankamai „Javascript“, kad galėtumėte suprasti kitą skyrių, kuriame kalbama apie technologiją, vadinamą drobė, piešiniams ir animacijoms kurti.

6.1 Prieiga prie konsolės

Norėdami tai padaryti, naudosime „Javascript“ konsolę, įmontuotą kiekvienoje „Google Chrome“ kopijoje. Norėdami tai pasiekti, galite dešiniuoju pelės klavišu spustelėti bet kurį tinklalapį ir paspausti „Tikrinti elementą“. Tada spustelėkite „Konsolė“. Turėtumėte tai pamatyti.

Tradiciškai pirmoji programa, kurią bet koks pradedantysis kūrėjas kada nors rašo, yra programa „Labas pasaulis“. Tai paprasta programa, kuri spausdina frazę „Labas pasaulis“, o ne daug daugiau. Konsolėje įveskite „console.log“ („Labas pasaulis!“) ;.

6.2 Jūsų pirmoji programa

Taigi, ką mes tiksliai padarėme? Pirmiausia mes pavadinome „console.log“. Tai yra šiek tiek kodo, integruoto į kompiuterį, kuris tiesiog išspausdina viską, ką liepiate. Tada prie jo pridėjome skliaustelius ir įtraukėme į dvigubas kabutes „Labas pasaulis“. Tai vadinama „praeinančiais argumentais“, o mūsų pateiktas argumentas vadinamas eilute. Kai norite ką nors padaryti su raidėmis ir specialiaisiais simboliais, tiesiog turite naudoti atskiras kabutes. Tačiau, jei norite ką nors padaryti naudodami skaičius, paprastai nereikia naudoti kabučių, kaip parodyta žemiau.

6.3 „JavaScript“ kintamieji

Taip pat galite perduoti kintamuosius į „console.log“. Kintamieji skamba sudėtingai, tačiau viskas, kas iš tikrųjų yra, yra erdvė informacijos gabalams sudėti. Dažnai tai yra skaičiai ar raidės. Norėdami tai padaryti, jūs deklaruojate kintamąjį naudodami raktinį žodį „var“, suteikiate jam pavadinimą ir tada su lygybės ženklu suteikiate jam reikšmę. Taigi, aš sukursiu kintamąjį „labas“ ir suteiksiu jam vertę „Labas pasaulis!“. Tada perduosiu tai console.log.

Atkreipkite dėmesį, kaip aš neperduodavau „labas“ į „console.log“ naudodami kabutes. Taip yra todėl, kad norėjau į konsolę atspausdinti „labas“, o ne „labas“ turinį.

6.4 Kokias funkcijas atlieka

Gali būti šiek tiek nuobodu perrašyti tą pačią kodo dalį vėl ir vėl, todėl dėl šios priežasties rašome funkcijas. Funkcijos yra lengvesnės, nei manote. Visa tai yra kodo gabalai, kuriuos galime pakartotinai panaudoti, neperrašydami to paties kodo. Žemiau mes sukūrėme funkciją, pavadintą „sup“, ir perduodame jai argumentą naudodami skliaustelius, kurie vėliau registruojami ekrane. Mes vadiname „sup“, siunčiant į konsolę „sup“ („Labas pasaulis!“); “.

6.5 Veiksmo kartojimas naudojant ciklą „For“

Tarkime, norėjote tą patį veiksmą atlikti tam tikrą skaičių kartų. Dėl šios priežasties mes naudojame ciklą „už“. Iš pradžių jie atrodo bauginantys, tačiau juos suprasti nesunku. Pradėkite rašydami „už ()“.

Tose skliausteliuose norėsime sukurti kintamąjį, kuris skaičiuotų, kiek kartų atlikome veiksmą. Taigi, mes gauname kažką panašaus į „for (var i = 0;)“.

Tada norime patikrinti, ar aš neatitikau jokios sąlygos. Taigi šiuo atveju norime matyti, kad jis yra mažesnis nei 10. Taigi po kabliataškio rašome „i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

Jei i yra mažesnis nei 10, norime jį pridėti po vieną ir tada ką nors padaryti. Taigi, mes įdedame „i = i + 1“. Mūsų kilpa beveik baigta: 'for (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

Po to norėsime imtis veiksmų. Taigi, po paskutinių skliaustų, mes parašome keletą garbanotų skliaustų ir tarp jų ketiname paguosti.log i reikšmę. Taip bus sukurtas skaitiklis, skaičiuojantis iki devynių.

Paskutinės dvi programavimo konstrukcijos, į kurias mes žiūrėsime, yra teiginiai „if“ ir „while“.

6.6 Jei teiginiai

Pareiškimas „jei“ atlieka veiksmą, jei tenkinami tam tikri kriterijai. Jie panašūs į „už“ kilpas statyboje ir veikia taip. Tarkime, kad turite kintamąjį „sūrio mėsainiai“ ir norite sužinoti, ar jo vertė yra „skanu“. Jei taip, norite prisijungti prie ekrano „yum, cheeseburgers“. Norėdami tai padaryti, parašykite kažką panašaus.

Atkreipkite dėmesį, kaip aš parašiau „jei (sūrio mėsainiai ==„ skanu “)“. Norėdami patikrinti lygybę, naudojate dvigubą ar trigubą lygtį, o vienai - lygiai, norėdami priskirti vertę.

6.7 Nors ciklai

Galiausiai ciklas „while“ atlieka veiksmą, kol įvykdomi kriterijai. Taigi įsivaizduokite, kad norite užsisakyti „yum, cheeseburgers“, o sūrio mėsainiai yra lygiai tokie pat skanūs. Norėdami tai padaryti, parašykite taip.

Verta paminėti, kad tai patektų į begalinę kilpą, todėl turėtumėte vengti atlikti veiksmus su verte, kuri greičiausiai nesikeis. Dėl to jūsų naršyklė gali būti užrakinta arba kodas gali neveikti.

Kaip jau minėjau anksčiau, tai buvo labai trumpas įvadas į programavimo konstrukcijas „Javascript“. Kviečiame skaityti daugiau apie šią įdomią, nors ir didžiulę temą.

6.8 Išbandykite save

  • Noriu skaičiuoti nuo 30. Parašykite ciklą „už“, kuris tai padarytų.
  • Noriu sukurti kintamąjį „makeuseof“ ir suteikti jam „nuostabų“ vertę. Kaip tai daroma?
  • Noriu sukurti funkciją, kuri iškviečiant atspausdintų „MakeUseOf Is Awesome“. Parašykite tą funkciją.

Papildoma literatūra:

7. Kūrybinė drobė

„Canvas“ yra puiki technologija, leidžianti piešti vaizdus ir kurti animaciją nenaudojant „Flash“ ar „Silverlight“. Žmonės jį naudojo kurdami keistus ir nuostabius dalykus, įskaitant plaukų džiovintuvo simuliatorių ir įvairius vaizdo žaidimus. Tai nuostabi ir neapsakomai didelė technologijos dalis, šioje pamokoje aš jums trumpai pristatysiu.

Verta paminėti, kad „Canvas“ veikia tik šiuolaikinėse interneto naršyklėse. Jei naudojate seną IE, „Chrome“ ar „Firefox“ versiją, gali būti, kad negalėsite sekti šio skyriaus. Jei taip yra, turėtumėte apsvarstyti galimybę atsisiųsti naujausią „Google Chrome“ versiją, kuri buvo žiniatinklio naršyklė, kurioje sukūriau šią mokymo programą.

7.1 Darbo su „Canvas“ pradžia

Visų pirma, jums reikės atidaryti žiniatinklio naršyklę ir pereiti į codepen.io. Sukurkite naują rašiklį.

Dabar turėsime deklaruoti drobės elementą. Sukurkite dvi atidarymo ir uždarymo drobės žymas. Juose turėtumėte perduoti tris atributus. Tai yra drobės elemento plotis ir aukštis kartu su jam suteiktu ID. Kaip ir anksčiau, kai įterpėte vaizdo įrašą, turėtumėte įtraukti atsarginį pranešimą.

Dabar norėsime parašyti „Javascript“ kodą, kuris kažką parodys ekrane. Pradėsime nuo pagrindinio ir sukursime paprastą raudoną kvadratą.

Mes sukursime kintamąjį (aš jį pavadinau „demonstracine versija“), tada pasirinkite drobės elementą ir priskirkite jį tam kintamajam. Norėdami tai padaryti, naudokite document.getElementByID () ir įveskite norimo pasirinkti elemento ID.

Antroji mūsų scenarijaus eilutė sukuria kitą kintamąjį, vadinamą „kontekstu“, ir tada jame iškviečia „demo.getContext („ 2d “)“. Tai pranešė naršyklei, kad mes dirbsime su 2d vaizdu, tada atliksime būtinas funkcijas, kurių mums reikia norint piešti prie ekrano.

Trečioji ir ketvirtoji eilutės yra tos, kurios piešia ekraną. Trečioji eilutė užpildo stačiakampį raudona spalva, o ketvirtoji - „fillRect“, kuri ją pozicionuoja ir apibrėžia jos ilgį bei plotį.

Nors tai nėra įspūdinga. Padarykime kažką šiek tiek pažangesnio ir panaudokime „Javascript“ bei drobės magiją, kad sukurtume visiškai naują „MakeUseOf“ logotipą.

7.2 Formos ir tekstas

Panaikinkime ketvirtąją eilutę ir pakeiskime ją tokia, kuri padėtų mūsų stačiakampį viršutiniame kairiajame kampe ir ištiestų visą drobės ilgį.

Pirmieji du argumentai apibrėžia, kur norime išdėstyti figūros x ir y ašis. Dabar nustatykime šiuos du į „0“. Trečias argumentas susijęs su formos pločiu. Nustatykime „200“, o ketvirtąjį argumentą palikite „50“. Dabar turėtumėte turėti kažką panašaus į tai.

Tai puiki pradžia, tačiau apie „MakeUseOf“ visai neminima. Taigi, mes pridėsime šiek tiek teksto. Sukurkime kintamąjį, kuriame yra „makeuseof“, ir mes jį pavadinsime „MakeUseOf“.

Tada norėsime sukurti kitą kontekstinį kintamąjį. Pavadinkite šį kontekstą2 ir įsitikinkite, kad jis yra 2d. Būtent tai mes panaudosime rašydami savo tekstą.

Mes norime, kad mūsų tekstas būtų mėlynos spalvos ir padengtų raudoną kvadratą. Taigi, kaip ir anksčiau, norėsime suteikti jai „blue“ stiliaus „fillStyle“. Dabar mes pasirenkame savo teksto ypatybes. Norime, kad jis būtų 20 pikselių didelis, paryškintas ir su „Arial“ šriftu. Mes vadiname šriftą pagal kontekstą2 ir priskiriame jam reikšmę „paryškintas 20 pikselių arial“.

Kadangi norime, kad šis tekstas padengtų ankstesnį raudoną langelį, kontekste2 turime paskambinti „textBaseLine“ ir suteikti jam aukščiausią vertę. Kai tai bus baigta, kontekstą2 vadiname „fillText“ ir perduodame kintamąjį, kuriame yra mūsų tekstas ir x ir y koordinatės, į kurias ketiname įdėti tekstą. Galutinis mūsų kodo rezultatas yra kažkas tokio.

Vaizdas, kurį sukuria kodas, atrodo taip.

7.3 Žodis ant drobės

Nors tai buvo neįtikėtinai paprastas įvadas į drobę, turėtumėte suprasti, kad tai taip pat yra neįtikėtinai didelė technologija ir nepaprastai galinga paleisti. Šis vadovas buvo tiesiog įvadas į grafikos kūrimą naudojant šią naują technologiją.

ar „Windows 10“ geresnis už „Windows 7“?

7.4 Išbandykite save

  • Prie savo sukurto vaizdo pridėkite šį šūkį: „Geriausia visų laikų technologijų svetainė!“
  • Sukurkite ciklą „už“, kuris veikia dešimt kartų. Pažiūrėkite, ar galite perkelti piešinį drobe, po vieną tašką.
  • Apvyniokite piešinį funkcija. Kas atsitiks, jei to nepaskambinsi?

Papildoma literatūra:

8. Kur toliau?

Dėkojame, kad perskaitėte mano neįtikėtinai trumpą vadovą apie naujas technologijas, randamas HTML5. Neabejotina, kad HTML5 yra ateities technologija. Jį naudoja dauguma technologijų, nes jį lengva rašyti ir jis yra galingas. Žmonės su tuo nuolat daro neįtikėtinus dalykus, ir aš neabejoju, kad ateityje būsite vienas iš tų žmonių. Man didelė garbė būti jūsų kelionės į laukinį ir nuostabų HTML5 pasaulį dalimi.

Meldžiu toliau mokytis. Tęskite kodavimą. Toliau tobulėkite ir tobulinkite, ir netrukus naudosite technologijas, kurios buvo pristatytos šiame trumpame vadove, kad sukurtumėte nuostabius produktus.

Dalintis Dalintis „Tweet“ Paštu Ar verta atnaujinti į „Windows 11“?

„Windows“ buvo pertvarkytas. Bet ar to pakanka norint įtikinti jus pereiti nuo „Windows 10“ prie „Windows 11“?

Skaityti toliau Susijusios temos
  • „Wordpress“ ir interneto svetainių kūrimas
  • HTML5
  • Ilga forma
  • „Longform“ vadovas
Apie autorių Matthew Hughesas(Paskelbti 386 straipsniai)

Matthew Hughesas yra programinės įrangos kūrėjas ir rašytojas iš Liverpulio, Anglijos. Jis retai randamas be puodelio stiprios juodos kavos rankoje ir visiškai dievina savo „Macbook Pro“ ir fotoaparatą. Galite perskaityti jo tinklaraštį http://www.matthewhughes.co.uk ir sekti jį „Twitter“ adresu @matthewhughes.

Daugiau iš Matthew Hughes

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia