Dreamweaver Assignment 2: Dreamweaver Introduction

Photo credit: Dom Sagoll, uploaded via Flickr, Creative Commons License

2.1             WYSIWYG HTML Editor:

Dreamweaver is a 2.1 WYSIWYG HTML editor, WYSIWYG being an acronym for “What You See Is What You Get”.  What that means is that you can build content in the design pane as you would like it to appear on your webpage, while Dreamweaver builds the code to render same.

2.2             The Welcome Screen:

As with the Flash welcome screen described below, Dreamweaver starts off with a screen that facilitates easy access to templates, recently opened files and links to useful reference materials.

The welcome screen

2.3             The Dreamweaver Interface:

As with most applications, the familiar menu bar appears across the top of the interface.

Again mirroring the Flash interface, we have access to a workspace selector (or switcher), described in section 2.4.

The Dreamweaver interface also makes use of panels, which may be displayed or hidden, collapsed or expanded, and shuffled-about as need-be.

The document window is the main workspace area, generally the area not otherwise occupied by panels.

The coding toolbar appears whenever there is code appearing in the document window, as does the tag selector.

The Dreamweaver interface

 

2.4      The Workspace Switcher:

The workspace switcher offers a quick means of selecting different pre-defined interface configurations.  There are a number of baked-in configurations, but you can also save new ones that you define according to your particular preferences.  This is useful because depending on the type of task you are performing, some panel displays and placements will be more useful than others.  By selecting presets tailored to particular tasks, one need not spend too much time rearranging panels to suit one’s needs for a given task.

2.5             Customizing the Workspace:

As described below regarding the Flash interface, we see that our panel layouts are highly customizable.  Panels can be expanded and collapsed, stacked, grouped, docked or floated in myriad ways to achieve the layout most convenient to the user’s particular needs.

2.6             Dreamweaver Preferences:

Preferences are accessed via the Edit menu option.  This sets general program options, such as fonts, default file types and extensions, shaken vs. stirred, etc.

The preferences dialogue box.

2.7             Insert Bar:

The insert bar is a panel like any other, but is a particularly useful one.  Setting the workspace switcher to “Classic” mode displays the insert bar near the top of the interface, just below the menu bar.

The menu and insert bars.

These are the basics of the Dreamweaver interface as discussed in section 2.

Getting Started with Flash CS5:

Photo credit: Amir Jina, uploaded via Flickr, Creative Commons License

Flash Assignment 1:

1. From the Adobe Flash CS5 - Learn by Video DVD (Core Training in Rich Media Communications):
1. Getting Started with FLASH CS5
2. Make frequent blog posts explaining all learning as you go along include screencaptures using JING to further explain learning.

1.1             Introduction:

Flash is a development tool used for creating video, animation and interactive content on the web, as well as stand-alone desktop applications and widgets. 

Flash is what’s known as an integrated development environment (IDE).

1.2             File Formats and Icons:

Flash file formats include:

• .fla – Native Flash file format. The .fla file is the project file.  It stores all the information used to create your final product.  This file is used during development only, and is not published with the final product.
• .swf – Compiled .fla for deployment. Most common output format.
• The .swf file can also be enclosed with a container file, such as a .jpeg, .gif, .png or .html.
• .as – ActionScript code file.
• .air – Desktop application.
• .ipa – Application for jail-broken iPhones (Steve Jobs does not allow Flash-developed apps on the iPhone).
• .fxg – XML-based graphics interchange.
• .xfl – Underlying structure of .fla in a text format.  Edits to this file can be made using only a text editor.*
• .flv or .f4v – Video formats.

*Note that when saving a project file in an uncompressed .xfl format, a directory structure is created, which includes, inter alia, an .fla file linked to the corresponding .xfl file, such that editing the .xfl file will result in the changes being apparent upon reopening the .fla file.

Also created within this directory structure will be a bin folder, contain binary data; a LIBRARY folder, containing icons and other graphics assets, and a META-INF folder containing meta data about the file, in .xml text format.

Static image files may be published from within a flash project.  This is accomplished by selecting the appropriate frame from the Flash timeline, and selecting the File à Publish Settings dialogue, than selecting the desired image format.  Further options for selecting the relevant image attributes will become available on a dialogue box tab, depending on the format chosen.  Note that the default location for the published images is the same as the same directory containing the source .fla file.

A screen shot of the Publish Settings dialogue, PNG format tab appears here: http://screencast.com/t/4GFuOgGXd

1.3             Planning Your Project:

Begin your project planning by researching who your intended audience is, what type of experience you want to create for them, and which type of rich media content is appropriate for that purpose. 

Honestly, this section of the tutorial has apparently been authored by the marketing department.  There are multiple references here to things like client and target demographic and proactively leveraging the synergistic outside-the-box paradigm…OK, I just made-up that last one, but you get the drift. 

As an aside, we do learn that we can generate and run a .swf file from our open project (.fla) file with Ctrl+Enter.

1.4             Introducing the Flash Interface:

Please refer to the Flash interface screen shot here: http://screencast.com/t/G148rFk8mY0M

In addition to the familiar menu bar, the Flash interface consists of the work area, as well as multiple panels.  The panels can be displayed or hidden via the window menu, and once displayed, can be collapsed by double-clicking on the panels tab.  A single click of the tab expands a collapsed panel. 

Inside the work area exists an area called the stage.  The stage represents the screen area that will be visible in the published content.

Above the work area we see the edit bar.  This allows us to select different scenes and symbols to work with in our work area, by means of the edit scene and edit symbol buttons.

Still further above the work area and other panels, we have a drop-down box to the right of the menu bar.  This is the workspace selector.  The workspace selector is means by which to easily select different configurations of panels and tools displayed within the interface to suit different tasks.  Mighty handy, eh?

We are also introduced to the welcome screen in this section of the tutorial.  Here we find familiar welcome screen elements, such as design templates, recently used files, and links to useful reference materials.

Next, we take a walk through the menu-bar menus, and gather an overview of the many commands, and some examples of their various use cases.

We then take a closer look at a particular panel called the tool bar.  This offers a palette of drawing and selection tools that will appear familiar to anyone who has used any graphic design or photo editing applications. 

Another panel of interest is the properties panel.  Here we can view and adjust the properties of objects selected within our work area, or those of the entire stage itself.

Looking at panels more generally, we see that our panel layouts are highly customizable.  Panels can be expanded and collapsed, stacked, grouped, docked or floated in myriad ways to achieve the layout most convenient to the user’s particular needs.  Better yet, we can also save our custom layouts as preset spaces that appear in our workspace selector, so it’s easy to get them back when we need them again.

1.5             Test Yourself:

How did I do on the section 1 test?  See it right here: http://screencast.com/t/C5pGeYGxKFT

 

Dreamweaver Assignment 1 - Basic HTML Coding

Photo credit: Oliver H, (1024) : random, uploaded via Flickr, Creative Commons License

1. From the Adobe Dreamweaver CS5 - Learn by Video DVD (Core Training in Web Communications):
1. Section 1 - Basic HTML coding
2. work through tutorials
3. create plain page with basic HTML tags
4. screencapture using JING
5. enter blog post (minimum - 250 words) describing what you have learned   and the process of creating HTML tags - be sure to include definitions.

1.1 URL Overview

URL is an acronym for Uniform Resource Locator.  It is a character string used by a domain name server (DNS) to locate the internet protocol (IP) address of the resource you are looking for, such as a web page. 

A URL is prefixed with a protocol, such as http:// (hypertext transfer protocol), or ftp:// (file transfer protocol).  The protocol is used to determine the port on which to contact the destination server.

Apart from the prefix, a URL must contain at least a domain name and a suffix, separated by a period (dot).  i.e.; cnn.com, nasa.gov.

The domain name may contain multiple sub-domains, also separated by a dot.  i.e.;  agentpollux.blogspot.com. 

The URL can optionally specify a particular folder to navigate to on the destination server with the addition of a folder name to the URL.  This is placed after the domain suffix, and separated by a slash (/).  i.e.; agentpollux.blogspot.com/p.

Furthermore, a specific file (page) within a folder can be requested likewise.  i.e.; agentpollux.blogspot.com/p/mikes-bio.html.

If the user does not specify a particular file within a folder, or even a specific folder, the server will direct the browser to a predefined default file, typically “index.html”.

1.2 HTML Introduction

HTML – Hypertext Markup Language.  HTML is a series of “tags” that instructs your browser to display the contents of a file in a particular fashion.

Tags are enclosed within angled brackets <like this>.

Tags are usually used in pairs that switch a particular instruction on and off.  The opening tag contains the instruction, and the closing tag contains the instruction preceded by a slash (/).  The instruction applies to the text residing between the opening and closing tags.  For example:

          <sarcasm> Thanks a lot, buddy. </sarcasm>

Some HTML tags are not used in pairs, but are both opened and closed within a single bracketed tag containing the instruction, followed by a space and a slash.  For example, a line break <br />.

You can view the HTML code used to render any web page by selecting the “view source” option in your browser.

1.3 Basic HTML Tags:

• <!DOCTYPE> Required info at the start of the file.
• <html> All page content is enclosed within these tags.
• <head>  Global instructions to the browser on how to render content within the page.  May include the following tags within (among others):
• <meta> Miscellaneous instructions to browser.  Not displayed to user.
• <title> Page title that appears on title bar or tab of browser.  Required.
• <body>  Contains the content displayed to the user on the page.

These tags can be seen in the screen dump of a blank page created in Dreamweaver here:

http://screencast.com/t/sgCEtWX0cTy

And So it Begins...

Photo Credit: Jeffrey James Pacres, Writing, uploaded via Flickr, Creative Commons License

For my first post, I will be summarizing what I’ve gathered from reading a number of articles on the subject of blogging.  Yes, I’ll be blogging about blogging; it’ll be just like ham radio operators using ham radios to discuss their interest in ham radio.

Many a helpful hint awaits the reader over at Chris Brogan’s site.  His article How to Blog Almost Every Day offers myriad tips from this prolific blogger’s bag of tricks. 

Brogan points out that if you make a habit of revisiting some of your favorite news/commentary sites regularly, you should have no trouble finding plenty of fodder for post topics. 

Of course, there’s more to it than just regurgitating a news story that you read elsewhere, or chiming-in “me too” in response to an opinion voiced by someone else. 

Brogan suggests that posing a question about a topic helps to solicit engagement with your readers. Creating conversations, he says, makes your blog more of a community than a soap box.

Furthermore, Brogan trumpets the old axiom that a picture is worth a thousand words.  Including a photo or image adds instant visual appeal to your posting, making it more inviting to the reader.

Perhaps most importantly, Brogan advises that perfectionism is the enemy of proliferation.  He stresses that you need to get your ideas out while they’re fresh, rather than holding them back until they’re “just right”. 

In his article How to Blog, blogger Farhad Manjoo consolidates some tips from some of today’s better-known news and technology posters. 

Tips cited here include defining a definite frequency for your posts, and holding yourself to that schedule.  The more you post, the easier it becomes to do so.

Like Brogan, Manjoo stresses the importance of quantity over quality.  Blogging is a less-than-formal writing venue, so there’s no need to agonize over the minutia of every sentence.  Readability is important, but don’t waste time on scoring points for style.  Also, keep in mind that your audience is likely not interested in you wordsmith prowess.  They simply want to read what you have to say, so get to the point.  Anything in excess of 800 words is just too long for a post.

Further insights on post frequency come from Darren Rowse’s article Use it or lose it!  He stresses that it’s important to post not just consistently, but *with* consistency.  That is, if you readers are accustomed to seeing several new posts a week, they will likely be off-put if you suddenly go cold for two weeks, or flood them with five posts in an afternoon.

Finally, if you’re exploring the use of a weblog to promote your business, you might want to check-out Matthew Bandyk’s How to Blog Your Way to Small-Business Success, or What a Blog Can Do for Your Small Business, by Darrell Zahorsky.  Although these articles are somewhat dated, the former touches on the important topic of search engine optimization (“SEO”, or “Google Juice”), which has become an important “black art” in today’s world of e-commerce.   

This point is illustrated by the latter article, which appears within the About.com domain.  About.com is regarded by some as a web-spam content farm these days, but they’ve dialed-in their SEO to the point that they regularly show-up on the first page of search results.  You don’t have to like what they do, but give ‘em props for doing it well.

-Mike