Site em Flash + versão html para mobile

[Elektra 102]

Tinha ideia que uma função em JavaScript seria responsável por identificar a resolução, mas nunca li nada a respeito, nem sabia o termo para pesquisar.

 

Postei no fórum de Html, e o William Bruno comentou sobre o SWFObject para substituir o conteúdo.

 

 

Agora, penso seja um pouco diferente carregar um site em Flash com layout líquido no desktop e uma versão em html para dispositivos sem o Flash Player.

 

 

 

EDIT:

 

Um colega de outro local me passou este link >> http://css-tricks.com/snippets/javascript/redirect-mobile-devices/

 

e também comentou sobre htaccess (conheço apenas de nome)

 

 

Orientações são bem vindas

 

 

Abraços

[Donando 1]

Electra,

acho que vale uma pesquisada em como identificar o "user agent".

 

Já usei uns códigos em javascript que identificavam o "user agent" e em caso de estar usando iphone, ipad, etc. ele abria uma pagina tipo mobile.html ...

 

espero que ajude.

 

Abs

 

p.s. mais ou menos conforme o que você postou no link mas não precisava pegar a resolução...

[Elektra 102]

Muito obrigada Donando. :grin:

 

Vou pesquisar.

[Gabriel Heming 766]

Este site, lhe entrega o código pronto, e em diversas linguagens de programação, de muitos users agentes considerados Mobile. Me ajudou muito, pois desconheço a grande maioria de SO's mobiles.

 

http://detectmobilebrowsers.com/

[Elektra 102]

Valeu Gabriel :thumbsup:

 

Não sei nada sobre criar versão pra mobile.

 

Estou desenvolvendo um sitezinho de estudo (pessoal), me ocorreu tentar esta possibilidade.

[Gabriel Heming 766]

Também desenvolvi recente um site para a minha empresa. Como ele era especificamente para mobile, resolvi(finalmente) aprender HTML 5, pois ainda não via uma utilidade real no uso dele no meu caso, onde temos que rodas nossos sites/sistemas em todos os navegadores.

 

A aprendizagem foi muito bacana, se quiser alguma ajuda, posso colocar alguns links e materiais que utilizei. Mas também dependerá de qual tecnologia você vai querer focar.

[Elektra 102]

Agradeço se puder compartilhar os links, conhecimento nunca é demais, e qualquer auxílio possível é muito bem vindo.

 

 

Buenas, ganhei um useragent em JS com tratamento até pra chinaphone (+ hmtl), um luxo, mas confesso que ainda não sei como usar (nem deu tempo de tentar).

 

Uso SWFObject por conta do SWFAddress, e meu html é configurado em 100% para layout líquido em AS3.

 

A princípio, se souber como carregar apenas o html com a imagem "oi,tô aqui" em mobile e algumas dicas, já fico satisfeita (também ganhei livros sobre layout responsivo, mas ainda tenho muito que aprender pra concluir o site em Flash, apenas de estudo).

 

 

Abraços

[Gabriel Heming 766]

Para o bem da verdade sou nulo quando falamos em ActionScript. No tempos que existiam banners (fodalhões, diga-se de passagem) feitos em flash, eu até sabia usar um goto... Hoje eu dia eu passo longe.

 

Aos conhecimentos (tips and tricks):

 

- Saber diferenciar viewport (layout x visual):

Pixels, pixels ou pixels? Dicas de Web Mobile com viewport

Using the viewport meta tag to control layout on mobile browsers

 

- Saber o que os principais OS possuem em particular:

Creating a Mobile Web Application with Meta Tags

 

- Abuse de HTML 5. Simplesmente funciona. Existe "um pouco" de cross-browser, mas é mínimo, o principal bug, está explicado no tópico seguinte:

HTML 5 - Novas tags

 

- Conhecer o principal bug do texto no layout viewport sobre visual viewport:

Why won't the Android browser span this paragraph over the full browser width?

android autofit mode causing issues with css width in web page

 

Esse bug, é bem interessante quando entende-se que seu mobile possui um viewport e ele emula um viewport (Vide primeiro ítem). O que acontecia no meu mobile:

- A resolução do meu mobile é 480x320;

- O viewport do site estava definido para 960x480; (não é bom fixar viewport, mas no meu caso, era necessário)

- Todo o layout ficava OK, exceto os textos dos parágrafos que não ocupavam toda a largura.

 

Testei em vários mobiles diferentes. Somente o meu e mais um possuía esse problema. Após fui constatar que, os textos não suportam a definição de viewport e eles são renderizados pela largura da tela (320px no caso). A solução, apesar de todos os problemas, é bem simples. Basta definir uma imagem PNG transparente de 1x1 e adicionar como background. Problema resolvido (em partes).

 

Se você acessar a versão full do fórum imasters, irá verificar esse mesmo problema. A última vez que acessei a versão full, através de um mobile, fazem 4 meses.

 

Sobre o redirecionamento, utilizei em PHP. A ideia era bem simples, acessando o site convencional através de um mobile, ele deve ser redirecionado para o site mobile. Com uma condição, usuários vindos do site mobile podem acessar o site convencional e vice-versa.

 

