Artigos com o marcador html5
Adobe lança a Creative Suite 5.5
03/05/11
A Adobe finalmente lançou a o pacote de programas Creative Suite 5.5, uma atualização intermediária (a primeira, na verdade) dos seus softwares para criação de publicações impressas, vídeo e conteúdo para web. Uma apresentação do novo produto já tinha sido feita no Brasil no mês passado.
“O Adobe Creative Suite 5.5 tem importantes avanços em HTML5 e Flash, permitindo que designers e desevolvedores criem ótimo conteúdo e aplicativos. O Creative Suite 5.5 tem novas capacidades na área de publicação digital. Com os programas, autores em todo o mundo podem aumentar o impacto de seus trabalhos em múltiplas plataformas, sistemas operacionais, navegadores, smartphones e tablets – incluindo o Android, BlackBerry, Tablet OS e os dispositivos iOS da Apple.”
Segundo o Mac Rumors, a suíte de programas está disponível em várias versões de pacotes (de acordo com a preferência e necessidade do consumidor) e as atualizações das versões anteriores da Creative Suite podem ser feitas a um preço promocional.
Mas as novidades da Adobe não pararam por aí. A empresa também anunciou uma atualização gratuita para o Photoshop 12.0.4 para os atuais usuários da Creative Suite 5, trazendo o suporte para aplicativos para iPad, estendendo a funcionalidade do programa de edição de imagens.
“Os aplicativos criados até agora são exercícios de interface com os produtos da Adobe”, explicou Paulo Franqueira, App Engineer da empresa, em um evento da Adobe em abril. “Com o novo Photoshop da CS 5.5, é possível usar um tablet para comandar o programa no computador, via Wi-Fi”, disse.
Os aplicativos Eazel, Nav e Color Lava (que fazem parte do SDK das ferramentas de edição do Photoshop com o iPad) ainda não estavam disponíveis na App Store quando esta nota foi escrita. O Nav serve para que o usuário controle o Photoshop pelo tablet, trocando de ferramentas com um toque na tela; o Color Lava permite criar paletas de cores personalizadas para usar no programa e compartilhar com os amigos; e o Eazel é um programa de pintura para criar projetos em alta definição.
Via MacMais
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…
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
Abertura Star Wars com CSS3+HTML5+JavaScript
18/09/10
Temos mais uma excelente amostra do que pode ser feito com CSS3+HTML5+JavaScript, trata-se da famosa abertura dos filmes de Star Wars:
Para conseguir visualizar, você deve acessar o link usando o Chrome, Safari que são baseados no webkit e oferecem melhor suporte aos novos padrões.
Alguns recursos interessantes que foram usados:
- @font-face: que serve para exibir uma fonte que vc não tem instalada
- css3: uso de varias propriedades especificas do webkit para poder fazer a atualização da imagem, como: -webkit-animation
- Uso da tag audio do html5 para tocar a musica
- Uso de javascript para coisas especificas, como dar um timeout na musica, e chamar o google analytics.
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.
