Pradėkite naudotis HTML5

Šį vadovą galima atsisiųsti kaip nemokamą PDF. Atsisiųskite „HTML5“ dabar. Nukopijuokite tai ir pasidalykite ja su draugais ir šeima.

instagram viewer

ir

žymės nėra per daug bauginančios, ir jūs nebijote, kad rankos bus purvinos dėl kokio nors šaltinio kodo.

Antra, šiame vadove daroma prielaida, kad žinote, kas yra CSS ir kaip ji veikia. Mes nesitikime, kad jūs esate dizaino genijai, taip pat nesitikime, kad žinosite visą CSS specifikaciją už nugaros. Tačiau jūs turėtumėte mokėti pritaikyti stilių tinklalapio elementui, sugebėti susieti su CSS failu ir žinoti, kokie yra ID ir klasės skirtumai bei kaip kiekvienam iš jų pritaikyti stilių.

Jei galvosite dėl to, kas išdėstyta aukščiau, nesijaudinkite. Vienas iš geriausių HTML ir CSS dalykų yra tai, kad tai tikrai labai lengva. Tiesą sakant, „MakeUseOf“ turi neįtikėtinas XHTML vadovas Išmokite kalbėti „Internetas“: jūsų xHTML vadovasSveiki atvykę į XHTML - išplečiamų hiperteksto žymėjimo kalbų - žymėjimo kalbą, leidžiančią bet kam kurti tinklalapius su daugybe skirtingų funkcijų. Tai yra pagrindinė interneto kalba. Skaityti daugiau tai leis greitai pasiekti greitį.

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

• 8 internetinės svetainės su kokybės kodavimo pavyzdžiais 8 geriausios kokybės tinklalapių kodavimo pavyzdžiaiYra keletas nuostabių svetainių, siūlančių gerai suplanuotus ir naudingus HTML kodavimo pavyzdžius ir mokymo programas. Čia yra aštuoni mūsų mėgstamiausi. Skaityti daugiau
• 6 tinklaraščiai, kuriuos reikia sekti didiesiems interneto dizaineriams 6 geriausi interneto svetainių kūrimo tinklaraščiai Skaityti daugiau

Jums taip pat reikės modernaus teksto rengyklės ir naršyklės. Bet kuri senesnė nei IE 9 „Internet Explorer“ versija ir kelios senesnės „Safari“, „Chrome“ ir „Windows“ versijos „Firefox“ susidurs su daugeliu funkcijų, kurios yra HTML5 dalis, ir gali neleisti jums to sekti vadovas.

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

Be to, viskas, ko jums reikės, yra noras mokytis. O ir teksto rengyklė.

1.2 Teksto redaktoriai, skirti kurti internetą

Teksto rengyklę naudosite rašydami kodą. Jums gali būti įdomu, kas yra teksto rengyklė.

Na, visų pirma, tai nėra tekstų apdorojimo priemonė. Tokios programos kaip „Microsoft Word“ ir „Apple“ puslapiai yra visiškai netinkamos interneto plėtrai. Taip yra todėl, kad jie prideda papildomos informacijos prie jūsų HTML, CSS ir Javascript failų, todėl jūsų interneto naršyklei sunku skaityti.

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

Jūsų kompiuteris jau yra vienas. Jei naudojate „Windows“ asmeninį kompiuterį, „Notepad“ yra teksto rengyklė, kurią greičiausiai įdiegėte.

„Mac“ sistemoje padėtis šiek tiek skiriasi. „OS X“ būna keturi skirtingi teksto redaktoriai. Jie vadinami „Vim“, „Emacs“, „Pico“ ir „Nano“. Tačiau skirtingai nei „Notepad“, jie visi dirba terminale.

Tai šiek tiek baugina žmones, kurie dar nėra pradėję kurti interneto svetainių, ir neturėtų jais naudotis žmonės, kuriems programinės įrangos kūrimas yra naujas. Nenaudosime jų šiame vadove. Tačiau kai šiek tiek labiau pasitikite programinės įrangos ir interneto plėtra, tikrai verta pasidomėti Vim 7 pagrindinės priežastys, leidžiančios suteikti „Vim“ teksto redaktoriui galimybęMetų metus bandžiau vieną teksto rengyklę po kitos. Tu pavadink tai, aš išbandžiau. Kiekvieną iš šių redaktorių naudojau daugiau nei du mėnesius kaip savo pagrindinį kasdienį redaktorių. Kažkaip aš ... Skaityti daugiau ir Emacs. Jie abu yra galingi teksto redaktoriai, o įsisavinę galite sutaupyti nepaprastai daug laiko.

„Linux“ numatytasis teksto rengyklė paskirstymas skiriasi. Tikėtina, kad Ubuntu Gedit „gedit“: vienas iš paprasčiausių paprasto teksto redaktorių, turintis savybes, [„Linux“ ir „Windows“]Kai galvojate apie paprasto teksto redaktorius, pirmas dalykas, kuris gali pasirodyti jūsų galvoje, yra „Windows“ užrašų programa. Tai daro tiksliai tai, kas nurodyta jo darbo apraše - paprastos teksto ypatybės ... Skaityti daugiau , kuris yra gana malonus teksto rengyklė, kuri nelabai skiriasi nuo užrašinės.

Tačiau šiame kurse mes rašysime savo kodą trimis skirtingais įrankiais.

Pirmasis yra Sublimas tekstas 2 Išbandykite „Sublime“ 2 tekstą, kad galėtumėte redaguoti savo daugelio platformų kodą„Sublime Text 2“ yra kelių platformų kodų redaktorius, apie kurį tik neseniai girdėjau, ir turiu pasakyti, kad esu nepaprastai sužavėtas, nepaisant beta etiketės. Galite atsisiųsti visą programą nemokėdami nė cento ... Skaityti daugiau . Aš sąžiningai negaliu to rekomenduoti pakankamai stipriai. Tai ateina su visais dalykais, kurie palengvina pradedančio kūrėjo gyvenimą. Visų pirma, jūsų kodą bus lengviau perskaityti dažant tam tikras dalis. Antra, tai leidžia lengvai perjungti failus iš vieno failo į kitą ir valdyti visus failų projektus. Tai idealiai tinka perjungti failus ir taisyti kelis bitų kodus skrendant.

Trečiasis yra „Javascript“ pultas Išsiaiškinkite svetainių, susijusių su „Chrome“ kūrėjų įrankiais ar „Firebug“, problemasJei iki šiol sekėte mano „jQuery“ vadovus, galbūt jau susidūrėte su kai kuriomis kodo problemomis ir nežinote, kaip jas išspręsti. Kai susiduri su nefunkciniu bitų kodu, tai labai ... Skaityti daugiau integruota į „Google Chrome“. Tai leidžia mums parašyti „Javascript“ ir pamatyti, kaip jis nedelsiant vykdomas, ir bus naudojamas paaiškinti pagrindines programavimo sąvokas.

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

2. Semantinis žymėjimas

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

Iki šiol HTML kodas paprastai buvo tvarkomas su

Tai suveikė, tačiau dar buvo kur tobulėti. Problema su

Semantinis žymėjimas yra nauja HTML5 funkcija. Čia pateikiamos naujos žymės, veikiančios taip pat kaip „div“ žyma, tačiau skirtos žymėti įprastas puslapio dalis.

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

Šiame kode yra naršymo juosta, pavadinimas ir sąrašas. Tai nelabai skiriasi su daugeliu svetainių, kuriose, tikėtina, kada nors lankysitės, kai pagalvosite apie tai.

Pažvelkime į straipsnį apie „MakeUseOf“. Pastebėsite, kad yra ta puslapio dalis, kuri skirta tik naršyti į kitus straipsnius. Taip pat pastebėsite, kad yra ir 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 apie tai, daugelis svetainių laikosi šių konvencijų. Daugumoje svetainių yra dalis, skirta tik navigacijai. Paprastai jie turi turinį. Jie daugiau nei tikėtina, kad turi antraštę.

Semantinės žymės yra žymės, leidžiančios apibrėžti svetainių dalis, kurios dažniausiai būna daugelyje svetainių. Jie nieko neprideda prie puslapio, tačiau leidžia jums sugrupuoti žymas pagal jų turinį ir toms grupėms pritaikyti stilius.

Taigi, atsimeni tą kodą, kurį turėjome anksčiau? Pažvelkime į tai su šiek tiek semantinio žymėjimo.

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

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

2.1 skyrius

Skyrius yra tikrai naudinga žyma. Jis naudojamas didelėms informacijos ir turinio dalims, pažymėtoms antraštėmis ar pavadinimais, perimti. Galvok apie tai kaip apie knygos skyrių. Skyrius turi pavadinimą, jame taip pat gali būti paveikslėlių, schemų, grafikų ir žodžių. Skyriaus žyma būtų naudojama tam, kad būtų visa tai.

2.2 Straipsnis

