JaviNiguez

Los 7 mejores plugins de copias de seguridad de WordPress

los mejores plugins de copias de seguridad de wordpress

Crear copias de seguridad de WordPress periódicas es lo mejor que puedes hacer por la seguridad de tu sitio web. Las copias de seguridad te dan tranquilidad y pueden salvarte en situaciones catastróficas como cuando tu página web ha sido hackeada o te genera wordpress un error.

Hay varios plugins de copia de seguridad de WordPress gratuitos y de pago, y la mayoría de ellos son bastante fáciles de usar. En este artículo, compartirés los 7 mejores plugins de copias de seguridad para WordPress.

Importante: Aunque muchos proveedores de alojamiento de WordPress ofrecen servicios de copia de seguridad limitados, siempre recomendamos a nuestros usuarios que no confíen únicamente en ellos. Al final y al cabo, es tu responsabilidad mantener copias de seguridad regulares de tu sitio web.

Si todavía no estás haciendo una copia de seguridad de tu sitio web de WordPress, entonces deberías elegir uno de estos 7 mejores plugins de copia de seguridad de WordPress y empezar a usarlo de inmediato.

1. UpdraftPlus (Copias de seguridad de WorsPress)

copias de seguridad wordpress jetpack scan

UpdraftPlus es el plugin de copia de seguridad de WordPress más popular disponible en Internet. Es utilizado por más de 2 millones de sitios web.

UpdraftPlus te permite crear una copia de seguridad completa de tu sitio web de WordPress y almacenarla en la nube o descargarla en tu ordenador.

El plugin soporta copias de seguridad programadas así como copias de seguridad bajo demanda. También tiene la opción de elegir qué archivos deseas respaldar.

Puedes subir automáticamente tus copias de seguridad a Dropbox, Google Drive, S3, Rackspace, FTP, SFTP, correo electrónico y otros servicios de almacenamiento en la nube.

Además de hacer una copia de seguridad de cada sitio web de WordPress, UpdraftPlus también te permite restaurar fácilmente las copias de seguridad directamente desde tu panel de administración de WordPress.

UpdraftPlus también tiene una versión premium con complementos para migrar o clonar sitios web, búsqueda y reemplazo de bases de datos, soporte de multisitios y otras varias características. La versión premium también te da acceso a soporte prioritario.

Precios: Gratis (UpdraftPremium Personal por $70)

Revisión: UpdratPlus es el plugin de copia de seguridad de WordPress más querido en el mercado. Tiene más de 2 millones de instalaciones activas y un promedio de calificación de 4.9 de 5 estrellas. Mientras que la versión gratuita tiene un montón de características, se recomienda actualizar a UpdraftPlus premium para desbloquear todas las características de copia de seguridad de gran alcance.

2. VaultPress (Jetpack Backup)

Jetpack Backups es un popular plugin de copias de seguridad para WordPress de Automattic, la empresa creada por el cofundador de WordPress Matt Mullenweg.

Este plugin fue lanzado originalmente bajo el nombre de VaultPress que es el que uso en Javiniguez, pero ahora ha sido rediseñado y renombrado como Jetpack Backups. He empezado a cambiar varios de nuestros sitios web a la nueva plataforma de copias de seguridad Jetpack porque está más actualizada.

El plugin de copias de seguridad de Jetpack ofrece una solución de copias de seguridad de WordPress automatizadas diariamente y en tiempo real en la nube sin ralentizar su sitio. Puedes configurar fácilmente las copias de seguridad de Jetpack y restaurarlas con unos pocos clics.

Los planes superiores de Jetpack también ofrecen escaneos de seguridad y varias otras características poderosas.

Hay algunas desventajas de usar las copias de seguridad de Jetpack para los principiantes.

En primer lugar, es un gasto recurrente que puede sumar si tienes varios sitios de WordPress porque pagas a nivel de sitio.

En segundo lugar, el flujo de compra es bastante complicado, y te obligan a instalar el plugin de Jetpack para comprar una suscripción. La buena noticia es que puedes desactivar manualmente todas las funciones innecesarias de Jetpack, excepto las copias de seguridad, para que no ralenticen tu sitio.

