toggle Cinema 28 Mar 2011

HTML5, AJAX, SEO and other drugs, learn how to combine them Posted by Insane in Ajax, Google, Google Spreedsheet, Javascript, Php, Uncategorized, donnu | No responses

html5-logo[1]

Nowadays it´s quite common to browse between full rich content sites with, you know a lot of flash, jquery and xhtml. Every since the first appear of Ajax, developers all over the globe has explode its potential by following this amazing new way to walk through a website, click here and boila the content is automatically delivered to you without any time waste on leave the current page.

But it´s been a long since something dramatically cames to change the way we interact and enjoy the web. Could be said that html5 is the new (yeah sorry not so new ) big thing to revolutionize the web, if you haven´t yet check it out you should probably  take a look to this and this and this sites.

With all this bast tools to build ( being from scratch or allready bundled ) amazing websites and make it ready to speak correctly with mobiles and even old-fashioned-browsers wouldn´t be exactly surprising if we include to our old friend SEO into the play.

Things you should know before markup html5 sites

  • Semantically html5 is the right choise to organize your content, tags like header,footer,section,aside will become quickly the best way to replace your div wrappers but by know…
  • Google currently won’t give special consideration to those that use HTML5, so if by any chance your top goal is the SEO of your site, well please desist you won´t get any more success than doing it with xhtml.
  • Follow this guide to make your Ajax site crawlable to google bots.

Sure mom, now what?

Personally try to keep things simple and readable as much as i can, but when a best practice is the best way to do the things i prefer it all the time. As a developer i found very helpfull several tools that not only increase the delivery speed but also add interesting features, find below the list.

  • Make sure your site accomplish with the w3c standard http://validator.w3.org/
  • Yepnope is a conditional resource loader that allows you to add only the scripts that the browser needs.
  • YUI profiler, it attaches itself to the firebug console and let you analyze the behavior and performance of your javascript code.
  • Modernizr allows you to target specifically functionality to your application, best replace to those ugly conditional IE tags .
  • HTML5 Boilerplate, excellent framework with all best practices included to guaranty portability and display to your web apps.Also includes several allready mentioned libraries.

Conclusions

This isn´t a science neither everything is said as we evolve so the web does, there´s no doubt that we´ll eventually see and develope more html5 websites and it´s mandatory that we ready for it having in top of our minds the top goal wich is always to offer the best user experience.

Happy SEO.

  • Share/Bookmark
toggle Cinema 15 Feb 2011

Posting to your friends Wall (Simple Javascript/Php/Facebook API) Posted by Insane in Javascript, Php, Uncategorized | 15 responses

I must admit it, I were looking for an example like this (or even better a downloadable code) without any succeed. After 2 two hours of research I finally figured the whole process out and decided to write this small post and attach the code  as well. When you look back and see the things all in perspective trust me:  it´s actually quite easy.

First you need to get an API key for your application, access here to get an api key and a secret key, when you have ready them replace those values in the config file fbconfig.ini.

Upload the content to your site and enjoy  :)

Here´s the working demo.

Download the code

  • Share/Bookmark
toggle Cinema 23 Aug 2010

Display Notifications on Android SDK Posted by Insane in Java, android | 2 responses

android

During my journey of discover in this amazing platform I had the need of display several types of messages in the device in order to let know the user that something was actually happening in background and that black window was all on purpose. So I decide to gather all this types of notifications in this post and show their implementations, let´s get started.

Android SDK offers 3 main types of notifications that could perfectly cover all your needs.

  • Alert Dialogs.
  • Notifications
  • Toats

Alert Dialogs.

This is the classic way and you´ve seen it before. It´s about to show a small prompt with a message on it, for this type of notification you can construct an AlertDialog by using Builder whose methods all return the instance of itself, so you can chain a serie of calls togheter in line (This pattern is also kwnow as Prototype),  take a look to the next line:

new AlertDialog.Builder(this).setTitle("You").setMessage("Suck at photoshop").setPositiveButton("OK", null).show();

So,what we have here:

There´s a call to the method Builder of AlertDialog whose return an instance of the builder AlertDialog.Builder(context), context is the contexts on wich your alert will show. in this case the current scope this.

  • setTitle(String title) allows us to, well you know.
  • setMessage(String message) method allows us to specify the content of the alert.
  • setNeutralButton(String title, OnClickListener) creates a button with the specified title and optionally you can specify a second argument, that would be the handler for all those events that happend when the button is clicked ( for instance you could try to perform some check before close the window ya know? )

Last thing, you can call any of the three methods availables setPositiveButton,setNeutralButton and setNegativeButton before call show method,these methods specify the type of button(s) that will be displayed.

  • setPositiveButton – Describes an intended action or a confirmation, e.g. “Save” or “Yes”.
  • setNeutralButton  – Describes a “neutral” action such as “Close”.
  • setNegativeButton – Describes a cancellation or simply a “No”.

android alert

Now, we can make our alert baby a little more cute wih an icon.

The method is setIcon(int resourceId) wich can be called in any order of your chain call, resourceId referes to a drawable reference of your proyect, take the following line as an example:

new AlertDialog.Builder(this).setTitle("You").setMessage("Suck at photoshop").setIcon(R.drawable.icon).setPositiveButton("OK", null).show();

notification_android_icon

For a full list of builder methods, click here (API Docs)

Notifications

Notifications may look a litle bit complex but they´re not, so why don´t I give you first the code and the explain what does it means?

static final int NOTIFICATION_ID = 1593;

NotificationManager notifManager = (NotificationManager) getSystemService(NOTIFICATION_SERVICE);
Notification note = new Notification(R.drawable.icon, "New E-mail", System.currentTimeMillis());

PendingIntent intent = PendingIntent.getActivity(this, 0, new Intent(this, Main.class), 0);
note.setLatestEventInfo(this, "New E-mail", "You have one unread message.", intent);
notifManager.notify(NOTIF_ID, note);

Let me explain the flow of this by showing you this image:

notification

  • NotificationManager can send out – of course – Notifications objects,  so with the first of all what we do it´s create an instance of the device server and cast it as NotificationManager.
  • Next line, we create the notification Notification(int icon, CharSequence tickerText, long when) — constructs a Notification object with the
  • information needed to have a status bar icon without the standard expanded view. There´s also 2 different constructors so you can just call it
  • without arguments Notification() ( setted all to 0) and Notification(Parcel parcel) wich unflatten the notifdication from a parcel object.

Next line, creates an PendingIntent that will be the “callback” when the user hits the notification (in this case we’re having it start the MainActivity of the app)

PendingIntent : “By giving a PendingIntent to another application, you are granting it the right to perform the operation you have specified as if the other application was yourself (with the same permissions and identity)”

Now, Using setLatestEventInfo(Context context, CharSequence contentTitle, CharSequence contentText, PendingIntent contentIntent) we can specify a title, a message, and the Intent previously created that will be invoked when users click on the notification in the expanded

And then our notifManager will notify – :P the notification – the first argument is the constant to store and ID and can keep track of the notification, the value could be any int number that you wish.

Things you need to know when working with Notifications.

  • The notification is not cleared after the user clicks on it, you need to call notifManager.cancel(NOTIF_ID);

Toats

These are my favorites ones, because their simplicity and non obstrusive way of showing. In order to create a Toast, you need to create an object with one of the makeText() methods. This method takes three parameters: the application Context, the text message, and the duration for the toast. It returns a properly initialized Toast object.

Context context = getApplicationContext();//or this
CharSequence text = "Hello toast!";
int duration = Toast.LENGTH_SHORT;
Toast.makeText(context, text, duration).show();

toats android

  • Share/Bookmark