Webmonkey » Webmonkey Staff http://www.webmonkey.com The Web Developer's Resource Fri, 05 Apr 2013 20:20:46 +0000 en-US hourly 1 http://wordpress.org/?v=3.4.2 Using the New Features in Adobe BrowserLab http://www.webmonkey.com/2010/10/using-the-new-features-in-adobe-browserlab/ http://www.webmonkey.com/2010/10/using-the-new-features-in-adobe-browserlab/#comments Tue, 12 Oct 2010 00:09:26 +0000 Webmonkey Staff http://www.webmonkey.com/?p=48930 Using the New Features in Adobe BrowserLabThe following tutorial comes to us courtesy of Adobe. The company introduced some new enhancements to its BrowserLab service last week to improve its cross-browser testing abilities, and this is an overview of how to use some of these enhancements. We told you about BrowserLab here on Webmonkey when it first showed up as part [...]]]>

BrowserLabThe following tutorial comes to us courtesy of Adobe. The company introduced some new enhancements to its BrowserLab service last week to improve its cross-browser testing abilities, and this is an overview of how to use some of these enhancements.

We told you about BrowserLab here on Webmonkey when it first showed up as part of Dreamweaver CS5 in April. It’s a hosted service that lets web developers preview their work across multiple browsers and operating systems in a single environment. Since it’s a hosted service, Adobe can update the backend with the latest code from all the popular browser engines as they’re updated in the real world.

It integrates fully with Creative Suite 5, so if you’re using Dreamweaver, you can launch BrowserLab previews at any point in your workflow and test your live code against all the major browsers.

Adobe may eventually turn BrowserLab into a paid service (the cost will likely be between $200-300 per year), but if you sign up for access before April 30, 2011, you can secure an account for a full year at no charge. All you need is an Adobe ID login, which is free.

The new features of the include a BrowserLab add-on for Firebug and the ability to smart-align screenshots. There are also some further integrations with Creative Suite 5. To walk us through using these new features, Webmonkey has collaborated with Scott Fegette, a technical product manager for Dreamweaver and BrowserLab.

So, take it away, Scott.

Testing Pages With the BrowserLab Add-On for Firebug

The ability to use BrowserLab in any Flash-enabled browser has always been one of BrowserLab’s benefits, but the only way you could get to a screenshot of anything aside from the initial page as it loaded (like interactive menus/states/content/etc.) was to use Dreamweaver’s BrowserLab integration to send the current state of your page –- with edits and interactive elements -– directly to BrowserLab.

Using the new BrowserLab for Firebug (alongside the magnificent Firebug plug-in itself) within Firefox allows you to send the current state of your local page in Firebug – including design and CSS tweaks you may have made directly in Firebug – right up to BrowserLab and see how that handy hack you just added works across all the browsers.

This new Firefox plug-in will help you be effective with BrowserLab whether you’re in Dreamweaver or Firefox, and make the smooth BrowserLab experience more attainable within any workflow you may have established for yourself.

Once it’s installed, right-click the BrowserLab icon on the lower right corner of your browser, or right-click the page you’re viewing. You can also use the “Tools” menu.

Here’s a video that provides a more in-depth look at the Firebug integration:



“Smart Align” your screenshots

The new Smart Align feature lets you specify an alignment point on one screen shot, and then align all of your other screen shots to that point.

You’ve had the ability to custom-register your screenshots in BrowserLab for a while now. You just drag out from the upper left corner of your rulers in 2-up view and adjust for page-level offsets directly.

The idea was to let you be able to adjust for page-level misalignments and focus on a particular area of your page or application accurately, particularly within Onion-Skin View, where a page-level offset will ruin any changes of a “clean” view of your pages together. But in practice, the workflow was clunky, hard to master and ultimately inefficient. This feature has been redesigned, here’s the new workflow.

Click the Alignment icon. You’ll immediately get a “virtual loupe” you can drag across the current screenshot and find the area you’d like to align everything to. Finding a good, clear area like a corner or recognizable markup element is best -– particularly one you know will be reasonably consistent across browsers.

Then, either choose to align everything to that point, or reset your alignment (i.e. your zero point) to that point. By choosing to align all, you’ll get a quick status window that lets you know the progress (this does take some horsepower), and the accuracy of the matches BrowserLab finds.

And once it’s completed, you should be able to flip into Onion-Skin View and see that particular area of your page perfectly (or very close to perfectly) aligned with the other screenshots. This truly allows you to adjust for global inefficiencies and really use BrowserLab for some minute, fine-grained detail work.

BrowserLab goes local

I’d also like to talk about a feature Adobe launched in May that enhances BrowserLab’s integration with Dreamweaver. When testing content in Dreamweaver’s Live View using BrowserLab’s Local setting, BrowserLab “sees” what Live View sees. This lets you test content that you’re working on privately without publishing it to the internet, such as sites on your local web server. You can also test local content served by intranet web servers and content management systems like WordPress, Drupal or Joomla.

This works by securely pushing content to the BrowserLab service and ultimately delivering that content into the list of available browsers. BrowserLab leaves you in full control of what content is allowed to leave your system via permission settings, which lets you maintain an allow/deny list of URLs.

Also, when content is requested by a page you’re testing, BrowserLab references that list before pushing that content to the BrowserLab servers. If a URL isn’t in the allow/deny list, you’ll be prompted before uploading the content. The allow/deny list works with partial URLs too, meaning that the first portion of a URL must match the entire URL stored in the list.

You can set your file location preference and adjust permission settings in Dreamweaver.

If you’re new to to BrowserLab, try it out for free. As a part of the Adobe CS Live family of online services, you’ll receive 12 months of complimentary access.

This tutorial was authored by Scott Fegette, a technical product manager in Adobe’s Creative Suite Web business. He manages Adobe Dreamweaver and BrowserLab.

]]> http://www.webmonkey.com/2010/10/using-the-new-features-in-adobe-browserlab/feed/ 0 Ajax for Beginners http://www.webmonkey.com/2010/02/ajax_for_beginners/ http://www.webmonkey.com/2010/02/ajax_for_beginners/#comments Wed, 17 Feb 2010 01:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=775

JavaScript has had the XMLHttpRequest object for almost a decade now, but it really only started getting wide attention in 2004. All this attention was mostly due to some showoff web applications that made every developer who saw them think, “I want my site to do that!” But it also has to do with the spiffy, spiffy name given to it by the folks at AdaptivePath, who named this asynchronized application Ajax. Maybe you’ve heard of it?

A few high-profile Google applications in particular made a splash with Ajax: Maps and Gmail were first. It also powers some of the core functionality in the user interface of the ever-so-popular photo sharing site Flickr. By now, Ajax has become integral to the fabric of the web, especially in the era of real-time applications like Twitter, Buzz and Wave (all of which use Ajax extensively in their webapp front ends, for the record). Ajax may also lay claim to being the first JavaScript object with its own fan website. Date.com doesn’t count, although I did have a scintillating chat with a lady there once about the getTimeZoneoffset method.


What is Ajax?

So what is this fancy object that everybody wants a piece of? In brief, it’s a solution to one of the big annoyances of web interfaces. Generally, the user inputs some data or makes a choice, and clicks a button that sends the data to the server. The server takes a look at the data and sends back a whole new web page, which is loaded into the browser. Reloading a page every time you want to do something is annoying, disjunctive and time-consuming for the user. XMLHttpRequest moves that browser-server interaction to behind the scenes, so the user can just keep on playing with the same page, even while elements on the page are talking to the server! Go take a look at Google Suggest if I’ve lost you — it’s a nice, eloquent example of this.

JavaScript has always been able to sneakily trigger a server-side script without anything happening in the browser by using a few classic tricks. This one, for example:onSubmit='runascript = new Image(); runascript.src="http://www.wired.com/images/archiveyscript.php?" + this.value'. That sort of chicanery is good, maybe, for caching form data to a file on the server, but it doesn’t return any information to the JavaScript that calls it, so its usefulness is limited. Ajax, on the other hand, can get a full parcel of data back from the script it calls. Hence the “XML” part of the name – which really is just there for looks, kind of like the “Java” part of JavaScript, because the returned data can be plain text or whatever you like, if XML is overkill or just not your cup of tea.

This opens up millions of exciting possibilities. Every form submission, every JavaScript event, and heaven knows what else, can now interact with server-side databases and processing power. Data retrieval, password authentication, image generation – you name it, Ajax can trigger it.

Making Your Own

The potential of Ajax-enhanced web apps is limited only by your imagination – and by browser support. Mozilla-based browsers can do it, and Safari, and newer versions of Explorer, and Opera 8 but not Opera 7. It’s best to incorporate a fallback way of doing things for users who aren’t as cutting edge as you’d like them to be. Also, Explorer does things somewhat differently (of course) from all the other browsers, so it’s necessary to fork the code to account for the irritating little 80-odd percent of the population who use IE.

Let’s build a simple application that accepts input from the user, passes it to some PHP on the server that checks it against a database, and returns the result to the browser. It comes in three parts. First, we need an HTML form. This you’ve seen before: 


<html>

 <head>

 <title>Report</title>

 <script type='text/javascript' src='xhr.js'></script> </head> <body> <form action="fallbackpage.php" method="post">



 <p>Welcome, student. Please enter your essay here:<textarea name="essay" id="essay">

 </textarea> <input type="submit" name="submit" value="Submit" onClick="return

 grade(this.form.essay.value);">

 </p>

 </form>

 </body>



 </html>


Note that, for users without support for our script (named xhr.js), the form will just submit to the fallback page at fallbackpage.php.

Next comes the JavaScript. This is the exciting part, so we’ll take it slow. 

 function grade(essay) {

First, we initialize the object. We have to do it two ways, for different browsers. 


    // Mozilla version

    if (window.XMLHttpRequest) {

        xhr = new XMLHttpRequest();

    }

    // IE version

    else if (window.ActiveXObject) {

        xhr = new ActiveXObject("Microsoft.XMLHTTP");

    }

Then, we escape the user input to make it URL-safe: 

    essay=encodeURIComponent(essay);

and use the open method of the object to open a connection to the PHP script: 

    xhr.open("POST","grade.php");

The method requires two arguments:first, the HTTP method (GET or POST); second, the URL of the script.

A quick HTTP header prepares the script for what it’s getting, and then the send method transmits the actual request: 

 xhr.setRequestHeader(

      'Content-Type',

      'application/x-www-form-urlencoded; charset=UTF-8'); xhr.send(essay);

This last step isn’t necessary for GET requests, wherein all the data can be contained in the query string of the URL.


Getting Results

Now we’re ready to see if the HTTP request worked. The readyState property counts up from zero during the request, and shows 4 when the server page has loaded successfully. 

 xhr.onreadystatechange=function() {

      if (xhr.readyState==4) {

If the request worked, then we can get the output of the server-side script by querying the responseText property, which contains a string. For more complex server script output, a responseXML property, which can hold a full document object of XML data, is also available. 

      grade = xhr.responseText;

      alert ("Nice essay. Your grade is " + grade);

    }

    return false;

 }

Want to see all that in a pastable block? Here it is in a separate file.

Finally, the third component is the PHP script, which lives on the server and waits patiently for the JavaScript to pass it some juicy data. This example uses PHP, but any language you like — Ruby, Perl, C, ASP — can do as well. The core of this example script is a natural-language function called grade_essay() that grades student essays from 1 to 100, but I will redact that part to conserve space. 

 <?php

 function grade_essay($essay) {

      return strlen($essay);

 }

 $essay = urldecode(implode(file('php://input')));

 $grade = grade_essay($essay);

 echo $grade;

 ?>

The php://input grabs the POST data, which gets put into a string, decoded and passed to the ingenious grading algorithm. The algorithm returns a numeric grade. Lastly, we just output the grade with echo – ordinarily, this would display in the browser, but since the PHP script is running “behind the scenes,” the string output is simply returned to the JavaScript that called it. If you need structured data, an XML document would be output with an echo statement in just the same way, but the content-type of the output page must be set to text/xml.

What the user sees is this:She types her essay into the text area in the browser, clicks Submit, and within instants an alert box pops up giving her a final grade on the essay. Invisibly, the essay has been sent to the server, read and evaluated by a team of PHP gnomes, and returned with a grade, without ever reloading the page. The user can modify her essay and resubmit it endlessly.

And that’s the gist of the almost magical XMLHttpRequest object! The example is simple, but the uses of the object can be elaborately, multifariously clever. If you need further inspiration and edification, a burgeoning number of examples are dotted around the Web:

  • Social news site Digg


But what data you send and receive with Ajax is up to you.

]]> http://www.webmonkey.com/2010/02/ajax_for_beginners/feed/ 8 Make an HTML Document http://www.webmonkey.com/2010/02/make_an_html_document/ http://www.webmonkey.com/2010/02/make_an_html_document/#comments Tue, 16 Feb 2010 01:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=16

HTML is the lingua franca of the web. It’s a simple, universal mark-up language that allows web publishers to create complex pages of text and images that can be viewed by anyone else on the web, regardless of what kind of computer or browser is being used.

Despite what you might have heard, you don’t need any special software to create an HTML page; all you need is a word processor (such as SimpleText, BBEdit, or Microsoft Word) and a working knowledge of HTML. And lucky for all of us, basic HTML is dead easy.

It’s All About the Tags

HTML is just a series of tags that are integrated into a text document. They’re a lot like stage directions — silently telling the browser what to do, and what props to use.

HTML tags are usually English words (such as blockquote) or abbreviations (such as “p” for paragraph), but they are distinguished from the regular text because they are placed in small angle brackets. So the paragraph tag is <p>, and the blockquote tag is <blockquote>.

Some tags dictate how the page will be formatted (for instance, <p> begins a new paragraph), and others dictate how the words appear (<b> makes text bold). Still others provide information — such as the title — that doesn’t appear on the page itself.

The first thing to remember about tags is that they travel in pairs. Every time you use a tag – say <blockquote> – you must also close it off with another tag – in this case, </blockquote>. Note the slash – / – before the word “blockquote”; that’s what distinguishes a closing tag from an opening tag.

The basic HTML page begins with the tag <html> and ends with </html>. In between, the file has two sections – the header and the body.

The header – enclosed by the <head> and </head> tags – contains information about a page that won’t appear on the page itself, such as the title. The body – enclosed by <body> and </body> – is where the action is. Every thing that appears on the page is contained within these tags.

A Basic HTML Document

So let’s create a simple sample page, shall we? The first step, of course, is to create a new text document (remember, it should be saved as “Text Only” or “Plain Text” if you’re using a word processor that’s fancier than, say, SimpleText) and name it “anything.html” where “anything” is, uh, anything.

Your basic document will look something like this: 


<html>

 <head>

 <title>Summer</title>

 </head>



 <body>

 <h1>Summer Vacation</h1>



 <p>My summer vacation was sunny, silly, and far too short.</p>



 <p>How many days till Christmas?</p>



 </body>

 </html>

So within the <head> tags, we have the title “Summer,” which will appear in the bar across the top of your browser.

Within the body tags, we have everything that will appear on the page. In this case it would look something like this:

Summer Vacation

My summer vacation was sunny, silly, and far too short.

How many days till Christmas?

As you might have guessed, <h1> is the tag for a headline (the largest headline, in fact) and <p>, of course, marks the beginning of a new paragraph. Each paragraph is closed off by a corresponding </p> tag.

Seems simple, huh? Well, it is.

Especially since you can see what HTML people have used to build any web page you find by simply viewing source. Oh, and don’t go thinking you need your own homepage to practice, either. You can save HTML documents on your local drive and then open them up using the Open option under the File menu on your browser.

]]> http://www.webmonkey.com/2010/02/make_an_html_document/feed/ 12 Action http://www.webmonkey.com/2010/02/action/ http://www.webmonkey.com/2010/02/action/#comments Tue, 16 Feb 2010 01:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=21

Action is a Form attribute that communicates with the common gateway interface (CGI) program to process.

For example, if you entered “bananas” to the following form: 

<form action="../processor.cgi">

Please process this:

    <input name=food><br>



    <input type=submit>

</form>

The HTML form would send the input “bananas” to the cgi script. To the cgi script, the action would look like: ../processor.cgi?food=bananas

]]> http://www.webmonkey.com/2010/02/action/feed/ 0 Apache http://www.webmonkey.com/2010/02/apache/ http://www.webmonkey.com/2010/02/apache/#comments Mon, 15 Feb 2010 20:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=31

Apache is a freely available, and highly popular, open-source web server.

Originally, Apache was designed for Unix. Now versions are available for most operating systems including Windows, OSX and Linux. There are also numerous add-ons and tailored versions of the server using the Apache module API. The name Apache comes from its origins as a series of “patch files.”

Read Webmonkey’s Apache for Beginners article for more details about Apache.

Information and downloads can be found at the Apache Software Foundation website.

]]> http://www.webmonkey.com/2010/02/apache/feed/ 0 Applet http://www.webmonkey.com/2010/02/applet/ http://www.webmonkey.com/2010/02/applet/#comments Mon, 15 Feb 2010 20:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=33

Apache is a freely available, and highly popular, open-source web server.

Originally, Apache was designed for Unix. Now versions are available for most operating systems including Windows, OSX and Linux. There are also numerous add-ons and tailored versions of the server using the Apache module API. The name Apache comes from its origins as a series of “patch files.”

Read Webmonkey’s Apache for Beginners article for more details about Apache.

Information and downloads can be found at the Apache Software Foundation website.

]]> http://www.webmonkey.com/2010/02/applet/feed/ 0 API http://www.webmonkey.com/2010/02/api/ http://www.webmonkey.com/2010/02/api/#comments Mon, 15 Feb 2010 20:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=35

The application program interface (API) is a set of building blocks for programmers.

APIs are made up of routines, protocols, and tools. Most operating environments provide an API so that programmers can write applications consistent with that environment. For example, developing software using the Windows API ensures that your user interface will be consistent with other Windows applications, making it easier for users to learn your new programs.

Use on the Web

Web APIs provide simple ways to interact with websites. Using an API, you can extract public data from sites like del.icio.us, Flickr and Digg to create mashups, reuse data or just about anything else you can imagine.

APIs are also useful for extracting your own private data from a web service so that you can back it up elsewhere or display it on another site.

When talking about APIs you’ll here the following terms quite a bit.

Common Web API Related Terms

  • Web service/API — These terms are largely interchangeable and simple refer to the ways you can interact with the data on your favorite websites.
  • Method — A method is just one aspect of an API; you might also see methods refered to a functions. For instance, if you’re interacting with Flickr, you might want to get your public photos. To do so you would use the get_user_photos method.
  • Response — The information returned by the API method that you’ve called.
  • REST — Short for Representational State Transfer. REST treats data as a web document that lives at a specific URL. REST APIs use standard HTTP requests such as GET, PUT, HEAD, DELETE and POST to interact with data.
  • XML-RPC — This older API scheme formats method calls and responses as XML documents which are sent over HTTP.
  • SOAP — Simple Object Access Protocol. A W3C standard for passing messages across the network. SOAP is the successor to XML-RPC. It’s complexity has led many to disparage SOAP and with more APIs leaning toward REST, SOAP’s future is uncertain.
  • Ajax — Asynchronous JavaScript and XML. Technically it has nothing to do with APIs, however many sites using APIs send their queries out using Ajax which is partially responsible for the popularity of JSON.
  • JSON — JavaScript Object Notation. JSON’s main advantage is that it is easy to convert from JSON to nearly any other programming language. JSON uses key-value pairs and arrays, something common to PHP, Python, Perl, Ruby and most other languages. The portability of JSON has made it an increasingly popular choice for sites developing APIs.


Popular Web APIs

  • Google Maps
  • Yahoo Maps
  • Flickr
  • YouTube
  • del.icio.us
  • Ma.gnolia
  • Twitter
  • Yelp
  • OpenID
  • Amazon S3
  • AtomAPI
  • MediaWiki API
  • vzaar API
    ]]> http://www.webmonkey.com/2010/02/api/feed/ 0 Architecture http://www.webmonkey.com/2010/02/architecture/ http://www.webmonkey.com/2010/02/architecture/#comments Mon, 15 Feb 2010 20:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=37

    In computer science, architecture means the conceptual arrangement of a system’s components.

    Taking the analogy of a physical building, if a website’s individual pages are rooms, its architecture is the hypertextual relationship between the rooms within the structure.

    ]]>     http://www.webmonkey.com/2010/02/architecture/feed/ 0     Banners http://www.webmonkey.com/2010/02/banners/ http://www.webmonkey.com/2010/02/banners/#comments Mon, 15 Feb 2010 20:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=42

    Banners are a basic unit of advertising on the web.

    They were pioneered by GNN and HotWired back in the frontier days of 1994 and are now nearly ubiquitous, appearing in all sorts of shapes, sizes, and locations. You can probably see one right now at the top of the page.

    ]]>     http://www.webmonkey.com/2010/02/banners/feed/ 0     Behavior http://www.webmonkey.com/2010/02/behavior/ http://www.webmonkey.com/2010/02/behavior/#comments Mon, 15 Feb 2010 20:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=44

    Setting a dHTML element’s behavior attribute allows you to customize the element.

    Microsoft implemented the behavior attribute of Cascading Style Sheets in a way that enabled object-oriented programming to enter the world of web authoring. By encapsulating dHTML in an external object, the properties and methods of that object can be used. A web page can then use these objects with the behavior attribute. This means, for example, that a web author no longer had to perform an explicit browser detection.

    ]]>     http://www.webmonkey.com/2010/02/behavior/feed/ 0