Antes de comenzar con la creación de la Barra de navegación usted deberá tener preparadas ciertas imágenes. Para el desarrollo de esta lección se han creado una serie de imágenes que servirán para la creación de una Barra de Navegación.

Estas son las imágenes:

Para comenzar con la creación de la Barra de Navegación en primera instancia deberá dirigirse al menú principal del programa y seleccionar la opción Insertar, seguidamente seleccione Objetos de imagen, a continuación aparecerá un menú emergente, en éste elija la opción Barra de Navegación.

Una manera rápida de insertar una Barra de Navegación es desde el panel Insertar, en el menú Común, Imágenes: Barra de Navegación.

En este instante usted podrá apreciar el cuadro de dialogo Insertar barra de navegación, en éste podrá observar los siguientes campos:

Al hacerse clic, ir a URL:
Este campo se refiere a la inclusión de un enlace o hipervinculo.

Es recomendable marcar la casilla de verificación Carga previa de imágenes ya que de esta manera las imágenes "ocultas" (Imagen Sobre e Imagen abajo) se cargarán previamente a su solicitud, de esta manera se evita una posible tardanza en la presentación de dichas imágenes.

En importante mencionar que se recomienda marcar también la casilla de verificación Utilizar Tablas, puesto que de esta manera se podrá maniobrar con la Barra de Navegación, esto implica además una mayor organización.

Usted podrá Insertar su Barra de Navegación tanto horizontal como verticalmente, esto depende de sus necesidades.

En este instante se procederá a explicar los pasos a seguir para el desarrollo de la barra de navegación mostrada en el ejemplo.

En el cuadro de dialogo Insertar barra de navegación, se rellenarán los campos requeridos de la siguiente manera:

Al terminar de rellenar todos los campos de la primera imagen NO de click en Aceptar, proceda a seleccionar el botón, el cual se ubica en la parte superior izquierda del cuadro de dialogo Insertar Barra de Navegación. Debe seguir la misma rutina hasta completar de rellenar todos los campos de las correspondientes imágenes. Una vez completada la inserción de los elementos usted podrá reacomodarlos en caso de ser necesario, para tal fín usted deberá seleccionar en primer lugar el elemento que desea reacomodar desde el campo Elementos de barra de navegación, posteriormente seleccionará el botón o el botón, según sea su caso.

Si usted desea eliminar un elemento de la barra de navegación, en primer lugar deberá seleccionar el elemento en el campo Elementos de Barra de Navegación, posteriormente seleccionará el botón.

Después de completar el rellenado de los campos de todas las imágenes que se incluirán en la Barra de Navegación dé click en Aceptar.

En el caso que usted esté inconforme con algún resultado después de la inserción de la barra de navegación, podrá modificar las características de ésta al dar click de nuevo sobre el botón Barra de Navegación o en su defecto diríjase al menú principal y seleccione la opción Insertar, posteriormente elija Objetos de imagen e inmediatamente seleccione del menú emergente la opción Barra de Navegación. Después de ello usted podrá apreciar la siguiente imagen.

Simplemente dé click en Aceptar y proceda a modificar los valores que usted desee desde el cuadro de dialogo Insertar Barra de Navegación.

---

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.

Sitios abarrotados de imágenes e información
El espacio vacío o espacio negativo, aquellos espacios que se encuentran sin contenido son una herramienta muy importante en el diseño. Afecta cómo los usuarios perciben la importancia de los distintos elementos. Suficiente espacio en blanco debe ser utilizado entre nuestras columnas, los diferentes elementos de página e incluso entre las letras individuales, líneas y párrafos. Tanto los componentes como el espacio vacío deben ser considerados como elementos de igual relevancia en el diseño completo.

No debemos poner demasiado en un solo lugar o una sola página. Muchas veces es mejor tener más espacios cortos que uno solo largo y que contenga información que no es relevante.

Contenido nuevo difícil de encontrar
Al menos que los sitios que estamos diseñando sean completamente estáticos, es relevante mostrar y dar relevancia al contenido nuevo. Aquellos usuarios que regresan estarán interesados en qué ha cambiado desde su última visita. Esto es algo que se hace automáticamente en los blogs, pero deberíamos tenerlo en cuenta para todo tipo de sitios.

Las formas de hacerlo son muchas, podemos tener una sección específica de contenido nuevo, o enlazarlo a través de textos y darles relevancia en la página principal. Lo más importante es hacer que esta información sea de fácil acceso para nuestros usuarios.

Enlaces de difícil acceso
Necesitamos que los enlaces se distingan fácilmente del resto de los elementos, ya que son uno de los elementos más importantes del sitio. Aquí deberemos tener en mente dos cosas: primero, asegurarnos de que los enlaces se diferencien del resto del texto. Podemos hacerlo con colores, subrayado o cualquier otro atributo de texto que se nos ocurra, (Broma del autor: todo menos el texto intermitente ). Lo segundo a tener en cuenta es no hacer que el texto regular de lectura, se asemeje a los enlaces, no debemos subrayar los textos si no son hipervínculos, ya que puede prestarse a confusión.

Utilizar formatos incorrectos de imágenes
Es importante conocer las características de cada formato de imagen para saber cuál utilizar en cada caso, ya que esto puede afectar que no se vean como deseamos o bien que pesen más de lo adecuado. Los formatos para utilizar en línea son JPEG, GIF y PNG.

El caso de JPEG es excelente para visualizar millones de colores y sombras ya que reproduce el color en 24 bits. La contra de utilizar este formato es que si necesitamos que pese menos, pierde calidad. Además no se puede utilizar transparencia por lo que la imagen siempre será recta.

Si hablamos de GIF, deberemos tener en cuenta que solo reproduce color en 8 bits (256 colores en total). Esto significa que no puede utilizarse para imágenes con degradados. Pero si contamos con imágenes de colores planos podemos obtener muy buen peso de compresión casi sin perder calidad.

Finalmente el formato PNG abarca fotografías y gráficos. Permiten transparencias, siempre y cuando los exploradores lo permitan, lo que les da una ventaja frente al GIF. Y no pierden calidad de compresión por lo que le ganan al JPG. Permiten reproducir imágenes de 8 y 24 bits por lo que pueden reemplazar los formatos anteriores. Los PNG no son tan buenos como el JPG pero si son mejores que los GIF.

Dejar el título por defecto
El título que viene por defecto en Dreamweaver es “Untitled Document”. Es un error muy simple de arreglar que no debería ocurrir.

Muchos CMS utilizan el nombre del sitio y bitácora como el título por defecto de todas las páginas. Algunos agregarán el nombre específico, pero no todas. Deberíamos asegurarnos de que todos los nombres de las páginas en nuestro sitio contengan un título único individual, y que aquellas con contenido específico muestren esa especificidad antes que el título.

Menú de navegación difícil de utilizar y encontrar
La navegación debe ser visible para nuestros usuarios, tanto para localizarla como para utilizarla. Si bien hubo una moda que intentaba esconder la navegación para integrarla al diseño, artísticamente puede ser una buena práctica pero no es amigable para el usuario.

Aún utilizando menúes desplegables podemos hacer el sitio menos amigable. Necesitamos que nuestros visitantes encuentren exactamente lo que están buscando con el menor esfuerzo necesario.

Utilizar tamaños predeterminados de letra
Debemos asegurarnos de que los usuarios puedan modificar el tamaño de los textos basados en sus propias preferencias. Esto se realiza a través de la utilización de los tamaños EM en lugar de los basados en pixeles (los que vienen por defecto). Es algo relativamente simple de solucionar y mejora el uso y acceso del usuario.

Propuestas difusas del sitio
Los usuarios deben saber inmediatamente de qué se trata el sitio, no importa en qué página aterricen. Esto puede lograrse a través del uso de etiquetas o indicaciones similares a través de los títulos de página, o bien en los encabezados de las individuales. De cualquier manera, debemos asegurarnos que el objetivo sea visible al lector desde los primeros segundos en los que llega a nuestro sitio.

Utilizar colores fuertes
Los colores llamativos, en especial aquellos muy contrastantes, pueden despreciar la visual de nuestro sitio. No queremos hacer nada que provoque que el usuario deje nuestro sitio. La irritación visual algo que hará que muchos dejen nuestras páginas a raíz de los contrastes de colores. Nuestro sitio debe mostrar su contenido y evitar cualquier cosa que haga perder la atención a su meta.

Anuncios publicitarios mezclados con el contenido
Según la autora del post original, los anuncios de publicidad deben estar separados del contenido del sitio. Etiquetar nuestros avisos publicitarios tendrá completo sentido para nuestros usuarios y hará nuestro espacio más confiable. Es muy importante con anuncios de texto, es necesario que estos enlaces se encuentren diferenciados de los hipervínculos del sitio.

El diseño Web puede ser decepcionantemente difícil, pues involucra lograr un diseño que sea usable a la vez que placentero, entrega información y crea marcas, es técnicamente sonoro y visiblemente coherente.

Agregado a esto está el hecho de que muchos diseñadores web son autodidactas, y que el diseño Web es todavía lo suficientemente nuevo para ser solo un tema aparte en muchas instituciones de diseño, y que el medio cambia tan frecuentemente como la tecnología subyacente lo hace.

