Carlos Tristacci Just another WordPress weblog

Baseado na plataforma de renderização Gecko 1.9.1, que esteve em desenvolvimento durante o ano passado. Esta nova versão oferece muitas mudanças em relação a versão anterior, apoio a novas tecnologias da Web, melhorando o desempenho e facilidade de uso.

Get the Flash Player to see this player.

Navegação Privativa

O histórico do navegador é bastante útil caso você queira voltar a visitar uma página que não lembra o endereço. Mas talvez você não queira que outras pessoas que utilizem o seu computador possam acessar seu histórico de navegação ou de download. Então, basta ativar a opção Ferramentas > Iniciar Navegação Privativa.

TraceMonkey

TraceMonkey acrescenta código nativo-compilação para o motor JavaScript da Mozilla (conhecido como “SpiderMonkey”). É baseado em uma técnica desenvolvida na UC Irvine chamado “trace trees“, e da construção no código e idéias partilhadas com o projeto Tamarin Tracing. O resultado final é um aumento enorme de velocidade.

Desempenho do Firefox: Rápido – Máis rápido – Mais rápido ainda
Resultados do teste SunSpider em uma máquina com Windows XP

Navegação ciente de localização

Sites que usam a navegação ciente de localização perguntarão onde você está para poder fornecer informações mais relevantes, ou para economizar tempo ao pesquisar. Digamos que você esteja procurando por uma pizzaria na sua região. Um site será capaz de pedir que você compartilhe sua localização para que uma simples busca por “pizza” traga os resultados que você precisa… nenhuma outra informação ou digitação extra será necessária.

Ou, se você estiver mapeando um percurso para chegar em algum lugar, o site saberá o seu ponto de partida; você só precisará informar para onde deseja ir.

Esse serviço é totalmente opcional – o Firefox não disponibiliza a sua localização sem pedir a sua permissão – e foi feito respeitando ao máximo a sua privacidade. E, como todos os elementos do Firefox, está sendo criado usando padrões abertos para facilitar a adoção por desenvolvedores da web.

Suporte das tags HTML 5 <video> e <audio>

Com o suporte cada vez mais frequentes nos browsers, o Firefox 3.5 oferece suporte as tags <video> e <audio> incluindo suporte nativo para a codificação de vídeo Ogg Theora e codificação de áudio Vorbis.

<video src=&quot;meet.ogv&quot; controls=&quot;true&quot;>
Seu navegador não tem suporte a tag video.
</video>

Sem a necessidade de criar um player, o navegador renderiza o vídeo e dá ao usuário controles utilizando o botão direito do mouse. Se habilitar os controles com o atributo controls=”true”, deixará disponível os controles para o usuário.

A mensagem que está dentro da tag vídeo aparece quando o navegador não suportar a tag.

A tag audio possui as mesmas características.

<audio src=&quot;audio.wav&quot; controls=&quot;true&quot;>
Your browser does not support the audio element.
</audio>

Suporte a fontes externas

Imagine um desenvolvimento mais fácil e criativo, sem ter que utilizar somente as fontes padrões dos sistemas operacionais ou ter que exportar imagens com os textos que utilizam fontes não pertencentes por padrão nos sistemas operacionais.

Antes esta possibiidade era possível apenas em navegadores com motores Webkit, mas agora o Firefox 3.5 permite isso, aumentando o número de usuários que suportam essa característica.

Sintaxe:

@font-face {
font-family: <nome da fonte>, Verdana, Arial;
src: <endereço da fonte>;
[font-weight: <weight>];
[font-style: <style>];
}

Valores:

<nome da fonte>

Especifica o nome da fonte.

<endereço da fonte>

Especifica o endereço remoto onde está hospedada a fonte.

<weight>

Valor opcional, especifica o peso da fonte,.

<style>

Valor opcional, especifica o estilo de uma fonte.

Concluindo

É empolgante ver que a web evolui de forma a tornar tudo mais fácil e empresas como a Mozilla, correrem em disponibilizar cada vez mais funcionalidades em seus produtos.

Mas, acredito que o que ainda não satisfaz os desenvolvedores é o uso do Internet Explorer por parte dos usuários. Não, não sou um fanático pelo Firefox, mas infelizmente a maioria dos usuários utiliza o versão 6 do Internet Explorer, o que limita o nosso desenvolvimento ao CSS 2.1, ainda de forma parcial.

Por isso, se chegou até esta conclusão, mesmo que não seja desenvolvedor, contribua com uma internet mais dinâmica e rica. Instale o Firefox, Safari, Google Chrome, Opera ou atualize a versão do seu Internet Explorer.

Dando a sequência na série Tableles, vamos estilizar o XHTML estruturado na vídeoaula Tableless – HTML. Deixando claro que a técnica que utilizo neste post é uma das várias técnicas que são utilizadas na web. Cada uma com suas vantagens e desvantagem e dependendo da maturidade e intimidade que o webdesigner tem com o XHTML e CSS.

Get the Flash Player to see this player.

Tableless segundo a Wikipédia é uma forma de desenvolvimento de sites que não utiliza tabelas para disposição de conteúdo na página, pois defende que os códigos HTML deveriam ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados tabulares. Para a disposição da página o recomendado seria usar CSS. O termo ganhou destaque no Brasil sendo pouco utilizado no resto do mundo.

Dentre as possíveis vantagens da metodologia, estão a diminuição do peso da página (na realidade, o conteúdo da página é mostrado mais rápido, o que não significa que o peso da página seja menor – isso, é claro, sempre dependendo de como o HTML é feito) e melhora da acessibilidade – podem ser vistos em dispositivos móveis sem necessidade de versão especial e por deficientes visuais, embora não sejam muitos os sites tableless que carregam atualmente esta segunda característica.

Está é a primeira vídeoaula de uma série de duas vídeoaulas que falam sobre tableless. Pensando em quem está iniciando no desenvolvimento web, começamos com a estrutura do conteúdo em XHTML, para demontrar o uso da metodologia e de que forma podemos aproveitar todas as suas vantagens e como resolver os problemas de compatibilidade entre os navegadores, crossbrowser.

Get the Flash Player to see this player.

Estreio meu primeiro Screencast (vídeo-aula), falando sobre Web Standards. Este será uma sequência de outros Screencasts falando sobre o desenvolvimento web dentro dos padrões e de forma acessível.

Espero que gostem deste novo modelo de post e deixem comentários. Um abraço!

Salve Galera!

Acabei de receber uma dica de um material, para consulta rápida, de um colega aqui da Universidade de Brasília.

O Guia de Referência XHTML, produzido pelo cgi.br/w3c, contém a especificação de todas as tags e atributos do XHTML.

Bom material, para quando surge aquela dúvida de qual tag utilizar.

Faça o download do guia neste endereço - http://www.w3c.br/divulgacao/pdf/guia-xhtml-w3cbr.pdf

Abraço!

Estudando acessibilidade na internet esta semana encontrei este vídeo no site www.acessibilidade.net, apresentado por pessoas com necessidades especiais, falando sobre a importância e o custo benefício da acessibilildade. Perceba a importância do desenvolvimento de sites acessíveis.

Como algumas pessoas sabem, eu participo do projeto SIEP – Sistema de Informação de Educação Profissional, do Ministério da Educação, no qual trabalho com uma equipe que envolve pessoas especializadas em educação assistiva, cegos, surdos e desenvolvedores.  No núcleo de Bento Gonçalves, CEFETBG, responsável pela acessibilidade dos sistemas.

E para este projeto me foi solicitado para desenvolver um tutorial de acessibilidade no Flash, o qual eu disponibilizo aqui para todos interessados em tornar a web e objetos desenvolvidos em Flash disponíveis a todos, independente de deficiências.

Introdução

O Flash já foi alvo de muitas críticas, incluindo do famoso Jakob Nielsen, pai da usabilidade, sobre suas deficiências ao gerar conteúdos acessíveis.

Bom a Macromedia, atualmente Adobe, contratou o próprio Jakob Nielsen, autor das maiores críticas, como consultor para melhorar o programa. O resultado foi o surgimento de um painel novo, além de novas características em outros painéis.

Vamos ver como utilizar estes painéis da forma correta, aplicando ao documento, menus e campos de texto.

Para este manual básico, estarei utilizando a versão CS3 do Flash, mas as mesmas ferramentas e painéis são encontradas nas versões MX 2004 e 8.

Acessibilizando o documento

Janela Document Properties

Imagem 1 – Janela Document Properties

Para abrir esta janela, vá até o menu Modify > Document.

Para cada arquivo em Flash que for desenvolver é importante que defina duas informações sobre o mesmo (Imagem 1):

1. Title – Este campo serve para determinar um título para o arquivo, uma informação breve, sobre o documento, como por exemplo: “Catálago de produtos”.
2. Description – Neste campo faça uma breve descrição sobre o conteúdo do arquivo e seu propósito. Como por exemplo: “Conheça nossas linhas de produtos”.

Com o documento descrito podemos começar a desenvolver nosso projeto, sabendo que já informará ao usuário que documento ele está acessando e qual o seu propósito.

Painel Acessibility

Com este painel podemos gerar conteúdo acessível, fornecendo equivalentes textuais aos elementos utilizados no Flash (Imagem 2).

Imagem 2 – Painel Accessibility

Para abrir este painel, vá até o menu Window > Other Panels > Acessibility.

Acessibilizando Textos

