Presentación de la plática en el devfest en la ciudad de Mérida el día 28 de septiembre de 2013.

1. Front End & Responsive
Web Design
Luis Felipe Pérez.

2. Front End

3. ¿Front End?

4. ¿A qué se refiere con Front End?
● Es un término que engloba las
competencias requeridas para lo relativo a
diseño de interfaces (User Interface Design).
● Es la parte más visible de la aplicación o
desarrollo y la cual tiene impacto directo con
la experiencia del usuario (UX)

5. Desarrollador Front End
Aunque es un perfil muy cercano al diseñador,
el desarrollador Front End traduce las
interfaces visuales, es decir, las trabaja en
código. Tiene habilidades técnicas y de
programación de interfaz para cumplir con
estas tareas.

6. La web en el pasado
● Sitios web mayormente informativos.
● Uso de tablas para la disposición de
elementos.
● Quirks Mode / Retrocompatibilidad
● Uso de Marcos (frames)

7. Tendencias Actuales
● Uso de CSS
● Importancia en la interacción.
● Aprovechamiento de un mayor ancho de
banda.
● Lectores Móviles
● Combinación de tecnologías.
● Compatibilidad entre navegadores.
● Adaptación a diferentes dispositivos.

8. Sobre los navegadores
“El ambiente de desarrollo de software más
hostil imaginable”
- Douglas Crockford

9. El equipo
Actualmente un producto completo, llámese
sitio o aplicación web, no es posible sin contar
con al menos un diseñador, un desarrollador
front end y un desarrollador backend.

10. Bases Técnicas para el Front End
● HTML
● CSS
● Javascript
● Accesibilidad
● Conocimiento en patrones de diseño estándares.
● SEO
● Accesibilidad y Usabilidad
● Seguridad
● Optimización de código

11. ¿Mockup? ¿Wireframe?

12. ¿UX? ¿UI?

13. ¿UX? ¿UI?

14. ¿UX? ¿UI?

15. Procesos Front End
● Planeación, crítica y mejora a los modelos de
interacción y wireframes/mockups. (UI)
● Codificación (o maquetación) exacta del diseño.
● Adopción e implementación de estándares
● Desarrollo de interacciones con el uso de diferentes
tecnologías.
● Seguimiento de tendencias y tecnologías emergentes
para orientar las posibilidades de los diseñadores.
● Trabajo en el contexto de ingeniería, pero orientado a
los requerimientos de experiencia del usuario.

16. El punto es…
La clave del éxito de un Sitio o aplicación Web
está dada por la forma en que se presenta la
información a sus usuarios.

17. El punto es...
Si tienes un producto en línea, la mayor
cantidad del valor e impacto que le otorgue el
usuario final, dependerá de tu desarrollador
front end.

18. El punto es...
Los desarrolladores Front End le darán forma,
resiliencia, seguridad, funcionalidad e
interactividad a tu sitio o aplicación.

19. Responsive Web
Design

20. Viajemos un poco en el tiempo

21. Recordemos aquellos tiempos...
Todo mundo era feliz en 800x600

22. Y luego las pantallas crecieron…
(y sus respectivas resoluciones)

23. Y los sitios web también crecieron

24. ¿Cual fué la solución?

25. ¡Diseños Flexibles!

26. Y todo era risa y diversión hasta
que…

27. Nuevos dispositivos aparecen en
escena.

28. ¿Solución? Una versión para cada
dispositivo.

29. ¿Qué se necesitaba?
● Un diseño único que pudiera funcionar en
cualquier dispositivo.
● Que pudiera verse bien tanto en pantallas
pequeñas de dispositivos móviles como en
pantallas de escritorio.

30. Solución: Media Queries

31. ¿Media Queries?
Es una utilidad CSS3 que nos permite cargar
estilos de forma selectiva con base a las
dimensiones de la pantalla.

32. ¿Eso es todo?
Media Queries y el ingrediente complementario:
<meta name=”viewport” content=”width=device-width, initial-scale1.0”>

33. Definición:
“El diseño web adaptable es el diseño de sitios
o aplicaciones que responden hacia los
dispositivos, accediendo a sus características
y enviando una respuesta apropiada”
Ethan Marcotte

34. Dispositivos comunes

35. Resultado

36. ¡Ah! ¡Entonces el diseño
adaptable es sobre hacer
un diseño fluido o
flexible!

37. ¡NO!

38. El diseño adaptable se
trata de la forma en que se
muestra el contenido.

39. Contenido

40. Escritorio

41. Tablet

42. Móvil

43. Quiero “Responsivear”
¿Por dónde comienzo?

44. Herramientas Básicas
Navegador
Editor de Texto

45. Lo que usualmente se hace

46. Lo IDEAL

47. Importante
● Diseñar primero orientado a móvil y luego a
escritorio.
● Probar disposiciones de los elementos o
“Layout” cambiando las dimensiones de la
ventana hasta encontrar la medida donde la
disposición falle, y es ahí donde se debe
meter un media query.

48. Importante
● Imágenes
● Dedos vs Puntero
● Tamaño de tipografías

49. Aún Más Importante
Saber escribir buen código

50. Pero sobre todo...
No discriminar a IE
Aceptemoslo, por más que lo odiemos no se va a ir :(

51. Responsive Frameworks
Foundation: http://foundation.zurb.com/
Gumby: http://gumbyframework.com/
Bootstrap: http://getbootstrap.com/
Unsemantic: http://unsemantic.com/
Skeleton: http://www.getskeleton.com/

52. Otras Herramientas
HTML5, CSS3, jQuery,
Prototype, Mootools, Zepto,
LESS, Sass, Stylus, HAML,
Jade, CoffeeScript,
Modernizr.js, YUI, Sencha,
Bower, Grunt

53. ¡Gracias!
felipe@hybridgroup.com
twitter: @roverwire
http://flavors.me/roverwire