PW10 MobileWeb

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Curs Programare Web, anul 4 C5 Curs 12 1

Dezvoltarea aplicaiilor Web pentru
dispozitive mobile
Ciprian Dobre
ciprian.dobre@cs.pub.ro
Mobile Web
Mobile Web mediu n care site-urile Web sunt accesate
folosind dispozitive mobile
Ubiquity Dispozitivele mobile ofer astaz conexiune
Internet i schimb de informaie n diverse condiii
Connected anytime, all the time
Telefoanele mobile, tabletele diversitate
Plus
Avem de unde alege n oferta de dispozitive mobile
Costuri din ce n ce mai reduse
Minus
Adaptarea la coninut: dificil de adaptat coninutul Web pentru a se
potrivi cu orice device
Compatibilitate: greu de construit o aplicaie care s funcioneze pe
orice device
Curs Programare Web, anul 4 C5 Curs 12 2
Thats
your
client
20.05.2010 Curs Programare Web, anul 4 C5 Curs 12 3
Diferene ntre dispozitive mobile
Dispozitivele mobile au diferene n special
dictate de:
Viteza conexiunii la Internet
Dimensiunea ecranului
Memorie
Puterea de procesare
Suportul browserului
Dispozitivele mobile mai vechi suport capabiliti
de browsing limitat (e.g., WAP)
Dispozitivele mobile mai noi suport navigare Web
apropiat de modelele desktop tradiionale
Dimensiuni diferite ale ecranului
7
Diferene
Feature Web app Mobile app
Graphics Strong Unlimited
User interaction Strong Unlimited
Network usage High Varies
Accessible from Any computer Where installed
Upgrade cost Update servers System Update
Data backup cost Backup servers Device Service
Popularity Increasing Dominant
Dispozitive mobile
Telefoanele mobile sunt capabile s
afieze coninut Web formatat special
Folosind Wireless Access Protocol (WAP)
WAP reprezint o alternativ la HTTP
Creat datorit restriciilor legate de viteza
sczut i latenele ridicate ale mediilor
wireless
Telefoanele cu suport WAP folosesc Wireless
Markup Language (WML) pentru a nelege
coninutul mobil
Dezvoltarea aplicaiilor Web mobile
Wireless Application Protocol (WAP) (since 1999 2000)
WML este folosit pentru dezvoltarea de aplicaii Web pentru
dispozitive mobile
Tehnologie standardizat pentru accesarea Internetului
folosind dispozitive mobile
WAP are la baz XML: folosete Wireless Markup Language
(WML)
1. Wireless Markup Language
Servete acelai scop ca i HTML, dar este creat pentru a
descrie coninut ce trebuie afiat pe dispozitive cu capabiliti
limitate de afiare
2. WMLScript
mbuntete funcionalitatea serviciilor Web, similar
JavaScript
Arhitectura WAP
Application
Wireless Application Environment (WAE)
Session
Wireless Session Protocol (WSP)
Transaction
Wireless Transaction Protocol (WTP)
Security
Wireless Transport Layer Security (WTLS)
Transport
Wireless Diagram Protocol (WDP)
Modelul WAP
1. Utilizatorul introduce un URL ce nelege
WML
2. Telefonul trimite cererea URL prin mediul
wireless ctre un gateway WAP
3. Gateway-ul traduce cererea WAP ntr-o
cerere convenional HTTP
4. Serverul Web rspunde cererii HTTP
(rspunsul conine att headerul HTTP, ct
i coninutul WML)
Modelul WAP
5. Gateway-ul WAP compileaz coninutul
WML ntr-o form binar
6. Apoi trimite rspunsul WML napoi ctre
telefon
7. Telefonul primete continutul WML prin
intermediul protocolului WAP
8. Micro-browserul telefonului proceseaz
coninutul WML i l afieaz pe ecran
Dezvantajele WAP
Pe msur ce dispozitivele mobile au nceput
s furnizeze capabiliti tot mai avansate
(e.g., rezoluii ale ecranului, suport pentru
procesare), protocolul WAP a nceput s
devin ineficient
Specificaia WAP original este incapabil s in
pasul cu creterea capabilitilor tehnologiei
mobile
Restriciile impuse de providerii wireless au
nceput s fac dificil accesarea de ctre clienii
wireless a mai mult de simple portaluri Web (vezi
modelul iOS)
Eforturile de standizare ale W3C
pentru Mobile Web Development
World Wide Web Consortium (W3C) a stabilit o serie de
reguli pentru a ajuta la dezvoltarea aplicaiilor Web
Iniiativa W3C Mobile Web
Set de guidelines and best practices pentru
dezvoltarea aplicaiilor Web pentru dispozitive mobile
mobileOK: specificaie ce determin modul n care
coninutul Web poate fi afiat sau nu pe diverse
dispozitive mobile
Mobile Web Best Practices 1.0: set de best practices
pentru livrarea de coninut Web pe dispozitive mobile
Standardizarea OMA
Open Mobile Alliance (OMA), cunoscut anterior ca i WAP
Forum, definete Extensible Hypertext Markup Language
Mobile Profile (XHTML-MP)
XHTML-MP este construit peste i extinde XHTML Basic
1.0
XHTML Basic a fost dezvoltat anterior de ctre W3C
OMA a adugat noi capabiliti peste XHTML Basic 1.0,
incluznd suport pentru WAP CSS (WCSS) i alte
mbuntiri legate de utilizabilitate (n principal)
Noul standard, denumit XHTML-MP, a fost adoptat de
ctre majoritatea dezvoltatorilor de dispozitive mobile
XHTML-MP
Principalul scop al XHTML-MP const n asocierea tehnologiilor
folosite pentru browsing Internet pe dispozitive mobile, cu
coninutul World Wide Web
nainte de XHTML-MP:
Dezvoltatorii WAP foloseau WML i WMLScript pentru crerea
de site-uri WAP,
Dezvoltatorii Web foloseau HTML/XHTML i Cascading Style
Sheets (CSS) pentru constuirea de site-uri Web
Dup XHTML-MP:
XHTML i WAP CSS furnizeaz dezvoltatorilor de aplicaii Web pe
mobile mai mult putere asupra modujlui de prezentare
Avantaj: Aceleai tehnologii pot fi acum folosite pentru dezvoltarea
aplicaiilor Web i desktop i mobile
Orice browser poate fi folosit pentru a vizualiza aplicaii WAP 2.0
WAP 2.0 este backward compatible
Dispozitivele mobile cu suport pentru WAP 2.0 suport i site-uri
WML/WMLScript, XHTML-MP / WCSS sites
Abordri n dezvoltarea aplicaiilor
Web pentru mobile
Dezvoltarea aplicaiilor Web pentru mobile
poate fi fcut folosind oricare dintre
abordrile:
Adaptation
Lowest Common
Denominator (LCD)
Adaptation
Abordarea bazat pe adaptare:
Livreaz coninut pe baza capabilitilor dispozitivului mobil
Aceast abordare este adaptiv, n sensul c dezvoltatorii
adapteaz coninutul n funcie de constrngerile dispozitivului
mobil
Dezvoltatorii pot crea mai multe versiuni ale coninutului,
pentru a putea fi afiat pe ct mai mult dispozitive mobile
Metodele folosite mpreun cu aceast tehnic includ:
detecie, redirecionare, scalarea imaginilor, etc.
Lowest Common Denominator
Abordarea Lowest Common Denominator (LCD):
Definete un set minim de capabiliti pe care un dispozitiv
mobil le suport. n acest caz, coninutul este dezvoltat pe
baza acestor capabiliti
n aceast abordare, dezvoltatorii creaz o singur versiune
a coninutului, care va merge destul de ok pe ct mai multe
dispozitive mobile
Setul minimal de features ale unui device se numete
Default Delivery Context (CDC)
CDC este acum parte a
recomandrii Mobile Web Best
practices 1.0, fcut de W3C
Default Delivery Context (CDC)
Usable Screen Width: 120 pixels, minimum
Markup Language Support: XHTML Basic 1.1
delivered with content type application/xhtml+xml
Character Encoding: UTF-8
Image Format Support: JPEG, GIF 89a
Maximum Total Page Weight: 20 kilobytes
Colors: 256 Colors minimum
Style Sheet Support: CSS Level 1. In addition, CSS
Level 2 @media rule together with the handheld
and all media types
HTTP: HTTP/1.0 or more recent HTTP 1.1
Script: No support for client-side scripting
Pai n construirea unei aplicaii
Web pentru mobile
Definii audiena target
Cum va folosi publicul int aplicaia?
Determinai ateptrile din partea utilizatorilor
Ce doresc utilizatorii s regseasc folosind aplicaia?
Determinai dispozitivile mobile int
Ce dispozitive mobile vor fi folosite pentru aplicaie?
Planificai s limitai folosirea aplicaiei la un set anume de
dispozitive mobile?
Pregsiti prototipuri
Desenai scheme pentru interaciunea utilizatorului
Construii prototipuri
Folosii un instrument pentru dezvoltarea de aplicaii Web
pentru mobile pentru a crea aplicaia
Pai n construirea unei aplicaii
Web pentru mobile
Testai aplicaia Web pentru mobile
Rulai aplicaia Web pentru mobile pe ct mai multe
dispozitive cu putin
Folosi emulatoare de dispozitive mobile i obinei un
feedback timpuriu din partea utilizatorilor
XHTML-MP poate fi dezvoltat folosind n principiu cam orice
editor text
Editoarele HTML pot fi folosite de asemenea pentru a dezvolta
coninut XHTML-MP
Pentru server-side scripting, un mediu server-side este necesar
Server-side scriptul ar trebui s afieze cod XHTML-MP n
loc de HTML
Pentru testare, putei folosi browserul Web din desktop la fel
de bine
Resurse de Bandwidth
DIGUA: Minifier and Obfuscator for Web
Resources
jQuery minimisation
Minifying a Wordpress Theme
Stylesheet
Testarea aplicaiei Web
Cum putei spune c aplicaia Web
dezvoltat este compatibil cu diversitatea
dispozitivelor mobile?
Testai coninutul mobil pe ct mai multe
scenarii:
Pe ct mai multe browsere
Folosind diverse emulatoare de dispozitive
mobile
Folosind dispozitive mobile reale, i
Luai n considerare feedback-ul clienilor votri
Abordri moderne
Nu ntrebai paginile vor putea fi
vizualizate i pe telefonul mobil?
Paginile se vd i pe telefonul mobil
Android, iOS, etc sisteme HTML-oriented
Ce experien vor avea utilizatorii votri
cnd v vor vizita site-ul?
Primii pai n dezvoltarea mobile
ncepei cu coninutul paginilor deja
existente
Adugai dac e cazul noi intrri pentru user
guide, FAQs, sau portal de informare
Creai apoi pagini separate pentru mobile
Redirecionai cererile ctre un URL /mobile
Folosi un framework pentru mobile (JQuery
Mobile)
Efortul acum pic pe: dezvoltarea de noi
pagini
Folosirea unui design responsive
Noi pagini
Rezultate dorite
Modificarea layoutului pe baza dimensiunii
ecranului
Actualizarea interfeei utilizator pentru a fi mai
clickable
Limitarea coninutului afiat n anumite condiii
Dezvoltarea de template-uri reutilizabile
Tehnologii:
HTML5
Cascading Style Sheets 3 (CSS3)
Mai puin JavaScript
Deci implementare
Desktop and Tablet (481 pixels and wider) Mobile (0 480 pixels)
Responsive Design
Folosind layout-uri stil fluid grid
Nu specificai locaii absolute n pixeli
Micorai i cretei dimensiunea de afiare funcie
de dimensiunea ecranului
Style Sheets
Folosii acelai stil CSS pentru toate dispozitivele
Formatare special pentru dispozitive mobile
(ncepei eventual cu formatarea pentru mobile)
Separat creai site-urile Desktop
Implementare
All devices get base style sheet
Mobile devices additional formatting
Implementare
Wider devices also get desktop style sheet
Exemple de Instrumente
IDE - JBoss Developer Studio
HTML, CSS editing
Chrome Developer Tools
CSS review
W3C MobileOK Checker
http://validator.w3.org/mobile/
Real devices Android, iOS
Mobile Web Site Builders
Mobisitegalore
Mobify
Instant Mobilizer
Exemple de site-uri
Exemple de site-uri
Exemple de site-uri
Mobile browsers
Browserele pe dispozitivele mobile difer
mult ntre ele
Capabiliti oferite
Sisteme de operare suportate
Cele mai bune browsere pot afia multe
site-uri web
Ofer zoom n pagin i keyboard shortcuts
Altele ns sunt capabile s afieze doar
site-uri optimizate Web
WebKit engine browser Web
WebKit covers a multitude of sins
E capabil s redea coninut
E capabil s randeze layout-uri
E capabil s ofere consisten n randarea
CSS-urilor
Browserele pe platformele iOS i Android
sunt implicit WebKit-enabled
#headerulli:firstchilda{
webkitbordertopleftradius:8px;
webkitbordertoprightradius:8px;
}
CSS Mobile Profile
Subset al CSS2
Identificarea unui set minim de proprieti,
selectori, valori i reguli de cascadare ca
suport pentru crearea de documente HTML
pentru dispozitive mobile
Mobile Profile este destu lde similar cu CSS 1
CSS 3 i WebKit aduc ns proprieti mai
puternice
Rezoluii comune
small: 160,176
medium: 208,220,240
large: 320,360,480+
desktop: 800+
320480
326ppi
640 960
163ppi
1024x768
132ppi
540960
256ppi
HighPixelDensityDisplays
iPhone4and4s
RetinaDisplay
PuteisvgndiilaunpixelCSSpixelcaun
pixelaldeviceului
Displayuldenaltdensitatepoatesuporta
nivelemaridemaginificare
Problemepentruimagini
ExtensiileWebKit permitdescriereanCSSa
unorsoluii
<linkrel="stylesheet"type="text/css"
href="/css/retina.css"
media="onlyscreenand(webkitmindevicepixel
ratio:2)"/>
326ppi
640 960
CSS3 MEDIA QUERIES
W3C a creat Media Queries ca parte din specificaia CSS3
mbuntete tipurile media ce pot fi folosite
O cerere media permite specificarea unor clase de dispozitive
Permite specificarea unui style sheet pe baza dimensiunii ecranului
Pentru a aplica un stylesheet pentru dispozitive avnd
dimensiunea de maxim 480px:
<linktype="text/css"rel="stylesheet"media="onlyscreenand(max
devicewidth:480px)"href="iphone.css"/>
Putemspecificaapoialternativapentrudispozitivecudimensiunea
ecranuluidepeste481px:
<linkmedia="screenand(mindevicewidth:481px)"
href="notiphone.css type="text/css"rel="stylesheet"/>
The Tao of mobile web (app) design
standards compliance
web usability design
minimalist design
design and testing
cross-browser
cross-platform
A mobile web app
should do one thing
and do it well.
A mobile web app should be as simple
as possible, but no simpler.
Courtesy of Michael Doran, code{4}lib Conference, 2010
a good mobile
web app
typical single-interface
that-does-everything
library web app
1
Courtesy of Michael Doran, code{4}lib Conference, 2010
1
4
Simple is as
simple does.
Three categories:
compatible with Safari on iPhone
optimized for Safari on iPhone
iPhone web application
iPhone web apps (according to Apple*)
2
W3C standards compliant
- no framesets or
- unsupported technologies
(cough, Flash)
If it doesnt look exactly
like an iPhone app
it cant be any good!
* Content on iPhone: Is It a Webpage or an Application?
iUI: iPhone User Interface Framework
http://code.google.com/p/iui/
License: BSD
iWebKit: ditto
http://iwebkit.net/
License: GNU LGPL
jQTouch (jQuery plugin)
http://www.jqtouch.com/
License: MIT
iPhone web application tool kits
JavaScript libraries, CSS code,
images I didnt have to start from
scratch.
iUI iWebKit jQTouch
Moores Law doesnt apply to
batteriesas were now going
into mobilethe cycles count.
Douglas Crockford*
Gee, I love what
jQuery can do, but
maybe server-side
processing is the
way to go.
* Quoted in Coders at Work by Peter Seibel, pg. 100
[ 11: 45] <j keck> j quer y++
[ 11: 45] <mj gi ar l o> @f i ght bacon j quer y
[ 11: 45] <zoi a> j quer y: 2090000, bacon: 106
[ 11: 45] <mdor an> what ever
Handheld emulators/simulators
Generally come with handheld OS SDKs
webOS (Palm)
http://developer.palm.com/
iPhone (Apple)
http://developer.apple.com/iphone/
Android (Google & Open Handset Alliance)
http://developer.android.com/
Web-based simulators (be leery)
Opera Mini Simulator good
http://www.opera.com/mini/demo/
TestiPhone.com absolutely worthless
Operating System
Software Development Kit
Oooohh
Handheld emulators/simulators
Palm
iPhone
Android
Opera Mini
Browser compatibility dont skip this
Internet Explorer Firefox Chrome
XHTML/HTML/CSS validation
XHTML/HTML
CSS
Accessibility
Get right with these
before you move on to
platform compatibility.
Mobile design platform
compatibility
viewport
Mobile design platform compatibility
Larger buttons
for finger
tapping
Mobile design platform compatibility
2
Test it on the real thing (handset), too!
Borrow from colleagues
Or, as a last resort
Just need to
test my app.
one more time
Dont forget the documentation!
Mobile/handheld developer sites have useful
information on how to design for small
Read it
Seriously. Read it.
A viewport?
Who knew?
Its a small
world after all.
Example docs and websites
iPhone
Principles and Guidelines for
Creating Great iPhone Content
iPhone Human Interface Guidelines
for Web Applications
Google Groups: iPhoneWebDev
Others
Opera Mini Developer resources
many, many, more
still more
Reading?
I just want
to code!
Deliver relevance -- expectations are high and you
can only dazzle once.
Cindy Cunningham, OCLC
LITA 2009 National Forum
Patrons can be persnickety. Maybe I
should practice on the Library staff,
first.
Hmmm, a staff app
easier to do a needs assessment
easier to get UI feedback
library has WiFi, so we can use
mobile devices without a data plan
What would help staff
working in the stacks?
ShelfLister version 2.0
End barcode
Start barcode
3
http://vts.uta.edu/sl.htm
ShelfLister version 2.0
6
UTA hereby grants USER permission
to use, copy, modify, and distribute
this software and its documentation
for any purpose and without fee []
Consider releasing
your mobile app as
free open source. Its
better than free beer!
If that imbecile up
there can do it
How hard
could it be?
Getting something
to beta would only
take me a week.
Thats it!
Any questions?
@dchud: Thanks
for giving up your
presentation slot.

PW10 MobileWeb

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

PW10 MobileWeb

Încărcat de

Drepturi de autor:

Formate disponibile

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Curs Programare Web, anul 4 C5 Curs 12 1

S-ar putea să vă placă și