Aloita HTML5

Aloita HTML5
Tämä opas on ladattavissa ilmaisena PDF -tiedostona. Lataa tämä tiedosto nyt . Kopioi ja jaa tämä ystävillesi ja perheellesi.

Sisällysluettelo

§1. Esittely





§2 - Semanttinen merkintä



§3 - Lomakkeet





§4 - Keskitaso

§5 – CSS3 Muunnokset ja animaatiot



§6 - Vain tarpeeksi Javascriptiä

§7 - Luova kangas



§8 - Mihin seuraavaksi?

1. Esittely

Olet kuullut siitä: HTML5. Kaikki käyttävät sitä. Sitä julistetaan Internetin pelastajaksi, minkä ansiosta ihmiset voivat luoda rikkaita ja kiinnostavia verkkosivuja turvautumatta Flashin ja Shockwaven käyttöön.



Mutta mitä se oikeastaan ​​on?

No, siihen ei ole helppo vastata. Tässä HTML5 -opetusohjelmassa yritämme antaa joitain vastauksia. HTML5: tä käytetään kuvaamaan todella erilaisia ​​asioita. Se on standardi verkkosivujen kirjoittamiselle. Se on kokoelma sovellusliittymiä. Se on uusi tapa lisätä interaktiivisuutta verkkosivuille.

HTML5 on kaikki tämä ja paljon muuta. Mistä tämä kirja sitten kertoo?

Tässä HTML5 -opetusohjelmassa aion olettaa, että olet jossain vaiheessa koskettanut HTML: ää ja CSS: ää. Ehkä olet luonut oman Wordpress -teemasi tai muokannut MySpace -asettelua. Olet ehkä lukenut MakeUseOfin oman XHTML -oppaan. Tarkoituksena on, että oletan, että tunnet tiensä verkkosivulla ja että tässä oppaassa käsitellyt asiat eivät ole sinulle liian vieraita.

Tämän oppaan tarkoituksena ei ole opettaa sinulle HTML5: n kokonaisuutta. Se olisi täysin tämän kirjan soveltamisalan ulkopuolella. Tavoitteena on tarjota lempeä johdanto näihin hämmästyttäviin uusiin verkkoteknologioihin ja näyttää sinulle hienoja tapoja sisällyttää ne verkkosivustoihisi.

Miksi haluat oppia HTML5: n?

Se on oikeudenmukainen kysymys. Onko älypuhelimien ja sovellusten maailmassa todella tärkeää oppia ohjelmoimaan verkkosivuja?

Usko tai älä, mutta on todella tavallista kirjoittaa älypuhelinsovelluksia HTML5 -tekniikoilla. Viime aikoihin asti Androidin Facebook -sovellus on kirjoitettu HTML5: llä, CSS: llä ja Javascriptilla.

Blackberry on toinen suuri yritys, joka on erittäin kiinnostunut HTML5: stä. Tämä on ilmeistä heidän mobiilikäyttöjärjestelmänsä Blackberry OS 10: n viimeisimmässä iteraatiossa, jossa he kannustavat aktiivisesti kehittäjiä kehittämään sovelluksia puhelimilleen verkkoteknologioiden avulla.

Uudet Firefox OS -älypuhelimet toimivat myös kokonaan HTML5 -sovelluksilla. Käytännön HTML5 -osaaminen on välttämätöntä nykypäivän älypuhelinilmastoissa.

Lisäksi HTML5: n oppiminen on hyväksi urallesi. Älä usko minua? Indeed.comin mukaan , HTML5-kehittäjän keskimääräinen vuosipalkka on silmiinpistävä 89 000 dollaria. Yhä useammat yritykset muuttavat verkkosivustojaan käyttämään HTML5 -tekniikkaa, ja HTML5 -pinon tuntevat kehittäjät ovat halutuimpia - nyt enemmän kuin koskaan.

1.1 Edellytykset

Tässä HTML5 -opetusohjelmassa oletetaan pari asiaa. Ensinnäkin se edellyttää, että tiedät, miten verkko toimii, ja että osaat luoda perusverkkosivun. Sinun pitäisi pystyä yhdistämään joitakin HTML -elementtejä yhteen ja pystymään esittämään joitain tietoja verkkoselaimessa. Näkeminen ja

tunnisteet eivät ole liian pelottavia, etkä pelkää käsiesi likaantumista jossakin lähdekoodissa.

Toiseksi tässä oppaassa oletetaan, että tiedät, mikä CSS on ja miten se toimii. Emme odota sinun olevan suunnittelun neroja, eikä sinun odoteta tietävän koko CSS -spesifikaatiota. Sinun pitäisi kuitenkin pystyä soveltamaan tyyliä verkkosivun elementtiin, pystymään linkittämään CSS -tiedostoon ja tuntemaan tunnuksen ja luokan väliset erot ja miten muotoilua sovelletaan kaikkiin.

Jos raapit päätäsi yllä, älä huoli. Yksi parhaista asioista HTML: ssä ja CSS: ssä on, että se on todella, todella helppoa. Itse asiassa MakeUseOfilla on uskomaton XHTML -opas, joka nopeuttaa sinua todella nopeasti.

