var today = new Date();

// Sumar 7 días.
new Date(today.getTime() + (7 * 24 * 3600 * 1000)),

// Restar 5 días
new Date(today.getTime() - (5 * 24 * 3600 * 1000)),

Tenga en cuenta que esta solución ignora los segundos intercalares. En mi caso no son necesarios pero puede que en el suyo si.

Para un proyecto que estoy realizando, agregar filas al DataGrid es una funcionalidad básica así que me puse a buscar la solución a este problema. La respuesta que dan por todos lados es agregar un elemento adicional a la colección y eliminarlo si el usuario lo dejó en blanco (Y prepararse para distinguir entre un objeto nuevo y uno modificado).

En mi caso, era una molestia agregar ese elemento en blanco ya que esta funcionalidad se necesitaba en muchos lugares. Así que, en vez de repetir esa lógica por cada DataGrid, decidí buscar la forma de obtener el mismo resultado sin tener que modificar la colección original. La solución a la que llegué me gustó tanto que decidí compartirla en este blog.

Este es el resultado:

Primero un micro-repaso del uso del DataGrid.

Vamos a crear un nuevo proyecto Silverlight con el nombre DataGridAddRow y le decimos que no cree un proyecto Web ya que no lo necesitamos para probar. Abrimos MainPage.xaml y agregamos un DataGrid:

<Grid x:Name="LayoutRoot" Margin="20">
    <data:DataGrid x:Name="m_dgMovies">
    </data:DataGrid>
</Grid>

En MainPage.xaml.cs está el código de la página. En el constructor le pasamos los datos al DataGrid. En este caso es una lista que estoy creando en el método ListOfPixarMovies() pero bien pueden ser datos que salen de un servicio web o algo así.

public partial class MainPage : UserControl
{
	public MainPage()
	{
		InitializeComponent();

		m_dgMovies.ItemsSource = ListOfPixarMovies();
	}

	private List<Movie> ListOfPixarMovies()
	{
		return new List<Movie>
		{
			new Movie { Name = "The Incredibles", Year = 2004 },
			new Movie { Name = "Chicken Little", Year = 2005 },
			new Movie { Name = "Ratatouille", Year = 2007 },
			new Movie { Name = "WALL·E", Year = 2008 },
			new Movie { Name = "Up", Year = 2009 },
		};
	}
}

Y, por supuesto, tenemos que crear la clase Movie. El único requerimiento de esta solución es que la clase debe implementar INotifyPropertyChanged pero si uno está utilizando data binding para editar un objeto normalmente termina implementando INotifyPropertyChanged también. Esta es la clase que utilicé en el ejemplo:

public class Movie
		: System.ComponentModel.INotifyPropertyChanged
{
	string m_name;

	public string Name
	{
		get { return m_name; }
		set
		{
			m_name = value;
			OnPropertyChanged(new PropertyChangedEventArgs("Name"));
		}
	}

	int m_year;

	public int Year
	{
		get { return m_year; }
		set
		{
			m_year = value;
			OnPropertyChanged(new PropertyChangedEventArgs("Year"));
		}
	}

	public event PropertyChangedEventHandler PropertyChanged;

	protected virtual void OnPropertyChanged(PropertyChangedEventArgs e)
	{
		if (PropertyChanged != null)
			PropertyChanged(this, e);
	}
}

Nada del otro mundo: Una clase con dos propiedades y cada vez que se modifican esas propiedades ejecutamos el evento PropertyChanged que requiere la interfaz INotifyPropertyChanged.

En este punto podemos ejecutar el proyecto y nos encontramos con un DataGrid con varias filas y podemos editar los datos pero no podemos agregar nuevas filas, como este:

La solución: AppendableCollection

Para permitirle al usuario agregar nuevas filas todo lo que tenemos que hacer es agregar la clase AppendableCollection y en el constructor de la página modificamos la línea en la que pasábamos la lista de películas para envolverla con una instancia de AppendableCollection<Movie>:

public MainPage()
{
	InitializeComponent();

	//m_dgMovies.ItemsSource = ListOfPixarMovies();
	m_dgMovies.ItemsSource = new AppendableCollection<Movie>(ListOfPixarMovies());
}

El resultado es una fila vacía al final de los datos y el usuario ahora puede agregar nuevas filas editando esa fila vacía. Por lo menos hasta que salga una nueva versión del DataGrid con soporte para agregar nuevas filas, esta es probablemente la solución más sencillas para simular esta funcionalidad.

Realmente eso es todo lo que que hay que hacer: Agregar la clase, implementar INotifyPropertyChanged y envolver la colección en AppendableCollection. Ahora puede saltar hasta el final del artículo y descargar el código. Para los tres que se quedaron, así es como funciona:

El DataGrid solo requiere que le pasemos un IEnumerable entonces AppendableCollection necesita implementar esa interfaz. En el método GetEnumerator() lo que hacemos es devolver el Enumerator de la colección original pero al final le agregamos la nueva instancia:

public class AppendableCollection<T>
	: System.Collections.Generic.IEnumerable<T>
	where T : System.ComponentModel.INotifyPropertyChanged, new()
{
	public IEnumerator<T> GetEnumerator()
	{
		return m_collection.Union(m_newItem).GetEnumerator();
	}

	readonly T[] m_newItem;
...
}

Solo nos falta detectar cuando el usuario ha modificado el objeto. Por eso la clase de la colección debe implementar INotifyPropertyChanged. Cuando recibimos el evento de que una propiedad ha sido modificada agregamos la instancia actual a la colección original y creamos una nueva:

void newItem_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
	m_newItem[0].PropertyChanged -= newItem_PropertyChanged;
	m_collection.Add(m_newItem[0]);
	m_newItem[0] = new T();
	m_newItem[0].PropertyChanged += newItem_PropertyChanged;
}

Solo nos falta avisarle al DataGrid que agregamos un nuevo elemento. Para eso implementamos la interfaz INotifyCollectionChanged y ejecutamos el evento CollectionChanged:

public class AppendableCollection<T>
	: System.Collections.Generic.IEnumerable<T>
	, System.Collections.Specialized.INotifyCollectionChanged
	where T : System.ComponentModel.INotifyPropertyChanged, new()
{
	public event NotifyCollectionChangedEventHandler CollectionChanged;

	protected virtual void OnCollectionChanged(NotifyCollectionChangedEventArgs e)
	{
		if (CollectionChanged != null)
			CollectionChanged(this, e);
	}

	void newItem_PropertyChanged(object sender, PropertyChangedEventArgs e)
	{
		m_newItem[0].PropertyChanged -= newItem_PropertyChanged;
		m_collection.Add(m_newItem[0]);
		m_newItem[0] = new T();
		m_newItem[0].PropertyChanged += newItem_PropertyChanged;
		OnCollectionChanged(new NotifyCollectionChangedEventArgs(
			NotifyCollectionChangedAction.Add, m_newItem[0],
			m_collection.Count));
	}
...
}

Descargar la clase y el ejemplo

El código de la clase está bajo licencia MIT y puede descargarse desde aquí: DataGridAddRow.zip – Agregar nuevas filas a un DataGrid de Silverlight 3.

El Android SDK 1.5 incluye unos ejemplos de OpenGL, pero todos me parecieron innecesariamente complicados y es difícil comenzar un proyecto sencillo a partir de allí. Así que uní dos de ellos (SpriteText y Triangle) y los simplifiqué de forma que fuera más sencillo ver todo el proceso.

NOTA: Esto no es un tutorial de OpenGL. Voy a asumir que usted ya tiene algo de experiencia en OpenGL para así solo tener que explicar qué hace cada bloque de código y no función por función.

Al final de este ejemplo podremos mostrar una imagen centrada en la pantalla y girando como la del siguiente screenshot:

Lo primero que vamos a hacer es crear un nuevo Activity y en el evento onCreate agregarle una vista GLSurfaceView:

public class MainActivity extends Activity implements GLSurfaceView.Renderer {
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		mGLSurfaceView = new GLSurfaceView(this);
		mGLSurfaceView.setRenderer(this);
		setContentView(mGLSurfaceView);
	}

La llamada a setRenderer es porque en Android, todo el renderizado debe realizarlo una clase que implemente la interfaz GLSurfaceView.Renderer. Normalmente esto sería una clase separada pero para simplificar las cosas el mismo Activity implementa la interfaz y así le podemos pasar this.

Esta interfaz define tres métodos que implementaremos a continuación: onSurfaceCreated(), onSurfaceChanged() y onDrawFrame().

El primero, onSurfaceCreated(), se llama en cuanto la superficie esté lista para ser utilizada. Aquí incluiremos toda la inicialización que vayamos a hacer. Este método es un poco largo así que vamos por partes:

public void onSurfaceCreated(GL10 gl, EGLConfig config) {
	gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_FASTEST);
	gl.glDisable(GL10.GL_DEPTH_TEST);
	gl.glDisable(GL10.GL_DITHER);
	gl.glDisable(GL10.GL_LIGHTING);

	gl.glEnable(GL10.GL_TEXTURE_2D);
	gl.glClearColor(0, 0, 0, 1);
	gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);

Primero deshabilitamos algunas características de OpenGL ES que no necesitamos en 2D y luego habilitamos las texturas y limpiamos la pantalla.

Antes de continuar con el método vamos a ver las coordenadas que se utilizarán para dibujar la imagen.

En OpenGL ES no disponemos de las funciones glVertex3f() que se acostumbra utilizar en el OpenGL completo. En vez de eso se pasan todos las coordenadas de cada punto (vertex) en arreglos de floats y un arreglo de ushorts especifica el orden en que se dibujarán.

Esta técnica se conoce como VBO y en vez de explicar en detalle como funciona pueden leer el tutorial OpenGL Vertex Buffer Object de Song Ho Ahn que es excelente.

Estas son las coordenadas que utilicé:

private static final int TEXTURE_WIDTH = 128;
private static final int TEXTURE_HEIGHT = 128;
private static final float[] sVertexValues = new float[] {
	-TEXTURE_WIDTH/2, -TEXTURE_HEIGHT/2, 0,
	 TEXTURE_WIDTH/2, -TEXTURE_HEIGHT/2, 0,
	-TEXTURE_WIDTH/2,  TEXTURE_HEIGHT/2, 0,
	 TEXTURE_WIDTH/2,  TEXTURE_HEIGHT/2, 0,
};
private static final float[] sTexCoordValues = new float[] {
	0, 1,
	1, 1,
	0, 0,
	1, 0,
};
private static final char[] sIndexValues = new char[] {
	0, 1, 2,
	1, 2, 3,
};

Como ven, sVertexValues es un cuadrado de 128 pixels centrado en (0,0). El cuadrado lo dibujamos utilizando dos triángulos que definimos en sIndexValues. Algo como esto.

Es decir, sVertexValues son las coordenadas para A, B, C y D. De forma similar, sTexCoordValues es la posición de la textura y sIndexValues es el orden en que se deben utilizar los vertex para dibujar los dos triángulos: A, B y C para el primero y B, C y D para el segundo.

En cualquier lenguaje racional simplemente podríamos simplemente pasar esos arreglos a la función OpenGL y listo, pero en Java tenemos que evitar que garbage collector mueva los arreglos mientras estamos usándolos así que lo que hace el siguiente bloque de código es copiar las coordenadas a objetos Buffer:

final int FLOAT_SIZE = 4;
final int CHAR_SIZE = 2;
mVertexBuffer = ByteBuffer.allocateDirect(FLOAT_SIZE * sVertexValues.length)
	.order(ByteOrder.nativeOrder()).asFloatBuffer();
mTexCoordBuffer = ByteBuffer.allocateDirect(FLOAT_SIZE * sTexCoordValues.length)
	.order(ByteOrder.nativeOrder()).asFloatBuffer();
mIndexBuffer = ByteBuffer.allocateDirect(CHAR_SIZE * sIndexValues.length)
	.order(ByteOrder.nativeOrder()).asCharBuffer();

for (int i = 0; i < sVertexValues.length; ++i)
	mVertexBuffer.put(i, sVertexValues[i]);
for (int i = 0; i < sTexCoordValues.length; ++i)
	mTexCoordBuffer.put(i, sTexCoordValues[i]);
for (int i = 0; i < sIndexValues.length; ++i)
	mIndexBuffer.put(i, sIndexValues[i]);

Yep. Es un bloque código bastante estúpido (e innecesario en cualquier otro lenguaje) pero lo necesitamos porque estamos programando en Java. Pero continuemos: Ahora vamos a cargar la textura (la imagen que vamos a mostrar):

gl.glGenTextures(1, sTextureIDWorkspace, 0);
int textureID = sTextureIDWorkspace[0];

gl.glBindTexture(GL10.GL_TEXTURE_2D, textureID);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_NEAREST);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S, GL10.GL_CLAMP_TO_EDGE);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T, GL10.GL_CLAMP_TO_EDGE);
gl.glTexEnvf(GL10.GL_TEXTURE_ENV, GL10.GL_TEXTURE_ENV_MODE, GL10.GL_REPLACE);

Acabamos de crear una textura en memoria de video y le cambiamos algunas opciones de configuración.

	Bitmap bitmap;
	InputStream is = getResources().openRawResource(R.drawable.robot);
	try {
		bitmap = BitmapFactory.decodeStream(is, null, sBitmapOptions);
	} finally {
		try {
			is.close();
		} catch (IOException e) {
			// Ignore
		}
	}

	GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);
	bitmap.recycle();

	Runtime r = Runtime.getRuntime();
	r.gc();
}

Y en este bloque cargamos el bitmap desde un archivo de recursos (R.drawable.robot), lo convertimos al formato correcto y lo asignamos a la textura que habíamos creado. Finalmente es un buen momento para llamar al garbage collector.

Fiuuu. Por fin terminamos onSurfaceCreated(). Ese era el método más complicado. Ahora vamos a ver onSurfaceChanged(). Este método es llamado después de onSurfaceCreated() y cuando el usuario gira el teléfono así que es el lugar perfecto para configurar la proyección:

public void onSurfaceChanged(GL10 gl, int width, int height) {
	gl.glViewport(0, 0, width, height);
	gl.glMatrixMode(GL10.GL_PROJECTION);
	gl.glLoadIdentity();
	gl.glOrthof(0, width, 0, height, 0, 1);
	gl.glShadeModel(GL10.GL_FLAT);
	gl.glEnable(GL10.GL_BLEND);
	gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);
	gl.glColor4x(0x10000, 0x10000, 0x10000, 0x10000);
	gl.glEnable(GL10.GL_TEXTURE_2D);
}

Aquí cambiamos la proyección a ortográfica que es la que se utiliza para dibujar en 2D y configuramos algunas cosas adicionales para las texturas.

En onDrawFrame() por fin vamos a dibujar algo.

public void onDrawFrame(GL10 gl) {
	gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
	gl.glMatrixMode(GL10.GL_MODELVIEW);
	gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
	gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
	gl.glBindTexture(GL10.GL_TEXTURE_2D, mTextureID);
	gl.glPushMatrix();
	gl.glLoadIdentity();

Este bloque es sencillo: Limpiamos la pantalla y le decimos a OpenGL ES que vamos a pasarle las coordenadas en arreglos (glEnableClientState() con GL_VERTEX_ARRAY y GL_TEXTURE_COORD_ARRAY). Le decimos también cual textura vamos a utilizar y finalmente nos aseguramos que estemos en (0,0).

gl.glTranslatef(160, 240, 0);
long time = SystemClock.uptimeMillis() % 4000L;
float angle = 0.090f * ((int) time);
gl.glRotatef(angle, 0, 0, 1.0f);
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, mVertexBuffer);
gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, mTexCoordBuffer);
gl.glDrawElements(GL10.GL_TRIANGLES, sIndexValues.length, GL10.GL_UNSIGNED_SHORT,
	mIndexBuffer);

Con eso nos movemos al centro de la pantalla y giramos la imagen según el milisegundo en el que nos encontremos. Enviamos las coordenadas a OpenGL y el se encarga de dibujar los dos triángulos.

	gl.glPopMatrix();
	gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
	gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
}

Devolvemos todo a como lo encontramos y terminamos de pintar el frame.

Pueden descargar el código de ejemplo de OpenGL ES 2D para Android SDK 1.5. Está bajo la misma licencia del SDK ya que está basado en los ejemplos que se incluyen allí.

El proyecto está para NetBeans (Lo siento pero Eclipse me da muchos problemas) así que tendrán que instalar NBAndroid o importarlo manualmente en un proyecto nuevo de Eclipse.

Para evitarles los mismos problemas (y sin recompilar nada) esto es lo que deben hacer:

Bajar la versión oficial de Apache que en este momento es la versión 2.2.11. Puede ser con o sin SSL aunque yo escogí sin SSL porque es más pequeña.

Ahora a descargar PHP. No descarguen PHP desde php.net/downloads.php si no desde windows.php.net/downloads. Allí dan muchas versiones pero la que nos interesa es VC6 x86 Thread Safe (El .ZIP).

Y finalmente XDebug. De nuevo hay que escoger la versión 5.3 VC6 (32 bit).

Instalación de PHP en 1 minuto.

Instale Apache (Next, Next, Next). Descomprima el .ZIP de PHP en C:\Program Files\php-5.3.0-Win32-VC6-x86 y copie XDebug a la misma carpeta.

Al final de C:\Program Files\Apache Software Foundation\Apache2.2\conf\httpd.conf pegue las siguientes líneas:

LoadModule php5_module "C:/Program Files/php-5.3.0-Win32-VC6-x86/php5apache2_2.dll"
AddType application/x-httpd-php .php
PHPIniDir "C:/Program Files/php-5.3.0-Win32-VC6-x86"

Ahora en la carpeta de PHP renombre php.ini-development a solamente php.ini y al comienzo del archivo pegue las siguientes líneas:

zend_extension="C:\Program Files\php-5.3.0-Win32-VC6-x86\php_xdebug-2.0.5-5.3-vc6.dll"
xdebug.remote_enable=1
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_port=9000
cgi.force_redirect = 0

Ahora podemos probar ejecutando phpinfo():

<?php phpinfo() ?>

En esa página debería salir el logo de XDebug junto al de PHP.

Estaba sospechando de una petición que se veía muy mal escrita. Era similar a esta:

select *
	from film a
	where a.description in
		(select description
			from film b
			where b.description >= a.description)
	order by extract(year from a.last_update),
	extract(month from a.last_update)

Sin embargo, al ejecutarla en el MySQL Query Browser la petición se ejecutaba en 0.06 segundos aproximadamente. ¡Seis centésimas de segundo! WTF?!

Resulta que luego de la primera ejecución MySQL almacena tanto la petición como los resultados en un cache y la próxima vez que alguien ejecuta la misma petición simplemente trae los mismos resultados.

Para deshabilitar el cache para una sola petición y así poder ver cuánto tiempo se está demorando en realidad hay que agregar la opción SQL_NO_CACHE al comienzo del select:

select SQL_NO_CACHE *
	from film a
	where a.description in
		(select description
			from film b
			where b.description >= a.description)
	order by extract(year from a.last_update),
	extract(month from a.last_update)

Después de agregar la opción SQL_NO_CACHE la petición se demoraba siempre los mismos 82 segundos (con razón superaba el límite de 30 segundos de PHP). Así pudimos observar cuál era el problema y solucionarlo rápidamente.

Claro, esto solo funciona si la aplicación fue desarrollada teniendo en cuenta que puede quedar instalada en diferentes carpetas, porque si el desarrollador dejó URLs fijos en algún lado esa parte de la aplicación se va a dañar si no se instala en la misma carpeta.

Por ejemplo, si el logo de la aplicación está en "/Images/logo.png" y el desarrollador puso el URL fijo desde la raíz, cuando la aplicación se instale en otra carpeta el logo no va a aparecer.

¿Cómo evitamos este problema? Fácil: utilizando URLs virtuales que ASP.NET luego transforma en absolutos dependiendo de la carpeta donde se haya instalado la aplicación. Por ejemplo, si especificamos el logo de esta forma:

<asp:Image ID="iLogo" runat="server" ImageUrl="~/Images/Logo.png" />

ASP.NET lo convertirá automáticamente en una etiqueta <IMG> con el URL apropiado dependiendo de la carpeta donde se haya instalado la aplicación.

Los controles que necesitan URLs hacen esta conversión por nosotros cuando es apropiado. Pero ¿Cómo utilizar URLs virtuales cuando no estamos usando controles? Por ejemplo, en una etiqueta <LINK> o <SCRIPT>.

En el fichero .ASPX o en el code-behind podemos usar el método ResolveClientUrl() que realiza la misma función. Por ejemplo, en una etiqueta <SCRIPT> podemos hacer esto:

<script src="<%= ResolveClientUrl("~/Scripts/effects.js") %>" type="text/javascript">
</script>

Este método está definido en la clase Control y tanto Page como UserControl hereda en algún punto de Control.

Ahora, ¿Como transformar un URL virtual en una clase que no hereda de Control? Por ejemplo en una clase Presenter que debe transformar URLs virtuales almacenados en la base de datos.

En estos casos podemos utilizar los métodos estáticos de la clase VirtualPathUtility. Por ejemplo, suponga que tengo una lista con los URLs de documentos adjuntos que quiero pasar a la vista transformados en URLs absolutos. Lo puedo hacer de esta forma:

// En el Presenter
public string Attachments
{
    get
    {
        foreach (var url in m_attachments)
            yield return VirtualPathUtility.ToAbsolute(url);
    }
}

Utilizando URLs virtuales podemos asegurarnos que nuestra aplicación va a funcionar de la misma forma ya sea que la instalen en la raíz del sitio web como si la instalan en otra carpeta y como vieron ASP.NET nos facilita bastante el trabajo con los diferentes métodos para transformarlos.

Crear un sitio web que se vea igual en diferentes browsers puede hacer que un desarrollador web pierda la razón cuando llegue el momento de corregir los problemas que se presentan en Internet Explorer.

Mi método para crear un sitio web es armar el diseño en Firefox (porque con Firebug y Developer Toolbar tiene el mejor ambiente de desarrollo) hasta que se ve igual a la imagen que me entrega el diseñador. A continuación pruebo en Safari y Chrome con los cuales casi nunca tengo que cambiar nada.

Pero luego llega la hora de probar con Internet Explorer 6 y 7 y lo más probable es que el diseño esté completamente destrozado. Una columna debajo de la otra y con diferentes anchos, fondos y fuentes que no son los correctas, PNGs sin transparencia. Todo esto muy común en versiones anteriores de Internet Explorer.

Se puede probar agregando hacks al CSS (secuencias de caracteres que debido a bugs en los mismos browsers permiten entregar código diferente a algunos browsers) pero siempre me ha quedado un mal sabor de boca al usar estos hacks ya que el código CSS se convierte en un desorden y, claro, ya no valida.

La forma más sencilla que he encontrado es colocar comentarios condicionales al HTML para que diferentes versiones de Internet Explorer carguen hojas de estilo adicionales. Por ejemplo, en la cabecera de la página uno puede colocar:

<link href="general.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]><link href="ie7below.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if lte IE 6]><link href="ie6below.css" rel="stylesheet" type="text/css" /><![endif]-->

En este caso, Firefox, Safari, Chrome e Internet Explorer 8 verán solo la primera hoja de estilos (general.css). Internet Explorer 7 verá general.css e ie7below.css y en esta última agregaremos lo que necesitemos para arreglar la página. Finalmente Internet Explorer 6 verá las tres hojas de estilo y en ie6below.css agregaremos las reglas específicas para IE6.

Veamos cómo funciona: Suponiendo que tenemos el siguiente código HTML:

<div id="wrapper">
	<div id="sidebar">
		<ul>
			<li><a href="/">Inicio</a></li>
		</ul>
	</div>

	<div id="content">
		<p>Bienvenido a mi sitio web.</p>
	</div>
</div>

… y queremos que se vea como dos columnas de contenido, podemos hacer algo como esto para los browsers modernos (Firefox, Safari, IE8):

/* general.css */
#wrapper {
	margin: 0 auto;
	overflow: hidden;
	width: 970px;
        margin
}
#sidebar {
	background-color: #CCC;
	float: left;
	padding: 10px 15px;
	width: 150px;
}
#content {
	background-color: #EFEFEF;
	margin-left: 180px;
	padding: 10px 15px;
}

En Internet Explorer 8 el diseño ya se ve como en esta imagen:

Ahora probemos en Internet Explorer 7 y por supuesto, el “margin: 0 auto” que utilizo para centrar las columnas en la página no funciona y los espacios en el sidebar están diferentes:

Para arreglarlo abrimos ie7below.css y agregamos el siguiente código:

body { text-align: center }
#wrapper { text-align: left }
#sidebar { zoom: 1 }

Ahora probamos en Internet Explorer 6 y vemos que las columnas tienen diferentes anchos:

Esto es porque en IE6 hay que incluir el padding en el ancho de la columna. Entonces cambiamos los anchos en el archivo ie6below.css:

#wrapper { width: 590px }
#sidebar { width: 130px }

Perfecto, ya se ve igual en estas tres versiones de Internet Explorer.

Utilizando comentarios condicionales mantenemos nuestra hoja de estilo general mucho más sencilla (la que funciona en browsers modernos) y aun así nos aseguramos que versiones anteriores de Internet Explorer funcionen correctamente.

Para mayor información sobre los comentarios condicionales les recomiendo visitar Quirks Mode – Conditional Comments

En este tutorial voy a mostrar un método para dividir los resultados en varias páginas y al final le daremos un estilo similar a Digg. Lo que queremos obtener es un listado de 12 películas por página y en la parte inferior enlaces a páginas similar al que usa Digg, que se ven así:

Para efectos de demostración voy a utilizar la base de datos Sakila que es una base de datos de ejemplo desarrollada para MySQL. Específicamente queremos mostrar la información de las películas almacenadas en la tabla film.

A continuación voy a discutir este script de ejemplo de paginación estilo Digg con MySQL y PHP. Para probarlo en su equipo deberá tener instalado Sakila. Guárdelo en una carpeta de su servidor web y cambie los datos de la conexión a la base de datos que se encuentran al comienzo:

$hostname    = 'localhost';
$username    = 'root';
$password    = '123456';
$database    = 'sakila';

Las consultas

Primero necesitamos hacer una consulta para obtener el número de registros en la tabla y lo almacenamos en una variable $filmsCount:

select count(*) filmsCount
	from film

Ahora calculamos el número máximo de páginas que podemos mostrar. Para esto utilizamos el número de registros que acabamos de obtener y lo dividimos entre el número de registros por página. Aquí estoy usando la función ceil(), que redondea el numero hacia arriba, porque también tenemos que contar la última página que puede quedar con menos registros que las demás.

$pagesCount = (int)ceil($filmsCount / $rowCount);

Ahora averiguamos en qué página estamos. En el URL va a venir un parámetro pageIndex con el índice de la página. Si no está presente suponemos que estamos en la primer página y si sobrepasa la última página suponemos que estamos en la página actual.

$pageIndex = isset($_REQUEST['pageIndex']) ? (int)$_REQUEST['pageIndex'] : 0;
if ($pageIndex >= $pagesCount)
	$pageIndex = $pagesCount - 1;

Estamos listos para obtener los registros de la página. El SELECT de MySQL tiene unos parámetros justo para esto. Se pasan con la cláusula LIMIT de esta forma

$offset = $pageIndex * $rowCount;
$sql = "
select *
	from film
	order by title
	limit $offset, $rowCount
";

$rowCount es el número de registros por página y puede ser el número que usted quiera. En el ejemplo estoy usando 12. Los registros los almaceno como objetos en un arreglo $films y luego recorro el arreglo para mostrar cada registro.

Los enlaces de las páginas

Ahora la parte más delicada: Mostrar el listado de páginas con el estilo de Digg. Vamos a crear una lista <UL> donde cada elemento va a ser un enlace a la página correspondiente.

El enlace a la página anterior es el más sencillo. Simplemente, si estamos en una página mayor a la primera mostramos el enlace:

<ul id="pages">
<?php
// Página anterior.
if ($pageIndex > 0) {
?>
	<li class="page"><a href="?pageIndex=<?php echo $pageIndex - 1 ?>">&lquo;</a></li>
<?php } ?>

Ahora mostraríamos la página actual rodeada de N páginas adelante y atrás. El número de páginas a mostrar lo guardo en la variable $pagesToShow. Entonces calculamos las páginas que se van a mostrar así:

$start = $pageIndex - $pagesToShow;
if ($start < 0)
	$start = 0;

$end = $pageIndex + $pagesToShow;
if ($end >= $pagesCount)
	$end = $pagesCount - 1;

$start y $end los usaremos luego en un ciclo; sin embargo, hay que tener en cuenta la primera y segunda página. En Digg siempre se muestran los enlaces de la primera y segunda página. No importa si uno está en la página 500, siempre se muestran. Entonces los mostramos teniendo en cuenta que no se pueden repetir después:

if ($start > 0) {
	for ($i = 0; $i < 2 && $i < $start; ++$i) {
?>
	<li class="page"><a href="?pageIndex=<?php echo $i ?>"><?php echo $i + 1 ?></a></li>
<?php
	}
}

Ahora si podemos mostrar las páginas con toda tranquilidad. Lo único que tenemos que tener en cuenta es que a la página actual no le ponemos enlace:

for ($i = $start; $i <= $end; ++$i) {
	if ($pageIndex == $i) {
?>
	<li class="page current"><?php echo $i + 1 ?></li>
<?php
	} else {
?>
	<li class="page"><a href="?pageIndex=<?php echo $i ?>"><?php echo $i + 1 ?></a></li>
<?php
	}
}

Ya vamos terminando… De forma similar a la primera y segunda página, la penúltima y última siempre se muestran. Pero tenemos que evitar repetirlas así que usamos la función max() para evitarlo:

if ($end < $pagesCount - 1) {
	for ($i = max($pagesCount - 2, $end + 1); $i < $pagesCount; ++$i) {
?>
	<li class="page"><a href="?pageIndex=<?php echo $i ?>"><?php echo $i + 1 ?></a></li>
<?php
	}
}

Y para finalizar mostramos el enlace a la página siguiente que es bastante sencillo y cerramos el <UL>:

<?php
// Siguiente página
if ($pageIndex < $pagesCount) {
?>
	<li class="page"><a href="?pageIndex=<?php echo $pageIndex + 1 ?>">&gt;</a></li>
<?php } ?>
</ul>

Ahora necesitamos algo de CSS para que se parezca al de Digg. Lo que tenemos que hacer cambiar la lista de dirección vertical a horizontal con un display: inline; para los elementos, agregar los bordes, unos paddings y estamos listos. Este es el código CSS que yo utilicé en el ejemplo:

#pages {
	clear: both;
	text-align: center;
}
#pages li {
	display: inline;
	padding: 3px 6px 4px;
}
#pages li.page {
	border: 1px solid #CCC;
}
#pages li.current {
	background-color: #CCC;
}

El resultado final es una página como la de la captura de pantalla en la que podemos ver 12 películas por páginas y usar los enlaces de la parte inferior para navegar por las páginas.

En una aplicación más grande, la lógica necesaria para mostrar los enlaces de las páginas debería encapsularse en una clase para evitar errores cuando se desee reutilizar en otro listado y el HTML podría guardarse en una plantilla separada. Este ejercicio se lo dejo quienes lean este blog… si, cualquiera de ustedes tres.

ACTUALIZACIÓN 2009/05/29: Como correctamente apunta Jairo, a los enlaces de la paginación hay que agregarle cualquier parámetro que modifique los resultados del SELECT. Por ejemplo, si hay que filtrar los films por el precio deberíamos pasarlo al final del URL así:

<?php
// Siguiente página
if ($pageIndex < $pagesCount) {
?>
	<li class="page"><a href="?pageIndex=<?php echo $pageIndex + 1,
		'&price=', $price ?>">&gt;</a></li>
<?php } ?>
</ul>

Este es el método más sencillo para eliminar ese molesto borde gris en las animaciones flash. Fué inventado por Tohle Býval y no podría ser más sencillo: Solo hay que incluir un script en la cabecera de la página.

IMPORTANTE: Antes de continuar, debo aclarar que este método solo funciona si se está abriendo la página desde un servidor web. Puede ser Apache o IIS montado en el mismo equipo o también el servidor de hosting que usted tenga. Pero si prueban a abrir el HTML diréctamente desde el disco no va a funcionar.

Bueno, no más preámbulos. Justo antes de cerrar la etiqueta <head> hay que agregar el siguiente código:

<!--[if IE]>
<script type="text/javascript" src="fix_eolas.js"
	defer="defer"></script>
<![endif]-->
</head>

Es de vital importancia que mantengan el defer=”defer” para que el script se ejecute cuando todas las películas ya hayan cargado. Además usamos comentarios condicionales para que solo Internet Explorer vea el script.

En esa etiqueta nos referimos a este archivo fix_eolas. El código es muy sencillo:

var objects = document.getElementsByTagName("object");

for (var i=0; i<objects.length; i++)
	objects[i].outerHTML = objects[i].outerHTML;

Lo que ese código hace es re-insertar todas las etiquetas <object>. Con eso es suficiente para eliminar el borde gris de activación.

Para recapitular, si ud. desea eliminar el borde gris solo tiene que hacer lo siguiente:

1. Agregar la etiqueta a la cabecera.
2. Guardar el archivo fix_eolas junto con el HTML.
3. Asegurarse de que está probando desde un servidor web y no desde el disco duro.
4. ???
5. ¡Hacerse rico!