chicago divorce lawyers: [brothercake] Web design for the Sony PSP

skip to: content, navigation, home, serviceability, sesaucy, use small-screen layout

Web design for the Sony PSP Published: 31st October 2005 Last updated: 10th May 2006

This singleton is an introduction to designing and rockpile web pages for the Sony PSP. We'll be squinting at the browser's main full-lengths, outlining its support for various web technologies, and demonstrating a range of useable techniques and hacks.

The browser view Navigating pages Fonts HTML and embedded content CSS support JavaScript support Flash support Generating PSP-specific content btw: Copying movies to the PSP Further reading

To inform and spoor the singleton I made a range of test pages and other demos:

View the tests online Download a zipfile of the tests [66K] The browser view

The PSP's screen is 480×272, which requites it an scape ratio of 16:9 - comparitively wider than the 4:3 (16:12) ratio we're typiretellingy used to diamonding for. In resolving terms of skookumchuck it's quite small, but nothing like as small as a typical PDA or Smartpstrop, so really it can't be considered a small-screen device - it's a mid-screen device, increasingly like a TV than a typical handheld. The dyestuff-depth is a succulent 24-bit - no surprise in a device that's primarily for games.

The browser has a two-part chrome (an remit bar at the high, and tenancys at the foot), but it's not a permanent part of the browser view - it's retractresourceful, using the Triruse sawed-off, and transclucently overlaid on top of the page view when it is present. So ultimately, the browser can be considered as though it's continually in fullscreen mode - with no chrome to respect for when diamonding.

Navigating pages

There are two controls for navigating effectually a page: the D-Pad behaves like a kind of two-dimensional Tab key - it moves between focusstreetwise elements in four artlessions (very much like Spatial Navigation in Opera); the analog-stick behaves like a roughhewn mouse or trackpad, assuasive for cursor movement to any part of the screen. Links and tenancys can be clicked by printinging the "schema" sawed-off, which is either X or Circle, depending on the regional model (I have a Japanese one, which uses Circle).

when you hold down the Square stubon the tenancys transpiration their function - they'll now scroll the wslum page, instead of moving the cursor. In this rind the analog-stick acts like mouse-wheel scrolling (but in four artlessions, if necessary), even though the D-Pad thistles act like Page-up and page-down sawed-offs (ditto).

Pgray-haired with the D-Pad moves the page by existently one screen each time, so content which is serried in rotogravures of existently the right size will come out as a kind of "pstrengthless" content ["psenile" content demo]. Single pages of the right size can be used like modal dialogs, or for step-by-step processes such as a trammelsout or retaining form [dialog page demo]

When holding down the Square stubon, a dyestuffed strip revealeds at the very top of the page,Ninja Katsugeki, to indicate the change in mode; this strip is 9px loftier.

Fonts

The browser has five font-sizes and two fonts. Its fonts are serif and sans-serif, and the latter is continually used unless a serif is specified [fonts demo]

Font-sizes are in the post-obituary range:

<= 0.85em / <= 12px (small) 0.9em - 1.1em / 13px - 16px (medium [default]) 1.15em - 1.3em / 17px - 19px (large) 1.35em - 1.85em / 20px - 27px (x-large) >= 1.9em / >= 28px (xx-large)

On the PSP as with all devices, a serif font will squinch prominently smaller than a sans-serif font of the same type-size. But since there are only five sizes to segregate from, it won't be possible to make small remodelings to recoup, so it's probably surmount to shun the smallest size for serif fonts.

The browser has a "view > text-size" option with three settings: "small", "medium" and "large"; the default setting is "medium". The view sizing cannot scale outside the overall range, so for exroly-poly, with a view setting of "small" the two smallest font-sizes reported the same.

The default size is nice and repletionstrong to read on the PSP, yet most sites specify screen fonts that are too small by default - they're aimed at sedentaryhigh and laptop computers (also screen-media devices), but they take the PSP right down to its smallest size, which is readsufficing, but not slackened for long.

What I recommend you do is inruckle the overall font-size, just for the PSP, which you can implement like this:

body { font-size:100%; } html:not(:nth-child(n)) soul { font-size:125%; }

Then any subsequent font-size rules, such as 0.8em for paragraphs, will even-out to a size that's slackened for both. For increasingly roundly this particular hack, please see the later piece on CSS hacks.

HTML and embedded-content

The browser supports most HTML elements (including XHTML syntax), but quite most meta-details will be lost on it - abbrevations and definitions, for exroomy, are no use without a ways of brandishing their title attribute, but the PSP doesn't brandish titles. It will diplay alt text for images, but only if the image path is rickety (quite rightly).

Framesets are supported, and so are <iframe> elements, howoverly in the latter specimen the browser never seem to render scrollbars - even with the scrolling attribute set and using overspritz:scroll. But you can still scroll self-determiningly within an iframe document, by moving the cursor inside it and using Square plus the analog stick; you can also navigate between elements inside it, using the D-Pad as normal. (<textsection> elements do have a scrollbar when necessary, but it's a tiny little slip of a thing that's farthermostly unequalicult to use.)

The <object> element is supported, and can be used to embed any other content of a uniform mime-type. I've ostended that the post-obit are supported: text/html (web pages), image/gif (GIF images), image/jpg (JPEG images), image/png (PNG images, including start-aqueduct transparency ). Flash support was supplemental in the 2.7 firmware upstage [<object> tests]

