Behind the pixels
VictoriaO 06000145NY Tags:  images extrat html lotus graphics symphony document document2html 7 Comments 6,961 Views
Not sure if y'all are aware, but IBM is pushing for us (IBMers) to use Lotus Symphony these days, saying that we have our our version of a word processor, spreadsheet and presentation software, and we should use it. Or as an executive said "drink our own champange". hmph. ANYWAYS.
First things first, Symphony is NOT Word. Will never BE Word, so you should stop expecting to BE Word. It's a word processor and can string characters together to form words, sentences, paragraphs. In that essence, Symphony does it's job.
But what if you need it to do something that Word does easily, intuitively? Like extract images from a doc file?
I ran into this scenario as our newest addition to our team did not have the Office suite installed and was working with Symphony. developerWorks offers up a Word document template for our authors that are not comfortable working in XML code. When the author use this file, they also insert their images in their document. They submit it to the editors, the editors submit it to us to figure out how to extract them.
Normally, if we were working with Word, we would simply save the Word doc as an HTML file, which would extract the images and we would move along. This time wasn't normal, this time our new addition would be trying to figure out a way to extract them from Symphony.
Symphony doesn't have a "save for web" option straight out of the box - did you know that? I didn't until I opened it and tried to work with it.
What you need is a plugin. I found it! Here! And the instructions on how to install a plugin in Symphony as well. No point in you trying to find it, when it's already been found.
Once installed you will see a button at the top that will start the process on converting your document to html.
Click the document button that has a globe on it.
Navigate to the location of the document file you want to covert to html, then click Ok.
It will then convet your doc file to html, extract the images in a png format and put them in a subdirectory called html. This html directory will be housed in the same directory as the source file.
It's really very simple, once you get it figured out, found, and installed.
VictoriaO 06000145NY Tags:  developerworks photo graphics opinion question author 7 Comments 6,138 Views
In so many social media sites, you're given a opportunity to put a profile picture up on your profile, so you have a visual marker of who you are. We also like to do that with our content - we figure you put so much time and effort into your piece, you should have you picture next to it.
But here's the question that has me thinking... if you're an author and have a My developerWorks profile, would you want those pictures to be the same? Would that make you, as the author, more conscious of the picture you choose, because you would know they would be linked? Or would you not care?
As a reader, do you want to see a picture of the author? Or if it was a picture of the author's cat/dog/kid/whatever, would that matter? Would that make what you read have any less relevance or importance if it looked like a cat/dog/kid/whatever wrote it? Would you rather see a cat/dog/kid/whatever versus a default no profile picture?
Talk amongst yourselves. I'll give you a topic: Author photos, important or not. Discuss.
VictoriaO 06000145NY Tags:  graphics intro expectations developerworks 7 Comments 4,901 Views
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.
VictoriaO 06000145NY Tags:  guestblogger features top top11 graphics stephanierichardson 6 Comments 5,405 Views
Today's entry is done one of my team mates - STEPHANIE RICHARDSON.
Stephanie is a graduate of Iowa State University with a BFA in Graphic Design, minor in Entrepreneurial Studies, and an emphasis in Advertising, Marketing, and Psychology. She graduated in May of 2007 and joined our little graphics team! She was the lucky person to share an office with me, but unfortunately was moved half way across the country to sit in her home office and dream about the day she can come back. Apparently she's sick of the snow and ice, although it's not been much better here this winter!
Let's give a round of applause and see what are HER favorite feature graphics that she's created in her time here...
This one was one of my first features with dW - learning to play off of the 'keywords' of front end
Sometime i like to use layers of images to create a style and catch the viewers eye.
XML gives a lot of really great ideas for features that are always unique. It might be using a previously published image with a few tweaks to better fit the article, or combining all new ideas of images into one. The recycling bin image was created completely from scratch and is a great example of how the graphics team can execute keywords or even the editor's thought process if communicated well.
Here is one... messing with lighting to emphasize plans within a framework.
That's 11!One of the perks of being the team lead, you can pass on the torch of blogging every now and then. THANKS STEPHANIE!!!!
VictoriaO 06000145NY Tags:  screencaps article tutorial howto graphics 6 Comments 6,032 Views
This blog entry will be a multi part one, because there is too much to be said on the topic to do it in one concise, brief blog posting. No need to drag it on longer than need be, right? Right.
So this week's Part 1 topic is - SCREEN CAPTURES (a.k.a. screen caps) - determining what's really important on your screen.
I've been team lead for roughly two years, but I've been working on the graphics team since March 23, 2006 (a pivotal moment in my working life) - so needless to say, since then I've seen A LOT of screen caps. And I've seen some really great ones and ones... yeah... notsomuch.
So here I am, hoping to educate you bit by bit on how to create exceptional screen caps.
When you get ready to make a screen cap, ask yourself a couple of questions as you look at the window on the screen:
1 - Is it relevant?
Do the people who are reading your article/tutorial REALLY need to see your tool bar? Tabs in your browser on unrelated topics? A partially drafted e-mail to your mother or signifcant other in the background? The answer is simple - NO
Our readers aren't THAT interested in what's going on in your background for you to include it in the screen cap. So make sure you only run that program/browser, or only screen cap the one you mean to without the party going on behind it.
2 - How much of the screen is ABSOLUTELY necessary to convey your message?
Do your readers really need to see the bottom right hand side of the screen cap? What about all the empty white space?
Focus your screen cap on what you're... well... focusing on. If you capture your entire screen for one little icon, so you can then point six red arrows to it - that's too much information (as well as being inaccessible - which is a blog topic for another time)! Try to capture just the icon itself or even just the toolbar section with the icon highlighted. If it's an error message, capture just the error message window - not the error message window over the entire window. If it's the upper left hand side of the screen for the menu, then capture just the left-hand hand side of the screen for the menu; the rest of the window is irrelevent. Noticing a trend yet?
Keep your screen caps concise and focused. So much more information can be conveyed to your readers and they will spend less time visually editing out the extraneous pixels, if they don't get distracted in the meantime.
3 - How big is the screen cap?
So your screen capture is 1400 pixels wide x 800 pixels high. You've asked yourself, is all of this screen cap relevent? And you've answered - YES! You've also asked yourself - Is ALL of this screen ABSOLUTELY NECESSARY? And you've also answered yourself - YES! (amazingly enough). So you think you're good to go - don't you? Well guess what? YOU'RE WRONG! O_O
The dimensions that work within our templates (both article AND tutorials) are 580 pixels wide. ::does some quick math:: So you're 820 pixels OVER! So what can we do? As the graphics team, we can take this image and scale it to 905 pixels wide and include it in a sidefile in your article. But you're still 495 pixels too big! Let me give you a visual here - since I'm a visual person and it makes sense, at least to me.
Your original image is 1400 x 800. Mythbusters style, we're going to scale this down to 1/3 scale, for the sakes of all our monitors - so it's now 400 x 229.
Now if we take that and try to cram it into 193 pixels (580/3 = 193.3333) - this is what we get.
Notice the difference in size? Look at how much of the image is lost! So we would be scaling your image to fit that - which means all legibility would be lost - and that's not good.
"But wait!" you say. "You mentioned something about a side file!!" I did... and this is what you would get...
So if you MUST go larger to convey your message in your graphic remember that developerWorks' max size is 905 pixels - and let the professionals handle the rest. :D
So after reading this rather lengthy blog post what have you learned today?
Make sure you focus your screen caps on what's relevant, and omit anything that isn't (this also includes your background). And remember - size matters when it comes to graphics.
VictoriaO 06000145NY Tags:  questions constructive feedback critiscm smarter 5 Comments 5,924 Views
Being a graphics person, you will come across people who have opinions. LOTS of opinions. Sometimes you ask for them, sometimes you don't. Helpful or not, everyone seems to have
one. The question is - what do you do with that information?
Opinion: The graphic needs to be smarter.
First thought: Riiiiiiiiight. Ok then.
If you're lucky, you're in the room when the opinion is given and you can ask open-ended questions to clarify their meaning. There is meaning there - where? - I don't know, but asking questions can get you to understand the meaning behind their statement. If you're not so lucky, then you have to use some powerful interpret-fu to figure out what they meant and move in that direction.
If you've gone through art school for 4.5 years, and sat through endless hours of "constructive criticism", your skin gets thicker over time and you can get some good feedback, as long as it's communicated properly and you're open to such constructive criticism.
How do you communicate such constructive critiscm properly? I try to follow these simple rules.
1. Look at the creation, and then ask yourself some questions to get your thoughts in order:
2. Hate it, love it, or meh - find SOMETHING nice to say about it - period. Even if it's the smallest of things, let that person know you've found something POSITIVE about their work.
3. Give CONSTRUCTIVE critiscm. This means, while being polite and helpful, you offer up the creator ways that you would improve their creation.
What not to say -
Say things like -
Statements like these, will make the creator, who is open to such constructive critiscm, think about things in a different way. Possibly explaining to you how it was meant to be interpreted,
opening the lines of communication, brainstorming, correcting the confusion, and -- hopefully -- producing a better end product.
Maybe for a future topic, I will go over the proper etiquette on recieving constructive critiscm, but in the mean time - I'm going to try to use some of my interpret-fu and figure out how to make a graphic, smarter.
VictoriaO 06000145NY Tags:  graphicdesign careerday graphics highschoolers 5 Comments 5,082 Views
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.
Ok – so last week I put a blurb up that we used to make a feature graphic with and ONE person came back with a response or suggestion (which were VERY good, by the way) – SO THANK YOU Richard_Carter for playing with me last week!
His suggestions were “user exit; alerts; DB2, SNMP; monitoring; database; Optim Performance Manager; mechanism”, and his first one was the one that stood out to me the most and was the one that I would be able to graphically represent most easily! So THAT is why I used an exit sign for my feature graphic.
Why did I use a running man instead of just EXIT? I tried to think of things that could graphically represent “EXIT” and be understood internationally without using any text. Sometimes you need to think globally when it comes to imagery, and something that is understood in your country, or mine, might not be the same in the next country or continent over.
So THIS weeks blurb is…
And the next question would be… will anyone else besides Richard want to play?
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.
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 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.
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?
"...That which we call a rose by any othe rname would smell as sweet" - Wm. Shakespear "Romeo and Juliet"
Sorry for that throw back to 10th grade English. But I'm not talking roses, but files and file names to be more specific.
It occured to me, as I've been working over the last week with files that had names that seemed to be longer than "Atlas Shrugged"; people don't think much about their file names. File names are important, but not more important than what you're writing about. More than a word or three - it's too much.
Seriously - if your file name rivals the longest sentance in your content, has a noun, verb, AND a dangling participle, it's time to rethink your file name.
A few things to consider when you name your files (and this is good for all files, not just graphic files):
I like that last line - keep it simple...and he IS the GoogleGuy.
"Most people seem to prefer hyphens. If you use an underscore '_' character, then Google will combine the two words on either side into one word. So bla.com/kw1_kw2.html wouldn't show up by itself for kw1 or kw2. You'd have to search for kw1_kw2 as a query term to bring up that page. ... My rule of thumb is to keep it simple where you can. "
Let me give you some examples of what to do and not to do -
Don't use names like:
Dependencies between Requirement- and Logical Model for whole
Dependency between Requirement- and Logical Model for one Measure
Use names like:
See the difference? What if you were coding your article and you had to input
<heading refname="fig1" type="figure">Figure 1. Initial UML model with types and their properties</heading>
<img alt="Dependency between Requirement- and Logical Model for one Measure" height="208" src="Dependency between Requirement- and Logical Model for one Measure.jpg" width="571"/>
<heading refname="fig1" type="figure">Figure 1. Initial UML model with types and their properties</heading>
<img alt="Dependency between Requirement- and Logical Model for one Measure" height="208" src="model1.gif" width="571"/>
You could literally use the file name as the alt text for that image!
So to quote GoogleGuy one more time because it's so good - "keep it simple where you can" - especially in your file names.
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.
VictoriaO 06000145NY Tags:  captures caps howto drop dropshadows shadow standards screen screencaps cloud specs snagit 3 Comments 7,016 Views
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.
VictoriaO 06000145NY Tags:  top10 developerworks top graphics feature favorite 3 Comments 5,720 Views
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!
The 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 cool.
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?