Category Archives: Utilidades

Google PLus para empresas

Google Plus para empresas – Adição de Urls Amigáveis

O Google Places está cada vez mais integrado com o Google Plus.

Recentemente recebemos emails de notificação do Google para que as empresas cadastradas no Google Places “reservem” sua url amigável no Google Plus, sendo que as empresas neste mesmo processo são “obrigadas” a criar uma página no Google Plus (Como são espertinhos)

Segue abaixo um exemplo do que recebemos via email

Imagem email do Google Plus

Imagem do email recebido para utilização de urls amigáveis

Interessante é que realmente o Google demorou a implementar as urls amigáveis para páginas e eles praticamente vivem de boa indexação… agora é esperar para ver os resultados com as novas urls.

CakePHP-Framework

Dicas para começar a desenvolver um Plugin para CakePHP

Estamos desenvolvendo um painel de administração novo e adotamos o Cake como framework para o desenvolvimento. Para facilitar o desenvolvimento, algumas funcionalidades serão desenvolvidas como plugins. Eu nunca havia trabalhado com o Cake antes, então ao iniciar o desenvolvimento do painel e criar plugins foi um pouco complicado, mas ao analisar a estrutura do plugin e do Cake, percebe-se que eles são bem simples de entender.

Então, escrevo este post para compartilhar um pouco da experiência que estou tendo e ajudar o pessoal que quer começar a desenvolver plugins!

Vale lembrar que este post considera que você já tem algum conhecimento com o framework, pelo menos o tutorial de criação de blog disponibilizado no site do CakePHP (http://book.cakephp.org/2.0/en/tutorials-and-examples/blog/blog.html).

Caso não tenha feito, recomendo que faça antes de prosseguir e preste bastante atenção na estrutura do Cake e como ele funciona.

Obs.: Este post não é um tutorial, são dicas de utilização ;)

Não irei abordar as configurações iniciais do Cake, caso ainda não tenha o framework instalado, baixe-o aqui e extraia os arquivos no diretório do seu servidor web para acessá-lo pelo navegador (htdocs, www, etc). Feito isso, acesse-o pelo seu navegador e siga as instruções iniciais.

 A primeira dica é a criação da estrutura de um plugin.

A estrutura de diretórios de um plugin é quase a mesma do diretório ‘app’. Para não precisar criar cada diretório manualmente (Model, Controller, View, Config, Lib, etc), podemos usar o Console.

Abra o seu terminal (DOS no Windows) e vá até o diretório app/, no meu caso:

cd C:\xampp\htdocs\cake\app\

Depois digite:

Console\cake bake plugin NOME_DO_SEU_PLUGIN

É importante que você esteja no diretório app no console, senão os comandos podem não funcionar corretamente.

Ele vai pedir para você escolher o caminho onde criar a estrutura de diretórios para seu novo plugin. Existem dois lugares onde você pode colocar o seu plugin:

  1. No diretório ‘Plugin‘, dentro de app
  2. No diretório ‘plugins‘ no mesmo diretório onde está app

A diferença dos dois diretórios é que alguns desenvolvedores usam a mesma instalação do cake (core) para várias aplicações (app1, app2, app3, por exemplo), assim eles colocam os plugins que são usados por todas as aplicações no diretório ‘plugins’, ao invés de ter uma cópia do plugin para cada aplicação em app1/Plugin, app2/Plugin, etc.

Depois de escolher onde será criado o seu plugin, ele mostrará o nome do seu plugin e o diretório onde será salvo e perdirá a confirmação. Se estiver tudo certo, confirme e ele criará os diretórios.

A maioria desses diretórios estão vazios, exceto ‘Model‘, ‘Controller‘.

Em ‘Model’ terá o arquivo NOME_DO_PLUGINAppModel.php e em ‘ControllerNOME_DO_PLUGINAppController.php

De agora em diante usarei o nome do plugin como MyPlugin.

Esses arquivos funcionam exatamente como AppModel.php e AppController.php que estão em app/Model e app/Controller, respectivamente (tanto que eles estão herdando delas).

Porém há um detalhe que fazia eu me confundir um pouco:

// .../plugins/Myplugin/Model/MyClass.php App::uses('MypluginAppModel', 'Myplugin.Model'); class MyModel extends MypluginAppModel{ ... }

No nosso arquivo MyModel.php devemos ‘incluir’ a classe MyPluginAppModel para podermos extendê-la.

Para isso usamos o método ‘uses‘ da classe App.

O primeiro parâmetro é o nome da classe a ser incluída – MypluginAppModel – e o segundo é a qual pacote ela pertence. No caso ela está no diretório Model do plugin Myplugin, então ela pertence ao pacote Myplugin.Model.

Em MyPluginAppModel podemos ver:

App::uses('AppModel', 'Model'); class MyPluginAppModel extends AppModel { }

Obs.: Não é obrigatório, mas é um padrão do Cake.

Estamos incluindo a classe AppModel que pertence ao pacote Model. Informando apenas ‘Model’, sem nenhum nome a frente, por exemplo SomeName.Model, significa que estamos falando do pacote Model da aplicação (app/Model).

