Sunteți pe pagina 1din 81

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Bucuresti - Facultatea de Automatica si Calculatoare Dezvoltarea aplica ț iilor Web pentru dispozitive mobile

Dezvoltarea aplicațiilor Web pentru dispozitive mobile

Dezvoltarea aplica ț iilor Web pentru dispozitive mobile Ciprian Dobre ciprian.dobre@cs.pub.ro Curs Programare Web,

Ciprian Dobre ciprian.dobre@cs.pub.ro

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Mobile Web

- Facultatea de Automatica si Calculatoare Mobile Web • Mobile Web – mediu în care site-urile

• Mobile Web – mediu în care site-urile Web sunt accesate folosind dispozitive mobile

• Ubiquity Dispozitivele mobile oferă astază conexiune Internet și schimb de informație în diverse condiții 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 conținut: dificil de adaptat conținutul Web pentru a se potrivi cu orice device

– Compatibilitate: greu de construit o aplicație care să funcționeze pe orice device

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Bucuresti - Facultatea de Automatica si Calculatoare That’s your client… 2 0 . 0 5 .

That’s

your

client…

de Automatica si Calculatoare That’s your client… 2 0 . 0 5 . 2 0 1
de Automatica si Calculatoare That’s your client… 2 0 . 0 5 . 2 0 1

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Bucuresti - Facultatea de Automatica si Calculatoare 2 0 . 0 5 . 2 0 1
Bucuresti - Facultatea de Automatica si Calculatoare 2 0 . 0 5 . 2 0 1

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Diferențe între dispozitive mobile

si Calculatoare Diferen ț e între dispozitive mobile • Dispozitivele mobile au diferen ț e în

• Dispozitivele mobile au diferențe în special dictate de:

Viteza conexiunii la Internet Dimensiunea ecranului Memorie Puterea de procesare Suportul browserului

• Dispozitivele mobile mai vechi suportă capabilități de browsing limitat (e.g., WAP)

• Dispozitivele mobile mai noi suportă navigare Web apropiată de modelele desktop tradiționale

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Dimensiuni diferite ale ecranului

Automatica si Calculatoare Dimensiuni diferite ale ecranului 2 0 . 0 5 . 2 0 1
Automatica si Calculatoare Dimensiuni diferite ale ecranului 2 0 . 0 5 . 2 0 1

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Diferențe

- Facultatea de Automatica si Calculatoare Diferen ț e Feature Web app Mobile app Graphics Strong

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

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Dispozitive mobile

Facultatea de Automatica si Calculatoare Dispozitive mobile • Telefoanele mobile sunt capabile s ă afi ș

• Telefoanele mobile sunt capabile să afișeze conținut Web formatat special

– Folosind Wireless Access Protocol (WAP)

• WAP reprezintă o alternativă la HTTP

– Creat datorită restricțiilor legate de viteza scăzută și latențele ridicate ale mediilor wireless

– Telefoanele cu suport WAP folosesc Wireless Markup Language (WML) pentru a înțelege conținutul mobil

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Bucuresti - Facultatea de Automatica si Calculatoare Dezvoltarea aplica ț iilor Web mobile • Wireless

Dezvoltarea aplicațiilor Web mobile

• Wireless Application Protocol (WAP) (since 1999 – 2000)

WML este folosit pentru dezvoltarea de aplicații Web pentru dispozitive mobile

Tehnologie standardizată pentru accesarea Internetului folosind dispozitive mobile

WAP are la bază XML: folosește Wireless Markup Language (WML)

1. Wireless Markup Language

– Servește același scop ca și HTML, dar este creat pentru a descrie conținut ce trebuie afișat pe dispozitive cu capabilități limitate de afișare

2. WMLScript

– Îmbunătățește funcționalitatea serviciilor Web, similar JavaScript

20.05.2010

Curs Programare Web, anul 4 C5 – Curs 12

9

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Arhitectura WAP

- Facultatea de Automatica si Calculatoare Arhitectura WAP Application Wireless Application Environment (WAE) Session
Application Wireless Application Environment (WAE) Session Wireless Session Protocol (WSP) Transaction Wireless
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)

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Modelul WAP

- Facultatea de Automatica si Calculatoare Modelul WAP 1.Utilizatorul introduce un URL ce în ț elege

