Web Teacher » graphics

Mapping with Flickr

vdebolt — Thu, 29 Jul 2010 11:24:22 +0000

Have you played with the map function on Flickr? I’ve been ignoring it, choosing not to give my location on my photos because I put up a lot of family photos and I didn’t want them identified by location.

I administer a group on Flickr for Women in Tech. Maybe you’ve noticed the tiny slideshow of the images from that group pool in the blog sidebar. I clicked on the Map view in Flickr while looking at the Women in Tech photos in the Flickr group and was delighted to see the results.

Thanks to the folks who do have mapping enabled on their photos you see this map. You see a thumbnail of the particular photo and a marker on the world map showing where the photo was taken. If you use the left or right arrows in the thumbnail window to move to different photos, the location markers on the map change. If you click on a location marker, images associated with that location pop up. If you click on a thumbnail, the location marker is highlighted. You can sort by interesting or recent.

Playing with this made me rethink the value of using location markers (or geotagging) photos. I was wondering if I could do it on a photo by photo basis, so I looked in the Flickr Help. I found this:

Can anybody see where my geotagged photos were taken? Is the location private?

You can keep where you took your photos private, if you want, or assign permission to any level you’re comfortable with. You can set a default privacy level for any photos you add to the map, and you can change the location privacy per photo as well. To change the settings on a photo, double-click it in Organizr. Click the Location tab. That’s where the privacy setting is, as well as the latitude and longitude of your photo’s location. (You can edit that too, if you have that information.)

That means I’m going to start geotagging photos from conferences and public events. Yes, indeed.

Now Available! InterACT with Web Standards: A Holistic Approach to Web Design

vdebolt — Tue, 18 May 2010 12:05:56 +0000

InterACT with Web Standards: a Holistic Approach to Web Design is available today.

This announcement is a BIG DEAL.

This book puts everything you need to teach a class in web design or development with web standards into your hands. The book is easy to use in connection with InterACT’s 17 courses in 6 learning tracks making it the perfect tool and resource for teaching or learning contemporary web design best practices.

If you are a student who wants to learn about building a web site with web standards, this book will lead you there.

For educators, your semester will be a snap to plan with this book. It’s all right there for you.

The book is published by New Riders (2010). There are 10 authors. The major contributor being Chris Mills, with additional expertise from Erin Anderson, Virginia DeBolt, Derek Featherstone, Lars Gunther, Denise Jacobs, Leslie-Jensen-Inman, Christopher Schmitt, Glenda Sims and Aarron Walter. I’m really proud to have been a small part of making the book a reality, because I think the book is going to be very important to students and teachers who are looking for the a reliable resource for web design best practices.

In addition to the writers, a number of other people worked to bring this book to life. They include Aarron Walter as project manager, Patrick Lauke as technical editor, Jeff Riley as development editor, Leslie Jensen-Inman as creative director and Jessi Taylor as book and site designer.

Many kudos go to Leslie Jensen-Inman and Jessi Taylor. When you see this book and hold it in your hands you will realize what a work of art it is from a design and typography point of view. It’s a beautiful book.

Take a look at the table of contents:

InterACT
Tools
Learning on the Web
Internet Fundamentals
Writing for the Web
Information Architecture Intro
Site Planning
Content Analysis
Content Strategy
HTML Intro
CSS Intro
Headings and Paragraphs
Whitespace
Links
Images
Lists
Tables
Forms
Floats
Positioning
Accessibility Intro
Accessibility Helps
Accessibility Testing
Bringing it All Together
Index

The InterACT with Web Standards book site has everything you need to know. There, you’ll find links to purchase the book, links to code examples from the book, links to bonus content, and links to the sample project. The site has links to information about InterACT, OWEA, and the Web Standards Project. You can take a peek inside the book, read some reviews, grab links to all the resources cited in the book, and MUCH MORE.

Buy now and take advantage of this limited time offer tweeted by @waspinteract.

InterACT With Web Standards, the first book from The Web Standards Project, is out. Save 35% on it with code INTERACT. http://cot.ag/9RS4rEMon May 17 16:00:20 via CoTweetWaSP InterAct
waspinteract

Where do you share your photos?

vdebolt — Sat, 09 Jan 2010 14:11:32 +0000

