graphics Archives - Page 8 of 13

Mapping with Flickr

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

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
<head>
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

Using CSS background-image to style links

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 <a href="somepage.html">Some page</a>. 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

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

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

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.