Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

Hijax é uma nova estratégia para o uso de Ajax que tem como objetivo tornar as páginas web acessíveis, que as páginas web sejam totalmente funcionais para aqueles que não podem fazer o uso de Ajax (por que querem ou não possuem suporte a JavaScript).

Essa técnica se baseia nos termos: progressive enhancement e graceful degradation, duas estratégias que permitem que um sistema informaizado (no nosso caso, uma página web), funcione corretamente caso ocorra a falta de algum componente.

Progressive enhancement parte de uma versão básica totalmente operativa (parte-se de uma página web que faz o menor uso de tecnologias complementares como CSS e JavaScript, tornando-se assim compatível com a maioria dos browsers), já com Graceful degradation se parte do extremo contrário, desenvolvendo para navegadores mais novos, com a possibilidade de que funcione em navegadores antigos.

No caso de Hijax, a estratégia que se emprega para desenvolver com Progressive enhancement é a seguinte:

• Primeiro desenvolva o site ao “estilo antigo”, com links e ações de formulários que enviam informações ao servidor e devolvem uma página completa para cada requisição.
• Empregar JavaScript para capturar todos os links e ações dos formulários para enviar a informação mediante XMLHttpRequest. Dessa forma pode-se selecionar quais partes da página devem se atualizar de forma individual, ao invés de recarregar a página toda.

Referências

• DOM Scripting: Hijax
• Hijax
• Hijax: Ajax accesible

Talvez não seja para esse garoto:

Vi aqui: ¿Tu sitio no es accesible?

Os seguintes conselhos listados a seguir foram extraídos da WAI (Web Accessibility Iniciative), que resumem os pontos chave das diretrizes de acessibilidade web: WCAG 1.0.

• Imagens e Animações: Uilize o elemento alt para descrever a função de cada elemento visual.
• Mapas de Imagem: Utilize mapas do lado cliente e proponha alternativas de texto para cada área ativa.
• Multimedia: Proporcione subtítulos e transcrições de áudio e descrições de vídeo.
• Links: Crie links que contenham texto que façam sentido quando se está fora do contexto, por exemplo, evite os links clique aqui.
• Organização da Página: Utilize cabeçalhos, listas e crie uma estrutura coerente para suas páginas. Utilize CSS para dar estilo a sua página.
• Gráficos e Diagramas: Crie resumos utilizando o atributo longdesc.
• Scripts, Applets e Plugins: Proporcione conteúdo alternativo caso o acesso a função não seja suportado.
• Frames: Utilize o elemento no frames e utilize títulos com sentido.
• Tabelas: Crie tabelas que possam ser lidas linha por linha. Faça um resumo do conteúdo das mesmas.
• Revise seu trabalho: Valide seus documentos, referências e guias podem ser encontrados em: http://www.w3.org/TR/WCAG/

Tradução do artigo original de: WebMaster Libre.

Adaptação do artigo original de: Anieto2K

Se a cada dia você fica perdido com cada palavra nova que aparece na internet, com esse guia, não vai acontecer mais esse tipo de coisa, agora você vai entender perfeitamente a língua dos geeks:

Linguagens de marcação e apresentação

• CSS: Cascading Style Sheets - CSS é uma linguagem utilizada para modificar o aspecto das estruturas HTML.
• DHTML: Dynamic HyperText Markup Language - É um termo utilizado para referir-se a junção de HTML + CSS + JavaScript.
• HTML: HyperText Markup Language - É uma linguagem de marcação de tags que compõem todas as páginas web.
• WML: Wireless Markup Language - WML é similar ao HTML, é baseado em XML e é orientado a dispositivos móveis.
• XHTML: Extensible HyperText Markup Language - XHTML é um HTML ao qual se aplicam as regras do XML.
• XML: Extensible Markup Language - XML é uma recomendação do W3C para gerar dados de uma forma melhor estruturada.

Linguagens de programação

• ASP (Microsoft): Active Server Pages - ASP é uma linguagem de programação em Script que se utiliza de VBScript, JScript, PerlScript ou Python processadas pelo servidor para gerar conteúdo dinâmico na web.
• CGI: Common Gateway Interface - É um protocolo que permite que aplicações do servidor interajam com os navegadores.
• JSP: JavaServer Pages - É uma linguagem de programação baseada em Java e é executada no lado servidor. Esta tecnologia permite ao desenvolvedor produzir aplicações que, acessam o banco de dados, manipulam arquivos no formato texto, capturam informações a partir de formulários e captam informações sobre o visitante e sobre o servidor.
• PHP: PHP Hypertext Preprocessor/Personal Home Page - É uma linguagem de programação de computadores interpretada, livre e muito utilizada para gerar conteúdo dinâmico na Web, como por exemplo fóruns. Apesar de ser uma linguagem de fácil aprendizagem e de utilização para pequenos scripts dinâmicos simples, o PHP é uma linguagem poderosa orientada a objetos.
• RoR: Ruby on Rails - Ruby On Rails é um framework de código aberto para desenvolvimento de aplicações Web, escrito em Ruby.
• SSI: Server Side Includes - É uma linguagem de programação que permite incluir conteúdo de um arquivo em outro.

Web Services

• ASP: Application Service Provider - É a denominação dadas às empresas que disponibilizam serviços ou aplicações informáticas com base na web.
• AWS: Amazon Web Services - É uma coleção de aplicações remotas oferecida pela Amazon.com
• RSS: Really Simple Syndication - RSS é uma especificação XML que permite ao usuário acompanhar o conteúdo de um site através de programas, muito utilizado hoje em blogs, sites de notícias e fóruns.
• S3: Amazon Simple Storage Service - É uma solução de armazenagem de dados de forma infinita na web.
• YUI: Yahoo! User Interface - É uma biblioteca Open-Source em Javascript.

Base de Dados

• CRUD: Create, Read, Update and Delete - CRUD são as 4 funções básicas de um sistema de base de dados.
• DBMS: Database Management System - Um DB é uma coleção de dados estruturada de forma organizada.
• SQL: Structured Query Language - É uma linguagem de consulta a base de dados relacional. A linguagem SQL é um grande padrão de banco de dados. Isto decorre da sua simplicidade e facilidade de uso. Ela se diferencia de outras linguagens de consulta a banco de dados no sentido em que uma consulta SQL especifica a forma do resultado e não o caminho para chegar a ele.

Servidores e Hosting

• CRON: Command Run ON - É um programa que executa comandos agendados nos sistemas operacionais do tipo Unix (como o Linux ou o Minix, por exemplo). O cron se encarregará de verificar a hora e determinar se existe ou não algum programa a ser rodado. Caso exista ele o rodará na hora e data solicitada.
• IIS: Internet Information Services - É um servidor web criado pela Microsoft para seus sistemas operacionais para servidores. Sua primeira versão foi introduzida com o Windows NT Server versão 4
• VPS: Virtual Private Server - É um servidor em ambiente compartilhado que possui acesso root (administrador) e processos independentes para cada conta VPS criada.

Protocolos

• FTP: File Transfer Protocol - É uma forma bastante rápida e versátil de transferir arquivos (também conhecidos como ficheiros), sendo uma das mais usadas na internet.
• HTTP: HyperText Transfer Protocol - É um protocolo de Aplicação do modelo OSI utilizado para transferência de dados na rede mundial de computadores. Também transfere dados de hiper-mídia (imagens, sons e textos).
• HTTPS: Secure HypterText Transfer Protocol - É uma implementação do protocolo HTTP sobre uma camada SSL ou do TLS. Essa camada adicional permite que os dados sejam transmitidos através de uma conexão criptografada.
• SSH: Secure Shell - São protocolos criptográficos que provêem comunicação segura na Internet para serviços como email (SMTP), navegação por páginas (HTTP) e outros tipos de transferência de dados.
• WAP: Wireless Application Protocol - É um padrão internacional para aplicações que utilizam comunicações sem fio.

Padrões e Acessibilidade

• 508: Section 508 - Seção 508 é uma série de padrões a nível tecnológico sobre acessibilidade.
• W3C: World Wide Web Consortium - É um órgão internacional que rege as normas de desnvolvimento web.
• WAI: Web Accessibility Initiative - É uma iniciativa do W3C para que as páginas web tenham a capacidade de serem disfrutadas por pessoas com algum tipo de deficiência.
• WCAG: Web Content Accessibility Guidelines - São uma série de regras sobre acessibilidade publicadas pela WAI.

Linguagens Cliente

• AJAX: Asynchronous JavaScript And XML - É o uso sistemático de tecnologias providas por navegadores, como Javascript e XML, para tornar páginas mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações. AJAX não é uma tecnologia, são realmente várias tecnologias trabalhando juntas, cada uma fazendo sua parte, oferecendo novas funcionalidades.
• DOM: Document Object Model - É uma especificação do W3C, independente de plataforma e linguagem, onde pode-se alterar e editar a estrutura de um documento. A API DOM oferece uma maneira padrão de se acessar os elementos de um documento, além de se poder trabalhar com cada um desses elementos separadamente, e por esses motivos criar páginas altamente dinâmicas.
• JS/ECMAScript: JavaScript - É uma linguagem de programação baseada no navegador, que foi inicialmente criada para atender, principalmente, as necessidades de validação de formulários no lado cliente e interação com a página.

Desenvolvimento

• CRAP: Contrast, Repetition, Alignment, Proximity - É uma metodologia de desenvolvimento aplicada as estruturas das páginas web.
• CVS: Concurrent Versions System - É um sistema de controle de versão para compartilhar código com outros desenvolvedores em projetos colaborativos.
• GUI: Graphical User Interface - É uma interface gráfica que permite ao usuário interagir com o computador de uma forma amigável.
• SVN: Subversion - Uma outra ferramenta para controle de versão.
• WYSIWYG: What You See Is What You Get - Significa a capacidade de um programa de computador de permitir que um documento, enquanto manipulado na tela, tenha a mesma aparência de sua utilização, usualmente sendo considerada final a forma impressa.

Gráficos e Imagens

• CMYK: Cyan Magenta Yellow Key - CMYK é um modelo de cores baseado nos diferentes níveis do Ciano, Magenta e Amarelo.
• FLA: Flash Authoring File - São arquivos de saída do Flash
• GIF: Graphics Interchange Format - É um formato de imagem de mapa de bits muito usado na web, quer para imagens fixas, quer para animações.
• JPEG: Joint Photographic Experts Group - Trata-se de um formato de compressão, com perda de dados, aplicado em imagens fotográficas. A perda de dados é proporcional ao fator de compressão desejado. As extensões de arquivos para este formato são .jpeg , .jfif , .jpe e .jpg , este último, o mais comum.
• PNG: Portable Network Graphics - É um formato de dados utilizado para imagens, que surgiu em 1996 como substituto para o formato GIF, devido ao facto de este último incluir algoritmos patenteados.
• PSD: PhotoShop Document - São os arquivos com o qual trabalha o Photoshop.
• RGB: Red Green Blue - É um modelo de cores baseado nos diferentes níveis de Vermelho, Verde e Azul.
• SVG: Scalable Vector Graphics - SVG é um sistema XML para escrever gráficos vetoriais de 2 dimensões.
• SWF: Small Web Format/ShockWave Flash - É um formato de gráficos usado para criar animações.

E-Commerce

• AVS: Address Verification System - Ponto de referência adicional para autenticar o usuário do cartão, utilizado em geral por vendas via telemarketing / e-commerce.
• CSC/CVV: Card Security Code/Card Verification Value - É uma ferramenta de segurança que proporciona uma maior segurança contra fraudes. Sâo aqueles 3 últimos números presentes nos cartões de crédito.
• MID: Merchant ID - Um MID é um identificador único ligado as companhias.
• FAQ: Frequently Asked Questions - É uma lista de perguntas e respostas mais comuns de uma aplicação.

Otimização para motores de busca

• CPC: Cost Per Click - CPC é o valor que pagam para cada vez que um usuário faz um clique.
• CPM: Cost Per 1000 Impressions - É o valor que se paga a cada 1000 impressões.
• CTR: Click Through Rate/Ratio - É a quantidade de usuários que fazem cliques frente uma quantidade de impressões de página.
• PPC: Pay Per Click - É um modelo muito usado na internet onde você paga após os usuários efetuarem clicks.
• PR: PageRank - É um algotítimo usado para medir a popularidade de um site.
• SEO: Search Engine Optimization - É o procedimento de otimização das aplicações web para obter melhores resultados nas buscas.
• SERP: Search Engine Results Page - É uma lista de páginas devolvidas pelo buscador com base na busca realizada pelo usuário.

Segurança

• XSS: Cross-Site Scripting - XSS é uma vulnerabilidade de segurança onde o atacante pode executar código malicioso.
• CSRF: Cross-Site Request Forgery - CSRF é uma vulnerabilidade de segurança onde o atacante implanta código malicioso em uma página e esta permite realizar suas funções.

Destinos

• CNAME: Canonical Name - Um CNAME é um alias do hostname.
• DNS: Domain Name System - São como uma lista telefônica da internet. Eles dão a direção de uma máquina associada a um domínio.
• DTD: Document Type Definition - Contém as regras que definem quais as tags que podem ser usadas em um documento XML e quais os valores válidos.
• ICANN: Internet Corporation for Assigned Names and Numbers - O ICANN é uma entidade sem fins lucrativos, multilateral, que organiza a concessão de domínios e de endereços IP no mundo.
• IP: Internet Protocol - É um protocolo usado entre duas máquinas em rede para encaminhamento dos dados.
• SLD: Second-Level Domain - SLD é um domínio debaixo das TLD’s
• TLD: Top-Level Domain - É a última parte do nome de um domínio, por exemplo: .com, .br.
• URL: Uniform Resource Locator - É o endereço de um recurso (um arquivo, uma impressora etc.), disponível em uma rede; seja a Internet, ou uma rede corporativa, uma intranet. Uma URL tem a seguinte estrutura: protocolo://máquina/caminho/recurso.
• WWW: World Wide Web - É um sistema de documentos em hipermídia que são interligados e executados na Internet.

O W3C disponibiliza uma lista de browsers alternativos para pessoas com algum tipo de deficiência que eu desconhecia, e que com certeza são de suma importância, divididos em 5 categorias:

• Browsers especializados
• Leitores de Tela
• Browsers adaptáveis
• Browsers de Voz
• Outros métodos de acesso

Se você não conhecia, fica aí a dica, é uma boa pra você poder testar seu site e verificar se está dentro de padrões aceitáveis.

Acessibilidade com certeza é um tema que devemos dar um pouco mais de atenção, e com algumas histórias, é uma forma muito boa de nos recordar-mos de pontos cruciais no desenvolvimento de nossos sites:

Via: Anieto2K.

Eu, como quem não quer nada, estive dando uma olhada no site da Universidade Braz Cubas, que fica aqui na região, procurando informações sobre cursos, e fiquei meio decepcionado com o site deles, apesar deles serem uma universidade muito conceituada, seu site peca em conceitos de usabilidade e acessibilidade, não precisa ser um guru da área para ver isso, aliás, quem sou eu para estar falando isso, mas não aguentei e quis compartilhar isso com vocês. Tudo começa quando você tenta encontar alguma forma de entrar em contato com eles por e-mail, opa, mas onde? Não existe forma alguma de contato com a Universidade, nem um formulariozinho sequer, a não ser um disque processo seletivo, que com certeza, ligando pra lá, você aguarda com alguma musiquinha bem chata, e depois eles te passam um outro telefone para você estar ligando. Se alguém por um acaso achar um formulário de contato me avise.

Uma outra coisa que eu achei tão mal pensada foi a seguinte, na página institucional do site, se você clicar na opção de aumentar o tamanho da fonte do site para facilitar a leitura, por incrível que pareça, ele aumenta o tamanho da fonte do rodapé, e o resto do site continua na mesma, não, não é brincadeira, faça o teste você mesmo, onde fica a acessibilidade aí? Veja uma screenshot abaixo:

E por último é a área do aluno, onde eles querem passar a imagem de que o usuário é burro:

Primeiramente colocam a informação do lado do campo input de que não é permitido pontos ou traços, e depois, logo abaixo, em vermelho: “Lembre-se, sempre digite nos campos acima somente números sem traços ou pontos.”. Espera aí, acho que não é pra tanto, existem soluções hoje para que ao usuário ao digitar um ponto por exemplo alí no campo, ele não seja aceito, o próprio Élcio, ensinou em um artigo como fazer isso facilmente usando Expressões Regulares, mas eu acho que a equipe de desenvolvimento não está nem aí pra isso, bem, particularmente eu aconselho a eles fazerem um curso lá na Visie. E você, o que acha, achou mas algum erro pitoresco no site? Deixe aqui a sua opnião.

Muitas pessoas não sabem, mas é possível instalar uma barra de acessibilidade no Opera, ela é muito parecidíssima com a extensão Web Developer do Firefox. Ela possiu links rápidos para validação do código, opção de habilitar e desabilitar o css, analisador de contraste de cores, opção de vizualização da tela do seu browser em diferentes resoluções, e várias outras coisas bem interessantes. Se você usa o Opera, confira você mesmo.

Quando estamos desenvolvendo um site, é habitual e recomendável utilizar-mos links para pular entre seções para aqueles que utilizam leitores de tela possam navegar rapidamente entre as várias seções da página sem ter que esperar que a mesma seja lida totalmente. Por exemplo, é recomendado criar-mos links que saltem do menu ao conteúdo para que o mesmo não seja lido várias vezes dentro de um mesmo site.

Esses links ficam invisíveis para aqueles que usam navegadores normais. A técnica mais usada é a propriedade display:none.

.oculto {
    display:none
}

Logo, o HTML fica da seguinte forma:

<a class="oculto" href="conteudo">Ir ao conteúdo</a>

Só que existe um problema que alguns leitores de tela não lêem conteúdo oculto com essa propriedade, e outros lêem normalmente, quer dizer, o link está alí para proporcionar ajuda as pessoas e não é lido. Existe uma outra técnica para acabar com esse problema que visa garantir uma maior compatibilidade. Ao invés de display:none, usamos o seguinte:

.oculto {
    position: absolute;
    top: -1600px;
}

Simples, agora você tem a certeza de que o conteúdo estará disponível a todos os leitores de tela.

Em um artigo anterior, eu falei como fazer o uso correto da tag alt em imagens, como vocês podem ver, é rotineiro os usuários usarem a tag alt como tooltip, mas essa não é a verdadeira função dessa tag, sua função é proporcionar um texto altenativo caso as imagens não sejam carregadas, por exemplo, os leitores de tela, eles lêem o texto do atributo para o usuário. Um outro exemplo é o Google Image Searchs, ele não faz o uso das tags meta para indexar as imagens em seu banco, ele também faz o uso das tags alt, por isso a importância de se fornecer um texto que tenha conivência com as imagens.

Exemplos de má uso do Texto Alternativo

• Nas tags alt só devem conter texto alternativo, não é permitido usar tags do HTML.
• alt=”nome_da_imagem.jpg”: Não importa pra gente qual o nome da imagem.
• alt=”alt text”: Introduzido por alguns editores de HTML como um lembrete.
• alt=”Clique aqui!”: Não tem nenhuma finalidade útil, ao menos que esteja em uma imagem “Clique aqui”.
• Veja aqui mais exemplos.

Exemplos de uso correto do Texto Alternativo

• Jonathon Delacour: Ele usa um banner em seu site com um símbolo chinês, no atributo alt ele coloca o seguinte: Site logo:
  xin, the Chinese character for heart, que significa: Logo do site: Xin, o caractere chinês para o coração.
• Leslie Harpold: Tem um banner na página que inclui o nome do site “The Historical Present”, e a tagline: “Hypermodernism has a posse”. Como texto alternativo ele usa: “the historical present: hypermodernism has a posse”
• Simon Willison: Na etiqueta “W3C XHTML 1.0″ ele usa “Valid XHTML 1.0!”

Referências

• ALT texts in IMG
• Simple guidelines on using ALT texts in IMG elements
• Mini−FAQ about the alternate text of images
• Provide alternative text for all images
• ALT attribute
• How to Create Accessible Graphics
• What is meant by a text equivalent?
• On accessible advertising