Ironpaper Webintel: Knowledge base for internet business and web development.
Web design Web development HTML5 SEO CSS Content Management
Topic:

web development

Single page web apps will become a bigger part of web design

Thursday, December 29th, 2011

Single page, application websites (or microsites) are often used to replicate the experience of  native apps, especially mobile apps.  Such applications are designed to act like native apps by rarely or never needing to be refreshed. They often are developed using frontend javascript to create dynamic user interactivity. For a long-time, such a reliance on javascript was discouraged on the web for a number of reasons, most notably since it can break the "back" button on browsers and it's inability to deep link into the application or website.

Such website applications are becoming more common. Twitter and Facebook are examples of such applications and are testament to their growing popularity.  Web designers are adopting the #! / web app mentality ever more, as the approach is spawning new, rich forms of interaction online.

HTML5 paves the way to greater interactivity and better design

HTML5 will help single, page web apps become more exciting, engaging and usable. Problems, such as breaking the browser "back" button, will be relieved by the new capabilities of HTML5 (HTML5 History API will help solve this issue for example). The promise of HTML5 has already helped to dethrone Flash, as a staple for interactive web design and development. Adobe has ceased to support Flash for mobile at a time when mobile is becoming more of a necessity than a luxury for businesses, brands and organizations.

The new capabilities of HTML5 will power a new breed of websites, applications and microsites and create a new level of interactivity online that will be user-experience and data centric.

The web becomes "native"

Single, page web apps have already become a steadfast part of mobile web development. With the broad support for HTML5 on smartphones, native apps are nolonger required universally, although at times they may be the best tool for the job. In many instances, website applications liberate brands from entrenched mobile marketplaces and still provide excellent functionality and marketability. In a world where the "cloud" buzzword breeds excitement and possibility, the web is finding new ways of achieving accessibility and powering rich interactivity. Single, page web apps will have their place in this next phase of web development.

Tags: , ,
Posted in Knowledge Base | Comments Off

Automatically extend years in static dropdown checkout forms using javascript

Friday, October 28th, 2011

There are many ecommerce websites that have static coded checkout forms. For these forms, the code to populate the drop down lists for years may be hard coded, which presents longterm problems for your website. In cases where PHP or another suitable language is prohibited, you may be looking for a way to expand the year option of a field automatically.  If so, you can insert this javascript in in place of the hard coded <option>s, it will set the years options to be the current and go up to 10 in the future.

This solution works great with Adobe Business Catalyst projects, where the original eCommerce form has been manually over-written (for whatever reason).

<script type="text/javascript">

var d = new Date();
var curyr =d.getFullYear();
document.write('<option selected="true" value="'+curyr+'">'+curyr+'</option>');
for(cur=curyr;cur<curyr+11;cur++){
document.write('<option value="'+cur+'">'+cur+'</option>');
}

</script>

Tags: , ,
Posted in Knowledge Base | Comments Off

Custom Web App Fields in Adobe Business Catalyst – Text (Hyperlink) vs Text (String)

Thursday, October 6th, 2011

By Chris Wallace

This is an issue that has caused me some headaches when working with Adobe's Business Catalyst content management system, so in the interest of trying to prevent the same from happening to you, I'd like to share some tips about these fields. First, an explanation of the behavior.

A custom web app field with type Text (String) will display exactly as entered when outputted on the front end.

A field with type Text (Hyperlink) will output automatically wrapped in an <a> tag with both the href property and the text of the <a> tag set as what you entered.

The result of this is that if you want to display the link on the front end, if you use Text (Hyperlink) you have no choice over what the text actually says. You can't change it to "Click Here", "Article Title", or anything else, it will always be "http://theurlyouentered.com".

Unfortunately, you can't change the type of a field once data has been entered. We set up one client with a web app that had two URL fields, and they entered hundreds of items in to the system. When it came time to display the link on the front end though, I realized that there was no way to edit the text, so instead of the link saying "Click here" as it was supposed to, it was saying "http://urlthecliententered.com", which happened to be quite a long URL with lots of GET variables.

So how did I solve the issue? To sum up the process, first, I created <div>s where the links would go. I then assigned the full output of the adobe tag {tag_fieldname} to a javascript variable. Next, I parsed the actual URL, without the HTML tags, with a regular expression. Finally, I added the script that said when the page loads, insert my own custom <a> tag with the parsed URL as the href value, and the display text of my choice, into the correct <div>. Worked perfectly!

There are two ways to do this, with jQuery and without jQuery. Below are both versions.

Non-jQuery:

<div id="linkgoeshere"></div>
<script type="text/javascript">
var linkhtml = '{tag_fieldname};'    //assign output of adobe tag into a JS variable
//it will look like this:
//<a href="http://www.site.com">http://www.site.com</a>
var linkurl = linkhtml.replace(/(<([^>]+)>)/ig,"");      //strip out the html tags with a regex
var goodhtml = "<a target='_blank' href='"+linkurl+"'>Click Here!</a>";      //assign the a tag in the format we want to a variable
document.getElementById("linkgoeshere").innerHTML = goodhtml;      //insert the html into the div on our page
</script>

jQuery:

<head>

<script type="text/javascript" src="/js/jquery.js"

</head>
<body>
<div id="linkgoeshere"></div> 

<script type="text/javascript">

var linkhtml = '{tag_fieldname};'    //assign output of adobe tag into a JS variable

//it will look like this:

//<a href="http://www.site.com">http://www.site.com</a>

var linkurl = linkhtml.replace(/(<([^>]+)>)/ig,"");      //strip out the html tags with a regex

var goodhtml = "<a target='_blank' href='"+linkurl+"'>Click Here!</a>";      //assign the a tag in the format we want to a variable

$("#linkgoeshere").html(goodhtml);      //insert the html into the div on our page using jQuery

</script>

</body>

Learn more: Ironpaper: web design

Tags: ,
Posted in Knowledge Base | Comments Off

Ordering Web App Items by Date in Adobe Business Catalyst

Tuesday, October 4th, 2011

This issue recently came up simultaneously on several of our websites built using the super easy to use Adobe Business Catalyst CMS. It's a great system for getting sites up and running quickly, but sometimes it takes a minute to figure out how to fully customize everything to your own specifications.

For example, by default, web app items are listed alphabetically whenever you use {module_webapps} to display them as a list, no matter what other parameters you pass. There's a simple way to change it, but it may not be what immediately jumps to mind. I originally thought that when adding the module to a page, there would be a setting "order web app items by…" and a list of options such as alphabetically, by date, etc. After probably too much time looking for such a selection, I realized there would have to be another way.

The Business Catalyst documentation at kb.worldsecuresystems.com can be hit or miss, but I took my chances and went to see if it could help. If I can't find something quickly in the docs, I usually just get on chat with one of their support people. But luckily I found just what I was looking for. The docs explain how to order the web app items by date here.

Adobe BC CMS - news item listing by date

Basically, you enter the dates in the "weighting" field on the individual web app item page under "more options". Enter it in the format YYYYMMDD. Because of the way the weighting works, i.e. the highest numbers go to the top, this ensures that the most recent items, whether news or events or anything else you might want to list by date, appear most recent first. But make sure you enter in the date that way for every item, or else the ones that don't have a weighting will list alphabetically after the ones that do.

Happy site-building!

Tags: ,
Posted in Knowledge Base | Comments Off

Are dashes better than underscores for SEO?

Wednesday, August 17th, 2011

Here is an old SEO question... Which is better for improving a page's ranking in search engines--dashes or underscores? The difference between dashes and underscores for SEO for Google is fairly small--a second order effect--not a primary factor in ranking, but there is a difference which should be noted.

Dashes are used as a separator, which allows for distinction between terms. For example, a URL "website-designer" will be seen clearly as two separate words, whereas underscores have been built into Google's framework as a joining element--drawing a close correlation between the words--essentially creating a statement.

Matt Cutts, from Google, does a fantastic job explaining the difference. He ultimately recommends uses dashes over underscores, but comments that the difference between the two is not a big factor in ranking.

Tags: ,
Posted in Knowledge Base | Comments Off

List your content alphabetically in Drupal

Monday, August 1st, 2011

In Drupal, it is fairly simple to create alphabetized lists of content items. The approach that I am about to describe is just one of a few ways to do just this--perhaps one of the easiest, as it comes straight out of the box.

Create a custom content type

