Diseño Web

Diseño Web, Gestores de contenidos

ContentBox: módulo html de Prestashop para todas las versiones y posiciones

Ya os he comentado a veces que el blog lo usamos nosotros mismos para trabajar, además de para recomendar a clientes y colaboradores. Los productos, trucos y módulos que encontramos y usamos los guardamos en el blog para referencias futuras. Este es uno de esos casos en los que exponemos un módulo que usamos bastante en nuestras tiendas de Prestashop. El módulo es un módulo para html (te permite poner lo que quieras en html desde imágenes hasta código), que funciona en todas las versiones de Prestashop (1.4, 1.5 y 1.6) y se puede poner de manera sencilla en cualquier posición. ContentBox: http://contentbox.org/ La verdad es que módulos como este, fácilmente gestionables y modificables, junto a la facilidad de uso del 1.6 hacen que Prestashop haya dado un vuelco enorme hacia la facilidad de uso y adaptabilidad. Muy fácil de usar, descárgalo, instálalo desde tu PC y activalo. Después te permite ponerlo en posiciones en el hook o hooks que quieras. Una vez colocado puedes ir a módulos y configurarlo. Desde ahí si quieres añadir imágenes las puedes subir y referenciarlas en el html, o puedes poner cualquier tipo de código html. Por cierto que tienen un botón Generate your module, para crear tu propio módulo con otro nombre y así tener varios diferentes en posiciones distintas. Excelente. Muy bien hecho el módulo por los desarrolladores, y muy recomendable si usáis Prestashop.

Diseño Web, Webs

Make Pixel Art: dibuja con pixeles

Para un cliente que tenemos ahora tenemos que hacer algo de trabajo gráfico “pixelado” estilo retro.  Para ello estamos usando una página web que ha usado alguno del equipo a veces para hacer sprites o incluso gráficos para juegos sencillos: http://makepixelart.com/free/ No es nada complicado, es como un paint con pixeles desde el que puedes (dependiendo del nivel artístico de cada uno) dibujar tus gráficos pixelados. Podéis ver algún ejemplo en  http://makepixelart.com/, aquí , aquí o aquí. También tenéis una aplicación para dispositivos Mac o como extensión para Chrome.  

Diseño Web, Webs

Browserstack: compatibilidad de una web entre muchos navegadores

Una de las cosas que más importan a los diseñadores, y a los que crean una página web, es la compatibilidad entre varios navegadores. A ver, es imposible que quede igual en todos, porque cada uno va a su aire, y además lo que puede quedar bien hoy puede que no quede bien en la siguiente versiones. Pero cuando más homogéneo mejor. Para poder comprobar esto os dejo http://www.browserstack.com/screenshots. Una web donde podrás probar tu página en varias versiones de varios navegadores e incluso entre varios sistemas operativos. De hecho tiene también opción para ver en iOS y Android con varias versiones de móviles. También puedes crear una prueba interna de servidores no conectados a Internet. La web genera unos pantallazos con los navegadores elegidos. Estos pantallazos los puedes bajar en zip para entregar al cliente. También tenéis un apartado, ambos en modo trial, donde ver cómo se ve en diferentes pantallas de móvil para poder probar si la plantilla es responsive o no. http://www.browserstack.com/responsive  

Diseño Web, Prestashop

Módulo para CSS personalizado en Prestashop 1.5 y 1.6

Prestashop es un gestor para tiendas online EXCELENTE, más aún la versión 1.6 que han mejorado mucho. Pero si quieres cambiar algo de las hojas de estilo para personalizar tu tienda tienes que hacerlo directamente en los ficheros tanto de los módulos como de la plantilla. Esto, además de ser más complicado para el usuario medio, tiene el problema que si actualizas los módulos o la plantilla los cambios se pueden deshacer al sobreescribirse los ficheros. Por eso la manera más lógica es que Prestashop tuviera la opción de CSS personalizado….pero todavía no lo tiene. Así que este módulo viene estupendo. Compatible con la 1.5 y la 1.6, sólo tienes que descargarlo, instalarlo, activarlo y en la configuración poner el CSS que quieres personalizar. Obviamente esto requiere algo de conocimiento para saber cual es, pero supongo que lo sabes. A mi me ha funcionado de maravilla. Puedes descargarlo aquí: https://dh42.com/blog/free-prestashop-css-module/

Diseño Web, Gestores de contenidos

WP Mail SMTP: plugin para mandar correos por SMTP en WordPress

Hace unos días tuvimos un problema con un cliente. De repente su página de WordPress dejó de enviar notificaciones, correos etc. Por lo tanto cosas como el formulario de contacto o los recordatorios de contraseña no funcionaban. Todo indicaba a un problema del servidor, porque antes funcionaba, pero podía ser desde eso hasta el proveedor de correo o incluso listas negras. Para poder solucionarlo lo antes posible e identificar mejor el error, optamos por cambiar el modo en que WordPress enviaba los correos. Normalmente WordPress usa una variante del mail() de php llamada wp_mail(). Con este plugin WP Mail SMTP, lo que conseguimos es cambiar este modo de enviar correos para que use o la original de php, el mail() o, para mi más interesantes, poder configurar smtp como un cliente de correo. Tras poner este plugin puedes configurarlo y poner tus datos del cliente de correo como configurarías tu Outlook para SMTP. Te deja hasta poner SSL.

Diseño Web, Trucos, Webs

Unfuck my html : para formatear html

Esta herramienta es para aquellos que hagáis páginas web o trabajéis con html. En ocasiones os habrá pasado que al poner el código en una herramienta, a nosotros nos pasa a veces en WordPress con el editor de código, se te descoloca todo. Se pone todo como una sólo línea y es un follón, no se puede ver nada (además que en ocasiones algún navegador no lo lee bien). Para arreglar estos casos tenemos páginas como http://unfuckmyhtml.com/  (me encanta el nombre jejejeje). Ponéis el código, le dáis a Unfuck it, y ya lo tenéis formateado. Comprobadlo porque a veces mete alguna etiqueta de idioma inglés etc. Listo para copiar y pegar a tu programa o gestor.   Por si no os gusta os dejo otro que funciona parecido: http://www.freeformatter.com/html-formatter.html  

Diseño Web, Webs

Tridiv: editor online para hacer objetos 3D en CSS

Hace tiempo que se lleva usando el CSS con HTML5 para crear efectos web, desde que se decidió prescindir del flash. Y se han ido desarrollando herramientas como la que comentamos el otro día de Google para diseñar las páginas con ellas. Pero hay que reconocer que el creador de Tridiv SE HA SALIDO (con perdón por la expresión). Ha proporcionado una herramienta para crear objetos en 3D y producir el código CSS. Y gratis. Impresionante. http://tridiv.com/ ¿Y qué se puede hacer? Pues mirad este ejemplo: Podéis rotarlo si queréis 😀 Aquí os dejo un vídeo sobre el uso de Google Web Designer y Tridiv. Creo que queda mucho por jugar en estos días jejejjee

Diseño Web, Linux, Mac

Google Web Designer: animaciones en HTML5

Otra gran herramienta que nos deja Google tanto para Windows como para Mac y Linux (gracias): Google Web Designer. Hace tiempo que existe HTML5 y se pueden hacer muchas cosas con el del tipo animaciones. Han salido muchas herramientas pero la mayoría de pago (hasta las que empezaron de manera gratuita). Google nos deja esta herramienta, en fase Beta, para poder realizarlas de manera visual y sencilla. La herramienta es bastante intuitiva y rápida de usar. Tiene varias herramientas que nos permite crear diversos objetos, aunque muchas veces es mejor crearlos con herramientas externas más potentes e importarlas en nuestro proyecto. Podemos crear efectos en 2D o 3D y en los menus podemos seleccionar el tipo de documento u objeto que queremos crear. Nos permite manejar documentos html, css o javascript. De manera rápida podemos ver el modo editor visual, el modo código o el modo vista previa, al estilo de herramientas tipo Dreamweaver. También con un timeline al estilo de las antiguas animaciones flash. Como ejemplos aquí os dejo un vídeo sobre cómo crear una galería de manera rápida: Cómo crear una animación sencilla: Aquí, y en youtube, podéis ver algún tutorial más.  

Diseño Web, Webs

Installatron: instala aplicaciones web fácilmente

Un descubrimiento extraño el que hemos hecho esta semana, de hecho parece que lo usan muchos proveedores de hosting para instalar estas funciones fácilmente. Installatron viene en 3 modos: como un plugin para los principales paneles de gestión (cPanel, DirectAdmin, Plesk). Esto te permite instalar las aplicaciones web gestionándolo ya desde tu hosting. También viene como servidor para poder aplicar en tus servidores virtuales. El tercero viene muy bien y es Installatron remote lo que te permite instalar estas aplicaciones en un hosting que ya tengas alquilado. ¿Qué aplicaciones puedes usar? Fácil aquí está la lista: https://secure.installatron.com/apps , realmente son las principales que querrías usar.

Diseño Web, Gestores de contenidos

Dos plugins excelentes para hacer foros en WordPress

Ahora estamos trabajando en un proyecto que implica crear una especie de foro. Así que hemos estado probando varios plugins para ello y aquí os dejamos los dos que más nos han gustado a priori:                          http://bbpress.org/: Para mi sin duda el primero que tenéis que probar. Si este te vale para qué coger otro. Fácil de instalar (desde la web de plugins de WordPress), fácil de configurar (casi nada que cambiar) y de empezar a funcionar. Además tiene mucha información (os dejo este manual) y lleva tiempo y está probado. Tiene otra ventaja importante, y es que al llevar tiempo muchos otros plugins han sacado extensiones para este. Por lo tanto es fácilmente integrable con otros (por ejemplo BuddyPress) para tener más opciones. Ellos han sacado algunos que podéis ver aquí: http://bbpress.org/plugins/ (159 plugins). Creo además que los creadores son los mismos que WordPress. La integración con los temas de WordPress es simple y eficaz. ¿Quieres soporte? Puedes escribir en su foro de soporte que, evidentemente, está hecho con BbPress: http://bbpress.org/forums/ Eso si, puede que se os quede algo corto si lo que queréis es un foro muy potente con muchas opciones especiales. Otra alternativa muy probada es Simple Press . Esto es lo contrario a BbPress. Es un plugin pensado para potencia, más que para facilidad. Por lo tanto su configuración es algo más complicada, pero a cambio sus funciones son casi abrumadoras.  Podéis ver más información de sus funcionalidades y sus plugins extras aquí. Cuidado, como con cualquier otro plugin potente, haced copia de seguridad antes porque os puede fastidiar toda la web si lo configuráis de manera incorrecta. Aquí tenéis una demo: http://demo.simple-press.com/ y alguinos sitios donde está implementado http://simple-press.com/showcase/      

Scroll al inicio