Straipsnio žyma naudojama tam, kas atrodo; Turinys, pavyzdžiui, tinklaraščio įrašas ar naujienų istorija. Šis turinys turėtų būti atskirtas nuo likusio tinklaraščio ir vis tiek turėtų būti darnus.

2.3

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

2.4 Antraštė

Daugelio tinklalapių viršuje yra juosta, kurioje yra logotipas, tam tikra informacija apie svetainę ir galbūt kelios nuorodos. Semantiniame žymėjime naudokite antraštės žymą, kad būtų visa tai.

2.5 „Nav“

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

2.6 Poraštė

Ši žyma skirta tik apatinei puslapio daliai. Čia galite įdėti tam tikrą kontaktinę informaciją, informaciją apie autorių teises, žemėlapį ar keletą nuorodų į puslapį apie mane.

2.7 Išbandykite save

• Kas yra semantinis žymėjimas ir kam jis naudojamas?
• Kuriu internetinį puslapį ir noriu naudoti semantinę žymą, kad būtų biografija apie mane. Kurį aš naudoju?

3. Formos

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

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

Ko tikriausiai nežinojote, HTML5 iš esmės pasikeitė formų kūrimo būdas. Tai taip pat žymiai geriau. Šiame skyriuje apžvelgsime keletą nuostabių dalykų, kuriuos dabar galite padaryti, tiesiog naudodami seną žymėjimą.

Taigi, koks nuostabus yra naujas būdas rašyti formas HTML5? Pirmiausia galite užtikrinti, kad kai kurie laukai turi būti užpildyti norint juos pateikti, tiesiog pakeisdami pačios formos žymėjimą. Be to, jums nebereikia rašyti „JavaScript“ ar PHP kalnų, kad tai padarytumėte. Tai be galo lengva.

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

Trečia, suteikdami tam tikriems laukeliams vietos žymeklį, galite padaryti savo formas geresnes. Tai juos padarys žymiai intuityvesnius, nes galite parodyti savo vartotojams pavyzdį, ko tikitės iš formos.

3.1 Formos tobulinimas

Pažvelkime į formą ir sužinokime, kaip ją patobulinti.

Ši forma yra gana paprasta. Priimamas vardas, el. Pašto adresas ir mėgstama spalva, o tada vartotojui leidžiama pateikti. Jame nėra patvirtinimo, kokia informacija patenka į jį, ir niekas netrukdo vartotojams pateikti šią formą su kai kuriais tuščiais laukais. Pakeiskime visa tai.

Taigi, pirmas dalykas, kurio ketiname padaryti, yra įsitikinti, kad el. Pašto lauke bus tik el. Laiškai. Iš tikrųjų tai buvo gana sunki užduotis, nes jūs turėtumėte sukurti visų rūšių archeaninį „Regex“ kodą. Na, ne daugiau. Jūs tiesiog turite pakeisti įvesties tipą iš „teksto“ į „el. Paštą“. Kai bandysite pateikti tą formą su įžūlumu, ji skundžiasi ir 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, interneto adresus, paieškos formas ir net spalvų parinkimo priemones! Kadangi HTML5 nuolat tobulėja, savaime suprantama, kad netrukus artimiausiu metu galėsime nurodyti daugiau įvesties tipų.

Be to, tokiems dalykams kaip telefono numeriai, kurie skiriasi priklausomai nuo vietos, galite nurodyti įvesties modelius. Jie yra sukurti naudojant tai, kas vadinama „įprastomis išraiškomis“, ir yra gana sudėtingi, tačiau neišmatuojamai galingi.

Mes taip pat norėsime pateikti savo srities el. Pašto pavyzdį, todėl vartotojas neturi abejonių dėl to, ką jis turi pateikti. Tai padaryti tikrai nesunku. Tiesiog sukurkite naują „vietos žymeklio“ atributą su el. Pašto adreso pavyzdžiu.

Mes pasirūpinsime, kad būtų būtinas laukas „Mėgstamiausia spalva“. El. Pašto įvesties žymą paskutiniame kampo skliaustelyje (>) tiesiog parašykite „būtinas“. Viskas. Dabar, kai bandysite pateikti savo formą be vertės, ji parodys klaidos pranešimą.

Tikrai neįtikėtinas dalykas apie šiuos klaidų pranešimus yra tas, kad vartotojui nereikia jų rašyti ar rašyti jokio kodo, kad juos sukurtų. Jūs tiesiog pakeisite lauką, kad jis būtų reikalingas, ir jis tiesiog veikia. Turint tai mintyje, jei įmanoma, juos galima pritaikyti.

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

Papildoma literatūra:

