Home-theater-designers
Sisukord
§5 – CSS3 Teisendused ja animatsioonid
§6 - lihtsalt piisavalt JavaScripti
1. Sissejuhatus
Olete sellest kuulnud: HTML5. Kõik kasutavad seda. Seda kuulutatakse Interneti päästjaks, mis võimaldab inimestel luua rikkalikke ja kaasahaaravaid veebilehti ilma Flashi ja Shockwave'i kasutamata.
Aga mis see tegelikult on?
Noh, sellele pole lihtne vastata. Selles HTML5 õpetuses proovime anda mõned vastused. HTML5 -d kasutatakse tõeliselt mitmekesise asjade rühma kirjeldamiseks. See on veebilehtede kirjutamise standard. See on API -de kogum. See on uus viis interaktiivsuse lisamiseks veebilehtedele.
HTML5 on kõik see ja palju muud. Millest see raamat siis räägib?
Selles HTML5 õpetuses eeldan, et olete mingil hetkel puudutanud HTML -i ja CSS -i. Võib -olla olete loonud oma Wordpressi teema või redigeerinud MySpace'i paigutust. Võib -olla olete lugenud MakeUseOfi enda XHTML -juhendit. Asi on selles, et ma eeldan, et tunnete end veebilehel ringi ja see, mida selles juhendis arutame, pole teile liiga võõras.
Selle juhendi eesmärk ei ole õpetada teile HTML5 tervikuna. See läheks täielikult selle raamatu raamidest välja. Eesmärk on tutvustada neid hämmastavaid uusi veebitehnoloogiaid õrnalt ja näidata teile mõningaid lahedaid viise, kuidas neid oma veebisaitidele lisada.
Miks soovite õppida HTML5 -d?
See on õiglane küsimus. Kas nutitelefonide ja rakenduste maailmas on tõesti oluline õppida veebilehtede programmeerimist?
Uskuge või mitte, aga nutitelefonirakenduste kirjutamine HTML5 -tehnoloogiate abil on tõesti tavaline. Veel hiljuti kirjutati Androidi jaoks mõeldud Facebooki rakendus HTML5, CSS ja Javascripti abil.
Blackberry on veel üks suur ettevõte, kes on HTML5 -le tohutult huvitatud. See on ilmne nende mobiilse operatsioonisüsteemi Blackberry OS 10 viimases iteratsioonis, kus nad innustavad arendajaid aktiivselt veebitehnoloogiaid kasutades oma telefonidele rakendusi arendama.
Ka uued Firefoxi OS -i nutitelefonid töötavad täielikult HTML5 -rakendustes. Töötavad teadmised HTML5 -st on tänapäeva nutitelefoni kliimas hädavajalikud.
Lisaks on HTML5 õppimine teie karjäärile kasulik. Ei usu mind? Vastavalt Indeed.com , HTML5 arendaja keskmine aastane palk on silmatorkav 89 000 dollarit. Kuna üha enam ettevõtteid muudab oma veebisaite HTML5 -tehnoloogiate kasutamiseks, otsitakse HTML5 -pinu tundvaid arendajaid - nüüd rohkem kui kunagi varem.
1.1 Eeldused
See HTML5 õpetus eeldab paari asja. Esiteks eeldab see, et teate, kuidas veeb töötab, ja teate, kuidas luua põhiline veebileht. Teil peaks olema võimalik mõned HTML -elemendid kokku panna ja veebibrauseris teatud teavet esitada. Nähes ja
sildid pole liiga heidutavad ja te ei karda oma käsi mingis lähtekoodis määrida.
Teiseks eeldab see juhend, et teate, mis on CSS ja kuidas see toimib. Me ei oota, et olete disainigeeniused, ega eeldata, et teate kogu CSS -i spetsifikatsiooni käeulatuses. Siiski peaksite saama veebisaidi elemendile stiili rakendada, CSS -failiga linkida ja tunnetada ID ja klassi erinevusi ning seda, kuidas igale neist stiili rakendada.
Kui te kriimustate oma pead ülaltoodu tõttu, ärge muretsege. Üks parimaid asju HTML -i ja CSS -i puhul on see, et see on tõesti väga lihtne. Tegelikult on MakeUseOfil uskumatu XHTML -juhend, mis tõstab teid tõesti kiiresti.
Pärast selle juhendi lugemist võiksite vaadata ka järgmisi artikleid:
- 8 kvaliteedikodeerimise näiteid sisaldavat veebisaiti
- 6 ajaveebi, mida jälgida suurepäraseid veebidisainereid
Teil on vaja ka kaasaegset tekstiredaktorit ja brauserit. Mis tahes Internet Exploreri versioon, mis on vanem kui IE 9, ja mõned Safari, Chrome'i ja Firefoxi vanemad versioonid võitlevad paljude funktsioonidega, mis on osa HTML5 -st, ja võivad takistada teil seda juhendit järgimast.
Selle tulemusena soovitatakse teil alla laadida kaasaegne brauser. Soovitan Google Chrome'i ja kasutan seda igas näites.
Peale selle on teil vaja ainult tahet õppida. Oh, ja tekstiredaktor.
1.2 Tekstiredaktorid veebiarenduseks
Teie tekstiredaktor on see, mida kavatsete oma koodi kirjutamiseks kasutada. Teil võib tekkida küsimus, mis on tekstiredaktor.
Esiteks pole see tekstitöötlusprogramm. Sellised programmid nagu Microsoft Word ja Apple'i lehed ei sobi veebiarenduseks. Seda seetõttu, et nad lisavad teie HTML-, CSS- ja Javascripti -failidele lisateavet, mis raskendab teie veebibrauseri lugemist.
Tekstiredaktor tulistab tähemärgid tekstifaili ja mitte palju muud. See võimaldab teil luua faile, millel pole täiendavat vormingut ja mida saab salvestada mis tahes laiendusega.
Teie arvutiga on see juba kaasas. Kui kasutate Windowsi arvutit, on Notepad tõenäoliselt teksti installitud redaktor.
Macis on olukord pisut erinev. OS X -il on juhtumisi neli erinevat tekstiredaktorit. Neid nimetatakse Vim, Emacs, Pico ja Nano. Kuid erinevalt Notepadist töötavad nad kõik terminalis.
See on natuke hirmutav inimestele, kes on veebiarenduses uued ja seda ei tohiks kasutada inimesed, kes on tarkvaraarenduses uued. Me ei kasuta neid selles juhendis. Kui aga tarkvara ja veebiarenduse osas natuke enesekindlamaks muutute, tasub kindlasti vaadata Vimi ja Emaci. Mõlemad on võimsad tekstiredaktorid ja nende omandamine võib säästa kohutavalt palju aega.
Linuxis on vaiketekstiredaktor jaotuste lõikes erinev. Ubuntus on see tõenäoliselt Gedit, mis on üsna meeldiv tekstiredaktor, mis ei ole Notepadist liiga erinev.
Kuid sellel kursusel kirjutame oma koodi kolme erineva tööriista abil.
Esimene on ülev tekst 2. Ausalt öeldes ei saa ma seda piisavalt soovitada. Kaasas kõik asjad, mis lihtsustavad algaja arendaja elu. Esiteks lihtsustab see teie koodi lugemist, värvides teatud osi. Teiseks võimaldab see hõlpsalt failide vahel vahetada ja hallata terveid failiprojekte. See sobib ideaalselt failide vahel vahetamiseks ja mitme koodibiti muutmiseks käigu pealt.
Kolmas on Google Chrome'i sisseehitatud Javascripti konsool. See võimaldab meil kirjutada Javascripti ja näha, kuidas seda kohe käivitatakse ning seda kasutatakse põhiliste programmeerimiskontseptsioonide selgitamiseks.
Teine on veebisait nimega Codepen.io. See tähelepanuväärne veebisait võimaldab teil brauseris kodeerida HTML -i, CSS -i ja Javascripti ning on tasuta kasutatav. Samuti võimaldab see muudatusi koheselt näha.
2. Semantiline märgistus
Selles peatükis saate teada semantilise märgistuse kohta ja selle kohta, kuidas koodi sisu järgi korraldada.
Kuni viimase ajani oli HTML -kood üldiselt korraldatud siltidega. Need võimaldasid teil luua elementide rühma ja seejärel nende elementide jaoks stiili rakendada.
See toimis, kuid arenguruumi oli. Siltide probleem oli see, et see polnud semantiline. Div ei tähenda tegelikult midagi.
Semantiline märgistus on HTML5 uus funktsioon. See toob sisse uued sildid, mis toimivad samamoodi nagu silt „div”, kuid on mõeldud lehe tavaliste osade märgistamiseks.
Niisiis, kuidas nad töötavad? Mõelge järgmisele koodile.
Selles koodis on meil navigeerimisriba, pealkiri ja loend. See pole liiga erinev enamiku veebisaitide kohta, kus te tõenäoliselt kunagi külastate, kui sellele mõelda.
mida tähendab vähese andmeside režiim
Vaatame MakeUseOfi artiklit. Märkate, et lehel on osa, mis on reserveeritud ainult teistele artiklitele navigeerimiseks. Samuti märkate, et lehe teine osa sisaldab artikleid sisaldavaid sõnu. Lehe ülaosas näete päist, mis sisaldab MakeUseOfi logo ja mõnda muud linki.
Kui järele mõelda, järgivad paljud veebisaidid neid tavasid. Enamikul veebisaitidel on osa, mis on reserveeritud navigeerimiseks. Tavaliselt on neil sisu. Neil on enam kui tõenäoliselt päis.
Semantilised sildid on sildid, mis võimaldavad teil määratleda veebisaidi osi, mida tavaliselt enamikul veebisaitidel leidub. Need ei lisa lehele midagi, kuid võimaldavad teil rühmitada silte nende sisu alusel ja rakendada neile rühmadele stiile.
Kas mäletate seda koodi, mis meil varem oli? Vaatame seda koos mõne semantilise märgistusega.
Nagu näete, on koodi palju lihtsam lugeda. Te teate, millised osad on millised, ja pole kahtlust. See on oluline, sest see lihtsustab hea ja puhta koodi kirjutamist. Kui otsustate kunagi saada professionaalseks veebidisaineriks, muutub see ülitähtsaks - te ei tea kunagi, kes teie toodetud tööd loeb.
Niisiis, vaatame veel mõnda semantilist märgistusmärgendit.
2.1 Jaotis
Jaotis on tõesti kasulik silt. Seda kasutatakse tohutu hulga teabe ja sisu haaramiseks, mis on märgistatud pealkirja või pealkirjaga. Mõelge sellele nagu raamatu peatükile. Peatükil on pealkiri ning see võib sisaldada ka pilte, diagramme, graafikuid ja sõnu. Selle kõige sisaldamiseks kasutatakse jaotisesilti.
2.2 Artikkel
Artikli märgendit kasutatakse selle jaoks, kuidas see kõlab; Sisaldab sisu, näiteks ajaveebi postitust või uudislugu. Seda sisu peaks saama ülejäänud ajaveebist eraldada ja see peaks siiski olema sidus.
2.3 Kõrvale
See silt on reserveeritud sisule, mis on seotud veebilehega, kuid ei ole selle lahutamatu osa. See võib olla hulk fakte, mis on seotud uudistega või ajaveebi kasutaja elulooga.
2.4 Päis
Paljudel veebilehtedel on lehe ülaosas riba, mis sisaldab logo, saidi kohta käivat teavet ja võib -olla ka linke. Semantilises märgistuses kasutaksite seda kõike päise märgendit.
2.5 Nav
See element on reserveeritud teie veebisaidi navigeerimisosale. See sisaldaks linke teistele veebisaitidele või veebisaidi teistele lehtedele. MakeUseOfi kontekstis võib see olla lehe osa, mis asub päise all.
2.6 Jalus
See silt on reserveeritud lehe alumisele osale. Siin saate oma lehele „minust” panna mõned kontaktandmed, autoriõiguse teabe, kaardi või mõned lingid.
2.7 Testi ennast
- Mis on semantiline märgistus ja milleks seda kasutatakse?
- Teen veebilehte ja soovin kasutada semantilist märgendit minu kohta käiva eluloo sisaldamiseks. Kumba ma kasutan?
3. Vormid
Kui olete kunagi natuke veebidisaini teinud, siis ilmselt teate, kuidas HTML -is lihtsat vormi luua. Kui olete tõesti tark, siis ilmselt teate, kuidas oma vormilt saadud teavet võtta ja kuidas sellega midagi ette võtta, näiteks panna see andmebaasi.
Vormid on tohutult olulised. Need on aluseks enamikule asjadele, mida Internetis teeme. Iga kord, kui loote oma lemmikvõrgustikus olekuvärskenduse, ostate midagi Amazonist või saadate e -kirja, olete ilmselt 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 vaatame mõningaid lahedaid asju, mida saate nüüd teha, lihtsalt vana märgisega.
Niisiis, mis on nii lahedat uuel viisil, kuidas saame HTML5 -vormis vorme kirjutada? Esiteks saate tagada, et esitamiseks tuleb täita mõned väljad, muutes lihtsalt vormi enda märgistust. Lisaks ei pea te selleks enam kirjutama mägesid JavaScripti ega PHP -d. See on tühiselt lihtne.
Teiseks saate tagada, et teie kasutajad saavad teie vormile esitada ainult teatud tüüpi teavet. Oletame, et teil on meililistide jaoks veebisait ja soovite, et inimesed saaksid esitada ainult tegelikke e -posti aadresse? Seda saate teha lihtsalt HTML5 abil. See on tõesti uskumatult võimas.
Kolmandaks saate oma vormid paremaks muuta, kui annate teatud väljadele kohatäite. See muudab need oluliselt intuitiivsemaks, kuna saate oma kasutajatele näidata näidet selle kohta, mida te vormi eest ootate.
3.1 Vormi täiustamine
Niisiis, vaatame vormi ja vaatame, kuidas seda paremaks muuta.
See vorm on üsna lihtne. See võtab nime, e -posti ja lemmikvärvi ning võimaldab kasutajal selle esitada. See ei sisalda kinnitust selle kohta, millist teavet sinna paigutatakse, ja miski ei takista kasutajatel seda vormi tühjade väljadega esitamast. Muudame seda kõike.
Niisiis, esimene asi, mida me tahame teha, on tagada, et e -posti väli võtab ainult e -kirja. See oli tõepoolest üsna raske ülesanne, kuna peate looma igasuguse arka Regexi koodi. No mitte enam. Peate lihtsalt muutma sisendi tüübi tekstist e -kirjaks. Kui proovite seda vormi jamaga esitada, siis see kaebab ja nõuab, et esitaksite e -kirja.
3.2 Sisendi tüübid ja mustrid
On ka teisi sisenditüüpe, mida saate nõuda. Nende hulka kuuluvad telefoninumbrid, veebiaadressid, otsinguvormid ja isegi värvivalijad! Kuna HTML5 areneb pidevalt, on loogiline, et peagi saame lähitulevikus määrata rohkem sisenditüüpe.
Lisaks saate sisendite mustreid määrata selliste asjade jaoks nagu telefoninumbrid, mis sõltuvad asukohast. Need on loodud nn regulaaravaldiste abil ja on üsna keerulised, kuid mõõtmatult võimsad.
Samuti tahame tuua näite oma valdkonna e -kirjast, nii et kasutajal pole kahtlust, mida ta peab esitama. Seda on tõesti lihtne teha. Lihtsalt looge näite e -posti aadressiga uus atribuut „kohatäide”.
Me tagame, et meie väli „Lemmikvärv“ on kohustuslik. Sisestage e -posti sisendmärgendi viimasesse nurksulgusse (>) lihtsalt „kohustuslik”. See on kõik. Kui proovite oma vormi ilma väärtuseta esitada, kuvatakse see veateatega.
Nende veateadete puhul on tõeliselt uskumatu see, et kasutaja ei pea neid kirjutama ega koodi kirjutama. Lihtsalt muudate 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õimsusse. Kui soovite rohkem lugeda, soovitan teil neid linke külastada.
Lisalugemist:
- CSS -nipid - kirjutame semantilise märgistuse
- HTML5 arst - räägime semantikast
3.3 Testi ennast
Järgmisel nädalal on teie sünnipäev ja soovite luua registreerimisvormi, et saaksite teada, kui palju kooki peate looma. Avage oma tekstiredaktor ja looge järgmiste väljadega vorm.
- Nimi
- E-posti aadress
- Telefoninumber
- Allergia
Veenduge, et nime, e -posti ja telefoninumbri väljad on kohustuslikud ning et väljad E -post ja Telefoninumber on seatud sisenditüüpidega „email” ja „tel”. Looge allergiaväljale kohatäide väärtusega „õietolm, munad, quiche”.
Mängige vormiga ringi. Esitage nõutud väljad tühjana ja sisestage telefoninumbriväljale mitte-numbrilised märgid. Sisestage e -posti väljale midagi, mis pole e -posti aadress. Mis juhtub?
4. Keskmine
Kunagi oli ainus viis, kuidas veebisaidile mõnda videot või heli sisestada, kasutades midagi sellist nagu Flash, Shockwave või SilverLight.
See polnud ideaalne. Esiteks ei töötanud ükski neist raamistikest mobiilseadmetes nii hästi. Nad lihtsalt polnud varustatud kaasaegse nutitelefonide ja tahvelarvutite maailmaga.
kuidas taaskäivitada explorer.exe Windows 10
Lisaks olid need varalised formaadid. Selle tulemusena said Linuxi ja OS X-i kasutajad üsna teisejärgulise kogemuse või isegi ei saanud meediateenuseid tarbida, kuna see polnud nende platvormi jaoks saadaval.
Lõpuks oli neil kalduvus olla aeglane. Kui kasutate vähese võimsusega või vanemat arvutit, poleks teil nende raamistike abil videote vaatamise kohta head kogemust. Flash oli selle poolest eriti kurikuulus.
4.1 Kuidas HTML5 muudab video ja heli suurepäraseks?
HTML5 muutis seda, lubades veebiarendajatel lisada oma veebisaitidele vaid mõne rea koodiga videot ja heli. See sobib suurepäraselt mobiilseadmetele ja töötab igas kaasaegses veebibrauseris.
Selle tulemusena kasutavad sellised suured ettevõtted nagu YouTube, Vimeo ja Netflix ära HTML5 revolutsiooni. Miks sa nendega ei ühine?
4.2 Kõik koodekite kohta
Selles peatükis saate teada, kuidas kasutada HTML5 võimsust heli ja video lisamiseks oma veebilehtedele.
Esiteks pean alustama hoiatusega. Kuigi HTML5 -videot saate kasutada igas kaasaegses veebibrauseris, ei tööta see igas veebibrauseris ühtemoodi. Iga brauseri kasutatavad koodekid on erinevad. Internet Exploreris saate kasutada ainult MP4 -videot. Chrome on pisut heldem ja võimaldab kasutada WebM-, MP4- ja Ogg Theora -videoid. Opera on natuke piiravam ja võimaldab kasutada ainult Theora ja WebM videot.
Selle tulemusel peate oma veebisaidile video sisestamisel olema natuke nutikas. Niisiis, vaatame, kuidas see toimib.
4.3 Videoga alustamine
Alustuseks peate looma mõned ava- ja lõpumärgendid. Siin saate linkida oma videofailidele. Aga kõigepealt tahad plakatit panna. Mida see tähendab?
Kui ootate video laadimist, näeb teie saiti külastav inimene videoga seotud pilti. Selleks andke oma videomärgenditele lihtsalt posteri atribuut koos pildi väärtusega, millega soovite linkida. See peaks välja nägema selline.
Järgmine asi, mida me tahame teha, on varukoopia loomine. Mida see tähendab? Oletame, et kasutate mõnda vanemat ja vähem vinget brauserit. Paljud neist vanematest brauseritest ei toeta HTML5 -videot ega saa seetõttu HTML5 -videot esitada. Soovite jätta neile sõnumi, milles teavitatakse, et nad soovivad oma brauserit uuendada ja et nad ei saa enne teie video vaatamist seda teha.
Selleks kirjutage oma sõnum lihtsalt videomärgendite sisse. Midagi muud pole vaja. Kui olete seda teinud, jääb teile kood, mis näeb välja selline.
Nüüd lisame mõne video. Ma katsetan seda Google Chrome'is, nii et ma lingin MP4 filmi. Selleks loon sildi Allikas ja annan sellele atribuudi src, millel on soovitud video väärtus.
Minu leht on nüüd veebibrauseris avamiseks valmis. Olen linkinud filmiga, mis on tõesti väga suur ja selle tulemusena on avatuna näha ainult plakatit.
4.4 Heli lisamine
Heli saab teie veebilehele sisestada viisil, mis meenutab väga seda, kuidas me oma lehele video sisestasime.
Esiteks loob inimene helisildid. Need helisildid sisaldavad atribuuti „kontrolli”. See annab lehte külastavale kasutajale esitatava heli peatamise, taasesituse ja tagasikerimise.
Seejärel lisate MP3 -faili, millega soovite linkida, lähtemärgendi. Koodeki ühilduvuse osas ei pea te tegelikult nii palju muretsema. Viimastel veebibrauseritel on võimalus esitada MP3 -heli, kuigi hea tava on lisada igaks juhuks ka .ogg- ja .wav -fail.
Lõpuks saate luua varukoopia vanematele brauseritele. Seda tehakse samal viisil, nagu lõite oma video jaoks varukoopia.
Lõpptulemus näeb välja natuke selline.
Kui avate selle oma veebibrauseris, peaks see välja nägema natuke selline.
4.5 Testi ennast
- Mis on plakatite lisamine teie videomärgenditesse?
- Milliseid koodekeid ei saa Internet Exploreris kasutada?
- Kui sooviksin võimalust heli mõneks ajaks peatada, siis millise atribuudi te oma helisildile lisaksite?
Lisalugemist:
5. CSS3 teisendused ja animatsioonid
Traditsiooniliselt kasutati CSS -i veebilehe kujunduse ja kujunduse haldamiseks. See on endiselt tõsi, kuid oma viimases iteratsioonis on ta saanud võimaluse käsitleda elementide ja piltide animatsioone ning teisendusi.
Inimesed on CSS3 abil teinud hämmastavaid asju, alates digitaalse kella loomisest kuni täieliku Pongi mängu kirjutamiseni. Keegi kasutas seda isegi hullu meeste sissejuhatavate tiitrite uuesti loomiseks. See on tõeliselt võimas tehnoloogia ja selle omandamisel saab seda kasutada oma veebilehele hämmastava funktsionaalsuse lisamiseks.
Selles peatükis tutvustan teile CSS3 lühitutvustust ja näitan teile, kuidas oma lehele hämmastavaid efekte lisada.
Esmalt liikuge saidile codepen.io ja looge uus pliiats. Kasutame seda selle peatüki vältel oma tööruumina.
Alustame lihtsast ja loome lihtsa kujutise teisenduse, mis pöörab pilti 3 kraadi, kui see hõljub. Kõigepealt looge div -silt ja andke sellele ID. Allolevas näites olen andnud sellele „muo” ID.
5.1 CSS hõljumise efektid
Sellesse sektsiooni lisage 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. Lisasin ka uudishimuliku stiililehe reegli, mis algab sõnaga „#muo: hover”. Mis see on?
Kui lisate stiililehe reeglile „: hover”, olgu see siis element, ID või klass, käskite brauseril seda stiili rakendada, kui element liigub hiirega. Päris lahe, eks?
Reegli „#muo: hõljuk” sees on meil rida „-webkit-transform: rotate (3deg)”. Nagu ma olen kindel, et arvate, ütleb see brauserile seda div -elementi kolme kraadi võrra pöörama.
Siiski 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, soovite muuta oma CSS -faili järgmiste ridade lisamiseks.
Nüüd, kui hõljutate kursorit pildi kohal, näeb see välja selline:
5.2 CSS3 kasutamine piltide suuruse muutmiseks
Niisiis, miks peatuda? Kas teadsite, et kujutise suurendamiseks või vähendamiseks saate kasutada ka teisendusmeetodit. Muutame oma CSS -faili järgmiste ridade lisamiseks.
Nagu näete, oleme nüüd lisanud uue teisendusreegli, kuid seekord käsime tal teha midagi, mida nimetatakse skaalaks. See on tõesti ilus viis pildi suuruse suurendamiseks. Selleks on vaja kahte 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äha, suurendan MakeUseOf div logo suurust 50%. Saate seda tööd testida, kui hõljutate kursorit selle kohal. Näete, et nüüd on MakeUseOf logo märgatavalt rohkem venitatud.
See oli väga õrn sissejuhatus CSS3 teisendustesse. Hoolimata sellest, et CSS3 on tõepoolest väga uus, näete nüüd, et saate sellega teha palju huvitavaid manipulatsioone.
5.3 Testi ennast
- Kuidas rakendame hõljumisel elemendile stiili?
- Kuidas pilti CSS3 abil pöörata?
- Kuidas pilti CSS3 abil skaleerida?
- Mis juhtub, kui edastate teisendusmeetodi translate (50px, 50px)?
Lisalugemist:
6. Lihtsalt piisavalt Javascripti
Kui soovite oma veebibrauseris skripti kasutada, peate kasutama Javascripti. Kahjuks pole sellel kahte võimalust. See on keel, millel on palju fänne ja palju halvustajaid. Keelte järgi on sellel palju tüükaid. On põhjus, miks kõige tähelepanuväärsem raamat selle keele kohta kannab nime „Javascript: head osad”.
Javascripti kasutamise õpetamine ühes peatükis on võimatu. See pole siin eesmärk. Eesmärk on õpetada teile piisavalt Javascripti, et saaksite aru järgmisest peatükist, mis käsitleb Canvas -nimelise tehnoloogia kasutamist jooniste ja animatsioonide tegemiseks.
6.1 Juurdepääs konsoolile
Selleks kasutame Javascripti konsooli, mis on sisse ehitatud igasse Google Chrome'i koopiasse. Sellele juurdepääsemiseks võite paremklõpsata mis tahes veebilehel ja seejärel vajutada nuppu „Kontrolli elementi”. Seejärel klõpsake 'Konsool'. Seda peaksite nägema.
Traditsiooniline on see, et esimene programm, mida mõni algaja arendaja kunagi kirjutab, on programm 'Tere maailm'. See on lihtne programm, mis prindib fraasi 'Tere maailm' ja mitte palju muud. Tippige oma konsooli 'console.log (' Tere maailm! ') ;.
6.2 Teie esimene programm
Niisiis, mida me täpselt tegime? Kõigepealt kutsusime midagi nimega 'console.log'. See on natuke arvutisse sisseehitatud kood, mis lihtsalt prindib välja kõik, mida te käsite. Seejärel lisasime sellele mõned sulud ja lisasime need jutumärkidesse „Tere maailm”. Seda nimetatakse läbivateks argumentideks ja argumendi tüüpi, mille me edastasime, nimetatakse stringiks. Kui soovite teha midagi, mis sisaldab tähti ja erimärke, peate lihtsalt kasutama üksikuid jutumärke. Kui aga soovite numbrite abil midagi ette võtta, ei pea te tavaliselt jutumärke kasutama, nagu allpool näha.
6.3 Muutujad JavaScriptis
Muutujaid saate edastada ka saidile „console.log”. Muutujad kõlavad keeruliselt, kuid kõik, mis nad tegelikult on, on koht, kuhu panna teabe tükid. Need on sageli numbrid või tähed. Selleks deklareerige muutuja märksõna „var” abil, pange sellele nimi ja seejärel võrdusmärgiga väärtus. Niisiis, loon muutuja nimega 'tere' ja annan sellele siis väärtuse 'Tere maailm!'. Edastan selle siis konsoolile.log.
Pange tähele, kuidas ma ei edastanud „tere” saidile console.log, kasutades jutumärke. Seda seetõttu, et tahtsin konsoolile printida 'tere' sisu, mitte 'tere' ise.
6.4 Funktsioonid
Sama kooditüki uuesti ja uuesti ümberkirjutamine võib olla pisut tüütu, seetõttu kirjutamegi 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 sulgudes argumendi, mis logitakse seejärel ekraanile. Kutsume 'sup', saates konsooli 'sup (' Tere maailm! ');'.
6.5 Toimingu kordamine silmusega „For”
Oletame, et soovisite teatud toiminguid teha sama toimingu. Sel põhjusel kasutamegi tsüklit „jaoks”. Esmapilgul tunduvad nad hirmutavad, kuid neid on nii lihtne teha, kui neist aru saate. Alustuseks kirjutage „jaoks ()”.
Nendes sulgudes tahame luua muutuja, mis loeb, mitu korda oleme toimingu teinud. Niisiis, saame midagi sellist, mis näeb välja selline 'jaoks (var i = 0;)'.
Seejärel tahame kontrollida, kas ma pole tingimusi täitnud. Niisiis, sel juhul tahame näha, et see on alla 10. Niisiis, pärast semikoolonit kirjutame 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).
Kui ma olen alla 10, tahame selle ükshaaval lisada ja seejärel midagi ette võtta. Niisiis, paneme 'i = i + 1'. Meie tsükkel on peaaegu lõppenud: 'for (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.
Pärast seda tahame midagi ette võtta. Niisiis, pärast viimaseid sulgusid kirjutame mõned lokkis traksid ja nende vahele hakkame lohutama. Log i väärtust. See loob loenduri, mis loeb kuni üheksa.
Viimased kaks programmeerimiskonstruktsiooni, mida me vaatame, on avaldused 'if' ja 'while'.
6.6 Kui avaldused
Väide „kui” sooritab toimingu, kui teatud kriteeriumid on täidetud. Need on ehituses sarnased silmuste jaoks ja töötavad järgmiselt. Oletame, et teil on muutuja nimega „juustuburgerid” ja soovite näha, kas selle väärtus on „maitsev”. Kui see juhtub, soovite ekraanile logida 'yum, cheeseburgers'. Selleks kirjutaks midagi sellist.
Pange tähele, kuidas ma kirjutasin 'kui (juustuburgerid ==' maitsev ')'. Kasutate kahe- või kolmekordset võrdsust võrdsuse kontrollimiseks ja üksikut võrdset väärtuse määramiseks.
6.7 Loops
Lõpuks täidab „samas” tsükkel toimingu, kui kriteeriumid on täidetud. Kujutage siis ette, et soovite sisse logida 'yum, cheeseburgers', samas kui juustuburgerid on võrdselt maitsvad. Selleks kirjutage järgmine.
Väärib märkimist, et see siseneks lõpmatusse ringi ja peaksite vältima toimingu tegemist väärtusega, mis tõenäoliselt ei muutu. See võib põhjustada teie brauseri lukustumise või koodi mittetoimimise.
Nagu ma varem mainisin, oli see väga lühike sissejuhatus Javascripti konstruktide programmeerimisse. Teid julgustatakse selle põneva, ehkki tohutu teema kohta rohkem lugema.
6.8 Pane end proovile
- Tahan loendada 30 -st. Kirjutage 'jaoks' silmus, mis seda teeks.
- Ma tahan luua muutuja nimega „makeuseof” ja anda sellele väärtuseks „vinge”. Kuidas seda tehakse?
- Tahan luua funktsiooni, mis prindib kutsumisel välja „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ööni simulaator ja erinevad videomängud. See on suurepärane ja kirjeldamatult suur tehnoloogia, selles õpetuses annan teile selle lühikese sissejuhatuse.
Väärib märkimist, et Canvas töötab ainult kaasaegsetel veebibrauseritel. Kui kasutate IE, Chrome'i või Firefoxi vana versiooni, ei pruugi te seda peatükki järgida. Kui see nii on, peaksite kaaluma Google Chrome'i uusima versiooni allalaadimist, mis oli veebibrauser, milles selle õpetuse lõin.
7.1 Lõuendiga alustamine
Esiteks peate avama oma veebibrauseri ja navigeerima saidile codepen.io. Looge uus pliiats.
Nüüd peame deklareerima lõuendi elemendi. Looge kaks lõuendi avamis- ja sulgemissilti. Neis peaksite andma sellele kolm atribuuti. Need on lõuendi elemendi laius ja kõrgus koos sellele antava ID -ga. Nagu enne video sisestamist, peaksite lisama varusõnumi.
Nüüd tahame kirjutada mõne Javascripti koodi, mis tõmbab ekraanile midagi. Alustame lihtsast ja loome lihtsa punase ruudu.
Loome muutuja (nimetasin seda demoks) ja seejärel valime lõuendi elemendi ja määrame selle sellele muutujale. Selleks kasutage dokumenti.getElementByID () ja sisestage selle elemendi ID, mida soovite valida.
Meie skripti teine rida loob teise muutuja nimega „kontekst” ja kutsub seejärel sellele „demo.getContext („ 2d ”)”. See ütles brauserile, et töötame 2D -pildi kallal, ja seejärel edastasime vajalikud funktsioonid, mida vajame ekraanile joonistamiseks.
Kolmas ja neljas rida on need, mis tegelikult ekraanile joonistavad. Kolmas rida täidab ristküliku punase värviga, neljas rida aga täidisega fillRect, mis paigutab selle ja määrab selle pikkuse ja laiuse.
See pole siiski muljetavaldav. Teeme midagi veidi arenenumat ja kasutame Javascripti ja lõuendi võlujõudu, et luua MakeUseOf uhiuus logo.
7.2 Kujud ja tekst
Kustutame oma neljanda rea ja asendame selle ühega, mis asetab meie ristküliku vasakusse ülanurka ja venitab selle lõuendi pikkuseks.
Esimesed kaks argumenti määravad, kuhu soovime kujundi x- ja y -telje paigutada. Paneme need kaks praegu 0 -le. Kolmas argument viitab kuju laiusele. Määrame selle väärtuseks „200” ja jätame neljanda argumendi väärtuseks „50”. Nüüd peaks teil olema midagi, mis näeb välja natuke selline.
See on suurepärane algus, kuid see ei maini MakeUseOfi üldse. Niisiis, lisame teksti. Loome muutuja, mis sisaldab 'makeuseof' ja nimetame selle muutujaks 'MakeUseOf'.
Seejärel tahame luua teise kontekstimuutuja. Nimetage seda konteksti2 ja veenduge, et see oleks 2d. Seda me kasutame oma teksti kirjutamiseks.
Soovime, et meie tekst oleks sinine ja kattaks meie punase ruudu. Niisiis, nagu varemgi, tahame sellele anda ka sinise täite stiili. Nüüd valime oma teksti omadused. Soovime, et see oleks 20 pikslit suur, rasvases vormingus ja kasutaks Arial fonti. Me nimetame fonti kontekstis2 ja omistame sellele väärtuse „paks 20 pikslit ariaalne”.
Kuna me tahame, et see tekst kataks meie eelmise punase kasti, peame helistama kontekstis2 tekstile „textBaseLine” ja andma sellele ülaosa väärtuse. Kui see on lõpule viidud, kutsume konteksti2 'fillText' ja edastame sellele muutuja, mis sisaldab meie teksti ning x- ja y -koordinaate, kuhu kavatseme oma teksti paigutada. Meie koodi lõpptulemus on midagi sellist.
Koodiga loodud pilt näeb välja selline.
7.3 Sõna lõuendil
Kuigi see oli lõuendile uskumatult lihtne sissejuhatus, peaksite mõistma, et see on ka uskumatult suur tehnoloogia ja uskumatult võimas käivitamine. See juhend oli lihtsalt sissejuhatuseks selle uue tehnoloogia abil graafika tegemisse.
google docs ülemised ja alumised veerised
7.4 Testi ennast
- Lisage oma loodud pildile järgmine loosung: 'Parim tehnoloogiline sait kunagi!'
- Looge tsükkel „jaoks”, mis kestab kümme iteratsiooni. Vaadake, kas saate joonist lõuendil allapoole liigutada, piksli kaupa.
- Pakkige joonis funktsiooni sisse. Mis juhtub, kui te seda ei helista?
Lisalugemist:
- HTML5 Rocks - lõuendi integreerimine oma veebirakendustesse.
- Treehouse - kuidas lõuendiga joonistada
8. Kuhu edasi?
Täname, et lugesite minu uskumatult lühikest juhendit HTML5 uute tehnoloogiate kohta. On vaieldamatu, et HTML5 on tulevikutehnoloogia. Seda võtab kasutusele enamik tehnoloogiaid, kuna seda on lihtne kirjutada ja see on võimatu. Inimesed teevad sellega kogu aeg uskumatuid asju ja ma ei kahtle, et tulevikus olete üks neist inimestest. Mul on au olla osa teie teekonnast HTML5 metsikusse ja imelisse maailma.
Ma palun teil edasi õppida. Jätkake kodeerimist. Jätkake taseme tõstmist ja täiustamist ning kasutate kohe lühikeses juhendis tutvustatud tehnoloogiaid imeliste toodete loomiseks.
Jaga Jaga Piiksuma E -post Kas tasub Windows 11 -le üle minna?Windows on ümber kujundatud. Kuid kas sellest piisab, et veenda teid Windows 10 -lt Windows 11 -le üle minema?
Loe edasi Seotud teemad- Wordpress ja veebiarendus
- HTML5
- Pikakujuline
- Pika kujuga juhend
Matthew Hughes on tarkvaraarendaja ja kirjanik Inglismaalt Liverpoolist. Teda kohtab harva ilma tassi tugevat musta kohvi käes ja jumaldab absoluutselt oma Macbook Pro'd ja kaamerat. Tema ajaveebi saate lugeda aadressil http://www.matthewhughes.co.uk ja jälgida teda Twitteris aadressil @matthewhughes.
Veel Matthew HughesiltTelli meie uudiskiri
Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!
Tellimiseks klõpsake siin