Blog de Web Idea - Recursos de Programación y Optimización Web » html 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 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 Como construir enlaces http://www.webidea.es/blog/como-construir-enlaces/ http://www.webidea.es/blog/como-construir-enlaces/#comments Mon, 28 Jul 2008 05:11:12 +0000 admin http://www.webidea.es/blog/?p=86 Sin duda, uno de los factores más importantes a la hora de dar relevancia a tu web es, como ya hemos explicado anteriormente, el Link Building. Pero antes de construir una red de enlaces, ya sean externos o internos, debemos saber como construirlos.

Si tienes nociones de HTML sabrás que los enlaces se construyen encerrando un texto entre las etiquetas de apertura y cierre de de un ancla o anchor. A éste texto, en el mundo SEO se le llama anchor text, y resulta que podemos considerarlo como la parte más importante del enlace en sí, dado que según las palabras que contenga, los motores de búsqueda como Google, Yahoo! Search o MSN Live, sabrán qué contenido se van a encontrar cuando sigan ese enlace, y te posicionarán mejor para ese término en concreto en los SERP‘s (Search Engine Result Pages – Páginas de resultado del motor de búsqueda). Por tanto, debemos elegir bien que palabras nos interesa promocionar e intentar que cuando alguien nos enlace externamente, sea por las palabras que nos interesan. De poco sirve que simplemente pongan nuestra URL, pues si bien todo enlace es positivo, uno que tenga poca o ninguna información de poca ayuda nos va a servir para posicionarnos.

Éste sería un ejemplo de un enlace poco interesante para nosotros:

<a href="http://www.nombrededominio.com">http://www.nombrededominio.com</a>

Mientras que éste otro estaría mejor construido:

<a href="http://www.nombrededominio.com">Palabras clave</a>

Enlazando imágenes

En ocasiones, es probable que realicemos un intercambio de banners, o que alguien decida ponernos un enlace natural, pero que en vez de ser de texto, lo hagan a través de una imagen. En éstos casos, el anchor text no es una opción de optimización para nosotros, dado que lo que se enlaza es la imagen en sí. Por suerte, el HTML y los motores de búsqueda, nos brindan una opción para ello, dado que las etiquetas de imagen pueden llevar el atributo ALT (alternative text), que nos sirve como sustituto del anchor text, en el que caso de que la imagen no pudiera ser mostrada. El contenido de esta etiqueta por tanto, será valorado por los buscadores para darnos relevancia según las palabras clave que contenga. Un ejemplo de un enlace de imagen bien formado, sería:

<a href="http://www.nombrededominio.com"><img src="imagen.gif" alt="Palabras clave" / ></a>

Optimización adicional. El atributo title.

Opcionalmente, tanto las etiquetas anchor como las etiquetas de imagen, nos permiten añadir el atributo TITLE, que sirve para dar información adicional acerca del enlace, o de la imagen. Aunque no tiene la misma importancia que el anchor text o el atributo ALT, añadir este atributo nunca está de más, y es una forma excepcional de brindarles a los motores información adicional sobre nuestra página, y puede que incluso nos ayude a posicionar otras palabras clave alternativas.

En definitiva, estos son dos ejemplos de lo que sería un enlace bien formado ya sea de texto o de imagen:

<a href="http://www.nombrededominio.com" title="Información extra y más palabras clave">Palabras clave</a>

<a href="http://www.nombrededominio.com" title="Información extra y más palabras clave"><img src="imagen.gif" alt="Palabras clave" title="Información extra y más palabras clave" / ></a>

]]> http://www.webidea.es/blog/como-construir-enlaces/feed/ 4 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