Kun olet lukenut tämän oppaan, saatat haluta katsoa myös seuraavia artikkeleita:

Tarvitset myös nykyaikaisen tekstieditorin ja selaimen. Mikä tahansa Internet Explorer -versio, joka on vanhempi kuin IE 9, ja jotkut Safarin, Chromen ja Firefoxin vanhemmat versiot kamppailevat monien HTML5: n ominaisuuksien kanssa ja voivat estää sinua noudattamasta tätä opasta.

Tämän seurauksena sinua kehotetaan lataamaan moderni selain. Suosittelen Google Chromea, ja käytän sitä jokaisessa esimerkissä.

Tämän lisäksi tarvitset vain halua oppia. Ja tekstieditori.

1.2 Tekstieditorit verkkokehitykseen

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

Ensinnäkin se ei ole tekstinkäsittelyohjelma. Ohjelmat, kuten Microsoft Word ja Applen sivut, ovat täysin sopimattomia verkkokehitykseen. Tämä johtuu siitä, että ne liittävät HTML-, CSS- ja Javascript -tiedostoihisi lisätietoja, jotka vaikeuttavat verkkoselaimesi lukemista.

Tekstieditori ampuu merkkejä tekstitiedostoon, eikä paljon muuta. Tämän avulla voit luoda tiedostoja, joissa ei ole ylimääräistä muotoilua ja jotka voidaan tallentaa haluamallasi laajennuksella.

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

Macissa tilanne on hieman erilainen. OS X: n mukana tulee neljä erilaista tekstieditoria. Näitä kutsutaan Vim, Emacs, Pico ja Nano. Toisin kuin Notepad, ne kaikki kuitenkin toimivat päätelaitteessa.

Tämä on hieman pelottavaa ihmisille, jotka ovat uusia verkkokehittäjiä, eikä heidän pitäisi käyttää niitä, jotka ovat uusia ohjelmistokehittäjiä. Emme käytä niitä tässä oppaassa. Kuitenkin, kun saat hieman luottavaisempia ohjelmistoja ja verkkokehitystä, kannattaa ehdottomasti katsoa Vim ja Emacs. Molemmat ovat tehokkaita tekstieditoria, ja hallittu voi säästää hirvittävän paljon aikaa.

Linuxissa oletustekstieditori vaihtelee jakeluittain. Ubuntussa se on todennäköisesti Gedit, joka on melko miellyttävä tekstieditori, joka ei ole liian erilainen kuin Notepad.

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

Ensimmäinen on Sublime Text 2. En voi rehellisesti suositella tätä tarpeeksi. Se sisältää kaikki asiat, jotka helpottavat aloittavan kehittäjän elämää. Ensinnäkin se helpottaa koodisi lukemista värittämällä tiettyjä osia. Toiseksi sen avulla voit helposti vaihtaa tiedostojen välillä ja hallita kokonaisia ​​tiedostoprojekteja. Tämä on ihanteellinen tapa vaihtaa tiedostojen välillä ja muokata useita koodibittejä lennossa.

Kolmas on Google Chromen sisäänrakennettu Javascript -konsoli. Tämän avulla voimme kirjoittaa Javascriptin ja nähdä, että se suoritetaan 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 -tiedostoja selaimessa, ja se on ilmainen. Sen avulla voit myös nähdä muutokset välittömästi.

2. Semanttinen merkintä

Tässä luvussa opit semanttisesta merkinnästä ja koodin järjestämisestä sen sisällön perusteella.

Viime aikoihin asti HTML -koodi on yleensä järjestetty tunnisteilla. Niiden avulla voit luoda elementtiryhmän ja soveltaa sitten tyyliä niihin.

Tämä toimi, mutta parantamisen varaa oli. Tunnisteiden ongelma oli, että se ei ollut semanttinen. Div ei oikeastaan ​​tarkoita mitään.

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

Joten miten ne toimivat? Harkitse seuraavaa koodia.

Tässä koodissa meillä on navigointipalkki, otsikko ja luettelo. Tämä ei ole kovin erilainen kuin useimmat sivustot, joilla olet todennäköisesti menossa, kun ajattelet sitä.

miten voit käyttää puhelinta etänä

Katsotaanpa MakeUseOf -artikkelia. Huomaat, että sivun osa on varattu kokonaan muihin artikkeleihin siirtymiseen. Huomaat myös, että sivun toinen osa sisältää sanat, jotka muodostavat artikkelin. Sivun yläosassa näet otsikon, joka sisältää MakeUseOf -logon ja joitain muita linkkejä.

Kun ajattelet sitä, monet sivustot noudattavat näitä käytäntöjä. Useimmilla sivustoilla on osa, joka on varattu navigointia varten. Niillä on yleensä sisältö. Heillä on todennäköisesti otsikko.

Semanttiset tagit ovat tunnisteita, joiden avulla voit määrittää verkkosivuston osia, jotka löytyvät useimmilta verkkosivustoilta. Ne eivät lisää mitään sivulle, mutta antavat sinun ryhmitellä tunnisteita niiden sisällön perusteella ja käyttää muotoilua näihin ryhmiin.

