Primeros pasos con Wordpress

Wordpress es una plataforma para la gestión de contenidos que permite la instalación y configuración rápida de un blog si contamos con ciertos elementos básicos en nuestro servidor, o proveedor de hosting en su caso, como la posibilidad de programar con el lenguaje PHP y la base de datos MySQL. Para instalar Wordpress en un servidor propio es necesario disponer de conocimientos como webmaster aunque esta plataforma incorpore un modo de instalación guiado que facilite mucho las cosas. Wordpress en su versión para servidor se puede descargar gratuitamente de http://wordpress-es.sourceforge.net/ porque dispone de licencia Open Source (código fuente abierto). Si os interesa esta opción para vuestro centro, investigad por esta vía.

Para utilizar Wordpress necesitas disponer de una cuenta de correo y registrarte en su página rellenando un sencillo formulario. Si no dispones de correo electrónico deberás crearte una nueva cuenta antes de seguir con el proceso (por ejemplo en Gmail).

Si ya dispones de la cuenta de correo haz clic sobre la opción Regístrese ahora.

• Completa el formulario de registro(1), contraseña para el acceso a Wordpress por duplicado (2), tu dirección de correo electrónico (3), acepta las condiciones de alta (4) y continúa con el proceso haciendo clic en siguiente.

• Seguidamente debemos consignar una dirección web o URL para nuestro blog (1) y un título (2) para que Wordpress compruebe si está disponible en la blogosfera. Si la dirección está libre seguimos adelante y hacemos clic en registrarse.

• Automáticamente, Wordpress crea el blog utilizando una plantilla estándar con un diseño gráfico preasignado (más adelante se podrá cambiar la estética si se desea):

Primeros pasos con Wordpress II

Vamos a crear el primer post de nuestro blog haciendo clic sobre My account (Mi cuenta) – Edit Profile.

Desde el panel lateral Mi cuenta se pueden crear los post haciendo clic sobre la opción Entradas.

Mientras editamos la entrada o post, podemos observar cómo Wordpress: en la parte superior derecha nos autentifica con nuestro usuario (1) en la parte superior izquierda sitúa el título del blog (2) y en la parte central (3) nos permite editar el post, escribiendo: un título del artículo, el texto (o pegándolo si ya se redactó en otro documento) y una etiqueta para el post, por si se considera necesario ir creando categorías, como si fueran carpetas, para cada conjunto de temas que se vayan a desarrollar en el blog.

Una vez preparado el primer post sólo queda hacer clic sobre publicar entrada desde la derecha de la pantalla y Wordpress certificará que la acción se ha realizado correctamente con esta respuesta:

Haciendo clic sobre Ver blog se puede comprobar cómo ha quedado el resultado.

A partir de aquí iniciamos el siguiente objetivo, trabajar con el caso práctico: "Cómo diseñar el blog de la asignatura".

Caso práctico: Diseña el blog de la asignatura con Wordpress.

a) El perfil personal

Para iniciar la práctica, lo primero que hemos de hacer es recuperar el blog ya creado para empezar a trabajar en él. Nos conectamos a la dirección o URL de nuestro blog que nos ha proporcionado Wordpress (http://auladigital5.wordpress.com/wp-login.php?loggedout=true)

Y accedemos con nuestro nombre de usuario y contraseña con la que creamos la cuenta. Una vez completados los datos hacemos clic en Iniciar Sesión. Seguidamente nos aparecerá la siguiente pantalla llamada Tablero que contiene todas las opciones de trabajo.

En esta pantalla se recoge toda la información sobre nuestro blog así como la posibilidad de editar nuestro perfil.

Vamos a crear un perfil ficticio para aula.digital5 y de esta forma seguir todos los pasos.

Caso práctico: Diseña el blog de la asignatura con Wordpress.

a) El perfil personal

Hacemos clic sobre editar perfil y se nos presenta el siguiente formulario.

En este apartado de Wordpress puedes cambiar tu contraseña o escribir información sobre ti. Adjuntaremos una foto a nuestro perfil. Selecciona la opción Cambiar tu Gravatar.

Escoge la primera opción en inglés Upload a new image from your computer (subir una imagen nueva desde el ordenador).

Como se aprecia en la figura es posible introducir una fotografía que esté alojada en el disco duro del PC o en un servidor en Internet. Hemos realizado las dos prácticas y te las mostramos a continuación. Si la fotografía estáalojada en el PC, simplemente hay que hacer clic sobre el botón Browse (Examinar), localizarla en la carpeta o lugar del disco en la que se encuentre y subirla a Wordpress haciendo clic sobre Open (Abrir).

Selecciona qué quieres mostrar como imagen:		El resultado será el siguiente:
(Nota: la imagen está tomada del Banco de recursos del ISFTIC:http://bancoimagenes.isftic.mepsyd.es/)

Caso práctico: Diseña el blog de la asignatura con Wordpress.

a) El perfil personal

