Steve Zeidner » Web

Designs Over the Years

admin — Sat, 05 Jun 2010 15:27:11 +0000

As a new website design launches, I thought I would put together a little gallery of my website designs over the years. Unfortunately, I didn’t take a screenshot of every version and the wayback machine didn’t load all of the images from each, but this is what I could retrieve. I’ve just included the logo from some of the designs. Notice that the new design of the website is a departure from the typical green/grey/black color scheme that I have used in every other version of the site.

Languages

admin — Mon, 01 Feb 2010 17:57:23 +0000

Lately, I’ve been on a kick of wanting to experience a broader set of languages, frameworks and programming techniques. I listened to an (epic?) episode of FLOSS Weekly with Kent Beck on Extreme Programming and have been thinking about going back to some of my textbook learning in college and applying it to real projects.

First off, I’m going through a Python book as I figure it is not too huge of a leap syntax-wise from PHP. Aside from a little bit of syntax difference, there are a few nuances conceptually (everything is an object, different data structures like tuples, etc…), but for the most part, it seems to be pretty straightforward so far coming from a PHP background.

However, I’ve been hearing a few rumblings lately about PHP gaining a little more traction as a respected language – Facebook after all uses it. In fact, an employee at Facebook has even been rewriting PHP from the ground up for speed. It sounds like it may finally be a compiled language which could help with performance issues.

Other platforms I would like to dive into include Ruby (and RoR) as well as going a little deeper with Javascript frameworks and some of the nuances between the toolkits/frameworks. I also like the idea of accountability that is a part of Kent Beck’s “Extreme Programming” style.

For now, I’m picking Python to use for my next personal project. Once I pick a project, I need you to keep me accountable to finish it.

HTML and CSS Starter Templates

admin — Tue, 05 Jan 2010 17:10:48 +0000

Out of laziness, when building a website, I’ve often just started with one of the Dreamweaver basic template layouts – I’ll go in and delete a bunch of stuff and rework it to the way I wanted. This included copying and pasting code from websites I have built previously and rewriting the same sections of code with each new site. I was also using Dreamweaver as a code editor just because I started there. Dreamweaver is quite bloated however and if you are not using the WYSIWYG features, it is completely unnecessary. There are much better text editors out there already. I’ve currently switched to Notepad++ on the Windows side (what I use at work) and so far it has been working out quite nicely. I have put together a base CSS (2.1 and 3 valid) and HTML (5 spec valid and backwards compatible) template file with the structure I typically use for building a site. There are a few items in the CSS (like the comment block at the top) that are geared towards WordPress users, but those can be ignored or removed as necessary. Now, let’s see the code. First the HTML





Website Title








	
		
			
				Item 1
				Item 2
				Item 3
			
		
	




	

	




	
		Copyright © yyyy Website Name

Pretty basic, right? The only thing that might throw you off is the DOCTYPE. This is the way HTML5 does it – much simpler. Also, there is some Javascript included for backwards compatibility with IE.

Now, on to the CSS

/*
Theme Name:
Theme URI:
Description:
Version: 1.0
Author:
Author URI:
*/

/* reset styles */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0;  border: 0; outline: 0; font-size: 100%;
	vertical-align: baseline; background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }

body {
	font-size: 62.5%;
	text-align: center;
	color: #000000;
}

/* container - place inside each section or around the entire page depending on your layout */
.container {
	width: 960px;
	margin: 0 auto;
	text-align: left;
	position: relative;
}

/* for clearing any floats 
 */
.clearfloat {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/*--- header section - put whatever you want here ---*/
#header {
}

/*--- horizontal "block" menu ---*/
#menu {
	float: left;
}
#menu li {
	display: block;
	float: left;
}
#menu li a {
	display: block;
	text-decoration: none;
	height: 50px;
	width: 125px;
	padding: 5px 10px 5px 10px;
}
/* wordpress specific menu stylings */
#menu li.current_page_item a {
}
#menu li.first a {
}
#menu li.last a {
}

/*--- content section - put whatever you want here ---*/
#content {
	font: 1.2em Verdana, Arial, Helvetica, sans-serif;
}

/*--- footer section - put whatever you want here ---*/
#footer {
}

A few things of note in the CSS. One is that at the top, I’m using a modified version of Eric Meyer’s CSS reset. I changed some of the spacing and indentation to make it a little more compact. I also removed the ‘content: none;’ from the ‘blockquote’ and ‘q’ resets so the stylesheet would validate with CSS3. A final modification I made was to the font size (from 100% to 62.5%). This resets the font base to 10px for easy em calculations (i.e. 1.4em is a 14pt font). The rest of the stylesheet should be mostly self explanatory.

So, what do you use as a starting point when building websites? What do you like about my templates? What don’t you like? What would you do differently?

Finally, last but not least, here is the zip file if you want an easy download: SZ’s Barebones HTML and CSS.

Update: I made some minor changes to the font placement in the CSS file. It didn’t quite work properly before. I’m now setting the font size to 62.5% in the body rather than in the reset. Font size can be defined in em’s in individual classes or ids.

The Tenants of Google

admin — Thu, 26 Nov 2009 19:14:22 +0000

On This Week in Google: Episode 17, Leo suggested that Google may have a set of rules that they follow when building each of their products. Matt Cutts responded with a few of the fundamental tenants of Google. I have listed these below.

Don’t be evil
Organize the world’s data to make it useful
Don’t trap user data – Eric Schmidt, Web 2.0, 2006
- Be an advocate for users
- Compete on merit (don’t give yourself an advantage – no proprietary APIs, etc…)
Regarding products…
- Go for a great product first, then figure out how to monetize
- Don’t launch a “me-too” product – add some innovation to your product

I know a lot of people are very wary about Google especially as they grow into a larger and larger corporation. While they do seem to be reaching into more technology spaces, it is interesting to see how carefully they make their approach.

What is your take on Google and their level of “evil-ness” in the marketplace? How well do you think they follow the tenants outlined above? Are there more that should be added to this list?

What's in Your Google Reader?

admin — Mon, 23 Feb 2009 18:14:07 +0000

I love using Google Reader as an RSS aggregation tool. It is so much more efficient than visiting each blog or news website individually to check for updates. Here are a few of the favorites from my reader (in no particular order):

I’m curious as to what you have in your RSS aggregator and if you have a reader preference besides Google Reader.

My Website Design Workflow

admin — Tue, 27 Jan 2009 17:43:14 +0000

Although I’ve been programming for the web since 1999, I’ve only been doing website design for the past year. I was handed the Adobe creative suite for the web, so that is the software package I based my workflow on. As much as I like FOSS (free open source software), I think Adobe products just do the job a little bit better than their free alternatives. So, here are the programs in particular that I use in my web design workflow:

If you want FOSS alternatives to these programs, here is what I would suggest (although I haven’t tested them with this particular workflow, so YMMV):

Xara Xtreme
GIMP
Kompozer (or your favorite text editor…Vim anyone?). Matt Brett’s barebone CSS files are a good CSS/XHMTL starting point.

Now, I also use Flash for animations and interactive content, but I like to use this in limited amounts and am going to try in the future to use more AJAX instead. If anyone has any AJAX toolkit recommendations, I would love to hear them.

OK, now that you know the programs I use, here is a brief overview of my workflow using these applications:

I begin with fireworks and lay out the entire page. If I know all of the content that will go on the website to begin with, I’ll lay out every page in the site as it makes it easier when visualize when turning the pages into code.
Once everything has been laid out and I’ve settled on the final design, I open up dreamweaver and use one of their page layout templates to get started. This just gives you a basic framework for the HTML and CSS of the page to get things started. I typically used fixed size layouts in either one or two columns (you should only use the number of columns that will be present on the entire site, not on an individual page). I’ll get the basic layout of the site (based on my fireworks design) set up in HTML and CSS (rarely using the actual WYSIWYG editor in dreamweaver).
As I set up the site in dreamweaver, I also cut out images from fireworks to use on the website by copying and pasting them into photoshop. Then, I’ll save these images for the web as their appropriate type (PNG, JPEG, etc…).
Once the site is all built as static HTML and CSS with the images from the original fireworks design, I’ll take this code and merge it with a default wordpress or drupal template. Then, I’ll fill in the rest of the content for each page in the appropriate content manager.

That’s it in a nutshell. I will be diving a little deeper into each of the steps of this workflow as well as giving you a few design tips that I’ve picked up in future posts.

Update: I was asked the question about how specifically to export images from Fireworks. Here is a little more detail on the matter. I don’t typically export from fireworks as I don’t like the code it produces. Here is my process for getting the images themselves out of fireworks:

Think about which images are background (repeatable) and which are static images. Think also about which need transparency and which do not (to think about ie6 compatibility issues)
Select the image you want to export (make sure you set the optimize settings to something that will work for you – I use png 24)
Copy the selection
If it does not have/need transparency, paste directly into a new photoshop document and edit to size and then save for web and devices.
If it does need transparency, paste into a new fireworks file, save and then open in photoshop (otherwise photoshop will replace the transparency with a background color – at least in CS3).

Once all of the images are saved into their proper formats, I build the HTML/CSS with a notepad editor – see this post for an update on the text editor I am now using instead of Dreamweaver.

Alfresco Curl Login

admin — Tue, 23 Sep 2008 13:40:07 +0000

I thought I’d share some cURL/PHP code for logging into Alfresco. I’m using Alfresco Labs 3. I’m still trying to figure out how to use cURL to automate adding a user, but here is the basic login code for now. If you have any thoughts on how to add the user (I’m sending the exact headers I get from LiveHTTPHeaders, with no luck), just let me know. I’m guessing that the problem has something to do with the Viewstate parameter.

Drupal Flash Menu

admin — Thu, 01 May 2008 18:42:33 +0000

So, I was designing and implementing a website at work and wanted to give it a flash menu, but also use Drupal for the CMS. Here is how I did the integration so that the flash menu would pull the menu links from Drupal’s “Primary Links” menu, know which page is currently selected and space the links evenly in the menu space provided. I Googled for a complete example and did not find one, so here is my attempt at a Howto. Note: I used Drupal 6.2 and Actionscript 2.0, but this could probably be adapted for other versions).

First of all, you will need to create your flash menu. You can download my example flash file to get an idea of how this works. Let’s take a look at the ActionScript code:

var depthCount = 1;
var totalWidth = 930; // this is the area we want to contain the menu in
var menuWidth = 0; //this will add up the width of each menu item
var yPos = 5; // starting y-position for menu item
var xPos = 0; // starting x=position for menu item

var menu:Array = _root.menu.split(","); // get flashvar menu items
var totalItems = menu.length/2; // find out how many menu items there are
// make text boxes for menu items
for (var i=0;i
var num = i/2;
var link = i+1;
createLink(num,menu[i],menu[link]);
i++;
}
// position each item on the x-axis properly leaving the same gap in-between each
var gap = (totalWidth-menuWidth)/(totalItems+1);
xPos += gap-gap/4;
for (var i=0;i
var menuNum = i+1;
var tcl = eval("menu"+menuNum);
tcl.bg._width = tcl._width+gap/2;
tcl.TextLink._x += gap/4;
tcl._x = xPos;
xPos += tcl._width+gap/2;
}

function createLink(menuNum,menuTitle,menuLink){
// create the new movie clip
menuNum++;
var newObj = "menu"+menuNum;
duplicateMovieClip(_root.baseLink,newObj,depthCount++);
var tcl = eval(newObj);
// set the link
tcl.aLink = menuLink;
// check if this is the active link (if so, show the background)
if (_root.current == menuLink) {
tcl.bg._visible = true;
}
else {
tcl.bg._visible = false;
}
// create and styleize the text
setName(tcl, "0"+menuNum+": "+menuTitle+"");
// set position of menu item
tcl._x = xPos;
tcl._y = yPos;
}

function setName(obj, theName){
obj.TextLink.BoxName.autoSize ="left";
obj.TextLink.BoxName.htmlText = theName;
menuWidth += obj._width;
}

Basically, this reads in the “flashvars” that we will be sending from drupal (read on below to see how to do this) and creates the menu from those. Once the menu is created, we see how well it fits in the space given (totalWidth) and adjust the spacing between each item. There is also some code in there to adjust the size of the “background” image for whichever menu item is selected.

Download Flash Menu

Once your flash menu is built, you will need to install the Flash Node module in Drupal. This allows for easily adding flash movies and flashvars variables. This same idea could be used in a template or a PHP page on it’s own, but Flash Node just makes this part a little bit easier.

After Flash Node is installed, you would simply need to add a piece of content that is of type flash (uploading the flash menu SWF file that was created earlier) and then add the following code in the Flashvars section

This just reads in the primary links and passes them off as flashvars

That’s pretty much all there is to it. Now you can have a dynamic flash menu using Drupal’s built-in menu management.