Mick Redman

Monday 11 April 2011

YUI 3 Grids with HTML5

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>

<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>

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'};
}
}
?>

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>

Monday 28 March 2011

Google TTS API for my paragraphs using HTML5, jQuery and PHP

Most of the credit for this post goes to Abu Ashraf Masnun for this post http://www.masnun.me/2009/12/14/googles-text-to-speech-api-a-php-wrapper-class.html

You'll need to take a copy of his code for this to work. Then you need to append the following lines to the end of the PHP (after his object declaration).

$tts = new TextToSpeech();

$tts->setText($_POST['text']);

$tts->saveToFile("masnun.mp3");

Once you've done this, you can create a HTML file like mine below. To use the page, click on the speaker icons.

Note:This will not work in rubbish browsers. For this you will need to change my HTML5 <audio> tag for something awful like the <object> tag.

Another note:The Google TTS has a 100 character limit.

See demo.

<!DOCTYPE html>

<head>

<title>Text to speech</title>

<!--[if IE]>

<![endif]-->

<style>

body

{

font-family:Sans-serif;

line-height:1.5em;

}

</style>

google.load("jquery", "1");

google.load("jqueryui", "1");

</script>

var audioText = '<audio controls="controls" autoplay="autoplay">';

audioText += '<source src="masnun.mp3" type="audio/mpeg" />';

audioText += 'Your browser does not support the audio element.';

audioText += '</audio>';

$(document).ready(function()

{

$('.tts').each(function()

{

$(this).after('<a href="#" class="speaker"><img src="http://farm6.static.flickr.com/5091/5568186294_a396c02f4f_t.jpg" /></a>');

});

$('.speaker').click(function()

{

$.post('tts.php',

{

text:$(this).prev('p').text()

}, function(data)

{

$(this).after(audioText);

});

return false;

});

</script>

</head>

<body>

<p class="tts">Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>

<p class="tts">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<p class="tts">Johnny Diamond. Peter Sam</p>

</section>

</body>

</html>

Lorem Ipsum API using PHP

Below are some examples of using the Lorem Ipsum API. A useful tool for someone like me. I always need dummy text. I got the documentation from http://loripsum.net/

See demo.

Uncomment at will.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lorem Ipsum API</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
line-height:1.5em;
}
</style>
</head>
<body>
<?php
/* Standard set of items. By default they are paragraphs. */
/* echo file_get_contents('http://loripsum.net/api'); */
/* Set number of items */
/* echo file_get_contents('http://loripsum.net/api/2'); */
/*
Set length of items
Options can be short, medium, long, verylong.
*/
/* echo file_get_contents('http://loripsum.net/api/long'); */
/*
Set decoration of items
Options can be bold, italic and marked.
*/
/* echo file_get_contents('http://loripsum.net/api/bold'); */
/* Add links to some of the text */
/* echo file_get_contents('http://loripsum.net/api/link'); */
/* Add unordered lists. */
/* echo file_get_contents('http://loripsum.net/api/ul'); */
/* Add unordered lists. */
/* echo file_get_contents('http://loripsum.net/api/ul'); */
/* Add ordered lists. */
/* echo file_get_contents('http://loripsum.net/api/ol'); */
/* Add description lists. */
/* echo file_get_contents('http://loripsum.net/api/dl'); */
/* Add blockquotes. */
/* echo file_get_contents('http://loripsum.net/api/bq'); */
/* Add code samples. */
/* echo file_get_contents('http://loripsum.net/api/code'); */
/* Add headers. */
/* echo file_get_contents('http://loripsum.net/api/headers'); */
/* Use ALL CAPS. */
/* echo file_get_contents('http://loripsum.net/api/allcaps'); */
/* Prude version. Takes out latin words like 'sex' or 'homo'. Cheer up! */
echo file_get_contents('http://loripsum.net/api/prude');
?>
</body>
</html>

Friday 25 March 2011

Icon holder

I'm starting to get into iconography and it's use in my websites. In the example below I have created an icon holder. This is sort of case which all navigation icons would sit.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Icons</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
width:100%;
margin:4em;
}
.iconOuterSquare, .iconInnerCircle
{
position:relative;
behavior:url('scripts/PIE.htc');
}
.iconOuterSquare
{
background:#87B7D6;
width:10em;
height:9em;
border-radius:0.62em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
padding-top:1em;
}
.iconInnerCircle
{
margin:auto;
background:#FFFFFF;
width:8em;
height:6.5em;
border-radius:4em;
-moz-border-radius:4em;
-webkit-border-radius:4em;
text-align:center;
padding-top:1.5em;
}
</style>
</head>
<body>
<figure class="iconOuterSquare">
<figure class="iconInnerCircle">
<img src="http://farm6.static.flickr.com/5261/5558426054_a79fb5bffe_t.jpg" />
</figure>
</figure>
</body>
</html>

Wednesday 23 March 2011

Two by Two Layout

In this example I deliver to the user a browser divided by 4 sections of equal height and width. As the user resizes the browser, the page is refreshed so that the dimensions can be recalculated. You can also see how this would work with my previous blog post on font resizing. See http://effectivewebdesigns.blogspot.com/2011/03/resize-chosen-fonts-dynamically.html
I just chose not to include both entries because I like to keep my blog entries small.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two by Two Layout</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#FFFFFF;
width:100%;
color:#525252;
line-height:1.5em;
}
#topLeft, #topRight, #bottomLeft, #bottomRight
{
color:#FFFFFF;
float:left;
padding:1em;
}
#topLeft
{
background:#000000;
text-align:right;
}
#topRight
{
background:#9CB82E;
}
#bottomLeft
{
background:#A69A00;
text-align:right;
}
#bottomRight
{
background:#B1009B;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('section').each(function()
{
$(this).height(($(window).height()*0.5)-32);
$(this).width(($(window).width()*0.5)-32);
});
$("#topLeft p").position(
{
my: "right bottom",
at: "right bottom",
of: "#topLeft",
offset:"-20 -20"
});
$("#topRight p").position(
{
my: "left bottom",
at: "left bottom",
of: "#topRight",
offset:"20 -20"
});
$(window).resize(function() {
location.reload();
});
});
</script>
</head>
<body>
<section id="topLeft">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
<section id="topRight">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
<section id="bottomLeft">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
<section id="bottomRight">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
</body>
</html>