Blog de Web Idea - Recursos de Programación y Optimización Web » css http://www.webidea.es/blog Optimización web, SEO, Programación, PHP, Javascript, XHTML Thu, 06 Oct 2011 07:58:13 +0000 en hourly 1 http://wordpress.org/?v=3.3 Menu desplegable en CSS http://www.webidea.es/blog/listas-desplegables-en-css/ http://www.webidea.es/blog/listas-desplegables-en-css/#comments Sun, 22 Mar 2009 22:54:04 +0000 admin http://www.webidea.es/blog/?p=183 Hace unos años, si queríamos poner un menú desplegable en nuestra web, teníamos que recurrir al javascript, lo que presentaba problemas de accesibilidad, y carga de diversos scripts en nuestro <head>, que hacían que aumentase el peso de nuestras páginas, y por tanto ralentizaban la carga.

Actualmente, se pueden construir menúes desplegables totalmente accesibles y configurables, gracias a las listas de HTML y el CSS.

Supongamos que queremos construir un menú con un par de secciones principales, y varias sub-secciones en el interior de cada una de estas. En el código HTML, lo único que tendríamos que hacer es crear una lista <ul> con dos items <li> y dentro de cada uno de los items, anidar otra lista con varios elementos.

<!– Código HTML para el ejemplo de menú desplegable –>
<div class=”desplegable”>
<ul>
<li>Webs Interesantes
<ul>
<li>Santiago Cuenca</li>
<li>Webidea</li>
<li>Dragon Ball Z</li>
<li>Naruto Shippuden</li>
<li>Instalaciones Eléctricas</li>
<li>Saint Seiya</li>
<li>Design Training</li>
<li>Aranjuez</li>
</ul>
</li>
<li>Blogs SEO
<ul>
<li>SEO Femenino</li>
<li>Webidea</li>
<li>Google Dirson</li>
<li>Adseok</li>
<li>Sergio Blanco</li>
<li>SEO Profesional</li>
</ul>
</li>
</ul>
</div>

Simplemente añadiendo un enlace a cada uno de los elementos en la lista, nos quedaría algo así:

Ahora tenemos que aplicar los correspondientes estilos CSS:

