web applications | Web development blog, news and tutorials - Developer Drive

Home > Tags > web applications

Page 2

Designing a Clean Website Part 2: The Layout

CSS HTML Dec 13, 2011 4 comments

Last week we discussed how important navigation is to a website and how developing an interactive navigation system will help give a clean, minimalist website a bit of character and make it feel modern and current.

It’s too easy to make a clean website look dated and as though it were developed in the 90’s, so by injecting modern user interfacing techniques that are popular today you’re able to put the viewer at ease and reassure them that the content is fresh and up to date.

We’ll pick up where we left off last time and begin by setting up the basic HTML for our page layout. Since we’re going to use a PHP include we’re going to have to save our homepage as index.php, rather than index.html.

While I’m at it, I’m going to include a logo image in my header and put my PHP include in to pull the navigation in to the homepage. For the logo I’m just using a basic version of Developer Drive’s logo, and I’ve simply named it “logo.jpg” and placed it inside a sub-directory named “images”.

You will also notice that I gave my <body> tag an id of “homePage”, we’ll explain why once we move on to our CSS file. My code looks as follows.

<!DOCTYPE html> <html> <head> <title>Creating a clean website</title> <link rel="stylesheet" href="mainStyle.css" type="text/css" media="screen" charset="utf-8"/> </head> <body id="homePage"> <header><img src="images/logo.jpg" alt="header" /></header> <nav> <?php include ('navigation.php') ?> </nav> </body> </html>

Now that we’ve got our header and navigation in place, let’s add a <section> tag under our <nav> tag and drop a main image inside of it. My HTML now looks like this:

Nick says: not having demos is a deal-breaker... just turned me off from this site entirely.

PHP User Survey: Setting Variable Values and Reading from Tables

PHP Nov 29, 2011 Add comment

In Part I of this series, we started the process of creating user polls for a business web site. Part I gave the layout of the data layer and began the construction of the class file.

In this part we will continue with adding methods to the class file that will enable the administrator to set the variable values and read from the database tables.

The setPollId($iPollId) method sets the value for the _iPollId variable. Since the constructor method calls the setPollId($iPollId) method, we must define that method as well:

function setPollId($iPollId) { // set the _iPollId variable for the class if (is_int($iPollId)) { $this->_iPollId = $iPollId; } }

The setAnswerId($iAnswerId) method sets the value for the _iAnswerId variable.

function setAnswerId($iAnswerId) { // set the _iAnswerId variable for the class if (is_int($iAnswerId)) { $this->_iAnswerId = $iAnswerId; } }

The class will also contain several methods for reading from and writing to the two database tables.

The getPollsCount method returns the number of polls in the poll table.

function getPollsCount($iStatus=false) { // get polls count for paging // set sql filter $iStatus ? $sFilter .= " AND status=1" : $sFilter .= ""; $sql = "SELECT count(poll_id) AS poll_cnt FROM devdrive_polls WHERE deleted=0".$sFilter; if (DB::isError($iCnt = $this->_oConn->getOne($sql))) { catchExc($iCnt->getMessage()); return false; } return $iCnt; }

The getPolls method returns all the poll data from the poll table into an associative array and sorts it by the sort key.

function getPolls($sSort, $iPage=0) {// get polls list $sql = "SELECT poll_id, poll_vote_cnt, poll_question, status, created_dt, modified_dt FROM devdrive_polls...

Creating OpenSocial Gadgets

HTML JavaScript Nov 16, 2011 one comment

There are two things which look and act similar but are different, gadgets and widgets.

Widgets can be referred to any icons or graphical interface element that is operated by a computer or internet use to execute a preferred function online or on the computer. You can add a widget in all kind of web pages.

A gadget acts just like a widget, often fulfilling the same purpose, but it is proprietary or called to be self-contained. It only works on a certain website or a specific set of websites. For example, OpenSocial Gadgets can look and act like widgets. But they only work on OpenSocial enabled web pages.

You can use gadgets to make your web pages even more interesting and useful to your visitors. People can add your gadget to their personalized profile pages or to their other pages.

OpenSocial gadgets also work in very similar way like a normal gadget plus the gadgets have unlimited ways to bring new functionalities through incorporating customized code into service classes of Shindig. In this tutorial, we will explore more about OpenSocial gadgets. Please note that I am assuming that either you have a OpenSocial integrated website where you would like to use gadgets or you want to contribute the gadget to the gadget directory. The gadgets will not work on any website.

OpenSocial Gadgets

Gadgets are applications and you can build gadgets according to your unique requirements. Otherwise just use existing gadget from reliable directories and customize it for the field names etc. to make it work on your website.

At their core, social gadgets are XML files, sometimes known as gadget specifications. Here is a simple “Hello World” gadget (helloworld.xml) that illustrates the basic sections of a specification:

<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Hello World!"> <Require feature="opensocial-0.8" /> </ModulePrefs> <Content type="html"> <![CDATA[ Hello, OpenSocial Gadget world! ]]> </Content> </Module>

In the “Hello OpenSocial Gadget world ” example, you can see several sections which control the features and design of the gadget. A gadget is hosted in a server infrastructure to provide its data.

<Module> indicates that this XML file contains a gadget. It is a root tag. This root tag contains a <ModulePrefs> and a <Content> section. <ModulePrefs> is in XML format. It specifies characteristics of the gadget, such as title, author, preferred sizing, and so on. <Require feature=”opensocial-0.8″ /> denotes a required feature of the gadget — in this case, the OpenSocial API (v0.8). <Content type=”html”> indicates that the gadget’s content type is HTML. This is the recommended content type for OpenSocial containers, but gadgets for other containers such as iGoogle support other content types. <![ CDATA[a:...]]> contains the bulk of the gadget, including all of the HTML, CSS, and JavaScript (or references to such files). The content of this section should be treated like the content of the body tag on a generic HTML page.

We usually have one more tag of <UserPrefs> section, which defines controls that allow users to specify settings for the gadget. For example, a personalized greeting gadget might provide a text field for users to specify their names. The gadgets API consist of a few simple building blocks: XML, HTML, and JavaScript. So writing your own gadgets are not difficult once we understand few basics.

Giving Gifts Gadget Description

One example to access your friend’s list is below, let’s build to complete virtual gift giving functionality for your website. To access the example, visit the link http://opensocial-resources.googlecode.com/svn/samples/tutorial/tags/api-0.8/gifts_2_send_gifts.xml

Explanation of the above link code is follows:

The JavaScript function will allow you to select a friend to receive a virtual gift. Please check that using variable like “viewerFriends” is an undefined standard followed in the gadget community. OpenSocial defines two personas, the owner and the viewer. The owner is the user that owns the content on a particular page while the viewer is the logged in user looking at a page.

For example, if Alice is logged into a social network and she’s viewing Bob’s profile page, then Alice is the viewer and Bob is the owner. If Alice is viewing her own profile page then she is the owner and the viewer.

It’s also possible for Alice to view Bob’s instance of an application. Suppose Alice is viewing an app on Bob’s profile and clicks a link that takes her to the canvas view. In this case, Alice is the viewer of the canvas view, and Bob is the owner. If Alice is viewing her own instance of an app’s canvas page, then she is the owner and the viewer. The latter case, where owner == viewer, is often used to let the user configure the settings of an app.

Also note that to use this gadget you need to have a website where friend’s functionality exists. Not every information oriented website has making friends online functionality, so they can use some other type of gadgets.

Next, you’ll need to create another selection menu of gifts you can give. The sample uses a selection of different types of nuts, but you can feel free to use whatever you like. A small update to the initialization function calls this function when the page loads.

var globalGiftList = ['a cashew...

says: Amazing Work!! this gadgets coding really works, thanks you so much for sharing with us!

Is Google Dart on Target or Does It Miss the Mark?

Dart JavaScript Nov 9, 2011 5 comments

At this point, only those living under a rock for the past couple of months are unaware that Google has taken on JavaScript with its latest project, the Dart programming language.

Dart, originally named Dash, was started to “fix” the problems of JavaScript’s “fundamental flaws that cannot be fixed merely by evolving the language” by meeting the following goals:

Create a structured yet flexible language for web programming. Make Dart feel familiar and natural to programmers and thus easy to learn. Ensure that all Dart language constructs allow high performance and fast application startup. Make Dart appropriate for the full range of devices on the web—including phones, tablets, laptops, and servers. Provide tools that make Dart run fast across all major modern browsers.

But will it be up to the task?

Is Dart doomed to fail?

The number one question surrounding Dart is why with so many other languages out there why is Google creating yet another one? After all, Dart is not something new, it is an alternative.

Most importantly, it is an alternative to one of the most popular programming languages on the web.

So while JavaScript may have some issues, it has a large following and people aren’t going to abandon it simply to learn the next thing from Google. They’ve been burned on that before (think GO, Buzz and Wave).

Yet while developers may be hesitant to jump on the Dart bandwagon until they are sure that Google won’t abandon this project shortly down the road, others see it as a futile effort until there is more browser support. After all, who wants to develop applications for the 20% of the market who uses Chrome? Because until Microsoft, Apple, Mozilla and the others decide to natively support Dart that 20% makes up a Dart developer’s audience.

Now the market share argument may meet some resistance considering Google can, and most likely will, release a plugin for these browsers that will run Dart. However users will have to first install them.

Of course Google has thought this through and created a compiler that will translate Dart code into… native JavaScript.

That’s right, the language Dart was created to replace will serve as it’s backup.

Now mind you that the following lines of code for a simple Hello World script:

// Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file // for details. All rights reserved. Use of this source code is governed by a // BSD-style license that can be found in the LICENSE file. // Simple test program invoked with an option to eagerly // compile all code that is loaded in the isolate. // VMOptions=--compile_all class HelloDartTest { static testMain() { print("Hello, Darter!"); } } main() { HelloDartTest.testMain(); }

will turn into over 17,000 lines of JavaScript code when compiled. Even taking into consideration all the overhead, spacing and comments involved in this process what benefit do you gain from turning a few lines of code into thousands over writing the same few lines in JavaScript to begin with?

However the argument may be best summed up in a quote from Lars Bak, the project leader for Dart, “It’s (Dart) not going to replace JavaScript,” Bak said. “JavaScript is a cornerstone of the Web today, and it will continue to be for a long, long time.”

Should we give Dart a chance?

In Google’s defense, they claim from the onset of this project that:

The “clean break” option is extremely high risk–it will be a huge challenge to convince other browser vendors to rally around a new language–but is the only way to escape the historic problems with Javascript.

So they know that what they are getting into is not going to be without challenges.

Working in their favor, however, is the fact that Google has identified some real problems that JavaScript has and instead of building on top of what they see as a faulty foundation, they are starting from the ground up so issues and problems have a better chance of being addressed early on.

There are few companies who have the power to change the way we work, but Google is definitely one of them. And since they are going into this knowing that it will take years for Dart to really take hold in the developer community this project has a good chance at success, especially if it lives up to the lofty goals set for it.

...

Otengi says: It will take a long road to Go to go somewhere. Anyway about the article have a point but Dart could be compiled to javascript...

Hot deals

See all deals →

20 One-Page Responsive Templates with Parallax Effect - only $19!

Bundle of Bundles! 2,500 Vector Icons - only $37!

Magnolia: 150+ Professional Infographic Elements - only $9!

Create an HTML5 Browser Game from Scratch - only $19!

5 iPad Apps Every Web Developer Must Have

Tools Oct 26, 2011 14 comments

When you are stuck waiting in line or for an appointment your iPad can your saving grace.

Not just to check your Google+ account or play a quick game of Trailer Park Zombies, but to get actual work done.

That is if you have the right apps.

Listed below are some of the best apps for web developers. And this list isn’t one that only contains a few time management and task list apps. You might actually be surprised at how much you can get done with your iPad.

iMockups

Quickly and easily create wireframes for websites and applications on this app created specifically for the iPad. iMockups lets you use snap-to-gridlines and a customizable canvas to layout not only what a web page may look like, but also iPhone and iPad apps.

Projects can also be shared with other iPad users for easy collaboration or exported as a PNG or Balsamiq BMML format for those still tied down to a desktop.

Winner of Applied Arts – Best Mobile App 2010 Award

App Star Runner up – Best Utility App 2010 Award

Cost: $6.99

Penultimate

There was a time when creative types had to jot down all other notes, ideas, sketches, etc. in whatever notebook they had on hand.

The problem is, notebooks get lost or left behind and then there’s the jerk in Starbucks that spills his mocha grande whatever all over your stuff.

But those were the days before iPads and Penultimate. This app lets you organize your handwritten notes and drawings in a collection of digital notebooks organized by project, client or whatever.

You can even send these notes to others via email, Facebook or Twitter. Now if you could just keep that guy from Starbucks away from your iPad…

Cost: Free

OmniGiraffe

With the high cost of this app, you would expect great things, and that is what OmniGiraffe delivers. Mimicking the power found in a desktop solution, this app allows you to create diagrams, process charts, page layouts, wireframes and even graphics to use on your sites.

Cost: $49.99

iThoughtsHD

Mindmapping is one of the most highly touted methods for organizing your thoughts and helping you recall information at a later time. And an iPad is a perfect platform for this type of application.

Not only does iThoughts HD make it easy to plan projects, set goals, take notes, create task lists and brainstorm new ideas, but it also works seamlessly with these desktop applications:

Freemind/Freeplane Novamind MindManager XMind iMindmap Mindview (Windows only) ConceptDraw MINDMAP MindGenius

Cost: $9.99

Gusto

Who would have thought that you could organize, edit, publish and then preview your web projects all while sitting in your doctor’s waiting room? Gusto makes that entirely possible.

Boasting a build-in FTP/SFTP server that allows you to work on files locally and publish them with the simple touch of a button.

Gusto also provides users with a rich interface when it comes to editing files. Syntax highlighting makes your code in a variety of languages easy to read, tabbed editing gives you the ability to work on multiple files at once and the option to preview files locally or remotely gives you the option to see changes before you publish.

Did I leave your favorite app off the list? Let the rest of us know in the comment section.

However the most convenient feature is Gusto’s persistent project state that allows you to leave the application and return to your Gusto workspace just as you left it.

Cost: $9.99

...

Zoomy says: You should certainly add ZoomNotes to the list. It is a note-taking/drawing app which uniquely has unlimited zoom and also has a...

Common Mistakes to Avoid When Coding in PHP

PHP Oct 19, 2011 15 comments

Despite the high expectations placed on them at times, developers are human. They were the last time we checked anyways.

As humans, we are bound to make mistakes from time to time. And simple, common mistakes often slip past our filters the more comfortable we become with something.

Think about it, when you first started writing code you most likely checked every line to make sure things were perfect. As you grow more comfortable with the process, little things often get overlooked and mistakes are made.

But knowing what these common mistakes are and how to avoid them can really help speed up the development process and keep our clients smiling.

Below you will see some of the more common mistakes that are made with PHP, even by advanced developers…

Poor Housekeeping

People can get lazy and code can get messy.

To keep it organized you can use things like comments and indents. I know, these are basic best practices but think to yourself, when was the last time you hacked up your code without commenting?

I thought so.

How about breaking your code into modules based on function? Many agree that as a rule of thumb your function should not exceed one page on your screen unless it is necessary.

Another good housekeeping practice is to backup all of your files before you upload changes. Sure you may be in a hurry, but the time it takes to make a quick backup is far less than having to go back and undo a disaster.

Forgetting Your Punctuation

One of the best things about PHP is that you don’t need expensive software to write code in. Any text editor will do.

Unfortunately, a basic text editor won’t tell you if something isn’t right.

One of the most common, and basic, mistakes made when coding in PHP is to either forget or misplace a quote, brace or semi-colon causing a syntax error. Before you try to run anything, make sure that every:

[ has a ] ( has a ) { has a }

Now check to make sure that all string keys are enclosed with matching quotes. Remember, “ does not match with ‘.

While you are at it, double check the semi-colons to make sure they aren’t missing or misplaced.

Forgetting to Validate Input

By now you should know that user provided data cannot be trusted. Allowing this from your users is one way that cross-site scripting, buffer overflows and injection flaws can all be used to attack your site. Unfortunately, it is also one of the most common mistakes people make when coding in PHP.

In the following lines of code, notice that the three variables are not validated:

$birthdate = $_GET['birthdate']; <br> $birthmonth = $_GET['birthmonth']; <br> $birthyear = $_GET['birthyear']; <br>

By adding the following lines of code we use preg_match to perform a regular expression match against the input. In our birthdate and birthmonth variables it is checking to verify that a one or two digit number between zero and nine was entered. For birthyear, it needs to be a four digit number between zero and nine:

if (!preg_match("/^[0-9]{1,2}$/", $birthdate)) die("That is not a valid date, please check that again."); <br> if (!preg_match("/^[0-9]{1,2}$/", $birthmonth)) die("That is not a valid month, please check that again."); <br> if (!preg_match("/^[0-9]{4}$/", $birthyear)) die("That is not a valid year, please check that again."); <br>

We are able to make sure that the proper type of characters are input by the users are actually numerals and only numerals that we expect to be entered. Anything else results in an error being thrown back to the user.

So I call on our readers to share with us some of the most simple mistakes we have made over the years. And don’t worry, we’re all human here.

...

Andrew woods says: The preg_match function is part of a suite of functions that's use Perl compatible regular expressions. That's where the 'p' in...

13 JavaScript Frameworks That Can Make You a Better Web Developer

JavaScript jQuery Sep 22, 2011 5 comments

JavaScript earned popularity with web developers because of how responsive it is for users. Since it runs locally in the user’s browser, there is no waiting for the server-side computations to run.

And what you can do with JavaScript is pretty fascinating when it comes to dynamic page effects and user interactivity.

But even something as simple, and lightweight, as JavaScript can be improved upon. That is where the JavaScript frameworks come into play. Using these frameworks allows a developer to do more with less code through chaining and can speed up the development process by using code that already exists.

Below, you will find some of the most preferable JavaScript frameworks that can improve your skills as a web developer.

1. Script.aculo.us

Script.aculo.us is an add-on for prototype, a java frame work. Its job is to assist developers in creating dynamic websites. This add-on facilitates the developer with tranquil cross browser user interface java libraries such as animation, drag and drop, AJAX controls, etc. to create stunning websites and web apps in a jiffy just like those you would find on sites from IKEA, CNN and NASA.

2. jQuery

jQuery is a revolutionary JavaScript library. This succinct java script library is used by many popular web giants like Google, digg and Technorati, etc. JQuery simplifies HTML document traversing, event handling, animation and AJAX interaction for quick and smooth web development.

3. Dojo Toolkit

Get Dojo to create inspiring and powerful desktop and mobile apps. Create enterprise grade apps with grids and charts; or use dojo’s lightweight core to create animations, easy CSS syntax query and to manipulate the DOM. For mobile and desktop apps Dojo API contributes to HTML5 capabilities such as geolocations, touch screens and much more.

4. Sencha Ext JS4 Framework

Sencha Ext is a cross-browser JavaScript frame work used to build rich web apps. Generate touch charts embedded with gesture-based interactions, glossy animations and many other supple styling options to maximize data’s aesthetics and usability. Sencha.io is a cloud service that facilitates your ability to send data to mobile devices faster and with lower costs.

5. Prototype

A complete power packed JavaScript framework prototype is the codebase of choice for web app developers around the globe. Prototype features unique, easy to use toolkit for class driven development along with a full AJAX library.

6. Uize JavaScript Framework

Uize JavaScript is an open source framework that comes with a number of features. Uize is a server agnostic, totally user dependent and can be used on any platform and server language like Java (Apache Tomcat), C# (IIS / ASP.NET), Visual Basic (IIS / ASP), C/C++, Perl (Perl / Apache), PHP, Ruby (Ruby on Rails), Python, etc. Uize supports mobile devices and comes with built-in widgets slideshow, calendar, date picker, slider, marquee, dialog, menu, mag view and much more.

Uize is enriched with many JavaScript features such as animation, inheritance, events, modules, libraries, templates, widgets, localization, documentation, code compression, build scripts.

7. Qooxdoo

A universal JavaScript framework, aid you to create enormous applications on numerous platforms. It uses an object-oriented programming model which helps create innovative RIAs. Easily create interactive interfaces even if you do not have strong command over HTML and CSS. Qooxdoo supports developers with an advanced client server communication to develop an abstract transport layer that supports queues, timeouts and implementations via XMLHttpRequest, I-frames and scripts.

8. Zepto

Zepto is a compact JavaScript framework for mobile webkit browsers with a jQuery compatible syntax. It helps you focus more on your creation with a 2-5k library that handles the most basic work with a nice API.

9. DHTMLX Touch

The DHTMLX touch JavaScript framework is compatible with all major browsers for mobile platforms that support HTML5. DHTMLX Touch offers a complete set of frame works that allows developers to create striking and vigorous web applications for mobile and touch devices like the iPhone, iPad and Android etc.

10. YUI Library

This industrial strength JavaScript library was built by Yahoo! front end engineers and global contributors. Offering a scalable, fast and robust library with complete set of JavaScript, CSS utilities and controls, YUI is another free library developed under BSD license. YUI comes in handy to help developers build rich and interactive web apps using DOM scripting, DHTML and AJAX techniques.

11. SPRY JavaScript Framework

SPRY is especially for those who do not consider themselves a JavaScript guru.

Any server-side technology (ColdFusion, PHP, ASP.Net, etc.) is compatible with Spry and working with it is so easy that anyone with basic web development skills can create cool, robust web apps.

12. Moo Tools

MooTools is a squashed, modular JavaScript frame work using the precise Object-Oriented approach helpful for the intermediate to advanced JavaScript developer. Its well documented, elegant and coherent API allows developer to write cross browse, powerful and flexible code. MooTools code undergoes with strict standard compliance and doesn’t throw any warnings. It’s extensively documented and has meaningful variable names.

13. SproutCore

SproutCore is a great example of an open source framework for building mind boggling and innovative web apps that create a great user experience. Using the power of HTML5 to leverage the latest web technologies, SproutCore is also compatible with all browsers.

All these frameworks are for those adventures developers who keep on exploring new tools in the JavaScript arena. YUI, JQuery and Prototype are probably the famous one, but the rest are there yet to explore.

...