Novidades
Google Chrome muda o seu logo
17/03/11
O Google deverá mudar a logomarca de seu browser chrome em sua próxima versão. A mudança ocorreu a alguns dias no projeto chromium (open source), o logo perdeu aquele visual 3d, cheio de detalhes e assumiu um logo mais sóbrio, particularmente preferia a primeira versão, mas por se tratar de um produto do google, que preza pela simplicidade, esta nova versão tem muito mais identificação com a marca.
Comparação entre as versões
Adobe cria Wallaby, ferramenta que converte Flash para HTML5
10/03/11
Comprado pela Adobe em 2005, o Flash é uma das tecnologias mais usadas na web. Com a chegada do HTML5, no entanto, ele começou a perder espaço depois que diversos webdesigners e sites de conteúdo implementaram suas versões nessa linguagem web, pelo fato dela ser mais eficiente em termos de vídeo e animação.
A Adobe percebeu nessa mudança uma possível ameaça à sua tecnologia e resolveu pular no barco do HTML5 antes que fosse tarde demais. Com sua Creative Suite 5, liberada para venda no ano passado, a empresa também passou a vender uma nova versão do Dreamweaver com suporte para exportação de páginas nessa linguagem. E agora ela liberou uma ferramenta chamada Wallaby que vai ajudar ainda mais os donos de site que querem se livrar do Flash.
A ferramenta permite que arquivos em Flash (no formato .fla) sejam convertidos automaticamente em páginas da web codificadas com o padrão HTML5 e está disponível tanto para PCs com Windows quanto aqueles com Mac OS X.
Ela foi apresentada originalmente numa conferência da empresa no ano passado, mas só agora foi liberada para o público. Isso não quer dizer que a ferramenta está funcionando perfeitamente: usuários já reclamam de diversos erros diferentes no fórum no site da Adobe.
Aqui mesmo no blog da Avanti já levantamos a questão do tempo de vida do flash, desta forma acredito que a Adobe crava enfim o que estava escrito o fim (quem diria) do todo poderoso flash que fez a alegria de vários desenvolvedores durante muitos anos, com o Wallaby o Flash com certeza não será descontinuado, porém acredito que a adobe num futuro CS6 inclua o Wallaby já nativo na plataforma e o Flash torne-se um editor de animações em HTML5.
Acredito que isto seja de alguma forma um duro golpe na Adobe, pois ao comprar a Macromedia em 2005 por cerca de 3.4 bilhões de doláres o seu grande objetivo era o Flash, vamos aguardar os próximos capítulos desta novela animada…
TouchPad, conheça o novo tablet da HP
17/02/11
*Fonte: TechTudo
Menos de um ano após a compra da Palm, a HP apresentou no Mobile World Congress seu novo tablet, o HP TouchPad, equipado com uma nova versão do webOS. Com uma borda preta, assim como a maioria dos tablets lançados recentemente, o TouchPad tem tela de 9,7 polegadas com resolução de 1024 x 768 pixels, com tamanho semelhante ao do iPad e o novo Samsung Galaxy Tab 10,1”.
HP Touchpad
Seu hardware é potente: vem com chip da Qualcomm, o Snapdragon de 1.2 GHz dual-core, e tem 1 GB de memória RAM, Bluetooth 2.1 +EDR, Wi-Fi, câmera frontal de 1.3 MP para chamadas de vídeo e chegará ao mercado com opções de 16 ou 32 GB de memória interna.
Diferenciais
O HP TouchPad conta com uma interessante tecnologia chamada Touchstone, que permite compartilhar dados entre dispositivos webOS, como o novo Palm Pre 3, apenas colocando um ao lado do outro, sem a necessidade de fios. Assim, sem nenhum esforço, você pode acessar uma página que estava aberta no seu tablet dirtamente no seu celular. O carregador é mais um diferencial do TouchPad. Além de funcionar como um suporte para o aparelho, ele o recarrega sem conectar nenhum fio a ele.
Os gráficos rodam suavemente no dispositivo, que ainda suporta Flash 10.1. O webOS também é multitarefa, o que significa que você pode rodar vários aplicativos ao mesmo tempo. O QuickOffice, Google Docs, Dropbox, Facebook, Photobucket, e outros aplicativos já virão pré-instalados
Desafios
A oferta de aplicativos, no entanto, ainda é limitada. O webOS corre atrás do Android e do iOS, que já oferecem milhares de programas. A empresa terá os próximos meses para buscar desenvolvedores para a plataforma, já que o tablet será lançado apenas no verão norte-americano, ou seja, no terceiro trimestre do ano.
A HP afirmou que nos próximos dias fará um novo anúncio, onde provavelmente teremos informações sobre os países onde o tablet será oferecido.
Confira o vídeo abaixo para ver o HP TouchPad em ação:
HTML5 = Flash perdendo cada vez mais força?
17/01/11
Em muitas discussões com amigos da área sempre vem a tona o tema: Flash e seu tempo de vida, particularmente já defendia a tese do desuso do flash desde 2008 com a popularidade do plugin Jquery (clique aqui para saber mais), mas o flash sempre ganhava força em dois campos, hot-sites interativos e jogos, 2 pontos que o Jquery ainda não consegue ser tão objetivo e cheio de possibilidades quanto o Flash. Porém com o surgimento do HTML5 (clique aqui e saiba mais) e do CSS3 (clique aqui e saiba mais) o flash está com seus dias na web contados, lembrando sempre que esta é minha humilde opinião, aqui mesmo no blog da Avanti já publicamos algumas possibilidades com essas tecnologias.
Abaixo segue link para o game Crystal Galaxy feito com html5 que você precisa apenas do mouse para jogar, o game no melhor estilo Zed Blade, clássico dos arcades nos anos 90 (veja o video). O Crystal Galaxy possui dois modos de jogos. O primeiro é um modo arcade, o internauta deve ir percorrendo a fase, destruindo inimigos e abrindo caminho. O outro modo é de sobrevivência, onde a nave não navega por muito espaço e deve resistir aos inimigos pelo máximo de tempo possível.
Jogar Crystal Galaxy (lembrando que você precisa usar o Firefox, chrome, safari ou opera para jogar).
Crystal Galaxy
O Clássico Commodore 64 será relançado!
21/12/10
Não se falava em outra coisa nos anos 80: a invasão dos computadores pessoais tinha chegado para ficar. Entre as opções estava o Commodore 64, um computador com o que de mais absurdo em termos de tecnologia existia na época. E por absurdo, entenda: processador de 1,02 MHz e memória de RAM de 64 KB, uma enormidade para 1982, o ano em que ele foi lançado.
Novo Commodore 64
Claro que o tempo passou e o Commodore 64 ficou ultrapassado. Já faz tempo que não averiguamos o poder de processamento por meio dos megahertz, e as memórias RAM também já estão na casa dos gigas. Felizmente a fabricante do C64x decidiu atualizá-lo. O equipamento passou por um upgrade completo, com direito a um novo processador Intel Atom de 1,8 GHz e memória RAM de 2 GB. Para completar, ainda ganhou 4 portas USB, leitor de discos em Blu-ray e placa de vídeo Nvidia Ion2. Quem pretende usar o C64x como central de mídia – já que ele conta com Blu-ray – ainda vai aproveitar uma saída HDMI e outra DVI, perfeitas para ligá-lo à televisão de 50 polegadas.
Commodore 64 original, dos anos 80
Curiosamente, o Commodore 64 da nova geração vai continuar com o mesmo design que o consagrou: um teclado de computador bastante parrudo, com todas as saídas na parte de trás. Não há previsão de quanto vai custar, mas é bom que os geeks mais saudosistas já comecem a juntar recursos para comprar esse belezinha.
Vogue da Rússia traz video-anúncio no papel
10/12/10
A edição deste mês da Vogue Rússia traz uma página com um player de vídeo embutido, que exibe um anúncio do drink Martini onde a atriz e ex-modelo italiana Monica Bellucci é a estrela principal. A informação é da agência de notícias Efe.
A técnica, conhecida como video in print (vídeo no impresso), consiste de uma pequena tela plana de LCD com um alto-falante ultrafino encaixado na folha de papel. No caso da revista russa, o vídeo começa a tocar quando o leitor chega na página que contém a peça publicitária.
De acordo com a Efe, é a primeira vez na Europa que uma revista traz um anúncio assim. Para a editora Elena Zaitsev, a Vogue russa “é uma revista de máxima qualidade que divulga as tendências mais sofisticadas aos leitores”. Segundo ela, portanto, é natural que a revista seja pioneira em adotar o inovador formato de publicidade em vídeo.
Em 2009, a revista americana Entertainment Weekly trouxe em uma de suas edições um player de vídeo embutido que rodava anúncios da CBS e da Pepsi. Confira como funciona:
Droid 2 inspirado em Star Wars
28/09/10
Os Fãs de Star Wars (ao qual me incluo Totalmente) não terão um R2-D2 como aliado tão cedo. A Motorola, porém, fez o favor de brindar-nos com a criação de um Android inspirado no robôzinho. O Droid 2, irmão gringo do nosso conhecido Milestone, ganhou uma versão especial que lembra muito o R2-D2.
O aparelho vem em uma caixa que alude à carbonita, elemento usado em Star Wars para manter o capitão Han Solo congelado vivo. Na parte de trás, ele reproduz a superfície cheia de botões e encaixes do R2-D2. Para não dizer que só mudou o Droid da aparência, a Motorola também colocou aplicativos especiais de Star Wars, widgets customizados, toques de campainha relacionados ao robô etc. Outro detalhe é uma dock com estampa de circuitos, que vem junto no pacote.
A versão especial do Droid 2 custará mais caro que o smartphone original, mas isso não deve dificultar suas vendas. Fazer versões de produtos lembrando Star Wars sempre foi uma estratégia para chamar a atenção, vide a edição limitada do PSP, da Sony, com a imagem do Darth Vader. O lançamento é uma comemoração aos 30 anos da chegada de Star Wars aos cinemas.
O smartphone roda Android 2.2 e tem CPU de 1 GHz, além de um teclado físico. Essa versão será vendida a partir de 30 de setembro pela operadora Verizon. O preço é de 250 dólares, depois de um desconto dado devido ao contrato com a operadora. Por que a Vivo, a TIM, a Claro e a Oi também não vêm para o lado bom da força e têm ideias tão geniais?
Novidades do HTML5
01/07/10
Muito se fala sobre as novidades do HTML5 e o que ela irá representar para as novas aplicações WEB.
Este post tem a proposta de apresentar o que está sendo discutido na atual especificação, o que já está efetivamente sendo suportado por alguns browsers, bem como analisar o impacto destas novidades no futuro das aplicações web.
O HTML5
O HTML5 foi criado pelo WHATWG (Web Hypertext Application Tecnhology Working Group), grupo formado por desenvolvedores de diversas empresas, como Opera, Mozilla e Apple, que estavam descontentes com o rumo que a W3C estava dando ao XHTML. A proposta do HTML5 é ser uma linguagem melhor preparada para construção de aplicações WEB, bem como ser independente de plugins, além de ter novos elementos que dão mais semântica ao conteúdo. Atualmente o WHATWG e o W3C trabalham em conjunto no desenvolvimento do HTML5.
Embora a versão final do HTML5 esteja previsto para 2012, muitos browsers já estão suportando algumas das principais novidades do HTML5, e a cada dia aparecem exemplos de bom uso dos novos recursos da linguagem na WEB. O Youtube, por exemplo, já possui uma versão experimental do portal em HTML5. http://www.youtube.com/html5
De acordo com a avaliação do HTML5Test, que classifica de 1 a 160 pontos o suporte dos browsers ao HTML5, temos:
1- Google Chrome 4.1 – 118 pontos
2- Opera 10.51 – 102 pontos
3- Firefox 3.6.3 – 101 pontos
4- Internet Explorer 7/8 – 19 pontos
Como podemos perceber a Microsoft – em suas atuais versões de browsers – não tem um bom suporte ao HTML5, porém já anunciou que suportará integralmente o HTML5 em seu novo browser, o IE 9 – com expectativa de lançamento no segundo semestre de 2010.
Um DOCTYPE de fácil memorização
O DOCTYPE possui uma nobre função: orientar o browser como ele deve renderizar o seu conteúdo, porém a memorização da sintaxe dos DOCTYPEs não é tarefa das mais fáceis, principalmente quando lembramos que são três as versões para o HTML 4.01/xHTML (transational, frameset e strict). Geralmente recorremos ao “copy+paste” para inseri-los na página. No HTML5, a declaração é feita em uma linha com 15 caracteres:
<!DOCTYPE Html>
Gráfico nativo com canvas
Uma das principais novidades do HTML5 é o elemento canvas, que através do javascript permite a criação de animações e jogos bem interessantes e, junto com o SVG, promete substituir tecnologias que exigem instalação de plugins, como o Flash, Silverlight e JavaFx.
Vamos utilizar como exemplo a criação de um gráfico simples. Veja a sintaxe do canvas:
<canvas id=”elementoCanvas” width=”900px” height=”200px”>
Seu browser não suporta elemento canvas
</canvas>
<script type=”text/javascript”>
var canvas=document.getElementById(’elementoCanvas’);
var ctx=canvas.getContext(’2d’);
// desenha um retângulo 100px X 100px, com cor vermelha, 50% de transparência
ctx.fillStyle=’rgba(255,0,0,0.5)’;
ctx.fillRect (20, 20, 100, 100);
// desenha um retângulo 100px X 100px, com cor verde, 50% de transparência
ctx.fillStyle=’rgba(0,255,0,0.5)’;
ctx.fillRect (40, 40, 100, 100);
// desenha um retângulo 100px X 100px, com cor blue, 50% de transparência
ctx.fillStyle=’rgba(0,0,255,0.5)’;
ctx.fillRect (60, 60, 100, 100);
// Escreve no gráfico
ctx.fillStyle = ‘#000′;
ctx.fillText (’Gráfico em Canvas, sensacional!’, 15, 15);
</script>
Resultado:
Obs.: Além do atributo “id” (utilizado para identificação via DOM), o elemento canvas só permite dois atributos (largura e altura), quando não especificados, temos por padrão: 300×150px.
Edição de textos em tempo real com o contentEditable
O atributo “contentEditable” foi criado pela Microsoft e incorporado no HTML5. Ele permite deixar “qualquer tag” do documento editável, os valores possíveis são “true” ou “false”.
<p contenteditable=”true” class=”contentEditable”>Você pode editar este texto, para isto, dê duplo clique sob o texto</p>
“Database” client-side
Um dos objetivos do HTML5 é melhorar a experiência do uso de Aplicações Web quando o usuário estiver off-line. Para isto, foi disponibilizada uma API para setar/capturar dados exclusivamente no browser. Uma espécie de “sessão” off-line em que o valor não pode ser capturado pelo servidor.
localStorage.setItem(’chave’,’valor’); // Setar o valor no ‘banco de dados local’
localStorage.getItem(’chave’) // capturar o valor;
localStorage.clear() // limpar o valor do banco de dados local;
Formulários – Novos campos de formulário
Muitas necessidades que os desenvolvedores possuíam e só preenchiam através do javascript foram implementadas no HTML5. Em apenas algumas linhas é possível disponibilizar componentes como: slider, autocomplete, campo data, além de validações de diversos campos. Veja algumas destas opções para formulários:
Telefone – <input name=tel type=tel> - Utilizado para entrada de dados de telefones
URL – <input name=url type=url> – Utilizado para entrada de variadas URLs. Por padrão o browser irá inserir o http:// como protocolo padrão
E-mail – <input name=email type=email> – Caso opte por validação, automaticamente o browser valida se o valor for um e-mail válido
Data e hora – <input name=horario type=datetime> – Utilizado para agendamento de eventos, reuniões, etc.
Número – <input name=numero type=number> – Com os atributos “min” e “Max” é possível entrar com um intervalo de valores possíveis e com o “step” é possível definir o valor para cada incremento
Tempo – <input name=tempo type=time>
Semana – <input name=semana type=week>
Slider – <input min=2 max=30 step=2 >
Atributo autofocus
Uma boa recomendação para melhorar a acessibilidade e usabilidade de uma página é já deixar o campo principal do cursor selecionado (focus no campo). Normalmente utilizamos a linha de javascript (document.getElementById(’nome_capo’).focus()) para deixar o campo focado.
<input maxlength=”256″ name=”q” value=”” autofocus>
Validações de Formulários
Não sera mais necessário a utilização de javascript para validação de formulários, no HTML5 existe o atributo “required”, que dentro de um elemento input torna o campo obrigatório e transfere para o browser a tarefa da validação do campo.
<p><label>Nome: <input required></label></p>
<p><label>Tel: <input required></label></p>
<p><label>E-mail: <input required></label></p>
<p><label>URL: <input required></label></p>
<button>Enviar</button>
Validação por expressão regular
Além de deixar o campo apenas como obrigatório, é possível colocar um padrão de entrada para aquele determinado campo, que será validado pelo browser.
Por exemplo, em um campo em que só possa entrar valores numéricos com 3 dígitos:
<input pattern=”[0-9]{3}”
name=”digito”
required
title=”Validação apenas para 3 dígitos”/>
Observe que o atributo pattern aceita expressões regulares.
Validação por range de valores
No tipo de campo “numérico”, é possível fazer uma validação dos valores possíveis de entrada utilizando os atributos min e max.
<input min=2 max=10 />
Autocomplete
Com HTML5 é simples exibir um input com “autocompletar”, este recurso é bem interessante, pois melhora significativamente a experiência do usuário no preenchimento do formulário – quando bem utilizado.
<label>Homepage: <input list=hpurls></label>
<datalist>
<option value=”http://www.uol.com.br/” label=”UOL”>
<option value=”http://www.uolhost.com.br/” label=”UOL HOST – Sensacional”>
<option value=”http://www.metadeideal.com.br/” label=”Metade Ideal”>
</datalist>
Novos elementos
O HTML5 inclui novos elementos para melhorar a semântica dos documentos e minimizar o excesso de utilização de DIVS e SPANS (tags sem semântica). Alguns dos novos elementos são:
Header – define o cabeçalho de uma seção
Article – define que o conteúdo é um artigo
Nav – define um menu de navegação
Footer – define um rodapé para a seção
Details – detalhes sobre alguma informação, caso tenha o atributo “open”, exibe o conteúdo, caso contrário esconde.
Figure – conjunto de imagens e legendas
Conclusão
Em portais e websites de larga audiência, com público variado, ainda é cedo para utilizar HTML5 (sobretudo pelo baixo suporte dos navegores líderes de mercado), porém, em Portais ou Webapplications, cujo o ambiente é conhecido (uma intranet por exemplo), já é possível e recomendado que utilizem os novos recursos.
Porém, antes de utilizar recursos do HTML5, pense exatamente qual será o benefício para o seu usuário, usar por usar apenas pelo hype (e se vangloriar para os amigos que você já utiliza html5), e não pensar na experiência do usuário será um erro.
Ter um bom discernimento de “onde usar” e “quando usar” HTML5 será fundamental para o sucesso do seu projeto.
Os usuários de Internet agradecem!
Links de Exemplo (ver preferencialmente no Ópera ou Google Crohme/Safari)
http://newsletter.uolhost.com.br/tutoriais/html5/exemplo1-canvas.htm
http://newsletter.uolhost.com.br/tutoriais/html5/exemplo2-local.htm
http://newsletter.uolhost.com.br/tutoriais/html5/exemplo3-autofocusl.htm
http://newsletter.uolhost.com.br/tutoriais/html5/exemplo4-required.htm
http://newsletter.uolhost.com.br/tutoriais/html5/exemplo6-forms.htm
O Autor
Esta publicação foi feita com base no artigo preparado por Marcelo Linhares. Marcelo é analista de sistemas do UOL HOST.
Nova Cara, nova vida!
23/06/10
Este é o primeiro post do Blog da Avanti, o primeiro passo da nova fase da agência: nova indentidade visual, novo site, e este debutante blog.
O objetivo do blog não é ser só mais um pedaço institucional do site da agência, mas também uma área de descontração, aqui você encontrará notícias, dicas, opiniões, links, videos, enfim, um mini portal sobre o mundo Web. Esperamos que sempre nos visite, opine, interaja, enfim participe!
Obrigado por sua visita!
Paulo Araujo
Gerente de contas
paulo@avanti.net.br
