Currently browsing: diseño

Transforma el aspecto de Firefox 3.5 en el de Firefox 4

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

Aspecto de Firefox 4.0 (izquierda) vs Aspecto de Firefox 3.5 (derecha)Ya hemos visto algunos indicios de lo que podía ser la interfaz de Firefox 4, y no era de esperar que al poco tiempo apareciesen themes que imitasen esta interfaz. Sin embargo el theme del que voy a hablar a continuación no imita los últimos mockups de la interfaz de Firefox 4, sino que imita los anteriores (acordáos de que cuando comenté las imágenes de la posible nueva interfaz, éstas eran sólo de Windows, mientras que había unas anteriores donde también se veía la interfaz de Mac y de Linux, el theme en cuestión imita estas imágenes) y lo cierto es que lo consiguiesen hacer realmente bien e increíblemente fácil. Realmente dotar a nuestro Firefox 3.5 de la interfaz de Firefox 4 sólo consiste en instalar un theme y un par de extensiones, además de configurarlas.

Lamentablemente este theme no está disponible ni para Linux ni para Mac, así que tendremos que esperarnos al lanzamiento de Firefox 4 para disfrutar de este theme. Para aquellos que usen Windows, el proceso es bastante sencillo. Comenzaremos instalando Strata40 (el theme principal), seguido de StrataBuddy (el cual habilita transparencias y permite elegir entre el aspecto de Firefox 3.7 o Firefox 4), Tab Progress Bar y Fission (para añadir esa barra de carga a la barra de direcciones) y por último Omnibar (para unificar la caja de búsquedas con la de direcciones).

Al acabar de instala estos complementes puede que el aspecto de Firefox no se parezca mucho al de Firefox 4, sin embargo aún tenemos que configurar los complementos. Abrimos la ventana de complementos y seleccionamos StrataBuddy. A continuación le damos a opciones, lo cual hará que taparezca una ventana con opciones diversas. Para comenzar iremos a la pestaña de Strata y seleccionaremos, en Style, 4.0 y en Background style, Aero Glass. A continuación pasaremos a la pestaña de Tabs, donde cambiaremos la opción de Tab style a Tabs on top. Finalmente en la pestaña de Misc, marcaremos sólo las opciones de Progress lines y Remove ‘List all tabs’ button.

Y ya lo tenemos, ahora nuestro Firefox será idéntico al de la imagen.

Aspecto de Firefox 3.5 (izquierda) y Aspecto de Firefox 4 (derecha)

¿Será así la interfaz de Firefox 4?

Beware: This post was published 6 years ago and its content may be outdated.
Comparación entre Firefox 3.5 y 4.0

Comparación entre Firefox 3.5 y 4.0

Vía Genbeta descubro algunas imágenes de la posible interfaz de Firefox 4. Actualmente los desarrolladores de Firefox le están dando vueltas a la interfaz de Firefox 4, y estas imágenes son el resultado de algunos conceptos que podrían aplicar al navegador. Como suele pasar, las imágenes son de la interfaz de Windows, así que en Linux y Mac pueden haber unos cuantos cambios significativos (sobretodo en Mac, teniendo en cuenta que el menú de la aplicación (el de archivo, editar, ver, historial, etc) en OS X está situado fuera de la ventana de navegador, con lo cual algunas de las modificaciones que hay en las imágenes no tienen sentido para la versión de este navegador para Mac OS X.

Pero, dejemos de lado de momento las posibles variaciones entre las versiones para cada Sistema Operativo de Firefox ya que hay diversas versiones de esta interfaz, muy similares entre sí pero con ligeros cambios unas respecto de las otras.

Interfaz de Firefox 4.0 en Windows 7

La primera de las propuestas incluye un botón para la aplicación (que sustituiría el menú de archivo, editar, ver, etc), elimina la barra de título, mueve las pestañas a la parte superior de la ventana (al estilo de Chrome u Opera, sobretodo en la última preAlpha de Opera), elimina la barra de favoritos y da un nuevo color a las partes opacas de la ventana.

Interfaz de Firefox 4.0 en Windows 7

Esta segunda propuesta cambia la posición de las pestañas y las sitúa por debajo de la barra de direcciones. Lo de más sigue más o menos igual que en la propuesta anterior.

Interfaz de Firefox 4.0 en Windows 7

La tercera propuesta añade la barra de marcadores y la situa por encima de las pestañas. Por lo demás, sigue el esquema de la segunda propuesta.

Interfaz de Firefox 4.0 en Windows 7

La cuarta propuesta parte de la primera y vuelve a tener las pestañas en la parte superior de la ventana. Inmediatamente después se muestra la barra de direcciones, y por último la barra de marcadores.

Variaciones del botón Firefox

Variaciones del botón Firefox

Como habréis podido observar, el menú de Firefox se mantiene igual en todas las propuestas anteriores. Pues bien, hay otras cinco propuestas sobre diversas posiciones de este menú, que podéis ver en la imagen que tenéis a la derecha. Las variaciones van desde el color del menú (gris en el primer caso y naranja en todos los demás) hasta la aparición (o desaparición) de la barra de título (creo que no perderíamos demasiado si desapareciese esta barra, la verdad es que no me fijo demasiado en ella, ¿vosotros sí?), el tamaño del botón y el texto que incluye (en este punto, me gusta mucho el botón de la segunda imange, sin texto pero con el icono de Firefox y un bonito fondo naranja. aunque movería las pestañas hasta debajo del botón, no dejaría espacio en blanco como hay en la imagen) o la posición del propio botón (en algunas imágenes aparece separado, en otras se acerca más a las pestañas y en una es una pestaña).

Volviendo al aspecto de Firefox en Mac y en Linux, revisando un poco la fuente original de las imágenes, he encontrado un par de imágenes sobre la interfaz de Firefox 4 en Mac y en Linux. Lamentablemente ahora mismo la página tiene un error en la Base de Datos y es imposible acceder a ella, aunque podéis ver las imágenes más significativas en este mismo artículo.

Firefox 4 en Ubuntu

Comenzaremos por Linux. A pesar de que hace mucho que no uso Firefox en Linux (bueno, en realidad hace mucho que no uso Linux) he notado bastantes cambios nada más ver la imagen. Siguiendo el mismo esquema que en Windows, la barra de título desaparece junto con el menú de archivo, editar, ver, etc. Las pestañas se vuelven a situar en la parte superior y se unifica la caja de búsqueda con la de direcciones, al estilo de Chrome. A diferencia de Windows, en Linux parace que no habrá el botón Firefox, aunque puede que esto sea debido a que esta imagen de la interfaz de Firefox 4 en Linux es anterior a la imagen de la interfaz de Firefox en Windows, así que puede que la interfaz de Linux reciba más cambios de los que se ven en esta imagen.

Firefox 4 en Mac

Las imágenes de la interfaz de Firefox 4 en Mac también son anteriores a las imágenes de la interfaz de Windows, así que puede que haya más novedades (al igual que en Linux) que no estén recogidas aquí. Sobre las que sí lo están, podemos ver que desaparece de nuevo la barra de título y la barra de marcadores, las pestañas se situan otra vez en la parte superior de la ventana, se unifica la caja de búsqueda y la de direcciones y desaparece la barra de estado. Algunos iconos típicos de esta barra, como el de Firebug o el de las descargas, están situados ahora al final de la barra de direcciones.

Lo cierto es que me gusta mucho la nueva interfaz. Tengo muchas ganas de tener la interfaz de Firefox 4 en mi Mac porque la verdad es que la interfaz actual de Firefox en Mac deja mucho que desear…

Sin embargo  creo que la más bonita de todas es la de Windows. Me encanta el rediseño que le han dado al navegador. Es simplemente excelente.

¿Y a vosotros? ¿Qué os parece la nueva interfaz?

Dándole estilos a nuestras listas (<ul>, <ol> y <dl>)

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

El viernes publicaron en Smashing Magazine un interesante artículo sobre cómo dar estilo a nuestras listas HTML con CSS. También comenta un poco las diferencias entre navegadores y da algunos ejemplos de menús creados a partir de estas técnicas.

Si no tenéis claro como darle estilos a las listas <ul>, <ol> y <dl>, este artículo os será de mucha utilidad.

El foro de recibe un rediseño

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

Al migrar de phpBB a Simple Machines Forum, el foro pasó de tener un diseño similar al del blog a tener un diseño totalmente diferente, sin embargo, después de un par de días que he tenido libres, he podido crear una versión del diseño del blog para SMF. También he hecho ligeros cambios en el theme del blog, principalmente enfocados a eliminar Javascript innecesario y a agilizar la carga de la página, aunque también he agrandado las etiquetas que indican la fecha de publicación de los artículos.

Si encontráis algún error, reportadlo en los comentarios o en el foro, donde prefiráis.

Espero que os gusten las novedades.

El nuevo diseño de Google

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

El nuevo "look" de Google

Google ha estado trabajando en un nuevo diseño para su buscador, un diseño que si bien no está activado por defecto, podemos activarlo fácilmente modificando las cookies del navegador. Para aquellos que queráis probarlo, el procedimiento que debéis seguir es el siguiente:

  1. Acceded a http://google.com/ncr (la página internacional de Google)
  2. Introducid en la barra de direcciones el siguiente código (sin espacios de ningún tipo): javascript:void(document.cookie=”PREF=ID=20b6e4c2f44943bb:U=4bf292d46faad806:TM=1249677602:LM=1257919388:S=odm0Ys-53ZueXfZG;path=/; domain=.google.com”);
  3. Entrad de nuevo en http://google.com/ncr

Con esto podréis ver el nuevo diseño del buscador, aunque también se buscará por defecto en la página inglesa de Google. Por otro lado, si queréis desactivarlo, basta con cambiar las preferencias del buscador desde la página de opciones de Google y elegir español como idioma de la interfaz.

Dejando de lado la forma de probar la nueva interfaz, voy a comentar las novedades que incorpora y el aspecto que tiene.

Read more →

Diseñando un theme para WP Main Menu

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

Theme de prueba

A finales de octubre anuncié las novedades de WP Main Menu 0.2, entre las cuales estaba el soporte para themes. Durante un par de semanas he estado tratando de desarrollar un sistema de themes cómodo, fácil de usar (tanto para diseñadores como para usuarios ” de a pie”) y potente. Finalmente he creado un sistema parecido al de WordPress, aunque con sus propias peculiaridades, que espero que os guste y os sea cómodo de usar. En este artículo voy a explicaros cómo se diseña para WP Main Menu 0.2, lamentablemente sigue en desarrollo, así que no podréis probar los diseños, tan sólo haceros una idea de cómo se hace.

Básicamente un theme para WP Main Menu consta de 2 archivos fundamentales, una captura de pantalla (del mismo tamaño que las de los themes de WordPress: 300px x 225px) y tantos archivos CSS/Javascript como se quiera. Pero primero vayamos a los archivos fundamentales:

index.php

El archivo index.php del theme es el que almacena la información básica del theme, en forma de matriz, en la cual se deben definir los índices:

  • author – Indica el nombre del autor del theme
  • author_url – Indica la URL de la página del autor
  • name – Corresponde al nombre del theme, que no tiene nada que ver con el nombre de la carpeta que lo contiene
  • url – La página del theme, para pedir soporte y contar las novedades
  • desc – Una descripción del theme
  • version – Cada theme es libre de añadir un número de versión o no, pero es recomandable hacerlo, así los usuarios podrán saber si están usando la versión más moderna o no

Hay otros dos índices más: css y js, que son, a su vez, un matriz que almacena la ruta relativa de los archivos CSS y Javascript (respectivamente). Puede que así no quede muy claro, así que os pondré el código de un theme de pruebas:

<?php
$theme['author'] = "Sumolari";
$theme['author_url ']= "http://sumolari.com";
$theme['name'] = "Prueba";
$theme['url'] = "http://sumolari.com/wp-main-menu";
$theme['desc'] = "Esta es una prueba";
$theme['version'] = "1.0";
$theme['css'][] = 'style.css';
$theme['css'][] = 'css/otro.css';
$theme['js'][] = 'js.js';
$theme['js'][] = 'js/mas.js';
?>

Este sistema permite utilizar tantos archivos CSS y Javascript como sean necesarios, además de que pueden estar organizados en subcarpetas. Ojo, cuando hablo de que las rutas son relativas, me refiero a que el punto de partida es la carpeta que contiene al theme.

theme.php

Si el archivo index.php definía la información sobre el theme (autor, nombre, descripción, archivos CSS y Javascript que deberá cargar, etc), el archivo theme.php define la estructura en sí del theme. El archivo theme.php se basa en la función wp_main_menu_create_menu, que se ha de crear de forma obligatoria, ya que es la que llamará WP Main Menu a la hora de mostrar el menú. Esta función contendrá un bucle foreach, un comprobador de que el link está publicado y no guardado como borrador, una matriz y una llamada a sí misma o a otra función para mostrar los sublinks. Dejemos de lado la teoría y vayamos al código del theme de pruebas:

<?php function wp_main_menu_create_menu($menu2) { ?>
<div id="wp_main_menu">
<ul id="wp_main_menu_parents">
<?php foreach ($menu2 as $key => $value): if ($value['status'] != 'draft'): ?>
<?php $link = wpmm_asign_variables($value); ?>
<li>
<a href="<?php echo $link['url']; ?>"><?php echo $link['name']; ?></a>
<?php if ($link['sublinks'] != '') wp_main_menu_create_menu($link['sublinks']); ?>
</li>
<?php endif; endforeach; ?>
</ul>
</div>
<div class="wp_main_menu_clear"></div>
<?php
}
?>

En este caso, la línea 6 inicia el bucle y la comprobación, al igual que la línea 17 lo acaba. La línea 7 asigna los valores de la matriz $link, mientras que la línea 13 comprueba si el link actual tiene sublinks, y en caso afirmativo, vuelve a llamar a esta función para que los muestre.

Este sistema nos permite usar más de una función para mostrar los links, es decir, la función wp_main_menu_create_menu siempre tiene que mostrar los links principales, pero se puede definir una función diferente para los sublinks o incluso no mostrar los links desde el principio o llegado a cierto nivel, todo depende del theme.

Este otro código es el que podríamos usar para un menú que muestra de una forma los links principales y de otra todos los demás links:

<?php function wp_main_menu_create_menu($menu2) { ?>
<div id="wp_main_menu">
<ul id="wp_main_menu_parents">
<?php foreach ($menu2 as $key => $value): if ($value['status'] != 'draft'): ?>
<?php $link = wpmm_asign_variables($value); ?>
<li>
<a href="<?php echo $link['url']; ?>"><?php echo $link['name']; ?></a>
<?php if ($link['sublinks'] != '') wp_main_menu_create_submenu($link['sublinks']); ?>
</li>
<?php endif; endforeach; ?>
</ul>
</div>
<div class="wp_main_menu_clear"></div>
<?php
}
function wp_main_menu_create_submenu($menu2) { ?>
<ul class="wp_main_menu_sublinks">
<?php foreach ($menu2 as $key => $value): if ($value['status'] != 'draft'): ?>
<?php $link = wpmm_asign_variables($value); ?>
<li>
<a href="<?php echo $link['url']; ?>"><?php echo $link['name']; if ($link['sublinks'] != '') echo '<span class="alignright">&raquo;</span>'; ?></a>
<?php if ($link['sublinks'] != '') wp_main_menu_create_submenu($link['sublinks']); ?>
</li>
<?php endif; endforeach; ?>
</ul>
<?php } ?>

Aunque esta es sólo una posibilidad, con algunos conocimientos básicos de PHP se pueden lograr themes únicos que le darán un aspecto excepcional al theme.

Otros archivos

Los archivos CSS y Javascript nos tienen límite alguno, y como hemos visto antes, se pueden añadir tantos como sean necesarios, de forma que podemos crear menús mezclando las posibilidades del CSS y los efectos de Javascript.

Como veis, no es nada complicado crear un theme para WP Main Menu, y aunque ahora puede parecer algo confuso debido a que no está disponible el plugin para hacer las comprobaciones, en cuanto esté listo y podáis probarlo, veréis que es realmente fácil de usar y con muchas opciones de personalización.

Dejando de lado el diseño de themes, la interfaz de la página de gestión de themes es una copia de la original de WordPress, así que si sabéis usar la de WordPress, no tendréis problemas con la de WP Main Menu.

Espero que os guste el nuevo sistema de themes.

Ya se ha elegido al ganador del concurso de Smileys de Simple Machines Forum

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

A finales de agosto comenzó un concurso para elegir nuevos smileys para la próxima versión 2.0 de Simple Machines Forum. Después de un mes de votaciones, se ha elegido el ganador. Los finalistas del concurso han sido Spektral, SoLoGHoST e islam2hamy, de los que finalmente ha ganado…

¡SoLoGhOsT con sus Solosmileys Non Animated!

He tratado de localizar todos los paquetes de smileys participantes, sin embargo sólo he podido localizar el ganador y uno de los finalistas.

Podéis verlos a continuación.

Finalista (s-c smiley, de islam2hamy) Smileys ganadores (Solosmileys, de SoLoGhOsT)
Smileys finalistas Smileys ganadores

Y a vosotros, ¿os gustan los nuevos smileys que probablemente veremos por defecto de ahora en adeltante en SMF?