front end

It\’s a repository of Web Development

Preparação: Para este conteúdo, o aluno deverá dispor de um computador com acesso à internet, um web browser com suporte a HTML 5 (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera etc.), um editor de texto (VSCode etc.) e uma plataforma de hospedagem (gratuita ou paga).

• https://www.fro**ntend*mentor.io/
• https://*dai**ly.dev/
• https://ge**tcs*sscan.com/css-box-shadow-examples
• https://whirl.*n**etlify.app/
• https://fl*ex**boxfroggy.com/
• https://courses.*c*s.wash*ington.edu/courses/cse154/flexboxducky/
• http://www.f*lexbox**defense.com/
• https://*cssg*ridgar*den.com/
• https://gri*d*cr*itters.com/
• https://ca*ni*use.*com/
• https://www.m**agicpatt*ern.design/tools/blob-generator
• https://me*yerw*eb.*com/eric/tools/css/reset/
• https://HT***ML5boilerplate.com/
• https://www.*c*olor-*hex.com/color-palette/22942
• https://www.greatfron*t**end.com/pt-BR
• https://echarts.*apa**che.org/en/index.HTML

Quando falamos sobre website, podemos notar que este termo se trata da junção de duas palavras em inglês: “web”, que significa rede e faz referência a rede mundial de computadores, e “site”, que quer dizer lugar. Nesse sentido, um website ou site é um local que pode ser acessado na internet, por meio de uma URL, e possui um conjunto de páginas programadas em alguma linguagem.

Para entendermos melhor sobre esse assunto, vamos a um exemplo: quando você digita em seu navegador de internet o endereço blog.betrybe.com para acessar o blog da Trybe, o navegador vai buscar onde este site está localizado na internet. Em seguida, será feita uma requisição ao servidor.

Nesse servidor estão armazenados todos os arquivos de texto, imagem e estilo que compõem a página web. Então, o servidor devolverá este conjunto de documentos ao navegador para que ele possa exibir o conteúdo como você vê em sua tela.

Os websites podem apresentar variadas formas e conteúdos. Entre algumas das opções, estão: as lojas virtuais, como Mercado Livre e Amazon, onde a compra e venda de produtos pode ser feita; os sites institucionais e portfólios, usados por empresas e pessoas para se apresentarem e serem encontradas por clientes; e os blogs, como este que você lê.

Além disso, os sites também podem ser classificados em estáticos ou dinâmicos. Os sites estáticos são desenvolvidos utilizando, de modo geral, HTML, CSS e JavaScript. Seu conteúdo é mais simples e não há interação com uma base de dados.

Já os sites dinâmicos, além de usufruírem do HTML, CSS e JavaScript, também utilizam linguagens de programação mais robustas, como PHP. Estes sites possuem funcionalidades conectadas a um banco de dados. Dessa forma, cada página acessada pode trazer dados específicos.

? Web Design

Com o Web Design você precisa observar a importância da interface para o desenvolvimento de websites, evolução das tecnologias utilizadas na construção de páginas web ricas (web 1.0, web 2.0, web 3.0 e web 4.0), evolução das interfaces (mudanças estéticas, funcionais e estruturais).

Portanto, você necessita compreender a importância da elaboração de interfaces ricas para a construção de um website, visando a melhor experiência de navegação e usabilidade para o usuário final, conhecendo algumas tecnologias utilizadas no passado para a construção de sites online. A partir dessa visão, observar antigas tendências de mercado, assim como enxergar novas tendências na elaboração de interfaces.

Paleta de cores:

• https://pa*let*a*decolores.online/pt/magenta/
• https://simpl**ei*cons.org/
• https://co*lorh*unt.*co/
• https://*coo*lo*rs.co/
• https://colors.***muz.li/
• https://www.*to*p*tal.com/designers/colourcode/
• https://l*os*p*ec.com/palette-list
• https://myc*olor*.*space/
• https://www.pan*t**one.com/articles/color-palettes
• https://a*t*mos.s*tyle/color-generator
• https://*gith*ub.co*m/EmilHvitfeldt/r-color-palettes
• https://www.c**olo*r-hex.com/color-palettes/
• https://*vism*e*.co/blog/website-color-schemes/
• https://co*l*orp*alettes.com/
• https://colorp*a**lettes.net/

Gradientes:

• https://www.*g*ra*bient.com/
• http://gra*d*i*entsguru.com/
• https://www.eggradi*e**nts.com/
• https://*uigrad**ients.com/#Zinc
• https://*w*ebg*radients.com/
• https://*cssg**radient.io/

Web Development

Basicamente, desenvolvimento web significa codificar páginas para a internet. No entanto, essa tarefa vai além da utilização de HTML e CSS, as ferramentas básicas para a criação de uma página estática — que apresenta informações que só podem ser modificadas com a edição do código fonte.

Ao contrário, as páginas em um site podem ser dinâmicas. Isso significa que o conteúdo exibido pode ser alterado sem a interferência no código fonte. Para que isso seja possível, as partes dinâmicas do site ficam armazenadas em um banco de dados, que é acessado sempre que for necessário recuperar esse conteúdo.

Essa característica permite o desenvolvimento de aplicações complexas, que utilizam regras de negócios, APIs — Application Programming Interface — e muito mais. Portanto, existe uma divisão nas atividades voltadas ao desenvolvimento para web, a codificação do lado cliente (front-end) e a do lado do servidor (back-end).

Exemplo de API com, a estrutura mais usada atualmente para Aplicações Web e Mobile, REST API também chamado de RESTful API.

Aplicações Web são o número cada vez maior de sites na Web, isto é, eles imitam aplicações de desktop ao invés dos documentos tradicionais e
estático de links de textos e imagens que compõem a maioria da Web. Como exemplo, temos os processadores onlines de texto, ferramentas de edição de foto, sites de mapeamento etc. Altamente movidos com JavaScript, eles levaram o HTML4 à beira do limite de suas capacidades. O HTML5 especifica novas APIs (Interface de Programação de Aplicações) para DOM (Modelo de Objeto de Documento), que é uma convenção multiplataforma e independente de linguagem para representação e interação com objetos e documentos HTML, XHTML e XResponsive.

Essas novas APIs ajudam a arrastar e soltar objetos enviados pelo servidor, tais como, desenho, vídeos e similares.

Essas novas interfaces que as páginas HTML expõem ao JavaScript via objetos na DOM tornam mais fácil escrever as aplicações,
utilizando padrões altamente especificados, ao invés de apenas artimanhas mal-documentadas.

Ainda mais importante é a necessidade de um padrão aberto livre (para utilizar e para implementar) que possa competir com padrões proprietários como
Adobe Flash ou Microsoft Silverlight. Independentemente do que você acha dessas tecnologias ou empresas, acreditamos que a Web seja uma plataforma vital à sociedade, comércio e comunicações para estar nas mãos de um fabricante.

Há milhões de páginas Web já em uso por aí, e é imperativo que elas continuem a ser reproduzidas. Então, o HTML5 é, em sua maioria, um derivativo do HTML4 que continua a definir como os navegadores devem lidar com marcações antigas como <font>, <center> e outras novas, pois milhões de páginas web as utilizam.

? Interface

O termo interface pode dispor de vários significados dependendo da área na qual ela é estudada. Na área da Tecnologia da Informação, interface significa a possibilidade de comunicação entre dois sistemas que não poderiam se comunicar naturalmente sem alguma ajuda externa.

O IHC é o estudo da interação entre pessoas e computadores. É uma matéria interdisciplinar que relaciona a ciência da computação, artes, design, ergonomia, psicologia, sociologia, semiótica, linguística, e áreas afins. A interação entre humanos e máquinas acontece através da interface do utilizador, formada por software e hardware.

A interação humano-computador é uma disciplina preocupada com o design, a avaliação e a implementação de sistemas computacionais interativos para uso humano e com o estudo dos principais fenômenos ao redor deles.

Por exemplo, um usuário de um site de e-commerce que está à procura de determinado produto, como um sapato, deverá de alguma forma passar a informação do produto que ele está pensando em adquirir para o sistema, como o tamanho do calçado, o tipo de solado, o material utilizado para a sua confecção, entre outros.

A forma pela qual a aplicação recebe essa informação do usuário pode ser considerada como a sua interface. A finalidade de uma interface é facilitar a interação de uma pessoa com um sistema ou até mesmo a comunicação entre diferentes sistemas.

Comentário: Para o caso específico da comunicação entre diferentes sistemas, existem vários recursos que podem ser utilizados. Alguns dos mais empregados atualmente são os web services. Para garantir a correta operação na interligação de sistemas, são utilizados outros recursos além do HTTP, como SOAP, REST e XResponsive-RPC.

Segundo Benyon (2011), A interface para um sistema interativo são todas as peças do sistema com as quais as pessoas têm contato, física, perceptiva ou conceitualmente:

• Fisicamente: Fisicamente, podemos interagir com um dispositivo apertando botões ou movimentando alavancas, e o dispositivo interativo pode responder fornecendo retorno através da pressão do botão ou alavanca;
• Perceptivamente: Perceptivamente, o dispositivo exibe coisas em uma tela que podemos ver, ou emite sons que podemos ouvir;
• Conceitualmente: Conceitualmente, interagimos com um dispositivo tentando concluir o que ele faz e o que deveríamos estar fazendo. O dispositivo fornece mensagens e outros indicadores feitos para nos ajudar nesse sentido.

Uma interface deve oferecer meios para que um usuário possa passar instruções de forma simples, como também deverá informar ao usuário algum retorno, que pode ser uma informação, uma imagem, um aviso sonoro, uma animação ou até um filme.

Podemos observar, atualmente, uma enorme variedade de interfaces, nos mais variados dispositivos que utilizamos em nosso cotidiano, tais como smartphones, controles remotos, geladeiras, aparelhos de micro-ondas e joysticks utilizados em videogames.

O projeto de construção de um sistema é muito mais complexo do que apenas a criação de uma interface. Toda a interação entre o homem e o sistema deve ser levada em consideração desde a sua concepção. Na área de Tecnologia da Informação, o design de interfaces refere-se à criação da interface do usuário para softwares, sites ou aplicativos. Trata-se de programar o visual da aplicação, visando sempre a facilitar a usabilidade e melhorar a experiência do usuário final.

? HTML5 – Hypertext Makup Language 5

A linguagem de formatação de documentos com a capacidade de links de hipertexto (termo que remete a um texto ao qual se agregam outros conjuntos de informação na forma de blocos de textos, palavras, imagens ou sons, cujo acesso ocorre através de referências específicas, no meio digital, denominadas hiperlinks, ou simplesmente links) e que tornou-se o formato básico para publicação na web.

In 1990, the HTML (HyperText Markup Language) has been created by Tim Bernes-Lee. A mais nova versão do HTML, chamada de versão 5, representa uma evolução dos \”padrões\” para definição de páginas para internet, representando uma nova linguagem de marcação, com elementos, atributos e comportamentos, além de um conjunto maior de tecnologias que permitem o desenvolvimento de aplicações quando associadas a outras linguagens.

HTML Timeline

1. HTML é tornado público – 1989
2. HTML – 1991
3. Primeira especificação – 1992
4. HTML 2.0 é publicado e é criado o JavaScript (JS)- 1995
5. Inclusão de novos elementos e a apresentação do CSS 1 – 1996
6. HTML 3.2 – 1997
7. HTML 4 é publicado – 1998
8. HTML 4.01 – 1999
9. Norma ISO para o HTML e o XHTML 1 – 2000
10. HTML5 é publicado – 2008
11. 11W3C parou de trabalhar no XHTML e a desviou recursos para HTML5 – 2009
12. HTML5 – 2014
13. HTML5.1 – 2016 e 2017 (2nd ed.)
14. HTML5.2 – 2017/(Atualmente)

Em 1998, a W3C decidiu que não continuaria a evoluir o HTML. O futuro da programação para páginas de internet era o XResponsive. Então o HTML foi congelado na versão 4.01 e uma especificação foi lançada com nome de XHTML, que era uma versão do HTML baseada no XResponsive, exigindo regras de sintaxe como atributos com aspas, algumas tags com fechamento, enquanto outras eram autocontidas.

Um pequeno grupo, dos criadores do navegador Opera, entretanto, não estava convencido que o XResponsive era o futuro para todos os autores web. Este grupo começou a desenvolver um trabalho separado, para criar uma nova forma de utilização dos antigos códigos HTML, principalmente ligado ao uso de formulários, sem deixar de atender às determinações básicas do XResponsive. Aquela especificação eventualmente se tornou Web Forms 2.0 e, subsequentemente, foi incorporado na especificação HTML5.

Em 2006, a W3C percebeu que talvez tivesse sido otimista demais na esperança de que o mundo se mudasse para o XResponsive. Essas ideias foram implementadas e outras rejeitadas independentemente de qual fosse a fonte e quem ela representasse, ou até mesmo onde elas foram inicialmente debatidas.

O HTML Semântico serve para organizar e estruturar os elementos do documento em partes específicas para não correrem soltos pelo body de maneira desorganizado e ilegível.

Até a versão 4 do HTML as divs eram as principais semânticas de estruturamento da página, com a chegada do HTML5 surgiram novas TAGs com funções das divs que eram criadas para estruturar os elementos contidos no documento, o que facilitou muito no estruturamento da página. Nota-se que dá pra comparar a estrutura de uma página web com layout de uma folha de jornal, pois ambas contém cabeçalhos, rodapés, artigos e seções.

• O elemento <section> (seção) representa uma seção genérica dentro de um documento. Esse elemento pode conter um agrupamento de textos com vários capítulos, seções numeradas etc. No exemplo a seguir, é apresentado um artigo contendo um assunto principal e, dentro desse assunto, várias seções com assuntos distintos.

• O elemento <header> (cabeçalho) utilizado também para delimitar o título da seção, trabalha em conjunto com os elementos anteriores, no entanto, não é obrigatório.

• <nav> (navegação) este elemento é a seção onde ficam as informações de de página. Geralmente nesta seção são colocadas as ligações (links internos) para a própria página ou ligações externas para outras páginas de sites externos.

• <article> (artigo) este elemento é um artigo independente dentro de um texto, este elemento pode estar ou não dentro de um elemento <section>. Imagine um jornal com as seções de esportes, fofocas, etc. Dentro de cada seção existem vários artigos sobre textos específicos, por exemplo, na seção de esportes pode ter um artigo falando sobre o time A, outro sobre time B e o outro sobre o time C. Um artigo pode conter um elemento <header> que é o título e um elemento <footer> que é o rodapé do elemento.

• <footer> (rodapé) este elemento é um que contém basicamente as informações sobre o conteúdo da seção, como, por exemplo, o autor, links relacionados etc.

• <aside> (de lado) neste elemento estão contidas as informações que não estão relacionadas diretamente com o texto. Por exemplo: comerciais pagos, links promocionais etc.

[HTML5] TAGs essenciais

É necessário entender o que é TAG (linguagens de marcação), o “comando” do HTML. TAGs são estruturas de linguagem de marcação contendo instruções, tendo uma marca de início e outra de fim para que o navegador possa renderizar uma página. O elemento que compõe a estrutura do documento HTML5 é iniciado com o símbolo menor ( < ) e terminado com o símbolo maior ( > ), como por exemplo: <meta>, <h1>, <img> etc.

Ou seja, todo elemento HTML é chamado de tag que é definida pelos os sinais de abertura e de fechamento </tag fechada>, há exceções de Tags que não precisam de um fechamento somente a Tag de abertura, como é o caso do <meta> e <link>.

Além disso, são divididas em categorias conforme a seguir:

• Metadados
• O elemento root
• Agrupamento de conteúdo
• Seções
• Script
• Edições
• Semânticas de nível de texto
• Conteúdo incorporado
• Tabelas
• Formulários
• Interativo

