That was the total mileage that we drove when going to Magnolia Springs, AL for my sister-in-law’s wedding and back to Holly Springs, NC. Aside from there being some “rules” that were set (not by me, mind you – no music, stopping every two hours, etc), I had a LOT of time on my hands.
Now – I’m not sure you guys would notice, but being a visual person, I noticed a difference in the fonts used on highway road signs from state to state. Fascinating, right? Yeah – I know – no need to say anything. :)
So it made me want to do some research on this, and if there was a font used – what it was, and why the change?
In my searching I stumbled upon this article by Joshua Yaffa of the New York Times. Yes, it was written a LONG time ago (2007), but it’s still interesting. The picture to the right is by Don Meeker and shows the difference between what was and what will be.
The font series that is currently used, but slowly being phased out, is called FHWA Series fonts, which is fondly, but not officially known as Highway Gothic. It’s a series of seven fonts developed by the US Federal Highway Administration and originally published in 1945.
The fonts (A – F, with a modified E makes seven) are used around the world in its various versions. FHWA Series font A has been discontinued in the United States, as it was the narrowest of the seven and hard to read. Below is a sample (found on Wikipedia) of a few different fonts currently used in the United States. Look at Series B – Series A is narrower than that – so you can understand why it was discontinued state side (although it’s still used in countries like New Zealand, where they have some REALLY long names).
So this font was good and was used until 2004, when the Federal Highway Administration approved interim the use of the new font, Clearview by Don Meeker. Why develop a new font, when the other was working for the last 60+ years? Well – it had to do with the legibility when it was dark and the halo affect from the 3M tape used to make it reflective. When you make it reflective, it blooms, and what was crisp edging become almost indiscernible fuzzy clouds of letters (image to the right – from NYT slide show – What’s your sign?) Never thought of that while you were driving at night, did you? I know I didn’t.
The image to the left shows the comparison of the commonly used FHWA Series E-modified overlaying the comparable Clearview 5-W (from the same NYT slide show). There you can see the difference. The white is taller, and larger open spaces at font terminations and open spaces.
How cool is that??? Something as simple as a font used on highway road signs. Really, sometimes it doesn’t take much for me.
You should start to see this font being used as 20 states (as of 2007, so more than likely more than that now) will be using this font as they update/replace highway signage. Don’t be surprised to see this font popping up elsewhere in corporate marketing as this font has more applications than just high way signage.
Not any more! This week has been a bit hectic - the launch of our cloud sitelet/zone
(you should go check it out, by the way, AFTER you're done reading this blog entry), meetings out to wazoo - and part two in a four part lecture series that I attended yesterday. Needless to say, it didn't seem like a very productive day, but a lot ended up getting done. Just not this blog entry.
And I will digress from Cloud to this weeks topic - drop shadows.
I've seen an increased trend lately of drop shadows in our tech art, which is not a part of developerWorks' graphic style, period. There is no getting around this, and it's better to understand this upfront, so you can avoid such elements and turn in clean screen caps and get published in a timely manner. If you don't - we WILL send them back to you for recapture without drop shadows and will delay publication of your piece.
Why will we send them back to you? Because it's easier for you to recapture your screen shot than it is for us to spend all day removing them. Hopefully, while you're recapturing them, you think to yourself - I won't use drop shadows next time and avoid this rework. Maybe one of these days I will walk you through, step by step what we do to remove drop shadows, so you can see the time intense work that goes into it - maybe next week - but this week - I'm going to go over the simple settings that you will need if you're using a great little program called Snag-It to take your screen caps.
Snag-It is a screen capture program offered by TechSmith
. I highly recommend it, because it's simple to use, intuitive, and does the job for a reasonable price. Now that I'm done pimpin' their software, we'll move on to what settings you'll use when enhancing your screen captures.
Say you want an arrow on your screen cap to point something out. Make your screen cap with SnagIt, and in the SnagIt Editor, select Paint Tools > Arrow Tool. Click the Style button, and select the first arrow. Set the Width to 1 and the Opacity to 100 (the default), check Antialias, and uncheck Drop shadow.
That last part is CRUCIAL - antialias will smooth out the pixels, making lines smooth instead of a jagged step look - and by UNCHECKING the drop shadow box - you will not run the chance of having drop shadows! BRILLIANT!
Let's continue on with our brilliance - what do you think?
Now say you want to emphasize an icon or other portion of your screen cap. Again, make your screen cap with SnagIt, and with the SnagIt Editor, select Paint Tools > Shape Tool. Select the shape you wish to use, preferably a rectangle or circle. Set the Width to 1, the Opacity to 100 (the default), check Antialias, and uncheck Drop shadow.
Noticing a trend here? Again, we checked the antialias box and UNCHECKED the drop shadow box.
I know, what we ask for is SO HARD, and we are INCREDIBLY demanding. /sarcasm
BUT with this nitpicky attention to detail, we've been able to bring you clear, readable graphics to accompany our content - which you seem to appreciate, since you keep on coming back and reading it.
So until next week, I wish you good productivity and excellent time management and will see if I can't eek some of both out for myself.
So it’s been asked, more than a few times… How do you come up with a feature graphic? I’m not exactly sure how to explain it. It’s like explaining how to ride a bike to someone who has never ridden a bike before.
So to show you guys what we’re up against, I’m going to, probably for the next few weeks, pick a blurb from of our featured content, post it and I want you to read it and then tell me what keyword(s) pop out at you that could inspire a creative feature graphic. Then, next week, I will post the feature graphic that was created with a few words on why that word(s) popped out to me/us.
How does that sound? Like fun? It will be interesting to see what you guys see that I didn’t…
This weeks blurb is…
“This article describes how you can use a user exit to extend Optim Performance Manager to integrate DB2 for Linux, UNIX, and Windows database monitoring with enterprise monitoring
systems, using the Simple Network Management Protocol (SNMP) for system and network monitoring. The user exit is a simple general purpose mechanism that can be
configured to call any executable program making it possible for you to use DB2 database performance alerts in a wide variety of ways.”
You thought I was going to post yesterday, didn't you? lol FOOLED YA!
Anyway - my question of the day is this: What do you when you need inspiration? How do you keep those creative juices flowing?
Everyone is creative - just in different ways. Developers use coding to create creative solutions to a problem, where as designers use pixels, artists use paint, charcoal, crayons, markers to show their creativity. Creativity can be subtle or screaming loud. How I'm creative is different from how you're creative.
But at some point we all come to a screeching halt, and the creative juices stop flowing.
What do you do then?
Me? I stop. If I've iterated designs to the nth degree, I just stop with what I have, submit whatever I was working on for review, and wait to see what happens. The worse thing that can happen is that they don't like what I've done, and I'll have to start over. Not ideal, but something I can work with. Maybe they will come back with more CONSTRUCTIVE criticism or feedback
and it will spark an idea and I can move forward, maybe they won't. Either way, I've given myself the most important thing to get the creative juices going - TIME.
Creativity is like a muscle - you need to exercise it to make it better; but like REAL muscles, there comes a time when you just can't do any more. You need a break, time for your muscles to recover from running 26 miles, biking 50 miles, or being creative for 3 days straight. Basically, it's your creative side telling you that your "creative muscle" need a break. You've been thinking too hard on this one thing and you need to focus on something else, watch tv, take a nap, do something analytical if you were being creative, or creative if you were being analytical. Take a walk outside, go get some ice cream, fish, have lunch - do SOMETHING that's no way related to what you were doing before. Just stop thinking about it.
My go to? I knit. After pushing pixels all day and some of the night - I want something tangible. A finished object that I can touch, feel and say - "I did this".
What do you do to give your creative muscle a break? How do you keep it toned?
Trying to string together words to get sentences, that will actually have some sort of meaning this week has been difficult. How? Not sure, but for once I've not had a lot going on that I've been wanting to comment on. Usually something comes up during the week that I feel the urge to comment on, and this week - NADA.
So digging deep - contrast popped out at me, which is a bit ironic because the contrast I'm speaking of is defined as the ratio of the luminance of the brightest color (white) to that of the darkest color (black).
Notice the difference in the flowers? Which ones look better, brighter, more inviting?
Now that I'm done showing off my Photoshop "skillz" - next week - more about contrast and why it's important with graphics.
Every year, about this time, a good friend and coworker of mine comes to me and says - you going to the career fair this year? And how can I tell Barb no? As much as I groan about it, it's kinda' fun - but after I've run through my spiel about a dozen times, I'm ready for a break.
A local high school has a career fair for sophomores and juniors. They get to miss class (this year it was Civics and English) to listen to various talks about the various jobs that are out there, to help them get an idea of what they want to do when they "grow up". I obviously was talking about graphic design, but we had editors, and web developers show up to talk about what it takes to put a site together - specifically our site, developerWorks, but there were also some generalities. Some of the kids are curious and ask questions, which is a lot more fun than the ones that are comatose - but what can you do?
Barb is great - she always has fun hats and lots of goodies. Can't wait 'til next year!
And that is why this blog post was late - I was catching up on my "homework" after a morning/afternoon of fun.
Well - this is lovely. My blog post got eaten, and now I will try to recreate -
My husband and I were out digesting at Wal-mart after dinner (don't ask, it's just something we do, because we love the Wal-mart).
And I came across this in the camping section...
Interesting, no? It's a folding aluminum table! We have one on our patio for our little Webster grill, but again, that's besides the point... look closer...
Do you see it now? The "Spanish Here" SHOULD ACTUALLY BE SPANISH!
Let this be a lesson - you should ALWAYS proof your work, doens't matter if it's graphics or not or even SPANISH or not, just proof it.
My name is Victoria Ovens, and I'm the graphics team lead for developerWorks, and this group and blog is a way for you to peek "behind the pixels" of devleoperWorks and ask any questions that you may have. I can't say I'm going to ONLY talk about graphics on developerWorks, but that is the main focus. So yes - in the intro paragraph, I'm giving myself permission to digress, and will probably do so regularly.
My plans are to update this blog weekly on Wednesdays. So here I am, setting expectations early and hoping I meet them. Nothing is worse, in my opinion, to have a blog, blog a few times, and then.... nothing.
SO - with intros out of the way and expectations set, I hope to educate, occasionally entertain, and ultimately try to make developerWorks better, one pixel at a time.
Ok – so July has come and gone and amazingly enough, I only blogged once. I’m sure you’re INCREDIBLY surprised after reading my May post. Unfortunately, I can’t say crazy travel and or personal/family drama had anything to do with my absence in July. No, it’s as simple as work, and there was more work than there were hours in the day, and I apologize to the regular readers (if there are any of you) for not keeping to my simple goal of blogging once a week on Wednesday. So let’s try this – a simple blog MONDAY AND WEDNESDAY. I know people, watch out.
So last MONTH (sheesh), I posted an abstract and got some REALLY good suggestions from vskinner, Richard_Carter, and emilynicholls. SO GOOD, in fact, it made me wonder if I needed to go back and redo my feature! lol. BUT – the abstract was
Predictive analytics helps to find non-obvious, hidden patterns in large datasets. Current tools for predictive analytics, such as SPSS (an IBM company) or IBM InfoSphere Warehouse, expect data to be represented in an appropriate way before the actual analysis can take place. This is, however, not always the case. Especially data in SAP systems is not directly accessible to these tools. This article shows how IBM InfoSphere Information Server can be used to extract data from SAP systems for analysis within InfoSphere Warehouse and SPSS PASW Modeler.
So where their suggestions of star constellations, sea shells, or optical illustions are VERY interesting, this is what I found… a repeatable pattern that you MIGHT see, but is mostly hidden. The big words for me were non-obvious hidden pattern, and what could I find that had a pattern that wasn’t very obvious? Can you see the pattern? It’s kind of subtle and the only tell tale signs for me where the repetitious animals in there. Not that I expected any of our viewers to sit there, staring at this feature trying to figure out the pattern in the 170x120 pixel graphic.
SO – until Wednesday…
A question was posed to me this week that has been asked a few times – How do you code inline graphics in developerWorks’ XML template?
First off – what is an inline graphic? It’s a graphic that is “embedded” within in a text document. We usually see them as icons, and aren’t typically bigger than 24x24 pixels.
Secondly – they are used by authors to not have to create a separate figure within the content with a caption, etc.
Now that’s been cleared up, I will state that developerWorks’ XML template doesn’t like inline graphics. Why? not sure, but when you include them, it pushes them up about 5-7 pixels, which will break up line spacing in paragraphs and is visually jarring, if you ask me. See?
Now – what can you do to combat this not-so-nice-look?
How about a table?
This would work if you had more than one icon that you wanted to include and has a nice clean look to it. So, how is it coded in XML for our developerWorks’ template?
<table class="ibm-data-table" border="0" cellpadding="5" cellspacing="0" summary="oXygen toolbar" width="95%">
<caption><em>Table 2. oXygen toolbar icons</em></caption>
<tr class="tb-row" valign="top">
<img width="25" height="29" src="oxyiconsave.gif" alt="oXygen save icon"/>
<td>Saves any unsaved files and projects.</td>
<tr class="tb-row" valign="top">
<img width="25" height="29" src="oxyiconspell.gif" alt="Launch spell check"/>
<td>Checks spelling, and offers a great many options.</td>
<tr class="tb-row" valign="top">
<img width="25" height="29" src="oxyiconfind.gif" alt="oXygen find/replace icon"/>
<td>Finds and replaces text strings.</td>
What other options are there?
Definitions list – but upon testing that, it was discovered that it doesn’t like images! So cross that off the list.
- Unordered list – yes, this does work, but does it look nice? Hmmm.
Not so much – does it? There is still that pesky 5-7 pixels that it pushes the images up, but it could still be considered a “workable” option.
What if you only have one image? A table or list wouldn’t really make any sense… so then what?
My last suggestion to you would be try to put it on the first line of the paragraph. This way that 5-7 pixel won’t interfere with the line spacing of the paragraph. How? Like this:
<img width="25" height="31" valign="bottom" alt="Associate schema icon" src="oxyassocschema.gif">
You would put that code right in your sentence and all of the sudden, you will have an inline graphic.
I know last week I spoke briefly about contrast from a visual sense and how that effects an image, and draws a viewer in. In the course of doing that, I "discovered" there are different TYPES of color blindess. Under these types, there are underlying catagories "based on the number of primary hues needed to match a given sample in the visible spectrum." [1
] So depending on the color blindness and the subcatagory of it, it will completely affect how an image will appear. The sub catagories are monochromacy, dichromacy, and anomlous trichromacy. I'm not going to go into the details on each, but rather the visual effects some of the subcatagories have on visuals - but if you're interested in more details, Google it.
This kind of blew my mind, because all that I've ever heard of is red-green and blue-yellow. So if you take a rainbow and how a normal person would see it, it would look like this:
If a person has no perception of red what so ever, which would be a type of dichromacy, and red would appear dark, almost like a dark brown:
If a person has no perception of green, it will also affect the ability to tell the difference in the red and green hues, which mean the yellow and blue pigments are the primary colors seen:
AND THEN if there is a total absence of blue pigment receptors the rainbow will look like this:
Fascinating stuff, isn't it? A bit mind boggling at the same time. But why is this important to consider, as a designer, as a developer? Because we put stuff on the web to be consumed, and we want it to be consumed by everyone and be accessible to everyone, and we can do that with contrast, "the percieved difference in colors that are in close proximity to each other" [2
There are different ways to approach this. Some designers will start a design in black, white, and shades of gray. Others would use tools like graybit.com [3
] or Color Scheme Designer 3 [4
] to make sure the color scheme would work. The latter sucked me in for a bit, as I played with it - good times.
I also tested some of our current feature graphics with Fujitsu ColorDoctor [5
] to see how we've done with our contrast in the grayscale conversion, and I've noticed that we need to up the contrast on the background color, for some of them.
We've got a bit of work to do, but learning new (to me) stuff is fascinating!
Now I know when I set up this blog, I set up the expectations that I would blog weekly with postings on Wednesdays. This month, I failed, miserably. This little thing called life got in the way, and where they might (and probably do) sound like excuses, let me tell my tale of the last three weeks, and then you decide.
May 1st – my father-in-law (FIL) had chest pains and went to the urgent care. They sent him to the hospital where he spent the weekend.
May 4th – At about 6:45am, they cracked open his chest and performed a double bypass. If he had waited and hadn’t gone to the doctor, like most people, he would have died. Which wouldn’t have been good, for anyone.
May 5th – We’re one week out from my husband’s sister’s (SIL) wedding. I’m trying to keep the bride from flipping out and planning how we would get my FIL to my SIL’s wedding, without even knowing if the doctor would let him go or if my FIL would even feel up to it. Was I distracted – heck yes!
May12th – I’m packing and getting things together, and generally running around like a chicken with my head cut off so we can leave (hopefully) with my husband and in-laws to go to the wedding. Still no final answer from the doctors at this point, but we’re all optimistic.
May 13th – 9am – My FIL goes to the doctor and gets the ok to go. (YAY!) He can’t sit in the front seat (airbags after open hear surgery = DEATH which is BAD) and has to get out and walk around every 2 hours. We can do this. We start out on our 830 mile trek down to Magnolia Springs, AL. I should also mention that I’m the one driving, so I’m not on the computer.
May 15th – 6:30 pm – THIS is what made it all worth it (picture on the left). Getting a dad to the wedding so he could walk his youngest daughter down the aisle and give her away. Hard to believe that this man, not 11 days before was laying on an operating table with his rib cage cracked open. He had a lot of reasons to stick around; this wedding, and the next one is due in 6 weeks. Yes – the first grandchild. Amazing what the human body can do.
May 16th – After a brunch at the new in-laws house, and our good-byes, we start out on the 830 miles BACK to North Carolina. Got 4.5 hours away from home and decide to stop.
May 17th – We arrive home around lunch time and send his parents on their way back home to the beach. We veg for the rest of the day -and no, I didn’t think about blogging.
May 18 & 19 – I start unpacking and repacking for my trip to wedding #2 while trying to catch up and get ahead while I’m out. This time, I’m flying with my parents and little sister to my cousin’s wedding in South Bend, IN. Yes – she’s getting married at Basilica of the Sacred Heart on the campus of Notre Dame.
May 20th – I left at 8am to head to the airport to catch a flight to Chicago and then rent a car to drive to South Bend. Thankfully, I’m not do any of the driving this time.
May 21st – I’m off and killing time before the rehearsal dinner. We head over to the Notre Dame outlet store and pick up some ND swag. Other than that – besides dodging rain drops, it was relatively uneventful
May 22nd – The day of the second wedding. It was 27 years since I was last in this church, for my aunt and uncle’s wedding. 27 years, 11 months, and 3 days according to my uncle. It’s beautiful. This is what I think every church should look like and is what it looked like from my seat, 4 pews back, on the brides side. The day started early and ended late. it was a beautiful ceremony, the reception was fun, the food decent, and I’ll remain mum on the cake.
May 23rd – We’re driving back to Chicago to catch a plane and head home. I’ve never been HAPPIER to walk in my own house and sleep in my own bed.
May 24th – I need to get my HD re-imaged and reinstall all the software,settings, etc. The joys of this week just keep on coming.
So three weeks later – I ponder what I can blog about… so I’m hijacking this post for personal reasons, but my next post… will be about something I saw a lot of in my travels – and no, I’m not talking about roadkill.
…Through rich media! This is what I was writing about last week, and if you caught it – you saw a link to where it was used. If not – it’s time for you, the reader, to play catch up. Don’t worry, I’ll wait…
[Insert muzak here]
You back? Awesome! Pretty neat, huh? Now you might be wondering what do you need to put together submit to us, with your content, to exponentially increase the coolness factor to your content (as long as it’s relevant). This blog post will help with that.
What we'll need from you before we can embed any sort of rich media within any content on developerWorks is noted below. I will also probably add a wiki to the group, so I can post things like this and they can be easily found without digging through past blog posts.
We will be hosting all rich media content on the developerWorks' channel on YouTube, because currently developerWorks does not have any servers that are optimized for hosting/streaming rich media content. I should also mention, there are no future plans to ever obtain or optimize any current servers to handle this sort of thing, and really, when there is a site that does it so well, so easily – why would we need to? Moving on!
|Video || |
|Resolution ||RECOMMENDED: Original resolution of your video – for HD is 1920x1080 (1080p) or 1280x720. |
|Bit rate ||Because bit-rate is highly dependent on codec there is no recommend or minimum value. Videos should be optimized for resolution, aspect ration and frame rate rather than bit rate. |
|Frame rate ||The frame rate of the original video should be maintained without re-sampling. In particular pulldown and other frame rate re-sampling techniques are strongly discouraged. |
|Codec ||H.264 or MPEG-2 preferred. |
|FLV, MPEG-2, and MPEG-4 |
|Audio || |
|Codec ||MP3 or AAC preferred |
|FLV, MPEG-2, and MPEG-4 |
|Sampling rate ||44.1kHz |
|Channels ||2 (stereo) |
Now that you have that – what file types are accepted?
Here's the list of some well-known formats which YouTube supports:
- WebM files (Vp8 video codec and Vorbis Audio codec)
- .MPEG4, 3GPP and MOV files - (typically supporting h264 and mpeg4 video codecs and AAC audio codec)
- .AVI (Many cameras output this format - typically the video codec is MJPEG and audio is PCM)
- .MPEGPS (Typically supporting MPEG2 video codec and MP2 audio)
- .FLV (Adobe - FLV1 video codec, MP3 audio)
These are the specs from YouTube and should help you when putting together and creating an optimized file. The max file size that is accepted by YouTube is 2GB or 10 min in length. If you exceed either, I would suggest breaking it up into separate sections.
Since there is no facility to re-upload videos, it's important to test your audio and video quality and that they are satisfactory before you turn it over to developerWorks. The number of views, user ratings, user comments and other community data, cannot be transferred if another, higher quality version of the same video is uploaded. So make sure you get it right!
Closed captioning is mandatory to meet IBM accessibility guidelines if there are voice-overs. YouTube can caption your video from a text transcript we can upload of the spoken content in the video. A transcript is ALSO mandatory to meet IBM accessibility guidelines, but here’s the beauty of that – the transcript that you provide for the closed captioning? Can also be included as the transcript. wa-LA! This simple text file (.txt) should be included and submitted with your rich media file. We don’t have this simple document, we don’t embed. Simple as that.
If this is something you want, contact your editor to ask for the FTP log-in info so you can upload these big files to a secure server. At which point, we’ll download, review, and post to developerWorks’ channel on YouTube in time to be included with the publish of your content.
One of the comments from last weeks post made sparked something, and got me thinking about a few of my favorite feature graphics (Thanks Bob!). Now mind you, developerWorks has been around 9 years, and I've been with developerWorks going on 4 years.
A lot has been published in that time, and I can say that in our current content management system that we have over 3000 feature graphics, which doesn't even include the feature graphics created BEFORE we moved over to this content management system. Below you will find MY top 10, ones that I'm proud of because they're kinda' cool, at least to me.
I like to play on words when it comes to feature graphics - take a word
and literally run with it, Derby plug-in, Linux on the half-shell,
using UML to create SOA... fun ways to look at technical content!
editor for the Linux zone always seems to have fun with his feature
graphic suggestions, so his are some of my favorite. And any time you
can set code on fire, at least graphically, you should. It just LOOKS
Which feature graphics have you seen lately (or not) that have made you want to click on it and see what that article was all about?