SlideShare une entreprise Scribd logo

Web 2.0

•Télécharger en tant que ODP, PDF•
•
Muhammad Nasr
Muhammad Nasr

This document provides an overview of key web development concepts including HTML, CSS, JavaScript, dynamic web pages, separation of concerns, MVC, AJAX, and Web 2.0. It discusses how these concepts work together to build modern, dynamic websites that are engaging for users. The document also provides examples of how to structure code using these techniques in languages like Ruby on Rails.

Technologie
1  sur  57
Web 2.0, The way to go ,[object Object],[object Object],[object Object]
Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object]
What is the Web ,[object Object],[object Object],[object Object],[object Object]
 
Request & Response ,[object Object],[object Object],[object Object]
HTML ,[object Object],[object Object],[object Object],[object Object],[object Object]
Adding Style ,[object Object],[object Object],[object Object]
CSS (Cascaded Style Sheets) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS example ,[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Box Model
Lets apply CSS!
Dynamic HTML ,[object Object],[object Object],[object Object],[object Object]
Java script ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Simple example ,[object Object],[object Object]
Functions ,[object Object],[object Object],[object Object],[object Object]
Control statements ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Control statements cont. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Interacting with HTML ,[object Object],[object Object],[object Object],[object Object]
DOM tree ,[object Object]
Accessing DOM tree ,[object Object],[object Object]
DOM example 1 ,[object Object]
DOM examples 2 ,[object Object],[object Object],[object Object],[object Object]
DOM examples 3 ,[object Object],[object Object]
Event handling ,[object Object],[object Object],[object Object],[object Object]
Lets see live example
Client vs Server side ,[object Object],[object Object],[object Object]
 
Server Side ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Simple JSP example ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
A more complex JSP ,[object Object],[object Object],[object Object],[object Object]
5 languages ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Separation of Concerns ,[object Object],[object Object],[object Object]
Separation of Concerns, cont. ,[object Object],[object Object],[object Object],[object Object]
Model View Controller - MVC ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Model View Controller - MVC ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
An MVC Cycle ,[object Object],[object Object],[object Object],[object Object],[object Object]
s
MVC example ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Ruby ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Ruby on Rails ,[object Object]
Other MVC frameworks ,[object Object],[object Object],[object Object]
Other MVC Frameworks ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Can we separate more? ,[object Object],[object Object],[object Object]
Separating View content ,[object Object],[object Object],[object Object],[object Object]
Separate Content and Style ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Separate Content and behavior ,[object Object],[object Object],[object Object],[object Object],[object Object]
Separate Content and behavior ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Are we Web 2.0 ,[object Object],[object Object]
What is Web 2.0 ,[object Object],[object Object],[object Object],[object Object],[object Object]
Web 2.0 mind map
Web 2.0 examples ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
How to be Web 2.0 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
What is AJAX ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
What is next? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
References & Articles ,[object Object],[object Object],[object Object],[object Object]
Thanks ,[object Object],[object Object],[object Object]
Questions & Feed Back

Recommandé

Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
zonathen
 
Jquery
JqueryJquery
Jquery
Gulbir Chaudhary
 
JavaScript
JavaScriptJavaScript
JavaScript
Gulbir Chaudhary
 
Java script
Java scriptJava script
Java script
reddivarihareesh
 
Advisor Jumpstart: JavaScript
Advisor Jumpstart: JavaScriptAdvisor Jumpstart: JavaScript
Advisor Jumpstart: JavaScript
dominion
 
Angular Js Advantages - Complete Reference
Angular Js Advantages - Complete ReferenceAngular Js Advantages - Complete Reference
Angular Js Advantages - Complete Reference
EPAM Systems
 
SharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & AccessibilitySharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & Accessibility
Mavention
 
Javascript
JavascriptJavascript
Javascript
Sun Technlogies
 

Recommandé

Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
zonathen
 
Jquery
JqueryJquery
Jquery
Gulbir Chaudhary
 
JavaScript
JavaScriptJavaScript
JavaScript
Gulbir Chaudhary
 
Java script
Java scriptJava script
Java script
reddivarihareesh
 
Advisor Jumpstart: JavaScript
Advisor Jumpstart: JavaScriptAdvisor Jumpstart: JavaScript
Advisor Jumpstart: JavaScript
dominion
 
Angular Js Advantages - Complete Reference
Angular Js Advantages - Complete ReferenceAngular Js Advantages - Complete Reference
Angular Js Advantages - Complete Reference
EPAM Systems
 
SharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & AccessibilitySharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & Accessibility
Mavention
 
Javascript
JavascriptJavascript
Javascript
Sun Technlogies
 
Javascript projects Course
Javascript projects CourseJavascript projects Course
Javascript projects Course
Laurence Svekis ✔
 
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Mediacurrent
 
JavaScript guide 2020 Learn JavaScript
JavaScript guide 2020 Learn JavaScriptJavaScript guide 2020 Learn JavaScript
JavaScript guide 2020 Learn JavaScript
Laurence Svekis ✔
 
Html javascript
Html javascriptHtml javascript
Html javascript
Soham Sengupta
 
Building Smart Workflows - Dan Diebolt
Building Smart Workflows - Dan DieboltBuilding Smart Workflows - Dan Diebolt
Building Smart Workflows - Dan Diebolt
QuickBase, Inc.
 
Wt unit 6 ppts web services
Wt unit 6 ppts web servicesWt unit 6 ppts web services
Wt unit 6 ppts web services
PUNE VIDYARTHI GRIHA'S COLLEGE OF ENGINEERING, NASHIK
 
Wt unit 5 client & server side framework
Wt unit 5 client & server side frameworkWt unit 5 client & server side framework
Wt unit 5 client & server side framework
PUNE VIDYARTHI GRIHA'S COLLEGE OF ENGINEERING, NASHIK
 
HTML5 & CSS3 in Drupal (on the Bayou)
HTML5 & CSS3 in Drupal (on the Bayou)HTML5 & CSS3 in Drupal (on the Bayou)
HTML5 & CSS3 in Drupal (on the Bayou)
Mediacurrent
 
Javascript
JavascriptJavascript
Javascript
Nagarajan
 
22 j query1
22 j query122 j query1
22 j query1
Fajar Baskoro
 
Wt unit 2 ppts client side technology
Wt unit 2 ppts client side technologyWt unit 2 ppts client side technology
Wt unit 2 ppts client side technology
PUNE VIDYARTHI GRIHA'S COLLEGE OF ENGINEERING, NASHIK
 
Java Script ppt
Java Script pptJava Script ppt
Java Script ppt
Priya Goyal
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
Gil Fink
 
My 70-480 HTML5 certification learning
My 70-480 HTML5 certification learningMy 70-480 HTML5 certification learning
My 70-480 HTML5 certification learning
Syed Irtaza Ali
 
Why Django for Web Development
Why Django for Web DevelopmentWhy Django for Web Development
Why Django for Web Development
Morteza Zohoori Shoar
 
Ultimate Skills Checklist for Your First Front-End Developer Job
Ultimate Skills Checklist for Your First Front-End Developer JobUltimate Skills Checklist for Your First Front-End Developer Job
Ultimate Skills Checklist for Your First Front-End Developer Job
Brenna Van Norman
 
Modern Web Technologies
Modern Web TechnologiesModern Web Technologies
Modern Web Technologies
Perttu Myry
 
Zend Framework
Zend FrameworkZend Framework
Zend Framework
Perttu Myry
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
kolev-prp
 
AngularJS - A JavaScript Framework
AngularJS - A JavaScript FrameworkAngularJS - A JavaScript Framework
AngularJS - A JavaScript Framework
Tekki Web Solutions Pvt. Ltd.
 
Webcomponents v2
Webcomponents v2Webcomponents v2
Webcomponents v2
Dmitry Bakaleinik
 
Rails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSSRails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSS
Timo Herttua
 

Contenu connexe

Tendances

Javascript projects Course
Javascript projects CourseJavascript projects Course
Javascript projects Course
Laurence Svekis ✔
 
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Mediacurrent
 
HTML5 & CSS3 in Drupal (on the Bayou)
HTML5 & CSS3 in Drupal (on the Bayou)HTML5 & CSS3 in Drupal (on the Bayou)
HTML5 & CSS3 in Drupal (on the Bayou)
Mediacurrent
 
Ultimate Skills Checklist for Your First Front-End Developer Job
Ultimate Skills Checklist for Your First Front-End Developer JobUltimate Skills Checklist for Your First Front-End Developer Job
Ultimate Skills Checklist for Your First Front-End Developer Job
Brenna Van Norman
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
kolev-prp
 

Tendances (20)

Javascript projects Course
Javascript projects CourseJavascript projects Course
Javascript projects Course
 
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
 
JavaScript guide 2020 Learn JavaScript
JavaScript guide 2020 Learn JavaScriptJavaScript guide 2020 Learn JavaScript
JavaScript guide 2020 Learn JavaScript
 
Html javascript
Html javascriptHtml javascript
Html javascript
 
Building Smart Workflows - Dan Diebolt
Building Smart Workflows - Dan DieboltBuilding Smart Workflows - Dan Diebolt
Building Smart Workflows - Dan Diebolt
 
Wt unit 6 ppts web services
Wt unit 6 ppts web servicesWt unit 6 ppts web services
Wt unit 6 ppts web services
 
Wt unit 5 client & server side framework
Wt unit 5 client & server side frameworkWt unit 5 client & server side framework
Wt unit 5 client & server side framework
 
HTML5 & CSS3 in Drupal (on the Bayou)
HTML5 & CSS3 in Drupal (on the Bayou)HTML5 & CSS3 in Drupal (on the Bayou)
HTML5 & CSS3 in Drupal (on the Bayou)
 
Javascript
JavascriptJavascript
Javascript
 
22 j query1
22 j query122 j query1
22 j query1
 
Wt unit 2 ppts client side technology
Wt unit 2 ppts client side technologyWt unit 2 ppts client side technology
Wt unit 2 ppts client side technology
 
Java Script ppt
Java Script pptJava Script ppt
Java Script ppt
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
My 70-480 HTML5 certification learning
My 70-480 HTML5 certification learningMy 70-480 HTML5 certification learning
My 70-480 HTML5 certification learning
 
Why Django for Web Development
Why Django for Web DevelopmentWhy Django for Web Development
Why Django for Web Development
 
Ultimate Skills Checklist for Your First Front-End Developer Job
Ultimate Skills Checklist for Your First Front-End Developer JobUltimate Skills Checklist for Your First Front-End Developer Job
Ultimate Skills Checklist for Your First Front-End Developer Job
 
Modern Web Technologies
Modern Web TechnologiesModern Web Technologies
Modern Web Technologies
 
Zend Framework
Zend FrameworkZend Framework
Zend Framework
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
 
AngularJS - A JavaScript Framework
AngularJS - A JavaScript FrameworkAngularJS - A JavaScript Framework
AngularJS - A JavaScript Framework
 

Similaire à Web 2.0

Intro to MVC 3 for Government Developers
Intro to MVC 3 for Government DevelopersIntro to MVC 3 for Government Developers
Intro to MVC 3 for Government Developers
Frank La Vigne
 
Beginners' guide to Ruby on Rails
Beginners' guide to Ruby on RailsBeginners' guide to Ruby on Rails
Beginners' guide to Ruby on Rails
Victor Porof
 

Similaire à Web 2.0 (20)

Webcomponents v2
Webcomponents v2Webcomponents v2
Webcomponents v2
 
Rails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSSRails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSS
 
MVC Demystified: Essence of Ruby on Rails
MVC Demystified: Essence of Ruby on RailsMVC Demystified: Essence of Ruby on Rails
MVC Demystified: Essence of Ruby on Rails
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1
 
CG_CS25010_Lecture
CG_CS25010_LectureCG_CS25010_Lecture
CG_CS25010_Lecture
 
PPT on javascript ajax and css and some points related to server
PPT on javascript ajax and css and some points related to serverPPT on javascript ajax and css and some points related to server
PPT on javascript ajax and css and some points related to server
 
Code igniter - A brief introduction
Code igniter - A brief introductionCode igniter - A brief introduction
Code igniter - A brief introduction
 
Developing Java Web Applications
Developing Java Web ApplicationsDeveloping Java Web Applications
Developing Java Web Applications
 
Crash Course HTML/Rails Slides
Crash Course HTML/Rails SlidesCrash Course HTML/Rails Slides
Crash Course HTML/Rails Slides
 
Intro to MVC 3 for Government Developers
Intro to MVC 3 for Government DevelopersIntro to MVC 3 for Government Developers
Intro to MVC 3 for Government Developers
 
PPT
PPTPPT
PPT
 
Writing and Testing JavaScript-heavy Web 2.0 apps with JSUnit
Writing and Testing JavaScript-heavy Web 2.0 apps with JSUnitWriting and Testing JavaScript-heavy Web 2.0 apps with JSUnit
Writing and Testing JavaScript-heavy Web 2.0 apps with JSUnit
 
Silverlight 2 for Developers - TechEd New Zealand 2008
Silverlight 2 for Developers - TechEd New Zealand 2008Silverlight 2 for Developers - TechEd New Zealand 2008
Silverlight 2 for Developers - TechEd New Zealand 2008
 
Fccwc326
Fccwc326Fccwc326
Fccwc326
 
Intro to .NET for Government Developers
Intro to .NET for Government DevelopersIntro to .NET for Government Developers
Intro to .NET for Government Developers
 
Introduction To Code Igniter
Introduction To Code IgniterIntroduction To Code Igniter
Introduction To Code Igniter
 
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
 
Beginners' guide to Ruby on Rails
Beginners' guide to Ruby on RailsBeginners' guide to Ruby on Rails
Beginners' guide to Ruby on Rails
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development Presentation
 
Monorail presentation at WebDevelopersCommunity, Feb 1, 2009
Monorail presentation at WebDevelopersCommunity, Feb 1, 2009Monorail presentation at WebDevelopersCommunity, Feb 1, 2009
Monorail presentation at WebDevelopersCommunity, Feb 1, 2009
 

Dernier

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc
 

Dernier (20)

A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 

Web 2.0

Notes de l'éditeur

  1. Put ajax loading image, find a good background