El documento resume los primeros pasos para desarrollar una aplicación web, incluyendo definir la idea y el problema a resolver, hacer bocetos en papel, crear wireframes, hacer mockups con diseño, implementar el diseño en código, y luego programar la lógica de la aplicación usando un framework como Ruby on Rails.

1. Rails Girls Córdoba @sergiogomez
Primeros pasos
de una aplicación web
Una presentación original de Karri Saarinen
http://www.slideshare.net/karrisaarinen/just-design-it-an-approach-to-web-app-design

2. Rails Girls Córdoba @sergiogomez
● Socio fundador de QuaiP.com
● Web Developer Ruby on Rails / HTML / CSS / jQuery
● Coworker feliz en coSfera
Sergio Gómez - @sergiogomez
Una vida dedicada a la sonrisa, a mis niños, y al rock and roll

3. Rails Girls Córdoba @sergiogomez
● Desarrollo e infraestructuras avanzadas de VoIP
● Servidores de streaming de radio y TV
● Cloud, VPS y servidores avanzados para aplicaciones

4. Rails Girls Córdoba @sergiogomez
¡Tengo una idea!

5. Rails Girls Córdoba @sergiogomez
1 La idea
+ ¿Qué problema intento resolver?
+ ¿Por qué?
+ ¿Quién va a ser el cliente de mi aplicación?
+ Objetivos a lograr

6. Rails Girls Córdoba @sergiogomez
1 La idea - Breaf
Un pequeño documento con varias secciones:
+ Problema
+ Solución
+ Objetivos
+ Vistas (pantallas)
+ Usuarios tipo (“Personas”)

7. Rails Girls Córdoba @sergiogomez
Dibújalo

8. Rails Girls Córdoba @sergiogomez
+ En un papel
+ Lápiz y goma
+ Lista de vistas (pantallas)
+ Lista de elementos
+ Priorizar y agrupar elementos
+ Dibujar, dibujar, dibujar...
2 El boceto

9. Rails Girls Córdoba @sergiogomez

10. Rails Girls Córdoba @sergiogomez

11. Rails Girls Córdoba @sergiogomez
El wireframe

12. Rails Girls Córdoba @sergiogomez
+ Es el resultado de llevar el boceto del papel al ordenador
+ Sin diseño. Sólo funcionalidad y dónde va cada elemento
+ Útil para compartir entre desarrolladores y para enseñar a
los clientes
+ Layout: cabecera, menú, contenido, pie, cajas
+ Elementos: textos, enlaces, botones, imágenes, formularios
3 El wireframe

13. Rails Girls Córdoba @sergiogomez

14. Rails Girls Córdoba @sergiogomez
El mockup

15. Rails Girls Córdoba @sergiogomez
+ Es el diseño real de la aplicación (sin programación) a partir
del wireframe
+ Se realiza con un programa de diseño
(Photoshop/Illustrator/Powerpoint…)
+ Debe usar una cuadrícula para la disposición de todos los
elementos
+ Tipografía a usar Un 95% de la web es tipografía
4 El mockup

16. Rails Girls Córdoba @sergiogomez

17. Rails Girls Córdoba @sergiogomez

18. Rails Girls Córdoba @sergiogomez
Ahora sí…
¡A programar!

19. Rails Girls Córdoba @sergiogomez
+ Primera fase de codificación (HTML/CSS/JavaScript)
+ Se implementa el diseño para que pueda visualizarse en un
navegador
+ Se codifican todos los elementos que van a repetirse
(formularios, notificaciones, errores, contenidos…)
5 La implementación - Maquetación

20. Rails Girls Córdoba @sergiogomez
+ Usamos nuestro lenguaje o framework favorito (como Ruby
on Rails)
+ Se crean los modelos de datos, las vistas, sus controladores,
añadimos la maquetación, probamos, etc...
5 La implementación - Programación

21. Rails Girls Córdoba @sergiogomez
¿Alguna pregunta?

22. Rails Girls Córdoba @sergiogomez
¡¡MUCHÍSIMAS GRACIAS!!