03PadroesWeb3.pdf

7/24/2019 03__Padroes__Web3.pdf

1/25


2/25

Ver so 101/2015 1

TDSDESENVOLVIMENTO DE SISTEMAS WEB

PROF. ALEXANDRE CARLOS


3/25

PADRES WEB(WEB STANDARDS)


4/25

Agenda

Web Standards

Problemas e Resultados

O que so Web Standards

O que W3C

Apresentar comparativos

Estudo de casos e etc.


5/25

Introduo

O objetivo desta aula apresentar Web Standard e as recomendaes dos

rgos regulamentadores.

Abordaremos os padres Web ou Web Standards baseado nas

recomendaes do consrcio W3C.


6/25

No passado...

Na dcada de 80, com a chegada da Web, o objetivo era somente a

publicao e distribuio de textos cientficos e acadmicos, usava-se como

padro:

Localizador Uniforme de Recursos (URL)

Linguagem de Marcao de Hipertexto (HTML)

Protocolo de Transferncia de Hipertexto (HTTP)

Ambas tecnologias gratuitas e de padro aberto.


7/25

Os problemas!

A limitao do HTML:

A web invade o mundo dos negcios; Centenas de sites publicados (Alta produo);

Pssima aderncias aos padres (Baixa qualidade);

Baixa ou nenhuma aderncia aos Browsers:

Guerra dos browsers;

Padres proprietrios;

Baguna gerenalizada;

E para ajudar a alta produtividade e a baguna:

Editores HTML WYSIWYG

What you see is what you get ou O que voc v o que voc tem.


8/25

E o resultado foi...

UMA BAGUNA TOTAL:

Emaranhado de TAGs; Tabelas, formataes, textos, scripts e etc. Tudo junto misturado;

Cdigo incompreensvel;

Pssima organizao;

Falta ou nenhum padro estabelecido;

Dificuldade para manutenoe desenvolvimento.


9/25

O que so os Web Standards

Web Standards so normas, diretrizes, recomendaes, artigos, notas e

tutoriais;

So documentos de carter tcnico produzidos pela W3C;

O objetivo destes documentos orientar fabricantes e desenvolvedores

para a criao de uma Web acessvel a todos.


10/25

O que o W3C

O Consrcio World Wide Web (W3C) um con jun to in ternacional no qual

org anizaes fil iadas, equ ipes em tempo in tegral e o pbli co trabalh amjun tos para desenvo lver padres para a Web. A m isso do W3C :

Conduzir a World Wide Web para que atinja todo seu potencial,

desenvolvendo protocolos e diretrizes que garantam seu crescimento a

longo prazo. Desde 1994, qu ando cri ado por Tim Berners -Lee, ho je Diretor do W3C, j

publi caram m ais de 100 padres denom inados recom endaes do W3C.

HTML

CSS

XML

WSDL e etc.

(http:/ /www.w3.org/)


11/25

Estrutura da tecnologia W3C


12/25

Mudando o conceito

O novo conceito indica que devemos dividir a Web em 3 camadas...

Camadas in depend entes , po rm in ter-relacio nadas, ou seja, um a

camada c om pletar a out ra.

Java Script

CSS

HTML

Comportamento

Apresentao

Estrutura dos Dados (Contedo)


13/25

Reaproveitamento de cdigo

Em programao muita repetio de cdigo significaque algo no est sendo feito da melhor maneirapossvel. Uma construo modular, com CSS eJavaScript externos, permite que muito cdigo sejareaproveitado.

Por que separar o desenvolvimento em camadas?

Organizao da equipeA separao das camadas facilita a diviso de tarefas. Mais de uma pessoatrabalhando em paralelo no mesmo projeto agiliza o processo, desde que aao de um no impacte negativamente o que foi desenvolvido pelos outros.

Limpeza do Cdigo

Um cdigo limpo facilita a leitura e manuteno. Alm disso um HTMLsemntico e limpo bom para os sites de busca, pois os robs interpretarode uma forma correta e lhe traro bom posicionamento.


14/25

Validao de cdigo XHTML


15/25

Web com padro X Web sem padro

Sites sem padres:

Extenso da Mdia Impressa;

Layout baseado em Tabelas;

Contedo, Apresentao e Comportamento aninhados ;

Cdigo Incompreensvel.

Sites com padres:

Acessvel de qualquer dispositivo;

Layout baseado em CSS;

Separao entre Contedo, Apresentao e Comportamento;

Cdigo Acessvel.


16/25

Comparando um com outro

Antigamente..

Item 1

Item 2

Item 3

Item 4


17/25

Comparando um com outro

Hoje..

Item 1

Item 2

Item 3

Item 4


18/25

Cdigo Semntico

Segundo o dicionrio Aurlio,

se.mn.ti.casf (gr semantik, de sema) 1 Ling Estudo da evoluo do sentido das

palavras atravs do tempo e do espao;

Quando a marcao utilizada para o que ela realmente foi criada, estamos

construindo um Cdigo Semntico.


19/25

Cdigo Semntico

Tabelas somente para dados tabulares

Produto

Preo Unitrio

Quantidade em estoque

HD SATA 80 GB

R$ 85,00

35

Pen Drive 2GB

R$15,00

150


20/25

Cdigo Semntico

Titulo utilizar as marcaes corretas

Ttulo da pgina

Marcaes para Listas Ordenadas e Listas No Ordenadas

Lista Ordenada 1Lista Ordenada 2

Lista Ordenada 3

Lista No Ordenada 1Lista No Ordenada 2

Lista No Ordenada 3


21/25

Vantagens

Algumas delas:

Carregamento mais rpido;

Menores custos com hospedagem;

Melhor Consistncia Visual;

Redesign mais barato e eficinte;

Maior acessibilidade e interoperabilidade;

Pginas com menos cdigo;

Reduo de largura de banda; Melhores resultados nos Mecanismos de Buscas,


22/25

Sistemas de buscas

Relevncia das pginas um fator considerado importante nos sistemas de

buscas para ordenar os resultados.

Usar corretamente as TAGs XHTML aumenta a chance do seu web site sermelhor posicionado nos sistemas de buscas.

SEO - Otim izao p ara moto res de bu sc a:http://pt.wikipedia.org/wiki/Otimiza%C3%A7%C3%A3o_para_motores_de_busca


23/25

Acessibilidade

A Camada de Contedo (HTML) bem estruturada e ordenada, possibilita o

acesso atravs de Leitores de Tela.

Criando Camadas de Apresentao separadas, podemos fornecer acesso

ao site atravs de TVs, Celulares, Tablets e etc..

Pginas mais leves facilitam o acesso de conexes mais lentas (Dial Up).


24/25

Preparados?

Durante o primeiro semestretrabalharemos com:

HTML;

CSS;

Javascript;

Separao em camadas;

Validao de cdigo;

Semntica e acessibilidade.


25/25

Copy right 2015 Prof. Alexand re Carlos de Jesus

Todo s d ireitos reserv ados. Reprod uo ou div ulg ao to tal ou p arcial dest e do cumen to expressamente probido s em o con sentimento form al, po r escri to, do Pro fessor (autor).

03PadroesWeb3.pdf

Documents

Transcript of 03PadroesWeb3.pdf

03__Padroes__Web3.pdf

Documents

Transcript of 03__Padroes__Web3.pdf

03PadroesWeb3.pdf

Transcript of 03PadroesWeb3.pdf