nmalca@hotmail.com

• Conjunto de páginas web, típicamente comunes a un dominio o subdominio de Internet, referidas a una misma unidad temática.

• Página web: Documento hipermedia, accesible mediante el protocolo HTTP. Incluye texto, imágenes y enlaces hacia otros documentos de la red; además de animaciones, sonidos, y cualquier otro tipo de documento, por medio de plugins y otras tecnologías.

• Las páginas web tienden a ser más dinámicas, tal que el visitante se interrelacione con ellas mediante menús interactivos, encuestas, votaciones, etc.

• Las páginas web son desarrolladas en HTML (HyperText Markup Language), o dinámicamente convertidas a éste, y se acceden usando un programa llamado navegador web (cliente HTTP).

• Un sitio web está alojado en un computador (host) llamado servidor web, (servidor HTTP).

• Servidor HTTP, también se refiere al software que ejecuta este sistema, y que recupera y entrega las páginas web en respuesta a peticiones desde el sitio web del usuario.

• Servidores HTTP más comunes: Apache, Internet Information Services (IIS) de Microsoft

Solicitud HTTP

Documento HTML

Obtención del documento

Procesamiento de comandos

Despliegue en el cliente

• Sitio web estático: Tiene contenido que no se espera cambie frecuentemente, y se mantiene manualmente por alguna persona o personas que usan algún tipo de programa editor.

• Sitio web dinámico: Presenta cambios frecuentes en la información. Cuando el servidor web recibe una petición para una determinada página, ésta se genera automáticamente como respuesta directa a la petición. Incluyen contenido que se recupera de bases de datos.

– Se crean con diversas tecnologías disponibles: Active Server Pages (ASP), Java Server Pages (JSP), el lenguaje de programación PHP (PHP: Hypertext Preprocessor).

• World Wide Web Consortium: Llamado W3C,es una organización que produce estándares (recomendaciones) para la World Wide Web (www.w3c.org)

• Estas recomendaciones, en su mayoría son acogidas por los fabricantes de herramientas (navegadores, editores, buscadores) y tecnologías (servicios Web, directorios, registros).

• La creación de estándares abiertos es crucial, pues de ella depende que ningún fabricante alcance nunca el monopolio de explotación de la Web.

• Algunas importantes recomendaciones son:– HTML, HypertText Markup Language (www.w3.org/MarkUp/) – CSS, Cascading Style Sheets (www.w3.org/Style/CSS/) – SOAP, Simple Object Access Protocol (www.w3.org/2002/ws/)– XML, Extensible Markup Language (www.w3.org/XML/)– XHTML, Extensible Hypertext Markup Language (www.w3.org/TR/xhtml1)

• Actividad que consiste en la planificación, diseño e implementación de sitios web.

Diseño Web

Navegabilidad

Interactividad

Usabilidad

Arquitectura de la información

Interacción de medios( audio, texto, imagen, vídeo)

• Fundamentos:– Utilización correcta de los estándares establecidos por el W3C

(HTML)– Web semántica: Apuesta por separar totalmente el contenido del

documento, de la visualización (uso de CSS)

• El diseño de páginas web es una amplia área de aplicación del diseño gráfico, que integra:– Conocimientos propios del diseño como: la composición, el uso de color y la

tipografía– Conocimientos técnicos del medio como: HTML y CSS – Conocimientos sobre usabilidad, accesibilidad y organización de un sitio web.

• Limitantes del Medio de Despliegue: Internet– El ancho de banda de las conexiones de los usuarios:

Factor clave en la velocidad de visualización. Los elementos gráficos, suelen traducirse en archivos de bastante peso, según su tamaño y formato. De este modo, páginas con muchas imágenes, o pocas pero de gran tamaño, tardan mucho tiempo en ser descargadas desde el servidor web y presentadas en el navegador.El tiempo máximo de una persona en esperar la descarga de una página suele ser de unos 10 segundos.

– Los navegadores web: La ventana rectangular, con medidas concretas (según la resolución empleada por el usuario en su monitor), forma particular de presentar el contenido de las páginas e interpretación de colores variante según el computador usado, el sistema operativo, el monitor y la tarjeta gráfica.Buscar siempre que las páginas sean visualizadas correctamente por el mayor número de usuarios, para ello se debe trabajar a la vez con varios navegadores.

– Estilo estandarizado: Pero con distinta funcionalidad, para los elementos y características de las páginas web.

– Estándares y tecnologías disponibles: Lo que hace que el diseñador web tenga que estar siempre pensando si la interfase que está diseñando gráficamente va a poder ser luego construida.

– Ocultamiento de una serie de procesos complejos: Que se ejecutan al ser visualizadas o solicitar las páginas, sin que el usuario sea consciente de ellos (ejecución de códigos de lenguajes de programación tanto en cliente como en servidor, acceso a BD, etc.), que añaden tiempo a su presentación, y que muchas veces suelen afectar de forma importante al diseño de estas, ya que el diseñador no sabe de antemano qué contenidos concretos van a tener.

• Tecnologías – Animaciones Multimedia: Macromedia Flash

– Creación y Edición de Imágenes: Corel (Draw., PhotoPaint), Adobe (Ilustrador, PhotoShop), Macromedia (Freehand, FireWorks)

• Editores HTML/Texto: Manipulación directa del código HTML

– Notepad, Macromedia HomeSite, UltraEdit, HotDog

• Editores WYSIWYG: “What You See Is What You Get”– Adobe GoLive, Macromedia Dreamweaver, Microsoft Frontpage, Mozilla

Composer, Netscape Composer

• Lenguajes de programación del lado del servidor, para generar las páginas web – ASP.NET, JSP, PHP, Perl

• Un sistema CMS (Web Content Management System) que permite separar el contenido del diseño, generando solamente las plantillas, tal que el contenido sea administrado en un área separada. – PhpNuke, Plone, Mambo

• Animación: Simulación de movimiento producida mediante imágenes que se crean individualmente; al proyectarse sucesivamente estas imágenes (cuadros) se produce una ilusión de movimiento.

– Formatos más conocidos: SWF, GIF

• Tipos de gráficos:– Vectoriales o Modelado Geométrico:

La imagen se representa por medio de "trazos", es decir, por primitivas geométricas (puntos, líneas, curvas o polígonos).

Formatos más conocidos: SWF, WMF, CDR

Pueden ser escalados, rotados o deformados, sin perder su calidad.

Requieren menor espacio en disco que un bitmap, se representan mediante fórmulas matemáticas

Algunos formatos permiten animación, a través de operaciones básicas: traslación o rotación

No son aptos para mostrar fotografías o imágenes complejas

Deben ser procesados: calcular los datos para formar la imagen final.

– Mapas de bits o Gráficos Rasterizados: Formados por una cuadrícula de píxeles.

Formatos más conocidos: BMP, JPG, GIF, TIFF, PNG

• En las animaciones hechas con gráficos vectoriales y con modelos tridimensionales el software mismo calcula la transformación de una pose a otra.

• Macromedia Flash – Suite Macromedia Studio 8.0: Flash, Dreamweaver, Fireworks,

Freehand– Flash Professional y Flash Basic – Se refiere tanto al programa de edición multimedia como al

reproductor Macromedia Flash Player, que utiliza gráficos vectoriales e imágenes de mapa de bits, sonido, código de programa, flujo de vídeo y audio bidireccional (el flujo de subida sólo está disponible si se usa conjuntamente con Macromedia Flash Communication Server), para crear presentaciones, aplicaciones y otro tipo de contenido que permite la interacción del usuario

• Macromedia Flash es el entorno para editar una amplia variedad de contenido interactivo y, Flash Player es el programa de máquina virtual utilizado para ejecutar los archivos Flash.

• Los fragmentos independientes de contenido creados con Flash se denominan aplicaciones, aunque se trate solamente de una animación básica

• Los archivos de Flash tienen el formato SWF (ShockWave Flash), no editables, son una compilación y compresión del archivo editable FLA.

– Al compilar el archivo FLA, se junta la película con el código para generar el archivo SWF, crear el ejecutable o exportarlo de varias maneras: como página HTML, PNG, JPG, GIF

• El formato SWF crea archivos de reducido tamaño pero de gran calidad que permita interactividad.

• Los archivos SWF pueden ser ejecutados por el reproductor Macromedia Flash Player, tanto en formato plugin de un navegador o como aplicación autónoma.

• El plugin para reproducir archivos SWF está disponible para diferentes navegadores y plataformas operativas (Microsoft Windows, Apple Macintosh, Linux).

• Para crear una aplicación en Flash:– Se crean gráficos con las herramientas de dibujo– Se importan elementos multimedia adicionales al documento de Flash. – Se determina cómo y cuándo se utilizarán cada uno de esos elementos para

crear la aplicación – Finalizada la aplicación, se publica, lo que crea una versión comprimida del

archivo con la extensión SWF.

• El archivo FLA se componen de cuatro partes principales:

Líneas de tiempo

Escenario

Panel de Biblioteca

ActionScript

• Algunos tipos de aplicaciones que se pueden generar:– Animaciones: anuncios publicitarios, tarjetas de felicitación en línea,

dibujos animados– Juegos: Normalmente combinan las capacidades de animación con las

capacidades lógicas de ActionScript– Creación Sitios Web multimedia: cursos en línea, aplicaciones de

entretenimiento– Desarrollo de Aplicaciones de Internet Ricas (RIA): – Crear elementos multimedia e interactivos (botones, menús, barras de

navegación, formularios, complejas interfaces de usuario) para Internet.

• Entorno de Desarrollo:– Integra los flotadores (ventanas de herramientas): colores,

componentes (especie de movieClips, pre-construidos, de varios tipos)• Descargas:

– www.macromedia.com– www.macromedia.com/es/downloads

• Editor WYSIWYG para la creación de sitios y aplicaciones web más utilizado

• Combinación eficaz de herramientas visuales de diseño, funciones de desarrollo de aplicaciones y soporte de edición de código, que permite crear de forma rápida sitios y aplicaciones visualmente atractivos y basados en las estándares de la W3C

– Combina facilidad de uso y poder en un entorno de desarrollo integral para sitios Web en HTML, XHTML, ASP, ASP.NET, JSP y PHP.

– Control total sobre el código y el diseño a través de herramientas de armado de gran precisión y características de codificación avanzada: sugerencias automáticas del código (autocompletar), editores de etiquetas, coloreado del código, selectores de etiquetas, validación del código.

– Posibilidad de separar el contenido del diseño: Compatibilidad para el diseño basado en CSS

– Incluye plantillas de página y código preconstruidos: estructuras de sitios, formularios, plantillas accesibles y funciones de JavaScript (interactividad del lado del cliente)

– El espacio de trabajo integral, similar al de Macromedia Flash y Fireworks, incluye ventanas de documento con cejas, grupos de paneles embonables, barras de herramientas personalizables y exploración de archivos integrada; creando versiones personalizadas, según los distintos niveles de destreza del usuario.

– División de la pantalla: código y diseño– Quick Tag Editor: Integra el código HTML directamente en el entorno de diseño visual

• Total integración con las aplicaciones del paquete Macromedia: Flash, Fireworks

– Ahorra tiempo y trabajo al optimizar los gráficos web con Fireworks sin necesidad de salir del programa.

– Soporte para animación• Soporte de archivos de Microsoft Office, incluyéndose el comando Limpiar

HTML de Word.– Permite importar fácilmente aplicaciones desde Excel, beneficiándose

ampliamente la edición visual de tablas

• Herramienta Design Notes: Facilita la colaboración entre miembros de un mismo grupo de desarrollo. Permite “colgar” en cualquier página web en proceso de desarrollo, anotaciones de interés sobre el sitio a través de un archivo XML

• Gran poder de ampliación y personalización, puesto que sus rutinas (como inserción de hipervínculos, imágenes o añadir un comportamiento) están hechas en Javascript.

• Se puede utilizar Dreamweaver con la tecnología de servidor que se prefiera, para crear potentes aplicaciones de Internet que conecten a los usuarios con bases de datos, servicios web y otros sistemas.

• Posee:– Un administrador de sitios, para agrupar los archivos según el proyecto al que pertenezcan.– Un cliente FTP integrado, que permite subir los archivos editados inmediatamente al sitio en

Internet.

• Nuevo paradigma de desarrollo de aplicaciones web• Llamadas también Aplicaciones Dinámicas de Internet • Aprovechamiento de la experiencia del usuario en herramientas y funciones de

escritorio tan naturales como copiar, cortar y pegar, redimensionar columnas, ordenar, etc., con el alcance y la flexibilidad de presentación y despliegue que ofrecen las páginas web junto con lo mejor de la multimedia (voz, vídeo, etc.).

• Aplicaciones que proporcionan una elaborada interfaz de usuario para mostrar y manipular datos almacenados de forma remota a través de Internet.

• Una RIA podría ser: una aplicación de búsqueda de precios, un catálogo de compra, una aplicación de educación y evaluaciones, o cualquier otra aplicación que presente datos remotos con una completa interfaz desde el punto de vista gráfico.

• Soluciones tecnológicas en términos de dos características:– Riqueza: Habilidad para incorporar interactividad e interfaces de usuario

intuitivas en el cliente– Alcance: Habilidad de la aplicación para estar disponible para cualquier usuario

en el lugar del planeta en el que éste se encuentre.• El nuevo paradigma necesita de una nueva plataforma, un nuevo estándar para darle

consistencia y factibilidad: la plataforma Flash