Embed Size (px)
Citation preview
Grupo de estudos
Front-end
Encontro – 01
Introdução
Como vai funcionar?
Encontros semanais
Apresentação da linguagem ou ferramenta a ser utilizada
Teoria (se necessário)
Prática
Grade do grupo
HTML
Introdução ao HMTL 4.0
O que mudou do HTML 4 para o 5
Novas tags em HTML 5
CSS
Introdução ao CSS 2
O que mudou do CSS 2 para o 3
Novas tags em CSS 3
Grade do grupo
JavaScrip
O que é JavaScript
Introdução a linguagem JavaScript
Páginas dinâmicas com JavaScript
jQuery
O que é jQuery
Qual a diferença de JavaScript e jQuery
Introdução a linguagem jQuery
Animações e efeitos com jQuery
E as boas práticas de
programação Front-end?
As boas práticas serão mostradas em todos os conteúdos
Aprender a programar exige prática
Aprender as boas práticas de programação exige mais
prática ainda, leitura e bom senso
Em cada prática do grupo, nós veremos como construir
códigos corretos, limpos e bem aproveitados
E a Semântica SEO
A semântica SEO vai nascer quase naturalmente das
boas práticas e também das leituras complementares dos
seus estudos.
Dicas e truques.
Mas o que é SEO?
SEO = Search Engine Optimization, ou seja, Engine de
otimização de busca.
Ele é o responsável por dizer quem será o mais bem
colocado na busca do google.
E os FrameWorks?
Serão passados após termos aprendido os conceitos
básicos
Utilização de framework gera vícios
Programadores viaciados em framework não são bons
programadores
Usem com moderação
Vamos começar!
O que é Front-end
O front-end é a parte visível do site
O que é Font-end
O desenvolvedor font-end é quem da vida, forma e
utilidade ao site
Motagem do site
Programação do site
Efeitos do site
Comportamento do site
E como faz isso?
Precisamos compreender a ideia do site
Ter técnica e conhecimento
Ser criativo
Gostar de desafio
E o principal… Estar atualizado!
Como funciona um site?
Como fazer um site?
Como funciona!
O site é dividido em 3 camadas
Conteúdo
• HTML
Apresentação
• CSS
Comportamento
• Script em geral
Obs
As 3 camadas não devem ser misturadas
Cada camada deve ser escrita em seu arquivo específico
Index.html
Style.css
Scripts.js
Dúvidas?
Nosso primeiro site
Principais Tags
<html>…</html>
É a tag de abertura do documento html
<head>…</head>
Cabeçalho da página e local onde ficam as informações
adicionais
<body>…</body>
Corpo da página, onde fica a parte principal do seu site
“Olá Mundo!” Em HTML
<html>
<head>
</head>
<body>
Olá Mundo!
</body
</html>
Como ficou o meu!
Resultado?
Mas porque ficou tão feio?
Teoria
A sintaxe básica do HTML é em inglês, para que ele
possa ser adaptado ao português, nós devemos usar um
argumento que diga ao HTML que ele é um arquivo HTML
em português!
O Doctype e o meta, vão definir o tipo de arquivo e qual
sistema de linguagem ele deve seguir!
Vamos corrigir esse problema!
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
Corrigido
Vamos ver!
Dúvidas?
Outras Tags importantes
<title>…</title>
Título da janela do browser
<h1>…</h1>
Título da sua página
O título varia de h1 à h6
<p>…</p>
Parágrafo no seu site
Negrito <b>…</b>
Itálico <i>…</i>
Demonstração
Resultado
Semântica SEO
Uma página HTML só deve conter um título e um
subtítulo!
Você só deve usar um h1 e h2 por página, mas fica livre
para usar quantos h3, h4, h5 e h6 você quiser.
O título usado no browser, sempre deve ser igual ao
conteúdo contido nele.
Mais Tags?
<br />
Quebra linha
<hr />
Linha horizontal
<ul>…</ul>
Lista simples
<ol>…</ol>
Lista ordenada
<li>…</li>
Item de uma lista
Demonstração
Resultado
Desafio 1 – Modificar lista
Existe uma forma de modificar as listas. Exemplo:
Desafio 2 – Atributos
Muitas tags recebem aitributos. Descubra alguma delas e
traga uma aplicação delas.
Exemplo: <meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<meta> é a tag, http-equiv e content são atributos da tag.
E “Content-Type” e “text/html; charset=UTF-8” são os
valores dos atributos.
Desafio 3 - Construção
Crie uma página, apenas em HTML com todas as tags
contidas nos slides e adicione atributos nas tags.
Tema livre
Use a criatividade
Estude
Materiais para estudo?
Apostilando
Até a próxima semana!
![[INFNET] Criando layouts em PSD pensando no front-end e back-end](https://img.document.onl/doc/110x75/558c38d3d8b42a6e738b4577/infnet-criando-layouts-em-psd-pensando-no-front-end-e-back-end.jpg)
