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.

Lista de browsers alternativos

Postado por: Pedro Rogério em
Web Accessibility Initiative

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:

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.

6 motivos para que o IE6 deva deixar de existir

Postado por: Pedro Rogério em

Adaptação do artigo original de Anieto2K.

Quem nunca passou por um problema com o IE6 que atire a primeira pedra. Abaixo você vê 6 motivos para que esse browser deveria deixar de existir:

  • Falta de suporte a transparência em imagens PNG
  • Problemas com float + margin/padding
  • Impossibilidade de utilizar pseudo-classes e pseudo-elementos
  • Não há suporte CSS para min-height
  • Problemas com imagens de background nos links com CSS
  • É possível travar o navegador com um simples código

Tem mais algum motivo, coloque aí nos comentários.

Como evitar o resize de textareas no Safari

Postado por: Pedro Rogério em

Até o lançamento do Safari para o Windows eu nunca tinha o utilizado, mas por esses dias descobri uma coisa bastante interessante, se você utiliza o Safari, experimente peguer um formulário qualquer, vá até o textarea e tente redimensioná-lo. O Safari suporta essa opção, como você pode ver na imagem abaixo:

Textarea com resize

Não ficou satisfeito e quer fazer um teste? Dê uma olhada nesse exemplo. Mas se você não quer que isso aconteça nos seus formulários, existe uma maneira bem simples de corrigir isso, basta utilizar as propriedades do CSS min-height, max-height, min-width e max-width, onde iremos travar a altura e a largura mínima. Vejamos um exemplo:

CSS


textarea {
	min-width:400px;
	max-width:400px;
	min-height:250px;
	max-height:250px;
	width:400px;/* Utilizado para o IE6 */
	height:250px;/* Utilizado para o IE6 */
}

Experimente agora tentar redimensionar esse textarea.

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:«1...910111213141516»