¡El programa que TODO DESARROLLADOR debería tener INSTALADO! 🔨 5 utilidades en 1 para el día a día

Summary

Este video presenta cinco útiles herramientas para desarrolladores web y diseñadores. Incluye un repositorio de icons SVG, un directorio de APIs públicas, un sitio para verificar compatibilidad de propiedades web, una librería de componentes de React para alertas y notificaciones, y una colección de loaders CSS personalizables. Estas herramientas pueden mejorar la eficiencia y la experiencia en el desarrollo web, además de ofrecer un aprendizaje progresivo para quienes comienzan en este campo.

Takeaways

• 🎨 Para encontrar iconos y ilustraciones gratuitas, visita SVG Repo, que ofrece más de 500.000 imágenes vectores y iconos.
• 🔍 Si necesitas un API para tu aplicación web, Public APIs es una plataforma que reúne una amplia variedad de APIs para diferentes temas como anime, películas, calendario, etc.
• 💻 Can I Use es una herramienta esencial para verificar la compatibilidad de propiedades CSS, HTML y JavaScript con diferentes navegadores.
• 📚 Aprende desarrollo web desde cero y sigue una ruta de aprendizaje progresiva a través de los cursos disponibles en la descripción del video.
• 🚀 Utiliza la librería de componentes de React llamada 'soner' para crear alertas y modales con diseño atractivo y fácil de personalizar.
• 🌐 CSS Loaders ofrece una gran variedad de loaders de efecto de carga hechos con CSS, lo que permite una mejor optimización de la carga de tu sitio web.
• 🎥 Los cursos de desarrollo web son una excelente opción para aquellos que desean aprender y perfeccionar sus habilidades en este campo.
• 📧 Suscríbete a la lista de correos electrónicos gratuita para recibir consejos, anécdotas y trucos de desarrollo web diariamente.
• 💡 No te pierdas las oportunidades de aprender y mejorar tus habilidades con los recursos y cursos disponibles.
• 🌟 Mantén tus conocimientos actualizados con las últimas tendencias y tecnologías en desarrollo web para mantener tu perfil profesional competitivo.

Q & A

¿Cuál es la primera herramienta que se presenta en el vídeo para desarrolladores web?

La primera herramienta presentada es svgrepo.com, un sitio web donde se pueden encontrar más de 500.000 imágenes SVG vectores o iconos gratuitas para incrustar en proyectos web.

¿Cómo se puede utilizar la primera herramienta presentada en el vídeo?

Se puede utilizar para buscar y descargar iconos o ilustraciones para proyectos web, como logos de redes sociales, íconos de carritos de compras o corazones para likes en aplicaciones web.

¿Qué es la segunda herramienta que se menciona en el vídeo y cuál es su propósito?

La segunda herramienta es publicapis.com, un sitio que ofrece una amplia variedad de APIs para diferentes propósitos, como obtener información de series de anime, datos de películas, días festivos, etc.

¿Cómo se puede aprovechar publicapis.com para el desarrollo de aplicaciones?

Se puede utilizar para encontrar y consumir APIs específicas que proporcionen la información necesaria para el desarrollo de aplicaciones relacionadas con series de anime, películas, calendarios, entre otros.

¿Qué es can i use y cómo ayuda en el desarrollo web?

Can i use es una herramienta que permite verificar la compatibilidad de propiedades CSS, HTML y JavaScript con diferentes navegadores, ayudando a los desarrolladores a asegurarse de que su código funcione en todos los navegadores donde es posible.

¿Cómo se puede utilizar can i use para verificar la compatibilidad de un elemento HTML o propiedad CSS?

Bastante sencillo, solo se debe buscar el elemento o propiedad específica y la herramienta mostrará la compatibilidad con diferentes navegadores y versiones, permitiendo al desarrollador tomar decisiones sobre su implementación.

¿Qué es la librería de componentes de React que se presenta en el vídeo?

La librería de componentes de React que se presenta es called 'soner', sirve para crear alertas y notificaciones en la aplicación.

¿Qué ventajas tiene usar componentes de alertas como 'soner' en un proyecto de React?

