Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

The Flash no front-end

658 Aufrufe

Veröffentlicht am

Como ser mais produtivo no front-end utilizando novas tecnologias ao seu favor.

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

The Flash no front-end

  1. 1. The Flash no FRONT-END Cezar Luiz
  2. 2. HTML5
  3. 3. <!doctype html>
  4. 4. <video> <audio> <picture> <web-components> srcset <section> <article> <aside> <header> <footer> <meta charset=utf-8> <hgroup> websocket <maisde8000>
  5. 5. Imagens retinas <img src=“logo.png” srcset=“logo@2x.pn g 2x”>
  6. 6. Inputs email search phone date color text range number tel time week datetime required autofocus min max pattern step
  7. 7. CSS cansei de ser sexy
  8. 8. #header { color: red; } .section { background: red; } .title-section { color: red; }
  9. 9. Why? SASS, LESS, Stylus…
  10. 10. // SASS $alert: red; .alert { background: $alert; }
  11. 11. // SASS @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }
  12. 12. OMFD!
  13. 13. variáveis flexbox gradients border radius box shadow text shadow normalize reset sprites (tools ftw) transitions animations IE10+ !important CSS3 everywhere!
  14. 14. JavaScript
  15. 15. jQuery? Será que preciso?
  16. 16. $(‘.post’) vs document.querySelec torAll(‘.post’) // IE8+
  17. 17. $ (‘#header’).addClass(‘fixed') vs header.classList.add(‘fixed') // IE10+
  18. 18. $(‘#header’) vs document.querySelec tor(‘#header’) // IE8+
  19. 19. API’s geolocation vibration canvas dragndrop filesystem indexeddb shadowdom websocket webgl webrtc battery ajax2 network information page visibility full screen getusermedia storing data
  20. 20. Tá… Mas eu já sabia disso… Cade o “flash”?
  21. 21. NODEJS + NPM + COMUNIDADE = MÁGICA HAPPENS
  22. 22. mais especificament e…
  23. 23. Grunt / Gulp + Bower + Yeoman
  24. 24. Grunt / Gulp Automatizadores de tarefas - concatenam, minificam, otimizam imagens, livereload, autoprefixer, sass ou less - tudo isso automagicamente
  25. 25. Bower Gerenciador de dependências front-end npm install jquery angular normalize-css animate-css fastclick --save
  26. 26. Yeoman Generators - criam toda a estrutura para você em um simples comando, já incluindo o grunt / gulp, bower, bootstrap ou o generator que você quiser
  27. 27. Yeoman Generators para wordpress, angular, jquery, ionic, backbone, polymer, express, chromeapp, bootstrap… to infinity and beyond
  28. 28. Escolheu sua aplicação?
  29. 29. yo gulp-webapp autoprefixer jshint jslint otimizar imagens livereload sass minificação contatenação htaccess wiredep
  30. 30. gulp watch
  31. 31. Acabou de desenvolver?
  32. 32. gulp
  33. 33. Pronto sir! Toda sua aplicação acabou de ser otimizada!
  34. 34. live demo dá tempo?
  35. 35. thanks!

×