Se vamos usar alguma classe de outro diretório, podemos usar App::uses(‘JustAnotherClass’, ‘Myplugin.Vendor’); para o diretório Vendor dentro de Myplugin, por exemplo.

No atributo $uses em uma Controller também é necessário informar de onde vem a Model a ser usado naquela controller (nome_plugin.nome_classe).

class MyController extends MypluginAppController{ public $uses = array('Myplugin.MyModel', 'Myplugin.MyModelTwo'); }

Sempre que for informar uma classe do seu plugin para ser usada, coloque nome_plugin.nome_classe.

Outros lugares onde são usados nomes de classes:

- atributo $belongsTo, $hasMany das Models:

class MyModel extends MypluginAppModel{ public $belongsTo = array( 'MyModelTwo' => array( 'className' => 'Myplugin.MyModelTwo', // percebam aqui o nome do plugin mais o nome da classe, separados por ponto. ... }

Tudo isso é importante saber, mas há uma forma para que você não precise escrever tudo isso “a mão”.

Podemos usar o Console para isso!

Criando um Model chamado MyModel para o plugin MyPlugin:

...\htdocs\cake\app>Console\cake bake model MyModel --plugin MyPlugin

Ao executar o comando ele criará a model no diretório Model do plugin MyModel com as configurações padrão, por exemplo ele detectará a ‘primary key’ da tabela e seus relacionamentos, como também escreverá algumas validações conforme as regras dos campos da tabela (not null, apenas número para campos que recebem números, etc.).

Verifique se está tudo certo com as regras escritas e altere-as conforme sua necessidade!

Vale lembrar também que esse comando segue as convenções do cake. Ao digitar esse comando, ele procurará pela tabela my_model no banco de dados. Se ele não encontrar, uma mensagem de erro será mostrada no console.

Obs.: O mesmo que foi escrito para ‘cake bake model’ vale para ‘cake bake controller’!

Para carregar seu plugin, em app/Config/bootstrap.php digite:

CakePlugin::load('SeuPlugin', array('bootstrap' => true, 'routes' => true));

‘SeuPlugin’ deve ser o nome exato do diretório do seu plugin em app/Plugin ou /plugins.

O array de opções é opcional, mas se quiseres carregar as configurações do plugin em SeuPlugin/Config/bootstrap.php ou SeuPlugin/Config/routes.php esse array deve ser informado como no exemplo acima.

São dicas simples, mas que algumas não abordavam diretamente no manual e que eu passei um tempo pesquisando para descobrir.

Espero ter ajudado!

Até a próxima!

facebook-20120202114915

Cuidado! Não confunda sua vida pessoal com a virtual

Durante a Campus Party Brasil 2012, o gerente geral de segurança do portal UOL, deu dicas de como diminuir os riscos na rede e continuar com sua privacidade intocada. Para ajudar os internautas, o especialista apresentou uma pesquisa de análise de comportamento que concluiu que o ser humano tende a se comportar da mesma maneira nos mundos virtual e real.

Segundo ele, um mero post em rede social pode trazer perigos. Para exemplificar, o especialista citou o caso de um funcionário de uma companhia de soluções para web, que foi demitido por causa de um tuíte. Para comemorar a vitória de seu time de futebol, o funcionário brincou com outro time usando o nome de sua empresa. Porém, na época, a companhia era patrocinadora oficial do time paulistano.

Algo parecido também ocorreu com um importante executivo, que precisou apagar de sua “lista de desejos” de um site de compras, um livro que ensinava como fabricar uma bomba atômica. Por conta disso, Nelson fez um alerta: cuidado com as listas de desejo ou serviços que exibem nas redes sociais o que você está ouvindo ou assistindo, elas podem ser usadas contra você.

Outra dica de Nelson é tomar cuidado com os amigos do Facebook. Ele diz que, mesmo que a pessoa seja conhecida, seu perfil pode conter falhas de segurança. Além disso, sempre há a possibilidade de um criminoso virtual utilizar uma conta “real” para enganar as vítimas. Fora isso, Nelson explica que é importante se lembrar que um post pode ficar eternizado na rede. “Uma vez postada, a informação fica lá para sempre. Ou seja, se você coloca alguma mensagem, mesmo que ela seja apagada, alguém pode ver, salvar ou até tirar um print screen e, então, ela será eternizada”, ressaltou.

Apesar de todos os avisos e alertas, Nelson afirma que sair das redes sociais não é a solução. De acordo com ele, basta pensar antes de postar. “Tem de haver consciência na hora de publicar informações nas redes sociais. Uma consciência que dure 24 horas por dia e 7 dias por semana, pois nosso hábitos, mesmo que virtualmente, dizem muito sobre nós”, concluiu.

Você tem alguma dica de como manter sua privacidade e segurança na rede? Compartilhe conosco nos comentários.

Fonte: UOL

tdc2013

TDC Porto Alegre 2013 – The Developer’s Conference

Um dos eventos mais esperados do ano pela comunidade de desenvolvedores do Sul do Brasil está chegando. O TDC (The Developer’s Conference) edição Porto Alegre acontecerá entre os dias 25 e 26 de Outubro na UniRitter.

O período de inscrições vai até o dia do evento (se houverem vagas). Aproveite e clique no link abaixo para efetuar sua inscrição:

http://www.thedevelopersconference.com.br/tdc/2013/inscricoes#portoalegre

Entre as trilhas disponíveis estão:

SEXTA – 25/10 SÁBADO – 26/10
Trilha Testes Trilha Arduino e Raspberry Pi
Trilha Java Trilha Arquitetura
Trilha .NET Trilha Agile
Trilha Mobile Trilha Games
Trilha Marketing Digital Trilha UX/Front-End
Trilha Stadium Sexta Trilha Stadium Sábado

Gustavo das Neves, diretor de criação da Master Studio Web submeteu palestra para a trilha de Ux / Front-end. Se puder ajudar votando na palestra, agradecemos :)

Já estamos com nossas inscrições feitas e aguardando ansiosamente esta oportunidade de compartilhar conhecimento com outros desenvolvedores.

tabela tipos de empresa

Tipos de Empresa Mais Comuns no Brasil

Uma das maiores dúvidas do brasileiro na hora de abrir uma empresa é como ela estará enquadrada nas questão legais e financeiras. Então buscamos este material de apoio para você que pode estar passando por dificuldades na hora de abrir sua empresa.

O quadro abaixo resume as características essenciais dos tipos de empresas mais comuns no Brasil.

Tipos de Empresa

Legenda:

ME: Microempresa
EPP: Empresa de Pequeno Porte
MEI: Microempreendedor Individual
EIRELI: Empresa Individual de Responsabilidade Limitada

Espero ter ajudado!

Imagem - App Store

Listão de apps da App Store com desconto de páscoa

Como sempre acontece, vários desenvolvedores aproveitam datas festivas para fazer promoções em aplicativos da App Store. Na Páscoa não é diferente e diversas empresas reduziram seus preços para o feriado, por tempo limitado.

Confira abaixo a lista (arteriscos indicam jogos de graça). Lembrando que, como não há a categoria GAMES na App Store brasileira (leia o porquê aqui), você pode comprar com uma conta argentina, usando cartão de crédito brasileiro.

 app-store-iphone

Electronic Arts

Chillingo

SEGA

Gamevil

Digital Chocolate

99Games

Diversos

Fonte: blogdoiphone.com

modelo-de-negocios

Modelo de negócio e rentabilidade

Em uma conversa com amigos empreendedores, as conversas nos levaram para uma questão muito importante: Por que diversas empresas não encontram seu modelo de negócio?

Tento responder de forma clara e objetiva. Muitas empresas não esperam atender um público tão grande quanto alcançaram ou simplesmente não planejaram as formas alternativas de ganhar dinheiro.

Veja a Wikipédia que atualmente pede doações constantemente, será que eles não possuem um produto ou serviço que gere valor econômico? Creio que sim! Eles possuem atualmente uma das maiores fontes de pesquisa rápida e atualizada do mundo.

Podem com certeza cobrar por algo, só que ainda não o fizeram.

O caso da Wikipédia é apenas um exemplo, mas muitas empresas acabam falindo com ótimos produtos ou serviços por não escolherem o melhor modelo de negócio. Políticas de preço, concorrência, público-alvo e diversos outros fatores formam um bom modelo de negócios.

Por que meu site não dá resultados?

Seu site não dá resultados? O que fazer?

Se o site de sua empresa ou seu site pessoal não dá resultado $$, saiba que algo está errado. Analise os relatórios de acessos e tenha um conhecimento sólido de seu público-alvo. Focar no público-alvo é um fator que leva ao sucesso na maioria dos casos.

Existem duas opções para seu site não dar resultado:

  • Você fez um Site Feio para Burro que realmente não converte as visitas; ou
  • Você fez um Site Bonito para Chuchu

Para o 1º caso não há o que fazer aqui: o melhor é voltar e ver como construir um bom site, sem churumelas. Veja como um bom projeto visual pode fazer a diferença aqui.

Aqui tratamos sobre o 2º caso. Imagina só fazer um baita investimento para atrair visitas e fazer o site ficar “Bonito para Chuchu”, mas não ter resultados.

Como numa loja física, em alguns momentos o seu cliente poderá ficar em dúvida em relação ao que é oferecido na página. Porém, na loja física existem vendedores lá prontos para ajudar – mas e no site? Nem sempre esse potencial cliente está disposto a pagar pra ver, ou seja, se ele não conseguir tirar suas dúvidas, pode ter certeza de que ele não fará a compra.

Com o objetivo de diminuir esse problema, explicamos abaixo 3 formas de você encorajar os visitantes do seu site a entrarem em contato você:

1- Email e formulário de contato

Sempre vale a pena repetir: é muito mais fácil apagar spam do que conseguir um novo cliente, então deixe o seu email visível sempre que possível.

Um modo semelhante, mas que facilita a vida do seu potencial cliente é o famoso formulário de contato (ou de pedido de orçamento). Através do site você torna possível o envio de uma mensagem e pronto – dúvida enviada.

  • Vantagem: é uma ferramenta bastante comum, então com usabilidade simples.
  • Desvantagem: o tempo de resposta é muito importante, já que esse potencial cliente tem o risco de ter ido buscar outra saída para a necessidade dele.

2- Chat-online

É um sistema cada vez mais utilizado e já tem sido bem aceito por internautas. Basicamente, quando tem alguém navegando no seu site, uma janela aparece e oferece ajuda. Essa ajuda é você ou sua equipe respondendo via chat as dúvidas dessa pessoa.

Simples assim.

  • Vantagem: seu cliente não sai da sua página e já tira dúvidas na hora, o que dá a chance dele efetuar a compra na hora.
  • Desvantagem: demanda que tenha uma pessoa respondendo e provendo informações.

Um sistema legal de chat-online é o WebChat da Locaweb, veja mais sobre ele aqui.

3- Telefone

O bom e velho telefone é ainda um dos mais eficientes. Você mostrar um telefone de contato pode ser a diferença para que uma venda aconteça. Isso acontece porque além do cliente poder tirar quaisquer dúvidas, o contato direto por voz com outra pessoa passa maior confiança e tranquilidade a quem está comprando.

  • Vantagem: maior possibilidade de conversão.
  • Desvantagem: custo maior com RH para atender as ligações.

Além de dar esse suporte na hora da compra, a vantagem de se usar essas ferramentas é ter o contato desse potencial cliente. Por mais que ele não faça a compra na hora, você passa a ter seus contatos e, futuramente, poderá tentar a venda novamente.

Fonte: SaiaDoLugar.com.br

retorno sobre investimento segmentado

Quanto mais objetivo e claro, mais caro!

Você que trabalha diretamente com publicidade online ou offline, e que normalmente escuta clientes reclamando do preço da mídia, saiba que a explicação mais lógica e que fará com que ele entenda é a seguinte:

“Quanto mais rápido e melhor você acertar seu público-alvo, maior será o custo… porém, o retorno é praticamente certo e muito  maior que o da mídia barata!”

Utilizo sempre o exemplo da segmentação em campanhas de links patrocinados que muitas vezes o cliente foca tanto no público-alvo que se assusta com o CPC (Custo por clique). Basta levar em consideração que o resultado da campanha não será analisado apenas pelo custo e sim pelo retorno sobre investimento.

 

Steve Jobs - "Maluco" e Revolucionário

Os empreendedores (malucos) é que mudam o mundo!

Todo mundo está careca de saber que empreendedores são sonhadores, mas ao mesmo tempo realizadores, ou seja, eles sonham com uma nova realidade e, a partir daí, começam a sair do lugar para transformar as coisas ao seu redor.

É claro que esse não é o caminho mais fácil. Na teoria, o caminho mais fácil é você trabalhar na empresa dos outros. No entanto, faz parte da natureza do empreendedor querer construir o próprio caminho e a própria realidade o que, obviamente, envolve (possivelmente) mais riscos, desafios e dificuldades.

Pessoas que não possuem o espírito empreendedor não conseguem entender o porquê fazemos o que fazemos e talvez, por isso, gostem de dizer que somos malucos e que o que queremos fazer (quase sempre) é uma loucura. Mas a questão aqui é a seguinte: ser maluco é bom. Afinal de contas, se não fossem os malucos nós ainda viveríamos em cavernas, não é mesmo?

O que quero dizer com isso é que para alguém utilizar um produto ou serviço que facilite e/ou melhore sua vida (independente do que seja), outro alguém teve que imaginar esse produto ou serviço e é justamente aí que o empreendedor entra na história.

Está mais do que claro que empreendedores transformam o ambiente ao seu redor. Transformam a vida das pessoas. E cá entre nós… só mesmo os malucos para quererem fazer algo assim. Para quererem e gostarem de encarar os desafios que envolvem fazer algo acontecer.

Os empreendedores (malucos) mudam o mundo e eu tenho certeza que, assim como eu, você tem muito orgulho de fazer parte desse grupo. Não tem?

Fonte: saiadolugar.com.br

Taxi - Encontre o disponível mais próximo

5 Aplicativos para você encontrar um táxi disponível


Em grandes cidades, como São Paulo, por exemplo, o dia pode amanhecer de um jeito e terminar de outro. Além do trânsito, de possíveis problemas com o transporte público ou de chuvas torrenciais que alagam todas as ruas, é bem comum a gente se encontrar em uma situação de pressa e emergência por uma carona. E o pior: sem nenhum contato de táxi na agenda.

No mais, seja por uma urgência ou por simples necessidade, encontramos 5 aplicativos capazes de localizar e chamar serviços de táxi em diversos locais do país pelo próprio smartphone. Confira:

1. Moove Taxi

Moove Taxi é um dos melhores apps para encontrar pontos de táxi pelo Android ou iPhone em São Paulo.

Com base na sua geolocalização, ele acessa uma extensa base de dados e te dá a localização e o telefone dos pontos mais próximos de você – até com os dados da distância entre você e o ponto. Dá pra fazer a ligação direto do app.

Além disso, a aba Rádio Taxi mostra os telefones das rádios mais comuns de taxis de São Paulo. Em Favoritos, você pode colocar os pontos de táxis que usa com maior frequência, para ter acesso fácil. Um dos recursos mais legais do aplicativo é a aba táximetro. Nela, você coloca um endereço inicial, um final e ele calcula o preço médio da corrida – nos testes o preço se mostrou bastante próximo do real. Por fim, o app é colaborativo, então há uma aba para você adicionar um ponto novo.

A interface do Moove Taxi é bonita, clean e muito fácil de usar. O aplicativo é gratuito, está sempre em melhorias e tem versões para iPhone e Android. Todo mundo sabe da dificuldade que é pegar um táxi em São Paulo, o Moove Taxi tornou-se um app indispensável.

Baixe o Moove Taxi para Android pelo Downloads INFO.

Baixe o Moove Taxi para iPhone pelo Downloads INFO.

2. ResolveAí

Resolveaí é um serviço criado para facilitar a comunicação entre os usuários e taxistas pelas cidades. Disponível por enquanto nas cidades do Rio de Janeiro e Brasília, ele permite traçar rotas e buscar os carros disponíveis para atender no momento.

Para começar a utilizar o Resolveaí é preciso realizar um cadastro simples. Depois, é possível cadastrar alguns endereços para facilitar na hora de solicitar uma rota com o táxi.

A página inicial já permite preencher o formulário com o endereço de onde o usuário está, e para onde ele quer ir. Há duas opções de serviço de táxi para escolher: Comum e Premium. O serviço também possui um mecanismo que identifica automaticamente o endereço do usuário – caso ele permita.

Após preencher com os dados e realizar uma consulta, o Resolveaí mostra todos os carros disponíveis para buscar o usuário. Caso a rota seja confirmada, basta aceitar a proposta do site e aguardar.

Baixe o ResolveAí para iPhone pelo Downloads INFO.

3. Taxibeat

Com versões gratuitas para Android e iOS, o Taxibeat ajuda a localizar e chamar serviços de táxi pelo smartphone com Android ou iOS.

A partir da localização do usuário, o aplicativo localiza os táxis mais próximos e mostra informações como o nome dos motoristas, modelos de carro, avaliações de outros passageiros, e a distância até o ponto.

Caso seja feito algum pedido de táxi, há como rastrear o veículo em direção ao usuário pelo próprio mapa.

Baixe o Taxibeat para Android pelo Downloads INFO.

Baixe o Taxibeat para iOS pelo Downloads INFO.

4. 99Taxis

Bem avaliado no Google Play, o app 99Taxis é capaz de encontrar e pedir o táxi mais próximo do usuário a partir do GPS do smartphone.

Tudo que o usuário precisa fazer para começar a utilizar o app é ativar seu serviço de localização, confirmar um número de telefone, e escolher em qual localidade deseja chamar o táxi.

Alguns taxistas já possuem foto e diversos dados para segurança, inclusive seu número de contato. Há, também, como acompanhar a chegada do veículo em tempo real pelo celular.

O 99Taxis é gratuito para Android. E tudo indica que, em breve, haverá também versão para iOS.

Baixe o 99Taxis para Android pelo Downloads INFO.

5. Táxi Aqui

Táxi Aqui é um serviço para solicitar táxi pelo smartphone. Com ele, o usuário consegue localizar os pontos mais próximos dele pelo GPS, e pode chamar um taxista direto pela internet, sem precisar ter dor de cabeça com diversos atendimentos pelo telefone.

O app pretende se expandir para cobrir as principais cidades do país, e já atende capitais como São Paulo, Rio de Janeiro, Salvador, Fortaleza, por exemplo.

Baixe o Táxi Aqui para Android pelo Downloads INFO.

Baixe o Táxi Aqui para iPhone pelo Downloads INFO.

 

Fonte: info.abril.com.br

responsividade e dicas de media queries

O que são Media Queries e como elas influenciam o Design Responsivo?

Design Responsivo III – Media Queries e Compatibilidade

Ok. Então você decidiu fazer o seu layout responsivo… Este post contém muitas informações e ferramentas úteis para criar imagens fluidas, fazer consultas de mídia, vencer os browsers antigos e testar o resultado final para você desenvolver um layout like a boss.

exemplo de design responsivo

Imagens Fluidas

O primeiro passo é garantir que as imagens vão se adaptar de acordo com o layout. A solução mais prática é forçar as imagens a se redimensionarem proporcionalmente de acordo com o tamanho de um container. Para fazer isto basta uma linha de código:

1
2
3
img {
    max-width: 100%;
}

Esta técnica também funciona para outros objetos como vídeos:

1
2
3
4
5
6
img,
embed,
object,
video {
    max-width: 100%;
}

Se você (ainda) dá suporte ao Internet Explorer 6 você deve colocar o seguinte parâmetro em uma folha de estilos especifica para ele:

1
2
3
4
5
6
img,
embed,
object,
video {
    width: 100%;
}

Parece a mesma coisa, mas não é. A diferença é que no max-width:100% as imagens nunca ultrapassarão o tamanho do container. Já no segundo caso as imagens SEMPRE estarão EXATAMENTE do tamanho do container. Se você for usar esta regra para o IE certifique-se de que suas imagens são do tamanho certo para não “estourar” os pixels, ok?

Outra coisa importante de se ter em mente é que o Windows não renderiza muito bem imagens redimensionadas em browsers antigos (como IE7 ou anterior). O artigo Fluid Images do Unstoppable Robot Ninja ensina a usar o filtro AlphaImageLoader para corrigir o problema. Realmente ninja!

Outra técnica bacana é cortar as laterais da imagem, escondendo ou revelando algumas partes de acordo com o tamanho do browser. Uma maneira simples de fazer isto seria determinar um overflow:hidden para o container da imagem.

1
2
3
4
5
6
7
8
.uma-div-feliz {
   overflow: hidden;
}
.uma-div-feliz img {
   display: block;
   max-width: auto;
}

Só lembrando que esta técnica vai cropar (existe este verbo? :) ) a imagem indiscriminadamente. Se você quiser ter um controle maior sobre que parte da imagem é cortada o artigo Hiding and Revealing Portions of Images ensina algumas maneiras de fazer isto.

O que são Media Queries?

A explicação rápida: são expressões de CSS utilizadas para mudar o layout em diferentes aparelhos sem mudar o conteúdo. A explicação longa: No CSS2 existia uma função chamada Media Type. Ela servia, como o nome já diz, para reconhecer um determinado tipo de dispositivo. Ao todo eram 10 diferentes Media Types:

  • all – todos os dispositivos
  • aural – sintetizadores de voz
  • braille – leitores de Braille
  • embossed – impressoras de Braille
  • handheld – dispositivos de mão. Por exemplo: celulares com telas pequenas.
  • print – impressoras convencionais
  • projection – apresentações de slides
  • screen – monitores coloridas
  • tty – teleimpressores e terminais
  • tv – televisores

 

Como isto funciona na prática? Vamos supor que você queira determinar estilos específicos para a impressão em papel, por exemplo. Você pode fazer isto basicamente de duas maneiras. Acrescentando um link para uma outra folha de estilos no cabeçalho do seu documento:

1
<link rel="stylesheet" media="print" href="print.css" />

Ou utilizando um CSS unificado com a função @media:

1
2
3
@media print {
    /* estilos */
}

E isto serviu bem. Por um tempo… Com a evolução dos dispositivos alguns aparelhos não se encaixavam em nenhuma destas categorias. Um smartphone moderno tem a tela e resolução muito melhores do que os celulares que se encaixam na categoria handheld… E o que dizer dos recém inventados tablet? Para a nossa salvação, no CSS3 a coisa ficou mais complexa com as tais Media Queries, uma espécie de upgrade dos Media Types. Media Querie, do inglês Consulta de Mídia, é uma expressão lógica que não verifica apenas o tipo do dispositivo, mas também a capacidade dele. É como se o Media Querie fizesse uma pergunta para o browser (sendo que a resposta é sempre verdadeira ou falsa). A vantagem disto é um controle muito maior sobre o layout! Você consegue utilizar estas consultas para checar coisas como a altura e a largura do browser, orientação, resolução, etc.

Parâmetros do Media Queries

Os Media features lembram bastante as propriedades de CSS. Cada uma tem um nome e aceita certos valores. Basicamente é a lista de perguntas disponíveis que você pode fazer para o browser. São elas:

Width

Largura do viewport (janela do browser incluindo a barra de rolagem).
Valor: medidas de comprimento.
Aceita prefixo min/max: Sim.

Height

Altura do viewport (janela do browser incluindo a barra de rolagem).
Valor: medidas de comprimento.
Aceita prefixo min/max: Sim.

Device-width

Largura da mídia. No caso de uma mídia digital é o tamanho da tela. No caso de impressão é o tamanho da folha.
Valor: medidas de comprimento.
Aceita prefixo min/max: Sim.

Device-height

Altura da mídia.
Valor: medidas de comprimento.
Aceita prefixo min/max: Sim.

Orientation

Orientação da mídia.
Valor: portrait (retrato) ou landscape (paisagem)
Aceita prefixo min/max: Não.

Aspect-ratio

Proporção. Razão entre os valores do ‘width’ e ‘height’. Apenas aplicável a mídias do tipo bitmap.
Aceita prefixo min/max: Não.

Device-aspect-ratio

Proporção da tela do dispositivo.
Aceita prefixo min/max: Não.
Exemplo de aplicação:

1
2
3
@media screen and (device-aspect-ratio: 16/9) {
      /* estilos */
}

Color

Número de bits por cor. Se o valor for zero o dispositivo é monocromático.
Valor: numérico
Aceita prefixo min/max: Sim.

Color-index

Número de entradas na tabela de pesquisa de cores do dispositivo de saída. Se o dispositivo não utiliza uma tabela de pesquisa de cor, o valor é igual a zero.
Valor: numérico
Aceita prefixo min/max: Sim.

Monochrome

Este recurso de mídia descreve o número de bits por pixel em um buffer de quadros monocromáticos. Se o dispositivo não é um monocromático o valor será 0.
Valor: numérico
Aceita prefixo min/max: Sim.

Resolution

Resolução do dispositivo (densidade por pixel). Apenas aplicável a mídias do tipo bitmap.
Valor: número em DPI ou DCM
Aceita prefixo min/max: Sim.

Scan

Tipo de formação de imagens especifico para televisores.
Valor: progressive (progressivo) ou interlace (entrelaçado)
Aceita prefixo min/max: Não.

Grid

Determina se o dispositivo é baseado em bitmap ou em um grid (exemplo: um terminal tty ou um telefone com apenas uma fonte fixa).
Valor: Se o dispositivo de saída é baseada em Grid o valor será 1. Caso contrário, o valor será 0. Aceita prefixo min/max: Não.
Grid neste contexto é um tipo de dispositivo. Não tem nada a ver com o grid do design, ok? :)