Si por el contrario la fotografía está en algún servidor de Internet, hay que localizarla y copiar sobre el formulario la URL o dirección de Internet en la que se encuentre para que Wordpress la asocie a nuestro perfil.

Para experimentar con esta segunda opción hemos buscado en Google una fotografía cualquiera y la hemos vinculado a nuestro perfil realizando estos pasos.

Nos conectamos a Google (http://www.google.es) y seleccionamos la pestaña Imágenes. Buscamos una escribiendo la frase "foto carnet hombre".

Google nos devuelve muchísimos resultados de “fotos carnet hombre” y seleccionamos uno de ellos haciendo clic sobre la imagen.

A continuación Google nos muestra la página de la foto en su contexto de origen. Hacemos clic sobre la foto con el botón derecho del ratón y escogemos la opción Copiar acceso directo.

Nos dirigimos de nuevo al formulario del perfil, seleccionamos la opción Give us a link…(Pon el enlace de la imagen on line para asociar)

Pegamos, por ejemplo con la combinación de teclas Control+V, la URL de la foto en su lugar correspondiente.

Si hemos realizado bien el procedimiento, hacemos clic en Next y en unos segundos Wordpress nos confirmará que la operación se ha realizado con éxito mostrándonos la fotografía.

Guardamos el proceso haciendo clic sobre el botón Actualizar Perfil del final del formulario y la imagen quedará asignada.

Caso práctico: Diseña el blog de la asignatura con Wordpress.

b) El apartado de presentación del blog. La edición de un post e inserción de imágenes, vídeos y enlaces externos.

Al inicio de la práctica indicábamos resolver el apartado de Presentación del blog y la posibilidad de recibir comentarios sobre los post publicados siguiendo el ejemplo del caso real. Vamos a ello.

Regresamos al panel Tablero de nuestro blog y hacemos clic sobre la pestaña Entradas para editar el post de presentación.

Como se observa en la figura hemos redactado un post de prueba para el apartado de presentación del blog.

Caso práctico: Diseña el blog de la asignatura con Wordpress.

b) El apartado de presentación del blog. La edición de un post e inserción de imágenes, vídeos y enlaces externos.

Ahora insertemos en el texto una imagen, por ejemplo de una entrada a un centro escolar, siguiendo con el caso. Hacemos clic en el botón insertar imagen.

Y se nos abrirá la siguiente pantalla de trabajo. Seleccionamos una imagen que ya tenemos en el PC y hacemos clic sobre Seleccionar archivos y a continuación sobre el botón Subir imagen.

Wordpress nos responderá satisfactoriamente mediante este mensaje en el que incluye una visualización en miniatura de la imagen.

Hacemos clic sobre Insertar entrada y Guardar todos los cambios.

Y se nos muestra la imagen en la pantalla de edición del post.

Caso práctico: Diseña el blog de la asignatura con Wordpress.

b) El apartado de presentación del blog. La edición de un post e inserción de imágenes, vídeos y enlaces externos.

Insertemos un vídeo en nuestro post de bienvenida.

Previamente habremos editado un vídeo en nuestro PC o lo habremos buscado en Internet, por ejemplo en Youtube, también un servicio de Google. Veamos esta última opción.

Nos conectamos a Youtube (http://www.youtube.com) y buscamos un vídeo que nos interese. Por ejemplo el que proponemos: los Bidibooks .

Para proceder copiaremos con la combinación de teclas Control+C el código que aparece en la casilla Insertar y volveremos a nuestra pantalla de Wordpress, pero en este caso haremos clic sobre la pestaña Html (es el lenguaje de programación que permite editar páginas web o en este caso los post). Una vez tengamos esta vista pegaremos el código con la combinación de letras Control+V en el lugar que nos interese que aparezca el video y se incrustará automáticamente. Pero antes os preguntaréis "¿y dónde lo pego si aquí no se entiende nada?"

El lenguaje Html añade "etiquetas de marcas" al contenido que hemos escrito. Si os fijáis veréis que entre las etiquetas se lee nuestro texto. Hemos marcado en color lila nuestras frases. Como nos interesaba ubicar aquí el video, hemos abierto un espacio entre las líneas Html, y en medio de los dos párrafos hemos pegado el código del vídeo (lo que hemos marcado con la línea verde).

Haciendo clic sobre la pestaña Vista previa, aparecerá el resultado.

Si por el contrario el vídeo lo tenemos en nuestro PC, regresamos a la pestaña Visual y abandonamos la vista Html.

Hacemos clic sobre el botón añadir vídeo y el procedimiento es el ya descrito y conocido para una fotografía: añadir Desde el ordenador, Desde URL, Galería, Biblioteca de objetos.

Caso práctico: Diseña el blog de la asignatura con Wordpress.

b) El apartado de presentación del blog. La edición de un post e inserción de imágenes, vídeos y enlaces externos.

Por último, y para completar esta sección, vamos a insertar un enlace de un blog o página web externo a nuestro texto.

Para ello, lo primero que haremos será seleccionar la palabra o frase que vamos a enlazar con esta página externa. Siguiendo con el texto de la práctica hemos decidido seleccionar para enlazar la frase "incorporación de las TIC al aula y a los procesos de enseñanza-aprendizaje". A continuación hacemos clic sobre el botón enlace.

Ya que estamos siguiendo el blog de Marifé Lara vamos a enlazar esta expresión con la dirección o URL del suyo. Para ello al hacer clic sobre el botón enlace se nos presenta una ventana en la que tenemos que escribir la dirección o URL de la página a la que vamos a enlazar, en este casohttp://miclase.wordpress.com.

Haciendo clic en Insertar se nos muestra el texto ya enlazado (subrayado en color azul).

Pulsando con el ratón sobre la frase subrayada, enlazamos con este blog tan interesante.

Y llegados a este punto, lo único que nos queda por tratar una vez publicado el post de bienvenida, es la administración de los comentarios.

Caso práctico: Diseña el blog de la asignatura con Wordpress.

c) Comentarios para los post publicados

Por defecto Wordpress habilita la posibilidad de realizar comentarios a los post publicados.

La gestión de este proceso se encuentra ampliamente especificada en el apartado Opciones-Discusión. Vamos a comentar las utilidades de mayor interés.

En la opción Discusión, Wordpress ya ha habilitado por defecto mostrar los comentarios y evidentemente debemos dejarlo así. Más personal son las otras opciones de comentarios como el autor del comentario debe proporcionar su nombre y correo electrónico. Aquí cada autor de blog debe seleccionar la opción que más le interese en función de sus objetivos. En el caso real que estamos analizando se sobreentiende que Marifé tiene habilitada la opción predeterminada.

En la segunda parte de este formulario de Configuración se ofrecen posibilidades de alto valor para la gestión de los comentarios.

Las opciones para recibir notificaciones por correo cuando se hagan comentarios está activada, y es interesante la opción Para que un comentario aparezca y Moderación de los comentarios. Es posible crear una lista negra con las palabras clave que no queramos que aparezca. Las opciones de aprobación previas a la publicación pueden ser una opción válida para ciertos momentos y circunstancias regladas y no regladas.

La opción Visibilidad de avatares permite conocer información del perfil sobre el remitente para valorar la posibilidad de ampliar el círculo de relaciones. Esta posibilidad está relacionada la primera parte de esta práctica (editar el perfil). Una vez seleccionadas las opciones, recuerda hacer clic sobre el botón Guardar cambios situado al final del formulario para registrar todos los cambios que consideres en esta sección de administración del blog.

Como en nuestra práctica nosotros, además de autor, somos administradores y tenemos habilitada por defecto esta opción, nos hemos autorespondido con un comentario al post que hemos publicado siguiendo esta cadena de acciones.

Haz clic en Deja un comentario y escribe el texto que quieras.

Envía el comentario y se publicará en el blog:

Podemos editar de nuevo el comentario.

Caso práctico: Diseña el blog de la asignatura con Wordpress.

c) Comentarios para los post publicados

Y ya para cerrar esta sección del caso práctico, vamos a adecuar la configuración del blog a nuestra zona horaria y a cómo podemos mostrar la información de nuestro blog.

En ocasiones se ve en los blogs que los post están publicados a horas intespestivas. Ello se debe, en parte, a este desajuste de zona horaria, pues Wordpress toma por defecto una de las franjas norteamericanas (la del Pacífico).

Accedemos de nuevo a Opciones pero en este caso al menú General.

Seleccionamos en el apartado Zona horaria UTC+1 .

Hacemos clic en el botón Guardar cambios situado en el final del formulario.

Wordpress automáticamente nos actualizará las horas de publicación de los post.

Caso práctico: Diseña el blog de la asignatura con Wordpress.

d) Añadir un listado en la página principal del blog

Wordpress facilita poder incorporar al blog numerosos elementos accesorios, también llamados widgets, para dinamizar el espacio, completar y/o optimizar la información.

Veamos cómo incorporar una utilidad para generar un listado que pudiera utilizarse como blogroll (relación de enlaces seleccionados a otros blogs) o relación de temas de la asignatura en el que asociar archivos o documentos.

Accedemos al área de Aspecto del blog y seleccionamos la pestaña Widgets.

Arrastramos las opciones que más nos interesen para mostrar. Seleccionamos Enlaces y lo arrastramos al primer lugar de la ventana lateral.

