Instituto Tecnolgico de Quertaro

Unidad Pinal de Amoles

Divisin de Educacin Presencial a Distancia

Materia: Programacion Web

Ingeniera en Sistemas Computacionales.

Actividad: Resumen. Planificacin de Aplicaciones Web

Alumno:
Jos Luis Prez Ortega
Asesor: Ing. Jose Antonio Zavala Martnez
azavala_depad_qro@hotmail.com

Tutor: Ing. Lucia Rivera Riv.

lrivera_depad_pin@hotmail.com

Martes 19-Enero-2016

Programacion Web 2
Unidad Pinal de Amoles

Planificacin de aplicaciones web

La importancia de planificar antes de actuar
Muchos diseadores en algn u otro momento hemos cado en la tentacin de comenzar a disear
un nuevo proyecto sin ningn tipo de planificacin previa. Ya sea por pecar de novatos, perezosos
o simplemente no creer en que la planificacin debe formar parte de nuestro proceso creativo.
La planificacin debe formar siempre parte de nuestro proceso creativo, no es algo opcional.
Con planificacin previa no estoy sugiriendo numerosas horas de escrupulosa planificacin y
organizacin de todo lo que haremos, ha de ser prctico y en ningn 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 planificacin es importante que obtengamos respuesta a preguntas tan
bsicas como:
1. Qu tipo de web voy a crear?
2. Qu clase de pblico visitar la web?
3. Cul es la finalidad / objetivo final de la web?
4. Cumplir el diseo en mente los objetivos? Es usable e intuitivo?
Contestando a este tipo de preguntas (seguro que aadirais / quitarais alguna) nos
enfrentamos a problemas que a pesar de ser demasiado obvios nos ahorrarn ms de un dolor de
cabeza cuntas veces hemos no desechado diseos visualmente atractivos pero que no
cumplen los objetivos bsicos?
Disear con unos objetivos bsicos bien definidos nos ahorrarn ms de un borrn y cuenta
nueva.
Si bien para proyectos for fun (por mera diversin) 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 planificacin de lo qu queremos
conseguir y cmo hacerlo.

Planificacin de Proyectos Web

No importa cul sea el tamao 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 estratgicos inherentes al proyecto.
1. Definicin del Proyecto
Descubrimiento

J o se L u i s P re z O r t eg a

Pgina 2

Programacion Web 3
Unidad Pinal de Amoles
1. Entrevistas a las partes interesadas (clientes, proveedores, etc.)
2. Anlisis de la competencia
3. Estudio de los Perfiles de audiencia
Investigacin de la audiencia/mercado: Perfiles de las audiencias principales y
secundarias
Capacidades y Restricciones de la audiencia: habilidades, expectacin,
necesidades tpicas, requerimientos de navegador/plataforma, etc.
Anlisis
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.
2.
3.
4.
5.

Objetivos de negocio: primarios y secundarios

Estrategia de comunicacin: tono y estilo (resumidos en un briefing creativo)
Mtricas de xito
Plan de Marketing
Alcance: decidir qu hacer ahora y qu puede esperar para una segunda fase

Plan de Proyecto (Borrador)

1.
2.
3.
4.

5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

Resumen del Proyecto

Estrategia
Audiencia
Requerimientos
Funcionales/Interactivos
Contenidos
Visuales
Alcance
Mtricas de xito
Marketing
Mantenimiento y soporte posterior
Desarrollo futuro
Equipo y roles
Relacin con el cliente (gestin de la cuenta)
Ciclo de aprobacin
Presupuesto
Timming

Entregables en la fase de Definicin del Proyecto

J o se L u i s P re z O r t eg a

Pgina 3

Programacion Web 4
Unidad Pinal de Amoles

Para un proyecto pequeo: Plan de Proyecto

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

2. Diseo Estructural
Definicin del Contexto
1. Inventario del contenido existente: textos, imagines, vdeos, incluyendo fuentes que no
provengan de la web (libros, fotografas, etc)
2. Contenido que tenga que ser creado o editado (imgenes, textos, traducciones, vdeos,
etc)
3. Responsabilidades de autora y edicin (equipo: asignacin de recursos)
4. Plan de mantenimiento de contenidos
Definicin Funcional
1. Requisitos Funcionales
Planificacin de usuario
2. Requerimientos de tecnologa
Tecnologas a emplear
Servidor y Hosting
Desarrollo e integracin de aplicaciones (tanto propias como de terceros)
Integracin de datos (tanto propios como de terceros)
Relaciones y responsabilidades con proveedores y/o terceros
Plan de pruebas: proceso de deteccin de errores (bug tracking) y proceso de
resolucin de errores (bug fixing)
Desarrollo o mantenimiento en curso
3. Requerimientos de planificacin e integracin
Integracin de Marketing: marketing mediante via postal, email, telfono u otros
medios
Planificacin del Back-office e integracin de ste con la base de datos
4. Requisitos de Soporte
Plan de soporte al usuario final
Formacin o contratacin de personal interno
Mantenimiento del site en curso
5. Responsabilidades internas
6. Responsabilidades de los Proveedores
Diagramas a nivel de Site y de Pgina
1. Entregables de esta fase de Diseo Estructural
2. Para proyectos pequeos: Diagrama de Arquitectura de Informacin, Wireframes
3. Para proyectos grandes: Diagrama de Arquitectura de Informacin, Wireframes,

J o se L u i s P re z O r t eg a

Pgina 4

Programacion Web 5
Unidad Pinal de Amoles
Especificaciones Funcionales, Especificaciones Tcnicas, Plan de Pruebas, Plan de Soporte
1. Cuando se requiera mantener relaciones con proveedores: Contrato con el proveedor,
Contrato de Aceptacin del Servicio, Licenciamiento, Contrato de Confidencialidad
Pruebas del Diseo Estructural y Finalizacin de esta fase
2. Revisin de los wireframes con las partes implicadas (cliente, etc.)
3. Comprobacin de los wireframes con 3-5 usuarios
3. Recopilacin y Creacin de Contenidos
Autora de Contenidos
1. Creacin y edicin de contenidos de acuerdo con la arquitectura de informacin del site y
de los diagramas de las pginas; para reutilizacin de los contenidos es recomendable que
se preparen directamente para la web
2. Determinacin del origen de las fotografas, vdeos e ilustraciones
Revisin de los Contenidos y Finalizacin de esta fase
1. Aceptacin de los contenidos mediante un ciclo de aprobacin de los mismos
4. Diseo Visual
Diseo Grfico del Site
2.
3.
4.
5.

Aplicacin de la marca e identidad visual

Fotografa, Vdeo e Ilustracin
Obtencin de los Componentes de diseo
Prototipo de baja resolucin

Entregables de esta fase de Diseo Grfico del Site

Para un proyecto pequeo: Componentes de diseo

Para un proyecto grande: Componentes de diseo, Gua de estilo, Prototipo interactivo de
las secciones clave del site

Revisin del Diseo y Finalizacin de esta fase

Aceptacin del diseo mediante un ciclo de aprobacin del mismo

Comprobacin del diseo con 3-5 usuarios

5. Produccin
Ingeniera
1. Instalacin y configuracin del Servidor y del Hosting

J o se L u i s P re z O r t eg a

Pgina 5

Programacion Web 6
Unidad Pinal de Amoles
2.
3.
4.
5.

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

Desarrollo de la aplicacin
Desarrollo y/o Integracin del sistema de gestin de contenidos (CMS)
Diseo y desarrollo de las pginas y plantillas: HTML, CSS, JavaScript (y/o otros scripts
cliente a nivel de pgina)
6. Diseo de elementos reutilizables: grficos, navegacin, META tags, etc.
7. Pruebas de Control de Calidad
Construccin del Site
1.
2.
3.
4.

Asignacin de contenidos de prueba

Aplicacin de estilos
Integracin de datos, aplicaciones u otras funcionalidades
Almacenamiento en el servidor de desarrollo (para pruebas)

Pruebas de Calidad
1. Prueba de los contenidos y revisin de los mismos: comprobacin de enlaces, revisin de
textos e imgenes, etc.
2. Pruebas funcionales: pruebas sobre la aplicacin y sobre elementos interactivos
3. Pruebas de integracin
4. Pruebas de navegacin
5. Planificacin final del proceso de calidad
6. Pruebas en los distintos navegadores
Revisin
1. Revisin 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. Mtricas sobre el site: recuperacin de datos (informes), reportes y monitorizacin
3. Establecimiento como site inicial o realizacin de ajustes en la planificacin

J o se L u i s P re z O r t eg a

Pgina 6

Programacion Web 7
Unidad Pinal de Amoles

Herramientas para planificacin de diseos web

Si bien no estn todas las existentes del mercado (otra cosa no, pero de esto hay mucho), he
querido resaltar aquellas que me han parecido ms interesantes y que he utilizado en algn
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, mviles 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 mayora
de proyectos en Cokidoo.
HotGloo

HotGloo Una herramienta de wireframing con un aspecto e interfaz muy cuidada que no slo est
pensada para diseadores, sino tambin para programadores. Como buen servicio web, no
necesitaremos preocuparnos ni de descargas ni actualizaciones constantes, tan slo crearemos
nuestra cuenta y comenzaremos a disfrutar del servicio.

J o se L u i s P re z O r t eg a

Pgina 7

Programacion Web 8
Unidad Pinal de Amoles
Gliffy

Gliffy es un aplicacin online para la creacin de diagramas, permitindonos crear de manera fcil
y cmoda todo tipo de planos y diagramas con un acabado bastante profesional.
Lgicamente entre planos de viviendas, grficas, diagramas base, dibujos tcnicos y otro tipo de
diseos podremos esbozar nuestros diseos web.
IPlotz

IPlotz permite crear de manera rpida y cliqueable todo tipo de prototipos web, pero adems
soporta elementos para la planificacin de todo tipo de aplicaciones de software. Es
multiplataforma pudiendo ser ejecutado en Linux, Windows, Mac o embebido en navegador web
mediante flash.

Reflexin final
Realmente no hemos descubierto nada nuevo, la planificacin 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 improvisacin.
En cuanto a las herramientas para la creacin de bocetos y previas a nuestros diseos 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 diseo final.

J o se L u i s P re z O r t eg a

Pgina 8

Programacion Web 9
Unidad Pinal de Amoles

Referencias
Mato, Adrian (23 de octubre de 2010). Planificacin y Herramientas para tus diseos web.
Consultado
el
19
de
enero
de
2016.
Recuperado
de:
http://web.ontuts.com/recursos/planificacion-y-herramientas-para-tus-disenos-web/
Desarrollo PHP Snior (20 de abril de 2012). Planificacin de Proyectos Web. Consultado el
19
de
enero
de
2016.
Recuperado
de:
https://desarrollophpsenior.wordpress.com/2012/04/20/planificacion-de-proyectos-web/

J o se L u i s P re z O r t eg a

Pgina 9