Categorías destacadas
Artículo
|
Crear una aplicación web para iPhone |
Si queremos realizar una aplicación nativa para iPhone, iPod y iPad y asegurarnos de que funcionará correctamente, es necesario que utilicemos el iWebKit. IwebKit es un framework libre que nos facilitará la creación de aplicaciones y web optimizadas para los dispositivos indicados anteriormente.
Vamos a transformar un formulario web, para darle un aspecto mejorado y optimizado para iPhone. Este framework es muy completo y solo vamos a ver algunas cosas. Tiene mucha documentación a la que se puede acudir en cualquier momento.
Cuando se diseña una aplicación para iPhone, es necesario utilizar el simulador que está disponible en SDK, aunque también puedes utilizar Safari para ver como quedaría nuestra aplicación, aunque no te muestra realmente como se vería en nuestro dispositivo móvil.
El formulario que vamos a utilizar en nuestro ejemplo es el de la imagen.
Como veis, es una formulario sencillo y la forma en la que lo queremos dejar será.
El código del formulario es este.
Nuestro fichero html deberá de estar en el mismo directorio que el framework iWebKit. El primer paso será añadir las siguientes líneas a nuestro formulario, entre los HEAD
Con estas líneas le indicamos al navegador del iPhone que la página está diseñada para él, y hacemos referencia al CSS, JavaScript e imágenes. Para crear el título superior de la aplicación, utilizaremos lo siguiente:
Si cargamos la aplicación, deberemos de ver lo siguiente.
Ahora empezaremos con el cuerpo de la aplicación. Para ello abrimos un nuevo DIV con id content <div id="content"> Luego reemplazamos las siguientes líneas
Por estas otras
Si ejecutamos la aplicación, ahora nuestros campos habrán cambiado de estilos.
La etiqueta UL representan las cajas blancas, mientras que LI son las separaciones entre las secciones. Cuando carga la aplicación dentro de cada caja tendrá el contenido indicado en placeholder. Ahora seguimos reemplazando mas código.
Por esto otro
Los botones Radio cambian la apariencia y tendrá esta que os mostramos.
Ahora vamos a cambiar la apariencia de los checkbox. Sustituimo el código.
Por el siguiente:
Ahora la apariencia de los checkbox, serán como botones de On – Off
Nos encargamos ahora del textarea
Lo sustituimos por este otro
El siguiente paso es cambiar el aspecto del campo Select del formulario, vamos a ver los códigos a sustituir.
Este sería el nuevo código
La vista del formulario quedaría de esta forma. Y por último el botón de envío. Vamos a poner el código que hay que sustituir.
Este es el nuevo código
Una vez que hayamos realizado todos estos cambios, nuestro formulario sería completamente compatible con nuestro dispositivo móvil.
Vía: theappleblog.com
Vamos a transformar un formulario web, para darle un aspecto mejorado y optimizado para iPhone. Este framework es muy completo y solo vamos a ver algunas cosas. Tiene mucha documentación a la que se puede acudir en cualquier momento.
Cuando se diseña una aplicación para iPhone, es necesario utilizar el simulador que está disponible en SDK, aunque también puedes utilizar Safari para ver como quedaría nuestra aplicación, aunque no te muestra realmente como se vería en nuestro dispositivo móvil.
El formulario que vamos a utilizar en nuestro ejemplo es el de la imagen.
Como veis, es una formulario sencillo y la forma en la que lo queremos dejar será.
El código del formulario es este.
<html><head><title>Test Form</title></head> <body> <form method="post"> Name: <input type="text" size="12" maxlength="12" name="name"> Password:<input type="password" size="12" maxlength="36" name="passw"><br /> Gender:<br /> Male:<input type="radio" value="Male" name="gender"><br /> Female:<input type="radio" value="Female" name="gender"><br /> Favorite Food:<br /> Steak:<input type="checkbox" value="Steak" name="food[]"><br /> Pizza:<input type="checkbox" value="Pizza" name="food[]"><br /> Chicken:<input type="checkbox" value="Chicken" name="food[]"><br /> <textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote! Select a Level of Education:<br /> <select name="education"> <option value="Jr.High">Jr.High</option> <option value="HighSchool">HighSchool</option> <option value="College">College</option> </select><br /> <input type="submit" name="" value="Submit" /> </form> </body> </html>
Nuestro fichero html deberá de estar en el mismo directorio que el framework iWebKit. El primer paso será añadir las siguientes líneas a nuestro formulario, entre los HEAD
<meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /> <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" /> <link href="css/style.css" type="text/css" rel="stylesheet" /> <script src="javascript/functions.js" type="text/javascript"></script> <link rel="apple-touch-icon" href="homescreen.png"/> <link href="startup.png" rel="apple-touch-startup-image" />
Con estas líneas le indicamos al navegador del iPhone que la página está diseñada para él, y hacemos referencia al CSS, JavaScript e imágenes. Para crear el título superior de la aplicación, utilizaremos lo siguiente:
<div id="topbar"> <div id="title">Test Form</div> </div>
Si cargamos la aplicación, deberemos de ver lo siguiente.
Ahora empezaremos con el cuerpo de la aplicación. Para ello abrimos un nuevo DIV con id content <div id="content"> Luego reemplazamos las siguientes líneas
Name:<input type="text" size="12" maxlength="12" name="name"><br /> Password:<input type="password" size="12" maxlength="36" name="passw"><br />
Por estas otras
<ul class="pageitem"> <li class="bigfield"><input placeholder="Name" name="name" type="text" /></li> <li class="bigfield"><input placeholder="Password" name="passw" type="password" /></li> </ul>
Si ejecutamos la aplicación, ahora nuestros campos habrán cambiado de estilos.
La etiqueta UL representan las cajas blancas, mientras que LI son las separaciones entre las secciones. Cuando carga la aplicación dentro de cada caja tendrá el contenido indicado en placeholder. Ahora seguimos reemplazando mas código.
Gender:<br /> Male:<input type="radio" value="Male" name="gender"><br /> Female:<input type="radio" value="Female" name="gender"><br />
Por esto otro
<span class="graytitle">Gender</span> <ul class="pageitem"> <li class="radiobutton"> <span class="name">Male</span> <input name="gender" type="radio" value="M" /> </li> <li class="radiobutton"> <span class="name">Female</span> <input name="gender" type="radio" value="F" /> </li> </ul>
Los botones Radio cambian la apariencia y tendrá esta que os mostramos.
Ahora vamos a cambiar la apariencia de los checkbox. Sustituimo el código.
Favorite Food:<br /> Steak:<input type="checkbox" value="Steak" name="food[]"><br /> Pizza:<input type="checkbox" value="Pizza" name="food[]"><br /> Chicken:<input type="checkbox" value="Chicken" name="food[]"><br />
Por el siguiente:
<span class="graytitle">Favorite Foods</span> <ul class="pageitem"> <li class="checkbox"> <span class="name">Steak</span> <input name="steak" type="checkbox" /> </li> <li class="checkbox"> <span class="name">Pizza</span> <input name="pizza" type="checkbox" /> </li> <li class="checkbox"> <span class="name">Chicken</span> <input name="chicken" type="checkbox" /> </li> </ul>
Ahora la apariencia de los checkbox, serán como botones de On – Off
Nos encargamos ahora del textarea
<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!</textarea><br />
Lo sustituimos por este otro
<ul class="pageitem"> <li class="textbox"> <textarea name="quote" rows="5">Enter your favorite quote!</textarea> </li> </ul>
El siguiente paso es cambiar el aspecto del campo Select del formulario, vamos a ver los códigos a sustituir.
Select a Level of Education:<br /> <select name="education"> <option value="Jr.High">Jr.High</option> <option value="HighSchool">HighSchool</option> <option value="College">College</option> </select><br />
Este sería el nuevo código
<span class="graytitle">Level of Education</span> <ul class="pageitem"> <li class="select"> <select name="education"> <option value="Jr.High">Jr.High</option> <option value="HighSchool">HighSchool</option> <option value="College">College</option> </select> <span class="arrow"></span> </li> </ul>
La vista del formulario quedaría de esta forma. Y por último el botón de envío. Vamos a poner el código que hay que sustituir.
<input name="Submit" type="submit" value="Submit" />
Este es el nuevo código
<ul class="pageitem"> <li class="button"> <input name="Submit" type="submit" value="Submit" /> </li> </ul>
Una vez que hayamos realizado todos estos cambios, nuestro formulario sería completamente compatible con nuestro dispositivo móvil.
Vía: theappleblog.com
 |
Publicado por: angel carrero |
|
|
Comentarios
Últimas noticias
· factura
Últimos artículos
