Ironpaper Webintel: Knowledge base for internet business and web development.
Topic:

programming

GPE 2.4 has ability to create App Engine-connected Android projects

Tuesday, May 10th, 2011

Google is releasing an update to GPE that allows users to bring together two great platforms for development: Android and App Engine, which will allow developers to host their backend service and store their app data on Google's cloud service.

Project Creation for App Engine-connected Android projects
The new release of GPE 2.4 will provide a way for developers to create App Engine-connected Android projects. The project wizard creates instances of full-functionality Android and GWT clients which can connect to the App Engine backend.

Cloud to Device Messaging (C2DM)
This new service allows developers to build applications that have better battery performance by sending  lightweight pings instead of polling for backend changes on mobile devices. The lightweight pings can identify pending data. The best part is that the new GPE release will allow the use of this functionality simply by connecting to the remote Google app-specific code.

RPC boilerplate code within a few clicks
Removing the hassle from creating code that enables your mobile application to communicate with backend servers, the new release will provide all the underlying boilerplate code within a few clicks.

NOTE:
Mobile App Developers:
You'll need to install the Android Developer Tools (ADT) plugin as a prerequisite to GPE 2.4 Beta

Outline of Google’s new shopping API for web designers

Sunday, December 26th, 2010

Google has replaced the old Google Base API with a new shopping API, which will allow eCommerce focused users to contribute content and products into Google's databases and build web applications from Google's databases. The shopping API program was intended to be the next generation of the Google Base API program. The shopping API won't support all the previous uses of the former application, and they recommend to explore solving non ecommerce related needs using other tools. The content and search APIs can be used separately.

There are two components to the new eCommerce web development API:

  • Content API: Programmatically work with structured data that you contribute to Google Product Search and Web Search.
  • Search API: Allows web developers to build applications using product data from Google.

Even though the Base API will be terminated, some of the components of that tool may live on other Google tools.The Base API will be removed on June 1, 2011, but the company has created a migration guide to help web designers with updating their applications and data structure.

The content API will allow users to upload product data into many Google properties, including:

  • Google Commerce Search and Shopping Rich Snippets
  • Product Ads and Product Ads
  • Google Affiliate Network
  • Google Product Search

Fix WordPress Quotes By Displaying Straight Quotation Marks

Tuesday, June 29th, 2010

By default, WordPress will convert your straight quotation marks into curvy quotation marks (Smart Quotes or left/right quotes). This function makes the quote marks much prettier than straight quotes, but they have a fundamental problem. When someone tries to cite your blog post or if you are posting a code snippet, the curvy quotes will cause errors and not display correctly as they are pasted into the new system, social media site or CMS/blog.

Unfortunately, we recently faced this problem, as users of this website (Webintel) could not replicate the code snippets that we were sharing. (Sorry about that!) So once we realized this, we had to find a fix...and quick!

We discovered this solution from Noob Cube's Jarod Taylor (www.noobcube.com/.../).

To remove the curvy (smart quotes) from your WordPress post content, paste the following PHP snippet at the end of your functions.php page in your theme folder. Please note: we tested this on a few themes and noticed that this can cause errors with certain functions.php files that have been modified. Simply make a backup of your original file prior to trying this out.

Please the code at the end of your functions.php page:

<?php
remove_filter('the_content', 'wptexturize');
?>

You can also remove the curvy quotations from titles by adding this code:

<?php
remove_filter('the_title', 'wptexturize');
?>

GoogleCL – Introducing Command Line Access To Google Tools

Saturday, June 19th, 2010

Google has released a new tool that will cause web developers and high-tech hobbyists to jump for joy.  It is a simple but desired productivity application. GoogleCL is a very simple app that gives command line access to a broad range of Google products: from Google calendar to Picasa. The GoogleCL app is a command-line interface (CLI) is a Python based application that makes Google Data API calls through the command line. For those that has not seen this before, it is kindred to the Microsoft MS-DOS command-line interface.

Notes on origin: It was the Google Street View Team that created this application and released it for public use. Thank you if you are part of the team and reading this!

Sample GoogleCL command for Calendar

$ google calendar add “Ironpaper staff party in New York City at 10pm”

Blogger command for GoogleCL

google blogger post --tags "titleoftag" --title "Title of Post" "Today, I posted this article using Google's new commandline application called GoogleCL"

GoogleCL for Conacts

google contacts add "Jonathan Franchell, j@example.com"

There is a list of GoogleCL command line scripts available from their Code base at: http://code.google.com/p/googlecl/wiki/ExampleScripts. A manual is also available for command line scripts and using the new application from this page.

