Embedr es un servicio online y gratuito, que nos permite crear listas de reproducción personalizadas de hasta 100 vídeos.

Es muy fácil de utilizar, tan solo necesitamos ir copiando las URL de los vídeos que queremos publicar, y es compatible con vídeos alojados en YouTube, MySpace Video, DailyMotion, MetaCafe, Veoh, Vimeo, Blip.tv y otros, los cuales podremos mostrar en un solo reproductor.

Y por supuesto, nos proporciona el código HTML de un reproductor elegante y compacto, que copiaremos en nuestro sitio web. El reproductor mostrara los videos que hayamos seleccionado para publicar, con un efecto al estilo CoverFlow, el servicio nos permite ordenar los vídeos a nuestro gusto.

Embedr nos permite personalizar el reproductor, como lo hacemos en YouTube, seleccionando el color de los bordes, el tamaño y el modo de reproducción.

Me parece una opción muy interesante sí necesitamos publicar vídeos relacionados o capítulos de un programa y sin usar plugins.

Demo lista reproducción de videos creada con Embedr:

He estado ayudando a un compañero a dar sus primero pasos en wordpress, y como la mayoría de nosotros ha empezado en wordpress.com, y ya sabemos que sí utilizamos la versión gratuita hay muchas funcionalidad a las que no podemos acceder, como añadir plugins.

Pero wordpress no deja de sorprenderme…,

Sin usar ningún pulgin, podemos publicar fácilmente galerías de fotos y/o pases de diapositivas en una entrada o en una página. (La opción galería de fotos también es posible que la usemos aunque no utilicemos wordpress.com,)

Como publicar una galería de fotos y/o un pase de diapositivas?

El truco está en subir TODAS las fotografías que queremos publicar de una sola vez.

Pulsa sobre la imagen para verla más grande

Cuando seleccionamos insertar imagen, en una entrada/página, y se abre la opción Elegir Archivo, seleccionamos TODAS las fotografías a publicar.

Una vez el sistema haya finalizado la subidas de las fotos pulsaremos Guardar Cambios

Pulsa sobre la imagen para verla más grande

Tras Guardar Cambios, veremos las fotografías que acabamos de subir y que han creado una galería, la cual quedara asociada a la entrada/página. Debajo de las fotos que hemos subido, están las Opciones de la Galería, y también encontramos los botones para insertar una Galería, la cual podemos personalizar, y  un Pase de Diapositivas.

Finalmente seleccionamos la opción que más nos interesa publicar.

Demo Galeria y Pase Diapositivas

]]> http://mtperez.es/2010/11/02/publicar-una-galeria-de-fotos-o-un-pase-de-diapos-sin-plugin/feed/ 0 http://mtperez.es/2010/10/04/publicar-video-html-5-en-wordpress/ http://mtperez.es/2010/10/04/publicar-video-html-5-en-wordpress/#comments Mon, 04 Oct 2010 08:57:33 +0000 mtperez http://mtperez.es/?p=3130
HTML5 es un nuevo estándar de Internet que nos permite incrustar vídeos, sin necesidad de tener instalados plugins para los diferentes formatos de vídeos existentes.

Estoy empezando a hacer pruebas con HTML 5, aunque es muy posible que para cuando se haya implementado su uso masivo existan posibilidades más cómodas, atractivas y fáciles de utilizar por los usuarios, pero a día de hoy estas son mis pruebas y resultados.

Las pruebas las he realizado, básicamente, utilizando las etiquetas video e iframe.

Etiqueta video

Es el formato que más me gusta. Sí tengo que decir algo en contra, es que no consigo hacer funcionar la opción poster.

Para poder publicar vídeos en nuestro blog utilizando esta etiqueta escribiremos en nuestra entrada el siguiente código:

<video  width="660" height="540" controls><source src="URL_AL_VIDEO"></video>

Etiqueta iframe

Es el formato utilizado por Youtube y Vimeo. Particularmente no me gusta, ya que al utilizarla no consigo desactivar el auto-play, y los controles no aparecen.

Para poder publicar vídeos en nuestro blog utilizando esta etiqueta escribiremos en nuestra entrada el siguiente código:

<iframe src="URL_AL_VIDEO" width="480" height="360" frameborder="1"></iframe>

Resultado pruebas

A continuación dejo una tabla, de los formatos y navegadores con los que he realizado las pruebas y los resultados obtenidos:

Demo vídeo .m4v publicado utilizando la etiqueta video:

