Hyperspace : squelette responsive

Description

Ce squelette distribué en plugin est un portage pour SPIP du thème responsive "Hyperspace", proposé sur le site http://html5up.net/.
Voir la démo originale : http://html5up.net/hyperspace
Sites utilisant le plugin :

C’est une base de départ pour l’intégration d’un site simple de quelques pages.

Tout se passe principalement sur la page sommaire, le menu liste des articles/rubriques, chaque item du menu permettant de faire défiler la page pour afficher la zone appelée. Chaque zone de la page affiche soit un article seul, soit une liste d’articles.

Cependant le plugin fournit les principaux squelettes habillé avec le thème "Hyperspace" pour que la charte graphique reste un minimum cohérente avec la page d’accueil si on sort de la page d’accueil (article.html, rubrique.html, etc...).

Installation

Copier le dossier dans plugins/ puis activer le plugin dans l’administration de SPIP.
Nécessite le plugin Image Responsive.

Configuration

Remplir le formulaire de configuration :

Formulaire de configuration

(vous pouvez télécharger ce fichier image qui définit les "zones" rubrique principale, rubrique a, rubrique b, rubrique c : jpg/screenshot_doc_hyperspace.jpg)

Le plugin utilise Image Responsive pour la gestion des images dans le texte des articles.
La documentation du plugin indique :

Si vous utilisez les URL « propres » dans SPIP, il faut modifier votre fichier .htaccess pour y ajouter le contenu du fichier ajouter_a_htaccess.txt livré avec le plugin.

Téléchargement

Zip du plugin

Dépôt git : https://git.framasoft.org/L0r3nt/hy...

Portfolio

Discussion

16 discussions

  • 3

    Bonjour,

    Si vous utilisez les URL « propres » dans SPIP, il faut modifier votre fichier .htaccess pour y ajouter le contenu du fichier ajouter_a_htaccess.txt livré avec le plugin.

    dans quel dossier ou sous-dossier du plugin ce trouve ajouter_a_htaccess.txt ?

    je ne le trouve pas.

    Merci d’avance,

    Cordialement,

    Hervé

    • Bonjour, le fichier s’il est utilisé se nomme .htaccess et doit se trouver à la racine du dossier qui accueille les fichiers spip.

    • Bonjour, le fichier s’il est utilisé se nomme .htaccess et doit se trouver à la racine du dossier qui accueille les fichiers spip.

      Merci L0r3nt, mais ce n’était pas ma question.

      je connais déjà le fichier .htaccess qui se trouve à la racine de Spip.

      Celui que je cherche est celui dont il est question dans la notice de ce plugin/thème « hyperspace » et « ajouter_a_htaccess.txt livré avec le plugin ».

    • Ok, alors la question concerne plutôt l’auteur du plugin image_responsive :)
      Le fichier est fournit avec les autres fichiers du plugin (image_responsive) disponible sur la page dédiée : https://plugins.spip.net/image_responsive.html (il faut télécharger le zip)

    Répondre à ce message

  • 4

    Est-il prévu une version compatible spip 3.2 ?

    • Salut,

      le plugin est peut être déjà compatible.

      Dans le paquet.xml,. tu peux remplacer

      compatibilite="[3.0.0;3.1.*]"

      par

      compatibilite="[3.0.0;3.2.*]"

      cela te permettra d’activer le plugin, et ensuite de nous dire s’il marche (je pense que oui). Le cas échéant, lorent pourra faire la modif sur la version distribuée (pas moi car le plugin n’est pas gérée sur l’espace collectif de la communauté)

    • Salut
      désolé pour ma réponse tardive, j’ai un peu déconnecté de l’univers spip depuis quelques mois. En théorie oui le plugin devrait fonctionner sans soucis avec la modification indiquée par Maïeul, je vais essayer de trouver du temps pour faire le contrôle et appliquer la modif...

    • En l’état le plugin n’est pas compatible, il y a un problème au niveau des javascripts, je regarde si c’est facile à corriger ou pas...

    • Je n’ai pas de solution pour faire fonctionner le plugin avec spip 3.2, c’est à priori les versions utilisées de jquery qui sont différentes, et spip ajoute (il me semble) un fichier js qui empêche le bon fonctionnement avec le plugin hyperspace.

    Répondre à ce message

  • 6

    Bonjour,
    Sur un spip 3.1.1
    J’ai installé le plugin dans le dossier plugins et, dans l’espace privé il est indiqué :
    Hyperspace thème responsive 1.0.0 - stable
    version incompatible
     ?!? Euh .. normal ?
    Merci pour vos lumières ;-)

    • Bonjour

      je n’ai testé que sur un spip 3.0.22, pas sur un spip 3.1. Pour rendre l’installation possible il suffit de modifier les bornes dans le fichier paquet.xml. Je ne garanti pas le bon fonctionnement, mais il y a de bonnes chances pour que cela fonctionne sans problème.

    • Merci L0r3nt,

      mais euh .. je ne comprends pas trop ce que signifie « modifier les bornes » ..
      Pouvez-vous m’aiguiller ?
      Merci
      Benoît

    • Bonjour

      dans le fichier paquet.xml, il faut remplacer la ligne :

      compatibilite="[3.0.0;3.0.*]"

      par

      compatibilite="[3.0.0;3.1.*]"
    • Merci beaucoup !
      Ca marche :-)
      Benoît

    • admintopoc

      Bonsoir
      même problème.
      J’ai vérifié le fichier paquet.xml, il est bien à jour.

      Merci de l’aide

    • Quelle est la version de spip ?

    Répondre à ce message

  • jean-François Hl

    Bonjour,
    Merci pour ce plugin , j’aime bien le rendu et le mode « responsive » .
    Par contre pour avoir le menu gauche j’ai du modifier le squelette template_header.html :
    Ligne 50
    il y avait :
    <BOUCLE_menu(ARTICLES){id_article = #CONFIG{hyperspace_article_principal,1}}{doublons}>
    J’ai modifié :
    <BOUCLE_menu(ARTICLES){id_article = #CONFIG{hyperspace_article_intro,1}} {doublons}>

    sans quoi la colonne de gauche était vide !

    JF

    Répondre à ce message

  • 1

    Bonjour, j’ai actuellement mon site (lycee-valin.fr) qui fonctionne sur SPIP 3.0.16 et SAKRA 3.4.6
    Je souhaiterai utiliser Hyperspace - squelette responsive pour mon site.
    La manipulation est-elle réalisable sans perdre tout le contenu ?
    Y-a-t-il quelqu’un qui pourrait me driver dans cette aventure...?

    Merci

    • Salut
      Tout dépend de ce que tu entends par « perdre tout le contenu ».
      Si c’est le contenu éditorial, il n’y a aucune raison de le perdre à moins e supprimer le dossier IMG et la base de données.
      Si ce sont les configurations spécifiques à sarkaspip, là, il est évident qu’elles seront perdues puisque ces deux squelettes n’utilisent pas du tout le m^me système.
      La migration est facile et réversible, tu poses le dossier de ce squelette dans le répertoire plugins à la racine de ton site, tu vas sur la page d’administration des plugins, tu désactive sarka, tu actives celui-ci, tu vides les caches (ou tu le désactives le temps de faire les opérations nécessaires), effectues la configuration à ta guise et c’est fini en moins de trente minutes (en prenant le temps de se faire des cafés). Et si ça ne te plait pas, tu désactive celui-là et tu réactives sarkaspip.
      Comme toujours avec spip, c’est simple et sans surprise.

    Répondre à ce message

  • 5

    Merci pour ce plugin, mais après essais, il n’est pas du tout utilisable avec mes compétences. A la fois sur PC, Iphone ou Ipad, où tout est chamboulé malgré plusieurs tentatives !

    • Bonjour

      sans plus d’information, il va être difficile de vous aider... (un lien peut être ?). Pour rappel, c’est une base de travail qui permet de mettre en place rapidement un site responsive. Selon la structure du contenu il faudra peut être modifier le code. Avez vous un dossier squelettes qui puisse perturber le bon affichage ?

    • Merci pour cette réponse, j’utilise le squelette EVA-Web, que je modifie pas mal, et j’utilise bcp de tableaux dans mes articles...
      Mais je ne veux pas vous faire perdre votre temps, car les modifs à faire sont vraiment nombreuses et aux delà de mes capacités, vu le rendu !
      Bien cordialement...

    • Je ne connais pas Evaweb mais je pense que l’utilisation d’Hyperspace avec d’autres squelettes n’est pas possible. Le plugin fournit ses propres fichiers qui je pense sont écrasés par les squelettes existant.

    • J’ai essayé à partir d’un SPIP 3.1 tout neuf, sans squelette, et en restaurant ma base de données, même résultat.

      Je tape bcp de code html dans mes articles, pour faire des tableaux agréables à la vue, je pense que c’est cela qui perturbe votre code...

    • Sans lien vers une page qui pose problème je ne pourrai pas vérifier si c’est le contenu de vos articles qui pose problème. Pour info il y avait un bug lors le l’activation du plugin, il fallait valider le formulaire de la page de config pour que celle si soit prise en compte. C’est corrigé sur la dernière version du plugin.

    Répondre à ce message

  • 6

    Bravo pour ce portage mais je ne qualifierai pas ce thème de responsive
    Sur PC/tablette ça passe mais sur smartphone, ce n’est pas concluant
    Le travail de L0r3nt n’est pas en cause
    Même la démo originale ne gère pas bien les images / menu
    Malheureusement je n’ai pas mes compétences techniques pour avancer sur la question :-/

    • Salut,

      Bah de mon coté : cela n’a pas l’air mal. Maintenant avec juste « ca gére mal » , je vois pas trop comment voir ce qu’il faut corriger.

    • Je pense que c’est la disparation du menu en colonne gauche qui perturbe Olivier, mais c’est plus une fonctionnalité qu’un bug, le principe étant un affichage de tout le contenu sur une page unique, sur petit écran il suffit de faire défiler la page, le menu n’est pas utile. C’est vrai que ce n’est pas adapté pour des gros sites.

    • Non ce n’est pas la disparition du menu en colonne gauche qui me perturbe ;)
      Je viens à nouveau de tester les trois sites depuis mon iphone 4s
      -  http://html5up.net/hyperspace
      -  http://www.langogne-natation-et-sauvetage.com/
      -  http://leschoraulnes.free.fr/
      Les trois rencontrent des problèmes de redimensionnement de l’image.
      Certaines images débordent à droite ou à gauche.
      D’autres images ne sont pas redimensionnées.
      Il faut scroller pendant des lustres pour arriver en bas de section
      Je vous invite à vérifier depuis ce type de d’appareil à l’occasion

      Cordialement,

    • Merci pour les précisions, je me suis noté de le vérifier

    • J’ai reproduis le bug en mettant une image dans la texte d’un article. La dernière version devrait corriger le bug. Il faut maintenant installer le plugin image responsive.

    Répondre à ce message

  • 1

    Salut,

    Base très sympa, bien sur pas mal d’amélioration possible pour les admins, mais c’est sur github donc parfait.

    Perso, je verrais bien :

    • Sélecteur générique pour les rubriques/artciles
    • Possibilité de sélectionner X articles de base + X rubriques de fond (ou bien gérer le menu avec le plugin menu ?). D’ailleurs pourquoi ne pas avoir : tout directement ( on sélectionne 1 rubrique + 1 article : Tous les articles de la rubrique sont principaux et toutes les rubriques sont sélectionnée. )
    • du less : http://plugins.spip.net/lesscss.html pour gérer les feuilles de style (au moins les couleurs dans un premier temps) (j’ai vu le SASS, mais pas de plugin SASS à mla connaissance pour spip)
    • s’inspirer de zpip ou repartir sur zcore : pourquoi pas. Mais ne peut pas être compatible spipr bien sur.
    • Essayer de voir une compatibilité « theme » qui ne ferait que gérer les couleurs/styles. Pas évident : parceque la base n’est pas multi css (un gros fichier css brut)
    • Encore plein d’autres idées :)

    Sinon, 2 choses :

    • tant que la config n’a pas était validé : rien n’est affiché. J’ai eu du mal à le comprendre . Donc utiliser #CONFIGhyperspace_article_intro,1 par exemple serait plus compréhensible.
    • il faut virer le fichier perso.css : il doit venir du répertoire squelettes ...

    Répondre à ce message

  • 1

    bonsoir,

    merci pour ce joli plugin
    je veux utiliser ce plugin comme ettant squelette (créer un dossier squelettes et copier le contenu de ce plugin de dans) pour éviter la configuration en mode connecté. Est ce ya possibilité d’utiliser des mots clés ? sinon comment pourais-je faire ?

    merci de votre aide

    • Bonsoir, l’utilisation de mot clé n’est pas en place par défaut, il faudra modifier le code directement dans les squelettes pour ça.

    Répondre à ce message

  • 2

    Bonjour à tous.

    Auriez-vous des exemples de ce thème sur des Spip qui tournent ?

    Petite question dans la foulée : Est-ce compatible avec Zpip ?

    Merci à tous.

    • Bonjour
      il y a deux exemples de site en ligne dans la description, les deux sont sur spip.
      Je ne connais pas du tout Zpip, je ne pense pas que ce soit compatible (hyperspace est autonome).
      J’envisage de simplifier son paramétrage avec le plugin menu, c’est dans ma todo list...

    • Merci pour la réponse.

      J’ai effectivement remarqué après coup les deux exemples listés. Désolé pour le bruit...

      Je voulais juste observer un site avec une profondeur conséquente.

      Pour le sujet de Zpip, il reste d’actualité car je pense qu’on est nombreux à s’être intéressé au sujet car il « atomise » les blocs dans les pages et le plugin « composition » nous a habitué à un formalisme saint.

      Le passage html5/css3 via un thème n’est pas trivial dans le monde spip. La solution SpipR me rebute un peu alors que les autres CMS proposent des solutions simples en standard...

      Je présume que cette conversation devrait remonter ailleurs mais c’est vrai que la « modernisation » du design dans spip n’est pas simple ;-)

      Merci et à bientôt.

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom

Dernière modification de cette page le 14 janvier 2017