Hola chiquitos y chiquitas, si se que ya hace un monton de tiempo que no escribo nada nuevo en el blog y que lo he tenido medio abandonado por meses, pero la verdad es que ultimamente ando muy escazo de tiempo y ademas con algunos problemitas de salud que no me dejaron disfrutar del 2009 tanto como hubiera querido, pero en fin, ya estamos en un año nuevo y espero que este 2010 sea mejor que el anterior.
Hace ya mucho tiempo que los diseñadores han tenido que recurrir en demasía al flash para poder ofrecer interfaces más atractivas al usuario, pero ésto en muchos casos no es necesario, ya que con el uso de elementos como el css y javascript podemos lograr efectos muy interesantes que hagan más amena la interacción con el usuario. A continuación les dejo un ejemplo de ello.
Iniciamos con un menu básico:
<ul id="navigation"> <li><a href="#A">A</a></li> <li><a href="#B">B</a></li> <li><a href="#C">C</a></li> <li><a href="#D">D</a></li> <li><a href="#E">E</a></li> </ul>
Luego aplicamos un poco de css
#navigation{
padding:0;
margin:0;
list-style:none;
position:relative;
background:#01242F url(../images/navigation-bg.jpg) repeat-x left 68px;
height:120px;
padding-top:44px;
}
y un poco más para los items del menu
Después del menú, otra de las tareas mas comunes es la creacion de un bloque o conjunto de bloques informativos que a su vez hacen el rol de secciones de navegación, ya saben un simple preview de las categorías mas importante del website, por lo general son una mezcla de texto informativo, imagen referente y link de acceso. Y claro un buen diseño visual logra atencion por parte del usuario, pero no hay nada mejor que el movimiento para hacer que sus ojos se enfoquen en ésa seccion, y ya que por motivos de accesibilidad el flash no es una opción, pues habra que recurrir a una buena maquetacion xhtml para el seo y base de la estructura, un poco de css para el aspecto visual y algo de javascript para la animación.
Pues bien comenzamos definiendo las secciones, para éste caso tomaré como ejemplo práctico un estudio fotográfico que provee 4 servicios principales de fotografia (publicitaria, artística, tarjetas y retratos)
Una de las tareas más comunes a la hora de diseñar el theme para drupal, es el desarrollo del menu principal, y muchas veces he visto por ahi la pregunta ¿ como poner el tag span en los items del menu de drupal ? o ¿como poner html en menú links del drupal? y la verdad es que a mí alguna vez tambien me hizo falta eso, ya que para diseñar menúes mas vistozos y flexibles, es necesario agregar más niveles a la estructura del menú, por lo general basta con un <span> adicional, pero en algunos casos se requiere de uno más, es por esto que despues de buscar algo de info por la web y halgo de ingenio logre darle una solucion bastante practica. Ya que por lo general para imrpimir el menu dentro del theme usamos una función similar a ésta :
<?php print theme('menu_links', $primary_links) ?>
El ideal al momento de editar la maquetación del menú, es hacerlo desde el archivo template.php de nuestro theme, para asi no tener que mezclar el codigo php con la maquetacion propia del theme.
¿ Y cómo se hace esto ?
Pues simplemente agregando una funcion de la siguiente forma
function phptemplate_ menu_links($primary_links){
}
De ésta manera al momento de aplicar la funcion theme("menu_links",...) drupal usará nuestra funcion en lugar de la que hay por defecto.
Porque mi amor es de color azul
Lo primero que hay que hacer es abrir nuestro fireworks crear un nuevo documento, preferiblemente uno en fondo transparente para ir viendo con mayor claridad el grafico , con dimensiones de 80x32.
Luego seleccionar la herramienta rectangulo redondeado 
y dibujar un cuadro para nuestro boton de 60x28 y en las propiedades de forma automática le asignan 2px de redondeado a las esquinas.
En caso no encuentren ese panel, pues van al menu Ventana / Propiedades de Forma Automatica y le dan click para que se muestre.
Le aplican un relleno radial de centro blanco y el extremo en color #666666, luego expandan un poco el relleno de manera que efecto sea un poco mas suave.
Luego aplicar un efecto de Sombra Interior en color blanco, un pixel de ancho, angulo de 270º y una opacidad del 65% :
Hace unos dias que me estaba paseando por la web vi algunos menus muy atractivos visualmente pero que dejaban mucho que desear en la manera en la que se implemento el codigo, y eso que eran de esos menus de pago en las que te dan opciones de personalizacion y demas.
Bueno el que mas me llamo la atencion fue uno que tenia ese look estilo windows vista tan vistozo, pero por ningun lado encontre un tutorial para darle el look estilo vista, asi que me anime a hacerlo yo mismo y para ello use mi freworks para el diseño de las imagenes de fondo y el dreamweaver para el xhtml y el css auqnue pueden usar cualquier otro editor.
Ahora si manos a la obra :
Lo primero que hay que hacer es definir el html, en mi caso use un div para enmarcar todo el menu pero lo pueden hacer de otra forma si gustan, aunque tambien tendran que retocar un poquito el css
Paseandome por la web me encontre con este precioso wallpaper que no pude resistirme a bajarlo y probarlo, la verdad es que es muy inspirador ademas de que ayuda a descanzar la vista por los tonos oscuros que posee y que a su vez hace un buen contraste con los varios iconos que tengo en mi escritorio.
A la par con la celebración del cumplimiento del segundo aniversario de
Drupal 6 RC2 ya esta disponible para su descarga, a pesar de que todavia existen algunos asuntos a corregir, ya existen algunos modulos que han sido actualizados para poder trabajar con drupal 6 y su nueva api, aunque algunos otros todavia no estan listo para su migracion a drupal 6, el estado de algunos modulos conocidos es el siguiente :
