Notas: Programacion Iphone WEB APPS

[Edig]

Hola a todos,

lleve unos cursos de programacion de webb apps en iphone aqui les dejo mis notas aver que les parecen si necesitan ayuda diganme y aver si puedo solucionarlo :P

Código HTML:

320x480


Saber el tamaño del width y aplicarlo a la pagina y se vera grande
<meta name="viewport" content="width=device-width">

La sacala, es decir que tanto sum tendrá, 1 = normal
<meta name="viewport" content="initial-scale=1.0">

Agregar css
Delimita el width
<link media="screen and (max-device-width:480px)" href="card.css"  type="text/css" rel="stylesheet">

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

Gradiente
background-image: -webkit-gradient(linear, left top, left bottom, from(#6e0e0e), to (#990000));

Nombre del navegador
var navegador = navigator.userAgent;
if(navegador.indexOf("iPhone") > 0) {
	window.location.replace = "index.php";
}

-webkit-text-size-adjust
webkit - Google,Safari

LISTS

LISTAS PARA ENTRAR:
- Ponerlo con lineas abajo en css
- list-style-type: none
- poner height =39
- line-height= 39
padding: 0, 20, 0, 10

en el link:
- display: block;
- Poner la imagen de la flecha

-white-space: nowrap;
- overflow: hidden;
text-overflow: ellipsis;

LISTAS DE INFORMACION:

Borde circular
-webkit-border-radius: 8px;
margin: 0px, 10, 17, 10

ul.clas > li:last-child {
border-bottom: 0;
}



Elisabeth Robson
Eric Freman

http://www.apple.com/webapps/
http://iphone.foodnetwork.com/

Código HTML:

Week 2

No zoom
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="user-scalable=no, width=device-width">

Iphone human interface guidelines for web applications

Iphone Features
cAMBIAR FLECHA POR teléfono mail y lugar

Telofono, mail y mapa
<a class="phone"> </a>

CSS: [Abajo del a]
a.phone {
	background-image:url(images/phone.png);
}

Hacer una llamada
<a href="tel:[phone]"></a>

Mail:
<a href="malito:[email protected]"></a>

Mapa:
<a href="PAGINA NORMAL DEL MAPA EN GOOGLE"></a>

Largo de las imágenes del tel etc…
18x13 = mail
14x13 = mail

developer.apple.com

Link video [3 ways]

li img.list-icon {
	width: 50px;
	vertical-align: middle;
	padding-right: 5px;
}

Link youtube:
href = normal link de youtube.

Link video web
href = video/Photo…m4v

Link web
href = video.html
video.html = Video element
<video id="video" poster="images/poster.png" controls"yes" width="300">
<source src="video/PhotoshopWk3Class.m4v" type="video/x-m4v">

Para que funcióne JS:
var ua = navigator.userAgent;
if(au.indexOf('iPhone") > 0) {
	document.location.replace("vido....m4v");
}

Eliminar el url bar

Se llama en body onload();
Agregar JS:
function init() {
	window.scrollTo(0,1);
}

Icon: 57 x 57

Poner el home screen una imagen al boommark
<link rel="apple-touch-icon" href="icon.png">

Quitar la url bar y la parte de abajo [parece una app normal]
<meta name="apple-mobile-web-app-capable" content="yes">
{
No funcionan los links
}

FORMS:

CSS
form{
	background-color: white;
	-webkit-border-radius: 8px;
	padding: 10px;
}

http://developer.apple.com/webapps/designingcontent.php

Código HTML:

Xcode, builder interface

View-Navigation App

video
Agregar video framework

Main windows in Resources
- inspector: background. etc.

Agregar Imagenes en resources. - Arrastrarlas


Viewcontroller.h

#import <UIKit/UIKit.h>
#import <MediaPlayer/MediaPlayer.h>

-(IBAction) playMovie:(id)sender;
playmovie = method
SENDER = parametro
id = tipo de parametro
- (void) playMovieAtUrl: (NSURL*) theURL;
- (void) myMovieFinishedCallback: (NSNotification*) aNotification;

viewcontroller.m
@implementation view controller {
aqui agrego metodos}

- (IBAction) playMovie:(id)sender {
NSLog(@"Clicked the play button");
}

-(void) playMovieAtURL: (NSURL*) theURL {
cosnegir code de apple
}

Poner método en el botón, arrastramos la linnea a files owner. desd ele boton con el boton derecho