Jump to content



Photo
html5 css3 xml

  • Please log in to reply
17 replies to this topic

#1 Class

Class

    Neowinian

  • Joined: 01-August 05
  • Location: Hungary

Posted 17 July 2013 - 08:59

Hello!

 

I'm not a webdesigner, noir a webdeveloper. But I'm making a little website, where I have template website, made of HTML5 + CSS3. My webhost does not support any PHP, and I was wondering if it's possible to make it multilingual with 1 click.

 

I had a little thoery/idea how it could work, but since I have not clue what HTML5 or CSS3 can do, I'm not sure if it's possible to do, anyway, here it goes:

 

The template has a index.html (which has all the text) and loads some .js and .css files for the animations and style.

 

(1) So, immediately my idea was, to replace all the text with a variable, that I store in a .xml/.lang file, where I define each "paragraph" that I have in my index.html. Make this xml file for all language that I have, for example I would have: english.lang (.xml) then german.lang (.xml) and so forth. Then I make a button (or little flags) in the index.html and if you click and english flag, the website replaces all text variables with the once stored in the English one, for German the other, and for the 3rd also. Is this possible, and if, how can I define the .xml/.lang file?

 

(2) My second idea was, to store the text in the ccs file and load the language as "profiles", make also little flags somewhere in the corner and then if 1 is clicked it changes the text shown, just as you make font decrease/increase size with CSS3.

 

(3) ...

 

That's all I had in mind and idea, but as sad....I have no f**** clue how to program the code for it, for me, logically it seam so easily to be done, but maybe in code it's a long walk. Help is much-much appreciated, or any other, more simple or easy idea too.

 

Thanks for reading. :)




#2 XerXis

XerXis

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 13-February 06
  • Location: Belgium

Posted 17 July 2013 - 09:05

get a webhost that does support PHP and do that kind of things server side.

 

In theory, you could do what you are talking about, give every element on the page you want multilang an ID, make language files in JSON (easier to use in js than XML) and replace all the text with javascript. But it really is overly complex and not user friendly.

 

edit: some more explanation of your idea

 

give every element an ID and class, for example <h1 id="title" class="shouldtranslate">the title</h1>

 

go through all the elements with class shouldtranslate with jquery

 

$(".shouldtranslate").each(function()

{

 

//get the id

var id = $(this).attr("id");

 

//get the property in the json with that id and set it as the new content

 

$(this).text(mylanguagejsonobject[id]);

 

});

 

you json would look something like

 

{ title : "le titre" }

 

But as said, don't do that, it's not user friendly



#3 OP Class

Class

    Neowinian

  • Joined: 01-August 05
  • Location: Hungary

Posted 17 July 2013 - 09:11

get a webhost that does support PHP and do that kind of things server side.

 

In theory, you could do what you are talking about, give every element on the page you want multilang an ID, make language files in JSON (easier to use in js than XML) and replace all the text with javascript. But it really is overly complex and not user friendly.

 

Yup. That was my big fear, logically it seems sooooo easy to do and then to code it down, would be like a mess. I'm sad. :( Thou if you say JSON is easier, I will google around a bit, maybe I find something that helps me to start somewhere.

 

Sadly PHP server is not an option, don't want to spend money and something as tiny as this, just a personal website and my domain host simply does not provide PHP, only for "hard money" which I'm not going to spend.



#4 XerXis

XerXis

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 13-February 06
  • Location: Belgium

Posted 17 July 2013 - 09:15

Yup. That was my big fear, logically it seems sooooo easy to do and then to code it down, would be like a mess. I'm sad. :( Thou if you say JSON is easier, I will google around a bit, maybe I find something that helps me to start somewhere.

 

Sadly PHP server is not an option, don't want to spend money and something as tiny as this, just a personal website and my domain host simply does not provide PHP, only for "hard money" which I'm not going to spend.

the code wouldn't be a mess, in fact the code only needs to be a few lines (like in my edited post, except you would have to use $.get first to get your json from the server.

 

The problem is, your site would only  work if javascript is enabled and you wouldn't be able to code a fallback. Search engines wouldn't be able to index your site in the other languages, so you would lose visitors because of that. And people with visual disabilities wouldn't be able to use your site either as their screen readers would probably flip out. All in all, very much possible, very much a bad idea



#5 the better twin

the better twin

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 26-January 10
  • OS: Win 8
  • Phone: Nokia Lumia

Posted 17 July 2013 - 09:17

You could try Google's Ajax Language API.

Heres a tutorial: 

http://www.labnol.or...guage-api/4367/

 

EDIT: tutorials a bit outdated 



#6 XerXis

XerXis

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 13-February 06
  • Location: Belgium

Posted 17 July 2013 - 09:18

You could try Google's Ajax Language API.

Heres a tutorial: 

http://www.labnol.or...guage-api/4367/

that just does automatic translation, the results are terrible and it has the same drawbacks



#7 the better twin

the better twin

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 26-January 10
  • OS: Win 8
  • Phone: Nokia Lumia

Posted 17 July 2013 - 09:26

that just does automatic translation, the results are terrible and it has the same drawbacks

Fair enough. Sounds like you have much more experience with this than I do. 



#8 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 20
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 17 July 2013 - 09:48

Just use JS in this case, make a duplicate off all elements and give each duplicate it's own class (english, german etc) then make sure they're all hidden by default, based on visitor language you can show .english or .german or .whatever with js.

 

Make sure to add a noscript element informing visitors who don;t have js why they don't see anything.

 

 

Edit: http://www.websiteco...bsite-demo1.php here's some js that can help which includes cookies too so they preference stays saved.



#9 OP Class

Class

    Neowinian

  • Joined: 01-August 05
  • Location: Hungary

Posted 17 July 2013 - 10:20

the code wouldn't be a mess, in fact the code only needs to be a few lines (like in my edited post, except you would have to use $.get first to get your json from the server.

 

The problem is, your site would only  work if javascript is enabled and you wouldn't be able to code a fallback. Search engines wouldn't be able to index your site in the other languages, so you would lose visitors because of that. And people with visual disabilities wouldn't be able to use your site either as their screen readers would probably flip out. All in all, very much possible, very much a bad idea

 

Oh, sry, I didn't see you edited. Will take a look right away...

 

Now I got what you mean. True. I don't want to drag actually any visitors. It's just I use the domain mainly for my private email, I just want to have a tiny website behind it, so if by accident someone is think, {oh, let's open that website} there should be something. I just use it in my CV and stuff, it's much better to have not a @gmail.com ending. Will try to think of something else...

 

You could try Google's Ajax Language API.

Heres a tutorial: 

http://www.labnol.or...guage-api/4367/

 

EDIT: tutorials a bit outdated 

 

Agree, it's pretty outdated and horrible translates coming up.

 

that just does automatic translation, the results are terrible and it has the same drawbacks

 

Yup.

 

Fair enough. Sounds like you have much more experience with this than I do. 

 

But thanks for the suggestion, it's always welcome. I'm a huge noob myself is coding and stuff.

 

Just use JS in this case, make a duplicate off all elements and give each duplicate it's own class (english, german etc) then make sure they're all hidden by default, based on visitor language you can show .english or .german or .whatever with js.

 

Make sure to add a noscript element informing visitors who don;t have js why they don't see anything.

 

 

Edit: http://www.websiteco...bsite-demo1.php here's some js that can help which includes cookies too so they preference stays saved.

 

Actually, that class stuff in .js seems like a good idea, but as I see that site is a PHP code, isn't it? Well, by "inspecting" it, I didn't see any PHP code...so this might work smooth as oiling hot girl on the beach. :D

 

Just to analyze and understand the code a bit....in the header you define 2 css, each having the their own visual setting inside.

<link href="english.css" rel="stylesheet" type="text/css">
<link href="spanish.css" rel="alternate stylesheet" type="text/css" title="alternate">

Then, inside the english.css you just simply hide/block the unwanted text with this:

.spanish {
display:none;
}

in the other, the spanish.css you set:

.spanish {
display:block;
}
li .spanish {
display:inline;
}
.english {
display:none;
}

Back to the original index.html, you setup a java script that makes the switch dynamically:

<script src="styleswitch.js" type="text/javascript"></script>

Which is this code:

function chooseStyle(styletitle, days){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}

Finally, you make 2 buttons/link that command the .js to execute:

<a href="javascript:chooseStyle('none', 60)">English Language</a>
<a href="javascript:chooseStyle('alternate', 60)">Spanish Language</a>

That about it, right?

 

Oh, and you have to make double entries inside the index.html, like this:

<span class="english">English</span>
<span class="spanish">Spanish</span>


#10 The_Decryptor

The_Decryptor

    STEAL THE DECLARATION OF INDEPENDENCE

  • Tech Issues Solved: 4
  • Joined: 28-September 02
  • Location: Sol System
  • OS: iSymbian 9.2 SP24.8 Mars Bar

Posted 17 July 2013 - 10:22

Doing it client side is going to be pretty crappy (The client will basically end up downloading every page twice + lay it out twice/etc.). This is something ideally suited to a server side templating/framework library, a good one should support it transparently.

#11 Praetor

Praetor

    ASCii / ANSi Designer

  • Tech Issues Solved: 4
  • Joined: 05-June 02
  • Location: Lisbon
  • OS: Windows Eight dot One dot One 1!one

Posted 17 July 2013 - 10:58

Doing it client side is going to be pretty crappy (The client will basically end up downloading every page twice + lay it out twice/etc.). This is something ideally suited to a server side templating/framework library, a good one should support it transparently.

 

yes, the workload should be on the server, not on the client; you are only making a worse experience for the user if the heavy load is processed client side.



#12 OP Class

Class

    Neowinian

  • Joined: 01-August 05
  • Location: Hungary

Posted 17 July 2013 - 11:45

Doing it client side is going to be pretty crappy (The client will basically end up downloading every page twice + lay it out twice/etc.). This is something ideally suited to a server side templating/framework library, a good one should support it transparently.

 

True. But if that not possible, there is really only 2 options left.

  1. Leave it only english, that (almost) everyone is speaking
  2. Or make a client side "switch" in language....that css + js doesn't seem to do that much of a load for a website that consist only from a index.html, i think. So, in a big scale might be a crappy solution. For a single index.html, shouldn't be the case or?

 

yes, the workload should be on the server, not on the client; you are only making a worse experience for the user if the heavy load is processed client side.

 

I have no other idea for it...



#13 primexx

primexx

    Neowinian Senior

  • Tech Issues Solved: 6
  • Joined: 24-April 05

Posted 17 July 2013 - 14:18

i'm not sure you *have* to use javascript. I played with XML and XSLT a long time ago, which is very powerful once you figure out the basics of how it works. You can just make multiple XML files each with a different language which contains all the words on the page (using custom structure/tags, since XML uses arbitrary tags), in each XML reference an XSLT stylesheet, which you can use to render it to html, and in the XSLT make reference to a CSS file to style the HTML that just got derived from your XML file. That way you can just have links to each XML file for the different languages, but still only have one-ish place to edit to change the style.

 

obviously, just as hacky as the aforementioned suggestions, the best is still to do it server-side, so much easier.



#14 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 20
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 17 July 2013 - 15:37

Server side isn't possible in his case (I wonder how he was able to find hosting which is so bad that they don't support php or asp atleast xD).

@primexx isn't using external xml files for each language it actually making worse? since you're doing additional http request :p

 

 

Easiest would be just a index php with language detect from ip and then load the correct php file with "include", I'd just get a better hosting to be honest :/



#15 primexx

primexx

    Neowinian Senior

  • Tech Issues Solved: 6
  • Joined: 24-April 05

Posted 17 July 2013 - 16:07

Server side isn't possible in his case (I wonder how he was able to find hosting which is so bad that they don't support php or asp atleast xD).

@primexx isn't using external xml files for each language it actually making worse? since you're doing additional http request :p

 

 

Easiest would be just a index php with language detect from ip and then load the correct php file with "include", I'd just get a better hosting to be honest :/

 

well all these workarounds suck. I agree a better host is best.