#Aula Nº 1 Introdução webstandards.samus.com.br Vinicius Fiorio Custódio samus@samus.com.br

Tamanho: px

Começar a partir da página:

Download "#Aula Nº 1 Introdução webstandards.samus.com.br Vinicius Fiorio Custódio samus@samus.com.br"

Igor Rubens Deluca Bentes
8 Há anos
Visualizações:

1 #Aula Nº 1 Introdução webstandards.samus.com.br Vinicius Fiorio Custódio samus@samus.com.br

2 #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.

3 #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...)

4 #Marcação / Formatação / Comportamento Importância de uma separação clara das funções de cada linguagem

5 #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>

6 #Formatação (CSS) Como os dados devem ser exibidos Cascading Style Sheets Folhas de Estilo #meu-texto { color: red; }

7 #Comportamento Interação, Eventos, O Que e Como as coisas devem acontecer. $( #meu-texto ).mouseover( function() { $(this).css( color, blue ); } );

8 #JavaScript Lado Cliente / Incompatibilidade / Limitações <script type="text/javascript" charset="iso "> document.getelementbyid("meu-texto").style.color = "red"; </script>

9 #jquery Biblioteca JavaScript que visa a programação em javascript com uma nova Sintaxe (mais compacta) - Suporta elementos da CSS3 - Cross Browser - Ajax - Plugins

10 #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.

11 #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>

12 #Ambiente de Desenvolvimento IDE: NetBeans e Notepad++ Browser Padrão: Firefox Ferramentas: Web Developer Tools Color Cop webstandards.samus.com.br/site/downloads

13 #Hello World of Standards <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <title>hello Title</title> </head> <body> <p> Hello World of Web Standards </p> </body> </html>

14 #Hello World de 40 anos atrás <html> <head> <title>hello</title> </head> <body> Hello 40 anos atras </body> </html>

15 #Organizando o projeto Estrutura de Diretórios:.web.media.images.css.swf.scripts.jquery.web

16 #Tipos de arquivo xhtml.html.xhtml css.css JavaScript: documento.js No fundo tudo é texto!

17 #Estrutura XHTML (xml) <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <title>hello Title</title> </head> <body> <p> Hello World of Web Standards </p> </body> </html>

18 #Estrutura XHTML (doctype) <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <title>hello Title</title> </head> <body> <p> Hello World of Web Standards </p> </body> </html>

19 #Estrutura XHTML (xmlns) Namespace <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <title>hello Title</title> </head> <body> <p> Hello World of Web Standards </p> </body> </html>

20 #Estrutura XHTML (Content-Type e Metas) <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <title>hello Title</title> </head> <body> <p> Hello World of Web Standards </p> </body> </html>

21 #Mão na Massa webstandards.samus.com.br/downloads Baixe os arquivos de exemplos e instruções da primeira prática

22 #Encerramento - Baixe e leia a apostila oficial, Cap. 1 e Cap. 2

Documentos relacionados

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Revisar os conceitos mais importantes da XHTML e do CSS. Desenvolver