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
