CREIX AMB INTERNET
Creació d’aplicacions web per a iPhone, iPad i iPod Touch
2
1. Introducció a les WebApps Els dispositius amb iOS (iPhone, iPad i iPod Touch ) són una font inesgotable d’aplicacions, de productes orientats a aquesta plataforma, i també d’ingressos. El problema és que la única manera de desenvolupar aplicacions de forma nadiua per iOS és amb el software d’Apple (SDK). Aquest software només existeix per a equips Macintosh, utilitza un llenguatge de programació (Objective C) que és propi d’Apple i l’única forma de distribució de l’aplicació desenvolupada es mitjançat l’AppStore, dins d’iTunes (i Apple cobra per això). El funcionament d’una WebApp és igual a la d’una aplicació installada de l’Appstore però amb el pas previ de passar per una plana web. Després la pots executar des del teu dispositiu amb iOS sense problemes. La WebApp utilitza codi lliure (HTML, CSS, JavaScript..) i, per tant, no és necessari installar nou software en les màquines ni al dispositiu iOS Gamma IOS La gamma de iOS està formada per 4 models d’iPhone ( Edge, 3G, 3Gs i iPhone4) 2 models d’iPad (1 i 2) i 4 models de iPod Touch.
3
Introducció al món de les webapps Safari, el navegador web d’Apple, va ser la primera plataforma de desenvolupament. Abans no hi havia AppStore ni SDK, tot es feia amb WebApps. Avui en dia podem triar diferents formes per crear les nostres Apps: SDK natiu: és el software de desenvolupament d’Apple. Complexe i de pagament (Objective C). Open SDK: és el software pirata per desenvolupar (Cydia...) WebApps (avantatges): és gratuit. Conegut. Fàcil d'escalar i te bon futur ja que Webkit l’està adoptant en gairebé tots els navegadors mòbils. Safari Mobile És el cercador d'Apple i és complert, no està limitat per a dispositius mòbils. Suporta: Zoom, XHTML, CSS, JavaScript, AJAX, Canvas i Video, Bookmarklets i data URL. Treballa sota Webkit, que es un motor de renderitzat de pàgines web desenvolupat per Apple (que ha alliberat la llicència) i que molts navegadors han adoptat (Chrome, FireFox, NOKIA, Blackberry…). Safari no suporta AdobeFlash.
4
Eines Les eines per desenvolupar WebApps son: DreamWeaver: HTML5 Aptana (basat en Eclipse): És com un Dreamweaver però gratuit Dashcode (SDK d’Apple): Objective C Els simuladors Sempre cal provar allò que s’està realitzant en el producte real al qual va dirigit, però amb el navegador d'escriptori no n’hi ha pou i cal fer servir un simulador (un iPhoneo iPad seria ideal) Tenim 2 opcions: iPhone Simulator: Oficial d’Apple, però només per a Mac i cal descarregar tot l’SDK. És el millor. Mobione (www.genuitec.com/mobile): És gratuït 15 dies, no funciona tant bé com l’original. Adobe Device Central: És el simulador de dispositius mòbils d’Adobe, seria l’ultima opció ja que no funciona excessivament bé.
5
Estàndards iOS Suporta: HTML 4.01 HTML 5 (parcial) XHTML1.0 CSS 2.1 CSS 3.0 Javascript DOM level2 AJAX SVG Geolocation API (standard W3C javascript de geolocalitzacio) No suporta: tipus descarregables mouse over estils hover tooltips (finestres grogues) applets flash quicktime vr wml, File uploads / File downloads.
6
2. Creació d'un projecte Webapp Obrirem Dreamweaver i crearem un document HTML5. També definirem on simular la WebApp (Device central no): iPhone Simulator (SDK) o Mobione (www.genuitec.com/mobile) DEFININT UNA WEBAPP Viewport És l’element de Safari iOS que defineix la mida i el comportament de la pantalla del dispositiu. Per defecte Safari defineix les webs a 960 píxels d'ample nosaltres ho tenim que canviar per que s’adapti a la pantalla de l’iOS amb metatags: VIEWPORT i WIDTH Aquest meta serveix per que no es puguin fer ni reduccions ni ampliacions dins de la WebApp. Utilitzarem noms separats per comes
Variables: podem definir una amplada permanent:
o podem definir un màxim d’ampliació:
posarem un titol: benvinguts al ciber
7
Posar icona a la pantalla d’inici “WebClip” iOS sempre busca en el servidor l’icona “apple-touchicon.png” (57x57 pix). Si no la troba l’icona de la pantalla del dispositiu serà un miniatura de la pàgina. Aquesta icona ha de mesurar exactament 57x57px i ser en format PNG transparent. Els efectes de relleu i biselat els genera iOS de forma automàtica. Si no voleu utilitzar aquest nom tenim alternatives: Carregarà l’icona iphone-icon.png (o el nom que tu vulguis) i posarà els efectes de forma automàtica.
Carregarà l’icona iphone-icon.png (o el nom que tu vulguis) i no posarà efectes, deixarà l’icona en cru.
Imatge d'Obertura “StartImage” és la imatge que ens mostra quan toquem la icona i s’està carregant l’app. iOS busca en el servidor la icona “apple-touch-startup”. Ha de mesurar 320x460px (es resten 20 px de l’alçada barra d’informació)
8
Traient el Safari de la pantalla Per donar l’experiència de App i no de Web hem de fer desaparèixer la finestra del navegador Safari. Ocultar la barra superior del navegador: No funciona fins que no ens hem afegit la icona a l’inici.
Canviar la barra que mostra l’hora i l’operadora a dalt: Ocupa 20px En aquest cas la posem de color negre “black”:
El “transludend” fa pujar la informació ja que no hi ha píxels
L’estat “default” torna la barra al gris-blavós original
name=”apple-mobile-web-app-status-bar-”style”
Comunicació amb l'equip Tots aquests enllaços obriran l’aplicació iOS corresponent Fer una trucada molt recomanable per no haver de copiar i enganxar text, etc.. Es posa el codi de país, el text i donar enllaç: “tel:” Trucan’s
Mail: Podem posar assumpte (subject) i cos del text (&body) Reserva per email
SMS Enviar SMS a un número, però no puc posar subject Enviar SMS (no li puc posar cos al missatge)
Mapes i vídeos Troba Mira
9
iTunes link maker (per a àlbums i cançons soltes) http://itunes.apple.com/linkmaker/
Altres urls desde iPhone: www.handleopenurl.com En aquesta web trobarem altres enllaços directes per comunicarnos amb iOS. Les aplicacions natives poden fer servir qualsevol protocol “tel:” “sms:” però no tenim forma de saber si l’usuari te l’app “no nativa” installada. Si no ho sabem li facilitem l’enllaç de l’app. Tweeteja aixó!
Visualització de documents PDF Word Excel Ppt Però no es poden guardar ni RAR ni ZIP. La recomanació és utilitzar formats vàlids; si no ens donarà un missatge d’error.
1 0
3. HTML i CSS Disseny de formularis És millor no fer taules, molt millor amb: Llistes de definició i Etiquetes (es mostrarà com un jackpot a la casella de sota) Els han d’estar a dalt, si no es perd text quan inserim més text. Els ; segons posem un o altre canvia el teclat placeholder=””posa el text en gris fins que tu insereixis alguna cosa” HTML5 autocorrect="off" funciona l’autocorrector autocapitalize="on" primera lletra majúscula pattern="[0-9]*" HTML5 per convertir a teclat numèric Pais Catalunya Andorra Espanya França Nom Mail Telèfon Telèfon
1 1
Condicionals mitjançant CSS Amb aquest condicional farem que, si no troba un dispositiu amb pantalla de 480px, es vegi blau (per exemple). Així podem fer dues o més versions del nostre projecte i que és carregui una o l’altre depenent del tamany de la pantallla del dispositiu. Cal fixar-se en les etiquetes media i max-device. body{ background-color: red; } body{ background-color: blue; }
Maneig de tipografia Tipografies suportades: Arial, Courier ew, Georgia, Helvetica, Times new roman, Trebuchet ms Especials: American tipewriter, Arial rounded MT Bold, Market Felt, Zapfino. Ens permet realitzar efectes sense carregar imatges, molt útil. Implementar la tipografia en iOS: Depenent de la densitat de píxels en pantalla els textos es poden veure més grans o més petits per que s’adapten a la mida del píxel. Per tant no posar als CSS “fontsize” i la mida en píxels: millor “font-size:1.4em”. Treballarem en una mida percentual adaptable al dispositiu. h1{ font-family:”Market Felt”; font-size:1.4em; }
1 2
Efectes de text Realitzar ombres: h1{ font-family:"Marker felt"; font-size:1.4em; text-shadow:0.1em 0.1em #FFF; }
Cantonades arrodonides Sobre qualsevol element es poden dibuixar cantonades arrodonides. Son extensions de Webkit, així que les sentencies canvien una mica i comencen amb “-webkit-”. h1{ font-family:"Marker felt"; font-size:1.8em; text-shadow:0.1em 0.1em #FFF; background-color:#CCC;
(color fons de la caixa de text)
border: 2px solid #999;
(gruix i color del traç)
-webkit-border-radius: 15px
(radi, li pots donar 4 valors diferents, un per cada cantonada)
-webkit-box-shadow: 5px 5px
(hombra de la caixa que conté)
}
1 3
Safari extensions d'iPhone Més extensions de Webkit realment útils Al tocar apareix ombra al text -webkit-tap-highlight-color: orange;
No surt la finestra “obrir en finestra nova..” -webkit touch-callout:none;
L’usuari no pot seleccionar el text (copy, paste, select all) -webkit-user-select:none;
Fer un botó estil iphone: Toca
1 4
CSS’s Gradients o degradats: es poden fer també en imatges: ” -webkit-gradient(“url”);” body{ background: -webkit-gradient(radial, 100% -10, 50, 70% 0, 200, from(white), to(black)) black; }
Reflection Reflecteix un text, per exemple el que tenim a h1 h1{-webkit-box-reflect:below 2px; }
Transitions Son animacions automàtiques entre dos estats. És defineixen als CSS (et fa un fade in o fade out) -webkit-transitions: opacity 3s; widht,(si vols canviar tamany
Animations (com flash però sense flash) Dona molt més control que les transicions: es fa dins del CSS però cal declarar amb: @-webkit-keyframes “animacaja” {definir propietats} -webkit-animation: animaCaixa 6s ease-in-out 2s infinite;
es pot escalar, rotar... -webkit-transform:rotate(90deg);
1 5
4. JAVASCRIPT I RIA Detectar l'equip si volem detectar si l’aparell és un iPhone, un iPad, un iPod... es fa un javascript: si detecta que es un iPad es fa variable per carregar altres CSS, ja que la mida de la pantalla és molt més gran. És important fixar-se en el “navigator.platform.index0f(“iPhone”)” var esiPhone= (navigator.platform.index0f(“iPhone”)>=0);
Esdeveniments de Multitouch S’ha de tenir en compte que no hi ha “mouse over” ni “hover” ja que no hi ha res que passi per sobre de quelcom. Però si volem tenir més control i més d’un dit prement la pantalla podem definir certs esdeveniments a part de l’HTML Hi ha “4 touch” i cada un fa una cosa diferent. La més estranya és “touchCancel” que quan entra una trucada ho cancella tot sense dir res.
touchMove(event)”
ontouchend=”
després es tenen que definir cada event amb funcions de javascript: function touchStart(event){definir}...
Esdeveniments Gestuals Son els de reduir o ampliar amb dos dits. després es tenen que definir cada event amb funcions de javascript: function gestoStart(event){definir}..event.rotation event.scale....
1 6
HTML 5 i Geolocation API nous tags: i (crear players quicktime a pantalla completa) atributs: src (amb url del video o audio) controls=true end/start height (visibilidad, on?) width (visibilidad, on?) playcount loopstart loopend poster (url amb imatge radere botó de play)
Geolocation API És una llibreria de javascript a punt de convertir-se en estàndard W3C Només es suportada des de la versió iOS 3.0 Objecte navigator.geolocation Accepta getCurrentPosition(locatedCB, errorCB) CallBack (una sola vegada) Acepta watchPosition(locatedCB, errorCB) i sempre s’actualitza L’esdeveniment rep un objecte amb coordenades: coords.latitude, coords.longitude coords.heading (només 3gs i 4 (brujula digital) coords.speed coords.altitude Canvas 2D Drawing API. Permet fer moltes coses amb HTML5 Es una API d’escriptura
amb width, height y id (ample, alt, identificador) concepte Llenç (es pinta a sobre, no hi ha objectes ni tampoc SVG, que son objectes vectorials) línies, patrons, rectangles. pot dibuixar imatges pot ser animat amb javascript
1 7
Treball Desconectat (App Cache) HTML5 Per treballar sense connexió i que es descarreguin arxius a una carpeta de sistema de l’iOS . S’ha de crear un “Arxiu de Manifest”. Es un arxiu de text estàndard amb noms d’arxiu separats per enters (salts de línia, veure exemple en carpeta). CACHE MANIFEST (sempre en majúscules)
Des de Javascript tenim disponible el “window.applicationCache” amb la propietat “status” i un menú “update”. Emmagatzematge del client Si estem desconnectats on envia les dades el client? Al telèfon no, les envia al servidor. localStorage.setItem(name, value) localStorage.getItem(name) window.openDatabase permet generar bases de dades locals permet executar SQL iPhone està basat amb SQlite
5. BIBLIOTEQUES PER A WEBAPPS IUI http://code.google.com/p/iui/ És una llibreria de html-CSS (no javascript) que ens proporciona tot per fer una WebApp igual que els estils iPhone- iOS. jQTouch http://jqtouch.com/ És un llibreria de jQuery. jQTouch molt més complexa però molt més potent, sobretot per les animacions i els gradients.
1 8
Guía de Recursos RECURSOS Nom
URL
IUI
http://code.google.com/p/i llibreria de HTML-CSS ui/ Llibreria Jquery, més potent http://jqtouch.com/ (www.genuitec.com/mobile Emulador iPhone
jQTouch Mobione
Observacions
