Diseño Web

Diseño Web, Trucos

Poner un fondo fijo en los vídeos de html5 con CSS

El otro día en un cliente tuvimos que desactivar la pre-carga de los vídeos html5 (podéis ver cómo aquí). Esto tiene una ventaja….la web carga mejor. Pero una desventaja también, no aparece la imagen de presentación del vídeo. En nuestro caso decidimos poner el mismo para todos, así que pusimos un fondo a la etiqueta video de html5. También es buena solución para encajar ese fondo en todos los dispositivos. Tenemos que poner en el CSS correspondiente: video { width:300px; height:150px; background:transparent url(‘urldelficheroimangen’) no-repeat 0 0; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; } Aquí evidentemente tenemos que cambiar el ancho y alto por los que queramos para nuestros vídeos y la url del background por la de nuestra imagen. También modificar el resto de parámetros según convenga. Y ya está 😀  

Diseño Web, Gestores de contenidos, Trucos

Desactivar el botón derecho en páginas web por Javascript

En ciertas ocasiones puede interesarte que los visitantes que acudan a tu página web no puedan acceder al menú contextual que se activa con el botón derecho. El menú que te permite descargar imágenes, vídeos, ver el código fuente o inspeccionar elementos de la página. Nota: No es un método efectivo para evitar descargas. Hay mil maneras de evitarlo o descargarlas de otro modo. Es casi imposible evitar las descargas porque la gente puede hacer pantallazos de secciones, grabar el contenido que sale en la pantalla etc. Además, el mero hecho de verlo en el navegador ya está descargando contenido. Eso si, podemos hacerlo más difícil para el mayor número de gente posible. En unos días os diremos más trucos. Hoy explicamos cómo evitar ese menú con Javascript. Para ello tenéis que poner este código: <script> window.oncontextmenu = function() { return false; } </script> Dónde ponerlo depende de tu web. Ciertos gestores como WordPress o Prestashop permiten poner Javascript en plugins on en ciertas partes de los mismos. O puedes ponerlo en una parte que se cargue en todo el gestor como el fichero header.php (WordPress). Gestores como Moodel tienen apartados para poner código en ciertas secciones también. Y mucha plantillas de pago para todos esos gestores tiene un apartado para CSS personalizado y otro para Javascript personalizado. Porque ambas cosas son muy útiles para modificar las plantillas y hacer que se comporten como requieres. Este código funciona para la mayoría de los navegadores (algunos permiten el botón derecho en pantalla completa incluso con este código). Eso si…si el navegador tiene Javascript desactivado…no funcionará.

Diseño Web, Gestores de contenidos, Webs

Shortcodes Ultimate: plugin para WordPress con muchas opciones

Shortcodes Ultimate es un plugin para WordPress es un plugin muy interesante para todos los desarrolladores de WordPress. Lo que hace es permitirte, a través de códigos o por un menú en el editor, disponer fácilmente de elementos como botones, acordeones, columnas y mucho más. Y todo adaptable a diferentes dispositivos (responsive). Dentro de cada elemento te deja cambiar colores, tamaños e infinidad de elementos. En resumen te permite acceder a la mayoría de los elementos que puedes querer desarrollando una web, de manera rápida y sencilla. Esto te quita mucho tiempo y permite que te centres más en el diseño y menos en desarrollar esos elementos. Podéis ver la puntuación del plugin en las descargas de WordPress. Impresionante, pocos plugins tienen tanta puntuación positiva y tan poca negativa. Es más….se puede ampliar este plugin con otros pagando para desarrollar tus códigos, elementos etc.

Diseño Web, Gestores de contenidos

Plugin Icon List para Wordress

Un pequeños consejo para aquellos que hacen páginas web. Este plugin parece un poco chorra pero estos pequeños detalles son los que hacen que las web queden bien. Icon List es un plugin que te permite usar un montón de iconos de Font Awesome. Algo que nosotros usamos mucho por ejemplo para las páginas de contacto y los pies de contacto. De una manera sencilla puedes poner un texto con los iconos de Twitter, teléfono, Google Maps, email etc etc. Sin necesidad de añadir una imagen y tener que cuadrarla. En los pequeños detalles está la perfección.

Diseño Web, Gestores de contenidos, Seguridad, Trucos

reCaptcha de Google. Captchas gratuitos que puedes usar

Los que usamos, tenemos o creamos páginas web tenemos que aprender rápido lo que son los Captcha.  Pequeñas pruebas o tests que se ponen en formularios (principalmente) para distinguir si quien lo envía es una persona o un robot (spam). Nota: Para el que no lo sepa Captcha son las siglas de Completely Automated Public Turing test to tell Computers and Humans Apart. Es decir, test de Turing automatizado. Como todo los Captcha han ido evolucionando, y Google ha sacado un servicio llamado reCaptcha. Lo que nos interesa no sólo es que sea bueno…es que además es gratis. Como dice es fácil de implementar para el desarrollador, fácil de usar para el cliente de la web y se va renovando y mejorando. Manera de implementarlo: WordPress: Podéis usar plugins como este. Prestashop: Aquí tenéis cómo hacerlo por código. Y también tenéis módulos de pago. Para el resto de Webs Google te deja un manual sobre cómo usarlo (es muy sencillo, generar la API, poner por código el widget y comprobarlo).

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.      

Scroll al inicio