CrEv a écrit 4577 commentaires

c'est un peu la partie qui pourrit la page HTML (et rajoute un ascenseur horizontal)

ha, ça c'est dommage, il faut passer à une autre css :)
Avec la css linuxfr-solarized la mise en page est très correcte, le texte est correctement wrappé et il n'y a pas d'ascenseur horizontal :)

Pour les liens, étrangement là où j'avais saisis le texte (pas sur linuxfr) ils passaient.

D'ailleurs pour nombre d'entre eux (surtout dans la deuxième partie) j'ai utilisé une référence ou en tout cas quelque chose de plus simple (pas d'accent, etc).

Merci pour les corrections ;)

Ha non, ce n'est absolument pas visé contre toi (ni un autre ici). D'ailleurs c'était déjà présent sur mon blog, mais c'est plus une pique (limite private joke) avec des collègues envers quelqu'un (le nommer ne sert à rien) qui ne peut s'empêcher de mettre des liens derrière tellement de mots. Et surtout de placer 10 fois le même lien dans un article (à la première occurrence c'est intéressant, la deuxième rigolo, la troisième franchement lourd alors tout l'article…)

Donc non, c'est pas du tout visé pour toi, au contraire je te remercie de tout ce que tu fais, que ce soit liens ou corrections (et faut dire que j'en ai souvent besoin ;) )

mouai…
sauf que cette police a beaucoup plus que juste 4 pauv icones
mais aussi que toutes les polices n'ont pas les icones genre email, puce, etc
mais aussi que je peux vouloir une police différente

en quoi n'est-ce pas accessible ? C'est purement visuel, ça n'a pas d'intérêt autre que du style
d'ailleurs c'est pour ça que c'est uniquement du css
Tu peux le désactiver tu ne perd pas d'informations.
Si on regarde la partie adresse ou numéro de téléphone elle est au contraire déjà très accessible. Voici l'html :

<div itemscope='itemscope' itemtype='http://schema.org/Person'>
  <p class='icon-envelope-alt'>
    <span itemprop='name'>
         Pirouette Cacahuette
    </span>
  </p>
  <div class='address' itemprop='address' itemscope='itemscope' itemtype='http://schema.org/PostalAddress'>
    <p>
      <span itemprop='streetAddress'>
        <i>
            Maison en carton
        </i>
        <br />
            12 rue Plop
      </span>
      <br />
      <span itemprop='postalCode'>
           010203
      </span>
      <span itemprop='addressLocality'>
           Paperville
      </span>
    </p>
  </div>
  <p>
    <span class='icon-comments-alt' itemprop='email'>
      <a href='mailto:plop@example.net'>
          plop@example.net
      </a>
    </span>
  </p>
  <p>
    <span class='icon-phone' itemprop='telephone'>
        01 02 03 04 05
    </span>
  </p>
</div>

C'est justement plutôt accessible ça, surtout que ça utilise les infos de http://schema.org
Avoir une icone devant c'est juste du cosmétique, c'est du style, c'est de l'amélioration mais c'est rien d'autre.
Et pour le côté interopérable je vois pas bien le soucis.

Par contre oui je vais voir pour pouvoir mieux le dégrader si la police n'est pas chargée, ça se serait vraiment mieux c'est vrai.

D'ailleurs on pourrait encore améliorer ceci en réduisant encore plus le couplage entre informations (html) et cosmétique (css)

Le haml pourrait être :

%div(itemscope itemtype="http://schema.org/Person")
    %p
        %span(itemprop="name")
            Pirouette Cacahuette
    %div.address(itemprop="address" itemscope itemtype="http://schema.org/PostalAddress")
        %p
            %span(itemprop="streetAddress")
                %i
                    Maison en carton
                %br
                12 rue Plop
            %br
            %span(itemprop="postalCode")
                010203
            %span(itemprop="addressLocality")
                Paperville
    %p
        %span(itemprop="email")
            %a(href="mailto:plop@example.net")
                plop@example.net
    %p
        %span(itemprop="telephone")
            01 02 03 04 05

Et le sass deviendrait :

@mixin iconfont($char)
  &:before
    font-family: FontAwesome
    font-weight: normal
    font-style: normal
    display: inline-block
    text-decoration: inherit
    content: $char

[itemprop="name"]
  @include iconfont("\f0e0")
[itemprop="email"]
  @include iconfont("\f0e6")
[itemprop="email"]
  @include iconfont("\f095")

En faisant ceci, la partie icone, style, n'est apportée que par le css, sans aucun besoin html autre que les informations de schema.org.

Hum, pourtant si je relis le commentaire j'en reviens à la même réponse.

Sincèrement, de nos jours, on n'écrit plus ces liens en durs lorsqu'on écrit une page web.

Ben heu… dans le cas présent, si.

D'où la question : quel outil utilises-tu ?

Aucun.

En fait le sujet présenté c'est vraiment de la page statique, y'a pas autre chose ;)

Ha tiens, bonne idée. Je crois que je vais entamer une reconversion :)

Par contre, faut pas pousser, en JEE on a peut-être autant de frameworks mais au moins ceux que j'ai choisis ne foutent pas à plat un quad core et surtout, j'ai un résultat. J'aurais voulu faire pareil en JEE je crois que je serais encore à l'étape maven (ha ha !) et je n'aurais toujours pas écris la première ligne (et ensuite je ferais ça pour de vrai et j'utiliserai gradle)

C'est bon, corrigé

Mouai, je vais voir pour les renards, pour ceux qui ont un vrai navigateur internet ça doit déjà fonctionner.

J'en profite :

Pour faciliter la navigation http/https, n'oubliez pas que markdown ne fait que ce que vous lui demandez.

Vous pouvez donc faire des liens relatifs qui laisseront à l'utilisateur la possibilité d'avoir des liens indépendants de http/https.
Par exemple, ce lien doit vous envoyer sur http://linuxfr.org/journaux ou https://linuxfr.org/journaux suivant votre usage.

Va falloir que j'y réfléchisse alors :)

Et au final ça ressemblera alors à un jekyll sous stéroïdes ;)

Oué mais non, les fontes custom c'est absolument pas du js.
C'est du css avec des fontes qui sont, à la discrétion des capacités du navigateur, en eot, en woff, en svg ou en ttf.
Je pense que c'est plus noscript qui interdit de charger des fontes externes, mais ce n'est pas du javascript.

Par contre, oui pour la mauvaise dégradation, il faudrait que je vois s'il n'y a pas un moyen de détecter le non chargement de la fonte pour changer de style (le tout en css).
Mais il est vrai que l'usage de ces polices doit être que de l'enrobage, du plus, mais pas du nécessaire lorsqu'on ne maîtrise pas cette problématique.

Ha non, pour ça il faut juste comprendre markdown :

Un lien s'écrit en général [texte du lien](url du lien)
Mais on peut aussi séparer la notion de lien (le texte qui va correspondre au lien) et la lien réellement pointé.

Par exemple un lien vers [google].
[google]: http://www.google.com

est équivalent à :

Par exemple un lien vers [google](http://www.google.com).

Mais on peut aller plus loin : déjà à chaque fois qu'on écrit [google] il colle le bon lien. Donc déjà, il suffit de ne définir le lien qu'une seule fois pour tout un document.

Ensuite, on peut rajouter un title :

Par exemple un lien vers [google].
[google]: http://www.google.com "Un projet d'étudiants"

Va avoir le résultat suivant :

Par exemple un lien vers google

Enfin, on peut décolérer l'"identifiant" du lien et le texte affiché, par exemple :

Un lien vers [un moteur de recherche][google].
[google]: http://www.google.com "Un projet d'étudiants"

va avoir comme rendu :

Un lien vers un moteur de recherche.

De cette manière, on peut taper le texte sans trop se soucier des liens, en perturbant moins la lecture des sources, et en faisant les liens de manière plutôt automatique.

Et évidemment les liens ne sont pas forcément collés au texte, d'ailleurs les miens sont quasiment tout le temps en fin de document, c'est beaucoup plus facile a gérer.

Markdown en ce sens est plutôt bien foutu, il ne lui manque que de vrai notes de bas de page pour être nikel de mon point de vue.

Ok, je vois.
En fait ça n'a rien à avoir avec javascript.
Les icones que tu vois sont en fait des caractères placées dans une autre police. Comme dit dans le bla bla, ça permet d'avoir quelque chose d'assez léger, facilement intégrable dans du texte, on peut utiliser css dessus, c'est vectoriel, etc.
Et je pense que ton noscript interdit le chargement des polices externes (on le voit aussi par le changement des polices sur le texte en lui-même).
Donc lorsqu'on essai d'afficher une icone, on saisi un caractère en indiquant son unicode. Et comme tu l'affiches avec une police de base, du a un caractère à la con qui apparaît car la police ne le contient pas.

Voilou

Grâce à ce magnifique, ce somptueux, ce superbe outil qui vous ferait presque oublier les reliques telles cvs, rcs ou bzr, j'ai nommé Gui Teube, le nyan cat est désormais calé avec le scroll de la page !

Evidemment, sans Gui Teube, une telle correction n'aurait pas été possible. Je tiens donc à remercier bitte qui à peur de ne pas avoir rendu publique son engin, ce qui a permis l'émergence de Gui.

Lapin compris
Où ça une regex ?

Mais sinon, s'il y avait une partie 3 ce serait, par exemple, pouvoir saisir le contenu en markdown avant de l'insérer dans mon fichier haml à l'endroit qui va bien. En plus ça permet de séparer la structure globale de la page de son contenu.

J'ai oublié celle là… le code coffee est en fait le suivant :

init = ->
  img = document.createElement 'img'
  img.src = "data:image/png;base64,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"
  img.style.position = 'absolute'
  img.style.top = '-1000px'
  img.style.left = '-1000px'
  document.body.appendChild img

  window.onmousemove = (e) ->
    img.style.left = "#{e.clientX + 10}px"
    img.style.top  = "#{e.clientY + 10}px"

init()

(oui ça change tout…)

Je te rappel qu'ici, normalement, t'es pas celui qui est censé le dire gentiment ;)

Et sinon, je trouve ça bien triste.
Ok windows est pourri
Ok les plugins c'est de la marde
Et quoi, firefox il est pas censé se battre un peu contre ça, pour l'ouverture du web, et pas au contraire baser ses choix sur des plugins proprios moisis ?

D'ailleurs, question bête, chrome sous windows il est en 32 ou 64 ?

Ha, ben moi c'était loin d'être le cas, ou alors vraiment pas simplement.

Truc tout bête, mais manipuler du texte (par exemple remplacer un caractère par un autre) est une opération tellement simpliste en xslt… ça mériterait d'envoyer les devs d'xslt faire quelques mois de stage intensif PHP + C++ MFC qu'ils apprennent réellement la programmation !

nan mais c'est c'est jquery qui est has-been

J'aurais du probablement l'explicité un peu plus, mais un framework js est utilisé derrière coffeescript. En fait il s'agit d'un framework vraiment révolutionnaire, bien plus révolutionnaire que typescript, encore plus révolutionnaire que snapseed (c'est pas peu dire) ! Le framework qui enlarge vraiment le développement client saïde, c'est évidemment vanilla-js

Depuis que j'utilise vanilla-js mes bugs ont disparu, mes performances sont revenues, les femmes se jettent sur moi (non ça c'était déjà le cas depuis que je fais des pages oueb)

une source ou un truc du genre ? parce que je trouverais ça marrant mais il y a tellement de fake sur le sujet…

Ha oué mais un CMS pour faire une page statique c'est beaucoup trop bloated comme truc !
Dans le présent exemple il n'y a que le juste strict minimum nécessaire pour faire les choses bien ! Et encore, là on parle d'une page, si on parle d'un site je devrais bien pouvoir rajouter quelques composants ;)

Ha oué, c'est un peu ce que j'ai expliqué en fait ;)

Mais d'ailleurs c'est valable aussi en développement, ça permet de s'assurer que tous les environnements sont sur les mêmes version, y compris par exemple tous les environnements de dev.

La table des matières n'a en effet que peu d'intérêt. Surtout que c'est pas pour être lu autrement que du début jusqu'à la fin (ça m'étonnerais qu'on y retourne chercher des informations ultérieurement).

Par contre, ce que je voulais c'était la mise en forme des titres/sous-titres, et la génération devient automatique.

Peut-être faudrait-il modifier linuxfr pour rendre optionnel la table des matières (voir la réserver, en général, pour les dépêches)

heu…
oué, c'est pas faux
par contre, entre écrire du xml + xslt pour ne pas écrire du html et écrire du haml le choix est très très rapidement fait. Et xslt quand tu veux faire des trucs un peu tordus, ben tu peux souvent simplement pas

wat iz se pro blaime ?

J'aurais ptetre du écrire "Tout de suite, le gain est énorme ! Aux oubliettes la syntaxe xml"

Mais allez, courage, va jusqu'au bout :)