• CSS triukai - rašykime semantinį žymėjimą
• HTML5 daktaras - pakalbėkime apie semantiką

3.3 Išbandykite save

Tai yra jūsų gimtadienis kitą savaitę ir norite sukurti registracijos formą, kad žinotumėte, kiek torto jums 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 ir telefono numerio laukai yra privalomi ir kad el. Pašto ir telefono numerio laukai būtų nustatyti naudojant įvesties tipus „el. Paštas“ ir „tel“. Sukurkite alergijos lauko rezervuarą, kurio vertė yra „žiedadulkės, kiaušiniai, pikis“.

Žaisk su forma. Pabandykite pateikti reikiamus laukus tuščius ir pabandykite į telefono numerio lauką įterpti ne skaitmeninių ženklų. Į el. Pašto lauką įterpkite tai, kas nėra el. Pašto adresas. Kas atsitinka?

4. Žiniasklaida

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

Tai nebuvo idealu. Pirma, nė viena iš šių sistemų mobiliesiems įrenginiams neveikė taip gerai. Jie tiesiog nebuvo aprūpinti šiuolaikiniu išmaniųjų telefonų ir planšetinių kompiuterių pasauliu.

Be to, jie buvo patentuoti formatai. Dėl to „Linux“ ir „OS X“ vartotojai galėjo įgyti gana antrą patirtį arba jiems net buvo užkirstas kelias naudotis žiniasklaidos paslaugomis, nes jų platformoje to nebuvo galima įsigyti.

Pagaliau jie linkę lėtai. Jei jūs dirbtumėte su nepakankamu ar senesniu kompiuteriu, neturėtumėte geros patirties žiūrėdami vaizdo įrašą naudodami šias sistemas. „Flash“ tai ypač pagarsėjo.

4.1 Kaip HTML5 daro nuostabų vaizdo ir garso įrašą

HTML5 tai pakeitė, leisdamas žiniatinklio kūrėjams į savo tinklalapius įtraukti vaizdo ir garso įrašą tik keliomis kodo eilutėmis. Tai veikia gydantis mobiliuosiuose įrenginiuose ir veikia kiekvienoje šiuolaikinėje interneto naršyklėje.

Todėl didžiosios kompanijos, tokios kaip „YouTube“, „Vimeo“ ir „Netflix“, naudojasi HTML5 revoliucija. Kodėl neprisijungi prie jų?

4.2 Viskas apie kodekus

Šiame skyriuje sužinosite, kaip naudoti HTML5 galią, jei norite įtraukti garso ir vaizdo įrašus į savo tinklalapius.

Pirma, aš turėsiu pradėti nuo įspėjimo. Nors HTML5 vaizdo įrašus galite naudoti kiekvienoje šiuolaikinėje interneto naršyklėje, jis neveikia vienodai kiekvienoje interneto naršyklėje. Kiekvienoje naršyklėje naudojami kodekai skiriasi. „Internet Explorer“ naudojatės tik MP4 vaizdo įrašais. „Chrome“ yra šiek tiek turtingesnė ir leidžia naudoti „WebM“, MP4 ir „Ogg Theora“ vaizdo įrašus. „Opera“ yra šiek tiek labiau ribojanti ir leidžia naudoti tik „Theora“ ir „WebM“ vaizdo įrašus.

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

4.3 Pradėkite nuo vaizdo įrašo

Pirmiausia turėsite sukurti šiek tiek atidarymo ir uždarymo

Na, o kai jūs laukiate, kol bus įkeltas jūsų vaizdo įrašas, svetainėje apsilankęs asmuo gali pamatyti vaizdą, susijusį su šiuo vaizdo įrašu. Norėdami tai padaryti, tiesiog suteikite savo vaizdo įrašų etiketėms „plakato“ atributą su vaizdo, kurį norite susieti, reikšme. Tai turėtų atrodyti taip.

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

Norėdami tai padaryti, tiesiog įrašykite pranešimą į vaizdo įrašų žymas. Nieko daugiau nereikia. Kai tai padarysite, jums teks palikti kodą, kuris atrodo taip.

Dabar pridėkime vaizdo įrašą. Aš tai išbandysiu „Google Chrome“, todėl pateiksiu nuorodą į MP4 filmą. Aš tai sukuriu „Source“ žymą ir suteikiu jai „src“ atributą, kuris turi norimą įtraukti vaizdo įrašą.

Dabar mano puslapis yra paruoštas atidaryti mano interneto naršyklėje. Aš susiejau su filmu, kuris yra tikrai labai didelis, todėl atidarius matosi tik plakatas.

4.4 Garso įrašymas

