02_lenguajes_descripcion

Universidad Champagnat. Facultad de Informática.Licenciatura en Diseño Asistido. Mención en Diseño Editorial.Tecnología Editorial II: Medios AudiovisualesProfesores: Horacio Duek - Gonzalo Antón

12345

LENGUAJES WEBLenguajes de descripción de página

En sus comienzos las páginas web mostraban sólo texto sobre fondo de color gris. La World Wide Web fue evolucionando rápidamente hasta convertirse en un medio dinámico e interactivo. Desde la incorporación de pequeñas imágenes, el control sobre la tipografía y pequeños progresos en cuanto a diagramación, hasta la visualización de videos, animaciones y reproduc-ción de música, este medio -desde su creación- no deja de evolucionar y redefi nirse constantemente.Los navegadores (Internet Explorer, Nestcape Navigator, Safari, etc) interpretan el código de los lenguajes de descripción de página y nos muestran en forma visual su contenido. Estos lenguajes sientan las bases para que diferentes tecnologías y diferentes tipos de archivos pueden convivir e interactuar en nuestros navegadores.

HTMLCuando Tim Berners-Lee visionó en un laboratorio de física en Suiza, un medio que luego se convertiría en la WWW, no tenía ni la menor idea el monstruo que estaba generando. Berners-Lee detectó que los científi cos intercambiaban mucha infor-mación sobre sus investigaciones y que esta información era producida en diferentes plataformas y sistemas operativos. La necesidad de un lenguaje común para compartir documentos de hipertexto a través de una red, y que cualquiera pudiera acceder sin importar la plataforma, fue el disparador para la creación del HTML.

Este lenguaje, sus iniciales en inglés provienen de HyperText Markup Languaje, fue creado con la intención de brindar una manerá fácil de darle formato a los documentos de texto, a través de comandos -llamados tags- tan básicos como para indicar letras itálicas, o para indicar letras bold.

El uso de la WWW se fue extendiendo desde los laboratorios científi cos del mundo hasta organismos de gobierno e institucio-nes académicas. Cuando el acceso a internet dejó de ser costoso y llegó a las casas, el HTML comenzó a implentar cientos de funciones nuevas para ampliar sus capacidades y alcances. El organismo responsable de mantener el estándar del código HTML es el World Wide Web Consortium (W3C). Estrictamente, la última versión pura del lenguaje fue lanzada en 1997 con HTML 4.0. Los principales navegadores han implementado la mayoría de las recomendaciones de esta versión. En 1999 el W3C hizo una actualización menor a 4.0.1 y desde entonces no ha sufrido variaciones ofi ciales. El W3C ha anunciado que no desarrollará futuras versiones de HTML; al menos no como lo conocemos hoy. Sin embargo las compañías resposables de los navegadores (Netscape, Microsoft, Apple) seguirán, como lo han venido haciendo, implementando sus propias variacio-nes del lenguaje más allá de los estándares de este consorcio.

¿CÓMO FUNCIONA EL HTML?La ventana mostrada en esta página contiene un ejemplo de código HTML básico visualizado en el navegador Internet Explo-rer en su versión 5.0 para Macintosh. A continuación se describe como se genera esta página a través del código HTML.

12345


<html>

<head>

<meta generator=”Adobe GoLive”>

<title>Ejemplo de HTML</title>

</head>



<bgcolor=”#FFFFFF”>

<div align=”center”>

Los navegadores (Internet Explorer, Nestca-

pe Navigator, Safari, etc) interpretan el codigo de los

lenguajes de descripcion de pagina y nos muestran

en forma visual su contenido. Estos <a href=”link.html”>lenguajes</a> sientan las

bases para que diferentes tecnologia y diferentes

tipos de archivos pueden convivir e interactuar en nuestros

navegadores. 

<img src=”logos.jpg”

width=”35” height=”100”>



</div>

</html>

inicio de código HTML

comienza encabezado

los metatags no son ignorados por el navegador

este tag describe el título de la ventana en el navegador

finaliza encabezado

los tags “<!” son comentarios de los programadores y son invisibles

<bgcolor> indica el color de fondo de la página (bgcolor es background color)

indica la alineación, en este caso centrado

 inicia un párrafo

 inicia un texto en bold

 inicia el color del texto

<a href> es un vínculo a otro archivo html

 inicia un texto en itálicas

 indica un corte de línea en el párrafo (br proviene de break)

<img src> coloca un archivo de imagen (img src proviene de image source)

indican las dimensiones de la imagen en alto y ancho

 cierra un párrafo

</div> cierra el parámetro de alineación

cierra el código HTML

12345


XMLEl hecho de que el W3C haya dejado de desarrollar el estándar HTML no significa que los lenguajes web dejen de crecer. Al contrario, una revisión avanzada del lenguaje ha sido formulada y es conocida como XHTML (HTML extendido). Antes de explicar esta versión, es necesario conocer otro lenguaje, XML.

XML significa en inglés Extensible Markup Language, y como su nombre lo indica, es un lenguaje completamente flexible. Como en HTML, tags son utilizados para describir funciones en el texto. Pero a diferencia del HTML estos tags son contex-tuales y varían de aplicación en aplicación. Por ejemplo, si estamos diseñando un sitio web para una bodega, una línea de código podría ser:

El espumante de <bodega=”Chandon” tipo=”Extra-Brut”> está disponible a <precio>$35.90</precio>

Como el texto es marcado de acuerdo a sus contenidos y no a su aparariencia, la visualización puede cambiar según el dispositivo en el cual estemos viendo el sitio. Así por ejemplo, en un navegador web el precio del producto puede verse en texto bold y en color resaltado, pero en un teléfono celular ese contenido puede verse en mayúsculas. El lenguaje XML ofrece mucha más flexibilidad que el HTML en sitios vinculados a grandes bases de datos dinámicas (eBay.com, Amazon.com) y donde el contenido debe verse desde distintos equipos.

XHTMLLa próxima encarnación de HTML es conocida como XHTML (Extended HTML). En resumen, el W3C decidió adoptar la estructura más compleja y avanzada de XML, pero sin olvidar del todo el legado del HTML. XHTML mantiene casi todos los tags del HTML pero bajo un sintaxis levemente diferente. En XHTML todos los tags deben ser correspondidos por un tag de cierre, es decir si un comienza con (párrafo) siempre debe corresponderle un tag . Hay ciertos tags que en HTML no tienen cierre, pues comienzan y terminan en sí mismos. Por ejemplo el tag (break, corte de línea), en XHTML siem-pre es .

Aunque este lenguaje todavía no tiene amplio soporte por parte de los navegadores, es un lenguage que promete ser el suce-sor del HTML. Se está comenzado a utilizar mucho en Intranets de empresas y aplicaciones específicas.

JAVASCRIPT HTML es realmente bueno para diseñar páginas relativamentes simples para ser visualizadas en diferentes plataformas, pero para desarrollar sitios web que se comporten como aplicaciones, tiene sus grandes limitaciones. Para lograr cualquier nivel de interactividad -ya sea un botón que cambie su apariencia al pasar el mouse o lograr que una página se abra en una venta-na con un tamaño determinado- otro lenguaje debe ser utilizado junto al HTML.

Aunque existen varias tecnologías que compiten por este lugar -como VBScript o JScript, el líder es JavaScript. Una aclara-ción necesaria: JavaScript no es Java. Java es un lenguaje de programación completo desarrollado por Sun Microsystem para compilar aplicaciones multiplataformas para entornos web y no web. El desarrollo de elementos Java (llamados applets), requiere del entendimiento de un lenguaje de programación tipo C o C++.

Por el otro lado, JavaScript, como HTML, es un lenguaje de descriptivo. Aunque no es tan fácil de manejar o entender como el HTML, es muchísimo más sencillo -y limitado- que Java.

La mayoría de las aplicaciones para diseñar sitios web (DreamWeaver, GoLive) utilizan JavaScript para las funciones más so-fisticadas y pequeños “efectos especiales”. Muchos diseñadores no necesitan tener conocimientos de JavaScript para hacer uso de él, ya que estas aplicaciones tienen librerías con las funciones más comunes de JavaScript. Sin embargo, para poder personalizar estas funciones o modificar ciertos parámetros, un conocimiento aunque sea básico es requerido.


12345


CSSLa incorporación de CSS (Cascading Style Sheets) como anexo del HTML, le permitió por primera vez a los diseñadores tener un control importante de la tipografía y diagramación de los elementos en páginas web. Los Style Sheets funcionan de ma-nera similar a las hojas de estilo de los programas de maquetación (QuarkXpress, Adobe InDesign, PageMaker, etc). Los CSS permiten controlar parámetros como tamaño de texto en varias medidas (puntos tipográficos, pixels), interlinea, interletrado, familias tipográficas, sangrías, alineación de cajas, formatear listados de items, colores de fondo, colores de bordes, colores de la tipografía, etc. Además brindan control sobre otros aspectos como animaciones, rollovers en hipervínculos de texto, cajas de contenido, niveles entre los objetos (front / back) entre otras funciones.

La combinación de JavaScript y CSS permite realizar las siguientes tareas:• Reposicionar contenido en una página de manera instantánea.• Mostrar u ocultar elementos en forma interactiva.• Mover imágenes animadas a través de la pantalla.• Hacer que un objeto pueda aparecer adelante o atrás de otro (front / back).• Permiter que el usuario arrastre elementos (drag-and-drop).

El término Cascading se refiere a los varios niveles en los cuales uno puede aplicar las Style Sheets; básicamente son 3 ca-tegorías. Se pueden aplicar en un primer nivel, definiendo un estilo a una palabra o párrafo en particular y en forma asilada. Se pueden aplicar en un segundo nivel, definiendo hojas de estilo para aplicar en varios párrafos o palabras dentro de una misma página o documento. El tercer nivel es el más interesante, ya que los CSS pueden convertirse en documentos exter-nos al archivo HTML (bajo la extensión .css). En un sitio web (sobre todo en sitios de carácter más editorial) a través de un archivo externo CSS se puede cambiar cualquier parámetro -como por ejemplo la familia tipógráfica- a infinidad de páginas en cuestión de segundos.

EJEMPLO DE CÓDIGO CSS/* CSS definitions for fonts */BODY { margin: 0px 0px; background: #ffffff; font: 10px ‘Lucida Grande’, Geneva, Verdana, Arial, Helvetica, sans-serif; }TABLE, TD { font: 10px ‘Lucida Grande’, Geneva, Verdana, Arial, Helvetica, sans-serif;}

.V9 { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 9px; }



.G9 { font-family: ‘Lucida Grande’, Geneva, Verdana, Arial, Helvetica, sans-serif; font-size: 9px; }

.G9G { font-family: ‘Lucida Grande’, Geneva, Verdana, Arial, Helvetica, sans-serif; font-size: 9px; }

.G10 { font-family: ‘Lucida Grande’, Geneva, Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }

.G10G { font-family: ‘Lucida Grande’, Geneva, Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #76797c; }.G10W { font-family: ‘Lucida Grande’, Geneva, Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #ffffff; }/* List definitions */ul.arrowtext { list-style-image: url(http://www.sitio.com/imagenes/flecha_arriba_01.gif); margin-top: 0px; margin-bottom: 5px; margin-left: 14px; padding: 0px; padding-left: 1px; line-height: 13px; list-style-position: outside;


12345


DIAGRAMAS FUNCIONAMIENTO DE HTML

GOLIVE SAFARISWF

CSS

QUICKTIME

JPEG

GIF

HTML EXPLORER VENTANA

02_lenguajes_descripcion

Documents