Módulo 4 - Lectura 1.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

Módulo 4 - Lectura 1.pdf

Document Details

Tags

Related

Full Transcript

Upgrade to continue