Alustage HTML5-ga

Selle juhendi saab alla laadida tasuta PDF-vormingus. Laadige HTML5-ga alustamine kohe alla. Võite seda kopeerida ja jagada oma sõprade ja perega.

instagram viewer

ja

sildid ei ole liiga hirmuäratavad ja te ei karda oma käte määramist mõnes lähtekoodis.

Teiseks eeldab see juhend, et teate, mis on CSS ja kuidas see töötab. Me ei eelda, et olete disaini geeniused, ega peaksite teadma, et tunnete kogu CSS-i spetsifikatsiooni teie käe tagant. Peaksite siiski suutma kohaldada veebilehe elemendile stiilimist, oskama linkida CSS-faili ja teadma ID ja klassi erinevusi ning seda, kuidas rakendada stiili nende kõigi jaoks.

Kui te kriimustate oma pead ülalpool, ärge muretsege. Üks HTML-i ja CSS-i parimatest asjadest on see, et see on tõesti väga lihtne. Tegelikult on MakeUseOfil olemas uskumatu XHTML-i juhend Õppige Internetist rääkima: teie juhend xHTML-i jaoksTere tulemast XHTML-i - laiendatava hüperteksti märgistuskeele - maailma - märgistuskeel, mis võimaldab kõigil luua paljude erinevate funktsioonidega veebilehti. See on Interneti peamine keel. Loe rohkem mis kiirendab teid kiiresti.

Pärast selle juhendi lugemist võiksite vaadata ka järgmisi artikleid:

• 8 kvaliteetse kodeerimise näitega veebisaiti 8 parimat veebisaiti kvaliteetsete HTML-i kodeerimise näidete jaoksLeidub vingeid veebisaite, mis pakuvad hästi läbimõeldud ja kasulikke HTML-i kodeerimise näiteid ja õpetusi. Siin on kaheksa meie lemmikut. Loe rohkem
• 6 blogi suurepäraste veebikujundajate jälgimiseks 6 parimat veebikujunduse ajaveebi, mida jälgida Loe rohkem

Teil on vaja ka kaasaegset tekstiredaktorit ja brauserit. Internet Exploreri mis tahes versioon, mis on vanem kui IE 9, ning mõned vanemad Safari, Chrome'i ja Firefox näeb vaeva paljude HTML5-funktsioonide hulka kuuluvate funktsioonidega ja võib takistada teil seda jälgida giid.

Seetõttu julgustatakse teid alla laadima kaasaegse brauseri. Soovitan Google Chrome'i ja kasutan seda kõigis näidetes.

Peale selle on teil vaja ainult valmisolekut õppida. Oh, ja tekstiredaktor.

1.2 Tekstiredaktorid veebiarenduseks

Teksti redaktor on see, mida kasutate oma koodi kirjutamiseks. Võib-olla soovite teada, mis on tekstiredaktor.

Noh, esiteks pole see tekstitöötlusprogramm. Sellised programmid nagu Microsoft Word ja Apple's Pages ei sobi veebiarenduseks täielikult. Sellepärast, et nad lisavad teie HTML-, CSS- ja Javascripti failidele lisateavet, mis muudab teie veebibrauseri lugemise raskeks.

Tekstiredaktor laseb märgid tekstifailiks ja mitte palju muuks. See võimaldab teil luua faile, millel pole täiendavat vormindamist ja mida saab salvestada mis tahes teie valitud laiendiga.

Teie arvutil on see juba olemas. Kui kasutate Windowsi arvutit, on Notepad tekstiredaktor, mille olete tõenäoliselt installinud.

Macis on olukord pisut erinev. OS X-l on neli erinevat tekstiredaktorit. Neid nimetatakse Vimiks, Emacsiks, Pico ja Nano. Kuid erinevalt Notepadist töötavad nad kõik terminalis.

See on pisut hirmutav nende inimeste jaoks, kellele on veebiarendus alles uus ja seda ei tohiks kasutada tarkvaraarendusega tegelevad inimesed. Me ei kasuta neid selles juhendis. Kui aga saate tarkvara ja veebiarenduse osas pisut enesekindlamaks, tasub seda kindlasti uurida Vim 7 peamist põhjust, miks Vimi tekstiredaktorile võimalus andaAastaid olen proovinud ühte tekstiredaktorit teise järel. Sa nimetad seda, ma proovisin seda. Ma kasutasin kõiki neid toimetajaid üle kahe kuu oma esmase igapäevase toimetajana. Millegipärast ma ... Loe rohkem ja Emacs. Nad on mõlemad võimsad tekstiredaktorid ja kui need on meisterlikud, võib see säästa tohutult palju aega.

Linuxis varieerub vaiketekstiredaktor jaotuste kaupa. Ubuntul on tõenäoline Gedit gedit: üks funktsioonidega täidetud lihtteksti redigeerijaid [Linux ja Windows]Kui mõelda lihtsate tekstiredaktorite peale, siis võib esimene asi, mis teile pähe hüppab, Windowsi märkmikurakendus. See teeb täpselt seda, mida tema ametijuhend kirjeldab - lihtteksti lihtsad omadused ... Loe rohkem , mis on üsna meeldiv tekstiredaktor, mis pole Notepadist kuigi erinev.

Sellel kursusel kirjutame oma koodi siiski kolme erineva tööriista abil.

Esimene on Ülev tekst 2 Proovige ülemist teksti 2. oma platvormidevahelise koodi redigeerimise vajaduste jaoksSublime Text 2 on platvormideülene koodiredaktor, millest kuulsin alles hiljuti ja pean ütlema, et olen beeta-sildist hoolimata tõeliselt muljet avaldanud. Rakenduse saate alla laadida ilma senti maksmata ... Loe rohkem . Ma ei saa seda ausalt öelda piisavalt soovitada. Kaasas kõik asjad, mis lihtsustavad algaja arendaja elu. Esiteks muudab see teie koodi kergemaks, seda teatud osade värvimisega. Teiseks võimaldab see hõlpsalt failide vahel vahetada ja terveid failiprojekte hallata. See sobib ideaalselt failide vahel vahetamiseks ja mitmete bittide koodide muutmiseks lennult.

Kolmas on Javascripti konsool Saate teada veebisaidi probleeme Chrome'i arendaja tööriistade või FirebugigaKui olete seni jQuery õpetusi jälginud, võib-olla olete juba mõne koodiprobleemiga kokku puutunud ja pole teada, kuidas neid parandada. Mittefunktsionaalse bitti koodiga silmitsi seistes on see väga ... Loe rohkem mis on sisse ehitatud Google Chrome'i. See võimaldab meil kirjutada Javascripti ja näha selle viivitamatut käivitamist ning seda kasutatakse põhiliste programmeerimismõistete selgitamiseks.

Teine on veebisait nimega Codepen.io. See tähelepanuväärne veebisait võimaldab teil HTML-i, CSS-i ja Javascripti kodeerida brauseris ja on tasuta kasutamiseks. See võimaldab teil muudatusi ka kohe näha.

2. Semantiline märgistus

Selles peatükis saate teada semantilise märgistuse ja selle kohta, kuidas oma koodi selle sisu põhjal korraldada.

Kuni viimase ajani oli HTML-kood üldiselt korraldatud

See toimis, kuid arenguruumi oli veel. Probleem

Semantiline märgistamine on HTML5 uus funktsioon. See sisaldab uusi silte, mis toimivad samamoodi nagu „div” -märgendid, kuid on mõeldud lehe tavaliste osade sildistamiseks.

Niisiis, kuidas nad töötavad? Mõelge järgmisele koodile.

Selles kooditükis on meil navigeerimisriba, pealkiri ja nimekiri. See ei erine liiga paljudest veebisaitidest, kus tõenäoliselt kunagi käite, kui järele mõelda.

Vaatame artiklit MakeUseOfi kohta. Võite märgata, et sellel lehel on üks osa, mis on täielikult reserveeritud teistele artiklitele navigeerimiseks. Samuti märkate, et sellel lehel on veel üks osa, mis sisaldab sõnu, millest artikkel koosneb. Lehe ülaosas näete päist, mis sisaldab MakeUseOfi logo ja mõnda muud linki.

Kui järele mõelda, järgib palju veebisaite neid tavasid. Enamikul veebisaitidel on osa, mis on reserveeritud navigeerimiseks. Tavaliselt on neil sisu. Neil on päis enam kui tõenäoline.

Semantilised sildid on sildid, mis võimaldavad teil määratleda veebisaidi osi, mida tavaliselt leidub enamikul veebisaitidel. Nad ei lisa sellele lehele midagi, kuid võimaldavad teil silte nende sisu põhjal grupeerida ja nendele stiilidele stiile rakendada.

Nii et mäletate seda koodi, mis meil enne oli? Vaatame seda koos mõne semantilise märgistusega.

Nagu näete, on koodi palju lihtsam lugeda. Teate, millised osad millised on ja kahemõttelisus puudub. See on oluline, kuna see lihtsustab hea ja puhta koodi kirjutamist. Kui otsustate kunagi hakata professionaalseks veebidisaineriks, on see ülitähtis - te ei tea kunagi, kes loeb teie toodetud teost.

Vaatame veel mõnda semantilist märgistust.

2.1 Jaotis

Jaotis on tõesti kasulik silt. Seda kasutatakse tohutu hulga teabe ja sisu haaramiseks, mis on tähistatud pealkirja või pealkirjaga. Mõelge sellele nagu raamatu peatükk. Peatükil on pealkiri ja see võib sisaldada ka pilte, diagramme, graafikuid ja sõnu. Kõigi selle sisaldamiseks kasutataks jaotise silti.

2.2 Artikkel

