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.