Muista siis se koodi, joka meillä oli ennen? Katsotaanpa sitä lisäämällä joitakin semanttisia merkintöjä.

Kuten huomaat, koodi on paljon helpompi lukea. Tiedät, mitkä osat ovat, eikä ole epäselvyyttä. Tämä on tärkeää, koska se helpottaa hyvän ja puhtaan koodin kirjoittamista. Jos päätät koskaan ryhtyä ammattimaiseksi web -suunnittelijaksi, tästä tulee ensiarvoisen tärkeää - et koskaan tiedä, kuka lukee tekemäsi teoksen.

Katsotaanpa siis joitain semanttisia merkintätageja.

2.1 Osa

Osio on todella hyödyllinen tunniste. Sitä käytetään keräämään valtava määrä tietoa ja sisältöä, jotka on merkitty otsikolla tai otsikolla. Ajattele tätä kuin kirjan lukua. Luvulla on otsikko, ja se voi sisältää myös kuvia, kaavioita, kaavioita ja sanoja. Osion tunnistetta käytettäisiin kaiken tämän sisältämiseksi.

2.2 Artikkeli

Artikkelitagia käytetään miltä se kuulostaa; Sisältää esimerkiksi blogitekstin tai uutisen. Tämän sisällön pitäisi voida irrottaa muusta blogista ja silti olla johdonmukainen.

2.3 sivuun

Tämä tagi on varattu sisällölle, joka liittyy, mutta ei ole kiinteä osa verkkosivua. Tämä voi olla joukko tosiasioita, jotka liittyvät uutiseen tai blogin käyttäjän elämäkertaan.

2.4 Otsikko

Monilla verkkosivuilla on sivun yläosassa palkki, joka sisältää logon, joitakin sivustoon liittyviä tietoja ja ehkä joitain linkkejä. Semanttisessa merkinnässä käytät otsikkotunnistetta kaiken tämän sisällyttämiseen.

2.5 Nav

Tämä elementti on varattu verkkosivustosi navigointiosalle. Tämä sisältää linkkejä muille verkkosivustoille tai verkkosivuston muille sivuille. MakeUseOf -kontekstissa tämä voi olla sivun osa, joka on otsikon alapuolella.

Tämä tagi on varattu sivun alareunaan. Täällä voit lisätä yhteystietoja, tekijänoikeustietoja, kartan tai joitain linkkejä 'minusta' -sivullesi.

2.7 Testaa itsesi

  • Mikä on semanttinen merkintä ja mihin sitä käytetään?
  • Olen luomassa verkkosivua ja haluan käyttää semanttista tagia sisältämään elämäkerran minusta. Kumpaa käytän?

3. Lomakkeet

Jos olet koskaan tehnyt hieman web -suunnittelua, tiedät luultavasti kuinka luoda yksinkertainen lomake HTML -muodossa. Jos olet todella taitava, tiedät todennäköisesti, miten voit ottaa lomakkeeltasi saamasi tiedot ja miten voit tehdä jotain sen kanssa, esimerkiksi laittaa ne tietokantaan.

Lomakkeet ovat valtavan tärkeitä. Ne ovat perusta useimmille asioille, joita teemme Internetissä. Aina kun luot tilapäivityksen suosikki sosiaaliseen verkostoosi, ostat jotain Amazonilta tai lähetät sähköpostia, olet todennäköisesti käyttänyt HTML -lomaketta.

Et luultavasti tiennyt, että tapa, jolla luomme lomakkeita, on muuttunut radikaalisti HTML5: ssä. Se on myös huomattavasti parempi. Tässä luvussa tarkastelemme joitain hienoja asioita, joita voit nyt tehdä, yksinkertaisella vanhalla merkinnällä.

Joten mikä on niin hienoa uudessa tavassa, jolla voimme kirjoittaa lomakkeita HTML5 -muotoon? Ensinnäkin voit varmistaa, että jotkin kentät on täytettävä lähettämistä varten, vain muuttamalla itse lomakkeen merkintää. Lisäksi sinun ei enää tarvitse kirjoittaa vuoria JavaScriptiä tai PHP: tä tehdäksesi tämän. Se on vähäpätöisen 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 voivat lähettää todellisia sähköpostiosoitteita? Voit tehdä sen vain käyttämällä HTML5: tä. Se on todella uskomattoman voimakas.

Kolmanneksi voit parantaa lomakkeiden ulkonäköä antamalla tietyille kentille paikkamerkin. Tämä tekee niistä huomattavasti intuitiivisempia, koska voit näyttää käyttäjillesi esimerkin siitä, mitä odotat lomakkeelta.

3.1 Lomakkeen parantaminen

Katsotaanpa siis lomaketta ja katsotaan, kuinka voimme parantaa sitä.

Tämä lomake on melko yksinkertainen. Se sisältää nimen, sähköpostin ja suosikkivärin, ja antaa sitten käyttäjän lähettää sen. Se ei vahvista, mitä tietoja siihen sijoitetaan, eikä mikään estä käyttäjiä lähettämästä tätä lomaketta tyhjillä kentillä. Muutetaan se kaikki.

Joten ensimmäinen asia, jonka aiomme tehdä, on varmistaa, että sähköpostikenttä ottaa vain sähköpostin. Tämä oli todellakin melko vaikea tehtävä, koska jouduit luomaan kaikenlaista salaperäistä Regex -koodia. No, ei enää. Sinun tarvitsee vain muuttaa syötteen tyyppi tekstistä tekstiksi sähköpostiksi. Kun yrität lähettää lomakkeen hölynpölyä, se valittaa ja vaatii, että lähetät sähköpostin.

3.2 Tulotyypit ja -mallit

Voit käyttää muita syöttötyyppejä. Näitä ovat puhelinnumerot, verkko -osoitteet, hakulomakkeet ja jopa värinvalitsimet! Koska HTML5 kehittyy jatkuvasti, on selvää, että pian voimme määritellä lisää syöttötyyppejä lähitulevaisuudessa.

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

Haluamme myös tarjota esimerkin alalla toimivasta sähköpostista, joten käyttäjällä ei ole epäselvyyttä siitä, mitä hänen on lähetettävä. Se on todella helppo tehdä. Luo vain uusi paikkamerkki -attribuutti esimerkkisähköpostiosoitteella.

Varmistamme, että suosikkiväri -kenttämme on pakollinen. Kirjoita sähköpostin syöttötunnisteen viimeiseen kulmasulkeeseen (>) vain 'pakollinen'. Se siitä. Nyt kun yrität lähettää lomakkeen ilman arvoa, se antaa virheilmoituksen.

Todella uskomaton asia näissä virheilmoituksissa on, että käyttäjän ei tarvitse kirjoittaa niitä tai kirjoittaa koodia niiden luomiseksi. Vaihdat kentän vain pakolliseksi, ja se vain toimii. Näin ollen on mahdollista muokata niitä, jos haluat.

Tämä oli uskomattoman lyhyt johdanto HTML5 -lomakkeiden voimaan. Jos haluat lukea lisää, suosittelen tutustumaan näihin linkkeihin.

Lue lisää:

  • CSS -temput - Kirjoitetaan semanttinen merkintä
  • HTML5 Doctor - Puhutaan semantiikasta

3.3 Testaa itsesi

Sinulla on syntymäpäiväsi ensi viikolla ja haluat luoda rekisteröintilomakkeen, jotta tiedät kuinka paljon kakkua sinun on luotava. Avaa tekstieditori ja luo lomake, jossa on seuraavat kentät.

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

Varmista, että nimen, sähköpostiosoitteen ja puhelinnumeron kentät ovat pakollisia ja että Sähköposti- ja Puhelinnumero -kenttiin on määritetty sähköposti- ja tel -syöttötyypit. Luo allergiakentälle paikkamerkki arvolla 'siitepöly, munat, quiche'.

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

4. Keskimääräinen

Aiemmin 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äkään mikään näistä kehyksistä ei toiminut niin hyvin mobiililaitteissa. He eivät vain olleet valmiita älypuhelimien ja tablettien nykyaikaiseen maailmaan.

tietokoneen musta näyttö käynnistyksen yhteydessä

Lisäksi ne olivat omaa muotoaan. Tämän seurauksena Linux- ja OS X -käyttäjät voivat saada melko toisen luokan kokemuksen tai jopa estää heitä käyttämästä mediapalveluja, koska se ei ollut saatavilla heidän alustalleen.

Lopulta heillä oli taipumus olla hitaita. Jos käytät heikkoa tai vanhempaa tietokonetta, sinulla ei ole hyviä kokemuksia videon katsomisesta näiden kehysten avulla. Flash oli erityisen tunnettu tästä.

4.1 Kuinka HTML5 tekee videosta ja äänestä mahtavaa

HTML5 muutti tämän antamalla verkkokehittäjien sisällyttää videoita ja ääntä verkkosivuilleen vain muutamalla koodirivillä. Se toimii herkullisesti mobiililaitteilla ja toimii kaikilla nykyaikaisilla selaimilla.

Tämän seurauksena suuret yritykset, kuten YouTube, Vimeo ja Netflix, hyödyntävät HTML5 -vallankumousta. Mikset liity heihin?

4.2 Kaikki koodekkeista

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

Ensinnäkin minun on aloitettava varoituksella. Vaikka voit käyttää HTML5 -videota kaikissa nykyaikaisissa selaimissa, se ei toimi samalla tavalla kaikissa selaimissa. Kunkin selaimen käyttämät koodekit vaihtelevat. Internet Explorerissa voit käyttää vain MP4 -videota. Chrome on hieman anteliaampi ja mahdollistaa WebM-, MP4- ja Ogg Theora -videon käytön. Opera on hieman rajoittavampi ja sallii vain Theoran ja WebM -videon käytön.

Tämän seurauksena sinun on oltava hieman taitava videon lisäämisessä verkkosivullesi. Katsotaan siis, miten se toimii.

4.3 Aloittaminen videolla

Aluksi sinun on luotava avaus- ja sulkutunnisteita. Täällä voit linkittää videotiedostoihisi. Mutta ensin haluat asettaa julisteen. Mitä tuo tarkoittaa?