Operadores

Através dos operadores not (não), and (e) e only (apenas) você consegue ter um controle muito mais preciso. Você também pode utilizar o sinal de virgula que equivale a um “ou”. Combine isto com media types e você está pronto para dominar o mundo! :)

Resolução de tela, sua nova melhor amiga!

Se você quiser desenvolver um CSS tendo um dispositivo específico em mente basta você saber a resolução de uma tela (altura e largura em pixels). Já se você quer uma gama maiores de aparelhos  é preciso fazer algumas generalizações para determinar quais vão ser os pontos que o seu layout deverá se transformar. Para isto vamos considerar as seguintes larguras:

  • 320 pixels - Smartphones no modo retrato.
  • 480 pixels - Smartphones no modo paisagem.
  • 600 pixels - Tablets pequenos. Ex: Amazon Kindle (600×800)
  • 768 pixels - Tablets maiores em modo retrato. Ex: iPad (768×1024)
  • 1024 pixels - Tablets maiores em modo paisagem, monitores antigos.
  • 1200 pixels - Monitores wide.

Alguns exemplos

Um iPhone em modo retrato, por exemplo, possui 320px de width. Se você desenvolver um CSS para o smartphone da Apple basta utilizar o seguinte Media Querie:

1
2
3
4
/* Smartphone em modo retrato */
@media only screen and (max-width : 320px) {
      /* estilos */
}

