Recherche avancée

Médias (0)

Mot : - Tags -/upload

Aucun média correspondant à vos critères n’est disponible sur le site.

Autres articles (71)

  • Amélioration de la version de base

    13 septembre 2013

    Jolie sélection multiple
    Le plugin Chosen permet d’améliorer l’ergonomie des champs de sélection multiple. Voir les deux images suivantes pour comparer.
    Il suffit pour cela d’activer le plugin Chosen (Configuration générale du site > Gestion des plugins), puis de configurer le plugin (Les squelettes > Chosen) en activant l’utilisation de Chosen dans le site public et en spécifiant les éléments de formulaires à améliorer, par exemple select[multiple] pour les listes à sélection multiple (...)

  • Menus personnalisés

    14 novembre 2010, par

    MediaSPIP utilise le plugin Menus pour gérer plusieurs menus configurables pour la navigation.
    Cela permet de laisser aux administrateurs de canaux la possibilité de configurer finement ces menus.
    Menus créés à l’initialisation du site
    Par défaut trois menus sont créés automatiquement à l’initialisation du site : Le menu principal ; Identifiant : barrenav ; Ce menu s’insère en général en haut de la page après le bloc d’entête, son identifiant le rend compatible avec les squelettes basés sur Zpip ; (...)

  • Les autorisations surchargées par les plugins

    27 avril 2010, par

    Mediaspip core
    autoriser_auteur_modifier() afin que les visiteurs soient capables de modifier leurs informations sur la page d’auteurs

Sur d’autres sites (13583)

  • Date and segment comparison feature

    31 octobre 2019, par Matomo Core Team — Analytics Tips, Development

    Get a clearer picture with the date and segment comparison feature

    What can you do with it ? What are the benefits ?

    Make informed decisions faster by easily comparing different segments and dates with each other.

    Compare report data for multiple segments next to each other

    Segment comparison feature

    Directly compare the behaviour of visitors from different segments e.g. customers with accounts vs. customers without accounts. Segment comparisons are a powerful way to compare different audience ; learn which ones perform better ; and in what way their actions differ. 

    Compare report data for two time periods next to each other

    Comparing date ranges

    See how your website performs compared to the previous month/week/year. Including seeing trends over those periods. Say, your business always picks up at the same times within a year, or there’s a sag in business for every user segment over this year and the last except one.

    By being able to compare date ranges you are able to get a quick overview of trends and period to period performance. Has a campaign worked better in September than in October ? Get an instant look by having the side-by-side comparison in Matomo.

    What is it capable of ?

    It lets you ask the question, “What is different ?”

    If you look at reports you’ll only see how people behave overall and if you look at specific segments you’ll see how they behave at face value, however, if you compare data together you’ll be quickly informed on what makes them unique. This data is still there when you don’t use the comparison feature, it’s just buried. Comparing data highlights discrepancies and leads to important questions and answers.

    For example, perhaps some class of users have very low engagement on a specific day compared to the rest of your visitors, and perhaps those users are responsible for an outsized proportion of churn. 

    Who could benefit from it, and why ?

    Everyone can benefit from using it (and probably should use it). It’s yours to experiment with ! You shouldn’t feel restricted to only comparing between the current and last period, or having questions before you start comparing. Follow your instincts and see what pops out when data from different segments is laid out next to each other.

    Where can you find it in Matomo ?

    • Segment comparison is activated by the new icon in the segment selector
    Segment comparison feature
    • Date comparison can be found in the calendar section of Matomo
    Date comparison feature
    • The list of active comparisons is visible at the top of the page for all pages that support comparison
    • Comparisons are visible in every report that supports comparing data, and reports that do not support it will display a message saying so

    How do you use it ?

    • To compare segments, click the icon in the segment selector
    • To compare periods, click the ‘compare’ checkbox in the period selector, then select what period you want to compare it against in the dropdown (previous period, previous year, or a custom range)
    • When comparisons are active, view your reports as normal

    Take it away !

    The comparison feature is a new tool from Matomo 3.12.0 that highlights discrepancies and differences in data that can lead to more clarity and understanding, so we’d encourage everyone to use it. 

    Try it out today in your Matomo and see the power behind this new data comparison mode !

  • Concatenating multiple mp4 files [duplicate]

    18 octobre 2019, par Mr Medusa

    This question already has an answer here :

    I’m currently trying to join multiple mp4 video files into one file, and I found the ffmpeg library and looked at a lot of ways on how I should use it.
    Currently I’m using ffmpeg -f concat -safe 0 -i mylist.txt -c copy output.mp4

    This should work, but for some reason it doesn’t. My terminal is filled with this

    (Can’t give anymore output than this)

    [mp4 @ 000002ce260bc180] Non-monotonous DTS in output stream 0:0; previous: 24541175, current: 5482875; changing to 24541176. This may result in incorrect timestamps in the output file.
    
[mp4 @ 000002ce260bc180] Non-monotonous DTS in output stream 0:0; previous: 24541176, current: 5483397; changing to 24541177. This may result in incorrect timestamps in the output file.
    
[mp4 @ 000002ce260bc180] Non-monotonous DTS in output stream 0:0; previous: 24541177, current: 5483904; changing to 24541178. This may result in incorrect timestamps in the output file.
    
[mp4 @ 000002ce260bc180] Non-monotonous DTS in output stream 0:0; previous: 24541178, current: 5484426; changing to 24541179. This may result in incorrect timestamps in the output file.
    
frame=19167 fps=4682 q=-1.0 Lsize=  249689kB time=00:26:37.73 bitrate=1280.2kbits/s speed= 390x
    
video:243606kB audio:5584kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 0.200045%

    Mylist.txt

    file 'ab.mp4'
    
file 'bb.mp4'
    
file 'cc.mp4'
    
file 'dd.mp4'
    
file 'ee.mp4'
    
file 'ff.mp4'
    
file 'gg.mp4'
    
file 'hh.mp4'
    
file 'jj.mp4'
    
file 'kk.mp4'

    Info about each input :

    ffmpeg version git-2019-10-13-4f4334b Copyright (c) 2000-2019 the FFmpeg developers
    
  built with gcc 9.2.1 (GCC) 20191010
    
  configuration: --enable-gpl --enable-version3 --enable-sdl2 --enable-fontconfig --enable-gnutls --enable-iconv --enable-libass --enable-libdav1d --enable-libbluray --enable-libfreetype --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libopus --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libtheora --enable-libtwolame --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libzimg --enable-lzma --enable-zlib --enable-gmp --enable-libvidstab --enable-libvorbis --enable-libvo-amrwbenc --enable-libmysofa --enable-libspeex --enable-libxvid --enable-libaom --enable-libmfx --enable-ffnvcodec --enable-cuvid --enable-d3d11va --enable-nvenc --enable-nvdec --enable-dxva2 --enable-avisynth --enable-libopenmpt --enable-amf
    
  libavutil      56. 35.100 / 56. 35.100
    
  libavcodec     58. 59.102 / 58. 59.102
    
  libavformat    58. 33.100 / 58. 33.100
    
  libavdevice    58.  9.100 / 58.  9.100
    
  libavfilter     7. 62.100 /  7. 62.100
    
  libswscale      5.  6.100 /  5.  6.100
    
  libswresample   3.  6.100 /  3.  6.100
    
  libpostproc    55.  6.100 / 55.  6.100
    
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'ab.mp4':
    
  Metadata:
    
    major_brand     : isom
    
    minor_version   : 512
    
    compatible_brands: isomiso2avc1mp41
    
    encoder         : Lavf57.83.100
    
  Duration: 00:00:26.59, start: 0.000000, bitrate: 4610 kb/s
    
    Stream #0:0(und): Video: h264 (Main) (avc1 / 0x31637661), yuv420p(tv, unknown/bt470bg/unknown), 1280x720, 4466 kb/s, 60.04 fps, 60 tbr, 15360 tbn, 2k tbc (default)
    
    Metadata:
    
      handler_name    : VideoHandler
    
    Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 128 kb/s (default)
    
    Metadata:
    
      handler_name    : SoundHandler
    
Input #1, mov,mp4,m4a,3gp,3g2,mj2, from 'bb.mp4':
    
  Metadata:
    
    major_brand     : isom
    
    minor_version   : 512
    
    compatible_brands: isomiso2avc1mp41
    
    encoder         : Lavf57.83.100
    
  Duration: 00:00:40.77, start: 0.000000, bitrate: 3384 kb/s
    
    Stream #1:0(und): Video: h264 (Main) (avc1 / 0x31637661), yuv420p, 1920x1080, 3251 kb/s, 29.99 fps, 29.97 tbr, 15360 tbn, 2k tbc (default)
    
    Metadata:
    
      handler_name    : VideoHandler
    
    Stream #1:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 128 kb/s (default)
    
    Metadata:
    
      handler_name    : SoundHandler
    
Input #2, mov,mp4,m4a,3gp,3g2,mj2, from 'cc.mp4':
    
  Metadata:
    
    major_brand     : isom
    
    minor_version   : 512
    
    compatible_brands: isomiso2avc1mp41
    
    encoder         : Lavf57.83.100
    
  Duration: 00:00:06.29, start: 0.000000, bitrate: 8029 kb/s
    
    Stream #2:0(und): Video: h264 (Main) (avc1 / 0x31637661), yuv420p(tv, unknown/bt470bg/unknown), 1600x900, 7896 kb/s, 60.16 fps, 60 tbr, 15360 tbn, 2k tbc (default)
    
    Metadata:
    
      handler_name    : VideoHandler
    
    Stream #2:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 128 kb/s (default)
    
    Metadata:
    
      handler_name    : SoundHandler
    
Input #3, mov,mp4,m4a,3gp,3g2,mj2, from 'dd.mp4':
    
  Metadata:
    
    major_brand     : isom
    
    minor_version   : 512
    
    compatible_brands: isomiso2avc1mp41
    
    encoder         : Lavf57.83.100
    
  Duration: 00:00:50.90, start: 0.000000, bitrate: 7851 kb/s
    
    Stream #3:0(und): Video: h264 (Main) (avc1 / 0x31637661), yuvj420p(pc, unknown/bt709/unknown), 1920x1080, 7708 kb/s, 60.02 fps, 60 tbr, 15360 tbn, 2k tbc (default)
    
    Metadata:
    
      handler_name    : VideoHandler
    
    Stream #3:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 128 kb/s (default)
    
    Metadata:
    
      handler_name    : SoundHandler
    
Input #4, mov,mp4,m4a,3gp,3g2,mj2, from 'ee.mp4':
    
  Metadata:
    
    major_brand     : isom
    
    minor_version   : 512
    
    compatible_brands: isomiso2avc1mp41
    
    encoder         : Lavf57.83.100
    
  Duration: 00:00:27.10, start: 0.000000, bitrate: 6056 kb/s
    
    Stream #4:0(und): Video: h264 (Main) (avc1 / 0x31637661), yuv420p, 1920x1080, 5912 kb/s, 60.03 fps, 60 tbr, 15360 tbn, 2k tbc (default)
    
    Metadata:
    
      handler_name    : VideoHandler
    
    Stream #4:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 128 kb/s (default)
    
    Metadata:
    
      handler_name    : SoundHandler
    
Input #5, mov,mp4,m4a,3gp,3g2,mj2, from 'ff.mp4':
    
  Metadata:
    
    major_brand     : isom
    
    minor_version   : 512
    
    compatible_brands: isomiso2avc1mp41
    
    encoder         : Lavf57.83.100
    
  Duration: 00:00:31.00, start: 0.000000, bitrate: 6290 kb/s
    
    Stream #5:0(und): Video: h264 (Main) (avc1 / 0x31637661), yuv420p, 1920x1080, 6150 kb/s, 60.03 fps, 60 tbr, 15360 tbn, 2k tbc (default)
    
    Metadata:
    
      handler_name    : VideoHandler
    
    Stream #5:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 128 kb/s (default)
    
    Metadata:
    
      handler_name    : SoundHandler
    
