Ubicación del menú y otras cosas: ¿a la derecha, a la izquierda o arriba? (Usabilidad)

Nos meteremos un poco con el cuento de la Usabilidad. No voy a entrar en detalles por que en Google existe mucha información sobre lo que trata la usabilidad, pero si sobre un tema que es básico.

El menú: ¿A la derecha o a la izquierda?. y es una pregunta complicada, mas cuando en la actualidad ya los “Portales Web”  (Palabra que ya nadie usa) deben ser mucho mas fáciles de manejar para los usuarios tanto noveles (Nuevos) como para los mas experimentados.

Entonces cosas como la ubicación del menú son tan esenciales como la pagina. ¿Por que?, la respuesta es simple:

Si tu en un libro no encuentras algo, ¿Donde buscas el tema que necesitas?. En el indice… ¿Cierto?. Ahora imagina que ese indice no existe o aparece sin numeración. o que cada vez que vayas a buscar algo te toque ir donde la señora bibliotecaria a solicitarle ese indice para que puedas buscar el tema deseado.

Siempre piensa que el usuario desea comodidad, Al usuario no le interesa si es bonito o feo el menú o si tiene el nuevo efecto floral QUE SALE POR TODAS LAS WEB O BLOGS y que son generados por “pinceles” de photoshop. así que cuando estés en la fase de desarrollo de PLANEACIÓN del menú debes de tener estas indicaciones:

