Entendendo o Front-End

Entendendo o Front-End. Existem 3 camadas no desenvolvimento web: Informação, formatação e comportamento.

A camada de informação: é normalmente controlada pelo HTML. Ela exibe e da significado à informação que o usuário consome. É nela que você marca o que é um titulo, um parágrafo etc.. Dando significado e estruturando cada pedaço de informação publicada.

 

 

A camada de formatação: é normalmente controlada pelo CSS. É nesta camada que você controla como a informação será formatada, transformando o layout feito pelo designer em código.

O CSS é o responsável por dar forma à informação marcada com HTML, para que ela seja bem-vista em qualquer dispositivo.

A camada de comportamento: Era totalmente controlada pelo JavaScript, no entanto o CSS agora está tendo algumas responsabilidades nesse terreno. Nesta camada é onde controlamos qual será o comportamento da informação.

Quando uma modal se abre ou um slider de imagens funciona, é o JavaScript que está entrando em ação. São explicações bem básicas de cada camada, vamos entender agora cada uma delas.

 

Veja também:

  • Quer aprender Front-End e Web Design? → » CLIQUE AQUI PARA CONHECER «
  • Acesso imediato e grátis. Aprenda front-end e web design em uma sequência de videoaulas gratuitas.

 

HTML, CSS e JavaScript / JQuery

HTML5

Tudo que você for criar na web começa e termina com HTML, e com certeza para você ser um desenvolvedor Full-Stack completo você precisa domina-lo bem.

Impossível você desenvolver qualquer tipo de aplicação web sem dominar o funcionamento do HTML, pois ele estará presente desde o início do projeto e será o responsável por muitas partes cruciais durante toda a sua elaboração.

Se tratando de projetos maiores e que demandem uma equipe de desenvolvedores, você precisa redobrar sua atenção quanto a semântica do seu HTML. Se a semântica não estiver bem-feita, o site terá dificuldade de aparecer nos mecanismos de buscas, irá ter problemas com a acessibilidade, e com o tempo até a manutenção será prejudicada.

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Entendo a estrutura e semântica do HTML5</title>
</head>
<body>
<p>Olá mundo!</p>
</body>
</html>

Doctype e o elemento HTML

O Document Type Defination (DTD, ou Doctype) é uma instrução que diz ao navegador qual é a especificação do código que está sendo utilizada no documento, e deve ser declarado antes da tag .

Já na versão antiga do HTML, a declaração do Doctype era mais extensa e difícil de decorar, havendo a necessidade de referenciar para o navegador o arquivo DTD com as definições daquela especificação.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

No HTML5 a inserção do Doctype foi simplificada, e a responsabilidade de buscar as definições da especificação fica por conta do próprio navegador:

Após a declaração do Doctype, iniciamos o código HTML. Na árvore de elementos do código, a tag principal é a , que comporta todos os outros elementos filhos.

É na tag “” que nós declaramos o idioma principal do documento. Na tag “” também podemos inserir atributos como o xmlns (XML Namespace), como quando usamos em nossa página elementos da FBML (Facebook Markup Language):

<html lang="pt-br" xmlns:fb="http://www.facebook.com/2008/fbml">

Metadados

Os Metadados são um conjunto de informações sobre a página e do conteúdo nele publicado. Essas informações são usadas pelos navegadores e user-agents em geral, sendo invisíveis para os usuários. Todos os Metadados ficam contidos na tag ““:

Exemplo:

<head>
<meta charset="utf-8">
<title>Entendo a estrutura e semântica do HTML5</title>
<meta name="keywords" content="HTML5, CSS3, frontend, agni">
<meta name="description" content="Se você quer se aventurar com o HTML5, entenda aqui a sua estrutura básica, a semântica das principais marcações novas e algumas ferramentas.">
<meta name="author" content="Edu Agni">
<meta name="robots" content="index,follow">
<link rel="alternate" type="application/rss+xml" title="Feed de notícias" href="/feed">
<link rel="stylesheet" type="text/css" href="/sidecode/style.css">
<script src="/sidecode/scripts.js"></script>
</head>

 


E-Book Dev. PHP Full-Stack

 

Informações como Title e Description por exemplo, são usadas pelos mecanismos de busca para tornar o seu site localizável nos mecanismos de buscas.

CSS3

CSS (Cascading Style Sheets) permite que você crie excelentes páginas Web, mas como funciona na prática? Esta parte do e-book explica o que é CSS, como o navegador transforma HTML em um Document Object Model ( DOM ), como o CSS é aplicado a partes do DOM, alguns exemplos de sintaxe muito básicos e qual código é usado para incluir nosso CSS em nossa página Web.

O que é CSS?

CSS é uma linguagem para especificar como os documentos são apresentados aos usuários – como eles são estilizados e disponibilizados.

Um documento geralmente é um arquivo de texto estruturado usando uma linguagem de marcação – HTML é a linguagem de marcação mais comum, mas você também encontrará outras linguagens de marcação, como SVG ou XML.

Como o CSS afeta o HTML?

Os navegadores Web aplicam regras CSS a um documento para afetar o modo como são exibidos. Uma regra CSS é formada por:

→Um conjunto de propriedades, que possuem valores definidos para atualizar como o conteúdo HTML é exibido, por exemplo, eu quero que a largura do meu elemento seja 50% de seu elemento pai e que seu plano de fundo seja vermelho.

→Um seletor, que seleciona o(s) elemento(s) para o qual deseja aplicar os valores de propriedade atualizados. Por exemplo, quero aplicar minha regra de CSS a todos os parágrafos do meu documento HTML.

Um conjunto de regras CSS contidas em uma folha de estilos determina como uma página Web deve ser exibida.

Exemplo:

As descrições acima talvez não tenham feito sentido, então vamos garantir que as coisas fiquem claras apresentando um exemplo rápido. Primeiro de tudo, vamos pegar um documento HTML simples, contendo uma H1 e um P (observe que uma folha de estilo é aplicada ao HTML usando um LINK):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>

Agora vamos dar uma olhada em um exemplo CSS muito simples contendo duas regras:

h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}

p {
color: red;
}

A primeira regra começa com um seletor H1, o que significa que ela aplicará seus valores de propriedade ao elemento H1. Ele contém três propriedades e seus valores (cada propriedade / valor é chamado de declaração):

O primeiro define a cor do texto para azul.
O segundo define a cor de fundo para amarelo.
O terceiro coloca uma borda ao redor do cabeçalho com 1 pixel de largura, sólido (não pontilhado ou tracejado etc.) e a cor preta.

A segunda regra começa com um seletor p, o que significa que ela aplicará seus valores de propriedade ao elemento P. Ele contém uma declaração, que define a cor do texto para vermelho.

Em um navegador Web, o código acima produziria o seguinte:

1 - Entendendo o Front-End

1 – Entendendo o Front-End

JavaScript

Como o nosso foco aqui nesse e-book não é apenas o Front-End, vou já aqui adiantar algumas coisas que abrangem a vida do desenvolvedor Full-Stack, pois o JavaScript diferente do HTML e CSS pode ser utilizado tanto para o desenvolvimento Front-End como para o Back-End também.

Segundo, Stoyan Stefanov, em seu livro Pattern JavaScript ele diz:

“Com o JavaScript você pode programar em uma variedade cada vez maior de plataformas. Você pode escrever código no lado do servidor (Node.js), aplicações desktop (que funcionam em todos os sistemas operacionais) e extensões de aplicação como ( Firefox ou Photoshop), aplicações para dispositivos móveis e scripts de linha de comando.

O JavaScript é uma linguagem incomum. Ela não possui classes, e funções são usadas como objetos de primeira classe em várias tarefas. Curiosamente linguagens como Java e PHP começaram a adicionar funcionalidades como closures e funções anônimas, que os desenvolvedores JavaScript vêm utilizando corriqueiramente há algum tempo.”

Pois bem e para sermos um Full-Stack JavaScript Developer? Bom, o JavaScript que a maioria conhece serve apenas para manipular DOM(Document Object Model) ou validar campos de formulários, certo? Errado! Hoje podemos fazer de tudo com JavaScript, inclusive roda-lo no servidor como uma linguagem Server-Side, ou seja, agora temos o JavaScript do lado do Servidor (NodeJs) e do lado do Cliente da qual podemos adotar alguns frameworks ou bibliotecas, como Angular, Ember, Backbone, React, Meteor ou até mesmo o jQuery.

