Los componentes HTC, fueron desarrollados por Microsoft para implementarlos en Internet Explorer 5.5 y posteriores. La idea era proporcionar un mecanismo alternativo para encapsular código y comportamiento DHTML en un componente de script.

En realidad los HTC son archivos XML que contienen secuencias de comandos y elementos específicos, como propiedades, métodos y eventos que definen dicho componente. Luego se guarda con extensión .htc.

¿Cómo se ejecutan?

Los archivos HTC se ejecutan en la hoja de estilo, con la propiedad behavior, de esta manera:

img {
  behavior: url(iepngfix.htc);
}

La propiedad behavior permite utilizar CSS para fijar un script a un elemento específico y aplicar a ese elemento componentes dinámicos, como los mencionados archivos .HTC.

Ten en cuenta que behavior es una propiedad no estándar que solo soporta Internet explorer. Por esta razón y para prevenir errores de validación, es conveniente aplicarla en una hoja de estilo exclusiva para explorer.

¿Para qué se utilizan?

Actualmente su utilización es muy limitada. Lo más normal es utilizarlos como hacks para IE o para replicar características que otros navegadores tienen y Explorer no puede reproducir de forma nativa.

¿Cómo modificarlos?

No hay mucho que decir en cuanto a desarrollo y modificación de archivos de HTC. Son básicamente estándar de Javascript, con un pequeño envoltorio XML. Por lo que si sabes Javascript, no deberías tener demasiados problemas modificar un HTC. De todas formas, Microsoft ha publicado documentación al respecto en HTC Reference

¿Por qué deberías utilizarlos?:

Como he dicho antes, solo tendría sentido utilizarlos si vas a escribir o modificar un hack para IE. Para prácticamente todo lo demás Javascript es la mejor opción.

Existen una gran variedad de clones de Lightbox que podemos ver de la mano de anieto2k.

Sin embargo aquí vamos a mostraros un ejemplo de un lightbox accesible, es decir una galería de imágenes usando JavaScript no intrusivo y un correcto marcado semántico.

Antes que anda debemos de disponer de 3 archivos para que nos funcione la galería de imágenes con LightBox; jquery.lightbox-0.5.css, jquery.js y jquery.lightbox-0.5.js. Estos 3 archivos, lógicamente debemos ponerlo en nuestro código HTML para poder hacer uso de ellos. Así cuando se llame a dicha función no falte nada. Además de los archivos os dejo las imágenes que se usan como elementos de navegación en lightbox. Para no descargar todos los archivos por separado. Os dejo un archivo zip con todos los ficheros que se usan en el ejemplo: Descargar ejemplo. A continuación explicamos detalladamente como implementar nuestra galería de imágenes:

HTML

Como podemos ver en el código HTML del ejemplo. Tenemos el enlace que apunta a la imagen con el atributo href. Si el JavaScript está activado, funcionará con el efecto de Lightbox, y en el caso de que no lo esté funcionara como un enlace a una imagen.

Para que el Lightbox funcione, debemos poner esta línea de JavaScript donde especificamos los enlaces. De esta manera llamará a la función y usará las imagenes que se encuentra dentro de los elementos de enlace:

JavaScript

Con lo explicado, tendríamos lo suficiente para tener nuestra propia galería de imágenes. Ya tenemos un HTML correcto, un Javascript no intrusivo y una alternativa a dicho JavaScript. El resultado final podemos apreciarlo en el siguiente enlace:

Ver ejemplo funcionando

Hace pocos días que ha sido lazanda la esperada versión 1.4 de jQuery. De hecho todavía no está disponible en la web oficial, aunque se puede descargar de jquery14.com o de los siguentes enlaces:

• jQuery 1.4 optimizado (23kb)
• jQuery 1.4 estándar(154kb)
• Alojada en Google: http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
• jQuery 1.4 Documentación

jQuery es probablemente el framework JavaScript más popular de la web, por lo que el equipo de jQuery necesita ser muy cauto respecto a los cambios en las nuevas versiones.

207 errores han sido corregidos, ahora consigue un 100% de compatibilidad en todas las pruebas en IE6, IE7, IE8, Firefox 2, Firefox 3, Firefox 3.5, Safari 3.2, Safari 4, Opera 10.10, y Chrome. Se han añadido un número considerable de nuevos métodos y dos nuevos eventos: focusIn y focusOut.

También se han publicado una serie de posibles incompatibilidades que pueden aparecer al actualizar este framework, podemos verlas aquí.

Tetris, el juego más jugado de la historia no podía faltar en su versión javascript.

Supermario, el fontanero más famoso del mundo en 14 kb.

Buscaminas, el juego al que todos alguna vez hemos jugado, sobre todo si alguna instalación se hacia eterna.

Solitario, el legendario juego de cartas.

Pacman, el juego que marcó una época.

Batalla naval, el clásico de hundir barquitos.

Bunny Hunt, a la caza del conejo !!.

Pocker, el juego por excelencia para las apuestas.

ProtoRPG , un motor para crear juegos de rol, utilizando Prototype.

ajedrez, un juego de ajedrez en 5 kb.

Wolfenstein, el primer juego de disparos en primera persona.

Que disfrutéis

Como hemos comentado otras veces, cada vez se usan más los frameworks para facilitar el trabajo a los desarrolladores y maquetadores Web. A parte de facilitarnos el trabajo, mejora visualmente el contenido de nuestra Web, ya que nos permite añadir nuevas funcionalidades en muchos casos dinámicas y que mejoran visualmente nuestros proyectos Web.

Javascript Framework Matrix lo podemos usar como guía de referencia para diferentes frameworks, y conocer un poquito más su uso, funcionalidades, estados, efectos, clases, etc.

• El juego y el control de archivos de audio en su página web
• Crear y modificar estilo de un reproductor de audio utilizando sólo HTML y CSS
• Añadir efectos de sonido a nuestros proyectos de jQuery
• Flujo más rápido usando HTML5 y alternativas de apoyo en formato ogg

Todo ello con HTML5 usando la etiqueta audio soportado en navegadores compatibles que permitan formato mp3 u ogg, mientras que soporta a otros navegadores utilizando formato mp3 con Flash no visible.

Ya podemos olvidarnos de insertar reproductor de otro tipo que sobrecargan nuestra página Web, con este plugin podremosimplementarlo en nuestra Web de forma sencilla, y modificarlo a nuestro gusto mediante HTML y CSS

Descargar jPlayer

Descargar chuleta en formato PDF (34.1kb)

fuente: acodingfool.com

De hecho, jQuery es uno de los frameworks de JavaScript más populares, con potentes herramientas que pueden mejorar significativamente la interacción del usuario con las aplicaciones Web. jQuery tiene una ventaja adicional, ya que permite a los desarrolladores seleccionar elementos en una página usando CSS como sintaxis.

Características de jQuery

• Selección de elementos DOM.
• Interactividad y modificaciones del árbol DOM, incluyendo soporte para CSS 1-3 y un plugin básico de XPath.
• Eventos.
• Manipulación de la hoja de estilos CSS.
• Efectos y animaciones.
• AJAX.
• Soporta extensiones.
• Utilidades varias como obtener información del navegador, operar con Objetos y Arrays, (elimina los espacios en blanco del principio y final de una cadena de caracteres), etc.
• Compatible con los navegadores Firefox 2.0+, Internet Explorer 6+, Safari 2.0.2+ y Opera 9+.

Para ayudarte a mejorar tus habilidades, en este artículo podras acceder a 50 nuevas técnicas útiles de jQuery y tutoriales que se han creado recientemente y que podría hacer que el desarrollo de tu sitio web sea una experiencia más fácil y más interesante que la anterior.

Ver 50 técnicas útiles con jQuery

Fuente: SmashingMagazine

En cambio, si cargamos los ficheros dinámicamente mediante Javascript, evitamos el problema y podemos cargar ficheros Javascript de forma asíncrona sin afectar al renderizado de la página.

Nicholas C. Zakas ha desarrollado 3 principales puntos para optimizar la carga de JavaScript para nuesra Web:

• Creamos dos ficheros Javascript. En el primero poner lo necesario para cargar dinámicamente otro ficheros javascript y el segundo con el código necesario para nuestra aplicación.
• Introducimos el primer Javascript el final de la página, justo antes de cerrar la etiqueta <body>.
• Justo después creamos un segundo tag <script> en donde llamaremos al/los fichero/s necesarios.

HTML

loadScript

loadScript() es la función encargada de cargar el fichero Javascript de forma dinámica y encargada de ejecutar el código que indiquemos como segundo parámetro en cuando este esté cargado correctamente.

function loadScript(url, callback){

 var script = document.createElement("script")
 script.type = "text/javascript";

 if (script.readyState){  //IE
    script.onreadystatechange = function(){
     if (script.readyState == "loaded" ||
         script.readyState == "complete"){
           script.onreadystatechange = null;
           callback();
        }
     };
 } else {  //Others
   script.onload = function(){
     callback();
   };
 }

 script.src = url;
 document.getElementsByTagName("head")[0].appendChild(script);
}

Con esta optimización mejoramos la carga de las Webs con Javascript. Ya no solo sirve para una carga más rapida de la página ,sino para realizar algunas funciones en el cuerpo de la página una vez cargada dicha página.

Fuente: anieto2k