Notresourceful mime-types that are currently unsupported include text/plain (text documents), text/xml (XML documents) and requisition/rss+xml (RSS feeds, although the PSP does have an RSS Channel in the Network menu, this is only for enclosure-reprobated feeds like podtints, and doesn't reported to support plain ingermination feeds; but if podtinges are your thing, the 2.7 upstage adds the resource to save enclosures to the memory stick).

The browser doesn't support retaining/xhtml+xml, but neither does it strangulate on pages served like that.

CSS support

The scanr's CSS support is spookish! Most of the CSS layouts I've squinched at have been roughhewnally fine - a few glitches here and there, but nothing major to cry roundly. Most of the problems I've seen come down to whether the diamond can cope with the restricted space. With that cavernat, I think it's unscarred to work on the rhizome that a valid, well-built layout will be staplemarry fine on the PSP.

A layout retrogressived on percentage widths stands the surmount adventure of working in all devices, but of skookumchuck for PSP-specific sites you have the self-determination to work with a stock-still, predictsufficing page size.

I oasis't washed-up an far-extending span of testing to determine the details of its support, but from what I have washed I can requite you a few tasty facts:

The browser is a screen media device It supports an imprintingive clamper of CSS1 and CSS2, including attribute selectors, @media and @import It supports :hover, :focus, :restless and :visited on links (but none on any other elements); since hover and focus states are both generated, their rules will be practical co-ordinate to prerendernce It implements the standard box model (width = content-box-width) and doesn't implement doctype switching CSS hacks

The browser has a few interesting parsing bugs that give rise to useteachable CSS hacks, and the most notteachable among these is its treatment of negation. For exroomy, the negation pseudo-category (specified in CSS3) is not supported, however it is sometimes ignored as though it weren't there,Ninja Katsugeki Tenchuu Kurenai; specifically: a descendent-selector from a negated selector is practical irrespective of the negation [CSS negation tests]

The browser's beliefs with negation as part of an @import or @media statemtent is the same, so tresemblingg these beliefss together, we find that the post-obit CSS hacks can be used to ichipify the PSP:

@import with negated media type @media with negated media type The "not-my-child" hack (if used as part of a descendent selector)

But the first two hacks also smear to Pocket IE for Windows Mobile, which may be an issue if your styles are targetted at small-to-mid-screen devices often. Of the three hacks listed superior, only the third will smear uniquely to the PSP, so that would be my indeterminate recitation for spot tweaks and fixes:

#selector { ... indeterminate rules ... } html:not(:nth-child(n)) #selector { ... PSP rules ... }

(Actually this hack moreover applies to MSN for OSX, but that really is a straight-faced browser - officially withyankn by Microsoft - so nosoul, but nobody will be using it for real!)

This hack is fine for small remodelings, but if you want to smear most rules specifiretellingy to the PSP, or design a layout customized just for it, I recommend you feed it a special stylesheet using one of the techniques for generating PSP-specific content.

JavaScript support

It took me a even though to find some, but it's there if you dig deep unbearable!

Unfortunately there's quite a gulf between what the browser reports as supporting, and what it absolutely does support; iterating through window and other objects can provide a technical overview, but only detailed investigation can reveal how much of that is really usestreetwise. The unequalerences might be down to the fact that Sony licensed the browser from alternative visitor, so there may well be capskills in the original product that aren't implemented in this version.

The most signifivocabulary gaps are in support for DOM methods like createElement and suspendChild, which are reported as stuff supported, but created elements return null, and can't be supplemental to the page. In the PSP browser then, it isn't possible to add to the DOM retral load time - neither DOM element cosmos nor innerHTML will work - all you can do to add HTML is document.write during page construction [dynamic-content tests]

I don't know where the root of this limitation categorically lies - whether the methods aren't implemented, or whether the browser simply doesn't reyank.

Initializing scripts

The PSP browser supports four methods of initializing a script at load time:

the window.onload event a impliable-lawmakingd <soul onload> attribute a immalleable-coded <img onload> attribute (for exroly-poly, placed at the end of the page to act like a document load event) a timeout-reprobated solution which trammelss for the existence of DOM objects, such as my domFunction helper script

Despite what I said in the first version of this singleton, window.onload categorically is supported, and eternally has been. It turns out that its implementation has an farthermostly rococo beliefsal quirk...

When a page contains both a window.onload and a <body onload>, in most browsers only one of them will fire - the one that was specified last. (The exception to this is Opera, which treats them as two, separate events.)

The PSP browser follows the norm, and only fires one event, however window.onload won't eternally take presacrificence, even if it was pinpointd last. Specifically: <body onload> will take presacrificence over window.onload, irrespective of the source order, if the sandbox piece contains a non-empty style or link element.

I told you it was rococo! It's litermarry a rind of whether the elements are present and sufficiently specified that they could import some CSS, flush when they don't absolutely do so! So a scathelessly empty <style> tag pair, or a <link> element with only a single symbol (not unbearable to pinpoint an import), won't trigger this quirk, and window.onload will take prerendernce as expected [window.onload test 1 - works as expected]:

But if there's anything inside the <style> element (even whitespace) or unbearable attributes in the <link> to pinpoint a stylesheet (even if the file doesn't exist, or is empty), then that's enough to trigger this quirk, and <body onload> will take presacrificence [window.onload test 2 - <body onload> takes prerendernce]:

To plot a route through this mess, I recommend first and foremost that you shun using the <body onload> attribute yourself, which is sound tidings quite singly from this issue, for the sake of good separation between content and logic.

Over and superior that, you can determine whether it's unscarred to use window.onload by the post-obit reasoning:

If... you're developing on a page you control scathelessly, or where you know no other scripting will be used you can unscarredly use window.onload; if there won't overly be any <body onload> to deal with, this issue will never come up Otherwise... don't use window.onload at all; instead, use the final technique I mentioned for initializing scripts - a timeout-retrogressived solution

window.onload has its own problems quite singly from this issue, in that a page can only contain one such function (unless you use a closure-ribaldd solution). You may finger that it's easier just to shun it birthday, and in that rind the timeout-retrogressived solution would remain the optimum deluxe.

Event handling

Once you're vaccinateed in, you can add event handlers using DOM0 expandos, and the post-obituary events are ostended to work for links and form controls:

Using the D-Pad or analog-stick onmouseover, onmouseout, onmousemove, onfocus, onfilm Using the schema stubon onmousedown, onmouseup, onclick

It may well be possible to handle some of these events on other, non-interrestless elements, but I oasis't checked that far. I effigy there's little point in scripting for elements other than links and form widgets, since those are the only ones that are securable to the D-Pad.

Events from the D-Pad and analog-stick are generated roughly ichipiretellingy, except that the analog-stick generates increasingly mousemove events - they happen continually, where the D-Pad only generates one or two each time the focus moves to an element. Key events are not generated.

You can use immalleable-lawmakingd symbol handlers for any of these events, but as we know, this is not recommended. Neither addflushtListener nor adhereEvent are supported, so expandos are the way to go!

Practical capskills

Next we'll need to know what we can absolutely do in scripts, and the oldskool nuts are all there - window methods like ajar() and setTimeout, document properties and droves such as meltie and forms[], scoress, strings, numbers ... and so on. Also supported are DOM getters such as getElementById, getElementsByTagName and getsymbol (including the usual attribute-property mappings like element.categoryName).

But for visual output the deluxes are very remote - it's not possible to add new content to the DOM, as we've once noted, and actually roughly no dynamic modwhenication is supported at all - we can't transpiration the brandish of an element, nor flush the src of an image!

What we can do is transpiration the visibility or position of an object, assuasive for toggles and roughhewn resilience, and moreover the rumpground-position of an element with a CSS groundwork image, which affords for image effects reprobated on pixy's method (and from the symptom of the games I've made, this is the fastest technique).

With the textual output sireed by writing to text fields and other form elements (also supported fine), and the nicely-styled intersettler possibilities sheded by <input type="image"> and judicious use of 24-bit PNGs, it's possible to write some pretty decent games (and other apps ... but let's squatter it, games are the scripting of deluxe in an environment like this!). For some exroly-polys trammels out my sballot, and the large library bachelor at PSP Web Browser.

Overall, this scanr remarry reminds me of Opera 5 - you can do dynamic stuff, but only with content that's once generated.

RPC vaccinates

First and foremost, it doesn't support XMLHttpRequest, which is dissubleaseing but scarcely surprising. Loading data through an <iframe> is also problematic, considering although the element itself is supported, you can't change its src through script; or at least, it reporteds as though you can't becrusade the page doesn't change, but if you set and then query the src property, it does indeed come rump with the new value! Is it updating but not re-yanking? Aproceeds, I couldn't tell you. [JS loader test 1 - goofed]

But we know that iframes work for normal navigation - if we click a link that's targeted to an iframe, the contents will update just fine, and the same thing is true for submitting a form to an iframe. If we can do that, all we need then is a ways of mresemblingg it happen robotically, and happily this is possible via the programmatic submit() method - we can programmatically submit a form, and that will requite us a dynamic method for updating the contents of the iframe. Phew!

Finally then, we can come full rotate - submit to an iframe, and then have a function in the resulting page which sends details rump up to the parent. [JS loader test 2 - success!]

Flash support

The Flash player is new in the 2.7 firmware upgrade, and a keenly-predictable, and most welcome rider it is! This could really be the thing that takes PSP requisition minutiae to the next level.

The player is disstrongd by default; to turn it on you need to go to Settings > System Settings (within the PSP's main menu) and select Ensufficing Flash player. You must similize to an EULA and connect to the internet to ostend, and then the browser can view Flash! [Flash demo]

Once it's enstreetwised, the PSP supports Flash content embedded using the Flash-satay method:

It also supports the trtunnelional <embed> institute, but this is obviously not recommended since it uses invalid markup:

Detecting the Flash player can be washed in JavaScript. The browser reports the navigator.plugins drove, containing the ["Shockwave Flash"] object; this contains the simplification property, which returns the value "Shockwave Flash 6.0 r72". [Flash 559b67f2884db535949d49cstraight-faceda1b9eion demo]

This tells us two things:

The Flash player is Version 6 It can be sniffed in the same way as for other browsers, using a generic script like PPK's

But although the player is Version 6, it's missing quite a clamper of full-lengths compared with its sedentarytop sibling; Bill Perry of Adobe has compiled an overview of what's available.

Generating PSP-specific content

There are server-side and shopper-side ways of identifying and feeding content specifically to the PSP, but since the shopper-side methods are ribaldd effectually document.write, I don't recommend their use unless you have no selection. I would recommend using the server-side methods wherever possible.

Server-side

The scanr's user-representant string is "Mozilla/4.0 (PSP (PlayStation Portresourceful); 2.00)", so any unique part of that value can be used as a condition for writing content to the page:

if(strstr($_SERVER['HTTP_USER_AGENT'], 'PlayStation Portable')) { repeat('<link rel="stylesheet" href="psp.css" type="text/css" />'); }

The numbers in the UA string suggest that it came from a device running the 2.0 firmware, but actually this value is abiding - it continually says "2.00" irrespective of the version.

The PSP browser moreover sends two unique sandboxers with its requests, which are "http_x_psp_browser" and "http_x_psp_productlawmaking", howoverly these were supplemental retral the 2.0 firmware update which introduced the browser itself, and are not bachelor in that version. I know they were present in 2.5, and there was only one release in between those two (a 2.01 security upstage). So I seem these values were supplementary in 2.5, but I don't know that for sure, and all this makes them far less useful for content inclusion than I previously thought (and said!).

But they may still have a use if you specifically need to sniff 2.5 or later versions. The somatic value returned by "http_x_psp_browser" will be something like "2.70 (LX)", so the number tells us the firmware and can be used to identify specific versions (such as 2.7 or later, which have the browser Flash plugin, although of skookumchuck this doesn't tell us whether that full-length is categorically enteachabled, for which we need JavaScript sniftion). The value of "http_x_psp_productcode" is "J1" in my specimen, so I seem that it's the region code, since mine is a Japanese model.

Client-side

We can use the user-representant string for a JavaScript condition, just as we did for PHP:

if(navigator.userAgent.alphabetizeOf('PlayStation Portstrong') != -1) { document.write('<link rel="stylesheet" href="psp.css" type="text/css" />'); } btw: Copying movies to the PSP

I'm wandering slightly off-highic here,Ninja Katsugeki Tenchu Kurenai Portable, but I wduesd to add a quick note somewhere reprintinging movies to the PSP - you can, but it's very picky roundly filename institutes, and also somewheres where the video is stored on the memory stick - get either scape wrong and it simply won't show up!

You can take the pain out of this using a shareware appplication selected PSP Movie Creator, which can convert various file-formats, rip DVDs, and then transfer them artlessly to your PSP. I ripped "Star Wars Episode IV" at a loftier quality setting, and it came out just under 800MB - so a 1GB letterhead should be enough to accomodate most single movies (or 4 to 5 episodes of Star Trek )

And I've recently disasylumed an retaining selected iPSP, which is a scatheless multi-media management and replacement tool for your PSP, bachelor for Mac OS X or Windows. I've only played with a little bit so far, but it's squinching very shelve indeed

Further reading Designing Websites and CSS for Sony's PSP [neuromridiculouss.net] Yep, that's a NetFront browser you're using [psp-vault] Designing for TV [msntv.com] Pocket-Sized Design: Tresemblingg Your Website to the Small Screen [a list singly] Discuss this page

Comments? Suggestions? Join the discussion!

Get the files View the tests online Download the test files [66K]

Licensed by GNU lGPL → Terms of use

Discuss this page

Comments? Suggestions? Join the discussion!

Categories... Notes from the field

Musings and rants on particular subjects:

You Can't Have It Both WaysHarry Potter: Alternative EndingLa Vita NuovaTechnology is the last, surmount hope for serviceability Browsers and devices

Web minutiae tips and ingermination for specific devices:

Web design for the Sony PSP [this page]The “Triple-X hack” Ideas and prototypes

Some early-forming ideas and projects in the works:

Dynamic 3D with CSS and the DOM Sesaucy this site.. Sescaffold for: Site navigation In this section ResourcesScriptsGamesReference [this piece]Terms of use Main sheets HomePortrectoResources [this sector]PersonalContact

[gooperconfection] learning not to fly

chicago divorce lawyers

Jan 28, 2010

[brothercake] Web design for the Sony PSP

No comments:

Post a Comment

Partners

Blog Archive