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.

Algunos ejemplos

Imagínate que te encuentras con el siguiente código:

.f18 {
        background: #fff;
        border: 1px solid #ff0;
        font-weight: bold;
        padding: 10px;
}
.izquierda {
        border: 1px solid #ff0;
        float:left
}

Si nos encontramos con un código como este, seguramente perderemos mucho tiempo tratando de localizar estas clases e intentando averiguar cual es su función. Cuando nos enfrentemos a un rediseño, es muy posible que un elemento como class=”izquierda” termine arriba, abajo o a la derecha y por tanto ese nombre de clase no tenga ninguna relación con el nuevo diseño.

Por lo tanto si por class=”izquierda” nos referimos a un menú situado a la izquierda, usemos mejor class=”menu-navegacion”. En cuanto a la clase f18, no tenemos ni la más remota idea de a que hace referencia, por lo que es mejor que el desarrollador nombre a esa clase según la función que cumpla. De este modo esta nomenclatura sería mucho más inteligible:

.MensajeAlerta {
        background: #fff;
        border: 1px solid #ff0;
        font-weight: bold;
        padding: 10px;
}
.menu-navegacion {
        border: 1px solid #ff0;
        float:left
}

Pero más allá del contexto, las convenciones de nomenclatura semántica son útiles para ahorrar tiempo. Por ejemplo, si asigno la clase “Caja-azul” a un cuadro de ayuda en un sitio cuyo color corporativo es azul y la empresa cambia su color corporativo a rojo. Caja-azul no significará nada en este nuevo contexto.

En ese caso no sólo tendrás que actualizar el valor hexadecimal de ese estilo, sino que tendrás que cambiar todas las referencias a ese color. Si hubieras usado en su lugar la clase “llamada” (o algo igualmente significativo), te podrías haber ahorrado mucho trabajo.

Consejos para mejorar la nomenclatura de nuestros css

• El nombre de nuestras clases e identificadores no debe describir una característica visual, como color, tamaño o posición. Tampoco debe describir una función o comportamiento.
• El nombre debe ser específico y claro, para que otras personas puedan entender su significado.
• Si después de todo, crees que es imprescindible definir una clase única y exclusivamente para alinear una imagen o un párrafo y llamarla con esa acción, documentalo apropiadamente, para que los otros desarrolladores tengan problemas en el futuro. 
• Separa las palabras mediante guiones o mayúsculas. Por ejemplo menu-superior o menuSuperior.
• En todo caso, es mejor no hacer uso excesivo de clases, porque a menudo es más sencillo utilizar selectores contextuales o una combinación de selectores que no alteren el HTML.

En conclusión

Las clases e identificadores deberían llamarse según la función o contenido que describen y de manera independiente respecto a factores de presentación. De este modo, cuando actualicemos un sitio, no tendremos que preocuparemos en cambiar todos los nombres cada vez que modifiquemos el diseño, sino simplemente cambiar las propiedades que nos hagan falta.

Para seguir investigando

• El blog woorkup.com nos ofrece un muy buen artículo (en ingles), que nos enseña la mejor mejor manera de nombrar las diferentes secciones de nuestros sites.
• stuffandnonsense nos propone una lista (en ingles), con las nomenclaturas más populares.

En esta serie de artículos, te propondremos unas pautas y buenas prácticas de escritura css, que ayudarán a que tu código sea entendido por otros desarrolladores y por ti mismo. De esta manera evitarás incoherencias y redundancias que agilizarán el desarrollo en equipo y evitarán la duplicación de esfuerzos.

Tener una buena organización es la base de una buena CSS. Documentar el código con comentarios te ayudará a ti y a futuros desarrolladores, a comprender y explorar el CSS más rápidamente. En este primer artículo veremos varias maneras de usar los comentarios para organizar mejor tu código.

Comentarios de organización

Antes de empezar a escribir los estilos, es recomendable definir la organización del documento CSS según las diferentes secciones de la página web que estemos desarrollando. Puedes añadir comentarios indicando donde irán los estilos para cada sección, por ejemplo:

/*---Restet---*/
/*---Estilos globales---*/
/*---Cabecera---*/
/*---menu---*/
/*---Contenido principal---*/
/*---Barra lateral---*/
/*---Pie de página---*/

En la sección “Estilos globales” pondremos los estilos genéricos, como los de encabezado, párrafos, listas, enlaces, tablas, elementos de formularios ect…

Al mantener estos estilos genéricos en la parte superior de mi archivo CSS, podremos sacar provecho de la cascada.

Aunque pueda parecer excesivo, en sitios web muy grandes, puede resultar útil añadir un segundo nivel de comentarios en cada sección. De esta manera, podríamos subdividir el comentario de estilos globales así:

/*---Estilos globales---*/
	/*--Estructura--*/
	/*--Enlaces--*/
	/*--Encabezados--*/
	/*--Formularios--*/

El formato utilizado para estos comentarios depende de ti. La clave consiste en definir el formato que prefieras de manera coherente, para que cualquiera pueda usarlo.

Comentarios de Comunicación

Hemos echado un vistazo a los comentarios usados para la organización de la css, pero también se pueden utilizar para comunicar información importante sobre el proyecto a tus compañeros o incluso para a ti mismo, por ejemplo:

/*---- TÍTULO: El perfil de la pantalla principal | AUTOR: JLV | Actualización: 03/23/10 por JLV ---- * /

La información del título es útil cuando se trabaja con varias hojas de estilo. La información sobre el autor permite a todos los miembros del equipo para saber a quién acudir si tiene alguna pregunta sobre el CSS original, mientras que la información actualizada permite saber cuándo se produjo la última actualización y quien lo hizo. Recuerda que aunque los navegadores no renderizan los comentarios, su contenido se envía junto con el resto de estilos, por lo que no se debe incluir ninguna información sensible o confidencial.

Comentarios de desarrollo y depuración

Hay ocasiones en que te asignan un trabajo que ha empezado un compañero y te preguntas, ¿porque lo ha hecho de esta manera?, o ¿donde esta la clase que necesito?. Los comentarios también pueden ayudar en estas situaciones.

En un comentario puedes indicar que un bloque css no está terminado o que te has trabado y no sabes como terminarlo. De esta manera ahorrarás tiempo y dolores de cabeza a tus compañeros, por ejemplo:

/*-- Estilo para los estados del enlace a la espera de nuevos cambios de diseño, por favor no lo edites | JLV 03/23/10--* /
a: link,
a: visited (color: # 0075b2;text-decoration: none;}
a: hover, a: focus, a: active (color: # b3d88c;)

Ten en cuenta, que una vez que hayas terminado con el desarrollo, estos comentarios pierden su utilidad y sólo aumentarán el tamaño de tu archivo. Por lo tanto una vez terminado tu proyecto es recomendable eliminarlos.

Clave de color

También podremos utilizar los comentarios para crear una clave de color donde definiremos la paleta de colores para el sitio web. Esto es particularmente útil durante la fase de desarrollo, ahorrando así tiempo de muestreo de colores. ¿Necesitas saber el valor hexadecimal de enlaces azules de nuestra web?, míralo en la clave, solo tendrás que copiar y pegar. Puedes agrupar la clave en una sola línea, o dividirlas en varias líneas. De nuevo, el objetivo es encontrar el formato que mejor se adapte a nuestras necesidades y ser coherente una vez lo hayamos definido:

/*--- COLORES: Verde # b3d88c Azul | # 0075b2 | Gris claro # | # eee gris oscuro 9b9e9e | naranja # f26522 | Cerceta # 00a99d | Amarillo # fbc112 --- */
/*--- COLORES
Verde # b3d88c
Azul # 0075b2
Gris claro # eee
9b9e9e gris oscuro #
Naranja # f26522
Cerceta # 00a99d
Amarillo # fbc112
---*/

Fuente original (en inglés):msdn.microsoft.com

Existen un número reducido de selectores de atributo en CSS2, pero éstos se han ampliado para la próxima versión de CSS3. En este artículo veremos cuantos tipos de selectores de atributo hay y la mejor manera de utilizarlos.

Selectores por atributos en CSS2 (no funcionan en ie6)

• etiqueta[atributo]: Los estilos se aplicarán a todas las etiquetas que tengan ese atributo.

  
  CSS
  
  abbr[title] {color: #666;border-bottom: 1px dotted #666;}
  

• etiqueta[atributo=valor]: Se aplicará a los estilos de todos las etiquetas que tengan ese atributo con ese valor.

  
  Nombre
  
  
  
  input[type="text"] {width: 200px;}
  

• etiqueta[atributo~=valor]: El estilo se aplicará a las etiquetas que tengan ese atributo y que uno de sus valores separados por espacios sea el valor:

  
  Descargar
  El selector de atributo no se aplicará en este enlace
  
  a[title~=PDF]{background:url(img/pdf.gif) no-repeat center right}
  

• etiqueta[atributo|=valor]: Se aplican los estilos a todas las etiquetas que tengan ese atributo y que sea igual a valor o a valor seguido de un guíon. Este tipo de selector es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.

  
  Windows
  
  *[lang|="es"] { color : red }
  

Selectores de atributos en CSS3 (no funcionan en ie6)

Los navegadores Standard, ya incluyen soporte para varios o casi todos los selectores de CSS3, por lo tanto los selectores que veremos a continuación funcionaran correctamente en Opera, Safari, firefox y Chrome. Según la Microsoft Developer Network de Microsoft, estos selectores son compatibles en Internet Explorer 7 y 8.

A este respecto, existe una herramienta muy útil llamada CSS Selectors test que permite comprobar los selectores que soporta el navegador con el que se hace la prueba.

• elemento[atributo^="valor"]: Se seleccionan todos los elementos que tienen este atributo y cuyo valor comienza por la cadena de texto indicada.

  
  este enlace tendrá un color gris
  El selector de atributo no se aplicará en este enlace 
  
  a[href^=http://] {color:#ccc}
  

• elemento[atributo$="valor"]: selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada. Este selector es muy útil para agregar un icono diferente al lado de cada tipo de archivo que tu sitio web enlace. De este modo, los usuarios de tu sitio sabrán cuándo obtendrá una imagen, un archivo PDF o un documento de Word, aumentando así la usabilidad de tu web.

  /*CSS*/
  a[href$=".jpg"] {background: url(jpeg.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}
  a[href$=".pdf"] {background: url(pdf.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}
  a[href$=".doc"] {background: url(word.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}
  a[href$=".swf"] {background: url(flash.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}
  

• elemento[atributo*="valor"]: Se aplica a todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada.

  
  El selector de atributo no se aplicará en este párrafo 
  Este párrafo tendrá un tamaño de fuente de 1.2em y negrita
   El selector de atributo no se aplicará en este párrafo
  
  
  p[title*="ont"] {font-size:1.2em; font-weight:bold}
  

Antes de nada, debemos convertir la fuente al formato embebido eot. Este formato es el que usaremos para Internet Explorer, para el resto de navegadores se deja el formato estandar ttf.

Ya obtenidos ambos formatos de la fuente que queremos aplicar en nuestra Web, pasamos a la hoja de estilos. Tenemos que introducir las siguientes líneas de CSS, donde se define el nombre de la fuente y la ruta donde se encuentra dicha fuente.

Navegadores Comunes (Firefox, Opera, Safari, Chrome)

@font-face{
font-family:'20th Century Font';
src: url('../font/20thfont.ttf') format('truetype');
}

Internet Explorer

@font-face{
font-family:'20th Century Font';
src: url('../font/20thfont.eot');
}

Una vez que se haya escrito estas líneas en la hoja de estilos de nuestra Web, ya podemos usar dicha fuente en cualquier elemento HTML, por ejemplo:

#menu ul li a{color:#000;font-family:"20th Century Font";}

Para convertir las fuentes a los diferentes formatos, podéis usar la aplicación Microsoft WEFT. Bueno espero que os sirva de ayuda. He de advertir que no todas las fuentes suavizan de forma nítida en todos los navegadores, pero es el único método y el más preciso para conseguir visualizar las fuentes.

A continuación se presentan los recursos de 70 tutoriales y artículos para empezar con CSS3 y HTML5. Un listado que nos trae CSS Gallery Muchas de las técnicas analizadas son soportados en cierta medida en algunos algunos navegadores modernos (Safari y Firefox con el apoyo más amplio), para que puedas empezar de inmediato.

Ver 70 Tutoriales CSS3 y HTML5

Listado resumido del contenido del artículo de CSS 3 y HTML 5

• Tutoriales CSS3 y Recursos
• CSS3 y HTML 5 Combinación de Recursos
• HTML 5 Recursos
• Recursos adicionales

Con CSS de forma muy muy sencilla podremos conseguir esto, no tenemos que recurrir a Javascript para modificar dinámicamente las alturas de la cajas, ni usar otros métodos que acumalan demasiados divs para conseguirlo, y que luego abarcan problemas del diseño de la estructura.

Ahora veremos que usando los atributos display:table; display:table-row; y display:table-cell; conseguiremos convertir las cajas o divs en una tabla, y ya sabemos que con las tablas nunca veremos una celda más alta que otra de la misma fila.

En el siguiente ejemplo, usaremos 3 cajas que se convertiran en 3 columnas con el mismo alto, independientemente de su contenido. La explicación de como hacerlo se explica en el mismo HTML que hay a continuación.

Documento HTML

Esto es una caja

Este caja tiene menos contenido que la que está al lado, sin emabargo tienen la misma altura.


Esta es otra caja

Aquí tenemos más contenido que las otras. Si todas las cajas fueran celdas de la tabla, la celda con más contenido tendra la altura más grande. Y en una tabla todas las celdas de una misma fila siempre tendrán la misma altura. Esto funciona como un tabla, pero no lo es.

En su lugar, display: table, display: table-row y display: table-cell se utilizan para hacer que los divs se comporten como celdas de tabla. Excelente. No obstante, es soportado por los navegadores modernos, como Mozilla, Opera, Safari, Firefox, OmniWeb, Camino, Internet Explorer 8 y Netscape.



Esta caja tiene mucho menos contenido, y podemos observar la alineación vertical del contenido..

Debemos recordar que tan solo es soportado por los navegadores modernos; Mozilla, Opera, Safari, Firefox, OmniWeb, Camino, Internet Explorer 8 y Netscape

Documento CSS

.equal {
	display:table;
	border-collapse:separate;
}
.row {
	display:table-row;
}
.row div {
	display:table-cell;
}
.equal {
	margin:10px auto;
	border-spacing:10px;
	background:#898B60;
	width:80%;
}
.row div {
	background:#fff;
}
.row div.one {
	width:40%;
}
.row div.two {
	width:40%;
}
.row div.three {
	vertical-align:middle;
}

Ver ejemplo funcionando

Cada vez vamos viendo las facilidades y beneficios que nos aporta CSS ahora y en el futuro, esperemos que muy pronto podamos usar este tipo de propiedades para conseguir este tipo de cosas, sin tener que recurrir a opciones más complicadas de aplicar por culpa de que algunos navegadores no soporten ciertas propiedades. En este caso igualar la altura de distintos divs o cajas de distinto contenido.

Fuente: 456 berea street

Poco a poco nos tenemos que familiarizar con estas nuevas tecnologías (css3 y html5), ya que serán las que utilizaremos en un futuro no muy lejano. Todo esto va en continuo progreso así que nos conviene ir entrando en contacto.

Así que hoy vamos a experimentar un poco con estas nuevas tecnologías. Al final de este artículo aprenderemos cómo:

• Uso de Graceful Degradation, las técnicas y tecnologías para mantener las cosas en su lugar en los navegadores.
• Utilizar técnicas de mejoras y las tecnologías para estar al día con las últimas tendencias.
• HTML5 junto a un aumento de la tecnología: microformatos.
• Tener una visión clara de algunas de las más emocionantes nuevas características que CSS3 y HTML5 traerá.

La Mejora Progresiva y el Graceful Degradation

El Graceful Degradation es un término que se usa para definir lo siguiente; Cuando utilizamos las tecnologías mas recientes luego debemos conseguir fijar todo para los distintos navegadores que no la soportan. Esto lo hacemos a diario, creamos un código para Firefox y luego otro alternativo para arreglar los problemas en Internet Explorer y otros navegadores. Como hacemos la mayoría de nosotros (al menos yo), creamos primero el marcado y luego creamos la hoja CSS.

Cuando hablamos de mejora progresiva se refiere a la costumbre de construir primero para los navegadores “menos capaces”, (navegadores antiguos) y, a continuación, para aplicar las últimas tecnologías en los navegadores más potentes o recientes.

Diseño

Os muestro un diseño básico estructura para entender y visualizar claramente la organización del ejemplo de una Web con HTML5, este es la plantilla que conseguiremos maquetar al final del ejemplo:

El marcado

Os escribo el marcado básico inicial que usaremos antes de empezar:

Resumiendo…

3 diferentes comentarios condicionales para IE. En primer lugar incluye un código de Shiv html5 directamente desde Google Code para todas las versiones de IE. La segunda incluye el archivo IE8.js para una mejor compatibilidad de IE7 e inferiores, así como un archivo que ie.css spara solucionar los bugs de Internet Explorer. Y una tercera únicamente para bugs de IE6. Una tercera es simplemente un archivo CSS para arreglar bugs IE6.

Esta es una base muy sólida y de inicio para cualquier proyecto con HTML5 que podríamos hacer en el futuro. Con esto, podemos empezar a asignar etiquetas a las diferentes secciones de nuestro diseño. En la imágen vemos como quedaría la estructura Web de nuestro código:

Ejemplo práctico HTML5

Ahora vemos como quedaría el código HTML5 de nuestro ejemplo:

Smashing HTML5! HTML5 in the year 2022 2009



	








This be the title






Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo non sapien dapibus blandit nec et leo. Ut ut malesuada tellus.



		



			...
		



			...
		









blogroll

HTML5 Doctor
HTML5 Spec (working draft)
Smashing Magazine
W3C
WordPress
Wikipedia
HTML5 Doctor
HTML5 Spec (working draft)
Smashing Magazine
W3C
WordPress
Wikipedia
HTML5 Doctor
HTML5 Spec (working draft)
Smashing Magazine
W3C
WordPress
Wikipedia




social

delicious
digg
facebook
last.fm
rss
twitter

Activando el HTML5

Como hemos dicho antes la mayoría de los navegadores no entienden de HTML5 actualmente. Y desde que están desarrollo se ha discutido por los estilos por defecto que contendran las nuevas etiquetas. Por lo tanto estas etiquetas que no existen paa el navegador vendrán sin estilos, por lo tanto les aplicaremos los estilos para elementos de bloque:

/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}

Ahora podremos usar estas nuevas etiquetas como si fuesen <div>

Bueno después de una breve explicación os dejamos ver el ejemplo una vez finalizado, para que podáis estudiarlo por completo y ver como funcionan conjuntamente estas 2 nuevas tecnologías (CSS3 HTML5):

Ver Ejemplo: Maqueta HTML5

Fuente: SmashingMagazine (artículo completo)

Círculo de Maquetadores: Comunidad de Maquetadores Web

A que cada muy bonito ¿eh?. Bueno esto se consigue haciendo referencia exacta del PostScript del tipo de fuente que querramos usar, en este caso es la Helvetica (HelveticaNeue Light). Con esta regla en los navegadores como Firefox y Safari se reconocera dicha fuente, y otros navegadores basados en Gecko como Camino. También se debe aplicar el grosor de la fuente para conseguir el smooth. Así que la siguiente declaración en la hoja de estilos te dará este magnifíco resultado:

font-family:'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue',
Calibri, Verdana, sans-serif;
font-weight:300;

En resumen, si desea utilizar un font face, tiene que usar font-family la propiedad font-weight, llamando al PostScript y a los nombres de las fuentes compatibles que siempre hemos usado. Ahora ya podemos hacer nuestras Webs con unas fuentes atractivas. Supongo qeu esto generará muchas opiniones. Pero realmente uno no se esperaba que se pudiera conseguir el suavizado de texto mediante CSS, y conseguir que la maqueta Web sea algo más parecida al diseño original.

La guía de referencia CSS 3 dispone de una de las más completas y actualizadas hojas de cheats con la nueva especificación de CSS 3. Veremos las nuevas propiedades, selectores y que valores se pueden introducir según el estándar CSS3.

Descargar Guía de Referencia CSS3