Animaciones Web HERMOSAS con VIEW TRANSITION

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 พ.ย. 2024

ความคิดเห็น • 78

  • @yahelrafe
    @yahelrafe 4 หลายเดือนก่อน +29

    estoy viendo el video, me gusta, pero un poquito más baja la música porfavor, me gustaría escuchar más tu linda voz, ánimo❤

    • @stepbro_davo
      @stepbro_davo  4 หลายเดือนก่อน +15

      le comentaré al editor que está despedido 💝💝😽😽

    • @blazsnk
      @blazsnk 3 หลายเดือนก่อน

      ​@@stepbro_davobro

  • @jesuscarrasco9963
    @jesuscarrasco9963 4 หลายเดือนก่อน +5

    Increíble las View Transitions, más vídeos asi por favor ✨✨

  • @EllieT7
    @EllieT7 4 หลายเดือนก่อน +2

    Me gusta la manera en la que explicas jajaja, gran video 🥳 nueva sub :)

  • @yahelrafe
    @yahelrafe 4 หลายเดือนก่อน +2

    listo, me encantó, buena explicación, buena edición, buena voz y buen cerebro, muy inteligente amigo 🎉❤

    • @stepbro_davo
      @stepbro_davo  4 หลายเดือนก่อน +1

      muchas gracias amiguito un saludo

  • @ugaldeosunafranciscojared150
    @ugaldeosunafranciscojared150 4 หลายเดือนก่อน +2

    ¡Me encantó este video! Es súper entretenido e impresionante. La edición y la animación que creaste son geniales, sin duda un deleite visual. Además, las explicaciones son claras y fáciles de entender. ¡Felicidades por tu trabajo!

    • @stepbro_davo
      @stepbro_davo  4 หลายเดือนก่อน

      ¡Muchas gracias por tu comentario! Me alegra mucho saber que disfrutaste el video y que encontraste las explicaciones claras y entretenidas. Me esfuerzo mucho en la edición y la animación, así que es genial saber que lo apreciaste. ¡Gracias por tu apoyo y por tomarte el tiempo de dejar un comentario tan positivo! ¡Espero seguir creando contenido que te guste!

  • @franciscosantiagocruz9867
    @franciscosantiagocruz9867 4 หลายเดือนก่อน +1

    Wow recien me encuentro con tu canal, pero me fascinó muy buena explicación y nuevo tema por aprender, punto de mejora solo dismunuir un poco la musica pero en general todo genial muchas gracias

  • @renyck5864
    @renyck5864 4 หลายเดือนก่อน +3

    Gran video padre

    • @stepbro_davo
      @stepbro_davo  4 หลายเดือนก่อน

      ¡Gracias, me alegra que te haya gustado! ¡Saludos!

  • @950GOKU
    @950GOKU 26 วันที่ผ่านมา

    Disculpa bro. Que tema es que usas en VSCode?

  • @rab1856
    @rab1856 3 หลายเดือนก่อน +3

    Jajaja muchas gracias, ahora me despidieron

  • @marcosaens5276
    @marcosaens5276 3 หลายเดือนก่อน

    Buenisimo video. Tienes mucho potencial

  • @Henry_Nunez
    @Henry_Nunez 2 หลายเดือนก่อน +1

    🔔👈

  • @zsasly
    @zsasly 4 หลายเดือนก่อน +1

    buen video

  • @idistopy
    @idistopy 4 หลายเดือนก่อน

    Enseña cómo colocar el puntero que tienes, está buenísimo!! Buen vídeo por cierto ^^

  • @milycortes3100
    @milycortes3100 3 หลายเดือนก่อน

    Muy unintentional asmr el video, la vdd, ¡nueva subscripción! Me gustó la explicación:D

  • @carlosedgusi
    @carlosedgusi 3 หลายเดือนก่อน +1

    4:43 otro posible problema (basado en lo que veo, aun no pruebo la api) es que al parecer el grupo que hace la transición cambia su z-index por encima de todo, aqui por ejemplo se superpone al botón al hacer la transición y me parece que en los resultados finales lo sigue haciendo

    • @stepbro_davo
      @stepbro_davo  3 หลายเดือนก่อน +1

      EXACTOOOOO, lo notaste, y de hecho pronto se viene un video solucionado justo eso jajajja, lamentablemente ya no usando view transitions D:. Pero me alegra que alguién lo notará, bueno ojo.

  • @EdgarHernández-k7u
    @EdgarHernández-k7u 3 หลายเดือนก่อน +1

    Excelente video, ¿Cuentas con algún repositorio o sitio donde está el código fuente de este proyecto?

  • @juanpablo9717
    @juanpablo9717 4 หลายเดือนก่อน

    Excelente contenido!
    Una pregunta, de donde sacas ideas para wl dieño? Ese diseño es creo basado en material UI pero nunca había visto esa navegación izquierda en ese estilo von el fontenido derecho como una "pastilla"
    Me gustaría ver mas diseños aso para sacar ideas 💡

    • @stepbro_davo
      @stepbro_davo  4 หลายเดือนก่อน

      graciaaas, de hecho el diseño de la navegación lateral lo hice usando las reglas de diseño de google de material design 3, también puedes ver que utilizan esa navegación en páginas como fonts.google.com entre otras con documentación comom m3.material.io . Ahí podrás ver también muchas reglas o ideas para diseños con ese estilo, saluditos.

    • @juanpablo9717
      @juanpablo9717 4 หลายเดือนก่อน

      @@stepbro_davo genial!! Muchísimas gracias por la respuesta

  • @cesarsanchezmoreno173
    @cesarsanchezmoreno173 3 หลายเดือนก่อน

    Buen vídeo hermano, qué framework usaste en el vídeo?

    • @stepbro_davo
      @stepbro_davo  3 หลายเดือนก่อน

      graciaaas, ningún framework, todo vanilla

  • @nicolasandres3240
    @nicolasandres3240 4 หลายเดือนก่อน

    Muy buen video bro

    • @stepbro_davo
      @stepbro_davo  4 หลายเดือนก่อน

      Gracias! 😊

  • @aaroncustodio5291
    @aaroncustodio5291 3 หลายเดือนก่อน

    Hola Davo, espero estes bien! Me encanta el diseño que utilizas en tus diferentes aplicaciones. Actualmente estoy aprendiendo a través de cursos en Udemy HTML, CSS y JavaScript (soy totalmente novato, con un pequeño acercamiento a la programación hace unos años atrás) y quería consultarte:
    1. ¿Qué me recomendarías para poder poner en practica lo aprendido, hay algún sitio en especifico con ideas para construir proyectos personales?
    2. En cuanto al diseño, ¿utilizas alguna herramienta en específico para diseñar?
    ¡Muy buen contenido! Tienes un suscriptor nuevo :)

    • @stepbro_davo
      @stepbro_davo  3 หลายเดือนก่อน +1

      holaa, muchas gracias. mira para las ideas te recomiendo crear proyecto de cosas que necesites tú, como una aplicación para manejar tus gatos,etc.
      En cuanto a diseño utilizo figma para diseñar,saludooos.

    • @aaroncustodio5291
      @aaroncustodio5291 3 หลายเดือนก่อน

      @@stepbro_davo ¡Muchas gracias! 😁😁😁😁😁😁

  • @isaidstream4547
    @isaidstream4547 4 หลายเดือนก่อน +1

    La virtualKeyboard API tambien esta genial, pero Safari no lo admite. Al parecer Apple te quiere forzar a que hagas una app nativa. 😢 Creo que tambien apple prohibió las PWAs no recuerdo bien. Pero igual sigo aprendiendo.

    • @stepbro_davo
      @stepbro_davo  4 หลายเดือนก่อน

      oohh no conocia esa api, la revisaré.
      Sí lamentablemente apple descontinuó las pwas en europa porque les exigian algo de los navegadores y prefirieron dejarlo

  • @rhampherios1202
    @rhampherios1202 4 หลายเดือนก่อน +2

    Interesante

  • @dava-programminginformatic3291
    @dava-programminginformatic3291 3 หลายเดือนก่อน +1

    ¿Tendrías algún problema si mandaras el codigo de eso? Es que es un poco complicado replicarlo.

  • @iamjuanpaz
    @iamjuanpaz 4 หลายเดือนก่อน

    Me gusta lo que haces , que plantilla usas en el front ?

    • @stepbro_davo
      @stepbro_davo  4 หลายเดือนก่อน

      hola muchas gracias, es una "plantilla" propia, con diseño basado en material design 3

    • @ivanmamanicorzo
      @ivanmamanicorzo 3 หลายเดือนก่อน

      ​@@stepbro_davopuedes compartirlo tu plantilla? O como usas material?

    • @stepbro_davo
      @stepbro_davo  3 หลายเดือนก่อน

      @@ivanmamanicorzo busca material web compontents y te saldrá la documentación para instalar los componentes en tu proyecto, ya el resto de la plantilla es hecha a mano

  • @_dankira_
    @_dankira_ 4 หลายเดือนก่อน +6

    a ver otra vez?? xd

    • @jlonso1840
      @jlonso1840 4 หลายเดือนก่อน

      xD

    • @truzhot
      @truzhot 13 วันที่ผ่านมา

      Creo que no agregó suficientes rows para ver la animación XD

  • @miguel.gallardof
    @miguel.gallardof หลายเดือนก่อน

    Hola! esas estrellas que te aparece al empezar una nueva línea de código, es IA? si es así cuál es? Gracias

    • @stepbro_davo
      @stepbro_davo  หลายเดือนก่อน

      holaa, es copilot de github, suludos ⭐⭐

  • @mr.fabian8471
    @mr.fabian8471 4 หลายเดือนก่อน

    Disculpeme caballerisimo, lo inoportuno con mi cuestionamiento ... pero veo que cuando agregas la view transition, en ningun momento estas explicando con precision y al detalle , sobre todo para personas como yo, enfocadas en el detalle y que no podria conciliar el sueño de no calmar mi inquietud , pero sin divagar mas , lo que no explicaste es .... como se llama la canción que suena de fondo ? demasiado buen gusto

    • @stepbro_davo
      @stepbro_davo  4 หลายเดือนก่อน

      increíble detalle me perdí de poner, una disculpa, aquí tiene el nombre "ルパン3世" y aquí tiene el link de su vide th-cam.com/video/MK-nIyqm0Dc/w-d-xo.html es la segunda canción

  • @painexe539
    @painexe539 4 หลายเดือนก่อน

    Hola, buen video, tienes el link de los componentes utilizados de material desing?

    • @stepbro_davo
      @stepbro_davo  4 หลายเดือนก่อน

      hola, muchas gracias. Aquí tienes el link con la documentación para instalarlo mira material-web.dev/about/quick-start/
      siguiente los pasos de ahí, podrás tener un archivo bundle de js al que tendrás que referenciar en tu código y ya podrás utilizarlos.
      Igual depende la manera en que este hecho tu proyecto el cómo los implementas, pero ahí está la documentación, saluditos.

  • @carlosdanielmartinezlopez6304
    @carlosdanielmartinezlopez6304 3 หลายเดือนก่อน

    Buen video, tienes un tutorial de como hacer ese sistema desde cero?

  • @andresgomez5592
    @andresgomez5592 4 หลายเดือนก่อน

    Hola amigo soy backend con spring y Java, sin embargo es innegable lo user-friendly que hiciste este Dashboard, precisamente yo también estoy haciendo un Dashboard, me podrías dar un contacto para hacerte algunas preguntas? Yo he usado react pero no modificaba los estilos directamente en css sino que usaba flowbite y tailwind css, como podría lograr esto mismo con lo mencionado? Este tema se llama view transitions correcto?

    • @stepbro_davo
      @stepbro_davo  4 หลายเดือนก่อน

      @@andresgomez5592 Hola, podrías mándame correo a luisdavid.gris@gmail.com o agregarme a discord como stepbrodavo. Para lograr los estilos podrías usar directamente la librería de componentes de material design para comenzar, después el resto de cosas podrías modificarlas con tailwind hasta llegar a algo amigable

  • @MonasChinasReales
    @MonasChinasReales 4 หลายเดือนก่อน

    Supongo que el problema ahora es obtener los cambios de los elementos borrados en caso de que se haya borrado un elemento antes de añadir el nuevo, ya que no obtienes haces un get de la base de datos, no?

    • @stepbro_davo
      @stepbro_davo  4 หลายเดือนก่อน +1

      al borrar un registro es otro proceso parecido, llamo a la función que se encarga de eliminar los registros de esa tabla, cuando la función recibe del servidor que se eliminó correctamente el registro, entonces se llama a otra función que se encarga de eliminar del DOM el registro eliminado, aún sin necesidad de obtener todos los datos nuevamente. Los problemas reales que veo es que el dato siempre saldrá arriba y no se acomodará según el orden establecido, y que se difiiculta un poco más traer los nombres de las cosas que ocupaban hacer un join en la consulta original de la tabla

    • @MonasChinasReales
      @MonasChinasReales 4 หลายเดือนก่อน

      @@stepbro_davo Yo me refiero más a que otro usuario borre un elemento de la tabla desde otra sesión

    • @stepbro_davo
      @stepbro_davo  4 หลายเดือนก่อน

      @@MonasChinasReales mmm, entonces sí sería un problema, en este caso la aplicación no está pensada para usarse con varias sesiones a la vez, pero sí sería un problema. Igualmente sin este tipo de forma de eliminar y agregar datos estaría el problema de tener que detectar cuando otra sesión hace cambios. Se me ocurre que con web sockets pero aún no estoy familiarizado con eso

    • @MonasChinasReales
      @MonasChinasReales 4 หลายเดือนก่อน +1

      Igual si la app no esta pensada para eso no te preocupes en el desarrollo

  • @hernaldocastro8944
    @hernaldocastro8944 หลายเดือนก่อน

    Buenas, como verificas que el elemento que agregaste no esta duplicado o ya existe en tus registros?

    • @stepbro_davo
      @stepbro_davo  หลายเดือนก่อน

      Hola buenas, si necesito comprobar una duplicación lo hago desde el backend, si este detecta un duplicado regresa un false por lo que el proceso del video no se ejecuta, más bien se mostraría un mensaje de error en este caso duplicado

    • @hernaldocastro8944
      @hernaldocastro8944 26 วันที่ผ่านมา

      @@stepbro_davoGracias, entiendo eso, pero me asombraba que este proceso tan rápido dependa de un back y una BBDD, seria quizás si pudieses interiorizar mas a travez de un crud sencillo, aun que vi deprecantes esta librería, en otro video.

    • @stepbro_davo
      @stepbro_davo  26 วันที่ผ่านมา

      @@hernaldocastro8944 entiendo, cómo lo harías tú? soy nuevo en esto

    • @hernaldocastro8944
      @hernaldocastro8944 19 วันที่ผ่านมา

      @ memcached en una capa bff antes del back ✌️

  • @ricard_o21
    @ricard_o21 4 หลายเดือนก่อน

    Hola bro, de casualidas mnajeas react¡ de ser asi como podria conctatarte para un proyecto y saber los costes claro

    • @stepbro_davo
      @stepbro_davo  4 หลายเดือนก่อน +1

      holaaa, la verdad aún no manejo casi nada de react pero me gustaría mucho aprenderlo por lo usado que es

  • @davidinfroy
    @davidinfroy 4 หลายเดือนก่อน

    que lenguajes manejas?, como te puedo contratar para una tarea?

    • @stepbro_davo
      @stepbro_davo  4 หลายเดือนก่อน +1

      @@davidinfroy javascript, php, html, css, todo lo de la web, mándame un correo si gustas

  • @lazy5922
    @lazy5922 13 วันที่ผ่านมา

    QUIEN TE DIJO QUE PODES DEJAR DE SUBIR VIDEOS?

    • @stepbro_davo
      @stepbro_davo  13 วันที่ผ่านมา

      pronto video de tutorial de plantilla

  • @lazy5922
    @lazy5922 13 วันที่ผ่านมา

    iiiincreible tutorial

  • @israelgonzalez4439
    @israelgonzalez4439 3 หลายเดือนก่อน

    usa react bro 🚬🗿

  • @LuisFernando-nm6lv
    @LuisFernando-nm6lv 3 หลายเดือนก่อน

    Es bueno conocer otras propiedades, 👍🏼 pregunta, ¿Como haces la animación del formulario? para que parezca que sale del botón.

    • @stepbro_davo
      @stepbro_davo  3 หลายเดือนก่อน

      con Flip de gsap , saludos