Programaci

1
Centro de Cálculo Científico de la Universidad de
Los Andes Mérida - Venezuela
Diseño Básico
de
Sitios Web
Ing. Rodrigo Torréns H. Diciembre 1999
www.cecalc.ula.ve
2
CONTENIDO DEL CURSO
PARTE I Introducción - Aspectos Básicos
3
PARTE II Lenguajes y tecnologías para el Web
13
PARTE III Arquitectura de la Información
16
PARTE IV Requerimientos y Aspectos Técnicos
24
PARTE V Fundamentos de HTML
30
PARTE VI Gráficos en el Web
40
PARTE VII Ejercicios Prácticos de Diseño de
Páginas 44
Referencias

55
3
PARTE I Introducción - Aspectos Básicos

• Conceptos y definiciones básicas
• Como trabaja el WWW
• Esquema de funcionamiento de un servidor Web
• Direccionando documentos URLs
• Tipos de documentos, extensiones de Archivos

4
Introducción - Aspectos Básicos
Conceptos y definiciones básicas Muchas veces
algunos conceptos relacionados con nuevas
tecnologías, son usados de forma errónea o
ambigua incluso algunos términos se mencionan
sin saber siquiera su significado. El propósito
de las siguientes definiciones, es el de aclarar
y uniformizar algunos de estos conceptos y
términos. Que es Hipertexto-Hipermedia Un
documento Hipertexto se comporta básicamente de
la misma manera que un documento de texto puede
se almacenado, leído, buscado o editado con una
importante diferencia un hipertexto contiene
enlaces (dentro de su texto) hacia otros
documentos. 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.
5
...Introducción - Aspectos Básicos

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

WWW
INTERNET
6
...Introducción - Aspectos Básicos

• ...Conceptos y definiciones básicas
• El WWW es la herramienta más usada actualmente en
  Internet lo que no quiere decir que sea lo mismo
  
• Cuando nos referimos a Internet, nos referimos
  principalmente a la parte física de la red
  global conexiones, computadoras, satélites de
  comunicación, etc, y al software usado para su
  manejo y funcionamiento.
• Cuando hablamos del WWW en realidad nos estamos
  refiriendo a un cuerpo de información, un espacio
  abstracto de conocimientos.
• El WWW usa Internet para transmitir Documentos
  Hipermedia .
• 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.

7
...Introducción - Aspectos Básicos

• ...Conceptos y definiciones básicas
• Términos, abreviaciones y acrónimos relacionados
  con el Web e Internet
• Internet, World Wide Web, WWW, Web, Intranets
• Clientes y Servidores Web (Web Browsers, Web
  Servers)
• Frames, Barras de Navegación, Etiquetas HTML
• Navegadores Versión 2.0, 3.0, 4.0, etc.
• HTML, DHTML, XML, SGML
• Protocolos de comunicación
• HTTP
• FTP, clientes y servidores FTP
• Publicación de páginas Web
• Plugins
• URLs
• Java, JavaScript, VBScript
• Programas CGI, Perl

8
...Introducción - Aspectos Básicos

• Como trabaja el WWW
• El software para el Web esta diseñado alrededor
  de una arquitectura cliente-servidor. La
  recuperación de un documento Web requiere de la
  cooperación de dos programas
• Cliente (Web Browser) ubicado en tu máquina
  local.
• Servidor (Web Server) localizado en una máquina
  remota donde están almacenados
  los documentos Web.
• 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.
• Por último el cliente (Web Browser) obtiene el
  documento y lo despliega.
• A continuación se muestra un esquema de
  funcionamiento del proceso...

9
...Introducción - Aspectos Básicos
Esquema de funcionamiento de un servidor y
cliente Web
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.
10
...Introducción - Aspectos Básicos

• Direccionando Documentos URLs (Uniform Resource
  Locators)
• 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.ve8080/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.

11
...Introducción - Aspectos Básicos

