#Aula Nº 1 Introdução webstandards.samus.com.br Vinicius Fiorio Custódio samus@samus.com.br
#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> <tr> <td> <a href= # > </a> </td> </tr> </table> Link1 #CONTAINERS <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-8859-1"/> <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-8859-1"/> <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-8859-1"/> <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