Top rated never dies » Desenvolvimento http://www.toprated.com.br Top Rated é um blog sobre o mundo do design com dicas, tutoriais e inspiracao. Artigos sobre CSS, HTML, Photoshop. E claro, um pouco de bom humor Fri, 06 Jan 2012 21:09:29 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Para iniciantes: O que é HTML http://www.toprated.com.br/para-iniciantes-o-que-e-html http://www.toprated.com.br/para-iniciantes-o-que-e-html#comments Mon, 14 Nov 2011 22:33:04 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=2423 O que é o HTML?

HTML é um acrônimo que significa HyperText Markup Language (em português: Linguagem de Marcação de Hipertexto). Ou seja, o HTML é uma linguagem de marcação.

Como assim “marcação”?

Isso mesmo, marcação. O HTML é o responsável por “etiquetar” o conteúdo de uma página. Ela marca o que é um parágrafo, o que é uma imagem, o que é uma tabela, e assim por diante.

E como esses conteúdos são marcados?

O HTML usa tags para etiquetar os elementos (não é à toa que ‘tag’ significa ‘etiqueta’ em inglês). Uma tag HTML é sempre escrita começando com o sinal de menor (<) e terminando com o sinal de maior (>).  Por exemplo, a tag que marca um parágrafo é a <p>. A que marca uma tabela é a <table>. E a que marca um título é a <h1>. Vamos à um exemplo prático:

<h1>Titulo de uma notícia qualquer</h1>
  <p>Primeiro parágrafo da notícia com as informações clássicas de onde,  quando, quem, porque e como.</p>

Veja que usei a tag <h1> para marcar o meu título da seguinte forma: abri a tag, escrevendo <h1>, coloquei o conteúdo do título, e então fechei a tag escrevendo-a novamente com uma barra (/) logo depois do sinal (<). Assim eu mostro onde o meu título começa e onde ele termina.  Logo abaixo do título vem um parágrafo que funciona exatamente da mesma forma: a tag é a aberta (<p>), coloco o conteúdo do parágrafo, e fecho a tag </p>. Dessa forma indico exatamente onde começam e terminam os meus elementos.

Ao escrever uma página inteira usamos muitas outras tags, além de escrever tags dentro de outras tags. Sim, tags dentro de outras tags. Veja:

<body>
  <h1>Título da página</h1>
  <p>Meu bom e velho parágrafo com um</p>
</body>

Nesse exemplo, a primeira tag a ser aberta é a <body> (corpo da página), então colocamos um título <h1> e um parágrafo <p> e só depois fechamos a tag <body>. Ou seja, as tags <h1> e <p> estão ‘dentro’ da tag <body>.

Além de marcar o conteúdo, as tags também podem ter propriedades responsáveis por nos dar mais informações sobre aquele pedaço da página:

<form method=”post” id=”meuFormulario”></form>

No exemplo acima criamos um formulário usando a tag <form>. Dentro dela colocamos duas propriedades deste formulário: o método como as informações serão enviadas e o id do formulário.

HTML semântico

Muitas vezes você verá menções sobre a semântica aplicada ao HTML. Simplificando o conceito, podemos dizer que para escrever HTML semântico basta usar as tags certas para os conteúdos certos. Por exemplo, vamos supor que sua página terá uma lista dos 10 produtos mais vendidos. Existem tags específicas para isso: a tag de lista ordenada <ol> e a tag para cada item dentro da lista <li>. Então, use-as! Não faça com vários <p>’s, um abaixo do outro. Visualmente pode ficar ok, mas estará incorreto semanticamente.

HTML = conteúdo

O seu arquivo HTML deve conter todas as informações da página. Todos os dados e sua estrutura. Já a forma de cada um dos seus elementos deve ficar fora do HTML. Ou seja: cores, larguras, posicionamento, imagens de fundo, tipos de fonte, tudo isso não deve estar no HTML e sim no CSS, um arquivo responsável apenas por isso.

Claro que este foi um “resumo resumido” e é possível escrever mais 1000 posts como esse sobre HTML sem esgotar todas as suas características, história, evolução, etc. Mas já é um bom início para quem está começando agora a se interessar pelo assunto. Abraço.


]]> http://www.toprated.com.br/para-iniciantes-o-que-e-html/feed 0 Como adicionar o botão +1 do Google ao seu site http://www.toprated.com.br/como-adicionar-o-botao-1-do-google-ao-seu-site http://www.toprated.com.br/como-adicionar-o-botao-1-do-google-ao-seu-site#comments Sat, 17 Sep 2011 14:45:16 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=2373 O que é o botão “+1″?

Uma das novidades mais interessantes do ano, o botão “+1″ criado pelo Google, possibilita que usuários indiquem que uma página, post ou site é relevante, interessante para eles. É bem parecido com o botão “Curtir” do Facebook, porém está ligado à rede social do próprio Google, a Google+ (Plus). Ele já pode ser visto em grande parte dos portais e blogs e é uma ótima ferramenta para melhorar a interação dos usuários com o seu site.

Qual a vantagem em usá-lo?

Quando clica no botão “+1″, é como se o usuário dissesse para o Google “Ei, eu acho que essa página tem um conteúdo interessante e pode ajudar outras pessoas”. E a empresa já deu indicações de que o número de usuários que clicam no botão “+1″ de uma determinada URL tem impacto no seu ranking de buscas. Ou seja, se vários usuários clicarem no botão “+1″ da sua página é bem provável que você suba algumas posições nas páginas de busca. E mais, se um dos meus contatos tiver clicado no botão “+1″ de uma das páginas do seu site, essa página aparecerá como recomendada pra mim quando eu fizer uma busca no Google.
Depois de clicar no botão o usuário pode ainda fazer um comentário sobre a página, fazendo assim um post no seu perfil do Google+ (se tiver um perfil lá) e gerarando ainda mais tráfego para seu endereço.

Código

Vou mostrar aqui como usar a opção de carregamento assíncrona do botão, aquela em que o botão será adicionado após o carregamento da sua página, deixando-a mais rápida e impedindo que qualquer problema nos servidores do Google possam vir a prejudicar seu site.
São basicamente duas partes. A primeira é o botão em si, que usa a seguinte tag:

<g:plusone size="medium" annotation="inline"></g:plusone>

Basta colocar este trecho de código no lugar onde você quer que o botão apareça. Abaixo do título da página ou ao final do texto do post, por exemplo. Perceba que ela tem duas propriedades, size e annotation. Logo mais vou explicar como você pode usá-las para obter a melhor configuração para o seu caso.

Depois, ao final da página coloque o código que irá carregar substituir a tag acima pelo botão em si. Note que este código deve vir sempre depois da tag do botão.

<script type="text/javascript">
  window.___gcfg = {lang: 'pt-BR'};

 (function() {
  var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  po.src = 'https://apis.google.com/js/plusone.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
  </script>

Note aqui que colocamos, logo no início da tag, a opção “lang” configurada com o valor ‘pt-BR’. Isso é importante pois configura o botão para usar o idioma “Portugês do Brasil”.

Tamanho e tipo

Usando as propriedades size e annotation é possível alterar o tamanho e o tipo do botão “+1″. Existem 4 tamanhos (size) disponíveis: Small (pequeno) 24px de largura, Medium (médio) 20px, Standard (padrão) 24px e Tall (largo) 60px. Além disso você pode escolher entre três maneiras diferentes de exibir a o número de pessoas (annotation) que já clicaram e marcaram aquela página com ‘+1′: Inline (linha de texto), Bubble (balão) e None (nenhum). Combinando essas opções você terá 12 tipos diferentes de botão:


Tupo o que você precisa fazer é escolher qual das combinações melhor se ajusta ao seu layout e alterar a tag do botão ajustando estas propriedades.

Alguns exemplos:


<g:plusone size="standard" annotation="bubble"></g:plusone>



<g:plusone size="medium" annotation="inline"></g:plusone>



<g:plusone size="tall" annotation="bubble"></g:plusone>



<g:plusone size="small" annotation="none"></g:plusone>


]]> http://www.toprated.com.br/como-adicionar-o-botao-1-do-google-ao-seu-site/feed 2 O possível e o viável http://www.toprated.com.br/o-possivel-e-o-viavel http://www.toprated.com.br/o-possivel-e-o-viavel#comments Tue, 24 May 2011 21:14:37 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=2320 Hoje, com a quantidade absurda de ferramentas, tecnologias, linguagens, APIs, recursos multimídia e devices que criativos, designers e programadores têm disponíveis para trabalhar, não é exagero afirmar que existem possibilidades quase ilimitadas de abordagens para cada projeto. Porém, além do caminho a ser seguido, é necessário definir dois outros pontos igualmente importantes: prazo e objetivo.

Apesar de óbvia, afinal todos concordam que é necessário que cada projeto tenha um objetivo principal e uma data de conclusão, a definição destes pontos necessariamente resulta na limitação daqueles caminhos inicialmente possíveis. Alguns deles deixarão de ser possíveis tendo em vista aquele prazo e objetivo. E é preciso que todos os envolvidos tenham isso em mente. Ao gerente do projeto cabe entender qual é o core, o essencial, aquelas funcionalidades e componentes imprescindíveis, com impacto direto no cumprimento ou não do objetivo inicial. Com desenvolvedores, designers e demais colaboradores fica a missão de estudar cada parte do projeto e dar estimativas realistas de entrega para cada etapa.

Decisão

É claro que a tarefa de decidir quais features serão implementadas num projeto não é simples e precisa basear-se no maior número de dados possíveis: importância, impacto, tempo de desenvolvimento, período de testes, recursos necessários, custos, riscos.

Ao avaliar um componente, o gerente do projeto deve considerar cada um desses aspectos, estudá-los, reunir-se com desenvolvedores para entender a mecânica de sua construção, perguntar quais são os riscos, calcular o custo e entender como aquele pedaço se encaixa no projeto como um todo.
Fica clara aqui a necessidade de consultar outras áreas para compreender todos esses fatores. Também é nesse momento que desenvolvedores, designers e outras áreas da empresa podem expor suas opiniões, ligadas claro ao seu campo de atuação. Nada de programador dar pitaco em layout, muito menos designer se intrometer em código.

