Aloita HTML5 / CSS3: n käyttö: Vinkkejä, esitteitä ja näytteiden koodausta

HTML5 on kasvussa ja alkaa kehittää koko web-käyttöliittymää. Jopa jotkut web-kehittäjät väittivät, että HTM5-elementit ja visuaaliset tehosteet ovat verrattavissa Flashiin. Uusi skriptityyli on helppo ymmärtää, ja web-käyttöliittymän parantamismahdollisuudet ovat rajattomat. Joten kuinka mielenkiintoinen tämä HTML5 on?


Tämän artikkelin tarkoituksena on antaa lukijoille käsitys siitä, mitä sinun pitäisi tietää HTML5: stä, ja mikä tärkeintä, vinkkejä & temppuja kevyiden, houkuttelevien ja vuorovaikutteisten HTML5-sivujen luomiseen.

1. HTML5: n perustiedot

HTML5

Ennen kuin alamme jatkaa tätä aihetta HTML5: ssä, on hyvä tarkistaa ensin nykyinen selaimesi. Koska monet selaimet ovat edelleen kehitystilassa (parannus HTML5: n mukauttamiseksi), jotkut tässä mainitut ominaisuudet eivät ehkä ole tuettavissa.

Tässä on nopeita vinkkejä tarkistaaksesi selaimen yhteensopivuus.

Voit ymmärtää tarkemmin tietyn selaimen rajoituksia tässä.

2. Tekstitehosteet – varjo- ja teksti-tehosteiden lisääminen HTML5: ään

Tekstitehosteet HTML5: ssä

Perusvarjovaikutus tekstiin

Tämä on yksinkertaisin merkkijono, joka muuttaa tavallisen otsikkosi tyylikkään tekstin. Älä koskaan aliarvioi varjovaikutusta. Tämän samankaltaisen näköisen vaikutelman luominen vaatii verkkosuunnittelijan suorittamaan useita kuvankäsittelyvaiheita Photoshopissa. Ja nyt kaikki vie vain yhden koodirivin. Varjoetäisyys, väri voidaan muuttaa sydämesi sisältöön.

Koodausnäyte

#varjo h1 {
tekstivarjo: 0px 1px 1px rgba (0,0,0, .2);
}

Teksti ennakolta tulipalomaisesta vaikutuksesta

Seuraava vinkki on näyttää sinulle, kuinka HTML5-koodaus voidaan muokata entistä viileämmäksi näyttäväksi tekstiksi. Jos kokeilet tarpeeksi tai löydät muita esimerkkejä, tehosteiden mukauttamismahdollisuudet ovat rajattomat. Huomaa: Tätä esimerkkiä ei ole luonut mikään kuvankäsittelyohjelma. Pelkät koodit HTML5: ssä.

Koodausnäyte

#fire h1 {
tekstin kohdistaminen: keskusta;
marginaali: 200 pikselin automaattinen;
font-family: "Liiga-goottilainen", Kuriiri;
kirjasinkoko: 200 kuvapistettä; tekstimuunnos: iso kirjain;
väri: #fff;
teksti-varjo: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80xxpxxxxxxxx-73790, 10px 80px # 451b0e;
}

Muu hieno esimerkki: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Pyöristetty kulma HTML5: ssä

Pyöristetty kulma HTML5: ssä

Verkkosivun ulkoasun muotoilu HTML5: ssä ei ole koskaan ollut näin helppoa CSS: n käyttöönoton jälkeen. Ja nyt sinulla voi olla jopa pyöristetyt kulmat asetteluelementeistä! Kuvittele tämä; ei enää viipaloi taustakuvaa, ei enää sotkuisia kuvapalasia. Tämä tuo paljon hurraa verkkosivujen suunnittelijoille.

Koodausnäyte

div {
reuna: 2px kiinteä # 434343;
täyte: 10px;
tausta: # e3e3e3;
-moz-raja-säde: 10px;
-webkit-raja-säde: 10px;
leveys: 500px;
}

Huomaa: Moz tarkoittaa Mozillaa, ja webkit on Safarille ja Chromelle.

Muu hieno esimerkki: http://fjd1.com/roundcorner.html

4. Skaalautuva vektorigrafiikka (SVG) HTML5: ssä

HTML 5 -oppaat, opas ja näytteet

Skaalautuva vektorigrafiikka tai yleisesti tunnettu (SVG) on 2-ulotteinen vektorigrafiikka, joka määritetään XML-tekstitiedostoissa. Toisin sanoen, koska heidän DNA: nsa perustuu XML-tekstitiedostoon, ne voidaan luoda tai muokata web-alustalla. Mikä tarkoittaa myös sitä, että skaalaus voi olla helppoa, ja hakukoneet pystyvät lukemaan ja ymmärtämään kuvaa.

Näytekoodi

Muita upeita esimerkkejä:

5. Upota elokuvatiedosto HTML5: ään

Video HTML5-muodossa

