web applications

Emerging Trends on the Internet

S.KrishnamorthyEx. Senior EDP Manager,Southern Railway, India

Web Consultanthttp://www.cyberbrahma.com/

/10/23 Presented by S.K (Cyber Brahma)

The Evolution• Plain HTML web

page

• Add dynamic elements

Marquee

Applet

Javascript

Embed Audio

Flash Object

Plain text

An Image

Web Page Anatomy

• <HTML>

• <style type=“text/css”>

• <?php ?>

• Content pulled from database(dynamic database-driven web

sites)


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.0DoubleClick --> Google AdSense Ofoto --> FlickrAkamai --> BitTorrentmp3.com --> iTunesBritannica Online --> Wikipediapersonal websites --> bloggingdomain speculation --> SEOpage views --> cost per clickscreen scraping --> web servicespublishing --> participationCMS --> wikisdirectories (taxonomy)--> tagging ("folksonomy")stickiness --> syndication


Thus came XML

04/10/23 Presented by S.K (Cyber Brahma)

The Paradigm shift

•Beyond the Browser

•Invisible Browser

•Web Desktop

• Desktop widgets – Function-based


• Adobe Integrated Runtime

•Flash

•FlexFlex 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 dashboardsNASDAQ, 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);

• // Display resized imageheader('Content-type: image/jpeg');imagejpeg($image_resized);die();

• ?>


On the Fly with PHP

Dynamic resizing

Watermarking

Thumbnail creation

Rotating

Reducing file size


Working with images..

• Adobe Photoshop

• GIMP

• Stegenography


Thank You

S.K is only an email away at

[email protected]

Any time for any info on the New Net!

web applications

Technology

blah blah

lorem ipsum dolor