El objetivo de este libro es facilitar el trabajo con HTML5 Builder tanto a usuarios de versiones previas como a aquellos que no tienen experiencia alguna con el producto. Por ello no está centrado exclusivamente en el estudio de las novedades específicas de esta versión, a pesar de que las mismas abarcan la mayor parte de los capítulos.

El libro cubre todos los aspectos que va a tener que afrontar un nuevo usuario de HTML5 Builder, como son, HTML5, CSS3, JavaScript, PHP, los distintos modelos de proyectos para web y para móviles, la compilación y despliegue en las diferentes arquitecturas y dispositivos, el IDE en general y las librería incluidas en la herramienta. Y consigue hacerlo ordenadamente y con claridad, por lo que supone un fantástico trampolín para adentrarse en un modelo de desarrollo complejo y potente, y comprender la gran cantidad de funcionalidades de este producto.

Los contenidos se encuentran divididos en cuatro apartados:

Apartado I, Introducción a HTML5 Builder

La primera parte de este libro abarca tres capítulos y está pensada para, como su título indica, introducir las características fundamentales del producto, permitiéndonos conocer su funcionalidad general y también el entorno de desarrollo con el que vamos a trabajar. Asimismo se describe de manera somera el proceso de instalación.

• Capítulo 1: Características de HTML5 Builder XE3
  Si hemos elegido HTML5 Builder como herramienta de trabajo probablemente ya conozcamos sus características fundamentales, pero también es posible que estemos evaluando si este producto es el adecuado o no para nuestras necesidades de desarrollo. En cualquier caso, parece lógico iniciar un libro describiendo aquello sobre lo que trata con algo más de profundidad de lo que es posible inferir a partir de un índice de contenidos.
  El objetivo de este breve capítulo es, por tanto, ofrecerte una visión general de cuáles son las posibilidades de la herramienta que has elegido, a fin de que sepas qué podrás hacer con ella a medida que vayas conociéndola. No entraremos por el momento en detalles concretos relativos a la interfaz de usuario, los procedimientos a seguir para iniciar un proyecto, diseñar la interfaz de usuario, etc. Estos son temas que abordaremos en capítulos posteriores.
   
• Capítulo 2: Instalación del producto
  HTML5 Builder puede adquirirse como parte de RAD Studio XE3 o bien en forma de producto independiente (contacta con Danysoft para +info). En cualquier caso, el proceso de instalación es el mismo y se lleva a cabo separa-damente de la instalación del resto de herramientas de RAD Studio.
  Dicho proceso es similar al de la instalación de cualquier otra aplicación: una progresión de indicaciones, meramente informativas en gran parte, y sucesivos clics en un botón para continuar, hasta llegar al final. Son pocos los casos en los que tendremos que introducir alguna información, pero el proceso completo se compone de alrededor de una treintena de pasos. Tam-bién es importante que conozcamos, antes de proceder con las instalación, cuáles son los requisitos software/hardware para ejecutar HTML5 Builder.
   
• Capítulo 3: Introducción al entorno de desarrollo
  El entorno de trabajo que ofrece HTML5 Builder, su interfaz de usuario, es como una caja de herramientas repleta de útiles de bricolaje. Cada uno de ellos tiene una función concreta, siendo necesario saber a cuál hemos de recurrir según la tarea que tengamos entre manos. ¿Para aflojar una tuerca usaremos un destornillador o una llave fija?
  Análogamente, a la hora de desarrollar un proyecto con HTML5 Builder hemos de conocer las herramientas que nos ofrece y saber elegir la más adecuada en cada momento. En este capítulo se guiará al lector a través de un recorrido rápido por el IDE (Integrated Development Environment) de esta aplicación, con el objetivo de obtener una visión general que, en capítulos posteriores, nos sirve para centrarnos en aspectos más concretos.

Apartado II, Tecnologías web para el cliente

En general, todos los proyectos que creemos con HTML5 Builder contarán con una interfaz de usuario desarrollada usando tecnologías web dirigidas a la parte cliente. Los capítulos de esta segunda parte se centran en el estudio de dichas tecnologías.

• Capítulo 4: Componentes de una aplicación web cliente
  Las conocidas como Web Client Applications (WCA, en adelante) se caracte-rizan por funcionar de manera autónoma en el cliente, una vez que han sido transferidas hasta este desde el servidor en el que están alojadas. Una WCA, por tanto, es responsable tanto de aportar la interfaz gráfica de usuario como el código necesario para la implementación de cualquier comporta-miento dinámico que pudiera existir, sin más comunicación con el servidor.
  La interfaz de usuario de una aplicación web, ya sea WCA o de servidor, se define en dos capas: contenido, definido en HTML (Hypertext Markup Language), y estilo, establecido con CSS (Cascade Style Sheet). Los elementos de ambas capas son accesibles desde una tercera, la formada por los guiones JavaScript responsables del comportamiento dinámico, a través de un modelo estándar : DOM (Document Object Model).
  Con HTML5 Builder crearemos una WCA a partir de la plantilla de proyecto Client Web Application, proyecto al que posteriormente podemos añadir básicamente dos tipos de módulos: Client Page y Client Unit. El proyecto constará de otros módulos, en principio permanecen ocultos, encargados de efectuar la entrega de la aplicación a los clientes que lo soliciten. En este capítulo conoceremos la estructura general de una WCA, la forma de desarrollarla con HTML5 Builder, la finalidad de cada tipo de módulo y las tareas comunes asociadas a este tipo de proyecto. En los capítulos posterio-res de esta segunda parte del libro profundizaremos en aspectos específicos.
   
• Capítulo 5: Definición del contenido con HTML5
  La interfaz de usuario de una WCA se compone, como ya sabemos, de tres partes bien diferenciadas: contenido, apariencia y comportamiento. El contenido establece qué elementos forman parte de dicha interfaz, habiendo de definirse utilizando un lenguaje que el navegador pueda interpretar. Dicho lenguaje es HTML5, la última versión del estándar HTML que, a pesar de encontrarse en pleno desarrollo, está ya ampliamente aceptada.
  Para definir el contenido de nuestra interfaz, por tanto, necesitamos saber qué elementos existen en HTML5. Por esa razón la primera sección de este capítulo ofrece una introducción a dicho lenguaje de marcas.
  Por regla general el contenido será generado, todo o en parte, por compo-nentes de la biblioteca RPCL que incorpora HTML5 Builder, comenzando por la propia página que actúa como contenedor. En la segunda sección del capítulo conoceremos los componentes y características más importantes.
  También abordaremos la inclusión de plantillas de contenido en el proyecto, agregando las marcas necesarias para colocar en ellas los componentes que hayamos definido en la vista de diseño. Asimismo se introducirá la obtención de información desde una base de datos para usarla como parte del contenido de la interfaz.
  
  
• Capítulo 6: Asignación de estilos con CSS3
  La apariencia de una interfaz de usuario tiene una gran influencia en la aceptación de una aplicación por parte de las personas que tienen que utilizarla. Es un aspecto sobre el que se han publicado numerosos artículos, con estudios estadísticos que reflejan cómo una mejora en la distribución y el aspecto de los elementos de la interfaz, manteniendo la misma funcionalidad, puede llevar a un usuario de abandonar la aplicación a utilizarla de manera habitual.
  En una WCA los elementos que forman la interfaz se definen con HTML, lo hemos estudiado en el capítulo previo, y los atributos de cada elemento establecen aspectos como el tipo de dato que puede introducirse o la lista de opciones que se ofrece. La apariencia visual de los elementos es un aspecto que se mantiene totalmente separado, algo que contribuye positivamente a la separación de tareas, ya que el aspecto visual suele dejarse en manos de diseñadores que decidirán cuál es la gama de colores a aplicar, los tipos de letra, distribución de los elementos, etc.
  Para establecer la apariencia de un elemento HTML hay que definir un estilo con CSS, ya sea específico o genérico. Los estilos CSS se heredan, de ahí la denominación Cascade Style Sheet indicando que se aplican en cascada. Esto significa que un mismo elemento puede verse afectado por múltiples estilos, dependiendo de cuál sea el tipo de elemento, su clase, su identificador, el estado en que se encuentre, etc
  La versión más reciente de CSS, conocida como CSS3, incorpora mecanismos que van más allá de la simple asignación de un estilo estático, siendo posible definir transiciones, transformaciones y animaciones. Esto tiene como resultado que el estilo puede conllevar también un cierto comportamiento por parte de los elementos afectados, sin necesidad de que haya código JavaScript implicado.
  Como ocurre con HTML5, podría escribirse un libro monográfico sobre las posibilidades de CSS3. Por ello el objetivo de este capítulo no es ofrecer una descripción pormenorizada de todos los aspectos de este lenguaje de definición de estilos. En la primera sección del capítulo se introducen los aspectos fundamentales, que pueden servirnos como base para profundizar recurriendo a la definición completa del estándar. En la segunda abordaremos la aplicación de estilos en el contexto de la RPCL. Finalmente se explicarán algunos de los aspectos avanzados de CSS3.
   
• Capítulo 7: Comportamiento dinámico con JavaScript
  La composición de la interfaz de usuario de una WCA es un trabajo que, como hemos comprobado en los dos capítulos previos, puede efectuarse en su mayor parte mediante el diseñador de HTML5 Builder. No hay más que tomar objetos de la Paleta de componentes, insertarlos en la página, modi-ficar sus propiedades en el Inspector de objetos y, opcionalmente, facilitar una plantilla de distribución y quizá una hoja de estilos complementaria.
  Esa interfaz no será más que una simple página web si no incorporamos el comportamiento dinámico que se espera de una aplicación. Con este fin utilizaremos fundamentalmente tres herramientas:
  • JavaScript: Todos los navegadores web actuales incorporan un motor de ejecución de guiones escritos en lenguaje JavaScript, un lenguaje interpretado y con orientación a objetos basado en prototipos. Es fundamental conocer este lenguaje si uno quiere dedicarse al desarrollo de aplicaciones web.
  • jQuery: Es una biblioteca escrita en lenguaje JavaScript que simplifica muchas de las operaciones más habituales. El código producido por los componentes RPCL hace uso de esta biblioteca, como lo haremos nosotros en muchos casos.
  • Eventos: Por regla general el código JavaScript se ejecutará como respuesta a alguna señal producida por la interfaz, por ejemplo la pulsación de un botón o la selección de un elemento de una lista, o por el propio navegador. Esas señales son los eventos desencadenados por los distintos elementos HTML, y necesitamos conocerlos para fijar las conexiones entre interfaz y código de manera adecuada.
  El objetivo de este capítulo es introducir las bases del lenguaje JavaScript, ofreciendo diferentes ejemplos que demuestran sus estructuras más importantes. También aprenderemos algo sobre jQuery, así como la manera de conectar la interfaz de usuario con el código mediante eventos, temas ambos sobre los que profundizaremos en el capítulo siguiente al describir el modelo de objetos DOM (Document Object Model).
   
