Final CSS tips

Just to finish the year, I thought I’d complete this article – although, since I started publishing it, I have come up with quite a few more. Anyway, as I’ve said before, while I’ve been designing Web sites recently – to W3C standards I might add – I have put together some CSS tips that I’d like to share with you over the next few weeks.

18 Simple 3D link button effect

HTML
<a href="#">LINK</a>

CSS
a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

19 CSS buttons with mouseover effects

CSS
div#buttonA {
margin-left: 10px;
margin: 0px;
padding: 0px;
font-family: arial;
font-size: 8pt;
color: #fcfcd5;
font-weight: bold;
list-style-type: none;
height: 24px;
width: 150px;
margin: 2px;
text-align:center;
}
div#buttonA a {
display: block;
text-decoration: none;
font-weight: bold;
border-width: 6px;
}
div#buttonA a:link {
color: green;
font-weight: bold;
background-color: #fcfcd5;
border-style: outset;
}
div#buttonA a:visited {
color: green;
font-weight: bold;
background-color: #fcfcd5;
border-style: outset;
}
div#buttonA a:hover {
font-weight: bold;
color: #fdd017;
background-color: #fcfcd5;
border-style: outset;
}
div#buttonA a:active {
font-weight: bold;
color: red;
background-color: #fcfcd5;
border-style: inset;
}

HTML
<div id="buttonA">

<a href="index.htm" onmouseover="window.status='Home page';return true;" onmouseout="window.status='Elegant Solutions';return true;">Home page</a>

</div>

This repeats for the other buttons.

20 Table that highlights lines on mouseover

HTML

<table id="hilite-table" summary="Retirement age for women">

<thead>

<tr>

<th scope="col">Date of birth</th>

<th scope="col">Pension age</th>

<th scope="col">Pension year</th>

</tr>

</thead>

<tbody>

<tr>

<td>April 1950</td>

<td>60yrs 1mth</td>

<td>2010</td>

</tr>

<tr>

<td>October 1950</td>

<td>60yrs 7mths</td>

<td>2011</td>

</tr>

<tr>

<td>April 1951</td>

<td>61yrs 1mth</td>

<td>2012</td>

</tr>

</tbody>

</table>
There are more entries in the table than shown – but you get the idea.

CSS
#hilite-table
{
font-family: arial;
font-size: 12px;
font-weight: bold;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
}
#hilite-table th
{
font-size: 13px;
font-weight: normal;
padding: 8px;
background: green;
border-top: 4px solid green;
border-bottom: 1px solid green;
border-right: 1px solid #f5f5dc;
border-left: 1px solid #f5f5dc;
color: gold;
font-weight: bold;
}
#hilite-table td
{
padding: 8px;
background: #f5f5dc;
border-bottom: 1px solid green;
color: green;
border-top: 1px solid green;
border-right: 1px solid green;
border-left: 1px solid green;
vertical-align: top
}
#hilite-table tr:hover td
{
background: green;
color: gold;
font-weight: bold;
}

Have a happy New Year.
By the way: anyone looking for an experienced technical writer or Web designer, contact me at trevor@itech-ed.com.

2008 – what happened?

It’s December, so it’s the time of year when everyone is reviewing the year and making predictions about the following year – so I thought I would too. See whether you agree with me, or whether I’ve missed any important trends in 2008.

Firstly, the biggest trend in 2008 was money disappearing! You thought your house was worth X amount of money in January, and by December it is worth X-Y. Money has disappeared. And so have some banks! And, of course, banks are the biggest business group to use mainframes. I had a friend who reckoned that you could tell how well business was going in general by attending exhibitions and seeing what companies were giving away free. During the good times you always got something in a box as well as a pen. In the bad times you were lucky to get a pen! I haven’t acquired many things from vendors at all this year. There is a corollary to this law, which states that the last thing a company will do before going bust is give away promotional items – mousemats with their name on, noteholders, keyrings, etc.

Sadly, 2009 seems likely to continue this trend. Governments are talking about spending money to keep their economies going, but car makers know that they will sell fewer vehicles because people will wait perhaps an extra year before buying a replacement. And I bet many organizations that planned to upgrade their mainframe, to perhaps a new z10, are going to do the same and try to put off the purchase for as long as possible. The IT department are going to have to make a very compelling case in order to win the argument. And this is going to impact IBM’s and other hardware manufacturer’s figures. Incidentally, mainframe software vendor Iona, one of last year’s sponsors of the Arcati Mainframe Yearbook, has been taken over by Platinum and almost completely disappeared from view as a separate entity.

At the little end, it’s been reported that many organizations were reluctant to roll out Vista, and it is quite likely that many people will have to make do with their old computer for another year because there is still no money in the budget for new ones – and besides, Windows 7 is just around the corner!

My next two big trends were also the trends last year – they have just grown in importance. They are being green and virtualization. Looking at virtualization, any company with more than a few servers is going to be able to make the business case for virtualization. And, as well as having servers virtualized, I bet in 2009 we see more virtualized laptops. It’s so easy to do, that you don’t have to be the nerdy kid anymore.

And greenness will become so much more important. Not because people want to save the planet or measure they’re reducing their carbon footprint, no, it will be important because it saves money – and consequently all those environmental things. Corporate Web sites and brochures will push the greening of their company, but the truth is the drivers will come from the CFO not the CGO (Chief “Green” Officer), should such a role exist.

I also predict a growth in outsourcing. The financial savings that some organizations will be able to achieve will outweigh the inconveniences sometimes experienced.

And, I predict the growth in Open Source software! Yes, I know I’ve been wishful thinking this for a number of years, but I think with finances becoming so tight, more and more people will opt out of paying £600 or $1000 for software and use a free alternative. Now whether that’s Open Office or Web-based equivalent that looks like a desktop application because it runs inside Google Chrome, I don’t know.

And lastly, mash-ups everywhere. Even, dare I say it, mainframe data being included in mash-ups on corporate Web sites for the benefit of customers(!) and not just the techie guys who wanted to try it out.

So there we are, a review of 2008 and predictions for 2009. What do you think?

Mish mash-ups

Everyone’s talking about mash-ups, even some people sitting near me in the pub the other day. And everyone has seen what clever things you can do with Google Earth and some other high-profile mash-up sites. But has anyone seen a mash-up using mainframe data? And would it add business value?

But what is a mash-up? That’s the first problem – actually defining the term because it’s been used for slightly different things. Some mash-ups simply display data in a different way, while others combine information or capabilities from two or more separate sources to deliver new functions and insights.

And how do you create a mash-up? Well that’s up to you. At the moment, there is no standard way to build mash-ups – everyone has choice and flexibility. However, they are typically built on a Web-oriented architectures like REST (REpresentational State Transfer) or SOAP (Simple Object Access Protocol), and leverage lightweight simple integration techniques like AJAX (Asynchronous JAvaScript and XML – itself and acronym for eXtended Mark-up Language), RSS (Really Simple Syndication), and JSON (JavaScript Object Notation). The result should be the fast creation of rich desktop-like Web applications.

Typically, "widgets" and "feeds" (probably) from independent sources are mashed together, but do not change when mashed. A Web feed is data formatted in XML and used to provide users with frequently-updated content. Content distributors syndicate a Web feed, thereby allowing users to subscribe to it. Making a collection of Web feeds accessible in one spot is known as aggregation, which is performed by an Internet aggregator (of course!).

A widget is a small program or piece of dynamic content that can be easily placed into a Web site. Widgets are given different names by different vendors, eg gadgets, blocks, flakes. Widgets can be written in any language (Java, .NET, PHP, etc) and can be as simple as an HTML fragment. Widgets can be non-visual, and often encapsulate an API. "Mashable" widgets pass events, so that they can be wired together to create something new.

IBM, of course, has mash-up software. This includes Lotus Mashup, Infosphere mashupHub, and WebSphere smash.

Going back to my original questions, mash-ups can include mainframe data, and can take data from that most efficient but complicated beast, IMS. It’s perfectly possible to convert an IMS asset into an IMS RESTful service, which has the ability to consume and be consumed by other Web 2.0 services. IMS customer could then remix and mash-up their data rapidly with IBM Info 2.0 tools to extend their business logic without the need to write a single line of code.

Alternatively, by publishing an IMS RESTful Service to the Web 2.0 community, this opens up the possibility of third parties generating creative mash-ups that could benefit both third-party developers as well as the original IMS service provider. The third-party developer would now have IMS assets available to them. While, the IMS service provider could benefit from new business opportunities and increased partnership on the Web. And this answers my second question – it would add business value.

Some of the information in this week’s blog was taken from a recent presentation given by Jenny Hung from IBM’s IMS Development Division to the Virtual IMS Connection (www.virtualims.com) virtual user group meeting. A copy of Jenny’s presentation is available for members to download from the Virtual IMS Connection Web site.

Hello – is anybody there?

When I was a youngster and first learned how to operate a mainframe, first learned how to load tapes, and change removal disks, first learned how to stick paper tape together again after a ripping time, and first learned how to hold a deck of cards up my arm without dropping it, everyone else was similarly aged. And we had fun.

And then we stopped being operators and started being programmers, managers, trainers, and writers. And we still had fun – but not so much because we had mortgages and children, etc.

And then we became very senior personnel and started talking about pension plans and setting up trusts so the right people benefited from our hard-earned money and possessions.

And in the meantime, mainframes stopped being interesting to the rest of the world, who thought working on Unix and Solaris, or Linux and Windows was much more fun. And people trained in COBOL and Fortran started sitting together in the staff canteen because there were so few of them and everyone else wrote in Java, C++, Python, etc, etc.

But the mainframes continued improving, and large organizations continued making do with fewer staff, and ran their important business on the mainframes – confident in their continuing success.

However, for a long time now, those mainframers have begun to retire, or to get less demanding jobs that have reliable hours and a short commute.

So what reminded me of this skills shortage? CA recently released a study by InfoPro of 270 senior IT execs from Fortune 2000 companies. The study found that 80 percent had mainframe staff who were eligible for retirement now or over the next couple of years.

No great surprise there, but it does highlight quite a serious problem. So is there an answer? Unfortunately, there are lots of answers! First the good news, autonomic management of mainframes is getting better, which means that it’s easier to tell the mainframe how to perform and then the machine will reliably get on and perform according to the instructions given. This means that less-skilled people can be used to run the mainframe and its major components like IMS, CICS, DB2, etc. Also the interfaces are looking more Windows-like, which makes communicating with the mainframe easier for “the youngsters” than in the “green screen” days.

There have also been moves by IBM to train youngsters to be able to program mainframes – so well done to them any other organizations doing the same. And, perhaps as an aside, it might be a good idea for more organizations to retrain their own IT staff to understand the workings of a mainframe.

The third alternative is the not so good news. It is to get rid of the mainframes altogether and migrate applications and data to mid-range machines.

So, from a blogger’s point of view: option one means that there will be fewer people reading this; option two means that youngsters will be able to read this but won’t because it’s not on Facebook or I should have made a video of me saying the words and put it on Youtube; and option three means that no-one at all will be reading it. So, depressingly, none of them are very positive from my perspective!

Anyway, if you are still using a mainframe, make sure you fill in the user survey at www.arcati.com/usersurvey09 - time is running out. The Arcati Mainframe Yearbook 2009 will be out in early January.

Even more CSS tips

As I said about a month ago, while I’ve been designing Web sites recently – to W3C standards I might add – I have put together some CSS tips that I’d like to share with you.

10 If you are using numbered lists or bullet points
Remember to define the style.

CSS
li {
font-family: arial;
font-size: 10pt;
color: green;
}

11 Format pseudo classes in the right order - Lord Voldemort Hates Apples
Text rollover effects won’t work correctly in all browsers unless they are in the correct order in the CSS.

CSS
a:link { color: red; }
a:visited { color: yellow; }
a:hover { color: green; }
a:active { color: blue; }

12 Place an image permanently in the bottom left-hand corner of a Web page

CSS
body {
margin:10px 10px 0px 10px;
padding:0px;
background: #f5f5dc url("es.gif") no-repeat fixed left bottom;
}

13 Drawing a green line

HTML
<hr />

CSS
hr {
border: 0;
width: 80%;
color: green;
background-color: green;
height: 5px;
}

14 Making an orange XML or RSS buttons or other icons without using an image

HTML
<a class="feed" href="http://h1.ripway.com/t_eddolls/teblog.xml">FEED</a>

CSS
.feed {
border:1px solid;
border-color:#FC9 #630 #330 #F96;
padding:0 3px;
font:bold 10px arial;
color:#FFF;
background:#F60;
text-decoration:none;
margin:4px;
}

15 Centering text in a paragraph

HTML
<p style="TEXT-ALIGN: center">

16 Positioning within a container
In the example below, the … (or whatever) appear exactly 200px from the left and 150px from the top of the container box.

HTML
<div id="container"><div id="navigation">...</div></div>

CSS
#container
{
position: relative;
}
#navigation
{
position: absolute;
left: 200px;
top: 150px;
}

17 Making links more exciting

CSS
a.ttt {
font-family: arial;
font-size: 10pt;
text-decoration: none;
color: red;
cursor: pointer;
}
a.ttt:visited {
color: gold;
}
a.ttt:hover {
color: navy;
background-color: red;
font-style: italic;
cursor: pointer;
}
a.ttt:active {
background-color: navy;
color: red;
}

HTML
<a class="ttt" href="http://www.itech-ed.com/">hello world</a>

More hints and tips next time.

By the way: anyone looking for an experienced technical writer or Web designer can contact me at trevor@itech-ed.com. Also, if you haven’t completed the mainframe user survey yet, go to www.arcati.com/usersurvey09. And if you’re a vendor, then you need to complete the form at www.arcati.com/vendorentry - and there are still Yearbook sponsorship opportunities available.