Tuesday, April 10, 2012

Understanding Javascript

JavaScript is the most popular scripting language on the Internet due to it's wide acceptance with all major browsers. If you stumble across this blog and you don't have an understanding of HTML and CSS then my suggestion is to start learning those two languages first and then dabble with JavaScript. Either way, let's dive into JavaScript and cover some basics on its capabilities and how it is coded.

What can JavaScript do for your web pages? Well first and foremost JavaScript was designed for the purpose of adding interactivity to web pages. JavaScript can be embedded right into HTML pages. Specifically, a few examples of what JavaScript can do is react to events, validate data such as forms (like a form you fill out on a website asking for certain information), and create cookies. One important thing to remember about the difference between HTML and JavaScript is that JavaScript is case sensitive whereas HTML is not.

To insert JavaScript into an HTML file you use the <script> tag. Advancing on this you will typically write:

<script type="text/javascript">
....some javascript code....
</script>

Whatever is contained between the opening <script> and closing </script> tags is what is executed by the browser when the page is loaded. But what if we don't want JavaScript to execute right away, rather we want it to execute when an event occurs. An event could be when a user clicks a button. If this is the case then we need to add a function inside of our <script> tags:

<script type="text/javascript">
function displayDate ()

It is common to put any JavaScript that involves functions within the <head> tags of an HTML document. This makes for better organization and also ensures that the JavaScript will not interfere with the page content between the opening and closing <body> tags.

Next I just want to quickly mention JavaScript statements and what is referred to as Javascript Code (or simply JavaScript). A JavaScript statement is kind of what it sounds like. It is a command to a browser. For example, the following line of code would tell the browser to write "Hi I'm Jordan" onto the web page:

document. write("Hi I'm Jordan");

Javascript Code is a sequence of multiple JavaScript statements. For example:

<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
</script>

This is merely scratching the surface of JavaScript and how important is to web design and development. I simply wanted to introduce you into what JavaScript is and show you a few examples of what the Javascript language looks like. I'm definitely at the beginner spectrum of JavaScript myself so I feel your pain if you are thinking JavaScript is "another programming language I have to learn ON TOP of HTML and CSS". There are tons of resources out there to help you begin your quest with JavaScript. One site I recently registered for was www.codeacademy.com. Let me know what you think, I would love to hear some of your comments with regards to JavaScript or my blog in general!

Sunday, April 8, 2012

15 Web Design and Development Trends for 2012

I recently stumbled across an article by Craig Grannell that discussed some trends that web industry professionals are forecasting for the year 2012. I felt that this article fit in really nice with what I am trying to accomplish with my blog and be a resource for people interested in web design and development.

There is no doubt about it that 2012 is going to be a hectic year for the web. Industry professionals are predicting a turbulent year as mobile devices and desktops battle as well as brand new innovative ways emerge to represent content digitally. Let's take a look at the 15 topics discussed in Craig's article.

1. Progressive Enhancement

These new technologies that are swarming the web will become more and more accepted. I'm talking about HTML5, CSS3, and mobile devices. Basically there will be more of a rush than ever to embrace the "shiny new" says Grannell.


2. Responsive Design

This term relates to how a design for the web for example will appear when it is shrunken down and viewed on maybe a tablet, and then maybe even shrunken down farther when it is viewed on a mobile device. This is referred to as how as how "fluid" a design is. Design for 2012 will need to look past screen size dimensions and put additional focus on how content will be displayed at multiple different resolutions and sizes.


3. Flash Will Survive

The year 2011 talked a lot about the demise of Flash (one of my previous blog posts). Some industry professionals made comments in the article that while web developers and designers are continuously caught up in HTML5 and CSS3 due to the hype, they will come to the conclusion that Flash still is the predominant tool to create engaging experiences online due to its extremely large acceptance in the online community.


4. Native Support for Plug-In Features

This is talking about a push for individual browsers to increase browser-native features and power with regards to HTML5.


5. Appification Takes Hold

As one could expect, professionals are predicting more high-quality and high-performance  games running on browsers. They also feel that the year 2012 will have designers thinking more about tablets and screen interaction elements. Design could now live between "point and click" and "touch and swipe" states the article. One could also expect that 2012 will be huge for apps. The article talks about how in this year we will start to see apps adopt the merging of Android and iOS with HTML5 to create exciting user experiences .


6. Web App Fragmentation

This section of the article dealt with apps and how although they will definitely see an increase in 2012, these apps will be fragmented on the web. For example, there has already been examples of "Chrome-only" apps. This isn't a positive thing developers or consumers.


7. Mobile gets bigger

