• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web Applications
 

Web Applications

on

  • 1,606 views

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.

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.

Statistics

Views

Total Views
1,606
Views on SlideShare
1,584
Embed Views
22

Actions

Likes
1
Downloads
30
Comments
0

1 Embed 22

http://cyberbrahma.com 22

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web Applications Web Applications Presentation Transcript

    • 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 (&quot;folksonomy&quot;)
      • 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 &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
      • <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;>
      • <head>
      • <title> Image Markup Tutorial</title>
      • <meta name=&quot;generator&quot; content=&quot;Cyber Brahma&quot; />
      • <meta name=&quot;author&quot; content=&quot;S.K&quot; />
      • <meta name=&quot;keywords&quot; content=&quot;&quot; />
      • <meta name=&quot;description&quot; content=&quot;&quot; />
      • </head>
      • <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>
      • <p>&nbsp;</p>
      • <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>
      • <p><br /></p>
      • <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>
      • </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 image header('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_address] Any time for any info on the New Net!