Micheline Carvalho Barroso

1. Ferramentas para Web I Micheline Carvalho Barroso

2. 1 Ferramentas para Web I Padrões Web Profa. Micheline Carvalho Barroso micheline.barroso@gmail.com Capítulo 1 – Padrões Web

3. Padrões Web • Evolução acelerada! • Desenvolvimento: • Acesso global às informações produzidas; • Processo mais rápido e agradável. • Organizações de padronização: • W3C (World Wide Web Consortium - Consórcio da Teia de Alcance Mundial); • ECMA (European Computer Manufacturers Association - Associação dos Fabricantes de Computadores Europeus).

4. Padrões Web • A Web é uma aplicação baseada na Internet e, desta forma, herdou seus princípios fundamentais de projeto: • Interoperabilidade: especificar linguagens e protocolos compatíveis entre si; buscar independência de hardware e software; • Evolução: adotar princípios de projeto, como, simplicidade, modularidade e extensibilidade para acomodar tecnologias futuras; • Descentralização: limitar ou eliminar dependências em registros centrais.

5. Padrões Web Padrões do W3C: • HTML (Hypertext Markup Language - Linguagem de Marcação de Hipertexto); • SGML (Standard Generalized Markup Language - Linguagem de Marcação Generalizada Padrão); • XML (Extensible Markup Language - Linguagem de Marcação Extensível); • XHTML (Extensible Hypertext Markup Language - Linguagem de Marcação de Hipertexto Extensível);

6. Padrões Web Padrões do W3C (continuação): • CSS (Cascading Style Sheets - Folhas de Estilo em Cascata); • DOM (Document Object Model - Modelo do Objeto Documento). Padrões da ECMA: • ECMAScript

7. Padrões Web • Projetos para divulgação: • WASP (Web Standards Project - Projeto de Padrões Web); • MACCAWS (Making a Commercial Case for Adopting Web Standards - Criando um Estudo de Caso Comercial para Adotar Padrões Web); • Fases: • Convencer fabricantes a implementar padrões em navegadores; • Motivar desenvolvedores a estruturar documentos seguindo os padrões.

8. Padrões Web A cada nova página criada, estamos contribuindo para o espaço comum de informação que é a Web. Adotar padrões Web no desenvolvimento de sites é a única maneira de assegurar que os sites construídos poderão ser visitados a partir de qualquer plataforma, hoje e sempre. A escolha pertence a nós, as conseqüências pertencem a todos.

9. Benefícios em se adotar padrões • Portabilidade; • Facilidade de indexação; • Facilidade de migração; • Acessibilidade; • Validação de código; • Melhorias no desenvolvimento.

10. Benefícios para desenvolvedores Adotar padrões permitirá que os desenvolvedores: • Desenvolvam sites mais leves e que exigem menos tempo de carregamento; • Tenham um controle mais preciso sobre layout, posicionamento e tipografia; • Desenvolvam comportamentos sofisticados que funcionam em várias plataformas de hardware e software; • Sejam compatíveis com leis e diretrizes sem sacrificar a beleza, o desempenho ou a sofisticação; • Reprojetem em horas, em vez de dias ou semanas, reduzindo custos e eliminando o trabalho desnecessário;

11. Benefícios para desenvolvedores Adotar padrões permitirá que os desenvolvedores: • Suportem vários navegadores sem a dificuldade e a despesa de criar versões separadas e, freqüentemente, com pouca ou nenhuma bifurcação de código; • Suportem dispositivos não-tradicionais, desde acessórios sem fio e telefones celulares compatíveis com a Web, até leitoras de Braille e leitoras de tela usadas por usuários com deficiências físicas - novamente, sem a dificuldade e a despesa de criar versões separadas; • Disponibilizem versões impressas sofisticadas de qualquer página Web, freqüentemente sem a criação de versões de páginas dedicadas para a impressora, ou contando com sistemas de publicação proprietários e caros para criar tais versões;

12. Benefícios para desenvolvedores Adotar padrões permitirá que os desenvolvedores: • Separem o estilo da estrutura e do comportamento, criando layouts criativos, fundamentados pela rigorosa estrutura do documento e facilitando o replanejamento de documentos Web em fluxos de trabalho de publicação avançada; • Façam transição da HTML, a antiga linguagem Web, para a marcação mais poderosa baseada em XML; • Assegurem que os sites, assim projetados e criados, funcionarão corretamente em navegadores atuais compatíveis com os padrões e serão executados de forma aceitável em navegadores antigos; • Assegurem que os sites, assim projetados, continuarão a funcionar nos navegadores e dispositivos de amanhã, incluindo dispositivos ainda não construídos ou sequer imaginados.

13. Acessibilidade • Acessibilidade representa, para o nosso usuário, não só o direito de acessar a rede de informações, mas também o direito de eliminação de barreiras arquitetônicas, de disponibilidade de comunicação, de acesso físico, de equipamentos e programas adequados, de conteúdo e apresentação da informação em formatos alternativos. • Dados do W3C e WAI apontam situações e características diversas que o usuário pode apresentar: • Incapacidade de ver, ouvir ou deslocar-se, ou grande dificuldade - quando não a impossibilidade - de interpretar certos tipos de informação; • Dificuldade visual para ler ou compreender textos;

