![Page 1: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/1.jpg)
Rails Girls Córdoba @sergiogomez
Primeros pasosde una aplicación webUna presentación original de Karri Saarinenhttp://www.slideshare.net/karrisaarinen/just-design-it-an-approach-to-web-app-design
![Page 2: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/2.jpg)
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 - @sergiogomezUna vida dedicada a la sonrisa, a mis niños, y al rock and roll
![Page 3: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/3.jpg)
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
![Page 4: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/4.jpg)
Rails Girls Córdoba @sergiogomez
¡Tengo una idea!
![Page 5: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/5.jpg)
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
![Page 6: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/6.jpg)
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”)
![Page 7: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/7.jpg)
Rails Girls Córdoba @sergiogomez
Dibújalo
![Page 8: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/8.jpg)
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
![Page 9: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/9.jpg)
Rails Girls Córdoba @sergiogomez
![Page 10: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/10.jpg)
Rails Girls Córdoba @sergiogomez
![Page 11: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/11.jpg)
Rails Girls Córdoba @sergiogomez
El wireframe
![Page 12: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/12.jpg)
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
![Page 13: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/13.jpg)
Rails Girls Córdoba @sergiogomez
![Page 14: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/14.jpg)
Rails Girls Córdoba @sergiogomez
El mockup
![Page 15: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/15.jpg)
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
![Page 16: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/16.jpg)
Rails Girls Córdoba @sergiogomez
![Page 17: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/17.jpg)
Rails Girls Córdoba @sergiogomez
![Page 18: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/18.jpg)
Rails Girls Córdoba @sergiogomez
Ahora sí…¡A programar!
![Page 19: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/19.jpg)
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
![Page 20: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/20.jpg)
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
![Page 21: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/21.jpg)
Rails Girls Córdoba @sergiogomez
¿Alguna pregunta?
![Page 22: Primeros pasos de una aplicación web - Rails Girls Córdoba](https://reader033.vdocuments.mx/reader033/viewer/2022052907/5592ab841a28abfd548b4726/html5/thumbnails/22.jpg)
Rails Girls Córdoba @sergiogomez
¡¡MUCHÍSIMAS GRACIAS!!