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.

Los mejores scripts de reservas online en PHP

Los Mejores Scripts De Reservas Online En PHP

 

PHP es el motor de varios scripts de reservas online, por eso es uno de los lenguajes más utilizados en el mundo. Desde sitios web de nivel medio hasta aplicaciones de nivel empresarial, el lenguaje proporciona grandes funcionalidades de codificación para desarrollar todo tipo de aplicaciones avanzadas.

El script de reservas online es uno de los mejores ejemplos de cómo PHP impulsa diferentes industrias para facilitar a los usuarios y a las organizaciones por igual. El lenguaje facilita la rápida integración de varias bibliotecas y herramientas externas. Facilitando a los desarrolladores la construcción de cualquier tipo de aplicación de reservas online en PHP con las funcionalidades deseadas.

Construir un script de reservas online requiere de un profundo conocimiento técnico. Pero aún así no es tan difícil como parece, ¡gracias a los Scripts de Reservas de PHP ya preconstruidos!

Hay muchos scripts de reservas en PHP personalizados disponibles en el mercado, haciendo el trabajo de los desarrolladores más fácil que nunca. Usando estos scripts, cualquiera puede integrar un sistema de reservas online completamente funcional en tu aplicación en cuestión de minutos, y también puedes personalizarlo más tarde para satisfacer las necesidades del proyecto.

Los mejores scripts de reservas en PHP

Este blog ofrece una breve reseña de algunos de los scripts de reservas en PHP más utilizados online y sus grandes características incorporadas. Enumera todos los principales scripts PHP que permiten a los desarrolladores construir todo tipo de sistemas de reservas con PHP online con facilidad. Echemos un vistazo a ellos a continuación:

Hotel Booking System

sistema de reservas online para hoteles en PHP

Para facilitar al administrador, este sistema de reservas online en PHP proporciona grandes características incorporadas para gestionar las reservas de hotel diarias sin esfuerzo. Proporciona una poderosa plataforma de reservas online donde se puede gestionar fácilmente las reservas de habitaciones de los usuarios, promociones de hoteles/vales, etc. Está desarrollado con PHP y MySQL, lo que hace que sea muy fácil de integrar en los proyectos en sólo unos pocos pasos.

Ofrece un diseño fácil de usar en el móvil  y proporciona múltiples idiomas para atraer a una gran cantidad de clientes. Además, también proporciona una clara herramienta de llamada a la acción que puede utilizar con mensajes impactantes para aumentar sus conversiones y reservas

Restaurant Booking System

sistema de reservas online para restaurantes PHP

Este es un sistema de reservas online PHP muy útil, desarrollado para facilitar a los usuarios la reserva de mesas y salones en un restaurante. Es un sistema de reservas de autoservicio que permite a la gente reservar mesas fácilmente a través del sitio web, y pagar facturas anticipadas para la reserva si es necesario. Es muy fácil de usar y personalizable, por lo que a los desarrolladores les encanta usarlo en sus proyectos web.

Con el sistema de reserva de restaurantes, se puede personalizar el proceso de reserva, gestionar la disponibilidad de mesas, el menú de prepedido para la cena/almuerzo, etc. También ofrece una función de notificación por correo electrónico y SMS para tenerte al tanto de las próximas reservas y pedidos.

Car Booking System

sistema de reservas de coches online

Es un avanzado sistema de reservas de coches online hecho para simplificar los problemas diarios de los coches de alquiler. Utilizando el script, puedes integrar fácilmente un sistema de reservas de coches totalmente funcional en tu aplicación que ayuda a los usuarios a reservar, gestionar y especificar los inventarios de coches. El sistema de reservas de código abierto PHP te ayuda a notificar a tus usuarios sobre los coches disponibles para reservar y sus fechas de reserva. Ofrece una función de notificación push que permite a los responsables de los sitios web enviar notificaciones puntuales y personalizadas por SMS o correo electrónico a los clientes, informándoles de sus reservas y pagos pendientes.

También proporciona un diseño receptivo que facilita el acceso en todo tipo de dispositivos. Además, se ha desarrollado con una escritura ligera para facilitar su integración en todo tipo de aplicaciones.

Rental Property Booking Calendar

sistema de reserva de inmuebles en alquiler

Integra este sistema de reserva de inmuebles en alquiler en tu aplicación y experimenta la facilidad de reserva de inmuebles con un solo clic. Es un avanzado sistema de reservas especialmente desarrollado para los propietarios de inmuebles en alquiler. Para permitirles gestionar fácilmente las fechas, lugares y clientes en las temporadas de vacaciones que están de moda. Utilizando el sistema online, los usuarios pueden reservar sin esfuerzo apartamentos, habitaciones, etc. Con sólo pulsar un botón, y también pueden recibir notificaciones sobre las últimas ofertas y promociones.

El calendario de reservas permite a los clientes procesar sus pagos tanto online como offline y también permite a los administradores gestionar las reservas, generar facturas, cupones y más desde el panel de control. El sistema también proporciona vistas de calendario únicas con cuatro diseños diferentes (vistas de 1, 3, 6 y 12 meses) para mantener a los usuarios actualizados sobre las reservas disponibles.

Traveling Booking System

gestionar tu negocio de viajes de forma eficaz

Para gestionar tu negocio de viajes de forma eficaz, integra este sistema de gestión de agencias de viajes en tu aplicación y experimenta la forma rápida y sin esfuerzo de gestionar todas las reservas de los clientes. Es un sistema ágil y fácil de usar que permite a tus clientes comprobar los destinos y paquetes disponibles desde la facilidad de sus casas. Es una de las mejores maneras de atraer a más clientes en la temporada de vacaciones, ya que proporciona una forma avanzada y sin complicaciones de interactuar con tus clientes y ofrecerles ofertas para lugares de vacaciones de moda.

Este sistema está construido sobre CodeIgniter con fuertes protocolos de seguridad que te ayudan a proteger tu aplicación de inyecciones SQL, XSS, CSRF, y otros ataques maliciosos. Proporciona una interfaz simple que incluso una persona no técnica puede utilizar para sus proyectos de viaje.

Observaciones finales

Esto nos lleva al final de este artículo, en el que se destacan algunos de los scripts de reserva en PHP más utilizados en el mercado. Siendo desarrollador, es tu prioridad construir una aplicación que cumpla con todas las características requeridas del cliente(s), especialmente si es un sistema de reservas comercial en PHP. Usando estos scripts, no sólo puedes construir la aplicación requerida a tiempo, sino que también puedes reducir tu carga de trabajo para concentrarte en otras tareas más importantes como el diseño UX de tu web.

Si todavía tienes alguna pregunta o sugerencia con respecto a este artículo, no dudes en publicarla a continuación en la sección de comentarios.

10 Ejemplos de animaciones SVG para diseñadores web

10 Ejemplos de animaciones SVG para diseñadores web

 

Las mejores animaciones SVG para diseñadores web

Animaciones SVG para diseñadores web. SVG (Scalable Vector Graphics) tiene una serie de ventajas en comparación con otros formatos de imagen utilizados en la web. En primer lugar, los SVG son escalables, por lo que pueden adaptarse a cualquier tamaño de pantalla sin pérdida de calidad. Luego, los navegadores pueden cargarlos más rápido, usando menos recursos. Y, pueden ser editados con CSS como si fueran simples elementos de HTML. Además de ser utilizado para imágenes estáticas, también puede crear animaciones impresionantes con SVG. En este artículo, he recopilado 10 ejemplos de animaciones SVG para inspirarte a usarlas también en tus propios proyectos web.

1. Become a Traveler Today (Animaciones SVG)

See the Pen SVG Animation by jjperezaguinaga (@jjperezaguinaga) on CodePen.default

Esta impresionante demo de ‘Become a Traveler Today’ de José Aguinaga es actualmente la animación SVG más popular en CodePen, y esto no es una coincidencia, ya que se ha invertido mucho trabajo en este proyecto artístico. El autor creó los gráficos con Adobe Illustrator y los exportó con el plugin SVG Export. También utilizó el preprocesador Sass para crear la animación de fotogramas clave que mueve cuidadosamente el globo alrededor de la pantalla.

Descarga este SVG desde este enlace.

2. SVG Loader Animations

See the Pen SVG Loader Animation by Nikhil Krishnan (@nikhil8krishnan) on CodePen.default

Estos cargadores puros de SVG de Nikhil Krishnan son un bonito ejemplo de cómo crear animaciones SVG adecuadas para proyectos web en el mundo real. Al igual que la demostración ‘Become a Traveler Today’, estos cargadores también utilizan el preprocesador Sass. Sin embargo, aquí, la animación es un efecto SVG nativo añadido directamente al elemento animateTransform SVG dentro de la página HTML.

Descarga este SVG desde este enlace.

3. Project Deadline Is Coming

See the Pen #2 – Project Deadline – SVG animation with CSS3 by Jonathan Silva (@jonathansilva) on CodePen.default

Este genial proyecto de animación de Jonathan Silva es escalofriante y divertido a la vez. Demuestra muy bien que realmente se pueden utilizar las animaciones SVG para cualquier tipo de proyecto creativo. Con este pequeño pero inteligente recordatorio de plazos, puedes motivar a tu equipo a cumplir con los plazos, sin ser un fastidio. Aquí, el autor creó el efecto animado usando la regla @keyframes de CSS y un poco de jQuery para establecer el tiempo.

Descarga este SVG desde este enlace.

4. SVG Text Animation Using Stroke Offset Method

See the Pen SVG Text Animation Using Stroke Offset Method by Mack Ayache (@Ayachem) on CodePen.default

Además de las imágenes animadas, también puede utilizar animaciones SVG para crear efectos impresionantes de texto. Por ejemplo, echa un vistazo a esta bonita animación de texto de Mack Ayache. Él hace uso de simples formas SVG para crear las letras. A continuación, añade el movimiento por separado a cada letra utilizando los atributos SVG stroke-dashoffset y stroke-dasharray. Sin embargo, añade estos atributos al CSS en lugar de al elemento <svg> dentro del HTML. Él puede hacer eso porque los atributos de presentación de SVG pueden ser utilizados como propiedades CSS también.

Descarga este SVG desde este enlace.

5. Sketch Photo Animation

See the Pen Sketch Photo by Kristen Zirkler (@kristenzirkler) on CodePen.default

Esta animación de fotos exclusivas de Kristen Zirkler puede ser una gran incorporación a cualquier interfaz de usuario que muestre fotos de perfil. La autora creó el gráfico en Adobe Illustrator colocando dos capas una encima de la otra, una para su foto y otra para el camino que va alrededor de su cara. Luego, usó Sass para agregar la animación de fotogramas clave que modifica las reglas de desplazamiento-desplazamiento y opacidad.

Descarga este SVG desde este enlace.

6. Beating Heart Animation (Animaciones SVG)

See the Pen Beating Heart – CSS and SVG animation – low poly by morkett (@morkett) on CodePen.default

Si quieres ver un ejemplo de una animación SVG realmente sofisticada, echa un vistazo a la animación del corazón palpitante cuidadosamente elaborada por David Corkett. A pesar de que es un efecto complicado, no utiliza ningún tipo de JavaScript, sino que se basa únicamente en SVG y CSS. El corazón está hecho de múltiples polígonos a los que el autor añadió efectos de entrada y salida usando la regla @keyframes de CSS.

Descarga este SVG desde este enlace.

7. Pointless Rider (Animaciones SVG)

See the Pen Pointless Rider by Elliott Munoz (@elliottmunoz) on CodePen.default

Si alguna vez has querido crear un logo animado, aquí tienes un excelente ejemplo. La demo de Pointless Rider de Elliott Muñoz muestra que también puedes usar animaciones SVG para temas de marca. Por defecto, es un elegante logotipo en blanco y negro. El autor añadió el sutil efecto de animación con los elementos SVG animateTranform y animateMotion. Aquí, el CSS sólo alinea los elementos y establece los colores, pero es el SVG el que se encarga de todo el movimiento en la pantalla.

Descarga este SVG desde este enlace.

8. Sovog 404 Page (Animaciones SVG)

See the Pen Sovog 404 page by Marco Barría (@fixcl) on CodePen.default

Las páginas 404 son otra área en la que puedes poner en práctica con éxito una animación SVG. La demostración de la página Sovog 404 de Marco Barría se basa en SVG y Sass para hacer que el robot levante sus extremidades. Aunque las partes del robot son todas trayectorias SVG separadas, se mueven hacia arriba y hacia abajo con la ayuda de la transformación: rotate(); propiedad CSS, utilizada en cada trayectoria individualmente.

Descarga este SVG desde este enlace.

9. List Expand SVG Animation

See the Pen List Expand by Daniel (@daniel_wolf) on CodePen.default

Si quieres un ejemplo de una animación SVG que puedas usar fácilmente en proyectos cotidianos, aquí tienes una interesante demostración. Esta elegante animación de expansión de una lista de Daniel Wolf puede funcionar bien en cualquier aplicación móvil o web en la que se quiera mostrar información ampliada a los usuarios. De acuerdo con la descripción del autor, la clave para este efecto es «el tiempo en que los elementos se mueven en la transición». Las animaciones se basan en CSS así como en un poco de jQuery para la funcionalidad de clic.

Descarga este SVG desde este enlace.

10. SVG Animation with Sliders

See the Pen SVG animation with sliders by Kenneth Aamås (@knekk) on CodePen.default

Esta bella animación SVG de Kenneth Aamås con controles deslizantes de demostración utiliza tanto Sass como JavaScript para lograr un efecto inteligente y controlado por el usuario. Puede cambiar las dimensiones de la imagen con la ayuda de tres sliders en la parte inferior de la página. Cada slider está atado a una parte diferente de la imagen que comienza a moverse cuando el usuario cambia la posición del slider. Para esta animación, el autor utiliza la propiedad CSS de transición en lugar de las animaciones de fotogramas clave, lo que resulta en un efecto más sutil.

Descarga este SVG desde este enlace.

Si te han gustado estos efectos en CSS te invito a que leas el artículo Efecto De Burbujas Con CSS Como 7UP. y recuerda compartir este artículo en tus redes sociales 🙂

Hosting Compartido vs VPS vs Servidor Dedicado

Hosting Compartido vs VPS vs Servidor Dedicado

 

Hosting Compartido vs VPS vs Hosting Dedicado. Cuando se está preparando para lanzar un nuevo proyecto de sitio web, la elección del hosting correcto puede ser una decisión difícil. Incluso para los desarrolladores experimentados, no es una tarea fácil dado el gran número de empresas de hosting disponibles que ofrecen diferentes tipos de servicios y características.

Sin embargo, antes de elegir un alojamiento web, es importante averiguar qué tipo de hosting necesitas.

En este artículo exploraremos los cuatro tipos principales de hosting: compartido, VPS y dedicado. Cada una de estas opciones tiene sus propias ventajas y desventajas, que es importante comprender para que puedas determinar qué solución se ajusta mejor a las necesidades de tu sitio web.

Hosting compartido

hosting compartido siteground

El hosting compartido es la opción más popular para la gente que está desarrollando su primer sitio web.

Cuando te registras para un hosting compartido, la compañía de hosting pondrá tu sitio web en un servidor junto con cientos, si no miles, de otros sitios web. Esto significa que cada cliente tiene que compartir el espacio y los recursos del servidor con todos los demás clientes, incluyendo el tiempo de CPU, la memoria y el espacio en disco.

Piensa en el hosting compartido como si vivieras de alquiler en un piso. Todos los vecinos comparten el mismo edificio, pero también comparten cosas como ascensores y escaleras, aparcamiento y recogida de basura. Como alquilado no tienes la opción de modificar o reformar nada importante del piso.

El alojamiento compartido es la opción más barata y económica en cuanto a hosting se refiere. Sin embargo, obtienes lo que pagas – en este caso, el hosting compartido viene con estrictas limitaciones.

Pros de un hosting compartido

Es económico. Algunas compañías de hosting cobran tan poco como 3,95 euros al mes.

Es para principiantes. Es fácil comenzar con el hosting compartido en comparación con otras opciones de hosting.

La seguridad, las actualizaciones y el mantenimiento del servidor no son administrados por ti.

Desventajas de un hosting compartido

Puede ser lento. Con tantos otros sitios web funcionando en el mismo servidor, los tiempos de carga de sus páginas pueden verse afectados.

La seguridad no está garantizada. No sabes quién más está usando el mismo servidor, por lo que si un sitio tiene una fuga de información o es pirateado, tu sitio podría verse afectado.

Falta de control y rendimiento del servidor. Si el servidor está saturado o si otro sitio web ocupa más de su cuota de recursos, el rendimiento puede disminuir.

Es difícil de escalar debido a la limitación del almacenamiento y del ancho de banda.

Precio de un hosting compartido

El hosting compartido puede tener un precio que oscila entre los 3,95 y los 9,95 euros al mes, dependiendo del hosting que elijas.

Se adapta mejor a

Sitios web pequeños con un mínimo de tráfico, como blogs y sitios personales.

Servidores virtuales privados (VPS)

vps banahosting

VPS es similar al hosting compartido en el sentido de que tu sitio web comparte un servidor con otros sitios, pero hay menos sitios que comparten espacio y recursos y el servidor se divide en diferentes entornos de servidores virtualizados. A diferencia del hosting compartido, el VPS suele proporcionar recursos básicos garantizados, así como recursos adicionales disponibles en un momento dado en caso de que tu sitio experimente un pico de tráfico.

Piensa en VPS como si fueras el propietario de un piso. Mientras compartas el mismo edificio con otros propietarios, eres responsable del mantenimiento de tu propiedad y de cualquier reparación que deba realizarse dentro de tu apartamento. Además, hay menos propietarios y tienes tu propio espacio de parking asignado.

Pros de un VPS

Es más asequible que un servidor dedicado y pagas por lo que necesitas.

Más seguro. Para segmentar el servidor adecuadamente, el host instala una capa de software que le dedica parte del servidor, que hace que esté completamente separado de otros clientes.

Es rápido. Se le asignan más recursos en comparación con el hosting compartido.

Acceso al servidor raíz. Puedes realizar personalizaciones según tus necesidades y tienes un mayor control sobre tu entorno de hosting.

Es escalable. Un VPS puede crecer con tu sitio a medida que las necesidades de tu servidor aumentan con el tiempo.

Contras de un VPS

Algunas compañías de servidores sobrevenden sus servidores, con la esperanza de que cada sitio que actualmente utiliza un servidor en particular no tenga un día con más tráfico.

Es más caro que el hosting compartido.

Si elige un VPS no administrado, puede ser difícil de configurar, tomando más tiempo para que tu sitio web funcione.

Precio de un VPS

El precio de un VPS puede variar entre 20 euros y 100 euros al mes, dependiendo del hosting que elijas.

Se adapta mejor a

Si el hosting compartido es demasiado básico para tus necesidades y quieres recursos dedicados y más control sobre tu entorno de hosting, entonces un VPS puede ser el adecuado para ti.

Servidor dedicado

Servidor dedicado raiola

Un servidor dedicado es exactamente como suena: Tu sitio web se almacena en un único servidor físico dedicado a tu uso personal. No compartes el servidor con nadie, tienes todos los derechos sobre los recursos del servidor y puedes configurar los entornos de hosting según tus especificaciones exactas.

Este tipo de hosting es generalmente más caro, pero a cambio obtienes un rendimiento muy alto y un nivel de seguridad más alto comparado con otras formas de hosting.

Piensa en el servidor dedicado como si fueras dueño de tu propio chalet. Eres el único residente. Puedes aparcar tu coche en tu propia entrada y pintar tu casa del color que quieras. Pero tú eres el responsable último del mantenimiento de tu propiedad y depende de ti instalar una alarma de seguridad para ahuyentar a los ladrones.

Pros del servidor dedicado

Tienes un servidor dedicado todo para ti.

Tienes acceso completo a todas las configuraciones y puedes personalizar completamente el servidor para que se adapte a las necesidades de tu sitio web.

Es rápido. Obtienes el 100% de acceso a los recursos del servidor.

Gran rendimiento del servidor ya que puedes adaptarlo para que cumpla con las especificaciones exactas que necesitas para tu sitio web.

Es seguro. Como eres el único que utiliza el servidor, no tienes que preocuparte por el efecto de «mal vecino» que es común en el hosting compartido.

Soporte 24/7. Ya que estás pagando mucho dinero por tu cuenta, las compañías de hosting web harán que ofrecerte el mejor soporte sea una prioridad.

Contras del servidor dedicado

Es muy caro.

Necesitas personal técnico cualificado para mantener y optimizar el servidor. Eres responsable de tu servidor, así que si algo sale mal, depende de ti arreglarlo.

Precio del servidor dedicado

El servidor dedicado puede tener un precio que oscila entre los 80 y los 500 euros al mes, dependiendo de tus necesidades. El precio se basa normalmente en las especificaciones del servidor y los servicios adicionales.

Se adapta mejor a

Dado que el servidor dedicado es bastante caro, es el más adecuado para grandes empresas y sitios web de alto tráfico que reciben más de 500.000 visitantes al mes y cuentan con el personal técnico necesario para mantener el servidor. El servidor dedicado es también una opción ideal si tienes un negocio que requiere un alto nivel de seguridad.

Conclusión sobre Hosting Compartido vs VPS vs Servidor Dedicado

Para finalizar este artículo sobre Hosting Compartido vs VPS vs Servidor Dedicado, decirte que, si eres un principiante en el tema del desarrollo web, lo mejor que puedes hacer es contratar un hosting compartido, en cambio si por el contrario ya eres un desarrollador web freelancer, lo mejor sería que al menos tengas un VPS y para mayor calidad contrates un servidor dedicado.

Mi opinión personal, uno de los mejores hosting que puedes contratar es BanaHosting, puedes contratarlo desde este enlace, es un enlace de afiliado, si lo contratas desde ese enlace ayudará a que pueda seguir creando contenidos gratuitos y sobre todo decirte que solo recomiendo lo mejor y lo que yo utilizo para mis webs 🙂

Mejores monitores USB-C para diseño, programación y juego

Mejores monitores USB-C para diseño, programación y juego

 

Los mejores monitores USB-C tienen múltiples usos, no sólo facilitan la conexión de su portátil USB-C, lo que significa que obtienes una pantalla adicional, sino que también cargan el portátil al mismo tiempo.

Aunque la facilidad de carga no es exactamente el punto principal de los monitores USB-C, existe una creciente necesidad de compatibilidad USB-C. Con los últimos modelos MacBook Pro y MacBook Air haciendo uso de USB-C, y muchos dispositivos Windows más recientes que también utilizan el puerto, nunca ha habido un mejor momento para conseguir uno de los mejores monitores USB-C del mercado.

Pero, ¿qué monitor con puerto USB-C debes comprar? Hay muchas opciones excelentes, pero hemos hecho el trabajo duro por ti y las hemos reunido en esta guía. Ya sea que quieras utilizar el mejor monitor USB-C de 4K para tu MacBook, o un monitor USB-C de un reproductor importante como Dell o LG, o que simplemente quieras la opción más asequible que puedas conseguir, nosotros te cubrimos….

Los mejores monitores USB-C

Hemos encontrado el mejor monitor USB-C y lo enumeramos a continuación.

01. LG 27UD88-W – Monitor USB-C de 27 pulgadas y 4K

LG 27UD88-W mejores monitores USB-C

Cuando se trata de elegir el mejor monitor USB-C de 4K del mercado, el LG 27UD88-W de 27 pulgadas se lleva la mejor parte. Está diseñado para juegos, lo que significa que también es ideal para los diseñadores gráficos y programadores web, y es el hermano menor del monitor USB-C de 5K que ocupa el puesto 5 en esta lista, ofreciendo un brillante equilibrio de características y funcionalidad a un precio mucho más asequible.

Obtendrás una resolución de 4K y un procesamiento antidesgarre FreeSync, además de tres ajustes preestablecidos para juegos, dos ajustes preestablecidos personalizados y dos ajustes preestablecidos de calibración. Y como con todas las opciones de USB-C aquí, alimentará tu portátil mientras actúa como una pantalla.

Tamaño de pantalla: 27 pulgadas | Resolución: 3840 x 2160 | Relación de aspecto: 16:9 | Entradas HDMI: 2 | Puertos de visualización: 1 | Fecha de lanzamiento: 2018

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

02. Dell U3818DW UltraSharp Monitor USB-C curvado de 38 pulgadas

Dell U3818DW UltraSharp

Si dispones de un presupuesto más amplio (y un escritorio) con el que jugar, te recomendamos el gran y hermoso monitor USB-C Dell U3818DW. La pantalla curva de 38 pulgadas InfinityEdge es impresionante y le da una ridícula cantidad de propiedades de pantalla, así que si eres propenso a trabajar con muchas ventanas abiertas, vale la pena considerar esta opción.

Está diseñado para el trabajo profesional y está dirigido especialmente a los profesionales del diseño gráfico y diseño web, o a cualquiera que necesite la mayor precisión de color posible, y también es ideal para los juegos. El contraste podría ser un poco mejor, pero la precisión del color es excelente y las imágenes son nítidas. Lo mejor de todo es que tienes una garantía de tres años. ¿Tiene aún más dinero? Prueba el Asus ProArt PA32UC, en el número 7 de esta lista.

Tamaño de pantalla: 38 pulgadas | Resolución: 3840 x 1600 | Relación de aspecto: 21:9 | Entradas HDMI: 2 | Puertos de visualización: 1 | Fecha de lanzamiento: 2017

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

03. Acer H277HU Monitor USB-C de 27 pulgadas

Acer H277HU Monitor USB-C

El Acer H277HU es un monitor USB-C de presupuesto más asequible para cualquiera que tenga menos dinero para gastar. No se trata de un monitor USB-C de 4K, y te faltan las especificaciones de gama alta para la edición de vídeo, pero es una excelente opción si necesitas una pantalla para diseñar, programar o jugar, y viene con un puerto HDMI y un DisplayPort también. ¿Buscas el monitor USB-C más económico para jugar? Echa un vistazo a la Acer XR382CQQK de 38 pulgadas en el número 09.

Tamaño de pantalla: 27 pulgadas | Resolución: 2560 x 1440 | Relación de aspecto: 16:9 | Entradas HDMI: 1| Puertos de visualización: 1 | Fecha de lanzamiento: 2016

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

04. HP Envy Monitor USB-C  de 27 pulgadas y 4K

HP Envy mejores Monitores USB-C

Otra opción más asequible es el HP Envy 27, un impresionante monitor USB-C de 4K con una estética elegante, gracias a sus biseles microfinos. Ofrece colores ricos y excelentes detalles de imagen, aunque la precisión de color podría ser un poco mejor directamente de la caja. Pero si estás buscando un monitor UHD de 4K a un precio razonable con amplios ángulos de visión – y eso se ve muy bien en tu escritorio – vale la pena echarle un vistazo.