Así que el día de hoy pongo juntos mis 9 principios para un buen diseño Web. Estas son solo mis opiniones y traté de poner links con más lectura a cada uno de los temas para que no solo escuchen mi opinión. Obviamente, tengo muchas cláusulas: las reglas están hechas para romperse, diferentes tipos de diseño funcionan diferente, y yo no siempre tomo mis propios consejos. Así que por favor lean esto de la manera en que lleva su intención: como algunas observaciones que estoy compartiendo.

“Capture the valley” usa barras de colores para guiar tu ojo entre las secciones de abajo hacia arriba.

1. Preferencia (Guiando el ojo)
El buen diseño Web, quizá aun más que otro tipo de diseño, se trata de información. Una de las más grandes herramientas en tu arsenal para hacer esto es la preferencia. Cuando navega por un buen diseño, el usuario debería ser guiado en la pantalla por el diseñador. Yo llamo a esto preferencia, y se trata de la carga visual que tienen las diferentes partes de tu diseño.

Un simple ejemplo de preferencia es que en la mayoría de los sitios, la primer cosa que ves es el logo. Esto pasa frecuentemente por que es grande y está colocado en donde ha sido demostrado en muchos estudios realizados ser el primer lugar que la gente ve (la esquina superior izquierda). Esto es bueno ya que tú probablemente quieres que el usuario inmediatamente sepa cual sitio está viendo.

Pero la preferencia debería ir más allá. Deberías dirigir los ojos del usuario mediante una secuencia de pasos. Por ejemplo, tú tal vez quieras que tu usuario vaya del logo a una expresión posicional primaria, seguida de una imagen enérgica (para darle personalidad al sitio), luego al texto principal, con navegación y sidebar tomando una posición secundaria en la secuencia.

Lo que tu usuario debería estar buscando depende de que tú, el diseñador Web, lo averigües.

Para lograr la preferencia tienes muchas herramientas a tu disposición:

Posición – Donde algo en la página claramente influencia en qué orden el usuario lo ve.
Color – Usando colores sutiles es una manera sencilla de decirle a tu usuario hacia donde mirar.
Contraste – Ser diferente es lo que hace a las cosas resaltar, mientras que siendo similares las hace secundarias.
Tamaño – Lo grande toma preferencia sobre lo pequeño (a menos que todo sea grande, en cuyo caso lo pequeño quizá sobresaldrá gracias al contraste)
Elementos de diseño – Si hay una gran flecha apuntando algo, adivina ¿hacia dónde mirará el usuario?

“Marius” tiene un sitio muy limpio, muy sencillo con bastante espacio.

2. Espacio
Cuando yo empecé a diseñar quería llenar todo espacio disponible con cosas. Los espacios vacíos se veían desperdiciados. Y de hecho lo opuesto es verdad.
El espacio hace las cosas más claras. En el diseño Web hay tres aspectos sobre espacio que deberías considerar:

Espacio entre líneas
Cuando tú presentas un texto, el espacio entre líneas afecta directamente a lo legible que aparece. Muy poco espacio hace fácil que tu ojo caiga de una línea a otra en lugar de la siguiente; demasiado espacio significa que cuando terminas una línea de texto y vayas a la siguiente, la pierdas de vista. Así que necesitas encontrar una medida media feliz. Puedes controlar el espaciado en CSS con el selector “line-height” (interlineado). Generalmente encuentro que el valor usado por defecto es muy pequeño. El espaciado entre líneas es técnicamente llamado leading (pronunciado ledding), que se deriva del proceso que las impresoras usaban para separar las líneas de texto en los viejos tiempos, poniendo barras de plomo entre las líneas.

Relleno
Generalmente hablando, el texto nunca jamás debería tocar otros elementos. Las Imágenes, por ejemplo, no deben de tocar el texto, ni tocar bordes o tablas. El relleno es el espacio entre los elementos y el texto. La simple regla aquí es que siempre debes tener espacio ahí. Hay excepciones, por supuesto, en particular si el texto es algún tipo de encabezado/gráfico o tu nombre es David Carson. Pero como regla general, poner espacio entre el texto y el resto del mundo lo hace definitivamente más legible y placentero.

Espacio en blanco
Antes que nada, el espacio en blanco no es necesariamente de color blanco. El término se refiere al espacio vacío en una página (o espacios negativos como a veces se le llama). El espacio en blanco es usado para dar balance y contraste a una página. Mucho espacio en blanco tiende a hacer que las cosas parezcan más elegantes y de lujo, así que como ejemplo, si vas a un sitio costoso de arquitectura , casi siempre ves mucho espacio. Si quieres aprender a usar espacios en blanco de forma efectiva, consigue una revista y revisa como están presentadas las paginas publicitarias. Los comerciales para grandes marcas de relojes y automóviles tienden a tener mucho espacio vacío usado como elemento de diseño.

3. Navegación
Una de las experiencias más frustrantes que puedes tener en un Web Site es cuando no sabes en donde estás ni para dónde vas. Quiero pensar que para la mayoría de los diseñadores Web, la navegación es un concepto que hemos pasterizado, pero aun encuentro algunos malos ejemplos por ahí. Hay dos aspectos sobre la navegación que hay que tener en cuenta:

Navegación – ¿Hacia dónde puedes ir?
Hay algunas reglas con sentido común que hay que recordar. Los botones para navegar en el sitio deberían ser fáciles de encontrar – hacia la parte de arriba de la página y fáciles de identificar. Deberían verse como botones de navegación y estar bien descritos. El texto de un botón debe estar bien claro en cuanto hacia donde te está llevando. Aparte del sentido común, es importante también hacer usable la navegación. Por ejemplo, si tienes un sub-menú desplegable, es importante garantizarle a la persona que puede ir hacia los objetos del submenú sin perder lo desplegable. Al igual que lo es cambiar el color de la imagen al pasar el Mouse por encima; es una excelente reacción para el usuario.

Orientación – ¿Dónde estas ahora?
Hay muchísimas maneras en las que puedes orientar a un usuario, así que no hay excusa para no hacerlo. En sites pequeños, es solo cuestión de un gran encabezado o una versión “menor” de la versión del botón correspondiente. En un sitio más grande, podrías utilizar la técnica de las migas de pan, sub-encabezados y un mapa del sitio para los que están realmente perdidos.

4. Diseña para construir.
La vida se ha vuelto más fácil desde que los diseñadores Web hicieron la transición a plantillas (layouts) CSS, pero incluso ahora es importante pensar acerca de cómo vas a construir tu sitio si aun estás en PhotoShop. Considera cosas como:

• ¿De veras puede hacerse?
Puedes haber escogido un tipo de letra sorprendente para la copia del cuerpo de tu site, pero ¿Es un tipo de letra estándar en HTML? Quizá tienes un diseño que se ve hermoso, pero su tamaño es de 1100px y como resultado, tendrán que recorrer la página horizontalmente para poder verlo. Es importante saber lo que se puede hacer y lo que no, por lo cual creo que todos los diseñadores web deberían incluso hacer sitios completos, al menos unas cuantas veces.
• ¿Qué pasa cuando una pantalla cambia de tamaño?
¿Necesitas fondos repetitivos? ¿Cómo funcionarán? ¿El diseño es alineado a la izquierda o centrado?
• ¿Algo de lo que estás haciendo es técnicamente difícil?
Incluso con el posicionamiento del CSS, algunas cosas como el alineamiento vertical son un poco dolorosas y algunas veces mejor evitarlas.
• ¿Podrían algunos pequeños cambios en tu diseño simplificar enormemente cómo lo construiste?
A veces, mover un objeto en el diseño puede hacer una gran diferencia en cómo tendrás que codificar tu CSS después. En particular, cuando los elementos de un diseño se cruzan entre ellos le añade un poco de complejidad al proyecto.. así que si tu diseño tiene, digamos tres elementos y cada elemento está completamente separado de los otros, será muy fácil de crear. Por otro lado, si los tres se superponen uno con otro, quizá sea fácil también, pero probablemente será un poco más complicado. Debes encontrar un balance entre lo que se ve bien y los pequeños cambios que puedan simplificar tu creación.
• Para sitios grandes, particularmente, ¿puedes simplificar las cosas?
Hubo una vez que solía hacer botones con imágenes para mis sites. Así, si había un botón de download, por ejemplo, lo hacia tipo imagen. En el último año más o menos, he cambiado a usar CSS para hacer mis botones y nunca más como antes. Claro, significa que mis botones no siempre tienen la flexibilidad que me gustaría, pero me ahorra bastante tiempo de creación por que ya no tengo que hacer docenas de pequeños botones.

