Para quem não sabe, existe uma mídia muito legal na internet chamada Podcast, sim muita gente não conhece esse tipo de mídia mas eu gusto muito e indico você conhecer, um podcats é um programa de audio que geralmente tem uma duração de 1 hora, parece ser meio massante você ouvir um programa de audio de uma hora de duração, e realmente é massante você ouvir um programa assim, por esse motive que muita gente não se interessa nessa mídia, mas você precisa escolher os programas certos que combine mais com você, hoje no Brasil tem muitopodcast, centenas de podcasts, a grande maioria é chato, cansativo, mal editado, mal gravado, mas até mesmo aqueles podcasts que são muito bem feitos podem ficar muito chatos se vocês não estiver afim de ouvir esse podcast, Então o que eu quero com esse post é mostrar quais os meus podcasts preferidos, mas antes vou divulger meu próprio podcast, se chama Podcast Pluraclube, vou mostra abaixo a lista dos meus podcasts preferidos, tente escutar todos, inclusive o Pluraclube.
HappyHourTech
Orioncast
Cinecast
Rapaduracast
Nerdcast
Mobilidade FM
Café com games
Devoracast
Empreendecast
Falafreela
domingo, 23 de dezembro de 2012
quinta-feira, 20 de dezembro de 2012
Tutorial completo de HTML5 Passo a Passo Criação, Publicação, Edição, Exemplos
Hoje vou mostrar aqui um tutorial complete de HTML5 mostrando o passo a passo do desenvolvimento de animações e aplicações em html5, então vamos aos primeiros passos que é a instalação do editor de html5, caso você tenha alguma dúvida pode deixar um comentário que eu irei responder, e se esse post foi útil para você por favor divulgue para seus amigos em redes sociais.
Antes quero mostrar essa aplicação em html5 que eu desenvolvi para colocar na capa de um dos episódios la do meu podcast no site Pluraclube, Então eu criei uma animação que lembra um joguinho e que no final aparece uma cena de animação, ficou bem interessante e vai servir para você ver o que se pode fazer facilmente com html5, entra la no site e veja esse exemplo de animação em html5:
Alguns editors de html5 estão surgindo no Mercado, e por incrível que pareça quando surgiu o html5 ha pouco tempo atráz os desenvolvedores só criavam aplicações totalmente usando as linhas de códigos, mas finalmente estão surgindo editores de html5, eu vou indicar o Adobe Animate Edge, sim esse programa é a resposta da Adobe para o mundo inteiro que estava decretando a morte do Flash pelo html5, Então a Adobe fez um editor de html5 totalmente visual e muito parecido com o Flash pois possui até linha do tempo e você pode fazer animações arrastando objetos na tela, mas ele te possibilita editar totalmente os códigos javascript do aplicativo, eu vou te ensinar todas as funções que você pode manipular no Adobe Edge ainda nessa postagem.
Quando eu baixei o Adobe Edge Animate ele estava em fase de teste, portanto ele foi totalmente gratuíto, mas se você está vendo esse tutorial do future provavelmente você pode testar o programa por 1 mês de graça, Então entra ai no site Adobe Edge e clique em "Get started", você vai baixar o assistente de instalação da Adobe e ali nesse aplicativo você coloca para baixar o Adobe Edge.
Esse tutorial irá mostrar como usar o Adobe Edge mas mostrará também como funciona os códigos de html5, primeiramente ao abrir o Adobe Edge você obsera várias semelhanças com o Flash, principalmente por ter uma linha do tempo, mas para começar clique em Create Animation, para iniciar o primeiro projeto, então para adicionar o primeiro objeto no aplicativo procure alguma imagem qualquer e arraste para sua animação como mostra na imagem abaixo:
Observe que na parte de baixo do programa aparece 2 Layers que nesse caso se chama "Actions", a primeira se chama Stage que representa a animação em si, observe que eu mudei a cor de funco da stage para um vermelho vinho, ou seja, a stage é como uma janela onde sua animação vai aparecer, mas sim, no html5 a animação pode percorrer toda a página.
A segunda Action se chama lado1, você pode colocar qualquer nome, mas está ai nosso primeiro objeto em html5, o próximo passo é criar uma animação e adicionar linhas de códigos nesse objeto.
Para criar uma animação em nosso objeto temos que criar um "clip", Então clique com o botão direito do mouse na Action Lado1, depois em "Add Kayframe" e depois em "Clip", como mostrado na imagem abaico:
depois é fácil, observe que na linha do tempo tem um ponteiro em zero segundos, Então arraste esse ponteiro mais para frente como 5 segundos, depois arraste nosso objeto, aquela imagem que colocamos, arraste ela para outra posição na tela, Então você verá duas faixas verdes, uma com o left"esquerdo" e outra faixa representa o Top"topo", isso é fácil de entender, vai testando, vai mexendo nessas duas faixas para entender como funciona, Então vamos testar essa animação, é só você apertas as teclas "ctrl" + "Enter", assim irá abrir o navegador com sua animação, se não deu certo aperte ctrl Enter novamente.
Agora vamos adicionar comandos em JavaScript nesse nosso objeto, primeiro clique no nosso objeto e observe que na parte superior esquerda do programa, nas propriedades do objeto você verá um ícone parecido com esse {}, ao clicar nele você pode escolher quais interações provocarão a execução dos comandos que vamos colocar, escolha click, Então abrirá uma caixa de texto parecido com a imagem abaixo, nessa caixa você irá colocar os seus comandos em JavaScript, assim sempre que o usuario clica em nosso objeto ele irá executar esses comandos, observe que você pode escolher mais de uma forma de interação além de click tem duplo click, touch move, touch over entre outras interações e pode usar mais de uma interação, basta clicar em "+" como aparece na imagem abaixo:
Observe que adicionamos esse {} codigo em nosso objeto lado1, mas podemos adicionar esses códigos na linha do tempo de nossa animação, mas vamos agora adicionar alguns comandos nessas caixas de texto, primeiro em nossa linha do tempo vamos fazer o seguinte, arraste o ponteiro da linha do tempo do zero para 2 segundos Então clique no simbolo {} ao lado do Actions como mostrado na imagem acima, então se você adicionar o seguinte código "sym.stop();" a animação vai parar, mas nesse caso vamos colocar o seguinte código "sym.play(0);", esse código faz a animação criar um loop, ou seja, ao chegar em 2 segundos o ponteiro volta até 0 segundos e da um play, bem, com esses dois códigos você pode manipular a linha de tempo da animação de várias formas, por exemplo, crie um stop no Segundo 1 e coloque um objeto que ao clicar ele da um play para o Segundo 1 assim"sym.play(1001);", assim você já pode criar uma interação simples do usuário com a animação.
Mas o principal poder do html5 é você usar os comandos em JavaScript para manipular a animação, Então vamos entender um pouco como funciona essa manipulação.
O html de um site é formado por vários objetos ou tags, por exemplo, <h1> representa títulos, <img> representa imagem, e a principal tag é a <div>, a div é uma tag genérica e dentro dela podemos colocar qualquer coisa e manipular de várias formas, vamos fazer o seguinte, vamos fazer duas coisas, pegar a nossa div e depois mudra a imagem de fundo dela, você identifica uma div de duas formas, por uma class ou um ID, vamos colocar uma class em nossa div e depois manipular ela usando javascript:
-------------------
Adiciona dentro do <body> </body>
<div class="quadrado"></div>
-------------------
-------------------
Adiciona dentro do <javascript> </javascript>
$(".quadrado").attr('style', 'background-image:url('http://seusite.com/imagem-de-fundo.png)');
-------------------
O que fizemos é simples, demos um nome para nosso objeto, chamamos de quadrado, pegamos ele e adicionamos uma imagem de fundo, observe que antes do quadrado tem ".", esse ponto representa class, Então vamos fazer isso na nossa animação usando o Adobe Edge.
Primeiro selecione aquele nosso objeto que colocamos(aquela imagem), e nas propriedades você irá ver um simbolo de "c", serve para adicionar uma class ao objeto, escreva o nome da classe como na imagem abaixo:
Depois disso clique no simbolo {} e escolha a opção click, Então coloque nosso código javascript como na imagem abaixo:
Assim quando a pessoa clicar no objeto ele mesmo mudará de imagem de fundo, se você estiver usando esse código html5 em seu site saiba que você pode manipular qualquer tag/objeto da tela, agora vamos ver que tipo de manipulações podemos fazer, abaixo você verá apenas algumas básicas:
Fazer desaparecer:
$(".quadrado").hide();
Fazer aparecer:
$(".quadrado").show();
Escrever um texto dentro da div:
$('.quadrado').text("Texto qualquer");
Mudar cor do texto que está dentro da div:
$('.quadrado').attr('style', 'Color:#C8C8C8;');
Mudar largura:$(".quadrado").width(50);
Você também pode adicionar audio nessa animação:
var snd = new Audio("http://pluraclube.com/podcast/capasom.mp3");
snd.play();
Simples assim.
Esses são apenas alguns exemplos do que da para se fazer usando comandos JavaScript, você também pode usar um comando desses para aplicar comandos do famoso css3 como fazer girar, fazer desaparecer aos poucos, entre outras funções, mas css3 é um assunto para uma outra postagem.
Sembre-se que sempre use ctrl+Enter para testar sua animação.
Agora que a animação está pronta vamos adicionar ela em seu site, vamos publicar na internet, bem, quando você salva a animação, observe que algumas pastas são criadas, na pasta em que você salvou a animação tem uma pasta chamada "publish", dentro dela tem outra chamada "web", você terá que publicar tudo o que está dentro dessa pasta na internet, estou partindo do princípio que você possui um plano de hospedagem para colocar seu site, Então la no ftp você irá publicar esses arquivos e as pastas no seu site, se você não contratou ainda um plano de hospedagem de sites, eu recomendo que você faça isso agora, pois Então, eu utilizo o Filezila para colocar os arquivos em meu site, Então coloque todos esses arquivos da pasta web em seu site e vamos para o próximo passo.
Observe que o nome da minha animação se chama "capa", assim ele gera arquivos como "capa_edge", "capa_edgeActions", para ter mais de uma animação em html5 em seu site nunca repita o nome da animação, a próxima animação eu irei salvar como "capa2".
Agora nesse site onde você publicou os arquivos você pode adicionar em qualquer parte de seu site, o seguinte código:
<!--Adobe Edge Runtime--><script charset="utf-8" type="text/javascript" src="capa_edgePreload.js"></script>
<!--Adobe Edge Runtime End-->
<div id="Stage" class="EDGE-392101295" style="width: 530px; height: 300px; background-image: url('http://pluraclube.com/podcast/carregandoaguarde.png'); background-repeat: no-repeat;"></div>
Observe que eu adicionei uma imagem de fundo escrito "Carregando a capa, aguarde", se sua animação tiver muita imagem vai demorar um pouco para carregar, mas a principal vantage do html5 é que ele é totalmente mutiplataforma, essa animação que você desenvolver vai funcionar normalmente em navegador, desktop, em smartphone, Tablet, em navegadores de consoles como xBox, Nintendo, Playstation, video-games portateis, nas Smart Tvs, em qualquer coisa que tenha internet, então é uma ótima tecnologia, aguarde mais postagens e se você gostou desse site ajude na divulgação dele, se tiver alguma dúvida deixe um comentário que eu irei tirar suas dúvidas.
Exemplo de html5
Antes quero mostrar essa aplicação em html5 que eu desenvolvi para colocar na capa de um dos episódios la do meu podcast no site Pluraclube, Então eu criei uma animação que lembra um joguinho e que no final aparece uma cena de animação, ficou bem interessante e vai servir para você ver o que se pode fazer facilmente com html5, entra la no site e veja esse exemplo de animação em html5:
Qual o melhor editor de html5
Alguns editors de html5 estão surgindo no Mercado, e por incrível que pareça quando surgiu o html5 ha pouco tempo atráz os desenvolvedores só criavam aplicações totalmente usando as linhas de códigos, mas finalmente estão surgindo editores de html5, eu vou indicar o Adobe Animate Edge, sim esse programa é a resposta da Adobe para o mundo inteiro que estava decretando a morte do Flash pelo html5, Então a Adobe fez um editor de html5 totalmente visual e muito parecido com o Flash pois possui até linha do tempo e você pode fazer animações arrastando objetos na tela, mas ele te possibilita editar totalmente os códigos javascript do aplicativo, eu vou te ensinar todas as funções que você pode manipular no Adobe Edge ainda nessa postagem.
Baixar o Adobe Edge Animate
Manipular objetos em html5
Esse tutorial irá mostrar como usar o Adobe Edge mas mostrará também como funciona os códigos de html5, primeiramente ao abrir o Adobe Edge você obsera várias semelhanças com o Flash, principalmente por ter uma linha do tempo, mas para começar clique em Create Animation, para iniciar o primeiro projeto, então para adicionar o primeiro objeto no aplicativo procure alguma imagem qualquer e arraste para sua animação como mostra na imagem abaixo:
Observe que na parte de baixo do programa aparece 2 Layers que nesse caso se chama "Actions", a primeira se chama Stage que representa a animação em si, observe que eu mudei a cor de funco da stage para um vermelho vinho, ou seja, a stage é como uma janela onde sua animação vai aparecer, mas sim, no html5 a animação pode percorrer toda a página.
A segunda Action se chama lado1, você pode colocar qualquer nome, mas está ai nosso primeiro objeto em html5, o próximo passo é criar uma animação e adicionar linhas de códigos nesse objeto.
Criar animação com html5
Para criar uma animação em nosso objeto temos que criar um "clip", Então clique com o botão direito do mouse na Action Lado1, depois em "Add Kayframe" e depois em "Clip", como mostrado na imagem abaico:
depois é fácil, observe que na linha do tempo tem um ponteiro em zero segundos, Então arraste esse ponteiro mais para frente como 5 segundos, depois arraste nosso objeto, aquela imagem que colocamos, arraste ela para outra posição na tela, Então você verá duas faixas verdes, uma com o left"esquerdo" e outra faixa representa o Top"topo", isso é fácil de entender, vai testando, vai mexendo nessas duas faixas para entender como funciona, Então vamos testar essa animação, é só você apertas as teclas "ctrl" + "Enter", assim irá abrir o navegador com sua animação, se não deu certo aperte ctrl Enter novamente.
Criando comandos em html5
Agora vamos adicionar comandos em JavaScript nesse nosso objeto, primeiro clique no nosso objeto e observe que na parte superior esquerda do programa, nas propriedades do objeto você verá um ícone parecido com esse {}, ao clicar nele você pode escolher quais interações provocarão a execução dos comandos que vamos colocar, escolha click, Então abrirá uma caixa de texto parecido com a imagem abaixo, nessa caixa você irá colocar os seus comandos em JavaScript, assim sempre que o usuario clica em nosso objeto ele irá executar esses comandos, observe que você pode escolher mais de uma forma de interação além de click tem duplo click, touch move, touch over entre outras interações e pode usar mais de uma interação, basta clicar em "+" como aparece na imagem abaixo:
Observe que adicionamos esse {} codigo em nosso objeto lado1, mas podemos adicionar esses códigos na linha do tempo de nossa animação, mas vamos agora adicionar alguns comandos nessas caixas de texto, primeiro em nossa linha do tempo vamos fazer o seguinte, arraste o ponteiro da linha do tempo do zero para 2 segundos Então clique no simbolo {} ao lado do Actions como mostrado na imagem acima, então se você adicionar o seguinte código "sym.stop();" a animação vai parar, mas nesse caso vamos colocar o seguinte código "sym.play(0);", esse código faz a animação criar um loop, ou seja, ao chegar em 2 segundos o ponteiro volta até 0 segundos e da um play, bem, com esses dois códigos você pode manipular a linha de tempo da animação de várias formas, por exemplo, crie um stop no Segundo 1 e coloque um objeto que ao clicar ele da um play para o Segundo 1 assim"sym.play(1001);", assim você já pode criar uma interação simples do usuário com a animação.
Usando JavaScript e css no html5
Mas o principal poder do html5 é você usar os comandos em JavaScript para manipular a animação, Então vamos entender um pouco como funciona essa manipulação.
O html de um site é formado por vários objetos ou tags, por exemplo, <h1> representa títulos, <img> representa imagem, e a principal tag é a <div>, a div é uma tag genérica e dentro dela podemos colocar qualquer coisa e manipular de várias formas, vamos fazer o seguinte, vamos fazer duas coisas, pegar a nossa div e depois mudra a imagem de fundo dela, você identifica uma div de duas formas, por uma class ou um ID, vamos colocar uma class em nossa div e depois manipular ela usando javascript:
-------------------
Adiciona dentro do <body> </body>
<div class="quadrado"></div>
-------------------
-------------------
Adiciona dentro do <javascript> </javascript>
$(".quadrado").attr('style', 'background-image:url('http://seusite.com/imagem-de-fundo.png)');
-------------------
O que fizemos é simples, demos um nome para nosso objeto, chamamos de quadrado, pegamos ele e adicionamos uma imagem de fundo, observe que antes do quadrado tem ".", esse ponto representa class, Então vamos fazer isso na nossa animação usando o Adobe Edge.
Primeiro selecione aquele nosso objeto que colocamos(aquela imagem), e nas propriedades você irá ver um simbolo de "c", serve para adicionar uma class ao objeto, escreva o nome da classe como na imagem abaixo:
Depois disso clique no simbolo {} e escolha a opção click, Então coloque nosso código javascript como na imagem abaixo:
Assim quando a pessoa clicar no objeto ele mesmo mudará de imagem de fundo, se você estiver usando esse código html5 em seu site saiba que você pode manipular qualquer tag/objeto da tela, agora vamos ver que tipo de manipulações podemos fazer, abaixo você verá apenas algumas básicas:
Fazer desaparecer:
$(".quadrado").hide();
Fazer aparecer:
$(".quadrado").show();
Escrever um texto dentro da div:
$('.quadrado').text("Texto qualquer");
Mudar cor do texto que está dentro da div:
$('.quadrado').attr('style', 'Color:#C8C8C8;');
Mudar largura:$(".quadrado").width(50);
Você também pode adicionar audio nessa animação:
var snd = new Audio("http://pluraclube.com/podcast/capasom.mp3");
snd.play();
Simples assim.
Esses são apenas alguns exemplos do que da para se fazer usando comandos JavaScript, você também pode usar um comando desses para aplicar comandos do famoso css3 como fazer girar, fazer desaparecer aos poucos, entre outras funções, mas css3 é um assunto para uma outra postagem.
Sembre-se que sempre use ctrl+Enter para testar sua animação.
Adicionar html5 em meu site
Agora que a animação está pronta vamos adicionar ela em seu site, vamos publicar na internet, bem, quando você salva a animação, observe que algumas pastas são criadas, na pasta em que você salvou a animação tem uma pasta chamada "publish", dentro dela tem outra chamada "web", você terá que publicar tudo o que está dentro dessa pasta na internet, estou partindo do princípio que você possui um plano de hospedagem para colocar seu site, Então la no ftp você irá publicar esses arquivos e as pastas no seu site, se você não contratou ainda um plano de hospedagem de sites, eu recomendo que você faça isso agora, pois Então, eu utilizo o Filezila para colocar os arquivos em meu site, Então coloque todos esses arquivos da pasta web em seu site e vamos para o próximo passo.
Observe que o nome da minha animação se chama "capa", assim ele gera arquivos como "capa_edge", "capa_edgeActions", para ter mais de uma animação em html5 em seu site nunca repita o nome da animação, a próxima animação eu irei salvar como "capa2".
Agora nesse site onde você publicou os arquivos você pode adicionar em qualquer parte de seu site, o seguinte código:
<!--Adobe Edge Runtime--><script charset="utf-8" type="text/javascript" src="capa_edgePreload.js"></script>
<!--Adobe Edge Runtime End-->
<div id="Stage" class="EDGE-392101295" style="width: 530px; height: 300px; background-image: url('http://pluraclube.com/podcast/carregandoaguarde.png'); background-repeat: no-repeat;"></div>
Observe que eu adicionei uma imagem de fundo escrito "Carregando a capa, aguarde", se sua animação tiver muita imagem vai demorar um pouco para carregar, mas a principal vantage do html5 é que ele é totalmente mutiplataforma, essa animação que você desenvolver vai funcionar normalmente em navegador, desktop, em smartphone, Tablet, em navegadores de consoles como xBox, Nintendo, Playstation, video-games portateis, nas Smart Tvs, em qualquer coisa que tenha internet, então é uma ótima tecnologia, aguarde mais postagens e se você gostou desse site ajude na divulgação dele, se tiver alguma dúvida deixe um comentário que eu irei tirar suas dúvidas.
Blog Pessoal de Cristiano Rossetti Pereira
E agora sim estou começando meu blog pessoal, estou bem empolgado com esse blog pois aqui posso postar qualquer coisa e acredito que ele irá ajudar as pessoas também pois eu pretendo postar aqui algumas coisas que eu estou aprendendo, por exemplo, nesse momento, 2012, eu estou aprendendo algumas coisas como desenvolvimento de aplicativos para Android, Windows 8 e aplicações em html5, Então eu irei escrever aqui alguns tutoriais sobre aplicativos, eu também nesse momento estou desenvolvendo alguns jogos, o meu último jogo se chama Table Indie, Então colocarei alguns tutoriais de jogos também, mas eu pretendo publicar videos, quem sabe, então assine o blog e até a próxima.
Cristiano Rossetti Pereira
Cristiano Rossetti Pereira
Assinar:
Postagens (Atom)