Posts tagged with ‘HTML5’

  • How to Embed your Twitter Feed to your Blog or Website

    Hello, been a while ;), yesterday night I spent a few hours going over the Twitter Embedded Timelines API, so I thought I would post how to do it, as it seems quite a few people are having issues with embedded Twitter Feeds.

    Yes, I was one of those people, the WordPress Theme that I am using has Social Icons built in and when I first started using the theme, I always had my last Twitter post proudly (or sometimes, not so :-), displayed in the top right of my Blog, then overnight it just disappeared, I kept meaning to fix it but held out hope that it might come back, as sometimes when WordPress was updated, it magically re-appeared for a fleeting moment, then it was gone again.

    Personally I like using Twitter and having your feed on your Website or Blog is not only good for you, it’s good for your followers especially if you re-tweet, as you are advertising your followers products or wares for however long your last post is displayed. It is also good for you, as in theory this should get you more followers as if your Website or Blog is popular then your Re-Tweeted followers will be loving the free advertising, and of course subscribers to your Blog will also know where to find, and follow you if they choose to use Twitter as a Social Media option.

    How to Embed your Twitter Feed to your Blog or Website

    So, first you will need to head over to Twitter, log in and click your way over to the Widgets page, start by clicking the gear icon at the top.

    Then going to Settings


    Then Widgets


    Then Click on Create New
     

    Alternatively, just click here https://twitter.com/settings/widgets sign in to your account and click on Create New.

    You will now be in the Widget Configurator which is where the fun really begins, so, choose a time line source from either, User timeline (which will show your posts and retweets), Favorites (which will show your favorite tweets), List (which will allow you to choose a Twitter List you have previously created, for example your personal or business contacts), or Search (which will allow you to show a realtime search of Twitter using your favorite hashed keyword (#)).

    I just want my latest Tweet, although as you can see, by default you do have more than one Tweet displayed, I will go into the optional configuration options in a bit, here is where we are now, as you can see your username is already filled out, but it also seems you can put a different username in here if you want to, although why you would want to create a timeline for another user is beyond me, that’s just stalking :), so…

    As you can see, a preview of your what your new embedded Twitter timeline will look like is on the right and your options are on the left, you don’t really have to change any options here, unless you want to deselect Auto-expand photos, this is what I did, as remember I only want one tweet and I don’t have much real estate for my Twitter box as I want to put it in my WordPress Sidebar.

    I also ticked the box to Opt-out of tailoring Twitter, again this is up to you, if you leave this box selected, Twitter will suggest who to follow based on who you currently follow, and it will also tailor suggested Twitter users to follow based on your website visits (sounds scary to me), although this will also depend on your privacy settings, anyway I don’t want Twitter badgering me about who I should follow, I have a mind :).


    For your information you can see what your personal recommendations from Twitter are by clicking here, https://twitter.com/who_to_follow/web_personalized

    This is what I get when i click the link, perfect, nosy buggers 🙂

    You don’t need to worry about the height as you can add this into the html snippet you get when you click Create Widget, so, now you have decided on which options you want, go ahead and click…

    The Twitter Widget Configurator will generate the code you need underneath the preview, just select everything in their and paste it into a text file for later.


    Finally click on save changes underneath the options on the left.

    You may now sign out of Twitter and fire up your Blog, as you now have the precious bit of code that  you will need to add your new Twitter timeline feed to your Blog, jesus that was a mouthful.

    Adding your Twitter timeline to your Blog

    Ok, the easiest way to add your new Twitter timeline to your WordPress blog is to go to Appearance, Widgets.

    Now drag the Text Widget from your available Widgets to your side bar

    Where it will automatically expand and allow you to type in a title, as you can see I imaginatively used the Title, Twitter Feed.

    Paste in the code you saved to a text file earlier, click save then go check out your handywork.

    Here’s what mine looks like.

    As you can see I have customized the code just a little bit :), so that only my latest Tweet is showing, I have turned off scroll bars, made it transparent, adjusted the height and width, hidden the header and the footer and removed the borders. Do what! I hear you say, hey don’ worry it’s easy, Twitter has provided you with all the options you need to customize your new Widget, you can head over to the Embedded Timelines Twitter Development page, by clicking here https://dev.twitter.com/docs/embedded-timelines to check out all the options, available to you.

    Here are some of the most useful options.

    • Theme: Set by adding a data-theme="dark" attribute to the embed code.
    • Link color: Theme: Set by adding a data-link-color="#cc0000" attribute. Note that some icons in the widget will also appear this color.
    • Width: Set using the standard HTML width attribute on the embed code (units are pixels.)
    • Height: Set using the standard HTML height attribute on the embed code (units are pixels.)
    • Chrome: Control the widget layout and chrome by using the data-chrome="nofooter transparent" attribute on the embed code. Use a space-separated set of the following options:
      • noheader: Hides the timeline header. Please refer to the timeline display requirements when implementing your own header.
      • nofooter: Hides the timeline footer and Tweet box, if included.
      • noborders: Removes all borders within the widget (between Tweets, cards, around the widget.) See also: border-color.
      • noscrollbar: Crops and hides the main timeline scrollbar, if visible. Please consider that hiding standard user interface components can affect the accessibility of your website.
      • transparent: Removes the background color.
    • Border color: Change the border color used by the widget. Takes an #abc123 hex format color e.g. data-border-color="#cc0000"
    • Tweet limit: To fix the size of a timeline to a preset number of Tweets, use the data-tweet-limit="5" attribute with any value between 1 and 20 Tweets. The timeline will render the specified number of Tweets from the timeline, expanding the height of the widget to display all Tweets without scrolling. Since the widget is of a fixed size, it will not poll for updates when using this option.

    All you need to do is add or remove the options in the first part of the code that you got when you created your Widget, here is what my finished code looks like, add or remove the options you want between the “a” tag.

    <a class=”twitter-timeline” width=”300″ height=”200″ data-tweet-limit=”1″  data-chrome=”nofooter transparent noheader noborders noscrollbar” data-dnt=”true” href=”https://twitter.com/sHoganAs3Dev”  data-widget-id=”YOUR-WIDGET-ID-HERE”>Tweets by @sHoganAs3Dev</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+”://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>

    Notes:
    The minimum width of a timeline is 180px and the maximum is 520px. The minimum height is 200px.
    If you use the nofooter attribute you will remove the ability for someone to tweet you directly from your widget.
    If you use the noheader attribute you will loose the follow button.
    You may recommend Twitter users to follow, by using the following option (hint, hint)

    data-related="MusicalMoleDev,ScaleViz"

    Have fun, I hope you enjoyed this tutorial and may it bring you many followers.

    Copyright © Shane Hogan
    Do not copy this article.

  • Compiling your Web App with Dreamweaver & PhoneGap – Fixing the Camera.h error

    Once you’re happy with your Web App you’ll want to deploy it to your device, Dreamweaver CS 5.5 integrates this feature nicely; however, there is an issue with one of the classes that will prevent your app from compiling, here’s how to fix it.

    Dreamweaver CS 5.5 will happily create a skeleton jQuery web app for you, I’m using the four page sample app created by Dreamweaver to show the exact error, where to find it, and how to fix it, see this post for more info on creating a web app with Dreamweaver.

    Once you have your site ready to deploy, you need to set up your development environment, go to Site – Mobile Applications – Configure Application Framework.

    Set the “iOS Developer Tools Path” to where you installed xCode
    The default is /Developer, then click save.

    Now you need to configure your Application settings, go to Site – Mobile Applications – Application Settings.

    Fill in your Bundle ID, App Name, Author Name, Version Number & Target Path (You should not set your Target Path the same location as your site root, it’s fine to leave it set to desktop as Dreamweaver will create a folder for you).
    Icon and splash screen are optional, for this tutorial I have left them out, for more info on Web App icons and Splash screens see this post.

    Once you have finished filling in you settings click Save, then go to Site – Mobile Applications – Build and Emulate – iPhone.

    This is when the error appears, Oh Dear!

    Not to fear Dreamweaver is telling us to go look in the buildlog.log, you can find this file under the folder Dreamweaver created when it tried to compile your app, which will be on your desktop (or wherever you set your Target Path).

    Browse to the Buildlog.log file location Dreamweaver just informed us about and double click on it, the log file will open in Console, and if you check the log file you can see the error, what the error is and the file that’s causing the problem, as you can see from the log, Dreamweaver even points out the error with a ^, and also tells us the path to the offending file.

    Browse to the Camera.h file specified in the log, which you will find in your Documents folder, again as you can see from the log, it’s in a Folder called DW_NAF, the default path is:
    Documents, DW_NAF/PhoneGapLib/Classes/Camera.h

    Double click the Camera.h file to open it with xCode or use a text editor, make the following changes and save the file.

    Change the line that reads “enum DestinationType returnType”, and correct it so it reads as follows, don’t forget the semi-colon;

    Now we can go back to build and emulate and your app will compile successfully.

    If you run into any problems then make sure you have the latest version of Dreamweaver installed, and double check your Camera.h file.

    Copyright © Shane Hogan
    Do not copy this article.

  • Web App Splash Screen created with Adobe Edge

    The latest update for my app ScaleViz has been approved and I’ve finally had a chance to play with Adobe’s new HTML5 motion and interaction tool called “Edge“, and after playing with it for a little while yesterday I can see why they call it Edge.

    I’ve only really just touched the surface and have already created this cool splash screen and added it to the front page of our test mobile web app, you can find it here if you want to check it out: Test Mobile Web App with Adobe Edge Splash Screen added to first page.

    (Don’t press the animations background (the stage) as I’ve linked it to ScaleViz.com and you will be swift-ed away, you can however drag the animation up and down without activating the link).

    Edge is a seriously awesome development tool, especially if you’re used to timeline animation using similar development tools like, Flash.

    When I get a bit of time I will definitely be doing a screen cast tutorial on how to animate stuff using Adobe Edge, however in the mean time here’s an Edge tutorial from Adobe.

    I can see complete apps being developed with Edge and packaged up for the Apple Store or Android Market place using Dreamweaver and Phone Gap.

    As mentioned I’ve only just scratched the surface and I’m also not one for reading instructions, but if you check out the Edge animation in my test web app, you can see that the animation reverses itself when it gets to the end then plays again, this functionality was added with a few clicks, also if you click the background, it links to my App site ScaleViz.com, again this was added with two clicks and a URL change.

    Edge makes motion graphics available to everybody and because Edge is based on HTML5 and JavaScript your animations can be embedded into your web page and you can now target browsers like Safari with Flash type animation, how cool is that.

    Edge is now called Edge Animate, go check it out here:

  • Adding a Web App to your iOS Home Screen

    To add a Web App or Web Clip to your home screen.

    Open Safari and browse to the URL of your choice, for this demo I’m going to use the test app, which you can find here:

    This version has the added icon and start screen that we created in the last tutorial.

    Once the page is loaded, press the middle button on your Safari “button bar”.

    Now press “Add to Home Screen”.

    Type a name for your App and press the “Add button”

    You can now use your Web App from your home screen.

    If you’ve made any changes to your app and your pages still look the same, you may need to clear you browsers cache.

    To clear your Mobile Safari cache, goto: Settings > Safari > Clear Cache.

    Copyright © Shane Hogan
    Do not copy this article.

  • Adding an Icon and Startup Screen to your iOS Web App

    For this tutorial we will be using a Photoshop template available from Cocoia, to add an icon to our Web App, this is the Icon the users see when they add your app to their iOS home screen.

    Here’s what the template looks like.


    If you want to create your own icon from scratch, create an image in the PNG 24 format at 57×57 pixels, name it “apple-touch-icon.png” and place it in the root directory of your Web App.

    When your icon is displayed on an iPhone Home screen, iOS automatically adds rounded corners, a drop shadow, and a reflective shine.

    If you don’t want iOS to add these effects, or if your icon already has style applied, you can name your icon “apple-touch-icon-precomposed.png”, and iOS will not apply any effects.

    Once you have the template open in Photoshop, turn off all layers apart from the one called “57 Pixels (iPhone home screen)”, expand that layer, then use the magnifier tool to zoom into the icon and make your changes.

    As you can see, I have changed the base shape’s color to black, turned off the star layer and pasted in my own icon.

    When you are happy with your handy work, go to “Select – All”, then choose “Edit – Copy Merged”, then “File – New”.

    Make sure your width and height are both set to 57 pixels, and then click OK.

    Go to “Edit – Paste”, (if needed nudge your icon around with the arrow keys), here’s what mine looks like pasted from the template using copy merged.

    When you are happy with your result, choose “File – Save for Web & Devices”, making sure you select PNG-24 as the Preset.

    Now click save & name your icon (I called mine icon.png).

    Here is our finished Icon.

    As you can see I have left the “Apple’s Pre-Supplied Gloss” layer turned on, so we could name the icon “apple-touch-icon-precomposed.png” and place it in the root directory of our Web App and it would show up when the App was added to the iOS Home Screen.

    Although, this time we are going to add a link to the icon in the “index.html” file’s <HEAD> tag.
    Add the following line just below your closing </title> tag, replacing “icon.png” with your icons filename.

    <link rel=”apple-touch-icon-precomposed” href=”icon.png” />

    To add a splash/start-up screen to your Web App, create a portrait image at 320 x 460 pixels, save it as PNG-24 or JPG format then add the following link to your head tag just after the previous link, replacing “splash.png” with the name of your start-up image.

    <link rel=”apple-touch-startup-image” href=”splash.png”>

    As you can see, I’ve added some text, a logo and the available on the App Store badge to a black-white gradient background, obviously you can put whatever you like on your own splash screen. Or, if you prefer you can take a screen shot of your web app and use that for the splash screen.

    To take a screen shot of your app on your iOS device, hold down the power button and press your home button (round middle button), then use Photoshop to re size your image to 320 x 460 pixels.

    Finally to get your Web App to run in full screen mode, add the following tag your index.html file’s <HEAD> tag.

    <meta name=”apple-mobile-web-app-capable” content=”yes” />

    You can find lots more information on Apple specific tags, in the Safari HTML reference guide.

    Our index.html file’s <head> tag should now look like this.

    <head>
    <meta charset=”utf-8″>
    <title>jQuery Mobile Web App</title>
    <link rel=”apple-touch-icon-precomposed” href=”icon.png” />
    <link rel=”apple-touch-startup-image” href=”splash.png”>
    <meta name=”apple-mobile-web-app-capable” content=”yes” />
    <link href=”jquery-mobile/jquery.mobile-1.0a3.min.css” rel=”stylesheet” type=”text/css”/>
    <link href=”zrss/jquery.zrssfeed.css” rel=”stylesheet” type=”text/css” />
    <script src=”jquery-mobile/jquery-1.5.min.js” type=”text/javascript”></script>
    <script src=”jquery-mobile/jquery.mobile-1.0a3.min.js” type=”text/javascript”></script>
    <script src=”zrss/jquery.zrssfeed.min.js” type=”text/javascript”></script>
    </head>

    You can find the live version of our updated Web App here, this version includes all the changes mentioned in this post.

    If you add the app to your Home Screen you can check out your new Icon, Start-up image, and see your Web App Full screen.

    Copyright © Shane Hogan
    Do not copy this article.

  • How to add an RSS Feed to your Web App using a Plug-in

    To add an RSS feed to page three of our Web App, i’ve used a jQuery plug-in called “zRSSFeed”, which you can get from here, this plugin reads RSS feeds from any website URL using the Google Feed API, it also produces structured HTML with built-in CSS styling and is very easy to use.

    Here’s how to add some content to your jQuery-Mobile Web App with an RSS feed reader jQuery Plug-in.

    Once you have downloaded “RSS Feeds Reader Plugin for jQuery”, make a new directory in the webApp site folder created in the previous tutorial and name it “zrss”, of course you can call it anything you like, now copy the “jquery.zrssfeed.min.js”, and the “jquery.zrssfeed.css” files from the “zrssfeed archive download” into the “zrss”, folder created above.

    Note: We could have put the plug-in files in the “jquery-mobile” folder that Dreamweaver created when the index.html file was saved, but keeping everything separate helps your site stay organized, makes individual plug-ins easier to update, and is much better for debugging, for example if something is not working as expected, you could just rename your plug-in folder to stop your page from loading any CSS or JavaScript without changing any of your code.

    Your folder structure should now look like this:

    Folder Structure

    Using your preferred text editor (I’m using Notepad), we now link to the CSS and .js files from the “zRSS plug-in”.

    Change the code in the <head> tag of “index.html” from this :

    <head>
    <meta charset=”utf-8″>
    <title>jQuery Mobile Web App</title>
    <link href=”jquery-mobile/jquery.mobile-1.0a3.min.css” rel=”stylesheet” type=”text/css”/>
    <script src=”jquery-mobile/jquery-1.5.min.js” type=”text/javascript”></script>
    <script src=”jquery-mobile/jquery.mobile-1.0a3.min.js” type=”text/javascript”></script>
    </head>

    To this (Code changed/added is in bold):

    <head>
    <meta charset=”utf-8″>
    <title>jQuery Mobile Web App</title>
    <link href=”jquery-mobile/jquery.mobile-1.0a3.min.css” rel=”stylesheet” type=”text/css”/>
    <link href=”zrss/jquery.zrssfeed.css” rel=”stylesheet” type=”text/css” />
    <script src=”jquery-mobile/jquery-1.5.min.js” type=”text/javascript”></script>
    <script src=”jquery-mobile/jquery.mobile-1.0a3.min.js” type=”text/javascript”></script>
    <script src=”zrss/jquery.zrssfeed.min.js” type=”text/javascript”></script>
    </head>

    Notice: The link to include the “zRSS feed plug-in” JavaScript file is added after jQuery and jQuery-mobile. If loaded before you may see unexpected results, for example if “zRSS” was loaded before both jQuery and jQuery mobile, the plug-in would not work, if loaded after jQuery but before jQuery-mobile, you would lose the back button.

    Now we add the following JavaScript to the page with an id of “page3” replacing the Content placeholder inside the div with a data-role of “content” (the place holder is the word “Content”)

    Change this:

    <div data-role=”page” id=”page3″>
    <div data-role=”header”>
    <h1>Page Three</h1>
    </div>
    <div data-role=”content”>
    Content
    </div>
    <div data-role=”footer”>
    <h4>Page Footer</h4>
    </div>
    </div>

    To this (Code changed/added is in bold):

    <div data-role=”page” id=”page3″>
    <div data-role=”header”>
    <h1>ScaleViz VIP RSS Feed</h1>
    </div>
    <div data-role=”content”>
    <script type=”text/javascript”>
    $(document).ready(function () {
    $(‘#vipfeed’).rssfeed(‘http://scaleviz.co.uk/feed/’, {
    limit: 5
    });
    });
    </script>
    <div id=”vipfeed”></div>
    </div>
    <div data-role=”footer”>
    <h4>Page Footer</h4>
    </div>
    </div>

    Notice: In the code above I changed the title, and in page one I also changed the “page 3 link” in the unordered list, from this:

    <li><a href=”#page3″>Page Three</a></li>

    To this (Code changed/added is in bold):

    <li><a href=”#page3″>RSS  Feed</a></li>

    Here is our result:

    Here's the home pageHere's the RSS Feed

    Screenshots were captured directly from an iPod Touch, here’s a live version of our Web App so far.

    To change the feed link, change the text in bold from the following line of code, from this:

    $(‘#vipfeed’).rssfeed(‘http://scaleviz.co.uk/feed/‘, {

    To this:

    $(‘#vipfeed’).rssfeed(‘http://www.yourblog.com/feed/‘, {

    The variable passed to the feed, is the ID of the Div used to place the feed in your page.

    $(‘#vipfeed‘).rssfeed(‘http://scaleviz.co.uk/feed/’, {

    <div id=”vipfeed“></div>

    To change the amount of results returned change this line:

    limit: 5

    To This:

    limit: x
    Where “x” is the number of feeds to return.
    Note: If the blog owner has set the limit on feeds, changing this number will make no difference and you will need to go into your blog’s reading settings to change the limit, in WordPress you can find a setting called “Syndication feeds show the most recent”, under “Settings – Reading”.

    Copyright © Shane Hogan
    Do not copy this article.