jueves, junio 29, 2006
Botones de Blogger y Blogspot
<a href="http://blogger.com/"><img src="http://www.ehu.es/palazio/botoiakbloggerlandia/blogger_grisa.png" title="BLOGGER" /></a>
<a href="http://blogger.com/"><img src="http://www.ehu.es/palazio/botoiakbloggerlandia/blogger_urdina.png" title="BLOGGER" /></a>
<a href="http://blogger.com/"><img src="http://www.ehu.es/palazio/botoiakbloggerlandia/blogspot_urdina.png" title="BLOGSPOT" /></a>
<a href="http://blogger.com/"><img src="http://www.ehu.es/palazio/botoiakbloggerlandia/blogspot_berdea.png" title="BLOGSPOT" /></a>
Technorati: Blogger Categorizado en: botones Wikipedia: Blogger
miércoles, junio 28, 2006
Los atributos de las imágenes del blog
<img src="...." />
Los atributos de la etiqueta IMG son: title, alt, width, height, align, hspace y vspace.
- title: sirve para poner un título a la imagen y es estándar en XHTML. Las últimas versiones del navegador Explorer la leen, gracias a que a Microsoft, contra su voluntad, se le ha forzado a ello. Al poner el ratón sobre la imagen, el texto del title le aparece al internauta; aunque en Explorer esta función se otorga a la etiqueta alt.
- alt: es el mismo atributo que title, pero siguiendo el pseudo-estándard de Microsoft. El término proviene de "texto alternativo". Lamentablemente conviene que los desarrolladores la pongan con el fin de compatibilidad con navegadores de hace unos años. Simplemente cortamos lo que hayamos puesto en el elemento title y lo pegamos en el elemento alt.
- width: sirve para marcar en píxeles el ancho de la imagen.
- height: sirve para mostrar el alto de la imagen.
- align: usada para alinear la foto a la derecha o izquierda del texto que le acompaña (right=derecha y left=izquierda)
- hspace: para marcar el espacio horizontal que dejamos entre el texto y el borde de la imagen.
- vspace: para marcar el espacio vertical que dejamos entre el texto y el borde de la imagen.
<img src=".../ehu.png" title="EHU" alt="EHU" width="80" height="15" align="left" />
Los elementos width y height solemos ponerlos cuando queremos cambiar algo las medidas de una foto o imagen original que hemos subido al servidor sin antes bajarla en tamaño. Con estas dos etiquetas y teniendo siempre en cuenta que conviene guardar la proporcionalidad entre el ancho y alto, adaptamos mejor la imagen al espacio en el que queramos insertarla. También quiero recordar que el error más común que tienen los bloggers novatos es el de poner los atributos sin separación alguna entre ellos, lo cual es un error grave ya que de esa forma el navegador no los puede leer. Los elementos deben ir separados, como aparece en el ejemplo.
Etiqueta en Technorati: XHTML Categorizado en: trucos Wikipedia: XHTML
Ficheros de imagen externos en el blog
Una de las preguntas que más me suelen hacer los bloggers que empiezan a trabajar en su recién creada bitácora es el de un hosting para enlazar las imágenes desde los artículos que tienen en el blog. La cuestión es crear una cuenta en algún otro servidor que permita enlazar desde fuera las imágenes alojadas en sus servidores.
El problema de las imágenes está resuelta en Blogger, ya que nos permite guardarlas en sus propios servidores. Aún así, hay otros servicios gratuitos que también permiten guardar imágenes para enlazarlas desde fuera; aquí están tres de ellos:
Aparte de estos sitios web de hospedaje de imágenes pensadas para ser publicadas en blogs, los estudiantes y profesores universitarios siempre tienen la opción de hospedar sus imágenes en los servidores universitarios haciendo FTP o SFTP con un programa cliente para estos protocolos. La ventaja de tener un servicio de estos últimos es que normalmente en ellos no hay trabas para poder subir cualquier tipo de archivo, es decir, ficheros con cualquier extensión o MimeType: .pdf, .txt, .odt, .mp3, .mpg... En los servicios de imágenes, por el contrario, hay extensiones que están capadas en los sistemas operativos de los servidores.
Pero veamos cómo debiéramos poner un vínculo a una imagen externa desde otro servidor que externo a Blogger. El código será el siguiente con un ejemplo ficticio en los servidores de una universidad:
<a href="http://www.ehu.es"><img src="http://.../iconos/imagen1.png" title="EHU" /></a>
Con este código XHTML (lo que está en color verde) es suficiente para enlazar un icono o fotografía alojada en un servidor externo a Blogger. Con la etiqueta A HREF (color rojo) conseguimos que la foto quede enlazada a una URL.
Etiqueta en Technorati: hosting Categorizado en: trucos Wikipedia: hosting
martes, junio 27, 2006
Hack para los comentarios recientes en Blogger
1: <!-- **** FARRAGO RECENT COMMENTS HACK **** -->
2: <!-- Version 1.03 -->
3: <!-- Copyright © 2004 Ebenezer Orthodoxy -->
4: <!-- http://boggerhacks.blogspot.com -->
5: <!-- ************** OPCIONES *************** -->
6: <script type="text/javascript" language="JavaScript1.2">
7: var titleText = "Recent Comments";
8: var numberToShow = 5;
9: var displayTemplate = "[name]:<br/>[title]";
10: var nameIsLink = true;
11: </script>
12: <!-- ******* CÓDIGO que no hay que cambiar ***** -->
...
<!-- END FARRAGO RECENT COMMENTS HACK -->
Una vez puesto el hack, hay que fijar un bug o error ya que aparece el código NaNN al principio de cada comentario, algo que Ebenezer explica muy bien cómo corregir en su bitácora de Blogger Hacks. Lo único que hay que hacer para borrar ese código es ir al panel de administración del blog, hacer clic en la pestaña Opciones, ir a Configuración de Comentarios y cambiar la opción de la fecha por mm/dd/yyyy hh:mm:ss. Una vez hecho el cambio, se guarda todo y se refresca la página web para ver que ya no aparece al principio de cada item de comentario reciente el mencionado código. Yo he hecho la prueba de incluso cambiar posteriormente el formato de fecha a castellano, tras las indicaciones y he visto que el código no vuelve a aparecer. Probar es aprender.
Etiqueta en Technorati: hack Categorizado en: trucos Wikipedia: hack
El ping o llamada entre servidores
Etiqueta en Technorati: ping Categorizado en: conceptos Wikipedia: ping
lunes, junio 26, 2006
Número total de artículos de la página de entrada en Blogger
En Blogger, lo único que hay que hacer para modificar el número total de artículos a mostrar es ir a la pestaña Opciones y entrar en el submenú Formato. Una vez allí, el número total de posts puede ser establecido con dos parámetros: por entradas o por días. Lo más usual es hacerlo por entradas, a no ser que tenga un blog colectivo en el que se genere muchas entradas cada día de la semana, caso que no suele ser normal, ya que la mayoría de los blogs suelen ser personales. Al establecer por ejemplo el caso ficticio de 14 días, tenemos que tener en cuenta que conviene que aparezca contenido de los últimos días para que se vean artículos novedosos. De todas formas, Blogger nos recuerda que si seleccionamos la opción de días, se aplica un límite de 999 entradas.
Si el blog va a tener muchas fotografías e imágenes en sus artículos, es lógico bajar el número total de artículos que aparezcan en la página-nido, ya que cuantos menos tengamos la descarga de la información por parte del lector del blog va a ser más rápida. Un blog con 20 posts en la página web de entrada, siendo todos los artículos sólo textuales, puede ser una buena opción. Pero si tenemos la costumbre de incrustar imágenes en nuestros posts, lo lógico es bajar el número total a 10-15 posts en la página de entrada al blog.
En la imagen de arriba vemos que el número total en Bloggerlandia está establecido en 14 posts a mostrar en la página-nido de este web.
domingo, junio 25, 2006
Cambiando la plantilla en Blogger
Tras la creación de la bitácora o blog, muchos son los bloggers que deciden cambiar la plantilla ya que la premura de tiempo a la hora de escoger la primera de todas les ha podido hacer pensar que hay mejores plantillas para su recien estrenado blog. Y así es, porque Blogger tiene en la pestaña Plantilla del administrador de contenido o backend de la aplicación, la cual nos sirve para cambiar de diseño por medio del menú Escoger nueva (plantilla). En este submenú, nos vamos a dar cuenta de que existen muchas más de las que nos enseñó Blogger a la hora de crear en tres pasos nuestra bitácora. Ahora, desde el menú escoger nueva plantilla podemos ver y analizar excelentes plantillas creadas por diseñadores amateurs y profesionales. Una plantilla lleva su hoja de estilo en cascada o CSS en la que se establece el diseño del frontend o parte delantera del blog: su presentación.
Por último, hay que tener en cuenta que las plantillas antiguas, si tienen cambios en el código, conviene cortarlas y pegarlas en un documento de texto puro (.txt) para en el futuro tener una referencia y como forma de hacer una copia de seguridad por si queremos volver a ponerla en un futuro.
Etiqueta en Technorati: CSS Categorizado en: plantillas
sábado, junio 24, 2006
RSS, para sindicar los contenidos en Blogger
http://bloggerlandia.blogspot.com/rss.xml
Cuando hacemos clic en el enlace vemos todo el archivo necesario para sindicación en modo textual. Ese enlace lo podemos llevar a la columna de la derecha dentro de un bloque de enlaces y ya tenemos visible nuestro canal RSS para que pueda ser sindicado por un tercero. Así de fácil, así de simple. La sindicación la harán expertos en informática y desarrolladores, que sólo necesitan ese fichero RSS en su segunda versión.
Etiqueta en Technorati: RSS Categorizado en: conceptos
viernes, junio 23, 2006
Recuperando posts en Blogger
jueves, junio 22, 2006
Haciendo borradores en Blogger
Qué es un permaenlace o permalink
El permaenlace puede ir en muchos lugares dentro del artículo o post. Puede ir en el título como enlace, con lo que haciendo un clic en el título nos aparece la URL única del post para poder hacer un comentario (se puede hacer la prueba en un título cualquiera de un artículo dentro de Bloggerlandia para verlo). Pero también puede aparecer abajo del post con un enlace dentro de la palabra permaenlace o permalink (así se dice en inglés). Algunos prefieren ponerlo debajo del título y junto al nombre del autor, también con la palabra permaenlace. Esté donde esté, recordad que es la referencia del artículo escrito, nada más y nada menos; pero la referencia, entendida como enlace único a ese post. La utilidad es muy grande: si queremos hacer un comentario a un post, tenemos que pinchar en la URL del permaenlace que nos saque el artículo sin que se vean los demás posts. Basta con esto para tener en cuenta que el permaenlace debe de estar visible. Mi consejo siempre es el ponerlo como enlace en el título y también abajo del post, como enlace de la palabra permaenlace.
Etiqueta en Technorati: permalink Categorizado en: conceptos
Haciendo que los títulos de los posts sean permaenlaces en Blogger
Aquí os dejo el código que crea o pinta (escribe) el título de un post en una plantilla cualquiera. Sólo tenéis que buscar sobre la mitad de la plantilla de vuestro blog el lugar en donde radica esto o algo parecido a esto:
<h3 class="entry-header"><$BlogItemTitle$></h3>
Como se puede leer en el código, se trata de un título a tamaño h3. Ahora lo que vamos a añadir es el enlace para convertirlo en un permaenlace (es el código en color verde):
<a class="permalink" href="<$BlogItemPermalinkUrl$>">
<h3 class="entry-header"><$BlogItemTitle$></h3></a>
Creando bloques de enlaces en la columna del blog con Blogger
El bloque es algo en lo que tenemos que pensar al abrir una nueva bitácora. Los bloques llevan hiperenlaces con texto o también con botones de 80 x 15 píxeles. Los botones siempre dan un aspecto muy elegante al blog. De todas formas, pensemos que conviene tener tantos bloques con hiperenlaces como longitud que tengamos en el total de posts que publiquemos en la página inicial de la bitácora. Hay ciertos bloques que conviene que pongamos siempre en nuestros blogs, sean monotemáticos o multitemáticos:
- Metainformación con datos sobre el autor, la licencia del contenido, y un enlace a un post interno en el que explicamos el objetivo y contenido de nuestra bitácora, es decir, el motivo que nos lleva a abrir el blog (para qué lo escribimos).
- Sindicación de contenidos: este apartado o bloque puede llevar un enlace a cada canal RSS o Atom que tengamos para sindicar el contenido de nuestra bitácora. Si hacemos podcasts de audio también podemos poner el archivo XML para sindicar nuestro contenido de audio. Podemos sindicar tanto los artículos o posts, como los comentarios de los posts que generan los visitantes a la bitácora
- Motores de búsqueda que utilicemos con asiduidad. En este bloque no pueden faltar Technorati, Google, Snap o AskAlexia, por ejemplo. Con ello tenemos la búsqueda visible al momento en nuestra columna del blog.
- Archivo. Este apartado viene dado ya por Blogger en las plantillas, con lo que no nos debemos de preocupar más que de ponerlo semanal o mensualmente, aunque yo opino que es mejor hacerlo por meses.
- Últimos artículos o posts. Se trata de otra opción que por defecto nos da Blogger en inglés con el nombre de Previous Posts. Lo único que tenemos que hacer es cambiar de inglés a español el nombre del bloque. Este apartado siempre es interesante ya que en muchas ocasiones los visitantes entrarán a las URLs o direcciones permanentes de los artículos únicos, con lo que de un vistazo va a poder ver qué es lo último sobre lo que habéis escrito.
- Búsqueda. Algo que hay que implementar ya que Blogger no os lo da por defecto. Ya os diré cómo hacerlo en otro post. Un sitio web sin opción de búsqueda no es operativo hoy en día.
- Articulos populares que tengan más comentarios que otros o posts que los compañeros os digan que son muy buenos. Lo único que tenemos que hacer es crear un bloque y enlazarlos desde sus propios permaenlaces.
- Categorías. Por defecto, Blogger no tiene código incrustado para categorizar los posts. Pero se puede hacer a mano sin mayor problema.
Seguro que se os ocurren otros muchos bloques interesantes. Por ejemplo, si usted es un profesor universitario, es posible que quiera poner un bloque con los diversos ejercicios de la asignatura a realizar durante el curso. Lo único que hay que hacer antes de poner el bloque en la columna es escribir todos los posts con los ejercicios y publicarlos. En un segundo paso, vamos a la plantilla, creamos el bloque en el lugar que estimemos oportuno y enlazamos a los diferentes permaenlaces en donde hemos escrito los ejercicios. En otro post os explicaré cómo y dónde se ponen los bloques dentro de la plantilla de vuestro blog.
martes, junio 20, 2006
Chatango, chat gratuito para insertar en Blogger
lunes, junio 19, 2006
Subiendo imágenes a Blogger
Las imágenes que subimos para ser enlazadas desde nuestros posts quedan en el servidor dentro de un directorio que se llama
uploaded_images/
. De todas formas, recordemos que las imágenes también las podemos subir a otro servidor externo o de confianza. Por ejemplo, en mi caso, es el servidor de la universidad el que cumple esta misión. Por medio del protocolo SFTP se pueden tener todas las imágenes en un lugar más a mano.Para subir las imágenes sólo hace falta hacer clic sobre la foto pequeña que aparece en la barra de edición del editor de Blogger. El autor del post puede seleccionar el tamaño de la foto en el formulario que aparece, con lo que las imágenes grandes pueden ocupar menos tamaño en el servidor.
Subiendo vídeos a Blogger-Google
Otros servicios parecidos a Google Video y que también pueden valer para colgar los vídeos que tengamos y queramos mostrar en Blogger son: YouTube, iFilm, MetaCafe, IFC Medialab y iTunes Video Store.
domingo, junio 18, 2006
Clustrmap, mapeando las IPs en Blogger
Para poner el código en nuestra bitácora dentro de Blogger.com, basta con ir a la plantilla e insertar el código mencionado después de la etiqueta de la barra lateral:
<div id="sidebar">
. Escogemos el lugar para colocarlo entre los diferentes bloques que tengamos (autor, archivo, artículos previos, etc.).
sábado, junio 17, 2006
Etiquetas para el contenido en Blogger
viernes, junio 16, 2006
WinSCP y un servidor ajeno para subir ficheros
Una vez que subimos los archivos al servidor, lo único que tenemos que poner en Blogger es la ruta del fichero subido. Si el servidor, por ejemplo, está en la Universidad del País Vasco, basta con poner la ruta para que aparezca el archivo si es foto, o para dejar el link a él si es un documento PDF, texto, audio, etc.
jueves, junio 15, 2006
Ocultando la barra de navegación de Blogger
Actualización (septiembre de 2011) al nuevo diseño de plantillas en Blogger:
Lo único que tenemos que hacer es ir al menú lateral del panel de administración o tablero de Blogger y hacer clic en PLANTILLAS. Nos aparecerá el diseño del blog en la actualidad y justo debajo un menú para hacer EDICIÓN en HTML. Al elegir esta opción se nos avisará de lo peligroso que es tocar el código y aceptaremos el riesgo. Nos aparecerá el código de la plantilla, y ya únicamente tendremos que añadir tres líneas de código justo antes de la etiqueta de variables. Lo pongo aquí en negro lo que hay que poner para que desaparezca la barra de navegación.:
-----------------------------------------------
Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}
/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#cfe7d1"/>
Con esta inserción de código justo antes del inicio de la etiquetas variable, ya no veremos la barra de navegación que por defecto poner Blogger. Si algún día queremos ver de nuevo la barra, simplemente quitaremos el código y volverá a aparecer.
En la anterior versión de Blogger, lo que teníamos que quitar lo puse así:
Cuando creamos un blog con Blogger.com, si lo hacemos con la configuración normal para tenerlo alojado en Blogspot, al igual que está este de Bloggerlandia, es posible que deseemos quitar la barra en inglés que aparece en la parte de arriba de cada página web. Para quitar esa barra, basta con ir a la plantilla y buscar el lugar donde está ubicada la etiqueta del estilo:
<style type="text/css">
Esa etiqueta de estilo tiene más abajo un cierre en la siguiente manera:
</style>
Una vez que ya hemos buscado el trozo de código, ahora ponemos esto entre esas dos etiquetas de apertura y cierre:
#b-navbar {
height:0px;
visibility:hidden;
display:none
}
El día en que cambiemos de opinión y queramos volver a ver la barra en la parte superior de las páginas web, basta con quitar el código añadido para ocultarla.
miércoles, junio 14, 2006
Diseños de Blogger
martes, junio 13, 2006
Insertando ficheros de audio en Blogger
Sólo tienes que poner el código siguiente en el enlace que quieras:
<a href="tema1.mp3">Hiperenlace a una canción</a>
y un pequeño reproductor de MP3 se añadirá automáticamente: Vegitation - Chock Hold.mp3
lunes, junio 12, 2006
Blogger y Blogspot
Lo primero que hay que saber a la hora de abir bitácoras o blogs con Blogger es que el interfaz de administración, es decir, el lugar en donde escribe está entrando en la dirección http://www.blogger.com, mientras que en el sitio que crea con el nombre del sitio web aparece en la URL tipo: http://minombreelegido.blogspot.com. Con ello quiero significar que el nombre de dominio está en Blogspot y el sistema de administración del contenido en Blogger.com. A pesar de ello, en la configuración avanzada usted puede poner el nombre de dominio que quiera si tiene acceso a un servidor por SFTP o FTP. Por lo tanto, usted podría tener toda la información en un dominio del tipo http://www.midominio.com y utilizar la tecnología de Blogger. En este caso también tendría que entrar en el interfaz de Blogger para administrar su contenido (escribir, borrar, guardar la información como borrador, etc.)
domingo, junio 11, 2006
Escribiendo código en un post
La solución es simple y nada fácil de recordar si no lo utilizamos constantemente. Es por ello que bien viene tener apuntado lo que tenemos que poner para que las etiquetas no sean reconocidas como código a ejecutar. Para apertura de etiqueta, como vemos en la imagen de arriba, necesitamos escribir primero el signo &, seguido de las letras l y t, y finalizando con un punto y coma. Para poner la etiqueta de cierre, es lo mismo pero con una variante ya que en vez de la letra l, tenemos que poner la g. Si escribimos todo eso, tendremos como resultado lo siguiente:
<
>
Cada vez que tengamos que poner las etiquetas, sólo hay que sustituirlas por los códigos mencionados, y con ello el navegador no leerá código ejecutable.