Los componentes como 'soner' facilitan la creación de alertas y notificaciones, proporcionan un código fácil de usar y personalizar, y mejoran la experiencia del usuario al tener notificaciones atractivas y bien diseñadas.

¿Cuál es la utilidad que se presenta para encontrar loaders hechos con CSS?

La utilidad presentada para encontrar loaders hechos con CSS es cssloaders.com, que ofrece una variedad de loaders de efecto de carga creados con CSS para usar en aplicaciones web.

¿Por qué es beneficioso usar loaders hechos con CSS en lugar de imágenes o GIFs?

Los loaders hechos con CSS son más beneficiosos porque no son imágenes estáticas, no aumentan el tamaño del archivo de la página y mejoran el rendimiento general de la web, ya que no requieren descargas adicionales de recursos de imagen.

¿Cómo se pueden personalizar los loaders encontrados en cssloaders.com?

Los loaders encontrados en cssloaders.com se pueden personalizar editando el código CSS y HTML para cambiar aspectos como los colores, la velocidad de animación y el tipo de efecto de carga de acuerdo a las necesidades del proyecto.

¿Qué recursos adicionales se mencionan en el vídeo para aprender desarrollo web?

Se mencionan cursos de desarrollo web en la descripción del vídeo, así como una lista de correos electrónicos gratuita donde se comparten consejos, anécdotas y trucos de desarrollo web.

Outlines

00:00

🛠️ Herramientas para desarrolladores web

En este primer párrafo, se presenta una selección de cinco herramientas útiles para desarrolladores web. Destacan una extensa colección de iconos y ilustraciones gratuitas en svgrepo.com, que abarca más de 500.000 imágenes vectores. También se menciona la importancia de suscribirse a la lista de correos electrónicos del creador para recibir consejos y tutoriales de programación, así como una ruta de aprendizaje completa de cursos de desarrollo web. Además, se sugiere la utilidad de caniuse.com para verificar la compatibilidad de diferentes propiedades de HTML, CSS y JavaScript en varios navegadores, lo que es esencial para asegurar que las aplicaciones web sean cross-browser compatibles.

05:00

🌐 Consumo de APIs y librerías de componentes

Este párrafo se centra en la utilización de APIs para el desarrollo de aplicaciones web. Se recomienda publicapis.com como una plataforma para encontrar diversas APIs, ya sea para aplicaciones relacionadas con anime, películas, calendarios, o cualquier otro tema. Además, se habla sobre la herramienta 'Can I Use' para verificar la compatibilidad de ciertas funcionalidades web con diferentes navegadores. Finalmente, se presenta la librería de componentes de React llamada 'soner', que permite crear alertas y ventanas emergentes personalizadas con facilidad, mejorando la experiencia del usuario y la interacción con la aplicación.

10:00

🎨 Recursos de diseño y efectos de carga en CSS

El tercer párrafo aborda la temática de diseño y animaciones en la web, destacando cssloaders.com como una fuente de infinidad de loaders y efectos de carga creados con CSS. Estos loaders son ligeros y pueden ser personalizados fácilmente, lo que permite a los desarrolladores web adaptarlos a sus necesidades específicas. Los ejemplos incluyen efectos clásicos, spinners y animaciones 3D. La ventaja de utilizar loaders en CSS es que no dependen de imágenes, mejorando así la performance de la página. Además, se sugiere la posibilidad de manipular estos efectos con maestría en cursos avanzados de CSS3.

Keywords

💡herramientas para desarrolladores web

En el video se menciona un conjunto de herramientas esenciales para aquellos que trabajan en el desarrollo web. Estas herramientas son prácticas y útiles para mejorar la eficiencia y la calidad del trabajo diario de un desarrollador, ya sea en la creación de diseños, la integración de iconos, el consumo de APIs, la verificación de compatibilidad de código, o la implementación de componentes en proyectos React.

💡SVGRepo

SVGRepo es una plataforma en línea que ofrece una gran variedad de iconos y ilustraciones en formato SVG. Los desarrolladores web pueden utilizar estos recursos para incrustarlos en sus páginas web o proyectos, sin necesidad de contar con un equipo de diseño. Los iconos son gratuitos y se pueden descargar en diferentes formatos, como PNG, para satisfacer las necesidades de cada proyecto.

💡Public APIs

Las APIs públicas son interfaces de programación que permiten a los desarrolladores acceder y utilizar datos o funcionalidades de diversos servicios en línea. Estas APIs son esenciales para la creación de aplicaciones que requieren información externa, como datos de series de anime, información de películas, calendarios, o incluso datos meteorológicos.

💡Can I Use

Can I Use es un recurso en línea que proporciona información sobre la compatibilidad de características web con diferentes navegadores. Es una herramienta vital para los desarrolladores web que desean asegurar que su código funciona correctamente en todos los navegadores populares, evitando problemas de compatibilidad que podrían afectar la experiencia del usuario.

💡React

React es una biblioteca de JavaScript开创和管理 interfaces de usuario con un enfoque en la creación de componentes reutilizables. Es una herramienta popular en el desarrollo web moderno, especialmente para la construcción de aplicaciones web interactivas y single-page applications. React es mantenida por Facebook y cuenta con una gran comunidad de desarrolladores y recursos.

💡Soner

Soner es una librería de componentes de alertas para React que permite a los desarrolladores integrar fácilmente notificaciones en sus aplicaciones web. Esta herramienta ofrece una variedad de opciones para personalizar las alertas, como el contenido, la posición en la pantalla y el estilo visual, permitiendo una experiencia de usuario más atractiva y dinámica.

💡CSS loaders

Los loaders en CSS son efectos visuales utilizados para indicar que un elemento de una página web está siendo cargado. Estos loaders son creados exclusivamente con código CSS, lo que los hace más ligeros y eficientes que los loaders basados en imágenes o GIFs. Los loaders CSS pueden ser personalizados en términos de animaciones, colores y diseño, ofreciendo una solución flexible para la indicación de estado de carga en una página web.

💡desarrollo web

El desarrollo web se refiere al proceso de crear y mantener sitios web y aplicaciones web. Incluye varias disciplinas como el diseño, la programación y el optimizado de contenido para dispositivos de不同的平台和浏览器. El desarrollo web implica la utilización de lenguajes y tecnologías como HTML, CSS y JavaScript para construir interfaces de usuario y experiencias en línea.

💡cursos de desarrollo web

Los cursos de desarrollo web son programas educativos diseñados para enseñar a los estudiantes las habilidades necesarias para crear y mantener sitios web y aplicaciones. Estos cursos cubren un espectro amplio de temas, desde los fundamentos de HTML y CSS hasta la programación avanzada con JavaScript y el uso de frameworks modernos como React.

💡newsletter

Una newsletter es una publicación periódica, generalmente electrónica, que se envía a una lista de suscriptores con información, actualizaciones, consejos o contenido relevante para un tema o comunidad específica. Las newsletters son una herramienta de comunicación efectiva para mantener a los suscriptores informados y comprometidos con un producto, servicio o tema de interés.

💡compatibilidad de navegadores

La compatibilidad de navegadores se refiere a la capacidad de un sitio web o aplicación para funcionar correctamente en diferentes navegadores web, garantizando así una experiencia de usuario consistente. Los desarrolladores web deben tener en cuenta la compatibilidad al diseñar y codificar su trabajo para que sea accesible y funcione bien en todos los navegadores populares.

Highlights

Se presentan cinco herramientas esenciales para desarrolladores web que mejorarán el día a día en el trabajo.

La primera herramienta, svgrepo.com, ofrece más de 500,000 imágenes SVG vectores e iconos para incrustar en proyectos web.

Con svgrepo.com, los desarrolladores pueden encontrar iconos para redes sociales, logos de empresas y otros elementos de diseño.

La segunda herramienta, publicapis.com, facilita el consumo de APIs específicas para diferentes tipos de aplicaciones.

Public APIs cubre una amplia variedad de temas, desde información de anime hasta datos meteorológicos.

Can I Use es una herramienta indispensable para verificar la compatibilidad de propiedades CSS, HTML y JavaScript en diferentes navegadores.

Can I Use muestra la compatibilidad detallada de cada propiedad y método con navegadores y versiones específicas.

La librería de componentes de React llamada 'soner' permite crear alertas y ventanas emergentes personalizadas con facilidad.

Los componentes de 'soner' son muy flexibles y permiten customizar la apariencia y el comportamiento de las alertas.

CSS Loaders ofrece una gran variedad de loaders de efecto de carga hechos con CSS, mejorando la experiencia del usuario y la optimización de la página.

Los loaders de CSS son ligeros y atractivos, y pueden ser personalizados para adaptarse a las necesidades de diseño específicas.

El creador de este contenido también ofrece cursos de desarrollo web para aprender desde cero y una lista de correos electrónicos con consejos y anécdotas.

Se destaca la importancia de utilizar recursos actualizados y gratuitos para mantenerse al día en el desarrollo web.

Se menciona la disponibilidad de cursos nuevos y un formato de contenido emergente de emails diarios con consejos de programación.

El contenido de hoy es una guía práctica para mejorar la eficiencia y la creatividad en el trabajo diario de un desarrollador web.

Transcripts

hoy te traigo cinco utilidades para tu

díaa a día cinco herramientas que a

partir del día de hoy que yo te las

descubra no vas a poder dejar de usarlas

cinco herramientas que todo

desarrollador web debería utilizar o que

por lo menos debería probarlas así que

no te pierdas ni un segundo de este

vídeo porque creo que te van a encantar

Pero antes de empezar con las

herramientas te recomiendo que te

suscribas a mi lista de correos gratuita

que está aquí abajo en la descripción

donde mando un email al día contando

alguna experiencia anécdota historia que

me han pasado en el mundo de la

programación o dando consejos y

enseñando algún truco de desarrollo web

creo que te puede gustar también y es

completamente gratis lo tienes en la

descripción y lo que también tienes en

la descripción es la ruta de aprendizaje

completa de todos mis cursos de

desarrollo web que si no sabes nada y

empiezas desde absoluto cero Pues sigue

ese orden eh que te indico en la

descripción o entra en esta URL y sigue

los cursos en ese orden para aprender

desde cero y poder tener una ruta de

aprendizaje progresiva para en un futuro

con práctica y esfuerzo poder conseguir

un trabajo como desarrollador la primera

herramienta que te traigo creo que te

puede te puede sorprender te puede

gustar porque a quien no le ha pasado

que está desarrollando algo está

haciendo algún diseño o lo que sea y de

repente necesita utilizar algún icono

algún logo alguna ilustración para

incrustar en tu página web y en tu

proyecto web Vale pues muchas veces

estas ilustraciones nos las dan Eh Pues

el equipo de diseño que tengamos en

Nuestra Empresa pero muchas veces cuando

somos freelance o estamos haciendo algún

proyecto personal no tenemos un sitio

donde encontrar esos iconos Pues en esta

web que te traigo hoy que se llama svg

repo tú puedes buscar un montón de

iconit para lo que tú necesites y son

completamente gratuitos pone aquí que

hay más de

500.000 imágenes svg vectores o iconos

no Por ejemplo si yo quisiera poner en

una web los iconos de redes sociales por

ejemplo Twitter vale Voy a buscarlo y el

logo de Twitter lo tengo aquí 500,000

veces con 500,000 versiones diferentes

no que simplemente si yo quisiera usar

el logo de Twitter el Antiguo logo de

Twitter pues simplemente le doy clic y

me puedo descargar la imagen en vector

en svg pero también me la puedo bajar en

png que a veces es más cómodo no o por

ejemplo si estoy haciendo una tienda

online y necesito un icono para el

carrito de compra pues puedo poner aquí

carrito a ver si lo entiende en español

no en español no lo va a entender tienes

que ponerlo en inglés tendrías que poner

pues por ejemplo cart vale buscas cart y

tienes 1000 opciones 1000 imágenes de

carritos de la compra 1000 imágenes o

por ejemplo si estás haciendo una red

social y quieres un corazón Pues puedes

buscar hert vale para hacer el típico

like vale Y aquí tienes un montón de

corazones y tien infinitas páginas con

imágenes gratuitas para eso Si quieres

buscar un like pues lo buscas like y te

aparece por aquí vale Si quieres el logo

de yo que sé si quieres el logo de

YouTube lo buscas YouTube YouTube vale Y

te sale aquí 1000 opciones o sea es una

web brutal y es completamente gratuita y

además también te puedes guardar eh

iconos en favoritos Por si te interesa

tenerlo a mano en algún momento Aparte

también hay colecciones de iconos por

ejemplo esto es una colección de icono y

puede seguir una homogeneidad en los

iconos que tú vayas a poner en tu

aplicación web o en tu aplicación de lo

que sea de acuerdo pues bueno es una web

muy útil para los desarrolladores web y

diseñadores web también la siguiente

utilidad me encanta porque muchas veces

queremos desarrollar algún tipo de

aplicación que consuma un Api y que

consuma un Api concreta Por ejemplo si

yo quiero hacer una aplicación de anime

Pues a lo mejor me interesa tener un Api

que me eh proporcione toda la

información de todas las series de anime

o de todos los cómics de anime o lo que

sea de esos animes si yo pueda sacar

información de ahí o Necesito hacer una

aplicación relacionada con películas

Pues a lo mejor Necesito un Api para

consumir esa información de las

películas o depende del tipo de

aplicación que yo quiera hacer que me

hayan mandado hacer o que se me haya

ocurrido hacer puedo necesitar un Api u

otra y en esta web que se llama public

[Música]

apis.com utilizar en internet por

ejemplo hablando de lo del anime yo

tengo esta esta sección de anime por

ejemplo y tienes un montón de apis que

tú podrías utilizar que tienen pues la

base de datos de de muchas series de

anime y movidas así no por ejemplo si

estamos hablando de negocios Pues

también tenemos apis para ello apis para

todo ello e si estamos hablando de un

calendario pues Aquí tengo apis para

sacar información de del calendario de

los días festivos por ejemplo aquí hay

un Api para sacar los días festivos de

los bancos en UK en en United Kingdom no

en fin cualquier cosa pero tú podrías

incluso buscarlo por aquí en plan Si

buscas E Weather wea vale busca el

tiempo un Api del tiempo para hacer una

aplicación del tiempo lo que sea puedes

buscar y tienes un montón incluso tienes

un Api de la amed por ejemplo que es eh

Si estás en España en la la agencia

meteorológica Por decirlo así es oficial

no tienes un montón de apis que podrías

consultar aquí para lo que sea para lo

que sea si hablamos de Marvel seguro que

hay apis de Marvel Sí hay alguna si

hablamos de yo que sé de cualquier cosa

es que de cualquier cosa diccionarios

por ejemplo Pues sí que hay diccionarios

también vale Incluso si lo Busca en

español A lo mejor hay un dicionario en

español diccionario diccionario Sí hay

diccionarios de todo tipo en fin tienes

todo tipo de apis para tú consultar

simplemente para consultar una de esas

apis pues le das click a la Api y te

lleva a dónde a dónde está esa Api te

lleva esa documentación y tú puedes

directamente pues utilizar sus métodos y

tal esto es útil ya te digo para hacer

aplicaciones de prueba o para hacer

aplicaciones consumiendo ciertas apis

otra utilidad que muchos conoceréis ya

si os dedicáis al mundo del desarrollo

web es can iuse en can iuse tú puedes

comprobar propiedades de css de html de

javascript puedes comprobar diferentes

funcionalidades que implementan los

lenguajes de programación web eh más

estándar ya te digo sobre todo Estamos

hablando de html css Y javascript si

Buscamos por ejemplo javascript vale

nosotros podemos ver que hay ciertos

módulos de javascript que podríamos

consultar y podemos ver la

compatibilidad con los navegadores vale

podemos ver la compatibilidad con los

navegadores pero por ejemplo si hablamos

de alguna propiedad de css Como por

ejemplo una transform vale transform

transform vamos a ponerlo bien transform

css3 2D transform puedes ver la

compatibilidad que tiene con los

navegadores Okay fíjate como pues te

dice los navegadores y las versiones en

las que sería compatible entonces tú

Aquí puedes poner una propiedad de css

una etiqueta de html por ejemplo la

etiqueta Mark vale la etiqueta Mark de

html el elemento Mark Pues fíjate te

dice desde dónde es compatible desde qué

navegador desde qué versión Hasta qué

otra Hasta qué otra versión no y qué

navegadores no son compatible incluso

hablando de navegadores de móvil y de

escritorio no este si hablamos por

ejemplo de javascript y estamos hablando

de por ejemplo utilizar un método nuevo

por ejemplo el el tu reversed reversed

aquí lo tienes

reversed si hablamos de javascript y

Buscamos por ejemplo el método to

reversed que es nuevo para los arris más

o menos nuevo pues te dice las versiones

con las cuales es compatible por ejemplo

no es compatible del firefox 2 al 114

pero 115 en adelante Sí y con por

ejemplo Google Chrome es compatible a

partir del 110 y el 110 está eh sacado a

partir de 2023 vale por tanto eh fíjate

como usar ciertos métodos de javascript

como este imposibilitaría que lo usaras

o que funcionara en navegadores de estas

versiones de versiones un poco más

antiguas porque es una propiedad nueva

que está disponible a partir de 2023 por

ejemplo entonces tú puedes mirar aquí

toda clase de métodos por ejemplo el

método tu shorted también que es nuevo

shorted también lo puedes mirar y puedes

ver la compatibilidad que tiene No pero

por ejemplo si buscáramos el método

alert de javascript que es super

conocido está compatible con

absolutamente todo de todas las

versiones o sea de toda versión a toda

otra Además tú si te pones encima de la

de la casilla donde quieres comprobar la

versión te dice De qué momento está

disponible no eh Por ejemplo si hablamos

de Safari o hablamos de firefox desde

2006 está compatible ese método para que

tú lo puedas utilizar con javascript y

funcion en ese navegador no y lo mismo

si hablamos de por ejemplo

funcionalidades como css nesting si tú

lo miras css nesting que es una forma de

anidar elementos dentro de css de anidar

eh reglas y propiedades como si fuera un

PR procesador pues te dice qué

navegadores lo tienen compatible ahora

mismo y hay poca compatibilidad todavía

hay muy poquita Porque todavía se usa

bastante todavía se usan bastante

ciertas versiones de estos navegadores

antiguos donde no hay completa

compatibilidad incluso eh versiones de

navegadores que han sacado en 2023 que

se siguen usando Por decirlo así pues

todavía no es compatible eh la anidación

Y por supuesto en muchos navegadores

móviles todavía no es compatible el css

nesting en este caso por eso es una

propiedad un poco experimental Pero

bueno con canaus tú puedes

despreocuparte de eso y puedes comprobar

antes de usar algo que pueda ser

experimental o algo que no sabes si es

compatible con todos los navegadores lo

puedes comprobar aquí Así que es una

herramienta espectacular y necesaria

Vale ahora cambiando radicalmente de

tipo de herramienta o de tipo de

utilidad Te voy a enseñar una librería

de componentes de react muy buena muy

muy buena que se llama soner y este

componente de react sirve directamente

para hacer esto Fíjate en la parte

inferior derecha de la pantalla fíjate

cóm salen pantallitas por aquí aleras es

superbonito y simplemente

instalándose para hacer ese ese tipo de

ventanas pero no solo eso puede generar

este tipo de ventan o de aler tias que

son muy chulas e también puedes hacer

este tipo de aleras este otro tipo y el

código es muy sencillo muy muy fácil

entonces un componente de r que puede

ser Útil para ti y que yo en algún

proyecto lo he utilizado Ya fíjate

puedes hacer todo tipo de alertas Okay

fíjate est de cargando Qué chula está Y

también puedes customizar la es decir

puedes hacerlas como como tú quieras

simplemente haciendo un di y poniéndole

el contenido que quieras también las

puedes poner en diferentes partes de las

de la pantalla vale es muy fácil

poniéndole el atributo Pos Okay y puedes

también hacerla como como si fueran

cayendo por aquí arriba o por defecto

que se vayan acumulando o sea las

posibilidades son bastantes bastante

bastante y está muy bien es una librería

de alertas o un componente de alertas

para rat muy muy muy bueno y aparte que

se te quedan aquí como acumulada y

puedes consultarlo después Mola me gusta

mucho creo que alguno le puede servir me

gusta me gusta bastante otra web de

recursos y utilidades que te puede

servir es css loaders de acuerdo donde

tienes infinidad de los adders

directamente hechos con css es decir no

son imágenes No son png no son gif no

son absolutamente nada simplemente son

loaders los típicos loaders de efectos

de carga que se hacen infinitamente en

una web sobre todo si es una web spa

también a día de hoy pues tienes un

montón de tipos de efectos es decir tú

estás buscando por ejemplo un efecto de

carga clásico Pues bueno tienes aquí un

montón de efectos de carga clásicos que

tú te podrías copiar por ejemplo este si

te interesa copias el css vale Y ya lo

tienes aquí es decir si lo pego por aquí

pues tengo todo el css de ese elemento

Incluso el html copiar y pegar

directamente no si hablo notas por

ejemplo lo puedo pegar por aquí para que

lo veas Te da todo el código css es

lader y tú te tienes que despreocupar en

ese sentido de poner una imagen o lo que

sea ya tienes ejemplos muy bonitos hecho

pero si hablamos de spinner del típico

que da vueltas Hay un montón también es

decir esto carga cero la web porque como

está hecho con css completamente no es

ninguna imagen pues es más beneficioso

tener un cargador un un loader hecho con

css que hecho con una imagen o con un

gif al final Eso hace que la web vaya

pesando más entonces fíjate como nos

proporciona el código incluso 3D También

tenemos cargadores 3D como estos que

están muy guapos también y son

llamativos en fin hay muchos muchos

muchos efectos de carga por aquí que tú

podrías utilizar dependiendo del

proyecto depend dependiendo tal de lo

que te interesara pero es que además no

solo eso sino que también los puedes

manipular tú ya que estamos hablando de

css que tú lo pegas por aquí y puedes

cambiar Pues el html y el css como tú

quieras para cambiar esa animación

colores efectos lo que sea como ya te he

enseñado en algunos cursos como el

máster en css3 avanzado donde aprendemos

maquetación avanzada tien el curso en la

descripción pues ahí te enseño a

manipular toda clase de animaciones y a

cambiar cualquier tipo de de efecto en

una web pero sobre todo también si

tienes un trozo de código con un loader

de esto y quieres cambiar pues la

velocidad los colores no sé qué no sé

cuántas adaptar el tipo de animación

para que tenga un teing diferente Pues

también lo podrías hacer y Estas son las

utilidades que te traía hoy las

herramientas que te traía hoy Yo creo

que están muy muy interesantes están muy

guapas te pueden servir bastante y nada

espero que te ayuden en tu día a día de

trabajo como desarrollador web que por

cierto si quieres aprender desarrollo

web tienes todos mis cursos aquí abajo

en la descripción para que puedas

aprender conmigo desde cero y paso a

paso he sacado cursos nuevos que algunos

no conocen por ejemplo la guía completa

para conseguir trabajo de programador y

Bueno hay muchos cursos míos que a lo

mejor no tienes y a lo mejor te interesa

tenerlo y los tienes en la descripción

del vídeo Por cierto ahora valen muy

poquito valen más o menos 10 o 12 creo

que incluso 10 te podría decir depende

de cuando esté viendo Este vídeo y es un

precio gastronómico es es un precio

desorbitado no 10 para la verdad que es

un regalo totalmente qué te voy a decir

eso por ahí y aparte también estoy

creando un nuevo formato de contenido

que es mandar un email al día donde doy

algún consejo de programación alguna

anécdota mando alguna utilidad enseño

algo bueno cosas cada día una cada día

diferente Así que nada nos vemos en el

siguiente vídeo de Este canal suscríbete

like y activa la campanita chao