Diferencia entre revisiones de «Usuario:Juanda/html5/Introducción»

De WikiEducator
Saltar a: navegación, buscar
(→‎viewport)
(→‎Modernizr.load())
 
(26 revisiones intermedias por el mismo usuario no mostrado)
Línea 4: Línea 4:
 
<div class="slides layout-regular template-default">
 
<div class="slides layout-regular template-default">
 
<div class="slide">
 
<div class="slide">
−
==H5BP==
+
=H5BP=
 
</div>
 
</div>
 +
 
<div class="slide">
 
<div class="slide">
−
===Introducción===
+
====Introducción====
 
*Utilizaremos la versión 4.3.0 de HTML5 BoilerPlate, de septiembre de 2013
 
*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 :-)
+
*Es una plantilla que ayuda a confeccionar un sitio web en múltiples aspectos: compatibilidad navegadores, configuración servidor Web, estadísticas de la web, rendimiento...
 +
*Quizá haya conceptos que queden todavía un poco "desconocidos". Tocaremos muchos temas durante el curso.  
 +
*Echa otro ojo a este documento otra vez cuando acabes el curso :-)
 +
</div>
 +
 
 +
<div class="slide">
 
====Pasos para crear un sitio web====
 
====Pasos para crear un sitio web====
 
*Establecer la estructura básica del sitio web.
 
*Establecer la estructura básica del sitio web.
Línea 17: Línea 23:
 
*Desplegar el sitio web
 
*Desplegar el sitio web
 
</div>
 
</div>
−
 
  
 
<div class="slide">
 
<div class="slide">
−
 
+
==== Estructura básica ====
−
=== Estructura básica ===
+
 
Esta es la estructura básica sugerida por HTML5 Boilerplate:
 
Esta es la estructura básica sugerida por HTML5 Boilerplate:
 
<pre>
 
<pre>
Línea 43: Línea 47:
 
├── crossdomain.xml
 
├── crossdomain.xml
 
├── favicon.ico
 
├── favicon.ico
−
└── [apple-touch-icons]
 
 
</pre>
 
</pre>
 
</div>
 
</div>
 +
 
<div class="slide">
 
<div class="slide">
 
*Página index.html
 
*Página index.html
Línea 93: Línea 97:
 
</source>
 
</source>
 
</div>
 
</div>
−
<div class="slide">
 
  
−
===Hacks en CSS===
+
 
 +
<div class="slide">
 +
====Hacks en CSS====
 
*Comentarios condicionales
 
*Comentarios condicionales
 
Creados por Microsoft para su navegador. Cualquier otro navegador lo entenderá como un comentario.
 
Creados por Microsoft para su navegador. Cualquier otro navegador lo entenderá como un comentario.
Línea 110: Línea 115:
 
</source>
 
</source>
 
</div>
 
</div>
−
<div class="slide">
 
  
−
===viewport===
+
<div class="slide">
 +
====viewport====
 
*Por defecto los navegadores móviles muestran con un ancho determinado la página (en el caso del iPhone, 980px, por ejemplo).  
 
*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 reducida, sino que además no se aplicarán nunca nuestras @media queries que afecten a dispositivos móviles.
+
*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.
 
*Lo ideal suele ser usar la palabra clave device-width (que representa el ancho del dispositivo), utilizando diseños fluidos y responsivos.
 
<source lang="html4strict">
 
<source lang="html4strict">
Línea 120: Línea 125:
 
</source>
 
</source>
 
Establecemos el viewport de nuestra web igual al viewport que tiene por defecto el dispositivo.  
 
Establecemos el viewport de nuestra web igual al viewport que tiene por defecto el dispositivo.  
 +
</div>
 +
 +
<div class="slide">
 
*Para páginas con contenido de un ancho fijo (no fluido), es posible usar un valor estático en píxels.  
 
*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:
 
*En este ejemplo veremos la web "a pantalla completa" pero con una configuración de zoom que provoca que no se vea bien:
Línea 129: Línea 137:
 
}
 
}
 
</source>
 
</source>
 +
*Esto no encajaría en todos los user agent!!
 +
*con un mínimo zoom de 0.25 para un display de 240px de anchura, nos quedarían 20px sin poder ver.
 
</div>
 
</div>
−
<div class="slide">
 
−
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.
 
−
[https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html Leer más sobre el viewport]
 
  
−
</div>
 
 
<div class="slide">
 
<div class="slide">
−
 
+
====Librería normalice====
−
===Librería normalice===
+
 
*Librería que hace que los diferentes elementos renderizados por el navegador se comporten según estándares.
 
*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.  
+
*Es el equivalente mejorado a librerías anteriores que hacían un reset a los CSS del navegador.
 +
*Esta librería es mucho más popular que reset.css, corrige bugs y es menos intrusiva (no hace un unstyled completo de los css del navegador).  
 
<source lang="html4strict">
 
<source lang="html4strict">
 
<link rel="stylesheet" href="css/normalize.css">
 
<link rel="stylesheet" href="css/normalize.css">
Línea 146: Línea 152:
  
 
<div class="slide">
 
<div class="slide">
−
===Librería main.css===
+
*Ejemplo:
−
*Viene con unos css por defecto y aquí es donde podríamos poner lo nuestro.
+
 
<source lang="html4strict">
 
<source lang="html4strict">
−
<link rel="stylesheet" href="css/main.css">
+
/**
 +
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
 +
*/
 +
article,
 +
aside,
 +
details,
 +
figcaption,
 +
figure,
 +
footer,
 +
header,
 +
hgroup,
 +
main,
 +
nav,
 +
section,
 +
summary {
 +
    display: block;
 +
}
 
</source>
 
</source>
 +
*Las etiquetas html5 que no existen en determinados navegadores, se les dará un display de tipo block
 +
*Para hacer que "existan" será necesario crearlas mediante JavaScript utilizando por ejemplo Modernizr (html5shiv)
 +
</div>
  
 +
 +
<div class="slide">
 +
====Librería main.css====
 +
<source lang="html4strict">
 +
<link rel="stylesheet" href="css/main.css">
 +
</source>
 +
*Viene con unos css por defecto, principalmente por las diferencias de estilos entre navegadores
 +
*Hay un espacio donde podríamos poner nuestro css específico:
 +
<source lang="html4strict">
 +
/* ==========================================================================
 +
  Author's custom styles
 +
  ========================================================================== */
 +
</source>
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
===Librería Modernizr===
+
====Librería Modernizr====
−
*Incluye html5 Shiv: útil para navegadores que no entienden las etiquetas semánticas de html5
+
* Librería JavaScript que detecta si el navegador del usuario implementa las características de html5 y CSS3 de la página actual.
 
*Único javascript que necesita estar en la parte superior del documento: ¡antes de que se empiece a renderizar la página!
 
*Ú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.
 
 
<source lang="html4strict">
 
<source lang="html4strict">
 
<script src="js/vendor/modernizr-2.6.1.min.js"></script>
 
<script src="js/vendor/modernizr-2.6.1.min.js"></script>
 
</source>
 
</source>
−
 
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
===jQuery: ¿CDN o local?===
+
====jQuery: ¿CDN o local?====
 +
*CDN significa content delivery network: se suelen utilizar servidores cercanos y utilizados frecuentemente para que la carga de la página sea rápida: normalmente el js ya estará descargado de alguna otra página que utilice el mismo origen.
 
*Si window.jQuery es undefined habrá habido algún problema al obtenerlo del CDN.  
 
*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.
 
*En este caso, procederemos a insertar en nuestra página la versión local de jQuery.
Línea 176: Línea 212:
 
<div class="slide">
 
<div class="slide">
  
−
===plugins.js y main.js===
+
====plugins.js y main.js====
 
*plugin.js: Para los plugin que instalemos (también se pueden incluir en el directorio vendor)
 
*plugin.js: Para los plugin que instalemos (también se pueden incluir en el directorio vendor)
 
*main.js: Para nuestro propio javascript
 
*main.js: Para nuestro propio javascript
Línea 186: Línea 222:
  
 
<div class="slide">
 
<div class="slide">
−
 
+
====Google Analytics====
−
===Google Analytics===
+
 
*Herramienta de análisis de las visitas a un sitio web.
 
*Herramienta de análisis de las visitas a un sitio web.
 
*Google recomienda ponerla en la parte superior, para contar todas las visitas
 
*Google recomienda ponerla en la parte superior, para contar todas las visitas
Línea 200: Línea 235:
 
         </script>
 
         </script>
 
</source>
 
</source>
 +
*Veremos Google Analytics con más detalle cuando tratemos el SEO
 
</div>
 
</div>
 +
 +
 
<div class="slide">
 
<div class="slide">
−
===Personalización===
+
=Personalización=
−
*Más cosas: sitemap, Canonical URL, Feeds... [https://github.com/h5bp/html5-boilerplate/blob/master/doc/extend.md lee documento de personalización]
+
</div>
  
 +
<div class="slide">
 +
====Fichero .htaccess====
 +
*Se trata de un fichero con directivas Apache que sobreescriben a las originales del servidor, a partir del directorio don de se cuelga el fichero
 +
*Se utiliza por ejemplo para:
 +
:Definir un documento html de personalización de errores
 +
:Definir cuando expiran las páginas por temas de caché
 +
:Configuración de mime-types
 +
:Definir reescrituras de URL's
 +
*Ejemplo:
 +
<source lang="html4strict">
 +
ErrorDocument 404 /404.html
 +
</source>
 +
*Si tenemos acceso al servidor, por temas de rendimiento, es mejor poner las directivas anteriores en la configuración del servidor (fichero httpd.conf normalmente).
 
</div>
 
</div>
 +
 
<div class="slide">
 
<div class="slide">
−
==Modernizr==
+
====Fichero humans.txt====
 +
*Se coloca en la raíz del site y contiene la información de las personas que han colaborado en la web:
 +
:http://www.google.com/humans.txt
 +
*Se puede colgar sin más o también linkarlo mediante: <link rel="author" href="humans.txt" />
 +
*[http://humanstxt.org/humans.txt Ver ejemplo]
 +
*[http://humanstxt.org/ES/Standard.html Como usarlo]
 +
*En minúsculas
 
</div>
 
</div>
 +
 +
<div class="slide">
 +
====Fichero robots.txt====
 +
*Se coloca en la raíz del site y contiene información sobre tu web para los buscadores: que directorios deben indexar y cuales no, con que frecuencia...
 +
*Ejemplo: Para cualquier robot indicamos que no deben indexar los directorios /cgi-bin, /tmp y /~joe
 +
<source lang="html4strict">
 +
User-agent: *
 +
Disallow: /cgi-bin/
 +
Disallow: /tmp/
 +
Disallow: /~joe/
 +
</source>
 +
*En minúsculas
 +
*Se ve con más detalle cuando estudiemos SEO.
 +
</div>
 +
 +
<div class="slide">
 +
====Fichero favicon.ico====
 +
*Se coloca en la raíz del site, será el icono de nuestra web y aparece junto al título de la misma.
 +
*El nombre del fichero va en minúsculas
 +
*Si el nombre no es favicon.ico, o cambiamos el directorio, se debe indicar en el html:
 +
<source lang="html4strict">
 +
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
 +
</source>
 +
*Si utilizamos una imagen png, en vez de ico (cada vez más habitual), se debe especificar el type:
 +
<source lang="html4strict">
 +
<link rel="icon" type="image/png" href="http://example.com/image.png" />
 +
</source>
 +
</div>
 +
 +
<div class="slide">
 +
*Más cosas: sitemap, Canonical URL, Feeds... [https://github.com/h5bp/html5-boilerplate/blob/master/doc/extend.md lee documento de personalización]
 +
</div>
 +
 +
<div class="slide">
 +
=Modernizr=
 +
</div>
 +
 
<div class="slide">
 
<div class="slide">
−
===Introducción===
+
====Introducción====
 
*Librería para detectar la disponibilidad nativa de html5 o css3 en el navegador.
 
*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.
+
*Se coloca siempre en el head, justo después de las hojas de estilos.
−
*Detecta mediante decenas de tests en milisegundos, las características que funcionan o no del navegador actual.
+
*Hay dos versiones, desarrollo y producción (custom build, en la que seleccionaremos exclusivamente los componentes necesarios).
 +
*Detecta mediante decenas de tests en milisegundos, las características que funcionan o no del navegador actual y añade unas clases en caliente a los componentes de nuestra página:
 +
: <html> por ejemplo pasa a ser <html class="js flexbox canvas canvastext webgl no-touch....">
 +
: Las clases con prefijo no, representan las características que el navegador no soporta.
 +
<source lang="html4strict">
 +
<script>
 +
  if (Modernizr.canvas) {
 +
    alert("This browser supports HTML5 canvas!");
 +
  }
 +
</script>
 +
</source>
 
*No se fija en el User Agent (propiedad navigator.userAgent) -> "feature detection" (mejor).
 
*No se fija en el User Agent (propiedad navigator.userAgent) -> "feature detection" (mejor).
 
*Permite usar polyfills.  
 
*Permite usar polyfills.  
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
===Polyfills===
+
====Polyfills====
 
*Código javascript para replicar el comportamiento de la API de html5 en navegadores antiguos.
 
*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.
 
*Existe un polyfill para casi cualquier característica de html5 que Modernizr detecta.
Línea 226: Línea 331:
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
===Modernizr.load()===
+
====Modernizr.load()====
−
*Cargador de recursos: útil si utilizamos polyfills
+
*Normalmente para no recargar la página web de Polyfills, se hace un cargado condicional, basándonos en la libreria de JavaScript [http://yepnopejs.com/ yepnope.js]
−
*Utiliza http://yepnopejs.com/ yepnope.js], está integrado.
+
*Ejemplo de uso: Si el navegador no soporta geolocalización, se descargará el polyfill:
−
*Si el navegador no soporta geolocalización, se descargará el polyfill:
+
 
<source lang="html4strict">
 
<source lang="html4strict">
 
Modernizr.load({
 
Modernizr.load({
Línea 237: Línea 341:
 
});
 
});
 
</source>
 
</source>
 +
</div>
 +
<div class="slide">
 +
*Otro ejemplo con el input type="date" que [http://caniuse.com/#search=date no está muy soportado]
 +
<source lang="html4strict">
 +
<script src="modernizr.js"></script>
 +
<script>Modernizr.load({
 +
  test: Modernizr.inputtypes.date,
 +
  nope: ['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 'jquery-ui.css'],
 +
  complete: function () {
 +
    $('input[type=date]').datepicker({
 +
      dateFormat: 'yy-mm-dd'
 +
    });
 +
  }
 +
});
 +
</script>
 +
</source>
 +
*En el ejemplo, se carga el componente de datetime del famework de JQuery User Interface. Para ello se debe cargar primero jQuery y luego jQuery User Interace (js y css).
 +
</div>
 
</div>
 
</div>

Última revisión de 12:47 28 oct 2013

Usuario:Juanda/html5/nav

H5BP

Introducción

  • Utilizaremos la versión 4.3.0 de HTML5 BoilerPlate, de septiembre de 2013
  • Es una plantilla que ayuda a confeccionar un sitio web en múltiples aspectos: compatibilidad navegadores, configuración servidor Web, estadísticas de la web, rendimiento...
  • Quizá haya conceptos que queden todavía un poco "desconocidos". Tocaremos muchos temas durante el curso.
  • Echa otro ojo a este documento otra vez cuando acabes el curso :-)

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
  • 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!!
  • con un mínimo zoom de 0.25 para un display de 240px de anchura, nos quedarían 20px sin poder ver.

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.
  • Esta librería es mucho más popular que reset.css, corrige bugs y es menos intrusiva (no hace un unstyled completo de los css del navegador). 
<link rel="stylesheet" href="css/normalize.css">
  • Ejemplo: 
/**
 * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}
  • Las etiquetas html5 que no existen en determinados navegadores, se les dará un display de tipo block
  • Para hacer que "existan" será necesario crearlas mediante JavaScript utilizando por ejemplo Modernizr (html5shiv)


Librería main.css

<link rel="stylesheet" href="css/main.css">
  • Viene con unos css por defecto, principalmente por las diferencias de estilos entre navegadores
  • Hay un espacio donde podríamos poner nuestro css específico: 
/* ==========================================================================
   Author's custom styles
   ========================================================================== */

Librería Modernizr

  • Librería JavaScript que detecta si el navegador del usuario implementa las características de html5 y CSS3 de la página actual.
  • Único javascript que necesita estar en la parte superior del documento: ¡antes de que se empiece a renderizar la página! 
<script src="js/vendor/modernizr-2.6.1.min.js"></script>

jQuery: ¿CDN o local?

  • CDN significa content delivery network: se suelen utilizar servidores cercanos y utilizados frecuentemente para que la carga de la página sea rápida: normalmente el js ya estará descargado de alguna otra página que utilice el mismo origen.
  • 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>
  • Veremos Google Analytics con más detalle cuando tratemos el SEO


Personalización

Fichero .htaccess

  • Se trata de un fichero con directivas Apache que sobreescriben a las originales del servidor, a partir del directorio don de se cuelga el fichero
  • Se utiliza por ejemplo para:
Definir un documento html de personalización de errores
Definir cuando expiran las páginas por temas de caché
Configuración de mime-types
Definir reescrituras de URL's
  • Ejemplo: 
ErrorDocument 404 /404.html
  • Si tenemos acceso al servidor, por temas de rendimiento, es mejor poner las directivas anteriores en la configuración del servidor (fichero httpd.conf normalmente).

Fichero humans.txt

  • Se coloca en la raíz del site y contiene la información de las personas que han colaborado en la web:
http://www.google.com/humans.txt
  • Se puede colgar sin más o también linkarlo mediante: <link rel="author" href="humans.txt" />
  • Ver ejemplo
  • Como usarlo
  • En minúsculas

Fichero robots.txt

  • Se coloca en la raíz del site y contiene información sobre tu web para los buscadores: que directorios deben indexar y cuales no, con que frecuencia...
  • Ejemplo: Para cualquier robot indicamos que no deben indexar los directorios /cgi-bin, /tmp y /~joe 
User-agent: *
Disallow: /cgi-bin/
Disallow: /tmp/
Disallow: /~joe/
  • En minúsculas
  • Se ve con más detalle cuando estudiemos SEO.

Fichero favicon.ico

  • Se coloca en la raíz del site, será el icono de nuestra web y aparece junto al título de la misma.
  • El nombre del fichero va en minúsculas
  • Si el nombre no es favicon.ico, o cambiamos el directorio, se debe indicar en el html: 
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
  • Si utilizamos una imagen png, en vez de ico (cada vez más habitual), se debe especificar el type: 
<link rel="icon" type="image/png" href="http://example.com/image.png" />

Modernizr

Introducción

  • Librería para detectar la disponibilidad nativa de html5 o css3 en el navegador.
  • Se coloca siempre en el head, justo después de las hojas de estilos.
  • Hay dos versiones, desarrollo y producción (custom build, en la que seleccionaremos exclusivamente los componentes necesarios).
  • Detecta mediante decenas de tests en milisegundos, las características que funcionan o no del navegador actual y añade unas clases en caliente a los componentes de nuestra página:
<html> por ejemplo pasa a ser <html class="js flexbox canvas canvastext webgl no-touch....">
Las clases con prefijo no, representan las características que el navegador no soporta. 
<script>
  if (Modernizr.canvas) {
    alert("This browser supports HTML5 canvas!");
  }
</script>
  • 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()

  • Normalmente para no recargar la página web de Polyfills, se hace un cargado condicional, basándonos en la libreria de JavaScript yepnope.js
  • Ejemplo de uso: Si el navegador no soporta geolocalización, se descargará el polyfill: 
Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});
<script src="modernizr.js"></script>
<script>Modernizr.load({
  test: Modernizr.inputtypes.date,
  nope: ['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 'jquery-ui.css'],
  complete: function () {
    $('input[type=date]').datepicker({
      dateFormat: 'yy-mm-dd'
    }); 
  }
});
</script>
  • En el ejemplo, se carga el componente de datetime del famework de JQuery User Interface. Para ello se debe cargar primero jQuery y luego jQuery User Interace (js y css).
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/html5/Introducción&oldid=13675»