Corbeto’s Boots

Cuando el plan B se convierte en el plan principal

En los proyectos surgen preguntas.

El éxito depende que las respondas de forma correcta.

Este informe es el resumen de 9 años de intenso desarrollo de una tienda online realizada a medida. El resultado será el Trabajo de Final de Grado que estoy cursando en la UOC. El objetivo  es mostrar las respuestas a las preguntas que han surgido durante el desarrollo de un proyecto.

Lo que empezó siendo una tienda online modesta, se ha convertido en una tienda que vende a más de cuarenta países y que dispone de miles clientes.

Año: 2017

Autor: Toni Rodríguez Carrasco

Consultor: Kenneth Capseta Nieto

Professor: Carlos Casado Martínez

Índice

EL DOCUMENTO 5 

El informe 6 

Relevancia 6 

Objetivos 8 

EL ESCENARIO 10 

Hace 9 años 11 

Análisis de mercado 12 

Viabilidad 20 

ACTORES DEL PROYECTO 21 

El cliente 22 

Los diseñadores gráficos 24 

El desarrollador 31 

Servicios externos 34 

ASPECTOS TÉCNICOS 40 

Herramientas de desarrollo 41 

Conexiones 49 

Herramientas en producción 50 

Seguridad 54 

EL FRONT-END 60 

FrameWorks php 61 

FrameWork CSS 62 

FrameWork Javascript 63 

Estructura web 64 

EL BACK-END 65 

FrameWork php 66 

FrameWork Javascript/CSS 66 

Método de trabajo 67 

Estructura del Back-End 67 

DECISIONES DEL PROYECTO 68 

El cliente y la tienda 69 

Apartado técnico 76 

Costes y timing 87 

EN LA ACTUALIDAD 89 

Tratamiento de las Tallas 91 

Showrooming y el webrooming 96 

Tratamiento SEO 98 

TPV DIRECT 105 

PayPal cambia TLS a la versión 1.2 y a HTTP 1.1 109 

Exportación a Excel de listados de usuarios 110 

Blog personal 112 

MEJORAS Y CAMBIOS DE FUTURO 116 

DooFinder 117 

Google Shopping 118 

Mejora en redes sociales 119 

Cambio masivo de estado de pedidos 119 

CONCLUSIÓN 120 

EL DOCUMENTO

El informe

Este documento pretende resolver alguna de las dudas que pueden surgir a la hora de poner en marcha una tienda online. Lo hace de forma muy general, pero intentando tocar todos los temas que se han ido encontrando en el proyecto de tienda online de www.corbetosboots.com 

Forma parte del Trabajo de Final de Proyecto de Grado Multimedia que curso en la UOC.

Un proyecto de más de 8 años de vida y que ha llevado a una empresa a la venta de sus productos a todo el mundo.

Al leer el documento quizás os resuelva las dudas, o por el contrario, os abra nuevos frentes de preguntas.

El documento se divide en conocer los que participan en el proyecto, en conocer un poco el proyecto, en exponer las dudas que fueron surgiendo, las mejoras que se han añadido en el transcurso de este trabajo y enumeración de tareas futuras a tratar.

Relevancia

Se dará respuesta a diferentes dudas que se tienen a la hora de comenzar, desarrollar o mantener un proyecto en forma de ejemplos y decisiones que se tomaron plasmados en un informe detallado.

La relevancia de este informe será el que se de a la experiencia expuesta en éste, en forma de retos y respuestas. Se expone las soluciones escogidas a los retos del proyecto y el resultado de estas decisiones. A continuación se detalla un pequeño ejemplo:

Una vez se tenía claro qué quería el cliente, debía escogerse sobre qué plataforma debía ponerse en marcha. Habían dos opciones: tienda desarrollada a medida o uso de soluciones oscommerce1 (en aquella época)  o Prestashop2?

Se decidió escoger el desarrollo a medida para una mejor adaptación a las necesidades e imagen teniendo el mínimo de límites tanto en desarrollo como en diseño.

Las conclusiones a las que se llegaron, fueron:

En primer lugar, para poder modificar la web se necesita un programador avanzado.

En segundo lugar, la mayoría de servicios externos tienen soluciones de adaptación a motores de comercio electrónico como Prestashop o Magento, pero en el caso del desarrollo a medida, debía hacerse desde cero. Un ejemplo sería el servicio de newsletter MailChimp, que dispone de módulos adaptados a Prestashop, Magento u OpenCart.

En tercer lugar, la mayoría de ataques informáticos a servidores se hacen aprovechando los agujeros de seguridad por falta de actualizaciones de soluciones de software que utiliza la mayoría de webs: Wordpress, Joomla, Prestashop, Magento...

En cuarto lugar, el desarrollador deberá actualizar los frameworks, tanto PHP como CSS, para poder aprovechar al máximo las novedades que éstos ofrecen. Actualizándolos, se puede estar seguro que la web estará aprovechando las últimas novedades en inferficies, optimizaciones...

Por último, el límite de adaptación de necesidades en la web vendrá dada por el conocimiento de desarrollador y no por cuestiones de la existencia de plugins, módulos o semejantes.

Objetivos

A continuación se especifican los objetivos, principales y secundarios según su importancia o relevancia, en la realización de este informe.

Principales

Objetivos más destacados ordenados por grado de relevancia:

Mostrar las dudas que pueden surgir en el desarrollo de una tienda online desarrollada a medida.

Mostrar las soluciones aplicadas a los retos que se han afrontado.

Detallar errores cometidos durante el desarrollo.

Mostrar en detalle las relaciones entre profesionales

Diseñadores, SEO’s1 y otros servicios (Pasarela de pago, chat, visor 3D de productos...).

Qué pasos deben seguirse para adaptarse constantemente a las nuevas tecnologías.

Qué dudas y que inquietudes tiene el cliente.

Secundarios

Objetivos adicionales que enriquecen el Informe y que pueden sufrir variaciones.

Detallar las decisiones técnicas escogidas.

Desarrollo del proyecto: Framework PHP, Base de datos y JavaScript.

Selección de proveedor2 y de servidor.

Seguridad en el servidor (servicio externo, permisos y programación).

Adaptación de la web a dispositivos móviles.

Enumerar ellos servicios externos contratados y qué repercusión han tenido en la tienda.

Cuál es el papel y qué herramientas da Google para el desarrollo del proyecto.

Qué medios utilizar para la comunicación con el cliente.

Adaptar modelo de negocio a la web

Adaptar la imagen del negocio a la web.

Funcionalidad y navegabilidad de la web

El buscador interno

Los idiomas

La cesta

EL ESCENARIO

Hace 9 años

El proyecto comienza hace nueve años, y el escenario dista mucho de la actualidad. En España, todavía se debatía si comprar por Internet era o no seguro. Aunque Internet ya era accesible para la mayoría de hogares, muchos no lo veían como imprescindible. Es más, la mayoría de usuarios no sabían lo que era un certificado de seguridad o que podía pagarse por pasarela bancaria de forma segura.

Aun así, muchos comerciantes y empresarios estaban preocupados. En el resto de Europa y EEUU se comenzaba a vender por Internet y eso era el inicio de un problema: la competencia se movía. Si se dispone de productos internacionales, el empresario debe moverse.

En Barcelona, un joven empresario llamado Jordi Corbeto, tomaba el relevo familiar y se hacía cargo del negocio. Con una visión privilegiada de futuro, que venía dada por los estudios universitarios que ha adquirido, decide dar un paso adelante y subir el nivel de su negocio.

Una época donde vender por Internet tenía una dificultad considerable, Jordi Corbeto toma una decisión que a día de hoy le permite vender sus productos alrededor del mundo. Eran muchas las dudas e inquietudes pero, la determinación, el tener claro qué quería y sus conocimientos han llevado a su negocio suba un nivel y pase a ser competencia directa de empresas importantes del sector en todo el mundo.

Análisis de mercado

En las reuniones iniciales del proyecto, el cliente tenía claro los objetivos:

Crear marca.

Estar en Internet.

Vender.

Para cubrir estos objetivos, se decidió guiarnos de tiendas online líderes en el sector. Este punto es válido tanto en decisiones de diseño como en el desarrollo. En diseño puede cogerse muchas ideas de cómo mostrar los contenidos, y en términos de desarrollo puede verse cómo tratar la navegabilidad, la estructura, velocidades, optimizaciones...

Aunque inicialmente estudiamos otras páginas web, el cliente quería distanciarse de la mayoría. En definitiva el objetivo era marcarse unas bases propias, y se complementaría con otras ideas que se pudieran observar en otras tiendas. Finalmente, no se implementó muchas ideas externas y se prefirió hacerlo todo en base a ideas propias.

El mercado es claro marcador de cómo va la tienda online. El principal mercado de nuestro cliente es el español. Corbeto’s Boots tiene proveedores en EEUU, al igual que otras tiendas del resto de Europa. Y aquí se plantea un problema:

El poder adquisitivo y los precios en el resto de Europa, no son los de España. Todas las empresas europeas adquieren productos en EEUU y al llegar a cada uno de los países ponen precios diferentes adaptándose a su país. En España los precios que se ponen, son mucho más bajos que en el resto de Europa, por lo que cuando se ponen a la venta en Internet, se crea una competencia muy fuerte. El resultado son llamadas de las empresas europeas a los proveedores de EEUU exigiendo que los países como España o Italia suban los precios de sus productos para no quitarles clientes en sus propios países. 

Si se ponen precios bajos en la web, la competencia europea se queja. Si se ponen precios más altos, pierdes clientes en tu mercado que es España.

Se pensó en solucionar el problema con el reconocimiento por IP’s del cliente que visita la web, mostrando según el país un precio u otro. Aquí se habría un amplio abanico de problemas (el tiempo de mantenimiento de precios el más importante), por lo que se desestimó esta solución. Finalmente se modificó algunos precios, y todos quedaron satisfechos. 

DIVISIÓN EN ZONAS

ESTADOS UNIDOS

País dónde están las tiendas punteras. Como es lógico, son la referencia del sector de ropa Country. Algunas de las tiendas más importantes son:

Bootbarn

http://www.bootbarn.com

Una tienda escogida para ser referencia por el método de mostrar los productos, mas que por el diseño. No se ajusta a las ideas planteadas en estructura o diseño. Pero puede dar pequeñas ideas en temas de datos que se muestran, colocación del productos, relevancia de productos...

Cabela’s

http://www.cabelas.com 

Con un diseño más acorde a lo que se buscaba, Cabela’s es una página web muy bien estructurada y pensada. Se ve claramente que hay un gran equipo detrás. Igual que muchas de las webs que puedes cogerse como referencia, al ser de EEUU, deben cogerse como referencia.  Marcan tendencia y tienen muy actualizadas las páginas web adaptándose a lo que los usuarios demandan. 

Sheplers

http://www.sheplers.com

Una de las webs más importantes del sector, apuesta por la velocidad de carga de la página principal y por los enlaces que apuntan a palabras clave. Es una apuesta diferente al resto de páginas. Se evaluó cómo una apuesta muy arriesgada y que no se ajusta a lo que se interpretó como un punto indispensable: dar protagonismo al producto, y más concretamente, a la imagen del producto.

Bootcity

http://www.bootcity.com

La que, en términos de imagen, se acerca a nuestro objetivo. Fotos de productos muy bien trabajados y muy estudiados. Una página web que da muchas ideas a la hora de tratar las fotos de productos. 

EUROPA / ESPAÑA

Botas Valverde del camino

http://www.botosvalverde.es

Página de uno de los proveedores de Corbeto’s Boots. Si debe venderse productos de un proveedor, que mejor que guiarse de su página web para saber cómo mostrar el producto y cómo venderlo. Nadie como el propio proveedor sabe cómo es su producto.

Tienda botas

https://www.tienda-botas.es

El dominio tienda-botas está más que pensado, pero pierde identidad. El diseño es muy cercano a la resta de tiendas que hay en Internet, cosa que no atrae cuando buscas diferenciarte del resto, pero la forma de filtrar productos y las categorías, están muy bien pensadas y trabajadas.

CONCLUSIONES COMPETENCIA

Es obligatorio el estudio inicial de la competencia. Debe saberse cómo vender el producto, qué productos tienen, cómo los muestran, qué servicios proporcionan al cliente… y a partir de aquí estructurar la web para, de una manera muy personal, ofrecer el mismo servicio y trabajar para mejorarlo.

Siempre hay tiendas que van delante en cuanto a términos técnicos e ideas. Debe detectarse cuáles son estas empresas y seguirlas. Está claro que muchas de ellas invierten grandes cantidades de dinero, y es muy difícil estar a su altura, pero Internet permite acercarse.

Y dónde está la guerra con la competencia? En tres frentes:

Posicionamiento

Las palabras clave y el posicionamiento. Es una constante estudiar qué palabras clave utiliza la competencia o ver cómo la competencia copia las que se han utilizado por nuestra parte.

La guerra es constante y sin límites. Las tendencias de búsqueda de los usuarios varía según los años o las temporadas, y la competencia se mueve.

Diseño e ideas

Quien pega primero dispone de mucha ventaja respecto al resto. Lo usual es que una innove, y el resto siga la estela en el caso que considere que es correcto.

Un claro ejemplo sería mostrar productos en 3D. Son pocas las tiendas que lo tienen, pero poco a poco se implantarán, ya sea en forma de fotos que simulen el giro del producto, o nuevas tecnologías que permitan ver el producto de la manera más real posible.

Cantidades a invertir

Quien más invierte, si se hace de forma correcta, se convierte en innovador y normalmente siempre está mejor posicionada que el resto en los buscadores. Una buena inversión, se traduce en un equipo más grande: diseñadores, SEOS, desarrolladores… lo que se traduce en webs punteras y de referencia.

Contra la inversión económica, solo queda la inversión en tiempo.

Viabilidad

Aunque en el inicio del proyecto siempre se tienen dudas, en este caso se tenía muy claro que la viabilidad era alta. No es lo mismo vender pisos o electrónica, que ropa especializada country a Internet. Se trata de productos muy exclusivos.

Se dispone de un producto diferencial, que lo adquieren clientes muy concretos y que tienen muy claro qué compran. La mayoría de productos tienen detrás una marca muy reconocida en este entorno que hace la compra mucho más segura. Cuando se compra unas botas de la marca Sendra, se sabe qué se compra.

Técnicamente no había ningún problema, se trabaja con un proveedor contrastado de servicios de Internet, y el desarrollador dispone de conocimientos avanzados.

En términos de diseño, era uno de los puntos más difíciles. El cliente tenía muy claro que quería, pero era necesario saber qué supondría aplicarlo en el diseño web. Era cuestión sólo de tiempo y trabajo.

La logística era el punto más conflictivo y que hizo trabajar más:

Pasarela de pago. Negociar con el banco e implantar la solución.

Transporte. Negociación con diferentes empresas e implantación de precios.

Idiomas. Podrían llamar clientes de diferentes países. 

Tiempo. Debe tenerse tiempo para poder tratarse las llamadas, pedidos, envíos... 

Otro punto que ofrece dudas es el tema legal. Se puso en manos de un asesor y la compañía Confianza Online para poder solucionar los términos legales de las tiendas online (LOPD, LSSI...)

En este caso, era claro que debido a la seriedad del cliente, los conocimientos que dispone  la necesidad de crecer en Internet, el proyecto debía hacerse si o si. Lo que debía decidirse era si ir poco a poco y comenzar con una plataforma de venta online estilo Prestashop, o jugársela con un desarrollo a medida.

Se decidió ir a por todas.

ACTORES DEL PROYECTO

El cliente

Corbeto’s Boots, como bien remarca su logotipo, es una empresa familiar que lleva “pisando fuerte desde 1948”. El carácter familiar, la profesionalidad y el conocimiento de su producto, hacen de este negocio, uno de los más potentes en su sector. Situado en La Rambla, 40 de Barcelona se abrió al resto del mundo cuando puso en marcha la tienda online que actualmente dispone.

La empresa vende a clientes finales todo tipo de botas cowboy, botas para moteros y rockabilly, botas para bailar Country o Line Dance así como un extenso surtido de ropa vaquera y accesorios que abarcan camisas, corbatines, sombreros, cinturones, hebillas, entre otros.

Jordi Corbeto, con estudios universitarios y con conocimientos de varios idiomas, toma las riendas del negocio familiar en épocas de crecimiento de Internet. Una persona preparada que decide dar un paso y crecer, eso sí, siempre siendo fiel al estilo de Corbeto’s Boots.

La web actual puede visitarse desde el enlace:

https://www.corbetosboots.com 

Los diseñadores gráficos

Han sido hasta tres los profesionales del diseño los que han participado en el proyecto, coincidiendo con los cambios de imagen de la web. Cada dos o tres años se programa un cambio de diseño para adaptarse a las novedades en este campo.

Diseñador junior

En los inicios del proyecto, partíamos de cero. El cliente dispone una página web desarrollada en HTML y muestra sus productos más destacados. Debe desarrollarse una tienda online desde cero adaptándose a las especificaciones que el negocio impone:

Nuestro diseñador junior, no disponía de mucha experiencia en el sector web, pero lo compensaba con motivación e inversión de muchas horas. No estaba encajado en una manera de diseñar y estaba abierto a todas las sugerencias que el cliente le sugería.

En aquellos inicios, los dispositivos móviles no eran tenidos en cuenta a la hora de diseñar. Los monitores no disponían de resoluciones muy elevadas, eran pocos los que poseían monitores HD o panorámicos. Los monitores más extendidos eran los de 15 pulgadas, y los que tenían 17 pulgadas eran unos privilegiados.

El diseño web en aquella época estaba iniciándose. Todo consistía en colocar botones y sobrecargar las webs. Formatos de texto, espaciados, colocación de los objetos… todo eso era desechado y se pecaba de querer aplicar al monitor lo que los diseñadores hacían sobre el papel.

Por aquel entonces, y parece que estoy hablando de hace siglos, la maquetación se hizo en Photoshop y se trabajó con ficheros PSD. Los pasos que seguimos son los siguientes:

Inicialmente hicimos una reunión entre cliente, diseñador y desarrollador. En esa primera reunión llegamos a conocer a nuestro cliente, sus gustos, su imagen, su competencia, qué apartados debía tener la tienda...

Una vez realizada la reunión con el cliente, se mantuvo una reunión entre diseñador y desarrollador para puntualizar los límites y los requerimientos técnicos (formatos, medidas, …).

Seguidamente, el diseñador presentó al cliente diversas versiones hasta ser aprobado.

Una vez definida la versión definitiva, llegaba la hora de maquetar la web. Y este punto lo trataré aparte:

La maquetación, para muchos de los que estéis leyendo estas líneas, en la actualidad es mucho más uniforme. Todos seguimos unos estándares que los navegadores respetan. Pero esto no ha sido siempre así. Los que llegamos a tener un PC con 1GB de RAM y utilizamos Dreamweaver como editor, debíamos luchar en dos frentes: Internet Explorer y el resto del mundo. Es difícil de explicar, pero para resumirlo, cada web debía crearse dos veces. De esta manera, se tenía que programar teniendo en cuenta las resoluciones de los monitores, el navegador y las velocidad de Internet, que por aquel entonces eran limitadas.

Las fechas de entrega de las diferentes fases del proyecto, normalmente no se cumplían porque la comunicación diseñador/cliente era continua. Habían modificaciones constantes, por lo que se ampliaba las fechas de entrega. Era comprensible, se empezó desde cero y, aunque se tenía muy claro lo que se quería, se complicaba el plasmarlo en la web.

Diseñador senior trabajando

Pasado un par de años del primer diseño, y siguiendo con la inquietud positiva del cliente, se señaló la necesidad de actualizar el diseño para adaptarse a nuevas necesidades que marcaba la tendencia:

mejorar el diseño y,

adaptación de la web a los dispositivos móviles.

Éste último punto fue el detonante del cambio de diseño. Todo apuntaba a que los dispositivos móviles estaban creciendo en navegación web. En las estadísticas se empezó a apreciar que los móviles y tabletas crecían poco a poco.

El proyecto estaba en un punto donde la necesidad de adaptación al móvil no era estrictamente necesaria, se podía posponer uno o dos años. Las visitas en dispositivos móviles, aunque crecientes, no representaban lo suficiente para hacer una inversión que representaría un gran gasto. Además, la maquetación para dispositivos móviles estaba por una batalla muy especial:

Podía crearse una web destinada enteramente a una vista móvil, o por el contrario, un nuevo método de diseño/maquetación llamado “Responsive”. Debe tenerse en cuenta que tanto la primera como la segunda opción, todavía estaban en crecimiento. En los diferentes artículos que los desarrolladores encontrábamos en Internet, se podía leer cosas a favor y en contra en cada uno de ellos. Todo eran dudas, pero debíamos optar por una de las opciones.

Diseño responsive

Si nos situamos años atrás, en los inicios de la maquetación para dispositivos móviles, se puede entender que diseñar pensando en que los objetos de la web se colocan adaptándose a la pantalla de los Smartphones cuando se visitaba una página web, era un poco extraño.

Ya era complicado entender que se debía pensar en dos maneras de visualizar las páginas web, una en monitores y otra en dispositivos móviles. Pero además se sumaba que se debía tener en cuenta que los dispositivos móviles también tienen diferentes resoluciones, que se pueden ver en vertical y horizontal, y que a su vez también disponen de diferentes navegadores según el sistema operativo.

Todo un reto entender este concepto y explicárselo al diseñador.

Vista web y vista móvil

El FrameWork PHP que utilizamos, CodeIgniter, está basado en la programación MVC. Esto permite separar las vistas del resto del desarrollo, o lo que es lo mismo, nos permite crear tantas vistas como se necesitemos según dispositivos, resoluciones...

Partimos que debe crearse un nuevo diseño para la web, y por otro lado, crear una nueva vista para móviles. CodeIgniter, nos proporcionaba una forma fácil de crear una vista específica para móviles separándolo de la web. Dicho de otro modo, se puede llevar al máximo la optimización en cada una de las vistas, sin que una dependa de la otra. Esto, en un futuro, veremos que el buscador Google lo valora mucho.

Opción escogida

En esta ocasión es el desarrollador quién elige el método de diseño a seguir. Aprovechando lo que nos permite hacer el FrameWork PHP, el diseño móvil se haría creando vistas, descartando el diseño responsive. Esto supondría:

Diseño por separado de móvil y monitor PC.

Mayor velocidad en móviles debido a la optimización de los contenidos.

Doble trabajo, y por lo tanto, doble coste.

Necesidad de un diseñador que diseñe para móviles.

Escoger un buen FrameWork CSS que nos permita crecer.

Ilustración 1: Corbeto's Boots - Móvil - Home 

Ilustración 2: Corbeto's Boots - Móvil - Categorías 

Ilustración 3: Corbeto's Boots - Móvil - Producto 

Ilustración 4: Corbeto's Boots - Móvil - Cesta 

Diseñador senior con trabajo

Se debe trabajar con un diseñador que no puede dedicar tiempo completo. Dedica sus 8 horas diarias a su trabajo y nos deja pocas horas al día, y alguna más los fines de semana. Debe buscarse que la experiencia compense el tiempo que puede dedicarse al diseño.

Aún así, los tiempos de entrega, pasan a depender totalmente del diseñador. El compromiso del diseñador debe ser máxima. Lo normal en estos casos es que el proyecto se enquiste y al final no se lleve a cabo.

Los cambios a realizar siempre tardaban en ser aplicados al diseño. Esto suponía un constante dejar el proyecto aparcado hasta que se presentara las nuevas versiones de diseño.

En este proyecto, el seguimiento del cliente fue esencial para que el proyecto finalizara satisfactoriamente.

Diseñadora senior

Tercer cambio de diseño realizado hace un año, en el 2016. Ahora el escenario de contratación de profesionales ha cambiado. El cliente, después de contratar a diversos diseñadores en plataformas online de Freelance, a los que pedía la realización de pequeñas tareas (banners, botonería…), decide contratar a una de las diseñadoras senior con las que mejor captó sus ideas.

El diseño en dispositivos móviles ya está cubierto. Se decide cambiar de nuevo el diseño, pero únicamente de la vista web para monitores de Pc’s.

Desde un inicio el proyecto toma un ritmo frenético. Se cumple con las fechas y el trabajo tiene un acabado mucho pulido, en todos los sentidos. La comunicación desarrollador/diseñadora es mucho más conciso, y la diseñadora tiene el control del diseño al 100%. Conoce bien la maquetación web y sabe conjuntar lo que quiere el cliente y los requerimientos del diseño para los diferentes monitores.  

Conclusiones diseñador

Sería caer en un error pensar que un tipo de diseñador es mejor que otro. Cada fase del proyecto necesita un tipo de diseñador.

Al iniciar un proyecto, se necesita recortar gastos debido a la inversión inicial elevada que se hace. Además, los inicios necesitan ilusión y ganas. Un diseñador junior puede proporcionar todo eso.

Una vez el proyecto está en marcha, un diseñador senior a tiempo parcial puede ser una gran opción. Se tiene conocimiento avanzado a un coste mínimo.

Por último, cuando el proyecto está maduro y disfruta de cierto éxito, se puede invertir beneficios en un diseñador contrastado y que aporte un nivel más a la web.

El desarrollador

Un poco de historia

Un servidor. Sin finalizar la ET Informática de Gestión por motivos familiares, empecé a estudiar Grado Multimedia en la UOC para poder estar al día en mi trabajo.

Desde muy joven, y después de pasar por diversas empresas de diferentes sectores empecé en una academia privada de formación enseñando ofimática a mis alumnos.

Posteriormente, y ya con estudios avanzados, empecé a trabajar en una pequeña empresa que alternaba un taller informático con el soporte de software. Y aquí surgió la oportunidad de ofrecer a los clientes la creación de páginas web.

Al cabo de un tiempo, cambié de empresa para llevar personalmente el departamento web. Fue aquí donde aprendí y cogí experiencia. Hablar con el cliente, reuniones con proveedores, trabajo con diversos diseñadores a la vez, caídas de servidores… y un larguísimo etcétera.

Pasado unos años, en el 2007, decidí ponerme por mi cuenta. Si, situación más que complicada. ¿Os acordáis cómo empezó la crisis económica? Pues por aquella época, ponerte por tu cuenta era peligroso y de osados. En ocasiones tienes que dar pasos hacia delante y arriesgar.

Actualmente soy autónomo, estoy asociado con un compañero que también ha estudiado Grado Multimedia en la UOC, y afrontamos un futuro de mucho trabajo.

Conocimientos

Durante todos estos años he ido creciendo profesionalmente junto a Internet. Recuerdo que cuando empecé era una locura pensar que podías adquirir un servidor dedicado y ni siquiera existían, o no conocíamos, los servidores virtuales como actualmente existían.

Técnicamente, en la Universidad Rovira i Virgili fue la que me abrió este mundo. Recuerdo que fue una asignatura de tercero la que hizo que definitivamente que me enamorara de la programación, sino lo estaba ya. La asignatura en cuestión se llamaba Programación avanzada y aprendías a programar en diferentes formas: orientada a objetos (java, ADA,..), lógico (Prolog), Estructurada (C),... fue maravilloso. En un solo semestre desarrollamos en 7 u 8 lenguajes de programación.

A partir de ahí los conocimientos en lenguajes de programación fueron creciendo:

Java y Struts

C, ADA, Smalltalk, Haskell, Prolog…

ASP, JSP y PHP

Javascript

Pero no se quedó aquí el progreso. El trabajo me obligó a seguir creciendo como profesional y empecé a conocer otros temas:

FramweWorks PHP: CodeIgniter y Zend.

FrameWork Javascript: jQuery y angularJS.

FrameWor CSS: Bootstrap, GroundWork CSS y Foundation.

En cuanto a proveedores de servicios de Internet, son muchas las empresas con las que he trabajado. La conclusión es sencilla, debes quedarte con la menos mala. El periplo ha sido horrible. Si la atención era buena, los servicios eran horribles. Si los servicios cumplían, la atención era horrible. Así hasta 10 diferentes proveedores a nivel nacional. Por poner un ejemplo, en una de las empresas que trabajé, hasta dos días sin web ni correo electrónico se dejó a los clientes por culpa del proveedor. ¿Os dais una idea de qué es gestionar más de 60 clientes desilusionados y molestos por el servicio? Fue la peor época, pero la que más aprendí.

La administración de alojamientos y servidores, se convirtió en el día a día. Copias de seguridad, servicios de seguridad, certificados de seguridad, conexión por SSH,... Plesk o cPanel se volvieron herramientas que aprendí a utilizar.

Experiencia

La experiencia en todos estos años me han proporcionado varios puntos a tener en cuenta:

Hay que estar continuamente formándose. Salen nuevas tendencias de diseño, nuevos frameworks de programación mucho más eficientes. En este sector hay que estar al día (fue mi principal razón para matricularme en la UOC).

Al cliente hay que darle un producto diferenciado. Un servicio que otros no den. Es muy difícil cuando los clientes no conocen tu trabajo. En este sentido 1&1 y Telefónica han hecho mucho daño: hacer una web, cuesta sólo 15 minutos…

Los socios. Es importante saber con quién y con cuántos te asocias. Buscar unos buenos compañeros en un negocio es importante, pero a la vez, muy difícil. 

El proveedor de Internet es uno de los puntos más importante, es tu base. Cuando me puse por mi cuenta, tenía claro con qué proveedor trabajar. Y ese punto fue la base de mi trabajo. Puedo ofrecer un buen servicio, porque tengo un buen proveedor detrás.

Servicios externos

A lo largo del proyecto son varios los servicios externos que hay que contratar. La política siempre ha sido que todo lo que pudiéramos hacer los implicados en el proyecto, lo haríamos y formaría parte del proyecto.

El externalizar servicio crea dependencia y un coste periódico. Hay que evitar externalizar por comodidad, sólo lo imprescindible.

Pasarela de pago

El primer método de pago escogido es la pasarela de pago bancaria. Al ser un proyecto realizado a medida, la pasarela debía ser creada desde cero. Para ello fue necesario contactar con el departamento de informática del banco con el que trabajamos.

Aunque ahora son la mayoría de bancos los que están sobradamente preparados para facilitar el pago por sus pasarelas, antes no era así.

Como el cliente trabajaba con varios bancos, muy común en las medianas empresas, tuvimos que contactar con diferentes departamentos para saber cuál de ellos escoger. Fue el soporte lo que decantó escoger uno u otro.

A partir de ahí, nos facilitaron código ejemplo en PHP y los datos de configuración. A partir de ese código facilitado, lo adaptamos al framework CodeIgniter.

El proceso de puesta en marcha es el siguiente:

Una vez la web está creada, se contrata el servicio de TPV online del banco. Parece una obvio, pero el banco para poner en marcha la pasarela, antes debe confirmar que dispones de la web y que los pagos serán con ese fin.

Una vez puesta en marcha, debe configurarse la librería con datos del servidor de pruebas.

Se hacen las pruebas sobre el servidor de pruebas del banco.

Una vez las pruebas se confirman que han sido satisfactorias, se procede a activar el TPV de producción y a cambiar los datos de configuración para que contacte con él.

PayPal

