SOA não é e também não promove uma nova tecnologia. Também é equivocada sua apresentação como uma nova “metodologia”. Trata-se de um conceito ou, como colocado anteriormente, uma Estratégia de TI. A principal motivação para sua implementação é a realização do tão sonhado (e raramente concretizado) Alinhamento Estratégico de TI com o Negócio. Entende-se que tal alinhamento acontece de fato quando [2]:

• TI agrega real valor ao plano de negócios;
• Não resiste às mudanças;
• Combate a resistência às mudanças; e
• É planejado.

Os três primeiros itens da lista são traduzidos em considerável ganho de Agilidade. SOA promete a criação de uma estrutura que reproduz fielmente, em mapeamento um-para-um, os processos e atividades de negócios. Tamanha aproximação deve gerar uma arquitetura flexível, que favorece as mudanças. Mas os ganhos possibilitados pela implementação de uma Arquitetura Orientada a Serviços não ocorrem por acaso ou de forma pontual. Uma implementação SOA é uma iniciativa de longo prazo – é a execução de um bem elaborado Plano Estratégico.

SOA é uma arquitetura de software. Uma arquitetura de software é “um conjunto de definições que descreve componentes de software e associa a funcionalidade do sistema a tais componentes. Descreve a estrutura técnica, restrições e características dos componentes e das interfaces entre eles. A arquitetura é uma ‘planta baixa’ para o sistema e um plano de alto nível para sua construção” [3].

Serviços em uma SOA são a representação direta de entidades, tarefas, atividades ou processos de negócio. Por representação direta entende-se a paridade em sua granularidade e o uso de um vocabulário comum, que deve ser a terminologia padrão do negócio. São características-chave de uma Arquitetura Orientada a Serviços:

• Acoplamento fraco dos serviços;
• Independência de tecnologias e protocolos;
• Uso irrestrito de padrões; e
• Incentivo à reutilização de ativos.

SOA é composta de quatro elementos principais: Frontends de Aplicações, Serviços, um Repositório de Serviços e um Mecanismo de Execução e Comunicação (Bus) para os serviços.

Os Frontends de Aplicações representam a “ponta do iceberg” de uma SOA. Eles são a interface dos serviços para os usuários finais. Portanto são de sua responsabilidade a iniciação e o controle da execução dos Serviços.

Os Serviços são componentes de software que representam um processo, entidade, atividade ou tarefa de negócio. É importante salientar que são componentes de alto nível, diferentes daqueles existentes em plataformas como o J2EE e o Microsoft .NET, que são muito granulares e mais orientados a tecnologia, não ao negócio. Existem quatro tipos de Serviços:

• Básicos: que representam os elementos básicos de um processo de negócio, como Entidades e Tarefas básicas de Negócios;
• Intermediários: são o único tipo de Serviço mais orientados a tecnologia em uma SOA. Fornecem pontes, conversores ou funcionalidades adicionais aos demais serviços;
• Processos: são os serviços que representam de forma direta um processo ou atividade de negócio, do início ao fim.
• Públicos: extensão aos serviços do tipo Processo que possibilita sua exposição para clientes (usuários) que estejam fora das fronteiras da organização.

Todo serviço, independente de seu tipo, é sempre composto por três partes principais, como ilustrado na Figura 1 acima. A primeira parte é um Contrato, um acordo que é fechado entre os consumidores de um serviço e seus provedores. Este documento explica os propósitos do serviço, contexto, regras de utilização, restrições, níveis de serviço esperados, além de apresentar uma definição formal da interface do serviço.

Interface esta que é implementada em separado, sendo o segundo elemento de construção de um serviço. Trata-se do único meio de comunicação com um serviço, seja seu cliente um frontend de uma aplicação ou outro serviço. A terceira e última parte de um Serviço é sua Implementação propriamente dita, através da realização da Lógica do Negócio e acesso e manutenção de seus Dados, de forma a atender todos os objetivos fixados no Contrato.

