Tableless - Desenvolvimento inteligente com Padrões Web

16/02/2007
Geral

Site novo da Visie no ar (v2007)

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 …

Por

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! :-D

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?! :-D

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://www.pinceladasdaweb.com.br Pedro Rogério

    O menu está todo quebrado no Opera 9.

  • http://www.ianliu.art.br Ian Liu

    Gostei do novo site :)
    Principalmente do senhor forjando algo na bigorna :P
    Teria como fornecer a imagem original? Daria um belo WallPapper!

  • Leandro

    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 ?

  • http://wws.x4u.com.br/ Jr. Hames

    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.

  • Werner

    Dá pra usar png no ie6 sim! É só usar uma classe de javascript chamada pngAlpha =]

  • Alexandre

    E não é só o menu quebrado no Opera, também tem um erro no rodapé do layout, deslocado alguns pixels pra esquerda.

  • http://insidewebdev.blogspot.com Guilherme Rambo

    Fico legal, só ta faltando o videozinho xD

    []‘s

  • http://www.copa.promissao.net Tiago Bega

    Ficou bem legal, fiquei babando no formulario de matricula , acho que seria um ótimo video tutorial aquela parte da seleção dos cursos :P

  • Breno

    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….

  • http://project47.viscountbox.com Carlos Eduardo

    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!

  • http://www.pinceladasdaweb.com.br Pedro Rogério

    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!!!

  • Alexandre

    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.

  • http://www.pauloraponi.net Paulo Raponi

    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.

  • Pedro

    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

  • http://tableless.com.br/ Diego Eis

    É paulo, o problema é com a Locaweb! Um arquivo deles tá dando pau lá…

  • http://tableless.com.br/ Diego Eis

    Pois é Pedro, isso é normal quando a gente está atualizando os arquivos ou modificando alguma coisa. Mas valeu pelo toque.

  • http://www.pauloraponi.net Paulo Raponi

    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.

  • http://www.mtocom.com.br Jobson

    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.

  • http://www.joilsonmarques.com Joilson Marques

    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:

    “&nbspProfessor Bruno Torres”

    Críticas a parte, o site ficou muito bonito e fácil. Parabéns…

  • Davi Lima

    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!

  • James Clebio

    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

  • http://willgm.com William Grasel Martins

    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!

  • http://www.andrespereira.com Andres

    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!

  • http://willgm.com William Grasel Martins

    Alguém reconhece o menu desse site? rs

    http://www.inforwaynet.com/

    não aguentei a tentação de comentar isso… rs

  • http://www.rafaelmarin.net Rafael Marin

    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!

  • http://felipph.wordpress.com Luiz Felipph

    “Tudo o que nós aprendemos eda forma mais simples e direta. ”

    http://visie.com.br/cursos/

    meu dedo aqui tb…

  • Silas

    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!

  • Silas

    O Rodapé está todo preto, não dá pra ver nada…isso é problema ou é assim mesmo?

    Valeu!

  • Klaus

    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!

  • http://tableless.com.br/ Diego Eis

    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. ;-)

  • Marco

    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

  • Mark Costa

    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

  • Leonardo Neves

    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!!

  • http://www.anacnogueira.eti.br Ana Claudia

    Tirando os erros de português e os pequenos bugs até que ficou legal…

  • http://www.gustavoprevidi.com Gustavo Previdi

    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

  • Rodrigo

    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!

  • http://ihsoftwares.rg.com.br Sérgio

    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…

  • Thiago Lima

    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

  • Fabio Assis

    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!

  • Augusto Carbol

    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.