IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Shell et commandes GNU Discussion :

Transformation de pages html avec tableau en pages responsives


Sujet :

Shell et commandes GNU

  1. #21
    Expert éminent sénior Avatar de disedorgue
    Homme Profil pro
    Ingénieur intégration
    Inscrit en
    Décembre 2012
    Messages
    4 280
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur intégration
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Décembre 2012
    Messages : 4 280
    Points : 12 729
    Points
    12 729
    Par défaut
    Un exemple basé sur le premier exemple de ton premier post, mais ne fonctionne pas sur les exemples du fichier que tu as fourni:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $ echo '<tr> 
            <td> 
            <img src="fichier_image.jpg" alt="" width="299" height="319"> 
            </td>
            <td>
            <p>Texte</p>
            </td>
            <td>
            <p>Texte</p>
            </td>
            <td>
            <p>Texte</p>
            </td>
     </tr>' | tr -d '\n' | sed 's/<td>/\n&/;s/<\/td>/\n&\n/g' | sed 's/<tr>/<div class="row">/;t;/<td>.*img src/s/<td>/<div class="col-$largeur_image">/;t;/<p>/s/<td>/<div class="col-$largeur_texte">/;t;s/<\/t[dr]>/<\/div>/'
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="row">         
    <div class="col-$largeur_image">         <img src="fichier_image.jpg" alt="" width="299" height="319">         
    </div>
            <div class="col-$largeur_texte">        <p>Texte</p>        
    </div>
            <div class="col-$largeur_texte">        <p>Texte</p>        
    </div>
            <div class="col-$largeur_texte">        <p>Texte</p>        
    </div>
     </div>
    Cordialement.

  2. #22
    Expert confirmé Avatar de papajoker
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2013
    Messages
    2 103
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nièvre (Bourgogne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2013
    Messages : 2 103
    Points : 4 449
    Points
    4 449
    Par défaut
    J'avais bien compris ton calcul initial ... MAIS ici on est très loin du responsive !
    Le responsive c'est pour un certain (ancien) "TD" s'afficher sur toute la largeur (petit écran) et parfois s'afficher sur 2 ou 1 seule colonne (grand écran), on a plus un truc du genre:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div class="col-12 col-sm-6 col-md-8">
    et puisque tu dis avoir plusieurs tableaux dans le même page, un "col-***-auto" serait même bien vu

    tout le temps 860px
    Donc ce n'est pas du responsive et tout ce travail pour en fait pas grand-chose : juste un changement de css

    D'un fichier à l'autre, il y a des différences sur
    j'en suis conscient, ce que je proposais, c'était plusieurs modèles (5..12 ?), a ton script de repérer la structure de la page (par nom du fichier, répertoire ou grep dans le fichier ...), à partir de là, ton script principal peut rediriger vers un script plus particulier (inject dans modele particulier et/ou parseur particulier et/ou règles "sed" particulières)
    Ta logique doit être en béton armé ! car si elle bloque sur 5% des pages, il va falloir en plus des mois de travail manuel pour corriger les erreurs introduites par ton convertisseur

    vous avez des exemples d'outils ?
    Le plus simple, tu pourrais déjà écrire des scripts bash pour tester la validité de tes règles (validité de l'html) sur tous tes fichiers: pasDetableauDansTableau.sh ... toujoursunWidthDansImagesDansunTD.sh ... ImageToujoursSeuleDansUnTD.sh ... pasDeROWSPANouCOLSPANdanslesTD.sh ... si 100% des fichiers non valides alors il faut définir d'autres règles. Et ces tests vont te permettre d'écrire tes regex particulières pour le convertisseur final

    je suis surpris que tes 12000 fichiers ne soient pas générés à l'origine par un script ? il serait si facile de faire le changement à partir de là

    ps: des choses qui ont plus leur place dans la catégorie dev web du forum
    $moi= ( !== ) ? : ;

  3. #23
    Membre habitué
    Homme Profil pro
    sans
    Inscrit en
    Juillet 2019
    Messages
    127
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 56
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : Juillet 2019
    Messages : 127
    Points : 126
    Points
    126
    Par défaut
    re,

    je ferais un truc comme ça, tester sur ton exemple (le dernier) , pas encore sur le fichier global:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    #!/bin/bash
     
    fic_source_glob="exemples.txt"
    fic_source="exemple.txt"
     
    function check_td {
     
      if [ "$(grep -cE "<[tT][dD].*>" $fic_source)" != "$(grep -cE "</[tT][dD].*>" $fic_source)" ]; then
        echo "problème td"; exit
      else
        sed "s/<td/<TD/g;s/<Td/<TD/g;s/<tD/<TD/g" "$fic_source" > "$fic_source".tmp
        sed -i "s/<\/td/<\/TD/g;s/<\/Td/<\/TD/g;s/<\/tD/<\/TD/g" "$fic_source".tmp
      fi
      return 0
     
     
    }
    function check_tr {
     
      # echo -n "nb tr: "  ; grep -cE "<[tT][rR].*>" $fic
      # echo -n "nb /tr: " ; grep -cE "</[tT][rR].*>" $fic
      if [ "$(grep -cE "<[tT][rR].*>" $fic_source)" != "$(grep -cE "</[tT][rR].*>" $fic_source)" ]; then
        echo "problème tr"; exit
      else
        sed -i "s/<tr/<TR/g;s/<Tr/<TR/g;s/<tR/<TR/g" "$fic_source".tmp
        sed -i "s/<\/tr/<\/TR/g;s/<\/Tr/<\/TR/g;s/<\/tR/<\/TR/g" "$fic_source".tmp
      fi
      return 0
     
    }
     
    nb_td= ; nb_tr=
     
    if check_td && check_tr; then
      # importance des "" (plutôt que 's///g') pour interpréter correctement les \n ; ce qui oblige à échapper les "" texte
      sed -i -e "s/<img/\\n<img/g" -e "s/ width=\"\([0-9]*\)\"/\\n\1/g" \
        -e "s/ height=\"\([0-9]*\)\"\(.*\)/\\n\1/g" "$fic_source".tmp
      # en deux fois, à voir ...
      sed -i "s/\(.*\)src=\"\([^\"]*\)\(.*\)/src:\2/g" "$fic_source".tmp
      nb_td="$(grep -cE "<TD.*>" $fic_source.tmp)" # si besoin
      nb_tr="$(grep -cE "<TR.*>" $fic_source.tmp)"  # idem
     
    fi
     
    while read line; do
     
      [ ! -z "$line" ] && continue  # parce que je ne vois pas où est l'erreur, il subsiste une ligne apparemment vide
      echo "line: /$line/"; fi
      # ici on récupère les valeurs de src, on réécrit le fichier en remplaçant les td suivi de src par la div qui va bien
      # et transformer toutes les balises en ce qu'on veut
      # capturer toute les td suivis de src, traiter les valeurs, envoyer la séquence réécrite dans un fichier autre (>>)
      # OU bien réécrire chaque séquence (séquence = <TR> contenant img </TR>) si on capte l'intervalle de lignes à réécrire (1-10 par exemple)  
    done < "$fic_source".tmp

  4. #24
    Modérateur
    Avatar de N_BaH
    Profil pro
    Inscrit en
    Février 2008
    Messages
    7 552
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 7 552
    Points : 19 387
    Points
    19 387
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    sed 's/<\/*[tT][dD]/\U&\E/' "$fichier.tmp"
    une seule fois.
    pareil pour tr.
    .
    N'oubliez pas de consulter les cours shell, la FAQ, et les pages man.

  5. #25
    Membre habitué
    Homme Profil pro
    sans
    Inscrit en
    Juillet 2019
    Messages
    127
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 56
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : Juillet 2019
    Messages : 127
    Points : 126
    Points
    126
    Par défaut
    pas testé mais limpide si ça marche.
    EDIT: WHAOU
    tu viens de m'expliquer un truc que j'arrivais pas à m'expliquer, merci

  6. #26
    Membre habitué
    Homme Profil pro
    sans
    Inscrit en
    Juillet 2019
    Messages
    127
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 56
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : Juillet 2019
    Messages : 127
    Points : 126
    Points
    126
    Par défaut
    Désolé, non seulement je n'avais pas lu disdorgue et papajoker me précédant (aveugle ?) mais je me relis et un truc me saute au yeux (non, pas aveugle) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    [ -z "$line" ] && continue  # parce que je ne vois pas où est l'erreur, il subsiste une ligne apparemment vide
      echo "line: /$line/"
    ça marche mieux ainsi, déjà. (j'ai bugué).

    ps: c'est bizarre, lorsqu'on ouvre le fil, on tombe sur la première page, et non sur la dernière, du coup si on ne fait pas gaffe, on voit pas les posts qui seraient en 2 ème page.

  7. #27
    Membre habitué
    Homme Profil pro
    sans
    Inscrit en
    Juillet 2019
    Messages
    127
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 56
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : Juillet 2019
    Messages : 127
    Points : 126
    Points
    126
    Par défaut
    salut,
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    #!/bin/bash
     
    fic_source_glob="exemples.txt"
    fic_source="exemple.txt"
     
    function check_td {
     
      if [ "$(grep -cE "<[tT][dD].*>" $fic_source)" != "$(grep -cE "</[tT][dD].*>" $fic_source)" ]; then
        echo "problème td"; exit
      else
        sed -i "s/<td/<TD/g;s/<Td/<TD/g;s/<tD/<TD/g" "$fic_source".tmp
        sed -i "s/<\/td/<\/TD/g;s/<\/Td/<\/TD/g;s/<\/tD/<\/TD/g" "$fic_source".tmp
        #sed -i 's/<\/*[tT][dD]/\U&\E/' "$fic_source".tmp
        # cat "$fic_source".tmp && exit
      fi
      return 0
     
     
    }
    function check_tr {
     
      # echo -n "nb tr: "  ; grep -cE "<[tT][rR].*>" $fic
      # echo -n "nb /tr: " ; grep -cE "</[tT][rR].*>" $fic
      if [ "$(grep -cE "<[tT][rR].*>" $fic_source)" != "$(grep -cE "</[tT][rR].*>" $fic_source)" ]; then
        echo "problème tr"; exit
      else
        sed "s/<tr/<TR/g;s/<Tr/<TR/g;s/<tR/<TR/g" "$fic_source" > "$fic_source".tmp
        sed -i "s/<\/tr/<\/TR/g;s/<\/Tr/<\/TR/g;s/<\/tR/<\/TR/g" "$fic_source".tmp
        #sed 's/<\/*[tT][rR]/\U&\E/' "$fic_source" | tr '<TR' '#<TR' | tr -d '\n' > "$fic_source".tmp
       # cat "$fic_source".tmp && exit
      fi
      return 0
     
    }
     
    nb_td= ; nb_tr=
     
    if check_tr && check_td; then
     
      # importance des "" (plutôt que 's///g') pour interpréter correctement les \n ; ce qui oblige à échapper les "" texte
      sed -i -e "s/<img/\\n<img/g" -e "s/ width=\"\([0-9]*\)\"/\\n#w:\1/g" \
        -e "s/ height=\"\([0-9]*\)\"\(.*\)/\\n#h:\1/g" "$fic_source".tmp
     
      # en deux fois, à voir ...
      sed -i "s/\(.*\)src=\"\([^\"]*\)\(.*\)/#src:\2/g" "$fic_source".tmp
     
      nb_td="$(grep -cE "<TD.*>" $fic_source.tmp)"
      nb_tr="$(grep -cE "<TR.*>" $fic_source.tmp)"
     
    fi
    # toutes les séquences sur une ligne
    #sed -n '/<TR/,/<\/TR/p' "$fic_source".tmp | tr -d '\n' > "$fic_source".tmp1 # besoin d'un fichier supplémentaire
    #cat "$fic_source".tmp1 > "$fic_source".tmp && rm "$fic_source".tmp1         # provisoirement
    #echo "" >> "$fic_source".tmp                                                # on a supprimé même le dernier \n, pas bon
    #cat "$fic_source".tmp && exit
    while read line; do
      [ -z "$line" ] && continue  # parce que je ne vois pas où est l'erreur, il subsiste une ligne apparemment vide
      # echo "line: /$line/"
      case "${line:0:1}" in
        \#) echo "$line" ;; # c'est là qu'on agit qui reprend la séquence et translitére le fichier à mon avis, ( à voir en pratique mais là je suis pas dispo)
         *) echo "pas line: $line" ;; 
      esac
     
      # ici on récupère les valeurs de src, on réécrit le fichier en remplaçant les td suivi de src par la div qui va bien
      # et transformer toutes les balises en ce qu'on veut
    done < "$fic_source".tmp

  8. #28
    Expert éminent sénior Avatar de disedorgue
    Homme Profil pro
    Ingénieur intégration
    Inscrit en
    Décembre 2012
    Messages
    4 280
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur intégration
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Décembre 2012
    Messages : 4 280
    Points : 12 729
    Points
    12 729
    Par défaut
    pour simplifier tes sed, comme déjà suggéré par N_BaH :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    $ echo '<Tr<tR<TR<tr' | sed 's/<tr/\U&/ig'
    <TR<TR<TR<TR
    Cordialement.

  9. #29
    Modérateur
    Avatar de N_BaH
    Profil pro
    Inscrit en
    Février 2008
    Messages
    7 552
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 7 552
    Points : 19 387
    Points
    19 387
    Par défaut
    pourquoi i dans ig ?
    .
    N'oubliez pas de consulter les cours shell, la FAQ, et les pages man.

  10. #30
    Expert éminent sénior Avatar de disedorgue
    Homme Profil pro
    Ingénieur intégration
    Inscrit en
    Décembre 2012
    Messages
    4 280
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur intégration
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Décembre 2012
    Messages : 4 280
    Points : 12 729
    Points
    12 729
    Par défaut
    i pour insensitive (à la casse)
    Cordialement.

  11. #31
    Modérateur
    Avatar de N_BaH
    Profil pro
    Inscrit en
    Février 2008
    Messages
    7 552
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 7 552
    Points : 19 387
    Points
    19 387
    Par défaut
    Citation Envoyé par franglois disedorgue
    insensitive
    insensi ble
    .
    N'oubliez pas de consulter les cours shell, la FAQ, et les pages man.

  12. #32
    Expert éminent sénior Avatar de disedorgue
    Homme Profil pro
    Ingénieur intégration
    Inscrit en
    Décembre 2012
    Messages
    4 280
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur intégration
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Décembre 2012
    Messages : 4 280
    Points : 12 729
    Points
    12 729
    Par défaut
    Oui, j'ai oublié de l'encadrer par des guillemets, j'ai gardé le terme anglais pour montrer en même temps le pourquoi du choix du "i" (et ne me dis pas que insensible commence aussi par un "i" car ce n'est pas le cas en allemand par exemple)
    Cordialement.

  13. #33
    Membre à l'essai
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Octobre 2019
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Morbihan (Bretagne)

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Enseignement

    Informations forums :
    Inscription : Octobre 2019
    Messages : 17
    Points : 10
    Points
    10
    Par défaut
    Citation Envoyé par papajoker Voir le message
    J'avais bien compris ton calcul initial ... MAIS ici on est très loin du responsive !
    Le responsive c'est pour un certain (ancien) "TD" s'afficher sur toute la largeur (petit écran) et parfois s'afficher sur 2 ou 1 seule colonne (grand écran), on a plus un truc du genre:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div class="col-12 col-sm-6 col-md-8">
    et puisque tu dis avoir plusieurs tableaux dans le même page, un "col-***-auto" serait même bien vu

    Donc ce n'est pas du responsive et tout ce travail pour en fait pas grand-chose : juste un changement de css
    Je suis d'accord, ce que j'ai proposé n'est pas suffisant pour être responsive.
    J'étais parti sur le fait que si j'arrive à modifier les balises comme imaginé, j'allais pouvoir compléter le passage en responsive avec les breakpoints comme tu l'as pro


    j'en suis conscient, ce que je proposais, c'était plusieurs modèles (5..12 ?), a ton script de repérer la structure de la page (par nom du fichier, répertoire ou grep dans le fichier ...), à partir de là, ton script principal peut rediriger vers un script plus particulier (inject dans modele particulier et/ou parseur particulier et/ou règles "sed" particulières)
    Ta logique doit être en béton armé ! car si elle bloque sur 5% des pages, il va falloir en plus des mois de travail manuel pour corriger les erreurs introduites par ton convertisseur


    Le plus simple, tu pourrais déjà écrire des scripts bash pour tester la validité de tes règles (validité de l'html) sur tous tes fichiers: pasDetableauDansTableau.sh ... toujoursunWidthDansImagesDansunTD.sh ... ImageToujoursSeuleDansUnTD.sh ... pasDeROWSPANouCOLSPANdanslesTD.sh ... si 100% des fichiers non valides alors il faut définir d'autres règles. Et ces tests vont te permettre d'écrire tes regex particulières pour le convertisseur final
    je suis surpris que tes 12000 fichiers ne soient pas générés à l'origine par un script ? il serait si facile de faire le changement à partir de là
    Les pages ont été faites depuis prêt de 20 ans au fur et à mesure, à la main par des personnes qui n'ont pas nécessairement pris le temps de voir les évolutions du html...

    ps: des choses qui ont plus leur place dans la catégorie dev web du forum
    Oui, je vais voir ce que je peux lancer comme échange qui prendrait plus sa place dans la catégorie web et ce qui peut prendre sa place ici.

Discussions similaires

  1. [Batch] Transformation TXT en HTML avec ligne en couleur
    Par michel.r06 dans le forum Scripts/Batch
    Réponses: 2
    Dernier message: 13/09/2021, 10h13
  2. VB6: Récupération des meta d'une page HTML avec HTMLDocument
    Par Matounet dans le forum VB 6 et antérieur
    Réponses: 10
    Dernier message: 22/09/2011, 07h55
  3. ouvrir une page dans une cellule d'un tableau html avec php
    Par bahboubacar2 dans le forum Langage
    Réponses: 4
    Dernier message: 31/05/2010, 16h50
  4. [CSS 2] Transformation d'un design avec tableau en design avec div
    Par sinasquax dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 17/12/2009, 13h02
  5. Réponses: 7
    Dernier message: 14/09/2005, 10h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo