Thanks for your participation! After submitting your answers, you’ll be able to view the results to date. I’ll post and share the results here later in the week.

Technorati Tags:
education, learning, school, survey, technology, poll, skills, skill

2tor is changing the way great students and great universities think about online
higher education. Founded by a unique team of education veterans, 2tor Inc. is a
private company that partners with preeminent institutions of higher education to
deliver rigorous, selective degree programs online.

2tor is a highly energetic, innovative start-up company with room to grow. We
donâ??t take ourselves too seriously, and strive to maintain a casual, professional
and highly productive work environment for our team.

What Weâ??re Looking For

2tor is looking for a rockstar front-end developer with a strong PHP background
and WordPress experience. This is for a freelance position in our New York office with an opportunity to transition into a full-time role.

The initial scope of work will encompass development of an extensive wordpress
based website (100+ pages) on behalf of a major research university. The
developer will work closely with a project manager to meet a series of critical
deadlines.

On-going freelance work may include development of landing pages, custom
HTML tabs for Facebook, and other marketing-related initiatives.

Ideal candidate will have the following attributes:

* Extensive knowledge of WordPress/PHP
* Appreciation of good design/UI
* Basic understanding of SEO
* Team player with a â??can doâ?? attitude
* Detail oriented, ability to prioritize efficiently and multi-task
* Ability to work with a diverse team in a fast-paced, entrepreneurial
environment

To inquire about this position, please email Blair Gardner at
bgardner@2tor.com with a resume and links to work or portfolio.

When a message, a link, an image, an audio file or a video is posted to a website, however, that content becomes an example of “one to an undefined many” communication. The same teachers created the following graphic to illustrate this concept today.

Using a “QuickStart Guide to Posterous,” I showed educators in our workshop how they could use EMAIL and the free web service Posterous to post text as well as rich media files (like images, audio files and videos) to a personal website. As educators we need to SHARE MORE! I am thrilled web services like Posterous and iPadio are available which make the process of sharing ideas and media easier than ever.

When it comes to communication in the 21st century, email is NOT good enough. We need to encourage more educators to SHARE ideas, resources, and media using tools like Posterous! If you can send an email, you can use Posterous. Many messages we create still SHOULD be sent with a “one to one” or “one to a defined many” distribution, but many of our ideas CAN and SHOULD be shared with “an undefined many.” When we share ideas in this way, there is NO LIMIT to the number of people who could theoretically encounter and be influenced by our ideas. That is VERY powerful! To do this, we need to post content online using a tool like Posterous.

H/T to Clay Shirky who got me thinking about “one to a defined many” and “one to an undefined many” communication differences in his book, “Here Comes Everybody.” H/T to Will Richardson for stating at NECC a few years ago, everyone NEEDS to read Shirky! H/T to Marco Torres for demonstrating how amazing the Brushes app can be at ACTEM in Maine last October! This was a quick sketch Marco did of me at the conference on his iPhone.

Here’s Marco’s rendition of Bob Sprankle!

Now THAT takes a LOT more artistic talent than I’ll probably ever have. Long live the power of visual art and visual media!

Technorati Tags:
blog, email, media, posterous, publish, share

Adding a Facebook Like Button on your website or blog is perhaps one of the easiest and most effective way to get more fans and earn more likes. If you have hundreds, thousand or perhaps tens of thousand of fans, it might be a good idea to publish a fan count. Fan count displays in numeric text total fans your Facebook page has, or rather, how many have liked your page.

The technique is simple and very similar to displaying Google feedcount in text. The only difference is – we will be using Facebook’s API. In this post, we want to show you how it can be done so you can add them into your WordPress blog or PHP powered website. Load up your favorite code editor, here we go.

Step 1 – Get API Key, Application Secret & Page ID

These are the three mandatory information you’ll need to get things started.

API Key and Application Secret

1. Sign in to your Facebook and click on Developer’s link on the site bar. (If you don’t have a Developer’s account, you will have to sign up for one first)

   

2. Click "Set Up New Application". Enter any application name, agree to the Facebook terms and click "Create Application". Note: We are not going to create a real application, but we’ll need to go through these processes to get a API Key and Application Secret.
   
3. On the next page, you should be able to see your personal API Key and Application Secret. Copy it down somewhere or leave the browser window open.
   

Page ID

Page ID is the ID of your Facebook Fan Page. If you don’t have a Facebook Fan page, you’ll have to first create one. To get the ID of your Fan page, click edit page, and look for your ID (numbers) at the end of the URL – http://www.facebook.com/pages/edit/?id=XXXXXXXXX

Step 2 – Get Facebook.php

You’ll also need the Facebook API PHP SDK file called Facebook.php. Download it, and place it in the root of your folder. Learn more about Facebook PHP SDK.

Step 3 – Display Fancount

To show off your fancount, place the following code in your php file,

<?php
require_once('facebook.php');
$facebook = new Facebook(array(
    'appId'  => 'app_id',
    'secret' => 'secret_key',
    'cookie' => true,
));
$result = $facebook->api(array(
    'method' => 'fql.query',
    'query' => 'select fan_count from page where page_id = page_id;'
));
$fb_fans = $result[0]['fan_count'];
?>

And then you will want to edit the codes to change the following:

• Line 4 – Replace app_id with your Facebook Application ID.
• Line 5 – Replace secret_key with Secret.
• Line 10 – Replace the last page_id with your Facebook Fanpage ID.

Please refer to Step 1 on how to get app_id, secret_key and page_id.

To display the fancount, insert this following code anywhere in the page:

<?php echo $fb_fans; ?>

That’s all. Style your fancount and make it attractive. See a working example on Psdeluxe’s top right corner.

Fink’s xinitrc package provides similar functionality to X11 on 10.4 as is available on 10.5 and 10.6.   It provides Fink packages with a straightforward way for packages to have executables run automatically when X11 is started without modifying the system area, instead using scripts in /sw/etc/xinitrc.d (assuming a default fink setup).  Moreover, when a package is removed, its script will also be removed.  Currently, the following packages use it:

dbus

kinput2

uim

user-ja

xfontpath

xinitrc is used by these packages on 10.5 and 10.6 as well as 10.4.  Since dbus is in the dependency chain for both GNOME and KDE, the behavior of xinitrc is important for users of those desktop environments.

Issues

xinitrc does have a side effect that needs to be taken into account.  It is set up, deliberately, to circumvent the default script setup from 10.5 or 10.6′s X11 with its own, similar, setup, cf.:
http://article.gmane.org/gmane.os.macosx.fink.devel/18879
and its default setup doesn’t search $HOME.xinitrc.d for user scripts.
Fortunately, it’s straightforward to do so, and the method provides 10.4 users with the ability to set up scripts in $HOME.xinitrc.d, too.

Also, if you’re using xinitrc because other Fink packages Depend on it, you may lose some functionality if you need to reinstall X11 (e.g. if you’re using Xquartz on 10.5).  If so, then use

fink reinstall xinitrc

to restore it.

10.5 and 10.6

Basically, we just need a way to reactivate the existing handling of $HOME.xinitrc.d .   The xinitrc package provides a couple of system administrator entry points.  Let’s use  one which gets processed after the script files that are installed by fink packages.  We can do this via the following steps:

1. Edit /sw/etc/xinitrc-last-hook as a superuser (again assuming a default Fink path).
2. Put the following in it:

   #!/bin/sh
   . /usr/X11/lib/X11/xinit/xinitrc.d/98-user.sh

   and save the file.

3. That’s it! The next time you start X11, it will process any scripts in $HOME/.xinitrc.d .

10.4

10.4 requires writing the script that processes scripts in $HOME/.xinitrc.d :

1. Edit /sw/etc/xinitrc-last-hook as a superuser (again assuming a default Fink path).
2. Put the following in it:

   #!/bin/sh
   if [ -d "${HOME}/.xinitrc.d" ] ; then
   for f in "${HOME}"/.xinitrc.d/*.sh ; do
   [ -x "$f" ] && . "$f"
   done
   unset f
   fi

   and save the file.

3. That’s it! The next time you start X11, it will process any scripts in $HOME/.xinitrc.d .

Setting up GNOME or KDE

To make sure that GNOME or KDE get started after any other apps, we will want to give their startup scripts names that get processed after anything else we want, e.g. ‘zzz-gnome.sh’.

Full GNOME Desktop

1. Edit e.g. $HOME/.xinitrc.d/zzz-gnome-session.sh .
2. Put the following in it (assuming a default Fink setup):

   #!/bin/sh
   . /sw/bin/init.sh
   exec gnome-session

   then save the file.

3. Run

   chmod a+x $HOME/xinitrc.d/zzz-gnome-session.sh

   to make the script executable.

Rootless GNOME

1. Edit e.g. $HOME/.xinitrc.d/zzzz-gnome-panel.sh .
2. Put the following in it (assuming a default Fink setup):

   #!/bin/sh
   . /sw/bin/init.sh
   exec gnome-panel

   then save the file.

3. Run

   chmod a+x $HOME/xinitrc.d/zzzz-gnome-panel.sh

   to make the script executable.

KDE3

1. Edit e.g. $HOME/.xinitrc.d/zzzzz-kde3.sh .
2. Put the following in it (assuming a default Fink setup):

   #!/bin/sh
   . /sw/bin/init.sh
   exec startkde

   then save the file.

3. Run

   chmod a+x $HOME/xinitrc.d/zzzzz-kde3.sh

   to make the script executable.

KDE4

1. Edit e.g. $HOME/.xinitrc.d/zzzzzz-kde4.sh .
2. Put the following in it (assuming a default Fink setup):

   #!/bin/sh
. /sw/bin/init.sh
exec /sw/opt/kde4/x11/bin/startkde


   then save the file.

3. Run

   chmod a+x $HOME/xinitrc.d/zzzzzz-kde4.sh

   to make the script executable.

Oracle Database XE server configuration on Ubuntu

These are the steps which need to be followed in order to access the Oracle Database Home Page.

• Open the Terminal window.

• Type the following command,
  sudo /etc/init.d/oracle-xe configure

• Enter the sudo password.

• Specify the port for oracle application as “8080″.

• Specify the port for Database listener as “1521″.

• Give the password to be used for database accounts and confirm it.

• Press ‘y’ so that the oracle database will be started on boot.

• It will specify the url for the database home page.

• To access the Database Home Page go to http://127.0.0.1:8080/apex on the browser window.

• Login by entering the Username and password.

  

It is arguable that there is no goal in web design more satisfying than getting a beautiful and intuitive design to look exactly the same in every currently-used browser. Unfortunately, that goal is generally agreed to be almost impossible to attain. Some have even gone on record as stating that perfect, cross-browser compatibility is not necessary.

While I agree that creating a consistent experience for every user in every browser (putting aside mobile platforms for the moment) is never going to happen for every project, I believe a near-exact cross-browser experience is attainable in many cases. As developers, our goal should not just be to get it working in every browser; our goal should be to get it working in every browser with a minimal amount of code, allowing future website maintenance to run smoothly.

In this article, I’ll be describing what I believe are some of the most important CSS principles and tips that can help both new and experienced front-end developers achieve as close to a consistent cross-browser experience as possible, with as little CSS code as possible.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

Understand the CSS Box Model

This is one of the first things you should be thoroughly familiar with if you want to be able to achieve cross-browser layouts with very few hacks and workarounds. Fortunately, the box model is not a difficult thing to grasp, and generally works the same in all browsers, except in circumstances related to certain versions of Internet Explorer (more on this later).

The CSS box model is responsible for calculating:

• How much space a block-level element takes up
• Whether or not borders and/or margins overlap, or collapse
• A box’s dimensions
• To some extent, a box’s position relative to other content on the page

The CSS box model has the following basic rules:

• Block-level elements are essentially rectangular (as are all elements, really)
• The dimensions of a block element are calculated by width, height, padding, borders, and margins
• If no height is specified, a block element will be as high as the content it contains, plus padding (unless there are floats, for which see below)
• If no width is specified, a non-floated box will expand to fit the width of its parent minus padding (more on this later)

Some important things to keep in mind for dealing with block-level elements:

• If a box has its width set to “100%”, it shouldn’t have any margins, padding, or borders, otherwise it will overflow its parent
• Vertically-adjacent margins can cause some complex collapsing issues that may cause layout problems
• Elements positioned relatively or absolutely will behave differently, the details of which are extensive and beyond the scope of this article

The box model as its displayed using Firebug in Firefox

Understand the Difference Between Block and Inline

For experienced developers, this is another no-brainer. It is, however, another crucial area that, when fully understood, will cause the light bulb to appear, many headaches will be avoided, and you’ll feel much more confident in creating cross-browser layouts.

The image below illustrates the difference between block and inline elements:

Here are some basic rules that differentiate block elements from inline:

• Block elements will, by default, naturally expand horizontally to fill their parent container, so there’s no need to set a width of “100%”
• Block elements will, by default, begin at the leftmost edge of the parent box, below any previous block elements (unless floats or positioned elements are utilized; see below)
• Inline elements will ignore width or height settings
• Inline elements flow with text, and are subject to typographical properties such as white-space, font-size, and letter-spacing
• Inline elements can be aligned using the vertical-align property, but block elements cannot
• Inline elements will have some natural space below them in order to accommodate text elements that drop below the line (like the letter “g”)
• An inline element will become a block element if it is floated

Understand Floating and Clearing

For multi-column layouts that are relatively easy to maintain, the best method is to use floats. Having a solid understanding of how floats work is, therefore, another important factor in achieving a cross-browser experience.

A floated element can be floated either left or right, with the result that the floated element will shift in the specified direction until it reaches the edge of its parent container, or the edge of another floated element. All non-floated, inline content that appears below the floated element will flow along the side of the element that is opposite to the float direction.

Here are some important things to keep in mind when floating and clearing elements:

• Floated elements are removed from the flow of other block-level, non-floated elements; so in other words, if you float a box left, a trailing paragraph (block level) that’s not floated will appear behind the float in the stack, and any text inside the paragraph (inline level) will flow around the float
• To get content to flow around a floated element, it must be either inline or else floated in the same direction
• A floated element without a declared width will shrink to the width of its content, so its generally best to have a set width on a float
• If a block element contains floated children, it will “collapse”, requiring a fix
• An element that’s “cleared” will avoid flowing around floated elements above them in the document
• An element that’s both cleared and floated will only clear itself of elements that come before, not after

Use Internet Explorer First

Most of what I’ve discussed so far has to do with CSS coding and layout principles. This principle is more related to habits and preferences of most designers. Although we might hate to use IE6 and IE7 in our everyday internet activities, when it comes time to build a client project from scratch, one of the best things you can do is test your layout in those browsers early in development. You might even want to open up a standalone version of IE6 or IE7 and just start your development in that browser.

Of course, you won’t have access to tools like Firebug, but generally for CSS (especially early in development) you won’t need Firebug. It’s much easier to get a layout working first in IE6 and IE7, then fix for other browsers, than to do it the other way around. Waiting until late in the development process to open up IE6 and/or IE7 will likely cause some, if not all, of the following problems:

• Multiple hacks will be required, needing separate stylesheets for different versions of IE, making the code bloated and less maintainable and making the website slower
• The layout in some spots may have to be reworked, multiplying development time
• Testing time will increase, sometimes exponentially, leaving less time for more important tasks
• The layout in other browsers will not be the same as in IE6 and IE7

I wouldn’t expect developers to use Internet Explorer this aggressively for personal projects, web apps, or other non-client work. But for corporate clients whose user base is primarily on Internet Explorer, this tip could prevent a lot of headaches while getting things to work properly, and will definitely make a cross-browser experience much more likely.

Sometimes viewing IE’s problems as “annoying bugs” can create unnecessary negativity, and can hinder development time and future maintenance. Dealing with IE is a fact of life for designers and developers, so just view its problems as you would any CSS issue — and build from there.

Understand Internet Explorer’s Most Common Problems

If you’re going to start with IE in your development, or at the very least check your layout in IE early on, then you should understand what things Internet Explorer (usually versions 6 & 7) has problems with, or what its limitations are.

A detailed discussion of every possible problem that can occur in Internet Explorer, and a list of all of its CSS compatibility issues is certainly beyond this article. But there are some fairly significant inconsistencies and issues that come up in relation to IE that all CSS developers should be aware of. Here is a rundown of the most common problems you’ll need to deal with:

• IE6 will become problematic if floats are overused, causing (paradoxically) disappearing content or duplicate text
• IE6 will double the margin on floated elements on the side that is the same direction as the float; setting display: inline will often fix this
• In IE6 and IE7, if an element doesn’t have layout, it can cause a number of problems, including backgrounds not showing up, margins collapsing improperly, and more
• IE6 does not support min- and max-based CSS properties like min-height, or max-width
• IE6 does not support fixed positioning of background images
• IE6 and IE7 do not support many alternate values for the display property (e.g. inline-table, table-cell, table-row, etc.)
• You cannot use the :hover pseudo-class on any element in IE6 except an anchor (<a>)
• Certain versions of IE have little support for certain CSS selectors (e.g. attribute selectors, child selectors, etc.)
• IE versions 6-8 have little support for CSS3, but there are some workarounds

There are many more bugs, issues, and inconsistencies that can arise in Internet Explorer, but these are probably the most common and most important ones to keep in mind when trying to create a cross-browser experience. I encourage all developers to do further research on many of the issues I’ve mentioned above in order to have a more accurate understanding of what problems these issues can cause, and how to handle them.

Some Things Will Never Look the Same

As already mentioned, creating the exact same experience visually and functionally in every browser is possible, but unlikely. You can get the layout and positioning of elements close to pixel-perfect, but there are some things that are out of the developer’s control.

Forms Will Often Look Different

Discussing all the differences and quirks that occur with form elements across the different browsers and platforms could be an article in itself, so I won’t go into extensive details here. A simple visual demonstration, however, should suffice to get the point across.

Take a look at the image below, which displays the <select> elements on the Facebook home page, as shown in 5 different browser versions (screenshots taken from Adobe’s Browserlab):

<select> elements appear differently in different browsers

Some form elements can be controlled visually. For example, if the client requires that the submit button looks the same in every browser, that’s no problem, you can just use an image, instead of the default <input type="submit">, which, similar to <select> elements, will look different in different browsers.

But other form elements, like radio buttons, textarea fields, and the aforementioned <select> elements, are impossible to style in a cross-browser fashion without complicating matters using JavaScript plugins (which some developers feel harm the user experience).

Typography Will Always Look Different

Another area in which we can’t expect pixel-perfect designs is with regards to fonts, particularly fonts on body copy. Different methods have sprung up to help with custom fonts in headers, and the recently launched Google Font API will contribute to this. But body copy will probably always look different in different browsers.

With typography, we not only face the problem of font availability on different machines, but in some cases even when the font is available on two different machines, the type will look different. Windows ClearType, for example, is available on IE7, but not on IE6, causing the same font to look different on two different versions of IE.

The graphic below displays screenshots from A List Apart on IE6 and IE7. The grainy text in IE6 is more evident on the heading than in the body copy, but all text displays a marked difference between the two browsers (unless of course the text is an image):

A List Apart’s typography compared in IE6 and IE7

Use a CSS Reset

Ever since I started using a CSS rest for my projects, my ability to create a cross-browser experience has greatly increased. It’s true that most resets will add unnecessary code to your CSS, but you can always go through and remove any selectors that you know will not be a factor (for example, if you don’t plan to use the <blockquote> tag, then you can remove reference to it, and repeat this for any other unused tags).

Many of the margin- and padding-related differences that occur across different browsers become more normalized (even in troublesome HTML forms) when a CSS reset is implemented. Because the reset causes all elements to start from a zero base, you gain more control over the spacing and alignment of elements because all browsers will begin from the same basic settings.

A CSS reset as shown in Firefox’s developer toolbar

Besides the benefits of producing a cross-browser experience, a reset will also be beneficial because you won’t use as many hacks, your code will be less bloated, and you’ll be much more likely to create maintainable code. I recommend Eric Meyer’s CSS reset, which I’ve been using for quite some time now.

Use SitePoint’s CSS Reference

If you’re having trouble getting a particular CSS property to display correctly across all browsers, look up the property in the SitePoint CSS Reference to see if it has any compatibility limitations. SitePoint’s reference (which is also available as a hard copy (though not as up to date), includes a useful compatibility chart that displays browser support for every standard CSS property.

SitePoint’s Compatibility Charts for CSS Properties

Each compatibility chart is accompanied by a fairly detailed description of the bugs that occur in different browsers, and users are permitted to add comments to document new bugs that come up and to provide further explanations on complex CSS issues.

Using this as a guide, you can narrow down the possibilities, and can usually determine whether or not a CSS issue is due to a browser bug, or due to your own misapplication or misunderstanding of the CSS property in question.

Conclusion

While there is so much more that could be discussed on the topic of cross-browser CSS, the principles and guidelines I’ve introduced here should provide a foundation to assist CSS developers in creating as close to a consistent cross-browser experience as is currently possible. Cross-browser CSS is an attainable goal, within reasonable limits.

But, as an epilogue to this article, I also would like to concur with those promoting the use of CSS3 with progressive enhancement, and encourage developers to push new CSS techniques to the limits, even doing so, where possible, on client projects.

The principles I’ve introduced here should help developers create a beautiful and intuitive experience in IE, while providing an extra-beautiful and super-intuitive experience in the more up-to-date browsers. That’s a cross-browser goal that is definitely worth striving for.

© Louis Lazaris for Smashing Magazine, 2010. | Permalink | 6 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS

  

With all of the buzz going on in our Web community about HTML5 and Flash, I’ve decided to dive into the fray and offer my thoughts as a 10-year veteran of both Web design and Flash development. Let me preface by saying that this article is opinion-based, and that information is certainly out there that I am not aware of, and that none of us truly knows what the future holds.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Use Of Flash Till Now

When Flash broke on the scene, it was a fairly revolutionary tool… and much simpler to use than it is today. I first started using it in 1999, when it was being produced by Macromedia. The current version then was 4. The simple benefit was that it allowed the average computer user to design graphics and create simple user interactions with almost no skill: quite a feat in the messy and over-complicated world of Netscape and IE4.

People didn’t take long to start using Flash as an engine to create full and complete websites, especially as the versions continued their march upward and ActionScript gained footing. Quite simply, it sped up development time and wow’ed all users with its animations—a far cry from the static-text Geocities websites around them.

But Flash started to be overused soon after. One can compare it to HTML tables, a framework that revolutionized the industry for a time, became overused and then receded to its proper role (which in this case was to structure data points rather than website columns).

Why They Don’t Have to Fight

I’ve read a lot of blog posts lately about HTML5 taking on Flash like a prize fighter and kicking it off the scene in some epic battle of Web standards and pragmatism. But this is a false scenario: HTML5 and Flash are not meant to be fighting in the same ring, or to be fighting at all. Each has its proper place on the Web and in the graphic community.

Flash’s Place

Interestingly enough, Flash’s place is not entirely on the Web at all, and certainly not to take over full website designs (or those dreaded Flash intros either). While bits of Flash will continue to be used in Web design for advertising and gaming, it will truly shine in two primary areas.

The first area is the corporate setting. I work part-time as a Web developer on the multimedia team of a major international telecommunications company. The majority of the team consists of Flash developers, and there is a huge demand for more of them. So, while Flash may be shrinking in the Web industry, it is booming at the corporate level through rich media, training and learning solutions, Intranet applications and the like.

While Flash may be simplistic and annoying for a website, its capabilities for database interaction, PHP integration, XML sourcing, external ActionScript 3, extensible plug-ins and import and export functionality make it an extremely robust tool that far outweighs the competition for certain uses. Flash has a profitable future in corporate settings.

The second area is still budding and turbulent: mobile platforms. Web content aside, if Flash could be used to produce applications and rich interaction on a variety of mobile platforms, it would empower designers and developers everywhere to contribute to a booming mobile industry (and give us the opportunity to make a sweet profit while we’re at it).

Why would Flash do so well in the mobile space compared to Web-based tools and frameworks? First of all, because Flash is a powerful development tool, beyond its graphic and animation capabilities. ActionScript 3 has brought serious improvements to the overall structure and functionality of applications, allowing developers to create powerful apps.

Secondly, Flash being used across multiple platforms brings a much higher probability of consistency and compatibility. Even if comprehensive Web standards were supported across all mobile devices, there is no guarantee that we wouldn’t run into the same cross-browser headaches on the variety of mobile browsers. If Flash were supported on all mobile devices, I could be reasonably certain that my Flash module would run smoothly on each one.

It’s like my parents fighting. I love Adobe. I love Apple. This really sucks.

— Terry Ranson

The Adobe and Apple cat fight disagreement may be discouraging, but consider that Android is releasing a Flash-enabled framework, and Adobe is releasing Flash Player 10.1 for smartphones, and Research in Motion has joined Adobe’s Open Screen Project, essentially committing the BlackBerry to Flash in the near future.

Flash should never have been used to the extent that it was purely for Web design. But it has capabilities beneath the hood that make it an extremely valuable resource for certain uses, particularly in the mobile space.

HTML5’s Place

HTML5’s place, on the other hand, is entirely on the Web. And this is an outstanding development. I remember switching from table-based designs to CSS, a liberating move that gave Web designers a freedom that only we could truly appreciate. Moving forward with standards-based browsers and rich functionality via CSS3 and HTML5 will take our industry to new heights and lead to a flourishing of gorgeous websites and functionality that we’ve never before witnessed.

Plenty of articles and resources outline the capabilities and benefits of HTML5 (I won’t cover them here), but rest assured that it is the future, and a sweet future at that.

The Web In Two Years

Where will the chips fall when the Web design industry reaches its next stage? I may be idealistic, but I would like to see (and I think we will see) the following:

• HTML5 and CSS3 as the new Web standard;
• All browsers being compatible and standards-based;
• Flash being used more limitedly as a tool for multimedia and gaming and interaction, both online and offline;
• Mobile platforms and mobile content development being the newest and fastest-growing subset of the industry:
  • Sporting Flash capabilities for robust application development across all platforms;
  • And offering HTML5, CSS3 and complex JavaScript capabilities for mobile browsing.

Conclusion

Flash has been misused and overused for the past eight years, spreading its tentacles too far into the fabric of Web design. But rather than getting beaten out of the picture by these practical new Web frameworks, Flash will retreat to its proper place: those niche areas where it belongs and can truly excel. The first niche is multimedia and learning solutions for the corporate space. Only time will tell if Flash finds its second niche on mobile platforms.

(al)

© Luke Reimer for Smashing Magazine, 2010. | Permalink | 26 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: flash, html5

  

Today, we’ll look at what it’s like to develop print material in cooperation with a major marketing company for top-name brands and retailers using Adobe Photoshop and Illustrator. For anyone in the print industry, we’ll share methods and resources that you’ll hopefully find helpful. For others, this article will shed light on what it’s like to work for a design firm. You’ll gain in-depth insight not only into the methods of professional print designers but also into the marketing implications of their work.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

The World Of Print Promotional Advertising

Though many newcomers to the design industry lean towards Web design, professional print design is still very much a viable alternative. Despite declining print sales of magazines and newspapers, print-based marketing (such as for in-store signage, direct-mail campaigns and free-standing inserts) doesn’t seem to be going anywhere soon. If anything, the industry is eager to hire talent from the next generation to bring much-needed fresh ideas and innovation to the table.

Shopper Marketing 101

The particular area of print design that we’ll be delving into today goes by several names: “shopper marketing,” “co-marketing,” etc. Whichever buzz term you prefer, what is basically meant is a kind of partnership between brands and retailers to better target customers across all fronts, both in-store and outside.

What this generally looks like is this: a given retailer, such as Wal-Mart, will partner with a given brand, such as Coke, to announce a sale, distribute a coupon, reveal a new product launch, etc. The practical and unfortunate implication of this partnership for you as a designer is that you now have two masters to please.

Every major brand name has a personality to go with it. A brand is typically made up of very specific messaging targeted to a specific audience, as well as a locked-in visual theme containing certain fonts, pre-built art, photography and packaged shots. Returning to the example above, Coke has one of the biggest brands on the planet and is very picky about how that brand is represented. Likewise, Wal-Mart is one of the biggest retailers on the planet, and no matter what the brand managers at Coke say, the Wal-Mart brand must also be presented in a very particular way.

As you can see, conflicts between the two are bound to arise in every area of the design. The job of a shopper marketing designer is to balance these often contradictory sets of rules and create something that pleases both parties.

The Job

Imagine you are sitting at your desk in the trendy office space of a marketing company in LA. A typical request will specify, among other things, the product to be featured, the retailer, the terms of the sale or offer and the print vendor. Today, you are given the following information:

• Product: OangeSoda brand 12 oz bottles, original flavor
• Retailer: BuyLots
• Offer: Save $1 on purchase of three (with coupon)
• Specs: Valassis full-page free-standing insert (FSI)

From this list, we can already glean several steps to get on our way. Let’s look at a few of these.

1. Obtain Resources

We will have to gather several resources before designing. In an ideal world, everything you need would be either located on a company server, to which you would be granted access, or already stored on your hard drive from recent jobs. However, this is not an ideal world, and you will rarely get everything so easily. Fortunately, there are a few places to go for help.

Product Shots

The Web’s best one-stop shop for free, high-resolution, manufacturer-approved product shots is Kwikee (from MultiAd). The website is the holy grail for print designers who work with notable brands, because it eliminates a ton of red tape in finding the right contact at an organization to obtain package shots.

Kwikee, free product images.

The sign-up process is simple and free, so if you ever work with consumer brands, be sure to check it out. Finding the right product is as easy as using a search engine and selecting a file format to download (usually EPS or JPG). One of the best things about Kwikee is that its files not only are high resolution but contain clipping paths as well, saving you plenty of tedious Pen Tool time when you’re up against a deadline.

Logos

The story with logos is the same as that of product shots. Sometimes you’ll already have them; much of the time you won’t. While Kwikee has many logos to accompany its stockpile of product shots, the first place I turn to for logos is Brands of the World.

Brands of the World: free vector logos.

Just like Kwikee, Brands of the World is a simple search engine. All downloads are free and nearly always in vector EPS or AI format (although you have to jump through some annoying hoops to find the download links). The quality varies greatly because many of the logos are provided by users and therefore are not official artwork. For the most part, the artwork is useable, with little to no clean up needed; occasionally you’ll come across an item that needs so much repair that you’d be better off starting from scratch.

Ad Specs

The requirements above call for a Valassis full-page FSI. (Valassis is a popular distributor of these types of marketing material.) To obtain the specs for this ad, just stop by its website and locate the production templates.

Page specs for Valassis, a popular advertising vendor.

In this case, we’re looking for the “Super Page” template. Clicking on this gives us the specs for the ad. We see from the resulting PDF that the trim size is 7″ x 10.25″. The live area is 6.75″ x 10″.

If you’re confused, the trim area is basically the ad size (i.e. what the paper will be trimmed to), and the live area is an invisible box inside which all of your art and text should stay to prevent them from getting too close to the edge. At this point, we could simply download and use the template, but we’ll build one from scratch instead.

Miscellaneous Brand Resources

Now that you’ve collected most of the things you need to get started, the only thing left to do is familiarize yourself with the brand you’ll be working on and obtain any necessary resources (spot colors, art, etc).

Many major brands have built a “brand bible” to aid designers through this process. This is usually a PDF or PowerPoint presentation that walks through the do’s and don’ts of working with the brand. If you don’t have this document, check out the brand’s website and/or get ahold of some recent ads to get a feel for how it markets itself.

For this project, the requirements for the “OangeSoda” brand are that the product shot must be the “hero” of the ad and placed on a black background. The messaging must be related to beverage’s ingredients and written in the approved OangeSoda font (which is ChunkFive). Similarly, the retailer’s requirements are that a store logo must be shown and that Helvetica must be used for all messaging and appear in the official BuyLots red (24, 100, 92, 20).

As you can see, we’re already looking at a potential conflict because both parties require their own font (the colors could also present complications). We’ll have to consider this as we design the ad and figure out a way to please both parties.

2. Lay Out The Ad

When you’re working with very specific rules, creating an ad is almost never as simple as opening Photoshop and getting started. The red tape and resource collection is a necessary part of the job and often overlooked. Now that we’ve completed these steps, we’re ready to start the ad-building process.

Customized Workflow

The workflow below has been heavily customized. While many advertising designers use InDesign for page layout, today we’ll use Illustrator. InDesign and Illustrator each has its pros and cons, and it comes down to preference and the specifics of the job.

InDesign would be a wise choice if you are designing something that has 10 or more pages. Working with multiple art boards and files in Illustrator can be more trouble than doing it in a simple multi-page InDesign document. Fortunately today, we’re building only a single-page ad, so Illustrator will be perfect.

Design professionals also tend to keep all of their resources as separate files, which they then place into the page layout document. For instance, they’ll have bottle.psd for the product, logo.eps for the retailer logo, background.psd for the background layer, etc. While this simplifies the layout process because all of the elements can be shuffled in a single application, it usually results in an Illustrator (or InDesign) file that is cluttered with externally linked files. When they send the job to a printer, someone has to manually locate and relink all of the separate files to ensure that everything is present.

Although this is the industry-standard way of doing things, it’s a bit sloppy. Today, we’ll take the high road and build one single Photoshop document, which we’ll place as a linked file in one Illustrator document. This will no doubt feel strange to designers who are used to the traditional way, but it keeps things far tidier and makes print vendors incredibly happy.

Build the Template in Illustrator

The ad requirements specify a trim size of 7″ x 10.25″ and a live area of 6.75″ x 10″. Go into Illustrator and create a document with these specs.

Create a 7″ x 10.25″ Illustrator document.

Notice that I’ve thrown in a 1/8th-inch bleed as well. Most of the time when building an FSI, a bleed is not necessary, but we’ll include one just to be thorough.

Now, go into the Layers palette and set up three layers: Text&Art, Guides and PSD. If you’re used to working with Photoshop, you might think that everything should be on its own layer. But that’s simply not a good way to work with vectors or page layout elements. Grouping everything onto only a few different layers makes organization easier to follow.

Create three layers.

With the Guides layer selected, grab the Rectangle Tool (M) and click once on the art board. Use the resulting dialog to create a box the size of our live area.

Make a rectangle for the live area.

Center this box on the page and convert it to a guide using ⌘ + 5 (Control + 5 on a PC).

Center the rectangle on the art board.

The final step in setting up the template is to create a little informational tag to serve as a reference for anyone who opens the file. Place this just outside the art board and bleed area.

Write a quick reference line with document specs.

Almost everything in here is self-explanatory. Include some basic information on the file, the trim size, the specs and the current date. The “4/0 CMYK” part tells the print vendor that the ad will be printed in CMYK and is single-sided (i.e. four colors on one side, zero on the other). Now save this file and open up Photoshop.

Create the Photoshop Template

Go into Photoshop and create a document that is big enough to accommodate the bleed. In this case, we’ll need a 7.25″ x 10.5″ canvas. Make sure you’re building at 300 DPI and in CMYK; both are standard in print (unless you’re printing in large format, in which case the DPI tends to be closer to 150).

Create the PSD.

Set up some guides in Photoshop for the trim and live area to help you stay within the required space of your design. After you put the guides in place, fill the background with a rich black (e.g. 75, 68, 67, 90), and save the file.

Place the PSD in Illustrator

Now go back to Illustrator, select the PSD layer, and go to File → Place. Navigate to the folder where you put the PSD, and center it in the Illustrator art board. Make sure to add the file as a “link” so that it updates in Illustrator as we edit in Photoshop.

Place the PSD in the Illustrator file.

Illustrator vs. Photoshop

As you know, Photoshop is for raster artwork, while Illustrator is for vector. This will determine what we build in each program. We’ll use Illustrator for text and custom vectors, while keeping product shots in Photoshop.

Still, these clear lines will need to be crossed in a few places, particularly when our Photoshop art has to go over our vector art. In such cases, we’ll build the element in Illustrator and then import it into Photoshop as a Smart Object. This will make more sense later as we get into the design.

Create the Coupon Area

Next, in Illustrator, create a white rectangle that’s a little narrower than the live area and about 2.45″ tall. Then add a dashed black stroke to the rectangle.

Create a dashed rectangle for the coupon.

A few elements are found in just about every manufacturer’s coupon. These include a bar code, legal copy and an expiration date. These are all very situation-specific and would be provided with the job information. For our purposes, we’ll throw in some placeholder elements there. Keep in mind that these elements have strict size restrictions. While they vary by company and brand, barcodes are usually not scaled down (bar code software creates them at the correct size), and legal copy is often set at 6 points or larger.

Arrange the standard coupon elements.

Next, we’ll go through the seemingly strange step of cutting and pasting that coupon box (just the box, not the other elements) into Photoshop. Try to position it in roughly the same spot so that your coupon elements align right. We’re doing this so that placing images on top later will be easier.

Paste the coupon box into Photoshop as a vector Smart Object.

Now, save the Photoshop job and jump back to Illustrator to make sure everything is aligned correctly. Again, this workflow might seem a little wonky at first, but in the end it’s quite orderly and makes good sense.

Add the Product Shot

Next on the to-do list is throwing your Kwikee product shot over the coupon. Remember that the ad specs require the product to be the hero, so it has to be as large as possible. Below, I’ve doctored a fake OangeSoda bottle from a Flickr image that I found.

(Image source)

Notice that I’ve made the product quite large within the available space, while still giving it ample breathing room on all sides.

Add Some Flair

To visually emphasize the focus on natural ingredients, we’ll add some organic-looking graphics. To accomplish this, go into Illustrator and draw a small circle. Then grab the right-most point of the circle and drag it right a bit. Finally, convert it from a curve to a point, using the button in the menu shown below.

Create the shape above and drag it to the brushes palette.

Now, drag this little graphic to your brushes palette and then apply the settings below.

Create the shape above and drag it to the brushes palette.

Finally, use the spiral tool in conjunction with the brush that you just made to make some curly vine shapes. Make a few of different sizes, expand the strokes, and connect them using the pathfinder (make a couple of variations). Granted, oranges grow on trees, not vines, but the point is to emphasize the beverage’s naturalness, so anything that could be branches or leaves will work.

Use these options for the brush.

Now go into Photoshop and place your swirly branches behind the bottle as smart objects. This retains the editable vector aspect while giving you the ability to layer it with Photoshop art. Use color overlays and inner shadows to give it the dark sinister look below.

Place the branches behind the bottle and add layer effects.

3. Add Text

Almost there! Next, let’s go into Illustrator and add some text to our Text&Art layer. First, go to FontSquirrel and download ChunkFive, the font specified in the instructions.

To make both parties (the retailer and the OangeSoda brand) happy, we’ll apply each set of directions to the most appropriate part of the ad. For the coupon, we’ll use the BuyLots font, color and logo because this is where the retail aspect of the ad has the most focus. For the branding portion that we worked on above, we’ll stick to the OangeSoda font and colors.

Using the ChunkFive font, type some copy in the top-right and bottom-left of the bottle. Use size and color to differentiate keywords.

Place text at the top and bottom of the bottle.

Finally, add the terms of the offer and the retailer logo to the coupon (remember to use Helvetica and the BuyLots red).

Add the terms of the offer and the retailer logo to the coupon.

Coupon Product Shots

To finish the coupon, go into Photoshop and duplicate the bottle image. Make the new bottle layer small and place it on the right side of the coupon, above the barcode area. Duplicate this layer twice. Because the offer is good only when you buy three bottles, showing three bottles will make for a quicker visual read of the coupon.

Finish the coupon with some product shots.

Save the Photoshop file and look at Illustrator for the final effect. Notice that I’ve intentionally intruded on the coupon space a bit. This is one of those circumstances where breaking a rule is okay if it is intentional and purposeful. Popping the bottles out of the coupon makes for a bit of a visual distraction that brings the eye down to the coupon.

Final Image

The final product.

With that, our design is finished! Below is a quick visual guide to what we did in Illustrator and what we did in Photoshop, and how we brought them together to create the result.

Illustrator vs. Photoshop elements.

The trick here is turning very specific and even conflicting instructions into something attractive and creative, and using only two files (plus fonts), which will be collected to be sent out.

4. Prepare For Launch

After the initial design, the artwork will be sent off as a JPG or PDF to various parties to be inspected for approval. After a few rounds of changes, the files will be ready to send to the printer. Printers commonly request files in one of two ways: as fully layered files or as a print-ready PDF. Let’s look at the easiest one first.

Print-Ready PDF

Many print vendors choose to forgo the complications of folders full of files and simply print from a high-resolution PDF. This is a wonderfully simple method that works just fine.

To make a print-ready PDF in Illustrator, go to the “Save As” dialog and choose PDF as the file type. Then hit “Save.” The next window that pops up will display various settings related to the quality of the PDF. Fortunately, Illustrator is built with a perfect print-ready PDF preset. Just select “Press Quality” from the drop-down menu at the top and save the file. This single PDF can now be sent to the printer all by itself, with no fonts, links or other external files.

Layered Files

As proof that Adobe doesn’t really believe that many designers use Illustrator for page layout, it has neglected to include a “Collect for Output” feature as you would find in InDesign. You could manually prepare all the files in a few minutes, but if you want a better solution and use a Mac, check out Art Files from Code-Line. This amazingly simple application allows you to just drag an AI file to the open window, and it automatically collects any related fonts and placed images.

Art Files, the missing Illustrator “Collect for Output.”

Notice that the resulting collection is very basic. When the printer or another designer opens the ZIP file, they’ll see one Illustrator file, one Photoshop file and some font files. No clutter to speak of.

A simple, easy-to-grasp file hierarchy.

This is the same principle followed by website coders when they advocate for clean, organized code that is easily sortable by future maintainers. Print designers should apply this principle to their layering methods in both Photoshop and Illustrator (i.e. in naming and organizing all of the layers), as well as to the resulting file hierarchy. The simpler the system, the less time you’ll waste answering questions and trouble-shooting for anyone who wants to work on your files.

Conclusion

We’ve looked briefly at the world of print-based retail marketing. We saw that promotional print designers must deal with several complications beyond design, including resource gathering and working with multiple partners. Finally, we examined common print practices regarding ad layout, and we presented a unique method of integrating and organizing files using Photoshop and Illustrator synergistically. Hopefully now, you feel more confident creating your own print-ready promotional ad.

Helpful Resources

• MultiAd Kwikee
• Brands of the World
• FontSquirrel
• Art Files (Mac-only)

(al)

© Joshua Johnson for Smashing Magazine, 2010. | Permalink | 45 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: Tutorials

SCHOOLS and colleges are not set up on the peer production model. We as instructors are allocated to a isolated classroom! If you have a problem, the teacher next door to you can’t remedy your problem because we are set up on an industrial production model and they are allocated to their classroom only!

My first thought is that although there are great learning management system features available to facilitate sharing and instruction in a classroom, what you have seen is instructors putting text and links in the class and calling it instruction. We are stuck in an old mindset with new tools.

Although great tools are available for Peer Production (ie forums, wikis etc) often instruction is still distributed via a the industrial model. If I have access to all these great tools, web resources, all the smart people, great documentaries etc can we really change and use this to have a very different model of school than we are used to.

I think Kent is on to several VERY important and powerful ideas in this post. I need to watch all of Jason Cole’s presentation on educational innovation and disruptive change from the 2009 Alaska Society for Technology in Education conference which Kent also referenced and linked in the post. The concepts within English WikiPedia article Kent shared for “Commons-based peer production” deserve a great deal of attention and work not only here in Oklahoma but in other states as well. That definition (today) is:

Commons-based peer production is a term coined by Harvard Law School professor Yochai Benkler to describe a new model of economic production in which the creative energy of large numbers of people is coordinated (usually with the aid of the Internet) into large, meaningful projects mostly without traditional hierarchical organization (and often, but not always, without or with decentralized financial compensation). Often used interchangeably with the term social production, Benkler compares commons-based peer production to firm production (where a centralized decision process decides what has to be done and by whom) and market-based production (when tagging different prices to different jobs serves as an attractor to anyone interested in doing the job).

We need a “Commons-based peer production” curriculum resource in Oklahoma, not only for our 1:1 schools but for ALL learners in the state. This includes “formally” enrolled students in higher education, learners at the K-12 level, and other citizens in our communities who want to learn! Who will build this? Who will will champion it? Who will promote a learning culture of collaboration and sharing which can make this a transformative piece of our educational information landscape in the years to come? ODLA and OTA are organizations which certainly come to mind, but as a SHARED CURRICULUM project this is something which needs to move beyond the bounds of being just “a technology initiative.”

I’m energized by these possibilities. There’s a great deal of curriculum I think we need to build together and share through open licensing. It’s time to expand our toolbox in the state to include a Commons-based peer production” curriculum repository.

photo credit: Peter Hellberg

Who is hosting your state’s Commons-based peer production server for curriculum? Are you having conversations about the need for a resource like this? Where are the exemplars in the United States and elsewhere who are doing this? The OER Commons for New Zealand Schools on WikiEducator, Curriki, and Rice University’s Connexions project are three examples of which I’m aware.

Technorati Tags:
commons, creative, creativecommons, curriculum, digital, education, learning, odla, oer, oklahoma, open, share, ota, build