1 of 22

De la cocina al desarrollo, ingredientes para una web sabrosa, lucrativa y sustanciosa

JHON TAMAYO

@jtamayo182

EDICIÓN E-COMMERCE

2 of 22

EDICIÓN E-COMMERCE

“No todo lo que el cliente pide es lo que necesita”

Con 10 años de experiencia en desarrollo web, me apasiona optimizar el performance y accesibilidad de sitios web. Inicié mi carrera tras una formación en gastronomía, combinando creatividad y precisión tanto en la cocina como en el código. Actualmente, lidero proyectos web clave, incluyendo la plataforma de la Cámara de Comercio de Barranquilla y tiendas en línea como Palatsi. Como desarrollador en NetSat Innovation Technology, colaboro en un innovador builder para WordPress con un enfoque en rendimiento y optimización, junto a Ab2Web Hosting Solutions.

@jtamayo182

www.netsat.co

Líder de Desarrollo Web y Ventas

NetSat Innovation Technology

Jhon Tamayo

#WCBOGOTA

3 of 22

Temas

02

Técnicas para sacar el mayor rendimiento a tu web o las de tus clientes

Mi receta para un sitio web sabroso, lucrativo y sustancioso

EDICIÓN E-COMMERCE

#WCBOGOTA

4 of 22

¿Porque razón un cliente

decide crear su sitio web?

Presencia online

Venta de productos o servicios

Credibilidad y profesionalismo

Marketing y publicidad

Comunicación

Competencia

Portafolio

5 of 22

Porque quiere

VENDER

Se trata de persuadir a los visitantes para que realicen acciones específicas, como suscribirse o comprar, comunicando eficazmente el valor y confiabilidad de lo que se ofrece en línea.

6 of 22

https://wapu.us/wapuu/captain-w/

WordPress. Cuota de mercado: 60.4% ...
Joomla. Cuota de mercado: 5.2% ...
Drupal. Cuota de mercado: 3.4% ...
Shopify. Cuota de mercado: 2.7% ...
Squarespace. Cuota de mercado: 2.7% ...
Wix. Cuota de mercado: 1.9% ...
Magento. Cuota de mercado: 1.8% ...

7 of 22

Es cierto que la primera impresión cuenta y que un diseño atractivo puede captar la atención de los usuarios al instante.

¿Todo entra por los ojos?

1 Una pizca de Diseño Atractivo y Profesional

EDICIÓN E-COMMERCE

#WCBOGOTA

8 of 22

Biblioteca de temas

Desarrollo de temas a medida

Opciones

EDICIÓN E-COMMERCE

#WCBOGOTA

9 of 22

Decir que 'todo entra por los ojos' puede ser peligroso cuando hablamos de desarrollo web. En una buena experiencia web no solo importa lo que se ve, sino también cómo se accede y cómo se entiende el contenido.

1 ½ Tazas de Accesibilidad

EDICIÓN E-COMMERCE

#WCBOGOTA

10 of 22

El 71% de las personas con discapacidades han experimentado barreras digitales que les impiden acceder a información y servicios en línea.

National Federation of the Blind (NFB)

11 of 22

Usar Temas y Plugins Accesibles

Optimizar la Navegación por Teclado

Proporcionar Texto Alternativo Descriptivo

Contraste Adecuado y Tamaño de Texto

Formularios Accesibles

En españól…

EDICIÓN E-COMMERCE

#WCBOGOTA

Usar Temas y Plugins Accesibles:�No todos los temas y plugins de WordPress son accesibles por defecto. Asegúrate de elegir temas que cumplan con las pautas de accesibilidad WCAG 2.1 y busca plugins específicos como "WP Accessibility" que ayudan a corregir problemas comunes, como la falta de etiquetas en los formularios o la falta de navegación por teclado.

Optimizar la Navegación por Teclado:�Asegúrate de que todos los elementos interactivos (menús, botones, formularios) sean accesibles usando solo el teclado. Esto es esencial para personas con discapacidades motoras. Evita estructuras complicadas que dificulten la navegación y utiliza el enfoque de “tabindex” adecuadamente para controlar el orden.

Proporcionar Texto Alternativo Descriptivo:�Para las imágenes, utiliza texto alternativo (alt) descriptivo y conciso. Si el contenido de la imagen es extenso, considera proporcionar la descripción en el contenido cercano o utilizando técnicas como las mencionadas antes con span oculto para lectores de pantalla.

Contraste Adecuado y Tamaño de Texto:�Verifica que haya suficiente contraste entre el texto y el fondo para garantizar la legibilidad. Usa herramientas de comprobación de contraste, como "Contrast Checker" o plugins específicos de WordPress que revisan la accesibilidad visual. Además, permite que los usuarios puedan ajustar el tamaño del texto fácilmente.

Formularios Accesibles:�Los formularios deben tener etiquetas (label) claras para cada campo, con atributos como for que indiquen la relación entre la etiqueta y el campo de entrada. Además, asegúrate de que las validaciones de errores sean comprensibles y accesibles para lectores de pantalla.

12 of 22

EDICIÓN E-COMMERCE

#WCBOGOTA

Foto tomada de: https://carlospinar.com/ui-ux/formularios-accesibles-10-reglas-fundamentales/

Usar Temas y Plugins Accesibles:�No todos los temas y plugins de WordPress son accesibles por defecto. Asegúrate de elegir temas que cumplan con las pautas de accesibilidad WCAG 2.1 y busca plugins específicos como "WP Accessibility" que ayudan a corregir problemas comunes, como la falta de etiquetas en los formularios o la falta de navegación por teclado.

Optimizar la Navegación por Teclado:�Asegúrate de que todos los elementos interactivos (menús, botones, formularios) sean accesibles usando solo el teclado. Esto es esencial para personas con discapacidades motoras. Evita estructuras complicadas que dificulten la navegación y utiliza el enfoque de “tabindex” adecuadamente para controlar el orden.

Proporcionar Texto Alternativo Descriptivo:�Para las imágenes, utiliza texto alternativo (alt) descriptivo y conciso. Si el contenido de la imagen es extenso, considera proporcionar la descripción en el contenido cercano o utilizando técnicas como las mencionadas antes con span oculto para lectores de pantalla.

Contraste Adecuado y Tamaño de Texto:�Verifica que haya suficiente contraste entre el texto y el fondo para garantizar la legibilidad. Usa herramientas de comprobación de contraste, como "Contrast Checker" o plugins específicos de WordPress que revisan la accesibilidad visual. Además, permite que los usuarios puedan ajustar el tamaño del texto fácilmente.

Formularios Accesibles:�Los formularios deben tener etiquetas (label) claras para cada campo, con atributos como for que indiquen la relación entre la etiqueta y el campo de entrada. Además, asegúrate de que las validaciones de errores sean comprensibles y accesibles para lectores de pantalla.

13 of 22

Un sitio no accesible, es un sitio que discrimina usuarios y disminuye su rango de alcance

EDICIÓN E-COMMERCE

#WCBOGOTA

Imagen tomada de www.freepik.es

Estados Unidos:

La Ley de Estadounidenses con Discapacidades (ADA) exige que los sitios web sean accesibles. Aunque la ley se originó para espacios físicos, se ha interpretado ampliamente para incluir sitios web. Empresas que no cumplen con estas normativas han enfrentado demandas legales.

Unión Europea:

La Directiva de Accesibilidad Web de la UE obliga a los sitios web y aplicaciones móviles del sector público a ser accesibles, con sanciones en caso de incumplimiento. Desde 2020, todos los sitios web y apps deben cumplir con las pautas WCAG 2.1 nivel AA.

Canadá:

La Ley de Accesibilidad de Canadá (Accessible Canada Act) establece que todas las organizaciones bajo jurisdicción federal deben garantizar la accesibilidad digital. El incumplimiento puede resultar en multas.

Reino Unido:

La Ley de Igualdad de 2010 (Equality Act 2010) exige que los sitios web sean accesibles para evitar la discriminación contra personas con discapacidades. Las organizaciones que no cumplan con estas disposiciones pueden enfrentar sanciones.

Australia:

La Ley de Discriminación por Discapacidad (Disability Discrimination Act 1992) obliga a que los servicios en línea sean accesibles. En 2000, un caso destacado en Australia sancionó a la organización Sydney Olympics por tener un sitio web inaccesible.

14 of 22

La navegación también se diseña, y es importante cumplir con unos requerimientos mínimos para que los usuarios recorran el sitio priorizando lo que al negocio le convenga más

1 Cucharada de

Navegación Intuitiva

EDICIÓN E-COMMERCE

#WCBOGOTA

Imagen de www.freepik.es

Estructura de Menú Clara y Consistente:�Asegúrate de que el menú principal sea fácil de encontrar y entender. Usa etiquetas claras y evita jerarquías complicadas. La navegación debe ser consistente en todas las páginas para que los usuarios puedan orientarse sin esfuerzo.

Enlaces Visibles y Accesibles:�Los enlaces deben ser claramente identificables, con un diseño que los diferencie del texto normal. Asegúrate de que los enlaces sean accesibles con el teclado y que se pueda navegar fácilmente entre ellos.

Incluir una Barra de Búsqueda Eficiente:�Implementa una barra de búsqueda visible y funcional que permita a los usuarios encontrar rápidamente el contenido que buscan. Asegúrate de que los resultados sean relevantes y se presenten de manera clara.

