Advanced Web Development Techniques - Aptifycommunity.aptify.com/downloads/AdvancedWeb... ·...
12
Advanced Web Development Techniques Chris Hunter - CGA Manitoba Joshua Grippo - Radolo
Transcript of Advanced Web Development Techniques - Aptifycommunity.aptify.com/downloads/AdvancedWeb... ·...
Advanced Web Development Techniques
Chris Hunter - CGA Manitoba
Joshua Grippo - Radolo
Agenda
• Housekeeping (washrooms and such)
• HTML5
• CSS 3
• Javascript Libraries
• Picking a Toolset
• AJAX
• XML & Web Services
• Bring it all together
• Social Media
• Q and A
HTML5 - Why & What's New
• W3C announced HTML5 to be delivered by 2014
• 5.1 by 2016
• Performance
• Several new API's = better UI interfaces and content
• New Doctype - so simple and easy <!DOCTYPE html>
• Semantics Elements = Clean Code
• Form Input Types and Attributes + Validation
HTML5 - Why & What's New Continued
• Data Attributes and Custom Data Attributes
• Multimedia (Video and Audio) & Graphics
• Offline Storage
• Older browser support
(html5shiv, modernizr)
• Resources: • HTML5Rocks.com
• WebGrid.com
• W3CSchools.com
• caniuse.com
CSS 3 What's New
• Animations and Transformations
• Rounded Corners
• Box & Text Shadowing
• Multiple Background &
Border images
• Font and Text Effects
• Columns
• rgb/rgba, hsl/hsla Colors
Javascript Libraries
• What are they:
• Javascript libraries are pre-written javascript that makes it easy for developers to use/code with javascript and AJAX.
• Libraries : JQuery, Modernizr, MooTools, Ext JS, Prototype, and more.
• Why Use One?
• Ease of development - don't have to be a javascript expert
• Less coding
• Cross Browser support
• Plugins
• Plug-ins - prebuilt items that extend libraries • example - FancyBox, CoinSlider (rotating banner)
Picking a Toolset
There are so many things out there! Which one do I choose?
• Standardize if possible
• Open Source o pros
Free!!!
Ability to Customize and Control
Alignment of Philosophy
o cons
Maturity
Available Labor Pool
Configuration Management
• Vendor Provided
o pros
Documentation
Training
Accountability
o cons
Cost
AJAX (Asynchronous JavaScript and XML)
• AJAX is a technique that allows you to build more interactive web applications.
• AJAX allows you communicate with your server without having to do a full page postback.
• Used to connect to web services, API's, files to obtain data for you web pages.
• Also used to send data to web services to be written to databases.
Web Services
• Web Services allow you to connect different systems together.
• ex: Single Sign-on service for Higher Logic, allows the higher logic sign-on to use your Aptify Web User login information.
• Web Services pass JSON? What about XML data using SOAP to transport?
• Are commonly programmed using C#, VB, PHP, Java.
• Why look at web services:
• You can open up your system (controlled by you) to allow others to interact with it.
• ex: you could create a an Orders Web Service that would allow you partners to create orders from their system.
Social Media
• Easy Road
• Preconfigured "widgets" for most social media: LinkedIN, Facebook, Twitter, Youtube, Yammer
• Lose some level of control
• Hard Road
• Most social media have APIs.
• REST
• Javascript
• Indepth knowledge of API is needed
• You have final say in the way your app interacts with your members
Bring it all together example
Aptify Mobile App
• HTML5 • Cross platform support
• CSS3
• Design / Styling
• JQuery and JQuery Mobile
• App functionality (no server side
coding like Ebusiness)
• AJAX - connects to web services
• Web Services
• Retrieve/Write data to Aptify