1.Utilizatorul introduce un URL ce înțelege WML 2.Telefonul trimite cererea URL prin mediul wireless către un gateway WAP 3.Gateway-ul traduce cererea WAP într-o cerere convențională HTTP 4.Serverul Web răspunde cererii HTTP (răspunsul conține atât headerul HTTP, cât și conținutul WML)

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Modelul WAP

- Facultatea de Automatica si Calculatoare Modelul WAP 5. Gateway-ul WAP compileaz ă con ț inutul

5. Gateway-ul WAP compilează conținutul WML într-o formă binară

6. Apoi trimite răspunsul WML înapoi către telefon

7. Telefonul primește continutul WML prin intermediul protocolului WAP

8. Micro-browserul telefonului procesează conținutul WML și îl afișează pe ecran

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Dezvantajele WAP

- Facultatea de Automatica si Calculatoare Dezvantajele WAP • Pe m ă sur ă ce dispozitivele

• Pe măsură ce dispozitivele mobile au început să furnizeze capabilități tot mai avansate (e.g., rezoluții ale ecranului, suport pentru procesare), protocolul WAP a început să devină ineficient

– Specificația WAP originală este incapabilă să țină pasul cu creșterea capabilităților tehnologiei mobile

– Restricțiile impuse de providerii wireless au început să facă dificilă accesarea de către clienții wireless a mai mult de simple portaluri Web (vezi modelul iOS)

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Eforturile de standizare ale W3C pentru “Mobile Web Development”

de standizare ale W3C pentru “Mobile Web Development” • World Wide Web Consortium (W3C) a stabilit

• World Wide Web Consortium (W3C) a stabilit o serie de “reguli” pentru a ajuta la dezvoltarea aplicațiilor Web

• Inițiativa W3C Mobile Web

– Set de “guidelines and best practices” pentru dezvoltarea aplicațiilor Web pentru dispozitive mobile

– mobileOK: specificație ce determină modul în care conținutul Web poate fi afișat sau nu pe diverse dispozitive mobile

– Mobile Web Best Practices 1.0: set de best practices pentru livrarea de conținut Web pe dispozitive mobile

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Bucuresti - Facultatea de Automatica si Calculatoare 2 0 . 0 5 . 2 0 1
Bucuresti - Facultatea de Automatica si Calculatoare 2 0 . 0 5 . 2 0 1

20.05.2010

Curs Programare Web, anul 4 C5 – Curs 12

15

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Standardizarea OMA

Facultatea de Automatica si Calculatoare Standardizarea OMA • Open Mobile Alliance (OMA), cunoscut ă anterior ca

• Open Mobile Alliance (OMA), cunoscută anterior ca și WAP Forum, definește 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 către W3C

• OMA a adăugat noi capabilități peste XHTML Basic 1.0, incluzând suport pentru WAP CSS (WCSS) și alte îmbunătățiri legate de utilizabilitate (în principal)

• Noul standard, denumit XHTML-MP, a fost adoptat de către majoritatea dezvoltatorilor de dispozitive mobile

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

XHTML-MP

- Facultatea de Automatica si Calculatoare XHTML-MP • Principalul scop al XHTML-MP const ă în asocierea

• Principalul scop al XHTML-MP constă în asocierea tehnologiilor folosite pentru browsing Internet pe dispozitive mobile, cu conținutul 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 aplicații Web pe mobile mai multă putere asupra modujlui de prezentare

– Avantaj: Aceleași tehnologii pot fi acum folosite pentru dezvoltarea aplicațiilor Web și desktop și mobile

– Orice browser poate fi folosit pentru a vizualiza aplicații 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

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Bucuresti - Facultatea de Automatica si Calculatoare Abord ă ri în dezvoltarea aplica ț iilor Web

Abordări în dezvoltarea aplicațiilor Web pentru mobile

• Dezvoltarea aplicațiilor Web pentru mobile poate fi făcută folosind oricare dintre abordările:

Adaptation
Adaptation
Lowest Common Denominator (LCD)
Lowest Common
Denominator (LCD)

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Adaptation

- Facultatea de Automatica si Calculatoare Adaptation • Abordarea bazat ă pe adaptare: – Livreaz ă

• Abordarea bazată pe adaptare:

– Livrează conținut pe baza capabilităților dispozitivului mobil

– Această abordare este adaptivă, în sensul că dezvoltatorii adaptează conținutul în funcție de constrângerile dispozitivului mobil

