El Blog de Cuble


Escrito por:

Cuble

Cuble

20 agosto, 2012

Etiquetas:

Manual de Initializr

initializr-generateur-template-html5-boilerplate

Initializr es una magnifica herramienta, que en Cuble utilizamos con asiduidad, que permite arrancar y acelerar los tiempos de desarrollo de tus proyectos web. Además permite crear de forma rápida páginas por defecto con las herramientas web más utilizadas del momento.

HTML5 BoilerPlate

html5-boilerplate

HTML5 Boilerplate es una plantilla con una configuración de HTML, CSS y Javascript específica para crear webs ‘responsive’ compatibles con todos los navegadores. También incluye: Modernizr, jQuery y CSS reset2.

Boilerplate también incluye muchas otras herramientas menos extendidas o menos utilizadas por los desarrolladores. Crea las compatibilidades Javascript necesarias para navegadores obsoletos (Internet Explorer 6 o 7), archivos de configuración, scripts para servicios externos como Google Analytics, etc.  Además Initializr te ayuda a descartar alguna de las herramientas que no vayas a utilizar de forma sencilla.

Initializr – Boilerplate rápido y customizado

La idea que hay detrás de Initializr es simplificar Boilerplate para que todo el mundo en un par de clicks pueda escoger de forma precisa los archivos que necesita. El código que Initializr genera está basado en el código original de Boilerplate.

HTML / CSS

initializr-html5-template

Boilerplate genera una página de inicio vacía (index.html) mientras Initializr genera la maqueta básica para ayudarte a empezar con la maquetación. La página Index genera bloques básicos como: header, footer, barra de navegación, barra lateral y un ejemplo de página del blog.

Javascript

jquery-logo

Boilerplate contiene un buen framework jQuery por defecto. Tú puedes elegir cómo lo quieres, versión comprimida, versión sin comprimir o ninguna de todas. Nosotros normalmente sugerimos la versión comprimida.

Compatibilidad

Los nuevos navegadores soportan completamente las nuevas características y etiquetas de HTML5, pero los más antiguos como Internet Explorer 8, necesita complementos para ser compatibles con HTML5. Estas porciones de código Javascript están unificadas en HTML5shiv.

Modernizr

modernizr-logo

Modernizr es un script que se utiliza para detectar si el navegador es compatible con ciertas características de Html5. Renderiza un html dado con las características compatibles.

Ejemplo:

< html lang=”en”>< html>

Por lo tanto podemos construir webs robustas y compatibles con todos los navegadores de forma genérica y rápida.

Configuración del servidor

Initializr te da la opción de incluir archivos de servidor web, para la mayoría de los servidores web. Si utilizas alguno como IIS, Apache, Nginx o Google App Engine, puedes incluir la versión optimizada a los archivos de configuración. Es importante destacar que config está preconfigurado para quitar www de la URL.  También puedes configurar el Server:

< IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteCond %{HTTPS} !=on
 RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
 RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
 < /IfModule>

initializr-download

Tras la descarga

Selecciona los componentes que necesitas para realizar la web y pulsa en descargar. Una vez descargado, descomprime el archivo en el directorio de desarrollo: En el directorio descomprimido hay un documento TODO.txt  que describe los pasos que hay que seguir para comenzar con tu proyecto. No te olvides cambiar el código del lenguaje, crear la página de error 404, etc .

Si has llegado hasta aquí, deberías ver la página por defecto que lleva initializr.



Deja que tu voz sea escuchada

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Performance Optimization WordPress Plugins by W3 EDGE