Random Topics and Concepts

1. Random Topics and Concepts

2. Random Things for Today • Search Engines & SEO (Search Engine Optimization) • Specialized StyleSheets • JQuery for easier JavaScript • XML • AJAX

3. Search Engines • Search Engines operate by identifying pages that have search terms that match someone’s interests • KEYWORDS are these search terms. • KEYWORDS are one word or a group of words • Search Engines consider a few things including: • Your page CONTENT (the HTML) • Other people’s links to your page (A tags) • Keywords • Search Engines offer two types of traffic: • Organic (based on indexed content) = free • PPC (pay per click) = not free

4. Meta Tags • Meta Tags apply “behind the scenes” descriptors to your pages (not the site…the page!) • These exist in the HEAD tags of your HTML document and are NOT seen by the users. • Each META tag requires a NAME attribute and a CONTENT attribute. <meta name="description" content="Description you write." /> <meta name="keywords" content="keyword, another keyword, yet another keyword, descriptive keyword" /> <meta name="robots" content="noindex, nofollow, noarchive" />

5. SEO Tips • The CONTENT (actual words seen by users) should include your KEYWORDS used. • The predefined TAGS in HTML should be used to put emphasis where needed • Heading tags (H1, H2, H3, etc.), STRONG, EM, etc. • If possible, your DOMAIN NAME (whatever.com) should contain a keyword you’d like to have • Your file names and folder names should use keywords as well (use hyphens to separate)

6. SEO Tips • Search Engines ONLY see TEXT • No Images, Flash Animations, Movies, etc. • You can see how it looks by using a text browser (you can use the Google cache) • When someone links to your pages, request that the CLICKABLE TEXT should use your keywords • They CAN see hidden text with CSS of display: none; • GOOGLE Analytics can help you analyze your keywords and site traffic.

7. Specialized StyleSheets • By default, a stylesheet that is linked in the HEAD of an HTML document is used for ALL devices. • We can change this with the MEDIA attribute of the LINK tag. <link rel="stylesheet" type="text/css"href="site.css" media="screen"/> <link rel="stylesheet" type="text/css" href="site.css" media="print" /> <link rel="stylesheet" type="text/css" href="site.css" media="handheld" />

8. JQuery • JQuery is a FRAMEWORK built on JavaScript. • Basically that means another language developed based on an existing language. • If you include the JQuery JavaScript file then you can use the JQuery Framework. • JQuery is available on Google Code: <script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

9. JQuery Basics • JQuery has a HUGE site that describes the framework and what you can do with it. • With a intermediate understanding of JavaScript and programming, you can probably use JQuery. • Some Basics: • You select by using the dollar symbol and the CSS selector you’re interested in quotes: $('#sidebar') • Then use the DOT operator to perform an action: $('#sidebar').hide(); $('#sidebar').show(); $('#sidebar').fade('slow');