Recherche avancée

Médias (1)

Mot : - Tags -/book

Autres articles (15)

  • Publier sur MédiaSpip

    13 juin 2013

    Puis-je poster des contenus à partir d’une tablette Ipad ?
    Oui, si votre Médiaspip installé est à la version 0.2 ou supérieure. Contacter au besoin l’administrateur de votre MédiaSpip pour le savoir

  • Organiser par catégorie

    17 mai 2013, par

    Dans MédiaSPIP, une rubrique a 2 noms : catégorie et rubrique.
    Les différents documents stockés dans MédiaSPIP peuvent être rangés dans différentes catégories. On peut créer une catégorie en cliquant sur "publier une catégorie" dans le menu publier en haut à droite ( après authentification ). Une catégorie peut être rangée dans une autre catégorie aussi ce qui fait qu’on peut construire une arborescence de catégories.
    Lors de la publication prochaine d’un document, la nouvelle catégorie créée sera proposée (...)

  • Les thèmes de MediaSpip

    4 juin 2013

    3 thèmes sont proposés à l’origine par MédiaSPIP. L’utilisateur MédiaSPIP peut rajouter des thèmes selon ses besoins.
    Thèmes MediaSPIP
    3 thèmes ont été développés au départ pour MediaSPIP : * SPIPeo : thème par défaut de MédiaSPIP. Il met en avant la présentation du site et les documents média les plus récents ( le type de tri peut être modifié - titre, popularité, date) . * Arscenic : il s’agit du thème utilisé sur le site officiel du projet, constitué notamment d’un bandeau rouge en début de page. La structure (...)

Sur d’autres sites (4357)

  • Anomalie #3227 (Nouveau) : Bug date de publication

    11 juin 2014, par Eric Camus

    SPIP 3.0.16 standard de base (pas de plugins ajouté).

    Si on change à la main (dans le champ) la date de publication en en donnant une erroné ex : 11/06/0014 (erreur sur le 2 de 2014).
    La date une fois validé affiche l’année 14 au lieu de 2014 mais c’est presque normal, la date affiché sur la page "accueil" est 1-1-1970 !! et l’article est toujours en première position.

    Par contre le paramètre "derniere_modif" et uniquement lui dans la base "spip_meta" change à chaque hit sur le site public. Il me semble que cela dé-valide le cache de façon permanente non ?

  • dsputil : Split audio operations off into a separate context

    16 janvier 2014, par Diego Biurrun
    dsputil : Split audio operations off into a separate context
    • [DBH] configure
    • [DBH] libavcodec/Makefile
    • [DBH] libavcodec/ac3enc.c
    • [DBH] libavcodec/ac3enc.h
    • [DBH] libavcodec/ac3enc_fixed.c
    • [DBH] libavcodec/ac3enc_float.c
    • [DBH] libavcodec/ac3enc_template.c
    • [DBH] libavcodec/acelp_pitch_delay.c
    • [DBH] libavcodec/acelp_pitch_delay.h
    • [DBH] libavcodec/arm/Makefile
    • [DBH] libavcodec/arm/audiodsp_arm.h
    • [DBH] libavcodec/arm/audiodsp_init_arm.c
    • [DBH] libavcodec/arm/audiodsp_init_neon.c
    • [DBH] libavcodec/arm/audiodsp_neon.S
    • [DBH] libavcodec/arm/dsputil_init_neon.c
    • [DBH] libavcodec/arm/dsputil_neon.S
    • [DBH] libavcodec/audiodsp.c
    • [DBH] libavcodec/audiodsp.h
    • [DBH] libavcodec/cook.c
    • [DBH] libavcodec/dsputil.c
    • [DBH] libavcodec/dsputil.h
    • [DBH] libavcodec/ppc/Makefile
    • [DBH] libavcodec/ppc/audiodsp.c
    • [DBH] libavcodec/ppc/dsputil_altivec.h
    • [DBH] libavcodec/ppc/dsputil_ppc.c
    • [DBH] libavcodec/takdec.c
    • [DBH] libavcodec/x86/Makefile
    • [DBH] libavcodec/x86/audiodsp.asm
    • [DBH] libavcodec/x86/audiodsp.h
    • [DBH] libavcodec/x86/audiodsp_init.c
    • [DBH] libavcodec/x86/audiodsp_mmx.c
    • [DBH] libavcodec/x86/dsputil.asm
    • [DBH] libavcodec/x86/dsputil_init.c
    • [DBH] libavcodec/x86/dsputil_mmx.c
    • [DBH] libavcodec/x86/dsputil_x86.h

  • Evolution #4391 (Nouveau) : Squelettes de la dist : améliorer le markup et passer à BEM

    13 octobre 2019, par tcharlss (*´_ゝ｀)

    Hello,

    En voulant créer des nouveaux thèmes pour les squelettes de la dist, j’ai rencontré des limitations dûes au markup actuel.

    Par exemple, certains éléments sans classe sont impossibles à cibler, il y a des retours lignes en dur, etc.
    En certains endroits, cela limite pas mal les possibilités.
    J’aimerais lancer un petit refactoring du markup afin qu’il soit plus facile de thémer les squelettes et de maintenir les styles.

    Il s’agirait principalement d’améliorer la nomenclature des classes, en changeant le moins possible le markup afin que les thèmes actuels restent compatibles (ou au prix d’adaptations minimes).
    On ajouterait donc des nouvelles classes, sans supprimer les classes actuelles (dans un 1er temps tout du moins ?).
    Cela pourrait être l’occasion de passer à la méthodologie BEM pour la nomenclature des classes.

    Exemple n°1

    Exemple avec le copyright et les liens dans le footer.
    Actuellement, il n’y a pas de classe autour du copyright, les liens ne sont pas encapsulés dans un conteneur, et les séparateurs « | » n’ont pas de classe n’ont plus.
    Il est donc quasiment impossible de changer l’agencement général, de changer l’apparence des séparateurs, etc.

    <span class="CodeRay"><span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">colophon</span><span class="delimiter">"</span></span><span class="tag">></span>
    
    2009 - 2019 Thèmes SPIP
    
    <span class="tag"><br /></span>
    
    <span class="tag">span> <span class="attribute-name">rel</span>=<span class="string"><span class="delimiter">"</span><span class="content">contents</span><span class="delimiter">"</span></span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">first</span><span class="delimiter">"</span></span><span class="tag">></span>Plan du site<span class="tag"></span>    | <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">ecrire/</span><span class="delimiter">"</span></span><span class="tag">></span>Espace privé<span class="tag"></span> | <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span> <span class="attribute-name">rel</span>=<span class="string"><span class="delimiter">"</span><span class="content">nofollow</span><span class="delimiter">"</span></span><span class="tag">></span>Se déconnecter<span class="tag"></span> | 
    
 <span class="tag">span> <span class="attribute-name">rel</span>=<span class="string"><span class="delimiter">"</span><span class="content">nofollow</span><span class="delimiter">"</span></span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span><span class="tag">></span>Contact<span class="tag"></span> | <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span> <span class="attribute-name">rel</span>=<span class="string"><span class="delimiter">"</span><span class="content">alternate</span><span class="delimiter">"</span></span> <span class="attribute-name">title</span>=<span class="string"><span class="delimiter">"</span><span class="content">Syndiquer tout le site</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">last</span><span class="delimiter">"</span></span><span class="tag">></span>RSS<span class="entity">&amp;nbsp;</span>2.0<span class="tag"></span>
    
<span class="tag"></span>
    
</span></span></span></span></span></span></span>

    Voici ce que ça pourrait donner en refactorisant :

    • Le copyright est encapsulé dans un span
    • Les liens sont considérés comme faisant partie d’un menu, et sont donc encapsulés dans un composant « menu »
    • Les séparateurs sont fait en CSS, pas en dur dans le HTML
    <span class="CodeRay"><span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">colophon</span><span class="delimiter">"</span></span><span class="tag">></span>
    
    <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">colophon__coyright</span><span class="delimiter">"</span></span><span class="tag">></span>2009 - 2019 Thèmes SPIP<span class="tag"></span></span>
    
    <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">colophon__menu</span><span class="delimiter">"</span></span><span class="tag">></span>
    
        <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu menu_footer</span><span class="delimiter">"</span></span><span class="tag">></span>
    
            <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu__item menu__item_plan</span><span class="delimiter">"</span></span><span class="tag">></span>
    
                <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu__link first</span><span class="delimiter">"</span></span> <span class="attribute-name">rel</span>=<span class="string"><span class="delimiter">"</span><span class="content">contents</span><span class="delimiter">"</span></span><span class="tag">></span>Plan du site<span class="tag"></span>
    
            <span class="tag"></span>
    
            <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu__item menu__item_backoffice</span><span class="delimiter">"</span></span><span class="tag">></span>
    
                <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span><span class="tag">></span>Espace privé<span class="tag"></span>
    
            <span class="tag"></span>
    
            <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu__item menu__item_logout</span><span class="delimiter">"</span></span><span class="tag">></span>
    
                <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu__link</span><span class="delimiter">"</span></span> <span class="attribute-name">rel</span>=<span class="string"><span class="delimiter">"</span><span class="content">nofollow</span><span class="delimiter">"</span></span><span class="tag">></span>Se déconnecter<span class="tag"></span>
    
            <span class="tag"></span>
    
            <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu__item menu__item_contact</span><span class="delimiter">"</span></span><span class="tag">></span>
    
                <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu__link</span><span class="delimiter">"</span></span> <span class="attribute-name">rel</span>=<span class="string"><span class="delimiter">"</span><span class="content">nofollow</span><span class="delimiter">"</span></span><span class="tag">></span>Contact<span class="tag"></span>
    
            <span class="tag"></span>
    
            <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu__item menu__item_rss</span><span class="delimiter">"</span></span><span class="tag">></span>
    
                <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">menu__link last</span><span class="delimiter">"</span></span> <span class="attribute-name">rel</span>=<span class="string"><span class="delimiter">"</span><span class="content">alternate</span><span class="delimiter">"</span></span> <span class="attribute-name">title</span>=<span class="string"><span class="delimiter">"</span><span class="content">Syndiquer tout le site</span><span class="delimiter">"</span></span><span class="tag">></span>RSS<span class="entity">&amp;nbsp;</span>2.0<span class="tag"></span>
    
            <span class="tag"></span>
    
        <span class="tag"></span>
    
    <span class="tag"></span>
    
<span class="tag"></span>
    
</span></span></span></span></span></span></span></span></span></span></span></span></span></span>

    Avec ça, on peut faire beaucoup plus de choses : afficher le copyright et le menu côte-à-côte ou l’un sous l’autre, afficher le menu à l’horizontale ou à la verticale, choisir l’apparence des séparateurs, etc.

    Exemple n°2

    Autre exemple avec les résumés d’articles.

    <span class="CodeRay"><span class="tag">span> <span class="attribute-name">dir</span>=<span class="string"><span class="delimiter">"</span><span class="content">ltr</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">hentry clearfix text-left</span><span class="delimiter">"</span></span><span class="tag">></span>  
    
    <span class="tag"><strong></strong></span>
    
        <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span><span class="tag">></span>
    
            <span class="tag">span> <span class="attribute-name">src</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">spip_logo</span><span class="delimiter">"</span></span> <span class="attribute-name">alt</span>=<span class="string"><span class="delimiter">"</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">150</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">185</span><span class="delimiter">"</span></span><span class="tag">></span>
    
            Joie entourée d’angoisses (1)
    
        <span class="tag"></span>
    
    <span class="tag"></span>
    
    <span class="tag"><br /></span><span class="tag"><small></small></span>6 mai 2009, par  Victor Hugo<span class="tag"></span>
    
    <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">introduction entry-content</span><span class="delimiter">"</span></span><span class="tag">></span>
    
        <span class="tag"><p></p></span>
    
            Lorem ipsum<span class="entity">&amp;nbsp;</span>(...)
    
        <span class="tag"></span>
    
    <span class="tag"></span>
    