No, kun odotat videosi lataamista, sivustollasi vieraileva henkilö voi nähdä videoon liittyvän kuvan. Voit tehdä tämän antamalla videotunnisteillesi 'juliste' -attribuutin, jonka arvo on kuva, johon haluat linkittää. Sen pitäisi näyttää tältä.

Seuraava asia, jonka aiomme tehdä, on luoda varaosa. Mitä tämä tarkoittaa? Oletetaan siis, että käytät jotakin vanhemmista, vähemmän mahtavista selaimista. Monet näistä vanhemmista selaimista eivät tue HTML5 -videota, eivätkä siksi voi toistaa HTML5 -videota. Haluat jättää heille viestin, jossa kerrotaan, että he haluavat päivittää selaimensa ja että he eivät voi katsella videotasi ennen kuin he tekevät niin.

Voit tehdä tämän kirjoittamalla viestisi videotunnisteidesi sisään. Mitään muuta ei vaadita. Kun olet tehnyt sen, sinulle jää koodi, joka näyttää tältä.

Lisätään nyt video. Aion testata tätä Google Chromella, joten aion linkittää MP4 -elokuvaan. Tätä varten luon lähdetunnisteen ja annan sille src -määritteen, jolla on sisällytettävän videon arvo.

Sivuni on nyt valmis avattavaksi selaimessani. Olen linkittänyt elokuvan, joka on todella, todella suuri ja sen seurauksena avattaessa voi nähdä vain julisteen.

4.4 Äänen lisääminen

Ääni voidaan lisätä verkkosivullesi tavalla, joka muistuttaa hyvin siitä, miten lisäsimme videon sivullemme.

Ensinnäkin luodaan äänitunnisteita. Nämä äänitunnisteet sisältävät 'control' -attribuutin. Tämä antaa sivulla vierailevalle käyttäjälle mahdollisuuden keskeyttää, toistaa taaksepäin ja kelata toistettavaa ääntä eteenpäin.

Lisää sitten lähdetunniste MP3 -tiedostoon, johon haluat linkittää. Sinun ei todellakaan tarvitse huolehtia niin paljon koodekkiyhteensopivuudesta. Useimmat viimeisimmät verkkoselaimet pystyvät toistamaan MP3 -ääntä, vaikka on hyvä käytäntö sisällyttää myös .ogg- ja .wav -tiedosto - joka tapauksessa.

Lopuksi voit luoda varmuuskopion vanhemmille selaimille. Tämä tehdään samalla tavalla, jolla loit varavideon videollesi.

Lopputulos näyttää vähän tältä.

Kun avaat tämän verkkoselaimessasi, sen pitäisi näyttää vähän tältä.

4.5 Testaa itsesi

  • Mikä tarkoitus on juliste videotunnisteissasi?
  • Mitä koodekkeja et voi käyttää Internet Explorerissa?
  • Jos haluaisin mahdollisuuden keskeyttää jonkin äänen, minkä attribuutin lisäisit äänitunnisteeseesi?

Lue lisää:

5. CSS3 -muunnokset ja -animaatiot

CSS: ää käytettiin perinteisesti verkkosivun ulkoasun ja suunnittelun käsittelyyn. Tämä on edelleen totta, mutta viimeisimmässä iteraatiossa se on saanut kyvyn käsitellä animaatioita ja elementtien ja kuvien muunnoksia.

Ihmiset ovat tehneet hämmästyttäviä asioita CSS3: n kanssa digitaalisen kellon luomisesta täydellisen Pong -pelin kirjoittamiseen. Joku käytti sitä jopa luodakseen Mad Menin johdantokappaleet uudelleen. Se on todella tehokas tekniikka, ja kun se on hallittu, sitä voidaan käyttää hämmästyttävän toimivan tason lisäämiseen verkkosivullesi.

Tässä luvussa aion esitellä sinulle lyhyen esittelyn CSS3: sta ja näyttää kuinka voit lisätä sivullesi hämmästyttäviä tehosteita.

Siirry ensin osoitteeseen codepen.io ja luo uusi kynä. Käytämme tätä työtilamme tämän luvun ajan.

Aloitamme yksinkertaisesti ja luomme yksinkertaisen kuvanmuunnoksen, joka kääntää kuvan 3 astetta, kun se asetetaan paikalleen. Luo ensin div -tunniste ja anna sille tunnus. Alla olevassa esimerkissä olen antanut sille tunnuksen 'muo'.

5.1 CSS -leijailutehosteet

Sisällytä siihen div, valitsemasi kuva. Olen lisännyt kopion MakeUseOf -logosta.

Sinun on sitten kirjoitettava joitain tyylitaulukon sääntöjä. Alla olevassa esimerkissä olen luonut ylä- ja vasemman reunan, jotta kuva saa tilaa. Olen lisännyt myös utelias tyylitaulukon säännön, joka alkaa sanalla #muo: hover. Mikä tuo on?

Kun liität tyylitaulukkosääntöön ': hover', olipa se sitten elementti, tunnus tai luokka, kehotat tehokkaasti selainta käyttämään tätä muotoilua, kun hiiri ohjaa elementtiä. Aika siistiä, eikö?

#Muo: hover-säännön sisällä on rivi, joka sanoo '-webkit-transform: rotate (3deg)'. Kuten olet varmasti arvannut, 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ä ja uudemmissa versioissa, haluat muuttaa CSS -tiedostosi sisältämään seuraavat rivit.

Kun viet hiiren kuvan päälle, se näyttää tältä:

5.2 CSS3: n käyttäminen kuvien koon muuttamiseen

Joten miksi pysähtyä siihen? Tiesitkö, että voit myös käyttää 'muunnos' -menetelmää suurentaaksesi tai pienentääksesi kuvaa. Muutetaan CSS -tiedostomme sisältämään seuraavat rivit.

Kuten näette, olemme nyt sisällyttäneet uuden muuntosäännön, mutta tällä kertaa kehotamme sitä tekemään jotain, jota kutsutaan 'mittakaavaksi'. Tämä on todella kaunis tapa lisätä kuvan kokoa. Se vaatii kaksi parametria (ne numerot, jotka näet näiden sulkeiden välissä), ja ne edustavat määrää, jolla korotat elementin korkeutta ja leveyttä.

Kuten koodista näkyy, aion lisätä MakeUseOf div -logon kokoa 50%. Voit testata tämän toiminnan viemällä hiiren sen päälle. Huomaat, että nyt MakeUseOf -logo on nyt huomattavasti 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 avulla monia erittäin mielenkiintoisia manipulaatioita.

5.3 Testaa itsesi

  • Kuinka käytämme tyyliä elementtiin, kun se liikkuu?
  • Kuinka kiertää kuvaa CSS3: lla?
  • Miten skaalaat kuvan CSS3: lla?
  • Mitä tapahtuu, jos välität muuntomenetelmäsi 'kääntää (50 pikseliä, 50 kuvapistettä)'?

Lue lisää:

HTML5 Rocks - Esitys

6. Just Enough Javascript

Jos haluat käyttää skriptiä verkkoselaimessasi, sinun on käytettävä Javascriptiä. Valitettavasti siihen ei ole kahta tapaa. Se on kieli, jolla on paljon faneja ja myös paljon vastustajia. Kielten mukaan sillä on monia syyliä. Kielestä merkittävin kirja on nimeltään 'Javascript: The Good Parts'.

On mahdotonta opettaa sinulle Javascriptin käyttöä yhdessä luvussa. Se ei ole tarkoitus tässä. Tavoitteena on opettaa sinulle tarpeeksi Javascriptiä, jotta voit ymmärtää seuraavan luvun, joka koskee Canvas -tekniikan käyttöä piirustusten ja animaatioiden tekemiseen.

6.1 Konsolin käyttö

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

On perinteistä, että ensimmäinen ohjelma, jonka kuka tahansa kehittyvä kehittäjä koskaan kirjoittaa, on 'Hello World' -ohjelma. Tämä on yksinkertainen ohjelma, joka tulostaa lauseen 'Hello World', eikä paljon muuta. Kirjoita konsoliin 'console.log (' Hei maailma! ') ;.

6.2 Ensimmäinen ohjelma

Joten mitä me oikein teimme? Ensinnäkin kutsuimme jotain nimeltä 'console.log'. Tämä on vähän koodia, joka on sisäänrakennettu tietokoneeseen ja joka tulostaa vain sen, mitä kerrot. Liitimme siihen sitten joitakin sulkeita ja lisäsimme lainausmerkkeihin 'Hello World'. Tätä kutsutaan 'argumenttien läpäisemiseksi', ja käyttämämme argumentin tyyppiä kutsutaan merkkijonoksi. Aina kun haluat tehdä jotain, joka sisältää kirjaimia ja erikoismerkkejä, sinun on yksinkertaisesti käytettävä yksittäisiä lainausmerkkejä. Jos kuitenkin haluat tehdä mitään numeroiden avulla, sinun ei yleensä tarvitse käyttää lainausmerkkejä, kuten alla.

6.3 JavaScriptin muuttujat

Voit myös välittää muuttujia myös 'console.log'. Muuttujat kuulostavat monimutkaisilta, mutta kaikki ne todella ovat tilaa tietojen paloille. Nämä ovat usein numeroita tai kirjaimia. Voit tehdä tämän ilmoittamalla muuttujan käyttämällä var -avainsanaa, antamalla sille nimen ja antamalla sille arvo yhtäsuuruusmerkillä. Joten aion luoda muuttujan nimeltä 'hei' ja antaa sille sitten arvon 'Hei maailma!'. Sitten siirrän sen console.logille.

Huomaa, kuinka en välittänyt hei console.logille lainausmerkkejä käyttämällä. Tämä johtuu siitä, että halusin tulostaa konsolille 'hei' -sisällön eikä 'hei' itse.

6.4 Toiminnot

Se voi olla hieman tylsiä kirjoittaa uudelleen saman koodinpalan uudestaan ​​ja uudestaan, joten tästä syystä kirjoitamme funktioita. Toiminnot ovat helpompia kuin luulet. Ne ovat vain koodipaloja, joita voimme käyttää uudelleen kirjoittamatta samaa koodia uudelleen. Alla olemme luoneet funktion nimeltä 'sup' ja välitämme sille argumentin suluilla, joka kirjataan sitten näyttöön. Kutsumme 'sup' lähettämällä konsoliin 'sup (' Hei maailma! ');'.