Vou tentar exemplificar as regras que eu possuía:

- Domínio principal dominio.com.br;

- Mobile m.dominio.com.br;

- Se um mobile acessasse o site principal pela primeira vez, deve ser redirecionado para o site mobile;

- Se o mobile já estivesse navegando dentro do domínio principal, ou mobile, ele possui acesso ao site convencional (não haverá redirecionamento);

- Demais agents (não mobiles) não possuirão restrição alguma.

 

Segue o código, esse código foi inserido ao acessar o site convencional.

<?php 
/** recupera-se o USER AGENT **/
$useragent = $_SERVER['HTTP_USER_AGENT'];

/** verifica-se qual era o endereço URI no qual o usuário estava navegando anteriormente **/
$httpReferer = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : false;

if(
   /** caso o usuário tenha vindo com alguma URI contendo dominio.com.br (www.dominio.com.br/dominio.com.br/m.dominio.com.br), não haverá redirecionamentos **/
   !(stripos($httpReferer , 'dominio.com.br') !== false)
   && (
       /** caso o usuário cumpra a primeira exigência (não ter vindo no atual domínio), verifique se é agent mobile **/
preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent) 
       || preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i' , substr($useragent , 0 , 4))
   )
) {
   header('Location: http://m.dominio.com.br');
}

 

No caso de usar JavaScript, eu realizei algumas alterações, pequenas para o bem da verdade, o que torna mais fácil de entender o redirecionamento:

var redirect = (function(a,B){
   if(
       /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)
   ||    
       /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))
   )
       window.location = b;
});

 

Basicamente, eu salvei a function dentro da variável redirect. Agora, basta você definir para onde será o redirecionamento (parâmetro b), o resto fica igual:

redirect(navigator.userAgent || navigator.vendor || window.opera, 'http://m.dominio.com.br');

 

Acho que eu me estendi um pouco, caso eu me perdi do assunto (ActionScript) em questão, me avise. Qualquer dúvida, estamos ai.

 

Esqueci de mencionar mais isso:

- CSS: Resolução X Orientação

Detecting device size & orientation in CSS

- Different Stylesheets for Differently Sized Browser Windows

 

O mais importante em um layout responsivo.

[Elektra 102]

Muitíssimo obrigada pela atenção, uau curso completo! :grin:

 

Perdoe-me a falta de conhecimento, mas pelo que compreendi terei uma index.html que carrega o site em Flash(main.swf), caso o acesso seja por mobile será redirecionado a index_mobile.html. É isso?

 

Ganhei faz algum tempo, um code em PHP 5 para avatar aleatório, e meu server (DialHost/plano básico) engasgou, não sei se houve atualização.

 

O colega comentou que o ideal seria usar uma linguagem de servidor, como PHP, C#, VB entre outras, mas como informei sobre o suporte, ficamos com o JavaScript.

 

 

Abraços

[Gabriel Heming 766]

[..]pelo que compreendi terei uma index.html que carrega o site em Flash(main.swf), caso o acesso seja por mobile será redirecionado a index_mobile.html. É isso?

Exato. O index.html será a "porta de entrada". Nele você definirá para onde irá seu site.

 

Ganhei faz algum tempo, um code em PHP 5 para avatar aleatório, e meu server (DialHost/plano básico) engasgou, não sei se houve atualização.

Não consegue rodar o PHP por causa desse code?

 

O colega comentou que o ideal seria usar uma linguagem de servidor, como PHP, C#, VB entre outras, mas como informei sobre o suporte, ficamos com o JavaScript.

Até Assembly (caso fosse uma linguagem server-side, nesse contexto) seria mais recomendável que JavaScript. Muitos navegadores podem desabilitar o JavaScript. Mas é raro (hoje em dia), ainda mais falando-se em browsers mobiles. Exceto quem navega em browsers somente textuais. Ai não tem nem porque querer ver um site mobile. No final das contas, o JavaScript é mais suscetível a falhas. Basicamente é como uma mega-sena. Sabemos que um dia poderemos ganhar, o que nunca acontece. Mas algum dia, um felizardo acerta.

[Elektra 102]

Valeu Gabriel, verificação atualizada.

 

 

Não podia abusar da gentileza, eu tinha que informar.

 

 

Comentou que os navegadores nem sempre interpretam o JS da mesma forma, mas o code foi testado no ipad, iphone, android, windows phone, mac, linux, windows e alguns tablets genéricos, e quem fez é mestre em várias linguagens.

[Gabriel Heming 766]

Nuss. PHP 4.4.9

Se não me engano, é a versão que continuou em paralelo com o PHP 5. A PCRE já existia nessa versão, mas já que o código em JavasScript funciona perfeitamente, não há necessidades.

 

Comentou que os navegadores nem sempre interpretam o JS da mesma forma

Depende de cada navegador sempre, no mais é quase tudo igual (assim como o CSS). No caso, como o efeito desejado é para mobiles, não vejo problemas, pois ainda não vi um mobile não rodando um javascript.

 

 

