• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Presentacion Diseño Web
 

Presentacion Diseño Web

on

  • 4,949 views

 

Statistics

Views

Total Views
4,949
Views on SlideShare
4,891
Embed Views
58

Actions

Likes
3
Downloads
119
Comments
1

7 Embeds 58

http://www.slideshare.net 17
http://desarrolloweblog.wordpress.com 13
http://disenaycrea.blogspot.mx 10
http://disenaycrea.blogspot.com 7
http://papw1.blogspot.com.es 7
http://disenaycrea.blogspot.com.es 3
http://papw1.blogspot.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • muy bien tesacas un 10
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Presentacion Diseño Web Presentacion Diseño Web Presentation Transcript

    • 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.
      • 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
      Aplicaciones de Internet Ricas (Rich Internet Applications, RIA)
    • Muchas Gracias...