1. Menús sin enlaces JAVASCRIPT. (Por ejemplo http://web.presidencia.gov.co/ el menú Azul, tiene enlaces de “javascript:;” y es un error GIGANTE.
2. Texto de enlaces simple y con palabras genéricas, por ejemplo si es un menú sobre una web de MÚSICA en el menú no debe ir elementos como: “Mire las ultimas noticias de la música”, sino “Ultimas noticias”, el usuario sabe que esta en una web de música e identifica que son noticias sobre música.
3. Usar las etiquetas <ul> y <li>.
4. No usar un menú con numeración, esto confunde al usuario y le da un sentido de JERARQUÍA, pensando que una sección es mas importante que la otra, al fin de cuentas la numeración es innecesaria.

Ya despues de estos consejos, pasamos a una mini-investigación que elabore para este post, primero vamos por partes.

Menú a la izquierda

Es conocido que los menús a la derecha se maneja bien por cuestiones de costumbre. Desde el inicio de la web se maneja esta teoría.

Recuerdo que hace años http://terra.com siempre manejaba su web totalmente a la izquierda. (http://web.archive.org/web/20010119001800/http://www.terra.com.co/ Versión de terra del 2001) tal vez por las pantallas que en ese tiempo se manejaba 800 x 600 y de echo menos resolución, también recuerdo http://uol.com.co (Ya esta muerta) http://web.archive.org/web/20000302200854/http://www.uol.com.co/ (En su versión del 2000). Entonces para mi HUMILDE OPINIÓN, se siguió manejando los menús en el lado izquierdo y la gente así lo acepto y se enseño.

Ahora, su concepto por lo cual se defiende el menú a la derecha es la costumbre del usuario.

Menú a la derecha

Se argumenta que los menús a la derecha no se debe manejar por lo que decíamos arriba, la costumbre, ademas de que el usuario baja su mirada después de ver el logotipo a el menú, que por lo general el logotipo esta en la parte izquierda superior.

esa es una razón por la cual afirman que no se debe usar a la derecha.

Menú arriba

El menú arriba es muy útil sobretodo cuando se maneja en sitios de noticias, pero hay que tener en cuenta que si son demasiados elementos, toca hacer sub menús organizados en “capas desplegables” que muestre apenas se ubique el ratón encima de los elementos principales.

¿Entonces, como elegir la mejor posición del menú en una web?

Según mi investigación, las falencias de el menú a la izquierda son el transporte del ratón por cuestión de el scroll del navegador, esto es incomodo para algunas personas zurdas, ademas para las diestras también.

Algunos softwares de Adobe (Macromedia) usan el tablón de herramientas a la derecha por la cercanía del ratón al botón [X] Rojo de cerrar ventana de la mayoría de las ventanas de la interfaz gráfica de los diferentes escritorios, también por el scroll.

Ahora, otros sitios manejan también la navegación a la izquierda y un minimenú arriba y abajo, como lo es http://twitter.com

Después de ver esto, pasamos a el sitio de noticias mas visitado en Colombia, http://eltiempo.com.co

En este portal se maneja un menú arriba, muy bien ubicado y fácil de ver, con los submenu desplegables apenas el ratón pasa por encima.

Aqui vemos la captura de GMAIL, donde su menú se encuentra en la parte izquierda.

¿A que vamos con estas capturas?, Pues analizando… la ubicación del menú depende del contenido que vayas a manejar. Si el contenido es de “muchos clicks”, osea una labor de búsqueda o de recorrido de gran parte de una web, se debe manejar el menú a LA DERECHA, esto permite que el usuario no mueva tanto el ratón, permitiéndole así menos tiempo en el sitio, y mucha mas efectividad. Los usuarios quiere todo en el menor tiempo posible.

Ahora si se maneja poca información como lo es una web de una empresa con los datos básicos, debemos manejar el menú a LA IZQUIERDA, por que se supone que la persona visitante va a demorar un poco mas de su tiempo leyendo los clientes… la sección “Quienes somos”, el contacto y otros enlaces de webs “cortas”.

Un ejemplo claro esta en los blogs, la mayoría de sus menús se maneja al lado derecho, hagan la prueba y se darán cuenta que la comodidad que nos ofrece tener ahí nomas la opción de darle click a las noticias de “febrero”, “marzo”, “Últimos post, etc… nos ofrece SATISFACCIÓN al tener todo cerca.

Las redes sociales como twitter y facebook manejan en algunas partes el menú a la derecha, por su gran contenido y enlaces. por que se sabe que los “adictos” a este tipo de web están constantemente haciendo click y si tuvieran que transportar el ratón de lado a lado se cansarían muy fácilmente.

WordPress maneja su menú de el administrador a la izquierda, por que se supone que el tiempo de estadía en una sección sera un poco moderado.

No confundamos el “Sidebar” con el menú, aunque lo puede contener no es lo mismo, la función del sidebar es darle herramientas adicionales al usuario para tanto la navegación o la interacción con el sitio web, un ejemplo ya mencionado es el editor de wordpress.

Si vemos, al lado derecho encontramos las herramientas del editor, este viene siendo el SIDEBAR, y la explicación mas simple es que el menú principal toma un papel como de PROTAGONISTA y el sidebar le dieron el papel de AMIGO DEL PROTAGONISTA, lo cual marca una jerarquía y nos indica que aunque el sidebar es importante, no debe ser lo principal en la interfaz, su función es apoyar a todo el conjunto de elementos, que el usuario sepa que esta ahí pero que no sea lo esencial.

Ahora pasamos a los menús ubicados en la parte de arriba, son buenos cuando se necesita un espacio mayor en la parte de abajo, me explico: Cuando tenemos el sitio de MICROSOFT.COM

identificamos que lo mas importante en este caso es promocionar su “Office Ultimate 2007″ con un valor de $59.95 (Bonito numero 5995) y vemos que el menú pasa a ser el AMIGO DEL PROTAGONISTA y el anuncio pasa a ser el PROTAGONISTA.

Entonces lo primero que ve la persona es el bonito numero $59.95 y dedica unos segundos en la mirada y luego si se ubica y dice: “Bueno, ¿Donde esta lo que yo busco?, ¡Oh! se encuentra en esa barra gris cuya tonalidad es diferente al fondo. voy a pasar mi ratón por esa barra y mientras tanto miro una palabra similar a lo que yo busco, que es ‘El internet explorer 8′”. así que se aprovecha ese espacio de abajo para otro fin.

También… vamos a pasar por: http://alt1040.com

Observamos que el menú esta en la parte superior, ¿Por que?, la explicación es que el blog necesita la ubicación de una publicidad al lado derecho de el titulo y la imagen del articulo, por eso un menú en la parte derecha o izquierda generaría una perdida de espacio, tendría que ser un menú demasiado pequeño y eso por cosas de comodidad seria muy incomodo para el usuario.

Antes de terminar, no olvides que es muy importante que si ubicas el menú en la parte derecha, lo hagas con css, en el código primero debe estar el menú:

<ul>

<li>…

<h2> titulo…</h2>

<p>hola este es un párrafo…

Esto con el fin de que en navegadores de texto, o de pantalla pequeña se pueda ver primero el menú y después si el contenido del sitio web.

Creo que aquí llegamos al final del articulo, es una mini-investigación, y la idea es que ustedes mismos saquen conclusiones y comenten el articulo, no es la ultima palabra sobre el tema por que no existe una regla clara sobre la ubicación, pero lo mas importante es que siempre pienses en la comodidad del que va a probar el producto.

Por ultimo, Tengo ganas de hacer un laboratorio sobre este tema en mi universidad, voy a ver si me lo permiten y si se logra estaré subiendo los resultados aquí. Gracias.

Como utilizar el modrewrite (Basico)

Hola =)

