The Book of CSS3 NEW 2nd Edition

Just got a copy of Peter Gasston's new 2nd edition of The Book of CSS3! There is detailed information and examples of CSS3 properties including transformations, flexible box layout, grid layout, and more! It's a great book to have on hand for reference, too!

HTML5 in W3C Proposed Recommendation Status

HTML5 has been moved from W3C Candidate Recommendation Status to W3C Proposed Recommendation Status — effective September 16, 2014!

Everything You Need to Know About the Color Blue

Check out the Coolness of Blue in Web Design infographic to find out what types of websites use the color blue, which brands use blue, how different cultures perceive the color blue, and more!

Free Stock Image Resources

As a web design student builds a portfolio of website projects, it can be quite time-consuming to create images. TNW provides a curated list of the best free offers a list of the best free stock image resources on the Web.

New 7th Edition for Web Development and Design Foundations with HTML5

It's exciting to announce that my new book, the 7th edition of Web Development and Design Foundations with HTML5, is available at Amazon. 

Building on the textbook's successful 6th edition, the 7th edition continues to integrate HTML and CSS topics such as text configuration, color configuration, and page layout with an enhanced focus on the topics of design, accessibility, and Web standards.

 Updates for the 7th edition include:

• Expanded coverage of new HTML5 elements and attributes 
• Expanded coverage of designing for the mobile web with new sections on responsive web design, mobile web design best practices, viewport meta tag, CSS media queries, flexible images, and testing mobile display 
• Expanded coverage of CSS3 properties, including CSS3 flexible box layout 
• New sections providing an introduction to jQuery 
• Updated code samples, case studies, and web resources

The textbook companion website has a page for each chapter in the text containing the links for URLs listed in the book, information on emerging trends, additional examples, corrections, and review activities.

Comprehensive instructor materials are available for the the book from the publisher, Pearson Addison-Wesley. Instructors and faculty can access free downloads of:

• sample syllabi
• exercise solutions
• case study solutions
• PowerPoint presentations
• sample test questions
• website project activity with milestone assignments
• a group website design evaluation activity
• a group WebQuest activity

New generic Top Level Domain (gTLD) Names

It often seems like all the best .com domain names are already taken, but that won't be a problem much longer with ICANN's release of new generic Top Level Domain (gTLD) extensions. New gTLDs that were announced late 2013 and early 2014 include a wide variety of options such as .photography, .technology, .voting, .tips, and .guru. A complete list is available at http://newgtlds.icann.org/en/program-status/delegated-strings. Major domain registrars, such as GoDaddy, are offering preregistration for many new gTLDs.

Wondering about UTF-8? Check out this video....

Computerphile presents a video of Tom Scott explaining what you always wanted to know about character encoding in ASCII and UTF-8.

Handy Infographic About Responsive Web Design

This handy infographic by Dot Com Infoway highlights the shift towards mobile devices. Responsive Web Design (RWD) techniques provide web designers a way to develop a single website that displays well and is usable on multiple devices, platforms, and screen sizes.



Source: Dot Com Infoway – Software and Mobile Application Development Company

Four New gTLDs Announced

The Internet Corporation for Assigned Names and Numbers (ICANN)  announced that the first four of potentially 1,400 new generic Top-Level Domains (gTLDs) have been delegated for use.

The new four gTLDs and their registries are listed below.

• شبكة  –  "web/network" in Arabic
  Registry: International Domain Registry Pty. Ltd.
• онлайн  –  "online" in Cyrillic
  Registry: CORE Association
• сайт  –  "site" in Cyrillic
  Registry: CORE Association
• 游戏 –  "game(s)" in Chinese
  Registry: Spring Fields, LLC

Expect additional new gTLDs to be made available for use over the next few years. Visit https://gtldresult.icann.org/application-result/applicationstatus for a list of gTLD applications and their status.

HTML5 Popularity Among Fortune 500 Companies

Interesting infographic — note the increased trend in use of HTML5!


HTML5 Popularity Among Fortune 500 Companies - An infographic by the team at INCORE Web Design

"Ultimate Guide" to Selecting Color Schemes

Check out the handy introduction to the use of color on web pages (including examples) at http://www.motocms.com/blog/project-news/color-combination-ultimate-guide/

Browser Tools for Testing Responsive Web Design

While the best way to test your responsive web designs is to use a variety of browsers and devices (including desktop, tablet, and smartphone), web developers often begin testing RWD by resizing the desktop browser. Browser resizing is handy but can sometimes be a little awkward. Check out the following online tools that will provide instant views of your web page in a variety of screen sizes and devices:

• Am I Responsive 
• DevicePonsive
• Responsive Test
• Screenfly 

It's fun to view your responsive website on these browser tools.  The true test, however, is to view your web pages on a variety of physical mobile devices.

New main element in HTML5.1

The HTML5 structural elements (header, nav, footer, section, article, and aside) have a long-awaited new friend: the main element. Use the main element to contain the main content of a web page. For more details about the main element, check out the following resources:

• Main element added to HTML 5.1
• W3C HTML5.1 Spec

Responsive Design Beyond the Pixel

With so many mobile devices displaying such a variety of screen resolutions the days of choosing breakpoints for responsive display based solely on pixel value are behind us.

 Ben Callahan at Sparkbox draws an analogy between the Matrix's concept of "there is no spoon" to "there is no breakpoint" — it all depends the content. Callahan also suggests using ems instead of pixels in media queries.

In a recent Smashing Magazine article, "Logical Breakpoints for Your Responsive Design", Vasilis van Gemert emphasizes that "common" screen sizes no longer exist and suggests configuring breakpoints using readabilty theory.

Here are two heuristics cited by van Gemert that can be helpful as we move from pixel-perfect breakpoints to content-influenced breakpoints:

•  “Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size.” — Robert Bringhurst  The Elements of Typographic Style
• “A column is easy to read if it’s wide enough to accommodate an average of 10 words per line.” — Josef Müller-Brockmann  Grid System in Graphic Design

Author van Gemert suggests that web designers start with a small screen layout and configure a break each time the "width of the main content grows wider than either 75 characters or 10 words".

Responsive design has moved beyond the pixel — it's all about the content!

New 2nd Edition for Basics of Web Design: HTML5 & CSS3

It's exciting to announce that my new book, the 2nd edition of Basics of Web Design: HTML5 & CSS3, is available at Amazon. 

Building on the textbook's successful first edition, we kept what you like — topics introduced in two pages, color illustrations and screen captures, lots of hands-on practice exercises, and a case study website that students build as they work through the book. We heard your suggestions to remove XHTML topics and to add another case study.  There are now two running case study websites for students to practice with. 

Comprehensive instructor materials are available for the the book from the publisher, Pearson Addison-Wesley. Instructors and faculty can access free downloads of:

• sample syllabi
• exercise solutions
• case study solutions
• PowerPoint presentations
• sample test questions
• website project activity with milestone assignments
• a group website design evaluation activity
• a group WebQuest activity

HTML5 is One Step Closer to a Standard

The W3C announced recently that HTML5 has progressed to Candidate Recommendation status. This means HTML5 is relatively stable and that web designers should feel confident using HTML5 syntax on web pages. The W3C indicated that new work and future changes will be part of the HTML5.1 specification. See http://news.cnet.com/8301-17939_109-57559512-2/w3c-buttons-down-html5-opens-up-html5.1/ for more information.

Graphic Designers: Making the Transition from Print to Web

Many experienced graphic designers are retooling and studying web design to enhance their skillsets to meet the changing expectations of potential employers in the ever-evolving field of graphic design. As I've taught web design courses for over a decade, I've noticed that students who have a background in graphic design often need to shift their expectations when designing for the Web.

I came across an interesting description of this paradigm shift while reading an article about the Evolution of CSS. Here is a summary of the article's description of the difference between print design and web design:

Designing for Print

When designing for print, the designer is in control of:

• page size
• content amount
• fonts and font size
• pixel-perfect layout
  
  

Designing for the Web

When designing for the Web, the designer must configure pages that display on many different types of devices, such as typical desktop monitors, large monitors, small netbook monitors, tablets, smartphones, etc. Also, the designer must allow for varied display conditions, including:

• screen resolutions
• aspect ratios
• font support
• viewport reszing
  
  

Expect the Unexpected

A key point in the article: "Web layout has to be flexible, adaptable, automatic, and robust. It can't fail because it's loaded in an environment that wasn't quite what the designer had in mind... because that happens all the time."

Responsive Web Design to the Rescue

Responsive web design techniques including CSS media queries, flexible images, and relative font sizing (ems and percentages) are essential tools to designing websites that display well on the multitude of varied devices that people use to access web pages. It's a complex, but exciting, time to be a web designer.

Split in Groups Developing the HTML5 Standard

The W3C is  planning to create a single, definitive standard (the snapshot) while the WHATWG’s living standard will continue to add new features and receive refinements. See more at HTML5 Splits – Snapshot or Living Standard? - 'Net Features - Website Magazine

First Impressions Matter

Your mom always told you that first impressions are important and she was right! Check out the Five Second Test (http://fivesecondtest.com) to find out more about how visitors form instant perceptions of your website design. This could also be a useful tool to help decide between multiple potential layouts or redesigns.

Summer Reading List from A List Apart

Here's the annual Summer Reading List from A List Apart:

Wondering about the IPV4 to IPV6 switchover?

For a brief introduction to the switch from IPV4 to IPV6, read Virginia DeBolt's post In Case You Didn’t Notice – the Internet is All New

The HTML5 Edition Is Here!

The new HTML5 edition of my popular textbook, Web Development and Design Foundations with HTML5 (6th edition), is available at Amazon.com. This edition focuses on how to use HTML5 and CSS3 today and while introducing new elements and techniques that will be utilized in the future.

The release of the 6th edition also marks the 10 year anniversary of the textbook — the 1st edition was published back in 2002 — with new editions about every 18 months to keep current with industry trends.

Visit the textbook's companion website at http://webdevfoundations.net for more information about the book.

Non-Breaking Space Show

Check out the new Non-Breaking Space Show — it's a podcast by web professionals and authors Christopher Schmitt and Dave McFarland. They chat with the "best and brightest on the web about what and why they do what they do."

SOPA

SOPA, the Stop Online Piracy Act, will do much more than stop pirated media on the Web — SOPA gives the government the power to block and censor websites. See http://fightforthefuture.org/pipa/ for more information on related issues.

W3C Conference Presentations Streamed Live

W3Conf: Practical Standards for Web Professionals will be held on November 15-16, 2011. There is a well-rounded line up of presentations including web standards, HTML5, CSS, and universal access. See the conference presentation schedule. What's really cool is that the presentations will be streamed live and archived at http://www.w3.org/conf/live.html.

Silk: Amazon's New Browser

Amazon recently released their new Kindle Fire, which is an Android-based 7 inch tablet WiFi device. In addition to the Kindle e-reader app, the Fire includes access to the Amazon AppStore (but not the Android Marketplace), typical utilities (like e-mail access), and a spanking new browser called Silk.

Watch the video below to find out how Amazon leverages cloud processing to speed the performance of Silk and cache pages that you are likely to request (before you even knew you wanted to read them).

Get Started with HTML5 Today!

There is a lot of buzz about HTML5 these days, which will be the successor to HTML 4 and replace XHTML. If you already use HTML 4 or XHTML to design web pages, you're probably wondering how to begin using HTML5.

Currently in draft statusMoved to Candidate Recommendation status by the W3C in late 2012, HTML5 is a superset of HTML 4, provides for the use of XHTML-like syntax (such as enclosing attributes within quotation marks, and always coding both opening and closing tags), and is intended to be backward compatible. The working draft of HTML5 is available at http://www.w3.org/TR/html5. An explanation of the differences between HTML 4 and HTML5 is located at http://www.w3.org/TR/html5-diff.

It’s possible to begin using HTML5 right away! The recent versions of popular browsers, such as Internet Explorer 9, Firefox 4(and later), Safari 5, Google Chrome, and Opera 10 already support some of the new features of HTML5. When new versions of each browser are released, you can expect increased support of HTML5. As you learn to design web pages you need to not only know what works today in current browsers, but also to get ready to use new HTML5 coding techniques. Since HTML5 is in draft status and may change, so consult http://www.w3.org/TR/html-markup for a current list of HTML5 elements.

Document Type Definition

Because multiple versions and types of HTML and XHTML exist, the W3C recommends identifying the type of markup language used in a web page document with a Document Type Definition (DTD). The DTD identifies the version of HTML contained in your document. Browsers and HTML code validators can use the information in the DTD when processing the web page. The DTD statement, commonly called a doctype statement, is placed at the top of a web page document. The DTD for HTML5 is
<!DOCTYPE html>
That’s a lot easier than the old HTML4 and XHTML DTDs!

Your First HTML5 Web Page

The syntax of HTML5 is streamlined and easier to use than HTML 4.0 and XHTML. You are free to code with upper and lowercase letters as well as optionally close container tags. However, that could lead to web pages with display problems and processing problems when you begin to add technologies such as CSS and JavaScript to the mix. So, I follow the coding conventions for HTML5:

• use lowercase letters
• place quotes around attribute values
• always code closing tags for container elements.

This rigorous coding style will help to prevent many CSS layout and JavaScript processing issues that you might otherwise encounter.

Let's get started with your first HTML5 web page! Just as with XHTML and HTML 4.0, the HTML5 doctype statement is the first line in the document. Next, the web page begins with an opening <html> tag and ends with a closing </html>tag. These tags indicate that the text between them is HTML formatted and tells the browser how to interpret the document. Use the lang attribute on the opening html tag to indicate the language of the web page content. Since our web page is in English, we’ll use lang="en". For example, <html lang="en">
You’ll continue to use head, title, and body elements as you did in earlier versions of HTML/XHTML. Something that may be new is to use the self-contained <meta> tag to indicate the character encoding, which will typically be coded as
<meta charset="utf-8">
Note that self-contained, or stand-alone tags are referred to as void elements in HTML5. Although self-contained elements are coded with an ending slash in XHTML (for example, the XHTML line break tag is coded as <br />), the HTML5 syntax for void elements is more streamlined — the HTML5 code for the line break tag is <br>.
To summarize, every HTML5 web page contains the doctype statement followed by the html, head, title, meta, and body elements. A basic HTML5 web page template is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML5 Web Page</title>
<meta charset="utf-8">
</head>
<body>
Hello World
</body>
</html>
The figure below shows the web page source code displayed in the Notepad text editor.

The figure below depicts the browser display of the web page.

More About HTML5

Now that you’ve seen an example of the syntax; now let’s delve deeper into HTML5.

Structural Elements

Take a moment and think about how you typically structure a web page layout with div elements. You may find that it’s common to use ids or classes with names such as header, nav, or footer. HTML5 has several new structural elements that render as block display specifically intended for organizing web pages:

• <header> contains the heading information for a page area section. The header element is block display and will typically contain one or more heading level elements (h1 through h6) and, optionally, the hgroup element
• <hgroup>The hgroup element groups heading level tags and is useful if the logo header area of a web page contains both the website name and a tagline
• <nav> contains a section of navigation links
• <aside> contains sidebar, note or other tangential content
• <footer> contains the footer of a section.
• <article> contains an independent entry, such as a blog posting, comment, or e-zine article
• <section> contains a “section” of a document, such as a chapter or topic. A section might contain <header>, <footer>, and other elements needed to display the content
• <figure> and <figcaption> associates a caption with an image or video

The wireframe below shows a page layout using the new header, nav, section, figure, and footer elements.

Phrase Elements

HTML5 revisits the former physical style and logical style elements – now called phrase elements. Semantic uses of common phrase elements follow:

• <b> Bold text with no particular importance
• <strong> Bold text with strong importance
• <i> Italic text with no particular emphasis
• <em> Italic text that is emphasized
• <small> Small-size text that semantically indicates small or fine print – like a legal notice

HTML5 adds new inline display elements that are intended to provide more options for semantic markup of web page content. For example, the new <mark> element configures text as “marked” or highlighted.

New Multimedia Elements

HTML 5 contains several new elements that are intended to simplify displaying multimedia in web pages.

• <video> configures embedded video.
• <audio> configures embedded audio.
• <embed> configures plug-in content
• <canvas> provides for dynamically drawing graphics and interactive games with scripting (JavaScript)
   

More New Elements

HTML 5 contains new elements for a variety of purposes, such as progress, meter, dialog, menu, and more. New HTML5 form controls are configures using new attribute values for the input element. And there's even more! See http://www.w3.org/TR/html-markup/ and explore the list of elements.

Elements Eliminated

A number of elements were listed as deprecated in HTML 4 and XHTML. Some of these deprecated elements were eliminated from HTML5, such as <big>, <center>, <frame> , <frameset>, and <noframes>.

HTML5 & Today’s Browsers

Internet Explorer 9 and current versions of Safari, Chrome, Firefox, and Opera offer good support of HTML5 structural elements. The issue is that many people still use earlier versions of browsers. There are two different approaches you can follow if you’d like to begin using HTML5 today: a conservative, straightforward approach and a progressive approach that is more involved and requires JavaScript.

Conservative Approach to Using HTML5 Today

For the best chance at compatibility, code using either HTML5 or XHTML syntax and avoid using the new HTML5 elements. Instead, use <div> tags to structure page areas and configure the new element names as class names or id names. For example, the opening div tag that contains the page footer area could be coded as
<div class="footer"> instead of using the new HTML5 <footer> tag. In this way you’ll become used to the new element names and it will be easier to update the pages to all HTML5 later on. As time goes by and older browsers are used less and less, you’ll be all set!

Progressive Approach to Using HTML5 Today

Code using new HTML5 elements and include CSS that configures older non-supporting browsers to render the HTML5 header, hgroup, figure, figcaption, footer, nav, section, article, and aside elements as block display (use display: block;). This will work well in all browsers except for Internet Explorer 8 and below. The CSS code follows:

header, hgroup, nav, footer, figure, figcaption, section, aside, article { display: block; }

So, what to do about Internet Explorer 8 and below? Remy Sharp offers a solution, called the HTML5 Shim,  to enhance the support of Internet Explorer version 8 and earlier (see http://remysharp.com/2009/01/07/html5-enabling-script). The technique uses conditional comments that are only supported by Internet Explorer and are ignored by other browsers. The conditional comments cause Internet Explorer to interpret JavaScript statements that configure it to recognize and process CSS for the new HTML5 element selectors. Remy Sharp has uploaded the script to Google’s code project and has made it available for anyone to use. Add the following code to the head section of a web page after CSS to cause Internet Explorer (versions 8 and earlier) to correctly render your HTML5 code:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 
What's the drawback to this approach? Be aware that your web page visitors using Internet Explorer (version 8 and earlier) may see a warning message and must have JavaScript enabled for this method to work.

Keep in mind that the W3C still needs to complete the process to move HTML5 from draft to recommendation status. Although new browser versions will offer increased support for HTML , not all your website visitors will install the latest version and workarounds will be likely (such as the CSS styles and script shown above). However, it’s important to be aware of HTML5—it’s the way of the future! And, you can confidently use it in a conservative manner today!

Explore the following resources to learn more about HTML5:

• W3C’s Web Developer’s Guide to HTML5
  http://dev.w3.org/html5/html-author
• W3C’s Interactive Chart of HTML 4 and HTML5 Elements
  http://dev.w3.org/html5/html-author/#comparison-of-html-4.01-and-html-5-elements
• HTML5 Doctor
  http://html5doctor.com
• HTML5 Demos
  http://html5demos.com
• HTML5 Cheat Sheet
  http://media1.smashingmagazine.com/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf

Adobe's Expressive Web

Adobe's new resource site, http://theexpressiveweb.com, showcases new HTML5 & CSS3 coding techniques, including CSS3 Animations, CSS3 Media Queries, HTML5 Canvas, Web Storage, and more! The site is organized by coding techniques, called "features" by Adobe — and provides for each feature with an overview, examples, browser support chart, detection and fallback strategies, and list of related Adobe technologies.

Expansion of TLDs

Need a change from the the old .com, .net, .biz domains? We'll look for more variety in the future. ICANN has approved the expansion of generic TLDs and will accept new TLD applications from companies/organizations to create TLDs for their brand or company names. Sound too good to be true? Well, there's a catch. With an $185,000 application fee and an annual $25,000 fee, you need deep pockets. Applications will be accepted in early 2012. Visit http://icann.org for more information.

Mobile Apps: Basics of Web Design Review

Need to review concepts from the Basics of Web Design: HTML5 & CSS3 textbook? There's an app for that!

• Android Market: Basics of Web Design Review
• iTunes App Store: Basics of Web Design Review

The app provides a mobile way for students to check their knowledge of the concepts and topics in the book; featuring a review quiz for each chapter with 10 randomly chosen questions. Students can practice and review anywhere with this handy app.

Trial Version of Dreamweaver CS5

With Adobe's announcement about CS5.5 it's become temporarily difficult to find the free trial Dreamweaver download on their site. Here's a direct link to the download:
https://www.adobe.com/cfusion/tdrc/index.cfm?ref=sup&product=dreamweaver

New HTML5 Logo from the W3C

The W3C's new HTML5 logo is here! Visit http://www.w3.org/html/logo for free downloads of image files, free stickers, and other fun stuff.

Although some may question the need for a "logo", it's one way to spread the word about this emerging technology.

The key is the concept of progressive enhancement — use HTML5 new elements, attributes, and features to enhance web pages rather than for mission critical requirements. My new book, Web Design Basics: HTML5 & CSS3, takes this approach.

New HTML5 & CSS3 Textbook

Looking ahead to an early March, 2011 publishing date for my new textbook, Basics of Web Design: HTML5 & CSS3! The textbook takes a unique approach to prepare students to design web pages that work today in addition to being ready to take advantage of new HTML5 coding techniques of the future.

Use HTML5 Today!

To meet this challenging goal, Basics of Web Design: HTML5 & CSS3 introduces both XHTML syntax and HTML5 syntax, presents coding web pages in HTML5 with backwards-compatible techniques that work in current browsers, and also provides practice with HTML5's new features that will only work in the latest versions of browsers.

Two-Page Sections

Today's learners are busy multitaskers. Basics of Web Design: HTML5 & CSS3 is organized in two-page sections that quickly introduce the reader to new topics, provide examples, and offer hands-on exercises. This approach will get your students up-and-running quickly. Visit http://webdevbasics.net for more info and a table of contents.

Google SEO Guide

Check out the new Search Engine Optimization Starter Guide from Google. Using a baseball card website as an example, the guide clearly demonstrates techniques that web developers and web designers can build into a site. Seach Engine Optimization (SEO) techniques for mobile sites are also provided.

New Adobe Flash CS5 Tutorial

The tutorial has been updated for Adobe Flash CS5:
Adobe Flash CS5 Banner Tutorial

New Adobe Fireworks CS5 Tutorial

The tutorial has been updated for Adobe Fireworks CS5:
Adobe Fireworks CS5 Banner Tutorial

New Adobe Photoshop CS5 Tutorial

The tutorial for Adobe Photoshop has been updated for CS5:
Adobe Photoshop CS5 Banner Tutorial.

The Growing Importance of Social Media

Twitter, Facebook, MySpace, LinkedIn ... the list can go on and on. Social media seems intertwined with our daily lives. Check out Erik Qualman's slick video that answers the question, "Is Social Media a Fad?"

The statistics to support the statements in the video are available at Socialnomics.net.

HTML5 Online Conference

If you've been looking for a quick way to get up-to-speed on HTML5, check out ThinkVitamin's HTML5 Online Conference on April 12, 2010. It's four hours of online presentations from some leading edge web developers:

• An Introduction to HTML5
  
• HTML5 Canvas, Video & Forms
  
• HTML5 Web Sockets, Web Workers, and Geolocation Unleasehed
  
• HTML5 Storage APIs
  

Purchase HTML5 Conference Ticket Here

CS5 Launch Announced by Adobe

It's here — the new version of Adobe's Creative Suite, CS5. Adobe will launch Creative Suite 5 during a webinar on April 12, 2010.

Google Moving Forward on YouTube Accessibility

Google recently announced that their pilot auto-captioning project will be expanded to include all English language videos on YouTube. Not only is this a huge step in increasing the accessibility of YouTube content, auto-captions are also useful in searching for video content. Although speech-to-text technology is not perfect, the owner of the video has the option to download the auto-generated captions and improve them. The service will expand to include more languages in the future. More information on the announcement. More information on YouTube captioning.

Interview Posted at WebProfessionals.org

Wondering if web development/design may be right for you? For a brief overview of the web development programs at Harper College and a description of the career, check out my interview at WebProfessionals.org.

Universal Design for the Web

The Center for Universal Design defines universal design as "the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design." See http://terrymorris.net/universaldesign for a video overview of universal design for the web.

Awareness of universal design by web developers has been steadily increasing. Web accessibility — often left until the last moment — has garnered increased attention and is now more typically integrated into the design and coding process. Accessible web sites, with alt text for images, heading tags used in an organized manner, text navigation links, and captions or transcriptions for multimedia are more easily used not only by visitors with disabilities but also by visitors using a mobile browser. An accessible web site may also help with search engine optimization.

Here are some resourcs to jumpstart your accessible design skillset:

• Web Accessibility: 6 Reasons Why Its Important


• Accessibility Jargon Overvidew


• Tools for Conducting an Accessibility Review

Apple Announces "iPad"

The long awaited tablet device from Apple was announced today. The iPad, a touchscreen tablet computer that access the Web via WiFi and the AT&T network. More about the iPad.

CSS3 RGBA Color

Looking for ways to use transparency and color? Check out RGBa color, part of the CSS3 working draft, to configure both color and alpha (tranparency) with CSS. All major browsers with the exception of Internet Explorer (are you listening, Microsoft?) support RGBA color. 24ways.com offers a brief overview of RGBA Color.

A List Apart Survey

A List Apart is conducting their annual survey of web professionals. Check out http://alistapart.com/articles/survey2009 to take the survey. You might also be interested in the analysis of the 2008 survey results.

Technology Predictions for 2010

Wondering what's in store technology-wise for the new year? Check out Newsweek's technology predictions for 2010. The most intriguing is the long-awaited Apple tablet netbook, described as a 10-12 inch full color touch screen tablet device that can access the Web, online newspapers, and books (and may possibly run Mac OS X). And if the price really is as low as rumored (possibly as low as $600) — sign me up!

Visible Tweets

Jump into the twitterstream and explore your favorite topic on Twitter in a visual way at http://www.visualtweets.com. This could be an effective attention-getting method when introducing a new topic class or beginning a presentation.

The Social Media Count

Check out the Social Media Count for a visual look at the growth of social media.

CSS Property Review

Announcing a new resource on the Web Development & Design Foundations textbook companion site: CSS Property Review.

Use this Ajax application to review your knowledge of CSS properties:

• Begin typing the name of a CSS property in the text box.
• As you type, a list of suggested CSS property names will be displayed.
• When you type a complete CSS property name, a description of the property is shown.

Web Design Best Practices Checklist (redux)

Another article in Smashing Magazine includes a link to the Web Design Best Practices Checklist. Check out Cameron Chapman's 6/29/09 article, 45 Incredibly Useful Checklists and Questionnaires.

OWEA - Open Web Education Alliance

The new W3C incubator group, The Open Web Education Alliance (OWEA), is expected to have a significant positive impact promoting web standards and best practices to the realm of web education. OWEA's mission of OWEA is to bring together companies, schools, and organizations involved in shaping the education of Web professionals to explore the issues around the topic of Web development education and create solutions for improvement.

Web Design Best Practices Checklist

Smashing Magazine included a link to the Web Design Best Practices Checklist in Cameron Chapman's May 14, 2008 article, Non Profit Website Design: Examples and Best Practices.

WolframAlpha — Beyond Search Engines

Check out WolframAlpha (http://wolframalpha.com) — a computational knowlege engine.

The rather lofty goal of WolframAlpha's developers is to "make all systematic knowledge immediately computable and accessible to everyone"! They're collecting objective data, implementing models, methods, and algorithms, with the final aim to "build on the achievements of science and other systematizations of knowledge to provide a single source that can be relied on by everyone for definitive answers to factual queries."

A video overview is available at
http://www75.wolframalpha.com/screencast/introducingwolframalpha.html

Zeldman Explains "What are web standards and why are they important?

Jeffrey Zeldman, one of the founders of The Web Standards Project, discusses how the movement for web standards began, why it succeeded, his thoughts on design, accessibility, validation, and more...

My fav quote is Zeldman's take on design, "..design, like everything in life is about understanding what the problems are, solving those problems, and there's always trade offs."

WCAG 2.0 Resources

Check out Patrick Lauke's presentation, "What you need to know about WCAG 2.0" for an overview of how WCAG 2.0 differs from WCAG 1.0 and, well, what you need to know about WCAG 2.0. :) The ATRC Web Accessibility Checker is now available — it's an online testing tool that checks for WCAG 2.0 compliance. The tool conducts a number of automated tests and also notes areas that must be checked manually.

Microsoft Expression SuperPreview

Wouldn't you like a convenient way to test your web pages in multiple versions of Internet Explorer on the same machine?  Try Microsoft Expression Web SuperPreview  — beta version available for free download. This stand-alone application provides a way for you to test your pages and easily compare the rendering of the various flavors of IE — a productivity boon for web developers everywhere. Of course, we wouldn't need this tool if Microsoft could have just followed web standards to begin with!  

Web Standards Project InterAct Curriculum Framework

The Web Standards Project (WaSP) recently announced a new web design curriculum framework, InterAct, intended to be a living curriculum to help schools, colleges and universities bridge the gap between educators and industry best practices. There is a wealth of course materials that educators can adapt or adopt as best meets their needs — including assignments, projects, exam questions, resource links, and even learning modules.

It was a great experience to work with my fellow WaSP Education Task Force members during 2008 and 2009 as the curriculum framework took shape. Web Development & Design Foundations is one of the recommended reference books for the Web Design 1 course. Also check out the Accessibility course — I spent many hours developing this course and organizing materials for it. A shout-out of thanks goes to course reviewers Glenda Sims, John F. Croston III, Virgina DeBolt, Mark DuBois, and Jon Gunderson.

WCAG 2.0

A new day has dawned for web accessibility -- the W3C Web Accessibility Initiative (WAI) Web Content Web Content Accessibility Guidelines 2.0 (WCAG 2.0) has finally reached W3C Recommendation status it's now an official web standard. The WCAG 2.0 Guidelines are organized around the following four principles (use the acronym POUR to remember them):

1. Content must be Perceivable
   
2. Interface components in the content must be Operable
   
3. Content and controls must be Understandable
   
4. Content should be Robust enough to work with current and future user agents (including assistive technologies)

Check out the WCAG 2.0 Quick Reference and Understanding WCAG 2.0 to learn more about these guidelines.

Web Teacher Review

Check out Web Teacher's review of Web Development & Design Foundations with XHTML. Here's an excerpt:

"This book is 100% courseware, a complete curriculum with project files, test and discussion questions, careful planning of objectives and learning activities, and resources for students at the Addison Wesley site for the book. ... Very complete. It deals with code, design, ethics, accessibility, best practices and every aspect of design and development. A student who mastered everything in this book would have a good grasp of both past and present web development knowledge."

Google Celebrates 10th Birthday!

Was it only ten years ago that the Web was without Google? If you'd like to know more about Google's origins (including a photo of their start-up garage), have fun exploring Google's Tenth Birthday page and Interactive Timeline.

OneWebDay - 9/22

Press release: On the third annual “Earth Day for the Internet”, communities across the country are holding events to learn about and advocate for that marvel of modern infrastructure, the Internet. It happens in the United States and around the world on OneWebDay, Monday, September 22, 2008.

Which Browser Will Gain the Most Market Share?

See PC World for a an overview of the new browser wars -- between Chrome, IE8, and Firefox 3.1. Find out how they compare in areas of security, speed, reliability, etc. According to PC World, Google's Chrome browser is poised to take more market share away from Firefox than from IE8. Only time will tell.....

Google's new browser -- Chrome

Google is due to release a beta today of its new browser named Google Chrome. See http://www.google.com/googlebooks/chrome/ for a comic book intro to Chrome. Download Google Chrome. View Chrome FAQs.

Target's Lack of Web Accessibility == SIX Million Dollars

Look for more organizations to increase their focus on web accessibility — Target and NFB just reached a $6 million dollar settlement. See http://webaim.org/blog/target-lawsuit-settled/ for an overview.

One Trillion Pages....

Google's Official Blog recently reported, "even our search engineers stopped in awe about just how big the web is these days -- when our systems that process links on the web to find new content hit a milestone: 1 trillion (as in 1,000,000,000,000) unique URLs on the web at once!" The article also has a high-level overview of how Google keeps up with the Web. :-)

Web Standards Project Curriculum Framework

The Web Standards Project (WaSP) just announced the WaSP Curriculum Framework. The framework's goal is to identify the skill sets and competencies that aspiring Web professionals need to acquire to prepare them for their chosen careers. Outlines for a set of foundation courses that can be readily adapted into an existing program at a college, school, or university will be released in March 2009. This curriculum framework is intended to be a "living" curriculum with contributions from web educators and web professionals.

The WC3 Question & Answer blog post on the proposed framework states, "After years of hearing people lament that we would not get a better web until we get better ways of teaching the Web to the professionals (of today and tomorrow), is very exciting to see the recent crop of community driven efforts to provide material and guidance for the teaching of Web technologies."

New Google Knol

Google has launched a beta of Knol — kind of like Wikipedia with a twist. Google defines a knol as "a unit of knowledge" and explains that a knol is an "authoritative article about a specific topic".
Just like Wikipedia, anyone can post an article. See Web Design Best Practices for an example. :-)

Alexa : More than Search Results

Alexa lives up to its tagline: A Web Information Company — providing more than search results. You can use Alexa to find out more about a web site: with displays of an overview (including a screen capture and contact information), traffic statistics (when available), sites linking in, and a direct link to the Web Archive to view how the site looked in the past.

Do You Grok Grokker?

Grokker offers both an outline view and a visual view of search results. This provides a way to easily drill down into topics of interest in an organized manner and search within the results. Grokker searches your choice of Yahoo!, Wikipedia, and Amazon Books for information. An interesting twist is that Grokker can be licensed by businesses as an enterprise search management tool to mine their databases for information.

TouchGraph: Visually Show Connections Between Web Sites

TouchGraph's Java applet will visually display connections between websites related to the search term you enter. There are three flavors of TouchGraph:

• TouchGraph Google offers an intriguing method to explore a topic when brainstorming.
• TouchGraph Amazon visually displays books related to a topic.
• TouchGraph Facebook provides an new way to explore your friends and connections.

KartOO: A Mind Map of the Web

Continuing this week's topic of search engines — you may want to explore your favorite topic using KartOO. This visual search engine builds a mind map of websites related to your search terms. Somehow, exploring a cloud of websites is more fun than looking at page after page of text-based search engine results. :-)

New Search Engine - Searchme!

Searchme is a visual search engine that begins to show you results while you are typing your keyword or phrase. In addition to the expected search engine results page (SERP), Searchme displays the home pages of the web pages in a "deck" across the upper part of the page. A handy tool for those who think visually!

Firefox 3 Launched

Well, I've really been in "summer vacation" mode recently and missed posting about the launch of Firefox 3. A world record was set for Firefox 3 downloads — over eight million — on 6/17 for the most software downloaded within 24 hours. Check out this screencast of Firefox 3's new features and the download your own copy at: http://www.mozilla.com/en-US/firefox/.

ICANN Approves Recommendation for New TLDs

ICANN will initiate a process for applications for new top level domain (TLD) names. In addition the current TLDs such as .com, .biz, etc., the press release states, "This proposal allows applicants for new names to self-select their domain name so that choices are most appropriate for their customers or potentially the most marketable."
So, the sky's the limit for creativity here — whether it's a brand-related name (Wouldn't .cola be fun for the soft drink companies?) or a geographically-based name such as .chicago — it's going to be fun to see what new TLDs are proposed.

New Accessible Web Design & Compliance Certificate

Harper College's new Accessible Web Design & Compliance Certificate was just approved by the State of Illinois. There is an increased focus in the technology industry and in society on accessibility. Information technology (including web sites) is expected to provide accommodations in order to be accessible for all individuals. The certificate was added to address learning needs generated by the Illinois Information Technology Accessibility Act.

New Adobe Photoshop Express Beta

Adobe launched a new beta version of Adobe Photoshop Express. This Rich Internet Application (RIA) is free -- all you need to do is sign up! You'll be able to store up to 2GB of images, edit your images, and share them online.

WOW Technology Minute Podcast

January 2008 is turning out to be quite a month... check out my one-minute podcast interview about web design best practices and accessibility at the WOW Technology Minute.

Outstanding e-Learning Faculty Award

The Instructional Technology Council (ITC) recently announced the recipients of their 2008 Awards for Excellence.

Harper College Associate Professor Terry Morris was named the recipient of the 2008 Outstanding e-Learning Faculty Award for Excellence.

The ITC is a national organization that promotes effective use of technology to enhance distance learning. Member institutions may nominate an exemplary faculty member for this national award. The nominations are reviewed and the recipient is chosen by a panel of judges including ITC board members, past awards winners and other ITC members.

See a press release issued by Northcentral University, where I am a doctoral student, for more information.

Netscape's Demise

AOL announced that support of the Netscape browser will end on February 1, 2008. Back in the days of Netscape Gold, this browser was considered the latest and greatest. Netscape made available an open-source build called Mozilla, which has grown in popularity as Mozilla Firefox.

A Preview of HTML 5

Want a preview of the next new version of HTML and be the first on your block to know about the new <section>, <article>, <header>, <nav>, and <aside> elements? Check out the thorough and informative Preview of HTML 5. The author, Lachlan Hunt, is one of the editors of the W3C HTML 5 Working Draft and a software developer at Opera.

10 Future Web Trends

Read/Write Web has posted a list of 10 Web trends to watch for. Some may be familiar to you but others may be new. The trends are: Semantic Web, Artificial Intelligence, Virtual Worlds, Mobile, Attention Economy, Web Sites as Web Services, Online Video / Internet TV, Rich Internet Apps, International Web, and Personalization. Intrigued? Explore the post and its related links.

New Adobe CS3 Tutorials

New tutorials are available for Adobe Photoshop CS3, Adobe Fireworks CS3, and Adobe Flash CS3. Each tutorial walks you through creating a logo banner for a web site. The Fireworks and Photoshop tutorials also introduce techniques for creating navigation buttons. The Flash tutorial introduces motion tweens, shape tweens, symbols, and behaviors.

The Rise of Ruby on Rails

Ruby on Rails has been around for a few years as one of the open source server-side programming languages for the Web. With Microsoft's announcement of its own implementation, IronRuby, you can expect this language to get a lot of attention. Read eWeek's Rise of Ruby on Rails for an overview of where this technology is headed.

Apple Safari Browser for Windows

Apple recently released a beta version of its Safari Browser for Windows. See http://www.apple.com/safari/ for a free download. Why should you consider using this browser? According to Apple, "The fastest web browser on any platform, Safari loads pages up to 2 times faster than Internet Explorer 7 and up to 1.6 times faster than Firefox 2. And it executes JavaScript up to 2.8 times faster than Internet Explorer 7 and up to 1.6 times faster than Firefox 2."

HTML 5 - the next version of XHTML/HTML

Back in March 2007 a previous post discussed the founding of the new HTML working group at the W3C. It's recently been resolved that "HTML 5" will be the name of the W3C's next HTML specification.

New! Flash Slideshow Tutorial

Try out the new Flash Slideshow Tutorial. The slideshow uses Flash — but you don't need to know how to develop in Flash to download and configure the slideshow to display your own images! That's because the slideshow utilizes an easy to edit text-based XML file to configure the file names of the images that it displays.

Adobe Dreamweaver CS3

Adobe is releasing a new version of Dreamweaver called Dreamweaver CS3 in mid-April. Visit http://www.adobe.com/products/dreamweaver/features/ for an overview of what's new. Highlights include improved CSS and XML support. You may need to upgrade your computer before trying out this new software -- the Windows version requires Windows XP Service Pack 2 or Windows Vista along with 1GB of RAM. The product is expected to ship in mid-April 2007.

The Next Version of XHTML May Be HTML 5

An independent group, WHAT-WG (Web Hypertext Application Technology Working Group), has been working outside of the official W3C since 2004 towards a new "version" of HTML. In March 2007 the W3C announced a new official HTML Working Group that is expected to build on and extend WHAT-WG's efforts.

According to the W3C HTML Working Group's charter, their charge is to recommend a new standard that combines HTML and XHTML:

"This group will maintain and produce incremental revisions to the HTML specification, which includes the series of specifications previously published as XHTML version 1. Both XML and 'classic HTML' syntaxes will be produced."

An initial Working Draft is due June 2007 and should make for some interesting reading! The process will take several years -- the Recommendation is due 2010. The new W3C HTML Working Group is to plan incremental changes to HTML and XHTML together.

Tim Berners-Lee shares his perspective of the reinvention of HTML at his blog. He stated,

"The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn't work."

Another area that the W3C HTML Working Group will address is extensions to HTML forms. According to Berners-Lee,

"A goal would be to have an HTML forms language which is a superset of the existing HTML language, and a subset of a XForms language with added HTML compatibility."

There is a plan for a separate group to continue the XHTML 2.0 work, although Berners-Lee indicated that there would be no dependency of HTML work on the XHTML 2.0 work. The diagram below depicts the relationship between these markup languages:


According to the W3C's architectural vision, -- the deployment strategy and expected field of use for the new HTML and for XHTML 2.0 are expected to be different -- with new HTML for use by typical Web pages and web applications such as content management systems and the non-backward compatible XHTML 2.0 designed to meet "enterprise-strength" needs.

It seems that Web developers who transitioned from HTML to XHTML will need to be flexible again as they look forward to a new version of HTML.

For additional perspectives and more information, see
HTML5 Versus XHTML 2
HTML 5 or XHTML 2?
Ajaxian Editorial
On the Road to XHTML 2 and HTML 5
The Future of HTML, Part 1:WHATWG
The Future of HTML, Part 2:XHTML 2.0
How not to fix HTML
Annotated WHAT-WG Working Draft
HTML5, XHTML2, and the Future of the Web

The World, Technology, Education, and the Future

What are the implications of this video to you, your family, your education, your career, your future?

At one time even books were a "new" technology

A look at Web 2.0

Play the video below for an enlightening perspective of the impact of Web 2.0.


The video was created by Michael Wesch.

The Big Three Search Engines Agree!

Google's SiteMap XML protocol provides a method for a web developer to publish a map of a site and submit it to Google. The purpose is to describe pages to be listed in the search engine. It's designed to let organizations guide Google's crawlers and should help get pages indexed more quickly and thoroughly. The big news is that now Microsoft and Yahoo! have agreed to also use this protocol! Visit http://sitemaps.org for information about using this XML protocol.

EV SSL Certificates

Verisign has issued the first Extended Validation (EV) SSL Certificate to overstock.com. EV SSL is a new standardized validation process created by CA/Browser Forum, a voluntary organization of leading certification authorities and vendors of Internet browser software and other applications.

EV SSL Certificates maximize consumer confidence when visiting Web sites by providing another visual cue (in addition to the lock icon) that these sites are who they claim to be and that their online transactions are secured by encryption. Certificate Authorities perform much more stringent checks to than currently take place for SSL certificates. These checks include: verifing an applicant owns the domain, works for the organization, has authority to update the website, and that the organization is a valid, recognized place of business. Internet Explorer 7.0 will be updated in early 2007 to indicate when an EV SSL Certificate is in place.

Mozilla Firefox 2.0 Released

Mozilla recently announced the release of Firefox 2.0. Visit http://www.mozilla.com/en-US/firefox/ for a free download. New features include improved tabbed browsing, session restore, "Live Titles", and more....

Internet Explorer 7 Released!

Microsoft recently released a new version of its popular browser. Check out the at CNET review of IE7.

browsershots.org

When testing your website it's a great idea to test in as many browsers and platforms as you can. Visit http://www.browsershots.org and submit your URL -- selecting the browsers and platforms for testing. Your request is placed in a queue and the (eventual) response will be a collection of browser screen shots. View a sample browsershots results page.

Just for fun: Popular URLs

Visit http://www.popurls.com to explore links to a collection of popular content from a variety of sites including Digg, Furl, YouTube, Slashdot, Yahoo News, Flickr, Spurl, Del, etc. Have fun!

Enlightening Web Design Review

Check out the article at Digital Web Magazine by McClurg-Genevese. The author analyzes various designs at CSS Zen Garden and discusses how the principles and elements of design were used to create these innovative and imaginative Web design compositions.

Firefox Browser 14% US Market Share

A recent report by OneStat.com shows the Firefox Browser with a 14.07% market share in the US and an 11.51% global market share. Read the detailed report.