minicurso iniciando no mundo front-end - dia 02 - saspi {5}
DESCRIPTION
Minicurso Iniciando no Mundo Front-End - Dia 02 Ministrado na SASPI {5} - Semana Acadêmica do curso de Sistemas para Internet - IFSULTRANSCRIPT
Matheus S. Thomaz
Front-end Developer
Matheus S. Thomaz
Front-end Developer
CRONOGRAMA
Matheus S. Thomaz
Front-end Developer
/Cronograma
HTML
CSS
Matheus S. Thomaz
Front-end Developer
HTML
Matheus S. Thomaz
Front-end Developer
/HTML
Hypertext Markup Language
Linguagem base da web
Matheus S. Thomaz
Front-end Developer
/HTML
1. <!DOCTYPE html>2.3. <html lang="pt-br">4. <head>5. <meta charset="utf-8">6. <title>Título da página</title>7. </head>8. <body>9. // conteudo10.</body>11.</html>
Matheus S. Thomaz
Front-end Developer
/HTML
1. <!DOCTYPE html>
Determina o tipo de documento.
Matheus S. Thomaz
Front-end Developer
/HTML
1. <html lang="pt-br">
2. </html>
Delimita o html.
Matheus S. Thomaz
Front-end Developer
/HTML
1. <head>2. <meta charset="utf-8">3. <title>Título da página</title>4. </head>
Valores que o navegador usa pararenderizar a página.
Matheus S. Thomaz
Front-end Developer
/HTML
1. <body>2. // conteudo3. </body>
Onde todo conteúdo da tela deveestar.
Matheus S. Thomaz
Front-end Developer
HTMLprincipais tags
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<style></style>
<link rel="stylesheet" href="">
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<script></script>
<script src=””></script>
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<div>
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<section>
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<aside>
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<article>
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<header>
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<footer>
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<nav>
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<p>
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<a>
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<ol>
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<ul>
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<img>
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<video>
Matheus S. Thomaz
Front-end Developer
/HTML principais tags
<audio>
Matheus S. Thomaz
Front-end Developer
CSS
Matheus S. Thomaz
Front-end Developer
/CSS
Cascading Style Sheets
Especifica como os documentos são
apresentados ao usuário.
Matheus S. Thomaz
Front-end Developer
/CSS
É uma linguagem simples e fácil.
15 atributos diariamente.
Aprenda algo novo todos os dias.
Matheus S. Thomaz
Front-end Developer
CSSprincipais atributos
Matheus S. Thomaz
Front-end Developer
/CSS principais atributos
{ background: cor || url || repeat || posição }
Especifica a cor || imagem || posição da imagem || repetição da imagem do plano de fundo do documento.
cor: #111, rgb(255,255,255), rgba(255,255,255,0.5)url: url(../img/image.png)repeat: repeat-x, repeat-y, no-repeatposição: 10px -50px
Matheus S. Thomaz
Front-end Developer
/CSS principais atributos
{ border: largura || estilo || color }
Define a largura || estilo || cor das bordas de um objeto.
largura: 2pxestilo: dotted, solid, dashed…color: #111, rgb(255,255,255), rgba(255,255,255,0.5)
Matheus S. Thomaz
Front-end Developer
/CSS principais atributos
{ color: color }
Define a cor do texto do elemento.
color: #111, rgb(255,255,255), rgba(255,255,255,0.5)
Matheus S. Thomaz
Front-end Developer
/CSS principais atributos
{ display: none }
Determina se um elemento estará visível e reserva um espaço para o mesmo.
display: none, block, inline, inline-block...
Matheus S. Thomaz
Front-end Developer
/CSS principais atributos
{ position: absolute}
Determina como o elemento está posicionado na página.
position: absolute, relative, static, fixed, inherit
Matheus S. Thomaz
Front-end Developer
CSSPre-processadores
“With great power comes great responsability”voltaire
Matheus S. Thomaz
Front-end Developer
/CSS pré-processadores
É um programa que recebe um texto e
efetua conversões léxicas nele.
WTF?Conversões léxicas
Conversões léxicas é praticamente o
mesmo que pegar um texto em
português, escrito de forma informal,
(por exemplo, com gírias e sem uma
pontuação correta) e transforma-lo em
um texto escrito de forma formal.
Matheus S. Thomaz
Front-end Developer
/CSS pré-processadores
Resumindo
Pego isso:
div { background: (@corLorem + #222) * 1.5; }
E transformo nisso:
div { background: #4d4d4d; }
Matheus S. Thomaz
Front-end Developer
/CSS pré-processadores
Definindo:
Uma linguagem que, após compilada, gera CSS.
Matheus S. Thomaz
Front-end Developer
/CSS pré-processadores
CSS
Desorganizado.
Não tem padrão.
Folhas se estilo muito extensas.
Repetitivo.
Uso de prefixos.
Pré-processador
Organização
Imports
Aninhamento (nested)
Variáveis
Funções
Mixins
Matheus S. Thomaz
Front-end Developer
/CSS pré-processadores
LESS
SASS
Stylus
Matheus S. Thomaz
Front-end Developer
SEMÂNTICA
Matheus S. Thomaz
Front-end Developer
/Semântica
Semântica é o estudo das relações entre
os signos e símbolos e o que eles
representam.
Matheus S. Thomaz
Front-end Developer
/Semântica
Um dos fundamentos do front-end.
Matheus S. Thomaz
Front-end Developer
/Semântica
A maioria está relacionada a aspectos da
natureza do conteúdo existente ou
esperado.
Matheus S. Thomaz
Front-end Developer
/Semântica
<h1>Titulo</h1>
<a>link</a>
Matheus S. Thomaz
Front-end Developer
/Semântica
<p>Titulo</p>
<button>link</button>
Matheus S. Thomaz
Front-end Developer
/Semântica
<p>Titulo</p><p>Parágrafo</p>
<button>link</button><button>Botão</button>
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
Classes semânticas são menos
importantes que HTML semânticoo.
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
Classes e ids devem ser usadas como
âncoras para css e javascript.
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
Diferencie classes de estilo com classes
de interação.
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
CSS.loremIpsum | .lorem-ipsum#loremIpsum | #lorem-ipsum
JS.js-loremIpsum
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
Utilize nomes de classes e ids que
comuniquem informações úteis a outros
desenvolvedores.
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
.menuOpcoes
.container
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
O estilo vai se repetir em vários
elementos?
Utilize classes para cada bloco de
repetição.
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
.btn-cancelar {width: 10px;heigth: 15px;padding: 10px 5px;
background: red;}.btn-aceitar {
width: 10px;heigth: 15px;padding: 10px 5px;
background: green;}
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
.btn-cancelar {width: 10px;heigth: 15px;padding: 10px 5px;
background: red;}.btn-aceitar {
width: 10px;heigth: 15px;padding: 10px 5px;
background: green;}
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
.btn {width: 10px;heigth: 15px;padding: 10px 5px;
} .btn-cancelar {
background: red;}.btn-aceitar {
background: green;}
1. <!DOCTYPE html>2.3. <a class=”btn btn-aceitar”>4. Aceitar
5. </a>
6. <a class=”btn btn-cancelar”>7. Cancelar8. </a>
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
É útil estruturar a nomenclatura das
classes.
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
component-namecomponent-name--modifier-namecomponent-name__sub-objectcomponent-name__sub-object--modifier-name
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
.btn { (componente)width: 10px;heigth: 15px;padding: 10px 5px;
} .btn-cancelar { (modificador)
background: red;}.btn-aceitar { (modificador)
background: green;}.texto { (sub-objeto)
color: red;}
Matheus S. Thomaz
Front-end Developer
/Semântica CSS
.btn (componente)
.btn--cancelar (modificador)
.btn__texto (subcomponente)
.btn__texto--cancelar (modificador do subcomponente)
Matheus S. Thomaz
Front-end Developer
/Semântica HTML5
Novas tags resulta em nova estrutura.
Matheus S. Thomaz
Front-end Developer
/Semântica HTML5
<div id=”header”>// header
</div>
<div id=”footer”>// footer
</div>
Matheus S. Thomaz
Front-end Developer
/Semântica HTML5
<header id=”header”>// header
</header>
<footer id=”footer”>// footer
</footer>
Matheus S. Thomaz
Front-end Developer
/Semântica HTML5
<div id=”content”><div class=”noticia”>
<h2>Titulo</h2><p>Lorem ipsum</p><span>10/03/2014</span>
</div></div>
Matheus S. Thomaz
Front-end Developer
/Semântica HTML5
<section id=”content”><article class=”noticia”>
<header><h2>Titulo</h2>
</header><p>Lorem ipsum</p><footer>
<span>10/03/2014</span></footer>
</articlediv></section>
Matheus S. Thomaz
Front-end Developer
/Semântica HTML5
<div id=”menu-lateral”><ul>
<li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
</ul></div>
Matheus S. Thomaz
Front-end Developer
/Semântica HTML5
<aside id=”menu-lateral”><nav>
<li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
</nav></aside>
Matheus S. Thomaz
Front-end Developer
/Semântica HTML5
Matheus S. Thomaz
Front-end Developer