Ferramentas essas que fazem o “ciclo de vida” dos produtos serem extremamente produtivos em relação à escalabilidade e agilidade no desenvolvimento Client-Side, pensando em manutenibilidade e outros fatores. Outro ponto que acho extremamente relevante abordar é que uma das comunidades mais ativas é a do Node.JS, +70000 módulos no NPM (Node Package Manager).

Aqui estamos apenas fazendo uma breve abordagem, pois iremos ver com mais detalhes sobre o nodeJS e outras bibliotecas JavaScript extremamente importantes para nossa carreira Full-Stack.

Mas levando em conta que você talvez esteja iniciando precisamos fazer uma abordagem um pouco mais simples do JavaScript.

Definição de JavaScript

JavaScript é uma linguagem de programação que permite a você implementar itens complexos em páginas web — toda vez que uma página da web faz mais do que simplesmente mostrar a você uma informação estática — mostrando conteúdo que se atualiza em um intervalo de tempo, mapas interativos ou gráficos 2D/3D animados, etc. — você pode apostar que o JavaScript provavelmente está envolvido.

É a terceira camada do bolo das tecnologias padrões da web, duas das quais (HTML e CSS) nós falamos com muito mais detalhes em outras partes da Área de Aprendizado.

2 - Entendendo o Front-End

2 – Entendendo o Front-End

•HTML é a linguagem de marcação que nós usamos para estruturar e dar significado para o nosso conteúdo web, por exemplo, definindo parágrafos, cabeçalhos, tabelas de conteúdo, ou inserindo imagens e vídeos na página.

•CSS é uma linguagem de regras de estilo que nós usamos para aplicar estilo ao nosso conteúdo HTML, por exemplo, definindo cores de fundo e fontes, e posicionando nosso conteúdo em múltiplas colunas.

•JavaScript é uma linguagem de programação que permite a você criar conteúdo que se atualiza dinamicamente, controlar multimídias, imagens animadas, e tudo o que há de mais interessante. É maravilhoso o que você pode efetuar com algumas linhas de código JavaScript.

As três camadas ficam muito bem uma em cima da outra. Vamos exemplificar com um simples bloco de texto. Nós podemos marcá-lo usando HTML para dar estrutura e propósito:

<p>Jogador 1: Chris</p>

Nós podemos adicionar um pouco de CSS na mistura, para deixar nosso parágrafo um pouco mais atraente:

p {
font-family: 'helvetica neue', helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
border: 2px solid rgba(0,0,200,0.6);
background: rgba(0,0,200,0.3);
color: rgba(0,0,200,0.6);
box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
cursor:pointer;
}

E finalmente, nós podemos adicionar JavaScript para implementar um comportamento dinâmico:

var para = document.querySelector('p');
para.addEventListener('click', atualizarNome);
function atualizarNome() {
var nome = prompt('Insira um novo nome');
para.textContent = 'Jogador 1: ' + nome;
}

Experimente clicar no botão que nós criamos para ver o que acontece.

Sim, mas como adicionamos JavaScript a nossa página?

O JavaScript é inserido na sua página de uma maneira similar ao CSS. Enquanto o CSS usa o elemento LINK para aplicar folhas de estilo externas e o elemento STYLE para aplicar folhas de estilo internas, o JavaScript só precisa de um amigo no mundo do HTML — o elemento SCRIPT. Vamos aprender como funciona.

JavaScript interno

Antes de tudo, faça uma cópia local do nosso arquivo de exemplo aplicando-javascript.html. Salve-o em alguma pasta, de uma forma sensata.

Abra o arquivo no seu navegador web e no seu editor de texto. Você verá que o HTML cria uma simples página web contendo um botão clicável.

Agora, vá até o seu editor de texto e adicione o código a seguir antes da tag de fechamento BODY:

<script>
// O JavaScript fica aqui
</script>

Agora nós vamos adicionar um pouco de JavaScript dentro do nosso elemento SCRIPT para que a página faça algo mais interessante — adicione o seguinte código abaixo da linha “// O JavaScript fica aqui”:

function criarParagrafo() {
var para = document.createElement('p');
para.textContent = 'Você clicou no botão!';
document.body.appendChild(para);
}

var botoes = document.querySelectorAll('button');
for(var i = 0; i < botoes.length ; i++) {
botoes[i].addEventListener('click', criarParagrafo);
}

Salve seu arquivo e recarregue a página — agora você deveria ver que quando você clique no botão, um novo parágrafo é gerado e colocado logo abaixo.

JavaScript externo

Isso funciona muito bem, mas e se nós quiséssemos colocar nosso JavaScript em um arquivo externo? Vamos explorar isso agora.

Primeiro, crie um novo arquivo na mesma pasta que está o arquivo HTML de exemplo. Chame-o de script.js — tenha certeza de que o nome do arquivo tem a extensão .js, pois é assim que ele será reconhecido como JavaScript.

Agora, copie todo o código que está dentro do elemento SCRIPT e cole dentro do arquivo.js. Salve o arquivo.
Agora substitua o atual elemento SCRIPT pelo seguinte código:

Salve e atualize seu navegador, e você deverá ver a mesma coisa! Funciona igualmente, mas agora nós temos o JavaScript em um arquivo externo. Isso é geralmente uma coisa boa em termos de organização de código, e faz com que seja possível reutilizar o código em múltiplos arquivos HTML. Além disso, o HTML fica mais legível sem grandes pedaços de script no meio dele.

Manipuladores de JavaScript inline.

Note que às vezes você vai encontrar código JavaScript escrito dentro do HTML. Isso deve ser algo como:

function criarParagrafo() {
var para = document.createElement('p');
para.textContent = 'Você clicou no botão!';
document.body.appendChild(para);
}
<button onclick="criarParagrafo()">Click me!</button>

Contudo, por favor, não faça isso. É uma má prática poluir seu HTML com JavaScript, e isso é ineficiente — você teria que incluir o atributo onclick=”criarParagrafo()” em todo botão que você quisesse aplicar JavaScript.

Usando uma estrutura feita de puro JavaScript permite a você selecionar todos os botões usando uma instrução. O código que nós usamos acima para servir a esse propósito se parece com isso:

var botoes = document.querySelectorAll('button');
for(var i = 0; i < botoes.length ; i++) {
botoes[i].addEventListener('click', criarParagrafo);
}

Isso talvez parece ser mais do que o atributo onclick, mas isso vai funcionar para todos os botões, não importa quantos tem na página, e quantos forem adicionados ou removidos. O JavaScript não precisará ser mudado.

Comentários

Assim como HTML e CSS, é possível escrever comentários dentro do seu código JavaScript que serão ignorados pelo navegador, e existirão simplesmente para prover instruções aos seus colegas desenvolvedores sobre como o código funciona (e para você, se você tiver que voltar ao seu código depois de 6 meses e não se lembrar do que fez).

Comentários são muito úteis, e você deveria usa-los frequentemente, principalmente quando seus códigos forem muito grandes. Há dois tipos:

Um comentário de uma linha é escrito depois de duas barras. Por exemplo:
// Eu sou um comentário
Um comentário de múltiplas linhas é escrito entre os caracteres /* e */. Por exemplo:
/*
Eu também sou
um comentário
*/
Então, por exemplo, você poderia fazer anotações na nossa última demonstração de código JavaScript, da seguinte forma:

// Função: Cria um novo parágrafo e o insere no fim do arquivo HTML.

// Função: Cria um novo parágrafo e o insere no fim do arquivo HTML.
function criarParagrafo() {
var para = document.createElement('p');
para.textContent = 'Você clicou no botão!';
document.body.appendChild(para);
}
/*
1. Captura referências de todos os botões na página e armazena isso em um array.
2. Vai até todos os botões e adiciona um event listener click a cada um deles.
Quando cada botão é clicado, a função criarParagrafo() será executada.
*/
var botoes = document.querySelectorAll('button');
for(var i = 0; i < botoes.length ; i++) {
botoes[i].addEventListener('click', criarParagrafo);
}

O JavaScript talvez pareça um pouco assustador agora, mas não se preocupe — logo, logo com pesquisa e mais pratica, tudo vai começar a fazer sentido.

JQuery

O Jquery não é uma nova linguagem de programação como alguns imaginam, na verdade ele é uma compilação do JavaScript. Para utilizá-la, basta referenciar o arquivo .js do jQuery em sua página e você já pode usar esta linguagem a todo vapor.

 

Veja também:

 

Nós recomendamos que todo o código escrito também esteja em um arquivo externo; isso diminui o tamanho final de sua página HTML e também assegura que o código não ficará exposto, tornando as coisas mais fáceis, caso você queira mudar um código que apareça em todas as suas páginas.

Iniciando o Jquery

Para se usar o jQuery é necessário um conhecimento básico em JavaScript e HTML. Portanto, como já vimos um pouco de HTML e JavaScript é certo que vocês possuem um conhecimento básico dessas linguagens. A partir daí, podemos começar, mas por onde? Primeiro faça o download da versão mais recente da biblioteca jQuery (copie e cole a url https://code.jquery.com/jquery-3.3.1.min.js em seu navegador).

Crie um arquivo HTML, faça a referência à biblioteca jQuery (usando o mesmo comando para se fazer referência à um arquivo .js qualquer).

Jquery iniciado com sucesso.

Agora crie um arquivo .js em branco, nele iremos desenvolver todas as lições. Faça a referência a ele em sua página HTML.

<script language=“javascript” type=“text/javascript” src=“seu_arquivo.js”> </script>

Pronto, agora estamos prontos para entrar no mundo do JQuery!

Seu primeiro script

Primeiramente temos que ver como funcionará um script jQuery. A sintaxe é a seguinte – pode ser digitada no documento.js que você criou ou entre as tags “” caso você opte por não usar um documento separado.

$(document).ready(function () { //insira seu código aqui
});

Curso recomendado para você

Selecionei os cursos on-line para você se preparar e abrir as portas para as vagas de programação. Conheça cada um dos cursos nos links oficiais abaixo. 🙂

Curso Profissional + Certificado + Acesso Vilatício + Suporte

Curso WebMaster Front-End Completo
Web Master Front-End
Aprenda a desenvolver websites profissionais para qualquer segmento. Durante o curso desenvolvemos diversos projetos práticos do zero!
536 alunosHoras do curso 15h Horas do curso certificado
Todo programador deve dominar as seguintes técnicas em desenvolvimento de sistemas abordadas por este curso completo.
Desenvolvimento Web completo PHP
Curso PHP Jedai
Este é um curso completo de PHP. Possui todos os módulos e conteúdos para você aprender do zero ao avançado.
1.900 alunosHoras do curso 80h Horas do curso certificado
Adquira hoje o curso e tenha acesso ao mesmo para sempre. Você pode se inscrever hoje e estudar no seu ritmo, pois o curso nunca vai expirar.

 


 


Acesse
Cursos e Projetos
Java
Acesse
Outros Cursos
PHP MySQL Android
Acesse
Encomende um Projeto
Feito pra Você
Acesse
Tire as Dúvidas On-line
Consultor
Acesse
Aulas de Java só suas
Encomende Agora
Acesse
Dividindo Conhecimento
Posts e Tutoriais
Acesse
Sites e Parceiros
Associados
Acesse
Conheça os curso gratuitos
Grátis

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

 

Depoimento de aluno


 
Alunos Felizes
 
Alunos Felizes
 
Alunos Felizes
 
Instrutor Java Quer se tornar aluno VIP? CLIQUE AQUI!
Instrutor Java

Alex Fernando Egidio
Autor, criador e fundador do JDev Treinamento on-line. Atua no mercado como desenvolvedor e engenheiro de sistemas em Java é apaixonado por desenvolvimento web em Java e pela “mágica” que seus frameworks trazem para o dia a dia de nós desenvolvedores.
Com mais de 10 anos de experiência ajuda programadores do Brasil todo a se tornarem profissionais.