INFO divulga o aplicativo Calculadora de Bebida

Escrito por Matheus Piscioneri. Em Android, Diversos

A INFO divulgou meu aplicativo Calculadora de Bebida no Facebook e site deles.

Calculadora de Bebida é um aplicativo desenvolvido pelo brasileiro Matheus Piscioneri que busca ajudar o usuário a descobrir qual a opção mais econômica na hora de comprar cervejas ou refrigerantes no mercado.

O aplicativo está disponível apenas para o sistema Android e, além de ser muito fácil de usar, também funciona sem a necessidade de conexão com a internet.

Para começar a usar a Calculadora de Bebida, é preciso que o usuário apenas escolha se irá realizar cálculos com recipientes de cerveja ou de refrigerantes. Após escolher o tipo de pesquisa, irão aparecer na tela várias opções de recipientes, como Litrão, Garrafa 600 ml, Long Neck 355 ml, entre outras.

Basta que o usuário identifique no rótulo do produto o seu volume e encontre a opção correspondente no aplicativo. Em seguida, é só digitar o preço de cada uma das opções — lata, latão, long neck, etc. — e clicar no botão “Calcular”, localizado na parte inferior da tela.

Caso o usuário não encontre um recipiente com o volume igual ao produto que quer consultar, basta que ele vá até os símbolos de interrogação que estão no fim da lista de recipientes. Lá, será possível personalizar uma pesquisa informando o volume do produto, além do seu preço.

Em uma simulação feita por INFO com preços reais de uma marca de cerveja, o aplicativo mostrou que o mililitro de uma lata de 350 ml estava 9,99% mais caro que o mililitro de uma lata de 473 ml. Ou seja, se o usuário gastar a mesma quantidade de dinheiro nas duas opções, será possível comprar quase 10% a mais de cerveja com as latas de 473 ml.

O aplicativo também possui uma outra função interessante que ajuda o usuário a contar a quantidade de bebidas que está consumindo em um bar ou restaurante. Nesse “contador”, além do número de cervejas consumidas, devem ser informados o valor da bebida, o número de pessoas que irão dividir a conta e até a porcentagem do garçom.

Com isso, o aplicativo calcula o total da conta para o usuário, mostra quanto desse total irá para o garçom e ainda informa o valor que cada pessoa da mesa deverá pagar.

INFO divulga o aplicativo Calculadora de Bebida

Facebook da INFO: https://www.facebook.com/revistainfo/posts/10152797704313630

Site da INFO: http://info.abril.com.br/noticias/blogs/download-da-hora/android/lata-ou-litrao-aplicativo-mostra-qual-cerveja-tem-melhor-custo-beneficio/

Link do aplicativo: https://play.google.com/store/apps/details?id=br.com.mxczpiscioneri.calculadoradebebida

Como perder peso (no browser)

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

Idealizado pelo desenvolvedor Zeno Rocha e com a colaboração de vários outros desenvolvedores “de peso”, o Como perder peso (no browser) é um do projeto cujo a ideia é simples, criar um guia de forma prática e divertida de como melhorar a performance do seu projeto front-end.

“E se juntássemos os feras que trabalham em grandes portais para criar o guia definitivo de performance para front-end?

Mas nada daqueles guias chatos feitos para robôs, que tal fazer algo divertido? Que tal juntar Briza Bueno (Americanas.com), Davidson Fellipe (Globo.com), Giovanni Keppelen (ex-Peixe Urbano), Jaydson Gomes (Terra), Marcel Duran (Twitter), Mike Taylor (Opera), Renato Mangini (Google), Sérgio Lopes (Caelum) e o idealizador, Zeno Rocha (Liferay) para criar a melhor referência possível?

Foi isso mesmo que fizemos! E iremos te ajudar nessa batalha de criar sites cada vez mais rápidos.”

E foi assim que Zeno Rocha lançou Como Perder Peso (no browser). Com um timão de profissionais de grandes empresas, saiu do forno no RioJS e caiu na web. São várias dicas, desde melhorias no HTML, CSS, JavaScript, Jquery,  até em imagens, para melhorar a perfomance front-end de seus sites. E tudo isso para construir uma web melhor – e mais rápida!

Alguns dos temas abordados são:

  • Performance importa mesmo?
  • Evite código inline/incorporado
  • Estilos no topo, scripts no rodapé
  • Experimente o async & defer
  • Comprima sua folha de estilo
  • Combine vários arquivos css em um só
  • Prefira <link> a @import
  • Carregue código de terceiros de forma assíncrona
  • Guarde o tamanho do array
  • Evite document.write
  • Minimize repaints e reflows
  • Evite manipulações desnecessárias no dom
  • Comprima seu script
  • Combine vários arquivos js em um só
  • Use sempre a última versão do jquery
  • Use for ao invés de each
  • Não use jquery sempre…
  • Use css sprites
  • Data uri
  • Não escale imagens direto no código
  • Otimize suas imagens
  • Ferramentas de diagnóstico: suas melhores amigas
 

Como perder peso no browser

Data e Hora no WordPress

Escrito por Matheus Piscioneri. Em Wordpress

Algumas funções tag do WordPress são usadas para mostrar ou retornar informações de data e hora; the_date() e the_time() são exemplos disto. Algumas dessas funções aceitam um parâmetro chamado de uma seqüência de formato que lhe permite determinar como a data vai ser exibida. A seqüência de formato é um modelo em que várias partes da data são combinadas (usando os “caracteres de formato”) para gerar uma data no formato especificado.

Por exemplo, o formato: cria uma data como:  

Aqui está o que cada caractere de string de formatação acima representa:

  • j = Dia do Mês.
  • \d\e = Mostra a palavra de.
  • F = Nome completo do mês.
  • Y = Ano no formato de 4 dígitos.
 

WordPress é escrito na linguagem de programação PHP. A formatação de data no WordPress usa funções embutidas de formatação de data do PHP. Você pode usar a tabela de caracteres de formato de data no site do PHP como referência para a construção de cadeias de formato de data para uso em WordPress. Aqui está uma tabela de alguns dos itens mais úteis encontradas lá:

Dia do Mês
d Numérico, com zeros 01–31
j Numérico, em zeros 1–31
S Sufixo Ordinal Inglês, use depois de j st, nd, rd or th
Dia da Semana
l Nome Completo  (minúsucula ‘L’) Domingo – Sábado
D Nome com três letras Dom – Seg
Mês
m Numérico, com zeros 01–12
n Numérico, sem zeros 1–12
F Completo em texto Janeiro – Dezembro
M Três letras Jan – Dez
Ano
Y Numérico, 4 dígitos Ex.: 1999, 2003
y Numérico, 2 dígitos Ex.: 99, 03
Hora
a Minúscula am, pm
A Maiúscula AM, PM
g Hora, 12-hora, sem zeros 1–12
h Hora, 12-hora, com zeros 01–12
G Hora, 24-hora, sem zeros 0-23
H Hora, 24-hora, com zeros 00-23
i Minutos, com zeros 00-59
s Segundos, com zeros 00-59
T Abreviação de Fuso Horário Ex.: EST, MDT …
Data/Hora Completa
c ISO 8601 2004-02-12T15:19:21+00:00
r RFC 2822 Ter, 21 Dez 2011 16:01:07 +0200

Exemplos

Alguns exemplos de formatação de data.
  • F j, Y g:i a – Janeiro 6, 2010 12:50 am
  • F j, Y – Janeiro 6, 2010
  • F, Y – Janeiro , 2010
  • g:i a – 12:50 am
  • g:i:s a – 12:50:48 am
  • l, F jS, Y – Sábado, Janeiro 6th, 2010
  • M j, Y @ G:i – Nov 6, 2010 @ 0:50
  • Y/m/d \\a\\t g:i A – 2010/11/06 at 12:50 AM
  • Y/m/d \\a\\t g:ia – 2010/11/06 at 12:50am
  • Y/m/d g:i:s A – 2010/11/06 12:50:48 AM
  • Y/m/d – 2010/11/06
 

Combinado com the_time(), o código abaixo:

 

Mostra o seguinte:

 

Observe que ao usar palavras acentuadas nos arquivos do WordPress, deverá usar o código da entidade de caractere. Saiba mais lendo o artigo HTML_ISO-8859-1 onde há também uma tabela de caracteres.

Localização

Para usar outros formatos de datas e hora, veja sobre a função date_i18n().

Se quiser converter formatos de datas em strings de acordo com formatações regionais/territoriais, use __(), _e() etc demonstrado com get_the_date(__(…)):

  Data e Hora no WordPress Fonte: www.codex.wordpress.org

Media Queries

Escrito por Matheus Piscioneri. Em Css, Html

Utilizando o Media Queries, é possível ter diferentes comportamentos e formatações do HTML e CSS, de acordo com as características do dispositivo no qual está sendo vizualizado.

 

Media types

Desde muito tempo o CSS tem suporte para se definir regras que só valem em certo contexto. Os media types permitem que se use estilos diferentes em situações diferentes e sempre foram muito usados para distinguir a renderização na tela da impressão:

 

Todos os navegadores modernos suportam esse media type print que é aplicado apenas quando vamos imprimir uma página (útil para esconder o menu de navegação ou aumentar a fonte do texto, por exemplo).

Alguns celulares antigos suportavam também o tipo handheld para estilos específicos para sites mobile. Os smartphones modernos como iPhone e Android, porém, ignoram o media type handheldpois são capazes de renderizar sites completos e não apenas as versões simples feitas para os celulares antigos.

Como então escrever CSS específico para mobile pensando em smartphones e tablets que não se encaixam no media querie handheld? Novos media queries!

CSS3 media queries

Melhor do que separar os dispositivos em desktop (screen) e mobile (handheld), os novos media queries permitem que foquemos principalmente no tamanho da tela onde vamos exibir o conteúdo.

É possível criar um CSS que só se aplique a tamanhos de tela de, no máximo, 320px por exemplo (como um iPhone em modo retrato):

 

Existem diversas opções de media queries com bastante suporte. Além da max-width, podemos usarmin-width, width e device-width – e todas as variações delas com height.

A diferença entre width e device-width é se estamos pensando em CSS pixels ou no tamanho do viewport. Geralmente não é boa prática depender do tamanho físico do aparelho então não usamos tanto device-width.

Uma decisão que precisa ser tomada é de se usar max-width ou min-width. O max é bom para quando temos um layout Desktop pronto e queremos adaptá-lo para dispositivos menores – vamos então definindo novas regras que se aplicam só aos dispositivos de no máximo certo tamanho. Já o minpode ser útil quando criamos um site só mobile ou começamos pelo mobile – nesse caso, é mais fácil ter um layout base e ir customizando para dispositivos maiores, com no mínimo certo tamanho.

Mais media queries

Além dos media queries de tamanho, aparelhos mais modernos suportam também um media querie que pega a orientação do dispositivo:

 

Isso pode ser útil para customizar a experiência do site de acordo com como o usuário está segurando o aparelho. É sabido, por exemplo, que um celular em modo retrato é mais usável com navegação na parte de baixo à esquerda; e, no modo paisagem, com navegação no topo e nas laterais.

 

Além de declarar as media queries na tag <link> no HTML, podemos também fazer direto dentro do arquivo CSS (podemos juntar tudo num arquivo CSS só e economizar requests):

 

Há ainda como mirar dispositivos de alta resolução (como iPhones e iPads com Retina Display) comdevice-pixel-ratio para provermos imagens de melhor qualidade quando elas forem úteis. Ou ainda a opção (color) que permite distinguir entre dispositivos coloridos ou não (como um ereader ou Kindle).

Temos muitas outras opções de media queries na especificação do W3C e várias delas já disponíveis nos aparelhos de hoje.

Media queries comuns

E quais valores usar no projeto para adaptar para diferentes larguras? O ideal seria fazer as adaptações conforme seu layout exige (seria até possível fazer um layout só com porcentagens e sem media querie nenhum que funcione em diversos tamanhos de tela).

Mas se você pensa nos dispositivos mais comuns de hoje, existem algumas combinações de media queries famosas. O projeto 320andup por exemplo sugere que você faça um layout base pensando em 320px e depois adapte para outros tamanhos com:

 

Há a regra para impressão e outras 4 pensando em tamanhos comuns de smartphones e tablets. A última regra foca em dispositivos com alta resolução como os Retina Display e Android modernos. (o uso da keyword only serve apenas para esconder essas regras de navegadores antigos que não suportem media queries mas suportam o media type screen).

Conclusão

As novas media queries do CSS3 são muito úteis para adaptar nosso site a diferentes resoluções. E o melhor é que contam com excelente suporte nos navegadores mobile.

 Fonte: www.caelum.com.br

“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