PCSModulo4.pdf

HTML, CSS y JS La aparición de internet y los avances tecnológicos constantes impactan fuertemente en las organizaciones. Las mismas deben cambiar, evolucionando en su forma de llevar a cabo sus actividades. Deben adaptar sus procesos de negocio a las exigencias del entorno en que se desempeñan, acondicionando sus procesos, tecnología y sistemas de información. Sin dudas, un aspecto destacado es el desarrollo de los dispositivos móviles, los cuales con su presencia y constante evolución inﬂuyen en este proceso de transformación. Las organizaciones se enfrentan a nuevas posibilidades. Independientemente de si son empresas que comercializan productos u organizaciones sin ﬁnes de lucro, todas las entidades pueden obtener los mismos beneﬁcios, utilizando herramientas para apoyar sus estrategias de comunicación a través de internet y desarrollando presencia en la red a través de la cual dan a conocer el propósito de su existencia, sus eventos, novedades y actividades que desarrollan. En este módulo estudiaremos los conceptos fundamentales sobre los distintos softwares que se utilizan para el desarrollo de aplicaciones móviles. Fundamentalmente nos centraremos en los lenguajes que se utilizan y las distintas herramientas de desarrollo que se pueden usarse. Para desarrollar los conceptos, analizaremos un caso de estudio a través del cual podremos, mediante el desarrollo de una aplicación, identiﬁcar los distintos lenguajes y sus características, diferentes librerías de desarrollo y herramientas o entornos de desarrollo que se pueden utilizar en el proceso de construcción de una aplicación móvil. HTML, CSS y JS Referencias Lección 1 de 2 HTML, CSS y JS Caso de análisis: Centro de Actividades Culturales El Centro de Actividades Culturales, es una organización sin ﬁnes de lucro que se dedica a la organización y divulgación de eventos artísticos y culturales. Además, brinda cursos referidos a distintas actividades vinculadas al arte. Cuenta con un importante espacio para la realización de muestras, sala de convenciones y espacios dedicados a las actividades de formación y capacitación. La organización pretende mejorar su vínculo con la comunidad y, para ello, necesita mejorar sus mecanismos de comunicación con el medio en general, con el objetivo de lograr una mayor inserción en la sociedad. En función de los planes de la organización es que se plantea la necesidad de realizar una profunda reformulación de la estrategia de comunicación, mediante el uso de diversos medios. Dentro de las propuestas a trabajar, se consideran el desarrollo de un sitio web para realizar la divulgación de las actividades que se llevan a cabo en la entidad, además de favorecer el contacto directo con el público. Un requerimiento importante es que esta información también pueda ser accedida desde cualquier dispositivo móvil que permita visualizar la información. También se considera importante que, en etapas posteriores, se puedan gestionar las reservas de los espacios de exposición y las inscripciones a los distintos cursos que se ofrecen. Algunos de los requerimientos realizados por los directores para la primera etapa del desarrollo que solicitan para el centro son: el público debe poder acceder a la información del sitio web por computadoras de escritorio o dispositivos móviles, asegurando la misma experiencia en todas las plataformas; el público debe poder acceder a la cartelera de todos los eventos que se desarrollan en el centro. Durante las primeras reuniones entre los interesados y los equipos de diseño, acuerdan un diseño inicial con las siguientes características. Figura 1: Diseño inicial Fuente: elaboración propia. A través de esta lectura, se incorporarán conceptos que nos permitirán identiﬁcar las características de los distintos lenguajes a utilizar para el desarrollo de esta aplicación en su primera etapa. HTML Las aplicaciones móviles se convirtieron, con el correr del tiempo, en una herramienta fundamental para las organizaciones, ya que representan una gran oportunidad para comunicar sus actividades o vender sus productos y servicios de una manera dinámica y accesible. El uso de este tipo de aplicaciones se popularizó a tal punto que es casi obligatorio que todas las empresas y organizaciones con o sin ﬁnes de lucro tengan su propia aplicación. Los desarrolladores y diseñadores web se enfrentan a una gran demanda y necesitan herramientas de desarrollo que les permitan minimizar los tiempos de entrega. Este tipo de desarrollos propone el conocimiento de conceptos de lenguajes como HTML, en su versión más avanzada denominada HTML5, que es la utilizada para el desarrollo de aplicaciones móviles combinado con CSS para estilos y JavaScript. HTML es un lenguaje de marcas de hipertexto (HyperText Markup Language) que se utiliza para la elaboración de páginas web. Permite deﬁnir la estructura básica y código HTML para la deﬁnición de contenido de una página web, como pueden ser textos, imágenes y videos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C), que es la organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web. HTML se considera uno de los lenguajes web más importantes, ya que su aparición contribuye fuertemente en el desarrollo y expansión de la World Wide Web (WWW). HTML se consolida como el estándar impuesto para la visualización de páginas web y es el adoptado por todos los navegadores actuales. Permite indicar la estructura de un documento mediante etiquetas y se destaca por una ﬁlosofía de desarrollo que permite añadir elementos externos a la página, por ejemplo, una imagen, haciendo referencia a la ubicación del mismo mediante texto, es decir, sin incrustar el elemento. El navegador, luego, resuelve todas las referencias y muestra la página deﬁnitiva. Es un lenguaje que ha evolucionado en el tiempo, desarrollándose diferentes versiones a través de las cuales se incorporan características que permiten hacerlo más eﬁciente y fácil de utilizar en el desarrollo de páginas web compatibles con distintos navegadores y plataformas, entendiendo que las páginas ahora pueden ser accedidas desde computadoras de escritorio o dispositivos móviles. Para que estos cambios sean efectivos, es necesario que los navegadores tengan la capacidad de interpretar estas versiones, ya que, si el mismo no se adapta a estos cambios, no se visualizará correctamente la página. Tanto los navegadores como las páginas deben tratar de mantenerse en las versiones más actualizadas. En muchos casos, páginas escritas en versiones anteriores no son actualizadas o escritas nuevamente tomando en consideración las nuevas versiones de HTML. Es por este motivo que muchos navegadores mantienen la capacidad de interpretar páginas web de versiones HTML anteriores. Evolución de HTML Tim Berners-Lee, en 1990, deﬁnió el lenguaje HTML como un subconjunto del lenguaje SGML, que es un lenguaje para marcar y describir documentos con independencia total del hardware y software utilizados. También creó el World Wide Web, así como también un sistema que facilita la lectura de información, mediante un navegador web denominado Nexus. HTML evoluciona en diferentes versiones, mejorando aspectos y características fundamentales del lenguaje. La siguiente tabla presenta una breve reseña de esta evolución. Tabla 1: Evolución del HTML Versión Características HTML Surge como un lenguaje subconjunto del lenguaje SGML. Permite deﬁnir la estructura básica y código HTML para la deﬁnición de contenido de una página web, como pueden ser textos, imágenes y videos, entre otros tipos de contenidos. Esta nueva versión realiza un importante avance HTML+ (Versión HTML2) en cuanto al lenguaje de etiquetas. No llega a establecerse como estándar. Versión Características HTML 3 Incluye nuevas capacidades como facilidades para crear tablas, texto alrededor de ﬁguras y mostrar elementos matemáticos complejos. Resulta complejo de implementar para la tecnología de la época. En esta etapa se intentan deﬁnir especiﬁcaciones para las versiones 3.1 y 3.2, en donde se abandonan muchas de las características del HTML 3. Se publica como una recomendación del W3C. HTML 4 adopta elementos especíﬁcos desarrollados inicialmente para un navegador web concreto, pero al mismo tiempo se depura HTML 4 los elementos como deprecated. En 2004 la W3C, da a conocer las bases para la versión HTML5, aunque se rechaza por parte del W3C para dar paso al XML. Surge luego XHTML, tomando como base XML. Versión Características HTML5 es totalmente compatible con HTML 4, solo se quitan etiquetas obsoletas dejando vigentes las que pueden seguir siendo de utilidad. HTML5 es vital en lo que a multi-plataformas y HTML 5 multi-navegadores se reﬁere. Si bien HTML5 presenta renovaciones, hay elementos que se mantienen. Algunas de sus nuevas características no se vinculan con una etiqueta en particular, sino que son APIs de JavaScript. Ejemplos de esto podrían ser WebWorkers, WebSockets o Geolocalización. Fuente: elaboración propia. HTML 5 se presenta con la novedad de que en esta versión se enriquece el concepto de HTML con nuevas etiquetas y combinación de otras tecnologías, para brindar una solución a las necesidades del desarrollo Web. Una característica clave es la incorporación de etiquetas semánticas. HTML5, el estándar de hoy, tiene etiquetas que cumplen la función de dividir la página en distintas partes, pero atribuyendo semántica al contenido de la sección. Algunas de las etiquetas que se presentan son: nav: permite la inclusión de una sección como barra de navegación header: permite deﬁnir un bloque de encabezado, por lo general aplicado en la parte superior de una página web section: se aplica a contenido que deﬁne una sección dentro de una página footer: permite deﬁnir el pie de la página web. También puede deﬁnir el pie de un contenido. Analizando el enunciado del caso de estudio, uno de los requerimientos a satisfacer es que el público en general pueda acceder a la información del sitio tanto por una computadora de escritorio como por un dispositivo móvil, tratando de mantener la calidad de experiencia de usuario, cualquiera sea el punto de acceso. Por este motivo es importante considerar que el desarrollo debe ser realizado utilizando lenguaje HTML5 para dar estructura a la página. Deﬁniendo una página web con HTML Herramientas necesarias para crear una página web Para desarrollar una página web, se necesita tener instalados los elementos que se detallan a continuación. 1 Un navegador web: es un programa diseñado para acceder y navegar por la web, que permite la interpretación y visualizar las páginas. 2 Un editor de texto: sirve para escribir el lenguaje que luego interpretará el navegador. Existen muchos editores. Se pueden utilizar desde los más simples como el notepad de Windows hasta editores más complejos como pueden ser Atom, Visual Studio Code y SublimeText. Creando la página web Al utilizar HTML, debemos conocer el concepto de cómo se debe escribir el código correspondiente. El código se incluye en un archivo denominado index.html HTML se basa en etiquetas, que son los elementos con los que damos formato y estructura a un archivo HTML. Existen muchas etiquetas y cada una de ellas apunta a diferentes tipos de elementos. Cada una tiene un formato determinado y, por lo general, la sintaxis de una etiqueta es la siguiente: ……. CONTENIDO………. A modo de ejemplo de uso de las etiquetas, podemos considerar la deﬁnición de la estructura del archivo HTML que conforma la página web: Título de la Página Se puede observar que en cada línea se utilizan etiquetas especíﬁcas cuyo signiﬁcado son los siguientes: : deﬁne el tipo de documento HTML : deﬁne que todo el contenido dentro de estas marcas se debe tratar como html : deﬁne la cabecera del archivo, en ellos se especiﬁcan las etiquetas que dan información sobre el archivo En este ejemplo se deﬁnen el contenido de la etiqueta head, que corresponde a la deﬁnición del título, y el juego de caracteres a utilizar para lograr una correcta interpretación y visualización de la página Título de la Página Por último, observamos la etiqueta body, que es donde colocaremos el conjunto elementos que conforman el contenido de la página. Se deﬁne que, para dar solución al caso planteado, se considera realizar el desarrollo en HTML5 para dar estructura a la página. Para ello, creamos un archivo llamado index.html. Podemos realizar el siguiente esquema para deﬁnición de la estructura básica: Centro de Actividades Culturales Deﬁnición de las secciones del documento HTML Dentro del body se debe colocar el contenido de la página, es decir, lo que se pretende mostrar. Este contenido debe ser distribuido en secciones y para ello se utilizan las etiquetas semánticas de HTML 5. Por ejemplo, si necesitamos una sección donde incluir un menú, podemos utilizar la etiqueta nav de la siguiente manera: Y con el mismo criterio completar las otras secciones de nuestra página con las etiquetas semánticas correspondientes. Se puede utilizar un recurso muy útil para poder identiﬁcar qué tipo de etiqueta semántica se puede utilizar para deﬁnir la estructura de la página. Figura 2: HTML5 Element Flowchart" de HTML5 Doctor. Diagrama guía para selección de elementos contenedores Fuente: [Imagen sin título sobre diagrama para la selección de elementos contenedores] (s. f.). Recuperado de https://cutt.ly/7nQOiVS A través de este diagrama se puede identiﬁcar, en función del propósito de cada parte de la página, qué tipo de etiqueta semántica utilizar. Completando la solución del caso planteado, se determina la necesidad de declarar las distintas secciones del documento, utilizando las etiquetas semánticas que provee HTML 5. Analizando el modelo de esquema planteado, se pueden identiﬁcar las secciones que hace falta deﬁnir para estructurar la página del centro. Centro de Actividades Culturales La etiqueta contendrá el menú indicado en el modelo. contendrá el título indicado en el modelo. contiene el detalle de los eventos y contacto. contiene el detalle del pie de página. En deﬁnitiva, con HTML deﬁnimos la estructura de la página. Figura 3: HTML deﬁne la estructura de la página web Fuente: [Imagen sin título sobre HTML] (s. f.). Recuperado de https://cutt.ly/fnQOPT7 Completando los contenidos de cada parte de la página Cada una de las partes deﬁnidas debe ser completada con el contenido correspondiente. Debemos deﬁnir cuáles son los elementos a incluir dentro de cada etiqueta semántica y así representar la información correspondiente. Para ello, deberemos utilizar algunas etiquetas básicas para incluir textos y otro tipo de recursos. Por ejemplo: , ,,,,: etiquetas para deﬁnición de títulos. Ejemplo: Título : etiqueta para la inclusión de párrafos de texto. Ejemplo: Hola : etiqueta para incluir un link de navegación (por ejemplo, para desarrollar el menú). Ejemplo: Actividades Se deben completar los contenidos de las secciones deﬁnidas para el documento. Para ello debemos respetar el diseño presentado en el modelo. Centro de Actividades Culturales Actividades Contacto Acerca de Centro de Actividades Culturales Exposiciones, eventos y cursos de Arte Evento 1........................................................................................................................ Evento 2........................................................................................................................ Evento 3........................................................................................................................ Centro de Actividades Culturales Hasta aquí, solo se deﬁnieron los elementos correspondientes a las distintas secciones y los contenidos de cada sección. Si visualizamos la página mediante un navegador, observaremos los contenidos, pero sin ningún tipo de estilo aplicado. Es importante, entonces, entender que para que una página sea correctamente visualizada y ofrezca una buena experiencia de usuario, es necesario dar los estilos correspondientes. Por ejemplo, deﬁnir colores, posicionamiento de los elementos o tipos de letras. Para ello es necesario utilizar las hojas de estilo o CSS. CSS CSS es lo que se conoce como lenguaje de hojas de estilo en cascada y se utiliza para dar estilo a los elementos de HTML. CSS deﬁne la representación visual del sitio. Figura 4: HTML deﬁne la estructura de la página web. CSS deﬁne como es el estilo, cómo se debe ver Fuente: [Imagen sin título sobre HTML y CSS] (s. f.). Recuperado de https://cutt.ly/fnQOPT7 Desde un punto de vista sencillo, HTML determina el esqueleto de la página, la estructura. CSS sirve para darle apariencia al contenido, colores, fuentes, tipografías, etcétera. Todo el estilo y apariencia visual de la página. En resumen, CSS deﬁne cómo se mostrarán los elementos HTML en la pantalla. Esto determina una relación entre HTML y CSS muy fuerte. Añadir estilos a la página Existen varias formas de añadir CSS a las páginas: en línea en el HTML, añadiéndole el atributo style a las etiquetas; añadiendo la etiqueta en el head; a través de un archivo de tipo CSS, llamado desde el head (recomendado). Podemos considerar cualquiera de las opciones, teniendo en cuenta que la opción de uso de archivo del tipo CSS es la más conveniente. Para los ejemplos de esta lectura vamos a considerar la segunda opción por cuestiones prácticas, ya que se trabajarán solo algunos estilos de color simples. Para el ejemplo de nuestra página, podemos implementar el siguiente segmento de estilo dentro de la sección : selector { propiedad_etiqueta: valor; } El selector indica qué elemento del HTML queremos modiﬁcar. Dentro del bloque de declaración puede haber más de una declaración, las cuales se separan por “;”. Estas declaraciones representan la propiedad que se quiere modiﬁcar. Para el caso en estudio, es necesario contar con las especiﬁcaciones de estilo deﬁnidas por los diseñadores. Solo a modo de ejemplo, se deﬁnen los colores de los títulos H1 azul y H3 verde para determinar cómo se pueden incluir estilos en el head de la página. Para ello, debemos modiﬁcar el archivo index.html creado con la estructura agregando en el head las órdenes de estilo correspondientes. Centro de Actividades Culturales h1{ color: blue; } h3{ color: green; } Podemos observar en el navegador, como resultado, el cambio de color en los títulos. JavaScript Otro componente fundamental para el desarrollo de aplicaciones móviles es el lenguaje JavaScript. Complementa al HTML y CSS, dando mayor posibilidad de interacción del usuario con la página. El siguiente gráﬁco completa la relación de estos tres lenguajes. Figura 5: HTML deﬁne la estructura de la página web. CSS deﬁne como es el estilo, como se debe ver. JS deﬁne el comportamiento de la página Fuente: [Imagen sin título sobre el esquema de relación entre HTML y CSS] (s. f.). Recuperado de https://cutt.ly/fnQOPT7 La interactividad y el dinamismo en el desarrollo de sitios web es clave. JavaScript nos proporciona un conjunto de herramientas que permiten generar interacción con el usuario, efectos de estilo dinámicos y animaciones, entre otras cosas. JavaScript es un lenguaje de programación o de secuencias de comandos que permite la implementación de funciones relativamente complejas. Permite implementar actualizaciones de contenidos, mapas interactivos y animación gráﬁca, entre otros elementos. El núcleo del lenguaje JavaScript de lado del cliente permite realizar lo siguiente: almacenar valores en variables realizar operaciones sobre texto ejecutar código en respuesta a eventos en la página web validación de datos ingresados por el usuario mediante formulario etcétera JS incluye interfaces de programación de aplicaciones, llamadas API, que proporcionan funcionalidades que potencian el lenguaje. Las API se conocen como conjuntos de bloques de construcción de código disponibles para el desarrollador, que permite implementar programas de forma más sencilla. Se pueden dividir en dos categorías: A PI S D E L N A V E G A D O R A PI S D E T E RC E RO S Son las APIs integradas en el navegador web y permiten utilizar los datos del entorno o realizar tareas complejas como pueden ser: API DOM (Document Object Model). Permite manipular HTML y CSS, crear, eliminar y cambiar el HTML, aplicar dinámicamente nuevos estilos a la página, etcétera. API de Geolocalización. Recupera información geográﬁca. APIs Canvas y WebGL. Permiten crear gráﬁcos animados en 2D y 3D. APIs de audio y video. Permiten trabajar con multimedia. A PI S D E L N A V E G A D O R A PI S D E T E RC E RO S No están integradas en el navegador web de forma predeterminada. Ejemplos de APIs de terceros pueden ser: API de Twitter. Permite mostrar últimos tweets en un sitio web. API de Google Maps y la API de OpenStreetMap. Permiten insertar mapas personalizados en un sitio web. JavaScript del lado del servidor JavaScript es un lenguaje que aparece en casi todo desarrollo web como lenguaje del lado del cliente. Fue creado en la década del 90 por los desarrolladores de Netscape, con el objetivo de permitir resolver problemas relativamente sencillos como validación de formularios, alertas y alguna otra lógica de programación. Pero en los últimos años, se ha consolidado la idea de hacer uso como lenguaje del lado del servidor para permitir desarrollos web completos. Esta evolución permite actualmente conformar un entorno de ejecución del lado del servidor. El desarrollo en JavaScript del lado del servidor se hace instalando en el servidor herramientas que permiten el uso de JavaScript del lado del servidor. Una de las herramientas más utilizadas es Node.js. Node.js es un entorno de programación que incluye un conjunto de librerías disponibles para ser usadas por los programadores. Fue creado por Ryan Lienhart Dahl, quien conforma el Core de Node.JS basándose en el motor de JavaScript de Google Chrome llamado V8. Si bien el desarrollo con JavaScript del lado del servidor permite la creación de desarrollos web completos, es una práctica que todavía no está generalizada. Cómo utilizar JavaScript desde el archivo HTML (lado del cliente) De la misma forma que ocurre con CSS, existen distintas maneras de invocar JS desde el archivo HTML. La forma sencilla es incluir las etiquetas en el body del archivo. Probando JS Insertar código JS; RE FE RE N C I A A L C A S O D E E S T U D I O Es importante que la página tenga un importante nivel de interacción con los usuarios. Por ejemplo, podemos dotar de cierta animación a objetos de la página o realizar cambios de color cuando realizamos alguna actividad en la página o validaciones de los datos ingresados. A modo de ejemplo de cómo se incluye un código JS para dar la bienvenida al usuario mediante un mensaje simple, podemos realizar la siguiente modiﬁcación en el body de la página:... alert("Bienvenido al Centro de Actividades Culturales!!! "); Se puede comprobar el efecto de este código visualizando la página mediante el navegador. C O NT I NU A R Lección 2 de 2 Referencias [Imagen sin título sobre diagrama para la selección de elementos contenedores] (s. f.). Recuperado de http://html5doctor.com/downloads/h5d-sectioning-ﬂowchart.png [Imagen sin título sobre el esquema de relación entre HTML y CSS] (s. f.). Recuperado de https://www.edureka.co/blog/what-is-javascript/ [Imagen sin título sobre HTML] (s. f.). Recuperado de https://www.edureka.co/blog/what-is-javascript/ [Imagen sin título sobre HTML y CSS] (s. https://www.edureka.co/blog/what-is-javascript/ f.). Recuperado de Software de desarrollo La evolución constante de la tecnología en general y de los lenguajes de programación y dispositivos móviles en particular, brindan un amplio espectro de posibilidades para todas las organizaciones y usuarios. Las nuevas tecnologías permiten mejorar las posibilidades de desempeño de las organizaciones en general, logrando desarrollar el negocio de las mismas en formatos impensados pocos años atrás. Incluso es posible tener presencia en internet en forma permanente, gracias a la disponibilidad que ofrecen los dispositivos móviles, que permiten establecer un canal de comunicación permanente, mejorando considerablemente la llegada a los clientes. Esto determina que, prácticamente, toda empresa u organización requiera tener su propia aplicación web o aplicación móvil, haciendo que la demanda de desarrollo de las mismas aumente considerablemente. Deﬁnir el entorno de desarrollo de una aplicación móvil es uno de los aspectos fundamentales de la tarea del profesional de sistemas. La utilización de un entorno de desarrollo productivo puede agilizar las tareas de creación de aplicaciones, lo que facilitará el cumplimiento de la demanda creciente de desarrollos en tiempo y forma. En esta lectura, presentaremos algunas herramientas de desarrollo para aplicaciones web y móviles, con el objetivo de evaluar características y potencial de cada una. Para desarrollar los conceptos, analizaremos el caso del Centro de Actividades Culturales, desarrollado en la lectura 1 del módulo 4. Software de desarrollo Referencias Lección 1 de 2 Software de desarrollo Elección del software para el desarrollo Uno de los aspectos más importantes a tener en cuenta en un proceso de desarrollo de aplicaciones de cualquier tipo es el entorno de desarrollo en el cual realizan las actividades de programación. Para la creación de una página web, basta con disponer de un editor de texto simple con el cual se pueda crear un archivo con extensión html y editarlo para incluir el código HTML correspondiente. De todas formas, siempre es conveniente, para la creación de páginas web, utilizar herramientas adecuadas y preparadas para hacer más fácil la tarea de desarrollo. Trabajar en un proceso de desarrollo puede ser una tarea muy costosa y tediosa si no se utilizan herramientas un poco más soﬁsticadas que permitan lograr una mayor productividad al desarrollador. Bloc de notas (Windows) Bloc de notas es el programa más básico que se puede encontrar en Windows para crear un archivo de texto. También se lo conoce como Notepad. Es una aplicación muy simple, que se caracteriza por una interfaz de usuario extremadamente sencilla. Con este programa pueden abrirse formatos sencillos de texto (como TXT) y editarlos de manera básica. Figura 1: Bloc de notas. Editor de archivos de texto sencillo Fuente: elaboración propia. Este tipo de editor es una herramienta totalmente válida para escribir archivos HTML. Sus características fundamentales son su facilidad de uso y ser un programa liviano y rápido. El problema radica en que no es una herramienta pensada estrictamente para realizar tareas de desarrollo, por lo tanto, es limitada en cuanto al conjunto de herramientas que ofrece al desarrollador, limitando sus posibilidades de trabajo. Para llevar a cabo el desarrollo del proyecto pedido en el caso de estudio, debido a su sencillez, puede ser abordado con un editor de texto simple, ya que la extensión del código necesario para la página web es relativamente pequeña. De todas formas, siempre es conveniente contar con un entorno de desarrollo que brinde herramientas de ayuda para la codiﬁcación de aplicaciones, de modo que se puedan lograr niveles de productividad mayores. Sublime Text Sublime Text es un editor de texto y editor de código fuente. Se desarrolla como una extensión de Vim, aunque con el tiempo fue creando su propia identidad. Aún conserva un modo de edición tipo vi llamado Vintage mode. El editor se puede descargar y evaluar en forma totalmente gratuita, aunque no es software libre o de código abierto, y se debe obtener una licencia para su uso continuado. De todos modos, la versión de evaluación es completamente funcional. Su interfaz principal se presenta en la siguiente ﬁgura. Figura 2: Interfaz de trabajo de Sublime Text Fuente: [Imagen sin título sobre interfaz de trabajo de SublimeText] (s. f.). Recuperado de https://cutt.ly/4nQSbu1 El editor presenta características muy relevantes que facilitan el trabajo del desarrollador. Entre las más destacadas se encuentran las que se detallan a continuación. Minimapa: provee una previsualización de la estructura del código. Multi Selección: selección múltiple de un término en diferentes partes del archivo. Multi Layout: edición en una o más ventanas en cuadrícula. Soporte nativo para lenguajes: soporte nativo para 43 lenguajes de programación. Syntax Highlight conﬁgurable: permite el remarcado de sintaxis. Búsqueda Dinámica: búsqueda de expresiones regulares por archivos, proyectos, directorios, una conjunción de ellos o todo a la vez. Auto completado y marcado de llaves: se puede ir a la llave que cierra o abre un bloque de una forma sencilla. Soporte de Snippets y Plugins: snippets son similares a las macros. Coloreado y envoltura de sintaxis: resalta las expresiones propias de la sintaxis de un lenguaje para facilitar su lectura. Pestañas: admite abrir documentos en simultáneo y organizarlos en pestañas. Resaltado de paréntesis e indentación: marca paréntesis, corchete o llave, resaltando correspondiente apertura y cierre. Para descargar y acceder a más información sobre las características de este editor se puede acceder al link del sitio oﬁcial de descarga: Sublime Text - the sophisticated text editor for code, markup and prose Sublime Text is a sophisticated text editor for code, markup and prose. You'll love the slick user interface, extraordinary features and amazing performance. MÁS INFORMACIÓN SUBLIMETEXT  ATOM ATOM es otro importante editor de código fuente. Es de código abierto y para las plataformas macOS, Linux, y Windows. Admite múltiples plugins escritos en Node.js y permite control de versiones Git integrado. Atom es una aplicación de escritorio que tiene la particularidad de ser construida utilizando tecnologías web. Admite soporte para múltiples lenguajes y la mayor parte de los paquetes se desarrollan y mantienen por una comunidad de usuarios. También puede ser utilizado como un entorno de desarrollo integrado (IDE). Figura 3: Interfaz de usuario editor ATOM Fuente: elaboración propia. El editor ofrece múltiples características. Las principales son las siguientes: editor multiplataforma: Atom funciona en todos los sistemas operativos; administrador de paquetes integrado: permite instalar nuevos paquetes o crear otros desde el propio editor; autocompletado inteligente: ayuda a escribir el código más rápido con un autocompletado inteligente y ﬂexible; navegador del sistema de archivos: consiste en un explorador donde se puede buscar y abrir un archivo, proyecto completo o varios proyectos en una ventana; varios paneles: permite dividir la interfaz en varios paneles para comparar y editar el código entre archivos; encontrar y reemplazar: búsqueda y vista previa, reemplazo de texto a medida que escribe en un archivo o en todos los proyectos. El sitio oﬁcial de descarga es: A hackable text editor for the 21st Century Great things happen when developers work together-from teaching and sharing knowledge to building better software. Teletype for Atom makes collaborating on code just as easy as it is to code alone, right from your editor. Share your workspace and edit code together in real time. MÁS INFORMACIÓN ATOM  Visual Studio Code Consiste en un editor de código fuente multiplataforma para Windows, Linux y macOS. Dentro de las características más importantes se destacan: soporte para depuración; control integrado de Git; resaltado de sintaxis; ﬁnalización inteligente de código; fragmentos y refactorización de código. El editor es conﬁgurable y permite, por ejemplo, la personalización por parte del usuario del tema del editor, los atajos de teclado y las preferencias. Es gratuito y de código abierto. Visual Studio Code: aunque utiliza el framework Electron, el software no usa Atom, utilizando en su lugar el componente editor (Mónaco) utilizado en Visual Studio Team Services. Figura 4: Interfaz de usuario de Visual Studio Code Fuente: [Imagen sin título sobre interfaz de usuario de Visual Studio Code] (s. f.). Recuperado de https://cutt.ly/AnQDQ9H Dentro de las características más destacadas encontramos que es compatible con varios lenguajes de programación y un conjunto de características que están disponibles según cada lenguaje en particular. La paleta de comandos es una interfaz de línea de comandos. En el rol de editor de código fuente, Visual Studio Code permite realizar el cambio de la página de códigos en la que se guarda el documento activo, carácter de salto de línea y el lenguaje de programación del documento activo. Para obtener más información puedes acceder al siguiente link: Visual Studio Code - Code Editing. Redeﬁned Visual Studio Code is a code editor redeﬁned and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. MÁS INFORMACIÓN VISUALSTUDIO  Adobe DreamWeaver Es un software utilizado para la construcción, diseño y edición de sitios y aplicaciones web basadas en estándares. Inicialmente desarrollado por Macromedia, pasó a manos de Adobe Systems. Se integra con otras herramientas como Adobe Flash y soporta los estándares del World Wide Web Consortium. Las versiones más actuales soportan tecnologías web como CSS, JavaScript y algunos frameworks del lado servidor. Funciona sobre plataformas Mac y Windows, aunque puede funcionar en Linux mediante Wine. Es un editor WYSIWYG, que oculta el código HTML al usuario, es decir, se pueden crear páginas web sin codiﬁcar. Permite, además, la utilización de la mayoría de los navegadores webs instalados en la computadora para previsualizar las páginas web creadas. Otro aspecto fundamental es que dispone de herramientas de administración de sitios dirigidas a principiantes y un conjunto de herramientas que permite encontrar y reemplazar líneas de texto y código por cualquier tipo de parámetro especiﬁcado, hasta el sitio web completo. Se puede crear JavaScript básico sin conocimientos de código. A partir de la versión MX, además de la herramienta fundamental HTML WYSIWYG, admite conexiones a Bases de Datos como MySQL y Microsoft Access, y uso de tecnología de script ASP, ASP.NET, JSP y PHP. Figura 5: Interface DreamWeaver Fuente: [Imagen sin título sobre interface de DreamWeaver] (s. f.). Recuperado de https://cutt.ly/NnQDLCp Dreamweaver es un entorno de desarrollo integrado (IDE), que facilita el diseño y desarrollo web, permitiendo la visualización del contenido web mientras se codiﬁca. Dentro de las características más importantes se destacan: resaltado de sintaxis; completado de código; colapso de código; comprobación de sintaxis; herramientas de administración de sitios. Para encontrar más información, se puede acceder a: Software de diseño de sitios web | Adobe Dreamweaver Pon en marcha tus sitios más rápidamente con plantillas de inicio que puedes personalizar para crear emails en HTML, páginas de "acerca de", blogs, páginas de comercio electrónico, boletines y portafolios. Y como Dreamweaver forma parte de Creative Cloud, puedes agregar activos rápidamente desde tus Bibliotecas y Adobe Stock para mejorar tus sitios. MÁS INFORMACIÓN ADOBE  Eclipse Eclipse es un software conformado por un conjunto de herramientas de programación de código abierto multiplataforma. Es una herramienta muy utilizada como entorno de desarrollo integrado (IDE). Eclipse, que fue originalmente desarrollado por IBM, actualmente es soportado por la Fundación Eclipse. Figura 6: Entorno Eclipse para desarrollo Fuente: [Imagen sin título sobre entorno Eclipse para desarrollo] (s. f.). Recuperado de https://cutt.ly/ynQFovS Algunas características principales de Eclipse son las siguientes: editor de texto con analizador sintáctico; compilación en tiempo real; tiene pruebas unitarias junit; control de versiones con cvs; asistentes para creación de proyectos. Esta herramienta permite trabajar en un entorno que se considera integrado; es especialmente popular en desarrollos de JAVA. Su utilización va en aumento, debido a que permite el empaquetamiento de los contenidos para que puedan ser utilizados en los dispositivos con sistemas operativos Android, mediante la incorporación de los plugins. Para obtener mayor información y descargar del software, se puede acceder al siguiente sitio: The Community for Open Innovation and Collaboration | The Eclipse Foundation The Eclipse Foundation - home to a global community, the Eclipse IDE, Jakarta EE and over 375 open source projects, including runtimes, tools and frameworks. MÁS INFORMACIÓN ECLIPSE  Otras opciones Las opciones presentadas como herramientas de desarrollo son las más utilizadas. Pero existen otras alternativas disponibles en el mercado, como NotePad++, Brackets y Netbeans entre otras. La elección del tipo de herramienta a utilizar depende de la necesidad del sistema a desarrollar. Para llevar a cabo el desarrollo del proyecto pedido en el caso de estudio, es importante seleccionar una herramienta que brinde soporte a las actividades de desarrollo. Debemos analizar las características que nos ofrece el editor de texto y los complementos que brinda el entorno. La selección de la herramienta también puede ser condicionada por su costo y la comunidad de soporte con que cuenta. Para el caso del caso de estudio, por ejemplo, se puede optar por ATOM como herramienta de desarrollo, ya que ofrece múltiples ventajas en la edición de los archivos, tiene soporte para versionado y es software sin costo. C O NT I NU A R Lección 2 de 2 Referencias [Imagen sin título sobre entorno Eclipse para desarrollo] (s. f.). Recuperado de https://www.eclipse.org/ide/ [Imagen sin título sobre interface de DreamWeaver] (s. f.). Recuperado de https://www.adobe.com/la/products/dreamweaver.html [Imagen sin título sobre interfaz de trabajo de SublimeText] (s. f.). Recuperado de https://www.sublimetext.com/ [Imagen sin título sobre interfaz de usuario de Visual Studio Code] (s. f.). Recuperado de https://code.visualstudio.com/ Entorno de desarrollo para aplicaciones móviles El desarrollo de aplicaciones móviles exige la deﬁnición de qué tipo de plataforma se utilizará para el desarrollo de la aplicación. Si se desarrolla para Android, se utiliza el lenguaje Java, mientras que para iOS se utiliza el lenguaje Objective C. Esto implica que el desarrollador o equipo de desarrollo tiene la necesidad de dominar correctamente varios lenguajes de programación, muy diferentes entre sí, para desarrollar una sola aplicación. Además, cada plataforma requiere el uso de un IDE diferente. Esto produce inconvenientes importantes, sobre todo cuando existe la necesidad de implementar una misma aplicación en diferentes plataformas, ya que se deben hacer múltiples desarrollos para un mismo objetivo. La situación ideal sería realizar un único desarrollo para todas las plataformas, usando un mismo código; de esta manera se puede cubrir un número mayor de usuarios con un ahorro de tiempo y costo importante. En esta lectura presentaremos la herramienta de desarrollo Apache Cordova, que consiste en un framework que funciona como una solución multi-plataforma y que permite usar las últimas tecnologías web: HTML5, CSS3 y JavaScript. También se hará referencia a la herramienta PhoneGap, muy utilizada para el desarrollo de aplicaciones híbridas. Para desarrollar los conceptos, analizaremos el caso del Centro de Actividades Culturales desarrollado en la lectura 1 del módulo 4. Entorno de desarrollo para aplicaciones móviles Referencias Lección 1 de 2 Entorno de desarrollo para aplicaciones móviles Apache Cordova Conceptos básicos y utilización Apache Cordova (versión de código abierto de PhoneGap) es un entorno de desarrollo de aplicaciones móviles. Permite construir aplicaciones para dispositivos móviles utilizando HTML5, CSS3 y JavaScript. De esta manera, no se utilizan las APIs especíﬁcas de cada plataforma como Android e iOS. Las aplicaciones resultantes son híbridas, con representación gráﬁca desarrollada con tecnología web, empaquetadas como aplicaciones para su distribución. Este tipo de aplicaciones tiene acceso a las APIs nativas del dispositivo. Un detalle a tener en cuenta es que PhoneGap es la versión de Adobe de Apache Cordova. Figura 1: Apache Cordova es un entorno de desarrollo para aplicaciones móviles Fuente: [Imagen sin título sobre Apache Cordova] (s. f.). Recuperado de https://cutt.ly/znWTDﬂ El núcleo de aplicaciones Apache Cordova utiliza HTML5 y CSS3 para la presentación de la aplicación, mientras que para el desarrollo de la lógica usa JavaScript. El uso de HTML5 permite el acceso al hardware del dispositivo, como el GPS y la cámara. Apache Cordova incrusta el código HTML5 dentro del WebView nativo en el dispositivo, utilizando una interfaz de función foránea para acceder a los recursos nativos. Los desarrolladores pueden añadir más funcionalidades mediante extensiones con complementos nativos, las cuales pueden ser llamadas con JavaScript. Esto permite una comunicación directa entre HTML5 y la capa nativa. El uso de tecnologías web para el desarrollo de aplicaciones móviles híbridas hace que estas sean un poco más lentas que una aplicación nativa equivalente. Para llevar a cabo el desarrollo del proyecto solicitado en el caso de estudio, se debe tener en cuenta el requerimiento que establece la necesidad de que el usuario tenga una experiencia similar cualquiera sea la plataforma por la que acceda. Se decide realizar una página web para ser visualizada tanto por computadoras de escritorio como por dispositivo móviles. En este caso se considera un desarrollo único basado en tecnología web y la creación de una aplicación híbrida mediante Apache Cordova. Proceso de instalación Apache Cordova Para realizar el desarrollo de aplicaciones mediante Apache Cordova, es necesario llevar a cabo el proceso de instalación del software. Para hacer la instalación se debe contar con Node.JS previamente instalado en la computadora de desarrollo, ya que es a través de este entorno de ejecución de JavaScript que se realiza la instalación. Los pasos de instalación son los que se detallan a continuación. PA S O 1 PA S O 2 Descargar e instalar Node.JS (https://nodejs.org/es/) PA S O 1 PA S O 2 Instalar el módulo Cordova utilizando la utilidad npm de Node.JS. Dependiendo de en qué plataforma se realice la instalación se debe ejecutar el siguiente comando: para Linux: $ sudo npm install -g para Windows: C:\>npm install -g cordova Cómo crear una aplicación El proceso de creación de una aplicación se inicia con la creación de proyecto Cordova de la manera que se detalla a continuación. Seleccionar un directorio de trabajo. Crear el proyecto en el directorio seleccionado $ cordova create MyApp En este paso se crea la estructura de directorio de la aplicación. Por default se genera un esqueleto con las características de una aplicación web, conteniendo el archivo index.html en la carpeta www. En la ﬁgura se observa la estructura creada. Figura 2: Estructura creada para el proyecto cordova llamado MyApp Fuente: elaboración propia. Acceder al directorio del proyecto de la aplicación $ cd MyApp Agregar las plataformas para las cuales se desea construir la aplicación. $ cordova platform add ios $ cordova platform add android $ cordova platform add browser Para este ejemplo se prepara el proyecto para ser construido para las plataformas Android e iOS. Ejecutar la aplicación creada. Se puede realizar la visualización de la aplicación en el browser. $ cordova run browser Figura 3: Visualización de la ejecución de la aplicación en el browser Fuente: elaboración propia. La página principal del proyecto index.html se encuentra en la carpeta www del proyecto creado para la aplicación. Figura 4: Archivo index.html creado para el proyecto de la aplicación Fuente: elaboración propia. Parte del código generado se muestra a continuación. Apache Cordova Connecting to Device Device is Ready Este archivo puede ser editado. Por ejemplo, agregar un título H1 con un saludo como se muestra a continuación en la línea de código subrayada. Bienvenido a mi primera aplicación Apache Cordova Connecting to Device Device is Ready Se puede ejecutar nuevamente la aplicación para ser visualizada en el browser y se obtiene el siguiente resultado. Figura 5: Resultado de la ejecución de la aplicación. En la parte superior se visualiza el título agregado en el archivo index.html Fuente: elaboración propia. Instalación de prerrequisitos para la construcción de la aplicación Para crear y correr la aplicación es necesario instalar los SDKs para cada plataforma que se desee trabajar. Por ejemplo, para construir la aplicación para Android, es necesario tener instalado Android SDK. Para el caso de la plataforma browser, no es necesario instalar ningún SDK. Se puede veriﬁcar si están todos los requerimientos exigidos para la construcción de la aplicación, mediante el siguiente comando: $ cordova requirements En la respuesta que se muestra en la ﬁgura, se deﬁne que están todos los requerimientos para Android. Figura 6: Detalle de requerimientos para Android. En este caso se muestra que todos los requerimientos están instalados. Fuente: elaboración propia. Construcción de la aplicación Por defecto, Cordova create genera una estructura de proyecto basada en una estructura de aplicación web, donde la página inicial del proyecto es index.html, contenida en la carpeta www. Para construir la aplicación para todas las plataformas, se debe ejecutar el siguiente comando: $ cordova build Para construir la aplicación para una plataforma en particular, se especiﬁca la misma al momento de realizar el build. $ cordova build android Test de aplicación Se puede realizar la prueba de las aplicaciones construidas utilizando programas emuladores. Por ejemplo: se puede realizar la comprobación de funcionamiento de la aplicación mediante el emulador de Android. $ cordova emulate android Figura 7: Vista de emulador para android Fuente: [Imagen sin título sobre vista de emulador para android] (s. f.). Recuperado de https://cutt.ly/ynWYfsT El objetivo del desarrollo a realizar en el caso de estudio, es la posibilidad de crear un canal de comunicación que permita llegar a la mayor cantidad de personas posibles. Por lo tanto, se puede aplicar una estrategia que permita el acceso a la información del centro, mediante aplicación web online y también considerar la construcción de una aplicación híbrida para las plataformas principales Android e iOS. C O NT I NU A R Lección 2 de 2 Referencias [Imagen sin título sobre Apache Cordova] (s. f.). Recuperado de https://cordova.apache.org/ [Imagen sin título sobre vista de emulador https://cordova.apache.org/docs/en/latest/guide/cli/index.html para android] (s. f.). Recuperado de 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 deﬁnir 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 deﬁniciones 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 simpliﬁcan 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 deﬁne 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 deﬁnidos por el framework. Lista de componentes: deﬁne 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 simpliﬁcar 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 ﬁlosofía para crear todos sus componentes y características. Mobile ﬁrst es una ﬁlosofí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 ﬁrst, 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 deﬁnidos 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íﬁcas de un dispositivo en concreto. Priorizar contenido en la página web – Mobile ﬁrst, 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-ﬁrst 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 ﬁgura: 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 modiﬁcaciones en el diseño para mejorar la experiencia del usuario. A continuación, se deﬁne 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 deﬁnido 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 conﬁgurado 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 conﬁgurarlo 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 deﬁne 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 ﬁgura se puede observar un formulario típico para incorporar en la página web. Figura 6: Formulario deﬁnido en Bootstrap Fuente: [Imagen sin título sobre formulario deﬁnido 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 veriﬁcar 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 deﬁne el rol del elemento contenido convirtiéndolo en un elemento de la interfaz.......... Mediante esta declaración, se agregarán los elementos gráﬁcos, 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 deﬁnir el rol del elemento que lo contiene para convertirlo en elementos de interfaz. Por ejemplo: deﬁne la sección Header deﬁne 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

Document Details

Tags

Related

Full Transcript

Upgrade to continue