miércoles, octubre 25, 2006
Web 2.0 seminario II
Web 2.0, La democratización de los recursos en red II
En la segunda sesión hemos mostrado algunos tipos de etiquetas más comunes. Aunque dependiendo del navegador que utilices dispondras de un editor que te ahorrará el proceso de construir la página añadiéndolas tu mismos (no siempre, en la barra lateral tendrán que hacerlo a mano). Recordar que hemos enlazado en la entrada anterior varios archivos de etiquetas y cursos HTML. También hemos intentado mostrar las rutinas necesarias para personalizar el blog, al hacerlo sobre una plantilla nueva los comportamientos descritos en la hoja de estilo lo puso un poco difícil por momentos en el taller, pero son problemas que no se producirán en la mayoría de las plantillas que ofrece blogger.
Para añadir enlaces en la columna lateral utiliza el siguiente formato:
<li ><a href="URL" >Texto de enlace</a ></li >
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 ellugar de texto de enlace).
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 (como sabes la primera mitad de la plantilla) puedes utilizar las etiquetas de titulo o de texto que ya están incrustadas en tu plantilla y se reproducirán nuevos apartados afectados por la hoja de estilo:
<h6>Enlaces</h6>
<ul>
<li> <a href="http://news.google.com/">Google
</ul>
En donde el h6 entre paréntesis 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. Prueba otros h2 o h3 o h4 que estén incluidos en tu hoja de estilo. (Consejo hacer un blog sólo para cacharrear y uno para publicar, el de prueba lo pueden suprimir para no copar demasiados recursos).
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.
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 último enlazo aquí un pdf de una plantilla simple de un blog, en el que aparece señalado con colores donde introducir los cambios para colocar una imagen de cabecera, el lugar donde introducir los enlaces en la barra lateral, e incluso el lugar donde situar un texto o una imagen como pie del blog.
PDF plantilla
En la segunda sesión hemos mostrado algunos tipos de etiquetas más comunes. Aunque dependiendo del navegador que utilices dispondras de un editor que te ahorrará el proceso de construir la página añadiéndolas tu mismos (no siempre, en la barra lateral tendrán que hacerlo a mano). Recordar que hemos enlazado en la entrada anterior varios archivos de etiquetas y cursos HTML. También hemos intentado mostrar las rutinas necesarias para personalizar el blog, al hacerlo sobre una plantilla nueva los comportamientos descritos en la hoja de estilo lo puso un poco difícil por momentos en el taller, pero son problemas que no se producirán en la mayoría de las plantillas que ofrece blogger.
<li ><a href="URL" >Texto de enlace</a ></li >
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 ellugar de texto de enlace).
<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">
<a href="URL"><img src="URL de la imagen"></a> (esta imagen también puede ser redimensionada).
<h6>Enlaces</h6>
<ul>
<li> <a href="http://news.google.com/">Google
</ul>
En donde el h6 entre paréntesis 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. Prueba otros h2 o h3 o h4 que estén incluidos en tu hoja de estilo. (Consejo hacer un blog sólo para cacharrear y uno para publicar, el de prueba lo pueden suprimir para no copar demasiados recursos).
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.
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/
PDF plantilla





