Currently browsing: May 2009

WP Carousel en WordPress.org

Beware: This post was published 6 years ago and its content may be outdated.

Si estás pensando en añadir un carrusel a tu WordPress y no quieres recurrir a plugins de pago, aquí tienes una opción gratuita que ya está en WordPress.org: WP Carousel.

Las características más destacables de este plugin son que se basa en jQuery, y recurre a usar la copia de jQuery que utiliza WordPress, con lo que el tamaño del plugin se reduce considerablemente.

Además, WP Carousel muestra de forma automática los artículos de la categoría que tú quieras, encabezados por la primera imagen de los mismos y seguidos por el Extracto que hayas añadido al artículo durante la redacción del mismo.

Aunque de momento no hay mucha información acerca del plugin (ayer me pilló por sorpresa el email de WordPress.org avisándome de que aceptaban el plugin), quiero añadir bastante más información esta tarde, además de una demostración en el theme Default.

Podréis ver más información y novedades del plugin en su página.

Transforma la apariencia de Ubuntu en la de Mac OS X

Beware: This post was published 6 years ago and its content may be outdated.

Buscando themes bonitos para Emerald me he encontrado con el proyecto Mac4Lin, un proyecto que trata de transformar la apariencia de Ubuntu (en realidad la de Gnome) en la de Mac OS X, mediante themes y algunas otras modificaciones.

Por supuesto, este proyecto es gratuito, como la gran mayoría (por no decir todas) de aplicaciones disponibles para Linux, y actualmente se encuentra en su versión RC1.

Podéis descargar los archivos de Mac4Lin y un PDF explicando cómo se instala aquí.

Efectos con la luz en el diseño web

Beware: This post was published 6 years ago and its content may be outdated.

Ayer publicaron en Smashing Magazine una recopilación de 35 exemplos de cómo se pueden usar los efectos de la luz para mejorar nuestros diseños.

La verdad es que la recopilación me ha gustado bastante. Me han parecido unos efectos bastantes bonitos y estoy seguro de que los añadiré a mis próximos diseños.

La emulación de Windows XP en Windows 7 no funcionará en todos los ordenadores

Beware: This post was published 6 years ago and its content may be outdated.

Una de las novedades que incorpora Windows 7 es la emulación de Windows XP para maximizar la compatibilidad del Sistema Operativo con software diseñado para equipos más antiguos.

Aunque me parece una idea útil para mejorar la compatibilidad, tiene un requisito básico: Necesita un procesador Intel o AMD compatibles con las tecnologías Intel VT y AMD-V. Lamentablemente, me parece que bastantes usuarios no van a poder utilizar esta interesante función, aunque siempre podemos recurrir a VirtualBox.

En esta página podéis comprobar si vuestro procesador es compatible con dichas tecnologías… el mío no lo es, ¿y el vuestro?

Vía Genbeta.

Dale un efecto de hundido a tus textos con Fireworks

Beware: This post was published 6 years ago and its content may be outdated.

Texto Hundido: Antes y Después

Ayer estuve tratando de darle un efecto de hundido a un texto para un logo en Fireworks. Después de estar un rato sin lograr nada, me dispuse a buscar tutoriales para lograr el efecto en Photoshop, pero tampoco encontré lo que buscaba.

La solución apareció por si sola al cabo de otro rato de rebuscar entre las funciones de Fireworks: Basta con añadir una sobra interior. ¿Cómo? Lo explico a continuación.

Paso 1: Creamos un nuevo archivo, de tamaño 100px por 100px, y fondo de color #666.

Texto Hundido: Paso 1

Paso 2: Añadimos una frase, en mi caso “Prueba“, y cambiamos la tipografía a Arial, tamaño 28, en negrita y de color #333.

Texto Hundido: Paso 2

Paso 3: Añadimos un filtro al texto (Filtros -> Sombrear e iluminar -> Sombra interior). Dejamos los valores que están por defecto.

Texto Hundido: Paso 3.1

Texto Hundido: Paso 3.2

Y listo, es un efecto realmente sencillo de usar, y que puede ser muy útil, por ejemplo, para crear bonitos logos o para añadir interesantes efectos a nuestros menús. Para este último caso, podéis ver una imagen con el mismo texto pero usando diferentes colores en cada caso. Se puede ver que usando este método podemos lograr un interesante efecto al pasar el cursor sobre los elementos de nuestros menús.

Texto Hundido: Otros ejemplos

Descarga Windows 7 RC

Beware: This post was published 6 years ago and its content may be outdated.

Vía Genbeta descubro que ya están disponibles oficialmente las descargas de la Release Candidate de Windows 7.

Se pueden descargar en varios idiomas (entre ellos el español) y en versiones de 32 y 64 bits. Además, junto con las descargas puedes obtener un serial válido para activar Windows 7 RC.

La página de descarga es esta (es necesario iniciar sesión en Windows Live).

Themes para WordPress similares a webs "famosas"

Beware: This post was published 6 years ago and its content may be outdated.

Themes famosos

Esta tarde dando vueltas por la red me he encontrado con un listado de lo más curioso: Themes para WordPress basados en páginas webs bastante conocidas. El listado está formado por 28 themes para WordPress con los cuales puedes conseguir un diseño muy parecido a de páginas como la de Apple, la CNN, Digg, Facebook o incluso WordPress.org.

Si bien es cierto que no son idénticos, estos themes son realmente muy similares, y muchos de ellos son gratuitos.

Podéis ver la lista completa aquí.

Fechas de lanzamiento de Ubuntu 9.10

Beware: This post was published 6 years ago and its content may be outdated.

Via Mundo geek descubro las fechas de lanzamiento de la próxima versión de Ubuntu (9.10: Karmic Koala):

  • Ubuntu 9.10 Alfa 1: 14 de mayo de 2009
  • Ubuntu 9.10 Alfa 2: 11 de junio de 2009
  • Ubuntu 9.10 Alfa 3: 23 de julio de 2009
  • Ubuntu 9.10 Alfa 4: 13 de agosto de 2009
  • Ubuntu 9.10 Alfa 5: 3 de septiembre de 2009:
  • Ubuntu 9.10 Alfa 6: 17 de septiembre de 2009
  • Ubuntu 9.10 Beta: 1 de octubre de 2009
  • Ubuntu 9.10 RC: 22 de octubre de 2009
  • Ubuntu 9.10 Versión Final: 29 de octubre de 2009

Crea un menú desplegable usando sólo CSS

Beware: This post was published 6 years ago and its content may be outdated.

Es habitual encontrar menús desplegables (drop down menus) en muchos sitios webs, y estos nos permiten acceder a las subpáginas de cada sitio de forma más rápida y nos ahorran el tiempo de cargar la página padre para ir a la hija. Es frecuente que estos menús usen Javascript para funcionar, y con él logran unos efectos bastante atractivos, pero para lograr un menú más accesible a aquellos que no puedan usar Javascript, podemos sustituirlo por CSS.

El HTML

Antes de meternos en el CSS, tenemos que decidir cómo será el HTML de nuestro menú desplegable. Yo he optado por crear una lista desordenada (<ul>), ya que es el sistema que más se suele usar, y que podemos encontrar, por ejemplo, en WordPress.

El aspecto de nuestro menú será este:

<ul id="dropdownmenu">
<li><a href="#">Link 1</a></li>
<li>
<a href="#">Link 2</a>
<ul>
<li><a href="#">SubLink 2.1</a></li>
<li><a href="#">SubLink 2.2</a></li>
<li><a href="#">SubLink 2.3</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">SubLink 3.1</a></li>
<li><a href="#">SubLink 3.2</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li>
<a href="#">Link 5</a>
<ul>
<li>
<a href="#">SubLink 5.1</a>
<ul>
<li><a href="#">SubLink5.1.1</a></li>
<li><a href="#">SubLink5.1.2</a></li>
</ul>
</li>
<li><a href="#">SubLink 5.2</a></li>
</ul>
</li>
</ul>

El menú tiene 5 links principales, de los cuales el segundo link tiene tres sublinks, el tercero tiene dos sublinks y el quinto tiene dos sublinks de los cuales el primero tiene dos subsublinks.

El CSS

Voy a explicar un poco la lógica del menú. En principio el menú sólo tiene que mostrar los cinco links principales (links padres). Los demás deberían estar ocultos. Al pasar el cursor sobre un link padre, deberían mostrarse sus links hijos. Al pasar el cursor sobre uno de estos hijos, debería mostrarse sus hijos, y así sucesivamente.

Comenzaremos reseteando un par de estilos para que el menú quede mejor y haciendo que el menú principal sea en horizontal.

body, ul, li {
margin:0;
padding:0;
}
ul {
list-style:none;
display:inline-block;
}
ul li {
float:left;
}

Ahora daremos un poco de estilo al menú principal. Esta parte se puede modificar para que el menú quede al gusto de cada uno y se adapte mejor al diseño del lugar donde va a estar.

ul#dropdownmenu {
margin:none;
list-style:none;
height:40px;
width:100%;
background:#3b3b3b;
}
ul#dropdownmenu li {
height:40px;
}
ul#dropdownmenu li a {
display:block;
padding:8px;
height:24px;
color:#FFF;
font-family:Arial, Verdana, Geneva, sans-serif;
font-size:18px;
text-decoration:none;
}
ul#dropdownmenu li a:hover {
background:#CCC;
}

Ahora tenemos que ocultar los sublinks y hacer que sólo se muestren cuando se pasa el cursor sobre el link padre. Esto lo haremos usando el selector :hover.

ul#dropdownmenu li ul {
display:none;
}
ul#dropdownmenu li:hover ul {
display:block;
background:#999;
position:absolute;
}

Continuamos añadiendo algo de color a los sublinks:

ul#dropdownmenu li:hover ul li {
float:none;
position:relative; /* Gracias por el consejo, Álex */
background:#999;
}

Finalmente, ocultamos los links nietos (hijos de los hijos), usando la misma técnica que antes. Lo único que cambia es que añadimos la propiedad top y left para que los links aparezcan a la derecha y no debajo (si aparecen debajo se superponen a los siguientes links hijos).

ul#dropdownmenu li ul li ul, ul#dropdownmenu li:hover ul li ul {
display:none;
}
ul#dropdownmenu li:hover ul li:hover ul {
display:block;
top:0;
left:100%;
}

Con esto ya tenemos el menú completado. Este menú permite añadir tres niveles de links (padres, hijos y nietos), aunque se puede modificar para que funcione con todos los niveles que se necesiten.

Descarga y demo

Como es costumbre, he preparado una pequeña demo del menú desplegable para que podáis comprobar el resultado.

También está disponible la misma demo en un archivo comprimido para que la descarguéis si tenéis problemas con el tutorial.