Jump to content

Share a 3D message


jfosorio
 Share

Recommended Posts

Titulo do Projecto: Share a 3D message

Última Versão:

Site Oficial: http://www.it4life.pt/3d-message/

Licença:

Líder do Projecto: José Osório

Membros Actuais do Projecto: José Osório

Screenshots:

Descrição do Projecto:

"You can now share 3D messages with your friends! Just type a brief message and press "Share on Facebook" button. A custom link will be posted on your feed, so your friends can see the message you sent. It's that easy. Enjoy it!"

Este projeto foi desenvolvido com o objetivo de demonstrar o potencial do HTML5 e principlamente das CSS3. As animações foram implementadas com @keyframes e transitions. O aspeto tri-dimensional foi conseguido com a perspective.

Numa fase final do projeto, decidi adicionar a componente da interatividade, por isso surgiu a ideia de possibilitar aos utilizadores editarem o texto em 3D e partilharem-no no Facebook.

Gostava de saber a opinião da comunidade e todas as críticas e sugestões são bem-vindas.

Desde já obrigado!

Edited by jfosorio

CSS 3D Text - Partilha mensagens em 3D com os teus amigos no Facebook!

Portal de Informática it4life - Emprego, notícias, fórum, comunidade.

Link to comment
Share on other sites

Eu estava à espera de algo mais construtivo, como por exemplo, possíveis melhorias, sugestões, etc.

Relativamente à observação dos GIFs, até gostava de ver exemplos, já que nunca vi GIFs que se assemelhassem sequer àquilo que desenvolvi. Comparar um efeito 3D com perspetiva (animado, editável em tempo real e partilhável no Facebook), conseguido através da implementação das mais recentes técnicas de CSS com aquilo que se fazia nos primórdios da Web não me parece uma crítica muito justa.

Mas ainda assim obrigado pelo feedback.

CSS 3D Text - Partilha mensagens em 3D com os teus amigos no Facebook!

Portal de Informática it4life - Emprego, notícias, fórum, comunidade.

Link to comment
Share on other sites

Pediste críticas, e creio que o @Knitter foi muito justo. Ele foi sincero naquilo que disse. Uma crítica destrutiva seria "é uma porcaria, não vale nada", o que não foi dito por ele (e nem sequer é verdade). Um comentário construtivo não é feito só de sugestões, mas sim também de opiniões e sinceridade. A opinião do @Knitter subentende o que pode estar menos bem em termos visuais. Saber ouvir faz parte de saber fazer melhor.

De igual forma, não sei se entendeste a comparação. O efeito final da imagem/texto pode fazer lembrar certos GIF's do antigamente, o que não quer dizer que é mau, afinal as modas são vaivéns. A interactividade é outro assunto.

Posto isto, segue a minha opinião.

De facto, o conceito é interessante. No entanto, não sei se uma mensagem 3D é a melhor amostra das potencialidades do HTML5 e do CSS3. É um começo, e estou curioso para ver mais coisas, possivelmente mais apelativas.

O efeito que a mensagem 3D faz é-me demasiado cansativo. Por algum motivo, não consigo olhar para ela mais do que 15 segundos sem me começar a sentir zonzo e mesmo com tonturas. Podia haver a hipótese de regular a extensão do efeito (mais ou menos acentuado), assim como mais opções de efeitos para além deste "balancear". E, claro, mudar as cores. Talvez incluir uma opção de degráde.

As mensagens podem ficar ainda mais interessantes se se puder adicionar um segundo efeito de fundo, como a formação de linhas aleatórias ou desenhos simples artísticos de cor suave. Já vi sites em HTML5 com coisas deste género, e seria um ponto interessante.

Acho que a chave desta "brincadeira" está na customization da mensagem. Penso que seja por aqui que deves pegar. 😉

Cumprimentos.

Edited by thoga31

Knowledge is free!

Link to comment
Share on other sites

Não me interpretem mal. Eu não desconsiderei a opinião do Knitter, mas achei (e continuo a achar) que a mera comparação com um GIF é depreciativa do trabalho em causa.

Quanto à análise feita pelo thoga, desde já muito obrigado. Era deste tipo de feedback que andava à procura! De facto, uma das primeiras alterações (que até já está em curso) é permitir alterar o esquema de cores. Penso que será uma boa mais-valia. Referiste o degradé e na versão original o texto tinha realmente um gradiente, mas depois fiz alterações para suportar várias linhas de texto e por questões técnicas, o texto teve de ser configurado com sendo do nível inline-block e o gradiente deixou de funcionar para os casos em que o texto ocupava mais do que uma linha. Logo, essa opção foi colocada de lado, mas vou tentar arranjar uma solução.

Gostei da sugestão para permitir controlar a intensidade e mesmo o efeito da animação. Vou concerteza implementar isso brevemente.

Quanto aos fundos, não percebi muito bem. A ideia era ter diferentes fundos pré-definidos e o utilizador escolhe um? Se puderes enviar alguns dos exemplos que mencionaste, agradecia.

E para terminar, sim, o que também acho mais interessante é a ideia de personalizar a mensagem e partilha-la no Facebook, mas reconheço que para já a aplicação não é muito apelativa (ou útil) para o público em geral. Tenho de fazer algumas melhorias e ver se consigo cativar mais gente.

Cumprimentos.

CSS 3D Text - Partilha mensagens em 3D com os teus amigos no Facebook!

Portal de Informática it4life - Emprego, notícias, fórum, comunidade.

Link to comment
Share on other sites

