A HTML 5 újdonságai avagy a web új

A HTML 5 újdonságai (avagy „a web új szabványa”) Készítette: Büki Krisztina és Vincze Gábor

Bevezetés n n n 40 éve – az Internet őse 35 éve – az Internet kifejezés bekerül a köztudatba 20 éve – a világháló megjelenése 15 éve – elfogadták a HTML első szabványos verzióját 10 éve – elindult a pályamódosítás az XHTML irányába A „HTML 5 + CSS 3” döntően a World Wide Web Consortium (W 3 C), a böngészőgyártók egyesülete (WHATWG) és a Wikipedia publikációi alapján készült: A HTML-nek (Hypertext Markup Language), a web fő jelölőnyelvének a következő, jelentősen átdolgozott változata. Egyes elemeinek fejlesztése és szabványosítása még folyamatban (még módosulhatnak) Az összes piacon lévő böngésző jó úton halad az implementálással (csak az Internet Explorer van lemaradva a többiektől)

HTML 5 – így történt n Megalakul a WHAT Munkacsoport (Web Hypertext Applications Technology Working Group) 2004. júniusában n Alapítói az (IE-hez képest) alternatív böngészőgyártók. n Céljuk egy a W 3 C-tól független, annál hatékonyabban működő, nyitott, laza összefogás, és a HTML 4. 01 -ben definiált „form” elemek bővítése. n Elkezdték a Web Forms 2. 0, Web Apps 1. 0 és Web Controls 1. 0 dokumentumok elkészítését n A W 3 C végül 2007 -ben kezdett el együtt működni WHATWGvel. n A Web Apps 1. 0 -ba végül beleolvadt a Web Forms 2. 0, és átnevezték HTML 5 -re

Megjelenés, CSS 3 n A CSS 3 segítségével még soha nem volt ilyen egyszerű a szép és részlet gazdag HTML oldalak készítése. Rengeteg új módosítást alkalmazhatunk a dokumentum szinte bármely elemére (egész pontosan a DOM - Document Object Model - elemekre). A számos új CSS 3 fejlesztés közül lássunk néhány fontosabbat: n 2 D transzformációk n Áttűnési effektek n 3 D transzformációk n Web. Fonts (egyéni betűtípusok használata egyszerű és egységesített módon)

Megjelenés - 2 D Transzformációk n Mozgatás, forgatás, skálázás, elferdítés <style>. rotate-45 { -webkit-transform: rotate(-45 deg); -moz-transform: rotate(-45 deg); }. rotate 75 { -webkit-transform: rotate(75 deg); -moz-transform: rotate(75 deg); }. rotate 90 { -webkit-transform: rotate(90 deg); -moz-transform: rotate(90 deg); }. rotate 90 plus { -webkit-transform: rotate(45 deg); -moz-transform: rotate(45 deg); -webkit-transform-origin: 50%; -moz-transform-origin: 50%; }. scale 02 { -webkit-transform: scale(0. 2); -moz-transform: scale(0. 2); }. scale. X 2 { -webkit-transform: scale. X(2); -moz-transform: scale. X(2); }. scale. Y 15 { -webkit-transform: scale. Y(1. 5); -moz-transform: scale. Y(1. 5); }. skew. X 10 { -webkit-transform: skew. X(10 deg); -moz-transform: skew. X(10 deg); }. skew. X 30 { -webkit-transform: skew. X(30 deg); -moz-transform: skew. X(30 deg); }. skew. Y 20 { -webkit-transform: skew. Y(20 deg); -moz-transform: skew. Y(20 deg); } </style> 2 d_transzformacio. html

Megjelenés - Web. Fonts n Egyéni betűtípusok használata egyszerű és egységesített módon. <style> @font-face { font-family: 'Cactus'; font-style: normal; font-weight: normal; src: local('Cactus'), url('Cactus. Sandwich. ttf') format('truetype'); } @font-face { font-family: 'Space. Age'; font-style: normal; font-weight: normal; src: local('Space. Age'), url('space_age. ttf') format('truetype'); } </style> Web. Fonts. html

Megjelenés - Áttűnési effektek n Stílusbeli átmenetet lehet velük létrehozni a dokumentum elemein, különböző eseményekre <style> div { font-size: 30 px; background: -moz-linear-gradient(0% 0% 270 deg, #00 abeb, white 50%, #66 cc 00 51%, white 100%); background: -webkit-gradient(linear, left top, left bottom, from(#00 abeb), to(white), color-stop(0. 5, white), color-stop(0. 5, #66 cc 00)); } div: hover{ background: -webkit-gradient(radial, 430 50, 0, 430 50, 506, from(red), to(#000)); background-image: -moz-radial-gradient(430 px 50 px 45 deg, circle cover, red 0%, black 100%); } </style> attunes_gradiens. html

Multimédia n Videó n Audió n Helymeghatározás (Geo Location) n Fájl be/ki húzása a böngésző ablakból (Drag In, Drag Out) n Oldalon belüli „fogd és vidd” (Drag and Drop)

Multimédia – Videó n n n Natív videó lejátszás támogatása a böngészőkben (tehát nem kell hozzá kiegészítő lejátszó plugin) Támogatott formátumok: • . mp 4 H. 264 + AAC • . ogg/. ogv Theora + Vorbis • . webm VP 8 + Vorbis Nem támogatott formátum vagy szükség esetén van lehetőség flash vagy egyéb plugin betöltésére is <video id="video_with_controls" width="320" controls autobuffer> <source src="video/chrome. mp 4" type="video/mp 4" /> Your browser does not support video tag! </video> video. html

Multimédia – Helymeghatározás <script> var map; var infowindow = new google. maps. Info. Window(); var map. Options = { zoom: 13, map. Type. Id: google. maps. Map. Type. Id. ROADMAP }; if (navigator. geolocation) { navigator. geolocation. get. Current. Position(show. Position, on. Error); navigator. geolocation. watch. Position(show. Position); } else { on. Error(); } function show. Position(position) { map = new google. maps. Map(document. get. Element. By. Id("content"), map. Options); var lat = position. coords. latitude; var lng = position. coords. longitude; initial. Location = new google. maps. Lat. Lng(lat, lng); map. set. Center(initial. Location); infowindow. set. Content(lat + " " + lng); infowindow. set. Position(initial. Location); infowindow. open(map); } </script> Geo. Location. html

Multimédia – Drag In, Drag Out n n Igazából egy „Drag and Drop” (fogd és vidd) rendszer, amit eddig nem lehetett. Mostantól lehetőség van egy weboldalra „bedobni” vagy onnan „kihúzni” elemeket (pl. képeket, fájlokat, stb. ), kihagyva a tallózás vagy a mentés másként lépést. <script> var content = document. get. Element. By. Id('content'); content. ondragenter = function() { return false; } content. ondragover = function() { return false; } content. ondragleave = function() { return false; } content. ondrop = function(event) { return false; } </script> file_drag_in. html

Grafikai és rajzoló fejlesztések n Mostanáig a weboldal fejlesztőknek csak a CSS és a Java. Script állt a rendelkezésére, hogy animációkat és szép vizuális effekteket készítsenek, vagy kénytelenek voltak valamilyen kiegészítő plugint használni, mint amilyen a Flash. n Canvas (vászon) Egy rajzolófelület, amire Java. Script-tel lehet rajzolni. Web. GL Elérhető a hardveres gyorsítás a böngészőből (Open. GL ES). SVG (Scalable Vector Graphics) Egy XML alapú leíró nyelv, kétdimenziós, statikus és mozgó vektorgrafikák meghatározására. SMIL (Synchronized Multimedia Integration Language) Olyan leíró nyelv, amivel prezentációkat lehet készíteni. n n n

Új adattárolási módok Eddigi lehetőségek adattárolásra: • sütik (cookies) • plugin-alapú tárolási módok (flash és java is lehetővé tette) n n n Új HTML 5 funkciók: Alkalmazás cache (offline böngészés) Lehetővé teszi, hogy internet kapcsolat nélkül is elérjünk bizonyos tartalmakat. Helyi tárolók Web SQL & indexelt adatbázisok SQL adatbázis kezelés natív támogatása a böngészőkben File hozzáférés Java. Script alapú file olvasás lehetősége gyakorlatilag minden olyan feladatra, amire a fentiek nem képesek.

Adattárolás – Helyi tárolók n n A sütik leváltására készült, egyszerű kulcs-érték párokkal lehet vele tárolni bármilyen Java. Script objektumot. Létezik egy olyan variációja is, ami a böngésző ablak bezárásával törlődik (session storage), hogy biztonságos legyen. Local storage: area. add. Event. Listener('keyup', function () { window. local. Storage. set. Item('value', area. value); }, false); area. value = window. local. Storage. get. Item('value') Session storage: if (!session. Storage['counter']) { session. Storage['counter'] = 0; } else { session. Storage['counter']++; } local_storage. html

Összefoglalás n n Mint a fentiekből is látható, izgalmas korba születtünk. Sok olyan részlet van, melyeket már ma is tudunk használni. Pár év kell még a HTML 5 és a CSS 3 szabványok véglegesítéséhez. Amely böngészők nem támogatják az újításokat, ott is működőképesek lehetnek (Java. Script vagy más módszerekkel), vagy egy fapadosabb megoldással lehet helyettesíteni őket.

Köszönjük a megtisztelő figyelmet!