Build your own Dynamic Web Applications

Using Model-View-Controller (MVC)

By Richard Mischook

It’s easy to fall into a trap and treat designing dynamic web sites in the same way one treats developing static web sites. In this article we will be looking at how the MVC design pattern works and why we should use it.

This article is part of a series on server side development exlusive to Killersites.com.

Introduction

There are lots of technologies and tools available for building dynamic web applications. These include ASP and .Net from Microsoft, J2EE from Sun Microsystems, PHP, Cold Fusion – the list goes on. Regardless of which of these technologies/frameworks one selects, there are certain common patterns that one finds show up over and over again. One of the most talked about is the MVC or Model-View-Controller Pattern and yet for those who might be used to a page-centric style of design, understanding how the MVC pattern works or the need for it can be difficult.

This article hopes to explain the MVC pattern as simply as possible. In subsequent articles we will look at a simple framework I have evolved to enable MVC development in Java without relying on outside frameworks such as Struts.

The Page-Centric

Work with Website Designers

This article is targeted at business owners, small and large who are interested in getting a web site built for them. When approaching a website design firm, or individual web designers, these preliminary questions will go a long way in forwarding the project.

Although this article is speaking to the business looking to hire a web designer, the information is also relevant to web designers and is recommended reading for people new to web design.

Questions about the site:

1. What is the goal of the web site?

That is the first question you have to answer. Do you want to sell something to end-user; do you need to e-commerce enable it? Is it a support site for your offline business, an information resource or contact point? Or is it simply a branding tool?

2. How big will it be, how many pages?

3. Do you perceive the need for any special technologies? For example, are you interested in FLASH animation, protected directories, hooking your product catalogue database into the site?

4. What is your target launch date; when do you want this

How to Font Style on Your New Webpage

There are many subtle aspects that can make a web page and a web site look messy or amateurish, one of these is too many fonts on the page.

A time honored page layout rule is that a page should have no more than two fonts appearing, otherwise the aforementioned ‘badness’ will creep in. Whenever you’re not sure about something, it is always a good idea to try it and then to try it in opposite extremes.

So in this case, that means that you should break out your HTML editor (whether it be Notepad or a wysiwyg like Dreamweaver) and create two simple HTML pages. In one page use only one font and in the other use many fonts (5 for example). Be sure to use to same text on both pages (cut and paste some text from some website or even this article would be fine…) and see for yourself how well each reads. I am sure you will find the page with only one font looks much better and is much easier to read.

Unfortunately there are only a few fonts

Memformat tabel HTML otomatis dengan JavaScript

SOMETHING TO ADD TO YOUR BAG OF TRICKS – KILLER ZEBRA TABLES

A member on the Killersites.com Forum mentioned in a post how he was working with (or trying to work with) an article he recently read by a guy named David F. Miller.

Basically, the article had some interesting JavaScript code that automatically changed the background color of every 2nd row in an HTML table. The reasons for wanting to do this are many; here are a couple of big ones:

  • To make the table look good
  • To make the table information easier to read

You can see an example here.

I want to point out a couple of things:

  1. This is for tables that are being used to present data. Think of spreadsheets, MS Excel et cetera.
  2. Typically when you’re displaying data in a table, you would be sucking it in from a database using something like PHP (articles on PHP coming soon, grasshoppers!) and in that case you would just do this in the PHP code and not bother with doing this with JavaScript.

Because of that (the PHP thing), when I first took a look at the article, I

HTML Forms: Basic Concepts

If you are new to web design in general, then you have to check out my online course on web design before you can benefit from this article to its fullest.

HTML FORMS: BASIC CONCEPTS

When the web was first invented, it was just an elegant and simple system of exchanging information with the world using a simple page paradigm. Yet one of the problems with simple web pages was that there was no way to gather information from people who were visiting a web site.

To solve this problem, some smart people came up with an extension to HTML (the language/system used to build web pages) called ‘forms.’

WHAT IS AN HTML FORM?

An HTML form is made up of a bunch of HTML tags that allow people visiting web sites to enter in information or select information from a list that can then be transmitted to the server for processing.

We all know that HTML tags are used to build a web page; some tags are used to create headers, others to create tables and yet others are used to create forms and form elements. HTML has a bunch of