quem fez é mestre em várias linguagens.

De fato: "é alguém que não tinha nada para fazer".

[Elektra 102]

É um querido amigo que merece meu respeito e admiração. Code pra rodar lindo em diversos chinaphones não é pra qualquer um.

 

Me auxiliou diversas vezes com muita generosidade, foi colega de fórum e já colaborou com artigos para o portal.

 

Não sei sobre a versão atual do PHP, o máximo que uso é um form de contato, baixei um template gringo e alguns colegas colaboraram com os ajustes (acentuação e remover uso da barra de espaços na validação).

 

 

Sua disposição em me esclarecer foi valiosa, agradeço imensamente

 

 

Grande abraço :clap:

[Daniel o rei 14]

Nuss. PHP 4.4.9

Se não me engano, é a versão que continuou em paralelo com o PHP 5. A PCRE já existia nessa versão, mas já que o código em JavasScript funciona perfeitamente, não há necessidades.

 

 

Depende de cada navegador sempre, no mais é quase tudo igual (assim como o CSS). No caso, como o efeito desejado é para mobiles, não vejo problemas, pois ainda não vi um mobile não rodando um javascript.

 

 

 

De fato: "é alguém que não tinha nada para fazer".

 

Eu tentaria pegar com uma linguagem server-side como php, por exemplo no meu celular não suporta javascript

Da para pegar com o http user agent: SAMSUNG-SGH-C276/1.0 UP.Browser/6.2.3.3.c.1.101 (GUI) MMP/2.0

 

- Abuse de HTML 5. Simplesmente funciona. Existe "um pouco" de cross-browser, mas é mínimo, o principal bug, está explicado no tópico seguinte:

HTML 5 - Novas tags

Meu celular não pega nem javascript, imagina html 5.

 

 

Até Assembly (caso fosse uma linguagem server-side, nesse contexto) seria mais recomendável que JavaScript. Muitos navegadores podem desabilitar o JavaScript. Mas é raro (hoje em dia), ainda mais falando-se em browsers mobiles. Exceto quem navega em browsers somente textuais. Ai não tem nem porque querer ver um site mobile. No final das contas, o JavaScript é mais suscetível a falhas. Basicamente é como uma mega-sena. Sabemos que um dia poderemos ganhar, o que nunca acontece. Mas algum dia, um felizardo acerta.

Qual o problema com assembly?

até várias pessoas que programam PIC implicam com ele...

 

Mas como nem todo mundo tem um celular tão rum quanto meu,

acho que seria legal identificar do que o usuário ta acessando para todos ficarem felizes e aproveitar o máximo do navegador.

[Gabriel Heming 766]

Meu celular não pega nem javascript, imagina html 5.

Depende do nicho. Qual o SO do seu celular? Navegador Wap? Seu navegador renderiza CSS?

 

Qual o problema com assembly?

até várias pessoas que programam PIC implicam com ele...

Problema nenhum, já programei em assembly para fins de estudo, mas faça um script server-side com ele e depois me fale o grau de dificuldade. Quando me referi "até em assembly", não estava dizendo que a linguagem era ruim, somente afirmando que mesmo sendo mais fácil criar um código em JavaScript, um código em Assembly seria muito melhor. É só um contexto diferente.

[Daniel o rei 14]

Depende do nicho. Qual o SO do seu celular? Navegador Wap? Seu navegador renderiza CSS?

 

 

Problema nenhum, já programei em assembly para fins de estudo, mas faça um script server-side com ele e depois me fale o grau de dificuldade. Quando me referi "até em assembly", não estava dizendo que a linguagem era ruim, somente afirmando que mesmo sendo mais fácil criar um código em JavaScript, um código em Assembly seria muito melhor. É só um contexto diferente.

 

Serial legal também fazer um site que pegasse em qualquer coisa.

 

Por exemplo o google tem páginas formatadas para celular(o redirecionamento não funciona mas da para conseguir entrar no gmail).

 

E atravéz do http user agent(na variavel $_SERVER(array) do php) da para pegar do que o usuário ta acessando para formatar do geito que quizer.

 

Quanto a fazer um script server-side com assembly eu não lhe falaria nunca o grau de dificuldade pois eu morreria primeiro antes de terminar...

 

Eu acessando uma página do celular peguei o http user agent: SAMSUNG-SGH-C276/1.0 UP.Browser/6.2.3.3.c.1.101 (GUI).

 

Seria bom um site mais simples para celulares simples

e um para celulares melhores com o que ele suportar, js, html5...

 

não expliquei direito no outro post

[Elektra 102]

Daniel, o amigo que gentilmente desenvolveu o code JavaScript mencionou que simplificou pra funcionar em diversos aparelhos.

 

Tenho lido que há problemas relacionados ao uso do Htm5/CSS3 por falta de suporte, mas não domino o assunto para acrescentar detalhes.

 

Nesse caso, é questão de bom senso, ou considerar o público alvo.

 

abs