Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli Intel.

Slides:



Advertisements
Similar presentations
Intel Do-It-Yourself Challenge Networking
Advertisements

Intel Do-It-Yourself Challenge Lab 5: Controlling Galileo from a webpage Nicolas Vailliet
Win8 on Intel Programming Course Win8 for developers, in detail Cédric Andreolli Intel.
Win8 on Intel Programming Course Desktop : Introduction Cédric Andreolli Intel Software.
Win8 on Intel Programming Course Desktop : WPF Cédric Andreolli Intel Software
10+10 Descending the Design Funnel Chapter 1.4 in Sketching User Experiences: The Workbook.
Intel Do-It-Yourself Challenge node.js
The State Transition Diagram
Win8 on Intel Programming Course Desktop : Sensors Cédric Andreolli Intel Software
Internet of Things with Intel Edison Getting started with your board Pierre Collet Intel.
Internet of Things with Intel Edison Web controller
Internet of Things with Intel Edison GPIO on Edison
Win8 on Intel Programming Course Win8 and Intel Paul Guermonprez Intel Software
11 Getting Started with ASP.NET Beginning ASP.NET 4.0 in C# 2010 Chapters 5 and 6.
Why Should I Sketch? Chapter 1.2 in Sketching User Experiences: The Workbook.
Intel Do-It-Yourself Challenge : Let’s build an autonomous drone Paul Guermonprez Intel.
The Keyboard Study Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in this deck is used from other.
Intel Do-It-Yourself Challenge Arduino sketches and full SD image Nicolas Vailliet Intel.
The Branching Storyboard Chapter 4.3 in Sketching the User Interface: The Workbook Image from:
Internet of Things with Intel Edison Presentation Paul Guermonprez Intel Software
Win8 on Intel Programming Course Desktop : Perceptual Computing Cédric Andreolli Intel.
ESE Einführung in Software Engineering N. XXX Prof. O. Nierstrasz Fall Semester 2009.
CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.
ESE Einführung in Software Engineering X. CHAPTER Prof. O. Nierstrasz Wintersemester 2005 / 2006.
Metamodeling Seminar X. CHAPTER Prof. O. Nierstrasz Spring Semester 2008.
CIS101 Introduction to Computing Week 05. Agenda Your questions CIS101 Survey Introduction to the Internet & HTML Online HTML Resources Using the HTML.
ESE Einführung in Software Engineering X. CHAPTER Prof. O. Nierstrasz Wintersemester 2005 / 2006.
Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Internet of Things with Intel Edison Led sensor lab
CP — Concurrent Programming X. CHAPTER Prof. O. Nierstrasz Wintersemester 2005 / 2006.
12. eToys. © O. Nierstrasz PS — eToys 12.2 Denotational Semantics Overview:  … References:  …
Sequential Storyboards Chapter 4.1 in Sketching the User Interface: The Workbook Image from:
Intel Do-It-Yourself Challenge Hello World with the Arduino IDE Nicolas Vailliet Intel.
Intel Do-It-Yourself Challenge Lab 1: Intel Galileo’s Arduino side Nicolas Vailliet
CIS101 Introduction to Computing Week 06. Agenda Your questions Excel Exam during second hour Our status after the snow day Introduction to the Internet.
CPSC 581 Human Computer Interaction II Interaction Design Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material.
Chapter 12 Creating and Using XML Documents HTML5 AND CSS Seventh Edition.
Collecting Images & Clippings Chapter 2.3 in Sketching User Experiences: The Workbook.
Graphical Screen Design Part 1: Contrast, Repetition, Alignment, Proximity Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada.
Win8 on Intel Programming Course Modern UI : Sensors Cédric Andreolli Intel Software.
Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli Intel Software.
Intel Do-It-Yourself Challenge OpenCV
Reading Data in Web Pages tMyn1 Reading Data in Web Pages A very common application of PHP is to have an HTML form gather information from a website's.
Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Win8 on Intel Programming Course The challenge Paul Guermonprez Intel Software
Basic HTML Hyper text markup Language. Re-cap  … - The tag tells the browser that this is an HTML document The html element is the outermost element.
Web Technologies Website Development Trade & Industrial Education
What is a sketch? Chapter 1.2 addendum Sketching User Experiences: The Workbook.
Intro to Dreamweaver Web Design Section 7-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.
Internet of Things with Intel Edison Compiling and running Pierre Collet Intel Software.
© Copyright Showeet.com I NSERT YOUR TITLE HERE. © Copyright Showeet.com Insert Your Title Here 2 Master text styles –Second level Third level –Fourth.
Web Design (2) Brackets - introduction. Brackets Brackets is a web design code editor It is an open-source project initiated by Adobe (creator of Dreamweaver)
Putting Applets into Web Pages.  Two things are involved in the process of putting applets onto web pages ◦ The.class files of the applet ◦ The html.
The Animated Sequence Chapter 5.1 in Sketching User Experiences: The Workbook.
Intel Do-It-Yourself Challenge Wi-Fi Nicolas Vailliet Intel Software
Internet of Things with Intel Edison CylonJS Pierre Collet Intel Software
Sketching Vocabulary Chapter 3.4 in Sketching User Experiences: The Workbook Drawing objects, people, and their activities.
Win8 on Intel Programming Course Paul Guermonprez Intel Software
Design of Everyday Things Part 2: Useful Designs? Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Images from:
USING JAVASCRIPT TO SHOW AN ALERT Web Design Sec 6-2 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
The Narrative Storyboard Chapter 4.4 in Sketching User Experiences: The Workbook.
Chapter 27 Getting “Web-ified” (Web Applications) Clearly Visual Basic: Programming with Visual Basic nd Edition.
LBSC 690 Session 4 Programming. Languages How do we learn a language? Learn by listening Then reading Then writing How do we teach programming? Learn.
COMP 143 Web Development with Adobe Dreamweaver CC.
Chapter 1 Getting Started with ASP.NET Objectives Why ASP? To get familiar with our IDE (Integrated Development Environment ), Visual Studio. Understand.
Sketching Vocabulary Chapter 3.4 in Sketching User Experiences: The Workbook Drawing objects, people, and their activities.
Using JavaScript to Show an Alert
Agenda Video pre-presentations Digital sketches & photo traces
Methodology Overview 2 basics in user studies Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in this.
Presentation transcript:

Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli Intel Software

