Image Image Image Image Image
Scroll to Top

Topo

desenvolvimento web

14

fev
2012

Sem Comentários

Em Blog

Por Allison

Testando as extensões do Chrome para desenvolvedores

Em 14, fev 2012 | Sem Comentários | Em Blog | Por Allison

Fonte: Fernando Henrique/IMasters


O Mozilla Firefox sempre foi o meu browser favorito devido a suas inúmeras extensões que me auxiliavam diariamente. Mas quem o usa sabe que, na verdade, ele é um comedor de memória RAM e, ultimamente, ele anda travando mais do que gostaríamos.

Pensando nisso e observando como o Google Chrome tem crescido nas estatísticas de acesso do Google Analytics dos sites que administro, resolvi colocá-lo à prova no meu cenário.

Me surpreendi muito ao acessar a galeria de extensões para desenvolvimento web e ver o grande número de ferramentas que estavam disponíveis. Com isso, seguem as extensões, que, ao meu ver, são mais úteis e interessantes para o meu dia a dia

  • 960 Grid System Overlay (Unofficial): É uma ferramenta não oficial para os usuários do sistema de Grid 960 GS. Com ela, você pode visualizar as colunas do site e ver se não ficou nada fora do planejado.
  • Awesome Screenshot – Capture & Annotate: Muito útil para fazer um screenshot, que pode ser feito de três maneiras: uma seleção da página, apenas a área visível do seu browser, ou a página inteira. Ele permite, ainda, que você faça pequenas modificações na imagem, como esmaecer alguma área, sinalizar algum lugar que queira dar destaque e até mesmo fazer algum recorte extra. Após editar a imagem, você pode salvá-la em seu computador ou deixa-la online.
  • Color Pick: Ferramenta usada para capturar alguma cor que está na tela. Com dois cliques, você consegue recuperar uma cor sem precisar abrir programas de edição de imagem.
  • IE Tab Classic: Sim, ainda existem sites que só abrem no Internet Explorer (principalmente os de bancos). Difícil de acreditar, mas é a mais pura verdade. Com essa ferramenta, você “pula” de um navegador para outro em um clique; sem precisar perder tempo abrindo o IE. Ela também é útil para fazer testes rápidos no IE, mas para essa função eu aconselho uma ferramenta separada, chamada IE Tester. Ela é gratuita e tem sido muito útil para mim.
  • ImagePropertiesContextMenu: Se você precisa conseguir informações, como tamanho, dimensão, ou URL de uma imagem, esta ferramenta irá lhe ajudar muito. Com um clique do botão direito do mouse em cima da imagem, você verá a opção de inspeção completa.
  • IP Addressand Domain Information: Com esta ferramenta, você consegue inspecionar o domínio que está visitando e obter informações, como IP, GeoLocalização (nem sempre muito precisa), whois, e até outros sites que possam estar hospedados no mesmo ip.
  • Mobile Resizer: Ferramenta simples, mas útil para conferir se o seu site se “encaixa” em algum dispositivo mobile. Ela basicamente redimensiona o navegador para o tamanho de tela do aparelho selecionado, entre eles temos modelos da Apple, Android e Blackberry.
  • Mozbar: Toolbar do site SEOmoz para conseguir algumas informações e métricas de SEO (Page Authority, Page Rank) da página e dos domínio visitados. Ela permite, também, conseguir informações sobre o servidor, como IP e país. Além disso, é bastante útil para fazer análise de metatags e busca de links e palavras-chave dentro do site. Existe uma versão paga, que possui mais funcionalidades.
  • Palette for Chrome: Que tal construir uma paleta de cores baseada em uma imagem em apenas alguns segundos? Com esta ferramenta, é fácil. Como não tenho muita afinidade com design e às vezes preciso desempenhar esse papel, essa ferramenta e o colorotate são minhas aliadas para algumas “gambiarras visuais”.
  • PerfectPixelbyWellDoneCode: Há certos clientes e designers que conseguem reparar no mínimo pixel fora do lugar, comparando com o layout. Esta ferramenta é para você evitar que isso aconteça. Com ela, é possível criar uma “layer” transparente, com o layout em cima do HTML. Assim, é possível fazer a comparação entre como o site está e como deve ficar.
  • ruul. Screenruler: Depois de descobrir que há algo fora do lugar, com ajuda da ferramenta anterior, que tal usar uma régua digital para medir quantos pixels será preciso mexer para que tudo fique em ordem? Ela também possui algumas medidas extras, como espessura de bordas, altura de linha e tamanho de fonte. Podem ser usadas quantas réguas for preciso em uma única página.
  • Tape: Algumas vezes, uma simples régua não ajuda a resolver os problemas de medidas em um layout e são necessárias outras ferramentas, como um grid e linhas de marcação. Para esses casos, esta ferramenta é a mais indicada. É um pouco difícil de se acostumar com ela no início, mas depois que se pega o jeito, ela vira uma ferramenta indispensável.
  • Web Developer: Esta extensão deve ser a preferida de nove entre dez desenvolvedores web. Ela é uma mão na roda para o uso diário e contínuo. As principais funções são a de manipulação de CSS, forms e imagens, redimensionar o tamanho da tela, validação de CSS e HTML, além de possuir ferramentas, como seletor de cores e uma régua.
  • YSlow: Ferramenta de análise das páginas web, para descobrir informações como a velocidade de carregamento, além de fornecer dicas de como melhorar a estrutura da página para que seja carregada mais rápido.
  • Firebug Lite for Google Chrome™: Outra ferramenta indispensável. Serve para análise e modificações em tempo real do HTML, JavaScript e CSS do site (essas alterações só duram até a página ser recarregada), além de fornecer um console de erros e monitoramento de JavaScript e uma inspeção do DOM da página.

Ferramenta do desenvolvedor

O Chrome ainda possui uma ferramenta bem semelhante ao Firebug, mas na minha opinião é um pouco inferior. É a “ferramenta do desenvolvedor”, que pode ser habilitada pelo menu Configurações (aquela chave de boca que fica no canto superior direito do navegador), Ferramentas, Ferramentas do desenvolvedor ou pelo atalho Ctrl + Shift + I.

Espero ter ajudado você a optar pelo Chrome no seu ambiente de desenvolvimento. Mas, apesar do crescimento do uso desse browser, lembre-se sempre de testá-lo em vários outros navegadores e sistemas operacionais, isso ajuda muito a não correr o risco de ir apresentar seu trabalho para o cliente e ocorrer algum problema de visualização.

Tags | , , ,

23

dez
2011

Sem Comentários

Em Blog
CSS

Por Allison

OOCSS ou CSS do jeito certo

Em 23, dez 2011 | Sem Comentários | Em Blog, CSS | Por Allison

O CSS é algo muito simples de ser escrito mas com apenas um deslize todo o código pode transformar o projeto em um inferno. Saiba como podemos evitar isso.

O conceito

Escrever CSS é fácil. Isto não deveria ser um problema, mas é. Por ser fácil os desenvolvedores acabam se esquecendo de princípios básicos, técnicas e metodologias que nos ajudam a manter o controle durante a produção. Entenda que algumas dessas metodologias não precisam ser aplicadas em sites pequenos. Por exemplo, aqui no Tableless eu não modularizo o CSS em vários arquivos por um ou dois motivos: 1) Somente eu tenho acesso ao código. 2) O site não é grande. Ele tem meia dúzia de páginas e funcionalidades.

Mas quando falamos de sites grandes (em visitação e quantidade de páginas) existem algumas restrições: velocidade de carregamento, compatibilidade entre browsers, manutenção, flexibilidade para mudanças etc. Tudo isso deve ser pensado e planejado antes de colocarmos a mão na massa. É no planejamento que iremos estruturar como serão feitas as manutenções posteriores, como iremos mudar elementos principais sem interferir no layout como um todo.

