Aloita HTML5

Tämä opas on ladattavissa ilmaisena PDF-tiedostona. Lataa HTML5: n käyttöönotto nyt. Voit vapaasti kopioida ja jakaa tämän ystävien ja perheen kanssa.

instagram viewer

ja

tunnisteet eivät ole liian pelottavia, etkä pelkää kätesi likaantumista joihinkin lähdekoodiin.

Toiseksi tässä oppaassa oletetaan, että tiedät mitä CSS on ja miten se toimii. Emme odota sinun olevan suunnittelun neroja, eikä sinun odoteta tietävän koko CSS-eritelmää käteesi takana. Sinun pitäisi kuitenkin pystyä käyttämään muotoilua verkkosivun elementtiin, pystymään linkittämään CSS-tiedostoon ja tuntemaan tunnuksen ja luokan erot ja kuinka käyttämään muotoilua kuhunkin niistä.

Jos raaputat päätäsi yllä, älä huoli. Yksi HTML: n ja CSS: n parhaista asioista on, että se on todella, todella helppoa. Itse asiassa MakeUseOfilla on uskomaton XHTML-opas Opi puhumaan "Internet": Opas xHTML: äänTervetuloa XHTML - Extensible Hypertext Markup Language - maailmaan - merkintäkieli, jonka avulla kuka tahansa voi rakentaa verkkosivuja, joissa on monia erilaisia ​​toimintoja. Se on Internetin pääkieli. Lue lisää joka tuo sinut nopeasti nopeasti.

Luettuasi tämän oppaan, kannattaa ehkä tutustua myös seuraaviin artikkeleihin:

• 8 verkkosivustoa, joissa on esimerkkejä laadun koodaamisesta 8 parasta verkkosivustoa laadukkaita HTML-koodaus esimerkkejäJotkut mahtavat verkkosivustot tarjoavat hyvin suunniteltuja ja hyödyllisiä HTML-koodaus esimerkkejä ja oppaita. Tässä on kahdeksan suosikkiamme. Lue lisää
• 6 blogia seurata suuria web-suunnittelijoita 6 parasta seuraavaa verkkosivujen suunnittelublogia Lue lisää

Tarvitset myös nykyaikaisen tekstieditorin ja selaimen. Mikä tahansa Internet Explorer -versio, joka on vanhempi kuin IE 9, ja jotkut vanhemmat Safari-, Chrome- ja Firefox taistelee monien HTML5: ään kuuluvien ominaisuuksien kanssa ja saattaa estää sinua seuraamasta tätä opas.

Seurauksena on, että sinua kehotetaan lataamaan moderni selain. Suosittelen Google Chromea, ja aion käyttää sitä jokaisessa esimerkissä.

Tämän lisäksi tarvitset vain oppimisen halukkuuden. Voi, ja tekstieditori.

1.2 Tekstieditorit Web-kehitykseen

Tekstieditori on se, mitä aiot käyttää koodin kirjoittamiseen. Saatat ihmetellä, mikä on tekstieditori.

No, ensinnäkin se ei ole tekstinkäsittelyohjelma. Ohjelmat, kuten Microsoft Word ja Applen sivut, eivät sovellu täysin web-kehitykseen. Tämä johtuu siitä, että ne liittävät HTML-, CSS- ja Javascript-tiedostoihisi lisätietoja, mikä vaikeuttaa selaimesi lukemista.

Tekstieditori ampuu merkit tekstitiedostoon eikä paljon muuta. Tämän avulla voit luoda tiedostoja, joissa ei ole ylimääräistä muotoilua, ja ne voidaan tallentaa millä tahansa valitsemallasi laajennuksella.

Tietokoneesi mukana on jo yksi. Jos käytät Windows-tietokonetta, Notepad on tekstieditori, jonka olet todennäköisesti asentanut.

Mac-tietokoneissa tilanne on hiukan erilainen. OS X: ssä sattuu olemaan neljä erilaista tekstieditoria. Näitä kutsutaan Vimiksi, Emacsiksi, Picoksi ja Nanoksi. Toisin kuin Notepad, ne kaikki sattuvat toimimaan terminaalissa.

Tämä on hiukan pelottava ihmisille, jotka ovat uusia verkkokehitykseen, ja ohjelmistokehityksen aloittelijat eivät saa käyttää niitä. Emme käytä niitä tässä oppaassa. Kuitenkin, kun saat hiukan varmuuden ohjelmistojen ja verkkokehityksen suhteen, se on ehdottomasti katsomisen arvoinen puhti 7 tärkeintä syytä antaa Vim-tekstieditorille mahdollisuusOlen vuosien ajan kokeillut yhtä tekstieditoria toisensa jälkeen. Nimesit sen, yritin sitä. Käytin kutakin näistä toimittajista yli kaksi kuukautta ensisijaisena päivittäisenä päätoimittajana. Jotenkin minä ... Lue lisää ja Emacs. Ne ovat molemmat tehokkaita tekstieditoria, ja hallitsemalla ne voivat säästää paljon aikaa.

Linuxissa oletustekstieditori vaihtelee jakaumien välillä. Ubuntulla on todennäköistä gedit gedit: Yksi ominaisuuksiltaan täydellisimmistä tekstiteksteistä [Linux ja Windows]Kun ajattelet pelkkää tekstieditoria, ensimmäinen asia, joka voi hyppää päähänsä, on Windowsin Muistio-sovellus. Se tekee tarkalleen sen, mitä sen työkuvauksessa todetaan - tavallisen tekstin ominaisuudet ... Lue lisää , joka on melko miellyttävä tekstieditori, joka ei eroa liian paljon Muistiosta.

Tällä kurssilla kirjoitamme kuitenkin koodimme kolmella eri työkalulla.

Ensimmäinen on Ylpeä teksti 2 Kokeile Sublime Text 2 -käyttöjärjestelmääsi monikokoisiin muokkaustarpeisiisiSublime Text 2 on alustanvälinen koodieditori, josta kuulin vasta äskettäin, ja minun on sanottava, että olen todella vaikuttunut beta-merkinnästä huolimatta. Voit ladata koko sovelluksen maksamatta penniäkään ... Lue lisää . En voi rehellisesti suositella tätä tarpeeksi. Sen mukana tulee kaikki asiat, jotka helpottavat aloittavan kehittäjän elämää. Ensinnäkin, koodisi on helpompi lukea värjäämällä tiettyjä osia. Toiseksi sen avulla voit vaihtaa tiedostojen välillä helposti ja hallita tiedostojen kokonaisia ​​projekteja. Tämä on ihanteellinen tiedostojen välillä vaihtamiseen ja useiden koodibittien muokkaamiseen lennossa.

Kolmas on Javascript-konsoli Selvitä verkkosivustojen ongelmat Chrome-kehittäjätyökaluilla tai FirebugillaJos olet toistaiseksi seurannut jQuery-oppaani, olet jo saattanut joutua joihinkin koodiongelmiin etkä tiedä kuinka korjata ne. Kun se kohtaa toimimattoman koodibitin, se on erittäin ... Lue lisää joka on sisäänrakennettu Google Chromeen. Tämän avulla voimme kirjoittaa Javascriptin ja nähdä sen käynnistyvän välittömästi, ja sitä käytetään selittämään ohjelmoinnin peruskäsitteet.

Toinen on verkkosivusto nimeltä Codepen.io. Tämän merkittävän verkkosivuston avulla voit koodata HTML, CSS ja Javascript selaimessa, ja sitä voidaan käyttää vapaasti. Sen avulla voit myös nähdä muutokset heti.

2. Semanttinen merkintä

Tässä luvussa opit Semanttisesta merkinnästä ja siitä, kuinka koodisi järjestetään sen sisällön perusteella.

Viime aikoihin asti HTML-koodi oli yleensä organisoitu

Tämä toimi, mutta parantamisen varaa oli. Ongelma

Semanttinen merkintä on uusi ominaisuus HTML5: ssä. Se tuo uusia tunnisteita, jotka toimivat samalla tavalla kuin div-tunniste, mutta jotka on tarkoitettu sivun yleisten osien merkitsemiseen.

Joten miten ne toimivat? Harkitse seuraavaa koodia.

Tässä koodiosassa on navigointipalkki, otsikko ja luettelo. Tämä ei ole liian erilainen kuin useimmat verkkosivustot, joihin todennäköisesti koskaan siirryt, kun mietit sitä.

Katsotaanpa artikkeli MakeUseOfista. Huomaat, että sivulla on osa, joka on varattu kokonaan muihin artikkeleihin siirtymiseen. Huomaat myös, että sivulla on toinen osa, joka sisältää artikkelin muodostavat sanat. Sivun yläosaan tulee otsikko, joka sisältää MakeUseOf-logon ja joitain muita linkkejä.

Kun mietit asiaa, monet verkkosivustot noudattavat näitä käytäntöjä. Useimmissa verkkosivustoissa on osa navigointia varten. Heillä on yleensä runko sisältöä. Heillä on todennäköisesti otsikko.

Semanttiset tunnisteet ovat tageja, joiden avulla voit määrittää verkkosivuston osia, joita esiintyy useimmissa verkkosivustoissa. Ne eivät lisää mitään sivulle, mutta antavat sinun ryhmitellä tunnisteita niiden sisällön perusteella ja soveltaa tyylejä näihin ryhmiin.

Joten muistatko sen koodin, joka meillä oli aiemmin? Katsotaanpa sitä lisäämällä jotakin semanttista merkintää.

Kuten näette, koodi on paljon helpompi lukea. Tiedät, mitkä osat ovat, ja siinä ei ole epäselvyyttä. Tämä on tärkeää, koska se helpottaa hyvän puhtaan koodin kirjoittamista. Jos päätät tulla ammattimaisiksi verkkosuunnittelijoiksi, siitä tulee ensiarvoisen tärkeää - et koskaan tiedä kuka lukee tuottamiasi töitä.

Katsotaanpa vielä joitain semanttisia merkintätunnisteita.

2.1 jakso

Osa on todella hyödyllinen tunniste. Sitä käytetään suurien tietomallien ja sisällön tarttumiseen, jotka on merkitty otsikolla tai otsikolla. Ajattele tätä kuten kirjan lukua. Luvulla on otsikko, ja se voi myös sisältää kuvia, kaavioita, kuvaajia ja sanoja. Leikkaustunnistetta käytetään kaiken tämän sisältämiseen.

2.2 Artikkeli

Artikkelitunnistetta käytetään miltä se kuulostaa; Sisältää sisältöä, kuten blogitekstiä tai uutisia. Tämän sisällön pitäisi voida erottaa muusta blogista, ja sen tulisi silti olla johdonmukainen.

2.3 syrjään

Tämä tunniste on varattu sisällölle, joka liittyy verkkosivustoon, mutta ei sen olennainen osa. Tämä voi olla joukko uutisiin liittyviä tosiseikkoja tai blogin käyttäjän elämäkerta.

2.4 Otsikko

Monien verkkosivujen yläosassa on palkki, joka sisältää logon, joitain sivustoon liittyviä tietoja ja mahdollisesti linkkejä. Semanttisessa merkinnässä käytät Header-tunnistetta kaiken tämän sisällyttämiseen.

2.5 Nav

Tämä elementti on varattu verkkosivustosi navigointiosaa varten. Tämä sisältää linkkejä muille verkkosivustoille tai muille verkkosivun sivuille. MakeUseOfin yhteydessä tämä voi olla sivun osa, joka on otsikon alla.

2.6 Alatunniste

Tämä tunniste on varattu sivun alaosaan. Täälle voit lisätä joitain yhteystietoja, tekijänoikeustietoja, kartan tai linkkejä 'minusta' -sivullesi.

2.7 Testaa itsesi

• Mikä on semanttinen merkintä ja mihin sitä käytetään?
• Olen tekemässä verkkosivua ja haluan käyttää semanttista tunnistetta sisältämään elämäkertomuksen minusta. Kumpaa käytän?

3. Lomakkeet

Jos olet koskaan luonut vähän web-suunnittelua, tiedät todennäköisesti kuinka luoda yksinkertainen muoto HTML-muodossa. Jos olet todella taitava, tiedät todennäköisesti kuinka ottaa lomakkeestasi saamasi tiedot ja miten tehdä jotain sen kanssa, esimerkiksi laittaa ne tietokantaan.

Lomakkeet ovat erittäin tärkeitä. Ne ovat perusta useimmissa asioissa, joita teemme Internetissä. Joka kerta, kun luot tilapäivityksen suosikkisivustossasi, ostaa jotain Amazonista tai lähettää sähköpostia, olet todennäköisesti käyttänyt HTML-lomaketta.

Mitä et todennäköisesti tiennyt, on se, että lomakkeiden luontitapa on muuttunut radikaalisti HTML5: ssä. Se on myös huomattavasti parempi. Tässä luvussa tarkastellaan joitain hienoja asioita, joita voit nyt tehdä, pelkästään vanhoilla merkinnöillä.

Joten, mikä on niin hienoa uudesta tavasta kirjoittaa lomakkeita HTML5: een? Ensinnäkin voit varmistaa, että jotkut kentät on täytettävä lähettämistä varten, muuttamalla vain lomakkeen merkintöjä. Tämän lisäksi sinun ei enää tarvitse kirjoittaa JavaScriptin tai PHP: n vuoria. Se on triviaalia helppoa.

Toiseksi voit varmistaa, että käyttäjät voivat lähettää lomakkeellesi vain tietyntyyppisiä tietoja. Oletetaan siis, että sinulla on verkkosivusto postituslistallesi ja haluat vain, että ihmiset pystyvät lähettämään todelliset sähköpostiosoitteet? Voit tehdä sen vain käyttämällä HTML5: tä. Se on todella uskomattoman voimakas.

Kolmanneksi, voit tehdä lomakkeistasi entistä parempia antamalla tietyille kentille paikkamerkin. Tämä tekee heistä huomattavasti intuitiivisemman, koska voit näyttää käyttäjillesi esimerkin siitä, mitä odotat lomakkeelle.

3.1 Lomakkeen parantaminen

Katsotaanpa lomaketta ja katsotaan, kuinka voimme tehdä siitä paremman.

Tämä muoto on melko yksinkertainen. Se ottaa nimen, sähköpostin ja suosikkivärin, ja antaa käyttäjän sitten lähettää ne. Se ei sisällä vahvistusta siihen, mitä tietoja siihen sijoitetaan, eikä mikään estä käyttäjiä lähettämästä tätä lomaketta tyhjillä kenttillä. Muutetaan kaikki tämä.

Joten ensimmäinen asia, jonka haluamme tehdä, on varmistaa, että sähköpostikenttä vie vain sähköpostin. Tämä oli todellakin aika vaikea tehtävä, koska joudut luomaan kaikenlaisia ​​kaarevaisia ​​Regex-koodeja. No, en enää. Sinun on vain vaihdettava syötteen tyyppi tekstistä sähköpostiin. Kun yrität lähettää kyseisen lomakkeen ahkerasti, se valittaa ja vaatii lähettämään sähköpostia.

3.2 Tulotyypit ja -mallit

Voit myös tarvita muita syöttötyyppejä. Näitä ovat puhelinnumerot, verkko-osoitteet, hakulomakkeet ja jopa värivalinnat! Koska HTML5 kehittyy jatkuvasti, on syytä, että voimme pian määrittää lisää syöttötyyppejä lähitulevaisuudessa.

Lisäksi esimerkiksi puhelinnumeroille, jotka vaihtelevat sijainnista riippuen, voit määrittää tulojen mallit. Ne on luotu käyttämällä säännöllisiä lausekkeita ja ovat melko monimutkaisia, mutta mittaamattoman tehokkaita.

Haluamme myös tarjota esimerkki kentästämme olevasta sähköpostiviestistä, joten käyttäjällä ei ole epäselvyyttä siitä, mitä hänen on lähetettävä. Se on todella helppoa tehdä. Luo vain uusi 'paikkamerkin' attribuutti esimerkiksi sähköpostiosoitteella.

