I Can t Believe It s Not
|
|
- Katherine O’Connor’
- 5 years ago
- Views:
Transcription
1 I Can t Believe It s Not
2 <omg code="on slides"/>
3
4 Animating CSS properties Timer JavaScript sets CSS Reflow Rendering Paint
5
6 Animating CSS properties Timer JavaScript sets CSS Reflow Rendering Paint
7 Performance hit
8 Performance hit JavaScript Reflow Rendering Paint
9 Performance hit JavaScript Reflow Rendering Paint
10 Performance hit JavaScript Reflow Rendering Paint
11 Performance hit JavaScript Reflow Rendering Paint
12 Performance hit JavaScript Reflow Rendering Paint
13 Browser CSS animation/ transitions Timer Browser updates CSS Reflow Rendering Paint
14
15 Timer JavaScript sets CSS Reflow Rendering Paint Timer Browser updates CSS Reflow Rendering Paint
16 Timer JavaScript sets CSS Reflow Rendering Paint Timer Browser updates CSS Reflow Rendering Paint
17 -webkit-transform Paint JavaScript or Browser sets CSS
18
19
20
21 <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" xml:lang="en" lang="en"> <head> <meta http- equiv="content- Type" content="text/html; charset=utf- 8"/> <title>index</title> <style type="text/css" media="screen"> div { position: absolute; border: 3px solid red; } #d1 { left: 20px; top: 20px; width: 400px; height: 400px; - webkit- transform:translatez(0px); } #d2 { left: 100px; top: 30px; width: 150px; height: 100px; - webkit- transform:translatez(- 100px); } #d3 { left: 300px; top: 40px; width: 100px; height: 50px; - webkit- transform:translatez(- 200px); } #d4 { left: 320px; top: 80px; width: 90px; height: 50px; - webkit- transform:translatez(- 300px); } #d5 { left: 280px; top: 90px; width: 90px; height: 50px; - webkit- transform:translatez(- 400px); } body { - webkit- transform- style: preserve- 3d;
22 #d2 { left: 100px; top: 30px; width: 150px; height: 100px; - webkit- transform:translatez(- 100px); } #d3 { left: 300px; top: 40px; width: 100px; height: 50px; - webkit- transform:translatez(- 200px); } #d4 { left: 320px; top: 80px; width: 90px; height: 50px; - webkit- transform:translatez(- 300px); } #d5 { left: 280px; top: 90px; width: 90px; height: 50px; - webkit- transform:translatez(- 400px); } body { - webkit- transform- style: preserve- 3d; - webkit- transform:rotatex(0deg) rotatey(0deg) rotatez(0deg) perspective(0); } body.stage2 { - webkit- transition: - webkit- transform 10s; - webkit- transform:rotatex(30deg) rotatey(- 50deg) rotatez(10deg) perspective(0); } </style> </head> <body> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> <div id="d4"></div> <div id="d5"></div> </body> </html>
23 Safari on Snow Leopard, or on Windows: Nokia s Starlight browser (alpha)
24
25
26 Fullscreen HD Video CPU% HTML5: 10% FLASH: 100+% (and dropped frames)
27
28 Canvas Timer JavaScript uses Canvas APIs Paint
29
30 Physics engine with Canvas Timer 1) clear canvas 2) physics iteration 3) draw shapes Paint Box2D physics engine
31 function createball(world, x, y) { var ballsd = new b2circledef(); ballsd.density = 0.3; ballsd.radius = 20+Math.random()*20; ballsd.restitution = 0.1; ballsd.friction = 0.2; var ballbd = new b2bodydef(); ballbd.rotation = 0.3; ballbd.addshape(ballsd); ballbd.position.set(x,y); return world.createbody(ballbd); }
32 world.step(ms,1);
33 3) draw shapes box2d objects/ positions canvas
34
35 Vector graphics SVG + VML JavaScript creates vector graphics nodes Reflow Rendering Paint
36
37 <path fill="none" stroke="#5cbfff" d="m52.2,40.5l47.23,55.5l38.53,70.5l33.88,85.5l36.63,100.5l50.1,115.5l70.7,130.5l97.85,145.5l123.65,160.5l139.3,175.5l126.2,19 0.5L132.95,205.5L157.58,220.5L143.85,235.5L155.25,250.5L151.43, 265.5L149.05,280.5L104.5,295.5L103.6,310.5L97.85,325.5L94.58,34 0.5L86.7,355.5L78.95,370.5L69.35,385.5M56.4,440.5L42.3,455.5L32.93,470.5L26.38,485.5L28.23,500.5L28.95,515.5L40.45,530.5L57.55,545.5L80.18,560.5L123.55,575.5L144.95,590.5L137.33,605.5L ,620.5L149.7,635.5L162.73,650.5L142.83,665.5L164.2,680.5L ,695.5L97.28,710.5L88.75,725.5L90.83,740.5L87.15,755.5L85.15,7 70.5L62.55,785.5M52.78,840.5L41.5,855.5L33.1,870.5L22.38,885.5L 25.63,900.5L24.05,915.5L33.05,930.5L48.3,945.5L65.35,960.5L115. 2,975.5L137.7,990.5L136.43,1005.5L102.28,1020.5L132.28,1035.5L1 37.5,1050.5L132.05,1065.5L155.83,1080.5L107.3,1095.5L95.98,1110.5L94.73,1125.5L94.65,1140.5L86.25,1155.5L83.4,1170.5L70.48, M58.6,1240.5L43.38,1255.5L33.35,1270.5L28.43,1285.5L29.05, L38.43,1315.5L51.35,1330.5L82.38,1345.5L105.73,1360.5L ,1375.5L176.05,1390.5L164.13,1405.5L139.48,1420.5L131.53, L164.83,1450.5L161.15,1465.5L157.2,1480.5L112.68,1495.5L105.68,1510.5L103.83,1525.5L104.25,1540.5L92.5,1555.5L91.35,1570.5L70.48,1585.5M54.05,1640.5L48.6,1655.5L35.02,1670.5L32.8,1685.5L36.98,1700.5L41.75,1715.5L63.78,1730.5L90.6,1745.5L112.28,1760.5L ,1775.5L171.2,1790.5L180.43,1805.5L171.88,1820.5L168.65, L153.88,1850.5L148.35,1865.5L140.28,1880.5L110.2,1895.5L ,1910.5L101.2,1925.5L96.7,1940.5L96.5,1955.5L80.08,1970.5L6 8.4,1985.5M54.8,2040.5L41.23,2055.5L35.85,2070.5L30.15,2085.5L3
38
39
40 WebGL shaders Timer JavaScript Paint
41 WebGL <script id="vshader" type="x- shader/x- vertex"> uniform mat4 u_modelviewmatrix; uniform mat4 u_modelviewprojmatrix; uniform mat4 u_normalmatrix; uniform vec3 lightdir; attribute vec3 vnormal; attribute vec4 vtexcoord; attribute vec4 vposition; varying float v_dot; varying vec2 v_texcoord; void main() { gl_position = u_modelviewprojmatrix * vposition; v_texcoord = vtexcoord.st; vec4 transnormal = u_normalmatrix * vec4(vnormal,1); v_dot = max(dot(transnormal.xyz, lightdir), 0.0); } </script>
42 var examplescene = scene( {}, /* A renderer node binds subnodes to a WebGL canvas element defined in the HTML tab then clears the depth and colour buffers */ renderer({ canvasid: 'thecanvas', clear : { depth : true, color : true} }, /* A simple phong GLSL shader to render sub- nodes, with a single light source. This shader type only supports a one light source. */ shader( { type: 'simple- shader' }, lights( { lights: [ { pos: { x: , y: 30.0, z: } } ]}, /* Perspective transformation */ scenejs.org
43
44
45 firefox/nightly/latest-trunk/
46
47 JavaScript & CSS CSS Transforms & Animations 2D bitmapped graphics Physics engines Vector graphics HTML5 video WebGL
48
Introduction to HTML5
Introduction to HTML5 History of HTML 1991 HTML first published 1995 1997 1999 2000 HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 After HTML 4.01 was released, focus shifted to XHTML and its stricter standards.
More informationImplementing a chat button on TECHNICAL PAPER
Implementing a chat button on TECHNICAL PAPER Contents 1 Adding a Live Guide chat button to your Facebook page... 3 1.1 Make the chat button code accessible from your web server... 3 1.2 Create a Facebook
More informationCreate a cool image gallery using CSS visibility and positioning property
GRC 275 A8 Create a cool image gallery using CSS visibility and positioning property 1. Create a cool image gallery, having thumbnails which when moused over display larger images 2. Gallery must provide
More informationA designers guide to creating & editing templates in EzPz
A designers guide to creating & editing templates in EzPz Introduction...2 Getting started...2 Actions...2 File Upload...3 Tokens...3 Menu...3 Head Tokens...4 CSS and JavaScript included files...4 Page
More informationBCA611 Video Oyunları için 3B Grafik
BCA611 Video Oyunları için 3B Grafik WebGL - Shader Programming Zümra Kavafoğlu Canvas element The HTML element is used to draw graphics on a web page. Create canvas with id, width and height
More informationVebra Search Integration Guide
Guide Introduction... 2 Requirements... 2 How a Vebra search is added to your site... 2 Integration Guide... 3 HTML Wrappers... 4 Page HEAD Content... 4 CSS Styling... 4 BODY tag CSS... 5 DIV#s-container
More informationOpenGL shaders and programming models that provide object persistence
OpenGL shaders and programming models that provide object persistence COSC342 Lecture 22 19 May 2016 OpenGL shaders We discussed forms of local illumination in the ray tracing lectures. We also saw that
More informationMining the Rendering Power in Web Browsers. Jianxia Xue Jan. 28, 2014
Mining the Rendering Power in Web Browsers Jianxia Xue Jan. 28, 2014 Outline Web application as software deployment platform WebGL: Graphics API inside browsers Explore browser rendering capability through
More informationComp4422. Computer Graphics. Lab 02: WebGL API Prof. George Baciu. PQ838 x7272.
Comp4422 Computer Graphics Lab 02: WebGL API www.comp.polyu.edu.hk/~csgeorge/comp4422 Prof. George Baciu csgeorge@comp.polyu.edu.hk PQ838 x7272 9/6/2018 COMP4422 Lab 02 George Baciu 2018 1 WebGL Prerequisites
More informationWebGL A quick introduction. J. Madeira V. 0.2 September 2017
WebGL A quick introduction J. Madeira V. 0.2 September 2017 1 Interactive Computer Graphics Graphics library / package is intermediary between application and display hardware Application program maps
More informationWhat is XHTML? XHTML is the language used to create and organize a web page:
XHTML Basics What is XHTML? XHTML is the language used to create and organize a web page: XHTML is newer than, but built upon, the original HTML (HyperText Markup Language) platform. XHTML has stricter
More informationHTML5 and CSS3: New Markup & Styles for the Emerging Web. Jason Clark Head of Digital Access & Web Services Montana State University Library
HTML5 and CSS3: New Markup & Styles for the Emerging Web Jason Clark Head of Digital Access & Web Services Montana State University Library Overview Revolution or Evolution? New Features and Functions
More informationWebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics.
About the Tutorial WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics. This tutorial starts with a basic introduction
More informationX3DOM Getting declarative (X)3D into HTML
X3DOM Getting declarative (X)3D into HTML WebGL BOF, Siggraph 2010 Johannes Behr & Yvonne Jung Virtual and Augmented Reality Group, Fraunhofer IGD, Darmstadt, Germany johannes.behr@igd.fraunhofer.de Motivation
More informationRasterization-based pipeline
Rasterization-based pipeline Interactive Graphics: Color and Images 10/2/2014 Pagina 1 Rasterization-based rendering Input: set of vertices and its associated attributes Algorithm goes through several
More informationHTML Overview. With an emphasis on XHTML
HTML Overview With an emphasis on XHTML What is HTML? Stands for HyperText Markup Language A client-side technology (i.e. runs on a user s computer) HTML has a specific set of tags that allow: the structure
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 informationBuilding Desktop RIAs with PHP, HTML & Javascript in AIR. Ed Finkler, ZendCon08, September 17, 2008 funkatron.com /
Building Desktop RIAs with PHP, HTML & Javascript in AIR Ed Finkler, ZendCon08, September 17, 2008 funkatron.com / funkatron@gmail.com What is AIR? For the desktop Not a browser plugin Build desktop apps
More informationNew Media Production HTML5
New Media Production HTML5 Modernizr, an HTML5 Detection Library Modernizr is an open source, MIT-licensed JavaScript library that detects support
More informationHTML5 and Mobile: New Markup & Styles for the Mobile Web. Jason Clark Head of Digital Access & Web Services Montana State University Libraries
HTML5 and Mobile: New Markup & Styles for the Mobile Web Jason Clark Head of Digital Access & Web Services Montana State University Libraries Overview Demos View some code bits New Features and Functions
More informationFirst, create a web page with a submit button on it (remember from creating forms in html?):
Changing Style So far we have only done a little with changing the style of a web page. JavaScript lets us do that as well. We can call a function that allows us to change the style of one or many elements
More informationProgramming with OpenGL Complete Programs Objectives Build a complete first program
Programming with OpenGL Complete Programs Objectives Build a complete first program Introduce shaders Introduce a standard program structure Simple viewing Two-dimensional viewing as a special case of
More informationIntroduction to OpenGL/GLSL and WebGL GLSL
Introduction to OpenGL/GLSL and WebGL GLSL Objectives! Give you an overview of the software that you will be using this semester! OpenGL, WebGL, and GLSL! What are they?! How do you use them?! What does
More informationSchenker AB. Interface documentation Map integration
Schenker AB Interface documentation Map integration Index 1 General information... 1 1.1 Getting started...1 1.2 Authentication...1 2 Website Map... 2 2.1 Information...2 2.2 Methods...2 2.3 Parameters...2
More informationLab 4 CSS CISC1600, Spring 2012
Lab 4 CSS CISC1600, Spring 2012 Part 1 Introduction 1.1 Cascading Style Sheets or CSS files provide a way to control the look and feel of your web page that is more convenient, more flexible and more comprehensive
More informationGIMP WEB 2.0 MENUS. Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar.
GIMP WEB 2.0 MENUS Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar. Standard Navigation Bar Web 2.0 Navigation Bar Now the all-important question
More informationHTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.
HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information
More informationDesign Project. i385f Special Topics in Information Architecture Instructor: Don Turnbull. Elias Tzoc
Design Project Site: News from Latin America Design Project i385f Special Topics in Information Architecture Instructor: Don Turnbull Elias Tzoc April 3, 2007 Design Project - 1 I. Planning [ Upper case:
More informationWeb Development & Design Foundations with XHTML. Chapter 2 Key Concepts
Web Development & Design Foundations with XHTML Chapter 2 Key Concepts Learning Outcomes In this chapter, you will learn about: XHTML syntax, tags, and document type definitions The anatomy of a web page
More informationBookmarks to the headings on this page:
Squiz Matrix User Manual Library The Squiz Matrix User Manual Library is a prime resource for all up-to-date manuals about Squiz's flagship CMS Easy Edit Suite Current for Version 4.8.1 Installation Guide
More informationTitle: Dec 11 3:40 PM (1 of 11)
... basic iframe body {color: brown; font family: "Times New Roman"} this is a test of using iframe Here I have set up two iframes next to each
More informationJavaScript (5A) JavaScript
JavaScript (5A) JavaScript Copyright (c) 2012 Young W. Lim. Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any
More informationWebGL. Creating Interactive Content with WebGL. Media #WWDC14. Session 509 Dean Jackson and Brady Eidson WebKit Engineers
Media #WWDC14 WebGL Creating Interactive Content with WebGL Session 509 Dean Jackson and Brady Eidson WebKit Engineers 2014 Apple Inc. All rights reserved. Redistribution or public display not permitted
More informationWebGL Seminar: O3D. Alexander Lokhman Tampere University of Technology
WebGL Seminar: O3D Alexander Lokhman Tampere University of Technology What is O3D? O3D is an open source JavaScript API for creating rich, interactive 3D applications in the browser Created by Google and
More informationWireframe :: tistory wireframe tistory.
Page 1 of 45 Wireframe :: tistory wireframe tistory Daum Tistory GO Home Location Tags Media Guestbook Admin 'XHTML+CSS' 7 1 2009/09/20 [ ] XHTML CSS - 6 (2) 2 2009/07/23 [ ] XHTML CSS - 5 (6) 3 2009/07/17
More informationCS452/552; EE465/505. Image Formation
CS452/552; EE465/505 Image Formation 1-15-15 Outline! Image Formation! Introduction to WebGL, continued Draw a colored triangle using WebGL Read: Angel, Chapters 2 & 3 Homework #1 will be available on
More informationTRAINING GUIDE. Rebranding Lucity Web
TRAINING GUIDE Rebranding Lucity Web Rebranding Lucity Web Applications In this booklet, we ll show how to make the Lucity web applications your own by matching your agency s style. Table of Contents Web
More informationUsing CSS for page layout
Using CSS for page layout Advantages: Greater typographic control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control Increased accessibility
More informationdjango-sekizai Documentation
django-sekizai Documentation Release 0.6.1 Jonas Obrist September 23, 2016 Contents 1 About 3 2 Dependencies 5 3 Usage 7 3.1 Configuration............................................... 7 3.2 Template
More informationWebGL and GLSL Basics. CS559 Fall 2015 Lecture 10 October 6, 2015
WebGL and GLSL Basics CS559 Fall 2015 Lecture 10 October 6, 2015 Last time Hardware Rasterization For each point: Compute barycentric coords Decide if in or out.7,.7, -.4 1.1, 0, -.1.9,.05,.05.33,.33,.33
More informationOverview. Part I: Portraying the Internet as a collection of online information systems HTML/XHTML & CSS
CSS Overview Part I: Portraying the Internet as a collection of online information systems Part II: Design a website using HTML/XHTML & CSS XHTML validation What is wrong?
More informationUsing an ArcGIS Server.Net version 10
Using an ArcGIS Server.Net version 10 Created by Vince DiNoto Vince.dinoto@kctcs.edu Contents Concept... 2 Prerequisites... 2 Data... 2 Process... 3 Creating a Service... 3 Down Loading Shapefiles... 3
More informationHTML HTML. Chris Seddon CRS Enterprises Ltd 1
Chris Seddon seddon-software@keme.co.uk 2000-12 CRS Enterprises Ltd 1 2000-12 CRS Enterprises Ltd 2 Reference Sites W3C W3C w3schools DevGuru Aptana GotAPI Dog http://www.w3.org/ http://www.w3schools.com
More informationLA TROBE UNIVERSITY SEMESTER ONE EXAMINATION PERIOD CAMPUS AW BE BU MI SH ALLOWABLE MATERIALS
LIBRARY USE LA TROBE UNIVERSITY SEMESTER ONE EXAMINATION PERIOD 2013 Student ID: Seat Number: Unit Code: CSE2WD Paper No: 1 Unit Name: Paper Name: Reading Time: Writing Time: Web Development Final 15 minutes
More informationWeb Publishing Basics I
Web Publishing Basics I Jeff Pankin Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What is HTML?... 3 What are the basic
More informationIntroduction to HTML5
Introduction to HTML5 Michael(tm) Smith mike@w3.org http://people.w3.org/mike sideshowbarker on Twitter, etc. I work for the W3C in Japan, based at Keio University near Tokyo My official W3C title is:
More informationHow the Internet Works
How the Internet Works The Internet is a network of millions of computers. Every computer on the Internet is connected to every other computer on the Internet through Internet Service Providers (ISPs).
More informationInline Elements Karl Kasischke WCC INP 150 Winter
Inline Elements 2009 Karl Kasischke WCC INP 150 Winter 2009 1 Inline Elements Emphasizing Text Increasing / Decreasing Text Size Quotes and Citations Code, Variables, and Sample Output Spanning Text Subscripts
More informationC P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE. Mikhail Bessmeltsev
C P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE UGRAD.CS.UBC.C A/~CS314 Mikhail Bessmeltsev 1 WHAT IS RENDERING? Generating image from a 3D scene 2 WHAT IS RENDERING? Generating image
More information2D graphics with WebGL
2D graphics with WebGL Some material contained here is adapted from the book s slides. September 7, 2015 (Dr. Mihail) 2D graphics September 7, 2015 1 / 22 Graphics Pipeline (Dr. Mihail) 2D graphics September
More informationImage Processing. HTML5 Canvas JavaScript Pixels
Image Processing HTML5 Canvas JavaScript Pixels Brent M. Dingle, Ph.D. 2015 Game Design and Development Program Mathematics, Statistics and Computer Science University of Wisconsin - Stout Provide Examples
More informationWebGL and GLSL Basics. CS559 Fall 2016 Lecture 14 October
WebGL and GLSL Basics CS559 Fall 2016 Lecture 14 October 24 2016 Review Hardware Rasterization For each point: Compute barycentric coords Decide if in or out.7,.7, -.4 1.1, 0, -.1.9,.05,.05.33,.33,.33
More informationWeb Publishing Intermediate 2
Web Publishing Intermediate 2 Building a Three Column Site with divs and float Jeff Pankin Information Services and Technology Table of Contents Course Objectives... 2 The CIG Web Site... 3 Using the Div
More informationOPENGL RENDERING PIPELINE
CPSC 314 03 SHADERS, OPENGL, & JS UGRAD.CS.UBC.CA/~CS314 Textbook: Appendix A* (helpful, but different version of OpenGL) Alla Sheffer Sep 2016 OPENGL RENDERING PIPELINE 1 OPENGL RENDERING PIPELINE Javascript
More informationGoogle Web Toolkit Creating/using external JAR files
Google Web Toolkit Creating/using external JAR files If you develop some code that can be reused in more than one project, one way to create a module is to create an external JAR file. This JAR file can
More informationRecall: Document Object Model (DOM)
Page 1 Document Object Model (DOM) CSE 190 M (Web Programming), Spring 2007 University of Washington References: Forbes/Steele, Chipman (much of this content was stolen from them) Recall: Document Object
More informationCS559 Computer Graphics Fall 2015
CS559 Computer Graphics Fall 2015 Practice Midterm Exam Time: 2 hrs 1. [XX Y Y % = ZZ%] MULTIPLE CHOICE SECTION. Circle or underline the correct answer (or answers). You do not need to provide a justification
More informationInternet publishing HTML (XHTML) language. Petr Zámostný room: A-72a phone.:
Internet publishing HTML (XHTML) language Petr Zámostný room: A-72a phone.: 4222 e-mail: petr.zamostny@vscht.cz Essential HTML components Element element example Start tag Element content End tag
More informationComputer Graphics with OpenGL ES (J. Han) Chapter 6 Fragment shader
Computer Graphics with OpenGL ES (J. Han) Chapter 6 Fragment shader Vertex and Fragment Shaders The inputs to the fragment shader Varyings: The per-vertex output variables produced by the vertex shader
More informationScripting. Web Architecture and Information Management [./] Spring 2009 INFO (CCN 42509) Contents
Contents Scripting Contents Web Architecture and Information Management [./] Spring 2009 INFO 190-02 (CCN 42509) Erik Wilde, UC Berkeley School of Information [http://creativecommons.org/licenses/by/3.0/]
More informationCOMP371 COMPUTER GRAPHICS
COMP371 COMPUTER GRAPHICS SESSION 12 PROGRAMMABLE SHADERS Announcement Programming Assignment #2 deadline next week: Session #7 Review of project proposals 2 Lecture Overview GPU programming 3 GPU Pipeline
More informationMODULE 2 HTML 5 FUNDAMENTALS. HyperText. > Douglas Engelbart ( )
MODULE 2 HTML 5 FUNDAMENTALS HyperText > Douglas Engelbart (1925-2013) Tim Berners-Lee's proposal In March 1989, Tim Berners- Lee submitted a proposal for an information management system to his boss,
More informationVisualizing Information with
Visualizing Information with HTML5 @synodinos 35,000 years ago Chauvet cave, southern France By far the oldest paintings ever discovered Hundreds of paintings At least 13 different species Viubk source
More informationHow I Learned to Stop Worrying and Love the KSS
How I Learned to Stop Worrying and Love the KSS Part 1: Client/Server Actions Chris Calloway TriZPUG November 2007 Thanks to BubbleNet and Greenfinity KSS? Kinetic Style Sheets Keep It Stupid Simple Javascript-free
More informationPart A Short Answer (50 marks)
Part A Short Answer (50 marks) NOTE: Answers for Part A should be no more than 3-4 sentences long. 1. (5 marks) What is the purpose of HTML? What is the purpose of a DTD? How do HTML and DTDs relate to
More informationintroduction to XHTML
introduction to XHTML XHTML stands for Extensible HyperText Markup Language and is based on HTML 4.0, incorporating XML. Due to this fusion the mark up language will remain compatible with existing browsers
More informationEverything you need to know to get you started. By Kevin DeRudder
Everything you need to know to get you started with HTML5 By Kevin DeRudder @kevinderudder working for eguidelines and a lecturer at the Technical University of West Flanders. Contact me on kevin@e-guidelines.be
More informationShadows. Prof. George Wolberg Dept. of Computer Science City College of New York
Shadows Prof. George Wolberg Dept. of Computer Science City College of New York Objectives Introduce Shadow Algorithms Expand to projective textures 2 Flashlight in the Eye Graphics When do we not see
More informationUsing Java with HTML5 and CSS3 (+ the whole HTML5 world: WebSockets, SVG, etc...)
Using Java with HTML5 and CSS3 (+ the whole HTML5 world: WebSockets, SVG, etc...) Helder da Rocha Independent Java & Web professional Argo Navis Informatica Ltda. São Paulo, Brazil helder@argonavis.com.br
More informationUnit Notes. ICAWEB411A Produce basic client-side script for dynamic web pages Topic 1 Introduction to JavaScript
Unit Notes ICAWEB411A Produce basic client-side script for dynamic web pages Topic 1 Introduction to JavaScript Copyright, 2013 by TAFE NSW - North Coast Institute Date last saved: 18 September 2013 by
More informationWebGL. Announcements. WebGL for Graphics Developers. WebGL for Web Developers. Homework 5 due Monday, 04/16. Final on Tuesday, 05/01
Announcements Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2012 Homework 5 due Monday, 04/16 In-class quiz Wednesday, 04/18 Final on Tuesday, 05/01 6-8pm David Rittenhouse Lab A7 Networking
More informationCP3343 Computer Science Project (Year) Technical Report Document. Mr Stephen Garner
CP3343 Computer Science Project (Year) Technical Report Document Mr Stephen Garner Colin Hopson 0482647 Wednesday 23 rd April 2008 i Contents 1 Introduction... 1 2 The Program Listing... 1 2.1 ASP.Net
More informationMicronet International College
Micronet International College Level 4 Diploma in Computing Designing and Developing a Website (DDW) Test 1 (20%) Name: /50 Class: QUESTION 1 a) I) What are W3C standards? 1 Specifications or descriptions
More informationLecture 17: Shading in OpenGL. CITS3003 Graphics & Animation
Lecture 17: Shading in OpenGL CITS3003 Graphics & Animation E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Objectives Introduce the OpenGL shading methods - per vertex shading
More informationJavaScript I.b CSCI311
JavaScript I.b CSCI311 Learning Objectives Learn basic JavaScript control and data structures arrays objects loops JavaScript used for user events and reactions compute values and display results change
More informationThe Projection Matrix
The Projection Matrix Lecture 5 Robb T. Koether Hampden-Sydney College Wed, Aug 30, 2017 Robb T. Koether (Hampden-Sydney College) The Projection Matrix Wed, Aug 30, 2017 1 / 21 Outline 1 The World Coordinate
More informationFullscreen API. Quick Guides for Masterminds. J.D Gauchat Cover Illustration by Patrice Garden
Fullscreen API Quick Guides for Masterminds J.D Gauchat www.jdgauchat.com Cover Illustration by Patrice Garden www.smartcreativz.com Quick Guides for Masterminds Copyright 2018 by John D Gauchat All Rights
More informationHere are a few easy steps to create a simple timeline. Open up your favorite text or HTML editor and start creating an HTML file.
1 of 6 02-Sep-2013 1:52 PM Getting Started with Timeline From SIMILE Widgets Contents 1 Getting Started 1.1 Note 1.2 Examples 1.3 Step 1. Link to the API 1.4 Step 2. Create a DIV Element 1.5 Step 3. Call
More informationHTML5. Language of the Modern Web. By: Mayur Agrawal. Copyright TIBCO Software Inc.
HTML5 Language of the Modern Web By: Mayur Agrawal Copyright 2000-2015 TIBCO Software Inc. Content Exploring prior standards Why HTML5? HTML5 vs HTML4 Key Features of HTML5 HTML5 and Technical Writing
More informationSUMMARY. CS380: Introduction to Computer Graphics Projection Chapter 10. Min H. Kim KAIST School of Computing 18/04/12. Smooth Interpolation
CS38: Introduction to Computer Graphics Projection Chapter Min H. Kim KAIST School of Computing Smooth Interpolation SUMMARY 2 Cubic Bezier Spline To evaluate the function c(t) at any value of t, we perform
More informationLet's take a look at what CSS looks like in Dreamweaver using the "Embedded" coding which is the styles are within the html code and not separate.
Creating web pages using CSS and Dreamweaver CS3 Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in a markup language. Its most common application
More informationMore cool scripts: Slide Show: What the settimeout() function does:
More cool scripts: Slide Show: So far the user has controlled the action. However, you can make a slide show that automatically cycles through each image in an array and goes to the next image at an incremental
More informationHTML: The Basics & Block Elements
HTML: The Basics & Block Elements CISC 282 September 13, 2017 What is HTML? Hypertext Markup Language Markup language "Set of words or symbols" Assigns properties to text Not actually part of the text
More informationLecture 5 Vertex and Fragment Shaders-1. CITS3003 Graphics & Animation
Lecture 5 Vertex and Fragment Shaders-1 CITS3003 Graphics & Animation E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Objectives The rendering pipeline and the shaders Data
More informationChapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21
Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...
More informationCSC309 Midterm Exam Summer 2007
UNIVERSITY OF TORONTO Faculty of Arts and Science Midterm Exam July 2007 CSC 309 H1 F Instructor Dr. Radu Negulescu Duration 1 hour Examination Aids: One single-sided page containing notes NAME STUDENT
More informationUNIVERSITY OF TORONTO Faculty of Arts and Science DECEMBER 2015 EXAMINATIONS. CSC309H1 F Programming on the Web Instructor: Ahmed Shah Mashiyat
UNIVERSITY OF TORONTO Faculty of Arts and Science DECEMBER 2015 EXAMINATIONS CSC309H1 F Programming on the Web Instructor: Ahmed Shah Mashiyat Duration - 2 hours No Aid Allowed, Pass Mark: 14 out of 35
More informationWebGL. WebGL. Bring 3D to the Masses. WebGL. The web has text, images, and video. We want to support. Put it in on a webpage
WebGL WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2012 The web has text, images, and video What is the next media-type? We want to support Windows, Linux, Mac Desktop and mobile 2 Bring
More informationDigital Asset Management 2. Introduction to Digital Media Format
Digital Asset Management 2. Introduction to Digital Media Format 2009-09-24 Outline Image format and coding methods Audio format and coding methods Video format and coding methods Introduction to HTML
More informationDocuments and computation. Introduction to JavaScript. JavaScript vs. Java Applet. Myths. JavaScript. Standard
Introduction to Prof. Ing. Andrea Omicini II Facoltà di Ingegneria, Cesena Alma Mater Studiorum, Università di Bologna andrea.omicini@unibo.it Documents and computation HTML Language for the description
More informationStamp Builder. Documentation. v1.0.0
Stamp Email Builder Documentation http://getemailbuilder.com v1.0.0 THANK YOU FOR PURCHASING OUR EMAIL EDITOR! This documentation covers all main features of the STAMP Self-hosted email editor. If you
More informationCS134 Web Site Design & Development. Quiz1
CS134 Web Site Design & Development Quiz1 Name: Score: Email: I Multiple Choice Questions (2 points each, total 20 points) 1. Which of the following is an example of an IP address? a. www.whitehouse.gov
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 informationGIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: You may create your button in GIMP. Mine is 122 pixels by 48 pixels. You can use whatever
More informationDreamweaver CS3 Lab 2
Dreamweaver CS3 Lab 2 Using an External Style Sheet in Dreamweaver Creating the site definition First, we'll set up the site and define it so that Dreamweaver understands the site structure for your project.
More informationHeader. Report Section. Footer
Scan&Solve Cheat Sheet for Modifying Report Format Scan&Solve uses template files to construct the web-ready reports when the [Report ] button is clicked in the View tab. These template files, located
More informationCREATING A BUTTON IN PHOTOSHOP
CREATING A BUTTON IN PHOTOSHOP Step 1: Create the Photoshop Document Our button will be exactly 170px wide and 50px tall, but we ll make a bigger canvas (600x600px) so that we have some breathing room
More informationXML Applications. Prof. Andrea Omicini DEIS, Ingegneria Due Alma Mater Studiorum, Università di Bologna a Cesena
XML Applications Prof. Andrea Omicini DEIS, Ingegneria Due Alma Mater Studiorum, Università di Bologna a Cesena Outline XHTML XML Schema XSL & XSLT Other XML Applications 2 XHTML HTML vs. XML HTML Presentation
More informationDesigning and Developing a Website. December Sample Exam Marking Scheme
Designing and Developing a Website December 2015 Sample Exam Marking Scheme This marking scheme has been prepared as a guide only to markers. This is not a set of model answers, or the exclusive answers
More informationShaders. Slide credit to Prof. Zwicker
Shaders Slide credit to Prof. Zwicker 2 Today Shader programming 3 Complete model Blinn model with several light sources i diffuse specular ambient How is this implemented on the graphics processor (GPU)?
More information