29 de novembro de 2010

Relação sites e dispositivos móveis

Como seu site ou blog é visto em dispositivos móveis?



Já parou pra pensar em como seu site ou seu blog é visto em dipositivos móveis? A web já não se limita mais a apenas PCs e Notebooks, estamos em uma era onde ocorre uma explosão de dispositivos movéis no mercado, como celulares e smarthphones.

Na campus Party 2010, houve uma discussão(...) sobre dispositivos móveis e mobilidade que contou com Hilton Mendes, diretor de Terminais e Inovação da Vivo, Nick Ellis, do blog Digital Drops, Marcelo Castelo, diretor da F.biz, e Ricardo Longo, diretor da Fingertips. Veja alguns comentários ditos por eles (fonte):

Nick Ellis:
“A mobilidade é o presente da humanidade, a prova disso é que todos estão conectados aqui.”

Ricardo Longo:
“Aproveitamos a oportunidade que o iPhone trouxe, mas sabíamos desde o começo que não podíamos nos restringir à plataforma da Apple. A ideia é trabalhar sempre com novas demandas.”

Marcelo Castelo:
“A internet dá acesso ao mundo. Mas é o conteúdo que instiga as pessoas a usarem a tecnologia.”

Hilton Mendes:
“Ninguém pode negar que houve uma mudança de paradigmas depois do iPhone.”

Até 2020, 2 bilhões de dispositivos móveis estarão conectados na internet no Brasil (fonte) e, acho eu, que um dos maiores incentivadores para esse crescimento são os planos de telefonia que torna o acesso a web por celulares cada vez mais barato e rápido, já é hora de se preocupar com o desenvolvimento de sites válidos para esses dispositivos, sabe por quê? vamos aos números:

Em uma lista com as 500 maiores empresas brasileiras, apenas 12% dispõem de uma versão mobile de seus portais – excluindo as do setor financeiro. A pesquisa realizada pela em empresa de soluções móveis Mowa, apontam ainda que 95% das empresas não podem ser consideradas totalmente mobilizadas(fonte).

Em um ano foram comercializados oficialmente 175 900 iPhones no País, segundo a consultoria Gartner.(fonte: Portal Exame – 21/08/09).

Pesquisa feita empresa americana InsightExpress concluiu que a publicidade para celular causa um impacto quase cinco vezes maior do que aquela feita para a internet e vista no computador (fonte).

Essas pesquisas mostram alguns motivos pelo qual web designers devem mais atenção para o desenvimento de páginas para dispositivos móveis. E falando nisso, uma ferramenta muito interessante é o ready.mobi que analiza seu site mostra se é apto para ser exibido em dispositivos móveis ou não.

22 de novembro de 2010

CSS Tutorial - CSS Reset

Limpando a lousa antes de desenvolver seu site

css reset

Quando se usa diferentes browsers para testar determinada página da web podemos ver que as tags HTML em seu estado de dafault(sem formatações) são interpretadas de uma forma um pouquinho diferente em cada browser, isso acontece porque cada browser define o seu padrão para as tags, inserir o CSS Reset antes de começar a desenvolver sua página, é uma boa alternativa para resolver esse probleminha de inconsistência.(...)

O CSS Reset basicamente neutraliza o default inconsitente que as tags HTML tem nos browsers, ou seja, dá uma "resetada" nas margin, padding, h1, h2, form, div e etc para que tenha o mesmo padrão consitente em todos os browsers.

Pra usar é muito simples basta criar um arquivo .css apenas com o CSS Reset e importar normamente com o @import ou a tag <link>.
Existem várias tipos de CSS Reset que, afinal, tem o mesmo objetivo, mas vou mostrar as mais utilizadas pelos web designers. São tres tipos:

CSS Reset Genérica
* {
    padding: 0;
    margin: 0;
    border: 0;
}

Embora o CSS Reset acima seja bem comum, ainda assim não é um "reset" completo pois ainda temos que resetar além das margins e paddings também os links, tabelas e itens de lista, etc. Então é mais recomendável o uso dos exemplos abaixo.

Yahoo's CSS Reset
CSS Reset proposta pelo Yui / Yahoo:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
ol,ul {
    list-style: none;
}
caption,th {
    text-align: left;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}

Eric Meyer Reset CSS
Proposto por Eric Meyer:
html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
    vertical-align: baseline;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
}
:focus {
    outline: 0;
}
body {
    background: white;
    line-height: 1;
    color: black;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    font-weight: normal;
    text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

9 de novembro de 2010

10 add-ons do Firefox para web designers

Uma seleção de add-ons que são uma mão na roda



A possibilidade de inserir add-ons é uma das características que diferencia o Firefox de vários browsers e por isso também o torna preferido por muitos web designers. Entre vários addons para desenvolvimento web, o CSS Orbit fez uma seleção de 10 add-ons que vão fazer você não perder muito tempo naquelas funções do dia-a-dia na hora de desenvolver(...) páginas da web, veja alista abaixo:

Firebug

Um ótimo add-on, com ele você pode modificar e monitorar CSS, HTML e Javascript "ao vivo" em qualquer site.





Web Developer

Esse add-on disponibiliza pra você um menu e uma toolbar com uma série de ferramentas para desenvolvedores web.





IE Tab 2

Versão melhorada do clássico IE Tab, permite você visualizar suas páginas da web no IE em uma nova aba com o Firefox.






EditCSS

Um editor de CSS na sua sidebar.






ColorZilla

Com addon você pode capturar o código de qualquer cor exibida em qualquer ponto de seu browser, você também pode ampliar a página e medir a distância entre dois pontos da página, também permite a escolha de cores de um conjunto de cores pré-definidas e salvar as mais utilizadas em paletas personalizadas.





Rainbow Color Tools

Ferramentas de cores para desenvolvimento web.

Extrai o esquema de cores a partir de imagens do site atual e CSS;
Selecionador de cores HSV;
Recupera a cor de qualquer pixel no navegador;
Filtra através de cores salvas por tag ou o url da página que a cor foi encontrada.





View Source Chart

Esse add-on usa um sistema de cores no código fonte da página, adicionando limites visuais fica mais fácil aprender HTML e visualizar a estrutura do código.





HTML validator

Adiciona um validador de HTML no Firefox o número de erros da pagina HTML pode ser vista na barra de status do navegador.






CSS Reloader

Com esse complemento você atualiza apenas o CSS de uma página da web sem precisar atualizar página inteira.





CSS Validator

Valida sua página usando o W3C CSS Validator. Adiciona uma opção que é visível no menu do botão direito do mouse e no menu "ferramentas". Abre os resultados em uma nova aba.