Mobile traffic usage and traffic of course are predicted to sky rocket in 2012. Peter-Paul Koch believes that in terms of market share mobile browsing will exceed 10% this year. That's pretty significant for mobile devices. They are definitely something to keep an eye on in 2012


8. A Device Explosion

Tablets and mobile devices will flood the market. Not simply just the iPad, a handful of more inexpensive devices are expected to increase meaning designers/developers are going to have to get their hands on more devices to double check for compatibility of their sites.


9. Respect Beyond Aesthetics

Designer and illustrator Geri Coady notes in this section that she thinks that, "2012 will find more designers and clients understanding that appearance alone isn’t everything: “We should treat style, content, and behaviour with equal respect – they must work together to strengthen the meaning and personality of a site, app, or brand."


10. Social Battles Heat Up

Professionals think that Facebook will continue to lead the social media revolution in 2012, however a number of start ups as expected will gain attention as they have been as of late. There is also speculation around the idea that Facebook will offer tools in the near future to actually "create a a site" instead of just a page to really attract their fan base.


11. Growth of the Two-Screen Model

TV companies can't afford to not be more aware of competition in the living room. In 2012 it is predicted that TV programs will have an increase in output for lively content to mobile devices.


12. Distributed Workforces

In today's times many designers and developers have been able to find work from their bedroom, Starbucks, etc. In 2012 talented designers may continue this trend of not working in the standard cubicle which could focus organizations to change the way they search for talent and once they find it adjust their organization culture based on these creatives' past tendencies.


13. Stronger Customer Service

Web designers more than ever will gain a strong understanding that they do more than just design websites, rather they need to understand they are providing a service for a client. Web designers/developers think more about their online users and how they will interact with the site, when in reality the actual client is equally as important.


14. Better Value, Not Lower Prices

Industry professionals stated in this section of the article that the web design industry is "on a continuous march towards professionalism". There is an increase in the need for web designers and developers to not cut corners and focus on truly providing an exceptional service for their clients.


15. Pushing the Boundaries

HTML5 and CSS3 increased acceptance is the main thing that we will see an increase in in 2012. Designers and developers will experiment and showcase the potential this technology has. Thinking outside of the box and embracing new ways of doing things were two things mentioned in this section of the article. The future is bright.


This talk about web design and development for the current year is especially exciting to me due to the fact I am graduation from the University of Northern Iowa in May. As I continue to work on my skills in this field and read articles like this it really ignites my enthusiasm to become involved in the industry.











Sunday, April 1, 2012

Adobe Flash and Interactivity for Web Pages

We've all seen the message you receive when you stumble across a web page and there is supposed to be a video that begins playing however in your case it doesn't because you the message you are receiving states, "You need to upgrade to the latest version of Flash". In this blog post I want to discuss what exactly is Adobe Flash, it's applications and how it benefits web design/development, and also the future of Flash as it battles HTML5 and others who have a hatred for it.

Adobe Flash simply put is a multimedia platform that is typically used to add animation, video, and interactivity to web pages. Adobe Flash has the ability to capture user input and even runs off of its own language, ActionScript. Flash manipulates both vector and rastor graphics to provide animation of images and text.

But just what can Adobe Flash do for your website? Take a look at this awesome example of a site that uses Flash:

http://www.proyectiva.com/.

Pretty cool stuff. Obviously a site like this is far more interactive and fun to play around with than a website that simply has standard links, images, and text. On top of videos Flash is a common tool used to create games that can add interactivity to your website. One important thing to keep in mind when using Flash with your website is bandwidth issues. If a lot of Flash is used it can really slow down your site and frustrate visitors. Use Flash when it will be the most effective is generally a good rule of thumb.

With all of the hype surrounding HTML5 one topic that is always brought up is the issue of whether HTML5 will eventually replace Adobe Flash down the road. Here is an infographic that highlights some statistics relating to HTML5 and Flash:

http://venturebeat.com/2012/01/31/html5-versus-flash-infographic/

It is obvious that at this point in time that Adobe Flash has the edge on HTML5. But will this advantage begin to shift in the upcoming months as HTML5 becomes more and more accepted? As of recent the World Wide Web Consortium (W3C) actually replaced the need for Flash all together. In response to this Adobe has announced that it plans to introduce a new product titled Edge that supposedly is software that is being developed to combine the powers of HTML5, CSS, JavaScript, and the Canvas tags that have been introduced with HTML5. It will be interesting to monitor the battle between these two in the upcoming months and see if anything major results. As for now Flash is still the dominant player and it appears that it isn't going away completely any time soon.