iPhone productivity
by leon on November 28, 2008
As a web designer/developer having an iPhone helps to make being productive just that bit easier. Here are some of the tools and work-flows I use to achieve this:
Our company currently use Google Apps to provide email and shared calendar solutions. Since the iPhone is pre-configured with G Mail support I get access to my work mail via IMAP on the go. Whether I choose to read this or not is ofcourse another option.
Calendars
I use MobileMe for my personal calendar which is also synced to both my work iMac and home MacBook. As we use Google Apps for our calendars at work, I can view them by using NuevaSync. This is an externally hosted Exchange Server which offers Push notifications.
Contacts
Again I use MobileMe to take care of personal contacts and NuevaSync for anything work related. The ability to create a contact whilst out and about and then have that appear in Address Book is nothing short of brilliant.
Files
I use a number of tools to share files. For sharing things with clients I use DropBox which enables me to have a local folder which gets synced to ‘The Cloud’ so that my files are available anywhere in the world via a web interface or another Mac or PC. You can also share folders with other DropBox users to create collaborative folders.
As I have MobileMe I have also taken advantage of my iDisk for secure file backups. Download the iPhone apps MobileFiles and MobileDisk to access and download these files to your iPhone.
The first MobileFiles is my preferred choice as it allows you to download the files to your phone and has a much more polished interface. It also promises the ability to edit MS Office files on your device.
MobileDisk however does have a nice function that allows you to email the file as an attachment.
Back ups
I have created Automater tasks that will backup my address book contacts and save them to a folder on my iDisk, just incase some thing was to happen to my MobileMe sync process. This is also useful for backing up documents and other important files. My only gripe is that the transfer speeds for MobileMe are quite dismal. Instead I opt to use Transmit, which should automatically find your iDisk as long as you are logged in via the MobileMe pref pane in System Preferences.
Put simply Bento is a database app for Mac that allows you to create database to hold any kind of information you desire. It integrates with Address Book, Mail, and iCal so any tasks and contacts created in Bento are instantly available in the Apple apps and as such sync to my iPhone. There is no native iPhone client at present but hopefully this shouldn’t be too far away.
Put simply the iPhone is a great tool to enable you to make your office truly mobile
Flash, XML and foreign characters
by leon on November 20, 2008
The Scenario
You are creating a Flash project that feeds text in from an external XML file. The text is currently in English but there is a requirement that the text be changed to other languages.
The Problem
You have added foreign characters such as é, ü or ß and they don’t show up in Flash.
The Solution
Follow these steps below and all should be well:
Ensure that your XML document is formatted as UTF-8. If you are using Coda, it’s simple enough.
and that is also has the correct XML declaration in the header:
<?xml version=”1.0″ encoding=”UTF-8″ ?>
Ensure that you have a dynamic text box in Flash and that you have given it an instance name.
Ensure that the font you are using supports foreign characters.
Make sure that you embed the font and select the relevant glyphs. Use shift to select more than one set. It is also a good idea to manually add the specific characters that you need to embed. For example to add é on a Mac, hold down the Alt key and then the letter e. The accent will turn yellow and then press the e letter again.
Force file to download
by leon on October 28, 2008
A common issue with modern browsers is the fact that they have the ability to open many file types by default. This isn’t usually a problem, unless you want to make sure that a file is downloaded to a user’s desktop. You could zip the file, which usually forces a download, but what about times when zipping something is just an unecessary step (such as a vCard).
A simple trick is to use the script below to force the browser to download the file.
if ($_REQUEST["filename"] != “”) {
$filename = str_replace(“../”, “”, $_REQUEST["filename"]);
if ($filename != “”) {/*
this is where you set the base path and the file for security reasons.
*/
$file = dirname(__FILE__) . “/files/” . $filename;if (file_exists($file)) {
header (“Content-type: octet/stream”);
header (“Content-disposition: attachment; filename=” . str_replace(” “, “_”, basename($file)) . “;”);
header (“Content-Length: ” . filesize($file));
readfile($file);
die();
}
else {
//add function if file is not found here
}
} else {}
} else {}
To make it work add the above script to a page called something like download.php. Then add the name of the file as a querystring parameter as below:
<a href=”download.php?filename=podcast1.mp3″>Download File</a>
Browser & User interface templates
by leon on October 27, 2008
While creating mock-ups of sites its often useful so see what it will look like in a browser window. For this reason I have created a png of a desktop and mobile safari interface.
I find that this is useful for clients to get a better feel of what a site will look like and also as a designer to scale images and element blocks.
Below is also a simple script that will detect if a user if viewing the site from an iPhone/iPod touch and redirect them to a optimised version. It is always good practice to offer a link to the full desktop experience.
<script language=javascript>
<!–
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
location.href=’http://www.iphonefriendlyurl.com’;
}
–>
</script>
Also, check this out for creating iPhone user interface templates.
Top resources for web designers
by leon on October 24, 2008
This post is a collection of sites and tools that I find useful when designing sites and interfaces.
Coda – Probably the best code editor. Mac only i’m affraid.
Coda Clips – An online repository of code snippets that can be imported into Coda and used from the clips panel. If you don’t have Coda you can simply copy and paste the code into your code editing tool.
flCodr – Another online repository, but this time for actionscript snippets with the added bonus of having a custom panel for Flash to access code.
Smashing Magazine - Founded in September 2006, Smashing Magazine delivers useful and innovative information for designers and Web developers.
jQuery - jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
DevSnippets - DevSnippets serves as public gallery where readers can submit the best code and design snippets, tutorials and latest trends in the design blogosphere.
Noupe - NOUPE passionately delivers stylish and dynamic news for designers and web-developers on all subjects of design, ranging from; CSS, Ajax, Javascript, web design, graphics, typography, advertising & much more. Our goal is to help you communicate effectively on the web with an engaging website or functional interface.
Web Designer Wall - Web Designer Wall is all about design, ideas, web trends, and tutorials. It is designed and maintained by Nick La, who also runs N.Design Studio and Best Web Gallery.
Where is TwitterEagle?
by leon on October 21, 2008
It’s been almost a month since I announced TwitterEagle and there is nothing to show (apart from a logo).
Sorry about that, i’ve been rather busy and have not had much time to spend on the project.
Hopefully, in a month from now I will have something up and running.
Facebook style Flash interface
by leon on August 18, 2008
Here is my latest offering of notification alerts to Flash – a Facebook style pop up window that supports basic html formatting.
It seems that the power of Facebook is everywhere (just take a look at flCodr [try clicking on the download link]- its using the Facebox javascript code to create modal dialoge boxes).
I couldn’t resist creating my own version just for Flash. This one is a simple AS2.0 version that uses the tween and easing classes to add a bit of animation aswell.
Take a look at it here and come back for some info about how it works.
Setting it all up
When you open up the .fla you will see the following code on the actions layer:
stop();
#include “copyright.as”
#include “fb_actions.as”createFeedbackPopUpBox(“Facebook style pop up winodw”,65,82,”This is a nifty little Facebook style pop up window for your Flash applications that is really simple to implement!!<br><br>It even supports basic HTML such as <b>bold</b> and <ul><li>Unordered lists</li></ul>”)
The first include is the copyright notice and must be kept intact. If I see anyone using it online without the notice I will hunt you down and kill you (not literally, but I will be really pissed off!!). This script basically replaces the right click context menu and replaces it with a link back to this site. You can find more scripts for protecting your swf’s over at flCodr.
The second include contains the function’s that allow the thing to work. I could go through everyline but its pretty straighforward. The box is positioned according to the values passed into the function, the box is faded from 0 to 100% alpha, once the fade is completed the text is added.
To remove the opposite process is followed and the box is placed off the screen.
Arguably I could have used the attachMovieClip and removeMovieClip functions, but this is much simpler, quicker and eaiser.
Making it happen
To make the popup box just call the following function:
createFeedbackPopUpBox(title,xposition,yposition,bodyText)
title – This is the title that gets displayed, contained within quotes. it could easily be a variable name – just loose the quotes.
xposition – The X position of the window on the screen
yposition – The Y position of the window on the screen
bodyText – The string (requires quotes) or variable name that should be displayed as the body text, It can contain basic HTML such as bold, un-ordered lists and hyperlinks.
Thats it – nice and simple.
Grab the files here!
Extension update
by leon on August 18, 2008
Just a quick note about our sister site – flCodr.
There is an update available for the extension panel. Find out more about it here: www.flcodr.com/download.php
My first web app (sort of)
by leon on August 15, 2008
As you can see from the scree shot above, I have created my first iPhone web app. I say web app loosly as it doesn’ty actually do anything apart from tell you about me!!
There is some interactivity however – simply swipe your finger on the screen to move between different frames.
Try it on your iPhone or iPod touch (you need to be running 2.0 or higher).
Go to i.sizzla-media.co.uk
If you’re wondering how it was done – check this out.
As soon as I can be bothered ( and find a need to) I will create a proper working web app that actually does something useful, maybe an optimised version of my flCodr site for viewing Flash snippets on the go, although how useful that will be I don’t know.
If you’re reading this on an iPhone or iPod Touch then you will see the customised theme for iPhones.
Find me
by leon on August 12, 2008
My latest Flash based location app is called Find Me and is basically a mash up using Google Maps API, the GMap Flash component and a geo-ip script that tweets your location on Twitter.
Take a look at it here. Please note that is in beta at the moment. You will also need a Twitter account set up which can be done here.
To tweet your location simply enter your username and password and click on the green tick. When the app loads click on the little transmit icon at the bottom right.
Your information is stored on a cookie on your local machine and is not saved anywhere on my server. If you like just enter some random text and save the settings to overwrite your details.
The process involves a php script which geo-locates a users position based on their IP address. This should be noted that it isn’t 100% accurate as it relies on the IP of either the host machine, router or ISP. When I try this with BT it locates me in London even though I am in Birmingham.
The script outputs a latitude and longitude which I then use to place a marker on the GMap component. Look at this post for more info.
Finally by clicking on the marker the user can see the position aswell as the name and even more info by clicking on a link.
When I have had a play around with the Fire eagle API, I will add support for the Fire Eagle service. If you don’t know what Fire eagle is it basically allows you to update your location and then share that with other web services and apps. This is definitely going to be big business in the future with devices like the iPhone 3G and Nokia N95 having the ability to update your location automatically.
I would really like to build an app that would periodically update your status from an iPhone to Fire eagle, however i’m not too sure I would want people tracking me all the time!!