Revisões Teóricas_PT PDF

2024/2025 REVISÕES Descreva os seguintes conceitos por palavras suas: 1. Web Design vs Web Development: Web Design refere-se à estética do Website. Web Development é responsável pela construção, criação e manutenção de Websites....

2024/2025 REVISÕES Descreva os seguintes conceitos por palavras suas: 1. Web Design vs Web Development: Web Design refere-se à estética do Website. Web Development é responsável pela construção, criação e manutenção de Websites. 2. UI vs UX: UI (User Interface) refere-se à interface visual de um website ou aplicação. UI engloba elementos visuais como botões, imagens, toggles, etc. (UX) A experiência do utilizador. 3. Aspetos a ter em consideração no projeto de um web site: A definição de objetivos, Simplicidade, Consistência, grupo de Cor, Responsividade, Carregamento rápido e Fácil navegação, Comunicação, Realizar Backups e Política de Privacidade. 4. Estrutura Cliente – Servidor: Modelo de arquitetura de rede. servidores fornecem serviços/recursos, e clientes, que solicitam os serviços/recursos, recebendo-os como respostas. A programação web é dividida em dois lados principais: Modelo Cliente (Browser) - Front-end: Refere-se à parte da aplicação web com a qual os utilizadores interagem diretamente, inclui o design, a estrutura e o comportamento visível do site ou aplicações (HTML, CSS e JS). Servidor (Servidor Web) - Back-end: Refere-se à parte das aplicações que lidam com a lógica de negócio, base de dados e as requisições do utilizador (PHP, Python, Node.js, Ruby, Java, etc…) 5. HTML, CSS e JS: HTML - É uma linguagem de marcação padrão utilizada para criar e estruturar conteúdos na World Wide Web. O HTML fornece um conjunto de tags e atributos que definem a estrutura e a apresentação do conteúdo de uma página Web. O HTML5 introduziu diversas melhorias em relação às versões anteriores do HTML (como HTML4 e XHTML). Ele foi projetado para ser mais flexível, robusto e adaptado às necessidades modernas da web. O HTML4/XHTML Não possuía suporte nativo para conectividade avançada. Dependia de JavaScript e bibliotecas externas. CSS (Cascading Style Sheets) é uma linguagem de regras de estilo que nós usamos para aplicar estilo ao nosso conteúdo HTML. O CSS É responsável pelo estilo como background, cores, layouts, espaçamentos e animações. JavaScript É uma linguagem de programação que permite criar conteúdo que se atualiza dinamicamente, controlar multimídias, imagens animadas, navegação interativa, cliques, movimentos do rato, etc. O JavaScript - Permite a adição de funcionalidades dinâmicas como pop-ups, galerias de fotos, etc. 6. Tag HTML - Comando que inicia a cadeia de instruções que é o código html e que fecha com no final do documento de programação. pg. 1  7. Tag Head vs tag Body - A tag é usada para conter informações relacionadas ao documento que não são mostradas. Dentro da tag contém algumas tags mais importantes como: ; ;. 8. A tag é usado para conter o conteúdo principal do documento HTML. Dentro da tag contém tudo, desde o título, parágrafos até div exclusivos. Tags do Head e body: 9. : Define o título da página exibido na aba do Browser. 10. : Fornece informações sobre o documento, como codificação, autor ou descrição. 11. : Define ligações da página com outros ficheiros. (O elemento utiliza-se para vincular recursos externos, como folhas de estilo CSS, ícone de acesso e fontes web). 12. : Define formatação em CSS interno. (O elemento utiliza-se para incluir estilos CSS diretamente numa tag. Embora seja mais comum utilizar folhas de estilo externas, às vezes pode ser útil agregar estilos específicos diretamente numa página de HTML). 13. : Define programação de certas funções com scripts. (O elemento utiliza-se para incorporar código JavaScript numa página HTML, para vincular um ficheiro JavaScript externo). 14. : Define um URL base para todos os URL da página. (O elemento especifica a direção de um URL base que se utiliza para todas as direções URL relativos contidos num documento. Só pode haver um elemento num documento). 15. tags semânticas em HTML são elementos que fornecem significado claro ao conteúdo, tornando o código mais fácil de entender. Exemplos: , , , , , ,. 16. : Define o cabeçalho de uma página ou de uma seção. Esse cabeçalho geralmente contém elementos introdutórios, como o título, logotipo, menu de navegação ou qualquer conteúdo de cabeçalho relevante. 17. - Contém o rodapé da página e costuma conter informações de contato, links para redes sociais, etc. 18. - Define secções num documento, agrupa conteúdos relacionados dentro de uma página. 19. – Pode ser usada para especificar conteúdo independente do resto da página, como por exemplo uma publicação de um Blog ou fórum. 20. - Usado para conteúdo relacionado, como barras laterais ou notas. 21. Nav - Indica uma seção de navegação com links para outras partes do site ou páginas externas. 22. Os elementos HTML são escritos com uma marca de início e uma de fim, com o conteúdo no meio: conteúdo Exemplo: Meu primeiro parágrafo HTML. 23. Os atributos HTML fornecem informações adicionais sobre um elemento e são sempre especificados na marca de início: Exemplo: 24. : Insere uma imagem. ( 25. : Tag inline usada para estilizar partes específicas de texto. 26. IDs são únicos: Cada elemento pode ter apenas um ID; Cada página pode ter apenas um elemento com aquele ID. pg. 2  27. Classes NÃO são únicas: A mesma classe pode ser usada para vários elementos; Podem ser usadas várias classes para um mesmo elemento. As Informações que são reusadas devem ser mantidas numa classe e informações que são totalmente únicas devem ser usadas num ID. 28. Atributo global e um atributo específico em HTML: Global: Pode ser usado em qualquer tag. Exemplo: id e class. Enquanto que o Específico: É aplicável apenas a certas tags src para. 29. Uma linguagem de estilos (style sheet language), como o CSS (Cascading Style Sheets), é usada para definir a aparência e o layout de elementos num documento HTML. Permite separar a apresentação do conteúdo, facilitando a personalização de cores, fontes, margens, espaçamentos, entre outros aspetos visuais de uma página web. 30. Linguagem de Programação do Lado do Cliente: É uma linguagem que é executada diretamente no browser do utilizador, sem a necessidade de comunicação com o servidor. 31. Existem 3 formas de adicionar CSS a ficheiros HTML, são: a) Em linha – com atributo de estilo nos elementos HTML, a vantagem: Rápido para alterações específicas. Desvantagem: Mistura conteúdo e estilo, reduzindo a legibilidade. b) Interno – usando um elemento no ficheiro HTML na secção Vantagem: Útil para páginas pequenas ou estilo único. Desvantagem: Não reutilizável em múltiplas páginas c) Externa – usando um ou mais ficheiros CSS externos Vantagem: Melhora a organização e manutenção. Desvantagem: Pode causar atrasos iniciais no carregamento se o ficheiro for grande. 32. O atributo alt na tag : Fornece um texto alternativo para a imagem. 33. Formulários em HTML: Formulários realizem interações no lado do cliente, permitindo que os utilizadores enviem dados ao servidor. Exemplos: , e. Atributos Importantes do : action, method, target. Tipos de Envio dos Dados do : GET- Envia os dados pelo URL, os parâmetros são visíveis na barra de endereços e POST - Usado para envio de informações sensíveis, como login e formulários de registo. Descreva o código que se segue: 34. Background: Background - Define cor de fundo da página Exemplo: body{ background-color: #ccc; } Define cor de um elemento elemento{ background-color: #333; pg. 3  } Define imagem de fundo para a página Exemplo: body{ background-image: url(”fundo.png");~ Define imagem de fundo para a página adapatando à largura da página e sem repetir Exemplo: body{ background-image: url(”fundo.png"); background-size: cover; background-repeat: no-repeat; } Define imagem de fundo para a página e coloca-a em local específico, sem repetir Exemplo: body{ background-image: url(”fundo.png"); background-position: right top; margin-top: 10px; margin-right: 10px; background-repeat: no-repeat; } Define cor e imagem de fundo para a página e coloca-a em local específico, sem repetir Exemplo: body{ background: #ccc url(”fundo.png") no-repeat right top; margin: 10px; } Repetir uma imagem apenas horizontalmente background-repeat: repeat-x; Repetir uma imagem apenas verticalmente background-repeat: repeat-y; Define comprimento e altura que determinado objeto ou área ocupa na página header { pg. 4  width: 70%; height: 150px; } 35. Display - Define se o conteúdo é mostrado em linha ou em blocos.elemento{ display: inline; } ou.elemento{ display: block; } 36. Posicionamento - Permite posicionar determinado conteúdo na página Os elementos podem ser posicioandos em: Top, bottom, left ou right Mas para usar estas propriedades é necesário definir o tipo de poscionamento Existem 4 tipos de posicionamento, são os seguintes: Static - Posicionamento por omissão Fixed - Os elementos são posicionados relativamente à janela do browser e não são movidos a não ser que se faça scroll Relative - Os elementos são posicionados relativamente ao elemento pai onde estão inseridos Absolute - Os elementos são posicionados relativamente ao primeiro elemento pai que não seja static Posicionar determinado conteúdo no topo da página header{ position: absolute; top: 0px; } Posicionar determinado conteúdo no meio da página.meio{ position: absolute; left: 50%; top: 50%; } Posicionar determinado conteúdo no meio da página footer{ position: absolute; bottom: 0px; pg. 5  } Profundidade - Posicionar determinado elemento por baixo de outro elemento { position: absolute; z-index: -1; } Posicionar determinado elemento por cima de outro elemento { position: absolute; z-index: 1; } Centrar determinado elemento na página.center { width: 70%; margin-left: auto; margin-right: auto; } Alinhar determinado elemento à direita na página.dir{ position: absolute; right: 0px; } Alinhar determinado elemento à esquerda na página.esq{ position: absolute; left: 0px; } Float - Permite ajustar elementos à esquerda ou direita mantendo-os lado a lado horizontalmente elemento{ float: right; width: 30%; margin: 2% Off Float - Permite ajustar elementos à esquerda ou direita mantendo-os lado a lado horizontalmente.text_line { clear: both; pg. 6  } Margens - Definem o espaço à volta do elemento header { margin-top: 100px; margin-right: 150px; margin-bottom: 100px; margin-left: 50px; } Ou header { margin: 100px 150px 100px 50px; } Formatação de Texto Exemplos: 37. Definir cor do texto color: red; color: #00ff00; color: rgb(0,0,255); color: rgba(0,0,255,0.8); 38. Alinhamento do texto text-align: center; text-align: right; text-align: left; text-align: justify; 39. Formatação da Letra Tipo de Letra font-family: Arial, Helvetica, sans-serif; Tamanho font-size: 40px; font-size: 30px; font-size: 14px; ou pg. 7  font-size: 2.5em; font-size: 1.875em; font-size: 0.875em; 40. Estilo de Letra font-style: normal; font-style: italic; font-style: oblique; font-weight: bold; 41. Sombra do Texto Sobra em X,Y,Z e Cor text-shadow: 5px 5px 5px #FF0000; 42. Hiperligações : inserir uma âncora para outra página Href: Define o URL de destino. Exemplo: p { color: blue; } 53. Altere a cor de todos os elementos com a class 'vermelho' para vermelho:.vermelho { color: red; } 54. Altere a cor de todos os elementos com o id ‘item’ para castanho: #item { color: brown; } 55. Altere a cor do paragrafo inteiro para azul sempre que passe o rato por cima: p:hover { color: blue; } 56. Altere a cor de todos os paragrafos para cinzento exceto aqueles que tem a class 'excluir': p:not(.excluir) { color: cyan; } Tabelas: 57. A estrutura table no HTML é usada para criar tabelas que exibem dados organizados em linhas e colunas. pg. 10  padding e margin 58. Padding e margin: A propriedade margin refere-se à margem que o elemento tem entre os outros elementos, enquanto padding refere-se ao tamanho do espaço criado à volta do elemento. 59. Alterar individualmente o padding, margin: i. padding-top; padding-right; padding-bottom; padding-left ii. margin-top; margin-right; margin-bottom; margin-left 60. As propriedades de padding São usadas para gerar um espaço em torno do conteúdo de um elemento, dentro de quaisquer bordas definidas. Existem propriedades configuração do padding para cada lado de um elemento top, right, bottom e lef. C S S tem propriedades para especificar o padding para cada lado de um elemento: Todas as propriedades de padding pode ter os seguintes valores: length: especifica um espaçamento interno em px, pt, cm etc. % : especifica um espaçamento em % da largura do elemento. inherit: especifica que o espaçamento deve ser herdado do elemento pai. 6 1. Padding e elemento Width: a propriedade width especifica a largura da área de conteúdo do elemento. A área de conteúdo é a porção dentro do padding, da borda e da margem de um elemento 62. Box model no CSS - É um conceito fundamental no CSS que define como os elementos HTML são representados e posicionados na tela. Todo elemento HTML é uma "box", e o CSS organiza e posiciona essas boxes na página com base no seu tamanho e propriedades. pg. 11  Componentes do Box Model: Um elemento HTML é estruturado no Box Model do CSS por meio dos seguintes componentes: content, padding, border e margin. 63. Bootstrap - É uma biblioteca gratuita para um desenvolvimento web mais rápido e fácil. Inclui modelos de design baseados em HTML, CSS e JS para tipografia, formulários, botões, tabelas, navegação, modais, slides de imagens e muitos outros. 64. O Bootstrap Container é um dos componentes principais do Bootstrap e desempenha um papel fundamental na estruturação e organização do conteúdo num layout responsivo. 65. Container e container-fluid e outras variantes: Container tem uma largura fixa para cada tamanho do ecrã em bootstrap (xs,sm,md,lg), já a class. container-fluid expande para preencher a largura disponível. 66. CSS grid -É um modo de layout que facilita e otimiza a criação de interfaces. 67. CSS Grid vs. Bootstrap: O CSS Grid é um sistema nativo de layout bidimensional (linhas e colunas) no CSS, sem dependências externas. Já o Bootstrap é uma framework front-end completa que inclui uma grid baseada em Flexbox, além de componentes prontos (botões, carrosséis, etc.) e estilos predefinidos. 68. Responsivo e media queries: O design responsivo adapta o layout para oferecer uma boa experiência em qualquer dispositivo, usando Media Queries para ajustar estilos de forma dinâmica e eficiente. Javascript O JavaScript: usado para criar páginas dinâmicas e interativas. Manipula o DOM (Document Object Model), valida dados, e melhora a experiência do utilizador. As principais Funcionalidades: Reagir a eventos; Interação com a página; Inserir texto dinâmico no HTML; Realizar cálculos no computador do utilizador; Validação de formulários no lado cliente. 69. Função em JavaScript? É um bloco de código reutilizável que executa uma tarefa específica ou calcula um valor. Pode ser chamada sempre que necessário, o que facilita a modularidade e a manutenção do código. 70. O DOM (Document Object Model): é uma representação da estrutura HTML que o JavaScript pode manipular. 71. “document.getElementById” - Permite obter o elemento com um id específico. 72. const elemento = document.getElementById("meuElemento"); - Seleciona o elemento HTML com o id="meuElemento" e o armazena na constante elemento. 73. “innerHTML” - Permite adicionar conteúdo ao elemento associado. 74. ““if..else” - Estrutura de decisão. 75. “className” - Permite atribuir uma classe ao elemento associado. 76. onLoad – Dispara quando o utilizador abre a página 77. onUnload – Dispara quando o utilizador fecha a página 78. onFocus – Dispara quando o elemento é selecionado. pg. 12  79. onChange – Dispara quando o utilizador muda o valor do elemento 80. onMouseOver – Dispara quando o utilizador passa o rato por cima do elemento. 81. Onkeydown: É útil para validar entradas em tempo real, criar atalhos de teclado ou capturar interações específicas. 82. onMouseOut – Dispara quando o rato sai de cima do elemento 83. onClick – Dispara quando o utilizador clica no elemento. 84. attribut.name - Retorna o nome do atributo 85. attribut.value - Retorna o valor do atributo Métodos de Manipulação 86. Adicionar Elementos: a. Push - Adiciona no final. b. Unshift - Adiciona no início. 87. Remover Elementos: a. Pop - Remove do final b. Shift - Remove do início. pg. 13