26/06/2013

Initializr, un punto de partida para el desarrollo en HTML5

Initializr, un punto de partida para el desarrollo en HTML5

Existen varias formas de agilizar un proyecto de desarrollo front-end. Una de ellas es el uso de un framework, que nos provee varios componentes listos para usar. Otra es modificar una plantilla prediseñada con la mayoría de los elementos que necesitamos, adaptando ligeramente algunos de ellos. Y una tercera alternativa es trabajar sobre una plantilla despojada, que contenga apenas una estructura básica, para utilizarla como un lienzo sobre el cual desarrollar los componentes deseados. En esta línea se inscribe Initializr, un generador de plantillas responsive personalizables en HTML5.

Initializr es, en realidad, un sistema para reconfigurar una plantilla base llamada HTML5 Boilerplate. Por defecto, esta solución presenta algunas características interesantes:

  • Adaptabilidad a múltiples plataformas. Incluye clases CSS específicas para asegurar una buena compatibilidad con Internet Explorer.
  • Seguridad cross-domain. Los scripts en Ajax y las aplicaciones en Flash de una página web no pueden acceder a un servidor web diferente a aquel en el que residen.
  • El apoyo de diversas tecnologías:
    • Normalize.css. Un normalizador de hojas de estilo, que adapta nuestras reglas CSS a la mayor cantidad de navegadores posible.
    • Modernizr. Si un navegador no soporta algún componente de nuestro sitio implementado con HTML5 o CSS3, esta biblioteca JavaScript lo reemplazará con un elemento alternativo que ese browser sí pueda interpretar.
    • jQuery. La versión reducida de la biblioteca de JavaScript.
    • Apache. Establece la mejor configuración posible de este servidor web, para garantizar un alto rendimiento.
    • Google Analytics. Incluye un snippet optimizado de la popular herramienta de métricas web de Google.

Sin embargo, con Initializr podemos hacer algunas modificaciones sobre este esquema. Por ejemplo, usar HTML5 Shiv en vez de Modernizr, deshabilitar algunas características originales, usar la versión completa de jQuery o incluir algunos archivos básicos, como robots.txt y .htaccess.

Pero el principal aporte de Initializr es su plantilla principal, con un sencillo esquema de encabezado (menú de navegación incluido), bloque de artículos, barra lateral y pie de página. Sobre ese layout podemos implementar sitios web aptos para dispositivos móviles y con todas las ventajas de HTML5 Boilerplate.

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