primeros pasos de una aplicación web - rails girls córdoba

22
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

Upload: quaip

Post on 30-Jun-2015

407 views

Category:

Technology


1 download

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ómez

TRANSCRIPT

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

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

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

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

Rails Girls Córdoba @sergiogomez

¡Tengo una idea!

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

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

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

Rails Girls Córdoba @sergiogomez

Dibújalo

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

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

Rails Girls Córdoba @sergiogomez

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

Rails Girls Córdoba @sergiogomez

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

Rails Girls Córdoba @sergiogomez

El wireframe

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

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

Rails Girls Córdoba @sergiogomez

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

Rails Girls Córdoba @sergiogomez

El mockup

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

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

Rails Girls Córdoba @sergiogomez

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

Rails Girls Córdoba @sergiogomez

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

Rails Girls Córdoba @sergiogomez

Ahora sí…¡A programar!

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

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

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

Rails Girls Córdoba @sergiogomez

¿Alguna pregunta?

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

Rails Girls Córdoba @sergiogomez

¡¡MUCHÍSIMAS GRACIAS!!