SEEM4570 System Design and Implementation. Lecture 3 Cordova and jquery
|
|
- Clarissa Fields
- 5 years ago
- Views:
Transcription
1 SEEM4570 System Design and Implementation Lecture 3 Cordova and jquery
2 Prepare a Cordova Project Assume you have installed all components successfully and initialized a project. E.g. follow Lecture Note 2 Page 5. Delete the following file: img/logo.png Modify the following files: index.html js/index.js css/index.css 2017 Gabriel Fung 2
3 Prepare a Cordova Project (cont d) Revise index.html: <!DOCTYPE html> <html> <head> <meta http-equiv="content-security-policy" > Use the default <meta name="format-detection" > settings for these <meta name="msapplication-tap-highlight" > meta statements <meta name="viewport" > <link rel="stylesheet" type="text/css href="css/index.css"> <script src="cordova.js"></script> <script src="js/index.js"></script> </head> <body> </body> </html> 2017 Gabriel Fung 3
4 Prepare a Cordova Project (cont d) Revise index.css: * { -webkit-tap-highlight-color: rgba(0,0,0,0); } body { -webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-user-select: none; width:100%; height:100%; margin:0px; padding:0px; } Revise index.js: DELETE EVERYTHING! (i.e. an empty file) 2017 Gabriel Fung 4
5 Prepare a Cordova Project (cont d) Now you should have the following structure: +--www +--css +--index.css <-- modified +--img <-- nothing +--js +--index.js <-- empty +--index.html <-- modified 2017 Gabriel Fung 5
6 Prepare a Cordova Project (cont d) Run your project (e.g. type simulate ios in the command prompt), you will have: 2017 Gabriel Fung 6
7 JavaScript Events Events are "things" that happen to HTML elements. Here are some examples of HTML events: An HTML web page has finished loading The page fired a loaded event An HTML input field was changed The input field fired a change event An HTML button was clicked The button fired a click event. When JavaScript is used in HTML pages, JavaScript can "react" on these events Gabriel Fung 7
8 Cordova DeviceReady Event As you can guess from the name of this event, the deviceready event means the mobile device is ready to use as it loads all necessary components. Technically, the deviceready event fires once Cordova has fully loaded. Once the event fires, you can safely make calls to Cordova APIs. Reference: events.deviceready.html 2017 Gabriel Fung 8
9 Cordova DeviceReady Event (cont d) You should write your program AFTER the device ready event fired. Revise your index.js: document.addeventlistener("deviceready", function(){ console.log( Device is ready now."); /* Write your programmig logic here But if we write everything inside here, your code will be extremely difficult to follow and not robust. A good practice is to write everything as Object. */ }); 2017 Gabriel Fung 9
10 Cordova DeviceReady Event (cont d) Revise your index.js as: document.addeventlistener("deviceready", function(){ console.log( Device is ready now."); app.init(); }); var app = { init: function() { console.log( App is initialized now."); } }; 2017 Gabriel Fung 10
11 Cordova DeviceReady Event (cont d) Run your app and you should see: 2017 Gabriel Fung 11
12 jquery jquery is a JavaScript Library. jquery greatly simplifies JavaScript programming. jquery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. jquery is easy to learn Gabriel Fung 12
13 Why jquery? There are lots of other JavaScript frameworks out there, but jquery seems to be the most popular, and also the most extendable. Many of the biggest companies on the Web use jquery, such as: Google Microsoft IBM 2017 Gabriel Fung 13
14 Adding jquery There are two ways to start using jquery on your web site: Method 1: download the jquery library from jquery.com and include in your application. Method 2: include jquery from a CDN, like Google Gabriel Fung 14
15 Method 1: Download jquery There are two versions of jquery available for downloading: Production version It has been minified and compressed. Please use this one in doing your project. Development version This is for testing and development Gabriel Fung 15
16 Method 1: Download jquery (cont d) After you downloaded the jquery library, save it into your project directory. +--www +--css +--img +--js +--index.js +--jquery min.js +--index.html Add into your index.html: <script src="js/jquery min.js"></script> <script src="cordova.js"></script> <script src="js/index.js"></script> 2017 Gabriel Fung 16
17 Method 2: Include from CDN If you don't want to download and host jquery yourself, you can include it from a CDN (Content Delivery Network): <script src=" 2.1/jquery.min.js"></script> <script src="cordova.js"></script> <script src="js/index.js"></script> We do not recommend this method because your App need to connect to Internet in order to use Gabriel Fung 17
18 Using jquery After you added jquery into your project, you need to wait jquery to load all its necessary resources before you can use it. There are a number of ways to do this. I recommend to use the following short hand: $(function(){ /* Everything inside here means jquery is loaded and you are safe to use jquery s functions. */ }); 2017 Gabriel Fung 18
19 Using jquery in Cordova Now we revise the index.js as follows: $(function(){ document.addeventlistener("deviceready", function(){ console.log( Device is ready now."); app.init(); }); }); var app = { init: function() { console.log( App is initialized now."); } }; Now you are ready to use jquery in your Cordova projects Gabriel Fung 19
20 Revise index.html and index.css Before we continue, let us revise index.html: <body> <div id="red" class="square"></div> <div id="green" class="square"></div> <div id="blue" class= rectangle"></div> <div id="yellow" class="rectangle"></div> </body> 2017 Gabriel Fung 20
21 Revise index.html and index.css (cont d) And also revise index.css:.square{ position:absolute; width:100px; height:100px; }.rectangle{ position:absolute; width:200px; height:100px; } #red{ top:0px; left:0px; background:red; } #green{ top:0px; left:100px; background:green; } #blue{ top:100px; left:0px; background:blue; } #yellow{ top:200px; left:0px; background:yellow; } 2017 Gabriel Fung 21
22 Revise index.html and index.css (cont d) Run your app and you should see: 2017 Gabriel Fung 22
23 jquery Basic Syntax The jquery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). Basic syntax is: $(selector).on(event, action) $ define we use jquery now. (selector) is used to find HTML elements based on their names, ids, classes, types, attributes and much more. event is the event that you want to monitor on those matched elements. action is what you want to do when the event is triggered Gabriel Fung 23
24 The element Selector The jquery selector finds elements based on the element name. Example: When we clicked on any div, it will show a message in the console: var app = { init: function() { $("div").on("click", function(){ console.log("div is clicked!"); }); } }; 2017 Gabriel Fung 24
25 The element Selector (cont d) Example: When we clicked on any div, all divs will fade out: var app = { init: function() { $("div").on("click", function(){ $("div").fadeout(); }); } }; 2017 Gabriel Fung 25
26 Using this We can use the magic keyword this to refer the element that triggered the event. Example: When we clicked on a div, only the clicked div will fade out: var app = { init: function() { $("div").on("click", function(){ $(this).fadeout(); }); } }; 2017 Gabriel Fung 26
27 The id Selector The jquery #id selector uses the id attribute of an HTML tag to find the specific element. Example: When we clicked on the red div, all divs will fade out: var app = { init: function() { $( #red").on("click", function(){ $("div").fadeout(); }); } }; 2017 Gabriel Fung 27
28 The class Selector The class selector uses the class name of an HTML tag to find the elements. Example: When we clicked on the div having the square class, it will fade out: var app = { init: function() { $(".square").on("click", function(){ $(this).fadeout(); }); } }; 2017 Gabriel Fung 28
29 About HTML Classes Note that we can have more than one class for an HTML element. Example: <div class= square large fancy ></div> The above div belongs to three classes: square, large and fancy By assigning more than one classes to an element, we can manipulate an element far more easier Gabriel Fung 29
30 jquery Events Some common events: click touchstart touchend touchmove touchcancel Reference: US/docs/Web/Events/touchstart 2017 Gabriel Fung 30
31 Other Resources Some other resources that can help you to add more events to your app easily: Swipe, Tap, Double Tap, Optimized for mobile platform 2017 Gabriel Fung 31
32 jquery Animate Previously, you already used an animation effect fadeout. We can animate elements using the method called animate. Example 1: When we clicked on a div, it will fade to 10% opacity: var app = { init: function() { $("div").on("click", function(){ $(this).animate({opacity: 0.1}, 500); }); This is the milliseconds to complete the animation } }; 2017 Gabriel Fung 32
33 jquery Animate Example 2: When we clicked on a div, it will move to a new position: var app = { init: function() { $("div").on("click", function(){ var x = $(this).position().top + 50; var y = $(this).position().left + 50; $(this).animate({top:x+"px", left:y+"px"}, 500); }); } }; 2017 Gabriel Fung 33
34 jquery Animate (cont ) Example 3: When we clicked on a div, it will move to a new position. If it already moved to a new position, it will move back. $("div").on("click", function(){ if(!$(this).hasclass("new_position")){ $(this).addclass("new_position"); var x = $(this).position().top + 50; var y = $(this).position().left + 50; $(this).animate({top:x+"px", left:y+"px"}); } else{ $(this).removeclass("new_position"); var x = $(this).position().top - 50; var y = $(this).position().left - 50; $(this).animate({top:x+"px", left:y+"px"}); } }); 2017 Gabriel Fung 34
35 jquery Animate (cont d) The above code has unexpected behavior when you clicked on it continuously! We need to stop the element to listen to any event when it is moving Gabriel Fung 35
36 jquery Animate (cont d) Example (2 nd Attempt): $("div").on("click", function(){ if(!$(this).hasclass("moving")){ $(this).addclass("moving"); if(!$(this).hasclass("new_position")){ $(this).addclass("new_position"); var x = $(this).position().top + 50; var y = $(this).position().left + 50; $(this).animate({top:x+"px", left:y+"px"}, 500, function(){ $(this).removeclass("moving"); }); } else{ $(this).removeclass("new_position"); var x = $(this).position().top - 50; 2017 Gabriel Fung 36
37 jquery Animate (cont d) } }); } var y = $(this).position().left - 50; $(this).animate({top:x+"px", left:y+"px"}, 500, function(){ $(this).removeclass("moving"); }); 2017 Gabriel Fung 37
SEEM4570 System Design and Implementation. Lecture 3 Events
SEEM4570 System Design and Implementation Lecture 3 Events Preparation Install all necessary software and packages. Follow Tutorial Note 2. Initialize a new project. Follow Lecture Note 2 Page 2. Reset
More informationSEEM4570 System Design and Implementation. Lecture 4 AJAX and Demo
SEEM4570 System Design and Implementation Lecture 4 AJAX and Demo Prerequisite Please follow lecture note 3 up to P. 19 to set up your app environment. We build everything on top of it. In index.html,
More informationSEEM4570 System Design and Implementation. Lecture 5 Loading
SEEM4570 System Design and Implementation Lecture 5 Loading Loading Page When you clicked different pages, it may show some flicks. The reason is it takes time to load CSS and render the content. You can
More informationSEEM4570 System Design and Implementation Lecture 04 jquery
SEEM4570 System Design and Implementation Lecture 04 jquery jquery! jquery is a JavaScript Framework.! It is lightweight.! jquery takes a lot of common tasks that requires many lines of JavaScript code
More informationCordova - Guide - App Development - Basics
Cordova - Guide - App Development - Basics Dr Nick Hayward A brief overview and introduction to Apache Cordova application development and design. Contents intro Cordova CLI - build initial project Cordova
More informationSEEM4570 System Design and Implementation. Lecture 1 Cordova + HTML + CSS
SEEM4570 System Design and Implementation Lecture 1 Cordova + HTML + CSS Apache Cordova Apache Cordova, or simply Cordova, is a platform for building native mobile apps using HTML, CSS and JavaScript E.g.
More informationWELCOME TO JQUERY PROGRAMMING LANGUAGE ONLINE TUTORIAL
WELCOME TO JQUERY PROGRAMMING LANGUAGE ONLINE TUTORIAL 1 The above website template represents the HTML/CSS previous studio project we have been working on. Today s lesson will focus on JQUERY programming
More informationCSC 337. jquery Rick Mercer
CSC 337 jquery Rick Mercer What is jquery? jquery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
More informationChapter 9 Introducing JQuery
Chapter 9 Introducing JQuery JQuery is a JavaScript library, designed to make writing JavaScript simpler and so it is useful for managing inputs and interactions with a page visitor, changing the way a
More informationLab 1: Introducing HTML5 and CSS3
CS220 Human- Computer Interaction Spring 2015 Lab 1: Introducing HTML5 and CSS3 In this lab we will cover some basic HTML5 and CSS, as well as ways to make your web app look and feel like a native app.
More informationCS7026. Introduction to jquery
CS7026 Introduction to jquery What is jquery? jquery is a cross-browser JavaScript Library. A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based
More informationWebomania Solutions Pvt. Ltd. 2017
Introduction JQuery is a lightweight, write less do more, and JavaScript library. The purpose of JQuery is to make it much easier to use JavaScript on the website. JQuery takes a lot of common tasks that
More informationClient Side JavaScript and AJAX
Client Side JavaScript and AJAX Client side javascript is JavaScript that runs in the browsers of people using your site. So far all the JavaScript code we've written runs on our node.js server. This is
More informationTouch Forward. Bill Fisher. #touchfwd. Developing Awesome Cross-Browser Touch
Touch Forward Developing Awesome Cross-Browser Touch Interactions Bill Fisher @fisherwebdev #touchfwd Super F*cking Important yeah, it s important. http://commons.wikimedia.org/wiki/file:071228_human_hands.jpg
More informationQuick.JS Documentation
Quick.JS Documentation Release v0.6.1-beta Michael Krause Jul 22, 2017 Contents 1 Installing and Setting Up 1 1.1 Installation................................................ 1 1.2 Setup...................................................
More informationBEFORE CLASS. If you haven t already installed the Firebug extension for Firefox, download it now from
BEFORE CLASS If you haven t already installed the Firebug extension for Firefox, download it now from http://getfirebug.com. If you don t already have the Firebug extension for Firefox, Safari, or Google
More informationIAT 355 : Lab 01. Web Basics
IAT 355 : Lab 01 Web Basics Overview HTML CSS Javascript HTML & Graphics HTML - the language for the content of a webpage a Web Page put css rules here
More information12/9/2012. CSS Layout
Dynamic HTML CSS Layout CSS Layout This lecture aims to teach you the following subjects: CSS Grouping and nesting Selectors. CSS Dimension. CSS Display.. CSS Floating. CSS Align. 1 CSS Grouping and nesting
More informationjquery Tutorial for Beginners: Nothing But the Goods
jquery Tutorial for Beginners: Nothing But the Goods Not too long ago I wrote an article for Six Revisions called Getting Started with jquery that covered some important things (concept-wise) that beginning
More informationJavaScript Fundamentals_
JavaScript Fundamentals_ HackerYou Course Syllabus CLASS 1 Intro to JavaScript Welcome to JavaScript Fundamentals! Today we ll go over what programming languages are, JavaScript syntax, variables, and
More informationFramework7 and PhoneGap. By Lars Johnson
Framework7 and PhoneGap By Lars Johnson What do I need to Know? HTML CSS JavaScript By Lars Johnson What is the difference between- Web App Native App Native/Web Hybrid App What are some examples? http://phonegap.com/blog/2015/03/12/mobile-choices-post1
More informationBuilding and packaging mobile apps in Dreamweaver CC
Building and packaging mobile apps in Dreamweaver CC Requirements Prerequisite knowledge Previous experience with Dreamweaver, jquery Mobile, and PhoneGap will help you make the most of this tutorial.
More informationDate Picker Haim Michael
Date Picker Introduction The date picker is one of the most popular jquery widgets in use. It is highly configurable and extremely easy to implement. Introduction Simple Date Picker
More informationWeb Development for Dinosaurs An Introduction to Modern Web Development
Web Development for Dinosaurs An Introduction to Modern Web Development 1 / 53 Who Am I? John Cleaver Development Team Lead at Factivity, Inc. An Introduction to Modern Web Development - PUG Challenge
More informationUX/UI Controller Component
http://www.egovframe.go.kr/wiki/doku.php?id=egovframework:mrte:ux_ui:ux_ui_controller_component_3.5 UX/UI Controller Component Outline egovframework offers the user an experience to enjoy one of the most
More informationNAVIGATION INSTRUCTIONS
CLASS :: 13 12.01 2014 NAVIGATION INSTRUCTIONS SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements CSS DROP-DOWN MENU
More informationCS193X: Web Programming Fundamentals
CS193X: Web Programming Fundamentals Spring 2017 Victoria Kirst (vrk@stanford.edu) Today's schedule Today: - Keyboard events - Mobile events - Simple CSS animations - Victoria's office hours once again
More informationAlert. In [ ]: %%javascript alert("hello");
JavaScript V Alerts and Dialogs For many years, alerts and dialogs, which pop up over the browser, were popular forms of user interaction These days there are nicer ways to handle these interactions, collectively
More informationWeb Development & Design Foundations with HTML5
1 Web Development & Design Foundations with HTML5 CHAPTER 14 A BRIEF LOOK AT JAVASCRIPT Copyright Terry Felke-Morris 2 Learning Outcomes In this chapter, you will learn how to: Describe common uses of
More informationJavaScript Lecture 3c (jquery)
JavaScript Lecture 3c (jquery) Waterford Institute of Technology June 18, 2016 John Fitzgerald Waterford Institute of Technology, JavaScriptLecture 3c (jquery) 1/28 JavaScript Introduction Topic discussed
More informationT his article is downloaded from
Fading Elements with JQuery The fade effect is when an element fades out by becoming increasingly transparent over time until it disappears or fades in by becoming decreasingly opaque over time until it
More informationWeb Authoring and Design. Benjamin Kenwright
CSS Div Layouts Web Authoring and Design Benjamin Kenwright Outline Review Why use Div Layout instead of Tables? How do we use the Div Tag? How to create layouts using the CSS Div Tag? Summary Review/Discussion
More informationConfiguring Hotspots
CHAPTER 12 Hotspots on the Cisco NAC Guest Server are used to allow administrators to create their own portal pages and host them on the Cisco NAC Guest Server. Hotspots created by administrators can be
More informationYour departmental website
Your departmental website How to create an online presence, with pictures 7 September, 2016 Jānis Lazovskis Slides available online at math.uic.edu/~jlv/webtalk Things to keep in mind There are many ways
More informationThe DOM and jquery functions and selectors. Lesson 3
The DOM and jquery functions and selectors Lesson 3 Plan for this lesson Introduction to the DOM Code along More about manipulating the DOM JavaScript Frameworks Angular Backbone.js jquery Node.js jquery
More informationWebsite Development Lecture 18: Working with JQuery ================================================================================== JQuery
JQuery What You Will Learn in This Lecture: What jquery is? How to use jquery to enhance your pages, including adding rich? Visual effects and animations. JavaScript is the de facto language for client-side
More informationweb-sockets-homework Directions
web-sockets-homework Directions For this homework, you are asked to use socket.io, and any other library of your choice, to make two web pages. The assignment is to create a simple box score of a football
More informationTo place an element at a specific position on a page use:
1 2 To place an element at a specific position on a page use: position: type; top: value; right: value; bottom: value; left: value; Where type can be: absolute, relative, fixed (also static [default] and
More informationFront-End UI: Bootstrap
Responsive Web Design BootStrap Front-End UI: Bootstrap Responsive Design and Grid System Imran Ihsan Assistant Professor, Department of Computer Science Air University, Islamabad, Pakistan www.imranihsan.com
More informationgrabattention The jquery Plug-in
grabattention The jquery Plug-in for an elegant way to bring user attention About Plug-in Grab Attention plug-in is developed to bring to notice / grab attention / get notify user for lead generation form,
More informationWEB DEVELOPER BLUEPRINT
WEB DEVELOPER BLUEPRINT HAVE A QUESTION? ASK! Read up on all the ways you can get help. CONFUSION IS GOOD :) Seriously, it s scientific fact. Read all about it! REMEMBER, YOU ARE NOT ALONE! Join your Skillcrush
More informationComputer Science nd Exam Prof. Papa Tuesday, April 28, 2016, 6:00pm 7:20pm
Computer Science 571 2 nd Exam Prof. Papa Tuesday, April 28, 2016, 6:00pm 7:20pm Name: Student ID Number: 1. This is a closed book exam. 2. Please answer all questions on the test Frameworks and Agile
More informationDeveloping Apps for the BlackBerry PlayBook
Developing Apps for the BlackBerry PlayBook Lab # 2: Getting Started with JavaScript The objective of this lab is to review some of the concepts in JavaScript for creating WebWorks application for the
More informationCIS 228 (Spring, 2012) Final, 5/17/12
CIS 228 (Spring, 2012) Final, 5/17/12 Name (sign) Name (print) email I would prefer to fail than to receive a grade of or lower for this class. Question 1 2 3 4 5 6 7 8 9 A B C D E TOTAL Score CIS 228,
More informationIN Development in Platform Ecosystems Lecture 2: HTML, CSS, JavaScript
IN5320 - Development in Platform Ecosystems Lecture 2: HTML, CSS, JavaScript 27th of August 2018 Department of Informatics, University of Oslo Magnus Li - magl@ifi.uio.no 1 Today s lecture 1. 2. 3. 4.
More informationCSS means Cascading Style Sheets. It is used to style HTML documents.
CSS CSS means Cascading Style Sheets. It is used to style HTML documents. Like we mentioned in the HTML tutorial, CSS can be embedded in the HTML document but it's better, easier and neater if you style
More informationPIC 40A. Midterm 1 Review
PIC 40A Midterm 1 Review XHTML and HTML5 Know the structure of an XHTML/HTML5 document (head, body) and what goes in each section. Understand meta tags and be able to give an example of a meta tags. Know
More informationMobile App Development with HTML5
Mobile App Development with HTML5 i LearnToProgram, Inc. ii Mobile App Development with HTML5 Mobile App Development with HTML5 Mark Lassoff with Tom Stachowitz LearnToProgram, Inc. Vernon, Connecticut
More information5/19/2015. Objectives. JavaScript, Sixth Edition. Using Touch Events and Pointer Events. Creating a Drag-and Drop Application with Mouse Events
Objectives JavaScript, Sixth Edition Chapter 10 Programming for Touchscreens and Mobile Devices When you complete this chapter, you will be able to: Integrate mouse, touch, and pointer events into a web
More informationResponsive Web Design and Bootstrap MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University
Responsive Web Design and Bootstrap MIS 2402 Konstantin Bauman Department of MIS Fox School of Business Temple University Exam 3 (FINAL) Date: 12/06/18 four weeks from now! JavaScript, jquery, Bootstrap,
More informationFrontend guide. Everything you need to know about HTML, CSS, JavaScript and DOM. Dejan V Čančarević
Frontend guide Everything you need to know about HTML, CSS, JavaScript and DOM Dejan V Čančarević Today frontend is treated as a separate part of Web development and therefore frontend developer jobs are
More informationManual Html A Href Onclick Submit Form
Manual Html A Href Onclick Submit Form JS HTML DOM. DOM Intro DOM Methods HTML form validation can be done by a JavaScript. If a form field _input type="submit" value="submit" /form_. As shown in a previous
More informationPositioning in CSS: There are 5 different ways we can set our position:
Positioning in CSS: So you know now how to change the color and style of the elements on your webpage but how do we get them exactly where we want them to be placed? There are 5 different ways we can set
More informationCreating Content with iad JS
Creating Content with iad JS Part 2 The iad JS Framework Antoine Quint iad JS Software Engineer ios Apps and Frameworks 2 Agenda Motivations and Features of iad JS Core JavaScript Enhancements Working
More informationAdvance CSS. Example: CSS Animation
Advance CSS Example: CSS Animation width:100px; height:100px; background:red;
More informationIntroduction to Cascading Style Sheet (CSS)
Introduction to Cascading Style Sheet (CSS) Digital Media Center 129 Herring Hall http://dmc.rice.edu/ dmc-info@rice.edu (713) 348-3635 Introduction to Cascading Style Sheets 1. Overview Cascading Style
More informationAP CS P. Unit 2. Introduction to HTML and CSS
AP CS P. Unit 2. Introduction to HTML and CSS HTML (Hyper-Text Markup Language) uses a special set of instructions to define the structure and layout of a web document and specify how the document should
More informationWeek 8 Google Maps. This week you ll learn how to embed a Google Map into a web page and add custom markers with custom labels.
Introduction Hopefully by now you ll have seen the possibilities that jquery provides for rich content on web sites in the form of interaction and media playback. This week we ll be extending this into
More informationDesign Document V2 ThingLink Startup
Design Document V2 ThingLink Startup Yon Corp Andy Chen Ashton Yon Eric Ouyang Giovanni Tenorio Table of Contents 1. Technology Background.. 2 2. Design Goal...3 3. Architectural Choices and Corresponding
More informationUI Course HTML: (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) Introduction. The World Wide Web (WWW) and history of HTML
UI Course (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) HTML: Introduction The World Wide Web (WWW) and history of HTML Hypertext and Hypertext Markup Language Why HTML Prerequisites Objective
More information{block:description} <meta name="description" content="{description}"/> {/block:description}
More information
Comp 426 Midterm Fall 2013
Comp 426 Midterm Fall 2013 I have not given nor received any unauthorized assistance in the course of completing this examination. Name: PID: This is a closed book exam. This page left intentionally blank.
More informationBootstrap Carousel. jquery Image Sliders
Bootstrap Carousel jquery Image Sliders Bootstrap Carousel Carousel bootstarp css js jquery js bootstrap.js http://getbootstrap.com/javascript/#carousel item ol.carousel-indicators li
More informationHTML5. HTML5 Introduction. Form Input Types. Semantic Elements. Form Attributes. Form Elements. Month Number Range Search Tel Url Time Week
WEB DESIGNING HTML HTML - Introduction HTML - Elements HTML - Tags HTML - Text HTML - Formatting HTML - Pre HTML - Attributes HTML - Font HTML - Text Links HTML - Comments HTML - Lists HTML - Images HTML
More informationSAMPLE CHAPTER. Raymond K. Camden MANNING
SAMPLE CHAPTER Raymond K. Camden MANNING Apache Cordova in Action by Raymond K. Camden Sample Chapter 8 Copyright 2016 Manning Publications brief contents PART 1 GETTING STARTED WITH APACHE CORDOVA...
More informationLab 1: Getting Started with IBM Worklight Lab Exercise
Lab 1: Getting Started with IBM Worklight Lab Exercise Table of Contents 1. Getting Started with IBM Worklight... 3 1.1 Start Worklight Studio... 5 1.1.1 Start Worklight Studio... 6 1.2 Create new MyMemories
More informationSizmek Formats. HTML5 Video Wall. Build Guide
Formats HTML5 Video Wall Build Guide Table of Contents Overview... 4 Supported Platforms... 7 Demos/Downloads... 7 Known Issues... 7 MMSlidingTab... 7 JavaScript API... 8 MMSlidingTabManager... 8 Constructor...
More informationHell is other browsers - Sartre. The touch events. Peter-Paul Koch (ppk) WebExpo, 24 September 2010
Hell is other browsers - Sartre The touch events Peter-Paul Koch (ppk) http://quirksmode.org http://twitter.com/ppk WebExpo, 24 September 2010 The desktop web Boring! - Only five browsers with only one
More informationCSS WHAT IS IT? HOW DOES IT WORK? (LOOK N GOOD)
CSS (LOOK N GOOD) CSS is short for Cascading Style Sheets. This is the stuff that allows you to add formatting and styling your web pages. WHAT IS IT? Let me show you HOW DOES IT WORK? If you have a headline
More informationshowinplaceholder The jquery Plug-in
showinplaceholder The jquery Plug-in for showing an image to place holder / target box About Plug-in Show in Place Holder plug-in is developed to show an image to place holder / target box. Plug-in can
More informationWrite a Touch-friendly HTML5 App. Hongbo Min, Intel Junmin Zhu, Intel Yongsheng Zhu, Intel
Write a Touch-friendly HTML5 App Hongbo Min, Intel Junmin Zhu, Intel Yongsheng Zhu, Intel Agenda Background Touch vs. Mouse Part I: UI Layout Part II: Event Handling Touch in HTML5 Framework Q/A 2 Background
More informationTAG STYLE SELECTORS. div Think of this as a box that contains things, such as text or images. It can also just be a
> > > > CSS Box Model Think of this as a box that contains things, such as text or images. It can also just be a box, that has a border or not. You don't have to use a, you can apply the box model to any
More informationJavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK
Programming for Digital Media EE1707 JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK 1 References and Sources 1. Javascript & JQuery: interactive front-end
More informationPurpose of this doc. Most minimal. Start building your own portfolio page!
Purpose of this doc There are abundant online web editing tools, such as wordpress, squarespace, etc. This document is not meant to be a web editing tutorial. This simply just shows some minimal knowledge
More information729G26 Interaction Programming. Lecture 4
729G26 Interaction Programming Lecture 4 Lecture overview jquery - write less, do more Capturing events using jquery Manipulating the DOM, attributes and content with jquery Animation with jquery Describing
More informationSAMPLE CHAPTER. Raymond K. Camden MANNING
SAMPLE CHAPTER Raymond K. Camden MANNING Apache Cordova in Action by Raymond K. Camden Sample Chapter 5 Copyright 2016 Manning Publications brief contents PART 1 GETTING STARTED WITH APACHE CORDOVA...
More informationFrontend II: Javascript and DOM Programming. Wednesday, January 7, 15
6.148 Frontend II: Javascript and DOM Programming Let s talk about Javascript :) Why Javascript? Designed in ten days in December 1995! How are they similar? Javascript is to Java as hamster is to ham
More informationIntroduction to HTML & CSS. Instructor: Beck Johnson Week 5
Introduction to HTML & CSS Instructor: Beck Johnson Week 5 SESSION OVERVIEW Review float, flex, media queries CSS positioning Fun CSS tricks Introduction to JavaScript Evaluations REVIEW! CSS Floats The
More informationwelcome to BOILERCAMP HOW TO WEB DEV
welcome to BOILERCAMP HOW TO WEB DEV Introduction / Project Overview The Plan Personal Website/Blog Schedule Introduction / Project Overview HTML / CSS Client-side JavaScript Lunch Node.js / Express.js
More informationAN INTRODUCTION TO WEB PROGRAMMING. Dr. Hossein Hakimzadeh Department of Computer and Information Sciences Indiana University South Bend, IN
AN INTRODUCTION TO WEB PROGRAMMING Dr. Hossein Hakimzadeh Department of Computer and Information Sciences Indiana University South Bend, IN CONTENTS A bit of history Inline vs. Embedded vs. External Style
More informationA340 Laboratory Session #5
A340 Laboratory Session #5 LAB GOALS Creating multiplication table using JavaScript Creating Random numbers using the Math object Using your text editor (Notepad++ / TextWrangler) create a web page similar
More informationJavaScript: Events, the DOM Tree, jquery and Timing
JavaScript: Events, the DOM Tree, jquery and Timing CISC 282 October 11, 2017 window.onload Conflict Can only set window.onload = function once What if you have multiple files for handlers? What if you're
More informationjmaki Overview Sang Shin Java Technology Architect Sun Microsystems, Inc.
jmaki Overview Sang Shin Java Technology Architect Sun Microsystems, Inc. sang.shin@sun.com www.javapassion.com Agenda What is and Why jmaki? jmaki widgets Using jmaki widget - List widget What makes up
More informationHuman-Computer Interaction Design
Human-Computer Interaction Design COGS120/CSE170 - Intro. HCI Instructor: Philip Guo Lab 3 - Interacting with webpage elements (2017-10-27) by Michael Bernstein, Scott Klemmer, and Philip Guo Why does
More informationCHAPTER 4 CASCADING STYLE SHEETS BASICS KEY CONCEPTS
BASICS OF WEB DESIGN CHAPTER 4 CASCADING STYLE SHEETS BASICS KEY CONCEPTS 1 LEARNING OUTCOMES Describe the purpose of Cascading Style Sheets List advantages of using Cascading Style Sheets Configure color
More informationUnderstanding this structure is pretty straightforward, but nonetheless crucial to working with HTML, CSS, and JavaScript.
Extra notes - Markup Languages Dr Nick Hayward HTML - DOM Intro A brief introduction to HTML's document object model, or DOM. Contents Intro What is DOM? Some useful elements DOM basics - an example References
More informationCSS Futures. Web Development
CSS Futures Web Development CSS Futures CSS3 CSS Preprocessors: SASS & LESS CSS Frameworks CSS3 CSS3 is the latest standard for CSS Combined with HTML5, CSS3 makes it possible to create highly interactive
More informationIntroduction to using HTML to design webpages
Introduction to using HTML to design webpages #HTML is the script that web pages are written in. It describes the content and structure of a web page so that a browser is able to interpret and render the
More informationServerless Single Page Web Apps, Part Four. CSCI 5828: Foundations of Software Engineering Lecture 24 11/10/2016
Serverless Single Page Web Apps, Part Four CSCI 5828: Foundations of Software Engineering Lecture 24 11/10/2016 1 Goals Cover Chapter 4 of Serverless Single Page Web Apps by Ben Rady Present the issues
More informationWeb Technologies II + Project Management for Web Applications
Web Engineering Web Technologies II + Project Management for Web Applications Copyright 2015 Ioan Toma & Nelia Lassiera 1 Where are we? # Date Title 1 5 th March Web Engineering Introduction and Overview
More informationFRONT END DEVELOPER CAREER BLUEPRINT
FRONT END DEVELOPER CAREER BLUEPRINT HAVE A QUESTION? ASK! Read up on all the ways you can get help. CONFUSION IS GOOD :) Seriously, it s scientific fact. Read all about it! REMEMBER, YOU ARE NOT ALONE!
More informationManual Html A Href Javascript Window Open In New
Manual Html A Href Javascript Window Open In New _a href="foracure.org.au" target="_blank" style="width: 105px," /a_ You might consider opening a new window with JavaScript instead, cf. to the accepted
More informationHCDE 530: Computational Techniques for HCDE Data Visualization in Web, Part 2
HCDE 530: Computational Techniques for HCDE Data Visualization in Web, Part 2 David McDonald, Sungsoo (Ray) Hong University of Washington Outline Before we start Download HCDE530_D3_part2.zip in the course
More informationThere are 3 places you can write CSS.
EXTRA CSS3. #4 Where to write CSS. There are 3 places you can write CSS. The best option is to write CSS is in a separate.css file. You then link that file to your HTML file in the head of your document:
More informationDreamweaver: Portfolio Site
Dreamweaver: Portfolio Site Part 3 - Dreamweaver: Developing the Portfolio Site (L043) Create a new Site in Dreamweaver: Site > New Site (name the site something like: Portfolio, or Portfolio_c7) Go to
More informationIntroduction to AngularJS
CHAPTER 1 Introduction to AngularJS Google s AngularJS is an all-inclusive JavaScript model-view-controller (MVC) framework that makes it very easy to quickly build applications that run well on any desktop
More informationfunction < name > ( < parameter list > ) { < statements >
Readings and References Functions INFO/CSE 100, Autumn 2004 Fluency in Information Technology http://www.cs.washington.edu/100 Reading» Fluency with Information Technology Chapter 20, Abstraction and Functions
More information/bodyshop/restrictive.htm. The descriptive text (between the <p>what type of critter would you like to be?
generic Bodyshop
More informationIntegration guide. Contents. Consentmanager.net
Integration guide Contents How to start?... 2 Setup your website and CMP... 2 Create own Design/s... 3 Aligning Texts... 4 Further customization of the CMP... 4 Integrating the CMP into your website/s...
More informationRapt Media Player API v2
Rapt Media Player API v2 Overview The Rapt Player API is organized as a JavaScript plugin that, when paired with a Rapt Video project*, allows developers to extend their interactive experiences into their
More information