Mobile Web Design at eClasses.org

Communications Technology Watch is happy to announce a new course on mobile design at the popular online school eClasses.org. The course covers Web design, but from the perspective of designing for mobile devices, such as smartphones and tablets. We’ll look at creating HTML, CSS and JavaScript for handhelds. Companies, individuals and organizations that ignore the mobile Web user do so at their own peril! Mobile Web users are by far the fastest growing group of Internet users. This course is designed for students who wish to expand access of their company (or client’s) websites to the most modern of Internet users – people who use their mobile phones and tablets to access the Internet. The emphasis is on creating Web content that displays well and plays properly on the vast and ever-growing number of mobile devices available, today and in the future.

The course’s text book will be William Harrel’s newly released Mobile HTML, CSS and Javascript Development for Dummies. This is an 8-week course. Here is the course outline:

Week 1: Introducing the Mobile Web
  • What is the Mobile Web
  • The Mobile Web User
  • HTML on the Mobile Web
  • Cascading Style Sheets (CSS) on the Mobile Web
  • JavaScript on the Mobile Web
  • Software and Utilities
Week 2: In Depth Mobile Technology
  • Types of Mobile Devices
  • Mobile Device Operating Systems
  • Mobile Web Browsers
  • Which Devices can do what
  • Define Devices by Class
  • Mobile Detect and Adapt Systems
Week 3: Creating Your First Mobile Site
  • Your First Mobile Web Page
  • Mobile HTML Page Structure
  • Mobile-Friendly and Mobile Specific CSS
  • CreateMobile Web Page Elements with CSS
  • Design Mobile Web Templates
Week 4: Interactivity and Multimedia
  • Create Mobile Web Buttons and Hyperlinks
  • Create and Format Graphics for the Mobile Web
  • Create and Format Digital Video for the Mobile Web
  • Create and Format Flash Movies for the Mobile Web
Week 5: Mobile WebKit Extensions
  • What are WebKit Extensions
  • Device Orientation
  • Artwork with WebKit Extensions
  • Special Effects with WebKit Extensions
  • Animations with WebKit Extensions
  • Other Browser-Specific Extensions
Week 6: Advanced Mobile Web Technologies
  • Introducing Mobile CSS3
  • FormatMobile Page Elements with CSS3
  • Mobile HTML5
  • Highly Useful Mobile HTML5 Tags
  • Automate Your Mobile Sites with JavaScript
  • Server-Side Scripting with PHP
Week 7: Automating Your Site with JavaScript
  • JavaScript Automation Basics
  • Detect Device Type with JavaScript
  • Adapt Page Content with JavaScript
  • Change Style Sheets with JavaScript
  • HTML Form Field Validation with JavaScript
Week 8: Creating a Mobile Quiz
  • The User Interface
  • Store and Retrieve Data in Radio Buttons
  • Store and Retrieve Data in Check Boxes
  • Format Your Quiz with CSS
  • Script the Form
Bonus Week:
  • Make Your Mobile Site Search Engine Friendly
  • Createa Mobile Search Page
  • Use Mobile Blog Themes
Prerequisites
Completed ‘Introduction to HTML’ (H101) and ‘Introduction to Cascading Style Sheets’ (H151). Knowledge of computer graphics, digital video, and Flash movies would also be helpful, but by no means required.
Requirements
  • Software: Aside from a text editor, such as Windows Notepad or Mac OS TextEdit, there are no required software applications to complete this course; however, you’ll find the following software useful:
    • Dreamweaver CS4 or later: You can download the latest trial version from adobe.com, but if you do, since the trial version is good for only 30 days, do not install it until the third week of the course.
    • XAMPPWeb server software. XAMPP is a free Linux Web server emulator you can use to test your Web pages. You can download it from: http://www.apachefriends.org/en/xampp.html . It comes in both Windows and Mac OS versions.
    • FTP client software: File Transfer Protocol, or FTP, software allows you to upload your Web page files to a Web server. You can perform this function with built-in Windows or Mac utilities, but will find this much easier with an FTP utility. You can download FileZilla for free at: http://filezilla-project.org/ . It comes in both Windows and Mac versions.
  • Webspace: You’ll need a website to which you can upload your assignments. There are several free Web hosting sites available. However, many of them place ads on your pages. This can be very annoying, but if you can live with it, so can I.

 

Books:
Required Book: HTML, CSS and JavaScript Mobile Development for Dummies

 

HTML, CSS and JavaScript Development for Dummies

If, nearly 20 years ago, when I first started designing Web sites, you’d have told me I’d be writing a book about designing World Wide Web pages for cell phones, I’d have told you to lay off the crack. In those days, cell phones did nothing other than make and receive calls. The Internet, which most of us accessed through dial-up modems over inadequate copper phone lines, was a slow and temperamental Never-never land.  I, like everybody else writing about information technology (we didn’t call it that then), was still amazed when my mobile calls connected.

But here we are sliding into 2011 with a round of mobile devices that can handle the Internet nearly as well as full-blown computers. Mobile Web surfers have become a force to contend with. It’s time for Web designers and the companies they work for to make their Websites mobile-device friendly. In this new Dummies book, due out next spring, I’ll show you how to do that.

William Harrel – www.williamharrel.com

Communications Technology Watch is pleased to announce that William Harrel has contracted with Ed2Go to create and instruct two intermediate-level Flash courses, Intermediate Flash CS5 and Intermediate Flash CS4. The upcoming courses are extensions of Harrel’s popular Introduction to Flash CS4 and Introduction to CS5, which are currently distributed through Ed2Go.com to nearly 2,500 colleges and universities. Hundreds of students have taken the CS4 course to date, and it continually receives high ratings from students. The CS5 course in nearing completion and will be released soon.

The new course will help students improve their Flash animation, design, 3D graphics, and ActionScript skills.

“We’ll look closely at Flash’s high-end design and graphics tools,” Harrel told us. “Especially, the Bone Tool, Motion Editor, and 3D tools. Oh yeah, and ActionScript 3.0–lots of ActionScript 3.0.”

As the courses develop and get closer to a launch date, we’ll keep you posted.

Best in HD format.

In Part 3 we look scripting the portfolio and saving it to a movie clip symbol.

Learn this and other techniques in William Harrel’s Introduction to Flash CS4 Course at Ed2Go.

Click here to download portfolio.fla.

Best in HD format.

In Part 2 we look at extending the basic portfolio structure, animation, tweens and instance names.

Learn this and other techniques in William Harrel’s Introduction to Flash CS4 Course at Ed2Go.

Click here to download portfolio.fla.

Finally, after several months of painstaking writing, editing and rewriting, my Introduction to Adobe Flash CS4 is ready to go over at Ed2Go. Begin your career as a Flash designer! In this course, you’ll learn how to create animated, interactive movies in Flash CS4. Nowadays, Flash movies appear everywhere—the Internet, the cinema, TV shows and commercials, computer games—everywhere. The skills you’ll learn will get you started on your way to a lucrative career designing animated graphics and special effects for one of these fun and exciting fields.

During this course, we’ll create a full-blown Flash application, complete with animated text and graphics, and interactive buttons. We’ll start by going over the Flash workspace, creating text and graphics, and animating objects on the Flash movie stage. Then, we’ll look in detail at the anatomy of a Flash movie—how to use the Flash timeline, layers and frames to control objects and timing on the stage.

While you can create an entire movie in Flash, most often you’ll need to import graphics, sounds, and digital videos from other applications. While creating your first Flash movie, you’ll learn how to format and embed external digital media and how to make them appear or play at specific times. We’ll also look at controlling digital media based on specific events, such as end user mouse clicks.

No course on Flash is complete without an introduction to ActionScript, Flash’s powerful programming language. We’ll get our hands dirty, creating interactive buttons with ActionScript 3.0. You’ll also learn to write scripts that control movie flow, and scripts that call to and load external videos, Web pages, and other Flash movie files.

As we create our movie, we’ll go over creating and animating 3-D objects, syncing sounds with animations, and publishing your Flash movies to the Internet. By the end of the course, you’ll know how to create and publish Flash movies and applications, and you’ll be well on your way to becoming a Flash designer.

Here a few links to some movies showing you the kinds of things you’ll learn in this course:

Here’s an example of the kinds of techniques you’ll learn during the course:

Again, the course is available on the Ed2Go network of schools, about 2500 colleges and universities, and the course carries full college credit. Check to see if your school offers the course or go to Ed2Go’s school list to find a course provider.

Hope to see you there.

William Harrel – www.williamharrel.com

The tech edit  for the new Introduction to Flash course on Ed2Go is nearly finished. It should be up and available soon. The name of the course is “Introduction to Adobe Flash CS4″. It is a beginner’s course on creating basic Flash movies and Websites with the latest version of Flash, Creative Suite 4.

ed2go is the largest online course provider, offering hundreds of courses through most major universities, colleges and other learning facilities.

Course Details

This twelve-week course will introduce students to the basics of using Flash, and will cover the following:

  • Getting to know the Flash interface
  • Flash’s drawing tools
  • Flash’s text tools
  • The Flash Timeline and frames
  • Intro to ActionScript
  • Using images, sound and video clips in Flash
  • And much more

Bill Harrel – www.williamharrel.com

OK. So we have another IE, version 8. Once again Microsoft piles on the features, changes the interface, and introduces frustrating new “security” with disregard for the enduser. It’s a toss-up as to whether a couple of new wizz-bang enhancements make upgrading to version 8 worthwhile. Why is it that it always takes a service pack or two before upgrades to this product are stable?

Nifty New Features

Granted, there are a couple of new features that will make browsing somewhat easier, but I would rather have seen the bloat and performance issues fixed–besides, this new version has introduced a couple more problems. But let’s look at the good, before ranting about the bad and the ugly.

Accelerators

Accelerators don’t really accelerate anything. They are designed to save you steps. And, for the most part they do. The concept is that you can get in-place content with a few mouse clicks, rather than having to navigate to new pages.

Here is an example of how it looks with Live Maps:

IE 8 Accelerator with Live Maps

IE 8 Accelerator with Live Maps

What I found after playing with this for awhile is that it works pretty good with Microsoft sites, such as Encarta, Live Mail, and Live Maps, but when you use a non-Microsoft accelerator, such as Google, you are navigated away from the page anyway–and the back button is disabled! You can’t easily get back to the original page. Hmmm….
Overall, this feature is pretty handy, though. Here is a link to a bunch of videos on Microsoft’s Website that shows Accelerators and other new features in action:

 Web Slices

Web Slices is, perhaps, the best new feature. Basically it allows you to flag specific Web pages. IE will then monitor them and notify you when the content on the page changes. This is great for monitoring blogs, auctions, and so on. And you can setup as many Web Slices as you want and set the monitoring and notification intervals.

Here is an example of Web Slices monitoring an Ebay auction:

IE 8 Web Slices lets you monitor pages for changes to content.

IE 8 Web Slices lets you monitor pages for changes to content.

Here is a link to a page on Microsoft’s site that describes Web Slices in detail:

http://www.microsoft.com/windows/internet-explorer/features/web-slices.aspx

The thing to keep in mind with both Accelerators and Web Slices is that the owners of the sights you want to monitor have to setup server-side Accelerator and Web Slice applications in order for your IE to use them. So far, not many sites have Web Slices or Accelerators available.

Other new features

There are some other new, not-so-exciting features that Microsoft is touting as all that and a bag of chips, but for the most part they are ho-hum. Here they are:

  • InPrivate Browsing
  • Search Suggestions
  • SmartScreen Filter

You can get descriptions of them here:

http://www.microsoft.com/windows/internet-explorer/features/overview.aspx?tabid=1&catid=1

And, of course, there is always Microsoft’s constant “security” enhancements. Whether security is acutally enhanced (or that these changes are necessary), I am not really qualified to judge. But I do know that each new browser upgrade makes using IE more difficult.

For example, (and I am just getting started using IE 8), some security enhancement in IE 8 has crippled my ability to upload images to this blog through the WordPress interface while using IE 8. I keep getting an error that the target directory can’t be created. (The directory is already there.) None of the documents on Microsoft’s support site address this specific issue. So I have had to change the way I upload images. Or use another browser.

The same Old Bloated IE

I have always had problems with IE that I never have with Safari or FireFox. Since upgrading to Vista, the latest two issues are quite aggrivating. First, for some reason, now and then IE just stops working. I get a Not Responding error. Sometimes, after several minutes, it corrects itself. Other times, I have to go into Task Manager and kill IE to get it to work again. Second, when ever my Laptop goes to sleep (as it does every night), after waking it up, I cannot get IE to open within 5 or 10 minutes, not without rebooting my computer, that is.

(I know, you’re thinking that something is wrong with my computer. Perhaps, but, again, the other two browsers don’t behave like this.)

One of the reasons I upgraded was to try to solve these two issue. No luck. The program is still huge, takes much too long to load and is terribly quirky. If I run into any more problems, I am going back to version 7. It is usually a good idea to wait for the first service pack release before upgrading any Microsoft product.

Bill Harrel – www.williamharrel.com

How many times has a Web design client asked you, “Can I edit it myself?” Immediately you cringe, thinking about how hard it will be to train them to make small edits to their Website, and how easy it is for them to ruin your hard work. Well, if you use DreamWeaver and are willing to upgrade to CS4, Adobe has come up with a fairly good solution, Adobe InContext.

Changing text color from inside Internet Explorer

Changing text color from inside Internet Explorer

InContext allows you to define regions on a page within DreamWeaver that endusers and clients can then edit from Explorer or some other Web browser, and then save their edits back to the Web server. InContext is a bit of a hassle to setup-each site has to be registered at adobe.com-but once you’ve gone through all the setup steps, sure enough, the document can be edited from a browser. The best part is that only the regions you define as editable can be changed; the rest of the page is untouchable.

It works like this:

  • You define a region or regions on the page for InContext editing.
  • When you save and upload the page, DreamWeaver automatically creates 3 small files, 2 javascript files and an html file, and saves them in the Includes folder on the server.
  • You then go to the Adobe Website and register the site. If you haven’t registered a site before, you will also have register as an InContext administrator-a relatively quick and easy procedure. And, so far, it is free.
  • After you register the InContext site, you can then add users and send them invitations to edit the site using InContext. An email with instructions for accessing the InContext session from inside their browser is sent via email.
  • Now, when you or a user browse to that site and go to an editable page, all you have to do is hit Ctrl-E (Windows) or Command-E (Mac).
  • This starts the InContext session and the site can now be edited in the browser.

There are two tutorials on the Adobe Website describing this process. One for the DreamWeaver designer, or developer – http://www.adobe.com/devnet/dreamweaver/articles/getting_started_with_ice_dev.html

And one for the enduser, or “content editor” – http://www.adobe.com/devnet/dreamweaver/articles/getting_started_with_ice_eu_03.html

Depending on the role you choose on Adobe’s site for the enduser, they can make various types of edits, including:

  • Text formatting and style (the default)
  • Image insertion and management
  • Insertion and management of hyperlinks.

Pros of InContext
The best thing I can say about this solution is that it works and works fairly well. The enduser doesn’t need to have or know how to use DreamWeaver or any other Webpage design program. Nor do you need to teach your client (or employee) the intricacies of FTP and editing a page in a text editor, all the while praying that they don’t change the wrong things. Once up and running, it is pretty slick and works well.

Oh yeah, and did I mention it is free?

Cons of InContext
The three things I liked least about this solution is that: It is a bit time consuming to setup. It locks you and your client into the Adobe website and Adobe products, no matter what the future brings (I have been using Adobe products for years and don’t really see myself switching. However, I’d bet it would have been just as easy for Adobe to create javascripts that enabled InContext without registering on the Adobe Website. But then this would have made this solution relatively easy to use with any Webpage design program-it’s easy to understand why they wouldn’t want that.); Finally, InContext only works with the latest doctypes (i.e., HTML 4.01). If you have been designing sites as long as I have, you will have plenty with earlier doctypes. If so, you will have to change the doctype on every page you want to setup to use InContext.

You can find a good description of InContext on Adobe’s site at http://www.adobe.com/products/incontextediting/

An ongoing discussion of InContext can be found here: http://www.graphicrating.com/2008/10/27/adobe-incontext-editing/

Bill Harrel – www.williamharrel.com