En una entrada anterior ya expliqué como insertar tablas excell sin utilizar plugins pero tiene un inconveniente y es que sí, a posteriori, queremos realizar cualquier modificación o incorporación de elementos o datos en la tabla o en la propia entrada o págnia de wordpres donde estamos publicando la tabla, se nos desconfigurará el diseño, teniendo que volver a editar el código html. Así que he estado probando un par de plugins, en concreto WP-Table y WP Table Reloaded, que nos permiten insertar tablas en nuestro wordpress sin mucha complicación. Y después de probarlos me decanto por WP Table Reloaded, por su capacidad, versatilidad y sencillez de uso.

WP-Table Reloaded

Es un plugin que nos permite crear y gestionar tablas fácilmente desde el panel de administración de nuestro wordrpresss.

Se instala y activa como cualquier otro pulgin de wordpress. Tras la instalación se crea un enlace en el menú Herramientas que nos da acceso directo a la gestión de las tablas existentes, así como a la creación de otras nuevas.

Cada tabla que creemos se adaptará a las necesidades del momento ya que podemos especificar el número de filas y columnas, también podemos moverlas, fusionarlas, añadir metadatos, así como dar paginación a la tabla, habilitar un motor de búsqueda y, por supuesto, personalizar su diseño.

Además podemos exportar las tablas creadas, así como importar otras, ya que usa los formatos CSV, XML y HTML.

A cada tabla creada el sistema le asignará un número de identificación, id, y también, nos proporcionará el shortcode correspondiente para que podamos pegarlo en una entrada, página o widgets de texto del sidebar.

Más información puedes consultar el sitio del plugin

Demos Tablas:

• Tabla 1

• Tabla 2

• Formulario de Inscripción hecho con wp- Table Reloaded

En la entrada anterior vimos como publicar mapas usando el código HTML que nos propociona Google Maps. En esta ocasión, vamos a utilizar shortcodes para evitar el inconveniente que supone re-escribir el código, ya que se pierde sí necesitamos reeditar el artículo o la página.

¿Qué es un shortcode?

Los shortcode son un código específico de WordPress, que nos  permiten integrar archivos o crear objetos con poco esfuerzo y sin utilizar plugins. De hecho existen repositorios de los Shorcodes más utilizados.

Los shortcode los introduciremos en la entrada o en la página donde queramos publicar el recurso, y para que todo funcione hay que realizar unos ajustes previos en el archivo functions.php de nuestro tema activo.

Como publicar Google Maps en WordPress con shortcode

1 Añade el siguiente código al archivo functions.php

Lo primero que tenemos que hacer es crear la función que nos permita publicar un mapa, y para ello acudiremos al archivo functions.php del tema que estamos utilizando.

El archivo functions.php se encuentra dentro de la carpeta themes. Recuerda que tienes que modificar el archivo de tu tema activo.

Una vez abierto, el archivo functions.php, introducimos el siguiente código:

//Google Maps Shortcode
function fn_googleMaps($atts, $content = null) {
extract(shortcode_atts(array(
"width" => '640',
"height" => '480',
"src" => ''
), $atts));return
'<iframe width="'.$width.'" height="'.$height.'"
frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="'.$src.'"></iframe>';
}
add_shortcode("googlemap", "fn_googleMaps");

Estos son los ajustes por defecto que tendrán los mapas que publiques, pero puedes cambiar el tamaño y dar uno que se adapte mejor al ancho de tu tema, modificando los valores en píxeles del ancho, width, y alto, height.

• Sí usas un único mapa en tu sitio:

Si vas a usar un único mapa, puedes poner en el shortcode del archivo functions.php, la URL del mapa que quieres publicar. Si vas a usar diferentes mapas hay que dejarlo en blanco.

• Sí usas un mapa diferente o de diferente tamaño en cada página o post:

Si vas a usar mapas de Google Maps en diferentes páginas o entradas y con diferente tamaño, puedes modificar la URL y el tamaño de cada mapa directamente en el shortcode de cada página o post, por ejemplo:

[googlemap width="200" height="200" src="URL"]

En este caso sustituye “URL” por la url que genera Google tras la personalización, ojo debes copiarla completa.

Finalmente guarda los cambios del archivo functions.php.

2 Busca en Google Maps el mapa que quieres mostrar

Pon la dirección del mapa que te interese publicar en tu wordpress en Google Maps

Haz clic en Enlazar, sí quieres puedes Personalizar el mapa que vamos a insertar.

y en el apartado Copia este código HTML para incrustar el mapa en tu sitio web, como podemos ver en la imagen siguiente:

copia la dirección que genera Google Maps, en concreto la parte marcada en azul, es el código que va entre comillas (“) despues de SRC= y hasta EMBED.

Un ejemplo de la dirección URL que tienes que copiar:

“http://www.google.com/maps?f=q&source=s_q&hl=es&geocode=&q=Calle+de+Pedro+Cerbuna,+50009+Zaragoza,+Espa%C3%B1a&sll=41.639052,-0.887318&sspn=0.117642,0.244446&ie=UTF8&hq=&hnear=Calle+de+Pedro+Cerbuna,+50009+Zaragoza,+Arag%C3%B3n,+Espa%C3%B1a&ll=41.640467,-0.89739&spn=0.011225,0.018239&z=15&iwloc=A&output=embed”

3 Introduce el shortcode en el post o la página

Donde quieras que se muestre el mapa de Google Maps escribe el shortcode:

[googlemap src="URL"]

Sustituye la palabra URL por la url que acabas de copiar tras la personalización, debes copiarla completa. Es muy importante que el código de la URL sea el que lleva el “embed”, para que no te inserte la página completa del Google sino solamente el mapa.
No hay diferencia visual con respecto a publicar el mapa utilizando el código <iFrame> que nos proporciona Google Maps, pero nos evitamos el inconveniente de tener que volver a copiar el código del mapa, sí realizamos algún cambio en la entrada o página donde está publicado.

Demo:

Ver mapa más grande

Google Maps nos permite publicar mapas en nuestro blog, o página web, de una manera sencilla, ya que nos proporciona el código HTML necesario para insertarlo.

Como Publicar mapas en WordPress

1 Busca en GoogleMaps el mapa que quieres mostrar

En Google Maps pon la dirección y te aparecerá el mapa, que te interese insertar en tu WordPress

2 Haz clic en Enlazar

Al hacer click en la opción Enlazar, se abre una nueva ventana, y allí encontramos el código HTML, necesario para insertar el mapa en cualquier web.

Podemos cambiar el tamaño de la ventana del mapa y algunos detalles más, ya sea a mano o a través de las diferentes opciones, es muy sencillo y para ello haremos click en Personalizar y obtener vista previa del mapa que se va a insertar, como podemos ver en la siguiente imagen:

Cuando ya tengamos el mapa listo copiaremos el código HTML e iremos a WordPress

3 Introduce el código iFrame en el post o la página

Ya en WordPress introduciremos el código, que nos proporciona Google Maps utilizando el editor HTML, en la entrada o página que queramos publicar el mapa.

De esta manera estamos insertando (embeber) como objeto el mapa de Google Maps, al igual que hacemos con vídeos y archivos flash. Pero hay un inconveniente, y es que sí necesitamos reeditar el artículo o la página perderemos el código, teniendo que volver a introducirlo. Pero, como no podía ser de otro modo, WordPress tiene soluciones para casi todo y podemos sortear este inconveniente sin necesidad de plugins (particularmente no me gustan y los evito siempre que puedo), insertando el código mediante un shortcode. Lo veremos en el siguiente artículo.

Demo:

¿Qué es un fotograma poster?

Es una imagen estática, fotografía, representativa del contenido del vídeo que vamos a publicar, y que a modo de carátula aparece en el visor del vídeo en vez de que éste aparezca en negro.

¿Que necesitamos para crear y publicar un fotograma poster en un video FLV?

• Necesitamos una imagen representativa del vídeo.

En mi caso, hago una captura de pantalla del fotograma que me interesa utilizar. Para hacer una captura de pantalla en MAC utilizo la combinación de teclas: cmd + Mayusculas+4, lo que me permite realizar una captura selectiva de solo lo que me interesa. Lo siento, pero desconozco como se hace en otros Sistemas Operativos.

• Renombrar la captura de pantalla, que acabamos de hacer, con el mismo nombre que el vídeo FLV, pero con la extensión jpg

• Alojar la imagen/fotograma poster junto con el video FLV que vamos a publicar.

• Utilizar la etiqueta useposter: con el valor 1, para habilitar la acción.

Yo utilizo el plugin Viper´s Video para insertar vídeos en wordpress, así que voy a comentar los ajustes de este plugin:

Tablero Administración Viper's Video

• 1] En el tablero de administración del plugin Viper´s Video seleccionamos FLV

• 2] y en Parametros Avanzados escribimos la etiqueta useposter: 1 (el valor 1 habilita la acción).

Ahora ya sólo nos queda insertar el vídeo. Sí tienes alguna duda respecto a este punto puedes leer Como Publicar videos .flv con Vipers Video QuickTags

Demo: fotogramaposter en video flv

Pinche aquí para ver el vídeo

Formulario de Contacto en WordPress

A veces nos puede interesar tener un formulario de contacto en una página dedicada, para ello, en wordpress, y podemos hacerlo muy fácilmente con el plugin WP-ContactForm. Mira un ejemplo de como queda

WP-ContactForm es un fantástico Formulario de Contacto creado por Ryan Duff, y es uno de los más sencillos y faciles de instalar, ya que no necesita ningún tipo de configuración.

Instalación de Cforms

Descargar WP-ContactForm, he encontrado la versión traducida, al español, y aquí la tienes lista para descargar.

Subir y activar el plugin como hacemos con cualquier otro.

Una vez que hemos activado el plugin ya podemos crear una nueva pagina en WordPress, y llamarla por ejemplo contacto.  Y utilizando el editor HTML  introduciremos

<!--contact form-->

Y ya tenemos una pagina a través de la cual los visitantes pueden comunicarse con nosotros.

Como publicar Audio en WordPress

El formato de audio que soporta WordPress es mp3.

Hay varias alternativas para añadir archivos de audio en WordPress. Las opciones que presento no son, ni mucho menos, las únicas, son las que me más se ajustan a mis gustos y necesidades.

1. Utilizando las herramientas que el propio WordPress nos proporciona.

Con diferencia es la opción que más me gusta.

Para saber cuales son los pasos a seguir para añadir audio en nuestro blog utilizando los recursos que WordPress nos proporciona, puedes ver este tutorial: Curso WordPress: Archivos Multimedia. Recursos Audiovisuales, apartado Como Añadir Audio.

Demo añadir audio con WordPress:

Publicación de un archivo de audio utilizando los recursos de WordPress

2. Utilizando Servicios on-line

Estos Servicios on-line nos proporcionan el código necesario para embeber los archivos de audio en WordPress, como se hace con los video de youtube.

Los servicios on line de audio que de momento me parecen más interesantes son:

- Odeo

Odeo es un sistema de archivo y publicación de audio en Internet.

Demo añadir audio con Odeo:

Publicación de un archivo de audio utlizando el servicio Odeo

- Goear

Goear es un portal similar a Odeo, donde están alojadas canciones y, a diferencia de este último, podemos subir aquellas que queramos para poder publicarlas en nuestro blog.

Demo añadir audio con Goear:

Publicación de un archivo de audio utlizando el servicio Goear

- Skeemr

y para terminar Skeemr, es un servicio similar a los anteriores.

Demo añadir audio con Skeemr:

Publicación de un archivo de audio utlizando el servicio Skeemr

	mv – Time Chill
	Found at skreemr.com

Consejos sobre la Utilización de Servicios on-line

Sí vas a utilizar cualquiera de estos Servicios on-line para insertar Audio en WordPress, te aconsejo que:

- lo hagas al final de todo, cuando ya tengas toda la Entrada lista para publicar

- y que utilices el editor HTML,

ya que si no lo hacemos así, suele dar problemas de enlace y el audio no se reproduce, aunque aparezca el reproductor de audio publicado en la entrada.

Soy usuaria de Mac y no sé muy bien sí tiene algo que ver pero Google Chrome me da problemas a la hora de insertar estos archivos, así que prefiero utilizar Firefox.

3. Utilizando Plugins

Hay Plugins que nos van a permitir añadir archivos de audio en nuestro blog.

SSG WordPress Google Audio Player, es un plugin que sirve básicamente para crear un reproductor de audio, de cualquier archivo de sonido. Para saber un poco más sobre lo que puede hacer este plugin, te dejo un enlace al blog de mi amigo Fernando.

Repositorio formularios en wordpress

Existen recursos de lo más variado para crear e insertar formularios en wordpress, y aquí dejo mi selección de los que he ido probando:

Google Docs

• Google Docs: nos ofrece la posibilidad de crear formularios con diferentes tipos de campos dependiendo de nuestras necesidades. Puedes saber más leyendo la entrada dedicada.

Plugins WordPress

• Cforms: es un plugin de worpress que nos permite crear formularios personalizados. Puedes saber más leyendo la entrada dedicada.

Formspring.me

• Formspring.me: es un tipo de formulario simple que básicamente nos permite recibir preguntas de otras personas y responderlas públicamente. Puedes saber más leyendo la entrada dedicada.

Formularios on-line

• Recursos para crear fácilmente Formularios Online: recopilación de recursos y plugin de wordpress para crear formularios fácilmente. Enlace a la recopilación.

]]> http://mtperez.es/2010/02/04/repositorio-formularios-en-wordpress/feed/ 0