Imágenes con marcos

Mientras leía atentamente el el tutorial Photoshop: Actions que Diego escribió con el fin de facilitar la tarea a aquellos que ponen marcos a las imágenes, se me ocurrió que podría aprovechar y compartir dos técnicas distintas que nos ayudarán a ahorrar tiempo y ancho de banda.

Update:

Gracias a Sosa ahora contamos con una versión mucho más correcta: Usando padding y backgroud

Uso de transparencias y backgrounds

En este primer caso vamos a ver como poner un marco a una imagen tal y como lo hacemos en este sitio junto al título de cada anotación.

Ingredientes:

En primer lugar necesitamos una imagen que hará la función de marco. Esta imagen es un GIF y tiene el fondo transparente, de modo que luego podremos mostrar la otra imagen “a través” del área transparente.

Obviamente también vamos a necesitar la imagen que queremos mostrar con el marco.

Lo que vamos a hacer es bastante sencillo, vamos a usar la propiedad background-image para mostrar la imagen a través del área transparente del marco. Sin embargo, antes de continuar, es importante saber que si bien parece que esta técnica resuelve muchos problemas genera un nuevo inconveniente y es que semánticamente vamos a engañar a los robots de busquéda que van a entrar a nuestra web y van a cree que el marco transparente es la imagen importante, cuando realmente no es así. No es un problema serio, pero quería dejarlo claro antes de continuar.

La implementación
El proceso es bastante sencillo. Vamos a suponer que tenemos la imagen dentr un DIV con la clase contenedor.

<div class="contenedor">
<img src="polaroid.gif" alt="Polaroid" />
</div>

Lo primero que hacemos, en nuestra hoja de estilos es añadir este nuevo selector:

.contenedor img{
     background-position: 3px 3px;
}

En el siguiente y último paso, lo que vamos a hacer es hacer la llamada a la imagen del marco y poner como fondo la imagen que realmente queremos destacar:

<div class="contenedor">
<img src="marco.gif" alt="Polaroid" style="background-image: URL(polaroid.gif);"/>
</div>

Hay que tener en cuenta que si bien podemos determinar la background-image en la hoja de estilos, conviene hacerlo en el HTML ya que es probable que queramos tener distintas imagenes en una misma página y en una hoja de estilos podemos usar un único background por selector.

Método alternativo y semáticamente correcto

En los comentarios Sosa sugería otro método, que ha resultado ser mucho más sencillo y eficiente. De hecho, no necesitamos las transparencias asi como tampoco nos encontramos con el problema semántico del método anterior.

Usamos paddings y background
En este caso, invertimos el orden de las imágenes por lo que en nuestro código html tendremos una llamada a una imagen perfectamente correcta dentro de un elemento cualquiera:

<div class="contenedor">
<img src="polaroid.gif" alt="polaroid">
</div>

En nuestra hoja de estilos agregamos este selector con estás propiedades:

.contenedor img{
padding:3px;
background-image: URL(marco.gif);
}

El resultado es exáctamente el mismo y todo es mucho más correcto. Sólo tenemos que acordarnos de ajustar el padding al ancho del marco que estemos usando.

23 comentarios

Tendencias

Es probable que alguna vez hayáis acudido a una tienda en busca de un artículo de última generación y en vez de comprarlo acabáis explicandole al dependiente cuales son las ventajas de usar bluetooth o cualquier otra tecnología que desconociera.

Aquellos que nos hemos metido en el competitivo mundo del diseño y desarrollo de sitios y servicios, el riesgo de quedar mal ante un cliente por desconocer alguna tendencia es muy grande, básicamente porque Internet es algo que crece de manera casi exponencial y basta distraerse un par de semanas como para poder perder una perspectiva actualizada de cuales son las últimas tendencias en el sector.

Uno podría pensar que para poder mantenernos al día deberíamos pasar horas y horas navegando, pero lo cierto es que no es necesario ni recomendable hacerlo de esa manera, hay formas mucho más eficientes de hacerlo.

Benchmarking

El benchmarking es el proceso de determinar quién fija las tendencias o los nuevos estándares y cuales son esos estándares.

Hay que tener claro que es un proceso en el que no tomamos decisiones, nos limitamos a informarmos, y debería ser la actividad a la que más tiempo dediquemos a la hora de reconocer las tendencias más fuertes y desarrolladas del sector en el que trabajamos.

No obstante, tal vez no sea la mejor manera de reconocer las tendencias que están por surgir, pero un benchmarking exhaustivo nos dará una buena visión global de lo que está pasando en nuestro entorno.

Ejemplo:
Si nuestra area de acción fueran las tecnologías relacionadas con búsquedas de información en Internet, estudiaríamos detalladamente cuales son las actividades que realizan los principales búscadores, qué movimientos estratégicos realizan y por ejemplo esta semana estaríamos muy interesados en que Google haya comprado a Picasa Inc y los motivos por los que pueda haberlo hecho

Fuentes alternativas

Tal y como habíamos mencionado anteriormente el benchmarking no es muy eficiente para detectar tendencias emergentes, sino que se limita a informarnos de que tendencias están ya establecidas en el sector.

En sectores muy competitivos, detectar una tendencia con suficiente antelación puede facilitarnos la labor de estar más preparado que los competidores en el momento que esa tendecia se haya establecido definitivamente.

Ahora bien, para poder llegar a detectar una tendencia emergente necesitamos profundizar mucho más en los que eventos que se están sucediendo dentro de un sector determinado y eso significa, en principio, tener que dedicar mucho tiempo filtrando y analizando dicha información.

Por suerte, en estos momentos cada vez tenemos más control sobre la información y gracias a la sindicación XML, a los weblogs y la gran cantidad de nuevas herramientas que no dejan de surgir, cada día es más fácil recibir toda esa información sin enfuerzo y que antes teníamos que buscar escrupulosamente. Claro, que para poder sacar provecho de esta situación, previamente teníamos que conocer esta nueva tendencia…

Ejemplo:
Continuando con el ejemplo anterior, si quisieramos investigar mucho más exhaustivamente podríamos estar suscrito a canales XML especializados, a listas de correo , foros e incluso podríamos también, por poner un ejemplo más concreto, tener varias “watchlists” en Technorati. Por último, analizar esta información y determinar si una tendencia puede o no prosperar no es fácil, pero el seguimiento continuo del flujo de la información facilita mucho la labor, ya que no es difícil ver como pequeñas ideas empiezan a propagarse hasta convertirse en una posible tendencia.

8 comentarios

Sans Serif, Sans Price

Si actualmente necesitas incorporar nuevas fuentes sans serif a tu selección personal, te recomendamos estas seis fuentes. Después de haber chequeado los “readme.txt” y ficheros adjuntos que nadie suele leer, sabemos que en principio no están sujetas a restricciones en su uso y que se pueden distribuir libremente. También nos hemos asegurado que todas ellas incluyan “caracteres extendidos” y en la previsualización que hacemos, con todas ellas hemos usado el mismo tamaño de fuente para que se puedan comparar las proporciones.

Antes de continuar, lo único que queremos pediros que en los comentarios nos digáis cuales os han gustado más, con el fin de conocer un poco los gustos de nuestro lectores.

Tiene un corte que solo podría describir cómo exótico. Es bastante afilada en los extremos y las líneas rectas no predominan. Creo que da mejores resultados al usar exclusivamente las minúsculas.
Descargar Baar Sophia

Muy sencilla y básica, de hecho es precisamente eso lo que la convierte en interesante, ideal cuando necesitas una fuente que no destaque mucho sobre el resto de elementos de una página.
Descargar Bitstream Vera Sans

Mucho más compacta y condesada que las demás algo que resulta práctico cuando necesitamos poner textos largos en espacios no muy amplios.
Descargar Blue Highway

Esta fuente la acabamos de encontrar hoy, nos parece versátil y estamos convencidos que la usaremos con frecuencia en nuestros trabajos.
Descargar Dream Orphans

Una opción interesante para cuando tengamos que usar mayúsculas y versalitas.
Descargar Engebrechte

Esta es la fuente que usamos en html life, estoy especialmente obsesionado con ella. Supongo que con el tiempo se me pasará, ¿no?.
Descargar Offensive Bold

Por último, todas estas fuente y muchas más en DaFont.

25 comentarios