7 dic 2017

3 Formas de mejorar tu ecomrce


El mundo del marketing online cambia la mayoría del tiempo rápidamente. La tecnología avanza y las nuevas plataformas brindan una capacidad infinita para permitir a las personas interactuar de forma online de forma diferente cada vez.

Hay varias formas de mejorar creativamente la experiencia de ecommerce del usuario; y esto generalmente incrementará la lealtad del consumidor y aumentará así tus ingresos.


juntoz ecommerce
 1. Mejora la navegación de la página (búsqueda de productos)
Generalmente, los consumidores online están interesandos en tres categorías diferentes, basados en sus expectativas individuales, intenciones y necesidades; eso incluye el seguiminto.
Las personas ya saben lo que están buscando. Los compradores que saben exactamente qué quieren irán directamente a la barra de búsqueda de productos. Cuando está estratégicamente colocada, tus consumidores encontrarán fácilmente lo que están buscando. También debes incorporar al función de autocompletar para poder asistir a los consumidores que no pueden recordar el nombre de un producto. Esto mejora significativamente la experiencia del usuario.
Las personas que están navegando en tu página de ecommerce. Los compradores que navegan en tu web necesitan una variedad de opciones como marcas, color, precios y tallas. Debes permitirles personalizar esta experiencia.
Las personas que necesitan ayuda con los filtros. Estas son personas quienes tienen un criterio específico para la búsqueda de sus productos pero no saben generalmente qué quieren. Tal vez quieras incluir características de los productos en las opciones para que el filtrado sea más fácil.
juntoz ecommerce
  2. Minimiza la molestia en el proceso de checkout
Mantenlo simple- esto no es nada nuevo pero sin embargo es obligatorio que mantengas las transacciones de tu negocio simplificadas. Muchos negocios no se enfocan realmente en qué tan difícil o fácil podría ser completar el proceso de checkout.
¿Cómo puedes simplificar el proceso de checkout y mejorar la experiencia de usuario en tu ecommerce?
La vista del carrito de compras. Mientras los consumidores compran, el carrito de compras debe ser claro y accesible fácilmente en cada página. Un pop-up podría probar ser muy útil si el consumidor quisiera agregar un ítem. Esto les notificará que están agregando ítems y pueden confirmar si quieren proceder con el checkout.
Incluye precios y tarifas de envío en el carrito de compras. No engañes a los consumidores de ninguna forma. Los precios y tarifas deben estar incluidos en el carrito de compras. Además, debes incluir cualquier oferta especial que permita a los usuarios ahorrar dinero.
Haz que el inventario y los productos recomendados estén visibles. El inventario y productos recomendados son importantes para los consumidores porque podrían tal vez comprar el mismo ítem luego. Si el producto se agotará pronto, debes incluir una opción en la cual los compradores puedan chequear cuando vuelva a estar disponible.
En la página de checkout, haz que los productos recomendados estén visibles, especialmente aquellos relacionados con lo que ya ha comprado el consumidor. Estos productos recomendados pueden motivar las recompras. Hay momentos en que los consumidores pierden el interés en el producto que está agotado y podrías dirigir su interés hacia otros ítems.
Si puedes, deberías siempre ofrecer una gran variedad de opciones de pago -especialmente aquellas que son comúnmente usadas por la mayoría de los compradores online.
juntoz ecommerce
Ofrece una cuenta de registro: Algunos sitios de ecommerce ofrecen opciones de registro antes de completar la transacción. Como sea, esto no debería ser un requerimiento porque podría lograr que los compradores abandonen por completo el proceso de checkout.
  3. Mejora el servicio al consumidor
Las páginas web de ecommerce -igual que los negocios tradicionales- deben tener un buen servicio de atención al cliente, especialmente en las páginas donde pueden comprar solo después de colocar la información de su email. Solo porque el servicio al consumidor no necesariamente significa que tienes que interactuar personalmente con ellos.
Asegúrate de que toda tu información de contacto como email y número de teléfono son visibles en cada página para tu web de ecommerce. Esto le da a tus consumidores una forma de estar en contacto contigo si tienen cualquier duda.
No abrumes a los consumidores con información que no necesitan, especialmente en la sección de preguntas comunes. Hay momentos cuando abrumarlos en la sección de preguntas frecuentes puede determinar que los consumidores hagan o no la compra.
juntoz ecommerce

Nuevas instalaciones de Joomla!

Las descargas de esta sección son para nuevas instalaciones de Joomla.
This is the full download package for Joomla! 3.8.2
Descargada
6,051 veces
Tamaño del archivo
7.37 MB
Firma MD5
ca220de6defe51791e6b9b07f8b484e8
Firma SHA1
a2192b7d779957d315ca91a5674336fc20807fd9
This is the full download package for Joomla! 3.8.2
Descargada
10,376 veces
Tamaño del archivo
8.98 MB
Firma MD5
75327d7d3a3a9bc044cc64705e8bca3f
Firma SHA1
bc679bf35ed15ccdb8e864eec6cf9eb9a2677025
This is the full download package for Joomla! 3.8.2
Descargada
157,477 veces
Tamaño del archivo
12.85 MB
Firma MD5
6a233da532d72ad631702f5360797460
Firma SHA1
e68745d55cc5b1a7bb46f72f4296c6550e088543

Actualizar instalaciones existentes de Joomla!

Las descargas de esta sección son para actualizar sitios Joomla! existentes. Selecciona el paquete que coincide con tu versión actual.
This package is for performing updates from Joomla! 3.8.1 to 3.8.2
Descargada
1,511 veces
Tamaño del archivo
697.73 kB
Firma MD5
f7c03a25ecb484bc3c4e2477d0277f38
Firma SHA1
cc9c230ca6818b209514b87de75a526940232425
This package is for performing updates from Joomla! 3.8.1 to 3.8.2
Descargada
557 veces
Tamaño del archivo
869.81 kB
Firma MD5
8ac50e5e253ceccc2ac1f5a590b52e3c
Firma SHA1
79d54fd2ba1f1b8942bb116e4fac1ac6ec9d60f8
This package is for performing updates from Joomla! 3.8.1 to 3.8.2
Descargada
3,442 veces
Tamaño del archivo
1.07 MB
Firma MD5
5f88c1a755e5102df57bc6243b8c3b40
Firma SHA1
768260947953035e47d1a3830a8498b335162f16
This package is for performing updates from Joomla! 3.8.x to 3.8.2
Descargada
348 veces
Tamaño del archivo
757.76 kB
Firma MD5
04d794957edeb72b8aadfb33f992c99c
Firma SHA1
9b94eb5ec9ca5e2b8b6ac9dbdaa3552d8d43ea44
This package is for performing updates from Joomla! 3.8.x to 3.8.2
Descargada
277 veces
Tamaño del archivo
955.63 kB
Firma MD5
9fd69512bc23bfa9dc74e86d00bbdb9e
Firma SHA1
a5274e96292129fc5c114eb5aba236716b5e5cbc
This package is for performing updates from Joomla! 3.8.x to 3.8.2
Descargada
1,566 veces
Tamaño del archivo
1.17 MB
Firma MD5
d597a5c265217f346cf98b8e49c2df63
Firma SHA1
0a4111901d2e7a0ade649a021f0c96267356e0b5
This package is for performing updates from Joomla! 2.5 and previous 3.x releases to 3.8.2.
Descargada
1,306 veces
Tamaño del archivo
6.33 MB
Firma MD5
9b8c6980f158443abdc9ab79ff72e055
Firma SHA1
09a7e15699473a6aeecd26dd727ff634668cc131
This package is for performing updates from Joomla! 2.5 and previous 3.x releases to 3.8.2.
Descargada
1,036 veces
Tamaño del archivo
7.75 MB
Firma MD5
e863061c6396cebfc6a92c42731d5c86
Firma SHA1
d88f11561adb03c20af931ce39df8696d09f0e3f
This package is for performing updates from Joomla! 2.5 and previous 3.x releases to 3.8.2.
Descargada
712,468 veces
Tamaño del archivo
11.37 MB
Firma MD5
ff645202ef7621be6e2c691d4e17511c
Firma SHA1
27980fd07347e2254f885717fae58e53450c3142

4 dic 2017

Validar formularios con HTML5 y CSS3





Resumen: En este artículo explicamos como validar de forma sencilla formularios usando HTML5 y CSS3, de forma que ahorramos tiempo con la simplicidad de códigos que supone el nuevo HTML5.

Validar formularios con HTML5 y CSS3

Imagina que te encuentras en un Viernes a las 5 de la tarde, estás a punto de salir del trabajo y en el último momento llega una petición urgente para realizar un formulario para el sitio de ventas de la empresa. Necesitas validarlo muy bien porque de ello depende que los datos del cliente lleguen al servidor de manera correcta y además necesitas darle al formulario un estilo adecuado porque es la imagen de la empresa la que está en juego.

Por tu parte ya no quieres saber nada del trabajo, es Viernes, falta 1 hora para irte a disfrutar de tu fin de semana y lo que menos deseas hacer es crear y validar un formulario, pero debes entregar algo para que sea probado en QA. Es entonces que HTML5 entra al rescate y te ayuda a validar tus campos con una serie de atributos sencillos de aprender y aplicar, los cuales simplemente debes incrustar en el código del formulario.

Al momento de crear los elementos del formulario de la siguiente manera:

1
2
3
<input id ="nombre" name="nombre" type="text" />
<input id ="email" name="email" type="text" />
<input id ="telefono" name="telefono" type="text" />
Indicamos que los tres serán de tipo texto, se les asigna un id y un nombre respectivo para posteriores funciones de validación, las cuales cotidianamente llevábamos acabo en el lado cliente con Javascript.

Con esta declaración clásica tendríamos que validar que el texto introducido en el campo email realmente lleve la estructura deseada, con un nombre de usuario seguido de una “@” y finalmente el dominio, para ello podemos usar una expresión regular o simplemente podemos cambiar el atributo “type” del elemento “input” con HTML5, declarándolo como email de la siguiente manera:



1
<input id ="email" name="email" type="email" />

Ahora al momento de introducir un texto nos pedirá que sea con esa estructura, en caso de no ser así enviará una advertencia generada y dependiente del propio navegador. Hay que recordar que hasta el momento HTML5 sólo es interpretado por los navegadores estandarizados como Chrome, Safari, Opera y Firefox.

El atributo “type” puede tener otro valores como “url” (dirección de internet), “tel” (teléfono) o “password” (contraseña) que ayudarán a hacer una validación más sencilla, además de agregar especificación al formulario y permitir que se pueda aplicar estilos por tipo a los distintos campos.

Podemos agregar atributos adicionales como “placeholder” que colocará un texto como ejemplo dentro del campo, el cual desaparecerá al momento de dar clic sobre él. El atributo “required” agrega la propiedad de obligatorio a un campo, por lo que si no se introduce un valor en él, el formulario no se enviará.

1
<input id ="email" name="email" type="email" placeholder="ejemplo@dominio.com" required />
El atributo “autofocus” se emplea para designar el campo seleccionado por defecto al momento de cargar la página, esto elimina la necesidad de recurrir a scripts para lograr esta función. Ahora se puede representar de la siguiente manera:

1
<input id ="nombre" name="nombre" type="text" required autofocus/>
Lo que anteriormente se hacía así:

1
2
<input id ="nombre" name="nombre" type="text" />
<script>document.getElementById('nombre').focus();</script>
Con esto podemos construir un formulario rápido y sencillo en nuestro hosting. Siguiendo los estándares y recomendaciones queda estructurado de la siguiente manera:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<form id="pago">
<fieldset>
<legend>Datos personales</legend>
<ol>
<li>
<label for="nombre">Nombre</label>
<input id="nombre" name="nombre" type=text placeholder="Escribe tu nombre completo" required autofocus>
</li>
<li>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="ejemplo@dominio.com" required>
</li>
<li>
<label for="telefono">Teléfono</label>
<input id="telefono" name="telefono" type="tel" placeholder="Ej. +4466212112154" required>
</li>
<li>
<label for="pais">País</label>
<input id="pais" name="pais" type="text" required>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Datos de tarjeta de crédito</legend>
<ol>
<li>
<label for="numtarjeta">Número</label>
<input id="numtarjeta" name="numtarjeta" type="number" placeholder="Ej. 555-444-333-222" required>
</li>
<li>
<label for="nomtarjeta">Nombre</label>
<input id="nomtarjeta" name="nomtarjeta" type="text" placeholder="Nombre exacto del propietario" required>
</li>
</ol>
</fieldset>
-------------------------------------------------
<fieldset>
<button type="submit">Realizar compra</button>
</fieldset>
</form>
Y para concluir agregamos estilo a nuestro formulario, primero nos enfocamos en la parte general, le damos un fondo de color “SteelBlue”, modificamos su tamaño de letra a 12 píxeles, agregamos un borde de color “LightSteelBlue” y le damos un toque extra con las puntas del borde redondeadas.

1
2
3
4
5
6
7
8
9
10
11
12
form#pago {
margin:auto;
background: SteelBlue;
color: white;
font-size: 12px;
padding: 30px;
width: 350px;
border:solid 10px LightSteelBlue;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
Quitamos las lineas de los fieldset para que no contrasten con el diseño.

1
2
3
form#pago fieldset {
border: none;
}
Le agregamos color al borde de los campos, redondeamos su borde y los alineamos a la derecha dándoles un tamaño de 200 píxeles, lo que los alinea sin la necesidad de recurrir a tablas.

1
2
3
4
5
6
7
8
9
10
11
form#pago input{
font-size:12px;
background: white;
border:solid 1px LightSteelBlue;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
float: right;
margin-right: 15px;
width: 200px;
}
Finalmente arreglamos los elementos de la lista para que no se muestren los números y agregar un poco de espacio entre líneas.

1
2
3
4
form#pago ol li {
line-height: 25px;
list-style: none;
}
Y si queremos agregar un estilo o color particular para que los campos obligatorios sean distinguidos, podemos recurrir a alguna de los siguientes códigos:

1
2
3
4
5
6
7
form#pago [required]{
border:solid 1px red;
}
 
input:required {
outline: 1px solid red;
}
Con esto obtenemos un formulario bastante decente para nuestra web o blog, que se puede construir en menos de 10 minutos, dejándonos respirar y permitiéndonos salir a tiempo del trabajo para disfrutar nuestro fin de semana.