4soft
Front-End Para WEB
Luan Fonseca
<luanfonceca@gmail.com>
Quem sou eu
Luan fonseca, 20 anos, programador desde 2010, Graduando em Enhgenharia de Software/UFRN, formado como Técnico de Infomática para Internet com ênfase WEB pelo IDM, Desenvolvedor de Software na empresa Multmeio, Trainee na empresa Júnior, 4soft e Entusiasta e evangelista Python e de todo o movimento Open-Source.
Nomenclaturas
FRONT-END
"O que o usuário diz que tá feio."
BACK-END
"O que o usuário diz que tá lento."
CLIENT-SIDE
"Ações que ocorrem no Cliente, ou seja, no browser/navegador do usuário."
SERVER-SIDE
"Tudo que ocorre no Servidor, onde o site/software está hospedado."
Nomenclaturas
HTML
(HyperText Markup Language)
"É uma linguagem, comumente utilizada para se construir páginas na Internet, não tem poder computacional, apenas de Marcação"
CSS
(Cascading Style Sheets)
"É uma linguagem, utilizada para adicionar estilo, foi criada com o intuito de melhorar as marcações e adicionar mais poder à exibição do HTML."
Nomenclaturas
JAVASCRIPT
"É uma linguagem front-end, onde seu escopo natural é o Browser, atuando sobre os elementos HTML e Eventos que o Browser envia. Ela tem poder computacional, podendo além de manipular os elementos da página, também pode efetuar calculos e outras coisas que toda Linguagem de Programação pode fazer."
HTML
"Html, é muito flexível, baseado em tags, que por sua vez possuem atributos e esses atributos possuem valores."
<exemplo nome="Primeiro Exemplo" tipo="Texto">Primeiro paragrafo do texto.</examplo>
"Criamos uma tag chamada examplo , ela tem 2 atributos, um nome e um tipo ."
HTML
"Como liberdade nem sempre é bom, uma organização chamada W3C, se dispõe à classificar, organizar e manter as tags. Para que todos consigam entender o HTML de outras pessoas sem muitas dificuldades."
Utilizando uma Tag, pre-definida, do HTML padrão, com atributos seguindo os padrões da WEB:
<p name="Primeiro Exemplo" class="Texto">Primeiro paragrafo do texto.</p>
Estrutura desejada
+-----------------------------------------------------+
| |
| Cabeçalho da Pagina |
| |
+-----------------------------------------------------+
| |
| +--------------------+ +--------------------+ |
| | Bloco Esquerdo | | Bloco Direito | |
| +--------------------+ +--------------------+ |
| | +----------------+ | | Lista de Itens | |
| | | Paragrafo | | | * Item 1 | |
| | | | | | * Item 2 | |
| | | | | | * Item 3 | |
| | | | | | * Item 4 | |
| | +----------------+ | | * Item 5 | |
| +--------------------+ +--------------------+ |
| |
+-----------------------------------------------------+
| |
| Rodapé da Página |
| |
+-----------------------------------------------------+
traduzindo
Cabeçado == header
+-----------------------------------------------------+
| |
| Cabeçalho da Pagina |
| |
+-----------------------------------------------------+
rodapé == footer
+-----------------------------------------------------+ | | | Rodapé da Página | | | +-----------------------------------------------------+
TRADUZINDO
Bloco == section
+-----------------------------------------------------+
| |
| +--------------------+ +--------------------+ |
| | Bloco Esquerdo | | Bloco Direito | |
| +--------------------+ +--------------------+ |
| | +----------------+ | | Lista de Itens | |
| | | Paragrafo | | | * Item 1 | |
| | | | | | * Item 2 | |
| | | | | | * Item 3 | |
| | | | | | * Item 4 | |
| | +----------------+ | | * Item 5 | |
| +--------------------+ +--------------------+ |
| |
TRADUZINDO
Lista == li
+--------------------+ | Bloco Direito | +--------------------+ | Lista de Itens | | * Item 1 | | * Item 2 | | * Item 3 | | * Item 4 | | * Item 5 | +--------------------+
hands on
Criando a estrutura básica do HTML.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Cabeçalho da Pagina</h1>
</header>
<footer>
Rodapé da Página
</footer>
</body>
</html>
HANDS ON
Adicionando o bloco esquerdo, <section>
...
<header>
<h1>Cabeçalho da Pagina</h1>
</header>
<section>
<section>
<h2>Block Esquerdo</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</section>
</section>
<footer>
Rodapé da Página
</footer>
...
HANDS ON
Adicionando o bloco direito, <section>
...
</section>
<section>
<h2>Block Direito</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</section>
</section>
...
Estilos
O CSS, é composto por propriedades, elas são definidas pela W3C e os navegadores tem que acompanhar, em tese. Com isso, essas propriedades dizem ao navegador como ele deve exibir o elemento (a tag). Existem inúmeras propriedades, veja algumas:
margin, width, height, display, padding, font, color, background, display, float, postion, border, text-decoration...Embelzando nosa pagina
Utilizando o atributo style, passaremos os valores de estilo para os elementos.
...
<header>
<h1>Cabeçalho da Pagina</h1>
</header>
<section style="width: 800px;">
<section style="width: 300px; float: left">
<h2>Block Esquerdo</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</section>
</section>
<footer>
Rodapé da Página
</footer>
...
HANDS ON
Utilizando o atributo style, passaremos os valores de estilo para os elementos.
... </section> <section style="width: 300px; float: left"><h2>Block Direito</h2> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </section> <div style="clear: both;"></div> </section> ...
Estilo em cascata
O uso do estilo em cascata é um truque do CSS, para evitar duplicação de código, facilitar na organização, adicionar uma hierarquia de estilo... Com isso, você pode manipular os elementos HTML através de classes, IDs e outro atributos.
<head>
<style type="text/css">
.texto {
font-size: 10px
}
</style>
</head>
<body>
</section class="texto">
Esse texto tem fonte de 10px.
</section>
</body>
Estilo em cascata
Criando estilos para nossa pagina
<head>
<style type="text/css">
.main-section {
width: 600px
}
.small-section {
width: 300px;
}
.pull-left {
float: left
}
.clear {
clear: both;
}
</style>
</head>
Estilo em cascata
Substituindo estilos inline por suas classes.
- <section style="width: 600px;">
+ <section class="main-section">
- <section style="width: 300px; float: left;">
+ <section class="small-section pull-left">
- <div style="clear: both;"></div>
+ <div class="clear"></div>
4soft front end
By Luan Fonseca de Farias
4soft front end
- 1,342