@jfosorio Em que te baseaste para escolher esse esquema de cores? Também sinto que está carregado para a vista. Experimenta uma palete mais clara do kuler.adobe.com... ou melhor, o texto 3D podia ser temático, por exemplo para enviar à namorada podia ter uns corações a flutuar, para enviar ao PC podia ter um cemitério, etc... 😛

Link to comment
Share on other sites

Thoga, obrigado pelo exemplo. Por acaso já tinha visto ese site. Acho que já percebi a ideia. Obrigado.

LOL Tavi. Eu sei lá onde me baseei para a cores. Às vezes sinto que vejo tudo a azul e branco (será que é por ser portista?! 😛 ). Gostei dessa ideia do temático. Por acaso era porreiro criar vários temas para o utilizador poder escolher um. Depois de escolher o tema, podia na mesma modificar a cor do texto, por exemplo.

Quanto ao controlar a animação, a história já se complica. Ontem estive a fazer as primeiras experiências e não está fácil. Controlar as keyframes via Javascript não é lá muito intuitivo, mas penso que estou a chegar lá. Contudo, penso que vai-se perder o efeito cíclico da animação. Mas depois logo se vê como vai resultar...

CSS 3D Text - Partilha mensagens em 3D com os teus amigos no Facebook!

Portal de Informática it4life - Emprego, notícias, fórum, comunidade.

Link to comment
Share on other sites

Bom dia,

Já fiz algumas melhorias no que diz respeito ao controlo da animação e da formatação do texto. Estou bastanet satisfeito, mas também gostava de ter o vosso feedback. 😄

Relembro o link:

http://www.it4life.pt/3d-message/

O próximo passo será o desenvolvimento dos temas para tornar o ambiente mais apelativo.

Abraço

CSS 3D Text - Partilha mensagens em 3D com os teus amigos no Facebook!

Portal de Informática it4life - Emprego, notícias, fórum, comunidade.

Link to comment
Share on other sites

Bom dia jfosorio,

Não querendo criticar, mas apenas um reparo, porque acho que de resto está muito bom!

No firefox em linux as imagens (animações) parecem não funcionar correctamente, até parece estar "rasurada"...

Apenas para testares em ambiente linux para veres se é do meu computador, ou se é geral...

Porque no meu Windows, funciona tudo na perfeição!

Abraço,

Rafael Ferreira.

Link to comment
Share on other sites

Olá Rafael,

Obrigado pela observação. Eu não tenho Linux, mas já tinha pedido a um amigo meu para testar e ele disse-me que estava tudo Ok. Não sei que browser é q ele utilizou, mas vou verificar isso.

Deixo também a observação de que a aplicação não funciona totalmente em IE. A manipulação das keyframes é um tema muito pouco documentado e para variar, a sintaxe varia consoante o browser. Ainda estou a investigar uma solução...

CSS 3D Text - Partilha mensagens em 3D com os teus amigos no Facebook!

Portal de Informática it4life - Emprego, notícias, fórum, comunidade.

Link to comment
Share on other sites

Realmente, a animação no meu ambiente não corre lá muito bem...

OS: Ubuntu 13.04

Gráfica: ATI mobility

Driver gráfico: Gallium 0.4

FF 26.0: o 3D treme muito e tem muitas pausas... mas faz.

Chrome 31.0: Não há 3D. A mensagem faz o flip horizontal mas é 2D. Sem tremidelas nem pausas.

Pelo que li, cada browser deve saber usar da melhor maneira a aceleração GPU.

Também nunca liguei muito a gráficos em Linux...

Link to comment
Share on other sites

Eu estou em ambiente Windows, a testar com os seguintes browsers:

Chrome -> Versão 33.0.1750.154 m

FF -> Versão 27.0.1

Safari -> Versão 5.1.7

Os que renderizam melhor são os webkit. O ff tem uns glitches, principalmente com valores abaixo de 800 para a perspetiva (já agora testem com a perspetiva a 1000 para ver se melhora, sff). É como eu digo, isto é tudo muito experimental e as animações vão depender do hardware, como é óbvio. Por exemplo, no meu portátil as animações não são tão fluídas como no PC do escritório. Enfim, nesse campo não há muito que se possa fazer...

Entretanto, já fiz um pequeno upgrade e adicionei um seletor com as principais redes sociais. Agora a partilha não está só limitada ao Facebook, podendo-se partilhar também no twitter, google+ e linkedin.

CSS 3D Text - Partilha mensagens em 3D com os teus amigos no Facebook!

Portal de Informática it4life - Emprego, notícias, fórum, comunidade.

Link to comment
Share on other sites

Bom dia,

O efeito que parece fazer aqui no Ubuntu, é um efeito de "explosão" ou seja como o taviroquai disse, "tremelica" muito.

Eu sei que é natural e que cada computador tenha o seu comportamento mas apenas foi o meu testemunho 😛

Mas ainda assim gosto muito!

Abraço,

Rafael.

Link to comment
Share on other sites

Olá Rafael,

Eu compreendo e uma vez mais agradeço o teu feedback. Eu penso que não haverá muito a fazer para se conseguir dar a volta ao assunto, mas ainda assim vou pesquisar para tentar arranjar uma solução.

Esta história da compatibilidade cross-browser dá sempre grandes dores de cabeça, principalmente quando estamos a explorar coisas novas e pouco discutidas, como é o caso das @keyframes.

CSS 3D Text - Partilha mensagens em 3D com os teus amigos no Facebook!

Portal de Informática it4life - Emprego, notícias, fórum, comunidade.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.