Web Design IDEs

Hi Everyone,

I have learnt web design techonologies at my university and also tried my hands on the new HTML5 and CSS3 web standards. I still know how to perform web programming with hands on knowledge and a refresher on the coding syntaxes and API libraries.

I have used Microsoft Frontpage and Macromedia Dreamweaver (now Adobe Dreamweaver CSS 5.5). I have not tried the new designer from Microsoft, Microsoft Expressions.

The best IDE for web development is definitely Adobe Dreamweaver CS 5.5. It is the most extensive development environment today. It is also integrated with other Adobe products such as Adobe Fireworks, Adobe Flash, Adobe Illustrator and Adobe Photoshop. The latest version (5.5) also supports HTML5, CSS3 and jQuery technologies. Now it also has intelligent coding built in and there are multiple preview screens for pc and mobile devices. Drag and drop capabilities are also available. Dreamweaver has the most complete web development tools so far.

Microsoft Frontpage is a older webpage development tool that comes with Microsoft Office. It has built in drag and drop and publishing capabilites. It uses a lot of frames in the web design back then. Now, it is replaced by Microsoft Expressions. Expressions also comes with newer features such as HTML5 and CSS3 integration, dynamic website support (PHP, Javascript, CSS, Silverlight, Flash, Windows Media support and etc) and browser preview comparisons (IE, Safari, Firefox). We can compare how a website looks like between web browsers. Overall, it is much improved over Microsoft Frontpage.

Overall, Adobe Dreamweaver remains my best option for web development. However, it does not come cheap. It is quite expensive. I can't wait to get my hands on it.

This concludes the IDE posts that I am writing. 

My overall favourite programming languages:

1. C#.NET / Java
2. HTML5 / CSS3
3. RPG Programming
4. JavaScript / VBScript
5. SQL Server
6. C++
7. Visual Basic.NET

My overall favourite IDEs:

1. Adobe Dreamweaver CS5.5 and below (I liked it since Dreamweaver 8)
2. Microsoft Visual Studio.NET 2010 and below (from Visual Studio 2003)
3. Microsoft SQL Server 2010 and above (SQL Server 2005 onwards). SQL2000 is good but GUI is not as modern
4. Netbeans / Eclipse
5. JCreator / BlueJ
6. IBM ISeries AS400 5250 Emulator
7. Dev C++
8. Microsoft Expressions (This ranking may not be accurate as have not used before)
9. Microsoft Frontpage
10. Unix Shell

It is good to know both front end and back end programming languages.

Cheers,

Rogerkoo

Preferred Programming Languages and IDEs (Integrated Development Environments): Part 1

Hi All,

Throughout my 5 years experience of software development, I have been using several programming languages. It includes C#, Java, Javascript, VBScript, "HTML5 (the latest version of HTML) and CSS3", SQL and RPG Programming.

Here are my preferred languages and the IDEs that I have used so far. 

On top of my list would be C#.NET and Java. There are similarities in syntaxes between these programmming languages. I would start off with Java first.

Java

Java is one of most powerful programming languages in the world, now owned by Oracle. It is now an open source programming language. There are a lot of libraries that provides various functions and methods that can be used in software development. Java is now available in most platforms that we have seen and these include PC, mobile, Java Applets (online share trading for example), enterprise (business) and games.

BlueJ, Eclipse, Netbeans and JCreator are some of the IDEs that I like. I was using BlueJ when I first learnt Java at Monash University. It is an IDE designed to introduce object oriented programming using Java to programmers, especially those who are using Java for the first time. It was first developed in Monash University, Melbourne. It has a simple graphical user interface and we can see the relationship and depencies between objects. It comes with a built in compiler, virtual machine and debugger.

I have also used Eclipse. It is good as well. I tried it when I explored writing Java again to develop Android apps in the future. Plugins such as a graphical user interface (GUI) and other 3rd party plugins can be downloaded to improve the functions of the environment. It's debugger is quite good too showing the line of the codes that has an error. It also prompts if the code is written incorrectly or is not according to the standard. You can see all the classes both external and internal and projects that you have created as well. It also has the autocomplete feature whereby it will prompt the possible syntax or methods that can be used similar to Visual Studio.

Netbeans is another well known and probably the best and most powerful Java IDE available. It comes with GUI capabilities and auto complete features together with Java project management capabilities. It also comes with version control integration system. It is one of the most powerful Java IDE now. You have the option to download Netbeans bundled together with Java JDK too. It not only integrates with all versions of Java but PHP and GlassFish too. It will show if any codes is written incorrectly or if the methods are used incorrectly.

C#.NET

C#, pronounced as C Sharp is a subset of a programming language that is part of Microsoft .NET Framework. It is similar to Java in terms of syntax but different in methods. C# is using all .NET framework methods that are provided from simple string and numeric functions to database connectivity. Microsoft Visual Studio 2010 is the latest IDE for C#. It is also a very powerful IDE to develop mobile, web and Windows applications. It comes with Intellisense features (autocomplete) as well. ASP.NET, a web framework is built into the environment. It will show if any codes is written incorrectly or if the methods are used incorrectly. Drag and drop design functionalities are essential for designing any applications that Visual Studio supports. You just need to drag the relevant elements that are needed such as textbox, label, list, buttons and tables to the screen. All these elements are customisable and you can add in functions to the events that are supported by the elements. For example, a button can have a onclick event whereby it detects a mouse click. You can try C#.NET programming by downloading the free Express Editons of Microsoft Visual Studio.

Javascript and VBScript

There is no IDEs for Javascript and VBScript. I just used the built in tool that we used for software development in my past project. Alternatively, we can use Notepad or similar products such as Notepad++ or WScite that I recommend.

Both of these programming languages have differences in syntax. Javascript is a web scripting language commonly used together with HTML. VBScript is a Microsoft developed scripting language that are used for Windows programming and IE based webpages.

RPG Programming

RPG Programming, known as Report Program Generator is used mainly on IBM AS400 machines. It is considered to be a legacy programming language. However, knowledge of RPG is good as well especially in the finanical industry.

To code in RPG, we need to login to the AS400 system using the IBM AS400 iSeries Emulator. It has no graphical interface and by default comes with green colour. There are no advanced programming tools such as drag and drop and autocomplete features. Currently, we can use the IBM RDi (Rational Development Studio for i). It has been upgraded to a more modern version, that is the RPG IV.

There is a debugger that we can use and that is strdbg command. This will run the debugger and you can set and unset breakpoints by pressing F6 and view variable  values by pressing F11. F12 will proceed directly to the breakpoint and F10 will go through each line step by step.

The codes are displayed in one page. You can scroll down or up by using Page Down and Page Up respectively. It will look complicated if the codes are very long. This may not look good if you are not familiar with the RPG language. This is not an issue for long term and experienced RPG programmers. One good thing is that there is in-built help function by pressing F1 on the screen on what you are not sure. Pressing F4 will also prompt you the required values to be entered while programming.

Conclusion

In conclusion, these are my favourites:

1. Visual Studio. NET and SQL Server Management Studio
2. Netbeans
3. Eclipse
4. JCreator
5. BlueJ
6. iSeries 5250 Emulator

Next post will be on IDEs for web development.

Cheers,

Rogerkoo

Programming

Hi Everyone,

Do you know what are we talking when we talk about computer programming? Have you ever thought how Windows or an Internet stock market system or a website work?

For a website, you can have a look at the source code by right clicking on the website and click View Page Source. You will see the coding there.

Programming is writing source codes for computer systems, computer programs and websites. The process also includes testing and debugging. Behind every computer program, website, banking system, operating system and games, there are source codes. These source codes are transparent to users. It is also part of software development and software engineering.

The complexity of the programming increases when the system has a lot of functions and dependencies. The dependencies here are referred to the pre-conditions and the post-conditions of a system. For example, you need to perform Step A before performing Step B. It also includes validations that are needed for the systems. It also involves logical thinking skills as well when writing programs for banking systems and financial institutions. It does not come easy sometimes.

There are various programming languages available for us to write. As a software developer myself, I have been exposed to several programming languages.

These programming languages are:

1. Java
2. C#.NET
3. Javascript
4. VBScript
5. SQL
6. C++ (Basic)
7. Unix (Basic)
8. HTML 
9. CSS
10. RPG Programming

I do enjoy writing programs for various systems such as banking systems and websites. These programming languages can be updated often to introduce new functions and methods that can be used to develop a system. Testing and debugging of programs need to be performed thoroughly to ensure everything is running smoothly.

However, work life needs to be balanced though to really enjoy programming. It is also fun to create or modify our own website as a hobby, interest or casually.


In a nutshell, I enjoy programming.


Next Blog Post: My Favorite Programming Languages (which ones I like, debuggers)


More information on coding will be coming in the future after the next blog post.

Cheers,

Rogerkoo

VBScript Part 1: Introduction and Functions and Variable Declarations

Hi All,

VBscript is a programming language specifically used in Internet Explorer browsers. Client side VBScript is only supported by Internet Explorer. It is language developed by Microsoft.

Functions

To create a function, the syntax is as below: 

function main()

    ' comments

    ' coding

end function

Functions is used to perform actions required by the user.

Example of actions are as below:

To display a value returned from the database

To execute SQL statements

To form HTML statements - display check box, text box on the screen

To perform calculations

To return data from the database

Variable Declarations

The declaration of variable using VBScript is as below:

dim a

dim a,b

Assigning Variables

After declaring variables, we can assign values to the variables.

The syntax for assigning variables is as below:

dim a

dim b

a = "First variable"

b = "Second variable"

Differences between VBScript and Javascript

Please note that there are several differences between VBScript and Javascript.

1. The syntax of creating function is different for VBScript and Javascript. 

VBScript

function main

end function

Javascript

function testFunction()

{

}

2. Secondly, in VBScript, we can't assign variables using this method.

VBScript

dim a = "First variable"

Instead, we use this. 

dim a
a = "First variable"

Javascript

var a = "First variable" .

3. Declaration of variables

VBScript

We use the keyword, dim to declare a variable in VBScript. 

Javascript

We are using the keyword var to declare a variable in Javascript.

Javascript: HTML Events

Hi Everyone,

HTML events can be detected using Javascript. For example, a mouse click or a user selection on a dropdown. We can assign functions to these events and we can attach and detach events as well. Let me further explain the types of events that we use.


onblur: It is triggered when a HTML element has lost focus. For example, you keyed in something in the textbox and then u click outside the textbox. Another example is pressing the tab button on the keyboard.


onchange: An onchange event is triggered when user selects an item from the dropdown. It can be used to handle how a website displays and hides certain fields.


onclick: It is triggered by a mouse click. It is used on radio buttons, buttons or a link on a website.


ondblclick: It is triggered when a mouse button is double clicked


onfocus: It is triggered when a HTML event is being focused.


onkeydown: It is triggered when a key is pressed on the keyboard. It can be used to assist users to enter numeric values only or to avoid users from entering special characters.


onkeyup: It is triggered when a key is lifted up. It is the event after you pressed a key on the keyboard.


onmousedown: It is triggered when a mouse button is pressed


onmouseup: It is triggered when a mouse button is released


That concludes the HTML events for the day.


References:


