Front End & Responsive Web Design

Luis Felipe Pérez.

Front End

¿Front End?

¿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)

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.

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)

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.

Sobre los navegadores

“El ambiente de desarrollo de software más hostil imaginable”

- Douglas Crockford

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.

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

¿Mockup? ¿Wireframe?

¿UX? ¿UI?

¿UX? ¿UI?

¿UX? ¿UI?

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.

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.

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.

El punto es...

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

Responsive WebDesign

Viajemos un poco en el tiempo

Recordemos aquellos tiempos...

Todo mundo era feliz en 800x600

Y luego las pantallas crecieron…

(y sus respectivas resoluciones)

Y los sitios web también crecieron

¿Cual fué la solución?

¡Diseños Flexibles!

Y todo era risa y diversión hasta que…

Nuevos dispositivos aparecen en escena.

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

¿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.

Solución: Media Queries

¿Media Queries?

Es una utilidad CSS3 que nos permite cargar estilos de forma selectiva con base a las

dimensiones de la pantalla.

¿Eso es todo?

Media Queries y el ingrediente complementario:

<meta name=”viewport” content=”width=device-width, initial-scale1.0”>

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

Dispositivos comunes

Resultado

¡Ah! ¡Entonces el diseño adaptable es sobre hacer

un diseño fluido o flexible!

¡NO!

El diseño adaptable se trata de la forma en que se

muestra el contenido.

Contenido

Escritorio

Tablet

Móvil

Quiero “Responsivear”¿Por dónde comienzo?

Herramientas Básicas

Navegador

Editor de Texto

Lo que usualmente se hace

Lo IDEAL

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.

Importante

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

Aún Más Importante

Saber escribir buen código

Pero sobre todo...

No discriminar a IEAceptemoslo, por más que lo odiemos no se va a ir :(

Responsive Frameworks

Foundation: http://foundation.zurb.com/Gumby: http://gumbyframework.com/Bootstrap: http://getbootstrap.com/

Unsemantic: http://unsemantic.com/Skeleton: http://www.getskeleton.com/

Otras Herramientas

HTML5, CSS3, jQuery, Prototype, Mootools, Zepto, LESS, Sass, Stylus, HAML,

Jade, CoffeeScript, Modernizr.js, YUI, Sencha,

Bower, Grunt

¡Gracias!

felipe@hybridgroup.comtwitter: @roverwirehttp://flavors.me/roverwire