Conectar domínio registro.br à hospedagem Hostinger e Dreamhost

Para que seu site www.seunome.com.br funcione, é necessário a contratação de um domínio (endereço) + hospedagem (onde ficam os arquivos) e realizar uma conexão entre ambos. Essa conexão é feita através de um endereço chamado DNS fornecido pela hospedagem, que precisamos inserir no painel de configuração do seu domínio. A partir daí, o acesso a seunome.com.br buscará os arquivos do site na hospedagem correta.

Para fazer esse procedimento, costumo dar 3 opções ao cliente, que envio na ordem de minha recomendação:
  • A) Cliente configurar o domínio para dar o acesso Técnico à conta no registro.br do prestador de serviço. Assim o prestador pode configurar sempre que necessário (geralmente só é necessário uma vez) apenas as informações técnicas do domínio;
  • B) O cliente fazer a conexão seguindo as instruções;
  • C) Cliente informar os dados de acesso (usuário e senha) ao painel registro.br (recomendo que ele altere a senha depois que terminar a configuração, para garantir entre ambos que posteriores problemas de conexão não teve relação com o prestador de serviço).
Segue o detalhamento de cada opção:
Opção A:

Cliente configurar o domínio para dar o acesso Técnico ao prestador de serviço

  1. Acesse https://registro.br e , do lado direito superior, clique em ACESSAR CONTA
  2. Insira seu usuário e senha de acesso
  3. Na nova página que irá abrir na aba “Domínios”, após a autenticação, clique no seu domínio seunome.com.br
  4. Na nova página, você estará vendo os detalhes do seu domínio. Ao final dela, em DNS, clique no link direito inferior ALTERAR SERVIDORES DNS.
  5. Insira os seguintes dados respectivamente em master, slave 1 e slave 2.
    No hostinger o endereço é conforme mostra imagem mais abaixo:
6. Clique em SALVAR DADOS.
Opção B

Prestador de serviço faz a conexão seguindo instruções

  1. Acesse https://registro.br e , do lado direito superior, clique em ACESSAR CONTA
  2. Insira seu usuário e senha de acesso
  3. Na nova página que irá abrir na aba “Domínios”, após a autenticação, clique em seunome.com.br
  4. Na nova página, você verá os detalhes do seu domínio. No meio, na Área CONTATOS, do lado direito clique em » ALTERAR CONTATOS.
  5. Em Técnico, preenchacom o ID do prestador de serviço
6. Clique em SALVAR.

RunRunIt: Lembre de pausar tarefas com extensão do Chrome

É comum o esquecimento de dar pause nas tarefas do RunRunIt, deixando as horas da tarefa extrapolando o tempo real gasto nelas.

Isso é ruim para você, pois indica que demorou mais em uma atividade do que deveria, ou porque é necessário reduzir manualmente as horas depois. Isso pode ser um tanto trabalhoso.

Veja como instalar a extensão do Google Chrome do RunRunIt (oficial) que ajuda a periodicamente lembrar você sobre estar trabalhando em uma tarefa, e a pausar automaticamente no desligamento do seu computador!

Passo a passo para usar a extensão do RunRunIt

Dividido em:

  • A) Como instalar a extensão do RunRunIt
  • B) Como configurar a extensão do RunRunIt
  • C) Como usar a extensão do RunRunit

A) Como instalar a extensão do RunRunIt

  1. Acesse a extensão oficial do RunRunIt do navegador Google Chrome clicando aqui
  2. Clique em “+ Usar no Chrome” e confirme clicando em “Adicionar extensão”:

    A extensão será instalada.

B) Como configurar a extensão do RunRunIt

  1. Então, clique no ícone do RunRun.It que aparecerá no canto superior direito, e no botão “Settings Access”
  2. Você precisará preencher os alguns dados para iniciar o funcionamento:“App Key” solicitado é único em toda a empresa (veja como consegui-lo clicando aqui). Apenas os administradores tem acesso. Ele fica localizado no canto superior direito da página do usuário.
  3. “User Token” você precisa coletar na sua conta do RunRun.it
    Entre em seu perfil (passos 1 e 2 abaixo) e, no canto direito inferior, colete a informação que está em “Token do usuário” (passo 3):
  4. O botão “Reminder’s interval” determina qual intervalo de tempo você gostaria de ser notificado pelo navegador sobre estar ainda trabalhando na mesma tarefa.Por padrão, ele está em 30min. Ele notifica de x em x minutos enquanto você estiver com o play de uma tarefa ativo.
  5. O botão “Auto Pause/Resume” vem desligado por padrão. Ligue-o caso queira que a tarefa pause automaticamente caso você desligue seu computador.Importante que a própria extensão notifica que ela não funciona devidamente em alguns computadores. A sugestão deles é que você faça um teste dando play em uma tarefa, bloqueando o seu computador e retornando após aluns minutos para checar se o tempo contado na tarefa está correto!
  6. Clique em “Save”.  Agora, ao clicar no botão superior direito do RunRun.it no topo do navegador, aparecerão a suas tarefas.

C) Como usar a extensão do RunRunit

  1. Clique no ícone do play na tarefa que gostaria de iniciar:

    Aparecerá uma notificação no canto inferior direito informando que você está trabalhando na tarefa.
  2. Para pausá-la, clique em pause.

  3. Para entregá-la, clique no check “Complete”.

  4. Para ver as últimas 10 tarefas entregues, clique na aba “Complete”.

Prontinho! :)

Do lado de cá, deu tudo certo.

Qualquer dúvida, comenta!

Como cancelar um e-mail enviado no Gmail

É possível, sim, desfazer o envio de uma mensagem! Veja como cancelar um e-mail no Gmail como na imagem abaixo:

Contudo, o tempo é limitado para desfazer o envio de um e-mail e é necessário habilitar essa funcionalidade antes.

A ativação é simples. Veja abaixo o passo a passo com printscreens!

Como ativar o “desfazer” nos e-mails enviados no Gmail

  1. Clique na engrenagem localizada no canto direito superior da tela do Gmail;
  2. Clique em “Configurações”;
  3. Na seção “Cancelar envio”, selecione “Ativar o cancelamento do envio”.
  4. Escolha o tempo que você gostaria de ter o botão “Desfazer” visível na tela após clicar em “Enviar”;
  5. Desça até o final da página e clique em “Salvar alterações”.

Pronto!

Como cancelar um e-mail

Teste enviar um e-mail para si mesmo e veja o botão mágico “Cancelar” durante o envio do seu e-mail, e “Desfazer” após ele ocorrer — visível pelo tempo que você determinou. :)

Com o envio do seu e-mail desfeito, você pode visualizar a sua mensagem em rascunho e editá-la! (:

Ufa!

Como fazer landing pages lindas e que convertem

 Neil Pateil diz que consegue mais de 40% de conversão em uma landing page (de captação de e-mails) seguindo essas 5 orientações:

1. Use ferramentas de geração de landing pages consagradas

Elas usam dados de inúmeros clientes para identificar as páginas que melhor performam. Ex:

2. Tenha uma proposta de valor incrível

Ex: Dar cursos grátis em troca do e-mail.

3. Seja extremamente simples e claro

Ex: evite campos de formulários desnecessários e repetições de conteúdo. Seja objetivo.

4. Tenha provas sociais.

Depoimentos reais de pessoas, com suas fotos e vídeos, sobre a qualidade do produto/serviço ofertado pela landing page.

5. Crie um vídeo.

Não é todo mundo que gosta de ler. Ideal 1 min, máximo 3, curto e objetivo. Em uma ordem clara respondendo por que a pessoa deve “converter”.

Vídeo original abaixo:

O uso correto do atributo HTML alt nas imagens

Muitas vezes quem trabalha com SEO (Search Engine Optimization) sabe que o atributo HTML alt é importante na tag “img”, de imagem. Além disso, ela também é importante para melhorar a usabilidade de um web site. Sabia que usá-lo de forma desordenada ou excessiva é prejudicial em se tratando da acessibilidade do site a cegos?

Para que serve o HTML ALT

ALT vem de “alternate” do inglês. Ou seja, é uma alternativa ao conteúdo que está sendo exibido na imagem.

Ele serve para:

  1. Descrever em texto uma orientação sobre a imagem que não está sendo exibida;
  2. Sistemas de busca entenderem do que ela se trata e isso auxiliar a indexar a página;
  3. Leitores de tela em áudio especificarem do que ela se trata (isso inclui ferramentas que cegos usam para navegar na web — Caso queira saber mais sobre leitores de tela de computador, recomendo que veja este artigo “6 leitores de tela para seu computador”.)

Exemplo

Fiz uma assinatura de e-mail responsiva para um cliente, usando imagens + texto. Veja ela com as imagens aparecendo normalmente:

Agora, veja como ela aparece quando as imagens não são carregadas, por um problema no servidor, bloqueio de imagem, falta de conexão à internet etc:

Para que a informação do nome não fosse perdida na assinatura do e-mail, inseri o texto “Dr. Paulo Cezar Maldonado” no alt da imagem que exibe o nome dele. Assim, o nome dele como texto alternativo, é exibido na ausência da imagem e também pode ser interpretado por programas leitores de tela.

Embora o tamanho de algumas imagens seja pequena e não dê para ler o alt delas, programas leitores de tela em voz configurados para isso, leriam “Dr. Paulo Cezar Maldonado” com ou sem um problema de exibição da imagem .

Também, em um site, o Google indexaria a página para aparecer em buscas por “Dr. Paulo Cezar Maldonado”, o que auxiliaria no SEO.

Note que propositalmente não coloquei um alt no símbolo da marca à esquerda.
Por quê? Ele é desnecessário.

Você acharia relevante ouvir uma descrição dizendo “marca” ou mesmo indexar essa palavra em uma página na web?

Isso nos leva ao próximo tópico.

Como usar corretamente o ALT em imagens

Todas as imagens devem ter um atributo alt declarado. Isso é indicado semanticamente pelo HTML e para melhorar a usabilidade dos usuários dos leitores digitais em áudio. Mas IMPORTANTE: Declarar um atributo é diferente de preenchê-lo.

Exemplos de um HTML de imagem:

Exemplo 1 (Certo!): Com alt declarado e preenchido de vazio

<img src=”marca-nome-dr-paulo-cezar-maldonado.gif” alt=” “ />

Exemplo 2 (Certo!): Com alt declarado e preenchido

<img src=”marca-nome-dr-paulo-cezar-maldonado.gif” alt=”Dr. Paulo Cezar Maldonado” />

Exemplo 3 (ERRADO):  Com alt declarado, mas nulo

<img src=”marca-nome-dr-paulo-cezar-maldonado.gif” alt=”” />

Exemplo 4 (ERRADO): Sem alt declarado

<img src=”marca-nome-dr-paulo-cezar-maldonado.gif” />

Entenda por que declarar o alt preenchido de vazio

Leia esse trecho de uma palestra (2) sobre acessibilidade para cegos nas páginas web:

O atributo de imagem “ALT” tem de ser utilizado com bom senso e a partir da seguinte idéia: tudo que for escrito nele será ouvido a toda hora que o leitor de tela passar por ele. Dessa forma, imagens que não tenham função, que só sirvam de decoração na tela, como imagens de linhas horizontais, bolinhas e quadradinhos decorativos e coloridos, enquadramentos, deverão vir com o “ALT vazio”, ou seja, com um espaço entre as aspas. Isso é diferente do “ALT nulo”, que é um alt com “”, ou seja, sem espaço entre as aspas. Como o nome já diz, o “alt nulo” é como se não existisse alt e o “alt vazio” é um alt com conteúdo, porém vazio.

Essa pequena diferença altera a leitura que o leitor de tela faz. Com o “alt vazio ele não lê absolutamente nada, enquanto com ele nulo alguns leitores procuram ler o conteúdo do atributo src, ou seja, tentam ler o nome da imagem.

Fonte: Como Fazer Acessibilidade nas páginas da WEB., Marco Antonio de Queiroz – MAQ, 29/08/2002 http://www.bengalalegal.com/acesso

Quando preencher o atributo HTML alt de texto

Se todos os itens abaixo forem verdadeiros no seu caso, preencha o atributo alt da imagem com uma descrição curta e clara do que ela representa:

  1. Não é um ornamento meramente estético
  2. A ausência da imagem faz o conteúdo ficar menos compreensível e completo
  3. A imagem contém um texto que está unicamente nela (neste caso, o ideal é você transcrever resumidamente o texto pra dentro do alt)

Caso não sejam os casos acima, lembre de sempre declarar o atributo HTML alt preenchido com um espaço vazio, assim:

alt=” “

Dica: Destaque todas as imagens sem o HTML alt!

Ricardo Sanches publicou um vídeo com código para automaticamente colocar bordas vermelhas nas imagens sem alt e você lembrar de declará-las no HTML! Veja:

Referências

  1. “HTML <img> alt Attribute” (em inglês) https://www.w3schools.com/tags/att_img_alt.asp
  2. “Como Fazer Acessibilidade nas páginas da WEB” http://www.bengalalegal.com/acesso
  3. “Você nunca mais vai esquecer do ALT” https://www.portalgsti.com.br/2018/01/voce-nunca-mais-vai-esquecer-do-alt.html

Como Aparecer nos Mapas do Google

Quando fazemos uma busca no Google, muitas vezes encontramos empresas cadastradas já com o local indicado nos Mapas do Google. Aqui você encontrará um passo a passo para cadastrar empresa e aparecer nos Mapas do Google / Google Maps, ou você pode solicitar um orçamento para que eu faça isso para você (clique aqui!).

Pesquisando por “clínica homeopática em Salvador” no Google, ele oferece resultados já em um mapa.

Qualquer pessoa que pode receber cartas ou ligações no número do estabelecimento, pode cadastrar empresa no Google Maps/Mapas do Google. Para isso, basta a adicionar através da interface Google Meu Negócio (no inglês, Google My Business).

Por que cadastrar uma empresa nos Mapas do Google Maps?

Como você pôde ver na imagem anterior, pesquisando por “clínica homeopática em Salvador”, o Google automaticamente mostrou um mapa em seus resultados com algumas sugestões de empresas. Ele normalmente faz isso quando você pesquisa por um produto ou serviço e determina “em x cidade” ou mesmo “em bairro y“.

Caso o seu negócio possua um endereço físico de atendimento, não tem por que você não cadastrar sua empresa no Google Maps. Fazer esse cadastro:

  •  Facilita a sua empresa a ser encontrada ao buscarem por um serviço. O usuário busca por “Clinica homeopática em Salvador” e logo no topo dos resultados de busca já pode ver no mapa a sua empresa.
  • Destaca a empresa entre a concorrência. Quem não estiver no Google Maps, deve aparecer mais embaixo na página, perdendo destaque.
  • Pode gerar mais visitas ao seu site. Pode porque, se a pessoa estiver apenas buscando seu endereço, telefone ou horário de funcionamento, ela possivelmente nem entrará no seu site, pois verá essas informações no Google. Neste caso ela provavelmente já conhece a sua empresa e queria uma informação rápida. Ao mesmo tempo, se a pessoa estiver buscando um serviço e descobrir o nome da sua empresa apontada no Google Maps, isso deve gerar um maior tráfego de novos usuários ao site, pois provavelmente visitarão o site para saber mais sobre a empresa antes de contatá-la.
  • Pode diminuir as ligações pedindo informações básicas para a sua empresa. Veja, isso pode ser bom. A pessoa que atende aos telefonemas terá menos ligações de pessoas perguntando o horário de funcionamento, se tem estacionamento, referência de como chegar. Outra forma de ler isso:
  • Ajudará a otimizar seus custos e o acesso do cliente à sua empresa. Você está facilitando e agilizando a informação para quem busca por você ou pelo o que você vende, e pode reduzir seus custos internos ao diminuir a necessidade de mais atendentes respondendo chamadas ao telefone, por exemplo.

Como cadastrar empresa para aparecer nos Mapas do Google

O procedimento é relativamente simples.
Vamos em dividir em etapas principais para você cadastrar uma empresa no Google Maps:

  1. Adicionar uma empresa ao Google Meu Negócio
  2. Adicionar informações da sua empresa no Google Meu Negócio

Você também pode economizar um tempo e solicitar um orçamento para que eu faça por você!

1) Adicionar uma empresa ao Google Meu Negócio

    1. Acesse o Google Meu Negócio em https://www.google.com.br/intl/pt-BR/business/
    2. No canto direito superior da tela, clique no botão verde “Comece agora”. Caso seja solicitado, faça login em sua conta Google (pode ser o seu e-mail do Gmail) ou crie uma;
    3. Comece a preencher os dados conforme solicitado (nome do negócio, endereço completo e os dados de contato). Todos os campos estão retratados na imagem abaixo:
      Dicas
      • Insira o nome do seu negócio de forma descritiva. O nome é “Andrea Padre”, mas é um “Consultório Odontológico e Homeopático”. Logo, você facilitará o usuário que pesquisar por um serviço ou outro a te encontrar, se você escrever: “Andrea Padre — Consultório Odontológico e Homeopático”
      • Insira em “Categoria” a sua principal, que melhor representa a sua empresa. Depois você pode adicionar subcategorias mais afuniladas.
    4. Marque a caixa “Estou autorizado a gerenciar esta empresa e aceito os Termos de Serviço” e clique em “Continuar”:
    5. O Google Meu Negócio precisará confirmar que você inseriu os dados corretos, então te enviará um código PIN de verificação. Você pode escolher  um dos 3 meios para recebê-lo:
      • Telefone: Ele te liga no telefone cadastrado e informa o código;
      • SMS: Ele envia um torpedo com o PIN como mensagem de texto (essa opção aparece apenas se você inseriu um número de celular como telefone da empresa)
      • Por Correio: Ele envia carta ao endereço cadastrado, que chegará em cerca de 12 dias.

      Clicando em “Confirmar mais tarde” ou não prosseguir na verificação, impossibilitará a sua empresa de aparecer no Google Maps.

    6. Insira o PIN informado pelo meio desejado de acordo com as orientações do meio que escolheu.

O Google pede 3 dias para ativar o seu negócio em sua interface Mapas do Google.

2) Adicionar informações da sua empresa no Google Meu Negócio

Clique em “Editar” para detalhar mais a sua empresa.

Com o seu negócio confirmado (ou em verificação ainda), você pode (e deve!) enriquecer o perfil da sua empresa no painel. As informações mais importantes a preencher agora e os motivos:

  1. Subcategorias. Elas são importantes para deixar mais claro e mostrar facilmente outros serviços que você presta, ou especificá-los mais. Ampliará a possibilidade de você ser encontrado se pesquisarem por “Dentista” ao invés de “Clínica odontológica”, por exemplo.

    Clique no lápis ao lado da categoria principal para adicionar subcategorias, ou mudar uma delas.

  2. Horários de funcionamento. Isso pode ajudar a menos pessoas te ligarem para perguntar ou se frustarem indo quando está fechado. Afinal, já estará visível facilmente na interface dos resultados de busca quando você estará aberto.
  3. Números de telefone. Tem mais de um? Facilite, adicione. E mantenha essa informação sempre atualizada, pois quem estiver a caminho de sua empresa e não salvou seu telefone, deve precisar dessa informação com agilidade.
  4. Fotos.
    1. Da fachada (para quem está tentando achar a empresa, é muito útil para se localizar mais facilmente. Dica: Pegue um print screen do Google Street View).
    2. Da sua equipe, para dar maior credibilidade à empresa e gerar empatia.
  5. Atributos. Insira as opções de acessibilidade cabíveis e as outras informações pré-estabelecidas pelo Google. Já viu o Google em algum momento dando sugestão de lugares, dizendo que ele possui banheiro, é acessível a cadeirantes etc? Essa informação pode vir daqui (ou da comunidade de usuários).

Como você pode ver, o procedimento não é complicado. Só é necessário ter cuidado na hora de preencher as informações, para tentar fazer da melhor forma para que a sua empresa tenha uma boa imagem e seja mais facilmente encontrada por quem buscar diretamente por ela, ou pelos seus serviços.

Conte com uma profissional para fazer tudo certinho

Quer que fique tudo pronto e resolvido da melhor forma possível? Conte com uma profissional para fazer o cadastro da sua empresa no Google.

Preencha seus dados abaixo para receber um orçamento por e-mail em poucos minutos.

* indica campos obrigatórios

Como trocar o WordPress de diretório na mesma hospedagem

Para fazer um site WordPress enquanto uma outra versão está online, uma das formas possíveis, e até que particularmente indico caso confie no cliente ou o projeto já esteja pago, é colocando o site já na hospedagem final dele. Por que? Ora, para começar existem diversas configurações possíveis de cada servidor, e muitas vezes você pode ter um formulário de contato quebrado no momento da troca, criando a necessidade de refazê-lo.

Vamos então supor que você tem um site no ar em http://novembroverde.com.br (option_name home no banco de dados) e está desenvolvendo um novo em http://novembroverde.com.br/wp (option_name siteurl no banco de dados)

O site novo está todo pronto e chegou a hora de migrar a versão do http://novembroverde.com.br/wp para http://novembroverde.com.br.

Passo a passo para migrar da pasta “/wordpress” para a pasta raiz “/”

É parecido com a segunda parte do tutorial “WordPress em Diretório Próprio” oficial do Codex WordPress.

Importante (o próprio Codex do WP alerta): Se não conseguir acessar seu site, será necessário acessar o painel do serviço de hospedagem e então o aplicativo phpMyAdmin para reverter os dados de acesso.

  1. Faça login no WordPress e vá em “Configurações” -> “Geral”. Ex: http://novembroverde.com.br/wp/wp-admin/options-general.php
  2. No campo “Endereço do site (URL)” troque o endereço novembroverde.com.br/wp para o novembroverde.com.br
  3. Clique em “Salvar” no final da página. Importante que neste momento pode dar erro 404. E tudo bem.
  4. No FTP, baixe os arquivos do diretório WordPress index.php e .htaccess (/public_html/wp, em nosso exemplo) para a sua máquina
  5. Edite o arquivo “index.php” mudando a linha que diz:

    require(dirname(__FILE__). ‘/wp-blog-header.php’);

    Inclua o nome da pasta onde estão os arquivos core do seu WordPress, exemplo:

    require(dirname(__FILE__).’/wordpress/wp-blog-header.php’);

  6. Salve o novo index.php
  7. Suba os arquivos index.php e .htaccess para a pasta raiz do seu site, ex, o “public_html”. Se você não visualiza o arquivo .htaccess , configure para o seu cliente FTP exibir arquivos ocultos. Se você não estiver usando Links Permanentes Legíveis, provavelmente não terá o arquivo .htaccess. Se o WordPress estiver em um servidor Windows (IIS) e usando Links Permanentes, você deverá ter um arquivo web.config em vez de um arquivo .htaccess em sua pasta core do WordPress.
  8. Logue no seu site (se você não estiver logado). A URL que deve ser usada é http://novembroverde.com.br/wp/wp-admin/options-general.php (incluindo o nome da pasta onde estão os arquivos WordPress)
  9. Se estiver usando Links Permanentes, vá em “Configurações” -> Links Permanentes” (ex: http://novembroverde.com.br/wp/wp-admin/options-permalink.php) e clicar em “Salvar” para o WordPress atualizar e deixar correto o seu arquivo .htaccess com as novas regras de reescrita de URL. Se não for possível, ele exibirá as regras que você deverá copiar manualmente para o seu arquivo .htaccess (na pasta do arquivo index.php principal).

Idealmente faça esse procedimento nas horas com menos visitas em seu site, pois nos primeiros passos o site pode apresentar falhas aos usuários. Normalmente o horário de 3 da manhã é o mais ocioso no Brasil.

Se quiser aprender a fazer temas WordPress do zero, muito mais leves do que esses que encontramos (o que é ótimo para SEO), clique aqui.

Como receber e-mails do Hostinger pelo Gmail

Você pode receber mensagens da conta de e-mail da hospedagem Hostinger em outras ferramentas ou mesmo contas de e-mail de outros serviços. O Hostinger oferece por padrão o webmail Roundcube, que não possui interface e opções muito avançadas.

Para receber cupom de 1 ano com 20% de desconto do Google G Suite, que fornece e-mail com domínio personalizado, clique aqui!

Quem gosta do Gmail e quer aproveitar sua interface para receber e-mails do Hostinger sem custos adicionais, pode criar uma conta gratuita no Gmail e fazer as configurações abaixo. Com isso, será possível você manter uma cópia das mensagens em ambos os servidores, evitando o trauma de migração e perda de mensagens no caso da necessidade de troca de serviço de hospedagem.

Passo a passo para passar a receber seus e-mails da conta do Hostinger também no seu Gmail!

As informações de servidores e portas informadas servem também para você configurar em um aplicativo de e-mail do seu celular Android, iOS ou Windows Phone, ou mesmo em um programa como o Outlook ou Mozilla Thunderbird por exemplo.

1. Do lado direito superior da interface do Gmail, clique na engrenagem;
2. Em seguida, clique em “Configurações”

3. Clique na aba “Contas e importação”
4. Então, em “Adicionar uma conta de e-mail” na seção “Verificar o e-mail de outras contas”.

5. Insira o endereço de e-mail completo que deseja receber. Ex: luisaambors@meudominio.com

6. Clique em “Próxima”

7. Deixe selecionado “Importar os e-mails da minha outra conta (POP3)

8. Clique em “Próxima”

9. Em “Nome de usuário”, preencha seu e-mail completo. Ex: luisaambros@meudominio.com

10. Insira sua senha

11. Insira o servidor POP da hostinger: mx1.hostinger.com.br

12. Selecione a porta 995 (você precisará marcar “Use sempre uma conexão segura (SSL) ao recuperar e-mails” no passo 14). Se por algum motivo não puder exigir conexão segura, marque a porta 110 e não selecione a caixa do passo 14)

13. Recomendo marcar. Serve para você manter uma cópia na conta do Hostinger, além do e-mail que você receberá no Gmail, marque esta caixa. Importante para caso você precise acessar as mensagens pelo Webmail do Hostinger, e para ter um backup.

14. Recomendado marcar para criptografar os dados que transitam pelo servidor.

15. Opcionalmente (e eu particularmente super recomendo) você pode adicionar um marcador (tag/etiqueta) para que todas as mensagens que vierem da sua conta hostinger, recebam uma marcação junto aos títulos das mensagens. Isso possibilita que você também filtre-as das demais. Especialmente importante caso você use uma conta para diversos fins.

16. Se você quer que as mensagens do e-mail hostinger não apareçam na sua caixa de entrada, marque esta opção. Assim, fica mais difícil ver as mensagens novas. É útil se for uma conta não muito importante e você queira apenas acessá-la, sem ser notificado de novas mensagens ou perder atenção com elas.

17. Clique em “Adicionar conta”!

18. Neste passo, a conta já foi adicionada com sucesso. Opcionalmente, você pode dizer “Siim” caso deseje possibilitar enviar e-mails do seu Gmail com o remetente sendo o seu endereço de e-mail do hostinger. Ex: enviar como luisaambros@meudominio.com do meu e-mail @gmail.com. Para saber como prosseguir com esses passos, veja este post: “Como enviar e-mail hospedado no Hostinger pelo Gmail“.

19. Caso não queira enviar e-mails como luisaambros@meudominio.com , marque “Não”

20. Clique em “Próxima”!

21. Pronto! Você receberá os e-mails do seu dominínio em sua caixa do Gmail :D

Caso tenha dificuldades ou queira compartilhar alguma informação adicional, comente abaixo!

Para receber cupom de 1 ano com 20% de desconto do Google G Suite, que fornece e-mail com domínio personalizado, clique aqui!

Como enviar e-mail hospedado no Hostinger pelo Gmail

O Hostinger é uma hospedagem que fornece contas de e-mail com acesso SMTP, o que possibilita você enviar e-mails de outras ferramentas e até mesmo de outras contas de e-mail. Como o hostinger oferece gratuitamente o webmail com a interface Roundcube, que não é muito avançada, uma forma de melhorar a experiência com sua caixa de e-mails dessa hospedagem, é configurar para você fazer isso através de uma conta sua no Gmail.

Veja abaixo o passo a passo para configurar o seu Gmail para enviar mensagens do seu e-mail com domínio próprio e conta hospedada no Hostinger:

1. Do lado direito superior, clique na engrenagem
2. Clique em “Configurações”

3. Vá na aba “Contas e importação”
4. Clique em “Adicionar outro endereço de e-mail” na seção “Enviar e-mail como”.

5. Na nova janela, defina o nome que você quer usar. Ele será o seu nome de remetente quando enviar um e-mail
6. Em Endereço de e-mail, preenche o e-mail do qual você quer enviar mensagens pelo gmail
7. Desmarque “Tratar como um alias”. Isso deve ser marcado se você não se conectar diretamente com os servidores de e-mail do domínio do seu e-mail
8. Clique em “Próxima etapa”

9. Insira o servidor SMTP: mx1.hostinger.com.br

10. Insira a porta 465

11. Insira seu usuário (ex: nomeescolhido@seudominio.com.br)

12. Insira sua senha

13. Mantenha a opção “Conexão Segura usando SSL (recomendado)”

14. Clique em “Adicionar conta”

15. Você verá a tela abaixo, pedindo para confirmar que o e-mail é seu:

16. Veja na caixa de entrada a mensagem do Google com as orientações. Você pode pegar o código e inserir na janela do passo 15…

17. …ou clicar no link do e-mail:

18. Se escolheu inserir o código na janela, volte nela preencha o código

19. E clique em “Confirmar”.

Se você quer inserir o código, mas fechou a janela, para visualizá-lo novamente repita os passos 1, 2 e 3 e clique em “Confirmar” ao lado do e-mail respectivo.

Prontinho!

Gerador de favicon e ícones para aplicativos com plugin WordPress grátis

Antigamente, o favicon consistia apenas em um ícone para representar seu um site mais visualmente em uma lista de favoritos do seu navegador. Ao passar do tempo, ele passou a ser exibido também junto aos títulos das janelas dos navegadores, e então, das abas que surgiram depois.

Atualmente, além dessas opções que tinham códigos variados para diferentes navegadores, agora há ainda smartphones e diferentes sistemas operacionais, como iOS, Android, Windows Phone e Chrome. Em todos esses locais, além do computador, você pode adicionar um atalho à sua tela inicial com uma imagem personalizada para representar um site. E, cada plataforma, tem suas peculiaridades, o que pode ser trabalhoso na hora de personalizar perfeitamente uma marca para cada caso…

Felizmente existe o Plugin WordPress grátis realfavicongenerator, um gerador de favicons e ícones para seu site. Basta você ativá-lo em seu WordPress e subir a imagem da sua marca. Em seguida, você pode personalizar as configurações de cada local para deixar a marca o máximo legível onde ela for exibida. Você pode inclusive alterar a cor do fundo da marca, onde isso é permitido.

Faça download aqui do plugin WordPress grátis que gera favicons e icones

Demonstração de ícones e favicons criados pelo plugin, para diferentes plataformas.

Importante:

  • Você precisa manter o plugin ativo. Se você desativá-lo, o favicon deixará de funcionar. Isso porque o código para mostrar o ícone nas diferentes interfaces é mostrado de acordo com a demanda de visualização de página. A página do plugin explica que isso é feito porque é contra as boas práticas adicionar o código diretamente no header.php do tema. Além disso, as atualizações de tema poderiam provocar problemas no funcionamento. Mas o autor garante: o plugin foi feito com as melhores práticas e não irá comprometer a performance do seu web site WordPress.
  • Você só pode checar se a exibição dos ícones/favicons estão corretas se o site está acessível publicamente. Caso seu site esteja com “Ocultar site dos mecanismos de busca” provavelmente não funcionará. O teste do funcionamento pode ser feito acessando o seguinte endereço do verificador de favicon do RealFaviconGenerator e mudando “SUA_URL” em vermelho pelo endereço de seu site: https://realfavicongenerator.net/favicon_checker?site=http%3A%2F%2FSUA_URL&ignore_root_issues=on

Leia mais detalhes sobre o plugin:

  • Por que o plugin de WordPress Favicon by RealFaviconGenerator precisa ficar ativo o tempo todo? (em inglês) https://realfavicongenerator.net/blog/why-does-the-favicon-by-realfavicongenerator-wordpress-plugin-need-to-be-activated-all-the-time/
  • O Plugin de WordPress RFG e performance (em inglês)
    https://realfavicongenerator.net/blog/rfgs-wordpress-plugin-and-performance/

SEO: Conteúdo Duplicado SEM Punição!

Caso você entenda de SEO (Search Engine Optimization, ou otimização para mecanismos de busca), provavelmente se preocupa com conteúdo duplicado ou em fazer alguma outra coisa que possa impactar negativamente no posicionamento do seu site.

Você possui um site, ou gere o de um cliente, precisa fazer uma publicação que replica materiais inteiros ou trechos já existentes pela internet e sabe como fazer isso corretamente?

Um dos itens mais críticos e punidos pelo Google na hora de realizar o posicionamento dos seus resultados, é a publicação de um conteúdo duplicado. Isso para que sites que vivem de automatizações publicar conteúdos copiados, não venham a concorrer com os verdadeiros produtores de conteúdo da internet.

Contudo, na área acadêmica e em publicações de artigos embasados em otros, muitas vezes precisamos recorrer a diferentes autores e citar as suas publicações. Em alguns casos, como em blogs de médicos, por exemplo, há mesmo a intenção de copiar um artigo na íntegra, com o objetivo de ajudar a divulgar aquele conteúdo pro seu próprio público.

Para fazer isso corretamente, segue orientações práticas de como citar trechos e copiar textos sem ser equivocadamente punido no SEO e manter o bom posicionamento do seu site.

Como fazer uma citação de conteúdo sem danificar seu SEO

  • Sempre escreva a URL do local que possui o texto original. Ao fazer isso, você ajuda ao Google entender que você está dando os devidos créditos — logo, dificilmente está mal intencionado ou sendo antiético.
  • Adicione um conteúdo original. Além de citar o conteúdo existente, tenha uma parte de texto original na página. Escreva uma introdução e conclusão próprias, que ajudarão a seu site ter maior relevância.
  • Parafraseie ao invés de copiar. Você pode reescrever o que o outro autor disse com as suas próprias palavras, e citar que determinado autor ou artigo possui as mesmas conclusões.
  • Copie o mínimo possível. Em linhas gerais, quanto menos você copiar, melhor.
  • Use as tags HTML corretas que indicam a citação. Às vezes visualmente não há mudanças, mas o Google lê e entende esses códigos. Exemplo:
    <blockquote>
    <p>Texto que você está citando</p>
    </blockquote>
    <cite>Trabalho que você está citando</cite>, Nome do autor, data.
    Mais detalhes de como usar tags HTML para a citação de textos: http://html5doctor.com/blockquote-q-cite/
  • Referencie o site de origem com a tag “canonical” no HTML. Ela indica, no cabeçalho da sua página (que fica “invisível” aos visitantes —  a menos que ele inspecione o código do sue site), que ela é réplica de uma outra. Isso em casos de conteúdos rigidamente copiados.
    Exemplo: <link rel=”canonical” href=”http://www.site-do-conteudo-original.com.br” />

Adicionalmente, veja este vídeo publicado pelo próprio Google no canal do YouTube “Google Webmasters” (em inglês): “Se eu citar outra fonte, serei penalizado por conteúdo duplicado?

Fontes e referências:

Você também pode se interessar por minhas anotações da palestra:

Você já passou pela situação de ser punido por engano? Aplica essas técnicas e confirma seu funcionamento? Comente!

Cupom Google G Suite de desconto por 1 ano (2020)

Peça um cupom Google G Suite válido para você!

No meio do post tem um formulário de contato. Insira os seus dados que providenciarei para você!

Conheça o G Suite

O G Suite é um grupo de aplicações do Google voltado para empresas. Ele inclui a possibilidade de você ter e-mails seu-nome@suaempresa.com.br hospedados no Google e com acesso via navegadores de internet através da mesma interface utilizado pelo Gmail.

Além disso, inclui todas as aplicações na nuvem, como a conhecida pelo nome Google Docs com documentos, apresentação, planilhas, agenda, formulários etc, sincronizados em tempo real e que poder ser usados por todos funcionários (e convidados) simultaneamente. É um diferencial enorme na agilidade de construção de documentos por mais de uma pessoa, pois todos podem colaborar simultaneamente, vendo as modificações dos outros em tempo real.

Para ter tudo isso, você paga o justo valor de 5 dólares por mês por usuário de e-mail. E-mails de grupo, alias e redirecionamentos, não geram cobranças adicionais.

Cupom de desconto para o Google G Suite

Você pode conhecer essa solução agora fazendo um teste grátis de 14 dias sem compromisso, e ainda ganhar desconto de 20% no primeiro ano caso contrate. Basta entrar em contato preenchendo o formulário abaixo para receber os códigos de cupom para o Google G Suite, pois é contra as políticas do Google divulgar abertamente em sites.


Solicite seu cupom de desconto

* obrigatório




Como resgatar sua oferta

  1. Inscreva-se no G Suite
  2. Acesse suas configurações de faturamento
  3. Escolha o plano de pagamento
  4. Insira o código promocional

Se precisar de ajuda, ligue para a equipe de suporte do G Suite pelo telefone 0800-047-4795 ou visite a Central de Ajuda do Google Suite.

Vantagens

Uso o G Suite (que já foi conhecido como Google for Business, Google Apps e Google para Empresas) em empresas que trabalhei/trabalho desde 2011, e é claro para mim que ele é o tipo de solução necessária pelos negócios atuais e que serão cada vez mais exigidas. Entendo como o modelo de trabalho online “do futuro”.

Entenda algumas vantagens:

  • Não fique confuso com várias versões trocadas de anexos de doc’s, powerpoints e planilhas por e-mail. Tenha um único documento de texto, apresentação ou planilha online, e centralize nele todas as modificações feitas por você e demais colaboradores. É possível ver um histórico de todas edições, seus autores e hora. Adicionalmente, você pode a qualquer momento fazer uma cópia e/ou exportar em um arquivo para seu computador, para ter um backup próprio, por exemplo.
  • Não dependa da hospedagem do seu site para ter seus e-mails funcionando. Uma dor de cabeça quando precisamos mover o site de uma hospedagem para outra, são as contas de e-mails. Com o G Suite, eles estarão nos servidores do Google e não sofrerão influência da hospedagem e instabilidades que estejam ocorrendo no site.
  • 30gb de armazenamento por usuário, distribuído entre o e-mail e Google Drive. Bastante espaço que posteriormente pode ser ampliado caso necessário, por pequenos valores adicionais. No Google Drive, você armazena seus arquivos online e acessa por seu login através de qualquer navegador. Como se fosse um pendrive na web.

E você, já teve experiência com o Grupo Suite? O que acha/achou? Comente aqui após tratar e conhecer.

Adicionar um usuário no Google Analytics: Passo a passo

Os dados do Google Analytics podem ser usados para que profissionais analisem e elaborem propostas e estratégias mais assertivas nos planejamentos dos projetos de campanhas de mídia na área do marketing digital.

Para conceder permissão à um usuário à sua conta existente do Google Analytics de um site ou aplicativo, primeiro ele precisa ter um e-mail associado à uma conta do Google. O normal é ser um Gmail, mas pode ser qualquer e-mail que tenha sido usado para a criação de uma conta no Google Analytics.

Para adicionar um novo usuário que tenha acesso à uma conta/propriedade/vista da propriedade, siga os dados abaixo:

  1. Faça login na sua conta do Google Analytics aqui: https://www.google.com/analytics/web/#home/
  2. Selecione a guia Administrador https://support.google.com/analytics/answer/6132368 e navegue até a conta/propriedade/vista da propriedade https://support.google.com/analytics/answer/6099198 desejada.
  3. Na coluna “CONTA”, clique em Gerenciamento de usuários.
  4. Em Adicionar permissões para, insira o endereço de e-mail da Conta do Google  do usuário.
  5. Selecione as permissões: Gerenciar usuários, Editar, Colaborar e Ler e analisar
  6. Selecione Notificar este usuário por e-mail para enviar uma notificação a cada usuário que você está adicionando.
  7. Clique em Adicionar.

Se achou trabalhoso e não tem problemas em fornecer seus dados para outra pessoa, ao invés disso pode disponibilizar seu usuário e senha da sua conta que tem acesso ao Google Analytics. Fique atento pois, se for os dados do seu e-mail do Gmail, o mesmo usuário e senha poderá dar acesso à ela ver seus e-mails, mudar a senha, excluir outros usuários e níveis de acesso da conta do Analytics etc.

Patins Fabiola da Silva BFS 10000: Resenha após 1 ano de uso c/ vídeo

O patins inline Fabiola da Silva BFS10000 da marca Bel Sports (segmento do grupo Bel Fix) é conhecido por possuir um dos melhores custo-benefício para a modalidade freestyle/slalom, ou para quem está querendo um patins com melhor desempenho do que um modelo amador de entrada.

Veja abaixo vídeo de unboxing com resenha em áudio e, em seguida, suas características e meu depoimento após 1 ano de uso frequente.

Características do patins BFS 10000

Esse patins é indicado para a prática de slalom e freestyle devido as características da bota de plástico rígido (concede maior controle nos pés), rodas próximas e roqueado (ou com rockering, ou seja, extremidades em tamanhos menores para facilitar manobras/rodopios).

Componentes da caixa

  • 1 par de patins pretos
  • 1 par de cadarços pretos
  • 8 rodas com rolamentos e espaçadores já instalados (4 de um tamanho maior, 4 de um tamanho menor)
  • Chave, parafusos extras e reposição dos protetores laterais

Especificações técnicas do patins

  • Rolamentos: ABEC-7 Chrome
  • Rodas: PU fundido de alta resiliência em 2 tamanhos (roqueadas, as das extremidades são menores, o que concede maior agilidade):
    • Nos tamanhos 36 a 39, as rodas são 72 (as 2 das extremidades) e 76mm (as 2 do meio).
    • Nos tamanhos 40 a 42, as rodas são 76 (as 2 das extremidades) e 80mm (as 2 do meio).
  • Frame: Single chassis em alumínio fundido

Mais detalhes do patins no site da fabricante (clique aqui).

Veja vídeos da modalidade Slalom para conhecer (clique aqui).

Resenha do patins Fabiola da Silva

Componentes e características

Ele é discreto por ser predominante preto com detalhes que parecem cristais em cinza em volta de algumas aberturas de ventilação. Para personalizar mais, uma forma simples é trocando os cadarços pretos por outra cor.

O patins Fabiola da Silva vem já com as rodas em configuração para slalom (roqueado, ou com rockering). A proximidade pequenas das rodas que é adequada para essa prática e também para freestyle. Ele não vem com freio, o que é normal nos patins dessa modalidade, pois ele atrapalharia as manobras.

Além do cadarço, o patins BFS 10000 vem com 2 fechamentos em presilha. A presilha da base ajusta bem. Contudo, a de cima, do tornozelo, mesmo bastante apertada fica um pouco folgada. Por isso, preferia usar meias grossas no topo para ficar mais justo no tornozelo e com maior precisão nos movimentos. Periodicamente no uso, eu parava e ajustava mais as presilhas.

Durabilidade, indicação de uso e custo benefício

Utilizei esse patins por 12 meses com a frequência de uso em média 2 a 3 vezes por semana inicialmente para modalidade slalom e, posteriormente, para freestyle, urban e jogar hockey. Nesse período, troquei as rodas uma única vez devido ao desgaste das originais, depois de 6 meses de uso. O patins Fabiola da Silva atendeu bem às minhas necessidades, seja fazendo giros nos cones, correndo, pulando ou fazendo manobras rápidas. Recomendo para qualquer pessoa que queira começar a se dedicar no patins em alguma dessas modalidades.

Anteriormente eu havia comprado o modelo fitness/de passeio, o Oxer Speed 7000 na Centauro e usado por 2 meses. Compra essa que poderia já ter sido substituído pelo BFS10000 se eu soubesse que me dedicaria de fato à patinação slalom e freestyle. O único motivo de eu ter parado de usá-lo foi que, infelizmente, ele foi roubado.

O custo benefício deste patins é conhecido por ser um dos melhores devido a ele não ser amador e, ainda assim, acessível. Seu preço varia hoje entre R$ 360,00 e R$ 500,00 e é possível encontrá-lo à venda online no Mercado Livre e em grandes lojas como SubmarinoNetshoes, Americanas e Centauro. Comprei em uma loja física na minha cidade (Salvador/Bahia), a Xtreme.

E você?

Se você possui dúvidas, faça sua pergunta nos comentários. Se já adquiriu esse patins, deixe seu depoimento para ajudar a tirar dúvidas de quem pensa em comprá-lo! :)

Plugin WordPress de compressão de imagens gratuito

Utilizo este plugin para comprimir imagens em todo projeto WordPress. Ele reduz o peso das imagens assim que fazemos upload no painel e ainda dá a possibilidade de diminuir o peso de todas as que já foram enviadas anteriormente, em todas suas variações de tamanhos.

Conheça e baixe o plugin grátis: EWW Image Optimizer

Por que usá-lo (informações traduzidas da página do diretório oficial do WordPress):

  1. Suas páginas carregarão mais rápido. Arquivos de imagens mais leves significa carregamento mais rápido. Isso melhora a experiência do usuário e aumenta as conversões.
  2. Backups mais rápidos. Arquivos de imagens mais leves significa que os backups que realizar serão mais rápidos.
  3. Menos uso de banda. Otimizar imagens faz você economizar milhares de KB por imagem, o que diminui substancialmente a utilização do tráfego de dados do seu site.
  4. Super rápido. Este plugin pode rodar no seu próprio servidor então você não precisa aguardar por um terceiro para receber, processar e retornar suas imagens. Isso pode ser feito em poucos minutos. Arquivos PNG demoram mais, mas você pode ajustar as configurações para adequar mais sua situação.
  5. Melhor otimização JPG. Com a integração com o TinyJPG , nada é comparável (necessita um cadastro na API).
  6. Melhor otimização de PNG. Você pode usar pngout, optipng, e pngquant conjuntamente. Se isso não for o suficiente, tente a poderosa opção TinyPNG.
  7. Não é necessário acesso Root. Binários pré-compilados ficam disponíveis para instalar diretamente na pasta WordPress e otimização na nuvem é disponibilizada para aqueles que não podem executar binários localmente.
  8. Otimize tudo. Com a classe de extensão wp_image_editor, e a habilidade de especificar suas próprias pastas para escanear, qualquer imagem no WordPress pode ser otimizada.

Para casos em que ele não ofereça o suficiente, há possibilidade de assinar planos acessíveis no https://ewww.io/plans/ para complementar seu funcionamento.

Existem outros similares que podem ser eficientes, mas possuem algumas limitações em suas versões gratuitas, como o https://tinypng.com/ e o https://compressor.io/.

 

Rodas Traxart LED Verde Luminosa para patins inline: Unboxing e review/resenha opinião

O kit é composto por 4 rodas. Há um adesivo de advertência informando que ela não é feita para resistir a obstáculos, como escadas. Importante que elas Não vêm com rolamentos!

Aparentemente ela é transparente e possui 4 luzes de LED. Estão um pouco gastas porque, na verdade, eu usei ela uma vez antes de fazer o vídeo e tirar as fotos.

Cada uma vem com um espaçador específico para que elas acendam.

Espaçador específico da roda de patins LED da Traxart.

Como instalar as rodas no patins inline

Para instalar no patins, você deve inserir os rolamentos, um de cada lado. É muito apertado; a primeira vez que instalei pareceu que não ia entrar. Facilita pressionar contra o chão.

Roda com rolamento (não incluso na compra das rodas) inserido.

Depois, você deve inserir a roda na abertura, atravessar o parafuso e apertá-lo com a chave. Importante que deve ficar bem apertado para que as luzes de LED acendam.

 

Resenha das rodas luminosas para patins

Interessante notar no vídeo como as demais rodas, normais verdes e que também são novas, giram por muito mais tempo que as rodas de LED, mesmo usando o mesmo rolamento. Isso na prática atrapalha para pegarmos velocidade na rua.

Testei folgar um pouco o parafuso, o que melhora um pouco, mas ainda assim as rodas não acendem, mesmo estando em pé vestindo o patins. As rodas verdes comuns continuam girando com muito mais facilidade.

Após uso na rua e conclusões

Enquanto são bem bonitas e úteis para chamar atenção e assim ajudar a prevenir acidentes nas ruas, elas não são boas em questão de performance em velocidade. Recomendo então, para andar na rua, utilizar rodas boas e rolamentos que giram mais facilmente (além de um diâmetro grande) e algum acessório extra de sinalização para substituir o destaque da luz.

Dica: Usar as duas rodas LED na parte de trás parece ser a pior configuração quando instalada junto a rodas comuns. O desempenho da velocidade melhora utilizando as de de LED no meio ou uma em cada extremidade.

Informações adicionais

Para referência, estes são os espaçadores de rodas de patins inline comuns. Completamente de metal e lisos — o que deve facilitar o giro.

Como baixar imagens grátis no Google

Gostaria de baixar imagens grátis facilmente no Google, sem a preocupação delas possuírem direitos autoriais? Para isso, o processo é simples!

Inicialmente pesquise o termo relacionado à imagem/foto que procura no Google.
Ex: “gato”. Então, siga os passos abaixo:

1. Clique em “Imagens”;

2. Clique em “Ferramentas de pesquisa”;

3. Clique em “Direitos de uso”;

4. Selecione “Marcadas para reutilização”:

Pronto! Serão exibidas as imagens que você poderá baixar gratuitamente para utilizar livremente :)
Clique aqui e visualize a página acima com os filtros aplicados.

Para salvar sua imagem/foto gratuita, basta clicar na desejada e então:

A) Ou com o clique direito nela clicar “Salvar imagem como…”;

B) Ou clicar em “Visualizar imagem” para visualizá-la em tamanho real em nova aba (onde você poderá salvar também através do clique direito do mouse ou pressionando CTRL+S):

Dicas para obter mais resultados de imagens gratuitas

1) No passo 4, você pode ver que existem várias opções  de filtros de licença:

Marcadas para reutilização” deve ser um dos menos abrangentes.

Se você sabe que irá modificar a imagem através de montagens, poderia marcar “Marcadas para reutilização com modificação” e assim conseguir mais resultados de imagens para usar gratuitamente!

Se você for usar para um projeto escolar ou não comercial, poderia marcar “Marcadas para reutilização não comercial com modificação” ou “Marcadas para reutilização não comercial“!

2) Outra coisa: procure também em inglês! Muito mais imagens puderam ser encontradas ao repetir o procedimento, mas usando o termo “cat” ao invés de “gato”.

Clique aqui e visualize os resultados de imagens para “cat” com o filtro “Marcadas para reutilização”.

Essa informação foi útil para você? Compartilhe com quem mais achar que poderá usufruir dessa funcionalidade :)

Como tirar print screen/screenshots. Facilite com o Lightshot!

Essa foi uma daquelas ferramentas que mudou minha vida — para melhor — e que me fez sentir necessidade de compartilhar para facilitar e melhorar também a de todos!
Você pode ver a parte A (onde descrevo o método convencional) ou pular para a parte B (recomendo!) para saber como começar já a otimizar a atividade através do programa de print screen Lightshot que possui versões para Windows, Mac OS, Ubuntu (com Wine) e Google Chrome.

A) Método convencional de como tirar print screen da sua tela

Tirar print screen/screenshot da tela do seu notebook/PC é fácil! Basta:
  1. Clique na imagem para ampliar

    Apertar uma tecla no teclado, chamada PrntScr. Ela fica logo acima a tecla de apagar (“backspace”) ou próxima ao Delete/del, no canto direito superior do teclado (depende do modelo).

  2. Depois disso, é só clicar em “Colar”, ou pressionar Ctrl+V, onde você deseja mostrar a imagem (contanto que o local aceite imagem).
    Ex: Abra o Paint brush e cole lá, ou direto no corpo de uma mensagem do seu Gmail/Outlook, no seu documento do Microsoft Office Word etc.

B) Torne ainda mais fácil e prático tirar print screen com o programa Lightshot!

Conheci essa ferramenta que, basta instalar, e ela deixará o processo de tirar pint screen e salvar/compartilhar a imagem com outros, muito mais fácil! E ainda com a possibilidade de inserir anotações no screenhost!

O que é o Lightshot

O Lightshot é um programa gratuito, disponível para Windows, Mac, Ubuntu e como extensão do Google Chrome.
A grande vantagem que vejo é você instalar no seu sistema operacional, pois ele substituirá o comportamento padrão do que acontece quando você pressiona normalmente o botão Print screen/PrntScr do seu teclado.

Para que serve

Eu diria que para facilitar sua vida e economizar seu tempo. Ao menos no ato de tirar print screen :)
Com ele, é possível:
  • Maior precisão na captura, pois o Lightshot permite selecionar a área na tela que quer na imagem (o que o Windows não faz por padrão);
  • Você ser mais didático de forma rápida: ele possui ferramentas de texto, formas geométricas, setas e desenho livre para anotar por cima da captura de imagem;
  • Compartilhar facilmente: você pode, com um clique, enviar a imagem para a internet e receber um endereço de compartilhamento para enviar num chat, por exemplo.

Como usar o Lightshot

Super rápido e prático, e basta instalar para aproveitar para sempre! Veja em 3 passos:

  1. Faça download do Lightshot no endereço de acordo com seu Sistema Operacional entrando no seguinte endereço http://app.prntscr.com/pt-br/download.html. Instale na sua máquina (recomendo abrir no Windows através do clique direito em cima do arquivo, selecionando “Executar como administrador”).
  2. Pressione o print screen normalmente do seu teclado. Se a ferramenta não funcionou, reinicie seu computador que na volta deverá dar certo. Ou verifique se está com permissão de Administrador no computador para, então, reinstalar.
  3. Selecione a área que deseja salvar clicando e arrastando seu mouse. Solte o clique do mouse e você ainda poderá ajustar a área e redimensioná-la!

Se você só precisa capturar a tela, pronto! Basta pressionar as teclas de atalho Ctrl+C ou clicar em Copiar na ferramenta para depois colar onde quiser.

Recursos do Lightshot

Do lado direito temos as possibilidades de desenho e anotação no print screen. Embaixo, de salvar e compartilhar.

  • Anote e desenhe! A primeira ferramenta do lado direito, permite você fazer desenhos livres. Em seguida temos a ferramenta para fazer linhas retas, outra para setas, retângulos, marcação/destacar texto, escrever texto e selecionar a cor para elas;
  • Desfaça erros. A última ferramenta do lado direito, é o ícone de desfazer. Clique para voltar ao estado anterior, caso tenha feito alguma edição errada;
  • Envie para a nuvem! É possível fazer upload temporário da imagem com um clique, para compartilhá-la via chat etc. Basta clique no primeiro ícone de baixo que o Lightshot fará o upload da imagem automaticamente, e te dará o link para visualizá-la.
  • Compartilhe nas redes sociais. Basta escolher entre o twitter, facebook, VK ou Pinterest.
  • Imprima em um clique. Basta clicar no ícone da impressora para começar!
  • Simplesmente copie. Clique no ícone de copiar. Uma alternativa ao atalho Ctrl+C.
  • Salve no seu computador. Basta clicar no disquete, e você poderá armazenar a imagem com o cortee anotações que você fez!
  • Régua digital: De quebra, uma dica: eu uso também como régua em pixels! A ferramenta mostra as dimensões em pixels da área de seleção e isso pode ser muito útil em alguns tipos de atividades ;)
Faça um bom proveito e compartilhe esse artigo: Melhore o mundo ajudando as pessoas na otimização de tarefas do dia a dia! :)

Palestra e Workshop de UX Design/Experiência do usuário no Conexão KingHost 2015

Ministrei palestra + workshop online sobre UX Design / Experiência do usuário no Conexão KingHost 2015 dia 12/11/2015, às 19h do horário de Brasília (18h nas regiões sem horário de verão). O evento trouxe 20h de conteúdo sobre as tendências e aplicações do mundo digital!

Aprenda como aplicar teste de usabilidade nos projetos do seu dia a dia! Veja os slides do conteúdo exposto abaixo:

Sumário

MOMENTO 1: PALESTRA

U.X. Design/Experiência do Usuário: O que é e por que importa

  • Conceito e origem
  • Como o usuário, você e seu negócio se beneficiam
  • O que faz um profissional de UX

MOMENTO 2: WORKSHOP

  • Entregáveis de UX
  • Teste de Usabilidade

Assista ao vídeo com meu convite ao evento, depoimento e expectativas:

Também daqui de Salvador/BA, Ian Castro, especialista em otimização para sistemas de busca, palestrou sobre SEO para E-commerce. Clique aqui e leia mais no site Intermidias.

Já estamos em contagem regressiva para o #conexaokinghost2015 :D

Posted by KingHost on Segunda, 5 de outubro de 2015

 

Como usar o Gmail com um domínio de e-mail personalizado gratuitamente

