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

Anuncios




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:





CSS: estilos por defecto

4 04 2007

Cuando un explorador interpreta un archivo CSS y no encuentra algunos valores, renderiza el estilo con los valores por defecto que trae programados. Es por eso, que algunas veces un objeto con una clase CSS puede verse de distinta forma de explorador en explorador. Sin embargo, existe una técnica que consiste en declarar valores por defecto en la hoja CSS para que los exploradores puedan renderizar correctamente nuestro estilo, además de algunas técnicas importantes para que podamos realizar hojas de estilo flexibles y adaptables.

Comentando el código: Es importante que el archivo de estilos esté documentado. Según la propuesta de Andy Budd, es importante incluir un número de versión, dirección de correo electrónico, etc. con el objetivo de hacer fácil el mantenimiento y control de cambios.

Decidiendo como dividir las hojas de estilo: Muchos de nosotros, solemos utilizar una única hoja de estilo para el diseño de todo un sitio. Esto no es muy adecuado, dado que lo que estamos haciendo es desperdiciando ancho de banda, cada vez que una página es solicitada, mandando toda una hoja de estilos cuando la página requerida solamente utiliza unos cuantos. Una buena técnica consiste en dividir en secciones una hoja de estilos: podemos utilizar una por pagina, agrupando elementos más comunes en una sola y dejando el resto, en distintas. Tambien, podemos importar más hojas de estilo, desde el CSS con el atributo @import.

Remueva estilos por defecto: asigne valores por defecto a algunas de los valores CSS por defecto como margin, border y padding. La razón es simple, cada explorador aplica estilos distintos a distintos elementos.

Cree clases para elementos flotantes: si utiliza DIV’s para maquetar, sabrá que la manera para hacer que un elemento este a la par del otro y no caiga a la linea siguiente es con el atributo FLOAT. Pues bien, una buena práctica sería crear clases con esos atributos, incluyendo el elemento CLEAR.

Configure el documento: otra buena práctica para comenzar a aplicar el estilo tipográfico a un documento, es hacerlo desde el mismo elemento BODY. Además, la propuesta de Richard Rutter es que utilicemos tipos EMS para el tamaño de fuente, pues esto nos permitirá tener un mejor control para la tipografía.

También, asigne fuentes por defecto. Debemos de saber que le tamaño por defecto es de 10pt.

Cree secciones: archivos CSS demasiado extensos pueden ser dificiles de manejar. Es recomendable, dividirlo en varias secciones con estilos y clases comunes para cada sección. Por ejemplo, divida las clases de los elementos de navegación, de los estilos de los elementos de pie de página, etc.

Formas y Tablas: por defecto, es preferible asignarle estilo a los cuadros de texto. Puede asignarsele un valor al padding del objeto para que el texto sea más legible. Para las tablas, talvez lo principal sería indicarle un valor por defecto al tipo de letra y a los borders.

Por lo demás, el archivo XHTML resultante, debería tener disponible una versión imprimible, iconos y RSS feeds

Acerca de este Artículo: este artículo es una versión traducida y adaptada del artículo original, publicado en el sitio Shape Shed en colaboración con George Ornbo y licenciado bajo la especificación de Creative Commons.

Artículos Relacionados:





Top 10: mis sitios favoritos de marzo

30 03 2007

La primera vez hago un listado como estos para Dot Press. Muchos sitios son parte de mi listado de bookmarks en del.icio.us y otros que he encontrado en mi busqueda de mejores sitios. A continuación les listo las últimas entradas en mi listado, sin ánimo de hacer favoritos.

Artículos Relacionados