andré.santana [webdesign blog]

via Felipe Zmoginski, do Plantão INFO

Anúncios

Salve, salve fiéis leitores, tudo bem com vocês?

Enfim, aconteceu nesta última segunda (07/04) e terça-feira (08/04) o 2º Seminário de Criação Publicitária na cidade de Natal/RN, que por sinal – pra quem não sabe – é minha cidade natal. Entenderam o trocadilho? hehehe:P

Baboseiras a parte, foi muito bom. Parabéns para a Staff de Comunicação pela iniciativa, que venham mais eventos como esse, palmas também para o Sinapro/RN, na pessoa de Arturo Arruda Câmara que apoiou o projeto, a todos os patrocinadores e também a todos que apoiaram e acreditaram no evento. Saibam que o seminário foi de um proveito imenso para todos que participaram do seminário. Vocês não tem idéia de como o horizonte de cada abriu, com o mundo de informação e referências que vocês no propocionaram. Mais uma vez parabéns, fazia tempo que eu não participava de um evento desse porte.

Palestrando para nós tivemos nada mais, nada menos do que Carlos Henrique Equi (Staff/RJ), Flávio Medeiros (Presidente do CCRJ), Álvaro Rodrigues (Agência3/RJ) e por último – mas não menos importante – Pedro Porto (Santa Clara/SP).

Sentiu o gostinho? Pois é, em setembro tem mais! =)

por André Santana

Post muito legal, vale a pena ver. Via Stuff That Happens

Ouch!

simplicity

Clique na imagem para ampliar

=)

Comentem…

O Flash já foi um 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

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:

  1. Title – Este campo serve para determinar um título para o arquivo, uma informação breve, sobre o documento, como por exemplo: “Catálogo 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 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.

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: “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”, que possibilita a seleção do texto, isto permite que usuário selecione o texto e facilita a acessibilidade para alguns leitores de tela.

Static Text não possui configurações no painel Accessibility.

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:

  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.

Opções de acessibilidade para Dynamic Text.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:

  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.

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.

A utilização do Symbol Button é para botões mais simples, sem uma animação maiselaborada, 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 configuralo 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.

Para botões animados desenvolvidos com MovieClips, há 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.

por Carlos Tristacci

Para o design ter sucesso, ele deve primeiro atender as necessidades básicas das pessoas – antes de tentar satisfazer necessidades de níveis mais altos.

E quais seriam estas necessidades? Para chegar aos cinco elementos chave na hierarquia das necessidades no design, vamos seguir o padrão de Maslow:

maslow

Necessidades humanas segundo Maslow

1. Fisiológicas
2. Segurança
3. Relacionamento
4. Estima/Status
5. Realização pessoal

Necessidades do Design

1. Funcionalidade
2. Confiabilidade
3. Usabilidade
4. Proficiência
5. Criatividade

Funcionalidade

Fisiologia: significa atender os requisitos mais básicos do design. Exemplo: um aparelho de DVD deve, pelo menos, ser capaz de gravar e reproduzir vídeos.

Valor agregado pelo design é muito baixo.

Estabilidade

Segurança: significa estabelecer uma performance estável e consistente. Exemplo: um aparelho de DVD deve reproduzir vídeos com qualidade e o mecanismo (software/hardware) não deve apresentar defeitos.

Valor agregado pelo design é baixo.

Usabilidade

Relacionamento: significa disponibilizar uma interface simples, fácil de ser usada e que perdoe erros do usuário. Exemplo: programar um aparelho de DVD para começar a gravar um filme a uma determinada hora deve ser fácil e o sistema deve ser tolerante em relação a erros cometidos pelo usuário.

Valor agregado pelo design é moderado.

Proficiência

Estima: significa disponibilizar recursos para melhorar o modo como os usuários fazem as coisas. Exemplo: um aparelho de DVD que consiga pesquisar e gravar programas baseado em palavras chave escolhidas pelo usuário.

Valor agregado pelo design é alto.

Criatividade

Realização pessoal: é o nível na hierarquia onde todas as necessidades foram atendidas e onde as pessoas começam a interagir com o design de formas inovadoras. O design passa a ser usado para criar e explorar áreas que estendam a experiência do usuário.

Valor agregado pelo design é muito alto.

De acordo com a teoria de Maslow, as necessidades fisiológicas, as necessidades de segurança e algumas das necessidades sociais (funcionalidade, confiabilidade e usabilidade se aplicado ao design) são fatores de desmotivação. A teoria diz que a satisfação destas necessidades é básica; já a ausência da satisfação destas necessidades não motiva ninguém, pelo contrário, desmotiva.

Já as necessidades sociais, as necessidades de “status” e de estima e as necessidades de auto-realização são fortes fatores motivacionais. Ou seja, se não forem atendidas, as pessoas procuram fazer com que sejam satisfeitas; as pessoas são motivadas a alcançar a satisfação destas necessidades.

Quando se fala em design agregando valor a algum produto, serviço ou interface é preciso ter a clareza que ele terá o efeito desejado quando passar a atender os níveis mais altos da pirâmide (proficiência e criatividade).

Mas até chegar a estes níveis, os primeiros devem necessariamente ser atendidos.

por Marcos Nähr

 iphone
A Apple anunciou que o iPhone terá novos recursos para reforçar sua concorrência com os populares aparelhos Blackberry, da Research in Motion. Entretanto, a empresa só vai revelar detalhes sobre o software para o aparelho no dia 6 de março.
De acordo com Tim Cook, vice-presidente de operações da Apple, a empresa está muito confiante em atingir a meta de vender 10 milhões de iPhones até o final do ano. Afinal, as ações da empresa, após queda de 30% nos três meses anteriores, recentemente subiram 3,7 por cento, com bom volume de transações, superando a alta de 3,2 por cento, para 122,96 dólares, registrada no pregão regular da Nasdaq.

Fonte: INFO Online

Entrando em um endereço na internet, você saberia dizer se é um site ou um aplicativo? Qual a diferença entre um e outro? E por que desenvolvedores de aplicativos não trabalham mais sem o auxílio de um designer?

Salvo exceção, você desenvolvedor já foi chamado por um cliente com o seguinte pedido:

“Quero que você desenvolva um aplicativo para mim, que funcione na internet, e que permita publicação, votação e comentários em artigos”.

Designers também costumam ouvir algo do tipo:

“quero que você faça um site para mim. Esse site tem que publicar artigos, permitir que os visitantes votem no melhor e também façam comentários”.

Tendo em vista o que seu cliente pede, você que é desenvolvedor, entrega um site ou um aplicativo?

Responda rápido, se for capaz. Identifique nas 10 alternativas abaixo, quais são sites e quais são aplicativos:

Se você respondeu que os dez são sites, ganhou nota 5. Se você respondeu que os dez são aplicativos, também ganhou nota 5. Mas se você respondeu que os dez são um misto de site e aplicativo, ganhou nota 10.

É isso mesmo. A diferença entre um e outro está cada vez menor e os conceitos estão mais confusos, mas vamos tentar esclarecer um pouco. Com o surgimento da web 2.0, então, o abismo de antes virou uma valeta rasa. Para encurtar o assunto, praticamente todos os sites que usamos hoje têm, por trás, aplicativos que o fazem funcionar.

Vamos tomar como exemplo um prato self-service da internet: um blog. Quando falamos em “criar um blog”, estamos usando vários programas que recebem o que você escreveu, gravam os dados no banco de dados, mostram em ordem descrescente de postagem, filtram por categorias, etc.

Concorda que são programas? E concorda também que um conjunto de programas forma um aplicativo (ou sistema, no jargão da minha época)?

Quando você instala um plugin num blog, você está inserindo um novo programa ao aplicativo já existente, não é mesmo? A questão é que isso tudo melhorou tanto, que esses detalhes técnicos passam despercebidos por nós, a maioria do tempo. Mas continua sendo um conjunto de programas (um aplicativo).

Então vem a pergunta: é um site ou um aplicativo?

A diferença está no que o visitante do site (que usa o aplicativo) percebe e o que o seu cliente (que paga pelo site) determina. O ideal é que o visitante do site (que usa o aplicativo) tenha a sensação de estar usando um site e que seu cliente (que paga pelo site) tenha a oportunidade de definir todas as regras do aplicativo; por mais óbvias que sejam.

Não entendeu direito? Vamos analisar as duas visões aparentemente antagônicas.

Se você lançar um aplicativo na internet, provavelmente ninguém vai querer usá-lo. Aplicativos são conhecidos por serem complicados, precisarem de manual e treinamento. Ou ambos. Cada aplicativo tem um visual diferente. Já um site é outra coisa. Bem melhor! A simples possibilidade de usar um serviço baseado no browser dispensa até treinamento. Quer um exemplo? As suites online de escritório: Google Documents, Editgrid, Zoho, etc. Você precisou de treinamento para usar esses sites (aplicativos)?

Para uma empresa, que vantagem, hein! Além do gerenciamento centralizado, temos uma interface comum que qualquer pessoa está acostumada a ver num webmail, grupo de discussão ou portal de notícias. Isso é ter a sensação de usar um site. O que fala mais alto aqui é o lado psicológico de quem usa.

Por outro lado, toda essa simplicidade aparente não descarta a necessidade de regras, validações, projeto de banco de dados, segurança, log de erros, etc. Isso tudo faz parte do projeto de um aplicativo, certo?

Então, vem novamente a pergunta: é um site ou um aplicativo?

Você, como desenvolvedor, continua fazendo programas que recebem dados, faz a validação dos campos, grava ou busca informações numa base de dados e entrega uma resposta. Igualzinho como fazia em aplicações desktop ou centralizadas. O que mudou foi a forma de apresentar o resultado ao visitante (que usa o aplicativo).

Por esse motivo é que nós, que somos desenvolvedores de aplicativos, não conseguimos mais trabalhar sozinhos sem um designer para dar aquele visual de site ao nosso aplicativo.

Ou, como diriam os designers, não seria possível entregar o site sem o programador para inserir todas as regras de funcionamento e processamento dele. Um não vive mais sem o outro.

E é muito bom que seja assim. Esse é o motivo da enxurrada de frameworks e técnicas para separar a lógica de negócio da apresentação dos dados. Como podemos dizer no popular, “cada macaco no seu galho”.

Portanto, para o visitante (que usa o aplicativo), deixe o designer apresentar um site. Ele se sentirá bastante à vontade. Afinal, um site é fácil de usar e bonito de se ver.

Mas para o cliente que pediu o site (e que paga pelo seu serviço) desenvolva um aplicativo. É esse cliente quem vai definir aquele monte de regras, que perfil de usuário pode fazer o quê, qual a política de segurança, qual a complexidade das interações, aprovar seu modelo de informações, pagar pelo seu serviço, etc.

Tenho certeza que ambos ficarão felizes com a simplicidade do site e o controle do aplicativo. Cada qual com seu pedaço. E você, com um bom case em seu portifólio.

por Vinicius Assef

Seja Bem-Vindo!

@andrehsantana

outubro 2017
S T Q Q S S D
« abr    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

RSS Feeds Deliciosos

  • Ocorreu um erro. É provável que o feed esteja indisponível. Tente mais tarde.

Blog Stats

  • 240,327 hits