Centro de Cálculo Científico de la Universidad de Los Andes Mérida Venezuela



Descargar 56,39 Kb.
Fecha de conversión14.05.2017
Tamaño56,39 Kb.
  • Diseño Básico
  • de
  • Sitios Web
  • Ing. Rodrigo Torréns H.
  • Noviembre 1999
  • www.cecalc.ula.ve www.hacer.ula.ve

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
  • Anexos 68
  • 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 67

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: URL’s
  • Tipos de documentos, extensiones de Archivos

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.

...Introducción - Aspectos Básicos

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

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

...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
  • URL’s
  • Java, JavaScript, VBScript
  • Programas CGI, Perl

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

...Introducción - Aspectos Básicos

  • Cliente solicita documento
  • http
  • Servidor envía documento (HTML, video, sonido...)
  • Cliente
  • 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.

...Introducción - Aspectos Básicos

  • Direccionando Documentos: URL’s (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.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.

...Introducción - Aspectos Básicos

  • ...Direccionando Documentos: URL’s (Uniform Resource Locators)
  • Ejemplos de URL’s válidos - URL’s Absolutos y Relativos:
  • 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
  • ./../../
  • /

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

PARTE II: Lenguajes y tecnologías para el Web

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.

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

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

... Arquitectura de la Información

  • "Piramide" de Necesidades para construir un sitio Web:
  • Sitio Web
  • Arquitectura Navegacional
  • Arquitectura Estructural
  • Arquitectura Funcional

... Arquitectura de la Información

  • Necesidades mínimas:

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

... Arquitectura de la Información

  • ...Modelos y Metodologías de desarrollo para el Web:
  • Niveles de un WIS
  • Cómo la información es presentada
  • Como esta organizada la información físicamente (almacenamiento, aplicaciones)
  • Transforma la información guardada en una BD o en el servidor Web en lo que el usuario finalmente ve
  • Nivel de Presentación
  • Nivel Lógico
  • Nivel de Almacenamiento

... Arquitectura de la Información

  • ...Modelos y Metodologías de desarrollo para el Web:
  • Ejemplo: Diagrama E-R en RMM
  • URL
  • Curso
  • TecEduc
  • Estudiante
  • Profesor
  • Postgrado
  • Evento
  • Investigador
  • LineaInvest
  • Personal
  • Instructor
  • Publicación
  • ofrece
  • dicta
  • desarrolla
  • emplea
  • Encargado_de
  • publica
  • toma
  • publica
  • utiliza
  • Utilizada por
  • utiliza
  • participa
  • publica
  • pertenece
  • Asociado_a

... Arquitectura de la Información

  • ...Modelos y Metodologías de desarrollo para el Web:
  • Ejemplo: Diagrama Navegacional RMM
  • URL
  • Curso
  • TecEduc
  • Profesor
  • Publicación
  • Personal
  • PORTAL CURSOS
  • Indice cursos
  • Indice profs.
  • Indice datos prof
  • Indice encargados Tec Educ
  • Indice pubXprof
  • Indice URLsXcursos
  • Indice URLs
  • Indice guia estudio
  • Indice Tec EducXCurso

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

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

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.

...Requerimientos y Aspectos Técnicos

  • Maneras de Producir Documentos HTML
  • 1 Escribiendo el código HTML
  • 2 Utilizando editores HTML
  • 3 Utilizando herramientas de conversión de formato

...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
  • 1
  • Escribiendo el Código HTML

...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
  • 2
  • Utilizando editores HTML

...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
  • 3
  • Utilizando Herramientas de Conversión de Formato

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

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

    and

    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.

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

...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
  • Loprimero 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
    ...
    o
    para forzar saltos de línea.
  • 3. Existen tres caracteres especiales
  • < Menor que, se usa para indicar el comienzo de un comando HTML.
  • > 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.

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

...Fundamentos de HTML

  • Estructura de un Documento HTML
      • .
      • .
      • Encabezado del Documento
      • .
      • .
      • .
      • .
      • Cuerpo del Documento
      • .
      • .


La base de datos está protegida por derechos de autor ©absta.info 2016
enviar mensaje

    Página principal