Ian Hernandez, Author at Guías para Sitios Web, Tips & Conocimiento

Cómo Aprender HTML En El 2024

Ian Hernandez — Mon, 03 Jun 2024 14:00:00 +0000

Imagina que tienes una idea brillante para tu sitio web dinámico, ya sea un blog, una tienda en línea o un portafolio con elementos dinámicos.

Sabes exactamente cómo quieres que se vea, y dado que WordPress es utilizado por el 43.2% de los sitios web, decides comenzar con WordPress.

Pero notas algunas limitaciones en los diseños existentes.

Qué pasaría si pudieras:

Personalizar el diseño para que sea exactamente como te gusta
Actualizar y personalizar tu sitio web sobre la marcha sin depender de otra persona
Crear contenido atractivo que se destaque de la competencia
Solucionar problemas y realizar correcciones rápidas, ahorrando tiempo y dinero
Comunicarte de manera más efectiva con tu equipo técnico o colaboradores

Las técnicas de HTML y diseño web receptivo te permiten hacer todo esto y más, asegurando que tu sitio web se adapte a todas las pantallas de dispositivos.

Puede que no tengas tiempo para aprender lenguajes de codificación complejos o el presupuesto para contratar a un desarrollador web para cada tarea pequeña, ¡pero el HTML es mucho más fácil de lo que piensas!

En esta guía, exploraremos los muchos beneficios de aprender HTML, analizaremos quién puede beneficiarse de esta habilidad (spoiler: ¡todos!), y veremos los mejores recursos gratuitos para ayudarte a aprender HTML a partir de hoy.

Una Introducción a HTML

HTML (HyperText Markup Language), un lenguaje de marcado estándar creado por Tim Berners-Lee, es el fundamento de cada sitio web y uno de los lenguajes de programación más populares.

El código indica a los navegadores cómo estructurar y mostrar contenido como texto, imágenes y enlaces. Dado que HTML es el fundamento del contenido en línea, es una habilidad valiosa de aprender.

Aunque puedes diseñar completamente un sitio web sin código, saber HTML puede ayudarte a personalizar páginas web desde cero. Puedes usarlo para organizar cada elemento del sitio web, incluidos elementos dinámicos como imágenes, texto y tablas.

Por qué Deberías Considerar Aprender HTML

HTML es el bloque de construcción fundamental de la web. Todos los sitios web usan HTML o un derivado de él. Entender HTML te dará superpoderes al usar herramientas como Divi o Gutenberg en WordPress, o al crear plantillas de correo electrónico para campañas de marketing.

El HTML “marca” las palabras y les da significado. HTML es importante para la accesibilidad porque proporciona la estructura semántica en la que las tecnologías de asistencia dependen para navegar e interpretar eficazmente el contenido web para usuarios con discapacidades.

El HTML es importante para SEO, ya que los motores de búsqueda también utilizan esta estructura semántica para rastrear e indexar fácilmente tu sitio web, lo que ayuda a mejorar la visibilidad y el ranking del sitio en los resultados de búsqueda.

Entender HTML abre la puerta a numerosas oportunidades laborales en la industria tecnológica. Según la Oficina de Estadísticas Laborales, se proyecta que el empleo para desarrolladores web crecerá un 16% entre 2022 y 2032, mucho más rápido que el promedio en todas las ocupaciones. Esta habilidad fundamental es esencial no solo para el desarrollo web, sino también para roles en marketing digital, diseño UX/UI y gestión de contenido.

La familiaridad con HTML te ayuda a crear, modificar y solucionar problemas de tu sitio web sin depender de desarrolladores profesionales para cada cambio o problema. Esto te ahorra tiempo y dinero mientras te da un mayor control sobre la apariencia y funcionalidad de tu sitio web.

Entender HTML también te prepara para aprender otros lenguajes de programación esenciales, como CSS (Cascading Style Sheets) y JavaScript.

[glossary_term_es title=”JavaScript” text=”JavaScript es un lenguaje de programación que te permite crear cosas dentro de una página web o en un servidor web. Cuando ves o visitas una página web, el código JavaScript se ejecuta automáticamente.”]

Estos lenguajes trabajan mano a mano con HTML para crear sitios web dinámicos e interactivos.

Un buen dominio de HTML te diferencia de los demás en tu campo, especialmente aquellos en los que la codificación no es una habilidad requerida. Te destacarás como fundador, comercializador o empleado no técnico que puede crear y modificar contenido web.

Comenzando con HTML

Ahora que conoces los beneficios de aprender HTML, es posible que te preguntes por dónde empezar. La buena noticia es que no necesitas software sofisticado ni cursos costosos para comenzar.

Todo lo que necesitas es una configuración básica de software, que incluya una computadora con un navegador web y un editor de código en línea como Notepad o TextEdit, y estarás listo para iniciar tu viaje de desarrollo.

Paso 1: Comprender Los Conceptos Básicos De La Estructura De HTML

Los documentos HTML comprenden una serie de elementos, cada uno rodeado por etiquetas de apertura y cierre que indican al navegador qué contenido contiene:

Las etiquetas de apertura se escriben con el nombre del elemento dentro de corchetes angulares, como esto:
.
El contenido existe dentro de las etiquetas, como un párrafo o algún texto.
Las etiquetas de cierre son similares, pero incluyen una barra diagonal antes del nombre del elemento, como esto:
.

Aquí tienes un ejemplo de cómo un elemento de bloque básico en una estructura HTML muestra párrafos en una página web.

Cuando abres una etiqueta en el código HTML, debes cerrarla de manera similar.

A medida que aprendes HTML, es esencial comprender cómo funcionan juntos los elementos comunes y complejos para crear la estructura de una página web.

Un documento HTML típico incluirá:

Una declaración en la parte superior para especificar la versión de HTML que estás utilizando.
Un elemento que contiene todo el documento.
Un elemento para metadatos como el título de la página y los enlaces de hojas de estilo.
Un elemento que contiene todo el contenido visible en la página.

Aquí tienes un fragmento de código simple de la estructura de un documento HTML:

Observa cómo cada elemento tiene una etiqueta de apertura y una etiqueta de cierre correspondiente, y cómo los componentes están anidados dentro unos de otros para crear la estructura del documento.

Paso 2: Aprende Los Elementos Básicos de HTML Para La Estructura y El Contenido

Concéntrate en dominar los elementos fundamentales que forman la mayoría de las páginas web. Estos elementos te ayudan a estructurar tu contenido de manera lógica, facilitando su comprensión tanto para humanos como para motores de búsqueda.

Algunos elementos básicos de HTML para dominar incluyen elementos de anclaje, que pueden ayudar a crear tutoriales interactivos y enlazar con tutoriales en línea:

