HTML5 – Blog Goweb Agency

Bye! Microsoft Edge também vai trocar Flash por HTML5 em seu próximo update

goweb — Mon, 11 Sep 2017 09:30:34 +0000

Embora em outros tempos sua tecnologia e seus recursos fossem verdadeiros reis da internet, adornando sites de todos os tipos, temas e gostos, o Flash está quase que literalmente com os seus dias contados. Depois de a Google lançar oficialmente uma versão do Chrome que chuta o formato para escanteio em favor do mais atual e dinâmico HTML5, agora é a vez da Microsoft mandar avisar que o novo navegador da casa, o Edge, também vai seguir um caminho parecido.

De acordo com uma postagem no blog oficial do Windows 10, a empresa de Redmond deixou claro que o antigo padrão vai ser praticamente aposentado na próxima atualização do browser. A ideia é que, ao ser instalado, o programa desabilite automaticamente o Flash e ative a reprodução em HTML5 caso ela esteja disponível na página. Se o novo player não for oferecido, o software deve apresentar aos internautas a opção de ativar o plugin legado.

O usuário terá a opção de ativar o plugin caso seja necessário

A estratégia é bem semelhante a implementada recentemente pela Gigante das Buscas, incluindo a “isenção” desse bloqueio a grande portais e sites que ainda dependem muito dessa tecnologia – embora, no caso da Microsoft, não haja uma listagem das marcas nessa situação ou quanto tempo elas têm para se adaptar ao novo formato. Segundo a publicação da companhia, os integrantes do programa de testes da casa – o Insider – devem receber muito em breve esse update, ajudando a polir possíveis rebarbas dessa mudança.

“Google, Apple e até Mozilla já deixaram claro seus planos de substituir o Flash”

Quando o usuário final pode esperar pela novida? Tudo indica que essa versão do navegador vai ser liberada ao público geral no início de 2017, muito provavelmente junto do já bastante aguardado Creator’s Update – o próximo grande pacote de atualizações programado para o Windows 10. Seja como for, não é como se a Microsoft estivesse dando algum tipo de golpe baixo na Adobe, uma parceira de longa data. Isso porque Google, Apple e até Mozilla já deixaram claro seus planos de substituir completamente o Flash no futuro próximo.

FONTE(S) THE VERGE/CHAIM GARTENBERG
IMAGEN(S) WINDOWS BLOG

Origem: https://goo.gl/r3MSZp

The post Bye! Microsoft Edge também vai trocar Flash por HTML5 em seu próximo update appeared first on Blog Goweb Agency.

Como converter um vídeo para HTML5

goweb — Fri, 08 Sep 2017 09:30:20 +0000

Exibir vídeos em uma página na web tornou-se bem comum, principalmente depois que os portais como o YouTube passaram a oferecer os códigos de “embed”, que permitem incorporar o conteúdo à qualquer site ou blog facilmente.

Com o surgimento do HTML5, ter vídeos nas páginas ficou ainda mais simples.

Por isso, muitas pessoas procuram maneiras de utilizar o novo recurso oferecido pela quinta forma do HTML em seus blogs e sites pessoais.

Nós preparamos este rápido tutorial a fim de mostrar todos os passos necessários para você converter os vídeos para HTML5 e utilizá-los em uma página web. Veja como é simples!

Você vai precisar de…

Para a execução dos passos descritos abaixo, você vai precisar ter o programa Freemake Video Converter instalado em seu computador. A aplicação é compatível com todas as versões mais recentes do Windows e pode ser utilizada em qualquer máquina sem problemas.

Atenção na instalação

Durante o processo de instalação do Freemake Video Converter, você precisa ficar atento para não instalar toolbars indesejadas ou ter as configurações pessoais do seu navegador modificadas sem a devida autorização.

Em uma das telas do assistente, é possível escolher entre as opções “Quick installation (ad-supported)” e “Parameters settings (Advanced)”. Para evitar a adição de barras de ferramentas ao navegador, selecione a segunda opção e desmarque todos os itens exibidos abaixo dela, como mostra a imagem a seguir.

Além disso, você também pode selecionar se deseja ou não a instalação dos plugins do Freemake Video Converter para o Firefox e o Google Chrome

Convertendo os vídeos

1) Na tela principal do Freemake Video Converter, clique sobre a opção “Video”, presente na barra de ferramentas superior do programa.

2) Agora, adicione os vídeos que deseja converter. Você pode criar uma lista com quantos arquivos quiser. O programa faz a conversão de cada um separadamente.

3) Feito isso, é hora de selecionar o formato para o qual os arquivos serão convertidos. Na barra de ferramentas localizada na parte inferior da janela do programa, clique na seta para a direita até que a opção “to HTML5” seja mostrada.

4) Clique sobre o item “to HTML5” e aguarde alguns instantes para que a tela de configurações apareça.

5) O próximo passo é escolher a resolução para o arquivo de saída. Além das opções tradicionais, o Freemake Video Converter também permite que o conteúdo seja exibido em alta definição.

6) Agora, é só escolher o diretório no qual o vídeo convertido será armazenado e o tamanho limite do arquivo, se assim desejar.

7) Para finalizar o processo, clique em “Converter” e aguarde até que a tarefa seja finalizada.

Vídeo convertido! E agora?

Quando os seus vídeos forem convertidos, o Freemake Video Converter exibe uma tela com os quatro passos necessário para você exibir os arquivos em uma página da internet.

De forma resumida, é preciso hospedar o conteúdo áudio visual em algum servidor, para que ele possa ser linkado em seu site, e copiar o código fornecido pelo Freemake Video Converter entre as tags e da sua página.

Pronto! Na tela com as instruções, também é possível pré-visualizar o vídeo e ter uma ideia de como ele será mostrado no seu site. Assim, você pode fazer os ajustes necessário antes mesmo de colocar o conteúdo no ar.

Quer saber mais sobre HTML5? Então não deixe de conferir o artigo “O que é HTML 5?” e fique por dentro de tudo o que a quinta edição do código mais utilizado na internet tem para oferecer.

Origem: https://goo.gl/K5u1YI

The post Como converter um vídeo para HTML5 appeared first on Blog Goweb Agency.

Qual a diferença entre sites em Flash e em HTML5?

goweb — Wed, 06 Sep 2017 09:30:34 +0000

Páginas web com conteúdo dinâmico não são mais nenhuma novidade.

Graças ao Flash, da Adobe, hoje é possível criar sites totalmente animados e com uma rotatividade de conteúdo muito maior do que antigamente. Mesmo assim, a tecnologia da Adobe deixa um pouco a desejar no quesito velocidade de carregamento, além de exigir a instalação do plugin nos navegadores para funcionar corretamente.

Por isso, quando surgiu o HTML5, muitas pessoas diziam que o Flash iria morrer, pois, além de carregar o conteúdo dinâmico de forma muito mais rápida do que o seu “concorrente”, a quinta forma do HTML funciona sem a necessidade de ferramentas extras, desde que o navegador tenha suporte à tecnologia.
Como você pode perceber nos parágrafos acima, Flash e HTML5 possuem suas particularidades e cada um leva vantagem em um determinado ponto. Enquanto um trabalha com Ogg Theora e H.264, o outro faz uso de H.264 e AAC. É difícil dizer qual a melhor tecnologia, mas, por enquanto, a melhor opção vem sendo o HTML5.

Ampliar

Embora o formato mais recente ainda não tenha a mesma quantidade de recursos que o Flash, o seu uso é bem mais simples e, como citado anteriormente, dispensa o uso de plugins no navegador. Além disso, o conteúdo é exibido de forma bem mais rápida quando o HTML5 é utilizado, principalmente no caso dos vídeos.

Para os portáteis, o HTML5 está sendo considerado uma salvação. Isso porque alguns aparelhos, como iPhones, iPads e aqueles com a última versão do Android, não possuem suporte ao Flash. Além de abrir um mercado novo para a nova tecnologia, essa falta de apoio dos dispositivos móveis à Adobe limita muito a reprodução de alguns conteúdos nas páginas, fazendo com que muitos desenvolvedores recorram ao HTML5.

Mas se você está pensando que o Flash está com os dias contados, é melhor esperar mais um pouco para tirar suas conclusões.

Engatinhando

Mesmo oferecendo diversas vantagens, o HTML5 possui muitas limitações. Para começar, não são todos os navegadores que suportam a quinta forma do HTML. Apenas Internet Explorer, Chrome e Safari reproduzem corretamente sites desenvolvidos utilizando a tecnologia mais recente.

(Fonte da imagem: W3C)

Além disso, o HTML5 não suporta streaming de vídeos, webcam e reprodução de conteúdo audiovisual em tela cheia. Um problemão para portais que dependem de tais funcionalidades para tornar a exibição de alguns itens mais interessante.

Ao que tudo indica, Flash e HTML5 terão que conviver lado a lados por algum tempo. Mas não há dúvida de que a Adobe precisa melhorar, e muito, a sua tecnologia para não perder colocação quando os novos recursos da linguagem de programação web começarem a ganhar seu espaço e a conquistar mais seguidores.

Quer saber um pouco mais a respeito do HTML5? Então não deixe de acessar o artigo “O que é HTML5?”. Abaixo, você confere uma lista com alguns sites que utilizam os recursos oferecidos pela nova tecnologia.

Não deixe de ler o artigo “14 experimentos com HTML 5 de cair o queixo” para visualizar mais algumas características do HTML5.

Origem: https://goo.gl/hqQd3l

The post Qual a diferença entre sites em Flash e em HTML5? appeared first on Blog Goweb Agency.

14 experimentos com HTML 5 de cair o queixo

goweb — Mon, 04 Sep 2017 09:30:41 +0000

Nos últimos meses, o HTML 5 vem ganhando destaque por conquistar cada vez mais um espaço que até então parecia exclusivo das aplicações em Flash. Embora o software da Adobe continue sendo usado por uma grande quantidade de sites, a falta de suporte à tecnologia em produtos Apple e, futuramente, também no Windows 8, faz com que surjam dúvidas quanto a seu futuro.

É fácil entender os motivos pelos quais o HTML 5 ganha cada vez mais espaço e conquista a preferência das fabricantes. Dispensando totalmente a instalação de qualquer espécie de plugin, a tecnologia permite inserir vídeos, jogos e conteúdos interativos em sites de uma forma simples para o desenvolvedor e mais confortável para o usuário.

Para tornar o processo de desenvolvimento mais simples, a linguagem utiliza tags objetivas que dispensam o uso de códigos complicados para o desenvolvimento de sites mais interessantes. Nesse artigo, apresentamos alguns exemplos do que pode ser feito por essa tecnologia que deve mudar de forma substancial a internet nos próximos anos.

The Wilderness Downtown

Nesse endereço, basta digitar o nome de uma cidade qualquer para transformá-la em uma peça importante dentro de um videoclipe. Para tornar o resultado mais interessante, são abertas diversas abas com tamanho variável no navegador, cada uma mostrando um ângulo diferente da ação.

Para obter um filme com mais elementos, é indispensável escolher uma localização que esteja retratada no serviço Google Street View. Depois de assistir ao resultado final, é possível compartilhá-lo com amigos através de sites como o Facebook e o Twitter.

Flower Power

Exemplo da interatividade, o FlowerPower é um site que permite aos usuários escrever ou desenhar qualquer coisa usando flores que desabrocham com um simples clique do mouse.

Controladores na parte superior da tela permitem alterar o tamanho da escrita e até mesmo a velocidade com que as flores surgem. O resultado é só uma mostra do que o HTML 5 pode entregar sem em nenhum momento interferir no desempenho de um navegador.

WebGL Water Simulation

Recomendado somente para quem possui instalada uma placa de vídeo um pouco mais atual, o WebGL Water Simulation é um belo exemplo das capacidade 3D do HTML 5. Esse experimento mostra uma interação com a água extremamente realista, incluindo uma fonte de luz que se adapta ao posicionamento de cada elemento e ao ângulo de visualização escolhido pelo usuário.

ROME

Um surpreendente videoclipe interativo que mistura filmagens com atores reais, animação em 3D e desenhos tradicionais, ROME guia o usuário por uma viagem surreal em que nada é o que realmente parece ser.

A interação com os elementos presentes na tela se dá através do ponteiro do mouse, que pode ser usado para mudar o ângulo da câmera, revelando detalhes que normalmente passariam despercebidos. Além disso, também podem ocorrer transformações em elementos do cenário, com resultados bastante coloridos e surreais. Para obter um melhor desempenho, é imprescindível o uso do navegador Google Chrome.

Voxels

Uma espécie de LEGO virtual no qual é possível adicionar uma grande quantidade de peças das mais variadas cores. Usando somente o ponteiro do mouse, o usuário pode mudar rapidamente o ângulo de visão e mudar o nível de zoom dos elementos apresentados na tela.

Google Sphere

Que tal se, em vez de apresentar os resultados de uma busca na forma de listas, o Google aproveitasse melhor o espaço em branco disponível em sua página inicial? É justamente isso que faz o Sphere, transformando qualquer busca em uma verdadeira nuvem de tags interativa.

Conductor

Diversas linhas se movem de forma totalmente aleatória pela tela e, ao se cruzarem, resultam na reprodução de diferentes notas musicais. O usuário possui a liberdade de usar o ponteiro do mouse para interagir com qualquer elemento da tela, em uma experiência que impressiona pela criatividade.

Asteroids

Uma recriação em três dimensões do jogo clássico lançado pela Atari em 1979, essa versão de Asteroids apresenta gráficos atualizados que rodam diretamente no navegador, dispensando a instalação de qualquer plugin. Ideal para passar o tempo em uma tarde de tédio.

Ball Pool

Nessa bela experiência com HTML 5, o usuário tem à disposição bolas de diversos tamanhos que pode movimentar da maneira que deseja pela tela. O projeto se destaca pela física realista e pela interação que possui com o navegador.

Não deixe de testar ações como clicar duas vezes sobre um objeto, selecionar o plano de fundo ou literalmente chacoalhar o navegador para ver as bolas saltando de um lado para o outro da tela. A experiência é interessante o bastante para justificar a perda de uma boa quantidade de minutos em frente ao computador.

Magnetic

Aprenda mais sobre a forma como ímãs atuam sobre partículas presentes no ambiente e entre si mesmos. Além de arrastar os elementos da tela, o usuário pode adicionar novos ímãs com tamanhos variáveis usando um duplo clique do mouse em qualquer lugar do ambiente.

Z-Type

Teste sua velocidade de digitação nesse jogo viciante em que o objetivo é escrever o mais rápido possível as palavras que surgem na tela. Cada letra correta garante um tiro, e é preciso uma boa habilidade no teclado para derrotar os inimigos que surgem nos estágios mais avançados do título.

BreakDOM

Nesse remake do game Breakout, o jogador utiliza uma barra de rolagem para controlar uma bola responsável por eliminar diversas caixas de seleção. Os controles são simples e podem ser efetuados tanto através do mouse quanto pelas setas do teclado.

Trail

Faça desenhos coloridos na tela do navegador usando traços que acompanham a movimentação do ponteiro do mouse. Para expandir o raio dos traços que ficam girando de forma constante, basta pressionar e segurar o botão esquerdo do dispositivo.

Typographic Rain

Uma verdadeira chuva de caracteres vai inundar seu navegador neste experimento que mostra como diferentes elementos de HTML 5 podem interagir entre si. Cada uma das letras que “chove” na tela é constituída por um código diferente, que responde de forma realista aos demais elementos da tela.

Além de contar com uma espécie de guarda-chuva que bloqueia determinados caracteres, o usuário pode alterar o tamanho das letras, a frequência com que elas caem e até mesmo o nível da gravidade presente no ambiente.

Origem: https://goo.gl/KZVdj9

The post 14 experimentos com HTML 5 de cair o queixo appeared first on Blog Goweb Agency.

HTML5: surpreenda-se com as possibilidades gráficas de Canvas

goweb — Wed, 30 Aug 2017 09:30:38 +0000

Nenhum software externo é usado nestas animações. (Fonte da imagem: Reprodução/Codepen.Io)

Se você é programador, entusiasta a web designer ou apenas gosta de ficar por dentro do “mundo mágico da programação”, estas demonstrações do poderio gráfico de Canvas certamente vão lhe chamar a atenção.

E detalhe: os códigos listados a seguir são também um convite a quem “gosta de brincar com a física”, conforme comenta o próprio criador das animações.

Mas estamos falando do quê? O Canvas é um elemento de HTML5 capaz de delimitar uma área específica na página para a renderização dinâmica de gráficos. A linguagem mais utilizada por esse recurso é a Javascript – que permite, portanto, a criação de animações através de códigos de programação dinâmica.

Para visualizar e até mesmo interagir com os códigos elencados abaixo, clique sobre a opção “Ver demo” (ao lado do título de cada uma das animações); você será automaticamente direcionado ao site Develop Mozila ou ao Codepen.Io – endereços responsáveis por hospedar os recursos interativos.

1 – Zen Photon Garden (Ver demo)

Clique em “Ver demo” para acessar a animação. (Fonte da imagem: Reprodução/DeveloperMozila)

Esta demonstração permite que linhas sejam desenhadas na tela. Um tipo de feixe de luz branca fica ao fundo do monitor; os seus rabiscos vão funcionar como uma rede, filtrando alguns raios luminosos.

2 – Tear-able Cloth (Ver demo)