70-480 - Programming in HTML5 with JavaScript and CSS3
Download as PPTX, PDF3 likes1,266 views
The document discusses the development of interactive and visually appealing apps using various technologies such as HTML5, CSS3, and JavaScript. It emphasizes touch-first interactivity, efficient client/server data transfers, and the use of local data and offline capabilities in applications. Additionally, it provides references for building real-time web apps and designing metro style apps.
![// Apply transform to the slide
].elm.style.msTransform =
"scale(0.4) perspective(290px) rotateY(17deg)";
// Apply transition to the slide
“transform”
"2.5s";
slides[i].elm.style.msTransitionDelay = "0s";](https://image.slidesharecdn.com/html5javascriptandcss3-150227060433-conversion-gate01/85/70-480-Programming-in-HTML5-with-JavaScript-and-CSS3-16-320.jpg)
![[381] Building beautiful and interactive apps with HTML5 & CSS3
LEARN
MORE](https://image.slidesharecdn.com/html5javascriptandcss3-150227060433-conversion-gate01/85/70-480-Programming-in-HTML5-with-JavaScript-and-CSS3-17-320.jpg)
![[873] Designing Metro style apps using CSS3
LEARN
MORE](https://image.slidesharecdn.com/html5javascriptandcss3-150227060433-conversion-gate01/85/70-480-Programming-in-HTML5-with-JavaScript-and-CSS3-20-320.jpg)
![// Read file using FileReader and register handler for loadend
var filereader = new FileReader();
filereader.imagediv = d; // expando to store image element
filereader.onloadend = handleReaderOnLoadEnd;
filereader.readAsDataURL(file);
// Set image src in loadend handler
function handleReaderOnLoadEnd(event)
{
var image = this.imagediv.children[0].children[0];
image.src = this.result;
…
}](https://image.slidesharecdn.com/html5javascriptandcss3-150227060433-conversion-gate01/85/70-480-Programming-in-HTML5-with-JavaScript-and-CSS3-26-320.jpg)
![Securely enable the
real-time Web
For the browser and
beyond
Standards-based
and interoperable
[373] Building real-time web apps with HTML5 WebSockets
LEARN
MORE](https://image.slidesharecdn.com/html5javascriptandcss3-150227060433-conversion-gate01/85/70-480-Programming-in-HTML5-with-JavaScript-and-CSS3-40-320.jpg)
70-480 - Programming in HTML5 with JavaScript and CSS3
- 5. Beautiful Sites and Apps Easy-to-build, Touch-First Interactivity Engaging Page Layouts Better Client/Server Data Transfer Powerful Local Data and Offline
- 6. Windows Core OS Services JavaScript (Chakra) C C++ C# VB Metro style Apps Communication & Data Application Model Devices & Printing WinRT APIs Graphics & Media XAML HTML / CSS HTML JavaScript C C++ C# VB Desktop Apps Win32 .NET / SL Internet Explorer SystemServicesView Model ControllerCore
- 7. Windows Core OS Services JavaScript (Chakra) C C++ C# VB Metro style Apps Communication & Data Application Model Devices & Printing WinRT APIs Graphics & Media XAML HTML / CSS HTML JavaScript C C++ C# VB Desktop Apps Win32 .NET / SL Internet Explorer SystemServicesView Model ControllerCore
- 16. // Apply transform to the slide ].elm.style.msTransform = "scale(0.4) perspective(290px) rotateY(17deg)"; // Apply transition to the slide “transform” "2.5s"; slides[i].elm.style.msTransitionDelay = "0s";
- 17. [381] Building beautiful and interactive apps with HTML5 & CSS3 LEARN MORE
- 20. [873] Designing Metro style apps using CSS3 LEARN MORE
- 21. Powerful local data and offline
- 26. // Read file using FileReader and register handler for loadend var filereader = new FileReader(); filereader.imagediv = d; // expando to store image element filereader.onloadend = handleReaderOnLoadEnd; filereader.readAsDataURL(file); // Set image src in loadend handler function handleReaderOnLoadEnd(event) { var image = this.imagediv.children[0].children[0]; image.src = this.result; … }
- 27. LEARN MORE
- 30. LEARN MORE
- 38. Better client/server data transfer
- 40. Securely enable the real-time Web For the browser and beyond Standards-based and interoperable [373] Building real-time web apps with HTML5 WebSockets LEARN MORE