I share my photos at Flickr. I like Flickr because it is easy to use, I have unlimited space for a low yearly fee, and linking to the photos is simple. Flickr has great features for sharing, editing, promoting, copyrighting, and doing things with your photos like making them into various printed items.

Thousands of other people do the same. Flickr is huge. But is it huge because it’s the best? Is there a better photo sharing site out there that I should check out? What do you think?

Using CSS background-image to style links

vdebolt — Tue, 10 Nov 2009 13:57:44 +0000

There are many ways to style links with CSS. One possible way is to use the background-image property to distinguish the various link states.

Link states are represented in CSS by selectors involving the a element, which targets an HTML a tag in a link like Some page. The potential states of a hyperlink are link, visited, hover, active, and focus. In CSS rules, these selectors are written as: a:link, a:visited, a:hover, a:active, and a:focus.

Let’s assume you have a set of images suitable for link backgrounds. These images might involve color changes, show small arrows or glyphs, or various other small but meaningful graphic enhancements meant to indicate link states. Further, assume the images are named hoverbg.jpg, linkbg,jpg, and visitedbg.jpg.

Start with the normal link state, a CSS selector that will style all your links until overruled by a subsequent rule.

a:link { background: url(img/linkbg.jpg) }

This will put your background image behind the text of you links. The next rule in your CSS should style visited links.

a:visited { background: url(img/visitedbg.jpg) }

Any visited link will now have a different appearance to your user.

Finally, add a rule to style the links while they are in the hover state or in the active state. You can use a group selector for this.

a:hover, a:active { background: url (img/hoverbg.jpg) }

This rule will style the link while is is hovered over or being clicked.

You could add a:focus to the group selector in the last rule, although I’m not sure it would be that useful in this scenario. Focus states are important to users browsing with assistive devices and visual difference like background images may not be relevant to them. Focus states are important to users who use the keyboard to move from link to link.

Useful Links: Multitasking and Media, a persistent Internet, Dreamweaver tip, community building

vdebolt — Tue, 27 Oct 2009 15:06:38 +0000

Nick Bilton on Multitasking and Media is a live-blogged report from (Re)Mixed Messages by Rachel Barenblat from PopTech. Bilton delivered many fascinating gems, which Barenblat captured with quotes like:

What does this mean for newspapers? “We talk about business models,” Bilton says, “but that’s getting ahead of what we really should be talking about — that everything about news is changing.” The devices we access news on are changing. Now we read the news on mobile phones or computers. “I have a different psychological experience with that device, and I’m going to have that same psychological experience with that news, too.”

“The relevance of news is changing.” When Teddy Kennedy died, he says, “that wasn’t news to me.” It didn’t mean anything to Bilton, but to a lot of people it did. “There was a shooting across the street from my house: that was news to me, but not to you, unless you live where I live.” Our concepts of news are changing. By the same token: if someone in my friends network gets in a car accident? That’s news to me. Bilton tells a story about a friend borrowing his cmoputer to check “the news” — meaning Facebook.

“We used to buy newspapers based on the location where we live; now we can get news from anywhere. Our concept of trust is changing. We trust the news media 29 percent and we trust our friends and family 90 percent.”

Bilton created a term “technochondria” in this talk, which @blogdiva quickly pointed out was used incorrectly. See the technochondria tweet and the technophobia tweet from @blogdiva.

Not just media, but education is changing, too. In Newsweek this week, Daniel Lyons wrote The Hype is Right: Apple’s table will reinvent computing. I might add, not just computing, but everything . . .

These devices will play video and music and, of course, display text; they will let you navigate by touching your fingers to the screen; and—this is most important—they will be connected to the Internet at all times. For those of us who carry iPhones, this shift to a persistent Internet has already happened, and it’s really profound. The Internet is no longer a destination, someplace you “go to.” You don’t “get on the Internet.” You’re always on it. It’s just there, like the air you breathe.

You don’t “get on the Internet.” You’re always on it. It’s just there, like the air you breathe. That really resonates with me and sums up a whole lot of how I feel about modern living.

Dreamweaver tip for screen shots may appeal to the Windows users who write material in Dreamweaver. I often write posts in Dreamweaver, particularly if I’m going to include code samples and don’t want to type all those character entities, but I hadn’t thought of pasting the screen grabs directly into DW in this way. Gives you access to the “headless Fireworks” image optimization tools.

How to Build a Community Web Site talks about how the creation of Ottawa Tonight. “I’ve said it before, and I’ll say it again – it’s not about the tools. It’s not about the tools. It’s about people.”

Summary of eHow articles for October

vdebolt — Mon, 26 Oct 2009 13:01:10 +0000

I spent some time in Santa Fe in October. My friend Patrica got married there. Woohoo! The ceremony was at the beautiful Pecos National Historical Park outside Santa Fe in the mountains. This photo of typical Santa Fe architecture is the Inn at Loretto near the state capital in Santa Fe.

On eHow, I posted these articles:

Useful links: Hot air, create video, UDI, CSS

vdebolt — Fri, 09 Oct 2009 12:29:57 +0000

I’m straying off topic to talk balloons. This time of the year in central New Mexico is all about hot air. I took this photo yesterday standing in my driveway in my pajamas. People willingly get up at 4:30 AM to go to a mass ascension at the Albuquerque International Balloon Fiesta. If you’ve never had the thrill of attending this event, you’ll find plenty of photos on Flickr, including some of mine. You might get a flavor of what a mass ascension is like from my article at BlogHer, Balloon Fiesta Time in Albuquerque.

Create Video Notebook is a collection (a notebook) of useful information on how to create video for a blog. It’s a new blog and already full of good tips. Keep an eye on this one.

Equal Access: Universal Design of Instruction is from the University of Washington. “Universal design of instruction (UDI) can be discussed as a process, as a set of strategies applied to specific aspects of instruction, or as a goal.”

I’ve been noticing the name Soh Tanaka on well-written articles about CSS lately. Found a blog to go with the name at The Art of Hand Coding. There’s a lot there; you may find just what you need for yourself or in the classroom.

CSS3.info has an article explaining the basics of The Flexible Box Layout Module. This is very early work—support in browsers is minimal at this point, but it’s a glimpse into what may come.

What part of attribution do you not understand?

vdebolt — Sat, 01 Aug 2009 13:04:06 +0000

Here’s what you see if you try to download one of my photos on Flickr.

There’s a Creative Commons license notice that some rights are reserved right under the photo. It clearly shows that the license uses the Attribution-NonCommercial-NoDerivs License.

Attribution. That means you give credit to the particular artist whose image you are using.

I took a lot of photos at BlogHer. I take photos of most big events I go to. I like to take photos. I like to share them on Flickr. I even like it when people appreciate my photo enough to want to use it on their blog or website. But only with attribution! Don’t steal it and don’t ignore the CC license attached to it!

I’m reading articles all over the web about BlogHer09. I’m upset to see how many blogs and sites are using my photos without so much as a wave in my direction or a request for permission. You know better, people.

Useful Links: Aviary, What not to do on Facebook, HTML5 Cheat Sheet

vdebolt — Mon, 06 Jul 2009 17:57:55 +0000

5 Things You Can Do with Aviary Screen Capture at Web Worker Daily gives a good summary of a new feature of Aviary. I’ve written about Aviary before in Updates on Aviary and An Early Look at Aviary.

In case anyone in your life or classroom needs a reminder that everything you say and do on the Internet can come back to haunt you, here’s a little morality story to that effect. Wife blows MI6 chief’s cover on Facebook. Well, hmmm, didn’t Facebook just make a big announcement about changes to their Privacy Policy—guess she missed the news.

Smashing Magazine put together a nice handout for your classroom. An HTML5 Cheat Sheet in PDF format.

Resources for Learning SVG

vdebolt — Tue, 31 Mar 2009 14:59:24 +0000

Shelley Powers from Burningbird sent out a tweet this morning that IE 8.1 is going to include support for SVG. If you haven’t started paying attention to SVG yet, now is the time.

A good place to start learning about SVG is Burningbird. Shelley has been working with it on her personal sites for quite some time and has explained in numerous posts how to make it all work. The site itself is the best example, so look under the hood and kick the tires. Here are a few of Burningbird’s posts:

You should look at Shelley Powers excellent book, Painting the Web. Chapter 7, which clocks in at just over 50 pages, is called SVG Bootcamp.

Other learning resources on the web include,

Open source vector graphics software is available from Inkscape. There’s a Java based SVG toolkit available from Batik.

Other books, neither of which I’ve read (I have read Painting the Web and recommend it.)