developing windows 8 apps with html, css & javascript...

24

Upload: others

Post on 11-Jul-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video
Page 2: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video

Page 3: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video

Page 4: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video
Page 5: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video

o

o

Page 6: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video

Day 1 | HTML, CSS and JavaScript Day 2 | Windows Apps using HTML and JavaScript

Module 1: HTML5 Semantic Structure Module 1: Designing a Windows 8 App

Module 2: CSS3 Selectors and Style Properties Module 2: Developing Windows 8 Apps

Module 3: Advanced Layout and Animation Module 3: Working with Contracts

MEAL BREAK MEAL BREAK

Module 4: JavaScript Core Capabilities Module 4: UI and Controls

Module 5: DOM Interactions Module 5: Interactions

Module 6: Advanced Topics Module 6: Data Access

Page 7: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video
Page 8: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video

Module Agenda

Semantic tags

Forms

Audio / Video

Canvas

SVG

˃

Page 9: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video
Page 10: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video
Page 11: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video

Semantic tagsElement Level Purpose

<article> Block Independent content such as a blog post or article

<aside> Block Content slightly related to primary content on page

<figure> Block Grouping stand-alone content, such as video or image

<figcaption> Text For use with <figure>, (optionally) used to provide caption

<footer> Block Providing author, copyright data, etc.

<header> Block Introductory headings, could include navigation

<hgroup> Block For grouping <h1> to <h6>

<nav> Block Navigation – typically site level

<mark> Text Text to be referenced or highlighted

<section> Block Grouping of content usually with a heading, similar to chapters

<time> Text For date and/or time representation

Page 12: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video

Module Agenda

Semantic tags

Forms

Audio / Video

Canvas

SVG

˃

Page 13: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video

Forms

Page 14: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video
Page 15: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video

Module Agenda

Semantic tags

Forms

Audio / Video

Canvas

SVG

˃

Page 16: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video
Page 17: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video
Page 18: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video

Module Agenda

Semantic tags

Forms

Audio / Video

Canvas

SVG

˃

Page 19: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video
Page 20: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video

Module Agenda

Semantic tags

Forms

Audio / Video

Canvas

SVG˃

Page 21: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video
Page 22: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video
Page 23: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video

Summary

Semantic tags

Forms

Audio / Video

Canvas

SVG

Page 24: Developing Windows 8 Apps with HTML, CSS & JavaScript …download.microsoft.com/download/6/2/1/621B82A1-5E40-47B6... · 2018-10-13 · Module Agenda Semantic tags Forms Audio / Video