Kezdő lépések a HTML5 használatával

Kezdő lépések a HTML5 használatával
Ez az útmutató ingyenesen letölthető PDF -ként. Töltse le most ezt a fájlt . Nyugodtan másolja és ossza meg barátaival és családjával.

Tartalomjegyzék

§1. Bemutatkozás





2. § - Szemantikai jelölés



3. § - Űrlapok





4. § - Közepes

§5 – CSS3 Átalakítások és animációk



6. § - Csak elég Javascript

7. § - Kreatív vászon



8. § - Hol tovább?

1. Bemutatkozás

Hallott már róla: HTML5. Mindenki használja. Az internet megmentőjeként hirdetik, lehetővé téve az embereknek, hogy gazdag, vonzó weboldalakat hozzanak létre a Flash és a Shockwave használata nélkül.



De mi is valójában?

Nos, erre nem könnyű a válasz. Ebben a HTML5 oktatóanyagban megpróbálunk néhány választ adni. A HTML5 a dolgok nagyon sokféle csoportjának leírására szolgál. Ez a weblapok írásának szabványa. Ez az API -k gyűjteménye. Ez egy új módja annak, hogy interaktivitást adjunk a weboldalakhoz.

A HTML5 mindez és még sok más. Akkor miről szól ez a könyv?

Ebben a HTML5 bemutatóban azt fogom feltételezni, hogy valamikor érintett a HTML -hez és a CSS -hez. Talán létrehozta saját Wordpress témáját, vagy szerkesztett egy MySpace elrendezést a napokban. Talán olvasta a MakeUseOf saját XHTML -útmutatóját. A lényeg az, hogy feltételezem, hogy jól ismeri a weboldalakat, és hogy amit ebben az útmutatóban tárgyalunk, nem lesz túl idegen az Ön számára.

Ennek az útmutatónak az a célja, hogy ne tanítsa meg a HTML5 egészét. Ez teljesen kimaradna ennek a könyvnek a kereteiből. A cél az, hogy gyengéd bevezetést nyújtson ezekhez a csodálatos új webes technológiákhoz, és megmutasson néhány remek módszert, amellyel beépítheti őket webhelyeibe.

Miért szeretné megtanulni a HTML5 -öt?

Ez jogos kérdés. Az okostelefonok és alkalmazások világában valóban fontos megtanulni weboldalak programozását?

Nos, akár hiszi, akár nem, nagyon gyakori, hogy okostelefonos alkalmazásokat írnak HTML5 technológiák segítségével. Egészen a közelmúltig az Androidra készült Facebook -alkalmazás HTML5, CSS és Javascript használatával készült.

A Blackberry egy másik nagy cég, amely rendkívül érdeklődik a HTML5 iránt. Ez nyilvánvaló a mobil operációs rendszerük, a Blackberry OS 10 legújabb iterációjában, ahol aktívan bátorítják a fejlesztőket, hogy webtechnológiákat használó alkalmazásokat fejlesszenek ki telefonjaikhoz.

Az új Firefox OS okostelefonok teljes egészében HTML5 -alkalmazásokon is futnak. A HTML5 gyakorlati ismerete elengedhetetlen a mai okostelefonos környezetben.

Ezenkívül a HTML5 tanulása jót tesz a karrierjének. Nem hiszel nekem? Az Indeed.com szerint , a HTML5-fejlesztők átlagos éves fizetése szembeötlő 89 000 dollár. Egyre több vállalat váltja webhelyét HTML5 -technológiák használatára, a HTML5 -veremet ismerő fejlesztők keresettek - most minden eddiginél jobban.

1.1 Előfeltételek

Ez a HTML5 bemutató néhány dolgot feltételez. Először is feltételezi, hogy ismeri a web működését, és tudja, hogyan kell létrehozni egy alap weboldalt. Képesnek kell lennie egyes HTML -elemek macskakövezésére, és képesnek kell lennie arra, hogy információkat jelenítsen meg egy webböngészőben. Látva és

címkék nem túl ijesztőek, és nem fél attól, hogy valamilyen forráskódban piszkos lesz a keze.

Másodszor, ez az útmutató feltételezi, hogy tudja, mi a CSS és hogyan működik. Nem számítunk Önre, hogy tervezési zsenik leszünk, és nem is várjuk el, hogy a teljes CSS specifikációt kézről kézre tudja. Képesnek kell lennie azonban arra, hogy stílust alkalmazzon a weblap elemeire, tudjon linkelni egy CSS -fájlhoz, és ismernie kell az azonosító és az osztály közötti különbséget, és hogyan kell mindegyikre alkalmazni a stílust.

Ha vakarja a fejét a fentiek miatt, ne aggódjon. Az egyik legjobb dolog a HTML -ben és a CSS -ben az, hogy nagyon -nagyon egyszerű. Valójában a MakeUseOf rendelkezik egy hihetetlen XHTML útmutatóval, amely igazán gyorsan felgyorsítja a munkát.

Az útmutató elolvasása után érdemes megnéznie a következő cikkeket is:

Szüksége lesz egy modern szövegszerkesztőre és böngészőre is. Az Internet Explorer bármely, IE 9 -nél régebbi verziója, valamint a Safari, a Chrome és a Firefox egyes régebbi verziói küzdenek a HTML5 részét képező számos funkcióval, és megakadályozhatják az útmutató követésében.

