SEEM4570 System Design and Implementation. Lecture 3 Events
|
|
- Kelley Fletcher
- 5 years ago
- Views:
Transcription
1 SEEM4570 System Design and Implementation Lecture 3 Events
2 Preparation Install all necessary software and packages. Follow Tutorial Note 2. Initialize a new project. Follow Lecture Note 2 Page 2. Reset everything to scratch. Delete img/logo.png I assume you don t need the Cordova logo. Modify three files (see the following pages for detail): index.html, js/index.js and css/index.css 2017 Gabriel Fung 2
3 Preparation (cont d) Modify 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 Preparation (cont d) Modify 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; } 2017 Gabriel Fung 4
5 Preparation (cont d) Modify index.js: DELETE EVERYTHING (i.e. you will have an empty file) 2017 Gabriel Fung 5
6 Preparation (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 6
7 Preparation (cont d) Run your project (e.g. type simulate ios in the command prompt): Make sure turn on Developer mode 2017 Gabriel Fung 7
8 JavaScript Events Events are "things" that happen to HTML elements. Here are some examples of HTML events: An HTML page has finished loading The page fires a loaded event You are typing your address in a text box The text box fires a change event You clicked a button The button fires a click event. When JavaScript is used in HTML pages, JavaScript can "react" on these events Gabriel Fung 8
9 Cordova DeviceReady Event As you can guess from the name of this event, the deviceready event means the mobile device is ready to use because Cordova loaded all necessary components. Technically, once this event fires, you can safely make any call to the Cordova APIs and write the logic of your app. Reference: Gabriel Fung 9
10 Cordova DeviceReady Event (cont d) You should write your program AFTER the device ready event fired. Revise your index.js: document.addeventlistener("deviceready", function(){ /* Write your programmig logic here! */ }); 2017 Gabriel Fung 10
11 About Document Event It takes the following form: document.addeventlistener("xxx", function(){ }); The above statement means: In this document, I want it to listen to the event XXX. If the event XXX fires, I want to run the statements inside the function Gabriel Fung 11
12 Tidy Your Program Let say, you write index.js as: document.addeventlistener("deviceready", function(){ // You write 1,000 lines here. Put your whole app // inside this function }); There is nothing wrong in the above code. But we usually say that it is not robust and difficult to follow. Instead, we usually want to decompose a large program into smaller pieces. Two related terms: cohesion and coupling. You will learn more in SDLC (later in this course) Gabriel Fung 12
13 Tidy Your Program (cont d) One way I like is to encapsulate everything into object: 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 13
14 Tidy Your Program (cont d) Run your app and you should see: 2017 Gabriel Fung 14
15 jquery jquery is a JavaScript Library. jquery greatly simplifies JavaScript programming, especially event handling and animation. 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 15
16 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 16
17 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 17
18 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. It is common that this version contains many bugs Gabriel Fung 18
19 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.js +--index.html Add into your index.html: <script src="js/jquery.js"></script> <script src="cordova.js"></script> <script src="js/index.js"></script> 2017 Gabriel Fung 19
20 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 always connect to Internet to use (which violate the Project Specification) Gabriel Fung 20
21 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. Just like Cordova, you need to wait for the deviceready event. There are a number of ways to wait jquery, and I recommend the following short hand: $(function(){ /* Everything inside here means jquery is loaded and you are safe to use jquery s functions. */ }); 2017 Gabriel Fung 21
22 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 22
23 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 23
24 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 24
25 Revise index.html and index.css (cont d) Run your app and you should see: 2017 Gabriel Fung 25
26 jquery Basic Syntax The jquery syntax is tailor-made for selecting HTML elements and performing actions on them. Basic syntax is: $(selector).on(event, action) $ tell JS 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 26
27 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 27
28 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 28
29 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 29
30 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 30
31 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 31
32 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 32
33 jquery Events Some common events: click touchstart touchend touchmove touchcancel Reference: US/docs/Web/Events/touchstart 2017 Gabriel Fung 33
34 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 34
35 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 35
36 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 36
37 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 37
38 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 38
39 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 39
40 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 40
SEEM4570 System Design and Implementation. Lecture 3 Cordova and jquery
SEEM4570 System Design and Implementation Lecture 3 Cordova and jquery Prepare a Cordova Project Assume you have installed all components successfully and initialized a project. E.g. follow Lecture Note
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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 informationWhy Use A JavaScript Library?
Using JQuery 4 Why Use A JavaScript Library? Okay, first things first. Writing JavaScript applications from scratch can be difficult, time-consuming, frustrating, and a real pain in the, ahem, britches.
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 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 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 informationReact. HTML code is made up of tags. In the example below, <head> is an opening tag and </head> is the matching closing tag.
Document Object Model (DOM) HTML code is made up of tags. In the example below, is an opening tag and is the matching closing tag. hello The tags have a tree-like
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-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 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 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 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 informationIntroduction to WEB PROGRAMMING
Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks
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 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 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 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 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 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 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 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 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 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 informationCSCI 1100L: Topics in Computing Spring 2018 Web Page Project 50 points
CSCI 1100L: Topics in Computing Spring 2018 Web Page Project 50 points Project Due (All lab sections): Check on elc Assignment Objectives: Lookup and correctly use HTML tags. Lookup and correctly use CSS
More informationComp 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 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 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 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 informationCS7026 CSS3. CSS3 Graphics Effects
CS7026 CSS3 CSS3 Graphics Effects What You ll Learn We ll create the appearance of speech bubbles without using any images, just these pieces of pure CSS: The word-wrap property to contain overflowing
More informationdjango-baton Documentation
django-baton Documentation Release 1.0.7 abidibo Nov 13, 2017 Contents 1 Features 3 2 Getting started 5 2.1 Installation................................................ 5 2.2 Configuration...............................................
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 informationHuman-Computer Interaction Design
Human-Computer Interaction Design COGS120/CSE170 - Intro. HCI Instructor: Philip Guo Lab 6 - Connecting frontend and backend without page reloads (2016-11-03) by Michael Bernstein, Scott Klemmer, and Philip
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 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 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 informationForms So start a new web site
Tutorial Forms So start a new web site Rename to index.html Create the following layout Skeleton first Style it up, one style at a time and test Produces Create a nav link pointing back to the index.html
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 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 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 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 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 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 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 information/bodyshop/restrictive.htm. The descriptive text (between the <p>what type of critter would you like to be?
generic Bodyshop
More informationIn this project, you ll learn how to use CSS to create an animated sunrise.
Sunrise Introduction In this project, you ll learn how to use CSS to create an animated sunrise. Step 1: Creating the sun Let s start by adding an image for the sun and positioning it with some CSS. Activity
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 informationHere is the design that I created in response to the user feedback.
Mobile Creative Application Development Assignment 2 Report Design When designing my application, I used my original proposal as a rough guide as to how to arrange each element. The original idea was to
More informationAdvance CSS. Example: CSS Animation
Advance CSS Example: CSS Animation width:100px; height:100px; background:red;
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 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 information{block:description} <meta name="description" content="{description}"/> {/block:description}
More information
Understanding Angular Directives By Jeffry Houser
Understanding Angular Directives By Jeffry Houser A DotComIt Whitepaper Copyright 2016 by DotComIt, LLC Contents A Simple Directive... 4 Our Directive... 4 Create the App Infrastructure... 4 Creating a
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 informationJquery Manually Set Checkbox Checked Or Not
Jquery Manually Set Checkbox Checked Or Not Working Second Time jquery code to set checkbox element to checked not working. Apr 09 I forced a loop to show checked state after the second menu item in the
More informationAngularJS Intro Homework
AngularJS Intro Homework Contents 1. Overview... 2 2. Database Requirements... 2 3. Navigation Requirements... 3 4. Styling Requirements... 4 5. Project Organization Specs (for the Routing Part of this
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 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 informationDynamic Select Option Menu Using Ajax And PHP. Wednesday, Mar 11, 2015
Page 1 of 7 TalkersCode.com HTML CSS JavaScript jquery PHP MySQL Web Development Tutorials Dynamic Select Option Menu Using Ajax And PHP. Wednesday, Mar 11, 2015 Share 4 Stum Tags:- Ajax jquery PHP MySQL
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 informationDisplaying ndtv Graphics in Spotfire using TERR and JSViz
Displaying ndtv Graphics in Spotfire using TERR and JSViz Introduction The R package ndtv provides a quick and simple means to create compelling interactive graphics. The following R Code: library(ndtv)
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 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 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 informationTime series in html Canvas
Time series in html Canvas In this tutorial, we will create an html document and use it to animate a time series. html html (Hypertext Markup Language) is used to make web pages. No software is needed
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 information