Rac_WebAcc-Capt5-JF-accept

Capítulo V
Microsoft
Expression Web
Noções Básicas
O que é o Expression Web
O Expression Web da Microsoft já vai na versão 2.0 e veio
substituir o Microsoft FrontPage que, durante muitos anos, foi
uma das ferramentas mais usadas na criação de websites e
páginas Web pessoais e não profissionais.
A forma como gerava o código HTML e como geria a
informação ao longo do website em criação tornaram-no
rapidamente obsoleto e obrigaram à criação de uma
ferramenta mais actual e versátil.
Se a certa altura te achares meio perdido, escolhe a última
opção deste menu (Reset Workspace Layout) para que o
Expression Web volte a repor todos os painéis nos sítios e com
os tamanhos que tinham quando usaste esta aplicação pela
primeira vez.
Com a chegada do Expression Web passou a existir um maior
suporte para páginas apoiadas em folhas de estilo e, por
consequência, uma melhor acessibilidade às páginas geradas.
Como está organizado
Não foi só na forma como gerava as páginas que o Expression
Web se distanciou do Frontpage. A interface é agora
completamente diferente e muito mais completa, o que nem
sempre é positivo.
Em redor da zona de trabalho, que normalmente se processa
na parte central, existe uma série de painéis que dão acesso a
propriedades (Tag properties e CSS Properties), aos
componentes disponíveis para a criação da página (Toolbox),
lista de páginas (Folder List e Website), etc.
Se achares muito confuso podes fechar a maioria desses
painéis e voltar a activá-los quando houver necessidade.
Sempre que encontrares neste guia uma referência a um
painel que não esteja no teu ecrã, deves verificar se aquele se
encontra activo no menu Task Panes.
Irás verificar que a maioria do trabalho a executar durante a
criação de páginas Web irá ser feito nestes painéis ou em
caixas de diálogo, o que te permite evitar que se cometam
erros que prejudiquem as páginas e a sua acessibilidade.
Escolher um Template
Personalização do Template
O ponto de partida é um dos passos mais importantes para
garantires que as páginas criadas irão ser acessíveis.
O Expression Web dispõe de diversos templates (modelos),
tanto para páginas como para websites completos mas a
maioria não contempla as questões de acessibilidade.
Os templates são apenas pontos de partida e podem ser
complementados com mais informação e conteúdos. A forma
como estes últimos são apresentados também pode ser
modificada.
A nossa recomendação é que escolhas um dos nove templates
baseados em folhas de estilo (CSS Layouts), já que são aqueles
que mais garantias de sucesso oferecem (especialmente nesta
fase).
O resto deste capítulo partirá do pressuposto que
escolhemos o quinto template, que é composto por um
Cabeçalho, uma Barra de Navegação, uma Coluna
Esquerda, o Corpo da Página e pelo Rodapé.
Acrescentar conteúdos
Começamos pelo topo da página, ou seja, pelo Cabeçalho
(#master_head). Esta é uma zona essencialmente
decorativa e normalmente comporta uma imagem e o título
do teu website.
Há duas formas de inserires uma imagem com o tipo de
características desejadas: podes aplicá-la através da folha de
estilo (atributo background) ou do HTML (elemento
<img>).
A grande vantagem de colocares imagens como fundo
(usando o atributo background na folha de estilo) traduz-se
na possibilidade de evitar que esta seja carregada quando se
utiliza uma folha de estilo alternativa ou um modo de Alto
Contraste.
Na área reservada à Barra de Navegação rápida (#top_nav),
aproveitaremos para colocar as ligações mais directas:
Não há garantia de que os restantes templates sejam
baseados numa estrutura construída unicamente com <div>
e folhas de estilo, pelo que não podemos recomendá-los.

identificação ou perfil;

actividades ou projectos;

contactos.
Como se trata de uma página muito simples, deixamos de
parte o campo de pesquisa e o sitemap. No entanto, quando
se trata de um website completo este é o local ideal para os
colocares.
Se estiveres a criar uma página pessoal, na Coluna Esquerda
(#left_col) podes colocar a tua foto, dados pessoais e
interesses. Quem visitar a tua página fica logo a conhecer-te.
Não deves esquecer que, no caso das fotografias e imagens,
temos de atribuir um texto alternativo. Esse texto é como uma
espécie de legenda e, por isso, deve ser objectivo e claro.
Quando inserimos uma imagem, o Expression Web pede-te
logo que indiques um texto alternativo e uma descrição, se for
caso disso. Com este grau de automatismo, não há razão para
que existam imagens nas tuas páginas sem este atributo
preenchido.
Em alguns casos, esta zona é usada para a colocação de
ligações para as diversas zonas do website (os existentes na
barra superior são muito mais específicos).
O Corpo da Página, identificado como #page_content, é o
local onde vais apresentar informação mais variada, como os
teus interesses, a escola que frequentas, os clubes a que
pertences ou até as fotos da última viagem de estudo.
Nesta zona, e dependendo da página, podes colocar ligações
para documentos, podcasts, fotos de grandes dimensões ou
qualidade (ao visitante só deves apresentar miniaturas, para
que a página seja carregada rapidamente), etc.
Para o Rodapé estão reservados elementos mais básicos,
como uma ligação para voltar ao topo da página, a declaração
de copyright (afinal, o teu trabalho tem de estar protegido,
não tem?).
Alterar a forma de apresentação
Desde a criação da página a partir do template até ao fim do
nosso trabalho, conseguimos perceber claramente que tudo é
controlado pelas folhas de estilo. Além dos estilos criados de
forma automática pelo Expression Web, podemos acrescentar
outros.
A partir do painel "Manage Styles" poderemos alterar as
cores, enquadramento e outras propriedades das diversas
áreas de informação existentes na página. Esta escolha deve
ser feita com algum tempo e cuidado para que a solução
encontrada vá de encontro ao que pretendemos fazer sem
prejudicar a acessibilidade.
Para inserir uma fotografia no corpo da página, por exemplo,
segue estas indicações: depois da imagem ter sido adicionada
à página define, através da criação de um novo estilo, com o
nome #page_content img, se a imagem fica centrada,
com ou sem moldura, etc.
Todos estes parâmetros devem ser cuidadosamente
analisados de forma a evitar medidas absolutas, falta de
legendas ou inexistência de formatação.
Aconselhamos a que, numa fase inicial de utilização do
Expression Web os nomes principais e predefinidos se
mantenham. Assim, evitamos criar referências que não
funcionam ou referir ficheiros de imagens que não existem.
No nosso exemplo existe uma única folha de estilo que pode
ser alterada directamente a partir do painel Manage Styles ou
através da adição de novos estilos (opção New Style).
Na caixa de diálogo de Modificação de Estilos (Modify Style)
acedida a partir do menu contextual do painel Manage Styles,
podes atribuir valores, cores e texto às áreas criadas na página
e incluir toda esta parametrização na folha de estilo.
Relembramos que, no caso do texto, as medidas do tipo de
letra (Fonts) nunca devem ser colocadas em valores absolutos
(px ou pt) mas antes em valores relativos (de preferência em
percentagem). Só desta forma se consegue aumentar o
tamanho do texto com as funcionalidades do browser.
Nessa altura é apresentada uma caixa de diálogo com algumas
opções para conseguires indicar que pontos pretendes
analisar.
Verificar a Acessibilidade
Ao mesmo tempo que vamos criando e personalizando as
nossas páginas, poderemos ir verificando se, de facto,
cumprem os requisitos de acessibilidade previstos nas
recomendações do W3C.
Verificação das folhas de estilo
O Expression Web traz incorporado um módulo para
verificação automática dos pontos de acessibilidade. Logo
após a activação do painel Accessibility, é possível escolher na
própria caixa de diálogo que tipo de prioridades queremos
analisar e que resultados pretendemos obter.
Todas as parametrizações incluídas nas folhas de estilo podem
ser verificadas a partir do painel CSS Reports. Prime o botão
em forma de cabeça de seta verde para que o Expression Web
comece a analisar as tuas folhas de estilo.
O relatório gerado inclui informação diversificada que vai
desde o aviso de que se deve verificar a possibilidade de
leitura das páginas sem utilização de folhas de estilo, até aos
problemas mais graves.
Desta forma, os erros podem ser corrigidos de imediato e
assim teremos a certeza de que o website ou a página Web
que criámos é efectivamente acessível.
Para cada mensagem de erro existe ligação para uma página
online com mais informações que clarifica e dá exemplos de
como
resolver
os
problemas
encontrados
(http://www.w3.org). Para aceder a esta informação, temos
de ter acesso à Internet. Encontras mais informação sobre o
W3C no glossário e através de algumas ligações úteis referidas
no capítulo 8.
Conclusões
Podemos concluir que com o Expression Web é possível criar
páginas ou websites de forma personalizada acessíveis para
todos os utilizadores.
Ficamos ainda com a garantia de que a informação fornecida
por esta aplicação é suficiente para corrigirmos e
entendermos os problemas detectados.
Enquanto utilitário, serve também para avaliar outros
websites, desde que tenhamos acesso ao código das páginas.
Existem outros programas que avaliam o cumprimento das
Directrizes W3C. Poderás fazer a tua avaliação através de um
deles que se encontra em http://www.acesso.umic.pt e que se
chama Examinator. Para isso, basta escreveres o nome do site
que queres analisar e premires o botão 'ok'.
No espaço reservado para o relatório, premindo o botão
…. que se encontra do lado esquerdo do painel, podemos
ainda obter alertas ou mais informações. Se carregarmos duas
vezes numa das linhas apresentadas ficamos a saber o local
específico onde ocorre o erro, no código completo da página.
Temos ainda acesso ao relatório completo de HTML que é
utilizado na nossa página. Se carregares em cada linha
apresentada nesta lista, verás de imediato o texto explicativo
e o local do erro.
Estes relatórios são importantes para percebermos as
mensagens de erro ou alerta e procedermos à respectiva
correcção.
Verificarás que a página de resultados apresenta
detalhadamente os erros que foram encontrados e as boas
práticas que estão implementadas nesse site. Nota que o
Examinator é apenas um exemplo deste tipo de aplicações
mas é muito objectivo e fácil de utilizar e entender.