Lucky me, I get to spend the Saturday after a rather annoying/stressful (but thankfully short) work week trapped in a hotel for 12 hours hacking HTML5! What have I done? As long as I get there in time for some breakfast, I’ll consider it a success. Wait, that’s a really low bar…

My “entry” to get into the hack-a-thon can now be seen here as a portfolio piece, yay!

Note the attempt at responsive design (resize your modern browser) oooh!

For the past 2 weeks, I’ve been mind-melding/brain-dumped-on receiving knowledge transfer from the inimitable Sacha Chua. Now I kind of feel like Neo from The Matrix after he’s had his brain loaded with all sorts of martial art forms. It’s been a whirlwind of project info, tools, and efficiency techniques. Today has been a reminder of everything I love about CS…

What we’re playing with:

• Drupal
• Redmine
• VMWare
• Ubuntu, Samba
• AutoHotkey

Oh the possibilities for automation while writing CSS :O Example:
Saves my file, switches over to Chrome and reloads the page all with one key press!

F6::CheckCSS()
CheckCSS(){
	Send ^s
	Sleep, 3000
	WinActivate ahk_class Chrome_WidgetWin_0
	Send ^r
}

It was a lot more difficult to get a compiler going in Windows, and I’m not sure if my roundabout way of doing it is ideal.

The following needs to be installed:

• Git (I just used the mysysGit that was somewhere in the plugins directory of Aptana3, which requires git to be included when installed)
• Node
• npm

1. After the first two are installed, make sure to add the bin directories to the PATH environment variable of your system.
2. Make sure you run the following git commands in the directory where you want npm to be installed (inside the node directory). Reference

   git config --system http.sslcainfo /bin/curl-ca-bundle.crt
   git clone --recursive git://github.com/isaacs/npm.git
   cd npm
   node cli.js install npm -gf
   

3. $ npm install less
4. Find lessc.exe and you can now compile .less files into regular .css via command line as described on lesscss.org
   $ lessc styles.less
   This works:

   C:\node\node_modules\less\bin>node lessc test.less

• Getting started with SASS
• Rolling with Ruby on Rails

I simply could not understand how to install SASS. Surely there was more to it than:

1. installing Ruby with the Windows installer
2. running the commands posted on the above sites (eg. “gem install sass”)

Like, wasn’t there a step missing in there somewhere about downloading SASS/Rails/HAML before running those commands??

Apparently not.

I was so floored. There’s some magic happening there. I’ve not been so impressed with a language intepreter/compiler install since WampServer…

:O

iTunes app store = 66% paid apps

Anroid market = 66% free apps, far more difficult to make money through monetizing on Android due to billing issues (more cumbersome than one-click iTunes purchase).

Better to provide free app in marketplace, and charge for premium features, through in-app sales, rather than having both free and non-free app which will split ranking across multiple apps in marketplace.

strategy is to get users hooked first with free app, then make them “pay for their addiction”

Tackling the Challenge of App Discovery: Gary Yentin

319,000+ apps in Android marketplace

450,000+ apps in iPhone app store

• Bloggers are your friends
• Try UK market
• Xmas season starts Nov. 1st. Get the marketing out there early
• Target user group with mobile advertising (time of day/week)
• app store description is usually the first p.o.c. and very important.

Leveraging Roger’s Wireless cloud services. eg. Enable one-click purchasing.

Client – Rogers Network – Server
CTN = Customer Telephon Number
Catalyst: Location, Billing, SMS APIs; making capabilities available to your apps

Free to dev. but Pay-per-use of transaction model

www.RogersCatalyst.com

Location API Find the Location of ANY Rogers Phone Number (Roger’s takes care of Customer’s Privacy) Can use instead of GPS location. More feature rich than just Google location API.

Android and the Azure Cloud: Atley Hunter, Microsoft

Why Phone + Cloud?
Cross device.
Platform as a service. Dont have to worry about scalability, O/S patching.
Hosting payment: Utility billing = scales to usage.

Identity
custom, 3rd party one-login
Storage
SQL Azure, relational DB managed as a service
Windows Azure Tables, non-relational, massive scale-out
Windows Azure Blobs

Services
Web Role – IIS
WorkerRole – background process

Windows Azure Toolkit for Android http://bit.ly/qG5twZ

Android Tips and Tricks: Joe Lallouz, Hashable

Hashable: Lightweight CRM, save & remember people who you meet.

Naming conventions. No nested directories in res folder
make resources easier to find. eg. icon_<image name>

Design for:
Screen Densities & multiple sizes
Orientation switching
Touch Input

Dashboard style navigation

Action Bar Design Pattern
back button (people don’t know to press the softkey on the phone?)
refresh buttons
overflow button (people don’t know to press the softkey on the phone?)

ViewPager
swiping

Honeycomb forward -> ViewPropertyAnimator
animation. think jQuery animtations

Intents
Register intent filters in the manifest!
To open your app natively to bring people into your app more often.

ContentProviders
Sharing data outside your application
Create maintainable api for other apps
Use managed cursor loaders

Fragments
Reporting with Flurry, Acra
automatic error reporting

Use SDK Tools: logcat, layoutopt, hierarchyviewer, Monkey, Strict Mode

Design for offline
Leave the UI thread alone
Beta test on the market
Register company package – put it up on marketplace to hold the name

* Always assume your task can be interrupted
* Battery life

Watch the Google I/O videos

Drag down to refresh = Custom components, google it on github

+ Offline storage
Cache Manifest:
state files needed to cache to be available when no internet connection.
Can trick the browser into downloading new version of manifest version
<html manifest=”"> attribute
Use JS to detect when manifest has changed

