Aprender a crear su primera página web con 100 ejercicios prácticos

BLOGGER DISPONE DE UN EDITOR de texto diseñado para introducir los textos en línea, aunque más adelante veremos que hay otros métodos para subir un artículo. Si lo prefiere, también puede introducir los textos en cualquier otra aplicación de su preferencia y pegarlos en el editor de Blogger para luego publicarlo.

1 Ya ha creado un blog y llega la hora de comenzar a añadirle contenidos. Tiene de momento un par de opciones para hacerlo. Pulsando en el vínculo que muestra el texto Empezar a publicar entradas o pulsar en el botón Crear una nueva entrada, que es de color anaranjado y muestra un icono de lápiz. Utilice cualquiera de los dos vínculos ahora.

2 Se abre el Editor de entradas de Blogger, que es un sencillo editor de texto con el que iremos trabajando en mayor profundidad en los próximos ejercios. De momento, pulse en el campo Título de entrada e introduzca el texto que usará como título de su post.

3 Ahora, en el campo de escritura, redacte algún párrafo de prueba.

4 Para visualizar cómo se mostrará el contenido, pulse el botón Vista previa.

5 Se abre una nueva ventana de previsualización del blog, que muestra exactamente la apariencia que tendrá el artículo al ser publicado pero, tal como indica una cinta, se trata sólo de una vista previa pues el artículo aún no ha sido publicado.

6 También puede perfectamente copiar en el editor un texto escrito en cualquier aplicación. Descargue para este ejercicio desde nuestra web el archivo Nos nutre lo que digerimos.docx, que es un documento de Word y ábralo en pantalla, o utilice para el mismo fin algún documento de texto en el que se combinen diferentes estilos (negritas, cursivas, etc).

7 Seleccione y cópielo, de principio a fin, y vuelva al editor de Blogger.

8 Seleccione el párrafo de prueba que había introducido pasos atrás y pegue sobre él el texto copiado, ya sea usando el comando Ctrl.+V o la opción Pegar del menú Edición del navegador.

9 Observe que el texto se pega conservando los atributos originales, aunque no la fuente. Vamos ahora a publicarlo. Directamente pulse el botón Publicar.

10 Una vez se ha cargado el artículo, se abre una ventana que invita al usuario a compartirlo con contactos de Google, a algún círculo o con una dirección de e-mail. Para este ejercicio pulse simplemente el botón Cancel.

IMPORTANTE

Al publicar un post en Blogger, tiene la posibilidad de compartirlo directamente en Google+ (la red social de Google) o a través de correo electrónico.

UNA VEZ HA PUBLICADO UNA ENTRADA en un blog, puede volver a abrirla en el Editor de entradas de Blogger. Sólo tiene que acceder a la ficha Entradas e indicar que desea editarla. De este modo tendrá de nuevo acceso a todas las herramientas de edición de esta página. En este ejercicio trabajaremos con algunas de ellas.

IMPORTANTE

El Editor de textos de Blogger usa por defecto el modo WYSIWYG del inglés What you see is what you get (algo así como lo que ves es lo que obtienes). En este modo el aspecto del texto, así como el de las imágenes o vídeos que pudiera insertar en él, es muy cercano a la apariencia final que tendrá el material una vez publicado.

1 Al publicar un artículo, Blogger le envía de nuevo a su Escritorio.

2 De este modo puede acceder a la ficha Entradas donde puede ver el título de la que creó en el ejercicio anterior. Coloque el puntero del ratón sobre el nombre de la misma.

3 Aparecen de este modo cuatro opciones principales que son Editar, Visualizar, Compartir y Suprimir.

4 Se encuentra de este modo de nuevo en el Editor de entradas de Blogger, donde ahora puede realizar cualquier modificación. Para comenzar, seleccione

5 Despliegue el menú Editar y escoja la opción Seleccionar todo.

6 También podría haber usado el atajo de teclado que aparece junto a la opción. Pulse ahora en el botón Elimine el formato, que es el último de la paleta de herramientas del Editor y muestra una T subrayada con una pequeña X.

7 Pulse en la punta de flecha del botón Fuente, que muestra una letra F para desplegar sus opciones y ver los estilos de fuentes disponibles.

8 Escoja la opción Fuente predeterminada,

9 Seleccione el primer párrafo y pulse en la punta de flecha del botón siguiente, que es Tamaño de la fuente, y escoja la opción Grande.

10 El texto cambia de tamaño. Pulse el botón Deshacer, cuyo icono es una flecha curva que señala hacia la izquierda.

11 Despliegue ahora el menú que muestra seleccionada la opción Normal, también en la Barra de herramientas.

12 Se trata del menú Formato y aplica un conjunto de estilos preestablecidos. Escoja el llamado Encabezado,

AL RESTABLECER UNA ENTRADA A BORRADOR, ésta deja de estar accesible para otros y se guarda en la carpeta de Borradores de Blogger. Puede acceder a ella de nuevo y continuar la edición cuando quiera, usando las herramientas disponibles.

IMPORTANTE

Lamentablemente Blogger no funciona bien en cualquier navegador. Para la fecha en la que estamos preparando este libro, funciona correctamente con Google Crome en cualquier sistema operativo, con Safari 4 en MAC OSX, con Internet Explorer 8 y 9 en Windows XP o 7 y superior, o con Firefox 3,6 o superior en todas las anteriores, pero no en MAC OSX 10.3.9 o inferior.

1 Al acabar el ejercicio anterior, probablemente la aplicación habilitó la pestaña de Estadísticas de Blogger. Pulse, en el panel del lado izquierdo sobre la pestaña Entradas.

2 Efectivamente la entrada está marcada ahora en estado de Borrador.

3 Vamos a continuar conociendo las otras herramientas del Editor. A continuación del menú Formatos, cuenta con un bloque con las típicas herramientas de atributos de texto: Negrita, Cursiva, Subrayado, Tachado. Seleccione el primer párrafo, elimine el estilo Negrita, si lo tiene, pulsando sobre su icono (B), y aplique cursivas pulsando en su botón (I).

4 También puede utilizar cualquiera de estas herramientas de atributos para destacar palabras puntuales de su texto, lo que le brindará agilidad a su lectura. Hágalo ahora aplicando negritas o cursivas según sus preferencias. Recuerde que, como en cualquier procesador de texto, debe seleccionar el texto a modificar primero y luego pulsar el botón.

5 También puede destacar un texto utilizando las herramientas que se encuentran a continuación: Color de texto y Color de fondo de texto. Cada una de ellas cuenta con su propia paleta de colores. Seleccione alguna de las palabras en negritas, pulse en el botón Color de texto, que muestra una T subrayada, para desplegar su muestrario, y escoja el color que prefiera.

6 Deseleccione el texto y compruebe que efectivamente el texto adquiere el color indicado. Repita el proceso pero aplique ahora un color de fondo de texto.

7 El siguiente bloque de herramientas lo utilizaremos más adelante. Pulse ahora Ctrl.+A para seleccionar todo el artículo y, pulse ahora el botón desplegable Alineación, el primero del grupo que le sigue.

8 Escoja la opción que prefiera, pero tenga en cuenta que para un artículo es preferible dejar la alineación hacia la izquierda o la justificada, que es la última.

9 Los dos botones que vienen a continuación sirven para crear una lista numerada o con viñetas y el siguiente, para crear una cita. Seleccione alguno de los párrafos y pulse sobre ella.

10 Cambia la alineación y los márgenes automáticamente. Finalmente pulse el botón Publicar y cancele el cuadro Share on Google+.

Al aplicar el formato de cita, se modifica el estilo del párrafo: los márgenes laterales aumentan y la alineación, por defecto, es hacia la izquierda.

LA BARRA DE HERRAMIENTAS DE BLOGGER también le permite crear sobre el texto un vínculo a otra página web, a otra entrada del mismo blog o, incluso, a una dirección de correo electrónico.

1 Para este ejercicio, descargue de nuestra web el documento La digestión comienza en la boca.docx y ábralo. Lo utilizaremos en breve.

2 De nuevo en Blogger, coloque el cursor sobre el nombre de la entrada que creó en el ejercicio anterior y, de las tres opciones que se muestran escoja la opción Visualizar.

3 Se abre de este modo una nueva ventana donde puede visualizar la entrada de su blog. Tal vez se lleve una sorpresa con el texto, que luce diferente a como lo veía en el Editor, sobre todo el tipo de fuente y el encabezado.

