El nuevo diseñador
¿Qué tipo de página necesita el cliente? Experiencias Sólo un 10% puede hacer “experiencias” Más creatividad que código Páginas Web 80% de las personas que desarrollan páginas web, se encuentra en este sector Es un  commodity Aplicaciones Sólo un 10% puede hacer “aplicaciones” Es más código que creatividad
¿Qué tipo de página necesita el cliente? Experiencias Son páginas con animaciones complejas. Por lo general involucran sonido, video y mucha programación Ejemplos: Páginas de películas Páginas Web Las páginas son estáticas No hay uso de lenguajes “complejos” ni de base de datos. Ejemplos: Cualquier página estática Aplicaciones Están basadas en el proceso de datos y base de datos Ejemplos: Sistemas de reservaciones Inscripción y pago de alumnos Carritos de compras
¿Qué tipo de página necesita el cliente? En ocasiones la página que “quiere” el cliente, no es el tipo de página que “necesita” el cliente, ni la que quiere “pagar” el cliente. Como plan de carrera, ¿qué tipo de páginas quieres hacer?
El choque de dos mundos Desarrolladores Diseñadores Desarrolladores
Ejemplos: Actualmente solicitamos un Diseñador Web con experiencias técnica en las siguientes herramientas Java HTML JSP Servlets JavaScript SQL Para realizar el Desarrollo Web  Solicitamos Diseñador web con los siguientes conocimientos: *Plataforma de diseño: adobe web studio cs3 (dreamweaver, flash, photoshop, ilustrator) *Lenguaje de Programación de estilos CSS (Muy importante) *PHP/MySQL, *action script *Conocimientos de soporte técnico…
El “nuevo” diseñador Según Adobe, el “nuevo” diseñador debe ser: 1/3 parte: Diseñador 1/3 parte: Programador 1/3 parte: Asesino en serie
Definición de los requerimientos de un  proyecto
Pregunta ¿Por qué hacemos páginas de Internet?
1.1 Identificar el propósito, audiencia y las necesidades del público de sitio Web Al comenzar un proyecto es importante que el contenido desarrollado en Adobe Flash, tenga mensajes eficaces y use los medios apropiados de comunicación.  Esto se basa en  la audiencia:  su identificación permite clarificar  el propósito  del proyecto, para ello es bueno que sigamos los siguientes principios:
1.1 Identificar el propósito, audiencia, y las necesidades del público de sitio Web La planeación y elaboración del diseño siempre debe estar centrada y pensada en el propósito de comunicación. Se diseña pensando en el usuario —conocido también como el público final. Como diseñadores de páginas web, por lo general nos encontramos entre “el cliente” y “el usuario”.
Pregunta Cuando desarrollamos una página web, ¿quién es más importante, el “cliente” o el “usuario”?
1.1 Identificar el propósito, audiencia, y las necesidades del público de sitio Web Usted debe conocer a su público, y saber: si es una población grande, quiénes son, de dónde vienen, cuáles son sus metas y cuáles son los obstáculos que puedan encontrar para acceder a su contenido de Flash ( accesibilidad ).
1.1 Identificar el propósito, audiencia, y las necesidades del público de sitio Web Algunas variables a considerar son: –  El  idioma  que hablan ó que manejan, cómo se comunica uno con ellos, cómo se les puede informar, dependiendo de sus hábitos y costumbres. –  Los  impedimentos  son un factor importante por considerar, hay que facilitar el acceso al sitio –  Los  intereses  son de suma importancia, ya que de acuerdo a éstos se diseña y consulta el sitio web. –  La  experiencia con la tecnología  que tenga el público es muy importante, pues el sitio debe ser de fácil acceso incluso para personas con poca experiencia, esto mantendrá el interés sobre el contenido del sitio. Si el público no tiene experiencia con la tecnología y se encuentra con díficultades, es probable que no intenten de nuevo entrar o usar el sitio.
Ejercicio Entra a las siguientes páginas e identifica sus “usuario” o “audiencia”: http://www.cartoonnetwork.com.mx/ http://www.tokyoplastic.com/ http://www.banamex.com/
Identificar el contenido
1.2 Identificar que el contenido del sitio sea relevante para su propósito y apropiado para la audiencia objetivo Cuando trabajamos con un sitio es determinante darle ciertas características acordes con los  propósitos  del cliente.  Una buena técnica, cuando comenzamos a trabajar, es usar preguntas para estructurar el esfuerzo: ¿Cuál es el propósito principal de su página? ¿Esto es para una página web corporativa, una aplicación de software, un sitio de entretenimiento, un juego o para uso personal?
1.2 Identificar el contenido del sitio Esto se debe preguntar para cada tipo de página Web que desarrollemos. Considere diferentes factores tecnológicos, gráficos y de usabilidad.
1.2 Identificar el contenido del sitio Coherencia Al diseñar el contenido de su página, crear un diseño coherente, combinación de colores y sistema de navegación.  Por ejemplo, utiliza el mismo estilo de botón y el sistema de menús para todas las páginas de su sitio web.
Ejercicio Las siguientes páginas, ¿te parecen “coherente” el contenido con su audiencia y su diseño? http://www.cartoonnetwork.com.mx/ http://www.tokyoplastic.com/ http://www.banamex.com/
1.2 Identificar el contenido del sitio Algunas consideraciones de tecnología Al comenzar a crear contenido para un sitio, o para un dispositivo móvil, es importante considerar requerimientos del sistema para generar un producto de alta calidad:
1.2 Identificar el contenido del sitio Qué tipo de computadora contará el usuario (velocidad, resolución, etc). También existe la opción de exportar la presentación flash como archivo de vídeo y luego convertirla con el software para que constituya una presentación en DVD. En el caso de contenido para dispositivos móviles es bueno considerar que el estándar inicial para estos dispositivos es de 320 x 240. La mayoría de los teléfonos celulares pueden reproducir esta resolución.
1.3 Accesibilidad
1.3 Accesibilidad Es importante que al trabajar contenido multimedia en Flash pensemos cómo podemos hacer accesible dicho contenido a las personas con discapacidades visuales, motrices, auditivos o con otros impedimentos. Éstas son algunos ayudas que podemos dar para que el contenido de su Web sea más accesible para las personas con capacidades diferentes:
1.3 Accesibilidad Presente la información adecuada para los “lectores de pantalla”. Las personas con discapacidad visual utilizan el software lector que “lee” en audio el contenido la pantalla.  En las películas de Flash, puede decidir qué objetos de la película será leído por lectores de pantalla.
1.3 Accesibilidad Estructure el texto e imágenes en diferentes tamaños. Algunos de los visitantes pueden tener dificultades para leer texto o ver pequeños gráficos. Permita que los usuarios puedan hacer zoom en estos elementos, con las ventajas que tienen los gráficos vectoriales de ser escalables al pertenecer a archivos SWF.
1.3 Accesibilidad Incluya narración de audio. Considere la posibilidad de ofrecer una narración de audio para los visitantes sin un lector de pantalla. Si los lectores de pantalla no está disponibles, el audio podría ser la descripción de los videos.
1.3 Accesibilidad Proporcione subtítulos en las narraciones de audio. Algunos visitantes podrían no tener la capacidad de escuchar la narración de su sitio Web.  Considere la posibilidad de ofrecer títulos para estos visitantes.
1.3 Accesibilidad No se base en un solo color para transmitir información. Puede haber visitantes daltónicos.  Si se basa en el color para comunicar, anexe un texto que clarifique el funcionamiento de la pieza, aún en ausencia del color.
1.3 Accesibilidad Flash contiene una serie de objetos que son accesibles de forma predeterminada en las películas y que se incluyen en la información de Flash Player para los programas lectores de pantalla, entre ellos: –  Textos estáticos –  Los campos de texto de entrada –  Botones –  Los clips de película
1.3 Accesibilidad Con el panel  Accesibilidad , puede activar o desactivar la accesibilidad de toda la película o de objetos seleccionados.
1.3 Accesibilidad Algunas buenas prácticas en la elaboración de objetos accesibles –  Es recomendable proporcionar para cada objeto un nombre distintivo y una descripción, excepto a los textos. Puesto que el texto es leído por lectores de pantalla, no son necesarias las descripciones. –  Agregue etiquetas descriptivas a los botones, como se menciona en la opción siguiente o en la anterior.
1.3 Accesibilidad - Agregar etiquetas y descripciones a clips de película para describir el contenido de la animación que no se explica en el texto de la página. –  No duplique el contenido del audio. En particular, si se utiliza audio, desactive la accesibilidad para cualquier texto que duplique el contenido de audio.
1.3 Accesibilidad –  Permita que los visitantes puedan tener acceso a las diferentes secciones del sitio con flechas hacia adelante y atrás. –  Asegúrese de que los visitantes pueden moverse a través de su sitio Web utilizando el teclado.

Primera clase

  • 1.
  • 2.
    ¿Qué tipo depágina necesita el cliente? Experiencias Sólo un 10% puede hacer “experiencias” Más creatividad que código Páginas Web 80% de las personas que desarrollan páginas web, se encuentra en este sector Es un commodity Aplicaciones Sólo un 10% puede hacer “aplicaciones” Es más código que creatividad
  • 3.
    ¿Qué tipo depágina necesita el cliente? Experiencias Son páginas con animaciones complejas. Por lo general involucran sonido, video y mucha programación Ejemplos: Páginas de películas Páginas Web Las páginas son estáticas No hay uso de lenguajes “complejos” ni de base de datos. Ejemplos: Cualquier página estática Aplicaciones Están basadas en el proceso de datos y base de datos Ejemplos: Sistemas de reservaciones Inscripción y pago de alumnos Carritos de compras
  • 4.
    ¿Qué tipo depágina necesita el cliente? En ocasiones la página que “quiere” el cliente, no es el tipo de página que “necesita” el cliente, ni la que quiere “pagar” el cliente. Como plan de carrera, ¿qué tipo de páginas quieres hacer?
  • 5.
    El choque dedos mundos Desarrolladores Diseñadores Desarrolladores
  • 6.
    Ejemplos: Actualmente solicitamosun Diseñador Web con experiencias técnica en las siguientes herramientas Java HTML JSP Servlets JavaScript SQL Para realizar el Desarrollo Web Solicitamos Diseñador web con los siguientes conocimientos: *Plataforma de diseño: adobe web studio cs3 (dreamweaver, flash, photoshop, ilustrator) *Lenguaje de Programación de estilos CSS (Muy importante) *PHP/MySQL, *action script *Conocimientos de soporte técnico…
  • 7.
    El “nuevo” diseñadorSegún Adobe, el “nuevo” diseñador debe ser: 1/3 parte: Diseñador 1/3 parte: Programador 1/3 parte: Asesino en serie
  • 8.
    Definición de losrequerimientos de un proyecto
  • 9.
    Pregunta ¿Por quéhacemos páginas de Internet?
  • 10.
    1.1 Identificar elpropósito, audiencia y las necesidades del público de sitio Web Al comenzar un proyecto es importante que el contenido desarrollado en Adobe Flash, tenga mensajes eficaces y use los medios apropiados de comunicación. Esto se basa en la audiencia: su identificación permite clarificar el propósito del proyecto, para ello es bueno que sigamos los siguientes principios:
  • 11.
    1.1 Identificar elpropósito, audiencia, y las necesidades del público de sitio Web La planeación y elaboración del diseño siempre debe estar centrada y pensada en el propósito de comunicación. Se diseña pensando en el usuario —conocido también como el público final. Como diseñadores de páginas web, por lo general nos encontramos entre “el cliente” y “el usuario”.
  • 12.
    Pregunta Cuando desarrollamosuna página web, ¿quién es más importante, el “cliente” o el “usuario”?
  • 13.
    1.1 Identificar elpropósito, audiencia, y las necesidades del público de sitio Web Usted debe conocer a su público, y saber: si es una población grande, quiénes son, de dónde vienen, cuáles son sus metas y cuáles son los obstáculos que puedan encontrar para acceder a su contenido de Flash ( accesibilidad ).
  • 14.
    1.1 Identificar elpropósito, audiencia, y las necesidades del público de sitio Web Algunas variables a considerar son: – El idioma que hablan ó que manejan, cómo se comunica uno con ellos, cómo se les puede informar, dependiendo de sus hábitos y costumbres. – Los impedimentos son un factor importante por considerar, hay que facilitar el acceso al sitio – Los intereses son de suma importancia, ya que de acuerdo a éstos se diseña y consulta el sitio web. – La experiencia con la tecnología que tenga el público es muy importante, pues el sitio debe ser de fácil acceso incluso para personas con poca experiencia, esto mantendrá el interés sobre el contenido del sitio. Si el público no tiene experiencia con la tecnología y se encuentra con díficultades, es probable que no intenten de nuevo entrar o usar el sitio.
  • 15.
    Ejercicio Entra alas siguientes páginas e identifica sus “usuario” o “audiencia”: http://www.cartoonnetwork.com.mx/ http://www.tokyoplastic.com/ http://www.banamex.com/
  • 16.
  • 17.
    1.2 Identificar queel contenido del sitio sea relevante para su propósito y apropiado para la audiencia objetivo Cuando trabajamos con un sitio es determinante darle ciertas características acordes con los propósitos del cliente. Una buena técnica, cuando comenzamos a trabajar, es usar preguntas para estructurar el esfuerzo: ¿Cuál es el propósito principal de su página? ¿Esto es para una página web corporativa, una aplicación de software, un sitio de entretenimiento, un juego o para uso personal?
  • 18.
    1.2 Identificar elcontenido del sitio Esto se debe preguntar para cada tipo de página Web que desarrollemos. Considere diferentes factores tecnológicos, gráficos y de usabilidad.
  • 19.
    1.2 Identificar elcontenido del sitio Coherencia Al diseñar el contenido de su página, crear un diseño coherente, combinación de colores y sistema de navegación. Por ejemplo, utiliza el mismo estilo de botón y el sistema de menús para todas las páginas de su sitio web.
  • 20.
    Ejercicio Las siguientespáginas, ¿te parecen “coherente” el contenido con su audiencia y su diseño? http://www.cartoonnetwork.com.mx/ http://www.tokyoplastic.com/ http://www.banamex.com/
  • 21.
    1.2 Identificar elcontenido del sitio Algunas consideraciones de tecnología Al comenzar a crear contenido para un sitio, o para un dispositivo móvil, es importante considerar requerimientos del sistema para generar un producto de alta calidad:
  • 22.
    1.2 Identificar elcontenido del sitio Qué tipo de computadora contará el usuario (velocidad, resolución, etc). También existe la opción de exportar la presentación flash como archivo de vídeo y luego convertirla con el software para que constituya una presentación en DVD. En el caso de contenido para dispositivos móviles es bueno considerar que el estándar inicial para estos dispositivos es de 320 x 240. La mayoría de los teléfonos celulares pueden reproducir esta resolución.
  • 23.
  • 24.
    1.3 Accesibilidad Esimportante que al trabajar contenido multimedia en Flash pensemos cómo podemos hacer accesible dicho contenido a las personas con discapacidades visuales, motrices, auditivos o con otros impedimentos. Éstas son algunos ayudas que podemos dar para que el contenido de su Web sea más accesible para las personas con capacidades diferentes:
  • 25.
    1.3 Accesibilidad Presentela información adecuada para los “lectores de pantalla”. Las personas con discapacidad visual utilizan el software lector que “lee” en audio el contenido la pantalla. En las películas de Flash, puede decidir qué objetos de la película será leído por lectores de pantalla.
  • 26.
    1.3 Accesibilidad Estructureel texto e imágenes en diferentes tamaños. Algunos de los visitantes pueden tener dificultades para leer texto o ver pequeños gráficos. Permita que los usuarios puedan hacer zoom en estos elementos, con las ventajas que tienen los gráficos vectoriales de ser escalables al pertenecer a archivos SWF.
  • 27.
    1.3 Accesibilidad Incluyanarración de audio. Considere la posibilidad de ofrecer una narración de audio para los visitantes sin un lector de pantalla. Si los lectores de pantalla no está disponibles, el audio podría ser la descripción de los videos.
  • 28.
    1.3 Accesibilidad Proporcionesubtítulos en las narraciones de audio. Algunos visitantes podrían no tener la capacidad de escuchar la narración de su sitio Web. Considere la posibilidad de ofrecer títulos para estos visitantes.
  • 29.
    1.3 Accesibilidad Nose base en un solo color para transmitir información. Puede haber visitantes daltónicos. Si se basa en el color para comunicar, anexe un texto que clarifique el funcionamiento de la pieza, aún en ausencia del color.
  • 30.
    1.3 Accesibilidad Flashcontiene una serie de objetos que son accesibles de forma predeterminada en las películas y que se incluyen en la información de Flash Player para los programas lectores de pantalla, entre ellos: – Textos estáticos – Los campos de texto de entrada – Botones – Los clips de película
  • 31.
    1.3 Accesibilidad Conel panel Accesibilidad , puede activar o desactivar la accesibilidad de toda la película o de objetos seleccionados.
  • 32.
    1.3 Accesibilidad Algunasbuenas prácticas en la elaboración de objetos accesibles – Es recomendable proporcionar para cada objeto un nombre distintivo y una descripción, excepto a los textos. Puesto que el texto es leído por lectores de pantalla, no son necesarias las descripciones. – Agregue etiquetas descriptivas a los botones, como se menciona en la opción siguiente o en la anterior.
  • 33.
    1.3 Accesibilidad -Agregar etiquetas y descripciones a clips de película para describir el contenido de la animación que no se explica en el texto de la página. – No duplique el contenido del audio. En particular, si se utiliza audio, desactive la accesibilidad para cualquier texto que duplique el contenido de audio.
  • 34.
    1.3 Accesibilidad – Permita que los visitantes puedan tener acceso a las diferentes secciones del sitio con flechas hacia adelante y atrás. – Asegúrese de que los visitantes pueden moverse a través de su sitio Web utilizando el teclado.