Technè

Tecnologia & Experiência do Usuário no C.E.S.A.R

Archive for the ‘Web 2.0’ Category

O Browser Morreu?

Posted by Luiz Borba On dezembro - 2 - 2010

Finalmente entrei de cabeça no mundo móvel, agora sou proprietário de um iPad e um celular Android (Samsung Galaxy S).  Mesmo usando meus novos brinquedinhos por poucos dias, reforcei uma visão que já estava percebendo: A era de ouro dos browsers web está acabando.

Já faz tempo que a popularização dos celulares pressionou a indústria de software a criar soluções específicas, que atendessem as características particulares dos celulares (telas menores, teclado numérico, limitações de memória, etc). De uma forma geral, especialmente quando falamos de aplicações web, essas limitações poderiam ser identificadas como um subconjunto das características de um computador completo. Sendo assim, as soluções técnicas na web seguiram a linha da simplificação. WML e HTML atendiam perfeitamente a demanda da web no celular, e todos os sites relevantes fizeram versões de suas páginas para celulares utilizando essas tecnologias. Mas aí, a Apple criou o iPhone.

Com o iPhone tudo mudou. Novas características como touch screen e o acelerômetro tornaram inviável a criação de uma interação rica com usuário na web utilizando as tecnologias disponíveis. Era preciso criar aplicações específicas para o iPhone. A última peça do quebra-cabeça foi o App Store, com ele o problema da busca e distribuição das aplicações estava também resolvido. O sucesso de vendas forçou imediatamente a todos os distribuidores de conteúdo a criar suas aplicações iPhone. Este modelo deu tão certo que todos os fabricantes acabaram o seguindo. E depois surge o iPad.

Com a criação do iPad, se popularizou um novo segmento de dispositivos móveis, os tablets. O sucesso do iPhone se repetiu aqui, e como esperado o resto da indústria seguiu o modelo. Só que, mais uma vez, características específicas do iPad, especialmente relacionada ao tamanho fez com que as aplicações criadas para o iPhone não sejam suficientes. É preciso criar versões das suas aplicações para o iPad, e isto está acontecendo. Mas é necessário ter tantos dispositivos diferentes?

Eu acho que sim. Uso prioritariamente o meu notebook para produzir conteúdo (estou escrevendo este post nele), o iPad para consumir conteúdo e o celular para comunicação (através da telefonia celular ou internet). Não abro mão de nenhum. E também não acredito que vá aparecer um dispositivo único capaz de ser tão adequado para todas as essas atividades. Acho que a situação só deve piorar no futuro. Acho que vai aparecer cada vez mais dispositivos com características diferentes (e nem falamos sobre tv digital) que vão exigir softwares específicos para acesso a conteúdo da rede. Acredito que toda essa diversidade vai impedir que exista uma tecnologia única que abrace todos esses conceitos e seja tão universal como o HTML é hoje. Sendo assim, o que é que vai ser da minha vida?

Agora o desafio está lançado. Temos que criar soluções que englobem interfaces para Android, iPads, iPhones, Google TV, Apple TV, HTML, Flex e o diabo a quatro… Temos que nos preparar e investir cada vez mais em qualidade nos softwares que produzimos. Separação da lógica de negócio da apresentação é vital. Investimento em criação de ferramentas que facilite a criação de interfaces tão diferentes é importante. De qualquer forma, isso representa mais trabalho e mais dinheiro. Mas como ficam os browsers web nesse contexto?

Bem, os browsers ainda vão ser muito importantes, especialmente para uso nos computadores. Mas não deve ser a única ferramenta dominante para acesso a conteúdo. E a web como infraestrutura?

MAIS FORTE DO QUE NUNCA!

Publicado orinalmente em: http://borba.blog.br/2010/12/o-browser-morreu

Dica de CSS: Hierarquia do z-index

Posted by Daniel Ferreira On outubro - 29 - 2010

Olá pessoal,

Nesta semana vou passar uma dica sobre o uso da propriedade z-index, do CSS. Para quem não lembra, com o z-index podemos especificar a ordem em que os nossos elementos aparecem nas diversas “camadas” que compõe nossa página HTML. Ou em outras palavras, podemos definir a profundidade de exibição dos elementos. Para relembrar, vamos começar com um exemplo:

Temos duas divs, uma por cima da outra com position:absolute. Segue o código:

Perceba que a amarela fica em baixo da vermelha, porque a vermelha foi adicionada por último no nosso HTML. Este é o z-index padrão dos elementos, ou seja, eles recebem a ordem que está posicionados no seu HTML, os primeiros elementos aparecem por baixo, e os últimos por cima. Caso desejemos alterar essa ordem sem mexer no HTML, precisamos usar então o z-index dos elementos.

Para colocar a amarela por cima da vermelha, então o z-index da amarela dela precisa ser qualquer valor maior que o z-index da vermelha. Vamos colocar 1 para a vermelha e 2 para amarela e vamos ver o resultado:

Com o z-index temos muita flexibilidade para alteramos as camadas de todos os seus elementos no HTML, porém deve ser usado com cuidado! Já vi muita gente distribuíndo z-index em todo lugar no CSS e depois começar a se perder e não saber porque algo de errado estava ocorrendo. Deve ser usando com moderação.

Atenção com a hierarquia dos elementos!

O que fizemos com z-index no nosso código acima para alterar a ordem das camadas não funcionaria se estivéssemos usando hierarquia nos nossos elementos, ou seja, um dentro do outro. Se por exemplo o nosso box2 (vermelho), estivesse dentro do box1 (amarelo), como no código abaixo, o z-index não funcionaria.

Isso porque os elementos internos sempre ficarão por cima dos elementos externos, mesmo que você defina algum z-index para ele. O z-index só funciona com elementos de mesmo nível.

!!!!!!!! Outra observação importante é que o z-index só funciona com elementos posicionados (position:absolute, position:relative ou position:fixed)

Neste site você consegue brincar um pouco com o z-index e ver exatamente como ele se comporta em diversos casos e situações. Muito útil!

Até o próximo! (: