{Herramientas y Aplicaciones para Ecommerce}

Dr. Alfredo de Jesús Gutiérrez Gómez

Contenido

Presentación

Temas

Políticas

Lineamientos

Actividad de encuadre

Recomendaciones para la entrega de trabajos / actividades / proyectos

{Presentación}

Instrucciones para la presentación

1.  Piense en el nombre de un animal que inicie con la primera letra de su nombre.

2. Este no deberá repetirse.

3. Al presentarse deberá completar la siguiente frase:

Mi nombre es: _______ y he venido sobre un/a: _______ a la escuela desde _____

4. Dar respuesta a las preguntas:

4.1  ¿Porqué estudio está carrera?

4.2  ¿Qué me ha gustado de la carrera hasta ahora?

{Temas}

Introducción a las aplicaciones web y ecommerce

  • Arquitectura de una aplicación web
  • Transferencia de información en una aplicación web
  • Herramientas de prototipado de aplicaciones web
  • Definición y tipo de ecommerce
  • Ventajas del ecommerce
H.A.E-commerce

Unidad I

Framework de desarrollo web y ecommerce

  • Framework del lado del cliente
  • Framework del lado del servidor
  • Marketplace horizontales y verticales
  • SaaS y Cloud solutions

Unidad II

H.A.E-commerce

Elementos de un sitio de ecommerce

  • Elementos que conforman un sitio de comercio electrónico
  • Elección del Hosting
  • Medios de pago
  • Pasarelas de pago

Unidad III

H.A.E-commerce

Marketing, venta multicanal y logística de un ecommerce

  • Técnicas de Marketing digital
  • Venta multicanal
  • E – Logística
  • Servicio al cliente

Unidad IV

H.A.E-commerce

Arq. de sitios de Ecommerce

  • Capa de presentación
  • Construcción de la capa de datos
  • Construcción de la capa de negocios
  • Implementación de mecanismos de seguridad

Unidad V

H.A.E-commerce

Políticas de clases

H.A.E-commerce

Políticas de clases

Políticas de clases

H.A.E-commerce

Políticas de clases

  • Teléfono móvil en modo silencio.
  • Las llamadas urgentes /prio se contestan fuera del salón.
  • Turnos de una sola persona para ir al WC.
  • Dos faltas a la semana sin justificante perderían derecho a las cuestiones de aprendizaje.
  • Levantar la mano para participar.
  • Respetar la participación de cada alumno.
H.A.E-commerce

Lineamientos de clases

{Lineamientos de clases}

H.A.E-commerce

Lineamientos de clases

  • Mantenerse informado acerca de las lecturas, actividades y tareas del curso asistiendo por lo menos dos veces por semana, durante la duración del curso.
  • Cumplir dentro del aula virtual con todas las tareas, foros y actividades detalladas por el programa académico y el profesor, en el tiempo y forma establecidos.

  • El incumplimiento de las tareas en tiempo y forma llevarán a una no aprobación del curso.

H.A.E-commerce

Lineamientos de clases

  • Realizar el seguimiento personal desde el Aula Virtual.

  • Estar pendiente de los resultados de las evaluacion/es parcial/es y final/es.

  • Notificar al tutor por escrito, con copia a la coordinación académica, si, por alguna razón excepcional, se encontrara en una circunstancia especial que le impidiera continuar con el curso y recibir así indicaciones de cómo proceder a partir de ese momento.

H.A.E-commerce

Descripción de las actividades

{Descripción de las actividades}

H.A.E-commerce

Descripción de las actividades

Unidad 1. Introducción a las aplicaciones web y al comercio electrónico

  • Caso de estudio
  • Cuestionamientos de aprendizaje
H.A.E-commerce

Descripción de las actividades

Unidad 2. Frameworks de desarrollo web y comercio electrónico

  • Estudio de caso
  • Cuestionamientos de aprendizaje
H.A.E-commerce

Descripción de las actividades

Unidad 3. Elementos de un sitio de comercio electrónico

  • Caso de estudio
  • Cuestionamientos de aprendizaje
H.A.E-commerce

Descripción de las actividades

Unidad 4. Marketing, venta multicanal y logística de un comercio electrónico

  • Caso de estudio
  • Cuestionamientos de aprendizaje
H.A.E-commerce

Descripción de las actividades

Unidad 5. Arquitectura de sitios de comercio electrónico

  • Caso de estudio
  • Cuestionamientos de aprendizaje
H.A.E-commerce

Descripción de las actividades

Proyecto

  • Documentación
  • Presentación
H.A.E-commerce

 Actividades

{Actividades de encuadre}

H.A.E-commerce

 Actividades de encuadre

Instrucciones:

 En una hoja escribe la respuesta a la siguiente pregunta:

  • ¿Qué esperas que se enseñe en este curso?

Tiempo de la actividad: 6 minutos

H.A.E-commerce

 Actividades de encuadre

Instrucciones:

 En una hoja escribe la respuesta a la siguiente pregunta:

  • ¿A qué te comprometes en este curso?

Tiempo de la actividad: 6 minutos

H.A.E-commerce

 Actividades de encuadre

Instrucciones:

 En una hoja escribe la respuesta a la siguiente pregunta:

  • ¿Qué deseas aprender en este curso?

Tiempo de la actividad: 6 minutos

H.A.E-commerce

 Actividades de encuadre

Instrucciones:

  • Pulsa aquí para subir tus respueta y unirte al grupo

 

Tiempo de la actividad: 16 minutos

H.A.E-commerce

 Recomendaciones

{Recomendaciones para las actividades}

H.A.E-commerce

 Recomendaciones

  • Presentación / portada
  • Introducción
  • Conclusión

Recomendaciones para las actividades Trabajos

  • Mayores a tres líneas
  • Menores a ocho líneas
  • Coherencia entre párrafos

Recomendaciones para las actividades Párrafos:

Recomendaciones para la Ortografía - Gramática

  • Acentuación.
  • Evitar redundancia.
  • Pleonasmos.
  • Máximo tres errores.
H.A.E-commerce

 Recomendaciones

  • Al menos tres citas dentro del trabajo.
  • En formato APA 7ma edición.

Referencias bibliográfica

  • Al menos tres fuentes de diversos autores.
  • Con sangría francesa al inicio de cuatro espacios.
  • Fuente Times New Roman.
  • 12 puntos.
  • Sin enlaces activos.

Lista referencia bibliográfica

H.A.E-commerce

 Recomendaciones

  • Al menos tres párrafos.

Introducción y conclusión

  • Fuente Arial.
  • Tamaño de título: 14 puntos.
  • Tamaño de texto: 12 puntos.
  • Interlineado 1.5
  • Alineación justificada del texto.
  • Los títulos alineados a la izquierda.
  • En el encabezado del documento colocar el logotipo del instituto alineado a la derecha. Nombre de la carrera a la izquierda.

Formato del trabajo

H.A.E-commerce

 Recomendaciones

  • Hacerlos en dia.
  • Exportarlos a jpg / png

Diagramas

  • Colocarle al pie de la tabla un nombre a la tabla, bajo el siguiente formato:  <Tabla numero consecutivo>. <nombre_tabla> .<Fuente:> <donde_fue_tomada> .
  • Colocar un párrafo descriptivo de la tabla.

Tablas

H.A.E-commerce

 Recomendaciones

Ejemplo recomendado para el uso de tablas

IA I POO P. batch
11 10 9
19 6 9

Tabla 1. Listado de materias con calificaciones obtenidas en cada actividad. Fuente: Creación propia

En la tabla 1, se puede apreciar tres materias donde se encuentra las calificaciones obtenidas en dos actividades realizadas en cada una de ellas. Para calcular el promedio solo se debe de sumar cada actividad en un nuevo renglón y dividirlo entre dos que son el número de actividades.

H.A.E-commerce

 Recomendaciones

Ejemplo recomendado para el uso de tablas

IA I POO P. batch
11 10 9
19 6 9

Tabla 1. Listado de materias con calificaciones obtenidas en cada actividad. Fuente: Tomada del libro Introducción a la programación de Luis Joyanes Aguilar. P.19.

En la tabla 1, se puede apreciar tres materias donde se encuentra las calificaciones obtenidas en dos actividades realizadas en cada una de ellas. Para calcular el promedio solo se debe de sumar cada actividad en un nuevo renglón y dividirlo entre dos que son el número de actividades.

H.A.E-commerce

 Recomendaciones

Imagenes / diagramas / gráficas

  • Colocarle al pie de la imagen / diagrama / gráfica un nombre, bajo el siguiente formato:  <nombre_objeto numero consecutivo>. <nombre_objeto> <fuente:> <donde_fue_tomada> .
  • Colocar un párrafo donde se describa la imagen / diagrama / gráfica
H.A.E-commerce

 Recomendaciones

Ejemplo recomendado para el uso de imagen / gráfica / diagramas

En la imagen 1 se puede observar la fachada de una casa convencional donde. Lo que permite poder llevar acabo construcciones básicas pero eficientes, con canaletas para la recolección de agua pluvial y su posterior tratamiento.

Imagen 1. Fachada de una casa. Fuente: Creación propia

H.A.E-commerce

 Recomendaciones

Ejemplo recomendado para el uso de imagen / gráfica / diagramas

En la imagen 1 se puede observar la fachada de una casa convencional donde. Lo que permite poder llevar acabo construcciones básicas pero eficientes, con canaletas para la recolección de agua pluvial y su posterior tratamiento.

Imagen 1. Fachada de una casa. Fuente: Tomado del libro Diseños y principios básicos de arquitectura de Ruben Vazquez

H.A.E-commerce

 Recomendaciones

{Dudas - Preguntas - Comentarios}

H.A.E-commerce

web

{Unidad I}

Introducción a las aplicaciones web y al comercio electrónico

Introducción a las aplicaciones web y al comercio electrónico

Clasificación de las aplicaciones web

Transferencia de información en las aplicaciones web

Solicitud del lado del cliente

Procesamiento del lado del servidor

Tipos de e-commerce

Modalidad de e-commerce

Ventajas del e-commerce

Desafios del e-commerce

Ventajas al implementar el e-commerce

HyAE-commerce

Arquitectura de aplicaciones web

Clasificación de las Aplicaciones Web

web estáticas

No ofrecen interacción dinámica con el usuario. Los contenidos son fijos y requieren cambios manuales para actualizar la información.

web dinámicas

Permiten interacción con los usuarios y generan contenido dinámico basado en las solicitudes del usuario. Utilizan bases de datos para almacenar y recuperar información.

 web de comercio electrónico

Están diseñadas para facilitar transacciones comerciales en línea.

HyAE-commerce

Arquitectura de aplicaciones web

Clasificación de las Aplicaciones Web

web estáticas

Un sitio web informativo de una empresa.

web dinámicas

Aplicaciones de redes sociales como Facebook o Twitter.

 web de comercio electrónico

Amazon o eBay

HyAE-commerce

Arquitectura de aplicaciones web

Clasificación de las Aplicaciones Web

portales web

Yahoo! o Google News.

 web progresivas (PWA)

Spotify Web.

HyAE-commerce

Arquitectura de aplicaciones web

Clasificación de las Aplicaciones Web >> Actividad de Aprendizaje 

Pulsa aquí o escanea el qr y resuelve la actividad

HyAE-commerce

Arquitectura de aplicaciones web

Transferencia de información en aplicaciones web

El proceso mediante el cual los datos se intercambian entre el cliente (normalmente un navegador web) y el servidor (donde se aloja la aplicación). Este proceso es fundamental para el funcionamiento de cualquier aplicación web dinámica.

HyAE-commerce

Arquitectura de aplicaciones web

Transferencia de información en aplicaciones web

El proceso mediante el cual los datos se intercambian entre el cliente (normalmente un navegador web) y el servidor (donde se aloja la aplicación). Este proceso es fundamental para el funcionamiento de cualquier aplicación web dinámica.

HyAE-commerce

Arquitectura de aplicaciones web

Transferencia de información en aplicaciones web

Lenguajes de representación de estructura y datos en internet

XML (Extensible Markup Language)

  • Es un lenguaje de marcado extensible que permite definir la estructura de los datos mediante etiquetas.

  • Es legible tanto por humanos como por máquinas.

  • Se utiliza para intercambiar datos entre sistemas diferentes y para configurar aplicaciones.

<persona>
  <nombre>Juan Pérez</nombre>
  <edad>30</edad>
</persona>

HyAE-commerce

Arquitectura de aplicaciones web

Transferencia de información en aplicaciones web

Lenguajes de representación de estructura y datos en internet

JSON (JavaScript Object Notation)

{
  "nombre": "Juan Pérez",
  "edad": 30
}

  • Es un formato ligero basado en texto que se utiliza para representar datos estructurados.

  • Es fácil de leer y escribir para humanos y fácil de analizar para las máquinas.

  • Se utiliza comúnmente en aplicaciones web para la comunicación entre el cliente y el servidor, especialmente con JavaScript.

HyAE-commerce

Arquitectura de aplicaciones web

Transferencia de información en aplicaciones web

Lenguajes de representación de estructura y datos en internet

SQL (Structured Query Language)

SELECT nombre, edad FROM personas WHERE ciudad = 'Madrid';

  • Es un lenguaje de consulta estructurado que se utiliza para gestionar y manipular bases de datos relacionales.

  • No es un formato de transferencia en sí mismo, sino un lenguaje para interactuar con bases de datos que almacenan la información.

  • El servidor utiliza SQL para consultar, insertar, actualizar o eliminar datos en la base de datos y luego formatea la respuesta (a menudo en JSON o XML) para enviarla al cliente.

HyAE-commerce

Arquitectura de aplicaciones web

Transferencia de información en aplicaciones web

Lenguajes de representación de estructura y datos en internet

HyAE-commerce

Arquitectura de aplicaciones web

Transferencia de información en aplicaciones web

Actividad de reforzamiento

Pulsa aquí o escanea el qr

HyAE-commerce

Arquitectura de aplicaciones web

Transferencia de información en aplicaciones web

Proceso de transferencia de información en arquitecturas de aplicaciones web

  • El usuario interactúa con la aplicación web en su navegador (cliente) y realiza una acción que requiere datos del servidor (por ejemplo, hacer clic en un botón, enviar un formulario).
  • El navegador envía una solicitud HTTP al servidor.
  • Esta solicitud incluye información como la URL solicitada, el tipo de solicitud (GET, POST, etc.) y cualquier dato adicional que se envíe (por ejemplo, datos de un formulario).

Solicitud del cliente (Request)

HyAE-commerce

Arquitectura de aplicaciones web

Transferencia de información en aplicaciones web

Proceso de transferencia de información en arquitecturas de aplicaciones web

Solicitud del cliente (Request)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario GET y POST</title>
    <script>
        function handleGetForm(event) {
            event.preventDefault(); // Prevenir el comportamiento por defecto
            const form = event.target;
            const url = new URL(window.location.href);
            url.search = new URLSearchParams(new FormData(form)).toString();

            document.getElementById('response').innerHTML = `<strong>Respuesta GET:</strong> ${url.searchParams.get('name')}`;
            history.pushState(null, '', url); // Actualizar la URL sin recargar la página
        }

        function handlePostForm(event) {
            event.preventDefault(); // Prevenir el comportamiento por defecto
            const form = event.target;
            const formData = new FormData(form);

            document.getElementById('response').innerHTML = `<strong>Respuesta POST:</strong> ${formData.get('name')}`;
        }
    </script>
</head>
<body>
    <h1>Formulario con GET y POST</h1>

    <div id="response" style="margin-bottom: 20px;">
        <strong>La respuesta aparecerá aquí.</strong>
    </div>

    <!-- Formulario para método GET -->
    <form onsubmit="handleGetForm(event)">
        <label for="getName">Nombre (GET):</label>
        <input type="text" id="getName" name="name" required>
        <button type="submit">Enviar por GET</button>
    </form>

    <br>

    <!-- Formulario para método POST -->
    <form onsubmit="handlePostForm(event)">
        <label for="postName">Nombre (POST):</label>
        <input type="text" id="postName" name="name" required>
        <button type="submit">Enviar por POST</button>
    </form>
</body>
</html>

HyAE-commerce

Arquitectura de aplicaciones web

Transferencia de información en aplicaciones web

Proceso de transferencia de información en arquitecturas de aplicaciones web

Procesamiento en el servidor

El servidor recibe la solicitud y la procesa

Acceso a la base de datos

El servidor utiliza SQL, interactuar con la BD y obtener los datos solicitados.

Lógica de la aplicación

El servidor ejecuta la lógica de la aplicación para procesar los datos y generar una respuesta.

Formato de la respuesta

El servidor formatea la respuesta en un formato adecuado, como JSON o XML.

HyAE-commerce

Arquitectura de aplicaciones web

Transferencia de información en aplicaciones web

Proceso de transferencia de información en arquitecturas de aplicaciones web

Procesamiento en el servidor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario GET y POST</title>
</head>
<body>
    <h1>Formulario con GET y POST</h1>

    <div id="response" style="margin-bottom: 20px;">
        <strong>La respuesta aparecerá aquí.</strong>
    </div>

    <!-- Formulario para método GET -->
    <form action="process.php" method="GET">
        <label for="getName">Nombre (GET):</label>
        <input type="text" id="getName" name="name" required>
        <button type="submit">Enviar por GET</button>
    </form>

    <br>

    <!-- Formulario para método POST -->
    <form action="process.php" method="POST">
        <label for="postName">Nombre (POST):</label>
        <input type="text" id="postName" name="name" required>
        <button type="submit">Enviar por POST</button>
    </form>
</body>
</html>

HyAE-commerce

Arquitectura de aplicaciones web

Transferencia de información en aplicaciones web

Proceso de transferencia de información en arquitecturas de aplicaciones web

Procesamiento en el servidor

<?php
// Configuración de la base de datos
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "testdb";

// Crear conexión
$conn = new mysqli($servername, $username, $password, $dbname);

// Verificar conexión
if ($conn->connect_error) {
    die("Error de conexión: " . $conn->connect_error);
}

// Procesar datos
if ($_SERVER['REQUEST_METHOD'] === 'GET' && !empty($_GET['name'])) {
    $name = $conn->real_escape_string($_GET['name']);
    $sql = "INSERT INTO users (name, method) VALUES ('$name', 'GET')";
} elseif ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['name'])) {
    $name = $conn->real_escape_string($_POST['name']);
    $sql = "INSERT INTO users (name, method) VALUES ('$name', 'POST')";
}

if (isset($sql) && $conn->query($sql) === TRUE) {
    echo "Datos guardados exitosamente.";
} else {
    echo "Error: " . $conn->error;
}

$conn->close();
?>

HyAE-commerce

Arquitectura de aplicaciones web

Transferencia de información en aplicaciones web

Proceso de transferencia de información en arquitecturas de aplicaciones web

Procesamiento en el servidor

CREATE DATABASE IF NOT EXISTS testdb;

USE testdb;

CREATE TABLE IF NOT EXISTS users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    method VARCHAR(10) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

HyAE-commerce

Arquitectura de aplicaciones web

Transferencia de información en aplicaciones web

Proceso de transferencia de información en arquitecturas de aplicaciones web

Respuesta del servidor (Response)

El servidor envía una respuesta HTTP al cliente. Esta respuesta incluye

Código de estado

Indica el resultado de la solicitud (por ejemplo, 200 OK, 404 Not Found).

Datos

Los datos solicitados, formateados en JSON o XML.

HyAE-commerce

Arquitectura de aplicaciones web

Transferencia de información en aplicaciones web

Proceso de transferencia de información en arquitecturas de aplicaciones web

Respuesta del servidor (Response)

  • El navegador recibe la respuesta del servidor y la procesa.
  • Si los datos están en JSON, JavaScript los analiza y los utiliza para actualizar la interfaz de usuario de la página web.

Presentación en el cliente

HyAE-commerce

Arquitectura de aplicaciones web

Transferencia de información en aplicaciones web

Proceso de transferencia de información en arquitecturas de aplicaciones web

HyAE-commerce

Arquitectura de aplicaciones web

HyAE-commerce

E-commerce

El comercio electrónico implica cualquier transacción económica realizada a través de plataformas digitales, como sitios web, aplicaciones móviles o redes sociales. Incluye no solo la venta de productos físicos, sino también servicios, suscripciones, contenido digital y más.

HyAE-commerce

E-commerce

Tipos de E-commerce

B2C (Business-to-Consumer)

Modelo más común, donde las empresas venden productos o servicios directamente a los consumidores finales.

Ejemplos: Amazon, Netflix, tiendas en línea de marcas como Zara o Nike.

B2B (Business-to-Business)

Las empresas venden productos o servicios a otras empresas.

Ejemplos: proveedores de materias primas, software empresarial.

C2C (Consumer-to-Consumer)

Los consumidores venden directamente a otros consumidores, generalmente a través de plataformas intermediarias.

Ejemplos: eBay, MercadoLibre.

HyAE-commerce

E-commerce

Tipos de E-commerce

C2B (Consumer-to-Business)

Los consumidores ofrecen productos o servicios a las empresas.

Ejemplos: plataformas de freelancers como Fiverr o Upwork, donde individuos ofrecen sus habilidades a empresas

B2G (Business-to-Government)

Las empresas venden productos o servicios al gobierno o entidades públicas.

Ejemplos: contratos para suministrar equipos tecnológicos a instituciones gubernamentales.

G2C(Government-to-Consumer)

El gobierno ofrece servicios o información a los ciudadanos a través de plataformas digitales.

Ejemplos: pagos de impuestos en línea, trámites gubernamentales digitales.

HyAE-commerce

E-commerce

Tipos de E-commerce

G2B (Government-to-Business)

El gobierno interactúa con empresas a través de plataformas digitales, como licitaciones o pagos de impuestos corporativos.

HyAE-commerce

E-commerce

Modalidades de comercio electrónico

Marketplaces

Plataformas que reúnen a múltiples vendedores y compradores (ejemplo: Amazon, Etsy).

Suscripciones

Modelo basado en pagos recurrentes por acceso a servicios o productos (ejemplo: Spotify, Netflix).

Tiendas en línea

Plataformas donde se venden productos físicos o digitales.

HyAE-commerce

E-commerce

Modalidades de comercio electrónico

Comercio social

Ventas realizadas a través de redes sociales como Instagram, Facebook o TikTok.

Dropshipping

El vendedor no maneja inventario, sino que los productos se envían directamente del proveedor al cliente.

HyAE-commerce

E-commerce

Ventajas del comercio electrónico

Amplio alcance

Las empresas pueden llegar a clientes en todo el mundo.

Accesibilidad

Permite comprar y vender desde cualquier lugar con conexión a Internet.

Reducción de costos

Elimina gastos asociados con tiendas físicas.

Personalización

Uso de datos para ofrecer experiencias personalizadas a los clientes.

HyAE-commerce

E-commerce

Desafíos del comercio electrónico

Logística

Gestión eficiente de envíos y devoluciones.

Seguridad

Protección de datos y transacciones financieras.

Competencia

Alta competencia en mercados globales.

Confianza del consumidor

Generar confianza en plataformas y métodos de pago.

HyAE-commerce

E-commerce

Actividad de reforzamiento

Pulse aquí o escane el qr

HyAE-commerce

E-commerce

Ventajas de implementar el E-commerce

  • Revolucionado la manera en que las empresas venden sus productos y servicios.
  • Implementarlo ofrece múltiples beneficios tanto para negocios emergentes como para grandes corporaciones.

HyAE-commerce

E-commerce

Ventajas de implementar el E-commerce

Expansión del Mercado

Acceso global

Permite vender a clientes de cualquier parte del mundo sin limitaciones geográficas.

Mayor alcance

No se limita a clientes locales, aumentando la base de consumidores potenciales.

HyAE-commerce

E-commerce

Ventajas de implementar el E-commerce

Reducción de Costos Operativos

Menores costos en infraestructura

No es necesario contar con una tienda física, lo que ahorra costos en alquiler y mantenimiento.

Automatización de procesos

Herramientas como chatbots, sistemas de gestión de inventario y facturación electrónica reducen la necesidad de intervención manual.

HyAE-commerce

E-commerce

Ventajas de implementar el E-commerce

Disponibilidad 24/7

Ventas en cualquier momento

A diferencia de las tiendas físicas, el comercio electrónico está disponible todos los días, permitiendo ventas en horarios no convencionales.

Atención al cliente automatizada

Chatbots y respuestas automatizadas mejoran la experiencia del usuario fuera del horario laboral.

HyAE-commerce

E-commerce

Ventajas de implementar el E-commerce

Personalización y Segmentación

Análisis de datos

Las plataformas de e-commerce permiten recopilar información sobre los hábitos de compra de los clientes para ofrecer productos personalizados.

Publicidad dirigida

Con estrategias de marketing digital (SEO, SEM, redes sociales), es posible llegar a clientes específicos según sus intereses.

HyAE-commerce

E-commerce

Ventajas de implementar el E-commerce

Mayor Competitividad

Comparación de precios y estrategias dinámicas

Las herramientas de comercio electrónico permiten ajustar los precios en tiempo real según la demanda del mercado.

Mayor flexibilidad

Las empresas pueden adaptarse rápidamente a las tendencias y necesidades del consumidor.

HyAE-commerce

E-commerce

Ventajas de implementar el E-commerce

Facilidad de Expansión y Escalabilidad

Crecimiento sin necesidad de grandes inversiones

Ampliar el negocio solo requiere ajustar la plataforma de ventas, sin necesidad de abrir más tiendas físicas.

Integración con múltiples canales de venta

Se puede vender en redes sociales, marketplaces y sitios web propios simultáneamente.

HyAE-commerce

E-commerce

Ventajas de implementar el E-commerce

Mejora en la Experiencia del Cliente

Opciones de pago diversas

Permite pagos con tarjetas de crédito, débito, transferencias y criptomonedas.

Seguimiento en tiempo real

Los clientes pueden rastrear sus pedidos y recibir notificaciones en cada etapa de la compra.

HyAE-commerce

E-commerce

Ventajas de implementar el E-commerce

Sostenibilidad y Reducción del Impacto Ambiental

Menos consumo de recursos físicos

Se reduce el uso de papel, electricidad y transporte innecesario

Modelos de negocio ecológicos

Muchas empresas implementan entregas con empaques reciclables y logística sostenible.

HyAE-commerce

E-commerce

Actividad de aprendizaje

  • Googlea Frexus.
  • Selecciona la opción: Generando Valor Agregado.
  • Ve a la sección de academia.
  • Busca el nombre de la materia y has clic en ella
  • En la sección de recursos lee el que tiene el nombre de: Éxito digital.

{Unidad II}

Frameworks de desarrollo web y comercio eletrónico

Frameworks de desarrollo web y comercio eletrónico

¿Framework?

  • Es una estructura de software predefinida que proporciona herramientas, bibliotecas y mejores prácticas para el desarrollo de aplicaciones.
  • Funciona como un marco de trabajo que facilita la programación al ofrecer código reutilizable, modular y organizado, permitiendo a los desarrolladores centrarse en la lógica del negocio en lugar de escribir código desde cero.

Frameworks de desarrollo web y comercio eletrónico

Características de un Framework:

Estructura predefinida

Proporciona un esquema organizado para el desarrollo.

Código reutilizable

Incluye módulos y funciones que reducen el tiempo de desarrollo.

Estandarización

 

Facilita la colaboración y el mantenimiento del código.

Frameworks de desarrollo web y comercio eletrónico

Características de un Framework:

Optimización del rendimiento

Implementa buenas prácticas para mejorar la eficiencia

Seguridad

Incorpora medidas para prevenir vulnerabilidades comunes.

Frameworks de desarrollo web y comercio eletrónico

Ejemplo de Frameworks en Diferentes Ámbitos

Desarrollo web (frontend)

React.js, Vue.js, Angular

Desarrollo web (backend)

Django (Python), Laravel (PHP), Express.js (Node.js)

Frameworks de desarrollo web y comercio eletrónico

Ejemplo de Frameworks en Diferentes Ámbitos

Aplicaciones móviles

Flutter, React Native

 Inteligencia Artificial

TensorFlow, PyTorch

Frameworks de desarrollo web y comercio eletrónico

Actividad de reforzamiento

pulsa aquí o escanea el qr

Frameworks de desarrollo web y comercio eletrónico

Frameworks de desarrollo web de lado del cliente (frontend)

React.js

  • Desarrollado por Facebook, es uno de los frameworks más populares para construir interfaces de usuario.
  • Permite crear componentes reutilizables y mejorar la velocidad de carga gracias al Virtual DOM.
  • Se usa en muchas plataformas de comercio electrónico como Shopify y WooCommerce para interfaces interactivas.

Frameworks de desarrollo web y comercio eletrónico

Frameworks de desarrollo web de lado del cliente (frontend)

Vue.js

  • Un framework progresivo que facilita la integración con proyectos existentes.
  • Es más ligero que React y Angular, lo que lo hace ideal para proyectos pequeños y medianos.
  • Se usa en plataformas como Alibaba para mejorar la experiencia del usuario.

Frameworks de desarrollo web y comercio eletrónico

Frameworks de desarrollo web de lado del cliente (frontend)

Angular

  • Desarrollado por Google, es un framework basado en TypeScript con una arquitectura robusta.
  • Ofrece una estructura sólida para manejar proyectos grandes y complejos.
  • Se emplea en aplicaciones e-commerce que requieren alta escalabilidad.

Frameworks de desarrollo web y comercio eletrónico

Frameworks de desarrollo web de lado del cliente (frontend)

Svelte

  • Se diferencia de otros frameworks porque compila el código en JavaScript puro, eliminando la necesidad de un framework en tiempo de ejecución.
  • Es más rápido y eficiente en términos de rendimiento, lo que mejora la experiencia del usuario en tiendas en línea.

Frameworks de desarrollo web y comercio eletrónico

Frameworks de desarrollo web de lado del cliente (frontend)

Ventajas

  • Experiencias de usuario más rápidas e interactivas.
  • Mejor optimización del rendimiento en el navegador.
  • Compatibilidad con estrategias de SEO para mejorar la visibilidad en buscadores.
  • Desarrollo modular y reutilizable, facilitando la escalabilidad del sitio.

Frameworks de desarrollo web y comercio eletrónico

Actividad de reforzamiento

pulsa aquí o escanea el qr

Frameworks de desarrollo web y comercio eletrónico

Frameworks de E-Commerce Basados en PHP

Magento

  • Uno de los frameworks más robustos para grandes tiendas en línea.
  • Soporta múltiples monedas, idiomas y catálogos extensos.
  • Flexible y escalable, pero requiere servidores potentes.

WooCommerce (WordPress)

  • Extensión de WordPress que transforma sitios en tiendas en línea.
  • Fácil de instalar y personalizar con miles de plugins.
  • Ideal para pequeñas y medianas empresas.

Frameworks de desarrollo web y comercio eletrónico

Frameworks de E-Commerce Basados en PHP

PrestaShop

  • Plataforma de código abierto con muchas opciones de personalización.
  • Gran comunidad y módulos para ampliar funcionalidades.
  • Optimizado para SEO y fácil de gestionar.

Frameworks de desarrollo web y comercio eletrónico

Frameworks de E-Commerce Basados en JavaScript y Node.js

Saleor (GraphQL + React + Django)

  •  Plataforma moderna basada en GraphQL, ideal para soluciones headless.
  • Integra React y Django, lo que la hace flexible y rápida.
  • Diseñada para escalabilidad y comercio omnicanal.

Medusa.js

  • Alternativa open-source a Shopify, construida con Node.js.
  • API flexible para integraciones con React, Next.js, o Vue.js.
  • Modular y personalizable, ideal para desarrolladores.

Frameworks de desarrollo web y comercio eletrónico

Frameworks de Comercio Electrónico Headless

Shopify Plus + Next.js

  • Se usa para tiendas altamente personalizadas con backend Shopify.

separan el frontend del backend, permitiendo mayor flexibilidad y personalización.

Commercetools

  • Plataforma API-first para e-commerce empresarial.

BigCommerce Headless

  • Solución escalable con integraciones flexibles.

Frameworks de desarrollo web y comercio eletrónico

¿cómo elegir un framework de e-commerce?

WooCommerce o PrestaShop

  • Principiantes y pequeñas tiendas

Magento o Medusa.js

  • Empresas medianas

Saleor o frameworks headless con Next.js.

  • Proyectos modernos y escalables

Frameworks de desarrollo web y comercio eletrónico

Headless e-commerce

  • Es un enfoque arquitectónico en el que el frontend (interfaz de usuario) y el backend (gestión de datos, pagos, inventario, etc.) están separados.
  • En lugar de depender de una plataforma monolítica que maneje todo (como Shopify o Magento tradicionales), el frontend y el backend se comunican mediante APIs.

Frameworks de desarrollo web y comercio eletrónico

Características Headless e-commerce

  • Permite usar cualquier tecnología para la interfaz de usuario.

Separación de frontend y backend

  • Se pueden personalizar las experiencias de compra sin depender de una plataforma rígida.

Mayor flexibilidad

  • Optimiza tiempos de carga y permite adaptaciones sin afectar la infraestructura central.

Mejor rendimiento y escalabilidad

Frameworks de desarrollo web y comercio eletrónico

Características Headless e-commerce

  • Compatible con múltiples herramientas como CMS, CRM y sistemas de pago personalizados.

Integraciones avanzadas

  • Permite ofrecer compras en web, apps móviles, redes sociales y dispositivos IoT desde un solo backend.

Experiencias omnicanal

Frameworks de desarrollo web y comercio eletrónico

Funcionamiento Headless e-commerce

  • Magento, Shopify Plus, BigCommerce, Saleor, Medusa.js

Backend (1)

  • Enviar/recibir datos.

API → REST o GraphQL (2)

  • React.js, Next.js, Vue.js, Nuxt.js, Svelte, Angular

Frontend (3)

  • Web, App, PWA, redes sociales, kioscos, entre otros.

Interfaz de Usuario (4)

Frameworks de desarrollo web y comercio eletrónico

 Ejemplos de Frameworks y Tecnologías Headless

Framework Backend (E-Commerce) Framework Frontend (Cliente)
Shopify Plus (con Shopify Hydrogen) React.js, Next.js
BigCommerce Headless Vue.js, Nuxt.js
Medusa.js (alternativa open-source a Shopify) Next.js, React.js
Saleor (basado en GraphQL) React.js, Gatsby.js
Commercetools (enfocado en empresas grandes) Angular, Vue.js, React.js

Frameworks de desarrollo web y comercio eletrónico

¿Cuando usar  Headless e-commerce?

  • Necesitas un sitio ultra rápido y optimizado para SEO
  • Personalizar la experiencia de usuario sin limitaciones
  • Se vende en múltiples canales (web, móvil, redes sociales, IoT).
  • Se maneja un gran volumen de productos y tráfico.

Frameworks de desarrollo web y comercio eletrónico

Actividad de reforzamiento

pulsa aquí o escanea el qr

Frameworks de desarrollo web y comercio eletrónico

Actividad de Aprendizaje

  • Googlea Frexus.
  • Selecciona la opción: Generando Valor Agregado.
  • Ve a la sección de academia.
  • Busca el nombre de la materia y has clic en ella
  • En la sección de recursos lee el que tiene el nombre de: Framework de lado del cliente.

Frameworks de lado del servidor

  • Es una estructura de software que facilita la creación de la lógica de negocio, la gestión de bases de datos, la autenticación de usuarios y la comunicación con el frontend mediante APIs.
  • Estos frameworks trabajan en el backend, asegurando que las operaciones como procesamiento de pagos, gestión de inventario y seguridad de datos sean eficientes y escalables.

Frameworks de lado del servidor

Bases de Datos

Características

Permite gestionar grandes volúmenes de productos y clientes.

Escalabilidad

Optimizado para soportar alto tráfico y cargas pesadas.

Seguridad

Implementa medidas contra ataques como SQL Injection o Cross-Site Scripting (XSS).

Frameworks de lado del servidor

Autenticación y Autorización

Características

Maneja sesiones, roles y permisos de usuarios.

APIs y Microservicios

Facilita la integración con el frontend y servicios externos como pasarelas de pago.

Frameworks de lado del servidor

Node.js + Express.js

Principales

  • Popular para tiendas e-commerce modernas con arquitectura headless.
  • Compatible con bases de datos NoSQL como MongoDB.
  • Frameworks relacionados: NestJS (basado en TypeScript) y Medusa.js (alternativa a Shopify headless).

Django (Python)

  • Basado en Python, ofrece seguridad y rapidez en desarrollo.
  • Usa Django REST Framework para APIs escalables.
  • Frameworks relacionados: Saleor (basado en Django + GraphQL).

Frameworks de lado del servidor

Laravel (PHP)

Principales

  • Muy usado para plataformas e-commerce personalizadas.
  • Integración fácil con bases de datos SQL y pasarelas de pago.
  • Frameworks relacionados: Bagisto (Laravel para e-commerce).

Ruby on Rails

  • Facilita el desarrollo rápido con menos código.
  • Soporta integraciones con Stripe y PayPal de forma sencilla.
  • Frameworks relacionados: Solidus (e-commerce en Rails) y Spree Commerce.

Frameworks de lado del servidor

Principales

Spring Boot (Java)

  • Ideal para grandes empresas con requerimientos de alto rendimiento.
  • Seguridad avanzada con autenticación y control de acceso.
  • Frameworks relacionados: Broadleaf Commerce (e-commerce en Java).

Frameworks de lado del servidor

Comprarativa

Frameworks de lado del servidor

Implementación

Backend en Django

Gestiona usuarios, productos y pedidos.

API REST con Django REST Framework

Conecta con un frontend en Vue.js.

Base de Datos PostgreSQL

Manejo de grandes volúmenes de datos.

Pasarela de Pago con Stripe

Seguridad en transacciones.

Frameworks de lado del servidor

Actividad de reforzamiento

Pulsa aquí para resolver la actividad

Frameworks de lado del servidor

Actividad de aprendizaje

  • Googlea Frexus.
  • Selecciona la opción: Generando Valor Agregado.
  • Ve a la sección de academia.
  • Busca el nombre de la materia y has clic en ella
  • En la sección de recursos lee el que tiene el nombre de: E-commerce.

Marketplaces Horizontales y Verticales

  • Plataformas en línea que facilitan la compra y venta de productos o servicios entre múltiples vendedores y compradores.
  • Existen dos tipos principales de marketplaces: horizontales y verticales, cada uno con características y enfoques distintos.

Marketplaces Horizontales y Verticales

Marketplaces Horizontales

  • Los marketplaces horizontales ofrecen una amplia variedad de productos o servicios pertenecientes a diferentes industrias o categorías dentro de una sola plataforma.
  • Su principal característica es que abarcan múltiples sectores sin especializarse en uno solo.

Marketplaces Horizontales y Verticales

Ejemplos de Marketplaces Horizontales

Amazon

Ofrece desde libros y electrónicos hasta ropa y artículos para el hogar.

eBay

Plataforma de subastas y venta directa de productos de diversas categorías.

Alibaba

Conecta proveedores y compradores en múltiples sectores.

Mercado Libre

Opera en Latinoamérica con una gran diversidad de productos.

Marketplaces Horizontales y Verticales

Ventajas de los Marketplaces Horizontales

Mayor volumen de tráfico debido a la diversidad de productos.

Atraen a un público amplio con distintos intereses.

Ofrecen economías de escala al operar con diferentes categorías.

Marketplaces Horizontales y Verticales

Desventajas de los Marketplaces Horizontales

Alta competencia entre vendedores.

Dificultad para personalizar la experiencia de usuario debido a la diversidad de productos.

Complejidad en la gestión de múltiples categorías.

Marketplaces Horizontales y Verticales

Actividad de reformzamiento

Pulsa aquí o escanea el qr

Marketplaces Horizontales y Verticales

Marketplaces Verticales

  • Se especializan en una industria o nicho específico, ofreciendo productos o servicios relacionados exclusivamente con ese sector.
  • Su enfoque les permite profundizar en la experiencia del usuario y en la calidad de la oferta.

Marketplaces Horizontales y Verticales

Marketplaces Verticales

Ejemplos de Marketplaces Verticales

Airbnb

alojamiento y experiencias de viaje

Etsy

productos artesanales y vintage

StockX

reventa de zapatillas y artículos de lujo

Udemy

cursos y educación en línea

Marketplaces Horizontales y Verticales

Marketplaces Verticales

Ventajas de los Marketplaces Horizontales

Mayor segmentación y fidelización del público objetivo.

Mejor experiencia de usuario gracias a la especialización.

Menor competencia directa en comparación con los marketplaces horizontales.

Marketplaces Horizontales y Verticales

Marketplaces Verticales

Desventajas de los Marketplaces Horizontales

Menor volumen de tráfico en comparación con los horizontales.

Dependencia de un único nicho, lo que puede ser un riesgo en cambios de mercado.

Dificultad para escalar y diversificar la oferta.

Marketplaces Horizontales y Verticales

Principales diferencias en Marketplaces Verticales y Horizontales

Made with Slides.com