O jQuery e os seus vários plugins/extensões vão desde efeitos visuais até controle de dados via ajax. Ao utilizar o jQuery também diminuímos a incompatibilidade das páginas/sites entre os diferentes browsers.

O jQuery é relativamente fácil de utilizar e implementar com os temas de wordpress mesmo para os não programadores. No site www.bennadel.com têm um video, em inglês, que explora as potencialidades de usar-mos o jQuery no nossos sites. O vídeo está dividido em 26 capítulos que vão desde o mais básico até utilizar ajax e como aumentar as capacidades do jquery por extensões.

Publicado em Iliquido

jQuery – Iniciação e Exploração.

Algumas funcionalidades ou ferramentas disponíveis:

• Desactivar, consultar, validade, editar o código CSS e HTML
• Obter informações sobre todos os elementos de uma página
• Pre-visualizar a página para diferentes destinos, sejam PDA’s, ou outras resoluções.
• Utilizar uma régua para medir distancias e elementos
• etc.

Depois de instalada a extensão, iremos ter um novo menu e uma nova barra com várias ferramentas e opções.

Disable

No menu Disable podemos desactivar vários componentes do Firefox, como por exemplo a cache, javascript, java, as cores da página/site actual, etc..

Cookies

No sub-menu Cookies, encontramos várias funções relacionadas com as mesmas, tais como, visualizar cookies para uma determinada sessão num site, adicionar, apagar ou restringir cookies.

CSS

Um dos aspectos do webdesign que provoca maior dor de cabeças é os CSS(folhas de estilo) e a sua implementação pelos diversos browser/navegadores de Internet. Com estão extensão podemos ver directamente na página qual o CSS que está a ser utilizado e até podemos editar a folha de estilos no próprio Firefox e verificar imediatamente as alterações. Neste menu também podemos facilmente desactivar a folha de estilos CSS utilizada para verificar como o nosso site é visto por alguns bots, como por exemplo o GoogleBot…

Na imagem acima podemos verificar que um elemento do site foi seleccionado(1 a vermelho), neste caso o título de um artigo anterior, na barra do webdeveloper(2 a vermelho) temos o encadeamento dos vários elementos/secções do HTML, e na parte de baixo(3 a vermelho) temos o código CSS utilizado.

Forms

No menu Forms temos diversas funções disponíveis para os formulários. Podemos obter a informação e detalhes de todos os campos do formulário, mudar o método de GET para POST, ou vice versa, entre outras funções.

Images

Como nas outras secções anteriormente referidas, no menu Images temos várias funções relacionadas com imagens. Podemos desactivar a visualização de imagens, verificar as dimensões, o caminho onde se encontram, o texto alternativo utilizado, etc.. Esta opção permite verificar que não esquecemos de nada importante relativo às imagens quando as utilizamos num site.

Information

No menu Information podemos obter mais alguma informação da estrutura do/a site/página. Com as opções Display Id & Class Details e Display Element Information podemos ver as várias classes CSS e ID’s, que irá facilitar na edição do código CSS para correcção de algum detalhe.

Outra opção útil é a visualização da ordem das várias div’s utilizadas no código HTML(Display div order).

Podemos visualizar a palete de cores utilizadas ou visíveis na página(View Color Information), o tamanho dos vários ficheiros utilizados para construir a página(View Document Size), etc…

Neste menu podemos sobrepor guias para alinhar os vários elementos em grelhas(Display lines guides), utilizar uma régua(Display Ruler) para medir elementos, editar o código HTML e verificar imediatamente as alterações, verificar como fica o site/página em aparelhos portateis tipo pda(Small Screen Rendering).

As opções deste menu servem para destacar alguns elementos da página, como cabeçalhos, links externos, frames, tabelas, células de tabela, blocos, etc..

Resize

Aqui podemos redimensionar o browser/navegador para outras resoluções para verificar que o site/página funciona correctamente. Podemos utilizar a função de zoom para aumentar determinada secção.

Tools

Neste menu temos várias opções para validar o CSS, Feed, HTML, verificar os links, a consola do Java e Javascript.

View Source

Como o próprio nome indica, serve para visualizar o código fonte. Podemos associar um editor para visualizar o código fonte através do menu Opções

Opções

Podemos aqui alterar o comportamento desta extensão e acrescentar mais algumas funcionalidades.

Download

Web Developer

Publicado em Iliquido

Extensão Web Developer para Firefox