Tässä on toinen mielenkiintoinen osa HTML5: n ominaisuuksien esittelyyn. Monet verkkovideoista esitetään yleensä web-käyttäjille Flash-muodossa. Viime aikoihin saakka videon upottaminen HTML5: ään hidastuu (YouTube on hyvä esimerkki) ja Flash on hitaasti menettämässä houkuttelevuuttaan. Miksi se on niin? Matkapuhelimen käyttäjät. Jos haluat, että videosi voidaan toistaa sekä iPhone- että Android-puhelimissa, HTML5 on tapa edetä.

Videon upottamiseksi sinun on tiedettävä tällä hetkellä 3 eri selainten tukemaa muotoa. .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Näytekoodi

Muu hieno esimerkki: https://www.html5rocks.com/en/tutorials/video/basics/

6. Diaesitys HTML5: ssä

HTML 5 -oppaat, opas ja näytteet

Powerpoint on ollut synonyyminimi, joka liittyy diaesitykseen. Mutta miksi rajoitutaan offline-esitykseen, jossa voit luoda dioja, jotka on tarkoitettu verkkoyleisölle? HTML5 on auttanut luomaan paljon tehokkaita esitys dioja, joissa on siirtymä- ja navigointivalikko. Parasta on, että voit jopa soveltaa 3D-muunnosta esitykseesi.

Näytekoodi

pre {
siirtymä: kaikki 1 helpotettu sisään;
}

pre: leiju {
taustaväri: # F2F5FE;
reunan väri: musta;
}

div {
muunnos: kierrä3d (1,1,0, 45deg);
}

Muita upeita esimerkkejä:

7. Muokattava sisältö HTML5: ssä

HTML 5 -oppaat, opas ja näytteet

Staattinen teksti on niin vanha koulukausi, jolloin joustavuus ja dynaaminen hallitsevat maailmaa. HTML5: ssä voit määrittää tekstialueen, jonka avulla web-käyttäjä voi muokata sitä ilman tekstieditoria.

Näytekoodi

Tätä sisältöä voi muokata!

Muu hieno esimerkki: http://html5demos.com/contenteditable

8. Interaktiivinen Web-kangas HTML5: ssä

HTML 5 -oppaat, opas ja näytteet

HTML5: n SVG: n lisäksi kangas on seuraava paras asia, mitä koskaan on tapahtunut verkossa. Kangas mahdollistaa 2-ulotteisten muotojen renderoinnin, jotka tuovat interaktiivisuuden koko tasolle ilman Flashin apua.

Siitä huolimatta HTML5: n yksinkertainen koodaus, joka luo hämmästyttävän animaatiovuorovaikutuksen, on mainitsemisen arvoinen tässä.

Muu hieno esimerkki: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Vedä ja pudota HTML5: ään

HTML 5 -oppaat, opas ja näytteet

Vedä ja pudota (tunnetaan joskus DnD) on toinen hieno ominaisuus, joka on saatavana HTML5: lle. Upea esimerkki olisi Googlen toteuttama Gmail-sovellus. Jos käytät jotain HTML5-tuettavista selaimista, voit vain vetää tiedoston tietokoneeltasi ja pudottaa kirjoitusviesti-ikkunaan. Se lisätään automaattisesti liitteenä. Kuinka siistiä?

Näytekoodi (alkuperäinen DnD)

document.addEventListener (‘vedä alku’, toiminto (tapahtuma) {
event.dataTransfer.setData (‘teksti’, ‘räätälöity teksti’);
event.dataTransfer.effectAllowed = ‘kopio’;
}, väärä);

Muu hieno esimerkki: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Puhdas CSS-tietokartta HTML5: ssä

HTML 5 -oppaat, opas ja näytteet

Ennen HTML5: tä on myös mahdotonta luoda edustettava kaavio käyttämällä vain HTML-koodia. Lisäksi data-arvon muuttaminen ja heijastaminen kaaviossa ei ole yksinkertainen tehtävä. Jälleen HTML5 pelastamiseen. Yhdessä CSS: n kanssa voit luoda ehdottomasti kauniin kaavion, joka saattaa Microsoft Excelin häpeään. Koodit ovat yksinkertaisia, ja sinun tarvitsee vain viettää aikaa mukauttaaksesi kaavion täydelliset värit ja vaikutukset.

Muu hieno esimerkki: http://cssglobe.com/pure-css-data-chart/

Ei voi saada tarpeeksi HTML 5: tä?

Niin mekin! Tässä on enemmän aiheesta, mene tarkistamaan ne.

* 30 erittäin hienoa esimerkkiä HTML 5 -verkkosivustoista
* HTML 5: n käytön aloittaminen
* On luettava HTML 5 -ohjeet vuonna 2012
* Opi HTML 5: 10: n täytyy lukea oppitunnit

Katso myös  tämän HTML 5 -kaatumiskurssin kirjoittanut Robin Nixon. Robin Nixon on kirjoittanut oppimisen PHP, MySQL ja JavaScript; kurssi kattaa melkein kaiken, joka aloittelijan on tiedettävä HTML5: ssä – mukaan lukien HTML-HTML-koodaus, HTML5-piirtoalusta piirtämiseen, paikannus, paikallinen tallennustila sekä HTML5-ääni ja -video.

Alkuperäinen artikkeli julkaistaan ​​ensin WHSR-blogi; sitä hallinnoi ja päivittää nyt BuildThis.io-esikunnat.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map