/* Le damos un ancho estándar a las listas, un borde, fondo y le quitamos estilos de lista y márgenes */
.desplegable ul{width:150px; border:1px solid #00749e; background:#fff; padding:0; margin:0; list-style-type:none;}

/* Damos un poco de relleno a los items */
.desplegable ul li{padding:.5em;}

/* Le decimos a la lista anidada que no se muestre y le damos estilo a los enlaces */
.desplegable ul li ul{display:none;}
.desplegable ul li a{text-decoration:none; display:block; width:100%; height:100%;}

/* Resaltamos el fondo del item al pasar sobre él y cambiamos el color del texto */
.desplegable ul li:hover{background:#00749E; color:#000;}
.desplegable ul li:hover a{color:#000;}

/* Cuando un item está activo y tiene lista anidada, lo mostramos con display:block */
.desplegable ul li:hover ul{display:block; position:absolute; margin:-20px 0 0 140px;}

Y el resultado final sería:

Obviamente, este es un ejemplo sencillo, y este tipo de menúes son totalmente personalizables. Tan sólo recordar que el uso de CSS para este cometido ayuda más a la optimización de tu web, tanto a nivel de accesibilidad como de indexación en buscadores. Ya todo depende de tu creatividad e imaginación.

]]> http://www.webidea.es/blog/listas-desplegables-en-css/feed/ 0 Año Nuevo, Pagerank y Reyes http://www.webidea.es/blog/ano-nuevo-pagerank-y-reyes/ http://www.webidea.es/blog/ano-nuevo-pagerank-y-reyes/#comments Fri, 02 Jan 2009 19:49:56 +0000 admin http://www.webidea.es/blog/?p=170 Bueno, pues llegó el 2009, y los últimos días del pasado año trajeron la sorpresita de una nueva actualización del pagerank visible, aunque por desgracia, se ve que Google tiene la asignación de barrita verde como la economía global, en crisis. Esta actualización ha venido reflejando en su mayoría, descensos de Pagerank. Webidea se salva de la quema y mantiene su Pagerank 3, aunque la mayoría de mis otros dominios han caído un punto, algunos de ellos por segunda vez consecutiva.

En fin, que ya todos sabemos que se rumorea la posible desaparición de la famosa barrita, y también que apenas es influyente en el posicionamiento web en google, lo cual no quita para que siempre haga ilusión ver cualquier tipo de indicador lo más alto posible.

En otro ámbito de cosas, me ha parecido estupenda la iniciativa de la compañera SEO, Raquel Franco, de hacer un regalito por Navidad a los que más comentan en su nuevo blog, consistente en un enlace con un buen anchor text, así que he decidido imitarla. Si bien aquí aún hay poco tráfico y por tanto pocos comentarios, lo que voy a hacer es poner un enlace a los que sé que me visitais cada cierto tiempo, a los que de algún modo me servís de inspiración, o a los que tengo como contacto.

Ahí van:

Pues nada, feliz año 2009 a todos, y que los Reyes Magos vengan bien cargaditos :)

]]> http://www.webidea.es/blog/ano-nuevo-pagerank-y-reyes/feed/ 3 Introducción al CSS http://www.webidea.es/blog/introduccion-al-css/ http://www.webidea.es/blog/introduccion-al-css/#comments Sat, 22 Nov 2008 14:45:59 +0000 admin http://www.webidea.es/blog/?p=155 Sin llegar a ser considerado un lenguaje de programación como tal, CSS (Cascading Style Sheet – Hoja de Estilo en Cascada), es un mecanismo que determina como se mostrará un documento HTML o XML en pantalla, consiguiendo de este modo separar el contenido de la presentación. Ésto ofrece a los desarrolladores web un control total sobre la forma en la que será presentado un sitio web a los usuarios, dado que basta con modificar el mecanismo CSS para lograr una presentación completamente diferente, sin tener que modificar en absoluto el contenido.

Formas de aplicar el CSS

Existen tres métodos conocidos para la utilización o aplicación del CSS:

  • Mediante un documento externo con extensión .css: Es la más correcta, pues separa de forma total el contenido de los estilos.


    /* Ejemplo de documento CSS externo */
    body{background:#000; color:#fff;}
    #contenedor{text-align:justify;}
    .enlace{color:#ff0000;}


    <!-- Ejemplo de documento HTML que enlaza con un CSS externo -->

    <html>
    <head>
    <link href=”estilos.css” type=”text/css” rel=”stylesheet” />
    </head>
    <body>
    <div id=”contenedor”>
    <a class=”enlace”>Enlace</a>
    </div>
    </body>
    </html>

  • Escribiendo los estilos entre las etiquetas <style></style> antes del </head> del documento HTML: Es un sistema muy parecido al anterior, puesto que separa el contenido del diseño, definiendo clases, id’s, etc…aunque es menos óptimo, pues puede perjudicar a otros campos de desarrollo web, como el posicionamiento del documento en los buscadores, al desplazar el resto del código hacia abajo.


    <!-- Ejemplo de documento HTML con el CSS definido antes del </head> -->

    <html>
    <head>
    <style>
    body{background:#000; color:#fff;}
    #contenedor{text-align:justify;}
    .enlace{color:#ff0000;}
    </style>
    </head>
    <body>
    <div id=”contenedor”>
    <a class=”enlace”>Enlace</a>
    </div>
    </body>
    </html>

  • Escribiendo estilos en línea: Se escriben directamente los estilos a aplicar, en el atributo style de cada elemento HTML. Se puede aplicar sobre cualquier etiqueta HTML, aunque es la forma menos limpia y la que menos separa el diseño y el contenido. Ejemplo: <a href=”url” style=”color:#ff0000;”…

Jerarquía y nomenclatura del CSS

Ha de saberse que cuando un elemento HTML está contenido dentro de otro, y éste tiene aplicado un estilo, normalmente el primero lo hereda. Por ejemplo, un elemento <p> contenido dentro de un <div> con alineación de texto justificada, también tendrá su texto alineado de forma justificada.

Además, debemos recordar que hablamos de “Hojas de estilo en cascada”, lo que quiere decir que cada estilo se lee de manera secuencial, y si escribimos dos veces el mismo estilo, el segundo sobreescribirá el primero.

Sabiendo esto, debemos tener en cuenta que existen tres formas de declarar estilos, cada una con mayor prioridad que la siguiente:

  1. Elementos (elemento): Se pueden aplicar estilos directamente sobre los elementos HTML. Por ejemplo, se puede definir el color del texto para todos los enlaces de una página, independientemente de su ubicación.


    /* Ejemplo que justifica el texto en todos los elementos de párrafo */
    p{text-align:justify;}

  2. Identificadores (#identificador): Estos estilos aplican directamente sobre las etiquetas HTML que tienen un id asignado. Son utilizados normalmente sobre contenedores globales del documento, cabeceras, menúes, etc…


    /* Ejemplo de id que justifica el texto */
    #contenedor{text-align:justify;}


    <!-- Ejemplo de div HTML que utiliza el id #contenedor -->
    <div id="contenedor"></div>

  3. Clases (.class): Son los más comunes. Mientras que teóricamente, y respetando las normas de accesibilidad (WAI) y el posible uso de javascript, sólo podremos tener un id único por página, las clases pueden ser aplicadas a cualquier elemento y usadas tantas veces como se necesite dentro de un documento.


    /* Ejemplo de clase que justifica el texto */
    .parrafo{text-align:justify;}


    <!-- Ejemplo de párrafo HTML que utiliza la clase .parrafo -->
    <p class=”parrafo”></p>

Más adelante veremos en más profundidas los posibles estilos a aplicar, así como ejemplos para hacer nuestras webs más atractivas y versátiles, pues CSS es tan potente, que puede ofrecernos no sólo diseño, sino también funcionalidad.

]]> http://www.webidea.es/blog/introduccion-al-css/feed/ 0 Mensaje inaugural http://www.webidea.es/blog/mensaje-inaugural/ http://www.webidea.es/blog/mensaje-inaugural/#comments Thu, 05 Jun 2008 19:24:10 +0000 admin http://www.webidea.es/blog/?p=3 Webidea, es un proyecto iniciado con el objetivo de convertirse en una web de referencia en el campo de tutoriales y recursos para el diseño, programación y optimización web.

Aunque empecemos con el blog, en la web, con el tiempo, podrás encontrar diversos tutoriales y consejos para optimizar tus páginas en HTML/XHTML, de modo que tengas la posibilidad de aparecer mejor en los resultados de búsqueda de los principales motores, como Google, Yahoo! o Ask. También iremos publicando un tutorial para que puedas explotar al máximo tus páginas, convirtiéndolas en dinámicas y usando el lenguaje de referencia en cuanto a documentación y comunidades en la red: PHP.

Obviamente no sólo de PHP, XHTML y optimización viven las webs, por lo que iremos hablando de Javascript, librerías como Prototype o Scriptacolous y mucho más.

Seguramente te preguntarás que tiene de novedoso cuando todos estos recursos pueden ser encontrados fácilmente desde cualquier buscador, y en parte tienes razón…pero bueno, aquí tendrás un rincón más donde intentaremos hablar y exponer estos temas de la manera que mejor sepamos o podamos y contarás con éste blog como complemento para estar al tanto de diversas novedades y noticias sobre estos temas.

Todo ésto sin ningún ánimo de lucro, y lo único que encontrarás en estas páginas serán algunos Anuncios Adsense de Google (tema del que también hablaremos), para ayudar a financiar los servidores web que alojan nuestras diversas webs.

Pues ya sin más, recibe un cordial saludo y una cálida bienvenida a Webidea.es, que esperamos sea de tu agrado.

]]> http://www.webidea.es/blog/mensaje-inaugural/feed/ 0