can Send emails from Webpages that we create

Option 1: Browser’s built in support for sending email.

The easiest way to send an email is by using the browser’s built in support for mailto:

<a href=’mailto:someAddress@killersites.com’>Email Me!</a> 

When the user clicks on a link with the ‘mailto’ attribute written in, the browser is smart enough to know that is should open up the default email program and set the ‘to’ address to the one specified in the link.

So in this case the address would be:

someAddress@killersites.com 

You can get a little fancy by setting the ‘Subject’ field by adding this to the address:

 someAddress@killersites.com?subject=I have to break up with you because you are a nerd … 

Now that subject will be automatically inserted as well.

Advantages: Easy to do and widely supported.

Disadvantages: Spam bots can pick up the email address listed on the page (but there are ways to protect against that.) – Not all people’s machines will be able to support it. – People can see where you are sending the email.

NOTE: Whenever you create a URL there should never be any spaces in it. In this case this would

Why Style Web Pages With CSS?

The web today is a much different place than it was just 5 years ago. Technology for the web has grown in leaps and bounds and is reflected in the sites we see and the way they are built. In the past, the HTML markup language – the language that is used to build web pages, had an assortment of tags to both set the structure and the style of the page.

Today the preferred method of styling pages is something called CSS or Cascading Style Sheets. CSS is an extension to HTML, an extension whose sole task is to style pages. Before CSS, all we had to work with was HTML’s built in styling elements like the bold tag:

<b> This becomes bold</b>

There are several other tags in HTML that allow you to style your pages, but they are limited in many ways. To deal with these limitations and browser incompatibility issues, designers would resort to creating GIF or JPEG images of text rather than using raw HTML text. These images would establish the style for the pages and because HTML (at the time) simply had limited capabilities, images would allow the designers

What you need to first start creating a website

Making websites doesn’t require much at all; a text editor like Notepad and a browser to test your code and you are ready to go if you know HTML.

If you don’t know already, HTML is what makes web pages. HTML is what is called a markup language, and what HTML does basically is tell the web browser (like Internet Explorer or Netscape) how and what to display on the page.

Like any language, HTML has rules and words that have a meaning, in this case the meanings of those words are related to displaying web pages. These ‘words’ are called ‘tags’ or ‘HTML tags’, so when building HTML pages you are actually just typing out a series of HTML tags with text and images (among other things) stuck in-between.

Example: This is an HTML tag that tells the browser to make text bold:

<b> This text will be bold. </b>

The ‘b’ in-between the angled brackets ‘<>’ stand for ‘bold’. This tag tells the web browser to make whatever is in-between the <b> and </b> bold. Most HTML tags come in pairs where there is always an opening tag:

See what Acronyms are Used in Web Design

On this page we discuss some technologies commonly used in the world of the web. The aim is to slowly introduce you to these concepts so that when and if you ever need to work with any of them, you will at least have some basic knowledge of what people are talking about.

Some basic concepts by acronyms:

HTML: HyperText Markup Language -> the written language of tags that you use to create web pages.

– What is a tag?

To explain what a tag is we need to talk about page elements. Elements are the base components of an HTML page. Examples of elements are tables, paragraphs, and lists. HTML tags are used to mark the elements of an HTML file for your browser. Elements can contain plain text, other elements, or both.

To mark the different elements in an HTML page, you use tags. HTML tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>). Tags are typically paired (e.g., <B> and </B>) to start and end the tag. The end tag looks just like the start tag except for

Type of Graphics Used on the Website

The two basic types of graphics software:

There are many companies selling software to make graphics for both the web and print. All of these products have their own nuances and capabilities, but generally speaking, graphic images that have been processed by a computer can usually be divided into two distinct categories; such images are either bitmap files or vector graphics.

As a general rule, scanned images are bitmap files while drawings made in applications like Xara or Adobe Illustrator are saved as vector graphics. Yet today you can convert between these file types and even mix them.

Read on and see why Xara is the best web graphics software out there! –> Try Xara!

1. Vector illustration:

Vector graphics are images that are created using mathematical equations. These types of programs are typically used to create drawings, shapes, and lines. It is easier to create these sorts of graphics in vector illustration software than it would be in a bitmap editing software. Vector graphic files are usually very small (in kilobytes) because they only contain data about the shapes that form the drawing

2. Bitmap or image editing:

Examples of

General way for New Web Designers

Web site designers today have plenty of options in terms of tools and technologies they can use to build their web pages. Many questions come up: should we use Flash, do we need database driven web pages, do we need a shopping cart for our e-commerce web site etc …

This article takes a step back and deals with some of the fundamental questions/issues in web site design.

1. Do not use framesets in your web sites:

They are not required in most cases and framesets will kill you with search engines.

2. Do not use a ‘heavy’ background in your web pages

that distracts the users from what you are trying to present to them and makes the text hard to read. Remember what you are trying to do with your website, and I think for most, it is not trying to impress people with some tacky background tile. Keep it easy to read; there is a reason why solid colored text on a solid colored backgrounds are used often on web pages and in print.

3. Use sharp clear pictures:

This is really important, a good

What is Flash when and why to use it?

Flash is a vector animation (read about vector animation software) software, originally designed to create animations for display on web pages. Vector graphics are ideal for the web because they are so lightweight.

Over the releases of new versions of Flash, Macromedia has made Flash more and more controllable via programming, where they have it positioned as a competitor to HTML to build interactive web sites and applications such as an e-commerce store. Macromedia argues that Flash is the way to go instead of HTML because of the following reasons:

  • Flash movies load faster and save on download time because Flash is vector based whereas HTML is not.
  • Flash intelligently ‘caches’ it’s movies so they don’t have to be reloaded.
  • Flash gives the user (the person viewing/using the Flash movie) a more responsive ‘rich-client’ like experience.

All of these points are true, but they can be true for HTML pages as well (except for the vectors). I will address these points now:

Flash pages can be made to load faster, but most of the time, the way they are designed in the real world, they do not. That is not a Flash

What are Database Driven Websites and how are they going?

My new Interactive Web Developer course (released in 2016) teaches you how to create database driven websites and much more!

When I was beginning web design and web programming years back, I remember all the confusing terms, technologies, and concepts that were floating around that just made it that much more difficult to wrap my head around the whole web thing.

With that in mind, I thought that it might be a good idea to write a short and (hopefully) sweet article that will help people get a clearer understanding of what’s out there.

This article will attempt to demystify database driven web pages … also called ‘dynamic web pages’ or websites.

Don’t worry, I am not going to go into any painful mega-geek details about how to create dynamic web pages, instead I will give a brief overview to help you understand:

  1. When you would need to build dynamic web sites.
  2. What tools you have available to build them.

What are dynamic web pages?

To understand dynamic web pages, you have to understand normal or in other words ‘static’ web pages.

Typical non-dynamic web pages do not

Logical Inline Tags vs. Physical Inline Tags

Introduction

HTML is a relatively simple technology to learn, so easy in fact, that once people get just a very basic understanding, they jump into building web pages without much thought about learning anything more about the fundamentals of HTML. Because of this, many web designers are not taking full advantage of HTML and CSS. This lack of understanding of the basics, leads to problems that waste time, money, and generally makes web design more difficult.

… The differences between logical and physical tags is one of the fundamental concepts in HTML that, when understood, can have a huge impact on a web designer’s way of doing things.

Logical Tags:

In HTML there are both logical tags and physical tags. Logical tags are designed to describe (to the browser) the enclosed text’s meaning. An example of a logical tag is the <strong> </strong> tag. By placing text in between these tags you are telling the browser that the text has some greater importance. By default all browsers make the text appear bold when in between the <strong> and </strong> tags, but the point to take away from this is that the strong tag implies

Creating Content About Multimedia

In the last several months I’ve been involved in created multimedia-based software used to train medical doctors. When I was approached to do the project, I investigated the many possible methods available including Macromedia Director, Macromedia Flash, and HTA’s, among other options.

In this article I look at some of the options available to create multimedia presentations with an emphasize of introducing you to the basics of multimedia.

What is multimedia?

Multimedia is a generalized term used to describe the intermixing of different media types to create a presentation; so what we are talking about is mixing text, sound, animation, and video.

Some examples of multimedia

Probably the most obvious are websites with video or animation included. The most common seen are probably Flash based websites that nearly always contain some sort of animation and, more and more often, sound and video.

Other types of multimedia can be found in PowerPoint presentations, Director CD-ROM projects, or web pages with QuickTime or Real Video movies embedded.

How do you create multimedia presentations?

To create these presentations you need the software (often called the ‘authoring tool’) that allows you

Dos and Don’ts Website Design

Let’s discuss an important point about online content/text versus print. People read text on a computer screen at about 1/4th the speed that they do on paper. This important fact tells us that we should keep what we want to say on the web short and sweet. If some of my articles have been too long, I apologize for my flapping mouth and keyboard!

My goal with Killersites.com is to teach how to build great sites while making it as easy as possible for people. I’m trying to do this with ‘to the point’ articles and newsletters. As such I have avoided a diatribe of things like the history of HTML and left out some of the marginal options in web design. Instead I’ve focused on those things that have come up often in my own experiences over the years.

There are many options available when creating web pages, many good and many bad. The following is a list of some of those options and how I think you should deal with them.

Some things you should do and not do in your web pages:

1. No page counters: Page counters do nothing except

Tip for you who like Web Designer

Learn (at least) some basic HTML.

Whenever I suggest this to beginners they always ask why they should learn to code HTML when we have programs like Dreamweaver and FrontPage that do it all for you? The short answer is that they don’t, at least not all the time. While these programs are very useful (and I highly recommend that all web page designers learn to use one), they do have their limitations where it can be easier to hand code the HTML yourself. If you don’t know HTML, this can be a problem. You don’t have to learn everything there is about HTML, but you should learn the basics and some key tags that are used all the time:

<a href=””></a> : The link tag is the most important tag there is. HTML is all about linking documents (web pages) together and as such they form the basis of making the web work.

<table> </table> : The table tag is used to create tables. Originally it was invented to present data (like a stock report) in tabular form. Soon after, inventive HTML designers started to use them to format the entire web page by

create Styling your web page.

A quick introduction to Cascading Style Sheets, a key tool for web designers.

I was recently asked about CSS on the killersites web design forum and liking what I wrote, I decided to use the post to begin this article.

CSS is the acronym for: ‘Cascading Style Sheets’. CSS is an extension to basic HTML that allows you to style your web pages. An example of a style change would be to make words bold.

For example:

In ‘old school’ HTML, you would use the <b> tag like so:

  <b>make me bold</b>

This works fine, except that now, if you wanted to change all your text that you initially made bold to underlined, you would have to go to every spot in your page(s) and change the tag to the ‘underline’ tag.

Another disadvantage of ‘old school’ HTML:

Let’s say you wanted to make some text bold, change its font style Verdana and change its color to red – you would need a lot of code wrapped around the text:

    <font color="#FF0000" face="Verdana,
        Arial, Helvetica,

30 Ways to Increase Your Website Conversion Rate

Getting traffic to your website is great, but if that traffic doesn’t convert, it’s almost useless. This article will outline 39 proven strategies for getting your visitors to take action, whether that’s filling out a form, handing over their email address or making a purchase.

1. Include as few fields as possible.

When asking for information in an email opt-in form, ask for as little information as necessary. Here’s an example of how using one additional form field decreased conversions by 11 percent.

2. Add a guarantee.

view full post »

A web designer’s secret weapon

A fast way to build quality web sites

Now that the web has matured, the experts have discovered what works and what doesn’t work when it comes to web site design. Out of this experience come web templates; web site designs that have been tried and tested.

As with building a house, there is no longer a need to reinvent the wheel with every project – today you can select a web design template and get your website online fast!

Don’t reinvent the wheel!

As a software architect and programmer, I can tell you that a core rule in that field is to not reinvent the wheel. This basically means that if someone else has built it already, you should use it! You are wasting your time and money trying to recreate things from scratch.

Fortunately you can now select from a huge collection of proven web site styles that you can use ‘out of the box’ or use the web site template as the foundation to your own creation.

My own experience

I’ve been creating web sites since 1994-95 and have seen and tried just about all the possible ways