1. Creación de un BLOG Isaac Torralba Villalobos 31-1 y 21-2 de 2011

5. Blogger y WordPress La alternativa más popular a Blogger es WordPress, y aquí vale la pena hacer algunas aclaraciones importantes sobre lo que ofrece y sus características. es.wordpress.com, es un sitio que nos permite registrarnos de manera gratuita para tener nuestro blog y el hospedaje de los archivos que lo componen. El verdadero potencial de WordPress lo encontrarán los desarrolladores Web, ya que este sistema puede ser descargado de manera gratuita desde es.wordpress.org, para ser instalado libremente en un servidor Web. ItvSoft

6. Blogger y WordPress Blogger siempre estará en la Web. Sin embargo, WordPress estaría en un servicio de hospedaje aparte y deberíamos instalarlo, contando con los conocimientos que requiere el caso. Sin embargo, los beneficios son muchos para los desarrolladores, porque el nivel de personalización es muy alto, logrando resultados de gran calidad profesional. Sabiendo lo que hay en el mercado, elegimos Blogger como plataforma de introducción para tener nuestro blog gratuito. Sin embargo, recomendamos para los profesionales del diseño y desarrollo Web, observar lo que ofrece wordpress.org, como una alternativa de gran potencial para sus desarrollos. ItvSoft

8. Primer paso: Visita rápida I

9. Primer paso: Visita rápida II

10. Primer paso: Visita rápida III

11. Primer paso: visita rápida IV

12. Primer paso: Visita rápida V

14. Primer paso: Nuevo blog En todo caso, podemos crear un blog. Para ello crearemos una cuenta en Google, para lo cual tendremos que completar el primer formulario que nos aparece con el siguiente encabezamiento: ItvSoft

17. Acto seguido veremos una nueva pantalla como la siguiente en la que asignaremos un nombre a nuestro blog: Segundo paso: Crear el blog

18. Simplemente escribiremos un nombre para nuestro blog, que podremos cambiar más tarde, y le asignaremos una dirección de internet, que no conviene cambiar más adelante ya que podríamos perder lectores. Es importante que la dirección (también llamada URL ) sea corta y siempre con letras minúsculas, sin caracteres especiales como tildes, guiones o eñes, y sin huecos. La dirección suele ser el nombre del blog o el nombre del autor, pero se puede poner lo que se quiera. Esta dirección llevará el dominio “blogspot.com”, por ejemplo: Pero antes de continuar hay que hacer clic en el enlace que dice Comprobar la disponibilidad para ver si ese nombre ya está elegido por otro usuario; y suele ocurrir con frecuencia que ya esté utilizado, así que hay que aguzar el ingenio. Si ocurre esto, nos avisan con la frase: Lo sentimos, esta dirección del blog no está disponible . Además se nos pedirá una verificación de la palabra, que son unos caracteres algo movidos que impiden la creación de blog de forma automática. Segundo paso: Crear el blog http://isaac.blogspot.com.

19. Tras pulsar en “CONTINUAR”, elegiremos una plantilla, que es el diseño general del blog. Si encontramos una que nos guste podemos seleccionarla, de lo contrario podemos elegir la que más se adecue a nuestras necesidades momentáneamente y cambiarla posteriormente. Tercer paso: Plantilla del blog ItvSoft

20. Pulsamos en “CONTINUAR” y ¡listo! Si toda ha ido bien, después de elegir nuestra plantilla ya tendremos creado nuestro blog y podremos comenzar a llenarlo de contenidos Tercer paso: Listo ItvSoft

24. Quinto paso: Acceder al blog Posteriormente hay que hacer clic en el enlace Escritorio , y entraremos directamente a nuestro blog. Y encima de ella veremos la barra de Blogger, con la que podremos entrar a la parte de la Adminsitración a escribir una Nueva Entrad a en el blog o a personalizar el Diseño , además de otras funciones. Los visitantes verán el nuevo blog escribiendo su dirección o URL en la barra de direcciones de su navegador. Pasados unos días, después de que los buscadores hayan tenido tiempo para rastrear el nuevo blog, también se podrá acceder a él simplemente escribiendo el nombre del blog en el buscador. Para terminar esta sección, diremos que un usuario puede crearse más de un blog en Blogger, y cuando se acceda al Escritorio o panel de control, aparecerán allí todos nuestros blogs.

25. Y encima de ella veremos la barra de Blogger, con la que podremos entrar a la parte de la Administración a escribir una Nueva Entrada en el blog o a personalizar el Diseño , además de otras funciones. Los visitantes verán el nuevo blog escribiendo su dirección o URL en la barra de direcciones de su navegador. Pasados unos días, después de que los buscadores hayan tenido tiempo para rastrear el nuevo blog, también se podrá acceder a él simplemente escribiendo el nombre del blog en el buscador. Para terminar esta sección, diremos que un usuario puede crearse más de un blog en Blogger, y cuando se acceda al Escritorio o panel de control, aparecerán allí todos nuestros blogs. Quinto paso: Acceder al blog

27. Presionando el botón “EMPEZAR A PUBLICAR” aparecerá una ventana que es la que encontraremos cada vez que deseemos agregar nuevas entradas en nuestro blog, por lo cual es importante conocer todo lo que nos ofrece. En primer lugar podremos establecer el título de la entrada. En el bloque que se ubica en el medio, irá el contenido, al cual le podremos aplicar formato, estilos de texto, colores y demás, incluso tenemos la posibilidad de verificar la ortografía. También contamos con la opción de incluir videos e imágenes. Sexto paso: Añadir entradas

28. Sexto paso: Añadir entradas Si nos fijamos, arriba y la derecha de esta barra, tenemos dos pestañas. Por defecto estará activada “Redactar” que es la que nos mostrará una vista previa de lo que estamos utilizando. Es ideal para los usuarios que no son avanzados. Si ya conocemos la plataforma y nos animamos a modificar aspectos del código, podremos optar por elegir la solapa “Edición de HTML”. Otras alternativas que podremos indicar son las etiquetas, es decir, las palabras o frases que relacionan los contenidos. Básicamente funcionan como un marcador, donde al etiquetar un elemento se crea un enlace. En este caso, cuando esté publicado el contenido, ese enlace hace que se muestren todas las entradas relacionadas con esa etiqueta. ItvSoft

29. Si hacemos clic en “Opciones de entrada” se desplegarán varias alternativas, entre ellas, la posibilidad de permitir (o no) comentarios de quienes visitan el blog, programar la publicación de la entrada que estamos escribiendo para una fecha y hora determinada y otras características que tienen que ver con el manejo de código HTML. ItvSoft Sexto paso: Añadir entradas

30. Como muestra os pongo una nueva entrada que estará programada para aparecer el próximo día 1 de Marzo de 2011 a partir de las 9 de la mañana. ItvSoft Sexto paso: Añadir entradas

32. En la imagen de abajo os muestro las opciones que aparecen a la hora de añadir o modificar una entrada. Los botones para formatear el texto que aparecen en la barra superior del editor son parecidos a otros que se manejan en editores convencionales, y si se coloca el cursor del ratón encima de ellos, aparece una descripción del botón en un marco de texto. Los únicos botones que pueden ser menos habituales en un procesador de textos son los de incluir enlaces, imágenes, elementos multimedia, etc. ItvSoft Sexto paso: Edición avanzada 1

33. La entrada de blog o post , según el término inglés muy extendido, consiste en los siguientes elementos, que pueden verse en la siguiente imagen numerados encima del lugar apropiado: ItvSoft Sexto paso: Edición avanzada 2

35. Se puede agrandar el editor arrastrando su esquina inferior derecha, como es lo normal en otros editores. La vista previa tiene un botón propio debajo del editor, y ahora se puede ver perfectamente cómo va a quedar la entrada una vez publicada. Hay un botón nuevo, el de corrección ortográfica , y otro que aún está en la versión de pruebas, y que sirve para Definir/traducir , según leemos en la etiqueta que se ve al poner el cursor del ratón encima del icono. Se trata de una opción muy interesante que se puede usar como diccionario y traductor en varios idiomas usada en la Web por su claridad. ItvSoft Sexto paso: Edición avanzada 4

36. Cuando nuestra entrada está lista, debemos pulsar el botón “PUBLICAR ENTRADA” para que se publique en el momento o en la fecha que hayamos establecido en las opciones de esta entrada. Si todo ha salido bien, un cartel nos indicará que la entrada ha sido publicada y nos brindará el enlace para poder verla. ItvSoft Sexto paso: Edición avanzada 5

37. Podemos pinchar sobre “Matemáticas (1)” (en el lado izquierdo) o en “Todas” (parte central) para ver la lista de las entradas que tengamos. Si la entrada no hubiese sido programa, nos aparecería una pantalla como la siguiente, tras haber publicado dicha entrada. ItvSoft Sexto paso: Edición avanzada 6

38. Si pinchamos en “Ver entrada” nos aparecerá una vista preliminar de la entrada que acabamos de publicar. De manera predeterminada la plantilla de nuestro blog puede tener algunos Widgets o Gadget incorporados, como por ejemplo el de seguidores y el archivo del blog. Sexto paso: Edición avanzada 7

40. El procedimiento para la inserción de enlaces es el siguiente: 1. Primero tenemos que destacar el texto que irá enlazado. Para ello, arrastramos el puntero del ratón mientras apretamos el botón izquierdo. En la imagen siguiente, el texto enlazado es Google en la frase "Buscador Google": 2. A continuación, tenemos que pulsar en Enlace , que se encuentra en la barra de herramientas y señalo con un rectángulo rojo en esta imagen: Se ItvSoft Sexto paso: Enlaces 1

41. Se abrirá un marco en el que hay que escribir la Dirección web del enlace o URL, como se muestra en la imagen anterior. También se puede incluir una dirección de correo electrónico con el mismo método. Y ya tenemos el enlace creado. Junto a él se verá una etiqueta azul con la que podemos abrir el enlace en una nueva ventana para comprobar que lo hemos escrito bien. Si no, lo podemos cambiar o eliminar. Las dos pestañas superiores del editor muestran el contenido de la entrada de distinta forma: En la parte de la pestaña Redactar se muestra el texto ya formateado con el editor visual, y tal como aparecerá en la entrada una vez publicada. En la parte de la pestaña Edición HTML se muestra el código fuente del texto tal y como queda con el lenguaje HTML. La edición en HTML se reserva para las personas que conocen este lenguaje. Como ejemplo, podemos ver cómo queda el enlace a Google que hemos realizado antes si abrimos la pestaña del código fuente: Buscador <a href=&quot;http://www.google.es&quot;>Google</a> ItvSoft Sexto paso: Enlaces 2

42. Sin embargo, una de las grandes ventajas de los blogs de Blogger es que permiten que se inserten muchos códigos utilizados en aplicaciones cuyos productos podemos incrustar en el blog. Los botones para formatear el texto que aparecen en la barra superior del editor son parecidos a otros que se manejan en editores convencionales, y si se coloca el cursor del ratón encima de ellos, aparece una descripción del botón en un marco de texto. Los únicos botones que pueden ser menos habituales en un procesador de textos son los de incluir enlaces, imágenes, elementos multimedia, etc. Puedes ver un video de cómo crear enlaces desde Blogger en la siguiente dirección: ItvSoft Sexto paso: Enlaces 3 http://www.youtube.com/watch?v=JTdnYgbnQW4

44. Si queremos insertar una imagen, hacemos clic en el icono de añadir imagen , destacado con un círculo rojo en la siguiente imagen: Y entonces aparece una ventana emergente, como se ve en la siguiente imagen, donde tenemos un menú a la izquierda que nos permite elegir una imagen desde nuestro blog, desde uno de nuestros álbumes de Picasa o desde un documento Web con su dirección URL. Muchos no saben que cada vez que incluimos una imagen en nuestro blog, queda guardada automáticamente en un álbum de Picasa que lleva el nombre de nuestro blog. ItvSoft Sexto paso: Imágenes 1

45. En principio, lo más habitual es subir la imagen desde nuestro disco duro, que es la opción inicial: ItvSoft Sexto paso: Imágenes 2

