Untitled Document

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Digital KungFu: HTML and XHTML, the foundation of web design.</title>

<STYLE type=text/css media=screen, print>@import url(../../css/hiYaa.css);</STYLE>

</head>

<!--

==========================================================================================================

Id like to thank Dave Shea and the css Zen Garden project for the inspiration for this design. Without

the exposure to his site, I would never have understood the full importance of css both in design and

accessability.

www.csszengarden.com

==========================================================================================================

-->

<ul>

<li><div id="menu-03"><a href="usabilityl.htm"><img src="../pics/menu_08.gif" alt="Link to Usability critique." width=160 height=30 border="0"><span>Usability</span></a></div></li>

<li><div id="menu-04"><a href="video.htm"><img src="../pics/menu_08.gif" alt="Link to examples of Video work." width=160 height=30 border="0"><span>Video</span></a></div></li>

<li><div id="menu-05"><a href="flash.htm"><img src="../pics/menu_08.gif" alt="Link to examples of basic Flash work." width=160 height=30 border="0"><span>Flash</span></a></div></li>

<li><div id="menu-06"><a href="ascript.htm"><img src="../pics/menu_08.gif" alt="Link to examples of Advanced Flash using Action Script and Action Script code." width=160 height=30 border="0"><span>ActionScript</span></a></div></li>

<li><div id="menu-07"><a href="essays.htm"><img src="../pics/menu_08.gif" alt="Link to various essays." width=160 height=30 border="0"><span>Essays</span></a></div></li>

</ul>

</div>

</div>

<p><span class="hide">T</span>he first web designs I ever made were done with the use of a highly sophisticated web design package called <span class="emphasis">Notepad</span>. It was for the simple fact that getting my head around table structures was easier in code view that my <acronym title="Hyper Text Mark-up Language">HTML</acronym> skills grew so rapidly.</p>

<p>Once I had grasped the concepts of <acronym title="Hyper Text Mark-up Language">HTML</acronym>, I found a small bit of information on another designers site that put extreme importance on the design and development of proper <acronym title="Hyper Text Mark-up Language">HTML</acronym> code and implementation. I decided to make it a signature of my design that each of the pages I did were made in a text only editor, and hand coded.</p>

<p>Although they eventually made way for the incomparable <span class="emphasis">DreamWeaver</span>, the use of text editors allowed me to become fluent in markup language. As I began experimenting with other elements like <span class="emphasis">JavaScript, flash, and <acronym title="Cascading Style Sheets">CSS</acronym></span> I drew upon my belief in the ultimate importance of the code and began my involvement with each in a similar way; code first.</p>

<p><span class="hide">T</span>his page is dedicated to the <acronym title="Hyper Text Mark-up Language">HTML</acronym> coding I have performed through the years and to discussing the importance of proper element handling and why it is vital for a designer to use these. I have also included a design that makes improper use of tags in order to pull off a visual design. I wouldn't do this today if it could be helped (and with <acronym title="Cascading Style Sheets">CSS</acronym> it can), but I thought it would be a good addition to the list if just to show my understanding of the uses of <acronym title="Hyper Text Mark-up Language">HTML</acronym>.</p>

</div>

<h2>Bath Spa portfolio site</h2>

<p><span class="hide">I</span> thought I would start with the <acronym title="Hyper Text Mark-up Language">HTML</acronym> for the site you're looking at now as it is easily the most work I have put into an <acronym title="Hyper Text Mark-up Language">HTML</acronym> document, at least in regards to compliance and correct syntax etc... </p>

<p>Though it is easy enough to view with the <span class="emphasis">source</span> menu, this link provides you with a fully structured and colour coded script view of the <acronym title="Hyper Text Mark-up Language">HTML</acronym> for this page. I have tried to make this <acronym title="Hyper Text Mark-up Language">HTML</acronym>/<acronym title="Extensible HyperText Markup Language">XHTML</acronym> 100% compliant with all <acronym title="World Wide Web Consortium">W3C</acronym> recommendations. This includes setting the DOCTYPE and <acronym title="Extensible Markup Language">XML</acronym> languages to conform with the most widely used browser types. I have also used several accessibility features such as the use of linked rather than embedded<acronym title="Cascading Style Sheets"> CSS</acronym>, alternate IMG tags, proper use of tags in general, and where image navigation is present I have used invisible text elements to allow page readers to see links and nav functions while maintaining full <acronym title="Cascading Style Sheets">CSS</acronym> control over image elements.</p>

<p><span class="hide">T</span>his is my current portfolio and design contracting site. I developed this almost exclusively in <span class="emphasis">DreamWeaver</span> and <span class="emphasis">Fireworks</span> rather than through my normal process of rough sketching on paper, manual coding a layout, and only using the <acronym title="What You See Is What You Get">WYSIWYG</acronym> editor to adjust the final layout. It was interesting to develop this using <span class="emphasis">DreamWeaver</span> as a layout tool, but I ended up with a fairly sprawling and not entirely cohesive design.</p>

<p>As for the <acronym title="Hyper Text Mark-up Language">HTML</acronym> code, this site demonstrates my typical use (or misuse) of nested tables and <acronym title="IMaGe">IMG</acronym> tags to create a visual site with clean rollover images and design layout. It is fairly resilient too, displaying much the same content in each browser I tested it in. Unfortunately it is heavier than I would like and doesn't have that pop you expect from a well optimised site.</p>

<p>This link explores the site itself and I'll leave the <acronym title="Hyper Text Mark-up Language">HTML</acronym> source view up to you. </p>

<h2>Garden Art</h2>

<p><span class="hide">T</span>he <span class="emphasis">Garden Art</span> website is an example of some more image and table manipulation. However, in this site I also employ the use of an <span class="emphasis">iFrame</span> to allow for content to be scrollable without disrupting the layout and size of the centred table.</p>

<p>My client requested some very specific details be included and as a result the site wasn't built with ease of future design change in mind. Nor was cross browser compatibility a top priority, though I believe the site works just fine in the two major browsers. The most compatible element is the design ratio, being set for <span class="emphasis">800X600</span> (as is my usual design method) it allows for viewing by the majority of web user resolutions rather than for the minority that can view a larger more defined resolution. </p>

<p>The <acronym title="Hyper Text Mark-up Language">HTML</acronym> is hand coded for the most part, but because of the precise positioning of the images, I used <span class="emphasis">fireworks</span> and <span class="emphasis">Photoshop</span> to cut and place images with auto generated table snippets. Again, this link goes direct to the site, enjoy. </p>

<h2>Country Life Designs </h2>

<p><span class="hide">H</span>ere is a perfect example of one of my earlier hand coded websites. There was no use of either <span class="emphasis">DreamWeaver</span> or <span class="emphasis">Photoshop</span> in the creation of this site. Everything was done in a text editor called <span class="emphasis">Arachnid</span>. Images were scanned, cropped and processed with <span class="emphasis">Kodak image viewer</span>. </p>

<p>There wasn't much to be done on this site other than to create showcase page for new product ranges. I reverse-engineered some <span class="emphasis">JavaScript</span> and managed to put together a site that not only provided a lot of product specific information in a single screen, but would resize to fit any resolution from <span class="emphasis">640X480</span> up.</p>

<p>It's not the best example of my design work, artistically speaking, but for the time and stage in my development it's focus is on the code being something that facilitates design is a milestone.</p>

</div>

<p>this page and All artwork represented on it is copyright JR Ryan - 15/12/2005 </p>

<p><a href="mailto:jr@truthinertia.com">email</a> <a href="http:realit.truthinertia.com" target="_blank">website</a> <a href="http://www.skype.com">phone:01275 333 537</a> <a href="http://maps.google.com/2%20manor%20yard%20bs39%205th%20uk">address:2 manor yard, the street, stowey, bishop sutton, bs39 5th</a></p>

</div>

</body>

</html>