06/05/09 (Hace 450 días)

0 Comentarios

Consejos para maquetar una newsletter

periódico

A la hora de maquetar una newsletter lo primero es hacerse con una buena chuleta sobre el soporte CSS de los clientes de correo. Una bastante buena y completa sería esta: Guide to CSS support in email clients (2008)

Si echáis un vistazo veréis que juntando todas las limitaciones CSS de cada cliente los recursos que nos quedan son bastante escasos. Debido a esto al maquetar tendremos que dejar a un lado la accesibilidad si queremos que la newsletter se visualice correctamente en todos los clientes

Debido a lo comentado anteriormente podéis suponer lo coñazo que resulta maquetar una newsletter, así que os dejo a continuación un par de consejos para conseguir visulizarla correctamente a la primera sin tener que realizar infinidad de pruebas.

  • Maquetar la newsletter mediante tablas utilizando estas y sus celdas a modo de contenedores
  • Insertar todas las imágenes con URL absolutas (http://www.tuweb.com/im/tu-img.jpg)
  • Meter los estilos en línea ya que hotmail y GMAIL crean sus propios Ids
  • Insertar las imágenes como HTML y no como fondos por CSS ya que outlook 2007 no los reconoce
  • No insertar DTD ni SEO
  • No utilizar width ni height como propiedad css sino como HTML (Ej. <table width=”200″ height=300>)
  • Para alinear las tablas y sus celdas utilizar align y valign
  • No utilizar márgenes

22/03/09 (Hace 494 días)

1 comentario »

Errores CSS : wiki-css

¿Que es wiki-css?

wiki-css es un simple software diseñado para disponer de una rápida referencia acerca de cualquier problema relacionado con el maravilloso mundo de las css :d. Cada vez que tengamos un problemilla en cualquier navegador con alguno de nuestros estilos, en vez de darnos cabezazos contra la mesa solo habrá que abrir wiki-css y hacer una busqueda lo mas específica posible.

Espero que os sirva de gran ayuda y que participeis dejando vuestros problemas y soluciones. Os agradezco de antemano la participación y esperemos que IE6 y sus errores no peten la wiki :).

Podeis probar wiki-css y obtener mas información pinchando aqui

wiki-css

17/02/09 (Hace 527 días)

0 Comentarios

Movimiento Ondulatorio con JavaScript

Hace ya unas semanas mi compañero de fatigas y uno de mis grandes comentaristas del blog XD Alberto, me metió en la cabeza la fricada de representar el movimiento ondulatorio con JavaScript. En un principio pensé que estaría jodidillo el asunto pero como veréis a continuación es bastante sencillo.

Onda vaaaaaaaaaaaaaaaa!:

Lanzar la onda!

Para conseguir pintar nuestra onda simplemente nos servimos de la ecuación del movimiento ondulatorio:

y(x, t) = A * cos(wt - kx)

donde:

A =
Amplitud
w =
frecuencia angular
t =
tiempo
k =
Número de onda
x =
Posición sobre el eje x

A continuación os pongo el codiguillo JavaScript que utilizo para pintar la onda por si os sirve de ayuda

Código JS

var movimiento = "";
var n_posicion = 0;
var j = 0;
var longitud = 36;

/* CONFIGURACION DE LA ONDA */
var caracter = "*"; //caracter con el que se representa la onda
var xo = 0 // valor inicial de la posición de la onda sobre el eje x
var yo = 80; // valor inicial de la posición de la onda sobre el eje y
var v = 400; // velocidad de la onda
var A = 60; // Amplitud
var T = 18; // Periodo
var longitud_onda = 10; // Longitud de onda
/* FIN CONFIGURACION DE LA ONDA */


var w = ( 2 * 3.14 ) / T;
var k = ( 2 * 3.14 ) / longitud_onda;
$("li#pos0").css({ left: yo + "px" });

function movimiento_armonico(){
	$(document).ready(function(){
		movimiento = movimiento + "<li id='pos"+ n_posicion + "'>" + caracter + "</li>";
		$("#onda").html(movimiento);		
		
		for (i=0; i < n_posicion; i++)
		{
			x = xo + i
			t = i;
			y = yo + (A * Math.cos((k * x) - (w * t)))			
	
			$("li#pos" + i).css({ top: y + "px" });
			$("li#pos" + i).css({ left: x + "px" });
		}
		n_posicion++;
		j++;
		if(j == longitud + 1)
			clearInterval(onda);
		});
		$("#onda li:last").hide();	
}

onda = setInterval("movimiento_armonico()", v);

09/02/09 (Hace 535 días)

5 comentarios »

Validaciones con jQuery

Después de 120 días sin escribir :X, por fin me he dignado a escribir un post que espero que le pueda servir a alguien de ayuda, por lo menos a un eulalio que yo me se XD. Voy a escribir un post sobre como hacer validaciones en tiempo real, es decir, no esperaremos a que el usuario envíe el formulario sino que iremos validando cada uno de los campos según se vaya introduciendo la información. Para ver esto hare una demo apoyándome en la librería jQuery, que no solo nos da la posibilidad de realizar fáciles validaciones al momento sino que además nos permite jugar con una gran variedad de atractivos efectos.

Ejemplo de validaciones con jQuery

Como ya he dicho en la introducción queremos conseguir una validación de formulario en tiempo real, es decir cada vez que un campo del formulario pierda el foco, automáticamente comprobaremos que el campo modificado es correcto, además comprobaremos que todos los campos que preceden a este no se encuentran vacios y que la información es correcta. Con esto mejoraremos la experiencia de usuario ya que avisamos en el mismo momento de cada uno de los errores que está cometiendo al introducir los datos en los campos del formulario y estaremos evitando el tener que realizar varios envíos del form ya que se produjeron fallos en la validación de campos obligatorios.

Dentro de un formulario podemos fijar una serie de campos que sean de tipo obligatorio y sin los cuales el envío del formulario no es posible, pues bien en el ejemplo además de definir campos de tipo obligatorios y mostrar los errores producidos por los mismos, mantendremos informado al usuario con avisos de que la información introducida en un campo no obligatorio no es del todo correcta. En el ejemplo el usuario podrá enviar el formulario en caso de tener avisos pero no en el caso de que el formulario cuente con errores en campos de tipo obligatorio. En todo momento tendremos visible un listado de errores que mostrará al usuario el estado en el que se encuentra cada uno de los campos del formulario.

Este es un ejemplo de referencia y no aplicable a cualquier tipo de formulario ya que según vaya variando el código HTML del formulario habrá que realizar adaptaciones en el código JavaScript, de todas formas podréis ver que gracias a la sencillez de jQuery la adaptación de código según el formulario no es tan complicada. A continuación os muestro como quedaría el formulario con las validaciones:

Formulario de contacto

* Campos obligatorios

Datos personales

* Sexo

Otros datos

:: Listado de errores ::

  1.  
Descargar ejemplo: demo_validaciones.js (39,52kb) Leer el resto de esta entrada »

12/10/08 (Hace 656 días)

3 comentarios »

IE6 e IE7 juntos y fallo con PNG

¿Por qué IE6 e IE7 juntos?

En un principio puede parecer una tontería el querer instalar dos versiones de un mismo navegador a la vez y mas si estamos hablando del navegador de Microsoft: Internet Explorer, pero claro si tu profesión es la de Desarrollador Web y aproximadamente un 50% de los usuarios de Internet utilizan IE6 o IE7 no te queda otra que instalártelos y comprobar que tus páginas se ven correctamente en los mismos, eso o buscarte otra profesión.

Para todos aquellos que no seáis Desarrolladores Web, un consejo, pasar de IE y bajaros cuanto antes la ultima versión de alguno de estos navegadores:

Multiple IE. Así no

Multiple IE es un simple software que nos permitirá instalar varias versiones de IE Standalone en nuestro ordenador. Podremos instalar las siguientes:

Dicho esto habría que preguntarse si es realmente útil este multiple IE. Teniendo en cuenta como he comentado en el apartado anterior que son IE6 e IE7 los que suman un 50% aproximadamente del uso de navegadores, que las demás versiones están prácticamente obsoletas (“Alabado sea el señor”) y que no nos da la posibilidad de instalar IE7 en nuestro ordenador… no tiene mucho sentido instalar todos esos IE cuando realmente solo uno nos sirve. Además de todo esto nos topamos con que la Web Developer de IE no funcionará si instalamos nuestros IE con este software y no es que la Web Developer de IE sea una maravilla pero ayudará bastante si no queremos estar poniendo cada dos por tres un borde o un background en nuestro CSS para comprobar las dimensiones de los distintos elementos.

Web Developer IE

Descargando IE6 e IE7 Standalone. Así si

A la hora de instalar IE6 e IE7 conjuntamente lo mejor es optar por instalar cada una de las versiones Standalone por separado, para ello muy sencillo, respecto a IE6 simplemente nos tendremos que descargar un zip y descomprimirlo y con IE7 disponéis de un instalador en la página de Tredosoft.

Problemas con los PNG en IE6

Es bien sabido de las dificultades de IE6 para trabajar con imágenes png. Para poder ver un PNG transparente en IE6 necesitaremos apoyarnos en el filtro AlphaImageLoader. Por ejemplo, si queremos meter un fondo transparente a uno de nuestros contenedores insertaremos el siguiente código css:

Código CSS

.contenedor { background:url('../img/fndo_contenedor.png'); }
* html .contenedor { background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=' img/fndo_contenedor.png '); }
En la primera linea insertamos el fondo para los navegadores que hacen las cosas bien y a continuación insertamos la línea ñapa con el filtro AlphaImageLoader. Es importante meter en el filtro la ruta de la imagen con posicionamiento absoluto o relativo al archivo HTML para que podamos ver el PNG.

Problemas con los PNG en IE6 Standalone

Actualmente la versión descargable de IE6 Standalone viene dando problemas con los PNG transparentes. El problema consiste en que se han perdido archivos DLL por el camino, necesarios para el funcionamiento del filtro AlphaImageLoader que vimos anteriormente (infierno de las DLLs). Estos archivos son:

  • dxtmsft.dll
  • dxtrans.dll

Descargar DLLs

Para poder ver los PNG tendremos que descargarnos estos dos archivos y copiarlos en la carpeta raíz donde tenemos nuestro Internet Explorer 6 Stanalone.

Siguiendo todos estos pasos no deberíamos volver a tener problemas para ver los PNG en IE6.

Para más información visitar: http://tredosoft.com/Multiple_IE#comment-2318