Urbano's Blog « Words from Alejandro U. Alvarez

JW Player Captions

Jun 1st

JW Player with captions

Captions are a great way to offer multi-lingual media content on your site, but they don't seem easy to add right? Well with the right tools and guidance, it will be very easy:

Setting everything up:

In order for captions to work flawlessly on every major browser, we will be using JW Player version 4.5 (At the time of writing, version 5 and 5.1 don't seem to work well in Internet Explorer)

Once you have that version ready, add the following Flashvars:

 
<param name="flashvars" value="plugins=captions-1&amp;captions=/captions.xml" />

Of course you may leave all the other Flashvars you had before (Specially file )

The XML file:

Now that the player is ready, we need to setup the XML file with the captions, so create captions.xml and write the following:

 
<tt xml:lang="en" xmlns="http://www.w3.org/2006/10/ttaf1" xmlns:tts="http://www.w3.org/2006/10/ttaf1#style">
  <body>
<div xml:id="captions">
<p begin="00:00:00" end="00:00:4">Subtitle 1</ p>
<p begin="00:00:4" end="00:00:6">Subtitle 2</ p>
<p begin="00:00:10" end="00:00:12">Subtitle 3</ p>
    </div>
 
  </body>
</tt>

As you can see, all we need is to change the Subtitle text, and the begin and end times of each, to set those up.

Generate the XML file with PHP:

If you want to change the language dynamically, you could use PHP to generate the XML using the following headers:

 
header("Content-type: text/xml");
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past (no cache)
// And now all the XML data as before

If you want to learn how to easily translate your website read my article on that too!

Hope you found this useful!

captions, flash, jw player, stream, translate, video

Extract HTML from XML in a jQuery AJAX request

May 25th

Posted by alex in AJAX

No comments

This is a bit tricky when you are parsing XML with jQuery. As you will realize, all HTML passed is ignored, and only the text is displayed. I have seen many people do this, which unfortunately won't work!

$(xml).find('element').each(function(){
	if($(this).html() < 0){
		alert($(this).html())
	}
});

Now this will throw an error, you can't take HTML from XML attributes like that!, you have to use $(this).text() as your function. So how will we do this?

The solution is very simple, where you generate the XML, make sure you wrap the html code with the CDATA marker as follows:

<element attribute="value"><![CDATA[Some HTML <span style="color:red">code</span> here]]></element>

And that will work perfectly!

ajax, html, jquery, XML

iPhone web development [Part 2]

May 21st

Posted by alex in CSS

No comments

In part one of my tutorial on iPhone web development, we talked about the basic stuff (Recognizing iPhones or iPods, setting up special HTML and CSS tags... ) we will now move on to the really clever bit: Orientation detection.

For many sites, we may just have the same thing both on portrait and landscape. But sometimes we will want to use that extra space to display our content differently, and here is how.

Orientation detection with CSS:

We can use some smart CSS3 selectors to ensure that some styles only apply to landscape, or to portrait modes:

/* Portrait */
@media screen and (max-width: 320px){
	h1{ font-size:20px; }
}
/* Landscape */
@media screen and (min-width: 321px){
	h1{ font-size:24px; }
}

Remember that for this to work we must use the viewport meta tag I showed you in my previous tutorial
This media query works (According to Apple's documentation) since iPhone OS 1.0, so there shouldn't be any problem with it, Firefox mobile should also support this, so by using max-device-width and min-width we should be able to develop specific CSS for every device without the need of PHP to include only certain style sheets

Orientation detection with JavaScript:

We can easily detect the device orientation by checking the innerWidth. This method will also work for other PDAs and SmartPhones:

var updateLayout = function() {
  if (window.innerWidth != currentWidth) {
    currentWidth = window.innerWidth;
    var orient = (currentWidth == 320) ? "profile" : "landscape";
    document.body.setAttribute("orient", orient);
    window.scrollTo(0, 1);
  }
};
 
iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 500);

This code will add a new attribute (orient) to the body element, which will be either portrait or landscape. All we have to do now is use CSS to filter out whatever orientation we need:
There is another method, which will work only on the iPhone though:

body[orient="landscape"]{
// CSS code here...
}
// ... or ...
body[orient="portrait"]{
// CSS code here...
}

That JavaScript also hides the toolbar by using the scrollTo() function when the orientation changes,

Next release:

On my next release in this series of iPhone web development tutorials, I will get into the really advanced JavaScript API we have for the iPhone (touch detection, gestures... etc) so stay tuned!

Hope you found this useful,
Alex

css, design, detection, iPhone, javascript, landscape, orientation, portrait, web development

iPhone web development [Part 1]

May 5th

Posted by alex in CSS

No comments

Even if websites look great when seen on iPhones, having an iPhone-specific website improves a lot your site's usability, and in spite of what you may think, it doesn't take that long to develop it, here I will show all the necessary steps to develop a great site for iPhones, and making it look as if it were just another iPhone App.

How to differentiate both versions:

There are several ways of setting up the iPhone version, the most common one is by using a subdomain like m.urbanoalvarez.es, iphone.urbanoalvarez.es... etc

You could also use a subdirectory like urbanoalvarez.es/iphone/ or simply do nothing, and just change the display. This last option is no recommended because it won't allow your users to easily switch between iPhone version and full version when on their phones.

For this example I will go with a subdomain, of the sort iphone.urbanoalvarez.es. The next thing we need is to send iPhone users directly there, here is the PHP code for that:

if(ereg('iPhone',$_SERVER['HTTP_USER_AGENT']) || ereg('iPod',$_SERVER['HTTP_USER_AGENT'])) {
     header('Location: iphone.urbanoalvarez.es');
}

Basically we are searching for iPhone or iPod in the user agent which for the iPhone is "Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3" and if we find that one, or the iPod one, we send them over to the mobile version.

The basic HTML:

iPhone screenshot

For an iPhone version of a website, I think the best idea is to make it look as if our website is just a regular App. So we won't allow Zoom, or horizontal scroll. This part is very easy, as Apple has enabled a meta tag that does just that:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

I don't think there is much need to explain each variable as their names are pretty self-explanatory. This was the only real "iPhone-specific code" we will be using, except for a few CSS tricks I'll show you below.

Now that we have that set up, let's go with the body content, as you may have noticed in iPhone Apps, there is a header bar, with the Website name and/or logo, and usually a "back" navigation button. Then in the center we find a background and the content displayed in nice white boxes with rounded corners. And at the bottom of the screen we see a secondary bar with navigation items, usually the main categories. This is nice, but when using Mobile Safari, that would create a duplicated bar, since Safari has it's one one at the bottom.

So I suggest we keep the top bar for the website name and/or logo, and we put the navigation right below it. With a bit of clever JavaScript we will be able to keep that nav bar always at the top of the screen solving the problem of navigation.

This is a little preview of the HTML structure:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<title>iPhone version</title>
</head>
 
<body>
<h1 id="header">My Website</h1>
<div id="wrap">
<h2>About this website:</h2>
<div class="box">
<div class="text">Some text in a nice rounded box</div>
</div>
<h2>Some links:</h2>
<div class="box">
<ul>
<li><a href="#">Element 1</a></li>
<li><a href="#">Element 2</a></li>
<li><a href="#">Element 3</a></li>
<li><a href="#">Element 4</a></li>
<li><a href="#">Element 5</a></li>
</ul></div>
<p align="center">&copy; UrbanoAlvarez.es
</div>
 
</body>
</html>

Here you can see a very simple HTML markup, with all the content inside a wrap, and then inside boxes. To create the effects such as rounded corners, shadows... etc we can make use of Webkit's advanced CSS3 features, which all work on the iPhone luckily!

So let's start styling all of that!

The CSS:

If we want to stay with an iPhone-like design, we will have a top bar with the logo, and maybe a search button, and below that with a light background our content. Each "box" of content will be of white background and with nice rounded corners. This will make our website resemble a lot the look of a real iPhone.

 
<style type="text/css">
<!--
body{
	background:#D5DCE1 url(images/pinstripes-classic.gif);
	margin:0;
	padding:0;
	font: 13px Helvetica;
	-webkit-text-size-adjust: none;
}
h1{
	display:block;
	background:#000000;
	color:#FFFFFF;
	padding:10px;
	margin:0;
}
h2{
	color:#333333;
	text-shadow:#FFFFFF 0 1px;
	padding:0;
	margin:10px 0 10px 0;
}
#wrap{
	margin:10px;	
}
.box{
	margin:10px 0 10px 0;
	display:block;
	-webkit-border-radius: 10px;
	background:#FFFFFF;
	padding:1px;
}
.box .text{
	padding:10px;
}
.box ul{
	padding:0;
	margin:0;
	list-style:none;
}
.box ul li{
	margin:0;
	padding:10px 3px 10px 3px;
	background:url(images/arrow.png) right 50% no-repeat;
	display:block;
}
.box ul li a{
	display:block;
	text-decoration:none;
	color:#333333;
}
.box ul li:first-child{
	margin-top:10px;
}
.box ul li:last-child{
	margin-bottom:10px;
}
.box ul li:nth-child(odd){
	background:#F9F9F9 url(images/arrow.png) right 50% no-repeat;
}
-->
</style>

As you can see this CSS code uses a lot of CSS3 selectors and properties, since they are fully supported on the iPhone. This makes our live a lot easier, specially when dealing with rounded corners, shadows, alternating row colors... etc

I have just designed a very simple site to show you how this can be achieved.
The background image and the arrows are from the great WP Touch plugin.

Next release:

This was Part 1 of my Full guide to web development on the iPhone, and it was the basics. In my next part we will add some JavaScript functionality to ensure a smooth user interaction with the site, different CSS rules for landscape and portrait mode, and some other advanced things we can do to make our site stand out from the crowd,

Take care!
Alex

apple, compatible, design, development, iPhone, ipod, mobile, smartphone, web

PHP: Display all files/pictures in a folder

May 4th

Posted by alex in PHP

No comments

If we want to create a quick gallery of files/pictures, it is quite a pain to do so manually. And since this is some code I'm always reusing I thought I might share it here with everyone else:

Let's suppose we are in the base directory (www.mysite.com/gallery.php) and the pictures are in a folder named pictures (www.mysite.com/pictures/), open gallery.php and where you want the pictures to appear, use this code:

$handle = opendir(dirname(realpath(__FILE__)).'/pictures/');
		while($file = readdir($handle)){
			if($file !== '.' && $file !== '..'){
				echo '<img src="pictures/'.$file.'" border="0" />';
			}
		}

This code is really easy to understand, we first define a variable "$handle", which will contain the handle to the absolute path of the folder (I always go for absolute paths since I find them much safer)
dirname(realpath(__FILE__)) returns the absolute path to the current file (gallery.php) and then we add to the end of it /pictures/

Then, we loop through all the files in the directory, that simple if statement I used is to prevent some the function returning . or .. as file names sometimes. We then display the image in standard html

Take care!
Alex

gallery, handle, opendir

Urbano's Blog

JW Player Captions

Setting everything up:

The XML file:

Generate the XML file with PHP:

Extract HTML from XML in a jQuery AJAX request

iPhone web development [Part 2]

Orientation detection with CSS:

Orientation detection with JavaScript:

Next release:

iPhone web development [Part 1]

How to differentiate both versions:

The basic HTML:

The CSS:

Next release:

PHP: Display all files/pictures in a folder

Looking for something?

Receive notifications!

About me