non-native -> native?!

Slides:



Advertisements
Similar presentations
Intro to HTML. HTML HTML = HyperText Markup Language Used to define the content of a webpage HTML is made up of tags and attributes Content.
Advertisements

HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
HTML popo.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Cascading Style Sheets
CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.
/k/k 1212 Cascading Style Sheets Part one Marko Boon
Presenter: James Huang Date: Sept. 26,  Introduction  Basics  Lists  Links  Forms  CSS 2.
Making Things Look Nice: Visual Appearance and CSS CMPT 281.
Introduction to CSS. What is CSS? A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it’s style. Use your (X)HTML.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Cascading Style Sheets Based on Castro, HTML for the WWW, 6 th edition Ron Gerton, Fall 2007.
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
4.01 Cascading Style Sheets
Creating a Web portal: Part II HyperText Markup Language (HTML) Bair-Mundy.
Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.
18 People Surveyed HTML (HyperText Markup Language) HTML “tags” Describes structure Building blocks Headings, paragraphs, lists, links, images, quotes,
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Copyright 2007, Information Builders. Slide 1 Understanding Basic HTML Amanda Regan Technical Director June, 2008.
HTML: Hyptertext Markup Language Doman’s Sections.
HTML (Hyper Text Markup Language) Lecture II. Review Writing HTML files for web pages – efficient compact – fundamental. Text files with htm extension.
Spiderman ©Marvel Comics Creating Web Pages (part 1)
HTML Help book. HTML HTML is the programming language used to make web pages for the Internet. HTML stands for Hyper Text Markup Language. HTML is made.
Cascading Style Sheets
HTML & CSS Jan Janoušek.
INTRO TO WEB DEVELOPMENT html
Web Basics: HTML/CSS/JavaScript What are they?
HTML Basics.
4.01 Cascading Style Sheets
Creating Your Own Webpage
HyperText Markup Language
>> Introduction to CSS
HTML: HyperText Markup Language
Cao Yuewen SEEM4570 Tutorial 03: CSS Cao Yuewen
IS 360 Declaring CSS Styles
Cascading Style Sheets contd: Embedded Styles
Using Cascading Style Sheets Module B: CSS Structure
Basics of Web Design Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D.
Introduction to Web programming
Web Programming– UFCFB Lecture 6
Intro to CSS CS 1150 Fall 2016.
Principles of Software Development
Introduction to web design discussing which languages is used for website designing
Cascading Style Sheets
Introduction to Web programming
Intro to CSS CS 1150 Spring 2017.
CSS.
Styles and the Box Model
TOPICS Chrome Dev Tools Process for Building a Static Website
Basics of Web Design Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D.
Software Engineering for Internet Applications
Computers and Scientific Thinking David Reed, Creighton University
DynamicHTML Cascading Style Sheet Internet Technology.
5.2.3 Be able to use HTML and CSS to construct web pages
Web Programming– UFCFB Lecture 11
What are Cascading Stylesheets (CSS)?
Cascading Style Sheets
Lesson 4 – Introduction to CSS
Cascading Style Sheets™ (CSS)
DynamicHTML Cascading Style Sheet Internet Technology.
Pertemuan 1b
Training & Development
Chapter 2 HTML & CSS.
HTML & CSS 7 Languages in 7 Days.
Johan Ng and Muhammad Hazzry
Cascading Style Sheets
Lesson 3: Cascading Style Sheets (CSS) and Graphical Elements
4.01 Cascading Style Sheets
Presentation transcript:

non-native -> native?! Example http://phonegap.com/ create apps using a free open source framework that works for several platforms wrap your app (HTML, CSS, JavaScript) with something like PhoneGap deploy to multiple platforms!

jsfiddle loads of similar environments for development: http://tinkerbin.com/ http://tinker.io/ http://jsfiddle.net http://dabblet.com http://cssdesk.com http://jsbin.com

// GET THE PARTY STARTED!!!!!!! initGame(null); function initGame(canvasElement) { var gCanvasElement; if (!canvasElement) { canvasElement = document.createElement("canvas"); canvasElement.id = "gCanvas"; document.body.appendChild(canvasElement); } gCanvas = canvasElement; gCanvas.width = BWIDTH; gCanvas.height = BHEIGHT; gCanvas.addEventListener("click", gClick, false); gTime = setInterval("drawAvatar()", INTERVAL * (1/gLevel)); drawAvatar(); gContext = gCanvasElement.getContext("2d");

gCanvas.addEventListener("click", gClick, false); function gClick(eventHandler) { var point = gCursor(eventHandler); if (((point.x >= currX) && (point.x <= currX + 300)) && ((point.y >= currY) && (point.y <= currY + 300))) { hit(); }

var point = gCursor(eventHandler); function gCursor(eventHandler) { var x; var y; if (typeof eventHandler.pageX != "undefined" && typeof eventHandler.pageY != "undefined") { x = eventHandler.pageX; y = eventHandler.pageY; } else { x = eventHandler.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; y = eventHandler.clientY + document.body.scrollTop + document.documentElement.scrollTop; x -= gCanvas.offsetLeft; y -= gCanvas.offsetTop; x = Math.min(x, BWIDTH); y = Math.min(y, BHEIGHT); var point = new Point(x, y); return point;

var point = new Point(x, y); function Point(x, y) { this.x = x; this.y = y; }

hit(); function hit() { gScore += 1; if (gScore >= 5) { gScore = 0; gLevel += 1; if (gLevel >= MAXLEVEL) { alert("You win!!!"); gLevel = 1; } gTime = clearInterval(gTime); alert("On to level " + gLevel); gTime = setInterval("drawAvatar()", INTERVAL * (1 / gLevel)); clearInterval(gTime); document.getElementById("gameScore").innerHTML = gScore; document.getElementById("gameLevel").innerHTML = gLevel; drawAvatar();

drawAvatar(); function drawAvatar() { var avatarImage = new Image(); gCanvas.width = BWIDTH; gCanvas.height = BHEIGHT; gContext = gCanvas.getContext("2d"); gContext.fillStyle = "yellow"; gContext.fillRect(0, 0, BWIDTH, BHEIGHT); avatarImage.src = "http://www.wpclipart.com/cartoon/monsters/green_monster.png"; currX = Math.abs(Math.random() * BWIDTH - 50); currY = Math.abs(Math.random() * BHEIGHT - 50); gContext.drawImage(avatarImage, currX, currY, 400, 40); }

Purpose? just in your own words One line that says WHAT A FUNCTION DOES What did you come up with?

HTML history 11 year gap between HTML 4.01 and HTML5! there are problems inherent in mixing content and presentation. XML (eXtensible Markup Language), which shuffles all the presentation off onto XSLT (XML stylesheets). Browsers (particularly IE) were slow to implement full XML/XSLT support. That coupled with resistance from web developers effectively killed the move to XML. In practice, splitting content and presentation is accomplished by proper usage of HTML and CSS.

More on Tags <hr /> tag (horizontal rule). Adjusting the appearance of a horizontal rule can be done in CSS… (more on this soon!) The image tag is <img />. src (the source file) and alt (a text description of the image).

Tags you’ve seen! <div> defines a division or a section in an HTML document. used to group block-elements to format them with styles.

Example (w3schools.com) <!DOCTYPE html> <html> <body> <h3>This is a header</h3> <p>This is a paragraph.</p> <div style="color:#00FF00"> </div> </body> </html>

Output This is a header This is a paragraph.

Tables!

Easy! (try it!) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Column and Row Spanning</title> </head> <body> <table border="1"> <tr> <td>1</td> <td rowspan="2">2</td> <td>3</td> </tr> <td>4</td> <td>5</td> <td>X</td> <td colspan="2">6</td> <td>7</td> </table> </body> </html>

Loads of tags to play with Not going to be testing you on them! Eventually you will get to know more Important point Understand the relationship between HTML tags and CSS

Cascading Style Sheets CSS Goes into the HTML as <head> <title>MY TITLE! </title> <link rel="stylesheet" type="text/css" href="example-class.css" /> </head> The rel attribute should be set to "stylesheet". The type attribute should be set to "text/css". The href attribute should point to the css file. Rules relate properties to tags in HTML selector { properties }

Example of a CSS file h1 { color: red; font-family: Impact; text-align: right; } ul list-style-type: square; font-family: Comic Sans MS; hr color: green; background-color: green; width: 60%; height: 8px;

Loads you can do… .red { color: red; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>CSS Class Example</title> <link rel="stylesheet" type="text/css" href="example-class.css" /> </head> <body> <div class="red">Here's a little text from class red.</div> </body> </html>

Shows on a webpage as… Here's a little text from class red.

Colour We can adjust the color of any element using the color property. Similarly, you can adjust the color of the background with the background-color property. In general, you'll need to use a # symbol followed by six-digit hexadecimal (base-16) code. This is actually an RBG value. The first two digits are the red value, the second two green, and the last two blue. You can find colour pickers online to help!

Font There are a number of font properties which can be adjusted with CSS. You can list multiple fonts. The browser will try to use the first font in the list that is available on the user's machine. You can adjust the size of text with font-sizehttp://www.w3schools.com/cssref/pr_font_font-size.asp

Part 1 of next Assignment TEAM NAMES!!! Post this on Piazza (one per team) What will your app do? What technology do you want to use to build it?