Thème mobile : Nouvelles fonctionnalités pour une meilleure expérience utilisateur

Voir le sujet précédent Voir le sujet suivant Aller en bas

Astuce Thème mobile : Nouvelles fonctionnalités pour une meilleure expérience utilisateur

Message par The Godfather le Mer 21 Sep 2016 - 9:58

Thème mobile : l’évolution continue vers une meilleure expérience utilisateur  

Chers utilisateurs,

Dans un souci d’amélioration continue de nos services, et afin de donner suite à vos nombreuses sollicitations, Forumactif a le plaisir de vous proposer la V2 du thème mobile pour ses forums.  Very Happy

Elle vient compléter la 1ère version de notre thème moderne avec des fonctionnalités qui améliorent encore plus votre expérience utilisateur via vos smartphones et tablettes.  Cool

Ajout de la possibilité de s’enregistrer sur les forums.





Vous l’avez tant réclamé et c’est désormais possible. Vos visiteurs peuvent s’enregistrer sur vos forums directement depuis sa version mobile. Le processus est simple tout en restant semblable à celui de la version classique de votre forum dont il reprend les principaux éléments définis par l’administrateur.

Voir l'image:

Ajout du bouton "Facebook connect".





Que ce soit lors de l’enregistrement ou encore pour se connecter au forum, vos membres peuvent désormais compter sur le système "facebook connect" intégré nativement à la version mobile moderne de votre forum pour leur faciliter la tâche.

Voir l'image:

Ajout des notifications.





Son succès indéniable sur la version web de nos forums et vos nombreuses réclamations nous ont poussés à intégrer les notifications à cette nouvelle version mobile. Désormais, la version mobile moderne de votre forum vous notifie elle aussi des éléments qui vous intéressent afin que vous soyez à jour de tout ce qui se passe sur le forum.

Voir l'image:

Ajout de la possibilité de consulter directement la dernière réponse d’un sujet.





Directement inspiré de la version web de vos forums, l’indication de la date et heure du dernier message s’affichant sous le titre de chaque sujet est désormais cliquable. Elle dirige directement vers le dernier message non lu sur le sujet abordé. Très pratique dans le cas des sujets multi-pages.

Voir l'image:

Ajout de la possibilité d’éditer un message.





Les ayants droits peuvent désormais éditer leurs messages ou les messages des autres utilisateurs directement depuis la version mobile du forum. Simple mais très pratique. Wink

Voir l'image:

Ajout de la possibilité de supprimer un message.





Les ayants droits peuvent désormais supprimer leurs messages ou les messages des autres utilisateurs directement depuis la version mobile du forum. Rapide et efficace.

Voir l'image:

Ajout de la page du profil.





Avec cette V2, le thème mobile de vos forums s’enrichit d’une nouvelle page affichant le profil de chaque utilisateur. Accessible depuis le clic sur son avatar, elle vous donne l’essentiel des informations sur le membre.

Voir l'image:

Ajout d’un bouton "Retour vers le haut".





Très pratique en cas de pages longues, cette icône apparait dès lors que le défilement sur la page consulté devient long. Elle vous permet d’un simple clic de remonter vers le haut de la page.

Voir l'image:




Nous espérons que ces nouveautés répondront à vos attentes et vous apporteront pleine satisfaction.  ::pourtoi::

Et je vous donne rendez-vous très bientôt avec d’autres idées et d'autres nouveautés sur Forumactif !

Cordialement
L'équipe Forumactif

Remarque importante : afin que les nouvelles fonctionnalités apportées par la V2 de la version mobile moderne soient disponibles sur le forum, les administrateurs ayant personnalisés l'un des templates mobiles suivants overall_footer, overall_header, posting_confirm_code, topics_list_box et viewtopic_body doivent absolument prendre en considération les modifications ci-dessous.



Dernière édition par The Godfather le Mer 21 Sep 2016 - 18:04, édité 7 fois



The Godfather
Adminactif
Adminactif

