A can't miss article at A List Apart

This article is actually a selection of real quality articles from on the web today and past for newbie web designers and non-designers who need to design. Topics range from visual design to information architecture, markup & css to scripting, and standards to accessibility. I believe whether you are new to this area or have had yourself submerged in it for a while, you will benefit a lot from these writings.

Part 1: http://www.alistapart.com/articles/ALAprimer (for intermediate and advanced designers)
Part 2: http://www.alistapart.com/articles/alaprimer2 (for beginners)

In a word, they are the essence of design with the world wide web.

Iconaholic.com - Real free icons

Dozens of packages in a variety of themes, every icon in 128*128*24b!







Download at: http://www.iconaholic.com/downloads.html

By any chance you find them handy and useful, a small donation would really keep these continue to be free for more people.

Very likely to switch to Movable Type

Hope it would not disappoint me this time.

A Checklist of XHTML for Semanticality

Elements (that you should have a good grip of and use frequently):

1. Headings: h1, h2, h3, h4, h5, h6 elements
   Use these real heading elements for the hierarchical headers of your web page, don't fake 'em with CSS!
2. Paragraphs: p element
   A paragraph is a paragraph. Round your paragraphs with real p elements. NO br elements to fake it!
3. Line Breaks: br element
   Minimize the use of forced line breaks, i.e. br, by resorting to p, (ul/ol, li), and CSS widths/margins/paddings.
4. Emphasis: em, strong elements
   em and strong elements are for emphasis of texts, use cite for citations rather than them.
5. Citation: cite element
   Mark up the name of a citation or reference with this element, inlinely.
6. Citation: blockquote element
   Use this for block citations of text. DON'T use blockquote for just indentation, use CSS margins and paddings instead. Moreover, do provide cite="..." and title="..." properties for it.
7. Lists: ul/ol, li elements
   When you have a list of something, use the list tags: ul and li for unordered list, while ol and li for ordered one. Lists make up an essential part of every successful HTML page.
8. Definition List: dl, dt, dd elements
   Use definition list for terms and their corresponding descriptions. Other possible uses include marking up dialogues and illustration of links.
9. Computer codes: code element
   Mark up computer codes like C++, XML, CSS and so forth with this element.
10. Computer variables: var element
    Mark up programming variables with this element.
11. Keyboard text: kbd element
    For keyboarded text, or user provided information to a terminal.
12. Abbreviations: abbr element
    For abbreviations.
13. Acronyms: acronym element
    For acronyms.
14. Addresses: address element
    Mark up addresses or authorships with this element.
15. Table captions: caption element
    The content of a caption element appears atop the table as title.
16. Modifications: del element and ins element
    Texts marked up with del tags are rendered as deleted with a strike-throughs. If you are modifying a small part of your document, you may want to mark up the deleted part with a del tag and the replacing part with a ins tag, so that both people and computer know exactly how and where you have modified the page.
17. Form semantic facilities: label element, fieldset element and legend element Don't forget to label the texts with label elements for users to distinguish form controls like text input, radios, and checkboxes.
    You can divide a form up into several logic components by employing fieldset elements, with legend element containing the title for each of them.
18. Other table semantic facilities: thead element, tbody element, tfoot element
    Put thead, tbody and tfoot tags respectively around the header part, body part, and footer part of the table for semanticality.

Attributes (that you should have a good grip of and use frequently):

1. Make meaningful id and class names.
2. Alternative text for images: <img ... alt="..." />
   Always provide an alt attribute to images, i.e. img elements.
3. Titles: <a ... title="...">...</a>
   Title property helps users distinguish your content more easily and furtherly. Almost all presentational elements accept it, so use it as much as possible, especially for links, i.e. a elements.
4. Table summaries: <table ... summary="...">...</table>
   Always provide a summary for real tables.
5. Language specification: <html lang="..." xml:lang="..."></html>
   Almost all XHTML elements accept language specifications. Always provide your html element and other elements wherein texts are in languages other than that specified in the html element with them.

A more formal list of semantic XHTML elements and attributes as well as a collection of more in-depth articles is available at microformats.org/wiki.

To improve the semanticality of your website

Why? You may ask. Because...

1. Computers love it.
2. People love it. (Technically, they don't have to.)
3. Search engines love it.
4. You may love it. Or not, it's up to you.

Aha, but seriously, semanticality of your website helps in that...

1. Your markup makes sense to anyone, including computers, whether today or later, making your pages endure.
2. Your information is more global and versatile in that they can be easily understood by people and computers thus easily processed and analyzed for further results.

Well for now, these 2 are all I can think of, more benefits of using semantic markup for your texts and medias can be derived from them, such as search engine favor. Now let's head down to the part where you will learn more about semantic web and how to improve the semanticality of your website.

Below are some links I collected from the web on semantics and semanticality. Some prepare you for further study with introductory tone, some are in-depth talks, and some teach you to make website with semanticality in mind.

InfoMesh

The Semantic Web: An Introduction

http://infomesh.net/2001/swintro/

Wikipedia

Semantic Web

http://en.wikipedia.org/wiki/Semantic_Web

w3

Semantics on the Web and their practical Applications (Slides)

http://www.w3.org/2004/Talks/web-tech-valencia/

GOVIS Conference 18 May 2005

Semantic HTML (Slides)

http://www.ermanz.govt.nz/news-events/archives/presentations/semantichtml.html

Brainstorms & Raves

Articles: Semantics, HTML, XHTML, and Structure

http://brainstormsandraves.com/articles/semantics/structure/

Dave Shea

Semantics and Bad Code

http://www.mezzoblue.com/archives/2003/08/26/semantics_an/

Doug Bowman

On Standards and Semantics

http://www.stopdesign.com/log/2003/08/26/semantics.html

Simon Willison

HTML: More structural than semantic

http://simon.incutio.com/archive/2003/08/28/structuralVsSemantic

In addition, Planet RDF and SemanticWeb are 2 communities dedicated to semantic web topics that you should visit, especially if you have serious interest in semantics and semanticality.

Ohhh,,one more thing (or two)

Darn, I knew I love blogging so much. :( And one month is such a long time.

Well, for the tiny weenie number of visitors of Build Easy, I really really appreciate your concern and kindness, no matter what you find about BE, be it too sleepy, too petty, or too geeky; or you just never come back at the first view of the first page, thinking what this guy thinks he's doing? My time is so precious that this site should definitely be the last on any lists of websites that I intend to visit. :

Not good, ain't it.

I have been into the semanticality of websites recently, planning to read more in that area. Semanticality refers to the semantic well-formedness. We impose semantic technologies on the web to improve its semanticality, allowing computers to read and understand texts and medias as we do. However, constructing the web of semanticality is not the only way. Mark Pilgrim's Million Dollar Markup is a good illustration. Semanticality is basically a weak-AI solution for the future web, in the other way, we can instead concentrate on a strong-AI solution with more powerful and sophisticated codes to do the job, consequently, computers' ability to read and understand relies on algorithms rather than the way we markup our information.

Good, ain't it?

There's a lot more to do with BE, most of them in my vision for a time, in fact there's too much of them that it starts to make me more and more swayy and vacantly ambitious. Not good, ain't it. But there's also so much that I have to learn, and with so many areas and channels to choose from. Exposing myself to a huge profusion of information is not always the good way to go. They daunt, confuse, and entice. Yes, they the web.

Farewell for a little while

Very upset to inform you that I have to go under a little while for some study problems. So no posts within at least couple of weeks. No presence until about a month later. But the pages of kavoir.com might continue to grow, and they really better.

Language is still a problem, blogging for the last month has done absolute good to my proficiency, but still not good enough to deal with more sophisticated topics and titles that I wish. I better hurry up. Our age of information is darting so fast and so boldly forward that everyone is afraid of being dragged behind. Learning and producing quickly is what we could really benefit from.

Web page fields as in Windows dialogs

Inspired by one of Google's pages, I have made the codes much simpler, trimming away dispensable markups and coming to the handsome field below. Check it out! A field-like container that resembles that of a dialog box in Windows. Isn't it cool to have one like this on your pages, huh?

The HTML & CSS:

<table cellspacing="0" cellpadding="0" width="80%" align="center" border="0" style="text-align: justify;">
    <tbody>
        <tr>
            <td> </td>
            <td style="font-family: Trebuchet MS; font-weight: bold; color: #0066cc" align="middle" width="33%" rowspan="2">
                Kavoir Build Easy Compendium
            </td>
            <td> </td>
        </tr>
        <tr>
            <td style="border-top:#9cc0ed 1px solid; border-left:#9cc0ed 1px solid" width="30%">

            </td>
            <td style="border-right:#9cc0ed 1px solid; border-top:#9cc0ed 1px solid" width="30%">

            </td>
        </tr>
        <tr>
    <td style="border-right:#9cc0ed 1px solid; border-left:#9cc0ed 1px solid; border-bottom:#9cc0ed 1px solid; padding: 15px; padding-top: 0;" colspan="3">
            <span style="font-weight: bold; ">H</span>ere you will find resources needed to learn web developing quickly and effectively. We offer information and tools just right for you. As simple as possible. As neat as possible. And as intuitive as possible. No more nor less. Professionally, we are out of the track. But we are able to work things out pretty admirably in an easier way. Learn it, love it. We are not geeks. We are here to create, to enjoy, and to share. We enjoy our lives with our family and friends. We come on-line for a reason, with a goal. So not until we succeed, we will not give up what we believe in the first place.
            </td>
        </tr>
    </tbody>
</table>

Look out for those highlighted codes that are essential to this effect. Other than that, spin your own versions out of it!

There's also a way to implement fields with <fieldset></fieldset> and <legend></legend> tags in the form. Using them cleverly improves the semanticality of your website.

field 1

controls for field 1 go here...

field 2

controls for field 1 go here...

The HTML:

<form>
  <fieldset>
    <legend>field 1</legend>
      controls for field 1 go here...
  </fieldset>
  <fieldset>
    <legend>field 2</legend>
      controls for field 1 go here...
    </fieldset>
</form>

A layout renewal for my Blogger

As you can see, there've been quite some minor changes in the appearance of my Blogger. In place of Bowman's default links style, more vivid colors are in position. Well, they seem to be in harmony with each other, aren't they. Grown grass, sour lime and the big green leaf, it does give out a smell of summer, does it. The right navigation is more compact and disginguished from the previous design, organized in a way that's more semantic, at least at the first glance, if you know what I mean. No major layout revolutions, might be in some time, but I think I'll stick to this simple design by Bowman for the moment. It's illuminating, plain with nothing to hide, that triggers your thirst to express.

Anyway, I did steal some of the icons from Google, please, promise me you won't tell them. :P

Except for this, I think I have come to the decision that I will go with Blogger. It's the simplicity that I cannot resist, so purely beautiful, and that it's like the climbers who are equipped with only the indispensable gears that would contribute to their success. No more nor less. However, Blogger does give you a hard time occasionally, but we'll see if we can come to a solution.

Blogger or Wordpress?

I'm totally at a loss about which to choose. I love the simplicity that Blogger carries, but Wordpress does a much better job when it comes to a website.

What am I gonna do? You'll see.