Design responsivo

Escrito por Matheus Piscioneri. Em Css, Html

Conversar com especialistas às vezes pode ser enervante. Você até sabe o que está querendo fazer, mas não sabe dar nome aos bois e acaba chamando as coisas pelos nomes errados, ou não compreende completamente o conceito que querem lhe passar.

Também é assim na conversa com designers. Você quer um design que fique bem no smartphone, mas que também não fique esquisito no mobile. Como explicar isso?

E se, de repente, bem no meio do projeto você reparou que as imagens estão ficando pixeladas demais, ou que estão ficando esticadas quando você abre o site em determinada plataforma, como solicitar uma correção?

Para minimizar esse problema de comunicação com designers, a Froont, uma empresa especializada em ferramentas que ajudam a criar sites responsivos, criou essa ótima série de GIFs animados que explicam alguns conceitos de design de sites, como a diferença entre responsivo e adaptativo, uso de breakpoints, elementos agrupados, configurações de largura máxima e até a vantagem do uso de vetores em relação a imagens.

3038367-inline-i-1-9-gifs-that-explain-responsive-design-brilliantly-01responsive-vs-adaptive-copy     3038367-inline-i-2-9-gifs-that-explain-responsive-design-brilliantly-02relative-units-vs-static-units-1-copy     3038367-inline-i-4-9-gifs-that-explain-responsive-design-brilliantly-04flow-vs-static-2-copy     3038367-inline-i-3-9-gifs-that-explain-responsive-design-brilliantly-03with-breakpoints-vs-without-breakpoints-1-co    

Para quem entende pouco do assunto, vale conferir para compreender um mínimo. Para os especialistas, vale salvar alguns desses GIFs para usar como explicação quando algum cliente ou colega estiver mais confuso. A explicação detalhada de cada um dos conceitos pode ser conferida no site da Froont.

3038367-inline-i-5-9-gifs-that-explain-responsive-design-brilliantly-05nested-vs-not-nested-1-copy     3038367-inline-i-7-9-gifs-that-explain-responsive-design-brilliantly-07max-width-vx-no-max-width-1-copy     3038367-inline-i-8-9-gifs-that-explain-responsive-design-brilliantly-08desktop-first-vs-mobile-first-3-copy     3038367-inline-i-9-9-gifs-that-explain-responsive-design-brilliantly-09vectors-vs-images-1-copy     06_System-fonts-vs-Webfonts-1       Fonte: www.brainstorm9.com.br

CSS Reset

Escrito por Matheus Piscioneri. Em Css

Por padrão, todos os elementos HTML possuem um estilo incorporado, e isso varia de Browser para Browser, não existe um padrão. Com isso você pode passar por vários problemas ao tentar implementar um layout em HTML e CSS e testar em outros browsers como o Internet Explorer ou Safari… Alguns elementos não se comportam da mesma forma, mesmo que esse comportamento não tenha sido definido/sobrescrito por você… por exemplo o H1, H2 e H3… Eles têm tamanhos diferentes em cada browser, mesmo usando a mesma fonte eles vão aparecer – se você não definir esse tamanho – com tamanhos diferentes.

 

O que é?

O CSS Reset é – basicamente – um arquivo que “limpa” os estilos padrões de todos os elementos HTML que já possuem uma formatação padrão. Ele tira cores, tamanhos de fonte,margins, paddins, efeitos e decorações… Quase tudo de quase todos os elementos vira “padrão”, como um texto sem formatação/alteração nenhuma.

 

Como usar?

Da forma mais simples do mundo: inserindo o arquivo no seu site como um CSS normal, antes de qualquer outro CSS que seu site usar.

Se você inserir em um site pronto você pode ver seu site se desfigurar todo, isso vai significar que você se baseou em estilos padrões de alguns elementos, o que é errado… Já que esse estilo pode mudar entre navegadores/futuras versões.

É altamente recomendável que você insira/use esse arquivo sempre que for começar a implementar um site.

 

E como é esse arquivo?

Existem vários CSS Reset rolando pela Internet… Todos funcionam da mesma forma mas alguns atingem mais elementos que outros… Mas teoricamente não há diferença.

Existe um CSS da Yahoo mesmo, chamado de YUI CSS Reset:

http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css

   

E existe um CSS Reset Reloaded criado por Eric Meyer:

 
 css
   

Fonte: www.blog.thiagobelem.net

Palestra – Como desenvolver e publicar aplicativos em Android no Google Play – Matheus Piscioneri

Escrito por Matheus Piscioneri. Em Android, Cursos, Diversos

No dia 11/11/2014, apresentei uma palestra sobre “Como desenvolver e publicar aplicativos em Android no Google Play” na Faculdade Barretos. Confira abaixo o slide com o conteúdo que foi apresentado!  

Palestra – Como desenvolver e publicar aplicativos em Android no Google Play – Matheus Piscioneri

Dicas para criar publicações mais envolventes no Facebook

Escrito por Matheus Piscioneri. Em Diversos

Crie publicações de Página excelentes para aumentar o envolvimento e melhorar suas chances de aparecer no Feed de notícias.  

 

Use links em suas publicações para direcionar pessoas para o seu site

Os links em publicações agora têm uma área clicável ampla que ajuda a direcionar pessoas para o seu site.
  • Na ferramenta de compartilhamento de sua Página, digite a URL e pressione a tecla Enter
  • O título, a descrição e a imagem são tiradas da sua URL, mas você pode personalizar o texto e a imagem da publicação
  • Aumentamos o tamanho da imagem para publicações desse tipo, por isso, selecione imagens atraentes que combinem com a experiência do Feed de notícias
 

Use texto, imagens e vídeos envolventes

  • Mídias avançadas, como fotos e vídeos, chamam mais atenção e ajudam sua mensagem a se destacar no Feed de notícias
  • Imagens de estilo de vida, como as imagens de seus amigos no Facebook, são sempre envolventes. Tente compartilhar imagens de seus produtos ou fotos de seus clientes desfrutando de seus serviços
  • Tente manter suas publicações entre 100 e 250 caracteres para obter maior engajamento. Publicações sucintas e mais curtas são mais bem recebidas
 

Crie um diálogo interativo

  • Peça para seu público compartilhar ideias e comentários sobre seus produtos e serviços. Essa é mais uma forma de ouvir seus clientes e aprimorar seus negócios
  • Publicar conteúdo mostrando que você levou os comentários em consideração pode gerar a fidelização do cliente e mostrar que você valoriza suas ideias
 

Compartilhe descontos e promoções exclusivas

  • Ofereça promoções ou vantagens especiais a seus clientes para mantê-los interessados e gerar vendas on-line. Inclua chamadas para ação com links para a página mais relevante em seu site.
  • Para melhorar o envolvimento com suas promoções, inclua chamadas para ação claras, detalhes sobre reembolso e quando a promoção termina para criar uma noção de urgência.
 

Dê acesso a informações exclusivas

  • Recompense as pessoas que estão conectadas à sua Página e promova a lealdade e as vendas on-line fornecendo-lhes informações exclusivas. Faça com que elas se sintam especiais através do compartilhamento de notícias sobre produtos, concursos e eventos exclusivos.
 

Seja consistente

  • Seu público terá mais probabilidade de se envolver com as publicações quando estas estiverem relacionadas a assuntos em destaque, como eventos atuais ou feriados
  • Também é importante ser oportuno ao responder aos comentários em suas publicações. Quanto mais rápido você responder, mais propensos os fãs serão a se envolver com você no futuro.
 

Planeje seu calendário de conversas

  • A maneira mais fácil de manter o contato com os fãs regularmente é por meio da criação de um calendário de conversas com ideias sobre o que falar a cada semana ou mês
  • Um calendário de conteúdo não só ajudará você a publicar regularmente, mas garantirá também que seu conteúdo seja bem planejado e interessante e que você não perca eventos empresariais e notícias importantes. Encontre a frequência que funciona para você e seu público.
 

Programe suas publicações

  • Para gerenciar melhor seu tempo, você pode programar suas publicações com antecedência e planejar os próximos eventos e promoções de feriados
  • Para programar suas publicações, basta clicar no ícone do relógio no canto inferior esquerdo da ferramenta de compartilhamento em sua Página
  • Programe suas publicações para quando a maioria de seus fãs estiver on-line. Você pode descobrir quando seus fãs estão on-line visitando as Informações da Página e acessando a guia de publicações
  • Depois de programar uma publicação, você pode gerenciar suas publicações agendadas acessando o topo da página, escolhendo Editar página e selecionando Usar o registro de atividades
 

Direcione suas publicações

  • Se suas publicações são destinadas a grupos específicos de pessoas, você pode direcionar sua publicação na ferramenta de compartilhamento em sua Página, clicando no ícone de alvo no canto inferior esquerdo e selecionando Adicionar direcionamento. Você pode direcionar sua publicação com base no sexo, estado civil, escolaridade, interesses, idade, localização e idioma.
 

Analise o desempenho de suas publicações

  • Verifique as Informações da Página regularmente para entender o que está funcionando e manter suas publicações relevantes e envolventes. As Informações da Página ajudarão você a entender seu público e que tipos de conteúdos interessam a ele.
  Dicas para criar publicações mais envolventes no Facebook  

 

 

Fonte: www.facebook.com

Âncora animada com jQuery

Escrito por Matheus Piscioneri. Em Html, Javascript, JQuery

Aqui está um pequeno truque para Âncora animada com jQuery em seus links internos, fazendo-os rolar suavemente para seu destino ao invés de saltar instantaneamente.

Muitos sites têm utilizado o recurso de rolagem suave com jQuery. O código é bem simples e o efeito, sofisticado.

 

O código para rolagem é o seguinte:

Para alterar a velocidade do scroll, é só modificar o número 800.

Depois, é só definir seus links de âncora com a classe “scroll” e não esquecer de que o destino deve ter a id igual ao link.

Âncora animada com jQuery   Fonte: www.lubielinski.com.br

“As mentes são como paraquedas: só funcionam se estiverem abertas.” - Ruth Noller