felipenmoura.org Web development, HTML5, Javascript, CSS3, PHP and other cool stuff!

7Mar/125

Root3D, o ambiente CSS3D(english only)

Olá pessoal.
Estou orgulhoso em apresentar a vocês meu novo projeto/experimento, o Root3D.

Basicamente, Root3D é um ambiente 3D rodando no seu browser baseado apenas em efeitos 3D do CSS3 3D e DIVs

Não há uso de WebGL, nem plugins, apenas seu browser trabalhando com HTML5 e CSS3, com uma engine JavaScript fazendo tudo trabalhar junto...claro, há alguma programação server-side para que se possa carregar e salvar projetos.

O projeto está participando do Mozilla derby deste mês! Vote nele e me ajude a mantê-lo!

Root3d Demo

Root3d Demo

Você pode usar esta ferramenta para criar elementos e aplicar efeitos 3D a eles, utilizando apenas CSS3. Após, você pode usar o console do seu browser para simplesmente copiar o CSS do elemento e usa-lo em uma pagina sua, por exemplo...em breve, vou ver se organizo uma maneira melhor para usar os resultados da applicação!

A primeira coisa que lhes indicaria, seria para acessarem o menu da "engrenagem". Lá, há vários itens úteis, especialmente o HELP que tem diversos atalhos de teclado. Lá, você também poderá carregar alguns demos que preparei :)

Por favor, note que o Google Chrome tem alguns problemas renderizando efeitos 3D do CSS3! Especialmente um bug irritante relacionado ao z-index, que impede o usuário de clicar nos menus a menos que mova o mapa para o lado "tirando-o da frente"! Desculpe por isto! Acredito que eles estejam trabalhando duro para corrigir este problema!

No Firefox 11, está funcionando 100% :)

Root3d Element changing

Changing a Root3d's Element

Uma das ideias aqui é testar os efeitos 3D do CSS3, filtros e transforms...animações também, e então, ter um local onde testa-las assim que os browsers forem corrigindo possíveis problemas. Acredito que isto nos ajudará bastante identificando bugs, entendendo melhor o que está acontecendo :)
Eu realmente adoraria se os desenvolvedores de Browsers pudessem entrar em contato e dizer o que acham, o que poderia ser feito para melhorar e corrigir problemas, e claro, novas idéias também são muito bem vindas!

Caso você queira contribuir, o código fonte(o qual, admito, não está TÃO bonito quanto eu gostaria...muita coisa ainda há de ser melhorada, até por que o projeto nasceu pequeno e foi crescendo) está acessível no github aqui:
https://github.com/felipenmoura/Root3D

Assista alguns vídeos:
Neste vídeo, mostro como adicionar alguns elementos:

E neste segundo video(o mais legal, eu acho...mas com audio somente em ingles, por hora) você pode ver um demo bem bacana:

Você pode logar utilizando sua conta do Google e salvar ou carregar seus próprios projetos, ou pode simplesmente testar a ferramenta.
De qualquer maneira, você poderá carregar alguns modelos bacanas...e se você criar alguma coisa legal, avise-me que dou um jeito de coloca-lo lá como mais um modelo. Claro que deixarei uma referência a ti como crédito ;)

Root3d demo - furniture

A root3d demo - furniture

Por favor, vote no projeto na competição do Mozilla derby !

Chega de falar! Acesse a ferramenta Root3d project e veja por si mesmo!
Root3D, the CSS3D environment

Certo, agora é a hora de você me dar algum feedback! Avise-me sobre bugs encontrados, suas opiniões e ideias para melhorar a coisa toda!

Todo feedback é muito bem vindo!


Tags: , , , , 5 Comentários
5Mar/120

RS-JS, o encontro de Javascript em Porto Alegre, RS(pós)

Eis que o RSJS foi muito bacana!
Em breve subiremos as fotos para o site do rsjs, e os vídeos serão publicados no site da GoNow, uma das empresas patrocinadoras do evento que estava lá representada pela Laura, que tornaram possível esta conferência.
A TargetTrust sorteou dois cursos durante o evento, e a Fernanda nos ajudou bastante com os trabalhos da portaria :)
Além disso, a Mailee sorteou várias coisas legais além de um workshop!
A novatec sorteu dois livros show de bola, também, e a redehost hosteou o site pra gente!
Além de tudo isto, a e-core surpreendeu a galera e sorteou um KINDLE! Gente de sorte! Pena que os organizadores não puderam participar do sorteio! :p
Também quero deixar um agradecimento danado de especial para o pessoal da Grifo que nos ajudou deveras, até com coisas que eles nem precisavam se envolver! Os caras são muito parceiros!

Claro que não posso deixar de agradecer ao pessoal que apareceu por lá! Tava muito bacana e os participantes interagiram pácas, fazendo perguntas, observações e adições muito pertinentes, além de comentários úteis! Valeu pessoal, por demonstrar interesse e marcar presença por lá! Espero que todos tenham curtido bastante e que ainda nos vejamos em outros eventos em um futuro bastante breve, enh!

Tivemos alguns contras, como a água que não conseguia esfriar, hehe...mas o coffeebreak salvou com suco bastante gelado e refrigerantes, além de guloseimas!

Os palestrantes, poh...os palestrantes! Não há muito o que dizer! Todos foram ótimos(espero que isto inglua a mim, também! hehe), pessoalmente, curti muito os conteúdos e achei que os assuntos abordados foram muito bacanas! Acredito que boa parte dos participantes tenham visto as palestras com bons olhos. E aos palestrantes, fica o meu grande agradecimento! Valeu por passar o sábado com a gente, passando conhecimento e trocando experiências!

Tivemos uma inadimplência de18%, aproximadamente, o que já era meio esperado, mesmo...mas o mais legal é que tivemos muita gente de fora, como pessoal de SC e PR, e de BH também! Marcaram uma baita presença!
Do interior, tivemos uma galera que veio de Pelotas, uns de Caxias, Canoas(tá, sei que Canoas não é TÃO longe assim, hehe) entre outros tantos lugares. Vale lembrar que tivemos TODAS as inscrições feitas em apenas 6 horas! Tipo, abrimos as inscrições no site, e em 6 horas já tinhamos 80 inscritos...daí conseguimos liberação para mais 20 lugares, e em outras 2 horas, já não haviam mais vagas novamente!

Aqui, o endereço da minha palestra sobre animações em CSS3 e este é o link para a minha palestra sobre acessibilidade na web com javascript.

Tchê, resumindo, agradeço mesmo a presença e esforço de todos os envolvidos e também participantes...e bora se preparar para o próximo!

Tags: , Sem Comentários
15Fev/120

RS-JS, o encontro de Javascript em Porto Alegre, RS

Eis que estamos nos aproximando do RS-JS, o encontro de Javascript em Porto Alegre.
Para esta conferência, o novo site já mostra de forma criativa o quão atrativo o evento será!

A idéia é abordar temas como performance, integrabilidade, js em outros ambientes que não em um browser, além de traser novidades da API do HTML5 para JS, bem como bacanisses com CSS3...até haskell vai pintar pelo evento!
Acessibilidade e boas práticas também estão em nossas pautas, enh!

Eu terei o prazer de palestrar sobre animações em CSS3, uma versão mais curta da palestra que apresentei no FrontInLondrina(de uma hora, visto que em Londrina, a palestra durou duas horas). Também palestrarei sobre acessibilidade na web e na vida, mas defendendo o javascript :)

Será dia 3/3/12, no Edel Trade Center, em Porto Alegre - RS.
Quero ver todo mundo lá, enh! A entrada será franca, mas tem que se inscrever no site, apenas para identificação, e para não gerar bagunça!
O site do evento é http://rsjs.com.br
Nos vemos lá, gurizada!

Categorias: CSS, Events, HTML5, JavaScript Sem Comentários
   Artigos Antigos »
Follow me on twitter!
@felipenmoura
Este site está generosamente hospedado na RedeHost

Recent Posts

Categories