Presentacion Diseño Web

Diseño Web con Macromedia Ing. María Nícida Malca Quispe Docente EPCI - FACFyM [email_address]

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

Sitio Web

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

...Continuación 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.

Clasificación de Sitios Web

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 )

Estándares de la WWW

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

Diseño 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.

Diseño Gráfico en la 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.

...Continuación

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)

...Continuación

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

Notepad, Macromedia HomeSite, UltraEdit, HotDog

Edición de Sitios Web

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

Macromedia Flash

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

...Continuación

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:

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

...Continuación

El archivo FLA se componen de cuatro partes principales:

...Continuación 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

...Continuación

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

Macromedia Dreamweaver

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.

...Continuación

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

...Continuación

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.