Página Inicial>Código fonte CGI>Outras categorias
Baixar
front end

It's a repository of Web Development

Preparação : Para este conteúdo, o aluno deve ter um computador com acesso à internet, um navegador web 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.frontendmentor.io/
  • https://daily.dev/
  • https://getcssscan.com/css-box-shadow-examples
  • https://whirl.netlify.app/
  • https://flexboxfroggy.com/
  • https://courses.cs.washington.edu/courses/cse154/flexboxducky/
  • http://www.flexboxdefense.com/
  • https://cssgridgarden.com/
  • https://gridcritters.com/
  • https://caniuse.com/
  • https://www.magicpattern.design/tools/blob-generator
  • https://meyerweb.com/eric/tools/css/reset/
  • https://html5boilerplate.com/
  • https://www.color-hex.com/color-palette/22942
  • https://www.greatfrontend.com/pt-BR
  • https://echarts.apache.org/en/index.html

O que é um site?

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, uma solicitação será feita 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 podem ser feitas; os sites institucionais e portfólios, usados ​​por empresas e pessoas para se apresentarem e serem encontradas por clientes; e os blogs, como esse que você lê.

Além disso, os sites também podem ser classificados em estáticos ou dinâmicos. 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 um banco 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. Esses 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://paletadecolores.online/pt/magenta/
  • https://simpleicons.org/
  • https://colorhunt.co/
  • https://coolors.co/
  • https://colors.muz.li/
  • https://www.toptal.com/designers/colourcode/
  • https://lospec.com/palette-list
  • https://mycolor.space/
  • https://www.pantone.com/articles/color-palettes
  • https://atmos.style/color-generator
  • https://github.com/EmilHvitfeldt/r-color-palettes
  • https://www.color-hex.com/color-palettes/
  • https://visme.co/blog/website-color-schemes/
  • https://colorpalettes.com/
  • https://colorpalettes.net/

Gradientes:

  • https://www.grabient.com/
  • http://gradientsguru.com/
  • https://www.eggradients.com/
  • https://uigradients.com/#Zinc
  • https://webgradients.com/
  • https://cssgradient.io/

Desenvolvimento Web

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. HTML5 especifica novas APIs (Interface de Programação de Aplicativos) 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 usar 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 sendo 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 ,

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 de 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 por meio da interface do usuário, 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.

Exemplo 3: Enviando mensagem para email

 Enviar e-mail

[HTML5] TAGs de Multimídia

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.

Em virtude das inconsistências dos navegadores, era preciso adicionar tanto o comando ; quanto o comando ;, comandos específicos para uso 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.

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 na tag .

O elemento 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 usados ​​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 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 usaram tabelas como uma grade para exibir imagens e textos, e elas foram amplamente utilizadas, tornando-se a forma predominante de projeto de site, 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 banco 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 é

. Para iniciar uma linha , devemos introduzir a tag e para uma célula
, que divide a linha da tabela. divide a linha da tabela colocando o conteúdo em negrito. Todos esses comandos são encerrados como
, e respectivamente. 

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

O comando

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 as 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. (direção para baixo e para cima)
cellpadding="" determina o espaçamento entre o texto e a borda da célula

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:

e
none nenhuma linha inteira.
all para mostrar todas as linhas entre cada coluna e linha na tabela (padrão)
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

Veja alguns exemplos:

">
 < table border rules =" all " 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) : 


	Senha:

	

	
     
  
">
 < 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 : 

	Login:

	

	Senha:

	

	
     
  
">
 < 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) : 

	  Nome Completo:

	  

	  
      Email:

	  

	  Senha:

	  

	  Repita a senha:

	  

	  	
	  Sexo:

	   Masculino

	   Feminino

	  
	  Interesses:

	   Futebol

	   Video-games

	   Academia

	  
	  Estado

	  

	
	  Comente!

	  


	  
       
   
">
 < 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 >
	  
      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  e seus atributos:
  •  button
  •  password
  •  text
 Os elementos  ,  e ">
 < button type =" button " > Clique Aqui  button >
 Em resumo, se você está criando um botão para navegação, use  . Se você está criando um botão para enviar dados de um formulário, use  ou 
 Pseudo-classe Definição
 :hover Ele altera o elemento por passar o mouse sobre ele.
 :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  que tem o foco.
 :checked Altera todos os elementos  marcados.
 :disable Altera todos os elementos  desativados.
 :enabled Altera todos os elementos  habilitados.
 :empty Altera todos os elementos 
 que não têm filhos.
 :first-child Altera cada elemento  habilitado.
 :enabled Altera cada elemento  habilitado.
 :first-child Altera cada elemento 
 que é o primeiro filho do elemento pai.
 :first-of-type Ele altera cada elemento 
 que é o primeiro elemento 
 de seu elemento pai.
 :in-range Altera elementos  com um valor dentro de um intervalo especificado.
 :invalid Altera todos os elementos  com um valor inválido.
 :lang(language) Altera cada elemento 
 com um valor de atributo lang começando com " it ".
 :last-child Ele altera todos os 
 elementos que são os últimos filhos de seu elemento pai.
 :last-of-type Altera todos os elementos 
 que é o último elemento 
 de seu elemento pai.
 :link Altera todos os links não visitados.
 :not(selector) Altera cada elemento que não é o elemento 
 .
 :nth-child(n) Altera cada elemento 
 que é ordenado de seu elemento pai.
 :nth-last-child(n) Altera cada elemento 
 que é ordenado de seu elemento pai, contando a partir do último filho.
 :nth-last-of-type(n) Altera cada elemento 
 que é o segundo elemento 
 de seu pai, contando a partir do último filho.
 :nth-of-type(n) Ele altera cada elemento 
 que é o segundo elemento 
 de seu elemento pai.
 :only-of-type Altera o elemento 
 que é o único elemento 
 de seu elemento pai.
 :only-child Ele altera cada elemento 
 que é o único filho de seu elemento pai.
 :optional Altera os elementos  sem atributo "obrigatório".
 :out-of-range Altera os elementos  com um atr        
        
Expandir

    



    

        

            Informações adicionais
        

        
    





    

        

            Aplicativos Relacionados
        

        
    





    

        

            Recomendado para você
        

        
    






    

        

            Informações Relacionadas
            Todos