Como um módulo pode ser desativado com base no tamanho do dispositivo ou da janela de visualização no Joomla 3 para otimizar o desempenho de dispositivos móveis?

14

Sou um defensor do Design Responsivo da Web em conjunto com o Adaptive Web Design (ou seja, um design que ajusta a exibição para todos os dispositivos e fornece conteúdo com base no tamanho da porta de exibição), em vez de separar os designs de sites 'móveis'.

Existem algumas desvantagens, por exemplo, em telas grandes, que eu gostaria de incluir alguns módulos que serão ocultados para tamanhos de viewport menores. No entanto, no caso em que um módulo está oculto com base no tamanho da janela de visualização, carregar e executar esse módulo causa um impacto desnecessário no desempenho quando se sabe que o módulo específico nunca será exibido em um tamanho de janela de visualização menor.

Como posso usar o tamanho da janela de exibição para desativar efetivamente um módulo (ou seja, impedi-lo de executar) para acelerar o desempenho?

NivF007
fonte

Respostas:

15

O Advanced Module Manager ( http://www.nonumber.nl/extensions/advancedmodulemanager ) permite atribuir módulos com base no TYPE do navegador. Assim, você pode selecionar dispositivos móveis, computadores ou dispositivos específicos. No entanto, ele não permite que você escolha o tamanho, por isso é útil apenas até certo ponto.

Também pode ser possível com uma combinação de php e javascript. Vou enviar essa pergunta ao meu amigo, ele pode ter uma idéia.

Faye
fonte
Que ótima idéia, nunca pensei em usar o AMM dessa maneira.
jackJoe
O Peter colocou muitas funcionalidades incríveis no AMM, é um item obrigatório na minha opinião.
Faye
Eu concordo com isto. Se eu estivesse preso a um tema que não tinha isso incorporado (temas do warp 7, por exemplo, isso também), então eu usaria o AMM.
Brian Peat
@BrianPeat - você pode fornecer mais detalhes sobre como isso funciona com o WARP7?
NivF007
3
O Warp 7 possui um painel no administrador de modelos que permite clicar nos botões do desktop / tablet / telefone e ativar e desativar os módulos com base nessas configurações. O tema Rocket faz algo semelhante com aulas especiais. O que eu não sei é se os módulos estão descarregados, ou se tudo está carregado e apenas oculto. Eu suspeito que seja o último, pois você pode vê-lo mudar à medida que redimensiona o navegador. Se você descarregar completamente as coisas com base no tamanho, o que fará se você redimensionar ativamente a janela?
Brian Peat
10

Eu não acho que você deva desativar módulos como esse e ainda chamar de design responsivo. Parte do ponto de resposta é que ele responderá a alterações na janela de visualização e não apenas imprimirá um layout diferente para diferentes tamanhos de tela.

Dependendo dos tamanhos de tela de exemplo, é possível que um tablet no modo retrato faça com que o módulo não seja carregado, mas esse mesmo tablet poderá precisar desse conteúdo uma vez no modo paisagem.

Spunkie
fonte
3
Embora isso seja verdade, não é realmente eficaz na prática. Isso significa que um usuário do iPhone nunca terá uma resolução de tela de 1440x900, nem poderá redimensionar sua viewport. O design responsivo, em que as pessoas ficam como "ooh, olhe como as coisas mudam à medida que redimensiono a janela do navegador", é realmente eficaz apenas para designers que desejam se exibir. Na prática, é perfeitamente bom adotar a abordagem de desligar os módulos e alterar a saída para diferentes tamanhos de tela.
Don Gilbert
3
@ Don Desculpe, então, simplesmente não é um design responsivo, e há muitas pessoas na área de trabalho que aproveitam os recursos de redimensionamento ao trabalhar no Windows. O design responsivo responde às alterações na viewport, independentemente de ser de um determinado dispositivo ou não.
Spunkie
2
Concordo. Mas eu discordo dos objetivos do "design responsivo". Como eu disse, foi inventado pelos designers para se exibir. Eles esquecem o fato de que o iPhone nunca terá uma resolução enorme. tl; dr - O design responsivo não importa em dispositivos móveis. Prefiro economizar largura de banda da rede do que ter "design responsivo puro".
Don Gilbert
2
@DonGilbert e na Spunkie - IMO - vocês dois estão certos. A definição 'estrita' de Design Responsivo da Web não inclui a modificação de 'conteúdo'
editarei
8

Esta é uma classe JS que criei há algum tempo, que poderia usar o javascript para detectar viewports; nunca foi submetida a testes rigorosos, mas funciona.

function ResJS(){
    this.min = 0;
    this.max = 0;
    this.config = config;
    this.width = function(){
        return jQuery(window).width();
    }
    this.breakpoint = function(min,max){
        this.min = min;
        this.max = max;
        this.outside = false;
        this.inside = false;
        this.triggeredOut = false;
        this.triggeredIn = false;
        this.enter = function(callback){
            var context = this;
            jQuery(window).on('resize',function(){
                if(context.min<context.width()&&context.max>context.width()){
                    if(!context.triggeredIn){
                        jQuery(document).ready(function(){callback(context.min,context.max)});
                        context.inside = true; //browser width has entered breakpoint
                        context.outside = false; //browser has left another breakpoint
                        context.triggeredIn = true; //triggered event for breakpoint
                        context.triggeredOut = false; //be ready to trigger leave event
                    }
                }else{
                    context.inside = false; //browser width is not within breakpoint
                    context.outside = true; //brower width is outside of breakpoint
                }
            });
            if(context.min<context.width()&&context.max>context.width()){
                jQuery(document).ready(function(){callback(context.min,context.max)});
                context.inside = true;
                context.outside = false;
                context.triggeredIn = true;
                context.triggeredOut = false;
            }else{
                context.inside = false;
                context.outside = true;
                context.triggeredOut = true;
                context.triggeredIn = false;
            }
            return this;
        }
        this.leave = function(callback){
            var context = this;
            jQuery(window).on('resize',function(){
                if(context.outside&&!context.triggeredOut){
                    jQuery(document).ready(function(){callback(context.min,context.max)});
                    context.triggeredIn = false;
                    context.triggeredOut = true;
                }
            });     
            return this;
        }
        return this;
    }
    return this;
}

Basicamente você usa assim

ResJS()
    .breakpoint(0,600)
    .enter(function(min,max){
        console.log(min,max,'enter');
    })
    .leave(function(min,max){
        console.log(min,max,'leave');
    });

O ponto de interrupção possui parâmetros mín. / Máx. De largura e, em seguida, uma função encadeada para inseri-lo e sair, com um retorno de chamada para executar algum código JS.

Não posso entrar em detalhes sobre como funciona, como fiz há muito tempo, mas você pode usá-lo gratuitamente se isso ajudar. Isso pode ser usado para carregar módulos através do ajax com base na janela de visualização. Eu acredito que o com_ajax do joomla pode ser usado com isso para criar alguns recursos realmente interessantes.

Jordan Ramstad
fonte
1
Parece uma peça importante do quebra-cabeça e tem possibilidades interessantes - obrigado pela resposta e principalmente por postar o código.
NivF007
1
A resposta máxima é meu colega de trabalho, isto é mais ou menos a minha ideia: P
Jordan Ramstad
3

Se você deseja acelerar o desempenho, não carregue módulos desnecessários. Se não for necessário em telas pequenas, também não será necessário em telas maiores.

Pessoas com telas maiores também querem um site rápido que não carrega lixo desnecessário. Você está assumindo erroneamente que telas maiores têm mais largura de banda disponível. Eles não.

Seja um bom designer e ofereça a todos os seus usuários uma experiência otimizada no site, independentemente do tamanho da tela.

Seth Warburton
fonte
2

Eu sugeriria que cheirar o navegador é o caminho errado para seguir aqui. Se você realmente deseja carregar apenas módulos com base na largura da tela, precisa estar executando algum javascript, que chama o módulo por AJAX (com_ajax). Lembre-se de que pode haver uma recompensa em termos de otimização do mecanismo de pesquisa para o conteúdo carregado pelo AJAX.

Jeepstone
fonte
2

Eu geralmente uso css @media para fazer isso acontecer. Facilita a ocultação de objetos, dependendo do tamanho da tela, e a análise é feita em momentos em que uma mesa digitalizadora de paisagem é larga o suficiente para mostrá-la e a largura do retrato não. Aqui está um exemplo:

@media (max-width:699px) {
    #moduleid, .modulewrapperclass {display:none}
}

Eu costumo usar isso para ocultar uma posição inteira do módulo, para basear meu seletor de css no wrapper dessa posição (ou posições em alguns modelos).

desbravador
fonte
Obrigado pela sua resposta. O problema com a abordagem de consulta de mídia CSS é que você ainda está executando um módulo (mesmo que esteja optando por não exibi-lo). A solução que estou procurando não executará o módulo, a menos que seja exibido.
NivF007
Como já foi dito, essa pode não ser a melhor idéia para as pessoas que alteram o tamanho da janela de exibição após o carregamento da página, além de tablets paisagem e retrato. Os poucos centésimos de segundo que o servidor leva para analisar este módulo não importam muito e, como é exibido: nenhum nos dispositivos menores que você não renderiza, portanto, também não há tempo perdido. - Mas se você realmente não deseja carregá-lo, o Advanced Module Manager é provavelmente o caminho a seguir, conforme vinculado em outra resposta.
pathfinder
1

Você pode carregá-lo sob demanda usando algum javascript que chama com_ajax e retorna apenas os módulos para o tamanho atual.

Harald Leithner
fonte