Garsą į savo tinklalapį galima įterpti tokiu būdu, kuris labai primena tai, kaip įterpėme vaizdo įrašą į savo puslapį.

Pirma, sukuriamos kelios garso žymės. Šiose garso etiketėse yra „valdiklių“ atributas. Tai suteikia vartotojui, apsilankiusiam puslapyje, galimybę pristabdyti, leisti atgal ir greitai perduoti grojamą garsą.

Tada į MP3 failą, kurį norite susieti, įtraukiate šaltinio žymą. Jums tikrai nereikia tiek jaudintis, kai reikia kodeko suderinamumo. Naujausios žiniatinklio naršyklės turi galimybę atkurti MP3 garso įrašą, nors gera praktika taip pat yra „.ogg“ ir „.wav“ failai.

Galiausiai galite sukurti atsarginę versiją senesnėms naršyklėms. Tai atliekama tokiu pačiu būdu, kokiu sukūrėte atsarginį savo vaizdo įrašą.

Galutinis rezultatas atrodo šiek tiek taip.

Kai atidarote tai savo interneto naršyklėje, jis turėtų atrodyti šiek tiek taip.

4.5 Išbandykite save

• Koks yra vaizdo įrašo žymų plakato tikslas?
• Kokių kodekų negalite naudoti „Internet Explorer“?
• Jei norėčiau galimybės pristabdyti garso įrašą, kokį atributą pridėtumėte prie savo „garso“ žymos?

Papildoma literatūra:

• HTML5 „Rocks“ vaizdo įrašas

5. CSS3 transformacijos ir animacijos

Tradiciškai CSS buvo naudojama tvarkyti tinklalapio išdėstymas ir dizainas 5 kūdikio žingsniai norint išmokti CSS ir tapti „Kick-Ass CSS burtininku“CSS yra vienintelis svarbiausias per pastarąjį dešimtmetį matomas internetinis puslapis, kuris padėjo atskirti stilių ir turinį. Šiuolaikiniu būdu XHTML nusako semantinę struktūrą ... Skaityti daugiau . Tai vis dar tiesa, tačiau naujausioje iteracijoje ji įgijo galimybę valdyti animacijas ir elementų bei vaizdų transformacijas.

Žmonės padarė keletą nuostabių dalykų, naudodamiesi CSS3, pradedant skaitmeninio laikrodžio sukūrimu ir baigiant viso „Pong“ žaidimo rašymu. Kažkas net panaudojo, kad iš naujo sukurtų įvadinius kreditų „Mad Men“. Tai tikrai galinga technologija, kurią įsisavinus, galima naudoti norint pridėti nuostabaus lygio savo tinklalapio funkcionalumą.

Šiame skyriuje trumpai papasakosiu įvadas į CSS3 5 populiariausios svetainės, norint išmokti CSS internete Skaityti daugiau ir parodys, kaip į savo puslapį pridėti nuostabių efektų.

Pirmiausia eikite į „codepen.io“ ir sukurkite naują rašiklį. Šį skyrių naudosime kaip savo darbo vietą.

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

5.1 „CSS Hover“ efektai

Į tą skyrių įtraukite pasirinktą paveikslėlį. Aš įtraukiau „MakeUseOf“ logotipo kopiją.

Tada turėsite parašyti keletą stiliaus lentelės taisyklių. Žemiau pateiktame pavyzdyje aš sukūriau viršutinę ir kairę paraštę, kad atvaizdui būtų šiek tiek vietos. Taip pat įtraukiau smalsiai atrodančią stiliaus lentelės taisyklę, kuri prasideda žodžiu „#muo: užveskite pelę“. Kas tai?

Kai prie stiliaus lentelės taisyklės, ar tai būtų elementas, ID ar klasė, pridedate „: užveskite pelės žymeklį“, jūs iš tikrųjų nurodote naršyklei pritaikyti šį stilių, kai pele valdys elementą. Gana šaunu, tiesa?

Taisyklės „#muo: užveskite pelės žymeklį“ viduje yra eilutė, kurioje sakoma: „-webkit-transformuoti: pasukti (3deg)“. Kaip aš tikiu, kad atspėjote, tai liepia naršyklei pasukti tą div elementą trim 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, ketinate pakeisti CSS failą, kad apimtų šias eilutes.

Dabar, kai užveskite pelės žymeklį ant vaizdo, jis atrodo taip:

5.2 CSS3 naudojimas norint pakeisti vaizdų dydį