6.5 Toimenpiteen toistaminen silmukalla 'For'

Oletetaan, että halusit tehdä saman toiminnon tietyn määrän kertoja. Tästä syystä käytämme 'for' -silmukkaa. Ne näyttävät aluksi pelottavilta, mutta ne on niin helppo tehdä, kun ymmärrät ne. Aloitat kirjoittamalla 'for ()'.

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

Sitten haluamme tarkistaa, että en ole täyttänyt ehtoa. Joten tässä tapauksessa haluamme nähdä, että se on alle 10. Joten puolipisteen jälkeen kirjoitamme 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

Jos olen alle 10, haluamme lisätä sen yksi kerrallaan ja tehdä sitten jotain. Laitetaan siis 'i = i + 1'. Silmukka on melkein valmis: 'for (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

Sen jälkeen haluamme tehdä toimenpiteen. Joten viimeisten sulkujen jälkeen kirjoitamme joitain kiharaita aaltosulkeita ja niiden väliin aiomme konsoloitua. Log i: n arvo. Tämä luo laskurin, joka laskee jopa yhdeksän.

Kaksi viimeistä ohjelmointirakennetta, joita aiomme tarkastella, ovat 'if' -lausekkeet ja 'while' -silmukat.

6.6 Jos lausunnot

Jos -lause suorittaa toiminnon, jos tietyt kriteerit täyttyvät. Ne ovat samanlaisia ​​kuin 'for' -silmukoita rakentamisessa ja toimivat seuraavasti. Oletetaan, että sinulla on muuttuja nimeltä 'juustohampurilaiset' ja haluat nähdä, onko sen arvo 'maukasta'. Jos näin on, haluat kirjata 'yum, cheeseburgers' ruudulle. Tätä varten kirjoitat jotain tällaista.

Huomaa, kuinka kirjoitin 'jos (juustohampurilaiset ==' maukasta ')'. Käytät kaksois- tai kolmoisarvoa tasa -arvon tarkistamiseen ja yksi yhtäläisyys arvon määrittämiseen.

6.7 Silmukoiden aikana

Lopuksi 'while' -silmukka suorittaa toiminnon, kun ehdot täyttyvät. Joten kuvittele, että haluat kirjautua 'yum, juustohampurilaiset', kun taas juustohampurilaiset ovat yhtä maukkaita. Voit tehdä tämän kirjoittamalla seuraavan.

On syytä huomata, että tämä johtaisi äärettömään silmukkaan, ja sinun tulisi välttää tekemästä toimintoa arvolle, joka ei todennäköisesti muutu. Tämä voi aiheuttaa selaimen lukituksen tai koodin toimimattomuuden.

Kuten aiemmin mainitsin, tämä oli hyvin lyhyt johdanto Javascriptin rakenteiden ohjelmointiin. Sinua kannustetaan lukemaan lisää tästä kiehtovasta, vaikkakin suuresta aiheesta.

6.8 Testaa itsesi

  • Haluan laskea alaspäin 30. Kirjoita 'for' -silmukka, joka tekisi niin.
  • Haluan luoda muuttujan nimeltä 'makeuseof' ja antaa sille arvon 'mahtava'. Miten se tehdään?
  • Haluan luoda toiminnon, joka tulostaa 'MakeUseOf Is Awesome' kutsuttaessa. Kirjoita funktio.

Lue lisää:

7. Luova kangas

Canvas on hieno tekniikka, jonka avulla voit piirtää kuvia ja luoda animaatioita tarvitsematta käyttää Flashia tai Silverlightia. Ihmiset ovat käyttäneet sitä luodakseen outoja ja upeita asioita, kuten hiustenkuivaaja -simulaattoria ja erilaisia ​​videopelejä. Se on upea ja käsittämättömän suuri tekniikka, tässä opetusohjelmassa aion antaa sinulle lyhyen johdannon siihen.

On syytä huomata, että Canvas toimii vain nykyaikaisilla selaimilla. Jos käytät vanhaa IE-, Chrome- tai Firefox -versiota, et ehkä pysty noudattamaan tätä lukua. Jos näin on, sinun kannattaa harkita Google Chromen uusimman version lataamista, joka oli selain, jossa loin tämän opetusohjelman.

7.1 Canvasin käytön aloittaminen

Ensinnäkin sinun on avattava verkkoselain ja siirryttävä osoitteeseen codepen.io. Luo uusi kynä.

Nyt meidän on ilmoitettava kankaaselementti. Luo kaksi avaavaa ja sulkevaa kangastagia. Niissä sinun tulee välittää sille kolme ominaisuutta. Nämä ovat Canvas -elementin leveys ja korkeus sekä antamasi tunnus. Kuten aiemmin, kun lisäsit videon, sinun tulee sisällyttää varaviesti.

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

Luomme muuttujan (kutsuin sitä demoksi) ja valitsemme sitten kangas -elementin ja annamme sen kyseiselle muuttujalle. Käytä tätä varten document.getElementByID () ja anna valitsemasi elementin tunnus.

