Primeros pasos de una aplicación web - Rails Girls Córdoba

672 views
511 views

Published on

Presentación sobre los primeros pasos a dar a la hora de desarrollar una aplicación web, para la primera Rails Girls de Córdoba, por Sergio Gómez

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
672
On SlideShare
0
From Embeds
0
Number of Embeds
63
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Primeros pasos de una aplicación web - Rails Girls Córdoba

  1. 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. 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. 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. 4. Rails Girls Córdoba @sergiogomez ¡Tengo una idea!
  5. 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. 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. 7. Rails Girls Córdoba @sergiogomez Dibújalo
  8. 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. 9. Rails Girls Córdoba @sergiogomez
  10. 10. Rails Girls Córdoba @sergiogomez
  11. 11. Rails Girls Córdoba @sergiogomez El wireframe
  12. 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. 13. Rails Girls Córdoba @sergiogomez
  14. 14. Rails Girls Córdoba @sergiogomez El mockup
  15. 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. 16. Rails Girls Córdoba @sergiogomez
  17. 17. Rails Girls Córdoba @sergiogomez
  18. 18. Rails Girls Córdoba @sergiogomez Ahora sí… ¡A programar!
  19. 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. 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. 21. Rails Girls Córdoba @sergiogomez ¿Alguna pregunta?
  22. 22. Rails Girls Córdoba @sergiogomez ¡¡MUCHÍSIMAS GRACIAS!!

×