RYMO Creative Services Creative solutions to your technology needs

IrfanView: A robust (and free) image editor for your toolkit

Some time ago I presented an article on free or inexpensive web design tools and included several image editing tools. A reader suggested that a more in-depth review be posted on several of the tools; in addition, another reader added that IrfanView was left off the list and wanted to make the statement for inclusion of it as a useful free image editing tool. I have to admit that years ago the only use for IrfanView on my PCs was solely as an image viewing tool, and it was not until recently that I found its editing capability goes well beyond simply screening images.

Those comments are the inspiration for this review today, which includes a little history and some characteristics of the tool and a demonstration incorporating several features of the IrfanView image tool. As I said before, in the past IrfanView had fallen more on the viewing-only side of image tools; however, in recent years it has taken on more features as an editing tool and could be quickly incorporated into any web designer’s tool kit. (Read more...)

HTML5: Drawing images and adding text to the canvas element

In the previous post, “HTML5: Working with the canvas element,” I reviewed several ways to manipulate this element, including creating rectangles, circles, triangles, and diamond shapes by drawing paths, and with various shades using rgba. In this segment we will review drawing images and playing around with adding text to the canvas.

The canvas drawImage function using JavaScript allows you to create an image object within the defined canvas area. The drawImage function includes three parameters and is expressed in the form drawImage(object image, float x, float y). The image file formats supported within the canvas element and drawImage function are .jpg, .gif, and .png. For the draw image function to work, we have to set the variable and define the image object. For this example, we set it to “img” as is expressed in var img = new Image(); and then the image source is provided, followed by the image onload, and the final drawImage function with the parameters defined as in the example below:

// Draw Image function

var img = new Image();

img.src = "images/Figure_A.png";

img.onload = function() {

context.drawImage(img, 145, 145);

};

The resulting canvas image is displayed below as shown in Firefox 3.6:

Figure A

(Read more...)

Quick tip: Measuring user satisfaction

As web masters we want to ensure that visitors are satisfied when they visit our websites. But measuring customer satisfaction can be a very subjective matter since visitors typically will tell you want they like or don’t like about the website, but what they won’t tell you is what they actually do on your site. Obtaining an honest assessment of visitor experiences, either good or bad, is another challenge, and ensuring that the feedback visitors report is accurate about their levels of satisfaction can make the difference between useful data and useless information.

Web analytics will tell you the number of hits, page views, the bounce rate, and what the most popular pages are on a daily, weekly, or monthly basis. However, how do you know when visitors decide to use your site, how likely is it that they will return to your site, and will they recommend your site to friends and associates?

Measuring visitor satisfaction can be accomplished using several tools including customer satisfaction surveys, focus groups matching a profile, and email feedback forms. Surveys can be developed in-house, contracted out, or purchased from commercial sources that use standard methodologies across multiple industries. (Read more...)

HTML5: Working with the canvas element

The HTML5 specification has added many new conditions including attributes, semantic markup, and refined elements, sectional elements, and structural elements.  This segment will review the canvas <canvas> element while using JavaScript to draw several canvas shapes.

The Canvas <canvas> element allows for a dynamic rendering of bitmap images and 2D shapes onto web pages such as color fill backgrounds, gradient and pattern displays, rendering of text, pixel manipulations, animations, and other visual objects on the fly; therefore, the canvas element becomes a simple pixel-based drawing API tool.

Current browsers which support the HTML5 specification for the canvas element are: IE 9.0+, Safari 3.0+, Firefox 3.0+, Chrome 3.0+, Opera 10.0+, iOS 1.0+, and Android 1.0+.

This is the canvas element in its simplest form:

<canvas id="canvas" width=300" height="150"></canvas>

The canvas element has two default coordinate space attributes, a width of 300px and a height of 150px, the width and height can be modified within the element, and by itself the element renders an invisible block of space. We are giving the canvas element an id=”canvas” attribute so that added context can be accessed via JavaScript. (Read more...)

Quick tip: Establishing rules for publishing on the web

Does your organization or customer have a set of rules for its web content and publications? There are many topics to consider, including product review guidelines, web content hosted on the organization’s or customer-approved servers, responsibility and maintenance of content and information published, implementing graphic design standards, copyrights, web document inventory, records management practices, and external linking that conforms to the organization’s policy. I will touch on several of these topics in this post. (Read me...)

HTML5: Using structural elements for header, footer, and navigation

The HTML5 specification has defined a set of sectional and structural elements that improves semantic markup within HTML coding for web developers. These new sectional and structural elements are a panacea for moving away from the common use of divisions or the <div> element that has taken over a large part of web page structures in recent years.

The sectional and structural elements include the header <header>, footer <footer>, and navigation <nav> elements which will be addressed in this segment. The article <article>, aside <aside>, section <section>, and headings group <hgroup> elements were explained in the previous post on HTML5: Using sectional elements.

The only rule for limiting the use of the <header> and <footer> elements is that they cannot be nested within another <header> or <footer> element. Other than that limitation, the use of these two elements is fairly open; examples of their utilization will be displayed for both. (Read more...)

Quick tip: Finding web design inspiration

Keeping yourself and your team motivated and excited about web development and design can be a challenging task for any web master. Inspiration comes from many sources and often some unlikely places. I always delight in discovering inspired moments when I least expect them, such as when hiking on a wooded trail, or reading a book about events from the past, or at home in the kitchen sipping my morning coffee. These random, purposeful moments might actually be more common than you think. When practicing the art of inspiration on a regular basis, it then becomes habit forming. Before you know it, finding inspiration becomes a part of your normal routine. (Read more...)

HTML5: Using sectional elements

Included within the new HTML5 specifications are a new base template, several revised elements, and in addition, the HTML5 specification provides new section and structural elements that you can start using today to streamline your markup coding practices.

Several elements overlap into both sectional and structural descriptions, including the article <article>, aside <aside>, and section <section> tags, and descriptions for proper usage of the headings group <hgroup> and <h1 - h6> headings.

Section elements have been added to the specification as a way of semantically representing content on the web. This is the specification’s cure for the rampant div-itis and class-itis that has plagued markup coding practices in recent years. Web authors are strongly encouraged to view the <div> element as an element of last resort. When no other element is suitable and all section element options have been exhausted then the <div> can be utilized. Use of the <div> element instead of more appropriate sectional elements leads to accessibility issues for readers and becomes a maintenance headache for authors. Semantic meaning may require adding an ID and this is recommended: i.e., <article id=”blog”>. (Read more...)

Quick tip: Debugging and testing

As web masters, we all know that on occasion our “live” web pages get reported for a wide range of issues: failed log in attempt errors, buggy actions due to failed scripts, images that do not render properly, overlapping text, or content styling spilling over into other background divisions or sections. These are just a few of the things that can go wrong when visitors experience a buggy web page.

This list of several tips and tools can become prime candidates for incorporation into your debugging and testing routines for you and your team. Included in this short list are techniques for debugging code, several tools to look through offending code, services to test your designs, and cross-browser support, including earlier versions of IE. (Read more...)

HTML5: Attributes, semantic markup, redefined elements

The HTML5 specification, while not entirely finished, is scheduled to be near completion sometime around the year 2020 or 2022 timeframe; however, currently most browsers do allow for several attributes, semantic markup, and redefined elements and these are just some of the changes that can be incorporated into coding for web documents today.  This segment will show and demonstrate coding examples for empty attributes, attributes with values, semantic markup samples, conforming examples, and redefined elements.

Previous posts in this series include:

• HTML5: The next generation of web design
• HTML5: Creating a base template

Read more...