Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto

Tamanho: px

Começar a partir da página:

Download "Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com"

Ayrton Figueiredo Campelo
8 Há anos
Visualizações:

1 Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto

2 No início A Web é criada em 1989, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos. Localizador Uniforme de Recursos (URL) Linguagem de Marcação de Hipertexto (HTML) Protocolo de Transferência de Hipertexto (HTTP) Tecnologia aberta e gratuita 2/24

Localizador Uniforme de Recursos (URL) Linguagem de Marcação de

3 Guerra dos Browsers Aproximadamente entre 1995 e 1999 houve a chamada Guerra dos Browsers, onde a Netscape (e seu Browsers de mesmo nome) e a Microsoft (com o seu Internet Explorer) disputavam o mercado de navegadores. Além de não darem suporte aos padrões do recém criado World Wide Web Consortium (W3C), ainda criavam seus próprios padrões, aumentando a bagunça. 3/24

4 Editores WYSIWYG "O que você vê é o que você tem", ou em inglês "What You See Is What You Get" (WYSIWYG) são programas que lhe permitem ter a visualização final de um documento, enquanto o mesmo ainda é editado. Editores HTML WYSIWYG como Go Live, Front Page e Dreamweaver surgiram por volta de 1996, e são conhecidos por gerar um código sujo e muito maior que o necessário. 4/24

5 O que são os Padrões Web? Padrões Web são um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C. É destinado a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos. 5/24

artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C.

6 Consórcio World Wide Web (W3C) Fundada por Tim Berners-Lee em 1994 Desenvolve Recomendações abertas, até agora mais de 80 padrões... Engajado em educação, expansão e desenvolvimento de orientações Um fórum neutro para construir consenso em torno de padrões web Elaborou especificações e diretrizes para garantir que as tecnologias web funcionassem juntas 6/24

.. Engajado em educação, expansão e desenvolvimento de orientações Um fórum neutro para

7 Web Standards Project O Web Standards Project (WaSP) é um grupo formado em 1998 com o objetivo de promover os Padrões Web, assegurando desse modo um acesso simples e com menos custos para todos. Vem encorajando e persuadindo os fabricantes de Browsers a fornecerem suporte aos padrões, como o XHTML, CSS e ECMAScript (a versão standard do JavaScript). 7/24

8 Web dividida em três camadas: Mudança de Conceito Conteúdo (XHTML) Apresentação (CSS) Comportamento (Javascript) Devem ser desenvolvidas de forma independente, porém, uma complementa a outra 8/24

9 Conteúdo (XHTML) Mudança de Conceito contém dados de texto formatados de acordo com o seu significado estrutural: título, título secundário, parágrafo, lista numerada, lista não numerada, lista de definição, etc. Apresentação (CSS) As linguagens de apresentação (CSS) formatam a página Web, controlando a tipografia, o posicionamento, a cor. Comportamento (Javascript) Um modelo de objeto padrão (DOM) trabalha com CSS, XHTML e ECMAScript, a versão padrão do JavaScript, permitindo que você crie comportamentos e efeitos sofisticados que funcionem através de várias plataformas e navegadores. 9/24

Apresentação (CSS) As linguagens de apresentação (CSS) formatam a página Web, controlando a tipografia, o posicionamento, a cor.

10 Divisão em Camadas Javascript CSS CSS 10/24

11 Mudança de Conceito Sem padrões Extensão da Mídia Impressa Layout baseado em Tabelas Com Padrões Acessível de qualquer dispositivo Layout baseado em CSS Conteúdo, Apresentação e Comportamento aninhados Separação entre Conteúdo, Apresentação e Comportamento Código Incompreensível Código Acessível 11/24

CSS Conteúdo, Apresentação e Comportamento aninhados Separação entre

12 Um menu a moda antiga <TABLE CELLSPACING=1 CELLPADDING=1 BORDER=0 WIDTH=400> <TBODY> <TR> <TD VALIGN=MIDDLE ALIGN=CENTER BGCOLOR=# WIDTH=100> <FONT FACE=VERDANA SIZE=1><B><A HREF=item1.html>Item 1</A></B></FONT> </TD> <TD VALIGN=MIDDLE ALIGN=CENTER BGCOLOR=# WIDTH=100> <FONT FACE=VERDANA SIZE=1><B><A HREF=item2.html>Item 2</A></B></FONT> </TD> <TD VALIGN=MIDDLE ALIGN=CENTER BGCOLOR=# WIDTH=100> <FONT FACE=VERDANA SIZE=1><B><A HREF=item3.html>Item 3</A></B></FONT> </TD> <TD VALIGN=MIDDLE ALIGN=CENTER BGCOLOR=# WIDTH=100> <FONT FACE=VERDANA SIZE=1><B><A HREF=item4.html>Item 4</A></B></FONT> </TD> </TR> </TBODY> </TABLE> 12/24

html>Item 1</A></B></FONT> </TD> <TD VALIGN=MIDDLE ALIGN=CENTER BGCOLOR=#006600 WIDTH=100> <FONT FACE=VERDANA SIZE=1><B><A HREF=item2.

13 Um menu seguindo os padrões <ul> <li><a href= item1.html title= Página 1 >Item 1</a></li> <li><a href= item2.html title= Página 2 >Item 2</a></li> <li><a href= item3.html title= Página 3 >Item 3</a></li> <li><a href= item4.html title= Página 4 >Item 4</a></li> </ul> 13/24

14 Vantagens da adoção dos padrões Carregamento mais rápido Menores custos com hospedagem Melhor Consistência Visual Melhores resultados nos Mecanismos de Buscas Maior acessibilidade e interoperabilidade 14/24

Consistência Visual Melhores resultados nos

15 Carregamento mais rápido Vantagens da adoção dos padrões Páginas com menos código, consequentemente com menos Kbytes Estando a Apresentação (CSS) e o Comportamento (Javascript) em arquivos separados, eles serão carregados apenas uma vez. A cada página acessada, esses arquivos já estarão no Cachê do Navegador, e não precisarão ser carregados novamente. Menores custos de hospedagem Páginas com menos Kbytes, além de mais leves para o usuário, ocupam menor espaço no servidor, e com isso se reduz a Largura de Banda utilizada 15/24

A cada página acessada, esses arquivos já estarão no Cachê do Navegador, e não precisarão ser carregados novamente.

16 Vantagens da adoção dos padrões Melhores resultados nas buscas Um dos fatores considerados pelos Mecanismos de Busca para a ordenação dos resultados é a Relevância das páginas encontradas com relação as palavras-chave buscadas Usar corretamente as marcações, como por exemplo <h1></h1> até <h6></h6> para títulos e <strong></strong> para Ênfase Forte, pode aumentar a relevância dos seus documentos na Web e melhorar o posicionamento nas buscas. 16/24

buscadas Usar corretamente as marcações, como por exemplo <h1></h1> até <h6></h6> para títulos e

17 HTML: HyperText Markup Language Criada por Tim Berners-Lee, baseada no SGML (Standard Generalized Markup Language) Primeira especificação formal publicada em 1993, como uma aplicação formal para SGML Desde 1996 tem suas especificações mantidas pela W3C Apesar de ser uma Linguagem de Marcação, possui algumas Tags para formatação Não possui uma sintaxe rigorosa. O HTML sofreu várias mudanças em suas diferentes versões, com o objetivo de estender a linguagem para que pudesse acompanhar a evolução da Web e das tecnologias nela inseridas. A última versão especificada foi o HTML 4.1 Existe atualmente um grupo de trabalho desenvolvendo o HTML 5 17/24

formatação Não possui uma sintaxe rigorosa.

18 XML: extensible Markup Language Criada para suprir a falta de flexibilidade do HTML Separação do conteúdo da formatação Simplicidade e Legibilidade, para humanos e computadores Interligação de bancos de dados distintos Concentração na estrutura da informação O desenvolvedor tem a possibilidade de criar suas próprias marcações Isso dá a ele flexibilidade e liberdade na hora da implementação do documento Por outro lado, fica a cargo do desenvolvedor a tarefa de definir o significado dos elementos que ele utiliza (através de DTDs ou Schemas) 18/24

desenvolvedor tem a possibilidade de criar suas próprias marcações Isso dá a ele flexibilidade e liberdade na hora da implementação do

19 XML: extensible Markup Language Exemplo: <?xml version="1.0" encoding="utf-8"?> <agenda-telefonica> <contato tipo= pessoa > <nome>joão Aurélio</nome> <endereco>rua XV de Novembro, 1234</endereco> <telefone> </telefone> </contato> <contato tipo= pessoa > <nome>ana Maria</nome> <endereco>avenida São João, 111</endereco> <telefone> </telefone> </contato> <agenda-telefonica> 19/24

Novembro, 1234</endereco> <telefone>1234-5678</telefone> </contato> <contato tipo= pessoa >

20 XHTML: extensible HyperText Markup Language Uma reformulação da linguagem de marcação HTML baseada em XML Pode ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as marcações possuem sentido semântico para as máquinas 20/24

por qualquer dispositivo, independentemente da plataforma

21 HTML x XHTML Principais Diferenças As marcações devem ser escritas em letras minúsculas <p>meu texto vem aqui!</p> As marcações devem estar corretamente aninhadas <p>meu texto vem <strong>aqui!</strong></p> Marcações de fechamento são obrigatórias <p>um parágrafo.</p><p>outro parágrafo.</p> Elementos orfãos devem ser fechados <br /> <img src="imagem.gif" alt="minhaimagem " /> 21/24

22 HTML x XHTML Principais Diferenças Os documentos devem ser bem formados Todos os elementos XHTML devem estar corretamente aninhados seguindo a estrutura básica conforme abaixo: <html> <head>... </head> <body>... </body> </html> 22/24

23 CSS: Cascading Style Sheets É uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento. Pode-se definir apresentações especificas para diferentes dispositivos (Tvs, Celulares e PDAs, Impressoras, etc) apenas criando folhas de estilo alternativas. 23/24

24 Referências Palestra Web Standards - Eduardo Santos. Disponível em Acessado em 27/02/2010. Notas de aula Prof. José Marcos Barbosa da Silveira. Disponível em Acessado em 25/01/ /24

Documentos relacionados

XHTML 1.0 DTDs e Validação

XHTML 1.0 DTDs e Validação PRnet/2012 Ferramentas para Web Design 1 HTML 4.0 X XHTML 1.0 Quais são os três principais componentes ou instrumentos mais utilizados na internet? PRnet/2012 Ferramentas para