I am trying to figure out how to develop a multi-lingual website. My background in HTML, JS, CSS is not that broad (I have started only a week ago), therefore my understanding of this may not be the best.
For our example we will be creating three language mutations:
English (main one)
Spanish
French.
Here is what I have come across when I started searching for this under uncle Google.
The longest solution I can imagine: Create three folders named en, es, fr. These will contain the replica of the original webpage (e.g. index.html), but will be translated to respective language. Then on the top panel, you will have a button which upon clicking it will redirect used to a different folder (link is hard coded here). This solution is feasible if we are dealing with very small websites (with a few pages).
Second option I have found, was using WordPress plugins (found quite a few of those). Unfortunately, this solution is not viable, as I am not using wordpress to create a website.
Next option (which I believe would be the best), is to have one page for all language mutations, but instead of real text, you would insert some attribute with the key, which will determine what phrase should be inserted here. It could look like data-toTranslate('sTitle') (making this up). The question now would be, where would you store your texts? One option would be into a database, but I have not worked with them (under websites), therefore I would prefer something like a text file / csv file / or something like this. The problem I have with this solution (except the fact that I don't know how to do it yet :) ) is that I am not quite sure how website would react to this in terms of loading time. Maybe this is the best solution for a developer, yet the worst for the website?
Any comments, links or suggestions which would point me in the right direction would be more than welcome!
EDIT: as this question may seem too broad, I will try to trim it a bit down.
As I believe the option number three would be the best, then I would like to know the following things:
1) What do I need to create when I want to store simple key - value pairs (such as in this translation)? If I were in C#, I would e.g. create either simple XML or CSV file and I would parse it during runtime.
2) Can I achieve this with a simple JavaScript, or do I need to create some specific controllers / directives with AngularJS?
Create the english version of the website statically, as this is the main language. You should have a separate ID for every text element (and don't use obe word ids such as "a" "b" etc., so you can easily fibd them later.
Have a file on your server (text file works too) with the ids of fhe text tags, and the text in a format like
welcome-text | ["Welcome to the website" in Spanish]
-------------
Etc...
(Note: yoh need to store the translated sentences, but I don't know Spanish nor France)
Name your file to something like Spanish.txt.
When the page loads, download this file with javascript trough AJAX (this is where the static english version kicks in as a fallback), loop trough the text file and set the texts to the translated version.
You can of course use PHP with MysQL too, but I thought it is a bit overkill for 2 languages.
And yes, this can be done with 100% pure javascript, not even JQuery is required.
I normally using PHP to handle this multilingual. When every moment user view the website, it will set the default language to ENG. But, when the user select other language as the website display language, the website will reload and the PHP code will call the respective language folder to display all the selected language on the website. So, I think you should having few language folder, then dynamic calling each of the folder to get the keywords words and display it.
Related
I am just wrapping up a long term project I have done for a company, but I am really stuck at this point.
I have a cool little page here: http://hagen-etc.com/test/buy/
It is basically showing all their retailers in the right hand side div while you can narrow down the results with the different options on the left side (Javascript based).
Everything works just fine, but I have run into a problem. The thing is, the person I am developing the site for has absolutely zero knowledge about programming and website managment etc, and therefore I need a smart way for her to change it.
I have simplified the procedures several other places on the website using shortcodes with Visual Composer and Shortcoder-plugin.
The problem here is, The Javascript is in footer.php while the actual content is on a Page in the dashboard. How do I make a smart solution so she can easily manage this in a blink of an eye? You can take a look at the source code in the link above if you would like to.
Would love to get some help on this because I am having a hard time figuring out a solution. Maybe a plugin can even do this?
The different areas, countries, cities and retailers are written in HTML in the Page while reas, countries, cities and retailers are written in Javascript in the footer.php. I know I can move the Javascript over to the Page, but the problem is, she would still have to change both the Javascript and the HTML.
I would like it to work with Shortcodes in a structure like this:
[countryopen]
[areaopen]
[cityopen]
[retailer][retailer]
[cityclose]
[areaclose]
[countryclose]
How would I go about this? The HTML would be in the top of the file while the Javascript would be in the bottom. I cannot really change both things with just one shortcode. How would I do this or is there even a better solution?
So essentially you are trying to allow this person to manage locations? You can use Advanced Custom Fields for WordPress and/or custom posts types for WordPress.
I would use a combination. Create a new custom post type in your functions.php and then, after installing the ACF plugin, create Location, Area, City, and Retailer fields and assign them to the new post type.
Similarly, in the index "Page" that you are working in now, you can create a query to dump any of these Locations onto the page.
I hope this helps. Let me know if I missed the point here, the question is still a little unclear.
UPDATE: There are many great tutorials that will walk you through creating a custom post type in your WordPress theme. WPBeginner and Smashing Magazine do a really good job of bringing you through this step-by-step. It will be very helpful for you to know how to do this and to understand this as a basic part of WordPress's Model-View-Controller system, here you are creating new views for your users to interact with.
After creating your new custom post type, which will seem like any other post/page in the Edit view, you can use the ACF plugin to easily add new fields to this new custom post type:
In the second section called "Location" you can define what type of posts these fields should be appended to. You would make these inputs says:
Post Type is equal to [Your New Post Type]
Your new post type being "Locations" or "Retailers" or however you want to phrase that. Now, when you check out the Edit view of a new custom post type, you can see these new fields appended to the bottom. Lastly, you may want to remove any field that you wouldn't want your web manager adding information into like WordPress' native Description or Excerpt inputs. You can do this by adding a few lines to your functions.php after you have created the post type:
add_action('init', 'remove_editor_from_retailer');
function remove_editor_from_retailer() {
remove_post_type_support( 'retailer', 'editor' );
}
Granted that "Retailer" is the name of your custom post type.
You can't have a user updating data in a javascript file.
So what you need to do is split the data off from the functionality.
To do this, put a script tag in one of your Wordpress template files, and output the area, country etc. data there as a Javascript variable.
You can manage and fetch this data using any Wordpress method of your choice. Anything that allows the user to update data in the admin area which you can then output in your plugin will work. So a plugin, a shortcode on some specific post, etc. are possibilities.
Then, in your existing Javascript file, remove your hardcoded data and instead pull it from that variable.
So this is kind of my first attempt at web design per se so it might be a newbie-ish question. Just to give a little background... I'm using the all time classic HTML + JS + CSS combo and Yii (PHP) as a backend with a MySQL database. I can't really tell what the site is about but the user will definitely interact with the backend and run some queries on the DB and stuff.
Right now my website is composed of 5 HTML files, each one of them has a common layout:
Header or menu with logo and user info
"Sub-Header" with a general info image and maybe some specific stuff
Content specific to that HTML file
Footer
Right now I find kinda annoying that each time I redirect the user to a different place of my site I have to check again if he's logged in, I make some use of cookies for that too, etc, etc.
I was thinking of moving my site to be a single page or template if you will and just append the (body)content of each of those files to the body of my master-page. That sounds pretty good at first thought, but are there any downsides to this or is this just how things should be done?
I've done web applications before using frameworks like Sencha and stuff and they all seem to work this way, but is this the way to go for this particular case?
EDIT
Also, what is the correct way to implement the single-page scenario?
Get all the code in one HTML file and hide the stuff I don't want to show
Remove from the view the stuff I want to hide and append the new stuff from some other HTML file.
I'm not sure I understand your situation exactly. But I think I would make another PHP file in a protected area with a function like is_logged_in() or even redirect_if_not_logged_in(). Then you can include (or require) that PHP file in the other ones and just call the function.
You definitely don't want to be rewriting the same code over and over again.
I'm currently programming a website that will be in multiple languages and I was wondering if there is an easy way to program the site only once for all languages.
For example, I have a variable called 'lang'. Basically if the user chooses Spanish then I would like the page to load images (or whatever asset) for buttons with Spanish as opposed to English. So for example, by changing the 'lang' variable, an image called 'home_button_eng.jpg' would instead load 'home_button_spa.jpg'.
I am thinking that this would require 'writing' or 'changing' an external document that contains the 'lang' variable which is then loaded by the page.
In other words, user clicks 'spanish' which makes lang='spa' then a new page loads which is connected to that language_choice.js file. The the appropriate content loads up.
Is there a way of doing this? I would much rather do this than duplicate every English page for Spanish.
Certainly you don't want to duplicate any content or code. I would organise all the assets in subfolders based on their language code:
content\
en\
images\
sp\
images\
This avoids having duplicate named files in a single folder for each language. When changing the language, you could store a session variable in your dynamic language of choice (Python, PHP, Ruby...) and use it to populate all the content with the correct language code.
Depending on how dynamic your content will be, you could implement it using .po and .mo internationalisation files and read them in to get your headings, text and so forth, while still implicitly determining the location of the images and other assets based on the language directory alone.
If all your language specific changes have to do with images you can just dynamically load a language specific CSS file.
If you have text as well you'd probably want to make a localization JSON object for each language you support and load that dynamically. The JSON object would contain the element-ids or element-classes with the language specific text or image source, you would iterating over the objects keys with JavaScript and fill-in the language specific data on the elements references in it.
I'm creating a web-application which will be taking survey-type data.
Users are presented with several files and asked a question. The user, in the hope of not skewing data, must not be able to know the file name of the file.
An empty div is created for a JPlayer instance to sit in, and I have added the "location" attribute to the div, so while setting up the JPlayer instance on the client side the JPlayer knows what .wav to play
<div id="jquery_jplayer" class="jp-jplayer" location="sound.wav"></div>
Here is part of the javascript which sets up the sounds to be played and here its easy to see that the file location is simply dragged from the div
$("#jquery_jplayer").jPlayer("setMedia", {
wav: $(this).attr("location")
});
Basically, the intention is to hide "sound.wav" from the HTML document and keep the javascript dynamic.
A translation file between obfuscated and deobfuscated could be possible but it would be nice to keep this dynamic.
If you want to truly hide logic from your viewers, then you need to do it server-side rather than with client-side javascript. You can "complicate" the dissection of what is happening in the client-side code, but you cannot truly hide it.
If you want further help with the obfuscation, you'll have to describe better what you're really trying to do. The current description doesn't seem to offer enough information. What is this file path? What is it being used for? Why do you need to hide it?
If what you really want is just a Javascript function to obfuscate and de-obfuscate the sound filename, you can find lots of options with Google depending upon how elaborate you want to get. My guess here is that the determined cheat won't be fooled (since all the code is there for deobfuscating) so all you're really trying to do is make it non-obvious at first glance. Thus, any simple algorithm will do.
Since you're already using jQuery, here's a jQuery that does simple string obfuscation: http://plugins.jquery.com/project/RotationalStringObfuscator. You'd have to run the obfuscator yourself in some sort of test app to record what the server should set each filename to and then do the reverse in the client when you want to actually use the filename.
If you ask me, a better solution would be to give the filenames non-meaningful names from the beginning. This would be names like 395678264.wav and just use them that way (on both server and client). Then, the name is meaningless to anyone snooping. No deobfuscation or translation table is required because this is the real filename.
I wanted to give my users a little piece of JavaScript or HTML code that they could put on their site and show information about them. Kind of like StackOverFlows new feature Flair.
I have an idea of how to code it. I was going to give them some JS with a HTML that had a DIV id="MySite_Info". Then the JS would go to my site and pull some JSON or XML and then fill in the data with a DIV in the HTML I gave them on their site.
Is there a better way to do this? Or any examples online I should follow? Whats the best way to create these javascript snippets? (Not sure what the proper name is)
There are two basic options.
Images (and pictures of text suck)
JavaScript - as you described
The approach I would take would be to:
Dynamically generate the JS using a server side process. This would include data for the user (using a JSON generator to easily produce the data in a suitable format).
Build the badge using standard DOM methods
Find the element with the document id and appendChild the generated badge