Aparece la siguiente ventana:

Escogemos Blogroll y hacemos clic sobre Guardar.

Wordpress lo incorpora en su lugar correspondiente en la pantalla y visualizamos el resultado haciendo clic sobre la opción Ver sitio… y efectivamente ahí está.

A partir de aquí se pueden ver nuestros widgets.

Caso práctico: Diseña el blog de la asignatura con Wordpress.

d) Añadir un listado en la página principal del blog

Sigamos con la práctica editando la lista de enlaces asociados a las unidades didácticas de cualquiera de las materias del curso. Hacemos clic en Enlaces – Categoría de enlaces. Editamos la opción Blogroll.

Creamos una categoría de enlaces llamada Unidades didácticas.

Para añadir enlaces a esta categoría nos dirigimos a Nuevo enlace:

E iremos añadiendo los enlaces que nos interesen a nuestra lista anotando el título, la dirección y marcando que queremos asignarlo a la categoría Unidades didácticas.

Y seguidamente sobre Crear enlace. ¡Y ya lo habremos conseguido!

Finalmente, vamos a incluir en la página un espacio de noticias (dinámico) de actualidad sobre los temas que más nos interesen. Seleccionamos el gadget RSS, lo arrastramos a la barra lateral y le damos título "Actualidad" y hacemos clic sobre Guardar.

El resultado final es éste.

¿Fácil verdad? Hay muchos widgets o gadgets que te pueden ser útiles.

Y para concluir definitivamente esta práctica, revisemos el producto creado. El resultado final de este tour por Wordpress en imágenes (3) es el siguiente:

¡No está nada mal!

Seguid practicando con el ejercicio que presentamos a continuación.

Ejercicio: El blog de las actividades

Creación del Blog Sabio en Wordpress

Accede a Wordpress (http://www.Wordpress.com) e identifícate con tu usuario y contraseña para dar de alta el nuevo blog. En el panel Tablero haz clic sobre la opción Mis blogs y a continuación Register another blog (registrar otro blog).

Completa el formulario (recuerda anotar la URL o dirección web del blog para después facilitarla a los alumnos) y continúa.

Elige el idioma del blog y desmarca la opción Privacy, donde informa que el blog saldrá en las búsquedas de Google. Para acabar pulsa sobre Create blog (Crear blog).

Ya está creado el blog.

Edita el post de bienvenida para motivar a los alumnos y explicar las orientaciones sobre cómo trabajar en el proyecto.

Ejercicio: El blog de las actividades

Gestión de permisos en el Blog Sabio

Gestiona los permisos adecuados para que los alumnos puedan ser también autores del blog. Para ello, y como paso previo, da de alta enGmail una cuenta de correo para cada uno de los grupos. Será imprescindible para ampliar el elenco de autores del blog sabio y para restringir accesos no deseados. Si no conoces el procedimiento te lo explicamos muy rápidamente.

• Crea una nueva cuenta Gmail conectándote a http://www.gmail.com y haciendo clic sobre la opción Crear una cuenta.

• Rellena el formulario que te presentará Gmail. Se recomienda utilizar unos datos fáciles de recordar para podérselos facilitar posteriormente a los grupos.

• Una vez lo completes y aceptes las condiciones del servicio, se creará la cuenta automáticamente.

• Vuelve a Gmail http://www.gmail.com e inserta los datos (usuario y contraseña) de tu nueva cuenta para acceder al servicio. (El uso de Gmail se explica en otra cápsula-taller).

Y ahora sigamos con el ejercicio.

Ejercicio: El blog de las actividades

• En Wordpress para invitar a terceros a un blog, es necesario que éstos sean usuarios de Wordpress, por lo que previamente también realizaremos los pasos descritos en el inicio de esta cápsula taller.
• A continuación daremos de alta en el Blog sabio a los grupos de alumnos como autores. Para ello accede al panel Tablero opción Usuarios y da de alta a los equipos de trabajo con las cuentas Gmail que acabas de crear para cada uno.

• Una vez añadas los correos escoge el rol Contributor sucesivamente con todos y cada uno de ellos.

• Dirígete a la pestaña Comentarios cuando quieras visualizar rápidamente todos los comentarios y gestionarlos.

• Ahora bien, si quieres editar las preferencias de discusión ves a Opciones-Discusión y decide sobre las diferentes opciones al respecto de quién puede realizar comentarios sobre los post publicados.

• Para tu gestión sobre el proyecto, marca en el mismo apartado Enviarme un mensaje cuando…, de esta forma cada vez que los alumnos publiquen un post recibirás una notificación a tu cuenta de e-mail.

Autoevaluación

Apuntes para la reflexión y la generación de ideas

Autoevaluación

Cuestionario

Selecciona la opción correcta. Únicamente existe una para cada pregunta.