Ennek eredményeként javasoljuk, hogy töltsön le egy modern böngészőt. Ajánlom a Google Chrome -ot, és minden példában használni fogom.

Ezen kívül csak a tanulási hajlandóságra lesz szüksége. Ja, és szövegszerkesztő.

1.2 Szövegszerkesztők webfejlesztéshez

A szövegszerkesztő az, amellyel a kódot fogja írni. Lehet, hogy kíváncsi, mi az a szövegszerkesztő.

Nos, először is, ez nem szövegszerkesztő. Az olyan programok, mint a Microsoft Word és az Apple Pages, teljesen alkalmatlanok a webfejlesztésre. Ez azért van, mert további információkat csatolnak a HTML-, CSS- és Javascript -fájlokhoz, ami megnehezíti a böngésző olvasását.

A szövegszerkesztő karaktereket lő ki egy szövegfájlba, és nem sok mást. Ez lehetővé teszi olyan fájlok létrehozását, amelyek nem tartalmaznak további formázást, és menthetők bármilyen választott kiterjesztéssel.

A számítógép már rendelkezik ilyennel. Ha Windows PC -t használ, akkor a Notepad az a szövegszerkesztő, amelyet valószínűleg telepített.

Mac esetén a helyzet kissé más. Az OS X véletlenül négy különböző szövegszerkesztővel érkezik. Ezek az úgynevezett Vim, Emacs, Pico és Nano. A Jegyzettömbtől eltérően azonban mindegyik a terminálon működik.

Ez egy kicsit félelmetes azok számára, akik még nem ismerik a webfejlesztést, és nem szabad használniuk azokat, akik még nem ismerik a szoftverfejlesztést. Ebben az útmutatóban nem fogjuk használni őket. Ha azonban egy kicsit magabiztosabbá válik a szoftver és a webfejlesztés, mindenképpen érdemes megnézni a Vim -et és az Emacsot. Mindkettő hatékony szövegszerkesztő, és ha elsajátítják, rettentő sok időt takaríthat meg.

Linuxon az alapértelmezett szövegszerkesztő a disztribúciók között változik. Az Ubuntun valószínűleg a Geditről van szó, amely egy meglehetősen kellemes szövegszerkesztő, amely nem különbözik a Jegyzettömbtől.

Ezen a tanfolyamon azonban három különböző eszköz segítségével írjuk meg a kódunkat.

Az első a Sublime Text 2. Őszintén szólva ezt nem tudom eléggé ajánlani. Minden olyan dologgal együtt jár, amelyek megkönnyítik egy kezdő fejlesztő életét. Először is megkönnyíti a kód olvasását bizonyos részek színezésével. Másodszor, lehetővé teszi a fájlok közötti egyszerű váltást és a fájlok teljes projektjeinek kezelését. Ez ideális a fájlok közötti váltáshoz és több bit kód szerkesztéséhez menet közben.

A harmadik a Google Chrome -ba épített Javascript konzol. Ez lehetővé teszi számunkra, hogy megírjuk a Javascriptet, és lássuk, hogy azonnal fut, és az alapvető programozási fogalmak magyarázatára szolgál.

A második a Codepen.io nevű weboldal. Ez a figyelemre méltó webhely lehetővé teszi a HTML, CSS és Javascript kódolását a böngészőben, és szabadon használható. Ezenkívül lehetővé teszi, hogy azonnal láthassa a változásokat.

2. Szemantikai jelölés

Ebben a fejezetben megismerkedhet a szemantikai jelöléssel, valamint a kód tartalom alapján történő rendszerezésével.

A közelmúltig a HTML kódot általában címkékkel szervezték. Ezek lehetővé tették az elemek csoportjának létrehozását, majd az elemek stílusának alkalmazását.

Ez működött, de volt hova fejlődni. A címkékkel az volt a probléma, hogy nem szemantikai. A div valójában nem jelent semmit.

A szemantikai jelölés a HTML5 új funkciója. Új címkéket hoz létre, amelyek ugyanúgy működnek, mint a „div” címkék, de az oldal gyakori részeinek címkézésére szolgálnak.

Szóval, hogyan működnek? Tekintsük a következő kódot.

Ebben a kódrészletben van egy navigációs sáv, egy cím és egy lista. Ez nem sokban különbözik a legtöbb webhelytől, amelyekre valószínűleg fel fog térni, ha belegondol.

miért nem működik a ps4 vezérlőm?

Nézzünk egy cikket a MakeUseOf -ról. Észre fogja venni, hogy az oldal egy része teljes egészében más cikkekhez való navigációra van fenntartva. Azt is észre fogja venni, hogy az oldal egy másik része tartalmazza a szócikkeket. Az oldal tetején egy fejlécet lát, amely tartalmazza a MakeUseOf logót és néhány más linket.

Ha belegondolunk, sok webhely követi ezeket a konvenciókat. A legtöbb webhelynek van egy része, amely navigációra van fenntartva. Általában tartalommal rendelkeznek. Valószínűleg van fejlécük.

A szemantikai címkék olyan címkék, amelyek lehetővé teszik a webhely azon részeinek meghatározását, amelyek általában megtalálhatók a legtöbb webhelyen. Nem adnak hozzá semmit az oldalhoz, de lehetővé teszik a címkék csoportosítását tartalmuk alapján, és stílusokat alkalmazhatnak ezekre a csoportokra.

Szóval, emlékszel arra a kódra, ami régen volt? Nézzük meg némi szemantikai jelöléssel.

Mint látható, a kód sokkal könnyebben olvasható. Tudja, hogy melyik alkatrész melyik, és nincs kétértelműség. Ez fontos, mert megkönnyíti a jó, tiszta kód írását. Ha valaha úgy dönt, hogy professzionális webtervező lesz, ez lesz a legfontosabb - soha nem tudhatja, ki fogja elolvasni az elkészített művet.

Lássunk tehát néhány szemantikai jelölési címkét.

2.1 Szakasz

A szakasz nagyon hasznos címke. Hatalmas mennyiségű információ és tartalom megragadására szolgál, amelyek címsorral vagy címmel vannak megjelölve. Gondolj erre úgy, mint egy könyv egy fejezetére. Egy fejezetnek címe van, és tartalmazhat képeket, diagramokat, grafikonokat és szavakat is. Mindezt egy szakaszcímke fogja használni.

2.2 Cikk

A cikkcímkét arra használják, aminek hangzik; Tartalmat, például blogbejegyzést vagy hírt tartalmaz. Ezt a tartalmat el kell tudni különíteni a blog többi részétől, és továbbra is koherens értelmet kell adni.

2.3 Eltekintve

Ez a címke olyan tartalom számára van fenntartva, amely kapcsolódik a weboldalhoz, de nem szerves része. Ez lehet egy csomó tény, amelyek egy hírhez kapcsolódnak, vagy egy felhasználó életrajza egy blogon.

2.4 Fejléc

Sok weboldalnak van egy sávja az oldal tetején, amely emblémát, az oldalra vonatkozó információkat és esetleg linkeket tartalmaz. A szemantikai jelölésnél mindezt fejléccímkével használná.

2.5 Nav

Ez az elem a webhely navigációs részére van fenntartva. Ez más webhelyekre vagy a webhely más oldalaira mutató linkeket tartalmazna. A MakeUseOf összefüggésében ez lehet az oldal azon része, amely a fejléc alatt található.

Ez a címke az oldal alsó részére van fenntartva. Itt elhelyezhet néhány elérhetőséget, szerzői jogi információt, térképet vagy néhány linket a 'rólam' oldalra.

2.7 Teszteld magad

  • Mi a szemantikai jelölés és mire használják?
  • Készítek egy weboldalt, és szemantikai címkét szeretnék használni, hogy tartalmazzon egy rólam szóló életrajzot. Melyiket használjam?

3. Formák

Ha valaha is webes tervezést végzett, valószínűleg tudja, hogyan kell egyszerű űrlapot létrehozni HTML -ben. Ha nagyon ügyes vagy, akkor valószínűleg tudod, hogyan kell átvenni az űrlapból kapott információkat, és hogyan kell vele valamit kezdeni, például adatbázisba tenni.

A formák rendkívül fontosak. Ők képezik az interneten végzett legtöbb tevékenység alapját. Minden alkalommal, amikor állapotfrissítést hoz létre kedvenc közösségi hálózatán, vásárol valamit az Amazon -tól, vagy e -mailt küld, valószínűleg HTML -űrlapot használt.

Amit valószínűleg nem tudott, hogy az űrlapok létrehozásának módja gyökeresen megváltozott a HTML5 -ben. Ez is lényegesen jobb. Ebben a fejezetben megvizsgálunk néhány remek dolgot, amelyeket most megtehet, csak a régi jelöléssel.

Szóval, mi olyan klassz az új módon, amellyel űrlapokat írhatunk HTML5 -ben? Először is, csak az űrlap jelölésének megváltoztatásával biztosíthatja, hogy bizonyos mezőket ki kell tölteni a benyújtáshoz. Ezenkívül ehhez már nem kell hegyeket írnia JavaScriptből vagy PHP -ből. Triviálisan könnyű.

Másodszor, biztosíthatja, hogy a felhasználók csak bizonyos típusú információkat küldhessenek az űrlaphoz. Tegyük fel, hogy van egy webhelye a levelezőlistához, és csak azt szeretné, ha az emberek tényleges e -mail címeket küldhetnének be? Ezt megteheti, csak HTML5 használatával. Valóban hihetetlenül erős.

Harmadszor, javíthatja az űrlapok megjelenését azáltal, hogy bizonyos mezőket helyőrzővel lát el. Ez jelentősen intuitívabbá teszi őket, mivel példát mutathat a felhasználóknak arról, hogy mit várnak el egy űrlaptól.

3.1 Az űrlap javítása

Tehát nézzünk egy űrlapot, és nézzük meg, hogyan tehetjük jobbá.

Ez a forma elég alap. Beír egy nevet, egy e -mailt és egy kedvenc színt, majd lehetővé teszi a felhasználó számára, hogy ezt elküldje. Nem tartalmaz érvényesítést arra vonatkozóan, hogy milyen információkat helyeznek el, és semmi sem akadályozza meg a felhasználókat abban, hogy néhány üres mezővel elküldjék ezt az űrlapot. Változtassunk mindezt.

Tehát az első dolog, amit meg akarunk tenni, annak biztosítása, hogy az e -mail mező csak e -mailt vegyen fel. Ez régebben valóban elég nehéz feladat volt, hiszen mindenféle arcane Regex kódot kellett létrehoznia. Nos, már nem. Csak meg kell változtatnia a beviteli típust „szöveg” -ről „e -mail” -re. Ha hülyeséggel próbálja beküldeni az űrlapot, az panaszkodni fog, és ragaszkodik ahhoz, hogy küldjön egy e -mailt.