5. Tipografía
El texto es un elemento común en el diseño, así que no es sorpresa que muchos pensamientos se enfoquen en eso. Es importante considerar cosas como:
• Opciones de letras – los diferentes tipos de letras dicen cosas diferentes sobre un diseño. Algunas lucen modernas, algunas lucen Retro. Asegúrate de que estás utilizando la herramienta adecuada para el trabajo.
* Tamaño de letras – Años atrás era tendencia tener texto realmente chiquito. Felizmente, en estos días la gente ha empezado a darse cuenta de que el texto está hecho para leerse, no solo para observarse. Asegúrate de que el tamaño de tus letras sean consistentes, suficientemente grandes para leerse y proporcionales para que el encabezado y el sub-encabezado resalten apropiadamente.
* Espaciado – Como lo discutimos anteriormente, el espacio entre líneas y lejos de otros objetos es de importante consideración. Pero también deberías de pensar en el espaciado entre letras, aunque en Internet esto es de importancia menor, ya que no se tiene mucho control sobre ello.
• Anchura de las líneas. – No hay una regla establecida, pero generalmente las líneas de tu texto no deberían ser tan largas. Mientras más largas son, más difíciles son de leer. Pequeñas Columnas funcionan mucho mejor (así como ponen sus textos los periódicos).
• Color. – uno de mis peores hábitos es poner texto de bajo contraste. Se ve bonito, pero no se lee bien desafortunadamente. Aun así, parece que lo hago con cada diseño de web que he creado, tsk tsk tsk.
• Parrafeando. – antes de que empezara a diseñar, adoraba justificar el texto en todo. Lo hacía para que tuviera bonito bordeado en cada lado de mis párrafos. Desafortunadamente, el texto justificado tiende a crear espacios extraños entre las palabras donde ya han sido auto-espaciadas. Esto no es bueno para tu ojo cuando estás leyendo, así que pega el alineamiento hacia la izquierda a menos que tengas un cuerpo de texto mágico que haga el espaciado perfecto.

6 .Usabilidad
El diseño Web no solo se trata de fotos bonitas. Con la tanta información e interacción que hay que efectuar en un web Site, es importante que tú, el diseñador, lo proveas para todo. Eso significa que hagas tu web Site utilizable.
• Apegándose a los estándares.
Hay un cierto tipo de cosas que la gente espera, y no dárselas provoca confusión. Por ejemplo, si el texto esta subrayado, tu esperas que sea un link. Haciéndolo de otra manera no es una buena práctica de usabilidad. Seguro, puedes romper con algunos convencionalismos, pero la mayor parte de tu Website debería de hacer lo que la gente espera que haga!
• Piensa sobre lo que los usuarios van a hacer.
Hacer prototipos es una herramienta común usada en diseño para de hecho “probar” un diseño. Esto se hace por que con frecuencia cuando utilizas un diseño, llegas a notar pequeñas cosas que pueden hacer una gran diferencia. ALA tenia un artículo llamado “Nunca uses una advertencia cuando quieras decir deshacer”, el cual es un excelente ejemplo para pequeñas interfaces decisivas de diseño que pueden hacer de la vida de un usuario un asco.
• Piensa en las tareas del usuario.
Cuando un usuario entra a tu sitio, ¿qué es lo que trata de hacer? Enlista los diferentes tipos de tareas que la gente hace en un Site, cómo las logran, y qué facilidad quieres darles para ello. Esto puede significar que haya tareas comunes en tu homepage (por ejemplo, “empieza a comprar”, o “aprende lo que hacemos”, etc.) o incluso puede significar asegurar algo como tener un cuadro de búsqueda que esté siempre accesible fácilmente. Al final del día, tu diseño Web es una herramienta para que la utilice la gente, y a la gente no le gusta utilizar herramientas molestas!

7. Alineación
Mantener las cosas alineadas es tan importante en el diseño Web como lo es en un diseño de impresión. No quiere decir que todo tiene que estar derecho, sino que debes tratar de mantener las cosas bien colocadas en una página. La alineación hace tu diseño más ordenado y digerible, al igual que lo hace ver más pulido.

Quizá también quieras basar tus diseños en una cuadrícula específica. Debo admitir que no hago esto concientemente, aunque obviamente PSDTUTS tiene de hecho una cuadrícula estructural muy firme. Este año he visto muy pocos artículos sobre cuadrículas como este y este. De hecho, si estás interesado en el diseño en cuadrículas, deberías pasar por designbygrid.com, la casa de todas las cosas cuadriculadas.

8. Claridad (Nitidez)
Mantener nítido tu diseño es súper importante en el diseño Web. Y en cuanto a la claridad, se trata de los pixeles.

En tu CSS todo va a ser perfecto en cuanto los pixeles, así que no hay nada de que preocuparse, pero en PhotoShop no es así. Para lograr la nitidez tienes que:
• mantén las formas de los límites pegados a los pixeles. Esto podrá incluir limpiar los límites manualmente, las líneas y los cuadros de texto si las estás creando en PhotoShop.
• asegúrate de que el texto está creado usando el comando anti-alistado. Seguido usa “Nitidez”.
• asegurarse que el contraste es alto para que los bordes estén claramente definidos.
• sobre-enfatiza los bordes solo un poco para exagerar el contraste.

