CLICK HERE FOR THOUSANDS OF FREE BLOGGER TEMPLATES »

Sunday, December 21, 2008

Div's: In a "Class" of their own

Recently, I ran into a problem with a current project of mine. While developing a dynamic news website for my University, I ran into some trouble validating the site. The problem was this:


I had created a blueprint story layout. Each time a story was generated from the database, the same layout would be used (i.e. thumbnail, title, tease) creating a list of stories down the page. The problem, then, was that if each story uses the same code, I end up with several duplicate id's down the page—each time a story occurs, in fact. Well, as you know, this will not validate because an id name can only be used once (i.e. must be unique) within any HTML document. Bear in mind that the site should still work—it just won't validate (and it's such a great feeling when things are implemented properly, plus the piece of mind that it will always work.) So, now what?


Then it occurred to me, as far as HTML goes, a div is just another HTML tag. It can be styled the same way any other block element can. In other words, the div style doesn't have to be an id. What if we use a CSS element that doesn't have to be unique?


Of course! A class! Sure enough, I replaced all of my id tags with classes, and . . . it validated! Eureka! I win. You don't need to worry about "display: block" in your CSS rule for the class because a div is already a block element, so in my case, the list of generated stories naturally positioned how I wanted them to—one stacked on top of another down the page. It was that easy. Here's what it originally looked like in the HTML:



<div id="storyBlock">


<div id ="storyTitle">*database-driven content*</div>


<div id ="thumbnail"><img src=" . . . " /></div>


<div id ="storyTease>*database-driven content*</div>


</div>



Now, the new solution:



<div class="storyBlock>


<div class="storyTitle">*database-driven content*</div>


<div class="thumbnail"><img src=" . . . " /></div>


<div class="storyTease>*database-driven content*</div>


</div>



As far as the CSS goes, it can remain the same; just change your id's to classes (i.e. switch out the pound sign before each id name, for a period like so:  #storyBlock becomes .storyBlock) You can, then, keep all of the CSS rules how they are.

Sunday, December 14, 2008

December Update

Merry Christmas fans! This month, I decided, as my Christmas gift to you, that this month will be the month of tutorials. So stay tuned; there should be some good knowledge coming your way. I will start off with CSS rollovers and work my way up from there. Note: this will include both the stackable image technique and the one known as "trifecta."
Now then, I have a little announcement to make: I just got an early Christmas Present—Adobe Creative Suite Design Premium! It includes Photoshop Extended, so all of those special 3D features that I covered in my review . . . I have! Can't tell you how excited I am. After I've worked with it for a while, I will give a full review, so stay tuned. Well, that's it for now. Happy Holidays, everyone!

Monday, December 1, 2008

Netflix and Mac: Instant Watch?


Announcing, Netflix's "Watch Instantly" feature is now supported on the mac. A while back, a friend of mine introduced me to a backdoor to a beta testing option for mac users to have access to the "watch instantly" option on Netflix. It required you to install a flavor of Silverlight onto your Intel Mac machine. Well, it looks like it's now out of beta and ready for normal use. Discouraged, because I thought that I had a bead on a little-known secret, but the secret's out. It's an official option. But as I stated earlier: it's a trick, in that you have to have an Intel-based Mac. Hooray, for my new Macbook Pro. Sorry, for those of you with the older chip :o( Well, good old fashioned dvd's through mail are still good, too.
Now, it wouldn't be fair of me to bring up this option without giving any recommendations, so here goes:
Remember, Tom Cruise when he was, like 16 years old, in that great fantasy classic Legend? Well, take a turn back in time and instantly watch the Director's Cut of Legend.
Or, if you don't want to watch a movie, check out the latest episode of Heroes. Yes, that's Heroes! Or, you can look for your favorite show and watch it, if it's available.

Friday, November 21, 2008

One-Two Punch


I have recently come into two books at work that I think anyone who uses CSS should own. Now these are advanced—not for those who are interested in learning CSS at the beginning level. For that, see my future tutorial or go to w3schools; a great resource for web training. For those who have a working knowledge of CSS and want to broaden both their knowledge and their library, these two books are just the thing.
The first book is a reference book: The Ultimate CSS Reference
It will cover your CSS technical knowledge and specs. Not only does this book contain a great compendium of CSS information, but for each selector, or feature, it gives you a chart containing: 1) What version of CSS it belongs to, 2)level of support in the major browsers (great "heads-up" reference for potential Internet Explorer issues), and info on inheritance properties. A very, very handy book and a great tool for web development and browser testing.
It is put out by Sitepoint, another great site for web development knowledge.
So that covers our reference needs. Now, what about expanding your CSS repertoire and furthering your general knowledge? Right hook = "Ultimate CSS Reference", then a left = "CSS Mastery"
Yep, the next book is: CSS Mastery
This book reads more traditionally, as a tutorial and explanatory-type book. It will teach you more advanced techniques and skills in the realm of CSS including greater explanation of the "box property", using CSS with "lists" for navigation, styling forms, and "flickr" style rollover fields on images, among many other things.
Together—one book for reference and one book for advanced CSS techniques—you'll have yourself a winning combo.

"One, two and he's down for the count."

Friday, October 3, 2008

What I'm currently listening to: Part 1


"Classical, in the key of 'Rock!'"

I have recently found myself in a mood for classical style music that rocks! What do I mean? You know, that kind of music that fills your soul with the emotions indicative of all the classical classics, like Kanon in D Major, while simultaneously invoking the impulse to raise your hand in the "metal" sign. *Think "Carmina Burana: O Fortuna"*
And from this disposition to rock out to something classical, I have compiled the following iMix on iTunes. The list of artists includes familiar ones, such as Sarah Brightman and Bond, and some not-so-familiar, like E.S. Postumus and Apocalyptica.
So, feel free to explore something a little bit "classical," a little bit "rock and roll":


Friday, September 26, 2008

The Fine Art of MythBusters

Q: What do you get when you combine the MythBusters, NVIDIA and the Mona Lisa?
A: Awesome Robots.
Adam Savage and Jamie Hyneman show you how to paint the Mona Lisa in less than a second—80 milliseconds to be precise:

NBC is Back!


After throwing, what can only be termed, the equivalent of an "adult temper tantrum," snatching up their toys and running home to mamma, NBC has returned to iTunes. And they have brought all of their shiny toys back, as well, including: The Office, Battlestar Galactica, and Heroes (among others). Only now, they're "shinier," offering version in HD.

This "spat" all started with iTunes sticking to its commitment to consumers to maintain the $1.99 pricepoint for all of its TV content. On the flipside, NBC wanted them to start a "value based on chronological-relevance" system, charging the $1.99 for older programming, but then raise the price for newer content, and etc. Well, iTunes simply said, "no" to which NBC responded, "Fine, we'll make our own, cause you're stupid!"

Hence, the inception of an awkardly named little program, known as "hulu". So now we have "hulu" vs the brand recogniton and market penetration of "iTunes." Sounds like a winner. Oh, and their business model? Offer content for free, but with commercials and advertising and stuff, minus the option to download and watch, i.e. you're stuck at the mercy of your internet connection via streaming data—how convenient is that! (Incidentally, there's no way you could make high-def content feasible, using streaming as your delivery model) Yeah, sounds like a winner. Hey, maybe I'm wrong. Maybe "hulu" has a very prosperous business model; it's still around, right?

All I know is that they're back on iTunes, and I couldn't be happier. The top five shows that I watched on iTunes were Lost, 24, Battlestar Galactica, Heroes, and Prison Break, with the top tier being Battlestar Galactica and Heroes, both NBC shows. So, of course, I'm glad to see them return. Let's hope that they can continue to play nice.

Thursday, September 25, 2008

CS4: It's Here



Every once in a while, a company comes out with a product release that becomes iconic. You know, the one that everyone talks about; the one that you need to have. Other versions, then, become more like the filler in between—with a stability enhancement here, and a feature addition there; still deserving of a legitimate +1 to the version release, but nothing groundbreaking. It is those landmark versions in between that seem to mark time and innovation. Well, CS4 just might be one of those releases. In Adobe's own words, this is "the biggest launch in the company's history."
So, what do they bring to the table that's so compelling?

Well, starting with Dreamweaver, they have added features that any web designer would be ga-ga about. Writing a tutorial on html, I have termed Dreamweaver an "option," not a "necessity." This new release is really putting the screws to that comment. More and more it may have laid down it's street cred as "da bomb-digiddy."

The first feature, and most "visually" obvious one, is the split-window . . . going vertical. Yep, instead of viewing your code above while viewing the design below, you can now view them in left and right panels, back-to-back. I love it! I've never liked the horizontal, top-and-bottom, layout.

Second, is the "live" preview now available. Built on the most standards compliant browser, "webkit," (for the un-initiated, this is the same browser engine that Safari uses) it allows you to view the site, in all of its functional glory, "live" right in the design window. Even better, the code updates, as the mouse interacts with the preview. That means the effects of rollovers can be seen in realtime via the code. How neat is that?!

Finally, contextual information about any given element. Translation: click on an element and all of the CSS styling rules are given for that element. From there you can drill down to the specific attribute that you want to change, and there it is in code view for you to edit. Talk about making things super-fast and much more manageable. All that CSS inheritance? Not a problem.

Now to a program which has a soft spot in my heart: Illustrator. Feature #1 - Multiple artboards. Feature #2 - multiple documents open in tabs. I like :o) And feature #3 - the "Blob Brush". This is a tool that allows you to paint like you would with a paintbrush. It then translates the blob of painted shape into a path. But even more, it allows you to also "erase" like you normally would in photoshop, and it updates the path accordingly. Same behavior when you add to it by painting more on. Way too cool.

Flash also has its set of new, cool, features like the addition of armitures to manipulate images. This is simply adding "bones" to shapes and objects in such a way that you can bend them. The example used was the image of a person. Using the appropriate tool, they clicked and dragged, click and dragged, until they had a manniquin-like set of segments which they could then bend in kind to make the character wave, jump, and so on. Then, there are some after-effects like tweeking capabilities for 3d effects and animations. All good stuff. (See it in action, at Adobe TV; look for "Adobe CS4 Launch Broadcast")

And now, finally, to the main event: Photoshop. Did they bring anything to this well-established product worthy of writing home about? Oh, absolutely. Don't lose your lunch, because its gonna be a wild ride!

The first thing that I would like to highlight is the GPU accelerated performance. In layman's terms, this means that Photoshop will now utilize your graphics card, as well as your processor to increase performance. For those of you who are like me, and have recently purchased a macbook pro, it means that you will now be tossing that impressive NVIDIA GeForce 8600M GT graphics card into the fray, to be measured alongside your core 2 duo chip, as part of Photoshop's performance horsepower.

Second, is something called "Content-Aware Scaling." What this little jim-dandy does is scales an image, when you are cropping, to maintain all of the important elements, or focal points. Think of it in terms of scaling down an image from a regular-view webpage where screen real estate isn't an issue, to one more suited for a mobile device display, while keeping all of the good stuff. An example is below:



Third, is a whole array of interesting features under the category of 3D. Many of them are under Photoshop Extended, so if you're in the market right now—something to consider. One of these 3D features allows you to stitch together photos, attatch them to a sphere object, and then have the ability to pan around a 3D space, as though you were in the center of the room. "Yes, intriguing." For sake of sanity, I won't go over all of these features, but you can check them out in the videos below, from Adobe:

There was also some talk of "non-destructive" cropping and editing thrown around, as well.

CS4 Suites will be available for purchase November 1st. If you have any more input regarding CS4, let me know, and I'll post it. Or feel free to comment. Now go out there, and be Creative!



Monday, September 22, 2008

CS4: Soon Out the Door


Adobe will be announcing the introduction of CS4 tomorrow (Sept. 23rd.) What will this new iteration of the Creative Suite bring to consumers? Not much info has been given, so it's all down to speculation. Finding a sneak peek, however, I did get a bead on one particular feature: on photoshop, the dodge and burn tool has been dramatically refined, leaving images less washed out when using the tool.  The sneak peek talks about some other small things, with the keyword being "refine;" yep, seems the main enhancement, as given by the sneak peek preview, is a "refining of tools the suite already has."
But probably the most significant feature of this new suite is the amalgamation of all applications to one universal gui—translation: Dreamweaver and Flash will now look more like Photoshop, Illustrator, and so on.
A secondary overhaul, and this is actually a biggie, is full 64-bit support. Big frown for apple fans (me, included) because this includes you, out. "Life is over; pc users will have a one up on me, an adoring mac fan." Not neccessarily. Do your homework. The way that the two platforms utilize resources does not translate straight across. In fact, you with pc's who have 4gb of ram installed? Guess what--you're blocked from using more than 2.3gb at the OS level, where your mac counterparts utilize all of their maxed out 4gb ram. This is due to how the OS parses memory. Also, bigger doesn't always translate to better. 64-bit can actually mean it takes more juice to do essentially the same thing as 32-bit. Think of it as using larger batteries on a device just to make a light blink--the size of battery doesn't matter; it may be better to save your money and get the cheaper, more efficient, smaller batteries. Rough example, I know, but you get the gist. This isn't to say that 64-bit won't give you better rendering power, but on the mac side of things, CS3 with Leopard was already quite zippy.

That's it for now. Stay tuned tomorrow when CS4 opens its curtains. More coverage is on it's way.

Thursday, August 14, 2008

Olympic size LED


What self-respecting technology blogger wouldn't mention the massive visual sweetness deployed during the opening ceremonies of the 2008 Summer Olympics?
In a world where thin is in, larger is better, and dpi rules all, the techno-envy crown goes to, none other than, China.  What's really unique is this crown jewel of the LED world was found amidst an otherwise low tech enviroment, filled with pulsating pistons, synchronized drums—and other effects—being revealed as "people-powered."
For those of you who don't know, I'm talking about the Olympic-sized LED, 230ft long and 70ft wide, literally rolled out like a scroll during the opening of the 2008 Olympics.  The opening ceremonies themselves were epic in scale and filled with grand pageantry—a sight to behold.  It was quite impressive.
But the moment which stands out for me, was when floor of the stadium visually came alive. Beginning with interpretive dancers swaying their arms on the ground to reveal that their limbs were acting as brushes to "paint," as they danced, an ancient brush painting of China's past.  Then, as more dancers came onto the scene, the specatacle continued with the floor "moving" as the scroll representing the BIG screen rolled back and forth; the whole while the images on the floor seeming to move underneath them.
 If you haven't had a chance to see it, track it down and do so. It'll be worth your while.

Wednesday, August 13, 2008

Maiden Voyage

Come one, come all! To the grand opening of "digital oddysee." I bring to you, my fellow superstars of America, the virtual travel log of one techno-artist's misadventures: full of reviews, tutorials, ramblings, and just good clean fun. This all started as a tutorial project to help my fellow artists build their own online portfolio and has grown into what you see before you now.  So, sit back, grab some popcorn, and enjoy the ride.



P.S. As for the tutorial, it's on its way very soon.