Programming | Federico Jacobi | Graphic designer

Can I do some work for you?

If you like what you see and would like to get some pricing going, please drop me a line at web@federicojacobi.com. I'll get back to you as quickly as I can.

Thanks for visiting my site!

@federico_jacobi

At @100montaditos. I've been looking forward to this day for months now!! @K8Ellie has to come by!! # 2012/05/19

How to make an OSCommerce landing page

Tags: a/b testing, landing pages, optimization, oscommerce, php, programming, split testing — February 18, 2011

OSCommerce can seem kind of closed sometimes, but I asure you: it isn’t. It all about easy custom coding. For landing pages however, it’s more HTML than PHP. Even though your store is all setup nicely, if you are investing in keyword advertising or PPC you want to maximize your return. How do you do that? landing pages are the most common way to go.

Landing pages are regular pages of your website, but usually focused on one of your products or services. In OSC chances are its a product. The key to landing pages is testing, as there are no definitive formulas for making the visitors buy. There are tons of articles on the science of landing pages and a/b split testing … read some! Here’s how you do it:

Create an empty file landingpage-1.php
Add the the usual OSCommerce structure. Assuming your OSC install is virgin it goes like this: applicationtop, header, columnleft, content, columnright, footer, applicationbottom. See below for osc2.2rca or osc2.3+
make sure Google Analytics or whatever you use to track performace is working.

OSC 2.3+

With the newest version of OSCommerce the setup is very easy to do. Because of the stock templating system, header+columnleft and columnright+footer are combined kinda. Here’s the code:

<?php
  require('includes/application_top.php');
  require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_CONDITIONS);
  $breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_CONDITIONS));
  require(DIR_WS_INCLUDES . 'template_top.php');
?>
<?php echo HEADING_TITLE; ?>


    ***********  YOUR LANDING PAGE CODE GOES HERE ****************
  


<?php
  require(DIR_WS_INCLUDES . 'template_bottom.php');
  require(DIR_WS_INCLUDES . 'application_bottom.php');
?>

Just replace the lines and voilá.

OSC 2.2rca

This is a little tricker as it can be easier or harder depending on how modified your design is. On a virgin install is straight foward, on a modified one where there’s some kind of templating going on or the columns have been moved you will need to read on your files. Here’s the code for a virgin version:

<?php
  require('includes/application_top.php');
  require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_CONDITIONS);
  $breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_CONDITIONS));
?>
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<!-- header //-->
<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
<!-- header_eof //-->

<!-- body //-->
<table border="0" width="100%" cellspacing="3" cellpadding="3">
  <tr>
    <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- left_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
<!-- left_navigation_eof //-->
    </table></td>
<!-- body_text //-->
    <td width="100%" valign="top"><table border="0" width="100%" cellspacing="0" cellpadding="0">
      <tr>
        <td><table border="0" width="100%" cellspacing="0" cellpadding="0">
          <tr>
            <td class="pageHeading"><?php echo HEADING_TITLE; ?></td>
            <td class="pageHeading" align="right"><?php echo tep_image(DIR_WS_IMAGES . 'table_background_specials.gif', HEADING_TITLE, HEADING_IMAGE_WIDTH, HEADING_IMAGE_HEIGHT); ?></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
      </tr>
      <tr>
        <td class="main">***********  YOUR LANDING PAGE CODE GOES HERE ****************</td>
      </tr>
    </table></td>
<!-- body_text_eof //-->
    <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- right_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>
<!-- right_navigation_eof //-->
    </table></td>
  </tr>
</table>
<!-- body_eof //-->

<!-- footer //-->
<?php require(DIR_WS_INCLUDES . 'footer.php'); ?>
<!-- footer_eof //-->
<br>
</body>
</html>
<?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>

There you have it!. If you have any other thoughts … please share them!

Comments (0)

Theme to Browser (T2B) Control

Tags: blogs, mobile, php, plugin, programming, theme, tools, wordpress, wp — February 13, 2011

T2B Control is a wordpress plugin that helps you use a different theme depending on the browser you are using. This is great for things like having a dedicated theme for mobile devices (for now just iPhone/iPod), but also is a great way to cheat your way out of CSS hacks and browser specific annoyances ( IE anybody? ). Even though themes are usually designed to be cross browser and CSS fine tuning is part of it, sometimes you do not have the time to spend trying to figure out a way to make the pages behave across browsers.

For now the supported software is: Internet Explorer, FireFox, Opera, iPhone/iPod, Safari. All of them modern versions, however, version specific detection will come in future upgrades of the plugin.

How to install

Easy: after downloading the plugin just save it to the plugins folder of your wordpress install. Go to the admin page and then Plugins. Locate Theme to Browser (T2B) Control and click on activate.

Setup

Once the plugin is activated just go to the “Appearance” tab and find T2B Control. There you should be able to figure out what theme to use in which browser.

Download

Just go to the wordpress plugin repo and get it! Here’s the link http://wordpress.org/extend/plugins/theme-to-browser-t2b-control/

Comments (0)

Update on App code | Incomplete Cash Calculator

Tags: android, programming — January 22, 2011

So far a couple of things learned:

If you know java or object oriented programming, the learning curve is WAY less steep, but steep never the less.
The icon for your app can be found in /res/drawable-ldpi (and mdpi, and hdpi)
With out input there’s very little to do, so the basic of all basics is EditText. To get it’s contents use YourObject.getText().toString() which implements comparable so use equals() to compare.
If you want to get numbers only, even though it seems good practice to sanitize the input, you can specify in the XML layout android:inputType=”numberDecimal” to restrict input.
Setup layouts in XML and handle the mechanics through code. Keeps the UI separate from the code, and it is WAY easier to define.
Dialogs can have custom setups through XML.
Dialogs are created ONCE, so in this application, for example, you want to get the final number to make your invoice to before taxes. If you go with the google examples, chances are, the first time you do it, it’ll be fine, change your values and show the dialog again, now it reads exactly the same. If you need the SAME dialog to display different info you either create a new one, or keep a reference of the old one and modify the values of the actual Dialog object. Modifying global variables is not good enough.

Here is the code:

package com.example.helloandroid;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;

public class HelloAndroid extends Activity implements OnClickListener {

	String message;

	/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        Button button = (Button)findViewById(R.id.calculate);
        button.setOnClickListener(this);
    }

    public void onClick(View v) {
    	EditText cashobj = (EditText)findViewById(R.id.cash);
    	EditText taxobj = (EditText)findViewById(R.id.tax);

    	if (!(cashobj.getText().toString().equals("") || taxobj.getText().toString().equals(""))) {
        	Float cash = new Float (cashobj.getText().toString());
        	Float tax = new Float (taxobj.getText().toString());

        	if ((cash > 0) && (tax>0) && (tax<60)) {
    	    			Float valor = ( 100 * cash ) / ( 100 + tax );
    	    			message = new String(valor.toString());
    	    			showDialog(1);
        		} else {
        			showDialog(2);
        	}
    	}

    }

    protected Dialog onCreateDialog(int id) {
        Dialog dialog;
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        switch(id) {
        case 1:

        	builder.setMessage(message)
        	       .setCancelable(false)
        	       .setTitle("Make Invoice for:")
        	       .setNeutralButton("Ok", new DialogInterface.OnClickListener() {
        	           public void onClick(DialogInterface dialog, int id) {
       	    				removeDialog(1);
        	           }
        	       });
        	dialog = builder.create();
            break;
        case 2:
        	builder.setMessage("Check your numbers, something is so not right")
        	       .setCancelable(false)
        	       .setTitle("ERROR")
        	       .setNeutralButton("Ok", new DialogInterface.OnClickListener() {
        	           public void onClick(DialogInterface dialog, int id) {
        	                dialog.dismiss();
        	           }
        	       });
        	dialog = builder.create();
            break;
        default:
            dialog = null;
        }
        return dialog;
    }
}

Comments (0)

Android App from nothing.

Tags: android, programming — January 15, 2011

Today I will start an Android App from 0% which I will try to document here for 2 reasons: help other people that don’t know anything about App making and to force myself to write. At this point I have written some Java, and by some I mean very little, minimal C++, and tons of PHP. It doesn’t matter the language, programming is a thing of structure and logic. Language is a matter of syntax and getting used to new functions/commands. This is by no means a how-to guide. It is just my way of sharing my experiences in the proccess.

That being said you need the following:

Programming knowledge (if you know Java, you are pretty much ready, just go to developer.android.com and find your way)
Java 1.5 or better
Eclipse
Android SDK
ADT Plugin for Eclipse
Lots of patience and lots of reading

Follow the instructions on http://developer.android.com/sdk/installing.html and get ready to try to run your typical Hello World (Hello, Android) example. First thing I noticed is that it didn’t work.

If you see the “Emulator” with your fake phone means that it DID work, but nothing will happen until you turn your fake phone ON!!!. It takes a while for the fake phone to boot, just like it does your real phone. Once it starts you’ll see your nice app working.

Stupid, but important.

As a learning experiment i will port my useless application “Incomplete Cash Calculator” to Android.

I hope that all that I write from here on, actually helps you. In advance I apologize as I don’t expect the posts to be very long or explicative.

Comments (0)