1. Buscador de imágenes libres en Flickr
   Gracias a la generosidad de sus usuarios, Flickr representa para los diseñadores un excelente repositorio de imágenes libres de derechos. Sin embargo, encontrar una fotografía con licencia copyleft de un tema específico puede ser como buscar una aguja en un pajar. Este buscador permite, además de buscar términos clave a través de las etiquetas de Flickr, filtrar aquellas imágenes que tienen licencias copyleft.
2. Emulador de navegación en móviles
   Aunque lo ideal sería probar nuestros diseños en todas las plataformas y con todos los navegadores, en la práctica es casi imposible. Una de las reticencias en el caso de terminales móviles es el coste de la conexión. En esta página encontraréis un emulador gratuito de Nokia N70 y Sony K750 en el que basta introducir la URL para ver cómo se mostraría en estos móviles.
3. ¿Está caído o soy yo?
   Aunque preguntar al compañero del cubículo de al lado suele ser muy efectivo, a veces este método no basta para saber si un sitio está caído o es nuestra red la que experimenta problemas de conexión. Al igual que en su homólogo más conocido, downforeveryoneorjustme.com, introduce la URL en esta web y comprueba si está caído el site al que tratas de acceder.
4. CSS Optimizer: Aligera tu hoja de estilos
   Aunque parezca ridículo, los espacios y saltos de línea innecesarios incrementan el peso de las hojas de estilos. Cuanto más pese, más tardarán en cargarse los estilos en tu página. “Recortar” a mano es engorroso y poco apetecible, así que en CSS Optimizer te ofrecen la posibilidad de hacerlo automáticamente mediante la URL, cargando el archivo o copiándolo directamente en su editor.
5. ShrinkTheWeb
   Obtén rápidamente miniaturas de tu sitio web introduciendo la URL.

1. Websort. Atención a los profesionales de la usabilidad, porque encontrarán en esta web un poderoso aliado. Se trata de una potente aplicación online de Cardsorting, y que a diferencia de CardZort es completamente gratuita. Exporta los resultados de los estudios a Excel, EZ-Calc y también genera dendogramas.
2. vozMe. Genera archivos mp3 a partir de un texto plano, simplemente introduciéndolo en el recuadro y seleccionando voz masculina o femenina. Más allá de lo anecdótico, su utilidad radica en los plugins para wordpress y blogger que ofrece, con los que podrás incorporar automáticamente una versión en audio para todos tus posts. En castellano, inglés, catalán, italiano e hindi.
3. Conversor hexadecimal-RGB. Introduce el código hexadecimal de un color para convertirlo a su expresión en RGB y viceversa. Rápido y funcional.
4. IETester. Una sencilla aplicación para visualizar la misma página web de forma simultánea en diferentes versiones de Internet Explorer.
5. Spellify. Corrector ortográfico online para sacarnos del aprieto en caso de acuciante duda linguística. El texto puede teclearse o pegarse directamente, y la herramienta chequea una vez has terminado de introducirlo. En castellano, inglés y otros nueve idiomas más.

1. Super Screenshot
   ¿Alguna vez has tenido que hacer un tutorial de una web con un scroll vertical larguísimo? Si es así, sabes lo penoso que resulta tener que crear un screenshot a partir de varias impresiones de pantalla y agradecerás lo que ofrece esta web: tú pones la URL y ellos ponen la imagen en PNG o JPG.
2. What the Font?
   Trazar un logo siempre es engorroso, pero si además no consigues dar con la fuente exacta puede ser desesperante. En esta web puedes cargar un archivo de imagen y te dicen el tipo de fuente utilizado.
3. Morgue File
   Un repositorio de imágenes libres de derechos enviadas por los diseñadores cuando ya las han pagado e incorporado a sus proyectos. Entra y coge lo que quieras, ¡y no te olvides de enviar las tuyas!
4. Copyscape
   Saber si te están plagiando es ahora muy fácil gracias a esta aplicación web. El funcionamiento es el siguiente: introduciendo una URL, la página rastrea la web para localizar aquellas páginas en las que las coincidencias textuales sean… sospechosas. Nosotros nos hemos llevado una sorpresa.
5. Em Calculator?
   ¿A cuántos píxeles equivale 1em, si en el body el tipo de fuente está fijado en 75%? Aquí ofrecen una calculadora en la que hacer esa conversión.

Cualquier tipo de usuario,
en cualquier contexto de uso,
sirviéndose de cualquier plataforma,
cualquier resolución,
cualquier navegador,
cualquier dispositivo,
con cualquier velocidad de conexión.

Los colores de esta paleta consumen apenas 3 ó 4 vatios más que una pantalla completamente negra, y el blanco está incluido únicamente como color de contraste para las fuentes. Los códigos hexadecimales de esta paleta son:

La idea no es nueva. El incremento en el consumo de energía a raíz de la expansión de la informática ha motivado un auténtico debate sobre sus usos. Uno de los datos más impactantes es el cálculo que hizo Mark Ontkush a comienzos de este año en su blog, ecoIron: si Google tuviera fondo negro, se ahorrarían unos 750 megavatios/hora, algo más de la mitad del consumo de un hogar.

¿Quiere eso decir que además de usables y accesibles, ahora tendremos que preocuparnos de hacer páginas web sostenibles? Quizá sea una exageración regir nuestros diseños por el criterio ecológico, pero el día de mañana no podremos decir que no supimos cómo ayudar al planeta con nuestro trabajo.

Por si acaso, si les interesa el green computing pueden empezar por utilizar una versión “oscura” del famoso buscador en Blackle.com.

La Red es inmensa… Qué obviedad, ¿no?. Pues va a resultar que, al menos en español, no lo es tanto. ¿Por qué? Pues muy sencillo: por la copia.

Navegar mucho, visitar muchos sitios y dedicarse a este negocio al mismo tiempo exige una cierta disciplina, además de ética. Es muy común, ante un proyecto nuevo, ver algo de lo que ya está publicado con la intención de buscar inspiración, evitar reiteraciones, ordenar las ideas…

Sin embargo, es aconsejable seguir el camino inverso: primero pensar e incluso realizar unos primeros esbozos. Luego, si acaso, buscar y ver. Este método es algo más arriesgado pero tiene la ventaja de salvaguardar la ética profesional. Por otro lado, de este modo, uno tiene más posibilidades de encontrar algo original o nuevo… pero dentro de su propia cabeza. ¿Por qué confiamos tan poco en nuestra capacidad creativa?. ¿Es un signo de los tiempos?

Todo esto viene a colación de una prueba que hemos realizado recientemente. Es muy sencillo: copien unas pocas líneas de la página de inicio de su website y péguenlas en su buscador favorito. Alguno puede llevarse una sorpresa. Nosotros nos la hemos llevado, y mayúscula. Hay páginas, que no me molestaré en citar, de negocios como el nuestro, que nos han copiado desde la estructura del site hasta los iconos, pasando por los textos.¿Cómo alguien puede montar un negocio con ese bagaje? Es decepcionante, la verdad.

Sabíamos que una parte enorme de la información publicada en español (no sabemos si los que se expresan en otros idiomas tienen una moral algo más sólida) es una copia de una copia de una copia. De lo que no éramos conscientes es que, nosotros mismos, fuéramos objeto del copy-paste.

No sé si esto da para muchas más reflexiones pero lo que sí sé es que no nos beneficia, y me refiero a la comunidad profesional que publica en español, no al caso de 2mdc. Esta forma de proceder sólo contribuye a devaluar los contenidos publicados en Internet en nuestro idioma. Porque no se trata sólo, o no debería, de aumentar la presencia del español en la Red, que es la cuarta lengua más utilizada, sino de hacerlo de manera responsable y creativa, es decir, aumentando también la calidad media general. Replicarnos unos a otros sólo empequeñece la Red.

