{"id":23,"date":"2014-11-06T10:49:53","date_gmt":"2014-11-06T10:49:53","guid":{"rendered":"http:\/\/iesalmadraba.org\/cursobda\/insercion-de-elementos-multimedia\/"},"modified":"2014-11-06T10:49:53","modified_gmt":"2014-11-06T10:49:53","slug":"insercion-de-elementos-multimedia","status":"publish","type":"page","link":"https:\/\/blogsaverroes.juntadeandalucia.es\/cursoblogsdeaulayexelearning\/bloque-1\/sesion-2\/insercion-de-elementos-multimedia\/","title":{"rendered":"Inserci\u00f3n de elementos multimedia"},"content":{"rendered":"<h2>Edicion de texto<\/h2>\n<div id=\"attachment_164\" style=\"width: 504px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-164\" class=\"wp-image-164 size-full\" src=\"https:\/\/blogsaverroes.juntadeandalucia.es\/cursoblogsdeaulayexelearning\/files\/2014\/11\/crsobda20141127_01-e1417103410277.jpg\" alt=\"Barra Tiny MCE\" width=\"494\" height=\"34\" srcset=\"https:\/\/blogsaverroes.juntadeandalucia.es\/cursoblogsdeaulayexelearning\/files\/2014\/11\/crsobda20141127_01-e1417103410277.jpg 494w, https:\/\/blogsaverroes.juntadeandalucia.es\/cursoblogsdeaulayexelearning\/files\/2014\/11\/crsobda20141127_01-e1417103410277-300x21.jpg 300w\" sizes=\"(max-width: 494px) 100vw, 494px\" \/><p id=\"caption-attachment-164\" class=\"wp-caption-text\">Barra de edici\u00f3n<\/p><\/div>\n<p>El panel de edici\u00f3n de contenidos incluye una doble barra de iconos que sirven para dar formato a los textos. Son, en orden:<\/p>\n<ol style=\"font-size: 0.8em\">\n<li>Negrita.<\/li>\n<li>Cursiva.<\/li>\n<li>Texto tachado. Se utiliza para retractarse de lo dicho, pero dejando constancia de que se dijo. En los blogs de opini\u00f3n o cr\u00edtica tienen sentido, no tanto en uno de tipo educativo.<\/li>\n<li>Lista no numerada.<\/li>\n<li>Lista numerada.<\/li>\n<li>Cita de p\u00e1rrafo.<\/li>\n<li>L\u00ednea divisoria horizontal.<\/li>\n<li>Alinear a la izquierda (normalmente es la opci\u00f3n por <a href=\"#\">defecto<\/a>).<\/li>\n<li>Centrar.<\/li>\n<li>Alinear a la derecha.<\/li>\n<li>Crear enlace. S\u00f3lo se activa cuando hay texto seleccionado.<\/li>\n<li>Eliminar enlace. S\u00f3lo se activa cuando el cursor est\u00e1 en un enlace.<\/li>\n<li>Leer m\u00e1s. Rompe una entrada en dos, es \u00fatil cuando algunas entradas son muy extensas y no queremos que aparezcan enteras en portada.<\/li>\n<li>Alternar barra de herramientas. Abre o cierra la segunda barra de herramientas.<\/li>\n<li>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.<\/li>\n<\/ol>\n<p>Y en la segunda barra:<\/p>\n<div id=\"attachment_165\" style=\"width: 504px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-165\" class=\"wp-image-165 size-full\" src=\"https:\/\/blogsaverroes.juntadeandalucia.es\/cursoblogsdeaulayexelearning\/files\/2014\/11\/crsobda20141127_011-e1417103492281.jpg\" alt=\"Segunda barra de edici\u00f3n\" width=\"494\" height=\"33\" srcset=\"https:\/\/blogsaverroes.juntadeandalucia.es\/cursoblogsdeaulayexelearning\/files\/2014\/11\/crsobda20141127_011-e1417103492281.jpg 494w, https:\/\/blogsaverroes.juntadeandalucia.es\/cursoblogsdeaulayexelearning\/files\/2014\/11\/crsobda20141127_011-e1417103492281-300x20.jpg 300w\" sizes=\"(max-width: 494px) 100vw, 494px\" \/><p id=\"caption-attachment-165\" class=\"wp-caption-text\">Segunda barra de edici\u00f3n<\/p><\/div>\n<ol style=\"font-size: 0.8em\">\n<li>Selector de estilos. Es muy importante que usemos el selector para asignar estilos a los encabezados de secci\u00f3n y otros elementos, para: facilitar a los buscadores que identifiquen correctamente la estructura de nuestro texto; evitar inconsistencias de dise\u00f1o entre unos art\u00edculos y otros, o al cambiar de <em>theme<\/em>.<\/li>\n<li>Subrayar.<\/li>\n<li>Ajustar p\u00e1rrafo<\/li>\n<li>Color del texto<\/li>\n<li>Pegar texto sin formato. Es MUY RECOMENDABLE emplear este m\u00e9todo para pegar textos con formato copiados de cualquier origen (un documento de Word, una web&#8230;). Cuando pegamos texto con formato solemos arrastrar numerosas etiquetas de marcado que pueden arruinar el dise\u00f1o de nuestra web o incluso volver ilegibles algunas partes de ella.<\/li>\n<li>Limpiar formato. Elimina las etiquetas de estilo en un texto con formato.<\/li>\n<li>Car\u00e1cter especial. Para insertar s\u00edmbolos y otros caracteres de texto<\/li>\n<li>Reducir sangr\u00eda<\/li>\n<li>Aumentar sangr\u00eda. Tambi\u00e9n sirven para aumentar o disminuir el nivel de uno o varios elementos de un listado<\/li>\n<li>Deshacer<\/li>\n<li>Rehacer<\/li>\n<li>Atajos de teclado. Muestra una chuleta con las combinaciones de teclas disponibles en este panel<\/li>\n<\/ol>\n<h3>Actividad 1<\/h3>\n<ol>\n<li>En la <strong>barra superior<\/strong>, despliega el men\u00fa <strong>Nuevo<\/strong> y haz clic en <strong>Entrada<\/strong>. Se abrir\u00e1 el panel de edici\u00f3n de entradas.<\/li>\n<li>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 -&gt; <a href=\"http:\/\/es.lipsum.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/es.lipsum.com\/<\/a><\/li>\n<li>En <strong>Categor\u00edas<\/strong>, as\u00edgnale la que creaste en la sesi\u00f3n anterior con el nombre de tu asignatura<\/li>\n<li>En <strong>Etiquetas<\/strong>, escribe <strong>Probando formatos<\/strong>.<\/li>\n<li><strong>Guarda<\/strong> la entrada<\/li>\n<li>Clic en <strong>Vista previa<\/strong> para ver el resultado<\/li>\n<\/ol>\n<h2>Im\u00e1genes<\/h2>\n<p>Uno de los tipos de elemento m\u00e1s frecuentes que necesitar\u00e1s insertar en tus p\u00e1ginas y entradas son las im\u00e1genes.<\/p>\n<p>Lo primero que necesitamos es buscar o componer la imagen que vamos a necesitar. <strong>Si la vamos a crear nosotros<\/strong> tenemos que asegurarnos de guardarla en alguno de estos <strong>formatos<\/strong>:<\/p>\n<ul>\n<li><strong>JPG<\/strong>. Es el m\u00e1s habitual para fotos o im\u00e1genes con mucha riqueza crom\u00e1tica.<\/li>\n<li><strong>GIF<\/strong>. En im\u00e1genes de colores planos, como logotipos, gr\u00e1ficas, etc. ofrece nitidez y poco peso. Permite usar fondos transparentes. Se puede animar.<\/li>\n<li><strong>PNG<\/strong>. Se comporta bien en fotos y gr\u00e1ficos, admite fondos transparente y diferentes niveles de compresi\u00f3n, pero debe optimizarse para web.<\/li>\n<\/ul>\n<p>Si por el contrario vamos a usar una imagen de internet, tenemos que tener en cuenta varias cosas:<\/p>\n<ul>\n<li><strong>\u00bfD\u00f3nde buscar im\u00e1genes?<\/strong> La opci\u00f3n m\u00e1s habitual puede ser buscar en Google, pero hay mejores opciones si buscas im\u00e1genes de calidad: Flickr, Pixabay, Tumblr o Pinterest pueden ser buenas fuentes.<\/li>\n<li><strong>\u00bfTengo derecho a usarlas?<\/strong> Tanto Google como Flickr permiten filtrar las b\u00fasquedas por tipo de licencia. Todas las im\u00e1genes de Pixabay est\u00e1n cedidas al dominio p\u00fablico, as\u00ed que puedes usarlas legalmente.<\/li>\n<li><strong>Resoluciones y tama\u00f1os<\/strong>. Las resoluciones m\u00e1s habituales en la Red son 72 o 96 p\u00edxeles por pulgada (ppp), aunque hay dispositivos capaces de mostrar casi 300 ppp. En cuanto al tama\u00f1o, este puede variar dependiendo de la resoluci\u00f3n y el tama\u00f1o de la pantalla, y en nuestro caso del dise\u00f1o que estemos usando. Por lo general unas dimensiones m\u00e1ximas de 900 p\u00edxeles en el lado mayor deber\u00edan ser m\u00e1s que suficientes en nuestro caso.<\/li>\n<li><strong>\u00bfAlojadas o enlazadas?<\/strong> Cuando insertas una imagen en tu p\u00e1gina 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\u00f3mo hacerlo, pero antes debes comprender qu\u00e9 supone hacerlo de una manera u otra:\n<ul>\n<li><strong>Alojadas<\/strong>. Se guardan en tu servidor, as\u00ed que puedes confiar en que siempre estar\u00e1n disponibles. Por otra parte ocupan espacio en disco, as\u00ed que el n\u00famero de im\u00e1genes que puedes insertar es limitado. \u00bfCu\u00e1ntas? Depende del tama\u00f1o y la resoluci\u00f3n. Si tienes 10 MB de espacio (10.240 KB) y no subes im\u00e1genes de m\u00e1s de 250 KB te caben m\u00e1s de 20.<\/li>\n<li><strong>Enlazadas<\/strong>. Se guardan en los servidores de las webs donde las has encontrado, as\u00ed que no ocupan espacio en el disco duro de tu servidor. Adem\u00e1s, 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\u00e1 de tu blog. Una opci\u00f3n muy recomendable es subir tus fotos, en especial si son muy grandes, a alg\u00fan servicio de alojamiento de im\u00e1genes (Flickr, Tumblr, Pinterest&#8230;) e insertarlas en tu blog mediante su URL<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Ya ya ya ya, pero \u00bfc\u00f3mo se hace?<\/h3>\n<p>Lo podr\u00eda explicar yo, pero Juan Garc\u00eda ya lo hace en faqoff: <a href=\"http:\/\/faqoff.es\/anadir-imagenes-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">A\u00f1adir im\u00e1genes a WordPress<\/a>. Y un compa\u00f1ero de Getxo explica aqu\u00ed como insertar una imagen de otra web: <a href=\"http:\/\/ticsidro3.wordpress.com\/2009\/02\/17\/tarea-insertar-una-imagen-desde-url\/\" target=\"_blank\" rel=\"noopener noreferrer\">Insertar una imagen desde URL<\/a>.<\/p>\n<h3>Actividad 2<\/h3>\n<p>Edita la entrada que publicaste en la actividad anterior para a\u00f1adirle una imagen. Condiciones:<\/p>\n<ol>\n<li>La imagen debe ser una fotograf\u00eda art\u00edstica de Tarifa.<\/li>\n<li>No puede haber im\u00e1genes repetidas.<\/li>\n<li>La imagen debe estar correctamente identificada con el nombre del autor y, si es posible, el t\u00edtulo de la obra.<\/li>\n<li>Debe tener unas dimensiones m\u00ednimas de 400 px y m\u00e1ximas de 900 px en su lado mayor<\/li>\n<li>Puedes alojar la imagen en nuestro servidor o enlazarla, como prefieras.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h2>Galer\u00edas<\/h2>\n<p>Tambi\u00e9n podemos insertar no una sola imagen sino un grupo de ellas.<\/p>\n<p>Mira qu\u00e9 clarito lo explica Manuel Vicedo: <a href=\"http:\/\/manuelvicedo.com\/wordpress\/crear-galeria-imagenes\/\" target=\"_blank\" rel=\"noopener noreferrer\">C\u00f3mo crear una galer\u00eda de im\u00e1genes en WordPress<\/a>.<\/p>\n<h3>Actividad 3<\/h3>\n<p>Publica una entrada en el blog de pruebas que incluya una galer\u00eda con tus im\u00e1genes favoritas de las que han subido tus compa\u00f1eros en la actividad anterior. Condiciones:<\/p>\n<ol>\n<li>El t\u00edtulo de la entrada debe ser: Favoritas de *tu nombre*.<\/li>\n<li>As\u00edgnale la categor\u00eda &#8216;Sin categor\u00eda&#8217;<\/li>\n<li>La galer\u00eda debe contener 6 im\u00e1genes<\/li>\n<\/ol>\n<p>Nota: s\u00f3lo puedes crear una galer\u00eda con las im\u00e1genes que est\u00e9n alojadas en nuestro servidor, por lo que no podr\u00e1s elegir las que se hayan insertado mediante URL.<\/p>\n<h2>V\u00eddeo<\/h2>\n<p>Insertar un v\u00eddeo de cualquier servicio online (YouTube, Vimeo, Flickr&#8230;) hace unos a\u00f1os era un proceso un proceso delicado. Ahora basta con que pegues la URL del v\u00eddeo y WordPress genera autom\u00e1ticamente el c\u00f3digo necesario para insertar el v\u00eddeo.<\/p>\n<p><iframe loading=\"lazy\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/lyCefk-Yp3s?feature=oembed&#038;wmode=opaque\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>Si necesitas m\u00e1s control sobre el resultado o falla el reconocimiento autom\u00e1tico del v\u00eddeo, puedes probar este procedimiento: <a href=\"http:\/\/cmuaformacion.com\/como-insertar-un-video-de-youtube-o-vimeo-en-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">C\u00f3mo insertar un v\u00eddeo de Youtube o Vimeo en WordPress<\/a><\/p>\n<h3>Actividad 4<\/h3>\n<p>Publica una entrada que contenga un v\u00eddeo relacionado con tu asignatura. As\u00edgnale la categor\u00eda y palabras claves adecuadas.<\/p>\n<h2>Audio<\/h2>\n<p>En las versiones recientes tambi\u00e9n es posible simplemente pegar la URL de la p\u00e1gina o del archivo para que WordPress extraiga la informaci\u00f3n necesaria e inserte el c\u00f3digo.<\/p>\n<p>Este es un ejemplo a partir de la URL de una p\u00e1gina de SoundCloud.<\/p>\n<p><iframe loading=\"lazy\" width=\"500\" height=\"400\" scrolling=\"no\" frameborder=\"no\" src=\"https:\/\/w.soundcloud.com\/player\/?visual=true&#038;url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F179426869&#038;show_artwork=true&#038;maxwidth=500&#038;maxheight=750\"><\/iframe><\/p>\n<p>Y este a partir de un archivo en MP3.<\/p>\n<!--[if lt IE 9]><script>document.createElement('audio');<\/script><![endif]-->\n<audio class=\"wp-audio-shortcode\" id=\"audio-23-1\" preload=\"none\" style=\"width: 100%;\" controls=\"controls\"><source type=\"audio\/mpeg\" src=\"http:\/\/www.tonycuffe.com\/mp3\/tail%20toddle.mp3?_=1\" \/><a href=\"http:\/\/www.tonycuffe.com\/mp3\/tail%20toddle.mp3\">http:\/\/www.tonycuffe.com\/mp3\/tail%20toddle.mp3<\/a><\/audio>\n<p>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\u00eda alg\u00fan servicio dedicado, ya que suelen mejorar la compresi\u00f3n y reproducci\u00f3n del audio<\/p>\n<h3>Actividad 5<\/h3>\n<p>Publica una entrada que contenga un clip de audio. As\u00edgnale la categor\u00eda y palabras claves adecuadas.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Edicion de texto El panel de edici\u00f3n de contenidos incluye una doble barra de iconos que sirven para dar formato a los textos. Son, en orden: Negrita. Cursiva. Texto tachado. Se utiliza para retractarse&#46;&#46;&#46;<\/p>\n","protected":false},"author":10581,"featured_media":0,"parent":31,"menu_order":6,"comment_status":"open","ping_status":"closed","template":"","meta":{"ngg_post_thumbnail":0,"footnotes":""},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/cursoblogsdeaulayexelearning\/wp-json\/wp\/v2\/pages\/23"}],"collection":[{"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/cursoblogsdeaulayexelearning\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/cursoblogsdeaulayexelearning\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/cursoblogsdeaulayexelearning\/wp-json\/wp\/v2\/users\/10581"}],"replies":[{"embeddable":true,"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/cursoblogsdeaulayexelearning\/wp-json\/wp\/v2\/comments?post=23"}],"version-history":[{"count":0,"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/cursoblogsdeaulayexelearning\/wp-json\/wp\/v2\/pages\/23\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/cursoblogsdeaulayexelearning\/wp-json\/wp\/v2\/pages\/31"}],"wp:attachment":[{"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/cursoblogsdeaulayexelearning\/wp-json\/wp\/v2\/media?parent=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}