puppylinux-woof-CE / puppylinux-woof-CE.github.io

Development for puppylinux.com website
Creative Commons Zero v1.0 Universal
9 stars 19 forks source link

noscript message #15

Closed mavrothal closed 8 years ago

mavrothal commented 8 years ago

In the linux world is not rare for people to inactivate javascript in their browsers. Should we add a message using the <noscript> tag to inform them about it? I was thinking something like

<noscript>
    <div class="noscriptmsg">
    NOTE: puppylinux.com is using the markdown language to make it 
    easier for anyone to review and contribute content.</br>
    However, to properly view markdown text in a browser requires a 
    javascript parser.</br>You appear to have javescript disabled in 
    your browser, so what you see below is the actual markadown text.</br></br>
    TO PROPERLY VIEW THIS SITE ALLOW JAVASCRIPT IN puppylinux.com</br></br></br>
    </div>
</noscript>

just after </head> and a noscriptmsg class with bold red letters. However is pain to have to do that in every document. Is there anyway to do that once for all the pages?

01micko commented 8 years ago

Only way is javascript :tomato:

Maybe server side?

Aso the css is loaded by js so you'd have include the style inline.

<style>
.noscriptmsg {
    color:red;
    font-weight: bold;
}
</style>
<noscript>
    <div class="noscriptmsg">
    NOTE: puppylinux.com is using the markdown language to make it 
    easier for anyone to review and contribute content.</br>
    However, to properly view markdown text in a browser requires a 
    javascript parser.</br>You appear to have javascript disabled in 
    your browser, so what you see below is the actual markdown text.</br></br>
    TO PROPERLY VIEW THIS SITE ALLOW JAVASCRIPT IN puppylinux.com</br></br></br>
    </div>
</noscript>

(typos fixed)

mavrothal commented 8 years ago

Bummer. What about just having <noscript> to redirect in a noscript.html info page? Though I read that redirection may not be the best because of the lag So should we do it? (what typos?... :tongue: )

01micko commented 8 years ago

What lag? It should work ok. It's common in

We should have appropriate disclaimer though for the tinfoil brigade. :tophat:

Alternatively, tone down the message, make it brief and put a link.

01micko commented 8 years ago

Try this.

<style>
.noscriptmsg {
    width: 768px;
    color: peru;
    font-weight: bold;
    border: solid 1px;
    padding: 10px;
}
a { color:green;}
</style>
<noscript>
    <div class="noscriptmsg">
    Please note that <em>puppylinux.com</em> is using javascript on top of
    markdown language thus javascript must be enabled for the optimum experience.
    For more information please see our
    <a href="javainfo.html">information</a> page.
    </div>
</noscript>

I'm not saying put that exactly that but taking away choice by redirecting is a bit harsh. With an info page we can recommend they turn on javascript but if they decide not to then they can make the choice and peruse the 'source'. Of course which brings a better idea.. a small nav table in the said info page if they decide they want to peruse the site without js.

01micko commented 8 years ago

Oh, why would you want it on every page anyway? (I meant this for last post but in between watching rugby). 99% of users would visit homepage first I'm sure. Perhaps if any is linked (faq maybe) then they should get it too.

mavrothal commented 8 years ago

I like it! (but the color...) As mentioned before some pages are links from puppy docs (/download/index.html, faq.htm etc) and others can be referenced directly (forum, blog etc). So "in every page" is safer.

01micko commented 8 years ago

pick a color! red is too harsh, maybe chartreusse?

Every page is fine then.

I'll tweak the wording a little and do up a quick page that I might just post here before commit.

mavrothal commented 8 years ago

chartreusse

What is that? Are we in the fashion industry now? :smiley: The banner blue (maybe a tad darker) for consistency I would say.

mavrothal commented 8 years ago

DeepSkyBlue or DodgerBlue

01micko commented 8 years ago

Ok, here is a draft.

<!DOCTYPE html>
<html>
<head><meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Puppy Linux Javascript Info</title>

<style>
#content {
    width: 768px;
    align: center;
    padding: 10px;
    line-height: 150%;
    fon-tsize: 1em;
}
#foot {
    width: 768px;
    font-size: 0.75em;
}
a { color:#097191;}
h1 { color:#4CBFE3;}
h2 { color:#4CBFE3;}
</style>

</head>

<body>
<div id="content">

<h1>Puppy Linux</h1>

<h2> Why do we need javascript?</h2>
    <p>In order to make things easy for content contributors, we decided to go
    with a very easy and intuitive coding language. That language is 
    <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet"
    target="_blank">markdown</a>.</p>

    <p>To facilitate this, the code must be converted to html language,
    the usual one used on web pages, from markdown and the simplest and
    most secure way we felt, with the resources at our disposal, was to use
    client side (that is, browser based) coding engine, 
    <strong>javascript</strong></p>

    <p>We do realise that many do not like to enable javascript in their 
    browser. Surprisingly, markdown source code is quite readable. We do
    recommend that your consider switching javascript on for this site 
    for the best experience but of course we can't force you! So given that
    markdown is readable we would still like you to peruse out site even if 
    you don't want to switch on javascript.</p>

    <p>The following is a list of pages that you can visit without js enabled</p>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="download.html">Download</a></li>
        <li><a href="history.html">History</a></li>
        <li><a href="family-tree.html">Puppy Family</a></li>
        <li><a href="faq.html">FAQ</a></li>
        <li><a href="install.html">Install"</a></li>
        <li><a href="arch.html">Archictecture</a></li>
        <li><a href="screenshots.html">Screenshots</a></li>
        <li><a href="team.html">Puppy Team</a></li>
        <li><a href="woof-ce.html">Woof-CE</a></li>
    </ol>

    <p>We do hope you enjoy our content and consider using Puppy Linux!</p>
</div>          
<div id="foot">
    <p><strong>Disclaimer</strong>: While we believe the javascript here 
    is safe we accept no responsibility for any loss incurred by using this 
    site. You turn on javascript at your own risk.</p>

</div>
</body>
</html>
L18L commented 8 years ago

Hello

content inside noscript is shown only if no script! Thus nobody needs a special noscript page. You can put as much info as you like inside

Is it really so difficult to understand http://www.murga-linux.com/puppy/viewtopic.php?t=102853&start=45 ?

Cheers

Why not insert the following

<noscript>
<div id="content">

<h1>Puppy Linux</h1>

<h2> Why do we need javascript?</h2>
    <p>In order to make things easy for content contributors, we decided to go
    with a very easy and intuitive coding language. That language is 
    <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet"
    target="_blank">markdown</a>.</p>

    <p>To facilitate this, the code must be converted to html language,
    the usual one used on web pages, from markdown and the simplest and
    most secure way we felt, with the resources at our disposal, was to use
    client side (that is, browser based) coding engine, 
    <strong>javascript</strong></p>

    <p>We do realise that many do not like to enable javascript in their 
    browser. Surprisingly, markdown source code is quite readable. We do
    recommend that your consider switching javascript on for this site 
    for the best experience but of course we can't force you! So given that
    markdown is readable we would still like you to peruse out site even if 
    you don't want to switch on javascript.</p>

    <p>The following is a list of pages that you can visit without js enabled</p>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="download.html">Download</a></li>
        <li><a href="history.html">History</a></li>
        <li><a href="family-tree.html">Puppy Family</a></li>
        <li><a href="faq.html">FAQ</a></li>
        <li><a href="install.html">Install"</a></li>
        <li><a href="arch.html">Archictecture</a></li>
        <li><a href="screenshots.html">Screenshots</a></li>
        <li><a href="team.html">Puppy Team</a></li>
        <li><a href="woof-ce.html">Woof-CE</a></li>
    </ol>

    <p>We do hope you enjoy our content and consider using Puppy Linux!</p>
</div>          
<div id="foot">
    <p><strong>Disclaimer</strong>: While we believe the javascript here 
    is safe we accept no responsibility for any loss incurred by using this 
    site. You turn on javascript at your own risk.</p>

</div>
<noscript>

after <body> into c/header ?

jamesbond3142 commented 8 years ago

Putting this into index.html is okay, but not for all other pages. The idea is to make the template as simple as possible, so contributors can focus on editing the content. Plus, yes, as @01micko said it, the choice of markdown is because that in itself is readable. Just my two cents.

jamesbond3142 commented 8 years ago

On the other side, L18L suggested using jekyll. I'm under the impression that it is a static publishing tool which is not useful for our purpose, but the information given is quite contradicting, it seems that github can actually run jekyll for you when you commit to the repo [https://help.github.com/articles/about-github-pages-and-jekyll/] - so yes, it is still a static tool but github will run at publish time, instead of us having to do that manually.

Interesting parties may try this (in particular, the server-side-include), if this works then we can simplify at lot stuff.

mavrothal commented 8 years ago

I'm not sure that running jekyl can change anything when it comes to js requirement. Below is a picture of the repo clone, fed through jekyll and looks the same. Is there any specific jekyll command that can transform the page to pure html stripping js, or there is something else we want jekyll to do? Useit to do the job that strapdown.js does with markdown maybe?

jekyll_noscript

mavrothal commented 8 years ago

Regarding the <noscript> we do not need to put the whole text in every page (till we find a no js option) but just this redirection that works fine locally for me.

<noscript>
  <meta http-equiv="refresh" content="0;url=javainfo.html">
</noscript>

(assuming we call Mick's file javainfo.html) Should do for now.

mavrothal commented 8 years ago

Hm... maybe not. With a redirect to the page suggested with Mick's text, the pages can to be viewed (in markdown text) since will be redirected. Also adding the entire thing in every page does does look like a bit of (very) ugly having half "nice" (html) page and then a frame with text. The original short message with redirect is the best. or something like this

<style>
.noscriptmsg {
    width: 768px;
    color: DodgerBlue;
    border: solid 1px;
    padding: 10px;
}

</style>
<noscript>
    <div class="noscriptmsg">
        <h3> Javascript is inactivated</h3>
        <p>We decided to go with a very easy and intuitive coding language.</br> 
        That language is <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet"
        target="_blank">markdown</a> and requires <strong>Javascript</strong></p>
        <p>You can still vistit the folloing pages without js enabled</br>
        <a href="index.html">Home</a>, <a href="download.html">Download</a>, <a href="history.html">History</a>, 
        <a href="family-tree.html">Puppy Family</a>, <a href="faq.html">FAQ</a>, <a href="install.html">Install"</a>, 
        <a href="arch.html">Architecture</a>, <a href="screenshots.html">Screenshots</a>, </br>
        <a href="team.html">Puppy Team</a> and <a href="woof-ce.html">Woof-CE</a> but the appearance will be underwhelming.</p>
        For more information on javascript please see our
        <a href="javainfo.html">information</a> page.
    </div>
</noscript>

that looks like this

message

01micko commented 8 years ago

I don't mind doing a subset of pages in plain html/css in a separate folder. The thing is though, they won't get updated unless someone decides to tackle it.. Then a redirect is valid on all pages to its corresponding html page and pagess not covered to the HTML homepage.

mavrothal commented 8 years ago

If you want to maintain 2 sets of files you are very welcome. But if we do not really believe that anyone will contribute anything more than complains, you can just go with html or with anything you want for that matter. Is your site.

01micko commented 8 years ago

I'm keeping the markdown. That way johnny CantCode can get involved and be happy to see his name in "lights".

I've already coded the html for a 'legacy' site with a subset of pages that I'll maintain only as absolutely necessary (or anyone else can if they wish) . Remarkably, and with little effort it mirrors the style of the main site.

I like your blue message a few posts above but it won't be needed.

mavrothal commented 8 years ago

We all agree that markdown is the way to go. Regarding the "legacy site", thanks to James, may not be needed after all as you probably know by now.

01micko commented 8 years ago

yeah I saw that but I'm sure james has enough to do!

jamesbond3142 commented 8 years ago

I think we can safely close this. Please re-open if there are still issues.