Módulo 4 - Lectura 4.pdf

Maquetado y programación de aplicaciones Emprender el desarrollo de nuevas aplicaciones para dispositivos móviles implica llevar a cabo un proceso de desarrollo que consiste en determinar qué tipo de solución se puede implementar en función de los objetivos planteados. Este proceso exige que los pro...

Maquetado y programación de aplicaciones Emprender el desarrollo de nuevas aplicaciones para dispositivos móviles implica llevar a cabo un proceso de desarrollo que consiste en determinar qué tipo de solución se puede implementar en función de los objetivos planteados. Este proceso exige que los profesionales de sistemas trabajen en base a un enfoque metodológico que permita determinar con claridad los objetivos del proyecto, cuáles son los requerimientos que se deben satisfacer y cuál es el alcance del proyecto, además de definir la tecnología adecuada para su implementación y su plan de ejecución. En esta lectura, se describen los pasos que se deben ejecutar para crear una solución a través del desarrollo de una aplicación para dispositivos móviles. Para desarrollar los conceptos, analizaremos el caso del Centro de Actividades Culturales desarrollado en la lectura 1 del módulo 4. Maquetado y programación de aplicaciones Video conceptual Referencias Revisión del módulo Lección 1 de 4 Maquetado y programación de aplicaciones Proceso de desarrollo de una aplicación Para la construcción de una solución, los equipos de trabajo deben llevar a cabo un proceso de desarrollo basado en un enfoque metodológico que se compone de una serie de etapas en las cuales se determinan aspectos importantes a tener en cuenta para el desarrollo de la aplicación. Dentro de los pasos que se deben considerar, se encuentran aquellos relacionados a las definiciones sobre cómo se debe realizar la aplicación, es decir qué tipos de recursos se utilizarán para llevar a cabo la implementación. Frameworks y librerías para el desarrollo La implementación de una solución a través del desarrollo de una aplicación se puede realizar de diversas formas. Por ejemplo, utilizando HTML5, CSS3, JavaScript en combinación con algunos frameworks existentes para el desarrollo de aplicaciones web para móviles. A modo de ejemplo, se pueden destacar dos frameworks muy utilizados que simplifican el proceso de desarrollo de una aplicación: Bootstrap VER EL FRAMEWORK JQueryMobile VER EL FRAMEWORK Ambos recursos brindan elementos que son de mucha ayuda al momento de abordar el desarrollo de una aplicación web. ¿Qué es un framework? En desarrollo, framework se define como un conjunto de conceptos, prácticas y criterios enfocados en solucionar una problemática en particular. Por ejemplo, un framework CSS provee una estructura básica que ayuda a resolver problemas de estilo dentro del desarrollo web. Bootstrap Bootstrap es un framework CSS que sirve para maquetar páginas web de manera rápida y sencilla. Es de código abierto, por lo que se puede utilizar de forma gratuita, sin restricciones. Las características más importantes de Bootstrap son las que se detallan a continuación. Fácil de integrar: para integrar Bootstrap a un proyecto se necesita ingresar a Get Bootstrap y copiar el CDN, para pegarlo en el proyecto. Sistema de grillas: provee un sistema de grillas con el cual se puede crear un layout de página en forma muy simple. Estilos en la mayoría de los elementos HTML: los elementos del HTML como listas, botones, formularios, son trabajados con clases. De esta manera, se puede hacer uso de elementos con estilos ya definidos por el framework. Lista de componentes: define un conjunto de componentes que pueden ser utilizados en el desarrollo de la aplicación web. Documentación: dentro de la página de Bootstrap se encuentra la documentación donde se explica el uso mediante gran cantidad de ejemplos. JQueryMobile jQuery Mobile es un sistema de interfaz de usuario basado en HTML5 diseñado para crear sitios web y aplicaciones responsivos que sean accesibles en teléfonos inteligentes, tabletas y dispositivos de escritorio. Es uno de los recursos para desarrollo más conocidos y es de distribución gratuita. Permite simplificar el desarrollo de las aplicaciones, teniendo en cuenta que la complejidad de las mismas aumenta, ya que no solo se incluyen textos simples, sino que contienen efectos visuales, animaciones, autocompletar, etcétera. Otra gran ventaja es que, al utilizar este tipo de recursos o librerías, el desarrollador se despreocupa de la compatibilidad con los navegadores, ya que la librería resuelve este problema. Las ventajas que propone el desarrollo utilizando la librería jQuery son las siguientes: cuenta con actualizaciones, documentación y plugins que potencian su uso; es una librería que se presenta como software libre y su código es abierto; permite reducir la cantidad de líneas de código al momento de desarrollar una aplicación; hace transparente navegadores. al usuario el soporte para diferentes Un aspecto muy importante a tener en cuenta en el proceso de desarrollo de una aplicación web móvil radica en la capacidad de brindar un diseño que tenga en cuenta la experiencia de usuario. Otro elemento importante es la capacidad de respuesta para la construcción de la aplicación por parte del equipo de desarrollo del proyecto. Por este motivo, es muy importante incorporar al proyecto recursos o frameworks del tipo Bootstrap o JQueryMobile, para lograr interfaces de usuario más acabadas y mayor velocidad de respuesta en el desarrollo del proyecto. Concepto Mobile First Uno de los conceptos más importantes a la hora de crear páginas web, es que las mismas deben tener características responsivas, es decir, estar pensadas para ser adaptadas a los distintos tamaños de dispositivo. De hecho, Bootstrap se basa en esta filosofía para crear todos sus componentes y características. Mobile first es una filosofía de desarrollo que apunta a diseñar prioritariamente la visualización y estructura del sitio en dispositivos móviles. Se establece el diseño para pantallas reducidas y luego se escala hacia pantallas de mayor tamaño. Para comenzar a trabajar con Mobile first, se debe comprender cómo trabajar con diferentes resoluciones de pantalla. Esto lleva a normalizar los tamaños sobre los cuáles se trabaja mientras se desarrolla la página. Trabajar usando características de los diseños responsivos Se debe trabajar con funcionalidades utilizadas en diseños responsivos. Usar la etiqueta meta viewport – El meta viewport es la etiqueta HTML usada para dar al navegador las instrucciones de cómo debe controlar las dimensiones y escala de la página. Esta etiqueta debe ser ubicada dentro del Head de la página. Los parámetros definidos son los siguientes: width=device-width: establece el ancho de la página para seguir el ancho de pantalla del dispositivo; initial-scale=1.0: establece el nivel de zoom inicial cuando el navegador carga la página por primera vez. Otras recomendaciones de desarrollo, consisten en utilizar grillas para estructurar la disposición de los elementos de una página web de forma simple y utilizar imágenes responsivas, usando unidades de medida relativas. Experiencia de usuario con la página web – Es importante reconocer la experiencia del usuario al trabajar con la aplicación creada, en distintos tipos de dispositivos. El objetivo es desarrollar la mejor experiencia mediante el uso de características específicas de un dispositivo en concreto. Priorizar contenido en la página web – Mobile first, prioriza el contenido basado en la importancia que tiene dentro de la página web. Implica realizar el desarrollo teniendo en cuenta cuando se debe mostrar cada contenido en función del tipo de dispositivo desde el que se accede. Por ejemplo, es común priorizar la visualización de ciertos contenidos por sobre otros, en dispositivos más pequeños. Uso de Bootstrap Para hacer uso del framework se debe acceder al apartado de introducción del sitio, que puedes visualizar en el siguiente enlace: Introduction Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. MÁS INFORMACIÓN GETBOOTSTRAP  En esta sección se debe copiar el código para integrar por CDN, como se muestra en la figura: Figura 1: Integración de Bootstrap a la página Fuente: [Imagen sin título sobre Integración de Bootstrap a la página] (s. f.). Recuperado de https://cutt.ly/JnWYXa4 El ejemplo de código que referencia esta integración es el siguiente: Otro elemento a considerar es la incorporación jQuery, Popper.js y el JavaScript de Bootstrap, ya que Bootstrap necesita de las librerías para su correcto funcionamiento. La copia del código se realiza justo antes del cierre de la etiqueta. A partir de esta integración, se pueden utilizar los elementos provistos por Bootstrap para lograr un comportamiento responsivo de la página. En la lectura 2 de este módulo se desarrolló un ejemplo de página web para la divulgación de los eventos del Centro de Actividades Culturales. Si bien el proyecto funciona, una de las observaciones de la implementación tiene que ver con el diseño de la página. Por lo tanto, se considera oportuno realizar modificaciones en el diseño para mejorar la experiencia del usuario. A continuación, se define el nuevo esquema: Figura 2: Nuevo esquema de diseño web Fuente: elaboración propia. Para realizar este tipo de implementación, es conveniente el uso del framework Bootstrap, para lograr en forma sencilla disponer de los contenidos de los eventos en forma de grilla. Para desarrollar el nuevo diseño se debe integrar a la página desarrollada en la primera versión, los elementos correspondientes al framework Bootstrap. Por ejemplo, se puede mejorar la barra de navegación del proyecto, incluir la grilla central para los contenidos y crear el formulario de contacto a partir de los ejemplos que brinda el sitio del Frame. Mejorar NAV Para mejorar la representación del NAV, ingresamos al sitio del framework, y en la sección componente y seleccionamos NAV. Se puede observar un conjunto de ejemplos que se pueden tomar para mejorar el diseño. Figura 3: Ejemplo de NAV a partir de componente de Bootstrap Fuente: [Imagen sin https://cutt.ly/6nWY7WI título sobre ejemplo de NAV] (s. f.). Recuperado de El NAV definido en el código de la versión anterior de la página debe ser reemplazado por el ejemplo obtenido del sitio de Bootstrap y configurado con las opciones correspondientes. Opción 1 Opción 1 Opción 1 Para mejorar la sección demarcada por la etiqueta NAV, podemos aplicar el procedimiento detallado para incorporar el código correspondiente y configurarlo de acuerdo a las necesidades.... Actividades Contacto Acerca de.. Layout en grilla Para agregar los contenidos en grilla, se debe realizar el mismo procedimiento: ingresar al sitio de Bootstrap, en la sección Layout y tomar el ejemplo que se ajuste a las necesidades del diseño. Figura 4: Ejemplo de grilla de tres columnas Fuente: [Imagen sin título sobre ejemplo de grilla de tres columnas] (s. f.). Recuperado de https://cutt.ly/7nWUexG Por ejemplo, este código representa el diseño de una grilla de tres columnas One of three columns One of three columns One of three columns Se puede realizar la redistribución de los contenidos de los eventos en una grilla de tres columnas tal como lo define el diseño de la página. En la sección Layout del framework, seleccionar la opción Grid... One of three columns One of three columns One of three columns. Al aplicar los cambios sobre el archivo de la página del caso de estudio se obtiene la siguiente visualización: Figura 5: Resultado de aplicar los cambios a la página del caso de estudio aplicando Bootstrap Fuente: elaboración propia. Componentes complejos A través de Bootstrap, se pueden incorporar algunos elementos complejos, como pueden ser formularios. Por ejemplo: en la figura se puede observar un formulario típico para incorporar en la página web. Figura 6: Formulario definido en Bootstrap Fuente: [Imagen sin título sobre formulario definido en Bootstrap] (s. f.). Recuperado de https://cutt.ly/FnWUmpl El código de formulario que podemos utilizar es el siguiente: Email address We'll never share your email with anyone else. Password Check me out Submit Se puede incorporar el formulario de contacto solicitado en el diseño mediante el uso de Bootstrap, copiando el ejemplo de formulario prediseñado y adecuando el mismo a las necesidades del proyecto. Para ello, se debe editar el archivo de la página web desarrollada e incluir el siguiente código:... Nombre Ingrese Ingrese su mail Mensaje Ingrese su mensaje ¿Interesado en Submit... La utilización de Bootstrap permite aplicar el criterio de diseño responsivo para la página desarrollada en el caso de estudio en que, ante cambios en las dimensiones del área de visualización, se produce un reacomodamiento de los elementos de la página, permitiendo que la misma se visualice a través de distintos tipos de acceso. Figura 7: Visualización a tamaño completo Fuente: elaboración propia. Figura 8: Visualización a tamaño reducido Fuente: elaboración propia. Ejemplo de implementación utilizando JQueryMobile A continuación, se muestra un ejemplo de desarrollo de una página web utilizando JQueryMobile. El objetivo es verificar de qué manera se puede construir una página con la ayuda de este framework, que permite un desarrollo rápido y simple de aplicaciones. Para ello debemos tener en cuenta que el desarrollo se debe realizar en HTML5 y se debe incorporar JQueryMobile. La página inicial presenta la siguiente estructura: Título Página... Sobre esta estructura base se pueden agregar los distintos elementos para conformar la página web. Se observa la inclusión de la librería mediante enlace del archivo de la página con JQuery. Contenido por secciones La estructura de contenidos de una aplicación en jQuery Mobile se basa en un atributo data creado para HTML5. A través del atributo data-role, se define el rol del elemento contenido convirtiéndolo en un elemento de la interfaz.......... Mediante esta declaración, se agregarán los elementos gráficos, clases y animaciones necesarias para generar una interfaz compatible con dispositivos móviles. En el siguiente ejemplo, se visualiza el código de una página web con ejemplos de elementos provistos por la librería y que pueden ser utilizados por los desarrolladores. Título Página Inicio Menú Visitar Página Web Ingrese texto: Slider: Pie de Página En el código ejemplo se observan los siguientes componentes: data-role: se repite para definir el rol del elemento que lo contiene para convertirlo en elementos de interfaz. Por ejemplo: define la sección Header define la sección footer o pie de página Conclusión El desarrollo de aplicaciones web y web móviles conlleva a un desafío importante para los profesionales de sistemas y diseñadores. Estos deben implementar soluciones adecuadas que cumplan con los objetivos, satisfagan los requerimientos y brinden una experiencia al usuario que permita aumentar la probabilidad de éxito de la aplicación en un tiempo de desarrollo reducido. Para lograr esto, los equipos de desarrollo deben ser capaces de construir aplicaciones de calidad, que se puedan utilizar a través de diferentes tipos de dispositivos y plataformas. Lo deben hacer rápido y, para ello, cuentan con recursos que brindan gran cantidad de frameworks como Bootstrap y JQueryMobile. Código completo de desarrollo para el caso de estudio