Así es como se titula un nuevo libro donde la gente de Code Poet se sumerge en el concepto “Responsive Web Design” y de como diseñadores y desarrolladores pueden aplicar esta técnica al trabajo diario con WordPress.

En este pequeño libro Code Poet preguntó a Chris Coyier, Ian Stewart y Cannon Sara sobre los usos reales y las estrategias para el diseño de WordPress teniendo en cuenta el Responsive Web Design.

Desde que Ethan Marcotte acuñó el nuevo término en 2010 son muchos los diseñadores y desarrolladores han realizado sus proyectos de forma responsable; sitios que realmente se molestan en verse bien sea cual sea el dispositivo en el que están siendo consultados y adaptarse para hacer la experiencia tan buena como pueda ser para el usuario.

Puedes descargar el libro en formato PDF o Ebok desde la web de Code Poet.

Hace pocos días se ha estrenado su página web que ha sido realizada por HGR Design. Ha sido un diseño cuidado, en la línea y filosofía del restaurante. Muy discreto, diafano y elegante.

Respecto a la web es un diseño original que trabaja con WordPress en dos idiomas y adaptable a la mayoría de dispositivos móviles con un diseño adaptable responsive design.

Enlace | Restaurante Divina Italia

Si necesitas información sobre diseño web en Canarias o diseño web para restaurantes, puedes consultarnos sin compromiso.

He recopilado diez maneras o formas para optimizar el trabajo con WordPress y que uso a diario. Son estas:

Utiliza un plugin de cache o compresión en el servidor
Algo que siempre te agradece el usuario y google es que tu sitio web sea lo más rápido posible y una de las formas de cumplir este objetivo es comprimir los archivos de nuestra web para que sean servidos rapidamente y no hacer muchas peticiones a la base de datos. Hay plugins como WP Super Cache o W3 Total Cache que te lo podrán fácil. También puedes optar por usar gzip en tu servidor directamente si te lo permite. Lo puedes hacer configurando el archivo .htaccess de tu instalación WordPress; Aquí te explican como hacerlo

Gestiona bien las imágenes
Con esto me refiero al peso y medida de las mismas. Trabajamos con muchas imágenes en nuestros sitios y la carga de las mismas influye en la velocidad y experiencia de usuario. El hecho de comprimir las imágenes no quiere decir que pierdan calidad, claro está que si lo hacemos en exceso la calidad de la imagen se nota negativamente. Hay varias formas de solucionar esto. Utilizar Photoshop que es excelente exportando imágenes para web (controlas la calidad de la imagen que quieres) o utlizando servicios en línea como Smushit de Yahoo! que te permite reducir el tamaño de las imágenes sin perder calidad.
En SmashingMagazine tenemos una documentación extensa y muy bien elaborada sobre las imágenes y WordPress.

Cargar imagenes al hacer scroll
Siguiendo con el punto anterior, esta es una forma de complementar la optima carga de nuestro sitio después de optimizar las imágenes. Con el plugin Lazy Load las imagenes se van cargando si el usuario hace scroll en nuestra web. Así nuestro sitio no carga todas las imágenes cuando el usuario accede a ella.

Configurar el código del favicon en el archivo functions.php
Así tendrás la función que muestra el favicon más controlada sin tocar el header.php de tu theme. El favicon lo situas en la raíz de tu theme

add_action( ‘wp_head’, ‘ilc_favicon’); function ilc_favicon(){ echo “ <link rel='shortcut icon' href='" . get_stylesheet_directory_uri() . "/favicon.ico' />” . “\n”; }

Redirigir el feed de nuestro sitio a feedburner
A muchos nos encantan las funciones de RSS en nuestros sitios y que los puedan agregar a los diferentes lectores de feeds como google reader. Si queremos tener estadísticas de uso del feed de nuestro sitio debemos usar un servicio como feedburner o similar. Así que con está función en el funtions.php de nuestro theme forzamos a que nuestro feed misitio.com/feed vaya a http://feeds.feedburner.com/misitio. Recuerda que tienes que crearte una cuenta en feedburner.

add_action(‘template_redirect’, ‘ilc_rss_redirect’);<br /> function ilc_rss_redirect() {<br /> if ( is_feed() && !preg_match(‘/feedburner|feedvalidator/i’, $_SERVER['HTTP_USER_AGENT'])){<br /> header(‘Location: http://feeds.feedburner.com/misitio’);<br /> header(‘HTTP/1.1 302 Temporary Redirect’);<br /> } }

Enlaces solo en el home de nuestra web
A veces necesitamos que ciertos enlaces que apuntan a un sitio externo solo se muestren por ejemplo en el home de nuestra web, esto con el fin de evitar enlaces duplicados por todas las páginas de la web y que pueden influir negativamente en el posiconamiento en buscadores.
Así que solo le decimos a WordPress que si es el Home muestre el enlace, si no es el home no lo mostrará. Solo tienes que indicarlo con está función en el sitio que quieras como el footer o el sidebar.

<?php if (is_home()) { ;?><a href="http://www.hgrdesign.es">HGR Design</a><?php } ?>

Quita elementos del header
En muchos themes puedes quitar metas inncesarios como estos:

<meta name="generator" content="WordPress 3.2.1"> </p> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://example.com/xmlrpc.php?rsd"> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://example.com/wp-includes/wlwmanifest.xml">

Utiliza Jetpack
Jetpack es un plugin desarrollado por el equipo de WordPress. Es como un plugin padre que contiene otros plugins, un todo en uno.
Podrás configurar facilmente formularios con filtro antispam, habilitar la función de compartir tus entradas y páginas en medios sociales, estadísticas avanzadas con el motor de wordpress, acortador de urls, gestion de gravatar ampliada y muchas otras funciones. Recomendable. Descargalo aquí.

Limpiar la base de datos
Cada cierto tiempo es conveniente limpiar u optmizar la base de datos de nuestra instalación de WordPress. Si no sabemos mucho del tema hay plugins como WP Optmize que hacen el trabajo por nosotros. Eliminan revisiones de posts, comentarios no aprobados, spam, reparar tablas, etc.

Cambiar url de acceso al login
Por estética o seguridad en ocasiones queremos cambiar la url de acceso a la zona de login de WordPress sin usar la típica misitio.com/wp-login.php o misitio.com/wp-admin

Lo único que tienes que hacer es añadir una simple redirección en el fichero .htaccess de tu sitio:

RewriteRule ^acceso$ http://tusitio.es/wp-login.php [NC,L]

Solo tienes que cambiar la cadena acceso por la que tu quieras, para que quede como http://tusitio.com/acceso, que es el caso del ejemplo.

A mi parecer el problema radica en que durante muchos años se diseñaba la web de manera equivocada. El uso de flash es uno de los culpables de ver sitios supercargados de información, colores, sonido y donde la navegación era terrible provocando auténticos dolores de cabeza. Pero no solo hay que echarle la culpa a flash, pienso que el problema radicó en toda esa masa de diseñadores que se toparon con un nuevo mundo: La Web, ese mundo desconocido donde se pensaba que se podían hacer las cosas al igual que en los carteles, libros o revistas.

El diseñador tuvo que evolucionar y en su evolución se toparon con los responsables de los websites o los departamentos de marketing que necesitaban que el uso de la web por parte de sus usuarios diera resultados (ventas, conversión, etc). Así que con el paso de los años, los diseñadores web se han especializado en lo que deben ser: Diseñadores Web. Una nueva forma de trabajo, de presentar las cosas, de maquetar, de transmitir la información y que es muy diferente al editorial, gráfico, entre otros. Y que partiendo de esa base, ya sea editorial o gráfico dotan a la web la una belleza funcional que hoy en día impera en la mayoría de la red.

Front-end developer, User Experience, Responsive Design, entre otros muchos términos rodean al diseño web hoy en día. Así que si piensas que el diseño no puede convivir con la usabilidad de un sitio, creo que estás equivocado y te has quedado en el diseño web tal como lo conocíamos a principios de la década pasada.

Afortunadamente internet parece que ha llegado a un estado de madurez, llano, especial o como lo queramos llamar, donde todos, diseñadores, programadores, marketers, usuarios, etc. visualizan el mismo punto; El de la sencillez, belleza y funcionalidad aplicada al gran ecosistema web en el que vivimos hoy.

El curso es bastante interesante ya que es presencial, con un mínimo de 25 horas lectivas repartidas en viernes y sábados. Aprenderás a gestionar WordPress para poner en marcha tu blog personal o sitio de contenidos. Además la persona que lo imparte, Carlos Xabier de Tus Clases de Apoyo tiene mucha experiencia en el ámbito de la enseñanza y el uso de WordPress como gestor de contenidos y blogs.

HGR Design colabora con el curso en una o dos clases explicando a los alumnos como pueden sacarle más beneficio a WordPress en el área de diseño y personalización. Será toda una experiencia y espero que sea de utilidad lo que pueda aportar en el curso.

En el siguiente cartel hay una amplia información sobre el curso. Cualquier duda o ayuda pueden dirigirse a los organizadores del curso en este enlace.

El evento nació hace un par de años en Tampa Bay (Florida) por una iniciativa de usuarios de foursquare. La idea gustó y se extendió a muchas más ciudades.

Así que este año no será la excepción y el 4SQDAY 2012 en Lanzarote se celebrará en el PUB STAR’S CITY (mapa) en el Arrecife Gran Hotel el lunes 16 de abril de 2012 a las 18:00horas.

Reseña del Foursquare Day Lanzarote del año pasado 2011 |  Fotos 4SQDAY 2011 en Lanzarote | Foursquare Day en el mundo | Web oficial 4SQDAY | Blog oficial de Foursquare | Cartel en alta resolución.

El pago en las tiendas online en muchas ocasiones puede generar problemas tanto para vendedores como para los usuarios o clientes de la misma. Ya lo vimos en el post anterior con el tema de los pagos con tarjeta. Vamos a ver algunas de las muchas formas de pago que podemos tener habilitadas en nuestras tiendas para ofrecer más variedad a nuestros clientes y mejorar su experiencia en la compra. Además algunos sistemas a tener en cuenta para el futuro más cercano, como pueden ser los pagos por el teléfono móvil.

Empecemos con los sistemas de pago más usados en la actualidad.

Transferencia bancaria

Este ha sido uno de los métodos estrella casi desde que empezaron a crearse los comercios electrónicos. El funcionamiento es sencillo. El cliente hace la compra, ingresa el importe de la misma en el número de cuenta del vendedor o tienda y una vez está confirmado el ingreso en cuenta se envía el pedido al cliente o destinatario.

Ventajas: Fácil uso, ventas rápidas y confianza.

Desventajas: Proceso de pedido lento (las transferencias suelen tardar 2 o más días dependiendo del banco) 

Tarjeta crédito o débito

El pago con tarjeta de crédito o débito es uno de los más utilizados hoy en día. Y es que para el usuario es muy sencillo el proceso de compra, ya que paga los articulos o servicios en el acto y el pedido se procesa sobre la marcha.

Ventajas: Rapidez en la compra-venta, comodidad.

Desventajas: En algunas pasarelas de pago, debido a los filtros de seguridad, hacen que el usuario no termine la compra. Esto es debido a la complejidad o falta de información por parte de los bancos. Fraude online, el uso de tarjetas fraudulentas sigue presente y hay que estar muy atentos en nuestros comercios. 

PayPal

Este sistema de pago se ha ganado un hueco importante entre los servicios de pagos online: Su mezcla de sencillez, rápidez y seguridad ha logrado cautivar al público y la gran mayoría de comercios online alrededor del mundo lo usan. Incluso hay comercios donde es su única forma de pago. Además de poder asociar una tarjeta o cuenta bancaria a nuestro email o cuenta de paypal para pagar, estos disponen de una pasarela “alternativa” de pago con cualquier tarjeta de crédito si el usuario no está registrado en PayPal.

Ventajas: Seguridad (comprador – vendedor) rápidez, fácil uso.

Desventajas: Altas comisiones por transacción.

Contrareembolso

Otro de los protagonistas y que ya  tiene sus años. Este sistema proporciona confianza y seguridad al comprador ya que paga su pedido al recibirlo. El transportista entrega el paquete y el cliente abona la cantidad correspondiente. La empresa de transporte hace llegar al vendedor el dinero mediante el sistema que hayan pactado (cheque, transferencia, metálico, etc.)

Ventajas: Seguridad para el comprador

Desventajas: Comisión por el servicio. En algunas ocasiones el usuario no admite su compra y está debe devolverse con los consiguientes costos para el vendedor. 

Pago en mano o recogida local

Si la tienda online dispone de una o varias tiendas físicas puede permitir la compra online y que el cliente pase por la tienda más cercana a recoger su compra. Así se ahorra gastos de envío y también tiempo.

Ventajas: Ahorro en logística y tiempo.

Desventajas: Depende de la tienda puede estar limitado a unos pocos clientes. 

Este ha sido un repaso a los sistemas de pago más usados en España, ya que, depende del país, se pueden usar otros sistemas de pago como pueden ser los “giros postales”, plataformas de pago realizadas especialmente para una zona, etc. Además de otros como moneybookers, mobipay, etc.

Y para terminar podemos echarle un vistazo al futuro más próximo o al futuro que ya está aquí. Sin duda este futuro pasa por el pago utilizando nuestros teléfonos móviles.

Uno de los sistemas que más está despertando curiosidad y cobra fuerza es Google Wallet  este sistema permite pagar con el teléfono en comercios fisicos y en nuestras compras online. Google ya permite desde hace tiempo hacer pagos al estilo PayPal con “Google Checkout”. Este sistema complementaria al nuevo Google Wallet.

Square es un sistema que, para mi, es algo revolucionario y da una vuelta de tuerca total al pago online tal como lo concemos ahora. Mediante un pequeño lector magnético adaptable a nuestro teléfono podemos pasar la tarjeta como si de un TPV físico se tratara y hacer el pago en el instante, tal como si estuviéramos en un comercio normal.

Y esto es todo por ahora, sabemos que existen muchos más medios de pago que están implementados o se están desarrollando ahora mismo, así que estaremos pendientes de las novedades y tecnologías en pagos online que surjan en los próximos mes para intentar probarlos y ofrecer a los usuarios la mejor experiencia posible en sus compras por internet.

Si tienes dudas o aportaciones, recuerda que tienes los comentarios a tu disposición.

Uno de los quebraderos de cabeza a la hora de montar una tienda online es el famoso TPV virtual. Si, ese que permite a nuestros clientes pagar con su tarjeta de crédito o débito en nuestra tienda. Y los problemas no es que sean técnicos o de implantación ya que son bastante sencillos de configurar y montar en tiendas tipo PrestaShop, Magento, OsCommerce, entre otros.

Los problemas pueden surgir desde el momento en que solicitas el servicio a tu banco de confianza o uno al que has ido porque te lo han recomendado. En estos sitios (bancos o cajas) te puedes encontrar con que no te conceden el TPV porque tu comercio no cumple con sus “exigencias” ya sea por garantías, avales, etc. Si te lo conceden es porque previamente has hecho todo el papeleo del mundo mundial, así que  considérate un “afortunado”.

Cuando ya tienes tu TPV aprobado te encuentras con otro u otros problemas. Uno de los más típicos es que pasan y pasan los días y la “entidad financiera”  no nos envía o no nos informa de la activación del TPV. Pueden pasar semanas y dependiendo de la oficina o entidad financiera el proceso puede ser traumático.

Cuando ya tenemos el TPV activado, después de haber hecho pruebas en nuestro sitio con la pasarela en modo de pruebas, etc. Llega el momento de la verdad, abrimos nuestra nueva forma de pago al público y así hacerle más fácil y cómoda la compra utilizando su tarjeta. Pero aquí llega uno de los mayores problemas con los sistemas de pago actuales. Los protocolos de seguridad. La famosa tecnología 3D Secure: Verified by Visa y MasterCard SecureCode. Son una piedra en el camino de la compra de nuestros clientes y usuarios. Vamos a verlo detalladamente.

Las entidades no informan a los usuarios de estas nuevas prácticas  a la hora de pagar por internet. Estos al hacerlo van con total desconocimiento y se confunden. Aparte de pedir los datos normales como el número de tarjeta, caducidad y código de verificación; el usuario necesita un código que obtiene llamando a su entidad, acudiendo a su oficina, en su banca virtual privada o por teléfono y en otros casos es su PIN. Esta situación a muchos usuarios les molesta, en unos casos porque el proceso de compra se alarga más de lo normal y en otros la confusión hace que el cliente-usuario abandone la compra. Esto se traduce en muchas ventas perdidas.

Cabe destacar que toda implantación que  ayude a la seguridad del comprador tiene que ser bien recibida y así evitar el fraude en el comercio online. Pero como dije antes, las entidades financieras tienen que dar más información o desarrollar métodos más eficaces que moderen la balanza para clientes y vendedores.

Como ya hemos visto, el solicitar el TPV online y su puesta en marcha puede darnos algunos problemas. Pienso que la clave está en no desesperar, tener paciencia, probar y ver que es lo mejor para nuestra tienda online y para nuestros clientes.

Ya sabes, si quieres compartir con nosotros tus experiencias en este tema no dudes en dejar tu comentario, el hilo está abierto! Saludos.

Hace unos meses nos embarcamos en el desarrollo de un apasionante proyecto de comercio electrónico llamado The Outlet Room. Una tienda online de decoración muebles y artículos de regalo. Siguiendo una línea de grandes descuentos con una duración limitada. Cabe destacar que la mayoría de sus productos son exclusivos, de un cuidado detalle y con marcas de primera línea. Apostando desde un principio por la calidad.

The Outlet Room confió plenamente en HGR Design para el diseño integral de su imagen como el logotipo, anágrama, adaptación corporativa y diseño general de la tienda online, pasando por la optimización web y el entorno de usuario.

El desarrollo de la tienda online pasó por un proceso de maquetación previa en papel (bocetos) después una adpatación en Photoshop logrando un acercamiento más real del proyecto y modificando los detalles para después adaptar todo el diseño en HTML, CSS, JavaScript, PHP, etc.

 El Marketing online ha sido el siguiente paso. Se ha preparado una página en facebook que se integra con la tienda y como canal de información y atención a las personas que siguen la página de marca en la red social. Además se ha usado como soporte publicitario facebook Ads y Google Adwords. Para el envío de newsletter se ha usado la herramienta mailchimp.

Hay muchas cosas que se me escapan, así que los invito a que conozcan de primera mano este nuevo proyecto. Y para finalizar, como siempre, si quieres aportar algo eres bienvenido; los comentarios están habilitados en todo momento. Saludos.

Los que nos dedicamos a esto de las webs mantenemos en un constante y vertiginoso cambio en donde todos los días surgen nuevas formas de hacer las cosas, nuevas plataformas, tecnologías y un sinfin de información casi imposibles de digerir para un humano normal. Y es aquí donde se empieza a oir y leer mucho sobre “Responsive Design”. Es un término no muy nuevo pero que gana cada vez más valor con el paso del tiempo.

Pero bueno, centremonos en nuestro tema. Lo primero ¿Qué es “Responsive Web Design”? Esto traducido literalmente al español siginifica Diseño Web Responsable y la verdad es que la traducción nos dice ya mucho. Vale, perfecto y, ¿Cómo es un diseño web responsable? Pues es un diseño web que se adapta bien a todos los dispositivos donde se vea el mismo. Esto es desde un teléfono móvil hasta una pantalla de esas que hay ahora de 50 o más pulgadas pasando por PC, tablets, netbooks, etc.

Bueno, ya tenemos la teoría pero, ¿Cómo podemos trabajar para que nuestros diseño se vean bien en todos los dispositivos que hay hoy en día? Bueno, lo primero amigo y amiga es que te relaciones bien con los nuevos estándares web, conoce y adentrate en el mundo de HTML5 y CSS3, seguro que serán tus mejores aliados. Las nuevas características de CSS3 te permiten incorporar nuevas funciones a tus diseños, entre ellas las que necesitamos para maquetar nuestro sitio de manera correcta en diferentes dispositivos.

Entremos solo un poco en materia. Veamos un ejemplo de como podríamos adpatar un layout para diferentes dispositivos con CSS. Con el uso de Media Queries @media screen and (max-width:000px) podemos indicar que diseño mostrar dependiento del ancho del dispositivo donde se muestra la web.

body {
font:1em/1.5em 'Verdana', 'Arial', sans-serif;
}
@media screen and (max-width:800px) {
body {
font-size:0.8em;
}
}
@media screen and (max-width:400px) {
body {
font-size:0.7em;
}
}


Esto sólo es la punta de una gran lanza ya que además de los layouts tenemos que aplicar el diseño web responsable a las tablas (muy importante) menús, imágenes y demás que componen nuestra web.

Como siempre dejo información y material que complementa lo que he escrito aquí.

Aplicar el Responsive Web Design a imágenes y videos
Un uso interesante de Media Quieries
Convertir un menú normal en un menú desplegable
Ideas para tablas
Ejemplos de Responsive Design

Si tienes algo que puedas enseñarnos, no lo dudes, usa los comentarios!