“La continuacion de Es importante una buena “url” (Modrewrite)“

Ayer hablamos de el modrewrite, hoy vamos a ver como hacer un ejemplo sencillo, muy básico.

Primero que todo vamos a crear un archivo “.htaccess“, ¿como lo hacemos?, en Internet nos dan algunas opciones, pero les voy a mostrar 2 sencillas:

1º- Descargarme un archivo que ya contenga el punto delante .htaccess y re nombrarlo. Descargar .htaccess

2º- Renombrar un archivo mediante la consola de windows.
Pasito a pasito:
2.1- Crea un archivo en blanco .txt y llévalo a c:/ (llámalo mismamente nuevo.txt)
2.2-Ve a Inicio (abajo a la izquierda en XP) luego clicka en Ejecutar… , escribe cmd y se abrirá la consola de windows.
2.3- Para asegurarnos que estamos en c:/ escribimos en la consola cd c:\ (si no lo estamos nos llevará)
2.4- Renombramos el archivo escribiendo rename nuevo.txt .htaccess

Tomado de: http://blog-indomita.blogspot.com/2008/06/crear-un-archivo-htaccess-o-loquesea-en.html

Si estas en linux es demasiado sencillo, simplemente creas un archivo en blanco y lo re nombras así “.htaccess” sin comillas lógico.

Bueno, ya después de creado, sigue el paso de modificar el contenido, por obvias razones esta en blanco, entonces lo primero que vamos a hacer es escribir esto:

Options +FollowSymLinks
RewriteEngine on
Rewriterule ^(.*)\_(.*)\.html$ index.php?pagina=$1&nombre=$2

si vemos la estructura que tiene es la siguiente, donde aparezca ^(.*)\ nos va a indicar que es la primera variable de la url, y el siguiente ^(.*)\ es la segunda variable, entonces en este caso la primera variable en la url la indico con $1 y la segunda con $2 y así consecutivamente, si vemos hay un guion bajo “_“, este es un carácter que yo usare para separar las variables. entonces la url en el navegador quedaría:

5_articulo-sobre-modrewrite.html

si vemos el 5 indica la pagina osea la variable $1, y el texto “articulo-sobre-modrewrite” nos indica la segunda variable osea $2.

Hagamos un ejemplo, digamos que se necesita por medio de modrewrite hacer una url bonita que quede por ejemplo,

la-pagina-de_andreslara501_lanzada-en-el_2008_y-el-es-de_colombia.html

¿Como la hacemos?, sencillo, la clave esta en saber identificar las variables.

Options +FollowSymLinks
RewriteEngine on
Rewriterule la-pagina-de_^(.*)\_lanzada-en-el_(.*)\_y-el-es-de_(.*)\.html$ index.php?nombre=$1&ano=$2&pais=$3

Ahora si vamos con la explicación, los ^(.*)\ van ubicados donde ira las variables en la url, como me muestra el ejemplo el primer ^(.*)\ contiene el nombre que es ANDRESLARA501 y es la variable $1, el segundo ^(.*)\ contiene el año y es la variable $2 que contiene 2008, y la tercera variable es $3 que contiene el país osea COLOMBIA.

Así podemos jugar con el modrewrite, haciendo muchas cosas muy vacanas (Sinónimo de chevere, divertido, espectacular, palabra muy usada en Colombia) así que anímate, entre mas lo uses en tus aplicaciones php, mejor serán, por que tus usuarios comprenderán mejor la url.

Recuerda que el archivo .htaccess va en la carpeta donde esta el archivo .php que le hagamos el tratamiento del modrewrite.

Chau y éxitos

Dato curioso: Escribiendo al final casi coloco “Modrewitter” jajajaja hay dios

Separar los scripts del html

Hay un error común en nuestros sitios web, que es de principiante y es el de incluir código externo en el html, me refiero a esto:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
<!–
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
–>
</style>
</head>

<body>
<span class=”style1″>Hola mundo</span>
</body>
</html>

Eso es ERRÓNEO, ¿Por que?, es sencillo, imagina que entran a tu web desde un móvil, este móvil solo admite HTML, no te admite css. que va a pasar… tu web… se va a cargar mas lento, la simple razón es que esta cargando código css que al móvil no le va a servir, por eso siempre digo que lo que es css, javascript y otros siempre vayan en un archivo aparte!.

Entonces lo correcto seria:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link href=”css/fuentes.css” id=”stilecss” rel=”stylesheet” type=”text/css” />
<title>Untitled Document</title>

</head>

<body>
<span class=”style1″>Hola mundo</span>
</body>
</html>

Lo que esta marcado con naranja es el llamado del archivo css externo, esto nos permite que no coloquemos directamente el código en el html. y así cuando el navegador web del celular, cuando vaya pasando por esa instrucción vera que es un archivo .css y dirá :O ami no me interesa el css, mejor sigo derecho y sigo mirando las demás etiquetas, en cambio si no tubieramos eso el navegador estaría diciendo font-family: Arial, Helvetica, sans-serif; , que es eso1! :S no entiendo, font-size: 18px; , no entiendo eso tampoco, ven… así que perderíamos segundos de carga y el usuario dinero en carga .

Variables globales PHP

 

En el mundo del php se esta evolucionando constantemente, es cierto sigue siendo el mismo FOR, IF y todo sigue igual, la diferencia son en funciones y novedades, una de ellas es que las variables globales se deshabilitaron por cuestiones de seguridad.

entonces por ejemplo, antes llegábamos y colocábamos
index.php?variable1=”holas”

y en php imprimíamos asi:

echo $variable1;

ahora como las variables globales están des habilitadas por defecto, entonces accedemos asi:

echo @$_GET["variable1"];

GET por que estamos trabajando las variables por get, si fuese un formulario por donde enviamos las variables y usa post, remplazamos el GET por POST.

echo @$_POST["variable1"];

para los que estabamos acostumbrados a imprimir asi nomas, es complicado al comienzo, igual hay una forma de evitar colocar GET y POST. Es una porcion de codigo.

/***VARIABLES POR GET ***/

$numero = count($_GET);
$tags = array_keys($_GET);// obtiene los nombres de las varibles
$valores = array_values($_GET);// obtiene los valores de las varibles

// crea las variables y les asigna el valor
for($i=0;$i<$numero;$i++){
$$tags[$i]=$valores[$i];
}

/***VARIABLES POR POST ***/

$numero2 = count($_POST);
$tags2 = array_keys($_POST); // obtiene los nombres de las varibles
$valores2 = array_values($_POST);// obtiene los valores de las varibles

// crea las variables y les asigna el valor
for($i=0;$i<$numero2;$i++){
$$tags2[$i]=$valores2[$i];
}
/*fin normalizador get y post*/No se de donde lo tome, si el autor del código anda por ahí avísenme

Imagenes y accesibilidad

cuando usas imágenes en un documento html, es necesario que coloques una descripción de ella, esto permite que cuando no cargue la imagen se pueda ver de que trata, ademas cuando visite una persona tu web con un navegador de texto, como lo hacen los invidentes… pueda este leer el contenido tranquilamente.

Ademas de esto, esta demostrado que Google te indexa mejor, son truquitos que se van aprendiendo a lo largo de la vida vamos a ver un ejemplo:

ahí vemos una serie de imágenes, ahora vamos a deshabilitarla con opera.

Esta captura nos sirve para también mostrarles lo del anterior post, donde hablaba de la importancia del color de fondo cuando se usa imágenes de fondo, aquí vemos que el texto y la información es totalmente visible, también observamos que al quitar las imágenes, aparecen textos que representan esas imágenes que no están… eso es bueno ya que por ejemplo si tenemos un sitio personal y esta la foto de toda la familia y en el caso que no cargue, aparecerá el nombre de cada uno de los integrantes…. esto se logra de la siguiente manera:

En dreamweaver en modo gráfico seria algo así:

donde dice ALT ahí, se coloca el texto descriptivo, tiene que ser lo mas explicativo posible. tampoco FOTO CON ARBOLES MUY HERMOSOS naaa tampoco, pero si por ejemplo foto con PEDRITO, JUANITO, MARCELA, ANDREA, ANDRES EN EL DIA DE EL AMOR Y LA AMISTAD.

Esa es una forma, si tu trabajas con el código directamente pues ya te muestro como se hace

<img src=“img/ojos_bonitos.jpg” alt=“Foto de articulo” />

alt=“Foto de articulo” es el texto que se debe insertar, para colocar la descripción de la imagen. practiquen y me comentan.

Truco para usar fireworks en ubuntu (linux)

Ubuntu es la distribución de linux mas usada del mundo, si estoy mal que me corrijan. lastimosamente aplicaciones muy buenas como las de macromedia aun no tienen soporte para linux, esto hace que usemos windows aun, no voy a entrar a discusión si linux o windows es mejor, aya cada uno si se quiere aguantar virus cada mes. pero bueh… sigamos… hay un truco que aprendí hasta hace poco, lo confieso yo en la pc del trabajo tengo windows, en el portátil tengo ubuntu y esto pues me acarreaba algunos problemas como lo son no usar bien el fireworks y el dreamweaver, al comienzo utilice el wine, pero tenia problemas no es lo mismo, hasta que se me ocurrió intentar con la virtualizacion.

Para los que no saben que es virtualizacion, consiste en cojer un sistema operativo, crear un disco duro de mentiras e instalar el nuevo sistema operativo dentro de otro algo asi:

En una ventana puedo tener windows sin ningún problema, entonces esto me da la ventaja de poder trabajar con mi UBUNTU con total libertad. eso es virtualizacion, entonces… esto lo logro con un programa llamado VIRTUALBOX.

Como no puedo demorarme mucho explicando la instalacion del virtualbox, saltamos ese paso, suponiendo que tienen instalado ubuntu o fedora o cualquier distro linux, y que tienen el virtualbox, entonces hay un truco muy especial para trabajar bien con el virtualbox y que pareciera que el fireworks esta instalado en el escritorio, en mi caso gnome, entonces lo que yo hago es lo siguiente:

Me posiciono en la ventana.

Ahora presione la tecla de host, que por defecto es el CONTROL de la derecha, y despues la L, entonces CONTROL+L.

Y listo tenemos integración de los dos escritorios, el explorer y gnome, ahora abrimos fireworks

No es el mejor manual pero peude servir de algo.

Colocar un div junto de otro (Seguimos con los cursos)

Hasta ahora hemos visto como crear divs, con clases… y si hemos analizado los divs son verticales, pero no sabemos aun como se colocan divs horizontales, entonces es muy sencillo de haces, pero algunas personas tienden a confundirse.
Para indicarle al navegador que divs queremos que queden juntos verticalmente, le damos la propiedad float.
Depende de a donde lo queramos alinear le daremos left ó right. Entonces:
#cajon1{
float:left;
}
#cajon2{
float:left;
}
Ahora, para diferenciarlo, vamos a colocarle colores a cada cajón:
#cajon1{
float:left;
background:#CC6600;
}
#cajon2{
float:left;
background:#000FFF;

}
Algo asi quedaría.

Para los descuidadines, aqui les coloco el codigo html….
<div id=”div1″>Texto que va en el div1</div>
<div id=”div2″>Texto que va en el div2</div>

Hey!!! pero aun no hemos acabado, digamos que queremos que un div no siga siendo alado, para que quede abajo… le damos la propiedad clear:boot;, nos dará un resultado asi:

Si se observa el div3 se bajo… entonces les voy a mostrar el código css:

#cajon3{
clear:both;
background:#000FFF;
}

<div id=”div1″>Texto que va en el div1</div>
<div id=”div2″>Texto que va en el div2</div>
<div id=”div3″>Texto que va en el div3</div>

Ya es parte de su imaginacion como usar estas propiedades, no es necesario usar tablas para organizar nuestras webs, recuerda solo usar tablas cuando muestres datos estadisticos.

La importancia del color de fondo (accesibilidad)

El color de fondo es muy importante, dado que no todo el mundo tiene velocidades de conexión altas como la banda ancha, sino que aun se conectan por modem.

Si nosotros planteamos un diseño con imágenes de fondo, debemos necesariamente colocarle un fondo de color por ejemplo de tipo #FFFFFF, por que esto nos permite que en el caso que no carguen las imágenes pueda el usuario visualizar la información ó enterarse de una previsualizacion del sitio. Ejemplo:

ese es el administrador de proyectos en el que e estado trabajando estos últimos 12 días, ahí podemos ver la interfaz… que maneja varias imágenes, esto el da un aspecto “bonito ” creo yo. Ahora vamos a quitarle las imágenes para ver como se visualiza.

:O si notamos se pierden las imágenes, pero el texto sigue totalmente legible, esto es importante en una web y en una aplicación de internet, por que mientras cargan las imágenes, aparece el color de fondo y esto a vos te da un tiempo extra. SI! un tiempo extra, por que el usuario no necesita que cargue la web completamente para poder comenzar a leer, escribir o navegar sobre la web creada.

 Si aun no sabes como colocar un fondo como imagen, ó si ya sabes y no sabes como colocarle el color a continuacion con un minitutorial te explicare.

Primero crea la clase:
.clase_fondo1{
}

Ahora, dentro de ella declara la propiedad BACKGROUND, de esta forma:
background:url(‘../img/fondo.png’);
Algunas personas dicen que debe ir sin las comillas, por que en el ie para mac crea problemas cuando tiene comillas, pero pues a mi me gusta con comillas, asi que vamos a colocarlo asi :

entonces el codigo quedaria asi:

.clase_fondo1{
      background:url(‘../img/fondo.png’);
}

Ya tenemos declarada la propiedad con la url de fondo, recorda que la direccion de ubicacion es relativa segun el directorio del archivo css. ahora vamos a colocarle un fondo, por ejemplo un color negro.

.clase_fondo1{
      background:url(‘../img/fondo.png’) #000000;
}

si ves, le agregue el codigo de la imagen despues de la declaracion del fondo, recuerda dejar espacio para que el IE en windows no te cree problemas.

y listo!.

Evitar la mayoria de problemas en css, neutralizar propiedades

En css tenemos un problema muy grande, que es la diferencia entre navegadores, cada navegador quiere tomar algunas formas de interpretar las propiedades del css. entonces por eso hay un truco llamado NEUTRALIZACION de css yo lo llamo asi y consiste en lo siguiente:

insertamos este codigo al comienzo de nuestro archivo css, esto nos permitira que iniciemos la mayoria de las propiedades desde 0 y quen o tengamos problemas mas adelante. aqui va el codigo:

/* CSS Document */
@charset “utf-8″;
/*Neutralizando elementos*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:”;
}
abbr,acronym { border:0;
}
body{
color:#000;
text-align:left;
margin:0px;
}
img {
border: none;
text-decoration: none;
}
/*Fin de la neutralizacion*/

Quieres saber como se ve tu web desde un movil?

Cuando haces una web, muchas veces deseas saber como seria tu web desde un móvil, entonces desde hace algún tiempo, opera incorporo una opción para ello. la cual modifica el navegador y te permite ver tu web como desde un móvil.

Primero, abrimos www.opera.com :


Nos ubiucamos en le menu que dice DOWNLOAD y le damos en OPERA DESKTOP:

Descargamos el opera y lo instalamos.

Ahi tenemos la foto de opera instalado, ahora simplemente abrimos la pagina que deseamos ver en forma movil, en este caso vamos a utilizar http://buzzeando.com/ una pagina al azar que encontre en wordpress:

ahora simplemente le damos SHIFT + F11 y listo!!!!

Listo tenemos una pagina vista como desde un celular, gracias al unico OPERA



Si quieren volver a el estado anterior, ale estado full le dan SHIFT + F11.

Hay un dato para recordar, y es que DREAMWEAVER incorpora en su software una vista de movil, y este usa la ultima version del opera.