Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Oda a la década++

Oda a la década++

Eva Ferreira

October 19, 2019
Tweet

More Decks by Eva Ferreira

Other Decks in Programming

Transcript

  1. Oda a la década++
    Eva Ferreira – Colombia, 2019

    View full-size slide

  2. ¡Hola!
    Soy Eva :)

    View full-size slide

  3. ¡Hola!
    Soy María Evangelina
    Ferreira Kuzminski

    View full-size slide

  4. Haciendo sitios desde 2008

    View full-size slide

  5. @evaferreira92

    View full-size slide

  6. ¿Por qué querés estudiar esto?
    Pasión y entusiasmo por sobre méritos académicos

    View full-size slide

  7. “Quiero conectar
    personas y la web me
    permite eso”
    Eva a los 18 años.

    View full-size slide

  8. Pasaron los años…

    View full-size slide

  9. Top 10
    De las cosas más lindas que vi crecer en la web

    View full-size slide

  10. 10.
    Menos imágenes
    innecesarias

    View full-size slide

  11. Degradados versión 2009
    .element {
    background-image: url('gradient.png');
    background-repeat: repeat-x;
    }
    @evaferreira92

    View full-size slide

  12. @evaferreira92

    View full-size slide

  13. @evaferreira92

    View full-size slide

  14. Border-radius versión 2009
    .element::after {
    /* Inserte aquí mucho código */
    }
    @evaferreira92

    View full-size slide

  15. “¡Puedo hacer círculos!”
    @evaferreira92

    View full-size slide

  16. @evaferreira92

    View full-size slide

  17. @evaferreira92
    Clip-path, shapes y SVG

    View full-size slide

  18. Menos imágenes innecesarias
    • Menos requests al servidor
    • Mejor código
    • Ya no todo es rectángulos dentro de rectángulos
     Clip-path
    @evaferreira92

    View full-size slide

  19. Funciones flechita
    elemento.addEventListener('click', function (e){
    // Inserte aquí su código
    });
    @evaferreira92
    elemento.addEventListener('click’, (e) => {
    // Inserte aquí su código
    });

    View full-size slide

  20. Funciones flechita
    elemento.addEventListener('click', function (e){
    // Inserte aquí su código
    });
    @evaferreira92
    elemento.addEventListener('click’, e => {
    // Inserte aquí su código
    });

    View full-size slide

  21. Funciones flechita
    @evaferreira92
    elemento.addEventListener('click', () => console.log('Hola'));
    unArray.map(item => item * 2);

    View full-size slide

  22. 8.
    Layout revolution

    View full-size slide

  23. Grids & Flexbox
    @evaferreira92

    View full-size slide

  24. ¿Grids Vs. Flexbox?

    View full-size slide

  25. Grids junto a Flexbox

    View full-size slide

  26. @evaferreira92

    View full-size slide

  27. @evaferreira92

    View full-size slide

  28. Jen Simmons Rachel Andrew

    View full-size slide

  29. Fetch
    • XMLHttpRequest renovado
    • Nunca más tipear eso.
    • Pero gracias a XHR
     Aprendí los mensajes HTTP
    @evaferreira92

    View full-size slide

  30. https://www.google.com/teapot

    View full-size slide

  31. @evaferreira92

    View full-size slide

  32. @evaferreira92

    View full-size slide

  33. 6.
    Picture element

    View full-size slide

  34. Picture element
    • Facilita trabajar con imágenes responsive
    • Evita gastarle datos innecesarios al usuario
    • Permite entregar distintos formatos de imagen
    @evaferreira92

    View full-size slide

  35. Picture element




    @evaferreira92

    View full-size slide

  36. Formato webp





    https://css-tricks.com/using-webp-images/

    View full-size slide

  37. @evaferreira92

    View full-size slide

  38. @evaferreira92

    View full-size slide

  39. 5.
    Componetización

    View full-size slide

  40. Componetización
    • Angular
    • React
    • Vue
    • Svelte
    @evaferreira92

    View full-size slide

  41. Componetización
    • Hermosa arquitectura
    • Fácilmente escalable
    • Elementos reutilizables
    • Trabajo en conjunto con diseño
    @evaferreira92

    View full-size slide

  42. 4.
    Animaciones

    View full-size slide

  43. Animaciones circa 2008

    View full-size slide

  44. Animaciones circa 2008

    View full-size slide

  45. Animaciones hoy
    • CSS
     Transitions
     Animations
    • JavaScript
     GSAP
     Web Animations API
     …
    • SVG all the things
    @evaferreira92

    View full-size slide

  46. Chris Gannon - @chrisgannon

    View full-size slide

  47. Julia Muzafarova - @miocene

    View full-size slide

  48. Rachel Nabors - @rachelnabors

    View full-size slide

  49. 3.
    HTML5 forms

    View full-size slide

  50. ¿Validar direcciónes de e-mail?
    Regex

    View full-size slide

  51. HTML5 forms
    • Validaciones nativas
     E-mail
     Required
     …
    • Type number
    • Type date
    @evaferreira92

    View full-size slide

  52. @evaferreira92

    View full-size slide

  53. 1.
    Developer tools

    View full-size slide

  54. Developer tools hoy
    • HTML / CSS / JavaScript
    ¡Psst! CSS es más feliz con Firefox
    • Diseñar en el navegador
    • Accesibilidad
    • PWA
    @evaferreira92

    View full-size slide

  55. Developer tools hoy
    • Performance
    • Memoria
     Charla de Katie Fenn https://nordicjs.com/2019
    • Frameworks
    • ¡Muuuchas cosas más!
    @evaferreira92

    View full-size slide

  56. ¡Estamos en un
    momento increíble!
    Es el mejor momento para comenzar a estudiar desarrollo web.

    View full-size slide

  57. “Veníamos bien…
    pero pasaron cosas”
    Presidente de Argentina

    View full-size slide

  58. Push Notifications

    View full-size slide

  59. @evaferreira92

    View full-size slide

  60. Primero creamos la
    tecnología, después
    creamos la tecnología
    para bloquear la
    tecnología.

    View full-size slide

  61. Cookie banner

    View full-size slide

  62. @evaferreira92

    View full-size slide

  63. https://privacyinternational.org/long-read/3196/no-
    bodys-business-mine-how-menstruation-apps-are-
    sharing-your-data

    View full-size slide

  64. “Si el producto es gratis el
    producto sos vos”

    View full-size slide

  65. Accesibilidad

    View full-size slide

  66. The WebAIM million
    97.8% de las páginas fallaron WCAG

    View full-size slide

  67. Errores más comunes
    • Bajo contraste
    • Falta texto alternativo en imágenes
    • Links vacíos
    • Falta de labels en formularios
    • Falta de definición del idioma en el HTML
    @evaferreira92

    View full-size slide

  68. Fun fact:
    Dijeron que fue un error.

    View full-size slide

  69. @evaferreira92

    View full-size slide

  70. ¿Nos estamos olvidando del usuario?

    View full-size slide

  71. ¿O simplemente estamos cansados?

    View full-size slide

  72. La falta de accesibilidad no es maldad

    View full-size slide

  73. Tengo que saber X.
    Todos saben sobre X
    menos yo. Soy una
    impostora y se nota. Se
    van a dar cuenta de que
    no se tanto. X parece
    tan fácil pero yo no

    View full-size slide

  74. ¡El falso full-stack developer
    es algo bueno!

    View full-size slide

  75. La web es hermosa
    Tenemos que cuidarla un poco más.

    View full-size slide

  76. Cuidar al usuario

    View full-size slide

  77. Cuidarnos entre
    nosotros

    View full-size slide