A continuación haremos un ejemplo sencillo que demuestra el potencial de este método de desarrollo. El objetivo es crear una página con dos enlaces que carguen contenido asíncrono.
Necesitamos un XHTML inicial y dos más que serán los que carguemos, una hoja de estilos y un archivo JS que será donde tengamos nuestro código.

Creamos los documentos XHTML

Nuestra página principal index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>As&iacute;ncrono Javascript y XML</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript" src="js/codigo.js"></script>
</head>
<body>


<div id="menu">
<a href="javascript:llamadasin(’ejemplos/ej1.html’, ‘contenido’);">Ejemplo 1</a>
<a href="javascript:llamadasin(’ejemplos/ej2.html’, ‘contenido’);">Ejemplo 2</a>
</div>

<div id="contenido">
<h3 class="titulo">En este div se cargar&aacute; as&iacute;ncronamente el contenido del ejemplo </h3>
<p>Escoge una opci&oacute;n del men&uacute;… </p>
</div>

</body>
</html>

Páginas que cargamos

La primera se llamará ej1.html:

<h3 class="titulos" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Ejemplo tutorial 1</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nisi. Nam nulla. Vestibulum mattis leo non pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum egestas. Pellentesque dictum pellentesque quam. Ut ultrices dolor. Pellentesque non odio non lectus mattis aliquam. Maecenas molestie. Phasellus vel augue eget magna adipiscing interdum. Pellentesque sit amet diam vel mi pharetra faucibus. Proin dolor risus, lobortis id, aliquet vitae, tincidunt sed, erat. Morbi tellus. Curabitur lobortis. Donec nunc pede, dapibus non, imperdiet eu, eleifend ut, lorem. Quisque venenatis tempus metus. Duis vitae tellus ac est dignissim nonummy. Nunc convallis, massa vitae laoreet nonummy, turpis leo venenatis purus, vel placerat ipsum massa non tortor.</p>


<img src="ejemplos/flor.jpg" alt="flor" width="300" height="200" />

Y ej2.html:

<img src="ejemplos/mar.jpg" alt="mar" width="300" height="201" />

<h3 class="titulos" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Ejemplo tutorial 2</h3>

<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>

* Importante: Aunque la imagen y los ejemplos están en un mismo directorio, al llamarlos desde la raíz (un nivel arriba) hay que indicar la ruta completa de la imagen en el source
Estos documentos no necesitan etiquetas <html></html>, ni <body></body>, ya que estarán contenidas dentro de otra página completa.

Hoja de estilos

La llamamos estilos.css:

body {
background-color: #666666;
font-family: Arial, Helvetica, sans-serif;}

/*Documento CSS*/
#menu{
float: left;
width: 150px;
height: 100px;
padding: 7px;
padding-left: 8px;
border-right-color: #ececf;
border-right-width: 1px;
border-right-style: dotted;}

#menu a{
padding: 3px 1px;
display: block;
width: 100%;
text-decoration: none;
font-weight: bold;
color: #CCCCCC;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: gray;}

#menu a:hover{
background-color: #CCCCCC;
color: #333333;}

#contenido{
float:left;
width:480px;
height: 600px;
margin-left: 10px;
padding: 5px;
padding-bottom: 8px;
background-color: #CCCCCC;}

.titulo {
color: #006699;
font-family: Verdana, Arial, Helvetica, sans-serif;}

.parrafos {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}


JavaScript y objeto XMLHttpRequest

