UNIDAD III

UNIDAD IIIDISEÑO y

PUBLICACION DE SITIOS WEB

Ing. Balmore Ortiz

[email protected]

• 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


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.


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.


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.


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.


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.


• 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)


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


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.


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.


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.”


Los lenguajes de marca son hoy día una realidad en el ámbito documental.

Ejemplos: HTML, VRML, MATHML, RTF, PDF, etc.


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.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>

 </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


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.


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,



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.



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.


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


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>  </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.


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


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”


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


TIPOS DE ENLACES

URL ABSOLUTO Y URL RELATIVO


TIPOS DE ENLACES

URL ABSOLUTO Y RELATIVO A MARCADOR INTERNO


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>  </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>


INSTALACION Y CONFIGURACION

DE APACHE

DEMOSTRACION


Puede bajar el software apache desde la url:

http://www.apache.org

Documents

UNIDAD III