Descargar Boilerplate 1.0 Actualizado el 21 de Marzo

Boilerplate documentado Con comentarios y enlaces o Boilerplate "pelado" Sin comentarios, sólo el código o Boilerplate a medida 100%percnt; hipster. nuevo!

Haga click en su opción favorita para cada característica! Las opcionespor defecto están resaltadas.

Facilitado de HTML5

No Modernizr html5shiv

Configuración de Servidor

No .htaccess web.config nginx.conf

Google Analytics

Snippet de Analytics No

Descargar! ¿Estas opciones no son suficientes? ¡Vaya a Initializr para más!

HTML5 Boilerplate es 1.0!

Lunes, 21 de Marzo, 2011

Junto al compromiso duro como una roca por la consistencia entre navegadores de HTML5 Boilerplate, H5BP le da una deliciosa documentación, un build script para optimizar el sitio, y un constructor de boilerplate a medida. Además de esto, ahora soportamos lighttpd, Google App Engine y NodeJS con configuraciones de servidor optimizadas (junto a Apache, Nginx, e IIS) y hemos reducido el tamaño total del boilerplate publicado por 50%.

Rápidamente vea el por qué de todo lo que ve.

¡Documentación!

Ahora tenemos una bastante completa documentación, contribuida por la comunidad y diseñada/implementada por Mickael Daniel. Pueden agregar cosas ustedes si lo desean.

Siéntanse libres de zambullirse si tienen dudas sobre un pedazo de código en particular. Probablemente ya hemos documentado qué está pasando y por qué es una buena idea. Algunas páginas que disfrutará de leer: El Marcado, Los Estilos, Mejorelo, y Empezando. Ahora también tenemos varios videos para guiarlo a través de todo esto..

Satisfaga las métricas de rendimiento de herramientas como YSlow y Pagespeed fácilmente.

Build Script de Boilerplate

El build script del Boilerplate está listo. ¿Ha visto todos esos trucos de optimización que Steve Souders le dice que son una buena idea?" Ahora está a cuatro tecleos de lograr un 100% en ellos. El build script:

  • Combina y minifica javascript (via yui compressor)
  • Combina y minifica CSS
  • Optimiza JPGs y PNGs (con jpegtran y optipng), salvando 15-50% del peso de la página
  • Borra código de desarrollo (archivos console.log remanentes, profiling, test suite)
  • Minificación HTML básica a agresiva (via htmlcompressor)
  • Revisa los nombres de archivos de sus recursos para que pueda usar cacheo fuerte (expiración a 1 año) sin conflictos de caché.
  • Mejora el .htaccess para usar cacheo más fuerte
  • Actualiza su HTML para hacer referencia a los nuevos y súper-optimizados archivos CSS + JS
  • Actualiza su HTML para usar la versión minificada de jQuery en lugar de la de desarrollo
  • Elimina referencias innecesarias del HTML (como un favicon en la carpeta raíz)
  • build de acuerdo a qué entorno desea: producción, test o desarrollo

Junto con las configuraciones de servidor (como el .htaccess), hemos visto reducciones del peso total de página desde 120k a 30k. Garantizamos un nive A de rendimiento con YSlow y Google PageSpeed cuando use el build script junto con las configuraciones de servidor. (OK, tal vez no "garantizamos", pero sus padres estarán realmente orgullosos de usted. :)"

379k antes. 170k luego. Los resultados fueron de correr el build script en una versión pre-release del mismo sitio html5boilerplate.com. Proveemos configuraciones por defecto para Apache, IIS, Nginx, Lighttpd, Google App Engine, y NodeJS.
Personalice su boilerplate a gusto.

Boilerplate Personalizado

Oh, sí! Lo pidió, ahora lo tiene: un constructor personalizado! Puede haber visto Initializr por Jonathan Verrecchia. Lo hemos integrado en el proyecto, así que ahora tiene un control completo para elegir sólo lo que quiere.

  • Elija qué tipo de clases condicionales quiere: ninguna, IE viejo o todos los IE
  • ¿Quiere estilos para móviles? ¡Ahora puede elegir!
  • Si quiere una versión de jQuery minificada, o puede no usar javascript o jQuery directamente.
  • ¿Ama html5shiv? Ahora puede usarlo en lugar de Modernizr
  • Archivos de configuración para IIS, Nginx o ninguno disponibles para ser elegidos
  • Si no le gusta Google Analytics, puede elegir no tenerlo

Ahora, además de la documentación, el build script, y el initializr, tenemos algunas mejoras en la base del boilerplate:

Build Script

  • Rewrite masivo así puede definir con qué archivos HTML, CSS y JS operar en los archivos configurables project.properties. Esto le permite al build script operar en una arquitectura de carpetas única, incluyendo proyectos no realizados con H5BP.
  • Los entornos son denifibles
  • Headers htaccess de expiración son aumentados a 1 año, ya que los nombres de los archivos son mejorados.
  • Agregada una opción para el directorio fuente en la configuración del build, así los archivos fuente pueden estar en diferentes carpetas de los archivos finales generados (útil para otros CMS/frameworks como Django).

index.html

style­.css

  • Agregada clase de ayuda .focusable que extiende .visuallyhidden para permitir al elemento obtener foco cuando es navegado via teclado.
  • Los enlaces no son más reseteados. Básicamente nuestro reset es efectivamente mezclado con la actualización reciente al CSS reset de Eric Meyer y también con el reset de HTML5 Doctor.
  • Una lista sin orden dentro de un elemento nav no tendrá mas un margen.
  • Todas las clases de ayuda están ahora luego de los estilos primarios para asegurar sobre-escrituras correctas y no ser molestadas por resets.
  • .visuallyhidden no es más camelCase, para ser consistente con los otros formatos de nombre de clase.
  • Actualizada la especificidad de la regla .visuallyhidden para asegurarse que sobre-escribe todas las otras declaraciones.
  • Removido el reset en elementos de imagen dentro de celdas de tablas ya que se ven mal junto a textos multi-línea. Los navegadores por defecto alinean al baseline a las imágenes que funciona mejor que el alineamiento top.
  • Increased margin-left on ol, to allow for 2-digit list numbers.
  • Agregado un reset de impresión en los filtros proprietarios de IE.
  • Los estilos de impresión ya no imprimen links de numeral o links de javascript.
  • Actualizado el CSS sub/sup para que no sean impactados por line-height, así que ahora puede hacer sub/superscripts sin preocuparse.

Proyecto

  • Agregado un humans.txt para que puedas clarificar la autoría y herramientas usadas.
  • Removido el YUI profiling. Probablemente no lo usabas de todos modos.
  • Removidos los unit tests de QUnit. No hay necesidad de incluirlos, realmente.

Configuraciones de Servidor Web

.htaccess
  • .htaccess está mucho más documentado ahora. Pégale una leída!
  • Cambiado el mimetype de los archivos .ico a "image/x-icon".
  • Los archivos HTML Manifest ahora usan la extensión .appcache, de acuerdo a http://html5.org/r/5812.
  • Force deflate para headers accept-encoding headers destrozados, cortesía de investigaciones de Yahoo!
  • Nerfeamos algunas de las directivas en caso de que esté en un server sin mod_headers. (que es totalmente loco!)
  • Bloquear acceso a las carpetas .git y .svn.
  • Erradicar la advertencia de la consola de Chrome sobre descargas de fuentes WOFF.
  • Más optimizaciones disponibles si setea los detalles del .htaccess en su httpd.conf
  • .htaccess ahora cachea archivos .htc
  • Movidas todas las configuraciones de servidor (excepto el .htaccess de Apache a la nueva repo html5-boilerplate-server-config. Vaya allí si no está usando Apache.
  • Actualizado el .htaccess y mime.types para formatos ogg.
  • Arreglada regresión cuando fuentes EOT han sido excluidas de la compresión DEFLATE.
  • Independencia de versión de Apache: Usar mod_filter para compresión, con fallback a directiva AddOutputFilterByType para versiones antiguas.
  • Agregados plugin/extension mime types para Safari, Chrome, Firefox
nginx
  • Limpiadas las directivas de expiración del caché.
  • Ahora incluye SVG y formatos de fuentes para gzipping.
  • Bug de header de expiración arreglado.
IIS
  • Agregados mime types de video Flash al IIS server
  • Agregadas algunas rarezas de mimetype que prevenían el cacheo adecuado

Básicamente un montón de grandes actualizaciones se hicieron para 1.0. Aquí están todos los 220 commits desde la última versión gracias a más de 102 colaboradores.Puede preguntarse, sin embargo, ¿necesito actualizar sitios existentes? Respuesta corta: no, no hace falta.

Venga, veamos el código

index.html

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->  <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Siempre forzar el último motor de rendering de IE (incluso en intranet) & Chrome Frame
       Remover esto si usa el .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Optimización para dispositivos moviles: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Colocar favicon.ico & apple-touch-icon.png en la raíz de su dominio y eliminar estas referencias -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">


  <!-- CSS: media="all" implícita -->
  <link rel="stylesheet" href="css/style.css?v=2">

  <!-- Descomentar si tu destino son navegadores menos capaces de dispositivos moviles
  <link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">  -->

  <!-- Todo el JavaScript en el fondo, excepto por Modernizr que habilita elementos HTML5 & detección de características -->
  <script src="js/libs/modernizr-1.7.min.js"></script>

</head>

<body>

  <div id="container">
    <header>

    </header>
    <div id="main" role="main">

    </div>
    <footer>

    </footer>
  </div> <!--! fin de #container -->


  <!-- JavaScript al fondo para carga rápida de la página -->

  <!-- Obtener jQuery del CDN de Google, con una URL relativa al protocolo; fallback a copia local si es necesario -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">\x3C/script>')</script>


  <!-- scripts concatenados y minimizados mediante un script de hormiga-->
  <script src="js/plugins.js"></script>
  <script src="js/script.js"></script>
  <!-- fin de scripts-->


  <!--[if lt IE 7 ]>
    <script src="js/libs/dd_belatedpng.js"></script>
    <script>DD_belatedPNG.fix('img, .png_bg'); // Arreglar cualquier <img> o imagen de fondo .png_bg. También lea goo.gl/mZiyb </script>
  <![endif]-->


  <!-- mathiasbynens.be/notes/async-analytics-snippet Cambiar UA-XXXXX-X por el ID de su sitio -->
  <script>
    var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));
  </script>

</body>
</html>

style­.css

/**
 * HTML5 ✰ Boilerplate
 *
 * style.css contiene el reset, la normalización de fuentes y algunos estilos base
 *
 * Crédito es dejado donde el crédito es merecido.
 * Mucha inspiración fue obtenida de estos proyectos:
 * - yui.yahooapis.com/2.8.1/build/base/base.css
 * - camendesign.com/design/
 * - praegnanz.de/weblog/htmlcssjs-kickstart
 */


/**
 * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
 * v1.6.1 2010-09-17 | Autores: Eric Meyer & Richard Clark
 * html5doctor.com/html-5-reset-stylesheet/
 */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }


/**
 * Normalización de fuente inspirada por YUI Library's fonts.css: developer.yahoo.com/yui/
 */

body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retenido para preservar especificidad */
select, input, textarea, button { font:99% sans-serif; }

/* Normalizar tamaño de monospace:
   en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre, code, kbd, samp { font-family: monospace, sans-serif; }


/**
 * Estilos base mínimos.
 */

/* Siempre forzar una barra de desplazamiento en no-IE */
html { overflow-y: scroll; }

/* Métodos de foco de accesibilidad: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }

ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }

/* Quitar el margen para las listas de navegación */
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }

small { font-size: 85%; }
strong, th { font-weight: bold; }

td { vertical-align: top; }

/* Setear sub, sup sin afectar line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre {
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre; white-space: pre-wrap; word-wrap: break-word;
  padding: 15px;
}

textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */

.ie6 legend, .ie7 legend { margin-left: -7px; } 

/* Alinear checkboxes, radios, text inputs con sus etiquetas por: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* Cursor de mano en elementos input clickeables */
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }

/* Navegadores Webkit agregan margen de 2px fuera del chrome en elmentos de formulario */
button, input, select, textarea { margin: 0; }

/* Colores para validación de formularios */
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid {
   border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }


/* Estas declaraciones de selección tienen que estar separadas
   Sin sombreado de texto: twitter.com/miketaylr/status/12228805301
   También: hot pink! */
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }

/* j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #FF5E99; }

/* Hacer que los botones funcionen bien en IE:
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }

/* Redimensionamiento bicúbico para IMG dimensionadas no-nativamente
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }

/**
 * Puede que quieras modificar estas...
 */

body, select, input, textarea {
  /* #444 se ve mejor que negro: twitter.com/H_FJ/statuses/11800719859 */
  color: #444;
  /* Setee su fuente base aquí, para aplicarla uniformemente */
  /* font-family: Georgia, serif;  */
}

/* Los encabezados (h1, h2, etc) no tienen font-size o margen por defecto; defínalos usted */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }

a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }


/**
 * Estilos primarios
 *
 * Autor:
 */
















/**
 * Clases de ayuda no-semánticas: por favor defina sus estilos antes de esta sección.
 */

/* Para reemplazo de imagen */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

/* Esconder para los lectores de pantalla y navegadores:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Esconder sólo visualmente, pero dejarlo disponible para lectores de pantalla. por Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extender la clase .visuallyhidden para permitir al elemento obtener foco cuando es navegado via teclado: drupal.org/node/897638 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Esconderlo visualmente y de lectores de pantalla pero mantener la maquetación */
.invisible { visibility: hidden; }

/* El Magnífico Clearfix: Actualizado para prevenir colapso de márgenes en elementos hijos
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Ajuste clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }



/**
 * Media queries para diseño responsivo.
 *
 * Estos siguen a los estilos primarios así que los sobreescribiran con éxito
 */

@media all and (orientation:portrait) {
  /* Ajustes de estilo para el modo vertical van aquí */

}

@media all and (orientation:landscape) {
  /* Ajustes de estilo para el modo apaisado van aquí */

}

/* Navegadores móviles Grado-A (Opera Mobile, Mobile Safari, Android Chrome)
   considere esto: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {


  /* Descomentar si no quiere que iOS y WinMobile optimicen el texto para móvil por usted: j.mp/textsizeadjust */
  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}


/**
 * Estilos de impresión.
 *
 * Inclinado a evitar la conexión HTTP requerida: www.phpied.com/delay-loading-your-print-css/
 */
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } /* Negro se imprime más rápido: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* No mostrar enlaces para imágenes, o enlaces internos/javascript */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}

plugins.js

// uso: log('inside coolFunc', this, arguments);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function(){
  log.history = log.history || [];   // almacenar logs en un array para referencia
  log.history.push(arguments);
  arguments.callee = arguments.callee.caller;  
  if(this.console) console.log( Array.prototype.slice.call(arguments) );
};
// hacer que sea siempre seguro usar console.log
(function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info, log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();)b[a]=b[a]||c})(window.console=window.console||{});


// colocar cualquier plugin jQuery/helper aquí, en lugar de archivos separados, que son más lentos.

script.js

/* Autor:

*/

robots.txt

# www.robotstxt.org/
# www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156449

User-agent: *

humans.txt

/* los humanos responsables & colofón */
/* humanstxt.org */


/* TEAM/EQUIPO */
  <your title>: <your name>
  Site: 
  Twitter: 
  Location: 

/* THANKS/AGRADECIMIENTOS */
  Names (& URL): 

/* SITE/SITIO */
  Standards: HTML5, CSS3
  Components: Modernizr, jQuery
  Software:
  

                                    
                               -o/-                       
                               +oo//-                     
                              :ooo+//:                    
                             -ooooo///-                   
                             /oooooo//:                   
                            :ooooooo+//-                  
                           -+oooooooo///-                 
           -://////////////+oooooooooo++////////////::    
            :+ooooooooooooooooooooooooooooooooooooo+:::-  
              -/+ooooooooooooooooooooooooooooooo+/::////:-
                -:+oooooooooooooooooooooooooooo/::///////:-
                  --/+ooooooooooooooooooooo+::://////:-   
                     -:+ooooooooooooooooo+:://////:--     
                       /ooooooooooooooooo+//////:-        
                      -ooooooooooooooooooo////-           
                      /ooooooooo+oooooooooo//:            
                     :ooooooo+/::/+oooooooo+//-           
                    -oooooo/::///////+oooooo///-          
                    /ooo+::://////:---:/+oooo//:          
                   -o+/::///////:-      -:/+o+//-         
                   :-:///////:-            -:/://         
                     -////:-                 --//:        
                       --                       -:

.htaccess

# Archivo de configuración de Apache
# httpd.apache.org/docs/2.2/mod/quickreference.html

# Note que los archivos .htaccess son una carga adicional, esta lógica debería estar en su configuración de Apache en lo posible
# httpd.apache.org/docs/2.2/howto/htaccess.html

# Las técnicas adaptadas de aquí en adelante, incluyendo:
#   Kroc Camen: camendesign.com/.htaccess
#   perishablepress.com/press/2006/01/10/stupid-htaccess-tricks/
#   Archivo .htaccess de ejemplo de CMS MODx: modxcms.com


###
### Si corre un servidor web que no sea Apache, considere:
### github.com/paulirish/html5-boilerplate-server-configs
###



# ----------------------------------------------------------------------
# Mejor experiencia del sitio para usuarios de IE
# ----------------------------------------------------------------------

# Obligar a la última versión de IE, en varios casos cuando regrese al modo IE7
# github.com/rails/rails/commit/123eb25#commitcomment-118920
# Usar ChromeFrame si está instalado para una mejor experiencia para los pobres hombres en IE

<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    BrowserMatch MSIE ie
    Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
  </IfModule>
</IfModule>

<IfModule mod_headers.c>
# 
# Porque X-UA-Compatible no es enviado a no-IE (para salvar bytes del header), necesitamos informar a los proxies que el contenido cambia basado en AU
# 
  Header append Vary User-Agent
# Control de caché es seteado sólo si mod_headers está habilitado, así que eso no hace falta declararlo
</IfModule>


# ----------------------------------------------------------------------
# Requests Ajax cross-domain
# ----------------------------------------------------------------------

# Servir requests Ajax cross-domain, deshabilitado   
# enable-cors.org
# code.google.com/p/html5security/wiki/CrossOriginRequestSecurity

#  <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
#  </IfModule>



# ----------------------------------------------------------------------
# Acceso a webfont
# ----------------------------------------------------------------------

# 
# Permitir acceso de todos los dominios para webfonts
# alternativamente puede usar una whitelist
# de sus dominios como "sub.domain.com"
# 

<FilesMatch "\.(ttf|otf|eot|woff|font.css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>



# ----------------------------------------------------------------------
# MIME type adecuado para todos los archivos
# ----------------------------------------------------------------------

# audio
AddType audio/ogg                      oga ogg

# vídeo
AddType video/ogg                      ogv
AddType video/mp4                      mp4
AddType video/webm                     webm

# Sirviendo svg correctamente. Obligatorio para tipografias svg en iPad
#   twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml              svg svgz 
AddEncoding gzip                       svgz
                                       
# webfonts                             
AddType application/vnd.ms-fontobject  eot
AddType font/truetype                  ttf
AddType font/opentype                  otf
AddType application/x-font-woff              woff

# diversos tipos                                      
AddType image/x-icon                   ico
AddType image/webp                     webp
AddType text/cache-manifest            appcache manifest
AddType text/x-component               htc
AddType application/x-chrome-extension crx
AddType application/x-xpinstall        xpi
AddType application/octet-stream       safariextz



# ----------------------------------------------------------------------
# Permitir concatenación dentro de archivos específicos de js y css  
# ----------------------------------------------------------------------

# 
# permitir concatenación dentro de archivos específicos de js y css
#
# e.g. Inside of script.combined.js you could have
#
#   <!--#include file="jquery-1.4.2.js" -->
#   <!--#include file="jquery.idletimer.js" -->
#
# and they would be included into this single file
# 
#
# 
# Esto no está en uso en el boilerplate como está. Puede elegir nombrar sus archivos de este modo por esta ventaja o concatenar y minificarlos manualmente.
# 
# Desactivado por defecto.

# <FilesMatch "\.combined\.(js|css)$">
#         Options +Includes
#         SetOutputFilter INCLUDES
# </FilesMatch>



# ----------------------------------------------------------------------
# compresión gzip
# ----------------------------------------------------------------------

<IfModule mod_deflate.c>


# force deflate para headers destrozados 
# developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s,?\s(gzip|deflate)?|X{4,13}|~{4,13}|-{4,13})$ HAVE_Accept-Encoding
    RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
  </IfModule>
</IfModule>
# html, txt, css, js, json, xml, htc:
<IfModule filter_module>
  FilterDeclare   COMPRESS
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type /text/(html|css|javascript|plain|x(ml|-component))/
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type /application/(javascript|json|xml|x-javascript)/
  FilterChain     COMPRESS
  FilterProtocol  COMPRESS  change=yes;byteranges=no
</IfModule>

<IfModule !mod_filter.c>
  # Versiones antiguas de Apache
  AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript 
  AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
</IfModule>

# webfonts y svg:
  <FilesMatch "\.(ttf|otf|eot|svg)$" >
    SetOutputFilter DEFLATE
  </FilesMatch>
</IfModule>



# ----------------------------------------------------------------------
# Headers de expiración (para mejor control de caché)
# ----------------------------------------------------------------------

# 
# estos son headers de expiración de futuro bastante lejano
# asumen que tiene hace control de versión con cachebusting query params como:
#   <script src="application.js?20100608">
# adicionalmente, considere que proxies desactualizados pueden miscachear
# 
#   www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

# 
# si no usa nombres de archivos para versionar, baje el css y js a algo como "access plus 1 week" 
# 

<IfModule mod_expires.c>
  ExpiresActive on

# ¿Tal vez sea mejor usar normas de lista blanca de caducidad? Tal vez.
  ExpiresDefault                          "access plus 1 month"

# cache.appcache necesita re-requests en FF 3.6 (gracias Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest       "access plus 0 seconds"



# so documento html
  ExpiresByType text/html                 "access plus 0 seconds"
  
# información
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"

# feed rss
  ExpiresByType application/rss+xml       "access plus 1 hour"

# favicon (no se puede renombrar)
  ExpiresByType image/x-icon              "access plus 1 week" 

# media: images, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"
  
# archivos htc (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"
  
# webfonts
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType font/woff                 "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
    
# css y javascript
  ExpiresByType text/css                  "access plus 2 months"
  ExpiresByType application/javascript    "access plus 2 months"
  ExpiresByType text/javascript           "access plus 2 months"
  
  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>
  
</IfModule>



# ----------------------------------------------------------------------
# remoción de ETag
# ----------------------------------------------------------------------

# 
# Ya que enviamos expiraciones a futuro lejano, no necesitamos ETags para contenido estático.
# developer.yahoo.com/performance/rules.html#etags
FileETag None



# ----------------------------------------------------------------------
# Detener el parpado de pantalla en IE con rollovers CSS
# ----------------------------------------------------------------------

