Hacer un menú desplegable (html+css)
Filed under: diseño web general, herramientas y utilidades, trucos y consejos web
Muchas veces nos encontramos con la necesidad de incluir distintos apartados dentro de un mismo elemento del menú,
en estos casos nos puede venir muy bién un menú desplegable que muestre los submenus cuando el cursor pasa por encima del menú.
Es muy fácil hacerlo con CSS, usando las etiquetas <ul> y <li> anidadas.
Veamos el código HTML que tendremos en nuestra página (index.html por ejemplo):
” <ul class=”menu_color”>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5
<ul>
<li>menu 5.1</li>
<li>menu 5.2</li>
<li>menu 5.3</li>
</ul>
</li>
<li>menu 6</li>
<li>menu 7</li>
</ul> ”
Ahora veamos el código CSS que hará que el menú se despliegue y tenga el aspecto que deseamos:
ul.menu_color
{
list-style:none;
background-color:#ffffff;
padding-left:5px;
padding-right:5px;
padding-top:4px;
padding-bottom:4px
}
ul.menu_color li
{
display:block;
position:relative;
padding-left:5px;
padding-right:5px;
padding-top:4px;
padding-bottom:4px;
background-color: #ffffff;
}
ul.menu_color ul
{
position:absolute;
left:51px;
top:-1px;
display:none;
list-style:none;
}
ul.menu_color li:hover
{
background:#ffffff;
color:#E55F28;
filter:alpha(opacity=80);
opacity:0.8;
zoom: 1;
}
ul.menu_color li:hover > ul
{
display:block;
width:150px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
left:0px
}
ul.menu_color> li > ul /* Solo para los ul debajo de los li de primer nivel. */
{
position:absolute;
left:-41px;
top:19px;
display:none;
list-style:none;
}
ul.menu_color> li:hover > ul /* Solo para los ul debajo de los li de primer nivel. */
{
color:#000000;
background:#ffffff;
}
ul.menu_color > li /* Sólo para li de primer nivel */
{
display:inline;
}
Si has puesto correctamente este código en tu página HTML y en tu hoja de estilos CSS, ya tienes un menú desplegable en formato horizontal.
Si quieres darle un aspecto más bonito o acorde con el diseño de tu página, debes modificar el CSS para añadir tus colores, tipografias, etc.
También es posible hacer que el menú se despliegue hacia un lado y no hacia abajo, para ello tendrás que modificar la posición que indica el CSS.
Espero que te sirva de ayuda. Puedes ver ejemplos en http://dissenyaweb.com/es_paginas_web/ejemplos_diseno_paginas_web.html
Evitar URL’s duplicadas
Es común en casi todos los sitios web que se pueda acceder con o sin las tres w al inicio de la URL.
Para evitar que Google interprete las dos direcciones como páginas distintas, es conveniente indicarle que se trata de la misma página.
Para ello debemos añadir la siguiente etiqueta en nuestro header (dentro de la etiqueta <head>):
<link rel="canonical" href="http://www.dissenyaweb.com" /> De este modo, todos los enlaces internos que tienes en tu página apuntan hacia la misma home y no se dejan de contabilizar algunos de ellos que se perdían por duplicidad.
Ejemplo metatags
Filed under: diseño web general, posicionemiento buscadores SEO, trucos y consejos web
Aquí os dejo un ejemplo de los metatags que yo utilizo y que hasta la fecha me han dado my buenos resultados:
<meta name="Title" content="Disseny de pàgines web"/> <meta name="Description" content="Dissenyaweb és una empresa de disseny de pàgines web especialitzada en disseny exclusiu de pàgines web fetes a mida"/> <meta name="Keywords" content="disseny web, pàgines web, pagina web, pagines web págines web, disseny de web, disseny pàgines web, disseny websites, disseny llocs web, disseny de web, disseny gràfic web, diseny web, disseny pàgina web"/> <meta name="Language" content="ca"/> <meta name="Distribution" content="Global"/> <meta name="robots" content="index,follow,all"/> Recordar que siempre que tienen que ir en el header, dentro de la etiqueta <head> Espero que sean de utilidad!!
Redireccionamiento mediante meta html
Filed under: herramientas y utilidades, trucos y consejos web
A veces nos puede interesar hacer que una página cambie de dirección automáticamente cuando un usuario accede a ella. Para ello podemos usar la siguiente etiqueta meta:
<META HTTP-EQUIV=”Refresh” CONTENT=”3; URL=http://www.dissenyaweb.com”>
Poniendo esta etiqueta entre <head> y </head> de nuestra página conseguiremos que en 3 segundos redireccione automáticamente a http://www.dissenyaweb.com
Veamos un ejemplo de como sería la típica página de “En 3 segundos comenzará la descarga”:
<html>
<head>
<title>ejemplo redireccionamiento meta html</title>
<META HTTP-EQUIV=”Refresh” CONTENT=”3; URL=archivo.zip”>
</head>
<body>
En 3 segundos comenzará la descarga. Si no empieza, pulsa <a href=’archivo.zip’>aquí</a>
</body>
</html>
El “archivo.zip” debe estar en el mismo directorio que el archivo .html para que este ejemplo funcione. Evidentemente podemos poner la ruta que queramos.
Esta forma se llama “meta refresh”
Si nos interesa consrvar el pagerank de la antigua página y que este sea heredaro por la nueva, tendremos que utilizar otras técnicas como por ejemplo
301 Redirect:
Un “301 redirect” es la forma más eficiente y eficaz para redireccionar urls. De echo es la opción que más recomiendan los buscadores. Esta técnica es prácticamente transparente al usuario (sólo puede ver el cambio de url en la barra de direcciones de su navegador), y además es el método más rápido.
Este tipo de redirección se implementa en un archivo .htaccess.
Cuando un visitante pide una página que se encuentra en un directorio concreto, el servidor Apache lo primero que hace es comprobar si hay un archivo .htaccess en ese directorio. Éste archivo contiene información específica sobre cómo manejar errores, opciones de seguridad y de redireccionamiento entre otras.
El código 301 se interpreta en el servidor como “movido permanentemente”. Antes que nada necesitarás un archivo .htaccess en el directorio donde estan alojadas todas las páginas. Puedes crear uno con el bloc de notas si no existe. Nota: Fíjate en poner un “.” al principio del nombre de archivo. Este archivo no tiene extensión.
El código de redireccionamiento es así:
redirect 301 /tutoriales/viejo.htm http://www.webtutoriales.com.com/tutoriales/nuevo.htm
Así de simple, guarda el archivo y súbelo al servidor. Para probarlo deberías acceder a la dirección vieja y instantáneamente serás redireccionado a la nueva. Te recordamos que debes poner la ruta completa de la nueva página (siempre empezando con “http://…”) tal y como está en nuestro ejemplo.
Puedes ver un ejemplo de esto en: http://www.webtutoriales.com/
Otra opción seria para hacer un redirect 301 seria mediante PHP:
Redirección 301 con PHP
La página que vamos a redireccionar la reemplazamos por un archivo PHP con el siguiente código:
<?php
header("HTTP/1.1 301 Moved Permanently");
header("location:http://www.neoideas.com.mx");
?>Es importante que este código esté hasta el principio del archivo php (en la primera línea).
Menú horizontal vs vertical
Podemos dividir los distintos tipos de diseño que podemos elegir en función de la posición del menú principal.
Básicamente destacaría las páginas con menú horizontal y las páginas con menú vertical.
Normalmente los menús horizontales encajan bien con páginas de muchos apartados y que necesiten ordenar muy bien los módulos de contenido. Este tipo de menú nos permite diseñar páginas muy largas donde el usuario va a hacer scroll para ir leyendo todos los contenidos.
Veamos un ejemplo:
Los menús verticales nos pueden interesar cuando tengamos menos elementos a mostrar en el menú o sea, cuando la página tenga menos apartados. Si queremos hacer un diseño donde el usuario no tenga que hacer scroll para ver todo el contenido nos vendrá muy bien este tipo de menú. Si es así, daremos un alto máximo a la página de 600px (de esta manera el 90% de los usuarios van a ver el contenido entero sin necesidad de hacer scroll)
Veamos un ejemplo:
Encuestas
Cargando ...