Artigo – Página: 7 – Tribo do C.I.

Review Aplicativo: Guiato Ofertas

Tela de Início do Aplicativo Guiato IPhone4

O Guiato é uma plataforma/aplicativo que tem como propósito ajudar você a encontrar as melhores ofertas na hora de fazer suas compras e ele torna isso possível exibindo um catálogo inteligente online com os estabelecimentos e suas ofertas que estejam mais próximos de você, ou seja, todos os panfletos que cabem no seu bolso, acho que Steve Jobs diria isso no Keynote de lançamento 😀

Aplicativos que utilizam a geolocalização já tem alguns pontos reservados comigo pelo meu passado no desenvolvimento de aplicativos GIS ou SIG (Sistemas de Informações Geográficas) e esse é o caso do Aplicativo Guiato, que na verdade é uma plataforma pois o mesmo está disponível tanto para o uso em dispositivos móveis iOS e Android, bem como uma versão para o navegador.

Os testes principais foram feitos utilizando um IPhone 4 no entanto deixamos algumas considerações nas demais plataformas que o Guiato está disponível a começar pela versão que funciona em seu navegador de internet predileto, ~~espero que não seja o~~ ~~Internet Explorer 6~~, fundamentalismo a parte vamos ao review de fato.

Navegador

Tentei ir mais cru possível a cada plataforma, pra eu ter a reação de primeiro uso sem nenhuma apresentação, mesmo sabendo que existe manuais no site e vídeos demonstrativos sobre os recursos disponíveis, no site já tem um pequena desvantagem em relação as outras plataformas pois a localização que é possível detectar pelo browser não é muito precisa, consegue no máximo inferir a cidade no qual você está acessando mesmo assim é só você digitar o seu endereço ou o CEP que fica tudo certo, a segunda vez que você acessa o site ele resgata suas preferências de localização, assim não você precisa especificar toda vez onde está.

Basicamente são 3 sessões:

Encartes e Lojas – Aqui onde você pode achar uma “cópia” dos panfletos e ou catálogos das lojas, e assim pesquisar promoções ou mesmo zapiar nos produtos disponíveis.
Guiato Encartes (Clique para Ampliar)

e ao abrir o encarte:

Guiato Ofertas: Encarte Aberto (Clique para Ampliar)
Mapa – Aqui a visão é pelos estabelecimentos, dessa forma você consegue encontrar facilmente as lojas que estão próximas a você.
Guiato Ofertas: Mapa (Clique para Ampliar)
e Guiato Alerta – aqui você pode se “inscrever” para receber alertas por e-mail de novas ofertas e produtos, e você pode filtrar o que deseja ser notificado, evitando assim ser bombardeado com produtos que não lhe interessa para o exemplo eu configurei pra me notificar quando farmácias tiverem Barras de Cereais Diet, bem específico não? Diabetes ta aí com tudo, nova moda do verão e eu como sou um cara antenado nas tendências…
Guiato Ofertas: Alertas (Clique para Ampliar)

A versão Móvel para o Guiato tem basicamente as mesmas funcionalidades mais explorando bem os recursos do aparelho, como por exemplo as notificações:

Guiato - Alertas (Clique para Ampliar) — Guiato – Alertas (Clique para Ampliar)

E nesse caso a visualização do mapa utilizando o GPS deixa a localização bem mais aproximada:

Guiato: Visualização Mapa (Clique para Ampliar)

Um recurso que eu espera que tivesse era a possibilidade de filtrar o tipo de oferta que eu gostaria de visualizar e assim não ficar com um tela poluída. Das pessoas que me ajudaram a fazer o review, foi comum dizer até que seria uma boa ter essa opção de cara, já pra trazer as ofertas filtradas.

Guiato Ofertas: Filtro (Clique para Ampliar)

Bem como a possibilidade de classificar as ofertas não só pela distância, mais também e popularidade, assim é fácil de avaliar se a economia vale apena.

Guiato Ofertas: Classificar (Clique para Ampliar)

Guiato HD para IPad

Aqui agente pode tocar em um assunto que está na moda, que é o design responsivo e o Guiato HD se sai bem no IPad, pois utiliza bem o espaço de tela disponível.

Guiato HD no iPad Retina. (Clique para ampliar)

Veja mais aqui também.

Vamos ficar devendo o teste em um dispositivo de tela grande com Android, fica o convite pra você que tenha um e testou o aplicativo mandar um links para screenshots para vermos como ele se comporta, ficaremos devendo também o teste de acessibilidade.

Considerações Finais

Embora aplique a mesma ideia em todas plataformas o Guiato explora bem os recursos de cada uma o que é um ponto positivo, no entanto seria interessante ter uma integração entre elas, isso seria bastante pra quem desejar utilizar o aplicativo em mais de uma plataforma ao mesmo tempo.

Outra coisa a se notar nas plataformas de dispositivos móveis é sobre o conteúdo que quase sempre é dinâmico a conseqüência disso é que por um lado você tem um aplicativo bem pequeno pra baixar da sua store, iTunes Store para iOS ou Play Store para Android e por outro usuários que tem franquia de banda de dados acaba sendo “prejudicado”.

Guiato na Play Store (Clique para Ampliar)

Ainda falando sobre consumo de banda eu faço um uso incomum de smart phone, pois embora tenha um iPhone 4 o meu chip é pré-pago, o mais comum é utilizar um plano pós-pago e geralmente vem com planos de dados ilimitado, e nesse caso pode esquecer a preocupação com o consumo de banda. Certo?

Agradecimentos

Esse artigo não seria possível sem a colaboração de Eduardo Teles pelo Android, Vinícius Menezes no IPad e por ultimo porém não menos importante Palloma Anchieta da Guiato por sua paciência e apoio na realização desse review.

Agradeço a você também que leu o artigo até aqui, não deixe comentar as suas impressões em qualquer um dos aspectos aqui discutidos (ou não). Espero que tenham gostado e até o próximo artigo.

Criando um Menu Dropdown com CSS

Se quiser ler esse post em inglês, acesse: http://codepen.io/sheldonled/blog/menu-dropdown-css-3levels

É muito comum ver sites utilizando menu dropdown, mesmo que este tipo de menu seja um pouco difícil de lidar quando vamos pro mundo mobile. Se você quer um menu desses no seu site, siga os passos abaixo e crie seu próprio menu dropdown, utilizando apenas CSS.

Primeiro, defina seus links no HTML, para nosso exemplo, usaremos a tag nav do HTML5

<nav>
	<ul>
		<li><a href="#">Inicio</a></li>
		<li><a href="#">Tutoriais</a>
			<ul>
				<li><a href="#">Php</a></li>
				<li><a href="#">Java</a></li>
				<li><a href="#">SQL</a>
                                     <ul>
                                          <li><a href="#">PostgreSQL</a></li>
                                          <li><a href="#">MySql</a></li>
                                     </ul>
                                </li>
			</ul>
		</li>
		<li><a href="#">Redes Sociais</a>
			<ul>
				<li><a href="#">Facebook</a></li>
				<li><a href="#">Twitter</a></li>
			</ul>
		</li>
		<li><a href="#">Sobre</a></li>
	</ul>
</nav>

Então veja que o mapa do menu ficou da seguinte maneira:

Inicio
Tutoriais
- Php
- Java
- SQL
  - PostgreSQL
  - MySql
Redes Sociais
- Facebook
- Twitter
Sobre

Agora, visualizando como ficou a hierarquia de links, passamos para o CSS (Lembrando que tudo pode ser recustomizável para adequar ao seu layout):

ul {
    position: absolute;
    margin: 0;
    list-style:none;
}

li {
    display: inline-block;
    padding: 5px 10px;
    position: relative;
}

Setamos a configuração inicial para todas as listas (ul) e seus elementos (li). O position absolute dá uma independência às listas e sublistas. Agora vamos ao estilo-chave do menu

li:hover > ul {
    display: block;
}

Estamos falando para o navegador que, ao passar o mouse sobre um item da lista (li), sua sublista ( >ul) será mostrada (display block). Mas para isso acontecer, precisamos deixa-las invisíveis (display none).

ul ul {
    position: absolute;
    display: none;
    margin: 0;
    padding: 5px 10px;
}
ul ul li {
    display: block;
}

Agora sim, nosso menu já estará funcionando, porém se quiser fazer o terceiro nível funcionar corretamente, é melhor adicionar o estilo abaixo:

ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
}

O código acima faz o 3º nível do submenu aparecer ao lado do item pai dele. Veja o resultado abaixo.

See the Pen Cfqmb by Sheldon Led (@sheldonled) on CodePen.

6 dicas para efetuar uma compra online segura

Faltando menos de um mês para o Natal, os brasileiros estão em plena jornada de compras. Para fugir das filas, lojas lotadas e do risco de não encontrar o produto esperado, a cada ano que passa é maior o número de consumidores que optam pela comodidade das compras online. Um levantamento da e-bit, empresa especializada em informações de comércio eletrônico, aponta que este ano o varejo online brasileiro deve faturar cerca de R$3,25 bilhões só no período do Natal, um crescimento de 25% em relação a 2011. Na ansiedade de fechar uma boa compra, porém, muitos internautas acabam se esquecendo de um item essencial para a garantia de um bom negócio: a segurança.

Para evitar futuras dores de cabeça, dicas básicas ajudam a garantir uma compra online segura. “Hoje, é preciso ter cuidado não somente com o ambiente virtual, mas com o próprio meio pelo qual a compra está sendo realizada. Em um mundo onde cada vez mais a mobilidade é realidade, a tendência é que haja um aumento nas compras realizadas também por meio de smartphones e tablets, e esses dispositivos também devem estar seguros”, afirma Patrick Faria, especialista da empresa de Segurança da Informação Módulo.

Algumas dicas vão além do aspecto tecnológico, como desconfiar de promoções muito tentadoras e ler todas as informações da oferta anunciada. Para compras na internet, o especialista ressalta que, seguindo apenas algumas dicas básicas, listadas abaixo, já é possível diminuir consideravelmente a chance de cair em uma armadilha virtual.

Dicas ao consumidor:

1) Delete e-mails que chegam para você com propagandas não solicitadas, de modo a evitar alguma possível contaminação da sua máquina por vírus.

2) Escolha lojas que você conheça e apresentem o mesmo nível de qualidade nos ambientes físico e virtual.

3) Ao entrar no site, verifique se todos os links funcionam corretamente. Muitos fraudadores lançam mão de cópias de páginas reais e nestas páginas clonadas a maior parte dos links não funciona.

4) Verifique se existe um cadeado no rodapé da página. Clique nesse cadeado para verificar a existência de um certificado digital válido, que indica que a empresa onde você está fazendo a compra segue os preceitos legais da internet no Brasil para compras online.

5) Certifique-se de que está trabalhando em um ambiente seguro sempre que for inserir informações do seu cartão de crédito ou dados pessoais, como CPF. Empresas de certificação digital possuem bandeiras disponíveis em links na página da compra. Clique nesses links para verificar se estão abrindo corretamente. Assim, é possível ter mais garantia de que as informações que você disponibilizou serão protegidas e não serão utilizadas por outras pessoas.

6) Garanta a segurança do seu dispositivo móvel. Instale somente aplicativos confiáveis, preferencialmente de lojas oficiais, habilite a função Bluetooth somente durante o período em que for utilizado e não modifique o sistema, evitando procedimentos de desbloqueio não oficiais, como o “Jail Break” do iPhone e versões modificadas de “firmware” (sistema operacional do smartphone ou tablet). Além de causarem a perda da garantia, essas alterações podem incluir vírus ou programas que permitam o controle remoto do seu aparelho, como – roubo de informações da lista de contatos, envio das coordenadas geográficas do dispositivo e envio de fotos tiradas naquele dispositivo.

fonte: Assessoria de Imprensa da Módulo

Category: Artigo