primeros pasos de una aplicación web - rails girls córdoba
DESCRIPTION
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ómezTRANSCRIPT
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
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
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
Rails Girls Córdoba @sergiogomez
¡Tengo una idea!
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
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”)
Rails Girls Córdoba @sergiogomez
Dibújalo
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
Rails Girls Córdoba @sergiogomez
Rails Girls Córdoba @sergiogomez
Rails Girls Córdoba @sergiogomez
El wireframe
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
Rails Girls Córdoba @sergiogomez
Rails Girls Córdoba @sergiogomez
El mockup
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
Rails Girls Córdoba @sergiogomez
Rails Girls Córdoba @sergiogomez
Rails Girls Córdoba @sergiogomez
Ahora sí…¡A programar!
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
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
Rails Girls Córdoba @sergiogomez
¿Alguna pregunta?
Rails Girls Córdoba @sergiogomez
¡¡MUCHÍSIMAS GRACIAS!!