Laurentiu Macovei - jQueryMobile
Upcoming SlideShare
Loading in...5
×
 

Laurentiu Macovei - jQueryMobile

on

  • 342 views

 

Statistics

Views

Total Views
342
Views on SlideShare
342
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Salut, mă numesc Laurențiu Macovei și sunt responsabil cu alegerea tehnologilor în DotNetWise.[0:20]
  • Astăzi aș vrea să prezint o introducere în jQuery Mobile[0:30]
  • Câți dintre voi știți HTML? Dar jQuery ?Ar trebui să dau câte un premiu la fiecare ! Deoarece, aproape toți știm deja să facem aplicații mobile!jQuery Mobile înseamnă HTML5 + jQuery + CSS3 + evident, partea specifică de mobile [1:00]
  • jQueryMobile este o librărie relativ mică.Fiind aproape identică ca dimensiune cu jQuery (minimizată și compresată = 33kilo-bytes)În total având 66 kilo-bytes[1:30]
  • jQuery Mobile este un framework care folosește, evident, jQuery La fel ca jQuery, şi jQuery Mobile este OPEN SOURCE și gratuit[1:30]
  • jQueryMobile este doar una dintre librariile cu ajutorul căruia putem creea aplicaţii mobile cu HTML, CSS şi JavascriptIn tabelul de pe ecran avem o comparaţie între acestea 4.Desigur licenţierea a fost factorul semnificativ, KendoUI pierzând pentru că licenţa costă doar 999€ eur
  • Acesta și-a dorit de la început să funcționeze pe toate platformele și pe toate browserele.
  • Cross-platform sună bine dar avem 2 variante:* În browser* Hybrid în AppStore / Google Play / Windows Market etc.
  • Legat de platforme hibride, Georges Chițiga tocmai a avut o prezentare în sala Tokyo unde a arătat cum a compilat o aplicație web pe device-uri folosind PhoneGapAvantajul este uriaş, un singur cod în limbajul care-l ştim deja cu rezultate pe o multitudine de platforme
  • Legat de cross-browser, folosește tehnici de îmbunătățiri succesive a elementelor și efectelor suportate.În același timp pentru browserele care nu suportă anumite funcționalități acesta fie le va ascunde fie le va face să funcționeze minimal.
  • Avem 3 grade de experienţăA, suportă toate funcţionalităţile şi efectele
  • B, Fără suport de navigare ajax pe versiunile mai vechi de Blackberry, Opera Mini și Nokia Symbian
  • C, Ne pare rău, ne găsiți pe fix!Orice browser care nu suportă CSS-media queries
  • jQueryMobile spre deosebire de alte framework-uri sau limbaje se bazează pe cod în mod special HTML
  • La genul ăsta de cod HTML mă refer O să construim împreună o aplicaţie simplă şi vom acoperi o parte din funcţionalităţile jQueryMobile.Să începem!În primul rând includem CSS-ul şi javascript-ul specifice jq & jqMApoi adăugăm câteva elemente simple. Alături vedem cum arată --- arată ok, dar nu tocmai prietenos cu device-ul nostru mobil
  • Adăugând câteva atribute putem transforma aplicaţiile exitente în aplicaţii mobile.jQuery Mobile se foloseşte de standardul din HTML5, în sensul că toate atributele specifice lui încep cu data-”nume atribut”Data-Role este cel mai important dintre ele, stabilind rolul acelui element.O să descoperim aceste roluri împreună.Un premiu pentru cine ştie de ce e subliniat?--Acel footer, nu arată tocmai potrivit la mijlocul paginii...
  • ... dar putem să-l facem să stea fix în partea de jos a device-ului, indiferent de dimensiunea paginii.Astfel, dacă pagina este foarte lungă acesta va pluti deasupra conţinutului.
  • Vrem să creem un tutorial prin care apăsând Înainte /înapoi pentru a naviga prin pagini.Să adăugăm două butoane pentru navigarea în aplicaţia noastră.Pentru asta folosim data-role=„navbar” în interiorul unui footer.Pentru a face aplicaţia mai uşor de urmărit, vom adăuga şi două iconiţe aferente butoanelor :)În navbar putem avea maxim 5 butoane pe un singur rând, pentru a putea apăsa cu degetele mari pe ecranul mic
  • Să dăm puţină culoare aplicaţiei noastre!Folosim data-theme pentru a specifica ce culoare să aibe elementul nostru.Acest atribut poate fi aplicat în multe locuri... Pe pagină, în header, în footer, pe un buton etc.jQueryMobile vine standard cu 5 teme numite de la A la E – negru, albastru, gri, argintiu, galben....şi în acelaşi timp vine şi cu posibilitatea de a extinde aceste teme, cu oricâte altele dorim noiVă voi prezenta aceste teme puţin mai încolo pentru a descoperi controalele unul câte unul
  • Renunţăm la butoanele colorate şi ne gândim să adăugăm o nouă funcţionalitate: două butoane şi în header.Unul pentru back şi unul pentru setările aplicaţiei.Orice link poate fi decorat într-un buton folosind data-role=„button”Insă în header şi footer nu e nevoie să folosim acest data-role, deoarece el este considerat implicit.Back este un buton destul de comun, aşadar nu trebuie să implementăm nici un cod pentru ca acesta să funcţioneze.Este suficient să specificăm data-rel=„back”Tot aici putem vedea că nu avem nici un text pe butonul Settings, deoarecem am specificat data-iconpos=„notext”
  • Să adăugăm ceva conţinut banal... De exemplu o versiune scurtă a agendei de astăzi Din nou nu arată tocmai spectaculos.
  • Adăugând atributul data-role=„listview” pe o listă (ul, sau ol) – jqueryMobile îmbunătăţeşte semnificativ felul în care randează acea listăŞi totuşi, avem o listă read only... Nu prea ne ajută mare lucru.... Ne-ar trebui nişte linkuri unde să navigăm la opţiunile din listăSă le adăugăm!
  • Simplu!Le-am adăugat... Şi acum arată întradevăr ca o aplicaţie mobilă.Se zice, o imagine face cât o mie de cuvinte! Să adăugăm....mai multe 
  • În momentul în care jQuery Mobile detectează primul tag în elementele listei noastre, va adăuga nişte clase css speciale pentru a le face să încapă corect în listă.Ultima imagine este transparentă.Cred că ar fi util să ştim la ce oră încep aceste evenimente.
  • Nimic mai simplu. Adăugăm un span cu clasa „ui-li-count” şi textul dorit.Toate clasele din jQuery Mobile încep cu ui-ceva.... ui-button, ui-bar, ui-body etc.
  • Dacă nu vrem acel border, avem clasa ui-li-aside.Acestă listă este scurtă, dar dacă am avea una lungă, atunci ne-am dori să putem grupa elementele după „capitole”
  • Putem decora anumite elemente li cu data-role=„list-divider” – aşa vom crea captiolele…... Acum, lista noastră ocupă tot ecranul pe orizontală.Dacă avem mai multe elemente pe pagină putem să o facem ca un element distinct.
  • Cu data-inset putem rezolva treaba asta Acum lista noastră este organizată, dar touşi are foarte puţine elemente.Dacă ar avea mai mult de 10 ne-am dori să putem căuta printre ele.
  • Cu data-filter=true activăm opţiunea de căutare şi cu data-filter-placeholder specificăm textul care apare in text-boxul de căutare, desigur Perfect... Avem liste, organizate... Căutabile... Dar nu putem introduce încă nimic în aplicaţie.
  • Să trecem prin elementele formurilor.Acestea pot fi puse tot în liste, decorând elementul cu data-role=„fieldcontain”Elementele în sine sunt basic HTML5 – input type=search, textarea şi input type=„text”
  • Aici avem două tipuri de slide-uri, unul „on / off” şi unul numeric, de tip intervalApoi avem ceva interesant, două butoane puse pe aceeaşi linie.Practic cu ui-grid specificăm căte elemente vom avea i.e. Ui-grid-a = 2, b=3, c=4, d=5 si solo = 1 Apoi cu ui-block-a specificăm primul element şi tot ăşa.Aceste organizări logice sunt în special utile pentru controale diferite, sau care nu pot fi grupate automat.
  • Spre exemplu, checkbox-urile sunt controale ce pot fi grupate automat în intereriorul unui FieldsetLe putem desena vertical sau orizontal specificând acest lucru cu atributul data-type.Un premiu pentru cine poate să-mi spună în 15 secunde ce atribut HTML standard lipseşte din codul de aici?
  • Încă un premiu pentru cine îmi spune ce e greşit în HTML-ul de pe ecran Exact la fel sunt şi radio-butoanele.Pentru toate controalele de tip „form elements” avem versiunea mare şi una mini atunci când vrem să spunem multe lucruri pe ecrane mici 
  • Aici am defint un „Swatch” cum îl definesc cei de la jquery mobile. Poate fi aplciat pe orice container i.e. Div şi aplică aceeaşi temă tuturor elementelor conţinute.Toate controalele sunt randate cu data-mini=true şi cu toate asta încap doar câteva  Încă un premiu pentru cine poate să-mi spună cum a dispărut textul butoanelor Next şi Prev
  • Am renunţat la theme-swatch şi am revenit la nişte culori mai calde.Aici am definit un element de tip select. Acesta este desenat în concordanţă cu toate celelelalte elemente din jQueryMobile în mod automat
  • Însă meniul selectului este cel specific browser-uluiUhm, nu arată tocmai potrivit
  • Putem dezactiva meniul select-ului de sistem şi afişa unul îmbunătăţit cu data-native-menu=falseAm văzut multe controale, dar oare ce se întâmplă dacă întoarcem telefonul / device-ul
  • Rotind device-ul avem parte de o experienţă diferită, toate controalele beneficiind de un spaţiu suficient – pe iPhone 5Pe un iPhone3 e cu totul altă poveste
  • Scrollb-arul nu apare pe device, dar l-am afişat ca să fie evident că avem de făcut scrollDar oare pe IPad cum arată?
  • Pe iPad am adăugat toate controlele de le-am folosit până acum şi arată excelent
  • Ce înseamnă asta pentru tine?3 paşi spre success:TesteazăTesteazăTestează
  • Un exemplu de aplicaţie mai complexă – un client de email făcut cu jQuery Mobile
  • Simplist cum ne putem juca cu jQuery Mobile
  • Theme-roller-ul de care v-am vorbit. Cu el putem customiza fiecare temă şi fiecare tip de element
  • Ultima versiune 1.2.0 a fost lansată foarte recent.La această versiune au contribuit 197 de oameni în afară de angajații jQuery Mobile
  • jQueryMobile este singura tehnologie OPEN SOURCE prezentată astăzi pe track-ul de mobile.Ce înseamnă asta pentru tine? Înseamnă că și tu poți contribui cu îmbunătățiri, fix-uri și chiar noi funcționalități care vor intra în versiunile următoare.
  • jQueryMobile este singura tehnologie OPEN SOURCE prezentată astăzi pe track-ul de mobile.Ce înseamnă asta pentru tine? Înseamnă că și tu poți contribui cu îmbunătățiri, fix-uri și chiar noi funcționalități care vor intra în versiunile următoare.
  • Nu uita de feedback!Vă mulţumesc în numele organizatorilor Codecamp pentru timpul acordat şi vă aşteptăm şi la evenimentele următoare!Incă un premiu pentru cine ştie de ce tot apare pisica aia în aplicaţie!!

