A sopa de letrinhas do Front-end, bora entender?

Palestra apresentada no evento Rails Girls NH 2017, abordando um resumo sobre o Front-end

Transcript

1. A sopa de letrinhas do Front-end: Bora entender?
2. OLÁ! Milene V. Lacerda Desenvolvedora Front-end e Criadora do projeto Encoding Women milenelacerda@icloud.com @milenevlacerda
4. O que é “Front-end” ? O Front-end é o que como se denomina a apresentação da interface para o usuário, ou seja, nele é englobado o CSS, HTML e também JS ou (jQuery). É a partir destas linguagens que criamos o layout de nossa aplicação, dando forma assim à todo o visual web que temos. Ex.: Sites, Aplicativos, Jogos, etc. BACK-END . FRONT-END E MUUUITOS outros...
5. 1. HTML A linguagem de marcação.
6. ‘’ Estrutura Básica
7. Exemplos de Algumas Tags HTML ▣ <link> - Inclui um documento externo ▣ <header></header> - Cria-se um cabeçalho ▣ <h1></h1> - Cria-se títulos de expressão, numeração 1-6 ▣ <div></div> - Cria-se um bloco ▣ <p></p> - Cria-se um parágrafo ▣ <a href=”#”/> - Cria-se um link ▣ <img src=””> - Inclui uma imagem ▣ <ul></ul> - Cria-se uma lista ▣ <li></li> - Cria-se um elemento dentro de uma lista ▣ <footer></footer> - Cria-se um rodapé
8. E muitas outras! http://www.html5doctor.com/ </>
11. Entendendo os Atributos É a forma como iremos dizer como nossos elementos irão se comportar. Assim vamos poder, por exemplo: ▣ Estilizar um elemento com CSS ▣ Atribuir um endereço real a um link ▣ Declarar o caminho de onde está salva a imagem que queremos ▣ etc.
13. 2. CSS A linguagem de estilo.
14. Primeiro Passo: “Linkando” o CSS ao HTML
15. Seletores CSS No CSS, as regras iniciam com um seletor, o qual representa um elemento criado no HTML onde a regra se aplica. ▣ # -> Se refere ao elemento que possui uma id ▣ . -> Se refere ao elemento que possui uma classe ▣ div -> Se refere a todos os elementos cuja tag é div
16. Propriedades CSS São pelas propriedades CSS que damos forma ao nosso layout, ou seja, é nelas que setamos alturas, larguras, fontes, tamanho da fonte, cores, backgrounds, opacidade, largura de uma fonte, posição de um elemento, bordas, margens, etc...
19. Seletores, Propriedades, Pseudo-classes, Pseudo-elementos: https://developer.mozilla.org/en-US/docs/Web/CSS/Ref erence { }
20. 3. JavaScript Interação com o usuário
21. Entendendo o JavaScript O JavaScript (ou ECMAScript como inicialmente denominada) é uma linguagem de programação orientada à objetos, usada tanto no Front-end como Back-end (através de ambientes como Node.js, por exemplo). É uma linguagem muito usada no client-side pelo seu alto poder de interação com o usuário e poder de controlar os elementos do DOM (multi-plataforma que representa como as marcações em HTML (e outras) são organizadas e lidas pelo navegador que você usa). No espaço Front-end, criou-se o jQuery, uma biblioteca de funções JavaScript para interagir mais facilmente com os elementos do nosso HTML no DOM. Com ele, conseguimos criar animações, manipular eventos, criar plugins e tantas outras coisas em nossa aplicação.
22. Exemplo de clique:
23. JavaScript jQuery
24. 4. Frameworks Bootstrap O nosso amigo na implementação
25. O que são Frameworks? Frame (moldura/estrutura) Work (trabalho) Como o próprio nome diz, frameworks são uma estrutura de trabalho moldado com a finalidade de nos ajudar no desenvolvimento de aplicações, ou seja, os frameworks nos dão uma estrutura baseada no que a nossa aplicação necessitará. Existem muitos tipos de frameworks, frameworks CSS, frameworks JS, frameworks PhP, frameworks Java e por ai vai… Exemplos deles são: O Bootstrap (do qual falaremos a seguir), Angular.js e o Rails !
26. Bootstrap framework CSS.
27. Site Oficial: http://getbootstrap.com/
28. Instalação Ou com algum gerenciador de pacotes… http://getbootstrap.com/getting-started/
32. Resumindo …
33. 5. Dicas Para aqueles que querem seguir o desenvolvimento Front-end
34. Aprenda sobre: ▣ Design Responsivo ▣ Frameworks JS/CSS ▣ Pré-processadores CSS (SASS, Less, Stylus) ▣ Gerenciamento de pacotes (npm, bower) ▣ Controle de versão (Git) ▣ Web Performance (Ter uma boa noção)
35. Onde? ▣ CodeSchool - https://www.codeschool.com/ ▣ Code Academy - https://www.codecademy.com/pt ▣ Alura - https://www.alura.com.br/ ▣ Coursera - https://www.coursera.org/ ▣ KhanAcademy - https://pt.khanacademy.org/ ▣ Udacity - https://br.udacity.com/
36. Procure estar atualizada(o) sempre!
37. Obrigada! Dúvidas? @milenevlacerda milenelacerda@icloud.com github.com/milenevlacerda