PW U1 Pin Tarea1 Jose Luis Perez O.

Instituto Tecnológico de Querétaro

Unidad Pinal de Amoles

División de Educación Presencial a Distancia

Materia: Programacion Web

Ingeniería en Sistemas Computacionales.

Actividad: Resumen. Planificación de Aplicaciones Web

Alumno: José Luis Pérez Ortega

Asesor: Ing. Jose Antonio Zavala Martínez

[email protected]

Tutor: Ing. Lucia Rivera Riv.

[email protected]

Martes 19-Enero-2016

mailto:[email protected]

mailto:[email protected]

Programacion Web Unidad Pinal de Amoles

2

J o s e L u i s P é r e z O r t e g a

Página 2

Planificación de aplicaciones web

La importancia de planificar antes de actuar

Muchos diseñadores en algún u otro momento hemos caído en la tentación de comenzar a diseñar

un nuevo proyecto sin ningún tipo de planificación previa. Ya sea por pecar de novatos, perezosos

o simplemente no creer en que la planificación debe formar parte de nuestro proceso creativo.

La planificación debe formar siempre parte de nuestro proceso creativo, no es algo “opcional”.

Con planificación previa no estoy sugiriendo numerosas horas de escrupulosa planificación y

organización de todo lo que haremos, ha de ser práctico y en ningún momento debe ser peor el

remedio que la enfermedad, recordad que nos interesa planificar para ahorrar tiempo y ganar

en calidad.

En este proceso previo de planificación es importante que obtengamos respuesta a preguntas tan

básicas como:

1. ¿Qué tipo de web voy a crear?

2. ¿Qué clase de público visitará la web?

3. ¿Cuál es la finalidad / objetivo final de la web?

4. ¿Cumplirá el diseño en mente los objetivos? ¿Es usable e intuitivo?

Contestando a este tipo de preguntas (seguro que añadiríais / quitaríais alguna) nos

enfrentamos a problemas que a pesar de ser demasiado obvios nos ahorrarán más de un dolor de

cabeza… ¿cuántas veces hemos no desechado diseños visualmente atractivos pero que no

cumplen los objetivos básicos?

Diseñar con unos objetivos básicos bien definidos nos ahorrarán más de un “borrón y cuenta

nueva“.

Si bien para proyectos “for fun” (por mera diversión) se puede entender que no se planifique

nada, sino que simplemente experimentemos y trasteemos sobre la marcha… me resisto a pensar

que no se pueda necesitar / dedicar media 30 o 60 minutos a la planificación de lo qué queremos

conseguir y cómo hacerlo.

Planificación de Proyectos Web No importa cuál sea el tamaño del proyecto, es fundamental crear un Plan de Proyecto que

capture la toma de decisiones, y que, cuando el proyecto sea lanzado, sirva como archivo

documental de todos los procesos estratégicos inherentes al proyecto.

1. Definición del Proyecto

Descubrimiento


3


Página 3

1. Entrevistas a las partes interesadas (clientes, proveedores, etc.)

2. Análisis de la competencia

3. Estudio de los Perfiles de audiencia

• Investigación de la audiencia/mercado: Perfiles de las audiencias principales y

secundarias

• Capacidades y Restricciones de la audiencia: habilidades, expectación,

necesidades típicas, requerimientos de navegador/plataforma, etc.

Análisis

1. Finalidad última del site

2. Funcionalidades y contenidos necesarios en el producto final

3. Capacidades internas de la empresa: recursos financieros y recursos de personal (equipo)

Estrategia

1. Objetivos de negocio: primarios y secundarios

2. Estrategia de comunicación: tono y estilo (resumidos en un briefing creativo)

3. Métricas de éxito

4. Plan de Marketing

5. Alcance: decidir qué hacer ahora y qué puede esperar para una segunda fase

Plan de Proyecto (Borrador)

1. Resumen del Proyecto

2. Estrategia

3. Audiencia

4. Requerimientos

Funcionales/Interactivos

Contenidos

Visuales

5. Alcance

6. Métricas de éxito

7. Marketing

8. Mantenimiento y soporte posterior

9. Desarrollo futuro

10. Equipo y roles

11. Relación con el cliente (gestión de la cuenta)

12. Ciclo de aprobación

13. Presupuesto

14. Timming

Entregables en la fase de Definición del Proyecto


4


Página 4

– Para un proyecto pequeño: Plan de Proyecto

– Para un proyecto grande: Plan de Proyecto, Briefing Creativo y Plan de Marketing

2. Diseño Estructural

Definición del Contexto

1. Inventario del contenido existente: textos, imagines, vídeos, incluyendo fuentes que no

provengan de la web (libros, fotografías, etc…)

2. Contenido que tenga que ser creado o editado (imágenes, textos, traducciones, vídeos,

etc…)

3. Responsabilidades de autoría y edición (equipo: asignación de recursos)

4. Plan de mantenimiento de contenidos

Definición Funcional

1. Requisitos Funcionales

• Planificación de usuario

2. Requerimientos de tecnología

• Tecnologías a emplear

• Servidor y Hosting

• Desarrollo e integración de aplicaciones (tanto propias como de terceros)

• Integración de datos (tanto propios como de terceros)

• Relaciones y responsabilidades con proveedores y/o terceros

• Plan de pruebas: proceso de detección de errores (bug tracking) y proceso de

resolución de errores (bug fixing)

• Desarrollo o mantenimiento en curso

3. Requerimientos de planificación e integración

• Integración de Marketing: marketing mediante via postal, email, teléfono u otros

medios

• Planificación del Back-office e integración de éste con la base de datos

4. Requisitos de Soporte

• Plan de soporte al usuario final

• Formación o contratación de personal interno

• Mantenimiento del site en curso

5. Responsabilidades internas

6. Responsabilidades de los Proveedores

Diagramas a nivel de Site y de Página

1. Entregables de esta fase de Diseño Estructural

2. Para proyectos pequeños: Diagrama de Arquitectura de Información, Wireframes

3. Para proyectos grandes: Diagrama de Arquitectura de Información, Wireframes,


5


Página 5

Especificaciones Funcionales, Especificaciones Técnicas, Plan de Pruebas, Plan de Soporte

1. Cuando se requiera mantener relaciones con proveedores: Contrato con el proveedor,

Contrato de Aceptación del Servicio, Licenciamiento, Contrato de Confidencialidad

Pruebas del Diseño Estructural y Finalización de esta fase

2. Revisión de los wireframes con las partes implicadas (cliente, etc.)

3. Comprobación de los wireframes con 3-5 usuarios

3. Recopilación y Creación de Contenidos

Autoría de Contenidos

1. Creación y edición de contenidos de acuerdo con la arquitectura de información del site y

de los diagramas de las páginas; para reutilización de los contenidos es recomendable que

se preparen directamente para la web

2. Determinación del origen de las fotografías, vídeos e ilustraciones

Revisión de los Contenidos y Finalización de esta fase

1. Aceptación de los contenidos mediante un ciclo de aprobación de los mismos

4. Diseño Visual

Diseño Gráfico del Site

2. Aplicación de la marca e identidad visual

3. Fotografía, Vídeo e Ilustración

4. Obtención de los Componentes de diseño

5. Prototipo de baja resolución

Entregables de esta fase de Diseño Gráfico del Site

– Para un proyecto pequeño: Componentes de diseño

– Para un proyecto grande: Componentes de diseño, Guía de estilo, Prototipo interactivo de

las secciones clave del site

Revisión del Diseño y Finalización de esta fase

– Aceptación del diseño mediante un ciclo de aprobación del mismo

– Comprobación del diseño con 3-5 usuarios

5. Producción

Ingeniería

1. Instalación y configuración del Servidor y del Hosting


6


Página 6

2. Desarrollo de los datos y/o de la base de datos

3. Desarrollo de la aplicación

4. Desarrollo y/o Integración del sistema de gestión de contenidos (CMS)

5. Diseño y desarrollo de las páginas y plantillas: HTML, CSS, JavaScript (y/o otros scripts

cliente a nivel de página)

6. Diseño de elementos reutilizables: gráficos, navegación, META tags, etc.

7. Pruebas de Control de Calidad

Construcción del Site

1. Asignación de contenidos de prueba

2. Aplicación de estilos

3. Integración de datos, aplicaciones u otras funcionalidades

4. Almacenamiento en el servidor de desarrollo (para pruebas)

Pruebas de Calidad

1. Prueba de los contenidos y revisión de los mismos: comprobación de enlaces, revisión de

textos e imágenes, etc.

2. Pruebas funcionales: pruebas sobre la aplicación y sobre elementos interactivos

3. Pruebas de integración

4. Pruebas de navegación

5. Planificación final del proceso de calidad

6. Pruebas en los distintos navegadores

Revisión

1. Revisión por parte de las partes implicadas (clientes, etc.) y aprobaciones finales.

6. Lanzamiento

Puesta en Marcha

2. Lanzamiento previo con base de datos con pocos usuarios; lanzamiento progresivo con la

base de datos completa

3. Marketing sobre el site

4. Posicionamiento del site (SEP)

5. Soporte de usuarios

Mantenimiento

1. Puesta del site en manos del equipo de mantenimiento

2. Métricas sobre el site: recuperación de datos (informes), reportes y monitorización

3. Establecimiento como site inicial o realización de ajustes en la planificación


7


Página 7

Herramientas para planificación de diseños web Si bien no están todas las existentes del mercado (otra cosa no, pero de esto hay mucho), he

querido resaltar aquellas que me han parecido más interesantes y que he utilizado en algún

momento a modo de prueba o en proyectos reales.

Balsamiq Mockups

Balsamiq Mockups es una herramienta multiplataforma (Linux, Windows, Mac) que nos

permite arrastrar y soltar todo tipo de elementos web, móviles y otros controles comunes para

agilizar el brainstorming y bocetos iniciales de cualquier tipo de proyectos.

No es casualidad que aparezca de primero en la lista, actualmente es el que utilizo para la mayoría

de proyectos en Cokidoo.

HotGloo

HotGloo Una herramienta de wireframing con un aspecto e interfaz muy cuidada que no sólo está

pensada para diseñadores, sino también para programadores. Como buen servicio web, no

necesitaremos preocuparnos ni de descargas ni actualizaciones constantes, tan sólo crearemos

nuestra cuenta y comenzaremos a disfrutar del servicio.


8


Página 8

Gliffy

Gliffy es un aplicación online para la creación de diagramas, permitiéndonos crear de manera fácil

y cómoda todo tipo de planos y diagramas con un acabado bastante profesional.

Lógicamente entre planos de viviendas, gráficas, diagramas base, dibujos técnicos y otro tipo de

diseños podremos esbozar nuestros diseños web.

IPlotz

IPlotz permite crear de manera rápida y cliqueable todo tipo de prototipos web, pero además

soporta elementos para la planificación de todo tipo de aplicaciones de software. Es

multiplataforma pudiendo ser ejecutado en Linux, Windows, Mac o embebido en navegador web

mediante flash.

Reflexión final Realmente no hemos descubierto nada nuevo, la planificación es siempre una parte importante de

cualquier tipo de tarea o proyecto, dedicando unos pocos minutos a pensar en los posibles

problemas y objetivos podremos minimizar las horas perdidas y de improvisación.

En cuanto a las herramientas para la creación de bocetos y previas a nuestros diseños web, son

realmente interesantes de cara a evitar discusiones tontas iniciales, ya que nos aleja de formas y

colores y nos enfoca en lo importante, en la estructura y objetivo del diseño final.


9


Página 9

Referencias Mato, Adrian (23 de octubre de 2010). Planificación y Herramientas para tus diseños web.

Consultado el 19 de enero de 2016. Recuperado de:

http://web.ontuts.com/recursos/planificacion-y-herramientas-para-tus-disenos-web/

Desarrollo PHP Sénior (20 de abril de 2012). Planificación de Proyectos Web. Consultado el

19 de enero de 2016. Recuperado de:

https://desarrollophpsenior.wordpress.com/2012/04/20/planificacion-de-proyectos-web/

http://web.ontuts.com/recursos/planificacion-y-herramientas-para-tus-disenos-web/

https://desarrollophpsenior.wordpress.com/2012/04/20/planificacion-de-proyectos-web/

PW U1 Pin Tarea1 Jose Luis Perez O.

Documents

Transcript of PW U1 Pin Tarea1 Jose Luis Perez O.