Thomas Borzecki - Ramblings of a web mercenary.

WDDM Portfolios Version 4

Written by tborzecki on September 5, 2011 — Leave a Comment

I finally had a chance to yet again refresh the wddmportfolios website, which showcase the portfolio sites of all the Web Design, Development and Maintenance graduates over the last few years.

I switched back to hand-coded HTML/PHP with a completely PHP/MySQL backend, with animations and interactivity built with jQuery. The last version was a full flash website, powered by wordpress on the backend, which worked pretty well, but was not supported on many devices and was starting to have some major usability issues. The new design was inspired by several different portfolio gallery websites, and can now easily handle pretty much any number of students. I also took the opportunity to clean up the database and add a more useful login for students, as well as an email-verification system for password resets.

Also, the site features an automatic screenshot generator, which automatically renders websites, unless the student chooses to use their own image in its place.

Please have a look at the site, and consider our excellent graduates for your next web project or web career.

Posted in Showcase

CSS Filmstrip in Action

Written by tborzecki on July 27, 2011 — Leave a Comment

The demo below demonstrates the CSS Filmstrip technique, as applied to a hyperlink. The four images in the “filmstrip” represent the hyperlink’s four states: link, visited, hover, active. The dashed line represents the width and height of the hyperlink, and therefore the visible part of the filmstrip image. The dot on the bottom left allows you to simulate a clearing of browser history, in order to reset the hyperlink to its “link” state.

Install Flash Player

Posted in examples

Xoom Android Tablet

Written by tborzecki on June 14, 2011 — Leave a Comment

In a world dominated by Apple’s iPad 2, it seems there are few alternatives for a decent tablet. I can say that I have nothing against the iPad, but I do like to browse websites with Flash freely on Chrome, and easily modify and customize my devices to suit my needs. As a result I opted to go for the Motorola Xoom. I must say that I was pleasantly surprised by this device. I felt that more people should know about it, since it seems like the marketing would suggest there is only the iPad and the Playbook to choose from.

I would like to showcase some of the more interesting features I found on this device. Since it seems like there is not nearly enough information about it online or anywhere else.

Technical Specifications

First off are some of the impressive specs:

10.1 inch hi-res 1280 x 800 screen, that is more natural in the “landscape” position
Front and rear cameras, 2MP and 5MP each, 720p video capture
Dual core 1GHz processor
GPS, gyroscope, barometer, ambient Light and proximity sensors
Standard with Android 3.0 Honeycomb as the OS
700 grams in weight
Onboard memory up to 32GB, plus a microSD card slot to expand the capacity
micro USB port, charging port (unfortunately you can’t charge over USB) and micro HDMI out
Apps are available anywhere, not just on a locked-down app store; Also there are tons of very useful free apps
Flash runs rather well within the browser, although it should be noted that many Flash sites are not currently designed with touch interfaces in mind … this is not a problem in everyday browsing, however.

One thing I love about this device software-wise, is that if you have a Google account, it basically sets itself up once you log in. All the Google apps work automatically and import all necessary information for you, so setting it up is a breeze. I am also a fan of the Android interface, in particular for a tablet device, since the ability to put widgets on the screen is invaluable. I can check all my pertinent information at a glance on the first screen, rather than have to open up an app to do so. Also, the notification bar (seen on the bottom right) shows you any updates to anything including email, chats, etc. The new Honeycomb interface is pretty slick, and diverges from Apple’s “shiny, glossy” iOS. It reminds me a bit of the movie Tron for some reason, so it has some nerd-appeal.

I am also extremely fond of the browser that is built into this device. I am not certain that it is Chrome exactly, however the interface is familiar in the tabbing, bookmarks sync as well as the combo search/address bar. These features alone make the device worth while for me, since I use it primarily for browsing.

One other awesome feature is the experimental interface that can be enabled in the browser’s settings. Essentially, if you drag either of your thumbs from the devices left or right edge towards the center of the screen, you will get a top-level menu that features all the most important parts of the browser, as seen in the picture to the left.

Below is a zoomed example of a useful widget called “Free Power Widget” I installed, that puts all the hardware controls at your fingertips. I would definitely recommend that one as it saves time in looking through the settings panel.

Downsides

To be fair, I think I should mention that the tablet is not perfect, and that there are a few slightly annoying flaws:

It can’t be charged via USB, so bringing the power adapter is required on trips. The battery does last an incredibly long time though, sometimes more than 2 days of non-processor intensive use.
Getting the device onto the official charging dock is a pain, especially in the dark. This is more of a problem with the dock though.
The majority of the apps on the App Market are designed for phones, and as a result just scale to the larger screen making them annoying to use. This will certainly change over time as more apps are developed.

Conclusion

