Adriatico's Blog

Writing is a skill like playing tennis. You have to practice. There is a lot of extra work you can do on your own to help you become a better writer. Doing these activities, you’ll practice your writing, practice your penmanship, and practice forming opinions. To improve your writing, pay attention when you read. Notice how the author of your book organizes thoughts and expresses ideas. You can do the same thing.Take the model college essays and write them out by hand. Write them several times until you get a feel for the use of transition phrases and other cohesive devices. Try to understand how the details support the topic sentences. Pay attention to the introductions and conclusions. Read more. A lot of research has shown that reading improves your writing. Reading will build your vocabulary and your understanding of the way ideas are expressed. Read every chance you get. An essay is made up of sentences. If you have some extra time, for example, while waiting for someone, don’t just stare at the wall. Buy a notebook to record your thoughts and your writing. Don’t use this notebook for anything but for essay editing and writing practice only. This notebook will be your private classroom.

Keep a journal. Record the events of the day. Tell what happened and what you felt about the event. Record what you thought about the events and what conclusions you reached. This will give you practice in writing about your opinions. Review these notes periodically to see if any of these opinions can be used in your essays. When events happen, take notes. Later in the day reread your notes and turn them into sentences. Turn the sentences into paragraphs. Write every day. Give yourself a gift of time. Spend five minutes a day writing, and do it faithfully everyday. Once a week, assign yourself a topic and write an essay in thirty minutes. Go back over your writing frequently. The more you write, the better writer you will become. You may think of a better, or a different, way of expressing a thought. Use the blank page to experimentwith different ways of expressing the same idea. When you rewrite, imagine you are writing for a different audience. The first time you wrote for yourself. How would you change your writing if your friends were to read it? Your teacher? Your mother? A stranger?

Although it’s true that dice have no memory, it has not only been my experience, but that of others as well, that the game runs in cycles or streaks, as it were, and these streaks can last a long time. When the dice are hot, number after number comes up to the delight of the right bettor and the dismay of the gambler betting against the dice. Conversely, when the table is cold and right players are being destroyed by an endless succession of point, the wrong bettors are shouting with glee at the cold dice. And these cold streaks seem to go on and on. Aggressive betting strategies are devised to take advantage of streaks so that, when they occur, we can win the most money in the shortest possible time. Like all events at the craps table, because of the random nature of the dice, neither hot nor cold streaks can be predicted. But when they happen and you are in the middle of a streak, it’s time to get loose and do some real gambling to make some real money. How do you know when a hot roll is in progress? You know because the dice keep coming up numbers, and these numbers seem to repeat endlessly, while points are continually being made. You might not have anticipated the hot roll, but once involved in it, you should make full use of its potential for profits.

I also use to play awesome slot games. Although you can’t apply these winning strategies on the slot games but you will surely have fun. To read about slot machine just go to wiki slot games for more information, tips and techniques.

When playing in a private game, your initial attitude should be one of caution, and you should be in no hurry to get your bets down. Stand around for awhile and watch the way the dice bounce. Make sure that they are rolled against some kind of firm backboard. Don’t play where only a blanket is spread on a floor and the dice are rolled without striking any barrier. If you feel secure and believe that the game is on the level, then make your first bet; but, if you have any doubts about its honesty, forget about action. Don’t be a sucker. In the private game, the wrong player has an advantage over the right bettor, because the 12 is not barred as a winning bet to those who bet against the dice. If you want to take advantage of this small edge, always bet wrong on the come-out roll.
When I wasn’t the shooter, I’d always try to cover the shooter’s center bet, giving myself that 1.4% edge. If a point was other than the 6 and 8, I’d rarely give, odds, but if it was a 6 or 8, I was allowed to lay even-money against the point. Occasionally, a shooter would get on a fantastic roll and beat me for the evening but my 1.4% edge on the come-out and my 9.09% advantage on the 6 and 8 points eventually prevailed. After I took their money in poker, I cleaned them out in craps. And that’s my advice to you. Bet wrong and if you can lay even-money on the 6 and 8, pour it in. If you must give 6-5, which are the correct odds, you can either lay the odds or not. It doesn’t really matter because it’s an absolutely even bet, and the right player will have no advantage on the bet. You’ll then have to be satisfied with your 1.4% edge—and if the slots casinos are happy about this advantage, you should be too. Of course, if you really want to gamble, you can do so with impunity in an honest private game because, at worst, with single odds, betting right, you’re giving the wrong bettor only 0.8% on your wagers, and if you bet wrong and lay odds, you have the edge. But, above all, be certain that the game is on the level. With this advice, I don’t see how you can lose. If you seek out honest games, eventually you’ll find one where 6s and 8s are bet against at even-money, and that’s your chance to pick up some quick cash. For those who want to try playing in a united states online casinos, better to try this game guide for the best online casino roulette. It will really helps you to enjoy playing casino online.

In choosing our basic gambling strategies, we must take several factors into consideration. First of all, in order to beat the house at casino craps, we must understand which bets are best for us and avoid making foolish or unprofitable wagers. Besides knowing what bets to make, we should also know exactly how many bets to make in succession and how much money to have out on the layout at anyone time. If we have too many bets working, a short losing streak will wipe out your bankroll in no time at all. If we don’t have enough wagers on the layout, we won’t be able to take advantage of a “hot roll” and thus will miss an opportunity to make a lot of money from one roll. For sometimes, try to visit usa casinos or yahoo casinos for the top rated lists of online casinos and learn more about slot games .

These betting strategies will permit us to conserve our bankroll while allowing for the possibility of maximizing our profits. You must also have an adequate bankroll when using these strategies. If our bankroll is too small, we”ll find ourself unable to take advantage of favorable situations, and will, in effect, be playing with “scared money.” Scared money is inadequate funds and forces us either to hedge our bet when we should be bold, or worse, causes-you to’ make foolish bets in the hope of winning a lot of money on relatively small wagers. To do this, we must make center proposition wagers which give the casino its greatest edge over us. Therefore, an adequate bankroll is of prime importance.

System Boundaries Identification
Let’s establish the scenario. We have been called by a local car dealer to submit a proposal about a new information system. The stated goal is to produce reports about car sales and to help track the car inventory. Reports are, of course, an output of the future system. The idea hidden behind reports could be to improve sales, to understand delivery delays, or to find out why some cars disappear. The data structure itself is probably not really important in the users’ opinion, but we know that this structure matters to the developers who produce the required output.
It’s important to first look at the project scope, before starting to work on the details of the system. Does the project cover:

• The complete enterprise

• Just one administrative area

• Multiple administrative areas

• One function of the enterprise

When preparing a data model, the biggest challenge is probably to draw a line, to clearly state where to stop. This is challenging for various reasons:

• Our user might have only a vague idea of what they want, of the benefits they expect from the new system

• Conflicting interests might exist between our future users; some of them might want to prioritize issues in a different way from others, maybe because they are involved with the tedious tasks that the new system promises to eliminate

• We might be tempted to improve enterprise-wide information flow beyond the scope of this particular project

It’s not an easy task to balance user-perceived goals with the needs of the organization as a whole.

Modular Development
It is generally admitted that breaking a problem or task into smaller parts helps us to focus on more manageable units and, in the long run, permits us to achieve a better solution, and a complete solution. Having smaller segments means that defining each part’s purpose is simpler and that the testing process is easier – as a smaller segment contains less details. This is why, when establishing the system boundaries, we should think in terms of developing by modules. In our case study, a simple way of dividing into modules would be the following:

• Module 1: car sales

• Module 2: car inventory

Model Flexibility
Another point not directly related to our user but to us as developers is: can the data model be built to be flexible and more general? This way, it could be applied to other car dealers, always keeping in mind contract issues between the developer and the user. (Who will own the work?) Should the data structure be developed with other sales domains in mind? For instance, this could lead to a table named goods instead of cars. Maybe this kind of generalization can help, maybe not, because data elements description must always remain clear.

Document Gathering
This step can be done before the interviews. The goal is to gather documents about this organization and start designing our questions for the interviews. Of course, a data model for car sales has some things in common with other sales systems, but there is a special culture about cars. Another set of documents will be collected during the interviews while we learn about the forms used by the interviewees.

General Reading
Here are some reading suggestions:

• Enterprise annual report

• Corporate goals statement

• President’s speech

• Publicity material

• Bulletin board

Forms
The forms, which represent paperwork between the enterprise and external partners, or between internal departments, should be scrutinized. They can reveal a massive amount of data, even if further analysis shows unused, imprecise, or redundant data. Many organizations suffer from the form disease –a tendency to use too many paper or screen forms and to produce too complex forms. Nonetheless, if we are able to look at the forms currently used to convey information about the car inventory or car sales, for example, a purchase order from the car dealer to the manufacturer, we might find on these forms essential data about the purchase that will be useful to complete our data collection.

Existing Computerized Systems
The car dealer has already started sales operations a number of years ago. To support these sales, they were probably using some kind of computerized system, even if this could have been only a spreadsheet. This pre-existing system surely contains interesting data elements. We should try to have a look at this existing information system, if one exists, and if we are allowed to. Regarding the data structuring process itself, we can learn about some data elements that are not seen on the paper forms. Also, this can help when the time comes to implement a new system by easing transition and training.

Interviews
The goal for conducting interviews is to learn about the vocabulary pertaining to the studied system. This is about data structures, but the information gathered during the interviews can surely help in subsequent activities of the system’s development like coding, testing, and refinements.

Finding the Right Users
The suggested approach would be to contact the best person for the questions about the new system. Sometimes, the person in charge insists that he/she is the best person, it might be true, or not. This can become delicate, especially if we finally meet someone who knows better, even if this is during an informal meeting.
Thinking about the following issues can help to find the best candidates:

• Who wants this system built?

• Who will profit from it?

• Which users would be most cooperative?

Perceptions
During the interviews, we will meet different kinds of users. Some of these will be very knowledgeable about the processes involved with the car dealer’s activities, for example, meeting with a potential customer, inviting them for a test drive, and ordering a car. Some other users will only know a part of the whole process, their knowledge scope is limited. Due to the varying scope, we will hear different perceptions about the same subject.

Asking the Right Questions
There are various ways to consider which questions are relevant and which will enable us to gather significant data elements.

Existing Information Systems
Is there an existing information system: manual or computerized? What will happen with this existing system? Either we export relevant data from this existing system to feed the new one, to completely do away with the old system, or we keep the existing system – temporarily or permanently.

Chronological Events
Who orders a car for the show room and why; how is the order made – phone, fax, email, website; can a car in the showroom be sold to a customer?

Sources and Destinations
Here we question about information, money, bills, goods, and services. For example, what is the source of a car? What’s its destination? Is the buyer of a car always an individual, or can it be another company?

Urgency
Thinking about the current way in which you deal with information, which problems do you consider the most urgent to solve?

Avoid Focusing on Reports and Screens
An approach too centered on the (perceived) needs of the users may lead to gaps in the data structure, because each user does not necessarily have an accurate vision of all their needs or all the needs of other users. It’s quite rare in an enterprise to find someone who grasps the whole data picture, with the complex inter-departmental interactions that frequently occur.

A Web Page, Step by Step

You got a look at an (X)HTML document but now you’ll get to create one yourself and play around with it in the browser. The demonstration in this post has five steps that cover the basics of page production.

• Step 1: Start with content. As a starting point, we’ll add raw text content and see what browsers do with it.

