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

O Internet explorer é um dos browsers mais ulrapassados que existem hoje em dia, desde versões antigas até a versão 7, possui várias falhas de segurança, problemas com css, problemas para se trabalhar com Flash, e isso para o mundo do desenvolvimento é o terror. E você usuário, já pensou em deixar de usar o Internet Explorer por apenas um dia e utilizar um browser de verdade? As alternativas são muitas, mas dentre elas, podemos citar as seguintes:

Firefox (Win/Mac/Linux)

Características básicas: É rápido, possui versão em português, possui um sistema de navegação por abas que agiliza e muito o processo de navegação. Possui também a opção de instalar novos temas e plug-ins. É o preferido de 10 entre 10 desenvolvedores web.

Mais informações | Download

Flock (Win/Mac/Linux)

Características básicas: É um browser que vem preparado para integrar-se a redes sociais como YouTube, Flickr, Facebook entre outras. Possui versões em português e também a opção de instalar novas extensões. Ele é baseado no mesmo motor do Firefox.

Mais informações | Download

Safari (Mac/Win)

Características básicas: De longe o mais rápido e simples de se utilizar, possui uma interface simples e agradável. Só não é muito utilizado pela comunidade pois não possui a opção de instalar temas e extensões.

Mais informações | Download

Opera (Win/Mac/Linux)

Características básicas: Um navegador rápido e seguro. Possui um cliente de BitTorrent para o download de arquivos. Possui versões em Português e também a opção de instalar Widgets.

Mais informações | Download

Referências

• ¡Terminemos con el Internet Explorer 6!
• End 6!
• Alternativas a Internet Explorer

Uma das coisas mais interessantes do Firefox é a possibilidade de você instalar extensões nele que podem lhe auxiliar e muito, seja para navegar, ou para o desenvolvimento web, e até hoje eu não entendo como tem muita gente ainda que não utiliza o Firefox, seja, ou por receio, ou por que o acha feio, não sei, mas isso fica para um próximo post, mas abaixo você pode ver uma lista de 30 extensões que eu encontrei no site Sentido Web, e podem auxiliar e muito você desenvolvedor:

CSS

• Aardvark: Permite ver atributos CSS, ID’s e Classes, selecionando elementos individuais na página.
• chromEdit: Permite modificar o CSS e o JavaScript de qualquer página.
• CSSMate: Edição de arquivos CSS.
• CSS Validator: Valida o CSS de suas páginas.
• CSSViewer: Visualiza propriedades CSS.
• EditCSS: Permite modificar os CSS carregados.
• IETab: Visualize suas páginas web no IE dentro do Firefox.
• Style Sheet Chooser II: Permite selecionar folhas de estilo alternativas para uma página.

Debug e Análise

• Firebug: Dispensa apresentações, a melhor ferramenta para análise e debug de HTML, CSS, JavaScript e Ajax.
• HTML Validator: Valida o HTML suas páginas de acordo com o W3C.
• JavaScript Debugger: Debug de JavaScript.
• Link Checker: Comprova se os links de uma página são válidos.
• Load Time Analyzer: Ferramenta para mostrar o tempo de carregamento de uma página.
• View Dependencies: Mostra informações de todos os arquivos usados ao carregar uma página.

Outros

• Clipmarks: Tire screenhots de lugares específicos de sua página.
• Codetech: Editor Web com a aparência do Dreamweaver.
• ColorZilla: Capture cores das páginas visitadas.
• FirePHP: Ferramenta para depurar PHP.
• Greasemonkey: Altere o comportamento de qualquer página web com esse plug-in.
• Measureit: Ferramenta para medir(em pixels), partes das páginas web.
• Platypus: Uma das melhores ferramentas para modificar uma página web.
• Poster: Permite interagir com WebServices e outras ferramentas web.
• Professor X: Mostra o conteúdo do header de uma página web.
• Screen grab: Tire Screenshots de suas páginas web.
• TestGen4Web: Grava a atividade dos usuários em páginas web.
• View Source Chart: Visualizador de código fonte.
• Web Developer: Uma coleção de ferramentas para desenvolvimento web.
• X-Ray: Permite ver o código fonte de uma página e alternar entre ambos de uma forma simples.

Artigo original: Sentido Web.

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.

Muita gente pensa que o HTML permite a codificação mal estruturada, por exemplo: <strong><em>alguma coisa</strong></em>. Mas isso não é verdade, se você for validar seu código, verá que ele está estruturado de uma forma errada. Usualmente os bowsers tratam de corrigir essa falha e é por isso que vemos as páginas corretamente.

Algumas vezes a falta da Tag de fechamento não representa problema para os browsers por que eles sempre irão codificar ambiguamente. Antigamente, era muito comum você ver alguém omití-las, como o </p>, mas hoje em dia é recomendado utilizar sempre as tags de fechamento, e para as tags <br>, <img> e <hr> você deve utilizá-las da seguinte forma: <br />, <img /> e <hr />, segundo as especificações do XHTML.

Muitas vezes quando vamos validar nosso código junto ao validador HTML do W3C, acabamos nos deparando com erros que as vezes não somos capazes de corrigir, ou, custa bastante tempo descobrir a causa d erro.

Apesar das explicações detalhadas de cada erro encontrado, na maioria das vezes o validador encontra erros que não etão diretamente relacionados com a sintaxe do código e com isso acabamos em um conflito. Abaixo vocês verão uma lista dos erros mais comuns em HTML:

Tags HTML dentro de um elemento SCRIPT

Um erro bastante comum é quando usamos uma linguagem de programação sob a outra de forma incorreta, especificamente quando utilizamos sentenças JavaScript sob linguagem HTML. Não, isso não é um erro, o erro está quando esquecemos de utilizar os caracteres de escape.

Forma Incorreta:

<script type="text/javascript">
<!--
  document.write("</p>");
// -->
</script>

Forma Correta:

<script type=”text/javascript”>
<!–
document.write(”<\/p>”);
// –>
</script>

Como podemos ver no exemplo acima, deve-se utilizar rimeiramente de uma barra invertida para obrigar o user-agent do usuário a entender que a barra que encerra o parágrafo não significa um comportamento especial, e sim, o fim de um bloco de parágrafo.

Ampersands (&) em URLs

Outro erro bastante comum são o de interpretação dos Ampersands em URLs, objetos, imagens e outros:

<a href="http://web.com/?id=12&num=3">Artigo</a>
<a href="http://web.com/?id=12&amp;num=3">Artigo</a>

A segunda opção é a maneira correta para escrita.

Ordem incorreta dos elementos

Outro erro bastante comum, é que em varios objetos aninhados, fechamso uma tag posterior, sendo que deveria ser fechada juntamente com a anterior:

<strong><em>Olá a todos</strong></em>
<strong><em>Olá a todos</em></strong>

A segunda opção é a maneira correta para escrita.

Uso do DOCTYPE em minúsculas

O tipo do documento estabelecido no início do código é sensível a maiúsculas, portanto você deve respeitá-lo sem alterá-lo.

Se requer um sub-elemento no cabeçalho

O elemento Title não só serve para estabelecer um título para página, mas sim é um elemento obrigatório que você deve estabelecer em suas páginas web.

Letras maiúsculas em tags XHTML

Em XHTML, todos os elementos da página devem ser escritos em minúsculo, por exemplo, onMouseOver é inválido em XHTML, mas onmouseover já é válido.

Artigo original: WDG.

Em um artigo anterior podemos ver que a tag <q> não funciona no Internet Explorer, pra quem não sabe, a tag <q> tem função de indicar citações, as famosas aspas para indicar a fala de alguém. Mas hoje existe uma forma muito simples de contornar isso, apenas utilizando de um arquivo HTC chamado fixQuotes_en.htc, desenvolvido por Will code 4 beer, basta utilizá-lo da seguinte forma:

Basta chamar o arquivo via CSS:

<style type="text/css">
q { behavior:url(fixQuotes_en.htc); }
</style>

Para maiores informações, visite o artigo original: Fixing the Quote Tag in Internet Explorer.

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.

Leitores de tela, você já ouviu falar? Sabe pra que serve? Eles são browsers para deficientes visuais, ou seja, todo o conteúdo de um página web será lido pelo programa para o deficiente que está o usando no momento, e o Audio Browser é um deles, baixei esse programa e comecei a fazer alguns testes com o mesmo e fiquei muito satisfeito com os resultados, é bom saber que alguém se preocupa em desenvolver programas desse tipo. Mas também de nada adiantaria se você não desenvolver a sua página de uma forma acessível, ou seja, ele não consegue ler uma página que tem todo o seu conteúdo em flash, por isso, antes de desenvolver páginas desse tipo deve-se pensar também em desenvolver uma versão em HTML. O programa é bem simples e sua interface é bem amigável, como você pode ver abaixo:

Tela principal do programa:

Continuar lendo »

Essa semana tive a oportunidade de experimentar o WebbIE, um browser para deficientes visuais, ele é bem leve, possui uma interface amigável e simples, seus botões usam cores bem vivas e em alto contraste, que é para não dificultar em hipótese alguma o seu uso. Nele você vê basicamente as suas páginas em modo texto, mas também pode alternar para o modo de vizualização normal da página, como se estivesse usando um outro browser qualquer.

Além do Browser, ele também possui um programa para leitura de Feeds e outro para ouvir Podcasts, vou deixar aqui alguns screenshots para vocês darem uma olhada:

Tela Principal do Browser

Continuar lendo »