Web Applications

Emerging Trends on the Internet S.Krishnamorthy Ex. Senior EDP Manager,Southern Railway, India Web Consultant http://www.cyberbrahma.com/

The Evolution

Plain HTML web page

Add dynamic elements

Marquee

Applet

Javascript

Embed Audio

Flash Object

Plain text

An Image

<HTML>

<style type=“text/css”>

<?php ?>

Content pulled from database

(dynamic database-driven web sites)

Web Page Anatomy

Are you satisfied?

Web 2.0

Enhance creativity

Information sharing

Collaboration among users

Internet as a platform

Web 2.0

Web 2.0 deciphered!

Web 1.0 Web 2.0

DoubleClick --> Google AdSense

Ofoto --> Flickr

Akamai --> BitTorrent

mp3.com --> iTunes

Britannica Online --> Wikipedia

personal websites --> blogging

domain speculation --> SEO

page views --> cost per click

screen scraping --> web services

publishing --> participation

CMS --> wikis

directories (taxonomy)--> tagging ("folksonomy")

stickiness --> syndication

Thus came XML

The Paradigm shift

Beyond the Browser

Invisible Browser

Web Desktop

Desktop widgets – Function-based

Adobe Integrated Runtime

Flash

Flex

Flex is a highly productive, free opensource framework for building and maintaining expressive web applications that deploy consistently on all browsers, desktops and operating systems.

Adobe Suite

AIR Toolkit

Builds desktop applications

Persistence and rich functionality

Rich Internet Applications

OS – independent

Data-driven dashboards

NASDAQ, eBay, AOL, Yahoo!

The Big Brother!

Google Apps

Docs

Spreadsheets

Presentations

Sites

Calendar

Maps

Gmail

And then comes Ajax!

Asynchoronous Javascript and XML

Communicates with the server in the background

Without interfering with the current state of the web page

Uses XHTML and CSS for presentation

DOM for dynamic display of and interaction with data

XML and XSLT for the interchange and manipulation of data

XMLHttpRequest object for asynchronous communication

Javascript for combine these technologies

Gmail

XML

Custom markup language – human legible

User-defined elements

Structured data sharing

Portable across systems

Well-formed

Valid

Semantic

R S S

Rich Site Summary (RSS 0.91)

RDF Site Summary (RSS 1.0)

Really Simple Syndication (RSS 2.0)

Resource Description Framework

Ubiquitous RSS

RSS Feed Readers – Desktop & On Line

Aggregators & Syndication

News

Images

Podcasting

Video

RSS Aggregators

Google Reader

Bloglines

Rojo

My MSN

Pluck

RSS Aggegator with Google API

RSS Mashup

Google Mashup Editor

Yahoo! Pipes

PageFlakes

Netvibes

iGoogle

Web Graphics

JPEG, GIF & PNG

Positioning by CSS

Wrap around text

Image Galleries

IrfanView

Copying Images

Image Manipulation

img.centered {

display: block;

margin-left: auto;

margin-right: auto;

}

img.alignright {

padding: 4px;

margin: 0 0 2px 7px;

display: inline;

}

img.alignleft {

padding: 4px;

margin: 0 7px 2px 0;

display: inline;

}

.alignright {

float: right;

}

.alignleft {

float: left

}

Image Markup

<img class=“alignleft” src=“/images/sk.jpg” alt=“I am The Greatest” />

<img style=“float: left;” padding: 3px;” …/>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> Image Markup Tutorial</title>

<meta name="generator" content="Cyber Brahma" />

<meta name="author" content="S.K" />

<meta name="keywords" content="" />

<meta name="description" content="" />

</head>

<body><img style="float: left; padding: 3px;" src="/images/sk.jpg" width="80" height="80" alt="I am The Greatest" />Lorem ipsum dolor sit amet, blah…blah….

<img style="float: right; padding: 3px;" src="/images/sk.jpg" width="80" height="80" alt="I am The Greatest" />Lorem ipsum dolor sit amet, blah… blah….

<img style="display: block; margin-left: auto; margin-right: auto; padding: 3px;" src="/images/sk.jpg" width="80" height="80" alt="I am The Greatest" />Lorem ipsum dolor sit amet, blah… blah…

</body>

</html>

Result of Markup

Image Gallery

Flickr and Picasaweb

Image data through RSS

API for manipulation

Pull from the repository

PHP + MySql + ImageMagick/NetPBM

Organize, annotate, tag and discuss

Lightbox, Highslide Javascript

Irfan View

Copying images from the Web

Right click method

Print Screen method

Cache copy method

Look for Licence

EXIF data

Beware of IPR

Re-save without data

Photoshop enhancement

Image manipulation on the Web

<?php // Load image $image = open_image('flower.jpg'); if ($image === false) { die ('Unable to open image'); }

// Get original width and height $width = imagesx($image); $height = imagesy($image);

// New width and height $new_width = 150; $new_height = 100;

// Resample $image_resized = imagecreatetruecolor($new_width, $new_height); imagecopyresampled($image_resized, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);