Proveer Retroalimentación y Confirmación:�Cuando los usuarios realicen acciones (como enviar un formulario o hacer clic en un botón), proporciona retroalimentación inmediata. Esto puede ser en forma de mensajes de confirmación, cambios visuales o notificaciones.

Optimizar para Dispositivos Móviles:�La navegación debe ser igualmente efectiva en dispositivos móviles y de escritorio. Asegúrate de que el menú sea accesible y funcional en pantallas pequeñas y que el diseño sea adaptable.

15 of 22

Estructura de Menú Clara y Consistente
Enlaces Visibles y Accesibles
Incluir una Barra de Búsqueda Eficiente
Proveer Retroalimentación y Confirmación
Optimizar para Dispositivos Móviles

EDICIÓN E-COMMERCE

#WCBOGOTA

1 Cucharada de

Navegación Intuitiva

Estructura de Menú Clara y Consistente:�Asegúrate de que el menú principal sea fácil de encontrar y entender. Usa etiquetas claras y evita jerarquías complicadas. La navegación debe ser consistente en todas las páginas para que los usuarios puedan orientarse sin esfuerzo.

Enlaces Visibles y Accesibles:�Los enlaces deben ser claramente identificables, con un diseño que los diferencie del texto normal. Asegúrate de que los enlaces sean accesibles con el teclado y que se pueda navegar fácilmente entre ellos.

Incluir una Barra de Búsqueda Eficiente:�Implementa una barra de búsqueda visible y funcional que permita a los usuarios encontrar rápidamente el contenido que buscan. Asegúrate de que los resultados sean relevantes y se presenten de manera clara.

Proveer Retroalimentación y Confirmación:�Cuando los usuarios realicen acciones (como enviar un formulario o hacer clic en un botón), proporciona retroalimentación inmediata. Esto puede ser en forma de mensajes de confirmación, cambios visuales o notificaciones.

Optimizar para Dispositivos Móviles:�La navegación debe ser igualmente efectiva en dispositivos móviles y de escritorio. Asegúrate de que el menú sea accesible y funcional en pantallas pequeñas y que el diseño sea adaptable.

16 of 22

Tazas de Rendimiento y Velocidad

2

Optimización de Imágenes

Caché Eficiente

Minimización de Recursos

Reducción de Solicitudes HTTP

EDICIÓN E-COMMERCE

#WCBOGOTA

1. Optimización de Imágenes:

Formatos adecuados: Utilizar formatos como WebP o AVIF que mantienen la calidad con un tamaño de archivo menor.
Compresión: Implementar herramientas de compresión sin pérdida (como TinyPNG o ShortPixel) y considerar el uso de Lazy Load para cargar imágenes solo cuando sean necesarias.

2. Caché Eficiente:

Caché a nivel de servidor y navegador: Plugins, redis, recursos estáticos.
Caché de página y objeto: Mejora la respuesta del servidor utilizando técnicas como Memcached o Redis.

3. Minimización de Recursos:

Minificación de CSS, JavaScript y HTML: Eliminar espacios, saltos de línea y comentarios innecesarios con herramientas automáticas que integran los plugins de rendimiento.
Combinación de archivos: Agrupar varios archivos en uno solo para reducir el número de solicitudes HTTP.

4. Reducción de Solicitudes HTTP:

Uso de fuentes optimizadas: Cargar solo los pesos y estilos que realmente necesitas en lugar de cargar una familia completa.
Carga asíncrona de JavaScript y CSS crítico: Aprovechar la carga diferida para optimizar la percepción de velocidad.

17 of 22

Cucharadas grandes de Seguridad (Servidor)

2

Implementación de Certificados SSL

Configuración y Protección del Servidor

Mantenimiento y Actualización

Copias de Seguridad Automatizadas

EDICIÓN E-COMMERCE

#WCBOGOTA

1. Implementación de Certificados SSL:

HTTPS en toda la web: Asegúrate de que todas las comunicaciones entre el servidor y los usuarios estén cifradas mediante SSL. El uso de HTTPS no solo protege los datos, sino que también mejora el posicionamiento en buscadores.
Certificados automáticos y renovación: Utilizar herramientas como Let's Encrypt para obtener y renovar certificados de forma automática.

2. Configuración y Protección del Servidor:

Firewalls y WAF (Web Application Firewall): Implementar un firewall a nivel de servidor y utilizar un WAF (como Sucuri o Cloudflare) para bloquear ataques comunes como inyecciones SQL, XSS y DDoS.
Bloqueo de accesos innecesarios: Limitar el acceso al panel de administración de WordPress (wp-admin) mediante autenticación en dos pasos o restricción por IP.

3. Mantenimiento y Actualización Constante:

Actualización de software: Mantén el sistema operativo, PHP, MySQL y cualquier otro software del servidor actualizados para corregir vulnerabilidades.
Monitorización de amenazas: Utilizar herramientas como Fail2ban para monitorizar intentos de acceso no autorizados y bloquear direcciones IP sospechosas.

4. Copias de Seguridad Automatizadas:

Backups regulares y offsite: Realizar copias de seguridad automáticas y almacenarlas en ubicaciones seguras fuera del servidor, como Amazon S3 o Google Drive.
Restauración rápida: Implementar un sistema que permita restaurar la web de manera sencilla y rápida en caso de un fallo o ataque.

18 of 22

Cucharadas grandes de Seguridad (Servidor)

2

Gestión Segura de Accesos

Reforzamiento de Configuraciones del Servidor

Análisis y Detección de Malware

Políticas de Seguridad

EDICIÓN E-COMMERCE

#WCBOGOTA

5. Gestión Segura de Accesos:

Accesos mínimos y controlados: Solo conceder los permisos necesarios a cada usuario o servicio. Utiliza autenticación multifactor (2FA) y claves SSH en lugar de contraseñas para acceder al servidor.
Protección de archivos sensibles: Configurar permisos de archivos y carpetas adecuadamente. Por ejemplo, deshabilitar la edición de archivos desde el panel de WordPress y proteger el archivo wp-config.php.

6. Reforzamiento de Configuraciones del Servidor:

Seguridad de PHP: Desactivar funciones peligrosas como exec(), shell_exec() y eval() en la configuración de PHP.
Limitación de acceso a archivos críticos: Bloquear accesos directos a archivos sensibles mediante reglas en .htaccess o Nginx para evitar su exposición.

7. Análisis y Detección de Malware:

Escaneo regular: Utilizar herramientas como ClamAV o plugins como Wordfence para escanear el servidor en busca de malware o archivos sospechosos.
Alertas y notificaciones: Configurar notificaciones automáticas para cualquier actividad inusual, como intentos repetidos de acceso o modificaciones no autorizadas en los archivos.

8. Políticas de Seguridad:

Política de contraseñas fuertes: Implementar políticas que obliguen el uso de contraseñas complejas y únicas para todos los usuarios.
Revisión periódica de logs: Monitorear y analizar registros de acceso para detectar patrones anómalos que puedan indicar intentos de ataque.

19 of 22

Taza de optimización para motores de búsqueda

1

Estructura Semántica del Código

Optimización de la Velocidad de Carga

Generación de Contenido Dinámico SEO-Friendly

Accesibilidad

EDICIÓN E-COMMERCE

#WCBOGOTA

Pruebas de Rendimiento y SEO Automatizadas

1. Implementación de Certificados SSL:

HTTPS en toda la web: Asegúrate de que todas las comunicaciones entre el servidor y los usuarios estén cifradas mediante SSL. El uso de HTTPS no solo protege los datos, sino que también mejora el posicionamiento en buscadores.
Certificados automáticos y renovación: Utilizar herramientas como Let's Encrypt para obtener y renovar certificados de forma automática.

2. Configuración y Protección del Servidor:

Firewalls y WAF (Web Application Firewall): Implementar un firewall a nivel de servidor y utilizar un WAF (como Sucuri o Cloudflare) para bloquear ataques comunes como inyecciones SQL, XSS y DDoS.
Bloqueo de accesos innecesarios: Limitar el acceso al panel de administración de WordPress (wp-admin) mediante autenticación en dos pasos o restricción por IP.

3. Mantenimiento y Actualización Constante:

Actualización de software: Mantén el sistema operativo, PHP, MySQL y cualquier otro software del servidor actualizados para corregir vulnerabilidades.
Monitorización de amenazas: Utilizar herramientas como Fail2ban para monitorizar intentos de acceso no autorizados y bloquear direcciones IP sospechosas.

4. Copias de Seguridad Automatizadas:

Backups regulares y offsite: Realizar copias de seguridad automáticas y almacenarlas en ubicaciones seguras fuera del servidor, como Amazon S3 o Google Drive.
Restauración rápida: Implementar un sistema que permita restaurar la web de manera sencilla y rápida en caso de un fallo o ataque.

20 of 22

LO MÁS IMPORTANTE

Diviértete durante el proceso.

21 of 22

¿Consultas?

13

@jtamayo182

jtamayo182@gmail.com

Email

EDICIÓN E-COMMERCE

#WCBOGOTA

www.netsat.co /

Web

22 of 22

Gracias

Preguntas?

EDICIÓN E-COMMERCE

#WCBOGOTA