Category: Dreamweaver

Useful Links: HTML5 Video, OAuth, geeks

In the if you can’t beat ’em, join ’em category,  Adobe announces the HTML5 Video Player widget with this message: “Adobe has released an easy-to-use, totally CSS-customizable solution that shifts gracefully from the HTML5 <video> tag to the Flash Player when the tag is not supported.” The widget works with or without Dreamweaver CS5.

Introduction to OAuth is by Lorna Jane Mitchell at Think Vitamin. It seems OAuth is the reason why Twitterific suddenly stopped working on my iPhone and also explains why you can sign in to one site with information from another. Here’s a quote.

As a user, the experience of enabling accounts to use OAuth is quite seamless, and is designed to help you feel more secure about where your credentials are being stored and used. When you want to allow another application to access your data, you will be forwarded to the site that holds that data, and prompted to allow access.

This means that you never need to type your credentials for one account into the website for something else. Once you have granted access, you will be redirected back to where you were, so you can continue whatever you were doing.

Did you see this infographic for What Kind of Geek are You? It seems only guys can be geeks. Gals are invisible once again. The infographic is clever and cute. And it reinforces the prevailing social paradigm that keeps the “where are the women in technology” meme afloat from year to year.

Guest Post: Learning Web Design – A Basic Tutorial

Here’s a guest post by Amanda at Best Rank, an Internet Marketing Company. The information is useful for an Internet Fundamentals or Basic Web Design setting.

Most people surf the net regularly for favorite websites, or search online to gather research for school and work related projects. There are websites for just about any topic one can imagine, complete with text, images, streaming video and more. Every page is created through the process of web design, a concept that is an essential building block in creating the appearance web surfers will see at a specific web address. Those sites ranking highest in popular search engines like Google and Yahoo are naturally the ones most viewers will see most often.

The basic system formats web pages is HTML, or HyperText Markup Language. Each page has code created for it, with a wide range of different markup choices that influence how a page looks to its viewers. Different sections of the page are divided into HTML elements that include opening and closing tags. Between the tags, a web designer will place the contents that will be visible to viewers. For example, sections of the site use tags such as the <body> tag, which when used with the <p> tag, creates paragraphs of information users will read.  Site graphics will be placed between the proper <img> tags.

As a web designer builds a page with HTML, they will want to consider how they would like to format text, perhaps with code that determines emphasis or elements like  headings. HTML also allows you to create ordered (numbered) and unordered (bulleted) lists for information. The creator will want to add code that will show various links users may want to click on.

Cascading style sheets (also known as CSS) are a method many use to keep appearance the same across different HTML pages. Implementing CSS code can help keep borders, text alignment, colors, fonts and more consistent, without having to constantly repeat the HTML coding on each page. Each stylesheet consists of a list of rules known as declaration blocks, with selectors that choose which HTML elements the rules apply to. Though some HTML pages will have CSS coding directly inside the HTML code , it is far more efficient to have an external CSS file. By having an external CSS file, which is referenced in the HTML code, download time can be minimized since only a single file is needed for storing style rules.

When an individual has completed the web design of a page to their liking, they will want to upload it to the Internet. This can be accomplished using an FTP, or file transfer protocol, client. Such applications assist one in transferring files to a website. The website files are transferred to the web host or server. Each website has a URL or uniform resource locator, which is more commonly known as their website address to which they will upload these files.

Different programs have been developed to assist web designers in creating sites. One of the most popular of these is Dreamweaver, which allows one to preview a website with a web browser before it is uploaded. As a person works on a visual template of their website, Dreamweaver generates the HTML code of the page. While this may make the process easier for some, many argue that there is still no substitute for learning the HTML coding itself.

About the author: This basic web design tutorial was provided by Amanda at Best Rank, an Internet Marketing Company that specializes in SEO (Search Engine Optimization) and other internet marketing strategies.

Why teaching Dreamweaver is like being President

I mentioned a while back that I accepted a job teaching Dreamweaver at UNM Continuing Ed. I just completed my first session – a 12 hour class in beginning Dreamweaver. I’ve decided that teaching Dreamweaver is a lot like being the President of the United States.

Here’s why.

  1. You’ve got this big complicated mass of information that you have to deal with. It’s so complicated that it seems overwhelming to some people.
  2. Everyone comes at the problem with different levels of understanding and skill.
  3. Everyone sees something different. No matter how much time you spend explaining how to set up the workspace, arrange the panels, find the menus and windows, and move around in the software, there’s always someone who isn’t seeing what you’re seeing. Therefore, even when you explain everything carefully,  you can bet someone is only hearing the Fox News version.
  4. People get distracted. They’re thinking about food, a phone call, whether they should leave the room to pee right now or try to hold out until a break. Or they have a epiphany about something like background-color and go into a frenzy with the new information. When they tune back in, 30 minutes have gone by.
  5. The buck stops in the instructor’s chair.

See? It’s just like being the POTUS. Well, kind of. A little bit. Maybe not quite so important in the grand scheme of things.

But it is important to the people in your class. So here’s my advice for the POTUS and for myself. Listen to every question and try to answer it fully. Deal with what people are seeing right in front of their faces instead of expecting them to automatically see what you see. Say everything more than once, because not everybody is listening at the same time. And remember that you’re doing this job for the people.

Make movies with xtranormal

I saw a movie made using xtranormal.com and couldn’t resist trying it out myself. Registration was easy. The free options are few. If you wanted to turn out something really powerful, you’d have to pay to do it.

I did make a free movie just for fun. It was easy to do. Here’s my first movie.

There may not be one in a paid movie, but there is a second <object> included in the embed code of a free movie. It looks really ungainly to me, don’t know why they sized it like that, but I’m leaving it as is. It contains a script to collect stats. It would be a simple modification to remove that second <object>, but I decided to leave it there so you could see what you get out of the box with a free movie.

The machine generated voice couldn’t read Dreamweaver correctly, but it did fine with two words: dream weaver. The voice seemed to make sense of the content and phrasing. For example, the phrase “the catch is” was treated with intelligence. I found that impressive.

Dear Adobe, Can Dreamweaver do this?

What do you wish Dreamweaver would do? I’ll bet you have a pet peeve or a longed-for feature.

I’d like to see Dreamweaver do some new things. Or maybe, do some old things differently.

  1. I’d like to see proper icons in the Property Inspector for bold, italic, strong, and em. Bold and italic may make a comeback in HTML5, which is going to be even more confusing to users who don’t know all the facts about semantic markup. And while they’re at it, could they add a button for cite?
  2. I’d like to see a pull down list of ARIA roles that could be applied to elements. Maybe in the Property Inspector or maybe in a menu under Accessibility.
  3. If a user changes the ID of a form field with the Property Inspector, I’d like to see the “for” attribute for the label change to match.
  4. I wish there was a way to add scope=col or scope=row to table header (th) cells through the WYSIWYG menus. Why couldn’t it be added to the Header section of the Table Dialog? A checkbox labeled “Include scope attribute” would do the trick.
    Dreamweaver Table Dialog Window

Heading back to class

Word got to me that University of New Mexico Continuing Ed needed someone to teach some Dreamweaver classes. Well, I can do that. I talked to the good folks at UNMCE and agreed to take on some of them. I haven’t been in a classroom in a while. I figure it will be good for me to get back in touch with the beginner’s mind with regard to Dreamweaver. It may even be fun.

They handed me a syllabus and a description of what they want taught. I spotted the word frames. Frames. Really? Well, it seems  one of the UNM websites students are required to use is done in frames. Go figure. They handed me a book: Dreamweaver CS4 Visual Quickstart Guide by Tom Negrino and Dori Smith. Okay. I can work with that – know it well. There’s no money for CS5, so the software is CS4. That’s okay with me, too. I can’t afford to buy CS5 either. (That explains my remarkable silence on the topic of Dreamweaver CS5, something I would most certainly be talking about if I owned it.)

I go to a kickoff meeting and get to meet the other instructors in the Digital Arts area. I’m wowed by the impressive credentials and enthusiasm of this group of people. Web developers, photographers, filmmakers, designers and cinematographers—all with pretty cool day jobs. I meet the other people teaching Dreamweaver and other web design topics and conclude that they are true pros.

Then I find out about the forms and the time tracking and the paperwork and the requests for copies and the three separate online university systems that must be used to do my work and how to make the projector work when you switch between Windows and Mac OS on the instructor’s computer. And, I’m thinking, I’m going back into an institutional environment with all the attendant red tape and aggravation. I’ve lost my mind.

That’s okay, too.

Because there will be students in front of computers at the end of the process, and they will want to learn about Dreamweaver. That part will be fun.

Useful Links: DW CS5 HTML5 Pack, Togetherville, synthetic cells, something’s happening here

Adobe Dreamweaver CS5 HTML5 Pack is a free extension. Sorry, it only runs on CS5—can’t retrofit older versions of Dreamweaver.

Togetherville: Walled Garden Social Networking for the Younger Set. There have been social networks for young children before, but this one is making news right now. I’m wondering what educators will do with this new site.

Scientists Create First ‘Synthetic Cells’ is a bit off-the-web-design-topic, but it’s fascinating news from the scientific world that may have far reaching implications.

Something’s happening here. People used to be either a Windows person or a Mac person. Now Android is outselling iPhone, Google has a new store in direct competition with iTunes, the number of Android apps is growing fast. When we weren’t looking the world changed to a place in which you are either a Google person or a Mac person.