Porém, finalizada a etapa de consultas e entendimento, a decisão de que caminho seguir é um ato individual, solitário. Deve concentrar-se no gerente, que precisa ter esse poder e essa responsabilidade. Abrir demais o processo de decisão corresponde necessariamente à perda de foco e de velocidade. Além disso, o gerente só pode ser cobrado por algo sobre o qual ele tem controle, por isso a última palavra deve ser dele.

]]> http://www.toprated.com.br/o-possivel-e-o-viavel/feed 3 Reportando e buscando soluções para problemas ligados aos plugins do Facebook http://www.toprated.com.br/solucoes-para-problemas-ligados-aos-plugins-do-facebook http://www.toprated.com.br/solucoes-para-problemas-ligados-aos-plugins-do-facebook#comments Wed, 20 Apr 2011 00:30:37 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=2276 Porém, ao mesmo tempo que facilitam a vida, estes recursos deixam todos nós dependentes de seu bom funcionamento. Quer dizer, sua página não depende mais apenas do código que você e sua equipe escrevem. Se o Facebook resolver fazer um update no script que gera o botão “curtir” por exemplo, e este não for bem sucedido, todas as páginas que o utilizam podem começar a ter problemas, exibir mensagens de erro ou ter qualquer outro comportamento estranho. E o pior: não existe um alerta, um aviso. Isso pode acontecer a qualquer momento. Apenas para citar um exemplo: recentemente, páginas que utilizavam o plugin do botão curtir via XFBML passaram a recarregar (dar reload) sem parar no IE7, muitas vezes travando o browser. A alternativa foi substituí-lo pela versão iFrame. Mas até isso acontecer, muitos pageviews falsos e usuários irritados ficaram pelo caminho.

Claro, não estou dizendo que você deve correr para tirar todos os componentes do FB do seu site. Os ganhos ainda superam, e muito, quaisquer eventuais perdas. Mas quero mostrar dois lugares importantes que precisam estar nas bookmarks de todos que lidam e utilizam os componentes do FB:

Developers Forum

Fórum oficial da plataforma, aqui você encontrará milhares de tópicos sobre os mais diversos problemas e dúvidas à respeito das APIs e plugins do Facebook. Quando perceber que algo que sempre funcionou passou a se comportar de maneira estranha dê uma olhada aqui. É onde os primeiros relatos envolvendo bugs aparecem. Também é útil por que além de reportar problemas, os desenvolvedores postam os workarounds e possíveis correções para cada falha.
http://forum.developers.facebook.net/

Bug Tracker

É o Bugzilla da Facebook Platform. Nela desenvolvedores de todo o mundo reportam seus problemas diretamente para a equipe de programadores do FB através do cadastro de Bugs. Depois de ser cadastrado, cada bug passa por uma triagem e, se confirmado, é escalado para a equipe responsável. É o melhor lugar para buscar informações sobre os problemas mais graves e obter respostas oficiais do time de desenvolvedores da plataforma. É possível também votar nos bugs que você considera mais graves para tornar sua correção prioritária em relação aos outros.
http://bugs.developers.facebook.net/

URL Linter

Esta ferramenta permite analisar uma URL e checar se as tags utilizadas pelo Facebook para o compartilhamento da página estão aplicadas de maneira correta. Com ela é possível verificar de onde o sistema da rede social importa as informções que servem como título, descrição e thumbnail do link quando a página é compartilhada. Dessa forma podemos refinar as informações, aplicar as tags corretamente e identificar possíveis problemas.
http://developers.facebook.com/tools/lint/

]]> http://www.toprated.com.br/solucoes-para-problemas-ligados-aos-plugins-do-facebook/feed 0 Múltiplas instalações WordPress utilizando a mesma base (tabela) de usuários http://www.toprated.com.br/multiplas-instalacoes-wordpress-utilizando-a-mesma-base-tabela-de-usuarios http://www.toprated.com.br/multiplas-instalacoes-wordpress-utilizando-a-mesma-base-tabela-de-usuarios#comments Fri, 11 Feb 2011 13:40:48 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=2205 Requisitos

• As duas instalações devem usar o mesmo database MySQL, com prefixos diferentes;
• Você deve ter acesso ao FTP das das duas instalações;
• As duas instalações devem utilizar a mesma versão WordPress (2.7 ou superior).

Editando os arquivos

Esta é uma solução que exige um mínimo conhecimento de edição, upload e atualização do código-fonte WordPress. Sugiro também que antes de começar você crie um backup dos arquivos do seu site e da sua base de dados. Também recomendo que comente todas as alterações para que depois possa identificá-las rapidamente.

Em todas as instalações você deve alterar os seguintes arquivos:

No arquino wp-config.php:
Adicionar esta linha acima do comentário “/* That’s all, stop editing! Happy blogging. */”: 

define('CUSTOM_CAPABILITIES_PREFIX', 'wp_');


No arquino wp-includes/capabilities.php:
Substituir a linha

$this->cap_key = $wpdb->prefix . 'capabilities';

Por

if (defined ('CUSTOM_CAPABILITIES_PREFIX')) {
	$this->cap_key = CUSTOM_CAPABILITIES_PREFIX . 'capabilities';
	}
	else {	$this->cap_key = $wpdb->prefix . 'capabilities';
	}


Em todas as instalações, exceto a principal (aquela que terá a tabela de usuários original):

No arquino wp-config.php:
Adicionar este trecho acima do comentário “/* That’s all, stop editing! Happy blogging. */”:

define ('WPLANG', '');
define('CUSTOM_USER_TABLE', 'wp_users');
define('CUSTOM_USER_META_TABLE', 'wp_usermeta');

E substituir a linha:

$table_prefix = 'wp_';

Por

$table_prefix = 'outroprefixo_' //este deve ser o prefixo único de cada instalação

Eu testei e funcionou perfeitamente.
Espero que ajude.



]]> http://www.toprated.com.br/multiplas-instalacoes-wordpress-utilizando-a-mesma-base-tabela-de-usuarios/feed 5 Vídeo tutorial: Como corrigir seu CSS rapidamente usando a Firebug http://www.toprated.com.br/video-tutorial-como-corrigir-seu-css-rapidamente-usando-a-firebug http://www.toprated.com.br/video-tutorial-como-corrigir-seu-css-rapidamente-usando-a-firebug#comments Wed, 18 Aug 2010 01:41:03 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=2094 correção de pequenos problemas relacionados ao CSS é algo constante. Se você trabalha em uma agência digital ou administrando um portal também deve conviver com esse tipo de necessidade. Neste vídeo tutorial, o primeiro do blog, vou mostrar como você pode usar a extensão Firebug do Firefox para acelerar e aprimorar o processo de correção desses problemas.]]>

Link para instalação da Firebug: http://getfirebug.com/

]]> http://www.toprated.com.br/video-tutorial-como-corrigir-seu-css-rapidamente-usando-a-firebug/feed 18 Crie gráficos de maneira rápida e fácil com o Google Chart Tools – Parte 2 http://www.toprated.com.br/crie-graficos-de-maneira-rapida-e-facil-com-o-google-chart-tools-parte-2 http://www.toprated.com.br/crie-graficos-de-maneira-rapida-e-facil-com-o-google-chart-tools-parte-2#comments Mon, 16 Aug 2010 17:49:56 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=2036 post sobre como criar gráficos usando a Google Chart API , vou mostrar aqui como criar gráficos de barras e como customizá-los para o seu site, alterando cores, escalas, tamanho e algumas outras opções.]]> Download

Os gráficos de barras seguem exatamente a mesma mecânica dos gráficos pizza, ou seja, você deve fazer a chamada à URL da API passando todos os parâmetros desejados e receberá como retorno a imagem do gráfico pronta para ser inserida na sua página. Veja o exemplo de um gráfico de barras verticais e os parâmetros usados para criá-lo:

<img src="http://chart.apis.google.com/chart?cht=bvs&chxt=x,y&chd=t:20,40,60,80,30&chco=76A4FB&chs=200x125&chxl=0:|Jan|Fev|Mar|Abr|Mai" />

As principais características do exemplo que acabei de criar são: ele é um gráfico de barras verticais, com 2 eixos visíveis (20, 40,… e Jan, Fev,…) e tem 180 x 150 pixels. Essas características foram passadas à API usando estes parâmetros:
Tipo cht=bvs – informa que quero um gáfico de barras verticais;
Eixos chxt=x,y – significa que quero os eixos X e Y visíveis;
Dados chd=t:20,40,60,80,30 – os dados;
Cor chco=76A4FB – mostra que desejo apenas uma cor;
Tamanho chs=200×125 – define o tamanho da imagem;
Labels chxl=0:|Jan|Fev|Mar|Abr|Mai – informo as labels do eixo X (0);

Alterando valores e escala

Por default o eixo vertical vai sempre de 0 a 100, então quando editar os valores do gráfico e quiser que o eixo fique abaixo ou acima desses valores você deverá usar a escala. Por exemplo, se eu tenho um gráfico onde o valor mais alto é 41% não há necessidade do meu gráfico exibir valores até 100, veja abaixo a diferença entre os dois exemplos:

<img src="http://chart.apis.google.com/chart?cht=bvs&chxt=x,y&chd=t:12,22,26,35,41&chco=fa432a&chs=180x150&chxl=0:|Jan|Fev|Mar|Abr|Mai" />
<img src="http://chart.apis.google.com/chart?cht=bvs&chxt=x,y&chd=t:12,22,26,35,41&chco=fa432a&chs=180x150&chxl=0:|Jan|Fev|Mar|Abr|Mai &chxr=1,0,50&chds=0,50" />

Perceba que no segundo gráfico usei 2 parâmetros a mais, que indicam que quero uma escala diferente da default:
Eixo chxr=1,0,50 – define o eixo Y em 0 a 50;
Escala chds=0,50 – define a escala de 0 a 50;


Definindo 2 ou mais séries

Um gráfico de barras pode ter mais de uma série de dados em cada intervalo o que muitas vezes se faz necessário. Tudo o que você tem que fazer é passar os valores de cada série separados por “|” e definir o tipo de gráfico para bvg (cht=bvg). Veja os exemplos abaixo e compare suas URLs:

<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35,41|20,40,60,80,30&chco=fa432a,76A4FB&chs=320x150& chxl=0:|Jan|Fev|Mar|Abr|Mai" />
<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35|15,26,33,34|25,40,34,12&chco=fa432a,76A4FB,faae2a &chs=370x150&chxl=0:|Jan|Fev|Mar|Abr&chxr=1,0,50&chds=0,50" />


Note também que foi definida uma cor para cada série através do mesmo parâmetro chco que já havíamos usado, mas agora com as cores separadas por vírgula. Você pode usar quantas séries desejar em cada gráfico, basta tomar cuidado para que o seu tamanho comporte todas as barras.

Legendas e grids

Para uma melhor visualização das informações dos gráficos quase sempre é necessário que usemos um grid por trás das barras, que facilitará a comparação entre elas, e claro uma legenda para informar melhor o visualizador. Para tanto basta usar outros dois parâmetros bem simples: chg para adicionar grids e chdl para legendas. O primeiro aceita 4 parâmetros principais: o intervalo entre grids do eixo X, intervalo para o eixo Y, largura do traço, espaço entre os traços. O segundo aceita como parâmetro o texto das legendas separados por |. Veja o exemplo:

<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35|15,26,33,34|25,40,34,12&chco=fa432a,76A4FB,faae2a &chs=450x200&chxl=0:|Jan|Fev|Mar|Abr&chxr=1,0,50&chds=0,50&chg=25,25&chdl=China|EUA|Alemanha" />

Largura e espaçamento das barras

Muitas vezes por conta de espaço ou por falta dele, será necessário fazer algumas adaptações nos tamanhos do gráfico. Um dos truques que ajuda nesse processo é alterar a largura e espaçamento entre as colunas e séries de colunas. Podemos fazer isso com o parâmetro chbh, que aceita 3 parâmetros: largura das barras, espaço entre barras, espaço entre os grupos de barras (séries). Veja os exemplos:

<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35|15,26,33,34|25,40,34,12&chco=fa432a,76A4FB,faae2a& chs=205x200&chxl=0:|Jan|Fev|Mar|Abr&chxr=1,0,50&chds=0,50&chg=25,25&chdl=China|EUA|Alemanha &chbh=5,1,10" />
<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35|15,26,33,34|25,40,34,12&chco=fa432a,76A4FB,faae2a& chs=445x200&chxl=0:|Jan|Fev|Mar|Abr&chxr=1,0,50&chds=0,50&chg=25,25&chdl=China|EUA|Alemanha &chbh=25,1,10" />

Conclusão

Mesmo com exemplos bastante simples e passagem bem rápida apenas pelos principais parâmetros da Chart API, fica claro que o seu potencial de utilização pode envolver desde posts simples em um blog até a integração com sistemas de informação que necessitem oferecer uma melhor visualização de dados. Se você ficou interessado, recomendo fortemente que visite a página da API e sua documentação pois há dezenas de outras possibilidades de customização para os gráficos.




]]> http://www.toprated.com.br/crie-graficos-de-maneira-rapida-e-facil-com-o-google-chart-tools-parte-2/feed 5 Como criar um QR Code em 1 minuto http://www.toprated.com.br/como-criar-um-qr-code-em-1-minuto http://www.toprated.com.br/como-criar-um-qr-code-em-1-minuto#comments Tue, 10 Aug 2010 16:17:22 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=2006 uma vaca da Cow Parade SP. Pois bem, aqui vai uma maneira absurdamente fácil e rápida para criar um QrCode para usar onde você quiser, com o link da sua empresa, seu email ou até mesmo alguma senha ou frase.]]> Para isso vou utilizar uma API criada pelo Google sobre a qual eu até já falei aqui, a Chart API. Além de criar gráficos, a Chart API também pode ser usada para gerar QR Codes. Sua principal vantagem é a simplicidade e rapidez. Uma vez chamada, ela retornará a imagem do QR Code com o texto/link que você quiser.

QR Codes com links

Uma das maneiras mais comuns de utilização de QR Codes é o direcionamento do usuário para o site de uma promoção ou produto através de um link. Para isso basta criar o código contendo o link para onde desejamos enviar o usuário. Por exemplo, para gerar um QR Code com link para o Top rated basta usar esta URL:


http://chart.apis.google.com/chart?chs=200x200&cht=qr&chld=|0&chl=http://www.toprated.com.br

Ao lado a imagem gerada. Entenda como montei essa URL:

http://chart.apis.google.com/chart? é o endereço padrão da API;

chs=200×200 informa o tamanho da imagem que eu desejo, 200x200px;

cht=qr informa o tipo de saída que eu espero, QR Code;

chld=|0 retira as margens (bordas) da imagem;

chl=http://www.toprated.com.br e aqui eu informo o texto que quero.

A grande maioria dos leitores de QR Code identifica automaticamente este texto como sendo um link e direciona o usuário para a página.

QR Codes com frases, senhas e outras informações

Outra utilidade dos QR Codes é servir para passar textos ou frases curtas para os usuários. Por exemplo, vamos supor que eu queira espalhar pela minha loja QR Codes com dicas de produtos em promoção para que meus clientes possam explorar:

http://chart.apis.google.com/chart?chs=200x200&cht=qr&chld=|0&chl=tv de plasma R$ 1499

Ao usar o leitor do seu celular para decifrar o código ao lado, o cliente encontrará a seguinte frase: TV de plasma R$1499. A URL é exatamente igual à do exemplo anterior, só muda o texto do final.

Como dá pra perceber, esta é uma ferramenta muito interessante para estimular a interação com seus consumidores e usuários, que pode ainda ser usada para vários tipos de ações diferentes. Além disso com a constante queda de preço de celulares com suporte aos leitores de QR Code, cada vez mais pessoas terão acesso a esse tipo de tecnologia. Vale a pena começar a pensar nos QR Codes como uma boa opção de comunicação.




]]> http://www.toprated.com.br/como-criar-um-qr-code-em-1-minuto/feed 11 3 coisas que você talvez não saiba sobre Dreamweaver http://www.toprated.com.br/3-coisas-que-voce-talvez-nao-saiba-sobre-dreamweaver http://www.toprated.com.br/3-coisas-que-voce-talvez-nao-saiba-sobre-dreamweaver#comments Tue, 03 Aug 2010 00:39:59 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=1977 Organização e padronização do código

Se você trabalha em um lugar onde freqüentemente precisa editar código escrito por outras pessoas sabe como é ruim e contra-produtivo pegar um HTML, CSS ou PHP mal organizado, sem indentação e nenhum comentário. Isso pode trazer muitas dores de cabeça e fazer uma simples alteração virar um inferno.

Dreamweaver

Saiba que o Dreamweaver tem um comando muito interessante para resolver esse problema: Commands > Apply Source Formatting. Por mais bagunçado que esteja o código, basta um clique neste comando e o Dreamweaver vai deixá-lo perfeitamente estruturado, indentado e muito mais fácil de ler e entender. Vale a pena até adotar como padrão para a sua empresa, já que não dá trabalho nenhum e permite que todo mundo entregue código com a mesma formatação. Funciona com códigos HTML, CSS, PHP, JavaScript e muitos outros.

Criação de aplicativos AIR

DreamweaverVocê já deve saber do incrível potencial que a plataforma AIR da Adobe representa para desenvolvedores e provavelmente já deve até usar algum aplicativo desenvolvido com ela, como por exemplo TweetDeck, Grooveshark e NYTimes Reader só para citar alguns. Se ainda não sabe, sugiro que vá pesquisar agora mesmo. Principalmente porque em breve boa parte dos celulares Android serão compatíveis com aplicativos AIR.

Pois bem, ao contrário do que muitos pensam, aplicativos AIR não precisam ser necessariamente desenvolvidos com Flash ou Flex: você também pode usar HTML, CSS e imagens para criar um App e fazer a comunicação com banco de dados via AJAX. Acredite, é extremamente fácil. Tudo o que você precisa fazer é baixar a extensão AIR para o seu Dreamweaver (fornecida gratuitamente pela Adobe). Com ela você vai poder empacotar todos os arquivos usados no seu app (HTML, imagens, CSS, JS) num único instalador AIR e distribuir para download. Eu já testei e é algo sensacional, recomendo este pequeno tutorial (em inglês): Create your first HTML-based AIR application with Dreamweaver.

Para finalizar: Ctrl+D

E como última dica separei um atalho que facilita muito a vida de quem usa o Dreamweaver para gerenciar um projeto com múltiplos arquivos linkados entre si, sejam várias páginas HTML ou arquivos relacionados (JS, CSS). Quando se tem um projeto assim é comum a necessidade de ir de um arquivo para outro, e ter que ficar navegando pela pasta para encontrar aquele arquivo para onde aponta o link é bem chato, ou mesmo ter que ficar copiando o nome, abrir arquivo, colar o nome, etc.., etc…