• Step 2: Give the document structure. You’ll learn about (X) HTML elements and the elements that give a document its structure.
• Step 3: Identify text elements. You’ll describe the content using the appropriate text elements and learn about the proper way to use (X)HTML.
• Step 4: Add an image. By adding an image to the page, you’ll learn about attributes and empty elements.
• Step 5: Change the look with a style sheet. This exercise gives you a taste of formatting content with Cascading Style Sheets.

Before We Begin, Launch a Text Editor

This section shows how to open new documents in Notepad and TextEdit. Even if you’ve used these programs before, skim through for some special settings that will make the exercises go more smoothly. We’ll start with Notepad; Mac users can jump ahead.

Creating a new document in Notepad (Windows users)

These are the steps to creating a new document in Notepad on Windows XP.

1. Open the Start menu and navigate to Notepad (in Accessories). 1
2. Clicking on Notepad will open a new document window, and you’re ready to start typing. 2
3. Next, we’ll make the extensions visible. This step is not required to make (X)HTML documents, but it will help make the file types more clear at a glance. In any Explorer window, select “Folder Options…” from the Tools menu 3 and select the “View” tab. 4 Find “Hide extensions for known file types” and uncheck that option. Click OK to save the preference and the file extensions will now be visible.

Creating a new document in TextEdit (Macintosh users)
By default, TextEdit creates “rich text” documents, that is, documents that have hidden style formatting instructions for making text bold, setting font size, and so on. (X)HTML documents need to be plain text documents, so we’ll need to change the Format.

1. Use the Finder to look in the Applications folder for TextEdit. When you’ve found it, double-click the name or icon to launch the application.
2. TextEdit opens a new document. You can tell from the text formatting menu at the top that you are in Rich Text mode 1. Here’s how you change it.
3. Open the Preferences dialog box from the TextEdit menu.
4. There are three settings you need to adjust: Select “Plain text”. Select “Ignore rich text commands in HTML files”. Turn off “Append ‘.txt’ extensions to plain text files”.
5. When you are done, click the red button in the top-left corner.
6. Quit TextEdit and restart it to open a new document with the new Plain Text settings. The formatting menu will no longer be on the new document.

Step 1: Start with Content

Now that we’ve got our new document, it’s time to get typing. A web pagealways starts with content, so that’s where we begin our demonstration.

Step 2: Give the Document Structure

Introducing… the HTML element

Basic document structure

Step 3: Identify Text Elements

Introducing…semantic markup

Block and inline elements

Default styles

Step 4: Add an Image

Empty elements

Attributes

Here’s what you need to know about attributes:

• Attributes go after the element name in the opening tag only, never in the end tag.

• There may be several attributes applied to an element, separated by spaces in the opening tag. Their order is not important.

• Attributes take values, which follow an equals sign (=).

• A value might be a number, a word, a string of text, a URL, or a measurement depending on the purpose of the attribute.

• Always put values within quotation marks. Although quotation marks aren’t required around all values in HTML, they are required in XHTML. You might as well do it the more future-compatible way from the start. Either single or double quotation marks are acceptable as long as they are used consistently, however, double quotation marks are the convention.
• Some attributes are required, such as the src and alt attributes in the img element.
• The attribute names available for each element are defined in the(X)HTML specifications; in other words, you can’t make up an attribute for an element.

Step 5: Change the Look with a Style Sheet

Depending on the content and purpose of your web site, you may decide that the browser’s default rendering of your document is perfectly adequate. However, I think I’d like to pretty up the Black Goose Bistro home page a bit to make a good first impression on potential patrons. “Prettying up” is just my way of saying that I’d like to change its presentation, which is the job of Cascading Style Sheets (CSS).

The previous post focused on issues relevant to graphical browsers used on desktop or laptop computers. It is critical to keep in mind, however, that people access content on the Web in many different ways. Web designers must build pages in a manner that creates as few barriers as possible to getting to information, regardless of the user’s ability and the device used to access the Web. In other words, you must design for accessibility.
Accessibility is a major topic of discussion in the web design world, and a priority for all web designers. While intended for users with disabilities such as poor vision or limited mobility, the techniques and strategies developed for accessibility also benefit other users with less-than-optimum browsing experiences, such as handheld devices, or traditional browsers over slow modem connections or with the images and JavaScript turned off. Accessible sites are also more effectively indexed by search engines such as Google. The extra effort in making your site accessible is well worth the effort.

Users with disabilities

There are four broad categories of disabilities that affect how people interact with their computers and the information on them:

• Vision impairment. People with low or no vision may use an assistive device such as a screen reader, Braille display, or a screen magnifier to get content from the screen. They may also simply use the browser’s text zoom function to make the text large enough to read.
• Mobility impairment. Users with limited or no use of their hands may use special devices such as modified mice and keyboards, foot pedals, or joysticks to navigate the Web and enter information.
• Auditory impairment. Users with limited or no hearing will miss out on audio aspects of multimedia, so it is necessary to provide alternatives, such as transcripts for audio tracks or captions for video.
• Cognitive impairment. Users with memory, reading comprehension, problem solving, and attention limitations benefit when sites are design ed simply and clearly. These qualities are helpful to anyone using your site.

The lesson here is that you shouldn’t make assumptions about how your users are accessing your information. They may be hearing it read aloud. They may be pushing a button to jump from link to link on the page. The goal is to make sure your content is accessible, and the site is as easy to use as possible.

The mobile Web

The increased popularity of the Web, combined with the growing reliance on handheld devices such as cell phones, PDAs, and palm-top computers, has resulted in web browsers squeezing into the coziest of spaces.

Although most content accessible on mobile devices has been developed specifically for that type of browser, an increasing number of devices now include microbrowsers capable of displaying the same web content that you’d see on your PC. Microbrowsers are designed to accommodate limited display area, lower memory capacity, and low bandwidth abilities. Some have only basic HTML support and others support the current web standards.
One limitation of handheld devices is screen size. Mobile displays are roughly only 240 pixels square, although some have dimensions as small as 128 pixels or as large as 320. That’s not much room to look at a typical web site. Mobile browsers deal with the limited screen size the best they can. Some shrink the page to fit by displaying the text content as it appears in the HTML source document, and resizing the images to fit the screen. Others simply allow horizontal scrolling.

Dealing with diversity

The best way to accommodate the needs of all your visitors is to design with accessibility in mind. Accessible design not only helps your disabled visitors, but also those using the Web on the go or under any less-than-ideal conditions. You’ll also improve the quality of your content as perceived by search engine indexing programs.
The W3C started the Web Accessibility Initiative to address the need to make the Web usable for everyone. They developed the Web Content Accessibility Guidelines (WCAG) to help developers create accessible sites.

While accessibility and the techniques for achieving it are vast topics, I’ve summarized some of the guiding principles and provided pointers to useful resources here.

• Start with clean HTML. When your source document has been marked up with appropriate, meaningful HTML elements and the content appears in a logical order, your content will make sense in the widest variety of circumstances, whether it is read aloud or displayed on a tiny handheld screen.

• Provide alternatives. Always provide alternatives to non-text content such as alternative text or long descriptions for images, transcripts for audio, and captions for video content, to better serve users with various disabilities.

• Allow text to resize. If you use style sheets to specify font size, do so in relative measurements such as percentages or ems (a unit of measurement for text equal to a capital “M” ) so that users can resize it with the browser’s “text zoom” feature (when available).

• Don’t put text in graphics. Although it may be tempting to control the typography of a headline by putting it in a graphic, doing so makes it less accessible by removing that content from the document. It also prevents users from resizing the text.

• Use accessibility features when creating HTML tables and forms. There are a number of attributes in HTML 4.01 and XHTML that improve accessibility by explicitly labeling columns or form fields. They’re only useful if you take the time to use them correctly.

• Be careful with colors and backgrounds. Be sure that there is plenty of contrast between the foreground and background colors you specify. When using background images, be sure to also specify a similarly colored background color so text is legible, should the image not load properly.

THE NATURE OF WEB DESIGN

As a web designer, you spend a lot of time creating pages and tweaking them until they look good in your browser. Before you grow too attached to the way your page looks on your screen, you should know that it is likely to look different to other people. That’s just the nature of web design—you can’t guarantee that everyone will see your page the way you do. The way your site looks and performs is at the mercy of a number of variables such as browser version, platform, monitor size, and the preferences or special needs of each individual user. Your page may also be viewed on a mobile device like a cell phone, or using an assistive device like a screen magnifier or a screen reader. This unpredictable nature of the Web is particularly challenging if you have experience designing for print, where what you design stays put. As a print designer who made the transition to web design, I found I needed to let go of controlling things such as page size, typography, and precise color. Having a solid understanding of the web environment allows you to anticipate and plan for these shifting variables. Eventually, you’ll develop a feel for it. This post looks at the ways in which browsers, user configurations, platform, connection speed, computer monitors, and alternative browsing environments affect the design and functionality of web pages. It suggests some tips for coping along the way.

Browser Versions

One of the biggest challenges in designing for the Web is dealing with the multitude of browsers in current use. Although the current version of Microsoft Internet Explorer running on Windows makes up the lion’s share (60 to 80% as of this writing), there are at least a dozen browser versions that web developers pay attention to, and hundreds more obscure or antiquated browsers still in use. See the sidebar, Browser Roll Call, for more information on relevant browsers.

In the no-so-distant past, browsers were so incompatible that web authors were forced to create two separate sites, one for Internet Explorer and one for Netscape (the only two players at the time). Fortunately, things have improved dramatically now that browsers have better support for web standards established by the World Wide Web Consortium (W3C for short). The situation will continue to improve as older, problematic browser versions such as Internet Explorer 5 and Netscape 4 fade out of existence.
Fortunately, nearly all browsers in use today support HTML 4.01 and XHTML standards, with only a few exceptions. That doesn’t mean that an (X)HTML document will look identical on all browsers—there may still be slight differences in the default rendering of text and form elements. That’s because browsers have their own internal style sheets that determine how each element looks by default.
Instead, the new challenge for cross-browser consistency comes in the varying support of certain aspects of Cascading Style Sheets (CSS). Although most of the basic style sheet properties can be used reliably, there are still some bugs and inconsistencies that may cause unexpected results. Figure 3-1 shows how the same web page may be rendered differently based on the browser’s support of CSS.

Coping with various browser versions

How do professional web designers and developers cope with the multitude of browsers and their varying capabilities? Here are a few guidelines.

Don’t sweat the small stuff. As a web designer, you must allow a certain amount of variation. It’s the nature of the medium. What is important isn’t that form input boxes are all precisely 15 pixels tall, but that they work. The first lesson you’ll learn is that you have to let go.

Stick with the standards. Following web standards—(X)HTML for document structure and CSS for presentation—as documented by the W3C is your primary tool for ensuring your site is as consistent as possible on all standards-compliant browsers (that’s approximately 99% of browsers in current use).

Start with good markup. When an (X)HTML document is written in logical order and its elements are marked up in a meaningful way, it will be usable on the widest range of browsing environments, including the oldest browsers, future browsers, and mobile and assistive devices. It may not look exactly the same, but the important thing is that your content is available.

Don’t use browser-specific (X)HTML elements. There are markup elements and attributes out there that work only with one browser or another, a remnant from the browser wars of old. Don’t use them! (You won’t learn them here.)

Become familiar with the aspects of CSS that are likely to cause problems. Using style sheets effectively takes some practice, but experienced developers know which properties are “safe,” and which require some extra tweaks to get consistent results on all current browsers.

Continuation from my last post. “Tutorial | Create Custom CSS Skin”.

In this section of the tutorial you will actually create the new skin that uses your custom images for buttons, and some other changes.
To start creating the skin, follow the next steps:

1. Duplicate the aqua folder in the includes/skins folder in your site root. Rename the duplicate with the same name as the desired skin. Since the main color of this template is green, let’s name the skin green.
2. Copy the button_big.gif and button_smallest.gif files from the zip package (or the folder where you created them) into the includes/skins/green/images folder. As mentioned in the previous page, the images folder stores all graphical elements used by the CSS files. When asked if you want to overwrite the existing files, click Yes. Also, copy the preview.gif file over the existing one in the includes/skins/green folder. This will allow you to identify the skin when selecting it in Dreamweaver.
3. Through this action, you have replaced the original buttons with the custom created ones. The buttons are already changed.
4. In order to see what changes are made, you must apply the skin. To do so, open the InterAKT Control Panel > CSS Skin and from the drop-down menu select the green entry.
5. Now upload the includes folder to your server. Notice how all buttons have already changed to the new images, without writing or changing a line of CSS code – for all pages: list, form and contact form.
6. If you want to use buttons of a different size however, you must edit the nxt.css and tng.css file, the section corresponding to each button type (big and smallest) and set the new width and height.
7. The next step into creating a new skin is to replace the color used when highlighting list rows. At this point, it still uses the dashes if gray from aqua.
8. For the highlight colors, there are two options to set in the CSS file: the color to use when moving the mouse over each row, and the one to use when the row is checked (after being clicked once). To alter them, you must change the following CSS sections:
   /* selected row (checkbox is clicked) */ .KT_tnglist tr.KT_highlight { background-color: #E2E2E2; } .KT_tnglist tbody tr.KT_over { background-color: #E2E2E2 ! important; }
9. The first color to set is when the row is selected. Let’s change the shade of gray to a shade of green: #BACDA0.
10. The second color to change is the color the row takes when the mouse is over it. Change it to #84D082. Save and upload the nxt.css file.
11. The last element to change regarding the NeXTensio list is the way even rows are colored. The CSS code handling this is the following: .KT_tnglist tr.KT_even { background-color: #F2F2F2; }
12. To display even rows in a different shade, replace the existing color (#F2F2F2) to #D5E6C1. Upload the nxt.css file and refresh the page. Results are immediate.
13. When adding new links to a list or form, you might want to give them the same look as the rest. In order to benefit from the automatic conversion to a button, and the usage of skins for all manually added links, you need to set their style property to use the KT_link class.

These are the first steps in creating a skin to integrate MX Kollection elements into your site. Just a few image editing operations, some CSS knowledge and you’re off.

In this tutorial you will learn how to adapt the MX Kollection 3 elements to better fit your existing design and style. All this is done by using the fact that most of the HTML elements inserted by the MX Kollection 3 wizards and server behaviors use CSS files.
Besides choosing from one of the skins provided, you can also create a skin that integrates with your existing site smoothly, in a simple manner.
The application used in this tutorial is the web-site of a small company, that uses for the design an existing template, and for the dynamic elements MX Kollection3 Bundle.
The modules needed to complete this tutorial are:

• The Transaction Engine

• NeXTensio

For the basic operations requested in order to create a new skin, basic knowledge of graphic editing is required, while for more advanced changes, you will need some knowledge of CSS.
In this tutorial, you will customize an application that has been already created, that contains three
pages:

• A NeXTensio List used to display the company products

• A NeXTensio Form used in conjuncture with the list, to allow editing of elements

• A Contact Form, that allows users send their messages through e-mail to the company.

The application uses a template design, and all that has to be changed are the list, form and contact form appearance, through the CSS files.

The tutorial wil not present how to create the NeXTensio list or form, or the contact form. These elements can be found in one of the other tutorials (for the NeXTensio list and form, see the Job site tutorial > Improve the Job Site > Receive job ads by e-mail ; to learn how to create the contact form that sends the e-mail message, see the How to Send Form Contents by E-mail (without using a database) tutorial. ).

The pages look as follows in the browser (no customization yet):

• The NeXTensio product list
• The NeXTensio form for one element
• The contact form

Planning the application

This first section of this tutorial helps you create all the files and database tables needed for the application.
Before you start building this application, make sure you have a correctly configured Dreamweaver site, and a working database connection. For more instructions regarding such actions, consult the Getting started help file, which can be found in Help -> InterAKT -> Getting Started.
Through the tutorial, you will have to create several files in your site’s root. The file structure will look as in the example below, and you can create it easily by unpacking the zip file corresponding to your server model from \tutorials\Custom CSS Skin\ in your site root.

Besides these files that are the actual pages that will be viewed from the browser, some more files and folders will appear in your site structure:

• Some images, that come with the site template

• The Dreamweaver created Connection folder

• The includes folder, created when an extension is used on a page.

Included in the zip file you can also find the template that has been used in the tutorial, as well as the new skin’s images and CSS files.
After having dealt with the file and folder structure, it is time to create the database structure that will be used throughout the site’s pages. The database is simple in nature, as it is not the scope of this tutorial, and contains only two tables:

• product_prd – the table that stores the company’s product list

• category_ctg – this table stores the different product categories.

The scripts already contains some data, in order for you to easily view the results.
Next, open the main index page and create a new connection named connAds and configure it to connect to your newly created database.

Create elements needed for the customization

The NeXTensio list and form, as well as the contact form will replace the section containing text in the image above. However, none of the existing skins match the selected design. None of the skins use green for buttons or backgrounds.
The finished application must display links as buttons, and the button styles must match the general design: to use some green on the background.
The easiest way to start when creating a new skin is to start from an existing one, and modify its elements to integrate it into the design, as shown in the User Manual. The skin used as a basis for this tutorial is the Aqua skin.
The first step to take before starting any work is to identify the elements you need changed. To accomplish this, open the pages in the browser, and decide which elements must be changed for each of them:

1. For the NeXTensio List: all buttons on the page: the buttons that replace the edit and delete links, the top and bottom rows buttons for adding a record, editing and deleting multiple records, and the navigation buttons.
2. For the NeXTensio Form:all available buttons.
3. For the Contact Form: only the submit button for the form must be changed, to match the rest of the site.

The main focus will be on the buttons. These must be created as images with a photo editing software (Fireworks, Adobe Photoshop, etc), based on the site color scheme.
To find out how many and what size the new images must be, open the includes/skins/aqua/images folder. In this folder, all images used for the skin are stored: buttons, backgrounds, widget and error elements. The files that pose the most interest at this point are:

• button_big.gif – it is displayed as the buttons on the top and bottom row

• button_small.gif – which is not used in the current skin
• button_smallest.gif – used for all other buttons on the list, form and contact
  form.

In order to see exactly which files are used by the skin and in which manner, simply note down the styles used by the different elements as shown by Dreamweaver, and then open the nxt.css file – for the NeXTensio list and form, and the tng.css file – for the contact form. Locate the style classes noted earlier, and check the files that are used.
For example, the Add new link on the NeXTensio bottom and top row uses the KT_bottombuttons
class. This class is defined in the nxt.css file.

As you can notice from the code above, when viewed as buttons, the image used is images/button_big.gif. The path is relative to the CSS file, therefore the actual folder is the one specified earlier. Another important element supplied by the CSS code is the size of the image to use. In this case, the image to use for the button must have a width of 110 pixels, and a height of 20 pixels.
Do the same for the other buttons, to discover the file names and sizes
The edit and delete links shown next to each record in the NeXTensio list use the button_smallest file, with the following size: width: 50 pixels and height 20 pixels.
Once the required elements for the customization are identified, you can start creating them. If using the template provided with the tutorial, the button replacement images are also provided in the zip package.
Once the new images for the buttons are created, you can start creating the actual skin, and applying
it onto your site.

Will continue on the next post. “Tutorial | Create the new skin”.