Varmistamme, että "Suosikki väri" -kenttä tarvitaan. Kirjoita sähköpostin syöttötunnisteen viimeiseen kulmasulkeeseen (>) vain vaadittava. Se siitä. Kun yrität lähettää lomakkeen ilman arvoa, se tuottaa virheilmoituksen.

Todella uskomaton asia näissä virheviesteissä on, että käyttäjän ei tarvitse kirjoittaa niitä tai kirjoittaa mitään koodia niiden luomiseen. Voit vain muuttaa kentän pakolliseksi, ja se vain toimii. Näin sanottuna on mahdollista mukauttaa niitä, jos haluat.

Se oli uskomattoman lyhyt johdanto HTML5: n lomakkeiden voimaan. Jos haluat lukea lisää, suosittelen, että vierailet näillä linkkeillä.

Lisälukema:

• CSS-temppuja - kirjoitetaan semanttinen merkintä
• HTML5 Doctor - puhutaanpa semantiikkaa

3.3 Testaa itsesi

On syntymäpäiväsi ensi viikolla, ja haluat luoda rekisteröintilomakkeen, jotta tiedät kuinka paljon kakkua sinun täytyy luoda. Avaa tekstieditori ja luo lomake seuraavilla kentillä.

• Nimi
• Sähköpostiosoite
• Puhelinnumero
• allergiat

Varmista, että nimi-, sähköposti- ja puhelinnumerokentät ovat pakollisia ja että Sähköposti- ja puhelinnumerokentät on määritetty 'email' ja 'tel' syöttötyypeillä. Luo paikkamerkki allergiakentälle arvolla 'siitepöly, munat, quiche'.

Pelaa ympäri muotoa. Yritä lähettää vaadittavat kentät tyhjinä ja yritä lisätä ei-numeerisia merkkejä puhelinnumerokenttään. Lisää sähköpostikenttään jotain, joka ei ole sähköpostiosoite. Mitä tapahtuu?

4. tiedotusvälineet

Aikaisemmin ainoa tapa, jolla voit lisätä videon tai äänen verkkosivulle, oli käyttää jotain, kuten Flash, Shockwave tai SilverLight.

Tämä ei ollut ihanteellinen. Ensinnäkin mikään näistä kehyksistä ei toiminut yhtä hyvin mobiililaitteissa. Niitä ei vain ollut varustettu älypuhelimien ja tablettien nykyaikaiseen maailmaan.

Lisäksi ne olivat omistusmuotoja. Tämän seurauksena Linuxin ja OS X: n käyttäjät voivat saada melko toissijaisen kokemuksen tai heitä evättiin jopa käyttämästä mediapalveluita, koska se ei ollut heidän käyttöympäristössään käytettävissä.

Viimeinkin heillä oli taipumus olla hitaita. Jos olisit tietokonetta vajaalla tai vanhemmalla tietokoneella, sinulla ei olisi hyvää kokemusta videon katselusta näillä kehyksillä. Flash oli erityisen pahamaineinen tästä.

4.1 Kuinka HTML5 tekee videosta ja äänestä mahtavaa

HTML5 muutti tämän sallimalla web-kehittäjien sisällyttää videoita ja ääniä verkkosivuilleen vain muutamalla koodirivillä. Se toimii herkku mobiililaitteissa ja toimii kaikissa nykyaikaisissa selaimissa.

Seurauksena ovat suuret yritykset, kuten YouTube, Vimeo ja Netflix, hyödyntämässä HTML5-vallankumousta. Miksi et liitty heihin?

4.2 Kaikkia koodekkeja

Tässä luvussa opit käyttämään HTML5: n tehoa äänen ja videon lisäämiseen verkkosivuillesi.

Ensinnäkin minun on aloitettava huomautuksella. Vaikka voit käyttää HTML5-videota kaikissa nykyaikaisissa selaimissa, se ei toimi samalla tavoin jokaisessa selaimessa. Kunkin selaimen käyttämät koodekit vaihtelevat. Internet Explorerissa voit käyttää MP4-videota. Chrome on hiukan anteliaampi ja antaa sinun käyttää WebM-, MP4- ja Ogg Theora -videoita. Opera on vähän rajoittavampi ja sallii vain Theoran ja WebM-videoiden käytön.

Seurauksena on, että sinun on oltava hieman taitava sen suhteen, kuinka lisäät videon verkkosivullesi. Katsotaanpa kuinka se toimii.

4.3 Aloittaminen videosta

Aluksi sinun on luotava avaamista ja sulkemista

No, kun odotat videosi latautumista, sivustossasi vieraileva henkilö näkee videota koskevan kuvan. Anna tämä vain antamalla videotunnisteillesi "juliste" -attribuutti kuvan arvolla, johon haluat linkittää. Sen pitäisi näyttää tältä.

Seuraava asia, jonka aiomme tehdä, on varalaitteen luominen. Mitä tämä tarkoittaa? Oletetaan siis, että käytät yhtä vanhemmista, vähemmän mahtavista selaimista. Monet näistä vanhemmista selaimista eivät tue HTML5-videoita, eivätkä siksi voi toistaa HTML5-videoita. Haluat jättää heille viestin, joka ilmoittaa heille, että he haluavat päivittää selaimensa ja että he eivät voi katsoa videota, ennen kuin he tekevät niin.

Voit tehdä sen kirjoittamalla viestisi vain videotunnisteisiisi. Mitään muuta ei vaadita. Kun olet tehnyt sen, sinulle jää jonkinlainen koodi, joka näyttää tältä.

Lisäämme nyt videon. Aion testata tätä Google Chromessa, joten aion linkittää MP4-elokuvan. Tätä varten luon Source-tunnisteen ja annan src-määritteen, jolla on sen videon arvo, jonka haluan sisällyttää.

Sivuni on nyt valmis avaamaan selaimessa. Olen linkittänyt elokuvan, joka on todella, todella suuri ja sen seurauksena avautuessa voi nähdä vain julisteen.

4.4 Äänen lisääminen

Ääni voidaan lisätä verkkosivullesi tavalla, joka muistuttaa hyvin kuinka lisäsimme videon sivuillemme.

Ensinnäkin luodaan joitain äänitunnisteita. Nämä äänitunnisteet sisältävät "hallinta" -ominaisuuden. Tämä antaa sivua käyvälle käyttäjälle mahdollisuuden keskeyttää, toistaa taaksepäin ja kelata eteenpäin soitettua ääntä.

Sitten lisäät lähdetunnisteen MP3-tiedostoon, johon haluat linkittää. Sinun ei oikeastaan ​​tarvitse huolehtia kaikesta niin paljon, kun kyse on koodekin yhteensopivuudesta. Viimeisimmillä selaimilla on kyky toistaa MP3-ääntä, vaikka on hyvä tapa sisällyttää myös .ogg- ja .wav-tiedostot - joka tapauksessa.

Viimeiseksi voit luoda varavarauksen vanhemmille selaimille. Tämä tehdään samalla tavalla, jolla loit videollesi varaosan.

Lopputulos näyttää hiukan tältä.

Kun avaat tämän selaimellasi, sen pitäisi näyttää hieman tältä.

4.5 Testaa itsesi

• Mikä on tarkoitus, että juliste on videotunnisteissasi?
• Mitä koodekkeja ei voi käyttää Internet Explorerissa?
• Jos haluaisin kyvyn keskeyttää äänentoisto, minkä ominaisuuden lisääisit äänitunnisteesi?

Lisälukema:

• HTML5 Rocks Video

5. CSS3-muunnelmat ja animaatiot

CSS: ää käytettiin perinteisesti CSS: n käsittelyyn verkkosivun ulkoasu ja suunnittelu 5 vauvan vaihetta CSS: n oppimiseen ja Kick-Ass CSS -oritsijaksi tulemiseenCSS on tärkein muutosverkkosivut, joita viime vuosikymmenen aikana on nähty, ja se tasoitti tietä tyylien ja sisällön erottamiseen. XHTML määrittelee nykyaikaisella tavalla semanttisen rakenteen ... Lue lisää . Tämä on edelleen totta, mutta viimeisimmässä iteraatiossa se on saanut kyvyn käsitellä animaatioita ja elementtien ja kuvien muunnoksia.

Ihmiset ovat tehneet CSS3: lla hämmästyttäviä asioita digitaalisen kellon luomisesta koko Pong-pelin kirjoittamiseen. Joku jopa käytti sitä luodakseen johdantohyvitykset Mad Menille. Se on todella tehokas tekniikka, ja kun se hallitaan, sitä voidaan käyttää lisäämään hämmästyttävä taso toiminnallisuutta verkkosivullesi.

Tässä luvussa aion antaa sinulle lyhyen CSS3: n esittely 5 suosituinta CSS Online -oppimispaikkaa Lue lisää , ja näyttää kuinka lisätä upeita tehosteita sivullesi.

Siirry ensin kohtaan codepen.io ja luo uusi kynä. Aiomme käyttää tätä työtilamme tämän luvun ajan.

Alamme aloittaa yksinkertaisen ja luoda yksinkertaisen kuvanmuunnoksen, joka kiertää kuvaa 3 astetta kiinnitettäessä. Ensinnäkin, luo div-tunniste ja anna sille tunnus. Alla olevassa esimerkissä olen antanut sille muo-tunnuksen.

5.1 CSS-hover-tehosteet

Sisällytä siihen div-osaan valitsemasi kuva. Olen sisällyttänyt kopion MakeUseOf-logosta.

Tämän jälkeen sinun on kirjoitettava joitain tyylitaulukkosääntöjä. Oheisessa esimerkissä olen luonut ylä- ja vasemman reunan, jotta kuvalle jää tilaa. Olen sisällyttänyt myös utelias näköinen tyylitaulukkosääntö, joka alkaa merkinnällä #muo: hover. Mikä tuo on?

Kun liität ': hover' tyylitaulukkosääntöön, olipa kyse sitten elementistä, tunnuksesta tai luokasta, sanot käytännössä, että selain käyttää tätä tyyliä, kun hiiri hallitsee elementtiä. Aika siistiä, eikö niin?

#Muo: hover -säännön sisällä meillä on rivi, joka sanoo '-webkit-transfor: rotate (3deg)'. Kuten olen varma, että olet arvata, tämä käskee selainta kääntämään Div-elementtiä kolme astetta.

On kuitenkin syytä huomata, että tämä tunniste toimii vain Chromessa ja Safarissa. Jos haluat koodisi toimivan Firefoxissa tai Internet Explorer 9: ssä tai uudemmissa, haluat vaihtaa CSS-tiedostosi sisältämään seuraavat rivit.