Por último, las copias de seguridad sólo se almacenan durante 30 días en los planes inferiores. Si deseas un archivo de copia de seguridad ilimitado, entonces tendrás que pagar los $ 49.95 por mes por sitio web que es significativamente más caro para los principiantes en comparación con otras soluciones enumeradas aquí.

Sin embargo, incluso con el precio más alto, las copias de seguridad de WordPress de Jetpack vale la pena debido a la reputación estelar de Automattic.

Precios: Desde $9.95 por mes para el plan de respaldos diarios o $49.95 por mes para el plan de respaldos en tiempo real.

Revisión: Jetpack Backup es un servicio de copias de seguridad de WordPress premium con un precio premium. Si ya estás usando JetPack para otras características como JetPack CDN para fotos, promoción de medios sociales, búsqueda elástica, etc, entonces es un buen precio para comprar tu paquete de plan completo para el mejor valor. Si sólo buscas copias de seguridad en la nube en tiempo real para WordPress, entonces también puedes mirar a BlogVault en mi lista porque ofrecen precios más asequibles para los principiantes.

3. BackupBuddy

BackupBuddy es uno de los plugins de copias de seguridad de WordPress más populares utilizados por más de medio millón de sitios de WordPress. Te permite programar fácilmente copias de seguridad diarias, semanales y mensuales.

Con BackupBuddy, puedes almacenar automáticamente tus copias de seguridad en servicios de almacenamiento en la nube como Dropbox, Amazon S3, Rackspace Cloud, FTP, Stash (su servicio en la nube), e incluso enviártelas por correo electrónico.

Si utilizas su servicio Stash, también tienes la posibilidad de hacer copias de seguridad en tiempo real.

La mayor ventaja de usar BackupBuddy es que no es un servicio basado en suscripción, por lo que no hay cuota mensual. Puedes utilizar el plugin en el número de sitios web mencionados en tu plan.

También obtienes acceso a foros de soporte premium, actualizaciones regulares y 1GB de almacenamiento de BackupBuddy Stash para guardar tus copias de seguridad. Además, su función iThemes Sync te permite gestionar hasta 10 sitios de WordPress desde un único panel de control.

Incluso puedes usar BackupBuddy para duplicar, migrar y restaurar sitios web.

Precio: $80 para el plan Blogger (1 licencia de sitio)

Revisión: BackupBuddy es una solución de copias de seguridad de WordPress premium rentable para ti. Tiene un conjunto completo de características que necesitará para respaldar, restaurar y mover un sitio de WordPress. En pocas palabras, es una poderosa alternativa a UpdraftPlus y VaultPress que puede utilizar.

4. BlogVault (Copias de seguridad de WordPress)

BlogVault es otro popular servicio de copias de seguridad de WordPress. Es una solución de software como servicio (SaaS) en lugar de un simple plugin de WordPress. Crea copias de seguridad fuera del sitio de forma independiente en los servidores de BlogVault, por lo que habrá una carga cero en su servidor.

BlogVault crea copias de seguridad automáticas de su sitio web diariamente y también te permite crear manualmente copias de seguridad ilimitadas bajo demanda. Cuenta con copias de seguridad incrementales inteligentes que sincronizan sólo los cambios incrementales para una carga mínima del servidor. Esto asegura un rendimiento óptimo para tu sitio web.

Además de las copias de seguridad, te ayuda a recuperar tu sitio web fácilmente. Puedes almacenar un archivo de copia de seguridad de 90 días en los planes inferiores, y de 365 días en los planes superiores, para que puedas recuperar tu sitio de cualquier percance.

También tiene una función integrada de sitio de ensayo que te permite probar tu sitio web fácilmente. Además, proporcionan una opción fácil para migrar tu sitio web a otro host.

Las características de BlogVault son muy prometedoras para las pequeñas empresas, y su plan de copia de seguridad en tiempo real es bastante asequible en comparación con las copias de seguridad de Jetpack (la mitad del precio). Sin embargo, si lo comparas con plugins de autoalojamiento como Updraft o BackupBuddy, el coste por sitio es más caro.

Precios: $89 por año para el plan personal de 1 licencia de sitio para copias de seguridad diarias. $249 por año para respaldos en tiempo real.

Revisión: BlogVault es una solución para crear copias de seguridad de WordPress fácil de usar. Crea copias de seguridad fuera del sitio, por lo que el servidor de tu sitio web no estará sobrecargado con tus copias de seguridad. El precio parece muy asequible para las pequeñas empresas que quieren copias de seguridad en tiempo real, pero no quieren pagar el precio premium de las copias de seguridad de Jetpack.

5. BoldGrid Backup

BoldGrid Backup es una solución de copia de seguridad automatizada de WordPress por BoldGrid, que es un constructor de sitios web impulsado por WordPress.

Te permite crear fácilmente copias de seguridad de tu sitio web, restaurar tu sitio después de que se caiga, e incluso puedes usarlo para mover tu sitio cuando cambies de host. Puedes configurar copias de seguridad automáticas o crearlas manualmente con un solo clic.

BoldGrid Backup viene con una función de protección contra fallos automatizada que crea automáticamente una copia de seguridad de tu sitio antes de actualizarlo. Si una actualización falla, automáticamente retrocede tu sitio de WordPress a la última copia de seguridad. Es una gran característica que te protege contra los errores de actualización.

Con BoldGrid Backup, puedes almacenar hasta 10 archivos de copia de seguridad en su tablero y más en una ubicación de almacenamiento remoto como Amazon S3, FTP o SFTP.

Precio: $60 por año (Incluye todas las herramientas y servicios Premium de BoldGrid)

Revisión: BoldGrid Backup es un sencillo plugin de copia de seguridad para WordPress que puedes utilizar para crear copias de seguridad de tu sitio web. La ventaja de usar este plugin es el paquete de otras potentes herramientas que obtendrá con la compra de este plugin.

6. BackWPup

BackWPup  es un plugin gratuito que te permite crear copias de seguridad completas de WordPress de forma gratuita y almacenarlas en la nube (Dropbox, Amazon S3, Rackspace, etc), FTP, correo electrónico o en tu ordenador.

Es extremadamente fácil de usar y te permite programar copias de seguridad automáticas según la frecuencia de actualización de tu web.

Restaurar un sitio de WordPress a partir de una copia de seguridad también es muy sencillo. La versión BackWPup Pro viene con soporte prioritario, capacidad de almacenar copias de seguridad en Google Drive, y algunas otras características interesantes.

Precios: Gratuito (también está disponible el plan Premium)

Revisión: Utilizado por más de 600.000 sitios web, BackWPup es una gran alternativa a otros plugins de copia de seguridad en la lista. La versión premium del plugin añade características más potentes, incluyendo la restauración fácil y rápida del sitio web desde el backend con una aplicación independiente.

7. Duplicator

Como su nombre indica, Duplicator es un popular plugin de WordPress utilizado para migrar sitios de WordPress. Sin embargo, también tiene funciones de copia de seguridad.

No permite crear copias de seguridad automatizadas y programadas, lo que lo convierte en una solución de copia de seguridad primaria de WordPress menos que ideal para un sitio mantenido regularmente.

Precio: Gratis

Revisión: Duplicator te permite crear copias de seguridad de WordPress manuales de tu sitio de WordPress fácilmente. Si tu proveedor de alojamiento web crea copias de seguridad regulares, puedes usar este plugin para crear copias de seguridad para usar en el entorno de ensayo. Es un gran plugin de migración de sitios.

Observaciones finales sobre copias de seguridad de WordPress

Cada plugin sobre copias de seguridad de WordPress en esta lista tiene sus pros y sus contras, pero todos ellos ofrecen una copia de seguridad completa de los archivos de WordPress, así como funciones de copia de seguridad de la base de datos.

Yo uso Jetpack Backups por dos razones principales. Es extremadamente fácil de usar y ofrece copias de seguridad incrementales en tiempo real.

Lo que esto significa es que en lugar de hacer una copia de seguridad de todos sus archivos cada día o cada hora, sólo crea una copia de seguridad de lo que se ha actualizado, literalmente, a los pocos minutos de la actualización. Esto es ideal para un sitio web grande como el mío, ya que permite utilizar los recursos de mi servidor de manera eficiente.

Sin embargo, si tienes un sitio web pequeño o mediano y odias pagar cuotas mensuales, entonces te recomiendo el popular plugin UpdraftPlus. Viene con todas las características de gran alcance como el cifrado de copia de seguridad, el transporte de copia de seguridad cifrada, y toneladas de opciones de almacenamiento en la nube.

Cualquiera que sea el plugin de copia de seguridad de WordPress que elijas, por favor NO almacenes tus copias de seguridad en el mismo servidor que tu sitio web.

Al hacer eso, estás poniendo todos tus huevos en una sola canasta. Si el hardware de tu servidor falla o, lo que es peor, es hackeado, entonces no tendrás una copia de seguridad, lo que anula el propósito de establecer copias de seguridad regulares.

Por eso se recomienda encarecidamente almacenar tus copias de seguridad en un servicio de almacenamiento de terceros como Dropbox, Amazon S3, Google Drive, etc.

Eso es todo. Espero que esta lista te haya ayudado a elegir el mejor plugin de copia de seguridad de WordPress para tu página web.

Si te ha gustado este artículo, te recomiendo leer Los 5 mejores plugins de caché para tu WordPress.

¿Qué es Front-End? Qué habilidades necesitas para ser desarrollador

¿Qué es Front-End? Qué habilidades necesitas para ser desarrollador

Un desarrollador de front-end es alguien que trabaja con software, como páginas web de escritorio o móviles, con los que los usuarios interactúan. Específicamente, un desarrollador de front end pasa tiempo del lado de la tecnología que el usuario toca y ve.

El front-end también se conoce comúnmente como el lado del cliente, o más ampliamente hablando, la interfaz de usuario. Si bien muchas personas utilizan el front end para describir el desarrollo de sitios web, éste puede referirse a cualquier software con el que el usuario interactúa.

A los efectos del presente artículo, utilicemos una definición más amplia: el desarrollo del front-end puede incluir el trabajo de ingeniería realizado en aplicaciones móviles de software de escritorio.

Cuando aprendí por primera vez sobre el desarrollo de front-end, escuché una simple metáfora de un profesor que no he olvidado. El desarrollo del front-end es similar a construir los botones de un cajero automático. No hace falta decir que el lado del cliente de un cajero automático es de misión crítica para retirar dinero. Pero es sólo una parte del proceso.

La parte trasera del cajero necesita almacenar el dinero y contabilizar adecuadamente los retiros. La parte delantera es lo que el usuario toca e interactúa cuando completa la transacción. Llevando este ejemplo de vuelta al mundo del software, los ingenieros del front-end trabajan en estrecha colaboración con los ingenieros del back-end, diseñadores y responsables de producto para diseñar y construir productos de forma global.

¿Cómo trabaja un desarrollador de front-end en un proyecto?

Veamos la interacción de un desarrollador de front-end con cada una de las partes interesadas con las que se relacionarán al desarrollar un sitio web o una aplicación.

Partes interesadas del proyecto

En primer lugar, un desarrollador de front-end debe trabajar con ingenieros de back-end que manejen los servidores, las instancias, las bases de datos y el almacenamiento en los que se ejecutan las aplicaciones y sitios modernos. Gran parte del trabajo entre los desarrolladores del front-end y del back-end es lo que impulsa la computación en nube, que es la entrega a pedido de recursos de TI a través de Internet.

En segundo lugar, los desarrolladores de front-end interactúan frecuentemente con los diseñadores. Los diseñadores son responsables de la apariencia de los productos. Un diseñador es dueño de la combinación de colores, el diseño y los requisitos de usabilidad.

Los diseñadores ayudan a llevar el estilo, los marcos estéticos y los esquemas a la vanguardia, de modo que el desarrollador del front-end pueda reunir todos estos atributos para los usuarios finales.

En tercer lugar, un desarrollador de front-end tendrá una relación con el responsable de producto, el más implicado en pensar estratégicamente sobre cómo construir y llevar un producto al mercado.

Los responsables de producto son responsables de la experiencia del producto, de las ganancias y pérdidas de un producto y de las directrices de lanzamiento y comercialización.

Si deseas explorar el campo del desarrollo del front-end, debes estar preparado para trabajar de manera dinámica y en colaboración con otros integrantes del equipo técnico para impulsar su producto.

Aptitudes técnicas necesarias para el desarrollo front-end

Para convertirse en un desarrollador front-end, no sólo hay que entender la naturaleza de la labor (que he tratado de desmitificar anteriormente). También necesitas habilidades técnicas.

Pensándolo bien, el desarrollo del front end consiste en involucrar a otras partes interesadas + ayudar a los usuarios + trabajar con la tecnología.

Por ejemplo, casi todos los sitios web están construidos con una combinación de HTML, JavaScript y CSS. Si no estás familiarizado con estas tecnologías, tendrás que aprenderlas te recomiendo aprender con una academia de programación. Aprender a escribir estos lenguajes y cómo interactúan entre sí es imprescindible para ser un ingeniero del front-end efectivo.

¿Qué es lo que hace a un gran desarrollador front end?

Un desarrollador de front-end fuerte y efectivo muestra un enfoque decidido y una obsesión por lo que los usuarios y clientes necesitan y quieren.

Comienza con el caso de uso del cliente y trabaja hacia atrás, trabajando incansablemente para ganar y mantener la confianza del cliente creando el front-end de los productos.

Los desarrolladores de front-end fuertes son dueños de sus productos y soluciones. Necesitan pensar a medio y largo plazo mientras entregan resultados inmediatos del producto.

Un buen desarrollador de front-end utiliza herramientas de seguimiento de proyectos para rastrear los cambios, demostrar el progreso y, lo que es más importante, hacer saber a sus compañeros por qué se están realizando los cambios y cuándo.

Un desarrollador de front-end sabe lo que implica su trabajo y se mantiene en su carril. Por último, un desarrollador de front-end se esfuerza por inventar y simplificar.

¿Cómo demuestra un desarrollador front-end la responsabilidad de la elaboración de un producto?

Un desarrollador front end es curioso y esta curiosidad impulsa su responsabilidad en el éxito y el crecimiento de un producto.

El desarrollador nunca deja de buscar formas de mejorar el producto, o a sí mismo.

Por último, el desarrollador de front-end tiene y mantiene altos estándares. Suben el listón de la excelencia del producto – velocidad, eficiencia operativa, seguridad, fiabilidad – y se aseguran de que los defectos no se envíen al front-end.

Estos son atributos que los desarrolladores de front-end demuestran cuando contribuyen a la creación de productos.

Si eres un desarrollador de front-end, necesitas comunicarte con tu equipo. Necesita gestionar la complejidad, celebrar las victorias y enviar correos electrónicos de lanzamiento de productos. Esto es responsabilidad y esto es liderazgo.

Si ahora trabaja a distancia, es necesario que sepas programar y dirigir las reuniones virtuales del equipo y comunicar el trabajo de desarrollo que planeas hacer.

En resumen, los desarrolladores de front end están obligados a desafiar respetuosamente las decisiones cuando no están de acuerdo, incluso cuando hacerlo es incómodo. Muestran convicción.

Que habilidades y aptitudes son comunes para ser desarrollador de front-end

Ahora que sabes lo que hace un desarrollador de front-end, con quién interactúa y qué hace que alguien sea efectivo en este trabajo, pasemos a las habilidades necesarias para trabajar en este campo.

Si te gusta escribir, probar e implementar software, crear sitios web o usar HTML y CSS para interactuar con bases de datos y servicios, podrías prosperar en una carrera de desarrollo web.

Revisé docenas de trabajos de desarrollo de front end para resumir las habilidades básicas que casi todas las ofertas de trabajo deseaban. Aquí están los cinco principales atributos que debes demostrar:

  • Habilidades técnicas probadas en programación web;
  • Habilidades demostradas con HTML y CSS;
  • Un entendimiento de JavaScript (y/o PHP, ASP.NET, o Ruby on Rails);
  • Experiencia trabajando con otros para probar, diagnosticar y analizar software;
  • Comprensión de la seguridad y de las mejores prácticas de desarrollo.

Reuniendo todo: Conclusión

Las responsabilidades diarias de un desarrollador de front end pueden variar dependiendo de la tecnología que tu trabajo o equipo utilice. Independientemente de la tecnología, debes esperar jugar un papel sustancial en la formación de la cultura del front-end, tener la responsabilidad técnica de uno o más productos, y ser un experto en la arquitectura del software.

Ya sea que comiences un negocio online, te unas a una pequeña empresa como una startup de fintech, o gestiones equipos de ingeniería en grandes empresas, tendrás que navegar por estos procesos y flujos de trabajo para impulsar el valor.

Recuerda la metáfora del cajero automático.

Si quieres ayudar a los usuarios a retirar dinero de la máquina, y te parece que eso vale la pena y es emocionante, vas por buen camino para crear productos que añadan valor a los usuarios.

PHP 8: Nuevas características y actualizaciones

PHP 8: Nuevas características y actualizaciones

php 8 ya está disponible! PHP es un lenguaje de programación de código abierto potente y ampliamente accesible que se utiliza principalmente en el desarrollo de sitios web. A pesar de que constantemente vemos un aumento en todo tipo de tecnologías y software para la creación de sitios web, PHP sigue siendo uno de los lenguajes más utilizados, alimentando un asombroso número de sitios web. La nueva versión, PHP 8, promete aportar aún más potencia y velocidad permitiendo resultados aún mejores.

A diferencia de JavaScript, que es del lado del cliente, PHP es del lado del servidor. Cuando el navegador solicita información al servidor, éste ejecuta el código y envía el resultado al cliente. El navegador entonces usa esta información para crear una página web. PHP es relativamente fácil de aprender, rápido y compatible con casi todos los navegadores, lo que lo convierte en una poderosa herramienta para desarrolladores de todo tipo.

¿Cuáles son las mejoras y características de PHP 8?

PHP 8 se puso en marcha el 26 de noviembre e introducirá muchas mejoras en la velocidad, seguridad y limpieza del código:

Ejecución más rápida del código

PHP 8 es la primera versión de PHP que tiene un compilador – JIT – que cachea tu código interpretado y genera un código máquina como salida. El JIT, o compilador » just in time » promete mejoras de velocidad para tareas y algoritmos complejos y abre nuevas oportunidades para que el lenguaje PHP amplíe su alcance y aplicaciones.

Código de mayor calidad

Una de las principales diferencias que notará con PHP 8 es que muchas de las advertencias y avisos que eran difíciles de captar ahora se clasifican como excepciones de código o errores, que pueden ser capturados y registrados. Es posible que debido a esta actualización, muchos problemas que permanecían ocultos como avisos con las versiones anteriores de PHP ahora salgan a la superficie.

Código más limpio y corto

Algunos de los nuevos elementos, como el operador de seguridad nula, mejoran enormemente la legibilidad del código, haciéndolo más corto y ordenado. El operador de seguridad nula proporciona una funcionalidad similar a la de la coalescencia nula, pero también soporta llamadas a métodos. En lugar de anidar varias declaraciones «if», se puede utilizar el operador «null» para escribirlas todas en una sola línea de código.

La tendencia del «Union Type»

En versiones anteriores a PHP 8.0, sólo se podía declarar un único tipo para las propiedades, parámetros y tipos de retorno. En esta última versión, hay una característica llamada » union types» que es una colección de dos o más tipos que indican que cualquiera de ellos puede ser usado. Un union type declara esencialmente una condición OR para múltiples tipos en la declaración de tipo de argumento, tipo de retorno o tipo de propiedad.

Versión de PHP8 en pruebas

La versión candidata a la liberación ha estado disponible para ser probada desde hace un tiempo. La mayoría de las empresas de alojamiento de sitios web de calidad ya deberían tener una opción para que los desarrolladores la prueben en su plataforma. Dado que las versiones principales suelen incluir cambios que podrían romper la compatibilidad con versiones anteriores, es mejor probar la versión candidata lo antes posible y preparar el código si desea obtener todos los beneficios de la última actualización.

Mantenerse al día con las últimas versiones de PHP es esencial si quiere tener un código rápido y seguro. PHP 8 es una actualización importante y muy esperada, pero antes de actualizarla, se recomienda encarecidamente probarla primero en una versión de prueba de su sitio web, para corregir cualquier incompatibilidad o error de antemano.

Si te ha gustado este artículo, te recomiento leer cómo enviar correos electrónicos en PHP con PHPMailer

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.

Háblame ;)
¿Necesitas ayuda?
Hola! estás interesado en mis servicios? hablemos por WhatsApp ;)