Página 2 de 7«123467»
Moderador del foro: ZorG 
Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Algunas cositas interesantes y útiles (trátalas si quieres)
Algunas cositas interesantes y útiles
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 16 | 6:30 PM
Crear una Barra de Navegación en DreamWeaver

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:

  • Nombre de elemento:
    Servirá como referencia al elemento.

  • Imagen arriba:
    Acá se indicará la dirección relativa a la imagen que se encontrará de manera predeterminada (similar al estado OFF de las imágenes de sustitución o rollover).

  • Sobre imagen:
    En este campo se indicará la dirección relativa a la imagen que aparecerá cuando el cursor de mouse se encuentre encima (similiar al estado ON de las imágenes de sustitución o rollover).

  • Imagen Abajo:
    En este campo se indicará la dirección relativa a la imagen que hará aparición en el instante en el cual se haga click sobre dicha imagen.

  • Texto Alternativo:
    Este campo se refiere al texto que aparecerá cuando el cursor del mouse se encuentre varios segundos sobre la imagen en cuestión, normalmente este recurso se utiliza como referencia o explicación sobre la aplicación de la imagen.

  • 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.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 17 | 2:17 PM
    Formularios en DreamWeaver

    Todo sobre Formularios en DreamWeaver

    Esta lección nos enseñará qué es un formulario, para qué se utiliza, cómo insertar uno, qué elementos puede contener y cómo pueden validarse los datos introducidos en él.

    Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, hacer suscripciones a un boletín o revista que editemos, etc.

    Una vez el usuario rellena los datos y pulsa el botón para enviar el formulario se arrancará un programa que recibirá los datos y hará el tratamiento correspondiente (una base de datos por ejemplo).

    Aquí vamos a ver cómo crear el formulario básico, (insertar campos y botones en el formulario y validarlos) , pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones de programación, ya sea en SQL, en JavaScript o en otro lenguaje de programación, y esto no entra en los objetivos de esta lección.

    Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.

    Elementos de formulario
    Los elementos de formulario pueden insertarse en una página a través del menú Insertar, opción Objetos de formulario. A través de esta opción se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la página. Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, así como algunas de sus propiedades.

    Campo de texto y Área de texto: Permiten añadir un cuadro de texto. El Campo de texto solo permite escribir una línea al usuario, mientras que el Área de texto permite escribir varias. Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades. También es posible definirlo como Contraseña. A continuación tienes un ejemplo de cada uno de estos tres tipos.

    A través del inspector de propiedades es posible asignar también el ancho del cuadro de texto, el número máximo de líneas o caracteres, y el valor inicial del cuadro.

    Botón:
    Es el botón tradicional. El botón puede tener asignadas tres opciones: Enviar formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores).

    También es posible cambiar el texto del botón, a través del campo Etiqueta del inspector de propiedades.

    Casilla de verificación: Es un cuadrito que se puede activar o desactivar. Puede asignársele el estado inicial como Activado o como Desactivado.

    Botón de opción: Es un pequeño botón redondo que puede activarse o desactivarse. Si hay varios del mismo formulario, solo puede haber uno activado. Cuando se activa uno, automáticamente se desactivan los demás.

    Lista/Menú: Una lista o menú es un elemento de formulario que lleva asociada una lista de opciones. Los elementos se añaden a través de botón Valores de lista del inspector de propiedades. Cuando se trata de un menú, solo es posible elegir uno de los elementos, pero si se trata de una lista, a través de Selecciones puede permitirse que se seleccionen varios simultáneamente.

    Etiqueta: Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda saber qué datos ha de introducir en cada uno de ellos.

    Crear formularios
    Puedes crear formularios a través del menú Insertar, opción Formulario. Una vez creado un formulario, este aparecerá en la ventana de Dreamweaver como un recuadro formado por líneas rojas discontinuas, similar al de la imagen de siguiente.

    Dentro de dicho formulario se podrán insertar los elementos de formulario, que como ya sabes puedes insertarlos a través del menú Insertar, opción Objetos de formulario.

    Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.

    Validar formularios
    La validación de formularios sirve para hacer que Javascript valide el formulario antes de que se envíe el formulario, para que en el caso de que hayan campos del formulario que sean obligatorios, tengan que rellenarse antes de poder enviarse.

    Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir a través del menú Ventana, opción Comportamientos, o pulsando Mayús+F3.

    En el este panel hay que desplegar el botón pulsando sobre él, y en Mostrar eventos para elegir una versión de las actuales de entre la lista de navegadores. Por ejemplo, puedes elegir el navegador IE 6.0. Después de esto, hay que volver a desplegar el botón, y pulsar sobre la opción Validar formulario.

    Entonces se mostrará una ventana como la siguiente, donde aparecen todos los elementos del formulario.

    Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los requisitos que ha de cumplir. Puede establecerse como campo a rellenar obligatoriamente, y si su contenido ha de ser numérico, una dirección de correo electrónico, etc.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 18 | 5:52 PM
    10 errores comunes en diseño web

    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.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 19 | 12:09 PM
    Tamaño de una pagina web

    Que tamaño va a tener mi pagina web?
    Esta es una de las primeras preguntas que nos hacemos al diseñar una pagina web, sobre todo si estamos comenzando y para responder a esta pregunta vamos a reflexionar sobre las resoluciones de pantalla:

    La resolución de pantalla oscila entre 800 x 600 y 1024 x 768, esto es lo más común, sin embargo hay monitores mas grandes.

    Para una resolución de 800 x 600, debemos darle al tamaño del diseño web 768 x 500, para una resolución de 1024 x 768 vamos a utilizar un tamaño de 1000 x 500.

    Si utilizamos Photoshop para realizar el diseño de la interfaz de la pagina web, vas a usar las medidas que mensioné arriba, pero en Dreamweaver debemos armar las tablas o realizar la maquetacion de la pagina web, llamando a cada tabla que nos genera photoshop e insertandola dentro de la celda que queremos que se muestre. Como se hace eso?, ahora te explico.

    Al realizar los cortes en Photoshop y “Guardar para Web” en Phosothop CS o “Save for web and Devices” en photoshop CS3, el programa genera un archivo html y una imagen correspondiente para cada sector dibujado en Photoshop las cuales ubica en un a carpeta llamada “images” un nivel superior a partir del archivo html.

    OJO: No te recomiendo realizarle modificaciones a este archivo html, recuerda que esta enlazado y es 100% dependiente del arhivo psd, esto significa que cada cambio realizado en el archivo psd y luego guardado para web, va a modificar este archivo por lo que conviene mejor “guardarlo como” con otro nombre y preferiblemente en otra ubicación siempre dentro de la carpeta raíz de nuestro sitio.

    Ejemplo:
    Tienes la siguiente estructura en tu sitio:

  • raíz;
  • imágenes;
  • animaciones;
  • documentos.

    Agrega otra carpeta para que tu sitio quede así:

  • raíz;
  • imágenes;
  • animaciones;
  • documentos;
  • cortes.

    En esta carpeta “cortes” guarda los archivos html generados por Phosothop, y los archivos que vas a modificar guárdalos dentro de “raíz”.

    Esto implica otro cambio al código, y es en lo referente a las rutas: originalmente las imagenes se mandan a llamar de la siguiente manera < img src = ” images / archivo.jpg “ >, pero al realizar el cambio la ruta deberá quedar < img src = ” cortes / images / archivo.jpg “ >, si lo haces directamente desde Dreamweaver archivo / guardar como no tendrás que modificar nada en el código, ya que Dreamweaver te pregunta si deseas actualizar los vínculos, a lo cual deberás contestar SI.

    Como podrás observar en Dreamweaver no haces mucho, todo lo realizas en Photoshop.

    Pero que sucede si el cliente solicita que la pantalla se agrande?, que no sea de un tamaño fijo de pantalla sino mas bien se amplíe y adapte a cualquier resolución que visite el sitio web.

    mmmm… sencillo, aquí debemos trabajar con el ancho de las tablas, creo que aquí vas a trabajar con código, jeje. tongue En un documento nuevo de Dreamweaver debes insertar una tabla de 2 o 3 columnas (depende de como tengas el diseño).

    El código se veria asi (2 columnas)

    Quote
    < table width=100% >
    < tr >
    < td width = 200 >aquí insertas la columna izquierda < / td >
    < td width= 100% >aquí insertas la columna del contenido de la pagina < / td >
    < / tr >
    < / table >

    Si es de 3 columnas

    Quote
    < table width=100% >
    < tr >
    < td width = 200 >aquí insertas la columna izquierda < / td >
    < td width = 100% >aquí insertas la columna del contenido de la pagina < / td >
    < td width = 200 >Aquí la columna de la derecha < / td >
    < / tr >
    < / table >

    Al final el código de tu pagina web debería tener este aspecto:

    Quote
    < table width = 100%>
    < tr >
    < td >Esta tabla se reserva para el TOP < / td>
    < / tr >
    < /table >

    < table width=100% >
    < tr >
    < td width = 200 >aquí insertas la columna izquierda < / td >
    < td width = 100% >aquí insertas la columna del contenido de la pagina < / td >
    < td width = 200 >Aquí la columna de la derecha < / td >
    < / tr >
    < / table >

    Para finalizar déjame hacerte una aclaración: Lo ultimo que vimos es para que nuestra pagina web se adapte a cualquier resolución, pero siempre tiene una medida mínima, es decir, si originalmente la diseñaste para una resolución de 1000 x 500 (ver explicación arriba), en un monitor de 800 x 600 va a verse la barra de desplazamiento horizontal.

    Tómalo en cuenta.

    Saludos

    Espero les haya sido de utilidad.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 20 | 5:30 PM
    9 principios para buen diseño Web

    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.


    Click on the image to view it in full size.

    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.


    Click on the image to view it in full size.

    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.


    Click on the image to view it in full size.

    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.


    Click on the image to view it in full size.

    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.


    Click on the image to view it in full size.

    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.


    Click on the image to view it in full size.

    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.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 21 | 12:11 PM
    Flujo HTML y atributos CSS

    El flujo HTML es el modo en el que se van colocando los componentes de la página, a partir de cómo aparecen en el código HTML y los atributos CSS de los elementos.

    Merece la pena detenerse a explicar lo que es el flujo HTML, pues es un concepto sencillo y básico para poder entender muchos asuntos acerca del posicionamiento web y en concreto el posicionamiento con CSS.

    El flujo de la página es algo así como el flujo de escritura de elementos dentro del lienzo que nos presenta el navegador. Sabemos que las páginas web son codificadas en HTML y los elementos aparecen en el código en una posición dada. El navegador, en el momento que interpreta el código HTML de la página, va colocando en la página los elementos (definidos por medio de etiquetas HTML) según los va encontrando en el mismo código.

    Por ejemplo, pensemos en una página que tiene un titular con H1, luego varios párrafos y alguna imagen. Pues si lo primero que aparece en el código HTML es el encabezamiento H1, pues ese encabezado aparecerá en la página también en primer lugar. Luego se colocarán los párrafos y si la imagen aparecía en el código por último, en la página también aparecerá al final. Es decir, los elementos aparecen colocados tal como estén ordenados en el código. A esto se le llama el flujo HTML, la colocación de los elementos en el lugar que corresponda según su aparición en el código.

    Esto en general ocurre con cualquiera de los elementos de la página. Sin embargo, hay algunos atributos HTML que pueden marcar distintas propiedades en el flujo, como que una imagen se alinee a la derecha, con align="right", con el texto del párrafo que pueda haber a continuación rodeando la imagen. Pero con HTML, si por ejemplo, una imagen va antes que un párrafo, nunca vamos a poder intercambiar sus posiciones y colocar la imagen detrás del párrafo que le sigue en el código.

    Esto no ocurre de igual manera cuando trabajamos con CSS, puesto que existen diversos atributos que pueden cambiar radicalmente la forma en la que se muestran en la página, por ejemplo el atributo position que puede definir valores como absolute, que rompe el flujo de la página, o mejor dicho, saca del flujo de la página al elemento que se le asigna.

    Comportamientos inline y block y cómo afectan al flujo de la página
    Cuando tratamos con etiquetas, existen dos modos principales de de comportamiento. Etiquetas como una imagen, o una negrita, que funcionan en línea ("inline"), es decir, que se colocan en la línea donde se está escribiendo y donde los elementos siguientes, siempre que también sean "inline" se posicionan todo seguido en la misma línea. Tenemos por otra parte los elementos que funcionan como bloque ("block") que implican saltos de línea antes y después del elemento. Por ejemplo, los párrafos o encabezamientos son elementos con comportamiento predeterminado tipo "block".

    Dos etiquetas muy utilizadas en la maquetación CSS son DIV y SPAN. Una de las diferencias principales es que DIV funciona con comportamiento "block" y SPAN funciona como "inline". En realidad este es el comportamiento por defecto, puesto que nosotros con CSS en cualquier momento podemos cambiarlo por medio del atributo display. Por ejemplo:

    Quote
    <div style="display: inline;">
    Este elemento funcionará en línea
    </div>

    O bien:

    Quote
    <span style="display: block;">
    Este span ahora funciona como bloque
    </span>

    Realmente ambas posibilidades funcionan dentro del flujo HTML normal, así que, tanto los elementos display inline como display block, se encuentran dentro del flujo HTML estándar, la única diferencia es que los bloques se escriben en líneas independientes, es decir, con saltos de línea antes y después del elemento, así como una cantidad de margen arriba y abajo que depende del tipo de elemento de que se trate.

    Atributo CSS Float y el flujo
    Otro atributo que afecta al fluir de los elementos en la página es el atributo float de CSS, que se utiliza bastante en la maquetación web. Este atributo podemos utilizarlo sobre elementos de la página de tipo "block" y lo que hace es convertirlos, en "flotantes" que es un comportamiento parecido a lo que sería el mencionado anteriormente "inline". Con float podemos indicar tanto left como right y conseguiremos que los elementos se posicionen a la izquierda o la derecha, con el contenido que se coloque a continuación rodeando al elemento flotante. La diferencia es que los elementos continúan siendo tipo "block" y aceptan atributos como el margen (atributo CSS margin), para indicar que haya un espacio en blanco a los lados y arriba y abajo del elemento.

    Por ejemplo, los elementos de las listas (etiqueta LI) son por defecto de tipo "block", por eso aparecen siempre uno abajo de otro, en líneas consecutivas. Pero nosotros podríamos cambiar ese comportamiento con:

    Quote
    li{
    float: right;
    }

    Así, una lista como esta:

    Quote
    <ul>
    <li>Elemento1</li>
    <li>Elemento2</li>
    <li>Elemento3</li>
    </ul>

    Veríamos como el primer elemento aparece a la derecha del todo y los otros elementos van colocándose en la misma línea en el siguiente espacio libre que haya. Así, el segundo elemento se colocaría en la misma línea, todo a la derecha que se puede, conforme al espacio que se tenga en el contenedor donde estén colocados.

    Flujo y el atributo position
    El atributo position de CSS sí que es capaz de cambiar radicalmente el flujo de los elementos de la página. Este atributo por defecto tiene el valor "static", que indica que el elemento forma parte del flujo HTML normal de la página.

    Sin embargo, con el atributo CSS position, podemos indicar otros valores que hacen que los elementos salgan del flujo HTML y se posicionen en lugares fijos, que no tienen que ver con la posición en la que aparezcan en el código HTML. Por ejemplo:

    Quote
    <div style="position: absolute; top: 10px; left: 100px;">
    Este elemento tiene posicionamiento absoluto
    </div>

    Hace que ese elemento quede fuera del flujo de elementos en la página y entonces aparecería en el lugar que se indica con los atributos top y left (top indica la distancia desde la parte de arriba y left la distancia desde el borde izquierdo). Los otros elementos que formen parte del flujo de la página no quedan afectados por los elementos con posicionamiento absoluto.

    Otro valor para el atributo position que hace que los elementos queden posicionados fuera del fluir normal de elementos en la página es "fixed".


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 22 | 6:13 PM
    Slickmap CSS: tu Mapa de Sitio con estilo

    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 »


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 23 | 1:16 PM
    Cómo hacer que todos los navegadores rendericen HTML5 (incluso IE6)

    HTML 5 presenta una gran cantidad de herramientas geniales para los diseñadores que desean que su código sea legible y semánticamente significativo.

    En este tutorial les voy a enseñar cómo crear un diseño común utilizando algunos de los nuevos elementos semánticos de HTML5 y luego implementaremos JavaScript y CSS para que sea compatible con IE, incluso con el maldito IE6.

    Revisión rápida de los elementos de HTML5
    HTML5 pone a nuestra disposición un conjunto de nuevos elementos semánticamente significativos para describir el diseño típico de una página web. Utilizarlos hace que sea más fácil para uno leer y reconocer el código, y les facilita a los motores de búsqueda y a los lectores leer y organizar el contenido.

    Los elementos HTML 5 que estaremos utilizando son:
    • header
    • footer
    • nav
    • article
    • hgroup

    Simplemente leyendo los nombres de los elementos tendrán una buena idea de para qué sirven, y ese es el punto. Ahora se puede parar de abusar del tag <div> en todos los diseños carentes de tablas, y en su lugar crear titulares <header> y pies de página en base a <footer>.

    El elemento que puede no ser tan obvio es <hgroup>. Este elemento simplemente define un grupo de encabezados (<h1> - <h6>) para que puedas agrupar el título y subtítulo de un artículo de un blog juntos, por ejemplo. Sería algo así como la cabecera de la sección de contenido.

    Paso 1: HTML
    Vamos a recrear el diseño más común de la web, el de 2 columnas:

    Este layout usualmente se logra con una cascada de elementos <div> pero con HTML5 se puede lograr de una forma muy natural:

    Quote
    <!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <html>
    <head>
    <title><!-- Your Title --></title>
    </head>

    <body>
    <header>
    <!-- ... -->
    </header>

    <nav>
    <!-- ... -->
    </nav>

    <div id="main">
    <!-- ... -->
    </div>

    <footer>
    <!-- ... -->
    </footer>
    </body>
    </html>

    Y además, dentro de elemento "main", vamos a agregar algunos templates simples de artículos:

    Quote
    <article>
    <hgroup>
    <h2>Title</h2>
    <h3>Subtitle</h3>
    </hgroup>

    <p>
    <!-- --->
    </p>
    </article>

    Ahora tenemos un esqueleto completo en HTML5 que no utiliza más que las etiquetas significativas para todo el contenido. Fácil de leer, de analizar y de diseñar.

    Si se preguntan por qué no se utilizó el elemento "section", en lugar de un <div> para la columna principal: la razón es que el elemento section no es un elemento contenedor genérico. Cuando un elemento se necesita para propósitos de estilo o como conveniencia para scripting, es recomendable utilizar el elemento <div>.

    Paso 2: CSS
    Posicionar todos estos elementos sería fácil si todos fueran divs, ya que sabemos la forma en que son manejados por todos los navegadores, así que sabemos cómo escribir CSS para ellos.

    Sin embargo, además, todos los navegadores aplican una hoja de estilo predeterminada a una página. Incluso si no has especificado ninguna, hay CSS aplicándose cada vez que una página que has escrito se carga en Firefox o IE.

    Por ejemplo, aquí está el estilo aplicado a un <div> en el archivo "html.css" por defecto que viene con Firefox:

    Quote
    html, div, map, dt, isindex, form {
    display: block;
    }

    ¿Pero qué sucede cuando un navegador se encuentra con un elemento que no reconoce? Nosotros no podemos estar seguros. Puede ser que no consiga ningún estilo; podría heredar un cierto estilo por defecto; es posible que no se muestre en absoluto.

    Por lo tanto, debemos aseguramos de dar estilo a todos y cada uno de nuestros nuevos elementos en nuestro propio CSS. Sin hacer suposiciones:

    Quote
    /* Hacer que los elementos de HTML 5 tengan display:block
    para mantener una coherencia */
    header, nav, article, footer, address {
    display: block;
    }

    Ahora podemos tratar a estos elementos como divs, seguros de que se mostrarán de forma consistente.

    El Problema
    Echemos un vistazo a nuestra disposición hasta el momento. Vean nuestro diseño en Safari 4:

    Sin embargo, miren lo que sucede en Internet Explorer 6:

    ¿Qué hay de malo en esta imagen? Al establecer explícitamente display:block; en CSS, deberíamos haber comunicado al navegador nuestras intenciones para este elemento.

    Desafortunadamente, IE está haciendo caso omiso de los elementos que no reconoce, independientemente del CSS. Nuestro contenido se queda flotando en el contenedor padre, como si los elementos de HTML5 no existieran.

    De alguna manera, tenemos que hacer que IE renderice esos elementos desconocidos, y ya notamos que un estilo de la manera adecuada no va a lograrlo.

    Paso 3: Javascript
    Afortunadamente, hay una forma de lograr que IE reconozca los nuevos elementos con un poco de Javascript.

    Esta técnica fue difundida en el blog de Jhon Resig, se llama "HTML 5 Shiv":

    Consiste simplemente en involucrar la llamada document.createElement() para cada elemento nuevo que no se reconoce.

    Tradicionalmente harías esta llamada para inyectar un elemento de forma directa en alguna rama del DOM; en otras palabras, en un contenedor existente dentro de una etiqueta <body>.

    Puedes utilizar esto para arreglar el problema de los elementos desconocidos también. Sin embargo, este truco también funciona llamando document.createElement() en la etiqueta <head>, sin tener que hacer referencia a un elemento contenedor. Esto lo hace todavía mucho más fácil de leer y escribir:

    Quote
    document.createElement("article");
    document.createElement("footer");
    document.createElement("header");
    document.createElement("hgroup");
    document.createElement("nav");

    Ahora que hemos añadido el JavaScript, veamos otra vez a Internet Explorer 6:

    Perfecto. Internet Explorer 6 ahora está renderizando el código HTML 5 tan bien como Safari 4.

    Conclusión
    HTML 5 es realmente excitante para cualquier diseñador web que desee generar código limpio, fácil de leer y semánticamente significativo. Y con sólo un par de pasos simples, una línea de CSS y una de JS por elemento, podemos comenzar a implementar HTML5 en nuestros sitios sin problemas hoy mismo.
    ¿Ya has probado esta técnica?


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 24 | 12:20 PM
    Estructura de una página web: Como estructurar los archivos

    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:

    Quote
    <img src=”imágenes_de_pagina_web/imagen-azul.jpg” alt=”” />

    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.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 25 | 5:26 PM
    Cómo recuperar archivos eliminados

    Por la forma de almacenamiento de los discos duros, cuando un archivo es borrado de la papelera de reciclaje no desaparece totalmente. Los archivos eliminados son simplemente marcados como tales y la información puede recuperarse bajo ciertas condiciones.

    Cuando un archivo se borra de la papelera de reciclaje, el sistema sólo lo marca como eliminado y, por lo tanto, queda físicamente en el disco duro, pero no es más visible por el usuario. La información del fichero, en estas condiciones, puede verse afectada en cualquier momento, puesto que otro archivo nuevo puede reemplazarla físicamente en el disco. A veces un archivo puede recuperarse íntegramente o sólo partes, dependiendo si fue o no reemplazado físicamente en el disco duro por otra información.

    Un fichero puede borrarse manualmente al vaciar la papelera de reciclajes o al ser eliminado directamente; pero también puede verse eliminado por un virus, por programas liberadores de espacio que lo consideraron poco importante, etc. Por lo tanto es siempre útil tener una herramienta recuperadora a nuestro alcance.

    ¿Cómo actuar cuando queremos recuperar archivos perdidos?

    La situación ideal sería darse cuenta inmediatamente que se han eliminado archivos que consideramos importantes. A partir del momento que han sido eliminados, si se sigue utilizando ese disco duro, la información de los archivos borrados puede ir perdiéndose de a poco a medida que es reemplazada por otra información. Por lo tanto es importante dejar de usar el disco duro en cuestión.

    Lo más adecuado sería poseer un segundo disco duro (configurado como maestro), donde debe estar el sistema operativo, y así poder acceder al otro disco duro (configurado como esclavo) sin afectar su información. Muchas veces no es posible acceder a un segundo disco duro con un sistema operativo, así que puede llevar su disco rígido a otra computadora y conectarlo como esclavo en ella y así usar el sistema operativo de esa computadora para acceder a su disco. En este paso, también puede aprovechar y llevarle el disco duro a un técnico que le recuperará los datos de forma segura.

    Si, de todas maneras, no desea trasladar el disco duro a ningún lado, puede intentar recuperar la información desde el mismo sistema operativo donde se perdieron los archivos. Esto implica un riesgo, el cual puede crecer o disminuir dependiendo de muchos factores:

    • Espacio libre disponible: a mayor espacio libre en disco, menos posibilidades hay de que otros archivos reemplacen justamente los archivos eliminados.
    • Tiempo transcurrido desde que se eliminaron los archivos: Puesto que el sistema operativo en sí mismo lee y graba archivos en el disco duro, a medida que pasa el tiempo el mismo sistema puede reemplazar la información perdida.
    • Instalación de programas: al instalar programas se graba información en el disco, con la consecuente elevación del riesgo de perder los archivos borrados. Incluso el mismo programa que instalaremos y utilizaremos para recuperar la información puede afectar los ficheros perdidos.

    Igualmente existen programas, como el que recomendaremos en esta nota, que no necesitan instalación y pueden ejecutarse directamente desde un disquete o CD y, de esta manera, se evita utilizar el disco rígido que posee los archivos eliminados, minimizando los riesgos.

    Recuperación de los archivos borrados

    Para recuperar los archivos perdidos necesitaremos un programa especial que lo haga. En el mercado existen decenas de este tipo de programas tanto gratuitos como pagos.

    Si posee ese segundo disco duro con Windows o instaló su disco en otra computadora, debe proceder a instalar el programa de recuperación de archivos.

    Aquí utilizaremos “Restoration 2.5.14”, un muy buen recuperador de archivos. La mayoría de estos programas son muy parecidos entre sí, así que podremos utilizar otros también. Como se dijo anteriormente, este programa permite funcionar sin ser instalado, por lo tanto puede copiarse a un disco (CD, disquete, DVD) y ejecutarse directamente desde allí.

    Al abrir el programa desde “Restorarion.exe”, podemos ver que es sumamente sencillo, sin demasiadas opciones. A la derecha, en “Drives”, tenemos los distintos dispositivos de almacenamiento, debemos elegir cuál es el que posee los archivos que queremos recuperar. Inmediatamente abajo tenemos un campo de búsqueda, allí va el nombre o parte del nombre del archivo a recuperar.

    Por ejemplo: Si queremos recuperar un archivo llamado documento.doc, simplemente debemos escribir en el campo de búsqueda: documento.doc. Si queremos que nos de una lista de los archivos TXT (de texto) eliminados podemos buscar “txt” en el campo de texto.

    Si el archivo o los archivos han sido encontrados, se mostrarán en la lista. Se deben seleccionar y presionar el botón de la derecha “Restore by copying” y deberemos elegir la carpeta donde se restaurarán. Lo recomendable sería elegir una carpeta que no esté en el mismo disco duro desde donde se están recuperando los archivos, o sea, en otro disco duro de la PC, o directamente hacia un disquete.

    El programa es sumamente sencillo y puede descargarse desde: http://www3.telus.net/mikebike/Restoration.zip

    La página oficial del programa es: http://www3.telus.net/mikebike/RESTORATION.html

    Existen otros programas gratuitos y pagos que tienen más y mejores opciones para recuperar archivos perdidos. Puede ver una lista de este tipo de programas en el sitio Softonic: http://www.softonic.com/seccion/667/Recuperacion

    Lamentablemente, es imposible garantizar una recuperación 100% efectiva de los archivos que han sido eliminados, por eso, la mejor manera de no tener que pasar por una situación de estas características, es mantener un respaldo (backup) de nuestra información más importante.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 26 | 12:01 PM
    Dinámica de CSS

    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:

    Quote
    <head>
    <title>[TITLE]</title>
    <link type="text/css" rel="StyleSheet" href="http://s22.ucoz.net/src/css/191.css" />
    </head>

    y lo sustituimos por este:

    Quote
    <head>
    <title>[TITLE]</title>
    <?if(!$USER_LOGGED_IN$)?><link type="text/css" rel="StyleSheet" href="/1.css" /><?endif?>
    <?if($USER_GENDER_ID$='1')?><link type="text/css" rel="StyleSheet" href="/2.css" /><?endif?>
    <?if($USER_GENDER_ID$='2')?><link type="text/css" rel="StyleSheet" href="/3.css" /><?endif?>
    </head>

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 27 | 12:35 PM
    CÓDIGO ÚNICO $URI_ID$

    Aquí les quiero explicar cómo se puede agregar un texto a la página que no está en Gestión de diseño. Para poder agregar texto a tales páginas, hay que utilizar correctamente operadores condicionales.

    Supongamos que el código de abajo es una plantilla:

    Quote
    <?if($URI_ID$='PÁGINA')?>TEXTO<?endif?>

    PÁGINA – valor del código $URI_ID$
    TEXTO – texto necesario

    El código $URI_ID$ (código único para cada página) lo podemos conocer de manera siguiente:

    • pasamos a la página necesaria (por ejemplo: página de adición de noticias);
    • en la barra de administrador hacemos clic en Constructor – Lista de variables de la página – $URI_ID$:

    Para la página de adición noticia del sitio el código es $URI_ID$ = nwAdd0.

    O sea, para poner un texto en la página hemos de pegar el código siguiente:

    Quote
    <?if($URI_ID$='nwAdd0')?>ТЕXTO<?endif?>

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 28 | 2:48 PM
    MÉTODOS DE CENTRAR UN BLOQUE

    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:

    Quote
    #wrap {margin: 0px auto; width: 600px; height: 400px; background: #000 }

    HTML:

    Quote
    ...
    <body>
    <div id="wrap">Текст</div>
    </body>

    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:

    Quote
    #wrap {width: 600px; height: 400px; background: #000;text-align: left }

    HTML:

    Quote
    ...
    <body>
    <div align="center">
    <div id="wrap">Теxto</div>
    </div>
    </body>

    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:

    Quote
    #wrap {position: absolute; left: 50%; top: 50%; margin-left: -300px; margin-top: -200px; width: 600px; height: 400px; background: #000 }

    HTML:

    Quote
    ...
    <body>
    <div id="wrap">Тexto</div>
    </body>

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


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 29 | 4:50 PM
    Simular frames (marcos) con HTML y CSS

    A pesar de ser un recurso muy interesante desde el punto de vista de las posibilidades que genera, tanto para los webmasters como para los usuarios, el uso de frames o marcos ha sido cuestionado debido a que supone dificultades para el posicionamiento en buscadores de la página que los utiliza.

    Sin embargo, en el caso de que se desee utilizar algo similar para brindar a los usuarios la posibilidad de cambiar los contenidos que se muestran en la página mediante el uso de un menú (sin que esto implique navegar a otra página) puede utilizarse un recurso CSS que mostraremos a continuación y simular la utilización de marcos.

    Principios de funcionamiento
    El “secreto” de este recurso consiste en que ambos contenidos se encuentran presentes en dos capas superpuestas. El efecto se consigue con la utilización de capas con posicionamiento absoluto, con ancho y alto fijos, y cuyos contenidos que desborden no sean visibles utilizando el valor “hidden” de la propiedad “overflow”.

    Se utilizan enlaces para que “llamen” al contenido deseado, el que en forma automática se mostrará por encima del otro contenido.

    Desarrollo
    El archivo HTML
    Trabajaremos con dos archivos, el HTML y un archivo CSS. Para el ejemplo, hemos elegido crear una página en XHMTL 1.1. Colocaremos en el encabezado del documento el título del mismo y el enlace para la hoja de estilo.

    Luego de colocar el título mediante el uso de etiquetas h1, ubicaremos las dos capas principales, que tendrán posicionamiento absoluto. La primera, que tendrá el identificador “columna”, que contendrá la lista que hace las veces de menú. La segunda, llamada “contenido”, que será la que tendrá en su interior las dos capas con los contenidos que se alternarán, que tendrán los identificadores “marco1” y “marco2”.

    Dentro de éstos últimos, colocaremos contenidos de ejemplo, para mostrar el efecto en toda su magnitud. En los ítems del menú que se colocará en la columna izquierda, se colocarán enlaces a las “marco1” y “marco2”, que son enlaces internos. Cuando se coloca un enlace interno, nos lleva a una parte de la página donde hemos colocado un ancla. En este caso, se utilizan los propios identificadores CSS como destino de los enlaces, solo que en lugar de navegar a otra parte de la página, se nos mostrará una capa que se encuentra oculta por otra:

    Quote
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">

    <head>
    <title>Ejemplo</title>
    <link rel="stylesheet" type="text/css" href="estilo.css" />
    </head>
    <body>
    <h1>Ejemplo de simulación de marcos o frames</h1>

    <div id="columna">
    <h2>Menú</h2>
    <ul>
    <li><a href="#marco1">Marco 1</a></li>
    <li><a href="#marco2">Marco 2</a></li>
    </ul>
    </div>

    <div id="contenido">
    <div id="marco1">
    <h2>Contenido 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper sem quis felis pulvinar laoreet. Donec euismod erat semper diam sodales non vehicula mauris elementum. Aliquam commodo sollicitudin nisl, eget consequat turpis tempor vitae. Suspendisse rhoncus erat nec tellus vulputate ac egestas nulla tristique. Mauris nisl enim, fringilla non dapibus ac, tincidunt ullamcorper ligula. Etiam ut tellus eros. Donec congue dignissim feugiat. Aenean pellentesque convallis leo ut facilisis. Vestibulum ac turpis quis felis vestibulum vulputate a ac eros. Aenean ultricies sapien quis sapien congue nec rhoncus ligula consectetur. Nam dolor orci, feugiat vel vestibulum sit amet, pellentesque quis sem. Proin tempus mauris quis lacus tempus fringilla. Cras ut justo nec nunc porta hendrerit.</p>
    25 <p>Nulla turpis nunc, posuere at varius a, fermentum non orci. Aenean condimentum erat vel justo luctus consequat. Donec vehicula erat in risus pretium faucibus. Curabitur tempus vehicula libero non commodo. Nullam eu mauris a nulla molestie sodales eu vitae ligula. Nulla elementum sem quis dolor tincidunt nec pellentesque mauris ultrices. Maecenas imperdiet, erat ac porta rutrum, metus elit lacinia lectus, sit amet pulvinar risus metus quis tortor. Morbi sed nisi turpis, sit amet convallis nulla. Fusce quis ullamcorper mauris. Integer commodo semper posuere. Fusce elementum nisl ac augue consequat nec pulvinar dolor laoreet. Mauris nulla tortor, mollis quis imperdiet vel, rhoncus quis erat. Aliquam lectus metus, consectetur vitae feugiat vel, tincidunt nec velit. </p>
    </div>

    <div id="marco2">
    <h2>Contenido 2</h2>
    <p>Nam urna nisl, blandit vitae molestie id, mattis ut augue. Ut sit amet libero felis, at scelerisque neque. Nulla luctus porta sapien, vel imperdiet odio euismod et. Donec id adipiscing felis. Nam pellentesque mollis pellentesque. Aliquam vel diam nec ante consectetur auctor sed vitae augue. Fusce erat massa, volutpat ac vulputate ac, dictum non arcu. Phasellus suscipit bibendum massa vel iaculis. Nullam bibendum viverra orci id aliquet. Duis consequat neque id lectus aliquet sed feugiat nisl adipiscing. Nunc suscipit est nec purus faucibus ultrices. </p>
    <p>Mauris at velit nulla, id bibendum neque. Nullam et augue id elit convallis fringilla vel non urna. Nulla lectus ante, fermentum nec dapibus vitae, tincidunt vel lectus. Pellentesque luctus quam a mi mollis gravida. Curabitur est lorem, aliquam sed varius nec, adipiscing vel sapien. Donec at tortor tellus. Suspendisse vitae neque vitae odio mollis ultricies ac sed mi. Aenean et nisl non mauris molestie tempor et sed eros. Maecenas scelerisque placerat eros et bibendum. Mauris venenatis, enim sodales elementum consectetur, tellus nisi euismod sem, dapibus pulvinar lectus lorem nec enim. Quisque auctor fermentum scelerisque. Etiam sed nulla quis eros pellentesque convallis sit amet eu neque. Aenean mattis placerat vehicula. Cras eget lacus odio. Cras commodo fringilla pharetra. In eget lacus metus, dignissim rutrum diam. Fusce sed magna ut nulla cursus feugiat. Fusce fringilla quam id quam auctor feugiat. Nulla tincidunt venenatis diam, in varius libero imperdiet vitae. </p>
    </div>
    </div>

    </body>
    </html>

    El archivo CSS
    Lo más interesante de este ejemplo se encuentra en las propiedades CSS y en la utilización de los enlaces para llamar a las capas. En primer lugar, se colocarán todas las propiedades necesarios para dar un determinado formato a los distintos elementos que componen la página, como párrafos, títulos, listas, etc.

    Luego detallaremos las propiedades de la capa que contendrá la lista y que servirá como una especie barra lateral (sidebar), cuyas propiedades no detallaremos porque no tienen interés para el ejemplo.

    La capa “contenidos”, también tiene posición absoluta y se ha determinado que el contenido que la desborde no sea visible, ya que de otro modo, cuando una de las capas tiene contenido excesivo, este desbordará hacia abajo, aún cuando la capa visible sea la otra.

    Finalmente, se han dado las dimensiones para las capas “marco1” y “marco2”, que simplemente serán de 100% tanto para el ancho como para la altura, ocupando la totalidad de la capa que los contiene. Gracias a ello, cuando una de las dos capas es llamada por el enlace correspondiente, ésta cubre totalmente a la otra capa.

    Quote
    html {
    font: normal 13px arial,helvetica,sans-serif;
    }

    h1 {
    text-align: center;
    color: #987;
    }

    h2 {
    text-align: center;
    color: #777;
    }

    ul {
    list-style: circle;
    color: #888;
    }

    ul li a {
    color: #888;
    text-decoration: none;
    font-weight: bold;
    }

    ul li a:hover {
    color: #f00;
    }

    p {
    color: #456;
    }

    /* Capas del ejemplo */

    div#columna {
    border: solid 1px #ccc;
    position: absolute;
    left: 30px;
    top: 80px;
    width: 150px;
    height: 350px;
    }

    div#contenido {
    border: solid 1px #ccc;
    position: absolute;
    overflow: hidden;
    left: 200px;
    top: 80px;
    width: 580px;
    height: 350px;
    padding: 0 20px;
    }

    div#marco1, div#marco2 {
    height: 100%;
    width: 100%;
    }

    Conclusión
    Este es otro ejemplo de como, con elementos muy simples de HTML y CSS, se pueden conseguir efectos que suplanten a elementos más complejos y que pueden darnos dificultades en el posicionamiento o en la accesibilidad de la página.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 30 | 1:11 PM
    Animaciones sobre botones en HTML con jQuery

    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

    Quote
    jQuery( selector ).hover( function(){
    //MouseOver...
    },
    function(){
    //MouseOut...
    });

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

    Efecto FXlight en jQuery

    Quote
    jQuery('.FXlight').hover(function(){
    if(jQuery(this).attr('FXlight')==undefined){
    jQuery(this).attr('FXlight',true).animate({
    opacity:0.4
    },250).animate({
    opacity:1.0
    },250,function(){
    jQuery(this).removeAttr('FXlight');
    });
    }
    },function(){});

    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.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Algunas cositas interesantes y útiles (trátalas si quieres)
    Página 2 de 7«123467»
    Búscar: