SZABADKAI MŰSZAKI SZAKFŐISKOLA. PREZENTÁCIÓ E-mobil tantárgyból Jquery Mobil Keretrendszer SZABADKA, 2015.

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "SZABADKAI MŰSZAKI SZAKFŐISKOLA. PREZENTÁCIÓ E-mobil tantárgyból Jquery Mobil Keretrendszer SZABADKA, 2015."

Ferenc Áron Hegedűs
8 évvel ezelőtt
Látták:

1 SZABADKAI MŰSZAKI SZAKFŐISKOLA PREZENTÁCIÓ E-mobil tantárgyból Jquery Mobil Keretrendszer JELÖLT MENTOR Kokrehel Grácián dr Zlatko Čović SZABADKA, 2015.

2 Tartalomjegyzék Bevezető... 3 Sajátosságok... 4 Alkalmazása... 5 Jellegzetessége Theme-Roller... 7 Hátrányok... 8

BEVEZETŐ A Jquery Mobile érintőképernyőre optimalizált webes keretrendszer (mobile keretrendszerként is ismeretes), még pontosabban Javascript könyvtár. A jquery csapata fejleszti jelenleg.

3 BEVEZETŐ A Jquery Mobile érintőképernyőre optimalizált webes keretrendszer (mobile keretrendszerként is ismeretes), még pontosabban Javascript könyvtár. A jquery csapata fejleszti jelenleg. A fejlesztés célja egy olyan keretrendszer ami széleskörüen kompatibilis a különböző okostelefonok tablettek körében, leginkább a gyorsan fejlődő eszközök tették szükségessé. A Jquery Mobile kompatibilis más mobil alkalmazás keretrendszereivel és platformaival. Mint pl. PhoneGap és Worklight. jquery Mobile framework takes the "write less, do more mantra to the next level. Jquery Team

A fejlesztés célja egy olyan keretrendszer ami széleskörüen kompatibilis a különböző okostelefonok tablettek körében, leginkább a gyorsan

4 SAJÁTOSSÁGOK Kompatibilis minden jelentősebb böngészővel, valamint az összes jelentősebb mobil platformmal, mint az Android, IOS, Windows Phone, Blackberry, Webos, Symbian Egyszerű megtanulni mert a jquery-re épül, ezért a szintaxis már sokak számára ismeretes Témázási keretrendszer, ami lehetővé teszi a témák létrehozását Kevés függőséggel rendelkezik és pehelysúlyú a sebesség érdekében Ugyanaz a kódalap bármilyen képernyőre átméreteződik HTML5 alapú konfiguráció az oldalak elrendezése, minimális scripteléssel AJAX alapú navigáció, animált oldalátmenetek, amik lehetővé teszik a szemantikus URL- ok létrehozását push Staten keresztül Érintésre optimalizált és platform független felhasználói interfészek

rendelkezik és pehelysúlyú a sebesség érdekében Ugyanaz a kódalap bármilyen képernyőre átméreteződik HTML5 alapú konfiguráció az oldalak elrendezése, minimális scripteléssel

5 ALKALMAZÁSA Két féleképp lehet a Jquery Mobile könyvtárat hozzáadni a weboldalunkhoz: link a Jquery Mobile hivatalos oldalán levő könyvtárra link a számítógépen tárolt könyvtárra A hivatalos oldalra mutató link a jobbik megoldás mert, ha frissítés történik a könyvtárban akkor nem kell újra letölteni a fájlt. Csatolni kell a viewport jelölőelemet a megfelelő renderelés és éríntés zoom végett. <meta name="viewport" content="width=device-width, initial-scale=1"> A Jquery Mobile használatához szükség van a Jquery könyvtárára is, máskülönben nem müködik. példa: <head>  <meta name="viewport" content="width=device-width, initialscale=1">  <link rel="stylesheet" href="  <script src=" min.js"></script>  <script src=" min.js"></script> </head>

<meta name="viewport" content="width=device-width, initial-scale=1"> A Jquery Mobile használatához szükség van a Jquery könyvtárára is, máskülönben nem müködik. példa: <head> <!

Jellegzetessége The data role: "page" a lap ami megjelenik a böngészőben "header" létrehoz egy eszköztárat a lap tetején (gyakran használják címnek vagy

6 Jellegzetessége The data role: "page" a lap ami megjelenik a böngészőben "header" létrehoz egy eszköztárat a lap tetején (gyakran használják címnek vagy kereső gombnak) "main" definiálja az oldal tartalmát, mint szöveg, képek, gombok, formok, stb. "footer" létrehoz egy eszköztárat a lap alján The data theme: "a" "b"

kereső gombnak) "main" definiálja az oldal tartalmát, mint szöveg, képek,

The data position (hol lesz majd renderelve): "fixed" "top" "bottom" The data transition: "fade" az alapértelmezett, kifakul a következő oldalra "flip" átdobódik a másik oldalra "flow" az aktuális

7 The data position (hol lesz majd renderelve): "fixed" "top" "bottom" The data transition: "fade" az alapértelmezett, kifakul a következő oldalra "flip" átdobódik a másik oldalra "flow" az aktuális oldal kimegy és a következő oldal bejön "pop" mint felugró ablak megy a következő lapra The data icon : meghatároz egy ikont a többi beépített közül Theme Roller Több féle stílus összehasonlítását, színek kombinációját a különböző elemeken (gombok, szövegek, beviteli mezők, stb) teszi lehetőve. Mindent betudunk állítani mi magunk kódolás nélkül. A műveelt végén letölthető a számunkra megfelelő téma stíluslapja.

többi beépített közül Theme Roller Több féle stílus összehasonlítását, színek kombinációját a különböző elemeken (gombok, szövegek, beviteli mezők, stb) teszi

8 Hátrányok A legelső kérdés amit fel kell tenünk magunknak, hogy miért használjam a jquery-t, mert veszélyeket takat: A Jquerynek nagy közössége van, de kicsi a tanulási görbéje. És ebből fakadóan sok az olyan nyíltforráskódú gyöngén megírt lassú alkalmazás. Csökken a kód minősége. Könnyű össze-vissza írkálni a kódot, ezzel veszitve a hatékonyságból A Jquey nagyon nagy könyvtár a legtöbb esetben apró részleteket használunk mégis az egész könyvtárat inkludolni kell, sok biteot lehet megtakarítani, ha széleskörűen használjuk Megoldás: Először legyünk tisztában az alapokkal és így elkerülhetjük azt a híbát amit sok kezdő programozó nem tesz meg. Lehet, hogy könnyebb a jquery-ben kódolni, de nem minden esetben kifizetődő.

Könnyű össze-vissza írkálni a kódot, ezzel veszitve a hatékonyságból A Jquey nagyon nagy könyvtár a legtöbb esetben apró részleteket használunk mégis az egész könyvtárat inkludolni

9 FELHASZNÁLT IRODALOM W1. W2. W3.

Hasonló dokumentumok

SZABADKAI MŰSZAKI SZAKFŐISKOLA. E-mobil prezentáció dokumentációja SZABADKA, 2015.

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