30 Extensões Firefox para Desenvolvedores Web

Postado por: Pedro Rogério em

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.

A semântica e as tags <kbd>, <var> e <dfn>

Postado por: Pedro Rogério em

Com certeza, muita gente nem sequer já utilizou essas tags, eu, particularmente, também nunca as utilizei, e também sabia muito pouco sobre sua verdadeira utilidade, mas basta um pouco de pesquisa que você acaba encontrando o que precisa. Agora vamos ver o significado de cada uma:

<kbd>

Com essa tag você pode indicar ao usuário que ele deve utilizar alguma tecla de seu teclado para realizar determinada função:


<p>Você deve utilizar a tecla <kbd>ESC</kbd> para encerrar o aplicativo</p>

Também recomendo seu uso para indicar ao usuário o uso de accesskey na página.

<var>

Serve para indicar uma variável de alguma linguagem de programação. Possui um estilo por padrão, no qual transforma a tipografia em monospace:


<p>No código JavaScript, a variável <var>validarCampo</var> é utilizada para...</p>

<dfn>

Introduz um termo, uma definição a seu texto:


<p>Eu quando digo <dfn>braço curto</dfn>, estou me referindo a um programador preguiçoso.</p>

Forma correta de utilização dos cabeçalhos HTML

Postado por: Pedro Rogério em

Títulos HTML – Do h1 ao h6

Para aqueles que não sabem, os cabeçalhos HTML, ou títulos, estão divididos em 6 níveis: h1, h2, h3, h4, h5 e h6, os números servem para indicar cada número do cabeçalho, sendo que o de nível 1 tem uma maior importância, e o de nível 6, menor importância. Por exemplo, para descrever o título de uma página, você deve utilizar o h1, ao invés de fazer isso:


<p class="titulo">Título do site</p>

Para títulos de menor importância, deve-se usar o h2, e sucessivamente os cabeçalhos de menor nível, dessa forma você está sendo semântico e os Search Engines agradecem.

Por que o HTML permite a codificação mal estruturada?

Postado por: Pedro Rogério em
HTML

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.

Os 6 erros mais comuns em HTML

Postado por: Pedro Rogério em

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.

Páginas:«12345678»