UNIDAD III

1. UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv

2. Objetivos • Conocer los antecedentes de los lenguajes de marcas, que son los DTD, diferencias entre SGML, XML y HTML • Conocer las características del HTML • Conocer el Lenguaje de marcado de hipertexto - HTML • Aprender a construir sitios web “manualmente” y mediante el uso de herramientas.

3. INTRODUCCION Papiro egipcio  Almacenamiento de pergaminos en la biblioteca de un monasterio

4. INTRODUCCION Antes de la invención de la imprenta el conocimiento y su conservación estaban reservados a los líderes políticos y religiosos. Solamente ellos tenían realmente acceso a la educación y el conocimiento.

5. INTRODUCCION Hasta que llego la imprenta y permitió el acceso al conocimiento a muchas más personas, ya no sólo políticos y religiosos.

6. ANTECEDENTES La imprenta: A Gutenberg se le debe distinguir por sus avances en el uso de la imprenta "una técnica para producción en serie con letras metálicas, una nueva aliación metálica para los tipos y la tinta de impresión con pintura.

7. ANTECEDENTES También sería conveniente ubicar a Gutenberg como un símbolo porque inauguró la industria editorial en occidente con la Biblia de 1455".

8. ANTECEDENTES • Gutenberg construyó, entre 1436 y 1450, un aparato que logró fundir satisfactoriamente las letras metálicas que usó en sus primeros libros, con las cuales imprimió su famosa Biblia en 1455.

9. ANTECEDENTES La imprenta perfeccionada de Gutenberg era un sencillo invento en el que cada página era compuesta con letras o tipos movibles, sobre los cuales se untaba tinta. Arriba de ellos se ubicaba el papel que tenía que ser prensado para fijar la impresión

10. 3.1 LENGUAJES DE MARCAS • Los lenguajes utilizados en informática se pueden dividir en: • Lenguajes de Programación • Lenguajes de Marcado • ***Los lenguajes de marcas son utilizados desde que aparecieron los primeros sistemas de tratamiento de textos.

11. 3.1 LENGUAJES DE MARCAS Primeras Ideas Las primeras ideas ideas en la utilización de las marcas en documentos electrónicos se dieron en la GCA: Graphic Communications Association

12. 3.1 LENGUAJES DE MARCAS Primeras Ideas • La GCA (Graphic Communications Association) dio los primeros pasos en: • - Reconocer la importancia del empleo de las marcas y • - Promover proyectos que analizarán su utilización.

13. 3.1 LENGUAJES DE MARCAS Primeras Ideas Es así como en 1967, Willian Tunnicliffe indica la necesidad de separar, dentro de un documento, la información de su formato.

14. 3.1 LENGUAJES DE MARCAS Inicios de los lenguajes de marcas Problemas con los lenguajes de marcas: Cada aplicación tiene sus propias marcas para indicar el formato. El formato de documento en una aplicación es desconocido para otra Lo anterior genera un enorme problema de incompatibilidad.

15. 3.1 LENGUAJES DE MARCAS En 1969 Charles Goldfarb junto a Edward Mosher y Ray Lorie crearon un lenguaje único de marcado que permitiese entenderse con los diferentes documentos generados por distintos sistemas y plataformas, reuniendo en una misma etiqueta el formato y la descripción del contenido.

16. 3.1 LENGUAJES DE MARCAS A este desarrollo se le denominó marcado generalizado, donde se adopto el término Lenguaje de Marcas • La solución utilizaba etiquetas de descripción de datos relacionadas con plantillas de estilos de formato, consiguiendo así los dos objetivos.

17. 3.1 LENGUAJES DE MARCAS • A este lenguaje se le denominó GML(Generalized Markup Language) (Lenguaje de Marcado Generalizado) siglas que curiosamente coinciden con las iniciales de sus autores (Goldfarb, Mosher, Lorie)

18. 3.1 LENGUAJES DE MARCAS En 1978 gracias al comité de procesamiento de la información de la ANSI se dieron los primeros pasos para crear SGML y convertirlo en estándar. En 1985 se publico el borrador y en 1986 finalmente se publico como norma ISO 8879:1986

19. 3.1 LENGUAJES DE MARCAS SGML fue diseñado para permitir representar la información de manera sencilla, y que esta pudiera transferirse entre diferentes sistemas manteniendo la compatibilidad entre programas y plataformas.

20. 3.1 LENGUAJES DE MARCAS SGML se basa en el concepto de marca, que originalmente describía una anotación u otros símbolos para indicar a un maquetador de imprenta como diseñar una determinada página: tamaño letra, negritas, centrados, etc.

21. 3.1 LENGUAJES DE MARCAS El manual de estilo: The Chicago Manual of Style define markup así: “Es el proceso de marcar un documento manuscrito con instrucciones acerca de como se deben utilizar los tipos de letra, los tamaños, los espacios, etc.”

22. 3.1 LENGUAJES DE MARCAS • Los lenguajes de marca son hoy día una realidad en el ámbito documental. • Ejemplos: HTML, VRML, MATHML, RTF, PDF, etc.

23. 3.1 LENGUAJES DE MARCAS • Los lenguajes de marca ofrecen ventajas tales como: • Representación del conocimiento, • La creación de bibliotecas virtuales, • Recuperación e intercambio de información entre diferentes plataformas.

24. 3.2 LENGUAJE HTML • Fue a finales de los 80’s cuando Tim Berners-Lee aplicó las normas del SGML para diseñar el HTML como solución para publicar las investigaciones de muy diversas fuentes y autores que se producían en el CERN.

25. 3.2 LENGUAJE HTML • Tim denominó HTML(Hipertext Markup Language), al lenguaje que creo y dio el nombre WWW a su sistema de hipertexto para la red informática mundial. La sencillez de los dos procesos ha sido la clave principal de su éxito.

26. Relación entre SGML, XML y HTML • SGML: es un lenguaje de marcado general y extensible; esto significa que con él podemos describir/definir cualquier otro lenguaje de marcas(p.e. HTML) • XML: adopta las principales características de SGML, sigue siendo general y extensible • HTML: es un lenguaje de marcado concreto,(sería un elemento del conjunto de lenguajes definibles en SGML o XML)

27. 3.2 LENGUAJE HTML 3.2 LENGUAJE HTML RTF MathML HTML HTML HTML HTML HTML HTML HTML HTML VRML CDF HTML WML HTML HTML XHTML HTML HTML HTML HTML HTML VARIACIONES

28. XML 3.2 LENGUAJE HTML HTML HTML HTML HTML HTML XHTML HTML HTML HTML HTML HTML HTML HTML HTML HTML

29. 3.2 LENGUAJE HTML CARACTERISTICAS DEL HTML

30. 3.2 LENGUAJE HTML CARACTERISTICAS DEL HTML

31. CARACTERISTICAS • Una página web ó documento html es un archivo de texto plano • Utiliza los primeros 127 caracteres de la tabla de códigos ASCII. ISO-8859-1 • La extensión de una pagina web debe ser: .html ó .htm • Las etiquetas (tags) afectan únicamente al texto que encierran. • Las etiquetas mal escritas no dan errores

32. CARACTERISTICAS • Una página web ó documento html es interpretado por el navegador o browser • Existen diferentes versiones (DTD’s) de HTML. • Se pueden incluir comentarios igual que en los lenguajes de programación • Es independiente del navegador y sistema operativo. • Los nombres de etiqueta no son case sensitivos.

33. CARACTERISTICAS • Las imágenes, applets y otros elementos multimedia no están incluidos en la página sino referencias a dichos objetos mediante URL’s • En principio una pagina web debe ser vista con cualquier navegador, es decir, que son multiplataforma (browser y S.O.) • Poseen una DTD (Definición de Tipo de Documento)

34. LA MARCA SE GOBIERNA MEDIANTE UNA DTD • Internet y el World Wide Web están constituidos sobre estándares universalmente aceptados. El World Wide Web Consortium o W3C se creó para asegurar que los estándares que gobiernan Internet no favorecieran a ninguna empresa en particular.

35. Declaración de tipo documento • La declaración de tipo de documento debe ir justo antes del elemento raíz del documento SGML/XML • El termino !DOCTYPE debe ir en mayúsculas con el siguiente formato: <!DOCTYPE elemento_raíz SYSTEM ”nombreDTD” “direcciónDTD”> • Existen dos tipos de DTD privada y publica, una DTD externa publica se identifica con el termino PUBLIC y la dirección DTD puede ser una URL absoluta o relativa en el caso de DTD publica el formato es: <!DOCTYPE elemento_raiz PUBLIC “nombre_DTD” “dir_DTD”

36. Declaracion de tipo documento Formato DTD para DTD públicos: <!DOCTYPE elemento_raiz PUBLIC “nombre_DTD” “dir_DTD” el nombre DTD debe seguir el siguiente modelo: “prefijo//propietario_DTD//Descripcion_DTD//idioma_iso-639” El prefijo puede ser: ISO, + o - EJEMPLO: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> …. </HTML>

37. Declaracion de tipo documento • Un documento HTML para ser considerado como correcto debe de iniciarse declarando qué versión del lenguaje se está usando para crearlo, EJEMPLO: • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.DTD">

38. 3.3 Estructura y Formato de Paginas

39. ETIQUETAS TAG • El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje.

40. ETIQUETAS TAG • Las etiquetas describen el aspecto visual que debe tener una página web. • Las etiquetas indican al navegador la posición relativa de los elementos de la página, su tamaño, colores, etc. Clases de Etiquetas Etiquetas vacías formato: <etiqueta> Etiquetas contenedoras formato: <etiqueta>. . .</etiqueta>

41. ARGUMENTOS • La mayoría de etiquetas tienen parámetros para indicar propiedades del “objeto” que definen. • Los argumentos o parámetros indican aspectos del formato como: color, tamaño posición Formato de Etiqueta con parámetros <etiqueta parametro1=“valor1” parametro2=“valor2”...> </etiqueta>

42. ESTRUCTURA BASICA DE UN DOCUMENTO HTML • <!–Declaración Tipo de Documento DTD --> • <HTML> • <HEAD> • </HEAD> • <BODY> • <!--...CUERPO DEL DOCUMENTO...--> • </BODY> • </HTML> Sustituir esta línea por la DTD correspondiente, según la versión de HTML que se este usando

43. DOCUMENTOS HTML BIEN ESCRITOS 1.Deben poseer la declaración de tipo de documento utilizada en la página antes de la estructura de la misma. 2.Deben poseer encabezado y dentro de este indicarse el título y las etiquetas meta mínimas. 3.Debe poseer cuerpo de documento. 4.Debe apegarse al estandar su escritura.

44. Encabezado del Documento • Puede contener: (esta información no se muestra al usuario, excepto el título) • Título - etiqueta title • Meta Información - Etiquetas meta • Hojas de Estilos en Cascada- CSS (unidad iv) Etiqueta style • Código de programación - Scripts (unidad iv) Etiqueta script

45. Encabezado del Documento Título - etiqueta title Indica el titulo de la página web y representa el texto que aparece en la barra de título de la ventana del navegador.

46. Encabezado del Documento Meta Información - Etiquetas meta Use los metatags para conseguir los siguientes efectos: a) cambiar la url de la página actual tras n segundos, b) indicar las palabras clave de la página, c) indicar la descripción de la página web, d) indicar el autor de la página web,

47. Encabezado del Documento Meta Información - Etiquetas meta e) indicar al browser que no guarde en la cache la pagina web, es decir, que siempre la cargue desde el servidor, f) indicar la fecha de expiración, g) indicar al proxy server que no guarde la página en la cache, h) indicar a los robots[buscadores] que solo indexen la pagina actual, es decir, no sigan los links de la página.

48. Encabezado del Documento • Meta Información - Etiquetas meta • Hay dos tipos de metainformación que se puede colocar en el encabezado de una página web: • Información referente al protocolo • Información referente a la página.

49. Encabezado del Documento • Meta Información - Etiquetas meta • Información referente al protocolo: • Tipo de contenido y conjunto de caracteres usado para codificar la página • Actualización de página • Lenguaje del contenido • Fecha de expiración • Cacheo del browser • Cacheo del proxy • Clasificación de la página

50. Encabezado del Documento • Meta Información - Etiquetas meta • Información referente a la página: • Descripción del contenido de la página • Palabras clave de la página • Autor de la página • Generador o Editor • Información para los Robots • Cualquier otro valor personalizado