Developer Tutorials' Webmaster Blog » markup http://www.developertutorials.com/blog Keeping webmasters up-to-date on technology. Tue, 02 Sep 2008 14:59:45 +0000 http://wordpress.org/?v=2.6 en HTML 5 On It’s Way http://www.developertutorials.com/blog/general/html-5-on-its-way-209/ http://www.developertutorials.com/blog/general/html-5-on-its-way-209/#comments Fri, 30 May 2008 21:37:48 +0000 JonGos http://www.developertutorials.com/blog/general/html-5-on-its-way-209/ All languages need constant revision, updating and expansion. As we move closer to a unified and cohesive semantic web, HTML is growing by the day to include new things. The latest complete overhaul is currently being developed and many representatives from Apple (Safari), Mozilla (Firefox), Opera and Microsoft (Internet Explorer) are being included in talks.

A List Apart Takes a look at many of the new elements.

HTML 5 introduces a whole set of new elements that make it much easier to structure pages. Most HTML 4 pages include a variety of common structures, such as headers, footers and columns and today, it is fairly common to mark them up using div elements, giving each a descriptive id or class. The use of div elements is largely because current versions of HTML 4 lack the necessary semantics for describing these parts more specifically. HTML 5 addresses this issue by introducing new elements for representing each of these different sections.

HTML 4

vs.

HTML 5

It would seem that HTML5 is fully embracing semantic markup. Here’s an example of how your actual document might look:

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

All of this is extremely exciting and will make coding for the web much faster and much more accessible.

Read the entire article here.

]]> http://www.developertutorials.com/blog/general/html-5-on-its-way-209/feed/ Designing and Coding a Wordpress Theme From Scratch (Part 5) 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.

]]> http://www.developertutorials.com/blog/javascript/designing-and-coding-a-wordpress-theme-from-scratch-part-5-149/feed/ Designing and Coding a Wordpress Theme From Scratch (Part 3) http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-3-146/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-3-146/#comments Mon, 28 Apr 2008 18:07:57 +0000 JonGos http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-3-146/ We’ve just started our first Wordpress theme! In Part 1 and Part 2 we reviewed some techniques that will allow our design to be marked up to XHTML. In this lesson you’ll learn exactly how to do this and why it isn’t exactly as easy as it seems.

Photoshop to XHTML in 24 Hours

So we’ve all seen those ads for websites that say they can “Photoshop to XHTML/CSS in X Ammount of time” right? No? well here’s 39 of them. What exactly are these service doing that you can’t as the theme designer? Nothing. If you feel so inclined, save yourself the fee (usually around $100 or so dollars) and do it yourself!

  • 1. Select File > Save For Web and Devices

  • 2. Click the arrow in the top right to optimize your websites color and download time. I usually don’t optimize for anything slower than 56Kbps because I use another technique which you’ll find out about in Part 4.

  • 3. Under preset select whether you want to use PNG, JPEG, or GIF formats and the various quality settings for each.
  • 4. Click “Save”.
  • 5. A window will pop up. Here You want to set Format to “HTML and Images”. Under settings select Other

  • 6. You’re going to set four options. For HTML you want to make sure ‘Output XHTML’ is selected. For Slices you want to make sure ‘Generate CSS’ is selected instead of ‘Generate Table’. Skip the remaining two options Background and Saving Files, they aren’t particularly necessary.

    psd to xhtml>

  • 7. Save the file, navigate to and open the resulting HTML file in your text editor. You’ll notice that Photoshop CSS has annoyingly put all your images inline with your HTML, meaning it’s not in a separate stylesheet like it should be.

In the next step we’ll discuss how to go from inline XHTML to the two file (.html & .css) standard that will be needed to mark up the design to php.

]]> http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-3-146/feed/