Division Overlay Blog http://blog.divisionoverlay.net Tue, 07 Jul 2009 20:29:42 +0000 http://wordpress.org/?v=2.8.1 en hourly 1 DivisionOverlayBloghttp://feedburner.google.com Welcome Back http://feedproxy.google.com/~r/DivisionOverlayBlog/~3/lvvhrOIH2-s/ http://blog.divisionoverlay.net/2009/07/07/welcome-back-2/#comments Tue, 07 Jul 2009 20:29:02 +0000 Tyler http://blog.divisionoverlay.net/?p=196 Hello there!

It’s been a long time coming, but we have finally accomplished the redesign. After six months of designing and coding the site. We have finally produced what we set out to do.

This is the fourth major redesign of Division Overlay since we launched in December 2007. Creating the User Interface was something of a challenge for the first few mockups. We went through dozens of potential candidates for the design, all of them ultimately were rejected in favor of this one. After we had finished the grueling hours of tedious designing and tweaking, we had a tremendous problem. The PSD document with our design became corrupted. Luckily we had saved PNG formatted images of each page on the PSD, so all we had to do was back track and trace our work. From that speed bump, we were able to race toward our mark at full speed, continuing on from slicing the images, to coding the template. On to programing the PHP and jQuery to finishing up with this wordpress theme.

Now on to more business

Along with the redesign launch, we also have a slew of new things for you to download and have fun with.

Including:

We will also be writing more posts ranging from full in depth how-to tutorials to updates on what Division Overlay is up to.

After all the work we have put in, it would be nice to leave a comment no how you think the new site looks.

]]> http://blog.divisionoverlay.net/2009/07/07/welcome-back-2/feed/ 0 http://blog.divisionoverlay.net/2009/07/07/welcome-back-2/ Basic PHP quote generator http://feedproxy.google.com/~r/DivisionOverlayBlog/~3/LjwUCjpmpyQ/ http://blog.divisionoverlay.net/2009/01/18/basic-php-quote-generator/#comments Sun, 18 Jan 2009 06:07:58 +0000 Tyler http://blog.divisionoverlay.net/?p=178 In this tutorial, I will go through the way to make a randomly picked quote generator work on a modular level. This is so it can be added to and updated, ported and reused without having to copy a bunch of files.

This technique is a pretty easy one. Let’s start off by making the “quote.php” file.

<?php

$num = Rand (0,4);

switch ($num)

{

This will cycle through 5 quotes that we will input in a minute. If you choose to add more cases, then you will need to change the “4” to the last case number you added. This is so it will cycle through all the quotes, not just the first 5.

Now we need to add the cases.

case 0:

echo “This is quote 1. <p class=\”author\”>-The author</p>”;

break;

case 1:

echo ” is quote 2. <p class=\”author\”>-The author </p>”;

break;

case 2:

echo “The is quote 3. <p class=\”author\”>-The author </p>”;

break;

case 3:

echo ” is quote 4. <p class=\”author\”>-The author </p>”;

break;

case 4:

echo ” is quote 5. <p class=\”author\”>-The author </p>”;

break;

}

?>

That is it for the “quote.php” file.

Full script

<?php

$num = Rand (0,4);

switch ($num)

{

case 0:

echo “This is quote 1. <p class=\”author\”>-The author</p>”;

break;

case 1:

echo ” is quote 2. <p class=\”author\”>-The author </p>”;

break;

case 2:

echo “The is quote 3. <p class=\”author\”>-The author </p>”;

break;

case 3:

echo ” is quote 4. <p class=\”author\”>-The author </p>”;

break;

case 4:

echo ” is quote 5. <p class=\”author\”>-The author </p>”;

break;

}

?>

Now we will make a little page that it will go on. Nothing fancy, you can jazz it up as you see fit. Start off with the doctype, and all the required code to make the page valid.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>

The Random Quote Generator by Division Overlay

</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

Now let’s give the page some basic styles, fonts, colors, etc.

<style type=”text/css”>

body {

background: url(bg.png);

color: #dadada;

font-family: segoe ui;

}

#qblock {

background: #333333;

width: 400px;

height: 70px;

padding: 5px;

margin: 0 auto;

}

.author {

color: #ffffff;

font-size: 10px;

font-family: georgia;

font-style: italic;

text-align: right;

}

</style>

</head>

Now we can make a little box where the quotes from the “quote.php” file will be inputted in to the main file.

<body>

<div id=”qblock”>

<?php include(”quote.php”); ?>

</div>

</body>

</html>

The Full main.php file is as followed.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>The Random Quote Generator by Division Overlay</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<style type=”text/css”>

body {

background: url(bg.png);

color: #dadada;

font-family: segoe ui;

}

#qblock {

background: #333333;

width: 400px;

height: 70px;

padding: 5px;

margin: 0 auto;

}

.author {

color: #ffffff;

font-size: 10px;

font-family: georgia;

font-style: italic;

text-align: right;

}

</style>

</head>

<body>

<div id=”qblock”>

<?php include(”quote.php”); ?>

</div>

</body>

</html>

This is how you would make a simple and nice little quote generator, to go on any site that supports php.

Try the demo.

Any questions, comments or concerns please do not hesitate to leave a note below. Thanks for your time.

]]> http://blog.divisionoverlay.net/2009/01/18/basic-php-quote-generator/feed/ 0 http://blog.divisionoverlay.net/2009/01/18/basic-php-quote-generator/ Microsoft Surface for web designers http://feedproxy.google.com/~r/DivisionOverlayBlog/~3/DmAKsqibQIQ/ http://blog.divisionoverlay.net/2008/11/29/microsoft-surface-for-web-designers/#comments Sat, 29 Nov 2008 06:45:33 +0000 Tyler http://blog.divisionoverlay.net/?p=171

Introduction

First off, what is Microsoft surface? Surface is a new and forthcoming desktop computer, but it has so much more to offer than the desktop we know and use on a day to day basis. On first glance, it may look like a simple desk or table, but it is actually a computer, with an enormous touch screen for input. There is still more to it, it syncs with devices and items that are placed on the Surface. This opens up so many possibilities, not only for technology to advance, but for web designers to produce sites in a new and exhilarating way.

Design features

From a web designers stand point, Surface is appealing with a large touch screen to design upon. This opens up a whole new aspect to hand drawn design. Imagine, being able to sketch out a logo and add colors or textures with just a tap and stroke of a pen. Along with having the ability to grab and re-arrange certain aspects of the design, using just the touch capability.

From a developers view, Surface can offer many features that can make life easier. Security is a big issue that developers look at. What if, you could have a customer login using their signature? This also presents problems, forgery is possible. What if, you own a business, and you require employees to use a special card to login to their account on the site?

Client interaction can be addressed with Surface as well. A client walks in and you can throw together a rough sketch or render of what they want. Exchange contact information via placing your phones on the surface. Let’s say another meeting with the client; you are presenting a mock up of their new web site. The client says they don’t like a feature on the site; you can grab that part of the page and remove it. This would make a satisfied client to see what they want before final copy comes around.

Let’s talk e-commerce. You have made a site that has a downloadable software package. It requires you to pay for this package. Place your credit card on the Surface and pay for the software easy. This also presents the same security problems as above. Ways to work around this is to have a PIN number for the card per site. It would act as a unique password for that site and your card.

Conclusion

As technology is ever advancing, web design and how we design sites changes too. Though Surface isn’t ready for the main-stream public, the exciting possibility that we may be able to do to design is something to hope for. Progressing how we build the web will shape the web for a brighter and more flexible future. What do you think about Surface, how can you think of using it?

]]> http://blog.divisionoverlay.net/2008/11/29/microsoft-surface-for-web-designers/feed/ 0 http://blog.divisionoverlay.net/2008/11/29/microsoft-surface-for-web-designers/ Tips and tricks for devloping for the web http://feedproxy.google.com/~r/DivisionOverlayBlog/~3/4JVJSO5rnFY/ http://blog.divisionoverlay.net/2008/08/26/tips-and-tricks-for-devloping-for-the-web/#comments Wed, 27 Aug 2008 04:16:05 +0000 Tyler http://blog.divisionoverlay.net/?p=147 Through the 4 years I have been coding in HTML/XHTML and CSS I have picked up several techniques to make developing faster and more efficient. This post is to give you tips and tricks to develop more websites more efficiently and faster.

The very first and probably most important thing to do is separate the content from presentation. That is, XHTML from CSS. This not only makes the site load faster, it also makes it much easier to update the styles for every page linked to the style sheet, instead of having to through every page to update the same style.

A close second to the separating content and presentation is keeping your file structure organized. Having a directory specified for CSS that will contain all the CSS files you will use and the same for JavaScripts and images as well. This makes it easier to find things when you are looking for a certain file.

Naming IDs and classes with names that identify the content that will be in that element is a very good practice. This will help you when you go back through the code to change something or to modify the style of that element. Setting an images alt tag with a suitable and short, yet to the point message that will allow screen readers tell the user what the image is, and if the image file is improperly linked it will show as a place holder (in certain browsers).

I find a very important tool for long term code, is to use comments for everything. Comment a piece of CSS if it all refers to the entire page, or a certain section of the web site. Comment a portion of XHTML if there are several pieces like it in the document, to guarantee you know which piece you are dealing with.

If you should have an element inside of another element it is best to indent the next row down, such as
<div id=”first_box”>

<ul>This is second

<li>this is the third in the line</li>

</ul>

</div>

This shows the best way to deal with organizing the way things are nested. Open the next nested element tabbed over once, and close it out in the same manner.

In conclusion it is a good idea to make the most of the techniques I have offered. From commenting and naming every section of code, to organizing files and structure. I have found that over the years, this has been a very effective way to operate. Though this may not be the right way for you, I hope you can take from this post and apply it to your practice.

]]> http://blog.divisionoverlay.net/2008/08/26/tips-and-tricks-for-devloping-for-the-web/feed/ 0 http://blog.divisionoverlay.net/2008/08/26/tips-and-tricks-for-devloping-for-the-web/ SiteGadget – coming soon http://feedproxy.google.com/~r/DivisionOverlayBlog/~3/bvJVjimbAUA/ http://blog.divisionoverlay.net/2008/08/12/sitegadget-coming-soon/#comments Tue, 12 Aug 2008 21:45:08 +0000 Tyler http://blog.divisionoverlay.net/?p=141 Hello,

I am proud to announce SiteGadget, a project by Division Overlay. SiteGadget was started for the reason of distributing little gadgets or widgets that can be placed on any website. There will be all kinds of gadgets on there, and it will even be open to developers to submit your own for review, and maybe be placed on the site.

At this point in development a lot of things are changing, so i cant give you a real good idea of what it will look like or how it will work, but I can show you the logo (subjective to change)

Also to come soon my business cards, here is a sneek peek of that

]]> http://blog.divisionoverlay.net/2008/08/12/sitegadget-coming-soon/feed/ 0 http://blog.divisionoverlay.net/2008/08/12/sitegadget-coming-soon/ Dynamic content plug-in http://feedproxy.google.com/~r/DivisionOverlayBlog/~3/BjOL5W2ja-E/ http://blog.divisionoverlay.net/2008/08/06/dynamic-content-plug-in/#comments Thu, 07 Aug 2008 05:31:40 +0000 Tyler http://blog.divisionoverlay.net/?p=125

Today we are building a “plug-in” mainly for WordPress, but you we will show you how to use it on a regular site as well.

You will need to know a certain degree of how to make a website from scratch. It would be to your best advantage to know PHP, jQuery, CSS and XHTML to fully understand what is actually happening.

Things you will need to complete this plug-in:

The latest version of jQuery

You will need this file block.php (right-click / save-as)

The top graphic that.png

The content background this.png

Adding the scripts

First we must add the jquery script to the page

<script type=”text/javascript” src=”jquery-1.2.6.js”></script>

Now we must add the jquery that will take the elements and hide them, and give the function to show, hide and toggle

<script type=”text/javascript”>
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$(’#recent, #archiv’).hide();
// shows the slickbox on clicking the noted link
$(’a#arc-s’).click(function() {
$(’#archiv’).show(’slow’);
return false;
});
// hides the slickbox on clicking the noted link
$(’a#arc-h’).click(function() {
$(’#archiv’).hide(’fast’);
return false;
});
// toggles the slickbox on clicking the noted link
$(’a#arc’).click(function() {
$(’#archiv’).slideToggle(700);
return false;
});
// shows the slickbox on clicking the noted link
$(’a#rec-s’).click(function() {
$(’#recent’).show(’slow’);
return false;
});
// hides the slickbox on clicking the noted link
$(’a#rec-h’).click(function() {
$(’#recent’).hide(’fast’);
return false;
});
// toggles the slickbox on clicking the noted link
$(’a#rec’).click(function() {
$(’#recent’).slideToggle(700);
return false;
});
});
</script>

Adding the links to show the content

This step is fairly simple, all we need to do is make a simple link, but give it a couple of unique attributes. Let’s also place the links inside a div so it can be easily styled.

<div id=”mini-nav”>
<a href=”#” id=”arc” onclick=”$(’#recent’).slideUp(’slow’);”>Topics</a>
<a href=”#” id=”rec” onclick=”$(’#archiv’).slideUp(’slow’);”>Recent Posts</a>
</div>

We added the id=”" which has the name of the link and the onclick=”" will hide the the div opposite of the one clicked.

Now lets add the block

The block, as i refer to it as, is the content that will be displayed when you click on one of the two links above. By now I hope you have downloaded block.php

<?php include(”block.php”); ?>

Further details on the Block

In the block file, I have it coded to Work on WordPress. This will not work on anything else but wordpress. So to change that, we need to open up the block.php file and edit a few parts.

Inside the div “archiv”

<?php wp_list_categories(’show_count=1&title_li=’); ?>

Take out that, which will list all the categories in WordPress and add whatever text/code you wish.

Inside the div “recent”

<?php
global $post;
$myposts = get_posts(’numberposts=5&offset=1&category=1′);
foreach($myposts as $post) :
?>
<li><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></li>
<?php endforeach; ?>

Change that, which get your recent posts in WordPress, to whatever text/code you want.

Now to style it

Add this either to your stylesheet (.css), or to the local file between the <style> tags.

#mini-nav {
position: absolute;
top: 0px;
left: 45%;
width: 150px;
height:20px;
background: url(that.png);
}
.doit li{
display: inline;
padding-right: 10px;
}
#archiv, #recent {
margin-top: 35px;
margin-bottom: 10px;
padding-top: 6px;
width: 600px;
height: 54px;
background: url(this.png);
}

This will put the two links at the top of the page on top of the black button. And it will create the padding and margins for the rest of your content that you can add.

Wrapping up

So, this will create dynamic content on any site, and is a great little plug-in for WordPress. If you have any questions or comments, please leave them in the comment field below. I hope you enjoyed it.

]]> http://blog.divisionoverlay.net/2008/08/06/dynamic-content-plug-in/feed/ 5 http://blog.divisionoverlay.net/2008/08/06/dynamic-content-plug-in/ Re-launch Blog edition http://feedproxy.google.com/~r/DivisionOverlayBlog/~3/hnKwnNmmOlI/ http://blog.divisionoverlay.net/2008/08/06/re-launch-blog-edition/#comments Wed, 06 Aug 2008 16:45:03 +0000 Tyler http://blog.divisionoverlay.net/?p=116

Hello there! I’m glad to announce the re-launch of the blog section of Division Overlay. After discovering the first theme I made didn’t quite stretch like i wanted it to, I had to go back in the lab and whip up this one.

Features

Features I have implimented into this design:

  • Current date and time
  • RSS subscribe
  • Style switcher
  • Pagination

Coming soon

Features I plan on rolling out within the days and weeks to come.

  • Dynamic archive
  • Dynamic recent posts
  • More full tutorials
  • More in-depth articles

In conclusion, this theme is done but, i will be adding a lot more to it to make it better. On a side note, the previous theme that was up here will be converted into a free web template. You can expect that in within the week.

]]> http://blog.divisionoverlay.net/2008/08/06/re-launch-blog-edition/feed/ 1 http://blog.divisionoverlay.net/2008/08/06/re-launch-blog-edition/ Welcome Back! http://feedproxy.google.com/~r/DivisionOverlayBlog/~3/2FK_rCb_elA/ http://blog.divisionoverlay.net/2008/08/01/welcome-back/#comments Fri, 01 Aug 2008 06:00:36 +0000 Tyler http://blog.divisionoverlay.net/?p=100

Welcome back everyone! I apologize for the down time for this month, but it was necessary for me to finish up the design and code for the brand new site and blog (you are currently viewing). I spent a lot of time researching sites, what looked wrong, what was right, and I think I have made a site with all the right things.

I would like to thank the following people for supporting me, and helping me through out this process. Raven, Dan Clarke, Justin for pointing out the font, and everyone who supported me and this site.

Feature

Links I have enjoyed in the past month.

Designing for WordPress Complete series Css-Tricks

Cheat Sheets for front-end developers Six Revisions

A small design study of big blogs Smashing Magazine

Dynamic JavaScript form validation Leigeber

Sketch Web 2.0 interface in Photoshop Hongkiat

Accessibility top ten tips WebDevLounge

jQuery 1.2 cheat sheet Color Charge

]]> http://blog.divisionoverlay.net/2008/08/01/welcome-back/feed/ 2 http://blog.divisionoverlay.net/2008/08/01/welcome-back/ Your Attention Please! http://feedproxy.google.com/~r/DivisionOverlayBlog/~3/bHPZnf2hxoM/ http://blog.divisionoverlay.net/2008/06/29/your-attention-please/#comments Mon, 30 Jun 2008 04:40:51 +0000 Tyler http://divisionoverlay.net/?p=88 I have changed the theme on the site once again. I got a little bored with the old one. That is not why I’m writing this post though. I am telling you guys and gals that in a few days, maybe a week or so, I will be taking my blog offline for a while, to fix up the proper site. You can always follow me on Twitter. I am on twitter most all day.

The new site will have everything, official contact info. A nice looking portfolio. A place where you can contact me and a place where you can request a quote for a design. The blog wont be on the front page any longer, but it will still be here.

I would also like to say, I will be writing on another blog, a separate blog. More or less an ideas blog. I’ll give more info on that as it develops.

Division Overlay will still be active during the time I pull the blog offline. It will have a few things on it, such as a little portfolio, maybe a few pics from my flickr. possibly a twitter feed, all that jazz.

Thank you for your understanding, and have a fantastic holiday.

]]> http://blog.divisionoverlay.net/2008/06/29/your-attention-please/feed/ 0 http://blog.divisionoverlay.net/2008/06/29/your-attention-please/ Helix – Free Dynamic Web Template http://feedproxy.google.com/~r/DivisionOverlayBlog/~3/4rx0NUeu1aU/ http://blog.divisionoverlay.net/2008/06/29/helix-free-dynamic-web-template/#comments Sun, 29 Jun 2008 06:17:38 +0000 Tyler http://divisionoverlay.net/?p=86 Hello Everyone, I have finished a new FREE web template. It is developed using the highly applauded JavaScript library jQuery. I developed this site for the people who have something to share, but do not have a nice interface to do so.

Here is a little bit of information about the template. All the pages on the site are all located on one file. Then when the link in the navigation is click the section of the file is displayed. It is light weight to put on your server and use, and very simple to add your own content.

Here is a Promotional poster for show.

Any feedback and comments are much appreciated. Also if you have any bug reports or issues with using this template, please don’t hesitate to comment below.

Download Template Here

View Demo Here

]]> http://blog.divisionoverlay.net/2008/06/29/helix-free-dynamic-web-template/feed/ 0 http://blog.divisionoverlay.net/2008/06/29/helix-free-dynamic-web-template/