# Las siguientes directivas detienen el parpadeo de pantalla en IE en rollovers CSS en combinación con las reglas "ExpiresByType" para imágenes (vea arriba)
# Si es necesario, descomente las siguientes líneas.

# BrowserMatch "MSIE" brokenvary=1
# BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
# BrowserMatch "Opera" !brokenvary
# SetEnvIf brokenvary 1 force-no-vary



# ----------------------------------------------------------------------
# Ajuste de cookies desde iframes
# ----------------------------------------------------------------------

# Permitir que las cookies sean enviadas desde iframes (solo para IE)
# En caso de necesidad, descomentar y especificar la ruta o regex en la directiva Location

# <IfModule mod_headers.c>
#   <Location />
#     Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\""
#   </Location>
# </IfModule>



# ----------------------------------------------------------------------
# Arrancar el motor de rewrite
# ----------------------------------------------------------------------

# Prender el motor de rewrite es necesario para las siguientes reglas y características.

<IfModule mod_rewrite.c>
  RewriteEngine On
</IfModule>



# ----------------------------------------------------------------------
# Suprimir o forzar el "www." al principio de las URLs.
# ----------------------------------------------------------------------

# 
# El mismo contenido no debería estar disponible en dos URLs diferentes, especialmente no con y sin "www." al principio, ya que esto causa problemas de SEO (contenido duplicado).
# Es por ello que uno debe elegir una de las alternativas y redirigir la otra.
# 

# Por defecto la opción 1 (sin "www.") está activada.
# Recuerde: las URLs más cortas son más sexies.
# no-www.org/faq.php?q=class_b

# 
# Si desea usar la opción 2, sólo comente todas las líneas de la opción 1 y descomente la opción 2.
# IMPORTANTE: NUNCA USAR AMBAS REGLAS A LA VEZ!
# 

# ----------------------------------------------------------------------

# 
# Opción 1:
# Re-escribir "www.domain.com -> domain.com"
# 

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

# ----------------------------------------------------------------------

# 
# Opción 2
# Para re-escribir "domain.com -> www.domain.com" descomente las siguientes líneas.
# Tenga cuidado que la siguiente regla puede no ser una buena idea si usa subdominios "reales" para ciertas partes de su sitio web.
# 

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



# ----------------------------------------------------------------------
# Agregar/remover la barra final a URLs (no-archivos)
# ----------------------------------------------------------------------

# 
# Google trata URLs con y sin barra final de forma separada.
# Forzar una barra final es usualmente preferido, pero todo lo que realmente importa es que una redirija correctamente a la otra.
# 

# Por defecto, la opción 1 (forzar barra final) está activada.
# http://googlewebmastercentral.blogspot.com/2010/04/to-slash-or-not-to-slash.html
# http://www.alistapart.com/articles/slashforward/
# http://httpd.apache.org/docs/2.0/misc/rewriteguide.html#url Problema de Barra Final

# ----------------------------------------------------------------------

# 
# Opción 1:
# Re-escribir "domain.com/foo -> domain.com/foo/"
# 

<IfModule mod_rewrite.c>
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/|#(.*))$
  RewriteRule ^(.*)$ /$1/ [R=301,L]
</IfModule>

# ----------------------------------------------------------------------

# 
# Opción 2
# Re-escribir "domain.com/foo/ -> domain.com/foo"
# 

#<IfModule mod_rewrite.c>
#  RewriteRule ^(.*)/$ /$1 [R=301,L]
#</IfModule>



# ----------------------------------------------------------------------
# Built-in cache busting basado en nombre de archivo
# ----------------------------------------------------------------------

# 
# Si no está usando el build script para manejar la versión de nombre de archivo, tal vez quiera considerar habilitar esto, que llevará los pedidos de /css/all.20110203.css a /res/all.css
# 

# Para entender por qué es importante y una mejor idea que all.css?v1231, lea:
# github.com/paulirish/html5-boilerplate/wiki/Version-Control-with-Cachebusting