3.2 Bemeneti típusok és minták

Vannak más típusú bemenetek is, amelyekre szükség lehet. Ezek közé tartoznak a telefonszámok, webcímek, keresési űrlapok és még a színválasztók is! Mivel a HTML5 folyamatosan fejlődik, nyilvánvaló, hogy hamarosan további bemeneti típusokat adhatunk meg a közeljövőben.

Ezen túlmenően, mint például a telefonszámok, amelyek helytől függően változnak, megadhatja a bemenetek mintáit. Ezeket úgynevezett „reguláris kifejezések” segítségével hozzák létre, és meglehetősen bonyolultak, de mérhetetlenül erősek.

Mi is szeretnénk példát mutatni egy e -mailre a saját területünkön, így a felhasználónak nincs kétsége afelől, hogy mit kell benyújtania. Ezt tényleg könnyű megtenni. Csak hozzon létre egy új „helyőrző” attribútumot egy példa e -mail címmel.

Biztosítani fogjuk, hogy a „Kedvenc szín” mező kitöltése kötelező legyen. Az e -mail beviteli címke utolsó szögletes zárójelébe (>) csak írja be: „kötelező”. Ez az. Most, amikor érték nélkül próbálja meg beküldeni az űrlapot, hibaüzenet jelenik meg.

Az igazán hihetetlen dolog ezekben a hibaüzenetekben az, hogy a felhasználónak nem kell írnia vagy kódot írnia a létrehozásához. Csak módosíthat egy mezőt, hogy kötelezővé váljon, és csak működik. Ennek megfelelően lehetőség van személyre szabni őket, ha akarja.

Ez hihetetlenül rövid bevezetés volt a HTML5 űrlapjainak erejéhez. Ha többet szeretne olvasni, javasoljuk, hogy látogassa meg ezeket a linkeket.

További irodalom:

  • CSS trükkök - Írjunk szemantikai jelölést
  • HTML5 Doktor - Beszéljünk a szemantikáról

3.3 Teszteld magad

Jövő héten lesz a születésnapja, és szeretne létrehozni egy regisztrációs űrlapot, hogy tudja, mennyi tortát kell elkészítenie. Nyissa meg a szövegszerkesztőt, és hozzon létre egy űrlapot a következő mezőkkel.

  • Név
  • Email cím
  • Telefonszám
  • Allergiák

Győződjön meg arról, hogy a név, e -mail és telefonszám mezők kitöltése kötelező, és az E -mail és telefonszám mezők az 'email' és a 'tel' beviteli típussal vannak megadva. Hozzon létre egy helyőrzőt az allergia mezőben a „pollen, tojás, quiche” értékkel.

Játsszon az űrlappal. Próbálja meg üresen megadni a kötelező mezőket, és illesszen be nem számszerű karaktereket a telefonszám mezőbe. Az e -mail mezőbe írjon be valamit, ami nem e -mail cím. Mi történik?

4. Átlagos

Volt idő, amikor egyetlen videót vagy hangot illeszthetett be egy weboldalra a Flash, a Shockwave vagy a SilverLight használatával.

Ez nem volt ideális. Először is, ezek a keretrendszerek egyike sem működött olyan jól mobil eszközökön. Nem voltak felkészülve az okostelefonok és táblagépek modern világára.

hogyan lehet eltávolítani egy tárgyat a Photoshopban

Ezenkívül saját formátumok voltak. Ennek eredményeként a Linux és az OS X felhasználói meglehetősen másodosztályú élményt szerezhettek, vagy akár meg is akadályozhatták a médiaszolgáltatások fogyasztását, mivel az nem volt elérhető a platformjukhoz.

Végül hajlamosak voltak lassúak lenni. Ha alulteljesített vagy régebbi számítógépet használna, nem lenne jó tapasztalata a videók megtekintésével ezekkel a keretekkel. Flash különösen hírhedt volt erről.

4.1 Hogyan teszi a HTML5 félelmetessé a videót és a hangot?

A HTML5 megváltoztatta ezt, lehetővé téve a webfejlesztők számára, hogy csak néhány sornyi kóddal tartalmazzanak videót és hangot a weboldalaikra. Mobileszközökön élvezetes, és minden modern webböngészőben működik.

Ennek eredményeképpen az olyan nagyvállalatok, mint a YouTube, a Vimeo és a Netflix kihasználják a HTML5 forradalom előnyeit. Miért nem csatlakozol hozzájuk?

4.2 Minden a kodekekről

Ebben a fejezetben megtanulja, hogyan használhatja fel a HTML5 erejét, hogy audió és videót vegyen fel weboldalaira.

Először is egy figyelmeztetéssel kell kezdenem. Bár HTML5 videókat használhat minden modern webböngészőben, nem működik minden webböngészőben. Az egyes böngészők által használt kodekek eltérőek. Az Internet Explorerben csak az MP4 videó használatára korlátozódik. A Chrome valamivel nagyvonalúbb, és lehetővé teszi a WebM, MP4 és Ogg Theora videó használatát. Az Opera egy kicsit korlátozóbb, és csak a Theora és a WebM videó használatát teszi lehetővé.

Ennek eredményeképpen egy kicsit ügyesnek kell lennie a videó beillesztésével a weboldalára. Lássuk tehát, hogyan működik.

4.3 Kezdés videóval

Először is létre kell hoznia néhány nyitó és záró címkét. Itt található a link a videofájlokhoz. De először posztert kell készíteni. Az mit jelent?

Nos, amikor arra vár, hogy betöltődjön a videó, a webhelyet látogató személy láthat egy képet, amely kapcsolódik a videóhoz. Ehhez adja meg a videocímkéknek a „plakát” attribútumot, amely tartalmazza a linkelni kívánt kép értékét. Ennek így kell kinéznie.

A következő dolog, amit meg akarunk tenni, egy tartalék létrehozása. Mit is jelent ez? Tehát tegyük fel, hogy az egyik régebbi, kevésbé félelmetes böngészőt használja. Sok ilyen régebbi böngésző nem támogatja a HTML5 videókat, ezért nem tudja lejátszani a HTML5 videókat. Hagyni szeretne nekik egy üzenetet, amelyben tájékoztatja őket, hogy frissíteni akarják böngészőjüket, és amíg ezt nem teszik meg, nem tudják megnézni a videóját.

Ehhez csak írja be üzenetét a videocímkék közé. Semmi más nem szükséges. Miután ezt megtette, marad egy kódja, amely így néz ki.

Most tegyünk hozzá egy videót. Ezt a Google Chrome -on fogom tesztelni, ezért linkelni fogok egy MP4 -es filmhez. Ehhez létrehozok egy forráscímkét, és megadok neki egy src attribútumot, amelynek értéke a hozzáadni kívánt videó értéke.

Az oldalam készen áll a megnyitásra a webböngészőben. Linkeltem egy filmhez, ami tényleg nagyon nagy, és ennek eredményeként kinyitva csak a plakát látható.

4.4 Hang hozzáadása

A hanganyag olyan módon illeszthető be a weboldalába, amely nagyon emlékeztet arra, hogyan helyeztük be a videót az oldalunkba.

Először is létre kell hozni néhány hangcímkét. Ezek a hangcímkék a „control” attribútumot tartalmazzák. Ez lehetővé teszi az oldalt felkereső felhasználó számára a lejátszás szüneteltetését, visszatekerését és gyors előretekerését.

Ezután forráscímkét ad hozzá az összekapcsolni kívánt MP3 fájlhoz. Valójában nem kell annyira aggódnia, ha a kodek kompatibilitásáról van szó. A legfrissebb webböngészők képesek MP3 audio lejátszására, bár jó gyakorlat, ha minden esetre „.ogg” és „.wav” fájlt is tartalmaznak.

Végül létrehozhat tartalékot a régebbi böngészők számára. Ez ugyanúgy történik, ahogyan létrehozta a tartalék videót.

A végeredmény egy kicsit így néz ki.

Amikor megnyitja ezt a webböngészőben, annak valahogy így kell kinéznie.

4.5 Teszteld magad

  • Mi a célja annak, hogy egy plakát legyen a videócímkékben?
  • Milyen kodekeket nem használhat az Internet Explorerben?
  • Ha azt szeretném, hogy szüneteltessen egy hangot, milyen attribútumot adna hozzá az „audio” címkéhez?

További irodalom:

5. CSS3 transzformációk és animációk

A CSS -t hagyományosan egy weboldal elrendezésének és kialakításának kezelésére használták. Ez még mindig igaz, de legújabb iterációjában képes lett kezelni az elemek és képek animációit és átalakításait.

Az emberek elképesztő dolgokat tettek a CSS3 segítségével, a digitális óra megalkotásától a teljes Pong játék megírásáig. Valaki még arra is felhasználta, hogy újra létrehozza a Mad Men bevezetőit. Ez egy igazán erőteljes technológia, és elsajátításával elképesztő szintű funkcionalitást adhat a weboldalához.

Ebben a fejezetben röviden bemutatom a CSS3 -at, és megmutatom, hogyan adhat hozzá néhány csodálatos hatást az oldalához.

Először navigáljon a codepen.io oldalra, és hozzon létre egy új tollat. Ezt a fejezetet a munkaterületünkként fogjuk használni.

Kezdjük egyszerűen, és hozzunk létre egy egyszerű képátalakítást, amely 3 fokkal elforgatja a képet, ha lebeg. Először is hozzon létre egy div címkét, és adjon meg egy azonosítót. Az alábbi példában a „muo” azonosítót adtam meg neki.

5.1 CSS lebegési effektusok

Ebben a div -ben szerepeltessen egy választott képet. Mellékeltem a MakeUseOf logójának másolatát.

Ezután írnia kell néhány stíluslap -szabályt. Az alábbi példában létrehoztam egy felső és bal margót, hogy helyet biztosítsak a képnek. Mellékeltem egy furcsa kinézetű stíluslap -szabályt is, amely „#muo: hover” karakterrel kezdődik. Mi az?

Amikor a „: hover” kifejezést csatolja a stíluslap szabályához, legyen az elem, azonosító vagy osztály, akkor gyakorlatilag azt mondja a böngészőnek, hogy alkalmazza ezt a stílust, amikor az egér szabályozza az elemet. Elég menő, igaz?

A „#muo: lebegés” szabályon belül van egy sor, amely ezt mondja: „-webkit-transform: rotate (3deg)”. Ahogy azt biztosan sejtette, ez azt jelzi a böngészőnek, hogy három fokkal forgassa el ezt a div elemet.

