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.
Una de las cosas más frustrantes de heredar un proyecto de otra persona, es cuando las convenciones de nomenclatura para clases e identificadores no tienen ningún sentido. Esto puede dificultar una actualización o un rediseño y puede hacernos perder mucho tiempo. En este artículo te daremos algunos consejos sobre como nombrar a las clases e identificadores de tus proyectos, de manera que sean fácilmente entendibles por otros desarrolladores. Sigue leyendo →
¿Cuántas veces has heredado un proyecto de otra persona, para descubrir que el código es un desastre y no entiendes nada?. Cada uno tiene su manera de escribir código, pero esto tiene serios inconvenientes a la hora de compartir proyectos, puesto que aunque nosotros lo entendamos, puede que nuestro código sea ininteligible para los demás. Sigue leyendo →
Todos sabemos que las etiquetas en HTML pueden tener atributos tales como alt, title, href etc… Aparte de para lo obvio estos atributos nos pueden servir para dar especificidad a nuestros selectores CSS. Los llamados selectores de atributo, son unos selectores avanzados y escasamente conocidos, capaces de identificar estos atributos de un elemento y pasarles un estilo. Con ellos nos podríamos librar de por ejemplo, poner clases e identificadores a muchas etiquetas HTML.
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.
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.
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.
Todos sabemos que la propiedad de CSS font-face funciona en los navegadores como Firefox y Opera entre otros. Pero nunca conseguíamos adaptarlo correctamente para Internet Explorer. Explicamos brevemente como conseguir que funcione sin problemas.
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.
@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.
CSS 3 y HTML 5 son capaces de revolucionar la forma en la que se diseñan los sitios Web. Ambos incluyen nuevas características y tantas funciones que es imposible no empezar a ver como funcionan. La inclusión de soporte nativo para cosas como las esquinas redondeadas y diseño de columnas múltiples son sólo la punta del iceberg.
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.
Muchas veces más de uno de nosotros nos hemos encontrado con “columnas” de distinto tamaño. Es decir, cajas de diferente altura. Siempre queremos conseguir que independientemente del contenido de las mismas la altura sea igual para todas.
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
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.
CSS3 y HTML5 están ya llegando poco a poco, y con ellos toda una nueva batalla por conseguir el mejor marcado. Estas nuevas tecnologías facilitarán también la integración de plantillas o maquetas a los desarrolladores. Por el contrario, tenemos que obtener una nueva ideología y modificar nuestros hábitos de codificación para mantener la Web Accesible.
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:
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.
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:
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):
Supongo que habéis notado que en la mayoría de los navegadores el suavizado de texto no se percibe tal y como lo hace el Internet Explorer 7 e Internet Explorer 8. Pero si véis el texto siguiente bajo el sistema operativo MAC notaréis que el suavizado de texto o smooth text se visualiza en Firefox de forma sorprendente, y como comprobaremos “no es una imagen”:
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.
Chris Hanscom ha desarrollado una nueva guía rápida de referencia CSS3 con las últimas especificaciones.
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.
