Mick Redman: Google

Showing posts with label Google. Show all posts

Wednesday 1 June 2011

Simple layout #33

I haven't done a simple design layout in a while. Haven't had much time to be honest. This one is very simple. Two fonts, 1 colour, but there is an idea how very small.

See demo.

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

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Arvo:regular' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<style>
body
{
font:0.9em/1.5em Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:60em;
}
#topPart, #bottomPart
{
color:#FFFFFF;
}
#topPart
{
height:6em;
background:#00A6F2;
padding:0.5em 0 0.5em 0;
}
#middlePart
{
min-height:2em;
}
#bottomPart
{
min-height:2em;
}
#pictureHolder, #wordedContent
{
float:left;
width:48%;
}
h1, h2, h3
{
font-family:'Arvo', arial, serif;
}
h1
{
font-size:4em;
line-height:1em;
}
h2
{
font-size:2em;
}
h3
{
margin:1.5em 0 1.5em 0;
font-size:1.5em;
color:#00A6F2;
}
p
{
font-family: 'Muli', arial, serif;
text-align:justify;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
</head>
<body>
<section id="topPart">
<header class="contentHolder">
<h1>Hello</h1>
<h2>And welcome to my website...</h2>
</header>
</section>
<section id="middlePart">
<section class="contentContainer">
<article id="pictureHolder">
<a href="http://www.ourecohouse.info/"><img src="http://www.publicdomainpictures.net/pictures/1000/nahled/1-1203254406i5t0.jpg" alt="An Egg by Petr Kratochvil" /></a>
</article>
<aside id="wordedContent">
<h3>Let's create something beautiful<br />
From something simple</h3>
<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>
</aside>
</section>
</section>
</body>
</html>

Monday 16 May 2011

Use of wood and paper textures

This example makes use of textures, both wooden and paper. It's the starting position of putting together a website for a local carpenter. I also use one of the Google fonts to add a handwritten effect.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Local carpenter</title>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<style>
html, body
{
font-family: 'Reenie Beanie', arial, serif;
background:url(images/coursepaper.jpg);
}

#mainContent, #footer
{
margin:0 auto;
width:800px;
}
#mainContent, #paper, #footer
{
position:relative;
padding:20px;
-webkit-box-shadow: 4px 4px 4px #737373;
-moz-box-shadow: 4px 4px 4px #737373;
box-shadow: 4px 4px 4px #737373;
behavior: url(scripts/PIE.htc);
}
#mainContent
{
background:url(images/plywood.jpg);
min-height:440px;
}
#leftSection
{
float:left;
width:140px;
}
#subNav
{
float:left;
width:136px;
margin-left:60px;
}

#subNav a.subMenu, a.subMenu:hover
{
font-size:2em;
color:#FFFFFF;
}

#subNav a.subMenu
{
display:block;
height:96px;
background:url(images/woodenbutton.png) 0 0 no-repeat;
margin-top:0px;
padding-top:20px;
padding-left:20px;
}

#subNav a.subMenu:hover
{
background:url(images/woodenbuttonover.png) 0 0 no-repeat;
padding-top:24px;
padding-left:24px;
}

.menuSelected
{
}
img
{

}
p
{
font-size:1.4em;
}
#paper
{
float:right;
background:url(images/paper.jpg);
width:500px;
min-height:300px;
}
#footer
{
background:url(images/plywood2.jpg);
position: relative;
min-height:40px;
}
</style>
</head>
<body>
<br />
<div id="mainContent">
<div id="leftSection">
<img src="images/stamp.png" alt="stamp">
<div id="subNav">
<a href="subPage1.html" class="subMenu menuSelected">First</a>
<a href="subPage2.html" class="subMenu">Second</a>
</div>
</div>
<div id="paper">
<h1>Welcome to the Local Carpenter</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.</p>
</div>
</div>
<br />
<div id="footer"></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>

Monday 14 March 2011

Google Directions API - not bad

Here, I have provided an example of implementing Google Directions. This should give you the confidence to try more out. I recommend that you visit http://code.google.com/apis/maps/documentation/directions/ for more options.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google Directions API</title>
</head>
<body>
<?php
$params = 'origin=Toddington,Bedfordshire';
$params .= '&destination=Cranfield,Bedfordshire';
$params .= '&region=uk&sensor=false';
$data = json_decode(file_get_contents('http://maps.googleapis.com/maps/api/directions/json?'.$params));
if ($data->status === 'OK')
{
$route = $data->routes[0];
foreach ($route->legs as $leg)
{
foreach ($leg->steps as $step)
{
echo $step->html_instructions .'<br />';
}
}
}
?>
</body>
</html>

Friday 11 March 2011

Google Chart API - Not bad

Here, I have provided an example of implementing Google Charts. This should give you the confidence to try more out. I recommend that you visit http://code.google.com/apis/chart/docs/making_charts.html for more options.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google chart</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$chartURL = 'http://chart.googleapis.com/chart?';
/* Add chart type */
$chartURL += 'cht=bhs';
/* add chart size */
$chartURL += '&chs=600x160';
/* add chart scale */
$chartURL += '&chxt=t&chxl=0:|Low+Value|High+Value';
/* add chart key */
$chartURL += '&chdl=Career|Happiness';
/* add chart colours */
$chartURL += '&chco=35D2AB|000000';
/* add chart values */
$chartURL += '&chd=t:';
$chartURL += '40,';
$chartURL += '80';
$('#chart').attr('src', $chartURL);
});
</script>
</head>
<body>
<img id="chart" />
</body>
</html>

Wednesday 3 November 2010

jQuery Google Feed Plugin

This plugin provides a nice easy way for developers to implement the Google Feeds API in their site. In the example below, I've also added some ugly style elements to help show how the appearance can be manipulated.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Google Feed Plugin</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
font-family:Sans-serif;
font-size:62.5%;
}
#feeds
{
margin:0 auto;
width:80em;
background:#CCCCCC;
}
.gfc-control
{
width:40em;
font-size:1.2em;
}
.gfc-tabsArea
{
background:#FF9200;
}
.gfc-tabHeader.gfc-tabhActive
{
font-weight:bold;
}
.gfc-tabHeader.gfc-tabhInactive
{
font-style:italic;
}
.gfc-resultsbox-visible
{
background:#D3EDFC;
}
.gf-title
{
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://jquery.malsup.com/gfeed/jquery.gfeed.js"></script>
<script>
$(document).ready(function()
{
$('a.feed').gFeed(
{
target:'#feeds',
max:3,
tabs:true
});
});
</script>
</head>
<body>
<div id="feeds">
<a class="feed" href="http://jquery.com/blog/feed/">jQuery Blog</a>
<a class="feed" href="http://www.learningjquery.com/feed/">Learning jQuery</a>
</div>
</body>
</html>

Tuesday 28 September 2010

Friday 24 September 2010

SMTP from XAMPP on a localhost using your Google mail Account

This may seem a little obscure but believe me, this blog could save you a lot of time.

Imagine you have XAMPP installed on your Windows computer as localhost. You are writing an application which requires e-mails to be sent and you need to test your code. You have a Google e-mail account and you'd like to use the SMTP service which comes with that.

Let's start by creating our little PHP script which we are going to use for testing.

<?php
mail('jimmy@googlemail.com','test subject','test body');
?>
There. That wasn't too difficult was it.

Next we need to edit our php.ini file. The php.ini file will be in something like C:\XAMPP\php. We are looking for the [mail function] variables. For which we need entries like this:

[mail function]
sendmail_path = "C:/xampp/sendmail/sendmail.exe -t"

Couple things to note from above. The smtp_port and look carefully at the slashes of the sendmail_path.

Now we are on to our final step. We need to edit sendmail.php which would be under something like C:\XAMPP\sendmail. You need to replace the contents of the file with something like this:

[sendmail]
smtp_server=smtp.googlemail.com
smtp_port=587
error_logfile=error.log
debug_logfile=debug.log
auth_username=myaccountname@googlemail.com
auth_password=mypassword
force_sender=myaccountname@googlemail.com

You must now restart your Apache service in order for it to work.

Now to test your script. Open up your web browser and load it like this http://localhost/myscript.php
Check your Google mail account to see if it's arrived.

Good luck!

Wednesday 11 August 2010

My HTML5 Template

Here is my HTML5 template. It also contains a few things I like to put in my pages.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" href="stylesheets/html5reset.css" />
<link rel="stylesheet" href="stylesheets/pageStyle.css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="stylesheets/smalldevice.css" />
<link rel="stylesheet" href="stylesheets/printstyle.css" media="print" />
<link rel="shortcut icon" href="images/favicon.ico" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
WebFont.load(
{
google:
{
families: [ 'Tangerine', 'Cantarell', 'Yanone Kaffeesatz' ]
}
});
</script>
<script src="scripts/jQueryFunctions.js"></script>
<script src="scripts/html5functions.js"></script>
</head>
<body>
<div id="page">
<header>
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<hgroup>
<h1>Page Header</h1>
<h2>Page Sub Heading</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<article>First article on left.
</article>
<article>
<canvas id="myDrawing" width="200" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>
</article>
</section>
<aside>
The stuff aside
<article class="yellowbox">
This is the text in the box.
</article>
</aside>
<footer>
footer represents a footer for a section and can contain information about the author, copyright information, et cetera.
</footer>
</div>
</body>
</html>

Enjoy!