Tag Archives: HTML element

How to Collect the Images and Meta Tags from a Webpage with PHP

Meta Tags and the Facebook Example

You’ve definitely seen the “share a link” screen in Facebook. When you paste a link into the box (fig. 1) and press the “Attach” button you’ll get the prompted cite parsed with a title, description and possibly thumb (fig. 2). This functionality is well known in Facebook, but it appears to be well known also in various social services. In fact Linkedin, Reddit, Dzone‘s bookmarklet use it.

Facebook Attach a Link Prompt Screen
fig. 1 - Facebook Attach a Link Prompt Screen

Fist thing to notice is that this information, prompted by Facebook, is the same as the meta tag information. However there is a slight difference.

Facebook Attached Link Screen
fig. 2 - Facebook Attached Link Screen

Facebook prefers for the thumb the image set into the <meta property=”og:image” … />. In the case above this tag appears to be:

<meta property="og:image" content="http://b.vimeocdn.com/ts/572/975/57297584_200.jpg" />

And the image pointed in the SRC attribute is exactly the same as the one prompted by Facebook (fig. 3).

Vimeo Thumb
fig. 3 - Vimeo Thumb

First thing to note is that the real thumb is bigger than the thumb shown in Facebook, so Facebook resizes it and the second thing to note is that there are more meta tags of the og:… format. Continue reading How to Collect the Images and Meta Tags from a Webpage with PHP

HTML Tags: <base>

Overview

base

Somehow the <base> tag remains unknown to most of the web developers, but that’s quite normal. However let see what it can do. By adding the <base> tag in the head of the page you tell every link into that page how to open and a default href value. Thus if you have:

<base href="http://www.stoimen.com/blog/">

every link without a href attribute will open this link. That’s really useful in some cases. However the most interesting part of the base tag is the target attribute.

target=”_blank”

Everybody knows what will result from this attribute attached to a anchor tag.

<a href="http://www.stoimen.com" target="_blank">Click Here</a>

But with only adding this base tag:

<base target="_blank">

into the head … all the links will open in a new tab/window, depending on the browser preferences.

Watch out!

If you add the line above somewhere into the <body> tag the browser, will put it into the <head> which will make it difficult to track. A good practice is to place it directly into the <head>!

Bind Zend Action with Non-Default View – Part 2

Typical Setup

Typically Zend Framework is setup to bind every controller’s action to a specific view. The names of the action and the view script must be the same, or at least must be similar – following the ZF’s convention.

Thus if you name an action, let’s say, indexAction(), you’ve to create an index.phtml file into the views/scripts/index/ folder. Let me remind you that this is what is called a typical setup, but this may vary from one installation to another.

Thus everything’s fine and the MVC does its best. After the user requests a specific uri, the framework parses it and finds the controller, than the action and than the view script – and there is a view script for every single action.

typical zend framework setup

When there are two or more actions – there are two or more .phtml (view scripts) files.

typical zend framework setup for two or more actions

Some Exceptions

Sometimes you have very similar logic, but very different markup between two actions. As the logic goes to the controller/action and the markup into the view, the question is can you simply have one action in the controller, but with two different .phtml file as a view scripts? Of course switching between those two (or more) with some conditionals.

Solution No. 1

However once I posted a simple, and working, solution. There you have again two actions and two scripts:

<?php
 
class IndexController extends Zend_Controller_Action
{	
	public function firstAction()
	{
		// place all the logic you need here
		// and every view placeholder assignment
		$this->view->title = "My Title";
 
		// if the logic requires a different markup
		// simply redirect to another view
		if (some_expression) {
			$this->_forward('second');	
		}	
	}
 
	public function secondAction()
	{}
}
 
// in the application/views/scripts/index
// 1. first.phtml
<h1><?php echo $this->title ?></h1>
 
// 2. second.phtml
<h2><?php echo $this->title ?></h2>

As you can see in the second action there’s no logic – it’s only serving the role of a bridge between the views. Everything is setup into the first action, but the second action is doing the relation with the second.phtml view script.

Solution No. 2

However there’s another solution with only one action and two scripts which makes something like that shown on the diagram bellow:

zend framework one action multiple=

The only thing to do is to add some code to your action:

<?php
 
class IndexController extends Zend_Controller_Action
{	
	public function firstAction()
	{
		// place all the logic you need here
		// and every view placeholder assignment
		$this->view->title = "My Title";
 
		// if the logic requires a different markup
		// simply redirect to another view
		if (some_expression) {
			echo $this->view->render('index/second.phtml');
			$this->_helper->viewRenderer->setNoRender(true);
		}	
	}
}
 
// in the application/views/scripts/index
// 1. first.phtml
<h1><?php echo $this->title ?></h1>
 
// 2. second.phtml
<h2><?php echo $this->title ?></h2>

Note that you’ve to setNoRender on the view renderer once you render the other script!

Change the Viewport, be Ready for the iPhone!

Sites for mobile

Have you ever noticed that once you start designing a site for mobile, as iPhone and Nexus One from Google are, the site is looking really ugly! These two devices in particular, as may other using Opera Mini for instance, scale the site, because only than you can view the entire layout and than zoom to a particular part of the page.

This is nice because news sites as cnn.com or lemonde.fr are full of text & image information and once zoomed in they fit the screen – very nice feature of the browsers. However if you’d like to design a site for mobile the bad part comes here. Yeah you know how to detect the browser, that was a topic of one of my previous posts, but even than you fully functional, but less decorated site is scaled again and looks more ugly than the full version of the site.

Twitter for mobile

How to make a site visible in mobile …

Look at the http://mobile.twitter.com – the problem is that if you open this link with a normal browser, not from mobile, you’ll get redirected to the twitter.com and you cannot see the difference.

You can see how it’s made on …

The digg’s mobile version. Look at http://m.digg.com. This time you can see the different approach just by looking at the source code. Pay attention to meta tag in the head – it simply says – “don’t scale”. Nice thing to notice!

Don’t scale my site anymore:

<html>
 <head>
  <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 </head>
...
</html>

HTML5 video support. Detecting, playing and progressive enhancement!

HTML5 video

HTML5 is mentioned as entirely new “thing” out in the web, but what it actually means is rather a collection of new, unknown for the current HTML version, features. One of the most interesting and used things in HTML5 are the support of a video in a entirely new “video” tag. Until now the playing of a video was either with Flash player or with Quick Time. But in both cases it relied on a third party plugins. Of course normally the question about performance was inevitable. Which is faster? But imagine we didn’t have the IMG tag? This give you the answer – using third party plugins always slows down the page, and today most of the web is based on video sharing and therefore the browsers become slower!

Performance of HTML5 video tag against Flash video players

As I mentioned above the performance of HTML5 video should be way better than the performance of any Flash video player. To be more precise I’ll reference an article from ajaxian.com, where the author points on his turn an interesting presentation. Indeed the performance of HTML5 video was way, way better:

But sometimes this doesn’t resolves all the problems. Normally with this “new” technique of putting a video into the page, come some additional issues.

First of all there are many codecs that the browser should support and almost always there is something “your” browser don’t support. That makes the task bigger. Now you should support more and more video file formats for the different browsers. And yet another problem is the detection of this codec support.

Detection and integration

Lucky enough, I found a great article and tutorial describing how to integrate HTML5 video with progressive enhancement. First of all you can check for it’s support than downgrade to Quick Time and Flash and if the client doesn’t support even that – render an image.

You can find the source here.

Thanks to this technique you can fully integrate new video tag into your page. Remember that most of the clients for sure will be happy to watch video in a more user friendly manner.