Artículos de enero del 2009

24 ene

Publicado en General

Pequeña modificación del diseño del blog

Modificación del pie de página

Esta mañana me ha dado por hacer unas modificaciones al diseño del blog, algunas ya las tenía pensadas hacía tiempo, pero siempre me decía “ya lo modificaré” y nunca lo modificaba.

Aunque no he cambiado todo lo que quería cambiar (aún me queda el rediseño de los comentarios), creo que he dejado bastante mejor el pie de página del blog.

He eliminado el espacio negro que había entre cada bloque de contenido de las pestañas, dejándolas pegadas al menú y he cambiado los links de “Arriba” y los RSS Feed por imágenes más bonitas y rápidas de leer.

También he modificado el estilo de los links de esos bloques, añadiendo un icono a cada elemento que se ilumina al pasar el cursor sobre él.

He renombrado algunas pestañas y he cambiado el bloque de “Archivos” a la pestaña de “Recientes & Archivos”.

Por último he eliminado la publicidad del blog, ya que en el sitio en el que estaba no la veía nadie, y en cualquier otro lugar hubiese molestado a la hora de leer el contenido. Pienso que por 4 dólares que me van a pagar no vale la pena estropear la lectura del blog, considero más importante que el contenido se lea bien que mi bolsillo tenga 4$ más.

¿Os gusta como ha quedado el pie de página?

Dale un nuevo estilo a tus formularios

Alguno elementos de los formularios son más complicados de modificar a nuestro gusto que otros (por ejemplo, las casillas de verificación o las listas desplegables), y a veces no quedan como nos gustaría que quedasen y no se adaptan a nuestros diseños.

Una solución para este problema es la que nos proponen en ryanfait.com, con la que mediante un poco de Javascript y CSS podemos dar un toque especial a nuestros formularios.

Si queremos darle un nuevo estilo al formulario, tendremos que descargar este archivo js, e incluirlo en la página del formulario.

También hay que añadir este código CSS:

span.checkbox {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(checkbox.gif) no-repeat;
display: block;
clear: left;
float: left;
}
span.radio {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(radio.gif) no-repeat;
display: block;
clear: left;
float: left;
}
span.select {
position: absolute;
width: 158px;
height: 21px;
padding: 0 24px 0 8px;
color: #fff;
font: 12px/21px arial, sans-serif;
background: url(select.gif) no-repeat;
overflow: hidden;
}

Lo último es descargar las imágenes de las casillas de verificación, los radiobutton (no se me ocurre ninguna buena traducción… ¿botones de radio? ¿botones circulares?) y las listas desplegables.

Para aplicarlo basta con añadir class=”styled” a los elementos que queremos darle ese nuevo estilo, mientras que dejamos como antes los que no queremos modificar.

Podéis descargar un pequeño formulario de prueba que he creado. Es muy básico, pero se puede ver con facilidad cómo se aplica.

Espero que os resulte útil.

En Maestros del Web han publicado una recopilación de curiosidades hechas con CSS.

Sin duda, es increíble lo que se puede llegar a hacer con CSS, imaginación y mucho esfuerzo.

Aunque quitando lo curioso… lo veo poco práctico.

20 ene

Publicado en Windows

Comparativa de requisitos mínimos de Windows por años

Hoy he visto en Mundogeek (sí, sé que estoy algo desactualizado) una gráfica comparando los requisitos de las distintas versiones de Windows (desde Windows 95 hasta Windows 7).

Al verlas me he dado cuenta de algo que ocurre en todas las gráficas que he visto hasta ahora: Comparan por versiones y no por años. Es decir, comparan el aumento de requisitos mínimos de una versión para otra, no de un año para otro.

Así que he decidido hacer una pequeña gráfica por años, no por versiones de Windows, aunque las he señalado en la gráfica.

Gráfica de requisitos mínimos de Windows

Hay que tener un par de cosas en cuenta a la hora de analizar la gráfica:

  1. Los valores absolutos no son correctos, es decir, yo he aumentado los valores de forma proporcional, haciendo que todos sean visibles en la gráfica y que mantengan la proporción, pero los valores en sí son falsos.
    Por ejemplo: 1024 MB de RAM no se pueden ver junto a 16384 MB de espacio en el disco duro, así que he convertido 1024 MB de RAM en 16384, de forma de 32 MB de RAM en la realidad son 512 en la gráfica.
  2. La variable Año es un control, no sirve para nada, la he usado para comparar las demás variables con una que aumenta de forma proporcional durante todo el periodo.
  3. La variable Procesador es relativa, vamos, no es lo mismo decir un Pentium III a 700 Mhz que decir un Pentium IV a 700 Mhz, sin embargo, en la gráfica lo he representado igual (hasta ahora todas las gráficas que he visto lo representan igual, así que no supone mucha pérdida en comparación con las demás).

Sobre lo que se ve en la gráfica, hay poco que decir, yo destacaría que en el periodo entre windows XP y Windows Vista, el espacio en el disco duro y la memoria RAM aumentan más (relativamente hablando, claro) que en el resto de periodos, mientras que en el periodo Windows ME – Windows XP, el procesador aumenta más que en el resto (relativamente hablado, de nuevo).

En el resto de periodos los aumentos son pequeños (excepto en proesador) y en el periodo Windows Vista – Windows 7, tan sólo aumenta el espacio en el disco duro necesario.

Por último, me gustaría haber añadido una variable de control más, algo como el aumento de prestaciones que hubo en cada año, es decir, el ordenador que puedo comprar con X cantidad de dinero en cada año, para comparar si el aumento de requisitos mínimos es desproporcionado con lo que ofrece el mercado (algo que considero muy interesante).

Ordena tablas con jQuery y Tablesorter

Hace un par de días me vino a la cabeza la idea de ordenar tablas por orden ascendente y descendente. Las pocas veces que he hecho algo así, he recurrido a usar PHP y variables de URL (algo como archivo.php?columna=nombre&orden=ascendente), pero es lento de usar y de programar.

Así que se me ha ocurrido buscar una solución alternativa usando jQuery, y buscando un poco por Google he descubierto Tablesorter, un plugin de jQuery que nos permite ordenar las tablas de forma rápida y fácil.

Para comenzar, nuestra tabla debe tener un código similar a este:

Nombre Apellidos Email Web
Pepe García pepe_garcia@gmail.com http://www.pepegarcia.com
Paco Pérez paco_perez@yahoo.com http://www.pacoperez.com

Iniciamos Tablesorter con este otro código Javascript:

$(document).ready(function()
    {
        $("#myTable").tablesorter();
    }
);

Sin duda, es un plugin de jQuery que utilizaré bastante para futuros proyectos.

Más información, demostración, descarga y documentación en tablesorter.com.

Vía Error500 descubro que tanto Google Earth como Google Maps disponen de una recreación de 12 cuadros del museo del Prado.

Está claro que no es como estar delante del cuadro, pero pienso que es una gran idea por parte de Google.

Nota: Creo que esta “novedad” tiene una semana… pero en fin, me acabo de enterar :-$ .

Puedes ver los cuadros en Google Maps o en Google Earth (para poderlos ver en Google Earth tienes que activar la capa de edificios en 3D en el panel inferior izquierdo y buscar el museo del Prado).

WordPress.tv, videotutoriales sobre WordPress y más

Hoy se ha publicado WordPress.tv, una web de Automattic donde no sólo podremos ver videotutoriales sobre WordPress, sinó también  entrevistas, presentaciones y más material visual que seguro que será del agrado de cualquier amante de WordPress.

En WordPress.tv ya podemos encontrar algunos vídeos de diversas categorías, desde los típicos How-to hasta vídeos de la WordCamp Toronto 2008.

Lamentablemente, no podemos subir nosotros mismos los vídeos, aunque podemos contactar con Automattic para avisarles sobre algún vídeo relacionado o sugerirles que preparen algún vídeo sobre un tema específico (entre otras cosas), claro, todos los vídeos acerca de WordPress.

Podéis ver el anuncio de WordPress.tv en el Blog de WordPress o ir a WordPress.tv.

¿Qué os parece WordPress.tv?

16 ene

Publicado en Windows

Capturas de Windows 7

Desde la semana pasada podemos descargar la Beta de Windows 7 desde los servidores de Microsoft, pero hay muchos que no pueden ver cómo es porque su ordenador no cumple los requisitos mínimos, porque no quieren instalarlo en su equipo, etc.

Este artículo está enfocado a todos estos usuarios, ya que he estado sacando capturas de Windows 7… exactamente 56 capturas, donde se puede ver cómo es el sucesor de Windows Vista.

Comprime con Gzip archivos Javascript

Esta tarde me ha venido a la cabeza la idea de comprimir código Javascript mediante Gzip.

No es nada complicado, he usado el método Paul Stamatiou:

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/javascript"); ?>
/* Código Javascript */
<?php if(extension_loaded('zlib')){ob_end_flush();}?>

Con él he conseguido reducir el tamaño de un archivo de 64KB a 20KB.

14 ene

Publicado en Windows

Comprueba la compatibilidad con Windows Vista

Windows Vista Compatibility Center

Últimamente he estado pensando cambiar mi versión de Windows de 32 Bits por una de 64 Bits, entre otras cosas para evitar la limitación de 4 GB de RAM y ver si le saca más partido a mi procesador.

Sin embargo, no todo el software es compatible con sistemas operativos de 64 Bits, y tampoco todo el software es compatible con Windows Vista, así que antes de hacer nada me ha surgido la duda de: “¿Será compatible este programa? ¿Y este otro?”.

Tras buscar un poco he encontrado el Centro de Compatibilidad de Windows Vista, una página de Microsoft que nos permite buscar software y hardware y nos indica si funciona con Windows Vista (tanto de 64 Bits como de 32) o si no, y que nos recomiendan hacer para mejorar la compatibilidad.

En el Centro de Compatibilidad de Windows Vista nos permite ver sólo el software y hardware compatible o el no compatible, además de permitirnos elegir entre Windows Vista de 32 o 64 Bits.

Sin duda, una gran ayuda a los usuarios por parte de Microsoft.



  • Página 2 de 4
  • 1
  • 2
  • 3
  • 4