# Descomentar para habilitar.
# <IfModule mod_rewrite.c>
#   RewriteCond %{REQUEST_FILENAME} !-f
#   RewriteCond %{REQUEST_FILENAME} !-d
#   RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|gif)$ $1.$3 [L]
# </IfModule>


	
# ----------------------------------------------------------------------
# Prevenir advertencias de certificado SSL
# ----------------------------------------------------------------------

# 
# Re-escribir requests seguras adecuadamente para prevenir advertencias de certificado SSL
# ej: prevenir https://www.domain.com cuando su certificado sólo permite https://secure.domain.com
# Descomentar las siguientes líneas para usar esta característica.
# 

# <IfModule mod_rewrite.c>
#   RewriteCond %{SERVER_PORT} !^443
#   RewriteRule (.*) https://example-domain-please-change-me.com/$1 [R=301,L]
# </IfModule>



# ----------------------------------------------------------------------
# Prevenir errores 404 para carpetas redirigidas no existentes
# ----------------------------------------------------------------------

# 
# Sin -MultiViews, Apache le dará un 404 por un rewrite si una carpeta del mismo nombre no existe, ej:  /blog/hello : webmasterworld.com/apache/3808792.htm
# 

Options -MultiViews 



# ----------------------------------------------------------------------
# pagina 404 personalizada
# ----------------------------------------------------------------------

# Puede agregar páginas personalizadas para manejar 500 o 403 de forma bastante fácil, si lo desea.
ErrorDocument 404 /404.html



# ----------------------------------------------------------------------
# encoding UTF-8
# ----------------------------------------------------------------------

# usar codificación utf-8 para cualquier cosa servida como text/plain o text/html
AddDefaultCharset utf-8

# forzar utf-8 para una determinada cantidad de formatos de fichero
AddCharset utf-8 .html .css .js .xml .json .rss



# ----------------------------------------------------------------------
# Un poquito más de seguridad
# ----------------------------------------------------------------------


# 
# ¿Desea mostrar la versión exacta de Apache que está usando? Probablemente no.
# Esto sólo puede ser habilitado si es usado en httpd.conf - No funcionará en .htaccess
# 
# ServerTokens Prod


# 
# "-Indexes" hará que Apache bloquee a usuarios que naveguen a carpetas que no tengan un documento por defecto
# Usualmente debe dejarlo activado, porque no debería permitir que cualquiera entre a cada carpeta de su servidor (que incluye lugares bastante privados como carpetas de sistema de CMS).
# 
# Options -Indexes


# 
# Bloquear acceso a directorios "ocultos" cuyos nombres empiezan con un punto.
# Esto incluye directorios usados por sistemas de control de versión como Subversion o Git.
# 
<IfModule mod_rewrite.c>
  RewriteRule "(^|/)\." - [F]
</IfModule>


# 
# Si su servidor no está ya configurado así, la siguiente directiva debería ser descomentada para setear la opción de PHP register_globals a OFF. Esto cierra un hueco de seguridad serio que es abusado por la mayoría de los ataques XSS (cross-site scripting). Para más información: http://php.net/register_globals
#
# SI LA DIRECTIVA REGISTER_GLOBALS CAUSA ERRORES INTERNAL SERVER 500 :
#
# Su servidor no permite setear directivas PHP via .htaccess. En ese caso debe hacer este cambio en su archivo php.ini. Si está usando un web host comercial, contacte a los administradores por asistencia para efectuarlo. No todos los servidores permiten archivos php.ini locales, y deberían incluir todas las configuraciones PHP (no sólo esta), o efectivamente reseteará todo a los valores por defecto de PHP.
# Consulte www.php.net para información más detallada sobre setear directivas PHP.
# 

# php_flag register_globals Off

¡Aún hay más!

Lea la documentación para ver cómo llevar su boilerplate aún más allá.

Comentarios

Muestra los comentarios