Emerging Technologies

Image

Technology has power!

Regardless of how you use technology, rarely or often, the rapid growth has our heads spinning. I believe you must be ready and prepared for what’s next in the technological world. You must tap into the world of a Change Agent.

That brings me to my experience in a class called Emerging Technologies. My original thought was “this class is going to be about Facebook, twitter, blah, blah.” Although we did cover a few social media platforms, the biggest topic we covered was content management systems. I was constantly looking for new technologies for integration or personal pleasure, but I knew nothing of CMSs. The class covered the basis of some content management systems like WordPress, Drupal, Get Simple and more. I was enlightened by the complexity, and how incredible the technology was.  I had only one question, who is in control of this technology? I’ve seen so many brands of content management systems, and tried to figure out the benefit of use. I begin to tap into change agent mode. Like I said I did not know anything about content management systems but I had to learn.

Preparation:

So why be prepared for what?

For clients, I was use to the standard HTML, CSS, and PHP for static websites, dropping them into a FTP, get hosted and be done. Not realizing there are other options for letting clients have control over content without knowledge of programming languages. I had to be prepared to use content management systems with clients.

But, what does a change agent have to do with this?

Well for one, I have characteristics of a change agent. Here are a few reasons why:

1. I communicated. Recently, I’ve been working with a client building a website for her non-profit organization. We discussed my position after the website was completed and how the content will be updated frequently. The first thought that popped into my head was WordPress. I knew WordPress was one the most popular content management systems, and with the little knowledge I had of using the technology I felt comfortable explaining the benefits. As a change agent, I had to explain to my client what? Why? And how? WordPress will be important for her organization. Well that being said, another important reason comes to mind.

2. I am patient. Everyone is aware technology is moving rapidly. And at times it’s not moving fast enough for me. Going back to my client, patience was key. I had to explain to my client the importance of using this technology without her having any knowledge of what it is. As a change agent, I had to help my client move ahead, and also be aware of the technological advances.

3. Last, but not least (because there are plenty of more reasons). Although I was not an expert of content management systems, I had to become one. Explaining to a client why they must use a technology they have no knowledge of can be tough. I had to step up to a person who had authority over me. My job was to take care of all the technical needs of the organization, but I wanted everyone to have knowledge of the technology.  I did not want to put her in a position of not trusting me as a web developer. That being said, a change must have strong knowledge and a strong relationship built on trust. I had to know enough about the CMS to communicate with the client and her employees (who would handle content); also I had to become a teacher so that my client had enough understanding on how to use the technology.

My resources for Change

All in all, attending the emerging technologies class help open my mind. I was introduced to content management systems and I became in control of the technology as a change agent. I had to speak up about the many technologies that are beneficial to everyone. I had to keep myself updated with the latest and greatest technologies, and be willing to learn. The structure of the class provided enough resources for me to understand my position a web designer and developer. I learned how to become a change agent.

 

 

Resources:

http://georgecouros.ca/blog/archives/3615

What feature is missing?

After sometime and consideration I finally figured out what the essential feature is for a great website, as well as beneficial. I decided to do a little research on what features are important for a website to have, and there were many. So I sorted my notes and found one feature that is very essential in modern day. Originally, I never thought this feature would be an actual feature but it is. Responsive design is in demand! This is a necessary feature that will ensure an awesome user experience, especially is that user has a smart phone.

responsive_design

 

Now for non-designer and developer the question is what responsive design?

Well, here’s a brief bullet description:

  • Flexible layout
  • Flexible images
  • Detects screen size and orientation to change layout
  • Easy to read and navigate
  • Providing an app-like experience

This list pretty much goes on and on…..

How do I create responsive design?

There are plenty themes that are responsive with non-designers/developers manual creating the design. The importance is finding responsive feature like sliders, images and more. Creating a responsive can be problematic. Here’s are great responsive  plugins to help you with the process:

  • WP Orbit Slider
  • Responsive TwentyTen
  • Ultimate Coming Soon Page
  • Style My Gallery
  • Mobify

 

 

Brief Talk: Image Sliders

Just about every website I’ve seen has an image slider. While there is nothing wrong with implementing one in a CMS, I just think there important factors to keep in mind. In this article, I will be covering why image sliders are important, there add-ons, there purpose, and don’ts of using an image slider. There are a ton of image slider APIs out there to help a developer with the process. I will be using WordPress as a content management system, and information and links to slider plugins.

Why Use an Image Slider?

Now you’re probably wondering why not use a gallery? Well yes and no. Yes if you are just showing images on a separate webpage. No if you want to provide a look and feel to your webpage, and by that I mean, sliding images on a homepage provides emotion. For example, if you are creating a website for a non-profit, an image slider can be helpful for showing the mission of the non-profit. This would apply to any organization or company. Image sliders would provide a unique feature to a webpage.

What the best plugins, add-ons, APIs and so on?

Alright, I have pretty much covered little why image sliders are important. Now let’s talk about the many image sliders available in the WordPress plugin directory.

The first one I will cover is a simple WordPress plugin called Slider. The plugin is simple to integrate into your theme. Once you’ve activated the theme you can then began adding images and descriptions. There are editing options and naviation settings avaliable if you want to change color and styles.

slider

https://wordpress.org/plugins/slider-image/

Next one is called bxSldier. This probably one of my favorite image sliders. One reason would be the fact it’s responsive. Since responsive design is popular why not have a simple responsive jQuery slider. The author provided examples and tutorials on how to implement the code to your theme. If you are using a content management systems like me, you would create an external PHP file for the slider to be used on only one page.

bxslider

http://bxslider.com/

Wow slider is another favorite and popular image slider. There are a ton of examples and tutorials for non-developers. The website provides hundreds of slider examples for like slider effects, style and more. I would recommend developers and non-developers to use this image slider over any other because of the simplicity and array of options.

wowslider

http://wowslider.com/

Last but not least (because there hundreds of sliders) Responsive Slide jQuery plugin. This is a great plugin that is simple for non-developers to use for any responsive design and theme. The plugin has light code, plenty of options for customizing the controls and more. I probably call this plugin the easiest to use for a theme or static. If you are using a content management system, like I stated before be sure to create an external PHP file for the slider.

ResponsiveSlides

 http://responsiveslides.com/

I’ve pretty much covered some of the available sliders and why they are important. Now let’s talk about the don’ts of using image sliders. I will only have 2 don’ts, but they are important.

Do not have image slider without controls. If there is an image that I really like or missed I would like to be able to go back and look.

Related images. Be sure to add images that relate to the content of the page! I have seen this on a few sites, where the images do not relate to the message.

Alright! This was just a brief talk about images sliders. I just wanted to discuss why image sliders are important, some that are available and the don’ts of image sliders. I would suggest implementing one into your design, just make sure the images relate and have controls for viewers.

For WordPress, what contact form is the best?

WordPress is one of the top content management systems for non-developers, developers, and designers. The amount of plugins and built-in features are unless with thousands to choose from. After doing a little research on what WordPress features, and plugins work best for newbies. I was able to narrow down a small list of the best. I searched for contact form plugins that were easy to integrate and simple to set up. First, I thought to myself what are my requirements for the best plugins? Here is a small list of my requirements: Easy to set up Highly customizable Blocks spamming A variety A required option Now that I got my list of requirements out of the way, I narrowed down a list of contact form plugins that met the requirements. The top 5 plugins I researched were the top for every article I read.

PROS AND CONS – no order       

I.            Contact Form 7

  • Pros – Contact Form 7 is the most popular contact form plugin for WordPress, with over 16 million downloads and counting. Customization is simple with the use of markup. The contact form plugin features AJAX submission, built-in CAPTCHA, file upload capabilities, and Akismet spam filtering. A big plus for using the contact form plugin is embedding the form on any page or post with one-line of code.
  • Cons – Contact Form 7 does not lack anything major but more templates to choose from would be nice.

    II.            Fast Secure Contact Form

  • Pros – Fast Secure Contact Form is another popular contact form plugin with over 4 million downloads in counting. The plugin blocks spammers using CAPTCHA and Akismet support. Users are not required to sign up for an account, although it does provide features for scheduling, web based meetings and email support. You are able to add extra fields of any type like text, checkbox, radio, fieldset and more.
  • Cons – The current version has a buggy interface, but the author has released a Beta version, which fixed the issue.

 III.            Visual Form Builder

  • Pros – A clean and simple interface Visual Form Builder is a great plugin with a variety of features. Users are able to build and manage forms from a single place. The drag & drop method to re-order fields is a plus. Other interesting features include exporting entries to a CSV file, customizing confirmation message, sending form submissions to multiple emails and more. Let’s not forget the built-in anti-spamming system.
  • Cons – If users are creating a large WordPress website, Visual Form Builders does not store form entries into your WordPress database

 IV.            Custom Contact Forms

  • Pros – The best part of using Custom Contact Form plugin is the customization. Users are able to change the appearance without CSS, which is great for non-coders. Features include rearranging fields, drag and drop interface, and creating unlimited forms and fields.
  • Cons – A few issues with registering and spamming issues.

    V.            Contact Form by Contactme.com

  • Pros – Contact form by conactme.com is a free and easy plugin for coders and non-coders.  Users are not required to sign up, and registration is free. The plugin features include nonfictions to your inbox, add custom code or script, social links, CAPTCHA support and more.
  • Cons – Contact Me did mention that users have to create an account on the Contact Me website.

In conclusion, each plugin has its pros and cons. Also, narrowing down the features you want is the best way to distinguish between which plugin works for you. Personal, my favorite plugin to work with is Contact Form 7 form the simplistic and features.

Resources:

http://wordpress.org/plugins/custom-contact-forms/

https://wordpress.org/plugins/si-contact-form/ http://wordpress.org/plugins/contact-form-7/ http://wordpress.org/plugins/visual-form-builder/ http://wordpress.org/plugins/contactme/ http://blazdesign.com/5-free-wordpress-contact-form-plugins-to-consider/

Take on the Challenge

drupal

I still have a lot to learn about content management systems, but I got a chance to breakdown and compare three different CMSs, two of which are popular among developers. Now, I must say out of the three CMSs, Get Simple, Drupal, and WordPress, Drupal was my favorite. I had a bit of a learning curve installing and downloading plugins for Drupal, but I was able to figure out the problem. I found myself more interested in the challenge of Drupal then the concept. There were many articles declaring Drupal to be complex for newbies, which I am, but there are many resources and community sites to assist.

Drupal is one of the most popular CMS and used by a number of professionals and companies. Drupal was the CMS I wanted to learn more about then many others. I love to take complex problems are turn them into simplistic designs, which Drupal met that criteria. Learning about content management systems for the first time this year allowed my decision to learn more about Drupal. I took on the opportunity to challenge my skills and patience, while maintaining a great attitude. Statistically, Drupal is the 3rd most popular CMS, right under WordPress and Joomla. Many developers and high-profile communities use Drupal as a resource, as well as a number jobs available for the CMS. I believe Drupal is a powerful tool, creating elegant and effective designs with an abundant of resources. Although, the CMS can be challenging to learn the outcome is great once you’ve learned about the system.

CMS Decisions

For the last couple of weeks, I was able to explore the world of content management systems. Some were easy to install, while others were complicated. Many issues would appear during installation, which helped me narrow down the ones I would use for clients and personal projects. After installing Get Simple, Drupal, and WordPress, I felt comfortable choosing a favorite. WordPress and Drupal are larger content management systems with lots of resources, but I wanted simplicity. So I chose Get Simple as one I would use frequently, unless I needed more plugins and tools. WordPress would be my second choice, while Drupal would be my last.

My Experience

Drupal

The process of installation should not take longer than 30 minutes, which Drupal exceeded. That was one of the issues I ran into with the CMS, and I felt the system would be a last resource. Several errors would appear while setting up the database and configuring the site. After installing the CMS, I admitted to liking the layout and appearance. When the time came for posting content and adding plugins, the difficulty level had risen. The time I spent with Drupal was short, not even getting into the database backup. I felt my frustration took over the ambition to understanding the CMS. Honestly I would not use Drupal unless I needed to use the CMS for future employers. Although, setting up the database and installation was aggravating, I would still recommend the CMS to web developers seeking a challenge.

WordPressWordPress was simple to install and set up. Like many others, I would recommend the CMS to every developer and non-developer. The process of adding or editing content, adding plugins or pages and more, was effortless. The CMS has an unlimited amount of resources, from plugins to themes. I spent time understanding the PHP implementation and integrating static html pages into themes. The process of working with templates to make a simple theme was tolerable. I did not run into any issues setting up the CMS, although I still have a lot to learn. In other words, WordPress would be my second choice for a content management system. The system is powerful with tons of tools and themes, it would be difficult to comprehend in one day.

GetSimpleIt cannot get much simpler than Get Simple! Get Simple was the content management system that had my requirements. Setting up the database and installation was a breeze and without error. Now of course the CMS is not perfect, and the lack of themes and plugins would be a reason. Get Simple does not receive as much traffic as popular CMS like WordPress and Drupal. Although, the CMS is simple and effective, even though it lacks the many resources and tools other CMS have. The backup was straightforward. The template implementation was easily done using a handy copy and paste method. However, I must admit the CMS will need more plugins and themes, which would help the traffic flow. I would easily use Get Simple for future clients without hesitation, unless I needed more tools, then WordPress would be a backup.

Simple but effective was key to choosing the right CMS. Get Simple will be my first choice for the simplicity. WordPress would be my second for the larger amount of resources, while Drupal be last just for the challenge. Each system has its pros and cons, but they are great tools for managing content. I would recommend all three to developers.

Resources:

http://caseymarketingservices.com/blog/2011/digital-publishing/understanding-content-management-systems/

https://wordpress.org/about/

https://drupal.org/about

http://get-simple.info/start/

Who will win? Drupal or Newbie programmer?

drupal-logo

Originally, I was going to talk about the difference between content management systems, Drupal and Get Simple, but that all changed. After my experience of downloading Drupal and installing the CMS to my localhost, I thought this would be a wonderful topic to talk about!

Drupal vs Newbie programmer

Let’s begin by saying, if you love Drupal and had no problem installing, congratulations! For those who gave up or was scared away this article is for you!

The first step to a problem is admitting, I knew Drupal was trouble when I received errors during installation. WordPress and other CMSs installed and ran without a problem.  Before I installed Drupal, I researched a few articles that would help with the process, that being said I only found one article that gave me hope. Throughout the article Drupal become less intimidating and more impressive. Drupal was known to be complex yet very powerful. I knew the CMS was going to be learning curve, nonetheless I was up for the challenge!

Round One: Downloading Drupal

Before downloading Drupal, I found an article that explained How to Create a Drupal 7 Theme from Scratch from onextrapixel.com. Although the article did not explain in depth the process of installation, the tutorial was helpful.

Due to the fact I was new to Drupal, the first step to learning about the CMS was downloading the file. In short, I decided to document my experience with installing Drupal.

Here we go!

Downloading Drupal 7.26 zip on https://drupal.org/start

download_drupal

Alright! Now that wasn’t so hard! Next up, moving the Drupal file to my local server.

Round Two: Installing Drupal

Local host Xampp ran Drupal without a problem.

On the Drupal website, an installation guide was provided for creating a database using phpMyAdmin.

(URL: https://drupal.org/documentation/install/create-database)

After creating a new user, I dropped the Drupal File into my htdocs folder and started the installation process.

(The first time I installed Drupal, there were a bulk of errors while setting up my database. This was frustrating, so I express my frustration by googling the errors and behold others had the same issue. One problem I had was an error from one of my files, which was missing a file.)

Once the database was step, everything ran a lot smoother than the first time.

I finally made progress when I got to the configure site page.

install_drupal

Final Round: Newbie Wins…. Using a small tool!

Using a localhost to install Drupal seemed easier. The next big step was using a live host, which would be a whole new ball game. For now I wanted to start small using a local host, just to get my feet wet. If you are new to content management systems, using web server like Xampp will be useful. Xampp has MySQL, PHP and Apache, which is required for installing content management systems. Also, Drupal is known to be tough, but there are plenty of resources that will assistance you while managing the CMS.

myfirst

Resources

Previously, I talked about the article that had a tutorial on how to create a Drupal 7 theme from scratch. The tutorial was helpful in explaining the process of folder structure, maintaining files, setting up front pages, and adding content. I recommend the tutorial to anyone who would like to learn about creating themes. Below, I have a list of resources that I found useful for setting up Drupal.

Don’t Worry! CMS to the Rescue!

Image

If you want to create a website with less of a hassle and do not have the coding chops! Content Management System is the way to go!

In general, CMS speeds up the creation and editorial process of websites. Designer or not, that is important!

The reasoning behind a CMS-driven site…

A BEAUTIFUL SITE BUILT INTUITIVELY

Content management systems gives a designer and/or client the ability to add, edit and remove content while keeping a live website. While that is helpful, a little research on available CMSs will make the process easier with less of a learning curve. CMS is a less complicated way to update and manage site content. You do not have to be a web designer to have control over your website.

NOT AS TECHNICAL AS YOU THINK

While Content Management System sounds like another pain for a designer, well it’s not! Choosing the right CMS, will allow the user to log in with ability to navigate to the page they want to edit, by clicking edit page and start editing. As well as, editing elements throughout the site. Basically, what you see is what you get. If a user wants to crop an image while editing, a draft mode option is available on all CMSs to see the process. Keep in mind some CMSs do not have certain editing options.

VISITORS ARE SEARCHING

Search Engine Optimizations (SEO) is website marketing and content is important. CMS-driven sites help the process of SEOs using certain aspects. A way to help optimize search results is simply adjusting the URLs, no matter the language. Using localized keywords from content, visual hierarchy of text with clever content will help. Plugins are a big factor when managing SEOs, and a can simplify creating title tags and Meta descriptions for the site. An example of a SEO plugin is All in One SEO pack for WordPress, which can automatically optimize WordPress blogs for search engines.

MUST BE APPROVED

Publishing control is a huge factor when using content management systems. Simply controlling what content changes are made to the site. When content is edited the CMS will wait for until the user to approve and then publish. This allows clients to make changes to site content, save, return to edit and then publish at any time. Content can be saved, but also backed up depending on the CMS options. Therefore users do not lose all the editorial changes made to the site. BACKUP is important, so be sure to check on the options Content management systems have available for users.

TOUGHLY SECURED, EASY TO CONTROL

Once the user has logged into the CMS they will have control over their content. While security options is helpful when choosing the right CMS, different levels of security options are available. Some content management systems give the option to create and distribute new user IDs controlling access of certain areas on the site, which include uploading, downloading files and more. This type of powerful tool gives a client or developer control over edited and published material.

In conclusion, there are a number of reasons why CMS-driven sits are popular and can be important to a businesses. The ability to integrate blogs, SEOs, client control, page-loading speeds, and hassle-free design are a few more reasons for business owners and developers to consider CMSs. Yes, content management systems can be a learning curve, but the benefits of usage is important to making the process of building a site easier and accessible. Depending on the level of skills, choosing the right CMS is important. Some are easy to install, yet can be complex to use.

Here are mot usable CMSs to check out:

WordPress

Drupal

Joomla

Expression Engine

Text Pattern

Radiant CMS

Silver Stripe

 

 

RESOURCES:

http://blog.nexcess.net/2013/01/15/choose-content-management-system-for-your-site/

http://hullabaloo.co.uk/tools-tips/tips.htm/-/article/11

http://boagworld.com/content-strategy/cms/

http://searchenginewatch.com/article/2223883/10-SEO-Considerations-for-a-Content-Management-System

http://www.wsol.com/5-seo-tips-for-cms-driven-websites/

3 Websites a Designer Must Have Bookmarked

First off, there are an unlimited amount of resources throughout the web to make a designers life easier or even stressful. As a design student, I always wondered, how could I keep up with today’s web standards and technologies?

When HTML5 was introduced, I was just getting familiar with the syntax of HTML 4.01 strict. Nervous. I went to my instructor and asked “…so when are we going to learn about HTML5?” He laughed and said whenever you want. He explained the resources available for designers who want to keep up-to-date with current web technologies, all I have to do is my research.

And after a little research I was able to find 3 of my (now) favorite websites to visit.  I ended up using some of the skills learned on a semester project and got an A. The plus side to doing well on my project was learning about JavaScript in less than 4 months. Of course I was not an expert, but a novice who was/is excited to learn new skills.

So what exactly did these websites offer? And why do I believe every designer should know about them? Well let me explain…

First runner up: CSS-Tricks

http://css-tricks.com/

Image

CSS-tricks is my go to when I want to learn about a new skill. This awesome website offers videos, blog post, snippets demos, forums, and more. At first, the site can be intimidating, once you start clicking on the tabs, the overload of information is non-stop! Not to worry though, once you click on a specific area of interest, you get excited to learn. For example, the demo tab is the first place I click to see what cool jQuery plugins are available. The best part of viewing the demos is having the source file available to reference. Whenever I want to use a snippet of jQuery for a navigation bar, I download the source files and play around with the code.

Image

In addition, the snippets tab is another huge plus for designers. If I click on the CSS tab, and then “Blurry Text”, CSS-tricks provides the example code on how to complete the task.

Image

Image

CSS-tricks was built on WordPress. The tools on CSS-Tricks are managed by Chris Coyier and sponsored by Treehouse, another great website for designers. Coyier provided designers with resources to keep them up-to-date with technologies and I would defiantly recommend using the website to every designer.

Next up: CodePen (My Favorite)

http://codepen.io/

Image

Every designer/developer should know a thing or two about CodePen. The Facebook for developers/designers. CodePen is a social code playground for web designers and developers. Co-founders Alex Vazquez, Tim Sabat and Chris Coyier, created the site for education, inspiration and sharing among developers/designers. CodePen is great for feedback from other designers who will critique and offer help on uploaded codes. The website allows designers to comment, like, follow and view the code available. Also, implementing an easy layout for newcomers who want to look at popular, recently added, and tags of code. Signing up for codePen PRO allows developers/designers to upload their code, privately or publically, Collab View on projects with designers, real time cross-browser testing and more.

How CodePen Works:

Image

The code can be edited and shared, the technologies used for the design are available as well. The designers name is presented at the bottom to give credit.

Finally: Codecademy

http://www.codecademy.com/

Image

There’s a lot to know about Codecademy! First off, Codecademy is an educational resource for designers who want to practice their skills and others who want to learn about coding. Codecademy educations individuals at half the cost of a public institution.

So what makes Codecdemy so great!

The learning experience is user friendly for those new to the subject matter.

Programming languages like HTML & CSS, jQuery, JavaScript, PHP, Python, and Ruby, are all taught in courses. When each course is completed the user will receive a badge.

Image

A user signups, clicks on the programming language of their interest, and begins the course.

Image

The courses are set up in a user friendly layout. There are plenty resources available to help the user with each task given. In general, Codecademy is an online school for those who want new skills in coding or improve the old.

If anyone is like me and loves to learn than I would recommended all 3 websites to every designer and developer who wants to improve their skills. Each website provides an abundant of resources from program languages to new technologies. So check out each website and prepare to learn!

What to Know About AJAX

HTML, XML, CSS, JavaScript, if you heard those terms then you’ve heard AJAX. The technology of AJAX puts programming at a whole new level of integrating technologies, while not exactly being a technology. Instead AJAX is several technologies. The term was coined in 2005 by Jesse Garret. Garret described AJAX as a “new” approach in integrating a number of technologies, like dynamic HTML (DHTML), XHTML, Cascading Style Sheet (CSS), JavaScript, Document Object Model (DOM), Extensible Markup Language (XML), and XMLHttpRequest object. AJAX has become the common term in the programming world.

What is AJAX?

AJAX, stands for Asynchronous JavaScript + XML. The World Wide Web Consortium released a first draft in 2006. The web application combines a number of technologies that respond immediately to a user’s request. Using AJAX, the process of making a web application is quicker and faster when combined with other technologies. Updates to a user interface can be made without reloading an entire browser. Ajax is more data-driven then page-driven, relying on dynamic HTML. While, XML is the format to receive server data. Although XML is used, JSON is used more often. JSON (JavaScript Object Notation), resembles a small portion of JavaScript syntax, and is useful when writing JavaScript coded applications. JSON is lighter when used with XML to process AJAX. In conclusion, the web application transmits data by user request without interrupting the application, while behind-the-scenes the client requests information from the server. Thus, Ajax runs more like a client-hosted software. (Tutorialspoint)

AJAX and Technologies

AJAX relies heavily on JavaScript (JS) and XMLHttpRequest (XHR). When AJAX is processed, JS requests information from the server and updates are made to a current page without reloading, in addition, the user will never notice the process. AJAX is based on the following standards: HTML for content, CSS for presentation, XML for data stored and fetched from server, XHR retrieves any data, along with XML, and most importantly JavaScript allows everything to happen. (Tutorialspoint)

When AJAX uses other technologies there is a process taken place. Document Object Model (DOM) represents the structure of documents like XML, HTML, and DHTML, for accessing and manipulating. CSS presents a distinction between the style of content and changes are made programmatically by JS. JavaScript allows everything to operate smoothly. Several programmers will acknowledge XMLHttpRequest is essential to AJAX. XHR API was designed by Microsoft and later adopted by Mozilla, Apple, and Google. Released in July 2000, XHR was not recognized until 2005 when AJAX was announced. As previously mentioned, XHR provides an easier way for data to be retrieved from server without reloading the browser. XHR provides an easier way to develop a fully interactive web application. The API monitors the progress of a request and fetches the data in two ways, asynchronously or synchronously. All in all, Ajax relies on XHR, which makes the asynchronous server communication possible, while relying on other technologies.

An example of creating an instant object of XMLHTTPRequest:

Var myRequest = new XMLHttpRequest();

Benefits of AJAX

The key benefit of using AJAX is minimal updates can be made, without reloading the entire page.

Visual and Interaction implementations are provided by AJAX, for users to spend less time operating and learning about an application. This method eliminates the “Click, Wait, and Refresh” approach of pre-AJAX web applications. Several applications and features can be used on a single web page without cluttering. JavaScript is written and tucked away, as the browser loads the AJAX engine. Communication between the server and webpage rendering is the responsibility of the AJAX engine. The user will never notice the process or wait for a responds. The big difference between a pre-AJAX application and an AJAX web application is synchronous vs asynchronous. Below are Images provided by Jesse Garret, is an example of an interaction pattern, and the difference between a classic web application and an Ajax web application.

5 ajax-fig2

http://www.adaptivepath.com/uploads/archive/images/publications/essays/ajax-fig2.png

http://www.adaptivepath.com/uploads/archive/images/publications/essays/ajax-fig1.png

The Use of AJAX

A number of popular web applications use AJAX, like Google Maps, Google Suggest, Flickr, A9 Maps, Base Camp, Yahoo Maps and more. A huge investment is made by Google in developing AJAX. Throughout the last year, implementations of AJAX in Google products has been introduced. Ajax has provided better interactivity and easier to navigation with each application. Shared below are examples of how web applications use AJAX:

Google Maps, users are able to drag the map around instead of clicking on buttons. A user can use their cursor to grab the map and scroll around to a point of interest instantly without the browser reloading. Yahoo Maps layout is easy to use, more efficient and resourceful.

 26

hr

Google Suggest, allows users to type, while offering suggestions. Interaction involves the user using the arrow keys to navigate through the results. https://support.google.com/websearch/answer/106230?hl=en

jglkj

Links below show examples of AJAX in action:

http://www.wicket-library.com/wicket-examples/ajax/todo-list?4

http://www.wicket-library.com/wicket-examples/ajax/world-clock?6

Issues with AJAX

Ajax, like many other technologies, has grown rapidly introducing a new approach to the web. At the same time, problems with user interface and loading, complications, browser support, XMLHttpRequest standardization, JavaScript code and security issues has become a fact when using Ajax.

Ajax relies heavily on JavaScript. The functionality of JavaScript is essential to webpages with Ajax implemented. If a user prefers JS to be turned off, then application becomes useless. Otherwise, the developer must create a non-JS coded version of the web page for users. Interference with the server can be an issue when using JavaScript. Tutorialspoint states JS code is visible to hackers, which can be a problem. Hackers can interfere with the server using JS code.

Misusing the back and refresh button. Programmer Alex Bosworth believes the back button is a great feature, but JavaScript sets drawbacks when using the application’s functionality. When a user clicks the back or refresh button, the browser will send them to a completely different webpage or if dynamic they will be sent to the beginning the page processing. An addition, older browsers do not support XMLHttpResquest, which allows the asynchronous of web pages.

An unconventional way of using a webpage. Web-applications like Google Map, creates a learning curve for users who are not accustom to the click and drag method increasing difficulty. The developer must think about the accessibility and usability when utilizing AJAX. When developers consider using Ajax, they must also keep the user in mind. Don’t make the user think!

What’s next for AJAX?

Ajax has many challenges, yet presents better user interaction, reduced reload time, executed multi-purpose applications and features, and stability. Jesse Garret states “…the challenges are for the designers of these applications…” With a variety of web application implementing Ajax and huge investments made by Google, the technology will continue to mature and improve. There are many disadvantages and advantages using Ajax, a combination of technologies working together, and it will make the user’s experience easy and fun.

 

 

Resources:

http://www.w3schools.com/ajax/default.asp

http://www.tutorialspoint.com/ajax/what_is_ajax.htm

http://www.webopedia.com/TERM/A/Ajax.html

http://www.itbusinessedge.com/topics/show.aspx?t=695

http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/

https://developer.mozilla.org/en/docs/AJAX

https://developer.mozilla.org/en-US/docs/JSON

http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html

http://www.openajax.org/whitepapers/When%20Does%20Ajax%20Make%20Business%20Sense.php

http://www.jscripters.com/ajax-disadvantages-and-advantages/

https://alexbosworth.backpackit.com/pub/67688

Examples of Ajax

http://blog.teamtreehouse.com/create-your-own-ajax-effects

http://www.hotajax.org/