El segundo método de pago es Paypal. Aquí está todo más automatizado. Se da de alta al negocio en PayPal, que proporciona código ejemplo que debe adaptarse al framework utilizado y los datos de configuración. En esta ocasión la puesta en marcha fue mucho más sencillo.

Todo el soporte es vía email y mensualmente se reciben las actualizaciones que se van implantando en PayPal.

El último es el cambio de TLS a la versión 1.2 y a HTTP 1.1. Para este cambio se tuvo que buscar información al respecto, y verificar que el servidor donde está alojado el proyecto, acepta la comunicación mediante este protocolo . 

Chat online

El administrador de la tienda online necesita una comunicación con el cliente de todas las maneras disponibles. Están los medios convencionales como el teléfono y el email. Pero hay otro servicio de comunicación muy útil que es el chat online. 

Viendo cómo evolucionaba la competencia, se pudo apreciar que ofrecían un servicio de chat online que daba la posibilidad al usuario hacer preguntas mientras compraba. Se daba la posibilidad de sacar de dudas a los clientes en el momento de la compra.

Se decidió contratar el servicio de chat con un coste anual que está más que amortizado. Los clientes contactan asiduamente y se resuelven cantidad de dudas.

Que el cliente esté comprando y tenga la posibilidad de contactar directamente con el administrador de la tienda para hacer preguntas, es ideal. No cuesta nada, es rápido, admite preguntas cortas como la disponibilidad de stock, colores o simplemente para preguntar horario en los que se puede visitar la tienda física.

El soporte que ofrece este servicio se hace mediante email y, de momento, no se ha utilizado nunca.

Confianza online

Los sellos de confianza, proporcionan al cliente un motivo más de seguridad a la hora de comprar. Después de informarnos, decidimos apostar por el sello que proporciona la compañía Confianza Online. Como desarrollador me puse en contacto con Confianza Online para poder ser proveedor y proporcionar a mis clientes el sello. Lo primero que me comentaron es que yo mismo debía poner el sello de Confianza online en mi web y que debía pagar el coste anual… aquí paré. Solo empezar ya me comportaba un gasto.

Decidí poner en contacto directamente a los clientes con Confianza Online, y así fue. Los pasos fueron:

1. El cliente contactó con Confianza online y les comentó el interés por tener el sello.

2. Revisaron la web y marcaron los puntos a cambiar, sobretodo textos legales y añadir puntos importantes como los pasos a seguir en caso de devolución, la localización, horario y persona de contacto por si algo iba mal…

3. Proporcionan el sello que pones en la web

cada X tiempo vuelven a revisar la web para ver si cumple con lo estipulado en cuanto a calidad y servicio, y te renuevan el sello una vez pasas por caja.

Un sello que puede hacer decidir a un cliente el comprar o salir de la web. Además, puede decantar que un cliente compre en una tienda u otra.

Proveedores de servicios online

Es vital. Debe ofrecerse servicios de correo electrónico, alojamiento web, servidores dedicados o virtuales, registro de dominios… pero sobretodo, y más importante, tener muy buen soporte.

Problemas con los proveedores se va a tener. Es como las empresas de telefonía o energías, que más tarde o temprano tienes problemas. Pues bien, llegado ese punto, que te resuelvan el problema rápido es de vital importancia, y más cuando lo que estás vendiendo a tus clientes es un buen servicio.

Pero un proveedor de Internet es como el de telefonía, unos hablan muy bien y otros lo dejan por los suelos. El grado de satisfacción es proporcional a los problemas y las resoluciones que te hayan proporcionado a los mismos.

En mi caso, y vuelvo a incidir que después de probar múltiples proveedores, escogí Nominalia. Una empresa perteneciente al grupo Dada. En todo el tiempo que llevo con ellos, no he tenido ni un solo problema serio, y alguno poco serio que me solucionaron.

Tengo contratado con ellos unos 100 dominios con sus respectivo servicio de correo electrónico. Según el tipo de cliente y web que se le ha creado, se le proporciona un alojamiento compartido, uno en alguno de nuestros servidores virtuales o directamente un servidor dedicado como es el caso de Corbeto’s Boots.

En cuanto a este proyecto, tenemos contratado un segundo servidor dedicado (ya tuvimos uno anteriormente que decidimos cambiar), varios dominios, certificado de seguridad, correos electrónicos y un servicio de seguridad llamado SiteLock que más adelante se detalla.

Nominalia, asigna un comercial que sugiere o facilita el trabajo en caso de tener problemas. Dicho de otra manera, pone una persona de contacto que, en la mayoría de casos, es de agradecer.

También disponen de un teléfono de contacto gratuito dónde responde una centralita y que asigna un operador para solucionar el posible problema.

Por último, y el más utilizado, un servicio de tickets online para hacer seguimientos a los problemas o dudas. Lo más habitual es dejar constancia de la notificación de problemas y poder hacer un seguimiento online. 

SiteLock

Una vez una tienda online llega a unos objetivos iniciales de ventas y clientes, empiezan las preocupaciones por la seguridad. Antes también, pero una vez ves que el proyecto crece, la preocupación crece también. La probabilidad de ataque es todavía más elevada.

Buscando soluciones para prevenir de posibles ataques, nuestro proveedor nos ofrece una solución que consiste en la detección y eliminación de malware en el servidor y firewall entre otros. Aunque es un servicio externo que ofrece nuestro proveedor, normalmente contactamos con nuestro proveedor para que sean ellos los que se comuniquen con la empresa que proporciona este servicio.

La protección consiste en servicios como:

Escaneo de malware en el servidor

Escaneo de spam

Análisis y defensa delante de ataques de  inyección SQL

Análisis de ataques XSS

Análisis de posibles agujeros de seguridad al software

Escaneo de datos SSL que se haga correctamente 

Firewall

Ilustración 5: SiteLock - Servicio seguridad web

ASPECTOS  TÉCNICOS

Herramientas de desarrollo

Hardware

Durante los años que dura el proyecto, he utilizado tres Pc’s diferentes según las necesidades que me imponía el trabajo. Inicialmente trabajaba con un PC’s con las siguientes especificaciones:

Sistema operativo: Ubuntu

4GB de memoria RAM

HDD de 500GB

Monitor de 22 pulgadas

Disco duro externo para copias de seguridad, compuesto por un disco duro SATA de 500GB normal que se conectaba a un componente que lo convertía en externo.

Posteriormente, debido a que trabajaba en un local y en mi casa, llevó a que debiera adquirir un portátil. Los requerimientos eran:

Sistema operativo: Ubuntu

4GB de memoria RAM

HDD de 500GB

Monitor de 15,6 pulgadas

Las copias las hacía en Pendrives de 64GB.

Por último, y es el que utilizo hace tres años, un PC con las siguientes especificaciones:

Sistema operativo: Debian

8GB de memoria RAM

HDD de 1TB

Dos monitores de 22 pulgadas

Un disco duro externo de 1TB de la marca WD.

Como puede apreciarse, para el desarrollo web no hace falta mucha máquina. Editores, servidores web como XAMPP y editores gráficos como GIMP funcionan en hardware básico. Debido a la gran cantidad de contenidos, actualmente necesito un disco duro con mas capacidad y uno externo para las copias de seguridad.

Por último, trabajar con dos monitores es casi obligatorio. Una buena gestión de espacio a la hora de trabajar es importe.

Sistema operativo

Como he indicado en el apartado anterior, he utilizado dos sistemas operativos en los dispositivos de desarrollo:

Inicialmente trabajaba con el sistema operativo GNU/Linux Ubuntu y actualmente migré al sistema operativo GNU/Linux Debian. Por un lado, hace años que utilizo Linux y no cambio. Por otro lado, las licencias. La mayoría de software que utilizo en el desarrollo es gratuito y de libre distribución. Muchas empresas utilizan Windows. Esto les obliga a afrontar un gran coste en licencias, o como una gran mayoría, utilizan software pirata. Tener un Sistema operativo pirata en el desarrollo de páginas web es un peligro.

Si bien inicialmente me sentía cómodo con Ubuntu, un día decidí cambiar a Debian. No me arrepiento. Si bien Ubuntu está mucho más preparado para el usuario final, si tienes un mínimo de conocimientos Linux, puedes utilizar Debian y entrar en otra filosofía en cuanto a software.

Edición de código

El proyecto está desarrollado con el FrameWork CodeIgniter y consecuentemente, necesitamos un editor de PHP. Después de buscar y mirar la opinión de muchos internautas, he llegado a utilizar dos editores:

Aptana

Fue el primer editor que utilicé. Venía influenciado por Eclipse que utilizaba en la Facultad para editar código en diferentes lenguajes, entre ellos Java.

Es un editor genial, pero para mi gusto y necesidades, demasiado pesado y potente. Llegó un momento que me vi en la obligación de buscar otra solución más liviana, pero igual de potente.

Netbeans

Después de Aptana, tenía claro las especificaciones que debía tener el editor. Debía ser multiplataforma, tener reconocimiento de código PHP y administrador de proyectos. Estos tres requerimientos eran los mínimos.

En diferentes foros y comentandolo con varios compañeros, surgieron diferentes opciones: Sublime Text, Notepad++, Brackets o Netbeans. De todos ellos, después de buscar mucha información, me quedé con el que creía más sencillo: Netbeans. Fue sencillo hacerme con él y migrar mis proyectos a este nuevo editor.

Actualmente, Netbeans ha añadido plugins que facilitan el trabajo de este editor con el FrameWork CodeIgniter. Con el plugin nb-ci-plugin puedes trabajar de forma mucho más integrada con este framework. Estoy seguro que para la mayoría de editores potentes, existen plugins para poder integrar el FrameWork con el que se trabaja.

Edición gráfica

En el trabajo y por tanto en el proyecto, tengo claro que no puedo permitirme pagar la licencia de Adobe Photoshop. Es un coste que debo evitar. Pero hay un software que cumple sobradamente con las necesidades en el desarrollo de cualquier web o aplicación web, GIMP.

Las principales funciones a las que nos enfrentamos en la edición de imágenes para las webs son:

Optimización imagen para web

El equilibrio entre peso y calidad es importante en la maquetación web. La velocidad de carga de una página es muy importante, pero mostrar los productos de forma atractiva también lo es. Al igual que Photoshop, GIMP te permite optimizar el peso de la imagen teniendo en cuenta su calidad.

Formatos

Los formatos más utilizados, JPG y PNG son ampliamente soportados por GIMP. Los ratios de compresión llegan al nivel de otros editores gráficos.

Cambio de tamaño

El cliente te proporciona las fotos recién salidas de la máquina de fotografiar. No nos engañemos, no tienen ni idea qué calidad están utilizando, ni formatos… ni nada. Saben que la cámara está en Auto y disparan. Con suerte, las pasan a un Pendrive, o lo que es más usual, te traen la cámara.

Por este motivo, el editor gráfico debe permitir reducir en tamaño y resolución de las fotografías.

Filtros

En pocas ocasiones, pero debe tenerse en cuenta, la posibilidad de aplicar filtros a las imágenes. Normalmente en banners, fotografías en carruseles...

Edición gráfica

Trabajar con capas, transparencias, lazos, cortar… GIMP es un editor que trabaja con herramientas muy potentes y suficientes para cubrir las necesidades del desarrollo de páginas web.

Copias de seguridad

Las copias de seguridad, al ser un proyecto fácilmente estructurable, las copias de seguridad son muy sencillas. Comprimiendo la carpeta donde se desarrolla es suficiente. Ahora bien, la monotonía puede hacer que que las copias de seguridad, pasen a segundo plano.

En el proyecto se utiliza un script que comprime toda la carpeta de proyectos, entre ellos Corbeto’s Boots, en formato 7Z. Es el formato que más ratio de compresión consigue.

Hay dos puntos importantes en las copias de seguridad:

Marcarse un calendario de copias

Almacenar las copias en sitios diferentes, accesibles y seguros.

En este proyecto, se hacen las copias al finalizar el día, en el caso de haber realizado cambios. Éstas se almacenan en el mismo PC como proyecto, en un disco duro externo y por último en una carpeta online en Dropbox que se sincroniza automáticamente.

Si importante son estos dos puntos, no lo es menos algo que todo el mundo obvia: una vez se hace copia de seguridad, confirma que ésta contiene la información correcta, y que ésta puede recuperarse en caso necesario.

A continuación veremos los dos scripts utilizados para la creación de las copias de seguridad:

Script bash para la copia de seguridad de la Base de datos

Fichero: backup-bd.sh

#!/bin/bash

FECHA=$(date +"%m-%d-%Y")

#BASE DE DATOS

# Hacemos copia de la base de datos con mysqldump

mysqldump --opt --password=contraseña --user=usuario basedatos > /home/bd-$FECHA.sql

# Se comprime a 7z protegido con contraseña

7z a -t7z /home/bd-$FECHA.7z /home/bd-$FECHA.sql -mx9 -PContraseña

# Se elimina el fichero .sql

rm /home/bd-$FECHA.sql

exit

De esta manera tenemos una copia de la base de datos comprimida y protegida, nombrada con la fecha.

Script bash para la copia de seguridad de la Base de datos

Fichero: backup-web.sh

#!/bin/bash

FECHA=$(date +"%m-%d-%Y")

#WEB Y LOGS

# Se comprime la carpeta donde está alojada la web

7z a -t7z /home/web-$FECHA.7z /var/www/vhosts/carpetaweb -mx9 -pContraseña

exit

De esta manera tenemos una copia de la web comprimida y protegida, nombrada con la fecha.

Conexiones

FileZilla

Software FTP que se utiliza para realizar las subidas de ficheros. Dispone de multitud de opciones diferentes a la hora de sincronizar los ficheros con el servidor. Permite la descarga de varios ficheros a la vez y diferentes opciones de actualización tratándose por colas de fichero a subir o bajar.

Putty

Software para conectar vía SSH con el servidor. Utilizado para ejecutar diferentes scripts instalados en el servidor y que automatizan y facilitan diferentes tareas como:

Creación de copias de seguridad.

Cambio de permisos de carpetas.

Diferentes órdenes para saber estado servidor.

...

Control de versiones

En este proyecto no tiene mucho sentido instalar ningún software de control de versiones. Solo interviene un desarrollador y la estructura del proyecto es sencilla. El control se realiza por fichero.

Ejemplo:

producto_view.php (fichero en desarrollo)

producto_view-old-2016-09-01.php

producto_view-old-2016-08-01.php

...

Se guardan las últimas versiones y el resto se va almacenando en una carpeta llamada old.

Con este formato y las copias de seguridad, siempre se puede recuperar cualquier código.

En cuanto a la actualización de la web en producción con nuevas versiones, siempre se renombra los ficheros en el servidor para tenerlos disponibles en el caso que algo vaya mal.

Herramientas en producción

Hardware

El proyecto ha estado en marcha en dos servidores diferentes. Los dos proporcionados por el proveedor Nominalia y siempre ajustándose a las necesidades que se requería. La vida del proyecto la tenemos estimada en 4 años máximo. Es importante, por política, cada 4 años máximo hacemos cambio de servidor. Intentamos evitar así posibles fallos por el factor antigüedad.

Con esta filosofía de cambio de servidor, conseguimos dos cosas:

Evitamos posibles errores, sobretodo de disco duro, con antelación.

Cada 3-4 años disponemos de un servidor más potente, y normalmente al mismo o mejor precio.

Las especificaciones del servidor actual es:

SERVER DELL DUAL 3220

CPU

 i3-3220

Memòria

 8 GB 1333 MHZ

Disc

 1 TB

Sistema Operatiu

 Ubuntu 12.04.5 LTS  

Raid

 1

Penell de gestió

 Plesk

Ample de banda

 100MBbit/s

Tràfic

 Ilimitat

Adreces IPv4

 2

Adreces IPv6

 2

Como se puede observar, el sistema operativo es Ubuntu. Cómo desarrollaba en Ubuntu, pensé que tener Ubuntu servidor en el servidor, facilita la implantación de la tienda en el servidor, evitando posibles errores. El próximo servidor dispondrá del servidor con sistema operativo CentOS como tengo implementado en otros servidores. CentOs supera a otros sistemas operativos en servidores web. Está mucho más optimizado consiguiendo mucho mejor rendimiento.

El servidor dispone de dos discos de 500GB, haciendo un total de 1TB: Dispone del sistema RAID1 que consiste en tener dos discos,  en el primero de los cuales está la web, y en el otro dónde está la réplica. En el caso de tener problemas en el primer disco, el servidor saltaría al segundo.

Que haya tráfico ilimitado es importante. En alojamientos compartidos, te asignan unas características, y si las sobrepasas, el servidor no muestra la web. Es el caso del tráfico, dónde te asignan un tope de 1TB por mes, y si lo superas, la web deja de verse hasta finalizar el mes.

Software

Plesk

Para administrar el servidor del proyecto, siempre he utilizado Plesk, de Parallels. Dispone de todas las opciones necesarias para administrar un servidor, que van desde la creación de los espacios web, creación de base de datos, administración de ficheros, configuración de seguridad…

Hay otras opciones como cPanel, pero hasta hace poco sólo conocía Plesk por lo que optaba por él. El problema es el coste por licencia. Normalmente, debes contratar una licencia que permite administrar X dominios. Para el proyecto, compré la licencia para poder administrar 10 dominios, que es lo mínimo.

También hay disponible una versión para móvil o tablet que vigila todo el trabajo del servidor, alertando de cualquier anomalía. Es un punto muy a tener en cuenta a la hora de tenerlo todo controlado.

SiteLock

SiteLock es una solución de seguridad para servidores web. Es de fácil instalación y proporciona una seguridad añadida. Lo hemos comprobado en dos ocasiones en las que hemos sufrido ataques DDOS provenientes de EEUU, en las que ha conseguido pararlo sin que el servidor sufriera una caída.

Esta solución de protección te proporciona un panel desde el que puedes administrar el Firewall y ver las diferentes alertas que monitorizan tu estado en internet. La instalación es sencilla:

Te dan de alta en el servicio, cambias tus DNS por los que indican para que todos los datos pasen por sus servidores, y listos. A partir de aquí debes hacer un seguimiento de posibles amenazas o ataques.

Por último, te proporcionan un sello de seguridad que puedes poner en tu web para dar a conocer a tus clientes que estás protegido.

Estadísticas – Google Analytics

Google gestiona casi la totalidad de búsquedas en España. Aunque los servicios de hosting proporcionan servicios de estadísticas propios que vienen ya preparados, como es el caso de Awstats, la herramienta Google Analytics proporciona mejores herramientas y actualizaciones que se adaptan a las exigencias del buscador Google.

Corbeto’s Boots dispone de una cuanta gmail propia, de la que ponemos en marcha todos los servicios de Google que disponemos: Google Analytics, Search Console, Adwords, Gmail y Google Drive.

Para la puesta en marcha de Google Analytics, seguimos los pasos indicados:

Se da de alta la página en Analytics

Demuestras que la página web es tuya.

Para demostrar la propiedad, se sube al hosting un fichero que genera Google Analytics y avisas a Analytics que está subido.

Una vez Analytics comprueba que la web es de propiedad, empieza a recoger datos durante mínimo 1 día, mientras no se ven estadísticas.

Pasado un día, las estadísticas ya se muestran y pueden configurarse o poner en marcha diferentes servicios que Analytics proporciona.

Ilustración 6: Google Analytics - Corbeto's Boots

Seguridad

La seguridad que se ha establecido en la tienda online, está dividida en tres secciones:

Seguridad en el desarrollo

A la hora de desarrollar la tienda debe seguirse unos parámetros que ofrezcan la máxima seguridad posible. El aprovechamiento de agujeros son los casos más habituales de ataques.

El ejemplo clásico es el de los permisos de ficheros (644) y las carpetas (755). Si no se ponen los permisos correctos a carpetas y ficheros, puede ser aprovechado por hackers para acceder a nuestro servidor.

Otro caso muy aprovechado por los atacantes es tener carpetas que se listan o que se puede acceder para listar los contenidos. Para solucionar este problema, se puede subir un fichero index.html en cada carpeta, aunque éste esté vacío, y se evita que se pueda acceder a la carpeta para listar los contenidos. Las carpetas de fotos, de librerías…. En todas, debe ponerse un fichero index.html

Otro ejemplo más concreto de seguridad en el desarrollo, es evitar el envío de información maliciosa mediante formularios. Si no se vigila, se puede aprovechar para realizar ataques XSS (Cross-site scripting) contra la web. Para evitarlo, con el Framework CodeIgniter, se hace activando la protección asignada a tal efecto. Se puede hacer de dos maneras:

Desde el fichero de configuración del FrameWork, asignando un buleano positivo a la variable global_xss_filtering. De esta manera, todos los formularios serán revisados para evitar ataques: 

$config[‘global_xss_filtering’] = TRUE;

La otra manera, se realiza a la hora de recibir la información en el controlador del framework:

$this->input->post(‘nom’, TRUE); // Hace limpieza XSS

$this->input->post(‘cognoms’, FALSE); // No hace limpieza XSS

$this->input->post(array(‘nom’, ‘cognoms’), TRUE); // Hace limpieza XSS

Si utilizamos True, se limpia para evitar ataque. Si utilizamos False, no se limpia. Por defecto se utilizará el que se marque en la variable global que hemos indicado anteriormente.

Seguridad en el servidor

Debe procederse a configurar las variables del servidor como el nivel de seguridad a la hora de pedir las contraseñas, los módulos a utilizar, certificados de seguridad, perfiles de usuario...

Debe optimizarse la configuración del servidor a las necesidades del proyecto:

No tener activados módulos del servidor que no se utilicen.

No tener puertos abiertos que no sean estrictamente necesarios.

Intentar minimizar el acceso el acceso al servidor a IP’s concretas.

Revisar todos los ficheros de configuración del servidor para limitar siempre que se pueda los accesos, los permisos...

Actualizar servidor Apache, MySql y software de configuración del servidor (Plesk).

Revisar constantemente los logs para saber qué pasa en nuestro servidor, tanto los logs de acceso como los de errores.

Seguridad externa

Se decidió y de forma muy conveniente, la necesidad de contratar un servicio externo de seguridad, En este caso, SiteLock Premium Https. Este servicio facilita las siguientes tareas:

Escaneo de malware en el servidor.

Escaneo de spam.

Análisis y defensa delante de ataques de inyección SQL.

Análisis de ataques XSS.

Análisis de posibles agujeros de seguridad en el software.

Escaneo de datos SSL que se haga correctamente. 

Firewall

Este último, el firewall es el que ha salvado de forma indiscutible un ataque que se recibió desde los EEUU y que pudo frenar. Evitó las visitas desde ese país sin afectar al resto y evitando que el servidor quedara fuera de servicio.

Control de Logs

Controlar los logs del servidor es muy importante. Delante de cualquier aumento significativo de visitas, por ejemplo que se cuadruplique las visitas de golpe, debe empezar a sospecharse. Para poder investigar, es importante los logs que el servidor facilite. Para centrarnos en posibles ataques, nos fijaremos en los logs de acceso.

Servidor de emails por separado

Tener en el mismo servidor el servicio de email es muy peligroso. Los emails son una fuente constante de problemas: spam, mala utilización de envíos masivos, virus en los PC’s de los usuarios que saturen el servidor...

Por tanto, se decidió tener por una parte el servidor web, y por otra separada, el servidor de emails. Un servidor no afectará al otro. 

Contraseñas fuertes

La utilización de contraseñas fuertes en todos los servicios es obligatoria: FTP, SSH... Además, la contraseña deberá cambiarse cada cierto periodo de tiempo. 

En el momento de recibir ataques, es importante cambiarlas de nuevo. Haya afectado o no al servidor (hayan entrado o no).

Las tácticas a lao hora de crear contraseñas seguras deberían ser:

Utilizar mayúsculas y minúsculas, números y caracteres especiales como -,&,_

Contraseñas con un mínimo de 8 caracteres

Huir de contraseñas demasiado evidentes: trescomatres01, minombre01...

Copias de seguridad

Las copias de seguridad se administran manualmente para tener más control. Se podría contratar servicios externos de copias automáticas y que almacenaran un espacio FTP externo, o también utilizar herramientas como Bacula 2 para hacer copias.

Pero si se quiere control absoluto, se hacen manualmente creando dos scripts bash en Linux que se ejecutan mediante la programación del cron, y que por las noches hacen copias de la base de datos y de los ficheros del web.

Las copias de seguridad se hacen totales. Se decidió que si pasaba algo, se recuperara todo de golpe.

Estos scripts ejecutan el software 7z que comprime el resultado, añadiendo una contraseña para obligar a ponerla si se quiere acceder a la copia.

Certificado de seguridad

En nuestro caso, se decidió contratar un certificado de seguridad Thawtte llamado Webserver.

Este certificado realiza dos tareas importantes:

Certifica que la web pertenece a Corbeto’s Boots

Encripta la información que circula entre el servidor y el usuario

El alta de este servicio va seguido de unos pasos que en términos generales, serían estos:

Se crea el fichero .csr en el servidor rellenando los datos que se piden.

Se envía a Thawtte contratando el tipo de certificado deseado

Thawtte se pone en contacto con el propietario de la web y pide información relativa al comercio para certificar que todo está en regla.

Si todo es correcto, Thawtte facilita el certificado en forma de fichero que es necesario para acabar el proceso de instalación en el servidor.

Por último, una vez instalado debe asignarse el certificado al dominio deseado.

Según el panel de administración del servidor, Plesk o cPanel, el proceso es diferente, pero se ajusta a los pasos anteriormente comentados.

Es mas el tiempo burocrático de ponerlo todo en marcha, que la dificultad de hacerlo.

EL FRONT-END

FrameWorks php

Antes de empezar el proyecto, debía decidirse qué FrameWork PHP utilizar. En aquella época habían tres que sonaban fuerte: Zend, CodeIgniter y Simfony. Una vez investigados, decidí escoger CodeIgniter por la curva de aprendizaje. Cuando no dispones de tiempo, debe escogerse un framework de fácil aprendizaje para poder ponerse en marcha lo más rápido posible.

La curva de aprendizaje fue importante, pero no lo único. Detrás de cualquier framework a utilizar, debe haber una buena comunidad que la respalde, una buena documentación y la percepción que ese framework irá creciendo a lo largo del tiempo.

CodeIgniter cumple con todos estos puntos. Desde que empecé con versiones 1.X, a día de hoy se ha ido actualizando hasta llegar a la versión 3.1.4 aportando novedades constantemente.

Proporciona todas las opciones necesarias para llevar a cabo un proyecto de tienda online:

Programación modelo-vista-controlador.

Dispone de multitud de librerías que facilitan el trabajo (helpers).

Puedes añadir librerías de terceros de forma separada.

Dispone de sistemas de seguridad para evitar diferentes tipos de ataques (XSS).

Posibilidad de modificar algunas funciones del core, pero sin la necesidad de modificar el core (hooks).

Sistemas de caché. Posibilidad de trabajar con caché para optimizar según qué páginas.

Administración de sesiones.

Librería que facilita la exportación a ficheros CSV.

Tratamiento de compresión de ficheros.

...

De fácil instalación. Se copia la carpeta del framework en la carpeta pública del servidor. Se configura el fichero config.php con las opciones generales de la aplicación, el fichero database.php con los datos de conexión a la base de datos. A partir de aquí, a desarrollar la aplicación.

FrameWork CSS

Mientras un FrameWork PHP es normal mantenerlo durante mucho tiempo, un FrameWork CSS es mucho más difícil que se use durante un largo periodo de tiempo. Hay muchas opciones, y escoger una es complicado. Bootstrap, Foundation, Pure.css, Blueprint…

Cuando se empezó el proyecto era más fácil escoger. Los FrameWorks CSS empezaban a asomarse seriamente y pocos de ellos lo hacían de forma estable y segura, al menos para utilizarlas en proyectos como tiendas online. Por aquel entonces GroundWork CSS era uno de los mas potentes. Viendo todo lo que ofrecía, era de los más utilizados. En la actualidad, Foundation es el FrameWork sobre el que corre Corbeto’s Boots.

GroundWork CSS

Cómo la mayoría de FrameWorks CSS, Groundwork dispone de funciones de Grid, de estilo, de control y de navegación. La última versión está preparada para adaptarse a Ruby. Fue el primer Framework utilizado, pero en nuestra opinión, hay otros que actualmente lo superan.

Foundation

Aunque inicialmente, Bootstrap era la opción que más puntos tenía para utilizar en el último cambio de diseño, las especificaciones y la potencia de Foundation, hicieron que se escogiera éste último para su uso. Funciones de estilo, control, navegación, containers, media y la posibilidad de aplicar plugins decantaron claramente la balanza hacia esta opción.

De fácil instalación, abre una infinidad de posibilidades a aplicar en cualquier aplicación o web. Desplegables, ventanas Modal, botones, menús, formularios personalizados, iconos… y un largo etcétera que permite mejorar la funcionalidad y navegación al usuario de la tienda o aplicación.

Foundation dispone de tres versiones, una para web, otra para correos electrónicos y la última para aplicaciones. Nos centraremos en la primera que es la implementada en la tienda online.

Una de las ventajas de este FrameWork es que ha sido utilizado tanto para la vista web como para la móvil. Utilizar el mismo framework ha ahorrado muchísimo tiempo en aprendizaje, desarrollo y mantenimiento.

FrameWork Javascript

jQuery. Cuando la tienda online de Corbeto’s Boots empezó, jQuery en sus primeras versiones era la opción. No había FrameWork que le pudiera hacer sombra. Ofrecía además soluciones como jQuery UI o jQuery Mobile para centrarse en funciones más concretas.

Hasta la actualidad no se ha utilizado ningún framework más, debido a la gran comunidad que dispone, y sobretodo por la gran cantidad de plugins que soporta jquery. Puedes hacer casi el 100% de tareas que necesitas. Es más, muchos Frameworks CSS utilizan jQuery para algunas de sus funciones como desplegables, ventanas emergentes…

Actualmente estamos planteando la utilización del FrameWork Vue.js, pero no es fácil cambiarlo. Implicaría cambios muy importantes y por ahora se está aguantando. Una vez en producción, los cambios normalmente deben venir precedidos de una necesidad clara.

Estructura web

La tienda online está estructurada en dos partes, el front-end y el back-end. Lo que inicialmente parece obvio, no lo es tanto.

La separación en nuestro caso es clara:

El ritmo del front-end es mucho más dinámico que el back-end. Modificaremos más veces el front-end que el back-end.

Muchas de las librerías utilizadas no coinciden. Por tanto, es preferible para un futuro separarlo e ir actualizando individualmente.

Pensando en un futuro, quizás por un gran éxito inicialmente no contemplado, debería utilizarse varios servidores. En previsión que esto pueda suceder, siempre es más adaptable si tienes las partes por separado.

Hay contenidos como las fotografías que deben ser accedidas por el front-end y el back-end. Por un lado, se sube las fotografías o banners, y por otro deben mostrarse en la web.

Front-End

CARPETA

COMENTARIO

360_x

Carpeta dónde se almacena los contenidos necesarios para la visión en 3d de productos.

application

Carpeta de CodeIgniter con el código necesario.

clipart-x

El contenido gráfico necesario en el diseño de la web.

css_x

Las hojas de estilo utilizadas en el proyecto.

js_x

Las librerías JavaScript utilizadas en el Front-End.

mobile_x

Los elementos gráficos para la vista móvil.

photos_x

Fotografías de los productos.

system_x

El core de CodeIgniter

uploader_x

Carpeta dónde está los contenidos que el administrador de la página sube (documentos PDF, banners…)

EL BACK-END

El back-end de la tienda es tratado como una aplicación diferente y separada del Front-end.

FrameWork php

Por los anteriores puntos expuestos sobre CodeIgniter, se decidió utilizar el mismo en el back-end. No hay ningún motivo por el que utilizar otro. Como se muestra en los puntos siguientes, adaptar el resto de frameworks a CodeIgniter se hace de forma sencilla y rápida.

Inicialmente se pensó en utilizar Zend o Symfony, pero se descartaron por entender que CodeIgniter tenía una curva de aprendizaje mucho más rápida. El segundo punto que decantó la balanza  fue la rapidez y sencillez a la hora de instalar el framework.

Por último, los requisitos necesarios para su uso. Con un PHP y MySql actuales, ya se puede utilizar CodeIgniter.

FrameWork Javascript/CSS

El panel de control de la tienda online debe ser diferente. No es una web que deba mostrarse a usuarios finales, es una zona de trabajo. Los datos se muestran por listados y la creación, modificación y eliminación de contenidos, debe ser clara y, en lo posible, rápida.

Con el objetivo de crear una zona de administración más eficiente, se decide utilizar Dojo Toolkit como FrameWork que contiene todo lo necesario para crear aplicaciones web. Dispone de funciones de lenguaje, componentes de interfaz de usuario, soporta AJAX...

La utilización de AJAX es esencial. Para la actualización de listados, envío de formularios de modificación o para conseguir los datos necesarios, se utilizará AJAX.

El parecido con aplicaciones de escritorio, facilitan que el usuario pueda adaptarse y aprender de forma rápida.

Método de trabajo

El método de trabajo está adaptado a las necesidades que el cliente proporcionó. Los pasos en la mayoría de apartados es:

Menú superior dónde buscar o crear nuevos registros.

Listado de registros mostrando los datos más importantes.

Al hacer doble clic sobre un registros, se abre una ventana emergente donde poder editar el registro.

Algunas de estas ventanas emergentes se cierran una vez se ha ejecutado la acción, y otras no se cierran esperando alguna acción más.

Y la mayoría de acciones, mediante AJAX.

Estructura del Back-End

Se detalla a continuación la estructura del back-end:

CARPETA

COMENTARIO

application

Carpeta de CodeIgniter con el código necesario.

clipart-x

El contenido gráfico necesario en el diseño de la web.

css_x

Las hojas de estilo utilizadas en el proyecto.

js_x

Las librerías JavaScript utilizadas en el Front-End.

fonts

Fonts dels textos utilitzats

system_x

El core de CodeIgniter

DECISIONES DEL PROYECTO

El listado de preguntas y respuestas que se detallan a continuación, no deben cogerse cómo referencia. Cada proyecto tiene sus preguntas y sus respuestas, si las respuestas son correctas, el proyecto será un éxito.

El cliente y la tienda

¿Cuánto tiempo a invertir en la web?

Gran parte del porcentaje de éxito de una web, vendrá indicado por el tiempo que el usuario le dedique a la tienda online. Una tienda online no es una extensión de la tienda física. Debe dedicarse mucho esfuerzo para poder sacar beneficios de una tienda, se puede afirmar, que una tienda online es tener otro negocio diferente. 

Nuestro cliente en concreto, Jordi Corbeto, no sólo prometió invertir tiempo, sino que aportaba 100% por la tienda online. Invertiría su tiempo o pondría a alguien encargado de la tienda online si fuera necesario.

En este proyecto concreto, la inversión en tiempo ha sido máxima.

¿Qué conocimientos mínimos debe tenerse para administrar una tienda online?

Administrar la tienda online, es sencillo. La parte administrativa está desarrollada a medida y se ajusta a las necesidades reales de la tienda. Con un par de horas de formación fue suficiente.

Para la optimización de la web es diferente. Cuando se añaden productos, deben añadirse fotografías, y éstas deben estar optimizadas. El administrador debe saber:

Editar fotografías para ponerlas en un tamaño determinado, ya establecidos y poder optimizarlas para conseguir el mejor equilibrio entre velocidad de carga y calidad de la foto.

Para el posicionamiento también debe explicarse cómo deben rellenar los campos a la hora de añadir productos, familias y categorías.

¿Se dispone de suficiente logística para responder a una posible demanda?

Se trataron muchos puntos para solucionar uno de los puntos más críticos en la venta online, la logística. Después de estudiarlo mucho, se llegó a estas decisiones:

Sólo se comercializaría productos que se tuvieran en stock. Aquí eliminamos el tiempo de espera y los errores de vender algo que no podamos ofrecer.

Se estudió muy bien el proceso de devolución. Siguiendo la ley, el cliente puede devolver en un plazo de 14 días su producto, por lo que la tienda debía estar preparada.

Después de negociar con varias empresas de transporte, se llegó a un acuerdo con la empresa que facilitaba el control de envíos según peso, tamaño y destino. Algunas ofrecían buenos precios, pero el control era imposible por la gran cantidad de rangos según pesos o dimensiones, otras eran demasiado caras. Se buscó el equilibrio y la facilidad de envíos al extranjero. 

¿Qué objetivos debe tener el desarrollo web?

Los objetivos del desarrollo son claros:

Actualización constante y sencilla.

Optimización en funcionalidad, navegabilidad y velocidad.

Dar herramientas suficientes al administrador para facilitarle sus tareas.

Adaptación a todas las plataformas posibles (tablets, web, móvil…)

Crear código y estructura de código de fácil mantenimiento.

Que el proceso de incorporación o entrega del proyecto a un nuevo desarrollador sea lo más sencilla posible.

Buscar la optimización en velocidad, funcionalidad y navegabilidad.

¿Hasta qué punto dejar al cliente influenciar en el trabajo?

Es un punto difícil. Tanto los clientes como los desarrolladores nos equivocamos en muchas de nuestras decisiones. En nuestro caso decidí que el cliente pudiera decidir temas del modelo de negocio, pero el tema técnico quedaba totalmente en mis manos.

En ocasiones, sobretodo en el uso de servicios externos, decide el cliente a partir de la opinión que le facilitaba. Un caso claro fue el uso del visor 3D de productos. Estudié las ventajas y desventajas y el cliente decidió finalmente contratarlo.

¿Cómo mantenerse en contacto con el cliente?

Lo ideal es tener contacto con el cliente, únicamente cuando sea necesario. En nuestro caso, la comunicación es mediante teléfono para casos puntuales, y Skype para reuniones en las que necesitamos más detalles.

La utilización de lenguaje menos técnico al cliente, es lo más difícil. ¿Cómo explicar al cliente las limitaciones técnicas al hacer alguna tarea? Aquí se depende totalmente de la fe o confianza del cliente.

¿Qué clase de dudas tienen los usuarios en términos técnicos?

Las dudas técnicas que tienen los usuarios son múltiples. La mayoría de ellas relacionadas con el tema económico.

La contratación de un servidor dedicado aporta unas prestaciones que no aportan otros. ¿Cómo se explica el coste adicional de su mantenimiento?

La contratación de un Firewall les suponen un coste anual, pero si el Firewall funciona correctamente, resulta que el cliente no lo ve.

¿Es lo mismo enfrentarse a un solo cliente, que a un grupo de clientes?

Es totalmente diferente. Si es sólo un cliente, al final desarrollador-clientes se conocen. Como desarrollador sabes cómo actuar y puedes intuir cómo debes encarar cada mejora o modificación.

En el caso de ser un grupo de clientes, es caótico. Debes nombrar a uno de ellos portavoz, y que entre ellos debatan qué solución debe implementarse en las modificaciones o mejoras. Lo más usual en grupos de clientes es que alguno de ellos no esté de acuerdo con el trabajo realizado.

Además, en los grupos de clientes, puede ser normal el que se incorporen de nuevos o se vayan algunos.

¿Cómo se comporta el cliente según el éxito conseguido?

El comportamiento dependerá de cada persona, pero por lo general, en el caso de éxito de la web, se transforma en más modificaciones o mejoras, el cliente querrá invertir en mas cambios.

Por el contrario, en el caso de no haber éxito, se pierde confianza porque el cliente no sabe si  el fracaso ha venido por la decisión de hacer esa mejora, o porque se ha desarrollado mal.

Dependiendo de la confianza y entendimiento con el cliente, el fracaso será sólo un paso atrás para dos adelante, o será unos días de conversaciones con desconfianza.

La ventaja al tener un cliente que tiene claro lo que quiere.

La ventaja es clara. Si el cliente sabe lo que quiere, se desarrolla y él asume la responsabilidad (siempre con la supervisión del desarrollador).

Por el contrario, si el cliente no sabe lo que quiere, será un continuo hacer, mostrar y rehacer. El cliente se acostumbra a que se desarrollen las mejoras o modificaciones, lo mira y decide qué hacer. Lo normal es que se trabaje el doble o el triple. En estos casos es obligatorio antes de empezar el desarrollo, sentarse y puntualizar que tareas debe hacer la tienda. Paso a paso y tarea a tarea. Y lo más importante, que quede por escrito. 

El cliente prefiere diferentes profesionales Freelance a una empresa grande.

La empresa grande proporciona todos los servicios unificados. Normalmente disponen de un contacto para cualquier cambio, mejora o problema. Los costes son elevados y los técnicos normalmente van cambiando a lo largo de la vida del proyecto. En nuestro caso, en 8 años no sería extraño haber tenido que hablar con 4 o 5 responsables diferentes. 

Los Freelance proporcionan un contacto más personal, normalmente están más localizables y la implicación con el proyecto suele ser mucho mayor que una empresa grande. Por contra, si el Freelance deja el proyecto, debe encontrarse otro que pueda relevarlo, y esa tarea no es fácil.

El desconocimiento del cliente hace que normalmente empiece con empresas medianas o grandes que le aporten todos los servicios y haya un soporte detrás. Conforme el cliente empieza a conocer el sector y tener claro lo que quiere, empiezan a buscar Freelance que les resuelvan los problemas con menos costes.

¿En qué puntos los conocimientos del cliente son importantes?

Sin puntos que parecen obvios, pero no lo son. En nuestro caso los puntos importantes son:

Manejo de la aplicación desarrollada.

Manejo y administración de emails.

Debe conocer su sector. Debe conocer todo sobre sus productos.

Idiomas. Si vendes internacionalmente, debes saber escribir y hablar inglés.

Otros puntos que marcan la diferencia:

Manejo de redes sociales.

Conocimientos de herramientas y puntos importantes para el posicionamiento web.

Manejo de editores de imágenes.

Conocimientos de fotografía.

Poder de negociación para conseguir buenos precios en pasarela de banco, transporte…

Buena comunicación

Ofertas y novedades. No siempre son lo que creemos.

Dos de los apartados más visitados en la web por los usuarios que la visitan para navegar por ella (no tienen claro qué comprar, o simplemente no han entrado a comprar). En estos apartados es importante poner correctamente lo que se indica. Puede caerse en el error de poner otro tipo de productos, que por el afán de quitárselos de encima, sin ser novedad ni estar en oferta. Dicho de otra manera, se está engañando al cliente de la tienda. 

Si hay productos que debemos acabar el stock por cualquier motivo, debe plantearse de hacer una nueva sección estilo “Outlet” para venderlos. Es fácil optar por ponerlos en oferta, sin tener una rebaja real de precios. Esto puede llevar a desconfianza el cliente y en consecuencia, pérdida en número de ventas.

En nuestro caso, y siguiendo la filosofía del negocio, los productos que se muestran como novedad u oferta, si lo son.

Además, están debidamente marcados en los listados y ficha del producto.

Tipos de usuario que tiene la tienda online.

En nuestro caso, los usuarios están acorde con los productos. Son muy peculiares y concretos. Son clientes que quieren comprar productos muy específicos del mundo del country, estética americana o moteros. Además entidades que realizan actividades como fiestas ambientadas en EEUU y empresas de Tv que necesitan ambientación para sus programas, series o películas.

También en épocas como Halloween o Carnaval, hay clientes que compran ropa, complementos o botas para inicialmente disfrazarse.

Lo que caracteriza mucho al tipo de cliente que compra en Corbeto’s Boots es que saben qué compran, que saben de la calidad del producto y son muy fieles. Conocen las marcas y normalmente ya han comprado productos de las marcas disponibles. 

El cliente dice que en TV sale que en 10 minutos tienes tu tienda online

Es común que los clientes vengan diciendo que han visto en un anuncio de TV que 1&1 ofrece tiendas que pueden crearse en muy poco tiempo, que la pueden hacer ellos mismos y por poco dinero. Lógicamente, te piden que les hagas la tienda, y que como es sencilla de hacer y se tarda poco tiempo en crearla, comentan que no están dispuestos a invertir mucho.

Personalmente, les invito a que lo prueben...

¿Qué debe cumplirse en términos legales?

Cada sector debe cumplir requisitos que pueden variar del resto. No es lo mismo vender fuegos artificiales que ropa, comida que juguetes…

La ley de protección de datos, la ley de uso de cookies, mostrar toda la información sobre la empresa (contacto, teléfono, dirección, registro mercantil)… y todo lo relacionado con el proceso de compra y devolución de los productos (precios claros, proceso de devolución, derechos, proceso de envíos, precios…) es común a todas las tiendas, pero luego debe tratarse lo relacionado con el sector con el que se trabaje.

En temas legales, lo mejor es ponerse en manos de profesionales. Por un lado la tienda tendrá todo cubierto y por otro, siempre habrá quien nos informe de las posibles novedades en el cambio de leyes.

El tema legal es complicado y difícil de administrar. Podemos encontrarnos con problemas muy serios o sanciones económicas a las que no podemos hacer frente.

¿Cómo tratar los comentarios y valoraciones?

Hay varios tipos de comentarios:

Según dónde se hagan:

En la misma tienda, que normalmente pueden controlarse.

Fuera de la tienda en redes sociales como Facebook, Twitter..

Las que se hacen en Google Business.

Según que se valora:

Los productos.

El trato recibido.

El transporte.

Según cómo se comenta:

Malos comentarios o valoraciones.

Buenos comentarios o valoraciones.

Según el estado del cliente:

Comentarios de clientes muy satisfechos.

Comentarios de clientes satisfechos.

Comentarios de clientes enfadados.

A partir de estas clasificaciones y de la moderación, debe responderse de forma adecuada. Pongamos algunos ejemplos que podría pasar:

Un cliente visita la tienda física y considera que se la ha tratado mal. Cuando llega a casa, entra a Google y deja un comentario negativo y desaconsejando la visita de nuestra tienda.

Un cliente en la web valora negativamente un producto. ¿Se muestra el comentario? ¿Se intenta contactar antes con el cliente para resolver el posible problema?

Hacen comentarios o valoraciones clientes que sospechas que son la competencia...

Apartado técnico

¿Qué dominios contratar?

El dominio .com sería obligatorio. A partir de aquí puede contratarse otros tipos de dominio entre los que destacaría:

.es para España

.cat si disponemos la web en catalán

Otros dominios que puedan proporcionar mejor posicionamiento. Ésto debe estudiarse y confirmar que puede traernos ventajas.

¿Magento, Prestashop o tienda desarrollada a medida?

Prestashop es una de las soluciones más utilizadas. Fácil de instalar, muy extendida, multitud de plantillas disponibles y muy probada. Para medianas tiendas online es perfecta.