Taigi, kodėl reikia sustoti? Ar žinojai, kad paveikslėlį galite padidinti arba susiaurinti taip pat naudodami „transformavimo“ metodą. Pakeisime CSS failą, kad būtų įtrauktos šios eilutės.

Kaip matote, dabar mes įtraukėme naują pakeitimo taisyklę, tačiau šį kartą liepsime tai padaryti vadinamuoju mastu. Tai tikrai gražus būdas padidinti vaizdo dydį. Tai trunka du parametrus (tuos skaičius, kuriuos matote tarp tų skliaustų), ir jie parodo sumą, kuria padidinate elemento aukštį ir plotį.

Kaip matote iš kodo, aš padidinsiu „MakeUseOf div“ logotipo dydį 50%. Galite išbandyti šį darbą užveskite pelės žymeklį ant jo. Pamatysite, kad dabar „MakeUseOf“ logotipas yra žymiai labiau ištemptas.

Tai buvo labai švelnus įvadas į CSS3 transformacijas. Nepaisant to, kad CSS3 iš tikrųjų yra labai nauja, dabar galite pastebėti, kad su ja galite atlikti daugybę labai įdomių manipuliacijų.

5.3 Išbandykite save

• Kaip mes pritaikome stilių elementui, užveskite pelės žymeklį?
• Kaip pasukti vaizdą naudojant CSS3?
• Kaip išmatuoti vaizdą naudojant CSS3?
• Kas nutiks, jei išlaikysite transformavimo metodą „išversti (50 pikselių, 50 pikselių)“?

Papildoma literatūra:

HTML5 Rocks - pristatymas

6. Tiesiog pakankamai „Javascript“

Jei norite naudoti scenarijų savo interneto naršyklėje, turite jį naudoti „Java“ scenarijus Kas yra „JavaScript“ ir kaip tai veikia? [Technologijos paaiškinta] Skaityti daugiau . Deja, nėra dviejų būdų. Tai yra kalba, kuri turi daug gerbėjų 5 plačios „JavaScript“ kodo bibliotekos parinktys kūrėjams Skaityti daugiau , ir daugybė naikintojų. Kalboms einant, joje yra daug karpos. Yra priežastis, kad labiausiai pastebima knyga apie kalbą yra vadinama „Javascript: The Good Parts“.

Neįmanoma išmokyti jus naudoti „Javascript“ viename skyriuje. Čia ne tas tikslas. Tikslas yra išmokyti jus pakankamai „Javascript“, kad galėtumėte suprasti kitą skyrių, kuriame kalbama apie technologijos, vadinamos drobe, naudojimą piešiniams ir animacijai kurti.

6.1 Prieiga prie pulto

Norėdami tai padaryti, mes naudosime „Javascript“ pultą, įmontuotą kiekvienoje „Google Chrome“ kopijoje. Norėdami tai pasiekti, dešiniuoju pelės mygtuku spustelėkite bet kurį tinklalapį ir paspauskite „Apžiūrėti elementą“. Tada spustelėkite „Konsolė“. Jūs turėtumėte tai pamatyti.

Tradicija yra tai, kad pirmoji programa, kurią bet kuris pradedantysis kūrėjas kada nors parašo, yra programa „Sveikas pasaulis“. Tai paprasta programa, spausdinanti frazę „Labas pasaulis“, o ne daug kas kita. Savo konsolėje įveskite „console.log“ („Sveikas pasaulis!“) ;.

6.2 Jūsų pirmoji programa

Taigi, ką mes tiksliai padarėme? Pirmiausia mes vadinome „console.log“. Tai šiek tiek kodo, įmontuoto į kompiuterį, kuris tiesiog išspausdina viską, ką jums liepia. Tada prie jo pritvirtinome keletą skliaustelių ir į dvigubas citatas įtraukėme „Sveikas pasaulis“. Tai vadinama „artimaisiais argumentais“, o mūsų pateikto argumento rūšis vadinama eilute. Kai norite padaryti ką nors, kas susideda iš raidžių ir specialiųjų simbolių, tiesiog turite naudoti atskiras citatas. Tačiau jei norite ką nors daryti naudodami skaičius, paprastai nereikia naudoti kabučių, kaip parodyta žemiau.

6.3 Kintamieji „JavaScript“

Kintamuosius taip pat galite perduoti „console.log“. Kintamieji skamba sudėtingai, tačiau viskas, kas jie yra, yra erdvė, kurioje galima pateikti daugybę informacijos. Tai dažnai yra skaičiai arba raidės. Norėdami tai padaryti, jūs deklaruojate kintamąjį naudodami raktinį žodį „var“, suteikiate jam pavadinimą ir tada, lygybės ženklu, suteikiate jam reikšmę. Taigi, aš sukursiu kintamąjį, kuris bus vadinamas „labas“, ir tada suteiksiu jam reikšmę „Sveikas pasaulis!“. Tada perduosiu tai console.log.

Atminkite, kaip aš neperdaviau „labas“ į console.log naudodamas citatas. Taip yra todėl, kad norėjau konsolėje atspausdinti „labas“, o ne pats „labas“ turinį.

6.4 Ką atlieka funkcijos

Tai gali būti šiek tiek nuobodus to paties kodo pakeitimas vėl ir vėl, todėl būtent dėl ​​šios priežasties mes rašome funkcijas. Funkcijos yra lengvesnės, nei jūs manote. Jie yra tik kodo fragmentai, kuriuos galime naudoti dar kartą neperrašydami to paties kodo. Žemiau sukūrėme funkciją, vadinamą „sup“, ir pateikiame jai argumentą skliausteliuose, kurie vėliau prisijungia prie ekrano. Mes vadiname „sup“, siųsdami į konsolę „sup („ labas pasaulis! “);“.

6.5 Veiksmo pakartojimas su „už“ kilpa

Tarkime, kad norėjote tą patį veiksmą atlikti nustatytą skaičių kartų. Dėl šios priežasties mes naudojome „už“ kilpą. Iš pradžių jie atrodo gąsdinantys, tačiau juos taip lengva padaryti, kai juos supranti. Pradėsite rašydami „už ()“.

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

Tada norime patikrinti, ar neatitikau jokios sąlygos. Taigi šiuo atveju norime pamatyti, kad jis yra mažesnis nei 10. Taigi po kabliataškio rašome „i <10“. Mūsų kilpa dabar atrodo taip: 'už (var i = 0; i <10;).

Jei aš mažesnis nei 10, norime jį pridėti po vieną ir tada ką nors padaryti. Taigi, mes įdėjome „i = i + 1“. Mūsų kilpa beveik baigta: 'už (var i = 0; i <10; i = i + 1) “. Atkreipkite dėmesį, kaip paskutinėje dalyje nėra kabliataškio.

Po to mes norėsime atlikti veiksmą. Taigi, po paskutinių skliaustelių, mes užrašome keletą garbanų petnešas ir tarp jų ketiname konsoliduoti.logo reikšmę i. Tai sukurs skaitiklį, skaičiuojantį iki devynių.

Paskutinės dvi programavimo konstrukcijos, į kurias žiūrėsime, yra „jei“ teiginiai ir „kol“ kilpos.

6.6 Jei teiginiai

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

Atminkite, kaip aš parašiau „jei (sūrio mėsainiai ==„ skanūs “)“. Norėdami patikrinti lygybę, naudojate dvigubą ar trigubą lygius, o reikšmei priskirti - vienodus.

6.7 Nors kilpos

Galiausiai „nors“ kilpa įvykdo veiksmą, kai tenkinami kriterijai. Taigi, įsivaizduokite, kad norite prisijungti prie „yum, cheeseburgers“, tuo tarpu sūrio mėsainiai yra vienodai skanūs. Norėdami tai padaryti, parašykite taip.

Verta paminėti, kad tai patektų į begalinę kilpą, ir turėtumėte vengti atlikti veiksmus su verte, kuri greičiausiai nesikeis. Tai gali sukelti jūsų naršyklės užrakinimą arba kodo neveikimą.

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

6.8 Išbandykite save

• Noriu atskaityti nuo 30. Parašykite „už“ kilpą, kuri tai padarytų.
• Noriu sukurti kintamąjį, vadinamą „makeuseof“, ir suteikti jam reikšmę „nuostabus“. Kaip tai daroma?
• Noriu sukurti funkciją, kuri išspausdintų „MakeUseOf Is Awesome“, kai ji iškviečiama. Parašykite tą funkciją.

Papildoma literatūra:

• „Javascript: geros dalys“ sukūrė Douglasas Crockfordas
• MDN „Javascript“ vadovas

7. Kūrybinė drobė

„Drobė“ yra šauni technologija, leidžianti piešti vaizdus ir kurti animaciją, nesinaudojant „Flash“ ar „Silverlight“. Žmonės tai panaudojo kurdami keistus ir nuostabius dalykus, įskaitant plaukų džiovintuvo simuliatorių ir įvairius vaizdo žaidimus. Tai nuostabi ir neįtikėtinai didelė technologijos dalis, šioje instrukcijoje aš jums pateiksiu trumpą įvadą.

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

