Este documento apresenta o currículo de Márcio Lucas, que é técnico em informática e graduando em tecnologia em sistemas para internet. Ele tem experiência como programador e web designer, com foco em frameworks como PHP, Javascript, Java, TypeScript, Twitter Bootstrap, Materialize e Angular 2. O documento também descreve o que são frameworks e apresenta detalhes sobre Bootstrap e Materialize.

2. Márcio Lucas
● Técnico em Informática.
● Graduando em Tecnologia em
Sistemas para internet.
● Programador & Web designer.
● Experiência em PHP, Javascript,
Java e TypeScript.
● Experiência com frameworks
como: Twitter Bootstrap,
Materialize e Angular 2.

3. Link da apresentação:
goo.gl/13ByrL

4. Frameworks
Estas são as frameworks web front-end
que já trabalhei em meu tempo de
web-designer.

5. Frameworks
Neste curso, serão abordadas tanto o
Bootstrap quando o Materialize, porém
o foco será em Materialize.

6. Frameworks

7. O que são frameworks?

8. Framework é um conjunto de códigos com um alto nível
de abstração a fim de chegar em uma funcionalidade
genérica para facilitar a confecção de aplicações.

9. Bootstrap

10. Bootstrap é um dos mais populares frameworks HTML,
CSS e JS, ele é muito utilizado no desenvolvimento de
aplicações e sites voltados para dispositivos móveis.

11. O Bootstrap surgiu em 2010 quando os então engenheiros
do twitter Jaboc e Mark, criaram uma estrutura padrão
para ser usada.

12. O objetivo era diminuir e evitar as incompatibilidade de
códigos que ocorriam no Twitter, pois sua equipe era
muito grande.

13. Alguns sites que utilizam Bootstrap.

17. Materialize

18. Materialize é uma framework nova que trabalha com os
princípios do Material Design, do Google.

19. Mas diferentemente do Material design, ela é escrita
puramente em CSS e JS, e tem dependências com o
jQuery

20. A framework foi criada por um grupo de estudantes da
Carnegie Mellon University de Pittsburgh, Pensilvânia

21. Materialize Team

22. A Materialize foi criada para ser totalmente responsiva e
otimizada para dispositivos móveis.

23. CONHEÇA
MATERIALIZE NO
MOBILE!

24. CONHEÇA
MATERIALIZE NO
DESKTOP!

25. Alguns produtos utilizando Materialize

29. Começando...

30. Grids

31. Grids são como colunas que separa a página em vários
pedaços.

33. No materialize, utilizamos 12 colunas principais. Sendo elas:

35. Como as definimos

37. Propriedades s, m, l

38. S: telas de smartphones <= 600px

39. M: telas de tablets <= 992px

40. L: demais telas > 992px

41. Componentes

42. O materialize tem uma ampla gama de componentes,
desde os inputs aos botões. Todos padronizados de
acordo com o Material Design do Google.

43. Alguns exemplos de formulários com Materialize

46. Botões

49. Cartões

52. Link do repositório de
exemplos:
goo.gl/mJbCZz

53. Proposta de atividade

55. Link da apresentação:
goo.gl/13ByrL
Página 55

56. Algumas comparações
bootstrap x material

59. Plugins

60. O materialize contém muitos plugins jQuery, para que a
navegação fique mais fluida, bonita e divertida.

61. jQuery

62. Definição

63. jQuery foi desenvolvida para tornar mais simples a
navegação do documento HTML, a seleção de elementos
DOM, criar animações, manipular eventos e desenvolver
aplicações AJAX.

64. Sintaxe básica

65. $(“seletor”).methodsOrAttributes

66. Exemplo

67. Neste exemplo vou mostrar a propriedade hide() do
jQuery,
ao clicar em um botão, vamos fazer sumir um determinado
elemento do DOM.

68. O que é DOM?

69. O DOM é meio que o universo onde habitam os objetos
html. Exemplo: Uma <div> é um objeto da árvore do DOM.

70. Parallax

71. Parallax ou parallaxe em português é uma tendência de
design de web-pages que vem desde 2012, de lá pra cá
ele vem tomando cada vez mais espaço na web.

72. Trata-se de um efeito de background para dar o efeito de
profundidade.

73. Um lugar que podemos ver um exemplo de parallax é no
grande Twitter

75. Agora vamos para o
<coding/>

77. Particularidade dos plugins

78. Os plugins do jQuery precisam ser inicializados.

79. O que seria “ser
inicializados”?

80. Você precisa “contar” ao jQuery que você colocar aquele
plugin naquele devido lugar.

82. Collapsible

83. O Collapsible é um plugin geralmente para fazer menus
laterais.

84. Ele é um objeto que se parece com um accordion que é
expandido ao ser clicado.

87. Estrutura HTML

89. Inicialização.

91. Spotify + Materialize

92. Vamos começar pelo JS que faz a requisição AJAX na API
do Spotify.

93. O que é AJAX?

94. Ajax faz com que você faça uma requisição assíncrona,
isso quer dizer que você atualiza somente o que você quer
na página, não precisando atualizar ela toda para dar um
“update” em um determinado elemento ou campo.

95. Vamos ao código.