Author: vdebolt

Useful links: Updated Accessible Presentations, HTML5, Mobile, Intellectual Property

How to Make Presentations Accessible to All from the W3C has just been updated. You can offer help and feedback here.

HTML5 Accessibility: aria-hidden and role=”presentation” from John Foliot.

Why Mobile Matters is a bit of a preview of Luke Wroblewski’s book Mobile First.  It offers convincing reasons why we should be thinking first about mobile design.

HTML5 Adds a New Translate Attribute. A new attribute to learn about.

Pinterest and the Intellectual Property Conundrum is a post of mine that looks at Pinterest, intellectual property law, fair use, implied consent, SOPA, PIPA and efforts from the community around Pinterest to make the site more copyright friendly.

Light Field Camera

I just finished with a photography class. My goal for the class was to master the settings on my camera so I could get control over depth of field. I wanted to be able to make certain parts of an image sharp, while others were blurry.

The day class ended, I heard about this new Lytro camera. It’s a light field camera. WikiPedia says, “A light-field camera, also called a plenoptic camera, is a camera that uses a microlens array to capture 4D light field information about a scene.”

Click around in this image by Mugur Marculescu to see what it does. I am determined to be able to do this sort of trickery with f-stops and aperture settings.

Using jQuery Mobile in Dreamweaver CS 5.5

Dreamweaver CS 5.5 has some built-in jQuery mobile functions that can help you design a mobile site. Going this route means one of two things:

  • You begin with the mobile site, enhanced with prebuilt jQuery Mobile functionality, and progressively enhance to create a site that will work on all devices.
  • You create a site just for mobile that is a separate design from your other site.

I’ll show you the basics of how to get started and what Dreamweaver is doing for you.

Open a new blank page using the DOCTYPE of your choice. Choose the jQuery Mobile category in the Insert panel. Choose the icon for jQuery Mobile Page, the first icon on the left in this view. (I like the Classic Workspace. Your view of the Insert panel may be different from this if you don’t use that Workspace, but the jQuery Mobile category will contain the same icons.)

jQuery New Page icon

Two dialog boxes appear. The first wants you to indicate whether you want to use the remote jQuery Mobile scripts and stylesheet, or install them locally. For this exercise, I’ll leave them as remote, but that might not be the best choice for actual use.

jquery mobile files dialog

The second asks you to assign an ID to the new mobile page. Dreamweaver suggest ‘page’ by default, which will be okay for this demo. You also choose whether or not to have a header and footer here.

jquery mobile page dialog

Clicking OK brings you back to the Dreamweaver document window. Let take a look at what your choices on the previous two dialog windows inserted into the document. The Design View doesn’t look like much.

jquery mobile basic page

What you Got Code-Wise

When you look at the Code View, you realize there’s a lot of work already done for you here.

jquery mobile basic code

  1. You see the links to the scripts and stylesheet. The styles show up in your Style panel and appear to be editable, but I would want to recopy them into a local CSS file myself just to be sure.
  2. You see that data-roles are assigned. This is how jQuery Mobile identifies what you are creating. One of the benefits of data-roles is that there are styling options associated with them.
When you look at the basic beginning page in Live View, you can see what the jQuery Mobile scripts and styles are doing for you in terms of presentation.

jquery basic live view

It needs work, but you have a start.

What else can you do?

Next, take a look at the rest of the options in the jQuery Mobile Category of the Insert panel.

jquery mobile insert menu

The first one on the left is the JQuery Mobile Page icon, already mentioned. From left to right, the others are:

  • JQuery Mobile List View
  • JQuery Mobile Layout Grid
  • JQuery Mobile Collapsible Block
  • JQuery Mobile Text Input
  • JQuery Mobile Password Input
  • JQuery Mobile Text Area
  • JQuery Mobile Select Menu
  • JQuery Mobile Checkbox
  • JQuery Mobile Radio Button
  • JQuery Mobile Button
  • JQuery Mobile Slider
  • JQuery Mobile Toggle Switch

I’ll walk through inserting one of these to give you an idea of what Dreamweaver does with it. How about the List View? I’ll create a space for it after the generic Header text and click the JQuery Mobile List View icon.

jquery mobile list view dialog

A dialog window opens. You choose the type of list, the number of items in the list, and several other choices including some pre-styled options if you want to use a split button. I’ll pick “Star” from the split button icons.

You see this in Design View.

jquery list in design view

You see this is Live View.

jquery list view in live view

This is what happened in Code View.

jquery mobile list view code

The other jQuery mobile icons work in a similar way. While this is just a beginning for you, it does get you off to an fast (and easy) start in designing a site specifically for mobile using jQuery Mobile scripts.

Going Responsive

If you are interested in taking a different approach with Dreamweaver CS 5.5 to create a site designed to be responsive and work in all device sizes, see my e-book How to Create a Responsive Web Design in Dreamweaver CS 5.5. Explaining how Dreamweaver helps you do that is a long story, so I packaged it as an e-book and am charging a small fee to download it.

Austin in March

YEAH

March approaches. For someone like me, that means a trip to Austin. I’ve attended about 12 or 14 SXSW Interactive Conferences (I’ve lost count) over the last years. It’s a huge, exhausting party filled with web geeks and people who are passionate about things like best practices, accessibility, social media, SEO, code, gaming, and the philosophical implications of all those activities and topics.

If you see me dashing about in the halls or chilling in a quiet spot in the convention center, say hi. I’d love to chat with you.

Useful links: graphic to web design, mobile users, link with love

Jump from graphic design to web design in 7 easy steps. So many of my continuing ed students are in this exact situation. If you’re a career changer, check this out.

Mobile Users Don’t Do That. Except when they do. Stephanie Rieger has some ideas about what to do for mobile.

LINKwithlove

With sites like Pinterest gaining popularity, intellectual property rights to images are a problem. (See The Problem with Pinterest.) I recommend you take a look at Link with Love to help educate yourself–and students if you have them–about intellectual property and copyright law.

Control Panel Basics

If you sign up for a web hosting account, you get this nice letter back from the hosting company that tells you all about how to connect to your server and where to find your control panel. If you’re a little new at the whole web hosting thing, you may wonder what in the name of cyberspace you are supposed to do with a control panel.

control
Control by Chicago Art Department via Flickr

It’s easy to be intimidated by a control panel your first time to log in to one, because we live in a time when tech stuff is supposed to be user friendly and intuitive and pretty. Control panels are none of that.

In spite of their clunky nature, control panels are important to you as a proud new owner of a web site because of what they do. Every hosting company doesn’t use the term control panel. A company I use calls it the “Account Control Center.” Other places call it the “cPanel.” Whatever it’s called, it’s the hosting company’s way of giving you a way to control some of the things about your account. Here’s what I see when I open my control panel.

C-panel menu
Image by Virginia DeBolt

Ah, you say. I see, you say. You can set up your e-mail address for your account. That sounds good. You can even ask for support, change your password, or pay your bill. But what is file management or database management or domain hosting management?

E-mail Management

You probably have a least a few e-mail addresses with your domain name. Use this part of the control panel to set up what they are called and where the e-mail goes that comes in.

email management options
Image by Virginia DeBolt

You can see that I have 800 potential mailboxes with my account. Since I’m running things by myself, I only use one. But you can set up all sorts of email accounts: info@yourdomain.com, support@yourdomain.com, yourname@yourdomain.com and more. With my web host, you set up a new mail address by “creating a mailbox.” When the mailbox is set up, you may want to tell the server where to forward the mail using a “recipe.” I don’t know how this terminology came to be, but that’s what they call it. If you’re lucky, your C-panel will give it a more obvious name like “Forwarding.” Depending on the server, you may be able to get your e-mail directly from the server without having to forward it if you set up your e-mail client on your home computer properly.

Database Management

If you’re putting a blog on your web site, you need a database. Use this part of the control panel to create a new database. Usually all you have to do is click a button and the database is created. Take note of the settings they give you for it after it’s created, so you can tell your blog where the database is when you install the blog software. You can create backups of your database here, which you may want to do before you update your blog.

File Management

It’s awkward, but you can upload files to the server using this section of the control panel. FTP is easier to use, but this works if you need it. You can do other things here like set up new folders, change file permissions, and delete old log files so they don’t take up all your server space.

Domain Hosting Management

You can take care of your domain name in this part of the control panel. You can probably arrange new domain names that will be hosted under your main account too. This is cheaper than getting a new hosting account for every domain name you buy, and it keeps everything in one place so you don’t have to keep track of multiple web hosting accounts.

Just Breathe

The control panel may use some odd terminology. Just take your time and try to figure out what each part of it does and how it’s useful to you. Then take control of the control panel. You can do it.

Cross posted in slightly different form at BlogHer.

Vendor prefix issue roundup – UPDATED

Articles about the issue of -webkit vendor prefixes are flying fast. Here’s a summary of what I’ve seen about it. Use it to follow what the discussion is about.