Blog about front-end technologies and design: April 2009

Friday, April 24, 2009

Adobe Introducing New Amazing Product Called "Flash Catalyst"

Adobe Flash Catalyst is a new professional interaction design tool for rapidly creating application interfaces and interactive content without coding. These can range from interactive Ads, product guides and design portfolios to user interfaces for applications. Flash Catalyst enables designers to start from static compositions created in Adobe Photoshop CS4, Illustrator CS4, or Adobe Fireworks CS4 and convert the artwork into applications and interactive content. The designer does this by visually defining events, transitions and motion. Flash Catalyst can output a finished Flash SWF or AIR application that’s ready to publish on the web. In addition designers can provide the project file to developers who can use Adobe Flex to add additional functionality such as connection to back-end systems.

Increase your Creative Productivity

Leverage your existing skills: Use your existing design skills without having to learn new ones
with Creative Suite: Create your designs in Photoshop CS4, Illustrator CS4 or Fireworks CS4 and import native files with all layers and pages intact
Fast design: Turn static graphics into dynamic content by selecting objects and specifying actions from menus
Round-trip workflow: Easily move back and forth between Creative Suite and Flash Catalyst while preserving your work

Empowering Interaction Design

Easy interactivity: Add interactivity based on states and events instead of timelines.

Interactivity without coding: Do interaction design without coding

Consistent Execution: Know that your designs will work exactly as you create them. No risk of losing something in translation.

Expressive: Creative compelling designs by leveraging the rich typography, graphics, video and audio capabilities of the Adobe Flash Platform.

Span the range of simple to complex projects: Develop a range of projects from simple Ad banners to complex application interfaces.

Faster time to market through agile design and development workflows that support iterative development

Agile prototyping and iterative design: Try a number of different designs quickly. Work with developers in parallel without losing fidelity.
Leverage your work: Quickly transition from wireframe to design to working application while reusing your work at each stage
Separate pixels from plumbing: Adobe Flash Catalyst and Adobe Flex Builder are a powerful combination enabling seamless collaboration to build stunning applications and interactive content
Fast time to market and easy deployment: Create and publish your projects to the web or collaborate with developers using a single project file.

Monday, April 6, 2009

How to Create Dreamweaver Spry HTML data set?

The Adobe Spry framework has made Ajax easy and approachable for non-developers. It is, by far, one of the simplest ways to take data, load it via Ajax, and display it on a web page. As easy as Spry makes it, there are still times when the actual creation of the data may be a bit difficult. The person creating the website may not know how to create XML or how to write the SQL to get the data. But what if you could leverage your existing HTML knowledge to use the common table as your data source? Or any other simple HTML? The Spry HTML data set lets you create a data set from any structured HTML. To make it even easier, Dreamweaver provides a simple way to use Spry as this article demonstrates.

In Dreamweaver, Create a new HTML file and save it as shipdata.html, in this file copy and past the code below. You will see this is nothing more than a simple page with basic HTML and a table.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<table id="shipdata">
<tr>
<th>Name</th>
<th>Class</th>
<th>Length(m)</th>
<th>Crew Size</th>
<th>Combat Kills</th>
</tr>
<tr>
<td>Lady Luck</td>
<td>Destroyer</td>
<td>900</td>
<td>125</td>
<td>311</td>
</tr>
</table>
</body>
</html>

Let's pretend that this HTML page represents data for our fleet of planet-conquering space ships. Our intern, Pablos Hyperion Parris, can barely dress himself and certainly can't be trusted to do any programming. He can, however, write basic HTML. We've tasked him to update the HTML page with various stats regarding our fleet. You can open this HTML page and view it in your browser. Since it's just an HTML table there isn't much to it. Let's see if we can make this a bit more interesting?

Within the folder you created for this article, right-click and create a new file named test1.html.
Place your mouse within the <body> tags and click to set the cursor there
Next, locate the Insert toolbar (see Figure 1). If it isn't visible, go to the Window menu and select Insert. On the toolbar select Spry.

Click the Spry Data Set menu item. This brings up the Spry Data Set wizard.
You have quite a few options here, but I'll keep it simple for this first demonstration. Leave the data type as HTML. The Data Set Name is just used to uniquely identify the data that will be displayed on the page. There is no need to change this. Also keep the Detect option at its default, Tables.

Click the Browse button for Specify Data File. Select shipdata.html and Spry automatically loads the page and looks for tables The wizard automatically looks for tables in the HTML file.
As you can see, it has found the data from the HTML table and given you a nice preview of the values from each cell.

Click the yellow arrow marker next to the table and the Data Preview section will be populated. The populated Data Preview section.

Click Next. This part of the wizard lets you define the behavior of the data set when it is rendered on the page. You don't have to do anything here, but it would be helpful to modify a few settings.

Click the Length(m), Crew_Size, and Combat_Kills columns. For each of these, change the type from string to number. This will aid in sorting the data correctly.
Set Sort Column at the bottom to Name. This will sort the data set by ship name when the data is loaded. Click Next to the go to the last page of the wizard.

This page lets you define how the data set will be used on the page. You have four options and each is explained pretty well. For your first demo, select Insert table, the top-most option, and then click Done.
Save the file and open it in your browser. The first thing you will notice is that the first ship is Big Bertha. This is proof that Spry was able to load the HTML and then sort it by name.
Now click the headers. You can sort the data both ascending and descending by any column you want.

What's cool about this is that you took a static, simple HTML table and converted it into something much richer. Feel free to edit the table and change items like Crew_Size.

Sunday, April 5, 2009

What is Photoshop ?

This is the first post about Photoshop, So I want to discuss about what is the photoshop because most of the new designers doesn't know about photoshop. This post is for them.

Thomas and John Knoll began development on photoshop in year 1987. And the version 1.0 was released by Adobe in 1990. The program was intended from the start as a tool for manipulating images that were digitized by a scanner.

Check the Screen Shots Below...

Welcome Screen of the Photoshop 1.0 Version

Tool's & Menu Pallets of the Photoshop 1.0 Version

Adobe Photoshop is the most popular Pixel Based Image Editing Program for the Print publishing, Broadcast & Media and Web Industries. Adobe developed this Amazing Program, adobe is one of the most popular Software companies in the world.

Photoshop is available on a wide array of platforms ranging from Mac to Windows to UNIX. Using Photoshop you can create a graphical images for the following mediums:-

Print Media
- From visiting Card to Large Format Digital Advertising Banners all kind of designs you can create using photoshop.
- Photoshop is mostly popular for its advantage of Photo Manipulation and Decimalization, Almost from last Two Decades simply say photoshop is the king in photo industry, It has wide range of tools for Photo Manipulations.
- Photoshop Integrated Camera Raw plug-in & Light room progrrames are became the latest must-have tool for professional photographers.
Broadcast Media
- Now a day’s Broadcast and Television Media becomes more poplar, so the opportunities in this industry also increased. All kind of background slides for videos and layout designs are created in Photoshop only later they will be imported into Video Editing Tools like After Effects and Primer Pro etc.
Web Designing
- The Major Contribution to the web medium by the Photoshop, because from the scratch the web layouts are prepared in Photoshop only.
- Not only for Layout design but also you can make gif animations and image optimization in Photoshop.

So Friends lets dig in to photoshop and make some creative stuff, lets get started. . .