Este documento describe el proceso para desarrollar un proyecto web, incluyendo identificar las necesidades y audiencia del cliente, planear el contenido, diseño y distribución del sitio, y asegurar el cumplimiento de las reglas de copyright. También cubre temas como optimización de imágenes y formatos como GIF, JPEG y PNG.

1. Proceso para el
Desarrollo
de un Proyecto Web
Por: Ing. Rodrigo Pérez

2. 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.

3. 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.

4. 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

5. Finalidad Audiencia y Necesidades
Identificación del cliente Metas del cliente
• Objetivos a corto y largo
• Nombre de la organización plazo
• Misión • Hitos* que debe recordar
• Productos o servicios la audiencia después de la
visita.
• Historia de la compañía
• Información clave para la
• ¿Por qué está buscando el
audiencia
diseño de un sitio web?
• Expectativas y
necesidades de contenido.
*Los hitos son logros importantes

6. Finalidad Audiencia y Necesidades
Audiencia Objetivo Contenido
• Establecer el ámbito (campo • Titulo
de acción) de la audiencia. • Tópicos (temas)
• Rango de edades • Requisitos especiales de la
• Requerimientos de audiencia empresa
con discapacidades
• Frecuencia de navegación
• Utilización del sitio
• ¿Qué adjetivos describen el
sitio?

7. Finalidad Audiencia y Necesidades
Req. De Diseño Req. De Distribución
• Colores, logos y fuentes • Navegador
corporativas que deban • Explorer
incluirse en el sitio. • Firefox
• Sitios de que sirvan de • Chrome
inspiración para el diseño
• Sistemas operativos
• Windows
• Linux
• Mac
• Hardware, software y
complementos

8. 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

9. 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.

10. 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.

11. 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.

12. 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 ℗

13. 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.

14. 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.

15. Tramado (Dither)
• El tramado es el método de Un ejemplo de tramado. El
simulación de colores que rojo y el azul son los únicos
no están disponibles en el colores utilizados, pero a
sistema de color medida que los píxeles se
seleccionado. hacen más pequeños, el
parche parece violeta.
• 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.

16. Comparación
Imagen original (tramado) Imagen sin tramado
|
Observe que el tramado ayuda a Observe que existen franjas de
que los detalles de una imagen colores y no se aprecian los
se aprecian mejor y las franjas detalles de la imagen
de color se disimilan correctamente

17. 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

18. Tipos de tramado
• Los efectos se difuminan con los pixeles
Difusión adyacentes
• Utiliza cuadros similares a los semitonos
Motivo para simular colores faltantes.
• Utiliza cuadros de color al azar, sin
Ruido difuminar los colores adyacentes.
• No aplica tramado y ocupa únicamente
Restrictivo una paleta de 216 colores.

19. Formatos de Imágenes para la web
GIF JPEG PNG

20. 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

21. JPEG (Joint Photographics Experts
Group)
• 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

22. Comparación
Imagen de colores uniformes Imagen de colores continuos
Esta imagen tiene grandes áreas Esta imagen si requiere tramados
de un colores individuales ya que existen colores
(negro, rojo, blanco, crema) por intermedios entre el negro el
lo que no es necesario utilizar el blanco y el gris que requieren ser
tramado con ella. simulados

23. 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.