Artiklimärgendit kasutatakse selle jaoks, mis see kõlab; Sisaldab näiteks ajaveebi postitust või uudislugu. Seda sisu peaks olema võimalik ülejäänud ajaveebist eraldada ja sellel peaks olema endiselt ühtne mõte.

2.3 kõrvale

See silt on reserveeritud sisule, mis on seotud veebilehega, kuid ei ole selle lahutamatu osa. See võib olla hunnik uudiseid puudutavaid fakte või ajaveebi kasutaja elulugu.

2.4 Päis

Paljudel veebilehtedel on lehe ülaosas riba, mis sisaldab logo, mõnda teavet selle saidi kohta ja võib-olla ka linke. Semantilises märgistuses kasutaksite kogu selle kajastamiseks päise silti.

2.5 Nav

See element on ette nähtud teie veebisaidi navigeerimise osa jaoks. See sisaldaks linke teistele veebisaitidele või teistele veebisaidi lehtedele. MakeUseOfi kontekstis võib see olla lehe see osa, mis asub päise all.

2.6 Jalus

See silt on reserveeritud lehe alaosa jaoks. Sellele saate lisada mõned kontaktandmed, autoriõiguse teabe, kaardi või mõned lingid oma minule lehele.

2.7 Pange ennast proovile

• Mis on semantiline märgistus ja milleks seda kasutatakse?
• Ma teen veebilehte ja soovin kasutada semantilist silti, et see sisaldaks minust biograafiat. Kumba ma kasutan?

3. Vormid

Kui olete kunagi natuke veebidisaini teinud, teate ilmselt, kuidas HTML-is lihtsat vormi luua. Kui olete tõesti tark, siis teate tõenäoliselt, kuidas vormist saadud teavet ära võtta ja kuidas sellega midagi ette võtta, näiteks andmebaasi panna.

Vormid on tohutult olulised. Need on enamiku nende asjade aluseks, mida me Internetis teeme. Iga kord, kui loote oma lemmik-sotsiaalses võrgustikus olekuvärskenduse, osta midagi Amazonist või saadate e-kirja, olete tõenäoliselt kasutanud HTML-i vormi.

Mida te ilmselt ei teadnud, on see, et vormide loomise viis on HTML5-s radikaalselt muutunud. See on ka oluliselt parem. Selles peatükis käsitleme lahedaid asju, mida saate nüüd teha, lihtsalt vanade märkidega.

Mis on nii lahe viis, kuidas HTML5-vorme vorme kirjutada saab? Esiteks saate tagada, et esitamiseks tuleb täita mõned väljad, lihtsalt vormi enda märgistust muutes. Lisaks ei pea te selleks enam kirjutama JavaScripti ega PHP-d. See on triviaalselt lihtne.

Teiseks saate tagada, et kasutajad saavad teie vormile esitada ainult teatud tüüpi teavet. Oletame siis, et teil on oma meililisti jaoks veebisait ja soovite ainult, et inimesed saaksid edastada tegelikke e-posti aadresse? Saate seda teha lihtsalt HTML5 abil. See on tõesti uskumatult võimas.

Kolmandaks saate anda oma vormidele parema väljanägemise, andes teatud väljadele kohahoidja. See muudab nad märkimisväärselt intuitiivsemaks, kuna saate oma kasutajatele näidata näidet selle kohta, mida te vormi ootate.

3.1 Vormi täiustamine

Vaatame siis vormi ja vaatame, kuidas saaksime seda paremaks muuta.

See vorm on üsna lihtne. See võtab enda alla nime, e-posti ja lemmikvärvi ning lubab kasutajal selle edastada. See ei sisalda kinnitust selle kohta, millist teavet sinna paigutatakse, ja miski ei takista kasutajaid seda vormi mõne tühja väljaga esitamast. Muutkem seda kõike.

Niisiis, esimene asi, mida tahame teha, on tagada, et e-posti väli võtab ainult meilisõnumi. See oli tõepoolest üsna raske ülesanne, kuna oleksite pidanud looma igasugu arkaanseid Regexi koode. Noh, mitte enam. Peate lihtsalt muutma sisendi tüübi tekstist e-kirjaks. Kui proovite seda vormi varjatud vormiga esitada, siis ta kaebab ja nõuab, et saadaksite meilisõnumi.

3.2 Sisendi tüübid ja mustrid

Võite olla ka teisi sisestustüüpe. Nende hulka kuuluvad telefoninumbrid, veebiaadressid, otsinguvormid ja isegi värvivalijad! Kuna HTML5 areneb pidevalt, on mõistlik, et varsti saame lähitulevikus määratleda veel mitu sisestustüüpi.

Lisaks võite näiteks sisenemiste mustrid, näiteks telefoninumbrid, mis varieeruvad sõltuvalt asukohast, täpsustada. Need on loodud kasutades tavalisi väljendeid ja on üsna keerukad, kuid mõõtmatult võimsad.