O Repositório armazena todos os Contratos dos Serviços disponíveis, o que o torna o ponto de partida para utilização destes. Além dos Contratos, o Repositório pode armazenar informações adicionais e mais específicas acerca dos serviços, como localização física, restrições de uso e segurança etc. Apesar de ser apresentado por alguns autores como um elemento opcional em uma SOA, o Repositório pode ser fator crítico de sucesso em grandes implementações, principalmente naquelas que envolverem a disponibilização de serviços do tipo Público.

Por fim temos o Mecanismo de Execução e Comunicação para os Serviços, ou simplesmente Bus, que interconecta todos os participantes de uma SOA, abstraindo a complexidade técnica que existe nas camadas inferiores. Um Bus pode ser constituído de várias tecnologias e/ou produtos, dependendo da infra-estrutura existente e dos requerimentos de distribuição dos serviços

Referência: FINITO

Utilize texto alternativo

Nas imagens, utilize o atributo alt=”….” do elemento <img /> para dar uma descrição textual à imagem.

<img src="images/fuscaPreto.jpg" alt="Foto de um fusca preto"  title="Foto de um fusca preto" />

Enquanto a imagem está sendo carregada ou quando por algum motivo a imagem não é exibida, o texto alternativo alt=”Foto de um fusca preto” é exibido.

O texto alternativo da imagem somente estará acessível a softwares de leitura de tela “Virtual Vision por exemplo” durante a leitura da página, pois uma imagem sem hiperlink não receberá foco através da navegação com a tecla TAB.

Ao mover o mouse por cima da imagem, o Virtual Vision irá ler o conteúdo do atributo alt=”Foto de um fusca preto”, mas lembre-se: o mouse é um dispositivo apontador, quase nunca utilizado.

Descrição textual da imagem “d-link”

Para imagens mais complexas é aconselhável utilizar uma técnica chamada d-link, que consiste em criar uma pagina HTML para descrever a imagem em questão.

A técnica é colocar um link com a letra “D” ao lado da imagem, para quando a navegação por TAB encontrar o link e usuário poder chegar até a página com a descrição detalhada da imagem.

Para não mudar seu projeto visual, é possível esconder visualmente o link com a letra “D” e o desenvolvedor poderá utilizar várias maneiras para esconder visualmente este link, com CSS é uma boa uma alternativa.

<!-- É uma opação colocar a link direto na imagem -->
<a href="descricaoimagemcriancanap.html"  title="ir a página da descrição textual da imagem, crianças brincando na praia">
     <img src="images/criancasNaP.jpg" alt="Crianças brincando na praia" />
</a>

<!--  A técnica D-link, este link é para ficar ao lado da imagem -->
<a href="descricaoimagemcriancanap.html" title="ir a página da descrição textual da imagem, crianças brincando na praia">
     [d]
</a> 

Como a curiosidade é da natureza do homem e já que o deficiente visual não pode apreciar o conteúdo da imagem visualmente, seria interessante prover as imagens de um texto descritivo.
Um recurso utilizado é colocar, após a imagem, um link com a letra “d”, conhecido como “d-link”, o qual fará referência a uma página html com a descrição textual da imagem. Como outros links, este receberá o foco após o usuário pressionar a tecla TAB na imagem.
Para quem não deseja prejudicar o design da página, com uma letra “d” após as imagens, utilize o recurso de d-link invisível, ou seja, coloque uma pequena imagem transparente no lugar da letra “d”.

Este post foi inspirado na cartilha de acessibilidade e pode ser encontrado no site Lupa Digital, e a citação acima são palavras do autor e pode ser lido em: Lupa digital no item 7.2.

Para fazer com que os links fiquem acessíveis “href acessível” para leitores de telas e usuários que usam o teclado para navegar na internet. É bem simples e vou descrever algumas técnicas, tentando ser mais claro e objetivo possível.

Adicionando o Atributo “title”

O atributo “title” é muito importante, é ele que vai dar a descrição do link e informar para onde ele vai levar o seu usuário.

<a href="acessibilidade.html" title="Ir a página de acessibilidade">
     Acessibilidade
</a>

Facilite a vida dos seus usuários e escreva com um texto conciso, que faça sentido e que tenha relevância.

Adicione Teclas de Atalho

É uma boa idéia usar teclas de atalho na navegação principal, com isso você vai facilitar a vida de muita gente que tem dificuldade motora e não usa o mouse para acessar o seu conteúdo.

<a href="acessibilidade.html" accesskey="a">Acessibilidade</a>

Pular para o Conteúdo

Permita que o usuário possa ir direto ao conteúdo desejado.

Utilize um link com o atributo accesskey no topo do documento, faça com que ele seja o primeiro link do seu site. Com isso você evitará que o usuário percorra o site todo até chegar ao conteúdo desejado.

Caso você não queira que esse link apareça no topo, você poderá ocultar com CSS.

<div id="topo">
    <h1>titulo do site</h1> <!-- "essa área é muito importante p/ SEO mas é assunto para outro post" -->
    <a href="#conteudo" accesskey="p" title="ir ao conteúdo">Pular para o conteúdo</a>
</div>
<div id="menu">
    <!-- os intens do menu -->
</div>
<div id="conteudo">
    <!-- aqui é onde o usuário chegará, o conteúdo desejado -->
</div>

não que você vá colocar teclas de atalho em todos os links do seu site, mas pense nisso com carinho!

Navegando Através de Tab

Muitos usuários não podem ou não querem usar dispositivos como mouse para navegar em seu site.

Eles utilizam o teclado pra percorrer os links, geralmente usando a tecla “tab”.

Por este motivo seu código deve estar estruturado semanticamente, principalmente a estrutura de links, eles devem estar em uma ordem lógica de navegação, caso esteja, não é necessário usar o atributo “tabindex”.

Mas caso não esteja ou você queira conduzir seus usuários, use o atributo “tabindex” que permite definir a ordem de navegação dos links em seu sistema web.

<ul>
    <li><a href="#" tabindex="3">Link 1</a></li>
    <li><a href="#" tabindex="1">Link 2</a></li>
    <li><a href="#" tabindex="2">Link 3</a></li>
    <li><a href="#" tabindex="4">Link 4</a></li>
</ul>

Conduza seus usuários, dê a eles o que eles realmente precisam e querem ler

Soluções inclusivas, em minha opinião são vitais para profissionais não só da web.

Entre tanto o que se vê por ai não é exatamente isso, mas se você está lendo este texto é porque você está há vários passos na frente de outros profissionais, e está com o pensamento certo e inclusivo.

Esta solução de menu acessível é muito fácil e funciona bem em vários navegadores como no IE6 + e em todos os browsers que dão suporte a web Standards. Funciona com teclado e mouse, e se o JavaScript estiver desabilitado dá pra acessar todos os links, mas os subitens não aparecem visualmente.

Veja o menu funcionando e vamos aos detalhes:

XHTML

É o documento de marcação onde vamos criar os nós do menu.

Vamos criar uma lista não ordenada “ul” e seus respectivos filhos e adicionar id e classes para podermos manipular alguns elementos.

<!-- As tags como o DOCTYPE, head, body e demais não vou descrever aqui para o post ser mais objetivo -->
<ul id="nav">
	<li><a href="index.html">Home</a></li>
	<li class="submenu"><a href="#" class="bullet">Portfólio</a>
		<ul>
			<li><a href="sites.html">Sites</a></li>
			<li class="submenu"><a href="#" class="bullet">Interfaces</a>
				<ul>
					<li><a href="graficas.html">Gráficas</a></li>
					<li><a href="digitais.html">Digitais</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="quemsomos.html">Quem Somos</a></li>
	<li><a href="contato.html">Contato</a></li>
</ul>

CSS

É o documento de apresentação, onde vamos posicionar e dar beleza ao nosso menu.

Aqui é onde você provavelmente ira mexer mais, para poder customizar seu menu acessível.

#nav, #nav ul {
	width: 70em;
	list-style: none;
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0;
 }
#nav li {
	float: left;
 }
#nav a {
	display: block;
	width: 10em;
	height: 2em;
	line-height: 2;
	text-align: center;
	text-decoration: none;
	background-color: #69c; /* IE precisa desta declaração */
	color: #fff;
	border: 1px solid #ccc;
	border-width: 0 1px 1px
 }
#nav a:hover {
	text-decoration: none;
	background: #c7daec;
	color:#69c;
 }
#nav a.bullet {
	background:#69c url(bullet.gif) no-repeat right;
 }
#nav a.bullet:hover {
	background: #c7daec url(bullet-over.gif) no-repeat right;
 }
#nav li ul {
	position: absolute;
	left: -1000em;
	width: 10em;
	margin: 0;
 }
#nav ul ul {
	margin: -2.1em 0 0 10.1em;
 }
#nav li:hover ul ul, #nav li.over ul ul {
	left: -1000em;
 }
#nav li:hover ul, #nav li li:hover ul, #nav li.over ul, #nav li li.over ul {
	left: auto;
}

JavaScript

O arquivo JavaScript é responsável pela ação.

É neste documento que vamos verificar os links e os subitens da lista e vamos fazer com que ele se encarregue em abrir os subitens.

<script type="text/javascript">

var dropdown_intervalId;
var dropdown_ulId = (!dropdown_ulId) ? 'nav' : dropdown_ulId;
var dropdown_delay = (!dropdown_delay) ? 0 : dropdown_delay;

function dropdown_init()
{
 try
 {
  var as = document.getElementById(dropdown_ulId).getElementsByTagName('a');

  for (var a = 0; a < as.length; a++)
  {
   as[a].onfocus = function() { dropdown_expand(this) }
   as[a].onmouseover = function() { dropdown_expand(this) }
   as[a].onblur = function() { dropdown_colapse(dropdown_delay) }
   as[a].onmouseout = function() { dropdown_colapse(dropdown_delay) }
  }

  dropdown_colapse(0);

 } catch(e){}

}

function dropdown_expand(caller)
{
 try
 {
  clearInterval(dropdown_intervalId);

  var uls = caller.parentNode.parentNode.getElementsByTagName('ul');

  for (var ul = 0; ul < uls.length; ul++)
   uls[ul].style.left = "-1000em";

  caller.parentNode.getElementsByTagName('ul')[0].style.left = "auto";

 } catch(e){}

}

function dropdown_colapse(milliseconds)
{
 try
 {
  clearInterval(dropdown_intervalId);

  dropdown_intervalId = setInterval(function()
  {
   var uls = document.getElementById(dropdown_ulId).getElementsByTagName('ul');

   for (var ul = 0; ul < uls.length; ul++)
    uls[ul].style.left = "-1000em";

   clearInterval(dropdown_intervalId);

  }, milliseconds, null);

 } catch(e){}

}

window.onload = dropdown_init;
</script>

Esse menu foi tema de debate na lista Acesso Digital, e esse post foi baseado na resposta do Gil Porta membro da lista, e o menu foi desenvolvido por Alexandre Junqueira.

Tim Berners-Lee disse que não imaginava o incômodo que teclar ‘//’ geraria.

O homem que inventou a World Wide Web (a WWW, que é a base da internet) pediu desculpas por ter colocado duas barras na frente dos endereços eletrônicos.

O cientista britânico Tim Berners-Lee, que criou a WWW há quase 30 anos, disse que o uso dos caracteres “//” após o “http:” é desnecessário.

Segundo o jornal britânico “The Times”, Berners-Lee disse em uma palestra em Washington que poderia ter criado os endereços sem as duas barras.

“Parecia uma boa ideia (usar o WWW) na época”, disse.

O cientista disse que, quando criou a world wide web, ele não imaginava que as barras causariam tanta irritação entre os usuários.

No entanto, ele brincou que ninguém calculou ainda a quantidade de terapeutas que conseguiram emprego para tratar pessoas com lesões de esforço repetitivo, de tanto usar a tecla w nos teclados de computador.

Na entrevista ao “The Times”, ele admite inclusive que o uso das barras é nocivo ao meio ambiente, já que desperdiça energia, papel e tinta.

Tim é diretor do World Wide Web Consortium, que trabalha com o governo britânico para aumentar o acesso das informações governamentais ao público.
fonte: G1

Artistas e designers criam composições visuais usando a mesma base de conhecimento, mas as suas razões para fazê-lo são completamente diferentes.

Alguns designers se consideram artistas, mas poucos artistas se consideram designers.

E isso é exatamente a diferença entre arte e design?

Neste post, vamos analisar e comparar alguns dos princípios fundamentais de cada.

Este é um assunto que as pessoas têm opiniões fortes, e Este post não é um guia definitivo, mas sim o ponto de partida para uma conversa, por isso vamos ter a mente aberta!

Arte é inspiração, Design é motivo

Talvez a diferença mais fundamental entre arte e design, que todos podemos concordar é sobre seus propósitos. Normalmente, o processo de criação de uma obra de arte começa do nada, uma tela em branco.  Uma obra de arte resulta de uma visão ou opinião ou sentimentos que o artista tem dentro de si.

Eles criam a arte de compartilhar esses sentimentos com os outros, para permitir que os telespectadores se relacionar com ela, aprender com ele ou ser inspirado por ela.

A mais famosa (e bem sucedida) das obras de arte hoje são aquelas que estabelecem o forte vínculo emocional entre o artista eo seu público.

Em contrapartida, quando um designer pretende criar uma nova peça, elas quase sempre têm um ponto fixo de partida, se uma mensagem, uma imagem, uma idéia ou uma ação.

O trabalho do designer não é inventar algo novo, mas de comunicar algo que já existe, para uma finalidade.

Esse objectivo é quase sempre para motivar o público a fazer alguma coisa: comprar um produto, usar um serviço, visitar o local, saber algumas informações.

Os projetos mais bem sucedidos são aqueles que transmite eficazmente sua mensagem e motiva os consumidores a realizar uma tarefa.

Arte é interpretada, Design é compreendido

Outra diferença entre arte e design é a forma como as mensagens de cada um são interpretados por seus respectivos públicos.

Apesar de um artista que se propor a transmitir um ponto de vista ou a emoção,  que não quer dizer que o ponto de vista ou a emoção tenha um significado único.

Arte conecta com pessoas de maneiras diferentes, porque é interpretada de forma diferente.

Mona Lisa de Da Vinci tem sido interpretado e discutido por muitos anos. Apenas porque ela está sorrindo? Os cientistas dizem que é uma ilusão criada por sua visão periférica. Românticos dizem que ela está apaixonada. Céticos dizem que não há motivo.

Design é o oposto. Muitos dirão que, se um projeto pode ser “interpretado” em tudo, ele falhou em seu propósito.

O objetivo fundamental do projeto é o de comunicar uma mensagem e motivar o espectador a fazer alguma coisa.

Se o design transmite uma mensagem diferente do pretendido e seu espectador vai e faz alguma coisa com base na mensagem “mensagem incorreta”, então ela não cumpriu a sua obrigação.

Uma boa peça de design é quando a mensagem do designer é exatamente entendida pelo espectador.

Arte é gosto, Design é opinião

A arte é julgada pela opinião e a opinião é regido por gosto.

Para um entusiasta da arte moderna visão de futuro, um pedaço Tracey Emin “My Bed”, que foi indicado para o Prêmio Turner em 1999, pode ser a altura de expressão artística.

Para um seguidor da arte mais tradicional, pode ser um insulto para o meio.

Design tem um elemento de gosto, mas a diferença entre bom e mau design é essencialmente uma questão de opinião.

Uma boa peça de design pode ser bem sucedida sem ser a seu gosto.

Se ela cumpre seu objetivo de ser compreendida e motiva as pessoas a fazer algo, então se é bom ou não é uma questão de opinião. Poderíamos continuar a discutir este ponto específico, mas espero que o princípio subjacente é clara.

Arte é talento, Design é habilidade

E sobre as habilidades do Criador?

Mais frequentemente do que não, um artista tem a habilidades natural. Claro, desde tenra idade, o artista cresce desenhando, pintando, desenvolvendo suas habilidades.

Mas o verdadeiro valor de um artista é no talento (ou a habilidade natural) que nascemos. Há alguma sobreposição aqui: bons artistas certamente têm habilidade, mas sem habilidade artística talento é, provavelmente, inútil.

Design, porém, é realmente uma habilidade que é ensinado e aprendido. Você não tem que ser um grande artista para ser um grande designer, você só tem que ser capaz de alcançar os objetivos do projeto.  Alguns dos estilistas mais respeitados no mundo são mais conhecidos por seu estilo minimalista. Eles não usam muita cor ou textura, mas eles prestam muita atenção ao tamanho, posicionamento e espaçamento, que pode ser aprendido sem talento.

Arte Envia uma mensagem diferente para Todos, Design envia a mesma mensagem para todos

Isso realmente cai sob o segundo ponto,  sobre a interpretação e compreensão. Mas se você for recordar de apenas uma coisa deste artigo, lembrese deste ponto.

Muitos designers consideram-se artistas, porque criar algo visualmente atraente, algo que seria orgulho para as pessoas se pendurar em uma parede e admirar.

Mas uma composição visual destina-se a realizar uma tarefa específica ou comunicar uma mensagem especial, não importa o quão bonito, não é arte.

É uma forma de comunicação, apenas uma janela para a mensagem que ele contém.

Poucos artistas se autodenominam designers, porque eles parecem entender melhor a diferença. Artistas não criam os seus trabalhos para vender um produto ou promover um serviço. Criam unicamente como um meio de auto-expressão, de modo que possa ser visto e apreciado por outros. A mensagem, se é que podemos chamar assim, não é um fato, mas um sentimento.

Dependendo de como você olha para ele, a diferença entre a arte eo design pode ser clara ou turva.

O post original deste artigo está em web designer de pot vale conhecer o blog dos caras é leitura de boa qualidade.

O fime tem data prevista de estréia dia 28 de maio de 2010.  O fileme será produzido por Jerry Bruckheimer e estrelado por Jake Gyllenhaal, Gemma Arterton, Ben Kingsley e Alfred Molina.

Uma das coisas que não entendi bem é que o titulo do filme refere-se ao “primeiro” da serie o The Sands of Time que foi lançado em 2000, mas o pricipe Dastan, tem a fisionomia e as roupas do segundo game o Warrior Within.

Na imagem a baixo, o primeiro Dastan é o do filme e é o cartaz oficial, o segundo é no The Sands of Time e logo a baixo o terceiro é Warrior Within, qual é o mais parecido?!

Só por curiosidade, um print de uma das primeiras versões do game.

Bem vamos esperar e ver se o filme não embanana as histórias e torcer para ele representar a altura esse clássico dos games.

A semiótica ajuda a entender como as pessoas interpretam mensagens, interagem como objetos, pensam e se emocionam.

Fonte: Usabilidoido e Tecnicas psicoterapeuticas

A sintaxe é muito fácil “String.length” onde string é o objeto que queremos contar e o length é quem se encarregará pela contagem.

Obs: está propriedade também conta espaço em branco. Muito bom pra verificar se a senha foi digitada com espaço em branco.

Vamos ver um exemplo simples.

<script type="text/javascript" language="javascript">

   var caracteres = "Felipe não sabe de tudo, mas aprende um pouco a cada dia";

   var contar = caracteres.length;

   alert(contar);

</script>

O resultado será um alert com o numero 56, contando com os espaços em branco, que ele interpreta como caracteres.

Agora eu quero que o nosso código varra a variável, e teste se existe a letra “e”, se achar vai informar que achou a letra “e”, senão ele vai dizer que não achou “e”,  e vai mostrar o caractere que achou.

<script type="text/javascript" language="javascript">

 var caracteres = "Felipe";

     for(i=0; i< caracteres.length; i++){

        if(caracteres[i] == "e" || caracteres[i] == "E" ){

           alert("Achei o " + caracteres[i]);

        } else {

           alert("Não achei e, encontrei o " + caracteres[i]);

        }

     }

</script>

O resultado será uma serie de alerts até a condição ser satisfeita, e todos os caracteres serão contados e testados.

O ideal é trabalhar com DOM, e escrever no documento ao invés de alerts, mas como estamos apenas estudando a propriedade length, escolhi alert, mas você pode escolher um nó ou id do documento e escrever nele, Ex: screver = document.getElementById(”idOndeVoceQuerEscrever”).innerHTML = variável + “texto e tags”;

Mas isso é para próximos posts.

A melhoria progressiva é uma estratégia de web design que enfatiza a acessibilidade, a marcação semântica e estilo externo e tecnologias de script.

Ela usa tecnologias da web em camadas que permite a todos o acesso a conteúdos e funcionalidades básicas de uma página web usando qualquer navegador ou ligação à Internet, fornecendo também aqueles com software de navegação mais largura de banda ou mais avançado de uma versão melhorada da página.

A estratégia é uma tentativa de subverter a estratégia de web design tradicional conhecida como degradação graciosa, onde designers iriam criar páginas Web para os navegadores mais recentes que também funcionam bem em versões antigas do navegador.

Degradação graciosa deveria permitir que a página de degradar ou manter-se apresentável, mesmo que certas tecnologias assumida pelo projeto não estava presente, sem ser brusco para o usuário do software, como mais velhos.

Na prática, a degradação graciosa foi suplantada por uma atitude que o usuário final deve apenas atualizar. Esta atitude é devido a limitações de tempo e orçamento, o acesso limitado a testes de software e browsers alternativos, bem como a crença generalizada de que os navegadores são gratuitos.

No Progressive Enhancement (PE), a estratégia é deliberadamente invertida: um documento de marcação de base é criada, voltada para o menor denominador comum de funcionalidades de software de navegação e, em seguida, o designer adiciona funcionalidades ou melhorias para a apresentação e comportamento da página, utilizando tecnologias modernas, como Cascading Style Sheets ou JavaScript (ou outras tecnologias avançadas, como Flash ou Java applets ou SVG, etc ) Todas essas melhorias são ligados externamente, de modo a evitar forçar navegadores de menor capacidade para comer dados que eles não entendem e não pode lidar com, ou que teria pântano sua ligação à Internet.

A abordagem do PE é derivada da experiência precoce Pulido (C 1993-4) com SGML, antes de trabalhar com HTML ou qualquer linguagem de apresentação na Web, bem como das experiências mais trabalhar com CSS para resolver bugs do navegador.

Nesses contextos cedo SGML, marcação semântica foi de fundamental importância, visto que a apresentação foi quase sempre considerada separadamente em vez de ser incorporado na marcação própria. Este conceito pode ser referido nos meios de marcação como a regra da separação de apresentação e conteúdo, a separação entre conteúdo e estilo, ou de separação da semântica e da apresentação.

À medida que a Web evoluiu em meados dos anos noventa, mas antes da CSS foi introduzida e amplamente apoiada, esta regra básica do SGML foi repetidamente violada por extensores HTML.

Profissionais como Eric Costello, Owen Briggs, Dave Shea, entre outros, mostraram como usar o CSS para fins de layout.

Libertando os designers a usar tecnologias poderosas como o CSS para gerir todas as tarefas de apresentação, JavaScript para melhorar comportamento e XHTML para estrutura.