Your SlideShare is downloading. ×
Presentacion Diseño Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Presentacion Diseño Web

3,810

Published on

Published in: Technology, Design
1 Comment
3 Likes
Statistics
Notes
  • muy bien tesacas un 10
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,810
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
129
Comments
1
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Diseño Web con Macromedia Ing. María Nícida Malca Quispe Docente EPCI - FACFyM [email_address]
  • 2.
    • 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.
  • 3.
    • 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
  • 4.
    • 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).
  • 5.
    • 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
  • 6.
    • 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)
  • 7.
    • 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.
  • 8. ...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.
  • 9.
    • 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
  • 10.
    • 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
  • 11.
    • 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.
  • 12.
    • 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
  • 13.
    • 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
  • 14.
    • El archivo FLA se componen de cuatro partes principales:
    ...Continuación Líneas de tiempo Escenario Panel de Biblioteca ActionScript
  • 15.
    • 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
  • 16.
    • Editor WYSIWYG para la creación de sitios y aplicaciones web más utilizado
    Macromedia Dreamweaver
  • 17.
    • 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
  • 18.
    • 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.
  • 19.
    • 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)
  • 20. Muchas Gracias...

×