Open Source Web Frameworks
Frameworks are near and dear to the hearts of modern web developers, but why should you be interested in them? Because open source web frameworks allow developers to build you multi million dollar websites for only a tiny fraction of the price.

When the World Wide Web was in its nascent stage, websites consisted of simple, static pages which were straightforward to create and edit. In the time since, websites have evolved into complex, dynamic entities. Even seemingly basic website functions like password-protection can involve tremendous complexity, requiring hundreds or thousands of lines of code (and many thousands of dollars) to develop. Without open source web frameworks to address this complexity, most companies wouldn’t be able to afford the development of a truly modern website.

What is a Web Framework?


A web framework is programmer-speak for a reusable, solid foundation for a website or web application. Much like a wooden frame of a house supports its functional requirements while still providing nearly limitless customizability, a web framework addresses many programming requirements of modern websites, without getting in the way of the creation of a custom site. It allows your site’s developers to focus more time and effort on your specific needs, and less time and money on the needs of the Internet, servers, databases, and other stuff you probably don’t care about.

Most modern websites are built on open source web frameworks, from huge web applications like Twitter, all the way to obscure blogs. Open source frameworks are simply frameworks that are developed and improved by communities of programmers, and that are freely distributed for use around the web. Using an open source framework allows you to reap the reward of millions of dollars of professional programming, for free.

The Benefits of Open Source Web Frameworks


Using a web framework for your web project offers numerous benefits which can be broken down into a few main categories:

  • Affordability – Since developers don’t have to reinvent the wheel every time they start a new web project, you only pay for the work specific to your particular needs. And since you don’t need to spend money on the boring stuff, you can afford more functionalities than you may have originally anticipated.
  • Security – How can code that everybody has access to be more secure than private, custom code? Since so many developers are constantly scrutinizing and improving open source frameworks, security flaws that do exist are detected early and fixed before they ever become a problem. One study has suggested that private code may contain over 100 times the number of errors as open source code. 1
  • Extensibility – Because so many developers use the same web frameworks, there is a good chance that any problems associated with particular functionality requirements have already been solved by others. Entire communities tend to develop around open source frameworks, through which solutions to common problems and code to provide new functionalities flow freely. (This is the concept behind the very popular ‘Plugin’ for WordPress.)
  • Maintainability – Since many developers are familiar with the same popular web frameworks, finding somebody willing and able to maintain your site is significantly easier. And since most web frameworks follow best programming practices, the likelihood that you’ll ever encounter a problem that needs to be fixed is significantly reduced.

Popular Web Frameworks


The most popular open source web framework in use today is WordPress, which is estimated to be powering more than 1/5th of all new websites in the US2. Originally designed to specifically address the needs of blogs, WordPress has since evolved into an extremely powerful and popular multi-use framework with an estimated development pricetag of $2.3 million3. We’ve found WordPress to be an extremely effective solution for addressing the specific needs of the majority of our clients.

When our clients requirements exceed the capabilities of WordPress, we turn to another open source framework, CakePHP. With an estimated development cost of $8.9 million4, CakePHP is designed to power high-complexity, data-heavy web applications. (Keep an eye out for our future posts on CakePHP.)

While both WordPress and CakePHP are written in the PHP programming language (which many clients prefer to use for their websites), web frameworks exist for nearly every programming language out there. Other popular non-PHP frameworks include the immensely popular Ruby on Rails, written in the Ruby language, Django, written in Python, Express, written in Javascript, and Struts, written in Java. Each framework carries with it certain benefits and drawbacks. Your developer should be able to help you find the right framework to suit your needs.

I’m Sold. Where Do I Get Started?


We recommend WordPress for people just getting started with web frameworks. WordPress is well-suited to individuals with little or no programming experience because unlike many of the other frameworks mentioned above, it provides a functional website right out of the box. And while WordPress certainly has its limitations compared to more robust frameworks like Ruby on Rails and CakePHP, it can be customized and extended to meet the requirements of the vast majority of websites. Additionally, most hosting providers offer support for PHP (the programming language in which WordPress is written), and the WordPress community contains a lot of great resources for those new to the framework. You can find the official Getting Started documentation on WordPress.org.

If you want to take advantage of the power of open source web frameworks, but would rather not spend your time learning new programming languages, give us a call or contact us through our website.

1http://www.wired.com/software/coolapps/news/2004/12/66022
2http://techcrunch.com/2011/08/19/wordpress-now-powers-22-percent-of-new-active-websites-in-the-us/
3http://www.ohloh.net/p/wordpress/estimated_cost
4http://www.ohloh.net/p/cakephp/estimated_cost

Comments Off

Designing for eBooks

By Jake | December 30, 2011

Designing for eBooks
Jake recently designed a series of academic textbooks for Westview Press and it got us thinking… what would it take to convert the printed books into an eBook format? This post touches on the basics of creating eBooks, specifically modifying cover designs to the required specifications.

Overview


Electronic books were originally designed to display text with minimal images. For that reason, children’s books, cookbooks, comics, etc. do not translate well and often have trouble displaying correctly across platforms. A good rule of thumb is that eBooks work best for text-heavy novels and long, narrative articles (think best seller lists and The New Yorker). That being said, readers are constantly evolving and expected to soon support graphic-heavy books. In fact, Apple’s iOS devices already support fixed-layouts, so it is safe to assume other readers will soon do the same. Either way, eBooks still require a strong cover design to attract interest in the book.

eBook Formats


Any electronic book is considered an eBook, but over 90% of all eBooks are read on Amazon’s Kindle, Apple’s iOS devices (iPad, iPhone and iPod) and the Barnes & Noble Nook using these formats:

  • EPUB: This is an open standard adopted by Apple (iOS), Barnes & Noble (Nook) and many other makers of eBook readers (such as Sony).
  • Kindle: This is a proprietary format that Amazon uses for its Kindle, which is a modification of the Mobipocket format.
  • PDF: PDF is inherently made for print and doesn’t display well on digital devices. But if you really need to get data out to an iOS or Android device now, then it’s a useful format.

Making Your eBook


There are multiple ways to create your eBook. Some of the most popular methods are:

  • Amazon’s Kindle Direct Publishing (kdp.amazon.com): KDP is a fast, easy self-publishing tool that lets you publish your digital text content for the Amazon Kindle.
  • Kindle Plugin for Adobe InDesign: Create Kindle books in-house using a free Kindle Plugin that converts your file to a Kindle format. You can download the plug-in at www.amazon.com/kindlepublishing.
  • Outsourcing: Services such as Lulu and Smashwords will translate your Word document into an eBook format. In addition to creating your book, they will also submit it to Apple and Amazon bookstores for a small fee.
  • Hand Coding: More on this in a future JakeIntel post.

eBook Covers Formats


Since eBooks are used on various platforms and purchased online, they require a few different cover formats:

  • Embedded eBook Cover: The cover embedded inside your eBook that displays as the first page. This can and should be separately sized to each store’s specifications.
  • Catalog Cover: The cover that shows up in the eBook store on Amazon, B&N, ect. Generally uploaded separately, and also used at a thumbnail size when displaying search results.
  • Publicity Cover: This cover is used on your website, ads and other marketing materials. Size vary based on the application.

Cover Specifications


In addition to the various cover formats outlined above, each reader has slightly different size requirements. You can reference the chart below when creating your covers:

  Format Size in px Resolution File Size
Kindle CC JPG, TIFF min 500px max 1280px 72 dpi n/s
Kindle EC JPG 600 x 800 167ppi – 300dpi 127kb
B&N/Nook CC JPG, GIF, PNG 600 x 730 n/s n/s
B&N/Nook EC JPG, GIF, PNG 600 x 1024 170 ppi 300kb
iPad EC JPG, GIF, PNG 600 x 860 132 ppi 200kb

If you are unable to produce multiple covers, your best bet is to create a 600×800 JPG. This isn’t the optimal cover size for each reader, but it should cover all your bases. In addition to the sizes noted above, remember to convert all graphics to RGB. Any files submitted as CMYK will be rejected.

Designing Your Cover


In most cases you can simply resize your printed cover to fit the required specs, but occasionally a redesign is needed since not all covers translate well on screen or at smaller sizes. For example, a cover that uses gold leaf or embossing will not display well on screen. When redesigning your cover, it is best to stick with simple, but bold graphics and strong type treatments. Jake’s design for Supreme Decisions: Great Constitutional Cases and Their Impact is a perfect example of strong graphics and type that convert well to the Amazon Kindle and other e-reading devices:

eBook Covers

Comments Off

CSS3 Media Queries and Responsive Web Design

By Jake | November 22, 2011

CSS3 Media Queries

CSS Media Queries are not new, but CSS3 is making them considerably more practical for every web developer, and designer to know. They are new ways to serve CSS styles to the browser, with a particular emphasis on targeting mobile devices.

For the Non-Developers


CSS or “Cascading Style Sheets” are what make a website look the way it does. They can control the size of everything on the page from images to text. They control colors, fonts and the overall layout of a site. What Media Queries do, is let us specify change those settings under certain conditions. These changes can be as simple as changing the color of a link, to changing the whole layout.

Now and Then


The most common use for Media Queries up to this point has been the creation of a Print Stylesheet. A Print Stylesheet allows developers to specify how a page should look when it is printed, such as to remove a background color from the page. There are other uses, including ways to create styles for Braille printers, audio devices, handheld devices and even projectors and TVs. The CSS3 guidelines expand on the options that are already available to us, allowing developers to target devices based on the following criteria:

Width The width of the browser window min/max
Height The height of the browser window min/max
Device-Width The maximum pixel width of the device min/max
Device-Height The maximum pixel height of the device min/max
Orientation Portrait or landscape, for devices with accelerometers
Aspect-ratio The aspect ratio of the browser min/max

The CSS3 specification includes a few extra new options, but those will be the most useful for developers and designers right now.

What It Means


All of these things can be combined to create different layouts depending on how the user is viewing the site. Obviously we can’t afford to make a website for every device, but we can use the above properties to change the site layout in stages. For instance, the iPad has a width of 768 in portrait mode. We can call a media query that will execute for all devices with a width of 768 and a width of 480, which will get used on any device that is not as wide as an iPad.

Why It Matters


The web doesn’t just live on computers anymore. People access websites from their phones, tablets, and TVs. Sadly the web doesn’t always look the same on different devices. A site that looks great on your laptop, might be too hard navigate on your phone.

People love the iPad, and the tablet market is exploding. Windows 8 is expected to be launched in 2012, and Microsoft is trying to make its mark with the first operating system that will be available on both tablets and desktop computers. It is no longer good enough to have your website display well in the latest browsers, it needs to look good on the latest devices.

Good coding can take care of most of that. If your website is coded properly, it should display more or less as intended on most devices. Media Queries come in to expand on that. Looking at a website on a 23” monitor and a 4” phone are not the same thing, and the design should reflect that.

A Level of Support


All of the latest versions of Chrome, Opera, Safari, Firefox and even Internet Explorer support media queries. The Android and iPhone browsers have supported them from the beginning. Unfortunately, the Windows Phone 7 browser was built around IE8, and therefore does not support them. But never fear, if you have a mobile stylesheet that is separate from your main stylesheet, the WP7 developers have graciously added a conditional comment that will only be registered by the Windows Phone browser.

How to Use It


There are a few ways to integrate media queries into your website. The first is to include the query in the media attribute of a link tag.

<link rel=”stylesheet” media=”(max-device-width: 600px)” href=”small.css” />

The other main way is to include a media query in your CSS file itself. This can be done by wrapping the styles in a @media call.

@media screen and (min-width:900px) {
     .class { background: #666; }
}

Lastly, to render on Windows Phone 7 devices, you will need to use a separate stylesheet, and link it in an IEMobile comment.

<!--[if IEMobile]>
<link rel="stylesheet" media="(device-width: 600px)" href="mobile.css" />
<![endif]-->

Benefits and Drawbacks


The primary benefit of this is that we can display our content in a mobile friendly way without having to deal with the hassles of a mobile site. We can easily create better looking experiences on both large and small screen devices with as little or as much effort as is needed.

On the other hand, unlike a full mobile site you can’t change the structure of the page. You can only change the design. We can still hide or minimize some elements of the page, and even change the order in which they appear, but we can’t add something just for the mobile site. In many cases you can use a different stylesheet to serve up smaller images to mobile users, improving load time. Even an image that is not controlled by the CSS, can be hidden by the stylesheet. You won’t receive the performance boost, but it can help make a more streamlined design.

Comments Off

Cloud Computing

By Jake | September 15, 2011

Cloud Computing

In the simplest technical sense, cloud computing refers to the use of a network to provide on demand access to data and data processing applications. But this definition differs little if at all from the concept of the World Wide Web as it has existed for almost two decades. Indeed, the websites, email, and online database interfaces that we use every day all qualify as cloud computing in this sense.

Much like ‘blogging’ or ‘Web 2.0’, ‘cloud computing’ is a buzzword that is more indicative of an evolving approach to how the Internet is used rather than a technology unto itself. What defines the cloud computing trend is the migration of data storage and application services that have traditionally resided on end-user hardware to the Internet. From an end-user perspective, this represents an evolution of the Internet from a ‘dumb network’ simply linking user to user, to a highly configurable and ubiquitous source of data and services.

With this in mind, the National Institute of Standards and Technology provides this definition:

Cloud computing is a model for enabling convenient, on-demand network access to a shared pool of configurable computing resources (e.g., networks, servers, storage, applications, and services) that can be rapidly provisioned and released with minimal management effort or service provider interaction.”

This trend will have powerful ramifications for many industries, including hardware manufacturers, software developers, data security and privacy providers, IT consultants, online communications professionals, and others.

What do people mean when they refer to the cloud?


The concept of the “cloud” originated in the telephone industry and was used to distinguish the line between the responsibility of telecommunication provider and that of the customer.

With respect to computing, “the cloud” really has no different specific technical definition but ostensibly, it may be used to describe the entirety of data, applications and other resources available throughout a particular network. It is also increasingly being used as a marketing term when referring to advanced services.

The “Intercloud” extends the concept of cloud computing globally. This refers to a “cloud of clouds” sharing data, applications and resources, similar to the Internet as a “network of networks.”

How does this differ from the traditional concept of the Internet?


Cloud Computing

How does cloud computing work?


Cloud computing structure has two major components, the front-end and the back-end, which correspond with the end user and network-based service providers.

Front End

  • Computer terminals: Hardware devices need not possess the processing power or range software packages that they have in the past, because they’ll be getting these from the network. Netbooks and smartphones are examples of devices that are cloud-oriented.
  • Access software: Software to access the data, applications and other services provided through the cloud. Web browsers, email clients, and phone apps are examples of such software. A fully-cloud enabled device would theoretically use just one web browser to access all online services.

Back End

  • Servers and data storage devices: Hardware within the cloud that provides access to data, applications and processing power. A website server is a very basic example of a back end resource, however in most cases cloud computing will be utilizing a network of devices each playing a particular function.
  • Administrative servers and protocols: Communication between network elements must still be organized as it has been on the Internet through a network of servers that handle traffic management according to IP protocols.

Devices and the Cloud


Cloud Computing and Devices

Examples of cloud-based services


Applications provided in a cloud-based environment are also know as Software as a Service (SaaS). Some examples are:

  • Google Apps: Word processing, spreadsheet and other productivity applications.
  • Amazon Cloud Drive: Online file storage, including for media files purchased through the Amazon store, thus creating a cloud-based music collection that can be played through Amazon Cloud Player.
  • Mint: A personal money-management service that integrates daily budget data with bank accounts, investments and other financial information.
  • Facebook: Personal networking program which provides data and media storage and distribution as well as applications.
  • Microsoft Sharepoint: Online work collaboration system.
  • Salesforce: Cloud-based customer relationship management (CRM) software.
  • Carbonite: Online automatic file-backup system.

Cloud Computing Costs and Benefits


The move towards cloud computing has at least in part been driven the pursuit of more efficient hardware implementations by larger operators such as Amazon, Microsoft and AT&T, as well as by product innovation by end-user providers such as Google. Combined, some of the perceived benefits of cloud computing include:

  • Potentially ubiquitous access to data and applications regardless of location of user;
  • Potentially reduced costs for both consumers and providers, including hardware, software and IT services;
  • Opportunity for device innovation due to reduced need for onboard computing power;
  • Opportunity for innovation in end-user applications (e.g., mobile application markets);
  • Shared-processing power/grid computing system processing power.

But cloud computing is not without its potential drawbacks, which may include:

  • Threat of major security breaches due to consolidation of data and services;
  • Risk of widespread application outages;
  • Reduced ability for end users to maintain privacy;
  • Increased reliance on network connectivity for productivity;

Unanswered Questions


In addition, the evolution of cloud computing raises some as yet unanswered questions:

  • Who owns the data in a cloud system, the end user or the service provider?
  • Is there a need for standardization in order to facilitate integration of data and apps, and if so, how will that come about?
  • Increased centralization of data and software is a move away from the original philosophy of the World Wide Web. Will this move ultimately limit the de facto ability of end users to participate as more than consumers? What long term effects on innovation and security will this have?

Resources


http://en.wikipedia.org/wiki/Cloud_computing
http://computer.howstuffworks.com/cloud-computing.htm
http://www.pcmag.com/article2/0,2817,2372163,00.asp
http://www.google.com/apps/intl/en/business/index.html
https://www.mint.com/
http://www.facebook.com
https://www.amazon.com/clouddrive/learnmore
http://sharepoint.microsoft.com/en-us/Pages/default.aspx
http://www.infoworld.com/d/cloud-computing/what-cloud-computing-really-means-031?page=0,0
http://cloudtimes.org/top-7-cloud-based-service-offerings/

Comments Off

The Google Display Network

The Jake Group recently produced a series of rich media ads for placement on TalkingPointsMemo.com, one of the millions of websites that are members of Google’s Display Network.

The Google Display Network is the non-search-related portion of Google’s AdWords advertising platform. The Display Network is comprised of millions of websites, blogs, and email newsletters and has a total reach of about 80% of all internet users. Read More …

Comments Off