É como se você perguntasse para o browser: “Hey, o seu dispositivo é uma tela e a largura máxima é 320 pixels?”. Se a resposta for sim o navegador aplica os estilos. Fácil, né? Já se você quiser determinar os estilos de um iPad independente da orientação:

1
2
3
4
5
6
/* iPads (restrato e paisagem) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
      /* estilos */
}

Estas são algumas opções. As possibilidades de combinação são infinitas. Se você quiser mais algumas idéias de uma olhadinha no artigo Hardboiled CSS3 Media Queries do Stuff and Nonsence.

Um exemplo legal de aplicação é utilizar um container e ir variando a max-width de acordo com a resolução da tela. Assim você garante que o seu conteúdo responda a diferentes tipos de dispositivos. Uma ferramenta legal para testar estes pontos de quebra é o Responsivepx. Você consegue visualizar o site e ir diminuindo e aumentando a área de corte até perceber em qual ponto começa algum problema… E aí é só usar um media query para botar a ordem na casa. :)

Para mais informações sobre Media Queries leia a documentação da W3C sobre o assunto.

OK. Mas isso funciona em TODOS os browsers?

Bem, tecnicamente os navegadores que trabalham legal com Media Queries são  Firefox 3.5+, Opera 9.5+, Safari 3+, Google Chrome 4+ e Internet Explorer 9+.  Segundo esta pesquisa cerca de 70% de todos os browsers no mercado aceitam Media Queries. Mas existem algumas maneiras de fazer os outros 30% participarem também da brincadeira…

E6 denial message by RobotJohnny.com

creditos: John Martz

Modernizr

Modernizr é uma biblioteca de JavaScript que detecta quais features de HTML5 e CSS3 um browser suporta. E isso, como vocês podem imaginar, pode ser aplicado aos Media Queries. Através de uma função em JS você pode determinar que uma folha de estilos seja carregada apenas se aquele browser aceitar Media Queries. É importante ler com cuidado toda a documentação da biblioteca para entender tudo que é possível fazer. Se você não precisa de tudo o que o Modernizr oferece, no site da biblioteca você pode baixar uma versão customizada escolhendo apenas as funções que deseja utilizar.

Ficou curioso para saber o que o seu browser atual aceita?  Sem problemas! A suite de testes do Modernizr informa tudo o que o seu navegador pode ou não fazer. Mas se bater uma preguiça de testar a aceitação em browser por browser você pode conferir algumas tabelas em alguns sites como HTML5 Please ou HTML5 & CSS3 Support.

Respond.js

Uma alternativa muito mais simples e leve (apenas 3kb) do que o Modernizzer , orespond.js adiciona suporte a min/max-width para o IE6-8 e outros browsers antigos. Útil se você só precisa destes parâmetros. Para utilizar o respond.js você precisa (além de obviamente instalar o plugin) colocar o comentário condicional /*/mediaquery*/ ao final de todas as media queries que você utilizar no seu CSS. Por exemplo:

1
2
3
@media screen and (max-width: 768px) {
  ...
}/*/mediaquery*/

css3-mediaqueries-js

Outra solução baseada em javascript. O css3-mediaqueries-js  é mais pesado do que o respond, mas em compensação aceita mais funções e promete fazer IE 5+, Firefox 1+ e o Safari 2 aceitarem todas os features do Media Queries. Você pode conferir mais algumas dicas sobre como degradar suavemente Media Queries neste post da Smashing Magazine.

fonte: blog.popupdesign.com.br

calendário 2013 - planejamento e datas comemorativas

Programe-se para o ano de 2013 e todos os outros anos

Um dos aspectos a ser analisado no pequeno varejo é entender a sazonalidade de seu negócio, ou seja, em que momento aumenta a demanda e de que forma atender seu cliente ofertando o produto adequado.

Uma das referências é entender o calendário promocional do mercado e seus principais eventos:

  • Janeiro – Liquidações e Volta as Aulas
  • Fevereiro – Normalmente o carnaval
  • Março – Entrada de novas coleções e dia da mulher
  • Abril – Páscoa
  • Maio – Dia das Mães
  • Junho – Dia dos Namorados e Festas Juninas
  • Julho – Férias e Liquidações
  • Agosto – Dia dos Pais
  • Setembro – Entrada de novas coleções
  • Outubro – Dia das crianças
  • Novembro – Ações de e-commerce (black-Friday, cyber-Monday) prévia do Natal
  • Dezembro – Natal

