Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT.

Slides:

Advertisements

Similar presentations

What is a Web Page? Web pages are a combination of text and graphics, wrapped in a special “markup” language. The markup language (Hypertext Markup Language.

Advertisements

Chapter Concepts Review Markup Languages

Use free templates to create interactive multimedia activities and assessments. Play educational games on-line.

Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.

Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.

Chapter 14 Introduction to HTML

1 Lesson 1 Quick HTML Know-How HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

SCERSIG: Creating Android Apps with App Inventor 26 October 2011 Ric Paul, Health Services Library, Southampton.

The Sixth Form College Farnborough Microsoft® Silverlight™ Jim Lyle Data Analyst The Sixth Form College Farnborough Presented at the Sixth Form Colleges’

Web Design Basic Concepts.

CHAPTER 8: Enhancing a Website Session 1. Objectives Embed a YouTube video in your website Insert a slideshow in your website Use Google fonts in your.

Web Page Introduction. What is a web page? A web page is a text file containing markup language tags. –A markup language combines text and extra information.

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

NOTE: To change the image on this slide, select the picture and delete it. Then click the Pictures icon in the placeholder to insert your own image. WEB.

WordPress Web. WordPress Blogging system with full content management Personal publishing system Built on PHP scripting language and MySQL relational.

WebMatrix 2 /* web with benefits */. Everything You Need Start create new from OSS apps or templates, or start with existing sites hosted remotely or.

CGS3066: Web Programming and Design Summer 2014 Instructor Mir Anamul Hasan.

After Your First Web Course; Where to Go from Here Bill Pegram April 23, 2014.

WaveMaker Visual AJAX Studio 4.0 Training Troubleshooting.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.

NOTE: To change the image on this slide, select the picture and delete it. Then click the Pictures icon in the placeholder to insert your own image. WEB.

Introduction to ArcGIS API for JavaScript

Campus Google Map Applications Copyright Robert Workman 2006 This work is the intellectual property of the author. Permission is granted for this material.

Build a Free Website1 Build A Website For Free 2 ND Edition By Mark Bell.

44 CHAPTER SPECIALIZED APPLICATION SOFTWARE Graphics 1. Desktop publishing 2. Image editors 3. Illustration programs 4. Image galleries 5. Graphic.

Silverlight Hitesh Trivedi Computer Science B.Tech A-Sec J.I.E.T.

Mr. Rouda’s CSCI 101 sections. What does a web page consist of? Code HTML, CSS, XHTML, XML, etc. Images Gif, jpg, png, etc. Plugins Swf, flv, etc. JavaScript.

Alice As an Interdisciplinary Teaching Tool Presented by Craig Ham Technology Coordinator, US/MS Computer Teacher Westminster Schools, Augusta GA.

COMPUTER SOFTWARE. By: Brooke Roberts And Amber Steigerwald.

Mobile web Sebastian Lopienski IT Technical Forum 29 June 2012.

Google Tools Preview Party.  Because they are free  High quality applications and services  Constantly enhancing existing features and adding new applications.

George Gonsalves.  Free and lightweight web development tool.  Create, publish, and maintain your website  Optimized for Open Source  Designed for.

Telling Stories With Clickable Hotspots Using Adobe Flash Jerry Dunklee Robert Workman.

ICT for IGCSE – Syllabus Cambridge IGCSE ® Information and Communication Technology0417.

Google Image Search, Code, Fusion Tables Audrey and Chris.

Digital Design for the Web Digital Design Schedule Semester 1: 6 Wk Grades –Web Products Website Evaluation DreamWeaver 12 Wk Grades.

Extending the Operations Dashboard

Google Docs, Forms and Video Mashup Using HTML5 for Assessment Applications Robert Workman Southern Connecticut State University

CLOUD BASED INTRODUCTION TO COMPUTER SCIENCE Prepared for presentation at the International Conference on Internet Studies August 16-17, 2014 Singapore.

Creatavist.com Michael Sluby and Jess Parker. General Information Creatavist is a storytelling platform launched by the Atavist in 2011 Free, $10 per.

Digital Story Telling with Google Maps: Polish Designed Planes in the 1930s Turkish Air Force Sixth International Conference on e-Learning and Innovative.

Lesson 3-Multimedia Skills. Overview Members of a multimedia team. Roles and responsibilities in a multimedia team.

Robert Workman Southern Connecticut State University Prepared for presentation at the: World Conference on E-Learning New Orleans,

Web 2.0: Concepts and Applications 11 The Web Becomes 2.0.

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.

Chapter 1 Introduction to HTML, XHTML, and CSS HTML5 & CSS 7 th Edition.

Teaching with Technology February 4, Educational Technology Video Play.

Web Page Creation Standard Grade Computing. WWW n The World Wide Web is a collection of information held in multimedia form on the Internet. n This information.

A computer contains two major sets of tools, software and hardware. Software is generally divided into Systems software and Applications software. Systems.

Beginning JavaScript 4 th Edition. Chapter 1 Introduction to JavaScript and the Web.

Learning Aim B.  In this section, you will consider the resources necessary for designing your website.  You will also think about any constraints that.

Learning Aim C.  Creating web pages involves many considerations.  In this section we will look at the different software tools you can use and how.

CALL created EE materials By Iain Davey Kyoto University of Foreign Studies, Japan GloCALL 2010 Kota Kinbalu, Sabah, Malaysia By Iain Davey Kyoto University.

Microsoft Expression Web - Illustrated Unit A: Getting Started With Microsoft Expression Web.

丁建文國立高雄應用科大資管系副教授兼任計網中心軟體發展組組長跨平台行動應用軟體開發技術 : HTML5 & Mobile JavaScript Framework 暨南大學.

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

Tutorial 1 Getting Started with Adobe Dreamweaver CS5.

Interactive Video Maps Using Flash ActionScript – Theory and Practice Winnie Yu - Robert Workman –

Getting Started with HTML

Chapter 1 Introduction to Visual Basic

JQuery Fundamentals Introduction Tutorial Videos

Ternary Technology Our aim to satisfy customer Office : Road #12, Sector : 12, House : 07, Uttara , Dhaka-1230.

Features of Authoring Tools

Web Concepts Lesson 2 ITBS2203 E-Commerce for IT.

Computer Assisted Language Learning & Multimedia Language Learning

Chapter 3 – part2.

Secure Web Programming

Slides prepared by Sarah Benis Scheier-Dolberg

Presentation transcript:

Developing Structured Interactive Multimedia Applications with HTML5 Robert Workman, Hrvoje Podnar Southern Connecticut State University, New Haven, CT Ed Media World Conference on Educational Media and Technology Denver, Colorado Wednesday, June 27, 2012 Room 3, 3:25 PM

Mobile App - Regicides in New Haven Digital Story Telling Applications Mobil Multimedia Multiplatform Location Aware (maps) Built in Assessment

The Structured Stories

Early Modern English History

Beheading Charles I

Multiplatform – jQuery Mobile

Featured jQuery Mobile /

Stanford Mobile - Example Program College mobile site -

Firefox, Firebug > Open With Editor Tools > Web Developer > Firebug > Open With Editor

Editor – Notepad++ Notepad++: a free source code editor which supports several programming languages running under the MS Windows environment

Google Maps John Dixwell (1607 – 18 March 1689)

Summary HTML5 jQuery Mobile – Multiplatform applications Notepad++ -- Editor Firefox, Firebug – copy edit code development-tools/firebug-tutorials.php youTube Video Google Maps PHP – Assessment Forms processing SQL – Assessment Presentation

Assessment – Forms Processing

/1916/A-carrier-pigeon-with-a-camera-for-photo-reconnaissance-The-time-between-shots-can-be-set/

Location-Aware Browsing

Forms Processing Your Name:...

HML5 Mobil Features

Abstract HTML5 along with CSS and JavaScript (HTML5) has become the interactive multimedia application development tool of choice. A problem with HTML5 is that applications can quickly become very complex. Our approach to getting started with HTML5 has been to develop a series of structured digital story telling applications that can be created with a limited subset of HTML5. The story telling structure we use consists of timelines, maps, or hierarchical structures such as family trees, all with clickable buttons. Our HTML5 templates contain code for defining and locating buttons; controlling button events such as onmouseover and onmouseout, playing video and audio files, and displaying images. This presentation will be illustrated with examples of our applications working on desktops and mobile phones. The code used to create the applications and our experience teaching others will be discussed.