Building your first Web App- An introduction into the world of Ethical Hacking

“Not just another boring talk”

Harsha R Vashishthttp://www.harsharv.com

Hi people

My name is Harsha R Vashisht

and I work for Yahoo!

I am a Developer Evangelist and I am going to talk about how you can build web applications with the help

of Yahoo!

This is going to be an interactive session, so don’t stop yourself from

asking questions.

What are we going to do today?

Basic Web development

Sleep…

Wake up for Pipes! Its Awesome

Check out YQL. It’s awesome too

Oh! I forgot. All stuff that we are releasing these days are just

awesome

BOSS (Baba )

Sleep, sleep and more sleep

YUI and other useful services

How will it help in my college projects?

The Yahoo Developer Network is the central source of everything

Yahoo! does to make developers happy!

http://developer.yahoo.com/

Web - development

Computer industry is waiting for you guys to write another compiler

Of the top FIVE paying companies amongst all colleges under VTU,

FOUR of them are web based

For developing a web app I need to know:

• PHP (Yeah!) / Python / Asp.Net / JSP / PERL

• HTML

• JavaScript

• CSS (helps to make your page look better)

Ok.. We know PHP.. And agree that it rocks!!!!

But for this session I need to know cURL. It’s useful.

cURL – client URL A cURL call helps me fetch a page

given a URL

Now let us look at Pipes...

http://pipes.yahoo.com

Pipes!!! – Is this similar to Unix pipe operator?

Yes. A couple of people at Yahoo! thought that having a Unix like pipe

for the web. It is kick ass!

Now. Let me build a sample mash up using pipes.

It is the Lok Sabha elections time. Lets aggregate news about it

Lok Sabha Elections!!!!!!

Looks like our friend has bought the keyword “Lok Sabha Elections”

every where. Literally!!!

Terminology

• Source: your data source, similar to cat or echo.

• Operator: anything that operates on data.

• Pipe: a pipe of data from an operator or source to an operator or destination, same as |.

• Output: the last element in your pipe, this returns data to the user.

Duck.. There will be code

I can fetch it using..

$url = 'http://pipes.yahoo.com/pipes/pipe.run?_’.’id=ZBGw3O4L3hG8R_C5AFYZ7A&_render=php';

function fetchURL($url)

{

$ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url ); curl_setopt($ch, CURLOPT_POST, 0 ); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); return curl_exec($ch);

}

$data = unserialize(fetchURL($url));

Now.. Wake up guys..

Its YQL time

YQL is Yahoo! Query Language

YQL is a SQL-style interface to all Yahoo data – and the web!

It is like the bottle opener of the Web, a single interface for all the properties of Yahoo! which have

exposed their APIs

The best part of YQL is the concept of open tables, in addition to the

50+ Yahoo tables

http://developer.yahoo.com/yql/console

http://developer.yahoo.com/yql/guide

Lets look at YQL

BOSS – Build your Own Search Service

Fourth highest number of search queries

First get an App Id

http://boss.yahooapis.com/ysearch/web/v1/katrina?format=xml&appid=...

http://boss.yahooapis.com/ysearch/web/v1/katrina?format=xml&view=keyterms&appid=...

Then you take YUI CSS grids, and spend 30 minutes playing with

colours and fonts.

And you have a product: http://keywordfinder.org

What else can I do?

Image SearchKeywords

Spelling suggestionsFilters

etc etc..

What is done with BOSS?

• http://isithackday.com/hacks/web-the-adventure/

• http://ask-boss.appspot.com/

• http://hakia.com/

• http://www.oneriot.com/

Sample code

http://paul.slowgeek.com/hacku/

YUI

Let’s take a walk... ...on the client side

The client side is where strange things happen.

Browsers render in fascinating and totally wrong ways.

YUI is a framework to build working web applications.

It includes CSS solutions to create layouts that work across browsers

and allow for predictable typography.

And it takes the pain out of writing JavaScript.

Last but very much not least it allows you to create applications using tested and working widgets that extend what HTML gives us.

Interface Widgets AutoComplete

DataTable Button Layout

Calendar Menu

Rich Text Charts TabView Container

http://developer.yahoo.com/yui/grids/builder/

http://isithackday.com/hacks/delhi/

What else does Yahoo! provide?

Design Patterns

Patterns are optimal solutions to common problems.

http://developer.yahoo.com/ypatterns/

Flickr

http://developer.yahoo.com/everything.html

End

Every business in the world is just another

Thanks

Harsha R Vashishthttp://www.harsharv.comhttp://twitter.com/harsharv

rvharsha@yahoo.commail@harsharv.com