Proceso para el Desarrollo Web
-
Upload
rodrigo-arturo-perez-reyes -
Category
Education
-
view
931 -
download
2
Transcript of Proceso para el Desarrollo Web
![Page 1: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/1.jpg)
Proceso para el Desarrollode un Proyecto WebPor: Ing. Rodrigo Pérez
![Page 2: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/2.jpg)
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.
![Page 3: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/3.jpg)
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.
![Page 4: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/4.jpg)
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
![Page 5: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/5.jpg)
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
![Page 6: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/6.jpg)
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
![Page 7: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/7.jpg)
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
![Page 8: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/8.jpg)
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
![Page 9: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/9.jpg)
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.
![Page 10: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/10.jpg)
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.
![Page 11: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/11.jpg)
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.
![Page 12: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/12.jpg)
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 ℗
![Page 13: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/13.jpg)
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.
![Page 14: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/14.jpg)
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.
![Page 15: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/15.jpg)
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.
![Page 16: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/16.jpg)
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
![Page 17: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/17.jpg)
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
![Page 18: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/18.jpg)
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
![Page 19: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/19.jpg)
Formatos de Imágenes para la web
GIF JPEG PNG
![Page 20: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/20.jpg)
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
![Page 21: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/21.jpg)
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
![Page 22: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/22.jpg)
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.
![Page 23: Proceso para el Desarrollo Web](https://reader030.fdocuments.es/reader030/viewer/2022032714/55ab37cc1a28ab373e8b46c6/html5/thumbnails/23.jpg)
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.