Multilingual Sites - Using Context - SIUC 2011

480 views
433 views

Published on

How Web Contexts work in CMS< things to remember plus real-life examples. Presented by Justin Avery at the Squiz International User Conference 2011 in Sydney.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
480
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Good Morning Ladies and Gentleman, my name is Justin Avery and I&apos;m here with you this morning to talk about Contexts &amp; Multilingual sites within Squiz Matrix.
  • This morning we&apos;ll spend a little bit of time talking about (1)Squiz Matrix and how Contexts work, (2) how you can apply contexts, and then (3) Things you should know about Context….Here we will jump in and out of the browser as I go through to illustrate each item.Afterwards we will get (4) Real world examples of languagesBefore I get going I wanted to get an idea about where everyone in the room is up to with regards to contexts or mutlilingual sites.Can I get a show of hands of people that are already using contexts?How about people that have multilingual sites or are planning on expanding to multilingual?Is anyone planning on using Contexts for something other than multi-lingual?Who here had never heard of contexts before I started talking?EVEN IF YOU’RE NOT THINKING ABOUT USING CONTEXTS FOR MULTILINGUAL THERES STILL PLENT YOU CAN USE IT FORGreat. I think there&apos;s definitely going to be something in this presentation that will cover everyones needs.So lets get started with an overview of how contexts work.
  • A few years ago we didn&apos;t have contexts as an option and on some of the projects that I worked on we were required to have language options for the user. Most sites worked with a single about page that provided information in several languages and the rest of the site was in English. Some implementations went as far as creating additional sites built using the additional required languages. We even started looking at using a mixture of Paintlayout conditional tags and metadata.Then --- WHO ---- contexts were included as part of Squiz Matrix and we all breathed a sigh of relief.Contexts work on *most* assets on the system and allow you to serve up different content to the user depending on the predefined context criteria.
  • Lets take something basic like your websites about page, and lets say that you are covering 4 different languages of English, German, Spanish and French. Now pretend that this here (hold up paper) is your about page. As you can see it&apos;s one asset, but if you look closer there is actually 4 layers of this asset. Now when we visit the asset we visit it with some kind of criteria, whether that be a language-request header or a particular URL. We will go into the different types of Context Criteria next, but for now lets pretend that this criteria is based upon the URL.Now if that has confused you, don’t worry because we’re about to do it on the system
  • Configure Condition (apply url)
  • I mentioned there were different criteria that can be used to assign a context. This criteria includes - Language-Request Header- Other Request Headers- URL of the request- Destination Port- Secure/Insecure connectionGET &amp; Post VariablesI&apos;ll explain this however. Language-Request header might be used to automatically serve a particular language to the user. This is set on the computer/browser of the user so you would expect that someone accessing website from a computer set to French will want to see the site in French. This is an issue when you&apos;re using someone elses computer, or you are accessing the website from a Internet Cafe, and computer is set to a language other than your own. You are helpless to change the language. Another issues is that www.yoursite.com looks french when on one computer, and English when on another, but from a URL design it appears as though it should show you the same thing.GET &amp; Post Variables are other possibilities, but to keep a GET variable on the URL you would need some jquery magic to append it to all of the links on the current page which is not a suitable accessible solution, and also not very good for search engines.Today we are going to focus on the URL or the re quest, and I would advise anyone looking to implement Contexts to do the same. The reason for this has nothing to do with the possible applications of the Contexts, but more to do with best practices for websites, performance/caching, and user expectations.
  • Good Morning Ladies and Gentleman, my name is Justin Avery and I&apos;m here with you this morning to talk about Contexts &amp; Multilingual sites within Squiz Matrix.We&apos;ll spend a little bit of time talking about (1)Squiz Matrix and how Contexts work, (2) how you can apply contexts, and then (3) Things you should know about Context….Here we will jump in and out of the browser as I go through to illustrate each item.Afterwards we will get (4) Real world examples of languagesBefore I get going I wanted to get an idea about where everyone in the room is up to with regards to contexts or mutlilingual sites.Can I get a show of hands of people that are already using contexts?How about people that have multilingual sites or are planning on expanding to multilingual?Is anyone planning on using Contexts for something other than multi-lingual?Who here had never heard of contexts before I started talking?Great. I think there&apos;s definitely going to be something in this presentation that will cover everyones needs.So lets get started with an overview of how contexts work.
  • You have the option of setting metadata values to be contextable or non-contextableSetting metadata to Contexable means you need to fill out every metadata field again, they will NOT inherit from the Default ContextSetting metadata to NON-contextable means that all values will inherit the default value, and updating the value under any context will update all contexts.Multi select values are made up from two items, a key and value. The value is contextable for different options like on a sign up or contact form. The Key is a database key, and therefore is not contextable.
  • I say develop before updating the language because you don’t want to find down the line that you need to update it.
  • If you need to use different images for each context (for example if you images have text and you are building a multilingual site) then you should use different &lt;img&gt; tags or change the id/class and have different background images specified within the CSS (sprites would be even better)
  • SQUIZ ROADMAP example
  • We don’t have ClearLeft here not because it isn’t a great example, but because it was done with CMS.
  • You Win
  • You Win
  • You Win
  • You Win
  • You Win
  • You Win
  • You Win
  • You Win
  • You Win
  • Multilingual Sites - Using Context - SIUC 2011

    1. 1. Multilingual Sites<br />
    2. 2. <offtopic><br />Responsive Design<br />http://bit.ly/responsivesquiz<br /></offtopic><br />
    3. 3. Multi-Lingual Sites<br />How Context works<br />How to Apply Contexts<br />Things you should know<br />Real world examples<br />
    4. 4.
    5. 5. How Contexts Work<br />Request to Matrix<br />Does it match any conditions?<br />Show Default / Other<br />
    6. 6. How Contexts Work<br />
    7. 7. How to Apply Contexts<br />3 Steps<br />Create Context<br />Create Condition<br />Configure Condition<br />
    8. 8. How to Apply Contexts - Context Conditions<br />Language-Request Header<br />Other Request Headers<br />URL of the request<br />Destination Port<br />Secure/Insecure connection<br />GET & Post Variables<br />
    9. 9. How to Apply Contexts - Context Conditions - URL<br />Default: /en is set as the default condition displays when no other context is available.<br />Spanish: /es must be contained within the url<br />French: /fr must be contained within the url<br />and we're going to add<br />German: /de<br />so that you can see how easy it can be done.<br />Live Example<br />
    10. 10. Multi-Lingual Sites<br />How Context works<br />How to Apply Contexts<br />Things you should know<br />Real world examples<br />
    11. 11. Things to remember – Page Content<br />Each content div within the page contents will inherit the default context until that div is edited within another context. Once that happens, that div within that context will never inherit the default context again.<br />If you DO wish to start inheriting from the default context again you need to delete the div and recreate another div<br />Nested content can NOT be contextable. If you change the asset that is nested in any context it will update all other contexts. If you require this you should look at using as content snippet.<br />
    12. 12. Things to remember – Metadata<br />Contextable or non-contextable.<br />No inheritance for Contexable Metadata<br />Setting NON-contextable Metadata<br />Multi Select Values<br />
    13. 13. Things to remember – Paintlayouts<br />Paintlayouts work in the same way as Page Contents for all rules and exceptions<br />Develop before updating language<br />
    14. 14. Things to remember - Non Contextable Items<br />Design Parse File<br />CSS <br />Javascript<br />Images<br />Video<br />Folder (earlier versions)<br />Datasource<br />Nested Content Areas<br />Div Type<br />REST Resource Asset<br />
    15. 15. Things to remember – URL Design<br />Always specify a language<br />www.yoursite.com/en<br />www.yoursite.com/es<br />www.yoursite.com/fr<br />URLs are NOT contextable<br />www.yoursite.com/en/hello<br />www.yoursite.com/fr/hello<br />www.yoursite.com/es/hola<br />
    16. 16. Things to remember – URLS<br />URL’s are NON contextable in Squiz Matrix<br />URL’s are contexable in Squiz CMS<br />
    17. 17. ALWAYS CHECK WHICH CONTEXT YOU ARE IN BEFORE EDITING <br />
    18. 18. Multi-Lingual Sites<br />How Context works<br />How to Apply Contexts<br />Things you should know<br />Real world examples<br />
    19. 19. Real World Examples<br />Different Languages<br />Members Based Content<br />
    20. 20. Real World Uses – youwin.com/en<br />
    21. 21. Real World Uses – youwin.com/es<br />
    22. 22. Real World Uses – youwin.com/de<br />
    23. 23. Real World Uses – youwin.tv<br />
    24. 24. Real World Uses – youwin.com<br />www.youwin.com<br />Check for cookie<br />Redirect based on cookie<br />http://www.maxmind.com/app/mod_geoip<br />Redirect based on IP<br />Set Cookie<br />Override Cookie<br />
    25. 25. Real World Uses – DCD<br />
    26. 26. Real World Uses – DCD<br />
    27. 27. Real World Uses – DCD<br />
    28. 28. Real World Uses – ifl.ac.uk<br />
    29. 29. Lessons<br />Check Context<br />Build in 1 Language (breaking div links)<br />Consistent Rules (urls)<br />No Content in the Parse File<br />Include language variable in Remote Content/REST<br />Keywords – use _attribute_<br />
    30. 30. Justin Avery <br />E: javery@squiz.com.au<br />T: @justinavery<br />M: +61407608504<br />Questions?<br />

    ×