 Bueno, vamos a comenzar la siguiente charla rápida e esta é un pouco especial, porque é o que hace que eu este presentando este track. Vale? Este señor é mi amigo e me enorgullece muchísimo que este aqui presente. Ha pasado unha enfermedad jodida e le dije que se não presentaba una charla que iba a cobrar. E que iba a cobrar bastante bien. Então, presento a charla, salio elegida e me enorgullezco muchísimo que Santiago Jiménez este aqui presente con todos nós en unha work en más. Que lleva un tiempo muy en silencio, por así decirlo. Santiago Jiménez é un fronen especializado en WordPress que ha trabajado para medios e agencias de comunicación desde 2005. Actualmente trabaja en a empresa Club District para a Liga Profesional de Fútbol. Ola Liga, solo. Para mi, é uno dos maiores expertos que conozco e não estou facendo a pelota porque é o meu amigo, en temas de podcasting con WordPress. E hoy bien hablarmos de unha cosa que non se suele utilizar, que é explotar a capacidade del reproductor de medios de WordPress. Um forte aplauso para ele. Graças, se me escucha? Me escucháis todos? Bueno, pues, muchas gracias por acudir a esta charla. Muchas gracias también a todo o equipo de organización e a todo o equipo de voluntarios porque, de verdad, se están pegando un gran trabajo. E creo que está teniendo moi buenos resultados, como estamos todos viendo. Como te decía, gracias por venir a la charla explotando a capacidade del reproductor de medios de WordPress. A que nos referimos quando hablamos de reproducir medios? Bien, pues nos referimos a la capacidade de nuestro WordPress de ser capaz de reproducir tanto ficheros de audio como ficheros de vídeo. Ya sea alojados en nuestro propio servidor o alojados en un servidor externo. E a que nos referimos quando hablamos del reproductor de medios de WordPress? Nos referimos a media element. Media element es el framework de audio e vídeo escrito en JavaScript que incluye todos os WordPress en sus instalaciones básicas. Cada vez que vosotros hacéis unha descarga en WordPress.org para descargar vuestros ficheros de instalación, ya se incluye este framework. Os dejo la web del framework que en realidad no tiene más información de la que tiene su GitHub. Os recomiendo los que estéis con el ordenador ahora que entereis en GitHub barra media element porque comentaremos cosas que viene aquí dentro. Se queréis ver os ficheros de media element que tenéis en vuestro WordPress, os dejo también la ruta. NWP includes js media element. Se tenéis alguna instalación local, lo podéis ver ahora. Ahí están incluídos todos estos ficheros. Cómo funciona este framework? Este framework lo que va a hacer es localizar unha etiqueta HTML de audio o de vídeo, la va a ocultar, va a incrustar unha estructura HTML que va a definir cada uno dos elementos de un reproductor, va a adjuntar unha hoja de estilo CSS que va a dar el aspecto a todos esos elementos del reproductor e también va a agregar unha serie de funcionalidades JavaScript para que podamos controlar el audio a través de esos elementos HTML. Luego veremos algún ejemplo que os quedará más claro. Quando utiliza WordPress media element? Non utiliza sempre, sino cuando nosotros le decimos como lo llamamos utilizando los short codes, audio o vídeo. No sé si os habéis utilizado, quizá los que estéis más cerca del podcast y en alguna vez el short code audio lo habéis usado e lo que está haciendo ésto, no sé se os habéis preguntado o que hacen estos short codes por detrás, lo que haces precisamente éso. Llamar a media element oculta unha etiqueta HTML5 de audio o de vídeo, incrusta su structure HTML, CSS e el JavaScript. Bien, porque é importante que utilicemos media element quando estamos trabajando con WordPress e utilizando sempre por encima de lo que seria unha etiqueta normal de HTML. Con unha etiqueta audio o unha etiqueta vídeo en HTML no vamos a poder controlar ni su estilo ni su funcionalidad. O reproductor que nos va a proporcionar, en realidad quien nos lo va a proporcionar, es el navegador que os estoy utilizando cada usuario en sus visitas. No vamos a poder hacer nada con él, cada uno va a tener su propio estilo, va a tener sus items, va a ser algo totalmente ajeno a nosotros. En cambio, con media element, al tener una structure HTML, la vamos a poder controlar con CSS e si sus funcionalidades son con JavaScript, también vamos a poder controlarlas. Lo que nos va a convertir en dueños e señores de ese reproductor, ¿de acuerdo? Aquí os pongo un ejemplo. Aqui en la columna de la izquierda tenéis como se ve unha etiqueta audio con Chrome, con Safari e con Firefox. Como ves, las tres tienen diferentes alturas, tienen diferentes colores e diferentes items. En Chrome, por exemplo, para descargar que es un desplegable. Aqui no tienes ese desplegable, pero tienes botones de 15 segundos salante e 15 segundos detrás. Firefox tiene un menos, distinto color. Es complicado e nunca lo vamos a poder integrar dentro de dé o diseño que tengamos que aplicar a nuestro desarrollo. En cambio, quando trabajamos con media element, os he dejado aqui tres ejemplos. O primero es el reproductor que nos va a soltar media element e nós no tocamos nada de CSS, es un reproductor sencillo, es muy parecido además al de Firefox. Pero es en HTML, CSS y JS e lo vamos a poder controlar todo. En cuanto apliquemos unos pocos estilos, ya sea pisando los estilos que media element nos proporciona o método que nós elijamos con aplicar unos pocos estilos, ya vamos a poder conseguir o nosso propio reproductor que se visualice como nós queramos. E se queremos ir incluso un pouco más allá, podemos incluso introducirlo dentro de aplicaciones móviles donde nós introduzcamos o nosso grupo e integrá-lo completamente en el diseño. Hay mucha luz, non sé se está viendo correctamente pero podemos hacer todo o que queramos con o nosso reproductor e vamos a tener la garantía de que sempre en todos os navegadores tengan a versión que tengan, sempre se van a ver como nós digamos. En CSS, a hora de integrar vuestro diseño, ya está donde vuestra imaginación e capacidad pueda llegar. Os he puesto aqui una estructura compactada para nos sacar todo el chorrón del HTML, pero para que veáis como están mostradas las clases que utiliza media element. Utiliza una metodología BEM, por lo cual es de verdad muy intuitivo se lo despegásemos todo e visimos todos os nombres de las clases vellemos que es muy sencillo saber con que clase tienes que atacar para conseguir el estilo que tú quieres. Se tenéis una instalación local aquí o cuando os pegueis a vuestro ordenador dentro de vuestro WordPress, en el InClubJS media element, media element CSS vais a poder echar un vistacillo también a todas las clases que hay. Por lo tanto, una primera ventaja de media element es el tema del diseño integración total de nuestro reproductor dentro de nuestro desarrollo pero también vamos a poder añadir máis funcionalidades de acuerdo e para añadir máis funcionalidades a media element lo primero que deberíamos hacer sería tomar el control vamos a olvidarnos del short code y lo que vamos a hacer es en primer lugar encolar un script que contenga el media element entrais en GitHub, en el GitHub que os decía de media element ahí podéis hacer todas las descargas necesarias encolaríamos este framework con el player encolaríamos una hoja de estilos que dé el aspecto a nuestro player y luego en el JS donde nosotros realizemos las ejecuciones JavaScript dentro de nuestra página solamente tendríamos que localizar el elemento audio o elemento vídeo instarciar media element player e pasar unos parámetros, fijaos que pocos con esto que tenemos aquí tendríamos exactamente no mesmo resultado que usu utilizamos o short code, le pasaríamos os parámetros play-pause, current, progress sería o que definiría cuántos ítems vamos a utilizar pero podemos ir más allá, si entramos en el GitHub media element en el apartado de plugins veréis que hay un montón de funcionalidades que podemos añadir, desde enviar a dispositivos externos añadir botones que cambien la velocidad, que cambien la velocidad de transmisión hay mucho, yo os recomiendo que echeis un vistacillo aquí os voy a poner un par de ejemplos rápidos, dos de los que más me gustan a mí uno es poder añadir el botón para enviar el contenido al croncas que tendríamos que hacer, igual que hemos añadido o JS con o framework e o CSS a parte de eso encolaríamos outro script que sería el del plugin e quando vamos a hacer la ejecución del JS lo mismo localizamos la etiqueta hdml audio o vídeo e le pasamos unos parámetros más, só lo alguno más como veis son tres líneas, cuatro líneas, con eso já tendríamos en nuestro reproductor, nuestro botón para enviar a croncas e con el aspecto e en la posición que nosotros queramos que tenga pero aún se puede estender más, este es o último ejemplo que os voy a enseñar a mí sé que o que más me gusta es el de los marcadores que es un marcador, bueno, cuando tenemos nuestra barra de tiempo lo que viene a ser esto es cuando llega un tiempo que nosotros definamos un tiempo de reproducción de nuestro fichero, ejecutar un acción haríamos lo mismo, encolaríamos el script con el framework encolaríamos la hoja de estilos, encolaríamos este plugin que nos hemos descargado desde el GitHub e le pasábamos algun parámetro más este está muy bien, es el que más me gusta a mí en primer lugar definíamos cuántos marcadores tenemos e en que segundo se va a producir ese marcador definiríamos también el estilo que va a tener ese marcador se queremos que tenga un color, que tenga una forma para avisar al usuario o igual no queremos avisar al usuario e que esos marcadores se ejecuten cuando nosotros consideremos e lo importante a esos marcadores les podemos pasar funciones de JavaScript aquí he puesto un ejemplo máis muy básico que es un alert, podemos haber puesto un console log simplemente para aprobar pero en este caso vamos a poder llegar hasta donde nosotros queramos, aquí ya es volvemos a lo mesmo que hay con el CSS hasta donde nuestra imaginación e nuestra capacidad nos permita llegar podríamos utilizar esto para que en el segundo 10 por ejemplo nos lance una caja de suscripción en el segundo 30, en el segundo 40, 50 que nos lance una caja de me gusta de Facebook y podemos enviar eventos de Google Analytics podemos hacer o que quisiéramos esto es lo bueno de JavaScript e de este plugin aquí ya es hasta donde nuestra imaginación nos permita llegar e nuestra capacidad por supuesto entrar por favor en la página de githcab.com barra media element, en la parte de plugins mirar todos los que hay jugar con ello os dejo aquí la dirección, outra vez para que entreis e recordad que esto es código abierto al igual que WordPress que nos guste, que creáis, que sea mejorable os digo lo mismo que digo sempre con WordPress a portar, se pode portar podéis mandar vuestros requests podéis aportar vuestras ideas e se son aprobadas por el resto de compañeros serán subidas se queréis algo má de información me tenéis en Twitter en Arroba Faclabs me tenéis en el correo electrónico sj Arroba sgm e ahora estaré en la barra de bar esta que han montado para WordPresseros de una e imedia dos cacas