CSSTypeset
CSSTypset is handy tool for seeing the effect of CSS code while simultaneously seeing what’s going on behind the scenes with the actual code. It works both ways, you can type code and immediately see it applied to text, or you can type text and use a GUI with sliders to apply CSS to your text. If you have a hard time figuring out the difference between em and px, verdana and helvetica then this is the tool for you.

Text2PNG
Add a few lines of javascript to your header and this nifty web tool converts your headlines to images automatically.

CSSTextWrap
Sick of ‘designing to an invisible grid’? Turn that grid into origami and spice up your layouts with this incredible text wrap tool.

Kotatsu
A wrote a tutorial a while back about how to make XHTML tables that could be marked up with PHP, Javascript or Ajax. If only I had known about this tool then! Essentially it’s a HTML table generator.

GoldenRationCalculator
Divine proportions have been used for all types of creative work, from architecture to print layout to photography. It’s only natural that it also eventually found it’s way into web design. This web generator makes it easy to design using the ‘golden ratio’ as the underlying framework for your website’s design.

Firefox CSS3 Highlights

• Support for the inline-block (CSS 2.1) and inline-table (CSS 2.0) values of the display property
• font-size-adjust is a property in CSS 2.0 (which was dropped from CSS 2.1 due to lack of implementations). Think of it as a way to a way for style sheets to pick font size by the size of the x-height rather than the size of the font.
  

  Anyway, why would you want to use this? Largely because, on the Web, you don’t actually know what font is going to be used. Different machines, especially when running different operating systems, have different fonts on them. Even the same font might be used slightly differently on different operating systems. The lowercase letters in different fonts take up a different proportion of the font’s size. How big text appears and how much width it takes up is often more closely related to the size of the lowercase letters than the uppercase.

• rgba() and hsla() colors will allow for easier control over transparencies and color separation
• New values for the width, min-width, and max-width properties: -moz-max-content, -moz-min-content, -moz-fit-content, and -moz-available. This value lets authors do some things that previously weren’t possible without tables, such as putting backgrounds on headings that won’t fill the whole width of the container unless the heading does, but is a single rectangle if the heading breaks to multiple lines.
• white-space: pre-wrap will allow for the displaying of preformatted text in a way that wraps when the text doesn’t fit in the width of its container. This can be useful for things like source code samples and mailing list archives.

Opera CSS3 Highlights

• Media queries are a CSS 3 construct, which work in a similar manner to conditional comments, except that these are web standards, rather than proprietary constructs—you can enclose a block of CSS rules inside a media query, and then have them applied to your markup (or not) depending on a condition, such as “is the screen size less than 480 pixels”?
• text-shadow Using drop shadows with text used to mean serving the text as an image, and messing about the positioning, but that’s no longer the case. In the text-shadow property, the values from left to right set the color of the shadow, the left/right and top/bottom offsets of the shadow (negative values move the shadow left/up, and positive values move the shadow right/down), and the amount of blurring for the shadow.
• -o-background-size allows for the dynamic or conditional control of background images.
• HSL. CSS 3 allows you to specify colours as HSL (or Hue, Saturation, Lightness) values—this is good, HSL colors overcome some of the limitations of RGB colors.

You can review even more of the plans for CSS3 for Firefox and Opera and some developer feedback here.

All kidding aside, the importance of impressing people with your resume’s visual appeal, especially online, is important. Here are some tips on styling a resume so it conveys your skills and is pleasing to the eye.

Keep in mind, when I say design, I don’t necessarily mean having flying planets, sparkles and grunge effects all over it. That would be annoying and if that’s what your resume looks like right now, I strongly encourage that you remain employed until you get a chance to fix it.

What I mean is paying attention to three critical things: typography, layout and accessibility.

1. Provable Type
   No matter what you think, as soon as people look at your resume they instantly begin forming opinions about you. “Oh my god, why the heck did this guy put his name in Comic Sans Bold!?” It’s your job to make sure they get the right message. At the same time using the same font size all over your resume can look boring. Vary the size of fonts in your headers.

   

   I used bold and caps above to break up the space in my “skills” section which would look jumbled otherwise. As a general rule you should only use one professional looking font for your online resume. Using more than two font-families on a resume is ill-advised (and by ill-advised I really just mean ugly.)

   On my resume I used Arial, Helvetica, sans-serif at font-size:20px for headers and font-size:12px throughout.

2. Organization is Key
   The layout of your resume is directly proportional to your chances of getting hired. Repeat that. I don’t know if it’s true but it sounds nice. But you really should make sure your design is as clean and easy to read as possible.

   

   Don’t justify text, only use all caps for headers and to define lists. Double check to make sure your resume prints well. You may want to consider using Hartija’s CSS Print Framework.

3. Usability is Important
   Since your online resume is displaying in a web browser, usability is very important. It will also convey some basic understanding of web design if you can demonstrate comprehension of usability. On my resume I floated this column on the left:

   

   This allows the user to download the document in whatever format they see fit. It also includes a link to my online portfolio and my hcard, two other things that will convey competence.

You can view my full resume here. It’s to the point and clean. It looks nice in the browser, prints well and if the user wants to take it with them there’s the links for downloading as Rich Text, PDF or DOC.

Del.icio.us
Digg This
Stumble
]]> http://www.developertutorials.com/blog/design/styling-your-online-resume-204/feed/ http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-3-192/ http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-3-192/#comments Tue, 27 May 2008 05:50:12 +0000 JonGos http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-3-192/ Now that you’ve designed your table it’s time to learn how to make it function as valid XHTML. The easiest way is create a hidden table on top of the image.
1. 1. Create a table with the same number of rows and tables. My image had 8 rows and 9 columns.
2. 2. So we’ve got our table, now we want to style it with CSS. Give it a div id=”". For the sake of this tutorial of ‘grunge-table’.
3. 3. In your stylesheet reference the new id and call the image. Don’t forget to include the width and height of your image like so:

<style>
#grunge_table {
width:600px;
height:250px;
background:url(grunge_table.png) no-repat;
}
</style>
</head>

4. 4. Now, your table isn’t exactly going to match the cells of your image just yet. The best way to make it do this is to figure out the measurements of the columns and rows of your table image in photoshop. If you look at the images below, you’ll see what my table looked like before and after i fixed the columns and rows to match the image.

Before:


After:


The Code:

<table id="grunge_table">
  <tr>
    <td width="192" height="72"> </td>
    <td width="44"> </td>
    <td width="43"> </td>
    <td width="43"> </td>
    <td width="45"> </td>
    <td width="46"> </td>
    <td width="43"> </td>
    <td width="43"> </td>
    <td width="43"> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td height="26"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td height="24"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td height="26"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td height="24"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

5. 5. I used Dreamweaver to give you a visual representation of what’s going on. The green numbers at the bottom of the lower picture show the widths that the columns have been adjusted to. In the lower pic you’ll see that the table now matches the image perfectly.
6. 6. Now that the dimensions are correct, we need to hide the table setting the border to 0px. Here’s what your stylesheet code should look like:

<style>
#grunge_table {
width:600px;
height:250px;
border:0px;
background:url(grunge_table.png) no-repat;
}
</style>
</head>

We’ve got our hidden table, in part four we’ll fill it with data.

PART 1 | 2 | 3 | 4

Del.icio.us
Digg This
Stumble
]]> http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-3-192/feed/ http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-1-186/ http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-1-186/#comments Sat, 24 May 2008 00:21:11 +0000 JonGos http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-1-186/ If you offer web design or graphic design services at some point you’re going to need a price chart or service list so that potential clients can see what you’re all about. In this multi-part tutorial I’ll show you how to make one in Photoshop and then mark it up for XHTML. Then I’ll let you download the files to double check your work. You should download some grunge brushes and textures before hand, I used textures from Bittbox.com and these brushes from photoshopbrushes.com.




Before we continue, I want you to know that there are many other ways to achieve this effect. You could create the design in Photoshop then slice it for XHTML. You could create a table in Photoshop then just code an image-map for it. Of course, you could also do this using only tables and CSS. Since this section of the blog is about Photoshop, you’re going to learn how to do it using everyone’s favorite graphic design program.

One more thing, it will help you 100% if you sketch out what you need prior to making the grid. You can do this freehand or in a spreadsheet program like Excel. This is to simply help you organize your thoughts and layout your items in the best way possible.

Without further interruptions, let’s start part one of our lesson.

Setting The Table

1. 1. Create a new document roughly the size of the table you want.
2. 2. Select “New Fill or Adjustment Layer” and then “Solid Color”. Pick the color of your choice.
3. 3. Select View >> Rulers and then View >> Show >> Smart Guides.



4. 4. Drag the mouse from the top ruler to the areas in the document where you want the horizontal bars of your table. I suggest placing them apart in multiples of 5 or 10 so the math is easy. Space them apart so that every line alternates in color. (ex. Black Red Black Red)



5. 5. Create your bars using the rectangle tool. Use black as the color.
6. 6. Group your horizontal bars in a folder and name them. Mine was called “Horizontal“.
7. 7. Set the “Blend Layer” of this folder to “Soft Light” and the Opacity to “45%”



8. 8. You now have a darker shade of the color you chose for your horizontal bars that alternates with the original color.
9. 9. Now let’s repeat steps 3 through 5 for our vertical bars. Space them a part equidistant and uniformly.



10. 10. Select one of the vertical bars and change their “Fill” to 0%. In “Layer Style” select “Stroke” and set it to 1px (Outside). Do this for all of the vertical bars. Set the Blend Mode to “Overlay”.
11. 11. Create a new layer and select the line tool. While holding Shift and Option drag from the top corner of a vertical bar outward diagonally. this creates the vertical lines you see at the top of my design. Once you do this, duplicate each line then group them all and set the group Blend Layer to “Overlay” and an Opacity of “46%”.



12. 12. Looks like we’ve got the beginnings of a fancy looking table already!



In Part Two we’re going to grungify our table.

PART 1 | 2 | 3 | 4

Del.icio.us
Digg This
Stumble
]]> http://www.developertutorials.com/blog/design/grunge-tables-with-photoshop-and-xhtml-part-1-186/feed/ http://www.developertutorials.com/blog/design/photoshop-design/eight-ways-to-turn-photoshop-designs-into-web-pages-167/ http://www.developertutorials.com/blog/design/photoshop-design/eight-ways-to-turn-photoshop-designs-into-web-pages-167/#comments Wed, 07 May 2008 21:15:38 +0000 JonGos http://www.developertutorials.com/blog/design/photoshop-design/eight-ways-to-turn-photoshop-designs-into-web-pages-167/ In “Designing and Coding a Wordpress Theme From Scratch” I gave an overview, start-to-finish, on how to turn a Photoshop design into a fully functioning Wordpress theme. There are many methods for getting from Photoshop to XHTML, however. Here are some of the ones I used in that tutorial and a few new ones that you may not be aware of.



Slice to XHTML/CSS
In that same tutorial we took advantage of the most common way to turn PSDs into XHTML. The method, built in to the CS series of Photoshop, is called slicing and it takes all the work out of coding for you! The major complaint is that the code exported doesn’t exactly fit conventional standards (no separate stylesheets and html documents, for instance).

Adobe InDesign
Two items in this list are in the Adobe Family for good reason, Adobe wants you to use them all together so they’ve make it easy to go from one application to another and back. In this case you would design a page in Photosohp then enhance it after exporting to Indesign. Then you would export it as XHTML from InDesign. Of course since InDesign doesn’t like importing vectors, it will try to rasterize your text and images, so you should recreate text within the InDesign environment before exporting. Here, blogger, Nick Hodge talks a bit about Photoshop and InDesign workflow.

Adobe Fireworks
Originally a Macromedia product, Fireworks has now been fully integrated into the adobe family and offers some unique alternatives for web development like animations and web graphics. Although vectors have been integrated into Photoshop somewhat, Fireworks still handles them better although translating from Photoshop to Fireworks can cause certain issues



Media Lab SiteGrinder
SiteGrinder2 and SiteGrinder2 Pro are extensions for ProTools that allow for the exporting of WC3 Compliant XHTML/CSS. Unlike the “Save for Web” option built into the CS Suites, SiteGrinder does an excellent job of outputting code that doesn’t need to be ‘cleaned up’ after the fact. It conveniently names the Stylesheet block ID’s after your layers for easy deciphering of the architecture. Another neat function is that as it builds, SiteGrinder eliminates redundant graphics and merges layers when possible to minimize download size. Many designers swear by it. Here’s a blurb from the creators, MediaLab:

SiteGrinder 2 successfully turns Adobe Photoshop into an easy-to-use and powerful website design and production tool.

While SiteGrinder is not aimed solely at the web neophyte, a SiteGrinder-equipped designer with no previous web experience can use only their Photoshop skills to go from concept to deployment of a professional, standards-compliant site in mere hours with no slicing or programming.

The difficulty of this task is invisible to the user as SiteGrinder builds graphics, text, and interactivity using modern web standard technologies and takes into account tricky requirements like cross-platform browser compatibility.

Site Grinder 2 Pro is $349, the Basic version is $129



Media Lab PSD2FLA
Media Lab’s other claim to fame is PSD2FLA, a program that (like it says in the title) converts Photoshop Documents (PSD) into Flash Documents (FLA). If your weapon of choice is Flash websites that are well designed, this will help you get your design ideas out quickly so that you can spend the majority of your time programming Actionscript.

Image Mapping
One somewhat forgotten method for turning PSD documents into web pages is with image maps. Actually, it wasn’t so much forgotten as it was banned from the internet like tables were in 1998. An image map is essentially a layer of transparent html on top of an embedded image that uses anchor tags to turn areas of images into hyper text links. While this means any image can theoretically be turned into a website, the method is considered somewhat amateurish as it doesn’t allow for things like machine readable text, stylesheets or many of the other things extensible HTML allows.

If you’d like to read more about this dinosaur of a technique try this page.

The fact of the matter is that better technologies have simply replaced image maps. With Javascript and Ajax we can now embed dynamic images that are tied to databases to produce far more impressive things than Image Maps ever could (think GoogleMaps). To put it another way, using Image Maps in 2008 is like trying to churn your own butter (from the cow and mining your own salt) when there’s a Trader Joe’s right across the street from your house.

Outsource It
What could be your easiest option is to simply outsource the coding to firms that specialize in PSD to XHTML slicing and coding. Most of them simply do what I described in #1 so it’ll save you money if you learn to do it yourself.

Bellow you’ll find a list of ten places that offer this service. (In full disclosure, GosDot, is my own service.)

1. Aloe Studios
2. Chop and Code
3. Happy XHTML
4. GosDot
5. Design Creek
6. FinelySliced
7. Merix
8. PSD2HTML
9. XHTML Slicer
10. XHTML This
11. XHTML Team



Hand Coding
For developers, hand coding (also known as hard coding) is by far the most preferred method. While some will still use photoshop to create and slice images, they’ll do all the styling and coding themselves. People do this for a variety of reasons but the main reason is for control. If you write your own code, you’ll find bugs quicker and know more about the inner workings of your own site. It an take longer, but I guarantee you that quick and prolific hand coder will out pace anyone in workflow, simply because they don’t have to reference as much to be standards compliant.

Del.icio.us
Digg This
Stumble
]]> http://www.developertutorials.com/blog/design/photoshop-design/eight-ways-to-turn-photoshop-designs-into-web-pages-167/feed/ http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-10-160/ http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-10-160/#comments Wed, 30 Apr 2008 21:16:50 +0000 JonGos http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-10-160/ Part 3 - “Photoshop to XHTML in 24 Hours”
Part 4 - “Cleaning Up Your XHTML”
Part 5 - “Preloading Images with Javascript and CSS”
Part 6 - “Marking Up is Hard to Do” and “The Anatomy of a Wordpress Theme”
Part 7 - “Beginning with PHP for Wordpress”
Part 8 - “Putting the Press in Wordpress with PHP”
Part 9 - “Marking Up Header.php, Footer.php and Sidebar.php”

So far we’ve made a ton of progress with our theme design. We designed it in Photoshop, we converted to XHTML and then we began the somewhat tedious task of adding PHP. Now that we’ve created index.php, header.php, footer.php and sidebar.php, we can move on to creating the rest of the theme.

In “The Anatomy of a Wordpress Theme” we noted that Wordpress needs certain files for your theme to function properly. Here’s that list again:

1. 404 Template = 404.php
2. Archive Template = archive.php
3. Archive Index Page = archives.php
4. Comments Template = comments.php
5. Footer Template = footer.php
6. Header Template = header.php
7. Links = links.php
8. Main Template = index.php
9. Page Template = page.php
10. Popup Comments Template = comments-popup.php
11. Post Template = single.php
12. Search Form = searchform.php
13. Search Template = search.php
14. Sidebar Template = sidebar.php
15. Stylesheet = style.css

As you may have noticed, the items listed in bold are the only items we’ve created in our lessons thus far and there is still a lot of work to be done! Anything struck through is optional therefore this lesson won’t cover it but I have linked to pages where you can read about them on your own. While I can’t go into complete detail I will highlight some major points about each and then I’ll give you links to four sites that break the process down in detail and more thoroughly:

single.php

Single.php is the file referenced when someone clicks on the permalink for one of your posts. Thus it is the template for displaying a single post on your blog. On most blogs single.php an index.php are very similar except that in addition to querying <? the content(); ?> we also have to query the comments page. We do this just before we close the loop with:

	<?php comments_template(); ?>

page.php

Page.php is the template for any page in your theme that doesn’t have it’s own .php template or that is not a blog entry. This is also the template for the static “Pages” that you create within the Wordpress Admin panel. It is usually also just like index.php except that it doesn’t include the loop or the_content().

links.php

Ignores Page content and instead displays your links using get_links_list.

404.php

Where you users land when they follow a bad link on your blog or click through to something that’s been removed. Codex offers some advice….

While you work hard to make sure that every link actually goes to a specific web page on your site, there is always a chance that a link clicked will slam dunk and become a famous 404 ERROR PAGE NOT FOUND. Some errors are avoidable, you should regularly check and double check all your links. Also, if you are deleting a popular but out-of-date post, consider deleting the body of the post, and replacing it with a link referring visitors to the new page.

This concludes “Designing and Coding a Wordpress theme from Scratch” . This guide was written as a starting point and a reference guide I can always be contacted at jongos [at] gmail if you are having trouble or need advice. Alternatively I’ve compiled a list of resources that I often reference when creating themes below.

In this tutorial I mentioned a theme that I was developing quite a bit. You can download it along with the PSD used to create it here. Keep in mind that the version you’re downloading is an early beta release. It’s bulky, clunky, not very pretty under the covers and has a mind of it’s own so I’m dubbing it the Rosie O Donnell release. Feel free to give me feedback on it, use it to double check your own code, or modify it to suit your needs.

DOWNLOAD THE AQUA MARINA WORDPRESS THEME



---

Recommended Further Reading

Stepping_Into_Templates
HTML to XHTML
So You Want To Create Wordpress Themes
From XHTML/CSS to Wordpress
Tamba2’s Guide
Slizing a Wordpress Theme

Del.icio.us
Digg This
Stumble
]]> http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-10-160/feed/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-6-151/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-6-151/#comments Tue, 29 Apr 2008 12:37:31 +0000 JonGos http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-6-151/ This is the sixth post in series about creating Wordpress themes with your Photoshop designs. You may want to review before we continue….

Part 1 - “Tools For The Task” and “Preparation”
Part 2 - “Layout And Structure” and “Designing Wordpress Themes in Photoshop”
Part 3 - “Photoshop to XHTML in 24 Hours”
Part 4 - “Cleaning Up Your XHTML”
Part 5 - “Preloading Images with Javascript and CSS”

---

Marking Up Is Hard To Do

Wikipedia defines the term markup as a set of annotations to text that describe how it is to be structured, laid out, or formatted. When we say we’re going to ‘mark something up’ it means we’re formatting the document so that it can be read correctly by machines. Hypertext Markup Language (HTML) is the most common form. That can be marked up to Extensible Hyper-text Markup Language (XHTML) and beyond that to PHP to become dynamic.

Now that we’ve got our basic html layout design we can begin the hard work the transition from HTML to PHP.

Anatomy of a WordPress Theme

Before we get ahead of ourselves let’s analyze exactly what Wordpress is expecting from a theme. The Wordpress engine works primarily using separate PHP files for the different components of the core engine. The various parts of your theme will simply call for various parts of the core engine to display content. This makes it easy for you to style sections individually. It also can allow for some incredibly complex themes that are built on the Wordpress engine. Themes like the The Unstandard by Derek Punsalan and Redoable are great examples of how to rethink the Wordpress theme impressively.

Fundamentally, the WordPress Theme system is a way to “skin” your weblog. Yet, it is more than just a “skin.” Skinning your site implies that only the design is changed. WordPress Themes can provide much more control over the look and presentation of the material on your website.

A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files. A theme modifies the way the site is displayed, without modifying the underlying software. Themes may include customized template files, image files (*.jpg, *.gif), style sheets (*.css), custom Pages, as well as any necessary code files (*.php).

Here are the things Wordpress looks for a theme file:

1. 404 Template = 404.php
2. Archive Template = archive.php
3. Archive Index Page = archives.php
4. Comments Template = comments.php
5. Footer Template = footer.php
6. Header Template = header.php
7. Links = links.php
8. Main Template = index.php
9. Page Template = page.php
10. Popup Comments Template = comments-popup.php
11. Post Template = single.php
12. Search Form = searchform.php
13. Search Template = search.php
14. Sidebar Template = sidebar.php
15. Stylesheet = style.css

For the most part, if you’re missing any of these parts your theme either won’t work or won’t fully function the way Wordpress wants it to. So far the only thing we’ve completed is stylesheet.css so where do the rest come from? In Part 7 we’ll create index.php and start marking up our XHTML to PHP.

Del.icio.us
Digg This
Stumble
]]> http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-6-151/feed/ http://www.developertutorials.com/blog/javascript/designing-and-coding-a-wordpress-theme-from-scratch-part-5-149/ http://www.developertutorials.com/blog/javascript/designing-and-coding-a-wordpress-theme-from-scratch-part-5-149/#comments Tue, 29 Apr 2008 04:48:59 +0000 JonGos http://www.developertutorials.com/blog/javascript/designing-and-coding-a-wordpress-theme-from-scratch-part-5-149/ Image heavy websites have one problem: load time. So if you’re designing a Wordpress theme that relies heavily on images like one made in Photoshop, you want to do everything you can to increase speed. a) You want the images to display as shortly after the text does as possible and b) you want to do everything to help users on slower connections.

One way to do this is with javascript, the other way is with CSS.

Preloading Images with Javascript

Javascript is unfortunately abused all over the web. It’s used for scripts that create pop-up ads, pop-under ads, and to change browser homepages. So the only draw back to this approach is that some users have deliberately turned off javascript in their browsers to thwart abusers. No big deal. If the user has javascript turned off, the technique I’m about to share will be ignored and the page will load normally.

1. So how is it done? In the folder that contains your index.html file and stylesheets, create a folder called ‘Scripts’.
2. Let’s create a blank document in the text editor and call it preload.js
3. We’re going to create an array of calls for images that will start to load as soon as the head of the page loads. List all the images you want to have ‘headstart’ on loading here. This can include images that are linked to on the page but that don’t appear on the page. When dealing with a Photoshop design that is being marked up to XHTML you should place all the slices here.
4. Next you want to place the following code in the header section of your HTML document just after the <title> and <meta> tags.

   <script type="text/javascript" src="scripts/preload.js"> </script>
   

   This tells the HTML document to look for the script before the stylesheet and subsequently, to request the array of images the stylesheet needs to load. Alternatively you could place the javascript inline but I prefer using external documents.

5. The contents of the Javascript file should look like this:

   if (document.images)
   {
   preload_image = new Image();
   img_path = new Array();	
   
      img1 = new Image();
      img2 = new Image();
      img3 = new Image();
      img4 = new Image();
      img5 = new Image();
      img6 = new Image();
      img7 = new Image();
      img8 = new Image();
      img9 = new Image();
      img10 = new Image();
      img11 = new Image();
      img12 = new Image();
      img1 = new Image();
      img1.src = "../images/yourimage_01.png";
      img2.src = "../images/yourimage_02.png";
      img3.src = "../images/yourimage_03.png";
      img4.src = "../images/yourimage_04.png";
      img5.src = "../images/yourimage_05.png";
      img6.src = "../images/yourimage_06.png";
      img7.src = "../images/yourimage_07.png";
      img8.src = "../images/yourimage_08.png";
      img9.src = "../images/yourimage_09.png";
      img10.src = "../images/yourimage_10.png";
      img11.src = "../images/yourimage_11.png";
      img12.src = "../images/yourimage_12.png";
      img13.src = "../image/yourimage_13.png";
   
   for(var i = 0; i<=img_path.length; i++)
   preload_image.src = img_path[i];
   }
   

6. That’s it. You can use this to preload images for the next page, icons, or any number of things but the idea is to use it to call the array before they’re called elsewhere on the page.

Preloading Images with CSS

Another method is to preload images in the stylesheet. This method is fairly useless on the actual homepage but it can be used to preload all sorts of images on subsequent pages. Lets look at the code:

     .hiddenPic {display:none;}

This class should be placed somewhere in your stylesheet. You can place it inline in your html document and it would look like this:

     <style type="text/css">
     .hiddenPic {display:none;}
     </style>

Next, at the bottom of your html page just before the </body> closing tag, we need to call all the images from the next page we want preloaded and apply the .hiddenPic class:

     <img src="yourimage.jpg" alt="" title="" height="" width="" class="hiddenPic">

     <img src="yourimage01.jpg" alt="" title="" height="" width="" class="hiddenPic">

     <img src="yourimage02.jpg" alt="" title="" height="" width="" class="hiddenPic">

</body>

How does it work? Essentially you’re calling the images when the browser reads the page and hiding them before they are ever displayed with the display:none; line. The idea is that the browser downloads the images and caches them anyways so that when the user clicks through to the next page the users browser will note that the images being requested have already been cached and won’t waste time downloading them again.

Now that load time has been reduced, in Part 6 we’ll get back to marking up our XHTML to PHP and developing our Wordpress theme.

Del.icio.us
Digg This
Stumble
]]> http://www.developertutorials.com/blog/javascript/designing-and-coding-a-wordpress-theme-from-scratch-part-5-149/feed/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-4-147/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-4-147/#comments Mon, 28 Apr 2008 21:23:17 +0000 JonGos http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-4-147/ You’ve gone from Photoshop PSD to slices to XHTML using Parts 1, 2, and 3 but if the end result is a Wordpress theme the majority of the work still has to be done. First of all it’s important to understand one bit of the operational mechanics of Wordpress. Wordpress looks for certain information the header of a file called style.css, this is how it can tell themes apart. Here’s a better explanation from Codex:

In addition to CSS style information for your theme, the stylesheet, style.css must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first.

Thus, we need to separate our inline CSS and put it in a separate file called style.css

Cleaning up Your XHTML

Let’s start by creating a blank document called style.css in the same directory as your HTML file. Open the CSS file and add the following information:

/*
Theme Name: your-themes-name
Theme URI: the-theme's-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: use-this-to-define-a-parent-theme--optional
Version: a-number-optional

General comments/License Statement if any.
*/

like so



Now let’s open the HTML file the Photoshop created for us which should look something like this.
The inline document is essentially divided for us already because everything between the <style> and </style> tags is going to be cut out of our html document and pasted into the CSS document just after the heading we just added. Let’s do that now, copy the style data out of the HTML document and into the CSS document and make sure that you close the tags once you’ve done so.

The resulting HTML file should now look like this:



and the CSS file like this:



Got it? Now lets do some major cleaning. Now that we’ve removed the style from our HTML we need to add it back. We’re going to replace the empty <style> tags with the following line:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

This line is telling our document some very useful information:

1. rel - the relationship of the linked document to the current document
2. href - the url to the linked document
3. type - the MIME (Multipurpose Internet Mail Extension) type of the target URL
4. media - denotes on which device the document is meant to be displayed

or the translation for humans: “Hello, the text file that lives at this URL is a stylesheet that was made for use with documents that would be displayed on computer monitors and screens.”

We have to do this because we’ve taken out the style information but since we still want to style our HTML document we have to tell it where the style information now lives. Next we want to empty all our <div> tags.

Since all our our photoshop images are essentially background images any line from our HTML document that looks like this:

   <div id="aqua-01_">
	<img id="yourfilename_01" src="yourfilename_01.png" width="549"
                  height="126" alt="" />
   </div>

Should be changed to look like this:

	<div id="aqua-01_">
	</div>

But only when you change the corresponding ID container the CSS document to look like this:

	#aqua-01_ {
	position:absolute;
	left:0px;
	top:0px;
	width:549px;
	height:126px;
	background:url(images/aqua_01.png);
	}

What we’ve done is taken the image out of the <div> container in our HTML document and placed in the corresponding ID container in CSS. This is important because now we can put other things like text or other images into the HTML files <div> container. This will also allow our page to structure itself properly even if a few images are slow to load.

Finally we want to take anything that is an image and place it in a folder called “img” or “images”. If you look at the code above I’m telling the CSS to look for image files in a folder called “images”. We want to do this for organizational purposes. Of course this is entirely optional but it’s good practice and somewhat of an organizational standard.

Are you still confused?
Download these files and examine them to see if you can figure out what I did to make the page render properly.

In the next lesson we’re going learn how to optimize our page for speed using javascript. Sweating yet? Don’t worry we’re already a lot closer than when we started!

Del.icio.us
Digg This
Stumble
]]> http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-4-147/feed/