Samuti tahame tuua näite oma valdkonna e-kirjadest, nii et kasutajal pole ebaselgust, mida ta peab saatma. Seda on tõesti lihtne teha. Lihtsalt looge uus atribuut „kohahoidja” koos e-posti aadressi näidisega.

Kindlustame, et meie lemmikvärvi väli on kohustuslik. Kirjutage e-posti sisestussildi viimasesse nurksulgu (>) lihtsalt „nõutav”. See selleks. Kui proovite oma vormi ilma väärtuseta esitada, annab see tõrketeate.

Nende tõrketeadete tõeliselt uskumatu asi on see, et kasutaja ei pea nende loomiseks ega koodi kirjutama. Sa lihtsalt muudad välja, et see oleks nõutav, ja see lihtsalt töötab. Seda öeldes on neid soovi korral võimalik kohandada.

See oli uskumatult lühike sissejuhatus HTML5 vormide võimsusesse. Kui soovite rohkem lugeda, soovitan teil neid linke külastada.

Lisalugemist:

• CSS-nipid - kirjutame semantilise märgistuse
• HTML5 arst - räägime semantikast

3.3 Pange ennast proovile

On järgmise nädala sünnipäev ja soovite luua registreerimisvormi, et saaksite teada, kui palju kooki peate looma. Avage oma tekstiredaktor ja looge vorm järgmiste väljadega.

• Nimi
• E-posti aadress
• Telefoninumber
• Allergiad

Veenduge, et nime, e-posti ja telefoninumbri väljad on kohustuslikud ning et väljad E-post ja Telefoninumber on seatud sisestustüüpidega „e-post” ja „tel”. Looge allergiavälja jaoks kohahoidja väärtusega „õietolm, munad, quiche”.

Mängige vormi ümber. Proovige esitada nõutud väljad tühjadena ja proovige sisestada telefoninumbri väljale numbrimärke. Sisestage e-posti väljale midagi, mis pole e-posti aadress. Mis juhtub?

4. Meediumid

Varem oli aeg, kus ainus viis video või heli veebilehele sisestamiseks oli midagi sellist, nagu Flash, Shockwave või SilverLight.

See polnud ideaalne. Esiteks ei töötanud ükski neist raamistikest mobiilseadmetes nii hästi. Neid lihtsalt ei olnud nutitelefonide ja tahvelarvutite moodsa maailma jaoks ette nähtud.

Lisaks olid need omandivormingud. Selle tulemusel võisid Linuxi ja OS Xi kasutajad saada üsna teisejärgulise kogemuse või isegi keelati neil meediateenuseid tarbida, kuna see polnud nende platvormi jaoks saadaval.

Lõpuks oli neil kalduvus olla aeglane. Kui kasutaksite alatoitega või vanemat arvutit, poleks teil nende raamistike abil video vaatamise osas head kogemust. Flash oli selle jaoks eriti kurikuulus.

4.1 Kuidas HTML5 teeb video ja heli ägedaks

HTML5 muutis seda, lubades veebiarendajatel lisada video ja heli oma veebilehtedele vaid mõne koodireaga. See töötab maiuspalana mobiilseadmetes ja töötab igas kaasaegses veebibrauseris.

Selle tulemusel kasutavad HTML5 revolutsiooni ära sellised suurettevõtted nagu YouTube, Vimeo ja Netflix. Miks te ei liitu nendega?

4.2 Kõik kodekite kohta

Selles peatükis saate teada, kuidas kasutada HTML5 võimsust oma veebilehtedele heli ja video lisamiseks.

Esiteks pean ma alustama hoiatusest. Ehkki HTML5-videot saate kasutada igas kaasaegses veebibrauseris, ei tööta see kõigis veebibrauserites sama. Iga brauseri kasutatavad kodekid erinevad. Internet Exploreris piirdute MP4-video kasutamisega. Chrome on natuke heldem ja võimaldab teil kasutada WebM-, MP4- ja Ogg Theora videoid. Opera on natuke piiravam ja lubab kasutada ainult Theora ja WebM-i videoid.

Selle tulemusel peate olema pisut nutikas oma veebisaidile video lisamisel. Vaatame siis, kuidas see töötab.

4.3 Alustades videost

Alustuseks peate looma mõne avamise ja sulgemise

Noh, kui ootate oma video laadimist, näeb teie saiti külastav inimene videoga seotud pilti. Selleks andke oma videomärgenditele lihtsalt atribuut poster koos pildi väärtusega, millega soovite linkida. See peaks välja nägema selline.

Järgmine asi, mida tahame teha, on varuvariandi loomine. Mida see tähendab? Oletame, et kasutate seal ühte vanemat, vähem vingemat brauserit. Paljud neist vanematest brauseritest ei toeta HTML5-videot ega saa seetõttu HTML5-videoid esitada. Soovite neile jätta sõnumi, milles nad teatavad, et nad soovivad oma brauserit uuendada ja kuni nad seda ei tee, ei saa nad teie videot vaadata.

