martes, 13 de julio de 2010

lunes, 12 de julio de 2010

Estándares Web

Trabajo Nº 8


Objetivos: conocer y relacionar las directrices y métodos de optimización web conforme a la W3C.

Encargo: Disertación PPT sobre tema asignado, conclusión personal.

Conclusión: El eye-tracking es un test para testear donde estan los puntos fuertes de mi web, este se debe hacer antes de publicar una web, así poner lo que mas me interesa que vean en los puntos as fuertes, que arrojo el resultado del eye-tracking. (seguimiento de los ojos)

Link:

Minisitio en Flash

Prueba Nº3


Objetivo: Aplicar el conocimiento adquirido y desarrollar la capacidad de crear una propuesta de diseño acorde a lo solicitado.

Encargo: Diseño y conceptualización mini-sitio flash: Home + 4 páginas interiores.

Contenidos:
Botonera interior linkeada ( acciones goto / nº de frame / next-frame / label )
Uso de línea de tiempo con acciones básicas ( stop/play/ loadmovie / unloadmovie)
Uso de sonidos ( en botones, películas o como reproducción de archivos de audio )
Galería de fotos
Formulario de contacto
Optimización para publicación web
Uso correcto de interpolaciones de movimiento y forma, máscaras y desvanecimiento para visualizar contenidos animados.
Uso y manejo de símbolos ( gráficos/movie clips/botones)
Uso y manejo de estilos gráficos tales como alfa, tinta, etc.
Carga y descarga de películas anexas ( loadmovie / unloadmovie) de 5 archivos swf uno madre Home, que llame las páginas interiores.
Puntos a Evaluar:
Diseño, conceptualización y trabajo gráfico.
Uso de colores, formas y tipografías acordes al concepto que se quiere proyectar
Correcta optimización de imágenes a tamaño y en formato RGB

Banner en Flash

Trabajo Nº 7


Objetivo: comprender el manejo del tiempo y su uso en aplicaciones comerciales tipo banners y publicidad. Aplicar y conocer aspectos básicos de la animación, sus principales componentes, qué tipos de fotogramas hay y cómo alcanzar los resultados deseados con el mínimo esfuerzo, carga y descarga de películas e insertar sonido.

Encargo: Desarrollo de un banner en flash de 990x500 px, que contenga un escenario animado según el tema escogido. 3 escenas, 1º con una pequeñas presentación, título y link para ver la animación. 2º escena con el escenario animado y carga de sonido desde una película externa. 3º escena con créditos.

Página web simple programando en html básico

Trabajo Nº1


Objetivo: aplicar conocimientos adquiridos, comprender uso de etiquetas básicas : html, head, title, body; de vinculación: links internos (ancla), local y externo; de formato de texto font, color, cursiva, negritas y atributos. Organización de carpetas. Correcto uso de nombres de archivos para html.

Encargo: Construcción de una reseña o perfil biográfico personal de 2 o más páginas html linkeadas entre si.

Inmersión y revisión de Flash

Trabajo Nº 6


Objetivo: Primer acercamiento al área de trabajo en flash: Espacio de trabajo, dimensiones de documento de flash para web / Principales herramientas / uso de Línea de tiempo / interpolación de movimiento.

Encargo: Desarrollo de una animación básica, 3 escenas, 1º con movimiento de gráfico, 2º ejemplos de rotación y cambio de color de gráfico, 3º interpolación de movimiento con imagen.

Disertación sobre CSS

Prueba Nº2


Objetivo: Entender la sintaxis CSS, haciendo una disertación sobre los Atributos,valores y selectores más comunes sorteados a cada uno. Ejemplo de diagramación con cajas, DIV, y atributos de clase y ID.

Encargo: Disertación PPT con el caso asignado con ejemplos y explicación con sus palabras.

Link:

Creación de Layout en PSD con líneas guías

Trabajo Nº 5


Objetivos: Introducción al uso de slices, áreas activas, trozamiento de imágenes y etiquetas de id. Consideraciones al momento de exportar desde photoshop a Dreamweaver, imágenes + html y generación de hoja de estilo CSS a partir de layout.

Encargo: En PhotoShop: Escoger un tema libre y diseñar un layout . Usar las herramientas de slices y exportar los trozos creando una hoja de estilos css.
En Dreamweaver: quitar elementos sobrantes y crear un texto de párrafo, cambiando los atributos a la etiqueta p.

Web HTML > Reseña Biográfica2

Prueba Nº1


Objetivos: Poner en práctica lo aprendido en la unidad

Encargo: Reseña Biográfica : Index + 3 páginas interiores

Contenidos a evaluar:


  • Título del documento

  • Correcto uso de etiquetas H1 H2 p

  • Link interno ancla, local, externo

  • Formato de texto font diagramación

  • Lista ( etiquetas ul, li )

  • Layout tabla / calce y ordenamiento

  • Uso de Background

  • Visualización de imágenes

  • Optimización / selección de imágenes

  • Ordenamiento de archivos en carpeta

  • Nombre correcto de archivos

  • Errores tipográficos y ortografía

  • Propuesta de Diseño ( variaciones entre cada página)

  • Propuesta formal ( color, dimensiones)

  • Propuesta Conceptual ( contexto de imágenes / texto

Planificación de Sitio Web


Trabajo Nº 4A


Objetivos: Conocer e implementar consideraciones acerca del diseño gráfico aplicado a Internet: Estructura / Contenido /Estilo. Desarrollar cuestionario desde el punto de vista de lo que quiere proyectar el cliente.

Encargo: Trabajo en parejas: Desarrollo de Brief Página Web: 4 áreas Medicina, educación, inmobiliaria y tecnología. Investigación: De acuerdo a las respuestas del brief recolectar 3 ejemplos que le parezcan relevantes.


Brief:

1 ¿Cual es la idea de su proyecto?

Entregar información precisa y de rápido acceso. Para que los futuros compradores se sientan a gusto con el producto

2. ¿Que quiere comunicar en su sitio web?

Comodidad

Confianza

Claridad

3. ¿Cual es su mercado objetivo?

Jóvenes emprendedores y familias que quieran cumplir el sueño de la casa propia.

4. 3 ejemplos de web




Trabajo Nº 4B


Objetivos: Ejercitar la capacidad de análisis en búsqueda de una nueva propuesta basada en lo mejor de cada una de las webs seleccionadas, considerando los aspectos referidos a: Formato / Modelo de color / Diagramación / categorías de contenidos / accesos directos / tamaños y visualización de banners.

Encargo: Crear 1 layout en photoshop que contenga los elementos destacables de cada uno de los ejemplos expuestos.


Trabajo con Fondos HTML

Trabajo Nº 3A


Objetivo: Conocer y aplicar los diferentes parámetros a considerar sobre el dimensionamiento del área de trabajo estándar y las distintas formas de optimizar backgrounds en HTML v/s Photoshop.
Uso de patrón y filtro color halftone en Photoshop.

Encargo: Creación de fondos usando las 4 alternativas explicadas en clases (Background x, y, repeat, no-repeat ) formato aprox de 1280 x 768px.
Conclusiones acerca de las ventajas y desventajas de cada uno de los formatos.


Conclusion : fondo repit sirve en el caso de poner una imagen de poco px para ser menos pesada la pagina
fondo no-repit sirve para poner una imagen de fondo grande en la pagina
fondo y solamente se coloca una imagen horizontal de 1 px de ancho, repitiendola hacia abajo
fondo x lo mismo pero vertical .
Todas estas tecnicas es para bajar el peso de la web.

Trabajo Nº 3B


Seleccionar 1 de los fondos, insertar una tabla y crear un header con el nombre de cada uno.

Introducción al formato digital

Trabajo Nº2


Objetivo: Consideraciones con el trabajo de bitmap en web, conocer y aplicar paleta de colores en photoshop y dreamweaver.

Encargo: Seleccionar 2 imágenes de 700px de ancho, una a todo color ( calidad fotográfica ) y otra de colores planos ( vector exportado a imagen) recortar fondo y exportar para web en 4 diferentes formatos: JPG y GIF con fondo.
GIF transparente y PNG transparente. Posicionar dentro de una tabla html que tenga el mismo color de fondo con código hexadecimal.
HTML con tabla y 4 ejemplos de imagen mapa de bits transformada a los 4 formatos
HTML con tabla y 4 ejemplos de imagen vectorial transformada a mapa de bits.

Página web simple programando en html básico

Trabajo 1

Objetivo: aplicar conocimientos adquiridos, comprender uso de etiquetas básicas : html, head, title, body; de vinculación: links internos (ancla), local y externo; de formato de texto font, color, cursiva, negritas y atributos. Organización de carpetas. Correcto uso de nombres de archivos para html.

Encargo: Construcción de una reseña o perfil biográfico personal de 2 o más páginas html linkeadas entre si.