Cenários do desenvolvimento front-end

1. WonderLAND
@luiz.chaves
FRONT-END

2. Qual desses não é um
framework JS?

3. https://www.digitalocean.com/community/tutorials/5-common-server-setups-for-your-web-application

4. http://macenstein.com/default/2008/01/apples-website-circa-1997/

7. https://www.digitalocean.com/community/tutorials/5-common-server-setups-for-your-web-application

8. https://www.slideshare.net/caelumdev/performance-na-web-o-modelo-rail-e-outras-novidades

10. 126 Request
16.8s load
3KB tamanho
https://www.webpagetest.org/result/170301_YA_ZRF/

11. Otimização na Web
https://www.slideshare.net/caelumdev/performance-na-web-o-modelo-rail-e-outras-novidades

12. https://twitter.com/sstephenson/status/730039913052176384

13. This is Front-End

15. HYPERTEXT MARKUP
LANGUAGE

20. <tag></tag>
atributo="valor"
&entity;

21. Estrutura básica

22. Mais Semântico

23. Mais Semântico

24. Mais Semântico

25. Dados Semânticos

26. Meta Tag

27. Meta Tag

28. Meta Tag

29. Featured snippets & Sitelinks

30. Instant Article Facebook

31. Accelerated Mobile Pages

32. Link Type Preload

33. Form

34. Atributo data-*

35. Áudio & Vídeo

36. Imagem responsiva

37. Compatibilidade

38. Compatibilidade

39. CASCADE STYLE SHEET

41. <big>
<blink>
<center>
<font size="" color="" face="" >
<marquee>
<table bgcolor="">

44. propriedade: valor;
propriedade: função()
@rule { … }
@media (query) { … }
#selector { … }

45. <link> External stylesheet
<style> Internal stylesheet
style="" Inline styles

47. CASCADE ???

49. CASCADE

50. Style sheetsUser Agent
Style SheetsUser
Style SheetsAuthor
Normal
Normal
Style Sheets
Style SheetsImportant Author
UserImportant

51. Thousands style attribute
Hundreds ID selector
Tens class selector, attribute selector, pseudo-class
Ones element selector, pseudo-element
Style Selector Thousands Hundreds Tens Ones Total
color: green style="" 1 0 0 0 1000
color: orange #title 0 1 0 0 0100
color: blue h1 0 0 1 0 0010
color: red h1 0 0 1 0 0010
NNNN

53. Caso remova o color: green
(style=“”) e o color: orange
(#title), qual será a cor de <h1>?
!

54. redblue
Style Selector Thousands Hundreds Tens Ones Total
color: green style="" 1 0 0 0 1000
color: orange #title 0 1 0 0 0100
color: blue h1 0 0 1 0 0010
color: red h1 0 0 1 0 0010

56. blue!

57. INHERITANCE ???

58. https://mdn.mozillademos.org/files/3623/CSS_Modules_and_Snapshots.png

59. Tabela Cor sim, Cor não

61. Variável & Calc