Selleks kirjutage lihtsalt oma sõnum videomärgenditesse. Midagi muud pole vaja. Kui olete seda teinud, jäetakse teile mõni kood, mis näeb välja selline.

Lisame nüüd mõne video. Kavatsen seda testida Google Chrome'is, seega kavatsen linkida MP4-filmiga. Selleks loon allikasildi ja annan sellele atribuudi src, millel on väärtus videol, mida tahan lisada.

Minu leht on nüüd minu brauseris avamiseks valmis. Olen seotud filmiga, mis on tõesti-väga suur ja selle tulemusel näeb avamisel ainult plakatit.

4.4 Heli lisamine

Heli saab oma veebilehele sisestada viisil, mis meenutab väga seda, kuidas me oma lehele video sisestasime.

Esiteks luuakse mõned helisildid. Need helisildid sisaldavad atribuuti „juhtelemendid”. See annab lehe külastavale kasutajale võimaluse mängitavat heli peatada, tagasi kerida ja edasi kerida.

Seejärel lisate MP3-faili, mille soovite linkida, lähteteksti. Kodeki ühilduvuse pärast ei pea te tegelikult nii palju muretsema. Uusimatel veebibrauseritel on MP3-heli esitamise võimalus, kuigi hea tava on lisada igaks juhuks ka „.ogg” ja „.wav” fail.

Lõpuks saate luua varu vanematele brauseritele. Seda tehakse samal viisil, nagu lõite oma video jaoks varu.

Lõpptulemus näeb natuke selline välja.

Kui selle oma veebibrauseris avate, peaks see natukene välja nägema.

4.5 Pange ennast proovile

• Mis on teie videomärgenditesse postituse eesmärk?
• Milliseid kodekke ei saa Internet Exploreris kasutada?
• Millise atribuudi lisate oma silte? Kui ma sooviksin võimalust mõne heli peatamiseks,

Lisalugemist:

• HTML5 Rocks Video

5. CSS3 teisendused ja animatsioonid

Traditsiooniliselt kasutati CSS-i veebilehe kujundus ja kujundus 5 beebi sammu CSS-i õppimiseks ja Kick-Ass CSS-i nõiaks saamiseksCSS on viimase kümnendi jooksul kõige olulisemad muudatuste veebilehed ja see sillutas teed stiili ja sisu eraldamiseks. Kaasaegsel viisil määratleb XHTML semantilise struktuuri ... Loe rohkem . See on endiselt tõsi, kuid viimases iteratsioonis on see omandanud võime käsitleda animatsioone ning elementide ja piltide teisendusi.

Inimesed on CSS3-ga teinud hämmastavaid asju alates digitaalse kella loomisest kuni täieliku Pongi mängu kirjutamiseni. Keegi kasutas seda isegi Mad Menile sissejuhatavate ainepunktide taasloomiseks. See on tõeliselt võimas tehnoloogia ja kui see on omandatud, saab seda kasutada oma veebilehele hämmastava funktsionaalsuse lisamiseks.

Selles peatükis annan teile lühidalt CSS3 tutvustus CSS Online'i õppimiseks 5 parimat saiti Loe rohkem ja näitab teile, kuidas oma lehele hämmastavaid efekte lisada.

Esmalt liikuge saidile codepen.io ja looge uus pliiats. Me kasutame seda selle peatüki vältel oma tööruumina.

Alustame lihtsa loomisega ja loome lihtsa kujutise teisenduse, mis pöörab pilti üleskerimisel 3 kraadi. Kõigepealt looge div silt ja andke talle ID. Allpool toodud näites olen andnud sellele muo tunnuse.

5.1 CSS-i hõljukiefektid

Lisage sellesse jaotisse oma valitud pilt. Lisasin MakeUseOfi logo koopia.

Seejärel peate kirjutama mõned stiililehe reeglid. Allolevas näites olen loonud ülemise ja vasaku veerise, et anda pildile ruumi. Olen lisanud ka uudishimuliku välimuse stiilireegli, mis algab tähega #muo: hõljutage. Mis see on?

Kui lisate stiililehe reeglile, hõljuge näiteks elemendi, ID-ga või klassiga, hõljutage kursorit, käsitate brauseril seda stiili rakendada, kui hiir seda elementi haldab. Päris lahe, eks?

Reegli #vorm: hõljutage rea all on rida, mis ütleb: -veebikomplekti teisendamine: pööramine (3deg). Nagu ma olen kindel, et arvasite, käsib see brauseril seda div-elementi kolme kraadi võrra pöörata.

Väärib märkimist, et see silt töötab ainult Chrome'is ja Safaris. Kui soovite, et teie kood töötaks Firefoxis või Internet Explorer 9 ja uuemates versioonides, peaksite CSS-faili muutma nii, et see hõlmaks järgmisi ridu.

Kui hõljutate kursorit pildi kohal, näeb see välja järgmine:

5.2 CSS3 kasutamine piltide suuruse muutmiseks

Miks siis siin peatuda? Kas teadsite, et saate pildi suurendamiseks või kahandamiseks kasutada ka ümberkujundamise meetodit Muutame meie CSS-faili, et lisada järgmised read.

Nagu näete, oleme nüüd lisanud uue teisendusreegli, kuid seekord kästame tal teha nn skaala. See on tõesti ilus viis pildi suuruse suurendamiseks. See võtab kaks parameetrit (need numbrid, mida näete nende sulgude vahel) ja need tähistavad summat, mille võrra suurendate elemendi kõrgust ja laiust.

Nagu koodist näete, suurendan MakeUseOf div logo suurust 50%. Saate seda tööd testida, hõljutades kursorit selle kohal. Näete, et nüüd on MakeUseOf'i logo oluliselt venitatud.

See oli väga õrn sissejuhatus CSS3 teisendustesse. Vaatamata sellele, et CSS3 on tõepoolest väga uus, näete nüüd, et saate sellega teha palju väga huvitavaid manipulatsioone.

5.3 Pange ennast proovile

• Kuidas saaksime hõljutada elemendi kujundamist?
• Kuidas CSS3 abil pilti pöörata?
• Kuidas skaleerida pilti CSS3 abil?
• Mis juhtub, kui edastate teisendusmeetodi „tõlgi (50 pikslit, 50 pikslit)”?

Lisalugemist:

HTML5 Rocks - esitlus

6. Piisab Javascriptist

Kui soovite oma veebibrauseris kasutada skripti, peate seda kasutama Javascript Mis on JavaScript ja kuidas see töötab? [Tehnoloogia selgitatud] Loe rohkem . Kahjuks pole sellel kahte viisi. See on keel, millel on palju fänne 5 ulatuslikku JavaScripti koodikogu teemat arendajatele Loe rohkem ja paljud detraktorid ka. Keelte kasvades on sellel palju tüükaid. Sellel põhjusel on kõige tähelepanuväärsem keeleteos nimega Javascript: head osad.

Javascripti kasutamist ühes peatükis on võimatu õpetada. See pole siin eesmärk. Selle eesmärk on õpetada teile piisavalt Javascripti, et saaksite aru järgmisest peatükist, mis käsitleb lõuendiks nimetatud tehnoloogia kasutamist jooniste ja animatsioonide tegemiseks.

6.1 Juurdepääs konsoolile

Selleks hakkame kasutama Javascripti konsooli, mis on sisseehitatud Google Chrome'i igasse eksemplari. Sellele pääsemiseks võite paremklõpsake mis tahes veebisaidil ja seejärel vajutage nuppu "Kontrolli elementi". Seejärel klõpsake nuppu "Konsool". Te peaksite seda nägema.

On traditsiooniline, et esimene programm, mida iga lootustandev arendaja kunagi kirjutab, on programm "Tere maailm". See on lihtne programm, mis prindib fraasi "Tere maailm" ja mitte palju muud. Tippige oma konsooli tüüp 'console.log (' Tere maailm! ') ;.

6.2 Teie esimene programm

Mida me siis täpselt tegime? Esiteks kutsusime midagi nn console.log. See on natuke arvutisse sisse ehitatud kood, mis prindib lihtsalt välja kõik, mida teile öelda. Seejärel lisasime sellele mõned sulud ja lisasime kahepoolsetesse jutumärkidesse „Tere maailm”. Seda nimetatakse argumentide edastamiseks ja meie poolt esitatud argumendi tüüpi nimetatakse stringiks. Kui soovite midagi tähtede ja erimärkide abil teha, peate lihtsalt kasutama üksikuid jutumärke. Kui soovite aga numbrite abil midagi teha, ei pea te tavaliselt jutumärke kasutama, nagu allpool näha.

6.3 JavaScripti muutujad

Muutujaid saate edastada ka 'console.log'. Muutujad kõlavad keeruliselt, kuid kõik, mis nad tegelikult on, on ruumi teabe killukese paigutamiseks. Sageli on need numbrid või tähed. Selleks kuulutate muutuja, kasutades märksõna „var”, annate sellele nime ja siis võrdusmärgiga annate sellele väärtuse. Niisiis, ma loon muutuja nimega "tere" ja annan sellele siis väärtuse "Tere maailm!" Seejärel annan selle edasi aadressile console.log.

Pange tähele, kuidas ma ei saatnud jutumärkide abil console.logi tere. Seda seetõttu, et tahtsin konsoolile printida „tere” sisu, mitte „tere” ise.

6.4 Mida funktsioonid täidavad?

See võib olla natuke tüütu sama koodipala uuesti ja uuesti ümber kirjutada, mistõttu kirjutame sellel põhjusel funktsioone. Funktsioonid on lihtsamad kui arvate. Kõik need on kooditükid, mida saame uuesti kasutada ilma sama koodi uuesti kirjutamata. Allpool oleme loonud funktsiooni nimega sup ja edastame sellele argumendi sulgude abil, mis seejärel logitakse ekraanile. Kutsume "sup", saates konsooli "sup (" Tere maailm! ");"

