18jun
transposh-traducir-sin-comas

Como traducir sin comas ni puntuaciones en plugin Transposh

Seguramente muchos de vosotros ya conocéis el fantástico y maravilloso plugin de traducción Transposh, una herramienta que nos ha hecho la vida mucho más fácil. Para los que no habéis oído hablar de este plugin, os explico un poco qué lo hace tan maravilloso:

  • Permite dar permisos de traducción a aquellos los roles de tu wordpress que desees.
  • Hay un montón de idiomas para traducir.
  • Tú eliges qué tecnología utilizar: manual, Google o Bing.
  • Puedes modificar el widget de una forma muy fácil.
  • Puedes integrarlo fuera de widget, en PHP, en cualquier rincón de tu web.
  • La configuración de visualización es fácil y ofrece muchas opciones de diseño.
  • Y lo mejor: puedes traducir des de la misma página, sin necesidad de entrar en el backend.

Pero no todo son rosas y mariposas en el mundo de Transposh. Si lo utilizas, descubrirás que al traducir de forma manual te encuentras con un problema técnico: solamente se pueden traducir las oraciones hasta encontrarte cualquier signo de puntuación: puntos, comas, interrogantes. De entrada esto no es un problema, pero si queremos cambiar la estructura completa de una frase, entonces sí tenemos un conflicto.

En fin, si estás leyendo este post, supongo que ya sabrás cual es el problema… ahora voy a darte la solución.

transposh-traducir-sin-comas2

CÓMO SALTARSE LOS SIGNOS DE PUNTUACIÓN EN LAS TRADUCCIONES DE TRANSPOSH

Para traducir sin comas ni puntuaciones en plugin Transposh tienes que seguir estos pasos:

1 - Localiza el archivo Parser.php que se encuentra en Plugins > transposh > core > parser.php

2 - Localiza la frase:

function is_sentence_breaker($char, $nextchar, $nextnextchar) {
 if (($char == '.' || $char == '-') && ($this->is_white_space($nextchar)))
 return 1;
 //,
 if (ord($char) == 239 && ord($nextchar) == 188 && ord($nextnextchar) == 140)
 return 3;
 //∙
 if (ord($char) == 226 && ord($nextchar) == 136 && ord($nextnextchar) == 153)
 return 3;
 //·
 if (ord($char) == 194 && ord($nextchar) == 183) return 2;
 return (strpos('?()[]{}"!:|;' . TP_GTXT_BRK . TP_GTXT_BRK_CLOSER . TP_GTXT_IBRK . TP_GTXT_IBRK_CLOSER, $char) !== false) ? 1 : 0; // TODO: might need to add < and > here
 }

3 - En la última frase, borra los siguientes símbolos: ? () [] {} ” ! : | ;

4 - Vuelve a subir el archivo php en su directorio, y ya podrás traducir por bloques separados por puntos.

Y ya lo tienes!

Esto te permitirá traducir contenido de una forma más coherente, si tienes una web con bastante texto. Aún así, los chicos de Transposh aseguran que en una próxima versión este problema estará solucionado, pero que aún falta mucho para esta nueva versión.

Hasta otra!

29mar
cervesa la mola

Renovación de la web de Cervesa La Mola

Soy de los que, si no tengo ninguna web por hacer, me aburro profundamente. Así que, cuando eso ocurre, me dedico a renovar webs que he hecho, jeje! Este es el caso de la web de Cervesa La Mola, a la que le pegué un lavado de cara espectacular en cuestión de unas 6 o 7 horas de faena.

Estoy muy contento con el resultado porque la web ahora es más moderna, más fácil de nagevar y, sobretodo, responsive totalmente. Además incorpora elementos dinámicos que hacen aumentar la calidad el portal a mi parecer: el maravilloso Revolution Slider (algun día os tengo que hablar de este plugin) y un portfolio con filtros dinámicos que se han utilizado para la lista de puntos de venta.

web cervesa la mola

La web, ahora más que nunca, está preparada para que sea de muy muy fácil modificación: todas las páginas y posts están construidos con el Visual Composer, ya os hablé de esta fantástica herramienta en otro post. El apartado de la web ‘On Comprar‘ está preparado para que Víctor, propietario y cervecero de Cervesa La Mola, pueda crear, modificar o borrar puntos de venta de forma fácil, rápida y autosuficiente.

La nueva versión de la web incorpora también una plataforma de venta online mejorada para que, en caso de que algún día se desee, pueda abrirse la tienda electrónica rápidamente y empezar a vender cerveza a todo el mundo! De momento, eso sí, permanece cerrada. Para adquirir algun producto hay que hacerlo con el formulario de contacto, de momento.

El principal potencial de esta web es el blog. Lleva ya mucho tiempo abierto. Me acuerdo de el principio de Cervesa La Mola, cuando ni siquiera había fábrica y mi amigo Victor hacía las cervezas en su casa. Para entonces decidimos apostar por el marketing de contenidos y abrir un blog que fuera interesante realmente y que aportara información útil a los aficionados a la cerveza que hacen sus producciones particulares en sus casas. El método funcionó. Para entonces la web era un blogger bastante feo pero eso ayudó a posicionar el portal rápidamente. Cuando la cosa se puso seria ya nos lanzamos al wordpress, pero manteniendo todo el contenido intacto y las slugs iguales para afectar lo menos posible al posicionamiento.

En resumen, para esta renovación de la web vuelve a coger importancia el blog. Con un cambio de estética más fresco y agradable de leer. Incorporando también los comentarios via Facebook, lo cual proporcionan cierto grado de viralidad interesante .

Si vas a utilizar los comentarios de Facebook para tu blog en wordpress ten en cuenta que es posible que se cargue los anteriores comentarios. No definitivamente, puesto que al quitar el plugin los anteriores comentarios se recuperan, pero sí debes pensar si te compensa la viralidad que te ofrece esta opción.

blog cervesa la mola
cervesa la mola
11feb
koenso

Koenso: catálogo con portfolio dinámico

Buenas!

Estoy muy contento de poder publicar ya lo que ha sido mi último proyecto: se trata de la web de Koenso, un take away de sushi en el centro de Barcelona. Cuando me propusieron el proyecto me entusiasmó la idea, puesto que me encanta el sushi y siempre había querido hacer una web de esto, pues me parece una comida muy atractiva visualmente!

Para esta web conté con la ayuda de mi amiga Mariona, una muy buena fotógrafa que hizo todas las fotos necesarias para la web: local, comida y otras. Para ello nos presentamos en Koenso con un mini estudio portátil de fotos y allí mismo, in situ, fuimos fotografiando las piezas de sushi… se me hacía la boca agua!!

Bueno, al lío. Una cosa que me interesaba hacer en este proyecto es presentar la carta en forma de portfolio, en vez de crear una página estática con todas las fotos y textos pertinentes.

VENTAJAS DEL PORTFOLIO

  • Mucho más cómodo de subir o actualizar información o productos.
  • Te permite asignar un estilo igual a todos los elementos del portfolio (en una página estática mover un elemento significa rediseñar toda la página!).
  • Puedes ocultar elementos individualmente (en una página estática deberías borrarlo).
  • Puedes categorizar todos los elementos.
  • Puedes agregar diferentes campos de texto: descripción, título, etc.
  • Te permite llamar elementos desde cualquier página de la web (también filtrando por categorías).
  • Mucho mejor organizado en el backend.
  • Más preparado para una web responsive.

Y un poco por encima estas son las ventajas. En definitiva, me apetecía hacer algo así. Sobretodo para otorgar al cliente la seguridad de que podrían añadir, cambiar, modificar o ocultar elementos de la carta de una forma fácil y rápida (lo podrían hacer desde su móvil en un momento dado).

Esta es una captura de la carta de Koenso:

Koenso Sushi

Bueno, esto es sólo una pequeña captura de pantalla. La carta completa la tienes aquí y tiene más de 70 productos! Además, lo bonito de este portfolio es que es dinámico: puedes filtrar los elementos de la carta y estos aparecen o desaparecen de forma animada. Es divertido! Y la verdad, cualquiera que ve esa carta se queda un buen rato jugando con ella hehe!

Bueno y eso es todo. Para mi el portfolio era el elemento principal de esta web. Aún así debo decir que es la mejor que he hecho nunca, sobretodo por la calidad de las fotografías. Os dejo aquí con algunas de ellas para que salivéis un poco con tan rico manjar :P

Hasta otra!

Fotos de Mariona Martínez

10ene
RGINGENI

Rediseño de una web de Moda

Hola!

Hace poco me encargaron renovar la web de RG Ingeni, una empresa de confección de moda de Terrassa que lleva ya bastantes años en el sector. Su presencia online era peor que nula: tenían una web anticuada y sin ningún valor informativo ni de calidad. Tampoco reflejaba su imagen corporativa ni estilo de ropa que allí cosen y diseñan.

La verdad, parecía una web de esas hechas “porque hay que estar en internet”, sólo por estar. La web tenía dos elementos particularmente odiosos y que nunca he soportado: un contador de visitas y música de fondo. SOCORRITO! Ah, y un fondo marino muy adecuado para una tienda de ropa situada en una ciudad sin mar (WTF?). Os enseño un par de capturas de cómo era la web:

Con todo esto sobre la mesa ya se podía empezar a plantear el cambio de imagen. El cliente me pidió varias cosas importantes:

  • La web tenía que ser un catálogo fácil de actualizar, ya que lanzan dos campañas al año.
  • El catálogo tenía que estar preparado para que si, en un momento dado quisieran vender, pudieran abrir un ecommerce de forma fácil y rápida.
  • La web tenía que ser una copia de la web de Dolce & Gabbana.

Esto último es interesante, ya que nunca me habían pedido una copia!

Vamos a analizar la web de Dolce & Gabbana:

  • La web de de entrada no muestra el catálogo sino portadas de colecciones.
  • Está montada en negro y tiene algo que me gustó: el fondo es un degradado de negro a gris.
  • Logo centrado y menú por debajo centrado también.
  • Una barra superior de color gris con la navegación corporativa.
  • Las imágenes se oscurecen al pasar por encima.

Y eso es todo. Es muy sencilla, puesto que la calidad radica en la calidad de las fotos, cosa que comuniqué al cliente: sin unas buenas fotos, la copia no daría resultado. En fin, eso ya no es cosa mia!

rg ingeni 6

Vamos al lío.

Al final lo que se ha entregado es una web muy simple, que cumple con todas las peticiones del cliente. Además, como soy un maniático del responsive, está toda la web adaptada a móbiles y tabletas, así como adaptada a cualquier tamaño de pantalla posible. Básico.

La web tiene también preparados bastantes tipos de presentación de productos: en forma de catálogo, en forma de slide y también imitando el formato Pinterest (sí, soy un friki de esa red social).

Para el tema de la posible tienda online, básicamente se soluciona con el WooCoomerce en modo Catálogo. Es decir, oculta precios y la opción de compra. Pero si un buen día quieren abrir la tienda, solo con darle a un botón ya podrán vender… :)

De momento lo que tienen es un formulario en cada producto, por si algún interesado quisiera sber algo más del producto o adquirirlo de alguna forma… al fin y al cabo es la web de un negocio!

Y eso es todo. Apa, hasta otra!

21dic
cemu web responsive

Diseño web responsive: cambio de imagen de CEMU

Diseñar webs sin pensar en la programación es muy divertido: te permite concentrarte mucho más en la usabilidad y experencia del usuario/lector. Sólo lo pude hacer para Loikos en su día, pero ahora he tenido otra ocasión de hacerlo.

En este caso CEMU me encargó un rediseño de su página web, de arriba a abajo. Es una web corporativa de una clínica médica, pero incluye también una parte didáctica con muchísimo contenido de calidad organizado en temas y palabras clave. Simplificar eso fue un reto interesante y, la verdad, estoy muy satisfecho con el resultado.

Esta es la web de CEMU anterior:

Lo primero que se observa son muchas zonas de menús y muchos botones, así como texto en diferentes tamaños y colores. Esto marea un poquito. Además, si te fijas en la segunda imagen, en algunas páginas conviven hasta 3 scrolls juntos! Un poco caótico. El contenido de la web, que es de muy buena calidad, se veía eclipsado por el diseño.

Objetivo: hacer un diseño responsive y cómodo en el que el protagonismo fuera para el texto. Este es el resultado:

El resultado es una web muy agradable de ver, que genera confianza y que invita a leer el contenido. No sólo eso, sino que la organización de contenido hace que la web sea más intuitiva y permite al usuario encontrar aquello que busca.

Diseño Web Responsive

Seguro que ya lo sabes, pero por si esto te suena a chino básicamente tienes que saber que a la hora de diseñar una página web hay que tener en cuenta el tamaño de las pantallas que van a visualizarla. Esto significa pensar en un diseño que se adapte a ordenadores de sobremesa, portátiles, tabletas de diferentes tamaños y móbiles, también con varios tamaños.

Es cierto que hacer una web adaptada a todos los tamaños puede ser una locura, así que puedes guiarte por los tamaños de referéncia ampliamente aceptados. Son estos:

  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1200px

Hacer una web con un diseño responsive puede darte muchas ventajas. Y es que no sólo generas una calidad de experiencia excelente para el lector (cosa que crea mejor notoriedad de marca a mi parecer), sino que resulta que Google indexa mejor las páginas con un diseño adaptable. Mola, no?

Bueno, este es el resultado del nuevo diseño de la web de CEMU con diferentes adaptaciones. Los cambios principales entre pantallas son que el texto se adapta para que sea siempre fácil de leer y que el menú se adapta también para que sea siempre muy navegable:

cemu responsive

Como te digo me ha gustado mucho, sobretodo por el hecho de la convivencia entre web corporativa clásica y web de contenido de calidad.

En fin, hasta otra!

© Copyright 2014, Todos los derechos reservados