HTML5 Boilerplate

De WikiEducator
Saltar a: navegación, buscar

Usuario:Juanda/html5/nav

H5BP

Introducción

  • Utilizaremos la versión 4.3.0 de HTML5 BoilerPlate, de septiembre de 2013
  • Quizá haya conceptos que queden todavía un poco "desconocidos". Iremos aprendiendo todo durante el curso. Echa otro ojo a este documento cuando apruebes el módulo :-)

Pasos para crear un sitio web

  • Establecer la estructura básica del sitio web.
  • Añadir contenidos, estilo y funcionalidad
  • Probarla de forma local
  • Opcionalmente ejecutar un script para automatizar la optimización de la web: ant build script o node build script.
  • Desplegar el sitio web


Estructura básica

Esta es la estructura básica sugerida por HTML5 Boilerplate: 

.
├── css
│   ├── main.css
│   └── normalize.css
├── doc
├── img
├── js
│   ├── main.js
│   ├── plugins.js
│   └── vendor
│       ├── jquery.min.js
│       └── modernizr.min.js
├── .htaccess
├── 404.html
├── index.html
├── humans.txt
├── robots.txt
├── crossdomain.xml
├── favicon.ico
└── [apple-touch-icons]
  • Página index.html 
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
 
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
 
        <!-- Add your site or application content here -->
        <p>Hello world! This is HTML5 Boilerplate.</p>
 
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
 
        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='//www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X');ga('send','pageview');
        </script>
    </body>
</html>

Hacks en CSS

  • Comentarios condicionales

Creados por Microsoft para su navegador. Cualquier otro navegador lo entenderá como un comentario. 

<!--[if CONDICION]> Código HTML <![endif]–>

Ejemplo: 

<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->

Para indicar a IExplorer que utilice la última versión de su rendering engine (puede tener varias) o Google Chrome Frame si está instalado: 

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

viewport

  • Por defecto los navegadores móviles muestran con un ancho determinado la página (en el caso del iPhone, 980px, por ejemplo).
  • Las páginas no sólo se mostrarán reducidas, sino que además no se aplicarán nunca nuestras @media queries que afecten a dispositivos móviles.
  • Lo ideal suele ser usar la palabra clave device-width (que representa el ancho del dispositivo), utilizando diseños fluidos y responsivos. 
<meta name="viewport" content="width=device-width, initial-scale=1">

Establecemos el viewport de nuestra web igual al viewport que tiene por defecto el dispositivo.

  • Para páginas con contenido de un ancho fijo (no fluido), es posible usar un valor estático en píxels.
  • En este ejemplo veremos la web "a pantalla completa" pero con una configuración de zoom que provoca que no se vea bien: 
@viewport {
  width: 980px;
  min-zoom: 0.25;
  max-zoom: 5;
}

Esto no encajaría en todos los user agent!! Por ejemplo con un mínimo zoom de 0.25 para un display de 240px de anchura, nos quedarían 20px sin poder ver. Leer más sobre el viewport

Librería normalice

  • Librería que hace que los diferentes elementos renderizados por el navegador se comporten según estándares.
  • Es el equivalente mejorado a librerías anteriores que hacían un reset a los CSS del navegador. 
<link rel="stylesheet" href="css/normalize.css">

Librería main.css

  • Viene con unos css por defecto y aquí es donde podríamos poner lo nuestro. 
<link rel="stylesheet" href="css/main.css">

Librería Modernizr

  • Incluye html5 Shiv: útil para navegadores que no entienden las etiquetas semánticas de html5
  • Único javascript que necesita estar en la parte superior del documento: ¡antes de que se empiece a renderizar la página!
  • Es el equivalente mejorado a librerías anteriores que hacían un reset a los CSS del navegador. 
<script src="js/vendor/modernizr-2.6.1.min.js"></script>

jQuery: ¿CDN o local?

  • Si window.jQuery es undefined habrá habido algún problema al obtenerlo del CDN.
  • En este caso, procederemos a insertar en nuestra página la versión local de jQuery. 
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</script>

plugins.js y main.js

  • plugin.js: Para los plugin que instalemos (también se pueden incluir en el directorio vendor)
  • main.js: Para nuestro propio javascript 
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

Google Analytics

  • Herramienta de análisis de las visitas a un sitio web.
  • Google recomienda ponerla en la parte superior, para contar todas las visitas
  • En la parte inferior, optimizamos el tiempo de carga de nuestra web. 
        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>

Personalización

Modernizr

Introducción

  • Librería para detectar la disponibilidad nativa de html5 o css3 en el navegador.
  • Se coloca siempre en el head, seguido a las hojas de estilos.
  • Detecta mediante decenas de tests en milisegundos, las características que funcionan o no del navegador actual.
  • No se fija en el User Agent (propiedad navigator.userAgent) -> "feature detection" (mejor).
  • Permite usar polyfills.

Polyfills

  • Código javascript para replicar el comportamiento de la API de html5 en navegadores antiguos.
  • Existe un polyfill para casi cualquier característica de html5 que Modernizr detecta.
  • Lista de Polyfills
  • El uso de varios polyfills en una página puede afectar el tiempo de carga de la página.
  • No hay regla de oro: Podemos optar por no usarlos y dar menos funcionalidad con navegadores antiguos.

Modernizr.load()

  • Cargador de recursos: útil si utilizamos polyfills
  • Utiliza http://yepnopejs.com/ yepnope.js], está integrado.
  • Si el navegador no soporta geolocalización, se descargará el polyfill: 
Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/html5/Introducción&oldid=13649»