I'm currently building my site, I want to know how to do this...
Basically, when your press that country, it ask for the language available to you, and then it will redirect to that language page.
How could I do that? like airlines website, you choose a country, then language and then it directs to that language page?
This will usually require some server-side processing like PHP. When the user selects a language from the form, the language choice is stored in the session and recalled on each page load.
Then you would typically have internationalization strings in your web application. The chosen language is used to select the correct i18n strings from the index.
Using plain html only, with no server-side processing, the language selection form would simply (possibly via javascript) redirect to a document root for the language. This requires you to have a full site coded in each language.
http://www.example.com
http://www.example.com/en/
http://www.example.com/de/
You could do this in many different ways.
Here's a simple way to do it:
Have a bunch of links, each a different country. When you click on one, such as:
<a href="#" onclick="getLanguages('france')" >France</a>
This will call the JavaScript Function 'getLanguages()' shown here:
<script>
function getLanguages(country){
if(country == "france"){
document.getElementById("languages").innerHTML = "<a href='/french.html'>French</a><a href='/english.html'>English</a><a href='/german.html'>German</a>";
}else if(country == "china"){
document.getElementById("languages").innerHTML = "<a href='/chinese.html'>Chinese</a><a href='/english.html'>English</a><a href='/japanese.html'>Japanese</a>";
}
}
</script>
Obviously you'd have many more if statements for each country represented. This will basically modify an element with the ID of "languages":
<div id="languages"></div>
to include the possible languages for that country. Then when a user clicks on one of those links, it will take them to the correct page!
Hope this helps and good luck!
Related
I have a site done with React. On this site, two languages are available: 'en' and 'fr'. Here is how I implement it:
When the user comes on my site for the first time, I determine the language from its browser and I redirect it to www.mysite.com/fr or www.mysite.com/en.
The user is also free to change the language or directly access to the URL containing the language (example: www.mysite.com/fr).
Each time the language change, I store it in the local storage. This way, the user can comeback to www.mysite.com and I will redirect him to the correct URL containing the language (example: www.mysite.com/fr).
I don't specify 'lang' attribute on 'html' tag in my 'index.html' but when I know the language, I use Javascript to add this attribute dynamically.
I defined two 'hreflang' in the 'index.html'.
I already noticed two small problems with this implementation:
When I analyze my site with https://validator.w3.org/, I've got a warning telling me that 'lang' attribute is missing. I guess, this validator doesn't execute the Javascript. Can I considered it as a false positive ?
The browser extension 'Google Translate' seems to consider www.mysite.com/fr as an English page. I guess the extension doesn't wait enough to see the dynamic update of 'lang' attribute.
Is there is a way to avoid these problems ? Do you see other problems in my implementation ?
I made a simple website that includes two language versions, one Turkish and one English, my index page is a page that offers Turkish | English link directing into index-tr and index-en.
My question is how to make the index page remember what did the certain IPs selected when they first accessed the site. I mean, if I selected Turkish for the first time when I access the site another time it should remember that I've selected Turkish and should not direct me to the index page but instead, it should open index-tr.
I've used HTML and CSS only, no Javascript included.
I hope I made it clear.
Thanks in advance.
You can't store properties in HTML or CSS to be remembered for a period of time.
You have to use JavaScript or something server side, like PHP.
With JavaScript you could use localStorage.
The localStorage property allows you to access a local Storage object.
localStorage is similar to sessionStorage. The only difference is
that, while data stored in localStorage has no expiration time, data
stored in sessionStorage gets cleared when the browsing session
ends—that is, when the browser is closed.
You can write something like this
localStorage.setItem('language', 'tr') // Turkish language
You can overwrite this value by just overwriting the language with setItem()
localStorage.setItem('language', 'en') // English language
Now you can do something with it.
if(localStorage.getItem('language') == 'tr') {
// Language it Turkish, redirect or what ever JS code here.
} else {
// Language is not Turkish, but something other then 'tr'
}
More documentation and example's you can find here
I don't think this is possible with HTML CSS only, you have to use JavaScript,
Use localStorage
if (typeof(Storage) !== "undefined"){
localStorage.setItem('lang', 'tur');
} else localStorage.getItem('lang')
MDN
You can't do it with html and css, you have to do it with or at the server
(cookies in php)
Basically Im trying to build a page menu but in the form of a "Search users..." box. So basically when user enters the text "John Smith" the action="JohnSmith.html" but if they type "Mary Smith" the action would ="MarySmith.html".
From what I've been told so far there can only be one action per . Would what I wan't be possible using only HTML, If not how could I go about making this "Search User/Page Selector"?
Thanks!
Before you submit your form you can change the action depending upon the value of your text box in a java script function.
if(textboxValue=='John Smith'){
document.form.action="Action1";
}else if(textboxValue=='Mary Smith'){
document.form.action="Action1";
}
document.form.submit();
HTML marks up documents. It's a markup language. When browsers hit the markers, the HTML tags, they respond. By itself, HTML will not be readily usable to process data conditionally. Another program will be needed to process the HTML form. For these reasons, I suggest, No, HTML will not be a good choice for this task.
PHP, ASP, JSP or maybe even javascript would be good choices for processing form data. A stronger answer would require more structure to the question. Thanks.
I am making a website which will have lots of photographs. When a user clicks on a particular photo, a new page will be loaded with that photo being displayed bigger in size. There is a next button which will take the user to another page where there is another photograph. Therefore, my website will have lots of sub webpages( a little more than the number of photographs I have on the website). So is it usually how these kinds of websites are made,i.e., with lots of webpages or is there any other alternative for it?
No, that's not the usual aproach, al least on these days.
When we encounter with a similar situation like your case, we usually try to make it dynamic.
For example, if you need to show a lot of photos with the same markup and format, maybe the best option is to have a template with a variable.
The variable will be the photo url and the template will be everything surrounding it.
The page is the same, but only the photo changes.
There are a lot of advantages of doing this. Mainteneance, simplicity, work-load, cache...
Of course that can be use in another cases, like viewing a new details, when you would have only a ViewNew page, and you pass a parameter with the identifier of the new so you can show the correct request.
There are plenty ways to achieve this, most of them require server side code, to handle and process the request, like:
PHP
ASP/ASP.NET
Java
ColdFusion
Perl
Ruby
Phyton
...
But, some of this operations, could be also achieve by javascrip, a client side script code.
You could work with pure javascript or use a framework to make things easy and compatible. Here's some examples of javascript frameworks:
jQuery
YUI
Mootools
Dojo
Midori
...
I don't know if you want a particular examples using one of this languages or only know alternatives. If you need examples or need more information I'll be pleased of provide some.
Also, It's common that even if you are using a server side code, use javascript too, because can handle the behaviour on the website and/or make ajax request for asyncronous requests.
EXAMPLES
JavaScript simple:
jsFiddle
HTML:
<div>
<button id="previous" onClick="previousImg();">Previous</button>
<button id="next" onClick="nextImg();">Next</button>
</div>
<div>
<img id="imgViewer" src="http://icons.iconarchive.com/icons/mattahan/umicons/256/Number-1-icon.png" />
</div>
JavaScript:
var imgUrlTemplate = 'http://icons.iconarchive.com/icons/mattahan/umicons/256/Number-$number$-icon.png';
var imgCounter = 1;
var imgViewerNode = document.getElementById("imgViewer");
function previousImg() {
if(imgCounter > 1) {
imgCounter--;
imgViewerNode.src=imgUrlTemplate.replace("$number$",imgCounter);
}
}
function nextImg() {
if(imgCounter < 9) {
imgCounter++; imgViewerNode.src=imgUrlTemplate.replace("$number$",imgCounter);
}
}
If you have 1 html page and in that you write the PHP include 'photographlink' in the body with a case system of some sort. It will use 1 html page and it will include a different photograph depending on which photograpg is clicked
http://www.php.net/manual/en/function.include.php
I think the better way is to use javascript, my tip is to use jQuery framework to dynamically load and visualize images. You can find in the web some plugins that can simplify your life.
demo of one plugin
So I'm working on a web app, and I want to filter search results.
A nice restful implementation might look like this:
1. mysite.com/clothes/men/hats+scarfs
But lets say we want to ajax up the filtering, like the cool kids, and we want to retain deep linking, we might use the anchor tag and parse that with Javascript to show the correct listings:
2. mysite.com/clothes#/men/hats+scarfs
However, if someone clicks the first link with JS enabled, and then changes filters, we might get:
3. mysite.com/clothes/men/hats+scarfs#/women/shoes
Urk.
Similarly, if someone does not have JS enabled, and clicks link 2 - JS will not parse the options and the correct listings will not be shown.
Are Ajax deep links and non-Ajax links incompatible? It would seem so, as servers cannot parse the # part of a url, since it is not sent to the server.
There's a monkeywrench being thrown into this issue by Google: A proposal for making Ajax crawlable. Google is including recommendations for url structure there that may give you ideas for your own application.
Here's the wrapup:
In summary, starting with a stateful
URL such as
http://example.com/dictionary.html#AJAX
, it could be available to both
crawlers and users as
http://example.com/dictionary.html#!AJAX
which could be crawled as
http://example.com/dictionary.html?_escaped_fragment_=AJAX
which in turn would be shown to users
and accessed as
http://example.com/dictionary.html#!AJAX
View Google's Presentation here (note: google docs presentation)
In general I think it's useful to simply turn off JavaScript and CSS entirely and browse your website and web application and see what ends up getting exposed. Once you get a sense of what's visible, you will understand what most search engines see and that in turn will show you what is and is not getting spidered.
If you go to mysite.com/clothes/men/hats+scarfs with JavaScript enabled then your JavaScript should automatically rewrite that to mysite.com/clothes#men/hats+scarfs - when you click on a filter, they should be controlled by JavaScript meaning you'll only change the hashtag rather than the entire URL (as you're going to have return false anyway).
The problem you have is for non-JS users going to your JS enabled deeplinks as the server can't determine that stuff. Unfortunately, the only thing you can do is take them to mysite.com/clothes and make them start their journey again (as far as I'm aware). You'll need to try and ensure that when people link to the site, they use the hardcoded deeplink rather than the hashed deeplink
I don't recommend ever using the query string as you are sending data back to the server without direct relevance to the prior specified destination. That is a corruptible security hole as malicious code can be manually added to the query string to cause a XSS or buffer overflow attack at your webserver.
I believe REST was intended to work with absolute URIs without a query string, because then your specifying only a location of a resource and it is that location that is descriptive and semantically relevant in addition to the possibility of the resource being so equally relevant. Even if there is no resource at the specified path you have still instantiated a potentially unique and descriptive location that can be processed accordingly.
Users entering the site via deep links
Nonsensical links (like /clothes/men/hats#women/shoes) can be avoided if you construct your Ajax initialisation code in such a way that users who enter the site on filtered pages (e.g. /clothes/women/shoes) are taken to the /clothes page before any Ajax filtering happens. For example, you might do something like this (using jQuery):
$("a.filter")
.each(function() {
var href = $(this).attr("href").replace("/clothes/", "/clothes#");
$(this).attr("href", href);
})
.click(function() {
update_filter($(this).attr("href").split("#")[1]);
});
Users without JavaScript
As you said in the question, there's no way for the server to know about the URL fragment so filtering would not be applied for users without JavaScript enabled if they were given a link to /clothes#filter.
However, even without filtering, these links could be made more meaningful for non-JS users by using the filter strings as IDs in your /clothes page. To prevent this messing with the Ajax experience the IDs would need to be changed (or the elements removed) with JavaScript before the Ajax links were initialised.
How practical this is depends on how many categories you have and what your /clothes page contains.