SZABADKAI MŰSZAKI SZAKFŐISKOLA E-mobil prezentáció dokumentációja JELÖLT MENTOR Varga Tamás dr Zlatko Čović SZABADKA, 2015.
TARTALOM HTML 5 használata a mobilfejlesztésben... 2 HTML5 Struktúrája... 3 Egy HTML5 kód... 4 Mobil alkamazásokban... 5 HTML 5 előnyei... 6 HTML5 hátrányai... 6 Mik a fő okok amiért HTML5-öt használnak a mobilfejesztők?... 7 Mik a fő okok amiért elpártolnak a HTML5-től?... 8 Teljesitmény... 9 HTML5 teszt... 9 1
HTML 5 használata a mobilfejlesztésben A HTML5 a HTML korábbi verzióinak az átdolgozott változata. A kifejlesztésének egyik fő célja, hogy a webes alkalmazásokhoz ne legyen szükség pluginek (pl. Adobe Flash, Microsoft Silverlight, Oracle JavaFX) telepítésére. A specifikáció a HTML4 és az XHTML1 új verzióját jelenti, a hozzájuk tartozó DOM2 HTML API-val együtt. A HTML5 specifikációban leírt formátumba történő migráció HTML4-ről, vagy XHTML1-ről a legtöbb esetben egyszerű, mivel a visszamenőleges kompatibilitás biztosított. A specifikáció a közeljövőben támogatni fogja a Web Forms 2.0 specifikációt is. 2
Manapság nagyon sokat hasznaljak az emberek mobil eszközeiket. Közössegi oldakra járnak fel velük, vásárolnak rajtunk, mindeféle ügyeket intéznek rajtuk keresztül. Nagyon fontos, hogy lepést tartsunk a korszerű, modern technológiákkal, pl a mobil internet fejlődésével. Az emberek nagyon gyakran mobiltelefonjukat használját a böngészésre. A HTML5 bevezet jó néhány új elemet (címkét) és tulajdonságot, amelyek a modern weblapokon jellemzően alkalmazott szerkezetekre kínálnak új megoldást. Néhány változtatás szemantikai jellegű, például az általánosan használt <div> és a soron belüli részek formázását biztosító <span> helyett a <nav> (a weboldal navigációs területe) és a <footer> (lábléc). Más elemek új funkciók elérését biztosítják szabványosított felületen, mint az <audio> és a <video> elemek. Néhány a HTML 4.01-ben már érvénytelenített elem az új szabványba már nem került be. Ilyenek a mai weblapokon még gyakran jelenlévő <font> és <center> elemek, amelyek hatását most már végleg CSS kóddal kell megvalósítani. Újra hangsúlyt helyeztek a DOM szkriptek (gyakorlatilag a JavaScript) jelentőségére a weboldalak viselkedésével kapcsolatban. A jelölések hasonlósága ellenére a HTML5 szintaxisa már nem az SGML-en alapul. Ezzel együtt úgy tervezték, hogy visszafelé kompatibilis legyen, így a korábbi HTML szabványokhoz készült elemzők a szokásos elemeket megérthetik. Már a kezdetekben is tudták, hogy a HTML5 hatalmas méreteket fog ölteni. 2016-ra 2.1 milliárdra fog nőni a HTML5 kompatibilis eszközök száma. HTML5 Struktúrája <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html5</title> </head> <body> Content </body> </html> 3
Egy HTML5 kód <!DOCTYPE html> <html lang="en"> <head> <title> Index </title> <link rel="stylesheet" href="default.css" /> <script type="text/javascript"> </script> <meta charset="kívánt utf-8" /> </head> <body> <header id="header"> <img src="index.jpg" alt="logo " /> </header> <section id="content"> <nav id="menu"> <a href="">menu1</a> <a href="">menu2</a> <a href="">menu3</a> <a href="">menu4</a> <a href="">menu5</a> </nav> <div id="content2"> <p> Content 4
</p> </div> </section> <footer> <p> Paragraph </p> </footer> </body> </html> Mobil alkamazásokban Három féle mobil alkalmazást tudunk megkülönböztetni. Native app. - Főleg Android ra és IOS-re használják. A natív alkalmazások fejlettebbek, szebbek és gazdagabb a funkcionalitásuk. Miután ezek képesek kihasználni az okostelefonok beépített szolgáltatásait (fényképezőgép, érintőképernyő, GPS, stb,), a fejlesztők számára több lehetőség van, hogy a felhasználókat lekössék, az alkalmazást vonzóvá tegyék. Kutatások alapján mondhatjuk, hogy a visszatérő felhasználók aránya a natív alkalmazások esetén összehasonlíthatatlanul nagyobb, mint a mobil web alkalmazásoknál. HTML5 Szabványos webtechnologiákat használja, HTML,CSS, JS. Ezeket különféle eszközökön lehet futtatni. Fejlesztésük olcsóbb, hiszen nem kell a különböző készülékekre különböző változatokat fejlesztetni. Az alkalmazások karbantartása is egyszerűbb, a módosítás azonnal elérhető a felhasználók készülékein, nem kell semmit letölteni, és nem kell azt sem megvárni, hogy a fejlesztések a különböző piacterek engedélyezési folyamatán átmenjenek. Hibrid alkalmazás ezek az alkalmazások kompromisszumot jelentenek a mobil web és a natív alkalmazások között, hiszen a fejlesztői környezetük biztosítja a készülékek közötti kompatibilitást, miközben képesek kihasználni a telefonok bizonyos szolgáltatásait. Úgy kell elképzelni, hogy a hibrid alkalmazások olyan natív alkalmazások, melyekben beépített HTML kód is van. Legismertebb ilyen a Facebook alkalmazás, melyet a piacterekről lehet letölteni, rendelkezik a natív alkalmazások összes lényeges tulajdonságával, de a használathoz az internet elérés szükséges, onnan tölti a frissítéseket.. 5
Nincs jobb vagy rosszabb választás. Mind három kategóriának megvannak a maguk előnyeik és hátrányaik HTML 5 előnyei -Platform független -Könnyű felismerhetőség -Nyilt forráskód -clean code -Játékfejlesztés HTML5 hátrányai -Lassú teljesitmény -Egyerű kinézet -Nativ app. 6
Mik a fő okok amiért HTML5-öt használnak a mobilfejesztők? 7
Mik a fő okok amiért elpártolnak a HTML5-től? 8
Teljesitmény Kezdetben a HTML5 rosszul nézett ki a böngészőben, nem lehetett komplex applikaciókat csinalni vele. Ezért sokan el is pártoltak tőle. Idővel sokat fejlődött es kiváló felhasználói elégedettséget keltő oldalakat illetve alkalmazásokat lehetett venni elkésziteni. Sok tulajdonság belekerült pl: CSS3 kombatibilitás, 2D animációk, Webstorage stb. Közel Nativ app szintű applikációkat lehet vele csinálni. Our biggest mistake was betting too much on HTML5 Mark Zuckenberg HTML5 teszt iphone 4S /Safari //canvas: gyors HTC Sensation, Android 4.0.4: /Chrome //canvas: lassú //dom: gyorsabb, de nagyokat akad néha 9
/Firefox //canvas: nagyon lassú //dom: lassú Overmax 10II tablet, Android 4.2.2 /Chrome //canvas: jó //dom: nagyon jó, bár néha beakad /Firefox //canvas: jó //dom: lassú 10