<span class="tag"></span>
    
</span></span></span></span></span>

    En refactorisant :

    • Le composant de base est nommé « resume », et on voit qu’il s’agit d’une variante « article ».
    • Tous les éléments ont une classe.
    • Le titre est encapsulé dans un <h3></h3> plutôt qu’un <strong></strong>.
    • L’image est sortie du titre, et sa largeur n’est pas limitée à 150px (ça se ferait en CSS).
    <span class="CodeRay"><span class="tag">span> <span class="attribute-name">dir</span>=<span class="string"><span class="delimiter">"</span><span class="content">ltr</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">resume resume_article hentry clearfix text-left</span><span class="delimiter">"</span></span><span class="tag">></span>  
    
    <span class="tag">span> <span class="attribute-name">src</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">resume__logo spip_logo</span><span class="delimiter">"</span></span> <span class="attribute-name">alt</span>=<span class="string"><span class="delimiter">"</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">960</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">480</span><span class="delimiter">"</span></span><span class="tag">></span>
    
    <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">resume__title</span><span class="delimiter">"</span></span><span class="tag">></span>
    
        <span class="tag">span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">...</span><span class="delimiter">"</span></span><span class="tag">></span>
    
            Joie entourée d’angoisses (1)
    
        <span class="tag"></span>
    
    <span class="tag"></span>
    
    <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">resume__publication</span><span class="delimiter">"</span></span><span class="tag">></span>
    
        <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">resume__date</span><span class="delimiter">"</span></span><span class="tag">></span>6 mai 2009<span class="tag"></span></span><span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">sep</span><span class="delimiter">"</span></span><span class="tag">></span>,<span class="tag"></span></span> <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">resume__author</span><span class="delimiter">"</span></span><span class="tag">></span>par Victor Hugo<span class="tag"></span></span>
    
    <span class="tag"></span>
    
    <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">resume__content introduction entry-content</span><span class="delimiter">"</span></span><span class="tag">></span>
    
        <span class="tag"><p></p></span>
    
            Lorem ipsum<span class="entity">&amp;nbsp;</span>(...)
    
        <span class="tag"></span>
    
    <span class="tag"></span>
    
<span class="tag"></span>
    
</span></span></span></span></span></span></span>

    Voilà, ce ne sont que des exemples et non pas des propositions définitives.
    C’est juste pour montrer la direction dans laquelle aller.

    HTML5

    Il est tentant de vouloir en profiter pour passer en HTML5, mais je préfère laisser cet aspect à part (il y a déjà des tickets dessus je pense).

    Français/anglais ?

    Actuellement pour la nomenclature des classes, il y a un mélange de français et d’anglais. Personnellement, ça ne me dérange pas :)
    J’ai arrêté d’essayer de tout franciser à tout prix, je préfère partir sur une base en anglais, avec quelques éléments en français quand il n’y a a pas le choix (par exemple quand on fait référence aux objets spip : breve, rubrique, etc.).

    Cahier des charges

    • Faire en sorte que les thèmes existants restent globalement compatibles (moyennant peu d’adaptations).
    • Passer la nomenclature des classes à BEM.
    • Ajouter des classes sur tous les éléments n’en ayant pas.
    • Retirer les retours ligne en dur : <br />.
    • Travailler dans une branche nommée « bem » du dépôt git : https://git.spip.net/SPIP/dist/
    • Pas de HTML5 pour l’instant.
    • Classes en english avec des exceptions en français

Navigation