por Diego Eis
Fevereiro 16th, 2007
Demorou um pouco, deu trabalho, muito trabalho, mas tá no ar. Foi trabalho de duas pessoas, eu e o Willian do XmlBR, garoto de programa aqui da Visie.
Colocamos ontem o site novo da Visie. Não é só o design que está todo reformulado. Mudamos a linguagem base do site. Estávamos usando PHP, mas como a gente vem estudando o uso de Python pra Web, migramos tudo para PSE. A migração foi o que deu mais trabalho por causa da separação que o PSE faz de programação e código HTML. Eu, como designer, não me aprofundei muito na programação, por isso, nada de detalhes mais técnicos, mesmo assim ainda este ano quero aprender Python/PSE.
No site antigo haviam alguns erros crassos de usabilidade, um exemplo? Ninguém conseguia achar o endereço da Visie. 
Nesta nova versão, tentamos resolver esses erros em melhorar o acesso à informações para o visitante do site. Informações importantes como datas de cursos e eventos, formas de pagamento e tudo mais agora estão mais visíveis, bem como o endereço da Visie! 
Gostei bastante de fazer este design, principalmente de tê-lo implementado. Queria muito ter feito um video da implementação, pelo menos da home, acontece que estávamos com tanta pressa de colocar o site no ar, que preferi deixar pra lá e tentar fazer uma versão do video depois.
Um truque que usei, mas que um bocado de desenvolvedores não sabem que é possível, foi usar a tag HTML (isso aí, a tag HTML) para poder mesclar o background do site. Se você perceber bem, o site tem um gradiente radial acinzentado no fundo. E nas bordas do layout há uma sombrinha que vai do topo até o finalzinho do rodapé. Como o IE6 não tem suporte a PNG (claro, a não ser com gambiarras arriscadas e que deixam tudo mais lerdo), este trabalho fica mais dificil. Tenho que fazer dois tipos de sombras, uma que fica em cima do Grandiente e faz a transição para a cor sólida e outra que fica depois do Gradiente.
Para dar certo essa brincadeira, você tem que entender a disposição dos elementos: o HTML é a primeira camada, o BODY fica em cima do HTML e o div #GERAL fica em cima dos dois. Logo, o background colocado no HTML ficará embaixo dos backgrounds dos outros dois elementos. Por isso, coloquei o Gradiente como background da tag HTML. No body, coloquei como background a imagem da sombra normal - a que fica combinando com o fundo de cor sólida do site. No #GERAL que é o elemento que fica em cima de todos os elementos, coloquei a sombra que faz a transição do gradiente para a cor sólida. Não é complicado, só trabalhoso para acertar paddings e larguras para tudo encaixar sem buracos.
Nas telas de Matrícula, o Willian colocou um pouco de Ajax, o que facilitou bastante o ato de escolher cursos e fazer a matrícula em si. Tentamos facilitar o máximo essa parte para que seja uma transição sensível.
Junto com isso, colocamos novas maneiras de pagamento. Mas temos que arrumar direito a parte de pagamento internacional com PayPal. Nota mental. 
Galera, qualquer erro, por favor, nos avisem. Desenvolvedor sabe como é esse negócio de atualizar o site, sempre ficam algumas coisas para arredondar. Por exemplo, o blog da Visie, ainda tenho que arrumar aquilo, tá horrível!
PS.: Será que o site da Visie entra no Bonito de se ver do Tableless?!
Se ainda estiver interessado, leia também:
Este post foi criado
na Sexta-feira, Fevereiro 16th, 2007 às 12:40 e está arquivado em Geral, Tecnologia e Tendências.
Você pode seguir as atualizações pelo feed: RSS 2.0.
Você pode deixar um comentário, ou deixar um trackback de seu próprio site.
O menu está todo quebrado no Opera 9.
Gostei do novo site
Principalmente do senhor forjando algo na bigorna 
Teria como fornecer a imagem original? Daria um belo WallPapper!
Olha Só,
Este uso do PSE poderia gerar um tutorial aqui para o Blog ou então um belo curso. O que vocês acham dessa idéia ?
O site ficou show de bola, mas notei alguns errinhos. Coisas realmente bem pequenas, mas que fazem alguma diferença.
Se quiser, posso tirar uns screenshots pra você ver.
Dá pra usar png no ie6 sim! É só usar uma classe de javascript chamada pngAlpha =]
E não é só o menu quebrado no Opera, também tem um erro no rodapé do layout, deslocado alguns pixels pra esquerda.
Fico legal, só ta faltando o videozinho xD
[]’s
Ficou bem legal, fiquei babando no formulario de matricula , acho que seria um ótimo video tutorial aquela parte da seleção dos cursos
O menu quebrou no ie6 tb… (aqui no trabalalho infelizmente não tenho opção de utilizar outro navegador)……
mais alguns ajustes e poderá participar do concurso “bonito de se ver” tb….
Gostei do novo layout também!
Dá mais identidade para a empresa e foge um pouco das tendências e modismos do Web Design atual.
Sobre a questão de utilizar um fundo no html e outro no body, já tive que utilizar algumas vezes, justamente por causa do PNG, pois o cliente queria que o fundo fosse degradê, mas pudesse alterá-lo dinâmicamente… Complicado!
Werner,
Se você inserir as pngs via CSS, no IE não adianta que não funciona, até hoje não vi nenhuma solução para isso!!!
Sobre a questão da usabilidade, creio que existe um novo problema. Na parte da matrícula, precisa ficar rolando pra cima de volta na hora de conferir o preço atualizado dos novos itens checados.. isso é um pouco irritante.
Achei um bug.
- Clique no menu PREÇOS E MATRICULAS
- Escolha um checkbox de qualquer curso
- Clique novamente no menu PREÇOS E MATRICULAS
- Bummmmm!!
Desculpe, mas como eu causei o erro umas 3x, isso fez com que ‘estourasse’ o site de vez… Agora não entra mais na área de PREÇOS E MATRICULAS.
Temos um bug de segurança. Ohhhhhh
abraços!
PauLo Raponi.
No primeiro link que eu clico já dá erro:
Servlet Error
This message has appeared because an error has occurred in the currently running servlet:
AttributeError: ‘module’ object has no attribute ’session’
Traceback follows: (expand all)
In file “/www/visie.com.br/www/matricula/index.py,” line 8
6: 7: #Abrindo/Criando a sessão do site 8: SESSION = verificar_sessao(pse) 9: 10: titulo = “Curso de Tableless”
In file “/usr/lib/python2.4/site-packages/site_uteis/funcoes.py,” line 10 (in function verificar_sessao)
8: def verificar_sessao(pse): 9: “”"Retorna ou cria uma sessao do site.”"” 10: return pse.plugins.session.new(’SiteVisie’) 11: 12: def moeda(f):
AttributeError: ‘module’ object has no attribute ’session’
Python Servlet Engine version 3.0.6
Copyright ©2003-2005 by Nicholas Borko. All Rights Reserved.
Cá pra nós, vocês testaram isso?
O diferencial de vocês é parecerem com a M$. Mas aqui não tem tela azul. Ainda
É paulo, o problema é com a Locaweb! Um arquivo deles tá dando pau lá…
Pois é Pedro, isso é normal quando a gente está atualizando os arquivos ou modificando alguma coisa. Mas valeu pelo toque.
Venho lembrar que o problema só ocorria quando era feito o passo-a-passo que eu descrevi previamente (algo relacionado ao Ajax dos checkbox). Como eu fiz o teste umas 3x para poder ter certeza do erro, chegou uma hora que toda vez que acessava aquela área do site, já dava erro.
Concordo com os que elogiaram o site. Acho que vocês podem inseri-lo no Bonito de se ver…
Só não entendi bem qual a vantagem do Python que jutifique a trabalheira que vocês tiveram. Acho que seria bacana explicarem melhor.
Muito bom… tem umas besteiras para serem corrigidas =D, essas quase passam desapercebidas, mas como estamos falando da Visie, transforma-se em tropeços, como por exemplo o código não está 100% validado e algumas entidades HTML não estão corretas. Na página acessibilidade.pt tem uso excessivo de espaços e estão sem o ; O que causa por exemplo:
“ Professor Bruno Torres”
Críticas a parte, o site ficou muito bonito e fácil. Parabéns…
O menubar de baixo acho que ficou com um cinza escuro demais, pouco contraste com o fundo faz com que ele fique camuflado até passarmos o mouse por cima e ele ficar #fff. Subam só mais 20% de o cinza!
Bom, layout bacana. Não muito diferente do anterior. Claro que há bugs, certamente devido ao processo de atualização e testes navegabilidade, usabilidade, scripts… Basta termos um pouquinho mais de paciência e deixar a coisa fique redondinha logo logo. No mais, a migração do PHP para o Python foi bela atitude! Ah, eu preferia o rodapé do layout anterior, pois esse novo me deu uma impressão de ‘mal-acabado’, com aquele ‘corte’ meio radical demais, chapado, do box geral branco… ;D
O Designe do site esta ótimo, limpo e bonito! Parabéns!
Mas achei 2 coisas que pode até ser ‘putice’ minha, mas…
primeira:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fvisie.com.br%2Fmatricula%2F
Sem maiores comentários, apenas prestar atenção em alguns detalhes… =P
segundo:
Desligue o JavaScript do seu navegador quando estiver em “Preços e Matriculas”, nada mais funciona…
Temos como principio para se usar Ajax que tudo deve funcionar mesmo sem o Ajax, tudo tem que ser feito primeiro sem se pensar no Ajax para depois sim colocar.
Outra coisa, a que eu percebi ou você escolhe o curso presencial ou o online, certo? Estão os chequebox deveriam ser repensados de alguma forma, principalmente para quando estiver sem JS.
Esses são apenas opiniões minhas que acho que podem ser uteis, além disso o site esta ótimo.
Aliais, agora que eu percebi, eu moro a 3 quarteirões da Visie! hauhauhaua
Abraços!
O menu está quebrado no IE 6 tb, ou melhor, ao abrir o site o menu aparece normal, mas quando passo o mouse sobre as opções, ele se quebra.
Abraços e sucesso!
O site ficou ótimo, mas o que eu mais gostei de tudo foi do slogan “Pertença à minoria”. Genial.
Quanto a esses errinhos de começo de site, eles me dão nos nervos. Estou implantando o layout no meu blog novo e não tem coisa pior do que os bugs por causa do IE6/IE7, e outras minúscias que porventura ficam para trás.
Mas o site em si ficou muito bom mesmo, muito melhor que o outro, as fotografias colaboraram um monte para isso.
Parabéns!
Salve,
Aqui no FF 2 o rodapé não está aparecendo! Está demorando muito pra carregar algo aqui, não existe nada de background com efeito aqui! Será que deu pau em algo?
Valeu!
O Rodapé está todo preto, não dá pra ver nada…isso é problema ou é assim mesmo?
Valeu!
A prova de que menos é mais… se mostra nesse trabalho e a cada dia na web, ficou imaginando como são os impressos da VISIE. Sobre impressos… esse ano vcs pretendem escrever o livro sobre Tableless?
Obrigado e parabéns!
William Grasel, não sei se é esse site, não me lembro. Mas outro dia recebi um email de uma pessoa me pedindo para usar o menu do Tableless para um site. Eu autorizei, sem problemas.
Klaus, os impressos não são lá essas coisas, mas esse ano, como o site, eles vão receber uma cara nova, mesmo porque os cursos mudaram também. Estou lendo muito sobre tipografia, diagramação e etc. Ahh, esse livro… Qualquer hora vira lenda… mas vamos por o plano para funcionar.
-
Valeu pelos toques galera. Espero que tenham gostado do site também.
Show de bola o design , mas achei o tamanho de KB ( quase 200 kb) total grande para o conteúdo da página, tenta otimizar o css e o javascript
Duas coisas me chamaram a atenção: primeiro, foi na Home que fala que XSLT é uma forma “simples” de transformar XML. auhau, no dia que XSLT for simples….
Outro ponto, no detalhe do curso de XSLT (é fui fundo), há um equívoco muito cometido por pessoas que desconhecem a plataforma .Net da Microsoft que é de chamar .Net de linguagem de programação.
Saudações,
Mark Costa
Achei sem querer..
http://visie.com.br/matricula/
“…exercício proposto na apostila. O certificado é escolhido dentre vários pelo próprio aluno. Nós enviares o certificado para…”
O correto é “enviaremos” né, ou “enviamos”… hehehe..
Parabéns Diego, e quem participou do re-desenvolvimento do site, muito bom mesmo!!
Tirando os erros de português e os pequenos bugs até que ficou legal…
Achei bacana…
mas o rodapé ta muito oculto! meu monitor é um pouco mais escuro do normal e não dá pra ver nada! só selecionando tudo…
imagina quem é meio ceguinho, não vai ver nunca o endereço da visie e o rodapé!
parabéns e abrçao
Ficou muito bonito, belas fotos e tamanho de letras pra ninguém botar defeito. Só não teria saido do PHP… vários erros estão ocorrendo, principalmente no formulário.
Também acho que está faltando um fundo para o rodapé, escuro mesmo, mas que dê mais contraste.
Abraço!
Ficou legal, encontrei um erro lendo o descritivo de Python na página de descrição dos cursos, o texto começa com ython. também acho que para o rodapé uma cor de fonte mais clara ou um fundo ajudaria.
Até mais…
Realmente estou tendo problemas com o png no IE 6 . No browser funciona bem, agora no IE 6 não funciona sem gambiarras …
Enfim … Parabéns pelo site, excelente serviço da equipe da Visie ….
Bonito de se ver #48.5
http://visie.com.br/
hehehe
[]s
O site esta show…
O design ficou ótimo. As bugs fazem parte do desenvolvimento, mas acho q algumas são um tanto bizarras pra terem ido pro ar sem serem percebidas (a do menu no Ie6, por exemplo; e alguns erros no formulário)
Algumas questões como o site não funcionar bem com o js desabilitado eu acho besteira, afinal nem sempre o trabalho de fazer o site inteiro funcionar sem js e depois aplicar o Ajax sobre essa estrutura compensa.
Não se deixem abalar pelas criticas destrutivas, afinal quem coloca o trabalho a prova esta sujeito a isso mesmo!
Boa sorte a equipe da Visie!
Porque vcs não usam o google maps ao invés desse mapa que vc usaram (http://visie.com.br/imagens/mapag.png)? acho que a utilização do google maps facilita muito a vida quem realmente pretende ir ao ate o local e não faz a menor idéia de onde fica. Não é todo mundo que conhece São Paulo. Esse mapa esta muito restrito.