Por padrão, o Flash permite o acesso a todos os elementos textuais para os leitores de tela. Não sendo necessário fazer nenhuma modificação. Mas é importante observar que as opções do painel Accessibility mudam de acordo com o tipo de Campo Texto que for utilizado.

Static Text (Texto Estático)

Se escrever qualquer texto utilizando o campo Static Text, vai encontrar no painel Accessibility apenas a mensagem (imagem 4): “Current selection cannot have accessibility applied to it” ou seja: “A seleção atual não tem acessibilidade aplicada a ela”, o que nos informa que não há opções a serem configuradas para ela, veja a Imagem 3. Mas é importante deixar ativa a opção “selectable”, imagem 3, que possibilita a seleção do texto, isto permite que usuário selecione o texto e facilita a acessibilidade para alguns leitores de tela.

Imagem 3 – Opção selectable

Imagem 4 – Campo Static Text

Dynamic Text (Texto Dinâmico)

Os campos de texto do tipo Dynamic Text, quando com a opção “Make object Accessible” ou seja “Torne o objeto acessível”, estiver ativada, permitirá ao leitor de tela ler exatamente o conteúdo escrito no mesmo. Mas se achar necessário poderá contar com mais duas configurações (imagem 5):

1. Description (Descrição) – Utilize esta opção para definir uma pequena descrição do campo, o qual deve ser feita apenas se o campo necessitar de maiores explicações, o que na maioria das vezes não é necessário.
2. Tab index (Ordem da Tabulação) – Utilizado para definir a ordem que o objeto será selecionado quando o usuário navegar utilizando as teclas TAB e SHIFT+TAB.

Imagem 5 – Campo Dynamic Static

Input Text (Texto de Entrada)

No campo de texto do tipo Input Text, configuramos o painel Accessibility da mesma forma que fariamos na linguagem (X)HTML, onde é indicado definir um “Name” – um rótulo para o campo de texto, para que o usuário saiba o que está preenchendo, e quando for necessário coloque uma descrição no campo “Description”, como por exemplo: “Campo obrigatório”.

Além destas duas opções ainda temos os campos (imagem 6):

1. Shortcut – que serve para definir um atalho, um acesso rápido ao campo, o que é feito definindo uma letra ou número, como por exemplo: “A”. O atalho para o usuário será a tela ALT juntamente com a letra ou número definido, no nosso exemplo o atalho é “ALT + A”.
2. Tab index – No caso de formulários é muito importante definir a ordem da tabulação para que o usuário tenha uma ordem lógica definida ao preencher os campos. Caso contrário ele ficará preso à ordem de criação dos campos.

Imagem 6 – Campo Input Text

Acessibilizando Buttons e MovieClips

O termo “etiquetar” é bem conhecido por quem desenvolve conteúdo acessível, que significa identificar textualmente um elemento, o que é feito no HTML com imagens através do atributo “alt” e no Flash é feito através do painel Accessibility.

Tanto os Buttons como os MovieClips tem que ser etiquetados, pois mesmo contendo campos de texto inseridos no seu corpo, é um elemento fechado e pode acarretar em não ser acessado pelo leitor de tela.

Para demonstrar como etiquetar um menu de navegação, criei no Flash dois elementos utilizados para este fim, um Button, com a função de voltar e um MovieClip com a função de avançar numa apresentação de um objeto de aprendizagem.

A utilização do Symbol Button é para botões mais simples, sem uma animação mais elaborada, enquanto o Symbol MovieClip, deve ser utilizado para botões animados e com aspectos visuais mais elaborados.

Acessibilizando um Button

O Button tem as mesmas opções que foram vistas nos campos de texto, então basta configura-lo da mesma forma, mas é importante salientar a importância de determinar o rótulo do botão no campo “Name” do painel Accessibility, para este botão do exemplo o Name seria “Voltar” e nos casos que forem necessários determine a descrição no campo Description, aqui poderíamos utilizar: “Clique para voltar para o slide anterior”.

Para botões com a função de navegação de slides, como “Voltar” e “Avançar” é importante definir corretamente o Tab index e um Shortcut, como exemplificado na imagem abaixo:

Imagem 7 – Símbolo Button

Para botões animados desenvolvidos com MovieClips, tem apenas uma diferença no painel Accessibility para os botões definidos pelo Symbol Button, a opção “Make child objects accessible” ou seja, “Tornar os objetos filhos ( ou internos ) acessíveis”.

Acessibilizando um MovieClip

Neste caso como o MovieClip pode desde ter a simples funcionalidade de um botão até ter a função de recipiente de partes ou de toda uma animação, a opção “Make child objects accessible”, permite que os elementos internos do MovieClip possam ser lidos pelo leitor de tela, os quais devem também estar com as suas opções de acessibilidade definidas.

Imagem 8 – Símbolo MovieClip