¿Cómo se puede deshabilitar un módulo en función del tamaño del dispositivo o de la ventana gráfica en Joomla 3 para optimizar el rendimiento de los dispositivos móviles?


14

Soy un defensor del diseño web receptivo junto con el diseño web adaptativo (es decir, un diseño que ajusta la pantalla para todos los dispositivos y proporciona contenido según el tamaño del puerto de visualización) en lugar de diseños de sitios 'móviles' separados.

Hay algunos inconvenientes, por ejemplo, en pantallas grandes, me gustaría incluir algunos módulos que estarán ocultos para tamaños de ventana más pequeños. Sin embargo, en el caso de que un módulo esté oculto en función del tamaño de la ventana gráfica, cargar y ejecutar ese módulo provoca un impacto innecesario en el rendimiento cuando se sabe que el módulo específico nunca se mostrará en un tamaño de ventana gráfica más pequeño.

¿Cómo puedo usar el tamaño de la ventana gráfica para deshabilitar efectivamente un módulo (es decir, evitar que se ejecute) para acelerar el rendimiento?

Respuestas:


15

Advanced Module Manager ( http://www.nonumber.nl/extensions/advancedmodulemanager ) le permite asignar módulos según el TIPO de navegador. Por lo tanto, puede seleccionar un dispositivo móvil, de escritorio o específico. Sin embargo, no le permite elegir por tamaño, por lo que solo es útil hasta cierto punto.

También puede ser posible con una combinación de php y javascript. Le enviaré esta pregunta a mi amigo, él podría tener una idea.


Qué buena idea, nunca pensé en usar AMM de esta manera.
jackJoe

Peter ha puesto una gran cantidad de funcionalidades asombrosas en AMM, es una necesidad en mi opinión.
Faye

Estoy de acuerdo con ésto. Si me quedé atrapado con un tema que no tenía esto incorporado (los temas de warp 7, por ejemplo, tienen esto incorporado), entonces usaría AMM.
Brian Peat el

@BrianPeat: ¿puede proporcionar más detalles sobre cómo funciona esto con WARP7?
NivF007

3
Warp 7 tiene un panel en el administrador de plantillas que le permite hacer clic en los botones de escritorio / tableta / teléfono y enciende y apaga los módulos en función de esa configuración. El tema del cohete hace algo similar con las clases especiales. Lo que no sé es si los módulos están descargados, o si todo está cargado y luego simplemente oculto. Sospecho que es lo último, ya que puede verlo cambiar a medida que cambia el tamaño del navegador. Si descarga completamente las cosas según el tamaño, ¿qué hará si cambia el tamaño de la ventana de forma activa?
Brian Peat el

10

No creo que deba deshabilitar módulos como ese y aún así llamarlo diseño receptivo. Parte del punto con responsive es que responderá a los cambios de viewport y no solo que imprime un diseño diferente para diferentes tamaños de pantalla.

Dependiendo de los tamaños de pantalla de ejemplo, es posible que una tableta en modo vertical haga que el módulo no se cargue, pero esa misma tableta podría necesitar ese contenido una vez en modo horizontal.


3
Si bien eso es cierto, no es realmente efectivo en la práctica. Lo que significa que un usuario de iPhone nunca tendrá una resolución de pantalla de 1440x900, ni tendrá la capacidad de cambiar el tamaño de su ventana gráfica. El diseño receptivo donde la gente dice "ooh mira cómo cambian las cosas a medida que cambio el tamaño de la ventana de mi navegador" en realidad solo es efectivo para los diseñadores que desean presumir. En la práctica, está perfectamente bien adoptar el enfoque de apagar los módulos y cambiar la salida para diferentes tamaños de pantalla.
Don Gilbert

3
@Don Lo siento, simplemente no es un diseño receptivo, y hay muchas personas en el escritorio que aprovechan las características de cambio de tamaño cuando trabajan en Windows. El diseño receptivo responde a los cambios de la ventana gráfica, no si es de un determinado dispositivo o no.
Spunkie

2
Estoy de acuerdo. Pero no estoy de acuerdo con los objetivos del "diseño receptivo". Como dije, los diseñadores lo idearon para presumir. Olvidan el hecho de que los iPhone nunca tendrán una resolución enorme. tl; dr: el diseño receptivo no importa en los dispositivos móviles. Prefiero ahorrar ancho de banda de red que tener un "diseño puro y receptivo".
Don Gilbert

2
@DonGilbert y en Spunkie - OMI - ambos tienen razón. La definición 'estricta' de diseño web receptivo no incluye la modificación de 'contenido': editaré la pregunta para incluir RWD / AWD: diseño web
receptivo

8

Esta es una clase JS que hice hace algún tiempo que podría usar JavaScript para detectar ventanas gráficas, nunca se ha sometido a pruebas rigurosas, pero 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;
}

Básicamente lo usas así

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

El punto de interrupción tiene parámetros mínimos / máximos para el ancho, luego una función encadenada para ingresar y salir, con una devolución de llamada para ejecutar algún código JS.

No puedo detallar cómo funciona, ya que lo hice hace mucho tiempo, pero puedes usarlo si es útil. Esto se puede usar para cargar módulos a través de ajax en función de la ventana gráfica. Creo que com_ajax de joomla se puede usar con esto para crear algunas funciones realmente geniales.


1
Esto parece una pieza importante del rompecabezas y tiene posibilidades interesantes: gracias por la respuesta y especialmente por publicar el código.
NivF007

1
La mejor respuesta es mi compañero de trabajo, esta es más o menos mi idea: P
Jordan Ramstad


3

Si desea acelerar el rendimiento, no cargue módulos innecesarios. Si no es necesario en pantallas pequeñas, tampoco es necesario en pantallas más grandes.

Las personas con pantallas de dispositivos más grandes también quieren un sitio web rápido que no cargue elementos innecesarios. Está asumiendo erróneamente que las pantallas más grandes tienen más ancho de banda disponible. Ellos no.

Sea un buen diseñador y brinde a todos sus usuarios una experiencia de sitio optimizada, independientemente de su tamaño de pantalla.


2

Sugeriría que el rastreo del navegador es la forma incorrecta de hacerlo aquí. Si realmente desea cargar solo módulos en función del ancho de la pantalla, debe ejecutar JavaScript, que luego llama al módulo por AJAX (com_ajax). Tenga en cuenta que puede haber una recompensa en términos de optimización de motores de búsqueda para contenido cargado por AJAX.


2

Generalmente uso css @media para que esto suceda. Simplifica la ocultación de elementos según el tamaño de la pantalla y hace que se analicen cuando la tableta horizontal es lo suficientemente ancha como para mostrarla y el ancho del retrato no lo es. Aquí hay un ejemplo:

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

Usualmente uso esto para ocultar una posición completa del módulo, así que baso mi selector css en el contenedor de esa posición (o posiciones en algunas plantillas).


Gracias por tu respuesta. El problema con el enfoque de consulta de medios CSS es que todavía está ejecutando un módulo (a pesar de que está eligiendo no mostrarlo). La solución que estoy buscando no ejecutará el módulo a menos que se muestre.
NivF007

Como han dicho otros, esa puede no ser la mejor idea para las personas que cambian el tamaño de su ventana gráfica después de la carga de la página, así como las tabletas horizontales o verticales. Las pocas centésimas de segundo que tarda el servidor en analizar este módulo no importará mucho y, dado que es display: ninguno en los dispositivos más pequeños no lo representa, por lo que tampoco se pierde tiempo allí. - Pero si realmente no quieres que se cargue, entonces Advanced Module Manager es probablemente el camino a seguir como está vinculado en otra respuesta.
Pathfinder

1

Puede cargarlo a pedido utilizando algunos javascript que llaman a com_ajax y devuelve solo los módulos para el tamaño actual.


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.