Projeto: Photomagic
11/08/10
O mais novo projeto desenvolvido pela Avanti! Agência Digital, Photomagic, é um Job feito para a agência Wide Infinity Comunicação.
O site é a divulgação do trabalho liderado pelo ilustrador Mauricio Oliveira (criador de diversos personagens como Lily Flora, Una Luna dentre outros) que consiste em unir o sonho de toda criança a realidade em temas para festas infantis, levando-as para o universo animado através de ilustrações e vetorizações, criando imâs, banners, etc.
Acesse o site e conheça um pouco mais: photomagic.art.br
Que tal entregar uma pizza?
10/08/10
Já pensou em entregar pizza em uma cidade infestada de zumbi?
Esta é a proposta da Piazzaria Hell (isso mesmo inferno!) da Nova Zelânida, com um video interativo em que você controla o destino do personagem e dependendo da sua escolha isso pode significar a sua morte!!!
Mas deixemos de conversa e vamos logo a ação:
Logo Internet Explorer CSS3
26/07/10
Analisando o poder do CSS3 e juntamente com as funções do HTML5, teremos uma web muito interessante, muito mais produtiva e acessível, é o que podemos ver no exemplo de Andreas Jacob, em que ele cria o logo do internet explorer (argh!) totalmente com css3:
E como os browsers renderizam:
link do exemplo: http://cordobo.com/wp-content/uploads/ie-pure-css-logo/
Funk do Corel Draw
08/07/10
Em meio aos Jobs do dia, o Will nosso programador me aparece com esse hilário funk do cÓrel Vale muito a pena conferir. Lembrando aos fãs e usuários que nada temos contra ao nosso amigo do balãozinho.
Impressora Lego
07/07/10
Que a franquia Lego é uma das que mais soube renovar-se para sobreviver aos novos tempos é inegável, mas além da empresa, muitos admiradores do brinquedo conseguiram achar uma nova utilidade para ele. É o caso desta impressora caseira com estrutura toda feita com Lego e usa uma canetinha (sim aquela velha e boa canetinha de contorno da escola), veja o video:
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.
CSS Quizz
28/06/10
Quantas propriedades CSS você consegue nomear em 7 minutos? este é o desafio do site: http://www.oneplusyou.com/bb/css_quiz
É um game interessante e nos faz puxar pela memória aquela propriedade que não usa a bastante tempo, além disto no final você ganha um super prêmio, um banner falando do seu feito, da uma olhada no meu:
73
Vale a pena conferir!
Marketing para mendigos?
23/06/10
Vídeo bastante interessante e divertido mostrando como o marketing ajuda a todos, sem distinção de cor, raça ou condição social.
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
