--- lang: pt-br tags: REDE_ --- # Treinamento de desenvolvimento Frontend --- ## Frontend, backend e fullstack No contexto do desenvolvimento web, denomina-se como `frontend` a parte do desenvolvimento em que o foco é o lado do cliente, em oposição com o termo `backend`, que está relacionado com o lado do servidor[^fXb]. Quando se quer referir tanto à parte do cliente quanto a do servidor, utiliza-se o termo `fullstack`. --- ### Frontend Compreende: - UI e UX design* - Desenvolvimento de software: - landing pages 👈 - aplicativos web 👈 - aplicativos nativos --- ### Backend Compreende: - Desenvovimento de APIs - Uso de banco de dados - Arquitetura de microserviços --- ### Operações Compreende: - Admnistração de sistemas - Configuração da infraestrutura computacional - Deployments --- Este treinamento de frontend, especificamente, possui o objetivo de introduzir ferramentas base para desenvolver aplicações para serem executadas nos navegadores web modernos (ex. Chrome, firefox, Edge etc), mas muitas dessas ferramentas também são utilizadas para criação de aplicativos para smartphones[^reactn] e desktop[^electron]. --- ## Ferramentas utilizadas ### HTML5 (Hypertext Markup Language) - Linguagem (de marcação) para definir o comporamento estático de uma página a ser exibida em um browser - **Não é uma linguagem de programação** - Possui os blocos básicos para criação de páginas da web[^html] --- ### Exemplo: ```html <table> <tr> <th>Foo </th> <td>Item 1 </td> <\tr> <tr> <th>Bar <\th> <td>Item 2 <\td> <\tr> </table> ``` <table> <tr> <th>Foo </th> <th>Bar </th> </tr> <tr> <td>Item 1 </td> <td>Item 2 </td> </tr> </table> --- ### CSS (Cascading Style Sheets) - Linguagem para alterar a apresentação padrão da página web (do HTML "puro")[^css] - Define como os blocos básicos serão renderizados - Usado para alterar o **estilo** da página - **Também não é uma linguagem de programação** --- ### Exemplo: ```css table { color: red; } tr { background-color: blue; } ``` <table style="color: red"> <tr> <th style="background-color: blue">Foo </th> <th style="background-color: blue">Bar </th> </tr> <tr> <td>Item 1 </td> <td>Item 2 </td> </tr> </table> --- ### Javascript - Linguagem de programação integrada ao browser[^js] - Normalmente interpretada - Não se restringe a scripting de páginas da web - Associado ao comportamento da página - Fracamente tipada 💣 - Paradígmas: orientada a objeto, imperativa ou declarativa --- - Exemplo: ```js let pi = 3.1415 console.log("Hello World! pi = " + pi) console.log(pi == "3.1415") console.log(pi === "3.1415") ``` Output: ``` hello World! pi = 3.1415 true false ``` --- ## Primeiros contatos com um documento HTML - Extensão ".html" - Estruturado em árvore - Os nós são chamados de `tags` - A raiz da arvore deve ser a tag `<html>` - Recomendado iniciar o arquivo com a diretiva `<!DOCTYPE html>` - `tags` podem ter atributos --- ![](https://www.w3schools.com/js/pic_htmltree.gif) --- ~$ cat index.html ```html <!DOCTYPE html> <html> <head> <title>My title</title> </head> <body> <a href="https://google.com">My link</a> <h1 style="color: red">My Header</h1> </body> <html> ``` --- <div style="background-color: #EEEEEE; width: 100px; border: solid 1px black; border-bottom: none; color: black">My title</div> <div style="background-color: #EEEEEE; border-top: solid 1px black; color: black"> <a href="https://google.com">My link</a> <h1 style="color: red">My Header</h1> </div> --- ## Layout Classico [^lyt] ![](https://www.w3schools.com/html/img_sem_elements.gif) --- - `<header>` - Cabeçalho da página - `<nav>` - Container para links da página - `<section>` - Seção - `<article>` - Container para artigos - `<footer>` - Rodapé --- ```html <header> <h2>Bem vindo</h2> </header> <section> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Galeria</a></li> <li><a href="#">Contato</a></li> </ul> </nav> <article> <h1>Sobre a Rede_</h1> <p> A Rede_ é uma iniciativa dos alunos do ITA dedicada a intergrar o iteano à tecnologia da informação. </p> </article> </section> <footer> <span>© 2019 Rede_ All Rights Reserved</span> </footer> ``` --- ## Adicionando conteúdo [^tags] - `<h1>, <h2> ...` - Texto de cabeçalho (ordem decrescente de prioridade) - `<p>` - Parágrafo - `<img>` - Imagens - `<a>` - Links - `<span>` - Texto formatação e quebra de linha - `<style>` - Adiciona propriedades CSS no próprio HTML (má prática) - `<ul>` - Lista não enumerada - `<li>` - Item da lista - `<iframe>` - Subjanela para outra página - `<video>` - Vídeos - `<audio>` - Audios - `<script>` - Utilizada normalmente para adicionar Javascript --- ### Exemplo: ```html <img src="https://upload.wikimedia.org/wikipedia/pt/1/1f/ITA_logo.png"> ``` <img src="https://upload.wikimedia.org/wikipedia/pt/1/1f/ITA_logo.png"> --- ## Usando a tag `<div>`, classes e IDs --- ### `<div>`: - Elemento genérico para conter outros elementos, útil para dividir a página. --- ### ID: - Identificação de um elemento - Possui interação com o CSS e o Javascript - É único - Em HTML, é o atributo de `id` --- ### Classe: - Identitica de uma classe de elementos - Possui interação com o CSS e o Javascript - Não é única - Em HTML, é o atributo de `class` --- ### Exemplo: ```html <div id="box1" class="m-box"> <p>Caixa 1</p> </div> <div id="box2" class="m-box"> <p>Caixa 1</p> <ul> <li>item 1</li> <li>item 2</li> </ul> </div> <style> .m-box { height: 120px; width: 300px; border: solid 5px red; } #box1 { color: red } #box2 { color: blue } </style> ``` --- <style> .m-box { height: 120px; width: 300px; border: solid 5px red; } #box1 { color: red } #box2 { color: blue } </style> <div id="box1" class="m-box"> <p>Caixa 1</p> </div> <div id="box2" class="m-box"> <p>Caixa 1</p> <ul> <li>item 1</li> <li>item 2</li> </ul> </div> --- ## Configurações na `<head>`: ### Exemplo: --- ```html <head> <!--Configura o sistema de caracteres--> <meta charset="utf-8"></meta> <!--Ajuste necessário para responsividade (sempre adicione)--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Importando folhas de estilo CSS--> <link rel="stylesheet" type="text/css" href="css/example1.css"></link> <!--Favicon da página--> <link rel="icon" href="http://www.cherryinfotech.com/img/icons/development.png"> <!--Título da página--> <title>Rede_</title> </head> ``` --- ### Obeservação: - Não colocar a tag `<script>` na `<head>`, colocar apenas no final da `<body>`, para que a página seja renderizada antes de carregar o código. --- ## Sintaxe básica do CSS, Seletores [^selc] ```css seletor { propriedade1: valor; propriedade2: valor; } ``` --- ### Tags: ```css header { height: 100px; } ``` --- ### IDs: ```css #my-id { color: red; } ``` --- ### Classes: ```css /* Comments */ .my-class { width: 100%; color: blue; } ``` --- ### Elemento filho ```css header p { color: blue } ``` --- ### Espeficicação de estado Ex: mouse sobre o `header` ```css header:hover { background-color: green; } ``` --- ## Regras CSS específicas ### Exemplo: responsividade Aplicar a algumas propriedades apenas quando a tela do dispositivo do cliente for menor que `600px`. --- ```css @media only screen and (max-width: 600px) { .m-box { width: 100%; display: block; } .m-desktop-only { display: none; } } ``` --- ## Propriedades, Unidades e funções CSS [^props] Há uma lista extensa de propriedades no link abaixo, iremos ver as propriedades mais importantes no exercício a seguir: [Documentação](https://www.w3schools.com/cssref/default.asp) --- ## Exercicio Final: - Construir uma landing page [Baixar código pronto](https://barioni.s3-sa-east-1.amazonaws.com/Frontend.zip) --- ## Referências [^fXb]: https://www.pluralsight.com/blog/film-games/whats-difference-front-end-back-end [^jsHis]: https://www.youtube.com/watch?v=Sh6lK57Cuk4 [^reactn]: https://www.reactnative.com/ [^electron]: https://electronjs.org/ [^html]: https://developer.mozilla.org/en-US/docs/Web/HTML [^css]: https://developer.mozilla.org/en-US/docs/Web/CSS [^js]: https://developer.mozilla.org/en-US/docs/Web/JavaScript [^lyt]: https://www.w3schools.com/html/html_layout.asp [^tags]: https://www.w3schools.com/tags/default.asp [^selc]: https://www.w3schools.com/cssref/css_selectors.asp [^props]: https://www.w3schools.com/cssref/default.asp ---