web
With so much upheaval in the news industry, it can be tough staying on top of new technologies. One of the biggest incentives for me to be on Twitter is to follow people and businesses that provide useful links for e-learning, and I have discovered many useful resources through Twitter.
So without further ado, here are a few of my favourite journalism sites on the web today.
Journalism coders
Hacks and Hackers is a digital community of people who seek to inspire each other, share information (and code) and collaborate to invent the future of media and journalism.
Sadly the meetups for this group are far away from where I live, but I follow its founders Burt Herman, Rich Gordon, and Aron Pilhofer on Twitter and find its Q&A site helpful. Have a question about media and technology, post it here and knowledgeable journalist/coders will jump in to help you out.
News University
Poynter’s newsu.org is a wonderful interactive journalism training site, and many of its courses are either free or cheap. (And we all know how much journalists love free stuff.)
I have taken some fantastic free courses such as Multimedia Reporting: Covering Breaking News, Video Storytelling for the Web and Online Project Development. I advise you to go and create an account, and to follow newsuniversity on Twitter.
The Nieman Journalism Lab
The Nieman Journalism Lab is a collaborative attempt to figure out how quality journalism can survive and thrive in the Internet age.
The J-lab’s Twitter stream is a great source of news about, well, news.
Recent stories include How The Guardian is pioneering data journalism with free tools, Calmness, curation, cat porn, and The NYT’s depressing list of most looked-up words
Lastly, a not-totally-journalistic site
I am going to throw in Read Write Web. I didn’t include it in the top 3 as it as more a general technology blog, but it has plenty of stories of interest to journalists and is well worth a follow on Twitter.
That’s my very unscientific list – what are your favourite journalism sites?
Zoomify lets you post high resolution photos to your website and creates panning style navigation.
Most times when you post photos online you try to make the files fairly small to ensure that viewers won’t wait too long to load the images.
But Photoshop’s Zoomify command lets you create pages with high resolution and panaromic images that are composites of smaller, faster loading jpegs, which greatly improves load time.
And it’s so simple to use.
Simply go to File>Export>Zoomify. The template field allows you to pick a colour for your interface.
The Base Name will be the name of the html file Photoshop creates for you.
Make a folder and select it to save your zoomified files in. Set jpeg quality – keep this high, you want your image to look good.
Set what size you want your browser interface to be (maximum width is 1000 pixels).
Make sure the Open in Web Browser box is checked to see your new creation immediately.
That’s all there is to it, just hit OK and your files will be created ready for upload – a zoomify viewer swf file, the tile group of small jpegs, an image properties xml file and the html file.
The interface will look something like this shot of a spring commute on Great Slave Lake. (You can zoom in and see a guy on the houseboat – is that Adrian?)
And lastly – don’t forget to add a target=”_blank” attribute unless you plan to add navigation to the page!
I am a big fan of the font Georgia, but sometimes have wistful memories of designing for print, those heady days when life was pretty much a what-you-see-is-what-you-get experience. There are many image replacement techniques, but these can suck up bandwidth and require hacks for viewers with text-only access.
So I was greatly interested to hear about Typekit, a subscription-based service for linking to Open Type fonts. This sounds like an excellent solution to accessing a broad selection of fonts on the web. While @font-face has enabled designers to use style sheets point to web font files, there is a major problem with this technique.
Almost all fonts are protected by copyright — even those available for free — and very few of them allow for linking via CSS or redistribution on the web. – Typekit
Font squirrel is another interesting (free) resource that offers downloads of hundreds of prepackaged @font-face kits. But this method offers no guarantees that the licence is valid for @font-face usage.
For more info on online typography, speckyboy.com has a wonderful collection of links: 50 Essential Web Typography Tutorials, Tips, Guides and Best Practices.
Is Creative Suite 5 worth the $899 US (Master Collection) for upgrade?
I think it just may be.
Its top 3 sweet features for me were:
- Built in CMS support to make themes and templates in WordPress, Drupal, Joolma.
- Take the pain out of rotoscoping with rotobrush in After Effects.
- And everyone’s been talking about Photoshop’s Content Aware Filter of course.
What new CS5 features do you think you’ll use the most?
Check out Adobe’s CS5 launch video for more info, or just head over to Lynda.com, it was adding CS5 tutorials even before today’s launch.
The most tedious part of the web development is the inevitable code>preview in browser cycle. That’s why Adobe integrated the Web kit rendering engine in DW CS4. Live View lets you run and render your page right within DW’s Design View.
This allows you to see the rendered code directly, without having to PIB.
Not only is the CSS rendering as it would in the browser, but you also get full javascript interactivity. Drop-down menus work, roll-over images roll over.
For cross browser testing, grab Adobe’s BrowserLab Extension, which gives DW CS4 users added functionality, such as testing local content and different states of interactive pages.
Wonder what Adobe will unveil at the CS5 launch April 12 … what would you most like to see in future releases of Adobe Creative Suite apps?
Internet Explorer has its own unique and dysfunctional way of interpreting the CSS box model of website layout. It is frustrating for web designers to find that a site, which looks so pretty in Firefox and Safari, has burst at the seams in IE.
One way you can minimize the pain of coding for IE is to structure the head of your HTML in a way that forces IE to run in standards mode, as opposed to quirks mode.
Quirks mode is triggered:
- when the doc type declaration is missing/incomplete
- if it’s HTML 3 or earlier, or if a system identifier is missing
- when a comment or other content appears before doc type
- when there are errors anywhere in the document
- in IE6 – when there is an XML declaration before a doc type declaration
A tutorial by Bill Weinman on lynda.com gives some sample code for the top of your HTML file that will force IE into standards mode:
If you still trigger quirks mode, check for errors in your HTML using the w3 validator.
Now you should have an error-free, standards triggering page that will render correctly in IE.
But to eliminate any nasty surprises at launch, always check your page. If you are on a Mac, IE NetRenderer is a useful resource, though it doesn’t seem to work for all sites. If IE NetRenderer comes up blank, try browsershots. It’s slow to render, but always gives results.
But for “Internet Explorer Testing Done Right,” try Parallels, which allows you to run Windows from OS X without rebooting.
Using these tools, you can be certain that all is running well in Internet Explorer land.
As a Mac user, I only recently downloaded Google’s Chrome browser.
The Mac version of Chrome doesn’t run extensions sadly. You need Windows Vista/XP SP2+ to access these goodies, at least for the moment.
Despite its lack of extensions, Chrome quickly became my default browser.
Although there are certain sites it had trouble with, I agree with Google’s promo blurb about Chrome. It does start-up and load lightening fast. And the search from the address bar feature is way better than typing into Firefox’s tiny search portal.
Developer Tools for Chrome
The best feature for developers is the Developer Tools found under the page icon to the right of the address bar.
Use this by pulling it up on the site you want metrics for. Check in Resources to see how long each element takes to load what the file size is.
Easily view CSS, HTML code and test JavaScript with an integrated debugger.
An article in Mashable says that Dev Tools is virtually identical to Safari’s Web Inspector. That may be true, but I can’t get Safari to play nice with Flash, so I have abandoned it.
And Firefox has some great extensions, such as Firebug and Web Developer, but that I find Firefox loads so slowly in comparison to other browsers.
What is your default browser? What do you think about the recent news – stemming from the Chinese hacks on a vulnerability in Internet Explorer 6 and Windows XP – that France and Germany have advised citizens to abandon Internet Explorer?
My first Kuler colour palette - Dettah iceroad. Made from a photo on Flickr.
Harmonious colour schemes can make or sink a project, so it’s best not to just wing it.
I have seen websites transformed from blah to beautiful with a simply tweak of css colours.
So when I spotted kuler, Adobe’s web-hosted application for generating color themes, I figured it might be worth checking out. It was.
Its Air app, kuler desktop, is great for instant colour browsing – you can search by key words and it will find thousands of suitable swatches for whatever mood you want (how many swatches it finds depends on how many users have tagged using that word). You can also flip through highest rated, newest, most popular and random.
Grabbing colours is a cinch, through copying html colour code or downloading an Adobe Exchange file.
Check out this Layers Magazine tutorial on how to integrate files into Creative Suite.
But if you have time, have some fun with the colour create and your own palettes. To do this, you’ll have to go to the kuler site.
Click on ‘create’ and choose from one of the six rules for colour harmony and begin to play with the sliders on the colour wheel.
The most fun feature for me was ability to upload or use Flickr photos to create palettes – my first palette is in screenshot above, it’s the colours extracted from a Dettah iceroad photo on Flickr. The warm and cool colours work well together, should I use this scheme on my new website …
Flash Catalyst, now in Beta at Adobe Labs, is described as:
A new professional interaction design tool for rapidly creating expressive interfaces and interactive content without writing code. Create interactive portfolios, product guides, microsites, site navigation, interfaces for RIAs and more.
You can download Flash Catalyst beta 2 at the Lab’s microsite. The beta 2 release adds support for video, sound effects, motion easing, AIR and more.
Adobe Flash is a fantastic product for video and interactive design, but coding in Action Script can be daunting to the novice user. Catalyst aims to give non-coders the chance to work on some interactive design and prototyping.
This product will be used to create projects for the student design competition at the Reynolds Journalism Institute.
One of the things we’re trying to help them figure out is how to more cost-effectively make more immersive, more interactive content that people will want to pay for or sponsor.
It will be interesting to see what the final projects when they’re presented at Adobe in May.
I recently re-discovered the Save for Web and Devices feature for Adobe. This used to be part of Photoshop but has migrated to Bridge for the CS4 edition.
The interface was a breeze, just go to Output tab, pick Web Gallery tab and add Site Info (explanation text, copyright and contact info), pick your Color Palette, Appearance, and even upload the finished product through a native FTP interface. What could be easier?
The Flash templates are sharp, and as easy to make as browsing to a photo folder.
But there are issues with using this for an instant gallery. Where are the options for captions? That’s a basic feature.
Worse, the site wouldn’t work on the server, only the desktop. I tried troubleshooting – changing the permissions on the directory – to no avail.
Has anyone else had these problem?
The CS3 photo gallery features doesn’t appear to have this problem, works fine online. But its gallery templates are ugly.
So I will be sticking with jquery options for photo display – until CS5?
