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/

Advertisements

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/