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