souweb

Este blog me permitiu vislumbrar novos horizontes, conhecer novas pessoas e me ajudou a alcançar um objetivo…

Ser articulista de um portal relacionado a internet, tecnologia e mercado.

E hoje, 28.02.2008, recebi a confirmação que uma matéria que enviei para o www.imasters.com.br foi publicada.

A mesma matéria, Acessibilidade no Flash, que você pode ler aqui no meu blog, pode ser encontrada também no endereço: www.imasters.com.br/artigo/8146/flash/acessibilidade_em_flash/.

E apenas para registrar, por que sei que não ficará para sempre, minha matéria em destaque na página inicial do Imasters.

Agradeço a redação do Imasters, pela credibilidade em meu trabalho e aos meus amigos e família pelo apoio dado nos meus estudos e trabalho.

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

Talvez você esteja acessando este site pela primeira vez, talvez por alguém ter indicado ou por que tenha o encontrado através do Google. Bom não importado como, irá perceber que aqui coloco muitos dos meus estudos, idéias e assuntos ligados a minha profissão.

Comecei a trabalhar com internet em 2003, atualizando um site, onde eu não desenvolvia ou editava qualquer espécie de código, apenas usava o Dreamweaver.

Com o tempo comecei a estudar HTML, Javascript, ActionScript 1.0, PHP, CSS, XML entre outras.

A maior ênfase foi dada ao ActionScript 1.0, a qual não era orientado à objetos propriamente dito, assim como o JavaScript, ambas são baseadas em protótipo.

Destas o ActionScript 1.0 que usava na programação de meus sites desenvolvidos em Flash 5, era baseada no JavaScript, ou seja, praticamente tudo que aprendi com essa linguagem pude utilizar na outra, assim como no PHP, que tem sua sintaxe muito similar, isso por que as três são derivadas da linguagem C.

Então, em pouco tempo é lançado o Flash MX, continuei programando em ActionScript 1.0, mas ao ser lançada a versão MX 2004 do programa, eu decidi começar a estudar a versão 2.0 da linguagem, que é baseada em Java e já trazia um grande avanço na questão OOP (Programação Orientada à Objetos).

Esta versão assim como nas outras, busquei aprender como autodidata, OOP que falo em vários posts deste site, foi o meu maior obstáculo, pois eu não conseguia entender todos aqueles paradigmas… afinal o que são classes? O que é um objeto? O que é herança? Polimorfismo então? Li muito sobre isso, mas não conseguia assimilar.

Começo então um curso de Java, no qual busco em um professor as respostas para todas estas perguntas. Mas não encontrei tudo que buscava, mas depois deste empurram, continuei por conta, estudando teoricamente os conceitos e aplicando-os no meu trabalho consegui entender por que e de que forma programar com linguagens OOP.

Em 2006, com este conhecimento adquirido, realizei minha tentativa de reconhecimento na área, realizando uma prova de certificação, para me tornar Adobe Certified Professional.

Em 2007, começo meus primeiros estudos da versão 3.0 do ActionScript, uma linguagem totalmente orientada à objetos, com algumas das classes que eu utilizava deixando de existir, dando lugar a novas, com mais recursos de desenvolvimento, uma linguagem forte, utilizada não só no Flash CS3, mas também no Flex, nas quais pretendo me certificar pela Adobe também, mas que serei obrigado e meter a cara nos livros e no Google novamente, se quiser ter êxito.

Contei aqui uma breve história da evolução dos meus conhecimentos sobre linguagens de programação, e o maior aprendizado que tive e quero compartilhar é sobre a escolha da sua primeira linguagem de programação ou das tecnologias que queira utilizar no seu desenvolvimento.

Existem diversas linguagens para se programar e independente qual foi ou será sua escolha é importante conhecer um princípio básico, que qualquer estudante de programação deve compreender.

Uma linguagem de programação não deve ser um fim em si mesma, mas um meio, uma ferramenta para se traduzir o que queremos numa lógica que os computadores entendam (algoritmo). A linguagem deve tão somente, refletir de maneira clara e facilmente compreensível os aspectos principais dos algoritmos.

Por tudo isso, devemos ter a preocupação de aprender a formulação sistemática e metódica de algoritmos, através de técnicas que são características da programação. Como já disse, existem diversas linguagens de programação, podemos aprender e utilizar quantas desejarmos.

Dizer qual a melhor é muito relativo. Existem os que defendem o VB.Net, o Java, o PHP e tantas outras. Na realidade a melhor linguagem para qualquer programador é a qual ele tem domínio.

Escolha sua primeira linguagem de programação com cuidado, pois de acordo com observações feitas por diversos especialistas, a maior parte das pessoas ficam ligadas para sempre à primeira linguagem que aprenderam, e quando aprendem uma nova linguagem, têm uma certa tendência em desenvolver os algoritmos segundo o vocabulário e regras sintáticas da primeira linguagem, só que escritas na nova.

A primeira linguagem deve, desta forma, ser tal que forneça possibilidades de desenvolver algoritmos lógicos, sistemáticos, facilmente compreensíveis segundo os métodos modernos de programação.

O que me deixa feliz apesar de todos estes percalços é saber que hoje trabalho com linguagens e tecnologias que evoluem a cada nova versão e ganham mais espaço.

Baseie suas escolhas em linguagens que seguem padrões, que evoluam e que dêem algo há mais que as outras, assim foi com Java, assim é com o Flex e o ActionScript. Claro que aqui estou defendendo a linguagem que conheço.

Até a próxima!

Desenvolver um site em flash muitas vezes pode parecer complexo… isso pode ser verdade em grandes projetos, mas neste tutorial estaremos desenvolvendo um site básico no Flash CS3 com ActionScript 2.0, de forma objetiva e simples. E antes que alguém envie uma mensagem pedindo por que ActionScript 2.0 e não ActionScript 3.0?

A resposta é simples… pretendo alcançar pessoas que procurem desenvolver sites em Flash compatíveis com versões anteriores do Flash Player as quais ainda se encontram em uso em muitos clientes. E devido as várias turmas de webdesign que ministrei com esta versão da linguagem, para os quais tenho a expectativa deste tutorial ser esclarecedor.

Não estarei entrando em detalhes básicos, como por exemplo, como importar um arquivo para o Flash ou como converter um objeto em MovieClip. Caso alguém, fique com dúvida quanto a parte mais básica, sinta-se à vontade em mandar um e-mail para eu@souweb.info ou para deixar um comentário.

O projeto será composto por 4 arquivos, o principal.fla que será o recipiente para os outros 3 arquivos que armazenam o conteúdo: empresa.fla, produtos.fla e contato.fla. Estes 3 arquivos inicialmente serão totalmente estáticos, sem nenhum evento de interação ou animação, pois estaremos nos focando totalmente no arquivo principal.fla.

Mas, futuramente estaremos tornando este site mais dinâmico, com animações e com carregamento de arquivos externos. Estes arquivos serão no formato XML para os dados (textos e outras informações) e imagens JPG para as fotos utilizadas no conteúdo. Esta dinamização do site, tornará mais fácil nosso trabalho de atualização e o site será mais leve e rápido.

Também, não estarei aplicando layout neste exemplo, mas fique à vontade em aplicar no seu desenvolvimento o layout que quiser.

Caso queira baixar os arquivos deste tutorial para utilizar no seu desenvolvimento ou poder verificar como foram desenvolvidos, clique aqui.

Inicialmente vamos criar os 3 arquivos que armazenam o conteúdo para que durante o processo de desenvolvimento do arquivo principal.fla, possamos ver tudo funcionando.

1. Crie um novo arquivo Flash File (ActionScript 2.0) e salve com o nome empresa.fla.

1.1. Vamos configurar o documento. Clique no menu Modify > Document e na janela Document Properties configure as dimensões para 700px de largura por 450px de altura e Frame rate de 20fps, conforme Imagem 1.

Imagem 1 - Configuração dos arquivos que serão responsáveis pelo conteúdo.

1.2. Monte seu arquivo com o título EMPRESA, uma imagem ilustrativa e um texto institucional de exemplo, conforme Imagem 2.

Imagem 2 - Arquivo empresa.swf

1.3. Depois de concluído pressione as teclas CTRL+ENTER, para conferir se tudo foi publicado conforme esperado e para gerar o arquivo SWF, que será carregado pelo arquivo principal.fla.

2. Crie um novo arquivo Flash File (ActionScript 2.0) e salve com o nome produtos.fla e configure conforme passo 1.1.

2.1. Este arquivo terá o título PRODUTOS, 9 imagens ilustrativas, sendo 8 miniaturas medindo 105px de largura por 79px de altura e 1 ampliada medindo 447px de largura por 335px altura. Abaixo da foto ampliada iremos colocar uma descrição do produto. Pressione CTRL+ENTER e verifique o resultado é semelhante a Imagem 3.

Imagem 3 - Arquivo produtos.swf

3. Crie um novo arquivo Flash File (ActionScript 2.0) e salve com o nome contato.fla e configure conforme passo 1.1.

3.1. Este arquivo terá o título CONTATO, 1 formulário e informações de contato, conforme Imagem 4:

Imagem 4 - Arquivo contato.swf

4. Vamos para a parte mais importante deste tutorial, o arquivo principal. Crie um novo arquivo Flash File (ActionScript 2.0) e salve como principal.fla,

4.1. Vamos configurar o documento. Clique no menu Modify > Document e na janela Document Properties configure as dimensões para 700px de largura por 580px de altura e Frame rate de 20fps, conforme imagem 5.

Imagem 5 - Configuração do arquivo principal.fla

4.2. O arquivo principal.fla como você pode reparar tem a mesma largura que os demais documentos, mas a sua altura é maior, isto para que possamos acomodar no topo o logotipo do site e o menu de navegação. Neste menu, cada botão irá carregar um arquivo especifico (empresa.swf, produtos.swf ou contato.swf). Montei o layout conforme imagem 6, com o logotipo do meu blog e 3 botões ( que na verdade são instâncias de MovieClip, isso devido aos maiores recursos de animação que o MovieClip disponibiliza ).

Imagem 6 - Arquivo principal.swf

4.3. Os elementos na tela devem estar organizados em layers separadas para mantermos o arquivo organizado, o que irá facilitar possíveis alterações, pela praticidade que teremos em selecionar os elementos e pela facilidade de entendermos a estrutura do mesmo. Então Separe os itens conforme a Imagem 7, criando uma layer para o ActionsScript chamada “AS”, crie a layer “logo” onde será colocado o logotipo, os itens da navegação ficam na layer “menu” e crie também uma layer “alvo” para armazenar o MovieClip “alvo”, que é um MovieClip vazio, responsável por receber e armazenar o arquivo externo que será carregado via ActionScript.

Imagem 7 - Organização dos elementos na Timeline.

4.3.1.1. Vamos criar o MovieClip “alvo”, pressione CTRL+F8 e nomeio como mc_alvo. Você irá perceber na parte inferior da Timeline, conforme Imagem 8, que ao criar um novo MovieClip, ficamos localizados dentro deste. Depois de criado retorne para a “Scene 1″ e com layer “alvo” selecionada, arraste da Library o MovieClip vazio para o Stage com o Instance Name “alvo_mc”.

Imagem 8 - Criando MovieClip “alvo”

4.4. Forneça um Instance Name (Nome de Instância) para cada botão conforme segue: empresa_mc, produtos_mc e contato_mc, onde este sufixo “_mc” colocado depois do nome do botão tem como objetivo ativar a janela de auto-completar assim que digitar após do sufixo o ponto final “.”. (Imagem 9).

Imagem 9 - Instanciando o MovieClip btn_empresa, como “empresa_mc”.

4.5. Vamos para a janela do Flash onde tudo acontece…. Selecione o KeyFrame na posição 1 da layer “AS” e abra o painel Actions (tecla F9).

4.6. Nesta janela escreva o seguinte código:

var mcl : MovieClipLoader = new MovieClipLoader();
// Instanciamos um objeto da classe MovieClipLoader, a qual é responsável por carregar arquivos externos (.swf e .jpg) .
var listener : Object = new Object();
// Este objeto da classe Object será responsável por monitar o carregamento dos arquivos externos.
mcl.addListener(listener);
// Relacionamos os dois objetos, o que fará que o objeto “listener” monitore o objeto “mcl”
// Nota: Sempre que possível crie funções para organizar seus blocos de código… lembrando que funções são blocos de códigos mais legíveis e reutilizáveis.
function carregar(arquivo){
mcl.loadClip(arquivo, alvo_mc);
}
// A função “carregar” tem como objetivo facilitar alterações no nome da instância do MovieClip alvo do carregamento do arquivo externo, o qual iremos perceber sua real utilidade enquanto desenvolvemos.
carregar(”empresa.swf”);
// Chamo a função carregar para iniciar com o arquivo empresa aberto.
function ativarPreloader(ativar){
preloader_mc._visible = ativar;
}
// A função “ativarPreloader” tem o objetivo semelhante ao da função carregar, facilitando alterações no nome de instância do MovieClip “preloader”.

/* EVENTOS DO MENU */
empresa_mc.onRelease = function(){
carregar(”empresa.swf”);
}
produtos_mc.onRelease = function(){
carregar(”produtos.swf”);
}
contato_mc.onRelease = function(){
carregar(”contato.swf”);
}

Bom pessoal, termino aqui este post… mas não se desespere, já estou preparando o próximo, no qual torno este arquivo animado. Além, da sequência de posts, que detalho o desenvolvimento dos arquivos empresas, produtos e contato.

Espero que continuem lendo.

Um abraço!

Esta semana fiquei muito feliz ao receber a visita da jornalista Marlize da Silveira, do Jornal Semanário, de Bento Gonçalves, a qual procurava dicas e maiores informações sobre como realizar compras seguras na internet. Conversamos mais de uma hora, sobre diversos aspectos, pena que grande parte dos detalhes não foram publicados. Compreensível pelo espaço reduzido. De qualquer forma, deixo publicado aqui meu agradecimento por ter confiado nas informações que lhe foram passadas.

Abaixo o texto publicado na edição do Jornal Semanário de 06 de Fevereiro de 2008.

Modalidade vem ganhando adeptos em todo o país, mas requer cautela do consumidor para evitar prejuízos

É cada vez maior o número de consumidores que realizam compras em lojas virtuais. Os adeptos vêem como vantagens, além do preço, muitas vezes reduzido, a facilidade de adquirir o produto sem sair de casa. Mas é preciso estar atento à idoneidade do fornecedor.

Alguns cuidados podem auxiliar na hora de realizar uma escolha segura. Certificados digitais, dados criptografados e avaliações de outros compradores a respeito dos vendedores e dos produtos podem ser ferramentas para a escolha certa do site em que realizará a compra.

O professor de webdesign, Carlos Alberto Tristacci, acompanha o crescimento da rede de como ferramenta de vendas. “Cerca de 70% dos usuários procuram por produtos ou serviços na internet”, diz. Para ele, navegar não é arriscado, mas sim a finalização da compra, quando o cliente fornece dados pessoais.

Para realizar uma transação com segurança, é importante verificar se há certtificação digital - ’selos’ constantes nas páginas. Também o cadeado que aparece nas áreas de acesso restrito, comprovam que o site está protegido por criptografia - os dados são mesclados com códigos - indicada ainda pelo ’s’ ao final do ‘http’.

Conforme Tristacci, ao utilizar páginas para pesquisa de preços, é importante verificar as avaliações das lojas, ler o que os clientes escreveram sobre a empresa e o bem adquirido. Para as lojas pouco conhecidas, verificar se há telefone, e-mail e formas de contato para solucionar possíveis problemas. No entanto, o professor não indica que se descarte uma empresa apenas por não conhecê-la. Informar-se sobre disponibilidade do produto, políticas de entrega, forma de transporte, trocas e devoluções podem colaborar para uma transação tranquila.

Segundo o coordenador do Procon de Bento Gonçalves, Clóvis Antônio Bedina antes de efetuar uma compra virtual, é preciso verificar se a empresa é idônea. Para isso, ele aconselha a confirmação de dados como endereço, número do Cadastro Nacional de Pessoas Jurídicas (CNPJ), inscrição municipal, além de buscar nos sites dos Procons das grandes cidades por registros e reclamações.

De acordo com Bedina, umas das principais queixas dos consumidores é de não conseguir cancelar o pedido. Nesse caso, a pessoa deve procurar o auxílio do órgão para intermediar a negociação, uma vez que a legislação prevê prazo de sete dias para a desistência da compra. Em relação ao pagamento da compra, ele desaconselha o depósito adiantado.