tag:blogger.com,1999:blog-142152212024-03-08T15:08:42.872-08:00New Wave WebAbout the new generation of
Web application development.
DHTML, JavaScript, user interfaces,
development tools, and personal interest.Cris Perduehttp://www.blogger.com/profile/07052469150350880565noreply@blogger.comBlogger8125tag:blogger.com,1999:blog-14215221.post-1141994637518499442006-03-10T04:42:00.000-08:002006-03-12T08:27:29.473-08:00So Sweet with Ruby<p>
The <a href="http://www.ruby-doc.org/">Ruby</a> programming language
can be so sweet. (Ok, this is a bit off-topic, but still cool Web
development subject.) I wanted to do some custom Web log analysis
recently using Ruby, and it just came out so nicely, a clean
object-oriented class in no more than ten lines of code, and a trivial
filter. Ruby Structs, regular expressions, and language conveniences
to the rescue! I just had to put it on display.
</p>
<p>
First, a Struct named <tt>WebLog</tt> to contain the data from
the regular expression match:
</p>
<pre>
Struct.new("WebLog", :all, :host, :ident, :user, :time_string,
:method, :url, :http, :stat, :size, :ref, :ua)
</pre>
This defines accessors for each named field so you can use it rather
like a C struct, e.g. <tt>log.host</tt>, <tt>log.stat</tt>.
<p>
Then a subclass, with the regular expression tucked away in a class
variable. (This RegExp expects "combined" log format.)
</p>
<pre>
class WebLog < Struct::WebLog
# host ident user time method url http stat size ref ua
@@expr =
/^(.*?) (.*?) (.*?) \[(.*?)\] "(.*?) (.*?) (.*?)" (.*?) (.*?) "(.*?)" "(.*?)"$/
def initialize(line)
super(*@@expr.match(line))
end
end
</pre>
<p>
The <tt>initialize</tt> method runs as part of every call
to <tt>WebLog.new</tt>. It calls <tt>super</tt>, which invokes
the <tt>Struct::WebLog</tt> initializer, and passes all of the match
data resulting for the given line. The result is an object with the
match data parsed into field.
</p>
<p>
In the code, <tt>@@expr</tt> means a class variable named <tt>expr</tt>, shared
by all instances of the class. The result of <tt>@@expr.match</tt> works
like an array: the superclass <tt>initialize</tt> method expects arguments
for each member of the struct, and the <tt>*</tt> operator in a method call
unpacks any array-like structure into an argument list.
</p>
<p>
The rest of the code runs a custom log analysis. <tt>ARGF</tt>
contains all the lines of all the files on the command line, or if
none are give it contains all the lines of standard input. This
creates a WebLog object for each line and prints its user agent string
(ua). How much neater could it be?
</p>
<pre>
ARGF.each do |line|
matches = WebLog.new(line)
puts matches.ua
end
</pre>Cris Perduehttp://www.blogger.com/profile/07052469150350880565noreply@blogger.com2tag:blogger.com,1999:blog-14215221.post-1141768978764742692006-03-07T13:55:00.000-08:002006-03-07T14:04:11.656-08:00Animated Reveal Effects<p>
Power and rich content can also mean clutter. Hiding some of the content or power until needed can help minimize clutter, and animation can help to guide the user's attention. Effects that reveal hidden content with animation can be built with the right CSS and JavaScript, even without heavy programming.
<p>
It is not strictly necessary to use absolute positioning in all cases, just two nested elements, <tt>overflow: hidden</tt> and explicit height or width in the outer one. Because of the browser scripting, it was not possible to put the full demonstration into Blogger, but there are two versions at:
<p>
<a href="http://perdues.com/iwp/reveal.html">http://perdues.com/iwp/reveal.html</a>
<p>Cris Perduehttp://www.blogger.com/profile/07052469150350880565noreply@blogger.com0tag:blogger.com,1999:blog-14215221.post-1137372327801648762006-01-15T16:29:00.000-08:002006-01-15T16:50:52.946-08:00The Business Case for Better Web UI<p>
A friend asked recently if I had a response to comments at the
O'Reilly Web 2.0 Conference panel on Ajax back in October, with Joe
Chung of Allurent, Peter Merholz of Adaptive Path and others. Chung
had commented that, "The business owners understand the technology now
and have become the drivers," Chung said. "But to really understand
the ROI, you have to bring in statisticians and do a controlled study.
Your hunches aren't good enough anymore." Merholz is also quoted saying,
"Right now the business case is largely around the experience.
It's going to have to get more finalized, and pretty soon, to
drive adoption."
<p>
These comments are not so far from the mark, but they miss some key points
that deserve mention as well. In the end the market forces for better
Web UIs are strong, and what I see going on in the marketplace shows that
the momentum is real. Let's break the analysis down a bit further into
its parts, and look at the dynamics of the movement.
<p>
Designers and others I talk to tend to break the user experience benefits
down into two related parts: efficiency and satisfaction.
Efficiency has to do with issues like speed of operation and reduction
in user mistakes. It is more measurable, like with a stopwatch.
Fatigue and unpleasantness of the UI are more on the side of
satisfaction, and you probably have to ask the users how they feel.
<p>
It's also pretty clear to me that usability is also driving
acceptance of new Web-based services. Right now it is the
younger, trendier, and more early adopter groups who tend
to flock to sites with better user experience. Myspace is
a good example of a site that is attracting huge numbers of
young people, and they adopt newer and slicker techniques to
catch their users attention and interest and to let them do
things very quickly, which the Internet-oriented generation
seems to strongly prefer. So usability plus general appeal
tend to spell acceptance. As the newer user interface
technologies spread, they will increasingly become a requirement
that users will impose on the service providers.Cris Perduehttp://www.blogger.com/profile/07052469150350880565noreply@blogger.com1tag:blogger.com,1999:blog-14215221.post-1134928774045738422005-12-18T09:45:00.000-08:002009-07-01T21:25:44.873-07:00CSS and Pop-up Forms<p>
With "Ajax"-style unobtrusive server communication there are
many opportunities to take information from users with less
disruption to the continuity of their interaction
with the Web site. In may cases the use of XMLHttpRequest
and processing the server response do not have to be complex,
and the CSS for the user interface does not have to be
complex either, but it can be be rather specialized and
unfamiliar to designers. Let's take a look at the CSS for
a simple guestbook implemented as a pop-up form. The user
triggers an event that pops up the form, which will submit
to the server in the background, without taking the user to
a new page.
</p><p style="border: 3px solid gray; padding: 0.5em;">
<a href="javascript:var%20f=$('regform');%20f.style.display=(f.style.display=='block'?'none':'block');%20%20/*%20$('namefield').focus();%20*/%20void%200;">Register yourself</a>.
</p><div id="regform" class="popup" style="margin-top: -0.4em;">
<form name="form1" method="post" onsubmit="$('regform').style.display='none'; return false;" class="subtle small" style="position: relative; left: 1em; top: 2px;">
<table>
<tbody><tr>
<td class="label">Name:</td>
<td><input id="namefield" name="name" size="30" type="text"></td>
</tr>
<tr>
<td class="label">Email:</td>
<td><input name="name" size="30" type="text"></td>
</tr>
<tr>
<td class="label">Birthday:</td>
<td><input name="name" size="30" type="text"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input value="Register" type="submit">
</td>
</tr>
</tbody></table>
</form>
</div>
<p></p>
<p>
When the user clicks on the link above, a small form pops up. When the
user submits the form successfully, it disappears again, perhaps leaving
behind a confirmation message. In this article, let's focus on CSS
techniques that can help create this kind of form.
</p><p>
Almost any pop-up is built from an element with absolute positioning.
The CSS for this does not have to be complex. Elements with absolute
position are often defined inside an element with
<tt>position: relative</tt>, but this is not the only way. In fact
if an element has <tt>position:absolute</tt> but no explicit
location (unspecified left, right, top, bottom), CSS will position it
at the same point where would appear if it were part of
the flow.
</p><p>
In our example, almost all the work is done just by defining the pop-up
through a DIV with <tt>position: absolute</tt>, but in this case we
have used one more small trick as well -- using <tt>position: relative</tt>
inside the definition of <i>the pop-up itself</i>. By putting all the
displayable content of the pop-up in an element with relative position,
we move the location of the element a little bit down and to the
right from where it would
otherwise appear when visible. The structure of the HTML defining our
pop-up is:
</p><pre>
<p>[ Link or other control to invoke pop-up ]
<div style="position: absolute; display: none;">
<form style="position: relative; left: 1em; top: 2px;">
. . . pop-up content goes here . . .
</form>
</div>
</pre>
<p>
This simple combination of HTML and CSS define the positioning of
our pop-up form. Static content can also be conveniently popped
up in this way. In this case you would probably use a second DIV
in place of the FORM tag used here.
</p><p>
</p>Cris Perduehttp://www.blogger.com/profile/07052469150350880565noreply@blogger.com15tag:blogger.com,1999:blog-14215221.post-1134762083526427942005-12-16T11:40:00.000-08:002005-12-18T11:03:07.146-08:00Connecting with Information<p>
We all seem to find that getting information is a part of getting our needs and desires met. We want to be close to our friends. We are looking for some fun, to get a job done. We'd like to find the tastiest, juiciest, most interesting and best of everything around us, and connecting with information is a part of that. This is search, but also something larger than that.
<p>
Search engines are great, but they are so objective and so cold! They give everybody the same answers to the same question. We want answers that match our taste and interests, our values, our sense of what is Good and what is not. So we read blogs, subscribe to RSS feeds we like, we tag things, keep in touch with our favorite communities, and look for sources of information and opinion that work for us.
<p>
People have discovered that they like being part of a group with common interests more than hearing a few points of view broadcast to them. We like to feel ourselves in charge of forming our own opinions and deciding what we like, and why not? Participation is often cited as a key feature of the new-style Web. As a trend, I think the desire each of us has to connect with the information as well as the people we personally prefer is one of the really large forces that will continue to shape the Web over time.Cris Perduehttp://www.blogger.com/profile/07052469150350880565noreply@blogger.com0tag:blogger.com,1999:blog-14215221.post-1134760980902412612005-12-16T11:21:00.000-08:002005-12-18T11:04:03.026-08:00Where to?<p>
The Web has changed since the rise of the <u title="(Yahoo, Google, Amazon, ... )">Big Internet Companies</u> , and for the better. Many of those companies are doing fine, still providing useful services, and even <u title="(Google Maps, A9 search, Yahoo mail ... )">getting better</u>, but there is an awful lot more going on.
<p>
Collaboration is big, for example <a href="http://wikipedia.com/">Wikipedia</a> as a major Internet resource. People networking, sharing ideas, sharing photos, just about sharing germs. Open source was already big, but it's just getting bigger and taking a big role in software innovation.
<p>
The people are speaking more and louder than ever with Blogging, RSS, and podcasting.
<p>
And more and more, the people are sifting, sorting, and rating it with tools like <a href="http://slashdot.net/">Slashdot</a>, <a href="http://del.icio.us">Del.icio.us</a>, or even <a href="http://digg.com/">Digg</a>. In this space, commercial sites offer ratings of just about any product sold at retail, from cars to movies to coffee machines.
<p>
Is there a bigger picture behind all of this? Perhaps some principles that illuminate the subject and shows what it's all about? Let's ask, "What do people really do with information?" we <i>search</i> for it, <i>add</i> to it, and <i>update</i> it. We may do this to get a job done or to connect with other people, for entertainment, etc., but these are the activities, the steps in the dance. I'm going to view the changing Web universe this way, for an article or two.Cris Perduehttp://www.blogger.com/profile/07052469150350880565noreply@blogger.com0tag:blogger.com,1999:blog-14215221.post-1130351170625710032005-10-26T10:39:00.000-07:002005-12-18T11:04:41.723-08:00Luck and Skill<p>
So down-to-earth. Sergey Brin showed up on the last day of the Web
2.0 conference this month as <a href="http://business2.blogs.com/business2blog/2005/10/sergey_brin_the.html">reported</a> and <a href="http://www.rc3.org/2005/10/sergey_brin_on_luck.php">also here</a>. He made a few comments, starting with:
<blockquote>The No. 1 factor that contributed to our success over the past seven years is luck. One of the biggest mistakes people make in assessing their success or failure is discounting the effect of luck. </blockquote>
This is probably a bit on the modest side, but it is a becoming modesty. The <a href="http://www.google.com/corporate/tech.html">PageRank</a> approach (see also a detailed <a href="http://www.iprcom.com/papers/pagerank/">external</a> analysis), does seem to be based on key insights. All the same, he was there the whole time and he is in a good position to know.
<p>
His comments remind me a bit of comments in a letter written by Abraham Lincoln. "I claim not to have controlled events, but confess plainly that events have controlled me." (to A. G. Hodges, April 4, 1864)
<p>
Or from the bible, "the race is not to the swift, nor the battle to the strong, neither yet bread to the wise, nor yet riches to men of understanding, nor yet favour to men of skill; but time and chance happeneth to them all." (Eccesiastes 9:11), and the Damon Runyon coda, "The race is not always to the swift, nor the battle to the strong, but that's the way to bet."
<p>
Good luck to all of us!Cris Perduehttp://www.blogger.com/profile/07052469150350880565noreply@blogger.com0tag:blogger.com,1999:blog-14215221.post-1120585710497113772005-07-05T09:52:00.000-07:002005-12-18T11:06:12.133-08:00IntroductionWelcome to the World Wide Web portion of myself.
<p>
I'm a long-time software developer and computer scientist with a
fascination for information-processing tools and the ways
computers can change the way we work and live. Since the end of
the dot-com bubble, like a lot of other people I see a
revolution happening in the ways people receive information
about their world, communicate and interact with each other,
where digitally-supported social networking is becoming one of
the most important means of communication among people, and
where the line between digital social networking and publishing
is vanishing.
<p>
In my own smaller and more specialized part of the digital
world, true interactivity has started to reach the Web. There is
a realization that Web-based software applications are not
limited to just looking nice; they can also act nice.
Interacting with a Web server no longer is no longer the digital
counterpart of communicating with a clerk by passing a form
through a slot and having it handed back with red marks on it.
In the new generation of Web applications the user can have a
digital conversation with a Web page where server-based
intelligence can apply at any time.
<p>
Web pages become like control panels where user activity can
affect the outside world at whatever interval is appropriate to
the application. This new kind of interactivity is now going by
the name of Ajax, and this blog is about what interests me about
what is happening in the development of that world.
<p>
Tools for building software has been a particular interest for
me for many years. I have always tended to feel deep inside,
that where software is concerned, if you can really imagine it,
you can build it, and that there are not good long-term reasons
why there should be a big gap between clear imagination of
software and the building of that software. This vision has been
gradually happening, and through the Web more than anywhere. It
isn't going to become suddenly complete, but it powers my
imagination.
<p>
My hopes for this blog are that it will reflect some points of
view about the Web, Ajax applications, and Web application
development; and that it will be of interest to some people.Cris Perduehttp://www.blogger.com/profile/07052469150350880565noreply@blogger.com0