Não é raro eu encontrar pessoas que pagam o Google Apps for Work apenas para terem e-mails com o domínio personalizado de sua empresa. Contudo, caso você não precise das ferramentas que só o Google Apps for Work oferece, é possível você usar gratuitamente o Gmail para enviar e receber e-mails do seu domínio próprio.

Para que você possa receber e enviar mensagens de forma mais profissional usando um e-mail personalizado seunome@seudominio.com.br gratuitamente através do Gmail, faça o seguinte:

1. Configure redirecionamentos de e-mail pela sua Hospedagem

Primeiramente é necessário você fazer os redirecionamentos de e-mail pelo seu serviço de hospedagem – que normalmente permite isso sem custos adicionais.

Veja abaixo links diretos para as instruções de como configurar redirecionamentos de e-mails nos respectivos serviços de hospedagem:

Basta seguir as instruções da sua hospedagem na opção de redirecionar e-mails. Você deve informar que e-mails enviados para seunome@seudominio.com.br sejam redirecionados para seusuario@gmail.com.

A conta de e-mail do Gmail pode ser a sua pessoal. Caso não tenha, crie uma conta de Gmail gratuitamente. Não se preocupe por que, ao final das configurações, seu endereço do Gmail original não ficará visível aos usuários comuns.

2. Configure o Gmail

Os passos abaixo só funcionarão após a configuração do passo anterior. Atente se a hospedagem não pede algum tempo limite para que o redirecionamento funcione e teste o redirecionamento enviando um e-mail para seunome@seudominio.com.br, verificando se ele é recebido na caixa de entrada do seu Gmail.

Estando tudo ok, vamos lá:

2.1. Vá em “Contas e Importação” nas configurações do seu Gmail.
A página “Configurações” pode ser acessada pela engrenagem no lado direito superior da Caixa de Entrada ou no link acima .

2.2. Clique em “Adicionar outro endereço de e-mail que você possui, conforme mostra a imagem:

 

2.3. Preencha seu nome e o seu e-mail com o domínio personalizado. Deixe marcado a opção “tratar como alias” e clique em “Próxima etapa”.
Caso a janela não apareça, desabilite seu bloqueador de popup (uma notificação normalmente aparece no canto da barra de endereço do navegador).


2.4. Preencha os campos da seguinte forma:

  • Servidor SMTP: smtp.gmail.com
  • Porta: como está (587)
  • Nome de usuárioseuusuariodogmail@gmail.com
  • Senha: sua senha do Gmail

Clique em “Adicionar conta“.

 

2.5. Clique no link recebido na sua Caixa de Entrada do Gmail e pronto! Você terá confirmado seu e-mail.
Depois disso, você poderá escolher o e-mail seunome@seudominio.com.br na área “De:” dos seus novos e-mails, conforme um exemplo abaixo (basta clicar na setinha no canto direito para ver a(s) opção(ões)):

 

2.6. Confirme o funcionamento testando de um outro e-mail enviar uma mensagem para seunome@seudominio.com.br e verifique se recebe e se consegue enviar uma resposta com o campo “De:” com “seunome@seudominio.com.br” selecionado.

Caso não funcione, experimente repetir os passos desde o início, atentando para todas as observações. Se ainda não der certo, deixe um comentário descrevendo qual o erro e onde ele ocorreu.

Dicas!

Para que automaticamente o campo “De:” dos e-mails use o e-mail que o remetente se referiu, vá em “Contas e Importação” nas configurações do seu Gmail. Marque “Ao responder a uma mensagem: Responda pelo mesmo endereço em que a mensagem foi recebida“:

 

Mantenha a caixa do Gmail organizada com Filtros Marcadores. Você pode configurar um filtro para que todos os e-mails com o campo “para” possuindo “seunome@seudominio.com.br” utilize um marcador personalizado que o destaque dos outros e-mails, ou mesmo direcione para outra pasta. Muito útil se quiser centralizar uma única conta para checar mensagens de todas suas contas de e-mail!

Não funcionou?

Existem alguns casos que não funcionam e, para empresas maiores, pode ser complicado realizar esse procedimento para cada conta. Minha sugestão é que conheça o GSuite, pacote de ferramentas do Google para empresas que inclui a ferramenta de e-mail utilizando a interface do gmail, além de várias outras que ajudam a aumentar produtividade, como planilhas e outros documentos sincronizados e compartilháveis  na nuvem!

Se encontrar algum problema ou tiver alguma informação útil, esteja à vontade para deixar um comentário. E se achou essa publicação útil, passe-a adiante!

 

Dr. Paulo Cezar Maldonado – Site Responsivo

O site do médico homeopata Dr. Paulo Cezar Maldonado objetiva ser principalmente fonte de informação para seus pacientes. Para isso foi proposta e desenvolvida a área Textos e Artigos contextualizadas em um Blog, que também foi adotado como área para divulgação de Novidades e das Entrevistas participadas.

Também foi considerado que o site deve ser uma fonte de informação a seu respeito – o que originou a área Sobre Mim. Ela e a aplicação de técnicas de SEO visam tornar o site mais facilmente encontrado por usuários que lhe buscam diretamente ou que procuram temas relacionados a seu trabalho em buscadores como o Google.

Como facilitador aos seus pacientes, o site também informa a respeito da disponibilidade de dias, locais e horários de atendimento no menu Consultórios.

Para agregar ainda mais valor ao trabalho do Dr. Paulo, foi desenvolvida também uma área dinâmica de envio de Depoimentos que está integrada ao WordPress.

Minhas competências principais envolvidas neste projeto, foram:

  • Planejamento: Fui responsável pela proposta de conteúdo do site, seu escopo detalhado com pesquisa e análise de similares, definição da estrutura de navegação, avaliação do contexto simbólico do cliente, seu público e formas de melhor alcançá-lo;
  • Design: Desenvolvimento da arquitetura da informação, conceito gráfico, estudo de cores, elementos gráficos, tipografia etc e sua aplicação conjunta no layout;
  • Programação: Front-end e back-end com HTML5, CSS3, PHP, sistemas e configuração do WordPress baseado em template responsivo existente.

Contei neste projeto também com a participação de Larissa Seixas para o aperfeiçoamento do conteúdo para a web.

Acesse o site no seu smartphone, tablet e computador e veja como ele se comporta (por possuir responsive webdesign): http://paulocezarmaldonado.com.br

Zaru Gestão Empresarial – Redesign do site

O projeto consistiu em realizar um novo layout para o site com WordPress da Zaru Gestão Empresarial respeitando a mesma estrutura e programação existentes do site, objetivando transmitir visualmente o posicionamento da cliente. Modernidade, clareza, praticidade, objetividade, foram levadas em consideração a fim de facilitar a navegação e tornar o ambiente mais “clean” e propício para compartilhar informações e promover um ambiente sinérgico e atrativo para troca de conteúdo com seu público.

As competências principais envolvidas neste projeto, foram:

  • Projeto de redesign: Pesquisa e análise de referências de sites do segmento e do público-alvo, concepção e desdobramento respeitando os limites da estrutura existente do site;
  • Desenvolvimento web: Para aplicar o novo layout, realizei desenvolvimento em HTML & CSS3 e configurações/backup/realocação do WordPress.

Confira o novo site em: http://zaru.com.br

Opinião sobre o #WordCampSalvador 2014 e resumos das palestras

Ocorreu o 1º evento WordCamp Salvador em 06/12/2014 que foi muito bem organizado e teve ótimas palestras e público. Realizei várias anotações de novidades para mim das palestras que assisti (haviam 2 simultâneas sempre) e, como muita coisa foi útil, resolvi compilar e publicar aqui.

A programação completa pode ser acessada no site oficial do evento WordCampSalvador 2014, que irá conter os slides na íntegra de cada palestrante. Em alguns resumos já disponibilizo links para os slides na íntegra.

Escrevo mais sobre o evento após os resumos das palestras.


09:00

1. WORDPRESS MULTISITE: DESENVOLVENDO PORTAIS COM SITES INTERLIGADOS

Nícholas André Pinho de Oliveira

▶ Os slides na íntegra feitos pelo palestrante podem ser vistos aqui.

Os subsites de uma instalação multisite é composta pelos chamados Sites virtuais por não existir neles um subdiretório próprio. Um grupo desses sites é chamado de Network. Nele, é possível o compartilhamento de plugins e temas, mas os sites são logicamente separados.

Multisites é indicado para usar em blogs, por exemplo, de colunistas de um jornal, para fazer preview de temas… ou seja, sites que precisem haver subseções independentes e que usam WordPress.
Não é indicado a princípio para sites interligados, pois há poucas configurações globais e o uso delas aumenta muito a carga do sistema (como as funções switch_to_blog() e restore_current_blog()).

Os subsites podem ser instalados em subdomínios ou subdiretórios, sendo que para subdomínio é preciso configurar o DNS de cada um.

Case apresentado na palesta: UFERSA.edu.br
Possui cabeçalho e rodapé comum en todos os subsites, que é algo simples de fazer no tema principal.

Voltar para o sumário ^


09:45

2. WORDPRESS PARA SEUS CLIENTES

Ted K’

O fato de Barack Obama e outros famosos usarem WordPress é uma forma de aumentar as chances de venda da implementação no site do cliente.

O WordPress pode ser tranquilamente usado com Phonegap para alimentação de aplicativos mobile.

Formas de valorizar o trabalho e possuir um diferencial perante o cliente, são:

  • A personalização da tela de login, incluindo a marca do cliente
  • Widget personalizado no dashboard
  • Cores personalizadas do tema
  • Personalização do menu principal do painel para esconder opções que o cliente não usará.

Foi comentado sobre compartilhar ou não usuário e senha de administrador para o cliente. /*Minha opinião é criar um login de Administrador e um de Editor e compartilhar os dois com o cliente. Junto, orientá-lo a guardar o de Administrador para repassar caso um programador precise, e ele por padrão usar o de Editor, com exibição mais simplificada de painel (e com algumas opções desnecessárias ocultas).*/

Voltar para o sumário ^


10:30

3. PROGRAMAÇÃO VISUAL APLICADA PARA BLOGUEIROS

Helton Bezerra da Silva

Essa palestra foi interessante para mostrar aos programadores que é comum haver entre eles preocupação em estar fazendo ou não um sistema com boa estética e usabilidade, além de funcional (a experiência). Foi dada ideias práticas de como noções de design é importante e podem ser usadas com simplicidade. Não anotei muito por Design ser minha formação, mas peguei as seguintes referências:

  • Layout F (as áreas mais clicadas de uma página web)

  • Modelo AIDA do fluxo que leva o cliente a tomar uma ação:

Voltar para o sumário ^


11:15

4. O ESSENCIAL PARA UM BOM DESEMPENHO DO SEU PROJETO EM WORDPRESS

Sergio Costa

▶ O resumo do conteúdo feito pelo próprio palestrante pode ser visto aqui, e seus slides na íntegra podem ser vistos aqui.

Foi citado o uso do Font Awesome para otimização de imagens para ícones padrão, e uso de sprites na web. Também foram dados vários exemplos de erros comuns, muitos causados por plugins mal codificados.

Para melhorar desempenho de carregamento, foram sugeridas técnicas como:

  • Limpar funções não usadas no wp_head()
  • Carregar CSS no header e JS no footer sempre;
  • Sempre chamar o plugin apenas se sua função existir (para, por exemplo, não carregar os scripts do plugin Contact Form 7 em todas as páginas sendo que só é usado na página “Contato”);
  • Uso de Ajax para atualizar apenas o necessário na página, ao invés de recarrega-la toda;
  • Uso da Transients API para usar cache temporariamente;
  • Configuração do .htaccess para definir por quanto tempo determinados conteúdos podem ficar armazenados em cache.

Foram recomendados também os seguintes plugins para WordPress específicos para melhoria de desempenho:

Voltar para o sumário ^


14:00

5. SEO PARA WORDPRESS: UMA ABORDAGEM PRÁTICA

Ian Castro

▶ Os slides na íntegra feitos pelo palestrante podem ser vistos aqui.

Foi citado o case de sucesso da JVF Empreendimentos que possui mais de 9o% do tráfego vindo de resultados de busca, inclusive com ajuda de, por exemplo, um página falando sobre o bairro, para aumentar as chances de entrada do usuário na página e de se interessar e vir a comprar os imóveis do site.

Itens que contam no rankeamento da página nos resultados de busca:

  • Velocidade do carregamento da página; por isso é importante ela estar com bom desempenho, inclusive com imagens comprimidas
  • Atributos ALT das imagens preenchidos contextualmente (o que é possível automaticamente com o plugin WordPress SEO by Yoast)
  • Criar páginas que indexem palavras-chave, que serve de catálogo com os termos mais pesquisados.
  • Topic related content: Incluir sinônimos de palavras-chave no conteúdo.

Sugestões de ferramentas e práticas para melhorar o SEO em geral:

  • Planejador de palavras chaves Google Ad Words
  • Fazer redirecionamento 301 ao mudar URLs para manter credibilidade da pagina. Se não fizer, a contagem de rankeamento começa do zero. Há o plugin Redirection para WordPress que auxilia nisso./*estou usando e é super prático!*/
  • Google webmasters tools
  • URL e títulos curtos e diretos, com as palavras chave relevantes, geram maior acesso. Inclusive conteúdo com até 1500 palavras são os que possam melhor aceitação, segundo Moz e sepIQ
  • Usar tags para puxar títulos específicos, provavelmente mais curtos, para compartilhamentos no facebook
  • Se for possível manter o controle, não colocar para os links permanentes do WordPress inserirem as categorias do post automaticamente na URL. Usar apenas para puxar o nome do post, podendo inserir categoria manualmente se for o caso, em cada post.

Ver How search works, do Google e pensar em “Metas, métricas e rotinas.”

Voltar para o sumário ^


14:45

6. APRENDA A CRIAR UMA LOJA COM WOOCOMMERCE

Claudio Sanches

O Woocommerce é muito fácil de instalar, basta seguir o passo a passo. Sendo obviamente open source, é gratuito e existem vários plugins (muitos também gratuitos) que permitem a personalização com a adição de suporte às mais variadas necessidades específicas, como:

  • Compra de acesso por tempo ou quantidade de clique
  • Booking para reserva de tempo/datas em agenda
  • Pre order/Pré-venda de produtos

Etc! Além de haverem várias opções de cálculo de entrega e formas de pagamento aceitas, já simplificado e instalável por intermédio de plugins.

Possui um tema gratuito padrão, o Storefront e é recomendado ele ser usado para ser a base para o desenvolvimento de novos temas Woocommerce.

Voltar para o sumário ^


15:30

7. AS NOVAS TECNOLOGIAS HACK E HHVM DO FACEBOOK E O WORDPRESS

Amon Caldas

 

Hack, linguagem desenvolvido pelo Facebook, é um “aperfeiçoamento” do PHP que facilita depuração e checagem de erros em tempo de desenvolvimento através do conceito de anotação de tipos.

Foram citadas estatísticas de aumento da performance de aplicações PHP com o uso da máquina virtual HHVM em substituição ao engine PHP da Zend e índices de ganho de performance indicados pelo WPengine e outros serviços ao utilizar HHVM para WordPress. A expectativa é que em pouco tempo já seja possível utilizar a linguagem Hack para desenvolvimento no WordPress.

Hoje ainda não é possível devido a algumas incompatibilidades da nova linguagem, como o não suporte a variáveis globais e a restrição quanto a “mistura” entre HTML e código server side.

Voltar para o sumário ^


17:00

8. WORDPRESS PARA REDATORES, JORNALISTAS, PUBLICITÁRIOS E BLOGUEIROS

Valério Souza

▶ Os slides na íntegra feitos pelo palestrante podem ser vistos aqui.

Foi dada uma orientação básica do uso do painel WordPress e de ferramentas nativas nem sempre lembradas que otimizam muito tempo (como ações em massa do post, exibição de resumo dos posts na listagem de posts, opções da tela, formatação avançada). Também foi feita uma prévia das novidades que estão por vir na próxima versão.

Alguns plugins para WordPress muito úteis para redatores, jornalistas, publicitários e blogueiros  (os 2 primeiros certamente irão mudar minha vida):

  • ImageInject: Possibilita a busca automática de imagens gratuitas dentro do WordPress, sugerindo já opções contextualizadas ao seu conteúdo;
  • FakerPress: Cria conteúdo de mentira para preencher páginas, posts, post-types no WordPress para testes de desenvolvimento;
  • Email Post Changes: Plugin que notifica por e-mail sobre modificações de conteúdo. Importante para escritas compartilhadas ou supervisionadas.
  • Post notification by email: Plugin que notifica por e-mail sobre publicações de novo conteúdo. Útil para escritas que precisam de revisão.
  • Edit flow: Um plugin mais complexo onde é possível montar o processo de aprovação dos posts, passando pelos usuários necessários de uma equipe editorial.

Voltar para o sumário ^


17:45

9. PERSONAL BRANDING ATRAVÉS DOS BLOGS

Priscilla Arruda Saldanha

Foi feita reflexão sobre a importância da visão que o público tem dos produtos, e a visão do mercado a respeito de nós. Um exemplo foi a simples apresentação de um Currículo, que quando personalizado já é um diferencial. “Você é sua marca” então é necessário considerar os conteúdos que são publicados na internet, pois eles são localglobalizados. Ao mesmo tempo, não abdicar de sua personalidade: aproveitar suas características de diferenciação para se destacar.
Precisamos ter objetivos a médio/longo prazo sobre onde queremos estar para agir de forma orientada e alcança-los.

Atualmente o content marketing tem dado muito resultado, que é usar marketing contando uma história que emociona/envolve. A tendência para o ano que vem é o aumento do uso de vídeos e redes como youtube.

Voltar para o sumário ^


Mais sobre o evento WordCampSalvador 2014

O kit pros inscritos fornecido no evento foi de super bom gosto. Vale lembrar que a inscrição tinha um preço acessível.

Kit composto de camisa, squeeze flexível, broche, crachá com programação do evento e fitinha do Senhor do Bonfim! A caneca foi brinde extra :)

O evento contou com a organização de Leo Baiano, forneceu almoço de comida baiana sem custos adicionais, e acarajé e cocada como coffee break. Comidas deliciosas e de ótima qualidade!

Que venha o #WordCampSalvador 2015!

Enquanto isso, você pode acompanhar a comunidade na página do facebook WordPress Bahia e o WordPress Salvador/Bahia Meetup.

Palestra – A Agência Nuve e o Processo de Projetos

Palestra que desenvolvi e ministrei para a InfoJr, Empresa Júnior de Informatica da Universidade Federal da Bahia abordando os procedimentos do início ao fim no desenvolvimento de sites, aplicativos mobile e outros projetos na Agência Nuve. O conteúdo/processo apresentado é resultado de 1 ano de melhorias contínuas implementadas pela equipe de projetos da Agência Nuve onde atuei como gerente de projetos e posteriormente gerente de operações.

Na apresentação foi usado o processo aplicado ao case de sucesso site responsivo Tivoli Ecoresidences Praia do Forte (veja detalhes no meu portfolio). Realizamos todo o planejamento, design, programação e controle de qualidade.

Slides da palestra:

 

Sumário da palestra e dos slides:

Essa apresentação está dividida em 2 partes, e possui como principais tópicos os seguintes:

1. A SOLUÇÃO CERTA
Qual o problema do cliente? Introdução ao Design Thinking.

2. O PROCESSO DE PROJETOS
Passo a passo de um site bem sucedido (case Tivoli Ecoresidences)

2.1) Prospecção e Planejamento

  • A) Briefing
  • B) Proposta orçamentária

Após aprovação…

  • C) Definição de tarefas e cronograma detalhado
  • D) Cadastro de tarefas no gerenciador de pauta
  • E) Escopo do projeto
  • F) Checklist de material do cliente

2.2) Execução: Conteúdo, Design e Programação

  • A) Checklist para criação de web sites
  • B) Definição de textos e imagens
  • C) Wireframe e prototipação
  • D) Layout e prototipação
  • E) Documentação das funcionalidades técnicas
  • F) Programação
  • G) Homologação

. Andamento

  • A) Diretrizes
  • B) Project Model Canvas
  • C) Scrum adaptado

. Ferramentas de Apoio

 

Obs: Na palestra apresentei as documentações originais de cada etapa utilizadas no case, que não constam nestes slides.

Junto à equipe da InfoJr ao final da palestra (30/04/2014)

Opinião sobre Philips Saeco Poemia, máquina manual de café espresso com bico vaporizador

Há cerca de dois anos utilizo uma Philips Saeco Poemia inoxidável. Eu a comprei após a anterior, da Mondial, parar de funcionar após 1 ano de uso. Até sua caixa é um projeto bem pensado, sendo compacta, fácil de colocar a máquina e carregar.

Conteúdo da embalagem

  • Colher dosadora de café, com verso projetado para para acomodar o pó no cachimbo;
  • Cachimbo projetado para proporcionar mais crema (a espuma do café), e com peneira removível;
  • 2 peneiras de cachimbo: 1 para pó de café torrado e moído, 1 para café em sachê (mais popular na Europa; aqui você pode usar os sachês da Senseo que funciona);
  • A máquina!

Vídeo da máquina Philips Saeco Poemia sendo usada, incluindo o seu bico vaporizador

O que gostei

  • Sendo uma máquina manual, é possível colocar quase qualquer tipo de pó (só não dá pós finos demais, pois a água não passa), de qualquer marca/especialidade/região à sua escolha.
  • Com o bico vaporizador é possível obter água quente pressurizada (podendo ser usado para fazer chá, por exemplo) ou vapor para espumar leite.
  • Ela é resistente e durável; compartilhei-a com colegas no meu local de trabalho durante 1 ano e ela continua funcionando bem.
  • É possível ver o nível da água sem ter que abrir a máquina graças à uma janela para o repositório na frente da máquina.
  • É bonita e possui design compacto, tendo nela mesma compartimentos para todas as suas peças.

O que não gostei

  • Ela não desliga automaticamente após um período de inatividade e, como o botão de desligar é um interruptor na parte traseira e a luz que indica que está ligada é extremamente fraca, é fácil esquecê-la ligada.
  • Alguns pós de café são mais finos e ao usá-los, praticamente não passa água pelo cachimbo. Como parece que a máquina fica sobrecarregada, acabo tendo que misturar os pós finos com pós grossos ou simplesmente desistindo de usar pó mais fino.
  • Como forma de manter a máquina funcionando adequadamente, é necessário fazer um procedimento de descalcificação a cada 1 ou 2 meses de utilização  e/ou quando houver uma redução da vazão da água. Pelo menos o produto custa apenas R$ 19,90 e pode ser comprado online em http://www.jmstore.com.br/descalcificador-descalcificante-saeco.html (já comprei aqui 2 vezes, é o local onde achei mais barato).

Devo comprar uma máquina Philips Saeco Poemia?

Se você é um amante de café que sente uma grande diferença entre um café espresso e um coado e tem o hábito de tomar todo dia, eu diria que sim! O investimento é um pouco alto, mas recomendo mais do que uma máquina de cápsula se você quiser ter liberdade e variedade de opções. Se o que você procura é praticidade, a de cápsula deve ser uma melhor opção (veja post com resenha sobre a Nescafé Dolce Gusto Piccolo da Nestlé e Arno, máquina para café de cápsula).

A minha é inoxidável, mas é possível encontrar uma variação mais econômica de plástico: http://www.buscape.com.br/philips-saeco-poemia-hd8323-expresso.html#precos

Links úteis

Opinião sobre Nescafé Dolce Gusto Piccolo da Nestlé e Arno, máquina para café de cápsula

Dia 5 de Outubro de 2013, chegou aqui em casa a máquina Piccolo da Arno e Nestlé Dolce Gusto. A própria embalagem foi muito bem projetada, fácil de carregar.

Se quiser comprar a máquina versão automática, clique aqui!

O conteúdo da embalagem do Piccolo Nescafé Dolce Gusto

  • Uma caixinha com 6 cápsulas para degustação, sendo elas:
    • 1 para Lungo
    • 1 Espresso intenso
    • 2 para uma dose de Chococino
    • 2 para uma dose de Cappuccino
  • Um encarte sobre o clube de fidelidade
  • Um cupom promocional que lhe fornece 2 caixas de cápsulas de cortesia pelo site oficial
  • A máquina Piccolo!

(Clique nas imagens para vê-las inteiras e maiores)

Como utilizar a Piccolo Nescafé Dolce Gusto

Basta colocar na tomada, encher o compartimento traseiro de água, apertar o botão de ligar, colocar a cápsula no compartimento, fechá-lo, e empurrar a alavanca pro lado correspondente a bebida (lado esquerdo/azul para bebidas frias e direito/vermelho para bebidas quentes).

Exemplo de uso em menos de 40s para fazer um Espresso Barista:

Exemplo de uso em menos de 40s para fazer um Nestea de Limão:

As vantagens da Nescafé Dolce Gusto

O que gostei:

  • É muito rápido e prático fazer as bebidas. Em menos de 1 minuto você pode ter um delicioso espresso ou um refrescante chá gelado, por exemplo. Para a máquina estar pronta para uso, é necessário aguardar apenas 10 segundos que o botão ficará verde e a água quente estará pronta para sair com pressão.
  • A máquina é pequena e é fácil de limpar; a base é removível e é possível desmontar a gradinha para limpá-la por dentro com facilidade.
  • O compartimento de água é grande o suficiente para fazer vários cafézinhos ou cerca de 3 chás gelados.

As desvantagens da Nescafé Dolce Gusto

O que não gostei:

  • O lixo que gera. Bebidas como Espresso são pequenas e individuais: para cada dose uma cápsula é necessária. A cápsula é composta de plástico e tem um pedaço de alumínio dentro muito difícil de remover ,e para ela ser reciclada é necessário separar as duas partes e limpar.
  • É caro. Uma caixa com 16 cápsulas custa entre ~R$18,00 e R$24,90 e muitas bebidas são ou de doses muito pequenas, ou compostas de 2 cápsulas (ou seja, a caixa de 16 cápsulas vai render apenas 8 doses e no pior dos casos cada dose vai sair ~R$ 3,12).
  • O compartimento de água tem abertura estreita o deixando difícil de limpar, o que é um grande problema pois as pequenas sobras de água acabam por formar musgo em sua base.

Reutilizando as cápsulas da Nescafé Dolce Gusto

É possível manualmente reutilizar as cápsulas, o que dá um trabalho que acaba por perder a maior vantagem que é a praticidade, na minha opinião. Segui as instruções deste vídeo e de fato funciona bem; é interessante para fazer suas próprias misturas!

Melhores sabores da Dolce Gusto

Minhas bebidas preferidas são, na ordem:

  1. Espresso Barista: Tradicionalmente recomenda-se que a dose possua 35ml, mas coloco cerca de 100ml e fica muito melhor (mais saboroso e cremoso) que Espresso Intenso, Lungo ou Espresso.
  2. Nestea Limão: Refrescante, cremoso, espumoso… melhor que o Nestea que se compra pronto e ótimo para dias quentes. Achei melhor que o de Nestea Pêssego que tem um gosto um pouco artificial.
  3. Chococino: Delicioso, cremoso, e não é doce demais. Ótimo para dias frios ou para relaxar à noite.

Sabores que não recomendo

  • Nescau: A porção é pequena (110ml) e achei que aguado e com gosto forte de adoçante. Se quiser um bom achocolatado, prefira pegar um Chococino.
  • Cappuccino e Latte Macchitato: Na prática o gosto dos dois sinto ser igual. É um café com leite com pouco sabor de café;  prefira pegar um Mocha, que contém cacau (ao contrário dos outros dois) ou o Café Au Laite que é uma cápsula só, embora numa porção menor de 180ml.

Clube de fidelidade Dolce Gusto e compra das cápsulas pelo site

Cada caixa de cápsulas vem com um código dentro. No site oficial https://www.nescafe-dolcegusto.com.br você pode se cadastrar e usar os códigos para ganhar pontos e trocá-los por recompensas como caixas de graça compradas no site (você paga somente pelo frete)! Para constar, todos os sabores podem ser visualizados e comprados aqui: https://www.nescafe-dolcegusto.com.br/flavours . Além do site, onde também é possível comprar cápsulas da Dolce Gusto é em mercados.

Devo comprar uma Nescafé Dolce Gusto?

Eu recomendo se o que você procura é praticidade. A vantagem da Dolce Gusto em relação a outras, é que ela tem opções de bebidas além do puro café. Se essa variedade é importante, pode ser a melhor escolha.

Há também a Nespresso (outra marca da Nestle), bem avaliada por ter uma grande variedade de grãos de café, além da praticidade de usar cápsulas. Gostaria de ter experimentado manipular uma para opinar e comparar, mas como não fiz isso, quem tiver e quiser pode fazer via comentários abaixo neste post!

Se você é um verdadeiro amante do café que pode abrir um pouco mão da praticidade para ter maior controle sobre a confecção e liberdade na escolha dos tipos e marcas, recomendo uma máquina manual como a Philips Saeco Poemia sobre a qual escrevi uma resenha aqui! Acaba sendo mais econômico a longo prazo, pois você poderá utilizar pó torrado e moído normalmente usado para o café coado.

Encontrei também este artigo muito útil que compara a Dolce Gusto, Nespresso e TRES: “Como escolher sua máquina de café em cápsulas?”. Vale a leitura antes de comprar uma!

Se quiser comprar a máquina Dolce Gusto melhor ainda, versão automática, clique aqui!

Opinião sobre o carro Citroën C3 Tendance 2014 1.5 Flex após mais de 1 ano de uso

Aqui vou dar minha opinião leiga, de mero usuário que presta atenção nos detalhes. Uma opinião bastante concisa de uma pessoa bem entendida de carro pode ser encontrada aqui: http://suzanecarvalho.blogosfera.uol.com.br/category/lancamento-2/page/4/, e o site oficial com detalhes do C3 é o seguinte: http://www.citroen.com.br/novo-c3

Utilizei o carro Citroën C3 Tendance 2014 1.5 Flex por 1 ano e 3 meses. Neste período:

O que gostei

  • Me acostumei tanto com o amplo para-brisa zenith que me sinto espremida quando estou em outro carro. Abrir e fechar a “cortina” dele é extremamente fácil e possível de se fazer sem desviar o olhar da frente, e enquanto dirige.
  • Ele é muito silencioso e estável em movimento, embora seja um carro um pouco alto (o que é bom para não ralar a parte inferior da frente).
  • Ele é econômico. O tanque comporta 55l e consigo fazer entre 10 e 12km/l na cidade e cerca de 14 ou 15km/l na estrada com gasolina.
  • O viva voz dele é funcional e ele e as caixas fornecem som de ótima qualidade. Pareei já 2 celulares via bluetooth e todos me ouvem muito bem, assim como ouço extremamente bem – ao contrário do que acontece quando falo com pessoas que estão no viva voz de outro carro (como experimentei no Ford New Fiesta 2014 e Honda Fit 2014).
  • O porta-luvas dele é enorme! Cabem bolsas grandes ali, junto com outras coisas menores (como caixa de óculos). Além disso, há possibilidade de abrir uma saída de ar condicionado específica para aquela área, para manter bebidas frescas, por exemplo
  • O controle do som auxiliar atrás do volante é bem prático. Sem desviar o olhar, você tateia e aperta para mudar de música, aumentar volume, ou trocar de CD para rádio ou USB…
  • O computador de bordo com informações de consumo e autonomia do tanque.
  • A embreagem é bem alta, parece que expulsa seu pé, assim como o freio também é bem alto e bastante sensível. Vejo vantagem nisso porque você precisa de menos esforço nas pernas no ato de apertar a embreagem e de freiar.
  • As marchas do câmbio encaixam bem e pessoalmente acho muito mais prático a ré ficar onde seria a 6ª marcha.
  • direção elétrica, que é extremamente leve em baixas velocidades.

O que não gostei

  • Me cortei 3 vezes em peças de plástico afiadas:
    • Uma foi no primeiro dia que peguei o carro, cortei o dedão nas bordas afiadas de plástico da cavidade onde tem o puxador para ajustar a altura do volante.
    • Outra foi entrando rapidamente e fechando a porta do carro, minha mão ralou no ponto de encaixe do plástico afiado do apoio interno da porta
    • A terceira vez também foi no mesmo local do apoio de braço interno da porta.
  • Não é possível ficar com o carro ligado sem farol aceso, pois ao desligar os faróis, os LEDs diurnos acendem automaticamente. Isso é muito ruim se você quiser que pareça que não tem ninguém no carro, e ao mesmo tempo tendo que estar com o carro ligado e engatado pronto para sair (por questões de segurança, quando se está esperando alguém em um local perigoso, por exemplo).
  • Com o tempo, começaram a ranger algumas peças de metais, provavelmente da base dos bancos
  • O farol de neblina traseiro possui apenas uma lâmpada!
  • Não tem gavetinha embaixo do banco :(
  • Parece que houve alguma intenção em colocar uma área útil para deixar objetos em cima do painel e embaixo do som, mas nada do que se coloque ali fica depois da primeira curva.
  • Senti falta de um porta copo próximo do motorista (por isso derramei café, água, milkshake, refrigerante… toda vez que tentei colocar na cavidade atrás do freio de mão). Existe uma base que fica no lado interno da tampa do porta-luvas, mas não é próximo suficiente nem prático de uso para quem está dirigindo.
  • É difícil dar buzinas rápidas, porque ela só é acionada se você mantê-la pressionada. Se você bater no volante, não sai som.
  • E por que não constar que é irritante o fato de o limpador de para-brisa não alcançar todo o topo dele? rs. Na verdade, o irritante mesmo é que SEMPRE depois que jogamos água e ligamos o limpador, quando ele termina e está quase completamente seco, escorre um fio de água do topo até embaixo no MEIO do para-brisa. Isso porque quando a palheta está no seu ponto mais alto, ela leva e deixa um pequeno acúmulo de água em cima que acaba por escorrer exatamente logo depois que o vidro está praticamente seco! :D

Comparação com o Volkswagen Polo Hatch 1.6 Flex 2008

Anteriormente eu dirigia um Volkswagen Polo Hatch 1.6 Flex 2008. Naturalmente, trocando de carro não tive como deixar de compará-los embora sejam de categorias diferentes. Como o C3 é o carro de entrada da Citroën, não é difícil dizer que os seguintes pontos perdem pro antigo Polo:

  • O Polo é um carro mais sofisticado e de melhor qualidade de material da cabina (ele é todo mais “macio”, você sente desde o acolchoado do banco até o tipo de plástico em todo ele, além do acabamento sem pontas afiadas :p).
  • O som do Polo consegue ser ainda melhor que o do C3, embora não tivesse viva voz (estou comparando com o modelo de 2008 que dirigia)
  • Tem gaveta embaixo do banco, porta copo e porta trecos mais eficientes e seguros
  • Mesmo após 5 anos de uso o Polo não apresentou barulhos de metais rangendo :p
  • O Polo 1.6 é mais potente (responde mais rápido à aceleração), o que é esperado, pois o C3 de comparação é 1.5.
  • O Polo Hatch ocupa menos espaço (pra mim isso é uma qualidade)! Achei incrível, mas o C3 é todo maiorzinho (mais largo, comprido e alto).
  • As marchas do câmbio do Polo encaixam ainda melhor.

 

Tivoli Ecoresidences Praia do Forte – Site Responsivo

O projeto consistiu em a criação de um novo site, pois o antigo possuía apenas versão desktop e muita seções, sem muita clareza e resultado no principal objetivo que é a venda das casas do Tivoli Ecoresidences, em Praia do Forte/BA.

Meu trabalho consistiu em:

  • Planejamento: mapear os problemas do antigo site e propor um novo site, também com uma nova arquitetura de informação. Fui responsável pela confecção do escopo detalhado do projeto e definição de estratégias para que o site passasse a cumprir seu objetivo. Um dos levantamentos foi que ~10% dos visitantes eram estrangeiros, por isso propomos e fizemos um novo site bilíngue.
  • Gerenciamento: garantir o cumprimento do cronograma, das estratégias levantadas no planejamento, intermediação e controle de qualidade nas etapas de layout e programação.
  • Programação: Participei do desenvolvimento front-end do site, trabalhando em paralelo a outro programador com o uso da ferramenta de versionamento GIT. Trabalhei com Bootstrap, HTML e CSS.

Acesse o site no seu smartphone, tablet e computador e veja como ele se comporta (por possuir responsive webdesign): http://tivoliecoresidencespraiadoforte.com

[Resolvido] Erro de tela preta no Windows 8.1 após Windows Update

Por que o erro ocorre

O problema da tela preta é incompatibilidade do Sistema Operacional Windows 8 e 8.1 com o hardware. Mesmo que a placa mãe tenha uma BIOS atualizada para o SO Windows 8, o problema irá persistir.

Como o erro surge

Este erro aconteceu comigo após:

  1. Baixar e instalar os drivers das placas de vídeo onboard e offboard, da Intel e AMD respectivamente no site de download de drivers da Dell (pois meu notebook é de lá – um Dell Inspiron 15R 5537)
  2. Aceitar a instalação do seguinte item no Windows Update:

Intel Corporation – Graphics Adapter WDDM1.1, Graphics Adapter WDDM1.2, Graphics Adapter WDDM1.3 – Intel(R) HD Graphics Family

Tamanho do download: 99,6 MB

Talvez você precise reiniciar o computador para que a atualização entre em vigor.

Tipo de atualização: Importante

Intel Corporation Graphics Adapter WDDM1.1, Graphics Adapter WDDM1.2, Graphics Adapter WDDM1.3 software update released in January, 2014

Mais informações: http://sysdev.microsoft.com/support/default.aspx

Ajuda e Suporte: http://support.microsoft.com/select/?target=hub

Como resolver o erro da tela preta no Windows 8 e 8.1

Se aconteceu o mesmo problema após os passos acima, ou se o erro que você está tendo é o mesmo da tela preta, você pode experimentar o seguinte para resolver o problema:

Opção A)

Uma opção de resolver é desativar a Inicialização rápida. Esse recurso na realidade é um Hibernar disfarçado, pois se você observar o tempo em que a máquina está ligada no gerenciador de dispositivo, estará lá um somatório de uma mesma sessão que nunca finalizou. Este tempo só resetará se você reiniciar o Windows 8, ou desligar ele de forma errada. Portanto, para evitar a tela preta, vá em:

  1. Painel de Controle > Opções de Energia > Exibir senha ao despertar
  2. …e desativar a opção “Ligar inicialização rápida”.

Agradecimentos a Claiton que forneceu essas informações via comentário nesta publicação!

Caso não funcione, veja os passos a seguir:

Opção B)

  1. Desligar o computador/notebook (tirando da tomada, removendo a bateria e recolocando-a, para impedir que ele inicie no modo rápido)
  2. Ligar e imediatamente ficar pressionando repetidamente a tecla F8 (em alguns casos, SHIFT+F8) para entrar nas Opções avançadas do Windows 8 e 8.1 (que permite selecionarmos entrada pelo Modo de Segurança, o que queremos). Atenção: Caso não entre neste modo da primeira vez, repita os passos 1 e 2 algumas vezes. A inicialização é tão rápida que pode não dar tempo de o sistema receber o comando F8 antes da inicialização, conforme a própria Microsoft alega.
  3. Na tela de Opções avançadas, clique em Configurações de Inicialização conforme imagem abaixo. Em seguida, ele pedirá para que escolha se deverá ativar Modo de Segurança com rede ou não, além de outras opções e, após escolher, será necessário reinicializar o computador.
  4. O Windows 8.1. inicializará pelo Modo de Segurança, o que significa que você conseguirá visualizar a tela (pois os drivers não estarão sendo carregados). Abra o Painel de Controle e clique em “Desinstalar um programa“. Procure na lista de programas o item instalado mais recente (Clique em “Instalado em” para filtrar) e selecione o  programa gráfico da Intel instalado por último. Desinstale.
  5. Reinicie o computador. Entrando no modo normal, agora a tela deverá funcionar normalmente!

Opção C)

  1. Quando abrir a tela preta, pressione “Ctrl + Alt + Delete” e clique em “Gerenciador de Tarefas”;
  2. Depois você ira na aba “Arquivo” -> “Executar nova Tarefa”
  3. Digite rstrui.exe que irá abrir a “Restauração do Sistema”.
  4. A partir dai basta seguir os passos para restaurar um ponto antes da tela preta.
  5. O computador irá reiniciar e abrir o Windows normalmente.

Agradecimentos a Juelson Oliveira que forneceu essas informações via comentário nesta publicação!

Cada caso pode ser diferente e você pode repetir os passos e desinstalar diferentes drivers de vídeos, como o da AMD ou outro (a depender da sua máquina), ou logo todos de uma vez.

Após esses passos, recomendo buscar informações detalhadas sobre sua placa de vídeo e sua compatibilidade com o Windows 8/8.1 – inclusive com ajuda do suporte técnico do seu notebook/computador para receber orientações do modelo correto do driver de vídeo para instalar.

Prevenindo que o erro da tela preta retorne

De acordo com relatos, infelizmente mesmo que o download das atualizações do driver seja feito no site do fabricante ao invés do Windows Update, o erro acontecerá do mesmo jeito. Então, a melhor forma que conheci de prevenir consiste em não atualizar os drivers de vídeo no Windows 8.1.

Tenho conhecimento de 2 formas de prevenir que o erro retorne sozinho e ambas consistem em configurarmos para que o Windows Update não instale as atualizações do driver de vídeo automaticamente. Para fazer isso:

Opção A)

  1. Entre no Painel de Controle\Hardware e Sons\Dispositivos e Impressoras
  2. Com o botão direito, clique no ícone que representa o seu computador
  3. Selecione a opção “Configurações de instalação do dispositivo”
  4. Selecione a opção “Não, deixe-me escolher o que fazer” e logo em seguida na opção “Nunca instalar o software do driver usando Windows Update”.
Lembre de clicar em “Salvar Alterações”. Agradecimentos à Allan de Souza pela informação.

 

OU

Opção B)

  1. Vá em Painel de Controle\Sistema e Segurança\Windows Update\Alterar configurações
  2. Configure para “Procurar atualizações, mas permitir que eu escolha quando baixá-las e instalá-las”. Dessa forma, o Windows não vai instalar as atualizações sem sua confirmação, então você poderá revisar e desmarcar o driver de vídeo caso ele o inclua na lista.
Clique em “OK” após mudar o campo “Atualizações importantes”.

 

Caso essas informações tenham te ajudado, compartilhe/comente! Caso não, deixe seu comentário mais abaixo para que possamos tentar ajudar.

Fontes:

 

[Resolvido] Erro: Você enviou um APK com um certificado que ainda não é válido.

Você precisa enviar o APK ao Google Play pra publicar seu aplicativo pelo Developer Console, mas recebe a seguinte mensagem:

O envio falhou

Você enviou um APK com um certificado que ainda não é válido. Assine seu APK com um certificado atualmente válido. Saiba mais sobre como assinar.

Pesquisou e ainda não sabe o motivo? Mesmo sem saber o motivo é possível solucionar. Aparentemente algum bug ou demora do Developer Console que pode ser solucionado mudando a data do sistema do seu computador! Faça o seguinte e resolva em 3 passos:

  1. Troque a data do sistema do seu computador para 2 dias atrás.
  2. Crie uma nova keystore
  3. Gere um novo APK e reenvie pelo Developer Console.

Por algum motivo, isso parece funcionar entre várias pessoas que sofrem com este problema! Inclusive foi o que resolveu com um projeto em que estive envolvida. Alguns relatos dizem que o problema solucionou sozinho aguardando várias horas.

Fonte: APK signed with a certificate that is not yet valid (stackoverflow)

Qual será o endereço do meu aplicativo no Google Play?

Após publicarmos um app pelo Developer Console, pode demorar cerca de 3h para que ele apareça nas buscas no site do Google Play.

Para saber qual será o endereço do aplicativo no Google Play antes dele estar visível na loja, siga o modelo abaixo:

https://play.google.com/store/apps/details?id=PACKAGE.DO.APP

Trocando o “PACKAGE.DO.APP” pelo package do seu aplicativo.

Por exemplo:

https://play.google.com/store/apps/details?id=com.unifacs

Veja também: Qual o package do meu aplicativo no Google Play?

Qual o package do meu aplicativo no Google Play?

A informação do package pode ser muito útil caso  queira saber qual será o endereço do seu aplicativo Android no Google Play.

Como saber qual o package do meu aplicativo?

  1. Entre no Developer Console
  2. Clique em “Todos Aplicativos”
  3. Clique no aplicativo que deseja saber o endereço do Google Play
  4. No topo da página, ao lado direito do título, estará escrito o package do o seu app, conforme imagem abaixo:

Veja também: Qual será o endereço do meu aplicativo Android no Google Play?

Converter arquivo CDR para SVG, AI, PDF e mais

Previamente postei como Abrir arquivo CDR sem Corel e SVG, EPS, AI, PDF sem Illustrator, dando a dica do programa Inkscape.

Há outra opção, que é apenas um conversor (que inclusive é usado pelo Inkscape e também pelo Scribus): O UniConvertor.

O UniConvertor é um tradutor de vetores gráficos universal. Ele é uma ferramenta de linha de comando que usa sK1 para converter um formato em outro.

Instalando o UniConvertor você poderá executá-lo para converter um arquivo…

…ou selecionar a conversão direto de um menu contextual no Windows Explorer:

UniConvertor é gratuito, open-source e tem versões para Windows, Linux e Mac.

Abaixo, detalhamento dos formatos suportados para importação e exportação:

Filtros de importação: Filtros de exportação:
  • CorelDRAW ver.7-X3,X4 (CDR/CDT/CCX/CDRX/CMX)
  • Adobe Illustrator up to 9 ver. (AI postscript based)
  • Postscript (PS)
  • Encapsulated Postscript (EPS)
  • Computer Graphics Metafile (CGM)
  • Windows Metafile (WMF)
  • XFIG
  • Scalable Vector Graphics (SVG)
  • Skencil/Sketch/sK1 (SK and SK1)
  • Acorn Draw (AFF)
  • AI (Postscript based Adobe Illustrator 5.0 format)
  • SVG (Scalable Vector Graphics)
  • SK (Sketch/Skencil format)
  • SK1 (sK1 format)
  • CGM (Computer Graphics Metafile)
  • WMF (Windows Metafile)
  • PDF (Portable Document Format)
  • PS (PostScript)

Faça o download gratuito do UniConvertor!

Abrir arquivo CDR sem Corel e SVG, EPS, AI, PDF sem Illustrator

O Inkscape é uma boa opção para quando precisamos abrir arquivos vetoriais como SVG, EPS, AI, CDR, PDF e não podemos ter o Corel Draw ou Adobe Illustrator, que são programas vetoriais pagos.

O Inkscape é um programa open-source gratuito que tem apenas 33mb. Ele abre/salva/exporta em inúmeros formatos de arquivos vetoriais.

Veja também:

Como abrir EPS no Inkscape

Como o suporte ao EPS não é nativo no Inkscape, para abrir arquivos EPS nele no Windows, é necessário instalar um plugin adicional: o ghostscript.  Ele converte o EPS para PDF, para que se torne compatível.

Aqui tem instruções de como habilitá-lo (tutorial em inglês, mas bem ilustrado com screenshots): http://clownfishcafe.blogspot.com.br/2014/05/importing-eps-files-into-inkscape.html

Designer, se você quiser agilizar o seu trabalho e ganhar mais em menos tempo, você pode adquirir  800.000 arquivos editáveis, pre sets, PSDs, vetores etc e modelos prontos para facilitar? Clique aqui e conheça esse kit definitivo feito de outro designer para você!

Inkscape em Português!

Inicialmente ao executar o instalador, é pedido que seja escolhida um dentre poucos idiomas disponíveis. Não terá português, mas na tela seguinte aparecerá uma lista de itens que deseja instalar. Em “translations” selecione “Brazilian Portuguese“!

Mesmo gratuito, o Inkscape é um programa com opções vetoriais avançadas.

Não funcionou?

Veja se o UniConvertor pode te ajudar; clique aqui e veja como usá-lo no post: “Converter arquivo CDR para SVG, AI, PDF e mais”.

Diferença entre Aplicativos Nativos, Híbridos e Mobile Web Apps

Aplicativos Nativos

Lojas mais populares da atualidade onde baixam-se aplicativos para tablets e smartphones.

Os aplicativos nativos residem no dispositivo smartphone/tablet e podem ser acessados através de ícones na tela principal. Eles são instalados através de um aplicativo de loja (como Google Play do Android e App Store da Apple). Sendo desenvolvidos especificamente para tal plataforma, podem aproveitar todas as funcionalidades do sistema operacional do dispositivo, como: câmera, GPS, acelerômetro, bússola, lista de contatos etc. Também é possível aproveitar uso de gestos, sistemas de notificação nativos do sistema operacional e funcionar sem conexão com a internet caso o conteúdo esteja embarcado.

Mobile Web Apps

Web apps não são aplicativos rais. Na realidade são sites que, de diversas formas, parecem com um aplicativo nativo. Eles são executados através de um navegador e tipicamente escritos em HTML5. Os usuários o acessam inicialmente como fariam com um site: eles acessam determinada URL e tem a opção de “instala-lo” na tela principal do seu dispositivo criando um atalho para aquela página.

São acessíveis funcionalidades semelhantes a um aplicativo nativo, como:

  • esconder botões do navegador
  • gestos de navegação
  • com o cache do navegador, visualiza-lo offline
  • usar GPS
  • link para ligação direta

Recursos ainda inacessíveis através de um navegador (web app):

  • uso de notificações do sistema operacional
  • execução em segundo plano
  • informações do acelerômetro (além de detectar orientação vertical ou horizontal)
  • gestos complexos.
adicionando página web à tela inicial do Android.
Adicionar uma página à tela inicial permite inclusive personalizar o ícone no iOS

Aplicativos Híbridos

Os aplicativos híbridos são parcialmente nativos e parcialmente web apps. Como os nativos, eles devem ser baixados através de um aplicativo de loja (como Google Play do Android e App Store da Apple), ficam armazenados na tela principal do dispositivo e podem aproveitar todas as funcionalidades do dispositivo (câmera, GPS, acelerômetro, gestos etc). Como web apps, eles podem ser baseados em HTML5 e exibidos através de um navegador embutido no aplicativo, tendo parte ou conteúdo total carregado da web.

Os aplicativos híbridos são populares porque permite desenvolvimento multiplataforma, utilizando o mesmo HTML para diferentes sistemas operacionais – como através de ferramentas como CordovaPhoneGap e Sencha Touch permitem, inclusive compilando para o formato nativo -, reduzindo custos de produção.

 

Aplicativo Nativo, Web App, ou Híbrido: Qual escolher?

Cada um tem suas vantagens e desvantagens:

Funcionalidades do dispositivo: Embora web apps possam aproveitar várias funcionalidades, existe uma enorme gama de ferramentas específicas do dispositivo e sistema operacional disponíveis apenas para aplicativos residentes (aplicativo nativo ou híbrido).

Funcionamento offline: Um aplicativo nativo é melhor se for necessário funcionar sem internet. Cache no navegador é possível no HTML5, mas ainda é limitado comparado ao nativo.

Descoberta: Web aplicativos são mais facilmente descobertos, pois o conteúdo está simultaneamente na web. Dessa forma, quando um usuário usa um sistema de busca procurando uma informação específica, pode encontrar a resposta no web app facilmente (a maioria dos usuários preferem não ter que instalar e manter aplicativos que não usem com muita frequência).

Velocidade: Aplicativos nativos são mais rápidos por terem acesso direto ao sistema operacional e serem programados específicos na linguagem nativa do dispositivo.

Instalação: a maioria dos usuários não gosta de instalar aplicativos. Entretanto, mesmo que adicionar um uma página da web à tela de início seja mais simples, é um processo menos familiar ainda aos usuários.

Manuntenção: A manutenção de aplicativos nativos pode ser complicada não apenas para os usuários (que deverão ficar atentos às atualizações) mas principalmente para desenvolvedores, principalmente quando precisam dar suporte à diferentes plataformas: as mudanças devem ser enviadas a cada loja. Enquanto isso, web apps  e híbridos podem ser atualizados com a frequência necessário, como uma página na internet.

Independência da plataforma: Enquanto diferentes navegadores devem prestar suporte a diferentes versões do HTML5, se independência da plataforma é importante é melhor optar por aplicativos híbridos e web apps, pois pelo menos parte do código pode ser reutilizada.

Restrição de conteúdo, processo de aprovação e taxas. No momento em que é desenvolvido um aplicativo nativo ou híbrido, é necessário enviá-lo à loja que tem seus próprios termos de uso ao qual o aplicativo será submetido. Na App Store da Apple é necessário passar por teste de qualidade antes da publicação. Em contrapartida, a web é facilmente acessível para publicação.

Custo de desenvolvimento: É muito mais barato desenvolver web apps e aplicativos híbridos, pois eles requerem conhecimento em linguagens web que pode ter sido previamente obtido e ainda ser usado para diferentes plataformas. Desenvolvendo um aplicativo nativo exige conhecimentos de uma linguagem específica.

Interface do usuário: Se uma de suas prioridades for prover uma experiência consistente ao sistema operacional e aos outros aplicativos da plataforma, então dê preferência ao aplicativo nativo. Isso não significa que não seja possível realizar um bom aplicativo sendo ele web app ou aplicativo híbrido, mas o visual e experiência não será a mesmo que a que os usuários estão acostumados.

Resumidamente, cada caso pede uma solução específica. Baseado nos critérios acima cabe ao desenvolvedor avaliar qual aplicativo atende o projeto da melhor forma.

Fonte: Traduzido e adaptado do artigo Mobile: Native Apps, Web Apps, and Hybrid Apps (Nielsen Norman Group)

App EasyFit no Startup Weekend Salvador 2013

Criação de identidade visual e interface gráfica da ideia do aplicativo mobile EasyFit que propõe pay-per-use em academias de diferentes cidades.

Produção gráfica:

Conteúdo todo desenvolvido no Sábado e Domingo (14 e 15/09/2013) no evento #swssa

Redes sociais do EasyFit:

Código CSS3 direto das layers do Photoshop com CSS Hat

Quem possui Adobe Photoshop CS4, CS5 ou CS6 e trabalha com desenvolvimento web, vai adorar a extensão CSS Hat, que aumenta muito a produtividade. O CSS Hat é uma extensão para Photoshop que adiciona uma janela com ferramentas que gera código CSS e CSS3 automaticamente a partir dos efeitos nas layers. Gradiente, opacidade, sombra, fonte, cor, alinhamento etc, tudo é gerado em código sem que precisemos identifica-los manualmente.

Além do CSS, o CSS Hat também gera código para LESS, SCSS e SASS.

O rápido vídeo oficial demonstra a instalação e uso:

Atualmente o CSS Hat pode ser comprado por US$ 29.99, dando direito a uma licença de instalação para um Windows e uma para Mac OS. Um valor que certamente será compensado com a agilidade na programação que ele proporciona. Adquiri e recomendo!

Prévia em miniatura de arquivos PSD, AI, PDF, EPS, TGA etc no Windows Explorer

Uma das vantagens que encontramos no MAC OS e  faz falta ao usarmos o Windows é a possibilidade de visualizar a prévia de arquivos PSD, AI, PDF, EPS, TGA etc sem precisar abri-los.

Marca

É possível visualizar a prévia desses formatos de arquivos em miniaturas no Windows Explorer (gerenciador de arquivos) usando o programa desenvolvido no Google Code: SageThumbs.

Após instalado, o programa automaticamente irá fazer o Windows Explorer permitir a visualização de arquivos PSD, AI, PDF, EPS, TGA etc como imagem miniatura do arquivo, ao invés de mostrar o ícone do programa usado para abri-los.

Além disso, ele adiciona opções do contexto do menu direito que permitem gerar automaticamente imagens JPG, PNG, GIF ou BMP dos arquivos PSD, AI, PDF, EPS, TGA etc sem abri-los!

Ei, designer! Você quer agilizar o trabalho e ganhar mais com o seu trabalho e ter 800.000 arquivos editáveis, pre sets, PSDs, vetores etc e modelos prontos para criar mais e melhor? Clique aqui e conheça um kit completo para você!

Uma ferramenta essencial para quem utiliza Windows e tem uma biblioteca de arquivos e templates nesses formatos!

Fazer download do SageThumbs na página oficial.

Opacidade / transparência em imagem e texto com CSS3

Para colocarmos transparência em um elemento na web, seja texto ou imagem, basta usarmos o seguinte código de CSS3 (no exemplo aplicará transparência de 65%):

.transparente {
opacity:0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);
}

  • opacity é o código oficial,
  • -moz-opacity para compatibilidade com o navegador Mozilla Firefox
  • filter para versões antigas do Internet Explorer.

Agora basta atribuirmos a classe “transparente” ao elemento que gostaríamos de adicionar a transparência.