Archivos HTC – HTML Components

¿Qué son los componentes HTC?

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.

Galería de Imágenes con Lightbox Accesible

Lightbox es una aplicación desarrollada en JavaScript. Este script ha ganado popularidad y distribución gracias a su simplicidad y elegante estilo, además de su fácil implementación. Permite al usuario ver una versión original y ampliada de imágenes sin necesidad de ir a otra página, además de ofrecer una herramienta simple y profesional para el mostrado de imágenes en un sitio web.

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.

Ejemplo Lightbox Accesible

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

  • Título imagen 1
  • Título imagen 2
  • Título imagen 3

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

jQuery 1.4 ya disponible

logotipo de jQuery

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 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í.

Juegos en Javascript

En este artículo vamos a mostrar el potencial que puede ofrecernos Javascript, hemos realizado una lista de juegos realizados por auténticos gurús de este lenguaje, desde simples rompecabezas hasta juegos en 3d:

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

Tetris

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

Mario

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

Buscaminas

Solitario, el legendario juego de cartas.

Solitario

Pacman, el juego que marcó una época.

Pacman

Batalla naval, el clásico de hundir barquitos.

Batalla naval

Bunny Hunt, a la caza del conejo !!.

Bunny Hunt

Pocker, el juego por excelencia para las apuestas.

Pocker

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

ProtoRPG

ajedrez, un juego de ajedrez en 5 kb.

Ajedrez

Wolfenstein, el primer juego de disparos en primera persona.

wolfehstein

Que disfrutéis

Javascript Framework Matrix, conoce los diferentes Frameworks

Javascript Framework Matrix, nos proporciona una visión general de los populares frameworks JavaScript y sus funciones. Hay varios ejemplos de los frameworks y cada fragmento contiene enlaces a la documentación oficial correspondiente. La elección de un framework depende de muchos factores y no puede hacerse tan solo con este artículo. La tabla únicamente muestra los diferentes estilos de la API y las funciones de las bibliotecas JavaScript.

Javascript Framework Matrix

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.

jPlayer reproductor MP3 personalizable por CSS

jPlayer es un plugin para jQuery que te permite:

  • 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

Reproductor de jPlayer

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

50 Técnicas y Tutoriales de jQuery

La sencillez, características avanzadas y un fuerte apoyo, son los argumentos más comunes para los desarrolladores que prefieren jQuery contra otros frameworks de JavaScript. Definiendo jQuery podemos decir, que consiste en un único fichero JavaScript que contiene las funcionalidades comunes de DOM, eventos, efectos y AJAX.

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.

jQuery

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

Carga Optimizada de Javascript

El mayor problema que nos encontramos al cargar Javascript es que el navegador deja de renderizar la página mientras carga el fichero Javascript.

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