MD 2

Módulo 2.
Las tiendas online

Cómo se hace una. Fases. Plataformas de tiendas online. Metodologías.
Máster en Comercio Internacional. E-Commerce (EUDE) © Juan del Real 2021 | juan.delreal@docentes.eude.es
Módulo 2: Las tiendas online
2.1.-Qué es un sitio web
2.1.1. El lenguaje HTML
Detrás de una web hay código html
Detrás de una web hay código html
2.1. El lenguaje HTML
HTML (HyperText Markup Language)

Lenguaje de programación que se utiliza para el desarrollo de
páginas de Internet
HTML
 Conjunto de etiquetas (tags)

 Estilos CSS
 Activos (texto, img, vídeo, enlaces, ….)
 Archivos .html
Mi primera página web
Básicos html
 Todo tag se abre <html> y se cierra asi: </html>

 Toda web tiene 3 etiquetas como mínimo:
<html>
<head>
<body>
2.1.1 Mi primera web
Mi primera página web
Aquí va la dirección de la imagen
Prueba.txt
Prueba.htm
2.1.1 Lógica de base de datos
Webs estáticas vs webs dinámicas

Por medio de “sentencias”, una página web puede ofrecer
resultados o grabar datos de/en una bbdd (personas, productos,
direcciones, etc.)
BBDD Tabla Alumnos
Nombre Apellido Curso Edad

Nombre1 Apellido1 2 33
Sentencia: muéstrame todos los nombres
Nombre2 Apellido2 3 38 de alumnos del curso 2º de la tabla “X”
Nombre10 Apellido10 4 26 Resultado: web con un listado de los registros
que cumplen los criterios de la búsqueda
2.1.1. Un sitio web
Un sitio web aloja decenas de tablas de datos

interrelacionadas que se “atacan” secuencialmente
Productos (números, características, precios, stocks,…)
Tiendas físicas (números, stocks, direcciones…)
Clientes (nombres, documentos, direcciones…)
Códigos postales de envío
Pedidos (estados de preparación / envío)
2.1.1. Un sitio web
Un sitio web es un conjunto lógico de páginas web

individuales que hacen consultas y grabaciones de
datos en cientos de tablas de BBDD, con un propósito
Propósitos típicos
 Información  Blog
 Búsqueda  Buscador
 Generación Leads  Aseguradora
 Venta online  Tienda online
2.1.2. Una tienda online
Una tienda online es un conjunto de páginas web con el

propósito de vender productos o servicios
Proceso de compra universal Proceso de compra online

 Entrar en un comercio y coger  Entrar en una web
una cesta de la compra
 Localizar un producto y  Localizar un producto y

añadirlo a tu cesta añadirlo a tu cesta
 Pasar por caja (tpv)  Pasar por caja (tpv virtual)
 Llevártelo contigo  Te lo traen / lo recoges
2.1. Una tienda online
Un testimonio real
Ricardo Lop (Teruel) (www.aceros-de-hispania.com)
https://youtu.be/hLDni_c3cU8
2.1.3. Tipos de tienda online
Hay tiendas online de productos y de servicios
Productos
Servicios finitos
Servicios infinitos
2.1.4. Estructura de una tienda online
Todas las tiendas online tienen la misma estructura

Páginas
 Inicio (Home)
 Página de categoría / Subcategoría
 Página de producto
 Cesta / Carrito
 Checkout: datos, entrega, pago
 Pago y confirmación
 Páginas de texto / emails
La home es la página de “propuesta comercial” https://www.asos.com/es/
Acceso rápido a productos:

-Buscador
-Menú superior
-Listas: favoritos, últimas
compras
Página de categoría “mujer”
Página de subcategoría “mujer/zapatos”
Página de producto (la página “landing” de los buscadores)
Página de producto: añadir a la cesta
Página
de cesta
2.2.-Tecnologías y opciones
2.2.1 Tecnología y plataformas e-commerce
Soluciones e-Commerce
-Blogs + plugin de e-commerce (WordPress-WooCommerce)
-Servicios llave en mano (Shopify, Wix, 1 and 1, Etsy)
-Plataformas de código abierto (Prestashop-Magento)
-Plataformas propietarias (IBM, Oracle, etc.)
-Marketplaces (Tmall, TaoBao, Amazon,eBay JD.com)
https://www.fotografiaecommerce.com/2018/07/25/top-marketplaces-online-ecommerce/
Plataformas más
usadas
Las principales
plataformas SaaS son:
Fuente: https://trends.builtwith.com/shop
Plataformas de e-Commerce por popularidad
https://trends.google.es
Qué plataforma de e-Commerce

Open-source $ t
Magento, Prestashop,
OsCommerce, Wordpress,
Joomla...
Propietarias
IBM, MS, Oracle
$t Mi web
A medida
.Net (ASP), Java JSP, PHP $t
(frameworks)…
Cómo saber qué plataforma usa mi competencia: wappalyzer
2.3.-Cómo se hace una tienda online
2.3.1 Pasos necesarios
Fases:
1 Análisis de necesidades
2 Arquitectura de la información
3 Documento funcional
4 Wireframes (prototipos)
5 Diseño y maquetación
6 Programación o Plataforma
7 TPV virtual y medios de pago
8 Dominio y hosting
2.3.1.1 Análisis de necesidades
2.3.1.1 Análisis de necesidades
-Proceso abierto a personas / ideas
-Revisión producto, oferta, atributos, precio,
-DAFO
-What if….
-Agrupación de ideas en grupos lógicos
-Descarte y profundización
2.3.1.2 Arquitectura de la información
2.3.1.3 Documento funcional
Características:
Escrito y en profundidad a partir del «alcance» (Negocio)
Técnico (ERP, pricing, surtido, especificidades, etc.)
Completo / Integral
Proceso de compra, registro, buscador, logística, etc.
2.3.1.3 Documento funcional
Redacción documento funcional
2.3.1.4 Prototipado
Prototipos: pc, tablet, móvil
2.3.1.4 Prototipado
Páginas a prototipar por soporte (pc, tablet, móvil)

 Inicio (Home)
 Página de categoría / Subcategoría
 Página de producto
 Cesta / Carrito
 Checkout: datos, entrega, pago
 Pago y confirmación
 Págs. estáticas: quiénes somos, aviso legal, etc.
 Módulos fijos: cabecera y pie
2.3.1.4 Prototipado
2.3.1.4 Prototipado
Prototipado responsive (adaptativo)
2.3.1.4 Prototipado
Diseño responsive (adaptativo)
2.3.1.5 Diseño
Cumplir el libro de estilo de la organización. Pensar en buscadores
Diseño Maquetación
Corporativo Accesible y ligera (carga)
Extensión de la marca Ordenada (tidy)
Funcional Responsive
Adaptativo CSS
2.3.1.5 Diseño
Cumplir el libro de estilo de la organización (o crearlo desde cero)
2.3.1.5 Diseño y maquetación
Header y footer
Home
BEPY
BEPY
BEPY
Importante entender de arquitectura web

Frontal web
(PC, tableta, móvil, App, Totem)
Configuraciones web
(tablas precios, clientes, pedidos,
configuraciones)
Cumplir Cliente único
legalidad
ERP
Operativa
Tiendas Web
Reservas Pedidos
2.3.1.6 Programación
Fase clave de una página web que determinará su

rendimiento y escalabilidad
Programar una web es añadir la lógica de la base de datos a la
maquetación (al html)
Programación con metodologías “agile” (Scrum)

-Trocear proyecto en pequeños desarrollos (Sprints)
-Casos de uso e historias de usuario
Historias de usuario (ejemplo)

H TEMA TÍTULO HISTORIA CRITERIO ACEPTACIÓN
H1 Widget de Usuario compra -Como usuario de la web de reservas Criterio de aceptación: se podrá configurar en el sistema
cambio moneda -Me gustaría poder acceder al widget de cambio y ver por defecto (web o GCH la moneda en venta por defecto a sacar en el
extranjera: la moneda extranjera más popular en venta del país. widget) y se comprobará que es la que sale cuando se
moneda por -De tal manera que me permita registrarme si todos los campos accede al widget en la home y página Buy froeign
defecto están OK y se cumple su semántica. currency" https://www.globalexchange.dk/currency-
exchange/buy-foreign-currency
H2 Widget de Usuario compra -Como usuario de la web de reservas Criterio de aceptación: se accederá al widget y se
cambio moneda -Me gustaría poder acceder al widget de cambio y al consultar las comprobará que se muestran todas las monedas listadas
extranjera: monedas en venta disponibles, verlas todas por orden alfabético por orden alfabético de su nombre y que este sea
listado monedas de su nombre. amigable:
-De tal manera que me sea fácil localizar la que me interese Australian Dollar
comprar. Brazilian Real
Bulgarian Lev
etc.
H3 Widget de Usuario compra -Como usuario de la web de reservas Criterio de aceptación: se accederá al widget y se
cambio moneda -Me gustaría poder acceder al widget de cambio y al introducir comprobará que introduciendo una unidad (1) de moneda
extranjera: una cantidad pequeña de moneda extranjera o local que me avise local o moneda demanda, sale un mensaje de compra
compra mínima de si hay una cuantía mínima y me la ponga directamente mínima, el widget se ajusta inmediatemente a ese mínimo
-De tal manera que me sea fácil comprar la cuantía mínima y sale un mensaje informativo:
posible si esa es mi intención, sin tener que cambiar la cifra de "Minimum amount to exchange is [cantidad y moneda
nuevo hasta dar con el umbral mínimo. local]" (esto se puede observar en
www.globalexchange.es introduciendo 1 euro de compra).
Organización en el ERP de las monedas

y sus clases:
2.3.1.6 Programación: mantenimiento
Mantenimiento web
Mantenimiento evolutivo: mejoras de funcionalidad
Mantenimiento correctivo: arreglar lo que ha dejado

de funcionar
2.3.1.6 Mantenimiento evolutivo
Necesidad de medir ventas de agentes
Códigos de agente y operaciones traqueadas

Registro de la venta desde la web en el backoffice
Ventana
oculta
Registro en el backoffice de las ventas por código
Mail que recibe el cliente «telefónico»
Objetivo: «domiciliar clientes»

Resultados 6 meses: 50% venta domicilio (antelación) / 50% aeropuerto (para mañana)
Domicilio: más barato/gano más

Aeropuerto: más caro / gano menos
¿Qué variable se os ocurre que metamos en el widget de cambio según la tipología de

Usuario que llega a la web? ¿Cómo puedo atender a uno u otro subiendo la conversión?
Nuevo widget y funnel de compra: variable «tiempo»
Si sale < 3 d  aeropuerto

Si > 3 d  domicilio/Correos
2.3.1.6 Organización
Ticketing
Herramienta
de trabajo,
presupuesto
2.3.1.6 Organización
Ticketing + Quality & Assurance
Herramientas de tareas e incidencias
https://www.mantisbt.org/
2.3.1.7 Medios de pago
Medios de pago y TPV

Terminal punto de venta (TPV)
Contra-reembolso
Transferencia bancaria
PayPal / PayPalMe
Tarjeta bancaria
Financiación
PayPal (eBay)
https://www.elblogsalmon.com/empresas/paypal-ebay-la-historia-del-pequeno-que-acaba-ganandole-la-partida-a-su-dueno
PayPal.Me
PayPal.Me
Consumoteca.com
paypal.me/bestinternetservices
PayPal.Me
Consumoteca.com
paypal.me/bestinternetservices
PayPal.Me
Consumoteca.com
PayPal.Me
Detalle pago
Pago: 19,95 €
Comisión: 1,03 €
% Comisión: 5,16%
2.4.-Embudo clásico de compra
2.4. Pensamiento clásico
La mayoría de las compañías piensan en el corto plazo:

-El objetivo es siempre a corto plazo y está marcado por las ventas...
-Los objetivos individuales de cada ejecutivo son verticales…
-La misión de la organización no se ha revisado en años…
-El motor de la actividad y los principales KPIs tienen que ver con el
producto / servicio y son financieros (Operaciones vs Cliente)…
¿Qué falta en este enfoque empresarial?
2.4. Pensamiento clásico
El cliente-consumidor que me ha comprado, ha pasado

por un proceso (AIDA):
El customer journey es el proceso por el que un usuario llega a nosotros:

desconocimiento, conocimiento, consideración, contratación.
2.4. Pensamiento clásico vs realidad
El customer journey de siempre ha dejado de ser lineal…

Hoy ese viaje es multicanal y multidispositivo, y el cliente activamente
los alterna en cada punto de contacto con las marcas (touchpoints):
En este viaje, tanto las búsquedas como lo social juegan un papel clave:
-Los buscadores son la fuente número uno de información (>90% los usan para
descubrir, explorar y establecer engagement con productos y marcas).
-Las RRSS complementan a los buscadores (>85% las usa para descubrir
productos y para considerar si adquirirlos o no. 81% reconoce conocer un
producto/marca vía conexiones. 43% compró tras una publicación de una
compañía y 30% por anuncios).
Forrester
http://www.catalystdigital.com/forrester-sem-social-media-marketing-success/
2.4. Nuevo proceso de compra
El cliente-consumidor tiene el poder de las nuevas fases

tras la compra
2.5.-CJ del cambio de moneda
2.5. CJ del cambio de moneda
¿Qué servicios echa de menos?

Encuesta a 4.697 clientes en 3 países
(Dic 2017. Extracto)
-Reservas online (50%)

-Descuentos y promos (16%)
-Info turística destino (10%)
-Más ventanillas, transporte, telecom (5%)
-Transparencia en precios (APPs,
comparación con otros) (4%)
-Transferencias (3%)
-Servicio: idiomas, Iberia Plus, agilidad (3%)
-Presencia pie de calle (3%)
-Seguros (viaje, robo, maletas,…) (1%)
-Caramelos (1%)
www.global-exchange.com (corporate info)
2.5 CJ del cambio de moneda
Qué hemos hecho
www.globalexchange.es + 21 countries
www.grupoglobalexchange.com
(multipurpose site)
www.travelandexchange.com
Qué hemos hecho
Principio customer-first:
• Go digital, globally!
• Más valor a los “digitalizados”
• CRM
• Marketing automation
• Club fidelización
Qué hicimos
Estudiar el customer journey del cliente que cambia
moneda por país:
-Residentes que salen Tienen € 

-Extranjeros que vuelven a casa necesitan divisa
-Extranjeros que vienen Tienen divisa 

necesitan €
-Residentes que vuelven
Identificar los puntos de contacto del cliente

(touchpoints) y ponerse en cada uno en “clave-usuario”
CJ1: Residentes que salen (6 touchpoints)

DESTINO
6-3 meses 4 semanas 7D a 24h D D+1 Retorno + 1,2, 3…

-1 Day Meses
Customised
Búsqueda de info Comparadores + SEM email1 Customised
RRSS, friends&family display Directo email2
Deseo social networks Ejecución
Intención
PROSPECTO CLIENTE
Aeropuerto
Email + Móvil
CRM + Big Data + Club fidelización:

Segmentación + Predictive % cupón con cada operación
Mucho antes de viajar

No es tiempo de cambiar
dinero, no insistamos
• ¡Experiencias!
• ¡Destinos!
• ¡Aspiraciones!
• ¡Deseos!
Marketing
automation
(prospects-> customers) www.travelandexchange.com
Hubspot vs Inbound now
http://www.hubspot.com/what-is-hubspot
Hubspot vs Inbound now
https://www.inboundnow.com
¿Merece la pena invertir en una estrategia de contenidos?
FB Likes: 2.900
FB Share: 9.357
Asegurarse la presencia en la contratación del viaje
Problema de los grandes “soportes”:
https://www.iberiamedia.eu/plataformas-publicitarias/
Problema de los grandes “soportes”
O sea: 100.000 impresiones = 200 clics = 2 pedidos  CPA = 175 €

350 € 0,20% CTR 1% CR
Problema de los grandes “desarrollos”: no eres prioritario
Siempre hay empresas dinámicas
http://www.despegar.com.co/benefits/st/TUMwQ0ZELVpvZTZ2ZUpiNzdZSlNjc05ZWkZXUnJ6UW1BaFVBbGFKd09iOHVGckV3cFRNeGZRTzltTFVmOEtjIDIzODE1OTAy?lang=es&utm_sou
rce=benefits_newsletters&utm_medium=email&utm_campaign=destination_benefits&c=benef&etype=benef&ltype=sell&co=CO&mktdata=n%3De%26c%3Dbenef%26etype%3Dben
ef%26ltype%3Dsell%26co%3DCO%26id%3D201605260953357229296513292949%26trackeame_user_id%3DFA163E1866011463859390007c165ce1a-c9e1-4674-baed-
51d364e42e923253764#/
Siempre hay empresas

dinámicas:
Siempre hay empresas dinámicas
https://www.nautaliaviajes.com/cambio-de-moneda/
7-1 día antes de viajar: cliente nos localiza en Google
En el aeropuerto
• Aligerar tiempos
• Vencer miedos
• Trato
• Transparencia…
 Obtener email
D+1:
mails personalizados
D+1:
mails personalizados

MD 2

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

MD 2

Cargado por

Copyright:

Formatos disponibles

Módulo 2.

Las tiendas online

2.1.-Qué es un sitio web

Detrás de una web hay código html

Detrás de una web hay código html

HTML (HyperText Markup Language)

 Conjunto de etiquetas (tags)

Mi primera página web

 Todo tag se abre <html> y se cierra asi: </html>

Mi primera página web

Aquí va la dirección de la imagen

Webs estáticas vs webs dinámicas

Nombre Apellido Curso Edad

Un sitio web aloja decenas de tablas de datos

Productos (números, características, precios, stocks,…)

Tiendas físicas (números, stocks, direcciones…)

Clientes (nombres, documentos, direcciones…)

Códigos postales de envío

Pedidos (estados de preparación / envío)

Un sitio web es un conjunto lógico de páginas web

 Generación Leads  Aseguradora

 Venta online  Tienda online

Una tienda online es un conjunto de páginas web con el

Proceso de compra universal Proceso de compra online

 Localizar un producto y  Localizar un producto y

 Pasar por caja (tpv)  Pasar por caja (tpv virtual)

 Llevártelo contigo  Te lo traen / lo recoges

Hay tiendas online de productos y de servicios

Todas las tiendas online tienen la misma estructura

 Página de categoría / Subcategoría

 Checkout: datos, entrega, pago

 Páginas de texto / emails

Acceso rápido a productos:

-Blogs + plugin de e-commerce (WordPress-WooCommerce)

-Servicios llave en mano (Shopify, Wix, 1 and 1, Etsy)

-Plataformas de código abierto (Prestashop-Magento)

-Plataformas propietarias (IBM, Oracle, etc.)

-Marketplaces (Tmall, TaoBao, Amazon,eBay JD.com)

Plataformas de e-Commerce por popularidad

Qué plataforma de e-Commerce

Cómo saber qué plataforma usa mi competencia: wappalyzer

2.3.-Cómo se hace una tienda online

-Proceso abierto a personas / ideas

-Revisión producto, oferta, atributos, precio,

-Agrupación de ideas en grupos lógicos

Escrito y en profundidad a partir del «alcance» (Negocio)

Técnico (ERP, pricing, surtido, especificidades, etc.)

Proceso de compra, registro, buscador, logística, etc.

Redacción documento funcional

Prototipos: pc, tablet, móvil

Páginas a prototipar por soporte (pc, tablet, móvil)

Prototipado responsive (adaptativo)

Diseño responsive (adaptativo)

Cumplir el libro de estilo de la organización. Pensar en buscadores

Cumplir el libro de estilo de la organización (o crearlo desde cero)

Importante entender de arquitectura web

Fase clave de una página web que determinará su

Programación con metodologías “agile” (Scrum)

Historias de usuario (ejemplo)

Organización en el ERP de las monedas

Mantenimiento evolutivo: mejoras de funcionalidad

Mantenimiento correctivo: arreglar lo que ha dejado

Necesidad de medir ventas de agentes