Portland

When we left off, former software impresario and all-around goofball John McAfee had fled Central America and landed in, of all places, Portland, Oregon. Now he's speaking publicly, offering up stories about his life like:

I had my right testicle shattered by a hammer in 1974 when I ran afoul of some local drug barons in Oaxaca. It's the size of a grape now and shaped like a small frisbee.

And:

I was also taking more drugs weekly than most of you will do in a lifetime, and I was a totally indiscriminate user. Whatever came across my desk went up my nose, down my throat, in my veins or up the nether region.

The stories get stranger from there.

Read 7 remaining paragraphs | Comments

Web maps have come a long way. Improved data, cleaner design, better performance, and more intuitive controls have made web maps a ubiquitous and critical component of many apps. They’ve also become one of the mobile space’s most successful transplants as more and more apps are powered by location-aware devices. The core web map UI paradigm itself—a continuous, pannable, zoomable surface—has even spread beyond mapping to interfaces everywhere.

Despite all this, we’ve barely begun to work web maps into our design practice. We create icon fonts, responsive grids, CSS frameworks, progressive enhancement strategies, and even new design processes. We tear down old solutions and build new ones, and even take an extra second to share battle stories in prose and in person. Yet nearly five years since Paul Smith’s article, “Take Control of Your Maps,” web maps are still a blind spot for most designers.

Have you ever taken apart a map? Worked with a map as a critical part of your design? Developed tricks, hacks, workarounds, or progressive enhancements for maps?

This article is a long overdue companion to Paul’s piece. Where he goes on a whirlwind survey of the web mapping stack at 10,000 feet, we’re going to walk through a single design process and implement a modern-day web map. By walking this path, I hope to begin making maps part of the collective conversation we have as designers.

Opinionated about open

Paul makes a strong case for why you might want to use open mapping tools instead of the established incumbent. I won’t retread his reasons here, but I would like to expand on his last: Open tools are the ones we hack best.

There is nothing mysterious about web maps. Take any spatial plane, split it up into discrete tiles, position them in the DOM, and add event handlers for panning and zooming. The basic formula can be applied to Portland, Mars, or Super Mario Land. It works for displaying large street maps, but nothing stops us from tinkering with it to explore galleries of art, create fictional game worlds, learn human anatomy, or simply navigate a web page. Open tools bare the guts of this mechanism to us, allowing us to see a wider range of possibilities.

The mechanics of web maps are not limited to street maps.

We should know the conditions under which map images are loaded and destroyed; we should argue whether map tiles are best positioned with CSS transforms or not; and we should care whether vector elements are drawn with SVG or Canvas. Open tools let us know and experiment with these working details of our maps. If you wouldn’t have it any other way with your HTML5, CSS, or JavaScript libraries, then you shouldn’t settle for less when it comes to maps.

In short, we’ll be working with a fully open mapping stack. MapBox, where I work, has pulled together several open source libraries into a single API that we publish under mapbox.js. Other open mapping libraries that are worth your time include Leaflet and D3.js.

Starting out

I’m a big fan of Sherlock Holmes. Between the recent Hollywood movies starring Robert Downey Jr. and the BBC’s contemporary series, I’m hooked. But as someone who has never been to London, I know I’m missing the richness of place and setting that Sir Arthur Conan Doyle meant to be read into his short stories.

A typical approach would be to embed a web map with pins of various locations alongside one of the Sherlock stories. With this approach the map becomes an appendix—a dispensable element that plays little part in Doyle’s storytelling. Instead, we’re going to expand the role of our map, integrating it fully into the narrative. It will set the stage, provide pace, and affect the mood of our story.

A tale of places

To establish a baseline for our tale, I restructured The Adventure of the Bruce-Partington Plans to be told around places. I picked eight key locations from the original text, pulled out the essential details of the mystery, and framed them out with HTML, CSS, and JavaScript.

A Sherlock Holmes story in text only. View Demo 1.

• The story is broken up into section elements for each key location. A small amount of JavaScript implements a scrolling flow that highlights a single section at a time.
• Our page is not responsive yet, but it contains scaffolding to guard against bad choices that could thwart us. The main text column is fluid at 33.33% and pins to a min-width: 320px. If our content and design flow reasonably within these constraints, we’re in good shape.

Next, we’ll get started mapping. Initially we’ll work on our map separately from our story page to focus on learning key elements of a new technology.

Maps are data

The mapping equivalent of our abridged Sherlock story is a dataset of eight geographic points. GeoJSON, a format for describing geographic data in JSON, is the perfect starting point for capturing this data:

{
    "geometry": { "type": "Point", "coordinates": [-0.15591514, 51.51830379] },
    "properties": { "title": "Baker St." }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.07571203, 51.51424049] },
    "properties": { "title": "Aldgate Station" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.08533793, 51.50438536] },
    "properties": { "title": "London Bridge Station" }
}, {
    "geometry": { "type": "Point", "coordinates": [0.05991101, 51.48752939] },
    "properties": { "title": "Woolwich Arsenal" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.18335806, 51.49439521] },
    "properties": { "title": "Gloucester Station" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.19684993, 51.5033856] },
    "properties": { "title": "Caulfield Gardens" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.10669358, 51.51433123] },
    "properties": { "title": "The Daily Telegraph" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.12416858, 51.50779757] },
    "properties": { "title": "Charing Cross Station" }
}

Each object in our JSON array has a geometry—data that describe where this object is in space—and properties—freeform data of our own choosing to describe what this object is. Now that we have this data, we can create a very basic map.

The basics of web mapping. View Demo 2.

• Note that the coordinates are a pair of latitude and longitude degrees. In the year 2013, it is still not possible to find a consistent order for these values across mapping APIs. Some use lat,lon to meet our expectations from grade-school geography. Others use lon,lat to match x,y coordinate order: horizontal, then vertical.
• We’re using mapbox.js as our core open source mapping library. Each map is best understood as the key parameters passed into mapbox.map():
  1. A DOM element container
  2. One or more Photoshop-like layers that position tiles or markers
  3. Event handlers that bind user input to actions, like dragging to panning
• Our map has two layers. Our tile layer is made up of 256x256 square images generated from a custom map on MapBox. Our spots layer is made up of pin markers generated from the GeoJSON data above.

This is a good start for our code, but nowhere near our initial goal of using a map to tell our Sherlock Holmes story.

Beyond location

According to our first map, the eight items in our GeoJSON dataset are just places, not settings in a story full of intrigue and mystery. From a visual standpoint, pins anonymize our places and express them as nothing more than locations.

To overcome this, we can use illustrations for each location—some showing settings, others showing key plot elements. Now our audience can see right away that there is more to each location than its position in space. As a canvas for these, I’ve created another map with a custom style that blends seamlessly with the images.

Illustrations and a custom style help our map become part of the storytelling. View Demo 3, and then read the diff.

• The main change here is that we define a custom factory function for our markers layer. The job of the factory function is to take each GeoJSON object and convert it to a DOM element—an a, div, img, or whatever—that the layer will then position on the map.
• Here we generate divs and switch from using a title attribute in our GeoJSON to an id. This provides us with useful CSS classes for displaying illustrations with our custom markers.

Bringing it all together

Now it’s time to combine our story with our map. By using the scroll events from before, we can coordinate sections of the story with places on the map, crafting a unified experience.

As the user reads each section, the map pans to a new location. View Demo 4, then read the diff.

• The bridge between the story and the map is a revamped setActive() function. Previously it only set an active class on a particular section based on scrolling position. Now it also finds the active marker, sets an active class, and eases the map to the marker’s location.
• Map animation uses the easey library in the mapbox.js API, which implements animations and tweening between geographic locations. The API is dead simple—we pass it the lon,lat of the marker we want to animate to, and it handles the rest.
• We disable all event handlers on our map by passing an empty array into mapbox.map(). Now the map can only be affected by the scrolling position. If users wanted to deviate from the storyline or explore London freeform, we could reintroduce event handlers—but in this case, less is more.

Displaying our fullscreen map together with text presents an interesting challenge: our map viewport should be offset to the right to account for our story on the left. The solution I’m using here is to expand our map viewport off canvas purely using CSS. You could use JavaScript, but as we’ll see later, a CSS-only approach gives us elegant ways to reapply and adjust this technique on mobile devices.

At this stage, our map and story complement each other nicely. Our map adds spatial context, visual intrigue, and an interesting temporal element as it eases between long and short distances.

Maps in responsive design

The tiled, continuous spatial plane represented by web maps is naturally well-suited to responsive design. Web maps handle different viewport sizes easily by showing a bit more or a bit less map. For our site, we adjust the layout of other elements slightly to fit smaller viewports.

Tweaking layout with web maps. View Demo 5, then read the diff.

• With less screen real estate, we hide non-active text sections and pin the active text to the top of the screen.
• We use the bottom half of the screen for our map and use media queries to adjust the map’s center point to be three-fourths the height of the screen, using another version of our trick from Demo 4.

With a modest amount of planning and minimal adjustments, our Sherlock story is ready to be read on the go.

Solve your own case

If you’ve been following the code between these steps, you’ve probably noticed at least one or two things I haven’t covered, like the parameters of ease.optimal(), or how tooltips picked up on the title attribute of our GeoJSON data. The devil’s in the details, so post to this GitHub repository, where you will find the code and the design.

You should also check out:

• The MapBox site, which includes an overview of tiling and basic web map concepts, and MapBox.js docs and code examples.
• Leaflet, another powerful open source mapping library.
• D3.js, a library for powering data-driven documents that has a broad range of applications, including mapping.

This example shows just one path to integrating web maps into your designs. Don’t stick to it. Break it apart. Make it your own. Do things that might be completely genius or utterly stupid. Even if they don’t work out, you’ll be taking ownership of maps as a designer—and owning something is the only way we’ll improve on it.

With the rapid and lucrative growth in the smartphone industry, we're always told that the world is in our hands. But the infrastructure of that world is not always as seamless as we would like.

Charlie Haughey was drafted into the US Army in October of 1967. He was 24, and had been in college in Michigan before running out of money and quitting school to work in a sheet metal factory. The draft notice meant that he was to serve a tour of duty in Vietnam, designated a rifleman, the basic field position in the Army. After 63 days in Vietnam, he was made a photographer, shooting photographs for the Army and US newspapers, with these instructions from the Colonel: “You are not a combat photographer. This is a morale operation. If I see pictures of my guys in papers, doing their jobs with honor, then you can do what you like in Vietnam.” He shot nearly 2,000 images between March 1968 and May 1969 before taking the negatives home. And there they sat, out of sight, but not out of mind, for 45 years, until a chance meeting brought them out of dormancy and into a digital scanner. At first, it was very difficult for Haughey to view the images and talk about them, especially not knowing the fates of many of the subjects of his photos. When the digitization hit 1,700 negative scans, Haughey put them on a slideshow and viewed them all at once, and didn’t sleep for three days after. He’s slowly getting better at dealing with the emotional impact of seeing the images for the first time in decades. A team of volunteers has worked with Haughey to plan a 28-image show, titled A Weather Walked In, which opens April 5th in the ADX art gallery in Portland, Oregon. The difficulty of keeping notes in a war zone along with the passage of decades has faded the details behind many of the images, and the captions reflect this fact, with many shots of unknown people in forgotten locations at unspecified times. It is hoped that publication of the pictures can yield more information. More images from the collection will be released as the project progresses. You can follow the progress on facebook and Tumblr. Thanks to Chieu Hoi project volunteer Kris Regentin for preparing much of this introduction and the accompanying captions. -- Lane Turner (46 photos total)
Bowed head in truck: Soldier and location unidentified. Charlie's first response to this photo: "It was not uncommon to find anyone with a head bowed for a moment, more often when we were heading out than when we were coming back. Interesting that he has a flak jacket, he's taking precautions on both sides of the fence. M16, a steel pot, a flak jacket, and a prayer."

Today NPR is streaming the new Youth Lagoon album and tomorrow he does on tour, just going to keep it short, what a great record, enjoy.

TRACKLIST
Through Mind and Back
Mute
Attic Doctor
The Bath
Pelican Man
Dropla
Sleep Paralysis
Third Dystopia
Raspberry Cane
Daisyphobia

TOUR DATES
02-26 Missoula, MT – Badlander
02-27 Bozeman, MT – Filling Station
02-28 Salt Lake City, UT – Kilby Court
03-01 Denver, CO – Larimer Lounge
03-06 New York, NY – Bowery Ballroom
03-13-16 Austin, TX – SXSW
03-22 Boise, ID – Treefort Music Fest
04-12 Indio, CA – Coachella
04-19 Indio, CA – Coachella
04-21 Phoenix, AZ – Crescent Ballroom
04-22 Tucson, AZ – Club Congress
04-24 Austin, TX – Mohawk
04-25 Dallas, TX – The Loft
04-26 Houston, TX – Fitzgerald’s
04-27 New Orleans, LA – One Eyed Jacks
04-28 Birmingham, AL – The Bottletree
04-30 Orlando, FL – The Social
05-01 Atlanta, GA – Terminal West
05-02 Nashville, TN – Mercy Lounge
05-03 Asheville, NC – The Grey Eagle
05-04 Carrboro, NC – Cat’s Cradle
05-07 Northampton, MA – Pearl St.
05-10 Philadelphia, PA – Union Transfer
05-11 Columbia, MD – Sweet Life Festival
05-13 Toronto, Ontario – Great Hall
05-14 Columbus, OH – A&R Bar
05-15 Chicago, IL – Metro
05-16 Madison, WI – Majestic Theater
05-17 Minneapolis, MN – Fine Line
05-22 Portland, OR – Wonder Ballroom
05-23 Vancouver, British Columbia – Venue
05-24 Gorge, WA – Sasquatch! Fest
06-05 Brooklyn, NY – Barclays Center *
* with the National

Youth Lagoon’s second album, Wondrous Bughouse, is one of the most arresting headphone records you’ll hear this year. Trevor Powers, the band’s sole member, layers strange but alluring synth textures under quirky melodies and simple pop beats, in the process creating an expansive and endlessly engrossing world of sonic curiosities.

As with Youth Lagoon’s 2011 debut, The Year of Hibernation, the songs on Wondrous Bughouse are moody but not melancholy. Thematically, Powers finds himself in an existential spiral, as he asks grand questions about mortality, the spiritual world and his own mental state — which he describes as “hyperactive.” Weighty subjects ripe for pensive introspection, sure, but the music is uplifting, if a bit dysphoric, like an awkward hug for all that is light and beautiful.

Powers, who says he controls his busy mind with music, offers no illuminating epiphanies or profound discoveries on Wondrous Bughouse, out March 5; he says he hasn’t had any. But the songs allow him to assume the identity of Youth Lagoon and sort through all the emotional and mental baggage he, like so many, carries with him everywhere. The album opens a window into our odd little world, with the understanding that life is a baffling mystery, but also a wonderful ride.

via NPR

Permalink |
Comment On This Post (3) |
Tweet This Post | Add to
del.icio.us | Stumbleupon

Post tags:

Images from the aftermath of the Sandy Hook school shooting were seen around the word. The photographs, showing both reaction and grief, were a reminder of the other tragedies from the year, including the Aurora theater shooting. In an image provided by NASA Tuesday Dec. 18, 2012 NASA’s Cassini spacecraft delivered a glorious view of [...]

“The Web is Agreement.” Jeremy Keith’s eloquent statement neatly summarizes the balance that makes it possible for us to build amazing things. Each week, new devices appear with varying screen sizes, pixel densities, input types, and more. As developers and designers, we agree to use standards to mark up, style, and program what we create. Browser makers in turn agree to support those standards and set defaults appropriately, so we can hold up our end of the deal.

This agreement has never been more important.

That’s why it always hurts when a device or browser maker does something that goes against our agreement. Especially when they’re a very visible and trusted friend of the web—like Apple.

You see, Apple’s newest tablet, the iPad Mini, creates a vexing situation: Its device-width viewport tag defaults to the same values as Apple’s original iPad (768x1024 pixels), even though the Mini's screen is physically 40 percent smaller. That means every button, graphic, link, and line of text on a web page on the iPad Mini appears tiny—even when we try to do the right thing and build flexible, multi-device experiences.

Two iPads, one too small.

But Cupertino isn’t the only culprit out there. This is a problem that’s been brewing since we started using the viewport—and it has to do with not just pixels, but our own practices as well. Let’s take a step back and understand what’s really causing today’s woes—and what all of us need to do about it.

The trouble with pixels

Today’s viewport woes can be traced right back to pixels—yes, those tiny elements we work with every day.

The first pixel challenge is quantity. The more pixels in the display, the more information can be displayed. But as these are physical pixels whose number can’t be altered after the fact, a second factor comes into play: the screen’s physical size.

Imagine two two-inch-wide displays (about the width of the iPhone), as shown below.

Two devices, each with a two-inch-wide display. The one on the right, at 640x960, would pack four times as many pixels into the same space as the 320x480 screen on left.

The first is 320x480 pixels, the second 640x960. This gives the second display four times as many pixels as the first, but fits all of them into the same physical space. This smaller pixel size results in content that is also smaller—making it crisper, but much harder to read as well.

This is exactly what happened on the Nokia E60. In 2005, most mobile phone displays were about an inch and quarter wide, with an average of 176 pixels in that width. But the E60, which sported a “huge” 352x416-pixel display, crammed twice the number of pixels into a similar amount of space. The result: A gorgeous, crisp—but often hard-to-read—display.

The E60 also introduced a now-familiar problem: how users would manage to surf “big” sites on a tiny device. Nokia’s solution was a new browser, the Mini Map. This browser behaved similarly to today’s smartphone browsers by first rendering the full-sized page, then scaling it to fit the available screen size. Superimposed onto this rendering was a transparent red box that could be repositioned using the device’s joystick. Clicking the joystick would zoom the content indicated within the box.

Enter viewports

Mini Map was probably one of the first commercial uses of a dynamic viewport—a construct designed to dynamically change the size or scale of the visible screen area in order to improve the user experience. But it was far from the last.

In 2007, Apple released the iPhone, a much larger device than the E60, but one with a similar problem. Even on a “huge” two-inch display, surfing the “real web” on an iPhone meant loading large pages onto a small device. Apple chose to solve this problem through a series of carefully orchestrated enhancements.

The first was the creation of a virtual viewport similar to the one Nokia designed for Mini Map. When encountering desktop websites, the browser would render them at their full size (based on a default canvas width of 960 pixels). It would then scale them down to fit the two-inch display. Users could interact with the page to scroll and zoom in on areas of their choice.

Apple didn’t stop there. It also developed a new viewport meta tag. Sites not using the tag would be rendered using the default, legacy-web viewport of 980 pixels. But developers who opted to use the tag could declare the viewport for their sites, including setting the width to the all-important device-width value. This value tells the browser, “please pick a width that fits this specific device’s screen best.”

Other mobile browser vendors were quick to follow Apple’s lead. Nowadays just about every mobile browser supports the viewport meta tag, including the device-width value. This provides us with an even playing field: It respects the efforts of those who take the time to adapt sites for the multi-device web, while those who haven’t yet made this transition still receive a “good-enough” default experience.

Mini problems

The value device and browser vendors assign to device-width is directly related to that device’s physical dimensions. Physically smaller devices need a smaller device-width value (which will result in larger content). Set a value that’s too large, and most content will be too small to comfortably read.

And that’s why Apple’s iPad Mini has a vexing viewport. It uses the same 768-pixel device-width as the regular iPad, even though its physical size is much smaller. One would expect to see a device-width more in line with those of similarly sized tablets like the BlackBerry PlayBook or second-generation Samsung Galaxy 7″—around 500 to 600 pixels, as shown in this chart.

Because of this device-width, web pages appear 27 percent smaller on the iPad Mini than they do on the Google Nexus 7 (calculated based on the relative size of device pixels)—all because Apple decided to describe the device’s viewport as 768 pixels.

Solving for content size

One of the first places this causes problems is in text: More pixels in a smaller space means that fonts sized in pixels will look correspondingly dinky.

Of course, many of us aren’t sizing in pixels anymore—we’re using relative dimensional elements like ems, right? Only, that doesn’t quite solve the problem this time.

When we use ems, we imply a certain trust that the browser’s baseline font size at the default zoom level—1em or 100 percent in unit parlance—is sane and readable. But that’s not always the case. The browser’s baseline font-size value (1em) roughly equates to a 16-pixel square. This ratio serves as a ligament that binds absolute and relative units, but it can vary from browser to browser.

On the iPad Mini, font-size at baseline is precisely 16 pixels. That may have worked fine when fewer pixels were packed into our screens, but on a dense display with an improperly defined viewport, that’s going to be uncomfortably small.

Not all browsers toe the 1:16 em-to-pixel line, though. The Kindle Touch’s browser, for example, has a high-density viewport, but adapts by using a 1:20 ratio, kicking the default font size up a few pixels for readability.

This might not fix all of iPad Mini’s viewport problems, but at least the content would be legible.

Three seven-inch tablets. Note the difference in rendering.

So why did Apple do this?

To understand why Apple would release a product with such a vexing viewport, we don’t have to look further than our own habits.

In the wake of the iPad’s initial release, web folk worldwide scrambled to adapt sites to look good on the new tablets. Somewhere along the way many of us collectively settled upon pixel-based notions of tablet-ness, and those notions often resulted in fixed, 1024x768-pixel layouts precisely targeted at these devices.

Were Apple to decrease the device-width value for the iPad Mini on account of its smaller physical size, it would guarantee a second scramble as existing tablet-adapted sites assuming a 1024x768 viewport suddenly looked unexpectedly wretched on the new device.

The responsibility here goes two ways. Browser makers need to provide reliable baselines of viewport and text sizing, yes. But we as implementers also need to stop grasping for pixel-perfect control over our layouts (the “control” is an illusion, anyway).

A way forward

The only way for us to move forward is together. As developers and designers, we need to hold up our end of the bargain and be mindful of how we do our work—and that means letting go of the notion of pixel precision once and for all. We need to earn the trust of browser makers so they hear us out when things just frankly aren’t right. We hope this article illustrates we’re trying to do the right thing. We hope browser makers acknowledge that and follow suit.

Standards and consistency are more important now than ever before. Please let browser makers and device manufacturers, like Apple, know that we rely on consistent and reliable decisions about default viewports and their zooming. We’re willing to hold up our end of the agreement, and we need them with us.

Let’s move into the future—together.

RSS readers: Don't forget to join the discussion!

English artists Mishka Henner and David Oates' supercut short film pulls together clips of photographer characters in movies from famous films like Blow Up, Salvador, and other not so critically-acclaimed films like Harrison's Flowers.

Barence writes "When it comes to programming, the classroom is moving online. A new wave of start-ups has burst onto the scene over the last year, bringing interactive lessons and gamification techniques to the subject to make coding trendy again. From Codecademy — and its incredibly successful Code Year initiative — to Khan Academy, Code School and Udacity, online learning is now sophisticated and high-tech — but is it good enough to replace the classroom? 'We are the first five or six chapters in a book,' says Code School's Gregg Pollack in this exploration of online code classes, but with the number of sites and lessons growing by the week that might not be the case for long."

Read more of this story at Slashdot.

Hacking Language Learning: Dr. Conor Quinn at TEDxDirigo

Dr. Conor McDonough Quinn is a documentary linguist, endangered language revitalization worker, and avid learner and teacher of languages. Raised in Portland, Maine, he has lived at length in Indonesia, China, and Oman, and has worked extensively with several indigenous communities of the Northeast. Learning his own family's endangered heritage language (hint: look at the name) in his early teens gave him a passion for helping others to do the same, and led him to pursue linguistics—somewhat single-mindedly—throughout his academic career. Alongside a hefty set of technical research questions in linguistics, he is currently most interested in developing tools to help speech communities carry out their own linguistic documentation and revitalization work, and in finding new ways to reduce the barriers to learning new languages. In thespirit of ideas worth spreading, TEDx is a program of local, self-organized events that bring people together to share a TED-like experience. At a TEDx event, TEDTalks video and live speakers combine to spark deep discussion and connection in a small group. These local, self-organized events are branded TEDx, where x = independently organized TED event. The TED Conference provides general guidance for the TEDx program, but individual TEDx events are self-organized.* (*Subject to certain rules and regulations)
From:
TEDxTalks
Views:
2

13
ratings
Time:
14:12
More in
Nonprofits & Activism