Érdemes azonban megjegyezni, hogy ez a címke csak Chrome -ban és Safari -ban működik. Ha azt szeretné, hogy kódja működjön a Firefoxban vagy az Internet Explorer 9 vagy újabb verziójában, módosítsa a CSS -fájlt a következő sorokkal.

Most, amikor a kép fölé viszi az egeret, így néz ki:

5.2 A CSS3 használata a képek átméretezéséhez

Szóval, miért áll meg itt? Tudta, hogy a 'transzformáció' módszerrel is nagyíthat vagy zsugoríthat egy képet. Változtassuk meg a CSS -fájlunkat a következő sorokkal.

Amint láthatja, most beillesztettünk egy új átalakítási szabályt, de ezúttal azt mondjuk neki, hogy tegyen valamit, úgynevezett „skála”. Ez egy igazán szép módja a kép méretének növelésére. Két paraméterre van szükség (azok a számok, amelyeket a zárójelek között lát), és azok azt az összeget jelzik, amellyel növeli az elem magasságát és szélességét.

Amint a kódból látható, 50%-kal megnövelem a MakeUseOf div logó méretét. Ezt a működést úgy tesztelheti, ha az egérmutatót felette tartja. Látni fogja, hogy most a „MakeUseOf” logó lényegesen feszesebb.

Ez nagyon szelíd bevezetés volt a CSS3 átalakításokhoz. Annak ellenére, hogy a CSS3 valóban nagyon új, most láthatja, hogy sok nagyon érdekes manipulációt végezhet vele.

5.3 Teszteld magad

  • Hogyan alkalmazzunk egy stílust egy elemre lebegéskor?
  • Hogyan lehet elforgatni egy képet CSS3 használatával?
  • Hogyan méretezhet egy képet CSS3 használatával?
  • Mi történik, ha átadja a „fordítás (50 képpont, 50 képpont)” átalakítási módszert?

További irodalom:

HTML5 Rocks - bemutató

6. Elég Javascript

Ha szkriptet szeretne használni a böngészőben, akkor a Javascript -et kell használnia. Sajnos nincs két módszer. Ez egy olyan nyelv, amelynek sok rajongója van, és sok rosszallója is. Ahogy a nyelvek mennek, sok szemölcs van. Van egy oka annak, hogy a nyelvről szóló legjelentősebb könyv a „Javascript: The Good Parts”.

Lehetetlen lesz megtanítani a Javascript használatát egyetlen fejezetben. Itt nem ez a cél. A cél az, hogy elegendő Javascript -et tanítson meg Önnek, hogy megérthesse a következő fejezetet, amely a Canvas nevű technológia használatáról szól rajzok és animációk készítéséhez.

6.1 A konzol elérése

Ehhez a Google Chrome minden példányába épített Javascript konzolt fogjuk használni. Ennek eléréséhez kattintson a jobb egérgombbal bármely weboldalra, majd nyomja meg az „Element ellenőrzése” gombot. Ezután kattintson a 'Konzol' gombra. Ezt látnod kéne.

Hagyományos, hogy az első program, amelyet minden kezdő fejlesztő ír, a „Hello World” program. Ez egy egyszerű program, amely a 'Hello World' kifejezést nyomtatja, és nem sok mást. A konzolba írja be a 'console.log (' Hello world! ') ;.

6.2 Az első program

Tehát mit tettünk pontosan? Először is hívtunk valamit úgynevezett 'console.log' -nak. Ez egy olyan kód, amely a számítógépbe van építve, és egyszerűen kinyomtatja, amit mond. Ezután néhány zárójelet csatoltunk hozzá, és a „Hello World” idézőjelbe tettük. Ezt nevezzük „átadott érveknek”, és az általunk elfogadott érv típusát karakterláncnak. Amikor betűket és speciális karaktereket szeretne csinálni, egyszerűen csak idézőjeleket kell használnia. Ha azonban számokkal szeretne bármit is tenni, általában nem kell idézőjelet használni, amint az alább látható.

6.3 Változók a JavaScriptben

A változókat a „console.log” -nak is átadhatja. A változók bonyolultnak tűnnek, de valójában csak egy hely, ahol információs darabokat helyezhetünk el. Ezek gyakran számok vagy betűk. Ehhez deklaráljon egy változót a „var” kulcsszó használatával, adjon neki nevet, majd egyenlőségjellel adjon meg egy értéket. Tehát létrehozok egy „hello” nevű változót, majd megadom a „Hello World!” Értéket. Ezt akkor átadom a console.lognak.

Jegyezze meg, hogyan nem adtam át a „hello” szót a console.log -nak idézőjelek segítségével. Ennek az az oka, hogy ki akartam nyomtatni a konzolra a „hello” tartalmát, és nem a „hello” -t.

6.4 A funkciók

Kicsit fárasztó lehet ugyanazt a kódrészletet újra és újra átírni, ezért írunk függvényeket. A funkciók könnyebbek, mint gondolnád. Mindössze kóddarabok, amelyeket újra felhasználhatunk anélkül, hogy újra átírnánk ugyanazt a kódot. Az alábbiakban létrehoztunk egy „sup” nevű függvényt, és egy argumentumot adunk át zárójelek segítségével, amelyet ezután naplózunk a képernyőre. „Sup” -nak hívjuk a konzolra küldve „sup („ Hello world! ”);”.