– Dezvoltatorii pot crea mai multe versiuni ale conținutului, pentru a putea fi afișat pe cât mai mult dispozitive mobile

– Metodele folosite împreună cu această tehnică includ:

detecție, redirecționare, scalarea imaginilor, etc.

aceast ă tehnic ă includ: detec ț ie, redirec ț ionare, scalarea imaginilor, etc. 2 0

20.05.2010

19

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Lowest Common Denominator

de Automatica si Calculatoare Lowest Common Denominator • Abordarea Lowest Common Denominator (LCD): – Define

• Abordarea Lowest Common Denominator (LCD):

– Definește un set minim de capabilități pe care un dispozitiv mobil le suportă. În acest caz, conținutul este dezvoltat pe baza acestor capabilități – În această abordare, dezvoltatorii crează o singură versiune a conținutului, care va merge destul de ok pe cât mai multe dispozitive mobile

Setul minimal de features ale unui device se numește Default Delivery Context (CDC)

unui device se nume ș te Default Delivery Context (CDC) – CDC este acum parte a

– CDC este acum parte a recomandării Mobile Web Best practices 1.0, făcută de W3C

20.05.2010

Curs Programare Web, anul 4 C5 – Curs 12

20

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Default Delivery Context (CDC)

de Automatica si Calculatoare Default Delivery Context (CDC)  Usable Screen Width: 120 pixels, minimum 

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

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Pași în construirea unei aplicații Web pentru mobile

Pa ș i în construirea unei aplica ț ii Web pentru mobile • Defini ț i

• Definiți audiența target

– Cum va folosi publicul țintă aplicația?

• Determinați așteptările din partea utilizatorilor

– Ce doresc utilizatorii să regăsească folosind aplicația?

• Determinați dispozitivile mobile țintă

– Ce dispozitive mobile vor fi folosite pentru aplicație?

– Planificați să limitați folosirea aplicației la un set anume de dispozitive mobile?

• Pregăsiti prototipuri

– Desenați scheme pentru interacțiunea utilizatorului

• Construiți prototipuri

– Folosiți un instrument pentru dezvoltarea de aplicații Web pentru mobile pentru a crea aplicația

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Pași în construirea unei aplicații Web pentru mobile

Pa ș i în construirea unei aplica ț ii Web pentru mobile • Testa ț i

• Testați aplicația Web pentru mobile

– Rulați aplicația Web pentru mobile pe cât mai multe dispozitive cu putință

– Folosi emulatoare de dispozitive mobile și obțineți 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 conținut XHTML-MP

• Pentru server-side scripting, un mediu server-side este necesar

– Server-side scriptul ar trebui să afișeze cod XHTML-MP în loc de HTML

– Pentru testare, puteți folosi browserul Web din desktop la fel de bine

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Resurse de Bandwidth

de Automatica si Calculatoare Resurse de Bandwidth • DIGUA: Minifier and Obfuscator for Web Resources 2

• DIGUA: Minifier and Obfuscator for Web Resources

• DIGUA: Minifier and Obfuscator for Web Resources 2 0 . 0 5 . 2 0

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

jQuery minimisation

Facultatea de Automatica si Calculatoare jQuery minimisation 2 0 . 0 5 . 2 0 1
Facultatea de Automatica si Calculatoare jQuery minimisation 2 0 . 0 5 . 2 0 1

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Minifying a Wordpress Theme Stylesheet

si Calculatoare Minifying a Wordpress Theme Stylesheet 2 0 . 0 5 . 2 0 1
si Calculatoare Minifying a Wordpress Theme Stylesheet 2 0 . 0 5 . 2 0 1

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Testarea aplicației Web

de Automatica si Calculatoare Testarea aplica ț iei Web • Cum pute ț i spune c

• Cum puteți spune că aplicația Web dezvoltată este compatibilă cu diversitatea dispozitivelor mobile?

• Testați conținutul mobil pe cât mai multe scenarii:

– Pe cât mai multe browsere

– Folosind diverse emulatoare de dispozitive mobile

– Folosind dispozitive mobile reale, și

– Luați în considerare feedback-ul clienților voștri

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Abordări moderne

Facultatea de Automatica si Calculatoare Abord ă ri moderne • Nu întreba ț i “paginile vor

• Nu întrebați “paginile vor putea fi vizualizate și pe telefonul mobil?”

• Paginile se văd și pe telefonul mobil

– Android, iOS, etc… sisteme HTML-oriented

• Ce experiență vor avea utilizatorii voștri când vă vor vizita site-ul?

avea utilizatorii vo ș tri când v ă vor vizita site-ul? 2 0 . 0 5

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Primii pași în dezvoltarea mobile

si Calculatoare Primii pa ș i în dezvoltarea mobile  Începe ț i cu con ț

Începeți cu conținutul paginilor deja existente

• Adăugați dacă e cazul noi intrări pentru user guide, FAQs, sau portal de informare

Creați apoi pagini separate pentru mobile

• Redirecționați cererile către un URL “/mobile”

• Folosți un framework pentru mobile (JQuery Mobile)

Efortul acum pică pe: dezvoltarea de noi pagini

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Folosirea unui design responsive

Automatica si Calculatoare Folosirea unui design responsive • Noi pagini • Rezultate dorite – Modificarea

• Noi pagini

• Rezultate dorite

– Modificarea layoutului pe baza dimensiunii ecranului

– Actualizarea interfeței utilizator pentru a fi mai “clickable”

– Limitarea conținutului afișat în anumite condiții

– Dezvoltarea de template-uri reutilizabile

• Tehnologii:

– HTML5

• Cascading Style Sheets 3 (CSS3)

• Mai puțin JavaScript

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Deci… implementare

de Automatica si Calculatoare Deci… implementare Mobile (0 – 480 pixels) Desktop and Tablet (481 pixels

Mobile (0 – 480 pixels)

Calculatoare Deci… implementare Mobile (0 – 480 pixels) Desktop and Tablet (481 pixels and wider) 2

Desktop and Tablet (481 pixels and wider)

(0 – 480 pixels) Desktop and Tablet (481 pixels and wider) 2 0 . 0 5

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Responsive Design

- Facultatea de Automatica si Calculatoare Responsive Design • Folosind layout-uri stil fluid grid • Nu

• Folosind layout-uri stil fluid grid

• Nu specificați locații absolute în pixeli

• Micșorați și creșteți dimensiunea de afișare funcție de dimensiunea ecranului

• Style Sheets

• Folosiți același stil CSS pentru toate dispozitivele

• Formatare specială pentru dispozitive mobile (începeți eventual cu formatarea pentru mobile)

• Separat creați site-urile Desktop

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Implementare

- Facultatea de Automatica si Calculatoare Implementare All devices – get base style sheet Mobile devices
All devices – get base style sheet Mobile devices – additional formatting
All devices – get base style sheet
Mobile devices – additional formatting

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Implementare

- Facultatea de Automatica si Calculatoare Implementare Wider devices – also get desktop style sheet 2

Wider devices – also get desktop style sheet

Implementare Wider devices – also get desktop style sheet 2 0 . 0 5 . 2

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Exemple de Instrumente

de Automatica si Calculatoare Exemple de Instrumente • IDE - JBoss Developer Studio • HTML, CSS

• IDE - JBoss Developer Studio

• HTML, CSS editing

• Chrome Developer Tools

• CSS review

HTML, CSS editing • Chrome Developer Tools • CSS review • W3C MobileOK Checker •

• W3C MobileOK Checker

http://validator.w3.org/mobile/

• Real devices – Android, iOS

• Real devices – Android, iOS 2 0 . 0 5 . 2 0 1 0

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Mobile Web Site Builders

de Automatica si Calculatoare Mobile Web Site Builders • Mobisitegalore • Mobify • Instant Mobilizer 2

• Mobisitegalore

• Mobify

• Instant Mobilizer

Builders • Mobisitegalore • Mobify • Instant Mobilizer 2 0 . 0 5 . 2 0

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Bucuresti - Facultatea de Automatica si Calculatoare Curs Programare Web, anul 4 C5 – Curs 12
Curs Programare Web, anul 4 C5 – Curs 12 37
Curs Programare Web, anul 4 C5 – Curs 12
37

20.05.2010

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Bucuresti - Facultatea de Automatica si Calculatoare 2 0 . 0 5 . 2 0 1
Bucuresti - Facultatea de Automatica si Calculatoare 2 0 . 0 5 . 2 0 1

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Exemple de site-uri

Facultatea de Automatica si Calculatoare Exemple de site-uri 2 0 . 0 5 . 2 0
Facultatea de Automatica si Calculatoare Exemple de site-uri 2 0 . 0 5 . 2 0
Facultatea de Automatica si Calculatoare Exemple de site-uri 2 0 . 0 5 . 2 0

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Exemple de site-uri

Facultatea de Automatica si Calculatoare Exemple de site-uri 2 0 . 0 5 . 2 0
Facultatea de Automatica si Calculatoare Exemple de site-uri 2 0 . 0 5 . 2 0
Facultatea de Automatica si Calculatoare Exemple de site-uri 2 0 . 0 5 . 2 0

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Exemple de site-uri

Facultatea de Automatica si Calculatoare Exemple de site-uri 2 0 . 0 5 . 2 0
Facultatea de Automatica si Calculatoare Exemple de site-uri 2 0 . 0 5 . 2 0
Facultatea de Automatica si Calculatoare Exemple de site-uri 2 0 . 0 5 . 2 0

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Mobile browsers

- Facultatea de Automatica si Calculatoare Mobile browsers • Browserele pe dispozitivele mobile difer ă mult

• Browserele pe dispozitivele mobile diferă mult între ele

– Capabilități oferite

– Sisteme de operare suportate

• Cele mai bune browsere pot afișa multe site-uri web

– Oferă zoom în pagină și keyboard shortcuts

• Altele însă sunt capabile să afișeze doar site-uri optimizate Web

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

WebKit – engine browser Web

de Automatica si Calculatoare WebKit – engine browser Web • “WebKit covers a multitude of sins”

• “WebKit covers a multitude of sins”

– E capabil să redea conținut

– 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

#header ul li:firstchild a { webkitborder top leftradius: 8px; webkitborder top rightradius: 8px;

}

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

CSS Mobile Profile

Facultatea de Automatica si Calculatoare CSS Mobile Profile • Subset al CSS2 – Identificarea unui set

• Subset al CSS2

– Identificarea unui set minim de proprietăți, 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ă proprietăți mai puternice

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Rezoluții comune

Facultatea de Automatica si Calculatoare Rezolu ț ii comune small: 160, 176 medium: 208, 220, 240

small: 160, 176 medium: 208, 220, 240 large: 320, 360, 480+ desktop: 800+

540×960

220, 240 large: 320, 360, 480+ desktop: 800+ 540×960 256ppi 320×480 640 × 960 1024x768 163ppi

256ppi

320×480

640 × 960

1024x768

163ppi

326ppi

132ppi

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

High Pixel Density Displays

de Automatica si Calculatoare High Pixel Density Displays 640 × 960 • iPhone 4 and 4s

640 × 960

• iPhone 4 and 4s

• Retina Display

• Puteț i s ă vă gândi ț i la un pixel CSS pixel ca un pixel al deviceului

• Displayul de înalt ă densitate poate suporta nivele mari de maginificare

– Probleme pentru imagini

nivele mari de maginificare – Probleme pentru imagini 326ppi • Extensiile WebKit permit descrierea în CSS

326ppi

• Extensiile WebKit permit descrierea în CSS a unor solu ț ii

<link rel="stylesheet" type="text/css" href="/css/retina.css" media="only screen and ( webkit min devicepixel ratio: 2)" />

‐ min ‐ device ‐ pixel ‐ ratio: 2)" /> 2 0 . 0 5 .

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

CSS3 MEDIA QUERIES

Facultatea de Automatica si Calculatoare CSS3 MEDIA QUERIES • W3C a creat Media Queries ca parte

• W3C a creat Media Queries ca parte din specificația CSS3

– Îmbunătățește 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 având dimensiunea de maxim 480px:

<link type="text/css" rel="stylesheet" media="only screen and (maxdevice width: 480px)" href="iphone.css" />

• Putem specifica apoi alternativa pentru dispozitive cu dimensiunea ecranului de peste 481px:

<link media="screen and (min device width: 481px)" href="notiphone.css” type="text/css" rel="stylesheet" />

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Bucuresti - Facultatea de Automatica si Calculatoare The Tao of mobile web (app) design A mobile

The Tao of mobile web (app) design

A mobile web app should do one thing and do it well.
A mobile web app
should do one thing
and do it well.
A mobile web app should do one thing and do it well. A mobile web app
A mobile web app should be as simple as possible, but no simpler.
A mobile web app should be as simple
as possible, but no simpler.

standards compliance

web usability design

minimalist design
minimalist design
standards compliance web usability design minimalist design design and testing cross-browser cross-platform – –

design and testing

cross-browser cross-platform
cross-browser
cross-platform

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

typical single-interface that-does-everything library web app
typical single-interface
that-does-everything
library web app
single-interface that-does-everything library web app a good mobile web app Courtesy of Michael Doran, code{4}lib
a good mobile web app
a good mobile
web app
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare 1
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare 4
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Simple is as simple does.
Simple is as
simple does.
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare Simple is as simple does.

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Bucuresti - Facultatea de Automatica si Calculatoare iPhone web apps (according to Apple*) * Content on

iPhone web apps (according to Apple*)

* Content on iPhone: Is It a Webpage or an Application?

• Three categories:

Is It a Webpage or an Application? • Three categories: W3C standards compliant - no framesets

W3C standards compliant

- no framesets or

- unsupported technologies (cough, Flash)

– compatible with Safari on iPhone

– optimized for Safari on iPhone

– iPhone web application

optimized for Safari on iPhone – iPhone web application If it doesn’t look exactly like an
If it doesn’t look exactly like an iPhone app it can’t be any good!
If it doesn’t look exactly
like an iPhone app
it can’t be any good!

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

iPhone web application tool kits

Automatica si Calculatoare iPhone web application tool kits • iUI : iPhone User Interface Framework –

iUI: iPhone User Interface Framework

http://code.google.com/p/iui/

– License: BSD

JavaScript libraries, CSS code, images… I didn’t have to start from scratch.
JavaScript libraries, CSS code,
images… I didn’t have to start from
scratch.

iWebKit: ditto

http://iwebkit.net/

– License: GNU LGPL

: ditto – http://iwebkit.net/ – License: GNU LGPL • jQTouch (jQuery plugin) – http://www.jqtouch.com/

jQTouch (jQuery plugin)

http://www.jqtouch.com/

– License: MIT

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare iUI iWebKit jQTouch
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare iUI iWebKit jQTouch
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
iUI
iWebKit
jQTouch
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare iUI iWebKit jQTouch

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Bucuresti - Facultatea de Automatica si Calculatoare “Moore’s Law doesn’t apply to batteries…as we’re
“Moore’s Law doesn’t apply to batteries…as we’re now going into mobile…the cycles count.” Douglas
“Moore’s Law doesn’t apply to
batteries…as we’re now going
into mobile…the 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

can do, but maybe server-side processing is the way to go. * Quoted in “Coders at
can do, but maybe server-side processing is the way to go. * Quoted in “Coders at
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare [11:45] <jkeck> jquery++ [11:45]
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare [11:45] <jkeck> jquery++ [11:45]
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
[11:45]
<jkeck> jquery++
[11:45] <mjgiarlo> @fight bacon jquery
[11:45]
[11:45]
<zoia> jquery: 2090000, bacon: 106
<mdoran> whatever

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Handheld emulators/simulators

Operating System
Operating System
Calculatoare Handheld emulators/simulators Operating System • Generally come with handheld OS SDKs – webOS (Palm)

• Generally come with handheld OS SDKs

webOS (Palm)

Software Development Kit
Software Development Kit

• 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

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare Oooohh
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare Oooohh
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Oooohh
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Handheld emulators/simulators

Bucuresti - Facultatea de Automatica si Calculatoare Handheld emulators/simulators Android Palm iPhone Opera Mini
Android Palm iPhone Opera Mini
Android
Palm
iPhone
Opera Mini

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Bucuresti - Facultatea de Automatica si Calculatoare Browser compatibility – don’t skip this Internet

Browser compatibility – don’t skip this

Internet Explorer Firefox Chrome
Internet Explorer
Firefox
Chrome

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

XHTML/HTML/CSS validation

de Automatica si Calculatoare XHTML/HTML/CSS validation • XHTML/HTML • CSS • Accessibility Get right with
de Automatica si Calculatoare XHTML/HTML/CSS validation • XHTML/HTML • CSS • Accessibility Get right with

• XHTML/HTML

• CSS

• Accessibility

Get right with these before you move on to platform compatibility.

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Politehnica Bucuresti - Facultatea de Automatica si Calculatoare Mobile design – platform compatibility viewport

Mobile design – platform compatibility

viewport
viewport
Politehnica Bucuresti - Facultatea de Automatica si Calculatoare Mobile design – platform compatibility viewport
Politehnica Bucuresti - Facultatea de Automatica si Calculatoare Mobile design – platform compatibility viewport

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Bucuresti - Facultatea de Automatica si Calculatoare Mobile design – platform compatibility Larger buttons

Mobile design – platform compatibility

- Facultatea de Automatica si Calculatoare Mobile design – platform compatibility Larger buttons for finger tapping
- Facultatea de Automatica si Calculatoare Mobile design – platform compatibility Larger buttons for finger tapping

Larger buttons for finger tapping

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare Mobile design – platform compatibility 2

Mobile design – platform compatibility

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare Mobile design – platform compatibility 2
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare Mobile design – platform compatibility 2

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Bucuresti - Facultatea de Automatica si Calculatoare Test it on the real thing (handset), too! Just

Test it on the real thing (handset), too!

Just need to… test… my app…. one… more time
Just need to…
test… my app….
one… more time
thing (handset), too! Just need to… test… my app…. one… more time Or, as a last

Or, as a last resort…

Borrow from colleagues

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Don’t forget the documentation!

Automatica si Calculatoare Don’t forget the documentation! • Mobile/handheld developer sites have useful information

• Mobile/handheld developer sites have useful information on how to “design for small”

• Read it

• Seriously. Read it.

A viewport? Who knew? It’s a small world after all.
A viewport?
Who knew?
It’s a small
world after all.

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Example docs and websites

de Automatica si Calculatoare Example docs and websites • iPhone Reading? I just want to code!

• iPhone

Reading? I just want to code! •
Reading?
I just want
to code!

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…

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Bucuresti - Facultatea de Automatica si Calculatoare “Deliver relevance -- expectations are high and you can
“Deliver relevance -- expectations are high and you can only dazzle once.” Cindy Cunningham, OCLC
“Deliver relevance -- expectations are high and you
can only dazzle once.”
Cindy Cunningham, OCLC
LITA 2009 National Forum
once.” Cindy Cunningham, OCLC LITA 2009 National Forum Patrons can be persnickety. Maybe I should practice
Patrons can be persnickety. Maybe I should practice on the Library staff, first.
Patrons can be persnickety. Maybe I
should practice on the Library staff,
first.
OCLC LITA 2009 National Forum Patrons can be persnickety. Maybe I should practice on the Library

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Bucuresti - Facultatea de Automatica si Calculatoare Hmmm, a staff app… …easier to do a needs
Hmmm, a staff app… …easier to do a needs assessment …easier to get UI feedback
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?
…library has WiFi, so we can use mobile devices without a data plan What would help

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

ShelfLister version 2.0

- Facultatea de Automatica si Calculatoare ShelfLister version 2.0 Start barcode End barcode http://vts.uta.edu/sl.htm 3
- Facultatea de Automatica si Calculatoare ShelfLister version 2.0 Start barcode End barcode http://vts.uta.edu/sl.htm 3

Start barcode

- Facultatea de Automatica si Calculatoare ShelfLister version 2.0 Start barcode End barcode http://vts.uta.edu/sl.htm 3
- Facultatea de Automatica si Calculatoare ShelfLister version 2.0 Start barcode End barcode http://vts.uta.edu/sl.htm 3

End barcode

http://vts.uta.edu/sl.htm
http://vts.uta.edu/sl.htm

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

ShelfLister version 2.0

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare ShelfLister version 2.0 6
Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare ShelfLister version 2.0 6

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Bucuresti - Facultatea de Automatica si Calculatoare Consider releasing your mobile app as free open source.
Consider releasing your mobile app as free open source. It’s better than free beer! UTA
Consider releasing
your mobile app as
free open source. It’s
better than free beer!
UTA hereby grants USER permission
to use, copy, modify, and distribute
this software and its documentation
for any purpose and without fee […]
to use, copy, modify, and distribute this software and its documentation for any purpose and without

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Bucuresti - Facultatea de Automatica si Calculatoare Getting something to beta would only take me a
Getting something to beta would only take me a week.
Getting something
to beta would only
take me a week.

If that imbecile up there can do it…

How hard could it be?
How hard
could it be?
Getting something to beta would only take me a week. If that imbecile up there can

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Bucuresti - Facultatea de Automatica si Calculatoare That’s it! Any questions? @dchud: Thanks for giving up
That’s it! Any questions? @dchud: Thanks for giving up your presentation slot.
That’s it!
Any questions?
@dchud: Thanks
for giving up your
presentation slot.