Os 100 aplicativos mais legais de 2014 – INFO

Escrito por Matheus Piscioneri. Em Android, Diversos, Download

Em 2014, muitos aplicativos interessantes apareceram no Downloads INFO. Surgiram programas para trocar mensagens, facilitar compras, armazenar arquivos, entre várias outras funções.

Por isso, fizemos uma lista com os 100 programas mais legais, disponíveis para diversas plataformas. Alguns apps são desse ano, enquanto que outros existem há um tempo, mas receberam atualizações boas em 2014 e ganharam destaque por conta disso.

 E com muito orgulho o aplicativo Calculadora de Bebida está na 15ª posição!!

Baixem e compartilhem!!

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

Fonte: www.info.abril.com.br

10 dicas para o projeto de aplicativo móvel (app mobile)

Escrito por Matheus Piscioneri. Em Android, Diversos

Um bom design é importante para qualquer aplicação, apesar daquilo que  as péssimas experiências de anos e anos nos levaram a acreditar. No contexto móvel, um bom design é ainda mais crítico, pois a tela pequena e o ambiente operacional instável tornam o uso ainda mais difícil.

O que os desenvolvedores podem fazer sobre isso? E o que os usuários procuram?

Michael Griffith, diretor de criação da Bottle Rocket Apps, desenvolvedora de aplicativos móveis cujas aplicações incluem o bem concebido app da de notícias da NPR, segue um conjunto de 10 princípios e recomendações que leva ao desenvolvimento de melhores apps – especialmente melhores aplicativos móveis.

Confira:

1. Não basta portar o que você tem para outras plataformas (iOS para Android, Web para iOS, Android para o BlackBerry, e assim por diante). A aparência deve honrar a plataforma de destino, que os usuários optaram por determinada razão. Além disso, os recursos também podem ser diferentes, com base no que a plataforma oferece.

Para aplicativos corporativos utilizados em vários contextos e dispositivos, Griffith observa que o grau de padronização deve ser maior do que em aplicações de consumo, assim os usuários podem fazer o que é conhecido em todos os dispositivos e reduzir o tempo de aprendizagem. Neste caso, a aplicação é o centro da experiência do usuário, mais do que o dispositivo.

Você ainda deve honrar os pressupostos fundamentais da interface de usuário da plataforma na hora de criar as interações básicas do aplicativo – como o acesso aos menus.

2. Tire proveito das restrições móveis (especialmente dos smartphones) para pensar criativamente.

3. Tire vantagem das capacidades móveis que não estão disponíveis em um PC. Por exemplo, use a câmera para tirar fotos ou serviços de localização para diminuir sugestões de busca. Use sensores, especialmente quando dados adicionais puderem ajudar a reduzir o esforço do usuário ou da aplicação.

4. Cuide da acessibilidade. É comum ver jovens designers usando pequenos textos e layouts apertados,  difíceis de serem lidos e tocados com precisão por usuários mais velhos. Evite o efeito Retina, só porque agora existem pixels menores que fazem texto tecnicamente legível em tamanhos ainda menores. Se você já passou dos 35 anos de idade, sabe bem o esforço que os olhos humanos fazem para ler esse texto minúsculo. Ao contrário disso, ofereça opções de adaptação no seu projeto, como o ajuste de preferências de tamanho do texto. A nova API do iOS 7 deve reduzir a carga de codificação necessária para inclusão desse recurso em apps para iPhones e iPads.

5. Ao mostrar maquetes e protótipos para clientes ou usuários, procure fazê-lo no aparelho no qual o aplicativo será executado. PDFs ou Photoshops em uma grande tela de computador simplesmente não refletem o olhar e a sensação de um smartphone ou tablet, nem as interações. O que parece funcionar direito em uma tela grande com mouse e teclado podem ser horrível na pequena tela sensível ao toque de um dispositivo móvel. Da mesma forma, o que funciona bem em um dispositivo móvel pode funcionar mal em uma tela de computador, fazendo com que os usuários e clientes rejeitem boas opções.

6. Cuidado com metáforas. Há poucas metáforas gráficas universais com as quais você pode contar. Das imagens analógicas antigas (as telas de TV, controles de rádio, toca-fitas, câmeras, filmstrips, LPs, seletor giratório, luzes piloto e até CDs)muitas  não são operacionalmente familiares para as gerações mais jovens, mesmo que eles possam tê-las visto em um filme antigo. Embora a teoria da iconografia permita um design mais universal, muitas das bases analógicas para os ícones estão se tornando menos e menos conhecidas, o que pode deixar os usuários mais confusos. Em várias situações o uso de texto pode ser melhor.

7. Cuidado com a simplificação, onde tudo (cor, peso, textura, e assim por diante) parece igual. Uma interface muito simples pode ser tão confusa quanto uma muito complexa.

8. Não sobrecarregue o app. Se você tem um monte de funcionalidades para fornecer, considere dividi-las em um conjunto de aplicativos relacionados, cada um deles focado em uma funcionalidade central. Essa opção pode ser difícil de explicar aos clientes, especialmente tendo em conta a pressão para “fazer mais” em cada revisão, mas é essencial que os aplicativos não se tornem inviáveis ou muito complexos. (Griffith sugere que você cite a máxima “liberdade de escolha é o que você ganha, liberdade de escolha é o que você quer” do icônico “Freedom of Choice”, música de banda Devo.)

9. Projete para diferentes graus de experiência. Usuários iniciantes devem sentir algo especial e imediatamente valioso quando usarem seu aplicativo. Usuários subsequentes devem descobrir mais facilidades de uso. Pessoas que usem o aplicativo regularmente ao longo do tempo devem começar a descobrir funcionalidades mais profunda para fazer algo ainda mais útil. O Flipboard é um bom exemplo dessa abordagem, segundo Griffith.

10. Use movimentos e transições para enriquecer a experiência do usuário, e empurre valor, em vez de forçar o usuário a procurar por ele. Deixe uma maneira de ir mais fundo para aqueles que desejam, em vez de sobrecarregar as pessoas com informações.

Android

Fonte: www.cio.com.br

Use esses 8 elementos HTML no seu site

Escrito por Matheus Piscioneri. Em Html, SEO

Hoje, por exemplo, muito se ouve sobre semântica, motores de busca, SEO e uma infinidade de outros termos e teorias para tornar um site mais amigável aos mecanismos de indexação de conteúdo do Google e de todos os demais buscadores. Mas, afinal de contas, o que isso tudo quer dizer?

Ao contrário do que acontecia antigamente, o HTML semântico expressa não apenas o significado do documento, como também descreve o que ele é e ajuda a pessoas e robôs a entenderem o conteúdo e o seu contexto apenas observando o código fonte. Além disso, a marcação semântica é amigável ao SEO, trabalha melhor em browsers modernos e reduz a quantidade de código necessária para expressar o conteúdo, aumentando a clareza do código para outras pessoas que por ventura precisem lê-lo.

Fazer isso é bastante simples e basta deixarmos de lado algumas tags HTML genéricas que aprendemos a usar com editores como Microsoft FrontPage ou Adobe Dreamweaver, por exemplo, e começarmos a sermos mais específicos ao utilizar elementos mais expressivos. Abaixo, listamos oito exemplos que você pode começar a utilizar hoje mesmo. Confira:

8. abbr

A tag abbr é usada para abreviações. Portanto, se você está escrevendo um documento com várias abreviações, poderá atribuir a elas títulos que contêm a versão não abreviada do texto. Veja o exemplo abaixo:

 

7. menu

Quem nunca fez uma marcação de menu como uma lista não-ordenada?

 

Pois bem, agora você pode parar com isso e usar um elemento próprio para a ocasião: o menu. Além de representar uma lista não-ordenada de comandos, ele ainda tem um atributo type que pode ser definido para popup ou toolbar.

 

6. q

Assim como a tag blockquote, a tag q é usada para fazer citações de texto num documento HTML.

Diferente do que você pode pensar, usar apenas as aspas não é suficiente – os motores de busca não sabem que aquele trecho entre aspas em específico é uma citação. Ao invés disso, ele procura por essas duas tags para saber quando você realmente citou algo e deixou isso claro o suficiente no seu código fonte.

   

5. mark

Quem nunca estilizou uma tag span para destacar uma porção de texto que atire a primeira pedra!

Com a introdução do elemento mark no HTML5, fazer essa gambiarra não é mais necessário. Esta tag representa exatamente um texto que foi grifado com propósito referencial devido à sua importância em outro contexto. Além de funcionar perfeitamente semanticamente, você também pode estilizá-la para dar aquela destacada no texto.

Portanto, pare de fazer isto:

 

E passe a fazer isto aqui:

 

4. time

Se há uma coisa desorganizada neste mundo, esta coisa definitivamente é a localização de datas. Tome por exemplo a data 25 de dezembro de 2014. No Brasil, esta data é representada por 25/12/2014. Nos Estados Unidos é 12/25/2014. Na Holanda, por sua vez, a mesma data é 25-12-2014 e assim vai. As possibilidades são inúmeras e cada país representa a data da maneira mais conveniente para si. Não é difícil de imaginar que isso dificulta, e muito, a leitura correta desse dado por máquinas, certo?

E é aí que surge a tag time, que permite representar horas e datas em um formato compreensível pela máquina. Utilizando-a, o exemplo acima seria escrito como:

 

A partir dai, um parser HTML usa a tag para determinar a hora exata que você quer, independentemente do formato. Caso haja necessidade, você também pode usar um formato de 24 horas, como no exemplo a seguir:

 

3. input

OK, essa tag não é exatamente nova, mas ela ganhou uma variedade de novos tipos com o HTML5. Entre elas:

  • email: campo de endereço de e-mail;
  • tel: para definir um campo de número telefônico;
  • number: campo somente numérico;
  • range: permite percorrer por números dentro de um intervalo estabelecido;
  • time: campo estilizado para definição de hora;
  • search: caixa de buscas padrão;
  • color: abre a caixa de seleção de cores do navegador.

Embora os novos tipos de input sejam ótimos, nem todos eles são suportados pelos navegadores. Antes de implementá-lo no seu site, certifique-se disso.

   

2. i e b 

Nos primórdios da web, as tags i e b eram usadas para identificar itálicos e negritos. Contudo, com o passar do tempo e com o surgimento do conteúdo semântico, usá-las se tornou algo mal visto pelos especialistas, que passaram a dizer que elas representam apenas a forma como o texto é mostrado ao invés do que ele realmente significa. E foi aí que elas foram substituídas pelas tags em e strong, que indicam texto “enfatizado” e “fortemente enfatizado”, respectivamente.

As coisas permaneceram assim até o surgimento do HTML5, que deu um significado totalmente novo às tags i e b. Agora, a i, por exemplo, é usada para texto que está em um tom diferente. Também serve para destacar termos técnicos e pensamentos. A b, por outro lado, identifica um texto que tem um estilo diferente do normal, mas não uma diferença semântica.

Comparando esta última ao span, a diferença é que o b comunica aos robôs uma falta de sentido semântico.

   

1. nbsp

Praticamente todos os desenvolvedores já viram ou usaram nbsp, mas poucos sabem para que ela realmente serve: para definir um espaço não-quebrável. E o que isso significa?

Sabe quando, ao fim de uma sentença, aquelas duas palavras separadas por um espaço deveriam ficar juntas a todo custo e não ficam? Pois bem, o nbsp serve para deixá-las juntas e evitar que uma nova linha as separe.

Veja os exemplos:
  • Unidades de tempo/medida: 25 m/s
  • Tempo: 12 PM
  • Nomes Próprios: Sergio Oliveira

Em nenhum desses casos seria bacana separar a primeira porção do texto da segunda no fim de uma linha, certo? Manualmente, você espreme sua letra para garantir isso; no HTML, você usa nbsp.

É claro que essas dicas e exemplos não cobrem nem 10% do que o HTML está se tornando. Cada vez mais semântico, seus elementos vêm ganhando novos significados e as marcações estão cada vez mais limpas e acessíveis.

HTML5

Fonte:  www.canaltech.com.br

Infográfico – 10 Conhecimentos Para Um Bom Desenvolvimento Android

Escrito por Matheus Piscioneri. Em Android

Infográfico com o que é essencial para que um desenvolvedor consiga fazer as APPs que lhe venham como pedido ou as que vem a sua cabeça do nada.

10 Conhecimentos Para Um Bom Desenvolvimento em Android

Conhecer a Linguagem JAVA: Quanto maior for suas habilidades nessa linguagem maior será suas possibilidades de construir APPs mais diferenciadas. Melhor ainda se você conhecer bem os conceitos de conexão Web, serialização e stream na linguagem.

Saber trabalhar com marcações XML e HTML (Interface gráfica): Essas habilidades lhe darão a possibilidade de construir interfaces que impressionem mais, sejam intuitivas, otimizem o espaço utilizado nos dispositivos e forneça melhor possibilidade de interação APP / usuário. HTML e o componente WebView vão permitir que você construa interfaces mais estilizadas e em menos tempo (se você for dev Web), além de evitar todo o trabalho de criação de threads na APP para conexões e downloads de conteúdos online. Conhecer todo o ciclo de vida de uma Activity (atividade): além de lhe permitir melhor depuração da aplicação vai lhe deixar entendido do que está realmente acontecendo quando a APP é iniciada e permitirá que você coloque seus códigos nos lugares certos no tempo de execução e otimize o acesso aos dados via métodos onSaveInstanceState() e onRetainNonConfigurationInstance(); Fragments e ActionBar: Esses componentes lhe permitirão construir APPs que rodem de forma otimizada também em tablets sem a necessidade de criação de código totalmente customizado para esse tipo de device. Domínio do uso de Threads: Nem todas as APPs serão viáveis por WebView, logo conhecer Threads em Java e o conceito de “Thread Principal” no Android vão lhe permitir realizar tarefas como baixar conteúdo e se conectar a servidores Web. Conhecer bem as classes Activity, Intent e Intent-filter: O bom conhecimento dessas classes lhe dará a habilidade de realizar comunicações mais eficientes entre atividades e também entre outros componentes tais como Service e BroadcastReceiver além de enfatizar o conceito de pilha de atividades no Android. BroadcastReceiver, Notification, Service e AlarmManager: O bom domínio dessas classes vai permitir que você realize tarefas no background, mesmo quando o usuário nem sequer abriu sua APP e também que você notifique os usuários quando necessário. SQLite (banco de dados interno): Nem toda APP precisa de comunicação com servidores Web para serem Killer APPs, logo o bom conhecimento do BD interno do Android vai lhe permitir construir esse tipo de APP e também a otimizar ainda mais APPs que utilizam conteúdo Web com atualização não tão frequente. Multimídia (Áudio, Vídeo e Câmera): Saber trabalhar com multimídia no Android vai dar um UP em suas APPs permitindo que você coloque funcionalidades que convertem usuários, funcionalidades tais como: permitir tirar fotos, filmar e ouvir um podcast, por exemplo. 10º Linguagem de backend, Servidor Web e WebService: Ter conhecimentos em linguagens de backend de servidores Web (PHP, JAVA, Python, …) e saber trabalhar com WebService (SOAP e cia.) vai ampliar suas possibilidades de construção de APPs quando em um pedido de um cliente ou em uma ideia maluca das madrugadas da vida. Obs. : Note que o mundo do Android é muito maior do que a lista acima, porém com o que foi listado acima você já consegue fazer excepcionais APPs sem muita dor de cabeça no momento do desenvolvimento. A lista acima não inclui Google Cloud Messaging (GCM – depreciado), Sensores, Reconhecimento de gestos e ContentProvider que são conteúdos que lhe permitiriam construir APPs ainda mais robustas.

Fonte: www.thiengo.com.br

CSS3 Generator

Escrito por Matheus Piscioneri. Em Css

A dica deste artigo é indicada para profissionais que já trabalham com CSS e também para quem ainda esta dando os primeiros passos nesta tecnologia, para aprender mais ou apenas ganhar tempo.

A ferramenta foi criada por Randy Jensen é muito simples de ser usada, basta navegar pelo site oficial que é tudo auto explicativo.

CSS3 Generator é uma aplicação online para criação de efeitos utlizando CSS. Com este WebApp será possível criar sombras, bordas arredondadas, transições, animações e muito mais, tudo isso utilizando apenas códigos gerados automaticamente pela ferramenta.

Profissionais que estão começando agora com certeza terão a disposição uma solução gratuita muito interessante para iniciar seus estudos e até mesmo começar a entender como tudo funciona. Mas é até mesmo desenvolvedores experientes podem utilizar o CSS3 Generator para ganhar tempo e agilizar a criação de páginas HTML.

Algumas funcionalidades:
  • Border Radius
  • Box Shadow
  • Text Shadow
  • RGBA
  • @Font Face
  • Multiple Columns
  • Box Resize
  • Box Sizing
  • Outline
  • Transition
  • Transform
  • Gradient
CSS3 Generator

“O maior inimigo de um bom plano é o sonho de um plano perfeito.” - Carl von Clausewitz