6.5 Művelet megismétlése „For” hurokkal

Tegyük fel, hogy ugyanazt a műveletet akarta elvégezni meghatározott számú alkalommal. Ezért használjuk a 'for' ciklust. Először ijesztőnek tűnnek, de olyan könnyű megtenni, ha megérted őket. Kezdje azzal, hogy „for ()” -t ír.

Ezekben a zárójelekben olyan változót szeretnénk létrehozni, amely számolja, hányszor hajtottunk végre egy műveletet. Tehát valami ilyesmit kapunk 'for (var i = 0;)'.

Ezután azt szeretnénk ellenőrizni, hogy nem teljesítettem -e egy feltételt. Tehát ebben az esetben azt szeretnénk látni, hogy kevesebb, mint 10. Tehát a pontosvessző után azt írjuk, hogy „i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

Ha i kevesebb, mint 10, akkor eggyel össze szeretnénk adni, majd tenni valamit. Tehát „i = i + 1” -t adunk. A ciklusunk majdnem kész: 'for (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

Ezek után akciót akarunk végezni. Tehát az utolsó zárójelek után írunk néhány göndör zárójelet, és közéjük fogunk konzolozni. Log az i értékét. Ez egy számlálót hoz létre, amely akár kilencet is számlál.

Az utolsó két programozási konstrukció, amelyet meg fogunk vizsgálni, az 'if' utasítások és a 'while' ciklusok.

6.6 Ha az állítások

Az „if” utasítás végrehajt egy műveletet, ha bizonyos feltételek teljesülnek. Hasonlóak a 'for' hurkokhoz az építésben, és a következők szerint működnek. Tegyük fel, hogy van egy „sajtburger” nevű változója, és szeretné látni, hogy van -e „ízletes” értéke. Ha igen, akkor a „yum, cheeseburgers” naplót szeretné naplózni a képernyőn. Ehhez valami ilyesmit írna.

Jegyezze meg, hogyan írtam az „if (sajtburgerek ==„ ízletes ”)” szót. Kettős vagy hármas egyenlőt használ az egyenlőség ellenőrzéséhez, és egyetlen egyenlőt az érték hozzárendeléséhez.

6.7 Míg hurkok

Végül a „while” ciklus végrehajt egy műveletet, miközben a feltételek teljesülnek. Tehát képzeld el, hogy naplót szeretnél naplózni, sajtburgert, míg a sajtburger ízletes. Ehhez a következőket kell írnia.

Érdemes megjegyezni, hogy ez végtelen ciklusba lépne, és kerülni kell a műveletet olyan értékkel, amely nem valószínű, hogy megváltozik. Ez azt okozhatja, hogy a böngésző leáll, vagy a kód nem működik.

Mint korábban említettem, ez egy nagyon rövid bevezetés volt a Javascript programozási konstrukcióihoz. Arra bátorítjuk, hogy olvasson többet erről a lenyűgöző, bár hatalmas témáról.

6.8 Teszteld magad

  • Szeretnék visszaszámolni 30 -tól. Írjon egy 'for' cikket, amely ezt megtenné.
  • Szeretnék létrehozni egy 'makeuseof' nevű változót, és 'félelmetes' értéket adni. Hogyan történik ez?
  • Szeretnék létrehozni egy funkciót, amely híváskor kinyomtatja a „MakeUseOf Is Awesome” kifejezést. Írja le azt a függvényt.

További irodalom:

7. Kreatív vászon

A Canvas egy remek technológia, amely lehetővé teszi képek rajzolását és animációk készítését anélkül, hogy a Flash vagy a Silverlight használatához kellene folyamodnia. Az emberek bizarr és csodálatos dolgokat alkottak, többek között hajszárító szimulátort és különféle videojátékokat. Ez egy csodálatos és felfoghatatlanul nagy technológia, ebben az oktatóanyagban röviden bemutatom nektek.

Érdemes megjegyezni, hogy a Canvas csak a modern webböngészőkön működik. Ha az IE, a Chrome vagy a Firefox régi verzióját használja, előfordulhat, hogy nem tudja követni ezt a fejezetet. Ebben az esetben fontolja meg a Google Chrome legújabb verziójának letöltését, amely az a böngésző, amelyben ezt az oktatóanyagot készítettem.

7.1 Első lépések a vászonnal

Először is meg kell nyitnia a böngészőt, és navigálnia kell a codepen.io oldalra. Hozzon létre egy új tollat.

Most deklarálnunk kell egy vászon elemet. Hozzon létre két nyitó és záró vászoncímkét. Ezekben három tulajdonságot kell megadnia. Ezek a vászon elem szélessége és magassága, valamint az Ön által megadott azonosító. Mint korábban, amikor videót szúrt be, tartalék üzenetet is tartalmaznia kell.

Most szeretnénk írni néhány Javascript -kódot, amely felhív valamit a képernyőre. Elkezdjük az alapot, és létrehozunk egy egyszerű piros négyzetet.

Létrehozunk egy változót (demónak neveztem), majd kiválasztjuk a vászon elemet, és hozzárendeljük a változóhoz. Ehhez használja a document.getElementByID () parancsot, és adja meg a kiválasztani kívánt elem azonosítóját.

