Web Standards Solutions: The Markup and Style Handbook


Publisher: A-Press
Author: Dan Cederholm
Year: 2005
ISBN-10: 1590593812

BOOK DESCRIPTION
Web Standards are the standard technology specifications enforced by the World Wide Web Consortium (W3C) to make sure that web designers and browser manufacturers are using the same technology syntax. It is important that these implementations are the same throughout the Web, otherwise it becomes a messy proprietary place, and lacks consistency. These standards also allow content to be more compatible with multiple different viewing devices, such as screen readers for people with vision impairments, cell phones, PDFs, etc. HTML, XML, and CSS are all such technologies.This book contains questions and answers on markup and style topics for Web Standards. It explores the multiple ways you can handle a situation when building with Web Standards – and the advantages and disadvantages of those methods. Additionally, each chapter goes a step further, with “extra credit” sections to give the reader extra tips and tricks based on the topic. The reader is empowered to make better decisions based on well-rounded information.

RELATED FILES
Visit Websites
Access Online Version of Book
Download Sample Code

BOOK CHAPTERS

  1. Lists
  2. Headings
  3. Tables Are Evil?
  4. Quotations
  5. Forms
  6. <strong>,<em>, and other Phrase Elements
  7. Anchors
  8. More Lists
  9. Minimizing Markup
  10. Applying CSS
  11. Print Styles
  12. CSS Layouts
  13. Styling Text
  14. Image Replacement
  15. Styling <body>
  16. Next Steps

REVIEW
I thought this book was very helpful in providing other ways of handling markup. Some are examples I have not encountered before. Below are some examples.

<thead> and <tfoot> elements must appear above <tbody> sections to allow for browsers and devices to load the content first. An example of a table marked up with grouped table rows may something like this:

<table summary="">
	<caption>Meta data info about the table</caption>
	<thead>
		<tr>
			..table header content...
		</tr>
	</thead>
	<tfoot>
		<tr>
			...table footer content...
		</tr>
	</tfoot>
	<tbody>
		<tr>
			...table data row...
		</tr>
		<tr>
			...table data row...
		</tr>
		<tr>
			...table data row...
		</tr>
	</tbody>
</table>

PHRASE ELEMENTS
<cite>: Contains a citation or a reference to other sources
<dfn>: Indicates that this is the defining instance of the enclosed terms
<code>: Designates a fragment of computer code
<samp>: Designates sample output from programs, scripts, etc.
<kbd>: Indicates text to be entered by the user
<var>: Indicates an instance of a variable or program argument
<abbr>: Indicates an abbreviated for (e.g. WWW, HTTP, URI, etc…)
<acronym>: Indicates an acronym (e.g. WAC, radar, etc…)

THE BEST WAY TO MARKUP AN ANCHOR
This is a standard way in which one would probably create an anchor:

<a href="#oranges">About Oranges</a>
	... some text here ...
<a name="oranges"></a>
<h2>Oranges Are Tasty</h2>
	... more text here ...

This is a better way of doing the same:

<a href="#oranges">About Oranges</a>
	... some text here ...
<h2 id="oranges">Oranges Are Tasty</h2>
	... more text here ...

This method works best because you can also use CSS or JS to target this entity without the extra markup.

CSS: PRINT SYTLES
To ensure each of these CSS files are used only for the intended medium we add the MEDIA attribute to the LINK element.

<link rel="stylesheet" type="text/css" media="screen" href="/css/styles.css" />
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />

Make it a point to hide unnecessary elements when creating a print stylesheet. Set display attribute and its value to none with elements.

Expose hyperlink URLs in content area to a print style sheet:

#content a:link:after, #content a:visited:after {
	content: " (" attr(href) ") ";
}

…essentially we are telling the print version of the page to reveal the hyperlink URLs afer the hyperlinked text, putting the URL in between a set of parentheses with a single space before and after.

DISPLAYING A LO-FI/HI-FI VERSIONS OF LOGOS

<div id="logo">
	<span>
		<a href="/">
			<img src="/images/logo_lofi.gif" width="173" height="31" alt="" />
		</a>
	</span>
</div>

Here is the CSS that makes it all work!

#logo img {
	display: block;
	width: 0;
}
#logo span {
	width:173px;
	height: 31px;
	background: url(../images/logo_hifi.gif) no-repeat;
}

ADDITIONAL SOURCE SITES
W3C
www.w3.org

Web Standards Projects
www.webstandards.org

A List Apart
www.alistapart.com

CSS Zen Garden
www.csszengarden.com

Dive into Accessibility
www.diveintoaccessibility.org

CSS-Discuss
www.css-discuss.org

Web-Graphics
www.web-graphics.com

Digital Web Magazine
www.digital-web.com

The Weekly Standards
www.weeklystandards.com

INFLUENTIAL & INSPIRATIONAL WEBLOGS:
Jeffrey Zeldman Presents: The Daily Report
www.zeldman.com

Stopdesign
www.stopdesign.com

mezzoblue
www.mezzoblue.com

Eric Meyer
www.meyerweb.com

Tantek Celik

http://tantek.com/log/

What Do I Know?
www.whatdoiknow.org

Asterisk*
www.7nights.com/asterisk/

superfluousbanter
www.superfluousbanter.org

Simon Willison’s Weblog

http://simon.incutio.com

Brainstorms and Raves
www.brainstormandraves.com

Living Can Kill You
www.saila.com/columns/lcky/

Google Glass …my thoughts on almost having it.

I was one of thousands of people to receive the next round of invitations for Google Glass. And responded immediately to the email invites that Google sent out with a code to acquire the device. The big draw for me was the “exclusivity” and being part of a niche user group to be considered a “Glass Explorer” and test out this new piece of technology.

Initially I was completely sure I wanted the device. I had spoken with a couple of people whom I knew in the tech industry for some feedback on what they thought I should do? Some were hesitant in expressing a complete answer. Although it never dawned on me just how long I had before the invite would expire in order to take part of the program.

Google Glass

I swayed the options for a few and within the hour of receiving the invite I took a jump and made the purchase of $1500 for the unit and $250+ for an additional set of frames that would fit prescription lenses that I would need. That’s over in excess of $1800. I just started to imagine a number of possibilities involving the use of this product and was psyched about what I would get to do with it.

However I really began to feel buyers remorse the next following day. Here’s the thing, I never EVER make really huge purchases like this without at least thinking about it for a couple of days. And to ask myself these questions, is it a necessity? …can I live without it? Even the first generation iPhone I purchased took me a lot of time to cave into the idea of acquiring.

It was really out of my character to invest that much on a product that is still in a beta test program. Now mind you I am unemployed without any real debt at this moment of time and certainly do have the capital to make such a purchase. But I really came down to earth after seeing how much of a purchase I made on a device I just do not need right now. Taking the time to read about the reviews from other people and what others had to say about the first phase of the program was really an eye opener and to some degree I agree with most of their thoughts.

Blog Post
rememberlenny.com – I Returned My Google Glass After 30 Days
internetevolution.com – Why I’m Returning Google Glass
davidchristian.co – Why I’m Returning Google Glass
digitaltrends.com – A Google Author’s Description of Glass

These would be a great product to use I think in most circumstances however the one thing I would be uneasy with would be the social implications that it comes with. It would be something I would most likely play with at home or if I were to attend a tech meetup where a majority of people already know about this product and what its function is. However if I considered wearing these out in my day-to-day activities I would be inviting myself to a lot of attention from people. I am not sure if I could handle the social situation of strangers staring at me with curiosity. Who would either respond in a positive way by asking questions about the device or in a negative situation in which they would avoid me outright or the possibility of getting violent in nature thinking that I am secretly recording them.

Blog Post
Google Glass Snatched Right Off a User’s Face

…and looking like a cyborg might be somewhere on the list as well. Or worse get this new fan-dangled gadget stolen.

The reason for why I returned Google Glass before it could even be delivered to me pass my doorstep, is that I cannot justify such an expensive technology purchase due to how unsure it would further benefit my life. Even with the 30-day return policy Google provides with the device. I understand that being a Google “Glass Explorer” as its name implies is to do just that, figure out how the other half of society could benefit from its use by being in its program. And think of software designs that could enhance its capabilities.

Once this product is out in the wild a lot more and is available to the consumer market masses (with hopefully a lower price tag) then I just might rethink it. Being a Google ambassador to such new bleeding edge technology is of great responsibility. It is just not for me right now. Once it is accepted by the general public more, then I think I could rejoin in on the fun with the rest of society.

However there seems to be some really great articles coming out about Google Glass and its application use in other industries:
Massachusetts Police Officers Are Trying Out Google Glass
NYPD Testing Out Google Glass
Could Google Glass be used to predict disease outbreaks?

A pretty amusing article I came across discussed how even the Walkman was considered an obtrusive looking thing.

Where people really that skeptical of the Walkmen?

…Olsson is pretty relaxed when the weirdness of Glass comes up — it’s obviously the most common question she has to face when talking about the product. “It’s interesting to see the parallels with headphones,” she says. “The fact that people walk around with these huge headphones is kind of crazy, in a way. But now you don’t think about it as technology, you think about it as something that delivers music to you.”

Sources:
http://www.onthemedia.org/story/google-glass-dorky/
http://www.npr.org/templates/story/story.php?storyId=9496579

As a kid from the 80s I NEVER thought that either devices were strange. In fact I thought it was rather cool and never knew there was any fuss about it. My father had one which might have been the first one in my household which I pretty much stole from him inevitably when not in use to listen to my own tapes.

But if your are interested in becoming a “Glass Explorer” then by all means go here and apply – http://www.google.com/glass/start/how-to-get-one/?source=learnmore

Online Typography (@font-face)

I love lynda.com training videos that cover an array of topics in web development. When I last logged in I came across a new video series called “Web Fonts First Look” by James Williamson. I thought this series was incredibly helpful and learned a lot more about typography for the web than I think I could have from 1 or 2 books on the subject.

Throughout the video tutorial, James Williamson works on a project called Alice in Web Fonts to demonstrate various techniques in web typography. He demonstrates with a few other fonts but one in particular called JUNCTION which I thought looked really nice! (Must consider using it in a project at a later date!)

Below are some of the notes I took as well as a lot of the resources mentioned from the video lessons.

These are the core controls with text in CSS that have these following properties:
font-family, font-size, line-height, color, font-weight, font-style, font-variant, text-transform, text-align, text-indent, width, letter-spacing, word-spacing

These are generic declarations that can appear in the font-stack if one does not exist:
serif, sans-serif, monospace, cursive, fantasy

There are a couple of resource sites to acquire information to target machines that already have fonts pre-installed and they are as follows:


@font-face rules
There are rules for how to setup your fonts in your code and a great place to find out how that should be structured can be read here: “W3C CSS Fonts Module Level 3″

Step 1: Declare a font family by name.
Step 2: Embedded Open Type (.eot) font needs to appear first for IE to render right.
Step 3: Provide an absolute, relative, or local source reference to the font. (However a ‘local’ reference seems to be deprecated now because mobile devices such as the Droid will cause problems with the page loading.)

This is an example of @font-face construction for fonts that will be saved and served up from your own web server.

@font-face {
font-family: 'MyWebFont';
src: url('../_fonts/webfont.eot'); /* IE9 Compat Modes */
src: url('../_fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('../_fonts/webfont.woff') format('woff'), /* Modern Browsers */
     url('../_fonts/webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('../_fonts/webfont.otf')  format('opentype'),
     url('../_fonts/webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

 

In the video tutorial there was a discussion that you are limited to listing about 9 @font-face listings from what I can remember. However from my recollection he didn’t discuss how that can be resolved when he said that he would follow-up with that comment. If perhaps anyone knows more about this subject please post a follow-up link.

Check out Ethan’s article for the @font-face post
http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax


VENDOR PRE-FIXING
“webkit” is often referring to Safari and Google Chrome browsers
You can optimize a pages CSS output to certain browsers by putting a vendor name before it’s CSS prefix to apply subtle affects. Here is an example of how that can be done:

-webkit-transform: rotate(-10deg); /*Safari, Chrome and mobile platforms*/
-moz-transform: (-10deg); /*Mozilla*/
-o-transform: (-10deg); /*Opera*/
transform: rotate(-10deg); /*a default property*/

 

Prefixing Services

  • Compass
    Compass is a framework for Sass that, among other things, will automatically handle the process of prefixing your CSS3 properties.
  • Prefix-Free
    A unique JavaScript-based solution that dynamically determines which browser is being used, and then assigns the necessary prefixes to the stylesheet.
  • CSS3 Please
    A nifty service that provides copy-and-paste, cross-browser CSS. Adjust the values according to your needs, and you instantly have a snippet that will correctly target all applicable browsers.

modernizr.com
Modernizr adds classes to the element <html> which allow you to target specific browser functionality in your stylesheet.


SOURCES

For further reading on “Font-Hinting”

WHERE TO GET FONTS!

Affordable Fonts to Purchase Open-Source Fonts
Browser Testing Sources Font Converters Other Web Font Tools

For further inspiration check out the following:

FOLLOW-UP ARTICLES

Video (30 minutes)
Tim Brown – More Perfect Typography

Hello world!

So this is my first post in the blog world! WordPress has been around for ages. I have read or come across many articles on it, installed it once but really never got around to actually using it. But it seems that I always bump into someone who uses it for a clients website or to display their own portfolio of work with it.

I’ve been to a few local meetings that discuss this easy-to-use CMS and I have been meaning to learn it for some time. So I figure the best way to learn the ins-and-outs for creating customized theme’s and plug-in’s is to take an active approach to it and actually use it!

My interests are all things web & design related. So from time-to-time I will post items that I have an interest in, on this blog. This also seems like a great way to write small posts of interesting information I learn along the way. It may even be beneficial for anyone who may stumble across my little blip of content looking for answers to something I my have discovered while working on a project. Or it just might be a good place to post any of my problems I encounter with programming code or design practices in hopes that someone may provide an answer for me.

One thing I definitely enjoy is attending events that are all about web technology, so I will try to blog about that information even more. Living so close to the Boston area there is a plethora of user groups to attend, network at and to access free educational material through lectures they may have.

… so hopefully more blog posts coming soon in the New Year and a custom design for this new blog of mine!