Tamaño de pantalla: 27 pulgadas | Resolución: 3840 x 2160 | Relación de aspecto: 16:9 | Entradas HDMI: 2 | Puertos de visualización: 1 | Fecha de lanzamiento: 2017

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

05. LG 27MD5KA Monitor USB-C de 27 pulgadas UltraFine 5K

LG 27MD5KA mejores Monitores USB-C

El monitor USB-C LG UltraFine 5K se sitúa en el mercado de monitores de gama alta. Presionado por Apple como su compañero preferido del MacBook Pro, este magnífico monitor cuenta con una increíble pantalla de 14,7 millones de píxeles de 27 pulgadas. Las fotos y los vídeos son increíblemente ricos en detalles, vibrantes y realistas, con 218 píxeles por pulgada y una frecuencia de actualización de 60 Hz.

Está dirigido a usuarios de Mac, con cuatro puertos Thunderbolt 3/USB Type-C en la parte posterior, y absolutamente nada más, excepto un enchufe para el cable de alimentación. Si no te importa la falta de otros puertos, esta es una opción fabulosa para fotógrafos, diseñadores y videógrafos.

Tamaño de pantalla: 27 pulgadas | Resolución: 5120 x 2880 | Relación de aspecto: 16:9 | Entradas HDMI: 0 | Puertos de visualización: 0 | Fecha de lanzamiento: 2017

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

06. BenQ PV3200PT mejores monitores USB-C

BenQ PV3200PT monitor USB-C

Diseñado para editores de vídeo profesionales, animadores, cineastas, modeladores 3D y diseñadores CAD, el BenQ PV3200PT ofrece colores ricos y muy precisos y una fantástica reproducción en escala de grises. Cubre el 100 por ciento de la gama de colores Rec.709 (HDTV), así como el 100 por ciento del espacio de color sRGB, e incluso te recordará cuándo está previsto que se calibre.

El cambio al modo vertical es rápido y sencillo gracias a un mecanismo de rotación con resorte; la única característica que falta son los ajustes de luz azul. Si trabajas con vídeo de alta definición en particular, este es el mejor.

Tamaño de pantalla: 32 pulgadas | Resolución: 3840 x 2160 | Relación de aspecto: 16:9 | Entradas HDMI: 1| Puertos de visualización: 2 | Fecha de lanzamiento: 2016

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

07. Asus ProArt PA32UC mejores monitores USB-C

Asus ProArt PA32UC mejores monitores USB-C

El Asus ProArt PA32UC de alta calidad es el monitor USB-C más caro de esta lista – y está en una liga diferente. Dirigido a profesionales creativos, cuenta con una resolución de 4K con capacidades de imágenes HDR, y viene en un sofisticado paquete equipado con USB-C y Thunderbolt 3 con casi todas las funciones que un creativo podría necesitar para el trabajo con SDR y HDR. Obtienes una cobertura de espacio de color 100% sRGB, 99,5% Adobe RGB y 95% DCI-P3; además de funciones de calibración profesional y una herramienta de calibración de hardware en la caja. Con la PA32UC se puede realizar un trabajo de precisión sRGB, un trabajo de precisión de amplio espectro y un trabajo HDR.

Sin embargo, no se trata de un monitor USB-C destinado a los jugadores; la frecuencia de actualización es decepcionante; en su lugar, recomendaríamos el Acer XR382CQK en el número 08 de esta lista. Pero con un fuerte seguimiento de rayos gamma y consistencia de color, pero si eres un creativo profesional que trabaja en cualquier cosa, desde películas hasta gráficos, esta es una pantalla media que reproduce el contenido exactamente como se supone que debe verse.

Tamaño de pantalla: 32 pulgadas | Resolución: 3840 x 2160 | Relación de aspecto: 16:9 | Entradas HDMI: 4 | Puertos de visualización: 1 | Fecha de lanzamiento: 2018

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

08. Acer XR382CQK Monitor USB-C curvado de 38 pulgadas

Acer XR382CQK mejores monitores USB-C

Este enorme monitor USB-C de 38 pulgadas, el Acer XR382CQK, ofrece la tecnología FreeSync de AMD y 75Hz, además de un soporte ergonómico con altura, inclinación y giro, y una calidad de construcción superior. El radio de la curva es de 2300 mm, lo que ofrece un efecto envolvente sin distorsión de la imagen. La reproducción del color es fantástica, mientras que los niveles de negro son impresionantes. Y en cuanto a los videojuegos – bueno, es maravilloso. Este es uno de los mejores monitores USB-C para juegos que puedes conseguir.

Tamaño de pantalla: 37,5 pulgadas | Resolución: 3840 x 1600 | Relación de aspecto: 21:9 | Entradas HDMI: 2 | Puertos de visualización: 1 | Fecha de lanzamiento: 2018

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

09. LG 34UM69G-B Monitor USB-C de 34 pulgadas UltraWide

LG 34UM69G-B Monitor USB-C

Con una reducción del desenfoque por movimiento de 1ms, tecnología FreeSync y sincronización de acción dinámica, el LG 34UM69G-B de 34 pulgadas está repleto de funciones fáciles de usar, lo que lo convierte en uno de los mejores monitores USB-C de bajo presupuesto para juegos que puedes conseguir ahora mismo. Alojado en una carcasa negra sin bisel, hay tres modos de juego personalizables: dos modos de disparo en primera persona y un modo RTS preestablecido. Mientras tanto, la precisión de color lista para usar es buena, con un fuerte rendimiento en escala de grises. Este es un monitor USB-C de precio excepcional.

Tamaño de pantalla: 34 pulgadas | Resolución: 2560 x 1080 | Entradas HDMI: 1| Puertos de visualización: 1 | Fecha de lanzamiento: 2018

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

Si te ha gustado esta lista de los mejores monitores USB-C, te recomiendo le eches un vistazo a mi lista de Los Mejores Portátiles Para Programación En 2019.

Los 5 mejores frameworks para JavaScript para 2020

Los 5 mejores frameworks para JavaScript para 2020

 

Mejores frameworks para JavaScript. Básicamente, JavaScript, a menudo abreviado como JS, se utiliza para potenciar el contenido o los medios interactivos de una página web.

JS te ayuda a hacer más con tu contenido para que puedas proporcionar al usuario animaciones, contenido relevante basado en ciertos parámetros y gráficos especiales. Esto es utilizado a lo largo y ancho del planeta por páginas web y por compañías de todo el mundo para una gran variedad de propósitos. Algunos ejemplos populares incluyen:

Servicios distribuidos de Netflix
Creación de React en Facebook
Amazon Marketplaces

¿Qué es un Framework? Mejores frameworks para JavaScript

Un framework es «una abstracción en la que el software que proporciona funcionalidad genérica puede ser cambiado selectivamente por código adicional escrito por el usuario, proporcionando un software específico de la aplicación«. Los frameworks se construyen sobre lenguajes para acelerar los procesos y desarrollar herramientas específicas.

Lista de los mejores frameworks para JavaScript

En este artículo vamos a analizar los cinco principales frameworks JavaScript en 2019.

Framework Vue.js

Framework Vue.js

Vue es un framework progresivo para la construcción de interfaces de usuario. Vue está diseñado desde el principio para ser adoptado de forma progresiva, lo que facilita las integraciones y la conexión con proyectos existentes.

Este framework también es súper rápido, con 20KB min+gzip de ejecución y la optimización mínima necesaria para alimentar tus aplicaciones.

La forma en la que funciona es a través de estilos de plantillas similares a Angular. Es un lenguaje rápido y fácil de usar para aplicaciones, interfaces de usuario y desarrollo de interfaces interactivas, y también tiene la capacidad de impulsar proyectos de una sola página web.

Una de las mayores razones por las que a la gente le gusta Vue sobre algunos de los otros frameworks es porque se ahorra mucho tiempo durante el renderizado. Vue realiza un seguimiento de las dependencias de los componentes, de modo que el sistema ya sabe qué componentes deben volver a renderizarse cuando algo cambia.

Mira ejemplos de sitios web, aplicaciones y proyectos geniales realizados con vue.js.

Framework Angular

Angular mejores frameworks para JavaScript

Angular se construye para el futuro. El mantenimiento de la estructura está a cargo de un equipo de ingenieros que comparten la pasión por hacer que el desarrollo web parezca sencillo. Ellos creen que escribir buenas aplicaciones debe ser divertido y entretenido.

Angular es útil hoy en día porque utiliza Typescript de última generación para aplicaciones más grandes. La escritura tipográfica se define como «JavaScript que se escala». Debido a la forma en que se diseñó Typescript, millones de desarrolladores pueden utilizar el código JavaScript existente, incorporar bibliotecas JavaScript populares y llamar a código TypeScript desde JavaScript. Esto hace que el proceso sea mucho más fácil para proyectos grandes con muchos colaboradores. Tener Angular construido encima de esto es eficiente y permite a los desarrolladores concentrarse más en la velocidad y el rendimiento.

