HTML Questions
One problem with content negotiation (and with serving different content/headers to different user-agents) is proxy servers. Considering the following; I ran into this back in the Netscape 4 days and have been shy of server side sniffing ever since. User A downloads your page with Firefox, and gets a XHTML/XML Content-Type. The user's ISP has a proxy server between the user and your site, so this page is now cached. User B, same ISP, requests your page using Internet Explorer. The request hits the proxy first, the proxy says "hey, I have that page, here it is; as application/xhtml+xml". User B is prompted to download the file (as IE will download anything sent as application/xhtml+xml. You can get around this particular issue by using the Vary Header, as described in this 456 Berea Street article. I also assume that proxy servers have gotten a bit smarter about auto detecting these things. Here's where the CF that is HTML/XHTML starts to creep in. When you use content negotiation to serve application/xhtml+xml to one set of user-agents, and text/html to another set of user agents, you're relying on all the proxies between your server and your users to be well behaved. Even if all the proxy servers in the world were smart enough to recognize the Vary header (they aren't) you still have to contend with the computer janitors of the world. There are a lot of smart, talented, and dedicated IT professionals in the world. There are more not so smart people who spend their days double clicking installer applications and thinking "The Internet" is that blue E in their menu. A mis-configured proxy could still improperly cache pages and headers, leaving you out of luck. ---------- The XHTML page must be well formed.If you forgot to closed a element and the browser will not to closed it and cause error. For "application/xhtml+xml", some old browsers no supports.
Are there any problems with serving pages as application/xhtml+xml?
The main building blocks are centred on HTML 5, CSS3, Javascript and SVG. Where HTML is a language to define the mark-up of a document (titles, headers, body, footer, tables, input forms etc.), CSS is a language to define style (formatting, colours, shades and the like). Javascript is a programming/scripting language and SVG is a language for creating 2D scalable vector graphics and images.
Consider HTML5 as an open web platform. What are the building blocks of HTML5?
The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before the window's load event. This means it's possible (and likely) that async scripts are not executed in the order in which they occur in the page. Whereas the defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document's DOMContentLoaded event.
Describe the difference between SCRIPT, SCRIPT ASYNC and SCRIPT defer?
They are all storage on the client side. cookies is small piece of key-value pair with a expire time. sessionStorage is on persistent and scope only to current windows. localStorage is persisitent and socop only to domain, by key-value pair or SQL database (Web SQL)
Describe the difference between a cookie, sessionStorage and localStorage.
I have used handlebars and used Angular JS in my last project.
Have you used different HTML templating languages before?
Add the lang attribute with the appropriate value on the elements that differ from the main page language (and add lang to the html). Always use a language attribute on the html tag to declare the default language of the text in the page. When the page contains content in another language, add a language attribute to an element surrounding that content. Use the lang attribute for pages served as HTML, and the xml:lang attribute for pages served as XML. For XHTML 1.x and HTML5 polyglot documents, use both together.
How do you serve a page with content in multiple languages?
HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM, or setUserData.
What are data- attributes good for?
a) cleaner markup than earlier versions of HTML b) additional semantics of new elements like HEADER NAV & TIME c) New form inputs types and attributes that will take the hassle out of scripting forms
What are some other advantages of HTML5?
- audio - for media content, sound music, audio streams - video - for video content such as movie clip or other video streams - source - for media resources for media elements defined inside video or audio elements - track - for text tracks used in mediaplayers
What are the New Media Elements in HTML5?
...The doctype is not a HTML tag it's an instruction to the web browser about what version of HTML the page is written in.
What does a "doctype" do?
SQL is Structured Query Language, which is a computer language for storing, manipulating and retrieving data stored in relational database. SQL is the standard language for Relation Database System. All relational database management systems like MySQL, MS Access, Oracle, Sybase, Informix, postgres and SQL Server use SQL as standard database language. it includes database creation, deletion, fetching rows and modifying rows etc.
What is local SQL Database?
a rendering mode in which the program gradually updates small parts of the entire image refining it from low quality to final result rather than focusing on one small part of the image at a time
What is progressive rendering?
The !DOCTYPE is an instruction to the web browser about that version of HTML the page is written in. The !DOCTYPE tag does not have an end tag, it is not case sensitive. The !DOCTYPE declaraction must be the very first thing in HTML5 document, before the html tag. As in HTML 4.01, all !DOCTYPE declarations require a reference to a Document Type Definition DTD, because HTML 4.01 was based on Standard Generalized markup language SGML. Where as HTML5 is not based on SGML, and therefore does not require a reference to a DOcument Type Definition.
What is the !DOCTYPE? Is it mandatory to use in HTML5?
HTML5 is nothing more than upgraded version of HTML where in HTML5 supports the innovative features such as video, audio/mp3, date select function, placeholder, Canvas, 2D/3D Graphics, local SQL Database added so that no need to do external plugin like flash player or other library elements.
What is the difference between HTML and HTML5?
Flash is not supported by major mobile devices such as ipad, iphone and universal android applications. Those mobile devices have lack of support for installing flash plugins. HTML5 is supported by all the devices, apps and browser including Apple and Andriod products. Compared to flash, HTML5 is very secured and protected. That eliminates major concerns that we have seen with flash.
What is the major improvement with HTML5 in reference to flash?
HTML5 is the next version of HTML 4.01, XHTML 1.0 and DOM level 2 HTML. It aims to reduce the need for proprietary plug-in-based rich internet application technologies such as Adobe Flash, Microsoft Silverlight, Apache Pivot. Instead of using pligins, it enables browsers to serve elements such as video and audio without any additional requirements on the client machine.
What is the purpose of HTML5 vs XHTML?
The HTML5 sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window. We can create and access a sessionStorage, created "name" as session.
What is the sessionStorage Object in HTML5?
HTML5 Canvas element can be used to draw graphics images on a web page by using Javascript.
What is the use of canvas element in HTML5?
How will users to be directed to their native language? First and foremost, it should be decided how various languages will be navigated to. Will the site default to one language and design a piece of UI that allows users to change it? Will the website redirect the browser based on each user's I.P. address? Will each language have its own URL (website.com/de) or domain (website.de)? Text In Images Won't Scale. This includes foreground images as well as inline text replacement (text-indent: -9999em;) in CSS. Placing text in an image is still a popular way to get good-looking, non-system fonts to display on any computer. However to translate image text, each string of text will need to have it's a separate image created for each language. Anything more than a handful of replacements like this can quickly get out of control. Using live text allows text to be easily translated since the characters appear in the code, something a translation service can interpret. Embedding customs fonts is now possible with @font-face and services like Typekit and FontDeck. Restrictive Word / Sentence length As Misha Kvakin notes, word length can vary from language to language so it's best to avoid designing where the amount of text would make or break a design. A phrase that's 15 characters German or Spanish might be 4 characters in Traditional Chinese or Arabic (which also brings up the point of RTL text vs. LTR!). Character counts come into play with things like headlines, labels, and buttons. They are less of an issue with free flowing text such as body text or comments. Be Mindful of How Colors Are Perceived Across Different Cultures Colors are perceived differently across languages and cultures. The design should use color appropriately. How are colors perceived in different languages and cultures? Completely remove text content from templates. Common static text strings like section titles and a site-wide footer must be taken out of the templates. If something needs to be translated, it should not be hard-coded into a template. This applies to things like ALT and TITLE attributes too. Formatting Dates Calendar dates are sometimes presented in different ways. Eg. "May 31, 2012" in the U.S. vs. "31 May 2012" in parts of Europe. This should be considered when deciding how to store and mark up values for a date.
What kind of things must you be wary of when design or developing for multilingual sites?
XHTML is a sub-set of XML and was an attempt at making markup rules more strict, such as requiring inline closing tags for br tag (ie "<br />"), but then HTML5 came along, and XML was mostly overtaken by JSON for web app data exchange, and XHTML has since also fallen out of vogue... XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to HTML XHTML is stricter than HTML XHTML is HTML defined as an XML application XHTML is supported by all major browsers
What's the difference between HTML and XHTML?
There are now three modes used by the layout engines in web browsers: quirks mode, almost standards mode, and full standards mode. In quirks mode, layout emulates nonstandard behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In full standards mode, the behavior is (hopefully) the behavior described by the HTML and CSS specifications. In almost standards mode, there are only a very small number of quirks implemented.
What's the difference between full standards mode, almost standards mode and quirks mode?
It is recommended because when you have the CSS declared before BODY starts, your styles have actually loaded already. So very quickly users see something appear on their screen (e.g. background colors). If not, users see blank screen for some time before the CSS reaches the user. Also, if you leave the the styles somewhere in the BODY, the browser has to re-render the page (new and old when loading) when the styles declared has been parsed.
Why is it a good idea to position CSS links between HEAD and JavaScript SCRIPT just before BODY? Do you know any exceptions?