14. Acessibilidade • Dados do W3C e WAI apontam situações e características diversas que o usuário pode apresentar: (continuação) • Incapacidade para usar o teclado ou o mouse, ou não dispor deles; • Insuficiência de quadros, apresentando apenas texto ou dimensões reduzidas, ou uma ligação muito lenta à Internet; • Dificuldade para falar ou compreender, fluentemente, a língua em que o documento foi escrito; • Ocupação dos olhos, ouvidos ou mãos, por exemplo, ao volante a caminho do emprego, ou no trabalho em ambiente barulhento; • Desatualização, pelo uso de navegador com versão muito antiga, ou navegador completamente diferente dos habituais, ou por voz ou sistema operacional menos difundido.

15. Acessibilidade • A acessibilidade à Web é parte integrante do projeto brasileiro de inclusão digital! • Princípios para a acessibilidade na Web: • Quanto à apresentação da informação • Quanto à navegação • Quanto à implantação • Quanto à página principal

16. Acessibilidade • Questões que garantem um bom caminho em busca da acessibilidade: • As imagens possuem textos alternativos? • É possível compreender o conteúdo de um vídeo ou áudio com o som desligado? • Os formulários são acessíveis? • O texto pode ser redimensionado? • É possível acessar todas as áreas do site sem usar o mouse? • Existe um mapa do site? • Os textos dos links fazem sentido fora do contexto da página? • Use ferramentas especializadas para validar a acessibilidade do seu site.

17. Usabilidade • Usabilidade pode ser vista como a medida da qualidade das experiências dos usuários no momento em que interagem com algum produto ou sistema. • Componentes de qualidade: • Facilidade de aprendizagem: Será fácil para o usuário realizar atividades básicas na primeira vez que entrar em contato com o projeto? • Eficiência: Uma vez conhecido o projeto, será rápido realizar tarefas? • Memorização: Quando o usuário retorna ao projeto depois de um longo período, será fácil restabelecer suas atividades? • Erros: Quantos erros o usuário comete? Estes erros são graves? Será fácil para o usuário se recuperar destes erros? • Satisfação : Usar o projeto é agradável?

18. Usabilidade • Características de sites com boa usabilidade: • Clara definição e design para atender diferentes públicos-alvo; • Navegação lógica e intuitiva; • Busca eficiente; • Manutenção adequada de conteúdo; • Textos adequados para Web; • Bons mapas; • Peso adequado.

19. Web Semântica • Web Semântica é uma extensão da Web atual na qual à informação é dado um significado bem definido, permitindo que computadores e pessoas trabalhem em regime de cooperação. • O objetivo principal desta Web do futuro é alcançar um estágio onde uma imensa quantidade de dados estará disponível com seus metadados, para auxiliar, tanto pessoas quanto máquinas, a encontrar e processar recursos úteis, e também trocar dados entre aplicações. • XML é um dos fundamentos necessários para que a Web se torne uma rede mais inteligente, em que a informação possui um significado contextual.

20. Por onde começar? • Os Padrões Web permitem segmentar páginas em três componentes: • Estrutura - HTML, XHTML, XML; • Apresentação - CSS1, CSS2; • Comportamento - DOM, ECMAScript. • Separando a apresentação da estrutura, é possível alterar a aparência sem afetar o conteúdo da página. E, de forma semelhante, é possível alterar o conteúdo da página sem interferir na sua aparência.

21. Quem já adotou? • O site abaixo representa um dos maiores e melhores exemplos de utilização de padrões Web: • http://csszengarden.com - Zen Garden: A beleza do design CSS • Outros adeptos podem ser encontrados em: • http://www.alltheweb.com- Site de busca All The Web • http://macromedia.com- Macromedia • http://terra.com.br - Portal Terra • http://www.cidadao.sp.gov.br - Governo do Estado de São Paulo • http://www.sebraepb.com.br - Sebrae Paraíba

22. Bibliografia • ZELDMAN, Jeffrey. "Projetando Web Sites Compatíveis". Rio de Janeiro: Editora Campus, 2003. • http://w3c.orgSite do Consórcio W3C (World Wide Web Consortium) • http://www.ecma-international.orgSite da Organização ECMA (European Computer Manufacturers Association) • http://webstandards.orgSite do Projeto WASP (Web Standards Project) • http://maccaws.orgSite do Projeto MACCAWS (Making a Commercial Case for Adopting Web Standards)

23. Bibliografia • http://www.acessobrasil.org.brSite da Sociedade Acessibilidade Brasil • MOSS, Trenton. "Ten quick tests to check your web site for accessibility". Accessify.com, Julho/2004. Disponível online em: http://www.accessify.com. Acessado em: 07/04/2005. • TERRA, José Cláudio e outros. "Usabilidade: conceitos centrais". Disponível online em: http://www.terraforum.com.br/cpub/pt/quemsomos/atuacao_usabilidade.php. Acessado em: 07/04/2005. • NIELSEN, Jakob. "Usability 101: Introduction to Usability". Useit.com, Agosto/2003. Disponível online em: http://www.useit.com/alertbox/20030825.html. Acessado em: 07/04/2005. • http://www.w3.org/2001/sw/Site de Web Semântica, W3C