Angular sigue un patrón clásico de MVP (Model View Presenter) para aplicaciones complejas. Este es un concepto que la gente usa para dividir los grandes proyectos en áreas específicas de «separación de responsabilidades» y zonas en las que centrarse en el desarrollo.

Echa un vistazo a los proyectos realizados con angular para ver ejemplos interesantes de proyectos construidos sobre este framework.

Framework React

Framework React

React es una librería JavaScript para construir interfaces de usuario. React fue creado por Facebook, inicialmente para su uso en las aplicaciones newsfeed e Instagram. El marco fue de código abierto en JSConf US en mayo de 2013.

Similar a Vue, React es eficiente en el renderizado y sólo cambia los componentes necesarios cuando interactúa con el render. React también cambia la forma en que las personas pueden interactuar con los render y trabaja para hacer evolucionar el proceso de desarrollo. Se basa en componentes, lo que significa que cada sección encapsulada puede gestionar su propio render, lo que es importante en interfaces de usuario a gran escala y complejas.

Framework Express

Express mejores frameworks para JavaScript

Express es un framework minimalista que se ejecuta sobre Node.js, un ejecutable JavaScript construido sobre el motor JavaScript V8 de Chrome y utilizado por muchas aplicaciones a gran escala.

Express es un framework de aplicaciones web rápido y minimalista para aplicaciones web y móviles. Piensa en ello como el framework para construir sitios web. Express te ayuda a poner en marcha tus aplicaciones rápidamente, a la vez que te ofrece una serie de métodos para crear APIs fácilmente.

Muchos otros frameworks populares están construidos sobre Express debido a la simplicidad y facilidad de integración. Puedes ver la lista completa aquí.

Framework Redux

Framework Redux

Redux es un sistema de gestión de datos que se utiliza principalmente con React. Para proyectos a gran escala con muchas partes móviles, Redux ayuda a organizar los datos y a mantener todo funcionando de forma predecible incluso en entornos muy diferentes.

Una cosa importante a tener en cuenta sobre Redux es que no debes usarlo a menos que sea absolutamente necesario! Según las FAQ de Redux, «la necesidad de usar Redux no debe darse por sentada«. Múltiples colaboradores iniciales del proyecto proclaman que es algo que sabrás cuando lo necesites, y que sólo lo necesitarás cuando surjan otros problemas.

Dan Abramov dice: «Me gustaría corregir esto: no uses Redux hasta que tenga problemas con React.»

Así que tenlo en cuenta antes de saltar a toda máquina a este potente y un tanto avanzado framework. Sin duda es útil, pero sólo a gran escala y cuando se trata de grandes cantidades de datos que cambian con el tiempo.

Conclusiones finales sobre los mejores frameworks para JavaScript

Desde mi experiencia como desarrollador web freelancer, tengo que decir, que si tengo que recomendarte un framework, te recomendaría sin dudarlo Angular. Porque Angular, porque hoy en día en España existe una gran demanda de profesionales especializados en el.

Si quieres aprender más sobre JavaScript, te recomiendo leas mi artículo ¿Qué Es JavaScript? Esto Te Va A Interesar, donde podrás empezar a conocer el maravilloso mundo de JavaScript 🙂

5 reglas básicas para una mejor revisión del código

5 reglas básicas para una mejor revisión del código

Como hacer una mejor revisión del código

5 reglas básicas para una mejor revisión del código. ¿Cuántas veces te has perdido como revisor, mientras revisabas un código muy desordenado con un desarrollador web que constantemente tiene que explicar lo que ha hecho, sólo para descubrir que el código ni siquiera se puede recopilar?

¿Y cuántas veces, como desarrollador web, has sentido que la revisión del código no tenía sentido, y que se habia utilizado un tiempo sin que se aprendiera una lección?

Si te relacionas con cualquiera de las anteriores preguntas, aquí tienes 5 reglas básicas que te recomiendo que sigas, tanto como desarrollador web como revisor, que mejorarán enormemente tu proceso de revisión del código y te ayudarán a crear un impacto mucho mayor y más duradero al hacerlo.

Evita tirar de peticiones, hazlo cara a cara.

Hoy en día, utilizar servicios como github, es prioritario por su fácilidad, no te voy a decir que no lo hagas, pero piénsalo por un minuto, el acto de transferir un conocimiento que se está introduciendo en una pequeña caja de texto (un comentario), sin conversación o interacción humana, sin dar la oportunidad de que el desarrollador web se explique adecuadamente.

una mejor revisión del código

¿Es la codificación tan simple como el blanco y el negro? ¿No preferirías aprender a escribir mejor el código, tanto al revisarlo como al escribirlo?

Las revisiones de código cara a cara crean conversación, un vivo intercambio de ideas. Permite al revisor ofrecer sugerencias y consejos que no necesariamente cambiarán tu código, pero que te abrirán la mente la próxima vez que escribas algo similar. Y también le da al desarrollador web la oportunidad de explicar por qué cree que lo que hizo es mejor, y quién sabe, tal vez el revisor también aprenda algo nuevo.

2. El revisor toma el timón, mientras el desarrollador web se sienta y observa.

Las revisiones de código cara a cara tienen un gran inconveniente. Tener al desarrollador web explicando su código a lo largo de toda la revisión, podría hacer difícil entender si el código no es limpio y legible. Otros programadores tendrán que lidiar con su código sin que se siente a su lado y explique sus ideas paso a paso – y ahí es donde entra en juego la siguiente regla.

El revisor debe manejar el código solo, y el desarrollador web sólo debe responder cuando se le pida, el desarrollador web no inicia una conversación, sólo responde cuando se le pide.

De esta manera, la conversación sobre la legibilidad del código es sincera, y el revisor no se sentirá engañado. Sé que suena bastante estricto, pero funciona, y aún así se puede seguir una conversación de forma educada.

3. El desarrollador web es «Responsable».

No le hagas perder el tiempo al revisor, asegúrate de que tu código se compila, todas tus pruebas son correctas, y echa un último vistazo a tu código (evita errores tipográficos, problemas de filtrado, etc.) antes de pasar a la etapa de revisión.

No queremos que la revisión del código sea sobre tecnicismos, recuerda, tiene que ser significativa.

4. Nunca digas «tú», di «nosotros» en su lugar.

Notarás que si usas demasiado el término «Tú», el desarrollador web puede ponerse a la defensiva mientras protege su código (y tal vez sienta que su dignidad también está en juego). Asegúrate de que esta revisión de código sea productiva y no tenga ningún sentido.

desarrollador web puede ponerse a la defensiva

Recomendar tu argumento al equipo o a ti mismo, es más agradable y abre al desarrollador web para que esté más atento a los cambios.

Por ejemplo: «Lo que hiciste está mal» => «Lo que solemos hacer es eso» => «Lo que hago normalmente es así, ¿qué opinas?

Sí, ese tipo de «tú» está bien 🙂

5. Que el desarrollador web elija a su revisor para la revisión del código.

Este consejo está dirigido a los managers que hay entre nosotros, que asignan al mismo revisor (en su mayoría ellos mismos) para hacer revisiones de código para su equipo. En mi humilde opinión, cuando se trata de revisiones de código, la experiencia debería tener poco significado, y déjame que te sorprenda: Un estudiante de último año también puede aprender algo de los estudiantes de tercer año!

Cuando hay un solo revisor – sólo se hacen réplicas de sus propias opiniones y estilo de codificación en todo el equipo, en lugar de tener un «mix & match» de las opiniones y estilos de codificación con los que todo el equipo está de acuerdo.

Resumiendo la revisión del código, me gustaría dejarte una nota:

Las revisiones de código deben ser sobre el intercambio de conocimientos y la auto-mejora. Una mejor base de código es sólo un bonus, y llegará cuando los miembros de tu equipo se respeten y aprendan unos de otros.

Si te ha gustado este artículo pero aun no has comenzado a estudiar programación, te recomiendo leer Fundamentos De JavaScript: Sintaxis Y Estructura, para que puedes empezar en este maravilloso mundo 🙂

Como hacer web scraping en php

Como hacer web scraping en php

Herramientas o bibliotecas para hacer web scraping en php

Como hacer web scraping. Si estás empezando con el web scraping, sigue leyendo este artículo en donde te explico que librerías o herramientas existen en PHP que te ayudarán con esta tarea!

El Web scraping es algo que los desarrolladores necesitan realizar a diario. Puede haber diferentes necesidades en lo que se refiere a cada tarea de scraping. Podría ser desde el control del precio de un producto o el de su stock.

En el desarrollo de backend, el web scraping es muy popular. Hay gente que sigue creando analizadores y scrapers de calidad.

En este post, exploraremos algunas de las bibliotecas que pueden permitir el scraping de sitios web y el almacenamiento de datos de una manera que podría ser útil para tus necesidades inmediatas.

En PHP, se puede hacer scraping con algunas de estas librerías:

1. Goutte web scraping