Overall, I would say the device makes an excellent general-purpose device, with impressive hardware specs. Android is a great OS, especially for tinkerers like myself and being able to browse flash-heavy websites with no issues is really great. One final note, is that the Xoom is very competitively priced at about $100-200 less than an iPad in the same class.

Posted in review | Tagged guide, review

Skindiving into HTML 5

Written by tborzecki on January 26, 2011 — 1 Comment

With all the buzz and hubbub surrounding HTML 5, the web community has been pretty slow in adapting the next iteration of the HTML language. Yes, there is a growing selection of websites written in HTML 5, but it seems that most of them are websites about HTML 5. I think it’s time for web pros and amateurs alike to stop cautiously testing the water by creating HTML 5 canvas element demos and to start using HTML 5 markup in all their projects. The markup is supported fairly well in modern browsers and with the addition of some clever JavaScript will even work on IE 6.

If we want this standard to catch on, then there is no time to waste; let’s all start using it. I can’t wait for the day when all the buzz-word perpetuators simply call this language “HTML” again.

To help some of you get up to speed, I’ve written up a breakdown of the most common new elements.

Basic HTML 5 Bestiary – Some New Elements

Some of the new tags take a cue from magazines and print, in their meanings. This presents us with some interesting semantic interpretation, as well as new and more convenient ways to style pages. No more fussing about with semi-meaningful id attributes when there are lots of purpose-specific tags to use.

<!DOCTYPE html>

Finally a doctype designed for humans to remember. Those of you who used XHTML probably are familiar with its doctype, which looked like it was randomly generated by a computer from the 80′s. Memorizing that would be like memorizing PI to the 20th digit.

<section>

The section tag is like a dedicated-purpose div tag. The section defines an area of the page that is a functional unit of grouped content. This is a fairly broad description, but a chapter or a series of blog posts could technically be in a section tag. I interpret this as a container for related pieces of content, or articles.

<article>

The article tag defines a piece of content that could be on its own on a page. It is content on a specific topic, for example the blog post that you are now reading could be in an article tag. The idea is that if an article was syndicated on its own in a web feed, the content it contains should be complete and should make sense.

<header>

The header tag basically replaces what was normally done with <div id=”header”>. It represents the top section of a page, that usually contains branding and web site titles.

<footer>

Similarly, the footer tag basically replaces what would be done with <div id=”footer”>. It represents the bottom section of a page, that usually contains copyright info, site maps and links to website legal documentation.

<nav>

Also, the nav tag basically replaces <div id=”navigation”>. This would be a container for a navigation bar, normally done with a hyperlinked unordered list.

<aside>

An aside is a piece of content that could stand on its own, but is related to the main content that it is within close proximity of. This is a tag that could be used to create sidebars that support the main content and possibly a context-based navigation bar. Essentially anything that could be defined as adding supporting information to the main content.

<time>

This is a fairly random-seeming tag, however dates and times are often found on websites, yet there is no standard way to denote them. A blog post publication date/time could, for example, be placed within a time tag. This will make styling dates and times easier as well as make them stand out for software agents browsing website data.

Tags That Finally Died!

<center>,<font>,<frame>,<frameset>

There were some tags from early versions of HTML that were still being used by folks who just didn’t want to adapt and learn semantic HTML. These included center, font, frame and frameset. HTML 5 ends the reign of terror that these elements caused, as they have been removed from the HTML spec as obsolete tags. Good riddance! Finally creating frames is actually invalid HTML. Now if only the b and i tags would go…

Old Browser Support </shudder>

In order for older browsers to understand new HTML elements, some JavaScript magic tricks need to be performed. For example, IE6 will allow you to use arbitrary HTML elements, if you first create them in the DOM with the document.createElement method. Luckily some code-wrangling heroes from MIT have already done the hard work for us and created a JavaScript file that can simply be included in the page head. Here is a link to their work: HTML 5 Enabling Script

HTML 5 Resources

Posted in code | Tagged code, guide, html, markup, trends

Fun with New School Web

Written by tborzecki on December 1, 2010 — Leave a Comment

Lately the hype around HTML 5 and CSS3 has been getting out of hand. It is a pet peeve of mine when people claim that some of the amazing work done online is “built using HTML 5″ when in fact it is about 10% HTML 5 and 10% CSS 3 while most of the “cool factor” actually comes from well-written JavaScript.

That being said, I too have dived into using some HTML 5 and CSS3 whenever I can, if only to learn some of the new techniques.

It is incredible what can be accomplished with just CSS3, in terms of styling. Take a look at the control panel I styled below:

Something like this would sometimes take hours of Photoshop work to execute. With CSS 3 though, all the effects are created using CSS properties with the exception of the icons, which are stock icons. The combination of text-shadows, box-shadows, border-radiuses, borders, transitions and gradients can make an unordered list of hyperlinks look like a proper dashboard.

The only true drawback is browser compatibility, however. This is not as big an issue as it would seem, because if the web page is built to degrade gracefully, then low-tech browser users will see a fully useable, scaled-back rendering of the same page.

It is important to write all of the browser-specific properties and also include the “official” version of the CSS property at hand to make it work. To make it easier, there are lots of online tools to help. The most notable one is called CSS 3 Please which is a JS based page that generates all the required rules for you. This was a great find and thanks to Tom Auger for sharing it.

I will be writing some tips about switching to HTML 5 in a future post, as this new markup makes even tedious content organization fairly entertaining; if only because of its novelty.

Posted in Uncategorized

Simple and Easy CSS Image Replacement

Written by tborzecki on November 5, 2010 — Leave a Comment

CSS Image Replacement I thought I’d summarize a quick, but very important CSS technique. This technique is best used when:

You need to use a really, really fancy typeface for headings … or a standard typeface with effects that can’t be replicated in CSS.
You need to place a layout image (one that isn’t a piece of content) into your page strategically.
You want to turn a button tag or hyperlink into an image-styled button.

In any of these cases, it is always helpful to be able to apply the image, which might contain text, while keeping the HTML text within your page. This will help search engines and other browsing agents, such as a screen reader to get to the appropriate content or keywords.
For the examples below, assume we are working with a heading, and the markup is as such:

Markup


<h1 id="the_title_to_replace">This is The Heading</h1>

There are basically two steps to this method:

Apply your graphic as a background image, to the appropriate element in the code. It is important to position and size the element appropriately while adjusting things like background-repeat.

Set the Background Image


#the_title_to_replace
{
   display: block;

   /* match the size of the image exactly */
   width: 200px;
   height: 80px;

   /* apply the image as a background to the element */
   background: url(../images/the_title_image.png) top left no-repeat;
}

Hide the original text that is in the HTML.

Hide the Text with No Additional Markup


/* quick method with no additional markup */
#the_title_to_replace
{
   ... see #1 above for this part of the code ...
   text-indent: -10000;
}

Hide the Text with Additional Markup


<h1 id="the_title_to_replace"><span>This is The Heading</span></h1>


/* More semantically correct, but extra markup (see above) required.
   This  hides the span which contains the heading text.
  */
#the_title_to_replace span
{
   display: none;
}

Posted in code | Tagged code, css, tutorial

What is Your Coding Style?

Written by tborzecki on October 22, 2010 — Leave a Comment

{[(

I “recently” realized that one of the most important things to do when writing any sort of code, is to develop a clean and consistent coding style. Everyone has a preference as to where brackets go, and these styles also evolve over time, especially with growing screen resolutions. A quick wikipedia search will show a couple of interesting articles on the subject, which actually categorize the main coding styles. Programming style and Indent Style (courtesy of Wikipedia).

Here is my coding style, which evolved by absorbing the styles of various people around me:


while( flash > noFlash )
{
     if( phoneOS == ANDROID )
     {
          var webEnjoyment = 1000;
          var hackingAndTinkering = true;
     }
     else{ trace( "Not switching back yet." );  }
}

So to summarize my coding style:

I use a single tab for an indent
- (From my Java/C++ coding experience at Ryerson)
Every code block enclosed in “curly brackets” is indented one level in
Every open “curly bracket” can be followed down the page to it’s closing bracket
- A code block with only one line (like the else above) has both brackets on one line
- (Also came from my coding experience at Ryerson)
Regular brackets have a single space inside each bracket, to make the conditions they contain less “claustrophobic” and a little easier to read
- (I picked this up from my Humber Rich Media ActionScript teacher)

I also use a variation of this style for X/HTML and CSS:


<html>
     <head>
          <title>One Sick Webpage</title>
     </head>
</html>


#wrapper
{
     width: 19000px;
     border: none;
     margin: 0 0 0 2px;
}

p span { content: ".";  }

In the end, it only really matters that you are consistent, and that your style doesn’t leave you prone to errors.
So here’s my question … how do you write your code, and why?

Posted in code | Tagged AS3, code, css, PHP, XHTML

Site Definitions in DW CS5

Written by tborzecki on October 12, 2010 — 2 Comments

Site definitions in Dreamweaver are a must, if you want to make use of most of DW’s features. There have been some significant changes to the process of creating a site definition in CS5. Rather than attempt to make a 10 page handout on the subject, I have opted to create a video tutorial.

It was done on a Mac because I like shiny interfaces, however the process is identical on a Windows machine. Hope this helps some of you, and I apologize for the robotic voice, that’s just what I was born with.

Install Flash Player

Posted in tutorials | Tagged CS5, dreamweaver, tutorial, video