20241101-Webdesign-Frontend-e-Backend-Slide de aula
- 1. 2020 PROGRAMA DE EDUCAÇÃO TUTORIAL – ENGENHARIA ELÉTRICA – UNIVERSIDADE FEDERAL DE MINAS GERAIS WEB DESIGN Slide-aula
- 3. Front-end e Back-end 1
- 4. Front-end e Back-end 1 Design HTML/CSS/JS Sites estáticos Segurança/Estrutura PHP Sites dinâmicos
- 5. Um site 1 Um site será simplificado como um diretório em um servidor Portanto, nosso site será uma pasta local com nossos arquivos
- 7. Objetivos
- 8. Objetivos Apresentar o panorama geral de funcionamento e de desenvolvimento de um site; Ensinar conceitos de ferramentas essenciais para o Web Design; Capacitar para criar um site estático completo; Motivar para no futuro evoluirmos para sites dinâmicos. 1
- 9. Desejável Noções de programação; Noções de edição de imagem; Vontade de aprender; Bom gosto; Bom humor 1
- 10. Ferramentas
- 11. Ferramentas Ferramenta principal Linguagem de marcação de hipertexto 1 HTML – Estrutura básica dos sites
- 12. Ferramentas Uma das ferramentas principais Folhas de estilo em cascata Framework CSS 1 CSS e Bootstrap – Modularização das configurações de estilo
- 13. Ferramentas Linguagem de Programação Client-side Framework JavaScript 1 JavaScript e JQuery – Programação no lado do cliente
- 14. Ferramentas Linguagem de Programação Server-side Framework PHP 1 PHP e Codeigneter – Programação no lado do servidor, sites dinâmicos
- 15. Ferramentas Programas de edição de imagem 1 Ajustes dos arquivos de imagens
- 16. Edição de Imagens 1
- 17. Edição de Imagens Diminuir a resolução, Ajustar a proporção, Remover/adicionar fundo, Paleta de cores 1 https://color.adobe.com/pt/create
- 18. Noções de Imagens Desenhos rasters vs Desenhos vetoriais 1 Matrizes de pixels Geralmente em RGB(24bits/pixel) Perda de qualidade Fórmulas matemáticas Pontos, linhas, polígonos Transformações melhores
- 20. Noções de Imagens 1 Rasterização Vetorização Raster Vetor
- 21. Noções de Imagens 1 Raster Mais usados no web design jpg menor tamanho vs png sem fundo O editor pode ser vetorial OBS: ícones são .svg, vetores. Por isso podem ser tratados como fontes. Veremos adiante.
- 22. Ferramentas 1 Suporte ao desenvolvimento, atalhos, interfaces Editores de texto
- 23. Editores de texto 1 Preze pela IDENTAÇÃO – maior legibilidade Highlight Organização Atalhos
- 24. Ferramentas Navegadores 1 Interpretar o site Pedro Alvares Cabral
- 25. Navegadores Inspecionar ctrl + shift + I 1 Margens Código, pode apagar pra testar Tamanho celular Redimensionar Detalhes https://matthewrayfield.com/goodies/inspect-this-snake/
- 26. Ferramentas Git
- 27. Ferramentas Git 1 Desenvolvimento em conjunto, branches e ramificações. Sistemas de controle de versões
- 28. Git 1 git init git clone https:... Criar um repositório no site desejado e em sua máquina: Iniciar em uma pasta acima Clonar o repositório
- 29. Git 1 git pull git status git add –A git commit –m “msg” git push Atualização básica (e perigosa -> sobrescrita) Puxar a versão mais atual Ver as modificações Adicionar as modificações Criar um commit Empurrar uma nova versão
- 30. Git 1 git pull git status git add –A git commit –m “msg” git push Como desenvolver em conjunto?
- 31. Git 1 Master Ramificação Versão Merge 1 forma de fazer no próximo slide
- 32. Git git pull origin master 1 git checkout –b “branch” Alterar o repositório git status git add -A git commit –m “msg” git push origin branch Compare & Pull Request Descrever Create Pull Request Conferir Merge Pull Request Delete Branch https://tableless.com.br/tudo-que-voce-queria-saber- sobre-git-e-github-mas-tinha-vergonha-de-perguntar/
- 33. Git 1 Exemplo Execução dos comandos
- 34. Git 1 Exemplo Compare & pull request
- 35. Git 1 Exemplo Descrever, Create pull request
- 36. Git 1 Exemplo Abrir Pull request
- 38. Git 1 Exemplo Merge ou resolver conflitos
- 40. Índice
- 41. Acompanhe X Capítulo da Apostila?? Propaganda do Matlab?? https://exlink.com Link para mais detalhes
- 42. O que veremos 2 HTML 3 CSS 4 Bootstrap 5 JavaScript 6 JQuery
- 45. Tags 2 <tag> CONTEÚDEO </tag> <tag prop=“valor”>...</tag> <!-- comentários -->
- 46. Tags 2 <tag> CONTEÚDEO </tag> <p> Este é um parágrafo </p>
- 47. Tags 2 <tag prop=“valor”>...</tag> <p id=“primeiroParagrafo”>...</p>
- 48. Tags 2 <!-- comentários --> <!-- <p id=“...”>...</p> -->
- 51. Tags Principais 2 OBS: Tem de h1 até h6
- 52. Tags Principais 2 Body: <img src=“...”> <hr> <br> <div> </div>
- 53. Tags Principais 2 Head: <meta charset="UTF-8"> <title>CoRA</title> <link rel="shortcut icon" href="img /icon/icon.png"/>
- 54. 2 Adicione no head <meta charset="UTF-8"> <title>Titulo</title> Prática
- 55. Tags Principais 2 <a href=“”> LINK </a>
- 56. Tags Principais 2 OBS: target=“_blank” abre o link em outra guia OBS: hrefs mailto: e tel:
- 57. 2 Faça um link para curso/sumario.html Prática
- 59. Classes e IDs 2 Classe NÃO é uma classe de programação, é apenas uma importação de configurações de estilo. ID é um identificador, deve ser único.
- 60. Classes e IDs 2 É possível e muito útil atribuir mais de uma classe. Assim haverá múltiplas importações de estilo class=“classe-1 classe-2 ...”
- 61. Estilo 2 OBS: pode ser modificado inline
- 62. Incorporação 2 Incluir outros arquivos htmls por uma tag <iframe></iframe>
- 63. Incorporação 2
- 65. Prioridade de estilos 3 1- Declaração inline 2- Declaração em <head><style> 3- Declaração em folha de estilo
- 66. 3 Declare sua folha de estilo Prática
- 68. Seletores 3
- 69. Hover 3 OBS: hover é uma pseudo-classe
- 70. 3 Configure uma classe de sua escolha Prática
- 72. Exemplo 3 Exemplo mais avançado de como definir classes responsivas para iframes OBS: Falaremos sobre Responsividade daqui a pouco
- 74. Hover outro elemetno 3
- 76. Pra que serve? 4 Framework CSS Várias classes definidas Design Responsivo Modularidade
- 78. Declaração 4
- 79. Declaração 4 Declarações sem fazer downloads
- 80. 4 Copie a declaração de curso/bootstrap_declarado.html em seu index Prática
- 81. Básico
- 82. Responsividade 4
- 83. 4 Altera com o tamanho da tela Responsividade
- 84. 4 Responsividade
- 86. 4 Sistema de grades row 1 1 1 1 1 1 1 1 1 1 1 1 12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12
- 88. 4 Sistema de grades col col-sm col-md col-lg col-xl 576 768 992 1200 Largura
- 91. 4 Sistema de grades https://getbootstrap.com/docs/4.0/layout/grid/ É possível também: Alinhas as colunas verticalmente ao centro Alinhas horizontalmente se soma de i < 12 Ordenar as colunas E mais
- 92. 4 Faça uma divisão de colunas Prática
- 93. 4 Tipografia
- 94. 4 Tipografia
- 95. 4 Tipografia
- 98. 4 Adicione o texto de curso/bootstrap/tipografia.html em uma de suas colunas Prática
- 100. 4 Cores bg-color, btn-color, text-color ... https://getbootstrap.com/docs/4.0/utilities/colors/
- 101. 4 Configure os bg-colors e text-colors do seu site Prática
- 102. 4 Botões Classe btn pode ser aplicada a algumas tags a -> link button -> ação
- 103. 4 Botões
- 105. 4 Active/disbaled A classe active é para efeito de estilo A propriedade e a classe disabled de fato desabilitam
- 106. 4 Personalize seu link para sumario.html Prática
- 107. 4 Imagens
- 109. 4 Adicione uma imagem fluida na coluna que não está o texto Prática
- 111. 4 Bordas rounded-top ... rounded-0 ... Foi usado apenas para o exemplo https://getbootstrap.com/docs/4.4/utilities/borders/
- 112. 4 Adicione uma borda a sua imagem Prática
- 114. 4 Ícones Exemplo com font awesome:
- 115. 4 Ícones https://fontawesome.com/icons?d=gallery&s=solid&m=free Exemplo com font awesome: <i class=“fas fa-book”></i> São tratados como texto
- 117. 4 Complete o curso/bootstrap/alertas.html com o alerta que ta faltando Prática
- 119. JavaScript
- 120. 4 Navbar
- 121. 4 Navbar
- 122. 4 Navbar
- 123. 4 Navbar
- 124. 4 Navbar
- 125. 4 Navbar Adicionar margin, margin-top, padding ou padding-top
- 127. 4 Adicione o navbar ao seu index e remova o item desabilitado Prática
- 128. 4 Navs https://getbootstrap.com/docs/4.4/components/navs/ Menus de navegação Navbar Nav Seleciona o conteúdo da página
- 129. 4 Scrollspy https://getbootstrap.com/docs/4.0/components/scrollspy/ Local onde está a navbar Offset da ativação em pixels Marca como “active” a área vista automaticamente
- 130. 4 Modais
- 132. 4 Carrossel
- 134. 4 Substitua a foto pelo carrossel de carrossel.html e o complete Prática
- 137. Introdução 5 Linguagem de Programação Interpretada Alto nível Multi-paradigma, principais: funcional, imperativo, scripting e Orientado a Objetos Tipagem: dinâmica, fraca e implícita https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Introduction
- 138. Introdução 5 O foco desta seção não é a programação em si Estamos interessados em como mudar nosso site com JS.
- 139. Declaração 5 Inserir trecho, geralmente, ao final do <body> Por que ao final?
- 141. Prática 5 Declare seu main.js
- 142. Alert e console.log 5
- 143. Prática 5 Faça um alert e um console.log
- 144. Programação Básica
- 146. Variáveis 5 OBS: Para impressão de acentos
- 147. Operadores Aritméticos 5 Básicos: + - * / Resto: % Potenciação: ** Incremento e decremento: ++ --
- 148. Operadores Relacionais 5 Básicos: < <= > >= Igualdade: == != Identidade: === !== Propriedade: in
- 149. Operadores Lógicos 5 And: && Or: || Not: !
- 150. Operadores Bit a Bit 5 And: & Or: | Not: ~ Xor: ^ Deslocamento: << >>
- 151. Estruturas Condicionais 5 OBS: Operador ternário OBS: Também possui switch
- 152. Estruturas de Repetição 5 Desvios incondicionais: break e continue
- 153. Estruturas de Repetição 5 OBS: Também possui do-while
- 154. Declaração de Funções 5
- 155. Modificando HTML
- 156. Eventos 5 https://www.w3schools.com/tags/ref_eventattributes.asp Vários eventos de mouse, teclado, janela, etc
- 157. DOM 5
- 158. DOM 5
- 159. 5 Personalize a mensagem de toque.js Prática
- 160. DOM 5
- 161. DOM 5 background-color backgroundColor
- 162. 5 Modifique nome.html e nome.js para mudar o background-color Prática
- 164. O que é? 6 https://jquery.com/ Framework JavaScript Manipulação HTML mais simples Versatilidade e extensibilidade
- 165. Declaração 6 Declaração idêntica ao do JS, porém precisa ser depois da declaração do jquery.js jquery.js é a biblioteca
- 166. Uso 6 Simplificado a Métodos executados depois que carregar a página
- 167. Uso 6
- 168. 6 Adicione um botão em sumiço.html e o configure em sumiço.js para voltar os textos. (.show()) Prática
- 169. Uso 6
- 170. Prática 6 Faça o botão azul de cor.html mudar o texto para outra cor diferente do botão vermelho
- 171. Uso 6
- 172. Uso 6
- 174. Sites Dinâmicos 7 Conteúdo baseado no usuário Server-side PL: PHP, Java, etc Banco de Dados https://inovalize.com.br/diferencas-entre-site-dinamico-e-estatico/
- 175. Configurar PHP 7 1 - Baixar o Xampp. 2 - Adicionar o caminho de .../xampp/php à variável de ambiente Path 3 – Ativar o Apache no painel de controle xampp 4 – abrir o diretório de seu site e usar o comando: php –S localhost:8080 5 – acesse seu site em localhost:8080 https://pt.wikihow.com/Instalar-o-XAMPP-para-Windows
- 176. FileZilla 7 Programa para fazer o upload para o servidor que contém seu site. É possível e melhor fazer por CLI?
- 178. FileZilla 7 Remover o tempo de desconexão por inatividade https://king.host/wiki/artigo/timeout-filezilla/
- 179. Bibliografia 7 - Web Design – Diego Mariano https://diegomariano.com/home/ - Documentação Bootstrap https://getbootstrap.com/docs/4.1/getting- started/introduction/ - Sites do PETEE http://www.petee.cpdee.ufmg.br/ e http://cora.cpdee.ufmg.br/ - Computação Gráfica UFF http://computacaografica.ic.uff.br/conteudocap1.html - W3Schools https://www.w3schools.com/ - Stack Overflow https://pt.stackoverflow.com/ - Developer Mozilla https://developer.mozilla.org/pt-BR/ - JQuery https://jquery.com/
- 180. Bibliografia 7 - https://color.adobe.com/pt/create - https://matthewrayfield.com/goodies/inspect-this-snake/ - https://tableless.com.br/tudo-que-voce-queria-saber-sobre-git-e-github- mas-tinha-vergonha-de-perguntar/ - https://www.tutorialrepublic.com/css-reference/css3-properties.php - https://fontawesome.com/icons?d=gallery&s=solid&m=free - https://inovalize.com.br/diferencas-entre-site-dinamico-e-estatico/ - https://pt.wikihow.com/Instalar-o-XAMPP-para-Windows - https://king.host/wiki/artigo/timeout-filezilla/
- 181. WEB DESIGN Slide-aula 2020 PROGRAMA DE EDUCAÇÃO TUTORIAL – ENGENHARIA ELÉTRICA – UNIVERSIDADE FEDERAL DE MINAS GERAIS