Puppy Linux Discussion Forum Forum Index Puppy Linux Discussion Forum
Puppy HOME page : puppylinux.com
"THE" alternative forum : puppylinux.info
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

The time now is Mon 01 Sep 2014, 04:30
All times are UTC - 4
 Forum index » Off-Topic Area » Programming
Web Programming
Post new topic   Reply to topic View previous topic :: View next topic
Page 2 of 5 [66 Posts]   Goto page: Previous 1, 2, 3, 4, 5 Next
Author Message
abushcrafter


Joined: 30 Oct 2009
Posts: 1447
Location: England

PostPosted: Tue 29 Mar 2011, 18:57    Post subject:  

Code:
#!/bin/sh

# Version=0.0.4

# drag N drop html index maker
# "$@" is a directory to index as html
# technosaurus author
# big_bass improved generated source code readability
# abushcrafter: Improved output HTML.
# abushcrafter: Fixed delete existing "index.html".
# abushcrafter: Added size and modified date code by big_bass.
 
cd "$@"

#---------------------
# clean up old debugging files
#---------------------
rm -f "$@"/index.html
rm -f /tmp/flist2
rm -f /tmp/dlist2

#---------------------
# generate the directory and file index
#---------------------
for x in *
 do [ -d "$x" ] &&  echo "            <li><a href=\"$x/\">$x/</a></li>" >> /tmp/dlist2
  ! [ -d "$x" ] && echo "            <li><a href=\"$x\">$x</a> ,`ls -lh \"$x\" | awk '{ print $5 }'`KB, Date Modified=`ls -lh \"$x\" | awk '{ print $6 }'`</li>"  >>/tmp/flist2
 done
 
#---------------------
# Head  make the html head
#---------------------
echo "<html>
    <head>
        <title>Index Of: "$@"</title>
    </head>
    <body>
        <h1>Index Of "$@"</h1>
        <h2>Directories:</h2>
        <ul>
            <li><strong><a href=\"../\">[Parent Directory]</a></strong></li>">"$@"/index.html

#---------------------
# Body append the dynamic info  for the index here the (directories )
#---------------------
cat /tmp/dlist2>>"$@"/index.html
echo "        </ul>">>"$@"/index.html

#---------------------
# Body  append the dynamic info  for the index here the (files )
#---------------------
echo "        <h2>Files:</h2>
        <ul>" >>"$@"/index.html
cat /tmp/flist2 >>"$@"/index.html
echo "        </ul>" >>"$@"/index.html



#---------------------
#Close the html header
#---------------------
echo "    </body>
</html>" >>"$@"/index.html


# remove new debugging files
#rm -f /tmp/flist2
#rm -f /tmp/dlist2

_________________
adobe flash is rubbish!
My Quote:"Humans are stupid, though some are clever but stupid." http://www.dependent.de/media/audio/mp3/System_Syn_Heres_to_You.zip http://www.systemsyn.com/
Back to top
View user's profile Send private message Visit poster's website 
technosaurus


Joined: 18 May 2008
Posts: 4348

PostPosted: Wed 07 Nov 2012, 18:15    Post subject:  

My sprite generator is here:
http://murga-linux.com/puppy/viewtopic.php?t=82009

here is an example that slices the output into 24x24 icons
Code:
<style>
.img{height:24;width:24;float:left;padding:0 0 0 0;display:block;background:url(sprite.png)}
.a{background-position:0-24}
.b{background-position:0-48}
.c{background-position:0-72}
</style>

<div class="img"></div>
<div class="img a"></div>
<div class="img b"></div>
<div class="img c"></div>

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4348

PostPosted: Wed 21 Nov 2012, 03:58    Post subject:  

How to localize web pages.

include this in you're page
Code:
<html><head><title>Localized page</title>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
</head>
<body>
<div id="string1">  This is the default text of string 1.  </div>
<div id="string2">  This is the default text of string 2.  </div>
</body></html>
<script>
function UrlExists(url){   var http=new XMLHttpRequest()
   try{http.open('HEAD', url, false);http.send()return http.status!=404
   }catch(e){return false}
}

function setLang(data){      var term
   for (var i=0;i<data.items.length;i++){
      term=document.getElementById(data.items[i].id)
      if (term) term.innerHTML=data.items[i].value
   }
}

var lang=navigator.userLanguage || navigator.language.toLowerCase()
if(UrlExists(lang+".js")){   var script=document.createElement("script")
   script.src=lang+".js?callback=setLang";
   document.body.appendChild(script)
}

</script>


then for each supported language, set up a file such as en-us.js
Code:
setLang({"items":[
{"id" : "string1","value" : " Localized text of string1. "},
 {"id" : "string2", "value" : " Localized text of string2. "}
]});

This file goes in the same directory as your page and can be shared by all pages in that directory (with modifications it could do multiple directories or sites or only one file, but I didn't want to complicate it)

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4348

PostPosted: Wed 21 Nov 2012, 16:21    Post subject:  

here is the start of puppy's /usr/share/doc/index.html:

I made 2 sections so far: the intro and legal, to do the translation for es-es, just copy en-us.js to es-es.js and modify each of the "value" values ("id" and its value is not translated)

if you have set your language and it still isn't working, find this line:
var lang=navigator.userLanguage || navigator.language.toLowerCase();
and after it add
alert(lang);
you will get a message telling you what your language is, the language file should be the contents of that message (should be lower case) with a .js extension
doc.zip
Description 
zip

 Download 
Filename  doc.zip 
Filesize  5.27 KB 
Downloaded  492 Time(s) 

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
L18L

Joined: 19 Jun 2010
Posts: 2505
Location: Burghaslach, Germany somewhere also known as "Hosla"

PostPosted: Wed 21 Nov 2012, 17:14    Post subject: Web Programming
Subject description: translations
 

technosaurus wrote:
...
if you have set your language and it still isn't working, find this line:
var lang=navigator.userLanguage || navigator.language.toLowerCase();
and after it add
alert(lang);
you will get a message telling you what your language is, the language file should be the contents of that message (should be lower case) with a .js extension

In seamonkey it is the language of the languagepack.
If not installed it is en-us of course, no dependency of locale setting.
de-de.js wrote:
setLang(
{"id":"intro","value":"<br>Hi, ich bin Barry Kauler, der original developer of the Puppy Operating System,................


function UrlExists(url){ var http=new XMLHttpRequest()
needs a web server, ?
tweb.png
 Description   start of puppy's /usr/share/doc/index.html
no translation (yet)
 Filesize   18.05 KB
 Viewed   734 Time(s)

tweb.png

Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4348

PostPosted: Wed 21 Nov 2012, 18:14    Post subject: Re: Web Programming
Subject description: translations
 

L18L wrote:
function UrlExists(url){ var http=new XMLHttpRequest()
needs a web server, ?
nope, but then again I am using seamonkey on my windows box

... but I had a cut paste error when removing some dummy tags

the de-de.js should be like this:
Code:
setLang({"items":[{"id":"intro","value":"..."},
{"items":[{"id":"legal","value":"..."},
]});


and the legal was supposed to wrap the legal disclaimer at the bottom with
Code:
<div id="legal">
...
</div>

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
L18L

Joined: 19 Jun 2010
Posts: 2505
Location: Burghaslach, Germany somewhere also known as "Hosla"

PostPosted: Thu 22 Nov 2012, 06:45    Post subject: Re: Web Programming
Subject description: translations
 

technosaurus wrote:
...the de-de.js should be like this:
Code:
setLang({"items":[{"id":"intro","value":"..."},
{"items":[{"id":"legal","value":"..."},
]});


With a little help from seamonkey's "lang=de: Fehlerkonsole" (JavaScript Debugger was no help) I made it work now.
Congrats, it is fantastic. Cool

my de-de.js wrote:
setLang({"items":[

{"id":"intro","value":"<br>Hi, ich bin Barry Kauler, der original developer of the Puppy Operating System, and you can find a completeintroduction to Puppy on the web at: <a href=\"http://www.puppylinux.com/\">http://www.puppylinux.com/</a> and <a href=\"http://www.puppylinux.org/\">http://www.puppylinux.org/</a>.<br><br>You are going to be amazed at the quantity and quality ofapplications in such a tiny Linux 'distro', as well as blown away bythe speed and stunned by the ease-of-use.<br><br>My aim is for Puppy to become a no-brainer to use (ie, no need to readthemanual!). Just turn on the PC, and off you go... we're not there yet,as someconfiguration files may have to be edited, plus various apps have to be\"tweaked\". Maybe some of your PC hardware doesn't work --in that case, first browse through the online documentation, thensearch the Puppy Discussion Forum -- as a last resort, post a question.<br><br>I would like to very briefly acknowledge all the guys whose programs I haveused in Puppy. Truly, I am standing on the shoulders of many others to reachthis new pinnacle that is the achievement of Puppy Linux. I have acknowledgedpeople throughout the documentation and on the web, and my profuse gratitudegoes out to all you guys who code just because you love doing it. I wouldalso like to send out a special thank-you for the help received from the guyson the Puppy Discussion Forum.<br><br>In fact, if you look at the release notes linked-to above, what is immediately apparentis that Puppy is now a team effort, a change that has been incrementally increasing so over the last couple ofyears. Any acknowledgement now needs to go to our entire \"Puppy Team\" rather than just me.<h2>Puppy help</h2>All Puppy's local documentation is in HTML or plain text format and located in/usr/share/doc. This page is the master index.<br>"},

{"id":"legal","value":"<br><small><b>Rechtlicher Hinweis:</b><br>Ich, Barry Kauler, etablierte das 'Puppy Linux Projekt' im Januar 2003, first website and productrelease 18-June-2003, and I have trademark claim to the name and typeddrawing of 'Puppy Linux', 'PuppyOS' and 'Puppy' as it relates to\"computer operating system software to facilitate computer use andoperation\", under Federal and International Common Law and TrademarkLaws as appropriate.<br>Programsin Puppy are open source (except where noted above), and licences ofindividual products are duly acknowledged. The name Puppy Linux\", alsoknown as \"Puppy\" and \"PuppyOS\", and all artisitic creations thereof,are copyright (c) 2003,2004,2005,2006,2007 Barry Kauler -- furtherdetails in the online <a href=\"http://www.puppylinux.com/faq.htm\">FAQ</a>.<br><br><b>Disclaimer:</b><br>Very simple, use entirely at your own risk. Barry Kauler accepts no liabilityor responsibility whatsoever, and you use Puppy with this understanding.<br></small><br>"}

]});

Note,
- it is just the green text that I have translated for testing
- The blank lines have been helpful for debugging
- One warning (not wellformed) remains:
Zeitstempel: 22.11.2012 11:25:32
Fehler: nicht wohlgeformt
Quelldatei: file:///root/my-documents/techno/doc/de-de.js
Zeile: 1, Spalte: 8
Quelltext:
setLang({"items":[

_________________________________
edit
PS
not well-formed
This is because the javascript is placed after </body>
For well-formedness is ought to be between <head> and </head>
But then it does not work because body is not yet loaded.
TypeError: document.body is null
tweb_OK_now.png
 Description   see this file name
 Filesize   13.48 KB
 Viewed   831 Time(s)

tweb_OK_now.png

Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4348

PostPosted: Thu 22 Nov 2012, 11:33    Post subject:  

The "not well formed" warning was something I chose to live with while I find a better fix. The translation format won't change and none of the "fixes" I found so far were suitable. I already tried using straight json (no callback function) with document.write and xmlhttprequest as well as putting it in a header script tag + a few more, but couldnt figure out how to access it.

The header method could work if the script tag had async a some way to wait for body to load

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
L18L

Joined: 19 Jun 2010
Posts: 2505
Location: Burghaslach, Germany somewhere also known as "Hosla"

PostPosted: Thu 22 Nov 2012, 12:15    Post subject: Web Programming
Subject description: not well-formed but validating
 

technosaurus wrote:
The "not well formed" warning was something I chose to live with while I find a better fix.

I have found not a total fix but better than now
between <head> and </head> something like wrote:
<script type="text/javascript">
<!-- Begin
function UrlExists(url)
{
var http=new XMLHttpRequest()
try
{
http.open('head',url,false);http.send();return http.status!=404
}
catch(e)
{
return false
}
}
function setLang(data)
{
var term
for (var i=0;i<data.items.length;i++)
{
term=document.getElementById(data.items[i].id);
if (term) term.innerHTML=data.items[i].value;
}
}
// End -->
</script>
that is : just the functions
and
the rest in body onload: wrote:
<body onload='var lang=navigator.userLanguage || navigator.language.toLowerCase(); if(UrlExists(lang+".js")){ var s=document.createElement("script"); s.src=lang+".js?callback=setLang"; document.body.appendChild(s)}'>


The not well-formed is in the de-de.js file.

http://validator.w3.org/check validates if
- div not inside of small
- form gets an action="./"

(I like validated markup)
(and html5 is not that difficult)
Back to top
View user's profile Send private message 
Moose On The Loose


Joined: 24 Feb 2011
Posts: 515

PostPosted: Thu 22 Nov 2012, 16:59    Post subject:  

Code:
#!/bin/sh
[....]
echo "<!DOCTYPE HTML PUBLIC\ "-//W3C//DTD HTML 4.0 Transitional//EN\">
<html>
    <head>
        <title>Index Of: "$@"</title>
    </head>
    <body LANG="en-US">


Declaring the language and the DOCTYPE seems to make browsers more consistent about what they display for the HTML input.
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4348

PostPosted: Thu 22 Nov 2012, 17:57    Post subject:  

I could put all of that onload stuff into a separate function to clean it up. I am still looking for a way to use straight json without the callback function (json-p) this would make the LANG packs much more portable (you could share translations with any language that supports json, like php, java, nodejs,...). I just wanted to be able to access the object from the javascript, but I must have missed something obvious. I will figure it out though.
_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4348

PostPosted: Fri 23 Nov 2012, 00:28    Post subject:  

finally... was looking for eval and needed to change the mimetype, so now it is a single function that gets called onload
Code:
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<script>
function setLang(){
var lang=navigator.userLanguage || navigator.language.toLowerCase(),req;
   if (window.XMLHttpRequest){      //IE7+,Firefox,Chrome,Opera,Safari
      req=new XMLHttpRequest();
   }else{                                       //IE6,IE5
      req=new ActiveXObject("Microsoft.XMLHTTP");
   }
   req.open("GET",lang+".json",true);
   req.overrideMimeType("application/json");
   req.send();
   req.onreadystatechange=function(){
      if (req.readyState==4 && req.status!=404){
         var term,data=eval('(' + req.responseText + ')')
         for (var i=0;i<data.items.length;i++){
            term=document.getElementById(data.items[i].id)
            if (term) term.innerHTML=data.items[i].value
         }
      }
   }
}
</script>
<style>
.txt{float:left;margin-left:10px}
</style>
</head>
<body onload='setLang()'>
<div id="string1" class="txt" >  This is the default text of string 1.  </div>
<div id="string2" class="txt" >  This is the default text of string 2.  </div>
</body></html>


and simple json format for value pairs
Code:
{"items":[{"id":"string1","value":" Localized text of string1. "},{"id":"string2","value":" Localized text of string2. "}]}


now to write a tutorial

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4348

PostPosted: Fri 23 Nov 2012, 18:51    Post subject:  

crap, that only works for gecko/mozilla browsers for local files, back to the drawing board ... again
_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4348

PostPosted: Sat 24 Nov 2012, 01:54    Post subject:  

this works in everything but opera, but I think that may be an opera bug
turns out there is no need for the urlexist function (its xmlhttprequest was the cause of the not well formed warning)
the script tag can go anywhere in the file this way
Code:
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<style>
.txt{float:left;margin-left:10px}
</style>
</head>
<body onload='setLang()'>
<div id="string1" class="txt" >  This is the default text of string 1.  </div>
<div id="string2" class="txt" >  This is the default text of string 2.  </div>
</body></html>
<script>
   var lang=navigator.userLanguage || navigator.language.toLowerCase();
   var script=document.createElement("script");
   script.src=lang+".jsonp"
   var head = document.getElementsByTagName('head')[0]
   head.insertBefore(script,head.firstChild)
   alert(head.innerHTML)
   function setLang(){
      for (var i=0;i<items.length;i++){
         term=document.getElementById(items[i].id)
         if (term) term.innerHTML=items[i].value
      }
   }
</script>


and the lang.jsonp file:
Code:
items=[
{"id":"string1","value":" Localized text of string1. "},
{"id":"string2", "value":" Localized text of string2. "}
];

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4348

PostPosted: Mon 26 Nov 2012, 01:10    Post subject:  

I am moving the localization discussion to the localization sub forum here:
http://www.murga-linux.com/puppy/viewtopic.php?t=82502

may as well post the useful functions I came up with while working on it here though

Code:
/* remove ...dir/ and .extension */
function basename(s){s=s.substring(s.lastIndexOf('/')+1);var i=s.indexOf('.');return s.substring(0,i!=-1?i:s.length)}
/* set class to c for the id of i */
function setClassForId(c,i){document.getElementById(i).className=c}
/* changes the innerHTML value for all ids in array a where a=[{"id":"the_id","value":"some innerHTML string"},...]; */
function changeItems(a){for(var i=0;i<a.length;i++){term=document.getElementById(a[i].id);if(term)term.innerHTML=a[i].value}}
/* return the parent directory/ of s */
function dirname(s){return s.substring(0,s.lastIndexOf('/')+1)}
/* returns string for language and country in the form en-US */
function getLangCountry(){return(navigator.userLanguage||navigator.language)}
/* returns the 2 letter language code */
function getLang(){return(navigator.userLanguage||navigator.language).substring(0,2)}
/* put script tag with source "s" right after <head> */
function prependScriptFromUrl(s){var a=document.createElement("script"),b=document.getElementsByTagName('head')[0];a.src=s;b.insertBefore(a,b.firstChild)}
/* put style tag with source "s" right after <head> */
function prependStyleFromUrl(s){var a=document.createElement("style"),b=document.getElementsByTagName('head')[0];a.src=s;b.insertBefore(a,b.firstChild)}
/* put style tag with contents "s" right after <head> */
function prependStyleFromString(s){var a=document.createElement("style"),b=document.getElementsByTagName('head')[0];a.innerHTML=s;b.insertBefore(a,b.firstChild)}
/* returns true if url "u" exists, otherwise false */
function UrlExists(u){var h=XMLHttpRequest();try{h.open('HEAD',u,false);h.send();return h.status!=404}catch(e){return false}}
/* returns an array of all elements with id */
function getElementsById(id){var t=document.getElementsByTagName("*"),a=[];for(var i=0;i<t.length;i++)if(t[i].id==id)a[a.length]=t[i];return a}
/* format number string with commas */
function addCommas(s){var a=s.split('.')[1];(a)?a="."+a:a="";s=s.split('.')[0];while(s.length>3){a=","+s.substr(s.length-3,3)+a;s=s.substr(0,s.length-3)}return s+a}
/* remove class s from array a of elements */
function removeClassFromElements(s,a){for(i=0;i<a.length;i++){var p=a[i].className.indexOf(s);if(p!=-1)a[i].setAttribute("class",((p==0)?"":a[i].className.substring(0,p))+a[i].className.substring(p+s.length,a[i].className.length))}}
/* add class s to array a of elements */
function addClassToElements(s,a){for(i=0;i<a.length;i++)if(a[i].className.indexOf(s)==-1)a[i].setAttribute("class", a[i].className+" "+s)}
/* returns true if font f is available false otherwise */
function hasFont(f){var s=document.createElement("span");s.style.fontSize="72px";s.innerHTML="MWMWM";s.style.visibility="hidden";s.style.fontFamily=[(f=="monospace")?'':'monospace','sans-serif','serif'];document.body.appendChild(s);var w=s.offsetWidth;s.style.fontFamily=[f,'monospace','sans-serif','serif'];document.body.lastChild=s;return s.offsetWidth!=w}
fontlist=["cursive","monospace","serif","sans-serif","fantasy","default","Arial","Arial Black","Arial Narrow","Arial Rounded MT Bold","Bookman Old Style","Bradley Hand ITC","Century","Century Gothic","Comic Sans MS","Courier","Courier New","Georgia","Gentium","Impact","King","Lucida Console","Lalit","Modena","Monotype Corsiva","Papyrus","Tahoma","TeX","Times","Times New Roman","Trebuchet MS","Verdana","Verona"]
function secondaryWindows(n,u){if(typeof w=="undefined")w=[];if(typeof(w[n])=="undefined" || w[n].closed){w[n]=window.open(u)}else{alert(u);w[n].location=u}}

_________________
Web Programming - Pet Packaging 100 & 101

Last edited by technosaurus on Sat 01 Dec 2012, 00:34; edited 1 time in total
Back to top
View user's profile Send private message 
Display posts from previous:   Sort by:   
Page 2 of 5 [66 Posts]   Goto page: Previous 1, 2, 3, 4, 5 Next
Post new topic   Reply to topic View previous topic :: View next topic
 Forum index » Off-Topic Area » Programming
Jump to:  

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum


Powered by phpBB © 2001, 2005 phpBB Group
[ Time: 0.1424s ][ Queries: 13 (0.0036s) ][ GZIP on ]