Web Applications

987 views

Published on

This presentation was made by me for the students of Rajalakshmi Engineering College, Chennai, India on the emerging trends in web technologies using xml and mashups.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
987
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web Applications

  1. 1. Emerging Trends on the Internet S.Krishnamorthy Ex. Senior EDP Manager,Southern Railway, India Web Consultant http://www.cyberbrahma.com/
  2. 2. The Evolution <ul><li>Plain HTML web page </li></ul><ul><li>Add dynamic elements </li></ul><ul><ul><li>Marquee </li></ul></ul><ul><ul><li>Applet </li></ul></ul><ul><ul><li>Javascript </li></ul></ul><ul><ul><li>Embed Audio </li></ul></ul><ul><ul><li>Flash Object </li></ul></ul><ul><li>Plain text </li></ul>An Image
  3. 3. <ul><li><HTML> </li></ul><ul><li><style type=“text/css”> </li></ul><ul><li><?php ?> </li></ul><ul><li>Content pulled from database </li></ul><ul><li>(dynamic database-driven web sites) </li></ul>Web Page Anatomy
  4. 4. Are you satisfied?
  5. 5. Web 2.0 <ul><li>Enhance creativity </li></ul><ul><li>Information sharing </li></ul><ul><li>Collaboration among users </li></ul><ul><li>Internet as a platform </li></ul>
  6. 6. Web 2.0
  7. 8. Web 2.0 deciphered! <ul><li>Web 1.0   Web 2.0 </li></ul><ul><li>DoubleClick --> Google AdSense </li></ul><ul><li>Ofoto --> Flickr </li></ul><ul><li>Akamai --> BitTorrent </li></ul><ul><li>mp3.com --> iTunes </li></ul><ul><li>Britannica Online --> Wikipedia </li></ul><ul><li>personal websites --> blogging </li></ul><ul><li>domain speculation --> SEO </li></ul><ul><li>page views --> cost per click </li></ul><ul><li>screen scraping --> web services </li></ul><ul><li>publishing --> participation </li></ul><ul><li>CMS --> wikis </li></ul><ul><li>directories (taxonomy)--> tagging (&quot;folksonomy&quot;) </li></ul><ul><li>stickiness --> syndication </li></ul>
  8. 9. Thus came XML
  9. 10. The Paradigm shift <ul><li>Beyond the Browser </li></ul><ul><li>Invisible Browser </li></ul><ul><li>Web Desktop </li></ul><ul><li>Desktop widgets – Function-based </li></ul>
  10. 11. <ul><li>Adobe Integrated Runtime </li></ul><ul><li>Flash </li></ul><ul><li>Flex </li></ul><ul><li>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. </li></ul>Adobe Suite
  11. 12. AIR Toolkit <ul><li>Builds desktop applications </li></ul><ul><li>Persistence and rich functionality </li></ul><ul><li>Rich Internet Applications </li></ul><ul><li>OS – independent </li></ul><ul><li>Data-driven dashboards </li></ul><ul><li>NASDAQ, eBay, AOL, Yahoo! </li></ul>
  12. 13. The Big Brother!
  13. 14. Google Apps <ul><ul><ul><ul><ul><li>Docs </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Spreadsheets </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Presentations </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Sites </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Calendar </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Maps </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Gmail </li></ul></ul></ul></ul></ul>
  14. 15. And then comes Ajax! <ul><ul><li>Asynchoronous Javascript and XML </li></ul></ul><ul><ul><li>Communicates with the server in the background </li></ul></ul><ul><ul><li>Without interfering with the current state of the web page </li></ul></ul><ul><ul><li>Uses XHTML and CSS for presentation </li></ul></ul><ul><ul><li>DOM for dynamic display of and interaction with data </li></ul></ul><ul><ul><li>XML and XSLT for the interchange and manipulation of data </li></ul></ul><ul><ul><li>XMLHttpRequest object for asynchronous communication </li></ul></ul><ul><ul><li>Javascript for combine these technologies </li></ul></ul>
  15. 16. Gmail
  16. 17. XML <ul><li>Custom markup language – human legible </li></ul><ul><li>User-defined elements </li></ul><ul><li>Structured data sharing </li></ul><ul><li>Portable across systems </li></ul><ul><li>Well-formed </li></ul><ul><li>Valid </li></ul><ul><li>Semantic </li></ul>
  17. 18. R S S <ul><ul><li>Rich Site Summary (RSS 0.91) </li></ul></ul><ul><ul><li>RDF Site Summary (RSS 1.0) </li></ul></ul><ul><ul><li>Really Simple Syndication (RSS 2.0) </li></ul></ul>Resource Description Framework
  18. 21. Ubiquitous RSS <ul><ul><li>RSS Feed Readers – Desktop & On Line </li></ul></ul><ul><ul><li>Aggregators & Syndication </li></ul></ul><ul><ul><li>News </li></ul></ul><ul><ul><li>Images </li></ul></ul><ul><ul><li>Podcasting </li></ul></ul><ul><ul><li>Video </li></ul></ul>
  19. 22. RSS Aggregators <ul><ul><li>Google Reader </li></ul></ul><ul><ul><li>Bloglines </li></ul></ul><ul><ul><li>Rojo </li></ul></ul><ul><ul><li>My MSN </li></ul></ul><ul><ul><li>Pluck </li></ul></ul>
  20. 23. RSS Aggegator with Google API
  21. 24. RSS Mashup <ul><ul><li>Google Mashup Editor </li></ul></ul><ul><ul><li>Yahoo! Pipes </li></ul></ul><ul><ul><li>PageFlakes </li></ul></ul><ul><ul><li>Netvibes </li></ul></ul><ul><ul><li>iGoogle </li></ul></ul>
  22. 25. Web Graphics <ul><ul><li>JPEG, GIF & PNG </li></ul></ul><ul><ul><li>Positioning by CSS </li></ul></ul><ul><ul><li>Wrap around text </li></ul></ul><ul><ul><li>Image Galleries </li></ul></ul><ul><ul><li>IrfanView </li></ul></ul><ul><ul><li>Copying Images </li></ul></ul><ul><ul><li>Image Manipulation </li></ul></ul>
  23. 26. <ul><ul><li>img.centered { </li></ul></ul><ul><ul><li>display: block; </li></ul></ul><ul><ul><li>margin-left: auto; </li></ul></ul><ul><ul><li>margin-right: auto; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>img.alignright { </li></ul></ul><ul><ul><li>padding: 4px; </li></ul></ul><ul><ul><li>margin: 0 0 2px 7px; </li></ul></ul><ul><ul><li>display: inline; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>img.alignleft { </li></ul></ul><ul><ul><li>padding: 4px; </li></ul></ul><ul><ul><li>margin: 0 7px 2px 0; </li></ul></ul><ul><ul><li>display: inline; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>.alignright { </li></ul></ul><ul><ul><li>float: right; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>.alignleft { </li></ul></ul><ul><ul><li>float: left </li></ul></ul><ul><ul><li>} </li></ul></ul>
  24. 27. Image Markup <ul><ul><ul><li><img class=“alignleft” src=“/images/sk.jpg” alt=“I am The Greatest” /> </li></ul></ul></ul><ul><ul><ul><li><img style=“float: left;” padding: 3px;” …/> </li></ul></ul></ul>
  25. 28. <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> </li></ul><ul><li><head> </li></ul><ul><li><title> Image Markup Tutorial</title> </li></ul><ul><li><meta name=&quot;generator&quot; content=&quot;Cyber Brahma&quot; /> </li></ul><ul><li><meta name=&quot;author&quot; content=&quot;S.K&quot; /> </li></ul><ul><li><meta name=&quot;keywords&quot; content=&quot;&quot; /> </li></ul><ul><li><meta name=&quot;description&quot; content=&quot;&quot; /> </li></ul><ul><li></head> </li></ul><ul><li><body><p><img style=&quot;float: left; padding: 3px;&quot; src=&quot;/images/sk.jpg&quot; width=&quot;80&quot; height=&quot;80&quot; alt=&quot;I am The Greatest&quot; />Lorem ipsum dolor sit amet, blah…blah…. </p> </li></ul><ul><li><p>&nbsp;</p> </li></ul><ul><li><p><img style=&quot;float: right; padding: 3px;&quot; src=&quot;/images/sk.jpg&quot; width=&quot;80&quot; height=&quot;80&quot; alt=&quot;I am The Greatest&quot; />Lorem ipsum dolor sit amet, blah… blah…. </p> </li></ul><ul><li><p><br /></p> </li></ul><ul><li><p><img style=&quot;display: block; margin-left: auto; margin-right: auto; padding: 3px;&quot; src=&quot;/images/sk.jpg&quot; width=&quot;80&quot; height=&quot;80&quot; alt=&quot;I am The Greatest&quot; />Lorem ipsum dolor sit amet, blah… blah… </p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  26. 29. Result of Markup
  27. 30. Image Gallery <ul><ul><ul><li>Flickr and Picasaweb </li></ul></ul></ul><ul><ul><ul><li>Image data through RSS </li></ul></ul></ul><ul><ul><ul><li>API for manipulation </li></ul></ul></ul><ul><ul><ul><li>Pull from the repository </li></ul></ul></ul><ul><ul><ul><li>PHP + MySql + ImageMagick/NetPBM </li></ul></ul></ul><ul><ul><ul><li>Organize, annotate, tag and discuss </li></ul></ul></ul><ul><ul><ul><li>Lightbox, Highslide Javascript </li></ul></ul></ul>
  28. 32. Irfan View
  29. 33. Copying images from the Web <ul><li>Right click method </li></ul><ul><li>Print Screen method </li></ul><ul><li>Cache copy method </li></ul><ul><li>Look for Licence </li></ul><ul><li>EXIF data </li></ul><ul><li>Beware of IPR </li></ul><ul><li>Re-save without data </li></ul><ul><li>Photoshop enhancement </li></ul>
  30. 34. Image manipulation on the Web <ul><li><?php // Load image $image = open_image('flower.jpg'); if ($image === false) { die ('Unable to open image'); } </li></ul><ul><li>// Get original width and height $width = imagesx($image); $height = imagesy($image); </li></ul><ul><li>// New width and height $new_width = 150; $new_height = 100; </li></ul><ul><li>// Resample $image_resized = imagecreatetruecolor($new_width, $new_height); imagecopyresampled($image_resized, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height); </li></ul><ul><li>// Display resized image header('Content-type: image/jpeg'); imagejpeg($image_resized); die(); </li></ul><ul><li>?> </li></ul>
  31. 35. On the Fly with PHP <ul><li>Dynamic resizing </li></ul><ul><li>Watermarking </li></ul><ul><li>Thumbnail creation </li></ul><ul><li>Rotating </li></ul><ul><li>Reducing file size </li></ul>
  32. 36. Working with images.. <ul><li>Adobe Photoshop </li></ul><ul><li>GIMP </li></ul><ul><li>Stegenography </li></ul>
  33. 37. Thank You S.K is only an email away at [email_address] Any time for any info on the New Net!

×