Twitter web app sticky menu bar done through javascript.

+ 37 signals web app

Example:
Tools
Batman.js MVC framework (written in CoffeeScript compiles into JS…)
+ rendering HTML adds additional attributes to DOM
Skeleton CSS: 960 grid, responsive design for multiple resolutions
View = HTML

Flex Framework Development: Matthew Fabb, StickerYou

(PhoneGap acq.) can now compile SWFs to run on all mobile platforms.

Apple iOS can run AIR applications.
Android both Flash & AIR; Chrome OS & Google TV support Flash only.
Future: BBX supports both, Windows Phone ?

Air 3 -> Air Native Extensions (ANE) = Native code can be combined with an AIR app
AIR app to access any API
=> ANE file is compiled separate then compiled into AIR app

ANE can be bundled into hardware

Flash Builder 4.6 will have built in ANE support

Captive Runtime = AIR runtime can be packaged inside of an AIR app. Android doesn’t have to download runtime separately.

Building for Air 3.01 will be integrated in FB 4.6.

Future of AIR
Photoshop Touch built in AIR
Flex (= open source framework for creating Flash applications)
CSS: can have dpi/OS specific styling/skinning
FB: design view for multiple devices
:debug on device through USB

NFC: Tapping Into The Future: Matthew Patience / Greg Carron (MobiCartel)
@pixeladdikt @MatthewPatience

NFC = Near Field Communication; proximity communication with the chip in your phone
tap/swipe NFC sticker

Current examples: Visa payWave, MasterCard paypass

Android 4.0 – APIs for NFC slowly integrated over time through the Android versions. First in 2.3
Android Beam application that does NDEF push.

NXP = hardware manufacturer for chips. used to be in feature phones (Japan)

Expected by 2015(?) 40% of all handsets will have NFC. Phone Manufacturers are pushing it out.

ISIS: loyalty programs, coupons

Google Wallet = App, put your CC’s in your device and choose your payment method
Google Offers = push discounts to your phone and use with Google Wallet

PayPal = touch phones to transfer money

Other Examples:
Grocery stores, text to speech
Transit systems
Medical history

Not only for mobile payments:
access control
accessory pairing = connecting two devices quickly/easily (eg. instead of bluetooth)
media sharing, smart posters
ordering systems, menus in restaurants

Adobe Air3 ANE plugins for NFC development

Open Accessory Developer Kit IOIO using Arduino

Q&A:
NFC standards are still being forged
How much content can you have in a tag? kbs, can write xml to it
Can buy tags online/customize them. NXP Tag Writer can erase/write to each tag.
Tags can have specific URI to open a specific app.

]]> http://www.regany.com/?feed=rss2&p=343 0 http://www.regany.com/?p=340 http://www.regany.com/?p=340#comments Wed, 19 Oct 2011 19:24:09 +0000 Regan http://www.regany.com/?p=340 This month, I’m porting wiki content from one wiki system (Confluence) to another wiki system (Lotus Connections). I started building a screen scraper in PHP by cobbling a bunch of code together. Why PHP? Because it was already on my system and there isn’t time to learn how to do it in anything else.

References:

• JavaScript can be used with a proxy
• PHP screen scraper in 32 seconds

There’s a specific Xpath that I need to extract out of the old system. It’s not like I need the whole page. At the moment it loads a URL and extracts the first instance of a class name and saves it to file.

<?php
$url = ''; //URL to scrape goes here
$filename = substr(strrchr($url, "/"), 1).'.html'; //last directory as filename

$doc = new DOMDocument;
@ $doc->loadHTMLFile($url);
//if you don't wanna see warning put an @ infront of the line above

$tagName = ''; // tag name that contains section to extract
$attrName = 'class';
$attrValue = ''; // class name of section to extract

$html = scrape($doc, $tagName, $attrName, $attrValue);

// write the extracted HTML to file
if (!$handle = fopen($filename, 'w')) {
	 echo "Cannot open file ($filename)";
	 exit;
}
// Write $somecontent to our opened file.
if (fwrite($handle, $html) === FALSE) {
	echo "Cannot write to file ($filename)";
	exit;
}
echo "Success, wrote ($html) to file ($filename)";
fclose($handle);

// http://www.php.net/manual/en/domdocument.getelementsbytagname.php#100228
function scrape($dom, $tagName, $attrName, $attrValue){
    $html = '';
    $domxpath = new DOMXPath($dom);
    $newDom = new DOMDocument;
    $newDom->formatOutput = true;

    $filtered = $domxpath->query("//$tagName" . '[@' . $attrName . "='$attrValue']");
    // $filtered =  $domxpath->query('//div[@class="className"]');
    // '//' when you don't know 'absolute' path

    // since above returns DomNodeList Object
    // use following routine to convert it to string(html);
        $myItem = $filtered->item(0); // only first one
        $node = $newDom->importNode( $myItem, true );    // import node
        $newDom->appendChild($node);                    // append node

    $html = $newDom->saveHTML();
    return $html;
}

?>

Ideally I’d update it to include the following:

• Read in file/list of URLs instead of having it hard-coded
• Find and replace all styles used on the old wiki to use the new styles/layout for the new system.

Anyway, my goal was to try and create a text effect that looks like a long perspective shadow or reflection. Apparently reflection is easy, but the perspective is not. Webkit’s description of the perspective/origin property finally clicked in my head. The example’s not bad either, but for some reason it was still hard to get what I wanted.

I got as far as this:

Not as long as I hoped since I guess I’m just rotating about the X-axis and anything that is not 0 or 180 degrees is not even going to be full height. ScaleY(-1) will probably work better and then skewing for height… hmm…

Read the lessons learned.