Uma TAG pode conter atributos, que são informações que alteram o comportamento da TAG. Os atributos podem ser divididos em atributos específicos para cada TAG e atributos globais que são comuns a todas as tags.

Além das TAGs, existem outros elementos que ajudam na construção de documentos HTML5, que são: o CSS, o Javascript.

Atributos são informações que passamos na Tag para que ela se comporte da maneira esperada. Existem atributos globais (que funcionam em todas as Tags) e específicos (que são direcionados para cada Tag, através de especificação).

Os Atributos possuem nome e um valor. Existem Atributos que você vai usar sempre e existem outros que serão mais raros. Exemplo de atributo da tag <link>:

<link rel=\"stylesheet\" href=\"/assets/public/styles/css/style.css\">

Como pode ver o atributo rel=\"\" indica o valor da conexão, que no caso é rel=\"stylesheet\" que significa \”folha de estilo\” para reconhecer o arquivo CSS externo. O atributo href=\"\" significa o endereço dessa conexão, é importante que o endereço seja bem declarado para a conexão funcionar, caso contrário não irá funcionar.

Atributos Específicos de uma TAG:

Atributos Globais de uma TAG:

CSS3 – Cascading Style Sheets 3

O CSS (Cascading Style Sheets), é um \”Stylesheets\” (folha de estilo) composta por \”camadas\” e usado para definir a aparência de páginas da internet que adotam para o seu desenvolvimento linguagens de marcação (como XResponsive, HTML e XHTML), criando assim as interfaces. O CSS define como serão exibidos os elementos contidos no código de uma página da internet e sua maior vantagem é efetuar a separação entre o formato e o conteúdo de um documento.

Há várias formas de inserir modificação no estilo com CSS. Com o CSS você pode especificar muitas propriedades de estilo para qualquer elemento HTML. Cada propriedade tem um nome e um valor, separados por dois pontos :. Cada declaração de propriedade é separada por um ponto e vírgula ;.

Conforme W3C, Cascading Style Sheets (CSS) é um mecanismo simples para adicionar estilo (por exemplo, fontes, cores, espaçamento) nos documentos da Web. O CSS é um conjunto de comandos que alteram o comportamento dos elementos HTML 5 e, portanto, existem algumas formas de fazer isso, veja abaixo quais são e as suas sintaxes:

CSS interno: as formatações são definidas dentro do arquivo HTML. Exemplo de CSS interno:

<style> * { margin: 0; padding: 0;} </style>

CSS externo: as formatações são definidas um arquivo CSS que é linkado ao arquivo HTML. Exemplo de CSS externo:

<link rel=\"stylesheet\" href=\"/assets/public/styles/css/style.css\">

CSS inline: a definição do estilo é feita na mesma linha da TAG HTML a ser formatada. Neste método, o CSS é aplicado diretamente no elemento, utilizando o atributo style. É caracterizado por possuir uma implementação mais simples, no entanto, este método dificulta a manutenção do código. Exemplo de CSS inline:

<p style=\"color:olive;font-size:19px;background-color:black\"></p>

Estilo incorporado ou interno: Caracteriza-se por escrever o código CSS, utilizando o comando <style> do HTML. Esse método é superior ao anterior, pois todas as regras CSS estão localizadas no início do código HTML5. No entanto, essas regras só poderão ser utilizadas dentro deste documento, impedindo o compartilhamento e a reutilização das regras.

Exemplo de utilização:

 <head>
  <style>
   * {margin: 0; padding: 0; box-sizing: border-box;}
   body {width: 100%; height: 100vh;}
  </style>
 </head>

Estilo externo: As regras foram escritas em um arquivo com extensão .css e podem ser carregadas ao documento HTML5 de duas formas:

Utilizando o elemento no HTML

<head>
  <link rel=\"stylesheet\" href=\"default.css\">
  <link rel=\"stylesheet\" href=\"green.css\" title=\"Green styles\">
  <link rel=\"alternate stylesheet\" href=\"contrast.css\" title=\"High contrast\">
  <link rel=\"alternate stylesheet\" href=\"big.css\" title=\"Big fonts\">
  <link rel=\"alternate stylesheet\" href=\"wide.css\" title=\"Wide screen\">
</head>

Utilização do elemento @import no CSS permite importar regras de estilo dentro de outras regras de estilo. Esse método permite aplicar regras comuns a todos os documentos HTML.

Exemplo de utilização:

Dentro de um documento .css podemos aplicar nas primeiras linhas, a chamada de arquivos externos, para utilizar comandos já existentes.

@import \"mystyle.css\";
@import url(\"mystyle.css\");
@import url(\"fineprint.css\") print; /* mídia específica para impressão */
@import url(\"bluish.css\") projection, tv; /* mídia específica grandes mídias*/
@import url(\"narrow.css\") handheld and (max-width: 400px); /* mídia específica mídias portáteis*/

O CSS nível 3 implementou o conceito de módulos, em que cada módulo é desenvolvido de forma independente, seguindo um cronograma próprio. A principal vantagem é independência na construção das novas funcionalidades. Os principais conceitos do CSS são divididas em categorias conforme a seguir:

• Seletores, Declarações, Propriedades e Valores
• Box Model, padding e margin
• Texto, Background, Foreground e Variáveis
• Classes e IDs
• Keyframes e Animations
• Pseudo-classes
• Pseudo-elementos
• Transform e Transition
• Positions, Dimensions e Displays
• Media Queries e Layouts Responsivos

[CSS] Box Model

When we are creating the layout of a website the browser represents each HTML element as a retangular box, this is the box-model. And with the CSS we can alterate the aparence of this box (width, height, background color, etc.). That box is compost for 4 areas: the content, the padding, the border and the margin.

1. **margin** – São os espaçamentos entre elementos (transparente).
2. **border** – A borda, onde circulam o padding e o conteúdo, dá para alterar a largura, cor e forma.
3. **padding** – Espaçamento entre a borda e o conteúdo.
4. **content** – O conteúdo inserido no elemento HTML.

Besides that, the Box model have his positions:

• **top**: Up position
• **right**: Right position
• **bottom**: Down position
• **left**: Left position

? Box Model: top, right, down, left

Sempre será referenciada por esta ordem: topo, direita, inferior e esquerda (top, right, bottom, left).

Exemplo:

ul {
 margin: 12px;
 padding: 12px;
}

Dessa forma, é possível inserir de uma vez os espaçamentos da ordem (top, right, bottom, left) de um modelo padrão de 12px para cada posição, porém não permite diferenciar e alterar uma posição da ordem, pois ambos foram solicitados para 12px. Outra forma, é inserir essa instrução passo a passo para a ordem (top, right, bottom, left) o que permite diferenciar o espaçamento de cada um, como desejado.

ul {
 margin: 12px 12px 12px 12px; /*top, right, bottom, left = 12px*/
 padding: 12px 0px 12px 12px; /*espaçamento direito entre a borda e o conteúdo = 0px; top, left, bottom = 12px*/
}

Outra forma é inserir a propriedade do box model de acordo com suas posições, o que não é muito prático.

Exemplo:

ul {
 margin-top: 12px; /*topo da margem = 12px*/
 margin-right: 12px; /*direito da margem = 12px*/
 margin-bottom: 12px; /*abaixo da margem = 12px*/
 margin-left: 12px; /*esquedo da margem = 12px*/
 
 padding-top: 12px; /*espaçamento topo entre a borda e o conteúdo = 12px*/
 padding-right: 0px; /*espaçamento direito entre a borda e o conteúdo = 0px*/
 padding-bottom: 12px; /*espaçamento inferior entre a borda e o conteúdo = 12px*/
 padding-left: 12px; /*espaçamento esquerdo entre a borda e o conteúdo = 12px*/
}

OBS: Perceberam a discrepância entre os dois métodos? E como é mais prático o primeiro.

[CSS3] Seletores, Declarações, Propriedades e Valores

Após a criação do HTML a necessidade de formatar as páginas ficou evidente, assim, em 1996, foi criada a linguagem de estilo que conhecemos por CSS.

A sintaxe é bem simples e pode ser explicada com a frase \”você cria regras de estilo para elementos ou grupos de elementos\”.

Vamos usar um elemento HTML que vimos anteriormente, a âncora , para exemplificar.

Uma regra CSS é representada por um seletor ou um grupo de seletores, no nosso caso é o a, então dentro de um par de chaves adicionamos as declarações, no exemplo abaixo estamos alterando cor e tamanho da fonte desse título, as declarações são formadas por uma propriedade e um valor.

Uma regra CSS é representada por:

• Propriedade: Determina a modificação a ser feita.
• Seletor: É o alvo da regra (nome do comando) CSS.
• Valor: A alteração.
• Declaração: É o conjunto de propriedades e valores.

Exemplo:

 a { 
    color: #000;
   }

• a = seletor
• color = propriedade
• #000 = valor
• {color:#000;} = declaração

No CSS, a seleção de elementos pode variar de uma forma simplificada até padrões contextuais ricos.

Os tipos de seleção são muito importantes, pois a ordem deles alteram no resultado do processamento da página.

Agrupamento: O CSS permite agrupar declarações repetidas.

Exemplo:

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

É equivalente a:

h1, h2, h3 {
font-family: sans-serif
}

OBS: Todos os h1, todos os h2 e todos os h3

Seletores descendentes: Um elemento pode estar contido dentro de outro elemento.

Exemplo:

<H1>Este texto é <EM>muito</EM> importante</H1>

h1 { color: red } /* indica que todos os elementos h1 possuem a cor vermelha */
em { color: red } /* indica que todos os elementos em possuem a cor vermelha */
h1 em { color: blue } /* indica que os elementos em contidos em um elemento h1 possuem a cor azul */

Seletores filhos: Um elemento filho é caraterizado quando os elementos são separados por “>\”.

div ol > li p {color: green }

Este exemplo, todos os elementos p serão de cor verde quando estiverem dentro de um elemento item <li>, filho de uma lista <ol> dentro de uma <div>.

Seletores por prioridade: Um elemento por prioridade é caracterizado quando os elementos são separados por \”+\”. Ou seja, o primeiro parágrafo que vem depois da div.

 div + p {
   color: red;
 }

Seletores por atributos: Especifica regras para os elementos que possuem determinado atributo.

Exemplo:

span[hello=\"Cleveland\"][goodbye=\"Columbus\"] { color: blue; }

A regra será aplicada a todos os elementos span que possuem o atributo hello=\"Cleveland\" e o atributo goodbye=\"Columbus\".

Seletores por classes: Uma classe permite atribuir um conjunto de regras a um determinado elemento. É determinado por asterisco ponto (*.) ou simplesmente ponto (.).

Exemplo:

.pastoral { color: green } /* todos os elementos com a classe~=pastoral */
/*ou*/
*.pastoral { color: green } /* todos os elementos com a classe~=pastoral */

Seletores por ID: O atributo ID permite identificar um elemento único no documento HTML. Para selecionar este elemento basta utilizar o caracter “#” seguindo pelo nome do elemento.

Exemplo:

h1#titulo1 { text-align: center } /* aplica a regra ao elemento h1 com o id=titulo */
*.pastoral { color: green } /* todos os elementos com a classe~=pastoral */

No exemplo anterior criamos uma regra que altera um elemento HTML diretamente, mas isso significa que todos os elementos ficarão com aquela aparência, e normalmente temos sites mais complexos que precisam de várias regras diferentes para elementos iguais.

Para ficar mais tangível vamos relembrar um pouco o site que começamos a fazer no módulo passado, ele tinha vários elementos header, mas não vamos querer que o header principal tenha a mesma formatação que o header de uma postagem, é aí que entram os IDs e Classes.

O seletor que vimos no primeiro exemplo é um seletor de tipo, pois ele representa um elemento HTML, e com IDs e Classes podemos representar qualquer tipo de elemento mas há algumas diferenças entre eles:

ID: é representado pelo símbolo # (hash) seguido de um nome para esse ID. Só pode ser utilizado uma única vez!

#id{
  }

Classe: a classe é representada de forma parecida do ID, mas é precedida por um ponto em vez do hash. Pode ser utilizado mais de uma vez!

.class{
  }

E a diferença mais importante entre eles é a forma como devem ser usados: o ID só pode ser usado uma vez em uma página HTML enquanto a classe não tem restrições.

[CSS3] Pseudo-Classes

E há um último detalhe nesse exemplo: a pseudo-classe. Elementos HTML sofrem alterações causadas pela interação do usuário, como mover o mouse por cima ou clicar nesse elemento. As pseudo-classes são bem parecidas com os eventos do JavaScript, porém não possuem o mesmo poder de manipular os elementos.

Sintaxe:

 seletor:pseudo-class { 
    property: value;
   }

O a:hover do exemplo significa que a âncora também terá essa aparência quando o usuário passar o mouse por cima de um hyperlink.

Tipos de Pseudo-Classes:

Aplicações:

Exemplo 1:

p:first-child {
  color: blue;
}

p i:first-child {
  color: blue;
}

p:first-child i {
  color: blue;
}

[CSS3] Pseudo-Elementos

Os pseudo-elementos são usados para estilizar partes específicas de um elemento. Como por exemplo: a primeira letra ou linha de um elemento ou talvez inserir um conteúdo antes ou depois do conteúdo de um elemento.

Sintaxe:

selector::pseudo-element {
  property: value;
}

Tipos de Pseudo-Elementos:

Exemplo 1:

<!DOCTYPE HTML>
<HTML>
<head>
<style>
p::after { 
  content: \" - Remember this\";
}
</style>
</head>
<body>
   <p>My name is Donald</p>
   <p>I live in Ducksburg</p>
</body>
</HTML>

::selection {
  color: red;
  background: yellow;
}

[CSS3] Variáveis no CSS

As variáveis no CSS servem para definir um padrão para a maioria dos elementos HTML5, poupando assim muitas linhas de código na folha de estilo. É muito comum usar as variáveis para fazer uma paleta de cores para uma página web mais complexa.

Sintaxe:

:root{
    --nome da variável: #141414;
}

.bg{
  background-color: var(--nome da variável);
}

Basta utilizarmos a pseudo-classe :root e inserirmos os seletores --nome da variável para podermos atribuir os valores. Para chama-la é simples, basta somente utilizar o seletor desejável e o valor var(--nome da variável).

[CSS3] Border

No entanto, a border é diferente da margin e do padding: \’border-top-width\’, \’border-right-width\’, \’border-bottom-width\’, e \’border-left-width‘.

Exemplo de utilização:

h1 { border-width: thin } /* thin thin thin thin */
h1 { border-width: thin thick } /* thin thick thin thick */
h1 { border-width: thin thick medium } /* thin thick medium thick */</p>

Estilos da borda: \’border-top-style\’, \’border-right-style\’, \’border-bottom-style\’, \’border-left-style\’, and \’border-style‘, \’border\’.

Exemplo de utilização:

#xy34 { border-style: solid dotted }

Tipos de Borda:

? Como fazer Bordas de Triângulos:

JavaScript (JS)

O JavaScript (JS) é uma linguagem de programação do lado cliente, ou seja, é processada pelo próprio navegador (processada pelo cliente).

Com o JavaScript podemos criar efeitos especiais para nossas páginas na Web, além de podermos proporcionar maior interatividade com nossos usuários. O JavaScript é uma linguagem orientada a objetos, ou seja, ela trata todos os elementos da página como objetos distintos, facilitando a tarefa da programação.

Resumindo, o JavaScript é uma poderosa linguagem que deve ser dominada por quem deseja criar páginas Web dinâmicas e interativas.

É uma linguagem de programação baseada em scripts e padronizada pela ECMA Internacional. Foi criada por Brendan Eich (Netscape) e surgiu em 1995 como linguagem de script client-side de páginas web.

Atualmente, o JavaScript compete com outras linguagens de programação em alta no mercado, sendo indispensável o seu aprendizado.

<img