7.1 Darbo su drobėmis pradžia

Visų pirma, jums reikės atidaryti interneto 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 įdėjote vaizdo įrašą, turėtumėte įtraukti atsarginį pranešimą.

Dabar norėsime parašyti „Javascript“ kodą, kuris ką nors patrauktų į ekraną. Mes pradėsime pagrindinius veiksmus ir sukursime paprastą raudoną kvadratą.

Mes sukursime kintamąjį (aš tai vadinau „demonstraciniu“), tada pasirinkite drobės elementą ir priskirkite tam kintamajam. Tam naudokite „document.getElementByID“ () ir įvesite norimo pasirinkti elemento ID.

Antroje scenarijaus eilutėje sukuriamas kitas kintamasis, pavadintas „kontekstas“, o tada ant jo iškviečiamas „demo.getContext („ 2d “)“. Tai naršyklei pasakė, kad mes dirbsime 2d vaizdą, tada atlikome būtinas funkcijas, kurių mums reikėjo norint patraukti į ekraną.

Trečioji ir ketvirtoji eilutės yra tos, kurios iš tikrųjų piešia ekraną. Trečioji eilutė užpildo stačiakampį raudona spalva, o ketvirtoji eilutė vadina „fillRect“, kuri jį parodo ir nustato ilgį bei plotį.

Vis dėlto tai nėra įspūdinga. Padarykime ką nors šiek tiek tobulesnio ir pasinaudokime „Javascript“ ir „Canvas“ magijomis, kad sukurtume visiškai naują „MakeUseOf“ logotipą.

7.2 Formos ir tekstas

Ištrinsime mūsų ketvirtąją eilutę ir pakeiskite ją ta, kuri uždeda mūsų stačiakampį viršutiniame kairiajame kampe ir ištempia jį per visą drobės ilgį.

Pirmieji du argumentai nusako, kur norime išdėstyti formos x ir y ašis. Dabar nustatykime šias dvi į „0“. Trečiasis argumentas susijęs su formos pločiu. Nustatykime į „200“, o ketvirtą argumentą palikime „50“. Dabar jūs turėtumėte tai, kas atrodo šiek tiek taip.

Tai puiki pradžia, tačiau joje visiškai neužsimenama apie „MakeUseOf“. Taigi, mes pridėsime šiek tiek teksto. Sukurkime kintamąjį, kuriame yra „makeuseof“, ir mes jį vadinsime „MakeUseOf“.

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

Norėsime, kad mūsų tekstas būtų mėlynos spalvos ir perdengtas raudonu kvadratu. Taigi, kaip ir anksčiau, norėsime suteikti jam „mėlynos spalvos“ spalvą. Dabar mes pasirinksime savo teksto ypatybes. Mes norime, kad jis būtų 20 pikselių dydžio, paryškintas ir su Arial šriftu. Mes vadiname šriftu 2 kontekste ir priskiriame jam reikšmę „paryškintas 20 pikselių arial“.

Kadangi norime, kad šis tekstas uždengtų mūsų ankstesnį raudoną langelį, 2 kontekste turime paskambinti „textBaseLine“ ir suteikti jam aukščiausią vertę. Kai tai bus baigta, 2 kontekste mes vadiname „fillText“ ir perduodame jam kintamąjį, kuriame yra mūsų tekstas, ir x ir y koordinates, į kurias ketiname sudėti savo 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 pagrindinė drobės įžanga, turėtumėte suprasti, kad tai taip pat yra neįtikėtinai didelė technologija ir neįtikėtinai galinga. Šis vadovas paprasčiausiai buvo įžanga, kaip padaryti grafiką naudojant šią naują technologiją.

7.4 Išbandykite save

• Prie savo sukurto įvaizdžio pridėkite šį šūkį: „Visų laikų geriausia technologijų svetainė!“
• Sukurkite „už“ kilpą, kuri vykdoma dešimt kartų. Pažiūrėkite, ar galite perkelti savo piešinį į drobę, pikselį vienu metu.
• Apvyniokite savo piešinį funkcija. Kas atsitiks, jei to nevadinate?

Papildoma literatūra:

• HTML5 Rocks - drobės integravimas į jūsų žiniatinklio programas.
• „Treehouse“ - kaip piešti su drobėmis

8. Kur toliau?

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

Aš prašau jus toliau mokytis. Laikykitės kodavimo. Toliau kelkite aukštumas ir tobulinkite, ir niekada nenaudosite technologijų, kurios buvo pristatytos šiame trumpame vadove, kad sukurtumėte nuostabius gaminius.