Magento es una solución más potente y destinada a grandes tiendas online. Se complica la instalación y sobretodo el mantenimiento y personalización.

La tienda desarrollada a medida es una inversión fuerte, pero que asegura que la tienda se ajusta a tus necesidades. Es usual el desarrollo de una tienda web a medida en casos en las que la tienda sea muy diferente, que quiera ofrecer otras cosas o que quieran tener el control absoluto de cómo vender.

En nuestro caso, el cliente lo tenía muy claro, la quería desarrollada a media. Quería huir de las tiendas Prestashop porqué la mayoría de plantillas eran muy parecidas, quería huir de Magento porque quería mas control sobre lo que la tienda debía hacer, sobretodo en el panel de administración.

Los beneficios son claros: cambios continuos sin necesidad de depender de nadie, posibilidad de aplicar las mejoras que se quieran, desarrollo de la tienda para móvil optimizada (no es responsive), manejo absoluto de todos los apartados...

¿Qué necesitaremos de nuestro proveedor de servicios de Internet?

Los más importante de nuestro proveedor es un buen contacto y un buen soporte.

Por un lado necesitamos que nos den de alta servicios de forma rápida y eficiente. Un ejemplo sería dar de alta dominios, emails, sistemas de seguridad…

Por otro lado, un buen soporte. En el caso de tener problemas, tener a alguien en el otro lado que te tenga bien informado y que solucione lo más pronto posible los problemas técnicos.

He tenido clientes que han venido porque quieren una web moderna y que su actual proveedor les ha dicho que no pueden instalar Wordpress porque sus servidores no tienen los recursos necesarios. El tema técnico en ningun caso puede parar la evolución de un proyecto.

¿Qué tipo de servidor necesitamos?

Haciendo un resumen entre los servidores que más ofrecen los proveedores, se pueden englobar en tres tipos:

Compartidos. Normalmente es un paquete donde se engloba alojamiento, emails y varios servicios más. Las ventajas son que normalmente está todo automatizado (copias de seguridad, firewall...), y el proveedor se encarga de su mantenimiento. No vemos nada del mantenimiento.

Los virtuales. Son servidores con más potencia que los anteriores, pudiendo normalmente escoger sus especificaciones. Aquí ya se necesita algún administrador que domine los servidores. Es un servicio más potente, pero que necesita más trabajo y conocimiento. Son más caros que los anteriores. Normalmente este tipo de servidor permite aumentar o bajar las especificaciones según la necesidad sin tener que reiniciar nada (excepto la ampliación de disco duro).

Los dedicados. Escogiendo las especificaciones, estamos hablando de servidores potentes que soportan grandes cantidades de tráfico y visitantes. Debe administrarse totalmente. Adquieres el servidor y se debe hacer uno cargo absolutamente de su control. Muchísima más potencia, pero exige conocimientos avanzados y dedicación. Lógicamente, son más caros.

Es esencial que un profesional escoja qué tipo de servidor se necesita. En este proyecto se optó por un servidor dedicado para buscar la máxima potencia.

En caso de duda, mejor coger la opción más potente posible entre las que se dude. Cambiar de un tipo de servidor a otro, puede suponer parar el servidor durante horas.

En términos de diseño, ¿utilizamos una plantilla o se comienza un diseño a medida?

Las plantillas son de fácil instalación y muchas de ellas muy atractivas. Pero tienen innumerables problemas: 

Cada actualización del CMS conlleva a actualizar la plantilla.

Muchas de ellas son vendidas a otras tiendas del mismo sector, perdiendo así una imagen personalizada.

Muchas de ellas soportan pocos idiomas, y debes crear los idiomas que faltan (modificando ficheros .tpl o ficheros .mo)

Algunas plantillas son creadas a partir de plugins existentes, que dejan de ser soportados, añadiendo agujeros de seguridad.

La mayoría de las plantillas son responsive, pero muchas de ellas no lo hacen correctamente, reproduciendo fallos de diseño cuando ves la web en móvil.

Para escoger una plantilla debe tenerse en cuenta lo siguiente:

Comprarla en plataformas veteranas con buen soporte, como www.themeforest.net 

Debe tener buena puntuación.

Deben haberla vendido mucho (cómo más rentable le es al editor de la plantilla, más la mantiene y actualiza).

Debe tener un buen soporte. Hay que contactar con ellos antes de comprarla. Si responden relativamente rápido, es que te proporcionarán un buen soporte en un futuro.

Confirmar que sea compatible con los módulos externos que debas utilizar, sobretodo los relacionados con idiomas.

En nuestro caso, se decidió utilizar un diseño y maquetado personalizado. Dejamos en manos de los diseñadores la imagen, y se maquetó tal y como especificaron. Llegamos a un punto de personalización, que los componentes como botones, desplegables… eran totalmente personalizados.

Además, el diseño para móvil se pudo tratar de forma diferente y llegar a una optimización muy buena en velocidad y navegabilidad.

¿En qué medida los cambios en la web afectan al posicionamiento?

Google decide. Google cambia constantemente su algoritmo de búsqueda y hay que adaptarse a sus exigencias si se desea estar bien posicionado.

Cambios significativos en la tienda online, pueden afectar de forma significativa a nuestra posición en Google. Por ello, cada vez que se realicen cambios grandes en la tienda, hay que monitorizarlos constantemente.

Google penaliza de forma muy severa los que intentan, o que él considera que quieren, hacer trampas. Y salir de una penalización de Google puede ser complicado.

En nuestro caso, antes de hacer cambios importantes, antes estudiamos en qué puede afectar al posicionamiento y preparamos un plan de acción en el caso que afecte negativamente.

¿Vale la pena contratar servicios externos como valoración de productos?

Decidimos externalizar lo mínimo posible. Si bien, la valoración de productos en un servicio externo proporciona beneficios, sobretodo en backlinks y muchas más visitas, se convierte en un arma de doble filo. La tienda se expone y se necesita de un control mucho más exhaustivo.

En nuestro caso, desarrollamos un sencillo sistema de puntuación que puede controlarse desde el panel de administración. No se distorsiona nada, las puntuaciones son las que son, pero se controla cualquier posible comentario de Trolls.

¿Cómo mostramos la web en dispositivos móviles? Responsive o diseño propio

Uno de los mayores aciertos fue crear una vista de la web específica para móviles. El diseño, la navegación y la funcionalidad está absolutamente adaptado a móviles.

Google puntúa de forma muy alta el diseño web. No se esconde nada, ni se adapta nada. Está todo desarrollado específicamente para la navegación móvil.

Si el proyecto puede permitirlo, por tiempo e inversión, la creación de un diseño específico para dispositivos móviles es lo correcto. Las ventajas son:

Mejor funcionalidad. Al estar diseñado teniendo en cuenta los dispositivos móviles las tareas se realizarán de forma más óptima sin problemas derivados de la adaptación (enlaces no clicables fácilmente con los dedos...)

Mejor navegabilidad. Los menús, botones, enlaces… están pensados ya para el uso de los dedos, por lo que el usuario puede navegar de forma más fácil.

Más velocidad. El material como las fotos, botonería… están optimizadas para móvil, por lo que se gana en carga de las páginas y por lo tanto, más velocidad.

Mejor posicionamiento. Google premia que la web esté creada específicamente para dispositivos móviles.

Lo que he notado es que a Google le gusta mucho que el mismo enlace sirva para mostrar la versión web que la versión móvil. Google premia que no se duplique información y que te adaptes al dispositivo cuando muestras la información.

¿Qué software de estadísticas utilizar?

Hay muchos servicios de estadísticas, pero destacaré las más comunes y la que escogimos:

El servicio que normalmente te proporciona el proveedor con el servidor contratado. En nuestro caso AwEstats. Lo descartamos por lo que indicaremos más adelante.

Los CMS como Prestashop o Magento utilizan plugins con este fin. No es nuestro caso.

Por último, y el que escogimos, es Google Analytics.

La razón es sencilla, si debemos posicionarnos en Google, debemos saber cómo lee éste nuestras estadísticas. Además, Google Analytics la tenemos enlazada con Search Console para una mejor monitorización de cómo nos ve el buscador.

Hay clientes que optan por seguir los dos métodos: un AwStats para ver estadísticas reales del servidor (cómo lee el servidor las visitas) y Google Anayltics para ver cómo interpreta Google nuestras estadísticas.

¿Qué nivel de seguridad proporcionar a la web?

Por el hecho de no utilizar un motor como Prestashop o Magento, ya se descartan muchos tipos de ataques que se realizan a nivel mundial, aprovechando la no actualización de sus versiones. A la hora de tratar la seguridad, debe tenerse en cuenta tres niveles: 

Desarrollo, donde pondremos los permisos correctos a las carpetas, utilizar las clases necesarias para evitar ataques XSS, uso de CAPTCHA para el envío de formularios.  

Por otro lado, debe tratarse la seguridad del servidor siguiendo pasos como desactivar módulos que no sean necesarios, tener configurado la creación de logs, restringir accesos a lo indispensable, actualización del software…

Por último, la incorporación de un Firewall, antimalware y antivirus externo. SiteLock proporciona un sistema de seguridad externo que bloquea cualquier ataque frenándolo sin que el servidor se vea afectado.

En otros niveles de seguridad, debe tratarse el control periódico de los logs de acceso y errores al servidor, mantener el servidor de emails separado del de la web, utilizar contraseñas fuertes, tener un buen sistema de copias de seguridad y por último el uso de un certificado de seguridad.

Hace un par de meses, que recibimos un ataque DDoS desde EEUU que fue bloqueado por SiteLock. El ataque intentaba aprovecharse de un servicio de pago que pusimos en marcha que se efectuaba a partir de un enlace concreto. SiteLock, bloqueó mientras no pusimos mas seguridad en el nuevo servicio, todas las visitas que provenían de las IP’s utilizadas para el ataque.

¿Se contrata una empresa externa para el posicionamiento o lo hacemos nosotros?

El posicionamiento web necesita una dedicación y unos conocimientos actualizados. Se decidió contratar una empresa externa para que procediera a ello. Se probaron varias, debido a que no se ajustaban a lo que buscábamos. Al final, encontramos la empresa que nos facilitaba algo tan sencillo como la solución a todos los problemas que teníamos.

No es suficiente un informe diciendo que teníamos errores 500 en nuestra tienda, necesitábamos que nos dijeran cómo solucionarlo o, en caso necesario, darnos pistas para poder averiguar la solución. Informe si, pero también las soluciones a lo que se detecte que está mal.

¿Qué plan de acción tener si atacan la web?

El plan debe ser preventivo. Un buen sistema de FireWall y toda la seguridad posible. Aún así, lo que puede salvar a la tienda online, es un buen sistema de copias de seguridad.

El FireWall protegerá de algunos ataques, los antivirus y antimalwares detectará y eliminará este riesgo, pero como es sabido estos servicios pueden ser vulnerables en ocasiones. Para ello, se debe poseer una buena copia de seguridad de los ficheros que forman la tienda, y copias diarias de la base de datos.

¿Qué calendario y metodología de copias de seguridad se sigue?

Como se ha comentado en el apartado anterior, debe hacerse copias de dos apartados:

De los ficheros que forman la tienda, una por semana

De la base de datos, una diaria.

Para ello, puede contratarse servicios externos o hacerlo manualmente. En nuestro caso, se ha programado dos scripts que hacen copias de los ficheros y de la base datos. Estos scripts se ejecutan mediante un cron programado para ello. De esta manera se disponen de copias diarias que se guardan en el servidor y en local (nuestros ordenadores).

Disponemos de 6 meses de copias de seguridad que vamos actualizando en nuestros ordenadores.

Estamos en proceso de poner en marcha Bácula, un software que nos permitirá tener copias de todas nuestras webs y base de datos de forma más cómoda y segura.

¿Qué ventajas tiene instalar un chat en la tienda?

En nuestro caso se contrató el chat de Zendesk que proporciona diversos planes. Poder mantener un chat por escrito dentro de la web mientras se navega con diversos clientes a la vez. En el caso de no estar online, permite dejar mensajes.

Curiosamente, y en mi caso de forma sorprendente, los clientes lo usan. Hay un tipo de cliente que prefiere mantener un chat para hacer preguntas concretas, a tener que llamar o escribir un email.

Es otra forma de llegar al cliente, pero con una ventaja importante: lo haces mientras está en la web. Es un punto importante debido a que se tiene al cliente visionando los productos y se le puede ir guiando de una forma más rigurosa que no tener que imaginar y recordar partes de la web. 

También puede hacerse servir para ir guiando en el proceso de la compra o para darse de alta como cliente en la web.

¿Las fotos de los productos con nuestra cámara, o un profesional?

Se vende por la imagen, así de claro. El producto es atractivo según la/s foto/s que se pongan. Es por ello que es aconsejable, dentro del presupuesto disponible, de contar con un buen profesional de la fotografía. La diferencia es clara debido a que un profesional tendrá en cuenta muchos factores:

Iluminación, contraste, colores...

No mostrar productos de forma confusa. En ocasiones al mostrar productos en los listados, uno al lado de otro, se engaña en el tamaño. Un llavero al lado de una bota, puede llevar a engaño de tamaño.

Qué perfil es el mejor para hacer la foto.

Qué fondo usar.

Cómo se acompaña al objeto. Puede ponerse adornos o detalles que destaquen factores como colores, tamaños o tipo de telas.

¿Qué importancia tiene el buscador de la tienda?

La búsqueda es importante y lo más complicado de desarrollar. En términos técnicos, el desarrollo de un buscador es complicado. El sistema escogido fue aprovechar las características de las tablas tipo MyIsam en MySql que permite indicar en % de acierto lo que se busca. De este modo permite ordenar la búsqueda y mostrar los resultados según esta puntuación.

Es importante mostrar primero lo que más se aproxime a lo que se busca. Aún así, los resultados son difíciles de ajustar. Por este motivo, en un futuro se está estudiando de incorporar DooFinder como buscador dentro de la tienda. Un servicio que busca, sugiere y aprende de las búsquedas que hacen los clientes.

En tiendas con muchos productos, el buscador es importante. Hay que tratarlo aparte y se recomienda el uso de un buscador profesional y potente.

¿Qué papel tienen las redes sociales en la página web?

Tienen un papel muy importante. Con multitud de seguidores en:

Facebook,

Twitter,

Instagram,

Google Plus,

Pinterest.

Para ello hay que tener conocimientos básicos sobre temas como:

Saber que publicar. Qué productos, las novedades, las ofertas…

Saber cómo publicarlo. Qué imágenes utilizar, qué enlaces utilizar

Saber cuándo publicarlo. Para ello hay que hacer un seguimiento de las estadísticas de la web sobre la procedencia de los clientes.

¿Qué tener en cuenta en cambios de diseño?

Los cambios de diseño son muy importantes. Como he comentado antes, el cliente de nuestra tienda es fiel y visita a menudo la web. Si se le hace un cambio radical de web, puede no ser prudente. Dentro de la navegabilidad, debe seguirse unas pautas ya marcadas.

A los diseñadores siempre se les ha requerido las mismas especificaciones:

Diseño limpio.

Se les ha indicado el color corporativo.

Los componentes como botones, menús, desplegables, ventanas modales… deben poderse ajustar a diferentes resoluciones antes pactadas.

La imagen debe priorizar el visionado de los productos. El protagonista de la web debe ser el producto.

El tamaño y tipo de fuente deben estar acorde con las diferentes resoluciones.

Debe especificarse los diferentes estilos de las etiquetas utilizadas para el posicionamiento web (h1, h2, h3, strong...)

¿Cómo tratar diferentes perfiles de profesionales?

Es difícil. Cada profesional, sea diseñador, desarrollador, director marketing online… tiene una forma de trabajar, tiene sus prioridades y sus preferencias a la hora de comunicarse.

Cada uno de ellos han cogido este proyecto como un cliente más, no siendo el tiempo dedicado el 100% de su trabajo, y la comunicación ha sido siempre a tres bandas: cliente, desarrollador y profesional.

Hasta encontrar el profesional que se ajustara a nuestras necesidades, ha costado, pero una vez encontrado normalmente ninguno ha fallado.

Nos hemos movido normalmente por profesionales recomendados, pero últimamente escogemos profesionales en portales especializados. El saber qué trabajos han realizado, las opiniones que tienen de ellos, etc. ayuda mucho.

¿Contratar pasarela de pago bancario, Paypal o los dos?

Para proyectos con poca inversión inicial, normalmente se utiliza PayPal. Se paga únicamente cuando se vende. Es un porcentaje alto según lo que se facture al mes, pero no tiene coste adicional. Se paga un % de la venta y céntimos por el pago. Además, PayPal garantiza con un seguro el pago.

En cambio, una pasarela bancaria tiene el coste inicial de puesta en marcha, un coste mensual del TPV, un % de la venta y unos céntimos por cada compra. Cómo es un banco, puedes negociar los precios: cómo mejor cliente seas, mejores precios puedes sacar.

En nuestro caso se optó por las dos opciones y se desarrolló las pasarelas correspondientes desde cero.

¿Sirven para algo los sellos de calidad?

En nuestro caso utilizamos Confianza online. Un sello de calidad que valida, no sólo que la web cumple los requisitos legales, sino que los procesos que protegen al clientes son correctos. Es el caso de las devoluciones, proceso de compra, seguridad, métodos de contactos con el responsable de la tienda…

Si la tienda tiene el sello de Confianza online, el cliente tiene un mínimo de garantías de que compra en una tienda seria.

¿Cuándo y cómo aplicar los cambios en servidor de producción?

Teniendo en cuenta que pueden haber clientes en la web, saber cuándo debes subir las actualizaciones al servidor de producción es importante.

Inicialmente hacíamos los cambios por las madrugadas y los fines de semana. Ahora, y después de tener unas estadísticas muy ajustadas, podemos controlar qué días y a qué horas podemos hacer los cambios. Igualmente, Google Analytics nos advierte si hay en tiempo real, alguien visitando la web.

Si no es crítico el cambio, se hace sin avisar. En cambio si el cambio es crítico o conlleva a cambios que afecten al cliente, se les avisa con antelación.

¿Cómo tratar la logística de transporte?

Hay multitud de empresas de transporte. Dentro de una misma compañía, al funcionar como franquicias, existen muchos precios u ofertas diferentes. Normalmente, si no se es un cliente que les facture mucho dinero, proporcionan un rango de precios que tiene en cuenta el destina, el peso y las dimensiones.

De este modo, lo primero que debe establecerse son los destinos a los que se venderá. Una vez sabido, qué tipo de productos venderemos, concretando pesos y dimensiones. A partir de aquí, hay que negociar con las diferentes empresas de transporte.

El tiempo de entrega, los precios, los servicios como seguimiento del envío, servicios como devoluciones… serán puntos importantes a tener en cuenta.

¿Qué certificado de seguridad usar?

Hay diferentes tipos de certificado a usar. Cada uno de ellos certifican y muestran la seguridad de forma diferente. Basándome en los certificados proporcionados por Thawtte, listo alguno de ellos:

SSL Webserver Certificate with EV. El certificado más potente que además muestra de forma clara con el candado verde ocupando parte importante de la barra de dirección del navegador. El de Google es un ejemplo.

SSL Webserver certificate. El usado por Corbeto’s Boots. Proporciona seguridad de envío de datos y certifica que se está comprando en Corbeto’s Boots.

SSL WebServer Wildcard. Un certificado utilizado para asegurar múltiples subdominios.

Para estar seguros, lo correcto será consultar con el proveedor o un experto.

Costes y timing

El presupuesto inicial

Es el presupuesto más complicado. Hay que hacer un cálculo aproximado de un proyecto muy grande. La experiencia me ha hecho ver que al final inviertes muchas más horas de las que has presupuestado.

La duda es clara: si debe presupuestarse todas las horas que se invierten, el proyecto no es viable económicamente para según que clientes. En este caso, sacrifiqué dinero por tener un proyecto insignia para poder utilizarlo como portfolio.

En el presupuesto debe contener:

Costes técnicos

Dominio.

Servidor dedicado.

Certificado de seguridad.

Pack emails con antivirus y antispam.

Costes de los servicios externos.

Desarrollo

Horas invertidas en el desarrollo

El presupuesto debe dejarse siempre abierto. Los costes técnicos varían según la época, ofertas que puedan haber y las características del servicio contratado.

Importante sumar un pack de hora de desarrollo para contingencias. Es muy difícil calcular las horas que se van a invertir.

¿Cuándo cobrar?

Dependerá del cliente. Se puede optar por hacer un 40%, 30% y 30%. O un 25%, 50% y 25%.  El primer cobro debe cubrir gastos tantos técnicos como de desarrollo. El segundo cobro debería cubrir todo el periodo de desarrollo. Por último cobrar una vez entregada la web. 

Es esencial marcar qué significa finalizar la web. Muchas veces se solapa la finalización con nuevos requerimientos.

Una vez acabado el proyecto, ¿qué cobramos?

Una vez finalizado el desarrollo nos enfrentamos a:

Mantenimiento

El servidor, las estadísticas, las copias de seguridad…

Aquí se puede optar por el cobro de una cantidad al mes, trimestre, semestre o anual.

Ampliaciones o mejoras

Éstas pueden ser de dos tipos:

Pequeñas ampliaciones. Pequeñas mejoras o modificaciones donde se invierte poca cantidad de horas de desarrollo.

Grandes ampliaciones. Se invierten grandes cantidades de horas en su desarrollo.

Para grandes ampliaciones o modificaciones, se tratan con presupuesto aparte.

Las pequeñas modificaciones o ampliaciones se atienden con un bono de horas:

El cliente compra por anticipado un bono de 10, 20, 30 o 50 horas. Cada vez que el cliente pide una modificación, se le comunica que serán X horas, y si está de acuerdo, se le restan.

El bono de horas es para huir de ese mantenimiento mensual que acaban con: te estoy pagando 300 euros al mes y no haces nada. El cliente paga por lo que se trabaja. Como más grande es el bono más barato se le hace el precio/hora.

Corrección de errores

Los errores en mi caso, me hago cargo de la inversión de horas.

EN LA ACTUALIDAD

(Mayo – Junio 2017)

Actualmente, y después de un cambio reciente de diseño, se está trabajando en el SEO. La mayoría de las modificaciones que se están realizando están relacionadas con el posicionamiento web.

Una tercera empresa muestra las mejoras a realizar y propone qué cambios realizar. Si es posible hacerlo sin que estos cambios afecten al funcionamiento de la web, se llevan a cabo. El paso siguiente es informar de los cambios realizados para que la empresa se encargue de monitorizar la evolución.

Entre los cambios más importantes que se han llevado a cabo aprovechando el rediseño, está la reducción de pasos en el proceso de compra. Anteriormente tenía 6 pasos, y en la actualidad, en tres pasos se ha finalizado la compra.

El tratamiento del cambio de idioma se ha corregido. Hasta el momento, el cambio de idioma se hacía de la manera más sencilla: al cambiar de idioma, la web redirigía a la página principal. Actualmente, al cambiar de idioma se queda en la misma página con el idioma ya cambiado.

El cambio más importante ha sido el cambio de las url’s amigables. Ya hemos procedido a crear las nuevas, para que se adapten mejor a las exigencias de Google, y estamos monitorizando los cambios producidos.

En definitiva, la web ha experimentado grandes cambios en el Front-End destinado a web y estamos estudiando cómo está afectando al posicionamiento. Una vez se estabilice todo el proceso, se procederá a realizar nuevas mejoras ya estudiadas.

A continuación se detallan alguna de las tareas en las que se está trabajando:

Tratamiento de las Tallas

La credibilidad de un negocio online, dependen de muchos puntos. Uno de ellos es mostrar el producto que se vende, tal cual es. Lo que en principio parece lógico, en la realidad dista muchísimo. ¿Cuántos hoteles hemos visitado y hemos visto que las habitaciones no son exactamente las que se muestran en la web? ¿Cuántos zapatos hemos recibido al comprarlos en Amazon, y que el material no es el que indican?

En nuestro caso, el punto crítico son las tallas. En cualquier tienda online textil, las tallas son esenciales. Por dos motivos esenciales:

Por un lado, el cliente al recibir el producto y probárselo, se lleva una decepción. El tratamiento de un cliente descontento es difícil y conlleva un trabajo extra. Debemos evitarlo siempre que nos sea posible.

Por otro lado, tenemos uno de los puntos que añaden trabajo y en consecuencia, disminuye el margen de ganancias, las devoluciones. Una devolución es tiempo y trabajo, en definitiva son pérdidas.

Metodología anterior

Antes, en la ficha del producto se mostraba un enlace a una página que trata las tallas. Se hace de una manera muy general que no acaba de proporcionar al cliente una información que le saque de dudas.

Ilustración 7: Corbeto's Boots - Información tallas

Propuesta de solución

Es un punto muy importante, y como tal, debe tratarse. Después de exponer varias soluciones, se consideró trabajar en la que más tiempo debía invertirse, pero que llevaría a un nivel superior el tratamiento de tallas.

Talla a talla, se mide en cm y en la configuración de tallas se irían añadiendo. De este modo, el cliente al entrar en la ficha de un producto, se le facilita un enlace que muestra las tallas disponibles, complementadas con los cm de cada una de las partes del producto.

Un ejemplo claro son las camisas de manga larga. Se muestran las tallas disponibles, y cada una de ellas, los cm de manga, ancho y largo. Estas medidas son hechas por Corbeto’s Boots ajustándose totalmente a la realidad.

Front-End actual

El el proceso de adquisición de un producto, justo al lado del desplegable para escoger la talla, debe mostrarse una guía detallada de las medidas del producto. Esta información se mostrará en una ventana modal con una infografía y un listado de medidas.

Por un lado, las medidas se asignan a cada producto. Cada producto se le asigna una talla, pongamos el ejemplo de ‘M’ y las medidas de este, que siguiendo el ejemplo sería 50cm de manga, 90cm de ancho y 110 de largo.

Por otro lado, la infografía que se muestra con estos datos, dependerá de la categoría del producto. Para las camisas, los chalecos,... cada uno dispondrá de su imagen específica.

Ilustración 8: Corbet's Boots - Tratamiento nuevo información tallas camisas

Ilustración 9: Corbet's Boots - Tratamiento nuevo información tallas chalecos

Back-End

El Back-end debe ser capaz de poder asignar estas medidas a cada producto y asignar la infografía a cada una de las categorías. Esto implica cambios en la base de datos añadiendo registros en las correspondientes tablas y cambios en las vistas para añadir o modificar dichos datos.

Ilustración 10: Corbeto's Boots - BackEnd - Administración de productos

Showrooming y el webrooming

Son muchos los negocios de venta de ropa que deben enfrentarse al “showrooming”, una práctica que hace habitualmente mucha gente y que consiste en ir a la tienda física, informarse del producto, y posteriormente comprarlo en una tienda online. Este punto es difícil de combatir y no es objetivo de este informe tratarlo.

Pero igual que existe esta práctica, también hay otra práctica, el “webrooming” que consiste en todo lo contrario, miran en la web y cuando lo tienen claro, se acercan a la tienda a comprarlo.

Para este último punto, queremos facilitar al cliente que venga a la tienda física y nos diga qué producto de la web quiere comprar.

Estado actual

Actualmente hay dos opciones con la que los clientes pueden indicarnos qué producto quieren comprar:

Por un lado, el móvil. Corbeto’s Boots dispone de página web específica para móvil, con lo que a los clientes les es cómodo visitar el producto y mostrarlo en la tienda.

Por otro lado, los usuarios que no están cómodos con los móviles, vienen a la tienda indicando la referencia que se muestra en la ficha del producto. El problema, es que muchos de nuestros clientes no se acuerdan de ella o simplemente no la han visto.

Propuesta de solución

Para facilitar que los usuarios puedan venir a la tienda física y mostrar en qué producto están interesados, se plantea crear una función de impresión de la ficha del producto desde la web, pero pensando en la simplicidad y en el ahorro de tinta/tóner para nuestros clientes.

La puesta en marcha

Se ha creado una nueva vista que muestre sólo los campos más importantes del producto con un formato apto para la impresión. El controlador llama al modelo que le proporcionar los datos en cuestión, y se los pasa a la vista de impresión.

Tratamiento SEO

Corbeto’s Boots ha contratado el servicio de SEO a una empresa externa compuesta por dos socios, uno de ellos Ingeniero informático y otro especializado en marketing online y SEO. Después de probar varias empresas, el proyecto es llevado por una empresa que se ajusta a las siguientes necesidades concretas:

Estructura ya establecida. La web se divide en familia de productos, categorías y productos.

La web dispone de dos idiomas.

Debe posicionarse la web tanto a nivel nacional, como a nivel internacional.

Quiere posicionarse, coincidiendo con la estructura, las familias de productos, las categorías y trabajar el posicionamiento de los productos en sí.

Ponerse a la altura de la competencia.

Aunque inicialmente, debido al trabajo inicial SEO que se realizó, la web estaba muy bien posicionada según para qué palabras clave, se quiere profundizar mucho más, y dar un paso adelante.

Y el punto más importante y difícil al que nos estamos enfrentando es actualizar los enlaces amigables. Hasta hace poco, los enlaces eran del tipo:

p/idioma/nombre-de-la-categoria/nombre-del-producto/idfamilia/idcategoria/idproducto

y debía optimizarse para un mejor posicionamiento, con las complicaciones que eso supone. El cambio de enlaces amigable puede provocar la pérdida de muchas indexaciones, a la vez que la generación de muchos errores 404 y que Google detesta.

Los pasos SEO que estamos siguiendo y que implican cambios en el desarrollo web son:

Duplicación de contenidos

En la página web, cuando se muestran todos los productos de una categoría, permiten ordenar y filtrar según varios conceptos. Las acciones de filtrar y ordenar generan diferentes enlaces que muestran el mismo contenido. Para evitar que Google sancione la web, se ha procedido a añadir la etiqueta canonical a todos los enlaces que se forman a partir del enlace categoría.

Así, cada categoría dispondrá del enlace principal, y el resto de enlaces derivados apuntarán al principal en la etiqueta canonical.

Ilustración 11: Corbeto's Boots - Enlaces canonicals

Generación de los nuevos enlaces

Después de una reunión con la empresa encargada del SEO, se estudió los enlaces antiguos y se llegó a definir los nuevos enlaces siguiendo sus recomendaciones. El resumen era acortar los enlaces lo máximo posible, y acercar hacia el dominio los contenidos que debían cobrar más importancia.

Se pasaba de un enlace tipo:

https://www.corbetosboots.com/c/Botas-Biker/es/6/0/0 

A uno tipo:

https://www.corbetosboots.com/es/botas/biker/6/0/0 

Redirecciones de las páginas ya indexadas

Modificación del fichero .htaccess añadiendo redirecciones 301 que indiquen a Google que debe redirigir los antiguos enlaces a los nuevos, y que los vaya cambiando en la indexación.

Aquí se muestran dos ejemplos de redirección de los ficheros:

.htaccess

Redirect 301 /c/Botas-Camperas/es/7/0/0 /es/botas/camperas/7/0&0/ala/0
Redirect 301 /c/Botas-Cowboy/es/1/0/0 /es/botas/cowboy/1/0&0/ala/0