• Capítulo 8: Conexión de los componentes con DOM
  Una WCA está formada por tres componentes: el contenido, la información sobre su apariencia y el código que le otorga un comportamiento. Los dos primeros, definidos mediante HTML y CSS, son fundamentalmente estáti-cos, a pesar de que CSS contempla la posibilidad de diseñar animaciones y transiciones. El tercero se implementa con JavaScript, un lenguaje de programación, que de alguna manera ha de conectarse a los dos anteriores.
  El navegador web es el encargado de realizar el análisis sintáctico del contenido de los módulos HTML y CSS, generando en memoria una estructura de datos en forma de árbol que actúa como modelo del documento: el DOM (Document Object Model).
  Cada nodo de ese árbol es un objeto que por regla general representa a un elemento HTML, si bien hay algunos objetos adicionales como es el que ocupa el nodo raíz, llamado document. Desde JS se accede a dichos objetos, generados por el navegador, como si fuesen objetos propios del lenguaje, es decir, ya están ahí, predefinidos, y podemos acceder a sus propiedades y métodos. Habitualmente los atributos del elemento HTML se convierten en propiedades del objeto que le representa, mientras que la información de estilo asociado se introduce en un objeto vinculado al objeto que actúa como nodo, accesible a través de la propiedad style de este.

Apartado III | Tecnologías web para el servidor

Una aplicación web puede dividirse en dos partes, siguiendo la arquitectura cliente/servidor, que utilizan el protocolo HTTP para comunicarse y hacer posibles tareas que no pueden implementarse exclusivamente usando las tecnologías cliente descritas en los capítulos previos. En esta segunda parte del libro estudiamos las tecnologías específicas para el servidor.

• Capítulo 9: Proyectos WSA y el lenguaje PHP
  De las dos partes que componen una aplicación web estándar, la que va a ejecutarse en el servidor estará implementada en algún lenguaje que el servidor web esté preparado para procesar. En el caso de HTML5 Builder el lenguaje elegido es PHP, posiblemente el lenguaje más utilizado para esta tarea y cuya configuración en los servidores web más utilizados, como son Apache o IIS, resulta muy sencilla.
  Dado que una gran parte del trabajo de una aplicación web se desarrolla en el servidor, es de vital importancia conocer el lenguaje de programación que servirá para implementar las distintas tareas: producción del contenido inicial y el estado de la interfaz, procesamiento de los datos enviados desde el navegador, almacenamiento y recuperación de información, etc.
  En este capítulo vamos a conocer las diferencias que existen entre un proyecto WCA y una aplicación web de servidor (WSA) en HTML5 Builder: los módulos que la componen, el diseño de la interfaz, edición de código, etc. Todo lo que hemos aprendido en los capítulos previos nos será de utilidad, pero necesitaremos añadir una pieza fundamental: el lenguaje PHP. Ese será el tema que ocupe el resto del capítulo.
   
• Capítulo 10: La biblioteca de componentes RPCL
  En varios de los capítulos de la segunda parte de este libro usábamos componentes de la biblioteca RPCL para diseñar la interfaz de usuario de una WCA, una aplicación que se almacena estáticamente en el servidor, se transfiere tal cual al cliente y en este el código JavaScript se encarga de regir su comportamiento. Esos mismos componentes ofrecen, cuando son usados en un proyecto de tipo WSA, funcionalidad adicional basada en la ejecución del código en el servidor. Gracias a ello podremos procesar en el servidor los datos introducidos por el usuario en el navegador, controlar la navegación por la interfaz, enviar a la interfaz información generada dinámicamente o bien obtenida de una base de datos, etc.
  En este capítulo vamos a conocer algunos detalles relativos al desarrollo de aplicaciones de servidor web utilizando las características de los componentes que facilita HTML5 Builder, la mayor parte de los cuales pertenecen a la biblioteca RPCL.
   
• Capítulo 11: Almacenamiento y recuperación de datos
  Una aplicación web de tipo WSA aprovechará los recursos del servidor en que está alojada, o de otros servidores a los que tenga acceso, para almacenar los datos sobre los que trabaja, ya sean personales de cada usuario o información compartida por grupos de usuarios.
  Con este fin la aplicación puede recurrir básicamente a dos técnicas: la lectura/escritura directamente en el sistema de archivos, controlada por la propia aplicación, o bien la delegación de esa tarea en un software especializado como puede ser un servidor de datos relacional (RDBMS) o algún otro tipo de servidor de almacenamiento.
  En este capítulo aprenderemos a realizar algunas operaciones básicas sobre el sistema de archivos, almacenando y recuperando información enviada por los usuarios a través de la interfaz de una aplicación, así como a utilizar los componentes de la RPCL específicos para el trabajo con bases de datos.

Apartado IV | Aplicaciones web para móviles

Los dispositivos móviles han ido incorporando paulatinamente funcionali-dades que antes solo tenían los ordenadores, como la posibilidad de navegar por la web y de ejecutar aplicaciones. Esta última parte del libro describe los elementos de HTML5 Builder que hacen posible que una aplicación web, con o sin parte servidor, se ejecute en un teléfono móvil o una tableta.

• Capítulo 12: De la web al móvil con PhoneGap
  En los últimos años el número de smartphones y de tabletas en uso ha crecido de manera muy importante y, según previsiones de ciertas consultoras, en breve las ventas de este tipo de dispositivos superarán a las de ordenadores tradicionales, tanto de sobremesa como portátiles, alcanzando cifras en el orden de cientos de millones de aparatos nuevos. Se trata, en consecuencia, de un enorme mercado para la venta de aplicaciones.
  Los dispositivos móviles, denominación genérica con la que nos referiremos en adelante a teléfonos inteligentes, tabletas y otros dispositivos con capaci-dad para la instalación y ejecución de aplicaciones a través de algún tipo de red de comunicación, son a vista de muchos el futuro para los desarrollado-res de software. Posiblemente ese futuro haya llegado ya, y sea el presente.
  El objetivo de este capítulo es ofrecer una visión general sobre la infraestructura que ofrecen las plataformas más importantes (los sistemas operativos utilizados en esos dispositivos) para el desarrollo de aplicaciones, así como los elementos que hacen posible convertir (hasta un cierto punto) un proyecto web desarrollado con HTML5 Builder en una aplicación nativa para iOS, Android o Windows Phone.
  Entre esos elementos juega un papel fundamental PhoneGap, un software cuyos fundamentos también conoceremos en el presente capítulo. Asimismo echaremos un vistazo a las diferencias entre las herramientas de HTML5 Builder que hemos usado hasta ahora y su versión para proyectos móviles, por ejemplo a la hora de diseñar una interfaz de usuario.
• Capítulo 13: Componentes específicos para móviles
  En este segundo capítulo dedicado al desarrollo de soluciones para dispositivos móviles conoceremos algunos de los componentes de jQuery Mobile y PhoneGap, alojados en las páginas Mobile y Mobile Hardware de la Paleta de herramientas.
  Comenzaremos con el diseño de la interfaz de usuario, analizando algunos de los aspectos específicos de la página y aprendiendo a usar controles para agrupar el contenido y facilitar la navegación por las distintas secciones de que se componga la interfaz. También sabremos cómo cambiar el tema visual de la interfaz, ya sea utilizando temas predefinidos o creando los nuestros a medida.
  En la última sección del capítulo se describirá el uso de algunos componentes PhoneGap mostrando, por ejemplo, cómo utilizar la cámara fotográfica o el GPS.
• Capítulo 14: Despliegue de aplicaciones móviles
  En este último capítulo del libro abordaremos la fase final del desarrollo de una aplicación móvil: su despliegue en un emulador o un dispositivo físico. Para ello es necesario empaquetar el proyecto, tarea que podemos llevar a cabo básicamente mediante dos procedimientos distintos: usando el paquete de desarrollo correspondiente a la plataforma de destino, por ejemplo el SDK de Android, o bien usando el servicio PhoneGap Build.

Por favor, tenga en cuenta que las copias digitales de los libros están personalizadas y se entregan dentro de un plazo máximo de 24h dentro de nuestro horario laboral