Efecto Bubble con CSS
Tuesday, December 1st, 2009Una opción interesante para un menú
Archive for the ‘XHTML’ Category
Simply Buttons
Tuesday, December 1st, 2009Botones sencillos y elegantes multinavegador para tus diseños XHTM/CSS
Maquetación de email promocionales
Monday, October 19th, 2009Aqui un apunte para un tema concreto. vía www.tallerd3.com
El arte de maquetar emails para que sean visualizables en todos los programas de correo es sumamente complicado. Cada cual soporta las propiedades de CSS que le parece. Haciendo un trabajillo reciente he encontrado estos consejos para maquetar emails en Scuain.com:
- Maqueta usando tablas, con un HTML básico
Desafortunadamente, nada de <div> en el código.- El uso de CSS está limitado
Algunas propiedades como backgound-image o margin no suelen funcionar. Este listado es la mejor referencia para saber cuales puedes usar. Se actualiza periódicamente y existe una versión imprimible en PDF.- El CSS debe estar insertado en línea en cada etiqueta HTML
Por ejemplo <p style=”font-size: 20px; color: #656565;”>. Si no quieres hacerlo a mano, Premailer es una herramienta que inserta las diferentes propiedades en cada una de las etiquetas.
Si vas a usar clases, es necesario que dupliques el código CSS: debes insertarlo tanto en el <head> como en el <body>.- Usa el atributo alt en las imágenes
Si el programa de correo o webmail bloquea las imágenes (la mayoría lo hacen por defecto), se podrá leer una pequeña descripción de esa imagen.- No adjuntes las imágenes
Debes colgarlas en un servidor y poner la ruta absoluta (<img src=” http://www.midominio.com/mail/imagen.gif” … />)- No uses Flash ni JavaScript
La gran mayoría de programas y webmails lo filtran o desactivan.- Usa la codificación ISO-8859-1
Es la más habitual para emails en castellano. Además, y como medida de seguridad, es recomendable usar entidades HTML. Si te resulta más cómodo, puedes usar este conversor.- Comprueba el resultado
Después de maquetarlo, hay que comprobar el resultado a través de los diferentes clientes (Outlook Express, Mozilla Thunderbird…) y webmails (Gmail, Hotmail, YahooMail…).
Siempre existirán pequeñas diferencias entre uno y otro, así que el objetivo es conseguir un aspecto similar y que puedan leerse sin problemas.- Vigila el nivel de spam
Actualmente, muchos de los emails no superan los filtros anti-spam. El nivel de spam aumenta si usas muchos links y poco texto, tamaños de fuente elevados, texto en mayúsculas, caracteres “raros” en el título… Puedes comprobar los niveles de tu email en http://spamcheck.sitesell.com/.
Problemas con los select en IE
Thursday, June 25th, 2009Internet Explorer tiene un bug que cabrea bastante cuando le pasa a uno, éste afecta a los select. Cuando tenemos una lista de opciones de distinto ancho, es más que probable que si navegamos con IE se nos corten las opciones más largas, no adaptándose la etiqueta a éstas.
Pues bien, nuestro amigo Alberto nos envía in tip en el que se desarrolla un JS para que esto no suceda. Transcribo desde css-tricks.com ¡Espero que os solucione más de un quebradero de cabeza!
Select Cuts Off Options In IE (Fix)
I think the problem is fairly obvious here. If you set a static width on the <select> element, any <option> elements that are wider get cut of in IE 7 and below. There is no good CSS solution for this that I can come up with or find. It has been tackled with JavaScript a number of ways.
- Yahoo! has a fix in their libraries. But I’m already using jQuery, didn’t want to add a bunch of extra libraries I don’t need most of.
- There is a solution with JavaScript applied via CSS behavior expressions. But those freak me out, and I was seeing major problems when I tried this (whole page didn’t want to load).
- You can use some inline JavaScript to alter the width on click. This is closer to what I want, but of course inline JavaScript is usually bad news.
What I Did
I decided the best way to handle it is to keep the static width on the select element by default, but when moused over in IE, change the width to “auto” to accommodate. And then of course put it back to static width when moused out. I was already using jQuery so:
$(function() {
$(”.ProductAttributesSelect”)
.mouseover(function(){
$(this)
.data(”origWidth”, $(this).css(”width”))
.css(”width”, “auto”);
})
.mouseout(function(){
$(this).css(”width”, $(this).data(”origWidth”));
});
});
In plain English:
- When mouse pointer goes over select element, keep track of the original width, then set it to “auto”.
- When mouse pointer leaves, set width back to original width.
Of course, only IE 7 and lower need this, so I apply the script via IE conditional comments. Thanks to Jason Huck for reminding me to use the data function (I was setting the rel attribute to save the data before, old school style). And all the folks on Twitter for the ideas!
QuirksMode
Wednesday, June 17th, 2009Marina nos envía una excelente página donde Peter-Paul Koch hace un análisis exhaustivo de las propiedades CSS y su comportamiento en los distintos navegadores. Para guardarla en “Favoritos”, sí señor.
Solución bug IE y SWF
Friday, February 20th, 2009Aun, cuando navegamos con Internet Explorer, al llegar a una página que contiene un objeto de flash se puede ver esa molesta línea de puntos que enmarca a dicho componente y, al pasar el cursor por encima, aparece un tooltip que reza: Haga clic para activar y usar este control. Pues bien, desde leandrodonofrio.com nos dan la solución:
Como sabrán (y si no lo saben viene bien la información), el pasado 11 de abril, Microsoft realizó una actualización de su software Internet Explorer, el cual modifica la forma de utilización de los controles Activex, debido a un problema judicial con la empresa Eolas y una patente que ellos registraron y Microsoft violaba. Dicha patente era sobre como incorporar en las etiquetas HTML contenido en Flash (y también otras como PDF, media players, etc)…
Esta actualización básicamente lo que hace es que cuando abramos una página hecha en Flash ó con contenido en Flash, antes de interactuar con ella, debemos primero darle el OK para que esta se active.
He visto varias soluciones a tener en cuenta, todas consisten en la incorporación de una librería en JavaScript la cual hará que la película funcione correctamente.
Las soluciones a este problema son…
1. Solución oficial de Adobe:
- Bajo el título Flash Professional 8 and Flash Basic 8 Active Content Update, hay que descargar un archivo .mxp, el cual es un complemento para Flash, este se abre con el Macromedia Extension Manager.Puntos a tener en cuenta:
*Descargar el complemento para la versión de Flash que tengamos instalada;
*Tener en cuenta que hay que descargar el complemento en el idioma español;
*Las instrucciones vienen en un archivo HTML junto a la descarga (es un archivo comprimido .zip);
*Las instrucciones están en español;
*Todo se realiza automáticamente sin tener que registrar manualmente el HTML (sigan las instrucciones de la ayuda).
2. SWFObject:
- Bajo el título Flash Professional 8 and Flash Basic 8 Active Content Update, hay que descargar un archivo .mxp, el cual es un complemento para Flash, este se abre con el Macromedia Extension Manager.Puntos a tener en cuenta:
*Descargar el complemento para la versión de Flash que tengamos instalada;
*Tener en cuenta que hay que descargar el complemento en el idioma español;
*Las instrucciones vienen en un archivo HTML junto a la descarga (es un archivo comprimido .zip);
*Las instrucciones están en español;
*Todo se realiza automáticamente sin tener que registrar manualmente el HTML (sigan las instrucciones de la ayuda).
3. UFO (Unobtrusive Flash Object):
- Posee muchas similitudes a SWFObject, al igual que este, es muy flexible su código. Las insrucciones también están en la web de su creador .
4. jActivating:
- Según David Muñuz, su creador, JS Embedded Content es :” Es un pequeño script “no obstructivo” que permite interactuar con contenido embebido (películas Flash, películas Quicktime, applets de Java, etc.) sin tener que primero activarlos manualmente en Internet Explorer y Opera por el caso EOLAS.
5. Otras soluciones alternativas:
- Existen dando vuelta por Internet otras soluciones alternativas que surgieron espontáneamente de los distintos webmasters. Entre ellas puedo nombrar a la web Tutoriales - Flash que ofrece una ayuda sobre este tema.
- Actualización 20/6/2006: La versión internacional del Opera 9.0 también posee el mismo problema que Internet Explorer, no asi sus versiones anteriores.
Herramienta online para nuestros layaout XHTML
Tuesday, February 10th, 2009Construye tu layout olvidandote de recalcular medidas
La herramienta se llama Grid Designer
Página de error 404
Wednesday, February 4th, 2009Para el que no lo sepa, el error 404 es aquél que hace referencia a una página no encontrada, significa que el navegador ha sido capaz de comunicarse con el servidor pero no ha encontrado el fichero solicitado. Pues bien, ¿por qué quedarnos con las feas páginas de error por defecto? Pongámosle un poco de creatividad…
¿Por qué utilizar XHTML?
Friday, January 30th, 2009Vía mqaccesibilidad
Con respecto a este tema hay una gran discusión, ya que hay personas que opinan que en la actualidad es mejor usar el estándar HTML 4 ya que el XHTML 1.0 no supone un gran avance al HTML 4.
En este artículo sólo pretendo reflejar una serie de razones (sacadas del libro “Diseño con estándares Web” de Jeffrey Zeldman) que pueden ayudar a decidirnos por el XHTML, seguro que algunas pueden ser discutidos. Por supuesto, que no pretendo que nos pasemos todos al XHTML, eso ya es decisión de cada uno que tendrá que valorar las ventajas e inconvenientes de cada una de las opciones que tenemos.
Asi pues, algunas de las razones para realizar la conversión a XHTML son las siguientes:
- XHTML es el estándar de marcado actual, que ha sustituido a HTML 4.
- XHTML se ha diseñado para funcionar correctamente con otros lenguajes de marcado, aplicaciones y protocolos basados en XML.
- XHTML es más coherente que HTML, por lo que es menos probeble que provoque problemas de funcionamiento y representación.
- XHTML 1.0 es un puente a futuras versiones de XHTML. Si el borrador de la especificación XHTML 2 alcanza el estado de recomendación final, resultará más sencillo adaptarse a la misma (si lo quiere hacer) desde XHTML 1.0 que desde HTML.
- Los navegadores antiguos se sienten tan cómodos con XHTML como con HTML. A este respecto, XHTML no presenta ninguna ventaja especial pero tampoco ningún inconveniente.
- A los nuevos navegadores les encanta XHTML (en especial XHTML 1.0) y muchos les conceden un tratamiento especial que no se ofrece a páginas creadas con HTML 4. En muchos casos, esto hace que XHTML sea más predecible que XML.
- XHTML funciona con la misma corrección en dispositivos inalámbricos, lectores de pantalla y otros agentes de usuario especializados que en navegadores de escritorio tradicionales, y en muchos casos elimina la necesidad de crear versiones de marcado inalámbrico especializadas y permite que los sitios lleguen a un mayor número de usuarios con menos trabajo y a menor precio. No podemos garantizar la relación causa efecto, pero muchos sitios HTML se ven cargados de versiones inalábricas, versiones sólo texto y páginas especiales para impresión, mientras que la mayoría de los sitios XHTML no sufren estos estorbos: un documento vale para todo. (En la mayoría de los casos, un documento sirve para todo si cuenta con el estilo correcto para varios medios, función que desempeña CSS).
- XHTML forma parte de una familia de estándares Web (en la que se incluye CSS y el DOM del W3C) que le permite controlar el comportamiento y el aspecto de páginas Web entre diferentes plataformas, navegadores y dispositivos.
- La creación en XHTML puede ayudarle a abandonar el hábito de escribir marcado de presentación lo que, a su vez, le puede ayudar a evitar problemas de accesibilidad e incoherencias de representación entre navegadores de escritorio de diferentes fabricantes.
- Al crear en XHTML se acostumbrará a probar sus trabajos mediante servicios de validación de marcado, que le ahorrarán horas de pruebas y depuración, y le ayudarán a evitar los princiaples errores de accesibilidad, como la no inclusión de un atributo alt en todas las etiquetas IMG.
Comparador de archivos de texto
Tuesday, January 27th, 2009Enlace que muchas veces puede resultar útil. Se trata de una herramienta online para comparar diferencias entre archivos de texto (por ejemplo para comparar CSS de distintas versiones)