Autoração web   aula 7 - padrões web - ticianne ribeiro
Upcoming SlideShare
Loading in...5
×
 

Autoração web aula 7 - padrões web - ticianne ribeiro

on

  • 555 views

 

Statistics

Views

Total Views
555
Views on SlideShare
555
Embed Views
0

Actions

Likes
0
Downloads
12
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Autoração web   aula 7 - padrões web - ticianne ribeiro Autoração web aula 7 - padrões web - ticianne ribeiro Presentation Transcript

  • Sites commascotes
  • http://www.mailchimp.com/
  • http://www.cornerd.com/
  • http://stillpointesanctuary.org/
  • http://www.pointlesscorp.com/
  • http://www.racinelblacklabel.com/
  • http://foreverheavy.com/
  • http://www.cappen.com/
  • http://portfolio.hauntedcathouse.org/
  • http://ndesign-studio.com/
  • http://moozedesign.com/
  • http://www.wordrefuge.com/
  • http://www.bythepond.co.uk/
  • http://www.jontremaine.com
  • Aula 7 – Padrões Web prof. Ticianne Ribeiro 17
  • 18Definição
  • • Desenvolvidos pelo W3CPadrões – Consórcio da indústria WEB internacional • HP, IBM, Microsoft, Opera, Oracle, Sun... – desenvolve especificações abertas para melhorar a interoperabilidade de pr odutos Web.
  • • Mais de 110 padrõesPadrões publicados WEB – Recomendações do W3C – Web Standards – Padrões Web
  • • Web para todosPadrões WEB • Em qualquer dispositivo • Como base de conhecimento • De forma confiável e segura
  • • HTML 4.0 (HTML 5 não)W3C Web • XML 1.0Standards • xHTML 1.0, 1.1 • CSS • DOM 1 • ECMAScript • Acessibilidade 22
  • Uso de padrões Web, W3C. 2009 23
  • 24Breve Histórico
  • • A grande bibliotecaWeb 1.0 digitalAnos 90 – Bom: hiperlinks – Ruim: interatividade 25
  • Web 1.0Anos 90 26
  • • A construção coletivaWeb 2.0 do conhecimento hoje – Bom: colaboratividade – Ruim: excesso de informação inútil 27
  • Web 2.0 hoje 28
  • 29
  • Web 3.0 http://www.youtube.com/watch?v=V5kabPVohGY 30
  • • Web SemânticaWeb 3.0 – Automação, integração e reuso da informação em sistemas diferentes – Não apenas apresentar dados, interpretá-los – Interpretações, inferências e relações 31
  • 32Uso de padrões Web
  • • Antes dos padrões, o processoComo era era linear antes? • O programador só podia trabalhar após receber o layout – Atraso – Alterações no HTML – Correção posterior pelo Web Designer
  • Antes era assim...
  • Com os • Padrões web são baseados em um desenvolvimento de camadaspadrões independentes. Web... • Designer e programador trabalham paralelamente compartilhando apenas o mesmo código xHTML, • Trabalho mais rápido e prático de manter.
  • Com ospadrões Web...
  • • Metodologia:Tableless – eliminar o uso de tabelas na diagramação do site – Separação entre conteúdo e formatação – Ex.: ZenGarden • Objetivo: atingir os padrões Web 37
  • • Camadas são complementares,Desenvolvimento mas não dependentes. em Camadas • Retirando algumas delas o conteúdo e as funcionalidades básicas devem permanecer. • Graceful degradation: – “Your Web site continues to operate even when viewed with less-than- optimal software in which advanced effects don’t work.”
  • Ascamadas
  • • A forma de acessar a internet define Como as quais camadas serão utilizadas.camadas se – Muitos celulares só usam a camada de conteúdo, devido ao tamanho darelacionam? tela. – Alguns usuários alteram a camada de apresentação por limitação na visão. – A camada de comportamento pode ser bloqueada pelo navegador. • Independente de tudo, a camada de conteúdo sempre prevalece.
  • 41Camada de Conteúdo HTML e xHTML
  • • Um dos primeiros problemas que a W3CHTML ou tinha para resolver era como lidar com tantas linguagens de programaçãoxHTML? diferentes. – Flash, – MySQL, – PHP, – ASP.net, – Ajax, J ava, – Jquey.... • Todas precisavam trocar informações para que se entendessem.
  • Tudo • XML é uma linguagem de começou marcação baseada emcom o XML TAGs pensada para ser lida por qualquer máquina. • XML e HTML são parecidos. Vejamos:
  • Compare<?xml version="1.0" encoding="utf-8"?><dados><titulo>Padrões Web</titulo><links tipo="lista"><item link="#">O que é?</item><item link="#">Para que serve?</item></links><imagem src="marca.jpg" /></dados>
  • Compare• XML é uma linguagem • HTML também é de marcação que uma linguagem de permite que as marcação, mas com máquinas troquem tags predefinidas informações em uma específicas para os mesma língua. navegadores.
  • E se • E se são tão parecidos, por que não misturá-los e criar ojuntarmos xHTML? tudo? • Criar-se-ia uma linguagem que todos entenderiam, incluindo os navegadores. • Uma linguagem universal como a web!
  • A camada • Não deve ter nada de "visual". de • Guarda a informação contida no site e identifica elementos comoconteúdo títulos, listas e parágrafos ao navegador através das tags. • Cores, tamanhos, alinhamentos e qualquer coisa relacionada ao layout fica na camada de apresentação.
  • A camada • Cada tag tem uma razão de existir e um significado inerente deconteúdo • Lembre-se de que estamos seguindo um padrão mundial, portanto, fazendo o uso correto das tags estaremos atribuindo significado a cada pedaço do nosso código.
  • Anatomia • Cada elemento do site tem de uma uma tag para especificar sua função. TAG • Por exemplo: – o título mais importante do seu documento: <h1> – um parágrafo é <p> – uma tabela é <table>…
  • É o nome da tag que diz se o "Fecha-se" uma tag repetindo oconteúdo é um título, uma imagem, seu nome entre <> e incluindoum parágrafo, uma lista... uma barra antes. Informações complementares O conteúdo pode ser só provavelmente irrelevantes texto ou outras tags. ao usuário, mas necessárias ao navegador.
  • • Tabelas não devemTabelas definir o layout, somente<table> mostram dados tabulares. • Quem define o layout é o CSS
  • • A utilização correta das tags com o objetivo de ajudar os sistemas deSEO busca é o que chamamos de SEO (Search Engine Optimization), • O GoogleBot — o robozinho do Google que navega a internet inteira e grava tudo o que vê — identifica a relevância de cada tag. Um título, por exemplo, é o que define a sua página, logo, se ele contiver a palavra procurada, essa página provavelmente tem o que se quer.
  • Como, • Para criarmos nossos então, primeiros layouts em escrever tableless é necessárioum código? primeiro escrevermos um código xHTML correto. • Vejamos a estrutura básica de um site:
  • <!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" lang="pt-bt" xml:lang="pt-br"><head> <title>TÍTULO DA PÁGINA</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="keywords" content="PALAVRA-CHAVE 1, PALAVRA-CHAVE 2" /> <meta http-equiv="description" content="DESCRIÇÃO" /></head><body> <h1>TÍTULO DA SEÇÃO</h1> <p>CONTEÚDO</p></body></html>
  • Como, • A 1ª linha informa ao então, navegador quão fiel aos escrever padrões da W3C vocêum código? está sendo: – Strict: Indica que o código escrito é 100% adaptado aos padrões. – Transitional – Código ainda migrando para os padrões. – Frameset – Quando frames são usados na página.
  • 56Cenas dos próximos capítulos
  • • xHTML e suas tagsComingsoon... • Exemplos • Desenvolvimento 57
  • Para dar • O que são Web Standards uma – http://fatorw.com/internet/web-standards/o- que-sao-web-standards/ • Padõres para Web Design eolhada... Aplicações Web – http://www.w3c.br/Padroes/WebDesignAplica coes • Dominando Tableless – http://altabooks.tempsite.ws/capitulos_amostra /tableless.pdf 58
  • Para dar • What are Web Standards and Why should I use them? uma – http://www.webstandards.org/learn/faq/#p213olhada... 3 • O W3C e a Web Semãntica – http://www.w3c.br/palestras/cpqd-campinas- 2009/CPqD20090416.pdf • Graceful Degradation – http://tableless.com.br/graceful-degradation- e-tudo-sobre-acessibilidade 59
  • 60Trabalho 1.2 
  • 1. Ler sobre:O que – Mecanismos de Navegação – Tipos de Navegação (Design defazer: Navegação Web, 2010) 2. Escolher um site – Analise crítica: organização, mecanismo e tipo de navegação e rotulação utilizados. Dizer qual é o tipo, se está adequada/inadequada e por quê. • Formato: .ppt • Duplas! o/ dia: 09/09 61
  • Algo mais? 62