We would recommend creating a custom content type for your content list. This will allow you to group all your content items under one parent grouping. As you (the web designer or website manager) goes to add content to the site or proof the content in the site, you will be able to quickly sort the content items by the "content type" or grouping. This can be mighty helpful as you browse for specific content items (and you don't want to wade through a mound of misc. pages).

Drupal - find content by type using a filter

Customizing your new content type

Your new content type is a "home" for all content related by your conceptual grouping. You can customize a content type by adding new fields and data-types. This can allow building  structured data--a column grid or a list of data fields. It can also allow you to add things like a downloadable PDF or Word Document to your page. To give you an example, let's say you were designing a website that required a Press Section. In the Press Section, you want to have a normal web page that is editable, but also a single downloadable PDF "take-away" for the page. You can simply add a new data field using the "file" option, and the Drupal framework will take care of the heavy lifting of the new piece of functionality.

Website design using Drupal to edit fields

Above: find the "Manage fields" menu inside "edit" content types.

Build a database driven web page using custom fields

Above: Shows the process of creating a new custom data field in Drupal.

Adding your list to a new web page

Once you have created your new content type, specified the fields and added content to your new content type, you can now proceed with creating your "list page". For this you should go to your Admin menu and select "structure." Inside "structure" you can select "Views" and create a new "view." A view will allow you to create a list of content items from your content type. Once you type a name for your new view, you can proceed with selecting the content that you would like to display on your new web page. Choose your new content type and try sorting by title.

Now making your list alphabetical

You can modify and customize your view in numerous ways. Ultimately your view will act as a web page. It will have a URL, which you can specify and a page name. You can alphabetize your content list by going to "Sort criteria" and selecting descending or ascending--as you wish. You can also further customize the display of this content list. For example you could choose to display some teaser text below the title or even display a date field (that you will need to add using the field manager).

Creating an alphabetical list of content items in Drupal

Tags: ,
Posted in Knowledge Base | Comments Off

Using a robots.txt file to disallow a directory

Friday, May 27th, 2011

Website owners and designers can provide instructions to search robots to deny or provide access to specific parts of their website. It can be helpful if you have specific pages or sections of a website that you do not want to show up in search results. The practice can be abused as well, as some engineers build robots to specific search for and cache content contained within restricted areas. Those more sensitive areas (called to in the robots.txt file) should be protected. The robots.txt file is only a set of instructions--not a security mechanism. Google and other major search robots do follow the instructions within the file. The /robots.txt file is a publicly available file

It works likes this: a robot wants to vists a Web site URL, say http://www.cool-website-example.com/mypage.html. Before it does so, it firsts checks for http://www.cool-website-example.com/robots.txt, and finds:

User-agent: *
Disallow: /

These instructions tell the bot to not cache any content within the website.

Here are a more specific set of instructions:

User-agent: *
Disallow: /cgi-bin/
Disallow: /data/
Disallow: /~bob/

You need to create a unique line for each directory that you are restricting against. You cannot have both /cgi-bin/ and /data/ on the same line as a separate set of instructions (like this "Disallow: /cgi-bin/ /data/. This just won't work. Instead use the model above.

Tags: ,
Posted in Knowledge Base | Comments Off

SSH help: Unzip a directory on a remote server

Tuesday, May 24th, 2011

Let's say you built a website locally and need to upload the whole thing to a remote UNIX / Linux server, but your site is quite large with numerous files, which would take a while to upload. Also, sometimes uploading a copy of a website can be tricky if you miss a file and forget to check the log--your site could have problems.

One solution is to use SSH to unzip your whole directory on the remote server--it is quick and easy. It can cut your time down significantly and ensure an easy-breezy transfer.

First, zip all the files that you wish to upload to the server, and go ahead and use FTP to upload the files to the proper directory. Then enter the terminal and login to using SSH. Not all hosting accounts will allow SSH, so you may need to check with your particular server to ensure they allow it.

Your login command will look something like this:

ssh user@host

After "ssh" you will need to join your username to your host with "@" like above.

Then locate where you are by using the command "ls", which will list all directories below your entry point. You can then change directories by "cd" like so: "cd my-directory-name".

Once you find your ZIP file that you previously uploaded, you can unzip it quite easily by the following command:

unzip myfile.zip

Enjoy.

Tags: ,
Posted in Knowledge Base | Comments Off

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

Tags: , ,
Posted in Knowledge Base | Comments Off

HTML 5 microdata: making content machine-readable for web design

Tuesday, January 11th, 2011

Microdata has been a particular focus area of the HTML 5 development. Essentially, microdata ( is a meta data ) that allows designers to create annotations for content in formats that are  machine-readable.

Microdata contains name-value pairs grouped together and dubbed "items".  Microdata items  have properties that provide definition to the elements they surround.

Five of the most common metadata formats:

  • Itemscope - Declares that an item is a microdata element and states that all child elements are components of the microdata format
  • Itemtype - Defines the vocabulary to be used by the microdata format.
  • Itemprop - A data element
  • Itemid - A unique identifier of an item
  • Itemref - Can reference another element on a web page using an id

Example of usage in HTML:
The following is an example usage of itemscope. In this example, all the child elements of <p> are part of the itemscope meta data.

<p itemscope itemtype="">Content goes in here</p>

Microdata can be nested to provide context. It can also create associations using common information formats--for example, group first name and last name into the annotation of a person's name:

<span itemprop="name">Tony Hawke</span>

Search engines already use the meta data or microdata of web pages to provide more context for the content of sites they crawl and rank. Google for instance already supports the following information types:

  • reviews
  • events
  • people profiles
  • products
  • business listings

SOURCE:

http://www.w3.org/TR/html5/microdata.html

Tags: , ,
Posted in Knowledge Base | Comments Off

« Older Entries