SlideShare une entreprise Scribd logo
1  sur  4
Télécharger pour lire hors ligne
Client Side Integration
Web Development 101
Lesson 05.01
Week in Review
HTML is Content

Abstracted into the Document Object Model

CSS is Presentation

Selectors query the DOM

Properties style the DOM

JS is Functionality

Allows interactivity, AJAX, animation
Final Project mk.1
Bible Reading App
Requirements
Start with code from 04.01.02

Design and implement fully featured bible reading application

Display chapter contents using ajax when the user selects a book / chapter via the API

Chapters change using onchange event of select boxes

Display a loading indicator when an AJAX transaction is pending

Should be object oriented

Support multiple instances.

Create button to add multiple side-by-side bibles for comparison

Use CSS to style text and spacing for optimize readability. Layout should flow to fit multiple screen sizes

Contenu connexe

Tendances

CTU June 2011 - Windows Azure App Fabric
CTU June 2011 - Windows Azure App FabricCTU June 2011 - Windows Azure App Fabric
CTU June 2011 - Windows Azure App Fabric
Spiffy
 
Introduction to share point 2010 development
Introduction to share point 2010 developmentIntroduction to share point 2010 development
Introduction to share point 2010 development
Eric Shupps
 
Willie jackson portfolio
Willie jackson portfolioWillie jackson portfolio
Willie jackson portfolio
wjax24
 

Tendances (20)

MSDN Sessions 032817 - Azure Functions
MSDN Sessions 032817 - Azure FunctionsMSDN Sessions 032817 - Azure Functions
MSDN Sessions 032817 - Azure Functions
 
Chris OBrien - Weaving Enterprise Solutions into Office Products
Chris OBrien - Weaving Enterprise Solutions into Office ProductsChris OBrien - Weaving Enterprise Solutions into Office Products
Chris OBrien - Weaving Enterprise Solutions into Office Products
 
SharePoint 2013: Using Client-Side Rendering to color-code list cells
SharePoint 2013: Using Client-Side Rendering to color-code list cellsSharePoint 2013: Using Client-Side Rendering to color-code list cells
SharePoint 2013: Using Client-Side Rendering to color-code list cells
 
Développement cross-plateforme sans compromis avec Xamarin
Développement cross-plateforme sans compromis avec XamarinDéveloppement cross-plateforme sans compromis avec Xamarin
Développement cross-plateforme sans compromis avec Xamarin
 
SPS SYD -SharePoint Governance and Lifecycle Management with Project Server 2010
SPS SYD -SharePoint Governance and Lifecycle Management with Project Server 2010SPS SYD -SharePoint Governance and Lifecycle Management with Project Server 2010
SPS SYD -SharePoint Governance and Lifecycle Management with Project Server 2010
 
Refined Search With Minimal Clicks Toolbar
Refined Search With Minimal Clicks ToolbarRefined Search With Minimal Clicks Toolbar
Refined Search With Minimal Clicks Toolbar
 
Word on the Server
Word on the ServerWord on the Server
Word on the Server
 
CTU June 2011 - Windows Azure App Fabric
CTU June 2011 - Windows Azure App FabricCTU June 2011 - Windows Azure App Fabric
CTU June 2011 - Windows Azure App Fabric
 
Spicing up SharePoint web parts
Spicing up SharePoint web partsSpicing up SharePoint web parts
Spicing up SharePoint web parts
 
Selecting A Content Management System
Selecting A Content Management SystemSelecting A Content Management System
Selecting A Content Management System
 
Patterns and Practices in Building Office Add-ins
Patterns and Practices in Building Office Add-insPatterns and Practices in Building Office Add-ins
Patterns and Practices in Building Office Add-ins
 
Building productivity solutions with Microsoft Graph
Building productivity solutions with Microsoft GraphBuilding productivity solutions with Microsoft Graph
Building productivity solutions with Microsoft Graph
 
Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference
Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - referenceChris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference
Chris O'Brien - Modern SharePoint sites and the SharePoint Framework - reference
 
SP2010 Developer Tools
SP2010 Developer ToolsSP2010 Developer Tools
SP2010 Developer Tools
 
Building Cool apps with flex
Building Cool apps with flexBuilding Cool apps with flex
Building Cool apps with flex
 
Introduction to share point 2010 development
Introduction to share point 2010 developmentIntroduction to share point 2010 development
Introduction to share point 2010 development
 
Access SharePoint Remotely
Access SharePoint RemotelyAccess SharePoint Remotely
Access SharePoint Remotely
 
Introduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - ZaloniIntroduction to Adobe Flex - Zaloni
Introduction to Adobe Flex - Zaloni
 
Willie jackson portfolio
Willie jackson portfolioWillie jackson portfolio
Willie jackson portfolio
 
Angular webinar - Credo Systemz
Angular webinar - Credo SystemzAngular webinar - Credo Systemz
Angular webinar - Credo Systemz
 

En vedette (7)

Lightning Talk: Making JS better with Browserify
Lightning Talk: Making JS better with BrowserifyLightning Talk: Making JS better with Browserify
Lightning Talk: Making JS better with Browserify
 
06 Map Reduce
06 Map Reduce06 Map Reduce
06 Map Reduce
 
República velha
República velhaRepública velha
República velha
 
04 Advanced Javascript
04 Advanced Javascript04 Advanced Javascript
04 Advanced Javascript
 
01 Introduction To CSS
01 Introduction To CSS01 Introduction To CSS
01 Introduction To CSS
 
