PDC 2008 Web Related Videos
I've compiled a list of PDC sessions that cover topics related to the new features of ASP.NET and Visual Studio.
"Since 1991, the Professional Developers Conference (PDC) has been Microsoft’s premier gathering of leading-edge developers and architects. Attend the PDC to understand the future of the Microsoft platform and to exchange ideas with fellow professionals. You’ll learn about upcoming products, meet Microsoft’s leaders and top engineers, write some code, and be inspired! Unplug for a few days and think about the future."
ASP.NET 4.0 Roadmap
http://channel9.msdn.com/pdc2008/PC20/
ASP.NET and JQuery
http://channel9.msdn.com/pdc2008/PC31/
Microsoft Visual Studio: Web Development Futures
http://channel9.msdn.com/pdc2008/TL48/
ASP.NET MVC: A New Framework for Building Web Applications
http://channel9.msdn.com/pdc2008/PC21/
Google Chrome Browser Thoughts
For years we have been accustomed to the tabbed browser interface and how helpful this is to manage your browsing sessions. This trend in software has been so successful that its hard to imagine a browser without these tabs. There is no doubt that while viewing a large collection the potential it has to start tying up your computers resources and may not entirely give them back when you've closed the tab either. Another concern is that when one tab has a problem processing a request, your browser will likely crash and take all of your other tabs with it if you're not careful!
Its almost been a week now since Google's new Chrome browser has been released to the public and from what I've been seeing, the response has been overwhelmingly good. While its too soon to tell how much adoption the new browser will have especially to your average web user, if this past week is any indication of this then we may have one serious contender on our hands.
The idea behind the new browser was Google's acknowledgment of how much time we spend online conducting our daily business, whether it be online banking or sending email. Sites are being developed now that are capable of performing much more complex tasks than we would have ever imagined 15 years ago when web browser were first introduced. This realization has given way to finding a better browser architecture capable of dealing with the high demands of sites such as online word processors, airfare booking, maps and many other types rich internet applications.
So I guess the more important question is should you be using Chrome in its current development state? Do you like to jump in feet first and test the waters with a whole new experience? Are you not concerned with bugs, incompatibilities or worse.. potential security holes? Then by all means, this is your browser. Now don't get me wrong, this isn't trying to imply that there is anything wrong with treading new ground and pushing new technology. For myself though, I'll be mostly using Chrome as a fun new toy to experiment with rather than migrating over entirely. What I'm really interested in seeing is what will come out of the open source community that is actively working on the browsers core which I believe in time that we will see great things come out of the chromium project which powers Chrome. While there is no certainty that Google Chrome itself will come out on top when its all said and done, but there is no denying that it will be known as the browser that was at the forefront of a new undertaking in how we think about today's web applications.
Pros:
Introduces a new way of thinking about how browsers work
Innovate way of handling complex websites with V8 JavaScript rendering engine (complied)
The UI is simplistic (the browser should be transparent)
Everything is open source!
Cons:
Google is a company that is best known for it's services NOT it's software.
The UI is simplistic (I miss having my firefox plugins at my disposal)
As if web developers need one more browser to test on
Too early to tell its adoption rate
Clearing CSS Floats
Here's a quick tip that will be useful for dealing with content that "overflows" outside of the normal boundaries. Any web designer I'm sure has encountered this issue at some point or another and you may be surprised to find how easy it is to correct. In this example we have an outer div "main content" area in green with a gray div "column" floated to the left with more content than the area will contain given the column's width. As you can see in the example, the result is that the floated column extends beyond the lower boundaries of the outer div. This is less than ideal, especially when your site's content is generated dynamically.
This first solution has stood the test of time and is known as the clearfix method. This technique uses the :after pseudo-element which is supported by CSS2 compatible browsers. Unfortunately, this doesn't include Internet Explorer 7 and below. You may notice that there is actually two style blocks for our CSS and that is because we are using conditional comments that will target any Internet Explorer browser and use the proprietary hasLayout CSS attribute that must be commented or else your page will not validate.
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style><!-- main stylesheet ends, CC with new stylesheet below... -->
<!--[if IE]>
<style type="text/css">
.clearfix {
zoom: 1; /* triggers hasLayout */
} /* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
</style>
<![endif]-->
Another method uses an additional <div> element on the page with a style of "clear:both" which will force your container to accommodate the cleared element. While just as effective as any of the other methods, there is the concern of adding additional "meaningless" markup to your pages.
<div id="outer">
....
<div style="clear: both;"></div>
</div>
Finally there is a relatively newly discovered technique which is quite easy to implement and is one which doesn't require additional markup. It simply involves adding a "overflow: auto" property to the outer <div> element.
Half an hour of testing later, I was amazed to find Paul was 100% correct - as this example shows. It seems that reminding the outer <div> that it’s overflow is set to ‘auto’, forces it to think "oh yeah.. I’m wrapping that thing, aren’t I?".
-Alex Walker, sitepoint.com
So there you have it, three different techniques that will help you clear all of those pesky float issues.
Creating online forms with Google Docs and WuFoo
Designing the login form was one thing, but how about if you wanted to create something a little more lengthy and use it to obtain meaningful data from your readers. Well you may just find what you're looking for using Google Doc's new form builder. This is just one of the products that Google offers as part of their online productivity suite. As always you will find that the interface is clean and only takes a couple minutes to understand how to get it up and running. You can also specify required fields which is a nice touch.
The form results are displayed to you in a nice pie chart. The actual data is output into a spreadsheet behind the scenes if you need to use it for any other reason which is a nice touch as well.
An alternative service that I also recommend is called WuFoo. This service is free to try and allows for further customization of your web forms. I kid you not when I say that seemingly everything that you could ever want is included with this service such as phone number and date fields which include custom validation messages built in. There is a monthly fee as your usage increases however.
For me personally, Google Docs does just fine for my needs. Feel free to give your ice cream preference if you'd like to try out a sample form.
Creating a login form with jQuery
Creating a login (or any form for that matter) can be trickier than it looks. After all how difficult can two text boxes a button and some labels be? There are different ways to accomplish this task, some using more proper semantically correct markup techniques than others. This example will attempt to give a real world case of how easy it can be to target elements contained inside the form with minimal scripting using the jQuery framework.
We'll first start out with some html markup, notice the lack of css class attributes or JavaScript event handlers present.
<fieldset> <legend>Log In</legend> <p id="loginResult">Invalid login.. try again.</p> <form id="login" method="post"> <dl> <dt><label for="username">Username:</label></dt> <dd><input id="username" type="text" /></dd> <dt><label for="password">Password:</label></dt> <dd><input id="password" type="text" /></dd> </dl> <p><input type="submit" value="Login" /></p> </form> <small>u:username / p:password</small> </fieldset>
The next step we take is to target each element down the list and assign it a css class. We do this by using jQuery's element specific selectors :text and :submit.
$(function(){
$('form#login :text').addClass('inputTextbox');
$('form#login :submit').addClass('inputSubmitBtn');
});
Next, we'll add the event handler for the submit button by using .click(). To make things easier on ourselves we could always shorten our code by chaining the click event at the end of our submit button selector which was already defined in the previous step.
$('form#login :submit').addClass('inputSubmitBtn').click(function() {
// click event code
}
Throw in an animation for good measure to display a message for invalid attempts and you're good to go. Here is the full JavaScript code we're working with.
$(function(){
$('form#login :text').addClass('inputTextbox');
$('form#login :submit').addClass('inputSubmitBtn').click(function(){
if($('#username').val() != "username" || $('#password').val() != "password")
{
for(i=0;i<5;i++)
$("#loginResult").animate({opacity: 'toggle'}, 500 );
$("#loginResult").fadeIn(500);
return false;
};
});
});
Greetings
- @SilverlightTV ummm.. a SilverlightTV koozie? in reply to SilverlightTV 6 days ago
- More updates...
Recent Posts
- Agile Development Practices
- Amazon Release Date Delivery
- Visual Voicemail and Sprint
- Using Scrum to control complex software
- PDC 2008 Silverlight Videos
Archives
- September 2009 (3)
- November 2008 (3)
- September 2008 (1)
- August 2008 (10)
- July 2008 (3)
- June 2008 (1)
- April 2008 (1)
- March 2008 (1)
- February 2008 (4)