Rickroll To Go With PHP, WURFL, and Other Open Source Tools

Brian DeShongSeptember 16, 2008

Brian DeShong

Brian DeShongSenior Manager, Technology for Schematic

Brian DeShongSenior Manager, Technology for SchematicApplication and systems architect

Brian DeShongSenior Manager, Technology for SchematicApplication and systems architectDeveloper

Who is Schematic?

Full-service interactive agency

Who is Schematic?

Full-service interactive agencyOffices in Atlanta; New York; LA; San Francisco; Austin, TX; Minneapolis, MN; San Jose, Costa Rica

Who is Schematic?

Full-service interactive agencyOffices in Atlanta; New York; LA; San Francisco; Austin, TX; Minneapolis, MN; San Jose, Costa RicaSome clients include...

DellTargetDisneyNokiaComcastMTV

What are we talking about?

PC and mobile development are very different

PC and mobile development are very differentIdentifying devices with WURFL

PC and mobile development are very differentIdentifying devices with WURFLGenerating content for mobile consumption

Images, video, audioPHP, open source tools

Computers vs. Mobile Devices

Dial-up Broadband T1+, etc.6

EDGE 3G EVDO

EDGE 3G EVDO Proxy, no proxy

What is it?

Wireless Universal Resource File

What is it?

Wireless Universal Resource FileXML file containing characteristics of many mobile devices

What is it?

Wireless Universal Resource FileXML file containing characteristics of many mobile devicesOpen source

What is it?

Wireless Universal Resource FileXML file containing characteristics of many mobile devicesOpen sourcehttp://wurfl.sourceforge.net/

WURFL Examples

How can we use WURFL?

Lookup device by user agent

How can we use WURFL?

Lookup device by user agentDevice data indicates its capabilities

iPhone320x4803GP, MP4 video @ 320x240, 30 fps

Data offered

Display size

Data offered

Display sizeUser agent strings

Data offered

Display sizeUser agent stringsSupported audio, video, image formats

Data offered

Display sizeUser agent stringsSupported audio, video, image formatsStreaming capabilities

Data offered

Display sizeUser agent stringsSupported audio, video, image formatsStreaming capabilitiesHas QWERTY keyboard?

Data offered

Display sizeUser agent stringsSupported audio, video, image formatsStreaming capabilitiesHas QWERTY keyboard?XHTML, Ajax capabilities 12

Gotchas

wurfl.xml is ~8 MB in size!

Gotchas

wurfl.xml is ~8 MB in size!Not a great idea to parse it from front end

Gotchas

wurfl.xml is ~8 MB in size!Not a great idea to parse it from front endExtract data you need, place in database

Youʼll need a plan for updating from your source data

Use what you need

Display sizes

Use what you need

Display sizesRelevant video, audio formats supported

Use what you need

Display sizesRelevant video, audio formats supportedMIDP, CLDC versions supported

Handy in determining compatibility for applications

Use what you need

Display sizesRelevant video, audio formats supportedMIDP, CLDC versions supported

Handy in determining compatibility for applications

Bitmasks values are handy

Applying bitmask and DB

<?phpdefine(‘VIDEO_MP4’, 1);define(‘VIDEO_3GP’, 2);define(‘VIDEO_WMV’, 4);

// $videoFormats = 7;$videoFormats = VIDEO_MP4 | VIDEO_3GP | VIDEO_WMV;?>

id | manuf | model | video_formats----------------------------------1 | Nokia | N95 | 7

Using it from PHP

Itʼs just XML!

Using it from PHP

Itʼs just XML!SimpleXML, DOM, etc.

Using it from PHP

Itʼs just XML!SimpleXML, DOM, etc.Caching your lookups

MemcachedSQLite, other DBs

Using it from PHP

Itʼs just XML!SimpleXML, DOM, etc.Caching your lookups

MemcachedSQLite, other DBs

Lookup by user agent$_SERVER[‘HTTP_USER_AGENT’]Opera: X-OperaMini-Phone-UA

Summary and other options

Use WURFL responsibly and efficiently!PHP scripts on its websiteEmploy some caching techniques

Summary and other options

Use WURFL responsibly and efficiently!PHP scripts on its websiteEmploy some caching techniques

WURFL and other options are key to a great mobile experience

DeviceAtlas

Mobile Content Challenges

Some challenges

Varying amounts of bandwidth available

Some challenges

Varying amounts of bandwidth availableCostly data plans

Unlimited vs. per-MB/GB

Some challenges

Different capabilities across devices

Some challenges

Different capabilities across devicesLimited memory in devices

How to workaround them

Serve content tailored to userʼs deviceEfficient use of resources and bandwidthDetermine if a given piece of content will work on the device before download

How to workaround them

Serve content tailored to userʼs deviceEfficient use of resources and bandwidthDetermine if a given piece of content will work on the device before download

Hope for the best!User will sort it outIt will work or it wonʼt

To be fair...

None of this may be relevant in a few years

To be fair...

None of this may be relevant in a few yearsMobile browsers and devices are evolving

To be fair...

None of this may be relevant in a few yearsMobile browsers and devices are evolvingLow-end devices are prevalent in many parts of the world

Who is your audience, and where are they located?

Tailoring Content for Devices

My Personal Approach

I pre-generate files and write them to disk

I pre-generate files and write them to diskI can rely on them being in place when making decision

I pre-generate files and write them to diskI can rely on them being in place when making decisionImages:foo_240x320.jpgfoo_320x240.jpg

Video:foo_176x144.3gpfoo_176x144.mp4

Audio:foo.aac

Images

Optimizing image delivery

User visits site

Device identified?

User visits site

Device identified?

User visits site

Device identified?

Optimizing images with PHP

Graphics extensions availableGDimagick (ImageMagick)

Optimizing images with PHP

Graphics extensions availableGDimagick (ImageMagick)

Command-line ImageMagick binaries

Using imagick

$imagick = new Imagick();$imagick->readImage(‘/astley/rick.jpg’);

Example

Source Image: 507x398

Example

Thumbnailed image: 240x188

Example

Thumbnailed image: 240x188

$imagick->thumbnailImage(240, 0);

Example

Cropped thumbnail image: 240x320

Example

Cropped thumbnail image: 240x320

$imagick->cropThumbnailImage(240, 320);

Gotchas

Generating images on-demand is expensive

Gotchas

Generating images on-demand is expensiveKeep it cheap and/or infrequent

Write the different sizes to disk; routine cleanupMemcachedPre-generate them

Summary

Serving image tailored for deviceUses least amount of bandwidth possibleUses device resources efficiently

Summary

Be smart with the server-side implementation!

Summary

Be smart with the server-side implementation!Less complex than dealing with video, audio

Video on mobile devices

Most devices canʼt play the formats weʼre accustomed to on PCs

Most devices canʼt play the formats weʼre accustomed to on PCs3GP is widely supported

Most devices canʼt play the formats weʼre accustomed to on PCs3GP is widely supportedMPEG-4 on newer devices

Optimizing video delivery

User visits site

Device supports MPEG-4 video?

User visits site

Serve3GP

User visits site

Serve3GP

ServeMPEG-4

User visits site

Serve3GP

ServeMPEG-4

Max video resolution?

Mobile Video Sites

Optimizing for mobile

Lower resolution176x144, 320x240

Reduce video frameratePlayback looks jerkyBut it requires less bandwidth!

Reduce bitrates35

FFmpeg, Mencoder

FFmpeg, MencoderOn2 Flix Engine for Flash (commercial)

FFmpeg, MencoderOn2 Flix Engine for Flash (commercial)Anystream Agility

FFmpeg, MencoderOn2 Flix Engine for Flash (commercial)Anystream AgilityCommercial tools to read Windows Media, other DRMʼd formats

Expense

Generating videos is not cheap

Expense

Generating videos is not cheapShould not be done in real time

End user will have to wait for it!

Expense

Pre-generate with an offline processStore them on diskPurge when and if needed

Expense

Pre-generate with an offline processStore them on diskPurge when and if needed

Weʼll look at FFmpeg shortly!

Audio on mobile devices

Devices have been playing MP3s for years now

Devices have been playing MP3s for years nowWider support than video

Devices have been playing MP3s for years nowWider support than videoMP3, AAC formats are well supported

Optimizing audio delivery

402921

User visits site

402921

User visits site

AAC audio

supported?

402921

User visits site

AAC audio

supported?

ServeMP3

402921

User visits site

AAC audio

supported?

ServeMP3

ServeAAC

FFmpeg

FFmpegTiMidity++ (MIDI to PCM)

FFmpegTiMidity++ (MIDI to PCM)Note:

Iʼm not dealing with MP3 licensing issues here!

Expense

Again, generating audio isnʼt cheap

Expense

Again, generating audio isnʼt cheapShouldnʼt transcode in real time

Expense

Again, generating audio isnʼt cheapShouldnʼt transcode in real timePre-generate in an offline process

Expense

What can we use?Surprise! FFmpeg! 42

What’s this FFmpeg stuff?

Basics

Decodes and encodes audio and video streams

Basics

Decodes and encodes audio and video streamsMany A/V formats supported

Basics

Decodes and encodes audio and video streamsMany A/V formats supportedSupports use of external libraries to handle additional formats

Basics

Decodes and encodes audio and video streamsMany A/V formats supportedSupports use of external libraries to handle additional formatsRuns on many platforms (Windows, OS X, Linux)

ffmpeg [[infile options] -i infile]... {[outfile options] outfile}...

45ffmpeg -h: 504 lines!Extensive amount of options for both audio and video

ffmpeg [[infile options] -i infile]... {[outfile options] outfile}...

45ffmpeg -h: 504 lines!Extensive amount of options for both audio and video

FFmpeg: Video

Notable video encoding options

-acodec: audio codec to use

-vcodec: video codec to use

-s: frame size

-r: video framerate

-s: frame size

-r: video framerate

-b: bitrate

-s: frame size

-r: video framerate

-b: bitrateffmpeg -i rr.mp4 \ -acodec libfaac \ -vcodec h263 \ -s 176x144 \ -r 12 \ foo.3gp

Examples

320x240MPEG-4, AAC

30 fps244kbps6.2 MB

Examples

320x240MPEG-4, AAC

30 fps244kbps6.2 MB

176x1443GP, AAC

30 fps90kbps2.3 MB

Examples

320x240MPEG-4, AAC

30 fps244kbps6.2 MB

176x1443GP, AAC

30 fps90kbps2.3 MB

176x1443GP, AAC

8 fps63kbps1.6 MB

Grab screenshots!

$ ffmpeg \ -i rr.mp4 \ -f image2 \ frame%2d.jpg 49

FFmpeg: Audio

Notable audio encoding options

-ar: audio sampling rate

-ab: audio bitrate

-ac: number of channels

-ab: audio bitrate

-ac: number of channels

ffmpeg -i iib.mp3 \ -ab 64000 \ -ac 1 \ foo.mp3

Examples

Original:128kbps4.1MB

Examples

Second Clip:64kbps

2.05MB (1/2)

Examples

Second Clip:64kbps

2.05MB (1/2)

Third Clip:32kbps

1.025MB (1/4)

Examples

Second Clip:64kbps

2.05MB (1/2)

Third Clip:32kbps

1.025MB (1/4)

Final Clip:8kbps

1.025MB (???)

FFmpeg Summary

Powerful tool!

FFmpeg Summary

Powerful tool!Takes a lot to master it

Probably makes more sense to A/V experts

FFmpeg Summary

But itʼs easy enough to get the job done right

FFmpeg Summary

But itʼs easy enough to get the job done rightIts manpage is your friend!

In Closing...

Mobile is tricky!

All of those combinationsDevicesProvidersBandwidth / data plansCapabilities

Mobile is tricky!

Use resources efficiently56

Mobile is tricky!

Use resources efficientlyOptimize the experience for the end user 56

Resources

WURFL: http://wurfl.sourceforge.net/

Resources

WURFL: http://wurfl.sourceforge.net/FFmpeg: http://ffmpeg.mplayerhq.hu/

Resources

WURFL: http://wurfl.sourceforge.net/FFmpeg: http://ffmpeg.mplayerhq.hu/ImageMagick: http://www.imagemagick.org/

PECL extension: http://pecl.php.net/package/imagick/

For more information, please see me or visithttp://www.schematic.com/#/JoinUs/

It goes without saying: Schematic is only as good as the people who work here. That’s why we’re so particular about recruiting, training, nurturing, and retaining the very best people in our field.

If you have digital expertise (technical, creative, managerial–or something else entirely), enthusiasm, curiosity, and the ability to collaborate with others, we’d love to hear from you.

We’re Hiring!

Thanks!

http://www.deshong.net/http://www.schematic.com/

brian@deshong.netbdeshong@schematic.com

Thanks!

http://www.deshong.net/http://www.schematic.com/

brian@deshong.netbdeshong@schematic.com

Rickroll To Go With PHP, WURFL, and Other Open Source Tools

Technology

WURFL and WALL - World Wide Web Consortium (W3C)

PHP Basics (See PHP on line manual at: PHP - Overview Scripting vs Programming Code Examples – PHP; Perl; JSP PHP Strengths

PHP Development - Introductionmhughes/Lectures/PHPDevelopment1.pdfPHP Development - Introduction . Php Hypertext Processor • PHP stands for PHP: Hypertext Preprocessor • PHP is

Thinking of business website? Go for PHP or Wordpress

Energy Regulatory Commission · Prtce Amount PhP Amount Amount Amount PhP PhP PhP PhP COMMON OFFICE SUPPLIES PhP PhP Ball IntPen fioe int black 5.00 500 2500.00. 1300 ... Portable

PHP 7,377++ PHP 6,968 ++ PHP 6,558++ - The Lind Boracay

HOW TO CREATE A PERSONAL HISTORY PROFILE IN INSPIRA … · HOW TO CREATE A PERSONAL HISTORY PROFILE (PHP) IN INSPIRA 8 4 Building a PHP 4.1 Creating a New PHP 1. Go to the Inspira

PHP PHP: Hypertext Preprocessing

How things can go wrong? How to prevent the disaster? Writing Secure PHP Applications

PHP Without PHP—Automattic

Why You Should Go for PHP in 2015?

languagesfun.comlanguagesfun.com/French/php/resources/KS4/reference/ExamquestionsY11stw.pdfPersonal information Had a go Nearly there Cl Nailed it! TV programmes Had a go Nearly there

PHP Certified training Coimbatore|PHP institutes Coimbatore|PHP certification

Weaving aspects in PHP with the help of Go! AOP library

для профессионалов - Joker › presentations › 02_06... · Python Lua Go C Groovy PHP. ... требуется переосмыслить основы Технически,

Go from PHP engineers perspective

Go nuts with Go and PHP

Republic of the Philippines - San Fernando City · Amount of Bid PhP 1,633,940.79 PhP 1,637,512.45 PhP 1,638,799.86 Bid Security Amount PhP 85,000.00 PhP 85,000.00 PhP 85,000.00

Migrate PHP E-Commerce Site to Go

Go from a PHP Perspective