‘tutorial’ címkét tartalmazó cikkek
In this Article I am endeavor to do a demonstration in HTML5 to be introduced data storage modul (Web Storage) of a client side. Naturally it will not change the World as it seems – since the “cloud” we know that it will -, but nevertheless it assures a great option which we could solve only with different tricks so far (e.g.: Cookie). But the Cookie had many disadvantage (limited size 4KB, traffic through the forwarding per request etc.). Well on the other hands the HTML5 Web Storage by the current definition can store 5MB data per source. Plenty of data can be stored here. It is important aswell that no unnecessary traffic will spring up because it is not sending data only if we ask. (by the way it is not done to make 5MB storages)
The Web Storage itself stores the data in a key/value pair form and we can search back with this in a later time when we need it. The type of the key is text while the type of the value can be anything. Let’s see the types of the storage:
1. Session Storage
The data will be stored here until the end of the browsing Session. After that they will be deleted (this can redeem the cookies). As long as the data will not be important to us in a later time, or for users, it is worthwhile to use this solution due to saving of the resources.
2. Local Storage
It is a different case like the previous. The data will be stored here and remains until we will not delete the key/value pairs or the user will not do this with his/her browser. Now You could ask why is this so good? Because e.g.: if a user opens a new window he/she can get the data or if he/she quits from his/her browser and re-enter, the data will be available. Tovább olvasom »
A HTML5-ben bevezetésre kerülő kliens oldali adattároló modul (Web Storage) bemutatására törekszek ebben a cikkben. Természetesen nem fogja megváltani a világot – hisz a “felhő” óta tudjuk, hogy az fogja -, de ettől függetlenül egy nagyszerű lehetőséget biztosít, amit eddig csak különböző trükkökkel tudtunk megoldani (Pl. Cookie (süti)). De a süti számos hátránnyal járt (korlátos méret 4KB, +adatforgalom a kérésenkénti küldés miatt, stb.). Nos, ezzel szemben a HTML5 web storage a jelenlegi definíció szerint 5MB adatot tud tárolni és ráadásul forrásonként. Ide azért már pakolhatunk adatot bőven. Az is fontos, hogy itt már nem keletkezik plusz felesleges adatforgalom, hiszen nem küldözgeti az adatokat, csak ha kérjük. (azért nem illik 5Mb-os storage-eket készíteni)
Maga a Web Storage az adatokat kulcs – érték páros formájában tárolja el és ennek segítségével tudjuk azokat visszakeresni. A kulcs típusa szöveges, míg az érték típusa bármi lehet. Nézzük, milyen “fajtái” vannak:
1. Session Storage
Az ide kerülő adatokat a böngészési Session végéig tárolja, utána törlésre kerülnek (ez hivatott kiváltani a Cookie -kat). Amennyiben az adatok később nem lesznek fontosak számunkra, vagy a felhasználó számára, érdemes ezt a megoldást választani az erőforrások megtakarítása végett.
2. Local Storage
Az ide kerülő adatokkal már más a helyzet, ezeket egészen addig megmaradnak, amíg nem töröljük a kulcs-érték párokat, vagy a felhasználó nem törli azokat a böngészőjével. Hogy miért is jó ez? Nos, pl. ha a felhasználó egy új ablakot nyit, akkor is eléri az itt tárolt adatokat, vagy ha kilép a böngészőből és újra belép, akkor is elérhetőek maradnak. Tovább olvasom »
Ebben a cikkben megnézzük, hogy hogyan lehet szöveget varázsolni a rajzvászonra. Talán egyszerűbb dolgunk lesz, mint a különböző alakzatokkal. Sajnos egyelőre a formázásoknak csak egy viszonylag szűk köre áll rendelkezésünkre és sajnos a CSS3 eljárások, trükkök egyike sem használható. Emiatt személy szerint úgy érzem, hogy egy kicsit elhanyagolt területe a HTML5 újdonságainak. Pedig véleményem szerint szép lehetőségeket jelentene, ha pár CSS3 eljárást használva megformázhatnánk a megjelenő szövegeinket.
Nézzük, milyen eszközeink vannak a szöveg formázására, kiiratására:
- Font (Értékei: betűcsalád, betűstílus, betűváltozat, betűméret és vastagság.)
- TextAlign (ahogy a neve is mutatja a szöveg igazítását szabályozza, értékei rendre a következők lehetnek: start, end, right, left, center)
- TextBaseline (a szöveg kezdőponthoz viszonyított abszolút helyzetét adja meg, értékei: top, hanging, middle, bottom, alphabetic, ideographic)
A következő ábra a WHATWG által demonstrált textBaseline tulajdonságot hivatott magyarázni. Nem gondolom hogy különösebb hozzáfűznivalót igényel, de annyi biztos, hogy egy kicsit túlzásba vitték a fiúk a Szilícium völgyben. :- )
textBaseline
Ebben a cikkben a <Canvas> elemről szeretnék pár érdekességet megosztani. A következőkben pedig, elmélyülünk, a használatában.
A HTML5-ben bevezetésre került <canvas> (rajzvászon) elem, figyelemreméltó lehetőségeket biztosít a webdesignerek és a játék fejlesztők számára egyaránt, hiszen
a <canvas> egy felbontástól független bitképes rajzvászon, grafikonok, játékgrafikák megjelenítésére használhatjuk.
Alapban ez egy üres téglalap alakú terület, (ha nem definiáljuk külön, akkor 300×150 pixeles) amelyre JavaScript-kódokkal tudunk rajzolni.
A Canvas jelenleg egy viszonylag jól kidolgozott 2D API-val rendelkezik, de véleményem szerint a 3D API végleges megjelenésére sem kell sokat várni, hiszen
akkora potenciál van benne, hogy vétek lenne nem kiaknázni.
A következőkben vizsgáljuk meg egy picit tüzetesebben a HTML5 új strukturális felépítését. Az alábbi kép jól demonstrálja, hogy mi is változott valójában.
HTML4 & HTML5
Elmondható, hogy a HTML5 egy letisztultabb, talán egyszerűbb struktúrát hoz magával. Nézzük az egyes elemeket, hogy is működnek:
<header> – Címsor/fejléc elem. Általában a szakasz címsorát (h1-h6 vagy hgroup) helyezik itt el.
<nav> – Itt kapnak helyet az oldal fontosabb navigációs (más helyekre mutató) elemei
<article> – A „cikk” elem, ahogy a nevéből is következik, egy önálló tartalommal rendelkező rész.
<section> – Ez képviseli a tartalom egyes fejezeteit.
<aside> – Egy olyan oldalsávot („dobozt”) jelöl, amely a tartalomhoz nem feltétlenül kapcsolódik, de annak mégis szerves része.
<footer> – Lábléc, jellemzően kapcsolati adatokat, vagy az adott szakaszhoz tartozó információkat jelenít meg.
Nézzük meg az új struktúrát a gyakorlatban, egy egyszerű példa segítségével: Tovább olvasom »