Contact Forms Comparison

Contact form is an integral part of any website. It provides a medium for the customer to connect directly with the users. Traditional html forms always work but Wufoo, Google Forms, WordPress Contact Form, and so on are the latest contact forms taking over the website world. They are equipped with inbuilt functionalities which otherwise require hours of programming.

HTML and PHP

Traditional HTML Contact forms involve creating forms with ids and capturing them via php and storing in database. The values from the MySQL database could be later retrieved in to a Excel sheet or a web page. This version works fine even now. The developer needs to take care of SQL injection, blank values, naming the fields in the database, and so on. With HTML 5,  the inbuilt validations come in handy for developers. A lot of code needed to store and retrieve values from database. Further, the out put where the values are displayed or stored must also be taken care of. Sending the form values to an email via the mailto function is the safest and simplest way to achieve the goal. Adding recaptcha is another safety measure for added security. In addition, blocking spam bots at server side is good for securing your website and contact forms.

Wufoo

Wufoo is another way of adding contact form to your website. However, the entire data and control is with them. Wufoo has four pricing options. The basic version of the form lets you add the fields and put the code on your website. The form also comes with captcha so you don’t have to worry about any additional coding. The data is stored on Wufoo site which can be accessed via your Wufoo login. Wufoo lets you create three forms and three reports in the basic package. The reports are awesome too and you can customize any way you want. The report can further be downloaded in to a Excel file or as a CSV file for further processing. Wufoo forms are great for basic requirements. But, if you want the paid versions you can buy Wufoo membership depending upon your requirements. The basic version also leaves the big message about ‘Form created with Wufoo’ message on your website. You can remove that with paid version. Wufoo also has surveys and emails which can be added later with paid packages.

WordPress ContactForm Plugin

Another gem is the WordPress ContactForm plugin, which you need to set up to be used on your website or blog. The ContactForm plugin is free and can be set up by downloading the plugin from the WordPress Plugins. You can have multiple forms with this plugin and can set up the colors and fields based on your client’s requirements. It comes with captcha for added security. But, ContactForm 7 needs to be updated for latest bug fixes and releases. You can send emails with contact forms in them using this plugin. However, you need to be aware of how to set it up otherwise you will end up with lot of errors. This has to be tested in multiple browsers and devices as the form throws an error if you give invalid input names that are reserved in this plugin. I think this ContactForm is great again and the data can be import or export data from the WordPress admin tools.

Google Forms

If you are a big fan of Google and use Google Apps for most of your web business and data management, Google Forms are a great way. With your google login you can create the form and get the code in your website. Once you submit the form, thank you message from Google Forms remains on the screen. You can edit the colors and fields and set up is easy. You can limit the number of responses, include surveys, send confirmation messages,  and so on. The plugins available for Chrome make the set up even more efficient. If you want to send an attachment with the confirmation message, you have to set a trigger for the function on the form submit. First, save the document to be sent in your google drive, then get the id of the document by opening it in a new window. Set up the Google script to send the mail with subject, body, and attachment to the email specified in the Google Contact Form. You may need to test it out multiple times before you can successfully send the attachment. Spend some time to get a hang of the Google script and related errors. Google Forms Example shows that the data can be saved in an excel sheet on your drive or you can specify the format required. The beauty of the Google Forms is that the Contact Form data sheet on your drive is instantly updated. Sending confirmation messages and sending mail to self is also simple. You can set to send you daily or weekly reports as well.

Let me know how you incorporated Contact form in your website and which you think is the best! Here is one so you can contact me. 🙂

 

Integrate a WordPress Blog to Your Bootstrap Website

So, you built a great website in bootstrap. Your site is live and great, works fine in all devices and browsers, everything is perfect. Now, your customer wants to add a blog to your website. WordPress has great themes for blogs but none of them are going to look like your custom website. Here is how you can integrate the WordPress blog into your website and make the blog look same as the rest of your website. You can create your own WordPress theme!

WordPress Blog

WordPress blog is great as it is perfect for content management, backend, and frontend. You can add multiple users, media, plugins, comments, and so on. Backups and versioning is great with WordPress blogs. Corporates have been building full fledged websites using WordPress Divi themes. Inorder to integrate a WordPress blog to your HTML site built using bootstrap, you can follow certain steps and achieve same functionality.

Settings in the cpanel

  1. First install WordPress in your root folder and give the folder name blog.
  2. Download bootstrap and save in the wp-content-themes folder.
  3. Save additional css such as font-awesome and other css you used in your Bootstrap website in the same folder as bootstrap css
  4. Create new index.php, home.php, header.php, footer.php, sidebar.php, functions.php, page.php, single.php, style.css. Each of the files have their significance in creating your theme in WordPress.
    • index.php: Loads your blog
    • home.php: Loads the blog posts from the database
    • header.php: Loads the header in every post when the get_header() function is called
    • footer.php: Loads the footer in every post when the get_footer() function is called
    • sidebar.php: Loads the sidebar contents when the get_sidebar() function is called
    • functions.php: Needed to load the jQuery in wordpress package to this website and also the sidebar contents
    • page.php: Loads the page you create and can act as a template for every page in your WordPress blog or Website
    • single.php: Loads the individual post which the user clicks in a page with comments function
    • style.css: Loads the styles for this blog
  5. Edit header.php and copy paste the content including the navbar from your existing website template. Edit the css href to php function bloginfo. Load the stylesheet_url using the function. Add wp_head and wp_enqueue_script to load jquery in this page. Save header.php. In the navbar list, add wp_list_pages function to get the additional blog page you created in the WordPress admin login. This way, your WordPress blog will be at the end of the menu items in your website. After the blog is setup, go ahead and edit all the pages of your website and add menu item blog to link it to the blog page.
  6. Edit footer.php and copy paste the footer section of your website template. Remove all the javascript functions at the end and add wp_footer() function. Save footer.php.
  7. Edit sidebar.php and add the function dynamic sidebar to get the sidebar content on all pages and make the sidebars widget friendly. It will load the sidebar contents if there are any existing. Save sidebar.php
  8. Edit index.php and load the get_header() function first. Next, in a loop check the posts and load the posts and the title and content using the the_title and the_content functions. If there are no posts display a message, saying there are no posts. At the ends, load the get_footer() function.Save index.php
  9. Edit page.php. Load the header and footer contents. Divide the page into two columns and load the posts in the left column and the sidebar in the right column. Save page.php
  10. Edit functions.php. Add function to register the scripts such as bootstrap.min.js and script.js in the page. Then enqueue the scripts of your page. Add another function to register the sidebar contents and the before_widget, after_widget, before_title, and after_title style of the sidebar contents. Save functions.php. You can override the default jQuery that comes with the WordPress install with a latest version in the functions.php.
  11. Edit home.php and load the header, footer and sidebar. In a if condition, check if there are any existing posts. For every post, get the post title, links, content, and date, using respective functions. If there are no posts, display a message. Save home.php. WordPress uses home.php to load the blog posts. Save home.php
  12. Edit single.php and and load the header, footer and sidebar. Get the contents of the post and get comments section. This page will be loaded if a single post is clicked. Save single.php
  13. Edit style.css and import the bootstrap, font-awesome, and other css used in your website. Edit the navbar and footer styles to load exactly the same way as the rest of your website. WordPress uses style.css to load the style for your blog. Save style.css.
  14. If you have multiplepages in your blog, you can have a front-page.php and load the header, footer, and sidebar there.

Settings in the WordPress login

Login to your website and blog using the WordPress credentials. Delete the existing page and create a new page called Blog. In the Settings, go to Readings and set the page to load the latest posts. In the appearance settings select the new them you have created. Go to Live Preview and test the site if it is loading properly. Make your current theme as the default theme for your WordPress and start writing blogs. Voila! you are almost done.

Keep checking for the WordPress updates and backups. Test it in all devices and browsers for responsiveness. Maintain your site and the WordPress blog at the same time with minimal distraction to the user. Add some ads to your blog to make some dollars!! 🙂

AngularJS Directives

AngularJS directives are a cool way of defining behavior and using it any way you want. You can have a directive with your name and have it do any kind of work you want depending on the situation. AngularJS directives control your DOM behavior.

Directives

Directives guide the HTML compiler to control the elements so they can behave in a certain way. The rendering of HTML inside the AngularJS application is controlled by the directives. Depending on the type of directives, they can be used to change the behavior.  Think about it like the word ‘change’. You can use it to refer to ‘change of clothes’ or ‘spare change’. It depends on the context. Similarly, Directives too can be used to behave differently if used in different contexts.




Built-in Directives

Here are some key details about directives.

AngularJS has some crucial inbuilt directives which can make your application behave in a certain way. Directives can be integrated with the HTML or can be used in the Javascript.

One thing which is cool about directives is its naming. The naming of a directive follows camel case when used in Javascript: (ngApp). Whereas, if the directives are used in a HTML, the name is separated with a hyphen: (ng-app).

There are four basic directives:

  1. ng-app : To auto-bootstrap and initialize an AngularJS application
  2. ng-model : To bind between HTML control and application data
  3. ng-init : To initialize application data
  4. ng-view : To switch between different views

There are many builtin directives, here are my favorites:

  1. ng-controller : To attach a controller class to the view
  2. ng-bind : To replace the text of the element with value of an expression
  3. ng-repeat : To instantiate a template once per item from a collection
  4. ng-hide : To show or hide the given element based on given expression

Directives are defined in a similar way as the Controllers and services. They can be defined using app.directive method. The method takes a name of the directive and a function to define what happens in the directive.




Types of Directives

The four types of Directives are classified based on where they are applied. For example, let ‘kuul-stuff ‘ be the directive you wrote. Then,

  1. Attribute directives : The directive is used to change the attribute of an element                                                                                                            <span kuul-stuff=”expression”></span>
  2. Element directives: The directive itself is used as an element              <kuul-stuff></kuul-stuff>
  3. Class directives: The directive is used as a class                                       <span class=”kuul-stuff: exp;”></span>
  4. Comment directives: The directive is used in the comments section                <-directive: kuul-stuff exp ->

Custom Directives

Custom directives are a cool way of defining your own functionality or workflow. They enhance existing directives and are easy to integrate in the HTML. The custom directives are one of the super powers of AngularJS that makes it build powerful applications. Here are some details about custom directives.

Custom directives are defined using app.directive method. The directive function returns an object in its callback.

myapp.directive (‘myDirective’, function(){

—–     write your functionality—-

});

There are some options which must be specified while writing a directive.

  1. Restrict: Defines the type of directive<br>’A’ = Attribute directive, ‘E’ = Element directive, ‘C’ = Class directive, and ‘M’ = Comment directive. It is better to define Attribute or Element directive so you can determine what element a directive matches
  2. Template: Defines directive output content
  3. TemplateURL: Gives the path of the template to be shown
  4. Controller: Defines a controller in the directive which can be used to achieve a specific task.
  5. Controller As: Defines an alias for the controller so you can refer to the controller’s variables using the alias
  6. Scope: Defines the scope of the directive                                                            ‘false‘ = Default value, which means that the scope of the directive is shared by the scope of the parent. There is no local scope present    ‘true‘ = It means that a new scope is created for the directive. There is local scope present as well as we can access the parent scope.  ‘{}‘=Isolated scope means that there is no link between parent and directive scope. A new scope is created and cannot be accessed outside. Further, the directive cannot access the outside scope.                    It is suggested to have an isolated scope in large AngularJS applications to keep the data safe. However, isolated scope can be accessed outside using some techniques. There is some magic which will be revealed later. Okay, fine. Here is the key. Use the following property to achieve the given purpose.                                                                                                             ‘=’ = Handles two-way binding.                                                                     ‘@’=Passing string values to directives.                                                      ‘&’=External function invocation.
  7. Compile: Compile method is specified to achieve a function as soon as the page loads. It will return a link function. If the behavior occurs only once in the directive, use compile.
  8. Link: Link method is specified to achieve a function similar to compile but it loads after compile. If the behavior occurs multiple times in the directive, use Link.

The order the AngularJS guides the HTML compiler is:                                    Compile–>Controller–>Pre-link–>Link–>Post-link.                                             It depends on what you want to achieve in the directive.




Directive Example

Here is an example of a custom directive.

myapp.directive(‘kuulStuff’, function(){

return {

Restrict: A,

template: <span> Hey, I’m custom</span>,

templateUrl: ‘/kuulstuff/home.html’,

Scope: ‘true’,

Compile: function(telement,tattrs) {

console.log(“Hi, I’m custom”);

var linkfn=function($scope, element,attrs){

element.css(‘background-color, ‘red’);

}

return linkfn;

}),

controller: function(){

console.log(“In the controller”);

},

Link: function(scope, telement,tattrs){

console.log(“In the link”);

},

};

});

This is just ‘some’ information about directives in AngularJS. It may be a bit confusing in the beginning, but if you write more, you will be fine. Write your own directives and let me know how it goes. 🙂

AngularJS Controllers

AngularJS Controllers are where the most magic happens. Think that the controllers of an AngularJS application as the brain. The controllers are super smart and can define what happens on the (DOM) Document Object Model. AngularJS controllers along with the dependency injection form the super power of the AngularJS.

Controllers

Here are some key details AngularJS: How to Begin.

  •  Controllers are attached to the DOM through the ng-controller directive. When a controller is initialized, a javascript object will be created and all the functions in the .controller method can be accessed.
  • The initial state for the Angular $scope is available at the point where a controller is registered. All the properties of the $scope can be defined in the controller and can be accessed through the methods.
  • The .controller method can be used to add the controller’s constructor function to the module. Thus the constructor function is out of global scope.
  • Apart from the $scope, we can send additional parameters to the controller, such as services and functions. It is better to keep a controller as simple as possible. You can define as many controllers as you want in an AngularJS application.
  • A common practice of keeping controllers focused on the required logic is to define services and functions, which can in turn be passed to a controller through dependency injection.
  • Controllers can be nested and inherited. You have to note that the parent’s controller’s methods can be accessed in the child controller. And not vice versa.
  • Finally, remember that the controllers contain Javascript functions and are created by a standard Javascript object constructor and is bounded to a particular scope.

Example

Here is an example of how the Controller is initiated. You have to create an angular app called myapp. Also, you need to declare in the html to tell that it is an Angular application.

In the js:

myapp.controller(“MyCtrl”, function($scope){

$scope.message=”Hello”;

});

In the HTML or template:

<div ng-controller=”MyCtrl”>

{{message}}

<\div>

Your div is binded to the controller using the ‘ng-controller’ directive. The scope of the div is passed to the controller. The scope message variable’s value can be accessed in the div within the dual curly braces. Notice, how the name of the controller is defined with an ‘Ctrl’ and the double quotes used while defining and accessing the controller.

Similarly, you can have any number of controllers in your AngularJS application. You can have different Javascript files for each controller or just put it in one main file. This makes two way data binding easier and keeps your application simple!

Forget Everything: Just Learn AngularJS!

Angular or AngularJS is the next most powerful Javascript framework out there which is becoming increasingly popular among the tech world. Angular JS along with CSS frameworks such as Bootstrap coupled with the REST services is redefining Website development.

AngularJS

AngularJS was developed by Google and is the most important Javascript framework which makes easier for the developer to maintain the code and achieve the same and better functionality achieved with Javascript. The best part of AngularJS is that it is open source and is having the largest support available of all the frameworks available. The current stable version is 1.4.7 and Angular 2.0 is on the way!

Advantages of AngularJS

AngularJS is similar to Javascript and it can enhance the HTML which will enable it to achieve client side programming. It has inbuilt JQuery support called JQLite which helps us in utilizing almost eighty percent of functions in JQuery library.

Browsers

AngularJS has inbuilt multi-browser support and it works on any browser such as Chrome, Opera, Firefox, Safari, and Internet Explorer. You can access your website from any device, tablet, computer, or desktop. Large-scale Enterprise applications can be developed using AngularJS. AngularJS is widely used for developing Single Page Applications (SPA) which are super light and super fast at the same time delivering unbelievable amount of data to the user.

Design

AngularJS facilitates rapidly changing user requirements and business needs at the same time leveraging the skill sets of Front end web developers. Separation of concerns that is defining the model, view, and controller-makes it easier for modular programming and keeping any changes manageable. Dependency injection and use of patterns is simple with AngularJS. Angular supports the very popular Model View Controller pattern(MVC), Model View View Model (MVVM) pattern, and Model View Whatever (MVW) pattern. AngularJS also supports responsive design which is way more important for modern day websites.

Testing

AngularJS is also super good for testing as it allows testing of Model and Controllers in isolation. AngularJS is designed to run unit testing with Karma, Jasmine and Angular mocks. The interactions between View and other components requires mocking framework to unit test. This can be achieved with AngularJS.

Prerequisites

To learn AngularJS, you must be familiar with Javascript, HTML, CSS, and website development. You also need basics of Java, PHP, and MySQL. You can download the latest version from the Angular website or include the CDN in the script tag of your web page.

Instructional Design in eLearning

Instructional Design is a systematic process in which learning needs are analysed and coursework is developed using range of multimedia tools. eLearning has revolutionized the way people learn. The Instructional Design has enhanced eLearning using adult learning theory and principles.

Instructional Design

Instructional design (ID) and Instructional System Design are often used synonymous but the latter is more broad in nature. ID enhances the learning and creates a framework for engaging the learner. Use of technology facilitates the learning process and metrics. Different ID models and strategies are widely used.




ADDIE Model

ADDIE Model is the core of ID and is widely used by instructional designers and  developers.ADDIE The five basic steps of ADDIE Model are:

  1. Analysis: Analyze learners and goals
  2. Design: Identify learning objectives, outcomes, Subject Matter Experts, and assessments
  3. Development: Develop instructional strategies and plan logistics of how the learning will be delivered
  4. Implementation: Implement the training and test the learners
  5. Evaluation: Formative and summative evaluation of the training and learner feedback

Gagne’s Nine Events of Instruction

Robert Gagne, a popular contributor to ID identified nine events of instruction that assist in learning. Story boarding of a lesson usually follows these nine events to accomplish the learning objective. The ID must take care that learning takes place  in that order in each storyboard.

  1. Gain attention
  2. Inform learner of objectives
  3. Stimulate recall of prior learning
  4. Present stimulus material
  5. Provide learner guidance
  6. Elicit performance
  7. Provide feedback
  8. Assess performance
  9. Enhance retention transfer

Bloom’s Taxonomy

Benjamin Bloom, an educational psychologist proposed three learning domains: Knowledge, Skills, and Attitudes.   After a lesson, the learner must be able to acquire knowledge, gain a skill, or change in attitude. Based on the proposal, Bloom’s taxonomy was developed.

Bloom's Taxonomy
Bloom’s taxonomy Citation: http://www.lincoln.edu/ats/bloom.html

The Cognitive domain is in turn divided in to six categories. They are:

  • Knowledge
  • Comprehension
  • Application
  • Analysis
  • Synthesis
  • Evaluation

For each category, the learning goals have been changed in to verbs. Later, the techniques have been identified to achieve the activity. In Instructional design, Bloom’s taxonomy verbs have been used to create the learning objectives so they can be measured. Further, each learning objective may have only one learning goal (Bloom’s verb).




 eLearning and Instructional Design

Vector laptop or notebook

eLearning has revolutionized how students learn. Adults in particular can pace the learning according to their time and schedule. The class room learning has been replaced by eLearning in many corporations around the world. Security training, induction training, skills training, and so on have been possible for millions of people through eLearning.

Applying Instructional Design principles in eLearning has improvised the learning. The tools and style guides have made the eLearning a pleasure experience rather than mundane text. eLearning and ID have made sure that the learning content is rich with graphics, audio, video, feedback and even simulations. The Level of the eLearning varies with cost and the interactivity involved. Some of the Instructional Design models have also been blended learning where the eLearning is associated with certain level of classroom learning to ensure human interaction.

There are also repositories, forums, and discussion rooms in the Learning Management Systems to add more interaction with the remote learners. Also, the ID faces a challenge of making the eLearning SCORM compliant. Sharable Content Object Reference Model (SCORM) is a collection of standards and specifications for eLearning. Further, the ID also has to ensure that they must not actually remove the content in order to make the screen text concise.

Instructional Design Outputs

In every phase of the ADDIE, there are certain expectations from the ID. These include Project plans, Learner Analysis, Technology Analysis, Table of Contents, Illustrations, Animations, Graphics, Learning Matrix, Schedules, Curriculum, Assessments, Glossary, User guides, How-tos, and so on. Also, there are documents pertaining to the implementation and evaluation which must be prepared and communicated to the customer.

Tools used in ID are Microsoft Office products, Captivate, Articulate, Blackboard, Moodle, HTML, Photoshop, Dreamweaver, Lectora, audio and video editing, and finally testing the final product. Quality checking the storyboards and design is an essential part of Instruction Design. Project management is an essential part of Instructional Design.

Basically, I think Instructional Design is interesting because it involves a lot of learning in terms of content and technology which keeps you engaged while you are delivering quality eLearning to users.