05 Web Services
05 Web Services05 Web Services
05 Web Services
 
王永慶八堂課
王永慶八堂課王永慶八堂課
王永慶八堂課
 

Similaire à 07 Integration Project Part 1

Office 2013 loves web developers slide
Office 2013 loves web developers   slideOffice 2013 loves web developers   slide
Office 2013 loves web developers slide
Fabio Franzini
 
Web 10mca556 syllabs
Web 10mca556 syllabsWeb 10mca556 syllabs
Web 10mca556 syllabs
Ramesh Bindu
 
Ofc216 Shah German Webcms
Ofc216 Shah German WebcmsOfc216 Shah German Webcms
Ofc216 Shah German Webcms
Punk Rock
 
SharePoint 2007 Presentation
SharePoint 2007 PresentationSharePoint 2007 Presentation
SharePoint 2007 Presentation
Ajay Jain
 

Similaire à 07 Integration Project Part 1 (20)

Web 2 0 Technologies
Web 2 0 TechnologiesWeb 2 0 Technologies
Web 2 0 Technologies
 
Office 2013 loves web developers slide
Office 2013 loves web developers   slideOffice 2013 loves web developers   slide
Office 2013 loves web developers slide
 
Web ml Explained
Web ml ExplainedWeb ml Explained
Web ml Explained
 
Web 10mca556 syllabs
Web 10mca556 syllabsWeb 10mca556 syllabs
Web 10mca556 syllabs
 
Programacion Utilizando Javascript Jquery, html y css
Programacion Utilizando Javascript Jquery, html y cssProgramacion Utilizando Javascript Jquery, html y css
Programacion Utilizando Javascript Jquery, html y css
 
Explore SharePoint 2010 Enterprise & Document Management features
Explore SharePoint 2010 Enterprise & Document Management features Explore SharePoint 2010 Enterprise & Document Management features
Explore SharePoint 2010 Enterprise & Document Management features
 
Webcast Wcm
Webcast WcmWebcast Wcm
Webcast Wcm
 
Ofc216 Shah German Webcms
Ofc216 Shah German WebcmsOfc216 Shah German Webcms
Ofc216 Shah German Webcms
 
Give your web apps some backbone
Give your web apps some backboneGive your web apps some backbone
Give your web apps some backbone
 
Dita for the web: Make Adaptive Content Simple for Writers and Developer
Dita for the web: Make Adaptive Content Simple for Writers and DeveloperDita for the web: Make Adaptive Content Simple for Writers and Developer
Dita for the web: Make Adaptive Content Simple for Writers and Developer
 
SharePoint Programming Basic
SharePoint Programming BasicSharePoint Programming Basic
SharePoint Programming Basic
 
Designing using Web Standards with Dreamweaver
Designing using Web Standards with DreamweaverDesigning using Web Standards with Dreamweaver
Designing using Web Standards with Dreamweaver
 
SharePoint 2007 Presentation
SharePoint 2007 PresentationSharePoint 2007 Presentation
SharePoint 2007 Presentation
 
Top 10 Javascript Frameworks For Easy Web Development
Top 10 Javascript Frameworks For Easy Web DevelopmentTop 10 Javascript Frameworks For Easy Web Development
Top 10 Javascript Frameworks For Easy Web Development
 
Structuring Content in WordPress using Advanced Custom Fields
Structuring Content in WordPress using Advanced Custom FieldsStructuring Content in WordPress using Advanced Custom Fields
Structuring Content in WordPress using Advanced Custom Fields
 
Angular vs.pdf
Angular vs.pdfAngular vs.pdf
Angular vs.pdf
 
The web as it should be
The web as it should beThe web as it should be
The web as it should be
 
Easy tabs, Slideshows, Dashboards, etc - Client Side Scripts for SharePoint
Easy tabs, Slideshows, Dashboards, etc - Client Side Scripts for SharePointEasy tabs, Slideshows, Dashboards, etc - Client Side Scripts for SharePoint
Easy tabs, Slideshows, Dashboards, etc - Client Side Scripts for SharePoint
 
Maximize Development Efficiency with ReactJS.pdf
Maximize Development Efficiency with ReactJS.pdfMaximize Development Efficiency with ReactJS.pdf
Maximize Development Efficiency with ReactJS.pdf
 
4 - Silverlight y SharePoint, por Rodrigo Diaz y Mauricio Angulo
4 - Silverlight y SharePoint, por Rodrigo Diaz y Mauricio Angulo4 - Silverlight y SharePoint, por Rodrigo Diaz y Mauricio Angulo
4 - Silverlight y SharePoint, por Rodrigo Diaz y Mauricio Angulo
 

Dernier

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Dernier (20)

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
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
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
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...
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
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...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 

07 Integration Project Part 1

  • 1. Client Side Integration Web Development 101 Lesson 05.01
  • 2. Week in Review HTML is Content Abstracted into the Document Object Model CSS is Presentation Selectors query the DOM Properties style the DOM JS is Functionality Allows interactivity, AJAX, animation
  • 4. Requirements Start with code from 04.01.02 Design and implement fully featured bible reading application Display chapter contents using ajax when the user selects a book / chapter via the API Chapters change using onchange event of select boxes Display a loading indicator when an AJAX transaction is pending Should be object oriented Support multiple instances. Create button to add multiple side-by-side bibles for comparison Use CSS to style text and spacing for optimize readability. Layout should flow to fit multiple screen sizes