Diseño 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/    

Diseño Web, Gestores de contenidos, Seguridad

Dos plugin para limpiar tu WordPress en caso de infección

WordPress es uno de los programas más atacados en la actualidad. Obviamente porque un gran porcentaje de las páginas web están hechas con WordPress. Así que si tienes una web con este gestor, y tienes cierta relevancia, es muy posible que en algún momento te hayan atacado y conseguido infectar. Sueles enterarte porque el proveedor ha bloqueado o el correo (porque envías spam) o la web,  o por avisos de Google. Para poder volver a tu estado normal, tienes que limpiar la amenaza…¿pero cómo hacerlo? Os dejamos dos plugins que te pueden ayudar: Exploit Scanner: un plugin que analiza los ficheros, a base de datos y los plugins de tu WordPress para detectar elementos sospechosos. No limpia nada, sólo suelta un listado de lo que detecta peligroso y es el usuario el que tiene que tomar las medidas. Hay usuarios que encuentran problemático porque proporciona un listado grande de ficheros o de errores y con falsos positivos. Pero en caso de no saber dónde puede estar la infección, es útil para hacer un barrido y encontrar todos los resquicios del malware. Anti-Malware Security and Brute-Force Firewall: Un plugin que analiza tu WordPress para encontrar fallos de seguridad, agujeros, scripts desactualizados etc etc. Es decir sitios por donde puede haber entrado la infección. En este caso no sólo los encuentra, sino que además te permite solucionarlos. Así que es un plugin estupendo a tener en cuenta para los que les preocupe la seguridad de su web.

Diseño Web, Trabajos, Webs

Nueva web: persona.com.es Una web con efectos dinámicos y animaciones html5

Os presentamos otra nueva web, la de Persona, una consultora de management de recursos humanos. Esta web en un principio iba a ser como la de Ars Outplacement, porque pertenecen al mismo grupo, pero una vez empezado el proyecto nos pidieron opciones más dinámicas y animaciones en html5. Nos gustó el reto y nos pusimos manos a la obra. La web tiene mucho contenido dinámico diferente, desde sliders de fotos que cambian a los pocos segundos, regiones de Parallax que aparecen según haces scroll, frases que destacan con efectos de zoom, e incluso unas animaciones de frases en una sección de Sobre Nosotros (pasad el ratón encima del Gominolo azul y naranja). Todo el contenido está en inglés y español, incluido las animaciones, y la web tiene un diseño para pantallas de un cierto tamaño (PCs y tablets) y otro diseño para pantallas y dispositivos más pequeños donde las animaciones consumen demasiados recursos y ralentizarían la experiencia del usuario. ¡Esperemos que os guste!

Scroll al inicio