En nuestro código lo primero que tenemos que hacer es comprobar el navegador.
En navegadores estándar tipo Mozilla, Safari, Opera, etc. la llamada a este objeto con JavaScript es window. XMLHttpRequest
En Internet Explorer tenemos que usar el ActiveXObject, del que existen varias versiones llamadas Microsoft.XMLHTTP y Msxml2.XMLHTTP.
Con una función condicional comprobaremos si existe el primer objeto, si es verdadero se creará un nuevo objeto XMLHttpRequest; si es falso se creará un ActiveXObject Microsoft.XMLHTTP, y si éste tampoco existe, tendremos un Msxml2.XMLHTTP.
Cuando creamos el objeto podemos usar sus métodos para comprobar el estado de los datos y propiedades.
Si window. XMLHttpRequest existe, asignamos un nombre de instancia al objeto. Al evento onreadystatechange le asignamos una función de respuesta y llamaremos a los métodos open() y send().

Nuestro archivo codigo.js:

// Documento JavaScript
function llamadasin(url, contenedor){
var pagina_requerida = false
if (window.XMLHttpRequest) {
// comprueba si el navegador es opera, safari, mozilla, etc.
pagina_requerida = new XMLHttpRequest()
}
else if (window.ActiveXObject){
// comprueba si el navegador es internet explorer
try {
pagina_requerida = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
// caso de versión antigua de internet explorer
try{
pagina_requerida = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){
}
}
}
else {
return false
}

pagina_requerida.onreadystatechange=function(){
// llamada a la función que carga la página
pintapagina(pagina_requerida, contenedor)
}
// métodos open y send
pagina_requerida.open(’GET’, url, true)
pagina_requerida.send(null)
}

// función que presenta la información
function pintapagina(pagina_requerida,contenedor){
if (pagina_requerida.readyState == 4 && (pagina_requerida.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(contenedor).innerHTML=pagina_requerida.responseText
}

Descarga los ficheros de ejemplo

Colecciones generales

1. Vistaicons.com. Recopilación de más de 2.000 iconos de gran calidad, en formatos .ico y .png
2. Tango Icon Library. Creado para dar consistencia gráfica a las interfaces de las aplicaciones de código libre.
3. FamFamFam. Cerca de 1.200 iconos básicos, entre ellos banderas de países. Formatos .gif y .png con licencia creative commons bajo atribución.
4. Icon Archive. Más de 14.500 iconos de varios autores clasificados en 33 categorías. Pueden descargarse en formato .ico o en .png en diferentes tamaños, aunque el uso comercial está restringido en algunos casos.
5. Free Icons Web. Más de 15.000 iconos. En algunos, para su uso comercial es necesario contactar con los autores.
6. PixelPressIcons.Com.140 iconos 3D realmente increíbles de Gary W. Rehiere. En formato .dmg y .gif
7. Cristal Clear. Un set de iconos diseñado por Everaldo Coelho que puede descargarse directamente desde Wikimedia Commons

Iconos para aplicaciones web

Los iconos básicos para vestir una herramienta online: botones de editar, paso atrás, advertencia…

1. Mini Pixel Icons
2. Sweetie
3. Maxpower

Iconos para listas (bullets)

1. Bullet Madness
2. Mini icons

…y si no has tenido suficiente

1. La ciudad de los iconos pixelados
2. Buscador de iconos

Antes de que le “picara el bicho de los ordenadores”, Kawasaki, un hawaiano hijo de japoneses nacido en la década de los 50, se graduó en Psicología, empezó Derecho para complacer a sus padres y luego lo dejó para trabajar contando diamantes en una gran joyería.

La llegada del Apple II le impactó tanto que decidió ponerse al servicio de la informática, primero en una empresa de software educativo, y más tarde, gracias al enchufe de un amigo de la universidad, Mike Boich, en la misma Apple.

“Cuando ví lo que un Macintosh podía hacer, se apartaron las nubes y los ángeles empezaron a cantar”, cuenta Kawasaki no sin cierta ironía en su página personal. “Durante cuatro años evangelicé a los desarrolladores de software y hardware acerca de Macintosh y lideré la carga contra la dominación mundial de IBM”

Junto a Boich, Kawasaki desempeñó labores de marketing que consistían principalmente en convencer a los desarrolladores para que hicieran software y hardware para Mac, en una época en la que ordenador y PC eran términos sinónimos.

La verdadera aportación de Kawasaki consistió en aplicar métodos de evangelización al marketing, haciendo que fueran los propios usuarios quienes libremente trataran de convencer a sus conocidos de que el Mac era mejor que el PC y de que lo compraran.

El éxito de este tipo de campaña es tal, que el usuario-evangelista es hoy un habitual del grupo de amigos o de compañeros de trabajo, ese personaje que espontáneamente alaba las virtudes de su Mac sencillamente porque cree que es lo mejor.

Y os dejamos con los puntos clave de este arte de la evangelización tecnológica, que el propio Kawasaki expuso durante la séptima edición de las jornadas tecnológicas de Gnomedex, celebrada entre el 9 y el 11 de agosto de este año.

1. Da formato a tus páginas con CSS, no con tablas

El CSS se carga más rápido que las tablas porque:

1) Los navegadores tienen que leer las tablas dos veces antes de mostrarlas: una para dibujar la estructura y otra para escribir el contenido.
2) Las tablas aparecen en la pantalla de una sola vez (hasta que no se descargue y genere la tabla entera, no aparecerá ninguna de sus partes)
3) Las tablas fomentan el uso de imágenes espaciadoras para ayudar al posicionamiento
4) El CSS requiere, por lo general, menos código que las tablas.
5) El CSS puede colocarse en un documento externo, que se llama una sola vez y queda almacenado en caché. La composición con tablas se almacena en cada documento HTML y tiene que cargarse cada vez que se muestra una página.
6) Con CSS puedes controlar el orden en que los ítems se descargan en la pantalla: hacer que el contenido aparezca antes que las imágenes de descarga lenta, algo que tus usuarios sin duda apreciarán.
(…)

