Mick Redman

Tuesday 3 May 2011

Rulers, Guides, Eye Dropper and Color Chrome extension

Back from our fabulous family holiday today. I have also been reading a little about design. It's proved quite interesting and I think I will continue and you will probably see some entries containing this new knowledge.

I have also made some progress with my own website, http://www.effectivewebdesigns.co.uk, including a mobile version which I am still perfecting. I haven't been able to develop the site for a while, but now I'm also going to use it to host some demo sites of the blog entries, so you will see them appearing first in older posts. then I'll gradually catch up.

I use Google Chrome most of the time. Then I test on IE and Opera. I came across this useful extension for Chrome, I hope you like it too.

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>