A szkriptünk második sora létrehoz egy másik változót, az úgynevezett „context” -et, majd a „demo.getContext („ 2d ”)” parancsot hívja meg rajta. Ez azt mondta a böngészőnek, hogy dolgozni fogunk egy 2d -s képen, majd átadtuk a szükséges funkciókat ahhoz, hogy a képernyőre rajzolhassunk.

A harmadik és negyedik sor azok, amelyek ténylegesen rajzolják a képernyőt. A harmadik sor egy téglalapot tölt ki piros színnel, míg a negyedik sor a fillRect -et, amely pozícionálja, és meghatározza annak hosszát és szélességét.

Azért ez nem lenyűgöző. Csináljunk valamit egy kicsit fejlettebb módon, és a Javascript és a Canvas varázslatával hozzuk létre a MakeUseOf vadonatúj logóját.

7.2 Alakok és szöveg

Töröljük a negyedik sorunkat, és cseréljük ki egy olyanra, amely a téglalapunkat a bal felső sarokba helyezi, és kinyújtja vászonunk hosszáig.

Az első két argumentum határozza meg, hogy hova kívánjuk elhelyezni az alakzat x és y tengelyét. Ezt a kettőt most állítsuk '0' -ra. A harmadik érv az alak szélességére vonatkozik. Állítsuk ezt '200' -ra, majd hagyjuk a negyedik argumentumot '50' -re. Most valami ilyesmi kell, hogy legyen.

Ez remek kezdet, de a MakeUseOf -ot egyáltalán nem említi. Tehát hozzáadunk néhány szöveget. Hozzon létre egy változót, amely tartalmazza a 'makeuseof' kifejezést, és ezt a változót nevezzük 'MakeUseOf' -nak.

Ezután egy másik környezeti változót akarunk létrehozni. Nevezze ezt az összefüggést2, és győződjön meg róla, hogy 2d. Ezt fogjuk használni szövegeink írásához.

Azt akarjuk, hogy szövegünk kék színű legyen, és átfedje piros négyzetünket. Tehát, akárcsak korábban, a „blue” kitöltési stílust szeretnénk adni neki. Most kiválasztjuk szövegünk jellemzőit. Azt szeretnénk, ha 20 képpont méretű, vastag formátumú és Arial betűtípust használna. A betűtípust a kontextus2 -nek hívjuk, és „félkövér 20px arial” értéket rendelünk hozzá.

Mivel azt szeretnénk, hogy ez a szöveg elfedje korábbi piros dobozunkat, a szöveg2 -ben meg kell hívnunk a „textBaseLine” -et, és felül kell adnunk. Ha ez befejeződött, akkor hívjuk a „fillText” -et a kontextus2 -n, és átadjuk neki a szövegünket, valamint az x és y koordinátákat tartalmazó változót, amelybe szövegünket be kívánjuk helyezni. A kódunk végeredménye valami ilyesmi.

A kód által létrehozott kép így néz ki.

7.3 Egy szó a vásznon

Bár ez hihetetlenül alapvető bevezetés volt a Vászonhoz, meg kell értenie, hogy ez is hihetetlenül nagy technológia, és hihetetlenül erőteljes. Ez az útmutató egyszerűen bevezetőként szolgált a grafikák új technológiával történő elkészítéséhez.

tölthetem a laptopomat usb -vel

7.4 Teszteld magad

  • Adja hozzá a következő szlogent a létrehozott képhez: 'A valaha volt legjobb technikai oldal!'
  • Hozzon létre egy 'for' ciklust, amely tíz iterációra fut. Nézze meg, hogy le tudja -e mozgatni a rajzot a vásznon, egy -egy képpontonként.
  • Csomagolja be a rajzot egy függvénybe. Mi történik, ha nem hívod?

További irodalom:

8. Hol tovább?

Köszönjük, hogy elolvasta hihetetlenül rövid útmutatómat a HTML5 -ben található új technológiákról. Tagadhatatlan, hogy a HTML5 a jövő technológiája. A legtöbb technológia elfogadja, mivel könnyen írható és mérhetetlen. Az emberek mindig hihetetlen dolgokat művelnek vele, és nincs kétségem afelől, hogy a jövőben te leszel az egyik ilyen ember. Megtiszteltetés számomra, hogy részese lehettem utazásodnak a HTML5 vad és csodálatos világába.

Könyörgöm, hogy folytassa a tanulást. Folytassa a kódolást. Folytassa a szintemelkedést és a fejlesztést, és rövid időn belül az ebben a rövid útmutatóban bemutatott technológiákat fogja használni csodálatos termékek létrehozásához.

Részvény Részvény Csipog Email Érdemes Windows 11 -re frissíteni?

A Windows újra lett tervezve. De ez elég ahhoz, hogy meggyőzze Önt, hogy váltson a Windows 10 -ről a Windows 11 -re?

Olvassa tovább Kapcsolódó témák
  • Wordpress és webfejlesztés
  • HTML5
  • Hosszú alak
  • Longform útmutató
A szerzőről Matthew Hughes(386 megjelent cikk)

Matthew Hughes szoftverfejlesztő és író az angliai Liverpoolból. Ritkán találunk csésze erős fekete kávét a kezében, és teljesen imádja a Macbook Pro -t és a fényképezőgépét. A blogját elolvashatja a http://www.matthewhughes.co.uk címen, és követheti őt a Twitteren a @matthewhughes oldalon.

Továbbiak Matthew Hughes -től

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, véleményeket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide