LENGUAJES DE PROGRAMACIÓN WEB (PHP1, HTML5 ) 2 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) Sesión No. 2 Nombre: Lenguaje de marcado Objetivo: Identificar qué es, cómo funciona y representa el lenguaje de marcado Contextualización Un lenguaje de marcado es también conocido como lenguaje de marcas, éste trata de codificar un documento que es conformado por “marcas” también conocidas como etiquetas, las cuales estructuran la información dentro de una página en estilo HTML o con estilos de programación específicos para la web como PHP, Java, etc. ¿Qué es lo que determinan los lenguajes de marcado? Éstos determinan una serie de instrucciones que son compiladas por el sistema operativo y las representa de tal forma que se puedan interpretar por el usuario, es decir, las instrucciones determinan el orden de los elementos al mostrarse y el contenido de los efectos que podrá o no contener. 1 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) Introducción al Tema Un lenguaje de marcado o de marcas se basa en instrucciones “WEB”, es decir, etiquetas de programación que podemos estructurar de manera manual o automática mediante programas de diseño como Adobe Dreamweaver, Eclipse, Web Evolution x6, etc. En los cuales por tratarse de programas visuales los elementos crean las instrucciones de marcado al situar los elementos en cualquier parte del elemento que se desea crear, el desarrollo de aplicaciones web también se basa en lenguajes de marcas, ya que los Widgets pueden ser adquiridos desde una web exterior y ubicarla como elemento principal de un portal propio. Actualmente el HTML 5 es el principal lenguaje de marcado para Web que existe. En conjunto con JavaScript sea transformado en una poderosa herramienta de desarrollo de aplicaciones: permitiendo que sean consumidas en diferentes navegadores y dispositivos. ¿Todos los documentos se presentan de igual forma? Las características de cada elemento son determinadas al momento de la creación del mismo o puede modificarse con el avance de los elementos creados, sin embargo debe conocerse de medidas en pixeles, ya que es la forma que se representan en una pantalla, lo que determinara también el peso de la misma y con esto el tiempo en que demorará en descargarse para la completa visualización en un cliente, si no se conoce el ancho de banda del servidor es difícil determinar el tiempo en que se descargue o se suban las actualizaciones del documento al host del servicio. 2 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) Explicación Lenguaje de marcado El lenguaje de marcado, también conocido como HTML, se trata de un sistema de etiquetas que manejan instrucciones de creación de documentos web, la representación de las etiquetas es; ‹ html ›, las instrucciones son definidas en inglés y delimitan el tamaño del documento, el color de fondo, las imágenes que utilizará, el orden de los menús que presentara, entre otras opciones más. Los sistemas de programación que utilizan el lenguaje de mercado son varias por lo que a continuación se presentan algunos de los más utilizados para los medio web; HTML XML XHTML Se determinan estos lenguajes como base por la gran compatibilidad que se tiene entre los distintos compiladores de los sistemas como; Mac, Windows, Linux, Android, etc. Todos los atributos que se presentan en estos lenguajes pueden ser representados con diferentes nombres, pues las estructuras cambian en conjunto con los sistemas, actualmente el lenguaje de base que se utiliza en este tipo de documentos es HTML5 que se aplica para la correcta aparición de la información en los dispositivos móviles, como en los teléfonos inteligentes o los sistemas Tablet, que por presentarse en dispositivos más “ligeros”, por el cambio en sus sistemas operativos ya que presentan cientos de diferencias que los hace más ligeros y veloces para la capacidad que presentan en estos dispositivos a comparación de los sistemas aplicados a las computadoras de sobremesa o portátiles. 3 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) En la imagen siguiente se muestra una comparación de la versión anterior del HTML con la nueva versión HTML5. En ella podrás ver que se a buscada simplificar las marcas o “tags” del lenguaje. En los documentos existen varios niveles de información, estos son los que determinan las características y atributos de la misma. Estos lenguajes de programación en los que se basan los documentos son conocidos como “markups” que se representan por etiquetas. Cuando se aplican los lenguajes de marcado se cumplen con objetivos esenciales. 4 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) Determina la tipografía y las funciones que ejecuta al momento de la visualización de los elementos que se diseñaron anteriormente. Estructura los elementos en la pantalla, ya sean los párrafos, imágenes, menús, etc. Presenta características para la impresión de documentos. Separa los elementos para tener un orden y los gestiona al momento de la visualización para tener una más rápida descarga. Crea el lazo de conexión del servidor y el cliente. La utilización de los medios mencionados es principalmente en tres aspectos; Sirve para describir elementos del contenido. Define el formato. Realiza funciones del lenguaje HTML A continuación te presentamos un diagrama del proceso de despliegue de un documento HTML en un navegador. 5 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) Representación de documentos La representación de documentos es útil para poder procesarlos y recuperar información necesaria. El objetivo de la representación de los documentos es el de traducir los mismos a términos del sistema, es decir la codificación necesaria con la cual este comprenda la información y la represente a los usuarios que la soliciten, los documentos son alojados en un servidor el cual tiene el soporte necesario para contenerlos y ejecutarlos cuando sea requerido. Esta representación se lleva a cabo mediante simplificaciones y generalizaciones que presentarán una vista lógica de los mismos. De manera general se podría comparar la representación de documentos al análisis documental, con algunas diferencias. Entre las cuales algunas representaciones son aptas para el procesamiento por parte de aplicaciones informáticas según los modelos en los que se presente. La representación de los documentos se hace en torno a criterios temáticos y analíticos. Cuando se habla de la representación de documentos HTML, se trata desde otro enfoque, ya que se revisan las estructuras del diseño, el peso del mismo por la organización de datos y contenidos. La información que se requiere para el análisis del mismo se encuentra en el diseño maestro de la misma página o documento en el que se determina las características de la estructura, como; el número de páginas principales, el contenido de la página maestra, el número de menús existentes, las opciones dentro de cada menú, las ramificaciones de cada página y el diseño que tendrá cada contenido desde el marco principal o las divisiones que mostrará cada uno. 6 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) Conclusión Los lenguajes de marcado son conocidos y utilizados para la programación de aplicaciones y portales web comúnmente, estos medios van evolucionando de manera rápida y eficaz para adecuarse a las nuevas tendencias de comunicación y distribución de información, es decir, toman y ejecutan las nuevas características de los medios electrónicos y las potencian hasta lograr su cometido, esto se ha visto en el lenguaje HTML que se utilizaba comúnmente en las computadoras de sobremesa y portátiles, las nuevas tecnologías han exigido una evolución del sistema HTML y CSS que son la base fundamental para la creación y estructuración de apps web. HTML5 y CSS3 son actualmente utilizados para desarrollar aplicaciones web modernas con alta usabilidad. Ya que presentan compatibilidad de ejecución con los contenidos en diferentes navegadores y dispositivos. Además de esto, se complementan con el uso de Javascript. Permitiendo ampliar las posibilidades una aplicación Web. Por lo que es importante conocer los contenidos de un documento y saber qué complementos (librerías de Javascript) y widgets (Adobe Flash) puede utilizar para mejorar la experiencia con el usuario final. 7 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) Para aprender más Barzanalla R., (2012). Informática Lenguajes, ¿Qué son los lenguajes de marcado o de marcas? http://brd.unid.edu.mx/que-son-los-lenguajes-de- marcado-o-de-marcas/ s/a,. Lenguajes de Marcas, Capitulo 4. http://brd.unid.edu.mx/lenguajes-demarcas-capitulo-4/ Mark Pilgrim. (2011). Dive Into HTML5. Octubre 28, 2015, de Community Book Sitio web: http://diveintohtml5.info/ 8 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) Actividad de Aprendizaje Objetivo: Entender las aplicaciones prácticas de los lenguajes de marcas. Instrucciones: Con la finalidad de reforzar los conocimientos adquiridos a lo largo de esta sesión, ahora tendrás que realizar una actividad. Te pido que realices el diseño de un mini sitio. Este mini sitio lo usaremos a lo largo del curso para aplicar los conocimientos vistos en las siguientes sesiones. El mini sitio debe tener por lo menos 5 secciones o documentos Web. En un documento Word, describe cada uno de los elementos del sitio. Ejemplificando su función. Es recomendable que agregues un diagrama de flujo del sitio. A continuación te muestro un ejemplo de un diagrama de flujo de un sitio Web. Te pido seas creativo y que tomes en cuenta alguna experiencia en tu trabajo a la hora de realizar el mini sitio. Se creativo. En esta actividad se tomará en cuenta lo siguiente: Tus datos generales 3 puntos Referencias bibliográficas 7 puntos Ortografía y redacción 10 puntos Introducción 10 puntos Contenido 30 puntos Diagrama 40 Puntos 9 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) 10 LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) Bibliografía • Baeza-Yates R., Berthier R. Modern Information Retrieval. Addison Wesley & ACM Press, New York, 1999. Cap. 7. • Barzanalla R., (2012). Informática Lenguajes, ¿Qué son los lenguajes de marcado o de marcas? Consultado el 7 de mayo de 2013, en: http://www.um.es/docencia/barzana/DIVULGACION/INFORMATICA/Q ue-son-lenguajes-marcado.html • S.a. Lenguajes de Marcas, Capitulo 4. Consultado el 7 de mayo de 2013, en: http://bibing.us.es/proyectos/abreproy/11420/fichero/VOLUMEN+1%2 52F4_LENGUAJES+DE+MARCAS.pdf • Mark Pilgrim. (2011). Dive Into HTML5. Octubre 28, 2015, de Community Book Sitio web: http://diveintohtml5.info/ • J.D. Gauchat. (2012). El gran libro de HTML5, CSS3 y Javascript. Barcelona España: Marcombo. 11