Journal LinuxFr sur Desktop et tablette

Posté par  . Licence CC By‑SA.
Étiquettes :
15
1
sept.
2013

Bonjour nal,

Si je sors ma plume électronique aujourd'hui, c'est pour te parler de plusieurs problèmes concernant le site qui me chagrinent depuis un moment.

Premier problème

Je lis LinuxFr plusieurs fois par jour, et ce sur deux types d'appareil: ordinateur portable et tablette, tous les deux avec une définition de 1280*800.

Sur mon portable, j'utilise tout le temps les raccourcis "k" et "j" pour naviguer au commentaire non visite précédent/suivant. Cependant, sur ma tablette, impossible de les utiliser. J'en suis donc réduit à utiliser les liens "<" et ">" de la barre d'outil. Ça me conviendrais si ceux-ci n'étaient pas minuscule!

J'ai donc écrit une CSS basé sur kaiska, nommé tout simplement kaiska-tablet. Voilà à quoi elle ressemble pour l'instant:
toolbar linuxfr
Elle n'est pas parfaite, surtout sur mon portable, mais elle est bien plus facile à utiliser sur ma tablette.

Problème suivant

La lecture en mode verticale est un vrai calvaire sur tablette, principalement à cause de la place "perdu" du menu sur la gauche. Ce menu m'est bien pratique sur mon portable, mais complètement inutile sur ma tablette. Du coup je me demande s'il était possible d'avoir une CSS différente pour mes deux appareil:

  • portable: CSS kaiska original, car je veux voir le menu
  • tablette: kaiska-tablet + le menu caché

J'ai entendu parlé de @media en CSS, où il est possible d'écrire:

only screen and (min-width: 1280px)

Seulement, mes deux appareils ont exactement la même définition, ça risque d'être difficile de les différencier de cette manière :S

Autre possibilité, écrire une application android pour LinuxFr. J'ai déjà joué avec le SDK, et j'ai deux semaines de vacances qui arrivent, mais ça me parait quand même un peu juste. Je veux bien tout de même tenter, y aurait-il des personnes intéressées?

Dernier problème

Il m'arrive parfois d'ouvrir un journal au boulot, et finalement ne pas le lire par manque de temps. Du coup, quand je rentre chez moi, et que je le re-consulte, tous les commentaires apparaissent comme déjà lu :(

J'ai écrit un script greasemonkey qui ajoute un champ date et un bouton dans la barre d'outil. Cliquer sur le bouton permet de mettre tous les commentaires écrit après cette date comme "nouveau". La seule différence que j'ai trouvé entre un commentaire "nouveau" et "ancien" est la propriété "new-comment" dans l'attribut "class" du commentaire. Mais la barre d'outil semble ignorer ça complètement :(

Un truc cool serait par exemple d'avoir dans la barre d'outil une combo-box contenant les dates des 5 dernières fois auxquels on a ouvert le journal. Sélectionner une de ces dates permettrai d'avoir le journal tel qu'il était lorsqu'on l'a ouvert cette même date.

Conclusion

Pour finir, vous l'aurez compris, j'ai beaucoup de problèmes, et peu de solutions. Si jamais des personnes ont des idées, je suis preneur :)

P.S. Désolé pour les fautes, j'en met partout et mon qwerty ne m'aide pas.
P.S. Désolé encore une fois, je n'ai pas regardé dans la page de suivi si ces fonctionnalités étaient déjà mentionnées.

  • # Tu veux du Responsive Web Design

    Posté par  (site web personnel) . Évalué à 4.

    C'est un truc dont j'entends parler de plus en plus :
    https://fr.wikipedia.org/wiki/Responsive_Web_Design

    De plus je pense qu'il ne faut pas se baser sur la résolution de l'écran car, par exemple, mon téléphone a un écran de 5 pouces avec une résolution de 1920 x 1080. Je pense qu'il doit y avoir d'autres paramètres permettant d'adapter un site à différents périphériques.

    S'il y a un problème, il y a une solution; s'il n'y a pas de solution, c'est qu'il n'y a pas de problème.

    • [^] # Re: Tu veux du Responsive Web Design

      Posté par  (site web personnel) . Évalué à 3.

      Je me réponds à moi même, je n'ai pas le menu sur le coté sur mon tel, donc "chez moi ça marche"

      S'il y a un problème, il y a une solution; s'il n'y a pas de solution, c'est qu'il n'y a pas de problème.

      • [^] # Re: Tu veux du Responsive Web Design

        Posté par  . Évalué à 2.

        Merci pour le lien. Peux tu préciser quelle css et quel navigateur tu utilises?

        • [^] # Re: Tu veux du Responsive Web Design

          Posté par  (site web personnel) . Évalué à 3.

          Tu peux effectivement surcharger tes CSS avec ces propriétés. Pour ma part, je l'utilise ainsi dans une feuille de style :

          /*
          CSS "normal" ici
          /
          /
          mobile /
          @media screen and (max-width: 767px) {
          /
          surcharges ici /
          }
          /
          tablet & small laptop /
          @media screen and (min-width: 768px) and (max-width: 1023px) {
          }
          /
          desktop */
          @media screen and (min-width: 1024px) {
          }

          Ça marche bien pour tout le monde.

          Et ne pas oublier la balise dans l'en-tête "head" :

          meta name="viewport" content="width=device-width, initial-scale=1.0"

          qui va prendre en compte la taille réelle de l'écran. initial-scale va dire de zoomer à la taille normale par défaut.
          Le maximum scale est à bannir, il empêche le zoom.

          10 petits conseils http://www.splio.fr/10-petits-conseils-en-responsive-design . Bon courage :)

          Celui qui a échappé à la foudre en parle volontiers

          • [^] # Re: Tu veux du Responsive Web Design

            Posté par  (site web personnel) . Évalué à 10.

            Il pourrait appliquer certaines bonnes pratiques :

            • éviter les pages de 5 Mo,
            • écrire tout le corps de l'article en texte et non dans une image (en jpeg qui plus est)
            • conserver une page légère (24 fichiers JS, 5 fichiers de police, 14 fichiers css, ça commence à faire beaucoup)
        • [^] # Re: Tu veux du Responsive Web Design

          Posté par  (site web personnel) . Évalué à 2.

          J'utilise la css par défaut et le navigateur par défaut sous android 4.2.2 soit chrome.

          J'ai testé sans me loguer sous mon compte.

          S'il y a un problème, il y a une solution; s'il n'y a pas de solution, c'est qu'il n'y a pas de problème.

    • [^] # Re: Tu veux du Responsive Web Design

      Posté par  . Évalué à 3.

      Salut,

      En fait, il vaut mieux éviter de se baser sur la largeur de l'écran en pixels pour les media queries: au plus ça vas, au plus les appareils ont des densités d'affichages différentes.

      Le mieux et de laisser la taille de police par défaut du navigateur, et de se baser sur le nombre de caractères que peut afficher l'écran avec celle-ci.

      Envoyé depuis ma Debian avec Firefox

    • [^] # Re: Tu veux du Responsive Web Design

      Posté par  . Évalué à 4.

      C'est un truc dont j'entends parler de plus en plus :
      https://fr.wikipedia.org/wiki/Responsive_Web_Design

      la css par défaut du site de linuxfr est déjà en responsive, et ça fonctionne bien chez moi, que cela soit sur tablette, sur téléphone ou sur ordinateur de bureau.

      « I approve of any development that makes it more difficult for governments and criminals to monopolize the use of force. » Eric Raymond

      • [^] # Re: Tu veux du Responsive Web Design

        Posté par  . Évalué à 2.

        Le responsive design ce n'est pas un mot clef gagnant. C'est comme si je te disais que telle appli utilise telle paradigme donc elle est bien.

        Personnellement je trouve aussi que la CSS par défaut n'est pas adaptée à mon mobile. Il est certainement possible de l'améliorer en continuant d'utiliser le RWD.

        Tous les contenus que j'écris ici sont sous licence CC0 (j'abandonne autant que possible mes droits d'auteur sur mes écrits)

        • [^] # Re: Tu veux du Responsive Web Design

          Posté par  . Évalué à 2.

          Personnellement je trouve aussi que la CSS par défaut n'est pas adaptée à mon mobile.

          Faudrait envoyer une copie d'écran parce que là je ne vois pas comment ça pourrait être mieux.

          « I approve of any development that makes it more difficult for governments and criminals to monopolize the use of force. » Eric Raymond

    • [^] # Re: Tu veux du Responsive Web Design

      Posté par  (site web personnel) . Évalué à 1.

      D'autres personnes y ont pensé avant toi. Les pixels que l'on utilise dans les feuilles CSS ne correspondent pas toujours aux vrais pixels, de façon à ne pas causer des problèmes avec les écrans à haut PPP (DPI).

      http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

  • # media type et config de la tablette

    Posté par  . Évalué à 5.

    http://www.w3.org/TR/CSS2/media.html

    screen c'est pour un navigateur en mode "desktop"
    handheld c'est pour un navigateur en mode "mobile"

    en precisant à ta tablette d'afficher le site en mode "mobile", tu dois pouvoir utiliser la meme css dans les reglages du site
    avec une variante selon le media desktop ou mobile

    • [^] # Re: media type et config de la tablette

      Posté par  . Évalué à 2.

      Merci beaucoup! Je devrais pouvoir m'en sortir avec ça.
      Par contre, ça n'est pas terres intuitif "screen" et "handheld".
      Il ne reste plus qu'a régler le problème de page déjà visité.

      • [^] # Re: media type et config de la tablette

        Posté par  . Évalué à 4.

        screen = ecran
        handheld = tenu à la main

        on ne peut pas faire beaucoup plus intuitif,
        sauf à convertir handheld en mobile

        • [^] # Re: media type et config de la tablette

          Posté par  . Évalué à 1.

          Ce qui n'est pas clair pour moi c'est le mot screen qui veut dire écran, sous entendu d'ordinateur car au final tous les appareils de type handheld ont eu aussi un écran.
          Handheld n'est pas un terme très utilise. C'est la première fois que j'en entend parler vivant pourtant en Angleterre. Une recherche sur google image confirmera mes dires, elle ne contient que des appareils que je n'ai jamais vu. Mais bon, je chipote peut être un peu la :)

          • [^] # Re: media type et config de la tablette

            Posté par  . Évalué à 9.

            Handheld n'est pas un terme très utilise. C'est la première fois que j'en entend parler vivant pourtant en Angleterre. Une recherche sur google image confirmera mes dires, elle ne contient que des appareils que je n'ai jamais vu. Mais bon, je chipote peut être un peu la :)

            parce que tu es peut-etre trop jeune ;)

            tu n'as pas connu tous ces assistants personnels (PNA, PDA) qui pouvaient existaient bien avant qu'on nous fasse des smartphones ou des tablettes.

            ce sont eux qui etaient rangés dans la categorie handheld à l'epoque, et ils avaient des ecrans de petites resolutions (320x240) il fallait donc bien jouer de la CSS pour faire rentrer un contenu dedans.

            depuis les smartphones sont arrivés, ont des resolutions equivalentes ou superieures à certains de nos ecrans d'ordinateurs.

            mais creer un mediatype "mobile" n'apporterait probablement pas grand chose par rapport à "handheld" puisque, comme tu le fais remarquer, on n'en voit presque plus.

          • [^] # Re: media type et config de la tablette

            Posté par  . Évalué à 3.

            Pour compléter la réponse de NeoX, il n'y a pas que les smartphones qui tiennent dans ta main. Tu as trouvé toi-même de nombreux appareils que tu ne connaissais pas qui tiennent dans la main.

            Le coût des proc est devenu tellement bas que les vieux appareils handheld basiques (essentiellement des appareils de mesure, etc.) vont progressivement être remplacés par de véritables petits "smartphones" amputés de la partie communication.

            Ils seront donc concernés par les systèmes d'exploitation et les problématiques d'affichage, auront des écrans et interfaces similaires aux smartphones d'entrée de gamme, et le terme générique approprié pour les désigner devrait être, en Anglais… handheld!

  • # Clavier sur tablette

    Posté par  (site web personnel) . Évalué à 1.

    Ta feuille de style est très intéressante, car en effet je galère aussi à viser les boutons de la barre d'outil avec ma tablette.

    Heureusement j'ai souvent un clavier relié à la tablette, ce qui permet d'aller plus vite :-)

  • # Oublier

    Posté par  (site web personnel) . Évalué à 6.

    Il m'arrive parfois d'ouvrir un journal au boulot, et finalement ne pas le lire par manque de temps. Du coup, quand je rentre chez moi, et que je le re-consulte, tous les commentaires apparaissent comme déjà lu

    Au pied du journal, à droite du lien "Lire la suite", tu as un bouton oublier. Clique dessus, et c'est comme si tu n'étais jamais venu sur ledit journal.

    Note : ce sont alors TOUS les commentaires du journal qui apparaîtront nouveaux.

    • [^] # Re: Oublier

      Posté par  . Évalué à 3.

      Que les commentaires apparaissent tous comme déjà lus ou comme non lus, finalement ça ne fait aucune différence, donc tu ne réponds pas du tout à sa question :-)

      Article Quarante-Deux : Toute personne dépassant un kilomètre de haut doit quitter le Tribunal. -- Le Roi de Cœur

      • [^] # Re: Oublier

        Posté par  . Évalué à 3.

        donc tu ne réponds pas du tout à sa question

        oui mais c'est pas grave, comme son firefox est resté ouvert sur linuxfr, il va manquer ce commentaire de toute façon :)

        « I approve of any development that makes it more difficult for governments and criminals to monopolize the use of force. » Eric Raymond

  • # Re: Journal— LinuxFrsur Desktop et tablette

    Posté par  (site web personnel) . Évalué à 2.

    Tu peux utiliser monboob http://weboob.org/applications/monboob, ce qui te permettra d'avoir la meme interface pour consulter dlfp au travers de ton client mail.
    ça te permettra d'avoir la meme interface pour differents sites d'actualités, de gerer/tagguer les messages, de pouvoir laisser des messages en brouillon et de gerer au message près, ton probleme de lu/non lu.

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.