Semanticode

Opacidad y transparencias en imágenes de fondo

kielland — Sun, 05 Apr 2009 10:30:32 +0000

He estado trabajando en una web que basaba su interfaz en una imagen de fondo –un bonito campo de espigas–. Como quería que el texto estuviese claro, veía conveniente reducir la opacidad del fondo de la capa que contenía el texto. He visto por ahí que con algunas técnicas en css como “opacity: 0.5″ o “moz-opacity: .5″ se podía lograr. Pero, para empezar, no son códigos amigables con los estándares web. Así que decidí hacer algo sencillo. Por otro lado, también aplicaba la opacidad al texto, por lo que la legibilidad que exigía se veía mermada.

¿Cuál fue mi solución? Ponerle un fondo blanco, en formato .png, con opacidad del 50%. Se puede hacer con cualquier editor de imágenes que lo permita (photoshop, pixelmator…).

Ejemplo HTML/CSS:

Esto es una prueba.

#wrapper {
width: 950px;
margin: 0 auto;
background-image: url(images/bg_white.png);
padding: 2em;
}

Medidas en CSS

kielland — Wed, 16 Jan 2008 16:42:52 +0000

Vía CSSLab encuentro un interesante articulo sobre medidas en CSS. Con tabla de proporciones equivalentes incluida.

Enlaces semanales I

kielland — Sat, 12 Jan 2008 19:46:44 +0000

Los 8 grandes errores del diseño web | Metal.ize
Interesante artículo por parte de metal.ize en el que se nos da un listado de ocho errores en el desarrollo web. Un buen punto de vista, y fundamentado. A destacar el análisis sobre el buen uso de los titulares (H1, H2, H3…) en XHTML.

Diseñando tablas | Infectedfx.net
Hoy en día muchos desarrolladores creen que el uso de tablas es malo. Pero no es así, lo que está mal es el uso que se les ha dado a las tablas. Ellas están para lo que están, para tabular datos. Este tutorial muestra cómo diseñar una tabla, sin tener que recurrir a editores como Dreamweaver, mediante XHTML y CSS.

Ejemplos de código para WordPress

kielland — Sat, 05 Jan 2008 08:52:47 +0000

En Sentido web me encuentro con unos cinco ejemplos útiles para quienes quieran manejar código sencillo en WordPress y no morir en el intento:

Asignar una imagen al ID de un post
Separar los trackbacks de los comentarios
Mostrar el nombre de la categoría donde queramos
Mostrar los posts más recientes

Vía Sentido web – Ejemplos de código para WordPress
Más información Pingable – 5 WordPress php code snippets

Curso XHTML II – Nuestro primer documento XHTML

kielland — Thu, 03 Jan 2008 20:19:32 +0000

Estructura básica de un documento XHTML

Después de varios apuntes previos, lo mejor es ponerse manos a la obra y comenzar a construir nuestro primer documento XHTML. Podemos insertar comentarios en nuestro documento de esta forma:

Los navegadores no tomarán en cuenta los comentarios y a nosotros nos serán de gran ayuda para ir describiendo cada elemento de nuestro documento. Veamos la estructura básica de un documento XHTML:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Semanticode

Este es el contenido de nuestro primer documento XHTML

–>

Veamos con detalle el comienzo de nuestro documento:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Realmente no es necesario saberse de memoria estas líneas de código, podemos copiarlas y pegarlas al comienzo de nuestro documento. Nos bastará saber que existen diferentes tipos de encoding, esto es, codificación de caracteres, y que el que nosotros hemos empleado, UTF-8, nos sirve para mostrar caracteres especiales (diéresis, tildes, etcétera).

Hacks para CSS y cómo detectar el navegador

kielland — Mon, 31 Dec 2007 10:44:45 +0000

El problema que hay con CSS, ya se ha hablado muchas veces, es que no todos los navegadores se siguen de los estándares web (los estándares web, recordemos, no son una normativa sino una propuesta que cada vez tiene más aceptación; nosotros queremos que todos los agentes de usuarios traten por igual nuestro diseño, navegadores como IE hacen que no sea posible). Como tenemos que tener en cuenta que hoy en día mucha gente sigue usando antiguas versiones de IE, hemos de echar mano de los llamados “hacks”. Estos “hacks” de CSS, son los que permiten que, por un lado, nuestra página se vea aproximádamente como queremos para IE, y por otra, se siga viendo bien en navegadores y dispositivos que respetan el uso de estándares.

No hace mucho en Semanticode se dio una solución respecto al uso de fuentes en distintos tipos de navegadores.

Enlace: Hacks para CSS y cómo detectar el navegador

Curso de XHTML I – Introducción

kielland — Wed, 26 Dec 2007 11:13:33 +0000

¿Qué es el XHTML?

El XHTML (lenguaje de marcado de hipertexto extendido) nos permite imprimir “marcas” (indicaciones) sobre un documento. Esto nos permite diferenciar entre distintos tipos de estructuras, secciones o contenidos. Se emplea para generar documentos y contenidos de hipertexto publicados en dispositivos web (navegadores, teléfonos móviles, portátiles…). Estos dispositivos (a los que, a partir de ahora, llamaremos agentes de usuario) son capaces de interpretar documentos XHTML. Las “marcas” nos permiten definir qué es un título y asignar a éste jerarquías de importancia (h1, h2,h3…). Por ejemplo:

`Semanticode: Blog sobre diseño y semántica`



 Curso de XHTML - Introducción

Así, entenderemos que el título h1 tiene una jerarquía de importancia mayor que h2.

Ficheros XHTML, editores y navegadores

Los ficheros XHTML pueden representarse con las extensiones .html, .htm o .xhtml. Los agentes de usuario interpretarán dichos ficheros y los mostrarán en la pantalla. Así, cuando trabajemos con nuestro documento deberemos guardarlo con alguna de las extensiones mencionadas anteriormente.

Existen muchos editores de texto que nos ayudarán en el marcado de nuestros documentos. De entre todos ellos, en mi opinión los mejores son CODA o Komodo. Ambos para el sistema operativo Mac OS. Los hay también gratuitos, tanto para Windows como para Mac Os o Linux.

Es conveniente chequear el sitio en distintos navegadores. Hemos de saber que los más empleados son Internet Explorer (6 y 7), Mozilla Firefox (el mejor de ellos, que además cuenta con numerosas extensiones o plugins de gran ayuda), Ópera y Safari. Es conveniente emplear Mozilla Firefox como navegador predeterminado, pues de entre todos, es el que mejor se lleva con los estándares web.

Etiquetas (marcas)

El principal elemento de sintaxis en nuestro documento es la etiqueta (lo que antes denominábamos marca).

Esta etiqueta se emplea para definir el contenido de un párrafo

Este es un ejemplo del uso de una etiqueta, en este caso, la etiqueta p, que se abrirá y cerrará con paréntesis angulares. Debemos tener en cuenta, a modo de normativa, que toda etiqueta que abramos ha de ser cerrada. Abriremos la etiqueta así

y cerraremos la etiqueta del mismo modo pero añadiendo una barra

. Si no la cerramos, los agentes de usuario no interpretarán correctamente nuestro código y el código será mal generado.

Existen algunas etiquetas en cuyo uso se incluye la apertura y el cierre. Es el caso de la etiqueta
. La etiqueta
se utiliza para definir los “saltos de línea”, y es una abreviatura de

. En este caso, bastará con colocar
cuando queramos aplicar un salto de línea.

Esta es una frase que termina. Tras la primera frase hay un salto de línea.

En el caso de que lo escribiésemos así…

Esta es una frase que termina. Tras la primera frase hay un salto de línea.

Los agentes de usuario interpretarían dicho código sin saltos de línea, puesto que no reciben ninguna orden que les indique que han de mostrarlos.

Etiquetas de apertura con atributos

Algunas etiquetas pueden contener atributos que especifican características particulares de éstas. Los atributos tienen un nombre seguido de un igual = y entre comillas el valor de tal atributo.

>Semanticode

es la etiqueta

href es el atributo

http://semanticode.wordpress.com es el valor

Con esta etiqueta, atributo y valor estamos construyendo un enlace o vínculo. En este caso Semanticode será el nombre de nuestro enlace

Tamaño y escala del texto o fuente en CSS

kielland — Fri, 07 Dec 2007 16:43:29 +0000

Leo un artículo en A List Apart de Richard Rutter sobre las diferentes técnicas para definir el tamaño –y la escala, el redimensionamiento– de textos en CSS y las consecuencias del uso de esas técnicas sobre distintos navegadores –el estudio se realiza sobre Safari 2, Firefox 2, Internet Explorer (IE5 y IE6) y Opera 9.5–. No es una gran lista, pero suficiente, dado que son los navegadores más empleados por los usuarios. Hago un breve resumen:

Tamaño de fuente por defecto

El tamaño de texto por defecto, cuando no hay ningún estilo que se le aplique, es de 16 píxeles. Todos los navegadores interpretan esa cantidad correctamente y, además, el texto se escala perfectamente cuando el lector decide ampliar o reducir el tamaño de la fuente… ¿entonces dónde está el problema? Pues que a muchos de los diseñadores les parece excesivamente grande para el texto del cuerpo.

Tamaño del texto en píxeles

Una solución “a medias” es poner el tamaño del texto a 14 px –en A List Apart definen el texto del sidebar a 12 px–.

.bodytext p { font-size: 14px; }

De esta forma, tanto Safari como Firefox ajustan correctamente el tamaño del texto, pero las versiones 5 y 7 de IExplorer no. Tanto en Opera, como en el IE 7, el texto puede ser ajustado con la herramienta del zoom. Por mucho que los diseñadores odiemos –y con razón– Internet Explorer, es cierto que la estadísticas en esta caso no mienten, y es un navegador usado por mucha gente. Por lo que definir el texto en píxeles dejará a mucha gente sin posibilidad de ver el texto ajustado tal y como nosotros lo definimos.

Definir el texto con la medida em

La medida em es una unidad tipográfica recomendada por la W3C. Trabajando desde los 16px que se nos dan por defecto, el siguiente estilo debería darnos el tamaño de texto deseado:

.bodytext p { font-size:0.875em; /* 16x.875=14 */ }

Los resultados hablan por sí mismos. Todos los navegadores se ajustan correctamente a nuestro estilo definido, y vemos el texto como si lo hubiésemos definido a 14px.

Body ajustado en porcentaje

Hemos visto que con la medida em podemos ajustar correctamente el valor que queríamos darle por defecto al texto. Pero, sin embargo, en las versiones 5 y 7 de Explorer, vemos se exagera la pequeñez y la grandeza del texto redimensionado. Una forma de solucionar esa exageración, es aplicadole una medida de porcentaje al texto del body. Guardamos los ems del contenido y aplicamos los siguientes estilos:

body { font-size:100%; }
.bodytext p { font-size:0.875em; }

En los resultados vemos que esa exageración se difumina. Ahora sí, todos los navegadores renderizan el texto con el mismo tamaño por defecto y se redimensiona consistentemente.

Semanticode

Opacidad y transparencias en imágenes de fondo

Medidas en CSS

Enlaces semanales I

Ejemplos de código para WordPress

Curso XHTML II – Nuestro primer documento XHTML

Estructura básica de un documento XHTML

Hacks para CSS y cómo detectar el navegador

Curso de XHTML I – Introducción

¿Qué es el XHTML?

Semanticode: Blog sobre diseño y semántica

Curso de XHTML - Introducción

Ficheros XHTML, editores y navegadores

Etiquetas (marcas)

Etiquetas de apertura con atributos

Tamaño y escala del texto o fuente en CSS

Tamaño de fuente por defecto

Tamaño del texto en píxeles

Definir el texto con la medida em

Body ajustado en porcentaje

`Semanticode: Blog sobre diseño y semántica`