6.5 Toimingu kordamine aasal

Oletame, et soovisite sama toimingut teha mitu korda. Just sel põhjusel me kasutaksime kausta jaoks. Need näevad alguses hirmutavad, kuid neid on nii lihtne teha, kui neist aru saate. Alustad sellest, et kirjutad „for ()”.

Nendes sulgudes tahame luua muutuja, mis arvestaks, mitu korda oleme toimingu teinud. Niisiis, saame midagi sellist, mis näeb välja selline „for (var i = 0;)”.

Seejärel tahame kontrollida, kas ma ei ole tingimust täitnud. Seega tahame sel juhul näha, et see on väiksem kui 10. Niisiis, pärast semikoolonit kirjutame 'i <10'. Meie silmus näeb nüüd välja järgmine: 'jaoks (var i = 0; i <10;).

Kui i on alla 10, tahame selle ükshaaval lisada ja siis midagi teha. Niisiis, paneme 'i = i + 1'. Meie silmus on peaaegu valmis: 'jaoks (var i = 0; i <10; i = i + 1) ”. Pange tähele, kuidas viimases osas pole semikoolonit.

Pärast seda tahame teha toimingu. Nii et pärast viimaseid sulgusid kirjutame mõned lokirullid ja nende vahele lohistame i. väärtuse lohistamist. See loob loenduri, mis loeb kuni üheksa.

Kaks viimast programmeerimiskonstruktsiooni, mida vaatame, on „kui” avaldused ja „samas” silmused.

6.6 Kui avaldused

If-lause annab toimingu, kui teatud kriteeriumid on täidetud. Need sarnanevad ehituse aasadega ja töötavad järgmiselt. Oletame, et teil on muutuja nimega „juustuburgerid” ja soovite teada saada, kas selle väärtus on „maitsev”. Kui see juhtub, soovite ekraanile logida 'yam, juustuburgerid'. Selleks kirjutaksite midagi sellist.

Pange tähele, kuidas ma kirjutasin „kui (juustuburgerid ==“ maitsvad ”)”. Võrdõiguslikkuse kontrollimiseks kasutate kahe- või kolmekordset võrrandit ja väärtuse määramiseks ühekordseid võrdseid.

6.7 Kuigi silmused

Lõpuks, kui mõni silmus täidab toimingu, kui kriteeriumid on täidetud. Niisiis, kujutage ette, et soovite sisse logida 'yam, juustuburgerid', samas kui juustuburgerid on võrdselt maitsvad. Selleks kirjutage järgmine tekst.

Väärib märkimist, et see siseneb lõpmatusse ahelasse ja peaksite vältima toimingu tegemist väärtusega, mis tõenäoliselt ei muutu. See võib põhjustada teie brauseri lukustumise või teie koodi mittetoimimise.

Nagu ma juba mainisin, oli see Javascripti programmeerimiskonstruktsioonide väga lühike sissejuhatus. Teid julgustatakse selle põneva, ehkki tohutu teema kohta lähemalt lugema.

6.8 Pange ennast proovile

• Tahan 30-st alla arvestada. Kirjutage "jaoks" silmus, mis seda teeks.
• Tahan luua muutuja nimega makeuseof ja anda sellele väärtus "vinge". Kuidas seda tehakse?
• Tahan luua funktsiooni, mis prindib väljakutse korral MakeUseOf Is Awesome. Kirjutage see funktsioon.

Lisalugemist:

• “Javascript: head osad” autor Douglas Crockford
• MDN Javascripti juhend

7. Loominguline lõuend

Lõuend on lahe tehnoloogia, mis võimaldab teil pilte joonistada ja animatsioone luua ilma, et peaksite kasutama Flashi või Silverlighti. Inimesed on seda kasutanud veidrate ja imeliste asjade loomiseks, sealhulgas föönisimulaatori ja erinevate videomängude jaoks. See on suurepärane ja mõõtmatult suur tehnoloogia, selles õpetuses annan teile selle kohta lühikese sissejuhatuse.

Väärib märkimist, et lõuend töötab ainult tänapäevastes veebibrauserites. Kui kasutate IE, Chrome'i või Firefoxi vana versiooni, ei pruugi te seda peatükki järgida. Sel juhul peaksite kaaluma Google Chrome'i uusima versiooni allalaadimist, mis oli veebibrauser, milles ma selle õpetuse lõin.

7.1 Lõuendi kasutuselevõtt

Kõigepealt peate avama oma veebibrauseri ja navigeerima saidile codepen.io. Looge uus pastapliiats.

