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
 
DISEÑO E IMPLEMENTACION DE UNA PAGINA WEB
DISEÑO E IMPLEMENTACION DE UNA PAGINA WEBDISEÑO E IMPLEMENTACION DE UNA PAGINA WEB
DISEÑO E IMPLEMENTACION DE UNA PAGINA WEB
 
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
 
Introduction to MEAN Stack What it is and How it Works.pptx
Introduction to MEAN Stack What it is and How it Works.pptxIntroduction to MEAN Stack What it is and How it Works.pptx
Introduction to MEAN Stack What it is and How it Works.pptx
 

Dernier

Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
UK Journal
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 

Dernier (20)

ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 

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