Personalizar informações de uma postagem do seu blog compartilhada no Facebook
Olá a todos!
Muitos de vocês já devem ter visto que alguns links que vocês copiam e colam no Facebook para compartilhar aparecem personalizados, muitas vezes até com uma imagem de thumbnail customizada. Hoje eu trago uma dica rápida de como fazer isso.
O Facebook interpreta o Open Graph protocol, que é um conjunto de meta tags para agregar mais informações semânticas às páginas web. Alguns dos principais metadados básicos, que já permitem que sua página tenha informações interpretadas pelo Facebook, são:
- og:title – O título que você deseja que a postagem assuma. Por exemplo: “Olá, Mundo!”;
- og:description – Um resumo da sua postagem. Por exemplo: “Vejam como fazer um aplicativo que escreva ‘Olá, Mundo!’ na tela do seu celular!”;
- og:image – Uma imagem para ser associada à sua postagem. No caso do Facebook, existem as seguintes restrições para o tamanho da imagem:
- Dimensões mínimas: 50×50 pixels;
- Dimensões máximas: 130×110 pixels;
- Proporção máxima: 3.0. Ou seja: o resultado da divisão da altura pela largura (e vice-versa) da sua imagem não pode exceder o valor de 3.0. Uma imagem 100 x 25, por exemplo, não seria interpretada, já que a largura dividida pela altura dá como resultado 4.0.
Essas meta tags deverão ser adicionadas entre as tags <head> e </head> da sua página.
Vejamos um exemplo completo:
<head> <meta property="og:title" content="Olá, Mundo!" /> <meta property="og:description" content="Vejam como fazer um aplicativo que escreva 'Olá, Mundo!' na tela do seu celular!" /> <meta property="og:image" content="http://link.completo/para_a_imagem.jpg" /> </head>
Com esse conteúdo inserido em sua página, quando alguém compartilhar o link no Facebook, essas informações já estarão automaticamente agregadas.
Dica do dia: Aplicativo Proteste Posto
A PROTESTE, a Associação Brasileira de Defesa do Consumidor, desenvolveu um aplicativo para dispositivos móveis com Android e IOS (IPhone) que indica em tempo real qual posto de combustível tem gasolina, álcool, GNV ou diesel pelo preço mais barato.
Os preços no aplicativo não são fornecidos pelos usuário, mas sim pela Agencia Nacional de Petróleo, Gás Natural e Biocombustíveis (ANP), o que proporciona uma maior credibilidade na informação.
O aplicativo é GRATUITO e possui alguns recursos interessantes como a ordenação de postos por preço ou distância de você, localização do posto no mapa e rota até o posto desejado.
Uma desvantagem é que não são mostrados todos os postos da cidade, pelo menos não os de Salvador-BA.
Confiram:
 |
 |
Introdução às Media Queries
Bom, antes de iniciarmos o aprendizado sobre Media Queries, precisamos entender o que são Media Types.
O que são Media Types?
O Css pode ser usado para especificar como o documento será exibido em diferentes tipos de mídias como celulares, desktop e impressos.
Existem dez tipos de media types definidas em Css 2.1, são elas:
Existem 5 métodos que podem ser usados para especificar as media types, são elas:
Os métodos mencionados acima são utilizados também nas media queries.Bem, mas o que são media queries?
Vamos entendê-las!
DEFININDO MEDIA QUERIES
Por um longo tempo temos sido capazes te especificar estilos para diferentes tipos de mídia usando Css, sendo os “print” e “screen” os mais reconhecidos.Com CSS3 essas media types foram extendidas, permitindo novas expressões.São as chamadas “media queries”, que nos dá grande controle quando precisamos adicionar estilos específicos para visualização em determinados tipos de dispositivos.
As medias queries geralmente consistem de uma media type e nenhuma ou muitas palavras-chave, como por exemplo:
<link rel="stylesheet" type="text/css" href="estilo.css" media="screen and (color)">
ENTENDENDO UM POUCO SOBRE MEDIA FEATURES
Sintaticamente, as media features assemelham-se às propriedades CSS.Elas possuem nomes e aceitam certos valores.Existem, contudo, diversas diferenças importantes entre as propriedades e as media features.São elas:
- Propriedades são usadas em declarações para dar informações sobre como apresentar um documento.Media features são usadas em expressões para descrever requisitos da saída do dispositivo.
- A maioria das medias features aceitam os prefixos “-min” ou “-max” para expressar “maior ou igual a” e “menor ou igual a”.Esta sintaxe é usada para evitar “<" e ">“, caracteres que podem conflitar com Html e XML.Essas características de comunicação que aceitam prefixos serão muitas vezes usadas com prefixos, mas também podem ser usadas sozinhas.
- Propriedades sempre exigem um valor para formar uma declaração.Media features, por outro lado, também podem ser utilizados sem um valor.Media features que são precedidos por min/mas não podem ser utilizados sem um valor.Quando uma media feature possui o prefixo min/max sem um valor, isso torna a media query disforme.
- Propriedades podem aceitar valores mais complexos, cálculos que envolvem diversos outros valores.Media features somente aceitam valores únicos: uma palavra chave, um número ou um número com um único identificador.As únicas exceções são “aspect-ratio” e “device-aspect-ratio”.
Exemplo: “color” pode formar expressões sem valor -> (“(color)”) ou com valor -> (“(min-color: 1)”).
Abaixo segue uma lista completa de todas as media features:
USANDO MÚLTIPLAS EXPRESSÕES
Você pode usar múltiplas expressões em uma media query se você juntá-las com a palavra-chave “and”.
Um exemplo claro é se formos aplicar para dispositivos do tipo hand-held, mas somente se a largura da área de visualização for maior que 20em e menor que 40 em.
<link rel="stylesheet" type="text/css" href="estilo.css" media="handheld and (min-width:20em) and (max-width:40em)">
USANDO MÚLTIPLAS EXPRESSÕES MEDIA QUERIES
É possível usar múltiplas declarações media queries separando-as por vírgula.
Exemplo:
<link rel="stylesheet" type="text/css" href="estilo.css" media="screen and (color), handheld and (color)">
USANDO O “NOT”
É possível utilizar a palavra “not” caso queira ignorar algum dispositivo.
Exemplo:
<link rel="stylesheet" type="text/css" href="estilo.css" media="not screen and (color)">
USANDO O “ONLY”
É possível usar a palavra “only” para aplicar as regras somente para as media queries determinadas.
SUPORTE PARA MEDIA QUERIES
As media queries não são suportadas para IE8 e inferiores.
São suportadas para :
- Firefox 3.6+
- Safari 4
- Opera 10
- Chrome 5
Vale ressaltar que os browsers que não suportam as media queries podem suportar as medias types.
A keyword “only” é algumas vezes usada para esconder o CSS de alguns dispositivos que não suportam media queries, mas podem ler as media types.
MEDIA QUERIES EM IPHONES
O iphone não suporta a media type handheld.A Apple recomenda que as media queries sejam usadas para Iphone.
As regras serão aplicadas para Iphone que tem uma largura máxima de dispositivo de 480px.
<link rel="stylesheet" type="text/css" href="estilo.css" media="only screen and (max-device-width:480px)">
Dica do dia: pense simples!
Vejam a lenda a seguir:
Quando a NASA iniciou o lançamento de astronautas, descobriram que as canetas comuns não funcionariam com gravidade zero.
Para resolver este “enorme” problema, contrataram a Andersen Consulting, hoje Accenture.
Empregaram uma década e 12 milhões de dólares, conseguiram desenvolver uma caneta que escrevesse com gravidade zero, de ponta cabeça, debaixo d’água, em praticamente qualquer superfície incluindo cristal e em variações de temperatura desde abaixo de 0 até mais de 300 Celsius…
…Os russos utilizaram um lápis.
Apesar de ser apenas uma história, ela ilustra perfeitamente a dica de hoje: pense simples!
No nosso dia-a-dia de trabalho estamos sempre nos deparando com diversos problemas, muitos dos quais parecem bastante complexos. Mas será que eles são realmente tão complexos assim? Será que não existe uma solução simples para o problema?
É importante exercitar a tentativa de encontrar uma solução simples para os problemas antes de adotar a solução complexa. Sempre que você se deparar com um problema que aparentemente só pode ser resolvido com alta complexidade, procure parar um pouco e analisar se existe uma solução mais simples para ele.
AppStore: Loja de jogos finalmente chega ao Brasil
Após meses de especulação, desde que a Apple inaugurou oficialmente a iTunes Store no Brasil em meados de dezembro, finalmente a loja de jogos da AppStore chega ao nosso país. Para todos aqueles que sempre sonharam em jogar os famosos Angry Birds ou Cut the Rope, sem a necessidade de “burlar o sistema”, criando contas baseadas em outros países ou realizando “JailBreak”, já é possível comprar esses grandes sucessos de games mundiais de maneira simples e prática, como há muito tempo deveria ser.
Ótima notícia para o consumidor brasileiro, ótima notícia para os desenvolvedores brasileiros de jogos.
Screen Shoot da loja de jogos Brasileira
Censo Gamer Brasil 2012
A Acigames, em parceria com a InsideComm, lança esse ano o Censo Gamer com o objetivo traçar uma radiografia inédita do mercado de jogos eletrônicos no Brasil.
Todos os interessados poderão acessar o site do Censo Gamer Brasil e preencher o formulário de coleta de dados online. O resultado será divulgado a partir de agosto e, Segundo Luiz Ferrarezi, gerente de novos negócios da InsideComm, a coleta de dados revelará tendências, podendo-se fazer projeções, mapeamento da situação do mercado brasileiro de jogos eletrônicos, entre outros tipos de ações.
Visite o site: Censo Gamer Brasil
Snapping Pixels e Illustrator
Quem nunca teve algum problema com o Adobe Illustrator? Por menor que seja, todos nós, alguma hora, podemos passar por essa situação crítica. Por isso, este artigo, aqui traduzido, pode ser muito interessante guiando qualquer um que tenha dificuldades com o softwre.
O artigo não remete a um tutorial, e sim, a um exercício elaborado por Mijin Mishes (www.mishes.com) podendo ser uma boa fonte de aprendizado para aqueles que gostariam de aprender mais detalhes sobre softwares gráficos para aperfeiçoamento de seu desempenho. Um ganho de rapidez e maior intuição na hora de executar alguma arte!
Recomendado!
Snapping Pixels no Illustrator CS5, todos os problemas resolvidos
“Ontem eu estava trabalhando em um novo artigo quando, de repente, meu amigo Zemechiel me pediu ajuda. Ele estava trabalhando em um novo ícone feito no Ilustrator e ocorreu um problema com alguns pontos âncora: ele simplesmente queria desloca-los 0.5 pixels para a direita, mas o programa estava teimoso e somente aceitava que ele os movesse em medidas inteiras. Eu chequei todas as opções (Snap to Pixel, Snap to Grid, Show Grid) e tudo estava aparentemente ok. Isso me tomou toda a atenção a fim de resolver esse impasse.”
Removendo todo o “snap” nas opções de pixel
Este rápido tutorial não quer dizer que vai mostrar como fazer pixel art, mas o oposto, como remover todos as opções “snap to pixel”, então você pode ter total liberdade enquanto trabalha nos seus projetos. Vamos fazer um arquivo qualquer onde poderemos avaliar todas as diferentes opções de snap.
- Abrindo um novo arquivo
As primeiras duas opções, quanto ao “snap to pixels”, aparecerão quando que você criar um novo arquivo. Primeiramente, nós temos um “preview mode”: essa opção define se você vai ver uma moldura de “pixel duro”, ou uma versão “overprint” (que evita que aquele contorno branco de pixels ao redor de formas pretas – K= 100). Devido à nossa busca por desligar todos as opções relacionadas a pixels, minha sugestão é deixar a opção “overprint” assinalada, considerando que isso não afeta tudo, na prática.
Como segunda opção, esta é realmente relevante para cumprir o nosso propósito, o de “Alinhar novos objetos ao grid de pixels” e você DEVE, neste caso, deixa-la ali, quieta, sem assinalar.
Ok, gente, depois que fizermos tudo corretamente, daremos uma olhada na opção principal que quase todos os designers conhecem, considerando o snapping no Illustrator. A princípio, vamos fazer algo como esse triângulo com zoom de 6400%:
Como fica com “pixel” marcado
Como fica com o overprint marcado
Esse objeto, o triângulo aí acima, nos servirá como um modelo para entendermos como as diferentes propriedades de snapping afetam um elemento no Illustrator.
Opções de “Snap”
Agora, vou mostrar como as duas opções de snap podem afetar um elemento. Vamos ver na figura abaixo como você pode encontrar a localização dessas opções.
- “Snap to Grid”
Vamos experimentar a primeira opção chamada “Snap to Grid”: esta opção alinha cada objeto que você desenha no grid do Illustrator (não confunda com “align to pixels”). Ativado isso e usando a ferramenta de seleção direta (a tal da seta branca), selecione os dois pontos âncora do lado esquerdo do nosso objeto.
Agora aperte a seta da direita do seu teclado para deslocar os pontos âncora. Você, então, perceberá que, como padrão, os pontos âncora serão alinhados ao grid.
Então essa pode ser uma das razões pela qual meu amigo estava encrencado. Ele estava usando o teclado. O que você precisa fazer é ir para Object > Transform > Move (atalho: Shift + Ctrl + M) e do menu que irá aparecer, você pode ajustar a quantia de pixels que quer deslocar os pontos âncora.
E agora você pode deslocar o ponto âncora à distâncias menores do que 1px. Isso provavelmente responde à sua questão, mas, se não, podemos então dar uma olhada numa ultima alternativa.
- “Snap to Point”
O que esta opção faz é que toda vez que você fizer um novo objeto de vetor, você o coloca entre o limite de 2 pixels de uma linha de grid, isto alinha ao pixel mais próximo do grid. Você ainda pode mover seus objetos em menos de 1 pixel acessando a “move option”, como anteriormente demonstrada, mas esqueça sobre move-lo manualmente ou através do teclado.
E é isso. Agora você sabe como remover todos as “snapping options” do Illustrator. Espero que isso tenha sido útil para todos vocês.
- Bonus
Se você esqueceu de desmarcar a opção “Alingn New Objects to Pixel Grid” no começo deste artigo, você sempre poderá acessa-la ao usar o menu de transform.
Quando se está trabalhando com “pixel preview”, seus objetos tenderão a parecer um pouco desfocados. Para corrigir este problema, vá em Edit > Preferences > General, ou ctrl + k, e desmarque a opção “Anti-aliased work”.
Com Anti-Alising
Sem Anti-Alising
Dica do Dia: Abreviando declaração das propriedades (CSS)
Dando continuidade às postagens referentes a dicas, hoje iremos abordar um pouco sobre como organizar um código css.
Dica do dia: Abreviando declaração das propriedades (CSS)
Durante a codificação do CSS, é de extrema importância que o desenvolvedor adote algumas medidas para que o código fique organizado e documentado.
Quando o projeto passa a ser compartilhado com outros profissionais, essas práticas tornam-se imprescindíveis para manter o código consistente e inteligível.
A dica é a seguinte:Ao desenvolver um código css, abrevie as declarações das propriedades.Veja no exemplo abaixo:
ERRADO
#conteudo{
margin-top:20px;
margin-left:10px;
margin-bottom:5px;
margin-right:15px;
font-size:15px;
font-weight:bold;
font-family:"verdana";
border-style:solid;
border-width:2px;
border-color:#ff0000;
background:url(images/img.jpg);
background-color:#fff;
background-repeat:no-repeat;
background-position:0 15px;
}
CORRETO
#conteudo{
margin:20px 15px 5px 20px;
font:bold,15px Arial, Verdana;
border:2px solid #ff0000;
background:url(images/img.jpg) no-repeat 0 15px #fff;
}
Tomando essa medida você irá escrever códigos mais organizados e bem menores!
Chamada de trabalhos para Trilha de Cultura do SBGames 2012
O SBGames - Simpósio Brasileiro de Games e Entretenimento Digital é o maior e mais importante evento da América Latina na área de games e entretenimento digital que reúne anualmente pesquisadores, artistas, designers, professores e estudantes de universidades, centros de pesquisa e da indústria de jogos.
A edição de 2012 já tem data e local confirmados:
Centro de Convenções Ulysses Guimarães
2, 3 e 4 de Novembro de 2012
Brasília – DF
Centro de Convenções Ulysses Guimarães - Brasília/DF
Inscrições de trabalhos para a Trilha de Cultura
O desafio da Trilha de Cultura do SBgames é desvendar o universo dos jogos digitais, dos jogadores, dos significados e relações que estes constroem, ou construíram, na sociedade.
A trilha abrange as pesquisas com diversos aspectos da cultura, e tem interesse em compreender os games em suas relações com a filosofia, a educação, o corpo, a política, o gênero, a religião, e diversos outros temas
As Inscrições já estão abertas até 23 de Julho e os trabalhos podem ser enviados em dois formatos, Short Papers e Full Papers:
Short Papers são são pequenos artigos que mostram pesquisas em estado inicial de desenvolvimento, ou mesmo uma pesquisa finalizada, em nível de graduação ou pós-graduação.
Full Papers são trabalhos que apresentam pesquisas já finalizadas, ou em estado avançado de finalização. Possuem a participação de pelo menos um Mestre ou Doutor e estão vinculados à Universidade através de projetos ou grupos de pesquisas. Devem ser submetidos apenas em língua inglesa. Devem ter um mínimo de sete (7) páginas e um máximo de dez (10) páginas, excetuando-se as referências e os anexos.
É importante ressaltar que todas as submissões devem ser originais, isto é, trabalhos inéditos, não publicados ou apresentados em quaisquer tipos de eventos. Qualquer obra que tenha sido previamente publicada, ou está sendo apresentada simultaneamente em eventos ou revista, será rejeitada. Trabalhos que já foram apresentados no SBgames sob a forma de short papers, e evoluíram para Full Papers, serão aceitos.
Datas importantes:
- Submissão dos trabalhos através do sistema JEMS: 23/7
- Divulgação dos trabalhos aprovados: 3/9
- Entrega da versão final dos trabalhos: 17/9
Confira o regulamento e mais informações no site do evento.
Dica do dia: evite usar números mágicos
Estamos iniciando hoje uma série de postagens curtas com dicas úteis relacionadas a programação e design.
A dica de hoje é: evite utilizar números mágicos nos códigos.
Vou explicar essa dica com um exemplo: estamos escrevendo um programa que lide com a manipulação de dias da semana. Supondo que em várias partes do código seja necessário fazer uma iteração nesses dias, podemos escrever em diversos momentos laços de repetição indo de 1 a 7. Utilizando o número 7 ao longo do código, futuramente poderemos encontrar pelo menos dois grandes problemas:
- Se outra pessoa precisar fazer manutenção no sistema, talvez ela tenha um certo trabalho para descobrir o porquê de ter sido usado o número 7, e não 10 ou 500. Pode não ficar claro que estamos lidando com dias da semana utilizando apenas o número 7.
- Se precisarmos fazer com que o sistema lide com os dias do mês, será preciso verificar em todo o código a ocorrência do número 7 e substituir seu valor.
Esses números sem uma explicação bem definida espalhados no código são chamados números mágicos e sua utilização é desaconselhada. Em vez disso, podemos utilizar constantes ou parâmetros, tornando o código mais semântico e legível.
No exemplo citado, o número 7 poderia ser a constante QUANTIDADE_DIAS, e no código apareceria um laço indo de 1 a QUANTIDADE_DIAS. Além de ficar auto-explicativo, para modificar a quantidade de dias bastaria alterar o valor da constante em uma única linha.
Busca
Categorias
Archive
- abril 2012
- março 2012
- fevereiro 2012
- janeiro 2012
- dezembro 2011
- novembro 2011
- julho 2011
- junho 2011
- abril 2011
- março 2011
- fevereiro 2011
- janeiro 2011
- setembro 2010
- fevereiro 2010
- dezembro 2009
- novembro 2009
- outubro 2009
- setembro 2009
- agosto 2009
- julho 2009
- maio 2009
- abril 2009
- março 2009
- fevereiro 2009
- janeiro 2009
- dezembro 2008