Here is a simple example of how to combine HTML5 layout tags with the YUI 3 Grid library (which is still in beta). It works cross-browser.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sharing data from the Facebook API</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssgrids/grids-min.css" />
<style>
body
{
font-family:Sans-serif;
line-height:1.5em;
margin: auto; /* center in viewport */
width: 960px;
}
nav
{
text-align:center;
}
nav a
{
float:right;
display:block;
text-decoration:none;
}
section p, footer p, img, hgroup
{
margin:0.5em 0.5em 0.5em 0.5em;
}
</style>
</head>
<body class="yui3-g">
<section class="yui3-u-1-2"></section>
<nav class="yui3-u-1-2">
<a href="#" class="yui3-u-1-5">home</a>
<a href="#" class="yui3-u-1-5">services</a>
<a href="#" class="yui3-u-1-5">portfolio</a>
<a href="#" class="yui3-u-1-5">contact</a>
</nav>
<header class="yui3-u-1">
<hgroup>
<h1>Header 1</h1>
<h2>Header 2</h2>
</hgroup>
</header>
<section class="yui3-u-1-2">
<p>Your image here</p>
</section>
<section class="yui3-u-1-2">
<p>Your text here</p>
</section>
<section class="yui3-u-1-3">
<p>Your text here</p>
</section>
<section class="yui3-u-1-3">
<p>Your text here</p>
</section>
<section class="yui3-u-1-3">
<p>Your text here</p>
</section>
<footer class="yui3-u-1"><p>Your text here</p></footer>
</body>
</html>
Monday, 11 April 2011
Wednesday, 6 April 2011
Using YQL with PHP
I've just started to look into YQL. It looks very powerful but some of the videos an tutorials are a bit dry. There are some missing links which I'm hoping to expose in how to implement with PHP. It should be possible to use YQL for your applications very easily, but at the moment I'm finding my way around it. Part of the problem seems to be around not knowing the structure of the returned JSON before you have to present it. We'll see. Below is an example of calling some YQL on a single web page and displaying the paragraphs within it. I call a very simple PHP GET using CURL. Then I loop through the resulting JSON object until I reach the paragraphs.
Good luck!
<?php
$api = 'http://query.yahooapis.com/v1/public/yql?q=';
$query = 'select * from html where url="http://www.stream-idc.net/"';
$params = '&format=json';
$session = curl_init($api.urlencode($query).$params);
curl_setopt($session, CURLOPT_RETURNTRANSFER,true);
$json = curl_exec($session);
curl_close($session);
$yqlObj = json_decode($json);
if(!is_null($yqlObj->query->results))
{
foreach($yqlObj->query->results->body->p as $bodyContent)
{
echo $bodyContent->{'content'};
}
}
?>
Good luck!
<?php
$api = 'http://query.yahooapis.com/v1/public/yql?q=';
$query = 'select * from html where url="http://www.stream-idc.net/"';
$params = '&format=json';
$session = curl_init($api.urlencode($query).$params);
curl_setopt($session, CURLOPT_RETURNTRANSFER,true);
$json = curl_exec($session);
curl_close($session);
$yqlObj = json_decode($json);
if(!is_null($yqlObj->query->results))
{
foreach($yqlObj->query->results->body->p as $bodyContent)
{
echo $bodyContent->{'content'};
}
}
?>
Monday, 4 April 2011
Hello jQuery Mobile
I've been a bit quiet on the blog front over the last week because I've been knee deep in stuff. One of the things I've been working with is jQuery Mobile. A real solution for me. I didn't want to re-learn Java to create Android apps. I certainly didn't want to learn Objective-C for iPhone apps. I do want to use all my existing web and PHP skills to develop apps for mobile devices. jQuery Mobile suits this perfectly.
It's only really in alpha at the moment and be prepared to reconfigure everything you're done as each version changes, but it's already looking very good.
Below is my Hello World! page using jQuery Mobile.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
</head>
<body>
<div data-role="page">
Hello jQuery Mobile
</div>
</body>
</html>
It's only really in alpha at the moment and be prepared to reconfigure everything you're done as each version changes, but it's already looking very good.
Below is my Hello World! page using jQuery Mobile.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
</head>
<body>
<div data-role="page">
Hello jQuery Mobile
</div>
</body>
</html>
Subscribe to:
Posts (Atom)