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).

🌐 O que é um website?

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:

Gradientes:

🌐 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 XML.

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 XML-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

HTML é tornado público - 1989
HTML - 1991
Primeira especificação - 1992
HTML 2.0 é publicado e é criado o JavaScript (JS)- 1995
Inclusão de novos elementos e a apresentação do CSS 1 - 1996
HTML 3.2 - 1997
HTML 4 é publicado - 1998
HTML 4.01 - 1999
Norma ISO para o HTML e o XHTML 1 - 2000
HTML5 é publicado - 2008
11W3C parou de trabalhar no XHTML e a desviou recursos para HTML5 - 2009
HTML5 - 2014
HTML5.1 - 2016 e 2017 (2nd ed.)
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 XML. 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 XML, 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 XML 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 XML. 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 XML. 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.

[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 <tag aberta> 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 de uma TAG

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

Atributo	Função do atributo
`rel=""`	Especifica o relacionamento entre o documento atual e o documento linkado
`src=""`	Especifica a URL do arquivo de mídia
`type=""`	Especifica o tipo do documento
`alt=""`	Mostra o texto quando a aparência não renderiza
`target=""`	Especifica o modo de abrir o link em janela
`width=""`	Especifica a largura do elemento
`height=""`	Especifica a altura do elemento
`name=""`	Especifica o nome do elemento
`value=""`	Especifica o valor do elemento

Atributos Globais de uma TAG

Atributo	Função do atributo
`title=""`	Especifica a informação extra sobre o elemento, como um balãosinho de texto
`class=""`	Especifica uma ou mais classes para um elemento ou varios elementos (referência de classe para o CSS)
`id=""`	Especifica uma unica id para um elemento (referência de id para o CSS)

📘 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 XML, 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>

Principais conceitos do CSS3

Os principais conceitos do CSS são divididas em categorias conforme a seguir:

📦 [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.

margin - São os espaçamentos entre elementos (transparente).
border - A borda, onde circulam o padding e o conteúdo, dá para alterar a largura, cor e forma.
padding - Espaçamento entre a borda e o conteúdo.
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

OBS: 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.

📜 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 src="1.jpg" onclick="functionClick()"/>

O HTML tem a habilidade de gerar eventos desencadeando ações para o navegador, como iniciando uma função JavaScript quando o usuário interage em um elemento. Devido a extensão desse conteúdo criei um repositório mais focado no desenvolvimento JavaScript, clique no badge acima para saber mais sobre os Eventos!

Em 1995, o desenvolvimento de páginas web ganha um poderosíssimo aliado, que o acompanha até os dias de hoje: o Javascript. Graças a essa nova tecnologia, designers do mundo inteiro puderam superar algumas das limitações do HTML. A navegação na web começa a ficar menos estática e um pouco mais interativa. Com essa inovação, por exemplo, deu-se início às janelas pop-ups.

Comentário: Um dos problemas da utilização dessa até então nova tecnologia é que o Javascript necessitava ser carregado no topo da página, o que aumentava consideravelmente o tempo de carregamento dos sites. É de se salientar que em meados dos anos 1990, a velocidade máxima de conexão com a internet não ultrapassava a velocidade de 56Kpbs. Muitas das funções iniciais do Javascript acabaram sendo incorporadas ao CSS.

💻 [Front-End] A Estrutura do Website

Tudo começa com o diretório, e dentro dele as pastas /public/ e /src/ , e lá os arquivos index.html e style.css.

O index.html é o padrão da Web de ser o primeiro arquivo processado pelo navegador, geralmente é usado para uma áreas de Login ou a Home da página, e o style.css é o padrão para editar um ou mais arquivos HTML.

HTML5 boilerplate:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
	<title>HTML5 boilerplate</title>
    </head>
    <body>
	<h1>Hello, World!</h1>
        <script src="" async defer></script>
    </body>
</html>

Basicamente, a estrutura do documento html se baseia em <!Doctype html>, <html>, <head>, <body>. Observe a tag muito cuidadosamente. Aqueles acostumados a escrever XHTML perceberam três estranhezas. A primeira é que a tag está muito mais curta do que costumava ser até então - estávamos acostumados a utilizar:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

Isso ainda é possível, mas a versão mais curta é preferível, já que é mais fácil de digitar e funciona em todo lugar.

Você também perceberá que não colocamos aspas no atributo charset=utf-8 nem utilizamos o autoencerramento na tag. O HTML5 não é uma linguagem XML, então você não precisa dessas coisas.

Os navegadores nunca se importaram com a sintaxe XHTML, se ela fosse enviada como text/html (apenas um validador XHTML se importaria). Assim, favorecer uma forma em detrimento da outra no HTML5 seria totalmente arbitrário e tornaria inválidas as páginas que não seguissem o formato, apesar delas funcionarem perfeitamente em qualquer navegador. Desse modo, não importa para o HTML5 qual forma você utiliza.

`<!Doctype html>`

É o tipo do documento, vale ressaltar que não é obrigatório.

<!Doctype html>

`<html>`

É a tag onde editamos o documento HTML, vale ressaltar que é obrigatória para o documento funcionar. Possui o atributo lang="" que define a língua regional do documento.

<html lang="pt-br"></html>

<head>

O <head> representa uma coleção de comandos em que podemos definir as informações do site em si, caracterizadas, como metadados. Nesse elemento, são carregadas as informações referentes ao documento como, por exemplo, comandos CSS e JavaScript.

No <head> encontramos:

<title> que representa o título do documento da página HTML:

<title>Estrutura do HTML</title>

<link> que representa ligação com os arquivos externos:

Chamando uma folha de estilo externa

<link rel="stylesheet" href="style.css">

Chamando uma ícone para a guia do navegador

<link rel="shortcut icon" href="icon.svg">

<meta> que representa comandos para definições globais da página:

 <meta charset="utf-8">
 <meta name="description" content="Free Web Tutorials">
 <meta name="keywords" contents="HTML,CSS,XML,JavaScript">
 <meta name="author" content="Hege Refsnes">
 <meta http-equiv="refresh" content="30">

Atualizar a página depois de 1 segundo sem JavaScript!

<meta http-equiv="refresh" content="1;url=index.html">

<script> comando para chamada de rotinas em JavaScript e ligação com os arquivos js externos:

<script>
   function myFunction {
       document.getElementById("demo").innerHTML = "Hello JavaScript!";
   }

</script> <script type="script/javascript" src="main.js"></script>

<style> comando para estilização do CSS do tipo interno:

<style>
    h1 {
    color: blue;
    font-size: 200px;
    }
</style>

<body>

O <body> localizado no mesmo nível do <head>, este elemento representa o conteúdo principal da página. Aqui estão localizados todos os comandos necessários para a criação do documento HTML.

<h1><h2><h3><h4><h5><h6> tags de títulos que são por ordem de h1-h6 diminuindo a fonte (do maior para o menor). <hgroup> é uma tag para um grupo de tags, não possui valor semântico, apenas serve para deixar o código mais legível.

<hgroup>
  <h1>título 1</h1>
  <h2>título 2</h2>
  <h3>título 3</h3>
  <h4>título 4</h4>
  <h5>título 5</h5>
  <h6>título 6</h6>
</hgroup>

<p> elemento que representa um parágrafo:

<p>parágrafo</p>

<i> e <em> elementos que representam o texto do estilo do tipo itálico.

<i>itálico</i>
     <em>itálico</em>

<b> e <strong> elementos que representam o texto do estilo do tipo negrito.

<b>negrito</b>
     <strong>negrito</strong>

<pre> elemento que apresenta um bloco de texto pré-formatado, preservando seu conteúdo..

<pre>Bloco de texto pré-formatado.</pre>

<br> elemento que serve para quebrar uma linha da página.

<br>

<hr> elemento que possui uma forma linha horizontal com a função para dividir os elementos da página.

<hr>

<wbr> elemento que dá uma oportunidade de quebra de linha, se necessário..

<wbr>

<sub> elemento que representam o texto do estilo do tipo sobscrito.

<sub>texto sobscrito</sub>

<sup> elemento que representam o texto do estilo do tipo sobrescrito.

<sup>texto sobrescrito</sup>

<big> elemento que representa o texto com fonte maior que o padrão.

<big>texto com fonte maior do que o padrão</big>

<small> elemento que representa o texto com fonte menor que o padrão.

<small>texto com fonte menor do que o padrão</small>

<del> elemento que representa o texto com a fonte rabiscada.

<p>texto com a <del>fonte rabiscada</del><p>

<blockquote> elemento que tem como função exibir o texto indicando de qual referência foi retirado (citação).

<bloquote cite="http://www.quote.com/sample.html">
    <p>Elemento textual.</p>
  </blockquote>

<figure> elemento que permite definir logicamente as informações de uma imagem. Trabalha com <figcaption>, que permite dar um título a uma imagem, e <img> elemento que exibe a imagem.

<figure>
    <figcaption>Foto de férias</figcaption>
   <img src="stata.jpg" alt="Fotos das férias no Rio de Janeiro"/>
  </figure>

<div> elemento que representa um bloco de texto. As TAGs <body>, <header>, <footer> etc. possuem regras de utilização bem definidas. Caso o desenvolvedor necessite da criação de um bloco de texto que não se encaixe em alguma regra defina de bloco, pode-se utilizar o recurso da <div>. A <div> é um bloco de texto que pode ser usado em qualquer lugar do documento. Geralmente a <div> é usada para diagramar o layout de um site.

<div>teste</div>

<span> elemento que possui uma utilização genérica semelhante ao elemento <div>.

<span>texto de exemplo</span>

<s> elemento que transforma o texto em um conteúdo não relevante.

<p>O texto é <s>irrelevante</s></p>

<cite> elemento que transforma o texto em uma citação.

<p>O texto é do <cite>star wars</cite></p>

<q> elemento que coloca aspas em um bloco de texto.

<p>O texto é do <q>star wars</q></p>

<code> elemento que representa um fragmento de código de computador.

<pre><code>console.log('Hello, World!');</code></pre>

🖼️ TAG de Imagem

<img src="/assets/public/img/img.svg">

📋 TAGs de Listas

As listas são importantes para a organização do texto e orientação do usuário.

<ul> define uma lista comum, não-numerada (não-ordenada).

<ul>
   <li>exemplo 1</li>
   <li>exemplo 2</li>
   <li>exemplo 3</li>
   <li>exemplo 4</li>
</ul>

<li> elemento que representa um os itens das listas.

<!-- Lista não ordenada: circle, square, disc -->
<ul type="disc"> <!-- padrão -->
 <li>exemplo 1</li>
 <li>exemplo 2</li>
 <li>exemplo 3</li>
</ul>

<ol> define uma lista numerada (ordenada).

<!-- Lista ordenada: 1, A, a, 2 -->
<ol type="1"> <!-- padrão -->
  <li>Comida favorita?</li>
  <li>carro favorito?</li>
  <li>Série favorita?</li>
</ol>

<dl> elemento textual que exibe uma lista de definições, com termos específicos. Trabalha com as tags <dt> termo a ser exibido e <dd> elementos do termo.

<dl>
  <dt>Carro</dt>
   <dd>Uno</dd>
   <dd>Gol</dd>
  <dt>Moto</dt>
   <dd>Honda</dd>
   <dd>Yamaha</dd>
</dl>

🔗 [HTML5] TAG de Âncora

<a> elemento que representa uma âncora de endereço. Você pode âncorar um endereço de um site e inclusive criar links da sua página html. Com o atributo para renderizar endereços href=""você pode barrar o endereço como href="#" , apenas com o # ou até mesmo seu email com href="mailto:webmaster@example.com" que irá enviar uma mensagem para seu email.

Além dos atributos citados, existe o target="" que possui a função de opção da abertura do link. Os valores do target="" podem ser:

_blank abre o link em uma nova guia no navegador.
_self abre o documento na mesma janela (esse é o padrão, portanto não é obrigatório!).
_parent abre o documento na armação parente.
_top abre o documento no corpo todo da janela.

Exemplo 1: Abrindo o link em uma nova guia

<a href="https://www.google.com/" target="_blank">Clique no endereço</a>

Exemplo 2: Linkando dentro das imagens

<a href="https://www.google.com/" target="_self"><img src="/assets/public/images/img.svg" height="100"></a>

Exemplo 3: Enviando mensagem para o email

<a href="mailto:webmaster07@gmail.com">Enviar email</a>

🔊 [HTML5] TAGs de Multimedia

O termo mídia digital é oposto de mídia analógica, esta era configurada por uma base material: o som era gravado em pequenos sulcos, sobre uma superfície de vinil e, quando uma agulha passava por esses sulcos o som era reproduzido. Nas mídias digitais o suporte físico praticamente desaparece, e os dados são convertidos em sequências numéricas ou de dígitos - por isso uso do termo digital. Dessa forma, os sons, imagens, textos, são na realidade sequências de números, o que permite o compartilhamento, armazenamento e conversão de dados. No sentido mais amplo, mídia digital pode ser definida como o conjunto de veículos e aparelhos de comunicação baseados em tecnologia digital, permitindo a distribuição ou comunicação digital das obras intelectuais escritas, sonoras ou visuais. Meios de origem eletrônica utilizados nas estratégias de comunicação das marcas com seus consumidores, geralmente chamada de mídia digital.

O Flash sempre foi a alternativa mais viável para quem precisava adicionar vídeos e músicas nas páginas Web. Ele estava e ainda está presente em quase todos os navegadores e tínhamos um formato que podia ser usado sem maiores problemas.

Bastava adicionar uma chamada para o plugin e funcionava.

 <object width="426" height="240">
 <param name="movie" value=" https://youtu.be/S2Vty9srpFw">
 </param>
 <param name="allowFullScreen" value="true"></param>
 <param name="allowscriptaccess" value="always"></param>
 <param name="allowscriptaccess" value="always"></param>
<embed src= https://www.youtube.com/embed/S2Vty9srpFw
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="426"
height="240">
</embed>
</object>

Em virtude das inconsistências dos navegadores, era preciso adicionar tanto o comando <object&gt; quanto o comando <embed&gt;, comandos específicos para utilização do plugin, duplicando muitos atributos. Isso sem falar que plugins como o Flash causam muitas instabilidades, ocasionando erros que levam até ao fechamento do navegador.

Devido a tudo isso, o HTML 5 vem com um novo suporte, nativo na linguagem, para evitar o uso de plugins e comandos desnecessários. Atualmente, basta colocar a chamada simples, como se fosse uma imagem e o arquivo é acionado.

<video controls src="video.mp4" width="426" height="240"></video>

O problema apresentado pelo novo comando é o uso do atributo src que não funciona bem em alguns navegadores. E se pretendemos que todos possam abrir a página, com qualquer navegador, é necessário usar outro tipo de atributo. Por isso, é comum o uso do atributo <source> na tag <video>.

O elemento <source> pode ser usado múltiplas vezes e permite definir um formato de vídeo para cada navegador, fazendo com que você tenha um alcance maior.

video

<video width="426" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
</video>

audio

<audio controls>
 <source src="audio.mp3" type="audio/mpeg">
 <source src="audio.ogg" type="audio/ogg">
 <source src="audio.wav" type="audio/wav">
</audio>

Existem diversos codecs, possíveis e você precisará exportar pelo menos duas versões para ter um alcance maior.

Obs: Codecs são programas utilizados para codificar e decodificar arquivos de mídia. Eles compactam o formato original, favorecendo o armazenamento, e descompactam na hora da reprodução, transformando novamente em imagem ou áudio.

Todos os exemplos de audio e video citados são importados via documento no diretório. E a dúvida é, como faço para importar um vídeo já hospedado em um site como o YouTube ou o Vimeo? E qual das duas soluções (Via documento ou via server) é a mais vantajosa?

Importando video

Vamos ver como importar videos do YouTube e do Vimeo, passo a passo!

🔲 [HTML5] TAGs de Tabelas

Até o aparecimento do HTML5, as tabelas eram utilizadas como recurso para diagramação de layouts para páginas. Os designers usavam tabelas como uma grade para exibir imagens e textos, e foram amplamente utilizadas, tornando-se a forma predominante de projeto de sites, criando assim um visual rico.

Entretanto, hoje, o uso de tabelas está, de fato, interferindo na construção de sites melhores, mais acessíveis, flexíveis e funcionais, principalmente para as novas mídias, como os celulares, tablets etc.

Essas tabelas ainda continuam existindo no HTML 5 como recurso para exibição de dados tabulares, informações vindas de base de dados. Com a nova versão do HTML, podemos criar sites feitos completamente sem tabelas (tableless), criando assim layouts dinâmicos que aparecem em telas grandes como no computador e se adaptam bem para uma tela pequena do smartphone. Mais pra frente você verá como construir layouts e layouts responsivos com HTML5 e CSS3.

O comando tabela não foi retirado da linguagem, mas ficou restrito o seu uso. Em contrapartida, ainda temos vários sites que utilizam esse recurso, portanto, é importante entendermos como funciona até para poder, se for necessário, dar manutenção nesse tipo de página.

O comando para se inserir uma tabela é <table>. Para iniciar uma linha, devemos introduzir a tag <tr> e para uma célula <td>, que divide a linha da tabela. <th> divide a linha da tabela colocando o conteúdo em negrito. Todos esses comandos são encerrados como </table>, </tr> e </td> respectivamente.

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

O comando <table> tem uma série de atributos que ajudam na formatação da tabela. Os principais são:

`align=""`	alinha a tabela nas três posições: `center`, `left`, `right` e `justify`
`bgcolor=""`	determina a cor da tabela
`border=""`	determina o tamanho da borda, se for zero não mostra a borda
`cellspacing=""`	determina o espaçamento entre células
`colspan=""`	determina o agrupamento entre duas ou mais colunas da tabela (sentido para os lados)
`rowspan=""`	determina o agrupamento entre duas ou mais linhas da tabela. (sentido para baixo e cima)
`cellpadding=""`	determina o espaçamento entre o texto e a borda da célula

<caption> exibe um texto centralizado em relação à tabela, como se fosse uma legenda.

Atributo Rules

Para escolher as linhas internas que serão mostradas dentro da tabela, usamos o atributo RULES, dentro da tag . Os complementos desse atributo são:

`none`	nenhuma linha inteira.
`all`	para mostrar todas as linhas entre cada coluna e linha na tabela (default)
`rows`	para as linhas horizontais entre cada linha da tabela.
`cols`	para as linhas verticais entre cada coluna da tabela.
`groups`	para linhas entre grupos de colunas e seções horizontais, definidas por tags especiais como `<colgroup>` e `<thead>`

Veja alguns exemplos:

<table border rules="all"6>

<table border rules="none"6>

<table border rules="cols"6>

<table border rules="groups"6>

<table border rules="rows"6>

🆗 TAGs de Formulários

A parte de formulários em HTML é muito importante para o preenchimento de dados que os usuários inserem na página HTML. O recolhimento desses dados é feita pelo back-end com uma linguagem de programação back-end (PHP, JavaScript, Python, Java etc.) que armazena e consulta esses dados em um banco de dados (MySQL, PostgreSQL, MongoDB, OracleDB etc.). Vejamos as tags de formulários:

Formulário de Login (boilerplate):

<html>
  <body>
     <h2>Login</h2>
     <form>
	Login:<br>
	<input type="email" name="email"><br>
	Senha:<br>
	<input type="password" name="senha"><br>
	<input type="submit" value="Logar">
     </form>
  </body>
</html>

Através do atributo type podemos definir o tipo do nosso input usado, o atributo name='' podemos processar os dados enviados através de uma linguagem de programação.

Formulário de Login (boilerplate) - Com PHP:

<html>
  <body>
     <h2>Login</h2>
     <form action="processa.php">
	Login:<br>
	<input type="email" name="email" required><br>
	Senha:<br>
	<input type="password" name="senha" required><br>
	<input type="submit" value="Logar">
     </form>
  </body>
</html>

Formulário de Cadastro (boilerplate):

<html>
  <head>
    <title>Cadastro</title>
  </head>
  <body>
     <h2>Cadastre-se</h2>
       <form action="processa.php">
	  Nome Completo:<br>
	  <input type="text" name="nome" required><br>
	  <!-- <label for="email">Email:</label> -->
      Email:<br>
	  <input type="email" name="email" required><br>
	  Senha:<br>
	  <input type="password" name="password" required><br>
	  Repita a senha:<br>
	  <input type="password" name="password" required><br>
	  	
	  Sexo:<br>
	  <input type="radio" name="sexo" value="masculino"> Masculino<br>
	  <input type="radio" name="sexo" value="feminino"> Feminino<br>
	  
	  Interesses:<br>
	  <input type="checkbox" name="interesse" value="futebol"> Futebol<br>
	  <input type="checkbox" name="interesse" value="video-games"> Video-games<br>
	  <input type="checkbox" name="interesse" value="academia"> Academia<br>
	  
	  Estado<br>
	  <select name="estado">
	    <option value="RJ">RJ</option>
	    <option value="SP">SP</option>
	    <option value="MG">MG</option>
	    <option value="ES">ES</option>
	  </select><br>
	
	  Comente!<br>
	  <textarea name="comentario"></textarea><br>

	  <input type="submit" value="Cadastrar">
       </form>
   </body>
</html>

Só vamos poder conseguir fazer o input entre radios se o name for o mesmo, dessa forma conseguimos agrupar essas informações e apenas uma dela será marcada.

Com checkbox podemos escolher mais de uma opção para marcar.

Com

Podemos definir os tipos de <input> e seus atributos:

button
password
text

Os elementos <a>, <input> e <button> são todos usados para criar botões em uma página HTML, mas cada um tem finalidades ligeiramente diferentes e é usado em diferentes contextos.

<a> o âncora é usado para criar links em HTML. Ele é usado principalmente para navegar entre diferentes páginas da web ou ancorar-se em diferentes seções de uma página. Quando um usuário clica em um elemento <a>, ele é direcionado para o URL especificado no atributo href. Os elementos <a> geralmente são estilizados com CSS para se parecerem com botões, mas eles têm comportamento de link padrão.

<a href="pagina.html">Link</a>

<input> é usado para criar elementos de entrada em um formulário HTML. Embora seja frequentemente usado para criar campos de entrada de texto, também pode ser usado para criar botões. O tipo de botão é especificado pelo atributo type. Alguns valores comuns para o atributo type são "button", "submit" e "reset". Os botões <input> são úteis quando você precisa enviar dados de um formulário para um servidor ou executar ações específicas quando um botão é clicado.

<input type="button" value="Clique Aqui">

<button> é usado para criar botões em HTML. Ele pode conter texto, elementos de imagem ou outros elementos HTML. Assim como os botões <input>, os botões <button> podem ter um tipo específico especificado pelo atributo type, como "button", "submit" ou "reset". Os botões <button> oferecem mais flexibilidade em termos de conteúdo e comportamento do que os botões <input>, especialmente quando se trata de estilização e manipulação de eventos usando JavaScript.

<button type="button">Clique Aqui</button>

Em resumo, se você está criando um botão para navegação, use <a>. Se está criando um botão para enviar dados de um formulário, use <input type="submit"> ou <button type="submit">. Se está criando um botão para executar uma ação específica na página (como mostrar ou ocultar conteúdo), use <button type="button">.

📰 [HTML5] HTML Semântico

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.

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 <link> 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*/

Conceito de Módulos

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.

Seletores e Declarações

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.

Tipos de Seletores, Declarações, Propriedades e Valores

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

Seleção de elementos

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

Tipos de seleção

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 */

ID x Class

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.

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.

Syntax

 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

Pseudo-classe	Definição
`:hover`	Altera o elemento por passar o mouse por cima.
`:active`	Altera o elemento por clica-lo.
`:link`	Altera todos os links não visitados.
`:visited`	Altera todos os links visitados.
`:focus`	Altera o elemento `<input>` que tem o foco.
`:checked`	Altera todos os elementos `<input>` marcados.
`:disable`	Altera todos os elementos `<input>` desativados.
`:enabled`	Altera todos os elementos `<input>` habilitados.
`:empty`	Altera todos os elementos `<p>` que não têm filhos.
`:first-child`	Altera cada elemento `<input>` habilitado.
`:enabled`	Altera cada elemento `<input>` habilitado.
`:first-child`	Altera cada elemento `<p>` que é primeiro filho do elemento pai.
`:first-of-type`	Altera cada elemento `<p>` que é o primeiro elemento `<p>` de seu elemento pai.
`:in-range`	Altera elementos `<input>` com um valor dentro de um intervalo especificado.
`:invalid`	Altera todos os elementos `<input>` com um valor inválido.
`:lang(language)`	Altera cada elemento `<p>` com um valor de atributo lang começando com "`it`".
`:last-child`	Altera todos os elementos `<p>` que são os últimos filhos de seu elemento pai.
`:last-of-type`	Altera todos os elementos `<p>` que é o último elemento `<p>` de seu elemento pai.
`:link`	Altera todos os links não visitados.
`:not(selector)`	Altera cada elemento que não é o elemento `<p>`.
`:nth-child(n)`	Altera cada elemento <p> que é ordenado do seu elemento pai.
`:nth-last-child(n)`	Altera cada elemento <p> que é ordenado do seu elemento pai, contando a partir do último filho.
`:nth-last-of-type(n)`	Altera cada elemento <p> que é o segundo elemento <p> de seu pai, contando a partir do último filho.
`:nth-of-type(n)`	Altera cada elemento <p> que é o segundo elemento <p> de seu elemento pai.
`:only-of-type`	Altera o elemento <p> que é o único elemento <p> de seu elemento pai.
`:only-child`	Altera cada elemento <p> que é o único filho de seu elemento pai.
`:optional`	Altera os elementos <input> sem atributo "obrigatório".
`:out-of-range`	Altera os elementos <input> com um atributo "somente leitura" especificado.
`:read-write`	Altera os elementos <input> sem o atributo "somente escrita" especificado.
`:required`	Altera os elementos <input> com um atributo "obrigatório" especificado.
`:root`	Altera o elemento raiz do documento.
`:target`	Altera o elemento ativo atual (clicado em um URL contendo o nome da âncora).
`:valid`	Altera todos os elementos `<input>` com um valor válido.

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:

Pseudo-elemento	Definição
`::after`	Insire algo após o conteúdo de cada elemento.
`::before`	Insire algo antes do conteúdo de cada elemento.
`::first-letter`	Seleciona a primeira letra de cada elemento.
`::first-line`	Seleciona a primeira linha de cada elemento.
`::selection`	Seleciona a parte de um elemento que é selecionado por um usuário (A mancha/ marca da seleção nos contents).

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).

Border (A Borda do elemento)

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 */

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 🔻

Content (O Conteúdo do Elemento)

Foreground e Background

O CSS permite alterar as cores de primeiro plano (foreground) e plano de fundo (background) dos elementos. O W3C recomenda que a regra background seja utilizado no elemento body.

Sempre que pensamos em criar um layout, devemos configurar a cor de fundo (background) para que a página que será aberta apresente a mesma cor em qualquer navegador. Caso não seja definida, corre o risco do usuário ter modificado a cor padrão da máquina e como não está configurada no HTML, a página vai mostrar a cor padrão, alterando, assim, o que foi definido no layout.

O mesmo caso acontece com a cor da fonte (foreground) que deve ser definida da mesma forma. O W3C recomenda sempre que o body contenha essas definições para que todas as páginas apresentem uma formatação.

Background

Para alterar a cor de fundo de uma página HTML, usando atributos do CSS, devemos usar conforme o exemplo:

Modificando a cor do plano de fundo (background):

Dentro da Tag <body>, alteramos o atributo background-color com a cor desejada.

body {
  background-color: yellow;
}

Definindo, assim, uma cor amarela para o fundo da página.

A definição do background pode ser feita também com a utilização de imagens como fundo, para isso devemos pensar da mesma forma e utilizar os comandos específicos para imagens de fundo.

Exemplo de elemento do plano de fundo (background):

body{
  background-image: url("paper.gif");
  background-color: #cccccc;
}

Definindo assim uma cor e uma imagem repitida para o fundo da página.

Quando definimos uma imagem de fundo, o atributo url pode conter um endereço completo de onde se encontra a imagem, podendo estar até em outro domínio.

body{
  background-image: url("//www.exodocientifica.com.br/wp-content/uploads/2014/08/fundo-site.jpg");
  backgroud-color: #cccccc;
}

A definição da imagem de fundo pode ser configurada com alguns atributos especiais como:

body{
  background-image: url("paper.gif");
  background-repeat: repeat-y;
}

Essa regra repete a imagem no eixo especificado. Se usar background-repeat: no-repeat; a imagem não será repetida.

Podemos fixar a imagem em um determinado local da tela.

body{
   background-image: url('smiley.gif');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center;
}

attachment fixa a imagem e position determina a sua localização. O resultado é a imagem totalmente centralizada na página.

Gradientes

É muito usado para mesclar duas ou mais cores no background, o que deixa a interface mais moderna e atraente ao usuário.

Linear-gradient

[CSS] Trabalhando com textos

Uma das novidades do CSS 3 é o uso de fontes da própria internet, podemos agora usar fontes livres que são disponíveis na internet, sem que tenha a necessidade de estar instalada na máquina do usuário.

O site do Google disponibiliza uma quantidade grande de fontes livres. No endereço https://fonts.google.com/ encontramos as fontes e a forma de como colocar no nosso código.

Para colocar no código da página, escolhemos a fonte e depois copiamos o código que vai ser colocado no <head> da página.

 <head>
  <link href="https://fonts.googleapis.com/css?family=Abhaya+Libre|Bungee+Inline" rel="stylesheet">
 </head>

Depois no CSS colocamos o comando para o seu uso.

font-family:'Bungee Inline', cursive;
font-family:'Abhaya Libre', serif;

O comando font-family é o que determina a fonte que será usada.

No CSS, temos ainda uma série de definições de comandos para fonte como:

Propriedade	Função da propriedade
`font-family`	determina a fonte que será usada
`font-size`	Define o tamanho da fonte
`font-style`	Define o estilo da fonte
`font-variant`	Define a caixa da fonte
`font-weight`	Define o corpo da fonte
`letter-spacing`	Define o espaçamento das letras da fonte
`text-transform`	Alterna o texto entre maiúsculas e minúsculas
`text-decoration`	Adiciona destaque a um texto (linhas)

Exemplo:

 h1{
   font-size: 250%;
   font-style: normal;
   font-variant: small-caps;
 }
  
 h2{
   font-size: 100px;
   font-style: italic;
   font-weight: normal;
 }
  
 h3{
   font-size: 2cm;
   font-style: italic;
   font-weight: bold;
 }
  
 h4{
   font-size: 10rem;
   font-style: italic;
   font-weight: 900;
 }
  
 p{
   font-size: 100pc;
   font-style: oblique;
   letter-spacing: 2px;
 }

Estilizando listas

Propriedade	Função da propriedade
`list-style-type`	Altera o marcador da lista

Exemplo:

ul {
  list-style-type: square;
}

ol {
  list-style-type: upper-roman;
}

ul {
  list-style-type: "\1F44D"; /*Código do Emoji de um joinha*/
}

Exemplo: Estilizando a lista com imagem

ul {
  list-style-type: url('rocket.png');
}

[CSS] Positions and dimensions

As propriedades CSS position e float determinam como um box será posicionado no modelo visual de formatação de um documento. Esse box pode conter imagens, textos, listas, entre outros e, com isso, podemos montar layouts com a mesma qualidade de um programa gráfico feito para este fim.

As recomendações do W3C para as CSS 3 preveem a existência de três esquemas de posicionamento:

1. Esquema Normal

Esse esquema segue o fluxo normal em que os elementos são exibidos um após o outro e de cima para baixo. Ele é simples e atualmente a maioria das páginas usam essa forma.

Um exemplo usando textos em sequência:

em{
  padding: 2px;
  margin: 2em;
  border-width: medium;
  border-style: dashed;
  line-height: 2.4em;
}

2. Esquema Float (Flutuante)

Definido pela regra float de posicionamento, juntamente com as regras left, right, none e inherit (herdado).

O box é deslocado para uma nova posição e seu espaço original é preenchido por outro elemento, na medida do possível.

Exemplo de uso: Neste exemplo a imagem está com o float: LEFT o que a coloca ao lado do texto.

img {
  float: left;
}
 
body, p, img {
      margin: 2em;
}

4. Esquema Relativo

3. Esquema Absoluto

Definido pela regra position com valores absolute e fixed. O box é removido do fluxo completamente sem impactar nos elementos posteriores.

No exemplo, seu uso para montar layouts com várias partes:

body {
   height: 8.5in;
}
 
#header {
     position: fixed;
     width: 100%;
     height: 15%;
     top: 0;
     right: 0;
     bottom: auto;
     left: 0;
     background-color: red;
}
 
#sidebar {
     position: fixed;
     width: 10em;
     height: auto;
     top: 15%;
     right: auto;
     bottom: 100px;
     left: 0;
     background-color: blue;
}
 
#main {
    position: fixed;
    width: auto;
    height: auto;
    top: 15%;
    right: 0;
    bottom: 100px;
    left: 10em;
    background-color: yellow;
}
 
#footer{
     position: fixed;
     width: 100%;
     height: 100px;
     top: auto;
     right: 0;
     bottom: 0;
     left: 0;
     background-color: black;
}

[CSS] Transition e Transform

O CSS3 em conjunto com o JavasScript e o HTML5 passaram a dar suporte a transformações em tempo real, de objetos HTML.

Podemos modificar posição, rotacionar, aumentar e diminuir, tudo isso dentro de todos os eixos gráficos disponíveis na sua tela.

Vamos começar com um exemplo de como mudar uma div de posição sem precisar chamar novamente a página, isto é, diretamente no navegador.

Vejamos os códigos:

<!DOCTYPE html>
<html>
<head>
 <link>
</head>
<body>
  <p>Rotacionar o element DIV</p>
  <div id="div1">Aqui o texto!</div>
  Rotacionar: <br>
  <input type="range" min="-360" max="360" value="7" onchange="rotate(this.value)"/><br>
  transformação: rotacionar(<span id="span1">7deg</span>);