Masculin
Messages : 13834
Inscrit(e) le : 02/05/2004

http://forum.forumactif.com/
The Godfather a été remercié(e) par l'auteur de ce sujet.

Astuce Modifications à faire sur les templates mobiles

Message par The Godfather le Mer 21 Sep 2016 - 10:02



    Pour le template overall_footer


    Remplacer:

    Code:

            {PROTECT_FOOTER}
            <div class="application_footer_spacer"></div>
    Par :

    Code:

            {PROTECT_FOOTER}
            <a id="to-top" href="#wrap"><i class="material-icons">&amp;#xE316;</i></a>
            <div class="application_footer_spacer"></div>


    Remplacer:

    Code:

    <script type="text/javascript">
                $(document).ready(function(){
    Par :

    Code:

    <script type="text/javascript">
    //<![CDATA[
                $(document).ready(function() {


    Remplacer:

    Code:

                    if ($("#at-share-dock").length) {
                        $(".btn-floating").css("bottom", "60px");
                    };
    Par :

    Code:

                    if ($("#at-share-dock").length) {
                        $(".btn-floating, #to-top").css("marginBottom", "50px");
                    };


    Après:

    Code:

                            case '-96px 0px':
                                $(this).html('<i class="material-icons">&amp;#xE8AC;</i>');
                                break;
    Ajouter:

    Code:

                            case '-128px 0px':
                                $(this).html('<i class="material-icons">&amp;#xE7FE;</i>');
                                break;
                            case '-160px 0px':
                                $(this).html('<i class="material-icons">&amp;#xE7F4;</i>');
                                $(this).addClass('BtnNotif');
                                break;


    Avant:

    Code:

    </script>
    </body>
    </html>
    Ajouter:

    Code:

      
        $('#to-top').click(function(e) {
            e.preventDefault();
            $('html, body').animate({
                scrollTop: 0
            }, 400);
        });

        $(document).scroll(function() {
            var y = $(this).scrollTop();
            if (y > 164) {
                $('#to-top').addClass('visible');
            } else {
                $('#to-top').removeClass('visible');
            }
        });
    //]]>
    </script>
    <script type="text/javascript">
    //<![CDATA[
        $(document).ready(function() {
            if(_userdata['activate_toolbar'] && _userdata['session_logged_in']) {
                Toolbar.init;
                var timeout = setInterval(reloadNotif, 1000);
                $("#header").prepend('<a id="mNotificationBtn" href="./profile?mode=editprofile&page_profil=notifications"></a>');
                $("#mNotificationBtn").prepend('<span id="unread_notif">' + _toolbar.notifications.unread + '</span>');
                $('.BtnNotif').prepend('<span id="unread_notif_menu">' + _toolbar.notifications.unread + '</span>');
            };

            function reloadNotif() {
                if (_toolbar.notifications.unread > 0) {
                    $("#unread_notif").html(_toolbar.notifications.unread);
                    $("#unread_notif_menu").html(_toolbar.notifications.unread);
                    if(!$("#unread_notif").hasClass("notification-new")) {
                        $("#unread_notif").addClass('notification-new');
                        $("#unread_notif_menu").addClass('notification-new');
                        $("#mNotificationBtn").addClass('notification-new');
                    }
                }
            };
        });
    //]]>

    Pour le template overall_header


    Après:

    Code:

        <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
    Ajouter:

    Code:

        <!-- BEGIN switch_fb_login -->
        <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
        <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
        <!-- END switch_fb_login -->


    Remplacer:

    Code:

    <body>
    Par:

    Code:

    <body id="mpage-body-modern">

    Pour le template posting_confirm_code


    Remplacer:

    Code:

    <br><img src="{S_ANTI_ROBOT}" alt="" border="0" />
    Par :

    Code:

    <br /><img src="{S_ANTI_ROBOT}" alt="" border="0" />

    Pour le template topics_list_box


    Après:

    Code:

    <!-- END table_sticky -->
    Ajouter:

    Code:

            <div class="forum-section-wrap">


    Remplacer:

    Code:

                    <div class="forum-lastpost">{topics_list_box.row.L_LATEST_POST_FROM_THE}</div>
                </div>
            </a>
    <!-- END topic -->
    Par:

    Code:

                    <div class="forum-lastpost">{topics_list_box.row.L_LATEST_POST_FROM_THE}<div class="lastpost-arrow"></div></div>
                </div>
            </a>
            <a href="{topics_list_box.row.LAST_POST_IMG}" class="last-post-link">Last post</a>
            </div>
    <!-- END topic -->

    Pour le template viewtopic_body


    Remplacer:

    Code:

    <div class="post-icon"><i class="material-icons">person</i>{postrow.displayed.POSTER_AVATAR}</div><h2>{postrow.displayed.POST_DATE_NEW}</h2>
    Par :

    Code:

    <div class="post-icon"><i class="material-icons">person</i>{postrow.displayed.POSTER_AVATAR}</div>
                                <div class="post-info">
                                    <h2>{postrow.displayed.POST_DATE_NEW}</h2>


    Remplacer:

    Code:

    <div class="post-content">
    Par :

    Code:

    </div>
                <div class="post-content">


    Après:

    Code:

    {postrow.displayed.EDITED_MESSAGE}
    Ajouter:

    Code:

                <ul class="post-buttons">
                    <li>{postrow.displayed.EDIT_IMG}</li>
                    <li>{postrow.displayed.DELETE_IMG}</li>
                </ul>


Dernière édition par The Godfather le Mer 21 Sep 2016 - 18:08, édité 3 fois



The Godfather
Adminactif
Adminactif

Masculin
Messages : 13834
Inscrit(e) le : 02/05/2004

http://forum.forumactif.com/
The Godfather a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Thème mobile : Nouvelles fonctionnalités pour une meilleure expérience utilisateur

Message par kawarz le Mer 21 Sep 2016 - 17:40

Cette mise à jour du bonheur \o/

J'aime beaucoup que le système de notification ait été rajouté, c’est un bon plus que je n'ai pas vu venir Very Happy

Par contre, je n'ai pas trouvé de template nommé css_rtl , le template nommé css et le tempalte confirm_body
http://image.noelshack.com/fichiers/2016/38/1474472170-cpture.png

Mis à part ça, aucun bug à signaler ni suggestion, le tout étant déjà au poil o/

En revanche j'ai bien une question: étant donné que vous vous épandez beaucoup dans le domaine mobile ces derniers temps, peut-on imaginer bientôt des applications mobiles? o/



kawarz
****

Masculin
Messages : 229
Inscrit(e) le : 09/08/2011

http://testpourunforum.forumactif.org
kawarz a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Thème mobile : Nouvelles fonctionnalités pour une meilleure expérience utilisateur

Message par The Godfather le Mer 21 Sep 2016 - 18:15

Bonsoir @kawarz et merci pour votre feedback. En effet, les templates cités ne sont pas concernés car communs par défaut à tous les forums. Petite erreur actuellement corrigé. Merci thumleft

Dès lors, merci de vous rapporter aux nouvelles infos dans ce message pour les modifs à faire.

Pour votre dernière question, restez fidèle à Forumactif et vous verrez bien… Mr. Green



The Godfather
Adminactif
Adminactif

Masculin
Messages : 13834
Inscrit(e) le : 02/05/2004

http://forum.forumactif.com/
The Godfather a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Thème mobile : Nouvelles fonctionnalités pour une meilleure expérience utilisateur

Message par Zoch le Mer 21 Sep 2016 - 18:58

Bonjour,

Cette nouvelle est génial !!!
Merci The Godfather de l'avoir annoncé Smile

J'ai eu un aperçu avec quelques bugs quand vous étiez entrain de l'installer Wink

Zoch
****

Masculin
Messages : 246
Inscrit(e) le : 17/09/2014

Zoch a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Thème mobile : Nouvelles fonctionnalités pour une meilleure expérience utilisateur

Message par rmn73 le Mer 21 Sep 2016 - 19:40

Bonsoir The Godfather,

Jusqu'à maintenant je n'utilisais pas la version mobile sur mes iPhone et iPad, préférant de loin la version web.
Donc je n'ai pas personnalisé les templates mobile, et je n'ai pas à effectuer les modifs indiquées ci dessus.
Mais je vais me pencher sur cette dernière version mobile, car depuis la mise à jour en iOS 10, la version web sur iPhone et iPad a perdu la barre d'outils dans la fenêtre de réponse (rapide ou non) et aussi l'usage des smileys. De plus cette fenêtre de réponse est d'une hauteur mini (2 lignes). Vos équipes sont au courant et j'espère qu'elles apporteront rapidement une solution comme à chaque fois afin que je puisse continuer à utiliser la version web sur mon iPad en iOS 10.

En attendant je vais étudier cette nouvelle version mobile et pourquoi pas essayer de la personnaliser.

Merci pour les évolutions que vous apportez régulièrement pour notre plus grand plaisir.

rmn73
**

Masculin
Messages : 80
Inscrit(e) le : 19/08/2013

http://www.forum-abcc.fr
rmn73 a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Thème mobile : Nouvelles fonctionnalités pour une meilleure expérience utilisateur

Message par JRP le Jeu 22 Sep 2016 - 9:31

Bonjour Godfather,

Je confirme le problème évoqué par rmn73, j'en ai parlé ICI...
La version web reste très pratique malgré tout sur iphone ou tablette, j'espère que ce souci trouvera une solution rapidement sans trop vous compliquer la vie.

En attendant, j'aimerais bien tester cette version mobile, mais pour l'activer j'ai juste un petit souci :
Je suis administrateur mais seul le fondateur peut accéder à ce menu dans le panneau d'administration.

https://i86.servimg.com/u/f86/19/47/53/84/m10.png

Mon fondateur est un peu aux abonnés absents. Serait-il possible d'élargir cet accès aux administrateurs ?

Encore merci à vous et vos équipes pour tout ce que vous faites pour nos forums.

JRP
Nouveau membre

Messages : 13
Inscrit(e) le : 31/05/2015

http://detente-photo.forumactif.com
JRP a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Thème mobile : Nouvelles fonctionnalités pour une meilleure expérience utilisateur

Message par Neptunia le Jeu 22 Sep 2016 - 9:58

Bonjour JRP


Il n'y a rien à faire pour activer la version mobile, celle-ci est présente et ne peut pas être désactivée. Et c'est la version moderne qui est choisie par défaut.
Votre capture écran montre l'accès aux templates, qui eux, ont toujours été réservés au fondateur.

Neptunia
+ Hyperactif +

Féminin
Messages : 10991
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Thème mobile : Nouvelles fonctionnalités pour une meilleure expérience utilisateur

Message par The Godfather le Jeu 22 Sep 2016 - 10:15

Bonjour @JRP,

Sachez que ce que vous évoquez pour la barre de l’éditeur n’as aucun rapport avec cette mise à jour et n'est donc pas à traiter dans ce topic Wink

Pour ce qui est de l’accès aux templates, c’est réservé au seul fondateur du forum. Nous ne pouvons intervenir à sa place. S’il a abandonné le forum, vous pouvez tout à fait faire un sondage auprès de votre communauté pour le remplacé. S’ils sont d’accord, contactez-nous. Pour plus d’info, lire ce topic ::fleur::




The Godfather
Adminactif
Adminactif

Masculin
Messages : 13834
Inscrit(e) le : 02/05/2004

http://forum.forumactif.com/
The Godfather a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Thème mobile : Nouvelles fonctionnalités pour une meilleure expérience utilisateur

Message par JRP le Jeu 22 Sep 2016 - 12:25

Merci beaucoup pour vos réponses. Je ne suis pas un expert du panneau d'administration Neutral

La version mobile de mon forum n'est pas très esthétique. Je pensais être sur la version classique mais si je comprends bien vos réponses, c'est la version moderne qui est active. Cela doit donc provenir d'une personnalisation ancienne avec des scripts qui mériteraient d'être corrigés en suivant vos indications ci-dessus.
Cela sort un peu de mes compétences. Ce n'est pas grave...

Pour le bug sur la barre de l'éditeur lié à IOS 10, c'était juste pour confirmer la remarque de rmn73. Cela n'a aucun lien avec ce sujet c'est vrai, mais comme ma version mobile ne marche pas bien, j'apprécie la version WEB lorsque je suis itinérant... Embarassed
Je ne doute pas qu'une prochaine mise à jour règlera ce problème d'IOS 10, quelle idée de l'avoir mis à jour... Rolling Eyes
Et tout cela en attendant une super appli mobile qui règlera tout Wink

Encore merci pour vos efforts et vos réponses toujours rapides.

JRP
Nouveau membre

Messages : 13
Inscrit(e) le : 31/05/2015

http://detente-photo.forumactif.com
JRP a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Thème mobile : Nouvelles fonctionnalités pour une meilleure expérience utilisateur

Message par The Godfather le Jeu 22 Sep 2016 - 12:32

@JRP a écrit:...La version mobile de mon forum n'est pas très esthétique. Je pensais être sur la version classique mais si je comprends bien vos réponses, c'est la version moderne qui est active. Cela doit donc provenir d'une personnalisation ancienne avec des scripts qui mériteraient d'être corrigés en suivant vos indications ci-dessus.

Au fait, le problème vient du fait que vous avez désactivé le CSS de base du forum dans votre PA >> Affichage >> Images et Couleurs >> Couleurs >> Feuille de style CSS >> Désactiver le CSS de base >> NON

En passant cette option sur NON, vous autorisez le chargement du CSS de Forumactif ce qui corrige votre problème Wink



The Godfather
Adminactif
Adminactif

Masculin
Messages : 13834
Inscrit(e) le : 02/05/2004

http://forum.forumactif.com/
The Godfather a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Thème mobile : Nouvelles fonctionnalités pour une meilleure expérience utilisateur

Message par JRP le Jeu 22 Sep 2016 - 17:31

Effectivement ! Merci pour l'astuce, c'est de fait plus esthétique... Thanks

JRP
Nouveau membre

Messages : 13
Inscrit(e) le : 31/05/2015

http://detente-photo.forumactif.com
JRP a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Thème mobile : Nouvelles fonctionnalités pour une meilleure expérience utilisateur

Message par FkS_DjMat le Ven 23 Sep 2016 - 21:03

Très beau travail de la part de l'effectif de ForumActif Wink Wink Wink

FkS_DjMat
**

Messages : 80
Inscrit(e) le : 05/09/2015

http://www.craftmacube.com
FkS_DjMat a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Thème mobile : Nouvelles fonctionnalités pour une meilleure expérience utilisateur

Message par demeter1 le Sam 24 Sep 2016 - 10:48

Superbe; merci pour ce travail.

Les tutoriels fonctionnant sur l'ancienne version vont-ils subir une mise à jour et, est-il possible d'avoir un tuto sur l'approche css de ces nouveaux templates ?

demeter1
+ Hyperactif +

Masculin
Messages : 8231
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Thème mobile : Nouvelles fonctionnalités pour une meilleure expérience utilisateur

Message par Tech le Sam 24 Sep 2016 - 11:00

Bonjour demeter,

Si vous nous fournissez les tutoriels en question, nous regarderons pour les mettre à jour dès que possible.

Cordialement.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 21125
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.
  • 0

Astuce Re: Thème mobile : Nouvelles fonctionnalités pour une meilleure expérience utilisateur

Message par demeter1 le Sam 24 Sep 2016 - 12:25


demeter1
+ Hyperactif +

Masculin
Messages : 8231
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum