Top 10: mis sitios favoritos de junio

23 07 2007

Deberan perdonar el retraso de esta lista, pero he estado bastante ocupado en la publicación de otros artículos. Sin embargo aquí les dejo el listado de los sitios que he encontrado en la red, este pasado mes de junio.

Artículos Relacionados





Menu de Navegación con CSS y XHTML

4 07 2007

Una buena política de codificación de páginas que usen CSS y XHTML es importante para los motores de búsqueda y la accesibilidad. Aquí está, en un documento traducido del original: Site Navigation in CSS y HTML, el punto de vista de un buen amigo mío, aunque, en palabras de él mismo, siempre está dispuesto a escuchar otras opiniones. También, si no se está interesado en la explicación, puede verse la demo directamente o descargar el código funte, desde su sitio web.

El lenguaje HTML, actualmente, no tiene ninguna sintáxis de navegación semántica. HTML 5 está proponiendo “navegar” con significado. Pero, actualmente, como diseñadores no contamos con estas herramientas y debemos trabajar con lo que esté a mano. El método propuesto aquí a resultado funcionar muy bien, tiene un buen rendimiento y sencillo de interpretar para los motores de búsqueda.

Utilizando elementos comunes

Para entender bien este punto, debemos recordar que existen elementos para definir las cabeceras de un documento. Me refiero a las etiquetas H1 … H6, que son utilizadas para definir titulos. Algunos sitios, utilizan imágenes con el logotipo del proyecto, sitio o compañía para indicar al navegante que presionando sobre el mismo, regresará a la página de inicio. De parte de los programadores, tenemos el uso de listas para la creación del menú de navegación. Este es un buen método, recomendado por muchos expertos.

<div id = "header">
    <h1>
        <a href = "/" title = "Return to the Home Page">Your Company
                                                        Name </a>
    </h1>
    <ul>
        <li><a href = "/">Home</a></li>
        <li><a href = "/about-us">About Us</a></li>
        <li><a href = "/services">Services</a></li>
        <li><a href = "/portfolio">Portfolio</a></li>
        <li><a href = "/contact">Contact</a></li>
    </ul>
</div>

Con simplemente, copiar el código anterior, no puede apreciarse realmente el potencial del uso de listas para dibujar el menú de navegación. El codigo así, solamente es útil para el motor de búsqueda. Ahora, con CSS podremos apreciar como cambia la apariencia:

#header {
    width: 760px;
    float: left;
    background-color: #000;
}
#header h1 {
    float: left;
    font-size: 1em;
    text-indent:-9999px;
}
#header h1 a {
    width: 150px;
    height: 75px;
    background: #000 url(../images/logo.png) top left no-repeat;
    float: left;
    text-decoration: none;
}
#header ul {
    float: right;
    list-style: none;
}
#header li {
    margin-right: 0.1875em;
    display: inline;
    float: left;
    text-align: center;
    font-size: 1.6em;
}
#header li a {
    display: block;
    padding: 0em 0.625em 0.3125em 0.625em;
    color: #000;
    background-color: #ccc;
    text-decoration: none;
}
#header li a:hover {
    background-color: #fff;

    color: #000;
}

El comportamiento predeterminado de los elementos de una lista, es dibujarse hacia abajo, pero con el atributo float: left hará que todos se dibujen horizontalmente.





Top 10: mis sitios favoritos de mayo

2 07 2007

Como si nada, hemos terminado el mes de Mayo. En muchos países de América L átina, el mes de mayo representa el mes de celebración para nuestras madres. Y aquí, en Dot Press, el mes de mayo termina con un nuevo listado de los mejores sitios de Internet:

Artículos Relacionados





Top 10: mis sitios favoritos de abril

7 05 2007

Al igual que la lista pasada, donde comenté acerca de los mejores sitios que había encontrado en la red, en el mes de marzo, nuevamente realizo esta lista, ahora con mis stios favoritos de abril. En este artículo, nuevamente incluyo vínculos de diversas áreas:

Artículos Relacionados





Maquetando con DIV’s (ejemplo IV)

18 04 2007

Esta vez, fui vencido por mi propia creatividad, al tratar de realizar esta estructura con ocho divs. En este caso, me vi obligado a colocar otro DIV más para los bloques marcados con un color más fuerte. De todos modos, estoy contento de que, junto con ustedes, pude realizar esta estructura, aun más dinámica. Les prometo que para la siguiente vez, verán un diseño más dificil de maquetar y con solamente los DIV’s necesarios.

Aqui les dejo el codigo de este ejemplo para que lo estudien. El punto de esta maquetación es saber que los bloques que se colocan en flotante, si no tienen un alto igual, causaran que los siguientes caigan a la altura del más alto. Esto puede ser una ventaja o desventaja.

<div style = "display: table; width: 500px;">
    <div style = "float: left; width: 104px;">
        <div style = "float: left; height: 100px; width: 102px;"></div>
        <div style = "float: left; height: 143px; width: 102px;"></div>
    </div>
    <div style = "float: left; height: 250px; width: 100px;"></div>
    <div style = "float: left; height: 150px; width: 100px;"></div>
    <div style = "float: right; height: 50px; width: 175px;"></div>
    <div style = "float: right; height: 194px; width: 80px;"></div>
    <div style = "float: right; height: 194px; width: 87px;"></div>
    <div style = "float: right; height: 93px; width: 100px;"></div>
</div>

Solo como nota adicional, respecto a lo conveniente de maquetar con DIV’s, es que todos los ejemplos que les mostré en este tutorial fueron probados en: Mozilla Firefox 2.0, Opera Browser 9.0 e Internet Explorer 6 y todos resultaron en la misma estructura.

Articulos Relacionados:





Maquetando con DIV’s (ejemplo III)

17 04 2007

Este es el tercer ejemplo que publico, utilizando maquetación con DIV’s. Al igual que el artículo anterior, este ejemplo utiliza el método de dibujado del panel derecho, antes que el izquierdo. Aún sigo analizando el por que de este comportamiento, pero sin duda, sea cual sea la respuesta, permite un dibujado más limpio, optimizado y profesional.

 

<div style = "display: table; width: 500px;">
    <div style = "float: left; height: 250px; width: 78px;"></div>
    <div style = "float: right; height: 70px; width: 413px;"></div>
    <div style = "float: right; height: 173px; width: 150px;"></div>
    <div style = "float: right; height: 50px; width: 255px;"></div>
    <div style = "float: right; height: 115px; width: 255px;"></div>
</div>

Articulos Relacionados:





Maquetando con DIV’s (ejemplo II)

17 04 2007

Ahora, que ya hemos visto un ejemplo práctico del funcionamiento de la maquetación con DIV’s, veremos un ejemplo de un grado de complejidad más alto. Lo que, trataremos de dibujar es una estructura con un panel lateral a la derecha, dos subpaneles a la izquierda: uno debajo de otro y un panel de footer.

Muchos, podrián sugerir que para los subpaneles, se dibujase un contenedor. La verdad, antes de hacer este ejemplo, pensaba sugerirles eso, pero mientras lo realizaba me di cuenta de ciertos aspectos realmente interesantes. Por ejemplo, la lógica sería dibujar primero el primer subpanel de la izquierda. Pero, en este ejemplo en particular, decidi dibujar primero el panel de la derecha. Con esto, dibujar el primer subpanel de la izquierda, no sería complicado. Luego, dibuje el segundo subpanel y para mi sorpresa quedo debajo del primero y ajustado sin afectar su posición, ni la del panel de la derecha. Este mismo ejemplo, lo convine con otro subpanel a la derecha, despues del segundo subpanel y me a funcionado sin ningun problema. Con esto, se demuestra que la estructura de maquetación con DIV’s, realmente es dinámica.

<div style = "display: table; width: 500px;">
    <div style = "float: right; height: 160px; width: 78px;"></div>
    <div style = "float: left; height: 50px; width: 413px;"></div>
    <div style = "float: left; height: 103px; width: 413px;"></div>
    <div style = "float: left; height: 103px; width: 498px;"></div>
</div>

Articulos Relacionados:








Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.