Olá pessoal! Depois de alguns meses, estou aqui novamente...
Desta vez, venho rapidamente para deixar um tutorial externo para a criação de jogos 2D em HTML5 (Canvas + JS). Como o último assunto que eu estava tratando aqui no Blog era exatamente a nova "versão" do HTML, achei que seria interessante divulgar um tutorial bem legal sobre o desenvolvimento de jogos utilizando os novos recursos da mesma. Infelizmente, ele se encontra em inglês, mas, mesmo que você não tenha o domínio de tal idioma, recomendo muito que dê uma olhada, mesmo que precise utilizar um tradutor.
HTML5 Rocks - No Tears Guide to HTML5 Games
Nesse site, inclusive, há um amontoado de tutoriais sobre HTML5 (bom, esse é um dos objetivos dele), portanto, façam bom proveito!
Se quiserem um exemplo de joguinho sendo desenvolvido baseado nesse tutorial, podem conferir uma "aberração" que estou desenvolvendo para um trabalho da faculdade (disciplina de Desenvolvimento de Páginas Web).
Creio que isto seja tudo por enquanto...
Até a próxima!
PS: Quanto ao tutorial de HTML5 que eu estava fazendo e quanto a própria continuidade de blog, pretendo dar seguimento a ambos, porem ainda não possuo uma previsão de quando irei trazer este blog de "volta a vida".
Anúncios
quarta-feira, 3 de outubro de 2012
domingo, 27 de maio de 2012
Tutorial HTML 5, parte 2 - Diagramação
Vamos a questão da diagramação!
Anteriormente, quando fazíamos a diagramação de nossos sites, utilizávamos <div>, <div> e mais <div>... bom, isso não mudou muito, porem, agora, ao invés de criarmos um <div> para para definirmos os setores de nosso layout, temos um conjunto de tags para tornar mais lógica a distribuição do conteúdo de nossas páginas, facilitando o trabalho de ferramentas de indexação e, até mesmo, de acessibilidade. São essas tags:
Para demonstrar esse novo método de estruturação, abaixo segue um exemplo teórico e bem simples (sem qualquer conteúdo), seguido de um link para um exemplo "prático" bem simples que eu, inclusive, utilizei recentemente para um trabalho da faculdade.
Agora, ao exemplo mais prático:
Para visualizá-lo, basta clicar em "exemplo" abaixo e, para visualizar o código do mesmo, basta, em seu navegador, procurar pela opção "Visualizar/Exibir código fonte" ou, na maioria dos casos, apertar em seu teclado "CTRL + U".
Exemplo
Bom, acho que isto foi tudo por enquanto.
Quanto ao próximo post, não tenho certeza do que irei tratar, porem, quando resolver isso, editarei esta postagem e começarei a escrever a próxima.
Ah! Também é possível que eu edite esta para adicionar algo que possa ter ficado faltando (por exemplo, estou pensando em comentar o código HTML postado aqui, apesar de o mesmo já ser meio "auto explicativo".
Tutorial HTML 5, parte 3 - ...
As formatações efetuadas nos comandos e trechos de arquivos de configuração foram geradas utilizando a "ferramenta" Source Code Formatter, encontrada neste link.
Anteriormente, quando fazíamos a diagramação de nossos sites, utilizávamos <div>, <div> e mais <div>... bom, isso não mudou muito, porem, agora, ao invés de criarmos um <div> para para definirmos os setores de nosso layout, temos um conjunto de tags para tornar mais lógica a distribuição do conteúdo de nossas páginas, facilitando o trabalho de ferramentas de indexação e, até mesmo, de acessibilidade. São essas tags:
- <header></header> : define o "cabeçalho" de sua página ou de seções da mesma, ou seja, na maioria dos sites, onde ficam o logotipo e/ou título da página e opções de navegação, e, no caso de seções, onde se encontram o título e eventuais descrições;
- <nav></nav> : define as opções de navegação, ou seja, é a área onde se definem os menus (listas) de navegação para as páginas de seu site;
- <article></article> : define um artigo ou, de forma mais "clara", uma área de página que reúne um determinado tipo de conteúdo, como, por exemplo, as de postagens de um blog;
- <section></section> : define uma seção "genérica" de uma página, ou seja, uma parte "qualquer" de uma página (eu, normalmente, o utilizo para separar elementos relacionados, como, no caso de um blog, cada post);
- <aside></aside> : define uma área lateral ao conteúdo principal da página, como uma barra lateral ou menu lateral (se fossemos utilizar este blog como exemplo e ele fosse construído utilizando HTML 5, a área a direita desta postagem poderia ser montada dentro de uma tag "aside");
- <footer></footer> : assim como a tag <header> define um cabeçalho, a tag <footer> define um rodapé, seja de uma página, seja de uma seção.
Para demonstrar esse novo método de estruturação, abaixo segue um exemplo teórico e bem simples (sem qualquer conteúdo), seguido de um link para um exemplo "prático" bem simples que eu, inclusive, utilizei recentemente para um trabalho da faculdade.
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>Meu blog</title>
5: </head>
6: <body>
7: <header>
8: <h1>Meu blog</h1>
9: <nav>
10: <ul>
11: <li><a href="#">Home</a></li>
12: <li><a href="#">Outra página</a></li>
13: <li><a href="#">Uma terceira página</a></li>
14: </ul>
15: </nav>
16: </header>
17:
18: <article id="art_postagens">
19:
20: <section class="postagem">
21: <header>
22: <hgroup>
23: <h3>Seja bem vindo ao blog "Meu blog"!</h3>
24: <h4>Aqui você encontra muito conteúdo interessante</h4>
25: </hgroup>
26: </header>
27: <div class="sectioncontent">
28: <p>Este é apenas um texto introdutório, com o intuito de promover esta página...</p>
29: <p>Falta de criatividade para redigir um texto que faça algum sentido para um mero exemplo é um problema.</p>
30: </div>
31: </section>
32:
33: <section class="postagem">
34: <header>
35: <hgroup>
36: <h3>Uma segunda postagem qualquer...</h3>
37: <h4>Nãoi consegui pensar em nada melhor para escrever aqui.</h4>
38: </hgroup>
39: </header>
40: <div class="sectioncontent">
41: <p>Ainda bem que escolhi fazer Sistemas de Informação a Letras, pois não tenho a mínima criatividade para escrever.</p>
42: </div>
43: </section>
44:
45: </article>
46:
47: <aside id="sidebar_amigos">
48: <section class="listablogs">
49: <h4>Blogs amigos:</h4>
50: <ul>
51: <li><a href="#">GcmInfo</a></li>
52: <li><a href="#">Blog do José</a></li>
53: <li><a href="#">Blog da Maria</a></li>
54: </ul>
55: </section>
56: </aside>
57:
58: <footer>
59: <p>Desenvolvido por Guilherme Caeiro de Mattos.</p>
60: </footer>
61:
62: </body>
63: </html>
Agora, ao exemplo mais prático:
Para visualizá-lo, basta clicar em "exemplo" abaixo e, para visualizar o código do mesmo, basta, em seu navegador, procurar pela opção "Visualizar/Exibir código fonte" ou, na maioria dos casos, apertar em seu teclado "CTRL + U".
Exemplo
Bom, acho que isto foi tudo por enquanto.
Quanto ao próximo post, não tenho certeza do que irei tratar, porem, quando resolver isso, editarei esta postagem e começarei a escrever a próxima.
Ah! Também é possível que eu edite esta para adicionar algo que possa ter ficado faltando (por exemplo, estou pensando em comentar o código HTML postado aqui, apesar de o mesmo já ser meio "auto explicativo".
Tutorial HTML 5, parte 3 - ...
As formatações efetuadas nos comandos e trechos de arquivos de configuração foram geradas utilizando a "ferramenta" Source Code Formatter, encontrada neste link.
Tutorial HTML5, parte 1 - Introdução
Como prometido, mesmo que com um pouco de atraso (na realidade, muito atraso), hoje estou aqui para iniciar um tutorial básico sobre HTML5, onde irei tratar das principais alterações estruturais, novos elementos e algumas coisas mais.
Eu gostaria de enfatizar que, por ser algo bem básico, este será apenas uma espécia "resumo" das novidades trazidas pela nova versão da linguagem de marcação HTML, mas, para não ficar apenas na "teoria", tentarei fazer uso de exemplos práticos e, é claro, não entrarei nas questões "básicas" do HTML, tendo em vista que este tutorial se dirige a pessoas que já tenham, pelo menos, a base da versão anterior.
Bom, como a grande maioria já deve saber, a linguagem de marcação HTML (HyperText Markup Language) teve seu conceito formulado bem no final da década de 80 e sua publicação apenas em 1991. De lá para cá, já se foram duas décadas e a linguagem recebeu um total de 4 versões e alguns updates dessas versões (atualmente, o padrão vigente é o 4.01), e já foi, inclusive, "sucedida" pelo XHTML.
Mesmo assim, desde de 2008, o W3C, visando substituir os padrões HTML 4.01 e o XHTML, aderiu ao desenvolvimento do HTML 5,que já estava sendo desenvolvido por outro grupo desde 2004.
Atualmente, esse nova versão já se encontra quase ao ponto de ser oficialmente lançada e, inclusive, já é parcialmente suportada (pelo menos, os principais recursos) por quase todos os principais navegadores atualmente no mercado.
Com essa nova versão do HTML, busca-se, dentre outras coisas, criar uma semântica clara no código, facilitar a acessibilidade, reduzir o uso de plugins (como o Flash) para adição conteúdo animado e interativo, adicionar novas tags para trabalhar com conteúdo comummente utilizado (como audio e vídeo), reduzindo a necessidade de scripts, e permitir a execução das páginas em qualquer dispositivo.
Agora, deixando de "blá, blá, blá" , vamos a estrutura básica de uma página HTML 5:
Como é possível perceber, a estrutura é idêntica a da versão anterior do HTML, porem, há uma única "particularidade", a declaração do "DOCTYPE", onde agora só é especificado como "html".
Todo o resto, que antes era declarado dentro do DOCTYPE, agora fica a cargo do navegador.
Bom, eu sei que este post foi bem curto, mas pretendo começar o tutorial propriamente dito na próxima postagem, falando da questão da diagramação e os novos elementos para tal.
Tutorial HTML5, parte 2 - Diagramação
As formatações efetuadas nos comandos e trechos de arquivos de configuração foram geradas utilizando a "ferramenta" Source Code Formatter, encontrada neste link.
Eu gostaria de enfatizar que, por ser algo bem básico, este será apenas uma espécia "resumo" das novidades trazidas pela nova versão da linguagem de marcação HTML, mas, para não ficar apenas na "teoria", tentarei fazer uso de exemplos práticos e, é claro, não entrarei nas questões "básicas" do HTML, tendo em vista que este tutorial se dirige a pessoas que já tenham, pelo menos, a base da versão anterior.
Bom, como a grande maioria já deve saber, a linguagem de marcação HTML (HyperText Markup Language) teve seu conceito formulado bem no final da década de 80 e sua publicação apenas em 1991. De lá para cá, já se foram duas décadas e a linguagem recebeu um total de 4 versões e alguns updates dessas versões (atualmente, o padrão vigente é o 4.01), e já foi, inclusive, "sucedida" pelo XHTML.
Mesmo assim, desde de 2008, o W3C, visando substituir os padrões HTML 4.01 e o XHTML, aderiu ao desenvolvimento do HTML 5,que já estava sendo desenvolvido por outro grupo desde 2004.
Atualmente, esse nova versão já se encontra quase ao ponto de ser oficialmente lançada e, inclusive, já é parcialmente suportada (pelo menos, os principais recursos) por quase todos os principais navegadores atualmente no mercado.
Com essa nova versão do HTML, busca-se, dentre outras coisas, criar uma semântica clara no código, facilitar a acessibilidade, reduzir o uso de plugins (como o Flash) para adição conteúdo animado e interativo, adicionar novas tags para trabalhar com conteúdo comummente utilizado (como audio e vídeo), reduzindo a necessidade de scripts, e permitir a execução das páginas em qualquer dispositivo.
Agora, deixando de "blá, blá, blá" , vamos a estrutura básica de uma página HTML 5:
<!DOCTYPE html>
<html>
<head>
<title>Título da pagina</title>
</head>
<body>
</body>
</html>
Como é possível perceber, a estrutura é idêntica a da versão anterior do HTML, porem, há uma única "particularidade", a declaração do "DOCTYPE", onde agora só é especificado como "html".
<!DOCTYPE html>
Todo o resto, que antes era declarado dentro do DOCTYPE, agora fica a cargo do navegador.
Bom, eu sei que este post foi bem curto, mas pretendo começar o tutorial propriamente dito na próxima postagem, falando da questão da diagramação e os novos elementos para tal.
Tutorial HTML5, parte 2 - Diagramação
As formatações efetuadas nos comandos e trechos de arquivos de configuração foram geradas utilizando a "ferramenta" Source Code Formatter, encontrada neste link.
segunda-feira, 30 de abril de 2012
De volta ao mundo dos vivos!
Fala, pessoal!
Já faz quase um ano desde que postei algo aqui pela última vez! Os motivos que causaram isso foram diversos, sendo os principais falta de tempo e preguiça (quando tinha tempo)! Por diversas vezes, pensei até em reviver o blog, mas sempre desanimava, como aconteceu quando o Windows 8 Developer Preview foi lançado. Eu cheguei até a instalar o S.O. e gravar um vídeo enquanto o testava, mas desanimei na hora de publicar a postagem.
De qualquer maneira, de lá para cá, muita coisa aconteceu: terminei o Ensino Médio, o curso técnico de Informática, fui contratado pela escola onde estagiava, pouco tempo depois me demiti (não foi por problemas com a empresa, mas por falta de tempo mesmo) e, agora, estou meio que "prestando serviços" para lá. Além disso, no fim do ano passado, fiz o ENEM e dois vestibulares: um para Ciência da Computação na UERJ (Universidade do Estado do Rio de Janeiro) e outro para Tecnologia em Análise e Desenvolvimento de Sistemas no IST (Instituto Superior de Tecnologia) da FAETEC (Fundação de Apoio a Escola Técnica). No vestibular para a UERJ, ainda estou na espera, havendo a possibilidade de "entrar" na 4ª ou 5ª reclassificações (se ocorrerem para o curso em questão), enquanto no caso do IST, de 8 vagas disponibilizadas pelo vestibular (o resto foi pelo SISU), fiquei em 16ª, logo, também não entrei.
Por outro lado, pelo SISU, utilizando a nota do ENEM, consegui uma vaga para Sistemas de Informação na UNIRIO (Universidade Federal do Estado do Rio de Janeiro)! Pela minha classificação inicial, eu só iria começar no segundo semestre, mas, devido a desistências, acabei entrando para o 1º e, atualmente, encontro-me fazendo tal curso na instituição em questão.
Sinceramente, eu havia até pensado em fazer Sistemas de Informação na própria UNIRIO, mas já havia descartado tal opção, pois o foco do curso não era exatamente o que eu buscava. Mesmo assim, como minha média do ENEM, pelo SISU, me permitiria ingressar em tal instituição, não pensei duas vezes e, para não desperdiçar a oportunidade, me candidatei a uma vaga, sendo classificado de primeira!
Começaram as aulas e, a princípio, pensava apenas em ver como era o curso e a universidade, possivelmente, saindo de lá assim que fosse classificado na UERJ, mas, passadas a reunião de apresentação e algumas aulas, meu pensamento mudou completamente. Além de ter adorado a instituição, que possui uma infraestrutura excelente (os computadores que uso no laboratório, por exemplo, são melhores do que o melhor que há onde trabalho), o ensino é de primeira. Provavelmente, não sairei mais de lá!
... deixando de lado a questão da faculdade, estou querendo voltar a postar algumas coisas interessantes por aqui. Anteriormente, me concentrava mais em Linux, pois era o "material" com o qual mais lidava na época, porem, agora, pretendo me focar mais em coisas como programação e desenvolvimento web, dentre outras.
Enfim, como estou tendo uma disciplina de "Desenvolvimento de Páginas Web" e o professor está lidando unicamente com HTML5, pretendo voltar com força total em cima desse assunto. Sendo assim, aguardem que, até o próximo fim de semana, aparecerei por aqui com coisas novas!
Já faz quase um ano desde que postei algo aqui pela última vez! Os motivos que causaram isso foram diversos, sendo os principais falta de tempo e preguiça (quando tinha tempo)! Por diversas vezes, pensei até em reviver o blog, mas sempre desanimava, como aconteceu quando o Windows 8 Developer Preview foi lançado. Eu cheguei até a instalar o S.O. e gravar um vídeo enquanto o testava, mas desanimei na hora de publicar a postagem.
De qualquer maneira, de lá para cá, muita coisa aconteceu: terminei o Ensino Médio, o curso técnico de Informática, fui contratado pela escola onde estagiava, pouco tempo depois me demiti (não foi por problemas com a empresa, mas por falta de tempo mesmo) e, agora, estou meio que "prestando serviços" para lá. Além disso, no fim do ano passado, fiz o ENEM e dois vestibulares: um para Ciência da Computação na UERJ (Universidade do Estado do Rio de Janeiro) e outro para Tecnologia em Análise e Desenvolvimento de Sistemas no IST (Instituto Superior de Tecnologia) da FAETEC (Fundação de Apoio a Escola Técnica). No vestibular para a UERJ, ainda estou na espera, havendo a possibilidade de "entrar" na 4ª ou 5ª reclassificações (se ocorrerem para o curso em questão), enquanto no caso do IST, de 8 vagas disponibilizadas pelo vestibular (o resto foi pelo SISU), fiquei em 16ª, logo, também não entrei.
Por outro lado, pelo SISU, utilizando a nota do ENEM, consegui uma vaga para Sistemas de Informação na UNIRIO (Universidade Federal do Estado do Rio de Janeiro)! Pela minha classificação inicial, eu só iria começar no segundo semestre, mas, devido a desistências, acabei entrando para o 1º e, atualmente, encontro-me fazendo tal curso na instituição em questão.
Sinceramente, eu havia até pensado em fazer Sistemas de Informação na própria UNIRIO, mas já havia descartado tal opção, pois o foco do curso não era exatamente o que eu buscava. Mesmo assim, como minha média do ENEM, pelo SISU, me permitiria ingressar em tal instituição, não pensei duas vezes e, para não desperdiçar a oportunidade, me candidatei a uma vaga, sendo classificado de primeira!
Começaram as aulas e, a princípio, pensava apenas em ver como era o curso e a universidade, possivelmente, saindo de lá assim que fosse classificado na UERJ, mas, passadas a reunião de apresentação e algumas aulas, meu pensamento mudou completamente. Além de ter adorado a instituição, que possui uma infraestrutura excelente (os computadores que uso no laboratório, por exemplo, são melhores do que o melhor que há onde trabalho), o ensino é de primeira. Provavelmente, não sairei mais de lá!
... deixando de lado a questão da faculdade, estou querendo voltar a postar algumas coisas interessantes por aqui. Anteriormente, me concentrava mais em Linux, pois era o "material" com o qual mais lidava na época, porem, agora, pretendo me focar mais em coisas como programação e desenvolvimento web, dentre outras.
Enfim, como estou tendo uma disciplina de "Desenvolvimento de Páginas Web" e o professor está lidando unicamente com HTML5, pretendo voltar com força total em cima desse assunto. Sendo assim, aguardem que, até o próximo fim de semana, aparecerei por aqui com coisas novas!
Assinar:
Postagens (Atom)
Anúncios