Académique Documents
Professionnel Documents
Culture Documents
Diseño Básico
de
Sitios Web
Ing. Rodrigo Torréns H.
Diciembre 1999
www.cecalc.ula.ve
CONTENIDO DEL CURSO
2
CeCalCULA/HACER-ULA Noviembre 1999
PARTE I: Introducción - Aspectos Básicos
3
CeCalCULA/HACER-ULA Noviembre 1999
Introducción - Aspectos Básicos
Que es Hipertexto-Hipermedia:
Hipermedia es hipertexto con una sola diferencia: los documentos hipermedia contienen enlaces no
solo hacia otras piezas de texto, sino también a otros tipos de medios: sonido,imágenes, video. Las
imágenes también pueden ser seleccionadas como enlaces a otras documentos hipermedia.
Hipermedia simplemente combina Hipertexto y Multimedia; en otras palabras un documento
Hipermedia contiene información a traves de la cual Ud. puede navegar. Por lo general existen
múltiples rutas que se pueden tomar en la búsqueda de la información requerida. Esta información
puede aparecer en muchos formatos: texto, gráficos, sonido, video, etc. Los textos hipermedia no
son lineales. Los lectores pueden explorar la información como lo deseen. Esto significa a su vez,
que un mismo documento puede servir a públicos con intereses totalmente diferentes.
4
CeCalCULA/HACER-ULA Noviembre 1999
...Introducción - Aspectos Básicos
WWW
...Conceptos y definiciones básicas
Que es el World Wide Web:
El WWW es oficialmente descrita como "una iniciativa de recuperación de información hipermedia
distribuida, que permite dar acceso global a un gran universo de documentos".
El proyecto WWW comenzado en el CERN lo que ha hecho es proveer a los usuarios de redes
de computadoras de métodos consistentes para accesar una gran variedad de medios, de una
manera sencilla y simple. El WWW integra a muchos computadores que tengan información
hipermedia (toda la información distribuida forma una poderosa base de datos llamada World
Wide Web - WWW )
.
Internet y WWW:
La palabra "Internet" es usada ampliamente para describir la masiva red de computadores con
INTERNET
cobertura mundial, existente actualmente. La palabra Internet literalmente significa red de redes.
Esta compuesta de miles de redes regionales más pequeñas distribuidas alrededor del globo.
Nadie es dueño de Internet, ningún gobierno controla lo que pasa en esta red. Cada país,
institución o persona puede crear y manejar redes de acuerdo a sus propias políticas.
El tener acceso a Internet significa tener acceso a un número de servicios básicos:
•Correo electrónico
•Conferencias interactivas
•Acceso a fuentes de información
•Noticias
•Transferencia remota de archivos
•Conexión remota, etc.
5
CeCalCULA/HACER-ULA Noviembre 1999
...Introducción - Aspectos Básicos
• Al igual que lo dicho para Internet, nadie es propietario del WWW. Cada
persona o institución es responsable por los documentos de su autoría que
ha puesto a la disposición pública.
6
CeCalCULA/HACER-ULA Noviembre 1999
...Introducción - Aspectos Básicos
Cada vez que se desea ver un documento, el cliente envía un mensaje al servidor
solicitandole el documento. El servidor toma este mensaje, encuentra el documento
solicitado y lo envía de vuelta al cliente.
8
CeCalCULA/HACER-ULA Noviembre 1999
...Introducción - Aspectos Básicos
Cliente solicita
documento
http
HTTP:
(Hypertext Transfer Protocol) Lenguaje mediante el cual el programa cliente y el
servidor hablan entre sí. Todos los clientes y servidores Web deben ser capaces de
“hablar” HTTP.
9
CeCalCULA/HACER-ULA Noviembre 1999
...Introducción - Aspectos Básicos
Método por el cual los documentos o datos son direccionados en el WWW. Un URL
contiene la siguiente información:
• Nombre del sitio Internet (maquina) que contiene el recurso (documento dato).
• Tipo de servicio relacionado con el recurso (HTTP, ftp, gopher, etc).
• Número del puerto Internet en servicio (casi siempre se omite).
• Localización del recurso en la estructura de directorios del servidor.
Aquí se presenta la estructura mas común de un URL:
http://www.maquina.ve:8080/camino/subdir/archivo.ext
|servicio|------ host -----|puerto|------detalles del camino-----|
y el archivo
Los servicios disponibles pueden ser: HTTP, GOPHER, FTP, WAIS, TELNET,
USENET, MAILTO, NEWS, etc.
Esto quiere decir que los Web browsers no solo son clientes Web, sino también
clientes FTP, TELNET, etc.
10
CeCalCULA/HACER-ULA Noviembre 1999
...Introducción - Aspectos Básicos
Todos estos URL’s son válidos dependiendo del contexto en donde se usen:
• http://www.cecalc.ula.ve/
• http://150.185.138.1/
• http://atlas.cecalc.ula.ve/cgi-bin/ping2.pl
• http://biosalud.saber.ula.ve/...
...cgi-win/be_alex.exe?Ejemplar=T021706/0&nombrebd=ssalud
• http://www/
• ftp://ftp.sunsite.unc.edu/
• news://news.unc.edu/
• /paginax.html
• /archivos/3D/VRML/casa1.wrl
• ./../info.html
• ./../../
• /
11
CeCalCULA/HACER-ULA Noviembre 1999
...Introducción - Aspectos Básicos
13
CeCalCULA/HACER-ULA Noviembre 1999
Lenguajes y tecnologías para el Web
Comparación de Tecnologías
A continuación un cuadro donde se comparan las funcionalidades de algunas de las
tecnologías más utilizadas:
15
CeCalCULA/HACER-ULA Noviembre 1999
PARTE III: Arquitectura de la Información
16
CeCalCULA/HACER-ULA Noviembre 1999
... Arquitectura de la Información
Sitio
Web
Arquitectura
Navegacional
Arquitectura Estructural
Arquitectura Funcional
17
CeCalCULA/HACER-ULA Noviembre 1999
... Arquitectura de la Información
Necesidades mínimas:
18
CeCalCULA/HACER-ULA Noviembre 1999
... Arquitectura de la Información
19
CeCalCULA/HACER-ULA Noviembre 1999
... Arquitectura de la Información
Transforma la
información guardada Nivel Lógico
en una BD o en el
servidor Web en lo que
el usuario finalmente ve
20
CeCalCULA/HACER-ULA Noviembre 1999
... Arquitectura de la Información
dicta utiliza
publica ofrece
Tiene
Profesor adscrito Postgrado Evento
publica
participa
emplea
Publicación desarrolla
Instructor
publica
Encargado_de
PORTAL CURSOS
Indice Profesor
URLsXcursos
Indice encargados
Tec Educ
Publicación
Indice pubXprof
Personal
22
CeCalCULA/HACER-ULA Noviembre 1999
... Arquitectura de la Información
Cliente
23
CeCalCULA/HACER-ULA Noviembre 1999
PARTE IV: Requerimientos y Aspectos Técnicos
¿Qué necesitamos?
Para navegar por el Web
Para elaborar páginas Web
Para publicar información en el Web
24
CeCalCULA/HACER-ULA Noviembre 1999
Requerimientos y Aspectos Técnicos
¿Qué Necesitamos ?
Qué necesitamos para “navegar por el WWW” ?, que es necesario para elaborar nuestras propias
páginas Web, y, por último, qué necesitamos para “publicar” nuestra propia información en el
WWW ?
1 Escribiendo el
código HTML
3 Utilizando herramientas
de conversión de formato
26
CeCalCULA/HACER-ULA Noviembre 1999
...Requerimientos y Aspectos Técnicos
27
CeCalCULA/HACER-ULA Noviembre 1999
...Requerimientos y Aspectos Técnicos
MS Publisher MS PowerPoint
29
CeCalCULA/HACER-ULA Noviembre 1999
PARTE IV: Fundamentos
PARTE V:deFundamentos
HTML de HTML
Fundamentos de HTML
Qué es HTML ?
Estandares para HTML
Elementos de un documento HTML
Estandares para HTML
Estructura de un documento HTML
Etiquetas HTML básicas
30
CeCalCULA/HACER-ULA Noviembre 1999
...Fundamentos de HTML
Qué es HTML ?
1. Definición Oficial de W3 Consortium:
“HTML is the lingua franca for publishing hypertext on the World Wide Web. It is a non-
proprietary format based upon SGML, and can be created and processed by a wide range
of tools, from simple plain text editors - you type it in from scratch- to sophisticated
WYSIWYG authoring tools. HTML uses tags such as <h1> and </h1> to structure text into
headings, paragraphs, lists, hypertext links etc. “
2. Definición propia:
HTML, o HyperText Markup Language, es un lenguaje que sirve para que su Web
Browser muestre documentos multimedia. Los documentos en sí son archivos de texto
simple (ASCII) con "etiquetas" especiales que un Browser sabe cómo interpretar y utilizar
para dar formato al documento, en la pantalla de su computador.
31
CeCalCULA/HACER-ULA Noviembre 1999
...Fundamentos de HTML
La idea es diseñar un sitio Web que la mayor cantidad de personas pueda ver, no solo el grupo de
personas que tengan la última versión de un Browser, o trabajen en cierta plataforma de S.O., o
tengan un monitor capaz de mostrar 128 millones de colores...
• HTML 2.0: primer conjunto de estándares que apareció para el HTML. Virtualmente todos los
browsers en uso actualmente soportan este estándar.
• HTML 3.2: Incorpora características adicionales introducidas por Netscape y MS Explorer, que al
principio no eran soportadas por todos los browsers. En la actualidad la mayoría de los usuarios del
Web usan navegadores que soportan este estándar (pero no todos).
32
CeCalCULA/HACER-ULA Noviembre 1999
...Fundamentos de HTML
33
CeCalCULA/HACER-ULA Noviembre 1999
...Fundamentos de HTML
Las instrucciones HTML, en conjunto con el texto sobre el que actúan estas instrucciones,
son llamadas Elementos HTML . Estas instrucciones HTML son llamadas Etiquetas, y
tienen la siguiente forma general:
<Nombre_elemento>
Por lo general estos elementos, como se dijo, dan formato a zonas de texto y la etiqueta
anterior marca el principio de la zona formateada, y la etiqueta:
</Nombre_elemento>
...marca el final de esta zona (note que solo se le coloca el caracter slash "/" al nombre
del elemento de formato).
<HTML>
<HEAD>
Zona de Etiquetas
de Encabezados
.
.
Encabezado del Documento
.
.
</HEAD>
del documento
.
.
Cuerpo del Documento
.
.
</BODY>
</HTML>
35
CeCalCULA/HACER-ULA Noviembre 1999
...Fundamentos de HTML
Etiquetas Básicas
• Encabezados: <h1> hasta <h6>
• Listas:
• Ordenadas: <ol>
<li> Elemento 1 </li>
<li> Elemento 2 </li>
</ol>
• Desordenadas: <ul>
<li> Item </li>
<li> Item </li>
</ul>
36
CeCalCULA/HACER-ULA Noviembre 1999
...Fundamentos de HTML
• Tablas:
<TABLE>
<TR><TD>Celda A1</TD><TD>Celda B1</TD><TD>Celda C1</TD></TR>
<TR><TD>Celda A2</TD><TD>Celda B2</TD><TD>Celda C2</TD></TR>
<TR><TD>Celda A3</TD><TD>Celda B3</TD><TD>Celda C3</TD></TR>
</TABLE>
• Texto preformateado:
<PRE> Texto
preformateado
</PRE>
37
CeCalCULA/HACER-ULA Noviembre 1999
...Fundamentos de HTML
Formularios:
Estructura del formulario:
<FORM ACTION=”...” METHOD="POST">
.
. Etiquetas de entrada de datos
.
</FORM>
38
CeCalCULA/HACER-ULA Noviembre 1999
...Fundamentos de HTML
Ejemplo de un Formulario:
39
CeCalCULA/HACER-ULA Noviembre 1999
PARTE VI: Gráficos en el Web
40
CeCalCULA/HACER-ULA Noviembre 1999
... Gráficos en el Web
Los formatos gráficos que pueden mostrarse directamente dentro de una página Web son el
formato GIF (Graphic Interchange Format) y el formato JPEG (Joint Picture Expert Group)
GIF
Joint Pictures Expert Group JPEG jpg, jpeg
Estos formatos son interpretados directamente por los Browsers y pueden ser parte
componente de una pagina Web junto con texto (formateado con HTML o no ) y también el
browser los puede desplegar individualmente. El GIF es un formato sin pérdida, mientras
que el JPEG sacrifica calidad por compresión (más compresión - menos calidad).
41
CeCalCULA/HACER-ULA Noviembre 1999
... Gráficos en el Web
• Use solo gráficos que sean críticos para el contenido e información de su página.
• Evite usar imágenes grandes solo por su apariencia.
• Mantenga el tamaño total de las imágenes en una página menor a 30 - 50 Kbytes.
• Minimice el número de colores usado en una imagen. Use la tabla de colores de Netscape
o limite el número de colores al mínimo necesario (8 bits - 256 colores - son suficientes).
• Use imágenes con fondos transparentes o con el mismo color de fondo de las páginas
para mejor integración con las páginas.
• No use referencias a imágenes en otro sitio fuera de su servidor.
• Revise las imágenes y páginas en varias plataformas de Hardware-Software.
• Tenga en cuenta las posibles diferentes configuraciones del monitor de su audiencia (no
haga gráficos de más de 640 pixels de ancho y 480 de alto - mínima resolución de un
monitor VGA).
• Los gradientes de color no se ven muy bien en formato GIF, los colores sólidos sí.
• Escoja usar formato GIF para imágenes con colores planos o pequeñas (iconos, botones,
etc), y formato JPEG para imágenes fotográficas.
42
CeCalCULA/HACER-ULA Noviembre 1999
... Gráficos en el Web
Herramientas para Gráficos:
Se puede usar prácticamente cualquier programa que sea capaz de crear o modificar
gráficos de computadora.
Algunos programas que se pueden usar son los siguientes:
• Comerciales:
• Adobe Photoshop
• Adobe Illustrator
• CorelDraw
• FreeHand
• Gratuitos:
• Paint Shop Pro
• ACDSee
• GIMP
• Paint
• GIF Construction Set
La única restricción o limitación es que se debe poder guardar los gráficos elaborados,
en formato GIF o JPEG
43
CeCalCULA/HACER-ULA Noviembre 1999
PARTE VII: Ejercicios Prácticos de Diseño de Páginas
44
CeCalCULA/HACER-ULA Noviembre 1999
... Ejercicios Prácticos de Diseño de Páginas
45
CeCalCULA/HACER-ULA Noviembre 1999
... Ejercicios Prácticos de Diseño de Páginas
Su Primera página HTML:
Abra Notepad (en Windows), SimpleText (en Mac), o vi (en Unix) Digite lo siguiente:
<HTML>
<HEAD>
<TITLE>Mi primera página HTML</TITLE>
</HEAD>
<BODY>
<P>Esta es la primera página
HTML que edito !
</P>
</BODY>
</HTML>
Grabe este archivo con el nombre: holamundo.htm .Abra su browser; este puede
reclamar por la falta de una conexión a Internet; ignore estos avisos. No necesita
conectarse a Internet para ver las páginas en su computador. Puede trabajar Off-line.
Elija "Open File" en la barra de menú. Seleccione el archivo holamundo.htm que acaba
de crear; debería aparecer algo así:
Esta es la primera página HTML que edito !
Usted ha creado su primer documento HTML!
46
CeCalCULA/HACER-ULA Noviembre 1999
... Ejercicios Prácticos de Diseño de Páginas
Usando el editor de texto escogido, agregue lo siguiente (entre las etiquetas <P> y
</P>) al documento que esta editando:
47
CeCalCULA/HACER-ULA Noviembre 1999
... Ejercicios Prácticos de Diseño de Páginas
48
CeCalCULA/HACER-ULA Noviembre 1999
... Ejercicios Prácticos de Diseño de Páginas
Ejercicio:
Usando el programa Adobe
Photoshop instalado en su
maquina, y los archivos gráficos
proporcionados, realice un diseño
de Home Page parecido al
mostrado aquí:
49
CeCalCULA/HACER-ULA Noviembre 1999
... Ejercicios Prácticos de Diseño de Páginas
50
CeCalCULA/HACER-ULA Noviembre 1999
... Ejercicios Prácticos de Diseño de Páginas
Configuración de:
• Apariencia
• Navegación
• Correo electrónico
• Composer
• Aspectos avanzados
51
CeCalCULA/HACER-ULA Noviembre 1999
... Ejercicios Prácticos de Diseño de Páginas
Chequeo de
Cortar, copiar y pegar ortografía
en clipboard
(texto o imágenes) Opciones para tablas
Vista previa de
documento HTML Insertar separador
Horizontal
Opciones de publicación Insertar imagen
en un servidor
Insertar objetivo
Guardar documento para hiperenlace
editado
Insertar hiperenlace
Abrir un documento
HTML existente Buscar dentro
del documento
Crear nuevo
documento HTML Imprimir documento
52
CeCalCULA/HACER-ULA Noviembre 1999
... Ejercicios Prácticos de Diseño de Páginas
Ejercicio:
Usando el Netscape Composer y
los archivos proporcionados, crear
una página parecida a la diseñada
en el ejercicio anterior:
53
CeCalCULA/HACER-ULA Noviembre 1999
... Ejercicios Prácticos de Diseño de Páginas
Ejercicio:
Usando el Netscape Composer y
los archivos proporcionados, crear
una página parecida a la que se
muestra en la siguiente imagen:
54
CeCalCULA/HACER-ULA Noviembre 1999
Referencias
55
CeCalCULA/HACER-ULA Noviembre 1999
www.cecalc.ula.ve