</body>
</html>

#div1 {
   width: 120px;
   height: 100px;
   background-color: yellow;
   border: 1px solid black;
   transform: rotate(7deg);
   -ms-transform: rotate(7deg); /*IE 9*/
   -webkit-transform: rotate(7deg); /*Opera, Chrome and Safari*/
}

function rotate(value){
   document.getElementById('div1').style.webkitTransform="rotate("+value+"deg)";
   document.getElementById('div1').style.webkitTransform="rotate("+value+"deg)";
   document.getElementById('div1').style.webkitTransform="rotate("+value+"deg)";
   document.getElementById('div1').style.msTransform="rotate("+value+"deg)";
   document.getElementById('div1').style.MozTransform="rotate("+value+"deg)";
   document.getElementById('div1').style.OTransform="rotate("+value+"deg)";
   document.getElementById('div1').style.tranform="rotate("+value+"deg)";
   document.getElementById('span1').innerHTML=value+"deg";
}

Agora veja como ficará a página. Arrastando a barra de rolagem, teremos a modificação da caixa amarela.

Tipos de transformações possíveis 📘🌱🌳🍃🍂

Valor	Descrição
none	Nenhum tipo de transformação.
matrix(n,n,n,n,n,n)	Define transformação 2D com seis valores.
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	Define transformação 3D com uma matrix de 16 valores.
translate(x,y)	Define deslocamento 2D.
translate3d(x,y,z)	Define deslocamento 3D.
translateX(x)	Deslocamento pelo eixo X.
translateY(y)	Deslocamento pelo eixo Y.
translateZ(z)	Deslocamento pelo eixo Z.
scale(x,y)	Modifica o tamanho em 2D.
scale3d(x,y,z)	Modifica o tamanho em 3D.
scaleX(x)	Modifica o tamanho pelo eixo X.
scaleY(y)	Modifica o tamanho pelo eixo Y.
scaleZ(z)	Modifica o tamanho pelo eixo Z.
rotate(angle)	Rotacionar pelo ângulo.
rotate3d(x,y,z,angle)	Rotacionar.
rotateX(angle)	Rotacionar pelo eixo X.
rotateY(angle)	Rotacionar pelo eixo Y.
rotateZ(angle)	Rotacionar pelo eixo Z.
skew(x-angle,y-angle)	Modifica torcendo o objeto pelo ângulo.
skewX(angle)	Modifica torcendo o objeto pelo ângulo.
skewY(angle)	Modifica torcendo o objeto pelo ângulo.
perspective(n)	Perspectiva.

Exemplo de aplicação: Fotos de uma câmera Polaroid

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;link&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="polaroid rotate_right"&gt;
  &lt;img src="pulpitrock.jpg" alt="Pulpit rock" width="284" height="213"&gt;
&lt;p class="caption"&gt;O púlpito em Lysefjorden, Noruega.&lt;/p&gt;
&lt;/div&gt;
&nbsp;
&lt;div class="polaroid rotate_left"&gt;
&lt;img src="cinqueterre.jpg" alt="Monterosso al Mare" width="284" height="213"&gt;
&lt;p class="caption"&gt;Monterosso al Mare. Uma das cinco aldeias de Cinque Terre&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

📘 style.css

body {
  margin: 30px;
  background-color: #E9E9E9;
}
div.polaroid{
   width: 249px;
   padding: 10px 10px 20px 10px;
   border: 1px solid #BFBFBF;
   background-color: white;
   box-shadow: 10px 10px 5px #aaaaaa;
}
div.rotate_right{
   float: left;
   -ms-transform: rotate(7deg);/*IE 9*/
   -webkit-transform: rotate(7deg);/*Safari*/
   transform: rotate(7deg);
}
div.rotate_left{
    float: left;
    -ms-transform: rotate(-8deg);/*IE 9*/
    -webkit-transform: rotate(-8deg);/*Safari*/
    transform: rotate(-8deg);
}

📺 [CSS] Displays

Flexbox Layout

Grid Layout

📱 [CSS] Responsive Layout

Unidades de resolução responsivas

vh, %, em

Mobile First

Padrão para tela inteira responsiva (Responsive Landing Page)

section {
   width: 100%; height: 100vh;
}

Viewport

Media Queries

Podemos definir media queries como a maneira que o navegador define que formatação de página vai apresentar a cada tipo de dispositivo.

Os media types são definidos para cada tipo de media recebendo um certo código CSS, fazendo com que o navegador direcione a abertura da página de uma certa forma. O HTML foi gerado para ser portátil, ou seja, lido e interpretado por qualquer tipo de dispositivo. Só que cada dispositivo exibe o HTML de uma maneira, devido a fatores como, por exemplo, as dimensões da tela.

Imagine que visitamos um site em um desktop; ele não terá o mesmo aspecto se visitarmos o mesmo site em um dispositivo móvel. Isso ocorre porque são dispositivos diferentes e formas diferentes de navegação. Por isso, a importância de usar essa nova forma de definição de CSS. Isso facilita a leitura do site em mídias diferentes.

Para que possamos manter nossas páginas sempre adequadas a cada tipo de visualização, utilizamos media types com a seguinte formatação:

all = para todos os dispositivos.
braille = para os dispositivos táteis.
embossed = para os dispositivos que imprimem em braille.
print = para a impressão em papel.
projection = para apresentações como PPS.
screen = para monitores ou dispositivos com telas coloridas e resolução adequada.
speech = para sintetizadores de voz. O CSS 2 têm uma especificação de CSS chamada Aural, onde podemos formatar a voz dos sintetizadores.
tty = para dispositivos que possuem uma grade fixa para exibição de caracteres, tais como: Teletypes, Terminais e também dispositivos portáteis com display limitados.
tv = para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitados.
handheld = para dispositivos portáteis, geralmente com telas pequenas e banda limitada.

Observe, abaixo, um exemplo de utilização:

<link rel="stylesheet" href="estilo.css" media="screen and (color)"/>

Onde:

rel = define o tipo do arquivo.
href = define a localização do arquivo.css.
media = define o tipo de saída do arquivo.

Com esse arquivo definimos que ele será usado quando for acessado pela mídia correspondente. Dessa maneira, o CSS não será aplicado em dispositivos monocromáticos.

Nas media queries são utilizados três operadores lógicos:

`not`

Usamos para dispositivos monocromáticos, pois estamos negando o atributo color.

<link rel="stylesheet" href="estilo.css" media="all and (not color)"/>

No próximo exemplo, podemos definir a resolução de vídeo que queremos modificar:

<link rel="stylesheet" href="estilo.css" media="screen and (max-width: 480px)"/>

As modificações serão feitas em dispositivos de media screen e com resolução máxima de 480px.

`or

Define a localização do arquivo.css.

<link rel="stylesheet" href="estilo.css" media="all and (not color)"/>

`only`

Define o tipo de saída do arquivo.

A importância do Viewport para layouts responsivos

Layout multicolunas

Sua principal vantagem é a flexibilidade, pois independe de dispositivo.

Esta especificação permite que o conteúdo da página se adeque de uma coluna para outra e o número de colunas pode variar dependendo do tamanho da janela.

Para facilitar o seu entendimento, vamos direto a um exemplo:

No código CSS definimos em quantas colunas apresentaremos o texto, fazendo distinção de navegador (existem comandos específicos para cada navegador).

div {
   -webkit-column-count: 3; /* Chrome, Safari, Opera */
   -moz-column-count: 3; /* Firefox */
    column-count: 3;
    }
 
p { 
  margin: 0; padding: 0; 
  }
 
img { 
  display: none;
  }

No HTML temos um código simples de texto.

<html>
<head></head>
<body>
<div>
   <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Popularizou-se na década de 1960, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>
</div>
</body>
</html>

Se diminuirmos o navegador, o layout irá se ajustar. Podemos ainda dividir as colunas com uma linha. Para isso, utilizaremos o CSS.

  div {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3;
  /** Define o espaçamento entre as colunas **/ -webkit-column-gap: 30px; /* Chrome, Safari, Opera */ -moz-column-gap: 30px; /* Firefox */ column-gap: 30px;
  /** Define uma linha solida entre as colunas **/
  -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */ -moz-column-rule-style: solid; /* Firefox */ column-rule-style: solid; 
  } 
  p { margin: 0; padding: 0 }

Layout de Box Flexível

É um novo algoritmo para disposição de boxes dentro do HTML. Este modelo permite um controle mais apurado do Box permitindo “dobrar” suas dimensões para preencher espaços não utilizados.

Veja as propriedades a seguir:

display: ; /*flex, inline-flex*/
flex-direction: ; /*row, column, row-reverse, column-reverse*/
flex-wrap: ; /*nowrap, wrap, wrap-reverse*/
flex-flow: ; /*forma abreviada para declarar flex-direction e flex-wrap*/

Vamos ao exemplo!

Renderização dos boxes (.box1 e .box2) contidos no div#container renderizados segundo o Box Model CSS 2.1.

Observe agora a estilização padrão da marcação e sua respectiva renderização.

 
.container {
width: 240px;
height: 240px;
}
 
.box-flex {
width: 80px;
height: 80px;
}
 
.box-flex p {
color: #fff;
font-weight: bold;
margin: 0 !important;
padding: 0 !important;
}
 
.box1 {
background-color: rgba(0, 153, 0, 0.9); /* verde 10% transparente */
}
.box2 {
background-color: rgba(204, 51, 0, 0.9); /* vermelho 10% transparente */

<div id="container" class="container">
 
  <div class="box-flex box1">
<p>Box 1</p>
</div>
  <div class="box-flex box2">
<p>Box 2</p>

Agora, iremos criar um identificador container e configurar como queremos colocar as caixas.

Criar container

#container {
    display: box;
    box-align: stretch;
    box-orient: horizontal;
}

Definir a largura das caixas

.container {
    /*width: 240px;*/
    height: 240px;
}

Tornar o box flexível

.box-flex {
    box-flex: 1;
}

Definir as medias do box

.box-flex {
/* width: 80px; */
height: 80px;
}

.box-flex p {
color: #fff;
font-weight: bold;
margin: 0 !important;
padding: 0 !important;
}

.box1 {
background-color: rgba(0, 153, 0, 0.9); /* verde 10% transparente */
}

.box2 {
background-color: rgba(204, 51, 0, 0.9); /* vermelho 10% transparente */

👓 Sass

Para um desenvolvimento web moderno, o CSS é muitas vezes visto como primitivo e incompleto. Há muitas funcionalidades que nos facilitaria na hora de desenvolver aplicações mais complexas. Um pré-processador é um programa que recebe um texto, realiza algumas alterações e nos devolve um novo texto. E isso já nos ajuda com parte do nosso problema! Só conseguimos estilizar nossas páginas com CSS. E se criássemos uma espécie de "CSS com superpoderes", criando novas funcionalidades? Então, nós usaríamos um pré-processador para utilizar esse código e transformar em CSS comum, fazendo com que qualquer navegador possa entender nosso código.

Assim, podemos trabalhar melhor e com mais produtividade, fazendo proveito de funcionalidades que são inexistentes no CSS comum. Há vários pré-processadores, não só para CSS, mas também para JavaScript. Para CSS, os mais famosos são Sass, Less e Stylus.

O HTML5, por si só, não possui pré-processadores, como o CSS tem o Sass ou Less. No entanto, existem ferramentas e linguagens que podem ser usadas em conjunto com HTML5 para facilitar o desenvolvimento web. Alguns exemplos incluem:

Pug (anteriormente conhecido como Jade): Pug é uma linguagem de modelagem que compila para HTML. Ele permite que você escreva HTML de maneira mais concisa e legível, usando uma sintaxe simplificada.
Haml: Assim como o Pug, o Haml é outra linguagem de modelagem que visa simplificar a criação de HTML. Ele usa uma sintaxe mais limpa e minimalista do que o HTML tradicional.
Slim: Slim é semelhante ao Haml e ao Pug, oferecendo uma sintaxe mais simples para escrever HTML. Ele é projetado para ser mais expressivo e fácil de ler do que o HTML padrão.

Essas linguagens não são tecnicamente pré-processadores de HTML, mas podem ser usadas para gerar HTML de uma maneira mais eficiente e legível. Assim como o CSS tem pré-processadores como Sass e Less, o JavaScript também possui algumas ferramentas que podem ser consideradas pré-processadores ou linguagens que compilam para JavaScript. Alguns exemplos populares incluem:

TypeScript: TypeScript é um superconjunto tipado de JavaScript que adiciona tipos estáticos opcionais ao JavaScript. Ele compila para JavaScript padrão e é amplamente adotado em projetos grandes e complexos para fornecer verificação de tipo durante o desenvolvimento.
CoffeeScript: CoffeeScript é uma linguagem que compila para JavaScript. Ela tem uma sintaxe mais sucinta e expressiva do que o JavaScript padrão e é projetada para tornar a escrita de código JavaScript mais rápida e fácil.
Babel: Embora não seja estritamente um pré-processador, o Babel é uma ferramenta popular para transpilação de código JavaScript. Ele permite que você escreva código usando as últimas características do JavaScript (como as especificadas no ECMAScript 6 e posteriores) e compile esse código para uma versão compatível com navegadores mais antigos.
Elm: Elm é uma linguagem funcional compilada para JavaScript. Ela é projetada para criar aplicativos web front-end robustos e escaláveis, enfatizando a imutabilidade e a arquitetura de aplicativos orientada a modelos.

Essas ferramentas e linguagens podem ser usadas para escrever JavaScript de maneira mais eficiente, segura e expressiva, facilitando o desenvolvimento de aplicativos web complexos.

Então, o Sass possui uma sintaxe muito parecida com o CSS comum. Isso significa que qualquer código CSS é interpretado pelo Sass! Possui uma grande comunidade e é utilizado por grandes frameworks, como o Bootstrap (que antigamente usava o Less), também possui um código bem maduro, com um desenvolvimento ativo há mais de 9 anos. Segundo uma pesquisa feita pelo ashleynola.co.uk, o Sass é utilizado por pelo menos 66% dos desenvolvedores. No Google Trends, se procurarmos por “Less” e “Sass”, veremos que o Sass é bem mais pesquisado. Ambos são ótimos pré-processadores e normalmente a escolha dependerá do gosto da equipe que estiver desenvolvendo o sistema.

Quando começamos a ler sobre Sass, encontramos também o termo "SCSS". Afinal, qual a diferença? Sass é o nome do pré-processador, originalmente criado em Ruby. No começo, era necessário instalar o Ruby em sua máquina para poder gerar o CSS.

A sintaxe era bem diferente do CSS comum:

  #my-div
  color: red
  &:hover
  color: green

Veja que, diferente do CSS comum, não há “;“ nem “{ }”. Pela ausência de “{ }“, os espaços da indentação são importantes.

Depois de um tempo, o Sass passou por uma mudança. Sua sintaxe passou a ser mais parecida com o CSS comum:

  #my-div{
    color: red;
    &:hover{
     color: green;
    }
  }

Similar ao:

  #my-div{
    color: red;
  }
  #my-div:hover{
    color: green;
  }

A nova sintaxe do Sass utiliza a extensão .scss, diferente da antiga que utilizava a extensão .sass.

Resumindo: “sass” e “scss” são as duas sintaxes do Sass. Você ainda pode utilizar a sintaxe .sass, mas o mais recomendado é usar a sintaxe .scss, por ser mais parecido com o CSS comum.

Além disso, pela popularização do Sass, hoje em dia não somos mais obrigados a ter o Ruby em nossa máquina para usá-lo. Podemos compilar o Sass a partir de C, Go, Java, Node.js, PHP, Python, etc.

Para uma lista completa, acesse: http://sass-lang.com/libsass

Como foi dito, não é mais preciso obter o Ruby em nossa máquina para poder utilizar o Sass. Podemos compilar o Sass a partir de C, Go, Java, Node.js, PHP, Python, etc. Vamos aprender como configurar e rodar o Sass no ambiente Node.js:

Como a maioria dos desenvolvedores front-end usam o Node.js atualmente, veremos como configurá-lo para compilar nosso Sass para CSS. Primeiro, obtenha o Node.js em: https://nodejs.org/

Após instalar o Node.js em sua máquina, criaremos um diretório chamado Sass.

☂️ Framework Bootstrap

Se trata de um framework para desenvolvimento de sites responsivos. Possui uma vasta biblioteca de componentes que facilita a agiliza o desenvolvimento de páginas web. É um dos frameworks mais conhecidos e usados para desenvolvimento front-end.

Para saber mais clique na imagem acima para acessar o repositório do Bootstrap.

O Bootstrap já possui um padrão para containers, divs e entre outras tags, como se fossem uma espécie de caixa, todas elas são chamadas pelos atributos class. Uma desvantagem do Bootstrap é a quantidade de linhas e classes no arquivo html, tornando o código mais longo do que estilizado pelo CSS puro. No entanto, é possível utilizar o Framework Bootstrap junto com a folha de Estilo, basta somente usar outros nomes para os seletores.

Name		Name	Last commit message	Last commit date
Latest commit History 1,260 Commits
assets		assets
README.md		README.md

IsaacAlves7/front-end

Folders and files

Latest commit

History

Repository files navigation

It's a repository of Web Development 🌐

🌐 O que é um website?

🎨 Web Design

🌐 Web Development

🎨 Interface

📙 [HTML5] Hypertext Makup Language 5

[HTML5] TAGs essenciais

Atributos de uma TAG

Atributos Específicos de uma TAG

Atributos Globais de uma TAG

📘 CSS3 - Cascading Style Sheets 3

Principais conceitos do CSS3

📦 [CSS] Box Model

📜 JavaScript (JS)

💻 [Front-End] A Estrutura do Website

<!Doctype html>

<html>

<head>

Chamando uma folha de estilo externa

Chamando uma ícone para a guia do navegador

<body>

🖼️ TAG de Imagem

📋 TAGs de Listas

🔗 [HTML5] TAG de Âncora

Exemplo 1: Abrindo o link em uma nova guia

Exemplo 2: Linkando dentro das imagens

Exemplo 3: Enviando mensagem para o email

🔊 [HTML5] TAGs de Multimedia

video

audio

Importando video

🔲 [HTML5] TAGs de Tabelas

Atributo Rules

🆗 TAGs de Formulários

📰 [HTML5] HTML Semântico

Estilo incorporado ou interno

Estilo externo

Utilizando o elemento <link> no HTML

Utilização do elemento @import no CSS

Conceito de Módulos

Seletores e Declarações

Tipos de Seletores, Declarações, Propriedades e Valores

Seleção de elementos

Tipos de seleção

Agrupamento

Seletores descendentes

Seletores filhos

Seletores por prioridade

Seletores por atributos

Seletores por classes

Seletores por ID

ID x Class

Pseudo-Classes

Syntax

Tipos de Pseudo-Classes

Aplicações:

Exemplo 1:

[CSS3] Pseudo-Elementos

[CSS3] Variáveis no CSS

Border (A Borda do elemento)

Tipos de Borda

🔺 Como fazer Bordas de Triângulos 🔻

Content (O Conteúdo do Elemento)

Foreground e Background

Background

Modificando a cor do plano de fundo (background):

Gradientes

Linear-gradient

[CSS] Trabalhando com textos

Exemplo:

Estilizando listas

Exemplo:

Exemplo: Estilizando a lista com imagem

[CSS] Positions and dimensions

1. Esquema Normal

`<!Doctype html>`

`<html>`

Utilização do elemento `@import` no CSS

`not`

`only`

Packages