lunes, 26 de diciembre de 2011

Crear menú horizontal desplegable simple HTML5 y CSS

Hola. Estaba tratando de hacer un menú con CSS de manera simple, tras mucho buscar e intentar pude hacer algo funcional y que cumplia lo que necesitaba: pasar el mouse sobre una opción para que aparescan otras subopciones bajo esta.

El resultado fue el siguiente:

El menú horizontal funcionando.

Asi que manos a la obra. Lo primero es hacer una lista desordenada con html, las cuales tendran las opciones de los menus y submenus.

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8" />
  <meta name="author" content="Fiko" />
  <title>Probando menu horizontal CSS</title>
  <link href="menu.css" type="text/css" rel="stylesheet" />
 </head>
 <body>
  <nav>
   <ul id="menu">
    <li><a href="">Opción 1</a>
        <ul>
         <li><a href="">Opción A</a></li>
         <li><a href="">Opción B</a></li>
         <li class="ultimo"><a href="">Opción C</a></li>
        </ul>
    </li>
    <li><a href="">Opción 2</a>
        <ul>
         <li class="ultimo"><a href="">Opción D</a></li>
        </ul>
    </li>
    <li><a href="">Opción 3</a></li>
    <li><a href="">Opción 4</a></li>
   </ul>
  </nav>
 </body>
</html>

Con este código, nos queda algo asi:

El menú sin estilos CSS.

Lo que nos queda es una lista con viñetas, y dentro de un item de la lista hay otra sublista. Lo que falta es configurarlo para que sólo las opciones de la lista principal sean visibles y se vean alineados horizontalmente. También que al pasar el cursor sobre una opción principal, aparescan las secundarias. Esto se hace con código CSS:


/* El color de fondo es solo para hacer más visible el menu */
body{
 background-color:black;
}


/* La etiqueta nav está disponible desde html5 y permite identificar
   las partes de un menu principal. Les doy una medida de ancho y margin:0 auto;
   para que aparesca centrada la lista con el menu 
*/
nav{
 width:1000px;
 height:60px;
 background-color:blue;
 margin:0 auto;
}

/* Es el ul principal, configurado para que no muestre viñetas y con las configuraciones para
   alinear al centro */
#menu{
 list-style:none;
 list-style-position:inside;
 width:800px;
 margin:0 auto;
 display:block;
 text-align:center;
}

/* Es cada opción principal del menu, los ordena horizontalmente con la propiedad float.
   Al tener un ancho fijo, se alinea su contenido al centro y con position:relative; permite
   que al pasar el cursor, aparescan las opciones bajo cada opción principal
*/
#menu li{
 float:left;
 padding:20px;
 width:150px;
 position:relative;
}

/* Es el submenu. Con display none permanece escondido y con position absolute le dice que aparesca
   bajo la opción padre. Con top y right se dice a que altura de la opción debe aparecer.
   Finalmente, con z-index:1; le dice que sobreponga a cualquier otro elemento el submenu.
*/
#menu li ul{
 list-style:none;
 list-style-position:inside;
 display:none;
 position:absolute;
 top:60px;
 left:-41px;
 z-index:1;
}

/* Es la ultima opción del submenu. con border-radius se da los bordes redondeados al final */
#menu .ultimo{
 border-radius:0 0 10px 10px;
 border:1px white solid;
 border-top:none;
}

/* Son las opciones del submenu. */
#menu li ul li{
 background-color:lime;
 padding:10px;
 width:170px;
 border-bottom:1px white dashed;
 border-left:1px white solid;
 border-right:1px white solid;
}

/* Configuración al pasar el mouse ensima de una opción principal */
#menu li:hover{
 background-color:lime;
 border-left:1px white solid;
 border-right:1px white solid;
}

/* Hace visible el ul del submenu al pasar el mouse ensima de una opción principal */
#menu li:hover > ul{
 display:block;
}

/* Configuración de como se veran los enlaces */
#menu a, #menu a:visited{
 color:white;
 text-decoration:none;
 font-family:sans-serif;
 font-weight:bold;
 outline:none;
}

#menu a:hover{
 text-decoration:underline;
}

Ahora se tiene un menu simple y configurado solo con CSS y HTML5, de manera que es ligero y de facil configuración para adaptar a cualquier proyecto.

Links:

martes, 6 de septiembre de 2011

Quitar propiedad "oculto" y "solo lectura" a carpetas afectadas por virus en Windows con el comando Attrib

Hace un par de meses, se me infectaron dos memorias USB con un virus. Pude borrar el virus, el problema fue que todas las carpetas en las memorias quedaron como solo lectura y ocultas. Viendolo así, no es gran problema, click derecho y cambiar las propiedades.


El problema es que no deja cambiar las propiedades y hay que hacerlo por consola con los siguientes pasos:

1. Identificar la unidad del dispostivo: Busca en mi pc (o en mi equipo si usas Windows 7) la letra de la unidad de tu dispositivo, en este caso, la unidad H:.


2. Acceder a la consola de windows: Lo puedes hacer haciendo click en inicio y escribir CMD.


3. Acceder a la unidad con problemas desde la consola de windows: Esto es fácil, sólo hay que escribir la letra de la unidad y :, en este caso, H:.


4. Utilizar el comando Attrib para cambiar las propiedades "a la fuerza": Ahora en la consola debes ingresar este codigo "attrib *.* /S /D -R -S -H", con esto se aplicaran los cambios en todas las carpetas y archivos en la ruta, y se les quitaran los atributos de solo lectura, oculto y archivo de sistema. El comando se demora un poco en cambiar los atributos.



5. Revisar la unidad desde el explorador de windows, veran que ahora el mundo vuelve a ser maravilloso :D.


Links:

viernes, 12 de agosto de 2011

Guia de SEO para principiantes de Google

Hace un par de días, navegando por internet, me encontre de casualidad con este manual. Me llamo la atención porque queria mejorar la posición de una página en google y no sabia cómo hacerlo, así que me puse a leerlo y realmente está más que recomendado, ya qué explica facilmente conceptos que una persona novata como yo no domina y además la forma en que está creado el manual (con un ejemplo de página que quiere ser indexada) es muy explicativa.

Cómo dato curioso, este manual fue hecho para los trabajadores nuevos de google tuvieran una idea de como trabaja el buscador, asi que imaginen la calidad que tiene. Eso sí, no enseñan ningún truco milagroso ni nada por el estilo.

En fin, sin más palabras les dejo el manual.

Link:

lunes, 18 de julio de 2011

Obtener la cantidad de horas entre dos fechas en mysql

En un trabajo de la universidad hace poco, tuve que calcular el costo del arriendo de un espacio de un condominio (como una cancha o un club house) a partir de la cantidad de horas que duró el arriendo y el costo por hora fijado para ese espacio.
Todo esto se puede resumir en el siguiente modelo de datos:


La idea es hacer un select para obtener por cada arriendo que persona lo arrendo, la fecha de inicio del arriendo, la fecha de termino del arriendo, el precio por hora, la cantidad de horas que hay entre el inicio del arriendo y la de fin y finalmente, el total a pagar.

El problema es que es necesario calcular la cantidad de horas que hay entre las fechas de inicio y termino para poder calcular el precio final que tendra el arriendo.
Para esto, se puede utilizar las funciones TIMEDIFF y EXTRACT incluidas en mysql.
Con la funcion TIMEDIFF se obtiene la diferencia calculada en horas entre dos fechas. Esto es bueno, pero también malo para lo que queria realizar, ya que TIMEDIFF retorna en formato de hora (ejemplo: hh:mm:ss).
Aqui es donde entra en acción la función EXTRACT. Esta función permite extraer el año, el mes, el día, la hora, minutos o segundos de un valor en formato DATETIME.

Entonces, hay que extraer la parte hora de la diferencia entre la fecha de inicio y termino.
La sentencia sería la siguiente:

SELECT ae.idArriendoEspacio as 'id arriendo', p.rut as rut, p.nombre as nombre, p.apellido as apellido, e.descripcion as descripcion, ae.fecha_inicio as inicio, ae.fecha_termino as termino, e.precio_hora as precio, EXTRACT(hour from TIMEDIFF(ae.fecha_termino, ae.fecha_inicio)) as horas, EXTRACT(hour from TIMEDIFF(ae.fecha_termino, ae.fecha_inicio)) * e.precio_hora as 'monto total' 
FROM ArriendosEspacio ae, personas p, espacios e
WHERE ae.idpersona = p.idpersona and ae.idespacio = e.idespacio;

Como resultado obtenemos algo asi:


Se puede observar que por cada arriendo se calcula las cantidades de horas y el monto total a pagar.

Links:

Generar proyecto en genexus en modo '-ignoreresume'

Muchas veces, cuando trabajaba con transacciones de GeneXus X, me aparecia un error que me recomendaba usar el modo ignoreresume para poder generar el proyecto. Por más que buscaba, no sabia donde tenia que poner la opción, hasta que de casualidad encontré como hacerlo.

  1. Seleccionar Preferences en las opciones del navegador del Knowledge Base.


  2. Una vez selecionada Preferences hay que navegar hasta encontrar Default (o el generador que utilizes) y hacerle un click.

  3. Una vez aqui, revisar en las propiedades del generador y abrir la opción Build Process y ahi abrir Advanced y agregar al final de Reorganization Options y Create Database Options la opcion -ignoreresume y listo! :D