47. Cuando hacemos clic en la imagen, aparece junto a ella una etiqueta superpuesta de color azul que incluye las opciones, como podemos ver en la siguiente imagen: Haciendo clic en las opciones, podemos elegir el tamaño que queramos para la imagen, y también podemos alinearla en el documento . Si la alineamos a la izquierda o a la derecha de un párrafo, conviene que la imagen sea pequeña para que no quite mucho espacio al texto. Pero, por lo general, lo más aconsejable es centrar las imágenes en el documento . Por último, está la posibilidad de incluir un texto como pie de foto en la opción Añadir leyenda . Cuando una imagen se inserta dentro de una entrada del blog, el editor la reduce, y permite elegir entre cuatro tamaños, además del tamaño original . Casi siempre es aconsejable dejarla al tamaño original si ya la hemos ajustado con un programa adecuado antes de subirla. Si el tamaño es mayor que el de la imagen, ésta se ve un tanto borrosa y pixelada, con lo cual es mejor elegir un tamaño más reducido. ItvSoft Sexto paso: Imágenes 4

48. Además, hay que tener cuidado porque el tamaño Extra grande crea imágenes que puede que no se vean enteras si superan la anchura del diseño de la entrada, o pueden invadir el lateral del blog. Si queremos personalizar el tamaño a nuestro gusto, podemos acudir al código fuente. He comprobado que para ello primero hay que dejar la imagen con un tamaño mayor que el que tiene entre los cuatro que se pueden elegir; por ejemplo el Extra grande , pues si no, queda pixelada. Y después vamos al código HTML de la imagen y modificamos sus atributos width (anchura) y height (altura), como se ve en el siguiente código, que corresponde a la imagen anterior cuyo pie de página es &quot;Imagen añadida al editor&quot;: ItvSoft Sexto paso: Imágenes 5 <img border=&quot;0&quot; height=&quot;260“ src=&quot;http://2.bp.blogspot.com/_DCco/S1RPI/AAlk/p2mAps/s640/subir_imagen2.jpg&quot; width=&quot;528&quot; />

49. Lo bueno del editor es que si incluimos una imagen demasiado grande, la reduce al insertarla en el editor, pero se puede ver en su tamaño original haciendo un clic sobre la imagen . En este caso, la imagen se abre en la misma ventana, con la consiguiente molestia de tener que volver a la página anterior para seguir leyendo la entrada. De todas formas, si la imagen que tenemos es muy grande, lo mejor puede ser recortarla o reducirla con programas de retoque fotográfico o con servicios web como Picnik, que resultan muy cómodos y útiles. Otras aplicaciones web pueden solucionar un error muy habitual en los blogs, que es incluir muchas imágenes grandes en una entrada, lo que ralentiza la carga de la página y recarga el contexto de forma molesta para el lector. Una solución suele ser la de insertar un reproductor de pase de diapositivas como los que proporcionan los servicios web de alojamiento de imágenes Flickr y Álbunes Picasa. ItvSoft Sexto paso: Imágenes 6 http://www.picnik.com

50. En otros casos, las diapositivas pueden mostrarse en forma de vídeo , como lo puede hacer fácilmente usando la aplicación Picasa. Puedes ver un video de cómo crear enlaces desde Blogger en la siguiente dirección: ItvSoft Sexto paso: Imágenes 7 http://www.youtube.com/watch?v=kDhgx3eMOPE

52. Los elementos multimedia están adquiriendo gran importancia en la Web debido a la mejora técnica y a la mayor rapidez de las conexiones a Internet. En el campo de la enseñanza en concreto, sus posibilidades son ilimitadas, aunque el medio todavía es bastante nuevo como para poder decir que las cosas están claras en este campo. Muchos docentes están ahora investigando en el ámbito multimedia para dotar a sus actividades docentes de contenido fundamentado en vídeos, audio e imágenes además de en el trabajo con códigos de programación y aplicaciones que ofrecen todo tipo de interactividad . En Blogger se pueden incluir muchos elementos multimedia, como en otros gestores de contenido, y para que estos vídeos o audios se vean y se oigan en los blogs generalmente el usuario tiene que tener instalado en su navegador unos complementos o plugins de Flash y de Java que permiten la visión o audición de estos elementos. Esto en sí supone un problema, porque no todos los navegadores los tienen incorporados, aunque sí la mayoría. ItvSoft Sexto paso: Multimedia 1

53. En principio podemos trabajar a gusto con la multimedia sabiendo que casi todos los usuarios podrán beneficiarse de estas nuevas tecnologías. Generalmente, los gestores de blogs , es decir, las aplicaciones que como Blogger nos permiten crear blogs o bitácoras, tienen incorporadas algunas opciones con las que introducir el código necesario en nuestro blog para enlazar un vídeo u otros elementos multimedias. Vamos a ver cuáles son los pasos que se siguen habitualmente para realizar esto, y lo haremos con un ejemplo para traer un vídeo de YouTube y publicarlo en nuestro blog. ItvSoft Sexto paso: Multimedia 2

54. ItvSoft Sexto paso: Multimedia 3 Vamos a ver cuáles son los pasos que se siguen habitualmente para realizar esto, y lo haremos con un ejemplo para traer un vídeo de YouTube y publicarlo en nuestro blog.

56. ItvSoft Sexto paso: Multimedia 5 Si vemos el vídeo desde la sección Redactar del editor, nos aparecerá un cuadro con la palabra OBJECT, pero si lo vemos haciendo clic en la Vista previa , apreciaremos cómo quedará insertado en nuestra entrada del blog. Otra página web de donde podemos descargarnos vídeos de calidad es Dailymotion . Cuando elegimos un vídeo de este servicio, debajo del reproductor hay un campo de texto titulado &quot; embed code &quot;. Allí tenemos el código object que hay que copiar y pegar en el editor de nuestro blog.

58. En otros casos, las diapositivas pueden mostrarse en forma de vídeo , como lo puede hacer fácilmente usando la aplicación Picasa. Puedes ver un video de cómo crear enlaces desde Blogger en la siguiente dirección: ItvSoft Sexto paso: Videos 1 http://www.youtube.com/watch?v=kDhgx3eMOPE

60. Roa multimedia , excelente blog donde José Mª Campo informa de manera práctica sobre toda la multimedia que se puede incluir en un blog. El balcón abierto , blog de Ángel Puente sobre todo tipo de multimedia en los blogs. Edubloki , wiki de Lourdes barroso, que ha realizado varios vídeotutoriales en susobre distintas herramientas multimedia. Con eso tenemos para entretenernos un rato. La división de las entradas en el blog . Insertar álbumes de Flickr en el blog Insertar álbumes de Picasa en el blog . Embedit.in ItvSoft Sexto paso: Enlaces de interés

61. Cómo crear un blog en Blogger Prácticamente todo puede ser personalizable en Blogger. Desde el panel de Blogger, en la solapa “Configuración” podremos cambiar el título, agregar una descripción, permitir que los buscadores encuentren nuestro blog y definir si el blog tendrá contenido para todo público o sólo para los seguidores de nuestro blog, entre muchas otras opciones. Desde aquí, además de lo básico también podremos establecer opciones para el correo electrónico, el móvil, comentarios, manejo de Feeds RSS, permisos y mucho más.

62. Cómo crear un blog en Blogger Otra alternativa muy útil la encontramos en la solapa “Diseño”. Aquí podremos definir el modo en que se mostrarán los elementos en el blog, definiendo su ubicación, contando con la posibilidad también de editarlos para indicar preferencias. ItvSoft

63. Cómo crear un blog en Blogger Algo que le agrega mucha potencia a esta ventana es la posibilidad de agregar o modificar la configuración de los Gadgets. De esta manera, esta ventana nos permite incorporar nuevas funcionalidades a nuestro blog y, a su vez, personalizarlas. ItvSoft

64. Cómo crear un blog en Blogger Otra alternativa que nos puede resultar muy útil, es que desde esta ventana contamos con la posibilidad de acceder a “Diseñador de plantillas”. Desde allí podremos modificar la plantilla, sus tipografías y sus colores. Además podremos dimensionar el ancho, modificar el diseño del cuerpo del blog y también el del pie de página. ItvSoft

65. Cómo crear un blog en Blogger ItvSoft

66. Cómo crear un blog en Blogger Como podemos ver, Blogger es una plataforma que nos ofrece una excelente variedad de opciones para poder montar nuestro blog en pocos pasos y con gran facilidad. ItvSoft