Aplicación web HTML5 con Intel® XDK
Introducción
Intel® XDK permite a los desarrolladores crear aplicaciones web y HTML5 mediante el uso de tecnologías web tales como HTML5, JavaScript y CSS3 para varias plataformas. Les permite escribir aplicaciones que se ejecuten en múltiples plataformas y en dispositivos móviles, sin hacerles modificaciones. Intel® XDK es compatible con todas las plataformas de destino más importantes: Microsoft Windows*, OS X* y Ubuntu* Linux*. Esta herramienta proporciona un flujo de trabajo completo para desarrollar, depurar, probar e implementar aplicaciones en dispositivos basados en la plataforma de destino.
Es ideal tanto para desarrolladores experimentados como para los que recién comienzan, con un flujo de trabajo simplificado que posibilita diseñar, compilar e implementar con facilidad aplicaciones web e híbridas en muchas tiendas digitales y en dispositivos de diferentes tamaños. Es posible comenzar con un proyecto en blanco o trabajar con un ejemplo de demostración u otras plantillas. Se pueden hacer modificaciones con el editor de código fuente abierto HTML5 Brackets*. HTML5 Brackets* ofrece varias funcionalidades que hacen el trabajo más cómodo, como el caso de autocompletar, y proporciona todas las herramientas necesarias para desarrollar, depurar, compilar y probar aplicaciones.
En este documento se muestra a los usuarios cómo crear una aplicación web nativa con HTML5, JavaScript y CSS3 para nuevos usuarios. Describiremos cómo instalar Intel® XDK y cómo crear un formulario simple de inicio de sesión, darle un estilo y probarlo en el emulador.
El código desarrollado para este artículo se utilizará en el futuro para brindar acceso web a los recursos empleados en la aplicación “Restaurante” a la cual se hace referencia en varios artículos de otros integrantes del equipo.
Los siguientes son vínculos a algunos de esos artículos:
- Cómo agregar funcionalidades de búsqueda
- Cómo usar una base de datos con su aplicación Android*
- Desarrollo de aplicaciones Android* para empresas con el uso de funcionalidades de emulación de tarjeta basadas en host NFC
Instalación de Intel® XDK
Descargue la versión más reciente de Intel® XDK desde http://xdk-software.intel.com e instálela. Esta herramienta es gratuita. Para iniciar y probar su aplicación en un dispositivo real, deberá crear una cuenta Intel® XDK. En Get Started with the Intel® XDK encontrará una guía que explica cómo ejecutar la aplicación en un dispositivo real. No es necesario que tenga una cuenta si va a usar el emulador de Intel® XDK para probar la aplicación.
Cómo crear un proyecto en blanco
Para comenzar con el proyecto, hay tres opciones: usar plantillas, un ejemplo de demostración o un proyecto en blanco. La herramienta incluye un flujo de trabajo simplificado que orienta a los desarrolladores a lo largo de las fases de desarrollo, prueba, depuración e implementación. El editor de texto de la pestaña “Develop” está basado en el editor Brackets*, donde se edita la aplicación. La documentación de Intel® XDK contiene instrucciones detalladas sobre cómo usar cada pestaña del flujo de trabajo.
Figura 1: Inicio de un nuevo proyecto
Figura 2: Creación de un proyecto en blanco
Uso de HTML5, JavaScript y CSS3 para crear un formulario de inicio de sesión
Ya está listo para editar el index.html con el objetivo de crear el formulario de inicio de sesión. En primer lugar, debe comenzar con una etiqueta de elemento de apertura de formulario. El tipo de entrada para el nombre de usuario y la contraseña es texto con marcador de posición. El marcador de posición describe el valor esperado del campo de entrada.
<form action="" method="post" name="login" class="little-chef-form"><label><span>Username:</span><input type="text" name="username" placeholder="Username" id="username" /></label><label><span>Password:</span><input type="password" name="password" placeholder="Password" /></label></form>
Ejemplo de código 1: Formulario de inicio de sesión en HTML5 **
Figura 3: Distribución del formulario de inicio de sesión en el emulador.
El siguiente tipo de entrada es botón. Cuando el usuario haga clic en el botón de inicio de sesión, se invocará a validateForm() de JavaScript para validar el formulario. Se puede usar HTML5 para la validación, pero es mejor usar JavaScript porque algunos de los atributos de HTML5 están limitados a los navegadores más nuevos.
<label><span> </span><input type="button" class="button" value="Login" onclick="return validateForm()" /></label>
Ejemplo de código 2: Botón de entrada en HTML5 **
Este es un ejemplo de cómo usar JavaScript para validar el formulario. Se debe guardar un archivo de JavaScript con la extensión .js.
function validateForm() {
var formUsername = document.forms.login.username.value;
var formPassword = document.forms.login.password.value;
// Validate username and password
if (formUsername === null || formUsername === "") {
alert("Username must be filled out");
}
else if (formPassword === null || formPassword === "") {
alert("Password must be filled out");
}
else if (formUsername.length < MINLENGTH || formPassword.length < MINLENGTH) {
alert("The minimum length of username and password at least " + MINLENGTH);
}
else {
// Call api function to check whether the username and password exist in the server
return;
}
alert("Login failed!!!");
}Ejemplo de código 3: Validación de formulario en JavaScript **
Si el usuario no logró iniciar sesión, limpie el formulario y dé al usuario la cantidad de intentos. Si el usuario consiguió iniciar sesión, limpie y deshabilite el formulario como se muestra a continuación:
function clearAndDisableForm(form) {
if (form == formType.LOGIN_FORM) {
// Clear the form
document.forms.login.username.value = '';
document.forms.login.password.value = '';
// Diabled the form
document.forms.login.username.disabled = true;
document.forms.login.password.disabled = true;
}
}Ejemplo de código 4: Limpiar y deshabilitar el formulario en JavaScript **
Haga un vínculo a un archivo de script externo “js/Login.js” con el uso de etiquetas de script y el atributo de origen de index.html.
<script src="js/Login.js" type="text/javascript"></script>
Ejemplo de código 5: Etiqueta de script
A continuación se muestra un ejemplo completo de formulario de inicio de sesión HTML5:
<html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="styles.css" media="screen" /><title>Little Chef Login</title><script src="js/Login.js" type="text/javascript"></script></head><body><form action="" method="post" name="login" class="little-chef-frm"><h1>Little Chef Log in<span>Please login or sellect other options </span></h1><label><span>Username:</span><input type="text" name="username" placeholder="Username" id="username" autofocus required /></label><label><span>Password:</span><input type="password" name="password" placeholder="Password" /></label><label><span> </span><input type="button" class="button" value="Login" onclick="return validateForm()" /></label><label><span> </span><input type="button" class="button" value="Reset Password" onclick="return resetPassword()" /></label><label><span> </span><input type="button" class="button" value="Register New User" onclick="return registerNewUser()" /></label></form><table id="myTable"></table></body></html>
Ejemplo de código 6: Ejemplo completo de un formulario de inicio de sesión en HTML5 **
Para aplicar un estilo igual a como se ve el formulario, use CSS3. Los métodos más comunes para insertar una hoja de estilo son: externo, interno y alineado. Las hojas de estilo externas son ideales para aplicar estilos a muchas páginas web. Cada página debe incluir un vínculo a la hoja de estilo con la etiqueta <link> dentro de la sección “head”.
<head><link rel="stylesheet" type="text/css" href="styles.css" media="screen" /></head>
Ejemplo de código 7: Etiqueta de hoja de estilos externa
Para agregar un borde gris claro de un píxel alrededor de los campos de texto de entrada y contraseña ingresada, use “border: 1px solid #CCC”. Con valores de color hexadecimales de seis cifras, se puede determinar el color del texto, el fondo y el borde. El valor predeterminado es #000000. También se pueden usar nombres de colores en inglés, como red, green, blue y otros, o el selector de colores HTML. Una manera de especificar el ancho del campo en píxeles es “line-height:15px”. También especifica el espacio entre las líneas de dos párrafos. Con “margin-bottom: 16px” se cambia el margen inferior del campo. De manera similar, margin-right y margin-top definen los márgenes derecho y superior del campo.
.little-chef-form input[type="text"], .little-chef-form input[type="password"], .little-chef-form select{
border: 1px solid #CCC;
color: #888;
background-color: #000000
line-height:15px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
}
Ejemplo de código 8: Estilo de campo de entrada en CSS3 **
En el ejemplo que sigue, se les da estilo a los botones. Se especifica el color de fondo, el color del texto de los botones y el borde. Para la forma del botón, se usa border-radius. “padding: 4px 25px 4px 25px” especifica el tamaño del botón.
.little-chef-form .button {
background: #EEE;
border: 1px solid #DDD;
padding: 4px 25px 4px 25px;
color: #333;
border-radius: 4px;
}Ejemplo de código 9: Estilo de botón en CSS3 **
Prueba en el emulador
La pestaña Emulate se usa para probar la funcionalidad y el diseño de la aplicación en un conjunto de dispositivos móviles virtuales. El predeterminado es Motorola Droid 2 con dispositivos basados en Android.
Figura 4: Formulario de inicio de sesión en el emulador
Después de crear un formulario de inicio de sesión y de probarlo en el emulador, se puede intentar crear el formulario para restablecer la contraseña y de registro de nuevo usuario.
Figura 5: Restablecimiento de contraseña
Figura 6: Registro de un nuevo usuario
Resumen
Intel® XDK es una herramienta de desarrollo de aplicaciones interplataforma HTML ascendente integrada. Las distintas pestañas de la parte superior orientan a los desarrolladores para que se guíen con facilidad por las diversas tareas propias del desarrollo. Esta herramienta hace que sea muy sencillo desarrollar e implementar aplicaciones para una o varias tiendas admitidas. En este documento se muestra también a los nuevos usuarios cómo usar Intel® XDK para crear aplicaciones web nativas.
Acerca del autor
Nancy Le es ingeniera de software del Grupo de Software y Servicios de Intel y trabaja en proyectos de aplicación de Intel® AtomTM en dispositivos de diferentes tamaños.
Enlaces de consulta
Capacitación en HTML5: http://software.intel.com/html5
*Es posible que la propiedad de otros nombres y marcas corresponda a terceros.
**Este código fuente de ejemplo se publica de acuerdo con lo estipulado en el "Contrato de licencia de código fuente de ejemplo de Intel".