What are web standards technologies?
Web standards technologies are a collection of techniques, protocols and technologies that are ubiquitous across all interfaces and devices that connect to the internet. The include, but are not limited to:
- HTML
- CSS
- JavaScript
- AJAX
- SVG
- XML
- Many APIs
This class covers many of these subjects (though not all).
Toread about standards I recommend you go to the source and read subW3C’s expanation of the Standards.
What is HTML and what is it used for?
HTML (Hypertext Markup Language) is a semantic language designed to tag content in a logical and comprehensive way. For instance, a news article might have a title, date published, article body, author and perhaps a couple photos with captions. HTML is a formal way of “Marking up” that content in such a way that the browser knows what each small piece of content means.
<article>
<header>
<!-- TITLE -->
<h1>Article Title</h1>
<p>Published: <time pubdate="pubdate">2009-10-09</time></p>
</header>
<p>This is a placeholder for some of the article's content...</p>
<img src="../path/to/pic.jpg" alt="a Pic to see!!" />
<p>This is a placeholder for more of the article's content...</p>
<footer>
<p class="author">Giovanni DiFeterici</p>
</footer>
</article>
HTML also provides the ability to assign attributes (see above: “class”, “src”, “alt”, etc.) that provide even more semantic information about the content. Some attributes are optional and some are not.
In the above code snippet you see a few HTML tags with attributes. The “img” tag, which is used to show an image on the web. The “img” tag has a “src” attribute which designates the path to the source file of the image. It also has an “alt” tag which holds the text that is displayed if the browser can’t find the image.
HTML is a simple but powerful language and you will be writing it a lot.
What is CSS and what is it used for?
If HTML is the language we use to semantically tag content on the web, CSS (Cascading Style Sheets) is the language that defines how that content looks. If you want your titles to be green, CSS allows you to write one simple rule to make that visual change
<!--HTML-->
<h1>This is the title you want to be green.</h1>
....
<!--CSS-->
h1{
color: green;
}
In principle, CSS is a very simple language that uses key/value pairs to specify the value of certain visual properties like, color, size, and location. In practice, CSS takes a lot of knowledge and skill to ensure that it functions properly in all browsers and environments.
You will write a lot of this language as well.
What is JavaScript and what is it used for?
So, if HTML defines what content means and CSS defines how content looks, then JavaScript dictates how content will behave.
JavaScript is a programming language that exists in browsers and has been tuned to intercept events, act upon content, and communicate effectively with the server.
JavaScript is considerably more complex than HTML or CSS and requires a much deeper knowledge of specific programming concepts to achieve specific effects, but it is an extremely powerful and expressive language and you should spend a fair amount of time familiarizing yourself with its pros and cons.
Writing JavaScript is a profession in and of itself, so I won’t provide a code snippet here (it would take too much time). That being said, we will discuss JavaScript at length and I will eventually link to all of our JavaScript examples on this page.
What is a cross-platform website?
Cross-platform websites are those that function properly and display properly on all devices and operating systems. Many techniques and best practices are employed to achieve platform independence.
What is accessibility and what does it matter?
Accessible websites and web apps are those that take into account the needs of all users. Some users are blind, disabled, accessing your content from a dated device, etc. This means that they are accessing your content or functionality with a host of problems that you might not see from the the “typical” use. One common accessibility problem that many people face is slow connection speeds.
Part of a designer’s job is to consider the needs of these people and find ways of enabling them to access the information that they need and the functionality that they want. They shouldn’t have a subpar experience because a web designer didn’t consider their needs.
We will look at a number of techniques and best practices to ensure the best possible experience for all users.