web applications
Post on 28-Jan-2015
774 Views
Preview:
DESCRIPTION
TRANSCRIPT
Emerging Trends on the Internet
S.KrishnamorthyEx. Senior EDP Manager,Southern Railway, India
Web Consultanthttp://www.cyberbrahma.com/
page 204/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
page 304/10/23 Presented by S.K (Cyber Brahma)
Web Page Anatomy
• <HTML>
• <style type=“text/css”>
• <?php ?>
• Content pulled from database(dynamic database-driven web
sites)
page 404/10/23 Presented by S.K (Cyber Brahma)
Are you satisfied?
page 504/10/23 Presented by S.K (Cyber Brahma)
Web 2.0
• Enhance creativity
• Information sharing
• Collaboration among users
• Internet as a platform
page 604/10/23 Presented by S.K (Cyber Brahma)
Web 2.0
page 704/10/23 Presented by S.K (Cyber Brahma)
page 804/10/23 Presented by S.K (Cyber Brahma)
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
page 904/10/23 Presented by S.K (Cyber Brahma)
Thus came XML
page 10
04/10/23 Presented by S.K (Cyber Brahma)
The Paradigm shift
•Beyond the Browser
•Invisible Browser
•Web Desktop
• Desktop widgets – Function-based
page 11
04/10/23 Presented by S.K (Cyber Brahma)
• 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
page 12
04/10/23 Presented by S.K (Cyber Brahma)
AIR Toolkit• Builds desktop applications
• Persistence and rich functionality
• Rich Internet Applications
• OS – independent
• Data-driven dashboardsNASDAQ, eBay, AOL, Yahoo!
page 13
04/10/23 Presented by S.K (Cyber Brahma)
The Big Brother!
page 14
04/10/23 Presented by S.K (Cyber Brahma)
Google Apps
• Docs• Spreadsheets• Presentations• Sites• Calendar• Maps•Gmail
page 15
04/10/23 Presented by S.K (Cyber Brahma)
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
page 16
04/10/23 Presented by S.K (Cyber Brahma)
Gmail
page 17
04/10/23 Presented by S.K (Cyber Brahma)
XML Custom markup language – human
legible
User-defined elements
Structured data sharing
Portable across systems
Well-formed
Valid
Semantic
page 18
04/10/23 Presented by S.K (Cyber Brahma)
R S S Rich Site Summary
(RSS 0.91)
RDF Site Summary (RSS 1.0)
Really Simple Syndication (RSS 2.0)
Resource Description Framework
page 19
04/10/23 Presented by S.K (Cyber Brahma)
page 20
04/10/23 Presented by S.K (Cyber Brahma)
page 21
04/10/23 Presented by S.K (Cyber Brahma)
Ubiquitous RSS RSS Feed Readers – Desktop & On Line
Aggregators & Syndication
News
Images
Podcasting
Video
page 22
04/10/23 Presented by S.K (Cyber Brahma)
RSS Aggregators Google Reader
Bloglines
Rojo
My MSN
Pluck
page 23
04/10/23 Presented by S.K (Cyber Brahma)
RSS Aggegator with Google API
page 24
04/10/23 Presented by S.K (Cyber Brahma)
RSS Mashup Google Mashup Editor
Yahoo! Pipes
PageFlakes
Netvibes
iGoogle
page 25
04/10/23 Presented by S.K (Cyber Brahma)
Web Graphics
JPEG, GIF & PNG Positioning by CSS Wrap around text Image Galleries IrfanView Copying Images Image Manipulation
page 26
04/10/23 Presented by S.K (Cyber Brahma)
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}
page 27
04/10/23 Presented by S.K (Cyber Brahma)
Image Markup
<img class=“alignleft” src=“/images/sk.jpg” alt=“I am The Greatest” />
<img style=“float: left;” padding: 3px;” …/>
page 28
04/10/23 Presented by S.K (Cyber Brahma)
<!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><p><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…. </p><p> </p> <p><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…. </p><p><br /></p> <p><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… </p>
</body></html>
page 29
04/10/23 Presented by S.K (Cyber Brahma)
Result of Markup
page 30
04/10/23 Presented by S.K (Cyber Brahma)
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
page 31
04/10/23 Presented by S.K (Cyber Brahma)
page 32
04/10/23 Presented by S.K (Cyber Brahma)
Irfan View
page 33
04/10/23 Presented by S.K (Cyber Brahma)
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
page 34
04/10/23 Presented by S.K (Cyber Brahma)
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();
• ?>
page 35
04/10/23 Presented by S.K (Cyber Brahma)
On the Fly with PHP
Dynamic resizing
Watermarking
Thumbnail creation
Rotating
Reducing file size
page 36
04/10/23 Presented by S.K (Cyber Brahma)
Working with images..
• Adobe Photoshop
• GIMP
• Stegenography
page 37
04/10/23 Presented by S.K (Cyber Brahma)
Thank You
S.K is only an email away at
yeskay@cyberbrahma.com
Any time for any info on the New Net!
top related