Notes: As you reference programs ( AKA "services"), you will need to use the lowercase for program names. For example, if you are referencing Picasa, you will need to write "picasa." For the tasks, you can simply write a designated (common) name for the proceedure, like: add, tag, post, or delete.

HTML 5 Canvas Element

Thursday, June 10th, 2010

HTML 5 will usher in a whole host of new possibilities for developing without  the need for plugins such as Adobe's Flash Player.

Thoughts on plugins like Flash Player
Whether or not Flash is on the way out remains to be seen. There are compelling arguments for the elimination of Flash from a web developers vocabulary, but Flash is also a very exciting and rich medium. One complaint about Flash focuses on the processor usage in an era where mobile web technologies and battery life are ever critical. Search engines still do not accurately crawl and analyze Flash content properly. And, Apple has taken a stand against Flash with it's extremely popular mobile products. Don't get us wrong.... Flash has a lot of positive features also, and we are not fully in support of the downfall of Flash either.

HTML 5 Canvas Element
In short, the <canvas> element allows for dynamic, scriptable rendering of 2D shapes and bitmap images. Apple was the first to use the element for their Mac OS X WebKit which powered their Dashboard widgets. Not all web developers have been thrilled with Apple's push for the canvas element as opposed to the SVG standard for instance. Canvas is a  drawable region that is defined within HTML code. The HTML 5 canvas element is very exciting because it opens up possibilities for functionality that was once the completely dominated by Flash in the context of web applications. The <canvas> element will make such interactions easier and cheaper to program into web applications. Although, the new element <canvas> is defined in HTML 5, you will still need to rely on a programatic language to create actions--Javascript is a very popular approach to building such functionality.

<canvas> has two attributes: width and height. Height and width are both optional properties. (Note: If you do not specify a height or a width for <canvas>, then your canvas will be 300 pixels wide and 150 pixels high. If the rendering of your canvas element seems distorted, then you will need to specify a height and width.

Here is a code snippet that uses the canvas element:

<canvas id="example" width="500" height="500">
This plain text will displayed if your web browser does not support HTML5 Canvas.
</canvas>

The <canvas> element has a DOM method called getContext, and the getContext() takes one parameter. Below is a sample definition:

1. var canvas = document.getElementById('blahblah');
2. var ctx = canvas.getContext('2d');

You can use the onload attribute in the <body> tag to call to a function that you create using javascript to give definition to canvas (by ID).

More info on HTML 5

Turn Your Chrome Browser Into A Free Web Developer Toobox

Thursday, May 27th, 2010

Use Google Chrome to turn your browser into a web development toolbox. There is a broad range of tools that can allow you to bypass the expensive Adobe Web Standard suite of software and load up your web browser with some pretty hot tools for web design. Granted, this can also be done with Mozilla's Firefox web browser, but for now we will focus on Google's Chrome browser.

To start, explore the extensions marketplace for Google Chrome at chrome.google.com/extensions/featured/web_dev. If you make it to the extensions homepage, from the left hand menu select the FEATURED > WEB DEVELOPMENT option to find the available tools.

https://chrome.google.com/extensions/featured/web_dev

There is a mini arsenal of great tools designed for the Chrome Browser to be had from this marketplace. This is a fantastic alternative to high-end software options for the Mac and PC. This could be a godsend for small businesses trying to get off the ground but coping with the challenges of  growing pains and software licenses for web design. One of the great aspects of this approach is that you can basically build a web development workbench within about a half hour simply by installing some free  add-ons to your web browser.

Here are a few recommendations:


Editor
Easily edit HTML right inside your web browser. It provides a quite handy grouping of code tags and a wide text field that displays above your page.


Picnik
Capture web pages and edit images within your web browser using this great application, Picnik. For simple image editing tasks, this is a very speedy and efficient alternative to using Photoshop or Fireworks.


Web Developer
Adds a toolbar button with various web developer tools very similar to the Firefox Web Developer extension. It has some quite handy gadgets, including a CSS panel, Forms panel and a wide variety of image focused functions such as "find broken images."

There are a great many for nifty tools, such as:

  • CSS Reloader
  • A JavaScript Tester
  • PHP Documentation
  • JSonView
  • A validity icon in the address bar allowing you quick access using  Ctrl+Alt+V to validate the current page.

Content Management For Small Businesses: Does My Business Need A CMS?

Tuesday, May 25th, 2010

Many small businesses facing the decision of building a website come across the question of content management. In essence, the business managers need to balance short term costs and long-term usage of a website. Many business managers find themselves asking: "Should I spend more initially and add the right content management system to power our site? Or should I just get something out there and try to add it later?" The question is not always simple. For one, many business owners make the decision of upgrading their online presence too later or long after it is needed. Then after deciding to move forward on the project, the business managers feel pressure to get something out there ... and quick. The details can often feel complicated and detached from the real world needs of the business.

For one, we feel that every business has unique needs... just as each business has a unique story and motive that drive it. Some businesses thrive with little overhead, while others are burdened with short staffing, lack of infrastructure and out-moded technology. So, when a company find themselves having to make decisions about an investment in web technology and a website, we figured it could be helpful to have a set of questions to ask and seek answers for.

Do I need a content management system?
If your company plans on making frequent or  semi frequent updates to content or would like to more closely tie in marketing activities to the web, a content management system will be essential. Even having a webmaster on staff can cause delays with the gap between content decisions (editors and writers) and the publisher (web master). Updating and styling HTML can take time--especially when the request pile in... even an inhouse webmaster can get overwhelmed when making routine content updates. A CMS can simply allow for faster publishing and a better response to marketing initiatives. Website visitors for instance will be far less inclined to visit a website that is static and does not have frequent updates. Search engines also crave websites that are frequently updated--thus awarding them higher ratings and better positioning within their rankings.

What are the costs for owning and running a CMS?
The upfront and licensing costs for a CMS will vary from vendor to vendor--and depend on a large number of factors. Many small businesses feel compelled to go with an open source option, because there are many free software packages for content management available on the market. Joomla, Drupal and WordPress are just a few options available, and they are feature rich. Just because they are free and have a heaps of features does not necessarily mean that they are right for your company. There are other factors to consider, such as security, implementation costs, load time, update costs, maintenance costs, scalability and modularity. Free open source technologies can have hidden costs and long term challenges that may not be an immediate consideration in the planning phase of a web project. It can be a good idea to consider a couple options  and take a close look at your needs and capabilities. Below are a list of costs involved with content management systems:

  • Licensing
  • Implementation
  • Modules
  • Maintenance
  • Support, training and consultation
  • Upgrading
  • Migrating

All of these types of costs can be charged as either a one time fee or as ongoing payments --depending on the vendor, software company or product. It is important to consider the costs beyond the initial implementation of the CMS.

Is it possible to have a hybrid system: one part open source and another part custom?
Yes, it is. Open source systems like WordPress can be modified and adapted towards a broad range of uses. For web designers, there can be a lot of fun in trying to figure out new approaches to adapting open source frameworks and platforms. For instance, Ironpaper has a few proprietary content management systems that we take a lot of pride in. Our CMS can integrate with WordPress and share data across the platform divide, which a number of our clients have really enjoyed. Even open source support communities themselves have long tinkered with hybrid integrations between different products--just take a look at the vast array of extensions, components and add-ons to a product like Joomla for instance. Content management design and development is a very creative process that can go a long way to building strong brands and better businesses.

How To Embed Video In A Web Page

Tuesday, May 4th, 2010

Video is becoming more and more important  for the web. Even individuals and small companies frequently employ videos within their websites for marketing, promotions and as general content. Videos have seen great success when used as viral content for marketing.

This brief article shows how to publish video within a web page using HTML and attributes.

Sample code: Simple embed video within HTML source:

<embed src="example.mov" width="250" height="300" controller="true">

The above option is fine if your movie is very short. Longer videos will absorb more bandwidth. In such cases you will need to refine your approach.

Alternate options for embedding Video:

  • Youtube: Fast, easy and free. The downside is that you lose control of the source video and it circulates through the Youtube sites and can be embedded on other websites.
  • Vimeo: A new alternative to Youtube. Great for sharing videos and embedding them in a web page. Also, allows your video to be shared within communities.

Resizing your embedded native video but keep the aspect ratio:

<embed src="example.mov" width="650" height="450" scale="aspect" controller="true">

If you choose to resize the video but want to preserve the aspect ratio of the video, you can add an attribute to the <embed> code to prevent distortion. The snippet of code "scale" will allow you to reduce a larger video such as the common size 1280 x 720 to 650 by 450 but not stretch or distort the image. Without the scale code, you will crop the video arbitrarily.

HTML5 will make embedding video in a web page easier!

With the advent of HTML5, embedding a video in a web page will be a snap. The <video> element will be introduced with HTML5. It will also expand and enhance what you can do with video on the web. Currently, there is a battle between web browser designers over what video codec should be supported. Apple and Microsoft are fighting for a video technology that would impose patent issues. For more information about the fight over video technology standards for HTML5 see /Current. There are a number of highly popular video technologies being used widely, and they include: MPEG 4, typically with an .mp4 or .m4v extension, QuickTime container (.mov), Flash Video, typically with an .flv extension, Ogg, typically with an .ogv  extension, Audio Video Interleave, typically with an .avi extension.

Services: web video production and marketing