Etapas y planificación de un

proyecto web
#EDtaller 97
Jon Mircha, Alexys Lozada, Daniel Romero y Álvaro Felipe
1. Cierre de venta y planificación
Ciclo de venta
Levantar requerimientos (briefing)
Planificación del proyecto
2. UX / UI
Experiencia de usuario (UX)

● Research
● Arquitectura de la información
● Mapa del sitio
● Sketch / wireframing
● Prototipado
Interfaz de usuario (UI)

● Imagen corporativa
● Guías de estilo
○ Colores
○ Tipografía
○ Componentes UI
● Patrones de diseño (¿responsive?)
● Flujo de usuario
● Testing
Herramientas y recursos para UX/UI

● Sketch (Mac)
● Principle (Mac)
● Adobe Xd (Mac/Win)
● Photoshop / Illustrator / Indesign (Mac/Win)
● Balsamiq Mockups (Mac / Win)
● Pencil (Open Source, Mac/Win/Linux)
● Figma (web)
● Invision (web)
● Marvel (web)
3. Diseño de base de datos
Modelo Entidad Relación

● Fases del diseño de la BD.

● Componentes de un buen diseño de una BD
relacional
● Conceptos de los elementos que intervienen en el
diseño
● Decantando el requerimiento en un MER
● UML, una relación amor - odio.
Modelo Relacional

● Enserio MER y luego MR?

● Dominios
● Restricciones
● Representaciones Tabulares
4. Flujo de trabajo con Git
5. Maquetación de UI
Del diseño al código

● Semántica HTML
● Arquitectura CSS
● Interactividad JavaScript
● Guías de Estilo
● Flujos de Trabajo
● Piensa en Componentes (DRY - Don’t Repeat Yourself)
6. Desarrollo de la base de datos
SQL

Diseñando lógicamente nuestro diseño conceptual.

● DDL
● DML
● DCL
Auditorías de bajo nivel

● Cómo podemos controlar auditorías de nuestra

información sin importar el proveedor de la
información (Backend) o incluso si la información es
manipulada desde el cliente del motor.
● Procedimientos Almacenados
● Triggers
7. El backend con Laravel
Laravel

● Elegancia y eficiencia
● ORM
● Paquetes
● Migraciones
● Rutas
● Motor de plantillas
● Artisan
8. Integración de UI con Laravel
Del Frontend al Backend

● Stack Frontend
● Stack Backend
● Herramientas
● Flujo de Trabajo
● Integración de UI
9. Interactividad en el frontend
Frontend en el Backend

● JS en el Frontend
● JS en el Backend
● Programación de Interactividad
● Deploy de Código Frontend
10. Docker y sus contendores
Características

● Imágenes
● Contenedores
● Ligereza
● Portabilidad
11. Deployment
El servidor

● Precios
● Simplicidad de uso
● Experiencia
La plataforma

● Dominio
● Instalación de herramientas
● Instalación de servicios
● “Tuning” de la plataforma
Subida de archivos

● Subida de archivos de código

● Subida de archivos de Data
Certificados SSL

● Instalación y Configuración de los certificados SSL

● Configuración de autorrenovación de certificados.
12. Entrega del proyecto
Entrega del proyecto

● Pruebas
● Demostración
● Capacitación al cliente
● Llenado de contenido (ver contrato)
● Cobro final
Fidelización del cliente

● CRM
● Soporte
● Email marketing
● Campañas
● Redes sociales
Tu portafolio

● Añade el proyecto en tu web

● Asegúrate de que no sea privado
● Casos de éxito
● Testimonios
¡Nos vemos en Bogotá!