Data driven web sites are da bomb, in my not-so-humble opinion. The ability to drive information through a slim passage and have that information display, in various ways, is without a doubt amazing. Anything can be manipulated, altered, structured, added, removed and decided before it even hits the screen. Systems like WordPress, Joomla, Drupal have had their day in the sun. On the horizon are even more progressive, minimalistic UCGm [User Generated Content management] systems that will have all of us programmers gushing like school-boys. Old[er] folks, like myself, who worship L, M, W -AMP need to sharpen our skills, keeping marathon pace with the wondrous changes in the digital universe.

Recently, I was faced with a serious issue for a clients website, where -due to their server set up- and limited ability to get noticed by the Big3 Searches. If fact, with the Panda/Penguin frequency and alterations for “YingBook” {yahoo, bing, facebook} social search, the site all about keeled over. The problem was: her pages were getting ignored or the database would go offline for exceeding the 128 limit. Evn after increasing to 256 the site was still @ a snails pace. Not to the point of tears, she asked me why she could not just create Static pages like the old days {html4}, using the current CMS platform.

My explanation was nothing short of a technical plethora, of which she was oblivious. Finally, I said to her, “We can set up a system to transfer all your data based pages into static html, that you can edit on-the-fly. Long story short, as a marketing “gurette” of sorts, is now working with me to develop a strategy to offer the general population such a program -primarily for mobile/wireless devices like iPad, Android maybe even SUR.

The PHP to static HTML works quickly and effectively, to take the information and create  fully functional, SEO friendly pages, without the trapped header or slugs limitation often associated with CMS programming. It can even include breadcrumbs or anything, really, that fits into a traditional web page. I first used this approach for rebuilding RSS Feeds ala minute as pages were changed/updated, created or deleted from the system. A very efficient, lightweight measure, that truly boosted visibility, while providing an outlet from the data doldrums and easy enough for the novice designer or non-tech to use.

PHP > HTML

Collect Data from Database Get Static or Template Elements Parse PHP to HTML Reload Sitemap/RSS

Database Checkpoint – Update or Create?

Simple and easy. Get the post Title, etc. Do the error checking, like empty, too short or too long. Apply the errors for all the additional items like photo, video or audio formats (extensions), content word count, etc. Once complete, we execute two options. Does this Title exist? If yes, update the record by this author, back-up the old page into a zip file, unlink the old page, create a new page and reload the RSS feed. Else, add the new record to the database, create a new page and reload the feed.

/* Check for Errors */ $TITLE=$_POST['TITLE']; if($TITLE=="") {die('Title cannot be empty');} else { $skunk=array('+','-','_','!','?','...','*','&','%','=','~'); $TITLE=str_replace($skunk,' ',$TITLE); $TITLE=str_replace(' ',' ',$TITLE); } if(strlen($TITLE)<12){ die('Please make the Pubtitle more than 12 letters');} elseif(strlen($)>40){ die('Please make the Pubtitle less than 40 letters');} else { $TITLE=strtolower($TITLE); $TITLE=ucwords($TITLE); } /* Check Title Database */ $title_chk=mysql_query("SELECT * FROM `PUBS` WHERE TITLE='$TITLE'") while($row=mysql_fetch_array($title_chk)){$TITLEX=$row['TITLE']; if($XTITLE==$TITLE){ UPDATE TABLE WITH NEW INFO /*Zip old File*/ $zip = new ZipArchive(); if($zip->open('$TITLE-$date.zip', ZIPARCHIVE::CREATE)...

Web developers have a fond love for open source tools not only because these tools are generally free of cost, but they can be modified in any way the developer sees fit. That is actually where the free in free/open source software comes from.

While .NET and other paid technologies and tools do have their place on the Web, it really is open source tools and applications that power it. There are thousands of great open source applications and picking the best among them is really hard since so many people have their own personal favorites. The list prepared for you represents 10 open source tools almost any Web developer can use every day:

1. KompoZer

All the fans of Dreamweaver might consider KompoZer the poor man’s choice but actually this isn’t so. KompoZer, the former Nvu, is a WISYWIG HTML editor that, unlike Dreamweaver, doesn’t require an ultra powerful PC just to open a file. KompoZer is a light-weight application but it is a good choice even for advanced programming tasks.

2. Eclipse

Java developers do have a lot of IDEs to choose from. Many of them choose Eclipse because it is convenient to work with. Additionally, it has a PHP plug-in so if you have occasional PHP programming tasks, you can still work in Eclipse.

3. Komodo Edit

Komodo Edit is an editor for Perl, Python, Tcl, PHP, Ruby, Javascript, etc. It is the little brother of their paid Komodo IDE, but even this kind of limited edition has all the perks you will need in your daily work.

4. Apache

Apache is the Web server that no Web developer can go without. Apache is fast and reliable but mastering it can be a bit hard, especially for a beginner.

5. XAMPP

If you want to write Web applications, a Web server is only the foundation. You need other tools, such as the relational MySQL database and the PHP language framework. Installing and configuring them one by one is not rocket science but it is much easier when you get XAMPP – a bundle with Apache, PHP, and MySQL. XAMPP is very easy to install.

6. PostgreSQL

MySQL is a good choice for a relational DB but if you have some reasons not to use it, you could consider an alternative, such as PostgreSQL.

7. phpMyAdmin

phpMyAdmin is another open source application many Web developers can’t live without. It is a GUI  used to administer MySQL databases and it makes the entire  process much easier.

8. Firefox Web Developer Toolbar

Firebug is cute, but if you want something really big and powerful then you should try the Firefox web developer toolbar. It has even more functions than the Firebug plug-in and with it you can literally dissect any Web page to see what’s inside its code.

And for you Chrome addicts out there, there is a version available for you as well.

9. OpenSTA

Once you finish coding your application you are not done yet. You need to test it. While there are tons of tests you can (and should) do, one of the tests you shouldn’t skip under any circumstances is load testing. With the help of OpenSTA you can perform the necessary tests to make sure that your application doesn’t misbehave under stress.

10. Browsershots.org

Unlike the other tools and applications on the list, this one isn’t an application/tool but rather a free service. However, since it is a great helper, I have included it in the list. Browsershots.org allows to you see how your site is viewed in any possible browser. The list of browsers includes almost any browser you can imagine and this saves you the hassle to manually test your site for browser compatibility.

Of course, if I left your favorite tool off this list please share it with our readers in the comment section below!

...

Many websites nowadays make use of sliders to highlight different content or pages but these slide shows usually appear at the top of the home page. Anyone who deals with content knows the power that images have to keep a reader engaged. In fact, most content creators try to scatter images throughout their text for this very purpose.

But what happens if you marry the two concepts together? Taking the slide show concept and inserting it into the content of a web page…

Begin by opening up the HTML of your web page and insert the following JavaScript code between the <head> tags:

<SCRIPT LANGUAGE="JavaScript"> <!-- Begin // Set slideShowSpeed (milliseconds) var slideShowSpeed = 5000; // Duration of crossfade (seconds) var crossFadeDuration = 3; // Specify the image files var Pic = new Array(); // to add more images, just continue // the pattern, adding to the array below Pic[0] = '1.jpg' Pic[1] = '2.jpg' Pic[2] = '3.jpg' Pic[3] = '4.jpg' Pic[4] = '5.jpg' // do not edit anything below this line var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++) { preLoad[i] = new Image(); preLoad[i].src = Pic[i]; } function runSlideShow() { if (document.all) { document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply();...

We’re getting to the end of our Learning LESS series, and this is one of the posts I’m most excited about. One of the best features of LESS is how modular and organized your code can be, and how it doesn’t add much weight or calls to your live sites (if you compile locally with LESS.app, CodeKit or some other compiler).

Blog Series Roadmap

An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action

Grab a cup o’ joe, your favorite text editor and let’s learn how to divide up our LESS and keep things neat and tidy.

Setting Up Your Project

Whenever I’m about to start a project from scratch using LESS, I set up a simple folder structure.

As you can see, my LESS and CSS are separate folders. My next step is I always add my site to LESS.app (or CodeKit if you prefer). LESS.app will automatically search for all LESS files in your site folder and set up to compile.

Before we do that, let’s create some LESS and learn how to modularize your code and then how to bring it together at the end.

Creating A Few LESS Files

The absolute first LESS file I create in any project is simply style.less. This is the file that will be compiled to be style.css, and act as the master CSS file for my entire project.

It is important to remember that comments in LESS are double backslashes (//) and are not compiled in the final CSS. Normal CSS comments (*/ … /*) are compiled as comments and can be used for organizational or normal comments.

That said, let’s take a look at my starting point for style.less.

// Style.less for Project LESS // --------------------------- /* This is a project/blog for DeveloperDrive.com written by Alex Ball. Version 1.0.1 These are regular CSS comments that will be compiled normally. */

So, not much going on in that file … yet. Moving on to our next LESS file, I typically head to Andy Clark’s 320 and Up project and snag the LESS reset file he has developed.

// ========================================================== // 320 and Up by Andy Clarke // Version: 3.0 // URL: http://stuffandnonsense.co.uk/projects/320andup/ // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 // ========================================================== /* Reset */ html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th,...

The line between desktop development and web-based applications has been all but obliterated in the last few years. With the advent of smartphones, especially Google’s Java-based Android operating system, developers are scrambling to jump onto the newest technology, while fearing that the skills they have cultivated over the years may become obsolete.

Many former C++ and C# programmers are migrating their way to Java applications. While the languages are remarkably similar (as Java was built around the C and C++ structures in the 1990s), a few subtle differences can trip up even the most experienced developers.

#1: Unsigned Integers

C#: Supports 8-bit, 16-bit, 32-bit, and 64-bit unsigned integers. Java: Supports 16-bit unsigned integers only James Gosling, the creator of the Java programming language, decided against including arithmetic for unsigned integers in the initial design. In a 2001 interview with Java World magazine, he stressed that simplicity was the key to developing a robust programming language.

“One of the little experiments I tried was asking people about the rules for unsigned arithmetic in C. It turns out nobody understands how unsigned arithmetic in C works. There are a few obvious things that people understand, but many people don’t understand it.”

#2: Complex Numbers

C#: Supports complex numbers Java: No support for complex numbers Complex numbers are written in the form of “a + bi”, where “a” and “b” are integers and “i” is the square root of -1. Complex numbers are used in a wide range of applications, from electrical engineering to fluid dynamics.

#3: Value Types

C#: Supports user-defined value types Java: Supports only primitive value types C# allows users to construct their own value types. For instance, if a user wanted to construct the C# variable type SimpleVar with multiple properties, then assign values to those properties, the code would look like this:

struct SimpleVar { public int Position; public bool Exists; public double LastValue; } static void Main() { SimpleVar s; s.Position = 2; s.Exists = true; s.LastValue = 4.2; }

#4: Tuples

C#: Supports tuples Java: No support for tuples The “Tuple” class in C# consists of “a data structure that has a specific number and sequence of elements”. For instance,

var zipCodes = new Tuple<string, int, int, int, int>(“Houston”, 77006, 77098, 77002, 77019);

or

var zipCodes = Tuple.Create(“Houston”, 77006, 77098, 77002, 77019);

The Tuple class has a structure similar to the standard array, but with much less flexibility; the fields in a tuple cannot be changed or manipulated.

#5: Pointers

C#: Supports pointers Java: No support for pointers Pointer variables “point” directly to a location within the system’s memory. In a web-based language such as Java, such pointers would be useless. Instead, the Java Native Interface (JNI) handles any such functions.

As Gosling pointed out, the key advantage that Java has over C# is its simplicity. However, that simplicity requires the sacrifice of some more complex functionality, including data types.  In the next lesson, we will examine how class structures differ between these two languages.

...

Responsive web design is widely thought of as a design trend, but it’s much more than that.

It is an approach to web development that allows a website to break itself down smoothly across multiple monitor sizes, screen resolutions, and platforms, be it a computer, tablet or mobile device.  It allows the developer to create a site that is optimized for each platform, both in navigation, readability and load time.

In this tutorial, we take a look at what responsive web design entails for the developer.

Using Multiple Image Sizes

There’s no need for a mobile device to be loading an image that is 1920 px wide by 1200 px tall and a quarter mb.  That will only slow down the time it takes for a viewer to load the site on their mobile device and eat through their monthly data quota.  A great example of a site that keeps their main image but resizes it based off the screen resolution of the viewer is Sony.  You’ll notice, amongst other changes, how the main image has changed in size between the larger version and the mobile version thanks to CSS media queries.

Another approach to quickening load times and determining how things should be displayed on different devices is to completely drop your main image.  That’s exactly what Fork CMS did with their site.  The main image resizes between the widescreen and more traditional square monitor ratio version of the site, but then is completely dropped from the design once you get down to the mobile sized version.  However, I did find it a little interesting that the designers chose to keep the image towards the bottom of the site throughout each version, but drop the main image.  The main image helped establish the site and give it some character, by excluding that main image on the mobile version the site loses a bit of character.

Navigation

Text links are another thing to take in to consideration when developing a responsive website. On a computer text links aren’t a big issue, but once you get to browsing a scaled down version of a site on a mobile phone it can be hard to hit the desired target area of a small text link. Converting a text link to a slightly bigger button, or swapping text for an icon, will make the site more navigable on a touch screen mobile phone.

A good example of a site that’s navigation changes from text links to buttons is the website for the Clean Air Commute Challenge. You’ll see how in the larger, widescreen mode of the site there are four main navigation links across the top of the page. However, once the site is squeezed in to meet the dimensions of a mobile site the text links convert to larger, easier to target, buttons.

To see a good example of a site where the navigation switches from links to icons have a look at the 2011 dConstruct site. Notice how their three main navigation links, Conference, Workshops and Location, change to icons once the site is narrowed to the parameters of a tablet device or mobile phone. This makes it easier for the viewer to navigate the site regardless of what device they’re on. You will also notice with the dConstruct site that the images don’t swap themselves out at certain points, rather they simply grow and shrink on the fly as the page shrinks or grows.

Flexible Dimensions

Optimizing a site to be responsive and change across platforms is easy to do thanks to CSS. With CSS you are able to define the maximum and minimum height and width of elements, allowing them to grow, shrink and adapt to the specific parameters in which the site is being viewed. Setting the width to adapt is also easily achievable by setting your height and width to a percentage.

Working with percentages to size elements of your website can be a little trickier than creating a site where everything has a fixed pixel dimension. However, there is a fairly simple way to determine what the percentage is that you need to define an element of your site. If you are developing a page and want the main content area to be 1,000 px wide at a specific resolution and you want to include a navigation column on the left-hand side that has a width of 200 px, you will have to convert that to a percentage. You can easily convert a fixed pixel size to a percentage by taking the width of the navigation column, dividing it by the full width of the column, then multiplying it by 100. In this instance we would take 200 (the width we want our navigation column), divide it by 1,000 (the full width of our content area) and then multiply it by 100. The result is 20, meaning to give our site elasticity and allow it to be responsive we would define the width of our navigation column to 20%, rather than 200 px.

For a good example of a site with flexible dimensions, look no further than the page you’re on. Try decreasing the width of the page by dragging your browser window in and see how the main content area resizes itself to adapt to the new dimensions.

Along with setting your structured elements to be flexible in size, it’s also important to make your text a dynamic attribute as well.  This is accomplished much like the height and width, but rather than using a percentage sign to define your font size, or the “px” abbreviation for defining a specific pixel size, you define it as em.

Em simply stands for the letter “M”, which is the widest letter in the font and is a dynamic font measurement.  Meaning a site that uses % to define the height and width of elements, paired with font that is defined in em’s and media queries that select appropriate image sizes and content to be displayed, the result will be a fluid, responsive website.

...

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

...