edición general
120 meneos
2882 clics
Trucos y consejos sobre HTML [ENG]

Trucos y consejos sobre HTML [ENG]

En HTML Tips, Marko Denic explica trucos de HTML bastante interesantes. Porque a menos que estés continuamente poniéndote al día sobre las incorporaciones al llamado lenguaje de la Web puede haber muchas novedades que te pierdas de una versión a otra, sobre todo si aprendiste HTML hace tiempo. Entre las más recientes, interesantes y efectivas está el atributo loading="lazy" para acelerar la carga de imágenes y frames. [ Vía Microsiervos ]

| etiquetas: trucos , consejos , html , etiquetas html , lazy loading , marko denic
  1. Interesante
  2. Pon siempre todos los textos con un <blink><blink/>
  3. #2 ¿Parpadeo?
  4. #2 Sí sí, siempre, pero desafortunadamente parece que todos los navegadores principales han dejado de suportar <blink>. Pero no te preocupes, que hay un polyfill: developer.mozilla.org/en-US/docs/Web/HTML/Element/blink#css_polyfill

    Los mejores consejos siempre se encuentra en los comentarios :troll:
  5. Desde que conocí Bootstrap mi vida es otra
  6. #2 No te olvides de <marquee>, verdadera old school que aún funciona en la mayoría de navegadores! :-)
  7. #6 lo dices como si Bootstrap fuera un toolkit de HTML
  8. No hagáis caso a #2 , que no sabe ni como cerrar una etiqueta html.
  9. #7 ay, el marquee y unos buenos gifs alegran el alma viejuna a cualquiera :foreveralone:
  10. #10 y si ponen un efecto de nieve en la web, ya ni te digo.
  11. #11 Y por favor no olvidemos poner de fondo algún .midi., preferiblemente "christmas_songs-jingle_bells.mid"
  12. #6 para web sencillas esta bien, pero es muy pesado para webs con mucho trafico..
  13. #11 en su día me sentí todo un hacker por poner fuego en el cursor pegando un trozo inmundo de JavaScript que ni siquiera entendía
  14. Recomiendo caniuse.com/ para ver que navegadores soportan las nuevas y no tan nuevas implementaciones de CSS y HTML, aunque desde que Internet Explorer está medio muerto y Edge utiliza el motor de Chrome esto cada vez es menos divertido :foreveralone:
  15. Y el gif de página en obras? Eso no puede faltar en el manual de todo desarrollador web...:troll:
  16. La entrada aquí es incorrecta. El atributo lo que hace es precisamente dar prioridad de descarga al resto de recursos y no a la imagen que lo contiene:

    You can use the loading=lazy attribute to defer the loading of the image until the user scrolls to them.
  17. #15 ¿Cómo hace uno para actualizarse y no volverse completamente loco? xD En realidad estoy pensando en alto.
    No soy ningún experto, pero programo en c,php,js,java... usándolos para lo que considero útil, rápido, o necesario. Pero me aterra el pensamiento de no estar nunca a la última de nada, más aún cuando uso varios lenguajes y herramientas muy diferentes.
  18. #12 pues hace poco hice una página y el cliente empeñado en que le quería poner música de fondo al cargar la página... Se lo expliqué de mil maneras pero no hubo forma...
  19. De acuerdo con la mayoría excepto la del webp. Podéis comprimir ficheros jpeg al mismo nivel que webp usando mozjpeg sin perder la simplicidad que te da un jpg.
  20. input + datalist... con lo sencillo que es crear un combo-box con esto y no lo conocía :wall: . La mayoría de los plugins/librerías para hacer algo similar se inventan unas soluciones mucho más complicadas
  21. #4 Hay hombres que solo quieren ver arder el mundo.
  22. #8 bueno, a mi que me gusta escribir HTML a pelo (normalmente usando Smarty), me simplifica bastante y me queda una salida bastante limpia
  23. #13 usalo en CDN, usa caché para estáticos... Será por soluciones para disminuir carga al servidor
  24. #19 Que salgan nuevas especificaciones no es tan malo pero como Front-end te digo que estoy hasta los huevos que cada cierto tiempo salga el nuevo framework que lo va a revolucionar todo. Estoy empezando a odiar mi profesión porque es imposible estar al día en todo y uno se cansa de aprender la nueva rueda reinventada, incluso así tienes la sensación que mañana ya estará obsoleto. O tal vez me esté haciendo viejo y prefiero gastar mi tiempo libre en otras cosas.
  25. #18 sí que las descarga según vas haciendo scroll, no es del todo correcto pero tampoco es falso
    www.youtube.com/watch?v=bRhdooBHqnc

    Lazy loading can occur on different moments in the application, but it typically happens on some user interactions such as scrolling and navigation.
    developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading#Images
  26. #21 Webp? Eso de muy del 2020, ahora hay que pasarse al avif
  27. #20 Un buen taseo en los párpados se merece esa gente.
  28. Para trucos esto: html.systems/
  29. #21 dejo aquí enlace a un conversor por si a alguien le interesa mozjpeg.com/
  30. #27 Supongo que la acabe descargando (se haga scroll o no) pero la entrada sigue siendo incorrecta. El atributo lo que hace es dar prioridad a otros recursos.
  31. #29 Nada como una buena tabla con marcos cuadrados con fondo navy o maroon.
  32. #33 "supongo" no es suficiente prueba para dar algo como incorrecto.
    developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading#images_a

    The loading attribute on an <img> element (or the loading attribute on an <iframe>) can be used to instruct the browser to defer loading of images/iframes that are off-screen until the user scrolls near them.


    Si no te vale la definición de mozilla apaga y vámonos.

    Fíjate que más abajo incluso comentan, que aún estando las imágenes marcadas como "lazy" en una zona visible, pueden (deberían) permanecer sin cargar mientras las marcadas como "eager" no hayan terminado de cargarse.
  33. loading="lazy" no es para "cargar más rápido imágenes y frames", es justamente lo contrario, para postergar la carga de imágenes y frames que son muy pesados para agilizar el proceso de carga y renderizado de la página y de otros recursos. Si empezamos así, cómo será el resto...

    Vale, veo que ya #18 lo explicó por ahí arriba...

    #35 Las carga tras terminar con el resto de cosas y recursos de la página o cuando son necesarias (por ejemplo, cuando el usuario hace scroll y tienen que verse). Esto viene por imágenes que no están en pantalla pero si en la página (que sólo se ven si haces scroll, vaya), que no tiene sentido cargarlas en primer lugar si no las ves cuando hay cosas que si tienes que ver y con las que poder interactuar que tiene que parsear primero.
  34. #18 No es incorrecta: developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

    The loading attribute on an <img> element (or the loading attribute on an <iframe>) can be used to instruct the browser to defer loading of images/iframes that are off-screen until the user scrolls near them.
  35. #22 Cosas útiles del HTML5, hay muchas cosas interesantes con las que antes tenías que pelearte cosa mala y que ahora mismo son sencillas (no digamos ya las mejoras que han introducido css3 y 4 a la hora de maquetar).
  36. #35 ¿Qué es lo que no entiendes?

    Yo no he dicho que la imágen no se descargue sino que se delega. Con "supongo" quería decir "me da igual". La entrada es incorrecta y tanto la noticia que enlaza como el comentario que pones de Mozilla coinciden en afirmar que precisamente lo último que hace el atributo es acelerar la carga de la imagen. Venga, a ver si a la tercera va la vencida.
  37. #37 Otro que tal baila. O no sabéis inglés o no sabéis de desarrollo web.
  38. #40 #36 A mí me da que los que no sabéis inglés sois vosotros. ¿Dónde dice la entrada que sirva para cargar más rápido imágenes? No pone eso en absolutamente ningún sitio. "defer" es APLAZAR la carga.
  39. #39 Pero es que el envío no pone en ninguna parte que acelere la carga de la imagen. Y sí, es cierto, se pospone su carga en deferencia del resto de contenido.

    El envío dice: Performance tip. You can use the loading=lazy attribute to defer the loading of the image until the user scrolls to them.

    Consejo de rendimiento. Puede usar el atributo loading = lazy para aplazar la carga de la imagen hasta que el usuario se desplace hacia ella.

    Ya me dirás dónde dice el envío que acelera la carga de la imagen.

    Me da la sensación de que intentamos decir lo mismo pero por algún motivo no nos entendemos
  40. #41 Y luego están los que no saben enlazar a usuarios correctamente o directamente leer comentarios...
  41. #41 Entre las más recientes, interesantes y efectivas está el atributo loading="lazy" para acelerar la carga de imágenes y frames
  42. #42 vale... he visto mi error. El error está en la entradilla y no en la noticia. Eso me pasa por no ser buen meneante y leer sólo las entradillas como más de uno... xD

    discúlpenme #39 y #36
  43. #41 te ha pasado como a mi,... te has ido a leer la noticia y el error está en la entradilla, aclarado en #45
  44. #44 Estás hablando de la entradilla, no de la entrada. Vale, no la había leído, estamos de acuerdo entonces.

    #43 Te enlacé perfectamente, pero no había leído la entradilla y pensé que hablabas de lo que ponía en la noticia.
  45. #46 Al poner #18 "entrada" me ha líado completamente xD
  46. #47 ¿Entradilla? Disculpadme a mi por desconocer los tecnicismos de meneame! xD #42 #41
  47. #22 muchas veces la lista es enorme y necesitas una llamada ajax... yo suelo usar select2. rapido, facil, comodo.
  48. A mis favoritos -> Recursos. Directo.
  49. #49 Jaja sí, no sé si es una asignación "oficial", pero desde hace años siempre se ha llamado entradilla :-) Sorry!
  50. #26 Por eso hay que aprender bien Vanilla y lo demás viene caso solo. No hay que odiar el front sino conocer bien la base.
  51. #50 Sin librerías, hacer una llamada con fetch y procesar el resultado tampoco es complicado. Pero estoy pensando más en componentes de Angular/React/Vue
  52. #38 A mi async/await y fetch me ha dado la vida. Y, en general, ya no uso jQuery para asegurarme la compatibilidad entre navegadores. Nunca una muerte ha sido tan celebrada como la de Internet Explorer.
  53. #53 Ya sé la base, lo que me jode es que reinventen la rueda una y otra vez y yo me canso de tirar del carro. Después te encuentras mierdas escritas por la gente y dices "¿y para esto tanto rollo con el framework?". No sé para qué tenemos Vanilla Javascript, si nadie lo utiliza para nada.
  54. #6 Hoy en día bootstrap te aporta bien poco teniendo flex y grid.
comentarios cerrados

menéame