Web 2.0 for developers

Web 2.0 is one of those terms that’s used without many people understanding what it actually means. Web 2.0 describes an alternative approach to the Web that is different from traditional sites and applications. You can think of it as a second generation of Web sites and applications. O’Reilly first used the term in 2004 after a conference brainstorming session held with MediaLive International.

A common phrase in the Web 2.0 world is “the Web as a platform”. Web 2.0 emphasises the Web as a platform for sharing data and for social interaction. Approaches such as wikis, tagging and blogging are very much part of the Web 2.0 world.

Developers have a particular interest in creating Web 2.0 applications and sites and in the new tools and approaches available. You may have heard of the term Rich Internet Applications or Ajax. Developers can use these approaches to create Web 2.0 applications that rely heavily on technologies such as XML, XHTML, CSS, RSS, Web services and Flash.

In this article, I’ll give you an overview and outline of what Web 2.0 means both in general and for Web developers. I’ll cover the technologies that are usually considered part of the Web 2.0 movement and look at some examples of where it is used in practice. By the end of the article, you should have a better understanding of what Web 2.0 means although we won’t get our hands dirty with any code.

Free video tutorial: Creating a CSS menu in Dreamweaver

Ever wanted to create a CSS menu that is cross browser compatible? Richard Mariner shows you how to do it in only 5 minutes using Dreamweaver 8.

The tutorial assumes you've created a basic site, if you haven't please check out this video to see how it's done.

Need to create all kind of great web site navigation menus? Cascading Drop down Menus, Mega Menus, Popup or Context Menus. Menus that have great display animations, are CSS based and fully cross browser compatible, which makes them search engine friendly?

Then you need the Universal CSS Navigation Menu

The Other Navigation Bar

In my last article, I took you through the creation of a Dreamweaver 8 Navigation Bar and how to use it to create a usable navigation bar with this built in feature of Dreamweaver.  The Navigation Bar has greatly improved in the current version of Dreamweaver; nevertheless, it is not my tool of choice for navigation for a couple of reasons.  First, it requires images for the buttons; therefore, those images all have to preload or the navigation bar will be slower than molasses.  There was a time when 99% of all rollovers involved images and that is fine.  However, today, there is a much better way to create navigation that loads quickly and still looks professional and that involves the use of CSS for navigation and rollovers. 

Because all states of every button are just text, there is nothing out there that can load more smoothly or faster.  Once you get a handle on CSS, you can create a navigation bar quickly that is flexible and can serve more than one purpose.  If you read my previous article, you saw how I created images for the buttons in a panel and then sliced it in Fireworks.  It worked great on the vertical navigation, but if you tried to apply those buttons to the horizontal view, it looked awful.  I will admit that was partly due to the way that I quickly created and sliced the Fireworks PNG .. had I made the buttons all even height-wise, it would have looked much better.  My bad! 

HOWEVER. When you create your navigation in text and use CSS to style it, you can create a vertical navigation bar that can quickly be converted to a horizontal one with the click of a style rule.  There is no guesswork involved; no need to worry about uniform size.  Since the font is uniform, the style rules put everything in place for you .. just like that!

CSS pop-up menus

In this tutorial, you will learn how to build a completely functional pop-up menu using CSS (Cascading Style Sheets) without knowing how to write any code at all! Below is an example of such a menu;

An example of a CSS menu

This tutorial takes only 25 minutes to complete.

Need to create all kind of great web site navigation menus? Cascading Drop down Menus, Mega Menus, Popup or Context Menus. Menus that have great display animations, are CSS based and fully cross browser compatible, which makes them search engine friendly?

Then you need the Universal CSS Navigation Menu

CSS: It’s Not Just For Screens Any More

Dreamweaver, and in particular, the new Version 8, is nothing short of a CSS wonder.  Many of us who are “mostly application” in mindset stuck up our noses that there wasn’t more for the application side in the new release, but I, for one, am learning to appreciate some of the CSS improvements that Macromedia has made in the new version. 

In my E-Book, I talked about the new Style Rendering toolbar and the ability it gives the developer to toggle between screen views for various audiences. 

In this article, I would like to expand on the Style Rendering toolbar and show you how to create a site that is for more than just the web audience.  I have created a simple unstyled page that is a home page for a fictional candy store and have attached that unstyled page and the images used in a zip to this article.  Our task here will be to create the CSS for that example from scratch.. three times.  First, we will create the “screen” stylesheet that the average web user will view in their browser.  Then we will create a stylesheet for the user who wants to print a page that is more print friendly than the screen view.  And finally, we will create a style sheet to render the same content for the handheld device.  Mobile is one of the fastest growing areas for the content developer.  It’s about that we paid this arena of business some serious attention! 

CSS: Just In Case

Welcome to Article 7, our final step in the CSS Journey of Dreamweaver 8.  In our first article, we walked through the vast world of CSS, Dreamweaver 8 style, and there is indeed a lot to talk about with this release of the product!  From the general to the specific, we applied what we had learned in Article 5 by creating a simple page using nothing but the Design Tools of Dreamweaver 8 to produce our CSS.  Then in Article 6, I showed you how I like to do CSS, using a combination of the design tools and coding and I passed along my collection of starter snippets in an extension that you can easily install into your copy of Dreamweaver 8.

This article is part of the new interactive e-book; Dreamweaver Crystal Gazer: The Power Of Dreamweaver 8

CSS: My Way

A while ago, we dissected the Unified CSS panel, took an in-depth look at the CSS rendering changes in Dreamweaver 8 and were duly amazed at the CSS Layout Aids that make it so easy to see the integral parts of the CSS layout at a glance.  Then in Article 5, we tried the whole thing out, making our first page using only the CSS tools available in Dreamweaver 8.  We made extensive use of the Unified CSS Panel, but we also used the traditional CSS dialog to create our initial CSS.  It was then a snap to make changes in the Unified Panel.

This article is part of the new interactive e-book; Dreamweaver Crystal Gazer: The Power Of Dreamweaver 8

Now that we know how to do that, in this article, I am going to show you a few things about how I like to do CSS.  I have gone the full gamut from creating everything in the design tools of Dreamweaver to handwriting the code for the entire page in code view.  I have created, I have reused code and I have developed a little set of snippets which I am giving to you with this article.  They are by no means the start to every page you will ever make, but they quickly give you a start to much of the design that is standard too much of what I do and I pass them along to you in hopes that you may find them beneficial.

CSS: Taking It Out For A Test Drive

In my previous article, we took an in depth look at the new Unified CSS Panel, the new visual aids for helping to give  the user a clearer picture of what the CSS is doing to a given page, and the rendering improvements in Dreamweaver 8.  I think we all agreed that, once again, we have a whole new CSS ballgame. 

But there is nothing quite like trying out something yourself.  You can believe everything I’m telling you but what I can’t tell you is whether or not it will work for you.  Will this improve workflow for your individual situation?  I really think I can shout a resounding YES! But I don’t blame you for wanting to try some of this yourself. 

This article is part of the new interactive e-book; Dreamweaver Crystal Gazer: The Power Of Dreamweaver 8

And so you shall.  In this article, we are going to build a page with the new CSS unified panel and put it through some of its paces.  We will do this from the standpoint of inline CSS “in the head” which makes it easier to see what is going to happen and why.

In the next article we’ll return to the case study and create an external CSS sheet and work with some different ways to work with CSS in Dreamweaver 8.  There are many ways to achieve what you want and we’ll try to show you as many of them as we can.  Enjoy!

Hybrid Layout, the peaceful coexistence of tables and CSS Part 2

Hybrid layout is a special way to create a page's layout, it stands for tables and CSS in a peaceful coexistence. In part 1 I showed you how to clean up <body> tag, how to define and modify CSS rules, and how to attach an external style sheet.  

There are still tons of <font>, <b> and <i> tags and deep nested tables in the example files. In this article we'll

• Convert <b> and <i> tags into <strong> and <em>,
• Get rid of <font> tags,
• Get rid of nested <tables> used for creating small borders,
• Add footer & header DIVs.

Hybrid Layout the peaceful coexistence of tables and CSS Part I

Hybrid layout is a special way to create a page's layout, it stands for tables and CSS in a peaceful coexistence. In this article I'll show you how to convert old web sites with tons of <table>, <font>, <b>, and <i> tags into neat hybrid layout pages without messing up the existing page's basic layout.

We won’t use any hand coding! I'll show you how to create a Hybrid layout with nothing more then the built-in features of Dreamweave! You will learn

• How to get rid of <tables> and <font> tags,
• How to convert <b> and <i> tags into <strong> and <em>,
• How to create new CSS rules,
• How to change CSS rules, and
• How to apply CSS rules in Dreamweaver.

I will work on an old version of a web site from the year 2001 with a horrible "old-fashioned" source code. We'll convert those into a neat and easy to edit source code.  I'm sure you will soon get familiar with the techniques I use and you don't want to miss them any more.

Quotes, Citation and CSS

Everybody likes a good quote, whether it be a monologue from Hamlet or a particularly pithy piece of your own work.

From a design point of view, quotes are a handy for breaking up your web content and highlighting useful parts of our document. They are essential for any webpage that is using material quoted from elsewhere, such as a weblog. Fortunately (X)HTML provides a number of tags to help mark-up our quoted content correctly.

In this tutorial we're going to look at quotes, and how you can use the correct markup for them in (X)HTML, and how you can style this markup with CSS so that it's semantically valid AND nice to look at.

Free! - CSS design: The basics

CSS design: The basics

What is CSS design & why is it important?

CSS design represents a new, much more powerful way to lay out websites. Traditionally, cumbersome tables have been used to present web pages. In the future this practice will gradually fade out to be replaced by CSS design. To witness its true power have a look at the CSS Zen Garden

Using CSS design allows your pages to download more quickly, makes your website much easier to manage, and has numerous web usability, accessibility and search engine optimisation benefits. Basically, CSS design is a really good thing.

If you're completely new to CSS then you can find an excellent beginner's tutorial at Webmonkey.