2. No uses imágenes para mostrar texto

Nuestro viejo amigo el CSS acude al rescate otra vez. No hace falta usar imágenes para mostrar texto si puedes hacerlo con CSS. Echa un vistazo a este código:

a:link
{
color: #ffffff;
background: #ff9900;
text-decoration: none;
padding: 0.2em;
border: 4px solid;
border-color: #99f #008 #008 #99f
}
a:hover
{
color: #ffffff;
background: #ffaa11;
text-decoration: none;
padding: 0.2em;
border: 4px solid;
border-color: #008 #99f #99f #008
}


Este código crea un botón realmente sencillo que parece presionarse al pasar el ratón por encima. Puedes verlo en acción aquí si quieres. Echa un vistazo a cómo puedes usar CSS para hacer botones de navegación.

3. Llama las imágenes decorativas a través del CSS

Es posible presentar imágenes como parte del fondo llamándolas a través de CSS. Si tienes una imagen de 200px por 100px puedes utilizar el siguiente código HTML:

<div class="pretty-image"></div>

Y este CSS:

.pretty-image
{
background: url(filename.gif);
width: 200px;
height: 100px
}


Quizá parezca innecesario, pero esta técnica realmente puede mejorar el tiempo de descarga de tus páginas. Básicamente, los navegadores descargan las imágenes de fondo después de todo lo demás. Con esta técnica, tu texto se cargará instantáneamente y tus usuarios podrán moverse por la página mientras tu fantástica imagen de 50kb se descarga.

Esta técnica impide utilizar el atributo ALT, pero si tienes mucho interés en ponerlo puedes sustituir el HTML arriba indicado por este otro:

<image src="spacer.gif" class="pretty-image" alt="description" />

Spacer.gif es una imagen transparente de 1px por 1px. Ahora tienes una imagen transparente de 50 bytes y el contenido principal cargando primero, y tu gran imagen decorativa, además del texto alternativo, cargando en segundo lugar. Perfecto.

Por favor, ten en cuenta que esta técnica sólo vale para imágenes decorativas y no imágenes que aporten información. Cualquier usuario que tenga el CSS desactivado no podrá ver tus imágenes incrustadas en el CSS (ni su texto alternativo).

