Friday, September 22, 2006

What's different about IE7?

From a user's perspective, improvements include tabbed browsing, better printing, RSS feed integration, more advanced searching, and better security features, as well as a plethora of add-ons to enhance the user experience (similar to Firefox extensions).

However, the most important changes that will have a more direct impact on how your site is loaded and displayed are:

* RSS integration, IE7 automatically detects RSS feeds and asks you to subscribe. It also gives you the option to have IE7 auto-check for feed updates (even when it's not running). Is your feed properly recognized by IE7?

* Updated CSS behavior, the IE7 team worked very closely with the W3C workgroup to ensure standards compliance. They made over 200 changes from IE6 to become compliant with CSS2.1. Even if your site is standards compliant, it may not be rendered exactly the same as it is in IE6 or Firefox.

* AJAX XML HTTP Request changes, the IE blog states: "to have your cross-browser AJAX work better with IE7, you really should be invoking the native XMLHttpRequest (the cross-browser one) first to see if it's available before instantiating the ActiveX control, instead of the other way around."

* Added security features, everything from more secure SSL defaults to disabling most Active X controls by default has been changed to help make the user's browsing experience more secure. These changes could drastically change your users browsing and purchasing experience.

You can get full details on all of the changes by visiting the IE Blog.

Wednesday, September 20, 2006

Social Bookmarking Websites List

Social Bookmarking service Provider websites list - Sites that allow storing, searching, sharing bookmarks, web snippets, browsing archive etc.

www.ambedo.com - Ambedo : tag search engines
www.blinklist.com - BlinkList : social bookmarking
www.blogmarks.net - Blogmarks : social bookmarking
www.blummy.com - Blummy : multiple bookmarklet tool
www.bmaccess.net - Bmaccess : social bookmarking service
www.buddymarks.com - BuddyMarks : social bookmarking
www.clipmarks.com - Clipmarks : web clipping sharing
www.cloudalicio.us - Cloudalicious : del.icio.us cloud tag history for links/sites
www.cluebacca.com - cluebacca : social text clips sharing
www.commontimes.org - CommonTimes : social bookmarking for news
www.connotea.org - Connotea : social bookmarking for researchers and clinicians
www.del.icio.us - del.icio.us : social bookmarking
www.diigo.com - Diigo : social bookmarking with annotation
www.eigology.com/dogear - Dogear : bookmarking tool
www.esnips.com - eSnips : online content sharing
www.feedbutler.com - FeedButler : web-based feed reader; bookmarking
www.feedmarker.com - feedmarker : rss aggregator and bookmarks manager
www.furl.net - Furl : social bookmarking,
www.goowy.com - goowy : web-based mail, contacts, calendar, games etc
www.hanzoweb.com - Hanzo : social bookmarking and archiving
www.hyperlinkomatic.com - Hyperlinkomatic : social bookmark manager
www.icio.de - Icio : social bookmarking
www.indiagram.com - IndiaGram : social bookmarking
www.jeteye.com - Jeteye : social info sharing
www.jots.com - Jots : social bookmarking
www.kaboodle.com - Kaboodle : social info sharing
www.kopikol.net - KopiKol : social bookmarking
www.listmixer.com - ListMixer : bookmarking that automatically expires in 30 days
www.sandbox.sourcelabs.com/livemarks - LiveMarks : live del.icio.us additions
www.looklater.com - LookLater : private bookmarking and archiving
www.lookmarks.com - Lookmarks : social bookmarking service
www.ma.gnolia.com - ma.gnolia : social bookmarking service
www.mylinkvault.com - MyLinkVault : social bookmarking
www.mystickies.com - Mystickies : add sticky informational notes on web pages
www.NewHots.com - NewHots : chinese portal for rss, bookmarks
www.nextaris.com - Nextaris : social bookmarking, networking, blogging
www.onlywire.com - OnlyWire : simultaneous bookmarking tool
www.philoi.com - Philoi : social bookmarking service
www.rawsugar.com - RawSugar : online bookmarking
www.recommendit.dehsoftware.com - RecommendIt : bookmarks recommnedations
www.segnalo.com - Segnalo : social bookmarking (italian)
www.shadows.com - Shadows : social bookmarking
www.simpy.com - Simpy : social bookmarking
www.spurl.net - Spurl : social bookmarking
www.stumbleupon.com - StumbleUpon : social bookmarking / web discovery tool
www.taggle.de - Taggle : social bookmarking (german)
www.tagground.com - Tagground : social bookmarking search
www.tagsy.com - Tagsy : social bookmarking and feed management; coming soon!
www.thumblicio.us - thumblicio.us : screenshots of the most popular del.icio.us sites
www.toread.cc - ToRead : email-based bookmarking service
www.unalog.com - Unalog : social bookmarking
www.wists.com - Wists : social bookmarking; shopping
www.myweb2.search.yahoo.com - Yahoo! My Web 2.0 : social bookmarking
www.yoono.com - Yoono : social bookmarking software

Leave a comment to suggest a resource. Want your site listed here? Leave a comment / post a trackback.

If you want to copy this list and post it on the internet as is, you are required by copyright to note the source and to give a link back to this page.

Labels:

Monday, September 11, 2006

Collection of FREE Stock Photography Websites

I just decided to publish this list of Free Stock Photography Websites. Please keep in mind that each one of them has a different term of use.

http://www.sxc.hu/
http://www.morguefile.com/
http://www.imageafter.com/
http://www.freephotosbank.com/
http://openphoto.net/
http://www.bigfoto.com/
http://www.usda.gov/oc/photo/opclibra.htm
http://nix.nasa.gov/
http://www.photolib.noaa.gov/
http://www.nps.gov/yell/press/images/
http://earth.jsc.nasa.gov/sseop/efs/
http://www.fws.gov/pictures/
http://images.fws.gov/
http://www.picturestation.net/start/
http://geekphilosopher.com/MainPage/photos.htm
http://www.freeimages.co.uk/
http://www.pixelperfectdigital.com/index.php
http://www.freefoto.com/index.jsp
http://davidniblack.com/imagebase/
http://www.cepolina.com/freephoto/
http://amazingtextures.com/textures/index.php
http://www.texturewarehouse.com/gallery/index.php
http://pdphoto.org/
http://imageblowout.com/xoops/
http://www.piotrpix.info/
http://mandragora.ex.lv/resources.htm
http://www.fotogenika.net/modifica/igallery.asp
http://www.mayang.com/textures/
http://www.freephotostation.com/
http://cromavista.ricardomartin.info/
http://www.afflict.net/
http://www.creativity103.com/
http://www.pyed.net/eye/
http://aarinfreephoto.com/
http://www.stockvault.net/
http://www.designpacks.com/
http://www.unprofound.com/
http://www.fourbees.com/fourbees/phoelm.asp
http://www.insectimages.org/
http://www.freemediagoo.com/
http://www.freemediagoo.com/
http://www.adigitaldreamer.com/freestock/freestockphotos.htm
http://freestockphotos.com/
http://www.freewebpics.de/
http://www.lightmatter.net/gallery/
http://majesticimagery.com/
http://www.tripalbum.net/
http://www.demmy.nl/fotostock_0001.html
http://www.twicepix.net/imgdatabase/
http://www.aboutpixel.de/
http://www.woophy.com/
http://www.pixelquelle.de/
http://www.litetek.net/backgrounds/
http://pix.halal.dk/
http://tofz.org/
http://www.fontplay.com/freephotos/
http://orangetrash.d2.hu/index2.html
http://www.artfavor.com/types.php?type=12
http://www.imagetemple.com/
http://www.logodesignweb.com/stockphoto/
http://www.fotodatenbank.com/
http://www.bajstock.com/
http://www.pixelbag.de/
http://www.nwyhstockimages.com/default.aspx
http://photo.itc.nps.gov/storage/images/
http://www.deviantart.com/
http://www.photocase.com/Default.asp
http://www.gimp-savvy.com/PHOTO-ARCHIVE/index.html
http://www.corbis.com/

If you want to copy this list and post it on the internet as is, you are required by copyright to note the source and to give a link back to this page.

Sunday, September 10, 2006

What is AJAX ?

We were getting a number of querries from our clients and friends, asking about what AJAX is? With the development of Microsoft's Live, everyone is going crazy about AJAX. So, we at Xaprio Solutions thaught of publishing this small article about AJAX, which will help you guys understand it better.

Like DHTML, LAMP, or SPA, Ajax is not a technology in itself, but a term that refers to the use of a group of technologies together. In fact, derivative/composite technologies based substantially upon Ajax, such as AFLAX, are already appearing. The Term AJAX refers to, Asynchronous JavaScript and XML.

For a number of tasks, only small amounts of data need to be transferred between the client and the server, allowing a number of Ajax applications to perform almost as well as applications executed natively on the user's machine. This has the effect that pages need only be incrementally updated in the user's browser, rather than having to be entirely refreshed. "Every user's action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine instead", wrote Jesse James Garrett, in the essay that first defined the term. "Any response to a user action that doesn't require a trip back to the server -- such as simple data validation, editing data in memory, and even some navigation -- the engine handles on its own. If the engine needs something from the server in order to respond -- if it's submitting data for processing, loading additional interface code, or retrieving new data -- the engine makes those requests asynchronously, usually using XML, without stalling a user's interaction with the application."

Traditional web applications essentially submit forms, completed by a user, to a web server. The web server does some processing, and responds by sending a new web page back. Because the server must send a whole new page each time, applications run more slowly and awkwardly than their native counterparts.

Ajax applications, on the other hand, can send requests to the web server to retrieve only the data that is needed, and may use SOAP or some other XML-based web services dialect. On the client, JavaScript processes the web server's response, and may then modify the document's content through the DOM to show the user that an action has been completed. The result is a more responsive application, since the amount of data interchanged between the web browser and web server is vastly reduced. Web server processing time is also saved, since much of it is done on the client.

The earliest form of asynchronous remote scripting, Microsoft's Remote Scripting, was developed before XMLHttpRequest existed, and made use of a dedicated Java applet. Thereafter, remote scripting was extended by Netscape DevEdge at around 2001/2002 by use of an IFRAME instead of a Java applet.

Saturday, September 09, 2006

IE7 to be distributed via Automatic Updates!

According to a post on IEBlog, IE 7 will be distributed via WIndows Automatic Updates.

Internet Explorer 7.0 LogoAs they get close to the final availability of Internet Explorer 7, they want to provide an update on their distribution plans. To help their customers become more secure and up-to-date, they will distribute IE7 as a high-priority update via Automatic Updates (AU) shortly after the final version is released for Windows XP, planned for the fourth quarter of this year.

As per Tony Chor, Group Program Manager - " As I said earlier, AU will notify you when IE7 is ready to install. Alternately, you will be able to visit the Windows Update or Microsoft Update sites and obtain IE7 by performing an "Express" scan for high-priority updates. Either way, you will see the welcome screen that allows you to choose whether to install it. (Users will also be able to download IE7 from the Microsoft Download Center.) ...."

Learn How the Automatic Updates installation process works ...

Thursday, September 07, 2006

Web 2.0 for Designers

In Web 1.0, a small number of writers created Web pages for a large number of readers. As a result, people could get information by going directly to the source: Adobe.com for graphic design issues, Microsoft.com for Windows issues, and CNN.com for news. Over time, however, more and more people started writing content in addition to reading it. This had an interesting effect - suddenly there was too much information to keep up with! We did not have enough time for everyone who wanted our attention and visiting all sites with relevant content simply wasn't possible. As personal publishing caught on and went mainstream, it became apparent that the Web 1.0 paradigm had to change.

Enter Web 2.0, a vision of the Web in which information is broken up into "microcontent" units that can be distributed over dozens of domains. The Web of documents has morphed into a Web of data. We are no longer just looking to the same old sources for information. Now we're looking to a new set of tools to aggregate and remix microcontent in new and useful ways.

These tools, the interfaces of Web 2.0, will become the frontier of design innovation.

The evidence is already here with RSS aggregators, search engines, portals, APIs (application programming interfaces, which provide hooks to data) and Web services (where data can be accessed via XML-RPC, SOAP and other technologies). Google Maps (in beta) provides the same functionality as similar competing services but features a far superior interface. Flickr's interface is one of the most intuitive and beloved around. Del.icio.us offers personal and social functionality, and reaches far beyond its own site. Interfaces like these are changing the way we store, access, and share information. It matters very little what domain content comes from.

Web 2.0 has often been described as "the Web as platform," and if we think about the Web as a platform for interacting with content, we begin to see how it impacts design. Imagine a bunch of stores of content provided by different parties—companies, individuals, governments—upon which we could build interfaces that combine the information in ways no single domain ever could. For example, Amazon.com makes its database of content accessible to the outside world. Anyone can design an interface to replace Amazon's that better suits specific needs (see Amazon Light). The power of this is that content can be personalized or remixed with other data to create much more useful tools.

There are six trends that characterize Web 2.0 for designers. In this introductory article we'll summarize each of those trends and give brief examples. In upcoming articles we'll explore each trend in more detail.

Writing Semantic Markup: Transition to XML
One of the biggest steps in realizing Web 2.0 is the transition to semantic markup, or markup that accurately describes the content it's applied to. The most popular markup languages, HTML and XHTML, are used primarily for display purposes, with tags to which designers can apply styles via CSS.

These markup languages are not semantically dead, however. Designers can describe content, but only to the extent that it fits within the (X)HTML tag set. For example, designers can mark up content as headers, paragraphs, list items, citations, and definition lists using the tags, respectively. For some simple documents, these tags are adequate to describe content effectively. For most documents, however, there is no way to accurately describe the content with the (X)HTML tags we have available. In Web 2.0, this description is not only possible, but also critical.

Though HTML and XHTML give us only a glimpse of what it means, there is one technology demonstrating clearly the power of semantic markup. RSS is an XML format for syndicating content. It is an easy way for sites to tell people when there is new content available. So, instead of browsing to your favorite site over and over again to see if something is new, you can simply subscribe to its RSS feed by typing the RSS URI into a feed aggregator. The aggregator will periodically poll the site, notify you if something is new, and deliver that content. It's a real timesaver.

Providing Web Services: Moving Away From Place
During the early years of the Web, before content had semantic meaning, sites were developed as a collection of "pages." Sites in the 1990s were usually either brochure-ware (static HTML pages with insipid content) or they were interactive in a flashy, animated, JavaScript kind of way. In that era, a common method of promoting sites was to market them as “places”—the Web as a virtual world complete with online shopping malls and portals.

In the late 90s and especially the first few years of the 21st century, the advent of XML technologies and Web services began to change how sites were designed. XML technologies enabled content to be shareable and transformable between different systems, and Web services provided hooks into the innards of sites. Instead of visual design being the interface to content, Web services have become programmatic interfaces to that same content. This is truly powerful. Anyone can build an interface to content on any domain if the developers there provide a Web services API.

Two great examples of the shift away from place to services on the Web are Amazon.com and eBay, both of which provide an immense amount of commercial data in the form of Web services, accessible to any developer who wants it. An interesting interface built using eBay's Web services is Andale, a site that tracks sales and prices to give auction sellers a better idea of what items are hot and how much they’ve been selling for.

Remixing Content: About When and What, not Who or Why
Associated Press CEO Tom Curley made an important and far-reaching keynote speech to the Online News Association Conference on Nov. 12, 2004. In it he said;, "… content will be more important than its container in this next phase [of the Web]… Killer apps, such as search, RSS and video-capture software such as TiVo—to name just a few—have begun to unlock content from any vessel we try to put it in."

Curley was specifically addressing journalists and the media industry, but this insight applies equally to the design profession. Web design during Web 1.0 was all about building compelling places (or sites) on the Web. But content can no longer be contained in a single place—at least not without going against the nature of the social Web and locking up your content in a secure site.

Web design in Web 2.0 is about building event-driven experiences, rather than sites. And it's no coincidence that RSS is one of the key building blocks. RSS feeds enable people to subscribe to your content and read it in an aggregator any time, sans extraneous design.

Searches can also be mixed with RSS to let people subscribe to content via topic and tag RSS feeds (from PubSub or Feedster, for example). These so-called "future searches" not only let people mix content from various sources, but end up being yet another way for users to bypass a site’s visual design.

Because content flows across the Web in RSS feeds and can be remixed along the way, Web designers must now think beyond sites and figure out how to brand the content itself.

Emergent Navigation and Relevance: Users are in Control
As a result of the remixing aspects of Web 2.0, most content will be first encountered away from the domain in which it lies. Thus, much of the navigation that is used to reach a specific item might be far removed from the navigation specifically designed for it. This “distributed” navigation might come in the form of a feed reader, a link on a blog, a search engine, or some other content aggregator.

One of the side effects of this is that the sources of and pathways to useful information will continually change, and users won't necessarily know where to go to find it. Fortunately, content aggregators have a built-in answer for this—they can track what people are doing. By recording what pieces of microcontent are most often visited, aggregators can use past user behavior to predict what users will find most relevant in the future. This is very apparent in Daypop, Del.icio.us, and Blogdex feeds. What people have found relevant in the past is likely to be useful in the future.

With relevance decided within these third-party interfaces, users might even be able to read content without ever visiting the domain it comes from. Navigation schemes, as we know them, will be used less. The most traveled navigation paths will emerge from user behavior instead of being "designed" specifically for it.

Adding Metadata Over Time: Communities Building Social Information
One feature of Web 1.0 that seemed to change everything about publishing was the ability to make changes to the primary publication at any time. There are no "editions" or “printings” on the Web like there are in the print world. There is simply the site and its current state. We are used to this paradigm now, and an optimist can hope that Web content will only get better with time: metadata will be added, descriptions will get deeper, topics more clear, and references more comprehensive.

What we see happening in Web 2.0 is a step beyond this, to where users are adding their own metadata. On Flickr and Del.icio.us, any user can attach tags to digital media items (files, bookmarks, images). The tagging aspect of these services isn’t the most interesting part of them, though. What is most interesting are the trends we see when we put together everyone’s tags.

Let's say, for example, that we tag a bookmark "Web2.0" in Del.icio.us. We can then access del.icio.us/tag/Web2.0 to see what items others have tagged similarly, and discover valuable content that we may not have known existed. A search engine searches metadata applied by designers, but Del.icio.us leverages metadata applied by folks who don’t necessarily fit that mold.

Shift to Programming: Separation of Structure and Style
In Web 1.0, there were two stages to visual Web design. In the early years, designers used tricks like animated GIFs and table hacks in clever, interesting and horrible ways. In the last few years, CSS came into fashion to help separate style from structure, with styling information defined in an external CSS file. Even so, the focus was still on visual design—it was the primary way to distinguish content and garner attention.

Enter the Web 2.0 world, which is not defined as much by place and is less about visual style. XML is the currency of choice in Web 2.0, so words and semantics are more important than presentation and layout. Content moves around and is accessible by programmatic means. In a very real sense, we’re now designing more for machines than for people. This may sound like we’re in the Matrix, but in the words of Amazon.com CEO Jeff Bezos, "Web 2.0… is about making the Internet useful for computers."

What does this mean for Web designers? It means designers have to start thinking about how to brand content as well as sites. It means designers have to get comfortable with Web services and think beyond presentation of place to APIs and syndication. In short, it means designers need to become more like programmers. Web 2.0 is a world of thin front ends and powerful back ends, to paraphrase Bezos.

Summary
The effects of Web 2.0 are far-reaching. Like all paradigm shifts, it affects the people who use it socially, culturally, and even politically. One of the most affected groups is the designers and developers who will be building it—not just because their technical skills will change, but also because they’ll need to treat content as part of a unified whole, an ecosystem if you will, and not just an island.

To summarize, these are what we see as the six main themes covering design in the Web 2.0 world:

  1. Writing semantic markup (transition to XML)
  2. Providing Web services (moving away from place)
  3. Remixing content (about when and what, not who or why)
  4. Emergent navigation and relevance (users are in control)
  5. Adding metadata over time (communities building social information)
  6. Shift to programming (separation of structure and style)
Our purpose in this column is to analyze those themes and figure out what Web 2.0 means for designers. We'll explore the new technologies that are making it happen, take a closer look at the new interfaces that demonstrate its power, and ponder the social effects it has on the people who use it.

As we move along, we hope that designers who may be wary of the promises of new technology help us focus on the practical aspects of this one, the subtle but real changes that Web 2.0 is having (and will have) on design.

Wednesday, September 06, 2006

Web Page Reconstruction with CSS

CSS and well-structured documents are a combination that can't be beat. This tutorial looks at how to transform a Web page using traditional Web design methods into a XHTML CSS based site. In fact, the example will be drawn from a Digital Web content page modeled after those pages covering reviews, interviews and tutorials—tutorials that are amazingly like this one.

This isn't the first attempt in this space to try to recreate a Web page using CSS. J. David Eisenberg tried to re-do a Yahoo! weather page in his article titled Converting a Page to CSS. While his attempt was not a complete success, he totally transformed the page's structure and style using contemporary CSS methods. As David says, "anything worth doing is worth doing again."

The goal of transferring the page to a CSS layout is to get rid of any HTML that's used for presentational purposes in order to achieve the layout. As it is now, the Digital Web layout uses HTML tables for layout purposes and spacer GIFs for spacing and positioning of elements on the Web page. We will be using CSS to replace the JavaScript in the JavaScript rollovers on this page.

Check it Out
Look at the layout of the page. You'll see that a Digital Web page layout has a header, two columns, and a footer. In the header is the logo and tagline for Digital Web, as well as some site navigation including a link to the search and sitemap pages. Then, there are two columns. The right, thinner column is where the links for the current issue's material rests. Also in the right column are the sponsorship and advertising links as well as a subscription link for the Digital Web newsletter. The left column contains the content against a white background. In this column rests the tutorial header, content for the page followed by the author's bio, and then three participation links. After that, it's the footer with the usual copyright notice, a link to the top and a standard ad banner.

The first goal in making this page is to focus on the major browsers. This demo is geared towards the recent versions of Netscape, Mozilla and Internet Explorer. Netscape 4 has had a nice life, but I won't be building this demo to work in that browser.

Strip it Down
To achieve that goal, the first step in converting a site from more conventional web design methods is to strip out the content out of the HTML tables, delete the spacer GIFs and start with a clean slate (see Figure 1). By making a clean break from the past working methods, you cut out any potential problems that could throw a monkey wrench into the new CSS-based design.

This stripping down allows you to strategically plan the CSS layout styles. While it's a good idea to plan ahead, most of the time that's simply not possible. In order to meet deadlines, planning time gets cut, or a site simply evolves past its original design. The content of the site is then forced into a layout that goes against contemporary practices. Hopefully with this "CSS revolution," web builders will be able to go back through their sites and actually rebuild and not just redesign their sites to manage any new modifications that have been made since their initial build. But, I digress.

Divide the Page Sections
After stripping the page down to its bare bones, you'll want to divide the page into sections. As you saw when first examining the layout, there are basic divisions already in the page: Header, columns, and footer. You will build off of these divisions, creating a structure that associates specific CSS rules to those sections.

The actual divisions for a Digital Web Magazine page are:

  • Header
  • Site Navigation
  • Left Column - "Issue Navigation"
  • Right Column - "Content"
  • Footer

So, the initial HTML markup will have these building blocks:

Move Ahead

Before stylizing the header, generate the HTML markup for it:

Now, mark out the background and type colors with the simple CSS rule that follows. This rule creates the thin black line that separates it from the five top links, which you'll get to later.

#header {
background-color: #000;
color: #000;
border-bottom: 1px solid #000;
}

Now, bring in the logo and add the tagline for Digital Web in the upper right-hand side. I chose a rather unorthodox approach when dealing with the header. As you can see in the markup, I am using text and not the graphic of the Digital Web logo. The logo is actually brought in through the background of the H1 element like so:

#header h1 a {
background-image: url("images/header.gif");
background-repeat: no-repeat;
display: block;
height: 85px;
font-size: 0!important;
text-align: right;
float: left;
width: 350px !important;
}

For H1, set the size of the font to zero. It doesn't matter which unit you use--zero horseshoes is the same as zero pixels, ems, or percentages. How browsers render this varies--some browsers may choose to disregard such an outlandish request and just present the text as being small or barely legible. On the other hand, browsers might actually not display the text at all—like I would hope. Either way, the text is also black and aligned to the right meaning that it will blend into the black background. No one should be the wiser that there's actually text there. So, don't tell anyone.

Now why do this? Well, in case the powers that be here at Digital Web use this method so they can build a separate style sheet for each content section. Each style sheet would carry the color theme and appropriately colored graphics (such as the purple logo on the purple page used in the tutorial pages). So, the actual style of the logo wouldn't be hard coded as an image into the HTML file of each tutorial page. Rather, it's in a "purple.css" or "tutorial.css" that's linked in the head of each section document. So, if there's ever a re-design that requires a new header image, it's a simple matter of editing one line in a given section file rather than updating many HTML files.

Floating the logo to the left allows the slogan for Digital Web to be pushed up to the top of the viewport. And if you align the text to the right, the slogan ends up exactly where it needs to be. Throw in a couple font styling rules and you're in business:

#header .slogan {
margin: 0;
padding: 0;
text-align: right;
color: #fff;
font-size: 12px;
white-space: nowrap;
}

After styling the title of the magazine and the slogan, you reach the first navigation links. In plain markup without any styles applied to them, you can see they are just an unordered list of links:

Putting the links into a list just makes sense: they are a set of unordered items. However, they also display vertically whereas the Digital Web layout has them laid out horizontally. To achieve that effect, you'll reach for the float property in the list item CSS rule:

#navsite ul li { 
margin: 0 3% 0 0;
font-size: 12px;
width: 10%;
float: left;
}

Raise the Columns
Now, you'll style the columns. You'll want to put the navigation links for the current issue to the right.
The original layout uses 125 pixels for this column. However, for this contemporary method precise
measurements aren't always the best choice. So, I'd use percentages. In this case, the width of
the right-hand column is 15% of the browser's viewport width.


#navish {
background-color: #000;
position: absolute;
left: 85%;
width: 15%;
z-index: 3;
color: #000;
font-size: 12px;
padding: 0;
}


You can now shrink the content portion of the page by 15%. Do this by manipulating the right side
of the margin to a width of 15%:

#content {
margin: 0 15% 0 0;
padding: 0 0 5% 0;
color: #000;
background-color: #fff;
}
Copyright © 1994-2006 Digital Web Magazine. All Rights Reserved.

Full List of Free Blog Directories

I thought it would be a nice start to post a great list of blog directories arranged in PR. Please enjoy!

http://www.blogwise.com/ PR8
http://www.bloglines.com/ PR8
http://www.technorati.com/ PR8
http://www.feedster.com/ PR8
http://www.syndic8.com/ PR8
http://boingboing.net/ PR8

http://www.weblogalot.com/ PR7
http://blogcritics.org/ PR7
http://blogdex.net/ PR7
http://www.globeofblogs.com/ PR7
http://www.bloggernity.com/ PR7
http://www.blogrankings.com/ PR7
http://www.globeofblogs.com/ PR7
http://www.blogdex.net/ PR7
http://www.blogstreet.com/ PR7
http://www.blogmatrix.com/ PR7
http://www.lsblogs.com/ PR7
http://www.pubsub.com/ PR7
http://www.2rss.com/ PR7
http://www.bloguniverse.com/ PR7
http://blogcatalog.com/ PR7
http://www.blogsearchengine.com/ PR7
http://www.blogflux.com/ PR7
http://www.blogdigger.com/ PR7
http://www.yourwebloghere.com/ - PR7
http://portal.eatonweb.com/ PR7

