Fórum OpenCart Brasil

[marcelo_php]

Boa Tarde amigos da comunidade...
também preciso de uma ajuda de vcs...
Estou com o desenvolvimento de uma loja virtual "finalizada" porém não funciona no Internet explorer.
Preciso de alguma dica de como funcionar tudo neste navegador que ainda é muito usado por aqueles que não sabem o quanto ele é ruim, só que o cliente final "usuário" não sabe disso e aí complica.
http://www.adescor.com.br/loja/index.ph ... duct_id=69
Como podem ver temos um sistema de paleta de cores funcionando e que não funciona de jeito nenhum no internet explorer e nos demais está funcionando.
obrigado

[denisgomes]

Verifiquei a loja e os resultados foram os seguintes:
- No Chrome: tudo OK.
- No IE9: tudo OK exceto pela fonte personalizada. Por algum motivo o IE9 não a carregou e ela foi substituída pela Times New Roman, mas isso não prejudicou o layout de forma alguma. É importantíssimo que o site apareça bem mesmo sem as fontes personalizadas, e tenho certeza de que é fácil corrigir isso no IE9 revisando o CSS do site.
- No IE8: apareceu normalmente inclusive com a fonte personalizada, mas sem a foto do produto
- No IE7: igual ao IE8

Eu olhei o código fonte da página e vi que você a customizou para inserir a foto do produto de um jeito diferente e permitir que o cliente simule a visualização do adesivo com a cor da parede dele. De alguma forma o conteúdo do arquivo está sendo embutido no próprio código fonte da página:

Código: Selecionar todos

<image overflow="visible" width="1673" height="3202" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABokAAAyCCAYAAABd9ks9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAKrydJREFUeNrs3Q18G3d+3/nfACAJ...

Essa parece ser uma solução interessante, no entanto ela parece ser também a causa do problema. Provavelmente os navegadores mais antigos não aceitam esse tipo de conteúdo codificado com base64 e já embutido no código. Creio que o ideal seja chamar o arquivo da maneira tradicional, com o <img src="nomedoarquivo.png">. Mesmo dessa forma ainda dá pra ter o recurso de simulação da cor da parede no adesivo.

Outra coisa é que essa página específica está pesando 1,5 megabytes, e a imagem dessa página mede 1673 x 3202. Ela deve ser reduzida, e muito.

[Renato Frota]

Já sofri problema similar. Se eu não estou enganado, o problema não era a inclusão via base64, mas o formato (PNG). Se não tiver transparência, use JPG.

Se não funcionar com JPG, então você deve procurar outro meio de inserir essa imagem aí, como enviando ela pelo FTP, e usando a tag img tradicional, como o Denis falou.

-edit-

Agora estou no PC e vi que tem transparência na imagem. É a imagem fixa do produto que foi chamada por base64... acho que dava pra manter da forma original do open...

[marcelo_php]

Obrigado pelas dicas mas não é nada disso.
Nosso sistema de paleta de cores é um sistema que utiliza imagem em formato SVG e não tem nada a ver com jpg ou png

[denisgomes]

Eu não sei como continuar essa conversa com o objetivo de resolver o problema sem transformá-la numa discussão sem fim em que as partes não se entendem e sem causar brigas.

O que posso dizer no momento é que navegadores antigos não suportam o SVG nativamente e por isso deve-se evitar o SVG por ora. Além disso ao publicar os arquivos SVG fica fácil qualquer um piratear as suas criações.

[unknown1140]

Tb concordo com o Denis, usar somente SVG não é uma boa ideia. Infelizmente vc tem q sempre prover um "fallback". Já estou utilizando svg em alguns novos projetos, mas sempre com o fallback para não correr riscos, pois até mesmos os browser's da maioria das versões do Android não suportam...
No seu caso vc tem basicamente duas opções. Ou muda logo para png, ou procura um fallback q funcione neste caso...

[marcelo_php]

Boa Tarde, desculpe mas pode me explicar o que é "fallback"

[unknown1140]

Fallback é qd vc usa uma tecnologia q pode não ser suportada por algum browser e de alguma maneira oferece outra opção q será automaticamente executada.
Por exemplo, qd usamos svg com background fazemos assim:

Código: Selecionar todos

background: url('../images/imagem.svg');

Com o fallback adicionamos mais uma linha, então ficaria assim:

Código: Selecionar todos

background: url('../images/imagem.png');
background: url('../images/imagem.svg');

Se o browser suportar svg ele vai ler a versão svg e ignorar o png, pois ele está se sobrepondo ao png pois vem depois (isso se chama override, é o comportamento natural do css). Se ele for um browser incompatível com svg ele irá ignorar o svg pois ele não reconhece o arquivo, tornando a propriedade inválida e irá ler a próxima propriedade q é o bg no formato png. Pronto, todos saem felizes!!!
Isto tb pode ser feito com várias tecnologias, como players de vídeo q são por padrão em flash, mas podem ter um script de detecção e caso seja detectado q o browser não suporta flash ele "cai" para a versão HTML5, logo será um fallback...
No svg a única maneira q eu conheço de utilizar um fallback sem usar scripts é esta q eu citei...
Se vc usar com a tag <img>, acho q não dá para usar um fallback tão simples...

[bully]

Amigos tenho uma dúvida. Estou usando um template responsive, ele se adapta de acordo com o dispositivo que acesso, seja tablet, smartfone... mas tenho observado que alguns sites ao serem acessados por um smartfone, por exemplo, eles redirecionam para um subdominio por exemplo: acessando pelo notebook eu entro normalmente no http://www.meusite.com.br quando acesso de um dispositivo movel eu sou redirecionado para http://www.m.meusite.com.br... foi um exemplo.
Minha duvida é a seguinte, nesses sites que usei como exemplo, neles tem a opcao de acessar a versao classica ou seja a versao desktop, sendo assim, mesmo acessando do smartfone eu acessaria o www.meusite.com.br, eu achei bacana isso pois o template que estamos usando nao me da essa opcao e nem sempre me mostra tudo o que quero quando acesso pelo smartfone.
É uma boa prática essa questao de dar a opcao ao usuario de acessar a versao de desktop mesmo estando no celular?

Obrigado.

[bully]

Discussão interessante, gostaria de contribuir.

A palavra do momento para layouts é "responsivo", na minha inútil opinião, não há futuro em criar aplicações em versão mobile para iphone, ipad, android, e quantos outros surgirem, para o acesso a lojas por exemplo, isso é perda de tempo e um retrocesso, pois estamos vivendo dias em que a porcaria do IE está sendo a cada dia mais enterrado principalmente por usuários leigos (que é o maior público), em resumo, voltar a criar layouts voltados para cada plataforma é no mínimo um retrocesso, hoje todos os navegadores mais utilizados (graças a Deus o IE não está mais entre eles) falam a mesma língua, responsividade já é a chave, tenho lido muitos artigos de grandes mestres do layout pelo mundo, e todos eles apontam esta como a tendência de hoje, e marco para o fim das versões para cada plataforma, e nós aqui no Brasil já percebemos isso.

Acredito que, quanto antes adotarmos esta tendência, mas nos destacaremos no mercado como um todo, a cada dia que passa fica mais claro como o mercado de mobile e tablet, ou seja, dispositivos móveis, vai muito em breve dominar boa parte de nossas vidas, pois em termos de telefonia já dominam, as facilidades são de longe óbvias; aqui na comunidade por exemplo, depois de meses avaliando as estatísticas, notei um crescimento de mais de 100% nos acessos móveis de 1 mês para o outro consecutivamente, então lancei para o fórum uma versão mobile, assim como para o site, pois não podemos ignorar os dispositivos móveis em nossos serviços.

Mas as coisas estão muito mais avançadas, enquanto ainda falamos sobre responsividade, onde muitos ainda olham com desconfiança ou curiosidade, os grandes mestres do mercado já falam em interatividade, trocando em miúdos, falando da TV Interativa, vejam este vídeo explicando como ela vai funcionar:

Depois de assistir o vídeo que mostra como você, ao ver um comercial da BMW na TV Interativa, poderá parar o comercial e customizar as configurações do carro para deixar ao seu gosto, até ai já é muito interessante, mas vamos mais além, agora imagine que após customizar o carro você poderá clicar no menu lojas, e receber uma lista de lojas de carros que possuem carro que você deseja e imediatamente acessar a que você escolher e caso seja sua vontade, já negociar a compra.

Perceberam o potencial e como estamos atrasados ?

Bom, já escrevi demais, fica ai minha contribuição.