Mick Redman

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>

Resize chosen fonts dynamically

Again, I can't take much credit for this. The real credit goes to the author of this blog entry http://www.pukkared.com/2010/10/resizing-text-with-jquery-and-window-resize/. I have just made a few changes and calls for my own purposes. Namely, passing which fonts I would like to resize, what the original size should be and what size the page should be before resizing begins. Enjoy!

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic font resize</title>
<style>
body
{
font-family:Sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$.fn.resizeFonts = function(fontName, originalFontSize)
{
var originalWinWidth = $(window).width();
var ratioOfChange = 50;
$(fontName).css('font-size', originalFontSize);
$(window).resize(function()
{
var winWidth = $(window).width();
var widthDiff = winWidth - originalWinWidth;
if(widthDiff > 0)
{
var pixelsToIncrease = Math.round(widthDiff / ratioOfChange);
var newFontSize = originalFontSize + pixelsToIncrease;
$(fontName).css('font-size', newFontSize);
}
else
{
var pixelsToDecrease = Math.round(Math.abs(widthDiff) / ratioOfChange);
var newFontSize = originalFontSize - pixelsToDecrease;
$(fontName).css('font-size', newFontSize);
}
})
}
$(document).ready(function()
{
$(window).resize(function() {
if($(this).width() < 800)
{
$(this).resizeFonts('h1',20);
$(this).resizeFonts('p',10);
}
});
});
</script>
</head>
<body>
<h1>Big Mick's Recipe Book</h1>
<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>
</body>
</html>

Saturday 19 March 2011

Big fonts for header

This is another small post. All I have done is stretched the h2 to match the length of the h1. The effect works very well.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stretch Fonts to Selector</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
}
header
{
margin:4em;
width:20em;
text-align:center;
}
h1, h2
{
font-weight:bold;
text-transform:uppercase;
}
h1
{
color:#A5A5A5;
font-size:11em;
}
h2
{
color:#464646;
font-size:6.5em;
margin-top:-0.3em;
}
.i
{
color:#FF0000;
}
</style>
</head>
<body>
<header>
<h1>B<span class="i">i</span>g</h1>
<h2>T<span class="i">i</span>tle</h2>
</header>
</body>
</html>

Friday 18 March 2011

Example of good Typography Using the Magic number Principle

I've taken much of this example from the excellent article here from Harry Roberts for Smashing Magazine.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Using the Magic number Principle</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
margin:1em;
}
h1, h2, h3, p, ul, ol
{
margin-bottom:1.5em;
}
h1
{
font-size:1.5em;
line-height:1em;
}
h2
{
font-size:1.38em;
line-height:1.09em;
}
h3
{
font-size:1.25em;
line-height:1.2em;
}
p
{
font-size:1em;
line-height:1.5em;
}
body > p:first-of-type
{
font-size:1.13em;
line-height:1.33em;
}
strong, code
{
font-variant:small-caps;
}
em, code
{
font-weight:bold;
}
ul
{
list-style:square outside;
}
ul ul, ol ol
{
margin: 0 0 0 3.75em;
}
blockquote
{
   margin:1.25em;
   padding:1.25em
}
</style>
</head>
<body>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> 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. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<p><strong>Pellentesque habitant morbi tristique</strong> 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. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</body>
</html>