• ...Direccionando Documentos URLs (Uniform
  Resource Locators)
• Ejemplos de URLs válidos - URLs Absolutos y
  Relativos
• Todos estos URLs 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?EjemplarT021706/0nombrebd
  ssalud
• http//www/
• ftp//ftp.sunsite.unc.edu/
• news//news.unc.edu/
• /paginax.html
• /archivos/3D/VRML/casa1.wrl
• ./../info.html
• ./../../
• /

12
...Introducción - Aspectos Básicos
Tipos de documentos, extensiones de Archivos A
continuación una lista de los tipos de archivos
más comunes que se encuentran en Internet y el
WWW Tipo de Documento
Extensión Página WEB-HTML .html, .htm, .shtml
Archivo texto ascii .txt Portable Document
Format .pdf Gráficos .gif, .jpg, etc.
Programa CGI .cgi, .pl, etc. Archivo
3D .vrml, wrl Archivos Comprimidos .zip, .Z,
.tar.Z, .tar.gz, etc. Active Server
Pages .asp No todos estos tipos de documentos
pueden ser mostrados por el Browser directamente
algunos necesitan aplicaciones de apoyo o plugins
13
PARTE II Lenguajes y tecnologías para el Web

• Lenguajes, Técnicas y Herramientas
• Comparación de Tecnologías

14
Lenguajes y tecnologías para el Web

• Lenguajes, Técnicas y Herramientas
• Para lograr crear un sitio Web efectivo, que
  alcance un grado de interactividad que haga útil
  su uso, se necesitará utilizar algunos lenguajes,
  técnicas y herramientas como las mencionadas a
  continuación
• HTML, DHTML, XML
• Programación CGI (con Perl, C, C, Basic,
  Fortran, etc)
• Programación JavaScript
• Programación Java
• VRML
• Manejo y procesamiento de formas electrónicas
• Páginas Web generadas dinámicamente
• Interacción con SMBD (ODBC, JDBC, ASP, etc)
• Creación y manejo de "mapas sensitivos"
• Streaming audio y video
• Utilización de GIF's animados
• Macromedia ShockWave, Flash
• Controles ActiveX
• Etc.

15
...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 lastecnologías más utilizadas
16
PARTE III Arquitectura de la Información

• Necesidades mínimas de organización y
  funcionamiento de un sitio Web
• Modelos y Metodologías de Desarrollo
• Características deseables de un sitio Web

17
... Arquitectura de la Información
"Piramide" de Necesidades para construir un sitio
Web
18
... Arquitectura de la Información
Necesidades mínimas
19
... Arquitectura de la Información
Modelos y Metodologías de desarrollo para el
Web Existen metodologías para Hipermedia que
se pueden aplicar al desarrollo e implementación
de sitios Web. Se mencionan a continuación
algunas de las más conocidas.
Módelos para hipermedia (sitios web)

• DHM Dexter Hypermedia model
• HRM Hipermedia reference model
• HAM Hypermedia model
• Trellis Reference model
• AHM Amsterdam Hipermedia Model...

Metodologías para hipermedia

• W3DT World Wide Web Design Technique
• RMM Relationship Managment Model
• Metodologías OxO (Prof. Jonás M. y Prof.
  Beatriz Sandia)...

20
... Arquitectura de la Información
...Modelos y Metodologías de desarrollo para el
Web Niveles de un WIS
Nivel de Presentación Nivel Lógico Nivel de
Almacenamiento
Cómo la información es presentada
Transforma la información guardada en una BD o en
el servidor Web en lo que el usuario finalmente ve
Como esta organizada la información físicamente
(almacenamiento, aplicaciones)
21
... Arquitectura de la Información
...Modelos y Metodologías de desarrollo para el
Web Ejemplo Diagrama E-R en RMM
URL
Asociado_a
Utilizada por
toma
utiliza
Curso
TecEduc
Estudiante
utiliza
dicta
ofrece
publica
Tiene adscrito
Profesor
Postgrado
Evento
publica
participa
emplea
desarrolla
Publicación
Instructor
publica
Encargado_de
pertenece
Investigador
LineaInvest
Personal
22
... Arquitectura de la Información
...Modelos y Metodologías de desarrollo para el
Web Ejemplo Diagrama Navegacional RMM
PORTAL CURSOS
Indice profs.
Indice URLs
Indice cursos
Indice guia estudio
Indice Tec EducXCurso
URL
Curso
TecEduc
Indice datos prof
Profesor
Indice URLsXcursos
Indice encargados Tec Educ
Publicación
Indice pubXprof
Personal
23
... Arquitectura de la Información
Características deseables de un sitio Web Los
mejores sitios comparten e integran tres
características básicas 1.- Arquitectura de la
Información. 2.- Diseño Técnico.3.-
Diseño Gráfico.
24
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
• Maneras de producir documentos HTML
• Escribiendo el Código HTML
• Utilizando editores HTML
• Utilizando Herramientas de Conversión de Formato

25
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 ?
• Para Navegar por el Web
• Conexión de algún tipo a la red Internet.
• Cliente Web (Netscape Navigator ó MS Internet
  Explorer por ejemplo)
• Para elaborar páginas Web
• Cliente Web
• Editor de texto o editor HTML o conversores de
  formato
• Programas para procesar gráficos
• Para publicar información en el Web
• Haber elaborado previamente páginas HTML y
  gráficos relacionados
• Tener a nuestra disposición una institución o
  compañía que aloje nuestras páginas (tener
  una cuenta de usuario en una universidad,
  compañía o proveedor de acceso a Internet,
  con derecho a publicar nuestros propios archivos
  en sus servidores) o tener servidores
  propios conectados a Internet.

26
...Requerimientos y Aspectos Técnicos
Maneras de Producir Documentos HTML
27
...Requerimientos y Aspectos Técnicos
Los Web browsers interpretan archivos texto
(ascii) que contienen etiquetas HTML, por lo que
podemos escribir directamente estas etiquetas
usando cualquier editor de texto en cualquier
plataforma de hardware/sistema operativo. Se
puede usar por ejemplo, el Bloc de Notas ó el
WordPad de Windows 9x/Nt, el vi ó el emacs en
cualquier versión de UNIX/Linux. Existen incluso
editores de texto que permiten insertar
directamente etiquetas HTML desde sus menús de
utilidades y herramientas (TextPad, Xemacs,
Word97, etc). El único requerimiento es guardar
los archivos con extensión .html ó .htm
28
...Requerimientos y Aspectos Técnicos
Existen editores HTML que permiten dar formato
HTML a un documento, sin tener que escribir
directamente las etiquetas HTML. Su
funcionamiento y características varian existen
editores HTML extremadamente sencillos como el
Composer de Netscape, HomeSite o HotDog, y mucho
más sofisticados y con características complejas
como MS Front Page, Macromedia Dream Weaver,
HotMetal Pro, etc.
Netscape Composer
Microsoft Front Page
29
...Requerimientos y Aspectos Técnicos
A muchos programas de edición de documentos, se
les ha añadido la capacidad de exportar o portar
documentos al formato HTML. MS PowerPoint por
ejemplo, convierte a formato GIF todas las
láminas de una presentación y crea enlaces entre
ellas. MS Publisher por otro lado, crea todo un
sitio Web a partir de un documento, tríptico,
folleto, etc.
MS Publisher
MS PowerPoint
30
PARTE V Fundamentos de HTML
PARTE IV Fundamentos 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

31
...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 lth1gt and
lt/h1gt 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.
32
...Fundamentos de HTML

• Estándares para HTML
• Porque seguir estándares?
• 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...
• Estandares (y no tan Estandares)
• 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).
• HTML 4.0 es el conjunto actual de estándares
  propuestos. Contiene muchas características
  adicionales y algunos intentos de reducir las
  complejidades de los diferentes browsers.
  Desafortunadamente con este estándar, el HTML se
  esta volviendo mucho más complejo.

33
...Fundamentos de HTML

• Características del HTML
• El lenguaje HTML es el usado actualmente para
  escribir textos hipermedia en el Web.
• Tres normas o características fundamentales del
  HTML
• 1. HTML es simplemente texto
• Lo primero es saber que un documento HTML es un
  archivo de texto simple, luego, se puede editar
  con cualquier editor de texto.
• 2. No importan los tabs, ni los saltos de línea
• Los intérpretes HTML no toman en cuenta las
  tabulaciones, los saltos de línea ni los espacios
  en blanco extra. Esto tiene ventajas y
  desventajas. La principal ventaja es que permite
  obtener resultados uniformes y de buena
  presentación de manera bastante fácil. La
  principal desventaja es que en un documento HTML,
  se deben usar los comandos ltPgt...lt/Pgt o ltBRgt para
  forzar saltos de línea.
• 3. Existen tres caracteres especiales
• lt Menor que, se usa para indicar el comienzo de
  un comando HTML.
• gt Mayor que, se usa para indicar el término de
  un comando HTML.
• Ampersand, se usa para escribir caracteres
  especiales (símbolos matemáticos, comerciales,
  así como el signo menor que y el mayor que entre
  otros) en un documento.

34
...Fundamentos de HTML
Elementos de un Documento HTML HTML permite
marcar zonas seleccionadas de texto para ser
utilizadas como títulos, encabezados, párrafos,
listas, etc., para que así cada browser
interprete estas marcas. 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
ltNombre_elementogt 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
lt/Nombre_elementogt ...marca el final de esta
zona (note que solo se le coloca el caracter
slash "/" al nombre del elemento de formato).
Existe un tipo especial de elemento llamados
vacío. Estos elementos no afectan a ningún bloque
del documento y no requieren un etiqueta de
finalización. Un ejemplo de esto lo constituye el
elemento ltHRgt
35
...Fundamentos de HTML
Estructura de un Documento HTML ltHTMLgt
ltHEADgt .
. Encabezado del Documento .
. lt/HEADgt ltBODYgt
. . Cuerpo del Documento
. . lt/BODYgt lt/HTMLgt
Zona de Etiquetas de Encabezados
Etiquetas del Cuerpo del documento
36
...Fundamentos de HTML

• Etiquetas Básicas
• Encabezados lth1gt hasta lth6gt
• Listas
• Ordenadas ltolgt ltligt Elemento 1
  lt/ligt ltligt Elemento 2 lt/ligt
  lt/olgt
• Desordenadas ltulgt ltligt Item
  lt/ligt ltligt Item lt/ligt
  lt/ulgt
• Imágenes ltIMG SRC"logo.gif" ALIGN"MIDDLE"gt
• Estilos de texto ltBgt Texto en negritas lt/Bgt
• ltIgt Texto en itálicas lt/Igt
  ltTTgt Texto tipo teletipo lt/TTgt
• Referencias a otros documentos (hiperenlaces)
• Locales ltA HREF"pagina-mia.html"gtPagina
  Míalt/Agt
• Externos ltA HREF"http//www.cnn.com/"gtCNNlt/Agt
  

37
...Fundamentos de HTML

• Tablas ltTABLEgt
• ltTRgtltTDgtCelda A1lt/TDgtltTDgtCelda
  B1lt/TDgtltTDgtCelda C1lt/TDgtlt/TRgt
• ltTRgtltTDgtCelda A2lt/TDgtltTDgtCelda
  B2lt/TDgtltTDgtCelda C2lt/TDgtlt/TRgt
• ltTRgtltTDgtCelda A3lt/TDgtltTDgtCelda
  B3lt/TDgtltTDgtCelda C3lt/TDgtlt/TRgt
• lt/TABLEgt
• Texto preformateado ltPREgt Texto
  preformateado lt/PREgt
• Centrar elementos ltcentergt ... lt/centergt
• Línea horizontal lthrgt
• Salto de línea ltbrgt
• Color y tamaño de texto ltfont colorff4466
  size3gtTextolt/fontgt
• Color de fondo ltbody bgcoloree99ffgt

38
...Fundamentos de HTML

• Formularios Estructura del formularioltFORM
  ACTION... METHOD"POST"gt
• .
• . Etiquetas de entrada de datos
• . lt/FORMgt
• Etiquetas de entrada de datos para formas
• Línea de entrada sencilla de texto ltINPUT
  TYPE"TEXT" NAME"Nombre"gt
• Varias líneas de entrada ltTEXTAREA ROWS4
  COLS50gt Texto xx lt/TEXTAREAgt
• Botón de radio ltINPUT TYPE"radio"
  NAME"encuesta" VALUE"si"gt
• Botón de chequeo ltINPUT
  TYPE"checkbox" NAMEboton_check01"gt
• Botones ltINPUT TYPEbutton" VALUE"Boton
  xx"gt ltINPUT TYPE"submit" VALUE"Enviar
  formulario"gt ltINPUT TYPE"reset" VALUE"Limpiar
  formulario"gt

39
...Fundamentos de HTML

• Ejemplo de un FormularioltH2gtEjemplo de
  Elementos de un Formulario HTMLlt/H2gt ltFORM
  ACTION"programa_cgi.pl?var1parametro1"
  METHOD"POST"gt
• Escribe tu apellido
• ltBRgtltINPUT TYPE"text" NAME"Apellido"gt
  ltBRgtSus comentarios ltBRgtltTEXTAREA
  ROWS4 COLS50gt Ingrese sus
  comentarios aquí lt/TEXTAREAgtltBRgt
  Está de acuerdo (sí o no)ltbrgt
• ltINPUT TYPE"radio" NAME"encuesta"
  VALUE"si"gtSiltBRgt
• ltINPUT TYPE"radio" NAME"encuesta"
  VALUE"no"gtNoltBRgt Escoger deportes
  ltINPUT TYPE"checkbox" NAME"interes_golf"gt
  Basketball
• ltINPUT TYPE"checkbox" NAME"interes_tenis"
  gt Tenis
• ltINPUT TYPE"checkbox" NAME"interes_squash
  "gt Baseball
• ltINPUT TYPE"checkbox" NAME"interes_natac"
  gt Natación
• ltBRgt
• ltINPUT TYPE"submit" VALUE"Enviar
  formulario!"gt ltINPUT TYPE"reset"
  VALUE"Limpiar formulario"gt lt/FORMgt

40
PARTE VI Gráficos en el Web

• Formatos Gráficos para el Web
• Consideraciones y consejos al usar gráficos
• Herramientas para gráficos

41
... Gráficos en el Web
Formatos Gráficos para el Web Existen
numerosos formatos para archivos gráficos.
Algunos son PICT, GIF, TIFF, PNG, EPS, BMP, PCX,
JPEG. Al igual que HTML, estos formatos son
independientes de la plataforma de Hardware y
software donde se vayan a mostrar (Macintosh,
Linux, Solaris, Windows95, etc). 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)
Formato Graphics Interchange Format Joint
Pictures Expert Group
Abreviatura GIF JPEG
Extensión gif jpg, jpeg
GIF JPG GIF JPG GIF
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).
42
... Gráficos en el Web

• Consideraciones y consejos al usar gráficos
• 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.

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

44
PARTE VII Ejercicios Prácticos de Diseño de
Páginas

• Editando el Código HTML directamente
• Primer documento HTML
• Modificando un documento HTML
• Editando gráficos para el Web
• Diseñando un Home page con Adobe Photoshop
• Usando un Editor HTML Netscape Composer
• Configuración, Menús y utilidades
• Editando y publicando páginas con Composer
• Ejercicio Práctico

45
... Ejercicios Prácticos de Diseño de Páginas

• Editando el Código HTML

46
... 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
• ltHTMLgtltHEADgt
• ltTITLEgtMi primera página HTMLlt/TITLEgt
• lt/HEADgt
• ltBODYgtltPgtEsta es la primera página
• HTML que edito !
• lt/Pgtlt/BODYgt
• lt/HTMLgt
• 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!

47
... Ejercicios Prácticos de Diseño de Páginas

• Modificando un documento HTML Usando el editor
  de texto escogido, agregue lo siguiente (entre
  las etiquetas ltPgt y lt/Pgt) al documento que esta
  editando
• ltH1gt Este es un encabezado grandelt/H1gt
• ltH3gt Este es un encabezado más pequeño lt/H3gt
• Grabe el archivo y presione el botón de reload o
  refresh de su navegador. Los cambios serán
  inmediatamente visibles en su navegador.

48
... Ejercicios Prácticos de Diseño de Páginas

• Editando gráficos para el Web

49
... Ejercicios Prácticos de Diseño de Páginas
Diseñando un Home Page con Photoshop
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í
50
... Ejercicios Prácticos de Diseño de Páginas

• Usando un Editor HTML Netscape Composer

51
... Ejercicios Prácticos de Diseño de Páginas

• Configuración, menus y utilidades Composer
  Preferencias

• Configuración de
• Apariencia
• Navegación
• Correo electrónico
• Composer
• Aspectos avanzados

52
... Ejercicios Prácticos de Diseño de Páginas
...Configuración, menus y utilidades Barra de
Menu del Netscape Composer Permite ejecutar
todas las tareas básicas del editor, ya sea con
menús o iconos
Chequeo de ortografía
Cortar, copiar y pegar en clipboard (texto o
imágenes)
Opciones para tablas
Vista previa de documento HTML
Insertar separador Horizontal
Insertar imagen
Opciones de publicación en un servidor
Insertar objetivo para hiperenlace
Guardar documento editado
Insertar hiperenlace
Abrir un documento HTML existente
Buscar dentro del documento
Crear nuevo documento HTML
Imprimir documento
53
... Ejercicios Prácticos de Diseño de Páginas
Editando y publicando páginas con Netscape
Composer

• Ejercicio Usando el Netscape Composer y los
  archivos proporcionados, crear una página
  parecida a la diseñada en el ejercicio anterior
• Técnicas que se pueden-deben usar
• HTML
• Frames
• Tablas
• Formas electrónicas
• Hojas de Estilos
• JavaScript

54
... Ejercicios Prácticos de Diseño de Páginas
Editando y publicando páginas con Netscape
Composer

• Ejercicio Usando el Netscape Composer y los
  archivos proporcionados, crear una página
  parecida a la que se muestra en la siguiente
  imagen
• Técnicas que se pueden-deben usar
• HTML
• Frames
• Tablas
• Formas electrónicas
• Hojas de Estilos
• JavaScript

55
Referencias

• Beginner's Guide to HTML
  http//www.ncsa.uiuc.edu/General/Internet/WWW/HTML
  Primer.html
• Guía para el diseño de Páginas en Internet
  http//www.geocities.com/SiliconValley/Heights/177
  9/
• Yale Web Style Manual http//info.med.yale
  .edu/caim/manual/
• Creating Killer Web Sites
  http//www.killersites.com/core.html
• Jakob Nielsen's Website
  http//www.useit.com/
• WebMasters World http//www.dezine.net/sc
  /world/index.shtml

56
www.cecalc.ula.ve
Gracias por su asistencia y atención !

• Comunicar cualquier duda, pregunta o sugerencia
  al instructor, Rodrigo Torréns, por cualquiera de
  los siguientes medios
• Telefono 074-524192
• e-mail torrens_at_cecalc.ula.ve