Nüüd peame deklareerima lõuendielemendi. Looge lõuendi siltide avamine ja sulgemine. Nendes peaksite andma sellele kolm atribuuti. Need on lõuendi elemendi laius ja kõrgus koos ID-ga, mille te sellele annate. Nagu enne mõne video sisestamist, peaksite ka varusõnumi lisama.

Nüüd tahame kirjutada Javascripti koodi, mis midagi ekraanile tõmbab. Alustame põhipõhist ja loome lihtsa punase ruudu.

Me loome muutuja (ma nimetasin seda demoks), valime lõuendi elemendi ja omistame sellele muutujale. Selleks kasutage document.getElementByID () ja sisestage valitud elemendi ID.

Meie skripti teine ​​rida loob uue muutuja nimega „kontekst” ja seejärel kutsub ta sellele demo.getContext („2d”). See ütles brauserile, et töötame 2d pildi kallal, seejärel läbisime vajalikud funktsioonid, mida ekraanil kuvamiseks vaja oleks.

Kolmas ja neljas rida on need, mis tegelikult ekraanile joonistavad. Kolmas rida täidab ristküliku punase värviga, neljas rida aga täidab fillRect, mis paigutab selle ja määratleb selle pikkuse ja laiuse.

See pole siiski muljetavaldav. Teeme midagi pisut arenenumat ja kasutame Javascripti ja lõuendi võlujõudu, et luua MakeUseOf uhiuus logo.

7.2 Kujundid ja tekst

Kustutame neljanda rea ​​ja asendame selle ühega, mis asetab ristküliku vasakusse ülanurka ja sirutab selle lõuendi pikkuseks.

Kaks esimest argumenti määratlevad selle, kuhu tahame paigutada kuju x- ja y-telje. Valime need kaks nüüd 0-ni. Kolmas argument viitab kuju laiusele. Valime selle väärtuseks „200” ja jätame neljanda argumendi väärtuseks „50”. Nüüd peaks teil olema midagi, mis natukene selline välja näeb.

See on suurepärane algus, kuid see ei maini MakeUseOfi üldse. Niisiis, me lisame teksti. Loome muutuja, mis sisaldab 'makeuseof', ja me kutsume seda muutujaks 'MakeUseOf'.

Seejärel tahame luua veel ühe kontekstimuutuja. Kutsuge seda konteksti2 ja veenduge, et see oleks 2d. Just seda me kirjutame oma teksti sisse.

Tahame, et meie tekst oleks siniseks värvitud ja punase ruuduga üle kaetud. Nii nagu ka varem, tahame anda sellele tähtkuju "sinine". Nüüd valime oma teksti omadused. Soovime, et see oleks 20xx, paksus vormingus ja Ariali fonti kasutav. Kutsume kontekstis2 fondi ja omistame sellele väärtuse “paks 20xx arial”.

Kuna me tahame, et see tekst kattuks meie eelmise punase kastiga, peame kontekstis2 helistama textBaseLine ja anda sellele tippväärtus. Kui see on lõpule viidud, kutsume kontekstis2 täiteteksti ja edastame sellele muutuja, mis sisaldab meie teksti ning x- ja y-koordinaate, kuhu me oma teksti paigutada kavatseme. Meie koodi lõpptulemus on midagi sellist.

Koodi toodetud pilt näeb välja selline.

7.3 Sõna lõuendil

Kuigi see oli lõuendi jaoks uskumatult lihtne sissejuhatus, peaksite mõistma, et see on ka uskumatult suur tehnoloogia ja selle käivitamiseks uskumatult võimas tehnoloogia. See juhend oli lihtsalt sissejuhatuseks graafika tegemisele selle uue tehnoloogia abil.

7.4 Pange ennast proovile

• Lisage oma loodud pildile järgmine hüüdlause: “Parim tehnika sait!”
• Looge "it" silmus, mis kestab kümme iteratsiooni. Vaadake, kas saate joonist ühe piksli võrra lõuendilt alla liigutada.
• Mähi joonistus funktsiooni. Mis juhtub, kui te seda ei nimeta?

Lisalugemist:

• HTML5 Rocks - lõuendi integreerimine veebirakendustesse.
• Puumaja - kuidas lõuendiga joonistada

8. Kus edasi?

Täname, et lugesite minu uskumatult lühikest juhendit HTML5-st leitud uute tehnoloogiate kohta. On vaieldamatu, et HTML5 on tuleviku tehnoloogia. Enamik tehnoloogiaid võtab selle kasutusele, kuna seda on lihtne kirjutada ja see on mõõtmetelt võimas. Inimesed teevad kogu aeg sellega uskumatuid asju ja ma ei kahtle, et tulevikus olete üks neist inimestest. Mul on au olla osa teie teekonnast HTML5 metsikusse ja imelisse maailma.

Kutsun teid üles õppima. Jätkake kodeerimist. Jätkake taseme tõstmist ja täiustamist ning mitte mingil juhul kasutate selles lühikeses juhendis tutvustatud tehnoloogiaid suurepäraste toodete loomiseks.