Diseño Web

Diseño Web, Gestores de contenidos, Trucos

Vídeos en Moodle. Mp4, html5 y trucos para incrustarlos

Llevamos un tiempo trabajando en un proyecto con Moodle. La herramienta está muy bien, en pleno crecimiento, con gran soporte de la comunidad, y ahora esta (como la mayoría de las páginas web) viendo cómo incrustar los vídeos. Hace unos años ni se nos ocurría meter vídeos en una web. Ahora es algo normal y casi esencial en las lecciones de Moodle. Pero todavía están viendo cómo hacerlo y pasando de Flash a html5. Os dejamos algunos trucos que vimos (hemos trabajado con la versión 2.9). Desactiva los Reproductores multimedia  antiguos: Ve a Administración del sitio>Apariencia>Incrustación de multimedia y desmarca las  opciones de los formatos que vayas a usar. Esto está para poder ser compatible con reproductores que no admitan html5 pero hoy en día lo admiten casi todos. Además, cuando yo activaba la opción de Quicktime el reproductor que usaban muchos navegadores para mp4 por alguna razón era ese y daba muchos problemas. De esta manera usarás si o sí vídeos html5 (con la etiqueta vídeo). Moodle pone el tamaño de los vídeos por defecto y en teoría no se puede cambiar. Algo que creo viene heredado de cuando no se usaban tantos vídeos pero que creo que debe arreglarse pronto. Necesitamos poder ajustar el tamaño de los vídeos. En mi caso el tamaño por defecto era muy pequeño y tuve que buscar una solución. Os dejo dos: El tamaño del vídeo viene definido en el fichero  lib/medialib.php . Podrías cambiarlo ahí, pero no lo recomiendo. Moodle, en sus FAQ, recomienda cambiarlo en el fichero config.php de la raíz (donde lo cambiamos nosotros) o en el fichero config.php de tu tema en theme/themename/config.php. El código a poner (al final de ese fichero) es: … if (!defined(‘CORE_MEDIA_VIDEO_WIDTH’)) { // Default video width if no width is specified; some players may do something // more intelligent such as use real video width. // May be defined in config.php if required. define(‘CORE_MEDIA_VIDEO_WIDTH’, 800); } if (!defined(‘CORE_MEDIA_VIDEO_HEIGHT’)) { // Default video height. May be defined in config.php if required. define(‘CORE_MEDIA_VIDEO_HEIGHT’, 600); } if (!defined(‘CORE_MEDIA_AUDIO_WIDTH’)) { // Default audio width if no width is specified. // May be defined in config.php if required. define(‘CORE_MEDIA_AUDIO_WIDTH’, 400); }… El problema que tendrás si haces lo anterior es que fuerza el tamaño grande también sí o sí a dispositivos móviles. Claro si le pones 600×400 a un móvil o a una tablet en vertical…no se ve el vídeo. Nosotros lo solucionamos por CSS forzando un max-width en el contenedor de vídeos si era un dispositivo de menos de x resolución por este método. Otro problema inesperado con el que nos encontramos fue al subir varios vídeos a una lección. Nos encontramos que si subíamos más de 6 vídeos, a partir del 6º (esto puede variar según el servidor) no se mostraba nada mas que una pantalla negra. Tras mucho investigar encontramos que Moodle pone por defecto (también en el fichero lib/medialib.php) una etiqueta al video de css para que se carguen los metadatos e imágenes de todos los vídeos. Es decir pre-carga parte de todos los vídeos. Esto abre conexiones que, en ciertos navegadores (Chrome, Safari), llenaban las conexiones y los sockets. Vamos que no se veían. Solución:  En ese fichero hay una línea que pone: preload=’metadata’ . Hay que cambiarlo por preload=’none’ Esto tiene el inconveniente que no se mostrará la imagen de pre-visualización del vídeo, sólo la barra de play. Pero puedes solucionarlo también por CSS añadiendo una imagen. Subiré lo que vaya descubriendo por si ayuda a alguien más.

Diseño Web, Trucos

Insertar un vídeo de Youtube en tu web de manera responsive (adaptable a los dispositivos)

Una de las cosas básicas que suele querer hacer todo el mundo que tiene una web es insertar un vídeo de Youtube. El problema es que cuando le das a “Compartir, Insertar”, Youtube (y Vimeo y muchos otros) te da un código en formato iframe, con un año y alto definidos. Normalmente de esta manera: iframe src=”https://www.youtube.com/embed/XXXXXX” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”>/iframe   (donde he quitado las etiquetas del iframe para que no me lo muestre en mi WordPress). El problema de este código es que si lo pegamos en una web (que no tenga la plantilla ya preparada como vamos a explicar), se verá de ese tamaño en el ordenador, pero en móviles se saldrá de la pantalla. No es responsive. Afortunádamente hay una solución “sencilla” por CSS (hay que saber algo de CSS). Solución: Lo primero que tenemos que hacer es rodear el código de Youtube en un div al que le pondremos una categoría que queramos: <div class=”video-contenedor”> <iframe src=”http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0″ width=”800″ height=”450″ frameborder=”0″></iframe> </div> Ahora en tu hoja de estilos vas a hacer los siguiente: vamos a poner el contenedor con un padding-bottom de entre un 50-60%, y los elementos incrustados (ifram, embed etc) de ese contenedor los vamos a forzar a un 100%.  Así estos elementos se ajustarán al dispositivo. .video-contenedor  { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-contenedor iframe, .video-contenedor object, .video-contenedor embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } Obviamente tendréis que ir probando y modificando el código para ajustarlo a lo que necesites. Os pongo otro ejemplo que hemos usado para poner 2 vídeos juntos. En las pantallas grandes se ven uno junto al otro, en pantallas de menos de 600px se muestran uno debajo del otro y centrados: @media (max-width: 600px) { .video-contenedor { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 300px; overflow: hidden; } .video-contenedor iframe, .video-contenedor object, .video-contenedor embed { position:relative; top: 0; left: 0; width: 80%; height: 80%; padding-left:15% } }      

Diseño Web, Webs

Generadores de dominios: busca un nombre de dominio adecuado

Si estás empezando un nuevo proyecto, una de las cosas que más te cuesta decidir es el nombre del dominio. ¿Será sencillo, estará libre, será llamativo, irá bien para el SEO? Si no sabes qué dominio escoger porque el que se te había ocurrido está cogido….puede que los generadores de dominios te ayuden. Son páginas que generan ideas con unos parámetros escogidos y te sirven para hacer un brain-storming. Uno de los más famosos en inglés es Dot-o-mator, que tiene hasta aplicación para iPhone.  Es sencillo de usar, pon la palabra elegida y pon palabras al principio y/o al final, o elige de las listas que tiene. La web se encargará de hacer una combinación de estas configuraciones que has puesto y mostrar los resultados. Si te gusta alguno puedes comprobar la disponibilidad desde la propia página. Dot-o-mator también tiene un apartado que te sugiere nombres de empresa “curiosos”. Otros generadores de dominio en inglés famosos son: http://www.leandomainsearch.com/, http://www.nxdom.com/, http://www.namestation.com/,  o http://wordoid.com/ Espero que os sea de utilidad, si es así compartidlo y comentad 😀

Diseño Web, Gestores de contenidos, Trucos

Eliminar el foro de Novedades en Moodle

Últimamente estamos jugando mucho con Moodle y una de las dudas que más surge cuando estás creando cursos en este LMS es “cómo se quita el foro de Novedades? Si creas un curso con todas las opciones por defecto verás que se te pone al principio de cada uno un enlace que pone novedades. Si lo intentas quitar desde “Activar Edición” te deja quitarlo…pero vuelve inmediatamente. ¿Cómo se quita? La solución es “sencilla” (aunque si es una pregunta tan solicitada deberían haberlo hecho más sencillo todavía). Tienes que irte a Administración del Sitio>Cursos>Administrar cursos y categorías , edita el curso y  en la sección Apariencia pon el desplegable de Items de noticias para ver en 0. Ahora tienes que irte al curso, Activar la Edición y borrarlo. Verás como ya no vuelve.

Diseño Web, Gestores de contenidos

Plugin en WordPress para redirigir usuarios al iniciar sesión o cerrar sesión

En cuanto hayas intentado crear una web con usuarios identificados que puedan acceder a cierto contenido para ellos te habrás dado cuenta de una cosa: los usuarios al iniciar sesión no van a tu página, sino al “Escritorio” de WordPress. Esto es una lata, sobre todo si van a ser clientes o usuarios que no conoces. ¿Qué hacen en el escritorio, y cómo les explicas cómo salir de ahí? Las soluciones antes era un poco enrevesadas (tenemos algunas en el blog) y consistían en hacer unas reglas de redirección…pero a veces fallaban. Hoy os dejamos un plugin que funciona muy bien para estos cassos: Peter’s Login Redirect. Es un programa muy sencillo (y traducido), que te permite crear reglas de redirección por usuario, por rol, por capabilidades, o generales. Para cerrar sesión y para iniciar sesión, y también tras el registro. Os lo recomiendo, soluciona este problema tan incómodo de manera muy sencilla.      

Diseño Web, Gestores de contenidos

Custom Sidebars: plugin para WordPress para crear tus propias barras laterales

No se por qué pero nunca tengo las barras que quiero en las plantillas de WordPress. Siempre me falta o una barra específica o quiero una barra lateral con un contenido especial sólo para ciertas páginas. Por ejemplo una barra lateral para la página de blog y otra para la página de contacto, o para una página en concreto. Todo esto puede hacerse con Custom Sidebars.  Instalas el plugin y te permite, en widgets, crear las barras que quieras. Luego puedes especificar cuando quieres que aparezcan (lo que también se puede hacer en las entradas o en las páginas). Esas barras puedes hacer que sustituyan a barras normales en páginas concretas, puedes poner barras para entradas de una cierta categoría, para archivos o para búsquedas. Por ejemplo me suele gustar tener barras específicas para la portada o para la página de contacto con contenido específico para cada página.

Diseño Web, Gestores de contenidos

Plugins qTranslate X para webs con contenido multilingüe

Hace tiempo recomendamos qtranslate para webs con contenido en varios idiomas. El desarrollador abandonó el desarrollo del proyecto, pero siguió en un “fork”, mqtranslate. Ahora este plugin ha evolucionado a qTranslate, que no sólo tiene todas las ventajas de los anteriores, sino que incluye funcionalidades que me han hecho recomendarlo de nuevo. Ahora mismo es el plugin que recomendaría para webs con contenido multilingüe. La instalación de qTranslate X es sencilla, como cualquier plugin de WordPress. Al ser compatible con los anteriores no hay que hacer nada porque importa los datos y las configuraciones. Veréis que la interfaz cambia algo, desaparecen las pestañas de idiomas en el backend para volverse unos botones de idiomas. Por lo demás es igual, simplificando también el código (ahora se admite [es]…..[:] para líneas de idioma). Pero lo que más me ha gustado de qTranslate es su compatibilidad con otros plugins, que podéis ver aquí. En especial destaco su compatibilidad con los plugins de SEO más conocidos. Tiene un plugin para WordPress SEO by Yoast, y para All in One SEO Pack. Esta es una funcionalidad que muchos buscábamos ya que te permite algo ESENCIAL, optimizar tu SEO dependiendo del idioma. Es decir puedes cambiar el título del post, las palabras claves y el extracto dependiendo del idioma, lo que va a facilitarte el poder posicionarte mejor en diferentes idiomas.  Nosotros lo hemos probado con el primero (el plugin de Yoast) y es sencillísimo de usar. Además, tiene un plugin de sitemap especializado para poder usar estas funcionalidades anteriores mejor.  Añade a eso plugins para WooCommerce, para ACF….(y los que están por venir) y se convierte en una fantástica herramienta que además promete mucho en lo que está por venir.  

Diseño Web, Gestores de contenidos

Duplicator: mueve una web de WordPress de un hosting a otro

Duplicator es un plugin excelente para los creadores de Webs en WordPress, o para aquellas personas con web que necesiten moverla a otro proveedor. Normalmente trasladar una web de un hosting (o de local) a otro es un proceso no demasiado complicado pero manual. Traslado de ficheros, cambio de base de datos, cambio en el fichero de configuración, cambio del site URL etc. Con este plugin sin embargo es tan fácil como hacer el paquete desde la web inicial, instalar WordPress desde creo en el nuevo sitio, meter el plugin y volver a subirlo. Un gran descubrimiento jeejejjeje  

Diseño Web, Trucos

Cómo identificar móviles y tablets por CSS

Muchas veces haciendo webs tienes que poner configuraciones especiales para tablets o smartphones, o incluso para ipad, iphone o móviles diferentes. Porque quieras poner un vídeo de una resolución diferente,  o una imagen más pequeña, o deshabilitar ciertos módulos o divs para móviles o tablets que no sean realmente responsive. Os decimos como en resumen: Para ello vamos a usar el comando de CSS media, que nos permite apuntar a varias características del dispositivo (por ejemplo máxima o mínima anchura,max-device-width,aunque también se puede identificar por orientación o por resolución, min-device-pixel-ratio). Vamos a ver como ejemplo los iPad y los iPhone para entender el código. De ahí se puede extrapolar a todos los dispositivos. IPAD: Afortunádamente Apple nos ha dejado identificar los iPad (1-5 y los mini) con el mismo comando. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* aquí los estilos */} Si queremos diferenciar entre el iPad en vertical u horizontal podemos poner la siguiente línea: and (orientation : landscape) o and (orientation : portrait) antes de la parte de estilos ({/*…..*/} Esto se puede hacer en todos los apartados y modelos en este artículo. También puedes identificar modelos específicos de iPad con otros and. Más información aquí. iPhone:  El iPhone 6 se puede identificar con este código: @media only screen and (min-device-width : 375px) and (max-device-width : 667px) { /* estilos */} El iPhone 6 plus: @media only screen and (min-device-width : 414px) and (max-device-width : 736px) El iPhone 5 y 5s: @media only screen and (min-device-width : 320px) and (max-device-width : 568px) El iPhone 2G y 4G: @media only screen and (min-device-width : 320px) and (max-device-width : 480px) Al final para el resto de dispositivos puedes optimizar estas reglas. Por ejemplo yo suelo poner reglas para mmax-device-width: xxxpx  y otras para mayor. Así puedo identificar móviles, tablets etc. Al final, como quieres poder identificar un móvil, ya sabes que no va a tener mayor resolución que, en el momento actual, 700-800px. Con el tiempo este número puedes ir variándolo. Con cosas como: @media (max-width: 600px) puedes identificar sólo dispositivos pequeños tipo móviles.

Diseño Web, Gestores de contenidos, Trucos

La manera correcta de editar el CSS de tu plantilla de WordPress

Nosotros trabajamos mucho con WordPress para hacer páginas webs. Y, aunque usamos plantillas probadas y muy bien hechas, cada cliente requiere su personalización y esto implica editar, entre otras cosas, el CSS. Si tu te has puesto a trabajar con WordPress tendrás que hacerlo pronto. Eso si, hay maneras mejores que otras, y os diremos cuales hoy. 1. Editor de la WordPress. En el apartado Apariencia>Editor tienes una opción para editar tus ficheros de esctilo y también las hojas de estilo (están debajo). Eso si si el autor de la plantilla ha usado sub-hojas de estilo (unas que dependan de otras) puede que WordPress no te muestre todas. No recomiendo este método aunque sea cómodo por dos razones: a) estás modificando la plantilla, si tienes un desastre (virus etc) vas a tener la plantilla original en tu ordenador pero no las modificaciones. b) La razón más importante, si el autor decide actualizar la plantilla (mejoras, motivos de seguridad etc), y le das a actualizar pierdes todas tus modificaciones. 2. Editar los ficheros por FTP. Obviamente siempre tienes esta opción, pero tienes los inconvenientes del apartado anterior, además de ser más engorroso porque tienes que andar subiendo y bajando ficheros. Esto durante la creación de una web (donde los cambios son constantes) es una lata. 3. Usar  CSS personalizado de la plantilla o de un plugin.  Para mi una de las opciones más cómodas y mejores. Mi manera de trabajar es que pruebo los cambios de CSS en Chrome con “Inspeccionar Elemento” y luego, cuando me gustan, los voy poniendo en el apartado de CSS personalizado. Cuando he acabado el proyecto guardo un fichero con este apartado junto a la plantilla. La gran ventaja de este método es que el autor puede actualizar la plantilla o alguien sobreescribir los ficheros y no pasa nada, esto no se modifica. Además si es un plugin tu puedes, en caso de catástrofe, subir la plantilla original que te descargaste, y los cambios están ahí, porque están separados. La mayoría de las plantillas profesionales incluyen un apartado de CSS personalizado, recomiendo que lo uses. Si no la tienes puedes instalarte Jetpack, que ahora (entre otras cosas interesantes) incluye un módulo de este tipo. Si no puedes descargarte Simple Custom CSS que, como indica, es muy simple y cumple la labor perfectamente. 4. Usar “Child Themes” (temas hijos): Este es otro método muy recomendable y es hacer lo mismo que hacen los creadores de las plantillas. Aunque hablaremos del método otro día, consiste en poner una línea en tu plantilla que llame a tu hoja de estilos personificada. Así la plantilla original sigue intacta y tu puedes modificar la otro como quieras. Espero os sirva para personalizar vuestros temas de WordPress.  

Scroll al inicio