Aula Nº 1 – Introdução

Propaganda

#Aula Nº 1 – Introdução
webstandards.samus.com.br
Vinicius Fiorio Custódio
[email protected]
#O que é Web Standards ?
São padrões de desenvolvimento web
recomendados pela W3C que visam a
implementação de um padrão único
de
código para todas as páginas na web.
Além das recomendações abordaremos várias práticas utilizadas por
desenvolvedores do mundo todo.
#Vantagens
●
É um documento XML válido
●
Multiplataforma permitindo a exibição em celulares,
PDAs, Televisores, Desktops e etc
Separação de códigos e arquivos por função
● Facilita o trabalho em grupo
●
Acaba com elementos exclusivos de
determinados
Fabricantes (IE, Firedox, Safari...)
●
#Marcação / Formatação /
Comportamento
Importância de uma
separação clara das funções
de cada linguagem
#Marcação (XHTML)
Descrição dos dados
Descrever os dados existentes nos documentos e NÃO
especificar COMO esses dados devem ser exibidos.
<span id=”meu-texto”>
O rato roeu a roupa do rei de roma
</span>
#Formatação (CSS)
Como os dados devem ser exibidos
Cascading Style Sheets
Folhas de Estilo
#meu-texto {
color: red;
}
#Comportamento
Interação, Eventos, O Que e Como as
coisas devem acontecer.
$(“#meu-texto”).mouseOver(
function() {
$(this).css(“color” , “blue”);
}
);
#JavaScript
Lado Cliente / Incompatibilidade /
Limitações
<script type="text/javascript" charset="ISO-8859-1">
document.getElementById("meu-texto").style.color = "red";
</script>
#jQuery
Biblioteca JavaScript que visa a
programação em javascript com uma nova
Sintaxe (mais compacta)
- Suporta elementos da CSS3
- Cross Browser
- Ajax
- Plugins
#Table-Less
Utilização de containers para
posicionamento de elementos gráficos do
layout no lugar de tabelas.
NÃO significa abolir completamente as
tabelas. É simples, tabelas devem ser
usadas para elementos tabulares.
#Exemplo de Table-Less
#TABELAS
<table>
#CONTAINERS
<tr>
<td>
<a href=”#”>
Link1
</a>
</td>
</tr>
</table>
<div id=”menu”>
<a href=”#”>
Link 1
</a>
</div>
#Ambiente de Desenvolvimento
IDE: NetBeans e Notepad++
Browser Padrão: Firefox
Ferramentas: Web Developer Tools
Color Cop
webstandards.samus.com.br/site/downloads
#Hello World of Standards
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1"/>
<title>Hello Title</title>
</head>
<body>
<p>
Hello World of Web Standards
</p>
</body>
</html>
#Hello World de 40 anos atrás
<html>
<head>
<title>Hello</title>
</head>
<body>
Hello 40 anos atras
</body>
</html>
#Organizando o projeto
Estrutura de Diretórios:
.web
.media
.images
.css
.swf
.scripts
.jquery
.web
#Tipos de arquivo
xHtml
.html
.xhtml
css
.css
JavaScript:
documento.js
No fundo tudo é texto !
#Estrutura XHTML (xml)
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-88591"/>
<title>Hello Title</title>
</head>
<body>
<p>
Hello World of Web Standards
</p>
</body>
</html>
#Estrutura XHTML (doctype)
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-88591"/>
<title>Hello Title</title>
</head>
<body>
<p>
Hello World of Web Standards
</p>
</body>
</html>
#Estrutura XHTML (xmlns)
Namespace
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-88591"/>
<title>Hello Title</title>
</head>
<body>
<p>
Hello World of Web Standards
</p>
</body>
</html>
#Estrutura XHTML
(Content-Type e Metas)
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1"/>
<title>Hello Title</title>
</head>
<body>
<p>
Hello World of Web Standards
</p>
</body>
</html>
#Mão na Massa
webstandards.samus.com.br/downloads
Baixe os arquivos de exemplos e instruções da primeira
prática
#Encerramento
- Baixe e leia a apostila oficial, Cap. 1 e Cap. 2