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.

Notas y trucos para Javascript accesibles

Hola!, bueno primero que todo vamos a suponer que ya sabemos que es javascript, pero lo que posiblemente no saben es ACCESIBILIDAD, algo que no siempre nos enseñan en la universidad o instituto de educación. La accesibilidad en palabras simples es en la web crear sitios con la posibilidad de que la mayoría de las personas puedan acceder a el, los usuarios mas comunes a los cuales debemos pensar en accesibilidad son:

• Personas que NO tengan Flash player
• Que no tengan Javascript Activado
• Que naveguen desde navegadores de texto
• Que naveguen desde navegadores moviles
• Y el mas clásico, Que naveguen desde conexiones lentas.

y muchos dirán: “NOO PERO SI YA ESTAMOS EN CONEXIONES DE  1 GB (Claro no en Colombia )”, entonces yo les diria:

• ¿Y las personas que entran a una red WIFI donde este saturada?
• ¿Y las personas que entran con “internet 3g”?
• ¿Y las personas que están bajando Porno Vídeos educativos y su conexión se vuelve lenta?

Así podemos seguir todo el día y buscar muchos factores por lo cual una web en la pc de un usuario normal no abre rápido,  entonces por esas personas debemos hacer javascript accesibles, ya que debemos asegurar que la web abra sin una sola instrucción javascript. Ahora vamos a en listar los puntos básicos para un JS Accesible básico jeje.

• Enlaces
• Contenido
• Animaciones

Listo, preparados….

Enalces:

Los enlaces nos acompañan desde muchos nacieron, y por eso  debemos comprender básicamente su uso que es abrir otra web, esa es su función mas no es la función de … <a href=”abrirnuevaventana(‘hola.php’)”>SSS </a> ¡NOOOOOOOO! PARA ESO NO SE USA, se usan para enlazar , no para usar instrucciones javascript, por que al momento de que el usuario no tenga javascript ese enlace no queda funcionando ni para adornar el sitio web, entonces ¿Como logramos hacer que ese enlace funcione bien?, muy sencillo: El href solo le colocaremos la url o el nombre del archivo que vamos a enlazar, osea “descarga.php” o “http://linux.org”. de esta forma estamos asegurando que todo el mundo abra ese enlace. Pero surge un problema, ¿y como ejecuto la funcion javascript?, sencillo tenemos la propiedad del html que dice “ONCLICK” con la cual quedaría de esta forma: <a href=”descarga.php” onclick =”abrirnuevaventana(‘hola.php’)”>Descarga el archivo/a>. Pero continuamos con las deficiencias, haga la prueba y vera si colocas ese código y lo pones a funcionar de seguro no te ejecuta el código javascript y de una abre la url como si no existiera el javascript, entonces para esto le agregamos la instrucción “return false”, la cual nos evita que se abra el enlace y mejor se ejecute el codigo javascript, quedaria algo asi el codigo: “<a href=”descarga.php” onclick =”abrirnuevaventana(‘hola.php’); return false;”>”.

Algo de lo que me di cuenta es que esta instruccion tiene problemas con el Puto IE7, para lo cual les dejo este enlace donde explican como solucionarlo. http://11heavens.com/IE7-bug-report-onclick-event-handler Con eso ya tienen herramientas para que sus web sean un poquito accesibles en el campo del “NO EXISTE JAVASCRIPT”, Otro punto importante es que los enlaces SOLO SE USAN PARA ABRIR ENLACES, no los use para por ejemplo para que se borren los cajones de un formulario, o para una función javascript que no tenga que ver con enlaces.

Contenido:

Ahora con el ajax, cada vez vemos mas sitios donde la información carga en vivo, así que no podemos depender del ajax para mostrar nuestra información, para lo cual existen (Yo lo digo) y con los cuales tu puedes tener tu contenido disponible con o sin javascript:

1. Básicamente el desarrollo de una web requiere unos procesos de muchas personas y de tiempo, mas adelante les dejo un enlace sobre eso, para lo cual se debe hacer una planeacion de lo que se quiere, se necesita y lo que tenemos. Así que no podemos llegar a la “loca” y decir: “Metamole esta info aquí  y la cargamos con ajax por que se ve bonito”, ya que si hacemos esto estamos dejando a un lado los navegadores que no funcionan con javascript, por ejemplo miremos “Facebook” y haga el experimento, use o firefox u opera y desactiva el javascript, dale click en la galería de fotos, ¿Te las abre? ¡SI!, Abra los otros enlaces que por lo general cargan con AJAX, ¿Te los abre?, ¡Si!. Ahora veamos el “www.hi5.www” o los que tengan HI5 y verán que si no tiene javascript la mayoría de los enlaces no funcionan, y el contenido se pierde, voy a tomar una captura y les muestro. http://www.twitpic.com/a0iz4 Ahi vemos abajo que el enlace dice:  ”javascript: void(0);” lo cual nos advierte que si no tenemos el Javascript activado pues no mostrara bien la nueva info. entonces en conclusión para este primer punto eso, El contenido debe estar habilitado sin Javascript.
2. Haga primero en html sin nada de JS (Ya me canse de escribirlo completo), y haga las web interiores sin JS, luego de hacer la web en html, después si insertale el php. y por ultimo el javascript.
3. Asegúrate que la información inicial no se cargue con javascript.
4. Ten como prioridad hacer la web inicial sin animaciones, luego las colocas, también ten en cuenta que algunas animaciones pueden ocular información si no esta activado el JS.
5. Descarga navegadores de texto como Lynx (Linux y windows), abre tu sitio, si puedes ver la totalidad del contenido y los enlaces abren bien, estas haciendo las cosas como son.

Eso lo básico con contenido.

Animaciones:

Las animaciones hacen bonita una web, no es lo mismo una web donde se despliegue la info de forma fea, que una donde aparezcan “GLOBOS” de información o que no tenga una galería de fotos donde se muevan de forma bonita. así que use esas animaciones pero sin saturar la web, recuerda que el javascript también consume recursos en la pc del navegante. ademas las librerías de animaciones ya vienen con puntos básicos de accesibilidad, como lo son Moo, Prototype, $fx y unas cuantas por ahi. Procura usarlas, no te pongas a desarrollar las animaciones tu mismo, ya que con la filosofía del “Código libre” nos ahorrara mucho tiempo en el desarrollo de aplicaciones o webs.

Esas son las anotaciones básicas para una web “accesible” básica, pueden consultar mucho mas en internet, ya que no soy el experto, pero tampoco es necesario serlo para pensar un poquito en el usuario, ten siempre en cuenta el usuario como prioridad, y póngase en el lugar de no saber nada y ensaye cosas comunes y así miraras errores en tu web.

¡Chau! Ahh y sobre el enlace, les recomiendo http://webparahumanos.wordpress.com/ que es el blog de  @maocandamil y habla sobre “usabilidad” y los procesos que se están haciendo para la nueva versión de la web de la Universidad Del Cauca. muy recomendado.

Comprime tus css de 100% bajalos a 27%

Bajalo desde aqui:

http://76.164.236.73/~wwwtupo/csszip.zip

Hice este script, por que esta técnica la vengo utilizando desde hace tiempos, lo que hago es usar la librería zlib de php para comprimir el código, en el post de mañana explicare bien el método, por ahora los dejo con el script.

Léame

Bienvenido a CSSZIP

Este script es muy básico, en el cual mezclamos MODREWRITE y la librería ZLIB de php
Lo único que necesitas como requisito, es tener:

1)Php
2)La librería ZLIB
3)El MODREWRITE activado

El script comprueba si existe la librería zlib, en el caso de que no exista, no genera error,
simplemente no comprimirá nada.

Lo primero es copiar el contenido de el archivo .ZIP en la carpeta donde van los css.
son 2 archivos, uno llamado motor.php, y el otro es .htaccess y listo!, el zlib estara
funcionando.

Después de haber copiado los dos archivos en la carpeta de los .css el mismo script se
activa solo y cada vez que soliciten el archivo .css, el script lo comprimirá. vamos a ver
un ejemplo:

Tengo el archivo “ejemplo.css”, que viene incluido en la carpeta del CSSZIP, sin comprimir el
archivo pesa 11.28 Kb, y después de insertar los dos archivos en la carpeta queda pesando: 3.06 Kb

Antes de comprimir con Csszip

Despues de comprimirlo con Csszip

Dudas y comentarios a:
andreslara501@hotmail.com

http://twitter.com/andreslara501

http://donestandares.wordpress.com

Bajalo desde aqui:

http://76.164.236.73/~wwwtupo/csszip.zip

Pruebalo y me dices!!!!!

Fireworks en linux (Ubuntu) Con wine (Sin Virtualizar Windows)

Hace algunos años era imposible ejecutar aplicaciones de windows en linux, ahora todo es mas facil y posible con el lanzamiento del wine 1, esto nos permite ya ejecutar aplicaciones como corel, fireworks, dreamweaver, photoshop, y un sin fin de .exe

El problema aun esta en los instaladores, por ejemplo el fireworks aun no deja instalarse de una. A diferencia del dreamweaver, que ya permite con instalador y todo.

Pero mi truco no esta en la instalación, sino en algo que se esta potenciando cada día, que son las aplicaciones portables, esas aplicaciones que con solo darles doble click ya abren, las que no se necesitan instalar.

Entonces los pasos para ejecutar el fireworks o dreamweaver en linux son:

1) buscar en Google “fireworks cs3 portable” o “dreamweaver portable”
2) descargarlos y dejarlos en el escritorio (Es mas cómodo después lo pasan para donde quieran)
3) Actualizar el “wine” a su ultima versión (Si no sabe busque en Google es que me da pereza) o sino con el gestor de actualizaciones de Ubuntu actualizas tu sistema completamente y listo, en el caso de que no tenga instalado el wine dele en APLICACIONES después en AÑADIR Y QUITAR… y coloque wine e instale y actualice no se olvide!!
4) después de instalado es tan sencillo como darle doble click al fireworks o dreamweaver portable y listo! Ya abre normalmente.

Si por alguna razón le abrió y no le volvió a funcionar como a mi amigo “Angel_fire “ es sencillo, abre el nautilus y te posicionas en la carpeta /home/nombredetuusuario y le das CONTROL + H y ahora muestra las carpetas ocultas, entonces buscas la carpeta “.wine” asi .wine con punto al inicio, esto indica que es una carpeta oculta, entonces la seleccionas y la borras, luego le das doble click al fireworks portable y si no te abre vuelvalo a hacer y veras que ya funciona

Asi es de bonito linux!, suerte ya saben dudas, comentarios y recomendaciones a:

http://twitter.com/andreslara501

andreslara501(arroba)hotmail.com

y ya! Suerte! Chau!

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

Google no penaliza contenido duplicado

Hace como 5 minutos encontre este blog chicaseo.com el cual en un articulo de el 15 de septiembre, habla sobre que google no penaliza el duplicado de contenido, para los que aun no se enganchan, el duplicado de contenido es cuando algunos “magos” del internet hacen mucho COPY & PASTE (Copiar y pegar) o por tecnicas de php sustraen el codigo de una web y lo imprimen en su propio sitio, esto hace algun tiempo se hablo que era penalizado por google, pero al parecer y segun el articulo dice que no.

Ahora si va mi opinion:

Creo que en el mundo de los blogs se maneja mucho el copy & paste, seria “ridiculo” que google penalizara este tipo de actos, ya que se reduciria el crecimiento de la web en un 60%.

les dejo el articulo a continuacion:

http://www.chicaseo.com/google-no-penaliza-sitios-con-contenido-duplicado/

Chau!.

Volvi

No estaba muerto, andaba de parranda! jajajaja

No mentiras, sino queandaba en varios proyectos, pero ahora ya ando mas sueltico, mas relajado.

Como novedad les cuento que tengo twitter para los que quieran estar al tanto de lo queh ago “si claro…”

www.twitter.com/andreslara501

Por la noche comienzo a publicar articulos, y tambien comenzare con trucos de programacion web desde UBUNTU

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 .

Una opinión sobre “width” y “height” en las imágenes

 

El problema de afirmar de forma tajante y sin lugar a dudas es que se pueden crear ideas equivocadas. Una de ellas es muy conocida en el mundillo web:

“No hay que usar tablas en el diseño”

Sin embargo eso se refiere únicamente a no utilizar tablas para maquetar la web. Lo que forma parte del diseño y su maquetación debe ser tarea del CSS, el contenido va para (x)HTML.

De la idea original se ha creada una que no es correcta y es que no se deben usar las tablas “para nada”. Las tablas son para tabular datos y si tenemos que hacer por ejemplo una comparativa lo más fácil es una tabla. Es absurdo crear un sistema de “tablas” de mediante cientos de “div’s”, clases y MUCHO código XHTML/CSS.

En el caso de las imágenes estoy viendo cada día más una idea “equivocada” de este tipo. Es el caso de no utilizar height="" o width="" ya que son atributos de representación que deberían ir al CSS.

Esto último es totalmente cierto. No se “deben” utilizar. Todavía hay cientos de sitios que tienen pendiente eliminar cientos de etiquetas de representación como <font> y atributos como size="".

Pero las imágenes dentro del contenido (las que no forman parte del diseño) ¿deben evitar estos atributos?. De primeras lo correcto sería añadir un identificador o clase a cada imagen y definir sus proporciones vía CSS pero a menos que queramos tener hojas de estilo de megabytes de tamaño y un cacao del copón no compensa mucho.

Viendo la situación creo que con las imágenes se puede especificar sin problemas el tamaño sin recurrir al CSS. En un sitio como SigT el utilizar o no los atributos no es problema pero ¿y en los artículos extensos con muchas imágenes?.

Ahí se hace especialmente molesto leer un artículo y que el texto pegue “saltos” a medida que se descargan las imágenes. Es en ese escenario cuando se hace necesario plantearse cosas como ésta.

“Todo por la experiencia del usuario, oye”.

Y sin embargo con este tema tan superficial ya he tenido varias discusiones con dos “fanáticos de los estándares” de los que “si no valida no es bueno” (como si el validador fuera perfecto). Pero lo mejor, y para más INRI, es que al utilizar estos atributos sigue validando…

Tomado de:

http://sigt.net/archivo/una-opinion-sobre-width-y-height-en-las-imagenes.xhtml 

Tipos de fuentes en css

Holas en css se plantea mucho sobre las fuentes, lo ideal… es usarle las propiedades del css para que se vea bonito al usuario, y para nosotros fácil de manejar.

El css nos da la flexibilidad de poder darle color, tamaño, grueso y otras propiedades que trataremos de explicarlas, no todas :p por que son demasiadas pero si las mas importantes.

Recuerda algo, por el momento no se pueden usar fuentes que el visitante no tenga instaladas, por ejemplo este tipo de letra, es muy bonita y hasta agradable, pero el problema es que si nosotros la instalamos en nuestra pc y trabajamos con css o en html con ese tipo de letra y la subimos a un servidor, esta en NUESTRA PC se va a ver muy bien, el problema es cuando nuestros usuarios abran nuestro sitio web, ellos no verán correctamente por que en la pc del usuario no esta instalada esta fuente.

Por ahora no existe forma de hacer solución a esto, pero lo único que podemos hacer es usar las fuentes default de “windows”, “linux”, “Mac os”, en fin… los sistemas operativos mas usados.

principalmente las fuentes default son:

Arial, Helvetica, sans-serif
“Times New Roman”, Times, serif
“Courier New”, Courier, monospace
Georgia, “Times New Roman”, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif

Cada renglón representa un grupo de fuentes, estos grupos están hechos para que tratar de que la web en cualquier sistema operativo sea visible CASI igual, vamos a ver su funcionamiento:

Arial, Helvetica, sans-serif

Si en el sistema operativo no se encuentra ARIAL, el navegador continua con la siguiente, que es Helvatica y si por cuestiones de configuración o lo que sea sigue con sans-serif.

Y que pasa si en el sistema operativo (Mi preferido Linux! ), no se encuentra ninguna de el grupo de fuentes?, pues muy sencillo el navegador tiene por defecto configurada un tipo de letra… esto permite que se pueda ver sin problemas.

Ahora… ya que sabemos esto, pasamos a la creación de CLASES PARA FUENTES

Lo primero es crear una fuente:

.fuente_titulos{
}

por que le coloque ese nombre?, Recuerda que es mas fácil identificar el css con nombres relacionados, entonces como es un tipo de fuente, entonces se le coloca al comienzo pues FUENTE, recuerda no dejar espacios.

ahora pasamos a crear las propiedades de esa clase, entonces:

.fuente_titulos{
color:#00699C;
font-size:1.1em;
font-family:”trebuchet MS”, Arial, Helvetica, sans-serif;
}

Lo primero, la propiedad COLOR, es lógico, es el color que le queremos darle a la fuente.
En lo segundo hay una parte que necesito hablar con ustedes , y es relacionada con el tamaño de fuente. En css se admiten varios tipos de “medidas” para el tamaño del texto, una de ellas es el PX, Que muchos lo conocen, 12px, 14px, etc… pero… es recomendable que usemos EM, osea 0.8138 em, 0,7340 em, etc… esto lo explicare mas adelante, pero les voy a dar el truco para usar tamaños en em, todo esta en la conversión. Si ustedes digamos tienen 13 px, para pasarlo a em simplemente cojen y multiplican 13 x 0.0626 , osea cojen el valor en px y lo multiplican por 0.0626, este ultimo valor es un numero que equivale a 1 px, entonces al momento que multiplicamos pues nos da el valor jeje.

Lo tercero es el grupo de fuentes, entonces el dreamweaver ya viene con la opción de colocar las básicas igual arriba ya les escribí cuales son. recuerda que solo se puede declarar un grupo, también puedes crear tus propios grupos, pero estos ya están organizados para que sean compatibles y similares.