Front End & Responsive Web Design | DevFest Merida

300
-1

Published on

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

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
300
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Cuando las pantallas eran 800x600 y en los mejores casos podrían alcanzar 1024x790 pixels
  • Front End & Responsive Web Design | DevFest Merida

    1. 1. Front End & Responsive Web Design Luis Felipe Pérez.
    2. 2. Front End
    3. 3. ¿Front End?
    4. 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. 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. 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. 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. 8. Sobre los navegadores “El ambiente de desarrollo de software más hostil imaginable” - Douglas Crockford
    9. 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. 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. 11. ¿Mockup? ¿Wireframe?
    12. 12. ¿UX? ¿UI?
    13. 13. ¿UX? ¿UI?
    14. 14. ¿UX? ¿UI?
    15. 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. 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. 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. 18. El punto es... Los desarrolladores Front End le darán forma, resiliencia, seguridad, funcionalidad e interactividad a tu sitio o aplicación.
    19. 19. Responsive Web Design
    20. 20. Viajemos un poco en el tiempo
    21. 21. Recordemos aquellos tiempos... Todo mundo era feliz en 800x600
    22. 22. Y luego las pantallas crecieron… (y sus respectivas resoluciones)
    23. 23. Y los sitios web también crecieron
    24. 24. ¿Cual fué la solución?
    25. 25. ¡Diseños Flexibles!
    26. 26. Y todo era risa y diversión hasta que…
    27. 27. Nuevos dispositivos aparecen en escena.
    28. 28. ¿Solución? Una versión para cada dispositivo.
    29. 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. 30. Solución: Media Queries
    31. 31. ¿Media Queries? Es una utilidad CSS3 que nos permite cargar estilos de forma selectiva con base a las dimensiones de la pantalla.
    32. 32. ¿Eso es todo? Media Queries y el ingrediente complementario: <meta name=”viewport” content=”width=device-width, initial-scale1.0”>
    33. 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. 34. Dispositivos comunes
    35. 35. Resultado
    36. 36. ¡Ah! ¡Entonces el diseño adaptable es sobre hacer un diseño fluido o flexible!
    37. 37. ¡NO!
    38. 38. El diseño adaptable se trata de la forma en que se muestra el contenido.
    39. 39. Contenido
    40. 40. Escritorio
    41. 41. Tablet
    42. 42. Móvil
    43. 43. Quiero “Responsivear” ¿Por dónde comienzo?
    44. 44. Herramientas Básicas Navegador Editor de Texto
    45. 45. Lo que usualmente se hace
    46. 46. Lo IDEAL
    47. 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. 48. Importante ● Imágenes ● Dedos vs Puntero ● Tamaño de tipografías
    49. 49. Aún Más Importante Saber escribir buen código
    50. 50. Pero sobre todo... No discriminar a IE Aceptemoslo, por más que lo odiemos no se va a ir :(
    51. 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. 52. Otras Herramientas HTML5, CSS3, jQuery, Prototype, Mootools, Zepto, LESS, Sass, Stylus, HAML, Jade, CoffeeScript, Modernizr.js, YUI, Sencha, Bower, Grunt
    53. 53. ¡Gracias! felipe@hybridgroup.com twitter: @roverwire http://flavors.me/roverwire

    ×