Como passar um layout do Photoshop para xHTML/CSS (parte 3)

, , , , • 22/08/2009

Nesta terceira, e última, parte mostro como corrigir os bugs do internet explorer, para que o site possa ser visto “igualmente” em todos os navegadores. Felizmente dentro de alguns anos esse processo não será mais necessário, mas enquanto isso não acontece nós ainda devemos compensar para os navegadores mais antigos e fora dos padrões.

Downlaod dos arquivos criados

Comentários

  1. Diogo Lopes28/08/2009

    Parábens pelo belo trabalho que tem feito com as videos aulas, assisto cada uma e aprendo com elas! já estou a a espera da próxima
    Abraços e até mais!

    Responder

  2. Anderson Paixão01/09/2009

    Ainda nem assisti o segundo mais tenho uma sugestão de aula, menu drop down, tanto vertical, como horizontal…
    .
    Mas de qualquer forma parabens, são otimas aulas… E muito sucesso, consegui um estagio graça a esta video aula… Muito obrigado.

    Responder

  3. SombeR02/09/2009

    Otimas aulas…

    Responder

  4. Diogo Lopes05/09/2009

    Mas eae, quando é que sai a próxima video aula, ou tutorial?

    estou ansioso já! :D

    Responder

  5. Clodoaldo Rodrigues09/09/2009

    Eduardo,

    Parabéns pela aula, excelente, acompanhei a série toda e consegui aproveitá-los em meus projetos. Eu já desenvolvia nessa linha e agora aperfeiçoei a técnica.
    Você deixou um exercício para descobrir como fazer para desaparecer o fundo cinza das imagens PNG no ie6, pois é, já tentei utilizar as técnicas passadas no site Definitive Guide to Taming the IE6 Beast mas não deu certo, devo estar fazendo algo errado, mas se tiver algum material que explique ao certo como funciona e corrija esse problema vai me ajudar bastante e aos companheiros que tiveram o mesmo problema.

    Responder

  6. Tutorial City13/09/2009

    @Clodoaldo Rodrigues
    Existem várias maneiras de resolver este problema, porém é importante frisar que nenhuma é 100% legal ,cada um tem seus pontos fracos.
    Existe um tutorial no blog Nettuts que mostra 5 maneiras de resolver esse problema, além do mostrar os pontos fracos de cada uma.
    Se restar alguma dúvida, por favor retorne e compartilhe conosco.

    Abraços

    Responder

  7. Kaique Abner07/10/2009

    Me ajudou muito mesmo,
    mas estou tendo um problema com o Aptana Studio….
    Eu faço todo o codigo certinho, mas quando vou visualizar os caracters ficam baguçados, os acentos em lugares errados , inves de ” ‘ ” fica ” ^ ” …
    Sabe com arrumar?

    Responder

  8. Tutorial City07/10/2009

    @Kaique Abner
    Você tem que ver se os caracteres que está digitando são caracteres válidos para (x)html. O Firefox, por exemplo, quando não compreende um caractere ele exibe um losango preto com uma interrogação no meio, talvez o mesmo esteja acontecendo com o Aptana(talvez). Pra uma lista dos caracteres suportados por (x)HTML visite o site da W3Schools. Se não for isso, pode retornar aqui e detalhar seu problema.

    Abraços

    Responder

  9. Kaique Abner19/10/2009

    Olá,
    obrigado pela resposta…

    Acredito que nao seja esse problema, pois crio o mesmo codigo , com os mesmo caracteres pelo dreamweaver , notpad++ e até pelo bloco de notas e sai certinho,
    mas quando vou fazer exatamente IGUAL no Aptana sai os caracteres todos estranhos…

    Se puder me ajudar fico agradecido, se não puder fico da mesma maneira =D
    Aguardo sua resposta se possivel.

    Até mais,
    Abraços!

    Responder

  10. Kaique Abner19/10/2009

    Se puder ver o erro acessa ai:
    http://kaiquedesign.hd1.com.br/OLHAAI.jpg

    Responder

  11. Kaique Abner20/10/2009

    Ahhh se der me fale o problema, e tambem se nao for abusar me mande o link de onde vc baixou o seu?

    Por favor!!!

    Flw abraços!

    Responder

  12. Tutorial City20/10/2009

    @Kaique Abner
    Exatamente o que eu imaginava. Caracteres acentuados, símbolos(marca registrada, copyrights…) entre outros elementos podem não ser renderizados de maneira correta pelo navegador. Para resolver esse problema você deve digitar o código que representa esses caracteres, por exemplo, á é equivalente a á, õ é equivalente a õ e por aí vai… pra uma lista completa dos caracteres e suas representações você pode acessar o site que passei alguns comentários acima(7 de outubro), da W3Schools.

    Se vc quiser digitar um texto muito grande e ficar com preguiça de digitar os códigos, você pode usar a função htmlentities do PHP, que converte esses caracteres inválidos em seu equivalente em HTML.

    Abraços

    Responder

  13. Kaique Abner21/10/2009

    Ok,
    Infelizmente vou abandonar o Aptana (achei ele mto interessante)…
    Fazer oque assim nao da p trabalhar!

    Obrigado pelas dicas…

    Até mais!!!
    (vou voltar com o dreamweaver)

    Responder

  14. Tutorial City21/10/2009

    @Kaique Abner
    Isso não é uma opção, é uma norma em documentos HTML. Estou para fazer um tutorial mostrando como dá pra criar o código 10x mais rápido no Aptana do que no Dreamweaver. acho que depois disso você vai mudar de idéia.

    Responder

  15. Tutorial City21/10/2009

    @Kaique Abner
    Experimenta usar o charset UTF-8 ao invés de iso-8859-1

    Responder

  16. Kaique Abner21/10/2009

    Ok cara,
    se der faz sim…

    Vai ser muito util!

    Abraço.

    Responder

  17. Rodrigo09/07/2010

    pode me dizer como faço par ter o meu Aptana como o seu? Quando me refiro a como o seu refiro-me a qundo tá digitando aparece a ajuda, e na frente da ajuda aprece os browsers que suportam aquelas tags que se tá escrevendo, mas no meu só parece o IE e o Firefox mesmo eu tendo o Safari, o Opera e o Chrome instalados no pc.

    Se possível me diga como isso se mete, estou farto de procurar no google e só encontrei este http://docs.aptana.com/dev/index.php/Adding_new_browser_support que não sei se faz o que quero e não percebi bem partes dele.

    Responder

  18. Rodrigo09/07/2010

    gostaria tambem de saber como se não é possivel ter aquela ajuda a escrever que os IDE’s têm no Aptana quando se escreve php??? Já instalei o o plugin de php aqui no Aptana mas não me ajuda a completar o que escrevo…. gostatia que me disse-se como fasso meto isso para o php???

    Responder

  19. Tutorial City12/07/2010

    @Rodrigo
    1º- Não sei como fazer isso. Dê uma procurada nas preferências, possivelmente lá tem o que você quer.
    2º- Você pode habilitar essa opção nas preferências do Aptana. Se estiver usando a versão 2.0 vá em Window>Preferences>PHP>Code Assist. Aí basta você escolher as opções que mais te agradam.

    Abraços.

    Responder

Envie Seu Comentário