Josh Sager Media: Creative Technologies Blog

Josh Sager Media: Creative Technologies Blog
Creative Technologies Blog
Home | Portfolio |Blog | Presentations | Music | About

Posts Tagged ‘JavaScript’

March 2010 Brush Up Classes

Thursday, February 4th, 2010

josh-sager-brush-up

Instructor: Joshua Sager

Course meets March 6, 13, 20 and 27

Time: 9:00am - 1:00pm

Each Saturday will cover a new technology starting with Web Standards, moving on to JavaScript, then ActionScript 3.0, and finally Flex. Each session will be jam packed so bring your notebook and a way to save your work!

RSVP for the Web Overview (PTI Alumni only)

Flash vs HTML: The Endless Debate

Monday, September 21st, 2009

Last week I participated in panel discussion ( Refresh Pittsburgh and Flash User Group crossover ) about the use of Flash and it’s future. Is it doomed? Will it be replaced? Does anyone care?

Round One… Fight

As with many talks like this, the conversation eventually takes a turn towards a Moral Kombat blood bath over Flash vs HTML. Which is really a debate of ActionScript vs JavaScript. Although I do enjoy the debate it’s a shame that it gets boiled down to only two options. Which, in my opinion, is very “anti-web”. The web, in my eyes is very much a democracy allowing the developer to chose the technologies they believe will achieve their specific results in any combination they see fit. Good, bad, or indifferent.

Now I think we can all agree that there is a time and place for specific technologies and no matter our selections they should be centered around the desired outcome. So the Flash vs HTML debate is a kind of a waste, but I do enjoy revisiting some of the time tested stereotypes. Such as:

Flash content is not searchable…

Not so true. Adobe and google have made large gains this area. it still has a long way to go but it is searchable. And there are interesting projects going on helping to solve this problem. (http://www.flashnseo.com/)

Not everyone has the flash plugin

Although this is true, everyone should be further defined. Everyone seems to be broken up into a two categories. Desktop/laptop and mobile/other devices.

Most desktop, laptops, etc have flash player and currently 98.9% of the global market have adopted Flash Player 9 with 86.7% using Flash Player 10. (http://adobe.com/products/player_census/flashplayer/version_penetration.html) It’s a pretty safe bet to deploy a web solution viewed on most desktops and laptops in Flash Player if you have a need for what Flash content provides. Now this doesn’t mean I’m saying an ENTIRE website should be made as a .swf. I’m merely suggesting that .swf’s have a large user base.

The desktop / laptop screen is no longer the final destination for what we are creating these day. Many mobile devices as well as speciality devices do not support flash player. Despite Flash-Lite being a huge force in Japan, the US has been slow in adopting flash based content on their phones. If you’re looking for a unilateral solution from desktop to mobile, flash isn’t the right answer. However, HTML and JavaScript have their problems too. With no real set standard for screen size, mobile browser, or methodologies it appears the browser wars from the late 90’s have re-emurged to our cell phones. Using anything is a mixed bag and will produce varied results.

Once again knowing your customers and expectations are key. We no longer live in an era were we can reach 100% of internet users. Even when we that 100% didn’t include all of the actual customers. It was a focused group of customers that used the internet.

HTML 5 will play audio and video therefore killing flash video and making it no longer necessary.

At first I got a little scared about this one, but after more thought I’m not too worried. Yes HTML 5 is supposed to make playing other media in the browser more accessible, but consider this. HTML 5 will have to be adopted by not just the developing community but the users that have the browsers. I know I know Firefox 3.5 has some of the HTML5 and CSS 3 things, but the real benchmark is the death of IE in 2014 (http://www.sitepoint.com/blogs/2009/08/18/microsoft-support-ie6-2014/).

Until the user base is using the NEW and IMPROVED browsers, HTML 5 will have a low impact until it reaches critical mass. The other thing that doesn’t scare me about HTML 5 being a Flash Video killer is the need for streaming media. I do realize there are a lot of standalone flv files on the web. Heck I use them myself, but once your 5 or 6 videos grow to about 20 or 30 and your monthly bandwidth is getting chewed up, a media server becomes a critical piece in delivering video over the web. Unless HTML 5 can deliver and manage extremely small file sizes Flash Video still serves a need that many people have.

JavaScript can do drag and drop as well as animation. Take that Flash

True. It can, but do you ever have to tweak your code base so IE 6 allows for the animation? What about Opera or Safari? The great thing about Flash is right out of the box basic animation just works across all desktop platforms

I know that JavaScript has a timer and Please don’t get me wrong I LOVE JavaScript, but it’s a nightmare with temporal design. Communicating over time is what makes Flash well… Flash. That’s what draws us in. It’s not that things move, but meaningful information is presented over time and tells a story.

Storytelling vs Presentation

The best way I can describe it is like this. JavaScript at best is a key-note or power point. It can help you change states, transition you from point A to point B and heck it even looks nice if you take the time, but it’s not and never will be a Movie. Flash is a movie… no no a story that unfolds over time. A presentation is something that informs you a story is something that captures you. Now just as all stories are not good, not all uses of flash are good, but the potential is there and when used well it’s an experience like none other. That’s when information transforms into a story. It’s engaging, entertaining, and we love it.

Flash gives the developer, designer, and artist a nice and clean way to design over time. Temporal decisions beyond on and off. That one key element is what separates the two technologies. Just about all functionalities in one way or another can be achieved via JavaScript or Actionscript. But until I see a JavaScript cartoon I won’t be convinced that it’s they way I want to tell the story of some of my most engaging content.

Drop Down Lists Populated using JavaScript and XML

Thursday, September 11th, 2008

The Problem
You have a drop down list but you want them to dynamically populate using your super cool xml. Not a problem because Javascript can help you out.

The Solution
view the xml and javascript drop down demo

  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>XML Drop Down Menu with JavaScript</title>
  7. <script language="javascript">
  8.        // creates an xml object
  9.         var pt=
  10.                 <team>
  11.                         <player id="1">
  12.                                 <name>Josh</name>
  13.                         </player>
  14.                         <player id="2">
  15.                                 <name>Ben</name>
  16.                         </player>
  17.                         <player id="3">
  18.                                 <name>Wayne</name>
  19.                         </player>
  20.                 </team>
  21.                
  22.                 // method to get the xml stuff
  23.                 function getXMLStuff(){
  24.                // loops through the xml and grabs only the names
  25.                 for each (var e in pt){
  26.                         //adds to the existing drop down box with the names from the xml
  27.                         document.myForm.myList.innerHTML += "<option value=’"+e.name+"’>"+e.name+"</option>"
  28.                 }
  29.                 }
  30.                
  31.        
  32. </script>
  33.  
  34. </head>
  35.  
  36. <body>
  37. <a href="#" onClick="getXMLStuff()">click me</a>
  38. <form name="myForm">
  39.         <select name="myList")
  40.         <option>Test</option>
  41.     </select>
  42.  
  43. </form>
  44. </body>
  45. </html>
  46.