Encabezados (
a
): Los encabezados son elementos esenciales de nivel de bloque que ayudan a generar una estructura jerárquica para tu contenido.
Párrafos (
): Los párrafos dividen tu texto en fragmentos legibles, como el texto espaciado que ves en esta página.
Tipos de Listas (

Tailwind Vs. Bootstrap: ¿Qué Framework CSS Necesitas?

Ian Hernandez — Wed, 29 May 2024 14:00:00 +0000

Las primeras impresiones importan, y el 94% de las primeras impresiones están relacionadas con el diseño visual. Esto significa que casi todo el impacto inicial de tu sitio web depende de cómo se ve.

Hay más que simplemente gustar o no gustar tu diseño.

El 46.1% de los usuarios juzgan la credibilidad de tu marca basándose únicamente en el atractivo visual de tu sitio web.

¿La conclusión? Necesitas un sitio web visualmente atractivo, simplemente no hay manera de evitarlo. Aquí es donde entran en juego los frameworks de CSS.

[glossary_term_es title=”CSS” text=”Las hojas de estilo en cascada (o CSS, por sus siglas en inglés) es un lenguaje de programación importante que se utiliza para diseñar páginas web. Usar el CSS te puede ayudar a crear páginas web hermosas al permitirte modificar la apariencia de varios de sus elementos, incluyendo los estilos de fuentes, colores, los diseños y más.”]

Estas poderosas herramientas pueden ayudarte a crear diseños impresionantes y receptivos de manera rápida y eficiente. Entre la multitud de opciones, destacan dos frameworks: Tailwind CSS y Bootstrap.

Pero, ¿cuál deberías elegir para tu próximo proyecto?

En este artículo, profundizaremos en el mundo de Tailwind vs. Bootstrap, explorando sus fortalezas, debilidades y características únicas.

Al final, tendrás una comprensión clara de qué framework se adapta mejor a tus necesidades, capacitándote para crear sitios web que no solo cautiven a los usuarios, sino que también establezcan la credibilidad de tu marca.

¿Qué Son los Frameworks CSS?

Antes de adentrarnos en los detalles de Tailwind vs. Bootstrap, retrocedamos un paso y recordemos de qué se tratan los frameworks de CSS.

Básicamente, los frameworks de CSS son colecciones preescritas de código CSS que simplifican y aceleran el desarrollo de sitios web.

En lugar de empezar desde cero cada vez, puedes utilizar estos frameworks para crear diseños hermosos y receptivos con un esfuerzo mínimo. No podemos subestimar la importancia del diseño receptivo. De hecho, según un estudio de GoodFirms, el diseño no receptivo es la razón principal por la que las personas pueden abandonar tu sitio web.

Piénsalo como tener una caja de herramientas llena de todo lo esencial que necesitas para construir una casa. Siempre podrías salir y comprar cada herramienta individualmente, ¿pero por qué no ahorrarte la molestia y obtener todo en un paquete conveniente?

Eso es lo que hacen los frameworks de CSS para el desarrollo web.

Bootstrap: El Clásico Confiable

Primero, hablemos de Bootstrap.

Bootstrap ha estado presente desde 2011 y se ha convertido en un elemento básico en el mundo del desarrollo web. Es como la comida reconfortante de los frameworks de CSS: confiable, familiar y siempre satisfactoria.

Una de las mayores ventajas de Bootstrap es su extensa biblioteca de componentes preconstruidos.

Fuente

Desde barras de navegación y botones hasta carruseles y modales, Bootstrap te cubre. Estos componentes están diseñados para funcionar perfectamente juntos, por lo que puedes crear un sitio web coherente y profesional en poco tiempo.

¡Pero espera, hay más! Bootstrap también viene con un potente sistema de cuadrícula que facilita la creación de diseños receptivos. Con solo algunas clases, tu sitio web puede lucir fantástico en cualquier dispositivo, ya sea una computadora de escritorio, una tableta o un teléfono inteligente.

Otra razón por la que Bootstrap es tan popular es su extensa documentación y soporte comunitario. Si alguna vez te quedas atascado o tienes una pregunta, es probable que alguien más ya la haya hecho (y respondido) en Stack Overflow o los foros de Bootstrap. Además, con tantos desarrolladores usando Bootstrap, encontrarás un montón de tutoriales, plantillas y complementos para ayudarte en el camino.

Por supuesto, ninguna herramienta es perfecta, y Bootstrap tiene sus limitaciones. Algunos desarrolladores argumentan que es demasiado opinionado, lo que significa que puede ser difícil de personalizar si quieres alejarte demasiado de los estilos predeterminados. Otros señalan que el tamaño del archivo de Bootstrap puede ser bastante grande, lo que puede ralentizar los tiempos de carga de tu sitio web.

Tailwind CSS: El Nuevo Participante en Escena

Ahora, pasemos a Tailwind CSS. Este framework relativamente nuevo ha estado causando sensación en la comunidad de desarrollo web, y por buenas razones.

Fuente

A diferencia de Bootstrap, que depende en gran medida de componentes preconstruidos, Tailwind toma un enfoque diferente. Proporciona un conjunto de clases de utilidad de bajo nivel que puedes usar para construir tus propios diseños personalizados.

Esto significa que tienes un control completo sobre el aspecto y la sensación de tu sitio web, sin estar limitado por decisiones de diseño de otra persona. Sin embargo, no encontrarás muchas plantillas preconstruidas para secciones de páginas.

Entonces, las clases de utilidad de Tailwind pueden parecer un poco abrumadoras.

En lugar de usar nombres de clases semánticas como btn-primary, verás cosas como bg-blue-500 y px-4. A medida que te acostumbres, empezarás a apreciar la flexibilidad y el poder que conlleva este enfoque.

Una de las mayores ventajas de Tailwind es su capacidad para crear diseños receptivos con facilidad. Puedes especificar fácilmente diferentes estilos para diferentes tamaños de pantalla, todo sin salir de tu HTML. Esto hace que sea increíblemente fácil crear diseños complejos y adaptables que se vean geniales en cualquier dispositivo.

Otra cosa que distingue a Tailwind es su enfoque en el rendimiento. El framework está diseñado para ser lo más ligero posible, con una huella mínima que no ralentizará tu sitio web. Además, con características como la eliminación de árboles y la purga, puedes asegurarte de que solo las clases que realmente uses terminen en tu archivo CSS final.

Por otro lado, al igual que Bootstrap, Tailwind tampoco es perfecto.

Algunos desarrolladores encuentran la curva de aprendizaje un poco más empinada, especialmente si están acostumbrados a frameworks de CSS más tradicionales. Y debido a que Tailwind depende tanto de clases de utilidad, tu HTML puede empezar a sentirse un poco abarrotado y más difícil de leer.

Entonces, ¿cómo seleccionas el framework correcto?

Seleccionando el Framework Correcto Para Tu Proyecto

Profundicemos un poco más en cómo elegir el framework correcto para tu proyecto. Basándonos en lo que discutimos anteriormente, la decisión depende de tus necesidades y objetivos específicos. Para ayudarte a tomar la decisión correcta, exploremos algunos factores clave.

Complejidad y Escalabilidad del Proyecto

Una de las primeras cosas a considerar es la complejidad y escalabilidad de tu proyecto. Si estás construyendo un sitio web simple de una sola página o un blog personal pequeño, Bootstrap podría ser la opción adecuada. Sus componentes preconstruidos y su sistema de cuadrícula directo hacen que sea fácil ponerse en marcha rápidamente.

Sin embargo, si estás trabajando en una aplicación más compleja o un sitio web a gran escala con mucha funcionalidad personalizada, Tailwind podría ser una mejor opción. Su enfoque basado en utilidad te permite crear diseños altamente personalizados que pueden escalar a medida que tu proyecto crece.

Aquí tienes un ejemplo de cómo podrías crear un botón simple en Bootstrap vs. Tailwind:

Bootstrap:

Tailwind:

Observa que el ejemplo de Bootstrap es más conciso y depende de una clase predefinida (btn-primary), mientras que el ejemplo de Tailwind utiliza una combinación de clases de utilidad para lograr el mismo resultado.

Esta flexibilidad puede ser especialmente valiosa a medida que tu proyecto se vuelve más complejo y requiere un control más granular sobre los estilos.

Nota: Aunque puedes personalizar los estilos de Bootstrap, es más trabajo y es posible que simplemente escribas el CSS tú mismo. Tailwind es bastante útil en este caso debido a su flexibilidad incorporada.

Flexibilidad y Consistencia en el Diseño

Si estás trabajando con un equipo de diseño o siguiendo estrictas pautas de marca, el enfoque de utilidad primero de Tailwind puede ser perfecto para ti.

Te permite crear diseños personalizados que coincidan con tus especificaciones exactas, sin estar limitado por componentes o estilos predefinidos.

Por otro lado, si buscas un aspecto y sensación más estandarizados y consistentes en todo tu sitio, los componentes preconstruidos de Bootstrap pueden ser una buena opción. Proporcionan una base sólida que puedes personalizar según sea necesario, manteniendo al mismo tiempo un diseño general coherente.

Aquí tienes un ejemplo de cómo podrías crear un componente de tarjeta con un botón en Bootstrap vs. Tailwind:

Bootstrap:


    
    Card title
    Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere

Tailwind:



  
      
  
  
      Card title
      
        Some quick example text to build on the card title and make up the bulk of the card's content.
      
  
  
      
      Go somewhere

Nuestra opinión: Tailwind gana esta ronda por su capacidad de personalización directa desde el principio. Si estás comenzando con el diseño, es posible que no notes mucho las sutilezas del diseño al usar Bootstrap. Pero a medida que comienzas a crear componentes más complejos, las limitaciones comienzan a mostrarse, y aquí es donde las clases de utilidad de Tailwind pueden hacer las cosas mucho más fáciles a largo plazo.

Arriba, verás que el ejemplo de Bootstrap utiliza la clase de tarjeta predefinida y sus subcomponentes asociados (card-img-top, card-body, etc.) para crear un diseño de tarjeta consistente.

El ejemplo de Tailwind, por otro lado, utiliza una combinación de clases de utilidad para lograr un resultado similar, pero con un control más detallado sobre los estilos específicos aplicados.

Curva de Aprendizaje y Experiencia del Desarrollador

También vale la pena considerar la curva de aprendizaje y la experiencia del desarrollador asociada con cada framework. Si tú o tu equipo ya están familiarizados con Bootstrap, podría tener sentido seguir con lo que conocen.

Bootstrap cuenta con una gran comunidad y una amplia cantidad de recursos disponibles, lo que puede facilitar comenzar y encontrar respuestas a preguntas comunes.

Por otro lado, Tailwind tiene una curva de aprendizaje un poco más pronunciada, especialmente si no estás acostumbrado a pensar en términos de clases de utilidad. Sin embargo, una vez que le tomas la mano, muchos desarrolladores encuentran que el enfoque de Tailwind es más intuitivo y eficiente a largo plazo.

Aquí tienes un ejemplo de cómo podrías crear una barra de navegación receptiva en Bootstrap vs. Tailwind:

Bootstrap:


  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon">span>
    button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Linka>
        li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><hr class="dropdown-divider">li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
        li>
      ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Searchbutton>
      form>
    div>
  div>
nav>

Tailwind:


  
    
    Tailwind
  
  
    
  
  
    
       Docs 
       Examples 
       Blog 
    
    
      Download

El ejemplo de Bootstrap utiliza una combinación de clases predefinidas (navbar, navbar-expand, navbar-light, etc.) para crear una barra de navegación receptiva con un botón de alternancia para pantallas más pequeñas. El ejemplo de Tailwind, en contraste, utiliza una combinación de clases de utilidad para obtener resultados similares, pero con un mayor nivel de control sobre el estilo y el diseño.

Nuestra opinión: Bootstrap es mucho más fácil de aprender para principiantes. El único inconveniente de usar Bootstrap es que puedes crear sitios web que se parezcan a otros sin personalizar los estilos. Con Tailwind, los estilos son independientes de los componentes, lo que proporciona mucha más flexibilidad; es decir, obtienes diseños bastante únicos simplemente combinando las clases existentes.

Consideraciones de Rendimiento

Teniendo en cuenta que un tiempo de carga de uno a tres segundos aumenta las tasas de rebote en un 32%, tiene sentido elegir el framework más rápido posible.

La configuración predeterminada de Tailwind viene con 36.4KB minificados y comprimidos con gzip. En comparación con Bootstrap, que tiene 22.1KB, Tailwind es 14.3KB más pesado.

Puedes pensar, “Bueno, parece que ya tenemos un ganador, ¿verdad?”

No tan rápido.

Tailwind genera tus estilos en función de las clases de utilidad específicas que uses en tu HTML, en lugar de incluir un conjunto grande de estilos predefinidos que pueden o no ser utilizados.

Entonces, si bien Tailwind es más pesado por defecto, ofrece excelentes técnicas de optimización de rendimiento que ayudan a que funcione con menos líneas de código CSS y un tamaño de archivo mucho más pequeño.

Además, Tailwind te permite preseleccionar el número de tamaños de pantalla a los que deseas atender. Por ejemplo, si solo deseas atender adecuadamente a la pantalla de una computadora portátil y a los usuarios móviles, solo elige esos.

Así es como los tamaños de pantalla pueden afectar aún más el tamaño de tu archivo de hojas de estilo:

5 tamaños de pantalla (predeterminado): 36.4KB
4 tamaños de pantalla: 29.4KB
3 tamaños de pantalla: 22.4KB
2 tamaños de pantalla: 15.4KB
1 tamaño de pantalla: 8.4KB

Para mejorar aún más esto, Tailwind ofrece PurgeCSS. Esta herramienta escanea los archivos especificados (HTML, Vue, JSX, etc.) y elimina cualquier clase no utilizada de Tailwind del resultado final de CSS. ¿El resultado? Un tamaño de archivo más pequeño y un mejor rendimiento.

Nuestra opinión: Sin optimizaciones, Bootstrap carga más rápido. Pero los diseñadores de Tailwind manejan este problema de manera muy efectiva y las estrategias adicionales de optimización pueden hacer que tu página en general sea extremadamente liviana. Debemos darle esta ronda a Tailwind.

Entonces, ¿Por Qué No Ambos Frameworks?

“¿Por qué tengo que elegir solo uno? ¿No puedo usar ambos, Bootstrap y Tailwind, en el mismo proyecto?”

La respuesta corta es: ¡sí, absolutamente puedes! De hecho, muchos desarrolladores encuentran que combinar los dos frameworks les brinda lo mejor de ambos mundos.

Por ejemplo, podrías usar el sistema de cuadrícula de Bootstrap y los componentes preconstruidos para la estructura y el diseño general de tu sitio, pero luego usar las clases de utilidad de Tailwind para ajustar los estilos y crear elementos personalizados. Este enfoque puede ayudarte a encontrar un equilibrio entre un desarrollo rápido y un control detallado.

Por supuesto, mezclar frameworks también puede introducir cierta complejidad y posibles conflictos. Por lo tanto, necesitas conocer ambos frameworks a fondo antes de saber qué partes de cada uno funcionan bien juntas.

Por ejemplo, dado que ambos frameworks tienen las mismas clases de CSS, es posible que veas fallas visuales en diferentes navegadores y dispositivos.

El Futuro de los Frameworks de CSS

Fuente

Estar en el espacio de desarrollo web de front-end es bastante emocionante al ver cómo estos frameworks de CSS llegan y facilitan la construcción. Entre Bootstrap y Tailwind, Google Trends muestra que Bootstrap ha estado perdiendo popularidad desde sus picos en 2017 y Tailwind está comenzando a despegar.

Sin embargo, estos frameworks de CSS son solo el principio.

También estamos viendo otros frameworks que traducen JavaScript a CSS, como Emotion.sh. Esto te ayuda a escribir tus estilos directamente en tu código JavaScript, lo que puede facilitar la creación de componentes reutilizables y modulares. No son exactamente iguales que los frameworks de CSS tradicionales, pero definitivamente vale la pena mantener un ojo en ellos.

Conclusión

¡Uf, eso fue mucho para asimilar! Pero con suerte, para este momento, tienes una mejor comprensión de qué se trata Tailwind CSS y Bootstrap, y cómo pueden ayudarte a crear sitios web increíbles.

Al final del día, la elección entre estos dos frameworks (o cualquier otro) se reduce a tus necesidades y preferencias específicas. No hay una solución única para todos, y lo que funciona para un proyecto puede no ser la mejor opción para otro.

Lo importante es seguir aprendiendo, experimentando y esforzándote por probar cosas nuevas. Ya seas un fanático acérrimo de Bootstrap o un converso de Tailwind, siempre hay espacio para crecer y mejorar como desarrollador web.

¡Así que adelante y construye algo increíble! Y recuerda, sin importar qué framework elijas, lo más importante es divertirte y disfrutar del proceso.

Toma las Riendas con Alojamiento Flexible VPS

Así es como se diferencian los servidores VPS de DreamHost: Servicio al cliente 24/7, un panel intuitivo, RAM escalable, ancho de banda ilimitado, alojamiento ilimitado de dominios y almacenamiento SSD.

Adquiere Tu Plan VPS

The post Tailwind Vs. Bootstrap: ¿Qué Framework CSS Necesitas? appeared first on Guías para Sitios Web, Tips & Conocimiento.

12 Ejemplos Grandiosos de Sitios Web Accesibles Que Destacan

Ian Hernandez — Mon, 20 May 2024 14:00:00 +0000

Aquí, en DreamHost, creemos que todo el mundo debería poder usar cualquier sitio web en internet, sin importar la discapacidad que puedan tener. Sin embargo, mientras que nos preocupamos por la accesibilidad web, también entendemos que diseñar un sitio web que sea accesible y visualmente atractivo puede ser un reto.

Las buenas noticias son que puedes diseñar sitios web accesibles sin sacrificar el impacto visual. De hecho, algunos sitios web hermosos que hay allá afuera están diseñados pensando en la accesibilidad — de lo cual podríamos aprender un par de cosas.

[glossary_term_es title=”Accesibilidad” text=”La accesibilidad es la práctica de hacer que un sitio web sea accesible para tantos usuarios como sea posible. Los sitios web accesibles pueden ser vistos por cualquier persona usando cualquier dispositivo.”]

En esta publicación, comenzaremos por mostrarte cómo se ve la accesibilidad web correcta, y cubriremos algunos estándares de accesibilidad web diseñados para ayudar a democratizar el acceso a los sitios web. Luego, te mostraremos 12 de los mejores ejemplos de accesibilidad web en internet y veremos lo que puedes aprender de ellos.

¡Manos a la obra!

Cómo Se Ve La Accesibilidad Web Grandiosa

Según El Banco Mundial, más del 15% de la población mundial tiene algún tipo de discapacidad. Estas pueden incluir:

Discapacidades Visuales: Algunos usuarios tienen discapacidades visuales que inhiben su habilidad de ver claramente o percibir contrastes de color. Un rango de personas puede entrar en esta categoría, incluyendo usuarios ciegos, o aquellos que son daltónicos. Para estos usuarios discapacitados, es recomendado que utilices descripciones de audio o combinaciones accesibles de color (por ejemplo, evita usar colores de texto oscuros en fondos oscuros).
Discapacidades Auditivas: Los usuarios con discapacidad auditiva pueden incluir personas sordas y aquellas con pérdida parcial de la audición (personas con dificultades auditivas/HoH). Los subtítulos para el contenido de audio pueden proporcionar a estos usuarios una experiencia más accesible.
Discapacidades Físicas: Algunas personas tienen discapacidades de movilidad que pueden afectar su destreza y habilidad para realizar movimientos precisos, lo que posiblemente dificulte el uso de un mouse. Aquellos con discapacidades físicas pueden ser usuarios de tecnología de asistencia. Asegúrate de que tu sitio esté correctamente codificado para dispositivos de asistencia con el fin de proporcionar contenido accesible para usuarios con discapacidades físicas.
Discapacidades Cognitivas: Algunos usuarios pueden tener discapacidades cognitivas como dislexia, demencia o trastorno del procesamiento auditivo. Puedes considerar el uso de una fuente específica, como Dyslexie. También debes asegurarte de que cualquier contenido de audio tenga una transcripción disponible para aquellos con discapacidades del procesamiento auditivo.

Es importante mantener todas estas discapacidades muy en cuenta cuando estés creando tu sitio web para asegurarte de que no haya barreras para los usuarios con discapacidades. Para ayudar a los diseñadores web con esto, W3C ha desarrollado un conjunto de Directrices de Accesibilidad de Contenido Web (WCAG).

Una buena accesibilidad web quiere decir que te estás apegando a estas directrices y que estás siguiendo con cuidado los 4 principios de accesibilidad de contenido web. Estos principios establecen que todos los sitios web deberían:

Perceptible
Operable
Entendible
Robusto

Asegurar que tu sitio web sea “operable” puede significar implementar una navegación amigable con el teclado, para aquellas personas que no usan un mouse. “Perceptible” puede significar asegurarte de usar altos contrastes de color para las personas con impedimentos visuales.

¿Estás listo para ver cómo se ven estos principios en la práctica? A continuación, te mostramos 12 ejemplos de sitios web que están ejerciendo el diseño accesible de forma correcta.

12 Grandiosos Ejemplos de Accesibilidad Web Para Inspirarte

A continuación enumeramos nuestros ejemplos favoritos de accesibilidad web. Estos 12 sitios web han puesto el estándar cuando se trata de accesibilidad.

1. Scope

Scope es una organización benéfica de igualdad y discapacidad ubicada en Wales e Inglaterra dedicada a crear una sociedad más justa e igualitaria. Como líder de la igualdad y discapacidad, esperarías que el sitio web de esta organización sea tan accesible como sea posible — y lo es.

No solo se adhiere completamente a las directrices WCAG 2.0 y WCAG 2.1, sino que también el sitio es inclusive personalizable para usuarios individuales. Por ejemplo, los usuarios pueden cambiar los colores del sitio, incrementar el tamaño del texto, o inclusive encender narración de texto para que el contenido les sea leído en voz alta.

Si ves la parte superior izquierda de la página inicial, verás una pestaña llamada Accessibility. Haz clic en ella y el sitio te llevará a su página de accesibilidad, la cual incluye instrucciones sobre cómo adaptar la experiencia a tus necesidades, se enlaza con tecnologías de asistencia, y una lista de problemas de accesibilidad conocidos en los que se está trabajando actualmente.

Scope, usa frases cortas y fuentes claras, grandes a través del sitio para una legibilidad máxima. Además, el sitio es completamente compatible con software de lectura de pantalla.

A pesar de ser un fantástico ejemplo de accesibilidad web, el equipo de Scope continúa realizando mejoras. Cada 4 meses, ellos prueban la accesibilidad del sitio web y realizan actualizaciones donde sea necesario.

2. Harvard University

La educación de Harvard no es su único punto fuerte. El sitio web de la universidad de renombre mundial también se destaca por su accesibilidad, ofreciendo una variedad de herramientas de lectura, subtítulos multilingües en videos y esquemas de color cuidadosamente seleccionados que satisfacen las necesidades de los visitantes con discapacidades visuales.

El menú de navegación de Harvard también merece elogios por su accesibilidad. Es simple pero efectivo, con texto grande y fácil de leer en un color de alto contraste. Además, es claro y fácil de encontrar.

3. Paralympic.org

Paralympic.org es el sitio oficial del Comité Internacional de Paralímpicos (IPC). El IPC es un poderoso defensor de la inclusión social y su sitio web es el testamento de eso.

Cuenta con navegación de pestañas amigable con el teclado y un botón de “regreso al inicio” instantáneo para hacer fácil la movilidad en la página. Las imágenes y videos son grandes y altamente visibles, y hay suficiente espacio en blanco para resaltar los elementos visuales.

Si vas a la página inicial, notarás una funcionalidad para ajustar el tamaño del texto en la esquina superior derecha. Es fácilmente visible y le permite a los usuarios con impedimentos visuales personalizar rápidamente el tamaño del texto para que se ajuste a sus necesidades.

4. Walmart

Uno de los requisitos de WCAG para sitios web accesibles es que deben ser “visibles al enfoque”, lo que significa que la parte del sitio que se está utilizando está resaltada. El sitio web de Walmart es un excelente ejemplo de esto. Tiene una gran cantidad de elementos interactivos como botones, enlaces y campos de formulario, pero los visitantes solo pueden enfocarse en uno a la vez, y el que están utilizando está claramente resaltado para una máxima visibilidad.

También es fácil navegar entre diferentes elementos interactivos, desde el menú de navegación hasta diferentes botones, la barra de búsqueda, enlaces a tu página de cuenta y carrito de compras, y más, ya sea que utilices la navegación con mouse o teclado.

5. KidsWish

KidzWish es una organización que proporciona terapias, servicios de apoyo y una fiesta anual de Navidad para niños con desventajas o discapacidades. Sirve a muchas personas con diferentes discapacidades, entonces, naturalmente, tenían que construir un sitio web que fuera tan accesible como fuera posible.

Y definitivamente alcanzaron esa meta. El sitio web de KidzWish está perfectamente diseñado, con una estructura lógica, navegación amigable con el teclado, colores de alto contraste y textos con fuentes grandes. Además, es fácil navegar con elementos prominentes e interactivos.

El diseño también es amigable con los niños. Presume un esquema de colores atrevidos y brillantes, y muchos gráficos divertidos.

6. Nomensa

Nomensa es una agencia estratégica de diseño de experiencia de usuario (UX) con sede en Londres. Ponen tanto énfasis en el diseño accesible que ofrecen una prueba de accesibilidad web que sus clientes actuales y potenciales pueden tomar para ver cómo sus sitios se comparan con los estándares internacionales.

La agencia luego ofrece servicios de diseño para ayudar a los clientes a corregir cualquier problema descubierto por la herramienta de prueba de accesibilidad.

¡Adivina qué! El cofundador de la firma es copresidente del Consorcio World Wide Web (W3C) y ayudó a escribir las pautas WCAG que dirigen las mejores prácticas de accesibilidad web. ¡No es de extrañar que Nomensa tome las soluciones de accesibilidad tan en serio!

7. Ovo Energy

Ovo Energy es una empresa energética con sede en el Reino Unido. Su sitio web presenta información sobre tarifas y paquetes e incluye un portal de inicio de sesión principal para que los clientes administren sus cuentas.

La empresa ha hecho un trabajo maravilloso al hacer que el sitio sea accesible para todos mediante el uso de texto grande y legible y una interfaz clara. También incorpora la navegación por teclado para facilitar la navegación por el sitio.

Los diseñadores se esforzaron al máximo para garantizar que el sitio sea accesible para usuarios con discapacidades visuales y auditivas. Hay servicios de SignVideo para usuarios de lenguaje de señas británico, y el contraste de color cumple con las pautas de WCAG.

Los clientes también pueden solicitar facturas en braille y formatos más grandes. Además de todo esto, el sitio es compatible con tecnología de asistencia.

8. Bleacher Report

El sitio de noticias deportivas Bleacher Report hace algo diferente que resulta extremadamente útil para los usuarios que acceden a su sitio utilizando lectores de pantalla o controles de teclado. Los primeros puntos de enfoque son la notificación de cookies, la Política de Privacidad y los Términos de Uso, y si haces clic en el enlace externo para estos, se abren en una nueva ventana.

Para los usuarios sin discapacidades, esto puede no parecer importante, pero esto brinda a todos los visitantes del sitio de Bleacher Report acceso a información legal importante. En la mayoría de los sitios, las alertas legales y de cookies están al final de la página, lo que significa que los visitantes que usan controles de teclado o lectores de pantalla las encuentran al final de su visita, después de navegar por el resto del sitio. Este es un pequeño cambio con un gran impacto para las personas con discapacidades.

9. BBC iPlayer

BBC iPlayer es el servicio de streaming en línea de la BBC. Su sitio web es donde los usuarios van a ver los programas en línea. También es otro fantástico ejemplo de accesibilidad web del que podemos aprender.

Primero, el sitio web es muy fácil de navegar y compatible con tecnología de asistencia. Puedes moverte por la página al hacer clic en el botón Tab. Navegar en el logo de iPlayer muestra una opción para obtener ayuda con Accesibilidad, la cual enlaza a una página de recursos con mucha información útil para usuarios con discapacidades.

El contenido está diseñado lógicamente, y todos los botones usan un diseño visual claro con colores de alto contraste. También hay burbujas de información accesibles a través del teclado y mouse que proveen información adicional para los usuarios y texto alternativo descriptivo para todas las imágenes.

El contenido de video también es accesible. Todos los programas de la BBC en iPlayer contienen subtítulos.

10. Metropolitan Transportation Authority

Además de tener un sitio web receptivo que es fácil de usar en dispositivos con pantallas de todos los tamaños, la Autoridad de Transporte Metropolitano de la Ciudad de Nueva York también tiene una experiencia de búsqueda incorporada que ayuda a los usuarios a encontrar la información que están buscando de manera más rápida y fácil. ¿Cómo? La función de búsqueda aún proporciona resultados incluso si los usuarios escriben mal las palabras o ingresan información en formatos incorrectos.

Por ejemplo, si un usuario ingresa una dirección o vecindario en el planificador de viajes de la MTA con un error tipográfico, la barra de búsqueda seguirá sugiriendo direcciones basadas en su mejor suposición de lo que el usuario estaba buscando.

11. NSW Government

El sitio web NSW Government es el eje central del área de New South Wales en Australia. Está perfectamente diseñado para hacer fácil que los residentes de todos los contextos y habilidades puedan usarlo.

Este sitio cuenta con navegación de pestañas, haciendo fácil navegar las páginas usando un teclado o lector de pantalla. Gracias a las fuentes de tipografía grandes y colores que contrastan, también es extremadamente legible y es compatible con tecnología de asistencia.

12. GOV.UK

GOV.UK es el centro para todas las páginas web del gobierno de Inglaterra. Puede ser usado para acceder a todo, desde información sobre beneficios y ayuda por discapacidades para visas y soporte de inmigración.

El Gobierno de Inglaterra ha hecho un increíble trabajo al hacer que su sitio sea accesible para cualquiera que lo necesite. El sitio cuenta con navegación con el teclado y atributos ARIA, haciendo fácil encontrar páginas y navegar el sitio. También está adaptado para soportar un zoom de 300% para los usuarios con discapacidades visuales.

Haz Una Declaración de Accesibilidad

Asegurarte de que tu sitio web sea lo más accesible posible es tanto una obligación moral como profesional. Puede parecer un desafío, pero te prometemos que vale la pena. Los ejemplos anteriores te guiarán en la creación de un sitio web inclusivo que será accesible para todos los usuarios.

¿Listo para construir tu sitio web accesible? Permítenos ocuparnos del aspecto técnico por ti, para que puedas dedicar más tiempo y energía en lo que realmente importa: el diseño. Regístrate en nuestro Plan de Hosting Shared Unlimited y obtén hosting seguro e ilimitado para todos tus sitios web.

Nota: Realizamos una amplia investigación sobre el lenguaje inclusivo para discapacidades para nuestros artículos. Recuerda utilizar tus recursos al crear contenido accesible y, si tienes dudas, siempre pregunta.

Tu lo Sueñas, Nosotros lo Ponemos en Código

Aprovecha más de 20 años de experiencia en codificación adquiriendo el servicio de Desarrollo Web. Solo déjanos saber qué quieres para tu sitio — nosotros nos encargamos del resto.

Adquiere el Tuyo

The post 12 Ejemplos Grandiosos de Sitios Web Accesibles Que Destacan appeared first on Guías para Sitios Web, Tips & Conocimiento.

Tu Guía Completa Sobre Bootstrap

Ian Hernandez — Mon, 29 Apr 2024 14:00:00 +0000

Digamos que necesitas construir un panel de análisis para tu negocio.

Necesitas uno que luzca profesional y funcione bien en diferentes dispositivos, pero no tienes mucho tiempo para diseñar todo desde cero.

Aquí es donde entra un framework como Bootstrap. Te da un punto de partida para construir sitios web receptivos. En lugar de mirar una página en blanco, comienzas con una rejilla y componentes preconstruidos. Es como tener un montón de Legos. Aún tienes que unirlos, pero la parte difícil de hacer todas las piezas individuales ya está hecha.

Si Bootstrap suena como una buena opción para tu proyecto, esta guía es para ti. Te llevaremos a través de todo lo que necesitas saber para comenzar a construir sitios web con Bootstrap.

¡Comencemos!

¿Qué Es Bootstrap?

Bootstrap es un framework CSS gratuito y de código abierto que proporciona una colección de componentes preconstruidos, estilos y herramientas para crear diseños web receptivos y consistentes. Desarrollado por los ingenieros de Twitter Mark Otto y Jacob Thornton en 2011, desde entonces se ha convertido en uno de los frameworks preferidos por los desarrolladores web de todo el mundo.

Bootstrap es actualmente el sexto framework más popular en los sitios principales de la categoría de bibliotecas de JavaScript.

Aunque jQuery y React han recibido mucha atención en los últimos años, más de 1.2 millones de sitios web en todo el mundo aún utilizan Bootstrap.

Este framework es móvil primero, lo que significa que prioriza el diseño y el estilo para pantallas más pequeñas y mejora progresivamente el diseño para pantallas más grandes. Debido a este enfoque, todos los sitios web construidos con Bootstrap son responsivos por defecto en todos los tamaños de pantalla.

¿Qué Hace Diferente a Bootstrap?

Bootstrap se destaca de otros frameworks CSS de varias maneras clave.

Sus componentes predefinidos, como barras de navegación, botones, formularios y tarjetas, ahorran mucho tiempo a los desarrolladores. El sistema de cuadrícula receptiva de Bootstrap facilita la creación de diseños que se ven bien en diferentes tamaños de pantalla, desde grandes monitores de escritorio hasta pequeñas pantallas de teléfono.

Cada componente de Bootstrap es personalizable, por lo que puedes cambiar colores y tamaños para adaptarse a tu diseño específico. Este enfoque ofrece varias ventajas:

Desarrollo rápido: Con una amplia gama de componentes preconstruidos y clases de utilidad, los desarrolladores pueden prototipar y construir rápidamente páginas web sin dedicar tiempo excesivo al CSS personalizado.
Diseño consistente: Bootstrap impone un lenguaje de diseño consistente en todos los proyectos, asegurando un aspecto y sensación coherentes y profesionales.
Responsivo por defecto: Los componentes y el sistema de cuadrícula de Bootstrap están diseñados para ser receptivos, adaptándose a diferentes tamaños de pantalla y dispositivos sin necesidad de consultas de medios personalizadas extensas.
Compatibilidad entre navegadores: Bootstrap se encarga de los problemas de compatibilidad entre navegadores, permitiendo que los desarrolladores se centren en construir funcionalidad en lugar de preocuparse por las inconsistencias del navegador.

Sin embargo, Bootstrap, como cualquier framework, no es una talla única para todos.

Los sitios web construidos con Bootstrap se ven similares con diferentes diseños simplemente porque se reutilizan los elementos de la interfaz de usuario. El framework también viene con mucho CSS y JavaScript que es posible que no uses, lo que puede ralentizar tu sitio web si no tienes cuidado. También hay una curva de aprendizaje al adoptar las clases en el framework.

A pesar de estos posibles inconvenientes, Bootstrap sigue siendo una herramienta poderosa y popular para el desarrollo web, especialmente si deseas comenzar rápidamente. Veamos cómo hacerlo.

Comenzando con Bootstrap

Antes de hablar sobre los conceptos básicos, aquí hay tres formas de importar el framework:

Descarga los archivos CSS y JavaScript compilados desde el sitio web oficial de Bootstrap y enlázalos en tu archivo HTML.
Utiliza una Red de Distribución de Contenidos (CDN) para cargar Bootstrap desde un servidor remoto.
Instala Bootstrap a través de un administrador de paquetes como npm si estás utilizando una herramienta de construcción.

Por simplicidad, vamos a utilizar el método de CDN. Agrega las siguientes líneas dentro de la etiqueta de tu archivo HTML:

Luego, agrega la siguiente línea justo antes de la etiqueta de cierre .

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">script>

Nota: Debes agregar estas líneas para que funcionen todos los ejemplos de código siguientes.

El Sistema de Cuadrícula de Bootstrap

El sistema de cuadrícula de Bootstrap es una de sus características principales, que permite la creación de diseños receptivos que se adaptan fácilmente a diferentes tamaños de pantalla.

Está basado en un diseño de 12 columnas y utiliza clases predefinidas para especificar cómo deben comportarse los elementos en diferentes puntos de interrupción.

Cuadrícula Básica

La cuadrícula básica es un marco simple con columnas de ancho igual que se vuelven más altas cuando el contenido dentro es más largo. Para crear una básica, comienza con un contenedor

y agrega filas y columnas. Aquí tienes un ejemplo:


  <div class="row">
    <div class="col">
      <div class="bg-light border p-3 text-center">
        <h3>Column 1h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.p>
      div>
    div>
    <div class="col">
      <div class="bg-light border p-3 text-center">
        <h3>Column 2h3>
        <p>Pellentesque euismod dapibus odio, at volutpat sapien.p>
      div>
    div>
    <div class="col">
      <div class="bg-light border p-3 text-center">
        <h3>Column 3h3>
        <p>Sed tincidunt neque vel risus faucibus fringilla.p>
      div>
    div>
  div>

Como puedes ver, hemos creado tres columnas de ancho igual. Bootstrap maneja el relleno, el espaciado entre columnas y la alineación.

Longitud de Columnas en la Cuadrícula

¿Qué sucede si deseas controlar la longitud de la columna? Bootstrap tiene 12 ajustes de unidades que te permiten decidir qué tan ancha o estrecha puede ser una columna. Por ejemplo, para crear una fila con dos columnas donde la primera columna ocupe ocho unidades y la segunda columna ocupe cuatro unidades, puedes hacer lo siguiente:


  <div class="row">
    <div class="col-8">
      <div class="bg-light border p-3 text-center">
        <h3>Wider Columnh3>
        <p>Nunc vitae metus non velit aliquam rhoncus vel in leo.p>
      div>
    div>
    <div class="col-4">
      <div class="bg-light border p-3 text-center">
        <h3>Narrower Columnh3>
        <p>Fusce nec tellus sed augue semper porta.p>
      div>
    div>
  div>

Como puedes notar, hay una diferencia en las clases de columna, donde la columna más ancha tiene la clase col-8 y la columna más estrecha es col-4.

Ancho de Columnas Responsivo

Bootstrap también proporciona clases responsivas que te permiten especificar diferentes anchos de columna para diferentes tamaños de pantalla. Estas clases están basadas en puntos de quiebre, que son anchos de pantalla predefinidos. Los puntos de quiebre disponibles son:

xs (extra pequeño): Menos de 576px
sm (pequeño): 576px en adelante
md (mediano): 768px en adelante
lg (grande): 992px en adelante
xl (extra grande): 1200px en adelante
xxl (extra extra grande): 1400px en adelante

Para usar clases responsivas, agrega la abreviatura del punto de quiebre al prefijo col-. Por ejemplo:


  <div class="row">
    <div class="col-md-6">
      <div class="bg-light border p-3 text-center">
        <h3>Column 1h3>
        <p>Maecenas sed diam eget risus varius blandit sit amet non magna.p>
      div>
    div>
    <div class="col-md-6">
      <div class="bg-light border p-3 text-center">
        <h3>Column 2h3>
        <p>Donec id elit non mi porta gravida at eget metus.p>
      div>
    div>
  div>

Aquí hemos agregado el ancho col-md-6, por lo que las columnas se redimensionarán automáticamente cuando el tamaño de la pantalla sea de 768px o más.

Componentes de Bootstrap

Bootstrap ofrece una amplia gama de componentes predefinidos para ensamblar interfaces de usuario rápidamente. Estos componentes son receptivos y personalizables. Veamos algunos de los más comúnmente utilizados.

Botones

Bootstrap proporciona estilos de botones bien diseñados desde el principio. Para crear un botón, agrega la clase btn a un elemento Success Link Button

Tarjetas

Las tarjetas son contenedores versátiles para contenido como imágenes, texto y botones. Proporcionan una forma estructurada de presentar información.


  
  
    Card Title
    Some quick example text to build on the card title.
    Go somewhere

Aquí, puedes ver una tarjeta con una imagen en la parte superior, seguida de un título, algo de texto y un botón. La clase card-img-top posiciona la imagen en la parte superior de la tarjeta, mientras que la clase card-body proporciona relleno y espaciado para el contenido dentro de la tarjeta.

Barra de Navegación

El componente navbar es un encabezado de navegación receptivo con marca, enlaces, formularios y más. Se colapsa automáticamente en pantallas más pequeñas y proporciona un botón de alternar para expandir el menú.


  
    My Website
    
    
      
        
          Home
        
        
          Features
        
        
          Pricing

Con este sencillo fragmento de código, creamos un botón de menú de alternancia para pantallas pequeñas y una lista de enlaces de navegación.

La clase navbar-expand-lg especifica que la barra de navegación debe expandirse en pantallas grandes y colapsarse en las más pequeñas. Las clases navbar-light y bg-light establecen el esquema de color para la barra de navegación. Compara eso con la creación del menú con CSS plano, y entenderás cuántos pasos nos ahorró Bootstrap.

Formularios

Pasando a los formularios, Bootstrap tiene una variedad de controles de formulario y opciones de diseño para crear formularios interactivos y accesibles.

Puedes estilizar fácilmente elementos de formulario como campos de entrada, casillas de verificación, botones de radio y más.


  
    Email address
    
    We'll never share your email with anyone else.
  
  
    Password
    
  
  
    
    Check me out

El estilo de Bootstrap ha alineado automáticamente embellecido este diseño de formulario desde detrás de escena.

Este ejemplo de formulario incluye un campo de entrada para correo electrónico, un campo de entrada para contraseña, una casilla de verificación y un botón de enviar. La clase form-label estiliza las etiquetas, mientras que la clase form-control estiliza los campos de entrada. La clase mb-3 agrega un margen inferior a los grupos de formularios para el espaciado.

Creación de un Panel de Control de Análisis Simple con Bootstrap

Ahora que hemos cubierto lo básico, pongámoslo todo junto y construyamos un ejemplo del mundo real: un panel de control de análisis.

[glossary_term_es title=”Analítica Web” text=”La analítica web se refiere al campo de la interpretación de los datos, esta es típicamente usada para ayudar a guiar las estrategias. Cuando es aplicada al SEO, esta puede incluir la investigación de palabras clave, como también el tráfico del sitio web y el análisis de los competidores. La meta de la analítica del SEO es mejorar el ranking de un sitio web dentro de las páginas de resultados y conseguir más tráfico.”]

Imagina que estás construyendo una aplicación web que muestra datos de análisis para un negocio. El panel de control incluirá un encabezado con un logotipo y navegación, un área de contenido principal con datos y un pie de página con enlaces adicionales.

Desglosemos esto en secciones manejables usando un lenguaje sencillo que sea fácil de seguir.

Configuración del HTML

Lo primero es lo primero, necesitamos configurar nuestro archivo HTML.

Empieza por crear un nuevo archivo y agregar la estructura básica, como la declaración y las etiquetas , y . En la sección , recuerda especificar la codificación de caracteres, el viewport y el título de la página.

Aquí tienes cómo debería lucir tu HTML hasta ahora, incluyendo los archivos Bootstrap.css (importados en el ) y Bootstrap.js (importado justo antes del cierre del ) llamados en el HTML:


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Analytics Dashboardtitle>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
head>
<body>
  

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">script>
body>
html>

Agregando la Navegación del Encabezado

Continuemos creando un encabezado con una barra de navegación. Usa la etiqueta

y agrega un elemento

dentro de ella. El componente navbar de Bootstrap es perfecto para esto. Luego, incluye un logotipo y algunos enlaces de navegación, como “Resumen”, “Informes” y “Configuración”.

Pega este código de encabezado dentro de las etiquetas .

<header>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Analytics Dashboarda>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon">span>
      button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link active" href="#">Overviewa>
          li>
          <li class="nav-item">
            <a class="nav-link" href="#">Reportsa>
          li>
          <li class="nav-item">
            <a class="nav-link" href="#">Settingsa>
          li>
        ul>
      div>
    div>
  nav>
header>

Así es como se verá la barra de navegación:

La clase navbar-expand-lg hace que la navegación sea receptiva, colapsando en pantallas más pequeñas.

Utilizamos navbar-dark y bg-dark para darle un aspecto oscuro y elegante. Los enlaces de navegación están en una lista desordenada, y ms-auto los empuja hacia el lado derecho de la barra de navegación.

Creando el Área de Contenido Principal

¡Es hora de abordar el contenido principal! Usemos la etiqueta

y creemos un diseño de dos columnas con el sistema de cuadrícula de Bootstrap.

La columna izquierda contendrá tarjetas para mostrar gráficos o diagramas, y la columna derecha tendrá una tarjeta que muestre métricas clave. Pega este código justo debajo de la etiqueta de cierre

Para hacer este ejemplo más interactivo, agreguemos Chart.js para mostrar métricas de usuario. Agrega este script a tu .

<script src="https://cdn.jsdelivr.net/npm/chart.js">script>

Recuerda, puedes omitir agregar este script y los datos de ejemplo si solo quieres ver cómo funciona Bootstrap. Lo estamos agregando para que las cajas no estén vacías.

Ahora, escribamos las columnas de Bootstrap para dar espacio a los gráficos y las métricas de datos.


    <div class="row">
      <div class="col-md-8">
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">Website Traffich5>
            <canvas id="trafficChart">canvas>
          div>
        div>
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">User Acquisitionh5>
            <canvas id="userChart">canvas>
          div>
        div>
      div>
      <div class="col-md-4">
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">Key Metricsh5>
            <ul class="list-group list-group-flush">
              <li class="list-group-item">Total Users: 10,000li>
              <li class="list-group-item">New Users: 500li>
              <li class="list-group-item">Bounce Rate: 25%li>
            ul>
          div>
        div>
      div>
    div>

Finalmente, pega estos datos de ejemplo justo antes de la etiqueta de cierre del cuerpo . Nuevamente, esto no es necesario si solo quieres ver las columnas de Bootstrap en acción. Estamos agregando estos datos de ejemplo para que Chart.js recoja la información y la muestre en un gráfico interactivo.

<script>
    // Website Traffic Line Chart
    var trafficCtx = document.getElementById('trafficChart').getContext('2d');
    var trafficChart = new Chart(trafficCtx, {
      type: 'line',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          label: 'Unique Visitors',
          data: [8000, 9500, 10200, 9800, 11000, 12500],
          borderColor: 'rgba(75, 192, 192, 1)',
          fill: false
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

    // User Acquisition Bar Chart
    var userCtx = document.getElementById('userChart').getContext('2d');
    var userChart = new Chart(userCtx, {
      type: 'bar',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          label: 'New Users',
          data: [400, 450, 500, 450, 550, 600],
          backgroundColor: 'rgba(54, 162, 235, 0.6)'
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  script>

Poniéndolo todo junto, verás un hermoso panel con un gráfico de líneas y un gráfico de barras que muestran el crecimiento en nuestras métricas clave. Las métricas clave también son visibles a la derecha en formato de tabla.

Hemos utilizado la clase container para centrar el contenido y agregar algo de relleno. La clase row crea una fila, y las clases col-md-* definen los anchos de columna.

La columna izquierda (col-md-8) tiene dos tarjetas para los gráficos, mientras que la columna derecha (col-md-4) tiene una tarjeta con métricas clave en un grupo de lista.

Agregando el Pie de Página

¡Casi estamos!

Agreguemos un pie de página con información de copyright y enlaces. Utilizaremos la etiqueta

y el sistema de cuadrícula y utilidades de espaciado de Bootstrap para controlar el diseño y el relleno.


  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <p>© 2023 Analytics Dashboard. All rights reserved.p>
      div>
      <div class="col-md-6 text-md-end">
        <a href="#">Privacy Policya>
        <a href="#" class="ms-3">Terms of Servicea>
      div>
    div>
  div>

Ahora deberías ver este pie de página añadido al final de tu panel de control.

La clase bg-light le da al pie de página un color de fondo claro, y py-3 agrega relleno vertical. Hemos dividido el pie de página en dos columnas: una para el aviso de derechos de autor y otra para los enlaces. La clase text-md-end alinea los enlaces a la derecha en pantallas de tamaño mediano y más grande.

Juntando Todo

Ahora, vamos a combinar el código para que puedas ver el panorama completo.


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Analytics Dashboardtitle>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js">script>
 
head>
<body>
<header>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Analytics Dashboarda>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon">span>
      button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link active" href="#">Overviewa>
          li>
          <li class="nav-item">
            <a class="nav-link" href="#">Reportsa>
          li>
          <li class="nav-item">
            <a class="nav-link" href="#">Settingsa>
          li>
        ul>
      div>
    div>
  nav>
header>
  <main class="container my-5">
    <div class="row">
      <div class="col-md-8">
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">Website Traffich5>
            <canvas id="trafficChart">canvas>
          div>
        div>
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">User Acquisitionh5>
            <canvas id="userChart">canvas>
          div>
        div>
      div>
      <div class="col-md-4">
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">Key Metricsh5>
            <ul class="list-group list-group-flush">
              <li class="list-group-item">Total Users: 10,000li>
              <li class="list-group-item">New Users: 500li>
              <li class="list-group-item">Bounce Rate: 25%li>
            ul>
          div>
        div>
      div>
    div>
  main>
<script>
    // Website Traffic Line Chart
    var trafficCtx = document.getElementById('trafficChart').getContext('2d');
    var trafficChart = new Chart(trafficCtx, {
      type: 'line',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          label: 'Unique Visitors',
          data: [8000, 9500, 10200, 9800, 11000, 12500],
          borderColor: 'rgba(75, 192, 192, 1)',
          fill: false
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

    // User Acquisition Bar Chart
    var userCtx = document.getElementById('userChart').getContext('2d');
    var userChart = new Chart(userCtx, {
      type: 'bar',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          label: 'New Users',
          data: [400, 450, 500, 450, 550, 600],
          backgroundColor: 'rgba(54, 162, 235, 0.6)'
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  script>
body>
<footer class="bg-light py-3">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <p>© 2023 Analytics Dashboard. All rights reserved.p>
      div>
      <div class="col-md-6 text-md-end">
        <a href="#">Privacy Policya>
        <a href="#" class="ms-3">Terms of Servicea>
      div>
    div>
  div>
footer>
html>

Como puedes ver, la barra de navegación responsiva está en la parte superior, con los gráficos directamente debajo de ella. Bootstrap maneja el relleno y el espacio entre los elementos de la cuadrícula, que puedes ver en las métricas de tu panel de control.

En la parte inferior de la pantalla se encuentra el pie de página con los enlaces de Política de Privacidad y Términos de Servicio.

Acabas de crear un sencillo panel de control de analítica utilizando Bootstrap. Pero Bootstrap tiene una gran cantidad de componentes que ni siquiera hemos tocado aún. Asegúrate de explorar la biblioteca de componentes de Bootstrap para encontrar componentes reutilizables para tus futuros proyectos.

Un Kit de Herramientas Para el Diseño Web Responsivo

Bootstrap es un framework popular que ayuda a los desarrolladores web a crear rápidamente sitios web responsivos. Tiene un sistema de cuadrícula, componentes preconstruidos y opciones de personalización, lo que facilita el desarrollo de sitios web que se ven bien en diferentes dispositivos.

Desarrolladores con todos los niveles de experiencia utilizan Bootstrap. Es bastante fácil de aprender, pero lo suficientemente potente como para manejar proyectos grandes. Hay una gran comunidad de usuarios de Bootstrap para brindar apoyo y muchos recursos para ayudarte a aprender el framework.

Cuando construyes un sitio con Bootstrap, también necesitas una buena empresa de hosting. DreamHost tiene una opción de servidor virtual privado (VPS) que funciona perfectamente. Es flexible y puede manejar diferentes necesidades a medida que tu sitio Bootstrap crece.

¿Por qué no darle una oportunidad a Bootstrap y ver qué puedes crear? Con las herramientas adecuadas y un plan de hosting de una empresa como Dreamhost, puedes crear sitios web responsivos en poco tiempo.

Crea Un Sitio Para Todos

Nos aseguramos de que tu sitio sea rápido, seguro y esté siempre en línea para que tus visitantes confíen en ti.

Adquiere Tu Plan

The post Tu Guía Completa Sobre Bootstrap appeared first on Guías para Sitios Web, Tips & Conocimiento.

Aumenta La Velocidad De Tu Sitio Con GTmetrix

Ian Hernandez — Thu, 05 Oct 2023 14:00:45 +0000

Todos sabemos lo frustrante que es quedarse atrapado en un sitio web que tarda cargando.

Ya sea que estés buscando información sobre un producto, pedir una cita en línea, o hablar con el área de servicio al cliente de alguna marca, sabemos que no quieres estar frente a una pantalla en blanco por largos períodos de tiempo, teniendo cosas importantes y pendientes por hacer.

En este entorno acelerado, lleno de opciones, la gente simplemente no quiere esperar. Unbounce preguntó a un grupo de usuarios móviles, cuánto tiempo esperarían mientras carga una página web. El 32.3% de encuestados dijo que esperarían de cuatro a seis segundos, pero un 26.9% aseguró estar listo para abandonar una página, si no carga en tres segundos.

¿Cuál es la conclusión?

La velocidad de carga de un sitio importa. Mucho.

Entonces, hablando de eso ¿puedes asegurar que tu sitio está optimizado para ser rápido?

Aquí es donde GTmetrix entra en escena.

¿Qué Es GTmetrix?

GTmetrix es una popular herramienta en línea, diseñada para probar la velocidad de sitios web. Analiza el rendimiento de un sitio y te da información práctica para optimizar su rendimiento. También, datos detallados sobre cómo carga tu sitio, que pueden llevarte a futuras mejoras.

[glossary_term_es title=”Rendimiento de un Sitio Web” text=”El rendimiento de un sitio web se refiere a la velocidad de carga y el tiempo de actividad del sitio. Un sitio con mejor rendimiento carga más rápido, funciona con menos problemas y posee un tiempo de actividad casi perfecto.”]

Cuando analizas tu sitio con GTmetrix, te dará un conjunto de calificaciones basadas en Lighthouse de Google (antes conocidas como Pagespeed Insights) y Métricas Web Principales, útiles para comprender profundamente en qué posición está tu sitio, en términos de rendimiento.

No te preocupes.

Analizaremos, más adelante, cada una de estas puntuaciones (y lo que GTmetrix indica). Con GTmetrix, puedes identificar cuellos de botella en la carga de tu sitio, para priorizar correcciones que la aceleren. Así, la experiencia para tus usuarios será mejor.

¿Por Qué Usar GTmetrix?

GTmetrix es una herramienta popular (¡y gratuita!) que te ayudará a entender y mejorar la velocidad y rendimiento de tu sitio. Eso es importante, por las siguientes razones:

Mejora la experiencia de usuario. Un sitio web de carga rápida hará que tus usuarios sean más felices, punto. La gente no quiere esperar. Por eso, si un sitio tarda mucho en cargar, lo abandonarán. Sitios más rápidos, garantizan que la gente accederá más rápido a la información o servicios que buscan. Entonces, quedarán más satisfechos.

Potencia Tu Optimización para Motores de Búsqueda (SEO). La velocidad es un factor importante de clasificación para los motores de búsqueda, como Google. Sitios más rápidos pueden aparecer en mejores posiciones de los resultados de búsqueda, lo que les da más visibilidad y tráfico. El énfasis de Google en la indexación móvil y las Métricas Web Principales (Largest Contentful Paint, First Input Delay y Cumulative Layout Shift) demuestra la importancia de la velocidad del sitio y la experiencia del usuario en SEO.
Puede incrementar tus tasas de conversión. Un sitio que tarde en cargar, puede perjudicar tus conversiones. Si un cliente potencial debe esperar hasta que cargue una página, o un proceso de pago, puede abandonar su carrito o la transacción. Los sitios más rápidos llevan a más ventas y más ingresos.

Te ayudará a alcanzar usuarios móviles. Cada vez más personas acceden a Internet desde dispositivos móviles. Por eso, es crucial optimizar tu sitio para ellos. Las redes móviles pueden ser más lentas que las conexiones por cable, por lo que optimizar tu sitio para que sea más rápido, es aún más y más vital.
Hará más sostenible a tu sitio. Con un sitio optimizado, usarás los recursos más eficientemente, reduciendo la carga para los servidores web. Esto puede reducir tus costos de alojamiento — y de paso, el impacto ambiental de tu sitio.

Con esto en mente, vamos al tutorial — leyéndolo, aprenderás a analizar tu sitio con GTmetrix.

¿Cómo Usar GTmetrix?

Usar GTmetrix para analizar el rendimiento de tu sitio, realmente es más sencillo de lo que imaginas. Mira esta guía, paso a paso, la cual te ayudará a comenzar.

Paso 1: Ve Al Sitio Web De GTmetrix

Ve a https://gtmetrix.com/.

Es una herramienta web; úsala sin tener que descargar nada. Hay versiones premium y gratuitas. Aunque la gratis es poderosa, solo podrás usar todas las funciones con una premium. Tras un período de cortesía, verás planes Pro desde $128 USD anuales.

Paso 2: Ingresa La URL De Tu Sitio Web

En la página de inicio, hay un cuadro para que escribas la URL del sitio que deseas analizar.

Paso 3: Elige Una Ubicación de Prueba Y Un Navegador (Opcional)

GTmetrix tiene varias opciones de análisis para usuarios premium, como elegir entre diferentes ubicaciones de prueba y navegadores. Esto será muy útil, al tratar de entender el rendimiento de tu sitio desde diferentes regiones, dispositivos y velocidades de conexión. Con una cuenta premium, puedes usar 30 servidores de prueba, en seis regiones geográficas:

Vancouver, Canadá
Dallas, USA
San Pablo, Brasil
Londres, Reino Unido
Bombay, India
Hong Kong, China
Sídney, Australia

También podrás probar varios navegadores, como Google Chrome, Firefox, y navegadores móviles. O, utilizar diversas conexiones, desde una de marcación de 56k, hasta una ilimitada.

Si no tienes cuenta, o usas una gratuita, puedes utilizar la herramienta, aunque te limitarás a sus configuraciones predeterminadas. En ese caso, omite este paso y analiza tu sitio directamente.

Paso 4: Comienza La Prueba

Haz clic en ‘Test your site’ y GTmetrix iniciará a analizar tu sitio. Al terminar, te dará un informe completo y podrás evaluar los resultados profundamente. Veamos ese punto más de cerca.

Leyendo Y Analizando Tu Reporte De GTmetrix

Al acabar tu reporte y antes de hacer clic en alguna pestaña, verás una página con cifras clave.

A la izquierda, verás tu calificación de GTmetrix. En este panel podrás ver tres cosas:

Una calificación general – entre más te acerques a la “A”, será mucho más alta.
Un Puntaje de Rendimiento, que mide el funcionamiento de tu sitio, ante los ojos de un usuario. Hay más detalles de esto en ‘Performance’, pestaña que ya abordaremos.
Tu Puntaje Estructural, que mide cómo está hecho tu sitio para lograr rendimiento óptimo. Hay más al respecto (y cómo mejorarlo) en ‘Structure’, pestaña que veremos.

A la derecha está el panel Web Vitals, con las métricas más importantes de esta página:

LCP (Largest Contentful Paint): Mide cuánto tarda en verse el elemento más grande de contenido de tu página, en la parte visible del navegador web.
TBT (Total Blocking Time): Mide la cantidad de tiempo, durante la cual los scripts bloquean el proceso de carga de tu página web.
CLS (Cumulative Layout Shift): Mide la cantidad de cambios inesperados en diseño, que ocurren mientras tu página web carga.

Bajo esta información, hay seis pestañas: ‘Summary’, ‘Performance’, ‘Structure’, ‘Waterfall’, ‘Video’, e ‘History’. Más tarde exploraremos, en detalle, cómo usar los datos de cada una.

Pestaña Summary (Resumen)

La pestaña ‘Summary’ te dará un panorama con datos de alto nivel, que GTmetrix halla al analizar tu sitio.

En la parte superior de la página, está Speed Visualization (Velocidad de visualización), que muestra una línea de tiempo, con eventos clave que ocurren mientras tu página carga.

Debajo, está Top Issues, con problemas principales que GTmetrix halló, y que impactan el rendimiento de tu sitio. Conocerás más sobre esto en la pestaña ‘Structure’ (que veremos en un momento).

En la parte inferior de la página ‘Summary’ verás la sección Page Details, o detalles de página, con porcentajes y desgloses, sobre el tamaño de los diversos elementos de tu página.

No necesitas pasar mucho tiempo en ‘Summary’ — aunque está ahí para propósitos informativos, gran parte de la información práctica de GTmetrix no está en esta pestaña.

Pestaña Performance (Rendimiento)

‘Performance’ es un buen lugar para adentrarse a fondo, si quieres evaluar el tiempo de carga de tu sitio web. En particular, en la sección Performance Metrics, o métricas de rendimiento, pues tiene interesantes cifras del tiempo de carga, que no verás en ‘Summary’:

First Contentful Paint: Mide cuán rápido aparecen los primeros elementos de contenido en tu página. En algunos sitios, son textos — en otros, imágenes.

Time to Interactive: Mide cuánto tarda en tu sitio en ser totalmente interactivo — o cuánto tarda en permitir a los usuarios que hagan clic, una vez la página inicie a cargar.
Speed Index: Mide cuánto tarda un usuario en poder ver el contenido en la página.

Bajo Performance Metrics, verás la sección Browser Timings, con:

Redirect Duration: Mide cuánto tardan todas las redirecciones (de dominio, de HTTP a HTTPS, entre otras), desde la solicitud inicial, hasta el último byte de la redirección final.
Connection Duration: Mide cuánto tarda en establecerse una conexión entre el servidor y el navegador del usuario, incluyendo el tiempo del enlace TLS/SSL, si es que el sitio usa HTTPS.
Backend Duration: Mide cuánto toma el servidor generando la página. Básicamente, es el tiempo, desde la solicitud del usuario, hasta la recepción del primer byte de datos.
Time to First Byte (TTFB): Mide cuánto tiempo pasa entre la solicitud HTTP del usuario, hasta que recibe el primer byte de datos del servidor. Es una métrica crucial para comprender los tiempos de respuesta del servidor.
First Paint: Mide cuánto tiempo toma el primer elemento visual en renderizarse en pantalla. Marca el punto en que los usuarios comienzan a notar cambios en la página.
DOM Interactive Time: Mide el tiempo que tarda el HTML Document Object Model (DOM), o Modelo de Objetos del Documento, en construirse completamente y ser 100% interactivo, sin tener que esperar la carga de hojas de estilo, imágenes y subtramas.
DOM Content Loaded Time: Mide cuánto toma el DOM en hacerse interactivo y en cargar todos los scripts. Indica cuándo la página será interactiva, en cuanto a funciones.
Onload Time: Mide cuánto tarda la página en cargar, así como sus recursos, como imágenes, CSS y JavaScript. Y mide en cuánto tiempo se activa el evento “onload”.
Fully Loaded Time: Mide cuánto tarda la página en cargar, y cuánto tarda cada actividad adicional de red, en detenerse. Esto suele demorarse más que el Tiempo de Carga del Contenido del DOM, pues incluye la carga de recursos que JavaScript podrá activar, tras el evento “onload”.

Así como con la pestaña ‘Summary’, este es un buen espacio para encontrar datos de tu sitio. Pero, no es el lugar idóneo para ver recomendaciones concretas, que te ayuden a mejorar su velocidad y rendimiento – la siguiente pestaña, ‘Structure’, sí lo es. Veámosla.

Pestaña Structure (Estructura)

En ‘Structure’, GTmetrix te auditará, basándose en buenas prácticas de Google para crear sitios con óptimo rendimiento, en su front-end. Verás cada problema que GTmetrix halle, según su prioridad. Así, verás primero los que más impacten la velocidad y el rendimiento de tu sitio.

Además, GTmetrix te ayudará a solucionarlos — Expande el problema, y verás una explicación detallada. Luego verás, arriba y a la derecha, ‘Learn how to improve this’ (Aprende cómo mejorar esto). Verás un tutorial de GTmetrix sobre cada problema específico de rendimiento.

Hay bastantes problemas tratando de impedir que tu sitio alcance su velocidad y rendimiento óptimos, pero GTmetrix te ayuda a hallarlos y solucionarlos, con un par de clics. Claro, según la cantidad de problemas de tu sitio, necesitarás más o menos tiempo en esta área de GTmetrix. Una vez soluciones tantos como puedas, podrás explorar el resto de pestañas en tu análisis.

Pestaña Waterfall (Cascada)

La pestaña ‘Waterfall’ presenta una tabla en cascada – y muestra, detalladamente, cómo carga tu sitio web. Intenta mostrar cada elemento, incluyendo scripts, archivos multimedia, y recursos solicitados de terceros, con detalles como duración y tiempos de ejecución. Las longitudes de las barras, indican cuánto tomó cada uno en su solicitud, descarga y ejecución.

‘Waterfall’ puede parecer abrumadora en un inicio, pero es ideal para depurar problemas de rendimiento y de página, pues te permite desglosar tu página visualmente, sección por sección, para identificar cuellos de botella o áreas problemáticas, con gran rapidez.

Al mostrar cómo los diferentes factores o componentes suman al resultado final, estos gráficos de cascada pueden ser vitales antes de tomar decisiones, como en dónde asignar recursos, qué priorizar, o dónde pueden tener más impacto tus intervenciones.

Pestaña Video

En ‘Video’, puedes ver un video que muestra cómo carga tu página. Identificarás cuellos de botella e interrupciones. Puedes ralentizar la reproducción, para ver mejor el comportamiento de la carga de tu página, y saltar a hitos importantes que suceden durante la ejecución de esta. Pero ten en cuenta que esta opción solo está disponible, si ya tienes una cuenta en GTmetrix.

Pestaña History (Historial)

Por último, tenemos la pestaña ‘History’. Aquí podrás ver tus reportes pasados (si tienes una cuenta e iniciaste tu sesión en ella). Además, puedes usar History Graphs para comparar la funcionalidad de tu sitio, con análisis anteriores. Así, seguirás su rendimiento durante el tiempo.

Cómo Aumentar La Velocidad De Tu Sitio WordPress

La idea de usar GTmetrix es implementar prácticas para optimizar tu sitio, capaces de impactar lo que en verdad lo ralentiza. Comienza por ahí. Claro, hay muchas buenas prácticas, extra, para que tu sitio cargue más rápido, como estas recomendaciones para impulsar a tu sitio:

Elige un buen alojamiento. Tu proveedor de alojamiento es vital para el rendimiento de tu sitio. Busca uno con buena reputación, que ofrezca recursos según tus necesidades, como DreamPress, nuestro alojamiento Administrado de WordPress.
Usa un Content Delivery Network (CDN). Los CDN pueden distribuir el contenido estático de tu sitio web, aprovechando servidores ubicados por el mundo. Así, los visitantes pueden cargar el sitio desde servidores más cercanos a ellos, más rápido.
Optimiza tus imágenes. Archivos pesados de imagen pueden ralentizar tu sitio. Usa herramientas o plugins como Smush, ShortPixel o EWWW Image Optimizer, para comprimir y redimensionar imágenes, sin comprometer su calidad por ello.
Minifica y combina archivos. Minifica tus archivos CSS, JavaScript y HTML para reducir su tamaño. Usa plugins como WP Rocket, Autoptimize o W3 Total Cache.
Usa la memoria caché. Implementa el caché y almacena copias de datos de acceso frecuente. Así, reducirás la necesidad de volver a generar esos datos. Hay plugins populares para esto, como WP Super Cache, W3 Total Cache y WP Rocket.
Limita tus plugins. Cada plugin añade más sobrecarga a tu sitio. Solo instala los necesarios. Revisa periódicamente, para desactivar o eliminar aquellos que ya no usas.
Optimiza tu base de datos. Límpiala frecuentemente. Eliminarás datos innecesarios como revisiones de entradas, elementos borrados y opciones transitorias.
Reduce las redirecciones. Muchas redirecciones aumentan los tiempos de carga, en especial desde móviles. Asegúrate de limitar la cantidad de redirecciones de tu sitio.
Usa la última versión PHP. WordPress se ejecuta con PHP. Asegúrate de que tu servidor use una versión reciente de PHP, para un mejor rendimiento y seguridad.
¡Mantén WordPress actualizado! Actualiza regularmente WordPress, sus plugins y temas, para tener lo último en optimizaciones de velocidad y en parches de seguridad.

Preguntas Frecuentes Sobre GTmetrix

¿Cuál Es la Diferencia Entre PageSpeed, YSlow, y Web Vitals en GTmetrix?

Google PageSpeed y YSlow: Son conjuntos de buenas prácticas de rendimiento web, creados por Google y Yahoo!, respectivamente. GTmetrix prueba tu sitio con base en sus reglas, y otorga puntuaciones, de acuerdo con el cumplimiento de las mismas.
Web Vitals: Son un conjunto de métricas, introducidas por Google, relacionadas con la velocidad, capacidad de respuesta y estabilidad visual. Buscan ayudar a los dueños de sitios, a la hora de medir la experiencia de los usuarios. Sus métricas clave incluyen Largest Contentful Paint (LCP), First Input Delay (FID) y Cumulative Layout Shift (CLS).

¿Por Qué Los Resultados Varían, Si Pruebo Mi Sitio Varias Veces?

Varios factores pueden modificar los resultados de las pruebas, como fluctuaciones en el rendimiento del servidor, congestión en las redes, recursos externos, y la carga de los servidores de GTmetrix. Si necesitas varias pruebas y todas arrojan resultados diferentes, igual hazlas. Luego saca un promedio de todos los resultados. Así tendrás una visión más precisa.

¿A Google Le Importa Pagespeed?

Sí, PageSpeed es muy importante para Google. La velocidad del sitio ha sido factor de clasificación para búsquedas de escritorio desde 2010, y para búsquedas móviles desde 2018.

¿Es Confiable GTmetrix?

Sí, la prueba de velocidad de GTmetrix es muy confiable al analizar el rendimiento de un sitio web. Usa métricas y buenas prácticas (bien establecidas) de Google Lighthouse y otras fuentes confiables, para evaluar la velocidad y la optimización de ese sitio. Igual, como con todas las herramientas, es mejor usar GTmetrix simultáneamente con otras herramientas de pruebas de rendimiento, para que te hagas una visión mucho más completa del rendimiento de tu sitio.

¿Cómo Se Compara GTmetrix Con Herramientas de Medición de Rendimiento como Pingdom?

Es sabido que GTmetrix y Pingdom son herramientas populares y confiables, para medir el rendimiento de sitios web. Aunque ambas te darán información sobre los tiempos de carga de tus páginas, sus tamaños y número de solicitudes, hay algunas diferencias:

Métricas y recomendaciones: GTmetrix basa sus sugerencias en Google Lighthouse y YSlow, mientras Pingdom tiene su propio conjunto de insights de rendimiento.
Ubicaciones de prueba: Ambas herramientas permiten que hagas pruebas desde diferentes ubicaciones geográficas, pero las ubicaciones disponibles pueden variar.
Funciones: En algunos planes, GTmetrix ofrece reproducción de video del proceso de carga. Pingdom, por otro lado, monitorea tiempo de actividad y servicios más extensos de monitoreo de sitios web.

¿GTmetrix Es Gratuito?

GTmetrix tiene su versión gratuita y con ella podrás probar y analizar tus sitios web. Sin embargo, si quieres usar funciones más avanzadas, como múltiples ubicaciones de prueba, acceso prioritario, o monitoreo más frecuente, necesitarás un plan premium.

¿Cuál Sería Una Buena Calificación En GTmetrix?

GTmetrix califica sitios web, según su cumplimiento de las buenas prácticas de rendimiento. Como en la escuela — una calificación A es excelente. De todos modos, sitios con B o hasta C, pueden dar una gran experiencia de usuario. No te centres en la calificación; mejor aborda las recomendaciones específicas que GTmetrix te da. Así, sí mejorarás la experiencia del usuario.

¿Es Mejor Tener Siempre Una Alta Calificación en GTmetrix?

Si bien una puntuación más alta suele indicar mejor optimización, es esencial que te centres en su impacto en el mundo real. A veces, una puntuación perfecta sobra, si la experiencia del usuario ya es magnífica. Siempre prioriza el rendimiento real del sitio y la experiencia del usuario, en lugar de buscar calificaciones perfectas.

¿Qué Pasará Si Obtengo Una Mala Calificación En GTmetrix?

GTmetrix te dará recomendaciones prácticas, basándose en sus resultados. Las sugerencias comunes incluyen optimizar imágenes, aprovechar la memoria caché del navegador, reducir redirecciones y tiempos de respuesta del servidor. Pero esas recomendaciones dependerán de tu sitio, así como de lo que sería más impactante para optimizarlo, según sus necesidades.

¿Cuál Es El Tiempo Ideal de Carga De Un Sitio?

Lo ideal es que un sitio cargue tan rápido como pueda, pero una referencia usual es entre 2 y 3 segundos o menos. Google indica que, mientras el tiempo de carga de la página va de 1 a 3 segundos, la probabilidad de rebote (usuarios que abandonan el sitio) crece en un 32%.

Sin embargo, los tiempos “aceptables” de carga pueden variar según la industria, el tipo de contenido del sitio y las expectativas del usuario. Siempre compáralos con la competencia, y trabaja duro para mejorarlos, dando grandes experiencias de usuario a todos tus visitantes.

Obtén Más Visitantes, Haz Crecer Tu Negocio

Nuestros expertos en marketing te ayudarán a incrementar tu tráfico y a convertir más visitantes de tu sitio web en compradores. Así podrás enfocarte en dirigir tu negocio.

Más Información

The post Aumenta La Velocidad De Tu Sitio Con GTmetrix appeared first on Guías para Sitios Web, Tips & Conocimiento.

Comandos Git: 21 Opciones Que Debes Conocer

Ian Hernandez — Tue, 03 Oct 2023 14:00:50 +0000

Cualquiera que use o conozca Git, sabe que hay términos y modificadores a seguir.

Y debes mantenerte al tanto de todo, pues hoy en día es un estándar en el control de versiones para productos tecnológicos.

Pero en vez de retenerlo todo en tu memoria, creamos esta guía completa de recursos con comandos críticos. Así tu uso de Git será más efectivo y eficiente.

¿No eres un superusuario de Git (aún)? Perfecto, no hay problema.

Los comandos que veremos van desde los cotidianos, hasta los raros y complejos. Y, como bono adicional, te daremos consejos de cada uno, sobre cómo usarlos durante tus proyectos de desarrollo.

Comenzaremos hablando del trasfondo de Git, y luego haremos una descripción completa de cómo usar Git en un entorno real.

Pequeño Resumen: Entendiendo Git, GitHub, y el Sistema de Control de Versiones

Los desarrolladores definirían a Git como a una plataforma de Gestión de Código Fuente (SCM, por Source Code Management). En otras palabras, es un sistema de control de versiones gratuito, fácil de usar y que, por ende, está en el corazón de muchos proyectos conocidos.

Esto nos lleva a una pregunta muy lógica, si no eres parte del mundo del desarrollo: ¿Qué es un control de versiones?

Crear algo a partir de código a menudo, conlleva pruebas, errores y varios pasos. Y, en muchos casos, colaboración.

Es muy fácil sobreescribir o perder elementos importantes, que requirieron esfuerzo. Si has trabajado con colegas, en tiempo real, sobre un documento de Google, sabes qué se siente.

Básicamente, una herramienta de control de versiones guarda cada iteración de tu progreso, durante los pasos de un proyecto. Esto es útil, en caso de que desees volver a una versión anterior para revisar elementos y reutilizarlos — o incluso, si quieres restaurar una versión más antigua de tu proyecto, si algo en su versión actual no funciona como debería.

Git se instala localmente, lo que implica que existe en tu computador, en lugar de en la nube. Es más, ¡no necesitas conectarte a internet para usarlo!

Así, brinda un repositorio seguro (o “repo”, que es un espacio de almacenamiento para código), para que los desarrolladores guarden cada borrador de los proyectos en que trabajan.

Git va más allá, gracias a su modelo de ramificación que lo hizo tan conocido.

Con Git, un desarrollador puede crear diversas “ramas de código” que se extienden desde algún proyecto. Básicamente, son copias del proyecto principal, o proyecto master, pero el término gradualmente está siendo dejado de lado.

Los cambios en estas ramas, no impactan el código del proyecto principal a menos que lo indiques. Con esta función los desarrolladores pueden hacer cosas como experimentar con nuevas funcionalidades o solucionar bugs. Los cambios realizados en una rama, no impactarán el código principal a menos que hagas un “merge” o fusión.

Git tiene mucho sentido para quienes trabajan en proyectos propios. Pero, ¿qué pasa si necesitas trabajar en equipo, en un proyecto de codificación?

Conoce GitHub.

GitHub es una plataforma de desarrollo para alojar repositorios de Git.

Es decir, es una forma de sacar tus repos de Git de tu máquina local y llevarlos a Internet, generalmente para que otras personas te colaboren con ellos.

GitHub se basa en la nube y tiene fines lucrativos, aunque sus elementos básicos pueden usarse gratis, una vez te registres.

La función principal de GitHub es permitir que los desarrolladores trabajen juntos en un solo proyecto en tiempo real, realizando revisiones remotas de código, además de monitorear el trabajo de los demás y actualizar el proyecto principal.

GitHub mantiene la característica principal de Git: evitar la sobreescritura y mantener todas las versiones guardadas de un proyecto. También trae funciones y servicios adicionales, como más almacenamiento, rápidos entornos de desarrollo, escritura de código con inteligencia artificial, soporte para auditorías de código y más. (Más información, en su página de precios)

Es importante mencionar que GitHub no es el único servicio en este espacio. Hay alternativas como Bitbucket, GitLab, entre otras.

Sin embargo, Git y GitHub funcionan muy bien juntos. Más adelante profundizaremos en ello.

Pero primero lo primero: hicimos una lista con muchos comandos de Git que todo desarrollador y equipo técnico debería conocer, para tener éxito en este entorno de control de versiones.

[glossary_term_es title=”Github” text=”GitHub es un servicio basado en la nube que los desarrolladores utilizan para almacenar su código, realizar seguimiento de los cambios en el código y colaborar con otros desarrolladores. Es una plataforma popular para colaborar en tiempo real en proyectos de software.”]

21 De Los Comandos Git Más Usados Que Debes Conocer

¿Estás listo para conocer los mejores trucos Git que puedas imaginar?

En esta sección nos sumergiremos en comandos Git, instrucciones, y todo lo que necesitas para usar Git exitosamente. Es más, te daremos consejos para usar cada uno, en tus proyectos.

Consejo profesional para aprovechar este documento al máximo: Presiona ‘command + F’ en un Mac, o ‘Ctrl + F’ en Windows, para abrir una caja de búsqueda y encontrar un comando específico, en caso de que busques algo puntual.

git config

git config es un comando muy útil para personalizar cómo funciona Git en tres niveles: del sistema operativo (sistema); específico del usuario (global); y específico del repositorio (local).

Prueba git config con estos movimientos:

git config --global user.email [tu dirección de correo]

Los desarrolladores lo ejecutan después de descargar Git, para configurar su dirección de correo electrónico.

git config --global user.name [tu nombre]

Con él, configurarás tu nombre de usuario.

git config --local

Con él, personalizarás la configuración específica de tu repositorio local. Esto anulará las configuraciones predeterminadas de Git, en los niveles global y del sistema.

git pull

git pull es un comando para obtener código de un repositorio remoto y descargarlo en tu repo local, el cual se actualizará luego, y coincidirá con lo que acabas de obtener.

Este merge, es vital para usar Git. En realidad, abrevia otros dos comandos: git fetch y luego git merge.

Estas son algunas maneras en las que este comando se usa, habitualmente:

git pull [remote]

Obtén un repositorio remoto específico y únelo con el repo local en que trabajas.

git pull --no-commit [remote]

Este comando obtiene el repo remoto, pero no lo fusiona automáticamente.

Como pull es un comando central de Git, hay muchas formas de utilizarlo. Git Branch Commands ofrece aún más ejemplos y combinaciones nuevas para que pruebes.

git fetch

git fetch, como comando independiente, descarga ‘commits’ de repositorios remotos en repos locales. Te brinda la opción de ver y cambiar el código de otros desarrolladores. Probémoslo:

git fetch origin

Descarga una copia del repositorio remoto origin y la guarda en tu disco local. Nada se cambia o fusiona por sí mismo, a diferencia de lo que pasa en git pull de forma predeterminada.

git fetch --all

Obtiene datos de todos los repositorios remotos (incluyendo origin).

git fetch --shallow-exclude=[revision]

Excluye confirmaciones de ramas o etiquetas específicas.

[glossary_term_es title=”Etiqueta” text=”Una etiqueta de WordPress es una taxonomía predeterminada que te permite categorizar tus publicaciones. Los lectores pueden hacer clic en la etiqueta de una publicación para ver artículos similares con la misma etiqueta.”]

git merge

El comando git merge combina ramas (generalmente dos, aunque pueden ser más) para crear un historial único. Git resaltará los conflictos que surjan en el merge, para que los resuelvas.

Las opciones para este comando incluyen:

git merge [branch name]

Con esto, fusiona los cambios de la rama nombrada, en la rama (branch) que estás usando.

git merge --abort

Detiene el merge y restaura el proyecto a su estado previo a ella. Este comando ilustra muy bien cómo Git mantiene versiones anteriores del código, para proteger el progreso del proyecto.

git add

git add es el comando a usar cuando estás listo para “guardar” una copia de tu trabajo. Suele usarse en conjunto con — git commit — pues agrega (o commit) lo ya guardado previamente en el historial en ejecución del proyecto.

Estas son algunas formas para especificar qué guardar (o “preparar”) con este comando:

git add [file]

Prepara todos los cambios hechos en un archivo puntual, para agregarlos al próximo.

git add [directory]

Así como el comando anterior, prepara cambios en un directorio específico, dejándolos listos para que los agregues cuando lo consideres.

git commit

git commit es el segundo comando base, de la trinidad de creación y monitoreo de cambios Git.

Básicamente, este comando conlleva almacenar todo cambio hecho con el comando git add. No hace esos cambios en el código principal, sino que solo los guarda de forma segura.

Algunas opciones para usar este comando, incluyen:

git commit --amend

Modifica lel último commit (lo último agregado), en lugar de crear uno nuevo por completo.

git commit -m [your message here]

Deja constancia de tu commit, con un mensaje que irá incluido dentro de los corchetes.

git push

git push es el tercer elemento base, del ciclo colaborativo en Git. Envía todos tus cambios y commits en repositorios locales, a repos remotos. A partir de aquí, otros desarrolladores del proyecto podrán iniciar a trabajar sobre tus actualizaciones. Es lo contrario al comando fetch.

Así es como se usa:

git push [remote] [branch]

Impulsa una rama específica, sus commits y objetos adjuntos. Además, crea una nueva rama local en el repositorio remoto de destino.

git push [remote] --all

Lleva todas las ramas locales a un repo remoto específico.

git branch

Crea, edita, y remueve ramas en git, con el comando git branch. Usa el comando branch de estas maneras:

git branch [branch]

Crea una nueva rama, la cual podrás nombrar, reemplazando la palabra entre corchetes.

git branch -c

Este comando copia una Git branch.

git push [remote repo] --delete [ branch name]

Borra una Git branch remota, nombrada en el último paquete o conjunto de corchetes.

git checkout

Usa el comando git checkout para navegar entre las ramas del repo en que estás trabajando.

git checkout [branch name]

Cambia a una Git branch diferente, nombrada en los corchetes.

git checkout -b [new-branch]

Simultáneamente, crea una nueva rama y ve a ella. Combinarás git branch y git checkout [new branch].

git remote

Con el comando git remote, tú podrás ver, crear, y borrar conexiones remotas, marcadores (por llamarlos de alguna manera), a otros repositorios. Esto te ayudará a referenciar repos en tu código sin tener que buscarlos y usar sus nombres completos, lo que a veces es incómodo.

Prueba estos comandos remotos:

git remote add [alias] [URL]

Añade un repositorio remoto, especificando su enlace y dándole un alias, o sobrenombre.

git remote -v

Obtén una lista de conexiones remotas, e incluye las URL de cada una.

git revert

git revert deshace cambios, creando un nuevo commit que los revierte, a tu gusto.

Una manera de usar (¡cuidadosamente, por favor!) el comando git revert, es:

git revert [commit ID]

Esto solo revertirá cambios asociados con el commit específico ya identificado.

git reset

git reset es un comando más riesgoso y potencialmente permanente para deshacer commits.

Este comando solo debería usarse en repositorios locales o privados, para prevenir la eventual interrupción de la codificación de algún otro desarrollador, dentro de un repo público y remoto. Como puede “dejar huérfanos” a otros commits, los cuales podrían borrarse luego, durante la rutina de mantenimiento Git, este comando sí puede borrar el duro trabajo de alguien.

Este es un comando complejo que debe usarse con discreción. Por eso, antes de usarlo por primera vez, te recomendamos leer esta guía sobre Git Reset de Bitbucket.

git status

git status te brinda información sobre tu directorio de trabajo (es donde quedan las versiones almacenadas de tu historial) y el área de preparación (es como un “área en construcción” entre el directorio y el repositorio). Con este comando, puedes ver en qué estado están tus archivos.

Hay una forma principal de utilizar este comando:

git status

Mira una lista de archivos preparados, sin preparar y sin monitorear.

git clone

Usa git clone para hacer una copia de un repositorio ya existente. Así, podrás duplicar un repo para experimentar, sin dañar nada disponible públicamente. Aquí tienes algunas opciones para usar este comando:

git clone [repository URL] --branch [branch name]

Clona el repositorio vinculado y dirígete justo a una Git branch específica, en él.

git clone [repo] [directory]

Clona un repo específico, en una carpeta de directorio particular en tu máquina local.

git init

Usa el comando git init para crear un nuevo repositorio Git como un subdirectorio .git, en tu directorio actual de trabajo. Es diferente de git clone, pues te permitirá crear un nuevo repo, en lugar de copiar tan solo, uno ya existente.

Las aplicaciones más comunes de este comando, incluyen:

git init

Aquí comienza todo. Esto transforma tu directorio actual, en un repositorio Git.

git init [directory]

Con esto, podrás convertir un directorio específico en un repo Git.

git init --bare

Esto genera un nuevo repositorio bare, en el cual no se pueden hacer commits. Esto establece un territorio de staging, o de pruebas, realmente útil para generar un ambiente de colaboración.

git rebase

git rebase puede reescribir la historia, para ayudarte a mantener limpios y precisos tus commits. Es una opción, si quieres hacer actualizaciones en la rama principal de tu proyecto, mediante un merge rápido, para mostrar una historia más lineal.

git rebase [target branch name]

Elabora de nuevo tu rama actual, en una rama de destino específica.

git rebase [target branch name] -i

Inicia una reelaboración interactiva desde tu rama actual, hacia una rama de destino diferente.

Este es otro comando complejo que no debe usarse en repositorios públicos, pues puede eliminar elementos importantes del historial de algún proyecto. Para obtener información sobre cómo funcionan sus versiones estándar e interactiva, te recomendamos de nuevo la guía de git rebase de Bitbucket.

git diff

Diffing es la práctica de mostrar las variaciones entre dos conjuntos de datos.

El comando git diff muestra las diferencias entre las fuentes de datos de Git, como los comentarios y los archivos, entre otros.

Las opciones para usar este comando incluyen:

git diff –staged

Muestra la diferencia entre lo que está preparado y probado, pero aún no agregado.

git diff [commit ID 1] [commit ID 2]

Este comando compara los cambios entre dos commits diferentes.

git tag

El comando git tag apunta a un momento específico en el historial Git; usualmente, un lanzamiento de versión. Las etiquetas no cambian, como lo hacen las ramas.

git tag [tag name]

Usa esto para nombrar una etiqueta y capturar el estado del repositorio en tiempo real.

git tag -d [tag name]

¿Quieres remover una etiqueta? Ejecuta este comando.

git rm

El comando git rm borra archivos, del directorio de staging y de aquel en que trabajas. Hay algunas maneras de probar git rm:

git rm [file]

Este es el código básico para preparar un archivo, que será eliminado en el próximo commit.

git rm --cached

Esto remueve un archivo del área de staging, pero lo mantiene en el directorio en el cual estás trabajando, para que tengas una copia local, en caso de que la necesites.

git log

git log brinda un registro de todos los commits en la historia de un repositorio. ¿Listo para probarlo? Aquí vamos:

git log [SHA]

Un Algoritmo de Hash Seguro (SHA) es un identificador único para cada commit. Usa este comando para mostrar un commit específico, así como cada commit hecho previamente.

git log --stat

El comando muestra cuáles archivos se cambiaron en cada commit, cuántas líneas se añadieron y/o eliminaron, y cuántos archivos y líneas se editaron.

git show

El comando git show da detalles sobre varios objetos Git, como árboles, etiquetas y commits.

Aquí hay algunas maneras de ejercitar este comando:

git show [SHA]

Es el más sencillo de los comandos git show. Usa el SHA que aprendimos previamente, para mostrar los detalles de cualquier objeto.

git show [SHA]:path/to/file

Esto mostrará una versión específica de un archivo que estás buscando cuando incluyes su SHA.

¿Todavía estás aprendiendo a usar Git, tienes preguntas sobre comandos mencionados, o solo estás ansioso por explorar aún más variaciones, para manipular tu código de mil maneras? Los tutoriales Git de Bitbucket son un gran recurso, profundo e interconectado, que te ayudará a llegar a donde quieras ir con Git.

Y deberías aprovechar todo esto a fondo. Después de todo, el software de código abierto, y la tecnología Git que lo impulsa, son el futuro de los negocios.

Comandos En La Vida Real: Cómo Desarrollar Con Git + GitHub En WordPress

Aquí te presentamos muchos términos y trucos que pueden ser nuevos para ti.

Si no estás muy familiarizado con Git, entendemos que será un poco difícil ver cómo todos estos términos y trucos se unen, para funcionar en un escenario de la vida real.

Así que no terminaremos este texto sin darte una guía de apoyo, sobre cómo utilizar Git y GitHub para prepararte a la hora de desarrollar, sobre un sitio web de WordPress.

1. Instala WordPress.org

Primero, la parte relacionada con WordPress.

Comenzarás instalando una instancia de WordPress.org (conoce aquí la diferencia entre WordPress.com y WordPress.org) y crea un ambiente de pruebas local en tu computador.

Si aún no tienes establecido un buen proceso y herramientas ideales para esto, nos gusta Local WP, una herramienta enfocada en desarrollo WordPress. ¡Te la recomendamos!

2. Instala Git

Luego, llega la hora de maniobrar con Git.

Instala Git si no lo has hecho aún. Encontrarás su última versión en el sitio web de Git.

Muchas máquinas con Mac y Linux, ya traen instalado Git. Verifica la tuya, abriendo tu interfaz de línea de comandos (como Terminal en Mac o Git Bash en Windows), e ingresando el primer comando de este tutorial.

git --version

Si Git está instalado, recibirás un número de versión de vuelta. Si no, esta guía de instalación Git te dará una mano al comenzar.

3. Crea Un Repo Local Con Git

Ahora, crearemos tu repositorio local de Git.

Accede a la carpeta de tu tema de WordPress (hicimos este ejemplo con Twenty Twenty-One), mediante este comando:

cd/Users/[you]/Documents/Websites/[website]/wp-content/themes/twentytwentyone

Reemplaza [you] y [website] con tus propios nombres de carpetas. Luego, inicia este directorio como repositorio, con este comando:

git init

Para añadir cada fila del directorio al índice, escribe:

git add

Confirma tus cambios con una nota que mantendrá tu historial organizado, con este comando:

git commit -m “first commit"

¡Tu repositorio local ha quedado configurado!

4. Crea Un Repo Remoto Con GitHub

A estas alturas, deberías crear una cuenta en GitHub, si es que aún no tienes la tuya.

Una vez la crees y entres, podrás crear un repositorio remoto, desde tu panel en GitHub.

Una vez termines de seguir los pasos, para configurar tu nuevo proyecto, llegará la hora de llevar tu tema de WordPress a tu nuevo repositorio remoto, ya en GitHub.

5. Añade Tu Proyecto WordPress A GitHub (Aprendiendo A Hacer Push)

Usa estos comandos en Git para llevar tu tema WordPress a GitHub:

git remote add origin [repo URL]

git push -u origin master

Reemplaza la URL entre corchetes, con un enlace al repo que configuraste en GitHub.

Después, ingresa tu nombre de usuario y contraseña de GitHub.

Una vez ingreses esos datos, los archivos confirmados en tu repositorio local, hasta este momento, se enviarán a tu repo de GitHub.

6. Paso Opcional: Obtener (Pull) Actualizaciones

Ahora que has trasladado los cambios de tu repositorio local, al repo remoto de GitHub, lo último que debes aprender, es cómo obtener cambios para lograr lo contrario: añadir actualizaciones, desde tu repositorio remoto, hacia el local.

Claro, si trabajas de manera independiente en tu proyecto de codificación, no necesitarás este paso. Pero conocerlo es útil, pues se vuelve necesario cuando colaboras con un equipo que hace y envía actualizaciones.

Entonces, obtengamos actualizaciones desde el repositorio local, con el comando fetch:

git fetch [URL]

Recuerda reemplazar [URL] con el enlace del repo de origen de las actualizaciones.

Así, los cambios se obtendrán directamente desde GitHub y se copiarán en tu repo local, para que ambos repositorios sean iguales. ¡Estarás sincronizado y listo, para trabajar en la versión más reciente de tu proyecto!

¿Todavía necesitas ayuda con Git?

Para obtener una explicación más detallada, consulta nuestra guía Cómo Usar GitHub Para Desarrollo WordPress.

O, mejor aún, contacta a nuestros expertos en desarrollo de DreamHost.

Permítenos encargarnos de los ajustes ocasionales en tu sitio web, o de la administración completa del sitio, para que tu equipo pueda volver al trabajo de desarrollo y gestión que impulsará a tu negocio en adelante.

Tú Lo Sueñas, Nosotros Lo Codificamos

Aprovecha nuestros más de 20 años de experiencia en programación, al elegir nuestro servicio de Desarrollo Web. Solo dinos qué deseas para tu sitio — y nosotros nos encargaremos.

Más Información

The post Comandos Git: 21 Opciones Que Debes Conocer appeared first on Guías para Sitios Web, Tips & Conocimiento.

Aprende A Codificar Con Estos Recursos en Línea

Ian Hernandez — Tue, 01 Aug 2023 14:00:12 +0000

¿Ustedes han escuchado sobre esta cosa llamada “el internet”?

En serio, yo sé que todos estamos intentando sobrevivir la era de IA generativa y salir bien librados con nuestros empleos, en la próxima década.

Y hay una sola cosa que no nos puede hacer daño: Aprender a programar.

Incluso con el surgimiento de las IA, los programadores, desarrolladores y codificadores son bastante requeridos alrededor del mundo.

Además, programar es más que simplemente construir cosas — codificar, te ayuda a aprender a solucionar problemas, ayuda a las personas con necesidades, y como Steve Jobs lo predijo, te enseña cómo pensar.

Las buenas noticias son que no tienes que vivir en el Silicon Valley o tener dispositivos de alta tecnología para aprender a codificar. La programación autodidacta ha estado en aumento y puedes unirte a las masas que están tomándose la web para aprender el siguiente lenguaje universal.

Con el clic de un mouse, puedes desarrollar un nuevo repertorio de habilidades de programación. Y tenemos todos los recursos para ayudarte a aprender a codificar y construir tu próximo sitio web o app.

Aquí hay una gran lista de 58 cursos gratuitos en línea, recursos de código abierto, y herramientas de bajo costo para comenzar.

Tabla de Contenidos

Aprende HTML

Aprende CSS

Aprende JavaScript

Aprende React

Aprende PHP

Aprende SQL

Aprende Python

Retos de Programación, Juegos Y Evaluaciones

Libros Para Aprender a Programar

Mentores de Programación y Meetups

Bonus: Podcasts de Programación

Bonus #2: Programación Para Niños

Llamando a Todos Los Autodidactas

Aprende HTML

Comencemos con el front-end.

Aunque el HTML no es necesariamente “programar”, es el bloque fundamental de construcción de la mayoría de páginas web en el mundo.

Si simplemente estás comenzando con los conceptos básicos para entender la programación, HTML es el mejor lugar para comenzar.

Veamos los mejores recursos para aprender HTML.

#1: Programming With Mosh (YouTube)

Sumérgete en el canal ‘Programming with Mosh’, y encontrarás clases cortas, fáciles de digerir sobre casi cualquier tema que puedas imaginar. Desde C++ hasta Java, Mosh ofrece una gran colección de videos en casi cualquier lenguaje, sintaxis y tema. La mayoría de videos son de solo 60 minutos, y te enseñarán el ABC del tema y cómo crear código limpio y correcto.

No es sorpresa que su video de HTML para principiantes logre que puedas escribir HTML funcional en una hora.

#2: Learn HTML de Codecademy

El curso de Codecademy, Learn HTML atraviesa un espectro de temas, incluyendo elementos, estructuras, tablas, formularios, y la tan discutida semántica HTML.

Después de inscribirte, verás un tour con explicaciones textuales, además de la oportunidad de remangarte las mangas y ensuciarte las manos con ejercicios reales de programación.

Lo mejor de todo es que: es 100% gratuito.

#3: Learn-HTML.org

No dejes pasar desapercibido learn-html.org, que es el hogar de los tesoros de los tutoriales HTML.

La aventura comienza con elementos básicos, selectores y clases, y posteriormente te impulsa a formatos de enlaces, listas e imágenes en HTML. Cada lección incluye ejemplos de código y ejercicios para ayudarte a dominar el arte de escribir marcado compatible.

Aprende CSS

Después de que domines el HTML, seguramente tendrás hambre de conocimiento y querrás hacer que las cosas se vean organizadas y que tengan una mejor apariencia. Ahí es donde el Cascading Style Sheets (CSS) entra en la escena.

Usa estos recursos para aprender cómo escribir CSS optimizado que funciona en cada navegador, tamaño de pantalla y resolución.

#4: CSS Crash Course de Codevolution (YouTube)

¿Necesitas un kit inicial de CSS? Échale un vistazo al curso rápido de CSS ofrecido por Codevolution. Es un tour breve – aunque bastante completo – sobre los conceptos básicos del CSS. Te enseñará a añadir y personalizar estilos en un documento HTML y además cubre color, textos, fuentes, listas, tablas y más.

Sin embargo, ten en cuenta que este es solo un curso básico. Es genial para principiantes, pero no abarcará el CSS a fondo.

#5: Curso completo de HMTL & CSS de SuperSimpleDev (YouTube)

¿Alguna vez has visto un video de YouTube de 7 Horas?

Si estás buscando una guía mucho más completa (y funcional) para aprender CSS, este video es un tutorial paso a paso genial. También cubre un poco de HTML, entonces si ya tienes conocimientos de HTML (o utilizaste uno de los recursos anteriores), puedes saltar entre las secciones para aprender a darle un estilo personal a tu contenido.

#6: Learn CSS de Codecademy

El curso de Codecademy “Learn CSS”, es otra grandiosa manera de aprender.

El curso te enseña la forma correcta de dar formato a los archivos, añadir funciones atractivas y diseños impresionantes. Cubre todo desde la sintaxis, hasta los colores y la tipografía. Cada lección proporciona una explicación detallada y prácticas. Puedes ver cómo tu código mejora la apariencia de tu sitio web en tiempo real.

[glossary_term_es title=”Tipografía” text=”La tipografía es el proceso de organizar un tipo de letra en variaciones de fuente, tamaño y espaciado. Esto implica hacer que la apariencia, el estilo y la disposición del texto sean legibles y agradables a la vista.”]

#7: CSS Diner

¿Alguna vez has pensado que dominar los selectores puede ser divertido? CSS Diner es un juego en línea que convierte el aprendizaje en una experiencia entretenida. Te equipará con las habilidades para abordar elementos específicos al comienzo de tu aventura CSS.

Aprende JavaScript

El HTML y el CSS son geniales, pero si realmente deseas “escribir código”, aprender JavaScript puede ser el punto inicial más fácil que puedes encontrar.

Al usar JS, podrás manipular componentes front-end y comenzar a trabajar en el desarrollo back-end. Eso te convierte en un desarrollador full-stack. (¡Felicitaciones!)

#8: Learnjavascript.online

Este curso es exactamente lo que dice la etiqueta. Learnjavacript.online es una manera ultra-sencilla (pero increíble) de aprender JavaScript desde tu navegador.

Es un hub interactivo donde puedes ver tutoriales pequeños y desglosados, remangarte las mangas virtuales, y experimentar con código real en el campo de práctica de código, todo sin dejar tu navegador. La magia reside en la fórmula “aprende y aplica”, permitiéndote practicar nuevas habilidades en la marcha. Disfruta los primeros 7 capítulos por cuenta de la casa, y si lo estás disfrutando, un solo pago desbloquea el entrenamiento completo.

#9: Scrimba

Imagínate una escuela de programación sin lecciones teóricas, sino solo un estilo de aprender mientras construyes. Todo se trata sobre habilidades de programación prácticas, sin la teoría. Solo recuerda, completar el curso básico de HTML & CSS hará que tu camino sea mucho más fácil cuando comiences con JavaScript.

#10: Free Code Camp

El sitio FreeCodeCamp.com ofrece un repositorio de cursos gratuitos, incluyendo varias herramientas y lecciones de aprendizaje de JavaScript. Puedes trabajar en 40 proyectos después de aprender los conceptos básicos. Hay menos instrucciones paso a paso que en otras guías, pero el contenido es igual de valioso.

#11: JSRobot

Si pensaste que programar se trataba solo de apilar comandos, JSRobot está aquí para cambiar esa idea. No gastarás mucho tiempo aprendiendo antes de que comiences a programar. Te encontrarás escribiendo código eficiente más rápido de lo que anticipaste. Entonces, trae tu taza favorita de té, café o mate, y deja que este pequeño robot te muestre los pilares de la lógica JavaScript, y ve cómo sucede la magia ante tus ojos.

#12: CodeCombat

CodeCombat desglosa las paredes del aprendizaje tradicional, proporcionando un espacio socialmente interactivo y atractivo para aprender a programar. La mezcla de un currículo completo y un encantador mundo de fantasía, hace que aprender se sienta como una aventura. Y para aquellos que son competitivos, pueden comparar sus habilidades de JavaScript con otros en la liga de CodeCombat AI.

Aprende React

ReactJS (usualmente llamado “React”) hace que sea fácil construir componentes reutilizables, formularios e interfases.

Esto es técnicamente una biblioteca de JavaScript, pero debido a que es tan popular y tan ampliamente utilizada, vale la pena tomarte el tiempo de aprender React si quieres especializarte en construir aplicaciones y software.

#13: Tutoriales Oficiales de React

El sitio oficial de React es una mina de oro para los recursos en general de React, desde documentación esencial y tutoriales, hasta un robusto foro de comunidad para solucionar problemas de manera colaborativa. También, hay disponible un enlace de GitHub al código fuente de React. Para los principiantes, la pestaña ‘Tutorial’ aloja una divertida lección que te hará desarrollar un minijuego, mientras que te enseña los fundamentos de React.

Está hecho a la medida para los aprendices prácticos y se complementa perfectamente con una gran cantidad de recursos avanzados bajo la pestaña ‘Docs’.

#14: Learn React de Codecademy

El curso autoguiado, Learn React de Codecademy, es un ticket al increíble mundo de la programación React.

Desde crear componentes, accesorios y estados para utilizar React con JavaScript, lo aprenderás todo. Al completar este curso te podrás construir aplicaciones simples de React. ¡Puedes convertirte en un profesional de React en solo 20 horas!

#15: Free Code Camp

Free Code Camp ofrece el curso, Learn ReactJS – Complete Roadmap. Propone un camino claro para la construcción front end de una aplicación hecha con React. Ideal para principiantes, puede ayudarte a incrementar tus habilidades de desarrollo con React de nivel intermedio, a avanzado.

#16: React JS Frontend Web Development For Beginners de Udemy

Este curso gratuito de Udemy está diseñado para llevarte paso a paso por los conceptos básicos de los ganchos y cómo trabajar con APIs externas. Adicionalmente, ofrece información clave sobre crear solicitudes AJAX y la construcción de nuevas aplicaciones.

Mientras que obtienes acceso a casi 3 horas de contenido de video por defecto, puedes probar la membresía paga para recibir un certificado, una vez que completes el curso y la oportunidad de participar en la sección de preguntas y respuestas, además de mensajería directa con el instructor.

#17: Egghead.io

¿Quieres adentrarte mucho más en el mundo de React? Conoce Egghead.io.

Este sitio proporciona numerosos cursos de video, diseñados especialmente para tu aprendizaje. La Guía Para Principiantes de React, es un curso de 30 partes que te permite aprender en un ambiente libre de distracciones, comenzando desde cero y culminando en una aplicación completamente desplegada.

Desde la comprensión de las capacidades de resolución de problemas de React hasta el rol de JSX y la gestión del estado con ganchos, es un curso práctico y exhaustivo. Además, una vez que hayas finalizado, hay muchos más cursos para profundizar.

Aprende PHP

Si trabajas con sitios WordPress, querrás aprender PHP.

PHP jala información desde la base de datos y te permite darle formato y mostrarlo en el front-end como un profesional. Acomódate con el editor de código y adéntrate para que puedas depurar el código del siguiente plugin que se revele.

[glossary_term_es title=”PHP” text=”El PHP (Preprocesador de hipertexto) es un lenguaje de scripts de código abierto. Es ampliamente utilizado en el desarrollo web y se puede usar dentro del HTML. Varios sistemas de gestión de contenido (CMS) populares, como WordPress, están construidos con el PHP”]

#18: PHP For Beginners Por Traversy Media (YouTube)

El curso “PHP Para Principiantes” de Traversy Media, es un tutorial invaluable para cualquiera que desee aprender PHP. A lo largo de 3 horas, el video de YouTube te lleva de la A a la Z del PHP, tocando temas como funciones, bucles y arrays.

Sus marcas de tiempo convenientes, te ayudan a enfocarte en las áreas de interés.

#19: PHP Tutorial For Beginners – Curso Completo Por Envato Tuts+ (YouTube)

¿Estás buscando pasar 7 horas aprendiendo PHP en vez de 3? Te tenemos cubierto.

Ya hablando en serio, Envato Tuts+ ofrece un curso completo de PHP, “Tutorial PHP Para Principiantes – Curso Completo”. Jeremy McPeak, el instructor, comienza con los fundamentos y progresivamente se adentra en el lenguaje. El curso está diseñado para que seas un experto en escribir funciones, manipular variables, comprender la sintaxis y manejar solicitudes GET y POST.

Mientras que es más largo que la opción anterior, además es más completo.

#20: Learn PHP de Codecademy

Para aquellos que buscan una fuente estructurada para aprender PHP, el curso “Aprende PHP” de Codecademy es una excelente opción.

Este es un currículo de 25 horas que cubre variables, funciones, arrays, bucles y otras cosas básicas de PHP. Cada módulo es seguido por ejercicios prácticos que refuerzan el aprendizaje. El curso también proporciona útiles ayudas, como pistas, una hoja de trucos, y foros de comunidad específicos para cada módulo. Además, puedes utilizar el área de pruebas integrada para probar tu código a medida que aprendes.

#21: PHP Apprentice

PHP Apprentice ofrece un enfoque único para a prender PHP. Este libro en línea es accesible de manera gratuita, desmitifica las prácticas PHP a través de sus bien estructurados capítulos y ejemplos de código. Lo mejor de todo, es constantemente mantenido y actualizado. Entonces, habitualmente hay nuevo contenido y se añaden nuevas lecciones.

Aprende SQL

SQL (pronunciado “sicuel”, significa “Lenguaje de Consulta Estructurada”) es uno de los lenguajes más comunes y populares para acceder y manipular datos en una base de datos. En otras palabras, aprender SQL es como aprender el sistema Decimal Dewey… pero para computadores.

#22: Tutorial SQL For Beginners (YouTube)

Un curso rápido de video de 45 mins, hace que aprender los conceptos básicos de SQL sea extremadamente fácil.

Este tutorial incluye un recorrido detallado sobre la configuración de Microsoft SQL Server y SQL Server Management Studio, dos herramientas gratuitas y potentes. Obtén una buena comprensión de las tablas, las claves principales y varios tipos de datos, construyendo una base sólida en SQL.

#23: Learn SQL de Codecademy

Codecademy ofrece cursos amigables con los principiantes, como Learn SQL (Aprende SLQ), que te guían a través de los conceptos principales de SQL y bases de datos relacionales. ¿La mejor parte? Puedes progresar a través de los módulos a tu propio ritmo, haciéndolo una elección ideal para aprendices independientes.

#24: SQL Tutorial En W3Schools

W3Schools ofrece un extenso tutorial para aquellos que buscan un entendimiento profundo. Cubre todo, desde escribir frases SQL correctamente estructuradas, hasta operaciones de creación de bases de datos y alteraciones. Una vez que has digerido el material, puedes comprobar tu aprendizaje con ejercicios prácticos.

#25: Complete SQL Bootcamp (Udemy)

El campamento completo de SQL en Udemy, es una opción sólida si estás buscando certificar tus habilidades SQL. El curso cubre análisis de datos, creación de tablas, establecimiento de bases de datos, y mucho más, usando PostgreSQL, una base de conocimientos que puede ser transferida a otras bases de datos SQL. Obtener esta certificación podría impulsar significativamente tu hoja de vida.

Aprende Python

Codificar no solo se trata de variables y frases condicionales.

El análisis de datos, estructuras de datos, algoritmos, y machine learning son temas populares actualmente. (Ya sabes, con esa molesta IA que requiere mucha, mucha, mucha información).

Aprender Python te ayudará a poner el pie en la puerta de estos temas y casos de uso.

#26: La Guía Para Principiantes de Python

Para los principiantes de Python, el sitio web oficial de Python es una fuente indispensable. La guía gratuita para principiantes, sirve como mapa de trabajo de tu aventura de aprendizaje. Te enlaza con varias herramientas de aprendizaje como quizzes, tareas, hojas de trucos, y comprobadores de estilo.

#27: Introducción a la Programación con Python (Udemy)

Hay un curso conciso, pero completo en Udemy enfocado para aquellos que son nuevos en Python.

Es un programa compacto que corre en menos de 2 horas, que cubre los conceptos esenciales de Python, tal como creación de scripts y funciones.

#28: Learn Python 3 de Codecademy

¿Estás listo para oficializar tus habilidades de Python?

El plan Pro de Codecademy trae consigo un curso inmersivo de Python 3, muy adecuado para una introducción a los scripts y los conceptos fundamentales de programación. Las lecciones abarcan varios temas, incluida la sintaxis de Python, los mecanismos de flujo de control, la creación de funciones y la estructuración de datos con listas y directorios. No hay requisitos previos y, después de aproximadamente 25 horas de estudio, los alumnos pueden obtener un certificado.

#29: LearnPython.org

LearnPython.org, una plataforma interactiva de aprendizaje, es el hogar de una gran colección de tutoriales de programación. Desde lecciones básicas sobre variables, hasta módulos avanzados de ciencia de datos, se ajusta a los aprendices de todas las etapas. También extiende un espacio colaborativo en Facebook, conectando aprendices de todo el mundo.

#30: Learning Python: From Zero To Hero (Free Code Camp)

¿Quién no quiere pasar de cero a héroe?

El curso gratuito de Code Camp “Learning Python: From Zero to Hero”, es un curso basado en texto que presenta los conceptos esenciales de Python en una manera clara y accesible. Domina el arte de las variables, conquista las frases condicionales, y desata el poder de los bucles a medida que navegas por las secciones interactivas. Explora la versatilidad de las listas, sumérgete en las complejidades de iterar a través de diversas estructuras de datos, y desbloquea el potencial de los objetos y clases. Para el momento que completas este curso, te habrás transformado de un principiante en Python a un héroe.

#31: Campamento Intensivo de Python, por One Month

Haz el salto de principiante a avanzado en programación de Python, con el Campamento Intensivo de Python, por One Month. Este completo curso, y autodidacta, ofrece un enfoque basado en proyectos para profundizar tu comprensión de Python. Si bien cuesta $299 USD, el material intensivo y los proyectos prácticos te proporcionan la base que necesitas para sobresalir como desarrollador de Python.

Retos de Programación, Juegos Y Evaluaciones

Sabemos que jugar no es gastar tu tiempo — en cambio, es una manera interesante de aprender y practicar nuevos conceptos a medida que aprendes código.

Usa estas actividades en línea para mejorar tus habilidades:

#32: CodeAbbey

CodeAbbey es una colección de problemas de práctica para principiantes y avanzados que te permiten obtener certificados y perfeccionar sus habilidades. Considéralo un tipo de tarea divertida.

#33: Coderbyte

Elige un idioma de programación y soluciona algunos retos; las soluciones y tutoriales acompañados te ayudan a fortalecer tus habilidades principales de programación con instrucciones de paso a paso.

#34: CodinGame

Juega juegos virtuales de programación (piensa en destruir naves enemigas con código), que te pueden enseñar habilidades esenciales y hacer que las compañías te vean.

#35: HackerEarth

Actividades de programación con propósito. Ayuda a resolver problemas del mundo real para empresas con soluciones de programación innovadoras mientras te unes a una comunidad de programadores que trabajan para mejorar sus habilidades

#36: HackerRank

Descubre tu competidor de programación interno y resuelve desafíos mientras interactúas en un sitio de reclutamiento líder para empresas (es decir, ¡es un creador de currículums!)

#37: Codewars

Un gran recurso para entrenarte a ti mismo, colabora con otros, y crea una variedad de lenguajes de programación.

#38: Exercism

El sitio web te promete ayudarte a “Volverte muy hábil en programación”.

No podemos discutir con eso.

Practica problemas (mini-misiones) para nuevos y expertos, hechos a la medida de tus intereses, ya sea que quieras aprender a programar, incrementar tu fluidez en el idioma que elegiste, o desarrollar código limpio. Solo envía tus soluciones y obtén retroalimentación útil. Funciona a través de GitHub.

Libros Para Aprender a Programar

Aquí no vas a encontrar libros empolvados y aburridos — estas recomendaciones de programación pueden proporcionarte con material útil de lectura.

#39: The Self-Taught Programmer

El manual perfecto para autodidactas, escrito por uno de los propios graduados de codificación convertidos en profesionales. ($9.99 USD Libro para Kindle)

#40: A Data-Centric Introduction To Computing

¿Quieres comenzar a aprender lo básico de ciencias de la computación y desarrollar tus habilidades? Este es el libro para ti.

Lee este libro gratuito en línea para obtener una introducción al mundo de la ciencia de computación.

#41: Software Engineering For Internet Applications

Escribir líneas de código es una cosa. El desarrollo de software — de hecho crear software funcional — es mucho más complejo. Échale un vistazo a este libro que va más allá de la programación de computadores y comparte cómo planear y desarrollar productos reales de software.

#42: Foundations Of Data Science

Si Python o SQL se robaron tu corazón, puede que estés más interesado en la ciencia de datos que en la escritura de código. Este libro evita la escritura de código y ahonda en el mundo de los datos avanzados y las matemáticas.

#43: How To Learn To Code & Get A Developer Job

Escrito por Quincy Larson, el fundador de FreeCodeCamp. Este libro une las habilidades prácticas de programación con aplicaciones en el mundo real. Si tu meta es usar tus habilidades para comenzar un nuevo trabajo o carrera en programación, ¡seguramente te ayudará a lograrlo!

Mentores de Programación y Meetups

¿Quieres conocer individuos que piensan igual que tú? Encuentra un mentor o evento de programación en tu área.

#44: Reddit Programming Buddies

Anuncios clasificados virtuales para programadores; encuentra compañeros de programación que coincidan con tus habilidades e intereses únicos y colabora en proyectos personalizados.

#45: CodeNewbie

La red social y comunidad que te permite conectarte con otras personas que también están aprendiendo programación. Comparte tu progreso, haz preguntas, y aprende en compañía.

#46: CodeBuddies

Esta es una amplia comunidad de programadores que se conectan a través de Slack y organizan reuniones de estudio (por medio de screen sharing). Haz que tus reuniones sean tan únicas como tus proyectos.

Bonus: Podcasts de Programación

Carga tu dispositivo con audios de lecciones de programación, y escúchalos camino a tu trabajo o mientras que haces tu rutina de ejercicios. Una vez que hayas dominado los cursos de programación, tal vez incluso te decidas a comenzar tu propio podcast.

#47: Coding Blocks

Habla sobre las mejores prácticas de desarrollo relevantes para diferentes lenguajes de programación.

#48: DevRadio

Aunque su último episodio salió hace algunos años, puede escuchar DevRadio de Microsoft, un podcast de desarrolladores y para desarrolladores con una gran cantidad de software e información de programación.

#49: Software Engineering Daily

Entrevistas destacadas con expertos que abordan temas tecnológicos como el desarrollo de aplicaciones móviles y las pruebas de desarrolladores.

#50: Developer Tea

Un podcast fácilmente digerible, diseñado para personas con una agenda apretada. Escucha fragmentos rápidos de todo tipo de detalles diseñados por desarrolladores.

#51: Programming Throwdown

Un podcast perfecto si quieres probar un poco de todo; cada programa cubre un lenguaje de programación diferente, por lo que puede ampliar tus conocimientos de codificación con cada episodio.

#52: CodeNewbie

Este podcast semanal presenta historias y lecciones útiles de otras personas que están en su camino de programación autodidacta.

#53: Learn To Code With Me

El podcast semanal de Laurence Bradford ayuda a los programadores autodidactas a hacer la transición al campo de la tecnología con ejemplos útiles del mundo real y consejos para desarrollar habilidades comercializables y mejorar tu currículo.

Bonus #2: Programación Para Niños

Resulta que nunca es demasiado temprano para comenzar a introducir a tus hijos a sus primeros bytes.

#54: C++ for Kids (Code Babies)

Este libro introducirá a tus pequeños a los fundamentos de la programación C++. También, echale un vistazo a HTML for Babies y Javascript for Babies, todo en conjunto con el sitio Code Babies. Puedes encontrarlos en Amazon, desde $9.19 USD.

#55: CSFirst

Este proyecto respaldado por Google ofrece una gama de recursos gratuitos que introducen a los niños a los conceptos de codificación y ciencia informática.

#56: Code.org Student

Un recurso juvenil para encontrar cursos de programación en línea o clases locales. Incluye juegos y actividades.

#57: MoonHack

Un evento récord para Code Club donde niños de 7 a 18 años de todo el mundo se unen para abordar proyectos. Los participantes pueden asumir el problema recomendado por MoonHack o su propia idea (con el tema de la luna, por supuesto). Según su sitio web, en los últimos seis años, más de 150 000 niños han codificado como parte de Moonhack.

#58: Code Your Own Games!: 20 Games To Create With Scratch

Atrae a los jóvenes desde temprano para que se involucren en la programación con esta guía visual fácil de seguir (y súper divertida) que los ayuda a aprender a programar sus propios juegos. Juego + aprendizaje = todos ganan.

Puedes adquirirlo en Amazon, por $11.69 USD.

Llamando a Todos Los Autodidactas

Ya sea que estés simplemente aprendiendo a escribir tu primera función o has estado hablando lenguajes de programación desde que usabas pañales, DreamHost es para ti.

Nuestra misión es simple. Hacemos que sea fácil convertir tus sueños en realidad.

Suscríbete a nuestro boletín para obtener más recursos increíbles para ayudarte a construir tu nuevo sitio o lanzar tu siguiente emprendimiento.

The post Aprende A Codificar Con Estos Recursos en Línea appeared first on Guías para Sitios Web, Tips & Conocimiento.

16 Frameworks Populares de CSS, Útiles Para Ahorrar Tiempo (Con Estilo)

Ian Hernandez — Thu, 22 Jun 2023 14:00:25 +0000

Antes, una hoja de estilos era simplemente eso… ¡Una hoja de estilos!

Codificabas manualmente el CSS para cada elemento. Y nos gustaba así.

Pero bueno… las cosas cambian… está bien. Desactivando el modo gruñón.

El CSS ha recorrido un largo camino desde la época de las páginas HTML sin formato. Uno de sus desarrollos más notables, es la creación y proliferación de los frameworks de CSS. Estas herramientas facilitan de gran manera la construcción y lanzamiento de proyectos nuevos, grandes o pequeños, para desarrolladores y diseñadores.

Además, los frameworks tienen gran impacto en los visitantes de una página y en cómo experimentamos todos la web. Crean un lenguaje compartido para la interfaz de usuario (UI) y la experiencia de usuario (UX) en sitios y aplicaciones web, para que casi todos los sitios sean más fáciles de entender, navegar y usar.

Hoy en día, casi 1 de cada 4 sitios en el internet fue construido mediante un framework CSS.

En este artículo, exploraremos 16 de los frameworks más populares y veremos cómo son empleados por empresas y desarrolladores independientes.

Tabla de Contenidos

¿Qué Es un Framework de CSS?

Beneficios de Usar un Framework de CSS

Características Clave de un Framework de CSS Moderno

Elige el Mejor Framework de CSS para Tu Proyecto

Sigue Construyendo

¿Qué Es un Framework de CSS?

Un framework de CSS es una biblioteca de código predefinido, diseñada para implementar estilos y diseños rápidos y consistentes en un sitio web. Traen código preescrito y reusable para elementos y componentes de diseño comunes, que se aplican fácilmente al HTML base. Así, se crean interfaces de usuario familiares y consistentes, o diseños de sitios web.

Los frameworks de CSS son utilizados por desarrolladores front-end para implementar con rapidez elementos como cuadrículas adaptables, formularios, y botones con estilo, u otros elementos importantes de UI, tanto en páginas web como en aplicaciones.

Beneficios de Usar un Framework de CSS

Bueno, pero ¿para qué molestarse usando un framework?

¿No podrías hacer todo esto tú mismo y ya? Bueno, sí… Pero ahí está el punto. Los frameworks son el resultado inevitable de un mundo en que diseñadores y desarrolladores escriben el mismo CSS básico, una y otra vez, para cada sitio o aplicación.

¿Por qué no escribirlo una sola vez y utilizarlo en todas partes?

Aceleran el Tiempo de Desarrollo

La respuesta más fácil a: “Por qué vale la pena emplear frameworks”, es la velocidad. Vienen listos para que los uses con muchos elementos y estilos. Sin ellos, cuando desarrolles un sitio web, tendrías que construirlo desde cero.

Entonces, ¿para qué reinventar la rueda?

Muchos desarrolladores y diseñadores web usan frameworks como una herramienta para prototipar rápidamente nuevos sitios web o aplicaciones, antes de construir un sistema de diseño personalizado.

Estilo y Diseño Consistentes

Otro beneficio clave de usar frameworks de CSS, es que todos tus estilos, elementos UI, botones y más aspectos, serán consistentes desde el inicio. No tendrás que pasar horas (días, semanas, o años) configurando estilos individuales, para asegurarte de que todos tengan exactamente el mismo margen, espaciado y tamaños de fuente.

Con el framework ya meticulosamente diseñado, habrás adelantado todo ese arduo trabajo.

Además, como los frameworks de CSS populares son tan comúnmente utilizados, ayudarán a que el sitio web se vea y se sienta familiar para los usuarios. Esto es vital, para una buena experiencia de usuario (UX).

Por último, pero no menos importante, piensa en accesibilidad. La mayoría de frameworks populares están construidos para una amplia gama de dispositivos y tamaños de pantalla, haciéndolos más accesibles para un mayor rango de usuarios.

Facilitan el Diseño Receptivo

Seamos honestos: Construir el diseño receptivo perfecto, es un dolor de cabeza.

Hay demasiadas variables a tener en cuenta. Piensa en ellas y ahora compáralas con todos los millones de dispositivos. Entonces, tu sistema de cuadrícula perfecto rápidamente, se convertirá en un caos.

Una vez más, los modernos frameworks de CSS tienen todo cubierto. Han realizado el trabajo duro (y las matemáticas) para construir un sistema de diseño adaptable perfecto, en píxeles. Todo lo que debes hacer, es aplicar las clases correctas de CSS.

Mejoran la Colaboración y Mantenimiento

Levanta la mano si te gusta hacerle mantenimiento al código de alguien más, o crear la documentación y descifrar los comentarios de otra persona.

La respuesta obvia es: no.

Dado que la mayoría de frameworks vienen con una amplia biblioteca de documentación y una comunidad de usuarios, tienes la ventaja de tener una base de código común a tu disposición, con información muy bien documentada sobre cómo utilizar todo esto.

Además, la mayoría de ellos son proyectos de código abierto. Entonces, puedes usarlos libremente, adaptarlos, e incluso (en algunos casos), redistribuir tu propia versión si quieres.

Características Clave de un Framework de CSS Moderno

Hay una amplia gama de frameworks de CSS. Pero, en su gran mayoría, tienen ciertas características clave en común.

Sistemas de Cuadrícula y Diseños Predefinidos

Con las cuadrículas es que la web… ¿Gira? Bueno, ellas hacen que la web se convierta en cajas, perfectamente proporcionadas. Es su razón de ser.

La mayoría de frameworks de CSS traen incorporado un sistema de cuadrícula, para darle un diseño flexible y fluido a tu sitio web. El sistema usualmente ofrece muchas opciones de personalización, por lo cual se adaptan a muchos tamaños de pantalla, resoluciones y estructuras de página.

Solicitudes de Medios Adaptables

Otra cosa genial que la mayoría de los frameworks hacen por ti de modo predeterminado, son las solicitudes de medios, para ajustar automáticamente estilos, en función de las características del dispositivo.

Estos sistemas pueden ser complejos y tediosos de desarrollar desde cero. Pero son parte fundamental de la web moderna, para garantizar que tu contenido se adapte y presente correctamente, sin importar el dispositivo.

Componentes de IU y Plantillas Pre Construidas

Muchos frameworks de CSS traen su biblioteca de componentes de IU pre construidos y pre estilizados. Hablamos de botones, formularios, tablas, interruptores y más — listos para usar, con tan solo aplicar una sencilla clase.

Así, es más rápido construir interfaces y páginas, crear una base para un aspecto consistente, y una interfaz de usuario familiar en todo el sitio web (y en la web en sí).

Tipografía y Opciones de Personalización de Temas

Muchos de los frameworks que nombramos aquí, traen opciones incorporadas para personalizar y tematizar. Así, es simple aplicar elementos como los colores de tu marca, tus fuentes preferidas y otros toques, que harán que el aspecto coincida con tu estilo de marca.

1: Bootstrap

Bootstrap comenzó como un proyecto secundario, hecho y compartido por desarrolladores de Twitter. Hoy, es el framework de CSS más popular para diseño web receptivo y móvil. Millones de personas usan Bootstrap para crear diseños web limpios, consistentes y familiares.

Características clave:

Sistema de cuadrícula adaptable
Componentes pre construidos de IU
Temas personalizables y extensibles
Documentación extensa

Muchas empresas, incluyendo Twitter (obviamente), Spotify y Udacity, como se ve en la imagen anterior, usan el framework Bootstrap en sus sitios, ya sea en parte o totalmente.

¿Por Qué la Gente Ama a Bootstrap?

Las razones para amar a Bootstrap, son las mismas por las cuales la gente ama a los frameworks en general. Es simple, limpio y fácil de usar.

Hay una gran comunidad de expertos con experiencia en la construcción con Bootstrap, capaces de responder casi a cualquier pregunta que se te ocurra hacerles.

Y, aunque a veces se le atribuye ser algo básico, Bootstrap es muy personalizable, si es que deseas ir más allá de lo que te ofrece por defecto.

¿Qué No le Gusta a la Gente de Bootstrap?

Por lejos, la crítica más grande hacia Bootstrap, es que todos sus sitios lucen iguales.

“Son aburridos”, suelen agregar algunas personas.

Sin embargo, eso es el resultado de que muchas personas lo usan exactamente como viene, sin conocerlo, ni tomarse algún tiempo para experimentar con él o personalizarlo.

Algo que debes tener en mente es que este framework suele ser pesado. El archivo puede ser mayor de lo que debería ser el de un sitio web simple. Tal vez por eso la Encuesta del Estado de CSS reveló que la satisfacción con Bootstrap está dividida, más o menos en un 50/50.

2: Tailwind CSS

Quizá, Tailwind CSS es un movimiento en la misma medida que es un framework.

Su creador, Adam Wathan, escribió un manifiesto, sobre el pensamiento tras bambalinas de Tailwind CSS. Para él, en esencia, el CSS no debería ser descriptivo y semántico (Como la clase “header”), sino funcional (Como “center-flex-3”).

Él lo llama un framework CSS de utilidad primero.

Y este enfoque, parece funcionar para muchos. Tailwind tiene el primer lugar en satisfacción, en la Encuesta del Estado de CSS, con un porcentaje del 80%.

Características clave:

Clases de utilidad para facilitar el estilo.
Diseño adaptable.
Configuración personalizable.
Enfoque compatible con componentes.

Reconocidas empresas tecnológicas, como OpenAI (ChatGPT), Shopify, Wealthfront y Loom, optaron por Tailwind CSS.

¿Por Qué la Gente Ama a Tailwind?

Dado que Tailwind busca ser útil y funcional, su flexibilidad es casi infinita.

No hay diseños pre construidos, como en Bootstrap. Pero puedes combinar y superponer clases y ubicar tus elementos HTML, en un número casi infinito de diseños y cuadrículas CSS.

Lo que más le gusta a la gente, es que pueden estilizar sus divisiones, sin consultar la documentación. Como las clases de utilidad suelen tener nombres intuitivos, tú puedes aplicar estilos rápidamente, sin alternar a cada rato entre la biblioteca de CSS y el marcado.

¿Qué No le Gusta a la Gente de Tailwind?

En pocas palabras: a mucha gente no le gusta el cambio, ¿o no?

Tailwind rompe algunas tradiciones muy arraigadas en los frameworks de CSS e incluso en el desarrollo web, más ampliamente.

Hay muchos argumentos, sobre por qué este enfoque para el código CSS no es óptimo. La “separación de preocupaciones” es el principio subyacente detrás de cómo se escribe el CSS (y la mayoría de otros códigos). Tailwind, pone ese concepto de cabeza.

Mención Especial: Daisy UI

Si el funcional framework de Tailwind no es lo tuyo, hay una gran biblioteca llamada Daisy UI, diseñada por Pouya Saadeghi. Es un plugin que construye sobre Tailwind CSS, dándote un conjunto de clases del estilo de Bootstrap.

Daisy UI te da nombres de clases para componentes comunes de interfaz de usuario, como botones, tarjetas, e interruptores, entre otros. Permitiendo que los desarrolladores se enfoquen en aspectos más críticos de sus proyectos, en lugar de estilizar elementos básicos. Está construido sobre Tailwind CSS y, por lo tanto, todo es personalizable con clases utilitarias.

Uno de los mayores beneficios de Daisy UI, es que reduce significativamente la cantidad de nombres de clases que necesitas escribir; más o menos, en un 80%. Y mientras, puede reducir el tamaño de tu HTML en un 70%. Además, agrega un conjunto de nombres de colores personalizables a Tailwind CSS, lo que le da flexibilidad a los desarrolladores, para que creen un Modo Oscuro, u otros temas, sin tener que agregar nuevos nombres de clases.

3: Bulma

Bulma es un framework de CSS ligero, basado en Flexbox.

La sintaxis de este framework es en lenguaje sencillo, así que se basa en gran medida en clases utilitarias, o modificadores descriptivos, como “.button” y como “.is-large”.

Características clave:

Sistema de cuadrícula, basado en Flexbox
Arquitectura modular
Potenciado por Sass para brindar una personalización sencilla
Código y diseño minimalistas

Ejemplos de sitios web conocidos que utilizan Bulma: CSS Ninja y Signal.

¿Por Qué la Gente Ama a Bulma?

Usando Bulma, puedes sentirte como en el juego de Lego de los frameworks de CSS. Es muy simple y se entiende rápidamente. Por eso, es ideal para principiantes, o personas que necesitan simplemente una solución rápida.

Aplicando algunas clases con nombres lógicos, puedes construir módulos, aplicar animaciones CSS y crear avanzados estilos. Además, no tendrás dependencias de JavaScript, así que podrás usarlo junto con casi cualquier framework de JavaScript.

¿Qué No le Gusta a la Gente de Bulma?

La simpleza de Bulma puede ser una espada de doble filo.

Aunque es un primer paso excelente para conocer los frameworks de CSS, puede que los desarrolladores más avanzados se quejen, argumentando que le falta sofisticación, o una capacidad de ampliación de opciones más robustas.

4: Foundation

En el extremo opuesto de Bulma, está Foundation.

Foundation no pretende ser sencillo y, de hecho, es bastante complejo, si lo comparas con otras opciones. Es un framework de front-end adaptable, diseñado con prioridad para el desarrollo móvil. Se usa en sitios web y correos electrónicos.

Unos aproximadamente 500,000 sitios web en todo el mundo, lo usan.

Características clave:

Sistema de cuadrícula adaptable
Conjunto completo de componentes de interfaz de usuario
Variables personalizables de Sass
Integración con herramientas y bibliotecas populares de front-end

¿Por Qué la Gente Ama a Foundation?

Foundation es, en cierta medida, el “original”.

Dado que está aquí desde antes del “boom de Will Smith”, muchos desarrolladores están muy familiarizados con Foundation. Por eso, conocen su sintaxis y convenciones.

Es un producto maduro. Tiene muchas características, gran documentación y recursos.

Además, es de los mejores frameworks, pensando en accesibilidad.

¿Qué No le Gusta a la Gente de Foundation?

Como pasa con muchos productos ya maduros, Foundation puede parecer algo pesado, si lo comparas con frameworks modernos y ligeros.

Ha acumulado muchas características solicitadas y opciones de personalización. Por eso, su código y el tamaño de sus archivos pesan más. Además, dado que las convenciones han cambiado, su curva de aprendizaje es algo pronunciada si eres principiante, especialmente si vienes de Tailwind o incluso Bootstrap.

5: Semantic UI

“Todo lo que es arbitrario puede mutar”.

Ese es el dogma de Semantic UI.

En esencia, este framework te ayuda a construir y escalar interfaces familiares para sitios y aplicaciones web.

Características clave:

Presenta nombres intuitivos de clase, legibles para humanos
Tiene una amplia gama de componentes de interfaces de usuario y diseños
Cuenta con temas y estilos personalizables
Se integran con bibliotecas y frameworks de JavaScript populares, como Angular

Muchos sitios y empresas utilizan Semantic UI, como Accenture y Snapchat.

¿Por Qué la Gente Ama a Semantic UI?

Semantic UI tiene una sintaxis fácil de entender, por lo cual es fácil crear allí un proyecto. Se basa en su gran colección de componentes de interfaz de usuario, como interruptores, botones, modales, tarjetas, campos de texto y más.

Pero, tal vez su característica más popular, es que te permite personalizar los temas.

Semantic trae su biblioteca de temas, con más de 3,000 variables personalizables. Estos, se heredan en todos los componentes de la interfaz de usuario.

¿Qué No le Gusta a la Gente de Semantic UI?

Como Semantic se concentra en la interfaz de usuario y es tan extenso, puede llevar mucho código que no usarás. Algunas personas lo considerarán demasiado pesado para proyectos simples, a la hora de compararlos con frameworks más compactos.

6: Materialize

El framework de CSS Materialize, se basa en los principios del Diseño Material de Google.

Se enfoca en darte un diseño visual audaz, con animaciones centradas en UX (motion).

Materialize es realmente popular. ¡Tiene más de 38,000 estrellas en GitHub!

Características clave:

Componentes y estilos inspirados en el Diseño Material
Sistema de cuadrícula adaptable
Personalización potenciada por Sass
Plugins de JavaScript incorporados

Materialize es utilizado por un amplio rango de sitios, siendo las pequeñas empresas y los proyectos personales, la mayoría de ellos.

¿Por Qué la Gente Ama a Materialize?

Materialize es una solución simple y sin mucho adorno, para que tu sitio web sea funcional y se vea limpio. No ofrece todo bajo el sol, pero es eso, precisamente, lo que le gusta a la gente.

¿Qué No le Gusta a la Gente de Materialize?

Como es el caso usualmente, lo simple suele implicar limitaciones. Materialize no es tan robusto o extensible como otros frameworks. Además, depende de JavaScript para ciertos movimientos.

7: UIkit (UI Kit)

Otro framework modular, que también está enfocado en interfaces de sitios y aplicaciones web, es UIkit. Es menos popular que Semantic UI (por poco), pero no menos poderoso.

UIkit es un framework centrado en la interfaz de usuario. Muchos sitios y aplicaciones web lo prefieren, entre ellas Crunchyroll, Moqups y Rover.

Características clave:

Enorme arquitectura modular, con importaciones selectivas
Sistema de cuadrícula adaptable
Variables y mixins de Sass para personalización
Amplia biblioteca de componentes de interfaz de usuario

¿Por Qué la Gente Ama a UIkit?

Tal vez UIkit no tiene un gran nombre en el mercado, pero también es más pequeño en tamaño, tamaño de archivo y complejidad.

UlKit trae una biblioteca de componentes UI completa, pero aun así, es ligera. No pierde en términos de funcionalidad. Podrás personalizarlo con una configuración sencilla y rápida — ya sea con el proceso de compilación proporcionado, o con el tuyo propio (empleando Less).

¿Qué No le Gusta a la Gente de UIkit?

Tal vez la desventaja más grande de UIkit es que pasa algo desapercibido, al lado de otros frameworks más grandes y populares.

Pero, ¿sabes qué?, eso es precisamente lo que lo hace tan genial.

Ya en una nota más seria, una gran desventaja es que su comunidad de usuarios es más reducida, así que será más difícil el hallar respuestas ante tus preguntas, o encontrar tutoriales, sobre implementaciones específicas.

8: Ant Design

Ant Design busca ser más que solo un framework de CSS. Realmente, es un sistema de diseño, con un conjunto de componentes React de alta calidad, pensado para construir interfaces de usuario enriquecidas e interactivas.

Desarrollado y lanzado por Ant Group (la misma empresa matriz de Alibaba), Ant Design es similar a los sistemas de diseño lanzados por empresas tecnológicas estadounidenses como Alphabet y X (que antes tú y yo conocíamos como Google y Twitter).

Características clave:

Amplio conjunto de componentes UI
Lenguaje y estilo de diseño consistentes
Temas y apariencia personalizables
Documentación extensa y soporte de la comunidad

Algunos ejemplos de reconocidos sitios web que usan Ant Design, son Alibaba (como era de esperar), Tencent y Baidu.

¿Por Qué la Gente Ama a Ant Design?

Al elegir a Ant Design, podrás disfrutar de una colección ampliamente sólida de recursos para diseñadores y desarrolladores. Va más allá de ser un framework de CSS, pues se trata de todo un sistema (de hecho, un lenguaje) aplicable directamente a tus propios proyectos.

Alrededor tiene una gran comunidad y su sistema de diseño ha sido probado y comprobado en grandes empresas y proyectos, que generan ingresos de miles de millones de dólares.

Piénsalo como un modelo de franquicia para tu proyecto web.

¿Qué No le Gusta a la Gente de Ant Design?

Como tal vez imaginaste, una funcionalidad extensa implica archivos tamaño jumbo.

El sistema completo de Ant Design (sin comprimir) pesa cerca de 100 MB.

La otra limitación es que Ant Design está diseñado en especial para proyectos de React. Si manejas otra biblioteca de JavaScript, será todo un desafío adaptar los componentes.

9: Primer

Primer es un framework de CSS realmente popular para desarrolladores y también para sitios y aplicaciones web enfocadas en estos profesionales. Está detrás del diseño de GitHub y los componentes de UI.

Busca cumplir un único propósito y te será familiar si has explorado los repositorios.

Características clave:

Arquitectura modular con importaciones selectivas
Sistema de cuadrícula adaptable
Personalización impulsada por Sass
Funciones de accesibilidad incorporadas

¿Por Qué la Gente Ama a Primer?

Primer es como una gran obra de infraestructura. Aunque es discreto y sencillo, hace muy bien su trabajo. Además, saber que el equipo detrás de GitHub creó (y mantiene) la biblioteca, es un gran impulso para la longevidad y confiabilidad del proyecto.

¿Qué No le Gusta a la Gente de Primer?

Como supondrás, la estética de diseño de GitHub no es ideal para todos los proyectos.

Algunos se quejan de que Primer no es tan universal como otros frameworks, y por eso no es la elección ideal para sus proyectos o sitios web, más allá de que estos no se enfocaron en los desarrolladores desde un inicio. También, tiene un conjunto limitado de componentes de IU, que tienen sentido en el ecosistema de GitHub.

10: Tachyons

Tachyons te promete “Interfaces de carga rápida, altamente legibles y 100% adaptables”.

Como está diseñado para utilizar un CSS mínimo, podrás crear rápidamente una página de inicio, un portafolio personal, o un sitio de proyecto.

Características clave:

Arquitectura CSS de tipo atómica con clases de utilidad
Capacidades de diseño adaptable
Configuración y configuración mínimas
Tamaño de archivo pequeño, para cargas rápidas

¿Por Qué la Gente Ama a Tachyons?

A la gente le encanta que es un framework de uso rápido y sencillo. No pesa mucho y carga con facilidad. Es ideal para proyectos pequeños, sitios personales y otros usos simples.

Es como adquirir un Honda Civic de los frameworks.

Vas a la segura, funciona bien y es confiable.

¿Qué No le Gusta a la Gente de Tachyons?

Si vas a usar Tachyons en un proyecto más complicado o visualmente complejo, te costará un poco de tiempo y esfuerzo. Por eso, no es la primera opción para quienes desean más que una simple página (o dos), basadas en una cuadrícula.

11: Pure (Pure CSS)

Yahoo!

Este es un nombre que no se escucha todo el tiempo (A menos que debas responder una pregunta en un examen sobre cuáles son las alternativas más conocidas, ante Google.)

Algo de Yahoo que se ha hecho muy popular entre hackers y emprendedores, es su framework de CSS, Pure CSS. Con 23k estrellas y 2.5k forks en GitHub, definitivamente es de las opciones más queridas por la gente. Por lo menos de las que integran esta lista.

Características clave:

Pequeño y liviano
Cuadrículas adaptables
Construido sobre Normalize.css
Manejo de formularios listo para usar, con opciones creativas

¿Por Qué la Gente Ama a Pure?

PureCSS es una herramienta potente para CSS personalizado, o para complementar otros frameworks. Es muy ligero y ofrece componentes útiles, que se pueden agregar a sistemas existentes.

Así, es fácil añadir a tu conjunto cuadrículas, formularios, botones, tablas y más.

¿Qué No le Gusta a la Gente de Pure?

Pure funciona mejor como un servicio adicional, que como solo un framework. No tiene una biblioteca completa, como otras opciones, ni ofrece temas, o características que faciliten la personalización del aspecto y la sensación del proyecto, con un par de ediciones rápidas.

12: Material Design Lite

Dejando un poco a un lado a Materialize, es bueno que sepas que en Google abrieron el código fuente de su framework Material Design. Como su nombre lo sugiere, es una versión más ligera y sencilla de framework.

Usa menos JavaScript y busca ser más accesible, ante una amplia gama de dispositivos y navegadores.

Puedes ver Material Design Lite (MDL) en plena exhibición, en sitios como Google Wallet, Google Workspace, el sitio de desarrolladores de Google y otros más.

Características clave:

Filosofía de Material Design y componentes UI
Componentes innovadores como botones, tarjetas, deslizadores, indicadores de progreso y más
Sin dependencias externas
Muchas opciones de temas

¿Por Qué la Gente Ama a MDL?

MDL trae un conjunto muy funcional de componentes para aplicaciones, formularios y más.

Dado que está construido sobre los principios de Material Design, la funcionalidad y la accesibilidad son elementos centrales en sus diseños y componentes.

¿Qué No le Gusta a la Gente de MDL?

MDL, en esta etapa, puede parecer técnicamente obsoleto. Esto quiere decir que no recibirá actualizaciones o soporte.

Además de eso, toda su estética puede parecer algo limitada. Puede dar la sensación al usuario, de haber sido creado exclusivamente para productos de Google y nada más.

13: Spectre.css

Spectre es una asombrosa opción para comenzar rápidamente. Este framework liviano y minimalista, te brinda muchos elementos básicos que necesitas para lanzar un sitio web desde cero, con una apariencia atractiva y componentes familiares de IU.

Características clave:

Su archivo es pequeño (Más o menos unos 10 KB, comprimido)
Cuadrícula basada en Flexbox
Clases de utilidad incorporadas

¿Por Qué la Gente Ama a Spectre?

Spectre es ideal para una estética simple, minimalista y limpia. El enfoque se centra en la usabilidad y la eficiencia. No te dará muchos extras o adornos, pero hará el trabajo.

¿Qué No le Gusta a la Gente de Spectre?

Si estás buscando un framework expansivo, con avanzadas opciones de tematización, una comunidad próspera y mucha documentación, tal vez esta no sea la opción ideal para ti.

Spectre pasa un poco más desapercibido. Es una herramienta capaz de hacer el trabajo, pero no tiene ni de lejos la popularidad y adopción de Foundation o Bootstrap.

14: Milligram

Otro framework menos conocido es Milligram, que destaca por ser pequeño y liviano. Incluso más que otras opciones pequeñas, ya mencionadas aquí.

Si quieres un diseño minimalista y una solución rápida y simple para comenzar con un proyecto, es una opción que vale la pena tener en mente.

Características clave:

Diseño minimalista
Tamaño de archivo muy pequeño (más o menos unos 2 KB, gzip)
Sistema de cuadrícula basado en Flexbox

¿Por Qué la Gente Ama a Milligram?

Milligram puede ser el framework de CSS más ligero y sencillo disponible, si quieres hacer tu proyecto desde cero. Cuenta con muchas de las características destacadas de otros frameworks, pero su tamaño de archivo es sorprendentemente pequeño.

Sus convenciones y clases facilitan, también, el aprendizaje sobre la marcha.

¿Qué No le Gusta a la Gente de Milligram?

Milligram sufre las mismas desventajas de otros frameworks no tan conocidos. Encontrarás un menor apoyo de la comunidad. Aun así, la documentación está a la altura de frameworks mayores. Su simplicidad puede reducir la necesidad de ayuda adicional.

15: Water.css

Water es un sistema CSS sin clases, integrado en un sitio estático. No está diseñado como otros frameworks. Aplica sus estilos directamente sobre los elementos HTML de la página, así que te da un sistema de diseño rápido, sin la necesidad (o habilidad) de construir diseños más complejos.

Características clave:

Sin clases
Extremadamente ligero
Dos temas predefinidos: modo claro y modo oscuro
Totalmente adaptable

¿Por Qué la Gente Ama a Water?

Water es ideal para una solución CSS rápida, una plantilla de estilo, o una maqueta sencilla.

Como cumple lo que promete, es una solución rápida, sin complicaciones y muy rápida.

¿Qué No le Gusta a la Gente de Water?

Water simplemente no funciona en sitios web o aplicaciones de tipo complejo. No tiene rejillas, ni algunos componentes vitales, para proyectos más grandes. En última instancia, prioriza la simplicidad (al extremo), a expensas de la personalización o extensibilidad.

16: Vanilla

Vanilla Framework o Vanilla CSS (ten cuidado de no confundirte con el término coloquial “CSS vainilla”, que te habla del CSS básico o tradicional) es un framework hecho y empleado por Canonical, la empresa matriz de Ubuntu.

Características clave:

Arquitectura escalable, ideal para proyectos web más grandes.
Sistemas modulares.
Construido con Sass.

¿Por Qué la Gente Ama a Vanilla?

Aunque no es un framework tan popular como Bootstrap, Vanilla cuenta con el respaldo, los recursos, la documentación, e incluso con el soporte de un producto a nivel empresarial.

Analiza de forma detallada la accesibilidad de tu proyecto, mientras te da notas puntuales sobre su compatibilidad con diversas pantallas y navegadores (hasta la versión específica).

Sus componentes y estilos, además, son simples y universales.

¿Qué No le Gusta a la Gente de Vanilla?

Haciendo honor a su nombre, el proyecto puede verse algo “vainilla” para algunos. Es decir, sin toques distintivos. Con una estética neutral y funcional, sí, pero sin mucho brillo.

Elige el Mejor Framework de CSS para Tu Proyecto

Ahora que te compartimos estas 16 increíbles opciones, ¿cómo elegirás la ideal para ti?

No hay respuestas correctas o incorrectas, pero recuerda estas preguntas clave, al tomar la decisión. Seguro que te ayudarán a reducir el número de alternativas.

Requerimientos y Metas del Proyecto

El mejor punto de partida, es entender qué quieres construir. Si estás creando un sitio web simple, para un proyecto pequeño, o de uso personal, un sistema ligero y sencillo como Water o Milligram puede ser más que suficiente.

Pero, si necesitas algo más robusto, Foundation o Bootstrap serán más ideales para ti.

Curva de Aprendizaje y Facilidad de Uso

Luego, considera la complejidad del sistema, en comparación con tus capacidades y las de tu equipo. ¿Cuentan con la experticia para profundizar en nuevos frameworks de CSS? ¿Es la primera vez que usas algo que no has desarrollado internamente?

Comprender cómo se usa un framework de CSS, requiere aprendizaje y tiempo. Si nunca has trabajado con un framework, será mejor comenzar con una opción simple. Una vez conozcas más, podrás adentrarte entre sistemas más complejos.

Personalización y Flexibilidad

¿Tu proyecto debe adherirse exactamente a una directriz de marca o diseño ya existente?

Entonces, elige una opción con temas y opciones de personalización ya integrados, para facilitar la coincidencia con los estilos y sistemas de diseño que necesitarás.

Si tienes más opciones y eres más adaptable, puedes elegir un sistema con un estilo distintivo, sin dejar nunca de lado que no tendrás la flexibilidad que te darían frameworks más robustos.

Apoyo de la Comunidad y Recursos

Tener una comunidad de personas que utilizan el mismo framework, puede marcar la diferencia. Busca foros, servidores de Discord, o subreddits, para ver cuántas personas ayudan a otros usuarios y cuán activa es la comunidad, en caso de cada framework.

Rendimiento y Tamaño de Archivo

Ten muy en cuenta el tamaño de archivo y el rendimiento, al evaluar tu framework ideal.

Aunque el rendimiento de tu sitio web se ve influenciado por muchos factores (como tu proveedor de alojamiento web), el CSS también puede impactar tus páginas, tamaños de archivo y velocidad de carga.

Sigue Construyendo

Esperamos que esta lista de frameworks de CSS, te ayude al comenzar con tu próximo proyecto.

Así estés construyendo el próximo Facebook, o un sitio web simple para mostrar al mundo tu colección de rocas, nos encanta ayudarte a construir un hermoso internet, así como a miles a creativos y emprendedores, que como tú, nos leen.

Suscríbete a nuestro boletín informativo y obtendrás las últimas guías, tendencias y consejos sobre cómo construir tu sitio web, así cómo también consejos y herramientas para hacerlo crecer más y más. ¡El cielo es el límite!

The post 16 Frameworks Populares de CSS, Útiles Para Ahorrar Tiempo (Con Estilo) appeared first on Guías para Sitios Web, Tips & Conocimiento.

Animaciones CSS: Mejora Tu Sitio Web con Estas 17 Opciones

Ian Hernandez — Mon, 24 Apr 2023 14:00:24 +0000

Esas pequeñas animaciones en las que te pierdes mientras que estás esperando que una página o función cargue completamente.

Encantadoras transiciones que captan tu atención y te inspiran a continuar de una sección de contenido a la siguiente en un sitio web.

Colores inesperados que resaltan y movimiento que atrapa tu atención a medida que interactúas con un botón o aplicación.

Aunque sutiles, estos elementos tienen una gran influencia en tu percepción de una marca y tu experiencia digital.

¿Qué trae estos detalles atractivos a la vida?

A menudo, con la ayuda de animaciones CSS.

¿Quieres crear una experiencia de usuario igual de única y cautivante en tu propiedad digital?

En esta guía, te ayudaremos a hacerlo posible con:

Una introducción al CSS y animación CSS
Razones clave para probar las animaciones CSS
Los pocos obstáculos de adoptar las animaciones CSS (y sus soluciones)
17 animaciones CSS ejemplares para incluir en tu sitio web o aplicación
Como comenzar a añadir CSS a tu sitio web

Conoce el CSS

CSS es una abreviatura de Cascading Style Sheets u Hojas de Estilo en Cascada.

El CSS es un código de lenguaje que dicta cómo se ven y actúan, los elementos gráficos y de contenido en un sitio web o aplicación. El CSS es útil para personalizar colores y fuentes, posicionar y espaciar elementos en una página, y por supuesto crear animaciones.

Las animaciones CSS te permiten crear animaciones en tu sitio web sin tener que depender de JavaScript u otros lenguajes de secuencias de comando. Con estas animaciones, puedes crear fácilmente efectos elegantes de desplazamiento, deslizadores, iconos de carga y mucho más.

El HTML es como los cimientos y pilares de una casa, sin los cuales no podría existir. Pero, el CSS transforma esa casa con pintura, acabados y decoraciones que imparten un estilo único y características.

Bloques de Construcción de Animación CSS

La animación CSS utiliza código CSS para juntar varias propiedades y valores que hacen que los elementos en la pantalla se “muevan”. Veamos algunas de las propiedades que nos permiten crear animaciones interactivas.

Transiciones

Las transiciones CSS te permiten animar sin problemas los cambios de propiedad de CSS a lo largo del tiempo. Al especificar las propiedades que deseas animar, la duración, la función de temporización y el retraso, puede crear efectos sutiles y elegantes con un esfuerzo mínimo.

Las transiciones son perfectas para animaciones básicas, como efectos de desplazamiento, cambios de color o elementos de cambio de tamaño, y brindan una forma intuitiva y eficiente de mejorar la interactividad en tus diseños web.

Animaciones Keyframe

Por otro lado, las animaciones Keyframe CSS ofrecen un control más granular sobre la secuencia de animación, permitiéndote definir puntos clave específicos (keyframes) en la línea de tiempo de la animación. Al utilizar la regla @keyframes, puedes crear animaciones complejas de múltiples pasos, con control preciso sobre el comportamiento en cada una de sus etapas.

Las animaciones Keyframe son una excelente elección para aquellas animaciones más intrínsecas, incluyendo animaciones de carga de sitio web, deslizadores, o incluso movimientos de caracteres, dándote la flexibilidad de construir experiencias dinámicas y atractivas para tus usuarios.

Veamos los elementos de la regla del popular @keyframes, la cual define las transiciones de CSS a través de una secuencia de animación, por ejemplo, cómo las propiedades y valores trabajan juntos:

La propiedad de animation-name, le da el nombre a la animación.
La propiedad animation-duration, muestra la duración de la misma. Los calores típicamente se muestran en segundos (0s, 4s, etc.).
La propiedad animation-delay, especifica el inicio de una animación retardada. Su valor también es dado en segundos (-2s, 5s, etc.).
La propiedad animation-iteration-count duce el número de veces que una animación debe reproducirse. El valor es simplemente cuantas veces deseas que la animación se repita, por ejemplo infinite-alternate, hará que se repita eternamente.
La propiedad animation-direction dicta como debe mostrarse una animación. Los valores incluyen normal (hacia adelante), reversa, alternado, etc.
La propiedad animation-timing-function detalla la curva de velocidad. Los valores incluyen ease-in-out para un comienzo y final suave, cubic-bezier para crear una curva complicada, etc.
La propiedad animation-fill-mode define cómo se ve un elemento cuando la animación no se está ejecutando. Los valores incluyen forward o hacia adelante, para retener los valores configurados por el último keyframe, etc.

Funciones Easing

Las funciones Easing son un aspecto esencial de las animaciones y transiciones CSS, ya que determinan el rango de cambio de una animación, afectando su apariencia general. Controlan cómo progresa la animación entre keyframes o cambios de propiedades, definiendo el ritmo y flujo de la animación.

El CSS ofrece varias funciones predeterminadas de tiempo que producen diferentes efectos de easing:

lineal: Las animaciones progresan a una velocidad constante de principio a fin, sin aceleración o desaceleración.
ease: La animación comienza lento, luego acelera hacia el medio y luego desacelera hacia el final.
ease-in: Las animaciones comienzan lentamente y aceleran con el tiempo, dando la impresión de que un objeto está ganando impulso.
ease-out: La animación comienza rápidamente y desacelera hacían el final, simulando el efecto de que el objeto está desacelerando.
ease-in-out: La animación comienza lentamente, acelera en el medio, y luego desacelera hacia el final, combinando los efectos de ease-in y ease-out.

Ahora, para ponerlo todo en práctica. En este ejemplo de W3Schools que adjunta una animación (llamada “ejemplo”) al elemento

, puedes ver que el elemento es de 100px cuadrados y tiene un fondo rojo. Cuando la animación comience, continuará por 4 segundos mientras que el fondo transiciona desde rojo hacia amarillo:

/* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}


/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

(Nota: Este es solo un ejemplo. Las animaciones Keyframe no son la única manera de crear animaciones CSS, y no son compatibles con todas las versiones de navegadores — continúa leyendo para conocer más consejos de compatibilidad).

4 Razones Increíbles Para Implementar las Animaciones CSS

Desde potenciar interacciones inolvidables, hasta asegurar que están pasando a la velocidad de las expectativas modernas, las animaciones CSS tienen mucho que añadir a tu presencia digital — para ti y para tus visitantes o clientes.

Crea una Historia Y Experiencia Únicas

Los días de sitios web que funcionan como pancartas digitales están en el pasado.

En la economía global, los sitios web y aplicaciones son la mejor oportunidad de contar la historia de tu marca.

¿Por qué enfocarte en tu historia? Porque una gran historia diferencia tu marca, captura la atención de tu audiencia ideal, produce conexiones duraderas y — tal vez más importante — inspira a la acción.

Y tu historia, en parte, está construida por los elementos interactivos que incluyes en tu experiencia de usuario.

Las animaciones CSS se tratan de crear experiencias únicas que reaccionan y se mueven con el usuario, construyendo una relación y compromiso con la historia de tu marca.

Mejora La Retroalimentación Visual

Las animaciones CSS pueden proporcionar una retroalimentación valiosa a tus usuarios, ayudándoles a entender mejor los efectos de sus acciones o el estado de los procesos activos. Por ejemplo, las animaciones pueden indicar el progreso de la carga de un archivo, el resultado de enviar información a través de un formulario o el estado de un botón cuando te desplazas o haces clic en él.

Mejora la Accesibilidad

Cuando se implementan correctamente, las animaciones pueden contribuir a una mejor accesibilidad al enfatizar los estados de enfoque, proporcionar información contextual o ayudar a la navegación. Al incorporar funciones de accesibilidad como la consulta de medios “prefers-reduced-motion“, también puedes crear una experiencia más inclusiva que se adapte a los usuarios con diferentes necesidades y preferencias.

Mejora el Rendimiento

Si bien JavaScript es una herramienta poderosa para crear animaciones, puede tener implicaciones en el rendimiento y es posible que no sea compatible con algunos dispositivos o navegadores.

Las animaciones CSS, por otro lado, ofrecen una alternativa liviana, eficaz y ampliamente compatible para crear animaciones simples a complejas con un impacto mínimo en los tiempos de carga y el rendimiento. Que son un factor de clasificación importante cuando se trata de los resultados de búsqueda de Google. La velocidad es algo en lo que todas las empresas con una presencia en línea deberían estar pensando.

Consideraciones Antes de Entrar al Mundo de las Animaciones CSS

Ahora entremos a la zona de velocidad reducida. Antes de lanzarte de cabeza a las animaciones CSS, hay algunas cosas que queremos contarte, para asegurarnos de que estás al tanto y preparado para cualquier eventualidad.

Problemas de Compatibilidad

¿Alguna vez notaste cómo algunas funciones desaparecen o se atraviesan cuando estás interactuando con un sitio web en un teléfono? — o ¿ralentiza tu computador?

Cuando estás trabajando con animaciones CSS, es esencial considerar la compatibilidad de navegadores y asegurar que tus animaciones funcionan bien a través de diferentes navegadores y dispositivos. Aunque la mayoría de navegadores modernos soportan las animaciones CSS, puede haber inconsistencias y diferentes niveles de soportes, especialmente cuando se trata de versiones antiguas de navegadores.

Propiedades no Soportadas: Algunas propiedades CSS pueden no ser animables o pueden no ser soportadas en algunos navegadores, causando que las animaciones fallen o se comporten diferente.
Prefijos: Algunos navegadores, tales como las versiones antiguas de Safari, Chrome o Firefox, requieren prefijos específicos de proveedor para ciertas propiedades de animaciones CSS (eje, -webkit-animation, -moz-animation, -o-animation). Aunque el uso de prefijos de proveedores ha disminuido con los años, es importante tener en cuenta estos requerimientos para una compatibilidad más amplia.
Navegadores Antiguos: Los navegadores antiguos como Internet Explorer no soportan animaciones CSS o pueden tener soporte limitado. Para estos casos, tendrás que proporcionar estilos o métodos para comunicar la misma información o efectos.

Los navegadores pueden tener diferentes niveles de rendimiento cuando se trata de renderizar animaciones, conllevando a las diferencias en la calidad a través de los dispositivos. Es esencial optimizar tus animaciones y probarlas en diferentes navegadores y dispositivos para asegurar un rendimiento consistente.

Usa la detección de funciones: Usa JavaScript para detectar si una función específica es soportada en el navegador del usuario, y proporciona alternativas cuando sea necesario.
Proporciona una degradación elegante o mejora progresiva: Diseña tus animaciones para que se degraden elegantemente o tengan una mejora progresiva, dependiendo de las capacidades del navegador del usuario. Esto asegurará que tu contenido sea accesible y funcional, incluso sin animaciones.
Utiliza herramientas de compatibilidad de navegador: Herramientas como “Can I use” (caniuse.com) o “MDN Web Docs” (developer.mozilla.org) pueden ayudarte a determinar el nivel de soporte de algunas funciones específicas de CSS a través de diferentes navegadores.

Problemas de Accesibilidad

Las animaciones CSS pueden mejorar significativamente el atractivo visual e interactividad de un sitio web, pero es esencial considera los problemas de accesibilidad para crear una experiencia inclusiva y amigable con el usuario, para todos. Algunos usuarios, como aquellos con sensibilidad motora o trastornos vestibulares, pueden tener dificultades con el contenido animado. Adicionalmente, las animaciones complejas o excesivas pueden distraer o desorientar a los usuarios con discapacidades cognitivas. Al abordar estos problemas a través de técnicas como la solicitud multimedia prefers-reduced-motion o proporcionando maneras alternativas de comunicar información, puedes crear una experiencia más accesible y agradable para un diverso rango de usuarios.

La función multimedia CSS `prefers-reduced-motion` es una función de accesibilidad que le permite a los usuarios indicar su preferencia para obtener animaciones reducidas o cero animaciones en los sitios web. Algunos usuarios pueden tener problemas de sensibilidad al movimiento, trastornos vestibulares, o simplemente prefieren menos movimiento en la pantalla. Respetar esta preferencia puede mejorar la experiencia de usuario para estos usuarios y haces que tu sitio sea más inclusivo.

/* Default animation */
.element {
  transition: transform 0.5s ease-out;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
  }
}

En este ejemplo, el ‘.element’ tiene una transición aplicada por defecto. Sin embargo, cuando el usuario ha indicado la preferencia de movimiento reducido, la solicitud multimedia deshabilitará la transición.

Es esencial tener en cuenta que remover las animaciones por completo, puede no siempre ser la mejor solución. En algunos casos, aún puedes proporcionar animaciones sutiles que no desencadenan una incomodidad mientras que respetas la preferencia del usuario. También podrías considerar reducir la duración o intensidad de las animaciones como alternativa.

17 Animaciones CSS Dinámicas Para Probar Hoy

¿Estás listo para utilizar animaciones CSS para construir increíbles experiencias digitales que atraen y retienen usuarios, incrementan la tan importante velocidad de sitio, y reducir el tiempo de mantenimiento y rediseño?

Entonces has llegado a la sección correcta, porque aquí hemos recopilado algunas animaciones CSS. Haz clic en cualquier opción que te llame la atención para obtener el código que necesitas para añadirlo a la hoja de estilo de tu sitio web. (Por cierto, los Pens públicos en CodePen son de uso gratuito para cualquier persona y cualquier propósito, según su licencia).

Animaciones de Carga

Las animaciones de carga o Loading Animations pueden no ser la clase más llamativa de animaciones, pero son críticas para la experiencia de usuario. Es probable que los visitantes de un sitio web o aplicación sean más pacientes con un poco de tiempo de carga adicional cuando has proporcionado un indicador de que algo genial está por verse.

“CSS Loader with dots” por Aliaksei Peterson

Hasta ahora, una línea de puntos pulsantes es el idioma universal para “¡Espera un momento!”. Así como con el código, esta opción es clara y concisa, haciéndolo un ajuste perfecto para una presencia en línea con un tono serio y/o un estilo minimalista.

See the Pen
CSS Loader with dots by Aliaksei Peterson (@petersonby)
on CodePen.

“Simple HTML & SVG Loading Spinners” por Stephen Delaney

Otro símbolo de carga clásico — el ícono que gira. Esta animación viene con una opción para integrar un SVG, que significa Scalable Vector Graphic o Vector Gráfico Escalable, y puede ser escalado sin perder calidad.

See the Pen
Simple HTML & SVG Loading Spinners by Stephen Delaney (@sdelaney)
on CodePen.

“Loading Animation” por Mohamed Yousef

Este conjunto de formas giratorias con forma de lágrima ofrece una animación maravillosamente simple para perderse, lo que hace que un poco de tiempo de carga adicional se sienta mucho menos molesto (¿qué más se puede pedir?).

See the Pen
Loading Animation by Mohamed Yousef (@Freeps2)
on CodePen.

“Only Css Animation #02” por Hisami Kurita

Una impresionante animación CSS pura que nos recuerda cuando ingresamos al sitio web de un restaurante u hotel de lujo. Cambia el color y el nombre para que coincida con tu propia marca.

See the Pen
Only Css Animation #02 by Hisami Kurita (@hisamikurita)
on CodePen.

“The Glowing Loader – Pure CSS Animation” por Maxime Rossignol

La pantalla de carga más creativa que hemos visto. Esta animación le da al espectador mucho para mirar mientras espera que el resto de sus elementos digitales cobren vida.

See the Pen
The Glowing Loader – Pure CSS Animation by Maxime Rossignol (@Maxoor)
on CodePen.

Animaciones de Contenido

¿Estás buscando una manera de asegurarte de que tus usuarios de aplicación y sitio web no se pierdan de información crucial? Resaltar con cualquiera de estas animaciones CSS.

“Changing Text Animation CSS” por Coding Yaar

Agrega un poco de brillo a los titulares y otro texto importante con esta animación, completa con detalles como movimiento deslizante, cambios de color y más.

See the Pen
Changing Text Animation CSS by Coding Yaar (@codingyaar)
on CodePen.

“CSS Block Revealing Effect” por Abubaker Saeed

El efecto “revelador” con esta animación ofrece otra manera interesante de atraer el ojo a los elementos importantes de contenido que deseas resaltar para tus visitantes.

See the Pen
CSS Block Revealing Effect by Abubaker Saeed (@AbubakerSaeed)
on CodePen.

“CSS Reveal Slider” por Adam Kuhn

Con muchas tipografías interesantes, botones animados, y una función de volteo que descubre o muestra más información — esto parece una gran opción para introducir a los usuarios a secciones más largas de contenido importante como la sección de Preguntas Frecuentes, Funciones, Contacto, Etc.

See the Pen
CSS Reveal Slider by Adam Kuhn (@cobra_winfrey)
on CodePen.

“Animated Info Card” por Adam Kuhn

Del mismo creador de la anterior animación CSS, esta opción presenta otra manera creativa y audaz de guiar a los usuarios a través de los elementos de la historia de tu marca.

See the Pen
Animated Info Card by Adam Kuhn (@cobra_winfrey)
on CodePen.

Animaciones de Botón

Los botones a menudo son la puerta para hacer que los usuarios tomen acción o se adentren más en tu contenido. Inspira más interacciones añadiendo animaciones CSS a los botones relevantes.

“CSS Button On Hover Slide Effect” por RazorX

Aquí hay muchas opciones para agregar animaciones geniales llenas de color a botones que de otro modo serían demasiado simples.

See the Pen
CSS Button On Hover Slide Effect by RazorX (@RazorXio)
on CodePen.

“Button Animations” por Alex Belmonte

¿Quieres añadir un poco de movimiento a esos botones? Añade un efecto animado y acciones como rebote, sacudida y más a tus botones con código CSS.

See the Pen
Button Animations by Alex Belmonte (@AlexBelmonte)
on CodePen.

“CSS button hover effect” por Julia

Una pincelada de color mínimo, pero impactante, añade un efecto sorpresa a tus botones.

See the Pen
CSS button hover effect by Julia (@sfoxy)
on CodePen.

Animaciones de Fondo de Pantalla

Deseas que los fondos de ciertos elementos de tu sitio web o aplicación sean lo suficientemente interesantes como para llamar la atención — pero sin eclipsar ese contenido que quieres que los usuarios vean o las acciones que deben tomar.

“Animated Background Gradient” por Mario Klingemann

Aplica este buble infinito de color al fondo de pantalla de secciones claves a tu sitio web o aplicación, para añadir un poco de movimiento.

See the Pen
Animated Background Gradient by Mario Klingemann (@quasimondo)
on CodePen.

“CSS Animations with SVGs” por Joyanna

Formas suaves, llenas de color con movimientos delicados, forman un fondo de pantalla distintivo para tus secciones de contenido más relevantes.

See the Pen
CSS Animations with SVGs by Joyanna (@joyanna)
on CodePen.

“Simple parallax scroll” por Ungmo Lee

Una animación de desplazamiento de paralaje permite que se muevan tanto el primer plano como el fondo, pero a diferentes velocidades para crear la ilusión de profundidad. Como puedes ver en el ejemplo, el efecto de paralaje puede ser abrumador cuando no se aplica con moderación.

See the Pen
Simple parallax scroll by Ungmo Lee (@ungmo2)
on CodePen.

Animaciones Para Añadir en Cualquier Lugar

Prueba estas animaciones CSS que puedes añadir para darle un toque “extra” a varios puntos de la experiencia de usuario.

“Template: Logo” por Alex Katz

Pasa el cursor sobre el logotipo para ver un ligero efecto expansivo. Este movimiento sutil se puede utilizar en logotipos, así como en botones, iconos y otros componentes para llamar la atención y crear encanto.

See the Pen
Template: Logo by Alex Katz (@katzkode)
on CodePen.

“Floating Animation – CSS” por Mario Duarte

Un gentil efecto flotante como este es otro toque sorprendente y divertido que le deja saber a los espectadores que también te importan tus propiedades digitales, así como su experiencia.

See the Pen
Floating Animation – CSS by Mario Duarte (@MarioDesigns)
on CodePen.

Cómo Añadir CSS a Tu Sitio Web

Cada una de las animaciones CSS mencionadas anteriormente, están acompañadas por CSS, HTML y algunas veces código que puedes pegar directamente en la hoja de estilo de tu sitio web y editarlo como sea necesario para que se ajuste a tu marca.

Si tienes un sitio web personalizado donde tú administras el código y no estás familiarizado con el CSS aún, creemos que sería útil para ti familiarizarte con el lenguaje antes de intentar implementar las animaciones que te acabamos de mostrar.

Aprende lo básico de crear una línea de código y luego sumergirte en los mejores tutoriales para desarrollar tus habilidades CSS con la guía para aprender CSS rápido de DreamHost.

También notarás de los ejemplos anteriores que se puede necesitar bastante código para crear una animación. Si te sientes cómodo con el CSS y estás listo para optimizar espacio y tiempo, considera echarle un vistazo a una biblioteca de animación CSS. Cada biblioteca tendrá instrucciones sobre cómo añadirlo a tu sitio web, usualmente involucrando añadir el archivo fuente o CDN a tu marcado. Una vez que esté instalada, puedes usar la abreviatura de animación específica de la biblioteca para agregar tus animaciones

Si tienes un sitio de WordPress, la plataforma en sí ofrece una guía práctica para editar CSS utilizando el Editor del sitio (una función beta disponible en algunos temas) o el Personalizador (disponible en la mayoría de los temas clásicos y algunos de terceros). Dentro de estas pantallas de edición es donde pegará el código de nuestros ejemplos de animación CSS anteriores.

Pero, ¿qué pasa si un sitio web que te permite contar la historia de tu marca aún es un sueño? Entonces, tenemos buenas noticias para ti, porque en DreamHost nos especializamos en hacer realidad los sueños. Con diseño web personalizado, un creador de sitios, fácil de usar, servicios profesionales realizados por nuestros expertos de la casa, y por supuesto opciones robustas de alojamiento — ¡DreamHost te ayudará a poner tus sueños en línea!

Obtén Más Visitantes

Nuestros expertos en marketing te ayudarán a ganar más tráfico y a convertir más visitantes de sitio web para que puedas enfocarte en administrar tu negocio.

Más Información

The post Animaciones CSS: Mejora Tu Sitio Web con Estas 17 Opciones appeared first on Guías para Sitios Web, Tips & Conocimiento.

Ian Hernandez, Author at Guías para Sitios Web, Tips & Conocimiento

Cómo Aprender HTML En El 2024

Una Introducción a HTML

Por qué Deberías Considerar Aprender HTML

Recibe Contenido Directamente en Tu Bandeja de Entrada

Comenzando con HTML

Paso 1: Comprender Los Conceptos Básicos De La Estructura De HTML

Paso 2: Aprende Los Elementos Básicos de HTML Para La Estructura y El Contenido

a

): Los encabezados son elementos esenciales de nivel de bloque que ayudan a generar una estructura jerárquica para tu contenido.

¿Cómo Aprender HTML Gratis en Línea?

1. Ver Tutoriales en YouTube

2. Toma Cursos de HTML en Línea Gratis

Codecademy

Learn-HTML.org

General Assembly Dash

3. Práctica, Práctica, Práctica

¿Qué Trabajos Puedes Conseguir Con HTML?

¿Cuáles Son Algunas Otras Razones Para Aprender HTML?

Conviértete En Un Experto En HTML

Impulsa Tu Sitio Con DreamHost

Tailwind Vs. Bootstrap: ¿Qué Framework CSS Necesitas?

¿Qué Son los Frameworks CSS?

Bootstrap: El Clásico Confiable

Tailwind CSS: El Nuevo Participante en Escena

Recibe Contenido Directamente en Tu Bandeja de Entrada

Seleccionando el Framework Correcto Para Tu Proyecto

Complejidad y Escalabilidad del Proyecto

Flexibilidad y Consistencia en el Diseño

Card title

Curva de Aprendizaje y Experiencia del Desarrollador

Consideraciones de Rendimiento

Entonces, ¿Por Qué No Ambos Frameworks?

El Futuro de los Frameworks de CSS

Conclusión

Toma las Riendas con Alojamiento Flexible VPS

12 Ejemplos Grandiosos de Sitios Web Accesibles Que Destacan

Cómo Se Ve La Accesibilidad Web Grandiosa

12 Grandiosos Ejemplos de Accesibilidad Web Para Inspirarte

1. Scope

2. Harvard University

3. Paralympic.org

Recibe Contenido Directamente en Tu Bandeja de Entrada

4. Walmart

5. KidsWish

6. Nomensa

7. Ovo Energy

8. Bleacher Report

9. BBC iPlayer

10. Metropolitan Transportation Authority

11. NSW Government

12. GOV.UK

Haz Una Declaración de Accesibilidad

Tu lo Sueñas, Nosotros lo Ponemos en Código

Tu Guía Completa Sobre Bootstrap

¿Qué Es Bootstrap?

¿Qué Hace Diferente a Bootstrap?

Recibe Contenido Directamente en Tu Bandeja de Entrada

Comenzando con Bootstrap

El Sistema de Cuadrícula de Bootstrap

Cuadrícula Básica

Longitud de Columnas en la Cuadrícula

Ancho de Columnas Responsivo

Componentes de Bootstrap

Botones

Tarjetas

Card Title

Barra de Navegación

Formularios

Creación de un Panel de Control de Análisis Simple con Bootstrap

Configuración del HTML

Agregando la Navegación del Encabezado

Agregando el Pie de Página

Aumenta La Velocidad De Tu Sitio Con GTmetrix

¿Qué Es GTmetrix?

¿Por Qué Usar GTmetrix?

Recibe Contenido Directamente en Tu Bandeja de Entrada

¿Cómo Usar GTmetrix?

Paso 1: Ve Al Sitio Web De GTmetrix

Paso 2: Ingresa La URL De Tu Sitio Web