Monthly Archives: May 2017

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 change every time the page is loaded by the browser, nor do they change if a user clicks on a button. The only change that you will see in static web pages is to see them load and unload, like what happens when you click on a hyperlink.

In a nutshell: static web pages (normal pages you build) always look the same and the content never changes unless you load a new page or you change the page yourself and upload the new version of the page to the web server.

Dynamic pages do the opposite, they can change every time they are loaded (without you having to make those changes) and they can change their content based on what users do, like clicking on some text or an image. (I am not talking about loading a new page!)

DATABASE DRIVEN WEB PAGES

One of the most common types of dynamic web pages is the database driven type. This means that you have a web page that grabs information from a database (the web page is connected to the database by programming,) and inserts that information into the web page each time it is loaded.

If the information stored in the database changes, the web page connected to the database will also change accordingly (and automatically,) without human intervention.

This is commonly seen on online banking sites where you can log in (by entering your user name and password) and check out your bank account balance. Your bank account information is stored in a database and has been connected to the web page with programming thus enabling you to see your banking information.

Imagine if the web page holding your banking information had to be built traditionally (that is by hand,) every time your bank balance changed! Even a thousand monkeys working 24/7 drinking 5 cups of coffee a day, would not be able to keep up!

Hopefully you are starting to see why you would want a database driven site: you would want it if your information changes very often, just like in a banking site.

Database driven sites can be built using several competing technologies, each with it’s own advantages. Some of those technologies/tools include:

  1. PHP
  2. JavaScript is now ALSO being used on the server, with the engine called: Node.js
  3. Java / JSP
  4. Python
  5. Ruby
  6. ASP.NET – usually with the C# programming language

I will be writing about these technologies in future articles and newsletters. You now have them listed here for you to research on your own.

Learn about database.

To continue …

Database driven web site programming can also be called (or characterized as): ‘server side programming’.

The reason it is so called is because the ‘action’ or magic that allows the web pages to connect to the database is actually taking place on the server.

This is what happens: each time a dynamic web page is about to be sent to the browser, the server automatically builds the page and sends a standard HTML page to the browser.

The server ‘knows’ how to build the page by following the instructions provided by the programmer. This is different from say JavaScript (think drop down menus or alert boxes) that runs strictly in the web browser.

At this point many people are getting very confused, the confusion lies in the difference between server side programming (database driven web pages) versus client side programming (JavaScript).

CLIENT SIDE PROGRAMMMING – The other type of dynamic web page.

Client side (that is to say: in the browser) or what is called DOM scripting. DOM is short for Document Object Model. Back when I originally wrote this article, we used to call it ‘DHTML’, which is short for Dynamic HTML.

Dom scripting is basically using HTML and JavaScript to make the web page change it’s own content (as far as the viewer is concerned) without having to reload or load a new page.

You’ll see examples of DOM scripting on most websites these days. It is now core to the web design and development process. So many of today’s websites depend on it. In the old days, we would create fancy menus with DOM scripting (now you can do this with CSS3,) these days DOM scripting can be used to load parts of the web page automatically (called AJAX), say with the latest weather reports. Or you could use DOM scripting to create complex video games right in the web page. It’s that powerful.

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 that importance of that text. This has impact with search engines like Google who look for such tags to help figure out what the page is about.

There are many logical tags and they include:

<strong> : Strong – as above.

<em> : emphasize – usually renders (made to look like by the browsers) as italic.

<span> : a neutral inline container. – read about this distinction below.

<div> : a neutral block element. – read about this distinction below.

Logical tags, as mentioned above, have default ways in which browsers (like IE or Opera) render them. But it is understood that CSS should be used to give them their style, or in other words their ‘look’.

Physical Tags:

Physical tags on the other hand provide specific instructions on how to display the text they enclose. Examples of physical tags include:

<b> : Makes the text bold.

<big> : Makes the text usually one size bigger than what’s around it.

<font> : Used to apply a font-face (like Arial or Helvetica) and font-color.

<i> : Makes text italic.

Physical tags are more straightforward; <i> makes the text italic, <b> makes text bold and <font> is used to set the font face and color for the text.

So why use one or the other?

In a nutshell, physical tags were invented to add style to HTML pages because style sheets were not around, though the original intention of HTML was to not have physical tags. Why? Well physical tags are just messy, tedious, and are more trouble than they’re worth (for the most part). Rather than use physical tags to style your HTML pages, you should be using style sheets (also called Cascading Style Sheets or CSS). I think someone around here wrote some articles on CSS.? 🙂

Block Level vs. Inline tags

What is the point of ‘inline’ in the description of the tag categories?

In HTML, tags are either ‘inline’ or block-level elements. Block-level elements exist in their own virtual ‘box’ and are always followed by a carriage return (like hitting the ‘enter’ key after typing in some text). Inline tags (elements) become a part of the ‘flow’ of text in which they are inserted and have no ‘box’ around them and don’t have the carriage return either. An example of a block tag is a <p> tag (paragraph) and an example of an inline tag is the <b> (bold) tag. Try the tags out and you’ll see what happens to your page when you use <p> tags and <b> tags; all will be made clear once you see it for yourself.

So who cares! Right?

You should care! Once you understand the differences (it’s really not that hard if you just give yourself a chance) and once you understand that you can use CSS to change elements from being block tags to inline tags and vice versa, you will discover tremendous power in your ability to lay out your web pages.

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 to build the presentation. So if you wanted to create a Flash based ‘movie’ you need to get a program that creates them; programs like Macromedia Flash and Swish. If you wanted to create a PowerPoint presentation you need the PowerPoint program. And of course, since Killersites is all about websites, to create multimedia based web sites; you can do it with good old HTML and a few files that you can embed into the HTML page turning it into a multimedia experience.

Turning your web page into a multimedia presentation

Probably the easiest way to create multimedia rich web pages these days is using Flash. Flash files are linked to your HTML page and though they look to be an integrated part of the web page, Flash movies are actually running in their own little ‘sandbox’ very much separate from the web page. Because of that, all the work in creating the Flash movies is done in the various Flash authoring tools as mentioned above. There is actually very little in the HTML page itself except for a few lines of code that tells the browser where to get the Flash movie.

The poor man’s way of transforming your web page into a multimedia extravaganza is by using file types that your browser knows what to do with automatically and doesn’t require special multimedia plug-ins like the Flash player. For example:

•  Use links to MP3 files to add sound to your page or links to QuickTime and Windows Media files for movies.

I was recently asked for the easiest way to deliver a bunch of sound clips via a web page. Since the web designer did not know how to use Flash, I suggested that they just create MP3’s of the audio clips (it was actually a speech) and then provide links to the MP3’s and let the user download them. These days, everyone’s computer can play MP3’s so using that format for sound is a safe bet.

•  Use DHTML

DHTML is a combination of HTML, JavaScript and, many times, CSS. You can use DHTML scripting to, for example, have an image fly around the web page … among many other effects. Today just about all the browsers being used support DHTML in a consistent manner; in the old days you had to code for two different standards if you wanted something to work.

The problem with DHTML based animations is that it is hard to create and you need to be a programmer (for the most part). If you want animation or special effects of some sort, you are typically better off using Flash. The plus side to DHMTL is that you don’t need to have the Flash plug-in installed in the users browser and you don’t need another program to create your animated effects. You can just create your effects with JavaScript in a simple text editor like Notepad.

A side note: To make DHTML easier, Macromedia Dreamweaver packaged up several DHTML scripts that you can simply point and click to create. They are fairly basic but still could be useable in some situations.

Use the right technology for the job

Now that we covered some of the basics, let’s sum up things with the right tools for some common applications:

•  Simple office presentation / slide shows: Microsoft PowerPoint

There is no question that PowerPoint is the easiest way to go when it comes to creating slide shows with simple transitions and some video and audio elements. PowerPoint is widely used and readily accepted by most audiences. You probably won’t win any multimedia design awards, but you will be able to put together an effective presentation very quickly.

•  Web delivered multimedia presentations: Flash or Director

If you are doing straight 2d animations and sound and video all having to interact with each other, Flash is probably your best bet. If you need interactive 3D environments or objects, then you may want to take a look at Macromedia’s Director. Since version 8, Director has a built in 3D engine that seems to be pretty powerful, even for web delivery.

•  Simple sound or video only presentations: Link to specific media elements

If all you need is to allow users to listen to or see some audio or video clips, and there is no interaction between the video and the audio with the rest of the page/presentation, then simply create links to these files where users can choose to download what they.

This last option is probably the easiest for most since you don’t have to learn another piece of software or how to program; simple HMTL is all you need to put this together.

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 make you look like an amateur, mess with your design, and tell people information about your site you probably don’t want them to know! If you want to know how many people are hitting your site, just ask your host for server stats. Any host worth it’s salt should be able to provide you with detailed stats that make page counters look stupid.

2. Forget blinking or flashing text: The only place you see blinking and or flashing text is on the neon signs of naked bars or web sites made in the mid 90’s! People don’t like them and expect to see naked people inside sites or buildings that have them … enough said.

3. Make your titles on your web page make sense: One of the core attributes of a web page is its title. In between the <title> </title> tags you can specify the page’s title as it appears in the browsers top title bar and in the search engine results.

People pay attention to page titles, so you should make sure that they are clear. If you have a page on how to take care of dogs and you happen to have a dog named ‘Jimmy’ don’t title your page: ‘How to look after Jimmy and his furry friends.’ You should title you page something like: ‘How to take care of dogs.’

4. Don’t force people to download a new browser of special plug-in to see your site: Unless you have a site that people are dying to see, why limit your audience because you want to use some special features in a browser or a plug-in like Flash. Today, with proper use of CSS and HTML, you can present fantastic looking pages without having to jump through the hoops old timers like me had to when garbage browsers like Netscape 4 were being used in great numbers.

5. Think twice before using framesets: In the olden days you could argue a use for framesets because of HTML’s lousy layout capabilities. Today with CSS positioning being well supported by all the major browsers there is no need to use framesets for just about 99.9% of websites. Why don’t you want to use framesets you ask? Well beginners tend to have trouble creating and using them properly. Framesets tend to make websites more complicated than they need to be and finally they can cause you all kinds of problems with the search engines.

6. Don’t try any stupid cheat tricks in an attempt to fool the search engines: In the past we webmasters developed various nefarious (disreputable) methods in an attempt to get higher rankings in the search engines. Tactics included putting hundreds of key words on the pages as invisible text, etc … These tactics may have had some limited success in the past, but those days are long gone. Try to fool Google (the king of search engines) and you and your web site will die a horrible and painful death! I will not describe how to get high rankings now, but keep this is mind: good content honestly presented is the foundation of high rankings and high traffic for your site.

7. Chat rooms: Most people don’t give a crap about chat rooms. And worse than having a chat room is having an empty chat room! Who wants to hang out at a club that has nobody inside? So unless you have a web site with tens of thousands of visitors a month and is of a subject that might necessitate a chat room, don’t do it.

8. Flash intros: I am guilty of this as much as the next guy. A few years back Flash intros where all the rage, not sure if anyone knew why we ‘needed’ them, but as it turns out the ‘skip intro’ button is the 2nd most clicked on the web today. Don’t waste your time on Flash intros and in my opinion Flash should only be used in special situations.

9. Under construction pages: Just forget it, if the page is not ready, don’t put it up. If you have links that are pointing to the pages, disable them until your page is ready. If your page is truly ‘under construction’ and has content on it that is ready to be seen by your web surfers, just post a ‘last updated’ date and make sure you get the new content in place soon. What ever you do, don’t put one of those cheesy ‘under construction’ images on the page.