Então aqui vai um ótimo atalho: Ctrl+D. Toda vez que você estiver editando o código com o cursor de texto piscando sobre um link para um arquivo externo, basta pressionar as teclas Ctrl+D que o Dreamweaver abrirá automaticamente aquele arquivo, seja ele um HTML, PHP, JS ou CSS.

]]> http://www.toprated.com.br/3-coisas-que-voce-talvez-nao-saiba-sobre-dreamweaver/feed 10 Crie gráficos de maneira rápida e fácil com o Google Chart Tools – Parte 1 http://www.toprated.com.br/crie-graficos-de-maneira-rapida-e-facil-com-o-google-chart-tools-parte-1 http://www.toprated.com.br/crie-graficos-de-maneira-rapida-e-facil-com-o-google-chart-tools-parte-1#comments Mon, 26 Jul 2010 23:04:10 +0000 Domênico Citrângulo http://www.toprated.com.br/?p=1826 Gráficos são sempre necessários na hora em que precisamos apresentar dados, seja em apresentações, relatórios ou artigos. Na web não é diferente, muitas vezes precisamos usar gráficos para complementar um post, uma notícia e até mesmo uma promoção ou anúncio. Pois o Google, sempre de olho nas necessidades dos desenvolvedores, criou uma ferramenta simples, grátis e rápida para criação de gráficos que você pode começar a utilizar agora mesmo no seu site. Nesse post vou mostrar como usá-la.]]> Download

A Chart API

A API do Google Chart Tools, também conhecida como Chart API, é a caçula do projeto Google Visualization que também engloba a ferramenta Interactive Charts, um pouco (bem pouco) mais complexa. Sua principal vantagem é a simplicidade, já que tudo o que você precisa fazer para usá-la é uma chamada para sua URL enviando os dados do gráfico via query string. A chamada retornará a imagem do gráfico. Por exemplo, veja como fica a URL para criação de um gráfico de barras simples e a imagem resultante:

<img src="http://chart.apis.google.com/chart?chxt=x,y&cht=bvs&chd=t:60,70,85,65,40&chco=76A4FB&chls=2.0&chs=180x150
&chxl=0:|Jan|Fev|Mar|Abr|Mai" alt="" />

Note que a imagem já vem com o gráfico pronto, com os eixos, labels (Jan, Fev, etc..) e barras. Perceba também que a altura e largura da imagem são definidas na própria URL, nesse caso 180×150. Você só precisa posicioná-la na sua página como uma imagem comum.
A mesma API pode ser usada para criar vários tipos de gráficos: barras, pizza, linhas, candlestick, etc.. Como não quero reescrever a documentação da API e sim dar uma introdução, vou mostrar aqui como criar gráficos pizza e de barras, que acredito serem os mais comuns.

Gráficos Pizza

O primeiro tipo de gráfico que vou mostrar é o do tipo Pizza. Como em todos os outros, o segredo para criar um bom gráfico é saber quais os parâmetros certos devemos passar para a API. Os principais são os do tipo de gráfico (cht), de dados (chd) e de tamanho (chs). Veja o exemplo de um gráfico usando apenas esses 3 parâmetros:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15&chs=180x125" class="alignleft" />

No exemplo ao lado foram usados os seguintes parâmetros:
Tipo: cht=p – significa que quero um gráfico pizza (p);
Dados: chd=t:45,20,20,15 – envio os dados em formato texto (t) separados por vírgula;
Tamanho: chs=180×125 – indico o tamanho da imagem, 180×125;


Adicionando labels e legendas

Claro que apenas o gráfico, sem nenhuma indicação de valores ou legenda, não é lá muito útil já que dificilmente alguém vai conseguir entender e analisar os dados. Então é hora de começar a melhorar o gráfico. Para isso podemos usar 2 boas opções: labels e legendas. Com elas o gráfico vai ficar bem melhor.
Mais uma vez, tudo o que você precisa fazer é adicionar os parâmetros corretos, as labels usam o parâmetro chl e as legendas usam o parâmetro chdl. Veja então como fica o gráfico, agora com legendas e labels:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15&chs=380x250&chl=45%|20%|20%|15%&chdl=Janeiro|Fevereiro|Março|Abril" alt="" />

Esse é exatamente o mesmo gráfico anterior, agora com os seguintes parâmetros:
Tipo: cht=p – gráfico pizza (p);
Dados: chd=t:45,20,20,15 – os dados;
Tamanho: chs=380×250 – o tamanho;
Labels: chl=45%|20%|20%|15% – labels;
Legendas: chdl=Janeiro|Fevereiro|Março|Abril – legendas;


Usando 3D

E se você quiser apresentar o seu gráfico em 3D basta fazer uma pequena alteração, trocando tipo de gráfico de pizza (p) para pizza 3D (p3). Realmente não podia ser mais fácil, veja como fica o gráfico anterior agora em 3D:

<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,20,20,15&chs=480x200&chl=45%|20%|20%|15%&chdl=Janeiro|Fevereiro|Março|Abril" alt="" />

Olhe a URL da imagem e note que ela é praticamente a mesma do exemplo anterior, as únicas diferenças são no parâmetro cht, que agora pede um gráfico 3D (p3) e no tamanho do gráfico.


Customizando as cores

Existem três maneiras diferentes para customizar as cores de um gráfico mas todas elas usam o mesmo parâmetro chco. A diferença está na quantidade de cores que eu passo para esse parâmetro.

Usando uma cor

A primeira forma de definir as cores do gráfico é escolher uma cor base que será usada com intensidade gradual afim de diferenciar cada uma das áreas do gráfico. É exatamente como vínha fazendo antes, porém estava usando a cor default do gráfico (amarelo), mas eu posso escolher a cor de base, por exemplo:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15,45,55&chs=320x200&chdl=IE6|Firefox|IE7|Chrome|Safari|Opera
&chco=c60000" alt="" />
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,12,20,5,20,15&chs=320x200&chdl=Corel|Adobe|Apple|Microsoft|Sun|Sony
&chco=1da3f8" alt="" />


Usando gradiente

Outra maneira de definir as cores do gráfico é usando um gradiente. Para isso basta usar o parâmetro chco para passar 2 cores diferentes, separadas por vírgulas. Seu gráfico será apresentado com as cores formando um gradiente que inicia com a primeira cor e finaliza com a segunda:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:15,23,45,20,20,15&chs=320x200&chdl=NYTimes|Le Monde|AS|Estadão|Folha de SP|LATimes&chco=c60000,1da3f8" alt="" />
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:5,32,45,20,20,15&chs=320x200&chdl=Brasil|EUA|Japão|Itália|Alemanha|China
&chco=58e015,fffc00" alt="" />



Definindo uma cor para cada valor

Por fim, é possível ainda definir uma cor para cada um dos intervalos do gráfico, para isso basta passar para o parâmetro chco cada uma das cores, seguindo a mesma ordem dos valores, separadas por “|”:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15&chs=320x200&chdl=China|França|México|Brasil
&chco=c60000|1da3f8|58e015|fffc00" alt="" />
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,20,20,15&chs=340x200&chdl=Janeiro|Fevereiro|Março|Abril
&chl=45%|20%|20%|15%&chco=67087b|e3007a|00a8eb|79c471" alt="" />


Finalizando com background e margens

Para finalizar o seu gráfico e deixá-lo perfeito você pode ainda usar mais 2 parâmetros bem simples para definir a cor do background do gráfico e suas margens. Veja como:

Background

Se a cor de fundo de seu site não é o branco (padrão de background dos gráficos), você pode customizá-la usando o parâmetro chf. Basta passar o valor da cor desejada, precedida por bg,s, dessa maneira: chf=bg,s,dddddd;

Margens

O parâmetro que define as margens do gráfico (chma) também é bem simples, você deve passar os valores desejados em pixels, separados por vírgula, seguindo esta ordem: esquerda,direita,superior,inferior|largura_da_legenda,altura_da_legenda. Um bom exemplo seria: chma=20,20,20,30|100,20.
Abaixo um gráfico usando estes dois últimos parâmetros, de cor de fundo e de margens:

<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,20,20,15&chs=660x300&chl=45%|20%|20%|15%&
chdl=Janeiro|Fevereiro|Mar%C3%A7o|Abril&chco=c60000|1da3f8|58e015|fffc00&chf=bg,s,dddddd&
chma=20,20,00,30|100,20" alt="" />


Conclusão

Como dá para ver nos exemplos e na quantidade de opções de customização e combinações possíveis, é claro o potencial dessa API para agilizar e facilitar a vida de quem volta e meia precisa fazer um gráfico para seus artigos, notícias e sites, ou mesmo integrar com um banco de dados para criação dinâmica dos gráficos. Além da facilidade em usar uma API já pronta e muito bem feita, temos a segurança que vem do fato dela ser uma criação do Google e ser hospedada por ele, garantindo estabilidade e quase 100% de disponibilidade. Não há limite para o número de requisições que você pode fazer por dia, o Google só pede para que você avise (chart-api-notifications@google.com) caso sua necessidade seja maior que 250.000 chamadas por dia.

Se você gostou mas acha que ainda não dá pra usar essa ferramenta por conta de alguma outra necessidade que ela não cobre, vale a pena dar uma olhada na sua documentação completa, pois o intuito aqui era apenas de dar uma introdução, existem dezenas de outras configurações possíveis.

E se bateu aquela preguiça de escrever tantos parâmetros, você pode usar o Chart Wizard, ferramenta disponibilizada pelo Google para criação de gráficos baseados nessa API. Porém, recomendo que você leia bem o tutorial e a documentação para que não precise ficar voltando ao assistente toda vez que precise de uma pequena alteração ou variação do gráfico. E claro, um desenvolvedor que se preze tem que entender o que está fazendo.

No próximo post sobre essa API vou mostrar como criar gráficos de barras.

Observação

O tamanho dos gráficos, eis o calcanhar de Aquiles da Charts API: quando usamos gráficos com mais de um elemento (labels + legendas) o sistema tem certa dificuldade em acomodá-los sem que nenhum deles seja cortado. Então algumas vezes é preciso dar “uma mãozinha” e fazer pequenos ajustes no tamanho das imagens para uma perfeita visualização. Se isso acontecer com você, tente alterar a largura ou altura do gráfico, não é difícil de resolver.




]]> http://www.toprated.com.br/crie-graficos-de-maneira-rapida-e-facil-com-o-google-chart-tools-parte-1/feed 10