Como se puede obserbar cambiamos de forma radical la url a utilizar. Con la redirección indicamos a Google que un enlace antiguo debe ser substituido por el nuevo. De esa manera Google va eliminando antiguos enlaces y los reemplaza por los nuevos.

Esto supone un pequeño bajón en posicionamiento, pero a la larga, vale la pena.

Cambio enlaces internos

Revisar todos los apartados para comprobar que todos los enlaces y formularios internos, apuntan dónde deben.

Tratamiento errores 500

Ilustración 12: Google Search Console - Errores 500

La empresa que nos ayuda al posicionamiento web, nos advirtió que aumentaban los errores 500 en la web. Los 500 son de los errores que más penaliza Google. Debía ponerme en marcha con urgencia.

Después de investigar porqué misteriosamente Google indexaba páginas que en principio de debía, averigüé que desde hace años que Google indexa enlaces que reconoce dentro del código JavaScript. Y eso es lo que pasó. En el código que se encarga de formar el enlace de filtrado de productos, existía un enlace que Google indexaba.

El error los subsané, tal como muestra el gráfico anterior, haciendo dos acciones:

Primero debíamos indicar a Google que no indexara ese tipo de enlace añadiendo las siguientes líneas al fichero robots.txt. De este modo a partir de ahora no lo indexaría.

Robots.txt

Disallow: /es/*/*/*/%7Bfiltro%7D/*/0

Disallow: /eng/*/*/*/%7Bfiltro%7D/*/0

Por otro lado, lo ya indexado debíamos indicar que debe eliminarse. Para ello añadimos en el fichero de enrutamiento del Framework (routes.php) dos reglas nuevas que redireccionaban este tipo de enlaces al error 400:

routes.php

$route[“es/(:any)/(:any)/(:num)/%7Bfiltro%7D/(:any)/0”]= “notfound/index”;

$route[“eng/(:any)/(:any)/(:num)/%7Bfiltro%7D/(:any)/0”]= “notfound/index”;

Potenciar las categorías de productos

Las categorías de productos contienen las urls amigables, las descripciones y las palabras clave más genéricas para los buscadores. Había que potenciar este apartado. Para ello, se ha añadido una descripción en cada una de ellas con descripciones y palabras clave.

Para ello se ha modificado en el panel de administración, que el usuario pueda modificar en el apartado de categorías el texto que se mostrará en la web en los dos idiomas. Además, como se aprecia en la captura, se muestra el texto con las etiquetas trabajadas para buscar el mejor posicionamiento.

Promociones y landingpages

La creación de páginas exclusivamente destinadas a la promoción de productos, nos permiten trabajar el posicionamiento de forma muy puntual y concreta.

Con esta landingpage en forma de promoción, puede trabajarse el posicionamiento de apartados muy concretos en periodos muy concretos. En la captura podemos ver cómo se promociona botas cowboy moteras para verano.

En la parte administrativa, el cliente tiene la oportunidad de crear promociones indicando:

Titulo

Descripción

Productos que deben mostrarse

Metadescripción

Metakeywords

De esta manera puede trabajarse desde el panel el posicionamiento de forma muy concreta y potenciar palabras clave que nos interese.

TPV DIRECT

Debe proporcionarse un sistema en el que el cliente pueda pagar, sin necesidad de pasar por el proceso de la cesta de la compra. Pongamos ejemplos:

Después de hacer un pedido, el cliente se da cuenta que se ha dejado un producto que también quería.

Un cliente habitual que siempre pide pedidos grandes y hay que facilitarle la compra mediante teléfono. Llama el cliente, le decimos que efectivamente podemos enviarle 100 sombreros cowboy en cincos días, y que asciende 525€.

Para los estos dos casos, y alguno más, podemos hacer el pedido vía teléfono y proporcionarle un enlace para que le lleve a una pasarela dónde pueda pagar de forma sencilla con la tarjeta.

TPVDirect Versión 1

Se creó una pasarela sencilla para poder hacer todos los procesos de pago. En esta pasarela, se pedía un número de referencia (facilitado por email), el nombre, el importe en euros y se dejaba la posibilidad de dejar un comentario. A continuación, se procedía al pago.

Cometimos un error: dejamos un enlace estático del estilo:

https://www.corbetosboots.com/tpvdirect 

Fue objeto de muchos ataques DDoS que pusieron en riesgo al servidor. Debíamos poner solución. Como hay mal que por bien no venga, pusimos a prueba nuestro servicio SiteLock de protección, y funcionó a la perfección. El servidor aguantó a cientos de ataques desde E.E.U.U. 

TPVDirect Versión 2

Estamos en la nueva versión de TPVDirect. Ahora el enlace contiene variables aleatorias para que el enlace no sea estático. Cada día cambia el enlace para poder visitar este servicio. De esta manera, evitamos dejarlo fácil a los ataques. 

Los enlaces pasan a tener este formato:

https://www.corbetosboots.com/GHJO876TGBHHJ/dd522a9bf5696ee6f6205bb98fdc842e/es 

El enlace cambia diariamente. Para poder acceder al servicio de pago directo, primero el administrador debe proporcionar el enlace de ese día (varía una de las variables enviadas).

Ilustración 13: Corbeto's Boots - BackEnd - TPV Direct

Una vez la reciba el cliente, éste podrá acceder durante el día. Si hay cambio de día, deberá pedir de nuevo el enlace.

Ilustración 14: Corbeto's Boots - Formulario TPV

Una de las partes del enlace cambia diariamente, creado de forma aleatoria, por lo que el administrador del panel, facilita al cliente qué enlace debe visitar, el número de referencia y el importe a pagar, avisando al cliente que debe hacerlo el mismo día. En caso contrario, deberá volver a llamar para facilitarle el nuevo enlace.

Si el cliente u otro usuario quiere acceder sin el enlace correcto, no se mostrará el servicio:

Ilustración 15: Corbeto's Boots - Enlace incorrecto de TPVDirect

PayPal cambia TLS a la versión 1.2 y a HTTP 1.1

Cuando dispones de diferentes métodos de pago, debes mantenerlos para que se ajusten a las especificaciones técnicas de las diferentes pasarelas. Hace poco, el cliente recibió un mensaje de PayPal informando que por motivos de seguridad, procederían a realizar cambios en la comunicación con la pasarela.

La seguridad. Es uno de los puntos que nos hace temblar a los desarrolladores.

Después de informarse en los enlaces que muestra PayPal, debíamos proceder a confirmar que nuestro servidor está preparado para comunicarse con este protocolo. El proceso siempre es el mismo:

Buscar en Internet

Ver que hay decenas de respuestas

Encontrar la correcta y ejecutarla

En este caso, la solución es hacer una conexión con el servidor mediante openssl para ver si en la respuesta podíamos apreciar que el servidor lo soporta.

openssl s_client -connect www.vuestraweb.com:443 -tls1_2

Ilustración 16: TLS 1.2 - Peticion OpenSSL desde consola

Exportación a Excel de listados de usuarios

Se ha procedido a añadir la opción de exportar desde el panel de administración de todos los usuarios en formato excel. Así pues, el administrador podrá descargarse un excel con un listado de usuarios para poder tratarlos (ordenar por poblaciones, sexo, email...).

Inicialmente se planteó hacerlo en formato csv pero se quiso evitar los posibles inconvenientes a la hora de importarlo y facilitar al administrador poderlos abrir directamente desde la hoja de cálculo.

Para este fin, se utiliza la librería phpExcel adaptada para el uso en CodeIgniter.

Se ha añadido un enlace en el panel de administración para poder exportar el listado

Ilustración 17: Corbeto's Boots - BackEnd - Listado usuarios

Al clicar sobre el enlace, directamente da la opción de descarga:

Ilustración 18: BackEnd - Descarga fichero excel usuarios

El resultado es un documento excel con el listado de usuarios y los datos necesarios

Ilustración 19: Excel - Fichero descargado de usuarios

Blog personal

A todo desarrollador recomiendo tener un blog. Debe utilizarse como bloc de notas. En un futuro ahorra mucho tiempo, y eso es de agradecer.

El blog que administro es un Wordpress con una plantilla gratuita. Tiene instalados diversos plugins de seguridad, redes sociales y estadísticas. En él, voy creando post con las acciones más comunes que voy haciendo en los diferentes frameworks que utilizo.

Ilustración 20: Blog oficial de Trescomatres

¿Cómo puede capturarse una acción sobre un campo textbox de un formulario? Lo buscas en internet, lo aplicas y al cabo de un tiempo lo olvidas. Si lo apuntas en el blog, no.

http://blog.trescomatres.com/2017/04/jquery-ejecutar-cuando-cambie-contenido-de-un-textbox/ 

Hay muchos desarrolladores que son muy reticentes a proporcionar sus secretos al resto de usuarios, a otros no nos importa. Somos conscientes que en poco tiempo, ese conocimiento caduca. Todo avanza, no tiene sentido no proporcionar conocimientos.

El blog tiene unas 275 visitas únicas y unas 800 visualizaciones diarias y me aporta unas ganancias, gracias al programa de publicidad de Google Adsense, que utilizo para pagar el alojamiento de la página web y blog. 

http://blog.trescomatres.com/ 

Mientras la web, www.trescomatres.com, corre sobre Joomla, el blog utiliza Wordpress.  

La plantilla

La plantilla utilizada es la Smart Lite. Una plantilla con apariencia totalmente a blog con una estructura común a todos los blogs.

Ilustración 21: Blog - Plantilla escogida para blog

En nuestro caso particular, la plantilla no ha sido modificada en absoluto. El objetivo principal es ir apuntando las técnicas de programación que utilizamos para tenerlas accesibles. No se busca marca en ningún momento. El usuario del blog, no pretende contratar una web o aplicación.

Plugins

La totalidad de ellos son plugins que se utilizan en la mayoría de Wordpress instalados desde hace mucho tiempo. Son plugins contrastados y con una larga vida. Eso asegura posible problemas de compatibilidad.

Ilustración 22: Blog - Plugins worpdress utilizados

Los más importantes son:

Anti-spam

Evita spam en los comentarios.

Cookie Law Info

Plugin necesario para cumplir la ley de cookies. Muestra el mensaje de advertencia de uso de cookies en la web.

Efficient related Post

Al final de un post, este plugin lista artículos relacionados. De ese modo consigues que el usuario se interese por más artículos.

Estadísticas WP

Estadísticas propias. Muy útil para saber las visitas reales en los artículos y páginas del blog.

Google Adsense Ads Manager

Permite administrar el mostrar anuncios Adwords en el blog.

Google XML Sitemaps

Un plugin que se encarga de crear un sitemap actualizado del blog que él mismo se encarga de enviar en forma de ping a Google.

NextScripts: Social Networks Auto-Poster

Un plugin que permite que se automatice la publicación en las redes sociales de los artículos creados. Configuras adecuadamente el plugin, y cada vez que escribes un artículo, éste se publica en tu cuenta de Facebook, Twitter y/o Google+.

W3 Total Cache

Un plugin de caché que acelera partes del blog.

WP-Optimize

Plugin que facilita mantener Wordpress optimizado. Limpia revisiones de los artículos, optimiza las tablas de las bases de datos, elimina artículos de la papelera…

WP-Syntax

Plugin que permite de una forma visual, escribir código Php, javascript, sql… en los artículos de la web. Un plugin que utilizo mucho.

MEJORAS Y CAMBIOS DE FUTURO

DooFinder

El buscador actual de la tienda es interno. No llega al nivel deseable para proporcionar al cliente una búsqueda detallada e inteligente. DooFinder es un buscador que se adapta a la web y que proporcionar las siguientes ventajas:

Configuración del buscador

Análisis de las búsquedas

Un buscador que aprende del comportamiento de los usuarios para mostrar los resultados.

Fácil instalación

Este último punto, aún por comprobar. En principio hay que facilitarles un enlace RSS de productos y el resto es automático...

https://www.doofinder.com/es/ 

Ilustración 23: DooFinder

Google Shopping

Posibilidad de venta de productos mediante Google Shopping. Para ello hay que darse de alta en Google Merchant, proporcionar el Feed del listado y a continuación hacer la campaña en Google Adwords. 

Los resultados de los productos se mostrarán en la parte superior de las búsquedas. Éstas, al igual que todo anuncio de Adwords, puede configurarse para mostrarse en la localización deseada, en el horario marcado y programando costes de la campaña.

https://www.google.es/shopping?hl=es 

Ilustración 24: Google Shopping

Mejora en redes sociales

Actualmente, a la hora de compartir contenidos de la web en las diferentes redes sociales, lo hace de forma automática y de forma generalizada. Estudiaremos la manera de poder adaptar el compartir los productos en las deferentes redes sociales. Las imágenes, los textos, los hashtags… son diferentes en las redes sociales.

El siguiente paso, será personalizar el compartir los productos adaptándolo mejor a las diferentes redes sociales para sacar el máximo rendimiento.

Cambio masivo de estado de pedidos

Cuando debe administrarse pocos pedidos, las necesidades en el panel de administración de la tienda son unas. Cuando empiezas a recibir más pedidos y debes agilizar todo el proceso de logística, las necesidades cambian.

Este es el caso. Ha surgido la necesidad de cambiar el estado de varios pedidos a la vez, y consecuentemente se envíe los respectivos correos electrónicos a los clientes avisándoles del cambio.

CONCLUSIÓN

Debe quedar muy claro que tener presencia en Internet para una empresa es esencial. La mayoría de empresas ya la tienen en gran medida. Ahora bien, vender por Internet no es fácil. Para tener éxito debe cumplirse unas condiciones, pero cumplir esas condiciones no aseguran el éxito. Algunas de esas condiciones son: 

Apuesta clara por el dueño del negocio por le proyecto.

Dedicación de tiempo al máximo.

Conocimiento absoluto del sector del producto a vender.

Tener un producto diferencial.

Tener conocimientos de administración web.

Tener conocimientos en el manejo de redes sociales.

Conocimientos de idiomas para la venta internacional, incidiendo en el inglés.

Cubrirse legalmente. Debemos tener claro que temas legales debemos tratar.

Trabajar con buenos proveedores.

Tener buen trato con los clientes

Tener paciencia al inicio y no buscar un éxito inmediato.

Evitar problemas técnicos contratando un buen proveedor de servicios de Internet.

Apostar e invertir por la seguridad.

Invertir en sellos de calidad cuando sea posible.

Rodearse de buenos profesionales (diseñadores, desarrolladores…)

Otros puntos pueden hacer fracasar la tienda:

Que el propietario no se implique.

La falta de contacto entre propietario y profesionales que deben desarrollar la web.

Que el propietario no sepa claramente qué quiere.

Profesionales que no cumplen su cometido.

No tener en cuenta a la competencia.

No saber tratar comentarios o críticas en Internet.

No tener claro la logística (envíos parados, errores en envíos, falta de stock…)

No escoger los métodos de pago ideales para el tipo de cliente.

Asignar precios no competitivos

Error en decisiones técnicas (servidores poco potentes, certificados caducados…)

No mostrar bien el producto. Datos insuficientes, fotografías de mala calidad…

No tener en cuenta el tema legal.

No tener en cuenta la navegación por la tienda en dispositivos móviles.

Un mal posicionamiento en los buscadores.

No hacer un seguimiento exhaustivo de las estadísticas.

No saber reaccionar a caídas de servidor, ataques a la tienda…

No hacer copias de seguridad de la tienda.

No cumplir lo que se promete en la web.

Al final, poner en marcha una tienda online es poner en marcha un negocio. No es un plan B a la tienda física, es un plan principal como nuevo negocio.