Embed Size (px)
DESCRIPTION
Apresentação utilizada no minicurso de 6h ministrado no 7º Cetec da Univates, intitulada "Desenvolvimento para a web usando html e css".
Citation preview
Desenvolvimento para a webusando HTML e CSS
Eduardo Bonfandini
7 CCETEC Univates
INTRODUÇÃOFor dummies
TIPOS DE MAGIA NEGRA
1. Html2. Css3. Javascript4. Php5. Mysql
HTML
HyperText Markup Language
Linguagem de marcaçãoNão é linguagem de programação
HTTP? URL?
● Hypertext transfer protocol:
http://meusite.com.br
HTTPS (HyperText Transfer Protocol Secure)
● Uniform resource locator:
http:// https:// ftp:// mailto:// telnet:// tel://
CSS
Cascade Style sheet
Definição visualDeixa a web maneira
JAVASCRIPT
Javascript
Programação clienteDeixa a web dinâmica
AJAX
Asynchronous Javascript and XML
NÃO É JAVA
Alternativa do Netscape ao Vbscript (Morreu).Lembra BEEEEEEEEEEEM de longe o Java por isso o nome.
LADO SERVIDOR
Papel Higiênico Perfumado
ESSE NÃO É O NARUTO
IE come cola!
DIVERTIDO SEMPRE
2007
O MELHOR NAVEGADOR
W3C
World Wide Web Consortium
PadronizaçãoMenos o IE (come cola)
HTML 4, XHTML, HTML5
● Html 4, CSS 2Maneiro mas limitado
● XhtmlSimilar a html mas mais bem formatado (não pegou)
● Html 5, CSS 3Maneirão
http://www.w3schools.com/
HTMLn?
HTML5 não é uma alternativa é uma
evolução do HTML 4.
MÃO NA MASSASeções
DOCTYPE
HTML 5 (Maneiro)<!DOCTYPE html>
HTML 4<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
ESTRUTURA
<!DOCTYPE html><html>
<head><title>Título</title>
</head><body>
Conteúdo</body>
</html>
INDEX.HTML
● Nome do arquivo principal index.html● Servidores web reconhecem
automáticamente● Segredo do sucesso: Identação
DIV
● Define uma divizão, seção ou bloco do documento.
● Normalmente usado como agrupador.● Trabalha relacionado com formatação CSS.● Por padrão é um quebrador de linha display:
block.
<!DOCTYPE html><html><head><title>Título</title>
</head><body><div>Conteúdo</div>
</body></html>
ESTILOS
<div style="color: white; background-color: red; font-size: 20px;">Conteúdo</div>
QUE FEIO! ISSO NÃO SE FAZ!
Estilos inline são feios e bobos!
MAIN.CSS
● Outra camada● Minusculas sempre.● Sem acentuação● Nomes curtos e com significado● qualquer_coisa.css● De preferência somente um arquivo de css.● Evitar requisições
CONTEUDO CSS
.main{color: white;background-color: red;font-size:20px;
}
CLASSES COM CLASSE
Não usar:● mainDiv● redDiv● right
Usar:● main● principal● secundaria
SIGNIFICADOOBJETIVO
SEMÂNTICA
UNINDO HTML E CSS
.. <title>Título</title><link rel="stylesheet" href="
main.css" type="text/css" media="all"></head><body><div class="main">
Conteúdo</div>...
SPAN
● Muito similar a div, mas não é um bloco.● Sem display:block;● Normalmente utilizado para diferenciar uma
parte do texto visualmente.
<span>Outro conteúdo</span>
Mais a frente discutiremos a parte do display.
DIFERENÇA SPAN/DIV
SEÇÕES HTML 5Principalmente utilizadas para SEO. Comportamanto semelhante a div.
header Cabeçalho
footer Rodapé
section Seção qualquer
article Um artigo.
aside Sidebar, menu lateral
details Detalhes que podem ser escondidos ou mostrados
dialog Diálogo/popup.
summary Cabeçalho para details.
nav Navegação, engloba links. Normalmente usado para o menu principal.
SUPORTAR O COME COLACSS:
header, nav, article, footer, address { display: block; }Javascript (depois, depois...):document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/
NA PRÁTICA
● As diferentes seções não são tão diferentes assim.
● São mais usadas para organização e semantica.
● Uma página organizada é aumenta a “manutenibilidade”, ou seja capacitade de manutenção.
● Uma página com boa semântica permite que o motor dos buscadores façam uma melhor interpretação da página.
Elementos básicosCabeçalhos, parágrafos e muito mais.
HEADING
Cabeçalhos. Títulos.
<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>
H’s são legais.
Nãooooooo!
Nãoooooooooooooooooooooo!
12 px de diferença! Maldito seja User Agent Style sheet! Eu mal consigo ver seus movimentos!
YES!
CSS Reseth1 {
font-size: 32px;margin: 20px 0;line-height:34px;
}
h2 {font-size: 24px;margin: 20px 0;line-height:26px;
}
h3 {font-size: 20px;margin: 20px 0;line-height:22px;
}
h4 {font-size: 16px;margin: 20px 0;line-height:18px;
}
h5 {font-size: 12px;margin: 20px 0;line-height:14px;
}
h6 {font-size: 11px;margin: 20px 0;line-height:12px;
}
Parágrafo (p)
<p>Conteúdo <span>dentro</span> do parágrado<p>
Usado normalmente para colocar conteúdo textual como notícias e posts de blogs.
Pode receber filhotes.
Tem o mesmo problema de alinhamento dos h’s
Artigo ( article, hr, br)
Passível de uso em conjunto com article e h’s, formando uma boa estrutura para um post.
<article>
<h1>Título muito interessante</h1>
<p>Conteúdo cheio de showdebolise!</p>
<hr>
<p>Conteúdo de outro parágrado.<p>
</article>
Comentário
<!-- Este é um comentário não serve para quase nada.-->
● Utilizado somente para código● Browser ignora● Utilizado para destacar autor● Pegadinhas (vaga de emprego)● Uso não recomendado pelo pagespeed.● Utilize comentários na linguagem do
servidor.
Formatação<p><b>Bold text</b></p>
<p><code>Computer code</code></p>
<p><em>Emphasized text</em></p>
<p><i>Italic text</i></p>
<p><kbd>Keyboard input</kbd> </p>
<p><pre>Preformatted text</pre></p>
<p><small>Smaller text</small></p>
<p><strong>Important text</strong></p>
<p><abbr> (abbreviation)</abbr></p>
<p><address> (contact information)</address></p>
<p><bdo> (text direction)</bdo></p>
<p><blockquote> (a section quoted from another source)</blockquote></p>
<p><cite> (title of a work)</cite></p>
<p><del> (deleted text)</del></p>
<p><ins> (inserted text)</ins></p>
<p><sub> (subscripted text)</sub></p>
<p><sup> (superscripted text)</sup></p>
Links
Crie um novo arquivo chamado listas.html<!DOCTYPE html>
<html>
<head>
<title>Listas</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
</head>
<body>
<h1>Listas</h1>
</body>
</html>
Links
<nav>
<a href="">Home</a> |
<a href="listas.html">Listas</a> |
<a href="pasta/">Pasta</a> |
<a href="http://www.google.com.br">Google</a>
<a href="#article">Artigo</a>
</nav>
Links attributos
rel:alternateauthorbookmarkhelplicensenextnofollownoreferrerprefetchprevsearchtag
Target:
_blank_parent
_self_top
framename
Media:Type: mime
ListasUl, Ol, li
Não ordenada
<ul><li>Café</li><li>Xá</li><li>Leite</li>
</ul>
Ordenada
<h2>Ordenada</h2><ol reversed="reversed" start="5"> <li>Café</li> <li>Xá</li> <li>Leite</li></ol>
Ordenada com tipo
<h2>Ordenada com tipo</h2><ol type="I”><li>Café</li><li>Xá</li><li>Leite</li><li>Refrigerante</li><li>Cerveja</li>
</ol>
1) 1 - Número2) A - Alfabética3) a - Alfa. minus.4) I - Romano5) i - Romano minus.
Lista descrição
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Dl: Lista descriçãoDt: define termo/nomeDd: descreve termo/nome
Estilos em listas
Este slide ainda não está pronto.Volte semana que vem.
Tabelastr, td, th, summary ...
Tabelas<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Estilos em tabela
<table style="border: solid 1px black;">
<table border=1>
table{
border-collapse :collapse}
Tag Descrição
table Tabela
th Cabeçalho (table header)
tr Linha (table row)
td Célula ( cell)
caption Título
colgroup Grupo de colunas
col Usado com colgroup
thead Cabeçalho da tabela
tbody Corpo da tabela
tfoot Rodapé da tabela
sumary Sumário (não é renderizado)
Tabelas : tags
FormuláriosInput , select, data-list e muito mais!
Input
<form><label for=nome><input id="nome" name="nome"
placeholder="Preencha o nome"></form>
Tipostextcolordatedatetimedatetime-localemailmonthnumberrangesearchteltimeurlweek
Select
<label for="comida">Bebidas </label><select id="comida" name="comida">
<option value="1">Arroz</option><option value="2">Feijão</option><option value="3">Massa</option><option value="4"
selected>Aipim</option><option value="5">Nabo</option>
</select>
Datalist
<label for="browser">Navegadores </label> <input list="browsers" name="browser"><datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"></datalist>
Checkbox
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car
Radiobutton
<input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female
Imagem
<img src="images/metalSlug.png" alt="Metalslug">
SVG
<img src="images/rabisco.svg" alt="Rabisco">
<svg><rect width="90" height="60" x="
50" y="0" fill="#00FFCC" stroke="#FF0000" stroke-width="3"/></svg>
Canvas
<p><canvas id="figura" width="300" height="300"></canvas></p><p><button onClick="desenhar()">Desenhar</button></p>
Canvas
<script> function desenhar() { var desenho = document.getElementById('figura'); var context = desenho.getContext('2d'); context.fillStyle = '#00FFFF' context.fillRect(50,50,200, 200); }</script>
Google maps
https://www.google.com.br/maps/
Ferramentas para qualidade
● Page speedhttps://developers.google.com/speed/pagespeed/
● Yslowhttps://addons.mozilla.org/pt-br/firefox/addon/yslow/
● w3c validatorhttp://validator.w3.org/
● ...
CSSSeletores e estilos
CSS
:hover:active:before:afterfloat:leftdisplay:blockposition:absolute
JAVASCRIPTMake cool things!
FIM?Obrigado!
