En este artículo vamos hablar del Diseño web responsivo o diseño web adaptativo, seguramente ya lo estés aplicando a tus proyectos o al menos has oído hablar de esta evolución del concepto de adaptación web.

Seguir leyendo »

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

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

  
  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}
  

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.

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.

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.

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

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

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