Usuario:Juanda/html5/Introducción

=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

Hacks en CSS
Creados por Microsoft para su navegador. Cualquier otro navegador lo entenderá como un comentario. Para indicar a IExplorer que utilice la última versión de su rendering engine (puede tener varias) o Google Chrome Frame si está instalado:
 * Comentarios condicionales

viewport
Establecemos el viewport de nuestra web igual al viewport que tiene por defecto el dispositivo.
 * 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.


 * 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:
 * 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).


 * Ejemplo:
 * 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

 * 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:

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!

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.

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

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.
 * 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:
 * 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: 
 * 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
 * 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:
 * Si utilizamos una imagen png, en vez de ico (cada vez más habitual), se debe especificar el type:


 * Más cosas: sitemap, Canonical URL, Feeds... lee documento de 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, 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:
 * por ejemplo pasa a ser 
 * Las clases con prefijo no, representan las características que el navegador no soporta.


 * 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:
 * Otro ejemplo con el input type="date" que no está muy soportado
 * 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).