Laurentiu Macovei - jQueryMobile Laurentiu Macovei - jQueryMobile Presentation Transcript

  • Introduction toLaurențiu MacoveiDotNetWise[10th of November 2012]
  • =+ + mobile + .
  • Lightweight sizejQuery Mobile is 33kb + jQuery = 66kb
  • OPEN SOURCE, FREE
  • Just one among the others http://wp.nu/mobilecompare
  • Aggressively cross-platform, cross-browser
  • +
  • Focused on progresive ehnancement and graceful degradation
  • A-grade - Full enhanced experience with Ajax-based animated page transitions. most browsers
  • A-grade - Full enhanced experience with Ajax-based animated page transitions.B-grade - Enhanced experience except without Ajax navigation features. Blackberry 5.0*, Opera Mini 7, Nokia Symbian^3
  • A-grade - Full enhanced experience with Ajax-based animated page transitions.B-grade - Enhanced experience except without Ajax navigation features.C-grade - Basic, non-enhanced HTML experience that is still functional Blackberry 4.x, Windows Mobile, all non-CSS media queries
  • Markup drivenminimal code required to get up and running
  • Markup driven
  • Add data-role to decorate elements
  • Make the footer fixed
  • Group max 5 buttons in a navbar
  • Add data-theme=X to apply skins
  • Add data-rel=back for back button
  • Add data-role=listview to lists
  • Add data-role to decorate elements
  • Add round box text with ui-li-count
  • Add aside text with class ui-li-aside
  • Categories with data-role=list-divider
  • Add data-inset=true for round lists
  • Add data-filter to enable filtering
  • Add data-role=fieldcontain in forms
  • Organize elements with ui-grid andui-block
  • Add data-role=controlgroup togroup checbokxes or radios
  • Add data-role to decorate elements
  • Add class ui-body and ui-body-xto create swatches
  • Select element is self-enhanced
  • Add class ui-body and ui-body-xto create swatches
  • Disable system menu withdata-native-menu=false
  • Rotate the device for a different experience
  • Every device is different
  • What’s not included in the boxSingle page templatesMulti page templatesDialogs and PopupsTransitions bweteen pagesAjax pages
  • Demo LiveCodecamp Feedback application
  • released on 2 october, 2012list of almost 200 contributors
  • Contribute!
  • Q&A
  • Diamond SponsorsPlatinum Sponsors Gold SponsorsTraining Partners Media Partners Other Partners