Nyt, kun viet hiirellä kuvan päälle, se näyttää tältä:

5.2 CSS3: n käyttö kuvien koon muuttamiseen

Joten miksi lopettaa siihen? Tiesitkö, että voit suurentaa tai kutistaa kuvaa myös muuntamismenetelmällä. Muutetaan CSS-tiedostomme sisältämään seuraavat rivit.

Kuten huomaat, olemme nyt sisällyttäneet uuden muuntamissäännön, mutta tällä kertaa me käsketään sen tekemään niin sanottua mittakaavaa. Tämä on todella kaunis tapa suurentaa kuvan kokoa. Se vie kaksi parametria (ne numerot, jotka näet sulkujen välissä), ja ne edustavat määrää, jolla suurennat elementin korkeutta ja leveyttä.

Kuten koodista näet, aion lisätä MakeUseOf div -logon kokoa 50%. Voit testata tämän toimivan siirtämällä hiiren osoittimen päälle. Huomaat, että MakeUseOf-logo on nyt merkittävästi venytetty.

Tämä oli erittäin lempeä johdanto CSS3-muunnoksiin. Huolimatta siitä, että CSS3 on todella uusi, voit nyt nähdä, että voit tehdä sen kanssa paljon erittäin mielenkiintoisia manipulaatioita.

5.3 Testaa itsesi

• Kuinka sovellamme tyyliä elementtiin leijuessa?
• Kuinka kiertää kuvaa CSS3: lla?
• Kuinka skaalaat kuvaa CSS3: lla?
• Mitä tapahtuu, jos siirrät muunnosmenetelmäsi kääntää (50 kuvapistettä, 50 kuvapistettä)?

Lisälukema:

HTML5 Rocks - esittely

6. Vain tarpeeksi Javascript

Jos haluat käyttää skriptiä selaimessa, sinun on käytettävä sitä javascript Mikä on JavaScript ja kuinka se toimii? [Teknologia selitetty] Lue lisää . Valitettavasti siinä ei ole kahta tapaa. Se on a kieli, jolla on paljon faneja 5 Laajaa JavaScript-koodikirjaston vaihtoehtoa kehittäjille Lue lisää , ja monet väärinkäyttäjätkin. Kun kielet menevät, siinä on monia syyliä. On syytä, että kielen merkittävin kirja on nimeltään Javascript: The Good Parts.

On mahdotonta opettaa sinulle Javascriptin käyttöä yhdessä luvussa. Se ei ole tässä tavoite. Tavoitteena on opettaa sinulle tarpeeksi Javascriptiä, jotta ymmärrät seuraavan luvun, joka liittyy Canvas-nimisen tekniikan käyttämiseen piirustusten ja animaatioiden tekemiseen.

6.1 Konsoliin pääsy

Tätä varten käytämme Javascript-konsolia, joka on sisäänrakennettu jokaiseen Google Chromen kopioon. Voit käyttää tätä napsauttamalla hiiren kakkospainikkeella mitä tahansa verkkosivua ja painamalla sitten 'Tarkasta elementti'. Napsauta sitten konsolia. Sinun pitäisi nähdä tämä.

On perinteistä, että ensimmäinen ohjelma, jonka orastava kehittäjä on koskaan kirjoittanut, on 'Hello World' -ohjelma. Tämä on yksinkertainen ohjelma, joka tulostaa lauseen "Hei maailma" eikä paljon muuta. Kirjoita konsoliin konsoli.log (“Hei maailma!”) ;.

6.2 Ensimmäinen ohjelmasi

Joten mitä tarkalleen teimme? Ensinnäkin, me kutsuttiin jotain nimeltään console.log. Tämä on vähän tietokoneeseen sisäänrakennettua koodia, joka tulostaa vain kaiken, mitä käsket. Sitten kiinnitimme siihen joitain suluja ja sisällytimme kaksoislainauksiin 'Hello World'. Tätä kutsutaan 'läpäiseviksi argumenteiksi', ja tyyppiä argumenttia, jota läpäisemme, kutsutaan merkkijonoksi. Aina kun haluat tehdä jotain kirjaimia ja erikoismerkkejä, sinun on yksinkertaisesti käytettävä yksittäisiä lainausmerkkejä. Jos kuitenkin haluat tehdä jotain numeroita käyttämällä, sinun ei yleensä tarvitse käyttää lainausmerkkejä, kuten alla on esitetty.

6.3 JavaScript-muuttujat

Voit siirtää muuttujia myös 'console.log' -sivulle. Muuttujat kuulostavat monimutkaisilta, mutta kaikki ne todella ovat tila, johon sijoittaa paloja tietoja. Nämä ovat usein numeroita tai kirjaimia. Tätä varten ilmoitat muuttujan var-avainsanalla, annat sille nimen ja annat sitten arvon yhtälömerkillä. Joten aion luoda muuttujan nimeltä 'hello' ja annan sille arvon 'Hello World!'. Aion sitten välittää sen console.logille.

Huomaa, kuinka en siirtänyt "hello" console.logiin lainausmerkeillä. Tämä johtuu siitä, että halusin tulostaa konsolille 'hello' sisällön, ei itse 'hello' sisällön.

6.4 Mitä toiminnot tekevät

Se voi olla vähän työläs uudelleen kirjoittaa sama koodipala uudelleen ja uudestaan, joten tästä syystä kirjoitamme toimintoja. Toiminnot ovat helpompia kuin luulet. He ovat vain koodipalasia, joita voimme käyttää uudelleen kirjoittamatta samaa koodia uudelleen. Alla olemme luoneet funktion nimeltä "sup" ja välitämme sille suluilla argumentin, joka sitten kirjataan näytölle. Kutsumme 'sup' lähettämällä konsoliin 'sup (' Hello world! ');'.

6.5 Toimenpiteen toistaminen 'For' -silmukalla

Oletetaan, että halusit tehdä saman toiminnon asetetun määrän kertoja. Tästä syystä me käyttäisimme "for" -silmukkaa. Ne näyttävät aluksi pelottavilta, mutta on niin helppoa tehdä, kun ymmärrät heidät. Aloitat kirjoittamalla 'for ()'.

Näihin suluihin haluamme luoda muuttujan, joka laskee kuinka monta kertaa olemme suorittaneet toiminnon. Joten saamme jotain, joka näyttää tältä "for (var i = 0;)".

Tämän jälkeen haluamme tarkistaa, että en ole täyttänyt ehtoa. Joten tässä tapauksessa haluamme nähdä, että se on alle 10. Joten kirjoitamme puolipisteen jälkeen 'i <10'. Silmukka näyttää nyt seuraavalta: 'for (var i = 0; i <10;).

Jos i on alle 10, haluamme lisätä sen yksitellen ja tehdä sitten jotain. Joten laitamme 'i = i + 1'. Silmukka on melkein valmis: 'for (var i = 0; i <10; i = i + 1) ”. Huomaa, kuinka viimeisessä osassa ei ole puolipistettä.

Sen jälkeen haluamme tehdä toiminnon. Joten viimeisten sulujen jälkeen kirjoitamme joitain kiharanauhoja ja niiden väliin aiomme console.logisoida i-arvon. Tämä luo laskurin, joka laskee jopa yhdeksän.

Kaksi viimeksi mainittua ohjelmointirakennetta, joita tarkastelemme, ovat 'if' -lauseet ja 'while' -silmukat.

6.6 Jos lausunnot

'Jos' -lausunto suorittaa toimenpiteen, jos tietyt kriteerit täyttyvät. Ne muistuttavat rakentamisessa käytettäviä silmukoita ja toimivat seuraavasti. Oletetaan, että sinulla on muuttuja nimeltään ”juustohampurilaiset” ja haluat nähdä, onko sillä arvo ”maukas”. Jos näin on, haluat kirjata näytölle 'yum, cheeseburgers'. Jotta voit kirjoittaa jotain tällaista.

Huomaa, kuinka kirjoitin 'jos (juustohampurilaiset ==' maukkaita ')'. Käytät kaksinkertaista tai kolminkertaista tasa-arvoa tasa-arvon tarkistamiseen ja yhden tasa-arvoa arvon määrittämiseen.

6.7 Silmukoiden aikana

Viimeinkin 'taas' -silmukka suorittaa toiminnon, kun kriteerit täyttyvät. Joten kuvittele, että haluat kirjautua "yum, juustohampurilaiset", kun taas juustohampurilaiset ovat yhtä maukkaita. Voit tehdä sen kirjoittamalla seuraavan.

On syytä huomata, että tämä pääsee ääretön silmukka, ja sinun tulisi välttää tekemästä arvoa, joka ei todennäköisesti muutu. Tämä voi aiheuttaa selaimesi lukitsemisen tai koodisi toimimattomuuden.

Kuten aiemmin mainitsin, tämä oli hyvin lyhyt johdanto Javascriptin ohjelmointirakenteisiin. Sinua kannustetaan lukemaan lisää tästä kiehtovasta, tosin valtavasta aiheesta.

6.8 Testaa itsesi

• Haluan laskea alas 30: stä. Kirjoita 'for' -silmukka, joka tekisi niin.
• Haluan luoda muuttujan nimeltä 'makeuseof' ja antaa sille arvon 'mahtava'. Kuinka se tehdään?
• Haluan luoda toiminnon, joka tulostaa 'MakeUseOf Is Awesome', kun sitä kutsutaan. Kirjoita tämä toiminto.

Lisälukema:

• “Javascript: Hyvät osat” kirjoittanut Douglas Crockford
• MDN Javascript Guide

7. Luova kangas

Canvas on hieno tekniikka, jonka avulla voit piirtää kuvia ja luoda animaatioita joutumatta käyttämään Flashia tai Silverlightia. Ihmiset ovat käyttäneet sitä luomaan omituisia ja ihania asioita, kuten hiustenkuivaajasimulaattorin ja erilaisia ​​videopelejä. Se on upea ja käsittämättömästi suuri tekniikka, tässä opetusohjelmassa aion antaa sinulle lyhyen johdannon siitä.

On syytä huomata, että kangas toimii vain nykyaikaisissa selaimissa. Jos käytät vanhaa versiota IE: stä, Chromesta tai Firefoxista, et ehkä pysty noudattamaan tätä lukua. Jos näin on, sinun kannattaa ladata uusin versio Google Chromesta, joka oli selain, jolle loin tämän oppaan.

7.1 Kankaan käytön aloittaminen

Ensinnäkin sinun on avattava selaimesi ja navigoitava osoitteeseen codepen.io. Luo uusi kynä.

Nyt meidän on julistettava kangasosa. Luo kaksi kankaan avaamista ja sulkemista. Niissä sinun tulisi välittää se kolme ominaisuutta. Nämä ovat piirtoalustan elementin leveys ja korkeus yhdessä sen antaman tunnuksen kanssa. Kuten aiemmin, kun lisäit videota, sinun tulisi sisällyttää varaviesti.

Nyt haluamme kirjoittaa Javascript-koodin, joka vetää jotain näytölle. Aloitamme perustiedot ja luomme yksinkertaisen punaisen neliön.

Aiomme luoda muuttujan (kutsusin sitä demoksi) ja sitten valita kangaselementin ja määrittää se kyseiseen muuttujaan. Voit käyttää tätä asiakirjaa document.getElementByID () ja välittää valitsemasi elementin tunnus.

Komentosarjan toinen rivi luo uuden muuttujan, nimeltään konteksti, ja kutsuu sitä sitten demo.getContext ('2d'). Se kertoi selaimelle, että työskentelemme 2d-kuvan kanssa, ja läpäisi sitten tarvittavat toiminnot, jotka meidän on tarpeen vetääksesi näytölle.

Kolmas ja neljäs rivi ovat ne, jotka tosiasiallisesti piirtävät näytölle. Kolmas rivi täyttää suorakulmion punaisella, kun taas neljäs rivi kutsuu fillRect, joka sijoittaa sen ja määrittelee sen pituuden ja leveyden.

Se ei kuitenkaan ole vaikuttavaa. Tehdään jotain hiukan edistyneempää ja luodaan Javascriptin ja Canvasin taikuutta luomalla MakeUseOf aivan uusi logo.

7.2 Muodot ja teksti

Poistetaan neljäs rivimme ja korvataan se sellaisella, joka sijoittaa suorakulmion vasempaan yläkulmaan ja venyttää sen kankaan pituudelle.

Kaksi ensimmäistä argumenttia määrittelevät mihin haluamme sijoittaa muodon x- ja y-akselit. Asetetaan nämä kaksi arvoon "0" nyt. Kolmas argumentti viittaa muodon leveyteen. Asetetaan arvoksi '200' ja jätetään sitten neljäs argumentti arvoon '50'. Sinulla pitäisi nyt olla jotain, joka näyttää vähän tältä.

Tämä on hieno alku, mutta siinä ei mainita MakeUseOfia ollenkaan. Joten lisäämme tekstiä. Luodaan muuttuja, joka sisältää 'makeuseof', ja kutsumme muuttujaa 'MakeUseOf'.

Haluamme sitten luoda uuden kontekstimuuttujan. Soita tälle "konteksti2" ja varmista, että se on 2d. Juuri tätä me käytämme tekstin kirjoittamiseen.

Haluamme, että tekstini on väriltään sininen ja että sen päällä on punainen neliö. Joten, aivan kuten ennenkin, aiomme antaa sille sininen täyttötyyli. Nyt valitsemme tekstin ominaisuudet. Haluamme, että sen koko on 20 kuvapistettä, lihavoitu ja muotoiltu käyttäen Arial-kirjasinta. Kutsumme fonttia kontekstiin2 ja annamme sille arvon “lihavoitu 20px arial”.

Koska haluamme, että tämä teksti on päällekkäin edellisen punaisen ruudun kanssa, meidän on kutsuttava 'textBaseLine' kontekstiin2 ja annettava sille arvon ylin arvo. Kun se on valmis, kutsumme 'fillText' kontekstiin2 ja välitämme muuttujan, joka sisältää tekstin ja x- ja y-koordinaatit, joihin aiomme sijoittaa tekstin. Koodimme lopputulos on jotain tällaista.

Koodin tuottama kuva näyttää tältä.

7.3 Sana kankaalle

Vaikka tämä oli uskomattoman perusohje kankaalle, sinun pitäisi ymmärtää, että se on myös uskomattoman suuri tekniikka ja uskomattoman tehokas käynnistystekniikka. Tämä opas oli vain johdanto grafiikan tekemiseen käyttämällä tätä uutta tekniikkaa.

7.4 Testaa itsesi

• Lisää seuraava iskulause luomasi kuvaan: “Paras tekninen sivusto!”
• Luo 'for' -silmukka, joka kestää kymmenen toistoa. Katso, voitko siirtää piirrosta kankaalle, pikseli kerrallaan.
• Kääri piirros funktioon. Mitä tapahtuu, jos et soita siihen?

Lisälukema:

• HTML5 Rocks - Integrointi kangas Web-sovelluksiin.
• Treehouse - Kuinka piirtää kankaalla

8. Missä seuraavaksi?

Kiitos, että luit uskomattoman lyhyen oppaan HTML5: n uusista tekniikoista. On kiistatonta, että HTML5 on tulevaisuuden tekniikka. Se on hyväksytty suurimmassa osassa tekniikkaa, koska se on helppo kirjoittaa ja tehokas mittaamattomasti. Ihmiset tekevät uskomattomia asioita sen kanssa koko ajan, ja en ole epäilemättä, että tulevaisuudessa olet yksi niistä ihmisistä. Minulla on kunnia olla mukana matkalla HTML5: n villiin ja upeaan maailmaan.

Pyydän sinua jatkamaan oppimista. Jatka koodausta. Jatka tason nousua ja parantamista, ja et koskaan käytä lainkaan tekniikoita, jotka on otettu käyttöön tässä lyhyessä oppaassa, luodaksesi ihania tuotteita.