1stwebdesigner |
| 45 Mobile Web Designs To Show You One Of Future Trends Posted: 04 Jun 2010 02:00 PM PDT
We are designers and we need to think how to create more usable sites for such needs and today we showcased 45 great mobile webdesigns to get you inspired! If you do not know you can check other website designs here – this is iPhone simulator, but there are plenty of other ones to check on Android,Windows Mobile etc. – just input there website you want to check and hit enter. Also thing to remember, if site has mobile design version and you don’t get it automatically, you can access it by putting "m" before website address – "m.example.com" – from smartphones and iPhones you need to use this mobile address as well to access it. 1. Victoria’s Secret Pink
2. Alex Buga
3. Vondi
4. University of Alabama
5. Virgin Blue
6. Toy Soldier
7. Wegmans
8. Design Quest
9. iWeathr
10. Marina Yachting
11. Dolce & Gabbana
12. Vimeo
13. WVU Today
14. Burger King
15. Sony
16. YellowPages
17. Singlehop
18. McDonald’s
19. AOL Money & Finance
20. Nclud
21. Procab Studio
22. Marcel Muller
23. Pixanimal Studio
24. Android and Me
25. Erskine
26. Mashable
27. Productive Dreams
28. Far From Fearless
29. Twitter
30. Just Creative Design
31. Nike Lab
32. Print Fancy
33. Ammy Stoddard
34. Plaveb
35. Coosh
36. HTC
37. Lexus IS F
38. CWTV
39. Deviant Art
40. MySpace
41. Smashing Magazine
42. Wacom Bamboo
43. Flickr
44. Digg
45. Mobilize Media
|
| How To: Implementing Gravatar in your PHP Application Posted: 04 Jun 2010 03:00 AM PDT
We’ll now make a simple PHP application which shows you the Gravatar associated with an email. So let’s get started without wasting any time!
MAKING THE FORM FOR THE APPLICATIONOur HTML page will include a text-box (for email input), a command button (for submitting the form) and some space for displaying the Avatar image associated with the email. Below are the contents of the “index.php” file.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Implementing Gravatar in your PHP Application </title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <span style="text-decoration: underline;"><h1>Integrate Gravatar in your PHP Application</span> <div id="content"> <div id = "notification"> <p>Check your Gravatar using this Application.<br> <b>Note:</b><i>We aren't storing your email-ids here!</i></p> </div><!--End Notification--> <br/> <br/> <div id="show"> <form method="get" action="index.php"> E-mail: <input id="email" name="email" type="text" /> <input id="submit" name="submit" type="submit" value="Show Avatar" /> <!--<span class="hiddenSpellError" pre=""-->form> <p>Gravatar associated with your e-mail is:<br/> </p> </div><!--End Show--> <br> </div><!--End Content--> </body> </html> You might have noticed/seen by now that I haven’t filled the “value” for the text input, that’s because we’ll be using PHP there and I’ll discuss the PHP usage later in this tutorial. Also I won’t be using an external PHP file for form processing, instead we’ll just be adding the PHP code to the Index file itself (that’s why the action property of our form points back to the “index.php” file). For tutorial purposes, we’ll just be making some minor changes to the HTML markup above and that’s it! If for any reason you want to use an external PHP file for form processing then replace “index.php” (form action) in the code below with the name of the file consisting your PHP code.
<form action="index.<span class=" method="get">php</form>"> NOTE: We haven’t yet discussed the PHP code so don’t panic. Scroll down on this page to get it! HERE COMES THE CSSMake a new CSS file named “style.css” and add the following code to it! h1{ padding:30px 0; text-align:center; text-shadow:0 1px 1px white; margin-bottom:30px; font-size:35px; background-color:#f6f6f6; } #content { text-align: center; } #notification { margin-left:350px; margin-right:350px; border-style:solid; border-width:2px; border-color:#74DF00; background-color:#EFEFD7; } Here I styled the H1 headings and the two Div’s called “content” & “notification”. BRINGING LIFE TO THE APPLICATION WITH PHPAs I said before we’ll just be using one file with all our codes in it, so just add the code snippets below (wherever told to) to the “index.php” file. In the “value” property for the input text box add the following code: php echo $_GET['email']; ?> Your line 19 (or the line where you added the code above) should now look something like this: E-mail: <input id="email" name="email" type="text" value="<?<span class=" />php echo $_GET['email']; ?>"> <input id="submit" name="submit" type="submit" value="Show Avatar" /> To eliminate spam, e-mail addresses are hashed with the MD5 cryptographic hash function. This prevents spambots from harvesting e-mail addresses. To do this add the following code just after the <?php if ($_GET['email'] != "" && isset($_GET['email'])) { $gravatarMd5 = md5($_GET['email']); } else { $gravatarMd5 = ""; } ?> In the above code we are hashing the email addresses provided by the user using the pre-built PHP MD5 function and then enclosing the hashed code in a variable called “$gravatarMd5″ (using it for getting the image from Gravatar’s database. Now scroll down in the original HTML markup to where it says the following (line 28): <p>Gravatar associated with your e-mail is:<br/> To add some fun to the code we’ll edit the code above to include the email address your client entered. The line above should now look like this: <p>Gravatar associated with your e-mail <i><?php echo $_GET['email']; ?></i> is:<br/> Here we are printing the email entered in the input box and then styling it as an Italic. Now all we have to do is to show the image (avatar) associated to the email enter. For that, just after the above line ends (or after the <br> tag), press enter and add the following code: <img src="http://www.gravatar.com/avatar/" alt=""> Here we are adding the hashed email to the URL used for getting images from Gravatar and then are displaying that URL as an image. We have now successfully completed making our own PHP application which shows you the Gravatar associated to an email. You can now build on this code to use it on your website, blog (other than WordPress) or any other project requiring registrations with Avatars. This way you can save some bandwidth of your hosting package and also make a comfort zone for your visitors. In the Further Reading section below you’ll find some URL’s associated to Gravatar studies. I strongly suggest you to read those to get some more info. If you have any suggestions or queries or concerns then feel free to leave a comment below. :) FURTHER LEARNING |
| You are subscribed to email updates from Graphic and Web Design Blog To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment