Build Easy

Build Easy is now Kavoir Magazine!

2006-12-08T22:27:00.000+08:00

Please change your rss feed URI to http://www.kavoir.com/feed/

I confess, I have an addict for icons

2006-12-08T14:47:00.000+08:00

These are tiny icons released under Creative Commons Attribution 2.5 License, offered at a price of $0.00 by FAMFAMFAM, you can't say fairer than that, can you? :P

Silk: http://www.famfamfam.com/lab/icons/silk/
Mini: http://www.famfamfam.com/lab/icons/mini/

Test with hCard

2006-12-03T13:33:00.000+08:00

Yang Yang

Xi'an Jiaotong University

ichsie@gmail.com

No.28, Xian Ning West Road

Xi'an
,
Shaanxi
,
710061

P.R.China

+86-29-82654761

AIM
YIM

This hCard created with the hCard creator.

But what the hell is this? Is it Blogger or the generated code itself is inherently broken? Oh, crap...

Hmmmm, now this is better. How do I look? :P

Real world semantics

2006-12-03T12:48:00.000+08:00

This article is an aggregation of people, blog entries, slides, conference notes and other articles writing about how to practically achieve semanticality for an existing website that's not semantically built at first.

Articles:

real world semantics
by tantek ?elik, kevin marks
Throwing Tables Out the Window
by Bowman
The Elements of Meaningful XHTML
by Tantek ?elik
Integrated Web Design: The Meaning of Semantics (Take I)
by Molly Holzschlag
Lossless XHTML
by Bill Humphries
An Evolutionary Revolution
by Ryan King

People:

Now what ------- 2 poems

2006-11-06T11:23:00.000+08:00

One of my fellow alumni (could be alumna, yeah) with the ID of Yuxi wrote an poem at the Poem board of our campus BBS, which reads

----------------------------------------------------
wait

        wait

    wait    something

            until

      until

           until the dead coming

        wandering and

             forever nomadic

                    crying

In response, this was what I composed

----------------------------------------------------
dance

        dance

    dance    intoxicated

            whirling

      whirling

           whirling in the gaze boils

        steals and

             never blessed

                    fades

A can't miss article at A List Apart

2006-10-10T21:49:00.000+08:00

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.

Modern CSS techniques for HTML lists of links - Vertical

2006-09-13T23:09:00.000+08:00

Navigational links are mostly placed in HTML lists, below is a collection of CSS techniques for making your navigation bar more stylish. For the sake of illustration, I'll use the HTML example below:

<ul id="navlist">
<li id="active"><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>

Emphasized texts are those that deserve extra attention, think about the reason of their presences and the way they are used. All the styles have passed the survival test with Win IE 6.0 and FireFox 1.5, modify and experiment freely!

Using images for bullets rather than built-in plain shapes:

#navlist { list-style-image: url(images/arrow.gif); }

wherein images/arrow.gif is the tiny image in place of the default bullets. Better be no more than 6 or 10 pixels by width.
Background images for bullets:

#navlist {
list-style: none;
}

#navlist li {
padding-left: 10px;
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}

padding-left extends the content of element li left by 10 pixels, clearing space for arrow.gif. Setting background-repeat to "no-repeat" prohibits the arrow.gif from populating the entire li element. A background-position of "0 .5em" prescribes how arrow.gif should be placed in respect to the top and left boundaries of the containing element, li.
Separaters:

#navlist {
padding-left: 0;
margin-left: 0;
border-bottom: 2px solid green;
width: 200px;
}

#navlist li {
list-style: none;
padding: 0.25em;
border-top: 2px solid green;
}

#navlist li a {
text-decoration: none;
}

Borders do the job.
Rollover lists:

#navlist {
width: 200px;
margin-left: 0;
padding-left: 0;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}

#navlist a {
display: block;
padding: 3px;
width: 170px; /* 100% won't work with IE */
background-color: #036;
border-bottom: 1px solid white;
}

#navlist a:link, #navlist a:visited {
color: white;
text-decoration: none;
}

#navlist a:hover {
background-color: #369;
color: white;
}

Displaying elements of a with a designated broad width is the key to achieve rollover effect. More stylish rollover effects can be produced by manipulating those color, background, and border properties of the a, li, and ul elements. Check out this 3D enabled rollover menu for inspiration, http://css.maxdesign.com.au/listamatic/vertical13.htm.
Bulletted rollovers:

#navlist {
list-style: none;
}

#navlist li a {
padding: 2px 9px 2px 0;
margin-left: 20px;
color: #4169E1;
text-decoration: none;
}

#navlist li a:hover {
color: #6B8E23;
background: url(/image/isit.gif) no-repeat right;
}

Check econguru.com for this bulleted rollover, when you hover over the links of home, accessibility, feedback, and contact, a gold question mark emerges to the right of each of them.

How exactly to provide Google with the sitemap for your website?

2006-09-09T23:55:00.000+08:00

Now that you know the importance of the sitemap, maybe you want to submit a sitemap to Google so that its crawlings miss none of your pages. Most search engines accept general HTML, text or the ROR sitemaps, but Google has its own standards. AuditMyPc.com provides a free service of google sitemap generation that abstracts your site into a sitemap.xml in the schema of Google Sitemaps (BETA). It is presented as java applet with easy to use interface. Follow me in 16 steps, and lead yourself to your own sitemap.

Click http://www.auditmypc.com/free-sitemap-generator.asp to open up the instruction page of the Google Sitemap Generator, and respond to your browser's warning for java applet with yes, if any, until you see a clickable image on the right side of the page, looking like:
Click it to launch the AuditMyPc.com's Sitemap Builder.
Type your website URL and make necessary changes to the default options as you like. In most cases, leaving them as implied will be OK. For more information of robots.txt and robots meta tags, please visit http://www.robotstxt.org/ .
Hit the Start crawling button to initiate the process and switch to the Crawling panel so that you can monitor the crawling.
Switch to the Site map panel, make sure the "xml" is checked for Output format, and click Save.
Now that you have a sitemap.xml, transfer it to your hosting server and put it directly under your domain, that is http://www.yourweb.com/sitemap.xml, and browse to http://www.google.com/webmaster .
Proceed with Site status wizard.
Type in the URL of your website and press Next.
Proceed on Take me to Google webmaster tools.
Sign in with your Google account if not.
Click on the domain you just added, or add it again if it doesn't appear in My sites.
After the click, you should be taken to a small information portal with 3 tags, Diagnostic, Statistic, and Sitemaps. You can easily debug the problems your sites' suffering from with the search engine of Google here, for now, let's go to Sitemaps.
You can now provide Google with the sitemap you just generated with AMP's Sitemap Builder, by clicking Add a Sitemap.
Choose Add General Web Sitemap.
Specify the URL of your sitemap.xml, http://www.yourweb.com/sitemap.xml and click Add Web Sitemap.
Done! You have submitted your sitemap.xml to Google successfully, and it will help it index your site more effectively!

Other search engines offer webmasters the opportunity to provide a sitemap, too, such as Yahoo! and MSN. Sitemaps can be provided in HTML, text, and XML. Go check 'em out!

Now I know how it feels :)

2006-09-05T22:25:00.000+08:00

Now I can tell how it feels when you know some big page links to you, :) It's delightful and encouraging. After 3 days of intermittent debugging and optimization, this afternoon I wrote an email to Bill Goffe, the editor of RFE(Resources for Economists), to try my luck. To my surprise, he replied me in no time, and kindly accepted my request to add econguru.com. He even asked me to inform him if anything new arises. This is such an encouragement that I could reall use, and sure, there will be something new from time to time. I will do my best, only time seems to be always running ahead of me. :(

Well, the last last time I believe, in one of the entries, I talked about SSI framework the 2nd; still working on my tight schedule for it, though, but almost there. It is much more nimble than the 1st release, and does no less. You can move and reshape the hierarchy of the website as you like, which means, you can move directories freely along the structure and no worries about navigation builds and keywords/description/title generation. They will all be automatically dealt with after 2 tiny alterations, namely the subcategory information of the directory into which the mobile directory is moved and that of the directory it is previously in. Doesn't matter how many directories or articles are in it or how they are structured. It is also possible to rename any of the directories or articles without the troublesome according alterations of the navigational information for all directories or articles.

Once It's got up and running, I will start immediately constructing other unbloggish pages of kavoir.com, with technological references, small tutorials, handy tools, and experimental dynamic components. It's so exciting, and yes, it will be. I want to write very small tutorials with exercise pad on the side, big characters, lively text. The less words, the better. And I will write handy web-based tools for small website building, yes, and now that I came up with this small website thing, I think everything here at Build Easy, are for small website building. Write crisp and neat pages that pleases, and compose short texts that every word is valuable and affable; unassuming logos, clear navigation. Isn't it pretty? :)

I'm closing in to the end of the SSI project, it should be concluded in 3 days or so. Really tired, and really really wish I had a girlfriend. :(

(I shouldn't have dragged my writing to this point when I feel uncomfortable to go on. But I really have no clue on how to achieve a real fluent writing style the way you speak them out. Am I supposed to write slowly first and be conscious of every possible mistake or to write in a flowing manner which gives no attention to anything else but my eagerness to express?)

Neat'n'Nice accessibility advice that are easy to follow

2006-09-02T22:22:00.000+08:00

More accessible website! Why not? People love it, and search engines love it! Let's go!

See your HTML sources, if there's no <!DOCTYPE ... > in the beginning, specify a document type for it. You can achieve this by choosing one of the examples below:

HTML 4.01

HTML Strict DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML Transitional DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML Frameset DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0

XHTML Strict DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML Transitional DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML Frameset DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Identify your language by adding a property to the html tag. Let's assume your website is in English, then write the beginning html tag like this:

<html lang="en">

Refer to Code for the Representation of the Names of Languages for more language codes. If you are using XHTML document types, add one more property so it looks like:

<html xml:lang="en" lang="en">
Construct descriptive page titles that make sense of the content, optionally with more hierarchical information.
Use real HTML built-in links rather than pseudo-links such as one that's powered by JavaScript.
Provide titles to your links, at least to those whose texts are not adequatly descriptive of the target linked to, like this:

<a href="http://www.kavoir.com/" title="Build Easy">A blog on web building</a>
Try not to open up new windows. If it's necessary, throw a warning.
Make good use of the semantic features of HTML. For instance, real tables should always be equipped with <caption></caption>, <thead></thead>, <tbody></tbody>, and <tfoot></tfoot>. Plus, a proper summary property to the table tag would also be nice:

<table ... summary="this table is about ... ">
...
</table>
Similarly, make good use of the headers tag, h1, h2, h3, h4, h5, and h6 for your content.
Lists should always be favored for lists. No tables. No manually numbered fake list with <br />, please.
Always provide a alternative text for images in the following manner:

<img src="..." alt="me and my grandma" />
It's the same with image maps, don't forget to add an equivalent alt="" property to the <area ... /> tags.
Label your form elements:

<input id="ss1" ... ></input><label for="ss1">label information for ss1 goes here ... </label>

Above are the quickest steps you can take to achieve a more accessible website, for more suggestions on making your website accessible, Mark's Dive into Accessibility is a good start. Good luck and be accessible!

We were shut

2006-08-28T18:28:00.000+08:00

No one may wonder why I have hibernated for the last 4 or 5 days without a post. It's just our network center was being moved from the 10th floor to the 1st, so we were literally shut from the internet for a small period of time. Finally, we are back on line and connected again to the pulses of the information world!

The entire instructional building is now refreshed with new colors, illuminations, information facilities, chairs and desks. Various administrative offices and the pivot of networking have been transferred to the 1st floor for the sake of convenience. Good news for us and the poor tiny elevator. The next time to renew my campus network identity, I don't have to climb a height of 10 storeys step by step any more. And it's also more easier to bug the professors in the name of your right to get a pass grade. :D

11 good practices of CSS

2006-09-28T22:33:00.000+08:00

CSS can be very flavorful, you can design a saucy website without even a single image if you are well versed in it. Yes, that's possible, only if you get to know every kiosk and trap of it with each of the major browsers. It can be quite tricky, and takes experience and experiments. Some of the good practices of CSS I know are:

Link pseudo-classes a:link, a:visited, a:hover, and a:active should always be ordered as a:link -> a:visited -> a:hover -> a:active, or L(O)V(E)/HA(T)(E) for the sake of memorization.
First give those common tags of HTML a good treat before fabricating more specific IDs and classes: body, h1, h2, h3, h4, h5, h6, p, table, thead, tbody, tfoot, th, td, blockquote, a, img, pre, form, and so forth.
Classes are used in situations where more than one peer texts or blocks are stylized the same way, otherwise, if the presentational target is unique throughtout each page, use IDs.
Don't rely on IDs excessively, though, in that it hampers the debugging. To simplify the selectors for clarity, type in the form of tag#ID/.class tag tag:pseudo, or something like that. In a word, try not to complicate, and use selectors as short as possible.
Stylize shared semantic components of your pages in different CSS files, and import them together into one core css file which is referred to from the head part of each of your pages. Or at least, separate the layout information from the in-line visuals.
CSS rules specifically designed for a single or group of HTML files will be imported to them from the head part in a separate file, like this:

<style type="text/css">
@import url(/css/specific.css);
</style>
Don't quote the url when you want to set the background to an image. It's the same under other similar circumstances when specifying a url in CSS.
Use hybrid rules rather than separate ones, except for when you insert an exception after a collective prescript.
Use relative sizes em for fonts rather than absolute ones as px, pt, and so forth.
Don't make your CSS files look too fat, write casual styles directly in HTML files with a style="" property. It's totally acceptable.
Put different selectors together for a combined stylization where necessary. This helps your CSS files look neat.

This is the most unprofessional advice ever offered about the good practices of CSS, help yourself and be my guest, comment as you like!

I'm trying, but it's turning into a nightmare

2006-08-24T20:41:00.000+08:00

Baskets and baskets of ideas, but tons and tons of study works - Ohhh, only if I was endowed with the codes written by Jesus that are able to do a Time Squeeze function! Which magnifies my time axis by 2, and thereafter I can have 48 hours a day!!

So, another day passed and nothing evolved with this site. Well, why not talk about some of my greatest insights about Build Easy. - -!

Simplicity is a virtue, indeed, but more importantly, it can be used to cover up my inability to create sophisticated web pages, haha :D . I am a practical person, and I believe the happiest ones in the world should be those who are being paid for what they love to do. Web building is one of my favourite passtimes(the others being WoW, a gorgeous MMORPG made by Blizzard, and classical music, and, part of the things happening from the global economic community), so it's a genius idea to do it well and make some money(passers-by: "Look the ego on you!"). SEO is not what I specialize, though - no, wait, please, don't direct the spotlight at me, cause' I am sweating already, thank you - the fact is I don't specialize in anything, and to the least of all, this blog, is really a bad example of the global bullshitting industry, and should be awarded the Nobel Prize in Poorest Bullshitting of this year. Undoubtedly.

'Kay, the bullshitting is enough. What I mean by nightmare is that my schedule is so tight that I almost got no time to bullshit. And look, that's half my life! My routine class time every day is from 8 o'clock a.m. to 6:30 p.m. with a 2-hour lunch break, let alone those annoying homeworks. Right after this blog entry, I will be nightmaring again tonight with professors smearing guts in my face and on my neck if I don't find myself doing the essay of Summer Toil Camp in 30 seconds. And DO NOT. DO NOT ever underestimate their capabilities and determination to kick your ass. Everything you heard about college professors is true, except when they tell you this: It doesn't matter what I think; write what you believe.

I have written several versions of SSI framework, used mainly to quickly implement static content. The first one is cumbersome, with quite a few fundtionalities realized by less than 10 instructions available with SSI. Page titles, meta description, and keywords are managed automatically, going with the depth of the page in the whole website hierarchy. Each category of content has its own navigation information that is automatically incorporated into the final page request. In this sense, every hierarchical structure of entire building has a common snippet of HTML codes that enable you to make changes to a specific set of pages immediately. For instance, we have

kavoir.com
　｜
　｜=Reference
　｜　｜
　｜　｜=HTML Entities
　｜　｜　｜
　｜　｜　｜=page1.shtml
　｜　｜　｜
　｜　｜　｜=page2.shtml
　｜　｜　｜
　｜　｜　｜=page3.shtml
　｜　｜
　｜　｜=CSS Colors
　｜　　　｜
　｜　　　｜=page1.shtml
　｜　　　｜
　｜　　　｜=page2.shtml
　｜
　｜=Tools
　｜　｜
　｜　｜=Color Scheme from Pics
　｜　｜
　｜　｜=Email Pics Generator
　｜　｜
　｜　｜=Text Pics Generator
　｜
　｜=Bullshit
　　　｜
　　　｜=Devil Dic

and change a common file of codes for all the pages under HTML Entities should be able to have a universal effect on all of them, easing the jobs of adding, deleting, or maintaining a specific gadget to a specific group of pages. The website is more flexible when each category can be moved around freely without the panic of navigation disorder, because the SSI framework is made to deal with such situations wherein the navigation is almost automatically rebuilt for you - of course, one or two alterations to the meta files of each category are unavoidable. Above all, SSI is a good friend if you stay away from the complex and confusing webs of directives when it grows big - like this one. And it is why I abandoned it and decided to write a simpler one.

The second is even more flexible that you can move different categories around without any necessary changes to the meta files. Nevertheless, it is deprived of the capability to generate hierarchical navigation bars accordingly. And you know what, I might have a better plan, that is, to make every category an self-contained unit.....................................BULLSHIT!!!!!Yet again, another weird dream...........upohhhhh

I'm gonna hit on the essay now, bye~~~~~~~~~~love ya~~~~~~~~

First of all, SSI: How easily you can maintain your website

2006-08-21T10:58:00.000+08:00

One of the best things you can do with SSI(Server Side Include), is to slice a normal HTML page into several common parts such as header and footer, so that you can more easily update a website of hundreds of thousands of pages for just a slight alteration of a single file. And this is accomplished by the following directives:

<html>

...primary content goes here...

</html>

(I used HTML entities to represent tags in this example. Chances are you will encounter some cases where the use of an HTML entity is necessary, such as when you are writing copyright notice. So why not have a look at the HTML entities page I have made? It's here!)

As you have guessed, codes between the HTML tags are those that we want to display in the client's browser, while header.txt and footer.txt contain the HTML snippets that are used throughout the whole website. Instead of putting them directly in all the HTML files, we have abstracted them into separate files and linked them from the files that need them. In this way, once we feel like deleting a link in the navigation bar, for example, we just remove the corresponding codes in the header.txt, and effects are immediately seen throughout the website. Maintenance made much easier, huh?

However, merely inserting a directive like  into a normal HTML file with an extension of .html or .htm doesn't give you the advantages described to you. You have to name it with .shtml, or it won't work. Remember, as long as there are SSI directives you want the web server to parse, you should name the file containing them with an extension of .shtml. And what if you write a directive like this:



In this case, the server first read the directive, locate the header.shtml, parse it, and then replace the above directive with the parsing results of header.shtml, which in turn, contains some directives to follow. In the first example, however, the header.txt is not parsed for SSI directives, because it has no .shtml extension. The web server simply read the content in a verbatim manner and put them in the place of the directive including header.txt.

In addition to the SSI pages of kavoir.com, more complete and authoritative resources can be found at apache.org.

Before I can concentrate

2006-08-18T19:32:00.000+08:00

econguru.com is almost on its own stand now, I am beginning to check for literal mistakes(mispellings, gramatical errors and so forth), broken links and minor accessibility issues before the search engine submission. After that, I would only add a resource or two every other day to make it up to date, and check links once upon a month or so. Websites need supply and refreshments to be alive. You should provide content to them on a regular basis.

After all the construction and inspection jobs' finished, the maintenance should be easy in that I have used SSI for the skeleton of all the pages; and I will have my focus on the blog of Build Easy. Up to this point, I notice my English is still not good enough for a fluent or streaming writing style, I can't fully concentrate on my thought when my improficiency with English hinders me. Hope it would turning better with more upcoming entries.

Let's get back to Build Easy. I love this name, so I decide to work hard to make it as excellent as possible. Despite this blog you have seen, more things like handy reference pages, small tools, simple and pleasant tutorials of web building technologies and techniques are to be added on kavoir.com. It takes time, surely. I don't have much time to spare and I want this website to be useful and at the same time, graceful. One of the most popular advice for all crafts, is to think your way, and establish a unique style of your own. It also takes time, but I am trying, and you should, too. :)

Things to make Blogger sexier

2006-08-13T13:10:00.000+08:00

I've been with Blogger a little while, okay, one month. Overall, it's a very outstanding blog publishing platform. I love them for they let me do blogging with their system without being branded with their name, if you know what I mean. (Wow, what an expression with with ... without ... with, have you ever seen that before?) On the other hand, it would have been perfect if they had considered something I imagine of to provide to the users.

Data backup and export.
Backing up is a fundamental function that Blogger should not have missed. Perhaps they think that, okay, now that we are publishing content to HTMLs on another host, why bothering to code a button that backs things up. They are actually copied to another place upon publication, aren't they, only in a different format. Hmmm, sounds reasonable, right, I give in. (I'm such a jerk.) However, while -
Backup is good, export is better, I believe. This enables the users to export their whole blog or selection of entries to such cute popular serious formats other than HTML as TEXT, XML(not to mention DocBook as well as various other solid XML destinations), PDF, and even more. You name it. But wait, will Blogger continue to be free when it offers us this? The answer is clear. That it is. Impossible. And negative. Daydreams do no harm, do they.
Template customization layer.
The DocBook guys took applicable customization into account from very early versions of DocBook when it still depends on DTD for schemes. And a customization layer is the snippet a user put in the beginning that redefine one or more parts of the official DocBook scheme. Very intuitive and easy to maintain, also less error-prone. Unlike Blogger, it doesn't force your eyes to painstakingly locate the codes dispersed all around everytime before committing any modifications; DocBook customization layer is all at the top of the entire official scheme, so add or modify your own layer, and that's all. More importantly, this layer is preserved when you update the official scheme. You just put your customization layer on top of the new DocBook, and everything's done. On the contrary, all the information including previous styling and marking-up must be provided to Blogger again when you want to use another template. It's no easy task, let alone the errors you may incur.
Account settings export or sharing a common setting XML among selected blogs.
Sometimes it's necessary to make changes to the settings of various blogs at the same time, or you just want to synchronize them so that they are in the same pace. Blogger could well maintain XML sockets for every single blog, and let the users to upload their XML to the server and choose to plug one or more of them into the sockets of each of their blogs. In this way, blogs plugged with the same XML will have some of the settings in common. (Hey you geek, is this necessary? The tweaking job takes days to accomplish for you, does it.) Hmmm, that's a thinker. So see this. Why not trying to integrate this settings XML into the custimizatino layer we just talked about, every blog has only one template at a given time, right?
There's a text color button in the WYSIWYG editor, so why don't you treat me with a background color button?!
Cause' I love it.
Enable the users to integrate some of the customized styles into the WYSIWYG editor as buttons.
For instance, I frequently site code snippets in my work, so I make up a div idded myCode and the corresponding CSS styles. Without the button for it, it would be necessary for me to dive into the mess of HTML, scroll, and find the exact place of the target content to add this markup manually everytime I want to site a snippet. With the button, I just select the tract and push. It's much easier.
Display HTML tags in colors when editing HTML.
Like some local HTML editors do. A general well aware of where his soldiers are is more likely to triumph over one who doesn't.

Maybe I can write my own blog publishing scripts with PHP? No I can't. So Blogger, would you please do me the favor? Noooo you won't.

The machining window

2006-08-09T15:59:00.000+08:00

Since this is getting more and more interesting, I cannot help but writing the idea down. It may not be original - coming up with something totally original is much too difficult at an era of information and knowledge explosion such as this for anyone - but what does it matter.

A machining window is actually an ongoing or ever changing agenda or tasklist placed on the side of your working blog that keeps track of your future plans, current projects, and accomplished jobs, be them blogs, articles, programs, compositions, drawings, audios, videos or any other sorts of weird stuff. Visitors see it, so they know what's upon you recently, or what to expect from you in a near future. Beyond the visible window, backwardly they can also explore your past undertakings, achievements and experiences. And forwardly, you may write some long-term goals or plans in a big advance and alter them from time to time. As you come near of those that you planned years ago, isn't it exciting to know that you have made these plans and goals and actually carried them out along the way!

To plan or not to will do quite differently for you. Think about it! (Thumb high)

A test entry posted with Writely

2006-08-05T18:42:00.000+08:00

KBE Mission Statement

Testing with Writely

Header 1

Header 2

Header 3

Kavoir Build Easy, or KBE, is the ultimate blog based website that boosts novice web development.
Access the website: KBE

Here 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.
2¹⁰=1024,
A₁, A₂, A₃
~~This is absolutely bullshit!!! Yet more nonsense!!!~~

Poeple love lists, don't they.

O'er all the hilltops,

Is quiet now.

In all the treetops,

Hearest thou

Hardly a breath.

The birds are asleep in the trees.

Wait: soon like these,

Thou too shalt rest.

(Style => Block quote isn't working.)

Arial: Potato
Arial Black: Tomato
1. Arial Narrow: Apple
2. Book Antiqua: Lotus
3. Century Gothic: Big Leaf
Comic Sans MS: Banana
Courier New: Watermelon
Fixedsys: Max Leaf

Garamond: Harvard
- Georgia: Law
- Impact: Management
- Lucida Console: Dentistry
Palatino Linotype: Stanford
- Symbol: Math(Symbol) - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
- System: Economics
- Tahoma: CS
Times New Roman: MIT
Trebuchet MS: UCLA
Verdana: Columbia
Wingdings: Cornell(Wingdings)abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

11	12	13	14	15
21	22	23	24	25
31	32	33	34	35
41	42	43	44	45

O'er all the hilltops,

Is quiet now.

In all the treetops,

Hearest thou

Hardly a breath.

The birds are asleep in the trees.

Wait: soon like these,

Thou too shalt rest.

Excerpt from Wanderer's Nightsong by Goethe

Steinway & Sons

So, this is a new page??

Special characters you can insert from the menu: ¶ ŋ and more....

Okay, I think that's all.

hi,,there

2006-07-31T22:33:00.000+08:00

Build Easy is a blog dedicated to web building topics. In here, you can find resources and everything you need to build at an ease and leisure manner. Web design and implementation should be fun and relaxing. Good websites convey ideas, reflect the whole thinking process and personality of the creator, so just sit down, drink some tea, and be yourself in this playground....

In fact, I don't have much experience in web building, except for some very small but snug undertakings such as the most recent econguru.com. But I do enjoy the process, so I want to share with you. I will frequently write articles about fundamental technologies like HTML, CSS, and useful techniques, as well as good practices that are commonly accepted by the industry. PHP is my dynamic web language, still experimenting and making mistakes on it, though; on the other hand, I'm not quite familiar with JavaScript, for I haven't used it too often, because I don't like my HTML being dispersed with scripting codes here and there, despite the fact that some nice and handy functionalities of web pages are usually impossible without it.

Moreover, something I should mention is, this blog is actually my first in the language of english. Experimental it is, I think I will manage to write things as I intend to express, which, seems a little too ambitious, in that I don't write too much before. But it's a good start, isn't it. I hope you can understand me fully, and I can express myself freely and fluently. :)

OKay, that's all for today. I've got some exams to see to tomorrow, better hurry up, so bye for now!

Iconaholic.com - Real free icons

2006-10-08T12:32:00.000+08:00

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.

A Checklist of XHTML for Semanticality

2006-10-06T20:36:00.000+08:00

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

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!
Paragraphs: p element
A paragraph is a paragraph. Round your paragraphs with real p elements. NO br elements to fake it!
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.
Emphasis: em, strong elements
em and strong elements are for emphasis of texts, use cite for citations rather than them.
Citation: cite element
Mark up the name of a citation or reference with this element, inlinely.
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.
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.
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.
Computer codes: code element
Mark up computer codes like C++, XML, CSS and so forth with this element.
Computer variables: var element
Mark up programming variables with this element.
Keyboard text: kbd element
For keyboarded text, or user provided information to a terminal.
Abbreviations: abbr element
For abbreviations.
Acronyms: acronym element
For acronyms.
Addresses: address element
Mark up addresses or authorships with this element.
Table captions: caption element
The content of a caption element appears atop the table as title.
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.
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.
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):

Make meaningful id and class names.
Alternative text for images: <img ... alt="..." />
Always provide an alt attribute to images, i.e. img elements.
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.
Table summaries: <table ... summary="...">...</table>
Always provide a summary for real tables.
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.

Very likely to switch to Movable Type

2006-10-06T23:29:00.000+08:00

Hope it would not disappoint me this time.

To improve the semanticality of your website

2006-10-06T13:41:00.000+08:00

Why? You may ask. Because...

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

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

Your markup makes sense to anyone, including computers, whether today or later, making your pages endure.
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)

2006-10-06T11:16:00.000+08:00

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

2006-10-06T10:44:00.000+08:00

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.