---
title: Academia Pragma | Ruta Front End
description: Explora la ruta de aprendizaje para ser un desarrollador Front End en Pragma.
---

[![logo_universo_pragma-05](https://www.pragma.com.co/hs-fs/hubfs/academia/logos/logo_universo_pragma-05.png?width=506&height=162&name=logo_universo_pragma-05.png "logo_universo_pragma-05")](https://www.pragma.com.co/academia/universo)

[![ir a Pragma](https://no-cache.hubspot.com/cta/default/2829524/70eec929-e271-4e2a-9242-7638e2c879a7.png)](https://cta-redirect.hubspot.com/cta/redirect/2829524/70eec929-e271-4e2a-9242-7638e2c879a7)

**

** **

[![logo_universo_pragma-03](https://www.pragma.com.co/hs-fs/hubfs/academia/logos/logo_universo_pragma-03.png?width=506&height=162&name=logo_universo_pragma-03.png "logo_universo_pragma-03")](https://www.pragma.com.co/academia/universo)

**

** **

Buscar

**Menú**

** **

![banner_FrontEnd_universo](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/Ruta_FrontEnd/banner_FrontEnd_universo.jpg?width=1474&name=banner_FrontEnd_universo.jpg "banner_FrontEnd_universo")

# ![icon-FrontEnd-02](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/icon-FrontEnd-02.svg)

# Sistema Front-end

Explora tu ruta de aprendizaje.

curva_bottom

[¿Tienes alguna propuesta de mejora?

](https://docs.google.com/a/pragma.com.co/forms/d/e/1FAIpQLSd47Ptn4D_Y3HvMpfsDrsIwunSbT88slZ_ShE5PxVbJGnuTGQ/viewform)

  

## Ruta de aprendizaje

Recórrela, explora los contenidos y escala en tu conocimiento hasta ser un master .

[![Nivel 1](https://www.pragma.com.co/hs-fs/hubfs/academia/Universe/planetas/planeta_1.jpg?width=480&height=480&name=planeta_1.jpg) ](https://www.pragma.com.co/academia/universo/galaxia-ingenieria/front-end#tab1)

Estación 1

#### Fundamentos

HTML semántico, CSS orientado a *mobile first* y bases de Javacript.

[![Planeta 2](https://www.pragma.com.co/hs-fs/hubfs/academia/Universe/planetas/planeta_2.jpg?width=480&height=480&name=planeta_2.jpg) ](https://www.pragma.com.co/academia/universo/galaxia-ingenieria/front-end#tab1)

Estación 2

#### Herramientas

Sass, Git, consumo de servicios back-end, frameworks de desarrollo y *atomic design*.

[![Planeta 3](https://www.pragma.com.co/hs-fs/hubfs/academia/Universe/planetas/planeta_3.jpg?width=480&height=480&name=planeta_3.jpg) ](https://www.pragma.com.co/academia/universo/galaxia-ingenieria/front-end#tab1)

Estación 3

#### Automatización y experiencia de usuario

Pruebas unitarias, integración continua y Progressive Web Apps.

[![Planeta 4](https://www.pragma.com.co/hs-fs/hubfs/academia/Universe/planetas/planeta_4.jpg?width=480&height=480&name=planeta_4.jpg) ](https://www.pragma.com.co/academia/universo/galaxia-ingenieria/front-end#tab1)

Estación 4

#### Otros mundos

Canvas, animación 2D y 3D, web sockets, AR, VR, entre otros. 

curva_bottom

## ¿Qué habilidades tiene un front-end?

Estos son los principios y herramientas que le ayudan a un front-end a transformar el diseño gráfico en súperpoderosas interfaces web.

- [1. Fundamentos](https://www.pragma.com.co/academia/universo/galaxia-ingenieria/front-end#tab1)
- [2. Herramientas](https://www.pragma.com.co/academia/universo/galaxia-ingenieria/front-end#tab2)
- [3. Automatización + UX](https://www.pragma.com.co/academia/universo/galaxia-ingenieria/front-end#tab3)
- [4. Otros mundos](https://www.pragma.com.co/academia/universo/galaxia-ingenieria/front-end#tab4)

![](https://www.pragma.com.co/hubfs/academia/Universe/ball_ejercicio.jpg)

Pokédex

Ejercicio práctico

Tu misión es implementar una interfaz web responsive base de un Pokédex.

[Hacer ejercicio](https://wiki.pragma.com.co/ejercicio-practico-front-end-pokedex)

![](https://www.pragma.com.co/hubfs/academia/Universe/ball_doc.jpg)

HTML

Semántico

En este enlace de **w3schools.com** nos explican los elementos semánticos de HTML 5

[Navegar](https://www.w3schools.com/html/html5_semantic_elements.asp)

![](https://www.pragma.com.co/hubfs/academia/Universe/ball_blue.jpg)

CSS

Main rules

Sigue el enlace para explorar 9 propiedades importantes CSS que debes conocer.

[Navegar](https://zellwk.com/blog/9-important-css-properties-you-must-know/)

![](https://www.pragma.com.co/hubfs/academia/Universe/ball_blue.jpg)

CSS

Flexbox

Aprende a usar las cajas flexibles de CSS o Flexbox y prueba tus conocimientos [aquí](https://flexboxfroggy.com/#es)

[Navegar](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

![](https://www.pragma.com.co/hubfs/academia/Universe/ball_blue.jpg)

CSS

Media Queries

Aprende en **w3schools.com** qué son y cuáles son los tipos de Media Queries.

[Navegar](https://www.w3schools.com/css/css3_mediaqueries.asp)

![](https://www.pragma.com.co/hubfs/academia/Universe/ball_JS.jpg)

JavaScript

Variables, condicionales y funciones

Aprende desde **codecademy.com** las bases sobre strings, booleanos, números, variables y mucho más.

[Navegar](https://www.codecademy.com/learn/introduction-to-javascript)

![](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_javascript.jpg)

TypeScript

Variables, condicionales y funciones

Aprende desde **codecademy.com** las bases sobre strings, booleanos, números, variables y mucho más.

[Navegar](https://www.codecademy.com/learn/learn-typescript)

![Icon_card_seo_checklist](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_seo_checklist.jpg)

SEO

Checklist

Aumenta el posicionamiento en buscadores, teniendo en cuenta estas prácticas de optimización.

[Navegar](https://blog.hubspot.es/marketing/guia-seo-tecnico)

![Icon_card_google_slides](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_google_slides.jpg)

Mobile first

Google slides

Si tu sitio es bueno en dispositivos móviles, se traslada mejor a todos los dispositivos. 

[Navegar](https://docs.google.com/presentation/d/1_8z3mwwRUcJQ6vpspPBPoZZ1k-cRxf2KzuGmIMyurj4/edit?usp=sharing)

![ball_JS](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/ball_JS.jpg)

Estándares Front-end

Documento

Explora y asimila los estándares que hemos aprendido a usar en los proyectos de front-end en Pragma.

[Navegar](https://alejandria.pragma.com.co/books/estandares-frontend)

![Icon_card_react_native_curso](https://www.pragma.com.co/hubfs/Icon_card_react_native_curso.jpg)

Pasos para una maquetación eficiente

Lección Pragma

Ten en cuenta estos 10 pasos para que puedas construir interfaces poderosas con HTML y CSS. 

[Navegar](https://www.pragma.com.co/academia/lecciones/10-pasos-para-una-maquetacion-eficiente-con-html-y-css)

![ball_ejercicio](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/ball_ejercicio.jpg)

My music app

Ejercicio práctico

Tu misión es desarrollar una aplicación web responsive con tecnologías front-end vigentes y consumiendo la API de Spotify.

[Hacer ejercicio](https://wiki.pragma.com.co/ejercicio-practico-front-end-my-music-app)

![ball_blue](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/ball_blue.jpg)

Sass

Curso online

En el video aprenderás conceptos de este poderoso pseudo-lenguaje para programar los estilos CSS de tu sitio.

[Iniciar curso](https://www.youtube.com/watch?v=roywYSEPSvc)

![ball_blue](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/ball_blue.jpg)

BEM

Nombramiento de clases CSS

Aprende las mejores practicas para nombrar las clases del CSS.

[Navegar](https://9elements.com/bem-cheat-sheet/)

![Icon_card_curso_ract](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_curso_ract.jpg)

React

Curso online

Aprende los conceptos de una de las mejores bibliotecas de JavaScript para construir interfaces de usuario. Si eres Pragmático, obtén las credenciales [aquí](https://wiki.pragma.com.co/cursos-udemy).

[Iniciar curso](https://www.udemy.com/course/react-cero-experto/)

![icon_card_4](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_Procesos2/icon_card_4.jpg)

Vue

Curso online

Aprende a desarrollar aplicaciones web modernas de forma práctica y desde cero con Vue.js. Si eres Pragmático, obtén las credenciales [aquí](https://wiki.pragma.com.co/cursos-udemy).

[Iniciar curso](https://www.udemy.com/course/vuejs-fh/)

![Icon_card_curso_angular](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_curso_angular.jpg)

Angular

Curso online

Aprende a desarrollar aplicaciones web modernas de forma práctica y desde cero con Angular. Si eres Pragmático, obtén las credenciales [aquí](https://wiki.pragma.com.co/cursos-udemy).

[Iniciar curso](https://www.udemy.com/course/angular-fernando-herrera/)

![Icon_card_diseno_atomico](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_diseno_atomico.jpg)

Diseño atómico

Google slides

Aprende no solo a construir interfaces, sino sistemas de diseño completos.

[Navegar](https://docs.google.com/presentation/d/1UWwf0d50eFlNJCytJrknJQOLvpElXsMLWk0VLY7MqZc/edit?usp=sharing)

![Icon_card_gitgalaxy](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_gitgalaxy.jpg)

GIT galaxy

Google slides

Aprende sobre Git para la gestión de ramas y flujos de trabajo en el versionamiento de código.

[Navegar](https://wiki.pragma.com.co/git-galaxy)

![Icon_card_gatsby](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_gatsby.jpg)

Gatsby

SSR, GraphQL y React

Aplica Server Side Rendering y GraphQL en tus aplicaciones web con esta poderosa herramienta basada en React.

[Documentación](https://www.gatsbyjs.org/tutorial/)

[Iniciar curso](https://www.udemy.com/course/gatsby-js-de-cero-a-experto/)

![Icon_card_PWA](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_PWA.jpg)

Next.js

SSR y React

Framework construido sobre React que nos ayuda a construir aplicaciones de una forma más rápida y fácil.

[Documentación](https://nextjs.org/docs/getting-started)

[Iniciar curso](https://www.youtube.com/watch?v=2jxc8DMzt0I&list=PLV8x_i1fqBw1VR86y4C72xMGJ8ifjBwJ6&ab_channel=midudev)

![Icon_card_contentful_cms](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_contentful_cms.jpg)

Contentful

CMS

Conoce el administrador de contenidos que, de la mano con Gatsby, ha dado grandes resultados en proyectos de Pragma.

[Navegar](https://www.youtube.com/watch?v=fY3mBJSDA44)

![Icon_card_javascript](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_javascript.jpg)

JavaScript

Patrones asíncronos, manejo de errores, patrones de diseño

Perfecciona tu conocimiento y profundiza en conceptos más avanzados.

[Navegar](https://www.youtube.com/watch?v=2SetvwBV-SU&list=PLvq-jIkSeTUZ6QgYYO3MwG9EMqC-KoLXA&ab_channel=jonmircha)

![Icon_card_pruebas_angular](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_pruebas_angular.jpg)

Pruebas unitarias

en Angular

Aprende a mejorar tu código de la mano de las pruebas unitarias utilizando Karma, Jasmine y Protractor.

[Navegar](https://www.youtube.com/watch?v=a1qKds0IQ_4)

![Icon_card_pruebas_react](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_pruebas_react.jpg)

Pruebas unitarias

en React

Aprende a mejorar tu código de la mano de las pruebas unitarias utilizando Jest y React-testing-library.

[Navegar](https://www.youtube.com/watch?v=KYjjtRgg_H0&ab_channel=midudev)

![Icon_card_PWA](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_PWA.jpg)

Progressive Web Apps

(PWA)

Aprende a construir aplicaciones web con experiencia de apps móviles, que pueden ser instalables en celulares y dispositivos de escritorio. Más información [aquí](https://www.youtube.com/watch?v=QSb4VZnF9q4).

[Navegar](https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0)

![Icon_card_angular_animation](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_angular_animation.jpg)

Animaciones

con Angular animations module

Mejora aún más la experiencia de usuario con animaciones y microinteracciones en Angular. Explora la documentación [aquí](https://angular.io/guide/animations).

[Navegar](https://www.youtube.com/watch?v=ra5qNKNc95U&t=1512s)

![Icon_card_react_spring_library](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_react_spring_library.jpg)

Animaciones

con React Spring library

React no se queda atrás con las animaciones y microinteracciones. Explora la documentación [aquí](https://www.react-spring.io/).

[Navegar](https://www.youtube.com/watch?v=S8yn3-WpVV8)

![Icon_card_jenkins](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_jenkins.jpg)

Integración continua

con Jenkins

Explora y evoluciona tu conocimiento de cómo automatizar los despliegues continuos a producción.

[Navegar](https://www.youtube.com/watch?v=LFDrDnKPOTg)

![Icon_card_PWA](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_PWA.jpg)

Animaciones con React Framer Motion

Documentación oficial

Diseña animaciones fluidas en React para la web en escritorio y móviles. 

[Navegar](https://www.framer.com/api/motion/examples/)

![Icon_card_react_spring_library](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_react_spring_library.jpg)

Submódulos de GIT

Video

Sube de nivel en GIT y versiona diferentes proyectos relacionados  con el concepto de submódulos.

[Navegar](https://www.youtube.com/watch?v=moC2KyxGb10)

![Icon_card_javascript_interactivo](https://www.pragma.com.co/hubfs/Icon_card_javascript_interactivo.jpg)

Canvas

JavaScript interactivo

Aprende, a través de esta serie de videos, lo que puedes lograr cuando tu interfaz se vuelve interactiva.

[Navegar](https://www.youtube.com/watch?v=fu1EPyRDGt0)

![Icon_card_3d_webgl_threejs](https://www.pragma.com.co/hubfs/Icon_card_3d_webgl_threejs.jpg)

3D

WebGL y Three.js

Evoluciona tus conocimientos en interfaces 3D dentro del navegador. Conoce la documentación oficial [aquí](https://threejs.org/).

[Navegar](https://www.youtube.com/watch?v=6oFvqLfRnsU&t=9s)

![Icon_card_react_native_curso](https://www.pragma.com.co/hubfs/Icon_card_react_native_curso.jpg)

React Native

Curso online

Si ya conoces React, sube de nivel para programar aplicaciones nativas para Android, iOS y UWP.

[Iniciar curso](https://edutin.com/curso-de-react-native-4226)

![Icon_card_phaser3_curso](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_phaser3_curso.jpg)

Juegos web

con Phaser 3

Aprende a programar juegos en la última generación del framework para web. Mira la documentación [aquí](https://phaser.io/tutorials/making-your-first-phaser-3-game/part1). 

[Ir al curso](https://www.udemy.com/course/phaser-iniciacion/)

![Icon_card_gitgalaxy](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_gitgalaxy.jpg)

Microfrontends

Presentación Pragma

Descubre los conceptos de la filosofía de división de responsabilidades aplicada a front-end.

[Navegar](https://docs.google.com/presentation/d/1E7Hgxi4jdhKg4VX-MWqrq9vwy_UBrVZ2JsKzBXIUJmo/edit#slide=id.g476a385cdf_0_76)

![Icon_card_gitgalaxy](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_gitgalaxy.jpg)

Microfrontends 2.0

Presentación Pragma

Ventajas y desventajas de usar microfronts.

[Navegar](https://docs.google.com/presentation/d/1UrPbpGM4RdDnMlFOeI6ziNPQEHHIrQ99iaDk3j2DSFQ/edit?usp=sharing)

![Icon_card_javascript](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_javascript.jpg)

Patrones de diseño

JavaScript

Profundiza en los patrones detrás de las definiciones de la arquitectura front-end.

[Navegar](http://sd.blackball.lv/library/Learning_JavaScript_Design_Patterns_(2012).pdf)

![Icon_card_javascript](https://www.pragma.com.co/hubfs/academia/Universo/Ruta_FrontEnd/Icon_card_javascript.jpg)

Patrones de diseño

TypeScript

Profundiza en los patrones detrás de las definiciones de la arquitectura front-end.

[Navegar](https://refactoring.guru/es/design-patterns/typescript)

curva_top

## Explora más contenido dentro de Academia Pragma

Más Pragmáticos como tú, también tienen mucho que enseñar y han compartido su conocimiento en nuestra Academia. Hemos seleccionado algunas entradas que seguro, te ayudarán en tu viaje de conocimiento.

![Los cuentos de los frameworks](https://www.pragma.com.co/hs-fs/hubfs/academia/PragmaTalks/Frameworks.jpg?height=200&name=Frameworks.jpg)

*![](https://www.pragma.com.co/hs-fs/hubfs/academia/Universe/icons/icon_video.png?width=50&name=icon_video.png)*

En este **PragmaTalk**, Jose Alcaráz nos explica qué son los Frameworks, sus ventajas y desventajas, y cuál es su impacto en los proyectos que desarrollamos todos los días en Pragma.

[Ver más →](https://www.pragma.com.co/academia/universo/galaxia-ingenieria/front-end#)

<https://www.youtube.com/watch?v=LgrYNyqomxI>

![React Native y Flux para el desarrollo de aplicaciones nativas](https://www.pragma.com.co/hs-fs/hubfs/academia/PragmaTalks/reactNativeFlux3.jpg?height=200&name=reactNativeFlux3.jpg)

*![](https://www.pragma.com.co/hs-fs/hubfs/academia/Universe/icons/icon_video.png?width=50&name=icon_video.png)*

En este **PragmaTalk**, Juan Pablo Troconis nos habla sobre React Native y Flux para el desarrollo de aplicaciones nativas en Android e IOS.

[Ver más →](https://www.pragma.com.co/academia/universo/galaxia-ingenieria/front-end#)

<https://www.youtube.com/watch?v=CWocBW1Jt7Y>

![El mundo de las apps](https://www.pragma.com.co/hs-fs/hubfs/el-mundo-de-las-apps.jpg?height=200&name=el-mundo-de-las-apps.jpg)

*![](https://www.pragma.com.co/hs-fs/hubfs/academia/Universe/icons/icon_doc.png?width=50&name=icon_doc.png)*

En esta entrada de **Blog**, Jose Alcaráz nos explica qué es una App y nos cuenta las diferencias entre 5 tipos de aplicaciones.

[Leer más →](https://www.pragma.com.co/academia/universo/galaxia-ingenieria/front-end#)

<https://www.pragma.com.co/blog/el-mundo-de-las-apps-web-vs.-moviles>

curva_bottom

## Buenas prácticas del front-end

En estas flashcards encontrarás tips de buenas prácticas en el sistema   
front-end.

![Buenas prácticas en JavaScript](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/Ruta_FrontEnd/flashcard/02_flashcard_frontend.jpg?width=552&name=02_flashcard_frontend.jpg "Buenas prácticas en JavaScript")

![03_flashcard_frontend2](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/Ruta_FrontEnd/flashcard/03_flashcard_frontend2.jpg?width=552&name=03_flashcard_frontend2.jpg "03_flashcard_frontend2")

![04_flashcard_frontend2](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/Ruta_FrontEnd/flashcard/04_flashcard_frontend2.jpg?width=552&name=04_flashcard_frontend2.jpg "04_flashcard_frontend2")

![Buenas prácticas en HTML](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/Ruta_FrontEnd/flashcard/05_flashcard_frontend2.jpg?width=552&name=05_flashcard_frontend2.jpg "Buenas prácticas en HTML")

![06_flashcard_frontend2](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/Ruta_FrontEnd/flashcard/06_flashcard_frontend2.jpg?width=552&name=06_flashcard_frontend2.jpg "06_flashcard_frontend2")

![07_flashcard_frontend2](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/Ruta_FrontEnd/flashcard/07_flashcard_frontend2.jpg?width=552&name=07_flashcard_frontend2.jpg "07_flashcard_frontend2")

![Buenas prácticas en UI/UX](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/Ruta_FrontEnd/flashcard/08_flashcard_frontend.jpg?width=552&name=08_flashcard_frontend.jpg "Buenas prácticas en UI/UX")

![09_flashcard_frontend2](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/Ruta_FrontEnd/flashcard/09_flashcard_frontend2.jpg?width=552&name=09_flashcard_frontend2.jpg "09_flashcard_frontend2")

![10_flashcard_frontend2](https://www.pragma.com.co/hs-fs/hubfs/academia/Universo/Ruta_FrontEnd/flashcard/10_flashcard_frontend2.jpg?width=552&name=10_flashcard_frontend2.jpg "10_flashcard_frontend2")

![](https://www.pragma.com.co/hubfs/portal_pragma_2018/images/home/isotipo_pragma.svg "isotipo_pragma.svg")  [Términos y condiciones](https://www.pragma.com.co/es/terminos-condiciones) | [Políticas de privacidad](https://www.pragma.com.co/es/politicas-privacidad)

Copyright Pragma S.A. 2020

![](https://px.ads.linkedin.com/collect/?pid=1381858&fmt=gif)

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://www.pragma.com.co/#organization",
  "@type" : "Corporation",
  "address" : {
    "@type" : "PostalAddress",
    "addressCountry" : "CO",
    "addressLocality" : "Medellín",
    "addressRegion" : "Antioquia",
    "postalCode" : "XXXXX",
    "streetAddress" : "TU DIRECCIÓN AQUÍ"
  },
  "alternateName" : "PRAGMA",
  "contactPoint" : [ {
    "@type" : "ContactPoint",
    "areaServed" : "CO",
    "availableLanguage" : "es",
    "contactType" : "customer service",
    "telephone" : "+57-4-605-2523"
  } ],
  "legalName" : "PRAGMA S.A.",
  "logo" : "https://www.pragma.com.co/hs-fs/hubfs/portal_pragma_2018/images/home/logos/logo_pragma_a_color.png",
  "name" : "PRAGMA S.A.",
  "sameAs" : [ "https://www.facebook.com/SomosPragma/", "https://twitter.com/SomosPragma", "https://www.instagram.com/somospragma/", "https://www.youtube.com/user/PragmaSA/", "https://www.linkedin.com/company/pragma-s-a-/" ],
  "url" : "https://www.pragma.com.co/"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://www.pragma.com.co/#website",
  "@type" : "WebSite",
  "inLanguage" : "es",
  "name" : "Pragma",
  "potentialAction" : {
    "@type" : "SearchAction",
    "query-input" : "required name=search_term_string",
    "target" : "https://www.pragma.com.co/hs-search-results?term={search_term_string}"
  },
  "publisher" : {
    "@id" : "https://www.pragma.com.co/#organization"
  },
  "url" : "https://www.pragma.com.co/"
}
```