La librería Goutte es genial, ya que le puede dar un soporte increíble en cuanto a cómo scrapear contenido usando PHP. Está basado en el marco de Symfony. Goutte es una biblioteca de rastreo web y de scraping web. Es útil porque proporciona APIs para rastrear sitios web y scrapear datos de las respuestas HTML/XML.
Goutte tiene licencia bajo la licencia del MIT.

Características:
Funciona bien con grandes proyectos.
Está basado en OOP.
Tiene una velocidad de análisis media.

Requisitos:
Goutte depende de PHP 5.5+ y Guzzle 6+.

Documentación
https://goutte.readthedocs.io/en/latest/

Obten más información:
https://menubar.io/php-scraping-tutorial-scrape-reddit-with-goutte

2. Simple HTML DOM

Está escrito en PHP5+,  HTML DOM es muy bueno porque te permite acceder y usar HTML de forma bastante fácil y cómoda. Con él, puedes encontrar las etiquetas en una página HTML con selectores bastante parecidos a jQuery.

Puede scrapear el contenido de HTML en una sola línea. No es tan rápido como algunas de las otras bibliotecas.
Simple HTML DOM está licenciado bajo la licencia MIT.

Características:
Soporta HTML no válido.

Requisitos:
Requiere PHP 5+.

Documentación
http://simplehtmldom.sourceforge.net/manual.htm

Obtenga más información:
http://www.prowebscraper.com/blog/web-scraping-using-php/

3. htmlSQL (Como hacer web scraping)

Básicamente, es una librería PHP experimental. Es útil porque te permite acceder a valores HTML con una sintaxis similar a la de SQL. Lo que esto significa es que no es necesario escribir funciones complejas o expresiones regulares para scrapear valores específicos.

Si eres alguien a quien le gusta SQL, también te encantará esta librería experimental. Lo útil es que se puede aprovechar para cualquier tipo de tarea variada y analizar una página web con bastante rapidez. Aunque dejó de recibir actualizaciones/soporte en 2006, htmlSQL sigue siendo una biblioteca fiable para el análisis y el scraping. htmlSQL está licenciado bajo la licencia BSD.

Características:
Proporciona un análisis relativamente rápido, pero tiene una funcionalidad limitada.

Requisitos:
Cualquier sabor de PHP4+ debería ser suficiente.
Clase PHP Snoopy – Versión 1.2.3 (opcional – requerido para transferencias web).

Documentación:
https://github.com/hxseven/htmlSQL

Obten más información:
https://github.com/hxseven/htmlSQL/tree/master/examples

4. cURL (Como hacer web scraping)

cURL es conocido como una de las bibliotecas más populares (un componente PHP incorporado) para extraer datos de páginas web. No es necesario incluir archivos y clases de terceros, ya que se trata de una librería PHP estandarizada.

Requisitos:
Cuando quieras usar las funciones cURL de PHP, todo lo que necesita hacer es instalar el paquete » libcurl. Necesitarás la versión 7.10.5 o posterior de libcurl.

Documentación
http://php.net/manual/ru/book.curl.php

Obten más información:
http://scraping.pro/scraping-in-php-with-curl/

5. Requests

Requests es una biblioteca HTTP escrita en PHP. Está basado en la API de la excelente librería Requests Python. Requests te permite enviar incidencias HEAD, GET, POST, PUT, DELETE y PATCH HTTP. Con la ayuda de requests, puedes añadir cabeceras, datos de formulario, archivos de múltiples partes y parámetros con órdenes simples, y acceder a los datos de respuesta de la misma manera. Requests tiene licencia ISC.

Características:
Dominios y URLs internacionales.
Verificación estilo navegador SSL.
Autenticación básica/digestiva.
Descompresión automática.
Tiempos muertos de conexión.

Requisitos:
Requisitos de la versión 5.2+ de PHP

Documentación :
https://github.com/rmccue/Requests/blob/master/docs/README.md

HTTPful web scraping

HTTPful es una librería PHP bastante sencilla. Es buena porque es enlazable y legible. Su objetivo es hacer que HTTP sea legible. La razón por la que se considera útil es porque permite al desarrollador centrarse en la interacción con las APIs en lugar de tener que navegar por las páginas curl set_opt. También es un gran cliente PHP REST. HTTPful está licenciado bajo la licencia MIT.

Características:
Soporte del método HTTP legible (GET, PUT, POST, DELETE, HEAD, PATCH y OPTIONS).
Encabezados personalizados.
Análisis automático «inteligente».
Serialización automática de la carga útil.
Autentificación básica
Autores de certificados del lado del cliente.
Solicitud de «Plantillas».

Requisitos:
Requiere PHP versión 5.3+

Documentación:
http://phphttpclient.com/docs/

7. Buzz

Buzz es útil ya que es una librería bastante ligera y te permite emitir peticiones HTTP. Además, Buzz está diseñado para ser simple y tiene las características de un navegador web. Buzz tiene licencia bajo la licencia del MIT.

Características:
API simple.
Alto rendimiento.
Requisitos:
Requiere PHP versión 7.1.

Documentación:
https://github.com/kriswallsmith/Buzz/blob/master/doc/index.md

Obten más información:
https://github.com/kriswallsmith/Buzz/tree/master/examples

8. Guzzle web scraping

Guzzle es útil porque es un cliente HTTP en PHP que te permite enviar peticiones HTTP de una manera fácil. También es fácil de integrar con servicios web.

Características:
Tiene una interfaz simple que te ayuda a construir cadenas de consulta, peticiones POST, streaming de grandes cargas, streaming de grandes descargas, uso de cookies HTTP, carga de datos JSON, etc.
Puede enviar solicitudes síncronas y asíncronas con la ayuda de la misma interfaz.
Utiliza interfaces PSR-7 para solicitudes, respuestas y flujos. Esto te permite utilizar otras bibliotecas compatibles con PSR-7 con Guzzle.
Puede extraer el contenido HTTP subyacente, permitiéndote escribir un entorno y transmitir código agnóstico; es decir, sin dependencia de cURL, streams PHP, sockets o bucles de eventos sin bloqueo.
El sistema Middleware te permite aumentar y configurar el comportamiento de los clientes.

Requisitos:
Requiere PHP versión 5.3.3+.

Documentación
http://docs.guzzlephp.org/en/stable/

Obten más información:
https://lamp-dev.com/scraping-products-from-walmart-with-php-guzzle-crawler-and-doctrine/958

Si te ha gustado este artículo y quieres empezar a scrapear datos te recomiendo visites Cómo crear un entorno de desarrollo localhost, y si me puedes hacer un favor, recomienda este artículo en las redes sociales:)

Cómo instalar Google Analytics en WordPress para principiantes

Cómo instalar Google Analytics en WordPress para principiantes

 

¿Quieres instalar Google Analytics en WordPress?

Instalar Google Analytics en WordPress. Saber cómo tu audiencia interactúa con tu página web es fundamental para tu negocio. La mejor manera de conocer a tu audiencia es a través de tus estadísticas de visitas, y esto es lo que Google Analytics proporciona GRATIS.

En este artículo, compartiremos por qué es importante Google Analytics, y cómo puedes instalar fácilmente Google Analytics en tu página web en WordPress (paso a paso).

En primer lugar, te explicaremos por qué Google Analytics es importante y cómo puede ayudarte a hacer crecer tu página web. Después de eso, le mostraremos cómo registrarse para obtener una cuenta de Google Analytics y diferentes formas de instalarlo en tu página de WordPress. Por último, te explicaremos cómo ver tus informes de tráfico en Google Analytics.

¿Por qué es importante Google Analytics para los bloggers?

Una vez que empiezas un blog, tu meta #1 es conseguir más tráfico y suscriptores. Google Analytics te ayuda a tomar decisiones basadas en datos mostrándote las estadísticas que importan. Puedes ver:

¿Quién visita tus páginas web?

Esta parte de la analítica responde cuál es la ubicación geográfica de tu audiencia, qué navegador usó el usuario para visitar tu sitio y otras informaciones importantes tales como resolución de pantalla, soporte para JavaScript, lenguaje y mucho más.

Estos datos son extremadamente útiles y pueden ayudar de muchas maneras. Al obtener unas estadísticas personalizadas, puedes utilizar los datos del usuario para verificar que tu sitio sea compatible con tu audiencia.

Si la mayoría de tus usuarios visitan tu web desde un navegador en concreto, entonces deberías asegurarte que en ese navegador tu web no genera nigún problema. Si la mayoría de tus usuarios tienen resoluciones de pantalla de 1280, asegúrate de que tu diseño sea compatible con esa resolución o menor.

¿Qué hace la gente cuando está en tu sitio web?

Puedes hacer un seguimiento de dónde van los usuarios en tu página web, cuánto tiempo permanecen en ella y cuál es el porcentaje de rebote (el porcentaje de usuarios que salen de tu página web en la primera visita).

Usando esta información, puedes disminuir el porcentaje de rebote y aumentar tus vistas de página.

También puedes encontrar tus artículos más populares, artículos que no van muy bien, y qué tipo de contenido están buscando tus usuarios.

¿Cuándo visita la gente tu sitio web?

Al ver las horas más populares del día para tu página web, puedes elegir la hora en la que deseas publicar tu contenido. Si esa zona horaria no es compatible con la tuya, entonces puedes programar tu entrada para que cumpla esa hora.

¿Cómo encuentra la gente tu página web?

Esta sección de la analítica te muestra de dónde vinieron los usuarios (por ejemplo: Motores de Búsqueda, Enlaces Directos, Enlaces de Referencia de otro sitio).

También te muestra qué porcentaje de tus visitantes proceden de cada una de estas fuentes. Google Analytics te ofrece el detalle de cada una de estas categorías. Si es la categoría del motor de búsqueda, entonces te muestra qué motor de búsqueda te ha dado más tráfico, Google, Yahoo, Bing, etc.

El analisis de las fuentes de referencia te muestra en qué sitios necesitas trabajar más. Si tu principal fuente de referencia es Facebook, entonces necesitas tener contenido exclusivo de Facebook para que tu audiencia de Facebook se sienta especial.

Si tu principal fuente de referencia es un sitio web externo, entonces podrías considerar tener una asociación con ese sitio web (intercambio de mensajes de invitados u otra cosa).

¿Cómo interactúan las personas con tu contenido?

Google Analytics muestra cómo interactúan los usuarios con el contenido de tu página web. Te muestra qué porcentaje de los usuarios han hecho clic en cada enlace de tu sitio y mucho más.

Puedes realizar tests A/B creando experimentos de contenido en Google Analytics para entender qué es lo que mejor funciona para alcanzar tus objetivos.

Al ver la interacción del usuario, puede trabajar tu contenido con tus usuarios. Al ver las respuestas a las preguntas anteriores, puedes concentrarte en las estrategias que funcionan para tu sitio y evitar las que no funcionan.

En pocas palabras, elimina las suposiciones y concéntrate en las estadísticas que importan, para que puedas tomar decisiones basadas en los datos.

Cómo registrarte en Google Analytics

Google Analytics está disponible de forma gratuita y todo lo que necesitas es una cuenta de Google o Gmail para registrarte. El proceso de registro es muy sencillo, sigue las siguientes instrucciones paso a paso para crear tu cuenta de Google Analytics.

Paso 1: Primero debes acceder con tu gmail en Google Analytics.

Se te pedirá que accedas con tu cuenta de Google. Si ya tienes una cuenta de Google o Gmail, puedes utilizarla para iniciar sesión. De lo contrario, puede crear una cuenta de Google o Gmail.

acceder con tu gmail en Google Analytics

Paso 2: Ahora comienza el verdadero registro en Google Analytics.

Una vez que inicies sesión con tu cuenta de Gmail, se te pedirá que accedas a una pantalla como la que se muestra a continuación. Aquí es donde te registrarás en Google Analytics con tu cuenta de Gmail.

registro en Google Analytics

Paso 3: Introducir datos de la cuenta

En la siguiente pantalla, se te dará la opción de elegir entre un sitio web o una aplicación móvil. Asegúrate de seleccionar el sitio web.

A continuación, deberás introducir el nombre de la cuenta (será el nombre del perfil de Google Analytics para este sitio web), el nombre del sitio web, la URL del sitio web, el país y la zona horaria.

Introducir datos de la cuenta

Una vez que hayas introducido esta información, haz clic en el botón Obtener ID de seguimiento. Se te mostrarán las condiciones de uso y el servicio de Google Analytics con los que debes estar de acuerdo, así que haz clic en el botón «Acepto».

Paso 4: Código de seguimiento de Google Analytics

Ahora se te mostrará el código de seguimiento de Google Analytics. Puedes copiar este código de seguimiento porque necesitarás introducirlo en tu sitio de WordPress dependiendo del método que utilices a continuación.

Código de seguimiento de Google Analytics

Cómo instalar Google Analytics en WordPress

Hay varias maneras de configurar Google Analytics en WordPress. Pero en este artículo nos vamos a centrar en la forma más sencilla y gratis que hay.

Google Analytics para WordPress de MonsterInsights

MonsterInsights es el plugin de Google Analytics más popular para WordPress. Más de 1 millón de páginas web lo utilizan, incluyendo Bloomberg, PlayStation, Zillow, y más.

Es la forma más fácil y con diferencia la mejor de añadir Google Analytics a WordPress (para todos los usuarios principiantes).

MonsterInsights está disponible como plugin premium de pago y como versión gratuita. En este tutorial, usaremos la versión gratuita de MonsterInsights.

Puede usar la versión de MonsterInsights Pro si quieres características más avanzadas como seguimiento de comercio electrónico, seguimiento de anuncios, seguimiento de usuarios, etc.

Vamos a empezar.

Lo primero que tienes que hacer es instalar y activar el plugin MonsterInsights.

Una vez activado, el plugin añadirá un nuevo elemento de menú llamado ‘Insights’ al menú de administración de WordPress. Al hacer clic en él, aparecerá el asistente de configuración de MonsterInsights.

instalar y activar el plugin MonsterInsights

Primero, se te pedirá que elijas una categoría para tu sitio web (un sitio web empresarial, un blog o una tienda online). Selecciona uno y luego haz clic en el botón ‘Guardar y continuar’.

A continuación, tienes que hacer clic en el botón ‘Conectar MonsterInsights‘.

Connect MonsterInsights

Esto te mostrará una ventana emergente que te llevará a las cuentas de Google donde se te pedirá que accedas o que selecciones una cuenta de Google si ya lo has hecho.

accedas o que selecciones una cuenta de Google

Haz clic en el botón «Permitir» para continuar.

El paso final es seleccionar el perfil que desea rastrear. Debes seleccionar tu sitio web y luego hacer clic en el botón ‘Autenticación completa’ para continuar.

Debes seleccionar tu sitio web

MonsterInsights instalará Google Analytics en tu sitio web. Después se te pedirá que selecciones la configuración recomendada para tu sitio web.

recommended settings

La configuración predeterminada funcionará en la mayoría de los sitios web. Si usas un plugin de enlace de afiliado, entonces necesitas añadir la ruta que usas para encubrir los enlaces de afiliado. Esto te permitirá realizar un seguimiento de tus enlaces de afiliado en Google Analytics.

Haz clic en el botón Guardar y continuar para guardar la configuración.

A continuación, MonsterInsights te mostrará los complementos de pago a los que puedes acceder si te actualizas a PRO. Puede simplemente hacer clic en el botón «Guardar y continuar» para omitir este paso.

Y ya está, esto es todo lo que tienes que hacer para instalar y configurar Google Analytics en tu sitio de WordPress. Recuerda que Google Analytics tardará un tiempo en mostrar tus estadísticas.

Si te ha gustado este artículo, puedes compartirlo en las redes sociales y ayudar a otras personas a que puedan instalar Google Analytics en WordPress 🙂

Como crear un diseño web responsive en Grid con CSS

diseño web responsive en Grid con CSS

 

Esta es una guía paso a paso para crear un diseño web responsive en Grid con CSS.

El diseño web responsive en Grid está creciendo en el soporte del navegador cada día. La rápida adopción del formato Grid ha sido realmente notable.

Antes de que lleguemos a hacer un diseño de portafolio responsive en formato Grid, vamos a aclarar un par de cosas: El formato Grid no es un sustituto de Flexbox. Ni siquiera es un reemplazo. De hecho, puede que te des cuenta de que hemos estado usando Flexbox para hacer cosas que el formato Grid hace mucho mejor. Pero en lugar de pensar en términos de sustitución, podemos pensar en términos de combinación.

Imagina un sándwich de queso y jamón york. El queso y el jamón son muy buenas por sí solas, pero cuando se juntan, nace una nueva cosa y ocurre la magia.

Así son nuestras herramientas de diseño web. Son excelentes en las cosas que hacen individualmente, pero cuando se combinan, la magia sucede y podemos crear nuevos y emocionantes diseños. En este caso, haremos un desarrollo web propio con el formato Grid y Flexbox.

01. Configura tu código HTML

Configura tu código HTML

Nuestro diseño no parece gran cosa, pero ya tenemos en su lugar el esqueleto con estos seis artículos.

En este tutorial, vamos a usar CSS Grid y Flexbox juntos para crear un diseño de portafolio que responda a tus necesidades. Cada una de estas cajas tiene un tamaño diferente, algunas de ellas se extienden a través de filas y cada caja tiene un título que se encuentra en la parte inferior. Usaremos algunas de las grandes herramientas de alineación que vienen con Flexbox para hacer que eso suceda.

Empezaremos por establecer nuestro html.

<ul class=”boxes”>
  <li>
    <div class=”boxes__text-wrapper”>
      <h2>Titulo del portafolio</h2>
      <p>Aquí la descripción del portafolio</p>
    </div>
  </li>
</ul>

Duplicaremos ese elemento y todo lo que hay en él seis veces para que podamos jugar con él. En caso de que te lo estés preguntando, he decidido usar el elemento ul porque es una lista de entradas. Si lo deseas, puedes usar lo que te parezca correcto.

Dentro del ítem de la lista tenemos un div con la clase .boxes__text-wrapper que contendrá el título del portafolio y la descripción que lo acompaña.

02. Escribe los estilos que necesitas

Escribe los estilos que necesitas

He establecido nuestra fuente en algo un poco más agradable y he eliminado el margen por defecto de los encabezados y párrafos.

Ahora vamos a establecer algunos estilos de base con los que trabajar.

body {
  font-family: Avenir, sans-serif;
  margin: 2rem auto;
  width: 95%;
}
h2,
p {
  margin: 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.boxes > * {
  padding: .5rem;
  background-color: #333;
  color: white;
}

He cambiado la fuente para que sea Avenir. Eliminaremos el margen de nuestro encabezado y párrafo, y resetearemos la lista desordenada. También le daré a cada elemento de la lista algunos estilos predeterminados para ayudarnos a ver dónde está cada uno.

03. Configura tu diseño web responsive en Grid

Configura tu diseño web responsive en Grid

Con sólo tres líneas, hemos añadido un margen entre nuestros elementos de Grid y los hemos hecho un poco más altos.

Primero queremos construir nuestro diseño para móviles. Configurar nuestra cuadrícula en pantallas pequeñas es tan fácil como esto:

.boxes {
  display: grid;
  grid-auto-rows: minmax(125px, auto);
  grid-gap: .5rem;
}

Grid apilará nuestros artículos uno encima del otro porque por defecto sólo hay una columna. Vamos a crear un espacio entre cada item del portafolio mediante el uso de grid-gap, esto nos permite añadir un margen entre filas y columnas.

Olvídate de añadir un margen a las columnas sólo para necesitar selectores complejos; los márgenes sólo aparecen entre columnas o filas, nunca antes o después de una columna o row.grid-gap es la abreviatura de grid-column-gap y grid-row-gap. Normalmente usamos la abreviatura a mano, pero vamos a sobreescribir ambas a medida que el navegador crece, así que usaremos la abreviatura.

A continuación, utilizaremos las filas automáticas de cuadrícula para indicar a nuestro contenedor de cuadrícula la altura de las filas nuevas. Grid creará nuevas filas para colocar todo nuestro contenido. Podemos controlar el tamaño de estas filas creadas automáticamente con la propiedad grid-auto-rows. Estamos usando una nueva función disponible para nosotros: minmax(). Con minmax() podemos especificar un tamaño mínimo y un tamaño máximo.

Con nuestro código estamos diciendo que queremos que nuestras filas tengan un mínimo de 120px y un máximo de auto. Estamos usando auto aquí porque queremos que nuestras filas crezcan si el contenido lo justifica.

04. Configurar compatibilidad con navegadores de gran tamaño

compatibilidad con navegadores de gran tamaño

Nuestra cuadrícula está tomando forma! Tenemos seis columnas con las que trabajar y menos márgenes entre los elementos de nuestra cuadrícula.

Vamos a configurar nuestra página para que cuando nuestro navegador sea 40em o mayor, nuestro contenedor de cuadrícula tenga seis columnas de una fracción cada una.

@media screen and (min-width: 40em) {
  .boxes {
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 2px;
  }
}

grid-template-columns es la propiedad que usamos para indicar a nuestra cuadrícula cuántas columnas deben existir. Acepta todas las unidades de longitud que conocemos y amamos como rem, em, px, porcentajes, vw, vh y fr.

El fr es una nueva unidad que obtenemos con el formato CSS Grid. Con él, podemos decirle al navegador que haga cálculos en vez de nosotros .

Al decirle al navegador que cree seis columnas de una fracción, el navegador calculará el ancho de nuestro contenedor de cuadrícula y lo dividirá en seis columnas iguales. Además, como Grid es inteligente, sólo dividirá el espacio restante después de calcular el margen que hemos especificado.

05. Estilo de los ítems individualmente

Estilo de los ítems individualmente

El café hace que todo se vea mejor, ¿no? También un sutil degradado hace que nuestro título y descripción destaquen.

Nuestros items del portafolio parecen un poco monótonos como cajas grises. Añadamos una imagen de fondo, consigamos que nuestros títulos se muestren en la parte inferior de estas cajas y añadamos un degradado para que nuestro título destaque.

.boxes li {
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8)),
    url(path/to/image);
  background-size: cover;
  display: flex;
  align-items: flex-end;
}

Esta imagen de fondo era una imagen libre de Unsplash, pero puedes usar cualquier imagen que desees. También estoy trayendo Flexbox a la mezcla para alinear nuestro texto al fondo de nuestras cajas. Aún no lo verás, pero a medida que coloquemos cada caja diferente, lo verás funcionar.

06. Colocar elementos en la cuadrícula

Colocar elementos en la cuadrícula

Grid hace que sea fácil dimensionar nuestros elementos de Grid como queramos. Pero esto es sólo el principio

Desafortunadamente, Grid no tiene una manera de colocar automáticamente los elementos en el diseño de la cuadrícula que vimos al principio. Afortunadamente para nosotros, sin embargo, Grid nos da las herramientas para hacerlo manualmente con bastante facilidad. En este tutorial, usaremos nth-child para colocar cada elemento de la tabla. En un sitio web de producción, aconsejo utilizar una clase que, si se planifica correctamente, permita automatizar diseños como éste en un sitio con mucho contenido.

Empecemos con nuestro primer artículo.

@media screen and (min-width: 40em) {
  .boxes li:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: span 3;
  }
}

Estaremos poniendo todos nuestros estilos de posición dentro de la consulta de contenidos que escribimos anteriormente porque queremos que este diseño ocurra después de que nuestro navegador tenga 40em o más. Con el enésimo child estamos apuntando al primer elemento de la lista. CSS Grid nos permite colocar fácilmente nuestros artículos con columna de cuadrícula y fila de cuadrícula. Hay muchas maneras diferentes de especificar dónde deben estar los artículos, pero aquí estamos diciéndole a nuestro artículo que empiece en la línea uno de la columna y se extienda por todo el contenedor con -1.

Luego, con la fila de cuadrícula, le decimos al ítem que abarque tres filas. ¿Cómo sabemos que tres filas serán del tamaño que queremos? Bueno, hemos especificado el tamaño de estas filas con cuadrículas automáticas hace unos momentos, y si no estamos contentos con ellas podemos cambiar el tamaño mínimo.

Coloquemos el resto de nuestros artículos.

@media screen and (min-width: 40em) {
  .boxes li:nth-child(2) {
    grid-column: span 2;
    grid-row: span 7;
  }

  .boxes li:nth-child(3) {
    grid-column: span 4;
    grid-row: span 3;
  }

  .boxes li:nth-child(4) {
    grid-column: span 2;
    grid-row: span 4;
  }

  .boxes li:nth-child(5),
  .boxes li:nth-child(6) {
    grid-column: span 2;
    grid-row: span 2;
  }
}

¿No es increíble cuánto control nos da el formato Grid? Con sólo unas pocas líneas de código, podemos crear un diseño completamente responsive que no se romperá si se añaden más elementos.

Claro, pueden parecer un poco torpes porque sólo ocuparán una columna y una fila de la cuadrícula por defecto, pero esto no rompe nuestro diseño. Si estuviéramos haciendo esto con los anchos y alturas fijos, estaríamos en un lío si se añadiera más contenido.

Nuestro diseño está terminado! ¿No es increíble? La cuadrícula nos permite colocar nuestros artículos fácilmente en dos dimensiones.

Un pequeño comentario sobre los navegadores antiguos en diseño web responsive en Grid

Bien, es hora de dirigirse al elemento de la celda. ¿Qué hay de los navegadores antiguos? La respuesta a esta pregunta es la misma que para cualquier característica nueva en CSS: Hay que usar las consultas de características y aceptar la secuencia. Las consultas de características están muy bien soportadas, y donde no lo están, podemos colocar nuestra solución de emergencia en primer lugar. Por ejemplo, escribiríamos algo parecido a:

.your-selector {
  display: flex;
}

/* Your Grid code */
@supports (display: grid) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem 2rem;
}

Escribir nuestro código de esta manera significa que si el navegador entiende el diseño de la cuadrícula, lo usará en lugar de Flexbox. Además, debido a que estamos adoptando la combinación, los navegadores que no entienden las consultas de características las ignoran y ya tienen la información que necesitan. Puede que necesitemos planear cómo escribimos nuestros estilos un poco más de lo habitual, pero al hacerlo podemos crear diseños atractivos con soluciones alternativas adecuadas.

Diseño web responsive en Grid CSS en el futuro

Además, a medida que pase el tiempo, sólo habrá más y más soporte para CSS Grid. Piensa en lo genial que sería borrar más tarde nuestras correcciones y dejar todos los CSS relacionados con Grid. A medida que aprendas más sobre Grid, te darás cuenta de que hace muchas cosas que hacemos ahora mismo con muchas menos líneas de CSS.

 

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