Hacer un menú desplegable (html+css)

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /usr/home/dissenyaweb.com/web/blog/diseno_web/wp-content/plugins/highlight-source-pro/highlight_source_pro.php on line 128

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

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

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:

ejemplo 1

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:

Cómo diseñar una web

Primera parte: pasos previos:

Si queremos hacer buenas páginas web, estas tendrán que ser estéticas, usables, funcionales y atractivas. Antes que nada nos tendremos que plantear que tipo de cliente tenemos delante y en que sector se va a ubicar la página. La linea de diseño que elijamos dependerá básicamente de esto.

No esta demás navegar un poco por páginas que puedan ser similares a la que vamos a hacer para ver ejemplos y coger ideas que después combinaremos.

Muy importante antes de empezar ningún trabajo es la reunión inicial con el cliente donde tendremos que conseguir que él tenga clara la estructura que quiere para la página y que nos entregue por escrito un esquema de los apartados con menús y submenús que aparecerán.

Evidentemente nosotros asesoraremos y ayudaremos a configurar este esquema, pero es fundamental que la estructura final esté decidida o como mí­nimo  aprobada por el propio cliente (esto nos ahorrará muchas horas de cambios y modificaciones). En esta fase podemos pedir y ayudar a elaborar los primeros textos que irán en cada apartado, aunque no es imprescindible ya que podremos empezar a trabajar con texto simulado que posteriormente substituiremos por el definitivo.

Una buena pregunta a hacer al cliente en esta primera reunión es si hay alguna página de temática similar  o que le agrade especialmente, esto nos dará muchas pistas para acertar al primer tiro con la linea de diseño.

No hace falta decir que en esta fase se habrá acordado ya por escrito  el presupuesto y plazo de entrega aproximado para el proyecto.

Pues bien, después de una primera reunión y de pensar un poco desde nuestro estudio (o desde casa) tenemos que tener claros los siguientes conceptos para poder empezar a diseñar:

-Que tipo de cliente tenemos delante (a qué se dedica)
-Como son las páginas similares del mismo sector
-Que páginas de ejemplo le gustan
-Esquema o estructura de apartados y menus

Con esto ya podemos empezar a pensar como serí  la página: Donde colocaremos cada elemento, que tipografia usaremos, que colores, etc.

Para conseguir un buen resultado aconsejo no empezar a diseñar con programas de código tipo Dreamweaver o similar, en esta fase toca diseñar con programas de diseño gráfico como Frehand, Photoshop o Ilustrator e incluso en ocasiones será bueno empezar con papel y lapiz.

Aunque pueda paracer laborioso, si seguimos este proceso y no empezamos a programar hasta tener 100% claro como será la página, nos ahorraremos multitud de cambios y haremos las cosas una sola vez y bien, y no muchas con errores como suele pasar.