Skriptimme toinen rivi luo toisen muuttujan nimeltä 'context' ja kutsuu sen jälkeen 'demo.getContext (' 2d ')'. Tämä kertoi selaimelle, että työskentelemme 2d -kuvan parissa, ja välitimme sitten tarvittavat toiminnot, joita tarvitsemme piirtääksesi näytölle.

Kolmas ja neljäs rivi piirtävät ruudulle. Kolmas rivi täyttää suorakulmion punaisella värillä, kun taas neljäs rivi kutsuu fillRect, joka sijoittaa sen ja määrittää sen pituuden ja leveyden.

Se ei kuitenkaan ole vaikuttavaa. Tehdään jotain hieman kehittyneempää ja luodaan Javascriptin ja Canvasin taikuuden avulla MakeUseOf -upouusi logo.

7.2 Muoto ja teksti

Poistetaan neljäs rivi ja korvataan se rivillä, joka sijoittaa suorakulmion vasempaan yläkulmaan ja venyttää sen kankaan pituudeksi.

Kaksi ensimmäistä argumenttia määrittävät, mihin haluamme sijoittaa muodon x- ja y -akselin. Asetetaan nämä kaksi nyt '0': ksi. 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 hyvä alku, mutta siinä ei mainita MakeUseOfia ollenkaan. Joten lisäämme tekstiä. Luodaan muuttuja, joka sisältää 'makeuseof', ja kutsumme muuttujaa 'MakeUseOf'.

Haluamme sitten luoda toisen kontekstimuuttujan. Kutsu tätä kontekstiksi2 ja varmista, että se on 2d. Käytämme tätä tekstimme kirjoittamiseen.

Haluamme, että tekstimme on väriltään sininen ja että se peittää punaisen neliömme. Joten, kuten ennenkin, haluamme antaa sille fillStyle of 'blue'. Nyt valitsemme tekstimme ominaisuudet. Haluamme sen olevan 20px suuri, lihavoitu ja muotoiltu Arial -fontilla. Kutsumme fonttia asiayhteyteen2 ja annamme sille arvon 'lihavoitu 20px arial'.

Koska haluamme tämän tekstin peittävän edellisen punaisen laatikkomme, meidän on kutsuttava 'textBaseLine' kontekstissa2 ja annettava sille ylhäältä arvo. Kun tämä on suoritettu, kutsumme kontekstin2 'fillText' ja välitämme muuttujan, joka sisältää tekstimme ja x- ja y -koordinaatit, joihin aiomme sijoittaa tekstimme. Koodimme lopputulos on jotain tällaista.

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

7.3 Sana kankaalle

Vaikka tämä oli uskomaton perusesittely Canvasille, sinun on ymmärrettävä, että se on myös uskomattoman suuri tekniikka ja uskomattoman tehokas käynnistys. Tämä opas toimi yksinkertaisesti johdantona grafiikan tekemiseen tämän uuden tekniikan avulla.

kuinka avata iphone 7 lukitus salasanalla

7.4 Testaa itsesi

  • Lisää luomaasi kuvaan seuraava iskulause: 'Paras tekninen sivusto koskaan!'
  • Luo for for -silmukka, joka kestää kymmenen iteraatiota. Katso, voitko siirtää piirustuksesi alaspäin kankaalle, pikselin kerrallaan.
  • Kääri piirustuksesi funktioksi. Mitä tapahtuu, jos et soita sille?

Lue lisää:

8. Missä seuraavaksi?

Kiitos, että luit uskomattoman lyhyen oppaani uusista HTML5 -tekniikoista. On kiistatonta, että HTML5 on tulevaisuuden tekniikka. Useimmat tekniikat omaksuvat sen, koska se on helppo kirjoittaa ja voimakas mittaamattomasti. Ihmiset tekevät sen kanssa uskomattomia asioita koko ajan, ja minulla ei ole epäilystäkään siitä, että tulevaisuudessa olet yksi niistä ihmisistä. Minulla on kunnia olla mukana matkallasi HTML5: n villiin ja ihmeelliseen maailmaan.

Pyydän teitä jatkamaan oppimista. Jatka koodausta. Jatka tason nousua ja parantamista, ja käytät hetkessä tässä lyhyessä oppaassa esitettyjä tekniikoita upeiden tuotteiden luomiseen.

Jaa Jaa Tweet Sähköposti Kannattaako päivittää Windows 11: een?

Windows on suunniteltu uudelleen. Mutta riittääkö se vakuuttamaan sinut siirtymään Windows 10: stä Windows 11: een?

Lue seuraava Liittyvät aiheet
  • Wordpress ja verkkokehitys
  • HTML5
  • Pitkä lomake
  • Longform -opas
Kirjailijasta Matthew Hughes(386 artikkelia julkaistu)

Matthew Hughes on ohjelmistokehittäjä ja kirjailija Liverpoolista, Englannista. Hänet harvoin löytyy ilman kupillista vahvaa mustaa kahvia kädessään ja hän rakastaa ehdottomasti Macbook Prota ja kameraa. Voit lukea hänen blogiaan osoitteessa http://www.matthewhughes.co.uk ja seurata häntä Twitterissä osoitteessa @matthewhughes.

Lisää Matthew Hughesilta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi