Menus basico con Listas y CSS

Creación de menús básicos con listas utilizando CSS.

En la red existen numerosos ejemplos de como crear menús utilizando hojas de estilo (CSS) pero muy pocos de ellos explican el proceso de creación es decir los razonamientos que hay que hacer para poder realizar estos elementos.

En estos apuntes intentaré explicar el proceso de elaboración de un menú de este tipo, razonando la utilización de las diferentes propiedades.

El uso de listas para esta función se enmarca dentro de las directrices de accesibilidad web y se adapta perfectamente al concepto de Web 2.0.

Aclaremos antes de empezar que lo que se va explicar a continuación será válido y funcionará si se utiliza el

DTD adecuado que para todos los temas de CSS de grafikas.es son el XHTML Transitional y el Stricttambién son válidas con XHTML 1.1. Cualquier otro DTD o la ausencia del mismo en el documento puede hacer inservible lo aquí explicado. No se ha intentado mantener compatibilidad con IE5 dado que actualmente no es usado por más de un 1% de los internautas. Aunque la mayoría de lo explicado funcionará también en este navegador.

Menú vertical básico utilizando listas desordenadas y CSS.

Empezaremos por el caso más simple de todos. Nuestra intención es crear un menú con diferentes enlaces, unos encima de otros, de forma que al situar el ratón encima de los enlaces estos cambien el color de forndo.

  • Creamos (dentro del cuerpo del documento,por supuesto) la lista desordenada con los enlaces que en este caso serán enlaces a ninguna parte. El código será el siguiente:
<ul>
<li><a href=»#noir» title=»Ir a enlace1″>Enlace1</a></li>
<li><a href=»#noir» title=»Ir a enlace1″>Enlace1</a></li>
<li><a href=»#noir» title=»Ir a enlace1″>Enlace1</a></li>
<li><a href=»#noir» title=»Ir a enlace1″>Enlace1</a></li>
</ul>

El resultado del código anterior se mostraría asi en el navegador:

Esto podría ser un menú perfectamente válido, pero no se parece a lo que estamos buscando así que empezaremos a darle forma.

  • A continuación vamos a cambiar el tipo de letra de los enlaces, quitarles el subrayado y ponerles un color de fondo. Para esto utilizaremos hojas de estilo en cascada (CSS). El código se puede colocar en el encabezado del documento XHTML utilizando la etiqueta <style type=»text/css»></style> o en un archivo aparte con la extensión «css» (en este caso no se pone la etiqueta <style>) y en la cabecera del documento HTML pondríamos lo siguiente:
<link href=»estilos/estilo.css» rel=»stylesheet» type=»text/css» />

 

En el primer caso el código a poner en la cabecera (head) del documento XHTML es:

  1. <style type=»text/css»>
  2.  li a {  
  3. /*Mediante el selector li a, indicamos que estas propiedades
  4. serán aplicadas a todos los enlaces que están dentro de una lista li*/
  5.        font-family:»Trebuchet MS»,arial,verdana,helvetica;
  6. /*Esta propiedad establece el tipo de letra dando 4 opciones*/
  7.        text-decoration:none; 
  8. /*Esta propiedad es la que elimina el subrayado de los enlaces*/
  9.        background:#ff9;
  10. /*Esta propiedad cambia el color de fondo de los enlaces*/
  11.  }
  12. </style>
  • Como vemos siguen apareciendo los puntos (viñetas o topos) a la izquierda de nuestros enlaces, y esto no lo queremos por lo que utilizaremos la propiedad list-style-type que aplicaremos al selector ul, añadiendo el siguiente código a nuestro estilo:
ul {list-style-type:none;}

Podemos observar como nuestro «menú» se encuentra separado del borde de la página, esto es debido al margen interno que de forma automática se aplica a los elementos ul, para remediar esto utilizamos la propiedad padding que es la que controla los márgenes internos de los elementos, como en otras ocasiones resuta que Internet Explorer va por su cuenta y esto no le vale, deberemos (desgraciadamente) utilizar la propiedad margin-left (margen izquierdo) y darle valor 0. Por lo tanto añadimos al selector ul esta propiedad quedando de la siguiente manera:

ul { list-style-type:none;padding:0px;margin-left:0px;}

 

Ya hemos hecho lo más dificil, ahora vamos a cambiar el color al texto de los enlaces (utilizaremos la propiedad color) y vamos a separar los textos de los bordes y entre ellos (utilizando la propiedad padding). Es decir añadiremos al selector «a» esas propiedades.

  1. li a {  
  2. /*Mediante el selector li a, indicamos que estas propiedades
  3. serán aplicadas a todos los enlaces que están dentro de una
  4. lista li*/
  5.        font-family:»Trebuchet MS»,arial,verdana,helvetica;
  6. /*Esta propiedad establece el tipo de letra dando 4 opciones*/
  7.        text-decoration:none; 
  8.  /*Esta propiedad es la que elimina el subrayado de los enlaces*/
  9.        background:#ff9;
  10. /*Esta propiedad cambia el color de fondo de los enlaces*/
  11.        color:#fff;    
  12.  /*Color del texto blanco */
  13.        padding:4px 10px;
  14. /*Le ponemos «padding» superior e inferior de 4px y derecho e
  15. izquierdo de 10px;*/
  16.        font-size:12px;
  17.  /*De propina y para leerlo mejor aumentamos el tamaño del texto
  18. a 12px*/
  19.     }

¿Arrgggg! ¿qué sucede? (si usa ie nada, pero debería cambiar de navegador), nada que no se pueda remediar, resulta que el padding hace que se monten unos con otros ya que los elementos » a» son de línea y esto es normal en ellos, por lo tanto vamos a convertirlos a elementos de bloque (además nos iba a hacer falta si queriamos que al pasar por encima el ratón cambiara todo el fondo) para ello utilizamos la propiedad display con el valor block.

¿Uy! ahora nos ocupa todo el ancho de página y además en ie6 se separan los elementos (normal, los elementos de bloque salvo indicación en contra hacen esto,lo primero no lo de ie6) ambas cosas las vamos a solucionar indicando un ancho al elemento » a» mediante la propiedad width (el ancho para un menú vertical se establece normalmente entre 120px y 200px ). al hacer esto el texto no quedará centrado si lo queremos centrado deberemos utilizar la propiedad text-align con el valor center para las etiquetas a.

Muy bien, recordar que podemos centrarlo simplemente añadiendo la propiedad text-align:center, ahora vamos a hacer que al pasar el ratón sobre los enlaces cambie el color de fondo y del texto (propiedades background y color). Para ello utilzamos la pseudo clase :hover junt al selector «a» de la siguiente manera:

li a:hover {background:#fc0;color:#fff;}

Creo que lo he hecho de la manera más simple de todos modos se puede hacer por otros caminos. Lo importante es seguir un proceso que nos permita entender que hacemos y porque lo hacemos para poder así desarrollar nuestros propios menús.

De esta forma podemos intentar añadir bordes al menú anterior entre los elementos del menú. Si lo pensamos parece lógico que utilizando una propiedad que permita poner bordes a un elemento será suficiente. Veamos que pasa si añadimos al selector de los enlaces la propiedad border-top:1px solid black.

Nos quedaría quitar la línea superior o bien añadir una línea en el enlace inferior (utiliazaríamos una clase) y utilizar colores y tamaños que nos gustaran.

Espero que sirva para que podais crear vuestros propios menús sin copiar ni pegar código, razonando por vosotros mismos.

Menú horizontal

Ahora se nos ocurre hacer un menú horizontal, es decir que los enlaces vayan uno al lado de otro no encima. ¿qué debemos hacer? pues preguntarnos si existe alguna propiedad que disponga los elementos de esa manera, uno al lado de otro. para las listas la propiedad display con el valor inline hace esto, pero aquí no sirve ya que al haber puesto los enlaces como elementos de bloque (display:block;) estos siguen unos encima de otros por lo que la opción que nos queda es utilizar la propiedad float (flotar) con los elementos li ya que nos permite controlar como se coloca un elemento respecto al siguiente, de esta forma eligiendo el valor left cada uno de los elementos de la lista se coloca a la izquierda del siguiente quedando todos en línea.

Por lo tanto debemos añadir a nuestro estilo la siguiente línea y el menú ya quedará horizontal (y deberemos quitar o cambiar el ancho asignado a las etiquetas a, si vemos que no cabe en la página;):

li {float:left;}

La verdad que es simple, sólo añadir una línea pero lo importante es razonar por qué.

Repito que lo que se pretende es crear nuestros propios menús sin copiar ni pegar código, razonando por vosotros mismos.

Los problemas no terminarán aquí ya que si queremos el menú centrado en la pantalla o que al cambiar el tamaño del navegador no se nos descoloque tendremos que añadir alguna cosa.

Veámoslo con un ejemplo. Vamos a intentar centrar nuestro menú en la pantalla.

Tengamos en cuenta que el elemento «ul» al ser un elemento de bloque ocupa por defecto todo el ancho de la pantalla, entonces podríamos utilizar la propiedad text-align con el valor center que haría que lo que esté dentro de la etiqueta » ul» se sitúe centrado

ul {padding-right: 0px; padding-left: 0px; padding-bottom: 0px; padding-top: 0px; list-style-type: none;width:480px;margin: 0px; }

Pero no, no funciona porque los elementos li tienen la propiedad float.¿Entonces?¿qué podemos hacer? Una posible solución sería establecer unas medidas a nuestro menú; pondremos 100px a cada enlace y 480px a la lista ya que tenemos 4 enlaces de 100 con un «padding» total de 20 cada uno; y centrarlo en la página mediante márgenes automáticos en el elemento ul. Esto no funciona en IE6 y necesitaremos establecer para el elemento que contenga la lista (puede ser body, div, li etc..) la propiedad text-align con el valor center

ul {padding-right: 0px; padding-left: 0px; padding-bottom: 0px; padding-top: 0px; list-style-type: none;width:480px;margin: auto; }
body {text-align:center;}
li a { padding-right: 10px; display: block; padding-left: 10px; font-size: 12px; background: #ff9; padding-bottom: 4px; color: #000; padding-top: 4px; font-family: «trebuchet ms»,arial,verdana,helvetica; text-decoration: none;width:100px; }

Como se comprueba, el hecho de que IExplorer no respete las especificaciones CSS supone una pérdida de tiempo y muchos quebraderos de cabeza. Deberíamos utilizar otros navegadores y así forzar a Microsoft a respetar las normas.

Windows Live Writer con FlatPress

Los productos de Microsoft suelen recibir muy mala critica. Sin embargo Windows Live Writer ha sido bien recibido por los bloggers siendo una de las herramientas de edición de blogs por excelencia.

Y bien, como prometí en la anterior entrada pondré todo sobre como usar WLW con WordPress, la cosa es muy sencilla.

  1. Primero que nada descarga Windows Live Writer y instálalo.
  2. Descarga el plugin Remote Posting.
  3. Descomprime y sube el plugin via FTP a la carpeta fp-plugins.
  4. Habilitalo desde el panel.
  5. Abre Windows Live Writer y selecciona el tipo de blog que usas, en este caso tienes que elegir la opción “otro servicio de blog”.
  6. Rellena con la información de tu blog.
  7. Espere a que se configure tu cuenta.
  8. Te preguntará que si quieres que se descargue el theme de tu blog, dale que «Si», esto te permitirá ver el post en tiempo real mientras la estás editando.

Cuando terminas de escribir el post y estas contento con todo, presiona el boton finalizar.

Supertutorial de Opera

Este tutorial está dedicado especialmente a aquellas funciones útiles que probablemente no sabías que se podía hacer con el navegador Opera.

Chat en Opera: Chatea con tu cuenta de Windows Live en Opera

Sino quieres salir del navegador para abrir el mensajero o simplemente tu PC no tiene los recursos suficientes como para abrir otra aplicación aparte del navegador, este tuto es para ti. Voy a enseñarte como chatear con tus contactos del Messenger desde Opera.

  1. Ve a cuentas de correo y chat.
  2. Te dice que necesitas crear una cuenta de correo, ponle que si.
  3. Selecciona Chat (IRC).
  4. Deja vacía esta parte.
  5. Aquí pone el nombre que va a aparecer como Nick.
  6. En red IRC escoge irc.net y presiona terminar.
  7. Finalmente aparece esta ventana, ciérrala.
  8. En zona de enviar mensajes escribe lo siguiente: account add msn [email protected] tupassword.
  9. Si hiciste bien el paso anterior verás un mensaje de que tu cuenta fue agregada correctamente, ahora coloca y envía lo siguiente: set-charset-iso-8859-1. Esto te ayudará a que no haya problemas con los caracteres latinos.
  10. Ahora si ponte online mediante el comando account on.

Opera Mail: Lee tu correo en Opera

¿Deseas que Opera te avise cada vez que recibes un correo nuevo?, realiza este tuto.

  1. Realiza los dos primeros paso del tuto anterior. Selecciona correo electrónico.
  2. Rellena el formulario con tus datos, esto te creará una cuenta en Opera.
  3. Rellena el formulario con los datos del correo que quieres revisar, Selecciona IMAP si quieres enviar y recibir correo, y asegúrate de que tengas activada esta función en tu cuenta de correo.

Presiona terminar. En Opera se saltará un pop-up y se abrirá el panel lateral.

Aquí puedes ver como luce tu bandeja de entrada (buzón).

Opera Unite: Comparte archivos online

¿Estás en la escuela o en el trabajo y olvidaste un archivo importante? Accede a tu PC desde un simple tecleo de la dirección web.

  1. Presiona el icono de Opera Unite situado en la barra de estado.
  2. Selecciona habilitar Opera Unite.
  3. Rellena el formulario con tus datos y da clic en siguiente.
  4. Selecciona un nombre para tu PC, y presiona terminar.
  5. Se abrirá tu dirección web desde la cual podrás administrar las aplicaciones que deseas compartir.
  6. Selecciona File Sharing y presiona el botón iniciar. Se abrirá un cuadro de dialogo desde el cual puedes elegir los archivos deseas compartir.
  7. Haz un poco de scroll en el navegador y verás la siguiente pantalla, ahí puedes elegir si deseas colocar una contraseña para tu página o hacerla pública.
  8. Haz clic en el icono de Opera Unite y presiona configurar si deseas terminar el servicio.

Opera Link: Conserva tus marcadores en línea

¿Formateaste tu ordenador y perdiste tus marcadores?, ¿Deseas acceder a tus marcadores desde el móvil pero tus marcadores están en tu ordenador de escritorio? NO te preocupes Sincronízalos y recupéralos con Opera Link.

  1. Haz clic en el icono de Opera Link.
  2. Nos aparece la siguiente pantalla, haz clic en siguiente.
  3. Rellena el formulario con tu cuenta de Opera si ya tienes una (si no tienes cuenta presiona “no tengo una cuenta” y rellena el formulario).
  4. Selecciona las opciones que deseas sincronizar, presiona terminar. Tus marcadores se sincronizarán online en unos instantes.
  5. Para detener el servicio haz clic en el icono de Opera Link y selecciona configurar.
  6. Para acceder a tus marcadores y sincronizarlos con Opera desde cualquier lugar, accede a http://link.opera.com/ e introduce tu nombre de usuario y contraseña.

Cambiar de Piel

¿Ya te aburriste de la apariencia de Opera? Pues Opera puede cambiar de piel por sino sabías.

  1. Dirígete a menú y selecciona apariencia.
  2. Selecciona buscar más apariencias. Allí encontrarás pieles online para Opera, se instalarán automáticamente cuando hagas clic en una.

Speed dial: Acceso rápido a tus páginas preferidas

Agiliza la navegación mediante el marcado rápido.

  1. Haz clic en alguna viñeta e introduce una url.
  2. Ve agregando las que necesites, por defecto caben nueve, pero presionando el botón configurar marcado rápido puedes hacer que entren más.

Opera Turbo: Más velocidad cuando la red está lenta

¿Tu red se puso lenta?, ¿Tienes una conexión inferior a 56k?. Acelera la navegación mediante la compresión de imágenes.

  1. Ve a la barra de estado y presiona el icono de Opera Turbo.
  2. Selecciona la Opción que más te convenga.

Opera Notas: Toma nota sin salir del navegador

¿Necesitas tomar nota rápidamente?, ¿Te desespera abrir una aplicación para algo tan simple? Usa las notas de Opera.

  1. Despliega el panel lateral desde el botón situado en la parte inferior izquierda.

Bien eso es todo, al menos en este post, sólo tenia ganas de escribir esto que me pareció puede ayudar a más de alguno :).

Las diez fórmulas de Excel más utilizadas

Últimamente trabajo mucho con Excel. El análisis y limpieza de datos es una de las tareas que más requieren de esta herramienta de cálculo. Si este es tu caso, te habrás dado cuenta de que tienes que estar echando mano de las fórmulas cada cinco minutos.

Hoy en día cualquier persona termina usando Microsoft Excel por una u otra razón. Sin duda es uno de los programas más potentes y flexibles del mundo. No obstante, hay que andar con cuidado. Este programa puede convertirse en una fuente de errores comunes o trampas mortales. Por eso, hoy te traigo un pequeño tutorial sobre las fórmulas de Excel más utilizadas. ¿Estás preparado? ¡Vamos allá!

1. SUMA

La primera de las fórmulas de Excel más utilizadas es la SUMA, y es elemental que conozcas como utilizarla. Si no la has usado hasta ahora creo que ya puedes darte por satisfecho porque verás cómo te ahorra tiempo. Estas ayudas, unidas a los atajos de teclado, pueden ser de gran ayuda.

SUMA te permite, tal como su nombre lo indica, sumar un grupo de celdas, o incluso filas y columnas enteras!

=SUMA(A1:A10), =SUMA(A:A), =SUMA(A1:Z10)

2. CONTAR

Este resultado te permite contar la cantidad de celdas en una selección que tienen números. Las celdas vacías o con texto son ignoradas. Muchas veces tenemos planillas con datos incompletos y se necesita contar solamente los datos y no el total de celdas. En esos casos sirve muchísimo!

=CONTAR(A1:B10), =CONTAR(A:A)

3. CONTARA

Similar a CONTAR pero cuenta no solamente las celdas con números sino todas las celdas no vacías (es decir, pueden contener también texto).

=CONTARA()

4. CONTAR.SI

Esta fórmula permite contar elementos que cumplen un cierto criterio. Este criterio puede ser por ejemplo que las celdas sean iguales a un cierto valor, o que sean mayor/menos que un valor, o que sean iguales que algún texto, etc. Veamos algunos ejemplos:

Cuenta la cantidad de celdas con un número mayor que cero:

=CONTAR.SI(“A1:B10”, “>0”)

Cuenta la cantidad de celdas con la palabra “azul”:

=CONTAR.SI(“A1:B10”, “azul”)

5. SI

Esta fórmula te permite tener un valor u otro en la celda dependiendo de una cierta condición. Las condiciones son similares a lo que se puede hacer con la fórmula CONTAR.SI. Por ejemplo, podemos tener las notas de un alumno en un listado, y si el promedio es mayor o menor que un cierto límite, podemos escribir “aprobado” o “reprobado” para el alumno:

=SI(A1 > 0, “VALOR POSITIVO”, “VALOR NEGATIVO”)

6. BUSCAR

Existen diferentes fórmulas de buscar en excel. Puedes hacerlo tanto por columnas como por filas. Cada una de estas variaciones tiene una serie de complejidades. Vamos a verlas.

7. BUSCARV

Permite buscar un valor específico en la primera columna de una tabla, y retornar el valor en la misma fila para otra columna diferente. Esto suena algo abstracto así que lo voy a ilustrar con un ejemplo.

Tenemos un listado con alumnos y sus notas en cada evaluación. Queremos obtener la nota que el alumno “PEDRO” obtuvo en la tercera evaluación, entonces utilizamos la siguiente fórmula:

=BUSCARV(“PEDRO”, A1:Z100, 10, FALSO)

Notar que el “FALSO” se ingresa para indicar que queremos una búsqueda exacta, es decir sólo queremos el valor para la entrada con índice PEDRO. Notas también que la primera columna que se cuenta es la primera, por eso la que buscamos (la tercera evaluación) es la columna número 4.

8. BUSCARH

Similar a BUSCARV pero utilizando la misma analogía en sentido horizontal. Es decir buscamos un valor en la primera celda de la tabla, y luego obtenemos el valor de la celda ubicada en la misma columna que nuestro índice, con el número de fila ingresado:

Ejemplo, tenemos las ventas de distintos productos, y queremos saber el total que se vendió para el producto “jabón” en el cuarto mes:

=BUSCARH(“JABON”, A1:C10, 4, FALSO)

El uso de “FALSO” es igual al caso anterior. La cuenta de las filas parte desde la fila con los encabezados, por lo que el tercer mes corresponde al índice 4.

9. CONCATENAR

Esta fórmula nos permite unir dos o más cadenas de texto en una sola celda. Por ejemplo tenemos una columna “nombres” y otra “apellidos”, y queremos crear una tercera columna llamada “nombre completo”. En este caso queremos unir el nombre con el apellido, y además poner un espacio entremedio. Se haría de la siguiente manera:

=CONCATENAR(“A1”, “ “, “B1”)

10. TRANSPONER

Hay muchas ocasiones en las que necesitamos cambiar o girar celdas. Para ello, puede copiar, pegar y usar la opción de transposición. Pero al hacerlo se crean datos duplicados. Para evitarlo, puede escribir una fórmula en lugar de utilizar la función TRANSPONER. Por ejemplo, en la siguiente imagen, la fórmula =TRANSPONER(A1:B4) toma las celdas A1 a B4 y las organiza horizontalmente.

Estas son algunas de las funciones más utilizadas de Excel. ¿Te han ayudado? ¿Alguna vez has utilizado una de ellas? Si estás aprendiendo a usar esta herramienta espero que este pequeño tutorial te haya servido.