AGENDA• WEB TECHNOLOGIESOverviewConceptHistory• GENERATION OF WORLD WIDE WEBWeb 1.0OverviewElementsTechnologyThe ShiftWeb ...
WEB TECHNOLOGIES“The interface between webservers and their clients”• Website Layouts• Mark up languages• Programming inte...
THE WWW CONCEPT• Common information space• Universality• Social networking• Analysis in general
GENERATIONS OF WWW• Content• Search• CommerceWEB 1.0• Speedy• Collaborative• Trustworthy• UbiquitousWEB 2.0 • TheIntellige...
WEB 1.0• First generation of the web (1991 - 2003)- Development of www- commercialization- The “Dot com” boomOverview
WEB 1.0• Web 1.0 focused on Me and My siteOverviewSite OwnerSite VisitorStatic websiteCreates websiteVisits website”Contac...
• Static pages instead of dynamic user-generatedcontent• The use of Framesets• The use of tables to position and align ele...
• Web 1.0 was dial-up, 50K average bandwidth• Protocols such as HTTP• Open standard markup languages such as HTMLand XML• ...
THE SHIFT TO WEB 2.0• Technological refinements- Broadband improved browsers- AJAX- Flash application platforms- Widgetiza...
WEB 1.0• “the mostly read only web”• 45 million global users (1996)• focused on companies• home pages• owning content• Bri...
• Term coined by O’Reilly Media in 2004• Supposed 2nd generation of internetbased services• Major emphasis on Online colla...
• Draws together the capabilities of client and serverside software• Information storage, creation and disseminationcapabi...
• Search• Links• Authoring• Tags (Folksonomies)• Extensions• SignalsCharacteristics: SLATESWEB 2.0
CLIENT SIDE TECHNOLOGIES• Open source• AJAXSERVER SIDE TECHNOLOGIES• PHP• RUBYonRAILS• COLDFUSION• CGI Perl• ASPTechnologi...
TechnologiesOPEN SOURCEA software whose source code is published and madeavailable to the public, enabling anyone to copy,...
Technologies: OPEN SOURCECMS (Content Management System)A content management system is software that keepstrack of every p...
Technologies: OPEN SOURCE• An open source solution that is freely available toeveryone• Enables user to build Web sites an...
Technologies: OPEN SOURCEFEATURES:• Simple template customizationThere are lots of templates available for Joomla on the w...
Technologies: OPEN SOURCEWEB BROWSERA software application used to locate and display webpagesExamples:Mozilla FirefoxWEB ...
Technologies: OPEN SOURCEWith security, stability, speed and much more, Firefox ismade for the way a user uses the Web.FEA...
Technologies: OPEN SOURCE• Easy CustomizationThousands of add-ons give you the freedom to make yourbrowser your own• Priva...
Technologies: OPEN SOURCESDK (Software Development Kit)A programming package that enables a programmer todevelop applicati...
Technologies: OPEN SOURCEADOBE FLEXAn open source framework for developing intuitive webapplications that make it much eas...
Technologies: OPEN SOURCEADOBE FLEXUSAGE:Rich data visualizationCustomer self serviceCleaner and more intuitive applicatio...
TechnologiesAJAX (Asynchronous JavaScript & XML)A group of interrelated web development techniquesused on the client-side ...
Design TrendsOVER SIZED LOGO/HEADERWEB 2.0
Design TrendsSKETCHES/ HAND DRAWN DESIGNSWEB 2.0
RICH AND GIGANTIC TYPOGRAPHYBASED DESIGNSDesign TrendsWEB 2.0
INTERACTIVE SINGLE PAGE LAYOUTDesign TrendsWEB 2.0
OUT-OF-THE-BOX DESIGNSDesign TrendsWEB 2.0
MAGAZINE/NEWSPAPER DESIGNSDesign TrendsWEB 2.0
3D ELEMENTS &TEXT DESIGNSDesign TrendsWEB 2.0
CHANGE OF PERSPECTIVEDesign TrendsWEB 2.0
RETRODesign TrendsWEB 2.0
The Semantic WebWEB 3.0
THANK YOU
Web Technologies 2.0
Upcoming SlideShare
Loading in …5
×

Web Technologies 2.0

2,203 views

Published on

The new age of the World Wide Web (WWW)

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,203
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Web Technologies 2.0

  1. 1. AGENDA• WEB TECHNOLOGIESOverviewConceptHistory• GENERATION OF WORLD WIDE WEBWeb 1.0OverviewElementsTechnologyThe ShiftWeb 2.0OverviewCharacteristicsTechnology (Open source, AJAX)(CMS: Joomla, Web Browser:Mozilla Firefox, SDK: Adobe Flex)Latest Design Trends
  2. 2. WEB TECHNOLOGIES“The interface between webservers and their clients”• Website Layouts• Mark up languages• Programming interfaces& languages• Document identification& display
  3. 3. THE WWW CONCEPT• Common information space• Universality• Social networking• Analysis in general
  4. 4. GENERATIONS OF WWW• Content• Search• CommerceWEB 1.0• Speedy• Collaborative• Trustworthy• UbiquitousWEB 2.0 • TheIntelligentWebWEB 3.0
  5. 5. WEB 1.0• First generation of the web (1991 - 2003)- Development of www- commercialization- The “Dot com” boomOverview
  6. 6. WEB 1.0• Web 1.0 focused on Me and My siteOverviewSite OwnerSite VisitorStatic websiteCreates websiteVisits website”Contact us” forms,e-mail feedback,e-newsletters, etc.
  7. 7. • Static pages instead of dynamic user-generatedcontent• The use of Framesets• The use of tables to position and align elements on apage. These were often used in combination with"spacer“ GIFs• Online guestbook• GIF buttons, typically 88x31 pixels in size promotingweb browsers and other products• HTML forms sent via emailElementsWEB 1.0
  8. 8. • Web 1.0 was dial-up, 50K average bandwidth• Protocols such as HTTP• Open standard markup languages such as HTMLand XML• Internet access through ISPs• Development of web browsersTechnologyWEB 1.0
  9. 9. THE SHIFT TO WEB 2.0• Technological refinements- Broadband improved browsers- AJAX- Flash application platforms- Widgetization• Change in general behavior of users- Privacy concerns- Rise in the literacy rate- Need for better speed- Social collaborationCauses
  10. 10. WEB 1.0• “the mostly read only web”• 45 million global users (1996)• focused on companies• home pages• owning content• Britannica Online• HTML, portals• web forms• directories (taxonomy)• Netscape• pages views• AdvertisingWEB 2.0• “the wildly read-write web”• 1 billion+ global users (2006)• focused on communities• blogs• sharing content• Wikipedia• XML, RSS• web applications• tagging ("folksonomy")• Google• cost per click• word of mouthDifferentiationTHE SHIFT TO WEB 2.0
  11. 11. • Term coined by O’Reilly Media in 2004• Supposed 2nd generation of internetbased services• Major emphasis on Online collaboration,Social networking sites, wikis, opensource, photo sharing, video sharing,blogs, TaggingOverviewWEB 2.0FacebookWikipediaFlickrYoutubeTwitterWordpressJoomlaRSS Feed
  12. 12. • Draws together the capabilities of client and serverside software• Information storage, creation and disseminationcapabilities• “Network as platform” computing• Rich user experience• User participation• Dynamic content• Metadata• Easy scalability• SLATES(Search – Links – Authoring – Tags – Extensions -Signals)CharacteristicsWEB 2.0
  13. 13. • Search• Links• Authoring• Tags (Folksonomies)• Extensions• SignalsCharacteristics: SLATESWEB 2.0
  14. 14. CLIENT SIDE TECHNOLOGIES• Open source• AJAXSERVER SIDE TECHNOLOGIES• PHP• RUBYonRAILS• COLDFUSION• CGI Perl• ASPTechnologiesWEB 2.0
  15. 15. TechnologiesOPEN SOURCEA software whose source code is published and madeavailable to the public, enabling anyone to copy, modifyand redistribute the source code without paying royaltiesor feesExamples:• CMS (Content Management Systems)DrupalJoomlaWordPress• Web BrowserMozilla Firefox• Wiki Server SoftwareMediaWiki• SDK (Software Development Kit)Adobe FlexWEB 2.0
  16. 16. Technologies: OPEN SOURCECMS (Content Management System)A content management system is software that keepstrack of every piece of content on your Web siteExamples:DrupalJoomlaWordPressWEB 2.0
  17. 17. Technologies: OPEN SOURCE• An open source solution that is freely available toeveryone• Enables user to build Web sites and powerful onlineapplications• Most popular Web site software available.FEATURES:• Easy installationJoomla is relatively easy to install in a PHP/MySQL-based hosting environment.• Intuitive managementIt is very easy to manage your website withJoomla. The installation pack gives you a basicidea how you can build your websiteWEB 2.0
  18. 18. Technologies: OPEN SOURCEFEATURES:• Simple template customizationThere are lots of templates available for Joomla on the web. Youcan choose different themes for your sites depending on itsstructure and orientation• Extra resources for add-onsIf the CMS functionalities are not enough for you, Joomla allowsyou to add extra tools on your site. With Joomla you can haveecommerce, forum, gallery add-ons and more.WEB 2.0
  19. 19. Technologies: OPEN SOURCEWEB BROWSERA software application used to locate and display webpagesExamples:Mozilla FirefoxWEB 2.0
  20. 20. Technologies: OPEN SOURCEWith security, stability, speed and much more, Firefox ismade for the way a user uses the Web.FEATURES:• Awesome BarsFind the sites you love in seconds (and without havingto remember clunky URLs)• One-Click BookmarkingBookmark, search and organize Web sites quickly andeasily• Super SpeedView Web pages way faster, using less of yourcomputer’s memoryWEB 2.0
  21. 21. Technologies: OPEN SOURCE• Easy CustomizationThousands of add-ons give you the freedom to make yourbrowser your own• Private BrowsingSurf the Web without leaving a single trace• TabsDo more at once with tabs you can organize with the drag ofa mouse• Session RestoreUnexpected shutdown? Go back to exactly where you left of• PersonasInstantly change the look of your Firefox with thousands ofeasy-to-install themesWEB 2.0
  22. 22. Technologies: OPEN SOURCESDK (Software Development Kit)A programming package that enables a programmer todevelop applications for a specific platformExamples:Adobe FlexWEB 2.0
  23. 23. Technologies: OPEN SOURCEADOBE FLEXAn open source framework for developing intuitive webapplications that make it much easier for people to viewand interpret dataTOOL KIT CHARACTERISTICS:• Efficient programming model• Developer tools• Server integration• Runtime consistency• Plentiful components• Outstanding performanceWEB 2.0
  24. 24. Technologies: OPEN SOURCEADOBE FLEXUSAGE:Rich data visualizationCustomer self serviceCleaner and more intuitive applicationsWEB 2.0
  25. 25. TechnologiesAJAX (Asynchronous JavaScript & XML)A group of interrelated web development techniquesused on the client-side to create interactive webapplicationsAJAX TECHNOLOGIES:• HTML or XHTML for presentation• The Document Object Model for dynamic displayof and interaction with data• XML for interchange of data• XMLHttpRequest object for asynchronouscommunication• JavaScript to bring these technologies togetherWEB 2.0
  26. 26. Design TrendsOVER SIZED LOGO/HEADERWEB 2.0
  27. 27. Design TrendsSKETCHES/ HAND DRAWN DESIGNSWEB 2.0
  28. 28. RICH AND GIGANTIC TYPOGRAPHYBASED DESIGNSDesign TrendsWEB 2.0
  29. 29. INTERACTIVE SINGLE PAGE LAYOUTDesign TrendsWEB 2.0
  30. 30. OUT-OF-THE-BOX DESIGNSDesign TrendsWEB 2.0
  31. 31. MAGAZINE/NEWSPAPER DESIGNSDesign TrendsWEB 2.0
  32. 32. 3D ELEMENTS &TEXT DESIGNSDesign TrendsWEB 2.0
  33. 33. CHANGE OF PERSPECTIVEDesign TrendsWEB 2.0
  34. 34. RETRODesign TrendsWEB 2.0
  35. 35. The Semantic WebWEB 3.0
  36. 36. THANK YOU

×