Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
CA 272 - Professional Web Site Development Class 25 - Microformats, Accessibility & Search Engine Optimization 1 Print Style Sheet Review Web Developer extension - good tool for viewing print styles Questions? Applying print styles Overriding screen styles Content order Hiding content 2 Intro to Microformats Common patterns of content that do not have HTML tags: Contact info Calendar/event info Ratings & reviews Relationships between people Resumes Content labeling (e.g., social bookmarking, tagging) 3 Microformats Humans can recognize contact info, events, ratings, etc. But, computers cannot Microformats provide standard syntax for marking up this data using existing HTML tags Mainly use divs, spans for elements, with classes 4 hCard Based on exising vCard format - standard for exchanging contact info hCard data can be harvested from Web page and converted to vCard data for import into Outlook and other address books Online tools for creating hCards Also microformats DW extension that helps you create hCard content 5 hCalendar hCalendar format is based on iCalendar format - standard for calendar data hCalendar can be converted into iCalendar format which can be imported into Outlook and other calendar apps Online tools and DW extension for hCalendar 6 Tag-based Microformats rel attribute of <a> specifies relationship of linked doc to current page rev attribute specifies relationship of current page to linked doc rel=“license” - Creative Commons licensing rel=“tag” - link to ‘tag-space’ for tagging content rel=“nofollow” - avoid giving PageRank VoteLinks: rev=“vote-for”, “vote-against”, “voteabstain” 7 Relationship Microformats XFN (XHMTL Friends Network) rel= Child Friend Acquaintance Contact Met Co-worker Colleague Co-resident Neighbor Parent Sibling Spouse Kin Muse Crush Date Sweetheart Me 8 ‘Operator’ Extension Firefox extension for leveraging microformats: https://addons.mozilla.org/en-US/firefox/addon/4106 Lets you view and export microformat data on page Can map addresses in Google maps Can export vCards (from hCard data) Etc. 9 Microformats Exercise Open hCard creator: http://microformats.org/code/hcard/creator Type in your info (or dummy info) Copy code Paste into new HTML document Examine code How could we format this with CSS? You need to include microformat in final project 10 Accessibility Accessibility: making your Web content readable and understandable to the widest possible audience, including: those with ‘disabilities’ or technical requirements outside the mainstream – such as older computers, screen readers, zoomed displays, etc. U.S. government code Section 508 mandates that you must make your site accessible if doing business with government 11 Search Engine Optimization Search engine optimization (SEO): making your Web site appear and rank highly in search engines for search terms that are relevant to your content interestingly, many accessibility tips also help with SEO Searchbot is a special needs user — e.g., searchbot cannot ‘see’ graphics 12 Importance of Web Standards to Accessibility and SEO Foundation of Accessibility and SEO is well-formed, semantic content separate from presentation Presentation is the main issue - different users have different ways of perceiving content (e.g., blind must hear your content) Presentation should not get in the way of content Content issues such as clear writing and serving nonnative speakers can be important, but not addressed here 13 Semantic Markup Semantic markup – well-structured content with headers, paragraphs, lists, etc. Logical content order – for many users, content will appear (or be read) in source order Imagine that user cannot see your CSS or graphics (Google also does not see) Do not use graphics for important text Image replacement 14 Accessible Navigation Use list-based navigation with real (or imagereplaced) text for nav items (as we have learned in class) These work anywhere Google can follow links to other pages in your site and index them Do not use image-based JavaScript rollovers for navigation Also suggest not using Flash for navigation 15 ‘Skip Navigation’ Links Provide ‘skip navigation’ links for users with screen readers (also useful for text-based browsers) Requires <a> link at top of page to anchor at top of main content: <a href=“#main” id=“skipnav”>Skip navigation</a> … [navigation] … <a name=“main” id=“main”></a> … [main content] Hide ‘skip links’ with CSS 16 Exercise: Skip Navigation Open your float layout and add skip navigation links: Insert ‘main’ anchor before text in #mainContent Insert link to #main at top of page: “Skip navigation”; give id ‘skipnav’ Create CSS rule to hide link and anchor from visual browsers: Problem with display: none; Try position: absolute; left: -5000px; 17 Review: CSS Image Replacement When we want to use a graphic to display text (e.g., Coca-Cola logo), we should use ‘image replacement’ Insert real text: <h1 id=“logo”>Coca-Cola</h1> Replace with background image: h1#logo { background: url(coke-logo.gif) 0 0 norepeat; width: 100px; height: 50px; text-indent: 5000px; } Remember to be careful using background images for important text - will not print 18 Other Accessibility Tips Keep page size (kB) small Use alt attribute on images - display or are read by alternative browsers Use relative font sizes (ems) so that users can enlarge - IE cannot scale fonts with px sizes body { font-size: 62.5%; } /* sets to 10px */ p { font-size: 1.2em; } /* sets to 12px */ 19 Other Accessibility Tips Use DOCTYPE so browsers don’t have to guess Use lang attribute of <html> (probably “en” for English) Use sufficient color contrast and visual clues E.g., should change two aspects of links: color and underlining Don’t open new windows - harder for some users to close them and they can’t use back-button functionality 20 Other Accessibility Tips Label form elements, use table headers, etc. Use title attribute for elements that need more explanation (e.g., ambiguous links) Define acronyms and abbreviations: <acronym title=“Extensible Hypertext Markup Language”>XHTML</acronym> Caption audio/video Provide a site map Provide an accessibility statement 21 Access keys Can provide keyboard shortcuts for commonly followed links - particularly: Homepage - 1 Skip to main content - 2 Feedback/contact site author - 9 Syntax: <a href=“index.html” accesskey=“1”> User types ALT-1 to follow link Don’t overuse - can conflict with systemdefined or browser-defined shortcuts 22 Metadata: Page Titles Meaningful page titles are important for accessibility and search engines Google displays ~ 65 characters Use different page titles for EACH page Instead of ‘Welcome to Widget World’ … Widget World - Widget Parts for Commercial and Industrial Grommets’ … or … Widget World | Industrial - Grommet and Gasket Applications’ (60 chars with spaces) 23 Metadata: Keywords Keywords used to be considered very important Laundry list of relevant key phrases for page/site: widgets, grommets, gaskets, commercial parts … Most search engines ignore now Your Web page content should contain keywords and phrases Keyword density 24 Metadata: Page Description Description is important for search engines Google uses as entry for search listing Should be no more than 250 chars Plain English Work in keywords/phrases Ideally, should be different for each page Author - good idea to include 25 Exercise: Insert Metadata In Dreamweaver: Insert > HTML > Head Tags > Keywords Description Meta - for other metadata, e.g., author: Attribute: Name Value: author Content: [name of author] Syntax: <meta name=“” content=“” /> 26 Search Indexes vs. Directories Search index: giant database of Web page that uses ‘spiders’ / ‘robots’ (searchbots) to automatically comb Web and store Web page info (using algorithms) Info from Web pages Google, Yahoo!, MSN Search directory: manually categorized list of Web pages Info about Web pages Open Directory Project, Yahoo! Directory (pay for inclusion) 27 Popular Search Engines* Google - 49.2% Yahoo - 23.8% MSN - 9.6% AOL - 6.3% Ask - 2.6% Others - 8.5% * as of July 2006 Source: NetRatings for SearchEngineWatch.com 28 Important Search Providers Google, Yahoo!, MSN, Ask, Open Directory Project ODP - volunteer-run, feeds data to search engines Other search engines draw data from other indexes (e.g., AOL uses Google data) 29 Search Ranking Criteria Ultimately: relevance of content and user’s reliance on your information Does your content contain key phrases that users are searching? Do other sites link to your content Keyword density PageRank (Google) Many other criteria (e.g., how long your site has been around) 30 Getting Your Site Listed Search engines will typically find your site eventually Can submit your site to index E.g., Google: http://www.google.com/addurl/ Create a Google sitemap Don’t get banned Advertise: Google AdWords, Yahoo Search Marketing Get others to link to your site Keep generating good content; rework existing content to improve keyword density, etc. Be patient 31 Google Webmaster Tools Vital tool if you care about search engine ranking (and Google in particular) See how Google sees your site: Site performance: Crawl info - last indexed, any problems Robots.txt validation (instructions for searchbot) Top queries and ranking for various search terms Index inclusion Upload sitemap (XML format) Specify preferred domain, other options 32 Google Analytics Great, free tool for tracking visitors to your site How to sign up: Go to http://www.google.com/analytics/index.html Click ‘Sign Up Now’ Create a Google account (if you need to) Gmail users already have Google account Follow directions for creating Google Analytics account Add Web Site Profile (site to be tracked) Will need to add special <script> before closing </body> tag on EVERY page to be tracked Confirm you have added code Google will begin tracking in few minutes after confirming 33 Homework Create print style sheet for your float layout Work on your final project: Make sure you can add hCard microformat … and “skip navigation” links Know how to add metadata (description, keywords, author) Sign up for Google account (if you don’t have one already) You need to sign up for Webmaster tools and Google Analytics for your final project site 34