VitaBodies designed an Ebay Template for listing items on ebay. The template is W3C Valid Table-less XHTML Strict CSS and does not break the Google RSS XML data feeds.

Having an Ebay template is nice, as you have all of the text that is repeated in almost every listing right there ready for minor tweaking. Plus your listing take on a more professional look and feel.

The images were designed so that one or more can be used in the template or replaced with images of the item that is being sold or auctioned.

One of the big challenges was to get the code to work in the layout that we needed and still support the Google RSS XML Data Feeds.

Being controlled by an external style sheet allows the look of ALL the listings to be changed. Changes can be made if ebay alters their scripts and styles (and they do) or to refresh the look of the listings from time to time.

NOTE: If you plan on doing your own style sheet for ebay, do not use the word ebay as an ID or CLASS or anything else. Vitabodies was using style sheets on ebay before ebay really got into using them. So when ebay started creating and usings a style sheet can you guess what word they used? EBAY…

]]> http://www.vitalbodies.com/blog/2008/07/14/portfoilo-ebay-template-w3c-valid-table-less-xhtml-strict-css-rss/feed/ 0 http://www.vitalbodies.com/blog/2008/07/13/open-source-inkscape-scalable-vector-graphics-svg-software/ http://www.vitalbodies.com/blog/2008/07/13/open-source-inkscape-scalable-vector-graphics-svg-software/#comments Sun, 13 Jul 2008 18:12:23 +0000 vitalbodies http://vitalbodies.wordpress.com/?p=230 Open Source Inkscape Scalable Vector Graphics SVG Software

If your looking for a program to draw logos, icons, charts illustrations and more give Inkscape a try.

VitalBodies had the opportunity to try Inkscape, an Open Source Vector drawing program that in many ways rivals programs like CorelDraw or Illustrator. What gives Inkscape an edge over most ever other drawing program is that Inkscape’s native format is Scalable Vector Graphics SVG.

Click image for a larger graphic. Created with Inkscape and exported to PNG…

According to the Wikipedia:

Scalable Vector Graphics (SVG) is an XML specification and file format for describing two-dimensional vector graphics, both static and animated. SVG can be purely declarative or may include scripting. Images can contain hyperlinks using outbound simple XLinks.^[2] It is an open standard created by the W3C‘s SVG Working Group.

The fact that Inkscape is based upon an open standard, and is of itself an Open Source program makes this an excellent program for creating art that you know you can open and use in the future. There are the little details that make one drawing program better than another on a feature by feature basis, but having all your work based upon an open standard is not some small feature. This sets Inkscape well a part from the crowd. Inkscape is also multi-platform so the program is available for more than just one operating system.

VitalBodies is not new to vector graphics, but found out the easy way, that using Inkscape is just plain fun.

First Impressions:

Refreshing and nice how the program does what you would expect with relative ease.

The interface is clear and easy to use.

For the most part, an artist who is used to working in vector graphics can jump right in.

Inkscapes is fun and a pleasure to use.

Conclusion: doing art is fun in Inkscape…

About Inkscape: (vector-based drawing program)

“Inkscape loads and saves a subset of the SVG (Scalable Vector Graphics) format, a standard maintained by the WWW consortium.
Inkscape user interface should be familiar from CorelDraw and similar drawing programs. There are rectangles, ellipses, text items, bitmap images and freehand curves. As an added bonus, both vector and bitmap objects can have alpha transparency and can be arbitrarily transformed.
Inkscape supports multiple opened files and multiple views per file. Graphics can be printed and exported to png bitmaps.
Some of the import and export features are provided using the packages dia, libwmf-bin, pstoedit, sketch, imagemagick, and perlmagick.
Other Extensions use libxml-xql-perl and python-xml.”

How To Install Inkscape In Ubuntu Hardy:

Applications > Add/Remove… > Supported Applications > Search Inkscape > Enable (check in check box) > Apply Changes…

About VitalBodies:

VitalBodies recently shifted to using all Open Source programs running on an Open Source Operating System Ubuntu. VitalBodies would like to thank the Inkscape team that makes drawing a pleasure!

-

For more VitalBodies Inkscape: Keyword Inkscape

- Draw Freely -

- Visit Inkscape: http:www.Inkscape.org -

VitalBodies recently finished the creation re-creation of the MelitaMarshall.com Web Site.

This site is based upon a template, VitalBodies created for the Oregon House web site.

Melita wanted wanted the site to tie into her existing business Oregon House and the Oregon House web site but be able to change in style as needed.

VitalBodies created the template to be W3C Valid Table-less XHTML Strict and Valid CSS.

(Click image to see a larger clearer version)

The entire web site W3C Valid Table-less XHTML Strict and Valid CSS.

The web sites original tabled design was done by Paradigm-Graphics some years back.

-

MelitaMarshall.com:

“I bring wisdom from my own spiritual journey as well as experience in business entrepreneurship and training in holistic healing into the vessel of our healing sessions. My goal is to help you gain insight into what is limiting you, and coach you to find the courage to reconnect with your source and your core.“

Visit MelitaMarshall.com

VitalBodies recently finished the re-creation of an Oregon House Web Page. From this template, all the other pages on the Oregon House web site can be updated.

VitalBodies created the template to be W3C Valid Table-less XHTML Strict and Valid CSS.

(Click image to see a larger clearer version)

The OregonHouse Events page (shown above) and a few other pages were brought up to W3C Valid CSS XHTML Strict table-less designs as part of an ongoing project of keeping the web site up to date.

The web sites design was originally done by Paradigm-Graphics some years back.

-

OREGON HOUSE:

“Oregon House, a peaceful Oregon coast retreat center for individuals and groups. At our unique central Oregon coast resort we invite you to relax, reflect and recharge. At Oregon House you experience a different world, close to nature’s beauty and the transformational energy of the ocean.”

- Oregon House is located in Yachats Oregon -

Visit OregonHouse.com

Portfolio: Mandala Arts Valid Table-less XHTML Strict CSS

VitalBodies recently finished the re-creation of a Mandala Arts design.

VitalBodies took Mandala Arts existing home page design and made it Table-less W3C Valid XHTML Strict and CSS.

(Click image to see a larger clearer version)

Earlier last year VitalBodies solar powered the MandalaArts.com web site.

-

MandalaArts.com is the home of

Stickers, Body Art Tattoos, Magnets, Flag Stings, Streamers and Wall Hangings.

- Original Art By Bryon Allen -

Visit MandalaArts.com

Create a multi page multi section web site from scratch in a text editor?

Why Yes.

A one page site that can assemble itself into over 100 different web pages and up to 10 different sections, 3 style sheets and all be Table-less, CSS, XHTML Strict and have every page validate?

Yes.

DESIGN: This version of the Vitalbodies web site used hand coded (in a text editor) CSS, XHTML, SSI Content Management System and Administration. All of the little site graphics and backgrounds were either created in as vector art or raster program or shot and edited with a digital camera. All of the company images a side from Ecolution where images by those companies. The Ecoloution hemp bag was one of our own product shots. The site had three styles sheets the customer could choose from by clicking the small icons in the upper right corner. One layout was fluid and fills the screen and the other is a fixed width. The third what a nearly style-less design to show what having no style sheet at all looked like or for printing. At the time this site was first being served, the site was one of the few completely table less sites online that every single page validated XHTML strict. Each section had its own color scheme. There were countless fragments.

CMS FRAMEWORK: The hand coded content management system included a random images on the main page and a hand chosen image on each company page.  The CMS also automatically created the meta title, keywords, and description and basically assembled the the whole site from reusable fragments. each main part of the site was a fragment. Meaning the nav bar was on its own page and the header on its own page etc. The fragments wete assembled by a special page that deterines the layout of the fragments and which fragments to use. Each fragment had to be designed with inteligence so that all the correct information was assembled in depending on what page was being assembled. The most challenging was the navbar that changed (tabs, colors, section, and page names) depending on what page and what section the site viewer had clicked to.  The CMS also generated the nav barm page layout, style sheet selection, and many other features on the fly. The site design was interesting in that every page was the same page, yet that one page could assemble into any of the 100 or more pages on the web site. Pure magic!

ADMINISTRATION: This administration program was designed so one only needed to edit one single text based page in order to maintain the web site.

The Third Table-less, XHTML Strict, Valid, CSS Design:

The Forth Table-less, XHTML Strict, Valid CSS Design:

(only the style sheet is different and the random images)

Each of the sections and pages colors can be seen as you move down the page.

The Top Current Contenders:

• Drupal: http://drupal.org/project
• WordPress: http://www.wordpress.org
• Joomla: http://www.joomla.org

VitalBodies, for example, needs to be able to have a shopping cart, RSS datafeeds, Blog, Art Gallery, and more. We, of course, want our site to be W3C valid code and highly customizable but user friendly to administer.

What is out there that can do what we need? What are leading web 2.0 packages for us site builders?

There are also these to consider:

• Coppermine: http://coppermine-gallery.net/
• Silverstripe: http://www.silverstripe.com/
• MediaWiki: http://www.mediawiki.org/wiki/MediaWiki
• Typo3: http://typo3.com/
• List of CMS: http://en.wikipedia.org/wiki/Comparison_of_content_management_systems

MARKUP: http://validator.w3.org/#validate_by_input

CSS:http://jigsaw.w3.org/css-validator/#validate_by_uri

If you do not create pages, but hire others to create them for you, you can check the quality of their work in terms of web standards. Insist on valid code.

If you are not familiar with using these Validating tools consider these tips:

• Make sure you have a DOCTYPE declaration.
• Get the XHTML (markup) correct BEFORE validating the CSS.
• Resolve the errors in the code (if any) from the TOP down.
• Have fun and learn as you go.

I like to check the Show Source and Verbose Output check boxes.

Show Source lets me see the all the code by line number so I can find the offending code AND see the code that surrounds that offending code. Verbose Output give me more information to go on resolving issues that the validator finds.

There are tabs to allow you to have the validator check you code in what ever way works for you. Like by URI, file upload or direct input etc.

URI for checking existing pages but means you have to upload the changes to your server each time you want to check how valid the code is.

With Direct Input you can just copy and paste you code into the the validator and then edit the code in the validator to save time. When you are done paste your valid code back into your site and and upload.

File Upload will allow you to upload the the file from your computer.