Datepicker Bootstrap

Escrito por Matheus Piscioneri. Em Css, Html, Javascript, JQuery

Você que precisa exibir calendários em formulários saiba que o Bootstrap possui um plugin específico, Datepicker Bootstrap, que adiciona a função de apresentar um calendário ao input em qualquer navegador.

 

Introdução

O Datepicker Bootstrap é um daquelas plugins bem úteis que apenas tomamos conhecimento quando precisamos utilizar. A função deste plugin é adicionar a um elemento HTML a função de apresentar um calendário para o usuário escolher uma data, muito útil para formulários que solicitam este tipo de informação em formato padrão para o usuário, dando a possibilidade dele escolher a data ao invés de digitar a mesma.

 

Links para referência do Datepicker: GitHub Documentação Demo & Gerador de Código

 

Como utilizar

A utilização do Datepicker é muito simples, primeiramente precisamos incluir os arquivos de referência do plugin, conforme o exemplo abaixo.

 

Neste bloco foram declarados os arquivos de configuração de estilo do Bootstrap e o arquivo de estilo do plugin.

O próximo passo é declarar os elementos que vão compor o layout que vai alojar o elemento <input>, que será o responsável por apresentar o calendário no clicar do usuário.

 

Feito isso, se os arquivos de referência do plugin estiverem no local especificado, ao clicar no campo será apresentado, abaixo do mesmo, um calendário para escolha da data, conforme imagem abaixo.

Datepicker Bootstrap - Exemplo - Web Social Dev

Além desta simples inclusão, o plugin também conta com opções para estilizar o calendário apresentado. Essas opções são parâmetros declarados na função que executa o plugin. No nosso exemplo, no bloco de código onde é declarado o script que chama a função do Datepicker foram atribuidas as seguintes opções:format e language, a primeira para determinar o formato que será inserida a data após a escolha no calendário e a segunda a linguagem do calendário.

Dentre as opções disponíveis para configurar o calendário, as mais interessantes são:

  • Language – definir linguagem do calendário.
  • startDate – definir data de inicio do calendário.
  • endDate – definir data de fim do calendário.
  • autoclose – definir se calendário fecha ou não após inclusão de data.
  • forceParse – auto ajustar formato de data quando o mesmo não é inserido no padrão do campo.
  • format – definir o formato de exibição da data. Default: “mm/dd/yyyy”
  • minViewMode – definir um limite para o calendário, se o mesmo vai apresentar apenas dias, meses ou anos.
  • startView – defini data apresentada no calendário quando o mesmo é executado.
  • todayHighlight – marcação em data atual.
  • weekStart – Definir inicio da semana, 0 para domingo e 6 para segunda.

Algumas opções possuem parâmetros específicos, necessário confirmar na documentação os parâmetros para obter os resultados esperados.

Você pode incluir as opções dentro da função que chama o datepicker, conforme o exemplo abaixo:

 

Tirando algumas dúvidas sobre jQuery, antes de postar o tutorial, encontrei uma solução similar utilizando apenas a biblioteca jQuery UI, segue abaixo o código para utilização.

  Bom galera, é isso!   Fonte: www.websocialdev.com

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

“Seu tempo é limitado, então não o desperdice vivendo a vida de outra pessoa. Não deixe que a opinião dos outros cale a sua voz interior.” - Steve Jobs