4. Usa selectores contextuales

Esto es ineficaz:

<p class="text">Esto es una frase</p>
<p class="text"> Esto es otra frase </p>
<p class="text"> Esto es otra frase más</p>
<p class="text"> Y otra frase más </p>

.text
{
color: #03c;
font-size: 2em
}


En lugar de asignar un valor a cada párrafo individual, podemos anidarlos dentro de un <div> y asignar un valor a esa etiqueta.


<div class="text">
<p> Esto es una frase </p>
<p> Esto es otra frase </p>
<p> Esto es otra frase más </p>
<p> Y otra frase más</p>
</div>

.text p
{
color: #03c;
font-size:2em
}

Este segundo ejemplo CSS básicamente dice que a todos los párrafos dentro de la clase class="text" debe asignárseles un valor de color de #03c y un tamaño de fuente de 2em.

A primera vista no parece muy importante, pero si puedes aplicar esto apropiadamente a todo tu documento, fácilmente puedes ahorrar un 20% del tamaño del archivo.

Puede que hayas notado que los valores de la propiedad color son más cortos que lo normal. #03c es una versión abreviada de #0033cc (puedes aplicar este valor abreviado a cualquier valor de color como este)

5. Utiliza propiedades CSS abreviadas

Puedes utilizar las siguientes propiedades abreviadas para el comando margin:

Estas reglas pueden aplicarse a margin, border y padding. (…)

6. Minimizar el espacio en blanco, los saltos de línea y las etiquetas de comentario

Cada letra o espacio del HTML pesa un byte. No parece mucho, pero todo suma. Hemos comprobado que al eliminar espacios en blanco innecesarios y comentarios, puedes recortar hasta el el 10% del tamaño del archivo (si tu HTML es realmente ineficaz).

7. Usa direcciones relativas

Trata de evitar las direcciones absolutas, porque pesan más. Un ejemplo de una dirección absoluta es <a href="http://www.URL.com/filename.htm">. Sería mucho mejor <a href="filename.htm">. (…)

8. Elimina etiquetas META innecesarias y contenido META

La mayoría de las etiquetas META son innecesarias y no aportan mucho. (…) Las etiquetas más importantes para el posicionamiento en buscadores son las palabras clave y las etiquetas descriptivas, aunque debido al abuso masivo han perdido mucha importancia en los últimos tiempos. Cuando uses estas etiquetas META trata de que el contenido ocupe menos de 200 caracteres (…). Las etiquetas META demasiado largas no son buenas para los motores de búsqueda porque diluyen tus palabras clave.

9. Pon el CSS y el JavaScript en documentos externos

Para colocar el CSS en un documento externo usa:
<link type="text/css" rel="stylesheet" href="filename.css"
/>
Para colocar JavaScript en un documento externo usa:
<script language="JavaScript" src="filename.js" type="text/javascript"></script>

Cualquier archivo externo es llamado una sola vez y almacenado en el caché del ordenador del usuario. En lugar de repetir el JavaScript o el CSS una y otra vez en los archivos HTML, escríbelo una sola vez en un documento externo.

Y no lo olvides, no hay límite al número de documentos externos que puedes usar. Por ejemplo, en lugar de hacer un gran documento CSS, puedes tener uno principal y otros específicos para ciertas áreas de tu sitio.

10. Utiliza / al final al enlazar un directorio

No hagas esto:
<a href="http://www.URL.com/directoryname"></a>
En su lugar, haz esto:
<a href="http://www.URL.com/directoryname/"></a>

¿Por qué? Si no hay una barra al final de la URL, el servidor no sabe si el enlace apunta a un archivo o a un directorio. Incluyendo la barra, el servidor sabrá instantáneamente que la URL apunta a un directorio y no necesita gastar tiempo en intentar averiguarlo.

Traducción libre de “Ten ways to speed up the download time of your web pages”, artículo escrito por Trenton Moss para Webcredible.co.uk