unidad iii
DESCRIPTION
UNIDAD III. DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz [email protected]. 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 - PowerPoint PPT PresentationTRANSCRIPT
• 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.
ObjetivosObjetivos
INTRODUCCION
Papiro egipcio
Almacenamiento de pergaminos en la biblioteca de un monasterio
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.
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.
INTRODUCCION
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 tipostipos y la tinta de impresión con pintura.
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".
ANTECEDENTES
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.
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
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.
Primeras IdeasPrimeras IdeasLas primeras ideas ideas en la utilización de las marcas en documentos electrónicos se dieron en la GCA:
Graphic
Communications
Association
3.1 LENGUAJES DE MARCAS
Primeras IdeasPrimeras IdeasLa 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.
3.1 LENGUAJES DE MARCAS
Primeras IdeasPrimeras Ideas
Es así como en 1967, Willian Tunnicliffe indica la necesidad de separar, dentro de un documento, la información de su formato.
3.1 LENGUAJES DE MARCAS
Inicios de los lenguajes de marcasInicios de los lenguajes de marcasProblemas 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.
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.
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.
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)
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
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.
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.
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.”
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.
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.
3.1 LENGUAJES DE MARCAS
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.
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.
3.2 LENGUAJE HTML
Relación entre SGML, XML y HTMLRelació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)
HTMLRTFMathML
CDF
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLVARIACIONES
VRMLXHTML
WML
3.2 LENGUAJE HTML3.2 LENGUAJE HTML
XMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
XHTML
3.2 LENGUAJE HTML
CARACTERISTICAS DEL HTML
3.2 LENGUAJE HTML
CARACTERISTICAS DEL HTML
3.2 LENGUAJE HTML
• 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
CARACTERISTICASCARACTERISTICAS
• 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.
CARACTERISTICASCARACTERISTICAS
CARACTERISTICASCARACTERISTICAS• 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)
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.
• 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”
Declaración de tipo documentoDeclaración de tipo documento
Declaracion de tipo documentoDeclaracion de tipo documentoFormato 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>
Declaracion de tipo documentoDeclaracion 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">
3.3 Estructura y Formato de Paginas
• 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.
ETIQUETAS TAGETIQUETAS TAG
ETIQUETAS TAGETIQUETAS 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 EtiquetasClases de Etiquetas
Etiquetas vacíasformato: <etiqueta>
Etiquetas contenedorasformato: <etiqueta>. . .</etiqueta>
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ámetrosFormato de Etiqueta con parámetros<etiqueta parametro1=“valor1” parametro2=“valor2”...>
</etiqueta>
ESTRUCTURA BASICA DE UN DOCUMENTO HTML
Sustituir esta línea por la DTD
correspondiente, segúnla versión de HTMLque se este usando
<!–Declaración Tipo de Documento DTD --><HTML> <HEAD>
</HEAD> <BODY>
<!--...CUERPO DEL DOCUMENTO...--> </BODY></HTML>
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.
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
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.
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,
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.
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.
Encabezado del Documento
Meta Información - Etiquetas metaInformació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
Encabezado del Documento
Meta Información - Etiquetas metaInformació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
Ejemplo de pagina web
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <title> P´gina Web más simple que se puede construir </title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <!-- ESTA ES UNA PAGINA WEB VALIDA Y EN BLANCO --> </body></html>
Validez de una página web
La validez de una página web se puede comprobar en el sitio web del W3C en http://wwww.w3.org (busque el link: html validator).
Validez de una página web
Existen tres formas para validar el código de una página web que son:•Dar la url de la página (cuando esta ya está publicada)•Subir el archivo (cuando lo tenemos en nuestro equipo)•Enviar el código a través de un formulario web.
Cuerpo del Documento
Definición de Colores:•Código hexadecimal•Nombre del color
Espaciados y saltos de línea•Solo se toma en cuenta un espacio•Los saltos de linea y retornos de carro no se toman en cuenta.
Cuerpo del Documento
Caracteres Latinos y Especiales:•Usar secuencia de escape con nombre•Usar secuencia de escape con código
Cabeceras o encabezados (para títulos)•Existen seis encabezados H1 a H6•EL tamaño no se puede modificar ya está predefinido para cada browser
Cuerpo del Documento
Fuentes:•Se puede cambiar tamaño (1 a 7 son tamaños predefinidos)•Se puede cambiar su color (usando nombre o código)
Estilos (para dar formato al texto)•Físicos: produce un cambio físico dado•Lógicos: produce un cambio “lógico”
Cuerpo del Documento
Tablas: usadas para•Presentar información en forma tabular. (objetivo original)•Dar formato al contenido de la página (no recomendado)•Se puede anidar tablas dentro de tablas
Imágenes •Pueden ser usadas como enlaces(link)•Pueden ser usadas como botones(form.)
ELABORACION DE PAGINAS WEB
TIPOS DE URL» URL ABSOLUTO» URL RELATIVO» URL ABSOLUTO A MARCADOR INTERNO» URL RELATIVO A MARCADOR INTERNO» URL ABSOLUTO A MARCADOR EXTERNO» URL RELATIVO A MARCADOR EXTERNO
ELABORACION DE PAGINAS WEB
TIPOS DE ENLACES
URL ABSOLUTO Y URL RELATIVO
ELABORACION DE PAGINAS WEB
TIPOS DE ENLACES
URL ABSOLUTO Y RELATIVO A MARCADOR INTERNO
ELABORACION DE PAGINAS WEB
TIPOS DE ENLACES: URL ABSOLUTO Y RELATIVO A MARCADOR EXTERNO
ENLACES
XHTML Características:
• Es la versión en XML de HTML(no SGML)
• Es la versión 4 de HTML pero formalmente estandarizada, en el futuro todas las páginas deberían usar XHTML.
• Es sensible a mayúsculas y minúsculas
• El código XHTML se escribe en minúsculas
• No existen etiquetas abiertas, las etiquetas deben estar cerradas. Ej.: <hr></hr>, <br/>
XHTML<!DOCTYPE html PUBLIC version_dtd url_dtd>
<html> <head> <title> Título de la P´gina Web </title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta http-equiv="expires" content="0”/> <meta http-equiv="cache-control" content="no-cache”/> <meta http-equiv="pragma" content="nocache”/> <meta name="author" content="nombre del autor de la pagina”/> <meta name="keywords" content="palabra1, palabra2, palabran”/> <meta name="description" content="breve descripcion de contenido”/> </head> <body> <!-- contenido de la pagina --> </body></html>
Hosting en Internet
Hosting:
Es un “servicio” proporcionado por proveedores de servicios de Internet (ISP) y consiste en hospedar un sitio del servicio web, ftp u otro servicio de Internet en un espacio asignado para ello dentro de un determinado servidor, anfitrión o host.
Hosting en Internet
De acuerdo al tipo de servicio que se ha contratado se ven involucrados los factores:
* Espacio en disco.
* Ancho de banda ó tasa de transferencia:(Mbps)
* Volumen de Transferencia(MB)
* Conexiones concurrentes
* Acceso a disco - Sistema de Ficheros (texto)
* Acceso a bases de datos - SGBD
* Programación del lado del servidor
Tipos de Hosting
Un sitio web puede ser atendido por:
Carpeta (sin nombre propio, hw y sw compartido)
Servidor virtual (hw y sw compartido):
Servidor individual (sw) compartido (hw)
Servidor privado (hw y sw) en ISP
Servidor privado (hw y sw) en la organización
Tipos de Hosting
Sitio Web Atendido por Carpeta: Este tipo de hosting consiste en conceder
espacio en una carpeta dentro del servidor web por lo general dentro de la carpeta raíz del servicio web, pero puede estar fuera (carpeta virtual).
Se caracteriza porque:• No posee un nombre propio• Todos los sitios atendidos comparten el mismo
nombre de servidor o host y su dirección ip.
Tipos de Hosting
Sitio Web Atendido por Servidor Virtual:
Este tipo de hosting consiste en conceder espacio en una carpeta dentro del servidor web la cual debe estar fuera de la carpeta raíz del servicio web.
Se caracteriza porque:
• Cada sitio posee un nombre propio
• Todos los sitios atendidos comparten la misma dirección ip del servidor o host.*
Tipos de Hosting
Atendido por Servidor Individual Compartido: Consiste en conceder al propietario del sitio la
administración de su propio servidor web (sw) lo cual incluye espacio en disco duro y otros privilegios.
Se caracteriza porque:• Cada sitio posee un servidor web(sw) y
nombre propio, pero comparten el Hardware• Todos los sitios atendidos comparten la misma
dirección ip del servidor o host.*
Tipos de Hosting
Atendido por Servidor Individual - ISP: Consiste en conceder al propietario del sitio la
administración de su propio servidor web (hw y sw), es decir, el propietario tiene la administración exclusiva del servidor web.
Se caracteriza porque:• El sitio posee un servidor web(hw y sw)
exclusivo y nombre propio, pero el equipo esta con el ISP, quien lo resguarda y da mtto.
• El sitio tiene dirección ip propia además de servidor o host propio.
Tipos de Hosting
Atendido por Servidor Individual - Propio: El propietario del sitio administra su propio
servidor web (hw y sw) y depende del ISP solo para conectar su servidor a Internet.
Se caracteriza porque:• El sitio posee un servidor web(hw y sw)
exclusivo y nombre propio.• El sitio tienen dirección ip propia además de
servidor o host propio.• El ISP solo vende la conexión a Internet*
PUBLICACION DE PAGINAS WEB
INSTALACION Y CONFIGURACION
BASICA DEL SERVIDOR WEB
APACHE
SECCIONES ARCH. CONFIG.
Sección 1: Global Enviroment - Entorno Global
Sección 2: Main Server Configuration - Configuración del Servidor “Principal”
Sección 3: Virtual Hosts
Sección 1: Global Enviroment - Entorno Global
ServerRoot: este es el directorio donde esta instalado el servidor web Apache.
Sección 2: Configuración del Servidor Principal
Port: este es el numero de puerto que estará escuchando el servidor principal.
ServerAdmin: esta es la dirección de corre-e del administrador del servidor.
ServerName: este es el nombre del servidor como esta registrado en el dns sin subdominio
DocumentRoot: Directorio raíz del servicio web
Sección 3: Configuración Servidor Virtual
Formato:NameVirtualHost NumeroIP:Puerto
<VirtualHost NumeroIP:Puerto> ServerAdmin [email protected] DocumentRoot RutaDirectorioWebRaíz ServerName www.subdominio.dominio ErrorLog RutaArchivo CustomLog RutaArchivo</VirtualHost>
Sección 3: Configuración Servidor Virtual
Ejemplo:
NameVirtualHost 127.0.0.2:80
<VirtualHost 127.0.0.2:80>
ServerAdmin [email protected]
DocumentRoot c:/tpi115/wwwroot
ServerName www.tpi115.eisi
</VirtualHost>
PUBLICACION DE PAGINAS WEB
INSTALACION Y CONFIGURACION
DE APACHE
DEMOSTRACION
PUBLICACION DE PAGINAS WEB
Puede bajar el software apache desde la url:
http://www.apache.org