React vs Angular: la comparación definitiva

React vs Angular: la comparación definitiva

¿Dificil decisión verdad? por eso te traigo esta completa comparación: React vs Angular. Cada framework tiene mucho que ofrecer y no es fácil elegir entre ellos. Tanto si eres un recién llegado tratando de averiguar por dónde empezar, como un diseñador web freelance eligiendo un framework para tu próximo proyecto, o un director de nivel empresarial planificando una visión estratégica para tu empresa, es probable que te beneficies de tener una visión educada sobre este tema.

Para ahorrarte tiempo, déjame decirte algo de antemano: este artículo no dará una respuesta clara sobre qué framework es mejor. Pero tampoco lo harán cientos de otros artículos con títulos similares. No puedo decírtelo, porque la respuesta depende de una amplia gama de factores que hacen que una tecnología en particular sea más o menos adecuada para tu entorno y tu caso de uso.

Como no podemos responder directamente a la pregunta, intentaremos algo más. Una Angular y React, para demostrar cómo se puede abordar el problema de comparar dos frameworks de una manera estructurada por sí mismo y adaptarlo a tu entorno. Ya sabes, el viejo enfoque de “enseñar a un hombre a pescar”. De esta manera, cuando ambos sean reemplazados por un BetterFramework.js dentro de un año, podrás recrear el mismo tren de pensamiento una vez más.

Esta guía acaba de ser actualizada para reflejar el estado de React, Angular, y sus respectivas ventajas y desventajas en el 2020.

¿Por dónde empezar con React vs Angular?

Antes de elegir cualquier herramienta, tienes que responder a dos simples preguntas: “¿Es una buena herramienta en sí misma?” y “¿Funcionará bien para mi caso de uso?” Ninguna de ellas significa nada por sí sola, así que siempre hay que tenerlas en cuenta. De acuerdo, las preguntas pueden no ser tan simples, así que intentaremos dividirlas en otras más pequeñas.

Preguntas sobre la propia herramienta:

  • ¿Qué tan madura es y quién está detrás de ella?
  • ¿Qué tipo de características tiene?
  • ¿Qué arquitectura, patrones y paradigmas de desarrollo emplea?
  • ¿Cuál es el ecosistema que lo rodea?

Preguntas para la reflexión:

  • ¿Podremos yo y mis colegas aprender esta herramienta con facilidad?
  • ¿Encaja bien con mi proyecto?
  • ¿Cómo es la experiencia del desarrollador?

Usando esta serie de preguntas, puedes empezar tu evaluacion de cualquier herramienta, y basaremos nuestra comparacion de React y Angular en ellas tambien.

¿Es justo hacer una comparación de React vs Angular?

Hay otra cosa que debemos tener en cuenta. Estrictamente hablando, no es exactamente justo comparar Angular con React, ya que Angular es un marco completo y rico en características, mientras que React es sólo una biblioteca de componentes UI. Para igualar las probabilidades, hablaremos de React en conjunto con algunas de las bibliotecas que se usan a menudo con él.

Madurez

Una parte importante de ser un desarrollador hábil es ser capaz de mantener el equilibrio entre los enfoques establecidos y probados a lo largo del tiempo y la evaluación de la nueva tecnología punta. Como regla general, debes tener cuidado al adoptar herramientas que aún no han madurado debido a ciertos riesgos:

  • La herramienta puede ser un fracaso e inestable.
  • Puede ser abandonada inesperadamente por el distribuidor.
  • Puede que no haya una gran base de conocimientos o comunidad disponible en caso de que necesites ayuda.
  • Tanto React como Angular provienen de buenas familias, así que parece que podemos confiar en este sentido.

React

React es desarrollado y administrado por Facebook y utilizado en sus productos, incluyendo Instagram y WhatsApp. Existe desde el año 2013, así que no es exactamente nuevo. También es uno de los proyectos más populares de GitHub, con más de 150.000 estrellas en el momento de escribir este artículo. Algunas de las otras empresas que usan React son Airbnb, Uber, Netflix, Dropbox y Atlassian.

Angular

Angular existe desde 2016, lo que lo hace un poco más joven que React, pero tampoco es un novato en el tema. Es administrado por Google y, como mencionó Igor Minar, incluso en 2018 fue usado en más de 600 aplicaciones en Google como la Base de Datos de Fire, Google Analytics, Google Express, la plataforma de nube de Google y más. Fuera de Google, Angular es usado por Forbes, Upwork, VMWare y otros.

Características de ambos: React vs Angular

Como mencioné antes, Angular tiene más características que Reaccionar. Esto puede ser algo bueno y malo, dependiendo de cómo se mire. Ambos frameworks comparten algunas características claves en común: componentes, unión de datos, y plataforma de representación agnóstica.

Angular

Angular proporciona muchas de las características requeridas para una aplicación web moderna nada más sacarla de la caja. Algunas de las características estándar son:

  • Inyección para dependencia
  • Plantillas, basadas en una versión extendida de HTML
  • Componentes de clase con ganchos de ciclo de vida
  • Enrutamiento, proporcionado por @angular/router
  • Solicitudes de Ajax usando @angular/common/http
  • @angular/forms para construir formularios
  • Encapsulación del componente CSS
  • Protección XSS
  • División del código y carga perezosa
  • Corredor de prueba, marco y utilidades para la prueba de la unidad.

Algunas de estas características están incorporadas en el núcleo del framework y no tienes la opción de no usarlas. Esto requiere que los desarrolladores estén familiarizados con características como la inyección de dependencia para construir incluso una pequeña aplicación Angular. Otras características como el cliente HTTP o los formularios son completamente opcionales y pueden ser añadidas según sea necesario.

React

Con React, estás empezando con un enfoque más minimalista. Si estamos viendo sólo a React, esto es lo que tenemos:

  • En lugar de las plantillas clásicas, tiene JSX, un lenguaje similar a XML construido sobre JavaScript
  • Componentes de clase con ganchos de ciclo de vida o componentes funcionales más simples
  • Gestión del estado usando setState y ganchos.
  • Protección XSS
  • División del código y carga perezosa
  • Error en el manejo de los límites
  • Utilidades para los componentes de pruebas unitarias

Fuera de la caja, React no proporciona nada para la inyección de dependencia, el enrutamiento, las llamadas HTTP o el manejo avanzado de formularios. Se espera que elijas cualquier librería adicional para añadirla en base a tus necesidades, lo cual puede ser tanto bueno como malo dependiendo de la experiencia que tengas con estas tecnologías. Algunas de las bibliotecas populares que se utilizan a menudo junto con React son:

  • React-router para el enrutamiento
  • Fetch (o axios) para peticiones HTTP
  • Una amplia variedad de técnicas para la encapsulación de CSS
  • Biblioteca de Pruebas para utilidades adicionales.

Los equipos con los que he trabajado han encontrado liberadora la libertad de elegir sus bibliotecas. Esto nos da la capacidad de adaptar nuestra pila a los requisitos particulares de cada proyecto, y no hemos encontrado el costo de aprender nuevas bibliotecas tan alto.

Lenguajes, paradigmas y patrones

Dando un paso atrás de las características de cada framework, veamos qué tipo de conceptos de alto nivel son populares en ambos frameworks.

React

Varias cosas importantes vienen a la mente cuando se piensa en React: JSX, componentes y ganchos.

JSX

A diferencia de la mayoría de los frameworks, React no tiene un lenguaje de plantillas separado. En lugar de seguir el enfoque clásico de separar el marcado y la lógica, React decidió combinarlos dentro de los componentes utilizando JSX, un lenguaje similar al XML que permite escribir el marcado directamente en el código JavaScript.

Aunque los méritos de mezclar el marcado con JavaScript pueden ser discutibles, tiene un beneficio indiscutible: el análisis estático. Si cometes un error en tu marcado JSX, el compilador emitirá un error en lugar de continuar en silencio. Esto ayuda al detectar instantáneamente errores de escritura y otros errores tontos. El uso de JSX atrapado en diferentes proyectos – como MDX, que permite usar JSX en archivos de marcas de revisión.

Componentes

En React puede definir los componentes utilizando funciones y clases.

Los componentes de clase permiten escribir el código usando clases ES y estructurar la lógica del componente en métodos. También te permiten utilizar los métodos tradicionales del ciclo de vida de React para ejecutar la lógica personalizada cuando un componente se monta, actualiza, desmonta, etc. A pesar de que esta escritura es más fácil de entender para las personas familiarizadas con la programación OOP, es necesario ser consciente de todos los sutiles matices que tiene JS – por ejemplo, cómo funciona, y no olvidar de vincular los controladores de eventos.

Los componentes de funciones se definen como funciones simples. A menudo son puros y proporcionan un claro mapeo entre los apoyos de entrada y la salida renderizada. El código funcional suele estar menos acoplado y es más fácil de reutilizar y probar. Antes de la introducción de los ganchos, los componentes funcionales no podían tener estado y no tenían una alternativa a los métodos de ciclo de vida.

Hay una tendencia entre los desarrolladores de React a abandonar los componentes de clase en favor de componentes funcionales más simples, pero como los ganchos son una característica más reciente, normalmente se verá una mezcla de ambos enfoques en los proyectos más grandes de React.

Ganchos

Los ganchos son una nueva característica de React que se introdujo en la versión 16.8. Son funciones que permiten clasificar el estado de los componentes y las características del método de ciclo de vida en componentes funcionales. Hay dos ganchos proporcionados por React: useState para gestionar el estado, y useEffect para crear efectos secundarios – como la carga de datos o la edición manual del DOM.

Los ganchos han sido introducidos para hacer los componentes funcionales más simples y más compatibles. Ahora se pueden dividir las grandes funciones en partes atómicas más pequeñas, lo que permite dividir las piezas funcionales relacionadas, separándolas de la lógica de representación y reutilizándolas en diferentes componentes. Los ganchos son una alternativa más limpia a la utilización de componentes de clase y otros patrones, como las funciones de renderizado y los componentes de orden superior, que pueden complicarse demasiado rápidamente.

React ofrece formas de estructurar su aplicación sin implicar muchas capas de complicadas abstracciones. La utilización de componentes funcionales junto con los ganchos te permite escribir código que es más simple, más atómico y reutilizable. Aunque la idea de combinar el código y las plantillas pueda parecer controvertida, la separación de la lógica de presentación y de aplicación en diferentes funciones permite obtener resultados similares.

Angular

Angular también tiene algunas cosas interesantes bajo la manga, empezando por las abstracciones básicas como componentes, servicios y módulos, hasta TypeScript, RxJS y Angular Elements, así como su enfoque de la gestión del estado.

Conceptos principales

Angular tiene un nivel de abstracción más alto que React, introduciendo así más conceptos fundamentales con los que familiarizarse. Los principales son:

  • Componentes: definidos como clases ES especialmente decoradas que se encargan de ejecutar la lógica de la aplicación y de renderizar la plantilla
  • Servicios: clases responsables de la implementación de la lógica de negocio y de aplicación, utilizadas por los componentes
  • Módulos: esencialmente Contenedores de DI para el cableado de componentes relacionados, servicios, canalizaciones y otras entidades juntas.

Angular hace un uso intensivo de clases y conceptos como DI, que son menos populares en el mundo del desarrollo front-end, pero que deberían ser familiares para cualquiera con experiencia en el desarrollo back-end.

TypeScript

TypeScript es un nuevo lenguaje construido sobre JavaScript y desarrollado por Microsoft. Es un superconjunto de JavaScript ES2015 e incluye características de las nuevas versiones del lenguaje. Puedes usarlo en lugar de Babel para escribir JavaScript de última generación. También cuenta con un sistema de escritura extremadamente poderoso que puede analizar estáticamente tu código usando una combinación de anotaciones e inferencia de tipos.

También hay un beneficio más sutil. TypeScript ha sido fuertemente influenciado por Java y .NET, por lo que si tus desarrolladores tienen una formación en uno de estos lenguajes, es probable que encuentren que TypeScript es más fácil de aprender que el simple JavaScript (observa cómo cambiamos de la herramienta a tu entorno personal). Aunque Angular fue el primer gran framework en adoptar activamente el TypeScript, ahora está obteniendo impulso en muchos otros proyectos también, como Deno (un tiempo de ejecución nativo de TypeScript), Puppeteer, y TypeORM.

También es posible (y prudente) usar TypeScript junto con React.

RxJS

RxJS es una biblioteca de programación interactiva que permite un manejo más flexible de las operaciones y eventos asíncronos. Es una combinación de los patrones observador e interrogador mezclados con programación funcional. RxJS permite tratar cualquier cosa como un flujo continuo de valores y realizar varias operaciones en él como mapear, filtrar, dividir o fusionar.

La biblioteca ha sido adoptada por Angular en su módulo HTTP también para algún uso interno. Cuando realizas una petición HTTP, devuelve un observable en lugar de la promesa habitual. Este enfoque abre la puerta a interesantes posibilidades, como la capacidad de cancelar una petición, reintentarla varias veces, o trabajar con flujos de datos continuos como WebSockets. Pero esto es sólo la superficie. Para dominar el RxJS, necesitarás conocer los diferentes tipos de Observables, Sujetos, así como un centenar de métodos y operadores.

Gestión del Estado

De manera similar a React, Angular Elements tienen un concepto de estado de componente. Los componentes pueden almacenar datos en sus propiedades de clase y vincular los valores a sus plantillas. Si se quiere compartir el estado a través de la aplicación, se puede pasar a un servicio de estado que más tarde se puede inyectar en los componentes. Dado que la programación reactiva y el RxJS es un ciudadano de primera clase en Angular, es común hacer uso de observables para recalcular partes del estado basado en alguna entrada. Esto, sin embargo, puede ser complicado en aplicaciones más grandes ya que el cambio de algunas variables puede desencadenar una cascada multidireccional de actualizaciones que es difícil de seguir. Hay bibliotecas para Angular que permiten simplificar el manejo de los estados a escala. Las veremos con más detalle más adelante.

Angular Elements

Angular Elements proporcionan una forma de empaquetar los componentes angulares como elementos personalizados. También conocidos como componentes web, los elementos personalizados son una forma estandarizada de crear elementos HTML personalizados que son controlados por su código JavaScript. Una vez que definas tal elemento y lo agregues al registro del navegador, se mostrará automáticamente en todos los lugares a los que se haga referencia en el HTML. Angular Elements proporcionan una API que crea la envoltura necesaria para implementar la API de componentes personalizados y hacerla funcionar con el mecanismo de detección de cambios de Angular. Este mecanismo puede utilizarse para incrustar otros componentes o aplicaciones enteras de Angular en su aplicación host, potencialmente escrita en un marco de trabajo diferente con un ciclo de desarrollo distinto.

Hemos encontrado que TypeScript es una gran herramienta para mejorar la mantenibilidad de nuestros proyectos, especialmente aquellos con una gran base de código o un dominio complejo/lógica de negocios. El código escrito en TypeScript es más descriptivo, y más fácil de seguir y refactorizar. Incluso si no va con Angular, te sugerimos que lo consideres para tu próximo proyecto de JavaScript. RxJS introduce nuevas formas de manejar el flujo de datos en su proyecto, pero requiere que tengas una buena comprensión del tema. De lo contrario, puede traer una complejidad no deseada a tu proyecto. Angular Elements tienen el potencial de reutilizar los componentes angulares, y es interesante ver cómo se desarrolla esto en el futuro.

Ecosistema

Lo bueno de los frameworks de código abierto es el número de herramientas creadas a su alrededor. A veces, estas herramientas son incluso más útiles que el propio framework. Echemos un vistazo a algunas de las herramientas y bibliotecas más populares asociadas a cada framework.

Angular

Angular CLI

Una tendencia popular con los frameworks modernos es tener una herramienta CLI que te ayuda a arrancar tu proyecto sin tener que configurar la estructura por ti mismo. Angular tiene Angular CLI para eso. Te permite generar y ejecutar un proyecto con sólo un par de comandos. Todos los scripts responsables de construir la aplicación, iniciar un servidor de desarrollo y ejecutar pruebas están ocultos en node_modules. También puedes usarlo para generar nuevo código durante el desarrollo e instalar dependencias.

Angular introduce una nueva e interesante forma de manejar las dependencias de tu proyecto. Al usar ng add, puedes instalar una dependencia y se configurará automáticamente para su uso. Por ejemplo, cuando ejecutas ng add @angular/material, Angular CLI descarga Angular Material del registro npm y ejecuta su script de instalación que configura automáticamente tu aplicación para usar Angular Material. Esto se hace usando Angular schematics. Schematics es una herramienta de flujo de trabajo que permite a las bibliotecas hacer cambios en su código base. Esto significa que los autores de la biblioteca pueden proporcionar formas automáticas de resolver los problemas de incompatibilidad con las versiones anteriores que podrías sufrir al instalar una nueva versión.

Ionic framework

Ionic es un framework muy popular para el desarrollo de aplicaciones móviles híbridas. Proporciona un contenedor de Córdova que está bien integrado con Angular y una bonita biblioteca de componentes materials. Usándolo, se puede configurar y construir fácilmente una aplicación móvil. Si prefieres una aplicación híbrida a una nativa, esta es una buena elección.

Angular universal

Angular universal es un proyecto que agrupa diferentes herramientas para permitir la representación del lado del servidor para las aplicaciones Angular. Está integrado con Angular CLI y soporta varios frameworks Node.js, como Express y Hapi, así como con el núcleo .NET.

Augury

Augury es una extensión del navegador para Chrome y Firefox que ayuda a depurar las aplicaciones Angular que se ejecutan en modo de desarrollo. Puedes usarlo para explorar tu árbol de componentes, monitorizar la detección de cambios y optimizar los problemas de rendimiento.

React

Create React App

Create React App es una utilidad CLI para que React pueda crear rápidamente nuevos proyectos. Similar a la Angular CLI, permite generar un nuevo proyecto, ejecutar la aplicación en modo de desarrollo o crear un paquete de producción. Utiliza Jest para pruebas unitarias, soporta el perfilado de la aplicación utilizando variables de entorno, proxies de back-end para el desarrollo local, TypeScript, Sass, PostCSS, y muchas otras características.

React Native

React Native es una plataforma desarrollada por Facebook para crear aplicaciones móviles nativas utilizando React. A diferencia de Ionic, que produce una aplicación híbrida, React Native produce una interfaz de usuario verdaderamente nativa. Proporciona un conjunto de componentes estándar de React que están unidos a sus contrapartes nativas. También permite crear sus componentes y vincularlos a código nativo escrito en Objective-C, Java o Swift.

Next.js

Next.js es un framework para el renderizado del lado del servidor de las aplicaciones de React. Proporciona una forma flexible de renderizar total o parcialmente tu aplicación en el servidor, devolver el resultado al cliente y continuar en el navegador. Trata de hacer más fácil la compleja tarea de crear aplicaciones universales, por lo que la configuración está diseñada para ser lo más simple posible, con una cantidad mínima de nuevas características y requisitos para la estructura de tu proyecto.

React-admin

React-admin es un framework para construir aplicaciones de SPA estilo CRUD sobre las APIs existentes de REST o GraphQL. Viene con características útiles, como una interfaz de usuario construida con Material Design, internacionalización, tematización, validación de datos y más.

Tomando una decisión: React vs Angular

Ya habrán notado que cada framework tiene su propio conjunto de capacidades, tanto con sus lados buenos como malos. Pero este análisis se ha hecho fuera de cualquier contexto particular y, por lo tanto, no proporciona una respuesta sobre qué framework debes elegir. Para decidirlo, tendrás que revisarlo desde la perspectiva de tu proyecto. Esto es algo que tendrás que hacer por tu cuenta.

Qué es SVG y para qué sirve

Qué es SVG y para qué sirve

Si te has preguntado alguna vez qué es SVG, te lo voy a explicar. Aunque fue concebido a finales de los 90, SVG es en muchos sentidos el formato de archivo ” el patito feo” que creció hasta convertirse en un cisne. Poco respaldado y en gran parte ignorado durante la mayor parte de la década del 2000, a partir de 2017 todos los navegadores web modernos han estado renderizando SVG sin ningún problema, y la mayoría de los programas de dibujo vectorial han estado ofreciendo la opción de exportar SVG, que sin duda se ha convertido en un formato gráfico muy utilizado en la Web.

Esto no ha sucedido por casualidad. Aunque los formatos tradicionales de archivos gráficos rasterizados como JPG y PNG son perfectos para fotografías o imágenes muy complejas, resulta que SVG es el formato gráfico que más se ajusta a las demandas actuales de desarrollo web en cuanto a escalabilidad, capacidad de respuesta, interactividad, programabilidad, rendimiento y accesibilidad.

Entonces, ¿qué es SVG y por qué debería usarlo?

SVG es un formato gráfico vectorial basado en el lenguaje de marcas extensible (XML) para la Web y otros entornos. XML utiliza etiquetas como HTML, aunque es más estricto. No se puede, por ejemplo, omitir una etiqueta de cierre ya que esto hará que el archivo no sea válido y que el SVG no se muestre.

Para que te hagas una idea de cómo es el código SVG, aquí tienes cómo dibujar un círculo blanco con un borde negro:

<circle cx="100" cy="100" r="50" stroke-width="4" stroke="#000" fill="#fff" />

Como puedes ver, en el interior del armario, los documentos SVG no son más que simples archivos de texto plano que describen líneas, curvas, formas, colores y texto. Como es legible para el ser humano, fácilmente comprensible y modificable, cuando se incrusta en un documento HTML como un SVG online, el código del SVG puede ser manipulado a través de CSS o JavaScript. Esto le da al SVG una flexibilidad y versatilidad que nunca podrá ser igualada por los formatos gráficos tradicionales PNG, GIF o JPG.

SVG es un estándar de la W3C, lo que significa que puede interactuar fácilmente con otros lenguajes y tecnologías de estándar abierto, incluyendo JavaScript, DOM, CSS y HTML. Mientras el W3C establezca los estándares globales de la industria, es probable que SVG continúe siendo el estándar de hecho para los gráficos vectoriales en el navegador.

Problemas que resuelve el formato SVG

La maravilla de SVG es que puede resolver muchos de los problemas más molestos para un diseñador web freelance. Veamos algunos de ellos:

Escalabilidad y capacidad de respuesta

El SVG utiliza formas, números y coordenadas en lugar de una cuadrícula de píxeles para mostrar los gráficos en el navegador, lo que lo hace independiente de la resolución e infinitamente escalable. Si lo piensas bien, las instrucciones para crear un círculo son las mismas tanto si usas un bolígrafo como un avión para escribir en el cielo. Sólo cambia la escala.

Con SVG, puedes combinar diferentes formas, trayectorias y elementos de texto para crear todo tipo de visuales, y estarás seguro de que se verán claros y nítidos en cualquier tamaño.

Por el contrario, los formatos basados en rásters como GIF, JPG y PNG tienen dimensiones fijas, lo que hace que se pixelen cuando se escalan. Aunque varias técnicas de imagen responsive han demostrado ser valiosas para los gráficos de píxeles, nunca podrán competir realmente con la capacidad de SVG de escalar indefinidamente.

Programabilidad e interactividad

El SVG es totalmente editable y programable. Todo tipo de animaciones e interacciones pueden ser añadidas a un gráfico SVG online a través de CSS y/o JavaScript.

Accesibilidad

Los archivos SVG están basados en texto, por lo que cuando se incorporan a una página web, pueden ser buscados e indexados. Esto los hace accesibles para un lector tipo reader, un motor de búsqueda y otros dispositivos.

Rendimiento

Uno de los aspectos más importantes que afectan al rendimiento de la web es el tamaño de los archivos utilizados en una página web. Los gráficos SVG suelen ser de menor tamaño en comparación con los formatos de archivos de mapa de bits.

Casos de uso común y soporte del navegador

SVG tiene una avalancha de casos de uso práctico. Exploremos los más significativos de ellos.

Ilustraciones y diagramas sencillos

Cualquier dibujo tradicional que se preste a ser producido con lápiz y bolígrafo debe traducirse perfectamente al formato SVG.

Logotipos e iconos

Los logos e iconos deben ser claros y nítidos en cualquier tamaño, ya sea el tamaño de un botón o el de una valla publicitaria, lo que los convierte en candidatos ideales para el SVG. Además, los iconos de SVG son más accesibles y son mucho más fáciles de colocar.

Animaciones

Puedes crear atractivas animaciones, incluyendo atractivos efectos de dibujo usando gráficos SVG. De hecho, el código SVG puede interactuar con la animación CSS, así como con JavaScript y su propia funcionalidad de animación SMIL incorporada.

Interactividad (tablas, gráficos, infografías, mapas)

El SVG puede utilizarse para trazar datos y actualizarlos dinámicamente en función de las acciones del usuario u otros eventos. Consulta la Infografía interactiva de SVG y el Mapa interactivo de rutas de SVG.

Efectos especiales

Se pueden lograr muchos efectos en vivo usando SVG, incluyendo el modelado de formas o diferentes efectos pegajosos.

Construyendo interfaces y aplicaciones

SVG te permite hacer interfaces sofisticadas que puedes integrar con HTML5, aplicaciones basadas en la web y aplicaciones ricas de Internet (RIA).

Como puedes ver, el SVG se utiliza casi en todas partes y en innumerables situaciones. La buena noticia de todo esto es que la compatibilidad del SVG con los navegadores es excelente, como puedes comprobar tú mismo en caniuse.com.

Así que ahora ya sabes lo que son las SVG y por qué son geniales para la Web.

Colores en css y cómo usarlos

Colores en css y cómo usarlos

Los colores en CSS juegan un papel vital para hacer que una página web sea útil o no. En CSS, podemos controlar el color de primer plano y de fondo de un elemento con las propiedades de color y de fondo. Cuando aprendí CSS en el pasado, no había una guía directa o una manera de aprender a usar los colores en CSS.

Decidí escribir sobre los colores y cómo usarlos en CSS. En este artículo, explicaré los tipos de colores, palabras clave específicas, y cuándo usar cuáles junto con casos de uso y ejemplos. Aviso: este no es un artículo sobre la teoría del color.

La propiedad del color (colores en CSS)

Según el MDN:

La propiedad color CSS establece el valor de color de primer plano del texto y las decoraciones de texto de un elemento y establece el valor de color actual.

La propiedad establece el valor del color de primer plano de un elemento. Los valores permitidos para ello son: named-color, hex-color, rgb(), hsl, inherit, initial, unset y currentColor. Voy a repasar cada tipo de valor en detalle.

Valor Named Color

.heading {
    color: brown;
    color: green;
    color: black;
}

Comprueba la lista completa de los colores en css si estás interesado. Vale la pena mencionar que algunos nombres de colores no están soportados en todos los navegadores.

En general, no soy un fanático de usar nombres de colores, ya que no es fácil recordar lo que significa cada color. Por ejemplo, a veces veo a gente que usa el blanco o el negro como valor de color. Esto no es un problema. Pero en general, no recomiendo usar colores en css con nombre. El único caso en el que usaría un color con nombre es el siguiente:

*, *:before, *:after {
    outline: solid 1px red;
}

Usé el color rojo para mostrar rápidamente un esquema de todos los elementos de la página. El color rojo es muy popular para ese uso e incluso vi memes y cosas divertidas sobre él.

Valores de color hexadecimales

Un color hexagonal consiste en seis caracteres, #ffffff representa el color blanco, por ejemplo. Hay un consejo que quiero asegurarme que sepas, que es la notación abreviada para los valores hexadecimales.

Funciona de manera que si el par de valores de color son idénticos, entonces el segundo puede ser eliminado. Cada par representa un modal de color y son Rojo, Verde y Azul, respectivamente. Veamos lo siguiente:

body { color: #222222; /* Se convertirá en #222 */
body { color: #000000; /* Se convertirá en #000 */

El #222222 es igual al #222, el valor hexagonal puede ser representado como 22, 22, 22, tomamos el primer valor de cada uno, así que resultó en el #222.

Veamos un visual que explica cómo funciona esto.

color hexadecimales

Colores RGB/RGBA

Rojo Verde Azul (RGB) es un modelo de color que representa los tres canales de color (rojo, verde, azul). Cada valor de los tres puede ser un número entre 0 y 255 o un porcentaje de 0 a 100%.

Si los tres valores son 0, entonces el color resultante será negro. Sin embargo, si todos los valores son 255, entonces el color será blanco. Lo mismo puede aplicarse también a los valores porcentuales.

.element {
    /* Blanco */
    color: rgb(255, 255, 255);
    color: rgb(100%, 100%, 100%);

    /* Negro */
    background-color: rgb(0, 0, 0);
    background-color: rgb(0%, 0%, 0%);
}

Lo bueno de rgb es que hay un canal alfa que controla la transparencia del color. Esto puede ser muy útil para tener un matiz de color. Hay más casos de uso útiles que trataré en este artículo.

.elemento {
    /* Un color de fondo negro con un 50% de transparencia */
    background-color: rgba(0, 0, 0, 0.5);
}

Si el valor de alfa es cero, entonces el color o el fondo será transparente y no visible.

Colores HSL

Rara vez noto el uso de este modelo de colores en css, pero recientemente comenzó a ganar más atención de los diseñadores y desarrolladores. HSL significa: tono, saturación, luminosidad.

En la rueda de colores en css, cada color tiene un cierto grado, que es el tono. Entonces, todavía tenemos que establecer la saturación y la luminosidad.

Déjame guiarte a través del proceso de cálculo de un valor de color HSL. Supongamos que elegimos el siguiente color.

rueda de colores en css

Para la saturación y la luminosidad, aquí hay una bonita forma visual de imaginarlas que aprendí gracias a este artículo. Una vez elegido el grado de matiz, podemos imaginar la saturación y la luminosidad como la siguiente imagen.

saturación y la luminosidad colores en css

La saturación comienza en el gris y termina con el color del tono. Mientras que la luminosidad comienza desde el negro hasta el color de la tonalidad, y finalmente hasta el color blanco.

Esa flexibilidad es muy útil, puedes elegir un color de tono, y luego ajustar la saturación y la luminosidad según tus necesidades. Esto puede ayudarte a crear una paleta de colores que sea dinámica y fácil de usar.

CurrentColor

CurrentColor tiene el valor de la propiedad de color de un elemento. Se puede usar en elementos que no heredan el color por defecto. Aquí hay algunas propiedades que están predeterminadas en currentColor:

border-color
texto-decoración-color
contorno-color
box-shadow

Parece que currentColor es similar a usar una variable CSS, pero estaba ahí antes de que las variables CSS fueran soportadas. Mira lo siguiente:

.elemento {
    color: #222;
    border: 2px solid;
}

¿Puedes adivinar el color del borde? Es lo mismo que la propiedad del color. Eso es porque el color del borde tiene a CurrentColor como la variable por defecto. Puedes imaginarlo así:

.elemento {
    color: #222;
    border: 2px solid currentColor;
}

Una cosa interesante que hay que saber sobre el CurrentColor es que puede ser usado en el nivel del elemento padre, o para los elementos hijos.

<h1>
    Soy un titulo
    <span>Yo soy un elemento hijo</span>
</h1>

En el En el ejemplo anterior, podemos usar CurrentColor para el elemento h1 o el elemento span. Ver más abajo:

h1 {
    color: #222;
    background-color: currentColor;
}

Usar DevTools para cambiar el modo de color

Un pequeño truco que es útil cuando se experimenta con colores en CSS, es usar el conmutador en Chrome DevTools. Elige cualquier elemento con un valor de color hexadecimal, e inspecciónalo. Luego, haz clic en el pequeño cuadrado que muestra el color usado actualmente.

Lo anterior funciona sólo con el color hexadecimal, y las propiedades que utilizan directamente una variable CSS como la siguiente.

.btn {
    background-color: var(--brand-primary);
}

Sin embargo, el inconveniente de usar colores HSL combinados con variables CSS es que el comportamiento entre los navegadores todavía no es consistente. Por ejemplo, el ejemplo anterior no mostrará un cuadrado de color en Firefox. Mira la figura de abajo para una comparación:

devtools colores en css

El pequeño cuadrado azul de Safari muestra el valor calculado de la propiedad CSS utilizada. Mejor que nada.

Te preguntarás por qué es necesario tener un cuadrado que represente el color calculado junto a la propiedad. Sin el cuadrado, no podemos abrir la paleta de colores de DevTools, que nos ayuda a comprobar si el color es accesible.

Esto no siempre es así. Por ejemplo, un elemento de un botón tiene un color: #fff y un color de fondo establecido con hsl. Todavía podemos abrir la paleta de colores de DevTools desde la propiedad color y ver la relación de contraste. Sin embargo, para los elementos que utilizan un valor hsla con variables CSS, esto no es posible.

Observaciones de color funcional separadas por espacios

La forma común de usar rgb y hsl es separando sus valores con comas. Una nueva forma ya tiene un gran apoyo en los navegadores que no usan comas.

/* Antes */
.element {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 1);
}

/* Despues */
div {
  background-color: rgb(0 0 0);
  background-color: rgb(0 0 0 / 0.5);
  background-color: rgb(0 0 0 / 50%);
}

Recuerda que la opacidad separada por barras es opcional, y sólo debes usarla si quieres ajustar la transparencia alfa o de color.

La nueva forma es mejor y recomendada ya que las nuevas funciones de color CSS como lab(), lch() y color() sólo funcionarán con la técnica de separación de espacios. Es bueno acostumbrarse a ellas y se puede hacer fácilmente una copia de seguridad para los navegadores no compatibles.

Aviso: aunque he recomendado el uso de la sintaxis de separación de espacios, no la he usado en el artículo porque es nueva, y no quiero introducir ninguna confusión o malentendido no deseado.

Valores Globales (inherit, initial, unset)

Podemos usar los valores globales para dejar que un elemento herede el color de su progenitor, o para restablecer el color de un elemento con palabras clave iniciales o no iniciales. Veamos el siguiente ejemplo para entender esas palabras clave.

Tenemos una sección hero con un título, una descripción y un enlace.

<section class="hero">
    <h2>Titulo de pagina</h2>
    <p>Esta es la descripción</p>
    <a href="#">Ver todo</a>
</section>

Con color: #222 añadido al elemento padre, ¿qué esperas del color de los elementos hijos? El h2 y la p heredarán el color, mientras que la a no lo heredará por defecto. Interesante, ¿no?

El color de enlace por defecto es:

:link { color: #0000ee; }

Si lo necesitas, puedes reforzar el vínculo para heredar añadiendo el color: inherit a él.

La palabra clave unset

Según el MDN:

La palabra clave CSS unset restablece una propiedad a su valor heredado si la propiedad se hereda naturalmente de su padre, y a su valor inicial si no.

Para el mismo ejemplo explicado anteriormente, podemos dejar que el enlace herede el color usando lo siguiente:

.hero a { color: unset; }

Reajustará el color al valor heredado por defecto del elemento .hero, que es lo que queremos.

Ver demo en Codepen

Conclusiones finales sobre colores en CSS

Espero que este artículo te haya gustado, he intentado explicarlo de la forma más sencilla que he podido, si tienes alguna duda deja un comentarios y estaré encantado de ayudarte. De mientras te recomiendo leer el siguiente artículo, Comentario en CSS.

Comentario en CSS: Ejemplo de comentario CSS

Comentario en CSS: Ejemplo de comentario CSS

Un comentario en CSS se utilizan para explicar un bloque de código o para hacer cambios temporales durante el desarrollo. El código comentado no se ejecuta.

Tanto los comentarios de una sola línea como los de varias líneas en CSS empiezan con /* y terminan con */, y puedes añadir tantos comentarios a tu hoja de estilos como quieras. Por ejemplo:

/* Este es un comentario de una sola línea */
.group:after {
  content: "";
  display: table;
  clear: both;
}

/*
  Esto es
  un comentario
  con multiples lineas
*/

También puede hacer más legibles sus comentarios estilizándolos:

/*
***
* SECCIÓN PARA EL ESTILO H2 
***
* Un párrafo con información
* que sería útil para alguien
* que no escribió el código.
* Los asteriscos alrededor del párrafo 
* ayudan a hacerlo más legible.
***
*/

Organizar el CSS con comentarios

En proyectos más grandes, los archivos CSS pueden crecer rápidamente en tamaño y ser difíciles de mantener. Puede ser útil organizar tu CSS en distintas secciones con una tabla de contenidos para facilitar la búsqueda de ciertas reglas en el futuro:

/* 
*  ÍNDICE DEL CCS
*   
*  1.0 - Reset
*  2.0 - Fonts
*  3.0 - Globals
*  4.0 - Color Palette
*  5.0 - Header
*  6.0 - Body
*    6.1 - Sliders
*    6.2 - Imagery
*  7.0 - Footer
*/

/*** 1.0 - Reset ***/

/*** 2.0 - Fonts ***/

/*** 3.0 - Globals ***/

/*** 4.0 - Color Palette ***/

/*** 5.0 - Header ***/

/*** 6.0 - Body ***/
h2 {
  font-size: 1.2em;
  font-family: "Ubuntu", serif;
  text-transform: uppercase;
}

/*** 5.1 - Sliders ***/

/*** 5.2 - Imagery ***/

/*** 7.0 - Footer ***/

Un poco más sobre el CSS: Sintaxis y selectores CSS

Cuando hablamos de la sintaxis del CSS, estamos hablando de cómo se disponen las cosas. Hay reglas sobre dónde va cada cosa, tanto para que puedas escribir CSS de forma consistente como para que un programa (como un navegador) pueda interpretarlo y aplicarlo a la página correctamente.

Hay dos formas principales de escribir CSS.

CSS en línea (Comentario en CSS)

Especificaciones sobre la especificidad del CSS:

El CSS en línea aplica el estilo a un solo elemento y a sus hijos, hasta que se encuentra otro estilo que anula el primero.

Para aplicar CSS en línea, agrega el atributo “style” a un elemento HTML que quieras modificar. Dentro de las comillas, incluye una lista delimitada por punto y coma de pares clave/valor (cada uno a su vez separado por dos puntos) que indica los estilos a establecer.

Aquí tienes un ejemplo de CSS en línea. Las palabras “Uno” y “Dos” tendrán un color de fondo amarillo y un color de texto rojo. La palabra “Tres” tiene un nuevo estilo que anula el primero, y tendrá un color de fondo verde y un color de texto cian. En el ejemplo, estamos aplicando estilos a las etiquetas , pero puedes aplicar un estilo a cualquier elemento HTML.

<div style="color:red; background:yellow">
  Uno
  <div>
    Dos
  </div>
  <div style="color:cyan; background:green">
    Tres
  </div>
</div>

CSS interno (Comentario en CSS)

Mientras que escribir un estilo en línea es una forma rápida de cambiar un solo elemento, hay una forma más eficiente de aplicar el mismo estilo a muchos elementos de la página a la vez.

El CSS interno tiene sus estilos especificados en la etiqueta <style>, y está incrustado en la etiqueta <head>.

Aquí hay un ejemplo que tiene un efecto similar al del ejemplo “inline” anterior, excepto que el CSS ha sido extraído a su propia área. Las palabras “Uno” y “Dos” coincidirán con el divisor y serán un texto rojo sobre un fondo amarillo. Las palabras “Tres” y “Cuatro” también coincidirán con el div selector, pero también coinciden con el selector .nested_div que se aplica a cualquier elemento HTML que haga referencia a esa clase. Este selector más específico anula el primero, y terminan apareciendo como texto cian sobre un fondo verde.

<style type="text/css">
  div { color: red; background: yellow; }
  .nested_div { color: cyan; background: green; }
</style>

<div>
  Uno
  <div>
    Dos
  </div>
  <div class="nested_div">
    Tres
  </div>
  <div class="nested_div">
    Cuatro
  </div>
</div>

Los selectores mostrados arriba son extremadamente simples, pero pueden llegar a ser bastante complejos. Por ejemplo, es posible aplicar estilos sólo a elementos anidados; es decir, un elemento que es hijo de otro elemento.

Este es un ejemplo en el que especificamos un estilo que sólo debe aplicarse a los elementos del div que son hijos directos de otros elementos del div. El resultado es que “Dos” y “Tres” aparecerán como texto rojo sobre un fondo amarillo, pero “Uno” y “Cuatro” no se verán afectados.

<style type="text/css">
  div > div { color: red; background: yellow; }
</style>

<div>
  Uno
  <div>
    Dos
  </div>
  <div>
    Tres
  </div>
</div>
<div>
  Cuatro
</div>

CSS externo

Todos los estilos tienen su propio documento que está enlazado en la etiqueta <head> . La extensión del archivo enlazado es .css.

Si te ha gustado este artículo sobre como poner un comentario en CSS, te recomiendo leer sobre Como crear un texto con degradado de color en CSS.

¿Qué es React y para qué te puede servir?

Qué es React y para qué te puede servir

Si te preguntas Qué es ReactJS, probablemente ya estés familiarizado con algunos lenguajes de programación comunes. Sin embargo, como cualquier framework de codificación o biblioteca, saber sobre ReactJS requiere un conocimiento básico de JavaScript primero. También es importante entender no sólo lo que es un marco de trabajo o una biblioteca de codificación, sino también cómo puede ser utilizado y aplicado hoy en día por los programadores de todo el mundo.

En esta guía sobre ReactJS, cubriremos dónde entra el JavaScript, qué es lo que es especial en ReactJS, y cuáles son las diferentes aplicaciones para las que puedes usarlo si decides aprender más sobre él para añadirlo a tu propia “caja de herramientas” de codificación.

¿Qué es ReactJS y en qué se diferencia de JavaScript?

Lo primero que hay que saber es que ReactJS es una biblioteca (una plantilla o sistema para usar un lenguaje de codificación particular y trabajar con él) mientras que JavaScript es el lenguaje en sí. Las bibliotecas son colecciones de código JavaScript preescrito que puede ser utilizado para tareas comunes de JS, lo que te permite ahorrar mucho tiempo y energía mental evitando tener que codificar minuciosamente las cosas a mano.

El propio JavaScript es uno de los lenguajes de programación más antiguos, así como el más utilizado y aplicable. (Si quieres aprender más sobre JavaScript, aqui te dejo los fundamentos del JavaScript) Lo que es importante entender es cómo un framework de JavaScript (ya sea React o cualquier otro) es útil para ti.

Por ejemplo, el uso de bibliotecas de codificación de JS ofrece la posibilidad de evitar o resolver o implementar fácilmente tareas repetitivas. Lo más probable es que exista una biblioteca JS para cualquier función genérica de JavaScript que tú y otros desarrolladores hayan tenido que afrontar repetidamente codificando a mano.

Esta misma estructura se utiliza también para otros lenguajes de desarrollo. Por ejemplo, muchos desarrolladores de Ruby utilizan el popular marco de trabajo Rails para sus proyectos, que es lo que significa cuando alguien dice que trabaja con Ruby on Rails.

Hablando sobre qué es ReactJS, el framework fue desarrollado y creado por el ingeniero de Facebook Jordan Walke y compartido por primera vez a través del newsfeed de la compañía en 2011. Desde entonces ha sido de código abierto, y, como la mayoría de los lenguajes de programación y bibliotecas, ha visto numerosas iteraciones y adiciones nuevas desde que fue introducido por primera vez.

Entonces, ¿qué es lo que hace a ReactJS particularmente útil o único?

ReactJS está diseñado específicamente para ayudar a los programadores a desarrollar las UI (interfaces de usuario), que es el lado de una aplicación o sitio web particular que el usuario ve e interactúa. Dado que la experiencia del usuario y la facilidad de uso son algunos de los mejores indicadores y conductores de un sitio o aplicación de éxito, una biblioteca dedicada como React fue diseñada para agilizar este proceso y facilitar la creación de UIs eficientes y atractivas.

Antes de ReactJS, los programadores tenían que construir sus UI “a mano” con el lenguaje JavaScript en bruto solamente. Aunque el lenguaje ofrecía las soluciones que los desarrolladores buscaban, el proceso era a menudo complejo, y se prestaba a ser propenso a los errores.

Además de proporcionar código reutilizable de la biblioteca de React para resolver los problemas mencionados, React tiene dos características clave que se suman a su atractivo para los desarrolladores de JavaScript:

JSX (JavaScript eXtension)

Para entender por qué JSX es un beneficio de ReactJS, necesitas entender los documentos HTML, el núcleo de cualquier sitio web. Los navegadores web leen los documentos HTML y los muestran en cualquier dispositivo que estés usando como páginas web. Mientras esto sucede, los navegadores crean Modelos de Objetos de Documentos (DOMs), un “diagrama de flujo” representativo de la disposición de una página web. Los desarrolladores pueden entonces añadir contenido dinámico a sus proyectos modificando los DOM a través de lenguajes como JavaScript.

Teniendo esto en cuenta, JSX (abreviatura de JavaScript eXtension) es una extensión de React que agiliza el proceso de modificación de un DOM mediante el uso de un código simple, de estilo HTML. Aún mejor, JSX es compatible con cualquier navegador web moderno porque React ha sido diseñado para trabajar con todos ellos.

Virtual DOM

Si un desarrollador usa JSX para manipular y actualizar un DOM, ReactJS crea algo llamado Virtual DOM. El Virtual DOM es una imitación del DOM del sitio, y ReactJS hace referencia a esta copia para ver qué elementos del DOM real necesitan cambiar cuando ocurre un evento (como que un usuario haga clic en un botón en el sitio).

Digamos que un usuario introduce un comentario en un formulario de entrada de un blog y presiona el botón ” comentar”. Sin ReactJS, todo el DOM tendría que actualizarse para reflejar este cambio, consumiendo una valiosa potencia de procesamiento y provocando retrasos en el usuario y, por consiguiente, una experiencia de usuario menos óptima. React, por otra parte, escanea el DOM virtual para ver lo que ha cambiado después de una acción del usuario (en este caso, se añade un comentario) y actualiza selectivamente esa sección del DOM solamente.

¿Por qué es esto tan genial? Porque al simplificar procesos como estos, también puedes mejorar significativamente el tiempo de carga de procesamiento de la aplicación que estás creando o editando, lo que hace que la experiencia del usuario sea mejor y que haya menos retraso en el front-end.

¿Por qué debería aprender y saber qué es ReactJS?

En pocas palabras, trabajar con ReactJS puede ayudarte a crear fácilmente impresionantes IU.

Además, a medida que más y más negocios se trasladan al ámbito digital (y por lo tanto, los escaparates digitales y las aplicaciones se vuelven más importantes para los negocios de éxito), la correspondiente demanda de programadores que dominen ReactJS crece rápidamente. Si imaginas un futuro en la programación como una posible carrera, aprender y saber qué es ReactJS y permitirte adquirir las habilidades necesarias para satisfacer esta creciente demanda es una sabia elección.

Cómo aprender JavaScript desde cero rápidamente

Cómo aprender JavaScript desde cero rápidamente

Antes de comenzar como aprender JavaScript desde cero rápidamente, debemos de comenzar primero en conocer exactamente que es JavaScript y para que lo vamos a utilizar.

¿Qué es JavaScript?

JavaScript es un lenguaje de programación orientado a objetos que se utiliza principalmente para crear interfaces interactivas basadas en la web. ¿Suena demasiado técnico? Bueno, entendamos algunos ejemplos:

  • Cuando pasas el ratón por encima de un botón, o cualquier otro elemento, cuando ese elemento se ilumina o mueve indicando que se puede hacer clic en él.
  • Mientras navegas por Facebook, cuando haces clic en el nombre de tu amigo, aparece una ventana de chat.
  • Cuando buscas un tutorial en muchas páginas web, instantáneamente obtienes los resultados de la búsqueda.

En todos los ejemplos anteriores, realizas alguna acción ( deslizarte, hacer clic, escribir) y a cambio, algo sucede. Esta interactividad es exactamente donde el JavaScript entra en escena. JavaScript captura estas acciones/eventos y en base a eso realiza alguna acción/disparo. Es JavaScript el que te proporciona la interactividad en el frontend.

HTML provee el contenido, CSS provee la apariencia de este contenido, JavaScript provee la interactividad sobre este contenido. Sin JavaScript, la experiencia web sería bastante aburrida.

Otro lugar donde JavaScript es ampliamente utilizado es en el desarrollo de backend utilizando modernos frameworks como NodeJS. De hecho, hay una popular plataforma web llamada MEAN stack que agrupa a MongoDB, ExpressJS, AngularJS, y NodeJS.

Cada aplicación web tiene 2 partes – la parte del backend, que es la lógica del lado del servidor y la parte del frontend, que es lo que los clientes verán en el navegador. Los lenguajes de programación más comunes son PHP, Java (no confundir Java con JavaScript), Python, etc. El problema en el uso de estos lenguajes de programación es que la empresa tiene que contratar a desarrolladores de backend que sean expertos en uno de estos lenguajes de programación y desarrolladores de frontend que sean expertos en JavaScript.

NodeJS es un framework basado en JavaScript que recientemente ha ganado popularidad debido a que ahora las empresas pueden contratar desarrolladores de JavaScript que pueden trabajar tanto en el front-end como en el backend. Esto hace que la contratación sea mucho más fácil y también, ya que el mismo desarrollador conoce tanto el frontend como el backend, se vuelve más fácil el manejo del código base.

Nota al margen: JavaScript no tiene nada que ver con Java. Aunque los nombres son similares, ambos lenguajes no están relacionados. "Java" es tan similar a "JavaScript" como "coche" es a "alfombra".

¿Por qué aprender JavaScript desde cero?

JavaScript en el pasado reciente se ha vuelto muy popular entre la comunidad de desarrolladores. Muchas grandes y pequeñas organizaciones están usando JavaScript como su principal lenguaje de programación tanto para el backend como para el frontend. Ha habido un aumento significativo en el número de anuncios de trabajo en JavaScript.

Claramente, JavaScript ha conseguido posicionarse entre los principales lenguajes de programación y, de hecho, está creciendo rápidamente.

Los sueldos de los desarrolladores de JavaScript también han estado subiendo bruscamente, particularmente en las áreas donde se están desarrollando las nuevas empresas. Muchas startups en estos días se están moviendo a MEAN stack y por lo tanto, la demanda sólo va a aumentar más.

Todos estos factores hacen de JavaScript una excelente elección para aquellos que quieren desarrollar una carrera como Ingeniero de Software.

¿Cómo podemos aprender JavaScript desde cero y rápidamente?

Una de las mejores maneras de aprender JavaScript desde cero es hacer un proyecto basado en JavaScript. Aquí están algunas interesantes ideas de proyectos en JavaScript:

  • Una simple calculadora con operaciones como suma, resta, multiplicación, división, etc.
  • Calculadora de facturación de comercio electrónico.
  • Un sistema de división de facturas que ayuda a dividir las facturas entre amigos.
  • Un juego básico de preguntas y respuestas.
  • Un simple buscador potenciado por JavaScript.
  • Forma un validador que se asegura de que no se proporcione ninguna entrada incorrecta en el formulario.
  • Un cuadro de comentarios con JavaScript en un blog.
  • EchoBot – un robot que se hace eco de lo que acabas de escribir.
  • Una simple aplicación de lista de todo lo que te ayuda a manejar tus tareas.
  • Juego de tres en raya que utiliza JavaScript, HTML y CSS.
  • Galería de fotos.
  • Tu propia página de inicio interactiva.
  • Un simple generador de estadísticas de documentos usando JavaScript – puedes mostrar estadísticas como el recuento de palabras, el recuento del alfabeto, la frecuencia de palabras, el recuento de párrafos, etc.
  • Reloj despertador/temporizador basado en JavaScript.
  • Matriz basada en JavaScript – que puede generar números del 1 al 6.

Los pasos para completar un proyecto basado en JavaScript son los siguientes:

  • Coge una idea de proyecto de las mencionadas anteriormente.
  • Diseña una interfaz de usuario fácil de usar en una hoja de papel.
  • Planifica una lógica del proyecto (por ejemplo, ¿cómo funcionará la fórmula de facturación del comercio electrónico? y anotarla en una hoja de papel.
  • Escribir un pseudocódigo para desarrollar un esquema básico. En este pseudocódigo, debes tomar nota de las funciones que vas a escribir y sus parámetros y el valor de salida. Esto esencialmente te acercará un paso más al código final.
  • Finalmente, comienza a codificar en JavaScript. Para cualquier cosa que te esfuerces, sólo debes buscarlo en Google cómo funciona. Por ejemplo, para la calculadora de facturación, puede que tengas que escribir sobre la lista de elementos de la factura que pueden requerir un bucle. Busca en Google un ejemplo simple de cómo funciona un bucle en JavaScript y rápidamente podrás obtener un código de trabajo ya listo.

Puedes repetir este enfoque que arriba te he sugerido para múltiples proyectos y finalmente estarás muy familiarizado con la sintaxis de JavaScript y su uso. Entonces podrás pasar a proyectos avanzados aprender JavaScript desde cero.

Otro enfoque para aprender rápidamente JavaScript es seguir un conocido tutorial basado en JavaScript. En mi blog puedes leer este artículo sobre los fundamentos de JavaScript. En la mayoría de estos tutoriales, trabajarás en un proyecto real de JavaScript y, por lo tanto, te ayudará a comprenderlo mejor.

Este segundo enfoque es más útil para aquellos que son relativamente nuevos en la programación. Seguir un tutorial paso a paso es bastante ventajoso si eres nuevo en la programación y quieres entender no sólo el lenguaje de programación sino también los conceptos básicos de la programación.

La clave para aprender JavaScript desde cero rápidamente es escribir mucho código basado en JavaScript en forma de proyectos cortos. Esto le ayudará no sólo a familiarizarse con la sintaxis del lenguaje de programación, sino también a entender dónde puede ser utilizado eficazmente y dónde no debe ser utilizado.

Cómo enviar correos electrónicos en PHP con PHPMailer

enviar correos electrónicos en PHP

PHPMailer es quizás la biblioteca de código abierto más popular para enviar correos electrónicos en PHP. Fue lanzada por primera vez en 2001, y desde entonces se ha convertido en la forma favorita de los desarrolladores de PHP para enviar correos electrónicos de forma programada.

En este artículo, hablaremos acerca de por qué deberías usar PHPMailer en lugar de la función mail() de PHP, y mostraremos algunos ejemplos de código sobre cómo usar esta biblioteca.

¿Es una alternativa a la función mail() de PHP?

En la mayoría de los casos, es una alternativa a la función mail() de PHP, pero hay muchos otros casos en los que la función mail() simplemente no es lo suficientemente flexible para lograr lo que necesitas.

En primer lugar, PHPMailer provee una interfaz orientada a objetos, mientras que mail() no está orientada a objetos. Los desarrolladores de PHP generalmente odian crear cadenas de $headers mientras envían correos electrónicos usando la función mail() porque requieren mucho escape. PHPMailer hace que esto sea muy fácil. Los desarrolladores también necesitan escribir código sucio (caracteres de escape, codificación y formato) para enviar adjuntos y correos electrónicos basados en HTML cuando usan la función mail(), mientras que PHPMailer hace que esto sea muy sencillo.

Además, la función mail() requiere un servidor de correo local para enviar los correos electrónicos, que no siempre es fácil de configurar. PHPMailer puede usar un servidor de correo no local (SMTP) si tiene autenticación.

Otras ventajas para enviar correos electrónicos en PHP con PHPMailer incluyen:

  • Puede imprimir varios tipos de mensajes de error en más de 40 idiomas cuando no puede enviar un correo electrónico.
  • Tiene integrado el soporte del protocolo SMTP y la autenticación a través de SSL y TLS.
  • Puede enviar una versión alternativa de texto plano de correo electrónico para clientes de correo electrónico no HTML.
  • Tiene una comunidad de desarrolladores muy activa que lo mantiene seguro y actualizado.

PHPMailer también es usado por populares sistemas de administración de contenido PHP como WordPress, Drupal y Joomla.

Instalando PHPMailer

Puedes instalar PHPMailer usando Composer para enviar correos electrónicos en PHP:

composer require phpmailer/phpmailer

Enviar correos electrónicos en PHP desde un servidor web local usando PHPMailer

Aquí está el ejemplo más simple de enviar correos electrónicos en PHP desde un servidor web local usando PHPMailer:

<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require_once "vendor/autoload.php";

//PHPMailer Object
$mail = new PHPMailer(true);

//La dirección de correo electrónico y el nombre
$mail->From = "de@tudominio.com";
$mail->FromName = "Nombre completo";

//A la dirección y el nombre
$mail->addAddress("destinatario1@tudominio.com", "Nombre del destinatario");
$mail->addAddress("destinatario1@tudominio.com"); //El nombre del destinatario es opcional

//Dirección a la que responderá el destinatario
$mail->addReplyTo("info@tudominio.com", "Respuesta");

//CC y BCC
$mail->addCC("cc@ejemplo.com");
$mail->addBCC("bcc@ejemplo.com");

//Envía un correo electrónico en HTML o en texto plano
$mail->isHTML(true);

$mail->Subject = "Texto del asunto";
$mail->Body = "<i>Cuerpo del correo en HTML</i>";
$mail->AltBody = "Esta es la versión de texto simple del contenido del correo electrónico";

try {
    $mail->send();
    echo "El mensaje ha sido enviado correctamente";
} catch (Exception $e) {
    echo "Mailer Error: " . $mail->ErrorInfo;
}

El código y los comentarios deben ser lo suficientemente claros para explicar todo lo que está pasando.

Enviar correos electrónicos en PHP con archivos adjuntos

Aquí tienes un ejemplo de cómo enviar un correo electrónico con archivos adjuntos usando PHPMailer:

<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require_once "vendor/autoload.php";

$mail = new PHPMailer;

$mail->From = "de@tudominio.com";
$mail->FromName = "Nombre completo";

$mail->addAddress("destinatario1@ejemplo.com", "Nombre del destinatario");

//Proporciona la ruta del archivo y el nombre de los archivos adjuntos
$mail->addAttachment("archivo.txt", "Archivo.txt");        
$mail->addAttachment("imagen/perfil.png"); //El nombre del archivo es opcional

$mail->isHTML(true);

$mail->Subject = "Texto del asunto";
$mail->Body = "<i>Cuerpo del correo en HTML</i>";
$mail->AltBody = "Esta es la versión de texto simple del contenido del correo electrónico";

try {
    $mail->send();
    echo "El mensaje ha sido enviado correctamente";
} catch (Exception $e) {
    echo "Mailer Error: " . $mail->ErrorInfo;
}

Aquí, estamos adjuntando dos archivos – archivo.txt, que reside en el mismo directorio que el script, e imágenes/perfil.png, que reside en el directorio de imágenes del directorio del script.

Para agregar archivos adjuntos al correo electrónico, sólo tenemos que llamar a la función addAttachment del objeto PHPMailer pasando la ruta del archivo como parámetro. Para adjuntar varios archivos, necesitamos llamarla varias veces.

Solución de problemas

En nuestros dos ejemplos, usamos la clase PHPMailer’s Exception para la depuración, así que cualquier error que se arroje nos ayudará a depurar cualquier problema que pueda ocurrir. También añadimos el parámetro true al constructor de PHPMailer, para obtener excepciones de mayor nivel y más descriptivas.

Dependiendo del sistema que utilicemos, probablemente el error más frecuente que veremos estará relacionado con la ejecución de la función mail() en segundo plano:

Mailer Error: Could not instantiate mail function.

Si necesitamos más detalles sobre el error, también podemos añadir algo como esto a la cláusula de captura:

print_r(error_get_last());

Normalmente, el problema con la función de correo estará relacionado con la falta de configuración del servidor de correo, en cuyo caso la función error_get_last devolverá algo como esto:


Array (
    [type] => 2
    [message] => mail(): Failed to connect to mailserver at "localhost" port 25, verify your "SMTP" and "smtp_port" setting in php.ini or use ini_set()
    [file] => OUR_PATH \vendor\phpmailer\phpmailer\src\PHPMailer.php
    [line] => 863
)

Este es el problema con el que probablemente nos encontraremos más a menudo, y podemos resolverlo fácilmente usando SMTP.

Visualización de mensajes de error localizados

$mail->ErrorInfo puede devolver mensajes de error en 43 idiomas diferentes.

Para mostrar los mensajes de error en un idioma diferente, copia el directorio del idioma del código fuente de PHPMailer al directorio del proyecto.

Para devolver los mensajes de error en español, por ejemplo, pon el objeto PHPMailer en el idioma español usando la siguiente llamada al método:

$mail->setLanguage("es");

También puedes añadir tus propios archivos de idioma al directorio de idiomas.

Uso de SMTP (Enviar correos electrónicos en PHP)

Puedes usar el servidor de correo de otro host para enviar el correo electrónico, pero para esto primero necesitas tener una autenticación. Por ejemplo, para enviar un correo electrónico desde el servidor de correo de Gmail, necesitas tener una cuenta de Gmail.

SMTP es un protocolo utilizado por los clientes de correo para enviar una solicitud de envío de correo electrónico a un servidor de correo. Una vez que el servidor de correo verifica el correo electrónico, lo envía al servidor de correo de destino.

A continuación, se muestra un ejemplo de envío de un correo electrónico desde el servidor de correo de Gmail desde tu dominio. No necesitas un servidor de correo local para ejecutar el código. Utilizaremos el protocolo SMTP:

<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;

require_once "vendor/autoload.php";

$mail = new PHPMailer(true);

//Habilitar la depuración de SMTP.
$mail->SMTPDebug = 3;                               
//Configurar PHPMailer para usar SMTP.
$mail->isSMTP();            
//Configurar el nombre de host SMTP                          
$mail->Host = "smtp.gmail.com";
//Pon esto en true si el host SMTP requiere autenticación para enviar el correo electrónico
$mail->SMTPAuth = true;                          
//Proporciona el nombre de usuario y la contraseña     
$mail->Username = "nombre@gmail.com";                 
$mail->Password = "super_contraseña_secreta";                           
//Si el SMTP requiere una encriptación TLS, entonces configúralo
$mail->SMTPSecure = "tls";                           
//Configurar el puerto TCP para conectarse a
$mail->Port = 587;                                   

$mail->From = "nombre@gmail.com";
$mail->FromName = "Nombre completo";

$mail->addAddress("nombre@ejemplo.com", "Nombre del destinatario");

$mail->isHTML(true);

$mail->Subject = "Texto del asunto";
$mail->Body = "<i>Cuerpo del correo en HTML</i>";
$mail->AltBody = "Esta es la versión de texto simple del contenido del correo electrónico";

try {
    $mail->send();
    echo "El mensaje ha sido enviado correctamente";
} catch (Exception $e) {
    echo "Mailer Error: " . $mail->ErrorInfo;
}

Gmail requiere la encriptación TLS sobre SMTP, por lo que la configuramos de acuerdo a ello. Antes de enviar a través de SMTP, debes averiguar el nombre de host, el número de puerto, el tipo de cifrado, si es necesario, y si se requiere autenticación, también necesitas el nombre de usuario y la contraseña. Ten en cuenta que tener la autenticación de dos factores habilitada en Gmail no te permitirá utilizar su SMTP con el nombre de usuario y la contraseña. En su lugar, se requerirá una configuración adicional.

Una gran ventaja de utilizar el SMTP remoto sobre el correo local es que si utilizas la función mail() de PHP para enviar correo electrónico con el dominio de la dirección “De” configurado a cualquier otra cosa que no sea el nombre de dominio local (nombre del servidor), entonces los filtros de ataque del servidor de correo del destinatario lo marcarán como spam. Por ejemplo, si se envía un correo electrónico desde un servidor con el nombre de host real ejemplo.com con la dirección del remitente nombre@gmail.com a name@yahoo.com, entonces los servidores de Yahoo lo marcarán como spam o mostrarán un mensaje al usuario para que no confíe en el correo electrónico porque el origen del correo es ejemplo.com y, sin embargo, se presenta como si proviniera de gmail.com. Aunque seas el dueño de nombre@gmail.com, no hay forma de que Yahoo lo descubra.

Recuperación de correos electrónicos usando POP3

PHPMailer también permite la verificación de POP antes de SMTP para enviar correos electrónicos. En otras palabras, puedes autenticarte usando POP y enviar correos electrónicos usando SMTP. Lamentablemente, PHPMailer no soporta la recuperación de correos electrónicos de servidores de correo usando el protocolo POP3. Está limitado a sólo enviar correos electrónicos.

Conclusión

Si eres un desarrollador de PHP, hay pocas posibilidades de evitar tener que enviar correos electrónicos en PHP programáticamente. Aunque puedes optar por servicios de terceros como Mandrill o SendGrid, a veces eso no es una opción, y menos aún por tu propia biblioteca de envío de correo electrónico. Ahí es donde PHPMailer y sus alternativas (Zend Mail, Swift Mailer, etc.) entran en juego.

Puedes conocer las APIs de esta biblioteca en el wiki del repositorio, o en la documentación oficial.

Si te ha gustado este artículo, te invito a leer cómo crear un formulario de contacto en HTML.

Cómo conectar PrestaShop con Ebay marketplace

conectar PrestaShop con Ebay

¿Cómo puedes conectar PrestaShop con eBay? ¿Cuál es el beneficio de los marketplaces para los vendedores online? Sigue leyendo para averiguarlo.

¿Cómo puede crecer y evolucionar tu tienda online? Esta es la pregunta que todo emprendedor se ha hecho en algún momento. De hecho, puede parecer que una empresa de comercio electrónico sólo puede expandirse cuantitativamente ofreciendo productos a la venta, pero no puede hacerlo cualitativamente. Sin embargo, hay una manera de que un negocio online pueda dar un paso adelante.

Unirse a un marketplace permite a una tienda online entrar en un nuevo nivel global de comercio electrónico. En 2019, más de la mitad de las ventas mundiales en la web se realizaron a través de los principales marketplaces de Internet, y se espera que las cifras sólo aumenten. Estas estadísticas demuestran lo prometedores que son los marketplaces de comercio electrónico y cuántos clientes confían en ellos. Así que, ¿por qué no empezar a vender con uno de ellos?

Sigue leyendo y aprende por qué necesitas un marketplace como Ebay para vender tus productos, cuáles son los beneficios de un marketplace como Ebay y qué dificultades te esperan si te unes a el. También descubrirás cuáles son los modulos para Prestashop más populares y mejor valorados y cómo realizar la integración con Ebay.

¿Qué es un marketplace?

Los marketplaces, o mercados virtuales, son grandes tiendas online que venden productos o servicios producidos por terceras empresas. El marketplace sirve como plataforma intermediaria que conecta al vendedor con el cliente. Los marketplaces tienen políticas y reglas de uso unificadas y cobran a las empresas un determinado porcentaje de ventas por el uso de la plataforma. En general, los marketplaces no intervienen en la forma en que las empresas venden sus productos. Y no se responsabilizan de las imágenes y descripciones de los productos, la selección de los mismos, el costo de un artículo y la forma en que se entrega. Además, no hay reglas estrictas sobre la forma en que debe organizarse un marketplace, y cada uno adapta sus propias prácticas y tiene sus propias peculiaridades. Esa variedad permite a las empresas encontrar el marketplace que se ajuste a sus especificidades y necesidades.

El Marketplace no es un concepto totalmente nuevo para el comercio electrónico; por el contrario, este modelo de ventas ha existido desde los primeros días de la venta al por menor online. Por ejemplo, las todavía exitosas Amazon y Ebay fueron creadas en 1995, Alibaba – en el año 1999, Taobao – en 2003.

¿Qué tipos de marketplaces hay?

Según el tipo de organización, los marketplaces pueden clasificarse en las siguientes 4 categorías:

  • Verticales – ofrecen artículos que difieren entre sí, pero que tienen características similares
  • horizontales – vende el mismo tipo de artículos que vienen de una serie de vendedores
  • Global – no tiene limitaciones en cuanto a los artículos a manejar
  • Híbrido – ofrece a la venta artículos de producción propia y de terceras empresas.

¿Por qué conectar prestashop con Ebay marketplace?

Entendemos que la decisión de entrar en un marketplace online es seria, y es natural dudar y tener preguntas. Con el fin de disipar tus dudas, hemos recopilado una lista de los 5 principales beneficios de Ebay marketplace que harán que este modelo de negocio te funcione.

Las 5 mejores razones por las que conectar prestashop con Ebay marketplace te funcionará

1 Acceso a los mercados mundiales

Una tienda online, incluso uno de nivel medio, necesita poner mucho dinero y esfuerzo para intentar entrar en los mercados mundiales, y para algunos, estas inversiones no tienen sentido. Parketplaces como Ebay son entidades comerciales mucho más grandes que a menudo se dedican al comercio internacional, lo que abre el camino a una gran variedad de nuevos clientes.

2 Confianza del cliente

Los clientes tienden a tener más confianza en los marketplaces debido a su tamaño, reputación y políticas unificadas. Tal nivel de credibilidad es una maravillosa oportunidad para que se pueda mostrar una marca no muy conocida.

3 Vender es fácil

Un marketplace es una plataforma preparada para el comercio, con su propio diseño, lógica de interfaz, reglas y políticas, lo que significa que, como dueño de un negocio, no necesitas preocuparte por estos asuntos. En cambio, puedes saltarte el largo proceso de desarrollo y centrarte inmediatamente en tu mercancía y en cómo venderla.

4 Menos riesgo financiero

Dado que no se invierte en el desarrollo de tiendas online, unirse a Ebay marketplace es una opción mucho más segura desde el punto de vista financiero. Además, si no está satisfecho con el rendimiento de este marketplace, simplemente puedes trasladar tu negocio a otra plataforma.

5 Móvil amigable

Una parte considerable de los clientes ahora compran online desde sus teléfonos móviles, y se espera que este número aumente en el futuro. Ebay marketplace tiene las aplicaciones móviles ya desarrolladas, lo que constituye una ventaja indiscutible.

¿Cuáles son las desventajas de conectar prestashop con Ebay marketplace?

Aceptémoslo – todo tiene sus propios inconvenientes, y también lo tiene el entrar en un marketplace online. Sería extremadamente arriesgado no considerar las desventajas de unirse a un marketplace antes de tomar esta decisión. He seleccionado los desafíos más difíciles que puedes tener al entrar en Ebay marketplace.

Las 5 principales razones por las que conectar prestashop con Ebay marketplace puede no funcionar para ti

1 Reglas y políticas

Cada Marketplace tiene naturalmente su propio conjunto de reglas que el vendedor está obligado a seguir para poder vender en él. Aunque no suelen ser excesivamente estrictas y sirven para proteger los intereses de los vendedores, para algunas personas es frustrante trabajar con restricciones.

2 Cargos

Los marketplaces obtienen un beneficio imponiendo una cantidad fija de dinero o una parte del volumen de ventas de las empresas. Para ciertos negocios nuevos, el costo de la afiliación al marketplace puede resultar una dura carga.

3 Competencia ajustada

Las posibilidades de que seas el único vendedor que venda un determinado tipo de producto son casi nulas, lo que significa que tu empresa tendrá que competir dentro de la plataforma con un número de vendedores minoristas que, a la postre, tendrán una mejor reputación en este mercado.

4 No hay control sobre el SEO y la publicidad

Al formar parte de Ebay marketplace, rara vez se decide cómo se anunciarán los productos y qué tan bien se optimizarán las páginas de los productos para los motores de búsqueda. Esto puede dificultar enormemente tu promoción y tu posicionamiento en los buscadores.

5 Representación poco satisfactoria de los productos

Los marketplaces imponen reglas unificadas en la presentación de los productos, lo que no deja lugar a la creatividad y los esfuerzos adicionales para hacer más impresionantes las descripciones de los productos. Aparte de esto, los administradores de los marketplaces están en posición de alterar las páginas de sus productos si no se ajustan a las reglas.

Ya lo he decidido ¿como conectar prestashop con Ebay?

Imaginemos que has sopesado los pros y los contras de entrar en Ebay marketplace y has tomado una decisión favorable. ¿Qué plugin utilizar para conectar PrestaShop con Ebay? Aunque esta plataforma no tiene integraciones nativas con ningún marketplace, es posible conectarlos con desarrollo personalizado o a través de plugins especializados que abundan en los recursos oficiales y de terceros de PrestaShop.

Hay muchos modulos de PrestaShop que integran la tienda online con eBay, lo que hace que entrar en el, sea más fácil para el propietario de la tienda PrestaShop. Ahora vamos a ver los mejores modulos para conectar prestashop con Ebay.

Los 4 mejores modulos para conectar PrestaShop con Ebay

PrestaShop no tiene la integración nativa incorporada con eBay, pero no dejes que esto te impida vender tus productos en este marketplace. He comparado cuidadosamente todos los modulos, disponibles en el marketplace oficial, y he elaborado una lista de los cuatros mejores modulos para conectar prestashop con Ebay. Elige una de ellos e integra correctamente tu PrestaShop con eBay.

PrestaBay – eBay Marketplace Integration.

Integra completamente tu tienda online con PrestaShop en eBay con este addon de primera clase. Accede a funciones como la creación de listas de artículos, acciones flash, importación de pedidos y sincronización de existencias. PrestaBay no te limita en el número de cuentas y tiendas que puedas tener. Es más, los desarrolladores de la extensión están constantemente buscando su mejora y están añadiendo nuevas características para optimizar el funcionamiento del addon.
Compatibilidad: V1.5.0.0 – V1.7.6.7 / Precio: 199,99 euros / Descargar PrestaBay

FastBay – eBay Marketplace synchronization.

Este addon permite sincronizar tu cuenta de eBay con el ecommerce de PrestaShop en poco tiempo y empezar a mejorar tus tasas de conversión vendiendo tus existencias en este gran mercado global. FastBay ha sido recientemente actualizado y se ha ampliado su funcionalidad; los desarrolladores añadieron características como la gestión de multitiendas y multimercados, especificación avanzada y mapeo de árbol de categorías y sincronización con el procedimiento Synch.
Compatibilidad: v1.6.0.4 – V1.7.6.7 / Precio: 249,99 euros / Descargar FastBay

Ebay 2.0 Marketplace.

Este complemento de PrestaShop para la integración de Ebay destaca por su estabilidad y fiabilidad. Permite sincronizar los productos, los pedidos y la información de categorías completas, admite códigos de productos y diferentes proveedores de envíos internacionales, presenta informes de errores al propietario de la tienda y calcula las tarifas de entrega en la cuadrícula de PrestaShop. También hay una característica única que no encontrará en otras integraciones de PrestaShop Ebay: crear anuncios para los países donde Ebay está disponible.
Compatibilidad: v1.6.0.10 – V1.7.6.7 / Precio: 249,99 euros / Descargar Ebay 2.0

Importar eBay – creates products from eBay listings.

Consigue un control completo sobre tu integración de PrestaShop-Ebay con el módulo Import eBay. La extensión no requiere ningún conocimiento especial para su configuración y funcionamiento, y te ofrece funcionalidades tales como la configuración de fichas, códigos de mapeo de IVA, regeneración de imágenes y miniaturas y la opción de exclusión de campos.
Compatibilidad: v1.6.0.4 – v1.7.6.0 / Precio: 149,99 euros / Descargar Import eBay

Conectar prestashop con Ebay, conclusiones finales…

Esperamos que este artículo haya sido de gran utilidad para los propietarios de tiendas con PrestaShop que estaban pensando en entrar en el marketplace de eBay o que simplemente se preguntaban cómo pueden expandir su negocio aún más. También espero que la lista completa de las mejores ventajas y desventajas de los marketplaces te ayude a decidir si te unes o no. Además, espero que hayas aprendido mucho acerca de las principales extensiones de PrestaShop destinadas a integrar tu PrestaShop con eBay. Con todo, mi consejo es: ¡Vende en marketplaces!

Si necesitas ayuda con el desarrollo de PrestaShop, ¡contacta conmigo! Soy experto en desarrollo de tiendas online y confiable, con una más de una década de experiencia en PrestaShop.

4 formas de proteger tu login de WordPress

4 Formas De Proteger Tu Login De WordPress

Cómo proteger tu login de WordPress

Los hackers no necesitan ser especialmente listos o sofisticados para conseguir lo que quieren. A menudo, simplemente entran por la entrada principal. Usar las herramientas adecuadas puede ayudar, pero hay más que puedes hacer para proteger tu login de WordPress.

login de WordPress

Se ha informado que Google pone en la lista negra unos 70.000 sitios web por semana por problemas de seguridad como malware y phishing. Tu primera línea de defensa contra la infiltración es proteger tu login de WordPress. Esta forma de control de acceso parece muy sencilla, pero te sorprendería saber que a menudo las medidas de seguridad más simples se pasan por alto o se dejan de lado.

Independientemente de las características de seguridad que ofrezca tu servicio de alojamiento en el back end, como administrador de un sitio web, la responsabilidad es tuya.

¿Qué hace que los accesos a WordPress sean vulnerables?

La gran popularidad de wordPress es lo que lo hace un blanco fácil y atractivo. Pero, ¿qué es lo que hace que la plataforma sea vulnerable a los ataques y a las vulnerabilidades?

Por un lado, los hackers hacen mucho reconocimiento antes de romper un sistema. Saben que ciertas versiones de WP tienen más vulnerabilidades que otras, y la plataforma ha existido el tiempo suficiente para que los profesionales sepan cuáles son. El número de versión se encuentra en sus páginas web y en su URL a menos que lo eliminen.

Ver tu directorio también proporciona mucha información útil, como el tipo de plugins y temas que tienes instalados. Debido a que funciona en código abierto, dejar en tu directorio los plugins sin usar o sin soporte, incluso si están deshabilitados, es una forma sencilla para que los hackers accedan a tu código. Una vez dentro, pueden lanzar ataques, cambiar la codificación, secuestrar sesiones o bloquearte para que no entres en tu propio sitio web.

Los hackers pueden comprobar la indexación de tu directorio navegando por las ubicaciones de las carpetas y comprobando si hay una respuesta.

Las carpetas que buscan los hackers

/wp-content/

/wp-content/plugins/

/wp-content/themes/

/uploads/

/images/

Pueden buscar plugins vulnerables en tu directorio a través de una búsqueda activa utilizando herramientas de scripting o una búsqueda pasiva con peticiones normales de HTML. Esto se logra revisando el código fuente HTML y buscando los plugins instalados a través de hojas de estilo CSS, comentarios y enlaces JS.

Otra forma en que los hackers acceden a los sitios web de WordPress es a través de la enumeración de usuarios. Este es un simple preludio de un ataque de fuerza bruta que implica descubrir los nombres de usuario y adivinar sus contraseñas a través de un ataque de diccionario o tratar de entrar a través de mecanismos predeterminados. Por ejemplo, los usuarios pueden ser descubiertos por medio de la repetición de sus identificaciones y la adición a la URL de esta manera:

ejemplodewordpress.com/?author=1

ejemplodewordpress.com/?author=2

ejemplodewordpress.com/?author=3

Si funciona, el ID de acceso será revelado a través de una redirección 303.

Una herramienta llamada WPScan que se usa para pruebas de vulnerabilidad puede cribar cientos de posibles contraseñas en menos de un minuto. Fue capaz de devolver la siguiente salida de un tema económico en cuestión de segundos:

ruby wpscan.rb -u 192.241.xx.x68 --threads 20 --wordlist 500worst.txt --username testadmin

********* SNIP ******************

[+] Starting the password brute forcer

Brute forcing user 'testadmin' with 500 passwords... 100% complete.
[+] Finished at Thu Jul 18 03:39:02 2013
[+] Elapsed time: 00:01:16

4 maneras de proteger tu login de WordPress

Afortunadamente, el desarrollador de WP y la comunidad de usuarios son sumamente atentos a la hora de proporcionar apoyo. Debido a esto, hay herramientas que están disponibles gratuitamente y las mejores prácticas que puedes aprender e implementar para mantener tu sitio web seguro.

Aquí hay cuatro técnicas que puedes implementar para asegurar la página de acceso de WordPress.

1. Eliminar el número de versión de WP

Como los hackers suelen buscar primero el número de versión cuando comprueban las vulnerabilidades, esto es lo primero que debe cambiar al configurar su sitio web. Esto debería hacerse de tal manera que se elimine de las páginas, URLs y meta tags sin quitar el gancho de la cabecera u otros malos métodos que se están promocionando en Internet.

La mejor manera de eliminar el número de versión de WP es añadir este trozo de código al archivo functions.php:

Para eliminar del header:

remove_action('wp_head', 'wp_generator');

Para eliminar del feed RSS:

function remove_version_info() {
return '';
}
add_filter('the_generator', 'remove_version_info');

Para eliminar el número de versión de los scripts y estilos:

function remove_version_from_style_js( $src ) {
if ( strpos( $src, 'ver=' . get_bloginfo( 'version' ) ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_version_from_style_js',9999);
add_filter( 'script_loader_src', 'remove_version_from_style_js',9999);

No importa cuando instales WP, siempre debes mantener tu WordPress actualizado a la última versión tan pronto como sea lanzado. Lo mismo ocurre con los plugins y los temas.

2. Cambiar la URL de inicio de sesión (proteger tu login de WordPress)

La dirección de inicio de sesión por defecto para los administradores de WP es tupaginaweb.com/wp-admin y eso es algo que casi todos los que están familiarizados con la plataforma saben. Todo lo que se necesita es añadir /wp-login.php después del nombre de dominio y estarán dentro. Una simple alteración de la URL es todo lo que se necesita para evitar que los hackers adivinen tu página de inicio de sesión.

Puedes usar un plugin como iThemes Security para lograr esto de manera efectiva.

3. Reducir el número de intentos de inicio de sesión

Otra característica defectuosa de WP por defecto es la de permitir intentos ilimitados de acceso. Esto permite ataques de diccionario y otras técnicas de adivinación de contraseñas. El plugin de seguridad de iThemes tiene una función que bloquea tu sitio web después de un número determinado de intentos fallidos de inicio de sesión y te envía una alerta.

Si sólo quieres la función de cierre de sesión, puedes instalar un plugin llamado Limit Login Attempts Reloaded y entrar en su configuración para configurar el número de inicios de sesión permitidos.

4. Limitar el acceso y utilizar la autenticación de dos factores

A estas alturas, deberías saber que debes elegir una contraseña segura usando un plugin de autenticación de dos factores. El siguiente paso para limitar el acceso es limitar el número de personas que tienen acceso al funcionamiento interno de tu sitio web. Tercero, usa la autenticación de dos factores que utiliza una combinación de contraseña y clave encriptada para acceder.

Conclusiones finales sobre cómo proteger tu login de WordPress

Aunque estas precauciones de seguridad y medidas preventivas explicadas en este post no protegerán tu sitio web al 100%, te proporcionarán una enorme medida de seguridad.

Es importante recordar que los hackers y demás personas malintencionadas buscan las puertas traseras más fáciles de acceder a tu sitio web. La mayoría de las veces se utilizan soluciones automatizadas para encontrar estas puertas traseras.

Asegurando tu login de WP se mantienen esas puertas cerradas y se asegura que la única persona que tiene acceso a tu sitio es tú mismo.

Curso cómo crear páginas profesionales con WordPress y Elementor

Curso Cómo Crear Páginas Profesionales Con Wordpress Y Elementor

 

Hoy quiero traeros un video muy especial. Dada la situación en la que estamos y siempre con la filosofía de compartir conocimientos que tengo, quiero presentaros mi curso sobre cómo crear páginas profesionales con WordPress y Elementor.

Cómo crear páginas profesionales

Me dedico a esto desde hace muchos años, realizo paginas web de todo tipo, casi siempre programando desde cero. El día que descubrí WordPress mi vida cambió.

Registro de dominio y hosting

Como veréis en el vídeo, con este curso, lo único que tendremos que comprar será un dominio y un hosting, para eso te recomiendo el hosting de Banahosting, en el cual no sólo podréis crear una página web, sino muchas más.

Instalación de WordPress

Podéis instalar WordPress de forma manual, existen cientos de vídeos que te explican cómo hacerlo. Pero si no eres muy técnico, en el vídeo del curso te explico una forma con la cual instalar tu WordPress en apenas unos clics.

Instalacion de Elementor y la plantilla Astra

Una vez estéis en el panel de WordPress, tendréis que instalar el plugin gratuito de Elementor y la plantilla Astra. Con estos dos elementosya podremos empezar a crear una página web profesional.

Conclusiones sobre cómo crear páginas profesionales con WordPress y Elementor

Espero con este vídeo poner mi granito de arena para ayudar a todo el mundo que quiera crearse una página web profesional con WordPress y Elementor.

El curso está creado para una persona sin conocimientos técnicos, así que espero que todo el que esté interesado en hacerse una página web, pueda hacerlo.

Si te ha gustado el curso, te recuerdo que todas las semanas publicaré un nuevo curso sobre diseño web, desarrollo web y eCommerce. Si estás interesado en que publique un curso en concreto, déjame un comentario e intentaré crearlo en la mayor brevedad posible.

Háblame ;)
¿Necesitas ayuda?
Hola! Necesitas ayuda? hablemos por WhatsApp :)