RSS is a family of standardized formats for web content that allow you to check your favorite websites for new material all at once, without having to go to each site individually. Everything is brought directly to your feed reader when it’s made available by the publishers.

How does it work?

RSS is essentially just an extension of eXtensible Markup Language (XML), a set of standards that allow for easy organization of content for consumption by machines. It details the relationships between the information so that it can be translated by the computer in a way that makes sense to human readers. A simple RSS document might look like the following:

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
	
	<title>Title of the feed</title>
	<link>http://danielsellergren.com/rss</link>
	<description>Description of the feed's content</description>

	
	<pubDate>Mar, 21 2010 00:16:45 EST</pubDate>
	<category>Web development</category>
	<language>en-us</language>
	<copyright> © 2011 Daniel Sellergren</copyright>

	
	<item>
		<title>Title of the first article</title>
		<description>Description of first article</description>
		<link>http://danielsellergren.com/first-article</link>
		<pubDate>Mar, 21 2010 00:16:45 EST</pubDate>
	</item>

	
	<item>
		<title>Title of the second article</title>
		<description>Description of second article</description>
		<link>http://danielsellergren.com/second-article</link>
		<pubDate>Mar, 11 2010 00:08:17 EST</pubDate>
	</item>
</channel>
</rss>

One of the major advantages to RSS/XML markup is that it mimics the hierarchical way in which humans often organize information. Outer <xml> and <rss> tags tell what type of document is to follow, and the <channel> tags enclose the content itself. Inside there are also tags for <title>, <description>, and <link> which are required attributes for describing the overall content of the feed itself. There are also many optional fields that you can include to enhance your feed by giving information about publication date and category. For a full list of <channel> tags you can click here.

Within the <channel> tags there can be numerous <item> tags that denote individual articles within the feed. Each one has a <title>, <description>, and <link> just like the feed except tailored to relate to a specific article. These also accept many optional fields that can allow the reader to have more detailed information.

Using a reader

There are many options available for reading RSS feeds, including some that you may already have access to. For example, most of the major web browsers such as Firefox, Safari, and Internet Explorer have built in RSS readers that you can use without even opening another application. Chrome is notoriously missing its own built in reader, most likely due to the popularity of the Google Reader, their web-based RSS client.

Adding a feed to your reader is generally as simple as clicking the link provided on a website. If you use your browser’s built in reader, it will add it automatically to your list. Some sites will also provide a set of links that will automatically add their feed to one of your web-based readers such as Google’s. If all else fails, you can simply copy and paste a link to the site’s RSS feed into your preferred reader and you’re good to go!

RSS for your site

Adding an RSS feed for your site is generally simple if you use a Content Management System (CMS) like WordPress or Joomla! Many have built in RSS capabilities, but any major CMS that doesn’t will certainly have an appropriate plugin that updates feed when you update your site. For WordPress automatically maintains an RSS feed for you in several different versions which you can link to by using the following commands:

<?php

	/* RDF/RSS 1.0 feed */
	bloginfo('rdf_url');
	/* RSS 0.92 feed */
	bloginfo('rss_url');
	/* RSS 2.0 feed */
	bloginfo('rss2_url');
	/* Atom feed */
	bloginfo('atom_url');

?>

If you are not using a CMS, you’re going to have to either write code into your application that generates the feed for you, or update it manually each time you make an update to your site. This can be very time consuming, which is why many sites prefer to use an established CMS if they are regularly producing a large amount of content.

Further reading

For more information please visit the following resources.

• Wikipedia Article on RSS
• What is RSS?
• W3Schools RSS Tutorial
• Make RSS Feeds
• RSS 2.0 at Harvard Law
• W3 RSS Feed Standard
• WordPress RSS URLs

Getting started is easy — you just need to download the latest version of the library, place it in your main or /js directory, put a class of “no-js” in your <html> tag and link to the file address in your <head>.

<html class="no-js">
<head>
	<title>Using the Modernizr library</title>
	<script type="text/javascript" src="js/modernizr-1.7.min.js"></script>
</head>
<body>
</body>
</html>

The file itself is only 3.7 kilobytes and the script runs automatically without any sort of initialize() function for you to run. After the script is loaded, you can test for various support by checking the properties of the global Modernizr object.

if (Modernizr.canvas) {
	// We can play with the <canvas>!
} else {
	// Sad time! No <canvas>!
}

Additionally, you can use different CSS depending on whether there is support of an element by using the new <html> classes that Modernizr adds. A full list of the Javascript properties and CSS classes is available in the Modernizr documentation.

/* Happy background for canvas support */
.canvas {
	background: yellow;
}
/* Sad background for no canvas support */
.no-canvas {
	background:
}

The last thing that Modernizr takes care of for you is creating dummies for the new HTML5 Semantic Elements. This allows less supportive browsers to recognize (and let you style) elements like <header>, <footer>, <nav>, <section>, and <article>. This keeps Internet Explorer from inserting unrecognized elements into the DOM as empty nodes with no children. You can now use the newest HTML5 elements in your markup, and style them in your stylesheet, without having to worry about whether they are supported.

That’s all there is to it, so get started using HTML5 today!

A rather scathing blog post today by Paul Rouget of Mozilla makes a valid point that despite extensive promises from Microsoft, Internet Explorer 9 is not only late but still lacking far behind other modern browsers. As of now it does not support HTML5′s application caching and web forms, CSS3′s text-shadow, gradients, or transitions, and a whole host of other standards that are gaining traction with Mozilla and Webkit.

Take a look at the articles and let me know what you think!

A subtle beige background and an embedded typeface from the Google Font Directory give detail for the modern browser, while Ajax-powered navigation gives a snappy unity to the small site.

Box Shadows

Box Shadows are an easy way to add depth to your design but up until now they’ve required the use of images, extra <div>s, and the z-index property. Now you can add your own shadows to any block element with just a few lines of CSS.

#anyBlock {
	/* Box shadow */
	-moz-box-shadow: 2px 2px 3px 1px #AAA;
	-webkit-box-shadow: 2px 2px 3px 1px #AAA;
	box-shadow: 2px 2px 3px 1px #AAA;
}

The pixel values represent horizontal offeset (positive values move shadow right), vertical offset (positive values move shadow down), blur radius, and spread distance. The blur radius and spread distance values can be omitted if so desired. The final value dictates the color of the shadow in either hexadecimal #AAAAAA format or rgb(170,170,170) format. Some browsers also support the rgba(170,170,170,0.5) format which adds an opacity value. Our example box looks like this so far:

Rounded Corners

Another design element that has become very popular in the “Web 2.0” design generation is rounding the corners on block elements to give a smoother, cooler feel. This can be done with CSS3 using the border-radius attribute either to individual corners or all at once.

#anyBlock {
	/* All corners */
	-moz-border-radius: 15%;
	border-radius: 15%;
}

#anyBlock {
	/* Top left corner */
	-moz-border-radius-topleft: 50px 100px;
	border-top-left-radius: 50px 100px;
	/* Top right corner */
	-moz-border-radius-topright: 100px 50px;
	border-top-right-radius: 100px 50px;
	/* Bottom right corner */
	-moz-border-radius-bottomright: 50px 100px;
	border-bottom-right-radius: 50px 100px;
	/* Bottom left corner */
	-moz-border-radius-bottomleft: 100px;
	border-bottom-left-radius: 50px;
}

Notice that you still have to account for the Mozilla prefix -moz-, but for the most part it is still very simple. The pixel and percentage values determine how far away from the corner the rounding will begin. When two values are given, the first represents horizontal offset and the second represents vertical offset. The is also a shorthand method for specifying all four corners at once:

#anyBlock {
	/* Shorthand for all corners */
	border-radius: 50px 100px 50px 100px / 100px 50px 100px 50px;
}

The first four values describe the horizontal offset for the top-left, top-right, bottom-right, and bottom-left corners. The four values after the / describe the vertical offset. By varying the horizontal and vertical offsets on each corner you can come up with some really unique shapes like this:

Gradients

One last design element that is already being implemented in modern browsers is the color gradient. It is another option that allows you to add depth and detail to your websites without creating inflexible background images. Once again, Webkit browsers (Chrome & Safari) and Mozilla browsers (Firefox) both support CSS3 gradients but unfortunately not under the same standards.

#anyBlock {
	/* Non-CSS3 browsers */
	background: #EEEEEE;
	/* Chrome/Safari */
	background: -webkit-gradient(linear, 0 0, 0 100%,
                             from(#EEEEEE), to(#AAAAAA));
	/* Firefox */
	background: -moz-linear-gradient(top, #EEEEEE, #AAAAAA);
}

With the Webkit gradient we are defining five parameters: type of gradient (linear), coordinates (x, y) of starting position, coordinates (x, y) of ending position, starting color, and ending color. The Mozilla gradient defines the type of gradient -linear- within the vendor extension, then requires a starting position (top, bottom, or -Xdeg), a starting color, and an ending color. You can add multiple colors by using color-stops:

#anyBlock {
	/* Non-CSS3 browsers */
	background: #EEEEEE;
	/* Chrome/Safari */
	background: -webkit-gradient(linear, 0 0, 0 100%,
        from(#EEEEEE), color-stop(#CCCCCC), color-stop(#AAAAAA));
	/* Firefox */
	background: -moz-linear-gradient(top, #EEEEEE,
        #CCCCCC 50%, #DDDDDD 75%, #EEEEEE 100%);
}

Finished Product

So let’s take a look at one final example to see how everything works together.

#anyBlock {
	/* Box shadow */
	-moz-box-shadow: 2px 2px 3px 1px #AAA;
	-webkit-box-shadow: 2px 2px 3px 1px #AAA;
	box-shadow: 2px 2px 3px 1px #AAA;
	/* Rounded corners */
	-moz-border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
	border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
	/* Background gradient */
	background: #FFFFFF;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#FF0000), to(#AA0000));
	background: -moz-linear-gradient(top, #FF0000, #AA0000);
}

Which gives us a pretty snazzy looking box that uses nothing but CSS3!

Rather than creating an .html file for each page with all the site architecture repeated on each page, we’re going to separate out common, reusable sections such as the header, footer, and navigation menu. We’re going to create a main file named index.php, and several subfiles named header.php, nav.php, and footer.php. Let’s take a look at index.php so we can get an overview of what we’re doing.

<!doctype html>
<html>
<head>
	<title>A basic site architecture</title>
	<!-- Include all CSS, JS, and meta information -->
</head>
<body>
	<?php require("header.php"); ?>
	<?php require("nav.php"); ?>

	<div id="main">
		<!-- Main content goes here -->
	</div>

	<?php require("footer.php"); ?>
</body>
</html>

The parts of our site that are common to all pages have been separated out so that they can be reused rather than copied. In lines 8, 9, and 15 we load three files containing the code for our header (logo and other graphics), navigation menu, and footer. When you view the index.php file in a web browser it will assemble the four files into one, and will appear this way if you choose to view the page source. Take a look at the final assembled index file:

<!doctype html>
<html>
<head>
	<title>A basic site architecture</title>
	<!-- Include all CSS, JS, and meta information -->
</head>
<body>
	<!-- header.php -->
	<div id="header">
		<img src="image/logo.gif" alt="Logo" height="50" width="200" />
		<h2>A place to fly with turtles!</h2>
	</div>
	<!-- nav.php -->
	<ul id="nav">
		<li><a href="about/index.php">About</a></li>
		<li><a href="blog/index.php">Blog</a></li>
		<li><a href="contact/index.php">Contact</a></li>
	</ul>

	<div id="main">
		<!-- Main content goes here -->
	</div>

	<!-- footer.php -->
	<div id="footer"><p>Copyright 2010</p></div>
</body>
</html>

Looks just like a normal .html file, but it was created from smaller files at the moment we requested it from the server! You can use this simple method to abstract out just about anything from your pages, including the <head> information if you so choose. Other pages can be created using the index.php file as a template (and replacing the content in the main div) or by using an Ajax request to dynamically load new files into the main div. If you choose to create the files individually, I recommend creating a new subdirectory and index.php for each subpage. This with allow you to link people directly to subpages (http://www.yourdomain.com/about) without having to explain what a .php file is.

Remember that the goal here is to reduce redundancy and allow for maximum flexibility. That being said, you must decide for yourself which sections of your site are best to separate out and which you are going to want to customize for each page. Reusing the same meta information for every page on your site may save you some time, but you lose the ability to adjust your keywords and page titles to optimize your search engine placement.

Modern browsers are beginning to accept a variety of ways to import outside fonts, but the easiest and most universal way at this time is Google WebFonts. By going to the directory and selecting the font you’d like you use, Google will give you a link to a remote stylesheet (hosted by their servers), and then all you have to do is use it. Let’s take a look:

<!doctype html>
<html>
<head>
	<title>Checking out Google WebFonts</title>
	<link href="http://fonts.googleapis.com/css?family=Droid+Sans"
		rel="stylesheet" type="text/css" />
	<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

	<h1>Check out this headline!</h1>
	<p>This will just be normal text</p>

</body>
</html>

You can see that in the <head> we have loaded two external stylesheets. The first is from the Google Font API which will have the browser load and initialize the use of your desired font, and the second is your own stylesheet for the site. Inside your stylesheet all you have to add is:

h1 {
	font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
}

That’s it! Anytime you want to use this font all you have to do is change the font-family declaration. You’ll notice that I’ve included several fallback fonts for older browsers that don’t support WebFonts. It’s always important to degrade gracefully for your older users, although it is becoming less of a concern as even Microsoft is starting to catch up with the technology. Remember, because you’re using actual text instead of an image you can apply all the CSS you want to customize your look. Try some other neat CSS3 like text-shadow for a really modern look!

h1 {
	font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
	font-size: 3em;
	letter-spacing: -1px;
	-moz-text-shadow: 2px 2px 3px #CCC;
	-webkit-text-shadow: 2px 2px 3px #CCC;
	text-shadow: 2px 2px 3px #CCC;
}

Head over to the Google Font Directory to try it out yourself!

Using a slightly modified version of the beautiful jQuery photo gallery plugin Galleria gives a smooth way of viewing Jon’s artwork.

We created a customized Google Map to display some of the most prominent museums and galleries where Jon’s work can be seen in person.

I designed and coded each page by hand while receiving feedback from the studio. Take a look at the finished product and tell me what you think!

By creating a central place for news, cleanup dates, past photos, and live Twitter updates they are able to reach more people with less redundant effort.

Getting Started

HTML is made entirely of little bits of code called tags. Each set of tags gives context to the information contained between them. For example, an HTML page is contained within the opening tag <html> and the closing tag </html>. Within those tags are other tags that describe and contain smaller sections of the page until each desired element has been created. Placing tags within tags is called nesting. All sets of tags must be closed in the order they are opened, which means that a nested tag must be closed before its parent (the outside set of tags) is closed.

<html>
<head>
	... Header information goes here ...
</head>
<body>
	... The content of the page ...
</body>
</html>

With these rules in mind we can start to build ourselves a web page.

Headers

As we learned before, the entire HTML document is contained within the <html> and </html> tags. Well, almost. Before we can get started we need to give the web browser a little information that it will use to determine what it is trying to display. You can instruct the browser to display the page as HTML by including <!doctype html> in the very first line of the document. In the past this doctype declaration was much longer and more complicated but with the coming of HTML5 it has been simplified to just two words. Note that although this looks like an HTML tag it is just an instruction for the web browser and therefore does not have to be closed.

Now that the doctype is out of the way, let’s get into the rest of the header. Anything between the <head> and </head> tags will describe information about the document as a whole. Take a look at the following code:

<!doctype html>
<html>
<head>
	<title>Top of the browser!</title>
	<meta name="Keywords" content="html, porkchops, web" />
	<meta name="Description" content="Introduction to HTML" />
	<link />
	<script></script>
</head>
<body>
	... We will cover this area next ...
</body>
</html>

Within the <head> tags you’ll notice four new tags that describe various information about the document itself. The <title> tags contain the text, generally the name of the site and information about the current page, that appears at the very top of every browser window. It will also be used by search engines to help list your site (if you want them to) and by users who choose to bookmark your page. The <meta> tags contain even more information that search engines can use to categorize your content and guide people to your site. An important part of SEO, or Search Engine Optimization, is researching and choosing the right words to get your page listed by the major search engines.

The <link> tag refers to an external stylesheet, something we will cover in the next tutorial. It links this HTML file to a separate CSS file that determines the style and design of the page. The HTML is simply for the architecture and content of the page. Similarly the <script> tag refers to a separate JavaScript file that contains any functions or plugins that the page may want to use. Do not concern yourself too much with these now as they will be explained in the CSS and JavaScript tutorials.

Text & Links

Now that we’ve taken care of describing our page, it’s time to populate it with real content. All of the text, images, and data for display go between the <body> tags and are surrounded by their own specific tags. Take a look at the following code:

<body>
	<h1>Lizards for sale!</h1>
	<h2>Limited time only</h2>
	<p>I am selling a dozen green and purple iguanas that I found
	near my uncle's house.  They are going for fifty dollars each but I
	am willing to barter.  <em>Serious offers only.</em>
	<strong>You must be able to drive to Florida to pick up!</strong>
	For more information about iguanas please
	<a href="http://en.wikipedia.org/wiki/Iguanidae">click here</a>.</p>
</body>

Now take a look at how this looks when displayed in a web browser with no additional CSS. Can you tell which tags contain each different type of text?

Let’s quickly break down each of these tags and what they are used for. The <h1> tags and the <h2> tags are used for headlines and sub–headlines. By default they may be larger or have a thicker font–weight than normal text, but they can be completely customized in your CSS file. Headlines can run from <h1> to <h6> with each having its own distinct style if so desired.

The <p> tags wrap around any paragraph of normal text. Using <p> automatically starts a new line with some normal sized text. Within a paragraph you can alter any segment of text in several different ways. The <em> tag stands for “emphasis” which defaults to the same thing as italics in most browsers. The <strong> tag is another way to stress the importance of a specific string of text and it defaults to bold in most browsers. Either of these modifier tags can have their effects altered through CSS.

The <a> tag is probably the most important aspect of the early days of the internet. It is the tag that creates a hyperlink (usually just referred to as a link) that allows for the association of two related pages. There are often dozens or hundreds of links on every webpage, with some linking internally to other parts of a site, and some linking to any site on the internet. This interconnected nature is the most fundamental aspect of what has evolved online.

Visual elements

Lists

Now that we’ve covered how to display normal text in paragraphs and headlines we can delve deeper into various methods of displaying alternate types of information. You can undoubtably seen different types of lists in word processing software and all over the web. There are three basic types of lists in HTML which use the tags <ul>, <ol>, and <dl>. Let’s take a look at them in action:

<body>
	<ul>
		<li>Almonds</li>
		<li>Skittles</li>
		<li>Tuna</li>
	</ul>
	<ol>
		<li>Slay dragon</li>
		&li;li>???</li>
		<li value="4">Profit</li>
	</ol>
	<dl>
		<dt>Muffins: </dt>
		<dd>Delicious oven yumyums</dd>
		<dt>Sniffum: </dt>
		<dd>What you should do to muffins</dd>
	</dl>
</body>

And now let’s see how these are displayed by default:

The first type of list is the unordered list which uses the <ul> tag. Each individual list item is surrounded by <li> tags. This type of list is useful to illustrate talking points, and is quite often used as the structure for a navigation menu (don’t worry we’ll get to this later). By default each list item is given its own line and bullet. These are completely customizable, or can be removed, in the stylesheet.

The next type of list is the (you guessed it) ordered list which uses the <ol> tag. It is almost the same as the unordered list, but uses an increasing number instead of a bullet. Each list item will increment the number by one, unless you specify the <value> attribute. An attribute is something within a tag that modifies it. In this case we replace what would normally have been a 3 with a 4 by setting a <value> attribute.

The final type is the definition list which contains separate tags <dt> and <dd> for definition term and definition description, respectively. This allows you to specify lists that have two distinct parts, usually a value and a description of that value.

Tables

Tables are useful for displaying larger amounts of data in an organized way. Much like the lists we just covered, tables are made of a parent tag called <table> within which are more specific tags that define different aspects of the data. Take a look at the code:

<body>
	<table>
		<tr>
			<th>Animal</th>
			<th># of Teacups needed</th>
		</tr>
		<tr>
			<td>Giraffe</td>
			<td>1</td>
		</tr>
		<tr>
			<td>Penguin</td>
			<td>2</td>
		</tr>
		<tr>
			<td>Octopus</td>
			<td>8</td>
		</tr>
	</table>
</body>

Which displays as:

Inside the <table> tags you’ll notice three new tags that cover different elements of the table. The <tr> tag begins a new row in the table, inside which you can have either a <th> for table header (usually describing the contents of the row or column) or a <td> for table data that contains the actual data you want to display. Note the indentation on the code that helps visualize how the final table will look but don’t focus too much on appearances. HTML is all about structure and meaning which is later styled with CSS.

Images

While initially images were too large to be transmitted quickly across the web, they are now an irreplaceable part of our online experience. There are billions of photographs and images on the internet and they allow for a level of detail and intimacy that often cannot be easily expressed in words. The most common way for an image to be displayed on a web page is by using the <img> tag.

<body>
	<p>Here is an image I found of a turtle: </p>
	<img src="wiki_turtle.png" alt="Turtle" height="470" width="571" />
</body>

See it in action:

Make sure to notice a few things about the <img> tag. It contains several attributes such as alt that provides alternate text if the image cannot be displayed, and height and weight attributes that make sure your layout displays correctly even if the image is not found. Because the <img> cannot enclose anything, it is self closing with a /> after the attributes have been set. Note that it is very common to surround the <img> tag with the <a> tag in order to turn the image into a clickable link.

Layout

The last visual elements we will discuss are perhaps the most important, and can be a little abstract for newcomers so pay attention. Web layout—in other words how individual elements are arranged horizontally and vertically on the page—used to be done with the <table> tag. This worked fine in the early days of the visual web, but over the last decade this inflexible practice has been replaced by the <div> element. A <div> defines a block of space that contains information related to one another. It can contain a logo, a navigation menu, a blog post, or a section of a page. Anything that you may want to position or style as one cohesive unit goes in a <div>. In the CSS tutorial we will cover the box model and how the visual layout is created, but for now just appreciate the idea of separating related content into its own box.

The <span> tag is conceptually similar to the <div> except for it relates specifically to chunks of text. If you want to mark a particular segment of text as being of a type you may want to use again, such as the highlighted text you see in this tutorial, then you should surround the text with <span> tags.

Either of these tags can be given an id and class attribute that will identify it and allow you to control its style in the stylesheet.

Looking ahead

Validation

Now that you know the basics of HTML, you should always be following the simple rules that govern how it works. Make sure you close every tag you open, and in the correct order. Make sure quotation marks and parentheses always come in pairs. Make sure that all required attributes are in place. These simple syntactical requirements can become rather cumbersome to keep up with and difficult to double-check when pages become larger, so luckily there are simple tools that allow you to check your pages against the rulebook. This is called validation and is an important final step before releasing your page to the world.

The W3C Markup Validation Service is a free online program that will parse your page and tell you if you have made any errors that might affect how is is displayed in a web browser. Simply go to the site and pick one of three options: link to your page, upload your .html file, or copy and paste the code itself. There are also several plugins available for popular browsers like FireFox and Chrome and will automatically validate any site you visit. Having valid code not only helps you make sure that your site displays correctly, but it also makes your work significantly more professional in appearance.

Deprecated tags

There are many tags and attributes that you may come across when viewing older source code. These tags are largely outdated, and will become deprecated or no longer valid in forthcoming versions of the HTML standard. Here is a (very) partial list that you may come across:

• <center> — replaced by CSS: text-align property
• <font> — replaced by CSS: font-family property
• <b> — replaced by <strong> and CSS: font-weight property
• <i> — replaced by <em> and CSS: font-style property
• <u> — replaced by CSS: text-decoration property
• <strike> — replaced by CSS: text-decoration property
• align attribute — replaced by CSS: text-align property
• bgcolor attribute — replaced by CSS: background-color property
• color attribute — replaced by CSS: color property

HTML5

The web is currently in transition to the next version of the HTML standard, which is HTML5. XHTML2 has been incorporated into the new HTML standard, and there are many significant changes coming. Although the official implementation won’t be adopted for several years, most modern browsers are already supporting many of the new features and tags. The biggest updates are coming to layout, audio/video, graphics, webforms, and user interface. I will be posting a full HTML5 tutorial in the coming weeks, but until then there is a great source of information available at Dive into HTML5.