Web 2.0: 2009

Monday, April 13, 2009

HTML Entity Codes

Standard ASCII set, HTML Entity names, ISO 10646, ISO 8879, ISO 8859-1 Latin alphabet No. 1

Browser support: All browsers

ASCII		Symbol	HTMLNumber	HTMLName	Description
Dec	Hex	Symbol	HTMLNumber	HTMLName	Description
32	20				space
33	21	!	!		exclamation point
34	22	"	"	"	double quotes
35	23	#	#		number sign
36	24	$	$		dollar sign
37	25	%	%		percent sign
38	26	&	&	&	ampersand
39	27	'	'		single quote
40	28	(	(		opening parenthesis
41	29	)	)		closing parenthesis
42	2A	*	*		asterisk
43	2B	+	+		plus sign
44	2C	,	,		comma
45	2D	-	-		minus sign - hyphen
46	2E	.	.		period
47	2F	/	/		slash
48	30	0	0		zero
49	31	1	1		one
50	32	2	2		two
51	33	3	3		three
52	34	4	4		four
53	35	5	5		five
54	36	6	6		six
55	37	7	7		seven
56	38	8	8		eight
57	39	9	9		nine
58	3A	:	:		colon
59	3B	;	;		semicolon
60	3C	<	<	<	less than sign
61	3D	=	=		equal sign
62	3E	>	>	>	greater than sign
63	3F	?	?		question mark
64	40	@	@		at symbol
65	41	A	A
66	42	B	B
67	43	C	C
68	44	D	D
69	45	E	E
70	46	F	F
71	47	G	G
72	48	H	H
73	49	I	I
74	4A	J	J
75	4B	K	K
76	4C	L	L
77	4D	M	M
78	4E	N	N
79	4F	O	O
80	50	P	P
81	51	Q	Q
82	52	R	R
83	53	S	S
84	54	T	T
85	55	U	U
86	56	V	V
87	57	W	W
88	58	X	X
89	59	Y	Y
90	5A	Z	Z
91	5B	[	[		opening bracket
92	5C	\	\		backslash
93	5D	]	]		closing bracket
94	5E	^	^		caret - circumflex
95	5F	_	_		underscore
96	60	`	`		grave accent
97	61	a	a
98	62	b	b
99	63	c	c
100	64	d	d
101	65	e	e
102	66	f	f
103	67	g	g
104	68	h	h
105	69	i	i
106	6A	j	j
107	6B	k	k
108	6C	l	l
109	6D	m	m
110	6E	n	n
111	6F	o	o
112	70	p	p
113	71	q	q
114	72	r	r
115	73	s	s
116	74	t	t
117	75	u	u
118	76	v	v
119	77	w	w
120	78	x	x
121	79	y	y
122	7A	z	z
123	7B	{	{		opening brace
124	7C	\|	\|		vertical bar
125	7D	}	}		closing brace
126	7E	~	~		equivalency sign - tilde
127	7F				(not defined in HTML 4 standard)
128	80				(not defined in HTML 4 standard)
129	81				(not defined in HTML 4 standard)
130	82				(not defined in HTML 4 standard)
131	83				(not defined in HTML 4 standard)
132	84				(not defined in HTML 4 standard)
133	85				(not defined in HTML 4 standard)
134	86				(not defined in HTML 4 standard)
135	87				(not defined in HTML 4 standard)
136	88				(not defined in HTML 4 standard)
137	89				(not defined in HTML 4 standard)
138	8A				(not defined in HTML 4 standard)
139	8B				(not defined in HTML 4 standard)
140	8C				(not defined in HTML 4 standard)
141	8D				(not defined in HTML 4 standard)
142	8E				(not defined in HTML 4 standard)
143	8F				(not defined in HTML 4 standard)
144	90				(not defined in HTML 4 standard)
145	91				(not defined in HTML 4 standard)
146	92				(not defined in HTML 4 standard)
147	93				(not defined in HTML 4 standard)
148	94				(not defined in HTML 4 standard)
149	95				(not defined in HTML 4 standard)
150	96				(not defined in HTML 4 standard)
151	97				(not defined in HTML 4 standard)
152	98				(not defined in HTML 4 standard)
153	99				(not defined in HTML 4 standard)
154	9A				(not defined in HTML 4 standard)
155	9B				(not defined in HTML 4 standard)
156	9C				(not defined in HTML 4 standard)
157	9D				(not defined in HTML 4 standard)
158	9E				(not defined in HTML 4 standard)
159	9F				(not defined in HTML 4 standard)
160	A0				non-breaking space
161	A1	¡	¡	¡	inverted exclamation mark
162	A2	¢	¢	¢	cent sign
163	A3	£	£	£	pound sign
164	A4	¤	¤	¤	currency sign
165	A5	¥	¥	¥	yen sign
166	A6	¦	¦	¦	broken vertical bar
167	A7	§	§	§	section sign
168	A8	¨	¨	¨	spacing diaeresis - umlaut
169	A9	©	©	©	copyright sign
170	AA	ª	ª	ª	feminine ordinal indicator
171	AB	«	«	«	left double angle quotes
172	AC	¬	¬	¬	not sign
173	AD				soft hyphen
174	AE	®	®	®	registered trade mark sign
175	AF	¯	¯	¯	spacing macron - overline
176	B0	°	°	°	degree sign
177	B1	±	±	±	plus-or-minus sign
178	B2	²	²	²	superscript two - squared
179	B3	³	³	³	superscript three - cubed
180	B4	´	´	´	acute accent - spacing acute
181	B5	µ	µ	µ	micro sign
182	B6	¶	¶	¶	pilcrow sign - paragraph sign
183	B7	·	·	·	middle dot - Georgian comma
184	B8	¸	¸	¸	spacing cedilla
185	B9	¹	¹	¹	superscript one
186	BA	º	º	º	masculine ordinal indicator
187	BB	»	»	»	right double angle quotes
188	BC	¼	¼	¼	fraction one quarter
189	BD	½	½	½	fraction one half
190	BE	¾	¾	¾	fraction three quarters
191	BF	¿	¿	¿	inverted question mark
192	C0	À	À	À	latin capital letter A with grave
193	C1	Á	Á	Á	latin capital letter A with acute
194	C2	Â	Â	Â	latin capital letter A with circumflex
195	C3	Ã	Ã	Ã	latin capital letter A with tilde
196	C4	Ä	Ä	Ä	latin capital letter A with diaeresis
197	C5	Å	Å	Å	latin capital letter A with ring above
198	C6	Æ	Æ	Æ	latin capital letter AE
199	C7	Ç	Ç	Ç	latin capital letter C with cedilla
200	C8	È	È	È	latin capital letter E with grave
201	C9	É	É	É	latin capital letter E with acute
202	CA	Ê	Ê	Ê	latin capital letter E with circumflex
203	CB	Ë	Ë	Ë	latin capital letter E with diaeresis
204	CC	Ì	Ì	Ì	latin capital letter I with grave
205	CD	Í	Í	Í	latin capital letter I with acute
206	CE	Î	Î	Î	latin capital letter I with circumflex
207	CF	Ï	Ï	Ï	latin capital letter I with diaeresis
208	D0	Ð	Ð	Ð	latin capital letter ETH
209	D1	Ñ	Ñ	Ñ	latin capital letter N with tilde
210	D2	Ò	Ò	Ò	latin capital letter O with grave
211	D3	Ó	Ó	Ó	latin capital letter O with acute
212	D4	Ô	Ô	Ô	latin capital letter O with circumflex
213	D5	Õ	Õ	Õ	latin capital letter O with tilde
214	D6	Ö	Ö	Ö	latin capital letter O with diaeresis
215	D7	×	×	×	multiplication sign
216	D8	Ø	Ø	Ø	latin capital letter O with slash
217	D9	Ù	Ù	Ù	latin capital letter U with grave
218	DA	Ú	Ú	Ú	latin capital letter U with acute
219	DB	Û	Û	Û	latin capital letter U with circumflex
220	DC	Ü	Ü	Ü	latin capital letter U with diaeresis
221	DD	Ý	Ý	Ý	latin capital letter Y with acute
222	DE	Þ	Þ	Þ	latin capital letter THORN
223	DF	ß	ß	ß	latin small letter sharp s - ess-zed
224	E0	à	à	à	latin small letter a with grave
225	E1	á	á	á	latin small letter a with acute
226	E2	â	â	â	latin small letter a with circumflex
227	E3	ã	ã	ã	latin small letter a with tilde
228	E4	ä	ä	ä	latin small letter a with diaeresis
229	E5	å	å	å	latin small letter a with ring above
230	E6	æ	æ	æ	latin small letter ae
231	E7	ç	ç	ç	latin small letter c with cedilla
232	E8	è	è	è	latin small letter e with grave
233	E9	é	é	é	latin small letter e with acute
234	EA	ê	ê	ê	latin small letter e with circumflex
235	EB	ë	ë	ë	latin small letter e with diaeresis
236	EC	ì	ì	ì	latin small letter i with grave
237	ED	í	í	í	latin small letter i with acute
238	EE	î	î	î	latin small letter i with circumflex
239	EF	ï	ï	ï	latin small letter i with diaeresis
240	F0	ð	ð	ð	latin small letter eth
241	F1	ñ	ñ	ñ	latin small letter n with tilde
242	F2	ò	ò	ò	latin small letter o with grave
243	F3	ó	ó	ó	latin small letter o with acute
244	F4	ô	ô	ô	latin small letter o with circumflex
245	F5	õ	õ	õ	latin small letter o with tilde
246	F6	ö	ö	ö	latin small letter o with diaeresis
247	F7	÷	÷	÷	division sign
248	F8	ø	ø	ø	latin small letter o with slash
249	F9	ù	ù	ù	latin small letter u with grave
250	FA	ú	ú	ú	latin small letter u with acute
251	FB	û	û	û	latin small letter u with circumflex
252	FC	ü	ü	ü	latin small letter u with diaeresis
253	FD	ý	ý	ý	latin small letter y with acute
254	FE	þ	þ	þ	latin small letter thorn
255	FF	ÿ	ÿ	ÿ	latin small letter y with diaeresis

Thursday, April 2, 2009

Section 508 Web Standards

A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). [See Note 1]

Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

Documents shall be organized so they are readable without requiring an associated style sheet.

Redundant text links shall be provided for each active region of a server-side image map.

Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

Row and column headers shall be identified for data tables.
Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

Frames shall be titled with text that facilitates frame identification and navigation.
Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. [See Note 2]

When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet [See Note 3, Note 4, Note 5]

When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

A method shall be provided that permits users to skip repetitive navigation links.

When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

Note 1: Until the longdesc tag is better supported, it is best to use it in conjunction with a standard link to a longer description.

Note 2: "Text-only" and "accessible" are NOT synonymous. Text-only sites typically only help people with certain types of visual or cognitive disabilities. They are usually not helpful to users with disabilities.

Note 3: Standalone media players are usually more accessible than embedded media players.

Note 4: A PDF file can be made accessible to screen reader users, but it may be best to include an accessible HTML version of a document instead of or in addition to PDF.

Note 5: PowerPoint files are currently not directly accessible unless the user has a full version of the PowerPoint program on the client computer. It is recommended that an accessible HTML version be provided instead of or in addition to the PowerPoint version.

Monday, January 5, 2009

DIV Based Layout with CSS

We see it every day. As we surf the huge network of the Web, we are able to appreciate several page layouts through different websites. They run the gamut from classical but highly effective two and three-column designs, to those exotic and certainly uncommon designs which seem not to fall into a specific category.

For many years, Web designers have been sticking firmly to table-based layouts, achieving coherent and consistent looks by the use of complex table nesting techniques, gif spacers and other well-known design processes. Currently, table layout still continues to have a strong presence on the Web, since it provides wide cross-browser compatibility. Tables are pretty well supported elements for browsers, and that’s an extremely powerful reason to use them for Web page layouts. But this strong compatibility comes with an extra cost. Most of the time, nested tables introduce lots of additional markup, and increase file size, download times and server requests when using graphics as spacers, even if they are cached later.

Extra HTML pushes the important content farther down in the source code, making it less likely that a search spider will give Web pages a high relevance score for the keywords. With the use of CSS and DIV tags, we can achieve the same table-based layout effects, reduce our markup code noticeably, get faster page downloads, and separate content from its visual presentation. We are getting closer to standards-compliant code, and our Web pages are more appealing to search engine spiders.

Now, is everything good about CSS? No, unfortunately. The major drawback with CSS is that browsers don’t display reliably some CSS rules because most of them are not completely compliant with Web standards. Still, the advantages of using CSS and DIV tags for page layout are numerous, and certainly are appealing to many Web designers, as modern browsers add more reliable support.

With the pros and cons in our hands, let’s see the basics of how table design works.

The table-based approach

One of the most common page layouts using tables is easy to do with the ALIGN attribute. This is a left-hand navigation bar with a larger content section, directly to the right of it, building only two tables.

Here is the code:

<table align=”left” width=”20%” height=”100%”>
<tr>
<td valign=”top”>Navigation links are placed here</td>
</tr>
</table>
<table align=”right” width=”80%” height=”100%”>
<tr>
<td valign=”top”>Main content is placed here</td>
</tr>
</table>

We build this simple two-column layout, placing the tables as mentioned above: one is located to the left and the other is located to the right. The ALIGN attribute helps us to turn complex tables into simpler ones.

We can use this technique with nested tables too, to keep our layout easier to maintain and display, while it’s still quite appealing to search engines spiders.

A note about this: the attributes ALIGN, WIDTH and HEIGHT are deprecated elements in HTML 4.01 (they are marked for deletion in future versions), but they aren’t likely to disappear any time soon. Currently, all browsers recognize these attributes.

From this point on, we could attach an external style sheet that contains all the proper style declarations for each table, continuing to improve the code like this:

<table id=”content” width=”80%” align=”right” height=”100%”>
<tr>
<td valign=”top”>Main content is placed here</td>
</tr>
</table>
<table id=”leftnavigation” width=”20%” height=”100%”>
<tr>
<td valign=”top”>Navigation Links are placed here</td>
</tr>
</table>

The layout is the same as before, but note the ID attribute for each table. Assigning ID contextual selectors from an external style sheet allow us to build the visual appearance for data contained into each table.

So far, this is a simple sample for table-based layout. It can be easily expanded to more complex layouts, adding nested tables techniques and so. However, I would strongly recommend using DIV tags and CSS for page layout, as we shall see in a moment. Trust me.

The mighty DIV tag

According to the O’Reilly HTML Reference, “the DIV element gives structure and context to any block-level content in the document. Each DIV element becomes a generic block-level container for all content within the required start and end tags.” As we can see, the DIV tag is a powerful generic element well suited for being used as a container within our Web page. This turns it into a good candidate for creating sections or divisions (hence "DIV") of Web documents.

The concept is very intuitive. Instead of using tables as layout elements, we are going to take advantage of DIVS as excellent content containers to build our page layout. In conjunction with several CSS declarations, DIVS based layout are pretty easy to get.

Before we explain any further, two general categories used for Web page design must be clearly differentiated: “fixed” and “liquid" design. When referring to “fixed” design, we are talking about a Web page that has “fixed” dimensions. Widths (and optionally, heights) for each container element are assigned normally in pixels.

The final result of this approach is that Web pages are displayed with a determined “fixed” size, and they don’t “expand” to cover all the space in the computer monitor. Many “big” websites currently use this technique for achieving a consistent look and size across several user screen resolutions.

On the other hand, Web pages built over a “liquid” design principle will display as “elastic” documents, expanding as needed according to different monitor resolutions. Normally, dimensions for any container element are expressed in a percentage. “Liquid design,” when used properly, looks much more professional and takes one step further the definition that conceives a Web page as an “elastic” element, not a desktop document.

With all of these basic concepts out of the way, we will see different approaches for page layouts, depending on whether we follow a “fixed” design or a “liquid” design pattern.

Fixed layout design with fixed boxes

Now, it’s time to build a basic two-column layout with fixed sizes.

Here is the code for styling our DIVS:

And here’s the HTML code:

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>

The complete code is as follows:

<html>
<head>
<title>TWO-COLUM FIXED LAYOUT WITH FIXED BOXES</title>
<style type="text/css">

</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

Let’s see what’s happening here. We have given fixed dimensions and absolute positions to all our DIVS. Widths and heights are expressed in pixels, as well as top and left coordinates.

For the sake of this article, CSS code is within the same Web page, but it should always be attached as an external file. Please remember, separating content from visual presentation is a key concept that makes websites easily maintainable and accessible. The visual output for the code is the following:

Three-column fixed layout

With little additions to the code, we can easily build a three-column fixed layout. Let’s see how it works:

The HTML code is the following:

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Right Section</div>
<div id="footer">Footer Section</div>

Here is the complete code:

<html>
<head>
<title>THREE-COLUMN FIXED LAYOUT WITH FIXED BOXES</title>
<style type="text/css">

</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Right Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

Here is the visual output:

As stated above, with minor modifications to the code, we can easily add another column to our existing layout, keeping widths and heights expressed in pixels. These simple examples show clearly that once we have defined our general layout, we are able to add more DIVS into the main containers or other elements, building more complex layouts with little or no effort. In a moment, we’ll see another interesting approach for styling DIVS: floating boxes.

Web 2.0 how-to design guide

The list below is a summary of many of the common features of typical "Web 2.0" sites.

Clearly, a site doesn't need to exhibit all these features to work well, and displaying these features doesn't make a design "2.0" - or good!

Web 2.0 ?
I'm using the term "Web 2.0 design" to describe the prevailing style of web design I introduce in my current style article.

Many people use the term "Web 2.0" to describe:

a resurgence in the web economy
a new level of technological interactivity between web sites and services
or social phenomena deriving from new types of online communities and social networks

Many others also use the term in reference to a recent school of web design. I'm comfortable with using it in that context here.

In sociological terms, movements impact people on many levels: economic, cultural, political, etc. Is skate-punk about entertainment and sport, music and the music industry, fashion, or the breakdown of society?

Introduction
I'm going to take you through the features of the current wave of excellent web site designs, dissect the most significant features, explain why each one can be good, and show you how to use them in your own sites.

If I had to sum up "Web 2.0" design in one word, it would have to be "simplicity", so that's where we'll start.

I'm a great believer in simplicity. I think it's the way forward for web design.

Today's simple, bold, elegant page designs deliver more with less:

They enable designers to shoot straight for the site's goals, by guiding the site visitor's eye through the use of fewer, well-chosen visual elements.
They use fewer words but say more, and carefully selected imagery to create the desired feel.
They reject the idea that we can't guess what people want from our sites

Web 2.0