4 Deje la ventana abierta pero traiga a primer plano la anterior, abierta en la ficha Entradas, y pulse a continuación el botón Entrada nueva.

5 Seleccione y copie el texto principal del documento descargado (u otro que prefiera) y péguelo en el cuerpo de la entrada.

6 Haga lo mismo con el título de la entrada.

7 Ahora crearemos un enlace en esta entrada, que nos lleve precisamente a la entrada anterior. En el texto del artículo podrá ver las palabras se dificulta la digestión en negritas. Selecciónelas y pulse el botón Enlace, de la barra de herramientas.

8 Se abre el cuadro de diálogo Editar enlace. En el campo Texto para mostrar se ve el texto que seleccionamos previamente y, tal como necesitamos, está seleccionada por defecto la opción Dirección web. Ahora lo que tenemos que hacer es copiar en el campo ¿A qué dirección URL debería enviar este enlace? la dirección de la entrada anterior. Regrese a la ventana que dejó abierta en segundo plano, copie su texto

9 Pulse en la casilla de verificación de la opción Abrir este enlace en una ventana nueva,

10 Así puede verificar que la dirección indicada es correcta. Finalmente pulse el botón Aceptar.

11 De regreso en el Editor, pulse en botón Guardar para almacenar los cambios, coloque el cursor sobre el link creado, observe la etiqueta que aparece

IMPORTANTE

La opción Add ‘rell=nofollow’ attribute que se muestra en el cuadro de diálogo Editar enlace sirve para que los rastreadores no tengan en cuenta el enlace creado en sus búsquedas de información para establecer rankings de búsqueda. Afectará por tanto la forma en la que las personas encontrarán tu blog.

AÑADIR UNA IMAGEN A UNA ENTRADA de un blog es extremadamente sencillo. Puede subirla desde su equipo, escoger una que ya haya subido al blog anteriormente, escogerla de sus álbumes de Picasa, cargarla desde el móvil o hacerla con su cámara web.

IMPORTANTE

Al subir una imagen a Blogger, ésta se almacena en un álbum web de Picasa. La capacidad de almacenamiento de imágenes depende, por tanto, de la capacidad de la cuenta Picasa.

1 Para este ejercicio abra el artículo La digestión comienza en la boca.docx en el Editor de entradas, si no lo tiene aún en pantalla. Lo que haremos es insertar una imagen al artículo en cuestión. Verá que difícilmente podría ser más fácil. Descargue el archivo Imagen 1.jpg de nuestra web y guárdelo en su equipo o escoja algún otro archivo JPG de su preferencia.

2 Vamos a insertar la imagen entre el primer párrafo, que es la introducción, y el segundo. Coloque el cursor al final del primero y pulse la tecla Retorno.

3 Haga clic en el botón Inserta imagen, que está a la derecha del botón Enlace. El proceso necesario para subir una imagen usando las herramientas del editor es totalmente intuitivo.

4 Se abre el cuadro de diálogo Seleccionar un archivo, donde ya le indican que la imagen sólo puede estar en un archivo JPG, GIF o PNG. Puede subir una imagen desde su ordenador, escoger una del blog, traerla de un álbum de Picasa, del móvil o de una cámara web. Pulse en el botón Seleccionar archivos, de la opción Subir.

5 Se abre un cuadro de diálogo que le permite navegar por su equipo y ubicar la imagen. Hágalo ahora y haga un clic en el botón Subir.

6 Se encuentra de nuevo en el cuadro Seleccionar un archivo donde se hace el seguimiento del proceso de carga. Al acabar el proceso, se muestra una miniatura de la imagen. Ahora podría perfectamente subir más imágenes pero, en lugar de ello, pulse e botón Añadir las imágenes seleccionadas.

7 La imagen se añade en el lugar indicado del texto. Pulse el botón Vista previa y compruebe el resultado.

8 Todo bien pero probablemente sería mejor añadir una línea en blanco entre la imagen y el texto anterior. Regrese al Editor y añádalo. Sólo tiene que colocarse en el lugar correcto y pulsar la tecla Retorno.

9 Seleccione ahora la imagen: Se muestra una etiqueta flotante de edición que le permite cambiar el tamaño o la ubicación de la foto o añadir una leyenda, entre otras cosas. Seleccione la opción Añadir leyenda.