Além destes momentos existem diversas datas regionais, locais e também algumas específicas por segmentos, setores, profissões etc. Um dos fatores que também influenciam são os eventos que podem ter dimensões locais ou até internacionais como a Copa do Mundo ou as Olimpíadas.

Pense que todos estes momentos podem influenciar positiva ou negativamente os resultados da empresa. Portanto pensar o negócio de tal forma a atingir o equilíbrio e reduzir os efeitos sazonais, assim garantindo que não aumentem os custos e com redução de ganhos.

Três dicas para equilibrar seu negócio:

  1. Crie ações pontuais nas datas de baixa de seu negócio.
  2. Fidelize seus clientes
  3. Não faça só porque os outros estão fazendo. Tenha coerência com seu cliente.

Fonte: saiadolugar.com.br

Open source projects

Por que contribuir com projetos open-source?

O que é um projeto open source?

Projetos de Open Source são aqueles com a finalidade de criar e manter softwares que incluem o código fonte para seus usuários. Dependendo da licença usada, ao baixar e instalar um desses softwares, o usuário ganha o direito de usá-lo para qualquer fim, modificá-lo e redistribui-lo.

Ter o código fonte aberto significa que as pessoas podem estudá-lo e muitas vezes incrementá-lo com algo que o software poderia ou deveria fazer. Com isso, muitos usuários acabam incrementando o software com funcionalidades extras ou até aplicando consertos de bugs que possam ocorrer.

Stallman talk - Open source

Por que devo contribuir?

Essa é uma pergunta fácil de responder. É muito simples, quando você interage com outros desenvolvedores e trabalha no mesmo problema que eles, você aprende muito e ajuda o projeto a evoluir. A interação com outros desenvolvedores abre inúmeras portas para você trabalhar em projetos paralelos, trocar de emprego e criar amizades.

Diversos softwares que hoje todos nós utilizamos surgiram de projetos open source. Confira a lista abaixo:

  • Apache
  • Eclipse
  • Mozilla Firefox
  • Gimp
  • InkScape
  • Audacity
  • Filezilla
  • 7-zip
  • e outros

 

Mas eu não tenho tempo para fazer contribuições!

Lembre-se: O dia tem 24h para todos!  Se uma pessoa tem tempo para contribuir, você também terá… basta querer!

Li em um blog uma observação bem interessante quanto ao processo de contratação de programadores e designers. A maioria dos designers nem utilizam currículo como fonte de informações para o empregador. O que realmente importa é seu portfólio com trabalhos realizados e características. Já alguns programadores ainda fazer parte do processo antigo em que o currículo era a maior fonte de informações sobre o candidato a uma vaga. Hoje o perfil no Github ou outro hosting é um fator extremamente relevante para a contratação de um colaborador.

Como faço para contribuir?

É muito simples… recomendo utilizar o Github para pesquisar projetos que sejam do seu interesse aí basta você dar um Fork (isso mesmo, garfar) o código do commiter, fazer suas alterações e depois dar um pull request para que as alterações sejam implementadas.

Um projeto open source é basicamente o treinamento que você precisa para aprimorar suas técnicas, já que na maioria das empresas não há o espaço para treinamento em equipe (Dojos).

E aí, já fez sua contribuição hoje?

Tutorial do Git e Github - http://codexico.com.br/blog/linux/tutorial-simples-como-usar-o-git-e-o-github/

CodePlex - http://www.codeplex.com/

Google Code Hosting - http://code.google.com/hosting/

Heroku – http://www.heroku.com