Input #6, mov,mp4,m4a,3gp,3g2,mj2, from 'gg.mp4':
    
  Metadata:
    
    major_brand     : isom
    
    minor_version   : 512
    
    compatible_brands: isomiso2avc1mp41
    
    encoder         : Lavf57.83.100
    
  Duration: 00:01:00.00, start: 0.000000, bitrate: 4531 kb/s
    
    Stream #6:0(und): Video: h264 (Main) (avc1 / 0x31637661), yuv420p(tv, unknown/bt470bg/unknown), 1280x720, 4387 kb/s, 60.02 fps, 60 tbr, 15360 tbn, 2k tbc (default)
    
    Metadata:
    
      handler_name    : VideoHandler
    
    Stream #6:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 128 kb/s (default)
    
    Metadata:
    
      handler_name    : SoundHandler
    
Input #7, mov,mp4,m4a,3gp,3g2,mj2, from 'hh.mp4':
    
  Metadata:
    
    major_brand     : isom
    
    minor_version   : 512
    
    compatible_brands: isomiso2avc1mp41
    
    encoder         : Lavf58.20.100
    
  Duration: 00:00:30.00, start: 0.000000, bitrate: 8186 kb/s
    
    Stream #7:0(und): Video: h264 (Constrained Baseline) (avc1 / 0x31637661), yuv420p, 1920x1080, 8046 kb/s, 60 fps, 60 tbr, 90k tbn, 120 tbc (default)
    
    Metadata:
    
      handler_name    : VideoHandler
    
    Stream #7:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 128 kb/s (default)
    
    Metadata:
    
      handler_name    : SoundHandler
    
Input #8, mov,mp4,m4a,3gp,3g2,mj2, from 'jj.mp4':
    
  Metadata:
    
    major_brand     : isom
    
    minor_version   : 512
    
    compatible_brands: isomiso2avc1mp41
    
    encoder         : Lavf57.83.100
    
  Duration: 00:00:49.81, start: 0.000000, bitrate: 5579 kb/s
    
    Stream #8:0(und): Video: h264 (Main) (avc1 / 0x31637661), yuv420p(tv, unknown/bt470bg/unknown), 1600x900, 5437 kb/s, 60.02 fps, 60 tbr, 15360 tbn, 2k tbc (default)
    
    Metadata:
    
      handler_name    : VideoHandler
    
    Stream #8:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 128 kb/s (default)
    
    Metadata:
    
      handler_name    : SoundHandler
    
Input #9, mov,mp4,m4a,3gp,3g2,mj2, from 'kk.mp4':
    
  Metadata:
    
    major_brand     : isom
    
    minor_version   : 512
    
    compatible_brands: isomiso2avc1mp41
    
    encoder         : Lavf57.83.100
    
  Duration: 00:00:34.69, start: 0.000000, bitrate: 5223 kb/s
    
    Stream #9:0(und): Video: h264 (Main) (avc1 / 0x31637661), yuv420p, 1920x1080, 5088 kb/s, 30.03 fps, 30 tbr, 15360 tbn, 2k tbc (default)
    
    Metadata:
    
      handler_name    : VideoHandler
    
    Stream #9:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 128 kb/s (default)
    
    Metadata:
    
      handler_name    : SoundHandler
    
At least one output file must be specified

    I’ve read most of the posts on here about ffmpeg causing this issue for other people, but none of the fixes that are explained have worked for me.
    The video output I get seems fine for the first video, but then once it’s supposed to transition into the other videos it just "freezes" or sets the speed to something like 100x. Output video also ends up being 28 minutes long instead of 2.8 minutes.
    Anyone able to help me ?

  • 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