Processing.js.

Slides:

Advertisements

Similar presentations

3.02D HTML Overview 3.02 Develop webpages.

Advertisements

HTML Basics Customizing your site using the basics of HTML.

MMDE5011 – INTERACTIVE MEDIA PRACTICE 1 WEEK 1: INTRODUCTION TO HTML5

HOW TO BUILD A WEBSITE In 5 easy steps. Overview ◦ Decide on the Website’s Purpose ◦ Sketch a Rough Draft ◦ Create Content ◦ Code and Assemble Assets.

© 2010 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.

1 HTML Markup language – coded text is converted into formatted text by a web browser. Big chart on pg. 16—39. Tags usually come in pairs like – data Some.

HTML Recall that HTML is static in that it describes how a page is to be displayed, but it doesn’t provide for interaction or animation. A page created.

Including images in Web pages Skills: use the tag IT concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike.

March 9, 2011CS 1921 JavaScript Debbie Bartlett March 9, 2011.

Inline, Internal, and External FIle

Tags through Forms. This element is required for all HTML pages It must be at the top of every page of every website We’ll see later on why it is important.

Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive.

© 2011 Delmar, Cengage Learning Chapter 11 Adding Media and Interactivity with Flash and Spry.

HTML & CSS A brief introduction. OUTLINE 1.What is HTML? 2.What is CSS? 3.How are they used together? 4.Troubleshooting/Common problems 5.More resources.

Eat Your Words! Creating webpage Layout. CONTENT The Layout of a Webpage HEADER FOOTER Each of these sections represents a ‘div’ (or divider). By linking.

Basic HTML Hyper text markup Language. Re-cap  … - The tag tells the browser that this is an HTML document The html element is the outermost element.

WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.

Sharing Alice Exporting Movies, Code, and Web Pages By Elizabeth Liang under the direction of Professor Susan Rodger Duke University July 2009, modified.

HTML. WHAT IS HTML HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of.

PHP INCLUDES FOR MODULARIZATION CIT 230 – WEB FRONT-END DEVELOPMENT.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 6: Links.

Computing Theory: HTML Year 11. Lesson Objective You will: o Be able to define what HTML is - ALL o Be able to write HTML code to create your own web.

Putting Applets into Web Pages.  Two things are involved in the process of putting applets onto web pages ◦ The.class files of the applet ◦ The html.

Chapter 4 BIE1313/BPROG1203 | Web design Prepared by Mohamed Abdulkarim / Mike Ng Ah Ngan.

How To Add Flair To Your Site Maureen Enright, Elyse Kuriata, Nathan Boes, Hodge.

Add an Image. index.html about.html contact. html contact. html.

XHTML1 Images N100 Building a Simple Web Page. XHTML2 The Element The src attribute specifies the filename of an image file To include the src attribute.

Week 1 – Beginners Content McAfee & Big Fish Games CoderDojo.

Definition CSS “Short for Cascading Style Sheets, a new feature being added to HTML that gives both Web site developers and users more control over how.

Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.

YEAR 8 – WEB DESIGN IN HTML Lesson 2. STARTER Use the internet to find out what JavaScript is? Use ‘Microsoft Word’ to write down your list.

Introduction to Microsoft FrontPage Microsoft FrontPage – FrontPage is a popular WYSIWYG authoring/site management package – Combines WYSIWYG editing.

How the Web Works Building a Website – Lesson 1. How People Access the Web Browsers People access websites using software called a web browser. To view.

Adding Images. XHTML Element ElementAttributeAttribute Value Closing tag AttributeAttribute Value The src attribute supplies the name and location of.

Images Worksheet. Web template Download the template folder Unzip and save in your documents Rename the folder to “images work” without quotes.

UNIT 2 UNIT 2 Module 3: HTML Lists Overview. List There are two common types of HTML lists Ordered list numbered Unordered list bullet points.

HTML JAVASCRIPT. CONTENTS Javascript Example NOSCRIPT Tag Advantages Summary Exercise.

Are You Smarter Than a 5 th Grader? 1,000,000 5th Grade HTML 5th Grade Syntax 4th Grade HTML 4th Grade Syntax 3rd Grade HTML 3rd Grade Syntax 2nd Grade.

HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.

COMP 2923 A2 Website Development 101 Danny Silver JSOCS, Acadia University.

Chapter 11 Adding Media and Interactivity. Chapter 11 Lessons Introduction 1.Add and modify Flash objects 2.Add rollover images 3.Add behaviors 4.Add.

INTRODUCTION JavaScript can make websites more interactive, interesting, and user-friendly.

1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page.

This shows CIS17 and the first day introduction..

KompoZer. What is it? A FREE product used to design websites A FREE product used to design websites A WYSIWYG HTML Editor A WYSIWYG HTML Editor –WYSIWYG:

Your HTML website creating your first html file. Creating an HTML FIle Open note pad from accessories, programs. Write code. Save and view. In 3 Steps.

Behind every site is a mix of special languages that your web browser understands The main way of describing any website is HTML HTML stands for Hyper.

1 CSC160 Chapter 1: Introduction to JavaScript Chapter 2: Placing JavaScript in an HTML File.

Click on CIS120/17 to go to website for course. The week of will tell you what is planned for the week and what has been assigned.

Advanced Website Design Professor: Jared Kozel Class Description: Are you already familiar with how to construct a basic Website? This class will teach.

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.

Source of website: “Text/css rel=“styles heet” This is an external style sheet link. This means that the.

 A Javascript library designed to simplify client-side scripting of HTML.

Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”

HTML Links CS 1150 Spring 2017.

Intro to HTML CS 1150 Spring 2017.

Web Basics: HTML/CSS/JavaScript What are they?

Intro to HTML CS 1150 Fall 2016.

Process of Converting “PSD to HTML”

HTML Images CS 1150 Spring 2017.

HTML Vocabulary.

JQuery with ASP.NET.

HTML Images CS 1150 Fall 2016.

Computer communications

HTML Links CS 1150 Fall 2016.

Show your animation project. HTML5 video. Miro.

Presentation transcript:

processing.js

What is it? Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. Basically, it is how we put our Processing sketches onto the web.

What is it? Processing.js is built with Javascript and HTML5 It automatically converts your Processing code into Javascript so that it can appear with all its functionality on a web browser.

How does it work? 1. Download the latest version from processingjs.org

How does it work? 2. Make your Processing sketch and save your files as you usually would: *.pde Ex: sketch_aug08.pde

How does it work? 3. Make a web page that includes Processing.js and a, which is an HTML5 element. Once processing.js is in a web page, the browser will know what to do with it! You need to include a src attribute inside a script tag with the processing.js file name (and the path to get to it from your web page location)

How does it work? 3. Continued… Now, add your tag. It should have an attribute as well that calls your.pde file (and the path to get to it from your page). Save your webpage HTML with your.js and.pde files

How does it work? 4. Open your page! Javascript is telling the web browser how to obtain and show your Processing sketch on the website. You should see your images come to life!

How does it work? **Note: Processing.js does not work with ‘data’ folders like you use in Processing. Make sure you save anything that’s called in your sketch (such as images) in your web page directory the same way you would anywhere else in your HTML code.

Why Use processing.js? 1.No need for plug-ins 2.Uses web standards.

… For more information, help, and examples, visit: