The Logical Blog by IconLogic

Development Corner: Image Formats

by Sally Cox  

When it comes to adding images to websites, PowerPoint presentations, or eLearning projects, you will likely be given JPEGs, GIFs, or PNGs. Let's review the three most common image formats and why/when to use them.

JPEG

JPEG is short for "Joint Photographer's Experts Group." It is one of the most popular formats used on the web and in eLearning. JPEG compression (the act of making the image as small as possible while retaining as much quality as possible) is "lossy" compression, which means every time you save an image as a JPEG, it loses quality.

 

The first image above is a JPEG taken with my iPhone. In the second image, I have opened the file in Photoshop and zoomed in on the child's face.

 

 

 

  

 

The little squares you see in the closeup image are called "pixels." Every time you save an image as a JPEG, it loses some quality by throwing out pixels. So if you are editing an image in Photoshop, always save it as the native format first, which is a PSD (Photoshop Document).

 

In the Save As dialog box in Photoshop, choose "Photoshop" as the file format. This saves as a PSD and preserves all details. Then after you finish your edits, do another Save As and choose "JPEG." The original PSD remains fully intact.

 

The image below is an example of the same photo saved multiple times as a low-quality JPEG. Notice that that there is a squarish effect happening and details are lost. This effect is known as "JPEG artifact."

 

 

 

JPEGs use the "RGB colorspace," which has more than 16 million colors. This allows for beautiful continuous-tone images with fluid gradations and a full range of colors. It's a good choice for continuous-tone, but does not allow transparency or animation.

GIF

The "Graphic Interchange Format" (GIF) works in the "Indexed colorspace," so its color palette is quite limited--just 256 colors. GIFs do, however, support transparency and animation (the once-hated animated GIF is making a comeback; I see it every day on Facebook). The oldest format on the web (created in 1989), GIFs are saved as "lossless" compression.

In the image below, I have saved the image as a GIF and it contains just 256 colors. You can see that the image has lost some of its detail.

 

 

Here is an example of an image containing just 8 colors--all detail is gone and the image has a "posterized" effect.

 

 

 

GIFs are perfect for "flat color," i.e., logos or flat design graphics that don't have gradations or continuous-tone (remember: only 256 colors). 

 

PNG

 

The "Portable Network Graphic" was created (approved as a web standard in 1996) to provide high quality continuous-tone but also allow for transparency and animation.

PNGs are saved in the RGB colorspace, so they have the full range of 16 million+ colors. What I like best about PNGs is the ability to save transparency, which I use every day in my workflow. I save my graphics as high-quality PNGs and allow transparency (a checkbox I choose in Adobe Illustrator when I export a graphic to PNG).

In a recent project I wanted to use an image of a headset, and I needed the background to be transparent. I opened the image in Adobe Illustrator and set the Export PNG options to High Quality and set the Background Color to Transparency.

 

 

 

Thanks to the Transparency option, I had the freedom to overlay the headset on the green background shown below.

 

To Recap:

	JPEG	GIF	"PNG"
COLORS	16 MILLION +	256	16 MILLION +
TRANSPARENCY	NO	YES	YES
ANIMATION	NO	YES	YES
CONTINUOUS-TONE	YES	NO	YES
FLAT COLOR	NO	YES	YES

 

***
If you'd like to attend some awesome 3-hour mini courses that focus on eLearning, check these out.

Adobe Captivate 7: Quiz Not Scoring Correctly? Think Advanced... Check Your Interaction!

by Kevin Siegel    

 

Here's an interesting scenario: You create a Captivate project that contains 12 slides: 10 question slides, each worth 10 points, and two "transitional" slides containing simple navigation buttons.

 

During the testing phase, a beta-tester who answers all of the questions correctly should be awarded 100 points. Simple. Interestingly, every beta-tester who answers the questions correctly receives a score of 96 from the LMS. Huh?

 

How about this one? You have a five-question Captivate project. As with the first example, this project also has a couple of "transitional" slides containing navigation buttons.

 

During the testing phase, the progress indicator on each of the question slides indicates that you are on slide 2 of 6, when you are actually on the first question slide. What's up with that? Keep in mind, the project only contains five questions so the first question slide should have indicated that you were on slide 1 of 5.

 

I've seen these problems before. The issues aren't with the question slides, and they're not a problem with your beta tester. The problem is typically found with the buttons on the "transitional" slides.

 

If you were to select a button and visit the Reporting group on the Properties panel, you'd see that many objects (click boxes, buttons, text entry boxes) can report user interactivity. In short, the object can be treated like it's part of a quiz.

 

 

 

If you select Include in Quiz, your question number counts will be thrown off. If you select Report answers and Add to total, your quiz score will likely be thrown off.

 

Here's the real challenge: Imagine you have 100 slides. Some of the slides are question slides; the majority are simply interactive or contain buttons. It's going to be a real pain to open each of your slides, show the properties of objects, and ensure the Reporting options are set correctly. What's a developer to do? Read on...

 

Choose Project > Advanced Interaction to open the Advanced Interaction window.

 

 

You can use this handy window to control all of the reporting objects in your project. For instance, if you wanted to stop a button from being added to the quiz total, all you need to do is select the object in the Advanced Interaction window and, on the Properties panel, Reporting group, deselect the Add to total check box.

If you'd like to see a demonstration of how to Report a score without using Question Slides and how to use the Advanced Interactions feature, check out this video on the IconLogic YouTube channel.

***

Looking for training on Adobe Captivate? IconLogic offers multiple live, online Adobe Captivate classes each month including Introduction to Adobe Captivate and Advanced Adobe Captivate.

Create ePubs Using Adobe FrameMaker and Adobe RoboHelp

I recently presented a 60-minute webinar for Adobe where I demonstrated how to use the Adobe Technical Communication Suite and take Adobe FrameMaker content to Adobe RoboHelp to ePub in mere minutes.

If you missed the live webinar, you'll be happy to learn that the session was recorded and you can view it for free.

More information.

Localization & eLearning: The Translation Process

by Jen Weaver

You are ready to move forward with your translation project, but despite your preparation you still feel a bit in the dark about what steps will be involved in creating your translation. The 'unknowns' can make you feel a bit fearful about moving forward. So let's bring some light to the situation, and uncover those foggy areas of the translation process. We have broken out the steps to a typical e-learning project below to help you better understand what will occur with your project.

Project Scope: Translation of an e-learning module from US English into Chinese

Evaluation

1. Analysis of material from the technical and cultural viewpoint to determine objectives, target audience and culture-specific content.
2. Evaluation of source material, layout, as well as the quantity and type of graphics used.
3. Project assessment to determine frequently used vocabulary, register, file format, etc.
4. Selection of team components, tools and software to be used.
5. Overall project assessment including identification of Professional Voice Talents comparable to project goals.
6. Research and provision of Voice Talent demo recordings from voice bank.
7. Casting of Voice Talents based on client approval.

Preparation

1. Extracting of the text from its original file format in (InDesign, PPT, etc). This includes preparation of graphics, graphs, and charts.
2. Transcribing (if it is not already done) the audio script for recording to include time stamp.

Translation, Editing, & Proofreading

1. Translation of the text from the source file.
2. Editing and Proofreading by professional target language (native speaker) editors.

Client Review

1. Delivery of proofs to Client for internal review.
2. Review and one round of input of client changes.

Voice Over Recording

1. Approved voice talent will record in a studio and will be directed by a studio director who is also a native in the language.
2. Use of fully digital, industrial strength Pro Tools recording system.
3. SP capabilities, time coded DAT, Neumann microphones, Industrial Acoustics sound booth.

Audio Client Review

Implementation of one round of client changes pre-delivery of completed files (edits can be pronunciation preference, slower speed, faster speed, error in script, etc).

Voice Over Recording of requested changes

Requested changes will be implemented and finalized, following the same process as Voice Over Recording.

Localization Engineering/Desktop publishing

1. Localization engineers/desktop publishers will ensure all components of the project have been fully localized.
2. All graphics/visuals will be formatted into the target language.
3. Localization engineers will sync audio files to the animations, ensuring all files are running properly.
4. Language tester will do a final QA of the end product, checking that all audio clips are clear and running to match the animation on screen.

Delivery

Delivery of final file (Java, XML, HTML, other formats), tested to ensure all localized components are in working order (audio is synced with animation, etc).

Reliable translation providers will use a translation process that adheres to basic industry quality best practices. Don't be afraid to ask your vendor about their internal translation and quality management processes. A reputable vendor will be proud to share this information with you.

***

If you would like to learn best practices for managing translation projects, contact Jen at Carmazzi Global Solutions.

Localization & eLearning: What Languages Should You Use?

by Jen Weaver

Congratulations! Your English eLearning course has achieved such tremendous success that your company is ready to produce the materials in additional languages. Often this request flows from a grand vision--your products and services spanning the globe with clients and students in every continent and every country.

As inspiring as your vision may be, getting there requires careful planning, time, money and strategic execution. Step one for expanding your global market means answering the following question: what language should we translate into?

Here are some tips for getting started:

1. Start with the present need. Do you have a client or potential client that is already requesting materials be provided in another language? This is the ideal place to start because the ROI on your translation investment is guaranteed.
2. Start with the pending need. This is the next best option when you don't have a client already requesting translation. This is where research and development play a critical role in your company's growth. Knowing which countries and cultures you want to target with your eLearning courses will help narrow and focus your translation goals.
3. Consider marketing materials. Selling translated eLearning programs is much simpler when the sales and marketing approaches are united. Many clients start with the translation of their marketing materials (including website) and then proceed to translate the eLearning program once the sale is finalized.
4. Roll out languages in phases. The transition into multi-lingual production is quite an undertaking and is best accomplished when rolled out in phases. Begin with the language of most pressing need or benefit, and then roll out additional languages once the first phase has completed. Attempting to roll out too many languages at once can slow down your production times and increase the risk of errors. If this is your first foray in translation, you can evaluate the successes of the project and implement improvements for future languages when the first phase is complete.
5. Choose a translation approach. Will you handle written translations with internal resources or will you utilize an outside language provider? While it may be less expensive to handle translation needs internally, a language vendor will possess the experience and expertise necessary to help you foresee and overcome potential translation obstacles.

With some deliberate planning, you can see your vision for global reach realized.

***

If you would like to learn best practices for managing translation projects, contact Jen at Carmazzi Global Solutions.

Free eBook: 68 Tips for eLearning Engagement and Interactivity

eLearning veterans such as Cammy Bean, Sean Bengry, Tom Bunzel,Paul Clothier, Sarah Gilbert, Amy Jokinen,Amy Leis, Susan O'Connell, Erick Summa, Kevin Siegel and Deborah Thomas provide 68 tips for making sure eLearners are fully engaged.

Covered among the tips:

• Creating engaging content
• Creating an engaging interface
• Using interactivity to drive engagement
• Using media and visual design effectively
• Using games for learning
• Measuring engagement and learning

You can download the free eBook here.

Localization: Writing for Translation

by Jen Weaver

Have you ever borrowed someone else's notes to try to study for an exam or understand a topic? You probably found that it was more difficult to fully grasp a concept when using someone else's thoughts. You might have spent a great deal of time trying to navigate new abbreviations, note-taking styles and the nuances of the author--and missed a key concept. Translated materials can have the same uncomfortable feel to the Limited English Proficient (LEP) reader when the source document is not written with an LEP audience in mind.

Experienced translation professionals know that sculpting written content into another language is best accomplished with documents written with the understanding that they will eventually be translated into other languages. Here are some tips on creating content ready for translation:

• Use numbered or bulleted lists rather than lengthy paragraphs of text.
• Avoid using slang. It will not often translate well between languages and will date your materials when used in the future.
• Break up lengthy phrases.
• Avoid embedding text in graphics when possible. Embedded text requires that the graphics are recreated when translated, resulting in a higher cost. When possible, it's better to place text labels under graphics rather than inside of them.
• Limit the use of screen shots unless you want to have those re-created and translated as well.
• Try and use location and cultural neutral images. This includes ambiguous ethnicity for people and locales that can relate to many countries or areas.
• Leave white space in the English files to allow for text expansion when the file is translated.
• Concise, straightforward content is best. Plus, translation is billed per word, so short simple text will also save you money in translation.
• If reading level is a concern, keep this in mind when writing the English copy. It is very difficult to translate materials into a different reading level than the source copy.

Following these simple guidelines for translation will allow your LEP audience to focus on the important things you have to say.

***

If you would like to learn best practices for managing translation projects, contact Jen at Carmazzi Global Solutions.

Digital Publishing: Controlling Page Breaks in an ePub

by Robert Desprez  

 

Help Authoring Tools such as Madcap Flare and Adobe RoboHelp will quickly create an ePub file that includes a title page, table of contents, and the content that you authored. However, you can control the format of an ePub after it has been created by the Help Authoring Tool by performing some simple edits within a Cascading Style Sheet (CSS).

 

In this article, I'll briefly explain how to unzip the ePub file and edit the CSS so that you gain more control over page breaks.

 

A Few Basics

 

An ePub document is a zip file with the .epub extension. ePub files can be read using e-reader software on myriad devices including the iPad, iPhone, PCs, and smartphones running on Android.

 

For technical writers, I believe ePub files are one of the technologies to watch. The iBooks bookstore sells its ebooks in an ePub file format. With tablets and smartphones forecast to outsell PCs in the near future, users will increasingly be reading content--including technical communications--on these devices.

 

One of the key advantages of an ePub file is its ability to reflow on different devices. The following image shows how an ePub file appears on an iPad:

 

  

 

The next screen shot shows how the same file appears on an iPhone:

 

  

 

In contrast, a PDF file may look beautiful on your 24-inch monitor at home but is difficult to read on your smartphone. It does not resize-making it difficult and tedious to read on a small screen.

 

Controlling Page Breaks Inside Adobe RoboHelp

 

If you work as a technical communicator, you probably use a Help Authoring Tool, such as RoboHelp or Madcap Flare. These tools provide a lot of the "heavy lifting" for you: they create the title page, a table of contents, and the topics themselves. You can also use them to control some basic page breaks.

 

The following image shows how RoboHelp 10 allows you to set page breaks for certain heading levels. In this case, I've specified that every time I use Heading 2 ("h2" in the left list), RoboHelp creates a new page break or topic.

 

  

Help Authoring Tools, in short, provide you with rudimentary control over page breaks. But if more control is needed, edit your CSS.

Unzipping an ePub

1. Locate your ePub file.
2. Change the .epub extension to .zip.




3. Unzip the contents of the folder.
4. Double-click the OEBPS folder ("OEBPS" stands for Open eBook Publication Structure).



5. Locate the default.css folder. This is your CSS folder.

Controlling Page Breaks

Inside the CSS file add the following code using a text editor:

h2 {

page-break-before: always;           

}

In the CSS, it might appear like the following image:

  

This first entry adds a page break before every instance of a heading 2. This might be useful if you want to insert a page break before a chapter title.

Here are some other options to consider:

• H3 {page-break-before: avoid;} This entry prevents an element (in this case, a heading3) from beginning on a new page, unless absolutely necessary. You might want to use this code to try and ensure that content is grouped together.
• H3 {page-break-inside: avoid} This prevents an element such as a table or long list from being divided by a page-break. Keep in mind that if your table or list spans multiple pages, the e-reader needs to create a break somewhere.
• H3 {page-break-after: avoid;} This entry discourages a page break after an item. For example, this could prevent the heading3 that appears at the bottom of the following left page.

Next Steps

After you make changes to the CSS, re-zip the ePub project, rename so it uses an .epub extension, and test it on all the different e-readers that your users may be using. I've installed Adobe Digital Editions on my computer and iBooks for the iPhone and iPad. Different e-readers may render your ePub file differently so testing is vital.

In future articles, I'll explain how to control text alignment, widows and orphans, and fonts.

Additional Resources

ePub Straight to the Point by Elizabeth Castro.

Castro's web site on formatting ePub files: http://www.pigsgourdsandwikis.com

Free Webinar: Create eBooks in a Snap

I'm excited to be offering a free webinar next Monday, February 25 (noon Eastern) where you will learn how to quickly create eBooks (ePub and Mobi) in record time using tools available off-the-shelf in the Adobe Technical Communication Suite.

While this is an event that I'm teaching for the good folks over at the International Legal Technology Association (ILTA), IconLogic is sponsoring the event so it's open to everyone. All you need to do is use the link below and register.

Register and Learn more

"TechSmith Camtasia Studio 8: The Essentials" Kindle Edition Now Available

My newest book, "TechSmith Camtasia Studio 8: The Essentials" is now available for the Amazon Kindle.

The printed book is with our fulfillment house and should begin shipping next week. 

In the coming weeks, the book will be available for purchase via the Apple iBookstore and Safari books online.