Proceso para el Desarrollode un Proyecto WebPor: Ing. Rodrigo Pérez

Objetivos

• Identificar la finalidad y las necesidades del cliente que solicita un sitio web.

• Identificar la audiencia objetivo y los requerimientos

• Identificar el contenido relevante y adecuado para el cliente y la audiencia.

• Demostrar las reglas del Copyright

• Asignar tareas y responsabilidades en la gestión de proyectos.

Sitio Web

• Es la herramienta principal en la cual se implementa la estrategia del cliente.

• Es el elemento más representativo de su identidad digital

• Es de suma importancia plantear el desarrollo del proyecto para conocer las necesidades del cliente.

Primera cita con el cliente

• Se deben desarrollar los siguientes temas:

• Identificación del cliente

• Metas del cliente

• Audiencia objetivo

• Contenido

• Requerimientos de diseño

• Requerimientos necesarios para la distribución

• Estos temas se especifican a continuación

Finalidad Audiencia y Necesidades

Identificación del cliente

• Nombre de la organización

• Misión

• Productos o servicios

• Historia de la compañía

• ¿Por qué está buscando el diseño de un sitio web?

Metas del cliente

• Objetivos a corto y largo plazo

• Hitos* que debe recordar la audiencia después de la visita.

• Información clave para la audiencia

• Expectativas y necesidades de contenido.

*Los hitos son logros importantes

Finalidad Audiencia y Necesidades

Audiencia Objetivo

• Establecer el ámbito (campo de acción) de la audiencia.

• Rango de edades

• Requerimientos de audiencia con discapacidades

• Frecuencia de navegación

• Utilización del sitio

• ¿Qué adjetivos describen el sitio?

Contenido

• Titulo

• Tópicos (temas)

• Requisitos especiales de la empresa

Finalidad Audiencia y Necesidades

Req. De Diseño

• Colores, logos y fuentes corporativas que deban incluirse en el sitio.

• Sitios de que sirvan de inspiración para el diseño

Req. De Distribución

• Navegador

• Explorer

• Firefox

• Chrome

• Sistemas operativos

• Windows

• Linux

• Mac

• Hardware, software y complementos

Planeación del Proyecto

• Hay que entender las necesidades del cliente

• Enlistar las tareas, fechas de entrega y asignar responsabilidades.

• El tamaño del plan refleja el tamaño del proyecto

• Tener información detallada para comunicar tareas clave para el cliente y el equipo de producción

Contenido

• El sitio es la razón de visita por:

• Productos

• Información

• Instrucción

• Entretenimiento.

• Debe ser interesante y conciso.

• La Redacción:

• debe ser clara

• Los textos deben ser concretos y descriptivos

• Las oraciones y párrafos deben ser cortos.

• Imágenes deben ser relevantes.

• El contenido proporciona credibilidad. Hay que mantenerlo actualizado.

• Tener disponibilidad de contacto e información verificable.

El Copyright

• Es la protección de la propiedad intelectual

• Consiste en cualquier contenido creado: música, fotos, contenidos, etc.

• El uso legitimo y razonable limita el material protegido, sin permiso escrito, como fuente de información dando crédito al autor

• Revisar el material del contenido. Verifique que sea de dominio público o cuente con los permisos para utilizarlo.

El Copyright (cont.)

• Trabajo derivado

• es material protegido alterado o cambiado y se necesita permiso par usarlo.

• Estándares académicos

• se debe dar crédito al citar textualmente a un autor, incluso al hacer una paráfrasis.

• Bibliografía

• son fuentes que se utilizaron para una investigación. Puede ser material tomado de internet como gráficos y fotografías.

Reglas del Copyright

• No usar material protegido sin permiso del autor• Asumir que todo material está protegido• La sanción por usar material sin permiso puede incluir:

• Un correo solicitando dejar de utilizar el material• Una solicitud de baja del sitio al web master.• Denuncia ante las autoridades.

• Asegúrese de no violar derechos del autor:• Envíe un correo al autor solicitando permiso• Sigua las instrucciones sobre el uso del material protegido• No utilice el material sin permiso escrito

• Proteja su propio material:• Use © o la abreviación Copr.• Indique el nombre del autor• Indique año de publicación

• Ejemplo: © 2012 Ediciones y Publicidad S.C.

• Los fonogramas usan el símbolo ℗

Fuentes de Internet

• Cuando se usa información de una revista o libro, debe citarse la bibliografía.

• Formato de citas• Para World, Wide, Web.

• Autor. Titulo. [En línea] Disponible en http://sitioweb.com, Fecha del documento o Fecha de descarga.

• Sonido en línea• Descripción o Titulo del sonido. (sonido en línea) Disponible en

http://sitioweb.com, Fecha del documento o Fecha de descarga.

• Video en línea• Descripción o Titulo del videoclip. (Video en línea) Disponible en

http://sitioweb.com, Fecha del documento o Fecha de descarga.

• Imagen en línea• Descripción o Titulo de la imagen. (imagen en línea) Disponible en

http://sitioweb.com, Fecha del documento o Fecha de descarga.

Imágenes para un sitio Web

• Hay que decidir el formato de las imágenes

• Se Optimizan las imágenes para que el tiempo de descarga sea el menor.

• Se ajustan los valores de optimización para encontrar un equilibrio entre la calidad de imagen y el tamaño del archivo.

Tramado (Dither)• El tramado es el método de

simulación de colores que no están disponibles en el sistema de color seleccionado.

• A mayor porcentaje de tramado, mas colores y detalles se aprecian y mayor es el tamaño de archivo.

• Las imágenes de colores uniformes no requieren tramado, no así las de tono continuo, necesitan tramado para evitar franjas de color no deseado.

Un ejemplo de tramado. El rojo y el azul son los únicos

colores utilizados, pero a medida que los píxeles se hacen más pequeños, el parche parece violeta.

Comparación

Imagen original (tramado)

|

Imagen sin tramado

Observe que existen franjas de colores y no se aprecian los

detalles de la imagen correctamente

Observe que el tramado ayuda a que los detalles de una imagen se aprecian mejor y las franjas

de color se disimilan

Tramado

• El tramado consigue aproximaciones de colores que no se encuentran en la paleta actual al alternar dos colores similares.

• Desde una determinada distancia los colores se mezclan para crear el aspecto del color ausente.

• El tramado es útil cuando se exportan imágenes que incorporan mezclas complejas o degradados de color

Tipos de tramado

• Los efectos se difuminan con los pixeles adyacentesDifusión

• Utiliza cuadros similares a los semitonos para simular colores faltantes.Motivo

• Utiliza cuadros de color al azar, sin difuminar los colores adyacentes.Ruido

• No aplica tramado y ocupa únicamente una paleta de 216 colores.Restrictivo

Formatos de Imágenes para la web

GIF JPEG PNG

GIF (Graphic Interchange Format)

• Utiliza máximo 256 colores

• Ideal para imágenes de tonos no continuos o áreas de color homogéneo

• Usarlo en:

• Barras de navegación

• Botones

• Iconos

• Logotipos

JPEG (Joint Photographics ExpertsGroup)• Ideal para fotos de tono continuo.

• Puede contener millones de colores

• A mayor calidad mayor tamaño y mayor tiempo de descarga

• A mayor compresión, menor calidad

ComparaciónImagen de colores uniformes Imagen de colores continuos

Esta imagen si requiere tramados ya que existen colores

intermedios entre el negro el blanco y el gris que requieren ser

simulados

Esta imagen tiene grandes áreas de un colores individuales

(negro, rojo, blanco, crema) por lo que no es necesario utilizar el

tramado con ella.

PNG (Portable Network Group)

• Compatible con colores indexados, escala de grises o color verdadero.

• Soporta canales alfa (transparencias

• Conservan información de Capas, vectores, color y efectos, todos ellos completamente editables en Fireworks.