O CSS Orientado a Objeto (em inglês OOCSS – Object Oriented CSS – Sendo sincero, esse nome é muito ruim) tem como conceito técnicas que já falamos durante muito tempo, mas que como o Responsive Web Design, está ganhando força somente agora.

Princípios

O OOCSS está baseado em dois pontos cruciais que são a separação da estrutura e do visual e a independência do container em relação ao conteúdo.

Separação da estrutura e do visual

A maioria dos elementos estilizados em uma página web tem diferentes características visuais que são repetidas em diferentes contextos e situações. Algumas características são fáceis de identificar como cores, títulos, gradientes, bordas etc. Essas são características visuais. Contudo, existem também as características de estrutura, que é onde nós “montamos” os elementos, definindo tamanhos, distâncias, medidas etc. Essas características também são repetidas em diversos elementos no decorrer do site.

A ideia é que nós separemos as características visuais das características estruturais, tornando-os modulares de forma que possamos reutilizá-los em diferentes elementos tendo resultados iguais.

Imagine 3 elementos diferentes, como um botão, uma caixa de chamada e um destaque que normalmente fica na lateral do site. Eles tem características estruturais diferentes, como width, height, paddings, margins etc. Mas as características visuais são iguais, como por exemplo o border-radius, background e o box-shadow. O CSS normal ficaria assim:

.botao {
width:100px;
height:50px;
text-align:center;
font:bold 13px verdana, arial, tahoma, sans-serif;
border-radius:10px;
background: url(gradients.png) repeat-X center;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
 
.chamada {
width:250px;
float:left;
font:bold 23px verdana, arial, tahoma, sans-serif;
border-radius:10px;
background: url(gradients.png) repeat-X center;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
 
.destaque {
width:300px;
height:250px;
border-radius:10px;
background: url(gradients.png) repeat-X center;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

Para reutilizar de forma inteligente as características iguais destes elementos e prevendo que talvez seria criado outros elementos com as mesmas características – já que o designer mantém sempre (quase sempre, né?) um padrão visual estético – é interessante que criemos uma classe que componha estas características e apliquemos essa classe nos elementos necessários. Assim:

.botao {
width:100px;
height:50px;
text-align:center;
font:bold 13px verdana, arial, tahoma, sans-serif;
}
 
.chamada {
width:250px;
float:left;
font:bold 23px verdana, arial, tahoma, sans-serif;
}
 
.destaque {
width:300px;
height:250px;
}
 
.boxEffects {
border-radius:10px;
background: url(gradients.png) repeat-X center;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
 

Em cada elemento que necessitasse destas características visuais, basta inserir a classe .boxEffects ao elemento.

Entenda que o abuso dessa técnica pode trazer complicações. Você não vai criar uma classe para cada característica visuais e sair aplicando essas classes em tudo quanto é elemento. Você estaria voltando a 1999 onde tínhamos aquele velho problema de misturar as camadas de formatação e informação.

Independência dos containers e do conteúdo

Imagine que você crie algum estilo para a formatação de algum elemento como por exemplo um parágrafo e atrela este estilo para os parágrafos localizados no article principal:

article p {
font:bold 13px verdana, arial, tahoma, sans-serif;
line-height:18px;
letter-spacing:1px;
}

Mas então surge a necessidade de ter um parágrafo com as mesmas características no rodapé, por exemplo, mas com o tamanho da fonte maior! Você pode fazer assim:


article p, footer p {
font: 13px verdana, arial, tahoma, sans-serif;
line-height:18px;
letter-spacing:1px;
}

footer p {font-size:20px;}
O que é ainda é ruim, mas é muito melhor do que fazer assim:

article p, footer p {
font: 13px verdana, arial, tahoma, sans-serif;
line-height:18px;
letter-spacing:1px;
}
 
footer p {
font: 20px verdana, arial, tahoma, sans-serif;
line-height:18px;
letter-spacing:1px;
}
 

Onde duplicamos desnecessariamente vários estilos.

Com o OOCSS nós devemos transformas estes estilos em módulos para serem reutilizados e não atrelando os estilos a um elemento específico.

Isso acontece também quando já fizemos uma classe onde carrega os estilos comuns. Se voltarmos ao exemplo anterior, alguém pode fazer assim:

footer .boxEffects {...}

Estamos aqui atrelando a classe que antes era para ser algo genérico ao elemento footer. Cuidado ao fazer isso. Tenha um bom motivo antes de ir adiante.

Outras boas práticas

Existem algumas boas práticas que fazem parte do OOCSS e que melhoram muito o planejamento e a prática do desenvolvimento web:

Modularização de código CSS

Não estou falando aqui sobre a modularização de arquivos CSS, mas sim do Código. Essa modularização é feita sob medida para cada um dos projetos. O objetivo é que o código CSS seja reutilizado em várias partes da produção evitando que você crie mais código. É aconselhável que se defina padrões de código para os principais elementos do layout. A equipe pode fazer isso ou delegar esse importante trabalho para um desenvolvedor, que será responsável em criar os métodos e os padrões estruturais dos elementos.

Minimizar usos de seletores muito específicos

Encontre o meio termo. Não faça seletores muito específicos ou seletores muito genéricos. O CSS trabalha com especificidade: quanto mais específico, mais certeiro você é ao capturar um elemento, mas seu CSS fica mais engessado e consequentemente você usa mais código. Quanto mais genérico, mais elementos do mesmo tipo você formata, mas o risco de conflito de estilos aumenta. O ideal é encontrar o meio termo, onde você é tão específico e nem tão genérico.

Dependendo da forma que você utiliza os seletores os browsers podem ser ou não mais rápidos ao renderizar seu site. Já falamos disso aqui.

Formate elementos com classes modulares

A ideia é que ao criar uma nova página, você não tenha que criar novo código CSS. Se a página tiver a estrutura diferente mas os elementos tem características visuais iguais, aí está uma boa oportunidade para modularizar o código visual dos objetos.

Um exemplo para demonstrar essa prática é ao fazer botões para diferentes ações. Normalmente utilizamos os mesmos botões com cores diferentes para definirmos visualmente ações diferentes que o usuário pode tomar. O botão de SALVAR tem o mesmo formato de CANCELAR, mas a cor dos dois é diferente, sendo que o primeiro é verde o segundo vermelho. O código seria assim:

.botao {
display:inline-block;
padding:10px 20px;
font:13px verdana, arial, tahoma;
color:white;
text-decoration: none;
}

Este código cria toda a estrutura do botão. Agora falta definir as cores de fundo. Eu farei isso criando duas classes: btVerde e btVermelho. Essas classes serão utilizadas em pareceria com a classe botao

.btVermelho {background: red;}
.btVerde {background: green;}

Agora, o HTML ficaria assim:

<a href="#" class="botao btVermelho">Cancelar</a>
<a href="#" class="botao btVerde">Salvar</a>

Porque criei os nomes das classes btVermelho e btVerde em vez de btCancelar e btSalvar? Porque pode ser que exista algum botão que também seja verde, mas não tenha a ação de salvar. Assim deixo meu leque aberto para novas atribuições.

Concluindo

Seguir esses pequenos detalhes evitam uma série de problemas comuns no desenvolvimento client-side. A reutilização de código CSS se torna real, a velocidade do carregamento melhora e os problemas de manutenção são solucionados. A flexibilidade que teremos ao modificar o CSS será muito grande e não aumentaremos nosso código a cada modificação feita. A ideia é que seu código CSS fique sob controle. A utilização de frameworks e bibliotecas podem ajudar em muitos momentos.

Fonte: Diogo Eis/Tabless

Tags | , , , ,