http://dir.yahoo.com/Computers_and_I...s/Directories/ PR6
http://www.top100bloggers.com/ PR6
http://www.fastbuzz.com/ PR6
http://www.blogrunner.com/ PR6
http://www.shas3.com Pr6
http://bulkfeeds.net/ PR6
http://www.blogsbywomen.org/ - PR6
http://findingblog.com/ PR6
http://www.search4rss.com/ PR6
http://www.blizg.com/ PR6
http://www.blurtit.com/ PR6
http://www.bloogz.com/ PR6
http://www.blogaudit.com/ PR6
http://www.blogexplosion.com/ PR6

http://www.google.com/Top/Computers/...s/Directories/ PR5
http://www.bloggeries.com/ PR5
http://www.bloglisting.net/ PR5
http://www.search4blogs.com/ PR5
http://www.bloghop.com/search.htm PR5
http://www.blogcode.com/ PR5
http://www.sarthak.net/blogz/ PR5
http://www.readablog.com/ - PR5
http://www.localfeeds.com/ PR5
http://www.blogtopsites.com/ PR5

http://www.bloggerspoint.com PR4

http://blog.announce.googlepages.com/ PR3
http://www.bloggerhq.net/ PR3

http://www.blogguru.biz/ PR0
http://www.blogvision.com/ PR0
http://www.boogieplay.com/ PR0
http://www.waypath.com/ PR0
http://www.blogs-collection.com/ PR0


Regional
http://www.blogscanada.ca/directory/
http://www.weblogverzeichnis.de/
http://www.rss-verzeichnis.de/
http://www.blogbot.de/
http://www.blogg.de/
http://weblogcheckup.de/carmina/
http://www.izigo.nl/
http://aggregator.weblogs.co.uk/
http://www.weblogabout.com/
http://www.plazoo.com/
http://www.misohoni.com/bba/

I would be great if you could help me extend the list and make it a real "full list".

For Blog Directory owners: Please kindly comment on this thread to get your site listed!

Enjoy Blogging!

List of Blog Websites to Ping [Auto Ping List]

Here are the Blog Websites to Ping -

hxxp://1470.net/api/ping
hxxp://api.feedster.com/ping
hxxp://api.feedster.com/ping.php
hxxp://api.moreover.com/ping
hxxp://api.moreover.com/RPC2
hxxp://api.my.yahoo.com/RPC2
hxxp://api.my.yahoo.com/rss/ping
hxxp://bblog.com/ping.php
hxxp://bitacoras.net/ping
hxxp://blogdb.jp/xmlrpc
hxxp://blog.goo.ne.jp/XMLRPC
hxxp://blogmatcher.com/u.php
hxxp://bulkfeeds.net/rpc
hxxp://coreblog.org/ping/
hxxp://mod-pubsub.org/kn_apps/blogchatt
hxxps://phobos.apple.com/WebObjects/MZFinance.woa/wa/pingPodcast
hxxp://ping.amagle.com/
hxxp://ping.bitacoras.com
hxxp://ping.bloggers.jp/rpc/
hxxp://ping.blogmura.jp/rpc/
hxxp://ping.blo.gs/
hxxp://ping.cocolog-nifty.com/xmlrpc
hxxp://pinger.blogflux.com/rpc/
hxxp://ping.exblog.jp/xmlrpc
hxxp://ping.feedburner.com
hxxp://ping.myblog.jp
hxxp://pingqueue.com/rpc/
hxxp://ping.blogg.de/
hxxp://ping.rootblog.com/rpc.php
hxxp://ping.syndic8.com/xmlrpc.php
hxxp://ping.weblogalot.com/rpc.php
hxxp://ping.weblogs.se/
hxxp://rcs.datashed.net/RPC2/
hxxp://rpc.blogbuzzmachine.com/RPC2
hxxp://rpc.blogrolling.com/pinger/
hxxp://rpc.britblog.com/
hxxp://rpc.icerocket.com:10080/
hxxp://rpc.newsgator.com/
hxxp://rpc.pingomatic.com/
hxxp://rpc.tailrank.com/feedburner/RPC2
hxxp://rpc.technorati.com/rpc/ping
hxxp://rpc.weblogs.com/RPC2
hxxp://rpc.wpkeys.com/
hxxp://services.newsgator.com/ngws/xmlrpcping.aspx
hxxp://signup.alerts.msn.com/alerts-PREP/submitPingExtended.doz
hxxp://topicexchange.com/RPC2
hxxp://trackback.bakeinu.jp/bakeping.php
hxxp://www.a2b.cc/setloc/bp.a2b
hxxp://www.bitacoles.net/ping.php
hxxp://www.blogdigger.com/RPC2
hxxp://www.blogoole.com/ping/
hxxp://www.blogoon.net/ping/
hxxp://www.blogpeople.net/servlet/weblogUpdates
hxxp://www.blogroots.com/tb_populi.blog?id=1
hxxp://www.blogshares.com/rpc.php
hxxp://www.blogsnow.com/ping
hxxp://www.blogstreet.com/xrbin/xmlrpc.cgi
hxxp://www.holycowdude.com/rpc/ping/
hxxp://www.lasermemory.com/lsrpc/
hxxp://www.imblogs.net/ping/
hxxp://www.mod-pubsub.org/kn_apps/blogchatter/ping.php
hxxp://www.newsisfree.com/RPCCloud
hxxp://www.newsisfree.com/xmlrpctest.php
hxxp://www.popdex.com/addsite.php
hxxp://www.snipsnap.org/RPC2
hxxp://www.weblogues.com/RPC/
hxxp://xmlrpc.blogg.de
hxxp://xping.pubsub.com/ping/

Hope these works for you . Please don't forget to use "http" instead of using "hxxp"..

For WordPress users

Just go to Options >> Writing >> Update Services (text box).

By the way, if you are gonna fill your "Update Services" box with all the posted links, it'll make new posts too slower... Try to use all of them and IF they make new postings too slow, you are free to remove few links.

Apparently you just need to put the one in the wordpress admin, http://pingomatic.com and it pings all the others.


In addition Blog Flux offers a tool for automatically pinging a number of services, simply by entering your blogs url.

What is Google PageRank (PR)?

PageRank (PR) is a numeric value that represents how important a page is on the web. Google figures that when one page links to another page, it is effectively casting a vote for the other page. The more votes that are cast for a page, the more important the page must be. Also, the importance of the page that is casting the vote determines how important the vote itself is. Google calculates a page's importance from the votes cast for it. How important each vote is is taken into account when a page's PageRank is calculated.

PageRank is Google's way of deciding a page's importance. It matters because it is one of the factors that determines a page's ranking in the search results. It isn't the only factor that Google uses to rank pages, but it is an important one.

From here on in, we'll occasionally refer to PageRank as "PR".

Notes:

Not all links are counted by Google. For instance, they filter out links from known link farms. Some links can cause a site to be penalized by Google. They rightly figure that webmasters cannot control which sites link to their sites, but they can control which sites they link out to. For this reason, links into a site cannot harm the site, but links from a site can be harmful if they link to penalized sites. So be careful which sites you link to. If a site has PR0, it is usually a penalty, and it would be unwise to link to it.


How is PageRank calculated?

To calculate the PageRank for a page, all of its inbound links are taken into account. These are links from within the site and links from outside the site.

PR(A) = (1-d) + d(PR(t1)/C(t1) + ... + PR(tn)/C(tn))

That's the equation that calculates a page's PageRank. It's the original one that was published when PageRank was being developed, and it is probable that Google uses a variation of it but they aren't telling us what it is. It doesn't matter though, as this equation is good enough.

In the equation 't1 - tn' are pages linking to page A, 'C' is the number of outbound links that a page has and 'd' is a damping factor, usually set to 0.85.

We can think of it in a simpler way:-

a page's PageRank = 0.15 + 0.85 * (a "share" of the PageRank of every page that links to it)

"share" = the linking page's PageRank divided by the number of outbound links on the page.

A page "votes" an amount of PageRank onto each page that it links to. The amount of PageRank that it has to vote with is a little less than its own PageRank value (its own value * 0.85). This value is shared equally between all the pages that it links to.

From this, we could conclude that a link from a page with PR4 and 5 outbound links is worth more than a link from a page with PR8 and 100 outbound links. The PageRank of a page that links to yours is important but the number of links on that page is also important. The more links there are on a page, the less PageRank value your page will receive from it.

Free Web Tools

  1. Google PageRank (PR) Checker
  2. Google PageRank Prediction

Find more about PageRank with Google, visit http://www.google.com/technology/

List of Free Article Directories

Here is the list of Free Article Directories I have (I arranged them according to Page Rank) :


PR6
http://www.articlebiz.com/
http://www.articlecity.com/
http://www.easyarticles.com/
http://www.ezinearticles.com/
http://www.goarticles.com/

PR5
http://www.anyarticles.com/
http://www.articlealley.com/
http://www.articlemotron.com/
http://www.articlesexpress.com/
http://www.articleson.com/
http://www.bigarticles.com/
http://www.earticlesonline.com/
http://www.ezinefinder.com/
http://www.iarticlebeach.com/
http://www.isnare.com/

PR4
http://www.freearticlesubmit.com/
http://www.activeauthors.com/
http://www.amazines.com/
http://www.answer-site.com/
http://www.articlebeam.com/
http://www.articlebin.com/
http://www.articlebar.com/
http://www.articlecube.com/
http://www.articledepot.co.uk/
http://www.articlefever.com/
http://www.articlefusion.com/
http://www.articlehub.com/
http://www.articleintelligence.com/
http://www.articlekarma.com/
http://www.articlemap.com/
http://www.articlemarketer.com/
http://www.articlerich.com/
http://www.articles4free.com/
http://www.articlesbeyondbetter.com/
http://www.articlesoup.com/
http://www.articlesphere.com/
http://www.articles-submit.com/
http://www.articlewarehouse.com/
http://www.content-articles.com/
http://www.contentdesk.com/
http://www.contentmasterworld.com/
http://www.ezinecrow.com/
http://www.free-articles-zone.com/
http://www.freecontentzone.com/
http://freeinternetarticles.com/
http://www.freewebsitearticles.com/
http://www.freezine-articles.com/
http://www.goarticles.net/
http://www.infonexus.org/
http://www.premierdirectory.org/articles/index.html

PR3
http://www.101articles.com/
http://www.wisearticles.com/
http://www.acearticles.com/
http://www.acmearticles.com/
http://www.addarticle-submitfree.com/
http://www.ababba.com/
http://www.activearticles.com/
http://www.articleaccess.com/
http://www.articleavenue.com/
http://www.articleboutique.com/ - nice collection of articles but no submission.
http://www.article-blogs.info/
http://www.articlebliss.com/
http://www.articleblender.com/
http://www.articleboy.com/
http://www.articlebunch.com/
http://www.articlecapital.com/
http://www.articlecircuit.com/
http://www.articlecrazy.com/
http://www.article-database.com/
http://www.articledestination.com/
http://www.article-domain.com/
http://www.articlefair.com/
http://www.articlefarm.com/
http://www.articlefocus.com/
http://www.articlegarden.com/
http://www.articlegroup.com/
http://www.articlehopper.com/
http://www.articlelookup.com/
http://www.articlemailbox.com/
http://www.articleonlinedirectory.com/
http://www.articlepot.com/
http://www.articlerampage.com/
http://www.articles365.com/
http://www.articles24.com/
http://www.articles4reprint.com/
http://www.articles-4-free.com/
http://www.articlesandauthors.com/
http://www.articlesbase.com
http://www.articleselections.com/
http://www.articles-galore.com/
http://www.articleshelf.com/
http://www.articles-hub.com/
http://www.articles-keyword-rich.com/
http://www.articleskingdom.com/
http://www.articlesmagazine.com/
http://www.articlesnetwork.com/
http://www.articlestack.com/
http://www.articlestash.com/
http://www.bigarticledirectory.com/
http://www.cajun101.com/
http://www.content-corral.com/
http://www.contentfueled.com/
http://www.content-edge.com/
http://www.everydayarticles.com/
http://www.ezinearticles.biz/
http://www.ezine-writer.com.au/
http://www.ezineplug.com/
http://www.findandpostarticles.com/
http://www.free-articles-search.com/
http://www.freebie-articles.com/
http://www.free-content-resource.com/
http://www.freezinesite.com/
http://www.getyourarticles.com/
http://www.geminipublishing.com/
http://ireprint.info/
http://www.superarchives.com/

PR2
http://www.1articleworld.com/
http://www.ablearticles.co.uk/
http://www.allaboutarticles.org/
http://www.articlebag.com/
http://www.articlecorral.com/
http://www.articledaddy.com/
http://www.articlefeeder.com/
http://www.articleforyou.com/
http://www.articleinterchange.com/
http://www.articlejoe.com/
http://www.articlelocker.com/
http://www.articlemax.com/
http://www.articlepeak.com/
http://www.articleportal.com/
http://www.articleprobe.com/
http://www.articlerocket.com/
http://www.articlesearchnet.com/
http://www.articlesindex.com/
http://www.articlesnet.co.uk/
http://www.articlesnatch.com/
http://www.articlesonline.org/
http://www.articlesrightnow.com/
http://www.authorcontent.com/
http://www.bestarticlecity.com/
http://www.goodinfohome.com/

PR1
http://www.a1-articledirectory.com/
http://www.articlefrenzy.com/
http://www.articlejunction.com/
http://www.article-monster.com/
http://www.articleoptimizer.com/
http://www.articlepipeline.com/
http://www.eclipse-articles.com/
http://www.fetcharticles.com/
http://www.free-article-directory.com/

PR0
http://www.articlesalley.com/
http://www.article-store.com/
http://www.contentarticles.com/
http://www.dezinersplace.com/
http://www.freearticlehq.com/
http://www.hotarticles.net/
http://www.internetmagnet.com/
http://www.outblogger.com/articles


Anyone have free article directory, can please reply here.

If you want to copy this list and post it on the internet as is, you are required by copyright to note the source and to give a link back to this page.

Blog's RSS Feed

Add to Google
Subscribe to del.icio.us
Add to My Yahoo!
Add to Technorati Favorites!
Web Design India Feed
Subscribe with Bloglines
Subscribe in NewsGator Online
Add to My AOL
Add One Million Subscribers to Newsburst from CNET News.com

Subscribe with Pluck RSS reader
Simpify!


Find Blogs in the Blog
Directory