^{1. HTML DOM Event Object: http://www.w3schools.com/jsref/dom_obj_event.asp}

Cheers,

Rogerkoo

Javascript: document.getElementById

Hi Everyone,

Part 4 of the Javascript series.

I would like to touch more aspects of Javascript.

===================================================

General Values

To get a value from Javascript, we can use the coding as below. This is applicable for HTML textboxes and dropdowns.

document.getElementById("<elementId>").value;

where elementId is the name of the HTML element.

===================================================

If it is inside a for loop, we can use:

document.getElementById("<elementId>" + i).value;

where i is the counter value.

===================================================

¹Styles

We can also use document.getElementById("<elementId>") to change the look of the HTML element.

Examples:

document.getElementById("<elementId>").style.display = "inline";

document.getElementById("<elementId>").style.display = "none";

document.getElementById("<elementId>").style.display = "block";

document.getElementById("<elementId>").style.color = "red";

document.getElementById("<elementId>").disabled = true;

document.getElementById("<elementId>").disabled = false;

document.getElementById("<elementId>").style.backgroundColor = "red";
 
document.getElementById("<elementId>").style.border = "1px solid black";

===================================================

Get All Items

We can also use the document attribute to return all the items such as radio boxes or check boxes on the webpage. We can then use it to perform validations or any coding related to these items.

The code is shown as below:

var radioButton,checkBox;
radioButton = document.all.item("radioButton");
checkBox = document.all.item("checkBox");

The attribute used here is all.item. radioButton and checkBox returns all the radio boxes and check boxes of the webpage in array format. 

radioBox.length will return the total number of radio buttons on the webpage. If there are 5 radio buttons, it will return 5.

We can use a loop to perform any actions related to the items. For example:

for (var i = 0; i < checkBox.length; i++)
{
    if (checkBox[i].checked)
    {
        // coding to be performed when checkBox is checked
    }
}  

The example below checks a value. If the value is Y and if the check boxes are checked, it will run according to what is defined if this condition is met.  If the check boxes are not checked, it will then run according to the what is defined at the else condition.

var value;

if (value == "Y")  

{

    for (var i = 0; i < checkBox.length; i++)

    {

        if (checkBox[i].checked)

        {

             // coding to be performed when check boxes are checked

        }

        else

        {

            // coding to be performed when check boxes are not checked

        }

    }

}

Both radio buttons and check boxes will return either true or false. True is returned when a radio button is selected or when a check box is ticked. The opposite will be returned when the radio button is not selected or when a check box is not ticked.

===================================================

Usage of parentNode

This is a sample HTML code.

<html>

   <tr> 

         <td id='columnOne'></td>

         <td id='columnTwo'></td>

   </tr>

</html>

parentNode is used to get the element of the previous HTML attribute. If we would like to refer to columnOne from columnTwo, we can use 

document.getElementById("columnTwo").parentNode

We can then perform actions according to the Javascript specified.

For example, we can hide the whole row by using this code below:

document.getElementById("columnTwo").parentNode.parentNode.style.display "none";

or

document.getElementById("columnOne").parentNode.style.display "none";
===================================================

That is all for this part of the Javascript series. The usage of document.getElementById can be used for numerous purposes such as retrieving a value of a HTML element such as textbox and dropdowns, displaying and hiding fields, changing the look of a HTML element or to return all the elements of a webpage.

The next series of Javascript will cover HTML events (onblur, onchange, onclick) and more Javascript programming. Stay tuned.

¹w3Schools: HTML DOM Style Object, http://www.w3schools.com/jsref/dom_obj_style.asp

²w3Schools: Javascript and HTML DOM Reference, http://www.w3schools.com/jsref/default.asp

Cheers,

Rogerkoo

Javascript: Loops and Conditional Statements

Hi Everyone,

This is the 3rd installment of the Javascript series. Here, we will look at loops and conditional statements for Javascript.

Loops

The coding below shows how a Javascript for loop looks like:

var count = 10;
for (var i=0; i < count; i++)
{
    // statements
}

This will loop from i = 0 until i = 9. The counter, which is i, will increment after each loop (notice i++).  i++ can be changed to i-- if the counter starts from a high number and then incrementally decreasing.

Another loop will be the while loop as shown below. The statements in the while loop will be performed while the condition is true or being met.

while (condition)
{
   // statements
}

Conditional Statements

We can also perform conditional statements using Javascript. The most common one will be the if...else and the if...else if...else statements.


if (condition)
{

}
else
{

}


or 


if (condition)
{

}
else if (condition)
{


}
else
{


}

If there are more conditions, then the if...else statement should be used. The else statement will be perform the required coding if any of the conditions is not met. It is the default action to be performed. 

If there is only one condition to check, then if the condition is not met, it will immediately performs the action in the else statement.

Another conditional statement will be the switch statement. If there are a lot of conditions to check, the switch statement is the alternative way of the if...else statements. It will look simplified and improves the performance of Javascript programming. 

The syntax is as below:

switch (condition)
{
       case value1:
             statement
             break;


       case value2:
            statement
            break;
       case value3: value4:...
            statement
            break;
       default:
            // break
}


The first line will indicate which condition will be checked. Then, the case statements will indicate the possible values that we need to check. There can be multiple values for a case as indicated in case value3: value4:. It is neater if there are a lot of values to be checked.

That's all for today. 

Please feel free to comment or indicate if there are any mistakes I made. Learning does not end. It is a continuous process. I may have a lot of experience in Javascript (nearly 4 years now) but I may not know everything about Javascript because I may not use them.

Cheers,

Rogerkoo