18/12/2013

Foundation: otro framework para desarrollo front-end

Foundation: otro framework para desarrollo front-end

Usar un framework para desarrollo front-end tiene tantas ventajas como desventajas. Sin embargo, siempre que aparece una nueva opción en este campo es útil echarle una mirada. Probablemente, se trate de la solución para desarrollar el sitio web que queremos en poco tiempo.

La competencia de Bootstrap se llama Foundation y es un framework orientado al desarrollo de sitios web responsivos bajo el enfoque mobile first. Se propone como «un framework fácil de usar, flexible y poderoso para construir prototipos y código definitivo para cualquier clase de dispositivo».

¿Cuáles son sus principales características?

  • fastclick.js. En dispositivos móviles, el «toque» con el dedo tarda 300 milisegundos más que el clic en disparar la acción. Este polyfill elimina ese retraso.
  • Aceleración de GPU. Optimiza el hardware de procesamiento de gráficos para que las animaciones de nuestro sitio web se vean más fluidas.
  • Off Canvas. Permite crear menús, originalmente invisibles, que se deslicen desde uno de los bordes de la pantalla cuando son activados. El menú sólo aparece cuando lo necesitamos, sin ocupar espacio el resto del tiempo.
  • Formularios mejorados. Podemos crear formularios atractivos con diversas disposiciones de campos y etiquetas.
  • Grilla. Podemos dividir el contenido en un conjunto de divs, que, en el caso de estar navegando desde un dispositivo móvil, podrán apilarse para ocupar menos espacio horizontal.
  • Semántica. Gracias al uso de mixins de Sass, un preprocesador de CSS, podemos utilizar los componentes ya implementados de Foundation pero utilizando nuestros propios nombres de clases. Así, cada porción de código tendrá un significado reconocible.
  • Personalización. Tenemos la opción de descargar sólo las características de Foundation que nos interesen, de manera de utilizar una versión lo más liviana posible.

Además de la grilla y los formularios, Foundation nos provee elementos de navegación, botones, tipografías, barras de progreso (para informar la carga de una página), menús desplegables, presentaciones de diapositivas, feature tours (series de carteles que van señalando distintas partes de la página en un orden definido) y otros objetos listos para usar. Todo lo necesario para crear sitios web profesionales rápidamente.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce