HTML, XHTML y HTML5

HTML ha evolucionado de formas nuevas e inesperadas. Recientemente, la situación se ha complicado.

HTML es el lenguaje original de la Web. La última versión completada (4.01) se formalizó a fines de 1999.

En la última década ha sido reemplazado gradualmente por una versión similar pero modernizada denominada XHTML (Extensible HyperText Markup Language, Lenguaje Extensible de Marcado de Hipertexto).

NOTA:
Como XHTML es una variante de HTML y como éste fue el estándar original de la Web, suele decirse que todas las páginas están escritas en HTML. Al emplearse de este modo, el término, en realidad, significa cualquier versión de HTML o XHTML.

Veamos la parte complicada. La versión de XHTML usada actualmente es la 1.0 o (menos habitual) la 1.1.

Los programadores debían sustituir ambas por un estándar incluso más reciente denominado XHTML 2.

No obstante, los desarrolladores de XHTML 2 se perdieron en el intento.

"Crearon un estándar filosóficamente puro pero prácticamente inservible."

Los programadores Web y los fabricantes de los principales navegadores se asustaron del carácter estricto de XHTML 2 y del hecho de su falta de compatibilidad inversa con las páginas Web existentes.

Es decir, no se podía convertir una hecha en XHTML 1.0 a una nueva XHTML 2.

Es más, el estándar XHTML 2 carecía de las nuevas funciones que muchos programadores Web, incluidos los creadores de aplicaciones ultracomplejas, requerían.

El golpe final para XHTML 2 se produjo cuando un grupo de la competencia comenzó a presentar las versiones iniciales de un estándar denominado HTML5.

Aunque novedoso, diferente y sólo se admite en los navegadores más modernos, ha generado mucho interés.

De hecho, la W3C (la organización de estándares encargada oficialmente de HTML y XHTML) ha abandonado recientemente sus trabajos con el estándar XHTML 2 y ha comenzado a formalizar HTML5, convirtiéndolo en oficial:HTML5 es el futuro de la Web.

NOTA:
No hay espacio entre el HTML y el 5 en HTML5. Es un error del nombre del estándar.

Los diseñadores de HTML5 fueron inteligentes debido a que hicieron compatible todas las funciones que admite XHTML en la actualidad, lo que significa que puede crear documentos con este lenguaje ya mismo, sin necesidad de las nuevas prestaciones que los navegadores todavía no reconocen.

Todo funcionará a la perfección. Lo mejor de todo es que estará listo para un futuro no tan lejano, en el que nuevo navegadores colonizarán la Tierra y podrán empezar a usar las atractivas funciones exclusivas de HTML5.

NOTA:
HTML5 acepta todo lo que admite XHTML, sin necesidad de cambios. Sin embargo, la sintaxis de XHTML es más estricta que la de HTML5, por lo que éste acoge determinadas prácticas que XHTML no aceptaba. Los programadores Web no se ponen de acuerdo en si estas prácticas son apropiadas de un estilo inadecuado o simplemente útiles soluciones.

Familiarizarse con HTML5 puede resultar todo un reto. Parte del problema es que la palabra "HTML5" incluye la última versión del idioma HTML junto con numerosos estándares emergentes que siguen en fase de desarrollo.

Para que todo sea más interesante, algunos de ellos funcionan con los navegadores actuales más utilizados y otros todavía no se han implementado ni siquiera en las últimas versiones de HTML5.

Curiosamente, este lenguaje solo ofrece ciertas novedades a la familia estándar de etiquetas.

Muchas de ellas proporcionan a los navegadores Web motores de búsqueda y otras herramientas automatizadas, además de la información estructural sobre sus páginas Web. Por ejemplo, puede usarlas para indicar qué sección de su página contiene los enlaces de navegación.

HTML5 también ofrece una nueva forma de añadir elementos de vídeo a su página Web sin necesidad de un complemento, como sucede en muchos navegadores actuales.

El principal objetivo de HTML5 y de sus estándares relacionados es proporcionar  un conjunto de potentes instrumentos para desarrollar aplicaciones y páginas Web con las que interactuar.

Por ejemplo, incluye un lienzo para dibujar en dos dimensiones, una función para delimitar la ubicación geográfica de los visitantes y una técnica para que las páginas interactivas funcionen sin conexión.

Todas estas herramientas son la vanguardia del diseño Web y no son compatibles con versiones de Internet Explorer anteriores a 9.

Convertir tu web estatica a Ajax

com.bydust.ajax es una Clase Javascript que convierte tu pagina estática a un verdadero sitio web Ajax.

Como funciona?

Cuando un usuario entra a tu sitio web, la clase realiza una comprobación del navegador . Si es capaz de soportar Ajax la clases se activa y convierte tu web automáticamente, si no, la secuencia de comandos se desactivara y el usuario navegara en tu web sin hacer peticiones Ajax.

Características

• Es fácil de implementar y quitar
• Filtra información necesaria que traera con Ajax
• Puede añadir reglas para algunos enlaces
• Animaciones personalizables
• Permite retroceder de Pagina

Implementación

Primero que nada, bajarnos el .zip con los dos archivos Javascript (Descargar) , luego debemos incluir estos archivos en el head de cada pagina que deseamos convertir.

<head>
<script  src="js/com.bydust.array.js"></script>
<script  src="js/com.bydust.ajax.js"></script>
</head>

El Segundo paso sera especificar el contenido que debera recargar con Ajax, para esto clasificamos las secciones con divs y un identificador, el siguiente código sera guardado como
demo.html y como demo2.html con otro contenido en el div content, esto resultara dos paginas estaticas sin ninguna función Ajax.

<div id="page">

  <div id="content">
  <!-- begin content -->
  Contenido Demo 1*
  <!-- end content -->
  </div>

  <div id="sidebar">
  <!-- begin sidebar -->
  <a href="demo.html" >demo 1</a> -
  <a href="demo2.html" >demo 2</a>
  <!-- end sidebar -->
  </div>

</div>

Para finalizar incluiremos esta rutina en todas la paginas que se requieran con Ajax y con ella nuestras paginas estaticas tendrán ahora funcionalidad Ajax.

window.onload = function(){
var refreshed_content = Array('!content','sidebar');
bda.start(refreshed_content); 
}

Aunque paresca mentira, su pagina ahora esta Ajaxificada, pruebenla y verán la funcionalidad. Aquí puedes ver una demostración de una dos paginas estaticas Ajaxificadas.

Recursos

• Ver Demo
• Web Oficial
• Descarga Script
• Ejemplo Avanzado

Generar Captura de pantalla con Ajax

PageGlimpse es un servicio que proporciona la captura de pantalla de una web.
Funciona consultando una pagina mandando como parametro la url y el tamaño.

Ejemplo

http://images.pageglimpse.com/v1/thumbnails?url=http://google.com&size=large&devkey=*****&nothumb=http://web.com/noimage.gif

Parametros:

url es la web que se desea capturar.
size es el tamaño estandar del thumbnail (small, medium, large).
devkey es el código que te darán al momento de registrarte en PageGlimpse.
nothumb es un parametro opcional para mostrar una imagen en caso todavía no se halla generado la captura de pantalla de la web.

Utilizandola con Javascript

Thumbnails.js es una librería Javascript que utiliza la API de PageGlimpse para traer la captura de pantalla con una funcion en Javascript el cual utiliza los mismos parametros que la url.

Para utilizar esta librería primero incluiremos el Javascript Thumbnails.js dentro del "head".
Luego crearemos la siguiente funcion

var getScreenShot= function(caja,size){

 var container = document.getElementById('container'),
  thumbs = Thumbnails({
   devkey:'bf3ec081beb6d6af0ff9e43e6f77771e',
   size:size,
   nothumb:'noimage.gif'
  });

 thumbs.get(caja, function(url, img) {
  var link = document.createElement('a');
  img.style.border = 'none';
  link.href = url;
  link.appendChild(img);
  container.innerHTML = '';
  container.appendChild(link);
 });
}

Insertamos un div con id “container” dentro del "body":

<div id="container"></div>

Y despues llamaremos a la pagina de esta manera:

<script type="text/javascript">
getScreenShot('http://google.com','small');
</script>

Recursos

• Ver Demo

Detectar peticiones Ajax con PHP

Cuando desarrollamos aplicaciones Web, una de las ventajas que ahora tenemos es de utilizar Ajax para ciertas secciones donde es conveniente, y también es necesario restringir peticiones que no sean tipo XMLHttpRequest.

Para filtrar solo peticiones Ajax bastara con colocar este simple script.

if(isAjax()){
    die('Es una peticion Ajax.');
}else{
    die('Acceso denegado!');
}

function isAjax(){

    $xhr = strtolower($_SERVER['HTTP_X_REQUESTED_WITH']);
    if( !empty($xhr) &&
        $xhr == 'xmlhttprequest'){ 

        return true;
    }else{

        return false;
    }

}

Nota: algunos servidores Web no proporcionan esta variable, de modo que tendrás que probar antes de implementarlo.

Instalar un acortador de URL en WordPress

Le petite url es un plugin para WordPress muy bueno que permite tener un sistema propio de acortamiento de url para nuestros Post.

Existen otros plugins con la misma funcionalidad, probándolos me di cuenta que este era mas completo, ¿Porqué? Pues este plugin nos da automáticamente la url corta al crear el Post, y nos brinda una función para ponerla en nuestro theme actual y de esta manera promocionarla.

Mediante su panel de configuración este plugin nos brinda ciertas particularidades que nosotros queremos, por ejemplo la url puede estar conformada por diferentes grupos de caracteres (letras minúsculas, mayúsculas, números).

Para una mejor explicación de la configuración, aquí un Video creado con Screenr.

ScreenCast

[SWF]http://screenr.com/Content/assets/screenr_0817090731.swf,540,350,i=9984[/SWF]

Recursos

• Descargar Plugin
• Página Oficial