9. Consistencia
Consistencia significa hacer que todo combine. Tamaño de encabezados, tipos de letra escogidas, colores, estilos de botones, espaciado, elementos de diseño, estilos de ilustraciones, fotos escogidas, etc. Todo deberá basarse en un tema en específico. Para hacer tu diseño coherente entre páginas y en la misma página.

Mantener tu diseño consistente es lo que te hace un profesional. Las inconsistencias en un diseño son como cometer errores ortográficos en un ensayo. Lo único que hacen es bajar la percepción de calidad. No importando cómo luce tu diseño, mantenerlo consistente siempre hará que se vea bien. Incluso si es un mal diseño, al menos haz de él un mal diseño consistente.

La manera más simple de mantener la consistencia es hacer decisiones tempranas y pegarte a ellas. Aún así, con un Site grande, las cosas pueden cambiar en el proceso de diseño. Cuando fue diseñado FlasDen por ejemplo, el proceso llevó meses, y ya para el final, algunas de las ideas para los botones y las imágenes habían cambiado, así que se tuvo que regresar y revisar las paginas anteriores para que encajaran perfectamente con las que se hizo después.

Tener un buen set de CSS también puede ayudar a hacer un diseño consistente. Trata de definir etiquetas básicas como < h1 > (header 1) y (paragraph) de una manera para hacer que las predeterminadas encajen perfectamente y te evites el estar tratando de recordar nombres de clases específicas todo el tiempo.

SlickMap CSS es una hoja de estilo sencilla que nos permite en nuestra web mostrar mapas de sitio terminados, no como una lista de navegación HTML estándar, sino con su propio diseño y organización.

La idea general de SlickMap CSS es mecanizar el proceso del diseño web, automatizando la ilustración de los mapas de sitio y permitiendo al mismo tiempo el pre-desarrollo de navegación HTML funcional.

Es compatible con la mayoría de los sitios web, acomodándose hasta a tres niveles de navegación de página y demás links utilitarios adicionales, y puede ser fácilmente personalizado para satisfacer tus propias necesidades individuales o preferencias de estilo.

Algunas de sus propiedades y beneficios
• Sin necesidad de usar programas especializados
• Fácil de revisar con el cliente durante el desarrollo
• Links cliqueables con URL visible
• El diseño resulta en código HTML listo para usar

¿Qué esperas para tener un elegante mapa de sitio como el de aquí arriba?

Haz clic aquí para descargarlo»

Haz clic aquí para ver una demostración »

Cuando nos iniciamos en el diseño de páginas web, tendemos a pensar que la estructura de los archivos y directorios en que se encuentra organizada nuestra página, resulta de importancia menor. Sin embargo, como veremos en este artículo, a la hora de optimizar una página web resulta muy importante seguir una serie de medidas respecto de la organización de la estructura de los archivos.

Además, resulta importante también para quien administra el sitio, tener una estructura ordenada, ya que a la hora de introducir cambios, agregar nuevos contenidos, etc., la tarea puede resultar mucho más simple, con el consiguiente beneficio en tiempo y costos. Esto indirectamente beneficia a los usuarios, dado que todo el tiempo que se ahorre en tareas que pueden simplificarse, puede invertirse en contenidos. Si en algún momento se pretende hacer una reforma en la página, aumentar sus secciones, etc., la tarea se ve enormemente simplificada si los archivos que componen el sitio se encuentran ordenados y su contenido puede ser fácilmente identificable a través del nombre del archivo o del directorio. Como veremos más adelante, también tiene beneficios en el posicionamiento de la página.

Semántica de los archivos
La organización semántica de un sitio web tiene como finalidad facilitar la tarea de acceder a los diferentes archivos y directorios que lo componen, de forma tal que cualquier persona, incluyendo al propio creador, no tenga que hacer grandes esfuerzos para localizar cada uno de los componentes del sitio. Quizá para una pequeña página web con unas pocas páginas, esto pueda parecer excesivo, pero no lo es para un sitio con miles de páginas. El problema de no planificar un sitio web de pequeñas dimensiones aparece cuando con el paso del tiempo el sitio aumenta de tamaño. La falta de una planificación y estructuración de los archivos del sitio en sus inicios, puede hacer muy compleja la administración del mismo con el paso del tiempo.
Una buena medida, es hacer la estructura del sitio siguiendo un sistema, de forma tal que, teniendo en cuenta las bases del sistema empleado en la estructura, cualquier persona pueda entender la misma y acceder a cada uno de los archivos que componen la página.

Nombre de las páginas, archivos y directorios
Una técnica poco recomendable, es utilizar nombres de páginas, archivos y directorios que nada tengan que ver con el contenido de la página o no describan lo que contienen. Esta costumbre tiene su origen en los antiguos archivos de programación, que tenían nombre casi encriptados. Hoy en día, emplear nombres abreviados, siglas, o complejas elaboraciones semánticas que incluyen símbolos y números, no tiene ningún sentido, ya que los modernos ordenadores tienen la capacidad de aceptar cualquier tipo de nombre en cualquiera de los sistemas operativos que se emplee.

Esto ha permitido que los programadores y diseñadores web puedan colocar nombres descriptivos a cada elemento que crean, de forma tal que la tarea resulta mucho más sencilla. Se podrá alegar que quien realiza la página puede conocer lo que contienen los archivos y directorios que ha creado. Sin embargo, parece bastante difícil de creer que alguien cree algunos directorios con nombres tales como %yiu847, yiu878 e jdlg03, cargados de archivos con nombres de similar complejidad, a los dos o tres años de haberlos creado recuerde cada uno de ellos.

En la actualidad se recomienda inclusive, agregar comentarios descriptivos a los códigos, de forma que cualquier tarea posterior, tanto para el creador como para cualquiera que por cualquier motivo deba rever o corregir dicho código, sepa donde se encuentra y como está compuesto y las modificaciones puedan realizarse en forma sencilla y lo más intuitiva que se pueda.

Se debe tener en cuenta que una página web no es más que un código que contiene textos y enlace a otros componentes (imágenes, videos, sonidos, etc.) con su ubicación para que el servidor envíe dichos contenidos y el navegador lo interprete y haga una visualización del resultado. Como enlaces (debemos tener en cuenta que un código como el que ponemos en el ejemplo siguiente no es más que un enlace), deben cumplir con ciertas normas, como por ejemplo que no debe estar compuesto por más de una palabra; esto no quiere decir que no empleemos varias palabras, sino que debemos buscar un recurso que haga que un nombre compuesto por varias palabras sea interpretado como si fuera una sola. Esto es posible gracias al empleo de guiones, tanto normales como bajos, como separadores en lugar de espacios en blanco. El siguiente es un ejemplo de cómo lograr esto y de nombres descriptivos, tanto para el directorio como para una imagen:

De esta forma se facilita la comprensión de los archivos y directorios componentes de una página web.

Estructura eficiente y facilidad de mantenimiento
Bajo ninguna circunstancia es aceptable que un sitio se haga en forma compleja cuando es posible evitarlo. Una de las complicaciones que este tipo de formas de trabajar trae aparejada es la dificultad que se encuentra cuando se pretende realizar el mantenimiento de la página web. Si quien se encarga de realizar el mantenimiento se encuentra con nombres descriptivos para los archivos y directorios, su tarea tendrá una dificultad menos para realizarse.

Algo que su uso se ha visto notablemente incrementado en los últimos años, es la utilización de archivos separados y en tanta cantidad como funciones deban cumplir. Esto también tiene la finalidad de facilitar su mantenimiento, a lo que se agrega la posibilidad de realizar trabajos por secciones sin que la totalidad de la página se vea afectada. Por ejemplo, un sitio web compuesto por muchas páginas, puede requerir varios estilos diferentes, lo que aún en los casos cuyas diferencias sean menores, se emplean varios archivos.

Esto se aplica principalmente a las hojas de estilo en cascada (CSS), donde se pueden establecer estilos diferentes para partes del sitio con características especiales e inclusive , estilos diferentes para diferentes partes de una misma página.

Este tipo de archivos adjuntos, son frecuentes en CSS, aunque también se emplean para javascript, php, asp, etc. Todo esto favorece enormemente la organización de los archivos del sitio y reduce la cantidad de código que debe escribirse.

También resulta muy importante, la colocación de los archivos en directorios que se encuentren en un orden lógico, ya que esto también colabora en la simplificación de los trabajos de mantenimiento y reforma.

Importancia de las URL descriptivas
Otra razón para emplear nombres descriptivos en archivos y directorios, es que todos ellos forman parte de la URL, elemento que tienen muy en cuenta los rastreadores de los buscadores. Esto agrega la posibilidad de emplear la URL como lugar donde colocar las palabras clave de nuestros contenidos, lo que facilita la clasificación por parte de los buscadores, y por consiguiente, colabora en el posicionamiento del sitio en ellos.

Imaginemos dos URL’s bien diferentes, una compuesta por el nombre del sitio y una serie de directorios y archivos con nombres complejos, y otra URL con nombre del sitio, los archivos y directorios con títulos descriptivos:

http://www:sitiocomplejo548.com/efs54/jlv.html
http://www:sitio _simple/archivos/estilo_web.html

¿Con cuál de las dos creen ustedes que los buscadores tendrán menos dificultades para clasificar los contenidos, y por tanto indexarla y colocarla en los listados? Evidentemente, la segunda opción es la más correcta. Los buscadores pueden emplear la URL como primer elemento a analizar y es una de las mejores formas de incluir palabras clave.

Cuando nos iniciamos en el diseño de páginas web, tendemos a pensar que la estructura de los archivos y directorios en que se encuentra organizada nuestra página, resulta de importancia menor. Sin embargo, como veremos en este artículo, a la hora de optimizar una página web resulta muy importante seguir una serie de medidas respecto de la organización de la estructura de los archivos.

Además, resulta importante también para quien administra el sitio, tener una estructura ordenada, ya que a la hora de introducir cambios, agregar nuevos contenidos, etc., la tarea puede resultar mucho más simple, con el consiguiente beneficio en tiempo y costos. Esto indirectamente beneficia a los usuarios, dado que todo el tiempo que se ahorre en tareas que pueden simplificarse, puede invertirse en contenidos. Si en algún momento se pretende hacer una reforma en la página, aumentar sus secciones, etc., la tarea se ve enormemente simplificada si los archivos que componen el sitio se encuentran ordenados y su contenido puede ser fácilmente identificable a través del nombre del archivo o del directorio. Como veremos más adelante, también tiene beneficios en el posicionamiento de la página.

1. Creamos 3 archivos .css (1 – para huéspedes, 2 – para muchachas, 3 – para muchachos)
Nota: no es necesario crear archivos css completamente diferentes. Será suficiente cambiar el color de los enlaces y texto.

2. Subimos todos los archivos .css en la raíz del gestor de archivos (Panel de Control: Inicio » Gestor de archivos).

3. Encontramos en el código de la plantilla este fragmento:

y lo sustituimos por este:

El centrado es requerido para que nuestro bloque esté en el centro. Por punto general es el primer bloque principal dentro del cual está el propio sitio web.

Aquí les quiero proponer 3 métodos principales del centrado que se utilizan durante la creación.

1. El primer método consiste en configurar las sangrías automáticas margin para la margen derecha e izquierda en las propiedades del bloque. Así logramos que con cualquier resolución el navegador independientemente resuelva la posición del bloque.

CSS:

HTML:

Nota: aquí prácticamente es imposible crear sangrías iguales arriba y abajo.

2. La esencia del segundo método es la utilización del atributo align=“center”.

CSS:

HTML:

Nota: nos vemos obligados a encuadrar nuestro bloque en un div más, en las propiedades del bloque será necesario configurar el formateo del texto por el margen izquierdo, de lo contrario así llamados “child elements” se centrarán. Será imposible crear sangrías iguales arriba y abajo.

3. Ahora utilizamos position: absolute. La idea de este método es que el bloque obtiene un valor de la posición del centro calculado en por ciento, después con ayuda de la sangría negativa se configura la columna:

CSS:

HTML:

Nota: se aumenta la dimensión del código CSS, pero ahora sí podemos centrar nuestro bloque perfectamente.

Haremos aquí un simple efecto de luz sobre elementos HTML con jQuery. La idea es que al posar el Mouse sobre un elemento, este se torne de cierto color (Blanco para así dar el efecto mas parecido a luz).

Es mas fácil de lo que se imaginan. No logra la calidad de Flash, aunque se podría, pero me da lata explicarlo.

Jquery cuenta con un método llamado "hover" el cual se basa en que si pasas el Mouse sobre el/los selector (es); podrá obtener evento de entrada y de salida (mouseover y mouseout).

Uso del método hover de jQuery

El segundo parámetro de el método es opcional, pero recomiendo siempre definir, aunque este vació.

Efecto FXlight en jQuery

Al posar el Mouse sobre el selector, se crea un atributo llamado "FXlight", el cual servirá para comprobar que no este en proceso (así, si pasas mil veces el mouse antes de que termine el efecto, este no se repite). Si todo anda bien, osea el atributo "FXlight" no existe, se activa el efecto y da opacidad "0.4", luego apenas esto termina da opacidad "1.0" (el máximo), lo cual genera una suerte de efecto de Luz.

Para que esto sea bien vistoso, propongo que usen el color blanco (#FFFFFF) como fondo (background-color), de manera que si pasan el mouse sobre el elemento y este esta con el fondo blanco( pero que no se vea, osea pongan una imagen por ejemplo, o bien, un elemento que tenga otro color, y este este dentro de un contenedor blanco ) se vera el efecto de luz muy mono.

Pueden ver un demo en este sitio web.