Diseño Web

Diseño Web, Gestores de contenidos

Reproductor de vídeo para WordPress

Siempre que un cliente me pide como poner un vídeo en una web le recomiendo hacerse una cuenta en Youtube, Vimeo o similar. ¿Por qué? Ahorras espacio en el servidor, estos servicios tienen ya preparado el ancho de banda y los servidores para reproducir vídeos y además disponen de reproductores compatibles con todos los sistemas. Siempre es una buena idea usar los recursos de grandes proveedores especializados, sobre todo si son gratis. Pero en ocasiones algún cliente quiere poner un vídeo en su web.  Bien porque no quiera usar un servicio externo, bien porque no quiera crear una cuenta para un sólo vídeo. ¿Cómo reproducir entonces el vídeo en una web en WordPress? Lo primero será subir el vídeo a tu servidor. Seguramente tendrás que hacerlo por FTP porque, por web, te va a cortar o tu servidor o WordPress. Los vídeos suelen exceder el tamaño máximo de subida por web. Una vez subido a un directorio te recomiendo instalar un plugin como Easy Video Player. Este plugin te permitirá insertar el vídeo con un shortcode del tipo: [evp_embed_video url=”http://example.com/wp-content/uploads/videos/myvid.mp4″] Y además te permite ponerle delimitadores para cambiar el tema, controlar el autoplay y alguna opción más (no muchas, pero las suficientes). Usa flowplayer como reproductor. Más información aquí.  

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

Principales vías de ataque a una página web con WordPress

Si tienes una página web con un número decente de accesos, seguro que habrás visto intentos de ataque o habrás tenido que resolver algún ataque. El usuario normal no es consciente pero un servidor conectado a Internet recibe ataques continuos (sólo hace falta ver los logs) y una página web, sobre todo una “popular”, también. El sistema WordPress no es que sea más vulnerable que otros, es que como es popular los “malos” lo conocen y están probando continuamente en busca de fallos. Afortunadamente se actualiza muy a menudo.Ya hemos hablado en otro artículos sobre maneras de reducir el riesgo con plugins de seguridad y analizando la web cada cierto tiempo. Hoy os hablamos sobre un interesante artículo que refleja las principales vías de acceso a este sistema WordPress. El artículo fuente es este y os recomiendo leerlo. Es un artículo de este blog sobre seguridad en WordPress que os recomiendo para lo interesados en el tema. Además, Wordfence tiene lo que llaman el Security Learning Center, donde podrás ver mucha información sobre WordPress y la seguridad. De nuevo muy recomendable. Podéis ver en el gráfico siguiente las principales vías de acceso a un WordPress, y esto nos permite sacar conclusiones. Como veis, es muy necesario: Tener los plugins, el core y el tema lo más actualizado posible. ¿Lógico no? Tener un sistema que reduzca el riesgo de ataques de fuerza bruta, un firewall en WordPress o similar. Tener el sistema (servidor) bien al día, con las contraseñas seguras en todos sus accesos (ftp, ssh etc). Tener una política lógica de contraseñas y usuarios tanto para el admin como para los usuarios registrados. Vamos que lo que llevamos diciendo tiempo los que nos dedicamos a esto no son tonterías. Eso si, es MUY normal (90% de los casos) hacerle una web a un cliente y que se olvide del mantenimiento. Se piensan que son trabajos estáticos y una vez hechos se acabó. Es un candidato perfecto para estos ataques y luego la limpieza cuesta más que el mantenimiento (por no decir la mala imagen de que Google suelte un aviso en nuestra web).  

Diseño Web, Gestores de contenidos, Prestashop

Como poner banderas en el bloque de idiomas de Prestashop

Prestashop ha incluído muchos cambios en la versión 1.6, y buenos. Pero una de las cosas que ha quitado tanto en la plantilla por defecto, como en la mayoría de las plantillas, es que el selector de idiomas tenga banderas. Hay gente que lo prefiere así, pero también hay gente que prefiere las banderas, como nos pasó el otro día con un cliente. Hoy os explicamos cómo poner dichas banderas. Tenemos que modificar el código del fichero blocklanguages.tpl del módulo blocklanguages.  Este módulo estará tanto en la plantilla como en la raíz. Preferiblemente modifica el de tu plantilla (como siempre haz una copia de seguridad antes). El truco lo hemos sacado de aquí, pero en nuestra versión había que hacer alguna modificación (puede que cuando leas el artículo tu tengas que jugar un poco con el código de tu versión también). Pongo en rojo las modificaciones del fichero que hemos introducido y en azul lo que hemos comentado para cambiar el texto por la imagen: <!– Block languages module –> {if count($languages) > 1} <div class=”btn-group compact-hidden”> <a href=”#” class=”btn-xs dropdown-toggle” data-toggle=”dropdown”> {foreach from=$languages key=k item=language name=”languages”} {if $language.iso_code == $lang_iso} <!– Flag image –> <img style=”border: solid 3px #fff; margin-right:5px;” src=”{$img_lang_dir}{$language.id_lang}.jpg” alt=”{$language.iso_code}” width=”28″ height=”22″ /><!– /Flag image –> <span class=”text-box”>{$language.name|truncate:3:”:true|regex_replace:”/\s.*$/”:””}</span> <span class=”fa fa-angle-down”></span> {/if} {/foreach} </a> <ul class=”dropdown-menu” role=”menu”> {foreach from=$languages key=k item=language name=”languages”} <li {if $language.iso_code == $lang_iso}class=”selected”{/if}> {if $language.iso_code != $lang_iso} {assign var=indice_lang value=$language.id_lang} {if isset($lang_rewrite_urls.$indice_lang)} <a href=”{$lang_rewrite_urls.$indice_lang|escape:’html’:’UTF-8′}” title=”{$language.name}”><!– Flag image –><img src=”{$img_lang_dir}{$language.id_lang}.jpg” alt=”{$language.iso_code}” width=”15″ height=”12″ /><!– /Flag image–><!–{$language.name|regex_replace:”/\s.*$/”:””}–></a> {else} <a href=”{$link->getLanguageLink($language.id_lang)|escape:’html’:’UTF-8′}” title=”{$language.name}”><!– Flag image –><img src=”{$img_lang_dir}{$language.id_lang}.jpg” alt=”{$language.iso_code}” width=”22″ height=”15″ /><!– /Flag image–><!–{$language.name|regex_replace:”/\s.*$/”:””}–></a> {/if} {/if} {if $language.iso_code == $lang_iso} <!– <a href=”#” title=”{$language.name}”>{$language.name|regex_replace:”/\s.*$/”:””}</a> –> {/if} </li> {/foreach} </ul> </div> {/if} <!– /Block languages module –>  

Diseño Web, Gestores de contenidos

Ultimate member. Un plugin excelente para contenido registrado en wordpress

Obviamente tras varios años trabajando con WordPress, ya hemos probado muchos plugins de contenido restringido para usuarios en este sistema. Pero el otro día probé uno nuevo, Ultimate Member…y me sorprendió muy gratamente. Ultimate Member es un plugin gratuito que te permite implementar todo lo que necesites en una web que requiera que se registren usuarios, se aprueben esas solicitudes, y exista contenido sólo para usuarios registrados. Pero además es MUY sencillo de usar. Al instalarlo te crea unas páginas para el registro, el login, las páginas de usuario, el perfil etc. Esas páginas luego puede cambiarse o puedes coger el código que aparece en ellas (muy sencillo) y ponerlo en otras. El plugin, tras la instalación, detecta que tu idioma es español y te permite bajar la traducción (buena salvo traducciones como “membresía”). Después es realmente sencillo configurar formularios con los parámetros que necesites, desactivar opciones de menú para usuarios no registrados, definir roles de usuario, cambiar la apariencia o definir múltiples notificaciones automáticas. Además, también le puedes añadir extensiones adicionales tanto premium como de pago. Y tenemos algunos módulos adicionales.  

Diseño Web, Gestores de contenidos, Trucos

Hacer las estadísticas de Jetpack accesibles a otros roles de usuario

En uno de nuestros clientes el administrador quería que las estadísticas las pudiera ver también otro usuario nuevo. Pero este usuario nuevo tenía sólo rol de Editor, no de administrador. ¿Pueden ver los editores las estadísticas de Jetpack también en su escritorio de WordPress? La respuesta es que si. Puedes elegir fácilmente el rol de WordPress que puede ver las estadísticas. Por defecto sólo son los admin, pero si quieres cambiarlo ve a Jetpack>Estadísticas del sitio>Configurar. Al final de esa pantalla podréis elegir los roles.  

Diseño Web, Gestores de contenidos

Use any font. Añade cualquier tipo de fuente a tu página en WordPress

Muchas veces un cliente nos pide “quiero el texto en la fuente XXX”. Fuente que tiene instalada en su ordenador pero no entiende que no está en el ordenador de los que ven la web. Durante un tiempo, la cosa se hizo más fácil con Google Fonts, porque podíamos acercarnos bastante (si tienes la paciencia de mirar en todo el repositorio). Luego podías insertar la imagen subiéndola a tu tema o a un directorio de tu web y poniendo el código por css. Esto último es lo que hace automáticamente por ti Use Any Font. Un plugin que te permite subir la fuente que quieras y usarla en tu web. Así tu puedes tener contento al cliente, o a tí mismo, de manera muy sencilla. Necesitas un API key, si es para una fuente es gratis, para más te pide una donación (pero merece la pena si vas a usar muchas). Nota: recordad que el uso de fuente ralentiza la carga y eso afecta al SEO (a veces es necesario por exigencias del cliente). Os dejamos un vídeo explicando esto:

Diseño Web, Gestores de contenidos

Plugins para ver las estadísticas de visitas en WordPress

Cuando un cliente quiere ver las estadísticas de visitas en una página de WordPress, nosotros siempre le damos la opción de Analytics. Pero también la de poner un plugin en su web para poder ver las visitas rápidamente. Porque Analytics es un gran sistema para poder realizar análisis personalizados, pero no vas a acceder diariamente. En cambio a tu web normalmente si, y es bueno poder ver una gráfica con los accesos. Jetpack dispone de esta funcionalidad, pero claro tienes que conectarlo con WordPress.com y puede que no quieras. Así que os dejo dos buenas opciones: WP-Slimstat: Uno de los más famosos y con más evolución. Más de 100.000 descargas y una puntuación de 4,8-5 le avalan. Tiene tanto un panel de control, como widgets aplicaciones en el escritorio de WordPress que te dan muchísima información (accesos diarios, páginas vistas, origen, búsquedas). En la configuración además puedes pedir que no cuente robots y muchas otras opciones. NewStatPress: Otro plugin para estadísticas de visitas con todo lo que necesita el usuario (widgets, diferentes estadísticas etc).

Correo, Diseño Web, Gestores de contenidos

Otro plugin de WordPress para mandar Newsletter.

No recomendamos mandar Newsletter desde tu web. Si algo va mal y te añaden como spam el dominio, te afecta al SEO de tu página, que se supone es tu tarjeta de visita. Lo lógico es hacerlo con unos servicios de Newsletter (como MailChimp) externos y que complementen a la web, no la perjudiquen. Dicho esto, algunas Pymes no tienen más opción por costes, o algunas web quieren poder mandar Newsletter a los suscriptores de su web sobre publicaciones o eventos. En estos casos existen plugins muy útiles para WordPress. Hace tiempo os hablamos de Mailpoet, una gran solución. Hoy os recomendamos Newsletter, otro de los más conocidos. Con una puntuación de 4.8 sobre 5 en WordPress, permite muchas funcionalidades: integración con el registro de WordPress, suscriptores ilimitados, emails ilimitados con seguimiento, widgets configurables, plantillas, cumplimiento con las normativas europeas permitiendo abandonar las listas o agregarse a ellas….Todo gestionable desde el panel. Muy potente y recomendable (si no te gusta Mailpoet) para los que quieran realizar campañas de marketing desde la web. Más información aquí.    

Diseño Web, Gráficos y Fotografía

Editar gráficos svg gratis en Windows. Inkscape

Hoy os queremos hablar de programas gratuitos para editar gráficos vectoriales en formato svg y, cuando hablamos de eso, Inkscape tiene que nombrarse sí o sí.Este es otro de esos programas que uno no sabe cómo no estaba en el blog. Es un clásico. Es el editor de gráficos vectoriales gratuitos más sólido y antiguo del mercado.  Sin duda si quieres empezar a manejar este tipo de archivos y no quieres pagar, o si tienes que hacer una modificación pero no vas a usarlos más, este es el que tienes que probar primero. Tienes muchos cursos en español en youtube que te pueden ayudar a empezar. Si por alguna razón no quieres usar Inkscape, puedes usar Libre Office Draw u Open Office Draw. Ambos programas editan este tipo de ficheros (aunque claro, con muchas menos opciones). También existe un proyecto en github, SVG-Edit , que consiste en un editor web de svg. Puedes probarlo aquí.  

Diseño Web, Gestores de contenidos, Trucos

Button generator

Tenemos ya varios artículos en el blog sobre generadores automáticos de código tanto Html como CSS. Para bordes redondeados, para vídeos incrustados que sean responsive , para degradados por CSS, y muchos más. Nosotros los usamos mucho, porque facilitan el hacer páginas web y no tienes que andar creando código de nuevo o probando cosas. Hoy, para los que como nosotros hacéis páginas web, os dejamos unos generadores de botones. Crean rápidamente el código html y Css para botones personalizados. Puedes cambiar el fondo, la forma, los efectos, la letra….muchísimo. Sencillo pero útil. http://www.bestcssbuttongenerator.com/ http://www.cssbuttongenerator.com/    

Scroll al inicio