Aplicaciones de la web 2.0 y II

El software empleado por blogger en la elaboración de plantillas ha evolucionado muy rápidamente. En los primeros blogs los usuarios introducíamos variaciones más o menos ingeniosas en el aspecto del blog, modificando parámetros en el html de la plantilla. Se trataba de algo sencillo, cortar y copiar trozos de código. Al popularizar la posibilidad de “tunear” tu blog, se han complicado las plantillas que pasando a utilizar XHTML un lenguaje pensado para profundizar en web semántica, donde la información, y la forma de presentarla están claramente separadas. En este sentido, XHTML serviría únicamente para transmitir la información que contiene un documento, dejando para hojas de estilo en cascada y JavaScript su aspecto y diseño.

Se acabó el tiempo en el que sin tener ni pajorera de programación podías creerte que eras un crak de los blog, utilizando pequeños trozos de html que recogías en la red. Si embargo, las posibilidades para adaptar tu blog siguen siendo amplias y puedes seguir utilizando trozos de código, e incluso puedes generarlos desde el editor de entradas y luego pegarlo en las columnas laterales. A continuación algunas etiquetas que pueden serte útiles.

Para añadir un enlaces utiliza el siguiente formato:

<a href="URL" >Texto de enlace</a >

La URL es la dirección web del enlace que quieres hacer (tiene que ir entre esas comillas) y el texto de enlace es un frase, o nombre, o lo que quieras que sustituya la dirección (si quieres que aparezca la dirección tienes que volverla a copiar en el lugar de texto de enlace). Puedes añadir a esta frase los códigos <li > que la señala con un punto al inicio tál y como aparece en esta entrada.

<li ><a href="URL" >Texto de enlace</a ></li >

Para subir una imagen utiliza:

<img src="URL de la imagen">

A la que le puedes añadir width="100%" al final de la etiqueta para que se dimensione y cubra por completo el ancho que le has asignado. Puedes variar ese porcentaje para que cubra menos quedando la etiqueta así:

<img src="URL de la imagen"width="85%">

O puedes asignar directamente el número de píxeles sustituyendo la cifra y el porcentaje por el número exacto de píxeles también entrecomillado. Puedes dar sólo el ancho, y también ancho y alto, para lo cual has de introducir otro fragmento tal y como sigue:

<img src="URL de la imagen"width="320" height="256">

Para que la imagen sea a la vez enlace a otra dirección web:

<a href="URL"><img src="URL de la imagen"></a> (esta imagen también puede ser redimensionada).

Para las etiquetas de texto siempre puedes usar el editor que te ofrece el navegador. Utiliza el Firefox que cumple con los estándares de la red, no te dará problemas. El texto que quieras introducir en la barra lateral estará sujeto a lo especificado en la hoja de estilo. Antes podías utilizar etiquetas para titulos, texto o imágenes que incrustábamos directamente en la plantilla y que se veian afectados por la hoja de estilo como el ejemplo que sigue:

<h6>Enlaces</h6>
<ul>
<li> <a href="http://news.google.com/">Google
</ul>

En donde el <h6> hace referencia a una descripción de estilo en el que incluye formato para título (tipo de letra, cuerpo, color) y formato para el texto relacionado. Ahora tendrás que utilizar el "editor de elementos de página" a través del cual introducirás cualquier elemento o código. (Consejo hacer un blog sólo para cacharrear y uno para publicar).

Ya han visto que pueden incrustar todo tipo de recursos, sonido, vídeo, fotografía, mapas, calendarios, contadores, sindicación… Para ello hay que copiar el fragmento de código denominado “embed” que te ofrece el sito de donde vas a tomar el recurso y pegarlo justo donde deseas que aparezca.

Por ejemplo este fragmento de código que proviene de You Tube en el que también puedes modificar el tamaño de manera proporcional, cambiando las cifras.

<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/vj0m3CzbjB4&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/vj0m3CzbjB4&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

Incluso puedes incrustar esos vídeo en una tabla (es así como muchas veces los ordeno yo en el blog) incluyendo los embed en los espacios asignados.

embed aquí

embed aquí

Algunas etiquetas flotantes interesantes para tu barra lateral:

La de la recomendación del navegador de código abierto (existe una grave tendencia a utilizar el explorer incluido en windows, con ello se está extendiendo el uso de un navegador que no respeta los estándares internacionales y que produce muchos errores en la visualización de páginas web):

<img border="0" alt="Get Firefox!" title="Get Firefox!" src="http://sfx-images.mozilla.org/affiliates/Buttons/110x32/get.gif"/></a><p>

Una etiqueta flotante muy interesante es la de cretive commons una licencia relativa a la propiedad intelectual de tus contenidos que puedes gestionar de la manera que quieras. Accede a su sitio en red (selecciona tu idioma) y sigue los pasos para obtener una (cuando tratemos este temas comprenderás las profundas implicaciones sociales y creativas que conlleva este gesto), al final del proceso obtendrás un tramo de código que deberás introducir en el lugar apropiado para que aparezca o bien en la barra latela o al pie del blog.

http://es.creativecommons.org/

Por útimo una preguntita ¿como hacer que el código no sea leido por el navegador y sea visible para poder explicar las etiquetas?