Thursday, July 25, 2013

CSS3 Crash Course – Part II of HCJ Series

[This post is re-published from a piece I wrote for the January 2013 edition of the Centriq Alumni Network newsletter.] Continuing the HCJ series (HTML5/CSS3/jQuery) we started last month, let's push on with CSS3. As noted in the opening salvo for the series, this is intended to introduce you to these concepts and get you up and running with some new code and implementations that will work in many environments. It is by no means an exhaustive resource.

The next piece in the series will introduce incorporating some jQuery into your websites.

CSS3 Usage

Over the years, CSS3 has begun to be supported in parts by more and more browsers. And this is a good thing, because CSS3 promises not only more formatting options, but also finer control over selecting tags to format on the page. (This improved ability to target items in the DOM ties in well with JavaScript and jQuery, as we'll discuss more in the next installment of this series.)

Use Well-Supported Properties But Be Prepared For Non-Compliance

Although there's still lots of CSS3 that receives only partial support (or none) in various browsers, that doesn't mean we can't use some CSS3. There are various philosophies on this, but a common perspective is that if a CSS property we wish to use is fairly well supported, we use it – with the understanding that it may be ignored by some browsers. If you do this selectively, there shouldn't be too much "code bloat" where the users are wasting download time to get formatting that will be ignored by their browser anyway.

For example, you can use a CSS property for multiple text-columns (like those in a newspaper) on one of your div tags – but you will need to be prepared for the fact that no form of Internet Explorer except IE10 supports that CSS. (IE10, by the way, is only installed by default on Windows 8 machines; and is currently used by only 0.25% of users globally.) So that CSS will be ignored by most forms of IE, and your page will display that div's content in the standard 1-column layout.

Push Compliance with Modernizr and Polyfills

On the other hand, if a particular CSS property and its formatting is truly mission critical and we know some browsers do not inherently support it, we could try to force the browser to implement that formatting by using Modernizr and polyfills.

Modernizr is a free service that incorporates both the HTML shiv we discussed in the last installment, and JavaScript that performs feature detection. Then polyfills (more JavaScript) can be used to "help" the browser support the desired CSS3 or HTML5. This of course can still fall victim to the limitation that the browser in question must not be configured to block the JavaScript or your desired formatting can still fail. And this also adds more code to the download, and the potential for code bloat again – especially if you overuse the technique. Fortunately, to avoid this, the people at Modernizr do make it easy for you to generate custom JavaScript code to "force support" for only the desired CSS features you choose.

Using the Modernizr and polyfills approach may take more work, but if used with some care to only force support for truly important features, it can ensure a more consistent implementation of your CSS across browsers.

CSS3 Resources

Deciding which CSS to use can often come down to how well supported it is. For that, I have two quick recommendations:
  • CanIUse.com (solid stats and information)
  • CSS3Test.com (interesting at a glance for testing features of the browser you're currently using)
To start digging into using Modernizr with polyfills, I'd recommend the following sites:

CSS3 Formatting Highlights

The following is a quick sampling of some fairly well-supported CSS3 properties you may want to start using in your projects.

Text Shadows

Adding a drop shadow to your text uses the text-shadow property. Here's the template for using it:
text-shadow: right-offset | down-offset | blur-radius | color

And two examples:
h1
{
   color: green;
   text-shadow: 5px -3px 5px red;
}

h2 {text-shadow: 3px 3px;}


So the h1's would be green with a red drop shadow 5px to the right, 3px above (negative offsets reverse the direction), and a blur radius of 5px.

The h2's would have a text-shadow of the default color that's 3px to the right and down.

Rounded Corners and Box Shadows

For block-level elements, sometimes you want to shave off the hard edges from those corners and/or add drop shadows to them. This has been popular in web and UI design for awhile, but previous to proper CSS support, required cumbersome image manipulation and CSS hacks to make it work. Of course, for this to work, you need some borders to round, so that's your first pre-requisite. Also, this is another CSS feature that has mixed and sometimes proprietary support in different (older) browsers, so to be safe, you may want to use both proprietary and standard property variants.

The templates:
border-radius: radius-amount-for-all-corners //set equally
OR
border-radius: top-left | top-right | bottom-right | bottom-left //clockwise

box-shadow: right-offset | down-offset | blur-radius | spread | color


Examples:
aside.pullquote
{
   border: 3px solid blue;
   border-radius: 5px;
   -moz-border-radius: 5px; //for older Firefox versions
}

#wrapper
{
   border:3px solid blue;
   border-radius: 5px 3px 3px 5px;
   -moz-border-radius: 5px 3px 3px 5px; //for older Firefox versions

   box-shadow: -3px -3px 3px 3px green;
   -moz-box-shadow: -3px -3px 3px 3px green; //older Firefox versions
   -webkit-box-shadow: -3px -3px 3px 3px green; //older Safari/Chrome versions
}


So any aside with a class of pullquote will have 5px radius for its rounded corners on all sides.

The tag with an id of wrapper will have left corners with 5px rounding, right corners with 3px rounding. Also, it will have a green drop shadow outside the borders of 3px to the top and left, with 3px radius and spread.

Text Columns

As we've already mentioned, you can add CSS text columns for a block-level element, and style them with spacing and/or a line between the columns. (Also, as noted previously, this is not supported in most forms of IE as of the time of this writing).

Templates:
column-count: number-of-columns;
column-gap: width-between-columns;
column-rule: border-specs-between-columns; //defaults to none if unassigned

Example:
article.threecol
{
//3 variants for column count
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;

//3 variants for column gap
-moz-column-gap: 15px;
-webkit-column-gap: 15px;
-column-gap: 15px;

//3 variants for column rule
-moz-column-rule: 2px dashed black;
-webkit-column-rule: 2px dashed black;
-column-rule: 2px dashed black;
}


So, for browsers that support it, the article tag with a class of threecol will have 3 columns with a spread between them of 15px, as well as a 2px dashed black vertical line.

Background Gradients

You can set a background gradient (where solid colors "fade" into other solid colors) through a variant implementation of the background-image property. Again, this is currently a property supported mostly through the proprietary browser variants, so you'd typically use them all if you're going to use them.

Template:
background-image: linear-gradient(direction | color % | color %);
background-image: -moz-linear-gradient(direction | color % | color %);
background-image: -webkit-linear-gradient(direction | color % | color %);


Examples:
header
{
   background-image: linear-gradient(left, red 20%, olive 70%);
   background-image: -moz-linear-gradient(left, red 20%, olive 70%);
   background-image: -webkit-linear-gradient(left, red 20%, olive 70%);
}

aside
{
   background-image: linear-gradient(45deg, gray 20%, blue 30%, green 70%);
   background-image: -moz-linear-gradient(45deg, gray 20%, blue 30%, green 70%
   background-image: -webkit-linear-gradient(45deg, gray 20%, blue 30%, green 70%);
}


So the header will go from red to olive, fading in from the left, beginning the red-to-green transition 20% after the starting point and ending in solid green 70% from the starting point to the end.

The aside will fade in at a 45 degree angle, from gray to blue to green, starting the first transition at 20% of the distance, then the next at 30% and then finally at 70%.

This can all be a little tricky, so I highly recommend playing with it and/or downloading the free CSS Grady or ColorZilla app for the Chrome browser to interactively play with gradients and see CSS code generated that you can copy or tweak.

CSS3 Targeting Highlights

The following is a quick round-up of a couple of fairly well supported CSS3 selectors you may want to start using to target tags better, with less markup. Why add tons of classes to your HTML tags to get them systematically formatted a certain way if you can do it just as well with some slick pseudo class and contextual selectors?

Here are a few quick targeting selectors that you may want to consider using.

Some Pseudo Class Selectors

Sometimes you want set the formatting differently for the first or last item in a container tag – like the last bullet point in an unordered list, or the first row in a table. Example:

ul li:last-child
{
   margin-bottom: 30px;
}

tr:first-child
{
   text-align: center;
}


So the last list item in an unordered list would have 30px added beneath it. And the first table row would have its content centered.

On the other hand, sometimes you want to set repeating formatting for alternating items (like rows in a table) and so you might want to set every "even" or "odd" child to receive certain formatting. Examples:

tr:nth-child(even)
{
   color: yellow;
   background-color: green;
}

tr:nth-child(odd)
{
   color: white;
   background-color: black;
}


So the even rows in a table would be yellow on green, while the odd numbered rows would be white on black.

What about selecting the immediate child li's in an unordered list, but not the ones nested in that ul's child tags? Or selecting a certain tag when it immediately follows a particular other tag?

ul > li:last-child //only last child LI of UL, but only direct-child, not nested descendant LI tags
{
   margin-bottom: 30px;
}

h1+p // select P tags that immediately follow an H1
{
   margin-left: 2em;
}


There are many more CSS selectors you may not have worked with, but that's a few to give you a taste, and they are pretty well supported now.

Additional Development

As noted in the previous installment of this series, I recommend you pick up the books we're using in our HTML/CSS/jQuery class now for a fuller treatment of these topics:
  • Murach's HTML5 and CSS3 (including intro chapters for JavaScript, jQuery, and jQuery mobile) by Zak Ruvalcaba and Anne Boehm
  • SitePoint's jQuery: Novice to Ninja by Earle Castledine and Craig Sharkie
Remember to take advantage of being part of the Centriq alumni network, and best wishes on your continuing career development!

Thursday, June 20, 2013

Microsoft Outlook Tip: MailTips


Microsoft Outlook 2010 includes MailTips, which help you avoid common, but potentially costly or embarrassing mistakes. MailTips alerts can be triggered by actions including clicking Reply All to a large recipient list, sending sensitive information to someone outside your organization, or sending a message to someone who is out of office.

NOTE: This feature requires a Microsoft Exchange Server 2010 account.


Turn MailTips On or Off
  1. Click the File tab.
  2. Click Options.
  3. Click Mail.
  4. Under MailTips, click MailTips options.
The MailTips section does not appear if MailTips are not available for your account.
  1. If you have more than one Exchange Server 2010 account in your Outlook profile, click the account in the Apply to this account list.
  2. Under MailTips bar display option, click the option that you want.

- Karla Sharp

Microsoft Access Tip: Useful Shortcut Keys


Do you find that using the keyboard is sometimes quicker than using your mouse? I do. Shortcut keys can help you bypass menus and carry out commands directly. You can use shortcut keys in many ways with Access, from accessing commands and toolbar buttons to inserting today's date. Shortcut keys are sometimes listed next to the command name on Access menus.

For example, on the File menu, the Print command lists the shortcut CTRL+P.
 
 
For a comprehensive list of shortcuts, ask the Office Assistant for help.
 
  • In Access or any of the other Office applications, press F1                              to display the Assistant.
  • Then type shortcut keys in the text box.
 
Here are some of the most useful Access shortcut keys:
 
 
 
- Karla Sharp 

Friday, February 22, 2013

What is ITIL?


I am often asked “What in the world is ITIL?”  ITIL is Information Technology Infrastructure Library. Okay so what is that?  ITIL is the most popular approach to IT Service Management.  It gives us a framework of best practices to help us identify the services we need, then plan, deliver and support those services. What we are trying to do in ITIL is align our IT services with the needs of the business, making sure we are providing the right mix of services to meet the business needs in the most cost effective way. 

This approach works because it is based on tested practices that are used by successful companies not theory.   There is not just one way to apply ITIL, each organization adapts the practices to fit their needs.  

The framework is based around a five phase lifecycle and the best practices are laid out in the five core publications that align with the phases.  This lifecycle takes us from deciding on the services we need, to designing the services, building, testing, and implementing the service, to the day to day operations of delivering the services, and then to improving the processes. 

This is a very basic answer to the question and of course there is a lot more involved.  I will be exploring the return on investment and each phase of the lifecycle over the next few months.

-Sandy Bentch, Business IT Expert

Friday, February 8, 2013

HTML5 Crash Course – Part I of HCJ Series

[This post is re-published from a piece I wrote for the December 2012 edition of the Centriq Alumni Network newsletter.] I thought I would start off a series that tackles a few concepts that we've begun incorporating into our web design class in the Application Developer track in the past 6 months – HTML5, CSS3 and the jQuery JavaScript libraries. This reflects the growing adoption and support of these languages and technologies, especially in the wake of the explosion of various mobile devices. Of course, HTML5, CSS3 and jQuery could each be a book-long discussion in and of themselves. This will only be an introduction to HTML5 – but one intended to get your feet wet quickly and without a lot of fuss. The next piece in this series will be for CSS3, and the final installation will introduce getting started with jQuery in your websites.

HTML5 Evolution and Philosophy

HTML5 is just the next evolution of the HTML language family, just like XHTML was an evolution of HTML 4.01. However, one of the first trends you'll notice in HTML5 is that they have tried to simplify things – such as the new DTD (Document Type Declaration). All this line of code was ever intended to do was to identify what language was going to be used in the document that followed, so we could validate the code against that version of the language's rules. Now the DTD has been radically simplified in HTML5:

XHTML 1.0 Transitional DTD code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML 5 DTD code:
<!DOCTYPE html>

Part of simplifying HTML5 has included recognizing and supporting some of the common, real-world usage of HTML. So, for example, the target="_blank" attribute/value pair for the <a> tag (which can be used to cause a link to be opened in a separate browser window or tab) is so popular that HTML5 has rolled back its former deprecated (marked for deletion) status – it's now okay to use again. Similarly, all self-closing tags like <br /> and <img /> are no longer required to use the closing forward-slash explicitly stating that they are self-closing tags. Instead, in HTML5, you can write them simply as <br> and <img>. But in the spirit of being more loosely ruled, HTML5 doesn't disallow writing self-closing tags in the XHTML fashion with the closing slash – so adapting your XHTML documents to HTML5 is extremely easy, because you don't have to go back and change much. Just updating the DTD as noted above is your first step.

HTML5 Semantic Structural Tags

So what else is new and well-supported with HTML5? One of the strong trends with XHTML and CSS was to move away from using tables for page layout and to instead use a complex series of nested <div> tags combined with CSS to lay out any given page. However, since the <div> was such a generic structural container, we often coded them with a variety of classes and ID's describing their purpose. Through popular usage, some common container types became obvious: most pages would have a banner section, one or more navbars and a footer. Some pages would have sidebars for things like ads, highlighted side notes or pull quotes. Some pages might have tables or images that should be displayed with a consistently formatted caption.

HTML5 has new semantic tags for all these things, rather than just calling everything a <div> and manually assigning it some arbitrary ID or class to identify its purpose.
  • <header> – acts as a banner for the page, often containing the name of the site, logo or branding images and colors, and possibly navigation elements. Not to be confused with the <head> section of the document reserved for meta information and links to CSS, JavaScript, etc.
  • <nav> – for sections of the page with multiple links (especially for navbars used as the site's internal navigation system)
  • <footer> – a section, usually at the bottom of the page, with minor, closing details
  • <aside> – for sidebar/sidenote content of any kind
  • <figure> – to contain any illustrative information, especially that needs captioning (technically not a block-level element, but you'll often want to format it that way)
  • <figcaption> – a caption for the figure (also commonly formatted as block-level)
  • <article> – often used for blog posts, news items and periodically published content
  • <section> – another generic container, like the div. I'm not a fan of this one yet, but it's out there.
Transitioning to these new tags doesn't take that much work, especially if you are creating a webpage design from scratch. But you can also adapt an XHTML template by replacing things like <div id="banner"> with <header> and <div class="sidebar"> with <aside>. Just don't forget to make all the necessary changes in your CSS. Where #banner and .sidebar were included in your CSS (or div.#banner , or div.sidebar ), change them to header and aside instead.

Setting Basic HTML5 Compliance for Older Browsers (using Shiv and CSS)

Although many elements of HTML5 are well-supported in most modern browsers now (including most mobile devices), it's not universal. So to ensure that at least your basic HTML5 semantic tags (mentioned above) are handled properly by an older browser that is not familiar with these tags, it's an easy, two-step process.
  1. Add an HTML5 shiv/shim to the head of your HTML file.
  2. Add a style declaration to your CSS to ensure the newly introduced HTML5 tags that should be seen as block-level elements are formatted that way.
The HTML5 shiv is just JavaScript (or a link to JavaScript) that explains to an older browser that isn't familiar with HTML5 that these tags exist, and should not be ignored or rendered as plain text on the page. (The shiv is also sometimes called a shim.)
  1. 1.  Connecting to a shiv hosted by Google:
<head>
    <!--HTML5 Shiv-->
    <script
        src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
</head>


This script we're linking to off googlecode.com essentially performs the following JavaScript function for all HTML5 elements:
<script>
    document.createElement('header');
    document.createElement('footer');
    document.createElement('aside');
    //…and so on, for each HTML5 element
</script>


You could even include the code above (with an additional line for every HTML5 tag that needed to be "created" for the older browsers) in the <head> instead of the link to the shiv from Google – but it would be more work and would only create the tags you manually listed.
  1. 2.  To further specify in CSS that some new tags should be formatted as block-level elements:
article,aside,figcaption,figure,footer,header,nav,section {display:block;}

The CSS addition above is quick, and should be placed near the top of your CSS to set the baseline formatting for these new HTML5 tags. It's just to tell the older browsers that these new tags should be displayed as block-level elements – for the most part, newer browsers will already know. Later in your CSS you could and will add additional style declarations to further format these tags – perhaps centering your header and footer or floating all sidebars to the left and giving them a tasteful background color.

Additional Development

For a fuller (but still not exhaustive!) treatment of the topics in this series, I recommend you pick up the books we're using in our HTML/CSS/jQuery class now:
  • Murach's HTML5 and CSS3 (including intro chapters for JavaScript, jQuery, and jQuery mobile) by Zak Ruvalcaba and Anne Boehm
  • SitePoint's jQuery: Novice to Ninja by Earle Castledine and Craig Sharkie
Best wishes on your continuing career development!