Download - net magazine sampler
issue 219 september 2011 www.netmagazine.com
Issue219
september2011
£5.99
THEWORLD’S BEST-SELLER! FREE HTML5 VIDEO CD THISMONTHissue
219
Also inside >
Thewebdev’s intro to the cloud
Proguide to JS regular expressions
UpgradeDrupal sites toHTML5
Addautocomplete searchwithCSS3
Get the top5 free tools for SEO
Create iPadpublicationswithMag+
Createperfect sitestyleguidesGetconsistencywithourpro tips
Discover the topdesignand
developmentappsTODAY!
4 .net september2011
Build-off:Visitor attraction sites 112
Gallery 70 Profile/BrianHoff 82
“Thefield isevolving at thespeedof light”
Kristina Halvorson, page 38
.net content
50 freewebdesign tools 55
Opinion/MikeHook 98 Mobile attitudes 50
Feed 16
.net content
.net september2011 5
50 freewebdesign tools issue 219/september 2011
Specialsubscriptions
offer! >Turn topage42
(orpage84 for
USandCanada)
Web Pro126 Social mediaWhy
online reputationmatters
128 Hosting The newtop-level domains
129 Security Learn how tothink like a hacker
130 Marketing Is the timeright for SMO?
131 StartupsMarketing yournew business
132 Ecommerce Rewardusers for being loyal
133 Search Free SEO tools
134 Big Question How doyou handle email?
articles >14 The .net Awards
We explain how you canhelpmake the 2011 .netAwards the best ever
38 InterviewKristina Halvorson talks aboutthe emerging discipline ofcontent strategy and how tomake it work for you
44 Create the perfectstyle guideSteve Fisher explains how togo about writing a style guideto ensure consistent brandidentity across your sites
50 Mobile attitudesJust who is accessing the webviamobile devices andwhy?Mike Cornwell, chief executiveofficer ofMRM London,investigates
55 50 freeweb toolsthat rock!GaryMarshall shares 50 of thebest free web tools to helpbuild your site, fromwellknown tools asWordPress andDrupal through to some youmay have never considered
regulars >6 Welcome
10 Inbox
16 Feed
42 UK/overseassubscriptions
84 US/Canadasubscriptions
122 Expert advice
146 Next issue
showcase >
70 GalleryThe best newwebsites in thefollowing categories: CSS,HTML5, JavaScript, plug-ins,CMS andmobile
78 Focus_onLocation-based apps, contactpages and even portfolioscan be enhanced by theintelligent use of maps,saysMatthew Smith
80 OpinionDoes the release ofSchema.org spell the endof RDFa ormicroformats?Emily Lewis thinks there’smore to it than that
82 ProfileBrian Hoff reveals how hewent fromworking in anApple shop to using theiPhone to gather inspirationfor his design business
technique >
86 CSS3/adda searchbox toyour siteChristian Krammer explainshow to add a search box toyour site and enhance it withCSS3 functionality
90 InDesign/publishonthe iPadMike Haney demonstrateshow to incorporate video andHTML5 elements into yourdigital magazine
94 JavaScript/getstartedwithREGEXAndy Croxall gets under thehood of regular expressions
98 Opinion/a shiftinmindsetMike Hook looks at the hugegrowth and increasing impactof behaviour-driven design
100 Android/automateyourapp testingJohn Senner, KoaMetter andEmoryMyers ofMokaSocialreveal how to delegate thedirty work of testing
104 Drupal/simplifyandimproveyourHTMLJen Simmons shows you howto improve your HTMLmarkup
111 Q&AMartin Beeby talks about theIE10 Platform Preview 2
112 Websitebuild-offThis month, visitorattraction sites
116 MakeoverDevon Keller givesPresentWise a facelift
118 HowwebuiltMembers of Legwork Studiodiscuss thisshell.com
.net contentGet thetutorialfilesonline!● CSS3/add a searchbox to your sitenetm.ag/css-219● JavaScript/getstarted with REGEXnetm.ag/js-219● InDesign/publish onthe iPadnetm.ag/mag-219●Android/automateyour app testingnetm.ag/android-219
OR download thewhole lot atnetm.ag/files-219
.net july2011 7
>>Never miss an issue!
Subscribe now and get massive savings off store prices. With a
print subscription you’ll also get access to our digital archive via our
website – see www.netmagazine.com/premium. For full details,
see page 84 (US/Canada) or page 42 (everywhere else).
www.netmagazine.com/shop
“Following feedbackfrom our 2010Awards, we’veintroduced a numberof new categories”
advisory panelMolly HolzschlagAwell-knownweb standards advocate,Molly is group leader for theWebStandards Project. Among her 30-plusbooks is The Zen of CSS Design,co-authored with Dave Shea.www.molly.com
Fadi ShumanFadi Shuman is director and co-founderof Pod1, a global network of digitalagencies providing integratedecommerce andmarketing solutionsfor leading brands and retailers.www.pod1.com
Julie HowellJulie has been working in digital sincethe web began. She wrote PAS78, theUK’s first web accessibility standard.She currently writes about technologyfor BBCWebWise.juliehowell.co.uk
MargaretManningMargaret is CEO at Reading Room.She’s a frequent keynote speakerand recently won Female Entrepreneurof the year at the 2008 Fast GrowthBusiness Awards.www.readingroom.com
Andy ClarkeAndy is a UK designer who’s passionateabout web standards and accessibility.The founder of Stuff and Nonsense(www.stuffandnonsense.co.uk), hespeaks at events worldwide.www.stuffandnonsense.co.uk
Andy BuddAndy Budd is designer and directorat design consultancy Clearleft (www.clearleft.com). He also organises thed.Construct web conference, andenjoys photography and diving.www.andybudd.com
Patrick H LaukePatrick works as web evangelist inthe Developer Relations team atOpera Software ASA. In a previouslife, he worked as web editor forthe University of Salford.www.opera.com
Ryan CarsonOriginally from Colorado, Ryan isthe founder of Bath-based webapplication and event companyCarsonified.com, and can be foundat twitter.com/ryancarson.
ryancarson.com
Voting has officially begun in thisyear’s .net Awards, and it’s timeto have your say on who deservesrecognition. Based on reader’snominations, we’ve drawn upshortlists in each of 17 categories.And we haven’t been resting onour laurels. Following feedback
from our 2010 event, we’ve introduced a number ofnew categories. Alongside familiar categories suchas Agency of the Year and Open Source Applicationof the Year, there are also a number of new additions,including Designer of the Year, Developer of the Year,and Brilliant Newcomer.
Under-21s are also being honoured for the first time,with the introduction of the Young Designer of theYear and Young Developer of the Year categories.
Public voting is open until 30th September, afterwhich, a shortlist of three in each category will besent to our panel of industry experts, who’ll make thefinal decision. Please take a moment to visit www.thenetawards.com and help us celebrate the hottestmtalent in web design and development!
editor-in-chiefwww.twitter.com/danoliver/
Want access to all ofthis great content?
Subscribe today to theprint edition of .net andget exclusive access toour digital archive!
www.netmagazine.com/shop
.net inbox
>>Write to us!Want to get in touch? Email
your comments and suggestions to
inboxYour emails, comments and tweets
Subject:3D in digitalFrom: Nik Antstis, www.gm-design.co.uk
I wanted to write in to congratulate andendorse the comments made by Chad Turnerin last month’s ‘Plan your way to a perfectsite’ feature and perhaps also attempt to getpeople to treat the use of 3D in digital withless surprise.
I’m a 3D motion graphics designer whohas become immersed in the world of digitaland UX design along the way, and I agreethat 3D is a massively under-realised andperhaps even misunderstood resource in thedesign arsenal. At gm-design we often flickopen Cinema 4D when discussing a conceptwith a dubious account handler or anenthusiastic and fast thinking client.
The speed at which potentially complexthought processes or design layouts can beexpressed is extraordinary. I feel it allows aless creative or visual client to understandand get to grips with the designer’s visionmuch more easily than perhaps a wireframeon its own could (dependent on the project).I’ve also found it to be an invaluable tool toinspire and excite in breakout sessions as avery quick and disposable discussion point,which everyone involved, creative and non,can instantly relate to. I’m in no way sayingthat this negates or indeed replaces theuse of wireframes or other more traditionalmock-up methods, but I certainly believe that3D represents a very useful addition.
Software solutions such as the wonderfulCinema 4D are coming into the budgetaryrealms of normal agencies and with powerful3D stock libraries such as Turbosquid at ourdisposal, previously inconceivable mock-upsor animatics can be rapidly realised. Usingopen source 3D software such as Blender isalso a viable solution for many tasks.
With web skills increasingly beingtransferred to mobile/touchscreen devicesand the drive to allow users to interact moreand more with our creations or client’sproducts, 3D seems to be a natural resourceto exploit in order to step past that screenpartition (mentally at least).
We live in a 3D world and I agree withChad that the time for being intimidated by3D is indeed over!We couldn’t agree more, Nik. Anyonewanting to go further with 3D, by the way,should check out our market-leading sistertitle 3D World (www.3dworldmag.com).
Subject:Weirder andweirderFrom: Chris Hester
After reading the latest issue cover to cover,I couldn’t help but feel that web design isgetting weirder, with all kinds of buzzwordsand acronyms flying around. We’ve now gotclouds, buckets, dragonflies and more. Takethese phrases in .net for example ...
“If you’re not sure what I mean by Agileand waterfall, you probably work waterfall and
might want to check out an Agile method, suchas scrum.” – Mike Byrne, page 90.
“There are no limits. One application can goeverywhere, even into your fridge.” – AugustoMarietti, page 107.
“It’s a brave new world … yarrr!” – AndyMarshall, page 90, pretending to be a pirate.
“Be careful out there.” – DerekFeatherstone, page 54.
While it’s good to see serious technicalarticles in .net, the above do make it evenmore fun to read. Just be careful out there,yarrr! There’s a waterfall in your fridge!True, Chris, discussions in our industry cansometimes get a bit Alice in Wonderland.But you can rely on us to steer you throughthe choppy waters of obscure acronyms anddodgy metaphors …
Subject: Lorem ipsumFrom: Sebastian Green
I wish to weigh in on the controversysurrounding the use of lorem ipsum (Inbox,issues 216 and 217). There is no point inwasting time using real content on designmockups. Save it for the development stage.
However, I do think the client should havesome final content ready, or at least havesome idea of the content, otherwise how canyou design? The design should be based onthe content and should make the contentshine, so without some idea of it there’s noway for the design to be truly effective.
What readerswantWe asked our Facebook followers (www.facebook.com/netmag) which page orpart of the magazine they turned to first. Here’s what they said:
Pedro Reis: Last one. I always go backwardsfor a preview.Steven Grant: Design OffMG Khin: PHP tutos :PBen Ceglowski: The magazine part of themagazine. :DBaz Kika: Design off: all the chit chatand theory put into action. Defo bestbit. Be good to open it to the publictoo. So we can enter, best one getsput in the mag!Bimal Tailor: Design off.
Rikki Tooley: Cover story. They’re usuallywhy I get an individual copy!Mark Johnson: The contents page! Thenwhatever takes my fancy :)Nattapong Sompinta: Agree with Mark !!Martin Feer: Usually the Showcase and Prosection.Rob Golbeck: Usually I turn to the coverstory first, but I’ll often stop and read GaryMarshall’s column along the way.Jay Patel: The Showcase section is my firstpoint of call followed by the tutorials.
Potential for prototyping Nik recommendsCinema 4D as a tool in the web designer’s arsenal
10 .net september2011
Thanks for your thoughts, Sebastian. You’reone of many who feel strongly about thissubject: check out the comments on JohnMcGarvey’s recent opinion piece for ourwebsite (www.netmagazine.com/opinions/stop-using-lorem-ipsum).
Subject:Tutorial files (1)From: Loren Swendsen
Hi guys, love the magazine. I suspect thereason you separate out all of the downloadlinks (netm.ag/make-216, netm.ag/css-216,netm.ag/js-216 and even each individualbuild off design) is for tracking purposes orsome reason like that. It can’t be for us thereaders, can it?
As long as I’m subscribing to the magazineI’m going to want all of the supplemental
files. So is there any chance you can add anall-files-from-issue-216.zip download as well?I’m getting a little tired entering in all theseindividual links, saving, and unzipping.
Subject:Tutorial files (2)From:Mikie Booth
I’ve just bought the .net magazine issue 217and was going through the Flixel tutorial.Do you know where I can find the sourcefiles that go along with this to download? Inthe magazine I can only find a bit that saysdownload the tutorial files, not where.Mike – you’ll see the appropriate URL in thegreen/blue circle at the top of the first pageof each tutorial. They’re also listed on thecontents page. Loren – that’s not a bad idea.We’re going to start this from this issue: soto download all the files at once, point yourbrowser to netm.ag/files-219.
Subject:Education (1)From: AlexOlder, alexolder.com
In regards to issue 218’s Big Question – “Howmuch do you value a formal web designeducation?” I think, if done right a webdesign education can help. There are stillmany institutions, though, that are stuck withold books, old technologies and people whodon’t understand what’s involved in modernweb design and development.
What also needs to happen are internshipsand placements alongside devoted courses.These can really open the eyes of studentsabout what’s really going on, can lead tojobs following university/college and alsobuild upon skills that are being learned inthe classroom.
Obviously you can teach yourself, but Ithink there are many, many people who needpointing in the right direction and need ahelping hand to understand some basics. Butthe main problem is that a web design course
won’t cover everything that can be done onthe web so there needs to be some selectionoffered to students who want to focus ondifferent areas instead of forcing them allthrough the same course.
Subject:Education (2)From: Gordon
Great topic and great selection of pros on thepanel. As a professional ‘webucator’ I have alot of hope for the future of web education.I also know all too well the realities of tryingto write, implement and constantly revise acurriculum at the middle school, high schooland university levels.
If we accept the fact that educationalinstitutions are going to be 10-15 yearsbehind the latest trends in any industry thenit’s evident that we’re just now approachingthe first time when we can actually haveweb programs that are based on lastingweb standards (and not Dreamweaver andFlash). It was only 10 years ago or so that theweb standards movement had true tractionwithin the industry. Now we’re approachingthe time for the movement to move into theeducational system.
Your Big Question panellists were right tomention the WaSP and Opera curricula: theseare awesome! But they are just curricula, notactual programs. There are very few true webprograms at any level of education. That said,I think that in the next five to 10 years we’llsee more web courses covering a range oftopics, from web infrastructure to design anddevelopment, and even UX and accessibility.
At least that’s what I’m working towards,and I know I’m not alone. There are a lot ofother folks out there teaching full-time orpart-time in the evening to make this shift inweb education happen.
Hopefully as we continue to askthis question in the coming years, the
.net september2011 11
98 .net summer2011
.net technique opinion
“HTML5 is thefuture of desktopandmobilewebbrowsing andwebapps” Andy Marshall
The past year has seen companies suchas Google and Apple, as well as the likesof Andy Clarke and Jeffrey Zeldman,
making the case for HTML5. Heralded as an endto the proprietary muddle of third-party plug-insand archaic browsers that have plagued the webfor over a decade, HTML5 is the future of desktopand mobile web browsing and web apps.
Having decided to try my hand at this new-fangled HTML5 thing, I put out a tweet asking fora starting place. Diveintohtml5.org was the first tocome back, and in I dived. Soon I was ready to jointhe worldwide crusade to rid the web of unsightlypresentational HTML elements, inappropriate useof tables and browser hacks.
Flying the flagHTML would be my skeleton, the bare bones,the content laid out neatly with no presumptionsabout how it should look. On those bones I’d placelayers of carefully crafted CSS and jQuery thatbring the skeleton to life, making it move, danceand look rather pretty. The tools of my new tradewould be the likes of <header>, <footer>, <nav>,<section>, <article> and <aside>.
Unlike their presentational predecessors, theseelements no longer define, or even suggest,where their content will be placed on the page,nor dictate what it should look like. Instead,they simply imply the nature of the content, itsmeaning in relation to the document and itssurrounding content. Like microformats, we nowhave ways of writing HTML that give a machine themeaning and nature of the content so it can betterunderstand and index it. Which is pretty cool.
Yet while many of us appreciate these virtues,there’s also been a little confusion, particularlysurrounding the use of <article> and <section>. TheW3C documentation talks generally about whatarticles and sections might be used for and variousblogs have shed more light on the subject, but wemay still find ourselves floating in choppy waters.
In practice, we could have a section containingseveral articles each containing an aside, insidewhich you may find a footer, a header andanother section, and it would still happily validate.Essentially, there are no hard and fast rules asto how these new semantic elements can beused. We should instead take a leaf from CaptainBarbosa’s Codex Pirata, and better think of thesedocuments as guidelines:
“The Code is more what you’d call ‘guidelines’than actual rules. Welcome aboard the BlackPearl, Miss Turner.”Captain Barbossa to Elizabeth Swann, Pirates ofthe Caribbean: The Curse of the Black Pearl, 2003
Andy Clarke’s book, It’s Hard Boiled, draws on asimilar metaphor, alluding to the era of film noirwhere the anti-hero stood against the system andgot things done. He goes on to show what we canstart doing with HTML5, CSS3, @media queries andother progressive techniques right now.
Rebel with a causeDon’t design for the lowest common denominator(aka Internet Explorer), says Clarke; certainly don’tspend the next decade waiting for a fully cross-browser-standardised HTML5. Instead, designfor the best browsers now, while still providingan appropriate experience for those using lesscapable ones.
Thinking a little like a rebel will free up thatbit of creativity and courage to try your hand atHTML5 on a project today. Certainly, your visitorswill appreciate it, even if they can’t actually puttheir finger on it. And users stuck in older browserswon’t even be aware of what they’re missing.
“There’s the Code to consider.”“The Code? You’re pirates. Hang the Code, andhang the rules! They’re more like guidelinesanyway. Bloody pirates!”Elizabeth Swann to a bunch o’ lily-livered seadogs, Pirates of the Caribbean: The Curse of theBlack Pearl, 2003
It’s a brave new world … yarrr!●
Andy is co-owner of Moogaloo (www.moogaloo.com), a web design agency in Sheffield. He’spassionate about Photoshop, HTML and real ale.
HTML5for piratesTake a leaf out of Captain Jack’s book and think of HTML5 documentationas guidelines rather than hard-and-fast rules, says AndyMarshall
Andy Marshall on…
Yo-ho-ho Andy Marshall’s pirate-oriented takeon HTML5 tickled Chris Hester’s fancy
Lessons to learn Should we value formal web design education? Alex, Gordon and Leaper share their views,but what do you think? Weigh in on the issue and send us your thoughts
Brought to you by
.net Inbox is sponsored by Fasthosts Internet(www.fasthosts.co.uk), a leading UK webhosting provider. Since 1999, Fasthosts hasbeen at the forefront of server technologyand is an expert for reseller hostingsolutions. From only £19.99/month+VATfor the first year, Fasthosts Reseller Hostingoffers industry-leading products, an all-in-one control panel, exclusive resellerdiscounts and an independently certifiedtraining programme. All data is hostedwithin Fasthosts’ secure UK data centres andfeatures unlimited bandwidth and super-quickconnectivity. With 24/7 UK phone, onlineand email support, Fasthosts offers a resellerunrivalled performance, quality and greatvalue. More details at www.fasthosts.co.uk
answer will change and pros will cite moregreat web programs.
Subject:Education (3)From: Leaper
I think that saying you need a formal webdesign education to succeed in the industryis quite clearly not true. Some of the mostsuccessful designers out there (includingweb designers) have no formal designeducation at all. However, we shouldn’tunderestimate the value of having a formaldesign education. Although education can’tfully prepare you for the working world, itdoes lay solid foundations for you to buildyour career from and can teach you valuablelessons from an early stage.Thanks for your views, guys. If there’s aquestion you’d like to see answered by ourBig Question panel, let us know by emailingus at [email protected].
Subject:Awards nominationsFrom: Irving Briscoe
Hey, you wonderful people at .net. It wouldbe awesome to be considered next year tobe a nominee in the .net Awards for YoungDesigner of the Year or Young Developerof the Year. I’m a 19-year-old designerand interactive web developer based inMinneapolis, Minnesota. My portfolio canbe found at irvbriscoe.com.
I’m not sure what your selection processis but it would be cool if you used populardev and design communities like Forrst andDribbble to search for potential nominees.I know some great devs and designers onthose sites that are around my age thatdeserve a nomination.
Maybe you guys can use their API toautomatically generate potential nominees.Just an idea. Some of us young devs anddesigners don’t really like to flaunt our ages.Nice portfolio, Irving: you’re obviously doingall the right things! To be up for a .netAward (thenetawards.com), someone hasto nominate you during the nominationsphase, which takes place between May andJuly. It’s too late for this year, but if anyonewants to nominate Irving in 2012, I’m sure itwould make his day …
@netmagHere’s what you wrote about issue 217,issue 218 and themag in general ...
funny how@netmag shouldhave an article on Coldfusionsecurity just when I’m doingColdFusion for myMScProject. huzzah!!
@stewartritchie
twitter.com/stewartritchie/status/93981116477870080
@netmagWhat happened tothe percentage in the BetaMeter section? I noticed itvanished a fewmonths ago.Makes me sad =[
@leebaillie
twitter.com/leebaillie/status/93623623545389056
According to an article in thismonth’s #netmag, developersaren’t “creatives” ....#designeruphisownbum
@ste_brough
twitter.com/ste_brough/status/93617619604750336
@netmag Any chance of a fulltechnicolour Nyan Cat pulloutposter in the next issue?
@benjaminparry
twitter.com/benjaminparry/status/84355945391587329
i bought my first @netmagand i think it’s awesome,really helped withmydesigning
@AshleyKelly95
twitter.com/AshleyKelly95/status/93601667496411136
@netmag and@ComputerArtsare really makingme think tobuy an iPad besidemy ebookreader just to be able to readthem in electronic format
@szabcsee
twitter.com/szabcsee/status/93572665608126466
lay in hospital reading@netmag ... great read & garymarshall’s face is so soothing#juskiddin
@andykinseytwitter.com/andykinsey/
status/85475155144478720
@netmag Sunday eveningssuck less with a net magazineto read
@ORIZONSTUDIO
twitter.com/ORIZONSTUDIO/status/92703867661332481
Like GaryMarshall in@netmag ‘sensible ppl postingveiled warnings, angry rants,self-pitying screeds’ on FB atweekends - so true!
@Dobwalls
twitter.com/Dobwalls/status/91820726310543360
Feelin like puttin @netmag towork and gettin crazy into#devmode with some #html5& #css3. Programmalicious
@SniggitySnax
twitter.com/SniggitySnax/status/88361796590776321
diggin into good read of@netmag issue 217. Lovin thefact the CD has gone, replacedbyURL links, savingmoney andhelping environment sweet
@kiran13xtreme
twitter.com/kiran13xtreme/status/91574590492512256
the articles in the new@netmag are really helpful!Especially the one about thenew@wordpress and the oneabout #newsletters.
@TimV_
twitter.com/TimV_/status/91408308098965505
I love that @netmag are notscared of the slightly nichegeeky topics :)
@lornajane
twitter.com/lornajane/status/85275794083037184
Just had choice of renewingmy@netmag subscription foranother year, or paying fortwoweeks’ food duringmymasters year. I chose .net.
@rhiaro
twitter.com/rhiaro/status/90800768801710081
Inspiration from #netmag thismonth onWordpress multisites on one installation...Clever stuff!
@ajdf
twitter.com/ajdf/status/90371257106841601
@drbparsons OMG! I fuckinglove .net magazine. /cc@goodonpaper @netmag
@eoghanmccabe
twitter.com/eoghanmccabe/status/85790523025133568
@Rich_Clark every issue of@netmag has an article thatmore than pays for themagand in issue 216 it was yours.Thanks!
@TwoLittleFishes
twitter.com/TwoLittleFishes/status/86104216690622466
@ryancarson great interviewin #netmag, really felt inspired.Shame I can’t convince thebosses to accept a 4 dayweek :(
@emma_swift
twitter.com/emma_swift/status/87202712910954496
Just read@ryancarson ‘sarticle in @netmag. Greatread. I cursed, because I sent abig long essay email to himonce... :( Sorry Ryan!
@dooburt
twitter.com/dooburt/status/90436623497576448
totally dorking out onWordPress 3.2. Amazing!Missed abunchof new featuresin the 3 release but@netmag’sgreat article explains all...
@timboreader
twitter.com/timboreader/status/91424656489324544
Reading a great magazine,“Web Design Essentials, Vol2.” from@netmag! Fantasticcontent. Can’t put it down.
@carlinscuderi
twitter.com/carlinscuderi/status/85189119784910848
Tweet feed
Brought to you by
Green for go You’ll find the URL for downloadingtutorial files in the coloured circle on the first page
12 .net september2011
Cartography has a long history, andsome of the most beautiful maps in theworld are ancient ones. Have we lost
the beauty of great maps and relegated them topure utility with Yahoo or Google Maps? Not atall. An open API, new map tools and good designsensibility can help us to have the best of bothworlds. Beautiful cartography is back on the map– so to speak.
Design your own mapsUsing Google’s Map API (http://code.google.com/apis/maps/documentation/staticmaps) or tools suchas MapBox (http://mapbox.com), we can createdynamic colour systems and content-focused mapsthat get the data you don’t need out of the way, sothat the stuff you do need can rise to the surface.For instance, if you’re designing a map to look likepost-World War III America, you could remove alltraces of roads and buildings, and replace all mapicons with zombies. C’mon, you know you want to.
Don’t lose your headAs with any good design, it’s important thatyou don’t lose the usefulness of the map as youredesign the style. Make sure you’re maintainingclear distinctions for roads, boundaries, labels andother elements when necessary. The user should beable to achieve the actions you’ve set before them– whether the map is decorative, for exploration,or an integral tool to an app. No one said thatuseful roads must be yellow, but keep in mind thatyour audience may be confused by a map stylethat breaks the common colour patterns that havebeen established over the past decade. Do yourhomework and choose your styling carefully. ●
It’s important thatyou don’t lose theusefulness of themap as you design
focusf _on_on_
Usingmaps
(1) This example of a nightstyle map of Baltimore,Maryland, is an amazingshowcase of what’s possiblewith the MapBox tool anda great colour scheme(mapbox.com/#/tileset/baltimore-dark). (2) Youmay not need a worldmap. If this is indeed thecase, take some inspirationfrom the guys at theIrrland Tumblelog (irrland.sonntagskunst.de), whoare mapping a socialexperiment using Tumblr,
with this map as a postingplatform. (3) If all you wantto show on your map is aset of data points and eventhappenings, then checkout StartupWeekend(startupweekend.org/events), who have made asuper-sexy blue and whitemap with indicators ofthe most popular StartupWeekend events going onacross the world. (4) Thefolks at DocteurBourbon(www.docteurbourdon.be) stayed in the spirit
1
2
5
4
3
Location-based apps, contact pages and even portfolios can beenhanced by the intelligent use of maps, says Matthew Smith
.net showcase focus_on
78 .net september2011
Obsessed with creative inspiration (seehis site, patterntap.com) and attentionto detail (see his work at squaredeye.com), Matthew Smith loves helpingdesigners capture what inspires them.
of Google Maps, butdesaturated the colours togo for a subtle, in-brandeffect on their contactfooter. (5)Meanwhile,EveryBlock (www.everyblock.com) reallycustomises the lookand feel of its maps,turning them into simpleoutlines of districts andneighbourhoods that areeasily recognisable. Gettingthe details out of the waymakes for an elegant andeasily readable map.
90 .net september2011
.net technique indesign
InDesignpublishon the iPadMag+ enables you to create a digital magazine using InDesign that incorporates video andHTML5 elements.HTML5 elements. Mike HaneyHaney Mike walks you through the process walks you through the processyHaney Mike
What you’ll learn In this tutorial you’ll learn how to expand the functionality and userexperience of digital magazine tool Mag+ with some HTML functionality. It’s easier than youthink. With this you can take magazines, catalogues, presentations and so on, all on to iPad
Knowledge needed InDesign
Requires Adobe InDesign CS4, CS5 or CS5.5; Mag+plug-in for InDesign, Mag+ Production Tool, Mag+Reviewer, Photoshop CS4, CS5 or CS5.5. DownloadMag+ free plug-ins at www.magplus.com
Project time 1 hour
The possibilities for digital magazines onthe iPad are breathtaking. Manypublishers are moving their titles on to
this format. One software solution really catchingon is Mag+, from Moving Media+, the platformbehind pioneering titles such as Popular Science+and Transworld Snowboarding+.
Mag+’s simple InDesign-based workflow putsfull creative control in the hands of the designers,not the tech guys. Video, HTML5 elements andother interactive features are added directly inInDesign. It’s the only system with instant fullyfunctional layout review on iPad, so designers can
try new things and immediately see what the userexperience will be.
A Mag+ page creates a tactile experience, withenhanced design, making a digital canvas thatdoesn’t limit your design to the edge of the screen.
In this tutorial you’ll learn a more advancedtechnique, adding HTML functionality directly inInDesign to enhance the user experience.
The software, plus everything that you needto know about using it, can be downloaded forfree from www.magplus.com.
Expert tip InDesign and images
Always convert placeholder images into132dpi. InDesign is much better at inchesand millimetres than pixels so doing theconversion in InDesign is tricky. It’ll be mucheasier if you convert the image to the rightresolution in Photoshop. This is an importanttake away: the iPad screen is 132dpi.For native Mag+ pages, this will happenautomatically on export, but here you wantto make sure your dimensions are correctfor the HTML element box you’re creating.(Note: You can also scale the HTML elementby checking the Scale box on the plug-in.)
2 Set up document Activate the Mag+ plug-in andfill in the required fields. Issue is the folder you export to,Id is the name of the document you will have in the code,Name is what shows up in the Production Tool and whenusers bookmark a page, so make it something descriptive.
START The right template Start up InDesignand open the included template file [FILENAME]. This is themain template for all design work in the Mag+ format. Ifyou want to add your own swatches and formats you do soby creating or importing them into your new document.
About the authorName Mike HaneySite www.popsci.comAreas of expertise DesignKnown for Popular Science’sContributing Innovations EditorWhat was the last CD youbought? Foo Fighters’One byOne
Downloadthe files! >All thefiles you
need for this tutorial
canbe foundat
netm.ag/mag-219
Read ourZinio edition! >Read .netmagaz
ineon
your iPadvia aZinio
subscription: see
netmagazine.com/
shop fordetails
.net technique indesign
3 Prepare your assets Prepare your image assetsat this stage. The images you want to switch should all beof the exact same size and resolution to avoid any issueswhen switching. Use Photoshop or any other editing tool,and save the files at JPEGs.
9 Basic layout In InDesign, create your layout,remembering to make allowances for the richerfunctionality and reader interaction. So don’t place toomuch stuff on top of the image you are defining as anHTML area. More on this in the next step.
6 Code writing Substitute the included image linksin the HTML document for the ones you just created. Thestring <img src=”assets/chair0X.jpg” /> should insteadpoint to your files. Also, change the viewport parameterwidth to the width in pixels for the images you’re using.
7 Test-run in WebKit Test-run your HTML documentin Safari or Chrome, since they give the best approximationof how this function will work on the iPad. The webviewwindows in Mag+ use the iPad’s built-in browser capabilities.But it still makes sense to test-run on the desktop.
5 Assets in place The folder [Changing Images]holds all your HTML assets. In here you’ll find the assetssubfolder. Place your prepared images, except for the132dpi version, in here. In the included HTML document wepoint to that folder, but you can change it to another folder.
11 Object type The image you dragged into InDesigncan now be set up as an HTML area. Select it and setObjecttype to HTML in the Mag+ plug-in. Click on File to choose thelocal HTML file you have set up. This will now use thatarea as a webview window for your HTML.
4 Make a copy At this stage, you should alsoprepare a layout version of the first image in thesequence by making a copy of it and then settingthat copy to 132dpi resolution, without changing thefile’s dimensions.
10 Drag and drop The 132dpi image you created inStep 3 is your placeholder for the replacement HTML file.Simply drag and drop it into your InDesign workspace. The132dpi resolution will show up at the correct sizein your document.
.net september2011 91 next>
8 Test-run on iPad You should also test run your HTML functionality in Mobile Safari on the iPad. The simplestway to do this is to use Dropbox’s public folder for a direct web link. For more on how to achieve this in a simple way,see the Expert tip on the next page.
.net technique indesign
12 To scale You can set your pinning options for theHTML just like you would with any other object. But thereare a couple of options, especially for the HTML object type.In this case, when we have defined an exact viewport sizewe can leave the Scale contents to fit box checked.
18 Include in issue Hit Refresh if you haven’tdone so already. You should now be able to see thevertical you exported within the separated Clipboardsection of the Production Tool, to the left-hand side ofthe programme.
14 Fast review Hit Fast Review to check out yourvertical on your iPad. The HTML and the included assets areexported to the device and are locally stored within the file.Test out your HTML functionality on the iPad. You’ll see thatthe placeholder image is just used for the lo-res preview.
13 Setup for review Set up your system forreviewing by starting your Mag+ Reviewer app on youriPad. Input the IP address from the Help field at the top inthe Reviewer app into the Push review to device field underthe Settings tab in the plug-in.
FINISH Creating order Drag that verticalinto the Content Verticals area and place in whateverposition you’d like. If you have multiple verticals you canpreview them all together at once by hitting Review Allor Review Selected.
17 New brand You may also have to go into Settings and create a new Brand. Go to the Filemenu and chooseOpen Brand Settings Editor. Click New and fill in the fields. Brand ID will show up in the filename of your final exportedMIB. For the MIB version, always choose the highest number. Hit Save, and then choose that brand from the menu.
Expert tip Check with Dropbox
If you don’t use Dropbox already, open afree 2GB account at dropbox.com. For thispurpose you’ll only need the Public folder,which will act as your web server. Anythingyou drop in the folder gets a URL you canuse to download that file from anywhere.
Copy your HTML folder into the Publicfolder of your Dropbox folder. Then right-click on the .html file and choose Copypublic link. This is now your HTML index file.
Send yourself the link, or write it directlyinto Mobile Safari on the iPad. Now you cancheck that your HTML works as it should.
<prev 92 .net september2011
15 Export to PT When you’re happy with whatyou see in the fast review, you’re ready to export yourvertical to the Production Tool and add it to your issue.Simply make sure the Issue folder is set up correctly andthen hit Export.
16 Production Tool Open up the Production Tooland then direct it to that folder.