Modern UI Coding Technologies available Javascript/HTML5 C#/XAML C++ Visual Basic

Modern UI Coding What will be covered Javascript/HTML5 The course is based on Visual Studio 2012 Lab A detailed lab is available in the ZIP file, with a doc file and sources.

Visual Studio 2012

Modern UI Hello World VS 2012 New project File > New > Project Select “Blank app” and enter an app name (“HelloWorld” ?)

Modern UI Hello World VS 2012 main window layout “Run” at the top, code at the center, solution explorer on the right

Modern UI Hello World VS 2012 solution = 1 or more projects

Manifest

What The manifest collect information about the application It's a XML document Contains The application's name The application's logo OS supported versions Application startup page, …

Manifest

What to remember Defines the start page ! Place to add new capabilities (webcam, microphone, etc) Information about your applications

Resources

Why resources ? It’s a very good practice is to avoid putting text strings directly into the code : use a resource file instead Your app will be easy to maintain and translate Here’s how Create a directory named “strings” in your project Create a subfolder named “en-US” in the new “strings” folder Create a new Resources file in the new “en-US” folder

Resources

Start page

A start page called « default.html » D

Start page The « default.html » file HTML5 format It's a good practice to associate a HTML file with a javascript file and a CSS file The default.html file is associated with js/default.js and css/default.css

Start page Anatomy of the « default.html » HTML5 file

Start page Vue and Controller The HTML5 is used to design the app window (Vue) It's possible to add texts, buttons, and a lot of other features Each element can be associated with handlers written in javascript (Controller)

Start page Let’s add some elements to the home page A title A text input and its associated label A submit button A paragraph area to display some text File to modify Resources file for user visible readable strings Start page HTML5 file to add the elements Javascript file to add the desired behavior

Resources and HTML Resources : strings/en-US/resources.resjon HTML5 Start page : default.html

Resources and HTML Strings Strings are in the resources file, in JSON format, associated with keys Keys Keys are used in the HTML5 file instead of the strings data-win-res You must use the data-win-res attribute in the HTML5, in the tag, or as a span markup

Analysing the Javascript Javascript Insert the code for the behavior before “app.start();”

Editing the Javascript First load resources from Javascript

Editing the Javascript Then change the onactivated handler

Editing the Javascript setPromise Will display the splash screen as long as necessary WinJS.UI.processAll Will scan the associated HTML document getElementById(“send”) Will retrieve the send button in the UI addEventListener Will add a listener to the button

Editing the Javascript Add the handler before app.start()

Launch HelloWorld Click the Play button

Next steps

HelloWorld detailed lab We propose you open the associated lab (doc file) and code HelloWorld yourself. Plus/Minus app On top of HelloWorld, you’ll find a slightly more complex example using the same technology, the Plus/Minus app.

License Creative Commons – By 3.0 You are free: to Share — to copy, distribute and transmit the work to Remix — to adapt the work to make commercial use of the work Under the following conditions: Attribution — You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work). With the understanding that: Waiver — Any of the above conditions can be waived if you get permission from the copyright holder. Public Domain — Where the work or any of its elements is in the public domain under applicable law, that status is in no way affected by the license. Other Rights — In no way are any of the following rights affected by the license: – Your fair dealing or fair use rights, or other applicable copyright exceptions and limitations; – The author's moral rights; – Rights other persons may have either in the work itself or in how the work is used, such as publicity or privacy rights. Notice — For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is with a link to this web page.