Home | Blog

A quick note to our clients using SlideShowPro & OS X

February 28, 2011 @ 1:58pm

Updated — February 28, 2011 @ 1:59pm

by Jeff Byrnes

So, it seems that the recent release of Flash Player 10.2 has some issues on Mac OS X when trying to upload to SlideShowPro Director.

If you encounter any trouble uploading files to your SlideShowPro Director interface, head on over to this link to download an updated release to fix it.

You can read more details at SlideShowPro’s site.

Tags

compatibility, Flash, SlideShowPro

Comments

View & Post Comments

An Easier Canvas to Draw On

October 22, 2010 @ 9:20am

Updated — November 4, 2010 @ 9:45pm

by Jeff Byrnes

Spotted this one courtesy of Think Vitamin, it’s called Ai->Canvas, and it’s an Illustrator plug-in that exports to an HTML5 canvas element. Very cool stuff.

Basically, you make your shapes in AI, export using the plug-in, and the necessary code to draw your shapes is generated. You can even do animation with it, which is definitely very cool.

For those who haven’t yet read up on it, the canvas element is a JavaScript-based method for drawing vector-based images, which is exactly what Illustrator outputs. So the two are a natural match.

If you’d like to read up more on canvas, the best resource I’ve found so far is Mark Pilgrim’s chapter on canvas at Dive Into HTML5.

Let us know if you build anything cool using AI->Canvas!

Tags

Adobe Illustrator, canvas, code, HTML5, javascript, Web Development

Comments

View & Post Comments

My new favorite: HTML5 Boilerplate

October 8, 2010 @ 12:31pm

Updated — November 4, 2010 @ 9:44pm

by Jeff Byrnes

So, this popped up on my radar a few months ago, and has been absolutely indispensable for building sites using HTML5. It’s called HTML5 Boilerplate.

It’s not a framework, which I’ve found can be constricting in how you build out a site, but instead gives you a great jumping off point. The site itself has a great list of why it’s cool, but here are my favorites:

The index sets out some great precedents to follow, namely putting as much, if not all, of your JavaScript in the footer (even jQuery itself!), having a local fallback for your CDN-served JS library, but otherwise is a blank slate for you to work on.

I highly recommend giving it a try for your next project.

Tags

HTML5

Comments

View & Post Comments

HTML5 amazingness

September 24, 2010 @ 12:11pm

by Jeff Byrnes

So Microsoft has turned the publicity machine up to 11 for the IE9 beta release, and there’s some truly impressive pieces that have come out of it. Most notably, the Lost World’s Fairs! These are three graphically and programmatically impressive pieces, using all manner of techniques. The two most impressive to me, however, are the Atlantis World’s Fair and the El Dorado World’s Fair.

Both sites are long, vertical layouts, taking advantage of absolute, relative, and fixed positioning, Typekit for rich typography, Modernizr to make sure things play somewhat nicely in less capable browsers (IE7 & IE8, for example), and jQuery as their JavaScript library. Both also utilize Lettering.JS, a rather interesting piece of JavaScript they developed to enable, as they call it, “radical Web Typography.”

Lettering.JS takes whatever element you hand it, parses through it, and provides you with a series of individual <span> tags for each of the letters in your element. So, using their example, you can provide it with this:

<h1 class="fancy_title">Some Title</h1>

And you’ll receive this:

<h1 class="fancy_title">
  <span class="char1">S</span>
  <span class="char2">o</span>
  <span class="char3">m</span>
  <span class="char4">e</span>
  <span class="char5"></span>
  <span class="char6">T</span>
  <span class="char7">i</span>
  <span class="char8">t</span>
  <span class="char9">l</span>
  <span class="char10">e</span>
</h1>

Seems like it just makes span-itis, right? Think again. Each of those spans can now be individually styled, which, when you look at their examples, suddenly grants you the ability to do some very impressive pieces of work. Yet, it leaves your markup nice, clean, and easy to maintain.

Lettering.JS goes two steps beyond just the letter-wrapping, offering the ability to create <span> tags that wrap whole words or even whole lines. The line wrapping takes its cues from <br /> tags, so this:

<p class="line_split">
    Line 1<br />
    Line 2<br />
    Line 3
</p>

Becomes this:

<p class="line_split">
  <span class="line1">Line 1</span>
  <span class="line2">Line 2</span>
  <span class="line3">Line 3</span>
</p>

Taking a look at Atlantis World’s Fair and El Dorado World’s Fair, you can see just how impressive this technique can truly be. The markup is super clean & relatively lightweight. To avoid a FOUT (Flash of Unstyled Text), they do have their JavaScript loading in the <head>, but even with that, things still load quite rapidly.

Seeing as IE9 can handle pages like these just as well as Firefox 3.6+ and Safari 5+, it seems like the web is about to get a whole lot nicer.

Tags

CSS3, HTML5, IE9, javascript, jQuery, typography

Comments

View & Post Comments

HTML5 video solutions

August 17, 2010 @ 3:33pm

Updated — August 20, 2010 @ 8:23am

by Jeff Byrnes

So everybody’s excited about HTML5, and the native media capabilities it brings; specifically the <video> tag. But at the moment, support is a bit tricky. To quickly reiterate:

So, as you can see, things are all over the place. To properly implement HTML5 video, we need to supply two video files: one file encoded with H.264/AAC contained in an MP4, and another encoded with Theora/Vorbis contained in an Ogg. It would also be wise to create a WebM version of your video as well, to future-proof yourself for the day when Theora is deprecated completely.

Now, once you’ve got your video files encoded, the matter of embedding them correctly raises its ugly head. Thankfully, there are a few ready-to-go solutions for this.

First up is Video for Everybody, created by Kroc Camen. VfE serves up HTML5 video (MP4 and either Ogg or WebM) without JavaScript. This is the very first solution put forth for easy HTML5 video support, and, as Kroc himself writes, should in no way be considered a long-term solution. But he’s being very forward-looking, and not very generous with his work. The primary goal with this player is to use no JavaScript, and thus make it as widely compatible as possible (think RSS readers & other JS-disabled avenues.)

Next, we’ve got Video JS, which, true to its name, relies on JS. However, unlike VfE, the controls are consistent between platforms, which is definitely a marked improvement.

The third and, in my opinion, most promising ready-made solution for HTML5 video is SublimeVideo by the gurus over at Jilion. This is a player with not only a consistent UI, but tons of additional features, a full-window mode (and a full-screen version in Safari!), and it’s being neatly packaged up. Unlike the other two, however, it’s still in-progress, and it will only be free for non-commercial use.

So there you have it folks; some readymade HTML5 video solutions; enjoy!

Tags

HTML5, javascript, video

Comments

View & Post Comments

Facing the (Font) Future

August 6, 2010 @ 4:14pm

Updated — August 16, 2010 @ 8:37am

by Jeff Byrnes

It seems as though the technology for representing fonts on the web are finally coming to fruition. With the W3C’s near-adoption of the WOFF format (it has remarked that “…it expects WOFF to soon become the ‘single, interoperable format’ supported by all browsers.”), @font-face seems poised to become the firm technology for embedding fonts in a site.

Previously, techniques like cufón & sIFR were the best way to deploy a font not commonly installed across all systems, or to guarantee a particular font is used. These required JavaScript alone at best, or a combination of JavaScript & Flash.

So with that, I give you the most bulletproof, known as the smiley variation, way to deploy @font-face to your site (courtesy of Paul Irish):

@font-face {
    font-family: 'Graublau Web';
    src: url('GraublauWeb.eot');
    src: local('☺'),
         url('GraublauWeb.otf') format('opentype');
}

It’s always good to know how it all works, so definitely head over to Paul Irish’s article, but you can use Font Squirrel’s @font-face generator to simplify your life.

Now, however, the biggest hurdle is the licensing. Since we are basically allowing for the downloading of the font files, things can get a bit sticky. Thankfully, many of the font foundries are coming around and crafting new licensing, and even creating web versions of their typefaces. At the very least, they’re joining forces with other JavaScript-based solutions like Typekit and Fontdeck. We’ll see how it all turns out.

Tags

@font-face, CSS, CSS3, cufón, fonts, sIFR, typography

Comments

View & Post Comments

Resolution Dependence, or why it’s ok to have different layouts

July 30, 2010 @ 4:38pm

by Jeff Byrnes

Recently, I came across a really brilliant technique, resolution dependent layout. I’ve been exploring this technique a little bit, and definitely want to discuss & highlight some awesome uses of it.

This is especially useful for tailoring a site to a mobile device, and since all of them run on a WebKit-based browser, they can all understand @media queries, which is the crux of this particular way to accomplish this.

With that said, there’s two ways to do this:

  1. Using @media queries in a <link> for a resolution-specific CSS file
  2. Using @media queries inside a single CSS file.

I prefer the second method, but others who prefer multiple files vs. a single file for CSS can use the other. And we can do anything based on different devices, not just change widths, layout, etc. As another note, you can do checks for device-width or width (i.e., viewport width). Both will be useful, as we can use device-width queries to check for a particular device or class of devices.

As an example of a site that has a different layout based on the viewport width, check out Simon Collison’s website, Colly. If your viewport is set to ~950px wide or greater, we have the default layout: full-width, four-columns. However, as your shrink your viewport down width-wise, the layout changes to a two-column display, then finally to a one-column display where the single item is slightly larger in width than the single items are in the two- or four-column views. All-in-all, a rather lovely design to my eyes, but I’m sure my colleague Kyung could offer a more thorough critique in that arena. It’s a fascinating aesthetic, the whole “Celebrated Miscellany” idea. It reminds me of an old science journal, like something Darwin or Audubon might have drawn.

So how does he do it? Well, in this case, “Colly” has a series of @media rules at the very end of his stylesheet. Here’s one of the bits we’re talking about (edited for brevity):

@media (min-device-width:1024px) and (max-width:989px),
       screen and (max-device-width:480px),
             (max-device-width:480px) and (orientation:landscape),
       (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) {
    div#page { width:468px; }
    .home ul#navigation_pri, .home ul#subnav-b { padding-bottom:30px; }
    …
        div#siteinfo p { font-size:14px; }
}

First off, to have this work at all, all of the CSS rules that would apply for this particular @media query need to be encapsulated between the brackets for the query, as if it were regular CSS rule itself. As for the query, it’s asking a number of different questions to cover quite a few bases; this particular piece of CSS covers the “less than ~950px viewport” eventuality. On a mobile device, this view comes into play if an iPhone is in landscape mode, or if an iPad is in portrait mode. The other, single-column view comes to pass if an iPhone is in portrait mode (and it fits just right), or if you shrink the viewport of your browser down far enough.

The second @media query looks like this:

@media (min-device-width:1024px) and (max-width:509px),
       (max-device-width:480px) and (orientation:portrait) {
    div#page { padding:30px 0px 10px 0px; width:306px; }
    …
}

It’s considerably simpler, as it doesn’t have to ask as many questions about your viewport or device width, since it’s really only going to activate on either an iPhone or other mobile phone, or if you shrink the viewport on a desktop browser; the iPad can’t change it’s viewport size, so it will never be presented this view. With that in mind, the first part of the query takes care of desktops, while the second handles the smaller display devices.

So there you have it folks, the ability to craft resolution dependent layouts and styles. Pretty spiffy stuff.

Tags

CSS, CSS3, iOS, iPhone, resolution dependent design

Comments

View & Post Comments

Add Audio with PodPress

February 10, 2009 @ 10:40am

Updated — April 7, 2011 @ 10:58am

by Jeff Byrnes

Here are the steps to follow when adding an audio or music file to your Wordpress blog when using the PodPress plugin.

The first step is to upload your media file by clicking the small music notes icon. After uploading, don’t worry about inserting into the post.

Add New Post

Next, you want to scroll down the add/edit post page until you see the Podcasting Files section. Click Add Media File to start the process.

Add Media File

Now you’ll see the screen change and more options will be displayed on your screen. Go to the Location drop-down menu and find the file you just uploaded. Be sure to also add the Title as well.

Location

Finally, you should click on Auto Detect to the right of both Size and Duration, and then you can go ahead and publish your post!

Tags

WordPress

Comments

View & Post Comments

Encode FLV Video Files

October 10, 2008 @ 6:10am

Updated — April 7, 2011 @ 10:59am

by Jeff Byrnes

So you’ve got a custom video player for your site (maybe it’s an open source thing, or SlideShowPro, or one a developer built for your needs). The problem with most of those solutions is that they require you to upload videos in the .flv format, which not every video application can just crank out. Of course, if you’re only concerned with catering to those using the Flash browser plug-in’s version 9 and higher, then you can serve up .mov videos in Flash, as long as they are encoded with the h.264 codec.

For those who are tempted with that option, but would like to stay compatible with as many of their site visitors as possible, read on, and you’ll be crunching .flv files like it’s hot.

*NOTE – There may be better free FLV encoders out there (please let us know about them!), but below is at least a couple solutions for those wishing to convert video files to .flv encoded files.

If you have Flash CS3 (for Mac or Windows)

…then you have the Flash Video Encoder application, which can be used to convert a file from .mov to .flv with the following steps;

  1. Click the “Add…” button
  2. Click the “Settings…” button if you want to tweak the quality of the encoding, but the default is okay.
  3. Click the “Start Queue” button
  4. The video is now encoding to .flv
  5. When complete, the .flv file should have the same file name, and reside in the same location on your computer as the .mov file.

For more detailed and official information, check out the “Encoding video with Flash Video Encoder” article from Adobe’s Flash Video Encoder User Guide.

If you don’t have Flash CS3 (for Mac)

…then please read the following instructions;

  1. You must first download an application that will encode .mov to .flv, and luckily there is a free one to use;
  2. Double click the ffmpegX.dmg file
  3. Drag the ffmpegX.app file to your Applications folder
  4. Double click the ffmpegX.app file
  5. Go to http://mjpeg.sourceforge.net/MacOS/ and find the link “mpeg2enc.intel” on the page
  6. Right-click the “mpeg2enc.intel” link and choose “Save Linked File As…”
  7. Choose the ffmpegX folder in Applications and click “Save”
  8. In the pop-up window asking if you want to Save Plain Text, choose “Don’t append”
  9. Go to this web address; http://prdownloads.sourceforge.net/mplayerosx/ffmpegXbinaries20060307.zip
  10. Double click the .zip file and move the files to the ffmpegX folder in Applications
  11. Back in the ffmpegX application’s window, click “Locate” for each of the three sections and choose the ffmpegX folder and locate the specified files
  12. Click the “Install” button
  13. In the new window, click “Open…” and locate the .mov file you want to encode
  14. Back in the ffmpegX window, choose “FLV (Flash Video)” for the Target format’s “To” field
  15. Go to the “Video” and “Audio” tabs to tweak the quality settings as desired
    • The default settings are no good, so at least change the following;
    • VIDEO
    • Video Bitrate = 800 kbit/s
    • Video Size = Use the same dimensions as the existing Quicktime movie (This program doesn’t automatically take care of this for you)
    • Autosize = 1:1
    • AUDIO
    • Audio bitrate = 192 kbit/s
    • Sampling = 44100 Hz
  16. When finished tweaking the settings, go back to the “Summary” tab and click “Encode” in the lower right
  17. The .flv file should now be created in the same location as the original .mov file.
    • Please make sure to change the filename so that the end of the new .flv file, “.mov.ff.flv” gets replaced with “.flv”

The information above was drawn from ffmpegX’s official instructions.

To play FLV files on your computer (for Mac and Windows)

…to check/view the contents of an FLV file;

*NOTE – .flv files will playback in those two programs, but they will not show up in the right dimensions (they’ll stretch to fit the application’s window) with Eltima’s solution. Only Wimpy’s application will show the .flv in the correct video dimenions, and it will do so automatically.

Tags

video

Comments

View & Post Comments

RSS Feed

Be notified of all our tweets, news stories, blog entries, and support articles.

Categories

Click below to filter blog entries.

All Blog Entries

Blog Archives

2011

2010

2009

2008

More Info

Are you using today's web platforms to engage your target audience and boost profits?

From designing web sites and brands to social media marketing and public relations, Elative has you covered.

How We Can Help You