Inserción de elementos multimedia

Edicion de texto

Barra Tiny MCE

Barra de edición

El panel de edición de contenidos incluye una doble barra de iconos que sirven para dar formato a los textos. Son, en orden:

  1. Negrita.
  2. Cursiva.
  3. Texto tachado. Se utiliza para retractarse de lo dicho, pero dejando constancia de que se dijo. En los blogs de opinión o crítica tienen sentido, no tanto en uno de tipo educativo.
  4. Lista no numerada.
  5. Lista numerada.
  6. Cita de párrafo.
  7. Línea divisoria horizontal.
  8. Alinear a la izquierda (normalmente es la opción por defecto).
  9. Centrar.
  10. Alinear a la derecha.
  11. Crear enlace. Sólo se activa cuando hay texto seleccionado.
  12. Eliminar enlace. Sólo se activa cuando el cursor está en un enlace.
  13. Leer más. Rompe una entrada en dos, es útil cuando algunas entradas son muy extensas y no queremos que aparezcan enteras en portada.
  14. Alternar barra de herramientas. Abre o cierra la segunda barra de herramientas.
  15. Insertar encuesta. Este icono aparece porque tenemos instalado y activado un plugin para generar encuestas. A veces el editor incluye iconos extra si lo requieren algunas extensiones.

Y en la segunda barra:

Segunda barra de edición

Segunda barra de edición

  1. Selector de estilos. Es muy importante que usemos el selector para asignar estilos a los encabezados de sección y otros elementos, para: facilitar a los buscadores que identifiquen correctamente la estructura de nuestro texto; evitar inconsistencias de diseño entre unos artículos y otros, o al cambiar de theme.
  2. Subrayar.
  3. Ajustar párrafo
  4. Color del texto
  5. Pegar texto sin formato. Es MUY RECOMENDABLE emplear este método para pegar textos con formato copiados de cualquier origen (un documento de Word, una web…). Cuando pegamos texto con formato solemos arrastrar numerosas etiquetas de marcado que pueden arruinar el diseño de nuestra web o incluso volver ilegibles algunas partes de ella.
  6. Limpiar formato. Elimina las etiquetas de estilo en un texto con formato.
  7. Carácter especial. Para insertar símbolos y otros caracteres de texto
  8. Reducir sangría
  9. Aumentar sangría. También sirven para aumentar o disminuir el nivel de uno o varios elementos de un listado
  10. Deshacer
  11. Rehacer
  12. Atajos de teclado. Muestra una chuleta con las combinaciones de teclas disponibles en este panel

Actividad 1

  1. En la barra superior, despliega el menú Nuevo y haz clic en Entrada. Se abrirá el panel de edición de entradas.
  2. Pega un texto cualquiera y dale formato para probar las opciones descritas arriba. Si necesitas un texto para copiar y pegar, puedes usar este generador -> http://es.lipsum.com/
  3. En Categorías, asígnale la que creaste en la sesión anterior con el nombre de tu asignatura
  4. En Etiquetas, escribe Probando formatos.
  5. Guarda la entrada
  6. Clic en Vista previa para ver el resultado

Imágenes

Uno de los tipos de elemento más frecuentes que necesitarás insertar en tus páginas y entradas son las imágenes.

Lo primero que necesitamos es buscar o componer la imagen que vamos a necesitar. Si la vamos a crear nosotros tenemos que asegurarnos de guardarla en alguno de estos formatos:

  • JPG. Es el más habitual para fotos o imágenes con mucha riqueza cromática.
  • GIF. En imágenes de colores planos, como logotipos, gráficas, etc. ofrece nitidez y poco peso. Permite usar fondos transparentes. Se puede animar.
  • PNG. Se comporta bien en fotos y gráficos, admite fondos transparente y diferentes niveles de compresión, pero debe optimizarse para web.

Si por el contrario vamos a usar una imagen de internet, tenemos que tener en cuenta varias cosas:

  • ¿Dónde buscar imágenes? La opción más habitual puede ser buscar en Google, pero hay mejores opciones si buscas imágenes de calidad: Flickr, Pixabay, Tumblr o Pinterest pueden ser buenas fuentes.
  • ¿Tengo derecho a usarlas? Tanto Google como Flickr permiten filtrar las búsquedas por tipo de licencia. Todas las imágenes de Pixabay están cedidas al dominio público, así que puedes usarlas legalmente.
  • Resoluciones y tamaños. Las resoluciones más habituales en la Red son 72 o 96 píxeles por pulgada (ppp), aunque hay dispositivos capaces de mostrar casi 300 ppp. En cuanto al tamaño, este puede variar dependiendo de la resolución y el tamaño de la pantalla, y en nuestro caso del diseño que estemos usando. Por lo general unas dimensiones máximas de 900 píxeles en el lado mayor deberían ser más que suficientes en nuestro caso.
  • ¿Alojadas o enlazadas? Cuando insertas una imagen en tu página puedes elegir si alojas el archivo en el servidor de tu blog o en cualquier otro (por ejemplo en el mismo sitio donde lo encontraste). Luego veremos cómo hacerlo, pero antes debes comprender qué supone hacerlo de una manera u otra:
    • Alojadas. Se guardan en tu servidor, así que puedes confiar en que siempre estarán disponibles. Por otra parte ocupan espacio en disco, así que el número de imágenes que puedes insertar es limitado. ¿Cuántas? Depende del tamaño y la resolución. Si tienes 10 MB de espacio (10.240 KB) y no subes imágenes de más de 250 KB te caben más de 20.
    • Enlazadas. Se guardan en los servidores de las webs donde las has encontrado, así que no ocupan espacio en el disco duro de tu servidor. Además, al cargar archivos de varios servidores a la vez el tiempo de carga se reduce. Por otra parte, si el administrador de la web de donde tomaste la imagen la elimina (o simplemente cambia su URL) esta desaparecerá de tu blog. Una opción muy recomendable es subir tus fotos, en especial si son muy grandes, a algún servicio de alojamiento de imágenes (Flickr, Tumblr, Pinterest…) e insertarlas en tu blog mediante su URL

Ya ya ya ya, pero ¿cómo se hace?

Lo podría explicar yo, pero Juan García ya lo hace en faqoff: Añadir imágenes a WordPress. Y un compañero de Getxo explica aquí como insertar una imagen de otra web: Insertar una imagen desde URL.

Actividad 2

Edita la entrada que publicaste en la actividad anterior para añadirle una imagen. Condiciones:

  1. La imagen debe ser una fotografía artística de Tarifa.
  2. No puede haber imágenes repetidas.
  3. La imagen debe estar correctamente identificada con el nombre del autor y, si es posible, el título de la obra.
  4. Debe tener unas dimensiones mínimas de 400 px y máximas de 900 px en su lado mayor
  5. Puedes alojar la imagen en nuestro servidor o enlazarla, como prefieras.

 

Galerías

También podemos insertar no una sola imagen sino un grupo de ellas.

Mira qué clarito lo explica Manuel Vicedo: Cómo crear una galería de imágenes en WordPress.

Actividad 3

Publica una entrada en el blog de pruebas que incluya una galería con tus imágenes favoritas de las que han subido tus compañeros en la actividad anterior. Condiciones:

  1. El título de la entrada debe ser: Favoritas de *tu nombre*.
  2. Asígnale la categoría ‘Sin categoría’
  3. La galería debe contener 6 imágenes

Nota: sólo puedes crear una galería con las imágenes que estén alojadas en nuestro servidor, por lo que no podrás elegir las que se hayan insertado mediante URL.

Vídeo

Insertar un vídeo de cualquier servicio online (YouTube, Vimeo, Flickr…) hace unos años era un proceso un proceso delicado. Ahora basta con que pegues la URL del vídeo y WordPress genera automáticamente el código necesario para insertar el vídeo.

Si necesitas más control sobre el resultado o falla el reconocimiento automático del vídeo, puedes probar este procedimiento: Cómo insertar un vídeo de Youtube o Vimeo en WordPress

Actividad 4

Publica una entrada que contenga un vídeo relacionado con tu asignatura. Asígnale la categoría y palabras claves adecuadas.

Audio

En las versiones recientes también es posible simplemente pegar la URL de la página o del archivo para que WordPress extraiga la información necesaria e inserte el código.

Este es un ejemplo a partir de la URL de una página de SoundCloud.

Y este a partir de un archivo en MP3.

Si quieres usar tus propios archivos puedes alojarlos en cualquier servicio de alojamiento de archivos de audio, como Soundcloud, o subirlos a cualquier disco duro online, como Dropbox. Yo recomendaría algún servicio dedicado, ya que suelen mejorar la compresión y reproducción del audio

Actividad 5

Publica una entrada que contenga un clip de audio. Asígnale la categoría y palabras claves adecuadas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *