jfosorio Posted March 8, 2014 at 04:15 PM Report #547910 Posted March 8, 2014 at 04:15 PM (edited) 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 March 11, 2014 at 11:19 AM 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.
Knitter Posted March 8, 2014 at 05:59 PM Report #547920 Posted March 8, 2014 at 05:59 PM Como prova de conceito está curioso, mas faz lembrar os GIFs de há 20 anos atrás, e dá uma valente dor de cabeça olhar para o exemplo 😄
jfosorio Posted March 11, 2014 at 11:12 AM Author Report #548183 Posted March 11, 2014 at 11:12 AM 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.
thoga31 Posted March 11, 2014 at 01:13 PM Report #548210 Posted March 11, 2014 at 01:13 PM (edited) 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 March 11, 2014 at 01:13 PM by thoga31 Knowledge is free!
jfosorio Posted March 11, 2014 at 06:00 PM Author Report #548254 Posted March 11, 2014 at 06:00 PM 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.
thoga31 Posted March 11, 2014 at 09:26 PM Report #548281 Posted March 11, 2014 at 09:26 PM 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. Um mero exemplo: http://www.thewildernessdowntown.com/ Knowledge is free!
taviroquai Posted March 11, 2014 at 11:16 PM Report #548297 Posted March 11, 2014 at 11:16 PM @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... 😛
jfosorio Posted March 12, 2014 at 09:54 AM Author Report #548340 Posted March 12, 2014 at 09:54 AM 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.
jfosorio Posted March 17, 2014 at 09:24 AM Author Report #548812 Posted March 17, 2014 at 09:24 AM 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.
Pivot Posted March 17, 2014 at 10:16 AM Report #548815 Posted March 17, 2014 at 10:16 AM 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.
jfosorio Posted March 17, 2014 at 10:39 AM Author Report #548817 Posted March 17, 2014 at 10:39 AM 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.
jfosorio Posted March 17, 2014 at 12:21 PM Author Report #548820 Posted March 17, 2014 at 12:21 PM Já foi novamente testado em Linux com o FF e Chrome e está tudo ok. Agora não sei se poderá ser por causa das versões dos browsers... CSS 3D Text - Partilha mensagens em 3D com os teus amigos no Facebook! Portal de Informática it4life - Emprego, notícias, fórum, comunidade.
taviroquai Posted March 17, 2014 at 08:55 PM Report #548884 Posted March 17, 2014 at 08:55 PM 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...
jfosorio Posted March 17, 2014 at 09:19 PM Author Report #548890 Posted March 17, 2014 at 09:19 PM 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.
Pivot Posted March 18, 2014 at 10:17 AM Report #548942 Posted March 18, 2014 at 10:17 AM 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.
jfosorio Posted March 18, 2014 at 10:21 AM Author Report #548943 Posted March 18, 2014 at 10:21 AM 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.
lsoares Posted May 23, 2014 at 02:36 PM Report #556785 Posted May 23, 2014 at 02:36 PM Eu acho que o site é uma prova inegável que tens talento, tanto ao nível de design gráfico e de interação, como ao nível do domínio de animações em CSS, que não é para todos. Assim, espero que canalizes esse talento para ideias que possam fazer a diferença na vida das pessoas 🙂 --- Luís Soares jQuery - A Sua Biblioteca Javascript
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now